problem: no starting point

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "zinc"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

package.json

@@ -0,0 +1,49 @@
+{
+	"name": "hypergolic",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.13",
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.38",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.5.14",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@internationalized/date": "^3.5.4",
+		"bits-ui": "^0.21.10",
+		"clsx": "^2.1.1",
+		"cmdk-sv": "^0.0.17",
+		"embla-carousel-svelte": "^8.1.3",
+		"formsnap": "^1.0.0",
+		"lucide-svelte": "^0.383.0",
+		"mode-watcher": "^0.3.0",
+		"paneforge": "^0.0.4",
+		"svelte-sonner": "^0.3.24",
+		"sveltekit-superforms": "^2.14.0",
+		"tailwind-merge": "^2.3.0",
+		"tailwind-variants": "^0.2.1",
+		"vaul-svelte": "^0.3.1",
+		"zod": "^3.23.8"
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/app.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+ 
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 240 10% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 240 4.9% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content, maximum-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class=" bg-zinc-50 dark:bg-zinc-900 overflow-hidden h-dvh">
+		<div class="h-full w-screen" style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/layouts/Sidebar.svelte

@@ -0,0 +1,182 @@
+
+<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+    <span class="sr-only">Open sidebar</span>
+    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+    </svg>
+ </button>
+ 
+ <aside id="logo-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
+    <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
+       <a href="https://flowbite.com/" class="flex items-center ps-2.5 mb-5">
+          <img src="https://flowbite.com/docs/images/logo.svg" class="h-6 me-3 sm:h-7" alt="Flowbite Logo" />
+          <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
+       </a>
+       <ul class="space-y-2 font-medium">
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
+                   <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
+                   <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
+                </svg>
+                <span class="ms-3">Dashboard</span>
+             </a>
+          </li>
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
+                   <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">Kanban</span>
+                <span class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+             </a>
+          </li>
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                   <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">Inbox</span>
+                <span class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+             </a>
+          </li>
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+                   <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">Users</span>
+             </a>
+          </li>
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                   <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">Products</span>
+             </a>
+          </li>
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">Sign In</span>
+             </a>
+          </li>
+          <li>
+             <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                   <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"/>
+                   <path d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"/>
+                   <path d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"/>
+                </svg>
+                <span class="flex-1 ms-3 whitespace-nowrap">Sign Up</span>
+             </a>
+          </li>
+       </ul>
+    </div>
+ </aside>
+ 
+ <div class="p-4 sm:ml-64">
+    <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700">
+       <div class="grid grid-cols-3 gap-4 mb-4">
+          <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+       </div>
+       <div class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800">
+          <p class="text-2xl text-gray-400 dark:text-gray-500">
+             <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+             </svg>
+          </p>
+       </div>
+       <div class="grid grid-cols-2 gap-4 mb-4">
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+       </div>
+       <div class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800">
+          <p class="text-2xl text-gray-400 dark:text-gray-500">
+             <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+             </svg>
+          </p>
+       </div>
+       <div class="grid grid-cols-2 gap-4">
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+          <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
+             <p class="text-2xl text-gray-400 dark:text-gray-500">
+                <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+                </svg>
+             </p>
+          </div>
+       </div>
+    </div>
+ </div>
+ 

src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+	import { cn } from "$lib/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 };
+</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>

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.js";
+
+	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>

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/icons/chevron-down";
+	import { cn } from "$lib/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 };
+</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>

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,
+};

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ActionProps;
+	type $$Events = AlertDialogPrimitive.ActionEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action
+	class={cn(buttonVariants(), className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Action>

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.CancelProps;
+	type $$Events = AlertDialogPrimitive.CancelEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Cancel>

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import * as AlertDialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialog.Portal>
+	<AlertDialog.Overlay />
+	<AlertDialogPrimitive.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 />
+	</AlertDialogPrimitive.Content>
+</AlertDialog.Portal>

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</AlertDialogPrimitive.Description>

src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	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>

src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	type $$Props = AlertDialogPrimitive.PortalProps;
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Portal>

src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AlertDialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h3";
+	export { className as class };
+</script>
+
+<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+	<slot />
+</AlertDialogPrimitive.Title>

src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,40 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};

src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type Variant, alertVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>

src/lib/components/ui/alert/index.ts

@@ -0,0 +1,33 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

src/lib/components/ui/aspect-ratio/aspect-ratio.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+	type $$Props = AspectRatioPrimitive.Props;
+
+	export let ratio: $$Props["ratio"] = 4 / 3;
+</script>
+
+<AspectRatioPrimitive.Root {ratio} {...$$restProps}>
+	<slot />
+</AspectRatioPrimitive.Root>

src/lib/components/ui/aspect-ratio/index.ts

@@ -0,0 +1,3 @@
+import Root from "./aspect-ratio.svelte";
+
+export { Root, Root as AspectRatio };

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AvatarPrimitive.FallbackProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+	class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Fallback>

src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AvatarPrimitive.ImageProps;
+
+	let className: $$Props["class"] = undefined;
+	export let src: $$Props["src"] = undefined;
+	export let alt: $$Props["alt"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AvatarPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let delayMs: $$Props["delayMs"] = undefined;
+	export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+	{delayMs}
+	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...$$restProps}
+>
+	<slot />
+</AvatarPrimitive.Root>

src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/badge/index.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+			secondary:
+				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive:
+				"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];

src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	{...$$restProps}
+>
+	<Ellipsis class="h-4 w-4" />
+	<span class="sr-only">More</span>
+</span>

src/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+	<slot />
+</li>

src/lib/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLAnchorElement;
+		asChild?: boolean;
+	};
+
+	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),
+		href,
+		...$$restProps,
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<a bind:this={el} {...attrs} {href}>
+		<slot {attrs} />
+	</a>
+{/if}

