From 904cbba3d9996523ee0dc8d3d99a405c258fd651 Mon Sep 17 00:00:00 2001
From: Abel de Bruijn <abeldebruijn@hotmail.com>
Date: Sat, 23 Nov 2024 22:16:56 +0100
Subject: [PATCH 1/3] Refactor UI components: remove unused Slider, Dialog,
 FormButton, Card components; add Separator and Select components

---
 components.json                               |  11 +-
 eslint.config.js                              |  11 ++
 package.json                                  |  12 +-
 pnpm-lock.yaml                                | 133 ++++++++++--------
 src/app.css                                   |  38 +++--
 src/lib/components/Embedding.svelte           |   6 +-
 src/lib/components/ShareWindow.svelte         |   6 +-
 src/lib/components/controls/Dropdown.svelte   |  75 +++-------
 src/lib/components/controls/SlideShow.svelte  |   4 +-
 src/lib/components/controls/Slider.svelte     |  13 +-
 src/lib/components/controls/Toggle.svelte     |  12 +-
 .../ui/accordion/accordion-content.svelte     |  29 ++--
 .../ui/accordion/accordion-item.svelte        |  14 +-
 .../ui/accordion/accordion-trigger.svelte     |  27 ++--
 src/lib/components/ui/accordion/index.ts      |   2 +-
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  21 ++-
 .../ui/breadcrumb/breadcrumb-item.svelte      |  18 +--
 .../ui/breadcrumb/breadcrumb-link.svelte      |  40 +++---
 .../ui/breadcrumb/breadcrumb-list.svelte      |  22 +--
 .../ui/breadcrumb/breadcrumb-page.svelte      |  22 +--
 .../ui/breadcrumb/breadcrumb-separator.svelte |  26 ++--
 .../ui/breadcrumb/breadcrumb.svelte           |  18 +--
 ...ton-action.svelte => action-button.svelte} |  32 +++--
 src/lib/components/ui/button/button.svelte    |  84 ++++++++---
 src/lib/components/ui/button/index.ts         |  55 ++------
 .../components/ui/card/card-content.svelte    |  13 --
 .../ui/card/card-description.svelte           |  13 --
 src/lib/components/ui/card/card-footer.svelte |  13 --
 src/lib/components/ui/card/card-header.svelte |  13 --
 src/lib/components/ui/card/card-title.svelte  |  21 ---
 src/lib/components/ui/card/card.svelte        |  16 ---
 src/lib/components/ui/card/index.ts           |  24 ----
 .../components/ui/checkbox/checkbox.svelte    |  54 ++++---
 .../ui/command/command-dialog.svelte          |  38 +++--
 .../ui/command/command-empty.svelte           |  14 +-
 .../ui/command/command-group.svelte           |  29 ++--
 .../ui/command/command-input.svelte           |  22 +--
 .../components/ui/command/command-item.svelte |  25 ++--
 .../ui/command/command-link-item.svelte       |  19 +++
 .../components/ui/command/command-list.svelte |  17 +--
 .../ui/command/command-separator.svelte       |  12 +-
 .../ui/command/command-shortcut.svelte        |  18 ++-
 src/lib/components/ui/command/command.svelte  |  23 ++-
 src/lib/components/ui/command/index.ts        |   7 +-
 .../ui/dialog/dialog-content.svelte           |  38 ++---
 .../ui/dialog/dialog-description.svelte       |  18 +--
 .../components/ui/dialog/dialog-footer.svelte |  16 ++-
 .../components/ui/dialog/dialog-header.svelte |  19 ++-
 .../ui/dialog/dialog-overlay.svelte           |  24 ++--
 .../components/ui/dialog/dialog-portal.svelte |   8 --
 .../components/ui/dialog/dialog-title.svelte  |  16 +--
 src/lib/components/ui/dialog/index.ts         |   8 +-
 src/lib/components/ui/form/form-button.svelte |  10 --
 .../ui/form/form-description.svelte           |  17 ---
 .../ui/form/form-element-field.svelte         |  25 ----
 .../ui/form/form-field-errors.svelte          |  26 ----
 src/lib/components/ui/form/form-field.svelte  |  25 ----
 .../components/ui/form/form-fieldset.svelte   |  30 ----
 src/lib/components/ui/form/form-label.svelte  |  17 ---
 src/lib/components/ui/form/form-legend.svelte |  17 ---
 src/lib/components/ui/form/index.ts           |  33 -----
 src/lib/components/ui/input/index.ts          |  29 ----
 src/lib/components/ui/input/input.svelte      |  42 ------
 src/lib/components/ui/label/label.svelte      |  18 ++-
 .../ui/popover/popover-content.svelte         |  40 +++---
 src/lib/components/ui/select/index.ts         |  34 +++++
 .../ui/select/select-content.svelte           |  38 +++++
 .../ui/select/select-group-heading.svelte     |  16 +++
 .../components/ui/select/select-item.svelte   |  37 +++++
 .../select/select-scroll-down-button.svelte   |  19 +++
 .../ui/select/select-scroll-up-button.svelte  |  19 +++
 .../ui/select/select-separator.svelte         |  13 ++
 .../ui/select/select-trigger.svelte           |  24 ++++
 src/lib/components/ui/separator/index.ts      |   7 +
 .../components/ui/separator/separator.svelte  |  22 +++
 src/lib/components/ui/slider/index.ts         |   7 -
 src/lib/components/ui/slider/slider.svelte    |  27 ----
 src/lib/components/ui/switch/switch.svelte    |  23 ++-
 .../components/ui/textarea/textarea.svelte    |  38 ++---
 src/lib/components/ui/tooltip/index.ts        |   5 +-
 .../ui/tooltip/tooltip-content.svelte         |  29 ++--
 src/lib/controls/Dropdown.svelte.ts           |  11 +-
 src/lib/threlte/Camera3D.svelte               |   4 +-
 src/lib/utils/shadcn-utils.ts                 |  50 -------
 src/routes/[...catchall]/+page.svelte         |   2 +-
 src/routes/[...catchall]/CommandPrompt.svelte |   2 +-
 src/routes/[...catchall]/FolderList.svelte    |   2 +-
 src/routes/[...catchall]/ListItem.svelte      |   4 +-
 src/routes/[...catchall]/NavBar.svelte        |  23 ++-
 tailwind.config.js                            |  36 ++++-
 90 files changed, 977 insertions(+), 1113 deletions(-)
 rename src/lib/components/ui/button/{button-action.svelte => action-button.svelte} (53%)
 delete mode 100644 src/lib/components/ui/card/card-content.svelte
 delete mode 100644 src/lib/components/ui/card/card-description.svelte
 delete mode 100644 src/lib/components/ui/card/card-footer.svelte
 delete mode 100644 src/lib/components/ui/card/card-header.svelte
 delete mode 100644 src/lib/components/ui/card/card-title.svelte
 delete mode 100644 src/lib/components/ui/card/card.svelte
 delete mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/command/command-link-item.svelte
 delete mode 100644 src/lib/components/ui/dialog/dialog-portal.svelte
 delete mode 100644 src/lib/components/ui/form/form-button.svelte
 delete mode 100644 src/lib/components/ui/form/form-description.svelte
 delete mode 100644 src/lib/components/ui/form/form-element-field.svelte
 delete mode 100644 src/lib/components/ui/form/form-field-errors.svelte
 delete mode 100644 src/lib/components/ui/form/form-field.svelte
 delete mode 100644 src/lib/components/ui/form/form-fieldset.svelte
 delete mode 100644 src/lib/components/ui/form/form-label.svelte
 delete mode 100644 src/lib/components/ui/form/form-legend.svelte
 delete mode 100644 src/lib/components/ui/form/index.ts
 delete mode 100644 src/lib/components/ui/input/index.ts
 delete mode 100644 src/lib/components/ui/input/input.svelte
 create mode 100644 src/lib/components/ui/select/index.ts
 create mode 100644 src/lib/components/ui/select/select-content.svelte
 create mode 100644 src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 src/lib/components/ui/select/select-item.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 src/lib/components/ui/select/select-separator.svelte
 create mode 100644 src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 src/lib/components/ui/separator/index.ts
 create mode 100644 src/lib/components/ui/separator/separator.svelte
 delete mode 100644 src/lib/components/ui/slider/index.ts
 delete mode 100644 src/lib/components/ui/slider/slider.svelte

diff --git a/components.json b/components.json
index dacfd561..97d7ea83 100644
--- a/components.json
+++ b/components.json
@@ -1,6 +1,6 @@
 {
-  "$schema": "https://shadcn-svelte.com/schema.json",
-  "style": "default",
+  "$schema": "https://next.shadcn-svelte.com/schema.json",
+  "style": "new-york",
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "src/app.css",
@@ -8,7 +8,10 @@
   },
   "aliases": {
     "components": "$lib/components",
-    "utils": "$lib/utils/shadcn-utils"
+    "utils": "$lib/utils/shadcn-utils",
+    "ui": "$lib/components/ui",
+    "hooks": "$lib/hooks"
   },
-  "typescript": true
+  "typescript": true,
+  "registry": "https://next.shadcn-svelte.com/registry"
 }
diff --git a/eslint.config.js b/eslint.config.js
index 8f0faabf..27e1544c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -40,5 +40,16 @@ export default ts.config(
 
       'src/lib/components/ui/'
     ]
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^\\$\\$(Props|Events|Slots|Generic)$'
+        }
+      ]
+    }
   }
 );
diff --git a/package.json b/package.json
index 58cea777..90647809 100644
--- a/package.json
+++ b/package.json
@@ -34,16 +34,22 @@
     "@types/katex": "^0.16.7",
     "@types/three": "^0.170.0",
     "autoprefixer": "^10.4.20",
+    "bits-ui": "1.0.0-next.64",
+    "clsx": "^2.1.1",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
+    "lucide-svelte": "^0.456.0",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
     "storybook": "^8.4.2",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwind-variants": "^0.3.0",
     "tailwindcss": "^3.4.9",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.0.0",
     "vite": "^5.0.3"
@@ -53,18 +59,12 @@
     "@sveltejs/adapter-node": "^5.2.9",
     "@threlte/core": "8.0.0-next.30",
     "@threlte/extras": "9.0.0-next.39",
-    "bits-ui": "^0.21.16",
-    "clsx": "^2.1.1",
-    "cmdk-sv": "^0.0.18",
     "d3": "^7.9.0",
     "formsnap": "^1.0.1",
     "katex": "^0.16.11",
-    "lucide-svelte": "^0.456.0",
     "screenfull": "^6.0.2",
     "svelte-confetti": "^2.1.2",
     "sveltekit-superforms": "^2.20.0",
