From 0a42592dbf019b45de8b2b0ef8648b210d1a5552 Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Tue, 12 Nov 2024 17:41:55 -0800
Subject: [PATCH 1/4] feat: migrate to svelte 5

---
 app/package-lock.json                         | 127 ++++++----
 app/package.json                              |   6 +-
 .../lib/components/address-multichain.svelte  |  10 +-
 app/src/lib/components/asset-card.svelte      |  13 +-
 .../lib/components/balances-overview.svelte   |  12 +-
 .../components/card-animated-border.svelte    |  23 +-
 app/src/lib/components/chains-gate.svelte     |   7 +-
 app/src/lib/components/connect/connect.svelte | 104 ++++----
 .../lib/components/connect/connection.svelte  |  51 ++--
 .../connect/metamask-mobile-alert.svelte      |   6 +-
 app/src/lib/components/details-heading.svelte |  10 +-
 app/src/lib/components/dev-tools.svelte       |   7 +-
 .../lib/components/draft-page-notice.svelte   |   6 +-
 .../lib/components/explorer-pagination.svelte |   2 +
 .../lib/components/explorer-precise.svelte    |  23 +-
 .../explorer-table-paginated.svelte           |  10 +-
 app/src/lib/components/footer.svelte          |   5 +-
 app/src/lib/components/kbd.svelte             |  11 +-
 app/src/lib/components/loading-bar.svelte     |   6 +-
 app/src/lib/components/loading-dots.svelte    |   8 +-
 app/src/lib/components/loading-logo.svelte    |   8 +-
 .../components/navigation/navigation.svelte   |   1 +
 app/src/lib/components/not-connected.svelte   |  28 ++-
 app/src/lib/components/online-status.svelte   |  34 +--
 app/src/lib/components/packet-details.svelte  |   8 +-
 app/src/lib/components/packet-path.svelte     |  10 +-
 app/src/lib/components/precise.svelte         |  34 ++-
 .../components/preloading-indicator.svelte    |   6 +-
 app/src/lib/components/search/cmdk.svelte     | 228 ++++++++++--------
 .../lib/components/search/search-bar.svelte   |  17 +-
 app/src/lib/components/spinner-svg.svelte     |   8 +-
 .../components/spinning-logo/square.svelte    |  17 +-
 .../spinning-outline-logo-three.svelte        |  12 +-
 .../components/spinning-outline-logo.svelte   |   2 +-
 app/src/lib/components/stats-bar-stat.svelte  |  20 +-
 app/src/lib/components/stepper.svelte         |   8 +-
 .../components/table-cells/cell-assets.svelte |   9 +-
 .../table-cells/cell-chain-index.svelte       |  11 +-
 .../components/table-cells/cell-copy.svelte   |  14 +-
 .../table-cells/cell-duration-text.svelte     |   6 +-
 .../table-cells/cell-icon-tooltip.svelte      | 112 +++++----
 .../table-cells/cell-origin-channel.svelte    |  11 +-
 .../table-cells/cell-origin-connection.svelte |  11 +-
 .../table-cells/cell-origin-transfer.svelte   |  13 +-
 .../components/table-cells/cell-origin.svelte |  11 +-
 .../table-cells/cell-plain-text.svelte        |   9 +-
 .../table-cells/cell-sequence.svelte          |  11 +-
 .../components/table-cells/cell-status.svelte |   9 +-
 .../table-cells/cell-timestamp.svelte         |   6 +-
 app/src/lib/components/tables/packets.svelte  |  13 +-
 app/src/lib/components/time-elapsed.svelte    |  10 +-
 .../lib/components/transfer-details.svelte    |   6 +-
 .../transfers-table/transfers-table.svelte    |  10 +-
 app/src/lib/components/truncate.svelte        |  11 +-
 .../alert-dialog/alert-dialog-action.svelte   |  20 +-
 .../alert-dialog/alert-dialog-cancel.svelte   |  20 +-
 .../alert-dialog/alert-dialog-content.svelte  |  24 +-
 .../alert-dialog-description.svelte           |  14 +-
 .../alert-dialog/alert-dialog-footer.svelte   |  14 +-
 .../alert-dialog/alert-dialog-header.svelte   |  14 +-
 .../alert-dialog/alert-dialog-overlay.svelte  |  17 +-
 .../alert-dialog/alert-dialog-portal.svelte   |  10 +-
 .../ui/alert-dialog/alert-dialog-title.svelte |  16 +-
 .../ui/avatar/avatar-fallback.svelte          |  14 +-
 .../components/ui/avatar/avatar-image.svelte  |  15 +-
 .../lib/components/ui/avatar/avatar.svelte    |  16 +-
 app/src/lib/components/ui/badge/badge.svelte  |  24 +-
 .../lib/components/ui/button/button.svelte    |  38 ++-
 .../components/ui/card/card-content.svelte    |  14 +-
 .../ui/card/card-description.svelte           |  14 +-
 .../lib/components/ui/card/card-footer.svelte |  14 +-
 .../lib/components/ui/card/card-header.svelte |  14 +-
 .../lib/components/ui/card/card-title.svelte  |  16 +-
 app/src/lib/components/ui/card/card.svelte    |  14 +-
 .../components/ui/checkbox/checkbox.svelte    |  31 ++-
 .../ui/collapsible/collapsible-content.svelte |  16 +-
 .../ui/command/command-dialog.svelte          |  27 ++-
 .../ui/command/command-empty.svelte           |  14 +-
 .../ui/command/command-group.svelte           |  14 +-
 .../ui/command/command-input.svelte           |  13 +-
 .../components/ui/command/command-item.svelte |  24 +-
 .../components/ui/command/command-list.svelte |  14 +-
 .../ui/command/command-separator.svelte       |  11 +-
 .../ui/command/command-shortcut.svelte        |  14 +-
 .../lib/components/ui/command/command.svelte  |  16 +-
 .../ui/dialog/dialog-content.svelte           |  32 ++-
 .../ui/dialog/dialog-description.svelte       |  14 +-
 .../components/ui/dialog/dialog-footer.svelte |  14 +-
 .../components/ui/dialog/dialog-header.svelte |  14 +-
 .../ui/dialog/dialog-overlay.svelte           |  25 +-
 .../components/ui/dialog/dialog-portal.svelte |  10 +-
 .../components/ui/dialog/dialog-title.svelte  |  14 +-
 .../ui/drawer/drawer-content.svelte           |  14 +-
 .../ui/drawer/drawer-description.svelte       |  16 +-
 .../components/ui/drawer/drawer-footer.svelte |  16 +-
 .../components/ui/drawer/drawer-header.svelte |  16 +-
 .../components/ui/drawer/drawer-nested.svelte |  22 +-
 .../ui/drawer/drawer-overlay.svelte           |  16 +-
 .../components/ui/drawer/drawer-title.svelte  |  16 +-
 .../lib/components/ui/drawer/drawer.svelte    |  22 +-
 .../dropdown-menu-checkbox-item.svelte        |  16 +-
 .../dropdown-menu-content.svelte              |  27 ++-
 .../dropdown-menu/dropdown-menu-item.svelte   |  16 +-
 .../dropdown-menu/dropdown-menu-label.svelte  |  16 +-
 .../dropdown-menu-radio-group.svelte          |  12 +-
 .../dropdown-menu-radio-item.svelte           |  16 +-
 .../dropdown-menu-separator.svelte            |  11 +-
 .../dropdown-menu-shortcut.svelte             |  14 +-
 .../dropdown-menu-sub-content.svelte          |  26 +-
 .../dropdown-menu-sub-trigger.svelte          |  16 +-
 app/src/lib/components/ui/input/input.svelte  |  53 ++--
 app/src/lib/components/ui/label/label.svelte  |  14 +-
 .../ui/pagination/pagination-content.svelte   |  14 +-
 .../ui/pagination/pagination-ellipsis.svelte  |  11 +-
 .../ui/pagination/pagination-item.svelte      |  14 +-
 .../ui/pagination/pagination-link.svelte      |  27 ++-
 .../pagination/pagination-next-button.svelte  |  40 +--
 .../pagination/pagination-prev-button.svelte  |  40 +--
 .../ui/pagination/pagination.svelte           |  48 ++--
 .../ui/popover/popover-content.svelte         |  24 +-
 .../ui/resizable/resizable-handle.svelte      |  12 +-
 .../ui/resizable/resizable-pane-group.svelte  |  27 ++-
 .../scroll-area/scroll-area-scrollbar.svelte  |  13 +-
 .../ui/scroll-area/scroll-area.svelte         |  27 ++-
 .../ui/select/select-content.svelte           |  35 ++-
 .../components/ui/select/select-item.svelte   |  29 ++-
 .../components/ui/select/select-label.svelte  |  14 +-
 .../ui/select/select-separator.svelte         |  11 +-
 .../ui/select/select-trigger.svelte           |  26 +-
 .../components/ui/separator/separator.svelte  |  15 +-
 .../components/ui/sheet/sheet-content.svelte  |  34 ++-
 .../ui/sheet/sheet-description.svelte         |  14 +-
 .../components/ui/sheet/sheet-footer.svelte   |  14 +-
 .../components/ui/sheet/sheet-header.svelte   |  14 +-
 .../components/ui/sheet/sheet-overlay.svelte  |  17 +-
 .../components/ui/sheet/sheet-portal.svelte   |  14 +-
 .../components/ui/sheet/sheet-title.svelte    |  14 +-
 .../lib/components/ui/sonner/sonner.svelte    |   7 +-
 .../lib/components/ui/switch/switch.svelte    |  13 +-
 .../lib/components/ui/table/table-body.svelte |  14 +-
 .../components/ui/table/table-caption.svelte  |  14 +-
 .../lib/components/ui/table/table-cell.svelte |  21 +-
 .../components/ui/table/table-footer.svelte   |  14 +-
 .../lib/components/ui/table/table-head.svelte |  14 +-
 .../components/ui/table/table-header.svelte   |  19 +-
 .../lib/components/ui/table/table-row.svelte  |  21 +-
 app/src/lib/components/ui/table/table.svelte  |  14 +-
 .../components/ui/tabs/tabs-content.svelte    |  16 +-
 .../lib/components/ui/tabs/tabs-list.svelte   |  14 +-
 .../components/ui/tabs/tabs-trigger.svelte    |  16 +-
 .../ui/tooltip/tooltip-content.svelte         |  29 ++-
 .../color/icon-blocks-color.svelte            |   8 +-
 .../color/icon-channel-color.svelte           |   8 +-
 .../color/icon-connection-color.svelte        |   8 +-
 .../color/icon-explorer-color.svelte          |   8 +-
 .../color/icon-faucet-color.svelte            |   8 +-
 .../union-icons/color/icon-home-color.svelte  |   8 +-
 .../union-icons/color/icon-index-color.svelte |   8 +-
 .../color/icon-packet-color.svelte            |   8 +-
 .../union-icons/color/icon-queue-color.svelte |   8 +-
 .../color/icon-search-color.svelte            |   8 +-
 .../color/icon-settings-color.svelte          |   8 +-
 .../color/icon-transfers-color.svelte         |   8 +-
 .../color/icon-usertransfers-color.svelte     |   8 +-
 .../color/icon-wallet-color.svelte            |   8 +-
 .../inverse/icon-blocks-inverse.svelte        |   8 +-
 .../inverse/icon-channel-inverse.svelte       |   8 +-
 .../inverse/icon-connection-inverse.svelte    |   8 +-
 .../inverse/icon-explorer-inverse.svelte      |   8 +-
 .../inverse/icon-faucet-inverse.svelte        |   8 +-
 .../inverse/icon-home-inverse.svelte          |   8 +-
 .../inverse/icon-index-inverse.svelte         |   8 +-
 .../inverse/icon-packet-inverse.svelte        |   8 +-
 .../inverse/icon-queue-inverse.svelte         |   8 +-
 .../inverse/icon-search-inverse.svelte        |   8 +-
 .../inverse/icon-settings-inverse.svelte      |   8 +-
 .../inverse/icon-transfers-inverse.svelte     |   8 +-
 .../inverse/icon-usertransfers-inverse.svelte |   8 +-
 .../inverse/icon-wallet-inverse.svelte        |   8 +-
 .../mono/icon-alltransfers-mono.svelte        |   8 +-
 .../union-icons/mono/icon-blocks-mono.svelte  |   8 +-
 .../union-icons/mono/icon-channel-mono.svelte |   8 +-
 .../mono/icon-connection-mono.svelte          |   8 +-
 .../mono/icon-explorer-mono.svelte            |   8 +-
 .../union-icons/mono/icon-faucet-mono.svelte  |   8 +-
 .../union-icons/mono/icon-home-mono.svelte    |   8 +-
 .../mono/icon-hubblestatus-mono.svelte        |   8 +-
 .../mono/icon-ibcchannels-mono.svelte         |   8 +-
 .../mono/icon-ibcconnections-mono.svelte      |   8 +-
 .../union-icons/mono/icon-index-mono.svelte   |   8 +-
 .../union-icons/mono/icon-packet-mono.svelte  |   8 +-
 .../union-icons/mono/icon-queue-mono.svelte   |   8 +-
 .../union-icons/mono/icon-search-mono.svelte  |   8 +-
 .../union-icons/mono/icon-searchk-mono.svelte |   8 +-
 .../mono/icon-settings-mono.svelte            |   8 +-
 .../mono/icon-transfers-mono.svelte           |   8 +-
 .../mono/icon-usertransfers-mono.svelte       |   8 +-
 .../union-icons/mono/icon-wallet-mono.svelte  |   8 +-
 .../lib/components/wallet-gate-cosmos.svelte  |  12 +-
 app/src/lib/components/wallet-gate-evm.svelte |  12 +-
 app/src/lib/swap-form.svelte                  | 124 +++++-----
 app/src/routes/+layout.svelte                 |  13 +-
 app/src/routes/balances/+page.svelte          |  22 +-
 .../explorer/(components)/icon-button.svelte  |  11 +-
 .../routes/explorer/(components)/menu.svelte  |   9 +-
 .../explorer/(components)/pixel-graph.svelte  |  16 +-
 .../explorer/(components)/stats-bar.svelte    |   2 +-
 .../(components)/table-channels.svelte        |   2 +-
 .../(components)/table-connections.svelte     |   2 +-
 .../routes/explorer/(components)/table.svelte |   7 +
 app/src/routes/explorer/+layout.svelte        |  15 +-
 app/src/routes/explorer/+page.svelte          |   4 +-
 .../address/[slug=address]/+layout.svelte     |   2 +
 .../address/[slug=address]/+page.svelte       |  24 +-
 app/src/routes/explorer/blocks/+page.svelte   |   2 +-
 .../routes/explorer/index-status/+page.svelte |   4 +-
 .../[channel_id]/[sequence]/+page.svelte      |   1 +
 .../routes/explorer/transfers/+layout.svelte  |   7 +-
 .../routes/explorer/transfers/+page.svelte    |  12 +-
 .../explorer/transfers/[source]/+page.svelte  |   6 +-
 .../faucet/(components)/cosmos-balance.svelte |  17 +-
 .../faucet/(components)/dydx-faucet.svelte    |   4 +-
 .../(components)/external-faucets.svelte      |   6 +-
 .../faucet/(components)/stride-faucet.svelte  |   4 +-
 .../faucet/(components)/token-balance.svelte  |  18 +-
 app/src/routes/faucet/+page.svelte            |  52 ++--
 app/src/routes/swap/+page.svelte              |   6 +-
 .../(components)/assets-dialog.svelte         |  24 +-
 .../(components)/card-section-heading.svelte  |  10 +-
 .../transfer/(components)/chain-button.svelte |  12 +-
 .../transfer/(components)/chain-dialog.svelte |  32 ++-
 .../(components)/recipient-field.svelte       |   8 +-
 .../(components)/settings-dialog.svelte       |   8 +-
 .../(components)/transfer-form.svelte         |   2 +
 app/src/routes/transfer/+page.svelte          |  10 +-
 235 files changed, 2639 insertions(+), 1238 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index c375428b91..c427182c8c 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -51,8 +51,8 @@
         "@melt-ui/svelte": "^0.83.0",
         "@svelte-put/shortcut": "^3.1.1",
         "@sveltejs/adapter-static": "^3.0.4",
-        "@sveltejs/kit": "^2.5.26",
-        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@sveltejs/kit": "^2.5.27",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.9",
@@ -70,7 +70,7 @@
         "postcss": "^8.4.45",
         "postcss-import": "^16.1.0",
         "rollup-plugin-visualizer": "^5.12.0",
-        "svelte": "^4.2.19",
+        "svelte": "^5.0.0",
         "svelte-check": "^4.0.1",
         "svelte-preprocess": "^6.0.2",
         "tailwind-merge": "^2.5.2",
@@ -2968,43 +2968,42 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
-      "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0.tgz",
+      "integrity": "sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-        "debug": "^4.3.4",
+        "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
+        "debug": "^4.3.7",
         "deepmerge": "^4.3.1",
         "kleur": "^4.1.5",
-        "magic-string": "^0.30.10",
-        "svelte-hmr": "^0.16.0",
-        "vitefu": "^0.2.5"
+        "magic-string": "^0.30.12",
+        "vitefu": "^1.0.3"
       },
       "engines": {
-        "node": "^18.0.0 || >=20"
+        "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"
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-      "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.1.tgz",
+      "integrity": "sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.3.4"
+        "debug": "^4.3.7"
       },
       "engines": {
-        "node": "^18.0.0 || >=20"
+        "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"
       }
     },
@@ -3969,6 +3968,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/alge": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/alge/-/alge-0.8.1.tgz",
@@ -5692,6 +5701,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -6778,12 +6798,12 @@
       }
     },
     "node_modules/is-reference": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "*"
+        "@types/estree": "^1.0.6"
       }
     },
     "node_modules/is-stream": {
@@ -9966,7 +9986,7 @@
         "sveld": "cli.js"
       }
     },
-    "node_modules/svelte": {
+    "node_modules/sveld/node_modules/svelte": {
       "version": "4.2.19",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
       "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
@@ -9991,6 +10011,31 @@
         "node": ">=16"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.16.tgz",
+      "integrity": "sha512-QcY+om9r8+uTcSfeFuv8++ExdfwVCKeT+Y7GPSZ6rQPczvy62BMtvMoi0rScabgv+upGE5jxKjd7M4u23+AjGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "esm-env": "^1.0.0",
+        "esrap": "^1.2.2",
+        "is-reference": "^3.0.2",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/svelte-check": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.0.5.tgz",
@@ -10015,19 +10060,6 @@
         "typescript": ">=5.0.0"
       }
     },
-    "node_modules/svelte-hmr": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-      "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^12.20 || ^14.13.1 || >= 16"
-      },
-      "peerDependencies": {
-        "svelte": "^3.19.0 || ^4.0.0"
-      }
-    },
     "node_modules/svelte-persisted-store": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.11.0.tgz",
@@ -11807,13 +11839,17 @@
       }
     },
     "node_modules/vitefu": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.3.tgz",
+      "integrity": "sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==",
       "dev": true,
       "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*"
+      ],
       "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": {
@@ -12238,6 +12274,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/app/package.json b/app/package.json
index 9386a2b9d2..b56f33f72c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -57,8 +57,8 @@
     "@melt-ui/svelte": "^0.83.0",
     "@svelte-put/shortcut": "^3.1.1",
     "@sveltejs/adapter-static": "^3.0.4",
-    "@sveltejs/kit": "^2.5.26",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
@@ -76,7 +76,7 @@
     "postcss": "^8.4.45",
     "postcss-import": "^16.1.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.0",
     "svelte-check": "^4.0.1",
     "svelte-preprocess": "^6.0.2",
     "tailwind-merge": "^2.5.2",
diff --git a/app/src/lib/components/address-multichain.svelte b/app/src/lib/components/address-multichain.svelte
index 91e6516738..154fb2b0d9 100644
--- a/app/src/lib/components/address-multichain.svelte
+++ b/app/src/lib/components/address-multichain.svelte
@@ -3,8 +3,12 @@ import type { Chain } from "$lib/types"
 import { hexAddressToBech32 } from "@unionlabs/client"
 import { Badge } from "$lib/components/ui/badge/index.ts"
 
-export let address: { address: string; normalizedAddress: string }
-export let chains: Array<Chain>
+  interface Props {
+    address: { address: string; normalizedAddress: string };
+    chains: Array<Chain>;
+  }
+
+  let { address, chains }: Props = $props();
 
 const addressChain = chains.find(c => address.address.startsWith(c.addr_prefix)) as Chain
 
@@ -43,7 +47,7 @@ const longestPrefix = Math.max.apply(
   0,
   allCosmosAddresses.map(pair => pair.prefix.length)
 )
-let addressIndex = 0
+let addressIndex = $state(0)
 setInterval(() => {
   //logic goes here
   addressIndex = (addressIndex + 1) % (allCosmosAddresses.length - 1)
diff --git a/app/src/lib/components/asset-card.svelte b/app/src/lib/components/asset-card.svelte
index ff33665ac0..13a03058ab 100644
--- a/app/src/lib/components/asset-card.svelte
+++ b/app/src/lib/components/asset-card.svelte
@@ -6,13 +6,18 @@ import Precise from "$lib/components/precise.svelte"
 import { getSupportedAsset } from "$lib/utilities/helpers.ts"
 import { showUnsupported } from "$lib/stores/user.ts"
 
-//Create correct type here
-export let asset: { symbol: string; balance: string | bigint; denom?: string; address: string }
-export let chain: Chain
+
+  interface Props {
+    //Create correct type here
+    asset: { symbol: string; balance: string | bigint; denom?: string; address: string };
+    chain: Chain;
+  }
+
+  let { asset, chain }: Props = $props();
 
 //Finds the asset in chains.assets and checks if supported,
 const identifier = asset.denom ? asset.denom : asset.address
-$: supportedAsset = getSupportedAsset(chain, identifier)
+let supportedAsset = $derived(getSupportedAsset(chain, identifier))
 </script>
 
 {#if supportedAsset || $showUnsupported}
diff --git a/app/src/lib/components/balances-overview.svelte b/app/src/lib/components/balances-overview.svelte
index 502c3cf6f4..15103a62e1 100644
--- a/app/src/lib/components/balances-overview.svelte
+++ b/app/src/lib/components/balances-overview.svelte
@@ -6,14 +6,18 @@ import ScrollArea from "./ui/scroll-area/scroll-area.svelte"
 import LoadingLogo from "./loading-logo.svelte"
 import { userAddrOnChain } from "$lib/utilities/address"
 
-export let userAddr: UserAddresses
-export let chains: Array<Chain>
+  interface Props {
+    userAddr: UserAddresses;
+    chains: Array<Chain>;
+  }
 
-$: userBalances = userBalancesQuery({
+  let { userAddr, chains }: Props = $props();
+
+let userBalances = $derived(userBalancesQuery({
   chains,
   userAddr,
   connected: true
-})
+}))
 </script>
 
 {#each $userBalances as balance, index}
diff --git a/app/src/lib/components/card-animated-border.svelte b/app/src/lib/components/card-animated-border.svelte
index 2e6cedaa9d..6f576eb6d8 100644
--- a/app/src/lib/components/card-animated-border.svelte
+++ b/app/src/lib/components/card-animated-border.svelte
@@ -1,10 +1,21 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-export let width = "w-48"
-export let height = "h-48"
-export let animationSpeed = 6
-export let textSize = "text-sm"
+  interface Props {
+    width?: string;
+    height?: string;
+    animationSpeed?: number;
+    textSize?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    width = "w-48",
+    height = "h-48",
+    animationSpeed = 6,
+    textSize = "text-sm",
+    children
+  }: Props = $props();
 </script>
 
 <div
@@ -19,7 +30,7 @@ export let textSize = "text-sm"
       `animate-[spin_${animationSpeed}s_linear_infinite]`,
       'absolute inset-[-1000%] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]',
     )}
-  />
+></span>
 
   <div
     class={cn(
@@ -27,6 +38,6 @@ export let textSize = "text-sm"
       'text-white inline-flex size-full items-center justify-center rounded-xl bg-background px-3 py-1 font-medium backdrop-blur-3xl',
     )}
   >
-    <slot />
+    {@render children?.()}
   </div>
 </div>
diff --git a/app/src/lib/components/chains-gate.svelte b/app/src/lib/components/chains-gate.svelte
index dd8639fd8c..24d977cbdb 100644
--- a/app/src/lib/components/chains-gate.svelte
+++ b/app/src/lib/components/chains-gate.svelte
@@ -3,6 +3,11 @@ import type { Chain } from "$lib/types"
 import LoadingLogo from "./loading-logo.svelte"
 import { chainsQuery } from "$lib/queries/chains"
 import { type Readable, derived } from "svelte/store"
+  interface Props {
+    children?: import('svelte').Snippet<[any]>;
+  }
+
+  let { children }: Props = $props();
 
 let chains = chainsQuery()
 
@@ -82,7 +87,7 @@ let checkedChains: Readable<Array<Chain>> = derived(chains, $chains => {
 </script>
 
 {#if !!$chains.data}
-  <slot chains={$checkedChains} />
+  {@render children?.({ chains: $checkedChains, })}
 {:else if $chains.isLoading}
   <LoadingLogo class="size-16" />
 {:else if $chains.isError}
diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
index fe8923189a..d98d846583 100644
--- a/app/src/lib/components/connect/connect.svelte
+++ b/app/src/lib/components/connect/connect.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
 import { setMode } from "mode-watcher"
 import { derived } from "svelte/store"
 import { navigating } from "$app/stores"
@@ -20,7 +22,7 @@ import { aptosStore, aptosWalletsInformation } from "$lib/wallet/aptos/index.ts"
 import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.ts"
 import { onMount } from "svelte"
 
-let buttonText: string
+let buttonText: string = $state()
 
 let connectedWallets = derived(
   [sepoliaStore, cosmosStore, aptosStore],
@@ -37,40 +39,46 @@ onMount(() => {
   console.info($aptosStore)
 })
 
-$: if ($connectedWallets >= 1) {
-  buttonText = $connectedWallets < 3 ? `Connected ${$connectedWallets}/3` : "Connected"
-} else {
-  buttonText = "Connect Wallet"
-}
+run(() => {
+    if ($connectedWallets >= 1) {
+    buttonText = $connectedWallets < 3 ? `Connected ${$connectedWallets}/3` : "Connected"
+  } else {
+    buttonText = "Connect Wallet"
+  }
+  });
 
-let sheetOpen = false
-$: if ($navigating) sheetOpen = false
+let sheetOpen = $state(false)
+run(() => {
+    if ($navigating) sheetOpen = false
+  });
 </script>
 
 <Sheet.Root bind:open={sheetOpen}>
-  <Sheet.Trigger asChild class="w-full" let:builder>
-    <Button
-      builders={[builder]}
-      class={cn(
-        $connectedWallets === 1 ? "w-[75px]" : "w-[50px]",
-        "space-x-1.5 lg:w-[180px] text-md bg-accent text-black ml-auto",
-        "hover:bg-cyan-300/90",
-        $sepoliaStore.connectionStatus === "connected" &&
-          $cosmosStore.connectionStatus === "connected",
-      )}
-      on:click={() => (sheetOpen = !sheetOpen)}
-      size="sm"
-    >
-      <WalletIcon class="size-6 text-black" />
-      <span class="font-supermolot font-bold uppercase lg:block hidden">
-        {buttonText}
-      </span>
-      <span class={cn($connectedWallets === 1 ? "font-supermolot font-bold uppercase" : "hidden")}>
-        <!-- {connectedWallets === 1 ? "1/2" : ""} -->
-        {$connectedWallets === 3 ? "" : $connectedWallets > 1 ? `${$connectedWallets}/3` : ""}
-      </span>
-    </Button>
-  </Sheet.Trigger>
+  <Sheet.Trigger asChild class="w-full" >
+    {#snippet children({ builder })}
+        <Button
+        builders={[builder]}
+        class={cn(
+          $connectedWallets === 1 ? "w-[75px]" : "w-[50px]",
+          "space-x-1.5 lg:w-[180px] text-md bg-accent text-black ml-auto",
+          "hover:bg-cyan-300/90",
+          $sepoliaStore.connectionStatus === "connected" &&
+            $cosmosStore.connectionStatus === "connected",
+        )}
+        on:click={() => (sheetOpen = !sheetOpen)}
+        size="sm"
+      >
+        <WalletIcon class="size-6 text-black" />
+        <span class="font-supermolot font-bold uppercase lg:block hidden">
+          {buttonText}
+        </span>
+        <span class={cn($connectedWallets === 1 ? "font-supermolot font-bold uppercase" : "hidden")}>
+          <!-- {connectedWallets === 1 ? "1/2" : ""} -->
+          {$connectedWallets === 3 ? "" : $connectedWallets > 1 ? `${$connectedWallets}/3` : ""}
+        </span>
+      </Button>
+          {/snippet}
+    </Sheet.Trigger>
   <Sheet.Content
     class={cn(
       "h-full border-solid border-left flex flex-col justify-start",
@@ -135,22 +143,24 @@ $: if ($navigating) sheetOpen = false
         <Label for="unsupported-assets">CRT effect</Label>
       </div>
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild let:builder>
-          <Button
-            builders={[builder]}
-            variant="default"
-            size="icon"
-            class="hover:text-black hover:bg-accent"
-          >
-            <Sun
-              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-            />
-            <Moon
-              class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-            />
-            <span class="sr-only">Toggle theme</span>
-          </Button>
-        </DropdownMenu.Trigger>
+        <DropdownMenu.Trigger asChild >
+          {#snippet children({ builder })}
+                    <Button
+              builders={[builder]}
+              variant="default"
+              size="icon"
+              class="hover:text-black hover:bg-accent"
+            >
+              <Sun
+                class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+              />
+              <Moon
+                class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+              />
+              <span class="sr-only">Toggle theme</span>
+            </Button>
+                            {/snippet}
+                </DropdownMenu.Trigger>
         <DropdownMenu.Content class="w-fit rounded-none bg-secondary">
           <DropdownMenu.Group>
             <DropdownMenu.Item on:click={() => setMode("system")} class="cursor-pointer">
diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte
index 210a2c7c77..7e2bdc7759 100644
--- a/app/src/lib/components/connect/connection.svelte
+++ b/app/src/lib/components/connect/connection.svelte
@@ -12,29 +12,44 @@ import { truncateEvmAddress, truncateUnionAddress } from "$lib/wallet/utilities/
 
 const OFFENDING_WALLET_ID = "io.metamask.mobile"
 
-export let chain: "cosmos" | "evm" | "aptos"
 type T = $$Generic<typeof chain>
 
 type $$Props = Props<T>
 
-export let address: $$Props["address"]
-export let hoverState: $$Props["hoverState"]
-export let connectStatus: $$Props["connectStatus"]
-export let onConnectClick: $$Props["onConnectClick"]
-export let onDisconnectClick: $$Props["onDisconnectClick"]
-export let connectedWalletId: $$Props["connectedWalletId"]
-export let chainWalletsInformation: $$Props["chainWalletsInformation"]
+  interface Props_1 {
+    chain: "cosmos" | "evm" | "aptos";
+    address: $$Props["address"];
+    hoverState: $$Props["hoverState"];
+    connectStatus: $$Props["connectStatus"];
+    onConnectClick: $$Props["onConnectClick"];
+    onDisconnectClick: $$Props["onDisconnectClick"];
+    connectedWalletId: $$Props["connectedWalletId"];
+    chainWalletsInformation: $$Props["chainWalletsInformation"];
+    [key: string]: any
+  }
+
+  let {
+    chain,
+    address,
+    hoverState = $bindable(),
+    connectStatus,
+    onConnectClick,
+    onDisconnectClick,
+    connectedWalletId,
+    chainWalletsInformation,
+    ...rest
+  }: Props_1 = $props();
 
-$: connectText =
-  connectStatus === "connected" && address && address?.length > 0
+let connectText =
+  $derived(connectStatus === "connected" && address && address?.length > 0
     ? chain === "evm"
       ? truncateEvmAddress(address, -1)
       : chain === "aptos"
         ? address
         : truncateUnionAddress(address, -1)
-    : ""
+    : "")
 
-let copyClicked = false
+let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
 const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
 
@@ -45,17 +60,17 @@ let sanitizeWalletInformation =
       array.findIndex(t => t.name.toLowerCase().startsWith(predicate.name.toLowerCase())) === index
   ) ?? chainWalletsInformation
 
-$: walletListToRender =
-  connectStatus === "connected" ? chainWalletsInformation : sanitizeWalletInformation
+let walletListToRender =
+  $derived(connectStatus === "connected" ? chainWalletsInformation : sanitizeWalletInformation)
 
-let metamaskAlertDialogOpen = false
+let metamaskAlertDialogOpen = $state(false)
 </script>
 
 <MetamaskMobileAlert {metamaskAlertDialogOpen} />
 
 <h3 class="uppercase font-supermolot font-bold text-xl">{chain}</h3>
 <Button
-  {...$$restProps}
+  {...rest}
   builders={[{ action: node => copyTextAction(node, { text: address }) }]}
   class={cn(
     "px-2 w-full focus:ring-0 ring-transparent focus-visible:ring-0 flex justify-start",
@@ -93,8 +108,8 @@ let metamaskAlertDialogOpen = false
         role="row"
         tabindex={0}
         data-index={index}
-        on:mouseleave={() => (hoverState = connectedWalletId === id ? "none" : "none")}
-        on:mouseenter={() => (hoverState = connectedWalletId === id ? "hover" : "none")}
+        onmouseleave={() => (hoverState = connectedWalletId === id ? "none" : "none")}
+        onmouseenter={() => (hoverState = connectedWalletId === id ? "hover" : "none")}
         class={cn("flex flex-col w-full justify-start mb-3")}
       >
         <Button
diff --git a/app/src/lib/components/connect/metamask-mobile-alert.svelte b/app/src/lib/components/connect/metamask-mobile-alert.svelte
index 607d94debb..52e368c78e 100644
--- a/app/src/lib/components/connect/metamask-mobile-alert.svelte
+++ b/app/src/lib/components/connect/metamask-mobile-alert.svelte
@@ -2,7 +2,11 @@
 import * as AlertDialog from "$lib/components/ui/alert-dialog/index.ts"
 import SquareArrowOutUpRightIcon from "virtual:icons/lucide/square-arrow-out-up-right"
 
-export let metamaskAlertDialogOpen: boolean
+  interface Props {
+    metamaskAlertDialogOpen: boolean;
+  }
+
+  let { metamaskAlertDialogOpen = $bindable() }: Props = $props();
 </script>
 
 <AlertDialog.Root bind:open={metamaskAlertDialogOpen} closeOnOutsideClick={true}>
diff --git a/app/src/lib/components/details-heading.svelte b/app/src/lib/components/details-heading.svelte
index 6e8bdf3bb2..3663620ade 100644
--- a/app/src/lib/components/details-heading.svelte
+++ b/app/src/lib/components/details-heading.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <h2 class="text-lg text-foreground font-bold font-supermolot">
-  <slot/>
+  {@render children?.()}
 </h2>
diff --git a/app/src/lib/components/dev-tools.svelte b/app/src/lib/components/dev-tools.svelte
index cfcd8ba098..1e20198d93 100644
--- a/app/src/lib/components/dev-tools.svelte
+++ b/app/src/lib/components/dev-tools.svelte
@@ -3,6 +3,11 @@ import { toast } from "svelte-sonner"
 import { toggleMode } from "mode-watcher"
 import { shortcut } from "@svelte-put/shortcut"
 import { useQueryClient } from "@tanstack/svelte-query"
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 
 const queryClient = useQueryClient()
 </script>
@@ -47,5 +52,5 @@ const queryClient = useQueryClient()
 />
 
 {#if import.meta.env.MODE === "development"}
-  <slot />
+  {@render children?.()}
 {/if}
diff --git a/app/src/lib/components/draft-page-notice.svelte b/app/src/lib/components/draft-page-notice.svelte
index 5f99f4d63d..8258febe6b 100644
--- a/app/src/lib/components/draft-page-notice.svelte
+++ b/app/src/lib/components/draft-page-notice.svelte
@@ -2,7 +2,11 @@
 import { cn } from "$/lib/utilities/shadcn.ts"
 import { Badge } from "$lib/components/ui/badge"
 
-export let className = ""
+  interface Props {
+    className?: string;
+  }
+
+  let { className = "" }: Props = $props();
 </script>
 
 <Badge
diff --git a/app/src/lib/components/explorer-pagination.svelte b/app/src/lib/components/explorer-pagination.svelte
index 272527fc5a..550a21734d 100644
--- a/app/src/lib/components/explorer-pagination.svelte
+++ b/app/src/lib/components/explorer-pagination.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: live = $timestamp === null` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 import { Label } from "$lib/components/ui/label"
diff --git a/app/src/lib/components/explorer-precise.svelte b/app/src/lib/components/explorer-precise.svelte
index 64cbf3af01..471c32b8c0 100644
--- a/app/src/lib/components/explorer-precise.svelte
+++ b/app/src/lib/components/explorer-precise.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
 import * as Tooltip from "$lib/components/ui/tooltip"
 
-export let amount: number
-export let decimals: number
-export let displayDecimals = 2
-export let showToolTip = false
+  interface Props {
+    amount: number;
+    decimals: number;
+    displayDecimals?: number;
+    showToolTip?: boolean;
+  }
+
+  let {
+    amount,
+    decimals,
+    displayDecimals = 2,
+    showToolTip = false
+  }: Props = $props();
 
 const formatBalance = (
   balance: bigint | string | number,
@@ -52,10 +61,10 @@ const abbreviateNumber = (num: number, displayDecimals: number): string => {
   return num.toFixed(displayDecimals)
 }
 
-$: balance = amount ?? BigInt(0)
+let balance = $derived(amount ?? BigInt(0))
 
-$: formatted = formatBalance(balance, decimals, true)
-$: precise = formatBalance(balance, decimals, false)
+let formatted = $derived(formatBalance(balance, decimals, true))
+let precise = $derived(formatBalance(balance, decimals, false))
 </script>
 
 {#key formatted}
diff --git a/app/src/lib/components/explorer-table-paginated.svelte b/app/src/lib/components/explorer-table-paginated.svelte
index 4df2f11e8b..ecd7c004aa 100644
--- a/app/src/lib/components/explorer-table-paginated.svelte
+++ b/app/src/lib/components/explorer-table-paginated.svelte
@@ -8,9 +8,13 @@ import Table from "../../routes/explorer/(components)/table.svelte"
 
 type DataRow = $$Generic
 
-export let queryResult: CreateQueryResult
-export let columns: Array<ColumnDef<DataRow & { timestamp: string }>>
-export let dataStore: Readable<Array<DataRow & { timestamp: string }>>
+  interface Props {
+    queryResult: CreateQueryResult;
+    columns: Array<ColumnDef<DataRow & { timestamp: string }>>;
+    dataStore: Readable<Array<DataRow & { timestamp: string }>>;
+  }
+
+  let { queryResult, columns, dataStore }: Props = $props();
 </script>
 
 
diff --git a/app/src/lib/components/footer.svelte b/app/src/lib/components/footer.svelte
index 91397e6a6e..6f26bf1ec5 100644
--- a/app/src/lib/components/footer.svelte
+++ b/app/src/lib/components/footer.svelte
@@ -12,7 +12,7 @@ const onWalletClick = () => document.querySelector("button[data-dialog-trigger]"
 
 const navigationIconStyle = "size-7 min-w-6 dark:hover:text-white text-zinc-accent"
 
-$: isCurrentPage = (route: string) => $page.route.id?.split("/")[1] === route
+let isCurrentPage = $derived((route: string) => $page.route.id?.split("/")[1] === route)
 
 let buttons = [
   { displayName: "home", href: "", icon: HomeIcon },
@@ -44,8 +44,7 @@ let buttons = [
           : 'bg-transparent dark:hover:text-black',
       )}
     >
-      <svelte:component
-        this={button.icon}
+      <button.icon
         class="size-7 min-w-6 text-zinc-accent"
       />
       <div>{button.displayName}</div>
diff --git a/app/src/lib/components/kbd.svelte b/app/src/lib/components/kbd.svelte
index 4debf00b4c..3372ec86eb 100644
--- a/app/src/lib/components/kbd.svelte
+++ b/app/src/lib/components/kbd.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-export let className: string
+  interface Props {
+    class: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { class: className, children }: Props = $props();
+
 
-export { className as class }
 </script>
 
 <kbd
@@ -13,7 +18,7 @@ export { className as class }
     className
   )}
 >
-  <slot />
+  {@render children?.()}
 </kbd>
 
 <style lang="postcss"></style>
diff --git a/app/src/lib/components/loading-bar.svelte b/app/src/lib/components/loading-bar.svelte
index 5f509b2aba..3619a63639 100644
--- a/app/src/lib/components/loading-bar.svelte
+++ b/app/src/lib/components/loading-bar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
 import { tweened } from "svelte/motion"
 import { cubicOut } from "svelte/easing"
 import { navigating } from "$app/stores"
@@ -24,7 +26,9 @@ navigationState.subscribe(state => {
   }
 })
 
-$: $navigationState = $navigating ? "loading" : "loaded"
+run(() => {
+    $navigationState = $navigating ? "loading" : "loaded"
+  });
 </script>
 
 <div class="absolute top-0 z-[999] h-[2px] w-full">
diff --git a/app/src/lib/components/loading-dots.svelte b/app/src/lib/components/loading-dots.svelte
index afadd3596c..d40462b8f0 100644
--- a/app/src/lib/components/loading-dots.svelte
+++ b/app/src/lib/components/loading-dots.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = "size-12"
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = "size-12" }: Props = $props();
+
 </script>
 
 <div>
diff --git a/app/src/lib/components/loading-logo.svelte b/app/src/lib/components/loading-logo.svelte
index 766ef4057a..6aba74512c 100644
--- a/app/src/lib/components/loading-logo.svelte
+++ b/app/src/lib/components/loading-logo.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = "size-12"
-export { className as class }
+    interface Props {
+        class?: string | undefined;
+    }
+
+    let { class: className = "size-12" }: Props = $props();
+
 </script>
 
 <div class="max-w-full w-full flex flex-1 items-center justify-center">
diff --git a/app/src/lib/components/navigation/navigation.svelte b/app/src/lib/components/navigation/navigation.svelte
index fac83580c0..0e676013b4 100644
--- a/app/src/lib/components/navigation/navigation.svelte
+++ b/app/src/lib/components/navigation/navigation.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
 <script lang="ts">
 import { routes } from "./index.ts"
 import { cn } from "$lib/utilities/shadcn.ts"
diff --git a/app/src/lib/components/not-connected.svelte b/app/src/lib/components/not-connected.svelte
index 396ca07b63..01ac554b6d 100644
--- a/app/src/lib/components/not-connected.svelte
+++ b/app/src/lib/components/not-connected.svelte
@@ -1,22 +1,26 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
 import * as Card from "$lib/components/ui/card/index.ts"
 import { Connect } from "$lib/components/connect"
 import { sepoliaStore } from "$lib/wallet/evm"
 import { cosmosStore } from "$lib/wallet/cosmos"
 
-let title: string
-let text: string
+let title: string = $state()
+let text: string = $state()
 
-$: if (
-  $sepoliaStore.connectionStatus !== "connected" &&
-  $cosmosStore.connectionStatus !== "connected"
-) {
-  title = "Connect Wallet"
-  text = "Please connect a wallet to continue using the app."
-} else {
-  title = ""
-  text = ""
-}
+run(() => {
+    if (
+    $sepoliaStore.connectionStatus !== "connected" &&
+    $cosmosStore.connectionStatus !== "connected"
+  ) {
+    title = "Connect Wallet"
+    text = "Please connect a wallet to continue using the app."
+  } else {
+    title = ""
+    text = ""
+  }
+  });
 </script>
 
 <section class="max-w-lg">
diff --git a/app/src/lib/components/online-status.svelte b/app/src/lib/components/online-status.svelte
index 12021530e4..b92450456b 100644
--- a/app/src/lib/components/online-status.svelte
+++ b/app/src/lib/components/online-status.svelte
@@ -4,25 +4,27 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.ts"
 import { Button } from "$lib/components/ui/button/index.ts"
 import * as Tooltip from "$lib/components/ui/tooltip/index.ts"
 
-$: blockHeightStore = blockHeightQuery()
-$: blockHeight = $blockHeightStore.data
-$: appStatus = Number.isSafeInteger(Number(blockHeight)) ? "online" : "offline"
+let blockHeightStore = $derived(blockHeightQuery())
+let blockHeight = $derived($blockHeightStore.data)
+let appStatus = $derived(Number.isSafeInteger(Number(blockHeight)) ? "online" : "offline")
 </script>
 
 <Tooltip.Root>
-  <Tooltip.Trigger let:builder class="backdrop-blur-sm ml-1 mb-16 md:mb-1 my-a fixed bottom-0 z-50 w-18">
-    <Button
-      variant="outline"
-      builders={[builder]}
-      class={cn(
-        'rounded-full size-2.5 p-0 animate-pulse -mb-0.25',
-        appStatus === 'online' ? 'bg-green-500 hover:bg-green-500' : 'bg-red-500 hover:bg-red-500',
-      )}
-    ></Button>
-    <span class="my-auto mb-2 text-xs text-foreground/90">
-      {appStatus === 'online' ? blockHeight : 'offline'}
-    </span>
-  </Tooltip.Trigger>
+  <Tooltip.Trigger  class="backdrop-blur-sm ml-1 mb-16 md:mb-1 my-a fixed bottom-0 z-50 w-18">
+    {#snippet children({ builder })}
+        <Button
+        variant="outline"
+        builders={[builder]}
+        class={cn(
+          'rounded-full size-2.5 p-0 animate-pulse -mb-0.25',
+          appStatus === 'online' ? 'bg-green-500 hover:bg-green-500' : 'bg-red-500 hover:bg-red-500',
+        )}
+      ></Button>
+      <span class="my-auto mb-2 text-xs text-foreground/90">
+        {appStatus === 'online' ? blockHeight : 'offline'}
+      </span>
+          {/snippet}
+    </Tooltip.Trigger>
   <Tooltip.Content
     sideOffset={8}
     transition={flyAndScale}
diff --git a/app/src/lib/components/packet-details.svelte b/app/src/lib/components/packet-details.svelte
index a8a999bb14..41a19acb2d 100644
--- a/app/src/lib/components/packet-details.svelte
+++ b/app/src/lib/components/packet-details.svelte
@@ -7,9 +7,13 @@ import * as Card from "$lib/components/ui/card/index.ts"
 import PacketPath from "./packet-path.svelte"
 import DetailsHeading from "./details-heading.svelte"
 
-export let packetDetails: FragmentOf<typeof packetDetailsFragment>
 const packet = readFragment(packetDetailsFragment, packetDetails)
-export let chains: Array<Chain>
+  interface Props {
+    packetDetails: FragmentOf<typeof packetDetailsFragment>;
+    chains: Array<Chain>;
+  }
+
+  let { packetDetails, chains }: Props = $props();
 
 const packetSourceDestination = {
   source_chain_id: packet.source_chain_id,
diff --git a/app/src/lib/components/packet-path.svelte b/app/src/lib/components/packet-path.svelte
index 9aea4c10e9..fb7f686dfc 100644
--- a/app/src/lib/components/packet-path.svelte
+++ b/app/src/lib/components/packet-path.svelte
@@ -3,8 +3,9 @@ import { cn } from "$lib/utilities/shadcn"
 import type { Chain } from "$lib/types"
 import { toDisplayName } from "$lib/utilities/chains"
 import MoveRightIcon from "virtual:icons/lucide/move-right"
-export let chains: Array<Chain>
-export let packet: {
+  interface Props {
+    chains: Array<Chain>;
+    packet: {
   source_chain_id: string
   source_connection_id: string
   source_channel_id: string
@@ -13,7 +14,10 @@ export let packet: {
   destination_connection_id: string
   destination_channel_id: string
   destination_sequence: string
-}
+};
+  }
+
+  let { chains, packet }: Props = $props();
 </script>
 
 <section class="flex flex-col sm:flex-row">
diff --git a/app/src/lib/components/precise.svelte b/app/src/lib/components/precise.svelte
index 275334df2a..a97d6787c7 100644
--- a/app/src/lib/components/precise.svelte
+++ b/app/src/lib/components/precise.svelte
@@ -3,11 +3,21 @@ import * as Tooltip from "$lib/components/ui/tooltip"
 import type { Chain } from "$lib/types.ts"
 import { getSupportedAsset } from "$lib/utilities/helpers.ts"
 
-export let chain: Chain
-export let asset: any
-export let displayDecimals = 2
-export let showToolTip = false
-export let showSymbol = false
+  interface Props {
+    chain: Chain;
+    asset: any;
+    displayDecimals?: number;
+    showToolTip?: boolean;
+    showSymbol?: boolean;
+  }
+
+  let {
+    chain,
+    asset,
+    displayDecimals = 2,
+    showToolTip = false,
+    showSymbol = false
+  }: Props = $props();
 
 const formatBalance = (
   balance: bigint | string,
@@ -48,15 +58,15 @@ const abbreviateNumber = (num: number, displayDecimals: number): string => {
   return num.toFixed(displayDecimals)
 }
 
-$: supportedAsset = asset ? getSupportedAsset(chain, asset.address) : null
+let supportedAsset = $derived(asset ? getSupportedAsset(chain, asset.address) : null)
 
-$: balance = asset ? (asset.balance ?? BigInt(0)) : BigInt(0)
-$: decimals = asset && supportedAsset ? supportedAsset.decimals : asset ? asset.decimals : 0
-$: symbol =
-  asset && supportedAsset ? supportedAsset.display_symbol : asset ? asset.symbol : "Unknown"
+let balance = $derived(asset ? (asset.balance ?? BigInt(0)) : BigInt(0))
+let decimals = $derived(asset && supportedAsset ? supportedAsset.decimals : asset ? asset.decimals : 0)
+let symbol =
+  $derived(asset && supportedAsset ? supportedAsset.display_symbol : asset ? asset.symbol : "Unknown")
 
-$: formatted = formatBalance(balance, decimals, true)
-$: precise = formatBalance(balance, decimals, false)
+let formatted = $derived(formatBalance(balance, decimals, true))
+let precise = $derived(formatBalance(balance, decimals, false))
 </script>
 
 {#key formatted}
diff --git a/app/src/lib/components/preloading-indicator.svelte b/app/src/lib/components/preloading-indicator.svelte
index aae2fad991..487d900087 100644
--- a/app/src/lib/components/preloading-indicator.svelte
+++ b/app/src/lib/components/preloading-indicator.svelte
@@ -2,7 +2,7 @@
 import { onMount } from "svelte"
 import { cn } from "$lib/utilities/shadcn.ts"
 
-let [progress, visible] = [0, false]
+let [progress, visible] = $state([0, false])
 onMount(() => {
   visible = true
   const next = () => {
@@ -19,14 +19,14 @@ onMount(() => {
     <div
       style="width: {progress * 100}%"
       class={cn(['absolute h-full bg-union-accent-600 transition-[width] duration-500 left-0 top-0'])}
-    />
+></div>
   </div>
 {/if}
 
 {#if progress >= 0.4}
   <div
     class="fixed size-full bg-[rgba(234,248,255,0.04)] pointer-events-none z-[998] animate-[fade_0.4s]"
-  />
+></div>
 {/if}
 
 <style lang="postcss">
diff --git a/app/src/lib/components/search/cmdk.svelte b/app/src/lib/components/search/cmdk.svelte
index 53c8ffdac1..001bbbdcd1 100644
--- a/app/src/lib/components/search/cmdk.svelte
+++ b/app/src/lib/components/search/cmdk.svelte
@@ -28,9 +28,9 @@ import HubbleStatusIcon from "$lib/components/union-icons/mono/icon-hubblestatus
 let searchInput = writable("")
 searchInput.update($searchInput => $searchInput.replaceAll(" ", ""))
 
-let commandDialogOpen = false
+let commandDialogOpen = $state(false)
 
-let windowSize = { width: window.innerWidth, height: window.innerHeight }
+let windowSize = $state({ width: window.innerWidth, height: window.innerHeight })
 
 function handleKeyDown(event: KeyboardEvent) {
   if (event.key !== "k" || !(event.metaKey || event.ctrlKey)) return
@@ -191,7 +191,7 @@ const DISABLE_TAB_INDEX = -1
 
       <Command.Group heading="Interact with the testnet" class={cn("text-black bg-background")}>
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer group",
@@ -202,23 +202,25 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <FaucetIcon class="mr-2 size-5" />
-          <span>Get tokens from faucet</span>
-          {#if $page.route.id?.startsWith("/faucet")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <FaucetIcon class="mr-2 size-5" />
+            <span>Get tokens from faucet</span>
+            {#if $page.route.id?.startsWith("/faucet")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
 
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer",
@@ -229,27 +231,29 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <TransfersIcon class="mr-2 size-5" />
-          <span>Transfer assets across chains</span>
-          {#if $page.route.id?.startsWith("/transfer")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <TransfersIcon class="mr-2 size-5" />
+            <span>Transfer assets across chains</span>
+            {#if $page.route.id?.startsWith("/transfer")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
       </Command.Group>
       <Command.Separator />
 
       <Command.Group heading="Explore Data" class={cn("text-black bg-background")}>
         {@const userAddresses = [$sepoliaStore?.address, $cosmosStore?.address].filter(Boolean)}
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer",
@@ -261,22 +265,24 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <UserTransfersIcon class="mr-2 size-5" />
-          <span>Your transfers</span>
-          {#if $page.route.id?.startsWith("/explorer/address")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <UserTransfersIcon class="mr-2 size-5" />
+            <span>Your transfers</span>
+            {#if $page.route.id?.startsWith("/explorer/address")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer",
@@ -287,22 +293,24 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <ChannelIcon class="mr-2 size-5" />
-          <span>All transfers</span>
-          {#if $page.route.id?.startsWith("/explorer/transfers")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <ChannelIcon class="mr-2 size-5" />
+            <span>All transfers</span>
+            {#if $page.route.id?.startsWith("/explorer/transfers")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer",
@@ -313,23 +321,25 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <IbcConnectionsIcon class="mr-2 size-5" />
-          <span>IBC connections</span>
-          {#if $page.route.id?.startsWith("/explorer/connections")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <IbcConnectionsIcon class="mr-2 size-5" />
+            <span>IBC connections</span>
+            {#if $page.route.id?.startsWith("/explorer/connections")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
 
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer",
@@ -340,23 +350,25 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <IbcChannelsIcon class="mr-2 size-5" />
-          <span>IBC channels</span>
-          {#if $page.route.id?.startsWith("/explorer/channels")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <IbcChannelsIcon class="mr-2 size-5" />
+            <span>IBC channels</span>
+            {#if $page.route.id?.startsWith("/explorer/channels")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
 
         <Command.Item
-          let:attrs
+          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
             "hover:cursor-pointer",
@@ -367,20 +379,22 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <HubbleStatusIcon class="mr-2 size-5" />
-          <span>Hubble index status</span>
-          {#if $page.route.id?.startsWith("/explorer/index-status")}
-            <Badge
-              variant="outline"
-              class={cn(
-                "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-              )}
-            >
-              active page
-            </Badge>
-          {/if}
-        </Command.Item>
+          {#snippet children({ attrs })}
+                    <HubbleStatusIcon class="mr-2 size-5" />
+            <span>Hubble index status</span>
+            {#if $page.route.id?.startsWith("/explorer/index-status")}
+              <Badge
+                variant="outline"
+                class={cn(
+                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
+                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
+                )}
+              >
+                active page
+              </Badge>
+            {/if}
+                            {/snippet}
+                </Command.Item>
       </Command.Group>
     </Command.List>
   </Command.Root>
diff --git a/app/src/lib/components/search/search-bar.svelte b/app/src/lib/components/search/search-bar.svelte
index 703709cf1d..87dea93834 100644
--- a/app/src/lib/components/search/search-bar.svelte
+++ b/app/src/lib/components/search/search-bar.svelte
@@ -4,10 +4,19 @@ import SearchIcon from "virtual:icons/lucide/search"
 import { Input } from "$lib/components/ui/input/index.ts"
 import { Button } from "$lib/components/ui/button"
 
-export let searchInput = ""
-export let onInputClick: ((event: MouseEvent) => void) | undefined = undefined
-export let onInputChange: ((event: InputEvent) => void) | undefined = undefined
-export let windowWidth = window.innerWidth
+    interface Props {
+        searchInput?: string;
+        onInputClick?: ((event: MouseEvent) => void) | undefined;
+        onInputChange?: ((event: InputEvent) => void) | undefined;
+        windowWidth?: any;
+    }
+
+    let {
+        searchInput = $bindable(""),
+        onInputClick = undefined,
+        onInputChange = undefined,
+        windowWidth = window.innerWidth
+    }: Props = $props();
 </script>
 
 <div class="flex justify-end">
diff --git a/app/src/lib/components/spinner-svg.svelte b/app/src/lib/components/spinner-svg.svelte
index 409ba1f28a..0f93ad1701 100644
--- a/app/src/lib/components/spinner-svg.svelte
+++ b/app/src/lib/components/spinner-svg.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-export let className: string
-//Add this through our icon package instead
+  interface Props {
+    className: string; //Add this through our icon package instead
+  }
+
+  let { className }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/spinning-logo/square.svelte b/app/src/lib/components/spinning-logo/square.svelte
index 52aef1ba7c..09096597fe 100644
--- a/app/src/lib/components/spinning-logo/square.svelte
+++ b/app/src/lib/components/spinning-logo/square.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
-export let size: number
-export let x: number
-export let y: number
-export let strokeWidth: number
+	interface Props {
+		size: number;
+		x: number;
+		y: number;
+		strokeWidth: number;
+	}
+
+	let {
+		size,
+		x,
+		y,
+		strokeWidth
+	}: Props = $props();
 </script>
 
 
diff --git a/app/src/lib/components/spinning-outline-logo-three.svelte b/app/src/lib/components/spinning-outline-logo-three.svelte
index 0069ead20a..9f521aa8f2 100644
--- a/app/src/lib/components/spinning-outline-logo-three.svelte
+++ b/app/src/lib/components/spinning-outline-logo-three.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
 import * as THREE from "three"
 import Square from "./spinning-logo/square.svelte"
 import { onMount } from "svelte"
@@ -14,11 +16,11 @@ let cubeCount = 16
 // let cubeCount = 16;
 let logoWidth = cubeWidth * cubeCount + gap * (cubeCount - 1)
 let cubesY = cubeWidth * 2 + gap
-$: cubeDelta = (20 - cubeWidth) / 2
+let cubeDelta = $derived((20 - cubeWidth) / 2)
 let strokeWidth = 2.5
 
-let threeContainer: HTMLElement
-let threeCanvas: HTMLCanvasElement
+let threeContainer: HTMLElement = $state()
+let threeCanvas: HTMLCanvasElement = $state()
 
 const render = (mode: string | undefined) => {
   if (!browser) return
@@ -120,7 +122,9 @@ const render = (mode: string | undefined) => {
 }
 
 onMount(() => render($mode))
-$: render($mode)
+run(() => {
+    render($mode)
+  });
 </script>
 
 <div class="relative flex-1">
diff --git a/app/src/lib/components/spinning-outline-logo.svelte b/app/src/lib/components/spinning-outline-logo.svelte
index dc567d0bef..2a675806fe 100644
--- a/app/src/lib/components/spinning-outline-logo.svelte
+++ b/app/src/lib/components/spinning-outline-logo.svelte
@@ -5,7 +5,7 @@
 	let gap = 64;
 	let logoWidth= cubeWidth * cubeCount + gap * (cubeCount - 1);
 	let cubesY = cubeWidth * 2 + gap;
-	$: cubeDelta = (20 - cubeWidth) / 2;
+	let cubeDelta = $derived((20 - cubeWidth) / 2);
 	let strokeWidth = 4;
 </script>
 
diff --git a/app/src/lib/components/stats-bar-stat.svelte b/app/src/lib/components/stats-bar-stat.svelte
index 50ca7bff8d..c91b77c40f 100644
--- a/app/src/lib/components/stats-bar-stat.svelte
+++ b/app/src/lib/components/stats-bar-stat.svelte
@@ -3,9 +3,19 @@ import { deviceWidth } from "$lib/utilities/device.ts"
 import { cn } from "$lib/utilities/shadcn.ts"
 import LoadingDots from "$lib/components/loading-dots.svelte"
 
-export let label: string
-export let value: number | string
-export let blink: boolean
+  interface Props {
+    label: string;
+    value: number | string;
+    blink: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    label,
+    value,
+    blink,
+    children
+  }: Props = $props();
 
 function formatValue(value: number | string): string {
   if (typeof value === "number") {
@@ -16,7 +26,7 @@ function formatValue(value: number | string): string {
 </script>
 
 <div class={cn("uppercase  flex px-6 py-4 border-none", $deviceWidth >= 888 ? "w-fit" : "w-full")}>
-  <div class="text-xl pt-2 font-bold divide-y" on:copy={(event) => {
+  <div class="text-xl pt-2 font-bold divide-y" oncopy={(event) => {
       event?.clipboardData?.setData('text/plain', value.toString());
       event.preventDefault();
     }}>
@@ -31,7 +41,7 @@ function formatValue(value: number | string): string {
       {/key}
     {/if}
   </div>
-  <slot/>
+  {@render children?.()}
 </div>
 
 <style>
diff --git a/app/src/lib/components/stepper.svelte b/app/src/lib/components/stepper.svelte
index f2a3de2241..385736c8ca 100644
--- a/app/src/lib/components/stepper.svelte
+++ b/app/src/lib/components/stepper.svelte
@@ -8,8 +8,12 @@ import { toIsoString } from "$lib/utilities/date"
 import Truncate from "$lib/components/truncate.svelte"
 import { createEventDispatcher } from "svelte"
 
-export let steps: Readable<Array<Step>>
-export let onRetry: (() => void) | undefined = undefined
+  interface Props {
+    steps: Readable<Array<Step>>;
+    onRetry?: (() => void) | undefined;
+  }
+
+  let { steps, onRetry = undefined }: Props = $props();
 
 const dispatch = createEventDispatcher()
 
diff --git a/app/src/lib/components/table-cells/cell-assets.svelte b/app/src/lib/components/table-cells/cell-assets.svelte
index b4770cdebc..217144f30f 100644
--- a/app/src/lib/components/table-cells/cell-assets.svelte
+++ b/app/src/lib/components/table-cells/cell-assets.svelte
@@ -3,10 +3,15 @@ import { cn } from "$lib/utilities/shadcn.ts"
 import { truncate } from "$lib/utilities/format"
 import ExplorerPrecise from "$lib/components/explorer-precise.svelte"
 
-export let value: object
+  interface Props {
+    value: object;
+    [key: string]: any
+  }
+
+  let { value, ...rest }: Props = $props();
 </script>
 
-<div {...$$restProps} class={cn("flex flex-col")}>
+<div {...rest} class={cn("flex flex-col")}>
   {#each Object.entries(value) as [denom, data]}
     {#if data.asset}
       <div>
diff --git a/app/src/lib/components/table-cells/cell-chain-index.svelte b/app/src/lib/components/table-cells/cell-chain-index.svelte
index c689049ee2..87a9f0f055 100644
--- a/app/src/lib/components/table-cells/cell-chain-index.svelte
+++ b/app/src/lib/components/table-cells/cell-chain-index.svelte
@@ -2,13 +2,18 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellCopy from "./cell-copy.svelte"
 
-export let value: {
+  interface Props {
+    value: {
   chain_display_name: string
   chain_id: string
-}
+};
+    [key: string]: any
+  }
+
+  let { value, ...rest }: Props = $props();
 </script>
 
-<div  class={cn("flex flex-col ")} {...$$restProps}>
+<div  class={cn("flex flex-col ")} {...rest}>
   <CellCopy value={value.chain_display_name} />
   <CellCopy value={value.chain_id} />
 </div>
diff --git a/app/src/lib/components/table-cells/cell-copy.svelte b/app/src/lib/components/table-cells/cell-copy.svelte
index d741f9685c..6fbb469638 100644
--- a/app/src/lib/components/table-cells/cell-copy.svelte
+++ b/app/src/lib/components/table-cells/cell-copy.svelte
@@ -6,15 +6,19 @@ import CheckIcon from "virtual:icons/lucide/check"
 import { truncate } from "$lib/utilities/format.ts"
 import { copyTextAction } from "$lib/actions/copy.ts"
 
-export let value: string
-export let trunc = 0
 
-let copyClicked = false
+let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
 const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
 
-export let buttonClass = ""
-export { buttonClass as class }
+  interface Props {
+    value: string;
+    trunc?: number;
+    class?: string;
+  }
+
+  let { value, trunc = 0, class: buttonClass = "" }: Props = $props();
+
 </script>
 
 <div class="text-start flex items-center gap-2 group cursor-default">
diff --git a/app/src/lib/components/table-cells/cell-duration-text.svelte b/app/src/lib/components/table-cells/cell-duration-text.svelte
index 63edafe272..7c319c1442 100644
--- a/app/src/lib/components/table-cells/cell-duration-text.svelte
+++ b/app/src/lib/components/table-cells/cell-duration-text.svelte
@@ -3,7 +3,11 @@ import { toIsoString } from "$lib/utilities/date"
 import { Duration } from "svelte-ux"
 import { DurationUnits } from "svelte-ux"
 
-export let value: Date | undefined
+	interface Props {
+		value: Date | undefined;
+	}
+
+	let { value }: Props = $props();
 </script>
 
 
diff --git a/app/src/lib/components/table-cells/cell-icon-tooltip.svelte b/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
index 647873e361..ac496b2cf4 100644
--- a/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
+++ b/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
@@ -8,69 +8,77 @@ import { truncate } from "$lib/utilities/format.ts"
 import { Button } from "$lib/components/ui/button/index.ts"
 import * as Tooltip from "$lib/components/ui/tooltip/index.ts"
 
-export let records: Array<{
+  interface Props {
+    records: Array<{
   index: number
   hash: string
   label: string
   truncateSize: number
-}>
+}>;
+  }
 
-let copyClicked = false
+  let { records }: Props = $props();
+
+let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
 const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 3_000)]
 </script>
 
 <div class="w-full flex items-center group cursor-default mx-3.5">
-  <Tooltip.Root let:ids>
-    <Tooltip.Trigger asChild let:builder class="size-full">
-      <Button
-        size="default"
-        variant="outline"
-        class="size-9 p-1"
-        builders={[builder]}
+  <Tooltip.Root >
+    {#snippet children({ ids })}
+        <Tooltip.Trigger asChild  class="size-full">
+        {#snippet children({ builder })}
+            <Button
+            size="default"
+            variant="outline"
+            class="size-9 p-1"
+            builders={[builder]}
+          >
+            <EyeIcon class="size-7" />
+          </Button>
+                  {/snippet}
+        </Tooltip.Trigger>
+      <Tooltip.Content
+        side="right"
+        align="start"
+        sideOffset={7}
+        alignOffset={0}
+        class={cn(
+          "w-[425px]",
+          "px-1 bg-card shadow-lg",
+          `h-[${records.length * 11}px]`
+        )}
       >
-        <EyeIcon class="size-7" />
-      </Button>
-    </Tooltip.Trigger>
-    <Tooltip.Content
-      side="right"
-      align="start"
-      sideOffset={7}
-      alignOffset={0}
-      class={cn(
-        "w-[425px]",
-        "px-1 bg-card shadow-lg",
-        `h-[${records.length * 11}px]`
-      )}
-    >
-      {#each records as record, index}
-        <Button
-          size="default"
-          variant="secondary"
-          on:click={onCopyClick}
-          builders={[
-            { action: (node) => copyTextAction(node, { text: record.hash }) }
-          ]}
-          class={cn(
-            "flex-1 justify-end w-full px-2",
-            "bg-transparent hover:bg-transparent group-hover:opacity-100 transition h-7"
-          )}
-        >
-          <span class="font-medium text-zinc-400 mr-auto">{record.label}</span>
-          <span class="font-mono tabular-nums text-white ml-auto mr-3">
-            {#if record.truncateSize}
-              {truncate(record.hash, record.truncateSize)}
+        {#each records as record, index}
+          <Button
+            size="default"
+            variant="secondary"
+            on:click={onCopyClick}
+            builders={[
+              { action: (node) => copyTextAction(node, { text: record.hash }) }
+            ]}
+            class={cn(
+              "flex-1 justify-end w-full px-2",
+              "bg-transparent hover:bg-transparent group-hover:opacity-100 transition h-7"
+            )}
+          >
+            <span class="font-medium text-zinc-400 mr-auto">{record.label}</span>
+            <span class="font-mono tabular-nums text-white ml-auto mr-3">
+              {#if record.truncateSize}
+                {truncate(record.hash, record.truncateSize)}
+              {:else}
+                {record.hash}
+              {/if}
+            </span>
+            {#if copyClicked}
+              <CheckIcon class="size-5 text-green-500" />
             {:else}
-              {record.hash}
+              <CopyIcon class="size-5 text-primary" />
             {/if}
-          </span>
-          {#if copyClicked}
-            <CheckIcon class="size-5 text-green-500" />
-          {:else}
-            <CopyIcon class="size-5 text-primary" />
-          {/if}
-        </Button>
-      {/each}
-    </Tooltip.Content>
-  </Tooltip.Root>
+          </Button>
+        {/each}
+      </Tooltip.Content>
+          {/snippet}
+    </Tooltip.Root>
 </div>
diff --git a/app/src/lib/components/table-cells/cell-origin-channel.svelte b/app/src/lib/components/table-cells/cell-origin-channel.svelte
index 8af1aa442e..9533d6f97e 100644
--- a/app/src/lib/components/table-cells/cell-origin-channel.svelte
+++ b/app/src/lib/components/table-cells/cell-origin-channel.svelte
@@ -2,16 +2,21 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellCopy from "./cell-copy.svelte"
 
-export let value: {
+  interface Props {
+    value: {
   chain_display_name: string | undefined
   chain_id: string | undefined
   connection_id: string | undefined
   channel_id: string | undefined
   port_id: string | undefined
-}
+};
+    [key: string]: any
+  }
+
+  let { value, ...rest }: Props = $props();
 </script>
 
-<div {...$$restProps} class={cn("flex flex-col ")}>
+<div {...rest} class={cn("flex flex-col ")}>
   {#if value.chain_display_name}<CellCopy value={value.chain_display_name}/>{/if}
   {#if value.chain_id}<CellCopy value={value.chain_id}/>{/if}
   {#if value.connection_id}<CellCopy value={value.connection_id}/>{/if}
diff --git a/app/src/lib/components/table-cells/cell-origin-connection.svelte b/app/src/lib/components/table-cells/cell-origin-connection.svelte
index e3d73ce788..b7ab8fce85 100644
--- a/app/src/lib/components/table-cells/cell-origin-connection.svelte
+++ b/app/src/lib/components/table-cells/cell-origin-connection.svelte
@@ -2,15 +2,20 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellCopy from "./cell-copy.svelte"
 
-export let value: {
+  interface Props {
+    value: {
   chain_display_name: string
   chain_id: string
   connection_id: string
   client_id: string
-}
+};
+    [key: string]: any
+  }
+
+  let { value, ...rest }: Props = $props();
 </script>
 
-<div  class={cn("flex flex-col ")} {...$$restProps}>
+<div  class={cn("flex flex-col ")} {...rest}>
   <CellCopy value={value.chain_display_name}/>
   <CellCopy value={value.chain_id}/>
   <CellCopy value={value.connection_id}/>
diff --git a/app/src/lib/components/table-cells/cell-origin-transfer.svelte b/app/src/lib/components/table-cells/cell-origin-transfer.svelte
index 4cc5743d53..96fc0c4d45 100644
--- a/app/src/lib/components/table-cells/cell-origin-transfer.svelte
+++ b/app/src/lib/components/table-cells/cell-origin-transfer.svelte
@@ -4,11 +4,16 @@ import { truncate } from "$lib/utilities/format"
 import * as Tooltip from "$lib/components/ui/tooltip"
 import type { Chain } from "$lib/types"
 
-export let chains: Array<Chain>
-export let value: {
+  interface Props {
+    chains: Array<Chain>;
+    value: {
   chainId: string
   address: string
-}
+};
+    [key: string]: any
+  }
+
+  let { chains, value, ...rest }: Props = $props();
 
 const chainDisplayName =
   chains.find(chain => chain.chain_id === value.chainId)?.display_name ??
@@ -16,7 +21,7 @@ const chainDisplayName =
   "unknown chain"
 </script>
 
-<div class={cn("flex flex-col items-start")} {...$$restProps}>
+<div class={cn("flex flex-col items-start")} {...rest}>
     <div class="font-bold">
         {chainDisplayName}
     </div>
diff --git a/app/src/lib/components/table-cells/cell-origin.svelte b/app/src/lib/components/table-cells/cell-origin.svelte
index fae6be8597..702a871278 100644
--- a/app/src/lib/components/table-cells/cell-origin.svelte
+++ b/app/src/lib/components/table-cells/cell-origin.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-export let value: {
+  interface Props {
+    value: {
   name: string
   chain: unknown
   connection: unknown
   channel: unknown
-}
+};
+    [key: string]: any
+  }
+
+  let { value, ...rest }: Props = $props();
 </script>
 
-<div  class={cn("flex flex-col ")} {...$$restProps}>
+<div  class={cn("flex flex-col ")} {...rest}>
   <div class="font-bold">{value.name}</div>
   <div>{value.chain}</div>
   <div>{value.connection}</div>
diff --git a/app/src/lib/components/table-cells/cell-plain-text.svelte b/app/src/lib/components/table-cells/cell-plain-text.svelte
index 6fb69a9c1b..4904ea0f8a 100644
--- a/app/src/lib/components/table-cells/cell-plain-text.svelte
+++ b/app/src/lib/components/table-cells/cell-plain-text.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-export let value: string
+	interface Props {
+		value: string;
+		[key: string]: any
+	}
+
+	let { value, ...rest }: Props = $props();
 </script>
 
-<p {...$$restProps}>{value}</p>
+<p {...rest}>{value}</p>
diff --git a/app/src/lib/components/table-cells/cell-sequence.svelte b/app/src/lib/components/table-cells/cell-sequence.svelte
index 237927298f..9e221904e0 100644
--- a/app/src/lib/components/table-cells/cell-sequence.svelte
+++ b/app/src/lib/components/table-cells/cell-sequence.svelte
@@ -2,13 +2,18 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellTimestamp from "./cell-timestamp.svelte"
 
-export let value: {
+  interface Props {
+    value: {
   sequence: number | undefined
   timestamp: string | undefined
-}
+};
+    [key: string]: any
+  }
+
+  let { value, ...rest }: Props = $props();
 </script>
 
-<div class={cn("flex flex-col")} {...$$restProps}>
+<div class={cn("flex flex-col")} {...rest}>
   {#if value.sequence}<div class="text-xl">{value.sequence}</div>{/if}
   <div class="text-muted-foreground">{#if value.timestamp}<CellTimestamp value={value.timestamp}/>{/if}</div>
 </div>
diff --git a/app/src/lib/components/table-cells/cell-status.svelte b/app/src/lib/components/table-cells/cell-status.svelte
index 1b92f97c18..1c6d38c1f4 100644
--- a/app/src/lib/components/table-cells/cell-status.svelte
+++ b/app/src/lib/components/table-cells/cell-status.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-export let value: string
+	interface Props {
+		value: string;
+		[key: string]: any
+	}
+
+	let { value, ...rest }: Props = $props();
 
 const goodValue = (v: string) => v === "HEALTHY" || v === "CONFIRM"
 </script>
 
-<div class={cn(goodValue(value) ? 'dark:text-[#A0ECFD]' : 'dark:text-[#FD6363]', 'text-black inline px-2 py-1 rounded')}  {...$$restProps}>{value}</div>
+<div class={cn(goodValue(value) ? 'dark:text-[#A0ECFD]' : 'dark:text-[#FD6363]', 'text-black inline px-2 py-1 rounded')}  {...rest}>{value}</div>
diff --git a/app/src/lib/components/table-cells/cell-timestamp.svelte b/app/src/lib/components/table-cells/cell-timestamp.svelte
index 4578246b28..250de375c0 100644
--- a/app/src/lib/components/table-cells/cell-timestamp.svelte
+++ b/app/src/lib/components/table-cells/cell-timestamp.svelte
@@ -4,7 +4,11 @@ import { Duration } from "svelte-ux"
 import { DurationUnits } from "svelte-ux"
 import { toPrettyDateTimeFormat } from "$lib/utilities/date.ts"
 
-export let value: Date | undefined
+	interface Props {
+		value: Date | undefined;
+	}
+
+	let { value }: Props = $props();
 </script>
 
 {#if value}{toPrettyDateTimeFormat(value, { local: true })}{:else}-{/if}
diff --git a/app/src/lib/components/tables/packets.svelte b/app/src/lib/components/tables/packets.svelte
index ba496dc208..2d25e94369 100644
--- a/app/src/lib/components/tables/packets.svelte
+++ b/app/src/lib/components/tables/packets.svelte
@@ -17,10 +17,15 @@ import {
 } from "$lib/queries/packets"
 import { timestamp } from "$lib/stores/page.ts"
 
-// export let chains: Array<Chain>
-export let chain_id: string | undefined = undefined
-export let connection_id: string | undefined = undefined
-export let channel_id: string | undefined = undefined
+
+  interface Props {
+    // export let chains: Array<Chain>
+    chain_id?: string | undefined;
+    connection_id?: string | undefined;
+    channel_id?: string | undefined;
+  }
+
+  let { chain_id = undefined, connection_id = undefined, channel_id = undefined }: Props = $props();
 // export let pageSize: number // must be even
 
 let packets = chain_id
diff --git a/app/src/lib/components/time-elapsed.svelte b/app/src/lib/components/time-elapsed.svelte
index 5e9c7e5621..4821fe8155 100644
--- a/app/src/lib/components/time-elapsed.svelte
+++ b/app/src/lib/components/time-elapsed.svelte
@@ -2,9 +2,13 @@
 import { readable } from "svelte/store"
 import { relativeTime } from "$lib/utilities/format.ts"
 
-export let timestamp: Date
-let _class: string
-export { _class as class }
+  interface Props {
+    timestamp: Date;
+    class: string;
+  }
+
+  let { timestamp, class: _class }: Props = $props();
+
 
 const time = readable(timestamp, set => {
   const interval = setInterval(() => set(timestamp), 1_000)
diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
index 2872469ffc..6032a0505a 100644
--- a/app/src/lib/components/transfer-details.svelte
+++ b/app/src/lib/components/transfer-details.svelte
@@ -25,7 +25,11 @@ import { formatUnits } from "viem"
 import PacketPath from "./packet-path.svelte"
 
 const source = $page.params.source
-export let chains: Array<Chain>
+  interface Props {
+    chains: Array<Chain>;
+  }
+
+  let { chains }: Props = $props();
 
 let transfers = createQuery({
   queryKey: ["transfers-by-source-base", source],
diff --git a/app/src/lib/components/transfers-table/transfers-table.svelte b/app/src/lib/components/transfers-table/transfers-table.svelte
index 52c0774fb7..8d89fd7eca 100644
--- a/app/src/lib/components/transfers-table/transfers-table.svelte
+++ b/app/src/lib/components/transfers-table/transfers-table.svelte
@@ -12,9 +12,13 @@ import { timestamp } from "$lib/stores/page.ts"
 
 import ExplorerTablePaginated from "$lib/components/explorer-table-paginated.svelte"
 
-export let chains: Array<Chain>
-export let normalizedAddresses: Array<string> | null = null
-export let pageSize: number // must be even
+  interface Props {
+    chains: Array<Chain>;
+    normalizedAddresses?: Array<string> | null;
+    pageSize: number;
+  }
+
+  let { chains, normalizedAddresses = null, pageSize }: Props = $props();
 
 const transfers = transfersQuery(normalizedAddresses, timestamp, pageSize)
 
diff --git a/app/src/lib/components/truncate.svelte b/app/src/lib/components/truncate.svelte
index 307c043c3e..9c54966397 100644
--- a/app/src/lib/components/truncate.svelte
+++ b/app/src/lib/components/truncate.svelte
@@ -2,8 +2,13 @@
 import * as Tooltip from "$lib/components/ui/tooltip"
 import { truncate } from "$lib/utilities/format"
 
-export let value: string
-export let type: "address" | "hash" | "full"
+	interface Props {
+		value: string;
+		type: "address" | "hash" | "full";
+		[key: string]: any
+	}
+
+	let { value, type, ...rest }: Props = $props();
 </script>
 
-<Tooltip.Root><Tooltip.Trigger {...$$restProps}>{type === "full" ? value : truncate(value, type === "address" ? 6 : 12)}</Tooltip.Trigger><Tooltip.Content>{value}</Tooltip.Content></Tooltip.Root>
+<Tooltip.Root><Tooltip.Trigger {...rest}>{type === "full" ? value : truncate(value, type === "address" ? 6 : 12)}</Tooltip.Trigger><Tooltip.Content>{value}</Tooltip.Content></Tooltip.Root>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index c98a3880cc..af1bffcf2e 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -6,16 +6,26 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = AlertDialogPrimitive.ActionProps
 type $$Events = AlertDialogPrimitive.ActionEvents
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
+
+	const children_render = $derived(children);
 </script>
 
 <AlertDialogPrimitive.Action
 	class={cn(buttonVariants(), className)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
-	let:builder
+	
 >
-	<slot {builder} />
+	{#snippet children({ builder })}
+		{@render children_render?.({ builder, })}
+	{/snippet}
 </AlertDialogPrimitive.Action>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index f4669227a8..79635774dc 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -6,16 +6,26 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = AlertDialogPrimitive.CancelProps
 type $$Events = AlertDialogPrimitive.CancelEvents
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
+
+	const children_render = $derived(children);
 </script>
 
 <AlertDialogPrimitive.Cancel
 	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
-	let:builder
+	
 >
-	<slot {builder} />
+	{#snippet children({ builder })}
+		{@render children_render?.({ builder, })}
+	{/snippet}
 </AlertDialogPrimitive.Cancel>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 20ee48404c..5b120482a9 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -5,11 +5,23 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 
 type $$Props = AlertDialogPrimitive.ContentProps
 
-export let transition: $$Props["transition"] = flyAndScale
-export let transitionConfig: $$Props["transitionConfig"] = undefined
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		transition?: $$Props["transition"];
+		transitionConfig?: $$Props["transitionConfig"];
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		transition = flyAndScale,
+		transitionConfig = undefined,
+		class: className = undefined,
+		children,
+		...rest
+	}: Props = $props();
+
 </script>
 
 <AlertDialog.Portal>
@@ -21,8 +33,8 @@ export { className as class }
 			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
 			className
 		)}
-		{...$$restProps}
+		{...rest}
 	>
-		<slot />
+		{@render children?.()}
 	</AlertDialogPrimitive.Content>
 </AlertDialog.Portal>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index 8bbbfccdbf..a5bdca52de 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = AlertDialogPrimitive.DescriptionProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <AlertDialogPrimitive.Description
 	class={cn("text-sm text-muted-foreground", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </AlertDialogPrimitive.Description>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index e52dcd6e37..675b09339d 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <div
 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index dedb61c325..bb1dab87be 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
-	<slot />
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...rest}>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index 474b938823..02b792bce2 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -5,17 +5,22 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = AlertDialogPrimitive.OverlayProps
 
-let className: $$Props["class"] = undefined
-export let transition: $$Props["transition"] = fade
-export let transitionConfig: $$Props["transitionConfig"] = {
+	interface Props {
+		class?: $$Props["class"];
+		transition?: $$Props["transition"];
+		transitionConfig?: $$Props["transitionConfig"];
+		[key: string]: any
+	}
+
+	let { class: className = undefined, transition = fade, transitionConfig = {
   duration: 150
-}
-export { className as class }
+}, ...rest }: Props = $props();
+
 </script>
 
 <AlertDialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
 	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
-	{...$$restProps}
+	{...rest}
 />
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
index 5eed315d0c..438709d28e 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
+	interface Props {
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { children, ...rest }: Props = $props();
 
 type $$Props = AlertDialogPrimitive.PortalProps
 </script>
 
-<AlertDialogPrimitive.Portal {...$$restProps}>
-	<slot />
+<AlertDialogPrimitive.Portal {...rest}>
+	{@render children?.()}
 </AlertDialogPrimitive.Portal>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index 0233bd7ccf..7f5e2e5306 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -4,11 +4,17 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = AlertDialogPrimitive.TitleProps
 
-let className: $$Props["class"] = undefined
-export let level: $$Props["level"] = "h3"
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		level?: $$Props["level"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, level = "h3", children, ...rest }: Props = $props();
+
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
-	<slot />
+<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...rest}>
+	{@render children?.()}
 </AlertDialogPrimitive.Title>
diff --git a/app/src/lib/components/ui/avatar/avatar-fallback.svelte b/app/src/lib/components/ui/avatar/avatar-fallback.svelte
index b42236405c..200d305c35 100644
--- a/app/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/app/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = AvatarPrimitive.FallbackProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <AvatarPrimitive.Fallback
 	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </AvatarPrimitive.Fallback>
diff --git a/app/src/lib/components/ui/avatar/avatar-image.svelte b/app/src/lib/components/ui/avatar/avatar-image.svelte
index 14aa0980e1..08ae9a3a19 100644
--- a/app/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/app/src/lib/components/ui/avatar/avatar-image.svelte
@@ -4,15 +4,20 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = AvatarPrimitive.ImageProps
 
-let className: $$Props["class"] = undefined
-export let src: $$Props["src"] = undefined
-export let alt: $$Props["alt"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		src?: $$Props["src"];
+		alt?: $$Props["alt"];
+		[key: string]: any
+	}
+
+	let { class: className = undefined, src = undefined, alt = undefined, ...rest }: Props = $props();
+
 </script>
 
 <AvatarPrimitive.Image
 	{src}
 	{alt}
 	class={cn("aspect-square h-full w-full", className)}
-	{...$$restProps}
+	{...rest}
 />
diff --git a/app/src/lib/components/ui/avatar/avatar.svelte b/app/src/lib/components/ui/avatar/avatar.svelte
index a4b2e4f4fa..5099a05943 100644
--- a/app/src/lib/components/ui/avatar/avatar.svelte
+++ b/app/src/lib/components/ui/avatar/avatar.svelte
@@ -4,15 +4,21 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = AvatarPrimitive.Props
 
-let className: $$Props["class"] = undefined
-export let delayMs: $$Props["delayMs"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		delayMs?: $$Props["delayMs"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, delayMs = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <AvatarPrimitive.Root
 	{delayMs}
 	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </AvatarPrimitive.Root>
diff --git a/app/src/lib/components/ui/badge/badge.svelte b/app/src/lib/components/ui/badge/badge.svelte
index 60e3582b10..b8a95b93c5 100644
--- a/app/src/lib/components/ui/badge/badge.svelte
+++ b/app/src/lib/components/ui/badge/badge.svelte
@@ -2,17 +2,29 @@
 import { type Variant, badgeVariants } from "./index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-let className: string | undefined | null = undefined
-export let href: string | undefined = undefined
-export let variant: Variant = "default"
-export { className as class }
+  interface Props {
+    class?: string | undefined | null;
+    href?: string | undefined;
+    variant?: Variant;
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    href = undefined,
+    variant = "default",
+    children,
+    ...rest
+  }: Props = $props();
+
 </script>
 
 <svelte:element
   this={href ? 'a' : 'span'}
   {href}
   class={cn(badgeVariants({ variant, className }))}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </svelte:element>
diff --git a/app/src/lib/components/ui/button/button.svelte b/app/src/lib/components/ui/button/button.svelte
index d1a8a4e57d..3372d2b927 100644
--- a/app/src/lib/components/ui/button/button.svelte
+++ b/app/src/lib/components/ui/button/button.svelte
@@ -6,14 +6,30 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = Props
 type $$Events = Events
 
-let className: $$Props["class"] = undefined
-export let value: $$Props["value"] = ""
-export let variant: $$Props["variant"] = "default"
-export let size: $$Props["size"] = "default"
-export let builders: $$Props["builders"] = []
-export let name: $$Props["name"] = "button"
-export let disabled: $$Props["disabled"] = false
-export { className as class }
+  interface Props_1 {
+    class?: $$Props["class"];
+    value?: $$Props["value"];
+    variant?: $$Props["variant"];
+    size?: $$Props["size"];
+    builders?: $$Props["builders"];
+    name?: $$Props["name"];
+    disabled?: $$Props["disabled"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    value = "",
+    variant = "default",
+    size = "default",
+    builders = [],
+    name = "button",
+    disabled = false,
+    children,
+    ...rest
+  }: Props_1 = $props();
+
 </script>
 
 <ButtonPrimitive.Root
@@ -22,11 +38,11 @@ export { className as class }
   {disabled}
   class={cn(buttonVariants({ variant, size, className }))}
   type="button"
-  {...$$restProps}
+  {...rest}
   on:click
   on:keydown
 >
-  <slot>
+  {#if children}{@render children()}{:else}
     {value}
-  </slot>
+  {/if}
 </ButtonPrimitive.Root>
diff --git a/app/src/lib/components/ui/card/card-content.svelte b/app/src/lib/components/ui/card/card-content.svelte
index 38249cb4ee..f435c8cb54 100644
--- a/app/src/lib/components/ui/card/card-content.svelte
+++ b/app/src/lib/components/ui/card/card-content.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div class={cn('p-3 sm:p-6 pt-0', className)} {...$$restProps}>
-  <slot />
+<div class={cn('p-3 sm:p-6 pt-0', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/card-description.svelte b/app/src/lib/components/ui/card/card-description.svelte
index 6d0885c319..9738f66a40 100644
--- a/app/src/lib/components/ui/card/card-description.svelte
+++ b/app/src/lib/components/ui/card/card-description.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLParagraphElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
-  <slot />
+<p class={cn('text-sm text-muted-foreground', className)} {...rest}>
+  {@render children?.()}
 </p>
diff --git a/app/src/lib/components/ui/card/card-footer.svelte b/app/src/lib/components/ui/card/card-footer.svelte
index 54a9357354..bae688d3f5 100644
--- a/app/src/lib/components/ui/card/card-footer.svelte
+++ b/app/src/lib/components/ui/card/card-footer.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div class={cn('flex items-center p-3 sm:p-6 pt-0', className)} {...$$restProps}>
-  <slot />
+<div class={cn('flex items-center p-3 sm:p-6 pt-0', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/card-header.svelte b/app/src/lib/components/ui/card/card-header.svelte
index 5446192e5c..83b6fce87e 100644
--- a/app/src/lib/components/ui/card/card-header.svelte
+++ b/app/src/lib/components/ui/card/card-header.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 p-3 sm:p-6 pb-0 sm:pb-0', className)} {...$$restProps}>
-  <slot />
+<div class={cn('flex flex-col space-y-1.5 p-3 sm:p-6 pb-0 sm:pb-0', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/card-title.svelte b/app/src/lib/components/ui/card/card-title.svelte
index 96891dcaad..c00cc34542 100644
--- a/app/src/lib/components/ui/card/card-title.svelte
+++ b/app/src/lib/components/ui/card/card-title.svelte
@@ -7,15 +7,21 @@ type $$Props = HTMLAttributes<HTMLHeadingElement> & {
   tag?: HeadingLevel
 }
 
-let className: $$Props["class"] = undefined
-export let tag: $$Props["tag"] = "h3"
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    tag?: $$Props["tag"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, tag = "h3", children, ...rest }: Props = $props();
+
 </script>
 
 <svelte:element
   this={tag}
   class={cn('text-xl font-supermolot font-bold uppercase', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </svelte:element>
diff --git a/app/src/lib/components/ui/card/card.svelte b/app/src/lib/components/ui/card/card.svelte
index 8e9530a874..4f56746faf 100644
--- a/app/src/lib/components/ui/card/card.svelte
+++ b/app/src/lib/components/ui/card/card.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <div
   class={cn('border bg-card text-card-foreground shadow-sm dark:bg-muted', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/checkbox/checkbox.svelte b/app/src/lib/components/ui/checkbox/checkbox.svelte
index 9c1d28ce87..3900306fb0 100644
--- a/app/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/app/src/lib/components/ui/checkbox/checkbox.svelte
@@ -7,9 +7,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = CheckboxPrimitive.Props
 type $$Events = CheckboxPrimitive.Events
 
-let className: $$Props["class"] = undefined
-export let checked: $$Props["checked"] = false
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    checked?: $$Props["checked"];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, checked = $bindable(false), ...rest }: Props = $props();
+
 </script>
 
 <CheckboxPrimitive.Root
@@ -18,18 +23,20 @@ export { className as class }
     className,
   )}
   bind:checked
-  {...$$restProps}
+  {...rest}
   on:click
 >
   <CheckboxPrimitive.Indicator
     class={cn('flex h-4 w-4 items-center justify-center text-current')}
-    let:isChecked
-    let:isIndeterminate
+    
+    
   >
-    {#if isChecked}
-      <Check class="h-3.5 w-3.5" />
-    {:else if isIndeterminate}
-      <Minus class="h-3.5 w-3.5" />
-    {/if}
-  </CheckboxPrimitive.Indicator>
+    {#snippet children({ isChecked, isIndeterminate })}
+        {#if isChecked}
+        <Check class="h-3.5 w-3.5" />
+      {:else if isIndeterminate}
+        <Minus class="h-3.5 w-3.5" />
+      {/if}
+          {/snippet}
+    </CheckboxPrimitive.Indicator>
 </CheckboxPrimitive.Root>
diff --git a/app/src/lib/components/ui/collapsible/collapsible-content.svelte b/app/src/lib/components/ui/collapsible/collapsible-content.svelte
index fd9d5a2869..ad5f2ee8a3 100644
--- a/app/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/app/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -4,12 +4,18 @@ import { slide } from "svelte/transition"
 
 type $$Props = CollapsiblePrimitive.ContentProps
 
-export let transition: $$Props["transition"] = slide
-export let transitionConfig: $$Props["transitionConfig"] = {
+	interface Props {
+		transition?: $$Props["transition"];
+		transitionConfig?: $$Props["transitionConfig"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { transition = slide, transitionConfig = {
   duration: 150
-}
+}, children, ...rest }: Props = $props();
 </script>
 
-<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
-	<slot />
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...rest}>
+	{@render children?.()}
 </CollapsiblePrimitive.Content>
diff --git a/app/src/lib/components/ui/command/command-dialog.svelte b/app/src/lib/components/ui/command/command-dialog.svelte
index 3e24675d8c..e0c7d06e24 100644
--- a/app/src/lib/components/ui/command/command-dialog.svelte
+++ b/app/src/lib/components/ui/command/command-dialog.svelte
@@ -6,14 +6,27 @@ import * as Dialog from "$lib/components/ui/dialog/index.js"
 
 type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps
 
-export let open: $$Props["open"] = false
-export let value: $$Props["value"] = undefined
-export let tabindex: $$Props["tabindex"] = undefined
 
-export let backdropFilter: $$Props["style"] = undefined
+  interface Props {
+    open?: $$Props["open"];
+    value?: $$Props["value"];
+    tabindex?: $$Props["tabindex"];
+    backdropFilter?: $$Props["style"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    open = $bindable(false),
+    value = $bindable(undefined),
+    tabindex = undefined,
+    backdropFilter = undefined,
+    children,
+    ...rest
+  }: Props = $props();
 </script>
 
-<Dialog.Root bind:open {...$$restProps}>
+<Dialog.Root bind:open {...rest}>
   <Dialog.Content
     {tabindex}
     data-command-dialog-overlay
@@ -22,10 +35,10 @@ export let backdropFilter: $$Props["style"] = undefined
   >
     <Command
       class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
-      {...$$restProps}
+      {...rest}
       bind:value
     >
-      <slot />
+      {@render children?.()}
     </Command>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/app/src/lib/components/ui/command/command-empty.svelte b/app/src/lib/components/ui/command/command-empty.svelte
index 670e9e19e4..1d2c865c18 100644
--- a/app/src/lib/components/ui/command/command-empty.svelte
+++ b/app/src/lib/components/ui/command/command-empty.svelte
@@ -3,10 +3,16 @@ import { Command as CommandPrimitive } from "cmdk-sv"
 import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.EmptyProps
-let className: string | undefined | null = undefined
-export { className as class }
+	interface Props {
+		class?: string | undefined | null;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
-	<slot />
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...rest}>
+	{@render children?.()}
 </CommandPrimitive.Empty>
diff --git a/app/src/lib/components/ui/command/command-group.svelte b/app/src/lib/components/ui/command/command-group.svelte
index 69fbdcefac..cac0d47b99 100644
--- a/app/src/lib/components/ui/command/command-group.svelte
+++ b/app/src/lib/components/ui/command/command-group.svelte
@@ -4,8 +4,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.GroupProps
 
-let className: string | undefined | null = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined | null;
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <CommandPrimitive.Group
@@ -14,7 +20,7 @@ export { className as class }
     "overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
     className
   )}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </CommandPrimitive.Group>
diff --git a/app/src/lib/components/ui/command/command-input.svelte b/app/src/lib/components/ui/command/command-input.svelte
index 20f650e2a1..bb77f0f1f7 100644
--- a/app/src/lib/components/ui/command/command-input.svelte
+++ b/app/src/lib/components/ui/command/command-input.svelte
@@ -5,9 +5,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.InputProps
 
-let className: string | undefined | null = undefined
-export { className as class }
-export let value = ""
+
+	interface Props {
+		class?: string | undefined | null;
+		value?: string;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, value = $bindable(""), ...rest }: Props = $props();
 </script>
 
 <div class="bg-muted text-foreground flex items-center border-b px-2" data-cmdk-input-wrapper="">
@@ -18,7 +23,7 @@ export let value = ""
 			"flex h-11 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
-		{...$$restProps}
+		{...rest}
 		bind:value
 	/>
 </div>
diff --git a/app/src/lib/components/ui/command/command-item.svelte b/app/src/lib/components/ui/command/command-item.svelte
index d9c7b3dedc..cf8c09ae71 100644
--- a/app/src/lib/components/ui/command/command-item.svelte
+++ b/app/src/lib/components/ui/command/command-item.svelte
@@ -4,10 +4,18 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.ItemProps
 
-export let asChild = false
 
-let className: string | undefined | null = undefined
-export { className as class }
+	interface Props {
+		asChild?: boolean;
+		class?: string | undefined | null;
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let { asChild = false, class: className = undefined, children, ...rest }: Props = $props();
+
+
+	const children_render = $derived(children);
 </script>
 
 <CommandPrimitive.Item
@@ -17,9 +25,11 @@ export { className as class }
 		"relative flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
-	{...$$restProps}
-	let:action
-	let:attrs
+	{...rest}
+	
+	
 >
-	<slot {action} {attrs} />
+	{#snippet children({ action, attrs })}
+		{@render children_render?.({ action, attrs, })}
+	{/snippet}
 </CommandPrimitive.Item>
diff --git a/app/src/lib/components/ui/command/command-list.svelte b/app/src/lib/components/ui/command/command-list.svelte
index fb6d68d4e2..810fa7bfda 100644
--- a/app/src/lib/components/ui/command/command-list.svelte
+++ b/app/src/lib/components/ui/command/command-list.svelte
@@ -3,13 +3,19 @@ import { Command as CommandPrimitive } from "cmdk-sv"
 import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.ListProps
-let className: string | undefined | null = undefined
-export { className as class }
+	interface Props {
+		class?: string | undefined | null;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <CommandPrimitive.List
 	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </CommandPrimitive.List>
diff --git a/app/src/lib/components/ui/command/command-separator.svelte b/app/src/lib/components/ui/command/command-separator.svelte
index accc22f9ac..456d2d46a2 100644
--- a/app/src/lib/components/ui/command/command-separator.svelte
+++ b/app/src/lib/components/ui/command/command-separator.svelte
@@ -3,8 +3,13 @@ import { Command as CommandPrimitive } from "cmdk-sv"
 import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.SeparatorProps
-let className: string | undefined | null = undefined
-export { className as class }
+	interface Props {
+		class?: string | undefined | null;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, ...rest }: Props = $props();
+
 </script>
 
-<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...$$restProps} />
+<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...rest} />
diff --git a/app/src/lib/components/ui/command/command-shortcut.svelte b/app/src/lib/components/ui/command/command-shortcut.svelte
index a96263a746..02dc1ff625 100644
--- a/app/src/lib/components/ui/command/command-shortcut.svelte
+++ b/app/src/lib/components/ui/command/command-shortcut.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLSpanElement>
 
-let className: string | undefined | null = undefined
-export { className as class }
+	interface Props {
+		class?: string | undefined | null;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <span
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </span>
diff --git a/app/src/lib/components/ui/command/command.svelte b/app/src/lib/components/ui/command/command.svelte
index 727109900c..56f273174b 100644
--- a/app/src/lib/components/ui/command/command.svelte
+++ b/app/src/lib/components/ui/command/command.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = CommandPrimitive.CommandProps
 
-export let value: $$Props["value"] = undefined
 
-let className: string | undefined | null = undefined
-export { className as class }
+	interface Props {
+		value?: $$Props["value"];
+		class?: string | undefined | null;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { value = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <CommandPrimitive.Root
@@ -16,7 +22,7 @@ export { className as class }
 		className
 	)}
 	bind:value
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </CommandPrimitive.Root>
diff --git a/app/src/lib/components/ui/dialog/dialog-content.svelte b/app/src/lib/components/ui/dialog/dialog-content.svelte
index ad0d0e9307..aec1023441 100644
--- a/app/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-content.svelte
@@ -6,17 +6,31 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 
 type $$Props = DialogPrimitive.ContentProps
 
-let className: $$Props["class"] = undefined
-export let overlayClass: $$Props["class"] = undefined
 
-export let transition: $$Props["transition"] = flyAndScale
-export let transitionConfig: $$Props["transitionConfig"] = {
+
+  interface Props {
+    class?: $$Props["class"];
+    overlayClass?: $$Props["class"];
+    transition?: $$Props["transition"];
+    transitionConfig?: $$Props["transitionConfig"];
+    backdropFilter?: $$Props["style"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    overlayClass = undefined,
+    transition = flyAndScale,
+    transitionConfig = {
   duration: 200
-}
+},
+    backdropFilter = undefined,
+    children,
+    ...rest
+  }: Props = $props();
 
-export let backdropFilter: $$Props["style"] = undefined
 
-export { className as class }
 </script>
 
 <Dialog.Portal>
@@ -34,9 +48,9 @@ export { className as class }
       "fixed left-[50%] top-[50%] z-40 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-4 sm: md:w-full",
       className,
     )}
-    {...$$restProps}
+    {...rest}
   >
-    <slot />
+    {@render children?.()}
     <DialogPrimitive.Close
       class={cn(
         "absolute right-3 top-4 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
diff --git a/app/src/lib/components/ui/dialog/dialog-description.svelte b/app/src/lib/components/ui/dialog/dialog-description.svelte
index 25778a9506..752cf8a4de 100644
--- a/app/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-description.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DialogPrimitive.DescriptionProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DialogPrimitive.Description
   class={cn('text-sm text-muted-foreground', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </DialogPrimitive.Description>
diff --git a/app/src/lib/components/ui/dialog/dialog-footer.svelte b/app/src/lib/components/ui/dialog/dialog-footer.svelte
index 3d9ebbad65..744056f3ac 100644
--- a/app/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <div
   class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/dialog/dialog-header.svelte b/app/src/lib/components/ui/dialog/dialog-header.svelte
index cf758cc5ec..f3b26fdf00 100644
--- a/app/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-header.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
-  <slot />
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/dialog/dialog-overlay.svelte b/app/src/lib/components/ui/dialog/dialog-overlay.svelte
index 63cd772956..7e1497ad7c 100644
--- a/app/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -5,13 +5,24 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DialogPrimitive.OverlayProps
 
-let className: $$Props["class"] = undefined
-export let transition: $$Props["transition"] = fade
-export let transitionConfig: $$Props["transitionConfig"] = {
+  interface Props {
+    class?: $$Props["class"];
+    transition?: $$Props["transition"];
+    transitionConfig?: $$Props["transitionConfig"];
+    backdropFilter?: $$Props["style"];
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    transition = fade,
+    transitionConfig = {
   duration: 150
-}
-export let backdropFilter: $$Props["style"] = undefined
-export { className as class }
+},
+    backdropFilter = undefined,
+    ...rest
+  }: Props = $props();
+
 </script>
 
 <DialogPrimitive.Overlay
@@ -19,5 +30,5 @@ export { className as class }
   {transitionConfig}
   style={`backdrop-filter: ${backdropFilter}`}
   class={cn('fixed inset-0 z-40 bg-muted/60', className)}
-  {...$$restProps}
+  {...rest}
 />
diff --git a/app/src/lib/components/ui/dialog/dialog-portal.svelte b/app/src/lib/components/ui/dialog/dialog-portal.svelte
index 570fa31a5d..becfc3b499 100644
--- a/app/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
 import { Dialog as DialogPrimitive } from "bits-ui"
+	interface Props {
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { children, ...rest }: Props = $props();
 type $$Props = DialogPrimitive.PortalProps
 </script>
 
-<DialogPrimitive.Portal {...$$restProps}>
-	<slot />
+<DialogPrimitive.Portal {...rest}>
+	{@render children?.()}
 </DialogPrimitive.Portal>
diff --git a/app/src/lib/components/ui/dialog/dialog-title.svelte b/app/src/lib/components/ui/dialog/dialog-title.svelte
index 1998f08236..cd1a0cbf7e 100644
--- a/app/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-title.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DialogPrimitive.TitleProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DialogPrimitive.Title
   class={cn('text-xl uppercase font-bold font-supermolot', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </DialogPrimitive.Title>
diff --git a/app/src/lib/components/ui/drawer/drawer-content.svelte b/app/src/lib/components/ui/drawer/drawer-content.svelte
index 45248f3c3a..2b2c0a7723 100644
--- a/app/src/lib/components/ui/drawer/drawer-content.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-content.svelte
@@ -5,8 +5,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DrawerPrimitive.ContentProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DrawerPrimitive.Portal>
@@ -16,9 +22,9 @@ export { className as class }
       'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
       className,
     )}
-    {...$$restProps}
+    {...rest}
   >
     <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
-    <slot />
+    {@render children?.()}
   </DrawerPrimitive.Content>
 </DrawerPrimitive.Portal>
diff --git a/app/src/lib/components/ui/drawer/drawer-description.svelte b/app/src/lib/components/ui/drawer/drawer-description.svelte
index 612f36a42d..7deb06cfde 100644
--- a/app/src/lib/components/ui/drawer/drawer-description.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-description.svelte
@@ -4,15 +4,21 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DrawerPrimitive.DescriptionProps
 
-export let el: $$Props["el"] = undefined
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    el?: $$Props["el"];
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DrawerPrimitive.Description
   bind:el
   class={cn('text-sm text-muted-foreground', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </DrawerPrimitive.Description>
diff --git a/app/src/lib/components/ui/drawer/drawer-footer.svelte b/app/src/lib/components/ui/drawer/drawer-footer.svelte
index a7886e6692..95de1f698d 100644
--- a/app/src/lib/components/ui/drawer/drawer-footer.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -6,11 +6,17 @@ type $$Props = HTMLAttributes<HTMLDivElement> & {
   el?: HTMLDivElement
 }
 
-export let el: $$Props["el"] = undefined
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    el?: $$Props["el"];
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...$$restProps}>
-  <slot />
+<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/drawer/drawer-header.svelte b/app/src/lib/components/ui/drawer/drawer-header.svelte
index 1db996b1c2..c40904d54e 100644
--- a/app/src/lib/components/ui/drawer/drawer-header.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-header.svelte
@@ -5,15 +5,21 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = HTMLAttributes<HTMLDivElement> & {
   el?: HTMLDivElement
 }
-export let el: $$Props["el"] = undefined
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    el?: $$Props["el"];
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <div
   bind:this={el}
   class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/drawer/drawer-nested.svelte b/app/src/lib/components/ui/drawer/drawer-nested.svelte
index 0ba864e1d7..09301bc34e 100644
--- a/app/src/lib/components/ui/drawer/drawer-nested.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-nested.svelte
@@ -2,11 +2,23 @@
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 
 type $$Props = DrawerPrimitive.Props
-export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true
-export let open: $$Props["open"] = false
-export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined
+	interface Props {
+		shouldScaleBackground?: $$Props["shouldScaleBackground"];
+		open?: $$Props["open"];
+		activeSnapPoint?: $$Props["activeSnapPoint"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		shouldScaleBackground = true,
+		open = $bindable(false),
+		activeSnapPoint = $bindable(undefined),
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
-	<slot />
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...rest}>
+	{@render children?.()}
 </DrawerPrimitive.NestedRoot>
diff --git a/app/src/lib/components/ui/drawer/drawer-overlay.svelte b/app/src/lib/components/ui/drawer/drawer-overlay.svelte
index 86696167ad..1045868289 100644
--- a/app/src/lib/components/ui/drawer/drawer-overlay.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -4,15 +4,21 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DrawerPrimitive.OverlayProps
 
-export let el: $$Props["el"] = undefined
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    el?: $$Props["el"];
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DrawerPrimitive.Overlay
   bind:el
   class={cn('fixed inset-0 z-50 bg-black/80', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </DrawerPrimitive.Overlay>
diff --git a/app/src/lib/components/ui/drawer/drawer-title.svelte b/app/src/lib/components/ui/drawer/drawer-title.svelte
index eda842168f..00c587191e 100644
--- a/app/src/lib/components/ui/drawer/drawer-title.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-title.svelte
@@ -4,15 +4,21 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DrawerPrimitive.TitleProps
 
-export let el: $$Props["el"] = undefined
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    el?: $$Props["el"];
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DrawerPrimitive.Title
   bind:el
   class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </DrawerPrimitive.Title>
diff --git a/app/src/lib/components/ui/drawer/drawer.svelte b/app/src/lib/components/ui/drawer/drawer.svelte
index 5433edee50..d705688166 100644
--- a/app/src/lib/components/ui/drawer/drawer.svelte
+++ b/app/src/lib/components/ui/drawer/drawer.svelte
@@ -2,11 +2,23 @@
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 
 type $$Props = DrawerPrimitive.Props
-export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true
-export let open: $$Props["open"] = false
-export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined
+	interface Props {
+		shouldScaleBackground?: $$Props["shouldScaleBackground"];
+		open?: $$Props["open"];
+		activeSnapPoint?: $$Props["activeSnapPoint"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		shouldScaleBackground = true,
+		open = $bindable(false),
+		activeSnapPoint = $bindable(undefined),
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
-	<slot />
+<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...rest}>
+	{@render children?.()}
 </DrawerPrimitive.Root>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index c27a423ce3..250e986474 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -6,9 +6,15 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = DropdownMenuPrimitive.CheckboxItemProps
 type $$Events = DropdownMenuPrimitive.CheckboxItemEvents
 
-let className: $$Props["class"] = undefined
-export let checked: $$Props["checked"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		checked?: $$Props["checked"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, checked = $bindable(undefined), children, ...rest }: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
@@ -17,7 +23,7 @@ export { className as class }
 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -31,5 +37,5 @@ export { className as class }
 			<Check class="h-4 w-4" />
 		</DropdownMenuPrimitive.CheckboxIndicator>
 	</span>
-	<slot />
+	{@render children?.()}
 </DropdownMenuPrimitive.CheckboxItem>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 0cdb22301f..8de883d7d7 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -5,11 +5,24 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 type $$Props = DropdownMenuPrimitive.ContentProps
 type $$Events = DropdownMenuPrimitive.ContentEvents
 
-let className: $$Props["class"] = undefined
-export let sideOffset: $$Props["sideOffset"] = 4
-export let transition: $$Props["transition"] = flyAndScale
-export let transitionConfig: $$Props["transitionConfig"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		sideOffset?: $$Props["sideOffset"];
+		transition?: $$Props["transition"];
+		transitionConfig?: $$Props["transitionConfig"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		sideOffset = 4,
+		transition = flyAndScale,
+		transitionConfig = undefined,
+		children,
+		...rest
+	}: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.Content
@@ -20,8 +33,8 @@ export { className as class }
 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 	on:keydown
 >
-	<slot />
+	{@render children?.()}
 </DropdownMenuPrimitive.Content>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 68486e991b..336caad736 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -7,9 +7,15 @@ type $$Props = DropdownMenuPrimitive.ItemProps & {
 }
 type $$Events = DropdownMenuPrimitive.ItemEvents
 
-let className: $$Props["class"] = undefined
-export let inset: $$Props["inset"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		inset?: $$Props["inset"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.Item
@@ -18,7 +24,7 @@ export { className as class }
 		inset && "pl-8",
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -27,5 +33,5 @@ export { className as class }
 	on:pointerleave
 	on:pointermove
 >
-	<slot />
+	{@render children?.()}
 </DropdownMenuPrimitive.Item>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index 2e3b07fda7..ad43e2072b 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -6,14 +6,20 @@ type $$Props = DropdownMenuPrimitive.LabelProps & {
   inset?: boolean
 }
 
-let className: $$Props["class"] = undefined
-export let inset: $$Props["inset"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		inset?: $$Props["inset"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.Label
 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </DropdownMenuPrimitive.Label>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
index 2f2169e69b..799d0f9e09 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -3,9 +3,15 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
 
 type $$Props = DropdownMenuPrimitive.RadioGroupProps
 
-export let value: $$Props["value"] = undefined
+	interface Props {
+		value?: $$Props["value"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { value = $bindable(undefined), children, ...rest }: Props = $props();
 </script>
 
-<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
+<DropdownMenuPrimitive.RadioGroup {...rest} bind:value>
+	{@render children?.()}
 </DropdownMenuPrimitive.RadioGroup>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 44558d9bd0..29f8b6ca5a 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -6,9 +6,15 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = DropdownMenuPrimitive.RadioItemProps
 type $$Events = DropdownMenuPrimitive.RadioItemEvents
 
-let className: $$Props["class"] = undefined
-export let value: $$Props["value"]
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		value: $$Props["value"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, value, children, ...rest }: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.RadioItem
@@ -17,7 +23,7 @@ export { className as class }
 		className
 	)}
 	{value}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -31,5 +37,5 @@ export { className as class }
 			<Circle class="h-2 w-2 fill-current" />
 		</DropdownMenuPrimitive.RadioIndicator>
 	</span>
-	<slot />
+	{@render children?.()}
 </DropdownMenuPrimitive.RadioItem>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 30f7cc3a69..0b8bec8abd 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -4,11 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = DropdownMenuPrimitive.SeparatorProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		[key: string]: any
+	}
+
+	let { class: className = undefined, ...rest }: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.Separator
 	class={cn("-mx-1 my-1 h-px bg-muted", className)}
-	{...$$restProps}
+	{...rest}
 />
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 7549737f38..b5e1fb20ed 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLSpanElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
-	<slot />
+<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...rest}>
+	{@render children?.()}
 </span>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 3baa5284e3..10f4ed9814 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -5,13 +5,25 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 type $$Props = DropdownMenuPrimitive.SubContentProps
 type $$Events = DropdownMenuPrimitive.SubContentEvents
 
-let className: $$Props["class"] = undefined
-export let transition: $$Props["transition"] = flyAndScale
-export let transitionConfig: $$Props["transitionConfig"] = {
+	interface Props {
+		class?: $$Props["class"];
+		transition?: $$Props["transition"];
+		transitionConfig?: $$Props["transitionConfig"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		transition = flyAndScale,
+		transitionConfig = {
   x: -10,
   y: 0
-}
-export { className as class }
+},
+		children,
+		...rest
+	}: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.SubContent
@@ -21,10 +33,10 @@ export { className as class }
 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 	on:keydown
 	on:focusout
 	on:pointermove
 >
-	<slot />
+	{@render children?.()}
 </DropdownMenuPrimitive.SubContent>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 3f632f81f7..164093f912 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -8,9 +8,15 @@ type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 }
 type $$Events = DropdownMenuPrimitive.SubTriggerEvents
 
-let className: $$Props["class"] = undefined
-export let inset: $$Props["inset"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		inset?: $$Props["inset"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
@@ -19,7 +25,7 @@ export { className as class }
 		inset && "pl-8",
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -27,6 +33,6 @@ export { className as class }
 	on:pointerleave
 	on:pointermove
 >
-	<slot />
+	{@render children?.()}
 	<ChevronRight class="ml-auto h-4 w-4" />
 </DropdownMenuPrimitive.SubTrigger>
diff --git a/app/src/lib/components/ui/input/input.svelte b/app/src/lib/components/ui/input/input.svelte
index 476332b52a..f4fe1cf7ae 100644
--- a/app/src/lib/components/ui/input/input.svelte
+++ b/app/src/lib/components/ui/input/input.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { createBubbler, passive } from 'svelte/legacy';
+
+  const bubble = createBubbler();
 import type { HTMLInputAttributes } from "svelte/elements"
 import type { InputEvents } from "./index.js"
 import { cn } from "$lib/utilities/shadcn.js"
@@ -6,13 +9,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = HTMLInputAttributes
 type $$Events = InputEvents
 
-let className: $$Props["class"] = undefined
-export let value: $$Props["value"] = undefined
-export { className as class }
+
 
 // Workaround for https://github.com/sveltejs/svelte/issues/9305
-// Fixed in Svelte 5, but not backported to 4.x.
-export let readonly: $$Props["readonly"] = undefined
+
+  interface Props {
+    class?: $$Props["class"];
+    value?: $$Props["value"];
+    // Fixed in Svelte 5, but not backported to 4.x.
+    readonly?: $$Props["readonly"];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, value = $bindable(undefined), readonly = undefined, ...rest }: Props = $props();
 </script>
 
 <input
@@ -22,21 +31,21 @@ export let readonly: $$Props["readonly"] = undefined
   )}
   bind:value
   {readonly}
-  on:blur
-  on:change
-  on:click
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mouseover
-  on:mousemove
-  on:mouseenter
-  on:mouseleave
-  on:paste
-  on:input
-  on:wheel|passive
-  {...$$restProps}
+  onblur={bubble('blur')}
+  onchange={bubble('change')}
+  onclick={bubble('click')}
+  onfocus={bubble('focus')}
+  onfocusin={bubble('focusin')}
+  onfocusout={bubble('focusout')}
+  onkeydown={bubble('keydown')}
+  onkeypress={bubble('keypress')}
+  onkeyup={bubble('keyup')}
+  onmouseover={bubble('mouseover')}
+  onmousemove={bubble('mousemove')}
+  onmouseenter={bubble('mouseenter')}
+  onmouseleave={bubble('mouseleave')}
+  onpaste={bubble('paste')}
+  oninput={bubble('input')}
+  use:passive={['wheel', () => bubble('wheel')]}
+  {...rest}
 />
diff --git a/app/src/lib/components/ui/label/label.svelte b/app/src/lib/components/ui/label/label.svelte
index 8969d65365..6ac8ddd5c7 100644
--- a/app/src/lib/components/ui/label/label.svelte
+++ b/app/src/lib/components/ui/label/label.svelte
@@ -5,8 +5,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = LabelPrimitive.Props
 type $$Events = LabelPrimitive.Events
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <LabelPrimitive.Root
@@ -14,8 +20,8 @@ export { className as class }
     'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
     className,
   )}
-  {...$$restProps}
+  {...rest}
   on:mousedown
 >
-  <slot />
+  {@render children?.()}
 </LabelPrimitive.Root>
diff --git a/app/src/lib/components/ui/pagination/pagination-content.svelte b/app/src/lib/components/ui/pagination/pagination-content.svelte
index 636371c04b..f8b33db6b5 100644
--- a/app/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-content.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLUListElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<ul class={cn("flex flex-row items-center gap-1", className)} {...$$restProps}>
-	<slot />
+<ul class={cn("flex flex-row items-center gap-1", className)} {...rest}>
+	{@render children?.()}
 </ul>
diff --git a/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index d152a2bb75..4dc1300c25 100644
--- a/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -5,14 +5,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLSpanElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		[key: string]: any
+	}
+
+	let { class: className = undefined, ...rest }: Props = $props();
+
 </script>
 
 <span
 	aria-hidden
 	class={cn("flex h-9 w-9 items-center justify-center", className)}
-	{...$$restProps}
+	{...rest}
 >
 	<Ellipsis class="h-4 w-4" />
 	<span class="sr-only">More pages</span>
diff --git a/app/src/lib/components/ui/pagination/pagination-item.svelte b/app/src/lib/components/ui/pagination/pagination-item.svelte
index 54c3257430..8282eb7c80 100644
--- a/app/src/lib/components/ui/pagination/pagination-item.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-item.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLLIElement>
 
-let className: $$Props["class"] = undefined
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 
-export { className as class }
 </script>
 
 <li 
-class={cn("", className)} {...$$restProps}
+class={cn("", className)} {...rest}
 >
-  <slot />
+  {@render children?.()}
 </li>
diff --git a/app/src/lib/components/ui/pagination/pagination-link.svelte b/app/src/lib/components/ui/pagination/pagination-link.svelte
index b5cb37bcae..76d09961d6 100644
--- a/app/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-link.svelte
@@ -10,12 +10,25 @@ type $$Props = PaginationPrimitive.PageProps &
 
 type $$Events = PaginationPrimitive.PageEvents
 
-let className: $$Props["class"] = undefined
-export let page: $$Props["page"]
-export let size: $$Props["size"] = "icon"
-export let isActive: $$Props["isActive"] = false
+	interface Props_1 {
+		class?: $$Props["class"];
+		page: $$Props["page"];
+		size?: $$Props["size"];
+		isActive?: $$Props["isActive"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		page = $bindable(),
+		size = "icon",
+		isActive = false,
+		children,
+		...rest
+	}: Props_1 = $props();
+
 
-export { className as class }
 </script>
 
 <PaginationPrimitive.Page
@@ -27,8 +40,8 @@ export { className as class }
 		}),
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 	on:click
 >
-	<slot>{page.value}</slot>
+	{#if children}{@render children()}{:else}{page.value}{/if}
 </PaginationPrimitive.Page>
diff --git a/app/src/lib/components/ui/pagination/pagination-next-button.svelte b/app/src/lib/components/ui/pagination/pagination-next-button.svelte
index 1218f93db0..9332179bb0 100644
--- a/app/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -7,21 +7,31 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = PaginationPrimitive.NextButtonProps
 type $$Events = PaginationPrimitive.NextButtonEvents
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
+
+	const children_render = $derived(children);
 </script>
 
-<PaginationPrimitive.NextButton asChild let:builder>
-	<Button
-		variant="ghost"
-		class={cn("gap-1 pr-2.5", className)}
-		builders={[builder]}
-		on:click
-		{...$$restProps}
-	>
-		<slot>
-			<span>Next</span>
-			<ChevronRight class="h-4 w-4" />
-		</slot>
-	</Button>
+<PaginationPrimitive.NextButton asChild >
+	{#snippet children({ builder })}
+		<Button
+			variant="ghost"
+			class={cn("gap-1 pr-2.5", className)}
+			builders={[builder]}
+			on:click
+			{...rest}
+		>
+			{#if children_render}{@render children_render()}{:else}
+				<span>Next</span>
+				<ChevronRight class="h-4 w-4" />
+			{/if}
+		</Button>
+	{/snippet}
 </PaginationPrimitive.NextButton>
diff --git a/app/src/lib/components/ui/pagination/pagination-prev-button.svelte b/app/src/lib/components/ui/pagination/pagination-prev-button.svelte
index b2199ca46f..916e1323f1 100644
--- a/app/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -7,21 +7,31 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = PaginationPrimitive.PrevButtonProps
 type $$Events = PaginationPrimitive.PrevButtonEvents
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { class: className = undefined, children, ...rest }: Props = $props();
+
+
+	const children_render = $derived(children);
 </script>
 
-<PaginationPrimitive.PrevButton asChild let:builder>
-	<Button
-		variant="ghost"
-		class={cn("gap-1 pl-2.5", className)}
-		builders={[builder]}
-		on:click
-		{...$$restProps}
-	>
-		<slot>
-			<ChevronLeft class="h-4 w-4" />
-			<span>Previous</span>
-		</slot>
-	</Button>
+<PaginationPrimitive.PrevButton asChild >
+	{#snippet children({ builder })}
+		<Button
+			variant="ghost"
+			class={cn("gap-1 pl-2.5", className)}
+			builders={[builder]}
+			on:click
+			{...rest}
+		>
+			{#if children_render}{@render children_render()}{:else}
+				<ChevronLeft class="h-4 w-4" />
+				<span>Previous</span>
+			{/if}
+		</Button>
+	{/snippet}
 </PaginationPrimitive.PrevButton>
diff --git a/app/src/lib/components/ui/pagination/pagination.svelte b/app/src/lib/components/ui/pagination/pagination.svelte
index 7950a43087..c668128d26 100644
--- a/app/src/lib/components/ui/pagination/pagination.svelte
+++ b/app/src/lib/components/ui/pagination/pagination.svelte
@@ -6,14 +6,30 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = PaginationPrimitive.Props
 type $$Events = PaginationPrimitive.Events
 
-let className: $$Props["class"] = undefined
-export let count: $$Props["count"] = 0
-export let perPage: $$Props["perPage"] = 10
-export let page: $$Props["page"] = 1
-export let siblingCount: $$Props["siblingCount"] = 1
-export { className as class }
-
-$: currentPage = page
+	interface Props {
+		class?: $$Props["class"];
+		count?: $$Props["count"];
+		perPage?: $$Props["perPage"];
+		page?: $$Props["page"];
+		siblingCount?: $$Props["siblingCount"];
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		children,
+		...rest
+	}: Props = $props();
+
+
+let currentPage = $derived(page)
+
+	const children_render = $derived(children);
 </script>
 
 <PaginationPrimitive.Root
@@ -21,13 +37,15 @@ $: currentPage = page
 	{perPage}
 	{siblingCount}
 	bind:page
-	let:builder
-	let:pages
-	let:range
+	
+	
+	
 	asChild
-	{...$$restProps}
+	{...rest}
 >
-	<nav {...builder} class={cn("flex w-full flex-col items-center", className)}>
-		<slot {pages} {range} {currentPage} />
-	</nav>
+	{#snippet children({ builder, pages, range })}
+		<nav {...builder} class={cn("flex w-full flex-col items-center", className)}>
+			{@render children_render?.({ pages, range, currentPage, })}
+		</nav>
+	{/snippet}
 </PaginationPrimitive.Root>
diff --git a/app/src/lib/components/ui/popover/popover-content.svelte b/app/src/lib/components/ui/popover/popover-content.svelte
index 3e4a176117..652f1a4718 100644
--- a/app/src/lib/components/ui/popover/popover-content.svelte
+++ b/app/src/lib/components/ui/popover/popover-content.svelte
@@ -3,10 +3,22 @@ import { Popover as PopoverPrimitive } from "bits-ui"
 import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 
 type $$Props = PopoverPrimitive.ContentProps
-let className: $$Props["class"] = undefined
-export let transition: $$Props["transition"] = flyAndScale
-export let transitionConfig: $$Props["transitionConfig"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    transition?: $$Props["transition"];
+    transitionConfig?: $$Props["transitionConfig"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    transition = flyAndScale,
+    transitionConfig = undefined,
+    children,
+    ...rest
+  }: Props = $props();
+
 </script>
 
 <PopoverPrimitive.Content
@@ -16,7 +28,7 @@ export { className as class }
     'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
     className,
   )}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </PopoverPrimitive.Content>
diff --git a/app/src/lib/components/ui/resizable/resizable-handle.svelte b/app/src/lib/components/ui/resizable/resizable-handle.svelte
index d57dca2c68..7eec8e60df 100644
--- a/app/src/lib/components/ui/resizable/resizable-handle.svelte
+++ b/app/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -7,10 +7,14 @@ type $$Props = ResizablePrimitive.PaneResizerProps & {
   withHandle?: boolean
 }
 
-export let withHandle: $$Props["withHandle"] = false
-export let el: $$Props["el"] = undefined
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		withHandle?: $$Props["withHandle"];
+		el?: $$Props["el"];
+		class?: $$Props["class"];
+	}
+
+	let { withHandle = false, el = $bindable(undefined), class: className = undefined }: Props = $props();
+
 </script>
 
 <ResizablePrimitive.PaneResizer
diff --git a/app/src/lib/components/ui/resizable/resizable-pane-group.svelte b/app/src/lib/components/ui/resizable/resizable-pane-group.svelte
index 11ff91172b..6bdca9e6e7 100644
--- a/app/src/lib/components/ui/resizable/resizable-pane-group.svelte
+++ b/app/src/lib/components/ui/resizable/resizable-pane-group.svelte
@@ -4,11 +4,24 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = ResizablePrimitive.PaneGroupProps
 
-let className: $$Props["class"] = undefined
-export let direction: $$Props["direction"]
-export let paneGroup: $$Props["paneGroup"] = undefined
-export let el: $$Props["el"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		direction: $$Props["direction"];
+		paneGroup?: $$Props["paneGroup"];
+		el?: $$Props["el"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		direction,
+		paneGroup = $bindable(undefined),
+		el = $bindable(undefined),
+		children,
+		...rest
+	}: Props = $props();
+
 </script>
 
 <ResizablePrimitive.PaneGroup
@@ -16,7 +29,7 @@ export { className as class }
 	bind:paneGroup
 	{direction}
 	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </ResizablePrimitive.PaneGroup>
diff --git a/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index 6e08f9e920..d6ed36c042 100644
--- a/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -6,9 +6,14 @@ type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
   orientation?: "vertical" | "horizontal"
 }
 
-let className: $$Props["class"] = undefined
-export let orientation: $$Props["orientation"] = "vertical"
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		orientation?: $$Props["orientation"];
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = undefined, orientation = "vertical", children }: Props = $props();
+
 </script>
 
 <ScrollAreaPrimitive.Scrollbar
@@ -20,7 +25,7 @@ export { className as class }
 		className
 	)}
 >
-	<slot />
+	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
 		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
 	/>
diff --git a/app/src/lib/components/ui/scroll-area/scroll-area.svelte b/app/src/lib/components/ui/scroll-area/scroll-area.svelte
index 0ec413a093..f44635bc9b 100644
--- a/app/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/app/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -9,17 +9,30 @@ type $$Props = ScrollAreaPrimitive.Props & {
   scrollbarYClasses?: string
 }
 
-let className: $$Props["class"] = undefined
-export { className as class }
-export let orientation = "vertical"
-export let scrollbarXClasses = ""
-export let scrollbarYClasses = ""
+
+	interface Props {
+		class?: $$Props["class"];
+		orientation?: string;
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+<ScrollAreaPrimitive.Root {...rest} class={cn("relative overflow-hidden", className)}>
 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
 		<ScrollAreaPrimitive.Content>
-			<slot />
+			{@render children?.()}
 		</ScrollAreaPrimitive.Content>
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}
diff --git a/app/src/lib/components/ui/select/select-content.svelte b/app/src/lib/components/ui/select/select-content.svelte
index d28c528617..f7a94cf4f7 100644
--- a/app/src/lib/components/ui/select/select-content.svelte
+++ b/app/src/lib/components/ui/select/select-content.svelte
@@ -6,18 +6,33 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 type $$Props = SelectPrimitive.ContentProps
 type $$Events = SelectPrimitive.ContentEvents
 
-export let sideOffset: $$Props["sideOffset"] = 4
-export let inTransition: $$Props["inTransition"] = flyAndScale
-export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined
-export let outTransition: $$Props["outTransition"] = scale
-export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+
+  interface Props {
+    sideOffset?: $$Props["sideOffset"];
+    inTransition?: $$Props["inTransition"];
+    inTransitionConfig?: $$Props["inTransitionConfig"];
+    outTransition?: $$Props["outTransition"];
+    outTransitionConfig?: $$Props["outTransitionConfig"];
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    sideOffset = 4,
+    inTransition = flyAndScale,
+    inTransitionConfig = undefined,
+    outTransition = scale,
+    outTransitionConfig = {
   start: 0.95,
   opacity: 0,
   duration: 50
-}
+},
+    class: className = undefined,
+    children,
+    ...rest
+  }: Props = $props();
 
-let className: $$Props["class"] = undefined
-export { className as class }
 </script>
 
 <SelectPrimitive.Content
@@ -30,10 +45,10 @@ export { className as class }
     'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
     className,
   )}
-  {...$$restProps}
+  {...rest}
   on:keydown
 >
   <div class="w-full p-1">
-    <slot />
+    {@render children?.()}
   </div>
 </SelectPrimitive.Content>
diff --git a/app/src/lib/components/ui/select/select-item.svelte b/app/src/lib/components/ui/select/select-item.svelte
index 1dc3182374..381dc1eb23 100644
--- a/app/src/lib/components/ui/select/select-item.svelte
+++ b/app/src/lib/components/ui/select/select-item.svelte
@@ -6,11 +6,24 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = SelectPrimitive.ItemProps
 type $$Events = SelectPrimitive.ItemEvents
 
-let className: $$Props["class"] = undefined
-export let value: $$Props["value"]
-export let label: $$Props["label"] = undefined
-export let disabled: $$Props["disabled"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    value: $$Props["value"];
+    label?: $$Props["label"];
+    disabled?: $$Props["disabled"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    value,
+    label = undefined,
+    disabled = undefined,
+    children,
+    ...rest
+  }: Props = $props();
+
 </script>
 
 <SelectPrimitive.Item
@@ -21,7 +34,7 @@ export { className as class }
     'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     className,
   )}
-  {...$$restProps}
+  {...rest}
   on:click
   on:keydown
   on:focusin
@@ -34,7 +47,7 @@ export { className as class }
       <Check class="h-4 w-4" />
     </SelectPrimitive.ItemIndicator>
   </span>
-  <slot>
+  {#if children}{@render children()}{:else}
     {label || value}
-  </slot>
+  {/if}
 </SelectPrimitive.Item>
diff --git a/app/src/lib/components/ui/select/select-label.svelte b/app/src/lib/components/ui/select/select-label.svelte
index b91e01e937..42d1bc96f3 100644
--- a/app/src/lib/components/ui/select/select-label.svelte
+++ b/app/src/lib/components/ui/select/select-label.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SelectPrimitive.LabelProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <SelectPrimitive.Label
   class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </SelectPrimitive.Label>
diff --git a/app/src/lib/components/ui/select/select-separator.svelte b/app/src/lib/components/ui/select/select-separator.svelte
index 8b3206afeb..f073f024dc 100644
--- a/app/src/lib/components/ui/select/select-separator.svelte
+++ b/app/src/lib/components/ui/select/select-separator.svelte
@@ -4,8 +4,13 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SelectPrimitive.SeparatorProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+	interface Props {
+		class?: $$Props["class"];
+		[key: string]: any
+	}
+
+	let { class: className = undefined, ...rest }: Props = $props();
+
 </script>
 
-<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...rest} />
diff --git a/app/src/lib/components/ui/select/select-trigger.svelte b/app/src/lib/components/ui/select/select-trigger.svelte
index 578aa3d3f0..a1b8cb1d18 100644
--- a/app/src/lib/components/ui/select/select-trigger.svelte
+++ b/app/src/lib/components/ui/select/select-trigger.svelte
@@ -6,8 +6,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = SelectPrimitive.TriggerProps
 type $$Events = SelectPrimitive.TriggerEvents
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet<[any]>;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
+
+  const children_render = $derived(children);
 </script>
 
 <SelectPrimitive.Trigger
@@ -15,13 +23,15 @@ export { className as class }
     'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
     className,
   )}
-  {...$$restProps}
-  let:builder
+  {...rest}
+  
   on:click
   on:keydown
 >
-  <slot {builder} />
-  <div>
-    <ChevronDown class="h-4 w-4 opacity-50" />
-  </div>
+  {#snippet children({ builder })}
+    {@render children_render?.({ builder, })}
+    <div>
+      <ChevronDown class="h-4 w-4 opacity-50" />
+    </div>
+  {/snippet}
 </SelectPrimitive.Trigger>
diff --git a/app/src/lib/components/ui/separator/separator.svelte b/app/src/lib/components/ui/separator/separator.svelte
index 0285e032f2..969e7b16d5 100644
--- a/app/src/lib/components/ui/separator/separator.svelte
+++ b/app/src/lib/components/ui/separator/separator.svelte
@@ -4,10 +4,15 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SeparatorPrimitive.Props
 
-let className: $$Props["class"] = undefined
-export let orientation: $$Props["orientation"] = "horizontal"
-export let decorative: $$Props["decorative"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    orientation?: $$Props["orientation"];
+    decorative?: $$Props["decorative"];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, orientation = "horizontal", decorative = undefined, ...rest }: Props = $props();
+
 </script>
 
 <SeparatorPrimitive.Root
@@ -18,5 +23,5 @@ export { className as class }
   )}
   {orientation}
   {decorative}
-  {...$$restProps}
+  {...rest}
 />
diff --git a/app/src/lib/components/ui/sheet/sheet-content.svelte b/app/src/lib/components/ui/sheet/sheet-content.svelte
index 4e6cb5b600..f90d4eec77 100644
--- a/app/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-content.svelte
@@ -9,14 +9,28 @@ type $$Props = SheetPrimitive.ContentProps & {
   side?: Side
 }
 
-let className: $$Props["class"] = undefined
-export let side: $$Props["side"] = "right"
-export { className as class }
-export let inTransition: $$Props["inTransition"] = fly
-export let inTransitionConfig: $$Props["inTransitionConfig"] = sheetTransitions[side ?? "right"].in
-export let outTransition: $$Props["outTransition"] = fly
-export let outTransitionConfig: $$Props["outTransitionConfig"] =
-  sheetTransitions[side ?? "right"].out
+
+  interface Props {
+    class?: $$Props["class"];
+    side?: $$Props["side"];
+    inTransition?: $$Props["inTransition"];
+    inTransitionConfig?: $$Props["inTransitionConfig"];
+    outTransition?: $$Props["outTransition"];
+    outTransitionConfig?: $$Props["outTransitionConfig"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    side = "right",
+    inTransition = fly,
+    inTransitionConfig = sheetTransitions[side ?? "right"].in,
+    outTransition = fly,
+    outTransitionConfig = sheetTransitions[side ?? "right"].out,
+    children,
+    ...rest
+  }: Props = $props();
 </script>
 
 <SheetPortal>
@@ -27,9 +41,9 @@ export let outTransitionConfig: $$Props["outTransitionConfig"] =
     {outTransition}
     {outTransitionConfig}
     class={cn(sheetVariants({ side }), className)}
-    {...$$restProps}
+    {...rest}
   >
-    <slot />
+    {@render children?.()}
     <SheetPrimitive.Close
       class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
     >
diff --git a/app/src/lib/components/ui/sheet/sheet-description.svelte b/app/src/lib/components/ui/sheet/sheet-description.svelte
index 3181bd8ae2..1ec8689b8f 100644
--- a/app/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-description.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SheetPrimitive.DescriptionProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
-  <slot />
+<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...rest}>
+  {@render children?.()}
 </SheetPrimitive.Description>
diff --git a/app/src/lib/components/ui/sheet/sheet-footer.svelte b/app/src/lib/components/ui/sheet/sheet-footer.svelte
index 3d9ebbad65..744056f3ac 100644
--- a/app/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <div
   class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/sheet/sheet-header.svelte b/app/src/lib/components/ui/sheet/sheet-header.svelte
index 1d0e027668..0bdf6c441c 100644
--- a/app/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-header.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLDivElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
-  <slot />
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/sheet/sheet-overlay.svelte b/app/src/lib/components/ui/sheet/sheet-overlay.svelte
index 6bc4729b14..cddec27f5d 100644
--- a/app/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -5,17 +5,22 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SheetPrimitive.OverlayProps
 
-let className: $$Props["class"] = undefined
-export let transition: $$Props["transition"] = fade
-export let transitionConfig: $$Props["transitionConfig"] = {
+  interface Props {
+    class?: $$Props["class"];
+    transition?: $$Props["transition"];
+    transitionConfig?: $$Props["transitionConfig"];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, transition = fade, transitionConfig = {
   duration: 150
-}
-export { className as class }
+}, ...rest }: Props = $props();
+
 </script>
 
 <SheetPrimitive.Overlay
   {transition}
   {transitionConfig}
   class={cn('fixed inset-0 z-40 bg-muted/60 backdrop-blur-sm ', className)}
-  {...$$restProps}
+  {...rest}
 />
diff --git a/app/src/lib/components/ui/sheet/sheet-portal.svelte b/app/src/lib/components/ui/sheet/sheet-portal.svelte
index 3a24247853..f89cd54446 100644
--- a/app/src/lib/components/ui/sheet/sheet-portal.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SheetPrimitive.PortalProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
-  <slot />
+<SheetPrimitive.Portal class={cn(className)} {...rest}>
+  {@render children?.()}
 </SheetPrimitive.Portal>
diff --git a/app/src/lib/components/ui/sheet/sheet-title.svelte b/app/src/lib/components/ui/sheet/sheet-title.svelte
index f389958ef1..4352b322f5 100644
--- a/app/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-title.svelte
@@ -4,13 +4,19 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SheetPrimitive.TitleProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <SheetPrimitive.Title
   class={cn('text-lg font-semibold text-foreground', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </SheetPrimitive.Title>
diff --git a/app/src/lib/components/ui/sonner/sonner.svelte b/app/src/lib/components/ui/sonner/sonner.svelte
index e0012e52af..f21fca08db 100644
--- a/app/src/lib/components/ui/sonner/sonner.svelte
+++ b/app/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner"
 import { mode } from "mode-watcher"
+	interface Props {
+		[key: string]: any
+	}
+
+	let { ...rest }: Props = $props();
 
 type $$Props = SonnerProps
 </script>
@@ -16,5 +21,5 @@ type $$Props = SonnerProps
 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 		},
 	}}
-	{...$$restProps}
+	{...rest}
 />
diff --git a/app/src/lib/components/ui/switch/switch.svelte b/app/src/lib/components/ui/switch/switch.svelte
index 8dd3823dfe..b0dd689d5f 100644
--- a/app/src/lib/components/ui/switch/switch.svelte
+++ b/app/src/lib/components/ui/switch/switch.svelte
@@ -5,9 +5,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = SwitchPrimitive.Props
 type $$Events = SwitchPrimitive.Events
 
-let className: $$Props["class"] = undefined
-export let checked: $$Props["checked"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    checked?: $$Props["checked"];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, checked = $bindable(undefined), ...rest }: Props = $props();
+
 </script>
 
 <SwitchPrimitive.Root
@@ -16,7 +21,7 @@ export { className as class }
     'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center  border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary',
     className,
   )}
-  {...$$restProps}
+  {...rest}
   on:click
   on:keydown
 >
diff --git a/app/src/lib/components/ui/table/table-body.svelte b/app/src/lib/components/ui/table/table-body.svelte
index 482f1e1e63..d2896e94b1 100644
--- a/app/src/lib/components/ui/table/table-body.svelte
+++ b/app/src/lib/components/ui/table/table-body.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<tbody class={cn('[&_tr:last-child]:border-0', className)} {...$$restProps}>
-  <slot />
+<tbody class={cn('[&_tr:last-child]:border-0', className)} {...rest}>
+  {@render children?.()}
 </tbody>
diff --git a/app/src/lib/components/ui/table/table-caption.svelte b/app/src/lib/components/ui/table/table-caption.svelte
index a811cc25b0..2665d7d4ba 100644
--- a/app/src/lib/components/ui/table/table-caption.svelte
+++ b/app/src/lib/components/ui/table/table-caption.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLTableCaptionElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
-  <slot />
+<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...rest}>
+  {@render children?.()}
 </caption>
diff --git a/app/src/lib/components/ui/table/table-cell.svelte b/app/src/lib/components/ui/table/table-cell.svelte
index 6af9fe242c..6adcbd75e2 100644
--- a/app/src/lib/components/ui/table/table-cell.svelte
+++ b/app/src/lib/components/ui/table/table-cell.svelte
@@ -1,18 +1,27 @@
 <script lang="ts">
+  import { createBubbler } from 'svelte/legacy';
+
+  const bubble = createBubbler();
 import type { HTMLTdAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLTdAttributes
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <td
   class={cn('px-2 py-1 align-middle [&:has([role=checkbox])]:pr-0', className)}
-  {...$$restProps}
-  on:click
-  on:keydown
+  {...rest}
+  onclick={bubble('click')}
+  onkeydown={bubble('keydown')}
 >
-  <slot />
+  {@render children?.()}
 </td>
diff --git a/app/src/lib/components/ui/table/table-footer.svelte b/app/src/lib/components/ui/table/table-footer.svelte
index 0744ee4350..7f1d44aa83 100644
--- a/app/src/lib/components/ui/table/table-footer.svelte
+++ b/app/src/lib/components/ui/table/table-footer.svelte
@@ -4,10 +4,16 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
-  <slot />
+<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...rest}>
+  {@render children?.()}
 </tfoot>
diff --git a/app/src/lib/components/ui/table/table-head.svelte b/app/src/lib/components/ui/table/table-head.svelte
index d73accdfa1..e00317564d 100644
--- a/app/src/lib/components/ui/table/table-head.svelte
+++ b/app/src/lib/components/ui/table/table-head.svelte
@@ -4,8 +4,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLThAttributes
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <th
@@ -13,7 +19,7 @@ export { className as class }
     'h-12 px-2 text-left align-middle font-bold uppercase [&:has([role=checkbox])]:pr-0',
     className,
   )}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </th>
diff --git a/app/src/lib/components/ui/table/table-header.svelte b/app/src/lib/components/ui/table/table-header.svelte
index b344114dc4..13e15e2c19 100644
--- a/app/src/lib/components/ui/table/table-header.svelte
+++ b/app/src/lib/components/ui/table/table-header.svelte
@@ -1,14 +1,23 @@
 <script lang="ts">
+  import { createBubbler } from 'svelte/legacy';
+
+  const bubble = createBubbler();
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<thead class={cn('[&_tr]:border-b', className)} {...$$restProps} on:click on:keydown>
-  <slot />
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<thead class={cn('[&_tr]:border-b', className)} {...rest} onclick={bubble('click')} onkeydown={bubble('keydown')}>
+  {@render children?.()}
 </thead>
diff --git a/app/src/lib/components/ui/table/table-row.svelte b/app/src/lib/components/ui/table/table-row.svelte
index a762110448..2412166036 100644
--- a/app/src/lib/components/ui/table/table-row.svelte
+++ b/app/src/lib/components/ui/table/table-row.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { createBubbler } from 'svelte/legacy';
+
+  const bubble = createBubbler();
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
@@ -6,8 +9,14 @@ type $$Props = HTMLAttributes<HTMLTableRowElement> & {
   "data-state"?: unknown
 }
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <tr
@@ -15,9 +24,9 @@ export { className as class }
     'border-b hover:bg-muted/50 data-[state=selected]:bg-muted',
     className,
   )}
-  {...$$restProps}
-  on:click
-  on:keydown
+  {...rest}
+  onclick={bubble('click')}
+  onkeydown={bubble('keydown')}
 >
-  <slot />
+  {@render children?.()}
 </tr>
diff --git a/app/src/lib/components/ui/table/table.svelte b/app/src/lib/components/ui/table/table.svelte
index 94ed7a6617..3f7fa7d70d 100644
--- a/app/src/lib/components/ui/table/table.svelte
+++ b/app/src/lib/components/ui/table/table.svelte
@@ -4,12 +4,18 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = HTMLTableAttributes
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <div class="relative w-full overflow-auto">
-  <table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
-    <slot />
+  <table class={cn('w-full caption-bottom text-sm', className)} {...rest}>
+    {@render children?.()}
   </table>
 </div>
diff --git a/app/src/lib/components/ui/tabs/tabs-content.svelte b/app/src/lib/components/ui/tabs/tabs-content.svelte
index 3bb4c7f6e3..51dcc5d820 100644
--- a/app/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/app/src/lib/components/ui/tabs/tabs-content.svelte
@@ -4,9 +4,15 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = TabsPrimitive.ContentProps
 
-let className: $$Props["class"] = undefined
-export let value: $$Props["value"]
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    value: $$Props["value"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, value, children, ...rest }: Props = $props();
+
 </script>
 
 <TabsPrimitive.Content
@@ -15,7 +21,7 @@ export { className as class }
     className,
   )}
   {value}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.Content>
diff --git a/app/src/lib/components/ui/tabs/tabs-list.svelte b/app/src/lib/components/ui/tabs/tabs-list.svelte
index 33bf649a1c..419b1c6dd6 100644
--- a/app/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/app/src/lib/components/ui/tabs/tabs-list.svelte
@@ -4,8 +4,14 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = TabsPrimitive.ListProps
 
-let className: $$Props["class"] = undefined
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+
 </script>
 
 <TabsPrimitive.List
@@ -13,7 +19,7 @@ export { className as class }
     'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
     className,
   )}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.List>
diff --git a/app/src/lib/components/ui/tabs/tabs-trigger.svelte b/app/src/lib/components/ui/tabs/tabs-trigger.svelte
index a73f5b3e82..93b7fb8dc9 100644
--- a/app/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/app/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -5,9 +5,15 @@ import { cn } from "$lib/utilities/shadcn.js"
 type $$Props = TabsPrimitive.TriggerProps
 type $$Events = TabsPrimitive.TriggerEvents
 
-let className: $$Props["class"] = undefined
-export let value: $$Props["value"]
-export { className as class }
+  interface Props {
+    class?: $$Props["class"];
+    value: $$Props["value"];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, value, children, ...rest }: Props = $props();
+
 </script>
 
 <TabsPrimitive.Trigger
@@ -16,8 +22,8 @@ export { className as class }
     className,
   )}
   {value}
-  {...$$restProps}
+  {...rest}
   on:click
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.Trigger>
diff --git a/app/src/lib/components/ui/tooltip/tooltip-content.svelte b/app/src/lib/components/ui/tooltip/tooltip-content.svelte
index 1ef8ae35d4..65431549f5 100644
--- a/app/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/app/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -4,14 +4,27 @@ import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
 
 type $$Props = TooltipPrimitive.ContentProps
 
-let className: $$Props["class"] = undefined
-export let sideOffset: $$Props["sideOffset"] = 4
-export let transition: $$Props["transition"] = flyAndScale
-export let transitionConfig: $$Props["transitionConfig"] = {
+	interface Props {
+		class?: $$Props["class"];
+		sideOffset?: $$Props["sideOffset"];
+		transition?: $$Props["transition"];
+		transitionConfig?: $$Props["transitionConfig"];
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = undefined,
+		sideOffset = 4,
+		transition = flyAndScale,
+		transitionConfig = {
   y: 8,
   duration: 150
-}
-export { className as class }
+},
+		children,
+		...rest
+	}: Props = $props();
+
 </script>
 
 <TooltipPrimitive.Content
@@ -22,7 +35,7 @@ export { className as class }
 		"z-40 overflow-hidden border bg-popover bg-black px-3 py-1.5 text-sm text-popover-foreground shadow-md",
 		className
 	)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </TooltipPrimitive.Content>
diff --git a/app/src/lib/components/union-icons/color/icon-blocks-color.svelte b/app/src/lib/components/union-icons/color/icon-blocks-color.svelte
index b2104d9d3f..8daffa3768 100644
--- a/app/src/lib/components/union-icons/color/icon-blocks-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-blocks-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-channel-color.svelte b/app/src/lib/components/union-icons/color/icon-channel-color.svelte
index f7fb130b0c..7bbc9d3be0 100644
--- a/app/src/lib/components/union-icons/color/icon-channel-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-channel-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-connection-color.svelte b/app/src/lib/components/union-icons/color/icon-connection-color.svelte
index d7c5d3056d..42ec6f115b 100644
--- a/app/src/lib/components/union-icons/color/icon-connection-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-connection-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-explorer-color.svelte b/app/src/lib/components/union-icons/color/icon-explorer-color.svelte
index 7880532df1..058b7fa2c1 100644
--- a/app/src/lib/components/union-icons/color/icon-explorer-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-explorer-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-faucet-color.svelte b/app/src/lib/components/union-icons/color/icon-faucet-color.svelte
index e19dff9480..5ae656da72 100644
--- a/app/src/lib/components/union-icons/color/icon-faucet-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-faucet-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-home-color.svelte b/app/src/lib/components/union-icons/color/icon-home-color.svelte
index a3d61869b0..63fd9e0e60 100644
--- a/app/src/lib/components/union-icons/color/icon-home-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-home-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-index-color.svelte b/app/src/lib/components/union-icons/color/icon-index-color.svelte
index 9ff88e8229..6f909f369a 100644
--- a/app/src/lib/components/union-icons/color/icon-index-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-index-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-packet-color.svelte b/app/src/lib/components/union-icons/color/icon-packet-color.svelte
index 0e35a9cfaf..4d5a11c2a8 100644
--- a/app/src/lib/components/union-icons/color/icon-packet-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-packet-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-queue-color.svelte b/app/src/lib/components/union-icons/color/icon-queue-color.svelte
index 158c9350cb..a8beef4a63 100644
--- a/app/src/lib/components/union-icons/color/icon-queue-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-queue-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-search-color.svelte b/app/src/lib/components/union-icons/color/icon-search-color.svelte
index c0ecd6210c..7530c53b92 100644
--- a/app/src/lib/components/union-icons/color/icon-search-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-search-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-settings-color.svelte b/app/src/lib/components/union-icons/color/icon-settings-color.svelte
index f6393f3009..ab9381a0fd 100644
--- a/app/src/lib/components/union-icons/color/icon-settings-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-settings-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-transfers-color.svelte b/app/src/lib/components/union-icons/color/icon-transfers-color.svelte
index e6b3a8ea90..0d99b24cd4 100644
--- a/app/src/lib/components/union-icons/color/icon-transfers-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-transfers-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte b/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte
index bd3fc65d34..43618c417a 100644
--- a/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-wallet-color.svelte b/app/src/lib/components/union-icons/color/icon-wallet-color.svelte
index 99eb72b0a3..2cb9a14a44 100644
--- a/app/src/lib/components/union-icons/color/icon-wallet-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-wallet-color.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte
index d2732a4238..608ad29604 100644
--- a/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte
index 0dcee898bf..b27097fd06 100644
--- a/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte
index 7bc9cca73f..a78dfb2c42 100644
--- a/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte
index 1bf559ac24..e28fa27c1c 100644
--- a/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte
index a2eb60866f..81f6cee830 100644
--- a/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte
index e7a78068cd..20165ae178 100644
--- a/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte
index 3a3e01d75e..db630e7d80 100644
--- a/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte
index 03eb9b03a1..5a14fbff12 100644
--- a/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte
index e7f79f3409..3eb0db8030 100644
--- a/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte
index f4fc41fb57..f24f8e6b2d 100644
--- a/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte
index fea99abaec..d35d7d8bd5 100644
--- a/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte
index 142378fc99..33724a10c1 100644
--- a/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte
index be122372cc..86be818bab 100644
--- a/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte
index bf787a0208..5b94ea4198 100644
--- a/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte b/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte
index 58998cabc7..1d60eb95df 100644
--- a/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte b/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte
index 5f02019f7b..29148cd505 100644
--- a/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte b/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte
index 26f4fb622f..a2a3b1f6c7 100644
--- a/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte b/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte
index fee7f24242..c654c52cfd 100644
--- a/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte b/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte
index 224ff9163f..cba5fe28be 100644
--- a/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte b/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte
index 7dd755d3ac..e2d6de6a44 100644
--- a/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-home-mono.svelte b/app/src/lib/components/union-icons/mono/icon-home-mono.svelte
index 96bc5cae9e..fcc56d765b 100644
--- a/app/src/lib/components/union-icons/mono/icon-home-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-home-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte b/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte
index 054148e190..ac534d6ecb 100644
--- a/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte b/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte
index 35312ba205..8a111f980e 100644
--- a/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte b/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte
index 594685f76c..b49167422d 100644
--- a/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-index-mono.svelte b/app/src/lib/components/union-icons/mono/icon-index-mono.svelte
index a89709787d..f0b9fef2f9 100644
--- a/app/src/lib/components/union-icons/mono/icon-index-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-index-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte b/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte
index 635fcc9e72..462d5c0f67 100644
--- a/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte b/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte
index 10acc97bdc..3307266e68 100644
--- a/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-search-mono.svelte b/app/src/lib/components/union-icons/mono/icon-search-mono.svelte
index 6153b008e9..6e8cc1c489 100644
--- a/app/src/lib/components/union-icons/mono/icon-search-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-search-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte b/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte
index e9ce55dc69..7e5ea2e0ac 100644
--- a/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte b/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte
index 9c7028bd56..64c2238bf3 100644
--- a/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte b/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte
index 980cb223c2..9e212fd0d7 100644
--- a/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte b/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte
index a6b2116eb7..c0955749e3 100644
--- a/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte b/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte
index e6d6590adb..aa65eff951 100644
--- a/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-let className: string | undefined = undefined
-export { className as class }
+  interface Props {
+    class?: string | undefined;
+  }
+
+  let { class: className = undefined }: Props = $props();
+
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/wallet-gate-cosmos.svelte b/app/src/lib/components/wallet-gate-cosmos.svelte
index cfd083c936..adba3d4638 100644
--- a/app/src/lib/components/wallet-gate-cosmos.svelte
+++ b/app/src/lib/components/wallet-gate-cosmos.svelte
@@ -3,6 +3,12 @@ import { derived, type Readable } from "svelte/store"
 import type { UserAddressCosmos } from "$lib/types"
 import type { Address } from "viem"
 import { userAddrCosmos } from "$lib/wallet/cosmos"
+  interface Props {
+    connected?: import('svelte').Snippet<[any]>;
+    disconnected?: import('svelte').Snippet;
+  }
+
+  let { connected, disconnected }: Props = $props();
 
 let confirmedUserAddr: Readable<UserAddressCosmos> = derived(userAddrCosmos, $userAddr => {
   return (
@@ -17,11 +23,11 @@ let confirmedUserAddr: Readable<UserAddressCosmos> = derived(userAddrCosmos, $us
 </script>
 
 {#if $userAddrCosmos}
-  <slot name="connected" userAddrCosmos={$confirmedUserAddr} />
+  {@render connected?.({ userAddrCosmos: $confirmedUserAddr, })}
 {:else}
-  <slot name="disconnected">
+  {#if disconnected}{@render disconnected()}{:else}
     <span>Connect your Cosmos wallet to continue</span>
-  </slot>
+  {/if}
 {/if}
 
 
diff --git a/app/src/lib/components/wallet-gate-evm.svelte b/app/src/lib/components/wallet-gate-evm.svelte
index c05437188d..e71fe831c4 100644
--- a/app/src/lib/components/wallet-gate-evm.svelte
+++ b/app/src/lib/components/wallet-gate-evm.svelte
@@ -3,6 +3,12 @@ import { derived, type Readable } from "svelte/store"
 import type { UserAddressEvm } from "$lib/types"
 import type { Address } from "viem"
 import { userAddrEvm } from "$lib/wallet/evm"
+  interface Props {
+    connected?: import('svelte').Snippet<[any]>;
+    disconnected?: import('svelte').Snippet;
+  }
+
+  let { connected, disconnected }: Props = $props();
 
 let confirmedUserAddr: Readable<UserAddressEvm> = derived(userAddrEvm, $userAddr => {
   return (
@@ -16,11 +22,11 @@ let confirmedUserAddr: Readable<UserAddressEvm> = derived(userAddrEvm, $userAddr
 </script>
 
 {#if $userAddrEvm}
-  <slot name="connected" userAddrEvm={$confirmedUserAddr} />
+  {@render connected?.({ userAddrEvm: $confirmedUserAddr, })}
 {:else}
-  <slot name="disconnected">
+  {#if disconnected}{@render disconnected()}{:else}
     <span>Connect your EVM wallet to continue</span>
-  </slot>
+  {/if}
 {/if}
 
 
diff --git a/app/src/lib/swap-form.svelte b/app/src/lib/swap-form.svelte
index e4c5a3d59b..0d9205bfcf 100644
--- a/app/src/lib/swap-form.svelte
+++ b/app/src/lib/swap-form.svelte
@@ -10,7 +10,11 @@ import * as Card from "$lib/components/ui/card/index.ts"
 import { Button } from "$lib/components/ui/button"
 import type { Chain, UserAddresses } from "$lib/types.ts"
 
-export let chains: Array<Chain>
+  interface Props {
+    chains: Array<Chain>;
+  }
+
+  let { chains }: Props = $props();
 
 let fromChainId = writable("")
 let toChainId = writable("")
@@ -25,8 +29,8 @@ let fromChain = derived(
   $fromChainId => chains.find(chain => chain.chain_id === $fromChainId) ?? null
 )
 
-let dialogOpenToChain = false
-let dialogOpenFromChain = false
+let dialogOpenToChain = $state(false)
+let dialogOpenFromChain = $state(false)
 
 let userAddr: Readable<UserAddresses> = derived(
   [userAddrCosmos, userAddrEvm],
@@ -104,61 +108,63 @@ const BERACHAIN_CONTRACTS = {
 </script>
 
 
-<ChainsGate let:chains>
-  <div class="size-full flex flex-col items-center gap-6 m-6">
-    <Card.Root class="max-w-xl flex flex-col w-full">
-    <Card.Header>
-      <Card.Title>From</Card.Title>
-      <Card.Description>
-        Chain to start the swap from
-      </Card.Description>
-    </Card.Header>
-      <Card.Content>
-        <ChainButton bind:dialogOpen={dialogOpenFromChain} bind:selectedChainId={$fromChainId}>{$fromChain?.display_name ?? "Select from chain"}</ChainButton>
-      </Card.Content>
-    </Card.Root>
-    <Card.Root class="max-w-xl flex flex-col w-full">
-    <Card.Header>
-      <Card.Title>To</Card.Title>
-      <Card.Description>
-        Chain to swap where the swap will be performed on
-      </Card.Description>
-    </Card.Header>
-      <Card.Content>
-        <ChainButton bind:dialogOpen={dialogOpenToChain} bind:selectedChainId={$toChainId}>{$toChain?.display_name ?? "Select chain"}</ChainButton>
-      </Card.Content>
-    </Card.Root>
-    <Button
-      on:click={async event => {
-        // swap()
+<ChainsGate >
+  {#snippet children({ chains })}
+    <div class="size-full flex flex-col items-center gap-6 m-6">
+      <Card.Root class="max-w-xl flex flex-col w-full">
+      <Card.Header>
+        <Card.Title>From</Card.Title>
+        <Card.Description>
+          Chain to start the swap from
+        </Card.Description>
+      </Card.Header>
+        <Card.Content>
+          <ChainButton bind:dialogOpen={dialogOpenFromChain} bind:selectedChainId={$fromChainId}>{$fromChain?.display_name ?? "Select from chain"}</ChainButton>
+        </Card.Content>
+      </Card.Root>
+      <Card.Root class="max-w-xl flex flex-col w-full">
+      <Card.Header>
+        <Card.Title>To</Card.Title>
+        <Card.Description>
+          Chain to swap where the swap will be performed on
+        </Card.Description>
+      </Card.Header>
+        <Card.Content>
+          <ChainButton bind:dialogOpen={dialogOpenToChain} bind:selectedChainId={$toChainId}>{$toChain?.display_name ?? "Select chain"}</ChainButton>
+        </Card.Content>
+      </Card.Root>
+      <Button
+        on:click={async event => {
+          // swap()
+        }}
+        type="button"
+      >
+        Swap
+      </Button>
+    </div>
+
+
+    <ChainDialog
+      bind:dialogOpen={dialogOpenFromChain}
+      chains={chains.filter(c => c.enabled_staging)}
+      kind="from"
+      onChainSelect={newSelectedChain => {
+        fromChainId.set(newSelectedChain)
+      }}
+      selectedChain={$fromChainId}
+      userAddress={$userAddr}
+    />
+
+    <ChainDialog
+      bind:dialogOpen={dialogOpenToChain}
+      chains={chains.filter(c => c.enabled_staging)}
+      kind="to"
+      onChainSelect={newSelectedChain => {
+        toChainId.set(newSelectedChain)
       }}
-      type="button"
-    >
-      Swap
-    </Button>
-  </div>
-
-
-  <ChainDialog
-    bind:dialogOpen={dialogOpenFromChain}
-    chains={chains.filter(c => c.enabled_staging)}
-    kind="from"
-    onChainSelect={newSelectedChain => {
-      fromChainId.set(newSelectedChain)
-    }}
-    selectedChain={$fromChainId}
-    userAddress={$userAddr}
-  />
-
-  <ChainDialog
-    bind:dialogOpen={dialogOpenToChain}
-    chains={chains.filter(c => c.enabled_staging)}
-    kind="to"
-    onChainSelect={newSelectedChain => {
-      toChainId.set(newSelectedChain)
-    }}
-    selectedChain={$toChainId}
-    userAddress={$userAddr}
-  />
-  
+      selectedChain={$toChainId}
+      userAddress={$userAddr}
+    />
+    
+  {/snippet}
 </ChainsGate>
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 0b1adc24a9..3e4c622f50 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
 import "$lib/polyfill.ts"
 import "$styles/index.css"
 import { onMount } from "svelte"
@@ -19,6 +21,11 @@ import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import DeprecationNotice from "$lib/components/deprecation-notice.svelte"
 import { checkWebGLSupport, deviceWidth } from "$lib/utilities/device.ts"
 import { disablePinchToZoom } from "$lib/utilities/disable-pinch-to-zoom.ts"
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 
 const { queryClient, QueryClientProvider } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
@@ -28,7 +35,9 @@ onMount(() => {
   disablePinchToZoom()
 })
 
-$: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
+run(() => {
+    updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
+  });
 </script>
 
 <svelte:head>
@@ -64,7 +73,7 @@ $: updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
   <Header />
   <div class="flex flex-1 overflow-y-auto bg-background">
     <!-- <DeprecationNotice /> -->
-    <slot />
+    {@render children?.()}
   </div>
   <Footer />
 
diff --git a/app/src/routes/balances/+page.svelte b/app/src/routes/balances/+page.svelte
index 7ab62a9697..455019f3f8 100644
--- a/app/src/routes/balances/+page.svelte
+++ b/app/src/routes/balances/+page.svelte
@@ -5,12 +5,18 @@ import ChainsGate from "$lib/components/chains-gate.svelte"
 import BalancesOverview from "$lib/components/balances-overview.svelte"
 </script>
 
-<ChainsGate let:chains>
-  <WalletGateCosmos>
-    <WalletGateEvm slot="connected" let:userAddrCosmos>
-      <div class="max-w-full w-full" slot="connected" let:userAddrEvm>
-        <BalancesOverview {chains} userAddr={({evm: userAddrEvm, cosmos: userAddrCosmos})}/>
-      </div>
-    </WalletGateEvm>
-  </WalletGateCosmos>
+<ChainsGate >
+  {#snippet children({ chains })}
+    <WalletGateCosmos>
+      {#snippet connected({ userAddrCosmos })}
+        <WalletGateEvm  >
+          {#snippet connected({ userAddrEvm })}
+            <div class="max-w-full w-full"  >
+              <BalancesOverview {chains} userAddr={({evm: userAddrEvm, cosmos: userAddrCosmos})}/>
+            </div>
+          {/snippet}
+        </WalletGateEvm>
+      {/snippet}
+    </WalletGateCosmos>
+  {/snippet}
 </ChainsGate>
diff --git a/app/src/routes/explorer/(components)/icon-button.svelte b/app/src/routes/explorer/(components)/icon-button.svelte
index 9284eaa18d..470aefe1ef 100644
--- a/app/src/routes/explorer/(components)/icon-button.svelte
+++ b/app/src/routes/explorer/(components)/icon-button.svelte
@@ -2,9 +2,14 @@
 import type { SvelteComponent } from "svelte"
 import Button from "$lib/components/ui/button/button.svelte"
 
-export let icon: { class: string; component: typeof SvelteComponent }
+  interface Props {
+    icon: { class: string; component: typeof SvelteComponent };
+    [key: string]: any
+  }
+
+  let { icon, ...rest }: Props = $props();
 </script>
 
-<Button {...$$restProps}>
-  <svelte:component this={icon.component} class={icon.class} />
+<Button {...rest}>
+  <icon.component class={icon.class} />
 </Button>
diff --git a/app/src/routes/explorer/(components)/menu.svelte b/app/src/routes/explorer/(components)/menu.svelte
index f3a9e613d5..5f1d9527e7 100644
--- a/app/src/routes/explorer/(components)/menu.svelte
+++ b/app/src/routes/explorer/(components)/menu.svelte
@@ -5,7 +5,11 @@ import type { LayoutData } from "../$types.ts"
 import { Button } from "$lib/components/ui/button/index.ts"
 import { derived } from "svelte/store"
 
-export let tableRoutes: LayoutData["tables"]
+  interface Props {
+    tableRoutes: LayoutData["tables"];
+  }
+
+  let { tableRoutes }: Props = $props();
 
 const selectedTable = derived(page, $page => $page.route.id?.split("/").at(2))
 
@@ -29,7 +33,8 @@ let alwaysCollapsedWidth = 580
       )}
     >
       <span>[</span>
-      <svelte:component this={icon} class={"size-3.5"} />
+      {@const SvelteComponent = icon}
+      <SvelteComponent class={"size-3.5"} />
       <div>{route.replaceAll("-", " ")}</div>
       <span>]</span>
     </Button>
diff --git a/app/src/routes/explorer/(components)/pixel-graph.svelte b/app/src/routes/explorer/(components)/pixel-graph.svelte
index e541d8de5d..313eb1a94e 100644
--- a/app/src/routes/explorer/(components)/pixel-graph.svelte
+++ b/app/src/routes/explorer/(components)/pixel-graph.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 import * as Tooltip from "$lib/components/ui/tooltip"
 
-export let data: Array<{ count: number; day: Date }> = []
+  interface Props {
+    data?: Array<{ count: number; day: Date }>;
+  }
 
-$: minValue = 0
-$: maxValue = data.length > 0 ? Math.max(...data.map(d => d.count)) : 0
+  let { data = [] }: Props = $props();
+
+let minValue = $derived(0)
+let maxValue = $derived(data.length > 0 ? Math.max(...data.map(d => d.count)) : 0)
 
 function normalize(
   value: number,
@@ -17,13 +21,13 @@ function normalize(
   return ((value - min) / (max - min)) * (newMax - newMin) + newMin
 }
 
-$: normalizedData =
-  data.length > 0
+let normalizedData =
+  $derived(data.length > 0
     ? data.map(d => ({
         ...d,
         normalizedValue: Math.floor(normalize(d.count, minValue, maxValue, 0, 9))
       }))
-    : []
+    : [])
 </script>
 
 <div class="flex flex-row-reverse items-end gap-[2.5px]">
diff --git a/app/src/routes/explorer/(components)/stats-bar.svelte b/app/src/routes/explorer/(components)/stats-bar.svelte
index e16295559d..9d631fc77e 100644
--- a/app/src/routes/explorer/(components)/stats-bar.svelte
+++ b/app/src/routes/explorer/(components)/stats-bar.svelte
@@ -12,7 +12,7 @@ import { onMount } from "svelte"
 const statsData = statsQuery()
 const transfersPerDayData = transfersPerDayQuery(30)
 
-let show = 0
+let show = $state(0)
 let interval: any
 
 onMount(() => {
diff --git a/app/src/routes/explorer/(components)/table-channels.svelte b/app/src/routes/explorer/(components)/table-channels.svelte
index 9b72c4acfe..cdccbc1dc3 100644
--- a/app/src/routes/explorer/(components)/table-channels.svelte
+++ b/app/src/routes/explorer/(components)/table-channels.svelte
@@ -35,7 +35,7 @@ let channels = createQuery({
     }))
 })
 
-let channelsDataStore = derived(channels, $channels => $channels.data ?? [])
+let channelsDataStore = $state(derived(channels, $channels => $channels.data ?? []))
 
 type DataRow = UnwrapReadable<typeof channelsDataStore>[number]
 
diff --git a/app/src/routes/explorer/(components)/table-connections.svelte b/app/src/routes/explorer/(components)/table-connections.svelte
index a319a647df..15eb666249 100644
--- a/app/src/routes/explorer/(components)/table-connections.svelte
+++ b/app/src/routes/explorer/(components)/table-connections.svelte
@@ -37,7 +37,7 @@ let connections = createQuery({
   }
 })
 
-let connectionsDataStore = derived(connections, $connections => $connections.data ?? [])
+let connectionsDataStore = $state(derived(connections, $connections => $connections.data ?? []))
 
 type DataRow = UnwrapReadable<typeof connectionsDataStore>[number]
 
diff --git a/app/src/routes/explorer/(components)/table.svelte b/app/src/routes/explorer/(components)/table.svelte
index cc3e2ae957..3db5d8f6e0 100644
--- a/app/src/routes/explorer/(components)/table.svelte
+++ b/app/src/routes/explorer/(components)/table.svelte
@@ -1,3 +1,10 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+  overscan: 20,
+  count: $rows.length,
+  estimateSize: () => 34,
+  getScrollElement: () => virtualListElement
+})` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
 import { onDestroy } from "svelte"
 import { derived } from "svelte/store"
diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
index 3439f1e003..806adc020b 100644
--- a/app/src/routes/explorer/+layout.svelte
+++ b/app/src/routes/explorer/+layout.svelte
@@ -8,11 +8,16 @@ import Menu from "./(components)/menu.svelte"
 import StatsBar from "./(components)/stats-bar.svelte"
 import ExplorerBreadcrumbs from "$lib/components/explorer-breadcrumbs.svelte"
 
-export let data: LayoutData
+  interface Props {
+    data: LayoutData;
+    children?: import('svelte').Snippet;
+  }
+
+  let { data, children }: Props = $props();
 
-let explorerRoute = $page.route.id?.split("/").at(2) ?? null
-$: explorerPageDescription =
-  data.tables.filter(t => t.route === explorerRoute).at(0)?.description ?? null
+let explorerRoute = $state($page.route.id?.split("/").at(2) ?? null)
+let explorerPageDescription =
+  $derived(data.tables.filter(t => t.route === explorerRoute).at(0)?.description ?? null)
 
 onNavigate(navigation => {
   if (navigation.to?.route.id?.split("/").at(1) === "explorer") {
@@ -78,7 +83,7 @@ onMount(() => {
             {explorerPageDescription}
           </p>
         </div>
-        <slot />
+        {@render children?.()}
       </div>
     </div>
   </main>
diff --git a/app/src/routes/explorer/+page.svelte b/app/src/routes/explorer/+page.svelte
index c5243861c4..6cbb790679 100644
--- a/app/src/routes/explorer/+page.svelte
+++ b/app/src/routes/explorer/+page.svelte
@@ -3,9 +3,9 @@ import { onMount } from "svelte"
 import { page } from "$app/stores"
 import { goto } from "$app/navigation"
 
-let innerWidth = window.innerWidth
+let innerWidth = $state(window.innerWidth)
 
-$: shouldRedirect = innerWidth >= 640
+let shouldRedirect = $derived(innerWidth >= 640)
 
 onMount(() => {
   if (!shouldRedirect) return
diff --git a/app/src/routes/explorer/address/[slug=address]/+layout.svelte b/app/src/routes/explorer/address/[slug=address]/+layout.svelte
index 4ef3d446d5..ddaa1beba4 100644
--- a/app/src/routes/explorer/address/[slug=address]/+layout.svelte
+++ b/app/src/routes/explorer/address/[slug=address]/+layout.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$derived` rune but there's already a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
 import { page } from "$app/stores"
 import { setContext } from "svelte"
diff --git a/app/src/routes/explorer/address/[slug=address]/+page.svelte b/app/src/routes/explorer/address/[slug=address]/+page.svelte
index 04dfa950fe..c74c410f8b 100644
--- a/app/src/routes/explorer/address/[slug=address]/+page.svelte
+++ b/app/src/routes/explorer/address/[slug=address]/+page.svelte
@@ -14,15 +14,17 @@ let normalizedAddresses = derived(addresses, $addresses =>
 </script>
 
 
-<ChainsGate let:chains>
-  <section class="flex gap-4 flex-col mb-8 items-center">
-    {#each $addresses as address }
-      <AddressMultichain {address} {chains}/>
-    {/each}
-  </section>
-  <TableTransfers
-    {chains}
-    pageSize={24}
-    normalizedAddresses={$normalizedAddresses}
-  />
+<ChainsGate >
+  {#snippet children({ chains })}
+    <section class="flex gap-4 flex-col mb-8 items-center">
+      {#each $addresses as address }
+        <AddressMultichain {address} {chains}/>
+      {/each}
+    </section>
+    <TableTransfers
+      {chains}
+      pageSize={24}
+      normalizedAddresses={$normalizedAddresses}
+    />
+  {/snippet}
 </ChainsGate>
diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte
index 9668a10f15..05ffc80384 100644
--- a/app/src/routes/explorer/blocks/+page.svelte
+++ b/app/src/routes/explorer/blocks/+page.svelte
@@ -29,7 +29,7 @@ let cosmosBlocks = createQuery({
   }
 })
 
-let blocksDataStore = derived(cosmosBlocks, $cosmosBlocks => $cosmosBlocks.data ?? [])
+let blocksDataStore = $state(derived(cosmosBlocks, $cosmosBlocks => $cosmosBlocks.data ?? []))
 
 type DataRow = UnwrapReadable<typeof blocksDataStore>[number]
 
diff --git a/app/src/routes/explorer/index-status/+page.svelte b/app/src/routes/explorer/index-status/+page.svelte
index 61c3e2d5f3..e5c63ae30f 100644
--- a/app/src/routes/explorer/index-status/+page.svelte
+++ b/app/src/routes/explorer/index-status/+page.svelte
@@ -24,7 +24,7 @@ let indexStatus = createQuery({
   }
 })
 
-let indexStatusDataStore = derived(indexStatus, $indexStatus => $indexStatus.data ?? [])
+let indexStatusDataStore = $state(derived(indexStatus, $indexStatus => $indexStatus.data ?? []))
 
 type DataRow = UnwrapReadable<typeof indexStatusDataStore>[number]
 
@@ -54,7 +54,7 @@ const columns: Array<ColumnDef<DataRow>> = [
 </script>
 
 
-{#if $indexStatus.data }
+{#if $indexStatus.data}
   <Table bind:dataStore={indexStatusDataStore} {columns} />
 {:else if $indexStatus.isLoading}
   <LoadingLogo class="size-16" />
diff --git a/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte b/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte
index 75a8a2d5d5..85a1a92247 100644
--- a/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte
+++ b/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
 <script lang="ts">
 import { page } from "$app/stores"
 import ChainsGate from "$lib/components/chains-gate.svelte"
diff --git a/app/src/routes/explorer/transfers/+layout.svelte b/app/src/routes/explorer/transfers/+layout.svelte
index d5840be34b..4919de5ad0 100644
--- a/app/src/routes/explorer/transfers/+layout.svelte
+++ b/app/src/routes/explorer/transfers/+layout.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
 import "temporal-polyfill/global"
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
-<slot />
+{@render children?.()}
diff --git a/app/src/routes/explorer/transfers/+page.svelte b/app/src/routes/explorer/transfers/+page.svelte
index a5cfedc654..26be89a487 100644
--- a/app/src/routes/explorer/transfers/+page.svelte
+++ b/app/src/routes/explorer/transfers/+page.svelte
@@ -3,9 +3,11 @@ import ChainsGate from "$lib/components/chains-gate.svelte"
 import TableTransfers from "$lib/components/transfers-table/transfers-table.svelte"
 </script>
 
-<ChainsGate let:chains>
-  <TableTransfers
-    {chains}
-    pageSize={24}
-  />
+<ChainsGate >
+  {#snippet children({ chains })}
+    <TableTransfers
+      {chains}
+      pageSize={24}
+    />
+  {/snippet}
 </ChainsGate>
diff --git a/app/src/routes/explorer/transfers/[source]/+page.svelte b/app/src/routes/explorer/transfers/[source]/+page.svelte
index a3913b5f19..0cefb35e84 100644
--- a/app/src/routes/explorer/transfers/[source]/+page.svelte
+++ b/app/src/routes/explorer/transfers/[source]/+page.svelte
@@ -3,7 +3,9 @@ import ChainsGate from "$lib/components/chains-gate.svelte"
 import TransferDetails from "$lib/components/transfer-details.svelte"
 </script>
 
-<ChainsGate let:chains>
-  <TransferDetails {chains}/>
+<ChainsGate >
+  {#snippet children({ chains })}
+    <TransferDetails {chains}/>
+  {/snippet}
 </ChainsGate>
 
diff --git a/app/src/routes/faucet/(components)/cosmos-balance.svelte b/app/src/routes/faucet/(components)/cosmos-balance.svelte
index 18a35fb26c..0f64656500 100644
--- a/app/src/routes/faucet/(components)/cosmos-balance.svelte
+++ b/app/src/routes/faucet/(components)/cosmos-balance.svelte
@@ -3,10 +3,19 @@ import type { Chain, UserAddresses } from "$lib/types.ts"
 import { userBalancesQuery } from "$lib/queries/balance"
 import { truncate } from "$lib/utilities/format.ts"
 
-export let userAddr: UserAddresses
-export let chains: Array<Chain>
-export let chainId: string
-export let symbol: boolean
+  interface Props {
+    userAddr: UserAddresses;
+    chains: Array<Chain>;
+    chainId: string;
+    symbol: boolean;
+  }
+
+  let {
+    userAddr,
+    chains,
+    chainId,
+    symbol
+  }: Props = $props();
 
 let cosmosBalances = userBalancesQuery({
   chains: chains.filter(c => c.chain_id === chainId),
diff --git a/app/src/routes/faucet/(components)/dydx-faucet.svelte b/app/src/routes/faucet/(components)/dydx-faucet.svelte
index 998d212c6e..1f6cad66c0 100644
--- a/app/src/routes/faucet/(components)/dydx-faucet.svelte
+++ b/app/src/routes/faucet/(components)/dydx-faucet.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { preventDefault, once } from 'svelte/legacy';
+
 import { URLS } from "$lib/constants"
 import request from "graphql-request"
 import { cn } from "$lib/utilities/shadcn.ts"
@@ -176,7 +178,7 @@ let dydxBalance = createQuery(
         method="POST"
         name="faucet-form"
         class="flex flex-col w-full gap-4"
-        on:submit|preventDefault|once={requestDydxFromFaucet}
+        onsubmit={once(preventDefault(requestDydxFromFaucet))}
       >
         <div>
           <Label for="address">Address</Label>
diff --git a/app/src/routes/faucet/(components)/external-faucets.svelte b/app/src/routes/faucet/(components)/external-faucets.svelte
index 8e5376f8d4..96b88f0dd7 100644
--- a/app/src/routes/faucet/(components)/external-faucets.svelte
+++ b/app/src/routes/faucet/(components)/external-faucets.svelte
@@ -3,7 +3,11 @@ import type { Chain } from "$lib/types"
 import * as Card from "$lib/components/ui/card/index.ts"
 import ExternalLinkIcon from "virtual:icons/lucide/external-link"
 
-export let chains: Array<Chain>
+  interface Props {
+    chains: Array<Chain>;
+  }
+
+  let { chains }: Props = $props();
 
 let chainsWithFaucets = chains.filter(
   chain => chain.assets.filter(asset => asset.faucets.length > 0).length > 0
diff --git a/app/src/routes/faucet/(components)/stride-faucet.svelte b/app/src/routes/faucet/(components)/stride-faucet.svelte
index e0ebbb5b74..5f9f5f7c69 100644
--- a/app/src/routes/faucet/(components)/stride-faucet.svelte
+++ b/app/src/routes/faucet/(components)/stride-faucet.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { preventDefault, once } from 'svelte/legacy';
+
 import { URLS } from "$lib/constants"
 import request from "graphql-request"
 import { cn } from "$lib/utilities/shadcn.ts"
@@ -176,7 +178,7 @@ let strideBalance = createQuery(
         method="POST"
         name="faucet-form"
         class="flex flex-col w-full gap-4"
-        on:submit|preventDefault|once={requestStrdFromFaucet}
+        onsubmit={once(preventDefault(requestStrdFromFaucet))}
       >
         <div>
           <Label for="address">Address</Label>
diff --git a/app/src/routes/faucet/(components)/token-balance.svelte b/app/src/routes/faucet/(components)/token-balance.svelte
index bf230c9951..2be58c3ae2 100644
--- a/app/src/routes/faucet/(components)/token-balance.svelte
+++ b/app/src/routes/faucet/(components)/token-balance.svelte
@@ -3,18 +3,22 @@ import { userBalancesQuery } from "$lib/queries/balance"
 import type { Chain, UserAddressCosmos } from "$lib/types.ts"
 import Precise from "$lib/components/precise.svelte"
 
-export let chains: Array<Chain>
-export let userAddrCosmos: UserAddressCosmos
-export let symbol: string
+  interface Props {
+    chains: Array<Chain>;
+    userAddrCosmos: UserAddressCosmos;
+    symbol: string;
+  }
+
+  let { chains, userAddrCosmos, symbol }: Props = $props();
 
 let chain = chains.filter(c => c.chain_id === "union-testnet-8")
-$: userBalances = userBalancesQuery({
+let userBalances = $derived(userBalancesQuery({
   userAddr: { cosmos: userAddrCosmos, evm: null },
   chains: chain,
   connected: true
-})
-$: unionBalances = $userBalances.at(0)?.data ?? []
-$: asset = unionBalances.find(balance => balance.symbol.toLowerCase() === symbol.toLowerCase())
+}))
+let unionBalances = $derived($userBalances.at(0)?.data ?? [])
+let asset = $derived(unionBalances.find(balance => balance.symbol.toLowerCase() === symbol.toLowerCase()))
 </script>
 
 {#if asset}
diff --git a/app/src/routes/faucet/+page.svelte b/app/src/routes/faucet/+page.svelte
index 2770a9bb15..8920f187c1 100644
--- a/app/src/routes/faucet/+page.svelte
+++ b/app/src/routes/faucet/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { preventDefault, once } from 'svelte/legacy';
+
 import request from "graphql-request"
 import { onDestroy, onMount } from "svelte"
 import { cn } from "$lib/utilities/shadcn.ts"
@@ -33,7 +35,7 @@ type FaucetState = DiscriminatedUnion<
   }
 >
 
-let address = ""
+let address = $state("")
 
 onMount(() => {
   address = $cosmosStore.address ?? ""
@@ -168,7 +170,7 @@ const requestUnoFromFaucet = async () => {
           method="POST"
           class="flex flex-col w-full gap-4"
           name="faucet-form"
-          on:submit|preventDefault|once={requestUnoFromFaucet}
+          onsubmit={once(preventDefault(requestUnoFromFaucet))}
         >
           <div>
             <Label for="address">Address</Label>
@@ -197,27 +199,33 @@ const requestUnoFromFaucet = async () => {
                 </div>
                 <div class="flex justify-between px-1">
                   <div class="text-xs">
-                    <ChainsGate let:chains>
-                      <WalletGateCosmos>
-                        <p slot="connected" let:userAddrCosmos>
-                          <span class="text-muted-foreground">Balance: </span>
-                            <TokenBalance
-                              {chains}
-                              {userAddrCosmos}
-                              symbol="muno"
-                            />
-                        </p>
+                    <ChainsGate >
+                      {#snippet children({ chains })}
+                                                <WalletGateCosmos>
+                          {#snippet connected({ userAddrCosmos })}
+                                                    <p  >
+                              <span class="text-muted-foreground">Balance: </span>
+                                <TokenBalance
+                                  {chains}
+                                  {userAddrCosmos}
+                                  symbol="muno"
+                                />
+                            </p>
+                                                  {/snippet}
 
-                        <p slot="disconnected">
-                            Connect cosmos wallet
-                        </p>
-                      </WalletGateCosmos>
-                    </ChainsGate>
+                          {#snippet disconnected()}
+                                                    <p >
+                                Connect cosmos wallet
+                            </p>
+                                                  {/snippet}
+                        </WalletGateCosmos>
+                                                                    {/snippet}
+                                            </ChainsGate>
                   </div>
                   {#if address !== $cosmosStore.address}
                     <button
                       type="button"
-                      on:click={resetInput}
+                      onclick={resetInput}
                       class="text-xs text-muted-foreground hover:text-primary transition"
                     >
                       Reset
@@ -273,7 +281,9 @@ const requestUnoFromFaucet = async () => {
   <!-- dydx faucet -->
   <DydxFaucet />
   <StrideFaucet />
-  <ChainsGate let:chains>
-    <ExternalFaucets {chains} />
-  </ChainsGate>
+  <ChainsGate >
+    {#snippet children({ chains })}
+        <ExternalFaucets {chains} />
+          {/snippet}
+    </ChainsGate>
 </main>
diff --git a/app/src/routes/swap/+page.svelte b/app/src/routes/swap/+page.svelte
index bb03a42c35..3e83b2d91a 100644
--- a/app/src/routes/swap/+page.svelte
+++ b/app/src/routes/swap/+page.svelte
@@ -3,6 +3,8 @@ import ChainsGate from "$lib/components/chains-gate.svelte"
 import SwapForm from "$lib/swap-form.svelte"
 </script>
 
-<ChainsGate let:chains>
-  <SwapForm {chains}/>
+<ChainsGate >
+  {#snippet children({ chains })}
+    <SwapForm {chains}/>
+  {/snippet}
 </ChainsGate>
diff --git a/app/src/routes/transfer/(components)/assets-dialog.svelte b/app/src/routes/transfer/(components)/assets-dialog.svelte
index 744448f796..70bf73756e 100644
--- a/app/src/routes/transfer/(components)/assets-dialog.svelte
+++ b/app/src/routes/transfer/(components)/assets-dialog.svelte
@@ -11,7 +11,11 @@ import { showUnsupported } from "$lib/stores/user.ts"
 import { ScrollArea } from "$lib/components/ui/scroll-area"
 import { type Address, parseUnits, toHex } from "viem"
 
-/**
+
+
+
+  interface Props {
+    /**
  * TODO: format the balance to a readable format - in order to do that properly, need:
  *  - the balance,
  *  - the decimals,
@@ -19,17 +23,23 @@ import { type Address, parseUnits, toHex } from "viem"
  *    - if evm then `Number(formatUnits(balance, decimals)).toFixed(2)`, - the 2 can be a 4 if you want more precision
  *    - if cosmos then: TBD
  */
-
-export let dialogOpen = false
-export let chain: Chain
-export let assets: Array<{
+    dialogOpen?: boolean;
+    chain: Chain;
+    assets: Array<{
   address: string
   balance: bigint
   decimals?: number
   symbol: string
-}>
+}>;
+    onAssetSelect: (data: { address: string; symbol: string }) => void;
+  }
 
-export let onAssetSelect: (data: { address: string; symbol: string }) => void
+  let {
+    dialogOpen = $bindable(false),
+    chain,
+    assets,
+    onAssetSelect
+  }: Props = $props();
 </script>
 
 <Dialog.Root
diff --git a/app/src/routes/transfer/(components)/card-section-heading.svelte b/app/src/routes/transfer/(components)/card-section-heading.svelte
index 43c711bc3b..6ed52a43ef 100644
--- a/app/src/routes/transfer/(components)/card-section-heading.svelte
+++ b/app/src/routes/transfer/(components)/card-section-heading.svelte
@@ -1 +1,9 @@
-<h2 class="font-bold font-supermolot text-xl mt-2 mb-1"><slot/></h2>
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<h2 class="font-bold font-supermolot text-xl mt-2 mb-1">{@render children?.()}</h2>
diff --git a/app/src/routes/transfer/(components)/chain-button.svelte b/app/src/routes/transfer/(components)/chain-button.svelte
index 9948506884..1054581eaa 100644
--- a/app/src/routes/transfer/(components)/chain-button.svelte
+++ b/app/src/routes/transfer/(components)/chain-button.svelte
@@ -2,11 +2,17 @@
 import Chevron from "./chevron.svelte"
 import { Button } from "$lib/components/ui/button/index.ts"
 
-export let dialogOpen: boolean
+  interface Props {
+    dialogOpen: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { dialogOpen = $bindable(), children, ...rest }: Props = $props();
 </script>
 
 <Button
-  {...$$restProps}
+  {...rest}
   variant="outline"
   data-transfer-from-chain=""
   on:click={() => (dialogOpen = !dialogOpen)}
@@ -15,7 +21,7 @@ export let dialogOpen: boolean
   <div class="flex items-center space-x-1.5 flex-1">
     <div class="flex flex-col items-start">
       <div class="font-bold text-md mr-auto w-full text-left">
-        <slot/>
+        {@render children?.()}
       </div>
     </div>
   </div>
diff --git a/app/src/routes/transfer/(components)/chain-dialog.svelte b/app/src/routes/transfer/(components)/chain-dialog.svelte
index b9d6f76f61..874381a927 100644
--- a/app/src/routes/transfer/(components)/chain-dialog.svelte
+++ b/app/src/routes/transfer/(components)/chain-dialog.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
 import { toast } from "svelte-sonner"
 import { cn } from "$lib/utilities/shadcn.ts"
 import { Badge } from "$lib/components/ui/badge"
@@ -6,14 +8,27 @@ import * as Dialog from "$lib/components/ui/dialog"
 import type { Chain, UserAddresses } from "$lib/types.ts"
 import { Button } from "$lib/components/ui/button/index.js"
 
-export let kind: "from" | "to"
-export let dialogOpen = false
-export let onChainSelect: (newSelectedChain: string) => void
-export let chains: Array<Chain>
-export let selectedChain: string
-export let userAddress: UserAddresses | null
+  interface Props {
+    kind: "from" | "to";
+    dialogOpen?: boolean;
+    onChainSelect: (newSelectedChain: string) => void;
+    chains: Array<Chain>;
+    selectedChain: string;
+    userAddress: UserAddresses | null;
+  }
+
+  let {
+    kind,
+    dialogOpen = $bindable(false),
+    onChainSelect,
+    chains,
+    selectedChain,
+    userAddress
+  }: Props = $props();
 
-$: document.body.style.overflow = dialogOpen ? "hidden" : "auto"
+run(() => {
+    document.body.style.overflow = dialogOpen ? "hidden" : "auto"
+  });
 
 function selectChain(chain: Chain) {
   if (chain.rpc_type === "aptos" && !userAddress?.aptos) return toast.info(`Connect Aptos wallet`)
@@ -60,8 +75,7 @@ function selectChain(chain: Chain) {
               </span>
               {#if (chain.rpc_type === 'evm' && !userAddress?.evm) 
                 || (chain.rpc_type === 'cosmos' && !userAddress?.cosmos)
-                || (chain.rpc_type === 'aptos' && !userAddress?.aptos)
-              }
+                || (chain.rpc_type === 'aptos' && !userAddress?.aptos)}
                 <Badge variant={selected ? 'secondary' : 'default'}>Disconnected</Badge>
               {:else}
                 <Badge variant={selected ? 'secondary' : 'default'}>Connected</Badge>
diff --git a/app/src/routes/transfer/(components)/recipient-field.svelte b/app/src/routes/transfer/(components)/recipient-field.svelte
index 1c42384671..fd0b72b1cf 100644
--- a/app/src/routes/transfer/(components)/recipient-field.svelte
+++ b/app/src/routes/transfer/(components)/recipient-field.svelte
@@ -6,9 +6,13 @@ import LockOpenIcon from "virtual:icons/lucide/lock-open"
 import { Input } from "$lib/components/ui/input/index.ts"
 import Button from "$lib/components/ui/button/button.svelte"
 
-export let recipient: Writable<string>
+  interface Props {
+    recipient: Writable<string>;
+  }
+
+  let { recipient = $bindable() }: Props = $props();
 
-let recipientInputState: "locked" | "unlocked" | "invalid" = "unlocked"
+let recipientInputState: "locked" | "unlocked" | "invalid" = $state("unlocked")
 
 const onUnlockClick = (_event: MouseEvent) => {
   if (recipientInputState === "locked") {
diff --git a/app/src/routes/transfer/(components)/settings-dialog.svelte b/app/src/routes/transfer/(components)/settings-dialog.svelte
index 76a8d9be26..36297f27fe 100644
--- a/app/src/routes/transfer/(components)/settings-dialog.svelte
+++ b/app/src/routes/transfer/(components)/settings-dialog.svelte
@@ -2,8 +2,12 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import * as Dialog from "$lib/components/ui/dialog"
 
-export let dialogOpen = false
-export let title: string
+  interface Props {
+    dialogOpen?: boolean;
+    title: string;
+  }
+
+  let { dialogOpen = $bindable(false), title }: Props = $props();
 </script>
 
 <Dialog.Root
diff --git a/app/src/routes/transfer/(components)/transfer-form.svelte b/app/src/routes/transfer/(components)/transfer-form.svelte
index bf4bce02f2..2dd194077f 100644
--- a/app/src/routes/transfer/(components)/transfer-form.svelte
+++ b/app/src/routes/transfer/(components)/transfer-form.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: userBalances = userBalancesQuery({ chains, userAddr: $userAddress, connected: true })` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
 import {
   http,
diff --git a/app/src/routes/transfer/+page.svelte b/app/src/routes/transfer/+page.svelte
index 18a0f536f3..e49bc8ad9c 100644
--- a/app/src/routes/transfer/+page.svelte
+++ b/app/src/routes/transfer/+page.svelte
@@ -7,8 +7,10 @@ import TransferForm from "./(components)/transfer-form.svelte"
   <title>Union | Send</title>
 </svelte:head>
 
-<ChainsGate let:chains>
-  <div class="w-full flex flex-col items-center">
-    <TransferForm {chains}/>
-  </div>
+<ChainsGate >
+  {#snippet children({ chains })}
+    <div class="w-full flex flex-col items-center">
+      <TransferForm {chains}/>
+    </div>
+  {/snippet}
 </ChainsGate>

From 13fb62af7402466c214b45b09a1ea088a2655f1d Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Tue, 12 Nov 2024 18:17:05 -0800
Subject: [PATCH 2/4] chore: migrate shadcn-svelte

---
 app/components.json                           |   9 +-
 app/package-lock.json                         | 170 ++++++++++++------
 app/package.json                              |  14 +-
 .../lib/components/address-multichain.svelte  |  10 +-
 app/src/lib/components/asset-card.svelte      |  13 +-
 .../lib/components/balances-overview.svelte   |  22 +--
 .../components/card-animated-border.svelte    |  28 +--
 app/src/lib/components/chains-gate.svelte     |   8 +-
 app/src/lib/components/connect/connect.svelte |  10 +-
 .../lib/components/connect/connection.svelte  |  56 +++---
 .../connect/metamask-mobile-alert.svelte      |   8 +-
 app/src/lib/components/details-heading.svelte |   8 +-
 app/src/lib/components/dev-tools.svelte       |   8 +-
 .../lib/components/draft-page-notice.svelte   |   8 +-
 .../lib/components/explorer-precise.svelte    |  19 +-
 .../explorer-table-paginated.svelte           |  12 +-
 app/src/lib/components/kbd.svelte             |  12 +-
 app/src/lib/components/loading-bar.svelte     |   6 +-
 app/src/lib/components/loading-dots.svelte    |   9 +-
 app/src/lib/components/loading-logo.svelte    |   9 +-
 app/src/lib/components/not-connected.svelte   |   6 +-
 app/src/lib/components/packet-details.svelte  |  13 +-
 app/src/lib/components/packet-path.svelte     |  26 +--
 app/src/lib/components/precise.svelte         |  31 ++--
 .../lib/components/search/search-bar.svelte   |  24 +--
 app/src/lib/components/spinner-svg.svelte     |   9 +-
 .../components/spinning-logo/square.svelte    |  21 +--
 .../spinning-outline-logo-three.svelte        |   6 +-
 app/src/lib/components/stats-bar-stat.svelte  |  19 +-
 app/src/lib/components/stepper.svelte         |  10 +-
 .../components/table-cells/cell-assets.svelte |  10 +-
 .../table-cells/cell-chain-index.svelte       |  14 +-
 .../components/table-cells/cell-copy.svelte   |  14 +-
 .../table-cells/cell-duration-text.svelte     |   8 +-
 .../table-cells/cell-icon-tooltip.svelte      |  18 +-
 .../table-cells/cell-origin-channel.svelte    |  20 +--
 .../table-cells/cell-origin-connection.svelte |  18 +-
 .../table-cells/cell-origin-transfer.svelte   |  16 +-
 .../components/table-cells/cell-origin.svelte |  18 +-
 .../table-cells/cell-plain-text.svelte        |  10 +-
 .../table-cells/cell-sequence.svelte          |  14 +-
 .../components/table-cells/cell-status.svelte |  10 +-
 .../table-cells/cell-timestamp.svelte         |   8 +-
 app/src/lib/components/tables/packets.svelte  |  17 +-
 app/src/lib/components/time-elapsed.svelte    |  11 +-
 .../lib/components/transfer-details.svelte    |   8 +-
 .../transfers-table/transfers-table.svelte    |  12 +-
 app/src/lib/components/truncate.svelte        |  12 +-
 .../alert-dialog/alert-dialog-action.svelte   |  30 +---
 .../alert-dialog/alert-dialog-cancel.svelte   |  30 +---
 .../alert-dialog/alert-dialog-content.svelte  |  47 ++---
 .../alert-dialog-description.svelte           |  24 +--
 .../alert-dialog/alert-dialog-footer.svelte   |  20 +--
 .../alert-dialog/alert-dialog-header.svelte   |  23 +--
 .../alert-dialog/alert-dialog-overlay.svelte  |  29 ++-
 .../alert-dialog/alert-dialog-portal.svelte   |  10 +-
 .../ui/alert-dialog/alert-dialog-title.svelte |  26 ++-
 .../lib/components/ui/alert-dialog/index.ts   |   3 +-
 .../ui/avatar/avatar-fallback.svelte          |  22 +--
 .../components/ui/avatar/avatar-image.svelte  |  17 +-
 .../lib/components/ui/avatar/avatar.svelte    |  22 +--
 app/src/lib/components/ui/badge/badge.svelte  |  60 ++++---
 app/src/lib/components/ui/badge/index.ts      |  22 +--
 .../lib/components/ui/button/button.svelte    | 107 ++++++-----
 app/src/lib/components/ui/button/index.ts     |  57 ++----
 .../components/ui/card/card-content.svelte    |  21 +--
 .../ui/card/card-description.svelte           |  21 +--
 .../lib/components/ui/card/card-footer.svelte |  21 +--
 .../lib/components/ui/card/card-header.svelte |  21 +--
 .../lib/components/ui/card/card-title.svelte  |  38 ++--
 app/src/lib/components/ui/card/card.svelte    |  24 ++-
 app/src/lib/components/ui/card/index.ts       |   2 -
 .../components/ui/checkbox/checkbox.svelte    |  61 +++----
 .../ui/collapsible/collapsible-content.svelte |  23 ++-
 .../lib/components/ui/collapsible/index.ts    |   2 +-
 .../ui/command/command-dialog.svelte          |  63 +++----
 .../ui/command/command-empty.svelte           |  20 +--
 .../ui/command/command-group.svelte           |  39 ++--
 .../ui/command/command-input.svelte           |  30 ++--
 .../components/ui/command/command-item.svelte |  32 +---
 .../ui/command/command-link-item.svelte       |  19 ++
 .../components/ui/command/command-list.svelte |  19 +-
 .../ui/command/command-separator.svelte       |  17 +-
 .../ui/command/command-shortcut.svelte        |  20 +--
 .../lib/components/ui/command/command.svelte  |  29 ++-
 app/src/lib/components/ui/command/index.ts    |   5 +-
 .../ui/dialog/dialog-content.svelte           |  88 ++++-----
 .../ui/dialog/dialog-description.svelte       |  24 +--
 .../components/ui/dialog/dialog-footer.svelte |  24 ++-
 .../components/ui/dialog/dialog-header.svelte |  25 +--
 .../ui/dialog/dialog-overlay.svelte           |  37 ++--
 .../components/ui/dialog/dialog-portal.svelte |  10 +-
 .../components/ui/dialog/dialog-title.svelte  |  20 +--
 app/src/lib/components/ui/dialog/index.ts     |   2 +-
 .../ui/drawer/drawer-content.svelte           |  39 ++--
 .../ui/drawer/drawer-description.svelte       |  26 +--
 .../components/ui/drawer/drawer-footer.svelte |  26 ++-
 .../components/ui/drawer/drawer-header.svelte |  27 ++-
 .../components/ui/drawer/drawer-nested.svelte |  26 +--
 .../ui/drawer/drawer-overlay.svelte           |  26 +--
 .../components/ui/drawer/drawer-title.svelte  |  22 +--
 .../lib/components/ui/drawer/drawer.svelte    |  26 +--
 app/src/lib/components/ui/drawer/index.ts     |   6 +-
 .../dropdown-menu-checkbox-item.svelte        |  57 +++---
 .../dropdown-menu-content.svelte              |  41 ++---
 .../dropdown-menu-group-heading.svelte        |  19 ++
 .../dropdown-menu/dropdown-menu-item.svelte   |  38 ++--
 .../dropdown-menu/dropdown-menu-label.svelte  |  30 ++--
 .../dropdown-menu-radio-group.svelte          |  12 +-
 .../dropdown-menu-radio-item.svelte           |  49 ++---
 .../dropdown-menu-separator.svelte            |  19 +-
 .../dropdown-menu-shortcut.svelte             |  23 +--
 .../dropdown-menu-sub-content.svelte          |  43 ++---
 .../dropdown-menu-sub-trigger.svelte          |  36 ++--
 .../lib/components/ui/dropdown-menu/index.ts  |  52 +++---
 app/src/lib/components/ui/input/index.ts      |  22 ---
 app/src/lib/components/ui/input/input.svelte  |  57 ++----
 app/src/lib/components/ui/label/label.svelte  |  28 +--
 .../ui/pagination/pagination-content.svelte   |  19 +-
 .../ui/pagination/pagination-ellipsis.svelte  |  26 ++-
 .../ui/pagination/pagination-item.svelte      |  22 +--
 .../ui/pagination/pagination-link.svelte      |  49 ++---
 .../pagination/pagination-next-button.svelte  |  56 +++---
 .../pagination/pagination-prev-button.svelte  |  56 +++---
 .../ui/pagination/pagination.svelte           |  52 ++----
 .../ui/popover/popover-content.svelte         |  49 +++--
 .../ui/resizable/resizable-handle.svelte      |  26 ++-
 .../ui/resizable/resizable-pane-group.svelte  |  38 ++--
 .../scroll-area/scroll-area-scrollbar.svelte  |  23 ++-
 .../ui/scroll-area/scroll-area.svelte         |  45 ++---
 app/src/lib/components/ui/select/index.ts     |  20 +--
 .../ui/select/select-content.svelte           |  82 ++++-----
 .../ui/select/select-group-heading.svelte     |  16 ++
 .../components/ui/select/select-item.svelte   |  74 +++-----
 .../components/ui/select/select-label.svelte  |  13 +-
 .../select/select-scroll-down-button.svelte   |  19 ++
 .../ui/select/select-scroll-up-button.svelte  |  19 ++
 .../ui/select/select-separator.svelte         |  19 +-
 .../ui/select/select-trigger.svelte           |  45 ++---
 .../components/ui/separator/separator.svelte  |  33 ++--
 app/src/lib/components/ui/sheet/index.ts      |  72 +-------
 .../components/ui/sheet/sheet-content.svelte  |  97 +++++-----
 .../ui/sheet/sheet-description.svelte         |  23 ++-
 .../components/ui/sheet/sheet-footer.svelte   |  24 ++-
 .../components/ui/sheet/sheet-header.svelte   |  25 +--
 .../components/ui/sheet/sheet-overlay.svelte  |  29 ++-
 .../components/ui/sheet/sheet-portal.svelte   |  13 +-
 .../components/ui/sheet/sheet-title.svelte    |  20 +--
 .../lib/components/ui/sonner/sonner.svelte    |  11 +-
 .../lib/components/ui/switch/switch.svelte    |  44 ++---
 .../lib/components/ui/table/table-body.svelte |  21 +--
 .../components/ui/table/table-caption.svelte  |  21 +--
 .../lib/components/ui/table/table-cell.svelte |  29 ++-
 .../components/ui/table/table-footer.svelte   |  21 +--
 .../lib/components/ui/table/table-head.svelte |  30 ++--
 .../components/ui/table/table-header.svelte   |  25 +--
 .../lib/components/ui/table/table-row.svelte  |  37 ++--
 app/src/lib/components/ui/table/table.svelte  |  23 ++-
 .../components/ui/tabs/tabs-content.svelte    |  28 +--
 .../lib/components/ui/tabs/tabs-list.svelte   |  26 +--
 .../components/ui/tabs/tabs-trigger.svelte    |  30 +---
 app/src/lib/components/ui/tooltip/index.ts    |   5 +-
 .../ui/tooltip/tooltip-content.svelte         |  42 ++---
 .../color/icon-blocks-color.svelte            |   9 +-
 .../color/icon-channel-color.svelte           |   9 +-
 .../color/icon-connection-color.svelte        |   9 +-
 .../color/icon-explorer-color.svelte          |   9 +-
 .../color/icon-faucet-color.svelte            |   9 +-
 .../union-icons/color/icon-home-color.svelte  |   9 +-
 .../union-icons/color/icon-index-color.svelte |   9 +-
 .../color/icon-packet-color.svelte            |   9 +-
 .../union-icons/color/icon-queue-color.svelte |   9 +-
 .../color/icon-search-color.svelte            |   9 +-
 .../color/icon-settings-color.svelte          |   9 +-
 .../color/icon-transfers-color.svelte         |   9 +-
 .../color/icon-usertransfers-color.svelte     |   9 +-
 .../color/icon-wallet-color.svelte            |   9 +-
 .../inverse/icon-blocks-inverse.svelte        |   9 +-
 .../inverse/icon-channel-inverse.svelte       |   9 +-
 .../inverse/icon-connection-inverse.svelte    |   9 +-
 .../inverse/icon-explorer-inverse.svelte      |   9 +-
 .../inverse/icon-faucet-inverse.svelte        |   9 +-
 .../inverse/icon-home-inverse.svelte          |   9 +-
 .../inverse/icon-index-inverse.svelte         |   9 +-
 .../inverse/icon-packet-inverse.svelte        |   9 +-
 .../inverse/icon-queue-inverse.svelte         |   9 +-
 .../inverse/icon-search-inverse.svelte        |   9 +-
 .../inverse/icon-settings-inverse.svelte      |   9 +-
 .../inverse/icon-transfers-inverse.svelte     |   9 +-
 .../inverse/icon-usertransfers-inverse.svelte |   9 +-
 .../inverse/icon-wallet-inverse.svelte        |   9 +-
 .../mono/icon-alltransfers-mono.svelte        |   9 +-
 .../union-icons/mono/icon-blocks-mono.svelte  |   9 +-
 .../union-icons/mono/icon-channel-mono.svelte |   9 +-
 .../mono/icon-connection-mono.svelte          |   9 +-
 .../mono/icon-explorer-mono.svelte            |   9 +-
 .../union-icons/mono/icon-faucet-mono.svelte  |   9 +-
 .../union-icons/mono/icon-home-mono.svelte    |   9 +-
 .../mono/icon-hubblestatus-mono.svelte        |   9 +-
 .../mono/icon-ibcchannels-mono.svelte         |   9 +-
 .../mono/icon-ibcconnections-mono.svelte      |   9 +-
 .../union-icons/mono/icon-index-mono.svelte   |   9 +-
 .../union-icons/mono/icon-packet-mono.svelte  |   9 +-
 .../union-icons/mono/icon-queue-mono.svelte   |   9 +-
 .../union-icons/mono/icon-search-mono.svelte  |   9 +-
 .../union-icons/mono/icon-searchk-mono.svelte |   9 +-
 .../mono/icon-settings-mono.svelte            |   9 +-
 .../mono/icon-transfers-mono.svelte           |   9 +-
 .../mono/icon-usertransfers-mono.svelte       |   9 +-
 .../union-icons/mono/icon-wallet-mono.svelte  |   9 +-
 .../lib/components/wallet-gate-cosmos.svelte  |  10 +-
 app/src/lib/components/wallet-gate-evm.svelte |  10 +-
 app/src/lib/polyfill.ts                       |   2 +-
 app/src/lib/swap-form.svelte                  |   8 +-
 app/src/lib/utilities/shadcn.ts               |  54 +-----
 app/src/routes/+layout.svelte                 |  14 +-
 .../explorer/(components)/icon-button.svelte  |  10 +-
 .../routes/explorer/(components)/menu.svelte  |   8 +-
 .../explorer/(components)/pixel-graph.svelte  |  15 +-
 app/src/routes/explorer/+layout.svelte        |  15 +-
 .../routes/explorer/transfers/+layout.svelte  |   8 +-
 .../faucet/(components)/cosmos-balance.svelte |  19 +-
 .../faucet/(components)/dydx-faucet.svelte    |   2 +-
 .../(components)/external-faucets.svelte      |   8 +-
 .../faucet/(components)/stride-faucet.svelte  |   2 +-
 .../faucet/(components)/token-balance.svelte  |  28 +--
 app/src/routes/faucet/+page.svelte            |   2 +-
 .../(components)/assets-dialog.svelte         |  48 +++--
 .../(components)/card-section-heading.svelte  |   8 +-
 .../transfer/(components)/chain-button.svelte |  12 +-
 .../transfer/(components)/chain-dialog.svelte |  38 ++--
 .../(components)/recipient-field.svelte       |   8 +-
 .../(components)/settings-dialog.svelte       |  10 +-
 app/src/styles/tailwind.css                   |  98 ++++++----
 app/tailwind.config.ts                        |  17 +-
 235 files changed, 2270 insertions(+), 3002 deletions(-)
 create mode 100644 app/src/lib/components/ui/command/command-link-item.svelte
 create mode 100644 app/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 app/src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 app/src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 app/src/lib/components/ui/select/select-scroll-up-button.svelte

diff --git a/app/components.json b/app/components.json
index c96136ccbf..d34b5d53ed 100644
--- a/app/components.json
+++ b/app/components.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://shadcn-svelte.com/schema.json",
+  "$schema": "https://next.shadcn-svelte.com/schema.json",
   "style": "default",
   "tailwind": {
     "config": "tailwind.config.ts",
@@ -8,7 +8,10 @@
   },
   "aliases": {
     "components": "$lib/components",
-    "utils": "$lib/utilities/shadcn"
+    "utils": "$lib/utilities/shadcn",
+    "ui": "$lib/components/ui",
+    "hooks": "$lib/hooks"
   },
-  "typescript": true
+  "typescript": true,
+  "registry": "https://next.shadcn-svelte.com/registry"
 }
diff --git a/app/package-lock.json b/app/package-lock.json
index c427182c8c..9dd81f56e9 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -23,20 +23,14 @@
         "@unionlabs/client": "^0.0.39",
         "@wagmi/connectors": "^5.3.5",
         "@wagmi/core": "^2.14.3",
-        "bits-ui": "^0.21.13",
-        "cmdk-sv": "^0.0.18",
         "gql.tada": "^1.8.7",
         "graphql-request": "7.1.0",
-        "mode-watcher": "^0.4.1",
-        "paneforge": "^0.0.5",
         "svelte-persisted-store": "^0.11.0",
         "svelte-radix": "^1.1.1",
-        "svelte-sonner": "^0.3.27",
         "svelte-ux": "^0.74.7",
         "temporal-polyfill": "^0.2.5",
         "three": "^0.168.0",
         "valibot": "^0.41.0",
-        "vaul-svelte": "^0.3.2",
         "viem": "^2.21.43"
       },
       "devDependencies": {
@@ -63,9 +57,13 @@
         "@types/postcss-import": "^14.0.3",
         "@types/three": "^0.168.0",
         "autoprefixer": "^10.4.20",
+        "bits-ui": "^1.0.0-next.52",
         "clsx": "^2.1.1",
         "fluid-tailwind": "^1.0.3",
         "graphql": "^16.9.0",
+        "lucide-svelte": "^0.456.0",
+        "mode-watcher": "^0.4.1",
+        "paneforge": "^1.0.0-next.1",
         "patch-package": "^8.0.0",
         "postcss": "^8.4.45",
         "postcss-import": "^16.1.0",
@@ -73,7 +71,8 @@
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.1",
         "svelte-preprocess": "^6.0.2",
-        "tailwind-merge": "^2.5.2",
+        "svelte-sonner": "^0.3.28",
+        "tailwind-merge": "^2.5.4",
         "tailwind-scrollbar": "^3.1.0",
         "tailwind-variants": "^0.2.1",
         "tailwindcss": "^3.4.10",
@@ -83,6 +82,7 @@
         "typed-query-selector": "^2.12.0",
         "typescript": "^5.6.2",
         "unplugin-icons": "^0.19.3",
+        "vaul-svelte": "^1.0.0-next.2",
         "vite": "^5.4.6",
         "vite-plugin-inspect": "^0.8.7",
         "vite-plugin-node-polyfills": "^0.22.0",
@@ -1071,6 +1071,7 @@
       "version": "3.5.6",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz",
       "integrity": "sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/helpers": "^0.5.0"
@@ -3011,6 +3012,7 @@
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
       "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.4.0"
@@ -4234,37 +4236,28 @@
       }
     },
     "node_modules/bits-ui": {
-      "version": "0.21.16",
-      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.16.tgz",
-      "integrity": "sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==",
+      "version": "1.0.0-next.52",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.52.tgz",
+      "integrity": "sha512-4ydcpDrYOglrBwVBPKke1xFxCd3g1RcuGdNaw0BybEOTjsQFoKNzoMzLhNxPM97Ew8n7sZoekz2yq3W4SscUIg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@internationalized/date": "^3.5.1",
-        "@melt-ui/svelte": "0.76.2",
-        "nanoid": "^5.0.5"
+        "@floating-ui/core": "^1.6.4",
+        "@floating-ui/dom": "^1.6.7",
+        "@internationalized/date": "^3.5.6",
+        "esm-env": "^1.1.2",
+        "runed": "^0.15.2",
+        "svelte-toolbelt": "^0.4.4"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/huntabyte"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.118"
-      }
-    },
-    "node_modules/bits-ui/node_modules/@melt-ui/svelte": {
-      "version": "0.76.2",
-      "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.2.tgz",
-      "integrity": "sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.3.1",
-        "@floating-ui/dom": "^1.4.5",
-        "@internationalized/date": "^3.5.0",
-        "dequal": "^2.0.3",
-        "focus-trap": "^7.5.2",
-        "nanoid": "^5.0.4"
-      },
-      "peerDependencies": {
-        "svelte": ">=3 <5"
+        "svelte": "^5.0.0-next.1"
       }
     },
     "node_modules/bn.js": {
@@ -4802,18 +4795,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/cmdk-sv": {
-      "version": "0.0.18",
-      "resolved": "https://registry.npmjs.org/cmdk-sv/-/cmdk-sv-0.0.18.tgz",
-      "integrity": "sha512-istixiQSy9Ez/mQ4VXWB69btqNyDZckbd1XFEwR46Vw+n5zjdmvoWAcOTj0uX3FZXtw9ikwLVmfoW2nwwMClRg==",
-      "dependencies": {
-        "bits-ui": "^0.21.12",
-        "nanoid": "^5.0.7"
-      },
-      "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.1"
-      }
-    },
     "node_modules/code-red": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -5344,6 +5325,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5695,9 +5677,9 @@
       }
     },
     "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==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
+      "integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
       "dev": true,
       "license": "MIT"
     },
@@ -6106,6 +6088,7 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz",
       "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tabbable": "^6.2.0"
@@ -6620,6 +6603,13 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/internmap": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -7304,6 +7294,16 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/lucide-svelte": {
+      "version": "0.456.0",
+      "resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.456.0.tgz",
+      "integrity": "sha512-SSdmxJOmL1h42ZypuGr54dYsXAT5o6WkQPKVDFnnrD0liOaXzfNNJuA7JbpkO9FFozBchyVpB1A1mKRmXOD8ug==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^3 || ^4 || ^5.0.0-next.42"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.12",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
@@ -7550,6 +7550,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-0.4.1.tgz",
       "integrity": "sha512-bNC+1NXmwEFZtziCdZSgP7HFQTpqJPcQn9GwwJQGSf6SBF3neEPYV1uRwkYuAQwbsvsXIYtzaqgedDzJ7D1mhg==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "svelte": "^4.0.0 || ^5.0.0-next.1"
@@ -7616,6 +7617,7 @@
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
       "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8048,14 +8050,16 @@
       "license": "(MIT AND Zlib)"
     },
     "node_modules/paneforge": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/paneforge/-/paneforge-0.0.5.tgz",
-      "integrity": "sha512-98QHobaN/KeQhqqglbvjUmNCTRC4h4iqDxpSV8jCGhRLttgGlRXZNzWNr4Firni5rwasAZjOza0k/JdwppB/AQ==",
+      "version": "1.0.0-next.1",
+      "resolved": "https://registry.npmjs.org/paneforge/-/paneforge-1.0.0-next.1.tgz",
+      "integrity": "sha512-K28RZ/KLqnZJeuZ7TZNv5C51NrQ3UPggf2sIhIXjTd4brpRZpmCA9C2SL2o4CC0U2Ox75KxUFwEXq2A/iDBuZg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^5.0.4"
+        "svelte-toolbelt": "^0.4.2"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.1"
+        "svelte": "^5.0.0-next.1"
       }
     },
     "node_modules/parse-asn1": {
@@ -9395,6 +9399,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/runed": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.15.3.tgz",
+      "integrity": "sha512-HtayB+loDcGdqJDHW8JFdsZzGQMyVzim6+s3052MkjZnwmwDstmF+cusMeTssBe6TCdt5i9D/Tb+KYXN3L0kXA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "dependencies": {
+        "esm-env": "^1.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.1"
+      }
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -9852,6 +9872,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -10140,11 +10170,32 @@
       "version": "0.3.28",
       "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
       "integrity": "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
       }
     },
+    "node_modules/svelte-toolbelt": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.4.6.tgz",
+      "integrity": "sha512-k8OUvXBUifHZcAlWeY/HLg/4J0v5m2iOfOhn8fDmjt4AP8ZluaDh9eBFus9lFiLX6O5l6vKqI1dKL5wy7090NQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte"
+      ],
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "style-to-object": "^1.0.8"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.126"
+      }
+    },
     "node_modules/svelte-ux": {
       "version": "0.74.9",
       "resolved": "https://registry.npmjs.org/svelte-ux/-/svelte-ux-0.74.9.tgz",
@@ -10207,6 +10258,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
@@ -11039,15 +11091,21 @@
       }
     },
     "node_modules/vaul-svelte": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/vaul-svelte/-/vaul-svelte-0.3.2.tgz",
-      "integrity": "sha512-X4OGWttSTVUl417qGDsSFgOvIx24DoiMRY/jaP9z0v9FL8LQQJ0RQ1ZM0QpdyQPRlNd24ewjNQHh5EgYDtfNpw==",
+      "version": "1.0.0-next.2",
+      "resolved": "https://registry.npmjs.org/vaul-svelte/-/vaul-svelte-1.0.0-next.2.tgz",
+      "integrity": "sha512-/SjvMvStOMwTnGsQAn+yP0bbQUufb3ZXu8MdnLeQCB33wCZ1ilCPa92DHx1EDhIlVTbiOitwhWp/zaHw/U3OqA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "bits-ui": "^0.21.7"
+        "bits-ui": "^1.0.0-next.41",
+        "svelte-toolbelt": "^0.4.4"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.1"
+        "svelte": "^5.0.0"
       }
     },
     "node_modules/viem": {
diff --git a/app/package.json b/app/package.json
index b56f33f72c..6c2b87dacf 100644
--- a/app/package.json
+++ b/app/package.json
@@ -29,20 +29,14 @@
     "@unionlabs/client": "^0.0.39",
     "@wagmi/connectors": "^5.3.5",
     "@wagmi/core": "^2.14.3",
-    "bits-ui": "^0.21.13",
-    "cmdk-sv": "^0.0.18",
     "gql.tada": "^1.8.7",
     "graphql-request": "7.1.0",
-    "mode-watcher": "^0.4.1",
-    "paneforge": "^0.0.5",
     "svelte-persisted-store": "^0.11.0",
     "svelte-radix": "^1.1.1",
-    "svelte-sonner": "^0.3.27",
     "svelte-ux": "^0.74.7",
     "temporal-polyfill": "^0.2.5",
     "three": "^0.168.0",
     "valibot": "^0.41.0",
-    "vaul-svelte": "^0.3.2",
     "viem": "^2.21.43"
   },
   "devDependencies": {
@@ -69,9 +63,13 @@
     "@types/postcss-import": "^14.0.3",
     "@types/three": "^0.168.0",
     "autoprefixer": "^10.4.20",
+    "bits-ui": "^1.0.0-next.52",
     "clsx": "^2.1.1",
     "fluid-tailwind": "^1.0.3",
     "graphql": "^16.9.0",
+    "lucide-svelte": "^0.456.0",
+    "mode-watcher": "^0.4.1",
+    "paneforge": "^1.0.0-next.1",
     "patch-package": "^8.0.0",
     "postcss": "^8.4.45",
     "postcss-import": "^16.1.0",
@@ -79,7 +77,8 @@
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.1",
     "svelte-preprocess": "^6.0.2",
-    "tailwind-merge": "^2.5.2",
+    "svelte-sonner": "^0.3.28",
+    "tailwind-merge": "^2.5.4",
     "tailwind-scrollbar": "^3.1.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.10",
@@ -89,6 +88,7 @@
     "typed-query-selector": "^2.12.0",
     "typescript": "^5.6.2",
     "unplugin-icons": "^0.19.3",
+    "vaul-svelte": "^1.0.0-next.2",
     "vite": "^5.4.6",
     "vite-plugin-inspect": "^0.8.7",
     "vite-plugin-node-polyfills": "^0.22.0",
diff --git a/app/src/lib/components/address-multichain.svelte b/app/src/lib/components/address-multichain.svelte
index 154fb2b0d9..f72ff859bb 100644
--- a/app/src/lib/components/address-multichain.svelte
+++ b/app/src/lib/components/address-multichain.svelte
@@ -3,12 +3,12 @@ import type { Chain } from "$lib/types"
 import { hexAddressToBech32 } from "@unionlabs/client"
 import { Badge } from "$lib/components/ui/badge/index.ts"
 
-  interface Props {
-    address: { address: string; normalizedAddress: string };
-    chains: Array<Chain>;
-  }
+interface Props {
+  address: { address: string; normalizedAddress: string }
+  chains: Array<Chain>
+}
 
-  let { address, chains }: Props = $props();
+let { address, chains }: Props = $props()
 
 const addressChain = chains.find(c => address.address.startsWith(c.addr_prefix)) as Chain
 
diff --git a/app/src/lib/components/asset-card.svelte b/app/src/lib/components/asset-card.svelte
index 13a03058ab..fd64cd841f 100644
--- a/app/src/lib/components/asset-card.svelte
+++ b/app/src/lib/components/asset-card.svelte
@@ -6,14 +6,13 @@ import Precise from "$lib/components/precise.svelte"
 import { getSupportedAsset } from "$lib/utilities/helpers.ts"
 import { showUnsupported } from "$lib/stores/user.ts"
 
+interface Props {
+  //Create correct type here
+  asset: { symbol: string; balance: string | bigint; denom?: string; address: string }
+  chain: Chain
+}
 
-  interface Props {
-    //Create correct type here
-    asset: { symbol: string; balance: string | bigint; denom?: string; address: string };
-    chain: Chain;
-  }
-
-  let { asset, chain }: Props = $props();
+let { asset, chain }: Props = $props()
 
 //Finds the asset in chains.assets and checks if supported,
 const identifier = asset.denom ? asset.denom : asset.address
diff --git a/app/src/lib/components/balances-overview.svelte b/app/src/lib/components/balances-overview.svelte
index 15103a62e1..224c1bf0d6 100644
--- a/app/src/lib/components/balances-overview.svelte
+++ b/app/src/lib/components/balances-overview.svelte
@@ -6,18 +6,20 @@ import ScrollArea from "./ui/scroll-area/scroll-area.svelte"
 import LoadingLogo from "./loading-logo.svelte"
 import { userAddrOnChain } from "$lib/utilities/address"
 
-  interface Props {
-    userAddr: UserAddresses;
-    chains: Array<Chain>;
-  }
+interface Props {
+  userAddr: UserAddresses
+  chains: Array<Chain>
+}
 
-  let { userAddr, chains }: Props = $props();
+let { userAddr, chains }: Props = $props()
 
-let userBalances = $derived(userBalancesQuery({
-  chains,
-  userAddr,
-  connected: true
-}))
+let userBalances = $derived(
+  userBalancesQuery({
+    chains,
+    userAddr,
+    connected: true
+  })
+)
 </script>
 
 {#each $userBalances as balance, index}
diff --git a/app/src/lib/components/card-animated-border.svelte b/app/src/lib/components/card-animated-border.svelte
index 6f576eb6d8..55398aa62a 100644
--- a/app/src/lib/components/card-animated-border.svelte
+++ b/app/src/lib/components/card-animated-border.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-  interface Props {
-    width?: string;
-    height?: string;
-    animationSpeed?: number;
-    textSize?: string;
-    children?: import('svelte').Snippet;
-  }
+interface Props {
+  width?: string
+  height?: string
+  animationSpeed?: number
+  textSize?: string
+  children?: import("svelte").Snippet
+}
 
-  let {
-    width = "w-48",
-    height = "h-48",
-    animationSpeed = 6,
-    textSize = "text-sm",
-    children
-  }: Props = $props();
+let {
+  width = "w-48",
+  height = "h-48",
+  animationSpeed = 6,
+  textSize = "text-sm",
+  children
+}: Props = $props()
 </script>
 
 <div
diff --git a/app/src/lib/components/chains-gate.svelte b/app/src/lib/components/chains-gate.svelte
index 24d977cbdb..92dda0194e 100644
--- a/app/src/lib/components/chains-gate.svelte
+++ b/app/src/lib/components/chains-gate.svelte
@@ -3,11 +3,11 @@ import type { Chain } from "$lib/types"
 import LoadingLogo from "./loading-logo.svelte"
 import { chainsQuery } from "$lib/queries/chains"
 import { type Readable, derived } from "svelte/store"
-  interface Props {
-    children?: import('svelte').Snippet<[any]>;
-  }
+interface Props {
+  children?: import("svelte").Snippet<[any]>
+}
 
-  let { children }: Props = $props();
+let { children }: Props = $props()
 
 let chains = chainsQuery()
 
diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
index d98d846583..60deb0fd6c 100644
--- a/app/src/lib/components/connect/connect.svelte
+++ b/app/src/lib/components/connect/connect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+import { run } from "svelte/legacy"
 
 import { setMode } from "mode-watcher"
 import { derived } from "svelte/store"
@@ -40,17 +40,17 @@ onMount(() => {
 })
 
 run(() => {
-    if ($connectedWallets >= 1) {
+  if ($connectedWallets >= 1) {
     buttonText = $connectedWallets < 3 ? `Connected ${$connectedWallets}/3` : "Connected"
   } else {
     buttonText = "Connect Wallet"
   }
-  });
+})
 
 let sheetOpen = $state(false)
 run(() => {
-    if ($navigating) sheetOpen = false
-  });
+  if ($navigating) sheetOpen = false
+})
 </script>
 
 <Sheet.Root bind:open={sheetOpen}>
diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte
index 7e2bdc7759..1cc7725712 100644
--- a/app/src/lib/components/connect/connection.svelte
+++ b/app/src/lib/components/connect/connection.svelte
@@ -16,38 +16,39 @@ type T = $$Generic<typeof chain>
 
 type $$Props = Props<T>
 
-  interface Props_1 {
-    chain: "cosmos" | "evm" | "aptos";
-    address: $$Props["address"];
-    hoverState: $$Props["hoverState"];
-    connectStatus: $$Props["connectStatus"];
-    onConnectClick: $$Props["onConnectClick"];
-    onDisconnectClick: $$Props["onDisconnectClick"];
-    connectedWalletId: $$Props["connectedWalletId"];
-    chainWalletsInformation: $$Props["chainWalletsInformation"];
-    [key: string]: any
-  }
+interface Props_1 {
+  chain: "cosmos" | "evm" | "aptos"
+  address: $$Props["address"]
+  hoverState: $$Props["hoverState"]
+  connectStatus: $$Props["connectStatus"]
+  onConnectClick: $$Props["onConnectClick"]
+  onDisconnectClick: $$Props["onDisconnectClick"]
+  connectedWalletId: $$Props["connectedWalletId"]
+  chainWalletsInformation: $$Props["chainWalletsInformation"]
+  [key: string]: any
+}
 
-  let {
-    chain,
-    address,
-    hoverState = $bindable(),
-    connectStatus,
-    onConnectClick,
-    onDisconnectClick,
-    connectedWalletId,
-    chainWalletsInformation,
-    ...rest
-  }: Props_1 = $props();
+let {
+  chain,
+  address,
+  hoverState = $bindable(),
+  connectStatus,
+  onConnectClick,
+  onDisconnectClick,
+  connectedWalletId,
+  chainWalletsInformation,
+  ...rest
+}: Props_1 = $props()
 
-let connectText =
-  $derived(connectStatus === "connected" && address && address?.length > 0
+let connectText = $derived(
+  connectStatus === "connected" && address && address?.length > 0
     ? chain === "evm"
       ? truncateEvmAddress(address, -1)
       : chain === "aptos"
         ? address
         : truncateUnionAddress(address, -1)
-    : "")
+    : ""
+)
 
 let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
@@ -60,8 +61,9 @@ let sanitizeWalletInformation =
       array.findIndex(t => t.name.toLowerCase().startsWith(predicate.name.toLowerCase())) === index
   ) ?? chainWalletsInformation
 
-let walletListToRender =
-  $derived(connectStatus === "connected" ? chainWalletsInformation : sanitizeWalletInformation)
+let walletListToRender = $derived(
+  connectStatus === "connected" ? chainWalletsInformation : sanitizeWalletInformation
+)
 
 let metamaskAlertDialogOpen = $state(false)
 </script>
diff --git a/app/src/lib/components/connect/metamask-mobile-alert.svelte b/app/src/lib/components/connect/metamask-mobile-alert.svelte
index 52e368c78e..5da8a4d570 100644
--- a/app/src/lib/components/connect/metamask-mobile-alert.svelte
+++ b/app/src/lib/components/connect/metamask-mobile-alert.svelte
@@ -2,11 +2,11 @@
 import * as AlertDialog from "$lib/components/ui/alert-dialog/index.ts"
 import SquareArrowOutUpRightIcon from "virtual:icons/lucide/square-arrow-out-up-right"
 
-  interface Props {
-    metamaskAlertDialogOpen: boolean;
-  }
+interface Props {
+  metamaskAlertDialogOpen: boolean
+}
 
-  let { metamaskAlertDialogOpen = $bindable() }: Props = $props();
+let { metamaskAlertDialogOpen = $bindable() }: Props = $props()
 </script>
 
 <AlertDialog.Root bind:open={metamaskAlertDialogOpen} closeOnOutsideClick={true}>
diff --git a/app/src/lib/components/details-heading.svelte b/app/src/lib/components/details-heading.svelte
index 3663620ade..a573f2b37a 100644
--- a/app/src/lib/components/details-heading.svelte
+++ b/app/src/lib/components/details-heading.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  interface Props {
-    children?: import('svelte').Snippet;
-  }
+interface Props {
+  children?: import("svelte").Snippet
+}
 
-  let { children }: Props = $props();
+let { children }: Props = $props()
 </script>
 
 <h2 class="text-lg text-foreground font-bold font-supermolot">
diff --git a/app/src/lib/components/dev-tools.svelte b/app/src/lib/components/dev-tools.svelte
index 1e20198d93..62310efd14 100644
--- a/app/src/lib/components/dev-tools.svelte
+++ b/app/src/lib/components/dev-tools.svelte
@@ -3,11 +3,11 @@ import { toast } from "svelte-sonner"
 import { toggleMode } from "mode-watcher"
 import { shortcut } from "@svelte-put/shortcut"
 import { useQueryClient } from "@tanstack/svelte-query"
-  interface Props {
-    children?: import('svelte').Snippet;
-  }
+interface Props {
+  children?: import("svelte").Snippet
+}
 
-  let { children }: Props = $props();
+let { children }: Props = $props()
 
 const queryClient = useQueryClient()
 </script>
diff --git a/app/src/lib/components/draft-page-notice.svelte b/app/src/lib/components/draft-page-notice.svelte
index 8258febe6b..60451b1c51 100644
--- a/app/src/lib/components/draft-page-notice.svelte
+++ b/app/src/lib/components/draft-page-notice.svelte
@@ -2,11 +2,11 @@
 import { cn } from "$/lib/utilities/shadcn.ts"
 import { Badge } from "$lib/components/ui/badge"
 
-  interface Props {
-    className?: string;
-  }
+interface Props {
+  className?: string
+}
 
-  let { className = "" }: Props = $props();
+let { className = "" }: Props = $props()
 </script>
 
 <Badge
diff --git a/app/src/lib/components/explorer-precise.svelte b/app/src/lib/components/explorer-precise.svelte
index 471c32b8c0..bc645ad848 100644
--- a/app/src/lib/components/explorer-precise.svelte
+++ b/app/src/lib/components/explorer-precise.svelte
@@ -1,19 +1,14 @@
 <script lang="ts">
 import * as Tooltip from "$lib/components/ui/tooltip"
 
-  interface Props {
-    amount: number;
-    decimals: number;
-    displayDecimals?: number;
-    showToolTip?: boolean;
-  }
+interface Props {
+  amount: number
+  decimals: number
+  displayDecimals?: number
+  showToolTip?: boolean
+}
 
-  let {
-    amount,
-    decimals,
-    displayDecimals = 2,
-    showToolTip = false
-  }: Props = $props();
+let { amount, decimals, displayDecimals = 2, showToolTip = false }: Props = $props()
 
 const formatBalance = (
   balance: bigint | string | number,
diff --git a/app/src/lib/components/explorer-table-paginated.svelte b/app/src/lib/components/explorer-table-paginated.svelte
index ecd7c004aa..11fb869b0b 100644
--- a/app/src/lib/components/explorer-table-paginated.svelte
+++ b/app/src/lib/components/explorer-table-paginated.svelte
@@ -8,13 +8,13 @@ import Table from "../../routes/explorer/(components)/table.svelte"
 
 type DataRow = $$Generic
 
-  interface Props {
-    queryResult: CreateQueryResult;
-    columns: Array<ColumnDef<DataRow & { timestamp: string }>>;
-    dataStore: Readable<Array<DataRow & { timestamp: string }>>;
-  }
+interface Props {
+  queryResult: CreateQueryResult
+  columns: Array<ColumnDef<DataRow & { timestamp: string }>>
+  dataStore: Readable<Array<DataRow & { timestamp: string }>>
+}
 
-  let { queryResult, columns, dataStore }: Props = $props();
+let { queryResult, columns, dataStore }: Props = $props()
 </script>
 
 
diff --git a/app/src/lib/components/kbd.svelte b/app/src/lib/components/kbd.svelte
index 3372ec86eb..05017d117f 100644
--- a/app/src/lib/components/kbd.svelte
+++ b/app/src/lib/components/kbd.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-  interface Props {
-    class: string;
-    children?: import('svelte').Snippet;
-  }
-
-  let { class: className, children }: Props = $props();
-
+interface Props {
+  class: string
+  children?: import("svelte").Snippet
+}
 
+let { class: className, children }: Props = $props()
 </script>
 
 <kbd
diff --git a/app/src/lib/components/loading-bar.svelte b/app/src/lib/components/loading-bar.svelte
index 3619a63639..6dabbff22a 100644
--- a/app/src/lib/components/loading-bar.svelte
+++ b/app/src/lib/components/loading-bar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+import { run } from "svelte/legacy"
 
 import { tweened } from "svelte/motion"
 import { cubicOut } from "svelte/easing"
@@ -27,8 +27,8 @@ navigationState.subscribe(state => {
 })
 
 run(() => {
-    $navigationState = $navigating ? "loading" : "loaded"
-  });
+  $navigationState = $navigating ? "loading" : "loaded"
+})
 </script>
 
 <div class="absolute top-0 z-[999] h-[2px] w-full">
diff --git a/app/src/lib/components/loading-dots.svelte b/app/src/lib/components/loading-dots.svelte
index d40462b8f0..0620f7bb27 100644
--- a/app/src/lib/components/loading-dots.svelte
+++ b/app/src/lib/components/loading-dots.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = "size-12" }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = "size-12" }: Props = $props()
 </script>
 
 <div>
diff --git a/app/src/lib/components/loading-logo.svelte b/app/src/lib/components/loading-logo.svelte
index 6aba74512c..52cddc9c7a 100644
--- a/app/src/lib/components/loading-logo.svelte
+++ b/app/src/lib/components/loading-logo.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    interface Props {
-        class?: string | undefined;
-    }
-
-    let { class: className = "size-12" }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = "size-12" }: Props = $props()
 </script>
 
 <div class="max-w-full w-full flex flex-1 items-center justify-center">
diff --git a/app/src/lib/components/not-connected.svelte b/app/src/lib/components/not-connected.svelte
index 01ac554b6d..4b948634d9 100644
--- a/app/src/lib/components/not-connected.svelte
+++ b/app/src/lib/components/not-connected.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+import { run } from "svelte/legacy"
 
 import * as Card from "$lib/components/ui/card/index.ts"
 import { Connect } from "$lib/components/connect"
@@ -10,7 +10,7 @@ let title: string = $state()
 let text: string = $state()
 
 run(() => {
-    if (
+  if (
     $sepoliaStore.connectionStatus !== "connected" &&
     $cosmosStore.connectionStatus !== "connected"
   ) {
@@ -20,7 +20,7 @@ run(() => {
     title = ""
     text = ""
   }
-  });
+})
 </script>
 
 <section class="max-w-lg">
diff --git a/app/src/lib/components/packet-details.svelte b/app/src/lib/components/packet-details.svelte
index 41a19acb2d..ed7014a34f 100644
--- a/app/src/lib/components/packet-details.svelte
+++ b/app/src/lib/components/packet-details.svelte
@@ -7,13 +7,14 @@ import * as Card from "$lib/components/ui/card/index.ts"
 import PacketPath from "./packet-path.svelte"
 import DetailsHeading from "./details-heading.svelte"
 
-const packet = readFragment(packetDetailsFragment, packetDetails)
-  interface Props {
-    packetDetails: FragmentOf<typeof packetDetailsFragment>;
-    chains: Array<Chain>;
-  }
+interface Props {
+  packetDetails: FragmentOf<typeof packetDetailsFragment>
+  chains: Array<Chain>
+}
 
-  let { packetDetails, chains }: Props = $props();
+let { packetDetails, chains }: Props = $props()
+
+const packet = readFragment(packetDetailsFragment, packetDetails)
 
 const packetSourceDestination = {
   source_chain_id: packet.source_chain_id,
diff --git a/app/src/lib/components/packet-path.svelte b/app/src/lib/components/packet-path.svelte
index fb7f686dfc..49234ccdb7 100644
--- a/app/src/lib/components/packet-path.svelte
+++ b/app/src/lib/components/packet-path.svelte
@@ -3,21 +3,21 @@ import { cn } from "$lib/utilities/shadcn"
 import type { Chain } from "$lib/types"
 import { toDisplayName } from "$lib/utilities/chains"
 import MoveRightIcon from "virtual:icons/lucide/move-right"
-  interface Props {
-    chains: Array<Chain>;
-    packet: {
-  source_chain_id: string
-  source_connection_id: string
-  source_channel_id: string
-  source_sequence: string
-  destination_chain_id: string
-  destination_connection_id: string
-  destination_channel_id: string
-  destination_sequence: string
-};
+interface Props {
+  chains: Array<Chain>
+  packet: {
+    source_chain_id: string
+    source_connection_id: string
+    source_channel_id: string
+    source_sequence: string
+    destination_chain_id: string
+    destination_connection_id: string
+    destination_channel_id: string
+    destination_sequence: string
   }
+}
 
-  let { chains, packet }: Props = $props();
+let { chains, packet }: Props = $props()
 </script>
 
 <section class="flex flex-col sm:flex-row">
diff --git a/app/src/lib/components/precise.svelte b/app/src/lib/components/precise.svelte
index a97d6787c7..4c269acf7a 100644
--- a/app/src/lib/components/precise.svelte
+++ b/app/src/lib/components/precise.svelte
@@ -3,21 +3,15 @@ import * as Tooltip from "$lib/components/ui/tooltip"
 import type { Chain } from "$lib/types.ts"
 import { getSupportedAsset } from "$lib/utilities/helpers.ts"
 
-  interface Props {
-    chain: Chain;
-    asset: any;
-    displayDecimals?: number;
-    showToolTip?: boolean;
-    showSymbol?: boolean;
-  }
+interface Props {
+  chain: Chain
+  asset: any
+  displayDecimals?: number
+  showToolTip?: boolean
+  showSymbol?: boolean
+}
 
-  let {
-    chain,
-    asset,
-    displayDecimals = 2,
-    showToolTip = false,
-    showSymbol = false
-  }: Props = $props();
+let { chain, asset, displayDecimals = 2, showToolTip = false, showSymbol = false }: Props = $props()
 
 const formatBalance = (
   balance: bigint | string,
@@ -61,9 +55,12 @@ const abbreviateNumber = (num: number, displayDecimals: number): string => {
 let supportedAsset = $derived(asset ? getSupportedAsset(chain, asset.address) : null)
 
 let balance = $derived(asset ? (asset.balance ?? BigInt(0)) : BigInt(0))
-let decimals = $derived(asset && supportedAsset ? supportedAsset.decimals : asset ? asset.decimals : 0)
-let symbol =
-  $derived(asset && supportedAsset ? supportedAsset.display_symbol : asset ? asset.symbol : "Unknown")
+let decimals = $derived(
+  asset && supportedAsset ? supportedAsset.decimals : asset ? asset.decimals : 0
+)
+let symbol = $derived(
+  asset && supportedAsset ? supportedAsset.display_symbol : asset ? asset.symbol : "Unknown"
+)
 
 let formatted = $derived(formatBalance(balance, decimals, true))
 let precise = $derived(formatBalance(balance, decimals, false))
diff --git a/app/src/lib/components/search/search-bar.svelte b/app/src/lib/components/search/search-bar.svelte
index 87dea93834..61a6ca1aee 100644
--- a/app/src/lib/components/search/search-bar.svelte
+++ b/app/src/lib/components/search/search-bar.svelte
@@ -4,19 +4,19 @@ import SearchIcon from "virtual:icons/lucide/search"
 import { Input } from "$lib/components/ui/input/index.ts"
 import { Button } from "$lib/components/ui/button"
 
-    interface Props {
-        searchInput?: string;
-        onInputClick?: ((event: MouseEvent) => void) | undefined;
-        onInputChange?: ((event: InputEvent) => void) | undefined;
-        windowWidth?: any;
-    }
+interface Props {
+  searchInput?: string
+  onInputClick?: ((event: MouseEvent) => void) | undefined
+  onInputChange?: ((event: InputEvent) => void) | undefined
+  windowWidth?: any
+}
 
-    let {
-        searchInput = $bindable(""),
-        onInputClick = undefined,
-        onInputChange = undefined,
-        windowWidth = window.innerWidth
-    }: Props = $props();
+let {
+  searchInput = $bindable(""),
+  onInputClick = undefined,
+  onInputChange = undefined,
+  windowWidth = window.innerWidth
+}: Props = $props()
 </script>
 
 <div class="flex justify-end">
diff --git a/app/src/lib/components/spinner-svg.svelte b/app/src/lib/components/spinner-svg.svelte
index 0f93ad1701..5666f9cc46 100644
--- a/app/src/lib/components/spinner-svg.svelte
+++ b/app/src/lib/components/spinner-svg.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    className: string; //Add this through our icon package instead
-  }
-
-  let { className }: Props = $props();
+interface Props {
+  className: string //Add this through our icon package instead
+}
 
+let { className }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/spinning-logo/square.svelte b/app/src/lib/components/spinning-logo/square.svelte
index 09096597fe..9966eb37d6 100644
--- a/app/src/lib/components/spinning-logo/square.svelte
+++ b/app/src/lib/components/spinning-logo/square.svelte
@@ -1,17 +1,12 @@
 <script lang="ts">
-	interface Props {
-		size: number;
-		x: number;
-		y: number;
-		strokeWidth: number;
-	}
-
-	let {
-		size,
-		x,
-		y,
-		strokeWidth
-	}: Props = $props();
+interface Props {
+  size: number
+  x: number
+  y: number
+  strokeWidth: number
+}
+
+let { size, x, y, strokeWidth }: Props = $props()
 </script>
 
 
diff --git a/app/src/lib/components/spinning-outline-logo-three.svelte b/app/src/lib/components/spinning-outline-logo-three.svelte
index 9f521aa8f2..11a659d8c6 100644
--- a/app/src/lib/components/spinning-outline-logo-three.svelte
+++ b/app/src/lib/components/spinning-outline-logo-three.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+import { run } from "svelte/legacy"
 
 import * as THREE from "three"
 import Square from "./spinning-logo/square.svelte"
@@ -123,8 +123,8 @@ const render = (mode: string | undefined) => {
 
 onMount(() => render($mode))
 run(() => {
-    render($mode)
-  });
+  render($mode)
+})
 </script>
 
 <div class="relative flex-1">
diff --git a/app/src/lib/components/stats-bar-stat.svelte b/app/src/lib/components/stats-bar-stat.svelte
index c91b77c40f..1df55702b1 100644
--- a/app/src/lib/components/stats-bar-stat.svelte
+++ b/app/src/lib/components/stats-bar-stat.svelte
@@ -3,19 +3,14 @@ import { deviceWidth } from "$lib/utilities/device.ts"
 import { cn } from "$lib/utilities/shadcn.ts"
 import LoadingDots from "$lib/components/loading-dots.svelte"
 
-  interface Props {
-    label: string;
-    value: number | string;
-    blink: boolean;
-    children?: import('svelte').Snippet;
-  }
+interface Props {
+  label: string
+  value: number | string
+  blink: boolean
+  children?: import("svelte").Snippet
+}
 
-  let {
-    label,
-    value,
-    blink,
-    children
-  }: Props = $props();
+let { label, value, blink, children }: Props = $props()
 
 function formatValue(value: number | string): string {
   if (typeof value === "number") {
diff --git a/app/src/lib/components/stepper.svelte b/app/src/lib/components/stepper.svelte
index 385736c8ca..d8248e66a9 100644
--- a/app/src/lib/components/stepper.svelte
+++ b/app/src/lib/components/stepper.svelte
@@ -8,12 +8,12 @@ import { toIsoString } from "$lib/utilities/date"
 import Truncate from "$lib/components/truncate.svelte"
 import { createEventDispatcher } from "svelte"
 
-  interface Props {
-    steps: Readable<Array<Step>>;
-    onRetry?: (() => void) | undefined;
-  }
+interface Props {
+  steps: Readable<Array<Step>>
+  onRetry?: (() => void) | undefined
+}
 
-  let { steps, onRetry = undefined }: Props = $props();
+let { steps, onRetry = undefined }: Props = $props()
 
 const dispatch = createEventDispatcher()
 
diff --git a/app/src/lib/components/table-cells/cell-assets.svelte b/app/src/lib/components/table-cells/cell-assets.svelte
index 217144f30f..44f18fa95e 100644
--- a/app/src/lib/components/table-cells/cell-assets.svelte
+++ b/app/src/lib/components/table-cells/cell-assets.svelte
@@ -3,12 +3,12 @@ import { cn } from "$lib/utilities/shadcn.ts"
 import { truncate } from "$lib/utilities/format"
 import ExplorerPrecise from "$lib/components/explorer-precise.svelte"
 
-  interface Props {
-    value: object;
-    [key: string]: any
-  }
+interface Props {
+  value: object
+  [key: string]: any
+}
 
-  let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <div {...rest} class={cn("flex flex-col")}>
diff --git a/app/src/lib/components/table-cells/cell-chain-index.svelte b/app/src/lib/components/table-cells/cell-chain-index.svelte
index 87a9f0f055..a4501ccd8b 100644
--- a/app/src/lib/components/table-cells/cell-chain-index.svelte
+++ b/app/src/lib/components/table-cells/cell-chain-index.svelte
@@ -2,15 +2,15 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellCopy from "./cell-copy.svelte"
 
-  interface Props {
-    value: {
-  chain_display_name: string
-  chain_id: string
-};
-    [key: string]: any
+interface Props {
+  value: {
+    chain_display_name: string
+    chain_id: string
   }
+  [key: string]: any
+}
 
-  let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <div  class={cn("flex flex-col ")} {...rest}>
diff --git a/app/src/lib/components/table-cells/cell-copy.svelte b/app/src/lib/components/table-cells/cell-copy.svelte
index 6fbb469638..f6fb638e0f 100644
--- a/app/src/lib/components/table-cells/cell-copy.svelte
+++ b/app/src/lib/components/table-cells/cell-copy.svelte
@@ -6,19 +6,17 @@ import CheckIcon from "virtual:icons/lucide/check"
 import { truncate } from "$lib/utilities/format.ts"
 import { copyTextAction } from "$lib/actions/copy.ts"
 
-
 let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
 const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
 
-  interface Props {
-    value: string;
-    trunc?: number;
-    class?: string;
-  }
-
-  let { value, trunc = 0, class: buttonClass = "" }: Props = $props();
+interface Props {
+  value: string
+  trunc?: number
+  class?: string
+}
 
+let { value, trunc = 0, class: buttonClass = "" }: Props = $props()
 </script>
 
 <div class="text-start flex items-center gap-2 group cursor-default">
diff --git a/app/src/lib/components/table-cells/cell-duration-text.svelte b/app/src/lib/components/table-cells/cell-duration-text.svelte
index 7c319c1442..e5358e68e2 100644
--- a/app/src/lib/components/table-cells/cell-duration-text.svelte
+++ b/app/src/lib/components/table-cells/cell-duration-text.svelte
@@ -3,11 +3,11 @@ import { toIsoString } from "$lib/utilities/date"
 import { Duration } from "svelte-ux"
 import { DurationUnits } from "svelte-ux"
 
-	interface Props {
-		value: Date | undefined;
-	}
+interface Props {
+  value: Date | undefined
+}
 
-	let { value }: Props = $props();
+let { value }: Props = $props()
 </script>
 
 
diff --git a/app/src/lib/components/table-cells/cell-icon-tooltip.svelte b/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
index ac496b2cf4..80f30f2364 100644
--- a/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
+++ b/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
@@ -8,16 +8,16 @@ import { truncate } from "$lib/utilities/format.ts"
 import { Button } from "$lib/components/ui/button/index.ts"
 import * as Tooltip from "$lib/components/ui/tooltip/index.ts"
 
-  interface Props {
-    records: Array<{
-  index: number
-  hash: string
-  label: string
-  truncateSize: number
-}>;
-  }
+interface Props {
+  records: Array<{
+    index: number
+    hash: string
+    label: string
+    truncateSize: number
+  }>
+}
 
-  let { records }: Props = $props();
+let { records }: Props = $props()
 
 let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
diff --git a/app/src/lib/components/table-cells/cell-origin-channel.svelte b/app/src/lib/components/table-cells/cell-origin-channel.svelte
index 9533d6f97e..d673cbc152 100644
--- a/app/src/lib/components/table-cells/cell-origin-channel.svelte
+++ b/app/src/lib/components/table-cells/cell-origin-channel.svelte
@@ -2,18 +2,18 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellCopy from "./cell-copy.svelte"
 
-  interface Props {
-    value: {
-  chain_display_name: string | undefined
-  chain_id: string | undefined
-  connection_id: string | undefined
-  channel_id: string | undefined
-  port_id: string | undefined
-};
-    [key: string]: any
+interface Props {
+  value: {
+    chain_display_name: string | undefined
+    chain_id: string | undefined
+    connection_id: string | undefined
+    channel_id: string | undefined
+    port_id: string | undefined
   }
+  [key: string]: any
+}
 
-  let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <div {...rest} class={cn("flex flex-col ")}>
diff --git a/app/src/lib/components/table-cells/cell-origin-connection.svelte b/app/src/lib/components/table-cells/cell-origin-connection.svelte
index b7ab8fce85..c279817cc2 100644
--- a/app/src/lib/components/table-cells/cell-origin-connection.svelte
+++ b/app/src/lib/components/table-cells/cell-origin-connection.svelte
@@ -2,17 +2,17 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellCopy from "./cell-copy.svelte"
 
-  interface Props {
-    value: {
-  chain_display_name: string
-  chain_id: string
-  connection_id: string
-  client_id: string
-};
-    [key: string]: any
+interface Props {
+  value: {
+    chain_display_name: string
+    chain_id: string
+    connection_id: string
+    client_id: string
   }
+  [key: string]: any
+}
 
-  let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <div  class={cn("flex flex-col ")} {...rest}>
diff --git a/app/src/lib/components/table-cells/cell-origin-transfer.svelte b/app/src/lib/components/table-cells/cell-origin-transfer.svelte
index 96fc0c4d45..cd06716825 100644
--- a/app/src/lib/components/table-cells/cell-origin-transfer.svelte
+++ b/app/src/lib/components/table-cells/cell-origin-transfer.svelte
@@ -4,16 +4,16 @@ import { truncate } from "$lib/utilities/format"
 import * as Tooltip from "$lib/components/ui/tooltip"
 import type { Chain } from "$lib/types"
 
-  interface Props {
-    chains: Array<Chain>;
-    value: {
-  chainId: string
-  address: string
-};
-    [key: string]: any
+interface Props {
+  chains: Array<Chain>
+  value: {
+    chainId: string
+    address: string
   }
+  [key: string]: any
+}
 
-  let { chains, value, ...rest }: Props = $props();
+let { chains, value, ...rest }: Props = $props()
 
 const chainDisplayName =
   chains.find(chain => chain.chain_id === value.chainId)?.display_name ??
diff --git a/app/src/lib/components/table-cells/cell-origin.svelte b/app/src/lib/components/table-cells/cell-origin.svelte
index 702a871278..c788f0a5c5 100644
--- a/app/src/lib/components/table-cells/cell-origin.svelte
+++ b/app/src/lib/components/table-cells/cell-origin.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-  interface Props {
-    value: {
-  name: string
-  chain: unknown
-  connection: unknown
-  channel: unknown
-};
-    [key: string]: any
+interface Props {
+  value: {
+    name: string
+    chain: unknown
+    connection: unknown
+    channel: unknown
   }
+  [key: string]: any
+}
 
-  let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <div  class={cn("flex flex-col ")} {...rest}>
diff --git a/app/src/lib/components/table-cells/cell-plain-text.svelte b/app/src/lib/components/table-cells/cell-plain-text.svelte
index 4904ea0f8a..c110b0aeec 100644
--- a/app/src/lib/components/table-cells/cell-plain-text.svelte
+++ b/app/src/lib/components/table-cells/cell-plain-text.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	interface Props {
-		value: string;
-		[key: string]: any
-	}
+interface Props {
+  value: string
+  [key: string]: any
+}
 
-	let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <p {...rest}>{value}</p>
diff --git a/app/src/lib/components/table-cells/cell-sequence.svelte b/app/src/lib/components/table-cells/cell-sequence.svelte
index 9e221904e0..5d4fff247c 100644
--- a/app/src/lib/components/table-cells/cell-sequence.svelte
+++ b/app/src/lib/components/table-cells/cell-sequence.svelte
@@ -2,15 +2,15 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import CellTimestamp from "./cell-timestamp.svelte"
 
-  interface Props {
-    value: {
-  sequence: number | undefined
-  timestamp: string | undefined
-};
-    [key: string]: any
+interface Props {
+  value: {
+    sequence: number | undefined
+    timestamp: string | undefined
   }
+  [key: string]: any
+}
 
-  let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 </script>
 
 <div class={cn("flex flex-col")} {...rest}>
diff --git a/app/src/lib/components/table-cells/cell-status.svelte b/app/src/lib/components/table-cells/cell-status.svelte
index 1c6d38c1f4..14b612a557 100644
--- a/app/src/lib/components/table-cells/cell-status.svelte
+++ b/app/src/lib/components/table-cells/cell-status.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 
-	interface Props {
-		value: string;
-		[key: string]: any
-	}
+interface Props {
+  value: string
+  [key: string]: any
+}
 
-	let { value, ...rest }: Props = $props();
+let { value, ...rest }: Props = $props()
 
 const goodValue = (v: string) => v === "HEALTHY" || v === "CONFIRM"
 </script>
diff --git a/app/src/lib/components/table-cells/cell-timestamp.svelte b/app/src/lib/components/table-cells/cell-timestamp.svelte
index 250de375c0..8e929b64ae 100644
--- a/app/src/lib/components/table-cells/cell-timestamp.svelte
+++ b/app/src/lib/components/table-cells/cell-timestamp.svelte
@@ -4,11 +4,11 @@ import { Duration } from "svelte-ux"
 import { DurationUnits } from "svelte-ux"
 import { toPrettyDateTimeFormat } from "$lib/utilities/date.ts"
 
-	interface Props {
-		value: Date | undefined;
-	}
+interface Props {
+  value: Date | undefined
+}
 
-	let { value }: Props = $props();
+let { value }: Props = $props()
 </script>
 
 {#if value}{toPrettyDateTimeFormat(value, { local: true })}{:else}-{/if}
diff --git a/app/src/lib/components/tables/packets.svelte b/app/src/lib/components/tables/packets.svelte
index 2d25e94369..0fb168d632 100644
--- a/app/src/lib/components/tables/packets.svelte
+++ b/app/src/lib/components/tables/packets.svelte
@@ -17,15 +17,14 @@ import {
 } from "$lib/queries/packets"
 import { timestamp } from "$lib/stores/page.ts"
 
-
-  interface Props {
-    // export let chains: Array<Chain>
-    chain_id?: string | undefined;
-    connection_id?: string | undefined;
-    channel_id?: string | undefined;
-  }
-
-  let { chain_id = undefined, connection_id = undefined, channel_id = undefined }: Props = $props();
+interface Props {
+  // export let chains: Array<Chain>
+  chain_id?: string | undefined
+  connection_id?: string | undefined
+  channel_id?: string | undefined
+}
+
+let { chain_id = undefined, connection_id = undefined, channel_id = undefined }: Props = $props()
 // export let pageSize: number // must be even
 
 let packets = chain_id
diff --git a/app/src/lib/components/time-elapsed.svelte b/app/src/lib/components/time-elapsed.svelte
index 4821fe8155..e4bf37a3cf 100644
--- a/app/src/lib/components/time-elapsed.svelte
+++ b/app/src/lib/components/time-elapsed.svelte
@@ -2,13 +2,12 @@
 import { readable } from "svelte/store"
 import { relativeTime } from "$lib/utilities/format.ts"
 
-  interface Props {
-    timestamp: Date;
-    class: string;
-  }
-
-  let { timestamp, class: _class }: Props = $props();
+interface Props {
+  timestamp: Date
+  class: string
+}
 
+let { timestamp, class: _class }: Props = $props()
 
 const time = readable(timestamp, set => {
   const interval = setInterval(() => set(timestamp), 1_000)
diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
index 6032a0505a..de0292fbc3 100644
--- a/app/src/lib/components/transfer-details.svelte
+++ b/app/src/lib/components/transfer-details.svelte
@@ -25,11 +25,11 @@ import { formatUnits } from "viem"
 import PacketPath from "./packet-path.svelte"
 
 const source = $page.params.source
-  interface Props {
-    chains: Array<Chain>;
-  }
+interface Props {
+  chains: Array<Chain>
+}
 
-  let { chains }: Props = $props();
+let { chains }: Props = $props()
 
 let transfers = createQuery({
   queryKey: ["transfers-by-source-base", source],
diff --git a/app/src/lib/components/transfers-table/transfers-table.svelte b/app/src/lib/components/transfers-table/transfers-table.svelte
index 8d89fd7eca..803826442a 100644
--- a/app/src/lib/components/transfers-table/transfers-table.svelte
+++ b/app/src/lib/components/transfers-table/transfers-table.svelte
@@ -12,13 +12,13 @@ import { timestamp } from "$lib/stores/page.ts"
 
 import ExplorerTablePaginated from "$lib/components/explorer-table-paginated.svelte"
 
-  interface Props {
-    chains: Array<Chain>;
-    normalizedAddresses?: Array<string> | null;
-    pageSize: number;
-  }
+interface Props {
+  chains: Array<Chain>
+  normalizedAddresses?: Array<string> | null
+  pageSize: number
+}
 
-  let { chains, normalizedAddresses = null, pageSize }: Props = $props();
+let { chains, normalizedAddresses = null, pageSize }: Props = $props()
 
 const transfers = transfersQuery(normalizedAddresses, timestamp, pageSize)
 
diff --git a/app/src/lib/components/truncate.svelte b/app/src/lib/components/truncate.svelte
index 9c54966397..2324e365e9 100644
--- a/app/src/lib/components/truncate.svelte
+++ b/app/src/lib/components/truncate.svelte
@@ -2,13 +2,13 @@
 import * as Tooltip from "$lib/components/ui/tooltip"
 import { truncate } from "$lib/utilities/format"
 
-	interface Props {
-		value: string;
-		type: "address" | "hash" | "full";
-		[key: string]: any
-	}
+interface Props {
+  value: string
+  type: "address" | "hash" | "full"
+  [key: string]: any
+}
 
-	let { value, type, ...rest }: Props = $props();
+let { value, type, ...rest }: Props = $props()
 </script>
 
 <Tooltip.Root><Tooltip.Trigger {...rest}>{type === "full" ? value : truncate(value, type === "address" ? 6 : 12)}</Tooltip.Trigger><Tooltip.Content>{value}</Tooltip.Content></Tooltip.Root>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index af1bffcf2e..cbd907cd69 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -3,29 +3,11 @@ import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
 import { buttonVariants } from "$lib/components/ui/button/index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AlertDialogPrimitive.ActionProps
-type $$Events = AlertDialogPrimitive.ActionEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet<[any]>;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
-
-	const children_render = $derived(children);
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AlertDialogPrimitive.ActionProps = $props()
 </script>
 
-<AlertDialogPrimitive.Action
-	class={cn(buttonVariants(), className)}
-	{...rest}
-	on:click
-	on:keydown
-	
->
-	{#snippet children({ builder })}
-		{@render children_render?.({ builder, })}
-	{/snippet}
-</AlertDialogPrimitive.Action>
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index 79635774dc..0e91c8cb62 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -3,29 +3,15 @@ import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
 import { buttonVariants } from "$lib/components/ui/button/index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AlertDialogPrimitive.CancelProps
-type $$Events = AlertDialogPrimitive.CancelEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet<[any]>;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
-
-	const children_render = $derived(children);
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AlertDialogPrimitive.CancelProps = $props()
 </script>
 
 <AlertDialogPrimitive.Cancel
+	bind:ref
 	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-	{...rest}
-	on:click
-	on:keydown
-	
->
-	{#snippet children({ builder })}
-		{@render children_render?.({ builder, })}
-	{/snippet}
-</AlertDialogPrimitive.Cancel>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 5b120482a9..35d11977ee 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,40 +1,23 @@
 <script lang="ts">
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
-import * as AlertDialog from "./index.js"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = AlertDialogPrimitive.ContentProps
-
-
-	interface Props {
-		transition?: $$Props["transition"];
-		transitionConfig?: $$Props["transitionConfig"];
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		transition = flyAndScale,
-		transitionConfig = undefined,
-		class: className = undefined,
-		children,
-		...rest
-	}: Props = $props();
+import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui"
+import AlertDialogOverlay from "./alert-dialog-overlay.svelte"
+import { cn } from "$lib/utilities/shadcn.js"
 
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChild<AlertDialogPrimitive.ContentProps> = $props()
 </script>
 
-<AlertDialog.Portal>
-	<AlertDialog.Overlay />
+<AlertDialogPrimitive.Portal>
+	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
-		{transition}
-		{transitionConfig}
+		bind:ref
 		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
 			className
 		)}
-		{...rest}
-	>
-		{@render children?.()}
-	</AlertDialogPrimitive.Content>
-</AlertDialog.Portal>
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index a5bdca52de..3a6c7dbf86 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -2,21 +2,15 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AlertDialogPrimitive.DescriptionProps
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AlertDialogPrimitive.DescriptionProps = $props()
 </script>
 
 <AlertDialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
-	{...rest}
->
-	{@render children?.()}
-</AlertDialogPrimitive.Description>
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index 675b09339d..860b3f9f89 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
 <div
+	bind:this={ref}
 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...rest}
+	{...restProps}
 >
 	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index bb1dab87be..e5ae8ec99e 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...rest}>
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index 02b792bce2..5dfcfa8a61 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -1,26 +1,19 @@
 <script lang="ts">
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
-import { fade } from "svelte/transition"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AlertDialogPrimitive.OverlayProps
-
-	interface Props {
-		class?: $$Props["class"];
-		transition?: $$Props["transition"];
-		transitionConfig?: $$Props["transitionConfig"];
-		[key: string]: any
-	}
-
-	let { class: className = undefined, transition = fade, transitionConfig = {
-  duration: 150
-}, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AlertDialogPrimitive.OverlayProps = $props()
 </script>
 
 <AlertDialogPrimitive.Overlay
-	{transition}
-	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
-	{...rest}
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
index 438709d28e..9675698f18 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
-	interface Props {
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
+interface Props {
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
-	let { children, ...rest }: Props = $props();
+let { children, ...rest }: Props = $props()
 
 type $$Props = AlertDialogPrimitive.PortalProps
 </script>
diff --git a/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index 7f5e2e5306..308fad2b67 100644
--- a/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/app/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -2,19 +2,17 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AlertDialogPrimitive.TitleProps
-
-	interface Props {
-		class?: $$Props["class"];
-		level?: $$Props["level"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, level = "h3", children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  level = 3,
+  ...restProps
+}: AlertDialogPrimitive.TitleProps = $props()
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...rest}>
-	{@render children?.()}
-</AlertDialogPrimitive.Title>
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{level}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/alert-dialog/index.ts b/app/src/lib/components/ui/alert-dialog/index.ts
index 76bf7d822a..7863675839 100644
--- a/app/src/lib/components/ui/alert-dialog/index.ts
+++ b/app/src/lib/components/ui/alert-dialog/index.ts
@@ -1,9 +1,7 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui"
-
 import Title from "./alert-dialog-title.svelte"
 import Action from "./alert-dialog-action.svelte"
 import Cancel from "./alert-dialog-cancel.svelte"
-import Portal from "./alert-dialog-portal.svelte"
 import Footer from "./alert-dialog-footer.svelte"
 import Header from "./alert-dialog-header.svelte"
 import Overlay from "./alert-dialog-overlay.svelte"
@@ -12,6 +10,7 @@ import Description from "./alert-dialog-description.svelte"
 
 const Root = AlertDialogPrimitive.Root
 const Trigger = AlertDialogPrimitive.Trigger
+const Portal = AlertDialogPrimitive.Portal
 
 export {
   Root,
diff --git a/app/src/lib/components/ui/avatar/avatar-fallback.svelte b/app/src/lib/components/ui/avatar/avatar-fallback.svelte
index 200d305c35..59f2bd128a 100644
--- a/app/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/app/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -2,21 +2,15 @@
 import { Avatar as AvatarPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AvatarPrimitive.FallbackProps
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.FallbackProps = $props()
 </script>
 
 <AvatarPrimitive.Fallback
+	bind:ref
 	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
-	{...rest}
->
-	{@render children?.()}
-</AvatarPrimitive.Fallback>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/avatar/avatar-image.svelte b/app/src/lib/components/ui/avatar/avatar-image.svelte
index 08ae9a3a19..f832c945f9 100644
--- a/app/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/app/src/lib/components/ui/avatar/avatar-image.svelte
@@ -2,22 +2,11 @@
 import { Avatar as AvatarPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AvatarPrimitive.ImageProps
-
-	interface Props {
-		class?: $$Props["class"];
-		src?: $$Props["src"];
-		alt?: $$Props["alt"];
-		[key: string]: any
-	}
-
-	let { class: className = undefined, src = undefined, alt = undefined, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.ImageProps = $props()
 </script>
 
 <AvatarPrimitive.Image
-	{src}
-	{alt}
+	bind:ref
 	class={cn("aspect-square h-full w-full", className)}
-	{...rest}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/avatar/avatar.svelte b/app/src/lib/components/ui/avatar/avatar.svelte
index 5099a05943..cab05e4cf1 100644
--- a/app/src/lib/components/ui/avatar/avatar.svelte
+++ b/app/src/lib/components/ui/avatar/avatar.svelte
@@ -2,23 +2,11 @@
 import { Avatar as AvatarPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = AvatarPrimitive.Props
-
-	interface Props {
-		class?: $$Props["class"];
-		delayMs?: $$Props["delayMs"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, delayMs = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.RootProps = $props()
 </script>
 
 <AvatarPrimitive.Root
-	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-	{...rest}
->
-	{@render children?.()}
-</AvatarPrimitive.Root>
+	bind:ref
+	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/badge/badge.svelte b/app/src/lib/components/ui/badge/badge.svelte
index b8a95b93c5..14a7b41418 100644
--- a/app/src/lib/components/ui/badge/badge.svelte
+++ b/app/src/lib/components/ui/badge/badge.svelte
@@ -1,30 +1,48 @@
-<script lang="ts">
-import { type Variant, badgeVariants } from "./index.js"
-import { cn } from "$lib/utilities/shadcn.js"
+<script lang="ts" module>
+import { type VariantProps, tv } from "tailwind-variants"
 
-  interface Props {
-    class?: string | undefined | null;
-    href?: string | undefined;
-    variant?: Variant;
-    children?: import('svelte').Snippet;
-    [key: string]: any
+export const badgeVariants = tv({
+  base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+      destructive:
+        "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+      outline: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
   }
+})
+
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"]
+</script>
 
-  let {
-    class: className = undefined,
-    href = undefined,
-    variant = "default",
-    children,
-    ...rest
-  }: Props = $props();
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utilities/shadcn.js";
 
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
 </script>
 
 <svelte:element
-  this={href ? 'a' : 'span'}
-  {href}
-  class={cn(badgeVariants({ variant, className }))}
-  {...rest}
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </svelte:element>
diff --git a/app/src/lib/components/ui/badge/index.ts b/app/src/lib/components/ui/badge/index.ts
index 20ca01358b..d1d2f80995 100644
--- a/app/src/lib/components/ui/badge/index.ts
+++ b/app/src/lib/components/ui/badge/index.ts
@@ -1,22 +1,2 @@
-import { type VariantProps, tv } from "tailwind-variants"
 export { default as Badge } from "./badge.svelte"
-
-export const badgeVariants = tv({
-  base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  variants: {
-    variant: {
-      default:
-        "font-condensed uppercase border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-      secondary:
-        "border-transparent uppercase bg-secondary text-secondary-foreground hover:bg-secondary/80",
-      destructive:
-        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-      outline: "text-foreground"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-})
-
-export type Variant = VariantProps<typeof badgeVariants>["variant"]
+export { badgeVariants, type BadgeVariant } from "./badge.svelte"
diff --git a/app/src/lib/components/ui/button/button.svelte b/app/src/lib/components/ui/button/button.svelte
index 3372d2b927..b4c9ec0ff2 100644
--- a/app/src/lib/components/ui/button/button.svelte
+++ b/app/src/lib/components/ui/button/button.svelte
@@ -1,48 +1,73 @@
-<script lang="ts">
-import { Button as ButtonPrimitive } from "bits-ui"
-import { type Events, type Props, buttonVariants } from "./index.js"
-import { cn } from "$lib/utilities/shadcn.js"
+<script lang="ts" module>
+import type { WithElementRef } from "bits-ui"
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"
+import { type VariantProps, tv } from "tailwind-variants"
+
+export const buttonVariants = tv({
+  base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8",
+      icon: "h-10 w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+})
 
-type $$Props = Props
-type $$Events = Events
+export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]
+export type ButtonSize = VariantProps<typeof buttonVariants>["size"]
 
-  interface Props_1 {
-    class?: $$Props["class"];
-    value?: $$Props["value"];
-    variant?: $$Props["variant"];
-    size?: $$Props["size"];
-    builders?: $$Props["builders"];
-    name?: $$Props["name"];
-    disabled?: $$Props["disabled"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+  WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant
+    size?: ButtonSize
   }
+</script>
 
-  let {
-    class: className = undefined,
-    value = "",
-    variant = "default",
-    size = "default",
-    builders = [],
-    name = "button",
-    disabled = false,
-    children,
-    ...rest
-  }: Props_1 = $props();
+<script lang="ts">
+	import { cn } from "$lib/utilities/shadcn.js";
 
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		children,
+		...restProps
+	}: ButtonProps = $props();
 </script>
 
-<ButtonPrimitive.Root
-  {name}
-  {builders}
-  {disabled}
-  class={cn(buttonVariants({ variant, size, className }))}
-  type="button"
-  {...rest}
-  on:click
-  on:keydown
->
-  {#if children}{@render children()}{:else}
-    {value}
-  {/if}
-</ButtonPrimitive.Root>
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/app/src/lib/components/ui/button/index.ts b/app/src/lib/components/ui/button/index.ts
index 910dc58942..cf846fc2b2 100644
--- a/app/src/lib/components/ui/button/index.ts
+++ b/app/src/lib/components/ui/button/index.ts
@@ -1,52 +1,17 @@
-import { type VariantProps, tv } from "tailwind-variants"
-import type { Button as ButtonPrimitive } from "bits-ui"
-import Root from "./button.svelte"
-
-const buttonVariants = tv({
-  base: "inline-flex items-center justify-center whitespace-nowrap text-sm font-supermolot font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  variants: {
-    variant: {
-      default: "bg-primary text-primary-foreground hover:bg-primary/90 uppercase font-semibold",
-      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-      outline:
-        "border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:hover:text-black",
-      secondary: "bg-secondary text-secondary-foreground uppercase hover:bg-secondary/80",
-      ghost: "hover:bg-accent hover:text-accent-foreground font-sans ",
-      link: "text-primary no-underline hover:no-underline font-supermolot font-bold text-md decoration-transparent uppercase rounded-none border-solid"
-    },
-    size: {
-      default: "h-10 px-4 py-2",
-      sm: "h-9 px-3",
-      lg: "h-11 px-8",
-      icon: "h-10 w-10"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-})
-
-type Variant = VariantProps<typeof buttonVariants>["variant"]
-type Size = VariantProps<typeof buttonVariants>["size"]
-
-type Props = ButtonPrimitive.Props & {
-  variant?: Variant
-  size?: Size
-  name?: string
-  value?: any
-  disabled?: boolean
-}
-
-type Events = ButtonPrimitive.Events
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants
+} from "./button.svelte"
 
 export {
   Root,
-  type Props,
-  type Events,
+  type ButtonProps as Props,
   //
   Root as Button,
-  type Props as ButtonProps,
-  type Events as ButtonEvents,
-  buttonVariants
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant
 }
diff --git a/app/src/lib/components/ui/card/card-content.svelte b/app/src/lib/components/ui/card/card-content.svelte
index f435c8cb54..2ebaf4ba5e 100644
--- a/app/src/lib/components/ui/card/card-content.svelte
+++ b/app/src/lib/components/ui/card/card-content.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div class={cn('p-3 sm:p-6 pt-0', className)} {...rest}>
-  {@render children?.()}
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/card-description.svelte b/app/src/lib/components/ui/card/card-description.svelte
index 9738f66a40..b4fd92fdda 100644
--- a/app/src/lib/components/ui/card/card-description.svelte
+++ b/app/src/lib/components/ui/card/card-description.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLParagraphElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props()
 </script>
 
-<p class={cn('text-sm text-muted-foreground', className)} {...rest}>
-  {@render children?.()}
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
 </p>
diff --git a/app/src/lib/components/ui/card/card-footer.svelte b/app/src/lib/components/ui/card/card-footer.svelte
index bae688d3f5..eb146d2f9d 100644
--- a/app/src/lib/components/ui/card/card-footer.svelte
+++ b/app/src/lib/components/ui/card/card-footer.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div class={cn('flex items-center p-3 sm:p-6 pt-0', className)} {...rest}>
-  {@render children?.()}
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/card-header.svelte b/app/src/lib/components/ui/card/card-header.svelte
index 83b6fce87e..55ecc3b905 100644
--- a/app/src/lib/components/ui/card/card-header.svelte
+++ b/app/src/lib/components/ui/card/card-header.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 p-3 sm:p-6 pb-0 sm:pb-0', className)} {...rest}>
-  {@render children?.()}
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/card-title.svelte b/app/src/lib/components/ui/card/card-title.svelte
index c00cc34542..34eb7a8e71 100644
--- a/app/src/lib/components/ui/card/card-title.svelte
+++ b/app/src/lib/components/ui/card/card-title.svelte
@@ -1,27 +1,25 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
-import type { HeadingLevel } from "./index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-  tag?: HeadingLevel
-}
-
-  interface Props {
-    class?: $$Props["class"];
-    tag?: $$Props["tag"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, tag = "h3", children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  level = 3,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+} = $props()
 </script>
 
-<svelte:element
-  this={tag}
-  class={cn('text-xl font-supermolot font-bold uppercase', className)}
-  {...rest}
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...restProps}
 >
-  {@render children?.()}
-</svelte:element>
+	{@render children?.()}
+</div>
diff --git a/app/src/lib/components/ui/card/card.svelte b/app/src/lib/components/ui/card/card.svelte
index 4f56746faf..e2c12cb5c1 100644
--- a/app/src/lib/components/ui/card/card.svelte
+++ b/app/src/lib/components/ui/card/card.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
 <div
-  class={cn('border bg-card text-card-foreground shadow-sm dark:bg-muted', className)}
-  {...rest}
+	bind:this={ref}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/card/index.ts b/app/src/lib/components/ui/card/index.ts
index cd0b44ebd2..4427ab0338 100644
--- a/app/src/lib/components/ui/card/index.ts
+++ b/app/src/lib/components/ui/card/index.ts
@@ -20,5 +20,3 @@ export {
   Header as CardHeader,
   Title as CardTitle
 }
-
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
diff --git a/app/src/lib/components/ui/checkbox/checkbox.svelte b/app/src/lib/components/ui/checkbox/checkbox.svelte
index 3900306fb0..9e173f6e4a 100644
--- a/app/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/app/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,42 +1,35 @@
 <script lang="ts">
-import { Checkbox as CheckboxPrimitive } from "bits-ui"
-import Check from "virtual:icons/lucide/check"
-import Minus from "virtual:icons/lucide/minus"
+import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui"
+import Check from "lucide-svelte/icons/check"
+import Minus from "lucide-svelte/icons/minus"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CheckboxPrimitive.Props
-type $$Events = CheckboxPrimitive.Events
-
-  interface Props {
-    class?: $$Props["class"];
-    checked?: $$Props["checked"];
-    [key: string]: any
-  }
-
-  let { class: className = undefined, checked = $bindable(false), ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props()
 </script>
 
 <CheckboxPrimitive.Root
-  class={cn(
-    'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
-    className,
-  )}
-  bind:checked
-  {...rest}
-  on:click
+	bind:ref
+	class={cn(
+		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
 >
-  <CheckboxPrimitive.Indicator
-    class={cn('flex h-4 w-4 items-center justify-center text-current')}
-    
-    
-  >
-    {#snippet children({ isChecked, isIndeterminate })}
-        {#if isChecked}
-        <Check class="h-3.5 w-3.5" />
-      {:else if isIndeterminate}
-        <Minus class="h-3.5 w-3.5" />
-      {/if}
-          {/snippet}
-    </CheckboxPrimitive.Indicator>
+	{#snippet children({ checked, indeterminate })}
+		<div class="flex size-4 items-center justify-center text-current">
+			{#if indeterminate}
+				<Minus class="size-3.5" />
+			{:else}
+				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+			{/if}
+		</div>
+	{/snippet}
 </CheckboxPrimitive.Root>
diff --git a/app/src/lib/components/ui/collapsible/collapsible-content.svelte b/app/src/lib/components/ui/collapsible/collapsible-content.svelte
index ad5f2ee8a3..439588a65f 100644
--- a/app/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/app/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -4,16 +4,21 @@ import { slide } from "svelte/transition"
 
 type $$Props = CollapsiblePrimitive.ContentProps
 
-	interface Props {
-		transition?: $$Props["transition"];
-		transitionConfig?: $$Props["transitionConfig"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
+interface Props {
+  transition?: $$Props["transition"]
+  transitionConfig?: $$Props["transitionConfig"]
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
-	let { transition = slide, transitionConfig = {
-  duration: 150
-}, children, ...rest }: Props = $props();
+let {
+  transition = slide,
+  transitionConfig = {
+    duration: 150
+  },
+  children,
+  ...rest
+}: Props = $props()
 </script>
 
 <CollapsiblePrimitive.Content {transition} {transitionConfig} {...rest}>
diff --git a/app/src/lib/components/ui/collapsible/index.ts b/app/src/lib/components/ui/collapsible/index.ts
index 6df48e06e2..27260bf7af 100644
--- a/app/src/lib/components/ui/collapsible/index.ts
+++ b/app/src/lib/components/ui/collapsible/index.ts
@@ -1,8 +1,8 @@
 import { Collapsible as CollapsiblePrimitive } from "bits-ui"
-import Content from "./collapsible-content.svelte"
 
 const Root = CollapsiblePrimitive.Root
 const Trigger = CollapsiblePrimitive.Trigger
+const Content = CollapsiblePrimitive.Content
 
 export {
   Root,
diff --git a/app/src/lib/components/ui/command/command-dialog.svelte b/app/src/lib/components/ui/command/command-dialog.svelte
index e0c7d06e24..2a4be640a4 100644
--- a/app/src/lib/components/ui/command/command-dialog.svelte
+++ b/app/src/lib/components/ui/command/command-dialog.svelte
@@ -1,44 +1,33 @@
 <script lang="ts">
-import type { Dialog as DialogPrimitive } from "bits-ui"
-import type { Command as CommandPrimitive } from "cmdk-sv"
+import type {
+  Command as CommandPrimitive,
+  Dialog as DialogPrimitive,
+  WithoutChildrenOrChild
+} from "bits-ui"
+import type { Snippet } from "svelte"
 import Command from "./command.svelte"
 import * as Dialog from "$lib/components/ui/dialog/index.js"
 
-type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps
-
-
-  interface Props {
-    open?: $$Props["open"];
-    value?: $$Props["value"];
-    tabindex?: $$Props["tabindex"];
-    backdropFilter?: $$Props["style"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let {
-    open = $bindable(false),
-    value = $bindable(undefined),
-    tabindex = undefined,
-    backdropFilter = undefined,
-    children,
-    ...rest
-  }: Props = $props();
+let {
+  open = $bindable(false),
+  ref = $bindable(null),
+  value = $bindable(""),
+  children,
+  ...restProps
+}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+  WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    children: Snippet
+  } = $props()
 </script>
 
-<Dialog.Root bind:open {...rest}>
-  <Dialog.Content
-    {tabindex}
-    data-command-dialog-overlay
-    style={`backdrop-filter: ${backdropFilter}`}
-    class="overflow-hidden rounded-none p-0 shadow-2xl bg-card"
-  >
-    <Command
-      class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
-      {...rest}
-      bind:value
-    >
-      {@render children?.()}
-    </Command>
-  </Dialog.Content>
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+		<Command
+			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children}
+		/>
+	</Dialog.Content>
 </Dialog.Root>
diff --git a/app/src/lib/components/ui/command/command-empty.svelte b/app/src/lib/components/ui/command/command-empty.svelte
index 1d2c865c18..cc96d300fd 100644
--- a/app/src/lib/components/ui/command/command-empty.svelte
+++ b/app/src/lib/components/ui/command/command-empty.svelte
@@ -1,18 +1,12 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.EmptyProps
-	interface Props {
-		class?: string | undefined | null;
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: CommandPrimitive.EmptyProps = $props()
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...rest}>
-	{@render children?.()}
-</CommandPrimitive.Empty>
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />
diff --git a/app/src/lib/components/ui/command/command-group.svelte b/app/src/lib/components/ui/command/command-group.svelte
index cac0d47b99..0f977828de 100644
--- a/app/src/lib/components/ui/command/command-group.svelte
+++ b/app/src/lib/components/ui/command/command-group.svelte
@@ -1,26 +1,29 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.GroupProps
-
-  interface Props {
-    class?: string | undefined | null;
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  heading,
+  ...restProps
+}: CommandPrimitive.GroupProps & {
+  heading?: string
+} = $props()
 </script>
 
 <CommandPrimitive.Group
-  class={cn(
-    "dark:text-foreground dark:[&_[data-cmdk-group-heading]]:text-muted-foreground dark:bg-primary-foreground bg-secondary-foreground",
-    "overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
-    className
-  )}
-  {...rest}
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	bind:ref
+	{...restProps}
 >
-  {@render children?.()}
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
 </CommandPrimitive.Group>
diff --git a/app/src/lib/components/ui/command/command-input.svelte b/app/src/lib/components/ui/command/command-input.svelte
index bb77f0f1f7..b482293176 100644
--- a/app/src/lib/components/ui/command/command-input.svelte
+++ b/app/src/lib/components/ui/command/command-input.svelte
@@ -1,29 +1,25 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
-import Search from "virtual:icons/lucide/search"
+import { Command as CommandPrimitive } from "bits-ui"
+import Search from "lucide-svelte/icons/search"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.InputProps
-
-
-	interface Props {
-		class?: string | undefined | null;
-		value?: string;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, value = $bindable(""), ...rest }: Props = $props();
+let {
+  ref = $bindable(null),
+  class: className,
+  value = $bindable(""),
+  ...restProps
+}: CommandPrimitive.InputProps = $props()
 </script>
 
-<div class="bg-muted text-foreground flex items-center border-b px-2" data-cmdk-input-wrapper="">
-	<Search class="mr-2 size-4 shrink-0 opacity-80 text-foreground" />
+<div class="flex items-center border-b px-2" data-command-input-wrapper="">
+	<Search class="mr-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			'dark:placeholder:text-primary/60 placeholder:text-muted-foreground/85',
-			"flex h-11 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
-		{...rest}
+		bind:ref
+		{...restProps}
 		bind:value
 	/>
 </div>
diff --git a/app/src/lib/components/ui/command/command-item.svelte b/app/src/lib/components/ui/command/command-item.svelte
index cf8c09ae71..d9c3cbe109 100644
--- a/app/src/lib/components/ui/command/command-item.svelte
+++ b/app/src/lib/components/ui/command/command-item.svelte
@@ -1,35 +1,15 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.ItemProps
-
-
-	interface Props {
-		asChild?: boolean;
-		class?: string | undefined | null;
-		children?: import('svelte').Snippet<[any]>;
-		[key: string]: any
-	}
-
-	let { asChild = false, class: className = undefined, children, ...rest }: Props = $props();
-
-
-	const children_render = $derived(children);
+let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.ItemProps = $props()
 </script>
 
 <CommandPrimitive.Item
-	{asChild}
 	class={cn(
-		'aria-selected:bg-accent aria-selected:text-accent-foreground dark:aria-selected:text-black',
-		"relative flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		className
 	)}
-	{...rest}
-	
-	
->
-	{#snippet children({ action, attrs })}
-		{@render children_render?.({ action, attrs, })}
-	{/snippet}
-</CommandPrimitive.Item>
+	bind:ref
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/command/command-link-item.svelte b/app/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 0000000000..1ff821f295
--- /dev/null
+++ b/app/src/lib/components/ui/command/command-link-item.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Command as CommandPrimitive } from "bits-ui"
+import { cn } from "$lib/utilities/shadcn.js"
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: CommandPrimitive.LinkItemProps = $props()
+</script>
+
+<CommandPrimitive.LinkItem
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/command/command-list.svelte b/app/src/lib/components/ui/command/command-list.svelte
index 810fa7bfda..37af01e0d2 100644
--- a/app/src/lib/components/ui/command/command-list.svelte
+++ b/app/src/lib/components/ui/command/command-list.svelte
@@ -1,21 +1,12 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.ListProps
-	interface Props {
-		class?: string | undefined | null;
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.ListProps = $props()
 </script>
 
 <CommandPrimitive.List
 	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-	{...rest}
->
-	{@render children?.()}
-</CommandPrimitive.List>
+	{...restProps}
+	bind:ref
+/>
diff --git a/app/src/lib/components/ui/command/command-separator.svelte b/app/src/lib/components/ui/command/command-separator.svelte
index 456d2d46a2..ef62ca5401 100644
--- a/app/src/lib/components/ui/command/command-separator.svelte
+++ b/app/src/lib/components/ui/command/command-separator.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.SeparatorProps
-	interface Props {
-		class?: string | undefined | null;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: CommandPrimitive.SeparatorProps = $props()
 </script>
 
-<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...rest} />
+<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />
diff --git a/app/src/lib/components/ui/command/command-shortcut.svelte b/app/src/lib/components/ui/command/command-shortcut.svelte
index 02dc1ff625..3101fd8441 100644
--- a/app/src/lib/components/ui/command/command-shortcut.svelte
+++ b/app/src/lib/components/ui/command/command-shortcut.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLSpanElement>
-
-	interface Props {
-		class?: string | undefined | null;
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props()
 </script>
 
 <span
+	bind:this={ref}
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-	{...rest}
+	{...restProps}
 >
 	{@render children?.()}
 </span>
diff --git a/app/src/lib/components/ui/command/command.svelte b/app/src/lib/components/ui/command/command.svelte
index 56f273174b..cb1118103e 100644
--- a/app/src/lib/components/ui/command/command.svelte
+++ b/app/src/lib/components/ui/command/command.svelte
@@ -1,28 +1,21 @@
 <script lang="ts">
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = CommandPrimitive.CommandProps
-
-
-	interface Props {
-		value?: $$Props["value"];
-		class?: string | undefined | null;
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { value = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  value = $bindable(""),
+  class: className,
+  ...restProps
+}: CommandPrimitive.RootProps = $props()
 </script>
 
 <CommandPrimitive.Root
 	class={cn(
-		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden",
+		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
 		className
 	)}
 	bind:value
-	{...rest}
->
-	{@render children?.()}
-</CommandPrimitive.Root>
+	bind:ref
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/command/index.ts b/app/src/lib/components/ui/command/index.ts
index 99cea9536d..a607b1149d 100644
--- a/app/src/lib/components/ui/command/index.ts
+++ b/app/src/lib/components/ui/command/index.ts
@@ -1,4 +1,4 @@
-import { Command as CommandPrimitive } from "cmdk-sv"
+import { Command as CommandPrimitive } from "bits-ui"
 
 import Root from "./command.svelte"
 import Dialog from "./command-dialog.svelte"
@@ -9,6 +9,7 @@ import Input from "./command-input.svelte"
 import List from "./command-list.svelte"
 import Separator from "./command-separator.svelte"
 import Shortcut from "./command-shortcut.svelte"
+import LinkItem from "./command-link-item.svelte"
 
 const Loading = CommandPrimitive.Loading
 
@@ -18,6 +19,7 @@ export {
   Empty,
   Group,
   Item,
+  LinkItem,
   Input,
   List,
   Separator,
@@ -29,6 +31,7 @@ export {
   Empty as CommandEmpty,
   Group as CommandGroup,
   Item as CommandItem,
+  LinkItem as CommandLinkItem,
   Input as CommandInput,
   List as CommandList,
   Separator as CommandSeparator,
diff --git a/app/src/lib/components/ui/dialog/dialog-content.svelte b/app/src/lib/components/ui/dialog/dialog-content.svelte
index aec1023441..7cdc9fcadd 100644
--- a/app/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,64 +1,36 @@
 <script lang="ts">
-import { Dialog as DialogPrimitive } from "bits-ui"
-import X from "virtual:icons/lucide/x"
+import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui"
+import X from "lucide-svelte/icons/x"
+import type { Snippet } from "svelte"
 import * as Dialog from "./index.js"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = DialogPrimitive.ContentProps
-
-
-
-  interface Props {
-    class?: $$Props["class"];
-    overlayClass?: $$Props["class"];
-    transition?: $$Props["transition"];
-    transitionConfig?: $$Props["transitionConfig"];
-    backdropFilter?: $$Props["style"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let {
-    class: className = undefined,
-    overlayClass = undefined,
-    transition = flyAndScale,
-    transitionConfig = {
-  duration: 200
-},
-    backdropFilter = undefined,
-    children,
-    ...rest
-  }: Props = $props();
-
-
+import { cn } from "$lib/utilities/shadcn.js"
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+  children: Snippet
+} = $props()
 </script>
 
 <Dialog.Portal>
-  <Dialog.Overlay
-    data-dialog-overlay
-    class={cn(overlayClass)}
-    style={`backdrop-filter: ${backdropFilter}`}
-  />
-  <DialogPrimitive.Content
-    {transition}
-    {transitionConfig}
-    data-dialog-content
-    class={cn(
-      "border bg-background shadow-lg",
-      "fixed left-[50%] top-[50%] z-40 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-4 sm: md:w-full",
-      className,
-    )}
-    {...rest}
-  >
-    {@render children?.()}
-    <DialogPrimitive.Close
-      class={cn(
-        "absolute right-3 top-4 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-        "opacity-70 ring-offset-background transition-opacity hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-      )}
-    >
-      <X class="text-white size-4 -mt-0.5" />
-      <span class="sr-only">Close</span>
-    </DialogPrimitive.Close>
-  </DialogPrimitive.Content>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<DialogPrimitive.Close
+			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<X class="size-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
 </Dialog.Portal>
diff --git a/app/src/lib/components/ui/dialog/dialog-description.svelte b/app/src/lib/components/ui/dialog/dialog-description.svelte
index 752cf8a4de..40e6638697 100644
--- a/app/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-description.svelte
@@ -2,21 +2,15 @@
 import { Dialog as DialogPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DialogPrimitive.DescriptionProps
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DialogPrimitive.DescriptionProps = $props()
 </script>
 
 <DialogPrimitive.Description
-  class={cn('text-sm text-muted-foreground', className)}
-  {...rest}
->
-  {@render children?.()}
-</DialogPrimitive.Description>
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dialog/dialog-footer.svelte b/app/src/lib/components/ui/dialog/dialog-footer.svelte
index 744056f3ac..860b3f9f89 100644
--- a/app/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
 <div
-  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-  {...rest}
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/dialog/dialog-header.svelte b/app/src/lib/components/ui/dialog/dialog-header.svelte
index f3b26fdf00..a10a01fe9d 100644
--- a/app/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...rest}>
-  {@render children?.()}
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/dialog/dialog-overlay.svelte b/app/src/lib/components/ui/dialog/dialog-overlay.svelte
index 7e1497ad7c..8415be62df 100644
--- a/app/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -1,34 +1,19 @@
 <script lang="ts">
 import { Dialog as DialogPrimitive } from "bits-ui"
-import { fade } from "svelte/transition"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DialogPrimitive.OverlayProps
-
-  interface Props {
-    class?: $$Props["class"];
-    transition?: $$Props["transition"];
-    transitionConfig?: $$Props["transitionConfig"];
-    backdropFilter?: $$Props["style"];
-    [key: string]: any
-  }
-
-  let {
-    class: className = undefined,
-    transition = fade,
-    transitionConfig = {
-  duration: 150
-},
-    backdropFilter = undefined,
-    ...rest
-  }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DialogPrimitive.OverlayProps = $props()
 </script>
 
 <DialogPrimitive.Overlay
-  {transition}
-  {transitionConfig}
-  style={`backdrop-filter: ${backdropFilter}`}
-  class={cn('fixed inset-0 z-40 bg-muted/60', className)}
-  {...rest}
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/dialog/dialog-portal.svelte b/app/src/lib/components/ui/dialog/dialog-portal.svelte
index becfc3b499..6bde660e51 100644
--- a/app/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 import { Dialog as DialogPrimitive } from "bits-ui"
-	interface Props {
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
+interface Props {
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
-	let { children, ...rest }: Props = $props();
+let { children, ...rest }: Props = $props()
 type $$Props = DialogPrimitive.PortalProps
 </script>
 
diff --git a/app/src/lib/components/ui/dialog/dialog-title.svelte b/app/src/lib/components/ui/dialog/dialog-title.svelte
index cd1a0cbf7e..aeef8e5321 100644
--- a/app/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/app/src/lib/components/ui/dialog/dialog-title.svelte
@@ -2,21 +2,11 @@
 import { Dialog as DialogPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DialogPrimitive.TitleProps
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: DialogPrimitive.TitleProps = $props()
 </script>
 
 <DialogPrimitive.Title
-  class={cn('text-xl uppercase font-bold font-supermolot', className)}
-  {...rest}
->
-  {@render children?.()}
-</DialogPrimitive.Title>
+	bind:ref
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dialog/index.ts b/app/src/lib/components/ui/dialog/index.ts
index 1a1bea950b..2df02a6cae 100644
--- a/app/src/lib/components/ui/dialog/index.ts
+++ b/app/src/lib/components/ui/dialog/index.ts
@@ -1,7 +1,6 @@
 import { Dialog as DialogPrimitive } from "bits-ui"
 
 import Title from "./dialog-title.svelte"
-import Portal from "./dialog-portal.svelte"
 import Footer from "./dialog-footer.svelte"
 import Header from "./dialog-header.svelte"
 import Overlay from "./dialog-overlay.svelte"
@@ -11,6 +10,7 @@ import Description from "./dialog-description.svelte"
 const Root = DialogPrimitive.Root
 const Trigger = DialogPrimitive.Trigger
 const Close = DialogPrimitive.Close
+const Portal = DialogPrimitive.Portal
 
 export {
   Root,
diff --git a/app/src/lib/components/ui/drawer/drawer-content.svelte b/app/src/lib/components/ui/drawer/drawer-content.svelte
index 2b2c0a7723..a036412018 100644
--- a/app/src/lib/components/ui/drawer/drawer-content.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-content.svelte
@@ -3,28 +3,25 @@ import { Drawer as DrawerPrimitive } from "vaul-svelte"
 import DrawerOverlay from "./drawer-overlay.svelte"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DrawerPrimitive.ContentProps
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: DrawerPrimitive.ContentProps = $props()
 </script>
 
 <DrawerPrimitive.Portal>
-  <DrawerOverlay />
-  <DrawerPrimitive.Content
-    class={cn(
-      'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
-      className,
-    )}
-    {...rest}
-  >
-    <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
-    {@render children?.()}
-  </DrawerPrimitive.Content>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+			className
+		)}
+		{...restProps}
+	>
+		<div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+		{@render children?.()}
+	</DrawerPrimitive.Content>
 </DrawerPrimitive.Portal>
diff --git a/app/src/lib/components/ui/drawer/drawer-description.svelte b/app/src/lib/components/ui/drawer/drawer-description.svelte
index 7deb06cfde..607b4748aa 100644
--- a/app/src/lib/components/ui/drawer/drawer-description.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-description.svelte
@@ -2,23 +2,15 @@
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DrawerPrimitive.DescriptionProps
-
-  interface Props {
-    el?: $$Props["el"];
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DrawerPrimitive.DescriptionProps = $props()
 </script>
 
 <DrawerPrimitive.Description
-  bind:el
-  class={cn('text-sm text-muted-foreground', className)}
-  {...rest}
->
-  {@render children?.()}
-</DrawerPrimitive.Description>
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/drawer/drawer-footer.svelte b/app/src/lib/components/ui/drawer/drawer-footer.svelte
index 95de1f698d..4c7a7ed9a7 100644
--- a/app/src/lib/components/ui/drawer/drawer-footer.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -1,22 +1,16 @@
 <script lang="ts">
-import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
+import type { WithElementRef } from "bits-ui"
+import type { HTMLAttributes } from "svelte/elements"
 
-type $$Props = HTMLAttributes<HTMLDivElement> & {
-  el?: HTMLDivElement
-}
-
-  interface Props {
-    el?: $$Props["el"];
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div bind:this={el} class={cn('mt-auto flex flex-col gap-2 p-4', className)} {...rest}>
-  {@render children?.()}
+<div bind:this={ref} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/drawer/drawer-header.svelte b/app/src/lib/components/ui/drawer/drawer-header.svelte
index c40904d54e..55c64f33b4 100644
--- a/app/src/lib/components/ui/drawer/drawer-header.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-header.svelte
@@ -1,25 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement> & {
-  el?: HTMLDivElement
-}
-  interface Props {
-    el?: $$Props["el"];
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
 <div
-  bind:this={el}
-  class={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
-  {...rest}
+	bind:this={ref}
+	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/drawer/drawer-nested.svelte b/app/src/lib/components/ui/drawer/drawer-nested.svelte
index 09301bc34e..df41668f06 100644
--- a/app/src/lib/components/ui/drawer/drawer-nested.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-nested.svelte
@@ -1,24 +1,12 @@
 <script lang="ts">
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 
-type $$Props = DrawerPrimitive.Props
-	interface Props {
-		shouldScaleBackground?: $$Props["shouldScaleBackground"];
-		open?: $$Props["open"];
-		activeSnapPoint?: $$Props["activeSnapPoint"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		shouldScaleBackground = true,
-		open = $bindable(false),
-		activeSnapPoint = $bindable(undefined),
-		children,
-		...rest
-	}: Props = $props();
+let {
+  shouldScaleBackground = true,
+  open = $bindable(false),
+  activeSnapPoint = $bindable(null),
+  ...restProps
+}: DrawerPrimitive.RootProps = $props()
 </script>
 
-<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...rest}>
-	{@render children?.()}
-</DrawerPrimitive.NestedRoot>
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
diff --git a/app/src/lib/components/ui/drawer/drawer-overlay.svelte b/app/src/lib/components/ui/drawer/drawer-overlay.svelte
index 1045868289..ce67e83d37 100644
--- a/app/src/lib/components/ui/drawer/drawer-overlay.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -2,23 +2,15 @@
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DrawerPrimitive.OverlayProps
-
-  interface Props {
-    el?: $$Props["el"];
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DrawerPrimitive.OverlayProps = $props()
 </script>
 
 <DrawerPrimitive.Overlay
-  bind:el
-  class={cn('fixed inset-0 z-50 bg-black/80', className)}
-  {...rest}
->
-  {@render children?.()}
-</DrawerPrimitive.Overlay>
+	bind:ref
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/drawer/drawer-title.svelte b/app/src/lib/components/ui/drawer/drawer-title.svelte
index 00c587191e..fa735e9b92 100644
--- a/app/src/lib/components/ui/drawer/drawer-title.svelte
+++ b/app/src/lib/components/ui/drawer/drawer-title.svelte
@@ -2,23 +2,11 @@
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DrawerPrimitive.TitleProps
-
-  interface Props {
-    el?: $$Props["el"];
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { el = $bindable(undefined), class: className = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: DrawerPrimitive.TitleProps = $props()
 </script>
 
 <DrawerPrimitive.Title
-  bind:el
-  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-  {...rest}
->
-  {@render children?.()}
-</DrawerPrimitive.Title>
+	bind:ref
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/drawer/drawer.svelte b/app/src/lib/components/ui/drawer/drawer.svelte
index d705688166..cfea0ed50e 100644
--- a/app/src/lib/components/ui/drawer/drawer.svelte
+++ b/app/src/lib/components/ui/drawer/drawer.svelte
@@ -1,24 +1,12 @@
 <script lang="ts">
 import { Drawer as DrawerPrimitive } from "vaul-svelte"
 
-type $$Props = DrawerPrimitive.Props
-	interface Props {
-		shouldScaleBackground?: $$Props["shouldScaleBackground"];
-		open?: $$Props["open"];
-		activeSnapPoint?: $$Props["activeSnapPoint"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		shouldScaleBackground = true,
-		open = $bindable(false),
-		activeSnapPoint = $bindable(undefined),
-		children,
-		...rest
-	}: Props = $props();
+let {
+  shouldScaleBackground = true,
+  open = $bindable(false),
+  activeSnapPoint = $bindable(null),
+  ...restProps
+}: DrawerPrimitive.RootProps = $props()
 </script>
 
-<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...rest}>
-	{@render children?.()}
-</DrawerPrimitive.Root>
+<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
diff --git a/app/src/lib/components/ui/drawer/index.ts b/app/src/lib/components/ui/drawer/index.ts
index 18640fa683..3ae3f33efe 100644
--- a/app/src/lib/components/ui/drawer/index.ts
+++ b/app/src/lib/components/ui/drawer/index.ts
@@ -9,9 +9,9 @@ import Header from "./drawer-header.svelte"
 import Title from "./drawer-title.svelte"
 import NestedRoot from "./drawer-nested.svelte"
 
-const Trigger = DrawerPrimitive.Trigger
-const Portal = DrawerPrimitive.Portal
-const Close = DrawerPrimitive.Close
+const Trigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger
+const Portal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal
+const Close: typeof DrawerPrimitive.Close = DrawerPrimitive.Close
 
 export {
   Root,
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 250e986474..5008b8cb90 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,41 +1,40 @@
 <script lang="ts">
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
-import Check from "virtual:icons/lucide/check"
+import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui"
+import Check from "lucide-svelte/icons/check"
+import Minus from "lucide-svelte/icons/minus"
 import { cn } from "$lib/utilities/shadcn.js"
+import type { Snippet } from "svelte"
 
-type $$Props = DropdownMenuPrimitive.CheckboxItemProps
-type $$Events = DropdownMenuPrimitive.CheckboxItemEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		checked?: $$Props["checked"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, checked = $bindable(undefined), children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+  children?: Snippet
+} = $props()
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
+	bind:ref
 	bind:checked
+	bind:indeterminate
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
-	{...rest}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</DropdownMenuPrimitive.CheckboxIndicator>
-	</span>
-	{@render children?.()}
+	{#snippet children({ checked, indeterminate })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-4" />
+			{:else}
+				<Check class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 8de883d7d7..f96ac94628 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,40 +1,21 @@
 <script lang="ts">
+import { cn } from "$lib/utilities/shadcn.js"
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = DropdownMenuPrimitive.ContentProps
-type $$Events = DropdownMenuPrimitive.ContentEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		sideOffset?: $$Props["sideOffset"];
-		transition?: $$Props["transition"];
-		transitionConfig?: $$Props["transitionConfig"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		sideOffset = 4,
-		transition = flyAndScale,
-		transitionConfig = undefined,
-		children,
-		...rest
-	}: Props = $props();
 
+let {
+  ref = $bindable(null),
+  sideOffset = 4,
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.ContentProps = $props()
 </script>
 
 <DropdownMenuPrimitive.Content
-	{transition}
-	{transitionConfig}
+	bind:ref
 	{sideOffset}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
 		className
 	)}
-	{...rest}
-	on:keydown
->
-	{@render children?.()}
-</DropdownMenuPrimitive.Content>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000000..384375c081
--- /dev/null
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
+import { cn } from "$lib/utilities/shadcn.js"
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  ...restProps
+}: DropdownMenuPrimitive.GroupHeadingProps & {
+  inset?: boolean
+} = $props()
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 336caad736..39a48c0cf2 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,37 +1,23 @@
 <script lang="ts">
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
 
-type $$Props = DropdownMenuPrimitive.ItemProps & {
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  ...restProps
+}: DropdownMenuPrimitive.ItemProps & {
   inset?: boolean
-}
-type $$Events = DropdownMenuPrimitive.ItemEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		inset?: $$Props["inset"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
-
+} = $props()
 </script>
 
 <DropdownMenuPrimitive.Item
+	bind:ref
 	class={cn(
-		"text-primary relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground dark:data-[highlighted]:text-black data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}
-	{...rest}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	{@render children?.()}
-</DropdownMenuPrimitive.Item>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index ad43e2072b..8285bf1c55 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
+import { type WithElementRef } from "bits-ui"
+import type { HTMLAttributes } from "svelte/elements"
 
-type $$Props = DropdownMenuPrimitive.LabelProps & {
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
   inset?: boolean
-}
-
-	interface Props {
-		class?: $$Props["class"];
-		inset?: $$Props["inset"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
-
+} = $props()
 </script>
 
-<DropdownMenuPrimitive.Label
+<div
+	bind:this={ref}
 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...rest}
+	{...restProps}
 >
 	{@render children?.()}
-</DropdownMenuPrimitive.Label>
+</div>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
index 799d0f9e09..2011a8102b 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -3,13 +3,13 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
 
 type $$Props = DropdownMenuPrimitive.RadioGroupProps
 
-	interface Props {
-		value?: $$Props["value"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
+interface Props {
+  value?: $$Props["value"]
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
-	let { value = $bindable(undefined), children, ...rest }: Props = $props();
+let { value = $bindable(undefined), children, ...rest }: Props = $props()
 </script>
 
 <DropdownMenuPrimitive.RadioGroup {...rest} bind:value>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 29f8b6ca5a..cd7485a16d 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,41 +1,30 @@
 <script lang="ts">
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
-import Circle from "virtual:icons/lucide/circle"
+import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui"
+import Circle from "lucide-svelte/icons/circle"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DropdownMenuPrimitive.RadioItemProps
-type $$Events = DropdownMenuPrimitive.RadioItemEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		value: $$Props["value"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, value, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props()
 </script>
 
 <DropdownMenuPrimitive.RadioItem
+	bind:ref
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
-	{value}
-	{...rest}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.RadioIndicator>
-			<Circle class="h-2 w-2 fill-current" />
-		</DropdownMenuPrimitive.RadioIndicator>
-	</span>
-	{@render children?.()}
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
 </DropdownMenuPrimitive.RadioItem>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 0b8bec8abd..7e4716cebc 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -2,18 +2,15 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DropdownMenuPrimitive.SeparatorProps
-
-	interface Props {
-		class?: $$Props["class"];
-		[key: string]: any
-	}
-
-	let { class: className = undefined, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SeparatorProps = $props()
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
-	{...rest}
+	bind:ref
+	class={cn("bg-muted -mx-1 my-1 h-px", className)}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index b5e1fb20ed..b342b77109 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import { type WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLSpanElement>
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props()
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...rest}>
+<span
+	bind:this={ref}
+	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </span>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 10f4ed9814..2ca8d52d77 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,42 +1,19 @@
 <script lang="ts">
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = DropdownMenuPrimitive.SubContentProps
-type $$Events = DropdownMenuPrimitive.SubContentEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		transition?: $$Props["transition"];
-		transitionConfig?: $$Props["transitionConfig"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		transition = flyAndScale,
-		transitionConfig = {
-  x: -10,
-  y: 0
-},
-		children,
-		...rest
-	}: Props = $props();
+import { cn } from "$lib/utilities/shadcn.js"
 
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SubContentProps = $props()
 </script>
 
 <DropdownMenuPrimitive.SubContent
-	{transition}
-	{transitionConfig}
+	bind:ref
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
 		className
 	)}
-	{...rest}
-	on:keydown
-	on:focusout
-	on:pointermove
->
-	{@render children?.()}
-</DropdownMenuPrimitive.SubContent>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 164093f912..0ef4680784 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,38 +1,28 @@
 <script lang="ts">
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
-import ChevronRight from "virtual:icons/lucide/chevron-right"
+import ChevronRight from "lucide-svelte/icons/chevron-right"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: DropdownMenuPrimitive.SubTriggerProps & {
   inset?: boolean
-}
-type $$Events = DropdownMenuPrimitive.SubTriggerEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		inset?: $$Props["inset"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
-
+} = $props()
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
+	bind:ref
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		inset && "pl-8",
 		className
 	)}
-	{...rest}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto h-4 w-4" />
+	<ChevronRight class="ml-auto" />
 </DropdownMenuPrimitive.SubTrigger>
diff --git a/app/src/lib/components/ui/dropdown-menu/index.ts b/app/src/lib/components/ui/dropdown-menu/index.ts
index a247879d22..993c18cf68 100644
--- a/app/src/lib/components/ui/dropdown-menu/index.ts
+++ b/app/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,48 +1,50 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"
+import Content from "./dropdown-menu-content.svelte"
+import GroupHeading from "./dropdown-menu-group-heading.svelte"
 import Item from "./dropdown-menu-item.svelte"
 import Label from "./dropdown-menu-label.svelte"
-import Content from "./dropdown-menu-content.svelte"
-import Shortcut from "./dropdown-menu-shortcut.svelte"
 import RadioItem from "./dropdown-menu-radio-item.svelte"
 import Separator from "./dropdown-menu-separator.svelte"
-import RadioGroup from "./dropdown-menu-radio-group.svelte"
+import Shortcut from "./dropdown-menu-shortcut.svelte"
 import SubContent from "./dropdown-menu-sub-content.svelte"
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte"
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"
 
 const Sub = DropdownMenuPrimitive.Sub
 const Root = DropdownMenuPrimitive.Root
 const Trigger = DropdownMenuPrimitive.Trigger
 const Group = DropdownMenuPrimitive.Group
+const RadioGroup = DropdownMenuPrimitive.RadioGroup
 
 export {
-  Sub,
-  Root,
-  Item,
-  Label,
-  Group,
-  Trigger,
-  Content,
-  Shortcut,
-  Separator,
-  RadioItem,
-  SubContent,
-  SubTrigger,
-  RadioGroup,
   CheckboxItem,
-  //
+  Content,
   Root as DropdownMenu,
-  Sub as DropdownMenuSub,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Group as DropdownMenuGroup,
+  GroupHeading as DropdownMenuGroupHeading,
   Item as DropdownMenuItem,
   Label as DropdownMenuLabel,
-  Group as DropdownMenuGroup,
-  Content as DropdownMenuContent,
-  Trigger as DropdownMenuTrigger,
-  Shortcut as DropdownMenuShortcut,
+  RadioGroup as DropdownMenuRadioGroup,
   RadioItem as DropdownMenuRadioItem,
   Separator as DropdownMenuSeparator,
-  RadioGroup as DropdownMenuRadioGroup,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
   SubContent as DropdownMenuSubContent,
   SubTrigger as DropdownMenuSubTrigger,
-  CheckboxItem as DropdownMenuCheckboxItem
+  Trigger as DropdownMenuTrigger,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger
 }
diff --git a/app/src/lib/components/ui/input/index.ts b/app/src/lib/components/ui/input/index.ts
index de18038646..3dcc679d9e 100644
--- a/app/src/lib/components/ui/input/index.ts
+++ b/app/src/lib/components/ui/input/index.ts
@@ -1,27 +1,5 @@
 import Root from "./input.svelte"
 
-export type FormInputEvent<T extends Event = Event> = T & {
-  currentTarget: EventTarget & HTMLInputElement
-}
-export type InputEvents = {
-  blur: FormInputEvent<FocusEvent>
-  change: FormInputEvent<Event>
-  click: FormInputEvent<MouseEvent>
-  focus: FormInputEvent<FocusEvent>
-  focusin: FormInputEvent<FocusEvent>
-  focusout: FormInputEvent<FocusEvent>
-  keydown: FormInputEvent<KeyboardEvent>
-  keypress: FormInputEvent<KeyboardEvent>
-  keyup: FormInputEvent<KeyboardEvent>
-  mouseover: FormInputEvent<MouseEvent>
-  mouseenter: FormInputEvent<MouseEvent>
-  mouseleave: FormInputEvent<MouseEvent>
-  mousemove: FormInputEvent<MouseEvent>
-  paste: FormInputEvent<ClipboardEvent>
-  input: FormInputEvent<InputEvent>
-  wheel: FormInputEvent<WheelEvent>
-}
-
 export {
   Root,
   //
diff --git a/app/src/lib/components/ui/input/input.svelte b/app/src/lib/components/ui/input/input.svelte
index f4fe1cf7ae..7a135a07aa 100644
--- a/app/src/lib/components/ui/input/input.svelte
+++ b/app/src/lib/components/ui/input/input.svelte
@@ -1,51 +1,22 @@
 <script lang="ts">
-  import { createBubbler, passive } from 'svelte/legacy';
-
-  const bubble = createBubbler();
 import type { HTMLInputAttributes } from "svelte/elements"
-import type { InputEvents } from "./index.js"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLInputAttributes
-type $$Events = InputEvents
-
-
-
-// Workaround for https://github.com/sveltejs/svelte/issues/9305
-
-  interface Props {
-    class?: $$Props["class"];
-    value?: $$Props["value"];
-    // Fixed in Svelte 5, but not backported to 4.x.
-    readonly?: $$Props["readonly"];
-    [key: string]: any
-  }
-
-  let { class: className = undefined, value = $bindable(undefined), readonly = undefined, ...rest }: Props = $props();
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  class: className,
+  ...restProps
+}: WithElementRef<HTMLInputAttributes> = $props()
 </script>
 
 <input
-  class={cn(
-    'flex h-10 w-full border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-    className,
-  )}
-  bind:value
-  {readonly}
-  onblur={bubble('blur')}
-  onchange={bubble('change')}
-  onclick={bubble('click')}
-  onfocus={bubble('focus')}
-  onfocusin={bubble('focusin')}
-  onfocusout={bubble('focusout')}
-  onkeydown={bubble('keydown')}
-  onkeypress={bubble('keypress')}
-  onkeyup={bubble('keyup')}
-  onmouseover={bubble('mouseover')}
-  onmousemove={bubble('mousemove')}
-  onmouseenter={bubble('mouseenter')}
-  onmouseleave={bubble('mouseleave')}
-  onpaste={bubble('paste')}
-  oninput={bubble('input')}
-  use:passive={['wheel', () => bubble('wheel')]}
-  {...rest}
+	bind:this={ref}
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/label/label.svelte b/app/src/lib/components/ui/label/label.svelte
index 6ac8ddd5c7..3e82dcd444 100644
--- a/app/src/lib/components/ui/label/label.svelte
+++ b/app/src/lib/components/ui/label/label.svelte
@@ -2,26 +2,14 @@
 import { Label as LabelPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = LabelPrimitive.Props
-type $$Events = LabelPrimitive.Events
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: LabelPrimitive.RootProps = $props()
 </script>
 
 <LabelPrimitive.Root
-  class={cn(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-    className,
-  )}
-  {...rest}
-  on:mousedown
->
-  {@render children?.()}
-</LabelPrimitive.Root>
+	bind:ref
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/pagination/pagination-content.svelte b/app/src/lib/components/ui/pagination/pagination-content.svelte
index f8b33db6b5..814a92475f 100644
--- a/app/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-content.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLUListElement>
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props()
 </script>
 
-<ul class={cn("flex flex-row items-center gap-1", className)} {...rest}>
+<ul bind:this={ref} class={cn("flex flex-row items-center gap-1", className)} {...restProps}>
 	{@render children?.()}
 </ul>
diff --git a/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index 4dc1300c25..1f10d2e35b 100644
--- a/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,24 +1,22 @@
 <script lang="ts">
-import Ellipsis from "virtual:icons/lucide/ellipsis"
+import Ellipsis from "lucide-svelte/icons/ellipsis"
+import type { WithElementRef, WithoutChildren } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLSpanElement>
-
-	interface Props {
-		class?: $$Props["class"];
-		[key: string]: any
-	}
-
-	let { class: className = undefined, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props()
 </script>
 
 <span
-	aria-hidden
-	class={cn("flex h-9 w-9 items-center justify-center", className)}
-	{...rest}
+	bind:this={ref}
+	aria-hidden="true"
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
 >
-	<Ellipsis class="h-4 w-4" />
+	<Ellipsis class="size-4" />
 	<span class="sr-only">More pages</span>
 </span>
diff --git a/app/src/lib/components/ui/pagination/pagination-item.svelte b/app/src/lib/components/ui/pagination/pagination-item.svelte
index 8282eb7c80..f4b5130cfd 100644
--- a/app/src/lib/components/ui/pagination/pagination-item.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-item.svelte
@@ -1,22 +1,10 @@
 <script lang="ts">
-import type { HTMLAttributes } from "svelte/elements"
-import { cn } from "$lib/utilities/shadcn.js"
-
-type $$Props = HTMLAttributes<HTMLLIElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+import type { HTMLLiAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 
+let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props()
 </script>
 
-<li 
-class={cn("", className)} {...rest}
->
-  {@render children?.()}
+<li bind:this={ref} {...restProps}>
+	{@render children?.()}
 </li>
diff --git a/app/src/lib/components/ui/pagination/pagination-link.svelte b/app/src/lib/components/ui/pagination/pagination-link.svelte
index 76d09961d6..12b945f38a 100644
--- a/app/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-link.svelte
@@ -3,36 +3,27 @@ import { Pagination as PaginationPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 import { type Props, buttonVariants } from "$lib/components/ui/button/index.js"
 
-type $$Props = PaginationPrimitive.PageProps &
+let {
+  ref = $bindable(null),
+  class: className,
+  size = "icon",
+  isActive = false,
+  page,
+  children,
+  ...restProps
+}: PaginationPrimitive.PageProps &
   Props & {
     isActive: boolean
-  }
-
-type $$Events = PaginationPrimitive.PageEvents
-
-	interface Props_1 {
-		class?: $$Props["class"];
-		page: $$Props["page"];
-		size?: $$Props["size"];
-		isActive?: $$Props["isActive"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		page = $bindable(),
-		size = "icon",
-		isActive = false,
-		children,
-		...rest
-	}: Props_1 = $props();
-
-
+  } = $props()
 </script>
 
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
 <PaginationPrimitive.Page
-	bind:page
+	bind:ref
+	{page}
 	class={cn(
 		buttonVariants({
 			variant: isActive ? "outline" : "ghost",
@@ -40,8 +31,6 @@ type $$Events = PaginationPrimitive.PageEvents
 		}),
 		className
 	)}
-	{...rest}
-	on:click
->
-	{#if children}{@render children()}{:else}{page.value}{/if}
-</PaginationPrimitive.Page>
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/pagination/pagination-next-button.svelte b/app/src/lib/components/ui/pagination/pagination-next-button.svelte
index 9332179bb0..658043239f 100644
--- a/app/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,37 +1,31 @@
 <script lang="ts">
 import { Pagination as PaginationPrimitive } from "bits-ui"
-import ChevronRight from "virtual:icons/lucide/chevron-right"
-import { Button } from "$lib/components/ui/button/index.js"
+import ChevronRight from "lucide-svelte/icons/chevron-right"
+import { buttonVariants } from "$lib/components/ui/button/index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = PaginationPrimitive.NextButtonProps
-type $$Events = PaginationPrimitive.NextButtonEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
-
-	const children_render = $derived(children);
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: PaginationPrimitive.NextButtonProps = $props()
 </script>
 
-<PaginationPrimitive.NextButton asChild >
-	{#snippet children({ builder })}
-		<Button
-			variant="ghost"
-			class={cn("gap-1 pr-2.5", className)}
-			builders={[builder]}
-			on:click
-			{...rest}
-		>
-			{#if children_render}{@render children_render()}{:else}
-				<span>Next</span>
-				<ChevronRight class="h-4 w-4" />
-			{/if}
-		</Button>
-	{/snippet}
-</PaginationPrimitive.NextButton>
+{#snippet Fallback()}
+	<span>Next</span>
+	<ChevronRight class="size-4" />
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({
+			variant: "ghost",
+			class: "gap-1 pr-2.5",
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/pagination/pagination-prev-button.svelte b/app/src/lib/components/ui/pagination/pagination-prev-button.svelte
index 916e1323f1..545b6f7673 100644
--- a/app/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/app/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,37 +1,31 @@
 <script lang="ts">
 import { Pagination as PaginationPrimitive } from "bits-ui"
-import ChevronLeft from "virtual:icons/lucide/chevron-left"
-import { Button } from "$lib/components/ui/button/index.js"
+import ChevronLeft from "lucide-svelte/icons/chevron-left"
+import { buttonVariants } from "$lib/components/ui/button/index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = PaginationPrimitive.PrevButtonProps
-type $$Events = PaginationPrimitive.PrevButtonEvents
-
-	interface Props {
-		class?: $$Props["class"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let { class: className = undefined, children, ...rest }: Props = $props();
-
-
-	const children_render = $derived(children);
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: PaginationPrimitive.PrevButtonProps = $props()
 </script>
 
-<PaginationPrimitive.PrevButton asChild >
-	{#snippet children({ builder })}
-		<Button
-			variant="ghost"
-			class={cn("gap-1 pl-2.5", className)}
-			builders={[builder]}
-			on:click
-			{...rest}
-		>
-			{#if children_render}{@render children_render()}{:else}
-				<ChevronLeft class="h-4 w-4" />
-				<span>Previous</span>
-			{/if}
-		</Button>
-	{/snippet}
-</PaginationPrimitive.PrevButton>
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({
+			variant: "ghost",
+			class: "gap-1 pl-2.5",
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/pagination/pagination.svelte b/app/src/lib/components/ui/pagination/pagination.svelte
index c668128d26..64e8c17a25 100644
--- a/app/src/lib/components/ui/pagination/pagination.svelte
+++ b/app/src/lib/components/ui/pagination/pagination.svelte
@@ -3,49 +3,23 @@ import { Pagination as PaginationPrimitive } from "bits-ui"
 
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = PaginationPrimitive.Props
-type $$Events = PaginationPrimitive.Events
-
-	interface Props {
-		class?: $$Props["class"];
-		count?: $$Props["count"];
-		perPage?: $$Props["perPage"];
-		page?: $$Props["page"];
-		siblingCount?: $$Props["siblingCount"];
-		children?: import('svelte').Snippet<[any]>;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		count = 0,
-		perPage = 10,
-		page = $bindable(1),
-		siblingCount = 1,
-		children,
-		...rest
-	}: Props = $props();
-
-
-let currentPage = $derived(page)
-
-	const children_render = $derived(children);
+let {
+  ref = $bindable(null),
+  class: className,
+  count = 0,
+  perPage = 10,
+  page = $bindable(1),
+  siblingCount = 1,
+  ...restProps
+}: PaginationPrimitive.RootProps = $props()
 </script>
 
 <PaginationPrimitive.Root
+	bind:ref
+	class={cn("mx-auto flex w-full flex-col items-center", className)}
 	{count}
 	{perPage}
 	{siblingCount}
 	bind:page
-	
-	
-	
-	asChild
-	{...rest}
->
-	{#snippet children({ builder, pages, range })}
-		<nav {...builder} class={cn("flex w-full flex-col items-center", className)}>
-			{@render children_render?.({ pages, range, currentPage, })}
-		</nav>
-	{/snippet}
-</PaginationPrimitive.Root>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/popover/popover-content.svelte b/app/src/lib/components/ui/popover/popover-content.svelte
index 652f1a4718..7edce71e33 100644
--- a/app/src/lib/components/ui/popover/popover-content.svelte
+++ b/app/src/lib/components/ui/popover/popover-content.svelte
@@ -1,34 +1,25 @@
 <script lang="ts">
+import { cn } from "$lib/utilities/shadcn.js"
 import { Popover as PopoverPrimitive } from "bits-ui"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = PopoverPrimitive.ContentProps
-  interface Props {
-    class?: $$Props["class"];
-    transition?: $$Props["transition"];
-    transitionConfig?: $$Props["transitionConfig"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let {
-    class: className = undefined,
-    transition = flyAndScale,
-    transitionConfig = undefined,
-    children,
-    ...rest
-  }: Props = $props();
 
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  align = "center",
+  ...restProps
+}: PopoverPrimitive.ContentProps = $props()
 </script>
 
-<PopoverPrimitive.Content
-  {transition}
-  {transitionConfig}
-  class={cn(
-    'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
-    className,
-  )}
-  {...rest}
->
-  {@render children?.()}
-</PopoverPrimitive.Content>
+<PopoverPrimitive.Portal>
+	<PopoverPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>
diff --git a/app/src/lib/components/ui/resizable/resizable-handle.svelte b/app/src/lib/components/ui/resizable/resizable-handle.svelte
index 7eec8e60df..2aad7d7946 100644
--- a/app/src/lib/components/ui/resizable/resizable-handle.svelte
+++ b/app/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -1,32 +1,30 @@
 <script lang="ts">
-import GripVertical from "virtual:icons/lucide/grip-vertical"
+import GripVertical from "lucide-svelte/icons/grip-vertical"
 import * as ResizablePrimitive from "paneforge"
+import type { WithoutChildrenOrChild } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = ResizablePrimitive.PaneResizerProps & {
+let {
+  ref = $bindable(null),
+  class: className,
+  withHandle = false,
+  ...restProps
+}: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
   withHandle?: boolean
-}
-
-	interface Props {
-		withHandle?: $$Props["withHandle"];
-		el?: $$Props["el"];
-		class?: $$Props["class"];
-	}
-
-	let { withHandle = false, el = $bindable(undefined), class: className = undefined }: Props = $props();
-
+} = $props()
 </script>
 
 <ResizablePrimitive.PaneResizer
-	bind:el
+	bind:ref
 	class={cn(
 		"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
+	{...restProps}
 >
 	{#if withHandle}
 		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
-			<GripVertical class="h-2.5 w-2.5" />
+			<GripVertical class="size-2.5" />
 		</div>
 	{/if}
 </ResizablePrimitive.PaneResizer>
diff --git a/app/src/lib/components/ui/resizable/resizable-pane-group.svelte b/app/src/lib/components/ui/resizable/resizable-pane-group.svelte
index 6bdca9e6e7..85eaab0a84 100644
--- a/app/src/lib/components/ui/resizable/resizable-pane-group.svelte
+++ b/app/src/lib/components/ui/resizable/resizable-pane-group.svelte
@@ -2,34 +2,18 @@
 import * as ResizablePrimitive from "paneforge"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = ResizablePrimitive.PaneGroupProps
-
-	interface Props {
-		class?: $$Props["class"];
-		direction: $$Props["direction"];
-		paneGroup?: $$Props["paneGroup"];
-		el?: $$Props["el"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		direction,
-		paneGroup = $bindable(undefined),
-		el = $bindable(undefined),
-		children,
-		...rest
-	}: Props = $props();
-
+let {
+  ref = $bindable(null),
+  this: paneGroup = $bindable(),
+  class: className,
+  ...restProps
+}: ResizablePrimitive.PaneGroupProps & {
+  this?: ResizablePrimitive.PaneGroup
+} = $props()
 </script>
 
 <ResizablePrimitive.PaneGroup
-	bind:el
-	bind:paneGroup
-	{direction}
+	bind:this={paneGroup}
 	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
-	{...rest}
->
-	{@render children?.()}
-</ResizablePrimitive.PaneGroup>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index d6ed36c042..b9dffbeaa8 100644
--- a/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/app/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
-import { ScrollArea as ScrollAreaPrimitive } from "bits-ui"
+import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-  orientation?: "vertical" | "horizontal"
-}
-
-	interface Props {
-		class?: $$Props["class"];
-		orientation?: $$Props["orientation"];
-		children?: import('svelte').Snippet;
-	}
-
-	let { class: className = undefined, orientation = "vertical", children }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  orientation = "vertical",
+  children,
+  ...restProps
+}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props()
 </script>
 
 <ScrollAreaPrimitive.Scrollbar
+	bind:ref
 	{orientation}
 	class={cn(
 		"flex touch-none select-none transition-colors",
@@ -24,6 +20,7 @@ type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
 		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
 		className
 	)}
+	{...restProps}
 >
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
diff --git a/app/src/lib/components/ui/scroll-area/scroll-area.svelte b/app/src/lib/components/ui/scroll-area/scroll-area.svelte
index f44635bc9b..0a8f437801 100644
--- a/app/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/app/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -1,39 +1,26 @@
 <script lang="ts">
-import { ScrollArea as ScrollAreaPrimitive } from "bits-ui"
+import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui"
 import { Scrollbar } from "./index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = ScrollAreaPrimitive.Props & {
-  orientation?: "vertical" | "horizontal" | "both"
-  scrollbarXClasses?: string
-  scrollbarYClasses?: string
-}
-
-
-	interface Props {
-		class?: $$Props["class"];
-		orientation?: string;
-		scrollbarXClasses?: string;
-		scrollbarYClasses?: string;
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		orientation = "vertical",
-		scrollbarXClasses = "",
-		scrollbarYClasses = "",
-		children,
-		...rest
-	}: Props = $props();
+let {
+  ref = $bindable(null),
+  class: className,
+  orientation = "vertical",
+  scrollbarXClasses = "",
+  scrollbarYClasses = "",
+  children,
+  ...restProps
+}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+  orientation?: "vertical" | "horizontal" | "both" | undefined
+  scrollbarXClasses?: string | undefined
+  scrollbarYClasses?: string | undefined
+} = $props()
 </script>
 
-<ScrollAreaPrimitive.Root {...rest} class={cn("relative overflow-hidden", className)}>
+<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
-		<ScrollAreaPrimitive.Content>
-			{@render children?.()}
-		</ScrollAreaPrimitive.Content>
+		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}
 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
diff --git a/app/src/lib/components/ui/select/index.ts b/app/src/lib/components/ui/select/index.ts
index a21f2fb064..2fec86ceff 100644
--- a/app/src/lib/components/ui/select/index.ts
+++ b/app/src/lib/components/ui/select/index.ts
@@ -1,34 +1,34 @@
 import { Select as SelectPrimitive } from "bits-ui"
 
-import Label from "./select-label.svelte"
+import GroupHeading from "./select-group-heading.svelte"
 import Item from "./select-item.svelte"
 import Content from "./select-content.svelte"
 import Trigger from "./select-trigger.svelte"
 import Separator from "./select-separator.svelte"
+import ScrollDownButton from "./select-scroll-down-button.svelte"
+import ScrollUpButton from "./select-scroll-up-button.svelte"
 
 const Root = SelectPrimitive.Root
 const Group = SelectPrimitive.Group
-const Input = SelectPrimitive.Input
-const Value = SelectPrimitive.Value
 
 export {
   Root,
   Group,
-  Input,
-  Label,
+  GroupHeading,
   Item,
-  Value,
   Content,
   Trigger,
   Separator,
+  ScrollDownButton,
+  ScrollUpButton,
   //
   Root as Select,
   Group as SelectGroup,
-  Input as SelectInput,
-  Label as SelectLabel,
+  GroupHeading as SelectGroupHeading,
   Item as SelectItem,
-  Value as SelectValue,
   Content as SelectContent,
   Trigger as SelectTrigger,
-  Separator as SelectSeparator
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton
 }
diff --git a/app/src/lib/components/ui/select/select-content.svelte b/app/src/lib/components/ui/select/select-content.svelte
index f7a94cf4f7..ecc96564d0 100644
--- a/app/src/lib/components/ui/select/select-content.svelte
+++ b/app/src/lib/components/ui/select/select-content.svelte
@@ -1,54 +1,36 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui"
-import { scale } from "svelte/transition"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = SelectPrimitive.ContentProps
-type $$Events = SelectPrimitive.ContentEvents
-
-
-  interface Props {
-    sideOffset?: $$Props["sideOffset"];
-    inTransition?: $$Props["inTransition"];
-    inTransitionConfig?: $$Props["inTransitionConfig"];
-    outTransition?: $$Props["outTransition"];
-    outTransitionConfig?: $$Props["outTransitionConfig"];
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let {
-    sideOffset = 4,
-    inTransition = flyAndScale,
-    inTransitionConfig = undefined,
-    outTransition = scale,
-    outTransitionConfig = {
-  start: 0.95,
-  opacity: 0,
-  duration: 50
-},
-    class: className = undefined,
-    children,
-    ...rest
-  }: Props = $props();
+import { Select as SelectPrimitive, type WithoutChild } from "bits-ui"
+import SelectScrollUpButton from "./select-scroll-up-button.svelte"
+import SelectScrollDownButton from "./select-scroll-down-button.svelte"
+import { cn } from "$lib/utilities/shadcn.js"
 
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  children,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ContentProps> = $props()
 </script>
 
-<SelectPrimitive.Content
-  {inTransition}
-  {inTransitionConfig}
-  {outTransition}
-  {outTransitionConfig}
-  {sideOffset}
-  class={cn(
-    'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
-    className,
-  )}
-  {...rest}
-  on:keydown
->
-  <div class="w-full p-1">
-    {@render children?.()}
-  </div>
-</SelectPrimitive.Content>
+<SelectPrimitive.Portal>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
diff --git a/app/src/lib/components/ui/select/select-group-heading.svelte b/app/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000000..5b8692b62c
--- /dev/null
+++ b/app/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui"
+import { cn } from "$lib/utilities/shadcn.js"
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SelectPrimitive.GroupHeadingProps = $props()
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/select/select-item.svelte b/app/src/lib/components/ui/select/select-item.svelte
index 381dc1eb23..7f6116b76d 100644
--- a/app/src/lib/components/ui/select/select-item.svelte
+++ b/app/src/lib/components/ui/select/select-item.svelte
@@ -1,53 +1,37 @@
 <script lang="ts">
-import Check from "virtual:icons/lucide/check"
-import { Select as SelectPrimitive } from "bits-ui"
+import Check from "lucide-svelte/icons/check"
+import { Select as SelectPrimitive, type WithoutChild } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SelectPrimitive.ItemProps
-type $$Events = SelectPrimitive.ItemEvents
-
-  interface Props {
-    class?: $$Props["class"];
-    value: $$Props["value"];
-    label?: $$Props["label"];
-    disabled?: $$Props["disabled"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let {
-    class: className = undefined,
-    value,
-    label = undefined,
-    disabled = undefined,
-    children,
-    ...rest
-  }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  value,
+  label,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ItemProps> = $props()
 </script>
 
 <SelectPrimitive.Item
-  {value}
-  {disabled}
-  {label}
-  class={cn(
-    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
-    className,
-  )}
-  {...rest}
-  on:click
-  on:keydown
-  on:focusin
-  on:focusout
-  on:pointerleave
-  on:pointermove
+	bind:ref
+	{value}
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...restProps}
 >
-  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    <SelectPrimitive.ItemIndicator>
-      <Check class="h-4 w-4" />
-    </SelectPrimitive.ItemIndicator>
-  </span>
-  {#if children}{@render children()}{:else}
-    {label || value}
-  {/if}
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<Check class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
 </SelectPrimitive.Item>
diff --git a/app/src/lib/components/ui/select/select-label.svelte b/app/src/lib/components/ui/select/select-label.svelte
index 42d1bc96f3..07fa7644bd 100644
--- a/app/src/lib/components/ui/select/select-label.svelte
+++ b/app/src/lib/components/ui/select/select-label.svelte
@@ -4,14 +4,13 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SelectPrimitive.LabelProps
 
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
+interface Props {
+  class?: $$Props["class"]
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
+let { class: className = undefined, children, ...rest }: Props = $props()
 </script>
 
 <SelectPrimitive.Label
diff --git a/app/src/lib/components/ui/select/select-scroll-down-button.svelte b/app/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000000..39d6f57984
--- /dev/null
+++ b/app/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import ChevronDown from "lucide-svelte/icons/chevron-down"
+import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui"
+import { cn } from "$lib/utilities/shadcn.js"
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props()
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDown class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/app/src/lib/components/ui/select/select-scroll-up-button.svelte b/app/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000000..b494230326
--- /dev/null
+++ b/app/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import ChevronUp from "lucide-svelte/icons/chevron-up"
+import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui"
+import { cn } from "$lib/utilities/shadcn.js"
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props()
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUp class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/app/src/lib/components/ui/select/select-separator.svelte b/app/src/lib/components/ui/select/select-separator.svelte
index f073f024dc..7dd342e02b 100644
--- a/app/src/lib/components/ui/select/select-separator.svelte
+++ b/app/src/lib/components/ui/select/select-separator.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui"
+import type { Separator as SeparatorPrimitive } from "bits-ui"
+import { Separator } from "$lib/components/ui/separator/index.js"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SelectPrimitive.SeparatorProps
-
-	interface Props {
-		class?: $$Props["class"];
-		[key: string]: any
-	}
-
-	let { class: className = undefined, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SeparatorPrimitive.RootProps = $props()
 </script>
 
-<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...rest} />
+<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
diff --git a/app/src/lib/components/ui/select/select-trigger.svelte b/app/src/lib/components/ui/select/select-trigger.svelte
index a1b8cb1d18..8474ce17b1 100644
--- a/app/src/lib/components/ui/select/select-trigger.svelte
+++ b/app/src/lib/components/ui/select/select-trigger.svelte
@@ -1,37 +1,24 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui"
-import ChevronDown from "virtual:icons/lucide/chevron-down"
+import { Select as SelectPrimitive, type WithoutChild } from "bits-ui"
+import ChevronDown from "lucide-svelte/icons/chevron-down"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SelectPrimitive.TriggerProps
-type $$Events = SelectPrimitive.TriggerEvents
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet<[any]>;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
-
-  const children_render = $derived(children);
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithoutChild<SelectPrimitive.TriggerProps> = $props()
 </script>
 
 <SelectPrimitive.Trigger
-  class={cn(
-    'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-    className,
-  )}
-  {...rest}
-  
-  on:click
-  on:keydown
+	bind:ref
+	class={cn(
+		"border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...restProps}
 >
-  {#snippet children({ builder })}
-    {@render children_render?.({ builder, })}
-    <div>
-      <ChevronDown class="h-4 w-4 opacity-50" />
-    </div>
-  {/snippet}
+	{@render children?.()}
+	<ChevronDown class="size-4 opacity-50" />
 </SelectPrimitive.Trigger>
diff --git a/app/src/lib/components/ui/separator/separator.svelte b/app/src/lib/components/ui/separator/separator.svelte
index 969e7b16d5..26f9b9584c 100644
--- a/app/src/lib/components/ui/separator/separator.svelte
+++ b/app/src/lib/components/ui/separator/separator.svelte
@@ -2,26 +2,21 @@
 import { Separator as SeparatorPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SeparatorPrimitive.Props
-
-  interface Props {
-    class?: $$Props["class"];
-    orientation?: $$Props["orientation"];
-    decorative?: $$Props["decorative"];
-    [key: string]: any
-  }
-
-  let { class: className = undefined, orientation = "horizontal", decorative = undefined, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  orientation = "horizontal",
+  ...restProps
+}: SeparatorPrimitive.RootProps = $props()
 </script>
 
 <SeparatorPrimitive.Root
-  class={cn(
-    'shrink-0 bg-border',
-    orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-    className,
-  )}
-  {orientation}
-  {decorative}
-  {...rest}
+	bind:ref
+	class={cn(
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/sheet/index.ts b/app/src/lib/components/ui/sheet/index.ts
index 2775aedbb7..1102a9b79f 100644
--- a/app/src/lib/components/ui/sheet/index.ts
+++ b/app/src/lib/components/ui/sheet/index.ts
@@ -1,7 +1,4 @@
 import { Dialog as SheetPrimitive } from "bits-ui"
-import { type VariantProps, tv } from "tailwind-variants"
-
-import Portal from "./sheet-portal.svelte"
 import Overlay from "./sheet-overlay.svelte"
 import Content from "./sheet-content.svelte"
 import Header from "./sheet-header.svelte"
@@ -12,6 +9,7 @@ import Description from "./sheet-description.svelte"
 const Root = SheetPrimitive.Root
 const Close = SheetPrimitive.Close
 const Trigger = SheetPrimitive.Trigger
+const Portal = SheetPrimitive.Portal
 
 export {
   Root,
@@ -36,71 +34,3 @@ export {
   Title as SheetTitle,
   Description as SheetDescription
 }
-
-export const sheetVariants = tv({
-  base: "fixed z-40 gap-4 bg-background p-6 shadow-lg",
-  variants: {
-    side: {
-      top: "inset-x-0 top-0 border-b",
-      bottom: "inset-x-0 bottom-0 border-t",
-      left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-      right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm"
-    }
-  },
-  defaultVariants: {
-    side: "right"
-  }
-})
-
-export const sheetTransitions = {
-  top: {
-    in: {
-      y: "-100%",
-      duration: 500,
-      opacity: 1
-    },
-    out: {
-      y: "-100%",
-      duration: 300,
-      opacity: 1
-    }
-  },
-  bottom: {
-    in: {
-      y: "100%",
-      duration: 500,
-      opacity: 1
-    },
-    out: {
-      y: "100%",
-      duration: 300,
-      opacity: 1
-    }
-  },
-  left: {
-    in: {
-      x: "-100%",
-      duration: 500,
-      opacity: 1
-    },
-    out: {
-      x: "-100%",
-      duration: 300,
-      opacity: 1
-    }
-  },
-  right: {
-    in: {
-      x: "100%",
-      duration: 500,
-      opacity: 1
-    },
-    out: {
-      x: "100%",
-      duration: 300,
-      opacity: 1
-    }
-  }
-}
-
-export type Side = VariantProps<typeof sheetVariants>["side"]
diff --git a/app/src/lib/components/ui/sheet/sheet-content.svelte b/app/src/lib/components/ui/sheet/sheet-content.svelte
index f90d4eec77..47512b1c37 100644
--- a/app/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,54 +1,53 @@
-<script lang="ts">
-import { Dialog as SheetPrimitive } from "bits-ui"
-import X from "virtual:icons/lucide/x"
-import { fly } from "svelte/transition"
-import { SheetOverlay, SheetPortal, type Side, sheetTransitions, sheetVariants } from "./index.js"
-import { cn } from "$lib/utilities/shadcn.js"
-
-type $$Props = SheetPrimitive.ContentProps & {
-  side?: Side
-}
+<script lang="ts" module>
+import { tv, type VariantProps } from "tailwind-variants"
+export const sheetVariants = tv({
+  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  variants: {
+    side: {
+      top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+      bottom:
+        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+      left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      right:
+        "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+})
 
+export type Side = VariantProps<typeof sheetVariants>["side"]
+</script>
 
-  interface Props {
-    class?: $$Props["class"];
-    side?: $$Props["side"];
-    inTransition?: $$Props["inTransition"];
-    inTransitionConfig?: $$Props["inTransitionConfig"];
-    outTransition?: $$Props["outTransition"];
-    outTransitionConfig?: $$Props["outTransitionConfig"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
+<script lang="ts">
+	import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn } from "$lib/utilities/shadcn.js";
 
-  let {
-    class: className = undefined,
-    side = "right",
-    inTransition = fly,
-    inTransitionConfig = sheetTransitions[side ?? "right"].in,
-    outTransition = fly,
-    outTransitionConfig = sheetTransitions[side ?? "right"].out,
-    children,
-    ...rest
-  }: Props = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		side?: Side;
+		children: Snippet;
+	} = $props();
 </script>
 
-<SheetPortal>
-  <SheetOverlay />
-  <SheetPrimitive.Content
-    {inTransition}
-    {inTransitionConfig}
-    {outTransition}
-    {outTransitionConfig}
-    class={cn(sheetVariants({ side }), className)}
-    {...rest}
-  >
-    {@render children?.()}
-    <SheetPrimitive.Close
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-    >
-      <X class="h-4 w-4" />
-      <span class="sr-only">Close</span>
-    </SheetPrimitive.Close>
-  </SheetPrimitive.Content>
-</SheetPortal>
+<SheetPrimitive.Portal>
+	<SheetOverlay />
+	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<X class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>
diff --git a/app/src/lib/components/ui/sheet/sheet-description.svelte b/app/src/lib/components/ui/sheet/sheet-description.svelte
index 1ec8689b8f..cdfc6150de 100644
--- a/app/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-description.svelte
@@ -2,18 +2,15 @@
 import { Dialog as SheetPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SheetPrimitive.DescriptionProps
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SheetPrimitive.DescriptionProps = $props()
 </script>
 
-<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...rest}>
-  {@render children?.()}
-</SheetPrimitive.Description>
+<SheetPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/sheet/sheet-footer.svelte b/app/src/lib/components/ui/sheet/sheet-footer.svelte
index 744056f3ac..860b3f9f89 100644
--- a/app/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
+import type { WithElementRef } from "bits-ui"
 import type { HTMLAttributes } from "svelte/elements"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
 <div
-  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-  {...rest}
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/sheet/sheet-header.svelte b/app/src/lib/components/ui/sheet/sheet-header.svelte
index 0bdf6c441c..dd1d4bc70d 100644
--- a/app/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-header.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLDivElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
 </script>
 
-<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...rest}>
-  {@render children?.()}
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>
diff --git a/app/src/lib/components/ui/sheet/sheet-overlay.svelte b/app/src/lib/components/ui/sheet/sheet-overlay.svelte
index cddec27f5d..2e01e7cec0 100644
--- a/app/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -1,26 +1,21 @@
 <script lang="ts">
 import { Dialog as SheetPrimitive } from "bits-ui"
-import { fade } from "svelte/transition"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SheetPrimitive.OverlayProps
-
-  interface Props {
-    class?: $$Props["class"];
-    transition?: $$Props["transition"];
-    transitionConfig?: $$Props["transitionConfig"];
-    [key: string]: any
-  }
-
-  let { class: className = undefined, transition = fade, transitionConfig = {
-  duration: 150
-}, ...rest }: Props = $props();
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SheetPrimitive.OverlayProps = $props()
 
+export { className as class }
 </script>
 
 <SheetPrimitive.Overlay
-  {transition}
-  {transitionConfig}
-  class={cn('fixed inset-0 z-40 bg-muted/60 backdrop-blur-sm ', className)}
-  {...rest}
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/sheet/sheet-portal.svelte b/app/src/lib/components/ui/sheet/sheet-portal.svelte
index f89cd54446..80b161cc9e 100644
--- a/app/src/lib/components/ui/sheet/sheet-portal.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -4,14 +4,13 @@ import { cn } from "$lib/utilities/shadcn.js"
 
 type $$Props = SheetPrimitive.PortalProps
 
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
+interface Props {
+  class?: $$Props["class"]
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
+let { class: className = undefined, children, ...rest }: Props = $props()
 </script>
 
 <SheetPrimitive.Portal class={cn(className)} {...rest}>
diff --git a/app/src/lib/components/ui/sheet/sheet-title.svelte b/app/src/lib/components/ui/sheet/sheet-title.svelte
index 4352b322f5..2501871c4f 100644
--- a/app/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/app/src/lib/components/ui/sheet/sheet-title.svelte
@@ -2,21 +2,11 @@
 import { Dialog as SheetPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SheetPrimitive.TitleProps
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.TitleProps = $props()
 </script>
 
 <SheetPrimitive.Title
-  class={cn('text-lg font-semibold text-foreground', className)}
-  {...rest}
->
-  {@render children?.()}
-</SheetPrimitive.Title>
+	bind:ref
+	class={cn("text-foreground text-lg font-semibold", className)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/sonner/sonner.svelte b/app/src/lib/components/ui/sonner/sonner.svelte
index f21fca08db..c423169240 100644
--- a/app/src/lib/components/ui/sonner/sonner.svelte
+++ b/app/src/lib/components/ui/sonner/sonner.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
 import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner"
 import { mode } from "mode-watcher"
-	interface Props {
-		[key: string]: any
-	}
 
-	let { ...rest }: Props = $props();
-
-type $$Props = SonnerProps
+let restProps: SonnerProps = $props()
 </script>
 
 <Sonner
@@ -15,11 +10,11 @@ type $$Props = SonnerProps
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast rounded-none border group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
 			description: "group-[.toast]:text-muted-foreground",
 			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 		},
 	}}
-	{...rest}
+	{...restProps}
 />
diff --git a/app/src/lib/components/ui/switch/switch.svelte b/app/src/lib/components/ui/switch/switch.svelte
index b0dd689d5f..6971388901 100644
--- a/app/src/lib/components/ui/switch/switch.svelte
+++ b/app/src/lib/components/ui/switch/switch.svelte
@@ -1,33 +1,27 @@
 <script lang="ts">
-import { Switch as SwitchPrimitive } from "bits-ui"
+import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = SwitchPrimitive.Props
-type $$Events = SwitchPrimitive.Events
-
-  interface Props {
-    class?: $$Props["class"];
-    checked?: $$Props["checked"];
-    [key: string]: any
-  }
-
-  let { class: className = undefined, checked = $bindable(undefined), ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  checked = $bindable(false),
+  ...restProps
+}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props()
 </script>
 
 <SwitchPrimitive.Root
-  bind:checked
-  class={cn(
-    'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center  border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary',
-    className,
-  )}
-  {...rest}
-  on:click
-  on:keydown
+	bind:ref
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
 >
-  <SwitchPrimitive.Thumb
-    class={cn(
-      'pointer-events-none block h-5 w-5 data-[state=unchecked]:bg-muted data-[state=unchecked]:dark:bg-muted-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:bg-accent data-[state=unchecked]:translate-x-0',
-    )}
-  />
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
 </SwitchPrimitive.Root>
diff --git a/app/src/lib/components/ui/table/table-body.svelte b/app/src/lib/components/ui/table/table-body.svelte
index d2896e94b1..eb80bf7c15 100644
--- a/app/src/lib/components/ui/table/table-body.svelte
+++ b/app/src/lib/components/ui/table/table-body.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLTableSectionElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<tbody class={cn('[&_tr:last-child]:border-0', className)} {...rest}>
-  {@render children?.()}
+<tbody bind:this={ref} class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
 </tbody>
diff --git a/app/src/lib/components/ui/table/table-caption.svelte b/app/src/lib/components/ui/table/table-caption.svelte
index 2665d7d4ba..48d2c2d76c 100644
--- a/app/src/lib/components/ui/table/table-caption.svelte
+++ b/app/src/lib/components/ui/table/table-caption.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLTableCaptionElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
 </script>
 
-<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...rest}>
-  {@render children?.()}
+<caption bind:this={ref} class={cn("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
+	{@render children?.()}
 </caption>
diff --git a/app/src/lib/components/ui/table/table-cell.svelte b/app/src/lib/components/ui/table/table-cell.svelte
index 6adcbd75e2..1c5859e44e 100644
--- a/app/src/lib/components/ui/table/table-cell.svelte
+++ b/app/src/lib/components/ui/table/table-cell.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
-
-  const bubble = createBubbler();
 import type { HTMLTdAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLTdAttributes
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLTdAttributes> = $props()
 </script>
 
 <td
-  class={cn('px-2 py-1 align-middle [&:has([role=checkbox])]:pr-0', className)}
-  {...rest}
-  onclick={bubble('click')}
-  onkeydown={bubble('keydown')}
+	bind:this={ref}
+	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </td>
diff --git a/app/src/lib/components/ui/table/table-footer.svelte b/app/src/lib/components/ui/table/table-footer.svelte
index 7f1d44aa83..1e8ed329c4 100644
--- a/app/src/lib/components/ui/table/table-footer.svelte
+++ b/app/src/lib/components/ui/table/table-footer.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLTableSectionElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...rest}>
-  {@render children?.()}
+<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
+	{@render children?.()}
 </tfoot>
diff --git a/app/src/lib/components/ui/table/table-head.svelte b/app/src/lib/components/ui/table/table-head.svelte
index e00317564d..6ec89ebe22 100644
--- a/app/src/lib/components/ui/table/table-head.svelte
+++ b/app/src/lib/components/ui/table/table-head.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
 import type { HTMLThAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLThAttributes
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLThAttributes> = $props()
 </script>
 
 <th
-  class={cn(
-    'h-12 px-2 text-left align-middle font-bold uppercase [&:has([role=checkbox])]:pr-0',
-    className,
-  )}
-  {...rest}
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </th>
diff --git a/app/src/lib/components/ui/table/table-header.svelte b/app/src/lib/components/ui/table/table-header.svelte
index 13e15e2c19..9a31864a30 100644
--- a/app/src/lib/components/ui/table/table-header.svelte
+++ b/app/src/lib/components/ui/table/table-header.svelte
@@ -1,23 +1,16 @@
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
-
-  const bubble = createBubbler();
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLTableSectionElement>
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<thead class={cn('[&_tr]:border-b', className)} {...rest} onclick={bubble('click')} onkeydown={bubble('keydown')}>
-  {@render children?.()}
+<thead bind:this={ref} class={cn("[&_tr]:border-b", className)} {...restProps}>
+	{@render children?.()}
 </thead>
diff --git a/app/src/lib/components/ui/table/table-row.svelte b/app/src/lib/components/ui/table/table-row.svelte
index 2412166036..deb9f3abc4 100644
--- a/app/src/lib/components/ui/table/table-row.svelte
+++ b/app/src/lib/components/ui/table/table-row.svelte
@@ -1,32 +1,23 @@
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
-
-  const bubble = createBubbler();
 import type { HTMLAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLAttributes<HTMLTableRowElement> & {
-  "data-state"?: unknown
-}
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props()
 </script>
 
 <tr
-  class={cn(
-    'border-b hover:bg-muted/50 data-[state=selected]:bg-muted',
-    className,
-  )}
-  {...rest}
-  onclick={bubble('click')}
-  onkeydown={bubble('keydown')}
+	bind:this={ref}
+	class={cn(
+		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...restProps}
 >
-  {@render children?.()}
+	{@render children?.()}
 </tr>
diff --git a/app/src/lib/components/ui/table/table.svelte b/app/src/lib/components/ui/table/table.svelte
index 3f7fa7d70d..51d1f40066 100644
--- a/app/src/lib/components/ui/table/table.svelte
+++ b/app/src/lib/components/ui/table/table.svelte
@@ -1,21 +1,18 @@
 <script lang="ts">
 import type { HTMLTableAttributes } from "svelte/elements"
+import type { WithElementRef } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = HTMLTableAttributes
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLTableAttributes> = $props()
 </script>
 
 <div class="relative w-full overflow-auto">
-  <table class={cn('w-full caption-bottom text-sm', className)} {...rest}>
-    {@render children?.()}
-  </table>
+	<table bind:this={ref} class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
+	</table>
 </div>
diff --git a/app/src/lib/components/ui/tabs/tabs-content.svelte b/app/src/lib/components/ui/tabs/tabs-content.svelte
index 51dcc5d820..2af5987cd6 100644
--- a/app/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/app/src/lib/components/ui/tabs/tabs-content.svelte
@@ -2,26 +2,14 @@
 import { Tabs as TabsPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = TabsPrimitive.ContentProps
-
-  interface Props {
-    class?: $$Props["class"];
-    value: $$Props["value"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, value, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ContentProps = $props()
 </script>
 
 <TabsPrimitive.Content
-  class={cn(
-    'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-    className,
-  )}
-  {value}
-  {...rest}
->
-  {@render children?.()}
-</TabsPrimitive.Content>
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/tabs/tabs-list.svelte b/app/src/lib/components/ui/tabs/tabs-list.svelte
index 419b1c6dd6..e34f666c58 100644
--- a/app/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/app/src/lib/components/ui/tabs/tabs-list.svelte
@@ -2,24 +2,14 @@
 import { Tabs as TabsPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = TabsPrimitive.ListProps
-
-  interface Props {
-    class?: $$Props["class"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props()
 </script>
 
 <TabsPrimitive.List
-  class={cn(
-    'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-    className,
-  )}
-  {...rest}
->
-  {@render children?.()}
-</TabsPrimitive.List>
+	bind:ref
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/tabs/tabs-trigger.svelte b/app/src/lib/components/ui/tabs/tabs-trigger.svelte
index 93b7fb8dc9..200b974c2b 100644
--- a/app/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/app/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -2,28 +2,14 @@
 import { Tabs as TabsPrimitive } from "bits-ui"
 import { cn } from "$lib/utilities/shadcn.js"
 
-type $$Props = TabsPrimitive.TriggerProps
-type $$Events = TabsPrimitive.TriggerEvents
-
-  interface Props {
-    class?: $$Props["class"];
-    value: $$Props["value"];
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
-
-  let { class: className = undefined, value, children, ...rest }: Props = $props();
-
+let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.TriggerProps = $props()
 </script>
 
 <TabsPrimitive.Trigger
-  class={cn(
-    'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-    className,
-  )}
-  {value}
-  {...rest}
-  on:click
->
-  {@render children?.()}
-</TabsPrimitive.Trigger>
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/app/src/lib/components/ui/tooltip/index.ts b/app/src/lib/components/ui/tooltip/index.ts
index 145a6018f2..f8ebe22f92 100644
--- a/app/src/lib/components/ui/tooltip/index.ts
+++ b/app/src/lib/components/ui/tooltip/index.ts
@@ -3,13 +3,16 @@ import Content from "./tooltip-content.svelte"
 
 const Root = TooltipPrimitive.Root
 const Trigger = TooltipPrimitive.Trigger
+const Provider = TooltipPrimitive.Provider
 
 export {
   Root,
   Trigger,
   Content,
+  Provider,
   //
   Root as Tooltip,
   Content as TooltipContent,
-  Trigger as TooltipTrigger
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider
 }
diff --git a/app/src/lib/components/ui/tooltip/tooltip-content.svelte b/app/src/lib/components/ui/tooltip/tooltip-content.svelte
index 65431549f5..e269f293c4 100644
--- a/app/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/app/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,41 +1,21 @@
 <script lang="ts">
 import { Tooltip as TooltipPrimitive } from "bits-ui"
-import { cn, flyAndScale } from "$lib/utilities/shadcn.js"
-
-type $$Props = TooltipPrimitive.ContentProps
-
-	interface Props {
-		class?: $$Props["class"];
-		sideOffset?: $$Props["sideOffset"];
-		transition?: $$Props["transition"];
-		transitionConfig?: $$Props["transitionConfig"];
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
-
-	let {
-		class: className = undefined,
-		sideOffset = 4,
-		transition = flyAndScale,
-		transitionConfig = {
-  y: 8,
-  duration: 150
-},
-		children,
-		...rest
-	}: Props = $props();
+import { cn } from "$lib/utilities/shadcn.js"
 
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  ...restProps
+}: TooltipPrimitive.ContentProps = $props()
 </script>
 
 <TooltipPrimitive.Content
-	{transition}
-	{transitionConfig}
+	bind:ref
 	{sideOffset}
 	class={cn(
-		"z-40 overflow-hidden border bg-popover bg-black px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
 		className
 	)}
-	{...rest}
->
-	{@render children?.()}
-</TooltipPrimitive.Content>
+	{...restProps}
+/>
diff --git a/app/src/lib/components/union-icons/color/icon-blocks-color.svelte b/app/src/lib/components/union-icons/color/icon-blocks-color.svelte
index 8daffa3768..1a27932564 100644
--- a/app/src/lib/components/union-icons/color/icon-blocks-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-blocks-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-channel-color.svelte b/app/src/lib/components/union-icons/color/icon-channel-color.svelte
index 7bbc9d3be0..e61ffa33b3 100644
--- a/app/src/lib/components/union-icons/color/icon-channel-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-channel-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-connection-color.svelte b/app/src/lib/components/union-icons/color/icon-connection-color.svelte
index 42ec6f115b..7e65e3c9af 100644
--- a/app/src/lib/components/union-icons/color/icon-connection-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-connection-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-explorer-color.svelte b/app/src/lib/components/union-icons/color/icon-explorer-color.svelte
index 058b7fa2c1..4c10b717e3 100644
--- a/app/src/lib/components/union-icons/color/icon-explorer-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-explorer-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-faucet-color.svelte b/app/src/lib/components/union-icons/color/icon-faucet-color.svelte
index 5ae656da72..2dd58b8402 100644
--- a/app/src/lib/components/union-icons/color/icon-faucet-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-faucet-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-home-color.svelte b/app/src/lib/components/union-icons/color/icon-home-color.svelte
index 63fd9e0e60..e85ecebaf9 100644
--- a/app/src/lib/components/union-icons/color/icon-home-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-home-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-index-color.svelte b/app/src/lib/components/union-icons/color/icon-index-color.svelte
index 6f909f369a..d22bf9abbc 100644
--- a/app/src/lib/components/union-icons/color/icon-index-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-index-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-packet-color.svelte b/app/src/lib/components/union-icons/color/icon-packet-color.svelte
index 4d5a11c2a8..9dcc3be83c 100644
--- a/app/src/lib/components/union-icons/color/icon-packet-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-packet-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-queue-color.svelte b/app/src/lib/components/union-icons/color/icon-queue-color.svelte
index a8beef4a63..1369bfd98c 100644
--- a/app/src/lib/components/union-icons/color/icon-queue-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-queue-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-search-color.svelte b/app/src/lib/components/union-icons/color/icon-search-color.svelte
index 7530c53b92..248b52e83f 100644
--- a/app/src/lib/components/union-icons/color/icon-search-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-search-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-settings-color.svelte b/app/src/lib/components/union-icons/color/icon-settings-color.svelte
index ab9381a0fd..38c4269563 100644
--- a/app/src/lib/components/union-icons/color/icon-settings-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-settings-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-transfers-color.svelte b/app/src/lib/components/union-icons/color/icon-transfers-color.svelte
index 0d99b24cd4..8e86fffd08 100644
--- a/app/src/lib/components/union-icons/color/icon-transfers-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-transfers-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte b/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte
index 43618c417a..12a80917b0 100644
--- a/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-usertransfers-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/color/icon-wallet-color.svelte b/app/src/lib/components/union-icons/color/icon-wallet-color.svelte
index 2cb9a14a44..89c81864f1 100644
--- a/app/src/lib/components/union-icons/color/icon-wallet-color.svelte
+++ b/app/src/lib/components/union-icons/color/icon-wallet-color.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte
index 608ad29604..f3ba51677a 100644
--- a/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-blocks-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte
index b27097fd06..be831b262c 100644
--- a/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-channel-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte
index a78dfb2c42..d2e73547b5 100644
--- a/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-connection-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte
index e28fa27c1c..cf609be474 100644
--- a/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-explorer-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte
index 81f6cee830..cdea1afef1 100644
--- a/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-faucet-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte
index 20165ae178..819871d291 100644
--- a/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-home-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte
index db630e7d80..2fe2b2b31d 100644
--- a/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-index-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte
index 5a14fbff12..62ea040e6d 100644
--- a/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-packet-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte
index 3eb0db8030..adec60b1e6 100644
--- a/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-queue-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte
index f24f8e6b2d..385b48bb56 100644
--- a/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-search-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte
index d35d7d8bd5..5dd26d52dd 100644
--- a/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-settings-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte
index 33724a10c1..ea474db415 100644
--- a/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-transfers-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte
index 86be818bab..fcf278c292 100644
--- a/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-usertransfers-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte b/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte
index 5b94ea4198..9846b96369 100644
--- a/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte
+++ b/app/src/lib/components/union-icons/inverse/icon-wallet-inverse.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte b/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte
index 1d60eb95df..9a476d3d65 100644
--- a/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-alltransfers-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte b/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte
index 29148cd505..f0e170c548 100644
--- a/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-blocks-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte b/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte
index a2a3b1f6c7..a200fe1ad2 100644
--- a/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-channel-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte b/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte
index c654c52cfd..aeb2df8d61 100644
--- a/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-connection-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte b/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte
index cba5fe28be..40bb6d2a4c 100644
--- a/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-explorer-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte b/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte
index e2d6de6a44..2db1b4b61a 100644
--- a/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-faucet-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-home-mono.svelte b/app/src/lib/components/union-icons/mono/icon-home-mono.svelte
index fcc56d765b..7bd72757e7 100644
--- a/app/src/lib/components/union-icons/mono/icon-home-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-home-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte b/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte
index ac534d6ecb..3aef7b3608 100644
--- a/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-hubblestatus-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte b/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte
index 8a111f980e..eccb3c8960 100644
--- a/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-ibcchannels-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte b/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte
index b49167422d..908ea8f642 100644
--- a/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-ibcconnections-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-index-mono.svelte b/app/src/lib/components/union-icons/mono/icon-index-mono.svelte
index f0b9fef2f9..c8ed0be242 100644
--- a/app/src/lib/components/union-icons/mono/icon-index-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-index-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte b/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte
index 462d5c0f67..6b2d1c139a 100644
--- a/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-packet-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte b/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte
index 3307266e68..35919439f1 100644
--- a/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-queue-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-search-mono.svelte b/app/src/lib/components/union-icons/mono/icon-search-mono.svelte
index 6e8cc1c489..31be3408f1 100644
--- a/app/src/lib/components/union-icons/mono/icon-search-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-search-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte b/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte
index 7e5ea2e0ac..7ae6fb19a7 100644
--- a/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-searchk-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte b/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte
index 64c2238bf3..311b15096d 100644
--- a/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-settings-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte b/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte
index 9e212fd0d7..2b9ea4c3ae 100644
--- a/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-transfers-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte b/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte
index c0955749e3..ae04981fd5 100644
--- a/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-usertransfers-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte b/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte
index aa65eff951..40d10bd070 100644
--- a/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte
+++ b/app/src/lib/components/union-icons/mono/icon-wallet-mono.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  interface Props {
-    class?: string | undefined;
-  }
-
-  let { class: className = undefined }: Props = $props();
+interface Props {
+  class?: string | undefined
+}
 
+let { class: className = undefined }: Props = $props()
 </script>
 
 <svg class={className} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/app/src/lib/components/wallet-gate-cosmos.svelte b/app/src/lib/components/wallet-gate-cosmos.svelte
index adba3d4638..24413aaefa 100644
--- a/app/src/lib/components/wallet-gate-cosmos.svelte
+++ b/app/src/lib/components/wallet-gate-cosmos.svelte
@@ -3,12 +3,12 @@ import { derived, type Readable } from "svelte/store"
 import type { UserAddressCosmos } from "$lib/types"
 import type { Address } from "viem"
 import { userAddrCosmos } from "$lib/wallet/cosmos"
-  interface Props {
-    connected?: import('svelte').Snippet<[any]>;
-    disconnected?: import('svelte').Snippet;
-  }
+interface Props {
+  connected?: import("svelte").Snippet<[any]>
+  disconnected?: import("svelte").Snippet
+}
 
-  let { connected, disconnected }: Props = $props();
+let { connected, disconnected }: Props = $props()
 
 let confirmedUserAddr: Readable<UserAddressCosmos> = derived(userAddrCosmos, $userAddr => {
   return (
diff --git a/app/src/lib/components/wallet-gate-evm.svelte b/app/src/lib/components/wallet-gate-evm.svelte
index e71fe831c4..6645322e3b 100644
--- a/app/src/lib/components/wallet-gate-evm.svelte
+++ b/app/src/lib/components/wallet-gate-evm.svelte
@@ -3,12 +3,12 @@ import { derived, type Readable } from "svelte/store"
 import type { UserAddressEvm } from "$lib/types"
 import type { Address } from "viem"
 import { userAddrEvm } from "$lib/wallet/evm"
-  interface Props {
-    connected?: import('svelte').Snippet<[any]>;
-    disconnected?: import('svelte').Snippet;
-  }
+interface Props {
+  connected?: import("svelte").Snippet<[any]>
+  disconnected?: import("svelte").Snippet
+}
 
-  let { connected, disconnected }: Props = $props();
+let { connected, disconnected }: Props = $props()
 
 let confirmedUserAddr: Readable<UserAddressEvm> = derived(userAddrEvm, $userAddr => {
   return (
diff --git a/app/src/lib/polyfill.ts b/app/src/lib/polyfill.ts
index ee87df69dc..a760ec40f9 100644
--- a/app/src/lib/polyfill.ts
+++ b/app/src/lib/polyfill.ts
@@ -1,5 +1,5 @@
 import "temporal-polyfill/global"
-import EventEmitter from "events"
+import EventEmitter from "node:events"
 import { browser } from "$app/environment"
 
 if (browser) {
diff --git a/app/src/lib/swap-form.svelte b/app/src/lib/swap-form.svelte
index 0d9205bfcf..2448861dcc 100644
--- a/app/src/lib/swap-form.svelte
+++ b/app/src/lib/swap-form.svelte
@@ -10,11 +10,11 @@ import * as Card from "$lib/components/ui/card/index.ts"
 import { Button } from "$lib/components/ui/button"
 import type { Chain, UserAddresses } from "$lib/types.ts"
 
-  interface Props {
-    chains: Array<Chain>;
-  }
+interface Props {
+  chains: Array<Chain>
+}
 
-  let { chains }: Props = $props();
+let { chains }: Props = $props()
 
 let fromChainId = writable("")
 let toChainId = writable("")
diff --git a/app/src/lib/utilities/shadcn.ts b/app/src/lib/utilities/shadcn.ts
index f14807c2cb..16d24f8672 100644
--- a/app/src/lib/utilities/shadcn.ts
+++ b/app/src/lib/utilities/shadcn.ts
@@ -1,54 +1,6 @@
-import { twMerge } from "tailwind-merge"
-import { cubicOut } from "svelte/easing"
 import { type ClassValue, clsx } from "clsx"
-import type { TransitionConfig } from "svelte/transition"
-
-export const cn = (...inputs: Array<ClassValue>) => twMerge(clsx(inputs))
-
-type FlyAndScaleParams = {
-  y?: number
-  x?: number
-  start?: number
-  duration?: number
-}
-
-export const flyAndScale = (
-  node: Element,
-  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-  const style = getComputedStyle(node)
-  const transform = style.transform === "none" ? "" : style.transform
-
-  const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-    const [minA, maxA] = scaleA
-    const [minB, maxB] = scaleB
-
-    const percentage = (valueA - minA) / (maxA - minA)
-    const valueB = percentage * (maxB - minB) + minB
-
-    return valueB
-  }
-
-  const styleToString = (style: Record<string, number | string | undefined>): string => {
-    return Object.keys(style).reduce((str, key) => {
-      if (style[key] === undefined) return str
-      return `${str}${key}:${style[key]};`
-    }, "")
-  }
-
-  return {
-    duration: params.duration ?? 200,
-    delay: 0,
-    css: t => {
-      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0])
-      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0])
-      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1])
+import { twMerge } from "tailwind-merge"
 
-      return styleToString({
-        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-        opacity: t
-      })
-    },
-    easing: cubicOut
-  }
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
 }
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 3e4c622f50..973e5ecc99 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+import { run } from "svelte/legacy"
 
 import "$lib/polyfill.ts"
 import "$styles/index.css"
@@ -21,11 +21,11 @@ import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import DeprecationNotice from "$lib/components/deprecation-notice.svelte"
 import { checkWebGLSupport, deviceWidth } from "$lib/utilities/device.ts"
 import { disablePinchToZoom } from "$lib/utilities/disable-pinch-to-zoom.ts"
-  interface Props {
-    children?: import('svelte').Snippet;
-  }
+interface Props {
+  children?: import("svelte").Snippet
+}
 
-  let { children }: Props = $props();
+let { children }: Props = $props()
 
 const { queryClient, QueryClientProvider } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
@@ -36,8 +36,8 @@ onMount(() => {
 })
 
 run(() => {
-    updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
-  });
+  updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
+})
 </script>
 
 <svelte:head>
diff --git a/app/src/routes/explorer/(components)/icon-button.svelte b/app/src/routes/explorer/(components)/icon-button.svelte
index 470aefe1ef..dd22e58d2e 100644
--- a/app/src/routes/explorer/(components)/icon-button.svelte
+++ b/app/src/routes/explorer/(components)/icon-button.svelte
@@ -2,12 +2,12 @@
 import type { SvelteComponent } from "svelte"
 import Button from "$lib/components/ui/button/button.svelte"
 
-  interface Props {
-    icon: { class: string; component: typeof SvelteComponent };
-    [key: string]: any
-  }
+interface Props {
+  icon: { class: string; component: typeof SvelteComponent }
+  [key: string]: any
+}
 
-  let { icon, ...rest }: Props = $props();
+let { icon, ...rest }: Props = $props()
 </script>
 
 <Button {...rest}>
diff --git a/app/src/routes/explorer/(components)/menu.svelte b/app/src/routes/explorer/(components)/menu.svelte
index 5f1d9527e7..f1b2de0057 100644
--- a/app/src/routes/explorer/(components)/menu.svelte
+++ b/app/src/routes/explorer/(components)/menu.svelte
@@ -5,11 +5,11 @@ import type { LayoutData } from "../$types.ts"
 import { Button } from "$lib/components/ui/button/index.ts"
 import { derived } from "svelte/store"
 
-  interface Props {
-    tableRoutes: LayoutData["tables"];
-  }
+interface Props {
+  tableRoutes: LayoutData["tables"]
+}
 
-  let { tableRoutes }: Props = $props();
+let { tableRoutes }: Props = $props()
 
 const selectedTable = derived(page, $page => $page.route.id?.split("/").at(2))
 
diff --git a/app/src/routes/explorer/(components)/pixel-graph.svelte b/app/src/routes/explorer/(components)/pixel-graph.svelte
index 313eb1a94e..5abae36ec6 100644
--- a/app/src/routes/explorer/(components)/pixel-graph.svelte
+++ b/app/src/routes/explorer/(components)/pixel-graph.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 import * as Tooltip from "$lib/components/ui/tooltip"
 
-  interface Props {
-    data?: Array<{ count: number; day: Date }>;
-  }
+interface Props {
+  data?: Array<{ count: number; day: Date }>
+}
 
-  let { data = [] }: Props = $props();
+let { data = [] }: Props = $props()
 
 let minValue = $derived(0)
 let maxValue = $derived(data.length > 0 ? Math.max(...data.map(d => d.count)) : 0)
@@ -21,13 +21,14 @@ function normalize(
   return ((value - min) / (max - min)) * (newMax - newMin) + newMin
 }
 
-let normalizedData =
-  $derived(data.length > 0
+let normalizedData = $derived(
+  data.length > 0
     ? data.map(d => ({
         ...d,
         normalizedValue: Math.floor(normalize(d.count, minValue, maxValue, 0, 9))
       }))
-    : [])
+    : []
+)
 </script>
 
 <div class="flex flex-row-reverse items-end gap-[2.5px]">
diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
index 806adc020b..be088c5454 100644
--- a/app/src/routes/explorer/+layout.svelte
+++ b/app/src/routes/explorer/+layout.svelte
@@ -8,16 +8,17 @@ import Menu from "./(components)/menu.svelte"
 import StatsBar from "./(components)/stats-bar.svelte"
 import ExplorerBreadcrumbs from "$lib/components/explorer-breadcrumbs.svelte"
 
-  interface Props {
-    data: LayoutData;
-    children?: import('svelte').Snippet;
-  }
+interface Props {
+  data: LayoutData
+  children?: import("svelte").Snippet
+}
 
-  let { data, children }: Props = $props();
+let { data, children }: Props = $props()
 
 let explorerRoute = $state($page.route.id?.split("/").at(2) ?? null)
-let explorerPageDescription =
-  $derived(data.tables.filter(t => t.route === explorerRoute).at(0)?.description ?? null)
+let explorerPageDescription = $derived(
+  data.tables.filter(t => t.route === explorerRoute).at(0)?.description ?? null
+)
 
 onNavigate(navigation => {
   if (navigation.to?.route.id?.split("/").at(1) === "explorer") {
diff --git a/app/src/routes/explorer/transfers/+layout.svelte b/app/src/routes/explorer/transfers/+layout.svelte
index 4919de5ad0..32f43d7a6a 100644
--- a/app/src/routes/explorer/transfers/+layout.svelte
+++ b/app/src/routes/explorer/transfers/+layout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 import "temporal-polyfill/global"
-	interface Props {
-		children?: import('svelte').Snippet;
-	}
+interface Props {
+  children?: import("svelte").Snippet
+}
 
-	let { children }: Props = $props();
+let { children }: Props = $props()
 </script>
 
 {@render children?.()}
diff --git a/app/src/routes/faucet/(components)/cosmos-balance.svelte b/app/src/routes/faucet/(components)/cosmos-balance.svelte
index 0f64656500..2da71a473f 100644
--- a/app/src/routes/faucet/(components)/cosmos-balance.svelte
+++ b/app/src/routes/faucet/(components)/cosmos-balance.svelte
@@ -3,19 +3,14 @@ import type { Chain, UserAddresses } from "$lib/types.ts"
 import { userBalancesQuery } from "$lib/queries/balance"
 import { truncate } from "$lib/utilities/format.ts"
 
-  interface Props {
-    userAddr: UserAddresses;
-    chains: Array<Chain>;
-    chainId: string;
-    symbol: boolean;
-  }
+interface Props {
+  userAddr: UserAddresses
+  chains: Array<Chain>
+  chainId: string
+  symbol: boolean
+}
 
-  let {
-    userAddr,
-    chains,
-    chainId,
-    symbol
-  }: Props = $props();
+let { userAddr, chains, chainId, symbol }: Props = $props()
 
 let cosmosBalances = userBalancesQuery({
   chains: chains.filter(c => c.chain_id === chainId),
diff --git a/app/src/routes/faucet/(components)/dydx-faucet.svelte b/app/src/routes/faucet/(components)/dydx-faucet.svelte
index 1f6cad66c0..bd33d676f1 100644
--- a/app/src/routes/faucet/(components)/dydx-faucet.svelte
+++ b/app/src/routes/faucet/(components)/dydx-faucet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { preventDefault, once } from 'svelte/legacy';
+import { preventDefault, once } from "svelte/legacy"
 
 import { URLS } from "$lib/constants"
 import request from "graphql-request"
diff --git a/app/src/routes/faucet/(components)/external-faucets.svelte b/app/src/routes/faucet/(components)/external-faucets.svelte
index 96b88f0dd7..0fbe9453c1 100644
--- a/app/src/routes/faucet/(components)/external-faucets.svelte
+++ b/app/src/routes/faucet/(components)/external-faucets.svelte
@@ -3,11 +3,11 @@ import type { Chain } from "$lib/types"
 import * as Card from "$lib/components/ui/card/index.ts"
 import ExternalLinkIcon from "virtual:icons/lucide/external-link"
 
-  interface Props {
-    chains: Array<Chain>;
-  }
+interface Props {
+  chains: Array<Chain>
+}
 
-  let { chains }: Props = $props();
+let { chains }: Props = $props()
 
 let chainsWithFaucets = chains.filter(
   chain => chain.assets.filter(asset => asset.faucets.length > 0).length > 0
diff --git a/app/src/routes/faucet/(components)/stride-faucet.svelte b/app/src/routes/faucet/(components)/stride-faucet.svelte
index 5f9f5f7c69..f8b2484f06 100644
--- a/app/src/routes/faucet/(components)/stride-faucet.svelte
+++ b/app/src/routes/faucet/(components)/stride-faucet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { preventDefault, once } from 'svelte/legacy';
+import { preventDefault, once } from "svelte/legacy"
 
 import { URLS } from "$lib/constants"
 import request from "graphql-request"
diff --git a/app/src/routes/faucet/(components)/token-balance.svelte b/app/src/routes/faucet/(components)/token-balance.svelte
index 2be58c3ae2..d703183e57 100644
--- a/app/src/routes/faucet/(components)/token-balance.svelte
+++ b/app/src/routes/faucet/(components)/token-balance.svelte
@@ -3,22 +3,26 @@ import { userBalancesQuery } from "$lib/queries/balance"
 import type { Chain, UserAddressCosmos } from "$lib/types.ts"
 import Precise from "$lib/components/precise.svelte"
 
-  interface Props {
-    chains: Array<Chain>;
-    userAddrCosmos: UserAddressCosmos;
-    symbol: string;
-  }
+interface Props {
+  chains: Array<Chain>
+  userAddrCosmos: UserAddressCosmos
+  symbol: string
+}
 
-  let { chains, userAddrCosmos, symbol }: Props = $props();
+let { chains, userAddrCosmos, symbol }: Props = $props()
 
 let chain = chains.filter(c => c.chain_id === "union-testnet-8")
-let userBalances = $derived(userBalancesQuery({
-  userAddr: { cosmos: userAddrCosmos, evm: null },
-  chains: chain,
-  connected: true
-}))
+let userBalances = $derived(
+  userBalancesQuery({
+    userAddr: { cosmos: userAddrCosmos, evm: null },
+    chains: chain,
+    connected: true
+  })
+)
 let unionBalances = $derived($userBalances.at(0)?.data ?? [])
-let asset = $derived(unionBalances.find(balance => balance.symbol.toLowerCase() === symbol.toLowerCase()))
+let asset = $derived(
+  unionBalances.find(balance => balance.symbol.toLowerCase() === symbol.toLowerCase())
+)
 </script>
 
 {#if asset}
diff --git a/app/src/routes/faucet/+page.svelte b/app/src/routes/faucet/+page.svelte
index 8920f187c1..faff2ec796 100644
--- a/app/src/routes/faucet/+page.svelte
+++ b/app/src/routes/faucet/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { preventDefault, once } from 'svelte/legacy';
+import { preventDefault, once } from "svelte/legacy"
 
 import request from "graphql-request"
 import { onDestroy, onMount } from "svelte"
diff --git a/app/src/routes/transfer/(components)/assets-dialog.svelte b/app/src/routes/transfer/(components)/assets-dialog.svelte
index 70bf73756e..b011987a36 100644
--- a/app/src/routes/transfer/(components)/assets-dialog.svelte
+++ b/app/src/routes/transfer/(components)/assets-dialog.svelte
@@ -11,35 +11,27 @@ import { showUnsupported } from "$lib/stores/user.ts"
 import { ScrollArea } from "$lib/components/ui/scroll-area"
 import { type Address, parseUnits, toHex } from "viem"
 
+interface Props {
+  /**
+   * TODO: format the balance to a readable format - in order to do that properly, need:
+   *  - the balance,
+   *  - the decimals,
+   *  - whether it's evm or cosmos:
+   *    - if evm then `Number(formatUnits(balance, decimals)).toFixed(2)`, - the 2 can be a 4 if you want more precision
+   *    - if cosmos then: TBD
+   */
+  dialogOpen?: boolean
+  chain: Chain
+  assets: Array<{
+    address: string
+    balance: bigint
+    decimals?: number
+    symbol: string
+  }>
+  onAssetSelect: (data: { address: string; symbol: string }) => void
+}
 
-
-
-  interface Props {
-    /**
- * TODO: format the balance to a readable format - in order to do that properly, need:
- *  - the balance,
- *  - the decimals,
- *  - whether it's evm or cosmos:
- *    - if evm then `Number(formatUnits(balance, decimals)).toFixed(2)`, - the 2 can be a 4 if you want more precision
- *    - if cosmos then: TBD
- */
-    dialogOpen?: boolean;
-    chain: Chain;
-    assets: Array<{
-  address: string
-  balance: bigint
-  decimals?: number
-  symbol: string
-}>;
-    onAssetSelect: (data: { address: string; symbol: string }) => void;
-  }
-
-  let {
-    dialogOpen = $bindable(false),
-    chain,
-    assets,
-    onAssetSelect
-  }: Props = $props();
+let { dialogOpen = $bindable(false), chain, assets, onAssetSelect }: Props = $props()
 </script>
 
 <Dialog.Root
diff --git a/app/src/routes/transfer/(components)/card-section-heading.svelte b/app/src/routes/transfer/(components)/card-section-heading.svelte
index 6ed52a43ef..9c0d1b3d07 100644
--- a/app/src/routes/transfer/(components)/card-section-heading.svelte
+++ b/app/src/routes/transfer/(components)/card-section-heading.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	interface Props {
-		children?: import('svelte').Snippet;
-	}
+interface Props {
+  children?: import("svelte").Snippet
+}
 
-	let { children }: Props = $props();
+let { children }: Props = $props()
 </script>
 
 <h2 class="font-bold font-supermolot text-xl mt-2 mb-1">{@render children?.()}</h2>
diff --git a/app/src/routes/transfer/(components)/chain-button.svelte b/app/src/routes/transfer/(components)/chain-button.svelte
index 1054581eaa..a2ff49cb3f 100644
--- a/app/src/routes/transfer/(components)/chain-button.svelte
+++ b/app/src/routes/transfer/(components)/chain-button.svelte
@@ -2,13 +2,13 @@
 import Chevron from "./chevron.svelte"
 import { Button } from "$lib/components/ui/button/index.ts"
 
-  interface Props {
-    dialogOpen: boolean;
-    children?: import('svelte').Snippet;
-    [key: string]: any
-  }
+interface Props {
+  dialogOpen: boolean
+  children?: import("svelte").Snippet
+  [key: string]: any
+}
 
-  let { dialogOpen = $bindable(), children, ...rest }: Props = $props();
+let { dialogOpen = $bindable(), children, ...rest }: Props = $props()
 </script>
 
 <Button
diff --git a/app/src/routes/transfer/(components)/chain-dialog.svelte b/app/src/routes/transfer/(components)/chain-dialog.svelte
index 874381a927..58f490220a 100644
--- a/app/src/routes/transfer/(components)/chain-dialog.svelte
+++ b/app/src/routes/transfer/(components)/chain-dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
+import { run } from "svelte/legacy"
 
 import { toast } from "svelte-sonner"
 import { cn } from "$lib/utilities/shadcn.ts"
@@ -8,27 +8,27 @@ import * as Dialog from "$lib/components/ui/dialog"
 import type { Chain, UserAddresses } from "$lib/types.ts"
 import { Button } from "$lib/components/ui/button/index.js"
 
-  interface Props {
-    kind: "from" | "to";
-    dialogOpen?: boolean;
-    onChainSelect: (newSelectedChain: string) => void;
-    chains: Array<Chain>;
-    selectedChain: string;
-    userAddress: UserAddresses | null;
-  }
+interface Props {
+  kind: "from" | "to"
+  dialogOpen?: boolean
+  onChainSelect: (newSelectedChain: string) => void
+  chains: Array<Chain>
+  selectedChain: string
+  userAddress: UserAddresses | null
+}
 
-  let {
-    kind,
-    dialogOpen = $bindable(false),
-    onChainSelect,
-    chains,
-    selectedChain,
-    userAddress
-  }: Props = $props();
+let {
+  kind,
+  dialogOpen = $bindable(false),
+  onChainSelect,
+  chains,
+  selectedChain,
+  userAddress
+}: Props = $props()
 
 run(() => {
-    document.body.style.overflow = dialogOpen ? "hidden" : "auto"
-  });
+  document.body.style.overflow = dialogOpen ? "hidden" : "auto"
+})
 
 function selectChain(chain: Chain) {
   if (chain.rpc_type === "aptos" && !userAddress?.aptos) return toast.info(`Connect Aptos wallet`)
diff --git a/app/src/routes/transfer/(components)/recipient-field.svelte b/app/src/routes/transfer/(components)/recipient-field.svelte
index fd0b72b1cf..8a89307a9b 100644
--- a/app/src/routes/transfer/(components)/recipient-field.svelte
+++ b/app/src/routes/transfer/(components)/recipient-field.svelte
@@ -6,11 +6,11 @@ import LockOpenIcon from "virtual:icons/lucide/lock-open"
 import { Input } from "$lib/components/ui/input/index.ts"
 import Button from "$lib/components/ui/button/button.svelte"
 
-  interface Props {
-    recipient: Writable<string>;
-  }
+interface Props {
+  recipient: Writable<string>
+}
 
-  let { recipient = $bindable() }: Props = $props();
+let { recipient = $bindable() }: Props = $props()
 
 let recipientInputState: "locked" | "unlocked" | "invalid" = $state("unlocked")
 
diff --git a/app/src/routes/transfer/(components)/settings-dialog.svelte b/app/src/routes/transfer/(components)/settings-dialog.svelte
index 36297f27fe..e5d20c48ab 100644
--- a/app/src/routes/transfer/(components)/settings-dialog.svelte
+++ b/app/src/routes/transfer/(components)/settings-dialog.svelte
@@ -2,12 +2,12 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 import * as Dialog from "$lib/components/ui/dialog"
 
-  interface Props {
-    dialogOpen?: boolean;
-    title: string;
-  }
+interface Props {
+  dialogOpen?: boolean
+  title: string
+}
 
-  let { dialogOpen = $bindable(false), title }: Props = $props();
+let { dialogOpen = $bindable(false), title }: Props = $props()
 </script>
 
 <Dialog.Root
diff --git a/app/src/styles/tailwind.css b/app/src/styles/tailwind.css
index 55dffd1db2..4011cd10e7 100644
--- a/app/src/styles/tailwind.css
+++ b/app/src/styles/tailwind.css
@@ -1,10 +1,6 @@
-/*
- * This file is largely autogenerated
- * You probably want to edit `index.css` instead
- */
 @tailwind base;
-@tailwind utilities;
 @tailwind components;
+@tailwind utilities;
 
 @layer components {
   .max-w-30 {
@@ -88,39 +84,77 @@
     --ring: 240 5% 64.9%;
 
     --radius: 0.5rem;
+
+    /* --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem; */
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
-    --background: 240 3.7% 15%;
-    --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 10%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 30%;
-    --input: 240 3.7% 15.9%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 18.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --accent: 191 96% 81%;
-    --accent-foreground: 0 0% 98%;
-
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 240 3.7% 30%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 212.7 26.8% 83.9%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
+/* 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+} */
+
 @layer base {
   * {
     @apply border-border;
diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts
index 2c3b8bfaeb..c40d281dd9 100644
--- a/app/tailwind.config.ts
+++ b/app/tailwind.config.ts
@@ -152,10 +152,25 @@ export default (<Config>{
         "text-gradient": "text-gradient 1.5s linear infinite",
         "background-shine": "background-shine 2s linear infinite",
         "pulse-slow": "pulse 6s infinite cubic-bezier(0.4, 0, 0.6, 1)",
-        "border-width": "border-width 3s infinite alternate"
+        "border-width": "border-width 3s infinite alternate",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite"
       }),
       animationDuration: { "2s": "2s" },
       keyframes: _ => ({
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" }
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" }
+        },
         "text-gradient": {
           to: { backgroundPosition: "200% center" }
         },

From 350247a24770b6c2331e72b662b55b447631d057 Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Tue, 12 Nov 2024 20:00:26 -0800
Subject: [PATCH 3/4] chore: more migration

---
 app/app.nix                                   |   2 +-
 app/package-lock.json                         | 406 ++----------------
 app/package.json                              |  19 +-
 ...ick-outside.ts => click-outside.svelte.ts} |   0
 .../lib/actions/{copy.ts => copy.svelte.ts}   |   0
 app/src/lib/components/chains-gate.svelte     |   6 +-
 app/src/lib/components/connect/connect.svelte | 101 ++---
 .../lib/components/connect/connection.svelte  |  11 +-
 app/src/lib/components/search/cmdk.svelte     | 232 ++++------
 .../lib/components/search/search-bar.svelte   |  87 ++--
 .../components/table-cells/cell-copy.svelte   |   2 +-
 .../table-cells/cell-icon-tooltip.svelte      |   2 +-
 app/src/routes/+error.svelte                  |   2 +-
 app/src/routes/+layout.svelte                 |   9 +-
 app/src/routes/explorer/+layout.svelte        |  45 +-
 .../routes/explorer/transfers/+layout.svelte  |   6 +-
 .../routes/explorer/transfers/+page.svelte    |   4 +-
 17 files changed, 248 insertions(+), 686 deletions(-)
 rename app/src/lib/actions/{click-outside.ts => click-outside.svelte.ts} (100%)
 rename app/src/lib/actions/{copy.ts => copy.svelte.ts} (100%)

diff --git a/app/app.nix b/app/app.nix
index bfeda0aa69..d285ffbce2 100644
--- a/app/app.nix
+++ b/app/app.nix
@@ -19,7 +19,7 @@ _: {
     {
       packages = {
         app = jsPkgs.buildNpmPackage {
-          npmDepsHash = "sha256-8UgNUADgd8yrpePKD/DzDrwdiXhFTRBJKbD64GW7QNU=";
+          npmDepsHash = "sha256-JL4Hx04dLW4AgZE1lFlTbQvXhLgsiomfzLChn+KbPZY=";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [
diff --git a/app/package-lock.json b/app/package-lock.json
index 9dd81f56e9..ef715c2fd8 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -25,8 +25,8 @@
         "@wagmi/core": "^2.14.3",
         "gql.tada": "^1.8.7",
         "graphql-request": "7.1.0",
-        "svelte-persisted-store": "^0.11.0",
-        "svelte-radix": "^1.1.1",
+        "svelte-persisted-store": "^0.12.0",
+        "svelte-radix": "^2.0.1",
         "svelte-ux": "^0.74.7",
         "temporal-polyfill": "^0.2.5",
         "three": "^0.168.0",
@@ -44,8 +44,8 @@
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.83.0",
         "@svelte-put/shortcut": "^3.1.1",
-        "@sveltejs/adapter-static": "^3.0.4",
-        "@sveltejs/kit": "^2.5.27",
+        "@sveltejs/adapter-static": "^3.0.6",
+        "@sveltejs/kit": "^2.8.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/container-queries": "^0.1.1",
@@ -68,9 +68,9 @@
         "postcss": "^8.4.45",
         "postcss-import": "^16.1.0",
         "rollup-plugin-visualizer": "^5.12.0",
-        "svelte": "^5.0.0",
-        "svelte-check": "^4.0.1",
-        "svelte-preprocess": "^6.0.2",
+        "svelte": "^5.1.16",
+        "svelte-check": "^4.0.7",
+        "svelte-preprocess": "^6.0.3",
         "svelte-sonner": "^0.3.28",
         "tailwind-merge": "^2.5.4",
         "tailwind-scrollbar": "^3.1.0",
@@ -83,11 +83,10 @@
         "typescript": "^5.6.2",
         "unplugin-icons": "^0.19.3",
         "vaul-svelte": "^1.0.0-next.2",
-        "vite": "^5.4.6",
+        "vite": "^5.4.11",
         "vite-plugin-inspect": "^0.8.7",
         "vite-plugin-node-polyfills": "^0.22.0",
-        "vite-plugin-tailwind-purgecss": "^0.3.3",
-        "vitest": "^2.0.5"
+        "vite-plugin-tailwind-purgecss": "^0.3.3"
       }
     },
     "node_modules/@0no-co/graphql.web": {
@@ -2926,9 +2925,9 @@
       }
     },
     "node_modules/@sveltejs/adapter-static": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.5.tgz",
-      "integrity": "sha512-kFJR7RxeB6FBvrKZWAEzIALatgy11ISaaZbcPup8JdWUdrmmfUHHTJ738YHJTEfnCiiXi6aX8Q6ePY7tnSMD6Q==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.6.tgz",
+      "integrity": "sha512-MGJcesnJWj7FxDcB/GbrdYD3q24Uk0PIL4QIX149ku+hlJuj//nxUbb0HxUTpjkecWfHjVveSUnUaQWnPRXlpg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -2936,9 +2935,9 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.7.7.tgz",
-      "integrity": "sha512-EvNErTd0QuIUX6SbZecOJQus3cILJR87XyIQXF4kfwWap63/OV58GGTEI47k3ydrFssAWGw4eu3RlB2dmBYETA==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.8.0.tgz",
+      "integrity": "sha512-HCiWupCuKJQ3aPaC4Xc6lpPdjOOnoGzEiYjOqMqppdtfGtY2ABrx932Vw66ZwS2RGXc0BmZvFvNq5SzqlmDVLg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -3376,120 +3375,6 @@
         "viem": "^2.21.43"
       }
     },
-    "node_modules/@vitest/expect": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.3.tgz",
-      "integrity": "sha512-SNBoPubeCJhZ48agjXruCI57DvxcsivVDdWz+SSsmjTT4QN/DfHk3zB/xKsJqMs26bLZ/pNRLnCf0j679i0uWQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/spy": "2.1.3",
-        "@vitest/utils": "2.1.3",
-        "chai": "^5.1.1",
-        "tinyrainbow": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/mocker": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.3.tgz",
-      "integrity": "sha512-eSpdY/eJDuOvuTA3ASzCjdithHa+GIF1L4PqtEELl6Qa3XafdMLBpBlZCIUCX2J+Q6sNmjmxtosAG62fK4BlqQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/spy": "2.1.3",
-        "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.11"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "@vitest/spy": "2.1.3",
-        "msw": "^2.3.5",
-        "vite": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "msw": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vitest/pretty-format": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.3.tgz",
-      "integrity": "sha512-XH1XdtoLZCpqV59KRbPrIhFCOO0hErxrQCMcvnQete3Vibb9UeIOX02uFPfVn3Z9ZXsq78etlfyhnkmIZSzIwQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/runner": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.3.tgz",
-      "integrity": "sha512-JGzpWqmFJ4fq5ZKHtVO3Xuy1iF2rHGV4d/pdzgkYHm1+gOzNZtqjvyiaDGJytRyMU54qkxpNzCx+PErzJ1/JqQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/utils": "2.1.3",
-        "pathe": "^1.1.2"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/snapshot": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.3.tgz",
-      "integrity": "sha512-qWC2mWc7VAXmjAkEKxrScWHWFyCQx/cmiZtuGqMi+WwqQJ2iURsVY4ZfAK6dVo6K2smKRU6l3BPwqEBvhnpQGg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "2.1.3",
-        "magic-string": "^0.30.11",
-        "pathe": "^1.1.2"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/spy": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.3.tgz",
-      "integrity": "sha512-Nb2UzbcUswzeSP7JksMDaqsI43Sj5+Kry6ry6jQJT4b5gAK+NS9NED6mDb8FlMRCX8m5guaHCDZmqYMMWRy5nQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyspy": "^3.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/utils": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.3.tgz",
-      "integrity": "sha512-xpiVfDSg1RrYT0tX6czgerkpcKFmFOF/gCr30+Mve5V2kewCy4Prn1/NDMSRwaSmT7PRaOF83wu+bEtsY1wrvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "2.1.3",
-        "loupe": "^3.1.1",
-        "tinyrainbow": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/@wagmi/connectors": {
       "version": "5.3.5",
       "resolved": "https://registry.npmjs.org/@wagmi/connectors/-/connectors-5.3.5.tgz",
@@ -4090,16 +3975,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/assertion-error": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
-      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/async-mutex": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.2.6.tgz",
@@ -4516,16 +4391,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "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,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/cacheable-lookup": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
@@ -4620,23 +4485,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/chai": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
-      "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "assertion-error": "^2.0.1",
-        "check-error": "^2.1.1",
-        "deep-eql": "^5.0.1",
-        "loupe": "^3.1.0",
-        "pathval": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/chalk": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
@@ -4649,16 +4497,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/check-error": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
-      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      }
-    },
     "node_modules/chokidar": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
@@ -5238,16 +5076,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/deep-eql": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
-      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -7272,13 +7100,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/loupe": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
-      "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lowercase-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
@@ -8216,16 +8037,6 @@
       "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "license": "MIT"
     },
-    "node_modules/pathval": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
-      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.16"
-      }
-    },
     "node_modules/pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -9524,13 +9335,6 @@
         "node": ">=12.4.0"
       }
     },
-    "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,
-      "license": "ISC"
-    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -9641,13 +9445,6 @@
         "node": ">= 10.x"
       }
     },
-    "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,
-      "license": "MIT"
-    },
     "node_modules/std-env": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
@@ -10067,9 +9864,9 @@
       }
     },
     "node_modules/svelte-check": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.0.5.tgz",
-      "integrity": "sha512-icBTBZ3ibBaywbXUat3cK6hB5Du+Kq9Z8CRuyLmm64XIe2/r+lQcbuBx/IQgsbrC+kT2jQ0weVpZSSRIPwB6jQ==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.0.7.tgz",
+      "integrity": "sha512-24hwo+D5L35HOXsh3Z2sU4WhdDLavlHquYaJhrEqAt+mV1xOVzoMVYThW80n99osDJxyuH+vxjNFkNRL4EvwTg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10091,15 +9888,15 @@
       }
     },
     "node_modules/svelte-persisted-store": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.11.0.tgz",
-      "integrity": "sha512-9RgJ5DrawGyyfK22A80cfu8Jose3CV8YjEZKz9Tn94rQ0tWyEmYr+XI+wrVF6wjRbW99JMDSVcFRiM3XzVJj/w==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.12.0.tgz",
+      "integrity": "sha512-BdBQr2SGSJ+rDWH8/aEV5GthBJDapVP0GP3fuUCA7TjYG5ctcB+O9Mj9ZC0+Jo1oJMfZUd1y9H68NFRR5MyIJA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.14"
       },
       "peerDependencies": {
-        "svelte": "^3.48.0 || ^4.0.0 || ^5.0.0-next.0"
+        "svelte": "^3.48.0 || ^4 || ^5"
       }
     },
     "node_modules/svelte-preprocess": {
@@ -10158,12 +9955,16 @@
       }
     },
     "node_modules/svelte-radix": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-1.1.1.tgz",
-      "integrity": "sha512-TCbV7fzlJ2aEUB0nu2EodVA+r1eYj526IYpmGUTV32Z0bIrCUvx3K8xX3tcxR5dDFA5ZBU1Hxr4RYC4TDFEQ4A==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-2.0.1.tgz",
+      "integrity": "sha512-YrX44Dj+Rp6YZuPSjdmyd6P8QTkb2NXwySUCZYzjwkP6Cl3dZaTBPPeaSOutP3v3ycQ2XwyNOpyn4p0QcN+uYQ==",
       "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=7.0.0"
+      },
       "peerDependencies": {
-        "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.1"
+        "svelte": "^5.0.0"
       }
     },
     "node_modules/svelte-sonner": {
@@ -10509,13 +10310,6 @@
         "globrex": "^0.1.2"
       }
     },
-    "node_modules/tinybench": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
-      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/tinyexec": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
@@ -10548,36 +10342,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/tinypool": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz",
-      "integrity": "sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      }
-    },
-    "node_modules/tinyrainbow": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
-      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tinyspy": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
-      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -11161,9 +10925,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
-      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11220,28 +10984,6 @@
         }
       }
     },
-    "node_modules/vite-node": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.3.tgz",
-      "integrity": "sha512-I1JadzO+xYX887S39Do+paRePCKoiDrWRRjp9kkG5he0t7RXNvPAJPCQSJqbGN4uCrFFeS3Kj3sLqY8NMYBEdA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cac": "^6.7.14",
-        "debug": "^4.3.6",
-        "pathe": "^1.1.2",
-        "vite": "^5.0.0"
-      },
-      "bin": {
-        "vite-node": "vite-node.mjs"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/vite-plugin-inspect": {
       "version": "0.8.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.7.tgz",
@@ -11915,71 +11657,6 @@
         }
       }
     },
-    "node_modules/vitest": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.3.tgz",
-      "integrity": "sha512-Zrxbg/WiIvUP2uEzelDNTXmEMJXuzJ1kCpbDvaKByFA9MNeO95V+7r/3ti0qzJzrxdyuUw5VduN7k+D3VmVOSA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/expect": "2.1.3",
-        "@vitest/mocker": "2.1.3",
-        "@vitest/pretty-format": "^2.1.3",
-        "@vitest/runner": "2.1.3",
-        "@vitest/snapshot": "2.1.3",
-        "@vitest/spy": "2.1.3",
-        "@vitest/utils": "2.1.3",
-        "chai": "^5.1.1",
-        "debug": "^4.3.6",
-        "magic-string": "^0.30.11",
-        "pathe": "^1.1.2",
-        "std-env": "^3.7.0",
-        "tinybench": "^2.9.0",
-        "tinyexec": "^0.3.0",
-        "tinypool": "^1.0.0",
-        "tinyrainbow": "^1.2.0",
-        "vite": "^5.0.0",
-        "vite-node": "2.1.3",
-        "why-is-node-running": "^2.3.0"
-      },
-      "bin": {
-        "vitest": "vitest.mjs"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "@edge-runtime/vm": "*",
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.1.3",
-        "@vitest/ui": "2.1.3",
-        "happy-dom": "*",
-        "jsdom": "*"
-      },
-      "peerDependenciesMeta": {
-        "@edge-runtime/vm": {
-          "optional": true
-        },
-        "@types/node": {
-          "optional": true
-        },
-        "@vitest/browser": {
-          "optional": true
-        },
-        "@vitest/ui": {
-          "optional": true
-        },
-        "happy-dom": {
-          "optional": true
-        },
-        "jsdom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -12066,23 +11743,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/why-is-node-running": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
-      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "siginfo": "^2.0.0",
-        "stackback": "0.0.2"
-      },
-      "bin": {
-        "why-is-node-running": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
diff --git a/app/package.json b/app/package.json
index 6c2b87dacf..26f93a99ed 100644
--- a/app/package.json
+++ b/app/package.json
@@ -31,8 +31,8 @@
     "@wagmi/core": "^2.14.3",
     "gql.tada": "^1.8.7",
     "graphql-request": "7.1.0",
-    "svelte-persisted-store": "^0.11.0",
-    "svelte-radix": "^1.1.1",
+    "svelte-persisted-store": "^0.12.0",
+    "svelte-radix": "^2.0.1",
     "svelte-ux": "^0.74.7",
     "temporal-polyfill": "^0.2.5",
     "three": "^0.168.0",
@@ -50,8 +50,8 @@
     "@melt-ui/pp": "^0.3.2",
     "@melt-ui/svelte": "^0.83.0",
     "@svelte-put/shortcut": "^3.1.1",
-    "@sveltejs/adapter-static": "^3.0.4",
-    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/adapter-static": "^3.0.6",
+    "@sveltejs/kit": "^2.8.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
@@ -74,9 +74,9 @@
     "postcss": "^8.4.45",
     "postcss-import": "^16.1.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.1",
-    "svelte-preprocess": "^6.0.2",
+    "svelte": "^5.1.16",
+    "svelte-check": "^4.0.7",
+    "svelte-preprocess": "^6.0.3",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.4",
     "tailwind-scrollbar": "^3.1.0",
@@ -89,11 +89,10 @@
     "typescript": "^5.6.2",
     "unplugin-icons": "^0.19.3",
     "vaul-svelte": "^1.0.0-next.2",
-    "vite": "^5.4.6",
+    "vite": "^5.4.11",
     "vite-plugin-inspect": "^0.8.7",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-tailwind-purgecss": "^0.3.3",
-    "vitest": "^2.0.5"
+    "vite-plugin-tailwind-purgecss": "^0.3.3"
   },
   "overrides": {
     "globalthis": "npm:@nolyfill/globalthis@^1",
diff --git a/app/src/lib/actions/click-outside.ts b/app/src/lib/actions/click-outside.svelte.ts
similarity index 100%
rename from app/src/lib/actions/click-outside.ts
rename to app/src/lib/actions/click-outside.svelte.ts
diff --git a/app/src/lib/actions/copy.ts b/app/src/lib/actions/copy.svelte.ts
similarity index 100%
rename from app/src/lib/actions/copy.ts
rename to app/src/lib/actions/copy.svelte.ts
diff --git a/app/src/lib/components/chains-gate.svelte b/app/src/lib/components/chains-gate.svelte
index 92dda0194e..ac5f5d4d2c 100644
--- a/app/src/lib/components/chains-gate.svelte
+++ b/app/src/lib/components/chains-gate.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+import type { Snippet } from "svelte"
 import type { Chain } from "$lib/types"
 import LoadingLogo from "./loading-logo.svelte"
 import { chainsQuery } from "$lib/queries/chains"
 import { type Readable, derived } from "svelte/store"
+
 interface Props {
-  children?: import("svelte").Snippet<[any]>
+  children: Snippet<[{ chains: Array<Chain> }]>
 }
 
 let { children }: Props = $props()
@@ -87,7 +89,7 @@ let checkedChains: Readable<Array<Chain>> = derived(chains, $chains => {
 </script>
 
 {#if !!$chains.data}
-  {@render children?.({ chains: $checkedChains, })}
+  {@render children?.({ chains: $checkedChains })}
 {:else if $chains.isLoading}
   <LoadingLogo class="size-16" />
 {:else if $chains.isError}
diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
index 60deb0fd6c..f7e8548222 100644
--- a/app/src/lib/components/connect/connect.svelte
+++ b/app/src/lib/components/connect/connect.svelte
@@ -21,8 +21,9 @@ import { sepoliaStore, evmWalletsInformation } from "$lib/wallet/evm/index.ts"
 import { aptosStore, aptosWalletsInformation } from "$lib/wallet/aptos/index.ts"
 import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.ts"
 import { onMount } from "svelte"
+import { buttonVariants } from "$lib/components/ui/button/index.js"
 
-let buttonText: string = $state()
+let buttonText = $state("Connect Wallet")
 
 let connectedWallets = derived(
   [sepoliaStore, cosmosStore, aptosStore],
@@ -35,10 +36,6 @@ let connectedWallets = derived(
   }
 )
 
-onMount(() => {
-  console.info($aptosStore)
-})
-
 run(() => {
   if ($connectedWallets >= 1) {
     buttonText = $connectedWallets < 3 ? `Connected ${$connectedWallets}/3` : "Connected"
@@ -48,53 +45,46 @@ run(() => {
 })
 
 let sheetOpen = $state(false)
-run(() => {
+$effect(() => {
   if ($navigating) sheetOpen = false
 })
 </script>
 
-<Sheet.Root bind:open={sheetOpen}>
-  <Sheet.Trigger asChild class="w-full" >
-    {#snippet children({ builder })}
-        <Button
-        builders={[builder]}
-        class={cn(
-          $connectedWallets === 1 ? "w-[75px]" : "w-[50px]",
-          "space-x-1.5 lg:w-[180px] text-md bg-accent text-black ml-auto",
-          "hover:bg-cyan-300/90",
-          $sepoliaStore.connectionStatus === "connected" &&
-            $cosmosStore.connectionStatus === "connected",
-        )}
-        on:click={() => (sheetOpen = !sheetOpen)}
-        size="sm"
-      >
-        <WalletIcon class="size-6 text-black" />
-        <span class="font-supermolot font-bold uppercase lg:block hidden">
-          {buttonText}
-        </span>
-        <span class={cn($connectedWallets === 1 ? "font-supermolot font-bold uppercase" : "hidden")}>
-          <!-- {connectedWallets === 1 ? "1/2" : ""} -->
-          {$connectedWallets === 3 ? "" : $connectedWallets > 1 ? `${$connectedWallets}/3` : ""}
-        </span>
-      </Button>
-          {/snippet}
-    </Sheet.Trigger>
+<Sheet.Root>
+  <Sheet.Trigger
+    class={cn(
+      $connectedWallets === 1 ? 'w-[75px]' : 'w-[50px]',
+      'space-x-1.5 lg:w-[180px] text-md bg-accent text-black dark:text-white ml-auto flex',
+      'hover:bg-cyan-300/90',
+      $sepoliaStore.connectionStatus === 'connected' &&
+        $cosmosStore.connectionStatus === 'connected',
+    )}
+  >
+    <WalletIcon class="size-6 text-black dark:text-white" />
+    <span class="font-supermolot font-bold uppercase lg:block hidden">
+      {buttonText}
+    </span>
+    <span class={cn($connectedWallets === 1 ? 'font-supermolot font-bold uppercase' : 'hidden')}>
+      {$connectedWallets === 3 ? '' : $connectedWallets > 1 ? `${$connectedWallets}/3` : ''}
+    </span>
+  </Sheet.Trigger>
+
   <Sheet.Content
     class={cn(
-      "h-full border-solid border-left flex flex-col justify-start",
-      "min-w-[95%] max-w-[90%] sm:min-w-min sm:max-w-[500px]",
-      "overflow-y-auto",
+      'h-full border-solid border-left flex flex-col justify-start',
+      'min-w-[95%] max-w-[90%] sm:min-w-min sm:max-w-[500px]',
+      'overflow-y-auto',
     )}
   >
     <Sheet.Header>
       <Sheet.Title class="flex gap-4 items-center">
         <!-- Connect Wallet -->
         <Avatar.Root
-          class={cn("size-10", $sepoliaStore.connectionStatus !== "connected" && "hidden")}
+          class={cn('size-10', $sepoliaStore.connectionStatus !== 'connected' && 'hidden')}
         >
           <Avatar.Image
             alt="ethereum avatar"
-            src={`https://effigy.im/a/${$sepoliaStore.address || "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd"}.png`}
+            src={`https://effigy.im/a/${$sepoliaStore.address || '0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd'}.png`}
           />
           <Avatar.Fallback>UN</Avatar.Fallback>
         </Avatar.Root>
@@ -143,33 +133,26 @@ run(() => {
         <Label for="unsupported-assets">CRT effect</Label>
       </div>
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild >
-          {#snippet children({ builder })}
-                    <Button
-              builders={[builder]}
-              variant="default"
-              size="icon"
-              class="hover:text-black hover:bg-accent"
-            >
-              <Sun
-                class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-              />
-              <Moon
-                class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-              />
-              <span class="sr-only">Toggle theme</span>
-            </Button>
-                            {/snippet}
-                </DropdownMenu.Trigger>
-        <DropdownMenu.Content class="w-fit rounded-none bg-secondary">
+        <DropdownMenu.Trigger>
+          <Button variant="default" size="icon" class="hover:text-black hover:bg-accent">
+            <Sun
+              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+            />
+            <Moon
+              class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+            />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content class="w-fit rounded-none bg-secondary pr-2 text-black dark:text-white">
           <DropdownMenu.Group>
-            <DropdownMenu.Item on:click={() => setMode("system")} class="cursor-pointer">
+            <DropdownMenu.Item onclick="() => setMode('system')" class="cursor-pointer">
               System
             </DropdownMenu.Item>
-            <DropdownMenu.Item on:click={() => setMode("dark")} class="cursor-pointer">
+            <DropdownMenu.Item onclick="() => setMode('dark')" class="cursor-pointer">
               Dark
             </DropdownMenu.Item>
-            <DropdownMenu.Item on:click={() => setMode("light")} class="cursor-pointer">
+            <DropdownMenu.Item onclick="() => setMode('light')" class="cursor-pointer">
               Light
             </DropdownMenu.Item>
           </DropdownMenu.Group>
diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte
index 1cc7725712..919679d931 100644
--- a/app/src/lib/components/connect/connection.svelte
+++ b/app/src/lib/components/connect/connection.svelte
@@ -5,7 +5,7 @@ import { cn } from "$lib/utilities/shadcn.ts"
 import CopyIcon from "virtual:icons/lucide/copy"
 import CheckIcon from "virtual:icons/lucide/check"
 import { Button } from "$lib/components/ui/button"
-import { copyTextAction } from "$lib/actions/copy.ts"
+import { copyTextAction } from "$lib/actions/copy.svelte.ts"
 import LoaderCircleIcon from "virtual:icons/lucide/loader-circle"
 import MetamaskMobileAlert from "$lib/components/connect/metamask-mobile-alert.svelte"
 import { truncateEvmAddress, truncateUnionAddress } from "$lib/wallet/utilities/format.ts"
@@ -73,19 +73,20 @@ let metamaskAlertDialogOpen = $state(false)
 <h3 class="uppercase font-supermolot font-bold text-xl">{chain}</h3>
 <Button
   {...rest}
-  builders={[{ action: node => copyTextAction(node, { text: address }) }]}
   class={cn(
     "px-2 w-full focus:ring-0 ring-transparent focus-visible:ring-0 flex justify-start",
     connectStatus !== "connected" &&
-      "hover:bg-transparent pointer-events-none text-md font-bold hidden",
+    "hover:bg-transparent pointer-events-none text-md font-bold hidden",
   )}
   id={`${chain}-connect`}
-  on:click={_event => onCopyClick()}
+  onclick={_event => onCopyClick()}
+
   tabindex={0}
   data-connect-button=""
   variant={connectStatus === "connected" ? "default" : "ghost"}
 >
   <div
+
     class={cn(
       "w-full text-left font-mono",
       connectText === "EVM" || connectText === "Cosmos" ? "hidden" : "text-sm sm:text-[15.5px]",
@@ -127,7 +128,7 @@ let metamaskAlertDialogOpen = $state(false)
               connectedWalletId === id &&
               "hover:text-destructive border-destructive hover:bg-transparent dark:hover:text-white",
           )}
-          on:click={async () => {
+          onclick={async () => {
             if (walletIdentifier === OFFENDING_WALLET_ID) {
               metamaskAlertDialogOpen = true
             }
diff --git a/app/src/lib/components/search/cmdk.svelte b/app/src/lib/components/search/cmdk.svelte
index 001bbbdcd1..0e91815660 100644
--- a/app/src/lib/components/search/cmdk.svelte
+++ b/app/src/lib/components/search/cmdk.svelte
@@ -130,18 +130,12 @@ const DISABLE_TAB_INDEX = -1
   onInputClick={() => (commandDialogOpen = true)}
 />
 
-<Command.Dialog
-  preventScroll={true}
-  closeOnEscape={true}
-  closeOnOutsideClick={true}
-  onKeydown={onEnterPress}
-  bind:open={commandDialogOpen}
->
+<Command.Dialog bind:open={commandDialogOpen}>
   <Command.Root
     loop={true}
     shouldFilter={true}
     filter={(value, search) => (value.includes(search) ? 1 : 0)}
-    class={cn("text-foreground bg-background")}
+    class={cn('text-foreground bg-background')}
   >
     <Command.Input
       type="text"
@@ -159,22 +153,21 @@ const DISABLE_TAB_INDEX = -1
 
     <Command.List data-search-dialog="">
       {@const shouldRenderTheBelow =
-        $computedSearchInputResult.type === "tx" || $computedSearchInputResult.type === "address"}
+        $computedSearchInputResult.type === 'tx' || $computedSearchInputResult.type === 'address'}
       {#if shouldRenderTheBelow}
         <Command.Empty
           data-cmdk-empty
-          autocorrect="off"
           spellcheck="false"
           autocapitalize="off"
           class={cn(
-            "h-full px-2 sm:px-3 py-4 text-left flex justify-between text-black dark:text-inherit",
+            'h-full px-2 sm:px-3 py-4 text-left flex justify-between text-black dark:text-inherit',
           )}
         >
-          {#if $computedSearchInputResult.type === "tx"}
+          {#if $computedSearchInputResult.type === 'tx'}
             <span>
               {$computedSearchInputResult.truncated}
             </span>
-          {:else if $computedSearchInputResult.type === "address"}
+          {:else if $computedSearchInputResult.type === 'address'}
             {@const truncatedAddresses = $computedSearchInputResult.truncated ?? []}
             <ul>
               {#each truncatedAddresses as address}
@@ -189,212 +182,149 @@ const DISABLE_TAB_INDEX = -1
         </Command.Empty>
       {/if}
 
-      <Command.Group heading="Interact with the testnet" class={cn("text-black bg-background")}>
+      <Command.Group heading="Interact with the testnet" class={cn('text-black bg-background')}>
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer group",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer group',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/faucet`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <FaucetIcon class="mr-2 size-5" />
-            <span>Get tokens from faucet</span>
-            {#if $page.route.id?.startsWith("/faucet")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <FaucetIcon class="mr-2 size-5" />
+          <span>Get tokens from faucet</span>
+          {#if $page.route.id?.startsWith('/faucet')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
 
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/transfer`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <TransfersIcon class="mr-2 size-5" />
-            <span>Transfer assets across chains</span>
-            {#if $page.route.id?.startsWith("/transfer")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <TransfersIcon class="mr-2 size-5" />
+          <span>Transfer assets across chains</span>
+          {#if $page.route.id?.startsWith('/transfer')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
       </Command.Group>
       <Command.Separator />
 
-      <Command.Group heading="Explore Data" class={cn("text-black bg-background")}>
+      <Command.Group heading="Explore Data" class={cn('text-black bg-background')}>
         {@const userAddresses = [$sepoliaStore?.address, $cosmosStore?.address].filter(Boolean)}
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer",
-            userAddresses && userAddresses.length === 0 ? "hidden" : "",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer',
+            userAddresses && userAddresses.length === 0 ? 'hidden' : '',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
-          onSelect={_value => {
-            goto(`/explorer/address/${userAddresses.join("-")}`)
+          onSelect={() => {
+            goto(`/explorer/address/${userAddresses.join('-')}`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <UserTransfersIcon class="mr-2 size-5" />
-            <span>Your transfers</span>
-            {#if $page.route.id?.startsWith("/explorer/address")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <UserTransfersIcon class="mr-2 size-5" />
+          <span>Your transfers</span>
+          {#if $page.route.id?.startsWith('/explorer/address')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/explorer/transfers`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <ChannelIcon class="mr-2 size-5" />
-            <span>All transfers</span>
-            {#if $page.route.id?.startsWith("/explorer/transfers")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <ChannelIcon class="mr-2 size-5" />
+          <span>All transfers</span>
+          {#if $page.route.id?.startsWith('/explorer/transfers')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/explorer/connections`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <IbcConnectionsIcon class="mr-2 size-5" />
-            <span>IBC connections</span>
-            {#if $page.route.id?.startsWith("/explorer/connections")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <IbcConnectionsIcon class="mr-2 size-5" />
+          <span>IBC connections</span>
+          {#if $page.route.id?.startsWith('/explorer/connections')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
 
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/explorer/channels`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <IbcChannelsIcon class="mr-2 size-5" />
-            <span>IBC channels</span>
-            {#if $page.route.id?.startsWith("/explorer/channels")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <IbcChannelsIcon class="mr-2 size-5" />
+          <span>IBC channels</span>
+          {#if $page.route.id?.startsWith('/explorer/channels')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
 
         <Command.Item
-          
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            "hover:cursor-pointer",
-            "focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1",
+            'hover:cursor-pointer',
+            'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/explorer/index-status`)
             commandDialogOpen = false
           }}
         >
-          {#snippet children({ attrs })}
-                    <HubbleStatusIcon class="mr-2 size-5" />
-            <span>Hubble index status</span>
-            {#if $page.route.id?.startsWith("/explorer/index-status")}
-              <Badge
-                variant="outline"
-                class={cn(
-                  "px-2 py-1 m-0 ml-auto rounded-none text-xs",
-                  attrs["data-selected"] ? "text-black bg-union-accent" : "bg-primary-foreground",
-                )}
-              >
-                active page
-              </Badge>
-            {/if}
-                            {/snippet}
-                </Command.Item>
+          <HubbleStatusIcon class="mr-2 size-5" />
+          <span>Hubble index status</span>
+          {#if $page.route.id?.startsWith('/explorer/index-status')}
+            <Badge variant="outline" class={cn('px-2 py-1 m-0 ml-auto rounded-none text-xs')}>
+              active page
+            </Badge>
+          {/if}
+        </Command.Item>
       </Command.Group>
     </Command.List>
   </Command.Root>
diff --git a/app/src/lib/components/search/search-bar.svelte b/app/src/lib/components/search/search-bar.svelte
index 61a6ca1aee..3c9bfdf177 100644
--- a/app/src/lib/components/search/search-bar.svelte
+++ b/app/src/lib/components/search/search-bar.svelte
@@ -7,7 +7,9 @@ import { Button } from "$lib/components/ui/button"
 interface Props {
   searchInput?: string
   onInputClick?: ((event: MouseEvent) => void) | undefined
-  onInputChange?: ((event: InputEvent) => void) | undefined
+  onInputChange?:
+    | ((event: Event & { currentTarget: EventTarget & HTMLInputElement }) => void)
+    | undefined
   windowWidth?: any
 }
 
@@ -20,46 +22,45 @@ let {
 </script>
 
 <div class="flex justify-end">
-    <Button size="icon" variant="outline" class="sm:hidden" on:click={onInputClick}>
-        <SearchIcon class="size-5 text-muted-foreground"/>
-    </Button>
-    <div class="hidden sm:flex relative mr-auto flex-1 w-full max-w-full antialiased">
-        <SearchIcon class="absolute left-2.5 top-2.5 size-5 text-muted-foreground"/>
-        <Input
-                type="text"
-                tabindex={-1}
-                name="search"
-                readonly={true}
-                autocorrect="off"
-                inputmode="search"
-                autocomplete="off"
-                spellcheck="false"
-                autocapitalize="off"
-                on:click={onInputClick}
-                on:input={onInputChange}
-                bind:value={searchInput}
-                pattern="[A-Za-z0-9\-]+"
-                placeholder={(windowWidth >= 930 || windowWidth <= 768) && windowWidth > 538
-      ? 'Search for address or tx hash...'
-      : 'Search...'}
-                class={cn(
-      'h-10 cursor-pointer',
-      'dark:hover:bg-muted hover:bg-secondary',
-      'shadow-sm transition-colors placeholder:text-muted-foreground',
-      'w-full bg-background pl-8 self-stretch lowercase border-[1px] border-input',
-      'focus-visible:border-secondary focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-    )}
-        />
-        <kbd
-                class={cn(
-      'h-7 gap-0.5 px-1.5',
-      'text-white dark:text-black',
-      'absolute select-none pointer-events-none',
-      'right-1.5 top-1.5 items-center border bg-primary font-mono text-xs font-medium opacity-100 hidden md:inline-flex',
-    )}
-        >
-            <span class="text-sm mb-1"><span class="text-lg mr-0.25">⌘</span>K</span>
-        </kbd>
-    </div>
+  <Button size="icon" variant="outline" class="sm:hidden" onclick={onInputClick}>
+    <SearchIcon class="size-5 text-muted-foreground" />
+  </Button>
+  <div class="hidden sm:flex relative mr-auto flex-1 w-full max-w-full antialiased">
+    <SearchIcon class="absolute left-2.5 top-2.5 size-5 text-muted-foreground" />
+    <Input
+      type="text"
+      tabindex={-1}
+      name="search"
+      readonly={true}
+      autocorrect="off"
+      inputmode="search"
+      autocomplete="off"
+      spellcheck="false"
+      autocapitalize="off"
+      onclick={onInputClick}
+      oninput={event => onInputChange?.(event)}
+      bind:value={searchInput}
+      pattern="[A-Za-z0-9\-]+"
+      placeholder={(windowWidth >= 930 || windowWidth <= 768) && windowWidth > 538
+        ? 'Search for address or tx hash...'
+        : 'Search...'}
+      class={cn(
+        'h-10 cursor-pointer',
+        'dark:hover:bg-muted hover:bg-secondary',
+        'shadow-sm transition-colors placeholder:text-muted-foreground',
+        'w-full bg-background pl-8 self-stretch lowercase border-[1px] border-input',
+        'focus-visible:border-secondary focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      )}
+    />
+    <kbd
+      class={cn(
+        'h-7 gap-0.5 px-1.5',
+        'text-white dark:text-black',
+        'absolute select-none pointer-events-none',
+        'right-1.5 top-1.5 items-center border bg-primary font-mono text-xs font-medium opacity-100 hidden md:inline-flex',
+      )}
+    >
+      <span class="text-sm mb-1"><span class="text-lg mr-0.25">⌘</span>K</span>
+    </kbd>
+  </div>
 </div>
-
diff --git a/app/src/lib/components/table-cells/cell-copy.svelte b/app/src/lib/components/table-cells/cell-copy.svelte
index f6fb638e0f..a410b5085c 100644
--- a/app/src/lib/components/table-cells/cell-copy.svelte
+++ b/app/src/lib/components/table-cells/cell-copy.svelte
@@ -4,7 +4,7 @@ import CopyIcon from "virtual:icons/lucide/copy"
 import { Button } from "$lib/components/ui/button"
 import CheckIcon from "virtual:icons/lucide/check"
 import { truncate } from "$lib/utilities/format.ts"
-import { copyTextAction } from "$lib/actions/copy.ts"
+import { copyTextAction } from "$lib/actions/copy.svelte"
 
 let copyClicked = $state(false)
 const toggleCopy = () => (copyClicked = !copyClicked)
diff --git a/app/src/lib/components/table-cells/cell-icon-tooltip.svelte b/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
index 80f30f2364..6af928ed92 100644
--- a/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
+++ b/app/src/lib/components/table-cells/cell-icon-tooltip.svelte
@@ -3,7 +3,7 @@ import { cn } from "$lib/utilities/shadcn.ts"
 import EyeIcon from "virtual:icons/lucide/eye"
 import CopyIcon from "virtual:icons/lucide/copy"
 import CheckIcon from "virtual:icons/lucide/check"
-import { copyTextAction } from "$lib/actions/copy"
+import { copyTextAction } from "$lib/actions/copy.svelte"
 import { truncate } from "$lib/utilities/format.ts"
 import { Button } from "$lib/components/ui/button/index.ts"
 import * as Tooltip from "$lib/components/ui/tooltip/index.ts"
diff --git a/app/src/routes/+error.svelte b/app/src/routes/+error.svelte
index 6ce2c5522e..252f500499 100644
--- a/app/src/routes/+error.svelte
+++ b/app/src/routes/+error.svelte
@@ -9,7 +9,7 @@ import { page } from "$app/stores"
 <main
   class="size-full flex items-center mt-20 flex-col space-y-10 mx-auto max-w-5xl"
 >
-  <p class="text-8xl font-black tracking-wider">{$page.status}</p>
+  <p class="text-7xl font-black tracking-wider">{$page.status}</p>
   <p class="text-xl font-semibold text-center">{$page.error?.message}</p>
   {#if $page.error && "errorId" in $page.error}
     <div class="text-black/70 text-center dark:text-foreground">
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 973e5ecc99..a9cce7833a 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-import { run } from "svelte/legacy"
-
 import "$lib/polyfill.ts"
 import "$styles/index.css"
 import { onMount } from "svelte"
@@ -21,11 +19,8 @@ import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools"
 import DeprecationNotice from "$lib/components/deprecation-notice.svelte"
 import { checkWebGLSupport, deviceWidth } from "$lib/utilities/device.ts"
 import { disablePinchToZoom } from "$lib/utilities/disable-pinch-to-zoom.ts"
-interface Props {
-  children?: import("svelte").Snippet
-}
 
-let { children }: Props = $props()
+let { children } = $props()
 
 const { queryClient, QueryClientProvider } = createQueryClient()
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
@@ -35,7 +30,7 @@ onMount(() => {
   disablePinchToZoom()
 })
 
-run(() => {
+$effect(() => {
   updateTheme({ path: $page.url.pathname, activeTheme: "dark" })
 })
 </script>
diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
index be088c5454..c7150f9bf0 100644
--- a/app/src/routes/explorer/+layout.svelte
+++ b/app/src/routes/explorer/+layout.svelte
@@ -1,19 +1,14 @@
 <script lang="ts">
-import { onMount } from "svelte"
 import { page } from "$app/stores"
 import { onNavigate } from "$app/navigation"
 import { cn } from "$lib/utilities/shadcn.ts"
 import type { LayoutData } from "./$types.ts"
 import Menu from "./(components)/menu.svelte"
+import { onMount, type Snippet } from "svelte"
 import StatsBar from "./(components)/stats-bar.svelte"
 import ExplorerBreadcrumbs from "$lib/components/explorer-breadcrumbs.svelte"
 
-interface Props {
-  data: LayoutData
-  children?: import("svelte").Snippet
-}
-
-let { data, children }: Props = $props()
+let { data, children }: { data: LayoutData; children: Snippet } = $props()
 
 let explorerRoute = $state($page.route.id?.split("/").at(2) ?? null)
 let explorerPageDescription = $derived(
@@ -35,6 +30,8 @@ onMount(() => {
     explorerLayoutElement.style.paddingBottom = `${elementHeight + 10}px`
   }
 })
+
+console.info("explorer layout")
 </script>
 
 <svelte:head>
@@ -44,48 +41,42 @@ onMount(() => {
 <div class="flex flex-row sm:divide-x overflow-x-none max-w-full w-full">
   <nav
     class={cn(
-      "sm:bg-muted h-full overflow-y-auto",
-      explorerRoute === null
-        ? "flex-1 sm:flex-none"
-        : "hidden sm:block sm:w-[174px]"
+      'sm:bg-muted h-full overflow-y-auto',
+      explorerRoute === null ? 'flex-1 sm:flex-none' : 'hidden sm:block sm:w-[174px]',
     )}
   >
-    <h2 class="sm:hidden ml-3 mt-6 mb-3 text-2xl font-bold font-supermolot">
-      Explorer
-    </h2>
+    <h2 class="sm:hidden ml-3 mt-6 mb-3 text-2xl font-bold font-supermolot">Explorer</h2>
     <Menu tableRoutes={data.tables} />
   </nav>
   <main
     class={cn(
-      "overflow-auto flex flex-col flex-1 w-full",
-      explorerRoute === null ? "hidden sm:block" : ""
+      'overflow-auto flex flex-col flex-1 w-full',
+      explorerRoute === null ? 'hidden sm:block' : '',
     )}
   >
-    {#if $page.route.id?.split("/").length === 3}
+    <!-- {#if $page.route.id?.split('/').length === 3}
       <StatsBar />
     {/if}
 
-    {#if ($page?.route?.id?.split("/")?.length ?? 0) > 3}
-        <ExplorerBreadcrumbs/>
-    {/if}
+    {#if ($page?.route?.id?.split('/')?.length ?? 0) > 3}
+      <ExplorerBreadcrumbs />
+    {/if} -->
 
-    <div class="flex flex-col flex-1 size-full">
+    <!-- <div class="flex flex-col flex-1 size-full">
       <div class="p-2 sm:p-4 md:p-6" data-explorer-layout>
-        <div
-          class={cn($page.route.id?.split("/").length === 3 ? "" : "hidden")}
-        >
+        <div class={cn($page.route.id?.split('/').length === 3 ? '' : 'hidden')}>
           <h2
             class="text-2xl sm:text-4xl font-extrabold font-expanded sm:!font-extra-expanded uppercase font-supermolot pt-4 sm:pt-0"
           >
-            {explorerRoute?.replaceAll("-", " ")}
+            {explorerRoute?.replaceAll('-', ' ')}
           </h2>
           <p class="pb-4 -mt-1 text-muted-foreground">
-            {">"}
+            {'>'}
             {explorerPageDescription}
           </p>
         </div>
         {@render children?.()}
       </div>
-    </div>
+    </div> -->
   </main>
 </div>
diff --git a/app/src/routes/explorer/transfers/+layout.svelte b/app/src/routes/explorer/transfers/+layout.svelte
index 32f43d7a6a..47f3d08cf2 100644
--- a/app/src/routes/explorer/transfers/+layout.svelte
+++ b/app/src/routes/explorer/transfers/+layout.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 import "temporal-polyfill/global"
-interface Props {
-  children?: import("svelte").Snippet
-}
+console.info("transfers layout")
 
-let { children }: Props = $props()
+let { children } = $props()
 </script>
 
 {@render children?.()}
diff --git a/app/src/routes/explorer/transfers/+page.svelte b/app/src/routes/explorer/transfers/+page.svelte
index 26be89a487..9206e9a905 100644
--- a/app/src/routes/explorer/transfers/+page.svelte
+++ b/app/src/routes/explorer/transfers/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 import ChainsGate from "$lib/components/chains-gate.svelte"
 import TableTransfers from "$lib/components/transfers-table/transfers-table.svelte"
+
+console.info("transfers")
 </script>
 
-<ChainsGate >
+<ChainsGate {chains}>
   {#snippet children({ chains })}
     <TableTransfers
       {chains}

From 2e55ae6b449c41c56e259ab5387e7d75b09df03e Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Tue, 12 Nov 2024 22:47:10 -0800
Subject: [PATCH 4/4] chore: more migration

---
 app/app.nix                                   |   2 +-
 app/package-lock.json                         | 433 +++++++-----------
 app/package.json                              |  63 +--
 app/src/lib/components/chains-gate.svelte     |   1 +
 .../components/explorer-breadcrumbs.svelte    |  15 +-
 .../lib/components/explorer-pagination.svelte |  12 +-
 .../explorer-table-paginated.svelte           |   2 +-
 .../components/navigation/navigation.svelte   |   3 +
 .../components/spinning-outline-logo.svelte   |   3 +
 .../lib/components/table/flex-render.svelte   |  46 ++
 app/src/lib/components/table/index.ts         |   4 +
 .../lib/components/table/render-helpers.ts    | 111 +++++
 app/src/lib/components/table/table.svelte.ts  | 113 +++++
 .../lib/components/table/virtual.svelte.ts    |  92 ++++
 .../transfers-table/transfers-table.svelte    |  31 +-
 app/src/lib/queries/chains.ts                 |  20 +-
 app/src/lib/utilities/utilities.svelte.ts     |  11 +
 .../routes/explorer/(components)/table.svelte | 281 ++++++------
 app/src/routes/explorer/+layout.svelte        |  10 +-
 app/src/routes/explorer/+page.svelte          |   6 +-
 .../address/[slug=address]/+layout.svelte     |   6 +
 .../[channel_id]/[sequence]/+page.svelte      |   3 +
 .../routes/explorer/transfers/+page.svelte    |   4 +-
 .../(components)/transfer-form.svelte         |   6 +
 24 files changed, 798 insertions(+), 480 deletions(-)
 create mode 100644 app/src/lib/components/table/flex-render.svelte
 create mode 100644 app/src/lib/components/table/index.ts
 create mode 100644 app/src/lib/components/table/render-helpers.ts
 create mode 100644 app/src/lib/components/table/table.svelte.ts
 create mode 100644 app/src/lib/components/table/virtual.svelte.ts
 create mode 100644 app/src/lib/utilities/utilities.svelte.ts

diff --git a/app/app.nix b/app/app.nix
index d285ffbce2..22b8f49822 100644
--- a/app/app.nix
+++ b/app/app.nix
@@ -19,7 +19,7 @@ _: {
     {
       packages = {
         app = jsPkgs.buildNpmPackage {
-          npmDepsHash = "sha256-JL4Hx04dLW4AgZE1lFlTbQvXhLgsiomfzLChn+KbPZY=";
+          npmDepsHash = "";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [
diff --git a/app/package-lock.json b/app/package-lock.json
index ef715c2fd8..f519e77326 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -16,34 +16,34 @@
         "@cosmjs/stargate": "0.32.4",
         "@cosmjs/tendermint-rpc": "^0.32.4",
         "@tanstack/match-sorter-utils": "^8.19.4",
-        "@tanstack/query-core": "^5.55.4",
-        "@tanstack/svelte-query": "^5.55.4",
-        "@tanstack/svelte-table": "^8.20.5",
-        "@tanstack/svelte-virtual": "^3.10.7",
+        "@tanstack/query-core": "^5.59.20",
+        "@tanstack/svelte-query": "^5.59.20",
+        "@tanstack/svelte-table": "9.0.0-alpha.10",
+        "@tanstack/svelte-virtual": "^3.10.9",
         "@unionlabs/client": "^0.0.39",
-        "@wagmi/connectors": "^5.3.5",
-        "@wagmi/core": "^2.14.3",
-        "gql.tada": "^1.8.7",
-        "graphql-request": "7.1.0",
+        "@wagmi/connectors": "^5.3.9",
+        "@wagmi/core": "^2.14.5",
+        "gql.tada": "^1.8.10",
+        "graphql-request": "7.1.2",
         "svelte-persisted-store": "^0.12.0",
         "svelte-radix": "^2.0.1",
-        "svelte-ux": "^0.74.7",
+        "svelte-ux": "^0.75.4",
         "temporal-polyfill": "^0.2.5",
-        "three": "^0.168.0",
-        "valibot": "^0.41.0",
-        "viem": "^2.21.43"
+        "three": "^0.170.0",
+        "valibot": "^0.42.1",
+        "viem": "^2.21.45"
       },
       "devDependencies": {
-        "@iconify-json/fa6-solid": "^1.2.0",
-        "@iconify-json/logos": "^1.2.0",
-        "@iconify-json/lucide": "^1.2.3",
-        "@iconify-json/mdi": "^1.2.0",
-        "@iconify-json/tabler": "^1.2.1",
-        "@keplr-wallet/types": "^0.12.127",
+        "@iconify-json/fa6-solid": "^1.2.1",
+        "@iconify-json/logos": "^1.2.3",
+        "@iconify-json/lucide": "^1.2.14",
+        "@iconify-json/mdi": "^1.2.1",
+        "@iconify-json/tabler": "^1.2.7",
+        "@keplr-wallet/types": "^0.12.155",
         "@leapwallet/types": "^0.0.5",
         "@melt-ui/pp": "^0.3.2",
-        "@melt-ui/svelte": "^0.83.0",
-        "@svelte-put/shortcut": "^3.1.1",
+        "@melt-ui/svelte": "^0.86.0",
+        "@svelte-put/shortcut": "^4.0.0",
         "@sveltejs/adapter-static": "^3.0.6",
         "@sveltejs/kit": "^2.8.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -51,21 +51,22 @@
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
-        "@tanstack/svelte-query-devtools": "^5.55.4",
+        "@tanstack/svelte-query-devtools": "^5.59.20",
+        "@tanstack/table-core": "^9.0.0-alpha.10",
         "@total-typescript/ts-reset": "^0.6.1",
-        "@types/node": "^22.5.4",
+        "@types/node": "^22.9.0",
         "@types/postcss-import": "^14.0.3",
-        "@types/three": "^0.168.0",
+        "@types/three": "^0.170.0",
         "autoprefixer": "^10.4.20",
         "bits-ui": "^1.0.0-next.52",
         "clsx": "^2.1.1",
-        "fluid-tailwind": "^1.0.3",
+        "fluid-tailwind": "^1.0.4",
         "graphql": "^16.9.0",
         "lucide-svelte": "^0.456.0",
         "mode-watcher": "^0.4.1",
         "paneforge": "^1.0.0-next.1",
         "patch-package": "^8.0.0",
-        "postcss": "^8.4.45",
+        "postcss": "^8.4.49",
         "postcss-import": "^16.1.0",
         "rollup-plugin-visualizer": "^5.12.0",
         "svelte": "^5.1.16",
@@ -74,14 +75,14 @@
         "svelte-sonner": "^0.3.28",
         "tailwind-merge": "^2.5.4",
         "tailwind-scrollbar": "^3.1.0",
-        "tailwind-variants": "^0.2.1",
-        "tailwindcss": "^3.4.10",
+        "tailwind-variants": "^0.3.0",
+        "tailwindcss": "^3.4.14",
         "tailwindcss-animate": "^1.0.7",
-        "tslib": "^2.7.0",
-        "tsx": "^4.19.0",
+        "tslib": "^2.8.1",
+        "tsx": "^4.19.2",
         "typed-query-selector": "^2.12.0",
-        "typescript": "^5.6.2",
-        "unplugin-icons": "^0.19.3",
+        "typescript": "^5.6.3",
+        "unplugin-icons": "^0.20.1",
         "vaul-svelte": "^1.0.0-next.2",
         "vite": "^5.4.11",
         "vite-plugin-inspect": "^0.8.7",
@@ -256,15 +257,15 @@
       }
     },
     "node_modules/@coinbase/wallet-sdk": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@coinbase/wallet-sdk/-/wallet-sdk-4.1.0.tgz",
-      "integrity": "sha512-SkJJ72X/AA3+aS21sPs/4o4t6RVeDSA7HuBW4zauySX3eBiPU0zmVw95tXH/eNSX50agKz9WzeN8P5F+HcwLOw==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@coinbase/wallet-sdk/-/wallet-sdk-4.2.3.tgz",
+      "integrity": "sha512-BcyHZ/Ec84z0emORzqdXDv4P0oV+tV3a0OirfA8Ko1JGBIAVvB+hzLvZzCDvnuZx7MTK+Dd8Y9Tjlo446BpCIg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@noble/hashes": "^1.4.0",
         "clsx": "^1.2.1",
         "eventemitter3": "^5.0.1",
-        "preact": "^10.16.0"
+        "preact": "^10.24.2"
       }
     },
     "node_modules/@coinbase/wallet-sdk/node_modules/clsx": {
@@ -1014,9 +1015,9 @@
       }
     },
     "node_modules/@iconify-json/lucide": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.10.tgz",
-      "integrity": "sha512-cR1xpRJ4dnoXlC0ShDjzbrZyu+ICH4OUaYl7S51MhZUO1H040s7asVqv0LsDbofSLDuzWkHCLsBabTTRL0mCUg==",
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.14.tgz",
+      "integrity": "sha512-NDJKk1NQRNymlr5B5uiWBRc3RAZ8r+8A1F4SU+60udy05V0GwILAnoJvlg6oY0WZBhqb/ChaU1LWm1XHmJ4DEg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -1034,9 +1035,9 @@
       }
     },
     "node_modules/@iconify-json/tabler": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.2.6.tgz",
-      "integrity": "sha512-+LjRsbx4tqaLNorQldahZRCepYVAC8Fj6hpkHuZFWB0xj81YasACT0f9JGtavG4+LePdvkXRTuz5RQOU6YcnXA==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.2.7.tgz",
+      "integrity": "sha512-q6FbDeC5caOC7i7/dcJOv7PdovHWItd84hCvsnlD/mzsrl5Nhol6eSQOMRv1bIpyxykGEiSDbOsVK5f23j/aFg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1199,9 +1200,9 @@
       }
     },
     "node_modules/@keplr-wallet/types": {
-      "version": "0.12.143",
-      "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.143.tgz",
-      "integrity": "sha512-M3V4xA+uw/arZ/06Hoy1gW2pYfD/gv8XSf05nX2wknVkX3l8PUxCImQuhz6EPqVeB1KmFoRmxZR5bOxp4vaQxA==",
+      "version": "0.12.155",
+      "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.155.tgz",
+      "integrity": "sha512-iPC/6C4s4kImN/GMyjRNyQnxm2Rb/yNIqx/JYpQxcaM4VX7OwPDlXwMT6gtJcW2PcKfII7VC+1nJ86SXI/a7lg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -1254,9 +1255,9 @@
       }
     },
     "node_modules/@melt-ui/svelte": {
-      "version": "0.83.0",
-      "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.83.0.tgz",
-      "integrity": "sha512-E7QT+8YSftz+Hdk1W0hNR3f+cnaF2COMWkStn+2u4vk0RO1I9mXRJl+bJD6uhYaH146oxEB+5elu/ABbv6rpsA==",
+      "version": "0.86.0",
+      "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.86.0.tgz",
+      "integrity": "sha512-kFyioxwvDZfD7nChq+sHaJKyLQPleJlzIORNJx1Ou1NavMrwK1sJkAdtgxuyEzief7SU3f4skSF0Cpvjewx5fA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1674,34 +1675,6 @@
         "node": ">=16.0.0"
       }
     },
-    "node_modules/@molt/command": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@molt/command/-/command-0.9.0.tgz",
-      "integrity": "sha512-1JI8dAlpqlZoXyKWVQggX7geFNPxBpocHIXQCsnxDjKy+3WX4SGyZVJXuLlqRRrX7FmQCuuMAfx642ovXmPA9g==",
-      "license": "MIT",
-      "dependencies": {
-        "@molt/types": "0.2.0",
-        "alge": "0.8.1",
-        "chalk": "^5.3.0",
-        "lodash.camelcase": "^4.3.0",
-        "lodash.snakecase": "^4.1.1",
-        "readline-sync": "^1.4.10",
-        "string-length": "^6.0.0",
-        "strip-ansi": "^7.1.0",
-        "ts-toolbelt": "^9.6.0",
-        "type-fest": "^4.3.1",
-        "zod": "^3.22.2"
-      }
-    },
-    "node_modules/@molt/types": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@molt/types/-/types-0.2.0.tgz",
-      "integrity": "sha512-p6ChnEZDGjg9PYPec9BK6Yp5/DdSrYQvXTBAtgrnqX6N36cZy37ql1c8Tc5LclfIYBNG7EZp8NBcRTYJwyi84g==",
-      "license": "MIT",
-      "dependencies": {
-        "ts-toolbelt": "^9.6.0"
-      }
-    },
     "node_modules/@motionone/animation": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
@@ -2668,9 +2641,9 @@
       ]
     },
     "node_modules/@safe-global/safe-apps-provider": {
-      "version": "0.18.3",
-      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.3.tgz",
-      "integrity": "sha512-f/0cNv3S4v7p8rowAjj0hDCg8Q8P/wBjp5twkNWeBdvd0RDr7BuRBPPk74LCqmjQ82P+1ltLlkmVFSmxTIT7XQ==",
+      "version": "0.18.4",
+      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.4.tgz",
+      "integrity": "sha512-SWYeG3gyTO6wGHMSokfHakZ9isByn2mHsM0VohIorYFFEyGGmJ89btnTm+DqDUSoQtvWAatZB7XNy6CaYMvqtg==",
       "license": "MIT",
       "dependencies": {
         "@safe-global/safe-apps-sdk": "^9.1.0",
@@ -2915,13 +2888,13 @@
       }
     },
     "node_modules/@svelte-put/shortcut": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-3.1.1.tgz",
-      "integrity": "sha512-2L5EYTZXiaKvbEelVkg5znxqvfZGZai3m97+cAiUBhLZwXnGtviTDpHxOoZBsqz41szlfRMcamW/8o0+fbW3ZQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-4.0.0.tgz",
+      "integrity": "sha512-FNAiL5aV7Yh/02vKwlzX7d8s3naKZ3VJ7f/uADO+kjuoBRzZQmWG8AeY46FVS0jdkHN+k0pT+clHF270AQePew==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "svelte": "^3.55.0 || ^4.0.0 || ^5.0.0"
+        "svelte": "^5.1.0"
       }
     },
     "node_modules/@sveltejs/adapter-static": {
@@ -3095,9 +3068,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.16.tgz",
-      "integrity": "sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==",
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.20.tgz",
+      "integrity": "sha512-e8vw0lf7KwfGe1if4uPFhvZRWULqHjFcz3K8AebtieXvnMOz5FSzlZe3mTLlPuUBcydCnBRqYs2YJ5ys68wwLg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3105,9 +3078,9 @@
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.58.0.tgz",
-      "integrity": "sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==",
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.59.20.tgz",
+      "integrity": "sha512-vxhuQ+8VV4YWQSFxQLsuM+dnEKRY7VeRzpNabFXdhEwsBYLrjXlF1pM38A8WyKNLqZy8JjyRO8oP4Wd/oKHwuQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -3116,12 +3089,12 @@
       }
     },
     "node_modules/@tanstack/svelte-query": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.59.16.tgz",
-      "integrity": "sha512-s0CRtjUK0Lo+uvRU+XFxWjmTRV1hr0fe+Z/R+wDGnTzbMKSyaSKYeC0aZSQKZdAO6R/DvEVrD9tgjof1ojufnQ==",
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.59.20.tgz",
+      "integrity": "sha512-DFRTz9i6OXIF+o4GFDRF4g3Q6BSBKWxoahZPcPbCAdXAS4NRhTnVFR4HgEtzlhfoQx8yMJsLXMhDiGUw365HsA==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.59.16"
+        "@tanstack/query-core": "5.59.20"
       },
       "funding": {
         "type": "github",
@@ -3132,13 +3105,13 @@
       }
     },
     "node_modules/@tanstack/svelte-query-devtools": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.59.16.tgz",
-      "integrity": "sha512-ITgIwMs0U0pq2N9X5L8/UXcuGgJFetmBVxUqpIBmzpFMLoHfSN6xPYSue00RpW1khHO0cAjLOwLI1HjOOhMSdg==",
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.59.20.tgz",
+      "integrity": "sha512-885Ms0BXxTYwr8KSHpMBXv/KvdGyXw0grpGCJL4XFPrOqy/CazfZKSkDcbjxmVOttvT4C6/LLOnNskYdXBTr1w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-devtools": "5.58.0",
+        "@tanstack/query-devtools": "5.59.20",
         "esm-env": "^1.0.0"
       },
       "funding": {
@@ -3146,17 +3119,17 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/svelte-query": "^5.59.16",
+        "@tanstack/svelte-query": "^5.59.20",
         "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
       }
     },
     "node_modules/@tanstack/svelte-table": {
-      "version": "8.20.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.20.5.tgz",
-      "integrity": "sha512-sFqrA6zAt0mzreg3HWlcPeIwrfKp25tMDTrhkeq5GDzWthv/sW9bRFR3YGRcoxmtmHk3mS1wLQfJrotDXu7eDg==",
+      "version": "9.0.0-alpha.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-9.0.0-alpha.10.tgz",
+      "integrity": "sha512-H0eAQlpXgK9JYYrgc0cWXVqEJywxkhuYODnVobUZGskFg6J+5PP+7UCjzrY9ftMge6s1hwb2Ipq3u4wPYJz7HA==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/table-core": "8.20.5"
+        "@tanstack/table-core": "9.0.0-alpha.10"
       },
       "engines": {
         "node": ">=12"
@@ -3166,29 +3139,29 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0 || ^3.49.0"
+        "svelte": "^5.0.0-next"
       }
     },
     "node_modules/@tanstack/svelte-virtual": {
-      "version": "3.10.8",
-      "resolved": "https://registry.npmjs.org/@tanstack/svelte-virtual/-/svelte-virtual-3.10.8.tgz",
-      "integrity": "sha512-0h3ycxlfvS4BOyRCW/obD5ZgK+IoPaavo96rSIpZkBhVDEBZ14G+FPXyssIAomyEEI9Vx8eIpKkTOSO+lMt8Kw==",
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/svelte-virtual/-/svelte-virtual-3.10.9.tgz",
+      "integrity": "sha512-QNWWL3OfGeZ3kqYwK7bpTtEznY7xSX2PdHkNnD6Is0GbtR+7J7g+G/OG1SV64JoQoM0Gn1am/nQFFjmYO0Os1g==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/virtual-core": "3.10.8"
+        "@tanstack/virtual-core": "3.10.9"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "svelte": "^3.48.0 || ^4.0.0"
+        "svelte": "^3.48.0 || ^4.0.0 || ^5.0.0"
       }
     },
     "node_modules/@tanstack/table-core": {
-      "version": "8.20.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
-      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
+      "version": "9.0.0-alpha.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-9.0.0-alpha.10.tgz",
+      "integrity": "sha512-f2kEGGL+d+I7evkhU926cID2MyH7nPI8acAPcwpaAR1DrgTNStAMp3NS+tgMDyrYtc8zd+RyTxC8m+NBhHhFmA==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3199,9 +3172,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.10.8",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz",
-      "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==",
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz",
+      "integrity": "sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3284,12 +3257,12 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.7.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.9.tgz",
-      "integrity": "sha512-jrTfRC7FM6nChvU7X2KqcrgquofrWLFDeYC1hKfwNWomVvrn7JIksqf344WN2X/y8xrgqBd2dJATZV4GbatBfg==",
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.19.8"
       }
     },
     "node_modules/@types/postcss-import": {
@@ -3328,9 +3301,9 @@
       "license": "MIT"
     },
     "node_modules/@types/three": {
-      "version": "0.168.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.168.0.tgz",
-      "integrity": "sha512-qAGLGzbaYgkkonOBfwOr+TZpOskPfFjrDAj801WQSVkUz0/D9zwir4vhruJ/CC/GteywzR9pqeVVfs5th/2oKw==",
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-CUm2uckq+zkCY7ZbFpviRttY+6f9fvwm6YqSqPfA5K22s9w7R4VnA3rzJse8kHVvuzLcTx+CjNCs2NYe0QFAyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3376,14 +3349,14 @@
       }
     },
     "node_modules/@wagmi/connectors": {
-      "version": "5.3.5",
-      "resolved": "https://registry.npmjs.org/@wagmi/connectors/-/connectors-5.3.5.tgz",
-      "integrity": "sha512-M6JTaRFN7Q50no9Rpth2azUQn1ZwiFz0NrDEumpJWqdKh6Yz0zNhqFIcalJ/8PigCHnGXXw5cVY9CtN93nQ4uQ==",
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/@wagmi/connectors/-/connectors-5.3.9.tgz",
+      "integrity": "sha512-TS1nJRfQbwPpeW28fPWkanuMuUJSoAAS0+zEthStq/PmwIDV4VKvOWycERgbl5pVeNtvdtHAstd7QtfhVADBXQ==",
       "license": "MIT",
       "dependencies": {
-        "@coinbase/wallet-sdk": "4.1.0",
+        "@coinbase/wallet-sdk": "4.2.3",
         "@metamask/sdk": "0.30.1",
-        "@safe-global/safe-apps-provider": "0.18.3",
+        "@safe-global/safe-apps-provider": "0.18.4",
         "@safe-global/safe-apps-sdk": "9.1.0",
         "@walletconnect/ethereum-provider": "2.17.0",
         "cbw-sdk": "npm:@coinbase/wallet-sdk@3.9.3"
@@ -3392,7 +3365,7 @@
         "url": "https://github.com/sponsors/wevm"
       },
       "peerDependencies": {
-        "@wagmi/core": "2.14.3",
+        "@wagmi/core": "2.14.5",
         "typescript": ">=5.0.4",
         "viem": "2.x"
       },
@@ -3403,9 +3376,9 @@
       }
     },
     "node_modules/@wagmi/core": {
-      "version": "2.14.3",
-      "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.14.3.tgz",
-      "integrity": "sha512-KpbejlQcXa5w6G9c0cXMspZJ/+ni3HzhybhoBCk9lWbQgGkI5o27Ay+FVR7TI6sMG8V5sG/XE51Rscyqg8xiNg==",
+      "version": "2.14.5",
+      "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.14.5.tgz",
+      "integrity": "sha512-tkeZYWtBiITQhvKspX4diEEs44rVu+d+dd2DAL5lAeTGS9d/Iu2VAT1G04frnVv49DUPS6zUu6PkCcUpSwS8Xw==",
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "5.0.1",
@@ -3865,22 +3838,11 @@
         "acorn": ">=8.9.0"
       }
     },
-    "node_modules/alge": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/alge/-/alge-0.8.1.tgz",
-      "integrity": "sha512-kiV9nTt+XIauAXsowVygDxMZLplZxDWt0W8plE/nB32/V2ziM/P/TxDbSVK7FYIUt2Xo16h3/htDh199LNPCKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "lodash.ismatch": "^4.4.0",
-        "remeda": "^1.0.0",
-        "ts-toolbelt": "^9.6.0",
-        "zod": "^3.17.3"
-      }
-    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -4489,6 +4451,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
       "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -5508,7 +5471,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
       "integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esrap": {
@@ -5898,9 +5860,9 @@
       }
     },
     "node_modules/fluid-tailwind": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fluid-tailwind/-/fluid-tailwind-1.0.3.tgz",
-      "integrity": "sha512-JhSklHiXUcKnb/PIru1TbyorLD+k0rCIgeAbFwzu1QyQHYDKmKKsKzN7xPisSeGGr7FtYY9S63t+tzddUlxxrQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fluid-tailwind/-/fluid-tailwind-1.0.4.tgz",
+      "integrity": "sha512-jO1+4l4r3kE/5We3kYRl3o4JsbFA2zoluEwJG3VrytlKuCfK4aTv5QHqXgOaw0YQd9HKjOVIFYsVvhG8sxIh5w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6192,34 +6154,15 @@
       }
     },
     "node_modules/graphql-request": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/graphql-request/-/graphql-request-7.1.0.tgz",
-      "integrity": "sha512-Ouu/lYVFhARS1aXeZoVJWnGT6grFJXTLwXJuK4mUGGRo0EUk1JkyYp43mdGmRgUVezpRm6V5Sq3t8jBDQcajng==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/graphql-request/-/graphql-request-7.1.2.tgz",
+      "integrity": "sha512-+XE3iuC55C2di5ZUrB4pjgwe+nIQBuXVIK9J98wrVwojzDW3GMdSBZfxUk8l4j9TieIpjpggclxhNEU9ebGF8w==",
       "license": "MIT",
       "dependencies": {
-        "@graphql-typed-document-node/core": "^3.2.0",
-        "@molt/command": "^0.9.0",
-        "zod": "^3.23.8"
-      },
-      "bin": {
-        "graffle": "build/cli/generate.js"
+        "@graphql-typed-document-node/core": "^3.2.0"
       },
       "peerDependencies": {
-        "@dprint/formatter": "^0.3.0",
-        "@dprint/typescript": "^0.91.1",
-        "dprint": "^0.46.2",
         "graphql": "14 - 16"
-      },
-      "peerDependenciesMeta": {
-        "@dprint/formatter": {
-          "optional": true
-        },
-        "@dprint/typescript": {
-          "optional": true
-        },
-        "dprint": {
-          "optional": true
-        }
       }
     },
     "node_modules/h3": {
@@ -7037,12 +6980,6 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
-    "node_modules/lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
-      "license": "MIT"
-    },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
@@ -7056,12 +6993,6 @@
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
       "license": "MIT"
     },
-    "node_modules/lodash.ismatch": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
-      "integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==",
-      "license": "MIT"
-    },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -7076,12 +7007,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/lodash.snakecase": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
-      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==",
-      "license": "MIT"
-    },
     "node_modules/long": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
@@ -7772,9 +7697,9 @@
       }
     },
     "node_modules/ox": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/ox/-/ox-0.1.0.tgz",
-      "integrity": "sha512-xs+STnBP8XG38N+7W5c/5LRN68XOleiTfKJlSBw5rcorIfGvpJPB45lRE3AlziiiuZ+KrEd/1ZLrD+LkN5XFzQ==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ox/-/ox-0.1.2.tgz",
+      "integrity": "sha512-ak/8K0Rtphg9vnRJlbOdaX9R7cmxD2MiSthjWGaQdMk3D7hrAlDoM+6Lxn7hN52Za3vrXfZ7enfke/5WjolDww==",
       "funding": [
         {
           "type": "github",
@@ -8197,9 +8122,9 @@
       "license": "MIT"
     },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "dev": true,
       "funding": [
         {
@@ -8218,7 +8143,7 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -8836,15 +8761,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/readline-sync": {
-      "version": "1.4.10",
-      "resolved": "https://registry.npmjs.org/readline-sync/-/readline-sync-1.4.10.tgz",
-      "integrity": "sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/readonly-date": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/readonly-date/-/readonly-date-1.0.0.tgz",
@@ -8866,12 +8782,6 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "license": "MIT"
     },
-    "node_modules/remeda": {
-      "version": "1.61.0",
-      "resolved": "https://registry.npmjs.org/remeda/-/remeda-1.61.0.tgz",
-      "integrity": "sha512-caKfSz9rDeSKBQQnlJnVW3mbVdFgxgGWQKq1XlFokqjf+hQD5gxutLGTTY2A/x24UxVyJe9gH5fAkFI63ULw4A==",
-      "license": "MIT"
-    },
     "node_modules/remove-accents": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
@@ -9529,21 +9439,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/string-length": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-6.0.0.tgz",
-      "integrity": "sha512-1U361pxZHEQ+FeSjzqRpV+cu2vTzYeWeafXFLykiFlv4Vc0n3njgU8HrMbyik5uwm77naWMuVG8fhEF+Ovb1Kg==",
-      "license": "MIT",
-      "dependencies": {
-        "strip-ansi": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -9622,6 +9517,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -9998,36 +9894,37 @@
       }
     },
     "node_modules/svelte-ux": {
-      "version": "0.74.9",
-      "resolved": "https://registry.npmjs.org/svelte-ux/-/svelte-ux-0.74.9.tgz",
-      "integrity": "sha512-df1F5EMPbjqGkbBuuHMmgRHp+gQspLrbQjF3foyzWss6gsRkZwFba0JkaopOwQNMMWb3Zu+2obIgQJXt1eZ/Dg==",
+      "version": "0.75.4",
+      "resolved": "https://registry.npmjs.org/svelte-ux/-/svelte-ux-0.75.4.tgz",
+      "integrity": "sha512-i4E+G2lGQ4mdS/zBQuQHIjKbYgrJ7lGVurZBqwvfcuyMX9EZHggCfYhx+TmD7Awra4h7TctvuQhKGCuElsdHcw==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.6.10",
+        "@floating-ui/dom": "^1.6.11",
         "@fortawesome/fontawesome-common-types": "^6.6.0",
         "@mdi/js": "^7.4.47",
         "clsx": "^2.1.1",
         "culori": "^4.0.1",
         "d3-array": "^3.2.4",
         "d3-scale": "^4.0.2",
-        "date-fns": "^3.6.0",
+        "date-fns": "^4.1.0",
+        "esm-env": "^1.0.0",
         "immer": "^10.1.1",
         "lodash-es": "^4.17.21",
         "prism-svelte": "^0.5.0",
         "prism-themes": "^1.9.0",
         "prismjs": "^1.29.0",
-        "sveld": "^0.20.0",
-        "tailwind-merge": "^2.5.2",
+        "sveld": "^0.20.2",
+        "tailwind-merge": "^2.5.4",
         "zod": "^3.23.8"
       },
       "peerDependencies": {
-        "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120"
+        "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"
       }
     },
     "node_modules/svelte-ux/node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -10086,13 +9983,13 @@
       }
     },
     "node_modules/tailwind-variants": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.2.1.tgz",
-      "integrity": "sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.3.0.tgz",
+      "integrity": "sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "tailwind-merge": "^2.2.0"
+        "tailwind-merge": "^2.5.4"
       },
       "engines": {
         "node": ">=16.x",
@@ -10281,9 +10178,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.168.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.168.0.tgz",
-      "integrity": "sha512-6m6jXtDwMJEK/GGMbAOTSAmxNdzKvvBzgd7q8bE/7Tr6m7PaBh5kKLrN7faWtlglXbzj7sVba48Idwx+NRsZXw==",
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
       "license": "MIT"
     },
     "node_modules/timers-browserify": {
@@ -10389,22 +10286,16 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/ts-toolbelt": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz",
-      "integrity": "sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==",
-      "license": "Apache-2.0"
-    },
     "node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
     "node_modules/tsx": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.1.tgz",
-      "integrity": "sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz",
+      "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10428,18 +10319,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/type-fest": {
-      "version": "4.26.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
-      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/typed-query-selector": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
@@ -10532,9 +10411,9 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.19.3",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.19.3.tgz",
-      "integrity": "sha512-EUegRmsAI6+rrYr0vXjFlIP+lg4fSC4zb62zAZKx8FGXlWAGgEGBCa3JDe27aRAXhistObLPbBPhwa/0jYLFkQ==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.20.1.tgz",
+      "integrity": "sha512-0z5sYGx07Q69ZrJB4kjmx7a5LYLNSWwyq95Ox9OuSG2y/sbhJaHUapRPOJcKmKhOAyToDVRdy9P7gxJ05lYipw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10553,6 +10432,7 @@
         "@svgr/core": ">=7.0.0",
         "@svgx/core": "^1.0.1",
         "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
         "vue-template-compiler": "^2.6.12",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -10566,6 +10446,9 @@
         "@vue/compiler-sfc": {
           "optional": true
         },
+        "svelte": {
+          "optional": true
+        },
         "vue-template-compiler": {
           "optional": true
         },
@@ -10816,9 +10699,9 @@
       }
     },
     "node_modules/valibot": {
-      "version": "0.41.0",
-      "resolved": "https://registry.npmjs.org/valibot/-/valibot-0.41.0.tgz",
-      "integrity": "sha512-igDBb8CTYr8YTQlOKgaN9nSS0Be7z+WRuaeYqGf3Cjz3aKmSnqEmYnkfVjzIuumGqfHpa3fLIvMEAfhrpqN8ng==",
+      "version": "0.42.1",
+      "resolved": "https://registry.npmjs.org/valibot/-/valibot-0.42.1.tgz",
+      "integrity": "sha512-3keXV29Ar5b//Hqi4MbSdV7lfVp6zuYLZuA9V1PvQUsXqogr+u5lvLPLk3A4f74VUXDnf/JfWMN6sB+koJ/FFw==",
       "license": "MIT",
       "peerDependencies": {
         "typescript": ">=5"
@@ -10873,9 +10756,9 @@
       }
     },
     "node_modules/viem": {
-      "version": "2.21.43",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-2.21.43.tgz",
-      "integrity": "sha512-dSLb5bMRSr2Jw65xSZs6YMynhLMewvmlmYMtBK3IblFqa3b1O/N+Fn9qkTZxP5BUzKp8AB2eRTipESzGkLtfAg==",
+      "version": "2.21.45",
+      "resolved": "https://registry.npmjs.org/viem/-/viem-2.21.45.tgz",
+      "integrity": "sha512-I+On/IiaObQdhDKWU5Rurh6nf3G7reVkAODG5ECIfjsrGQ3EPJnxirUPT4FNV6bWER5iphoG62/TidwuTSOA1A==",
       "funding": [
         {
           "type": "github",
@@ -10890,7 +10773,7 @@
         "@scure/bip39": "1.4.0",
         "abitype": "1.0.6",
         "isows": "1.0.6",
-        "ox": "0.1.0",
+        "ox": "0.1.2",
         "webauthn-p256": "0.0.10",
         "ws": "8.18.0"
       },
diff --git a/app/package.json b/app/package.json
index 26f93a99ed..86249b57d7 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,34 +22,34 @@
     "@cosmjs/stargate": "0.32.4",
     "@cosmjs/tendermint-rpc": "^0.32.4",
     "@tanstack/match-sorter-utils": "^8.19.4",
-    "@tanstack/query-core": "^5.55.4",
-    "@tanstack/svelte-query": "^5.55.4",
-    "@tanstack/svelte-table": "^8.20.5",
-    "@tanstack/svelte-virtual": "^3.10.7",
+    "@tanstack/query-core": "^5.59.20",
+    "@tanstack/svelte-query": "^5.59.20",
+    "@tanstack/svelte-table": "9.0.0-alpha.10",
+    "@tanstack/svelte-virtual": "^3.10.9",
     "@unionlabs/client": "^0.0.39",
-    "@wagmi/connectors": "^5.3.5",
-    "@wagmi/core": "^2.14.3",
-    "gql.tada": "^1.8.7",
-    "graphql-request": "7.1.0",
+    "@wagmi/connectors": "^5.3.9",
+    "@wagmi/core": "^2.14.5",
+    "gql.tada": "^1.8.10",
+    "graphql-request": "7.1.2",
     "svelte-persisted-store": "^0.12.0",
     "svelte-radix": "^2.0.1",
-    "svelte-ux": "^0.74.7",
+    "svelte-ux": "^0.75.4",
     "temporal-polyfill": "^0.2.5",
-    "three": "^0.168.0",
-    "valibot": "^0.41.0",
-    "viem": "^2.21.43"
+    "three": "^0.170.0",
+    "valibot": "^0.42.1",
+    "viem": "^2.21.45"
   },
   "devDependencies": {
-    "@iconify-json/fa6-solid": "^1.2.0",
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.3",
-    "@iconify-json/mdi": "^1.2.0",
-    "@iconify-json/tabler": "^1.2.1",
-    "@keplr-wallet/types": "^0.12.127",
+    "@iconify-json/fa6-solid": "^1.2.1",
+    "@iconify-json/logos": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.14",
+    "@iconify-json/mdi": "^1.2.1",
+    "@iconify-json/tabler": "^1.2.7",
+    "@keplr-wallet/types": "^0.12.155",
     "@leapwallet/types": "^0.0.5",
     "@melt-ui/pp": "^0.3.2",
-    "@melt-ui/svelte": "^0.83.0",
-    "@svelte-put/shortcut": "^3.1.1",
+    "@melt-ui/svelte": "^0.86.0",
+    "@svelte-put/shortcut": "^4.0.0",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.8.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -57,21 +57,22 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
-    "@tanstack/svelte-query-devtools": "^5.55.4",
+    "@tanstack/svelte-query-devtools": "^5.59.20",
+    "@tanstack/table-core": "^9.0.0-alpha.10",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/node": "^22.5.4",
+    "@types/node": "^22.9.0",
     "@types/postcss-import": "^14.0.3",
-    "@types/three": "^0.168.0",
+    "@types/three": "^0.170.0",
     "autoprefixer": "^10.4.20",
     "bits-ui": "^1.0.0-next.52",
     "clsx": "^2.1.1",
-    "fluid-tailwind": "^1.0.3",
+    "fluid-tailwind": "^1.0.4",
     "graphql": "^16.9.0",
     "lucide-svelte": "^0.456.0",
     "mode-watcher": "^0.4.1",
     "paneforge": "^1.0.0-next.1",
     "patch-package": "^8.0.0",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "svelte": "^5.1.16",
@@ -80,14 +81,14 @@
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.4",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.10",
+    "tailwind-variants": "^0.3.0",
+    "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
-    "tslib": "^2.7.0",
-    "tsx": "^4.19.0",
+    "tslib": "^2.8.1",
+    "tsx": "^4.19.2",
     "typed-query-selector": "^2.12.0",
-    "typescript": "^5.6.2",
-    "unplugin-icons": "^0.19.3",
+    "typescript": "^5.6.3",
+    "unplugin-icons": "^0.20.1",
     "vaul-svelte": "^1.0.0-next.2",
     "vite": "^5.4.11",
     "vite-plugin-inspect": "^0.8.7",
diff --git a/app/src/lib/components/chains-gate.svelte b/app/src/lib/components/chains-gate.svelte
index ac5f5d4d2c..fc9dce3370 100644
--- a/app/src/lib/components/chains-gate.svelte
+++ b/app/src/lib/components/chains-gate.svelte
@@ -11,6 +11,7 @@ interface Props {
 
 let { children }: Props = $props()
 
+
 let chains = chainsQuery()
 
 const EMPTY_CHAINS: Array<Chain> = []
diff --git a/app/src/lib/components/explorer-breadcrumbs.svelte b/app/src/lib/components/explorer-breadcrumbs.svelte
index f452f63342..1b8255ff30 100644
--- a/app/src/lib/components/explorer-breadcrumbs.svelte
+++ b/app/src/lib/components/explorer-breadcrumbs.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
 import { page } from "$app/stores"
-import LoadingLogo from "$lib/components/loading-logo.svelte"
-import TablePackets from "$lib/components/tables/packets.svelte"
-import { derived } from "svelte/store"
+import { onMount } from 'svelte'
+// import { derived } from "svelte/store"
 
-const pathComponents = derived(page, $page => $page.url.pathname.split("/").slice(2))
+// const pathComponents = derived(page, $page => $page.url.pathname.split("/").slice(2))
+
+const pathComponents = $derived($page.url.pathname.split("/").slice(2))
+
+onMount(() => {
+  console.info(pathComponents)
+})
 </script>
 
 <nav>
   <div class="flex overflow-x-auto text-sm">
-    {#each $pathComponents as pathComponent, index} 
+    {#each pathComponents as pathComponent, index} 
       {@const pathUrl = $page.url.pathname.split("/").slice(0, index+3).join("/")}
       <a class="block border-b px-2 py-1 border-r" href={pathUrl}>{pathComponent}</a>
     {/each}
diff --git a/app/src/lib/components/explorer-pagination.svelte b/app/src/lib/components/explorer-pagination.svelte
index 550a21734d..b320d54a36 100644
--- a/app/src/lib/components/explorer-pagination.svelte
+++ b/app/src/lib/components/explorer-pagination.svelte
@@ -1,3 +1,9 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: live = $timestamp === null` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: live = $timestamp === null` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: live = $timestamp === null` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <!-- @migration-task Error while migrating Svelte code: can't migrate `$: live = $timestamp === null` to `$derived` because there's a variable named derived.
      Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
@@ -45,7 +51,7 @@ const onCurrentClick = () => {
   <Button
     size="sm"
     variant="default"
-    on:click={onCurrentClick}
+    onclick={onCurrentClick}
     disabled={live}
     title={live ? "Already on the newest page" : "Go to the first page"}
   >
@@ -56,7 +62,7 @@ const onCurrentClick = () => {
       size="sm"
       variant="secondary"
       title={live ? "Already on the newest page" : "Go to the previous page"}
-      on:click={onNewerPage}
+      onclick={onNewerPage}
       class="pl-2"
     >
       <ChevronLeft class="size-6" />
@@ -67,7 +73,7 @@ const onCurrentClick = () => {
   <Button
     size="sm"
     variant="secondary"
-    on:click={onOlderPage}
+    onclick={onOlderPage}
     class="pr-2"
   >
     Older
diff --git a/app/src/lib/components/explorer-table-paginated.svelte b/app/src/lib/components/explorer-table-paginated.svelte
index 11fb869b0b..c236912e67 100644
--- a/app/src/lib/components/explorer-table-paginated.svelte
+++ b/app/src/lib/components/explorer-table-paginated.svelte
@@ -20,7 +20,7 @@ let { queryResult, columns, dataStore }: Props = $props()
 
 {#if $queryResult.data}
   <Table {dataStore} {columns} />
-  <ExplorerPagination explorerItems={dataStore} />
+  <!-- <ExplorerPagination explorerItems={dataStore} /> -->
 {:else if $queryResult.status  === "pending"}
   <LoadingLogo class="size-16" />
 {/if}
diff --git a/app/src/lib/components/navigation/navigation.svelte b/app/src/lib/components/navigation/navigation.svelte
index 0e676013b4..09379f1d18 100644
--- a/app/src/lib/components/navigation/navigation.svelte
+++ b/app/src/lib/components/navigation/navigation.svelte
@@ -1,4 +1,7 @@
 <!-- @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') -->
+<!-- @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 lang="ts">
 import { routes } from "./index.ts"
 import { cn } from "$lib/utilities/shadcn.ts"
diff --git a/app/src/lib/components/spinning-outline-logo.svelte b/app/src/lib/components/spinning-outline-logo.svelte
index 2a675806fe..798e67df7f 100644
--- a/app/src/lib/components/spinning-outline-logo.svelte
+++ b/app/src/lib/components/spinning-outline-logo.svelte
@@ -1,3 +1,6 @@
+<!-- @migration-task Error while migrating Svelte code: Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression -->
+<!-- @migration-task Error while migrating Svelte code: Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression -->
+<!-- @migration-task Error while migrating Svelte code: Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression -->
 <script lang="ts"> 
   import Square from './spinning-logo/square.svelte';
 	let cubeWidth = 64;
diff --git a/app/src/lib/components/table/flex-render.svelte b/app/src/lib/components/table/flex-render.svelte
new file mode 100644
index 0000000000..a3aba483cc
--- /dev/null
+++ b/app/src/lib/components/table/flex-render.svelte
@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+
+	type TData = unknown;
+	type TValue = unknown;
+	type TContext = unknown;
+</script>
+
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import {
+		RenderComponentConfig,
+		RenderSnippetConfig,
+	} from "./render-helpers.js";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+	};
+
+	let { content, context }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet(params)}
+	{:else}
+		{result}
+	{/if}
+{/if}
diff --git a/app/src/lib/components/table/index.ts b/app/src/lib/components/table/index.ts
new file mode 100644
index 0000000000..6abfb10883
--- /dev/null
+++ b/app/src/lib/components/table/index.ts
@@ -0,0 +1,4 @@
+export { default as FlexRender } from "./flex-render.svelte"
+export { renderComponent, renderSnippet } from "./render-helpers.js"
+export { createSvelteTable } from "./table.svelte.js"
+export { createVirtualizer, createWindowVirtualizer } from "./virtual.svelte.js"
diff --git a/app/src/lib/components/table/render-helpers.ts b/app/src/lib/components/table/render-helpers.ts
new file mode 100644
index 0000000000..fdba4e00ab
--- /dev/null
+++ b/app/src/lib/components/table/render-helpers.ts
@@ -0,0 +1,111 @@
+import type { Component, ComponentProps, Snippet } from "svelte"
+
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig<TComponent extends Component> {
+  component: TComponent
+  props: ComponentProps<TComponent> | Record<string, never>
+  constructor(
+    component: TComponent,
+    props: ComponentProps<TComponent> | Record<string, never> = {}
+  ) {
+    this.component = component
+    this.props = props
+  }
+}
+
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig<TProps> {
+  snippet: Snippet<[TProps]>
+  params: TProps
+  constructor(snippet: Snippet<[TProps]>, params: TProps) {
+    this.snippet = snippet
+    this.params = params
+  }
+}
+
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  T extends Component<any>,
+  Props extends ComponentProps<T>
+>(component: T, props: Props) {
+  return new RenderComponentConfig(component, props)
+}
+
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps) {
+  return new RenderSnippetConfig(snippet, params)
+}
diff --git a/app/src/lib/components/table/table.svelte.ts b/app/src/lib/components/table/table.svelte.ts
new file mode 100644
index 0000000000..944915a597
--- /dev/null
+++ b/app/src/lib/components/table/table.svelte.ts
@@ -0,0 +1,113 @@
+import {
+  type RowData,
+  type TableState,
+  type TableOptions,
+  type TableOptionsResolved,
+  _createTable as createTable,
+} from "@tanstack/table-core"
+
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
+  const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+    {
+      state: {},
+      // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+      onStateChange() {},
+      renderFallbackValue: null,
+      mergeOptions: (
+        defaultOptions: TableOptions<TData>,
+        options: Partial<TableOptions<TData>>
+      ) => {
+        return mergeObjects(defaultOptions, options)
+      }
+    },
+    options
+  )
+
+  const table = createTable(resolvedOptions)
+  let state = $state<Partial<TableState>>(table.initialState)
+
+  function updateOptions() {
+    table.setOptions(prev => {
+      return mergeObjects(prev, options, {
+        state: mergeObjects(state, options.state || {}),
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onStateChange: (updater: any) => {
+          if (updater instanceof Function) state = updater(state)
+          else state = mergeObjects(state, updater)
+
+          options.onStateChange?.(updater)
+        }
+      })
+    })
+  }
+
+  updateOptions()
+
+  $effect.pre(() => {
+    updateOptions()
+  })
+
+  return table
+}
+
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
+ */
+function mergeObjects<T>(source: T): T
+function mergeObjects<T, U>(source: T, source1: U): T & U
+function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V
+function mergeObjects<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function mergeObjects(...sources: any): any {
+  const target = {}
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i]
+    if (typeof source === "function") source = source()
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source)
+      for (const key in descriptors) {
+        if (key in target) continue
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              let s = sources[i]
+              if (typeof s === "function") s = s()
+              const v = s?.[key]
+              if (v !== undefined) return v
+            }
+          }
+        })
+      }
+    }
+  }
+  return target
+}
diff --git a/app/src/lib/components/table/virtual.svelte.ts b/app/src/lib/components/table/virtual.svelte.ts
new file mode 100644
index 0000000000..d5081e2a12
--- /dev/null
+++ b/app/src/lib/components/table/virtual.svelte.ts
@@ -0,0 +1,92 @@
+import {
+  Virtualizer,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  observeWindowOffset,
+  observeWindowRect,
+  windowScroll,
+  type PartialKeys,
+  type VirtualizerOptions
+} from "@tanstack/virtual-core"
+
+export * from "@tanstack/virtual-core"
+
+function createVirtualizerBase<
+  TScrollElement extends Element | Window,
+  TItemElement extends Element
+>(
+  options: VirtualizerOptions<TScrollElement, TItemElement>
+): Virtualizer<TScrollElement, TItemElement> {
+  const resolvedOptions = { ...options }
+  const instance = new Virtualizer(resolvedOptions)
+
+  let virtualItems = $state(instance.getVirtualItems())
+  let totalSize = $state(instance.getTotalSize())
+
+  const handler = {
+    get(
+      target: Virtualizer<TScrollElement, TItemElement>,
+      prop: keyof Virtualizer<TScrollElement, TItemElement>
+    ) {
+      if (prop === "getVirtualItems") return () => virtualItems
+      if (prop === "getTotalSize") return () => totalSize
+      return Reflect.get(target, prop)
+    }
+  }
+
+  const virtualizer = new Proxy(instance, handler)
+  virtualizer.setOptions(resolvedOptions)
+
+  $effect(() => {
+    const cleanup = virtualizer._didMount()
+    virtualizer._willUpdate()
+    return cleanup
+  })
+
+  $effect(() => {
+    virtualizer.setOptions({
+      ...resolvedOptions,
+      ...options,
+      onChange: (instance, sync) => {
+        instance._willUpdate()
+        virtualItems = instance.getVirtualItems()
+        totalSize = instance.getTotalSize()
+        options.onChange?.(instance, sync)
+      }
+    })
+    virtualizer.measure()
+  })
+
+  return virtualizer
+}
+
+export function createVirtualizer<TScrollElement extends Element, TItemElement extends Element>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    "observeElementRect" | "observeElementOffset" | "scrollToFn"
+  >
+): Virtualizer<TScrollElement, TItemElement> {
+  return createVirtualizerBase<TScrollElement, TItemElement>({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  })
+}
+
+export function createWindowVirtualizer<TItemElement extends Element>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    "getScrollElement" | "observeElementRect" | "observeElementOffset" | "scrollToFn"
+  >
+): Virtualizer<Window, TItemElement> {
+  return createVirtualizerBase<Window, TItemElement>({
+    getScrollElement: () => (typeof document !== "undefined" ? window : null),
+    observeElementRect: observeWindowRect,
+    observeElementOffset: observeWindowOffset,
+    scrollToFn: windowScroll,
+    initialOffset: () => (typeof document !== "undefined" ? window.scrollY : 0),
+    ...options
+  })
+}
diff --git a/app/src/lib/components/transfers-table/transfers-table.svelte b/app/src/lib/components/transfers-table/transfers-table.svelte
index 803826442a..0d0bc4159a 100644
--- a/app/src/lib/components/transfers-table/transfers-table.svelte
+++ b/app/src/lib/components/transfers-table/transfers-table.svelte
@@ -1,5 +1,19 @@
 <script lang="ts">
-import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
+// import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
+	import {
+		type ColumnDef,
+		type ColumnFiltersState,
+		type PaginationState,
+		type RowSelectionState,
+		type SortingState,
+		type VisibilityState,
+		getCoreRowModel,
+		getFacetedRowModel,
+		getFacetedUniqueValues,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		getSortedRowModel,
+	} from "@tanstack/table-core";
 import type { Chain } from "$lib/types.ts"
 import type { Transfer } from "./transfers-types.ts"
 import type { UnwrapReadable } from "$lib/utilities/types.ts"
@@ -11,6 +25,7 @@ import { transfersQuery } from "$lib/queries/transfers.ts"
 import { timestamp } from "$lib/stores/page.ts"
 
 import ExplorerTablePaginated from "$lib/components/explorer-table-paginated.svelte"
+    import { renderComponent } from '$lib/components/table/render-helpers.ts'
 
 interface Props {
   chains: Array<Chain>
@@ -22,6 +37,7 @@ let { chains, normalizedAddresses = null, pageSize }: Props = $props()
 
 const transfers = transfersQuery(normalizedAddresses, timestamp, pageSize)
 
+// @ts-expect-error
 const transfersDataStore: Readable<Array<Transfer>> = derived([transfers], ([$transfers]) => {
   return $transfers?.data?.map(d => ({ url: `/explorer/transfers/${d.hash}`, ...d })) ?? []
 })
@@ -30,20 +46,25 @@ type DataRow = UnwrapReadable<typeof transfersDataStore>[number]
 const columns: Array<ColumnDef<DataRow>> = [
   {
     accessorKey: "source",
-    cell: info => flexRender(CellOriginTransfer, { chains, value: info.getValue() })
+    // cell: info => flexRender(CellOriginTransfer, { chains, value: info.getValue() })
+    cell: info => renderComponent(CellOriginTransfer, { chains, value: info.getValue() })
   },
   {
     accessorKey: "destination",
-    cell: info => flexRender(CellOriginTransfer, { chains, value: info.getValue() })
+    // cell: info => flexRender(CellOriginTransfer, { chains, value: info.getValue() })
+    cell: info => renderComponent(CellOriginTransfer, { chains, value: info.getValue() })
   },
   {
     accessorKey: "tokens",
-    cell: info => flexRender(CellAssets, { value: info.getValue() })
+    // cell: info => flexRender(CellAssets, { value: info.getValue() })
+    // cell: info => renderComponent(CellAssets, { value: info.getValue() })
+    cell: info => renderComponent(CellAssets, { value: info.getValue() })
   },
   {
     header: () => "Time",
     accessorKey: "timestamp",
-    cell: info => flexRender(CellTimestamp, { value: info.getValue() })
+    // cell: info => flexRender(CellTimestamp, { value: info.getValue() })
+    cell: info => renderComponent(CellTimestamp, { value: info.getValue() })
   }
 ]
 </script>
diff --git a/app/src/lib/queries/chains.ts b/app/src/lib/queries/chains.ts
index 7cf5cd326c..6b93a037e8 100644
--- a/app/src/lib/queries/chains.ts
+++ b/app/src/lib/queries/chains.ts
@@ -3,13 +3,17 @@ import { chainsQueryDocument } from "$lib/graphql/queries/chains"
 
 import { request } from "graphql-request"
 import { URLS } from "$lib/constants"
+import { reactiveQueryArgs } from '$lib/utilities/utilities.svelte'
 
 export const chainsQuery = () =>
-  createQuery({
-    queryKey: ["chains"],
-    placeholderData: (previousData, _) => previousData,
-    queryFn: async () => (await request(URLS().GRAPHQL, chainsQueryDocument, {})).v1_chains,
-    enabled: true,
-    refetchInterval: 6_000,
-    refetchOnWindowFocus: false
-  })
+  createQuery(
+    reactiveQueryArgs(() => ({
+      queryKey: ["chains"],
+// placeho lderData: _ => {},
+      // placeholderData: (previousData, _) => previousData,
+      queryFn: async () => (await request(URLS().GRAPHQL, chainsQueryDocument, {})).v1_chains,
+      enabled: true,
+      refetchInterval: 6_000,
+      refetchOnWindowFocus: false
+    }))
+  )
diff --git a/app/src/lib/utilities/utilities.svelte.ts b/app/src/lib/utilities/utilities.svelte.ts
new file mode 100644
index 0000000000..6d46daa6ea
--- /dev/null
+++ b/app/src/lib/utilities/utilities.svelte.ts
@@ -0,0 +1,11 @@
+import { writable } from 'svelte/store'
+
+export const reactiveQueryArgs = <T>(cb: () => T) => {
+  const store = writable<T>()
+
+  $effect.pre(() => {
+    store.set(cb())
+  })
+
+  return store
+}
diff --git a/app/src/routes/explorer/(components)/table.svelte b/app/src/routes/explorer/(components)/table.svelte
index 3db5d8f6e0..31db9de678 100644
--- a/app/src/routes/explorer/(components)/table.svelte
+++ b/app/src/routes/explorer/(components)/table.svelte
@@ -1,169 +1,166 @@
-<!-- @migration-task Error while migrating Svelte code: can't migrate `$: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-  overscan: 20,
-  count: $rows.length,
-  estimateSize: () => 34,
-  getScrollElement: () => virtualListElement
-})` to `$derived` because there's a variable named derived.
-     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: Expected token > -->
 <script lang="ts">
-import { onDestroy } from "svelte"
-import { derived } from "svelte/store"
-import {
-  flexRender,
-  type ColumnDef,
-  getCoreRowModel,
-  type TableOptions,
-  createSvelteTable,
-  getFilteredRowModel,
-  getPaginationRowModel
-} from "@tanstack/svelte-table"
-import type { MaybePromise } from "valibot"
-import { writable, type Readable } from "svelte/store"
-import { cn } from "$lib/utilities/shadcn.ts"
-import * as Table from "$lib/components/ui/table"
-import { createVirtualizer } from "@tanstack/svelte-virtual"
-import * as Card from "$lib/components/ui/card/index.ts"
-import { showUnsupported } from "$lib/stores/user.ts"
-
-type DataRow = $$Generic
-
-export let columns: Array<ColumnDef<DataRow>>
-export let dataStore: Readable<Array<DataRow>>
-export let pageIndex = 0
-export let pageSize = $dataStore.length
-export let onClick: undefined | ((row: DataRow) => MaybePromise<void>) = undefined
-
-const options = writable<TableOptions<any>>({
-  data: $dataStore,
-  enableHiding: true,
-  enableFilters: true,
-  columns,
-  autoResetPageIndex: true,
-  enableColumnFilters: true,
-  enableColumnResizing: true,
-  enableMultiRowSelection: true,
-  getCoreRowModel: getCoreRowModel(),
-  getFilteredRowModel: getFilteredRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-  state: {
-    pagination: { pageIndex, pageSize }
+  import { onDestroy } from 'svelte'
+  import { derived } from 'svelte/store'
+  import {
+    type ColumnDef,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+  } from '@tanstack/svelte-table'
+
+  import type { MaybePromise } from 'valibot'
+  import { writable, type Readable } from 'svelte/store'
+  import { cn } from '$lib/utilities/shadcn.ts'
+  import * as Table from '$lib/components/ui/table'
+  import * as Card from '$lib/components/ui/card/index.ts'
+  import { showUnsupported } from '$lib/stores/user.ts'
+  import {
+    createSvelteTable,
+    renderComponent,
+    renderSnippet,
+    FlexRender,
+    createVirtualizer,
+    createWindowVirtualizer,
+  } from '$lib/components/table'
+
+  type DataRow = $$Generic
+
+  interface Props {
+    columns: Array<ColumnDef<DataRow>>
+    dataStore: Readable<Array<DataRow>>
+    pageIndex?: number
+    pageSize?: any
+    onClick?: undefined | ((row: DataRow) => MaybePromise<void>)
   }
-})
 
-let virtualListElement: HTMLDivElement
+  let {
+    columns,
+    dataStore,
+    pageIndex = 0,
+    pageSize = $dataStore.length,
+    onClick = undefined,
+  }: Props = $props()
+
+  let virtualListElement: HTMLDivElement
 
-const table = createSvelteTable(options)
-const rows = derived(table, $t => $t.getRowModel().rows)
+  const table = createSvelteTable({
+    get data() {
+      return $dataStore
+    },
+    state: {
+      get pagination() {
+        return { pageIndex, pageSize }
+      },
+    },
+    columns,
 
-const hasUrls = derived(rows, $rows => typeof $rows.at(0)?.original.url === "string")
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
 
-$: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-  overscan: 20,
-  count: $rows.length,
-  estimateSize: () => 34,
-  getScrollElement: () => virtualListElement
-})
+  const rows = derived(table, $t => $t.getRowModel().rows)
 
-const unsubscribe = dataStore.subscribe(() => {
-  if (!$dataStore) return
-  $table.setPageSize($dataStore.length)
-  options.update(options => ({ ...options, data: $dataStore }))
-})
+  const hasUrls = derived(table, $rows => typeof $rows.at(0)?.original.url === 'string')
 
-function hasInfoProperty(assets: Object) {
-  return !!Object.values(assets)[0].info
-}
+  let virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    overscan: 20,
+    count: $rows.length,
+    estimateSize: () => 34,
+    getScrollElement: () => virtualListElement,
+  })
+
+  // const unsubscribe = dataStore.subscribe(() => {
+  //   if (!$dataStore) return
+  //   table.setPageSize($dataStore.length)
+  //   // table.options.update(options => ({ ...options, data: $dataStore }))
+  // })
+
+  function hasInfoProperty(assets: Object) {
+    return !!Object.values(assets)[0].info
+  }
 
-onDestroy(unsubscribe)
+  // onDestroy(unsubscribe)
 </script>
 
 <Card.Root class="dark:bg-muted">
-  <div bind:this={virtualListElement}>
-    <Table.Root>
-      <Table.Header>
-        {#each $table.getHeaderGroups() as headerGroup (headerGroup.id)}
-          <Table.Row>
-
-            {#if $hasUrls}
-              <th aria-label="Item Detail Links"></th>
-            {/if}
-            {#each headerGroup.headers as header (header.id)}
-              <Table.Head
-                colspan={header.colSpan}
-                class={cn(`w-[${header.getSize()}px] whitespace-nowrap`)}
-              >
-                <svelte:component
-                  this={flexRender(header.column.columnDef.header, header.getContext())}
-                />
-              </Table.Head>
-            {/each}
-          </Table.Row>
-        {/each}
-      </Table.Header>
-      <!-- TODO: make this DRY !-->
-      <Table.Body class={cn(`h-[${$virtualizer.getTotalSize()}px]] whitespace-nowrap`)}>
-        {#each $virtualizer.getVirtualItems() as row, index (row.index)}
-          {@const url = $rows[row.index].original.url ?? undefined}
-
-          {@const containsAsset = $rows[row.index].original.assets}
-          {#if containsAsset}
-            {@const isSupported = hasInfoProperty(containsAsset)}
-            {#if $showUnsupported || isSupported}
-              <Table.Row
-                class={cn("relative", onClick !== undefined ? 'cursor-pointer' : '',
-              index % 2 === 0 ? 'bg-secondary/10 dark:bg-secondary/30 ' : 'bg-transparent',
-              isSupported ? '' : 'opacity-50'
+  <!-- <div bind:this={virtualListElement}> -->
+  <Table.Root>
+    <Table.Header>
+      {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+        <Table.Row>
+          {#if $hasUrls}
+            <th aria-label="Item Detail Links"></th>
+          {/if}
+          {#each headerGroup.headers as header (header.id)}
+            <Table.Head
+              colspan={header.colSpan}
+              class={cn(`w-[${header.getSize()}px] whitespace-nowrap`)}
+            >
+              <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+            </Table.Head>
+          {/each}
+        </Table.Row>
+      {/each}
+    </Table.Header>
+    <Table.Body
+      class={//
+      cn(`h-[${virtualizer.getTotalSize()}px]] whitespace-nowrap`)}
+    >
+      {#each virtualizer.getVirtualItems() as row, index (row.index)}
+        {@const url = $rows[row.index].original.url ?? undefined}
 
-            )}
-                on:click={onClick !== undefined ? (() => onClick($rows[row.index].original)) : undefined}
-              >
-                {#if $hasUrls}
-                <td>
-                  <a
-                    href={url}
-                    aria-label={url}
-                    class="row-link"
-                  ></a>
-                </td>
-                {/if}
-                {#each $rows[row.index].getVisibleCells() as cell, index (cell.id)}
-                  <Table.Cell>
-                    <svelte:component
-                      this={flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    />
-                  </Table.Cell>
-                {/each}
-              </Table.Row>
-            {/if}
-          {:else}
+        {@const containsAsset = $rows[row.index].original.assets}
+        {#if containsAsset}
+          {@const isSupported = hasInfoProperty(containsAsset)}
+          {#if $showUnsupported || isSupported}
             <Table.Row
-              class={cn("relative", onClick !== undefined ? 'cursor-pointer' : '',
-              index % 2 === 0 ? 'bg-secondary/10' : 'bg-transparent',
-            )}
-              on:click={onClick !== undefined ? (() => onClick($rows[row.index].original)) : undefined}
+              class={cn(
+                'relative',
+                onClick !== undefined ? 'cursor-pointer' : '',
+                index % 2 === 0 ? 'bg-secondary/10 dark:bg-secondary/30 ' : 'bg-transparent',
+                isSupported ? '' : 'opacity-50',
+              )}
+              onclick={onClick !== undefined ? () => onClick($rows[row.index].original) : undefined}
             >
               {#if $hasUrls}
                 <td>
-                  <a
-                    href={url}
-                    aria-label={url}
-                    class="row-link"
-                  ></a>
+                  <a href={url} aria-label={url} class="row-link"></a>
                 </td>
               {/if}
               {#each $rows[row.index].getVisibleCells() as cell, index (cell.id)}
                 <Table.Cell>
-                  <svelte:component
-                    this={flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  />
+                  <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
                 </Table.Cell>
               {/each}
             </Table.Row>
           {/if}
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
+        {:else}
+          <Table.Row
+            class={cn(
+              'relative',
+              onClick !== undefined ? 'cursor-pointer' : '',
+              index % 2 === 0 ? 'bg-secondary/10' : 'bg-transparent',
+            )}
+            onclick={onClick !== undefined ? () => onClick($rows[row.index].original) : undefined}
+          >
+            {#if $hasUrls}
+              <td>
+                <a href={url} aria-label={url} class="row-link"></a>
+              </td>
+            {/if}
+            {#each $rows[row.index].getVisibleCells() as cell, index (cell.id)}
+              <Table.Cell>
+                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+              </Table.Cell>
+            {/each}
+          </Table.Row>
+        {/if}
+      {/each}
+    </Table.Body>
+  </Table.Root>
+  <!-- </div> -->
 </Card.Root>
 
 <style lang="postcss">
@@ -171,7 +168,7 @@ onDestroy(unsubscribe)
     position: absolute;
     top: 0;
     left: 0;
-    content: "";
+    content: '';
     width: 100%;
     height: 100%;
   }
diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
index c7150f9bf0..bf0e849699 100644
--- a/app/src/routes/explorer/+layout.svelte
+++ b/app/src/routes/explorer/+layout.svelte
@@ -54,15 +54,15 @@ console.info("explorer layout")
       explorerRoute === null ? 'hidden sm:block' : '',
     )}
   >
-    <!-- {#if $page.route.id?.split('/').length === 3}
-      <StatsBar />
+    {#if $page.route.id?.split('/').length === 3}
+      <!-- <StatsBar /> -->
     {/if}
 
     {#if ($page?.route?.id?.split('/')?.length ?? 0) > 3}
       <ExplorerBreadcrumbs />
-    {/if} -->
+    {/if}
 
-    <!-- <div class="flex flex-col flex-1 size-full">
+    <div class="flex flex-col flex-1 size-full">
       <div class="p-2 sm:p-4 md:p-6" data-explorer-layout>
         <div class={cn($page.route.id?.split('/').length === 3 ? '' : 'hidden')}>
           <h2
@@ -77,6 +77,6 @@ console.info("explorer layout")
         </div>
         {@render children?.()}
       </div>
-    </div> -->
+    </div>
   </main>
 </div>
diff --git a/app/src/routes/explorer/+page.svelte b/app/src/routes/explorer/+page.svelte
index 6cbb790679..968bd9fcf7 100644
--- a/app/src/routes/explorer/+page.svelte
+++ b/app/src/routes/explorer/+page.svelte
@@ -17,7 +17,11 @@ onMount(() => {
   })
 })
 
-let text = shouldRedirect ? "" : "Welcome to the Union Explorer"
+let text = $derived(shouldRedirect ? "" : "Welcome to the Union Explorer")
+onMount(() => {
+console.info(text)
+  
+})
 </script>
 
 <svelte:window bind:innerWidth />
diff --git a/app/src/routes/explorer/address/[slug=address]/+layout.svelte b/app/src/routes/explorer/address/[slug=address]/+layout.svelte
index ddaa1beba4..324d8be3ad 100644
--- a/app/src/routes/explorer/address/[slug=address]/+layout.svelte
+++ b/app/src/routes/explorer/address/[slug=address]/+layout.svelte
@@ -1,3 +1,9 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$derived` rune but there's already a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$derived` rune but there's already a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$derived` rune but there's already a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$derived` rune but there's already a variable named derived.
      Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
diff --git a/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte b/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte
index 85a1a92247..1435551ed3 100644
--- a/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte
+++ b/app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/[sequence]/+page.svelte
@@ -1,4 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
+<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
+<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
+<!-- @migration-task Error while migrating Svelte code: Cannot subscribe to stores that are not declared at the top level of the component -->
 <script lang="ts">
 import { page } from "$app/stores"
 import ChainsGate from "$lib/components/chains-gate.svelte"
diff --git a/app/src/routes/explorer/transfers/+page.svelte b/app/src/routes/explorer/transfers/+page.svelte
index 9206e9a905..8856402692 100644
--- a/app/src/routes/explorer/transfers/+page.svelte
+++ b/app/src/routes/explorer/transfers/+page.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
 import ChainsGate from "$lib/components/chains-gate.svelte"
 import TableTransfers from "$lib/components/transfers-table/transfers-table.svelte"
-
-console.info("transfers")
 </script>
 
-<ChainsGate {chains}>
+<ChainsGate>
   {#snippet children({ chains })}
     <TableTransfers
       {chains}
diff --git a/app/src/routes/transfer/(components)/transfer-form.svelte b/app/src/routes/transfer/(components)/transfer-form.svelte
index 2dd194077f..073095c17a 100644
--- a/app/src/routes/transfer/(components)/transfer-form.svelte
+++ b/app/src/routes/transfer/(components)/transfer-form.svelte
@@ -1,3 +1,9 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: userBalances = userBalancesQuery({ chains, userAddr: $userAddress, connected: true })` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: userBalances = userBalancesQuery({ chains, userAddr: $userAddress, connected: true })` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: can't migrate `$: userBalances = userBalancesQuery({ chains, userAddr: $userAddress, connected: true })` to `$derived` because there's a variable named derived.
+     Rename the variable and try again or migrate by hand. -->
 <!-- @migration-task Error while migrating Svelte code: can't migrate `$: userBalances = userBalancesQuery({ chains, userAddr: $userAddress, connected: true })` to `$derived` because there's a variable named derived.
      Rename the variable and try again or migrate by hand. -->
 <script lang="ts">