src/lib/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLOlAttributes & {
+		el?: HTMLOListElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ol
+	bind:this={el}
+	class={cn(
+		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</ol>

src/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	export let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("font-normal text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>

src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	bind:this={el}
+	{...$$restProps}
+>
+	<slot>
+		<ChevronRight />
+	</slot>
+</li>

src/lib/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	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 };
+</script>
+
+<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
+	<slot />
+</nav>

src/lib/components/ui/breadcrumb/index.ts

@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};

src/lib/components/ui/button/button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/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 };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>

src/lib/components/ui/button/index.ts

@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap 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;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};

src/lib/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>

src/lib/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.DayProps;
+	type $$Events = CalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-9 w-9 p-0 font-normal ",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>

src/lib/components/ui/calendar/calendar-grid-body.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>

src/lib/components/ui/calendar/calendar-grid-head.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridHeadProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>

src/lib/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>

src/lib/components/ui/calendar/calendar-grid.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>

src/lib/components/ui/calendar/calendar-head-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>

src/lib/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>

src/lib/components/ui/calendar/calendar-heading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadingProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>

src/lib/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.NextButtonProps;
+	type $$Events = CalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>

src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.PrevButtonProps;
+	type $$Events = CalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>

src/lib/components/ui/calendar/calendar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.Props;
+
+	type $$Events = CalendarPrimitive.Events;
+
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+	<Calendar.Months>
+		{#each months as month}
+			<Calendar.Grid>
+				<Calendar.GridHead>
+					<Calendar.GridRow class="flex">
+						{#each weekdays as weekday}
+							<Calendar.HeadCell>
+								{weekday.slice(0, 2)}
+							</Calendar.HeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates}
+						<Calendar.GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Calendar.Cell {date}>
+									<Calendar.Day {date} month={month.value} />
+								</Calendar.Cell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	</Calendar.Months>
+</CalendarPrimitive.Root>

src/lib/components/ui/calendar/index.ts

@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};

src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/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>

src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/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>

src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/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>

src/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/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>

src/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/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>

src/lib/components/ui/card/card.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/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>

src/lib/components/ui/card/index.ts

@@ -0,0 +1,24 @@
+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";

src/lib/components/ui/carousel/carousel-content.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...$options,
+			axis: $orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: $plugins,
+	}}
+	on:emblaInit={onInit}
+>
+	<div
+		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		data-embla-container=""
+		{...$$restProps}
+	>
+		<slot />
+	</div>
+</div>

src/lib/components/ui/carousel/carousel-item.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	const { orientation } = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		$orientation === "horizontal" ? "pl-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/carousel/carousel-next.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import ArrowRight from "lucide-svelte/icons/arrow-right";
+	import type { VariantProps } from "tailwind-variants";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import {
+		Button,
+		type Props,
+		type buttonVariants,
+	} from "$lib/components/ui/button/index.js";
+
+	type $$Props = Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	const { orientation, canScrollNext, scrollNext, handleKeyDown } =
+		getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute h-8 w-8 touch-manipulation rounded-full",
+		$orientation === "horizontal"
+			? "-right-12 top-1/2 -translate-y-1/2"
+			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!$canScrollNext}
+	on:click={scrollNext}
+	on:keydown={handleKeyDown}
+	{...$$restProps}
+>
+	<ArrowRight class="h-4 w-4" />
+	<span class="sr-only">Next slide</span>
+</Button>