-    "tailwind-merge": "^2.5.4",
-    "tailwind-variants": "^0.3.0",
     "three": "^0.170.0",
     "zod": "^3.23.8"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4a51d4a..1e86ed01 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,15 +20,6 @@ importers:
       '@threlte/extras':
         specifier: 9.0.0-next.39
         version: 9.0.0-next.39(@types/three@0.170.0)(svelte@5.1.16)(three@0.170.0)
-      bits-ui:
-        specifier: ^0.21.16
-        version: 0.21.16(svelte@5.1.16)
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      cmdk-sv:
-        specifier: ^0.0.18
-        version: 0.0.18(svelte@5.1.16)
       d3:
         specifier: ^7.9.0
         version: 7.9.0
@@ -38,9 +29,6 @@ importers:
       katex:
         specifier: ^0.16.11
         version: 0.16.11
-      lucide-svelte:
-        specifier: ^0.456.0
-        version: 0.456.0(svelte@5.1.16)
       screenfull:
         specifier: ^6.0.2
         version: 6.0.2
@@ -50,12 +38,6 @@ importers:
       sveltekit-superforms:
         specifier: ^2.20.0
         version: 2.20.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.1.16)(vite@5.4.11(@types/node@22.5.4)))(svelte@5.1.16)(vite@5.4.11(@types/node@22.5.4)))(@types/json-schema@7.0.15)(svelte@5.1.16)(typescript@5.6.3)
-      tailwind-merge:
-        specifier: ^2.5.4
-        version: 2.5.4
-      tailwind-variants:
-        specifier: ^0.3.0
-        version: 0.3.0(tailwindcss@3.4.14)
       three:
         specifier: ^0.170.0
         version: 0.170.0
@@ -117,6 +99,12 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
+      bits-ui:
+        specifier: 1.0.0-next.64
+        version: 1.0.0-next.64(svelte@5.1.16)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       eslint:
         specifier: ^9.7.0
         version: 9.14.0(jiti@1.21.6)
@@ -129,6 +117,9 @@ importers:
       globals:
         specifier: ^15.0.0
         version: 15.12.0
+      lucide-svelte:
+        specifier: ^0.456.0
+        version: 0.456.0(svelte@5.1.16)
       prettier:
         specifier: ^3.3.2
         version: 3.3.3
@@ -144,9 +135,18 @@ importers:
       svelte-check:
         specifier: ^4.0.0
         version: 4.0.7(picomatch@4.0.2)(svelte@5.1.16)(typescript@5.6.3)
+      tailwind-merge:
+        specifier: ^2.5.4
+        version: 2.5.4
+      tailwind-variants:
+        specifier: ^0.3.0
+        version: 0.3.0(tailwindcss@3.4.14)
       tailwindcss:
         specifier: ^3.4.9
         version: 3.4.14
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.14)
       typescript:
         specifier: ^5.0.0
         version: 5.6.3
