diff --git a/package.json b/package.json
index 45734511..98d028b9 100644
--- a/package.json
+++ b/package.json
@@ -45,13 +45,16 @@
 		"@mdi/js": "^7.4.47",
 		"bits-ui": "^0.12.0",
 		"clsx": "^2.1.0",
+		"formsnap": "^0.4.2",
 		"i18next": "^23.7.12",
 		"lucide-svelte": "^0.303.0",
 		"svelte-i18next": "^2.2.2",
 		"svelte-persisted-store": "^0.8.0",
+		"sveltekit-superforms": "^1.13.4",
 		"tailwind-merge": "^2.2.0",
 		"tailwind-variants": "^0.1.19",
-		"tw-colors": "^3.3.1"
+		"tw-colors": "^3.3.1",
+		"zod": "^3.22.4"
 	},
 	"engines": {
 		"npm": "please-use-pnpm",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6dbc835..04f5057d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   clsx:
     specifier: ^2.1.0
     version: 2.1.0
+  formsnap:
+    specifier: ^0.4.2
+    version: 0.4.2(svelte@4.2.8)(sveltekit-superforms@1.13.4)(zod@3.22.4)
   i18next:
     specifier: ^23.7.12
     version: 23.7.12
@@ -26,6 +29,9 @@ dependencies:
   svelte-persisted-store:
     specifier: ^0.8.0
     version: 0.8.0(svelte@4.2.8)
+  sveltekit-superforms:
+    specifier: ^1.13.4
+    version: 1.13.4(@sveltejs/kit@2.0.6)(svelte@4.2.8)(zod@3.22.4)
   tailwind-merge:
     specifier: ^2.2.0
     version: 2.2.0
@@ -35,6 +41,9 @@ dependencies:
   tw-colors:
     specifier: ^3.3.1
     version: 3.3.1(tailwindcss@3.4.0)
+  zod:
+    specifier: ^3.22.4
+    version: 3.22.4
 
 devDependencies:
   '@commitlint/cli':
@@ -406,7 +415,6 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm64@0.17.19:
@@ -424,7 +432,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-arm@0.17.19:
@@ -442,7 +449,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/android-x64@0.17.19:
@@ -460,7 +466,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-arm64@0.17.19:
@@ -478,7 +483,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/darwin-x64@0.17.19:
@@ -496,7 +500,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-arm64@0.17.19:
@@ -514,7 +517,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/freebsd-x64@0.17.19:
@@ -532,7 +534,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm64@0.17.19:
@@ -550,7 +551,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-arm@0.17.19:
@@ -568,7 +568,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ia32@0.17.19:
@@ -586,7 +585,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-loong64@0.17.19:
@@ -604,7 +602,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-mips64el@0.17.19:
@@ -622,7 +619,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-ppc64@0.17.19:
@@ -640,7 +636,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-riscv64@0.17.19:
@@ -658,7 +653,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-s390x@0.17.19:
@@ -676,7 +670,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/linux-x64@0.17.19:
@@ -694,7 +687,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/netbsd-x64@0.17.19:
@@ -712,7 +704,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/openbsd-x64@0.17.19:
@@ -730,7 +721,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/sunos-x64@0.17.19:
@@ -748,7 +738,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-arm64@0.17.19:
@@ -766,7 +755,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-ia32@0.17.19:
@@ -784,7 +772,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@esbuild/win32-x64@0.17.19:
@@ -802,7 +789,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@@ -977,14 +963,12 @@ packages:
 
   /@polka/url@1.0.0-next.24:
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
-    dev: true
 
   /@rollup/rollup-android-arm-eabi@4.9.1:
     resolution: {integrity: sha512-6vMdBZqtq1dVQ4CWdhFwhKZL6E4L1dV6jUjuBvsavvNJSppzi6dLBbuV+3+IyUREaj9ZFvQefnQm28v4OCXlig==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-android-arm64@4.9.1:
@@ -992,7 +976,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.9.1:
@@ -1000,7 +983,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-darwin-x64@4.9.1:
@@ -1008,7 +990,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.9.1:
@@ -1016,7 +997,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.9.1:
@@ -1025,7 +1005,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.9.1:
@@ -1034,7 +1013,6 @@ packages:
     os: [linux]
     libc: [musl]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-riscv64-gnu@4.9.1:
@@ -1043,7 +1021,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.9.1:
@@ -1052,7 +1029,6 @@ packages:
     os: [linux]
     libc: [glibc]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.9.1:
@@ -1061,7 +1037,6 @@ packages:
     os: [linux]
     libc: [musl]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.9.1:
@@ -1069,7 +1044,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.9.1:
@@ -1077,7 +1051,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.9.1:
@@ -1085,7 +1058,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.0.6):
@@ -1120,7 +1092,6 @@ packages:
       svelte: 4.2.8
       tiny-glob: 0.2.9
       vite: 5.0.10(@types/node@18.19.3)(sass@1.69.6)
-    dev: true
 
   /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10):
     resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
@@ -1136,7 +1107,6 @@ packages:
       vite: 5.0.10(@types/node@18.19.3)(sass@1.69.6)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@sveltejs/vite-plugin-svelte@3.0.1(svelte@4.2.8)(vite@5.0.10):
     resolution: {integrity: sha512-CGURX6Ps+TkOovK6xV+Y2rn8JKa8ZPUHPZ/NKgCxAmgBrXReavzFl8aOSCj3kQ1xqT7yGJj53hjcV/gqwDAaWA==}