src/lib/components/ui/carousel/carousel-previous.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ArrowLeft from "lucide-svelte/icons/arrow-left";
+	import type { VariantProps } from "tailwind-variants";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import {
+		Button,
+		type Props,
+		type buttonVariants,
+	} from "$lib/components/ui/button/index.js";
+
+	type $$Props = Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+
+	const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
+		getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute h-8 w-8 touch-manipulation rounded-full",
+		$orientation === "horizontal"
+			? "-left-12 top-1/2 -translate-y-1/2"
+			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!$canScrollPrev}
+	on:click={scrollPrev}
+	on:keydown={handleKeyDown}
+	{...$$restProps}
+>
+	<ArrowLeft class="h-4 w-4" />
+	<span class="sr-only">Previous slide</span>
+</Button>

src/lib/components/ui/carousel/carousel.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { writable } from "svelte/store";
+	import { onDestroy } from "svelte";
+	import { type CarouselAPI, type CarouselProps, setEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CarouselProps;
+
+	export let opts = {};
+	export let plugins: NonNullable<$$Props["plugins"]> = [];
+	export let api: $$Props["api"] = undefined;
+	export let orientation: NonNullable<$$Props["orientation"]> = "horizontal";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	const apiStore = writable<CarouselAPI | undefined>(undefined);
+	const orientationStore = writable(orientation);
+	const canScrollPrev = writable(false);
+	const canScrollNext = writable(false);
+	const optionsStore = writable(opts);
+	const pluginStore = writable(plugins);
+	const scrollSnapsStore = writable<number[]>([]);
+	const selectedIndexStore = writable(0);
+
+	$: orientationStore.set(orientation);
+	$: pluginStore.set(plugins);
+	$: optionsStore.set(opts);
+
+	function scrollPrev() {
+		api?.scrollPrev();
+	}
+	function scrollNext() {
+		api?.scrollNext();
+	}
+	function scrollTo(index: number, jump?: boolean) {
+		api?.scrollTo(index, jump);
+	}
+
+	function onSelect(api: CarouselAPI) {
+		if (!api) return;
+		canScrollPrev.set(api.canScrollPrev());
+		canScrollNext.set(api.canScrollNext());
+	}
+
+	$: if (api) {
+		onSelect(api);
+		api.on("select", onSelect);
+		api.on("reInit", onSelect);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	setEmblaContext({
+		api: apiStore,
+		scrollPrev,
+		scrollNext,
+		orientation: orientationStore,
+		canScrollNext,
+		canScrollPrev,
+		handleKeyDown,
+		options: optionsStore,
+		plugins: pluginStore,
+		onInit,
+		scrollSnaps: scrollSnapsStore,
+		selectedIndex: selectedIndexStore,
+		scrollTo,
+	});
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		api = event.detail;
+		apiStore.set(api);
+		scrollSnapsStore.set(api.scrollSnapList());
+	}
+
+	onDestroy(() => {
+		api?.off("select", onSelect);
+	});
+</script>
+
+<div
+	class={cn("relative", className)}
+	on:mouseenter
+	on:mouseleave
+	role="region"
+	aria-roledescription="carousel"
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/carousel/context.ts

@@ -0,0 +1,56 @@
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import { getContext, hasContext, setContext } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Readable, Writable } from "svelte/store";
+
+export type CarouselAPI =
+	NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
+		evt: CustomEvent<infer CarouselAPI>
+	) => void
+		? CarouselAPI
+		: never;
+
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+
+////
+
+export type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugins;
+	api?: CarouselAPI;
+	orientation?: "horizontal" | "vertical";
+} & HTMLAttributes<HTMLDivElement>;
+
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+
+type EmblaContext = {
+	api: Writable<CarouselAPI | undefined>;
+	orientation: Writable<"horizontal" | "vertical">;
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	canScrollNext: Readable<boolean>;
+	canScrollPrev: Readable<boolean>;
+	handleKeyDown: (e: KeyboardEvent) => void;
+	options: Writable<CarouselOptions>;
+	plugins: Writable<CarouselPlugins>;
+	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: Readable<number[]>;
+	selectedIndex: Readable<number>;
+};
+
+export function setEmblaContext(config: EmblaContext): EmblaContext {
+	setContext(EMBLA_CAROUSEL_CONTEXT, config);
+	return config;
+}
+
+export function getEmblaContext(name = "This component") {
+	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+		throw new Error(`${name} must be used within a <Carousel.Root> component`);
+	}
+	return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
+}