@@ -604,11 +604,6 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@melt-ui/svelte@0.76.2':
-    resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
-    peerDependencies:
-      svelte: '>=3 <5'
-
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1394,10 +1389,11 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  bits-ui@0.21.16:
-    resolution: {integrity: sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==}
+  bits-ui@1.0.0-next.64:
+    resolution: {integrity: sha512-r1JThjUSKwTkaB1onwIs7ZQoqygSsWhjBaUElCS8m8CCbY1RxmTz0HnbN+Xp2oJgJ4YQgIfiXTG3170l80FEgg==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.118
+      svelte: ^5.0.0-next.1
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -1486,11 +1482,6 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  cmdk-sv@0.0.18:
-    resolution: {integrity: sha512-istixiQSy9Ez/mQ4VXWB69btqNyDZckbd1XFEwR46Vw+n5zjdmvoWAcOTj0uX3FZXtw9ikwLVmfoW2nwwMClRg==}
-    peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.1
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1993,9 +1984,6 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
-  focus-trap@7.6.1:
-    resolution: {integrity: sha512-nB8y4nQl8PshahLpGKZOq1sb0xrMVFSn6at7u/qOsBZTlZRzaapISGENcB6mOkoezbClZyiMwEF/dGY8AZ00rA==}
-
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -2133,6 +2121,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -2687,6 +2678,11 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  runed@0.15.3:
+    resolution: {integrity: sha512-HtayB+loDcGdqJDHW8JFdsZzGQMyVzim6+s3052MkjZnwmwDstmF+cusMeTssBe6TCdt5i9D/Tb+KYXN3L0kXA==}
+    peerDependencies:
+      svelte: ^5.0.0-next.1
+
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
@@ -2783,6 +2779,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2865,6 +2864,12 @@ packages:
       typescript:
         optional: true
 
+  svelte-toolbelt@0.4.6:
+    resolution: {integrity: sha512-k8OUvXBUifHZcAlWeY/HLg/4J0v5m2iOfOhn8fDmjt4AP8ZluaDh9eBFus9lFiLX6O5l6vKqI1dKL5wy7090NQ==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0-next.126
+
   svelte2tsx@0.7.24:
     resolution: {integrity: sha512-KbKD+5aqTYdRPfAroA72xc3kEz3Dj0Vq7X3IjHLWbwfco7pwioEx4x/V9lOpKmkHlYh9YNPkqXWlbrH7Cc580A==}
     peerDependencies:
@@ -2885,9 +2890,6 @@ packages:
       '@sveltejs/kit': 1.x || 2.x
       svelte: 3.x || 4.x || >=5.0.0-next.51
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-
   tailwind-merge@2.5.4:
     resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
 
@@ -2897,6 +2899,11 @@ packages:
     peerDependencies:
       tailwindcss: '*'
 
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.14:
     resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
     engines: {node: '>=14.0.0'}
@@ -3544,16 +3551,6 @@ snapshots:
       '@types/react': 18.3.5
       react: 18.3.1
 
-  '@melt-ui/svelte@0.76.2(svelte@5.1.16)':
-    dependencies:
-      '@floating-ui/core': 1.6.8
-      '@floating-ui/dom': 1.6.12
-      '@internationalized/date': 3.5.6
-      dequal: 2.0.3
-      focus-trap: 7.6.1
-      nanoid: 5.0.8
-      svelte: 5.1.16
-
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4500,12 +4497,15 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@0.21.16(svelte@5.1.16):
+  bits-ui@1.0.0-next.64(svelte@5.1.16):
     dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/dom': 1.6.12
       '@internationalized/date': 3.5.6
-      '@melt-ui/svelte': 0.76.2(svelte@5.1.16)
-      nanoid: 5.0.8
+      esm-env: 1.1.4
+      runed: 0.15.3(svelte@5.1.16)
       svelte: 5.1.16
+      svelte-toolbelt: 0.4.6(svelte@5.1.16)
 
   brace-expansion@1.1.11:
     dependencies:
@@ -4598,12 +4598,6 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cmdk-sv@0.0.18(svelte@5.1.16):
-    dependencies:
-      bits-ui: 0.21.16(svelte@5.1.16)
-      nanoid: 5.0.8
-      svelte: 5.1.16
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -5200,10 +5194,6 @@ snapshots:
 
   flatted@3.3.1: {}
 
-  focus-trap@7.6.1:
-    dependencies:
-      tabbable: 6.2.0
-
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -5335,6 +5325,8 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-parser@0.2.4: {}
+
   internmap@2.0.3: {}
 
   is-arguments@1.1.1:
@@ -5822,6 +5814,11 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  runed@0.15.3(svelte@5.1.16):
+    dependencies:
+      esm-env: 1.1.4
+      svelte: 5.1.16
+
   rw@1.3.3: {}
 
   sade@1.8.1:
@@ -5923,6 +5920,10 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -5987,6 +5988,12 @@ snapshots:
       postcss-load-config: 4.0.2(postcss@8.4.49)
       typescript: 5.6.3
 
+  svelte-toolbelt@0.4.6(svelte@5.1.16):
+    dependencies:
+      clsx: 2.1.1
+      style-to-object: 1.0.8
+      svelte: 5.1.16
+
   svelte2tsx@0.7.24(svelte@5.1.16)(typescript@5.6.3):
     dependencies:
       dedent-js: 1.0.1
@@ -6047,8 +6054,6 @@ snapshots:
       - '@types/json-schema'
       - typescript
 
-  tabbable@6.2.0: {}
-
   tailwind-merge@2.5.4: {}
 
   tailwind-variants@0.3.0(tailwindcss@3.4.14):
@@ -6056,6 +6061,10 @@ snapshots:
       tailwind-merge: 2.5.4
       tailwindcss: 3.4.14
 
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+    dependencies:
+      tailwindcss: 3.4.14
+
   tailwindcss@3.4.14:
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/src/app.css b/src/app.css
index 16d01c9e..95927941 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,6 +6,7 @@
   html,
   body {
     height: 100%;
+    @apply bg-blue-800;
   }
 
   .latex .katex-display {
@@ -19,65 +20,62 @@
   :root {
     --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: 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: 210 40% 98%;
-
-    --ring: hsl(212.7, 26.8%, 83.9);
+    --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%;
   }
 }
 
diff --git a/src/lib/components/Embedding.svelte b/src/lib/components/Embedding.svelte
index c08162f9..431e95e4 100644
--- a/src/lib/components/Embedding.svelte
+++ b/src/lib/components/Embedding.svelte
@@ -85,9 +85,7 @@
 </Label>
 
 <div class="relative h-full w-full">
-  <Textarea readonly value={stateUrl}>
-    {stateUrl}
-  </Textarea>
+  <Textarea readonly value={stateUrl} />
   {#if showCopySucess}
     <div class="absolute left-1 bottom-1 text-green-700" in:fly={{ y: 20 }}>
       Copied to clipboard!
@@ -95,7 +93,7 @@
   {/if}
 </div>
 
-<div class="flex gap-2 mt-2">
+<div class="flex gap-2 mt-2 overflow-x-auto">
   <Button onclick={() => copyToClipboard()}>
     Copy to clipboard <Copy class="size-4 ml-2" />
   </Button>
diff --git a/src/lib/components/ShareWindow.svelte b/src/lib/components/ShareWindow.svelte
index 6805cf8c..89c1314d 100644
--- a/src/lib/components/ShareWindow.svelte
+++ b/src/lib/components/ShareWindow.svelte
@@ -6,10 +6,10 @@
   import Embedding from './Embedding.svelte';
 </script>
 
-<Dialog.Content class="sm:max-w-xl">
+<Dialog.Content class="sm:max-w-xl block">
   <Dialog.Header>
     <Dialog.Title>Share and embed</Dialog.Title>
-    <Dialog.Description class="prose">
+    <Dialog.Description>
       This applet was created for the
       <a
         class="flex items-center gap-1"
@@ -20,7 +20,7 @@
       For more information about these applets, please visit
       <a href="https://openla.ewi.tudelft.nl/applet">https://www.openla.ewi.tudelft.nl/applet</a>
 
-      <Accordion.Root class="w-full">
+      <Accordion.Root type="single" class="w-full">
         <!-- EMBEDING -->
         <Accordion.Item value="Embed">
           <Accordion.Trigger>Embed</Accordion.Trigger>
diff --git a/src/lib/components/controls/Dropdown.svelte b/src/lib/components/controls/Dropdown.svelte
index 886ef189..0b62191e 100644
--- a/src/lib/components/controls/Dropdown.svelte
+++ b/src/lib/components/controls/Dropdown.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
-  import * as Command from '$lib/components/ui/command/index.js';
-  import * as Popover from '$lib/components/ui/popover/index.js';
-  import { Button } from '$lib/components/ui/button/index.js';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-  import { ArrowDownUp, Check } from 'lucide-svelte';
+  import * as Select from '$lib/components/ui/select/index.js';
   import type { Dropdown } from '$lib/controls/Dropdown.svelte';
 
   type DropdownProps = {
@@ -12,56 +7,22 @@
   };
 
   const { controller: dropdown }: DropdownProps = $props();
-
-  let open = $state(false);
-
-  const selectedValue = $derived(
-    dropdown.values.find((f) => f === dropdown.value) ?? 'Select an item...'
-  );
-
-  // We want to refocus the trigger button when the user selects
-  // an item from the list so users can continue navigating the
-  // rest of the form with the keyboard.
-  function closeAndFocusTrigger(triggerId: string) {
-    open = false;
-    tick().then(() => {
-      document.getElementById(triggerId)?.focus();
-    });
-  }
 </script>
 
-<Popover.Root bind:open let:ids>
-  <Popover.Trigger asChild let:builder>
-    <Button
-      builders={[builder]}
-      variant="outline"
-      role="combobox"
-      aria-expanded={open}
-      class="w-[200px] justify-between"
-      style="border-color: {dropdown.color}; background: {dropdown.color}10;"
-    >
-      {selectedValue}
-      <ArrowDownUp class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-    </Button>
-  </Popover.Trigger>
-  <Popover.Content class="w-[200px] p-0">
-    <Command.Root>
-      <Command.Input placeholder="Search in items..." class="h-9" />
-      <Command.Empty>No items found.</Command.Empty>
-      <Command.Group>
-        {#each dropdown.values as value}
-          <Command.Item
-            {value}
-            onSelect={(currentValue) => {
-              dropdown.value = currentValue;
-              closeAndFocusTrigger(ids.trigger);
-            }}
-          >
-            <Check class={cn('mr-2 h-4 w-4', value !== dropdown.value && 'text-transparent')} />
-            {value}
-          </Command.Item>
-        {/each}
-      </Command.Group>
-    </Command.Root>
-  </Popover.Content>
-</Popover.Root>
+<Select.Root type="single" name="favoriteFruit" bind:value={dropdown.value}>
+  <Select.Trigger class="w-[180px]">
+    {dropdown.value || 'Select item'}
+  </Select.Trigger>
+  <Select.Content>
+    <Select.Group>
+      {#if dropdown.label}
+        <Select.GroupHeading>{dropdown.label}</Select.GroupHeading>
+      {/if}
+      {#each dropdown.values as item}
+        <Select.Item value={item} label={item}>
+          {item}
+        </Select.Item>
+      {/each}
+    </Select.Group>
+  </Select.Content>
+</Select.Root>
diff --git a/src/lib/components/controls/SlideShow.svelte b/src/lib/components/controls/SlideShow.svelte
index 90ae8f70..ba38dfed 100644
--- a/src/lib/components/controls/SlideShow.svelte
+++ b/src/lib/components/controls/SlideShow.svelte
@@ -25,7 +25,8 @@
   <div in:scale>
     <Button.Action
       class="text-white rounded-full"
-      --bg={PrimeColor.darkGreen + PrimeColor.opacity(0.8)}
+      --bg={PrimeColor.darkGreen}
+      --hover-bg={PrimeColor.darkGreen + PrimeColor.opacity(0.8)}
       tooltip="Go to previous step"
       side="top"
       onclick={() => controller.prev()}
@@ -40,6 +41,7 @@
     <Button.Action
       class="text-white rounded-full"
       --bg={PrimeColor.darkGreen}
+      --hover-bg={PrimeColor.darkGreen + PrimeColor.opacity(0.8)}
       tooltip="Go to next step"
       side="top"
       onclick={() => controller.next()}
diff --git a/src/lib/components/controls/Slider.svelte b/src/lib/components/controls/Slider.svelte
index 880d4cd5..f3e80902 100644
--- a/src/lib/components/controls/Slider.svelte
+++ b/src/lib/components/controls/Slider.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import * as Button from '$lib/components/ui/button';
   import { Label } from '$lib/components/ui/label';
-  import { activityState } from '$lib/stores/activity.svelte';
   import type { Slider } from '$lib/controls/Slider.svelte';
-  import { generateUUID } from 'three/src/math/MathUtils.js';
+  import { activityState } from '$lib/stores/activity.svelte';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
   import { Pause, Play, Plus } from 'lucide-svelte';
+  import { generateUUID } from 'three/src/math/MathUtils.js';
 
   type SliderProps = {
     value: number;
@@ -109,11 +110,12 @@
     <Button.Action
       class="text-white"
       --bg={slider.color}
+      --hover-bg={slider.color + PrimeColor.opacity(0.8)}
       tooltip="Expand slider"
       side="top"
       onclick={() => (onExpand ? onExpand() : {})}
     >
-      <Plus class="w-4 h-4" strokeWidth={4} />
+      <Plus class="w-4 h-4" strokeWidth={3} />
     </Button.Action>
   </div>
 {:else}
@@ -121,15 +123,16 @@
   <Button.Action
     class="text-white rounded-full"
     --bg={slider.color}
+    --hover-bg={slider.color + PrimeColor.opacity(0.8)}
     tooltip="Toggle animation"
     side="top"
     onclick={() => togglePlay()}
   >
     {#key icon}
       {#if icon === 'Play'}
-        <Play class="w-4 h-4" fill="white" strokeWidth={4} />
+        <Play class="w-4 h-4" fill="none" strokeWidth={3} />
       {:else}
-        <Pause class="w-4 h-4" fill="white" strokeWidth={4} />
+        <Pause class="w-4 h-4" fill="white" strokeWidth={0} />
       {/if}
     {/key}
   </Button.Action>
diff --git a/src/lib/components/controls/Toggle.svelte b/src/lib/components/controls/Toggle.svelte
index ae8a8e12..9c01e0e8 100644
--- a/src/lib/components/controls/Toggle.svelte
+++ b/src/lib/components/controls/Toggle.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import Latex from '$lib/components/Latex.svelte';
+  import { Checkbox } from '$lib/components/ui/checkbox';
+  import { Label } from '$lib/components/ui/label';
   import type { Toggle } from '$lib/controls/Toggle.svelte';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
   import { generateUUID } from 'three/src/math/MathUtils.js';
-  import { Label } from '$lib/components/ui/label';
-  import { Checkbox } from '$lib/components/ui/checkbox';
 
   type ToggleProps = {
     toggle: Toggle;
@@ -21,5 +22,10 @@
     </Label>
   {/if}
 
-  <Checkbox --bg={toggle.color} id="checkbox-{uuid}" bind:checked={value} />
+  <Checkbox
+    --bg={toggle.color}
+    --hover-bg={toggle.color + PrimeColor.opacity(0.8)}
+    id="checkbox-{uuid}"
+    bind:checked={value}
+  />
 </div>
diff --git a/src/lib/components/ui/accordion/accordion-content.svelte b/src/lib/components/ui/accordion/accordion-content.svelte
index 5848968a..df3c8367 100644
--- a/src/lib/components/ui/accordion/accordion-content.svelte
+++ b/src/lib/components/ui/accordion/accordion-content.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
-  import { Accordion as AccordionPrimitive } from 'bits-ui';
-  import { slide } from 'svelte/transition';
+  import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = AccordionPrimitive.ContentProps;
-
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = slide;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 200
-  };
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
 </script>
 
 <AccordionPrimitive.Content
-  class={cn('overflow-hidden text-sm transition-all', className)}
-  {transition}
-  {transitionConfig}
-  {...$$restProps}
+  bind:ref
+  class={cn(
+    'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
+    className
+  )}
+  {...restProps}
 >
   <div class="pb-4 pt-0">
-    <slot />
+    {@render children?.()}
   </div>
 </AccordionPrimitive.Content>
diff --git a/src/lib/components/ui/accordion/accordion-item.svelte b/src/lib/components/ui/accordion/accordion-item.svelte
index 6a54f7bf..f0f46f9c 100644
--- a/src/lib/components/ui/accordion/accordion-item.svelte
+++ b/src/lib/components/ui/accordion/accordion-item.svelte
@@ -2,13 +2,11 @@
   import { Accordion as AccordionPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = AccordionPrimitive.ItemProps;
-
-  let className: $$Props['class'] = undefined;
-  export let value: $$Props['value'];
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
-  <slot />
-</AccordionPrimitive.Item>
+<AccordionPrimitive.Item bind:ref class={cn('border-b', className)} {...restProps} />
diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte
index de075bba..c1f6b7db 100644
--- a/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,26 +1,29 @@
 <script lang="ts">
-  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
   import ChevronDown from 'lucide-svelte/icons/chevron-down';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = AccordionPrimitive.TriggerProps;
-  type $$Events = AccordionPrimitive.TriggerEvents;
-
-  let className: $$Props['class'] = undefined;
-  export let level: AccordionPrimitive.HeaderProps['level'] = 3;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    level = 3,
+    children,
+    ...restProps
+  }: WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps['level'];
+  } = $props();
 </script>
 
 <AccordionPrimitive.Header {level} class="flex">
   <AccordionPrimitive.Trigger
+    bind:ref
     class={cn(
-      'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+      'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
       className
     )}
-    {...$$restProps}
-    on:click
+    {...restProps}
   >
-    <slot />
-    <ChevronDown class="h-4 w-4 transition-transform duration-200" />
+    {@render children?.()}
+    <ChevronDown class="text-muted-foreground size-4 shrink-0 transition-transform duration-200" />
   </AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/src/lib/components/ui/accordion/index.ts b/src/lib/components/ui/accordion/index.ts
index b3d6721a..d0cd9657 100644
--- a/src/lib/components/ui/accordion/index.ts
+++ b/src/lib/components/ui/accordion/index.ts
@@ -2,8 +2,8 @@ import { Accordion as AccordionPrimitive } from 'bits-ui';
 import Content from './accordion-content.svelte';
 import Item from './accordion-item.svelte';
 import Trigger from './accordion-trigger.svelte';
-const Root = AccordionPrimitive.Root;
 
+const Root = AccordionPrimitive.Root;
 export {
   Root,
   Content,
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
index 54e10f03..ce6e8abe 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,24 +1,23 @@
 <script lang="ts">
   import Ellipsis from 'lucide-svelte/icons/ellipsis';
+  import type { WithElementRef, WithoutChildren } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLAttributes<HTMLSpanElement> & {
-    el?: HTMLSpanElement;
-  };
-
-  export let el: $$Props['el'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span
-  bind:this={el}
+  bind:this={ref}
   role="presentation"
   aria-hidden="true"
-  class={cn('flex h-9 w-9 items-center justify-center', className)}
-  {...$$restProps}
+  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</span>
 </span>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
index ee2e8afc..909cc952 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
   import type { HTMLLiAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLLiAttributes & {
-    el?: HTMLLIElement;
-  };
-
-  export let el: $$Props['el'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li bind:this={el} class={cn('inline-flex items-center gap-1.5', className)}>
-  <slot />
+<li bind:this={ref} class={cn('inline-flex items-center gap-1.5', className)} {...restProps}>
+  {@render children?.()}
 </li>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
index dafdd4e1..456accb6 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
   import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+  import type { WithElementRef } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLAnchorAttributes & {
-    el?: HTMLAnchorElement;
-    asChild?: boolean;
-  };
+  let {
+    ref = $bindable(null),
+    class: className,
+    href = undefined,
+    child,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+  } = $props();
 
-  export let href: $$Props['href'] = undefined;
-  export let el: $$Props['el'] = undefined;
-  export let asChild: $$Props['asChild'] = false;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-
-  let attrs: Record<string, unknown>;
-
-  $: attrs = {
-    class: cn('transition-colors hover:text-foreground', className),
+  const attrs = $derived({
+    class: cn('hover:text-foreground transition-colors', className),
     href,
-    ...$$restProps
-  };
+    ...restProps
+  });
 </script>
 
-{#if asChild}
-  <slot {attrs} />
+{#if child}
+  {@render child({ props: attrs })}
 {:else}
-  <a bind:this={el} {...attrs} {href} class="hover:underline">
-    <slot {attrs} />
+  <a bind:this={ref} {...attrs}>
+    {@render children?.()}
   </a>
 {/if}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
index cc65ec35..1dd1b45a 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
   import type { HTMLOlAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLOlAttributes & {
-    el?: HTMLOListElement;
-  };
-
-  export let el: $$Props['el'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLOlAttributes> = $props();
 </script>
 
 <ol
-  bind:this={el}
+  bind:this={ref}
   class={cn(
-    'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+    'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
     className
   )}
-  {...$$restProps}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 </ol>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
index 7398e1a2..e2a35e4e 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLAttributes<HTMLSpanElement> & {
-    el?: HTMLSpanElement;
-  };
-
-  export let el: $$Props['el'] = undefined;
-  export let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-  bind:this={el}
+  bind:this={ref}
   role="link"
   aria-disabled="true"
   aria-current="page"
-  class={cn('font-normal text-foreground', className)}
-  {...$$restProps}
+  class={cn('text-foreground font-normal', className)}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 </span>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
index b162db3d..d262251e 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -1,25 +1,27 @@
 <script lang="ts">
-  import type { HTMLLiAttributes } from 'svelte/elements';
   import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLLiAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLLiAttributes & {
-    el?: HTMLLIElement;
-  };
-
-  export let el: $$Props['el'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
 <li
   role="presentation"
   aria-hidden="true"
   class={cn('[&>svg]:size-3.5', className)}
-  bind:this={el}
-  {...$$restProps}
+  bind:this={ref}
+  {...restProps}
 >
-  <slot>
+  {#if children}
+    {@render children?.()}
+  {:else}
     <ChevronRight />
-  </slot>
+  {/if}
 </li>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
index b3b6635b..14983ce2 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  type $$Props = HTMLAttributes<HTMLElement> & {
-    el?: HTMLElement;
-  };
-
-  export let el: $$Props['el'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
-  <slot />
+<nav class={className} bind:this={ref} aria-label="breadcrumb" {...restProps}>
+  {@render children?.()}
 </nav>
diff --git a/src/lib/components/ui/button/button-action.svelte b/src/lib/components/ui/button/action-button.svelte
similarity index 53%
rename from src/lib/components/ui/button/button-action.svelte
rename to src/lib/components/ui/button/action-button.svelte
index c4183f68..230fb318 100644
--- a/src/lib/components/ui/button/button-action.svelte
+++ b/src/lib/components/ui/button/action-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import * as Tooltip from '$lib/components/ui/tooltip';
-  import { cn } from '$lib/utils/shadcn-utils.js';
+  import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+  import { cn } from '$lib/utils/shadcn-utils';
   import type { Snippet } from 'svelte';
 
   type ButtonActionProps = {
@@ -21,19 +21,21 @@
 </script>
 
 <button class="button" onclick={(e) => onclick?.(e)}>
-  <Tooltip.Root openDelay={300} closeDelay={50}>
-    <Tooltip.Trigger
-      class={cn(
-        'w-12 h-12 bg-slate-300 hover:bg-slate-400 transition-colors rounded flex justify-center items-center',
-        className
-      )}
-    >
-      {@render children?.()}
-    </Tooltip.Trigger>
-    <Tooltip.Content {side} transitionConfig={{ x: 5, duration: 100 }}>
-      <p>{tooltip}</p>
-    </Tooltip.Content>
-  </Tooltip.Root>
+  <Tooltip.Provider>
+    <Tooltip.Root>
+      <Tooltip.Trigger
+        class={cn(
+          'w-12 h-12 bg-slate-300 hover:bg-slate-400 transition-colors rounded flex justify-center items-center',
+          className
+        )}
+      >
+        {@render children?.()}
+      </Tooltip.Trigger>
+      <Tooltip.Content {side}>
+        <p>{tooltip}</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
 </button>
 
 <style>
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index d2cca056..fc4a3b2f 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,25 +1,69 @@
+<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: '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-1 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 shadow',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+        outline:
+          'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  });
+
+  export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+  export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+    };
+</script>
+
 <script lang="ts">
-  import { Button as ButtonPrimitive } from 'bits-ui';
-  import { type Events, type Props, buttonVariants } from './index.js';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = Props;
-  type $$Events = Events;
-
-  let className: $$Props['class'] = undefined;
-  export let variant: $$Props['variant'] = 'default';
-  export let size: $$Props['size'] = 'default';
-  export let builders: $$Props['builders'] = [];
-  export { className as class };
+  let {
+    class: className,
+    variant = 'default',
+    size = 'default',
+    ref = $bindable(null),
+    href = undefined,
+    type = 'button',
+    children,
+    ...restProps
+  }: ButtonProps = $props();
 </script>
 
-<ButtonPrimitive.Root
-  {builders}
-  class={cn(buttonVariants({ variant, size, className }))}
-  type="button"
-  {...$$restProps}
-  on:click
-  on:keydown
->
-  <slot />
-</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/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 6186e06a..0cdc6696 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,50 +1,19 @@
-import type { Button as ButtonPrimitive } from 'bits-ui';
-import { tv, type VariantProps } from 'tailwind-variants';
-import Action from './button-action.svelte';
-import Root from './button.svelte';
-
-const buttonVariants = tv({
-  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm 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',
-      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      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 Variant = VariantProps<typeof buttonVariants>['variant'];
-type Size = VariantProps<typeof buttonVariants>['size'];
-
-type Props = ButtonPrimitive.Props & {
-  variant?: Variant;
-  size?: Size;
-};
-
-type Events = ButtonPrimitive.Events;
+import Action from './action-button.svelte';
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants
+} from './button.svelte';
 
 export {
   Action,
   //
   Root as Button,
-  Root,
   buttonVariants,
-  type Events as ButtonEvents,
-  type Props as ButtonProps,
-  type Events,
-  type Props
+  Root,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type ButtonProps as Props
 };
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
deleted file mode 100644
index fdfbf022..00000000
--- a/src/lib/components/ui/card/card-content.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLDivElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<div class={cn('p-6 pt-0', className)} {...$$restProps}>
-  <slot />
-</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
deleted file mode 100644
index 28160715..00000000
--- a/src/lib/components/ui/card/card-description.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLParagraphElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
-  <slot />
-</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
deleted file mode 100644
index d7c1a017..00000000
--- a/src/lib/components/ui/card/card-footer.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLDivElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
-  <slot />
-</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
deleted file mode 100644
index 059bef22..00000000
--- a/src/lib/components/ui/card/card-header.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLDivElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
-  <slot />
-</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
deleted file mode 100644
index ec35b004..00000000
--- a/src/lib/components/ui/card/card-title.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import type { HeadingLevel } from './index.js';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-    tag?: HeadingLevel;
-  };
-
-  let className: $$Props['class'] = undefined;
-  export let tag: $$Props['tag'] = 'h3';
-  export { className as class };
-</script>
-
-<svelte:element
-  this={tag}
-  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-  {...$$restProps}
->
-  <slot />
-</svelte:element>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
deleted file mode 100644
index 26caeced..00000000
--- a/src/lib/components/ui/card/card.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLDivElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<div
-  class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-  {...$$restProps}
->
-  <slot />
-</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
deleted file mode 100644
index 691e6d14..00000000
--- a/src/lib/components/ui/card/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import Root from './card.svelte';
-import Content from './card-content.svelte';
-import Description from './card-description.svelte';
-import Footer from './card-footer.svelte';
-import Header from './card-header.svelte';
-import Title from './card-title.svelte';
-
-export {
-  Root,
-  Content,
-  Description,
-  Footer,
-  Header,
-  Title,
-  //
-  Root as Card,
-  Content as CardContent,
-  Description as CardDescription,
-  Footer as CardFooter,
-  Header as CardHeader,
-  Title as CardTitle
-};
-
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
index 43b271ce..7994e975 100644
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,36 +1,46 @@
 <script lang="ts">
-  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  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/utils/shadcn-utils.js';
 
-  type $$Props = CheckboxPrimitive.Props;
-  type $$Events = CheckboxPrimitive.Events;
-
-  let className: $$Props['class'] = undefined;
-  export let checked: $$Props['checked'] = false;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    ...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',
+    'border-primary 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 shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
     className
   )}
   bind:checked
-  {...$$restProps}
-  on:click
+  bind:ref
+  bind:indeterminate
+  {...restProps}
 >
-  <CheckboxPrimitive.Indicator
-    class={cn('flex h-4 w-4 items-center justify-center text-current')}
-    style="background: {checked ? 'var(--bg, black)' : 'none'}"
-    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({ checked, indeterminate })}
+    <span class="checkbox flex items-center justify-center text-current">
+      {#if indeterminate}
+        <Minus class="size-4" />
+      {:else}
+        <Check class={cn('size-4', !checked && 'text-transparent')} />
+      {/if}
+    </span>
+  {/snippet}
 </CheckboxPrimitive.Root>
+
+<style>
+  .checkbox :global(svg) {
+    background: var(--bg);
+    border-radius: 3px;
+  }
+
+  .checkbox :global(svg:hover) {
+    background: var(--hover-bg);
+  }
+</style>
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index b600c86a..a5d82a61 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -1,23 +1,35 @@
 <script lang="ts">
-  import type { Dialog as DialogPrimitive } from 'bits-ui';
-  import type { Command as CommandPrimitive } from 'cmdk-sv';
+  import {
+    Command as CommandPrimitive,
+    Dialog as DialogPrimitive,
+    type 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;
-
-  export let open: $$Props['open'] = false;
-  export let value: $$Props['value'] = undefined;
+  let {
+    open = $bindable(false),
+    ref = $bindable(null),
+    value = $bindable(''),
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+    WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+      portalProps?: DialogPrimitive.PortalProps;
+      children: Snippet;
+    } = $props();
 </script>
 
-<Dialog.Root bind:open {...$$restProps}>
-  <Dialog.Content class="overflow-hidden p-0 shadow-lg">
+<Dialog.Root bind:open {...restProps}>
+  <Dialog.Content class="overflow-hidden p-0" {portalProps}>
     <Command
-      class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[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}
+      class="[&_[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}
       bind:value
-    >
-      <slot />
-    </Command>
+      bind:ref
+      {children}
+    />
   </Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte
index a63b8159..39d30a1e 100644
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = CommandPrimitive.EmptyProps;
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
-  <slot />
-</CommandPrimitive.Empty>
+<CommandPrimitive.Empty bind:ref class={cn('py-6 text-center text-sm', className)} {...restProps} />
diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte
index 3f7ece4e..84e7fe67 100644
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -1,18 +1,27 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
-  type $$Props = CommandPrimitive.GroupProps;
 
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    heading,
+    ...restProps
+  }: CommandPrimitive.GroupProps & {
+    heading?: string;
+  } = $props();
 </script>
 
 <CommandPrimitive.Group
-  class={cn(
-    'overflow-hidden p-1 text-foreground [&_[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 [&_[data-cmdk-group-heading]]:text-muted-foreground',
-    className
-  )}
-  {...$$restProps}
+  class={cn('text-foreground overflow-hidden p-1', className)}
+  bind:ref
+  {...restProps}
 >
-  <slot />
+  {#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/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
index b016b0e6..fcb2feec 100644
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import Search from 'lucide-svelte/icons/search';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = CommandPrimitive.InputProps;
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let value: string = '';
+  let {
+    ref = $bindable(null),
+    class: className,
+    value = $bindable(''),
+    ...restProps
+  }: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
-  <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+<div class="flex items-center border-b px-3" data-command-input-wrapper="">
+  <Search class="mr-2 size-4 shrink-0 opacity-50" />
   <CommandPrimitive.Input
     class={cn(
-      'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+      'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
       className
     )}
-    {...$$restProps}
+    bind:ref
     bind:value
+    {...restProps}
   />
 </div>
diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte
index 608a2838..e8d005c5 100644
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -1,24 +1,19 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = CommandPrimitive.ItemProps;
-
-  export let asChild = false;
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CommandPrimitive.ItemProps = $props();
 </script>
 
 <CommandPrimitive.Item
-  {asChild}
   class={cn(
-    'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground 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
   )}
-  {...$$restProps}
-  let:action
-  let:attrs
->
-  <slot {action} {attrs} />
-</CommandPrimitive.Item>
+  bind:ref
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte
new file mode 100644
index 00000000..894a1d01
--- /dev/null
+++ b/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/utils/shadcn-utils.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/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte
index eeff8cad..44562e76 100644
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = CommandPrimitive.ListProps;
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  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)}
-  {...$$restProps}
->
-  <slot />
-</CommandPrimitive.List>
+  bind:ref
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte
index 8700d35f..74100ba6 100644
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = CommandPrimitive.SeparatorProps;
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator class={cn('-mx-1 h-px bg-border', className)} {...$$restProps} />
+<CommandPrimitive.Separator bind:ref class={cn('bg-border -mx-1 h-px', className)} {...restProps} />
diff --git a/src/lib/components/ui/command/command-shortcut.svelte b/src/lib/components/ui/command/command-shortcut.svelte
index c02e3247..0e2c9ed3 100644
--- a/src/lib/components/ui/command/command-shortcut.svelte
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-  class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
-  {...$$restProps}
+  class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+  {...restProps}
+  bind:this={ref}
 >
-  <slot />
+  {@render children?.()}
 </span>
diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte
index 3fb291f2..f0a8f2df 100644
--- a/src/lib/components/ui/command/command.svelte
+++ b/src/lib/components/ui/command/command.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { Command as CommandPrimitive } from 'cmdk-sv';
+  import { Command as CommandPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = CommandPrimitive.CommandProps;
-
-  export let value: $$Props['value'] = undefined;
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
+  let {
+    value = $bindable(''),
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CommandPrimitive.RootProps = $props();
 </script>
 
 <CommandPrimitive.Root
   class={cn(
-    'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+    'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
     className
   )}
+  bind:ref
   bind:value
-  {...$$restProps}
->
-  <slot />
-</CommandPrimitive.Root>
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts
index 21c637be..5c77a0b2 100644
--- a/src/lib/components/ui/command/index.ts
+++ b/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,8 +9,9 @@ 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;
+const Loading: typeof CommandPrimitive.Loading = CommandPrimitive.Loading;
 
 export {
   Root,
@@ -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/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index b28eb9f8..88e50f86 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,35 +1,37 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
+  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/utils/shadcn-utils.js';
+  import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = DialogPrimitive.ContentProps;
-
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = flyAndScale;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 200
-  };
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+  } = $props();
 </script>
 
-<Dialog.Portal>
+<Dialog.Portal {...portalProps}>
   <Dialog.Overlay />
   <DialogPrimitive.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
     )}
-    {...$$restProps}
+    {...restProps}
   >
-    <slot />
+    {@render children?.()}
     <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground"
+      class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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="h-4 w-4" />
+      <X class="size-4" />
       <span class="sr-only">Close</span>
     </DialogPrimitive.Close>
   </DialogPrimitive.Content>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
index d456243f..294aa7f5 100644
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -2,15 +2,15 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = DialogPrimitive.DescriptionProps;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
 </script>
 
 <DialogPrimitive.Description
-  class={cn('text-sm text-muted-foreground', className)}
-  {...$$restProps}
->
-  <slot />
-</DialogPrimitive.Description>
+  bind:ref
+  class={cn('text-muted-foreground text-sm', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index 6c7b82bf..34f2c755 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLAttributes<HTMLDivElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  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)}
-  {...$$restProps}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
index 1b753c38..0802f2c8 100644
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { WithElementRef } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLAttributes<HTMLDivElement>;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  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)} {...$$restProps}>
-  <slot />
+<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/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index ccd8e057..24493901 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive } from 'bits-ui';
-  import { fade } from 'svelte/transition';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = DialogPrimitive.OverlayProps;
-
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = fade;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 150
-  };
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.OverlayProps = $props();
 </script>
 
 <DialogPrimitive.Overlay
-  {transition}
-  {transitionConfig}
-  class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
-  {...$$restProps}
+  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/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
deleted file mode 100644
index 45112b79..00000000
--- a/src/lib/components/ui/dialog/dialog-portal.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  type $$Props = DialogPrimitive.PortalProps;
-</script>
-
-<DialogPrimitive.Portal {...$$restProps}>
-  <slot />
-</DialogPrimitive.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
index 6206a177..28d87647 100644
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -2,15 +2,15 @@
   import { Dialog as DialogPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = DialogPrimitive.TitleProps;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.TitleProps = $props();
 </script>
 
 <DialogPrimitive.Title
+  bind:ref
   class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-  {...$$restProps}
->
-  <slot />
-</DialogPrimitive.Title>
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
index 950252f2..663336c0 100644
--- a/src/lib/components/ui/dialog/index.ts
+++ b/src/lib/components/ui/dialog/index.ts
@@ -1,16 +1,16 @@
 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';
 import Content from './dialog-content.svelte';
 import Description from './dialog-description.svelte';
 
-const Root = DialogPrimitive.Root;
-const Trigger = DialogPrimitive.Trigger;
-const Close = DialogPrimitive.Close;
+const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root;
+const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger;
+const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close;
+const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal;
 
 export {
   Root,
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
deleted file mode 100644
index e53801d6..00000000
--- a/src/lib/components/ui/form/form-button.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import * as Button from '$lib/components/ui/button/index.js';
-
-  type $$Props = Button.Props;
-  type $$Events = Button.Events;
-</script>
-
-<Button.Root type="submit" on:click on:keydown {...$$restProps}>
-  <slot />
-</Button.Root>
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
deleted file mode 100644
index 07103263..00000000
--- a/src/lib/components/ui/form/form-description.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import * as FormPrimitive from 'formsnap';
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = HTMLAttributes<HTMLSpanElement>;
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<FormPrimitive.Description
-  class={cn('text-sm text-muted-foreground', className)}
-  {...$$restProps}
-  let:descriptionAttrs
->
-  <slot {descriptionAttrs} />
-</FormPrimitive.Description>
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
deleted file mode 100644
index 2d032921..00000000
--- a/src/lib/components/ui/form/form-element-field.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" context="module">
-  import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
-  type T = Record<string, unknown>;
-  type U = FormPathLeaves<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import * as FormPrimitive from 'formsnap';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLElement>;
-
-  export let form: SuperForm<T>;
-  export let name: U;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
-  <div class={cn('space-y-2', className)}>
-    <slot {constraints} {errors} {tainted} {value} />
-  </div>
-</FormPrimitive.ElementField>
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
deleted file mode 100644
index 846f3220..00000000
--- a/src/lib/components/ui/form/form-field-errors.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import * as FormPrimitive from 'formsnap';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = FormPrimitive.FieldErrorsProps & {
-    errorClasses?: string | undefined | null;
-  };
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-  export let errorClasses: $$Props['class'] = undefined;
-</script>
-
-<FormPrimitive.FieldErrors
-  class={cn('text-sm font-medium text-destructive', className)}
-  {...$$restProps}
-  let:errors
-  let:fieldErrorsAttrs
-  let:errorAttrs
->
-  <slot {errors} {fieldErrorsAttrs} {errorAttrs}>
-    {#each errors as error}
-      <div {...errorAttrs} class={cn(errorClasses)}>{error}</div>
-    {/each}
-  </slot>
-</FormPrimitive.FieldErrors>
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
deleted file mode 100644
index 160c80b4..00000000
--- a/src/lib/components/ui/form/form-field.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" context="module">
-  import type { FormPath, SuperForm } from 'sveltekit-superforms';
-  type T = Record<string, unknown>;
-  type U = FormPath<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import * as FormPrimitive from 'formsnap';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
-
-  export let form: SuperForm<T>;
-  export let name: U;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
-  <div class={cn('space-y-2', className)}>
-    <slot {constraints} {errors} {tainted} {value} />
-  </div>
-</FormPrimitive.Field>
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
deleted file mode 100644
index fa46f786..00000000
--- a/src/lib/components/ui/form/form-fieldset.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" context="module">
-  import type { FormPath, SuperForm } from 'sveltekit-superforms';
-  type T = Record<string, unknown>;
-  type U = FormPath<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-  import * as FormPrimitive from 'formsnap';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = FormPrimitive.FieldsetProps<T, U>;
-
-  export let form: SuperForm<T>;
-  export let name: U;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<FormPrimitive.Fieldset
-  {form}
-  {name}
-  let:constraints
-  let:errors
-  let:tainted
-  let:value
-  class={cn('space-y-2', className)}
->
-  <slot {constraints} {errors} {tainted} {value} />
-</FormPrimitive.Fieldset>
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
deleted file mode 100644
index 9f2deb4a..00000000
--- a/src/lib/components/ui/form/form-label.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import type { Label as LabelPrimitive } from 'bits-ui';
-  import { getFormControl } from 'formsnap';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-  import { Label } from '$lib/components/ui/label/index.js';
-
-  type $$Props = LabelPrimitive.Props;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-
-  const { labelAttrs } = getFormControl();
-</script>
-
-<Label {...$labelAttrs} class={cn('data-[fs-error]:text-destructive', className)} {...$$restProps}>
-  <slot {labelAttrs} />
-</Label>
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
deleted file mode 100644
index ab6e5dc3..00000000
--- a/src/lib/components/ui/form/form-legend.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import * as FormPrimitive from 'formsnap';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = FormPrimitive.LegendProps;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-</script>
-
-<FormPrimitive.Legend
-  {...$$restProps}
-  class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)}
-  let:legendAttrs
->
-  <slot {legendAttrs} />
-</FormPrimitive.Legend>
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
deleted file mode 100644
index f7ea4a74..00000000
--- a/src/lib/components/ui/form/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as FormPrimitive from 'formsnap';
-import Description from './form-description.svelte';
-import Label from './form-label.svelte';
-import FieldErrors from './form-field-errors.svelte';
-import Field from './form-field.svelte';
-import Fieldset from './form-fieldset.svelte';
-import Legend from './form-legend.svelte';
-import ElementField from './form-element-field.svelte';
-import Button from './form-button.svelte';
-
-const Control = FormPrimitive.Control;
-
-export {
-  Field,
-  Control,
-  Label,
-  Button,
-  FieldErrors,
-  Description,
-  Fieldset,
-  Legend,
-  ElementField,
-  //
-  Field as FormField,
-  Control as FormControl,
-  Description as FormDescription,
-  Label as FormLabel,
-  FieldErrors as FormFieldErrors,
-  Fieldset as FormFieldset,
-  Legend as FormLegend,
-  ElementField as FormElementField,
-  Button as FormButton
-};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
deleted file mode 100644
index f7063b39..00000000
--- a/src/lib/components/ui/input/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-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,
-  //
-  Root as Input
-};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
deleted file mode 100644
index 3dece5a0..00000000
--- a/src/lib/components/ui/input/input.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import type { HTMLInputAttributes } from 'svelte/elements';
-  import type { InputEvents } from './index.js';
-  import { cn } from '$lib/utils/shadcn-utils.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;
-</script>
-
-<input
-  class={cn(
-    'flex h-10 w-full rounded-md 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}
-  on:blur
-  on:change
-  on:click
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:paste
-  on:input
-  on:wheel|passive
-  {...$$restProps}
-/>
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index 8492b038..31935cfe 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -2,20 +2,18 @@
   import { Label as LabelPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = LabelPrimitive.Props;
-  type $$Events = LabelPrimitive.Events;
-
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: LabelPrimitive.RootProps = $props();
 </script>
 
 <LabelPrimitive.Root
+  bind:ref
   class={cn(
     'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
     className
   )}
-  {...$$restProps}
-  on:mousedown
->
-  <slot />
-</LabelPrimitive.Root>
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index 95ee2e12..509c5196 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
+  import { cn } from '$lib/utils/shadcn-utils.js';
   import { Popover as PopoverPrimitive } from 'bits-ui';
-  import { cn, flyAndScale } from '$lib/utils/shadcn-utils.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 };
+  let {
+    ref = $bindable(null),
+    class: className,
+    align = 'center',
+    sideOffset = 4,
+    portalProps,
+    ...restProps
+  }: PopoverPrimitive.ContentProps & {
+    portalProps?: PopoverPrimitive.PortalProps;
+  } = $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
-  )}
-  {...$$restProps}
->
-  <slot />
-</PopoverPrimitive.Content>
+<PopoverPrimitive.Portal {...portalProps}>
+  <PopoverPrimitive.Content
+    bind:ref
+    {align}
+    {sideOffset}
+    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/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 00000000..7c86496f
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+
+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;
+
+export {
+  Root,
+  Item,
+  Group,
+  GroupHeading,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  //
+  Root as Select,
+  Item as SelectItem,
+  Group as SelectGroup,
+  GroupHeading as SelectGroupHeading,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton
+};
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 00000000..22de1129
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Select as SelectPrimitive, type WithoutChild } from 'bits-ui';
+  import * as Select from './index.js';
+  import { cn } from '$lib/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+  } = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+  <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}
+  >
+    <Select.ScrollUpButton />
+    <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>
+    <Select.ScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>
diff --git a/src/lib/components/ui/select/select-group-heading.svelte b/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 00000000..6cc91fbc
--- /dev/null
+++ b/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/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SelectPrimitive.GroupHeadingProps = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  class={cn('px-2 py-1.5 text-sm font-semibold', className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 00000000..4e118f18
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Select as SelectPrimitive, type WithoutChild } from 'bits-ui';
+  import Check from 'lucide-svelte/icons/check';
+  import { cn } from '$lib/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+  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-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ selected, highlighted })}
+    <span class="absolute right-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/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 00000000..96e6cc36
--- /dev/null
+++ b/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/utils/shadcn-utils.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/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 00000000..8ffe7dd0
--- /dev/null
+++ b/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/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $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/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 00000000..39bf2a8c
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { Separator } from '$lib/components/ui/separator/index.js';
+  import { cn } from '$lib/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator bind:ref class={cn('bg-muted -mx-1 my-1 h-px', className)} {...restProps} />
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 00000000..3e29b397
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Select as SelectPrimitive, type WithoutChild } from 'bits-ui';
+  import ChevronDown from 'lucide-svelte/icons/chevron-down';
+  import { cn } from '$lib/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+</script>
+
+<SelectPrimitive.Trigger
+  bind:ref
+  class={cn(
+    'border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronDown class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 00000000..2402e13e
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+  Root,
+  //
+  Root as Separator
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 00000000..69e50280
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils/shadcn-utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'horizontal',
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+  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/src/lib/components/ui/slider/index.ts b/src/lib/components/ui/slider/index.ts
deleted file mode 100644
index dd6283d8..00000000
--- a/src/lib/components/ui/slider/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './slider.svelte';
-
-export {
-  Root,
-  //
-  Root as Slider
-};
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
deleted file mode 100644
index f07d8bcd..00000000
--- a/src/lib/components/ui/slider/slider.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { Slider as SliderPrimitive } from 'bits-ui';
-  import { cn } from '$lib/utils/shadcn-utils.js';
-
-  type $$Props = SliderPrimitive.Props;
-
-  let className: $$Props['class'] = undefined;
-  export let value: $$Props['value'] = [0];
-  export { className as class };
-</script>
-
-<SliderPrimitive.Root
-  bind:value
-  class={cn('relative flex w-full touch-none select-none items-center', className)}
-  {...$$restProps}
-  let:thumbs
->
-  <span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-    <SliderPrimitive.Range class="absolute h-full bg-primary" />
-  </span>
-  {#each thumbs as thumb}
-    <SliderPrimitive.Thumb
-      {thumb}
-      class="block h-5 w-5 rounded-full border-2 border-primary bg-background 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"
-    />
-  {/each}
-</SliderPrimitive.Root>
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
index ea5fd697..4d688dc9 100644
--- a/src/lib/components/ui/switch/switch.svelte
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -1,28 +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/utils/shadcn-utils.js';
 
-  type $$Props = SwitchPrimitive.Props;
-  type $$Events = SwitchPrimitive.Events;
-
-  let className: $$Props['class'] = undefined;
-  export let checked: $$Props['checked'] = undefined;
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
 </script>
 
 <SwitchPrimitive.Root
+  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-[24px] w-[44px] 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',
+    'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
     className
   )}
-  {...$$restProps}
-  on:click
-  on:keydown
+  {...restProps}
 >
   <SwitchPrimitive.Thumb
     class={cn(
-      'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      'bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
     )}
   />
 </SwitchPrimitive.Root>
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
index b85607d2..bb0b8dac 100644
--- a/src/lib/components/ui/textarea/textarea.svelte
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -1,38 +1,22 @@
 <script lang="ts">
+  import type { WithElementRef, WithoutChildren } from 'bits-ui';
   import type { HTMLTextareaAttributes } from 'svelte/elements';
-  import type { TextareaEvents } from './index.js';
   import { cn } from '$lib/utils/shadcn-utils.js';
 
-  type $$Props = HTMLTextareaAttributes;
-  type $$Events = TextareaEvents;
-
-  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;
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
+  bind:this={ref}
+  bind:value
   class={cn(
-    'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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',
+    'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
     className
   )}
-  bind:value
-  {readonly}
-  on:blur
-  on:change
-  on:click
-  on:focus
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:paste
-  on:input
-  {...$$restProps}
+  {...restProps}
 ></textarea>
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
index 30adbb72..cee9100d 100644
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/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/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index 326026e2..8263fd57 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,28 +1,21 @@
 <script lang="ts">
   import { Tooltip as TooltipPrimitive } from 'bits-ui';
-  import { cn, flyAndScale } from '$lib/utils/shadcn-utils.js';
+  import { cn } from '$lib/utils/shadcn-utils.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'] = {
-    y: 8,
-    duration: 150
-  };
-  export { className as class };
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    ...restProps
+  }: TooltipPrimitive.ContentProps = $props();
 </script>
 
 <TooltipPrimitive.Content
-  {transition}
-  {transitionConfig}
+  bind:ref
   {sideOffset}
   class={cn(
-    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+    'bg-primary text-primary-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 px-3 py-1.5 text-xs',
     className
   )}
-  {...$$restProps}
->
-  <slot />
-</TooltipPrimitive.Content>
+  {...restProps}
+/>
diff --git a/src/lib/controls/Dropdown.svelte.ts b/src/lib/controls/Dropdown.svelte.ts
index b136a018..24274dd7 100644
--- a/src/lib/controls/Dropdown.svelte.ts
+++ b/src/lib/controls/Dropdown.svelte.ts
@@ -5,18 +5,26 @@ import { PrimeColor } from '$lib/utils/PrimeColors';
  * The Dropdown class is used to create a dropdown with a default value and a range of values.
  *
  * @param defaultValue The default value for the dropdown
+ * @param values The range of values for the dropdown
+ * @param title The title of the dropdown
  * @param color The color of the dropdown default is blue
  */
 
 export class Dropdown implements Controller<string> {
   defaultValue: (typeof this.values)[number] = '';
   value = $state<(typeof this.values)[number]>('');
+  label = '';
   color: string = PrimeColor.blue;
   width = 30;
   values: readonly string[] = [];
   type = 'toggle';
 
-  constructor(defaultValue: string, values: readonly string[], color: string = PrimeColor.blue) {
+  constructor(
+    defaultValue: string,
+    values: readonly string[],
+    color: string = PrimeColor.blue,
+    label = ''
+  ) {
     if (values.length === 0) {
       throw new Error('Dropdown must have at least one label');
     }
@@ -28,6 +36,7 @@ export class Dropdown implements Controller<string> {
       this.defaultValue = defaultValue;
     }
 
+    this.label = label;
     this.value = this.defaultValue;
     this.values = values;
     this.color = color;
diff --git a/src/lib/threlte/Camera3D.svelte b/src/lib/threlte/Camera3D.svelte
index 462b4434..15f86cc1 100644
--- a/src/lib/threlte/Camera3D.svelte
+++ b/src/lib/threlte/Camera3D.svelte
@@ -30,8 +30,8 @@
   const INTERVALS = 20;
   const DURATION = 750;
 
-  let interval: number | NodeJS.Timeout;
-  let doReset: number | NodeJS.Timeout;
+  let interval: ReturnType<typeof setInterval>;
+  let doReset: ReturnType<typeof setTimeout>;
 
   /**
    * Function for reseting the 3D camera to the original position and zoom
diff --git a/src/lib/utils/shadcn-utils.ts b/src/lib/utils/shadcn-utils.ts
index cae01d12..9ad0df42 100644
--- a/src/lib/utils/shadcn-utils.ts
+++ b/src/lib/utils/shadcn-utils.ts
@@ -1,56 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { cubicOut } from 'svelte/easing';
-import type { TransitionConfig } from 'svelte/transition';
 
 export function cn(...inputs: ClassValue[]) {
   return 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]);
-
-      return styleToString({
-        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-        opacity: t
-      });
-    },
-    easing: cubicOut
-  };
-};
diff --git a/src/routes/[...catchall]/+page.svelte b/src/routes/[...catchall]/+page.svelte
index d6625a35..0268b284 100644
--- a/src/routes/[...catchall]/+page.svelte
+++ b/src/routes/[...catchall]/+page.svelte
@@ -22,7 +22,7 @@
 
 <NavBar {fileUrls} />
 
-<div class="mx-auto max-w-4xl p-10">
+<div class="mx-auto max-w-4xl p-10 bg-blue-50">
   <FolderList {fileUrls} />
 
   <div
diff --git a/src/routes/[...catchall]/CommandPrompt.svelte b/src/routes/[...catchall]/CommandPrompt.svelte
index 34c6a97d..6a99b14f 100644
--- a/src/routes/[...catchall]/CommandPrompt.svelte
+++ b/src/routes/[...catchall]/CommandPrompt.svelte
@@ -102,7 +102,7 @@
   });
 </script>
 
-<p class="text-sm text-muted-foreground">
+<p class="text-sm text-blue-950">
   Press
   <kbd
     class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
diff --git a/src/routes/[...catchall]/FolderList.svelte b/src/routes/[...catchall]/FolderList.svelte
index 97544b21..c75a38b4 100644
--- a/src/routes/[...catchall]/FolderList.svelte
+++ b/src/routes/[...catchall]/FolderList.svelte
@@ -36,7 +36,7 @@
     );
 </script>
 
-<Accordion.Root class="container my-10 mx-auto">
+<Accordion.Root type="single" class="container my-10 mx-auto">
   {#each Object.entries(folders) as [folderTitle, files], index}
     <Accordion.Item value="item-{index}">
       <Accordion.Trigger>{formatString(folderTitle)}</Accordion.Trigger>
diff --git a/src/routes/[...catchall]/ListItem.svelte b/src/routes/[...catchall]/ListItem.svelte
index ad010b26..82df6cec 100644
--- a/src/routes/[...catchall]/ListItem.svelte
+++ b/src/routes/[...catchall]/ListItem.svelte
@@ -17,11 +17,11 @@
 
 <div in:fade class="flex gap-2 items-center">
   {#if showUrlIframe == url}
-    <Button.Root class="h-12 bg-blue-400 hover:bg-blue-900" on:click={() => toggleUrlIframe(url)}>
+    <Button.Root class="h-12 bg-blue-400 hover:bg-blue-900" onclick={() => toggleUrlIframe(url)}>
       <EyeOff class="w-4 h-4" />
     </Button.Root>
   {:else}
-    <Button.Root class="h-12 bg-blue-900" on:click={() => toggleUrlIframe(url)}>
+    <Button.Root class="h-12 bg-blue-900" onclick={() => toggleUrlIframe(url)}>
       <Eye class="w-4 h-4" />
     </Button.Root>
   {/if}
diff --git a/src/routes/[...catchall]/NavBar.svelte b/src/routes/[...catchall]/NavBar.svelte
index c99ababd..4b4957f5 100644
--- a/src/routes/[...catchall]/NavBar.svelte
+++ b/src/routes/[...catchall]/NavBar.svelte
@@ -5,16 +5,21 @@
   export let fileUrls: string[];
 </script>
 
-<nav class="sticky top-0 z-50 flex w-full justify-between bg-slate-100 p-4 backdrop-blur">
+<nav
+  class="sticky top-0 z-50 flex w-full justify-between bg-gradient-to-br from-blue-900/95 to-blue-600/50 p-4 backdrop-blur"
+>
   <Breadcrumb.Root>
     <Breadcrumb.List>
       <Breadcrumb.Item>
-        <Breadcrumb.Link href="https://www.tudelft.nl/">TU Delft</Breadcrumb.Link>
+        <Breadcrumb.Link href="https://www.tudelft.nl/" class="text-blue-950">
+          TU Delft
+        </Breadcrumb.Link>
       </Breadcrumb.Item>
       <Breadcrumb.Separator />
       <Breadcrumb.Item>
         <Breadcrumb.Link
           href="https://www.tudelft.nl/ewi/over-de-faculteit/afdelingen/applied-mathematics"
+          class="text-blue-950"
         >
           DIAM
         </Breadcrumb.Link>
@@ -23,22 +28,32 @@
       <Breadcrumb.Item>
         <Breadcrumb.Link
           href="https://www.tudelft.nl/ewi/over-de-faculteit/afdelingen/applied-mathematics/studeren/prime"
+          class="text-blue-950"
         >
           PRIME
         </Breadcrumb.Link>
       </Breadcrumb.Item>
       <Breadcrumb.Separator />
       <Breadcrumb.Item>
-        <Breadcrumb.Link href="https://prime.pages.ewi.tudelft.nl/openlabook-published/index.html">
+        <Breadcrumb.Link
+          href="https://prime.pages.ewi.tudelft.nl/openlabook-published/index.html"
+          class="text-blue-950"
+        >
           Open LA book
         </Breadcrumb.Link>
       </Breadcrumb.Item>
       <Breadcrumb.Separator />
       <Breadcrumb.Item>
-        <Breadcrumb.Page>Interactive Applets</Breadcrumb.Page>
+        <Breadcrumb.Page class="text-blue-100">Interactive Applets</Breadcrumb.Page>
       </Breadcrumb.Item>
     </Breadcrumb.List>
   </Breadcrumb.Root>
 
   <CommandPrompt {fileUrls} />
 </nav>
+
+<style>
+  :global(li[role='presentation'] svg) {
+    @apply fill-blue-200;
+  }
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7e672ff9..68063814 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,11 @@
 import { fontFamily } from 'tailwindcss/defaultTheme';
-import typography from '@tailwindcss/typography';
+import tailwindcssAnimate from 'tailwindcss-animate';
 
 /** @type {import('tailwindcss').Config} */
 const config = {
   darkMode: ['class'],
   content: ['./src/**/*.{html,js,svelte,ts}'],
   safelist: ['dark'],
-  plugins: [typography],
   theme: {
     container: {
       center: true,
@@ -49,18 +48,49 @@ const config = {
         card: {
           DEFAULT: 'hsl(var(--card) / <alpha-value>)',
           foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))'
         }
       },
       borderRadius: {
+        xl: 'calc(var(--radius) + 4px)',
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)'
       },
       fontFamily: {
         sans: [...fontFamily.sans]
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--bits-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--bits-accordion-content-height)' },
+          to: { height: '0' }
+        },
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' }
+        }
+      },
+      animation: {
+        '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'
       }
     }
-  }
+  },
+  plugins: [tailwindcssAnimate]
 };
 
 export default config;

From e3be60fe50269ddb34237253e0e3a305e60736c1 Mon Sep 17 00:00:00 2001
From: Abel de Bruijn <abeldebruijn@hotmail.com>
Date: Sun, 24 Nov 2024 00:30:56 +0100
Subject: [PATCH 2/3] Fix storybook build script with better dynamic imports

---
 .github/workflows/docker-build-push.yml              | 12 ++++++------
 src/lib/components/ActionButtonsAndFormula.svelte    |  6 +++++-
 src/lib/components/ActivityPanel.svelte              |  3 ++-
 src/lib/components/ControllerAndActivityPanel.svelte |  4 +++-
 src/lib/components/Embedding.svelte                  |  3 ++-
 src/lib/components/ShareWindow.svelte                |  2 +-
 src/lib/components/controls/Matrix.svelte            |  3 ++-
 src/lib/components/controls/SlideShow.svelte         |  3 ++-
 src/lib/components/controls/Slider.svelte            |  4 +++-
 src/routes/[...catchall]/CommandPrompt.svelte        |  6 +++++-
 src/routes/[...catchall]/ListItem.svelte             |  6 ++++--
 .../geom_lin_trans/3d_proj_on_plane/+page.svelte     |  2 +-
 12 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/docker-build-push.yml b/.github/workflows/docker-build-push.yml
index b35a5222..52836330 100644
--- a/.github/workflows/docker-build-push.yml
+++ b/.github/workflows/docker-build-push.yml
@@ -32,9 +32,9 @@ jobs:
           push: true
           tags: ghcr.io/${{ env.OWNER_LOWERCASE }}/interactive-visuals-web:latest
 
-      # - name: Build and push (docs)
-      #   uses: docker/build-push-action@v3
-      #   with:
-      #     file: 'Dockerfile-docs'
-      #     push: true
-      #     tags: ghcr.io/${{ env.OWNER_LOWERCASE }}/interactive-visuals-docs:latest
+      - name: Build and push (docs)
+        uses: docker/build-push-action@v3
+        with:
+          file: 'Dockerfile-docs'
+          push: true
+          tags: ghcr.io/${{ env.OWNER_LOWERCASE }}/interactive-visuals-docs:latest
diff --git a/src/lib/components/ActionButtonsAndFormula.svelte b/src/lib/components/ActionButtonsAndFormula.svelte
index 175bfca4..b8134305 100644
--- a/src/lib/components/ActionButtonsAndFormula.svelte
+++ b/src/lib/components/ActionButtonsAndFormula.svelte
@@ -6,7 +6,11 @@
   import type { Controller, Controls } from '$lib/controls/Controls';
   import { globalState } from '$lib/stores/globalState.svelte';
   import type { Formula } from '$lib/utils/Formulas';
-  import { Maximize, Minimize, RotateCcw, Share, SquareFunction } from 'lucide-svelte';
+  import Maximize from 'lucide-svelte/icons/maximize';
+  import Minimize from 'lucide-svelte/icons/minimize';
+  import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
+  import Share from 'lucide-svelte/icons/share';
+  import SquareFunction from 'lucide-svelte/icons/square-function';
   import screenfull from 'screenfull';
 
   type G = readonly Controller<number | boolean | string | State>[];
diff --git a/src/lib/components/ActivityPanel.svelte b/src/lib/components/ActivityPanel.svelte
index d8d94f40..57683c5c 100644
--- a/src/lib/components/ActivityPanel.svelte
+++ b/src/lib/components/ActivityPanel.svelte
@@ -3,7 +3,8 @@
   import * as Dialog from '$lib/components/ui/dialog';
   import { activityState } from '$lib/stores/activity.svelte';
   import { globalState } from '$lib/stores/globalState.svelte';
-  import { Lock, Unlock } from 'lucide-svelte';
+  import Lock from 'lucide-svelte/icons/lock';
+  import Unlock from 'lucide-svelte/icons/lock-open';
 
   type ActivityPanelProps = {
     onLock: (event: MouseEvent) => void;
diff --git a/src/lib/components/ControllerAndActivityPanel.svelte b/src/lib/components/ControllerAndActivityPanel.svelte
index c77ee780..4d4e1ff1 100644
--- a/src/lib/components/ControllerAndActivityPanel.svelte
+++ b/src/lib/components/ControllerAndActivityPanel.svelte
@@ -11,7 +11,9 @@
   import { Toggle } from '$lib/controls/Toggle.svelte';
   import { activityState } from '$lib/stores/activity.svelte';
   import { globalState } from '$lib/stores/globalState.svelte';
-  import { Lock, RotateCcw, Unlock } from 'lucide-svelte';
+  import Lock from 'lucide-svelte/icons/lock';
+  import Unlock from 'lucide-svelte/icons/lock-open';
+  import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
   import * as C from './controls';
 
   type G = readonly Controller<number | boolean | string | State>[];
diff --git a/src/lib/components/Embedding.svelte b/src/lib/components/Embedding.svelte
index 431e95e4..90405e91 100644
--- a/src/lib/components/Embedding.svelte
+++ b/src/lib/components/Embedding.svelte
@@ -1,7 +1,8 @@
 <script>
   import { page } from '$app/stores';
   import { cameraState } from '$lib/stores/camera.svelte';
-  import { Copy, ExternalLink, Github } from 'lucide-svelte';
+  import Copy from 'lucide-svelte/icons/copy';
+  import ExternalLink from 'lucide-svelte/icons/external-link';
   import { fly } from 'svelte/transition';
   import Button from './ui/button/button.svelte';
   import { Checkbox } from './ui/checkbox';
diff --git a/src/lib/components/ShareWindow.svelte b/src/lib/components/ShareWindow.svelte
index 89c1314d..9a32c5ec 100644
--- a/src/lib/components/ShareWindow.svelte
+++ b/src/lib/components/ShareWindow.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
   import * as Accordion from '$lib/components/ui/accordion';
   import * as Dialog from '$lib/components/ui/dialog';
-  import { ExternalLink } from 'lucide-svelte';
+  import ExternalLink from 'lucide-svelte/icons/external-link';
   import Embedding from './Embedding.svelte';
 </script>
 
diff --git a/src/lib/components/controls/Matrix.svelte b/src/lib/components/controls/Matrix.svelte
index f5f8cf78..ebccbdd5 100644
--- a/src/lib/components/controls/Matrix.svelte
+++ b/src/lib/components/controls/Matrix.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Matrix } from '$lib/controls/Matrix.svelte';
   import { PrimeColor } from '$lib/utils/PrimeColors';
-  import { Eye, EyeOff } from 'lucide-svelte';
+  import Eye from 'lucide-svelte/icons/eye';
+  import EyeOff from 'lucide-svelte/icons/eye-off';
   import Latex from '../Latex.svelte';
 
   const { controller }: { controller: Matrix } = $props();
diff --git a/src/lib/components/controls/SlideShow.svelte b/src/lib/components/controls/SlideShow.svelte
index ba38dfed..c41c621f 100644
--- a/src/lib/components/controls/SlideShow.svelte
+++ b/src/lib/components/controls/SlideShow.svelte
@@ -3,7 +3,8 @@
   import { Label } from '$lib/components/ui/label';
   import type { SlideShow } from '$lib/controls/SlideShow.svelte';
   import { PrimeColor } from '$lib/utils/PrimeColors';
-  import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+  import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+  import ChevronRight from 'lucide-svelte/icons/chevron-right';
   import { scale } from 'svelte/transition';
   import { generateUUID } from 'three/src/math/MathUtils.js';
 
diff --git a/src/lib/components/controls/Slider.svelte b/src/lib/components/controls/Slider.svelte
index f3e80902..6f8f8628 100644
--- a/src/lib/components/controls/Slider.svelte
+++ b/src/lib/components/controls/Slider.svelte
@@ -4,7 +4,9 @@
   import type { Slider } from '$lib/controls/Slider.svelte';
   import { activityState } from '$lib/stores/activity.svelte';
   import { PrimeColor } from '$lib/utils/PrimeColors';
-  import { Pause, Play, Plus } from 'lucide-svelte';
+  import Pause from 'lucide-svelte/icons/pause';
+  import Play from 'lucide-svelte/icons/play';
+  import Plus from 'lucide-svelte/icons/plus';
   import { generateUUID } from 'three/src/math/MathUtils.js';
 
   type SliderProps = {
diff --git a/src/routes/[...catchall]/CommandPrompt.svelte b/src/routes/[...catchall]/CommandPrompt.svelte
index 6a99b14f..af84d7cc 100644
--- a/src/routes/[...catchall]/CommandPrompt.svelte
+++ b/src/routes/[...catchall]/CommandPrompt.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import * as Command from '$lib/components/ui/command/index.js';
-  import { ArrowRight, Cross, Eye, EyeOff, File } from 'lucide-svelte';
+  import ArrowRight from 'lucide-svelte/icons/arrow-right';
+  import Cross from 'lucide-svelte/icons/cross';
+  import Eye from 'lucide-svelte/icons/eye';
+  import EyeOff from 'lucide-svelte/icons/eye-off';
+  import File from 'lucide-svelte/icons/file';
   import { onMount } from 'svelte';
   import { scale } from 'svelte/transition';
 
diff --git a/src/routes/[...catchall]/ListItem.svelte b/src/routes/[...catchall]/ListItem.svelte
index 82df6cec..5f4430d1 100644
--- a/src/routes/[...catchall]/ListItem.svelte
+++ b/src/routes/[...catchall]/ListItem.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+  import * as Button from '$lib/components/ui/button';
   import { formatString } from '$lib/utils/FormatString';
+  import ArrowRight from 'lucide-svelte/icons/arrow-right';
+  import Eye from 'lucide-svelte/icons/eye';
+  import EyeOff from 'lucide-svelte/icons/eye-off';
   import { fade } from 'svelte/transition';
-  import * as Button from '$lib/components/ui/button';
-  import { ArrowRight, Eye, EyeOff } from 'lucide-svelte';
 
   export let url = '';
   export let title = '';
diff --git a/src/routes/applet/geom_lin_trans/3d_proj_on_plane/+page.svelte b/src/routes/applet/geom_lin_trans/3d_proj_on_plane/+page.svelte
index 43026c5c..6269a309 100644
--- a/src/routes/applet/geom_lin_trans/3d_proj_on_plane/+page.svelte
+++ b/src/routes/applet/geom_lin_trans/3d_proj_on_plane/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import { Controls } from '$lib/controls/Controls';
   import Angle3D from '$lib/threlte/Angle3D.svelte';
+  import Axis3D from '$lib/threlte/Axis3D.svelte';
   import Canvas3D from '$lib/threlte/Canvas3D.svelte';
   import Latex3D from '$lib/threlte/Latex3D.svelte';
   import PlaneFromNormal from '$lib/threlte/planes/PlaneFromNormal.svelte';
@@ -8,7 +9,6 @@
   import Vector3D from '$lib/threlte/Vector3D.svelte';
   import { parametic_point_on_circle_3D } from '$lib/utils/MathLib';
   import { PrimeColor } from '$lib/utils/PrimeColors';
-  import { Axis3D } from 'lucide-svelte';
   import { Vector3 } from 'three';
   import EllipseTrajectory from '../EllipseTrajectory.svelte';
 

From 4a980c1647d0f2a9babd10fdc67309c42b5b0bfc Mon Sep 17 00:00:00 2001
From: Abel de Bruijn <abeldebruijn@hotmail.com>
Date: Sun, 24 Nov 2024 00:38:42 +0100
Subject: [PATCH 3/3] Refactor Button component to use ShadCNButton instead of
 Button to ensure that no cyclic dependencies occur

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

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 72149604..afa9fd38 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as Button from '$lib/components/ui/button';
+  import * as ShadCNButton from '$lib/components/ui/button';
   import { PrimeColor } from '$lib/utils/PrimeColors';
 
   type ButtonProps = {
@@ -12,12 +12,12 @@
 </script>
 
 <div class="tooltip tooltip-top" data-tip="Action for applet">
-  <Button.Action
+  <ShadCNButton.Action
     class="text-white text-nowrap w-full p-2"
     --bg={color}
     --hover-bg={color + PrimeColor.opacity(0.8)}
     tooltip="Action for applet"
     side="top"
-    onclick={() => action()}>{label}</Button.Action
+    onclick={() => action()}>{label}</ShadCNButton.Action
   >
 </div>