chore: move structure to root

2025-06-28 04:09:13 +00:00 · 2024-02-16 08:48:59 +01:00 · 2024-02-16 08:48:59 +01:00 · eed9c4161f
commit eed9c4161f
parent 3b27d3841b
213 changed files with 1 additions and 38 deletions
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,17 @@
+import PocketBase from 'pocketbase';
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		interface Locals {
+			pocketBase: PocketBase;
+			id: string;
+			email: string;
+		}
+		// interface Error {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,24 @@
+<!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" />
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
+		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
+		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#222222" />
+		<meta name="msapplication-TileColor" content="#222222" />
+		<meta name="theme-color" content="#222222" />
+		%sveltekit.head%
+	</head>
+	<body
+		data-sveltekit-preload-data="hover"
+		class="min-h-screen bg-background font-sans antialiased"
+	>
+		<div style="display: contents" class="relative flex min-h-screen flex-col">
+			%sveltekit.body%
+		</div>
+	</body>
+</html>
--- a/src/app.pcss
+++ b/src/app.pcss
@ -0,0 +1,58 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 0 72.2% 50.6%;
+		--primary-foreground: 0 85.7% 97.3%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 72.2% 50.6%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 72.2% 50.6%;
+		--primary-foreground: 0 85.7% 97.3%;
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+		--ring: 0 72.2% 50.6%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@ -0,0 +1,36 @@
+import { type Handle } from '@sveltejs/kit';
+import PocketBase from 'pocketbase';
+import { building, dev } from '$app/environment';
+import { SERVER_PB } from '$env/static/private';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	event.locals.id = '';
+	event.locals.email = '';
+	event.locals.pocketBase = new PocketBase(SERVER_PB);
+
+	const isAuth: boolean = event.url.pathname === '/auth';
+	if (isAuth || building) {
+		event.cookies.set('pb_auth', '', { path: '/' });
+		return await resolve(event);
+	}
+
+	const pb_auth = event.request.headers.get('cookie') ?? '';
+	event.locals.pocketBase.authStore.loadFromCookie(pb_auth);
+	try {
+		const auth = await event.locals.pocketBase
+			.collection('users')
+			.authRefresh<{ id: string; email: string }>();
+		event.locals.id = auth.record.id;
+		event.locals.email = auth.record.email;
+	} catch (_) {
+		event.locals.pocketBase.authStore.clear();
+	}
+
+	const response = await resolve(event);
+	const cookie = event.locals.pocketBase.authStore.exportToCookie({
+		secure: !dev,
+		sameSite: 'lax'
+	});
+	response.headers.append('set-cookie', cookie);
+	return response;
+};
--- a/src/lib/components/site/data-indicator.svelte
+++ b/src/lib/components/site/data-indicator.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import * as Popover from '$lib/components/ui/popover';
+	import { Button } from '$lib/components/ui/button';
+	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
+
+	export let data: object;
+</script>
+
+<Popover.Root>
+	<Popover.Trigger asChild let:builder>
+		<Button builders={[builder]} variant="ghost" size="icon" class="block">
+			{'{}'}
+		</Button>
+	</Popover.Trigger>
+	<Popover.Content class="w-auto">
+		<SuperDebug label="$layout data" status={false} {data} />
+	</Popover.Content>
+</Popover.Root>
--- a/src/lib/components/site/icons/apple.svelte
+++ b/src/lib/components/site/icons/apple.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 384 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/bitbucket.svelte
+++ b/src/lib/components/site/icons/bitbucket.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 512 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M22.2 32A16 16 0 0 0 6 47.8a26.35 26.35 0 0 0 .2 2.8l67.9 412.1a21.77 21.77 0 0 0 21.3 18.2h325.7a16 16 0 0 0 16-13.4L505 50.7a16 16 0 0 0-13.2-18.3 24.58 24.58 0 0 0-2.8-.2L22.2 32zm285.9 297.8h-104l-28.1-147h157.3l-25.2 147z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/discord.svelte
+++ b/src/lib/components/site/icons/discord.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 640 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/facebook.svelte
+++ b/src/lib/components/site/icons/facebook.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 448 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/github.svelte
+++ b/src/lib/components/site/icons/github.svelte
@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" {...$$restProps}>
+	<path d="M0 0h24v24H0z" />
+	<path d="M3 19h18l-9 -15z" />
+</svg>
--- a/src/lib/components/site/icons/gitlab.svelte
+++ b/src/lib/components/site/icons/gitlab.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 512 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/google.svelte
+++ b/src/lib/components/site/icons/google.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 488 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/index.ts
+++ b/src/lib/components/site/icons/index.ts
@ -0,0 +1,35 @@
+import type { Icon as LucideIcon } from 'lucide-svelte';
+import { ArrowRight, Loader2 } from 'lucide-svelte';
+import { GithubLogo, VercelLogo, LinkedinLogo } from 'radix-icons-svelte';
+import Logo from './logo.svelte';
+import Svelte from './svelte.svelte';
+import MicrosoftLogo from './microsoft.svelte';
+import AppleLogo from './apple.svelte';
+import GitLabLogo from './gitlab.svelte';
+import BitBucketLogo from './bitbucket.svelte';
+import DiscordLogo from './discord.svelte';
+import FacebookLogo from './facebook.svelte';
+import GoogleLogo from './google.svelte';
+import InstagramLogo from './instagram.svelte';
+import TwitterLogo from './twitter.svelte';
+
+export type Icon = LucideIcon;
+
+export const Icons = {
+	logo: Logo,
+	gitHub: GithubLogo,
+	microsoft: MicrosoftLogo,
+	svelte: Svelte,
+	vercel: VercelLogo,
+	linkedIn: LinkedinLogo,
+	spinner: Loader2,
+	arrowRight: ArrowRight,
+	apple: AppleLogo,
+	bitBucket: BitBucketLogo,
+	gitLab: GitLabLogo,
+	discord: DiscordLogo,
+	facebook: FacebookLogo,
+	google: GoogleLogo,
+	instagram: InstagramLogo,
+	twitter: TwitterLogo
+};
--- a/src/lib/components/site/icons/instagram.svelte
+++ b/src/lib/components/site/icons/instagram.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 448 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/logo.svelte
+++ b/src/lib/components/site/icons/logo.svelte
@ -0,0 +1,24 @@
+<script>
+	export let colours = {
+		topLeft: '#FF6C22',
+		topRight: '#FF9209',
+		bottomLeft: '#FFD099',
+		bottomRight: '#3B48D3'
+	};
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<rect width="7" height="9" x="3" y="3" rx="1" stroke={colours.topLeft} />
+	<rect width="7" height="5" x="14" y="3" rx="1" stroke={colours.topRight} />
+	<rect width="7" height="5" x="3" y="16" rx="1" stroke={colours.bottomLeft} />
+	<rect width="7" height="9" x="14" y="12" rx="1" stroke={colours.bottomRight} />
+</svg>
--- a/src/lib/components/site/icons/microsoft.svelte
+++ b/src/lib/components/site/icons/microsoft.svelte
@ -0,0 +1,12 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	version="1.2"
+	baseProfile="tiny"
+	viewBox="0 0 24 24"
+	{...$$restProps}
+	><path
+		d="M10 12.5c0-.3-.2-.5-.5-.5h-6c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.6l6 .7c.3 0 .5-.2.5-.4v-5.9zM11.5 12c-.3 0-.5.2-.5.5v5.9c0 .3.2.5.5.6l9 1c.3 0 .5-.2.5-.4v-7c0-.3-.2-.5-.5-.5l-9-.1zM10 4.7c0-.3-.2-.5-.5-.4l-6 .7c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5v-5.8zM11.5 4.1c-.3 0-.5.3-.5.6v5.9c0 .3.2.5.5.5h9c.3 0 .5-.2.5-.5v-7c0-.3-.2-.5-.5-.4l-9 .9z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/svelte.svelte
+++ b/src/lib/components/site/icons/svelte.svelte
@ -0,0 +1,15 @@
+<svg
+	class="inline-svg"
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	role="img"
+	viewBox="0 0 24 24"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"
+	/></svg
+>
--- a/src/lib/components/site/icons/twitter.svelte
+++ b/src/lib/components/site/icons/twitter.svelte
@ -0,0 +1,13 @@
+<svg
+	stroke="currentColor"
+	fill="currentColor"
+	stroke-width="0"
+	viewBox="0 0 512 512"
+	height="1em"
+	width="1em"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	><path
+		d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+	></path></svg
+>
--- a/src/lib/components/site/icons/vercel.svelte
+++ b/src/lib/components/site/icons/vercel.svelte
@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" {...$$restProps}>
+	<path stroke="none" d="M0 0h24v24H0z" />
+	<path d="M3 19h18l-9 -15z" />
+</svg>
--- a/src/lib/components/site/index.ts
+++ b/src/lib/components/site/index.ts
@ -0,0 +1,9 @@
+export { default as Metadata } from './metadata.svelte';
+export { default as SiteFooter } from './site-footer.svelte';
+export { default as SiteNavBar } from './site-navbar.svelte';
+export { default as TailwindIndicator } from './tailwind-indicator.svelte';
+export { default as ModeToggle } from './mode-toggle.svelte';
+export { default as Particles } from './particles.svelte';
+
+export * from './icons';
+export * from './nav';
--- a/src/lib/components/site/metadata.svelte
+++ b/src/lib/components/site/metadata.svelte
@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { siteConfig } from '$lib/config/site';
+
+	export let title: string = siteConfig.name;
+
+	$: title = $page.data?.name ? `${$page.data.name} — ${siteConfig.name}` : siteConfig.name;
+	$: description = $page.data?.subTitle ?? siteConfig.description;
+	$: ogImage = encodeURI(
+		`${siteConfig.ogImage}?title=${$page.data.title}&subTitle=${$page.data.subTitle}`
+	);
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<meta name="keywords" content={siteConfig.keywords} />
+	<meta name="author" content="Bart van der Braak" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:site" content={siteConfig.url} />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+	<meta name="twitter:image" content={ogImage} />
+	<meta name="twitter:image:alt" content={siteConfig.name} />
+	<meta name="twitter:creator" content="Bart van der Braak" />
+	<meta property="og:title" content={title} />
+	<meta property="og:type" content="article" />
+	<meta property="og:url" content={siteConfig.url + $page.url.pathname} />
+	<meta property="og:image" content={ogImage} />
+	<meta property="og:image:alt" content={siteConfig.name} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta property="og:description" content={description} />
+	<meta property="og:site_name" content={siteConfig.name} />
+	<meta property="og:locale" content="EN_US" />
+</svelte:head>
--- a/src/lib/components/site/mode-toggle.svelte
+++ b/src/lib/components/site/mode-toggle.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Moon, Sun } from 'lucide-svelte';
+	import { Button } from '../ui/button';
+	import * as DropdownMenu from '../ui/dropdown-menu';
+	import { resetMode, setMode } from 'mode-watcher';
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger asChild let:builder>
+		<Button builders={[builder]} variant="ghost" class="h-9 w-9">
+			<Sun
+				class="absolute h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+			/>
+			<Moon
+				class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+			/>
+			<span class="sr-only">Toggle theme</span>
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Item on:click={() => setMode('light')}>Light</DropdownMenu.Item>
+		<DropdownMenu.Item on:click={() => setMode('dark')}>Dark</DropdownMenu.Item>
+		<DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
--- a/src/lib/components/site/nav/index.ts
+++ b/src/lib/components/site/nav/index.ts
@ -0,0 +1,2 @@
+export { default as MainNav } from './main-nav.svelte';
+export { default as MobileNav } from './mobile-nav.svelte';
--- a/src/lib/components/site/nav/main-nav.svelte
+++ b/src/lib/components/site/nav/main-nav.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { cn } from '$lib/utils';
+	import { navConfig } from '$lib/config/nav';
+
+	export let authenticated = false;
+</script>
+
+<div class="mr-4 hidden md:flex">
+	<nav class="flex items-center space-x-6 text-sm font-medium">
+		{#each navConfig.mainNav as navItem, index (navItem + index.toString())}
+			{#if navItem.href && (navItem.auth == authenticated || navItem.always)}
+				<a
+					href={navItem.href}
+					class={cn(
+						'transition-colors hover:text-foreground/80',
+						$page.url.pathname === navItem.href ? 'text-foreground' : 'text-foreground/60'
+					)}
+				>
+					{navItem.title}
+				</a>
+			{/if}
+		{/each}
+	</nav>
+</div>
--- a/src/lib/components/site/nav/mobile-link.svelte
+++ b/src/lib/components/site/nav/mobile-link.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { cn } from '$lib/utils';
+
+	export let href: string;
+	export let open: boolean;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<a
+	{href}
+	on:click={() => (open = false)}
+	class={cn(
+		$page.url.pathname === href ? 'text-foreground' : 'text-foreground/60',
+		'hover:text-foreground',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</a>
--- a/src/lib/components/site/nav/mobile-nav.svelte
+++ b/src/lib/components/site/nav/mobile-nav.svelte
@ -0,0 +1,68 @@
+<script lang="ts">
+	import * as Sheet from '$lib/components/ui/sheet/';
+	import { HamburgerMenu } from 'radix-icons-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { navConfig } from '$lib/config/nav';
+	import { siteConfig } from '$lib/config/site';
+	import { Icons } from '../icons';
+	import MobileLink from './mobile-link.svelte';
+
+	let open = false;
+	export let authenticated = false;
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Trigger asChild let:builder>
+		<Button
+			builders={[builder]}
+			variant="ghost"
+			class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+		>
+			<HamburgerMenu class="h-5 w-5" />
+			<span class="sr-only">Toggle Menu</span>
+		</Button>
+	</Sheet.Trigger>
+	<Sheet.Content side="right" class="pr-0">
+		<MobileLink href="/" class="flex items-center" bind:open>
+			<span class="sr-only">Logo icon (return home)</span>
+			<div class="mr-4 rounded-sm bg-gray-950 p-0.5 dark:bg-transparent">
+				<Icons.logo />
+			</div>
+			<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
+		</MobileLink>
+		<div class="my-4 h-[calc(100vh-8rem)] overflow-auto pl-1 pt-10">
+			<div class="flex flex-col space-y-3">
+				{#each navConfig.mainNav as navItem, index (navItem + index.toString())}
+					{#if navItem.href && (navItem.auth == authenticated || navItem.always)}
+						<MobileLink href={navItem.href} bind:open class="pt-2 text-5xl font-bold">
+							{navItem.title}
+						</MobileLink>
+					{/if}
+				{/each}
+			</div>
+			<div class="flex flex-col space-y-2">
+				{#each navConfig.sidebarNav as navItem, index (index)}
+					<div class="flex flex-col space-y-3 pt-6">
+						<h4 class="font-medium">{navItem.title}</h4>
+						{#if navItem?.items?.length}
+							{#each navItem.items as item}
+								{#if !item.disabled && item.href}
+									<MobileLink href={item.href} bind:open class="text-muted-foreground">
+										{item.title}
+										{#if item.label}
+											<span
+												class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000]"
+											>
+												{item.label}
+											</span>
+										{/if}
+									</MobileLink>
+								{/if}
+							{/each}
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</Sheet.Content>
+</Sheet.Root>
--- a/src/lib/components/site/nav/user-nav.svelte
+++ b/src/lib/components/site/nav/user-nav.svelte
@ -0,0 +1,49 @@
+<script lang="ts">
+	import * as Avatar from '$lib/components/ui/avatar';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import type { BaseAuthStore } from 'pocketbase';
+
+	export let authenticated = false;
+	export let user: BaseAuthStore['model'];
+</script>
+
+{#if authenticated}
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger asChild let:builder>
+			<Button variant="ghost" builders={[builder]} class="relative h-8 w-8 rounded-full">
+				<Avatar.Root class="h-9 w-9">
+					<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
+					<Avatar.Fallback>{user?.initials}</Avatar.Fallback>
+				</Avatar.Root>
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content class="w-56" align="end">
+			<DropdownMenu.Label class="font-normal">
+				<div class="flex flex-col space-y-1">
+					<p class="text-sm font-medium leading-none">{user?.name || user?.username}</p>
+					<p class="text-xs leading-none text-muted-foreground">{user?.email}</p>
+				</div>
+			</DropdownMenu.Label>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Item>Dashboards</DropdownMenu.Item>
+			<DropdownMenu.Item>Connectors</DropdownMenu.Item>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Label class="text-xs leading-none text-muted-foreground">
+				Settings
+			</DropdownMenu.Label>
+			<DropdownMenu.Group>
+				<DropdownMenu.Item href="/settings">Profile</DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings/appearance">Appearance</DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings/notifications">Notifications</DropdownMenu.Item>
+			</DropdownMenu.Group>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Item href="/logout">
+				Log out
+				<DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+{:else}
+	<Button href="/auth">Login</Button>
+{/if}
--- a/src/lib/components/site/particles.svelte
+++ b/src/lib/components/site/particles.svelte
@ -0,0 +1,248 @@
+<script>
+	import { mode } from 'mode-watcher';
+	import { onMount, beforeUpdate, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const mousePositionStore = writable({ x: 0, y: 0 });
+
+	let x = 0;
+	let y = 0;
+
+	const handleMouseMove = (/** @type {{ clientX: number; clientY: number; }} */ event) => {
+		x = event.clientX;
+		y = event.clientY;
+		mousePositionStore.set({ x, y });
+	};
+
+	export let className = 'h-full';
+	export let quantity = 30;
+	export let staticity = 50;
+	export let ease = 50;
+	export let vx = 0;
+	export let vy = 0;
+
+	let color = '#ffffff';
+	let rgb = hexToRgb(color);
+
+	/**
+	 * @type {HTMLCanvasElement}
+	 */
+	let canvasRef;
+	/**
+	 * @type {HTMLDivElement}
+	 */
+	let canvasContainerRef;
+	/**
+	 * @type {CanvasRenderingContext2D | null}
+	 */
+	let context;
+	/**
+	 * @type {any[]}
+	 */
+	let circles = [];
+	let mousePosition = mousePositionStore;
+	let mouse = { x: 0, y: 0 };
+	let canvasSize = { w: 0, h: 0 };
+	let dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+
+	/**
+	 * @param {string} hex
+	 */
+	function hexToRgb(hex) {
+		hex = hex.replace('#', '');
+		const hexInt = parseInt(hex, 16);
+		const red = (hexInt >> 16) & 255;
+		const green = (hexInt >> 8) & 255;
+		const blue = hexInt & 255;
+		return [red, green, blue];
+	}
+
+	mode.subscribe((value) => {
+		color = value === 'dark' ? '#ffffff' : '#000000';
+		rgb = hexToRgb(color);
+	});
+
+	/**
+	 * @param {{ x: any; y: any; translateX: any; translateY: any; size: any; alpha: any; targetAlpha?: number; dx?: number; dy?: number; magnetism?: number; }} circle
+	 */
+	function drawCircle(circle, update = false) {
+		if (context) {
+			const { x, y, translateX, translateY, size, alpha } = circle;
+			context.translate(translateX, translateY);
+			context.beginPath();
+			context.arc(x, y, size, 0, 2 * Math.PI);
+			context.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`;
+			context.fill();
+			context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+			if (!update) {
+				circles.push(circle);
+			}
+		}
+	}
+
+	function initCanvas() {
+		resizeCanvas();
+		drawParticles();
+	}
+
+	function onMouseMove() {
+		if (canvasRef) {
+			const rect = canvasRef.getBoundingClientRect();
+			const { w, h } = canvasSize;
+			const x = $mousePosition.x - rect.left - w / 2;
+			const y = $mousePosition.y - rect.top - h / 2;
+			const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+			if (inside) {
+				mouse.x = x;
+				mouse.y = y;
+			}
+		}
+	}
+
+	function resizeCanvas() {
+		if (canvasContainerRef && canvasRef && context) {
+			circles = [];
+			canvasSize.w = canvasContainerRef.offsetWidth;
+			canvasSize.h = canvasContainerRef.offsetHeight;
+			canvasRef.width = canvasSize.w * dpr;
+			canvasRef.height = canvasSize.h * dpr;
+			canvasRef.style.width = `${canvasSize.w}px`;
+			canvasRef.style.height = `${canvasSize.h}px`;
+			context.scale(dpr, dpr);
+		}
+	}
+
+	function circleParams() {
+		const x = Math.floor(Math.random() * canvasSize.w);
+		const y = Math.floor(Math.random() * canvasSize.h);
+		const translateX = 0;
+		const translateY = 0;
+		const size = Math.floor(Math.random() * 2) + 1;
+		const alpha = 0;
+		const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+		const dx = (Math.random() - 0.5) * 0.2;
+		const dy = (Math.random() - 0.5) * 0.2;
+		const magnetism = 0.1 + Math.random() * 4;
+		return {
+			x,
+			y,
+			translateX,
+			translateY,
+			size,
+			alpha,
+			targetAlpha,
+			dx,
+			dy,
+			magnetism
+		};
+	}
+
+	function clearContext() {
+		if (context) {
+			context.clearRect(0, 0, canvasSize.w, canvasSize.h);
+		}
+	}
+
+	function drawParticles() {
+		clearContext();
+		const particleCount = quantity;
+		for (let i = 0; i < particleCount; i++) {
+			const circle = circleParams();
+			drawCircle(circle);
+		}
+	}
+
+	/**
+	 * @param {number} value
+	 * @param {number} start1
+	 * @param {number} end1
+	 * @param {number} start2
+	 * @param {number} end2
+	 */
+	function remapValue(value, start1, end1, start2, end2) {
+		const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+		return remapped > 0 ? remapped : 0;
+	}
+
+	function animate() {
+		clearContext();
+		circles.forEach((circle, i) => {
+			const edge = [
+				circle.x + circle.translateX - circle.size,
+				canvasSize.w - circle.x - circle.translateX - circle.size,
+				circle.y + circle.translateY - circle.size,
+				canvasSize.h - circle.y - circle.translateY - circle.size
+			];
+			const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+			const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2));
+			if (remapClosestEdge > 1) {
+				circle.alpha += 0.02;
+				if (circle.alpha > circle.targetAlpha) {
+					circle.alpha = circle.targetAlpha;
+				}
+			} else {
+				circle.alpha = circle.targetAlpha * remapClosestEdge;
+			}
+			circle.x += circle.dx + vx;
+			circle.y += circle.dy + vy;
+			circle.translateX += (mouse.x / (staticity / circle.magnetism) - circle.translateX) / ease;
+			circle.translateY += (mouse.y / (staticity / circle.magnetism) - circle.translateY) / ease;
+			if (
+				circle.x < -circle.size ||
+				circle.x > canvasSize.w + circle.size ||
+				circle.y < -circle.size ||
+				circle.y > canvasSize.h + circle.size
+			) {
+				circles.splice(i, 1);
+				const newCircle = circleParams();
+				drawCircle(newCircle);
+			} else {
+				drawCircle(
+					{
+						...circle,
+						x: circle.x,
+						y: circle.y,
+						translateX: circle.translateX,
+						translateY: circle.translateY,
+						alpha: circle.alpha
+					},
+					true
+				);
+			}
+		});
+		setTimeout(() => {
+			requestAnimationFrame(animate);
+		}, 1000 / 60); // Limit the frame rate to 60 FPS
+	}
+
+	onMount(() => {
+		window.addEventListener('mousemove', handleMouseMove);
+
+		if (canvasRef) {
+			context = canvasRef?.getContext('2d');
+		}
+		initCanvas();
+		animate();
+		window.addEventListener('resize', initCanvas);
+
+		return () => {
+			window.removeEventListener('resize', initCanvas);
+			window.removeEventListener('mousemove', handleMouseMove);
+		};
+	});
+
+	beforeUpdate(() => {
+		onMouseMove();
+	});
+
+	onDestroy(() => {
+		if (canvasRef) {
+			window.removeEventListener('resize', initCanvas);
+		}
+	});
+</script>
+
+<div class={className} bind:this={canvasContainerRef} aria-hidden="true">
+	<canvas bind:this={canvasRef}></canvas>
+</div>
--- a/src/lib/components/site/site-footer.svelte
+++ b/src/lib/components/site/site-footer.svelte
@ -0,0 +1,12 @@
+<script lang="ts">
+	import { siteConfig } from '$lib/config/site';
+</script>
+
+<footer class="container py-6">
+	<div class="space-y-1">
+		<p class="text-center text-sm text-muted-foreground">
+			&copy; {new Date().getFullYear()} &mdash; {siteConfig.name} by {siteConfig.author}. Licensed
+			under GPL-3.0.
+		</p>
+	</div>
+</footer>
--- a/src/lib/components/site/site-navbar.svelte
+++ b/src/lib/components/site/site-navbar.svelte
@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
+	import { siteConfig } from '$lib/config/site';
+	import UserNav from './nav/user-nav.svelte';
+
+	export let authenticated = false;
+	export let user: object | null = null;
+</script>
+
+<header
+	class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div class="container flex h-14 items-center">
+		<a href="/" class="mr-6 flex items-center space-x-2">
+			<span class="sr-only">Logo (return home)</span>
+			<div class="rounded-sm bg-gray-950 p-0.5 dark:bg-transparent">
+				<Icons.logo />
+			</div>
+			<span class="text-xl font-bold tracking-tight">{siteConfig.name}</span>
+		</a>
+		<MainNav {authenticated} />
+		<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
+			<ModeToggle />
+			<UserNav {authenticated} {user} />
+			<MobileNav {authenticated} />
+		</div>
+	</div>
+</header>
--- a/src/lib/components/site/tailwind-indicator.svelte
+++ b/src/lib/components/site/tailwind-indicator.svelte
@ -0,0 +1,14 @@
+<script>
+	import { Button } from '$lib/components/ui/button';
+</script>
+
+<Button variant="ghost" size="icon" class="block sm:hidden">xs</Button>
+<Button variant="ghost" size="icon" class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden"
+	>sm</Button
+>
+<Button variant="ghost" size="icon" class="hidden md:block lg:hidden xl:hidden 2xl:hidden"
+	>md</Button
+>
+<Button variant="ghost" size="icon" class="hidden lg:block xl:hidden 2xl:hidden">lg</Button>
+<Button variant="ghost" size="icon" class="hidden xl:block 2xl:hidden">xl</Button>
+<Button variant="ghost" size="icon" class="hidden 2xl:block">2xl</Button>
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.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('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from '.';
+
+	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>
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { alertVariants, type Variant } from '.';
+
+	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>
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@ -0,0 +1,32 @@
+import { tv, type VariantProps } 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 px-4 py-3 text-sm [&>svg~*]:pl-7 [&>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 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
+};
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/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';
+
+	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}
+/>
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/avatar/index.ts
+++ b/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
+};
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { badgeVariants, type Variant } from '.';
+
+	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>
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@ -0,0 +1,20 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export { default as Badge } from './badge.svelte';
+export const badgeVariants = tv({
+	base: 'inline-flex items-center rounded-md 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 select-none',
+	variants: {
+		variant: {
+			default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+			secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+			destructive:
+				'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+			outline: 'text-foreground'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof badgeVariants>['variant'];
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { buttonVariants, type Props, type Events } from '.';
+
+	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>
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@ -0,0 +1,49 @@
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import { tv, type VariantProps } from 'tailwind-variants';
+import Root from './button.svelte';
+
+const buttonVariants = tv({
+	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+	variants: {
+		variant: {
+			default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+			destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+			outline:
+				'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+			secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
+			link: 'text-primary underline-offset-4 hover:underline'
+		},
+		size: {
+			default: 'h-9 px-4 py-2',
+			sm: 'h-8 rounded-md px-3 text-xs',
+			lg: 'h-10 rounded-md px-8',
+			icon: 'h-9 w-9'
+		}
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default'
+	}
+});
+
+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
+};
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.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('p-6 pt-0', className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils';
+	import type { HeadingLevel } from '.';
+
+	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('font-semibold leading-none tracking-tight', className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/index.ts
+++ b/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';
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ 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 'radix-icons-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(
+		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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
+	on:click
+	{...$$restProps}
+>
+	<CheckboxPrimitive.Indicator
+		class={cn('flex h-4 w-4 items-center justify-center text-current')}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isIndeterminate}
+			<Minus class="h-3.5 w-3.5" />
+		{:else}
+			<Check class={cn('h-3.5 w-3.5', !isChecked && 'text-transparent')} />
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>
--- a/src/lib/components/ui/checkbox/index.ts
+++ b/src/lib/components/ui/checkbox/index.ts
@ -0,0 +1,6 @@
+import Root from './checkbox.svelte';
+export {
+	Root,
+	//
+	Root as Checkbox
+};
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import Command from './command.svelte';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import type { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
+
+	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">
+		<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>
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/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';
+	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>
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { MagnifyingGlass } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
+
+	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-3" data-cmdk-input-wrapper="">
+	<MagnifyingGlass class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		class={cn(
+			'flex h-10 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>
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/src/lib/components/ui/command/command-item.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	type $$Props = CommandPrimitive.ItemProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Item
+	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}
+>
+	<slot />
+</CommandPrimitive.Item>
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/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';
+
+	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} />
--- a/src/lib/components/ui/command/command-shortcut.svelte
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	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>
+
+<span
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
--- a/src/lib/components/ui/command/command.svelte
+++ b/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';
+
+	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>
--- a/src/lib/components/ui/command/index.ts
+++ b/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
+};
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ 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 { Cross2 } from 'radix-icons-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"
+		>
+			<Cross2 class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ 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>
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ 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>
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ 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>
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ 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}
+/>
--- a/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ 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>
--- a/src/lib/components/ui/dialog/index.ts
+++ 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
+};
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { Check } from 'radix-icons-svelte';
+
+	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
+	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.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">
+		<DropdownMenuPrimitive.CheckboxIndicator>
+			<Check class="h-4 w-4" />
+		</DropdownMenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.CheckboxItem>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+
+	type $$Props = DropdownMenuPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	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 />
+</DropdownMenuPrimitive.Content>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.ItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.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
+	)}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Item>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DropdownMenuPrimitive.LabelProps & {
+		inset?: boolean;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Label
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenuPrimitive.Label>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@ -0,0 +1,11 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
+
+	export let value: $$Props['value'] = undefined;
+</script>
+
+<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
+	<slot />
+</DropdownMenuPrimitive.RadioGroup>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { DotFilled } from 'radix-icons-svelte';
+
+	type $$Props = DropdownMenuPrimitive.RadioItemProps;
+	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let value: DropdownMenuPrimitive.RadioItemProps['value'];
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.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">
+		<DropdownMenuPrimitive.RadioIndicator>
+			<DotFilled class="h-4 w-4 fill-current" />
+		</DropdownMenuPrimitive.RadioIndicator>
+	</span>
+	<slot />
+</DropdownMenuPrimitive.RadioItem>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DropdownMenuPrimitive.SeparatorProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.Separator
+	class={cn('-mx-1 my-1 h-px bg-muted', className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
+	<slot />
+</span>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+
+	type $$Props = DropdownMenuPrimitive.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>
+
+<DropdownMenuPrimitive.SubContent
+	{transition}
+	{transitionConfig}
+	class={cn(
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+	on:focusout
+	on:pointermove
+>
+	<slot />
+</DropdownMenuPrimitive.SubContent>
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@ -0,0 +1,32 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { ChevronRight } from 'radix-icons-svelte';
+
+	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	};
+	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
+	export { className as class };
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	class={cn(
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
+		inset && 'pl-8',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<slot />
+	<ChevronRight class="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@ -0,0 +1,48 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+const Trigger = DropdownMenuPrimitive.Trigger;
+const Group = DropdownMenuPrimitive.Group;
+
+export {
+	Sub,
+	Root,
+	Item,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as DropdownMenu,
+	Sub as DropdownMenuSub,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	Group as DropdownMenuGroup,
+	Content as DropdownMenuContent,
+	Trigger as DropdownMenuTrigger,
+	Shortcut as DropdownMenuShortcut,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	RadioGroup as DropdownMenuRadioGroup,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	CheckboxItem as DropdownMenuCheckboxItem
+};
--- a/src/lib/components/ui/form/form-button.svelte
+++ b/src/lib/components/ui/form/form-button.svelte
@ -0,0 +1,9 @@
+<script lang="ts">
+	import * as Button from '$lib/components/ui/button';
+	type $$Props = Button.Props;
+	type $$Events = Button.Events;
+</script>
+
+<Button.Root type="submit" {...$$restProps} on:click on:keydown>
+	<slot />
+</Button.Root>
--- a/src/lib/components/ui/form/form-checkbox.svelte
+++ 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 '$lib/components/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} />
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/src/lib/components/ui/form/form-description.svelte
@ -0,0 +1,16 @@
+<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-[0.8rem] text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</FormPrimitive.Description>
--- a/src/lib/components/ui/form/form-input.svelte
+++ 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 '$lib/components/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
+/>
--- a/src/lib/components/ui/form/form-item.svelte
+++ 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>
--- a/src/lib/components/ui/form/form-label.svelte
+++ 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 '$lib/components/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>
--- a/src/lib/components/ui/form/form-native-select.svelte
+++ 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 '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
+	import { CaretSort } from 'radix-icons-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>
+	<CaretSort class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+</div>
--- a/src/lib/components/ui/form/form-radio-group.svelte
+++ 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 '$lib/components/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>
--- a/src/lib/components/ui/form/form-select-trigger.svelte
+++ b/src/lib/components/ui/form/form-select-trigger.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import * as Select from '$lib/components/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, value } = getFormField();
+	export let placeholder = '';
+</script>
+
+<Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
+	<slot value={$value}>
+		<Select.Value {placeholder} />
+	</slot>
+</Select.Trigger>
--- a/src/lib/components/ui/form/form-select.svelte
+++ b/src/lib/components/ui/form/form-select.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Select from '$lib/components/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>
--- a/src/lib/components/ui/form/form-switch.svelte
+++ 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 '$lib/components/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} />
--- a/src/lib/components/ui/form/form-textarea.svelte
+++ 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 '$lib/components/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
+/>
--- a/src/lib/components/ui/form/form-validation.svelte
+++ 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-[0.8rem] font-medium text-destructive', className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/form/index.ts
+++ b/src/lib/components/ui/form/index.ts
@ -0,0 +1,82 @@
+import { Form as FormPrimitive, getFormField } from 'formsnap';
+import type { Writable } from 'svelte/store';
+import * as RadioGroupComp from '$lib/components/ui/radio-group';
+import * as SelectComp from '$lib/components/ui/select';
+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
+};
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@ -0,0 +1,27 @@
+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>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: 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
+};
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@ -0,0 +1,35 @@
+<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-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = LabelPrimitive.Props;
+
+	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}
+>
+	<slot />
+</LabelPrimitive.Root>
--- a/src/lib/components/ui/popover/index.ts
+++ 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
+};
--- a/Show more
+++ b/Show more