src/lib/components/ui/carousel/index.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./carousel.svelte";
+export { default as Content } from "./carousel-content.svelte";
+export { default as Item } from "./carousel-item.svelte";
+export { default as Previous } from "./carousel-previous.svelte";
+export { default as Next } from "./carousel-next.svelte";

src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
+	import { cn } from "$lib/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 };
+</script>
+
+<CheckboxPrimitive.Root
+	class={cn(
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		className
+	)}
+	bind:checked
+	{...$$restProps}
+	on:click
+>
+	<CheckboxPrimitive.Indicator
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isChecked}
+			<Check class="h-3.5 w-3.5" />
+		{:else if isIndeterminate}
+			<Minus class="h-3.5 w-3.5" />
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>

src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+
+	type $$Props = CollapsiblePrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = slide;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>

src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Content from "./collapsible-content.svelte";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};

src/lib/components/ui/command/command-dialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Dialog as DialogPrimitive } from "bits-ui";
+	import type { Command as CommandPrimitive } from "cmdk-sv";
+	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;
+</script>
+
+<Dialog.Root bind:open {...$$restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+		<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}
+			bind:value
+		>
+			<slot />
+		</Command>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/ui/command/command-empty.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.EmptyProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
+	<slot />
+</CommandPrimitive.Empty>

src/lib/components/ui/command/command-group.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+	type $$Props = CommandPrimitive.GroupProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</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}
+>
+	<slot />
+</CommandPrimitive.Group>

src/lib/components/ui/command/command-input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import Search from "lucide-svelte/icons/search";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.InputProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: string = "";
+</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" />
+	<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",
+			className
+		)}
+		{...$$restProps}
+		bind:value
+	/>
+</div>

src/lib/components/ui/command/command-item.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.ItemProps;
+
+	export let asChild = false;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</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",
+		className
+	)}
+	{...$$restProps}
+	let:action
+	let:attrs
+>
+	<slot {action} {attrs} />
+</CommandPrimitive.Item>

src/lib/components/ui/command/command-list.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.ListProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.List
+	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.List>

src/lib/components/ui/command/command-separator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.SeparatorProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} {...$$restProps} />

src/lib/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>

src/lib/components/ui/command/command.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.CommandProps;
+
+	export let value: $$Props["value"] = undefined;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+		className
+	)}
+	bind:value
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Root>

src/lib/components/ui/command/index.ts

@@ -0,0 +1,37 @@
+import { Command as CommandPrimitive } from "cmdk-sv";
+
+import Root from "./command.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading,
+};

src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
+	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<ContextMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</ContextMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</ContextMenuPrimitive.CheckboxItem>

src/lib/components/ui/context-menu/context-menu-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</ContextMenuPrimitive.Content>

src/lib/components/ui/context-menu/context-menu-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = ContextMenuPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Item
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+</ContextMenuPrimitive.Item>

src/lib/components/ui/context-menu/context-menu-label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let inset: $$Props["inset"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+	{...$$restProps}
+>
+	<slot />
+</ContextMenuPrimitive.Label>

src/lib/components/ui/context-menu/context-menu-radio-group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	type $$Props = ContextMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</ContextMenuPrimitive.RadioGroup>

src/lib/components/ui/context-menu/context-menu-radio-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.RadioItemProps;
+	type $$Events = ContextMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: ContextMenuPrimitive.RadioItemProps["value"];
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	class={cn(
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<ContextMenuPrimitive.RadioIndicator>
+			<Circle class="h-2 w-2 fill-current" />
+		</ContextMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</ContextMenuPrimitive.RadioItem>

src/lib/components/ui/context-menu/context-menu-separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-border", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/context-menu/context-menu-shortcut.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>

src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = ContextMenuPrimitive.SubContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		x: -10,
+		y: 0,
+	};
+	export { className as class };
+</script>
+
+<ContextMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</ContextMenuPrimitive.SubContent>