@@ -1156,7 +1126,6 @@ packages:
       vitefu: 0.2.5(vite@5.0.10)
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@swc/helpers@0.5.3:
     resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
@@ -1166,7 +1135,6 @@ packages:
 
   /@types/cookie@0.6.0:
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
-    dev: true
 
   /@types/eslint@8.56.0:
     resolution: {integrity: sha512-FlsN0p4FhuYRjIxpbdXovvHQhtlG05O1GG/RNWvdAxTboR438IOTwmrY/vLA+Xfgg06BTkP045M3vpFwTMv1dg==}
@@ -1196,7 +1164,6 @@ packages:
     resolution: {integrity: sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==}
     dependencies:
       undici-types: 5.26.5
-    dev: true
 
   /@types/normalize-package-data@2.4.4:
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -1705,7 +1672,6 @@ packages:
   /cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
-    dev: true
 
   /cosmiconfig-typescript-loader@5.0.0(@types/node@18.19.3)(cosmiconfig@8.3.6)(typescript@5.3.3):
     resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
@@ -1776,7 +1742,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
@@ -1798,7 +1763,6 @@ packages:
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
@@ -1811,7 +1775,6 @@ packages:
 
   /devalue@4.3.2:
     resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
-    dev: true
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@@ -1922,7 +1885,6 @@ packages:
       '@esbuild/win32-arm64': 0.19.10
       '@esbuild/win32-ia32': 0.19.10
       '@esbuild/win32-x64': 0.19.10
-    dev: true
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -2048,7 +2010,6 @@ packages:
 
   /esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
-    dev: true
 
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -2199,6 +2160,18 @@ packages:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  /formsnap@0.4.2(svelte@4.2.8)(sveltekit-superforms@1.13.4)(zod@3.22.4):
+    resolution: {integrity: sha512-iUhGDUcjUW9tCOYLZ1rbNR1wkjtEbrXDxhUnl7+zPKjP5K8ikDfhZWH1cquKdUcHJoSE7M/Rruvg0fNQMjSNtA==}
+    peerDependencies:
+      svelte: ^4.0.0
+      sveltekit-superforms: ^1.7.1
+      zod: ^3.22.2
+    dependencies:
+      svelte: 4.2.8
+      sveltekit-superforms: 1.13.4(@sveltejs/kit@2.0.6)(svelte@4.2.8)(zod@3.22.4)
+      zod: 3.22.4
+    dev: false
+
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
@@ -2309,7 +2282,6 @@ packages:
 
   /globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
-    dev: true
 
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -2325,7 +2297,6 @@ packages:
 
   /globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
-    dev: true
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -2391,7 +2362,6 @@ packages:
 
   /immutable@4.3.4:
     resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
-    dev: true
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -2568,7 +2538,11 @@ packages:
   /kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
-    dev: true
+
+  /klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+    dev: false
 
   /known-css-properties@0.29.0:
     resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==}
@@ -2817,16 +2791,13 @@ packages:
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
-    dev: true
 
   /mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
-    dev: true
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /mustache@4.2.0:
     resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
@@ -3328,7 +3299,6 @@ packages:
       '@rollup/rollup-win32-ia32-msvc': 4.9.1
       '@rollup/rollup-win32-x64-msvc': 4.9.1
       fsevents: 2.3.3
-    dev: true
 
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -3340,7 +3310,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mri: 1.2.0
-    dev: true
 
   /safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
@@ -3363,7 +3332,6 @@ packages:
       chokidar: 3.5.3
       immutable: 4.3.4
       source-map-js: 1.0.2
-    dev: true
 
   /selfsigned@2.4.1:
     resolution: {integrity: sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==}
@@ -3388,7 +3356,6 @@ packages:
 
   /set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
-    dev: true
 
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -3421,7 +3388,6 @@ packages:
       '@polka/url': 1.0.0-next.24
       mrmime: 2.0.0
       totalist: 3.0.1
-    dev: true
 
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -3630,7 +3596,6 @@ packages:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
       svelte: 4.2.8
-    dev: true
 
   /svelte-i18next@2.2.2(i18next@23.7.12)(svelte@4.2.8):
     resolution: {integrity: sha512-IpJDZCH5cCgKfHQHgiLmGT4j9HCdg4fqsP3oP2deLu8PxmNj0Ui6khMiDoxAxedAiYEhr0xendv2xqh3Rq+uQQ==}
@@ -3726,6 +3691,20 @@ packages:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
+  /sveltekit-superforms@1.13.4(@sveltejs/kit@2.0.6)(svelte@4.2.8)(zod@3.22.4):
+    resolution: {integrity: sha512-rM2+Ictaw7OAIorCLmvg82orci/mtO9ZouI4emtx8SyYngx9aED+eNZlHPLufgB6D7geL2a+hMSFtM3zmMQixQ==}
+    peerDependencies:
+      '@sveltejs/kit': 1.x || 2.x
+      svelte: 3.x || 4.x
+      zod: 3.x
+    dependencies:
+      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10)
+      devalue: 4.3.2
+      klona: 2.0.6
+      svelte: 4.2.8
+      zod: 3.22.4
+    dev: false
+
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: false
@@ -3815,7 +3794,6 @@ packages:
     dependencies:
       globalyzer: 0.1.0
       globrex: 0.1.2
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -3826,7 +3804,6 @@ packages:
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
@@ -3894,7 +3871,6 @@ packages:
 
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-    dev: true
 
   /undici@5.28.2:
     resolution: {integrity: sha512-wh1pHJHnUeQV5Xa8/kyQhO7WFa8M34l026L5P/+2TYiakvGy5Rdc8jWZVyG7ieht/0WgJLEd3kcU5gKx+6GC8w==}
@@ -3970,7 +3946,6 @@ packages:
       sass: 1.69.6
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vitefu@0.2.5(vite@5.0.10):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
@@ -3981,7 +3956,6 @@ packages:
         optional: true
     dependencies:
       vite: 5.0.10(@types/node@18.19.3)(sass@1.69.6)
-    dev: true
 
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -4123,4 +4097,3 @@ packages:
 
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
-    dev: true
diff --git a/src/lib/components/ui/accordion/accordion-content.svelte b/src/lib/components/ui/accordion/accordion-content.svelte
new file mode 100644
index 00000000..237db780
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { slide } from 'svelte/transition';
+
+	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 };
+</script>
+
+<AccordionPrimitive.Content
+	class={cn('overflow-hidden text-sm transition-all', className)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<div class="pb-4 pt-0">
+		<slot />
+	</div>
+</AccordionPrimitive.Content>
diff --git a/src/lib/components/ui/accordion/accordion-item.svelte b/src/lib/components/ui/accordion/accordion-item.svelte
new file mode 100644
index 00000000..02063285
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>
diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte
new file mode 100644
index 00000000..f6069a90
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { ChevronDown } from 'lucide-svelte';
+	import { cn } from '$lib/utils';
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let level: AccordionPrimitive.HeaderProps['level'] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown class="h-4 w-4 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
new file mode 100644
index 00000000..0734d4e3
--- /dev/null
+++ b/src/lib/components/ui/accordion/index.ts
@@ -0,0 +1,17 @@
+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;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger
+};
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 00000000..55aa1ff7
--- /dev/null
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { Check, Minus } from 'lucide-svelte';
+	import { cn } from '$lib/utils';
+
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = false;
+	export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		'box-content peer 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-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+		className
+	)}
+	bind:checked
+	{...$$restProps}
+	on:click
+>
+	<CheckboxPrimitive.Indicator
+		class={cn('flex items-center justify-center text-current h-4 w-4')}
+		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>
+</CheckboxPrimitive.Root>
diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 00000000..5c276719
--- /dev/null
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from './checkbox.svelte';
+export {
+	Root,
+	//
+	Root as Checkbox
+};
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 00000000..c718142a
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import * as Dialog from '.';
+	import { cn, flyAndScale } from '$lib/utils';
+	import { X } from 'lucide-svelte';
+
+	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 };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		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',
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<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"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 00000000..84d4e5f1
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn('text-sm text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 00000000..da4f517e
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 00000000..e4b36085
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..671373b9
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { fade } from 'svelte/transition';
+
+	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 };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 00000000..00774dd4
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,8 @@
+<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
new file mode 100644
index 00000000..c133166b
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 00000000..2a1a048e
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+
+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';
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription
+};
diff --git a/src/lib/components/ui/dragdrop/DragDropList.svelte b/src/lib/components/ui/dragdrop/DragDropList.svelte
new file mode 100644
index 00000000..09dec765
--- /dev/null
+++ b/src/lib/components/ui/dragdrop/DragDropList.svelte
@@ -0,0 +1,263 @@
+<script>
+	import { flip } from 'svelte/animate';
+	import { Label } from '$lib/components/ui/label';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import Text from '$lib/components/typography/Text.svelte';
+
+	export let data = [];
+	export let removesItems = false;
+
+	let ghost;
+	let grabbed;
+
+	let lastTarget;
+
+	let mouseY = 0; // pointer y coordinate within client
+	let offsetY = 0; // y distance from top of grabbed element to pointer
+	let layerY = 0; // distance from top of list to top of client
+
+	function grab(clientY, element) {
+		// modify grabbed element
+		grabbed = element;
+		grabbed.dataset.grabY = clientY;
+
+		// modify ghost element (which is actually dragged)
+		ghost.innerHTML = grabbed.innerHTML;
+
+		// record offset from cursor to top of element
+		// (used for positioning ghost)
+		offsetY = grabbed.getBoundingClientRect().y - clientY;
+		drag(clientY);
+	}
+
+	// drag handler updates cursor position
+	function drag(clientY) {
+		if (grabbed) {
+			mouseY = clientY;
+			layerY = ghost.parentNode.getBoundingClientRect().y;
+		}
+	}
+
+	// touchEnter handler emulates the mouseenter event for touch input
+	// (more or less)
+	function touchEnter(ev) {
+		drag(ev.clientY);
+		// trigger dragEnter the first time the cursor moves over a list item
+		let target = document.elementFromPoint(ev.clientX, ev.clientY).closest('.item');
+		if (target && target != lastTarget) {
+			lastTarget = target;
+			dragEnter(ev, target);
+		}
+	}
+
+	function dragEnter(ev, target) {
+		// swap items in data
+		if (grabbed && target != grabbed && target.classList.contains('item')) {
+			moveDatum(parseInt(grabbed.dataset.index), parseInt(target.dataset.index));
+		}
+	}
+
+	// does the actual moving of items in data
+	function moveDatum(from, to) {
+		let temp = data[from];
+		data = [...data.slice(0, from), ...data.slice(from + 1)];
+		data = [...data.slice(0, to), temp, ...data.slice(to)];
+	}
+
+	function release(ev) {
+		grabbed = null;
+	}
+
+	function removeDatum(index) {
+		data = [...data.slice(0, index), ...data.slice(index + 1)];
+	}
+</script>
+
+<!-- All the documentation has to go up here, sorry.
+     (otherwise it conflicts with the HTML or svelte/animate) 
+     The .list has handlers for pointer movement and pointer up/release/end.
+     Each .item has a handler for pointer down/click/start, which assigns that
+     element as the item currently being "grabbed".  They also have a handler
+     for pointer enter (the touchmove handler has extra logic to behave like the
+     no longer extant 'touchenter'), which swaps the entered element with the
+     grabbed element when triggered.
+     You'll also find reactive styling below, which keeps it from being directly
+     part of the imperative javascript handlers. -->
+<main class="basis-[100%]">
+	<div
+		bind:this={ghost}
+		id="ghost"
+		class={grabbed ? 'item haunting' : 'item'}
+		style={'top: ' + (mouseY + offsetY - layerY) + 'px'}
+	>
+		<p></p>
+	</div>
+	<div
+		class="list"
+		on:mousemove={function (ev) {
+			ev.stopPropagation();
+			drag(ev.clientY);
+		}}
+		on:touchmove={function (ev) {
+			ev.stopPropagation();
+			drag(ev.touches[0].clientY);
+		}}
+		on:mouseup={function (ev) {
+			ev.stopPropagation();
+			release(ev);
+		}}
+		on:touchend={function (ev) {
+			ev.stopPropagation();
+			release(ev.touches[0]);
+		}}
+	>
+		{#each data as datum, i (datum.id ? datum.id : JSON.stringify(datum))}
+			<div
+				id={grabbed && (datum.id ? datum.id : JSON.stringify(datum)) == grabbed.dataset.id
+					? 'grabbed'
+					: ''}
+				class="item"
+				data-index={i}
+				data-id={datum.id}
+				data-grabY="0"
+				on:mousedown={function (ev) {
+					grab(ev.clientY, this);
+				}}
+				on:touchstart={function (ev) {
+					grab(ev.touches[0].clientY, this);
+				}}
+				on:mouseenter={function (ev) {
+					ev.stopPropagation();
+					dragEnter(ev, ev.target);
+				}}
+				on:touchmove={function (ev) {
+					ev.stopPropagation();
+					ev.preventDefault();
+					touchEnter(ev.touches[0]);
+				}}
+				animate:flip={{ duration: 200 }}
+			>
+				<div class="buttons">
+					<button
+						class="up"
+						style={'visibility: ' + (i > 0 ? '' : 'hidden') + ';'}
+						on:click={function (ev) {
+							moveDatum(i, i - 1);
+						}}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"
+							><path d="M0 0h24v24H0V0z" fill="none" /><path
+								d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"
+							/></svg
+						>
+					</button>
+					<button
+						class="down"
+						style={'visibility: ' + (i < data.length - 1 ? '' : 'hidden') + ';'}
+						on:click={function (ev) {
+							moveDatum(i, i + 1);
+						}}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"
+							><path d="M0 0h24v24H0V0z" fill="none" /><path
+								d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
+							/></svg
+						>
+					</button>
+				</div>
+
+				<div class="content m-0 w-full">
+					{#if datum.html}
+						{@html datum.html}
+					{:else if datum.text}
+						<p>{datum.text}</p>
+					{:else if datum.check}
+						<div class="w-full h-full flex flex-row items-center justify-between px-16">
+							<Label
+								for={datum.check
+									.replace(/[^a-zA-Z]/g, '')
+									.replace(/(?:^\w|[A-Z]|\b\w)/g, (match, index) =>
+										index === 0 ? match.toLowerCase() : match.toUpperCase()
+									)
+									.concat('Check')}
+							>
+								<Text type="h4">
+									{datum.check}
+								</Text>
+							</Label>
+							<Checkbox
+								class=""
+								id={datum.check
+									.replace(/[^a-zA-Z]/g, '')
+									.replace(/(?:^\w|[A-Z]|\b\w)/g, (match, index) =>
+										index === 0 ? match.toLowerCase() : match.toUpperCase()
+									)
+									.concat('Check')}
+								checked
+							/>
+						</div>
+					{:else}
+						<p>{datum}</p>
+					{/if}
+				</div>
+
+				<div class="buttons delete">
+					{#if removesItems}
+						<button
+							on:click={function (ev) {
+								removeDatum(i);
+							}}
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"
+								><path d="M0 0h24v24H0z" fill="none" /><path
+									d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+								/></svg
+							>
+						</button>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</main>
+
+<style>
+	main {
+		position: relative;
+	}
+
+	.list {
+		@apply cursor-grab z-[5] flex flex-col shrink;
+	}
+	.item {
+		@apply bg-foreground box-border inline-flex w-full min-h-[3em] border select-none mb-[0.5em] rounded-sm border-solid border-black;
+	}
+	.item:last-child {
+		@apply mb-0;
+	}
+	.item:not(#grabbed):not(#ghost) {
+		@apply z-10;
+	}
+	.buttons {
+		@apply w-8 min-w-[32px] flex flex-col mx-0 my-auto;
+	}
+	.buttons button {
+		@apply cursor-pointer w-[18px] h-[18px] border bg-inherit mx-auto my-0 p-0 border-solid border-[rgba(0,0,0,0)] focus:border focus:border-solid focus:border-[black];
+		@apply invert;
+	}
+	.delete {
+		@apply w-8;
+	}
+	#grabbed {
+		@apply opacity-[0.0];
+	}
+	#ghost {
+		@apply pointer-events-none z-[-5] absolute opacity-[0.0] left-0 top-0;
+	}
+	#ghost * {
+		@apply pointer-events-none;
+	}
+	#ghost.haunting {
+		@apply z-20 opacity-[1.0];
+	}
+</style>
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
new file mode 100644
index 00000000..45596fc7
--- /dev/null
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import * as Button from '@/registry/default/ui/button';
+	type $$Props = Button.Props;
+	type $$Events = Button.Events;
+</script>
+
+<Button.Root type="submit" {...$$restProps} on:click on:keydown>
+	<slot />
+</Button.Root>
diff --git a/src/lib/components/ui/form/form-checkbox.svelte b/src/lib/components/ui/form/form-checkbox.svelte
new file mode 100644
index 00000000..fa12c1e3
--- /dev/null
+++ b/src/lib/components/ui/form/form-checkbox.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { Checkbox } from '@/registry/default/ui/checkbox';
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
+
+	const { name, setValue, attrStore, value } = getFormField();
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { name: nameAttr, value: valueAttr, ...rest } = $attrStore;
+</script>
+
+<Checkbox
+	{...rest}
+	checked={typeof $value === 'boolean' ? $value : false}
+	onCheckedChange={(v) => {
+		onCheckedChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+	on:click
+	on:keydown
+/>
+<input hidden {name} value={$value} />
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
new file mode 100644
index 00000000..0e851ec7
--- /dev/null
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	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}>
+	<slot />
+</FormPrimitive.Description>
diff --git a/src/lib/components/ui/form/form-input.svelte b/src/lib/components/ui/form/form-input.svelte
new file mode 100644
index 00000000..a2d22f1a
--- /dev/null
+++ b/src/lib/components/ui/form/form-input.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Input, type InputEvents } from '@/registry/default/ui/input';
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	const { attrStore, value } = getFormField();
+</script>
+
+<Input
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>
diff --git a/src/lib/components/ui/form/form-item.svelte b/src/lib/components/ui/form/form-item.svelte
new file mode 100644
index 00000000..11b90794
--- /dev/null
+++ b/src/lib/components/ui/form/form-item.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('space-y-2', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
new file mode 100644
index 00000000..118900c5
--- /dev/null
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Label as LabelPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import { Label } from '@/registry/default/ui/label';
+
+	type $$Props = LabelPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+
+	const { errors, ids } = getFormField();
+</script>
+
+<Label for={$ids.input} class={cn($errors && 'text-destructive', className)} {...$$restProps}>
+	<slot />
+</Label>
diff --git a/src/lib/components/ui/form/form-native-select.svelte b/src/lib/components/ui/form/form-native-select.svelte
new file mode 100644
index 00000000..08733651
--- /dev/null
+++ b/src/lib/components/ui/form/form-native-select.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { buttonVariants } from '@/registry/default/ui/button';
+	import { cn } from '$lib/utils';
+	import { ChevronDown } from 'lucide-svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLSelectAttributes;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class="relative">
+	<FormPrimitive.Select
+		class={cn(
+			buttonVariants({ variant: 'outline' }),
+			'appearance-none bg-transparent font-normal',
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+	</FormPrimitive.Select>
+	<ChevronDown class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+</div>
diff --git a/src/lib/components/ui/form/form-radio-group.svelte b/src/lib/components/ui/form/form-radio-group.svelte
new file mode 100644
index 00000000..0f6c3f5e
--- /dev/null
+++ b/src/lib/components/ui/form/form-radio-group.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import * as RadioGroup from '@/registry/default/ui/radio-group';
+
+	type $$Props = RadioGroupPrimitive.Props;
+	const { attrStore, setValue, name, value } = getFormField();
+
+	export let onValueChange: $$Props['onValueChange'] = undefined;
+</script>
+
+<RadioGroup.Root
+	{...$attrStore}
+	onValueChange={(v) => {
+		onValueChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+>
+	<slot />
+	<input hidden {name} value={$value} />
+</RadioGroup.Root>
diff --git a/src/lib/components/ui/form/form-select-trigger.svelte b/src/lib/components/ui/form/form-select-trigger.svelte
new file mode 100644
index 00000000..50873db4
--- /dev/null
+++ b/src/lib/components/ui/form/form-select-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as Select from '@/registry/default/ui/select';
+	import type { Select as SelectPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+
+	type $$Props = SelectPrimitive.TriggerProps & {
+		placeholder?: string;
+	};
+	type $$Events = SelectPrimitive.TriggerEvents;
+	const { attrStore } = getFormField();
+	export let placeholder = '';
+</script>
+
+<Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown type="button">
+	<Select.Value {placeholder} />
+	<slot />
+</Select.Trigger>
diff --git a/src/lib/components/ui/form/form-select.svelte b/src/lib/components/ui/form/form-select.svelte
new file mode 100644
index 00000000..bbefeeec
--- /dev/null
+++ b/src/lib/components/ui/form/form-select.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Select from '@/registry/default/ui/select';
+	import { getFormField } from 'formsnap';
+	import type { Select as SelectPrimitive } from 'bits-ui';
+
+	type $$Props = SelectPrimitive.Props<unknown>;
+	const { setValue, name, value } = getFormField();
+	export let onSelectedChange: $$Props['onSelectedChange'] = undefined;
+</script>
+
+<Select.Root
+	onSelectedChange={(v) => {
+		onSelectedChange?.(v);
+		setValue(v ? v.value : undefined);
+	}}
+	{...$$restProps}
+>
+	<slot />
+	<input hidden {name} value={$value} />
+</Select.Root>
diff --git a/src/lib/components/ui/form/form-switch.svelte b/src/lib/components/ui/form/form-switch.svelte
new file mode 100644
index 00000000..3ca8565c
--- /dev/null
+++ b/src/lib/components/ui/form/form-switch.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { Switch as SwitchPrimitive } from 'bits-ui';
+	import { Switch } from '@/registry/default/ui/switch';
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
+
+	const { name, setValue, attrStore, value } = getFormField();
+</script>
+
+<Switch
+	{...$attrStore}
+	checked={typeof $value === 'boolean' ? $value : false}
+	onCheckedChange={(v) => {
+		onCheckedChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+	on:click
+	on:keydown
+/>
+<input hidden {name} value={$value} />
diff --git a/src/lib/components/ui/form/form-textarea.svelte b/src/lib/components/ui/form/form-textarea.svelte
new file mode 100644
index 00000000..7cb3d405
--- /dev/null
+++ b/src/lib/components/ui/form/form-textarea.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import type { TextareaGetFormField } from '.';
+	import { Textarea, type TextareaEvents } from '@/registry/default/ui/textarea';
+
+	type $$Props = HTMLTextareaAttributes;
+	type $$Events = TextareaEvents;
+
+	const { attrStore, value } = getFormField() as TextareaGetFormField;
+</script>
+
+<Textarea
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>
diff --git a/src/lib/components/ui/form/form-validation.svelte b/src/lib/components/ui/form/form-validation.svelte
new file mode 100644
index 00000000..bc15acd5
--- /dev/null
+++ b/src/lib/components/ui/form/form-validation.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Validation
+	class={cn('text-sm font-medium text-destructive', className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
new file mode 100644
index 00000000..a8990dc9
--- /dev/null
+++ b/src/lib/components/ui/form/index.ts
@@ -0,0 +1,82 @@
+import { Form as FormPrimitive, getFormField } from 'formsnap';
+import * as RadioGroupComp from '$lib/components/ui/radio-group';
+import * as SelectComp from '$lib/components/ui/select';
+import type { Writable } from 'svelte/store';
+import Item from './form-item.svelte';
+import Input from './form-input.svelte';
+import Textarea from './form-textarea.svelte';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import Validation from './form-validation.svelte';
+import Checkbox from './form-checkbox.svelte';
+import Switch from './form-switch.svelte';
+import NativeSelect from './form-native-select.svelte';
+import RadioGroup from './form-radio-group.svelte';
+import Select from './form-select.svelte';
+import SelectTrigger from './form-select-trigger.svelte';
+import Button from './form-button.svelte';
+
+const Root = FormPrimitive.Root;
+const Field = FormPrimitive.Field;
+const Control = FormPrimitive.Control;
+const RadioItem = RadioGroupComp.Item;
+const NativeRadio = FormPrimitive.Radio;
+const SelectContent = SelectComp.Content;
+const SelectLabel = SelectComp.Label;
+const SelectGroup = SelectComp.Group;
+const SelectItem = SelectComp.Item;
+const SelectSeparator = SelectComp.Separator;
+
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
+	value: Writable<string>;
+};
+
+export {
+	Root,
+	Field,
+	Control,
+	Item,
+	Input,
+	Label,
+	Button,
+	Switch,
+	Select,
+	Checkbox,
+	Textarea,
+	Validation,
+	RadioGroup,
+	RadioItem,
+	Description,
+	SelectContent,
+	SelectLabel,
+	SelectGroup,
+	SelectItem,
+	SelectSeparator,
+	SelectTrigger,
+	NativeSelect,
+	NativeRadio,
+	//
+	Root as Form,
+	Field as FormField,
+	Control as FormControl,
+	Item as FormItem,
+	Input as FormInput,
+	Textarea as FormTextarea,
+	Description as FormDescription,
+	Label as FormLabel,
+	Validation as FormValidation,
+	NativeSelect as FormNativeSelect,
+	NativeRadio as FormNativeRadio,
+	Checkbox as FormCheckbox,
+	Switch as FormSwitch,
+	RadioGroup as FormRadioGroup,
+	RadioItem as FormRadioItem,
+	Select as FormSelect,
+	SelectContent as FormSelectContent,
+	SelectLabel as FormSelectLabel,
+	SelectGroup as FormSelectGroup,
+	SelectItem as FormSelectItem,
+	SelectSeparator as FormSelectSeparator,
+	SelectTrigger as FormSelectTrigger,
+	Button as FormButton
+};
diff --git a/src/lib/components/ui/hover-card/hover-card-content.svelte b/src/lib/components/ui/hover-card/hover-card-content.svelte
new file mode 100644
index 00000000..6ccf149d
--- /dev/null
+++ b/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+
+	type $$Props = HoverCardPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export let align: $$Props['align'] = 'center';
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export { className as class };
+</script>
+
+<HoverCardPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{align}
+	{sideOffset}
+	class={cn(
+		'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none mt-3',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</HoverCardPrimitive.Content>
diff --git a/src/lib/components/ui/hover-card/index.ts b/src/lib/components/ui/hover-card/index.ts
new file mode 100644
index 00000000..fdbf0bbe
--- /dev/null
+++ b/src/lib/components/ui/hover-card/index.ts
@@ -0,0 +1,14 @@
+import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+import Content from './hover-card-content.svelte';
+const Root = HoverCardPrimitive.Root;
+const Trigger = HoverCardPrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger
+};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 00000000..9ba89bcd
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,25 @@
+import Root from './input.svelte';
+
+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>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 00000000..d9f63e19
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils';
+	import type { InputEvents } from '.';
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground 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
+	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}
+/>
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
new file mode 100644
index 00000000..808d1415
--- /dev/null
+++ b/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
new file mode 100644
index 00000000..53a19428
--- /dev/null
+++ b/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
new file mode 100644
index 00000000..c524e471
--- /dev/null
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,14 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger
+};
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 00000000..6934db97
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+
+	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 };
+</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>
diff --git a/src/lib/components/ui/radio-group/index.ts b/src/lib/components/ui/radio-group/index.ts
new file mode 100644
index 00000000..7d71e248
--- /dev/null
+++ b/src/lib/components/ui/radio-group/index.ts
@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
+const Input = RadioGroupPrimitive.Input;
+
+export {
+	Root,
+	Input,
+	Item,
+	//
+	Root as RadioGroup,
+	Input as RadioGroupInput,
+	Item as RadioGroupItem
+};
diff --git a/src/lib/components/ui/radio-group/radio-group-item.svelte b/src/lib/components/ui/radio-group/radio-group-item.svelte
new file mode 100644
index 00000000..43ef065f
--- /dev/null
+++ b/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { Circle } from 'lucide-svelte';
+	import { cn } from '$lib/utils';
+
+	type $$Props = RadioGroupPrimitive.ItemProps;
+	type $$Events = RadioGroupPrimitive.ItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	class={cn(
+		'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<div class="flex items-center justify-center">
+		<RadioGroupPrimitive.ItemIndicator>
+			<Circle class="h-2.5 w-2.5 fill-current text-current" />
+		</RadioGroupPrimitive.ItemIndicator>
+	</div>
+</RadioGroupPrimitive.Item>
diff --git a/src/lib/components/ui/radio-group/radio-group.svelte b/src/lib/components/ui/radio-group/radio-group.svelte
new file mode 100644
index 00000000..f4ec3467
--- /dev/null
+++ b/src/lib/components/ui/radio-group/radio-group.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = RadioGroupPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
+	export { className as class };
+</script>
+
+<RadioGroupPrimitive.Root bind:value class={cn('grid gap-2', className)} {...$$restProps}>
+	<slot />
+</RadioGroupPrimitive.Root>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 00000000..6b2ec200
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+
+import Label from './select-label.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';
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator
+};
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..ce2b67ba
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+	import { scale } from 'svelte/transition';
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let inTransition: $$Props['inTransition'] = flyAndScale;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
+	export let outTransition: $$Props['outTransition'] = scale;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50
+	};
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
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..4b7ed669
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { Check } from 'lucide-svelte';
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export let label: $$Props['label'] = undefined;
+	export let disabled: $$Props['disabled'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot />
+</SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 00000000..17432017
--- /dev/null
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
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..49a211e9
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', 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..259ce346
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { ChevronDown } from 'lucide-svelte';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</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..768efac9
--- /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..499bf675
--- /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';
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'horizontal';
+	export let decorative: $$Props['decorative'] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/skeleton/index.ts b/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 00000000..3120ce12
--- /dev/null
+++ b/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from './skeleton.svelte';
+
+export {
+	Root,
+	//
+	Root as Skeleton
+};
diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 00000000..eeb89f67
--- /dev/null
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('animate-pulse rounded-md bg-muted', className)} {...$$restProps} />
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 00000000..fcaf06bf
--- /dev/null
+++ b/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 00000000..f1d41c58
--- /dev/null
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast:
+				'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+			description: 'group-[.toast]:text-muted-foreground',
+			actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+		}
+	}}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
new file mode 100644
index 00000000..129f8f5c
--- /dev/null
+++ b/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+	Root,
+	//
+	Root as Switch
+};
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..247f84aa
--- /dev/null
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SwitchPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		'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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+		className
+	)}
+	{...$$restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
new file mode 100644
index 00000000..99239aee
--- /dev/null
+++ b/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow
+};
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 00000000..14be6d65
--- /dev/null
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<tbody class={cn('[&_tr:last-child]:border-0', className)} {...$$restProps}>
+	<slot />
+</tbody>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 00000000..fa76b072
--- /dev/null
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
+	<slot />
+</caption>
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 00000000..33126c3f
--- /dev/null
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLTdAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLTdAttributes;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<td
+	class={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</td>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 00000000..97e65f55
--- /dev/null
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
+	<slot />
+</tfoot>
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 00000000..c929e4df
--- /dev/null
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLThAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLThAttributes;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<th
+	class={cn(
+		'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</th>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 00000000..0d275af8
--- /dev/null
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<thead class={cn('[&_tr]:border-b', className)} {...$$restProps} on:click on:keydown>
+	<slot />
+</thead>
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 00000000..16d498ba
--- /dev/null
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
+		'data-state'?: unknown;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<tr
+	class={cn(
+		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</tr>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
new file mode 100644
index 00000000..4419e492
--- /dev/null
+++ b/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLTableAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLTableAttributes;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class="w-full overflow-auto">
+	<table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
+		<slot />
+	</table>
+</div>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 00000000..00ecd770
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+const Root = TabsPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger
+};
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 00000000..ca6bbf97
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = TabsPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<TabsPrimitive.Content
+	class={cn(
+		'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.Content>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 00000000..3de19441
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = TabsPrimitive.ListProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<TabsPrimitive.List
+	class={cn(
+		'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.List>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 00000000..d1deca47
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = TabsPrimitive.TriggerProps;
+	type $$Events = TabsPrimitive.TriggerEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export { className as class };
+</script>
+
+<TabsPrimitive.Trigger
+	class={cn(
+		'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+>
+	<slot />
+</TabsPrimitive.Trigger>
diff --git a/src/lib/components/ui/textarea/index.ts b/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 00000000..eac4cc5e
--- /dev/null
+++ b/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,28 @@
+import Root from './textarea.svelte';
+
+type FormTextareaEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLTextAreaElement;
+};
+
+type TextareaEvents = {
+	blur: FormTextareaEvent<FocusEvent>;
+	change: FormTextareaEvent<Event>;
+	click: FormTextareaEvent<MouseEvent>;
+	focus: FormTextareaEvent<FocusEvent>;
+	keydown: FormTextareaEvent<KeyboardEvent>;
+	keypress: FormTextareaEvent<KeyboardEvent>;
+	keyup: FormTextareaEvent<KeyboardEvent>;
+	mouseover: FormTextareaEvent<MouseEvent>;
+	mouseenter: FormTextareaEvent<MouseEvent>;
+	mouseleave: FormTextareaEvent<MouseEvent>;
+	paste: FormTextareaEvent<ClipboardEvent>;
+	input: FormTextareaEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Textarea,
+	type TextareaEvents,
+	type FormTextareaEvent
+};
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 00000000..1fa5e30e
--- /dev/null
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils';
+
+	type $$Props = HTMLTextareaAttributes;
+
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
+	export { className as class };
+</script>
+
+<textarea
+	class={cn(
+		'flex min-h-[80px] w-full rounded-md border border-input bg-transparent 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',
+		className
+	)}
+	bind:value
+	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}
+/>
diff --git a/src/lib/components/ui/toggle-group/index.ts b/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 00000000..d9aef03a
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { toggleVariants } from '$lib/components/ui/toggle';
+import { getContext, setContext } from 'svelte';
+import Root from './toggle-group.svelte';
+import Item from './toggle-group-item.svelte';
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+export function setToggleGroupCtx(props: ToggleVariants) {
+	setContext('toggleGroup', props);
+}
+
+export function getToggleGroupCtx() {
+	return getContext<ToggleVariants>('toggleGroup');
+}
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem
+};
diff --git a/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 00000000..bc142736
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { getToggleGroupCtx, type ToggleVariants } from '.';
+	import { toggleVariants } from '@/registry/default/ui/toggle';
+
+	type $$Props = ToggleGroupPrimitive.ItemProps & ToggleVariants;
+
+	let className: string | undefined | null = undefined;
+
+	export { className as class };
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let value: $$Props['value'];
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size
+		}),
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</ToggleGroupPrimitive.Item>
diff --git a/src/lib/components/ui/toggle-group/toggle-group.svelte b/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 00000000..5f90df2e
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { VariantProps } from 'tailwind-variants';
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import type { toggleVariants } from '@/registry/default/ui/toggle';
+	import { setToggleGroupCtx } from '.';
+	import { cn } from '$lib/utils';
+
+	type T = $$Generic<'single' | 'multiple'>;
+	type $$Props = ToggleGroupPrimitive.Props<T> & VariantProps<typeof toggleVariants>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let value: $$Props['value'] = undefined;
+
+	setToggleGroupCtx({
+		variant,
+		size
+	});
+</script>
+
+<ToggleGroupPrimitive.Root
+	class={cn('flex items-center justify-center gap-1', className)}
+	bind:value
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder} />
+</ToggleGroupPrimitive.Root>
diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 00000000..dddc1e6d
--- /dev/null
+++ b/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,30 @@
+import Root from './toggle.svelte';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const toggleVariants = tv({
+	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground',
+	variants: {
+		variant: {
+			default: 'bg-transparent',
+			outline: 'bg-transparent border border-input hover:bg-accent hover:text-accent-foreground'
+		},
+		size: {
+			default: 'h-10 px-3',
+			sm: 'h-9 px-2.5',
+			lg: 'h-11 px-5'
+		}
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof toggleVariants>['variant'];
+export type Size = VariantProps<typeof toggleVariants>['size'];
+
+export {
+	Root,
+	//
+	Root as Toggle
+};
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 00000000..b5a3bba3
--- /dev/null
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from 'bits-ui';
+	import { toggleVariants, type Variant, type Size } from '.';
+	import { cn } from '$lib/utils';
+
+	type $$Props = TogglePrimitive.Props & {
+		variant?: Variant;
+		size?: Size;
+	};
+	type $$Events = TogglePrimitive.Events;
+
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let pressed: $$Props['pressed'] = undefined;
+	export { className as class };
+</script>
+
+<TogglePrimitive.Root
+	bind:pressed
+	class={cn(toggleVariants({ variant, size, className }))}
+	{...$$restProps}
+	on:click
+>
+	<slot />
+</TogglePrimitive.Root>
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..243cd027
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 00000000..8044986e
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+
+	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 };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>