feat: added particle and reformatting

apps/web/src/app.d.ts

@@ -5,7 +5,6 @@ declare global {
 	namespace App {
 		interface Locals {
 			pocketBase: PocketBase;
-			user: object;
 		}
 		// interface Error {}
 		// interface PageData {}

apps/web/src/app.html

@@ -21,4 +21,4 @@
 			%sveltekit.body%
 		</div>
 	</body>
-</html>
+</html>

apps/web/src/app.pcss

@@ -3,49 +3,49 @@
 @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%;
-  }
+	: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 {

apps/web/src/hooks.server.ts

@@ -1,4 +1,4 @@
-import { redirect, type Handle } from '@sveltejs/kit';
+import { type Handle } from '@sveltejs/kit';
 import PocketBase from 'pocketbase';
 import { pb } from '$lib/pocketbase';
 import { PUBLIC_CLIENT_PB } from '$env/static/public';
@@ -10,18 +10,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	pb.set(event.locals.pocketBase);
 
 	event.locals.pocketBase.authStore.loadFromCookie(event.request.headers.get('cookie') ?? '');
-	// try {
-	// 	//refresh the auth if it is valid
-	// 	if (!event.locals.pocketBase.authStore.isValid)
-	// 		await event.locals.pocketBase
-	// 			.collection('users')
-	// 			.authRefresh<{ id: string; email: string }>();
-	// 	//spread the model to locals.user to be available in all pages
-	// 	event.locals.user = { ...event.locals.pocketBase.authStore.model };
-	// } catch (err) {
-	// 	console.log(err, 'error in hooks');
-	// 	event.locals.pocketBase.authStore.clear();
-	// }
+
 	const response = await resolve(event);
 
 	response.headers.set(

apps/web/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>

apps/web/src/lib/components/site/icons/index.ts

@@ -15,5 +15,5 @@ export const Icons = {
 	vercel: VercelLogo,
 	linkedIn: LinkedinLogo,
 	spinner: Loader2,
-	arrowRight: ArrowRight,
+	arrowRight: ArrowRight
 };

apps/web/src/lib/components/site/icons/logo.svelte

@@ -1,7 +1,15 @@
-<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="#FF6C22" />
-  <rect width="7" height="5" x="14" y="3" rx="1" stroke="#FF9209" />
-  <rect width="7" height="9" x="14" y="12" rx="1" stroke="#2B3499" />
-  <rect width="7" height="5" x="3" y="16" rx="1" stroke="#FFD099" />
+<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="#FF6C22" />
+	<rect width="7" height="5" x="14" y="3" rx="1" stroke="#FF9209" />
+	<rect width="7" height="9" x="14" y="12" rx="1" stroke="#2B3499" />
+	<rect width="7" height="5" x="3" y="16" rx="1" stroke="#FFD099" />
 </svg>

apps/web/src/lib/components/site/index.ts

@@ -2,7 +2,8 @@ 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 ModeToggle } from './mode-toggle.svelte';
+export { default as Particles } from './particles.svelte';
 
 export * from './icons';
 export * from './nav';

apps/web/src/lib/components/site/nav/main-nav.svelte

@@ -13,7 +13,7 @@
 				<a
 					href={navItem.href}
 					class={cn(
-						'hover:text-foreground/80 transition-colors',
+						'transition-colors hover:text-foreground/80',
 						$page.url.pathname === navItem.href ? 'text-foreground' : 'text-foreground/60'
 					)}
 				>

apps/web/src/lib/components/site/nav/user-nav.svelte

@@ -4,9 +4,15 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import type { BaseAuthStore } from 'pocketbase';
 
-	const fullNameToInitials = (fullName: string) => fullName.split(" ").map(word => word[0].toUpperCase()).slice(0, 2).join("");
+	const fullNameToInitials = (fullName: string) =>
+		fullName
+			.split(' ')
+			.map((word) => word[0].toUpperCase())
+			.slice(0, 2)
+			.join('');
+
 	export let authenticated = false;
-	export let user: BaseAuthStore["model"];
+	export let user: BaseAuthStore['model'];
 </script>
 
 {#if authenticated}
@@ -14,7 +20,7 @@
 		<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?.avatar} alt="@shadcn" />
+					<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
 					<Avatar.Fallback>{fullNameToInitials(user?.name)}</Avatar.Fallback>
 				</Avatar.Root>
 			</Button>
@@ -23,7 +29,7 @@
 			<DropdownMenu.Label class="font-normal">
 				<div class="flex flex-col space-y-1">
 					<p class="text-sm font-medium leading-none">{user?.name}</p>
-					<p class="text-muted-foreground text-xs leading-none">{user?.email}</p>
+					<p class="text-xs leading-none text-muted-foreground">{user?.email}</p>
 				</div>
 			</DropdownMenu.Label>
 			<DropdownMenu.Separator />

apps/web/src/lib/components/site/particles.svelte

@@ -0,0 +1,244 @@
+<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;
+
+	export let color = $mode === 'dark' ? '#ffffff' : '#000000';
+
+	/**
+	 * @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];
+	}
+
+	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
+		};
+	}
+
+	const 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 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>

apps/web/src/lib/components/site/site-footer.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import { Blocks, Cloud } from 'lucide-svelte';
 	import { siteConfig } from '$lib/config/site';
-	import { Code } from 'radix-icons-svelte';
 </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.
+			&copy; {new Date().getFullYear()} &mdash; {siteConfig.name} by {siteConfig.author}. Licensed
+			under GPL-3.0.
 		</p>
 	</div>
 </footer>

apps/web/src/lib/components/site/site-navbar.svelte

@@ -4,11 +4,11 @@
 	import UserNav from './nav/user-nav.svelte';
 
 	export let authenticated = false;
-	export let user: null | {} = null;
+	export let user: object | null = null;
 </script>
 
 <header
-	class="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b shadow-sm backdrop-blur"
+	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">
@@ -22,7 +22,7 @@
 				<ModeToggle />
 			</nav>
 			<MobileNav {authenticated} />
-			<UserNav {authenticated} {user}/>
+			<UserNav {authenticated} {user} />
 		</div>
 	</div>
 </header>

apps/web/src/lib/components/site/tailwind-indicator.svelte

@@ -1,14 +1,14 @@
 <script>
-	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import { Button } from '$lib/components/ui/button';
 </script>
 
-<div class="fixed bottom-1 left-1 z-50 flex font-mono uppercase">
-	<Badge variant="outline" class="block sm:hidden">xs</Badge>
-	<Badge variant="outline" class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden"
-		>sm</Badge
-	>
-	<Badge variant="outline" class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</Badge>
-	<Badge variant="outline" class="hidden lg:block xl:hidden 2xl:hidden">lg</Badge>
-	<Badge variant="outline" class="hidden xl:block 2xl:hidden">xl</Badge>
-	<Badge variant="outline" class="hidden 2xl:block">2xl</Badge>
-</div>
+<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>

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from ".";
+	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";
+	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)}
+	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { alertVariants, type Variant } from ".";
+	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";
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
 	export { className as class };
 </script>
 

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

@@ -1,25 +1,25 @@
-import { tv, type VariantProps } from "tailwind-variants";
+import { tv, type VariantProps } from 'tailwind-variants';
 
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
+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",
+	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",
+			default: 'bg-background text-foreground',
 			destructive:
-				"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+				'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive'
 		}
 	},
 	defaultVariants: {
-		variant: "default"
+		variant: 'default'
 	}
 });
 
-export type Variant = VariantProps<typeof alertVariants>["variant"];
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type Variant = VariantProps<typeof alertVariants>['variant'];
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export {
 	Root,

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

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

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	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;
+	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)}
+	class={cn('aspect-square h-full w-full', className)}
 	{...$$restProps}
 />

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	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;
+	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)}
+	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -1,6 +1,6 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
 
 export {
 	Root,

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { badgeVariants, type Variant } from ".";
+	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 let variant: Variant = 'default';
 	export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
 	{...$$restProps}

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

@@ -1,22 +1,20 @@
-import { tv, type VariantProps } from "tailwind-variants";
+import { tv, type VariantProps } from 'tailwind-variants';
 
-export { default as Badge } from "./badge.svelte";
+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",
+	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",
+			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"
+				'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+			outline: 'text-foreground'
 		}
 	},
 	defaultVariants: {
-		variant: "default"
+		variant: 'default'
 	}
 });
 
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export type Variant = VariantProps<typeof badgeVariants>['variant'];

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

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { Check, Minus } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
+	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;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = false;
 	export { className as class };
 </script>
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		'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
@@ -21,14 +21,14 @@
 	{...$$restProps}
 >
 	<CheckboxPrimitive.Indicator
-		class={cn("flex items-center justify-center text-current h-4 w-4")}
+		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")} />
+			<Check class={cn('h-3.5 w-3.5', !isChecked && 'text-transparent')} />
 		{/if}
 	</CheckboxPrimitive.Indicator>
 </CheckboxPrimitive.Root>

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

@@ -1,4 +1,4 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export {
 	Root,
 	//

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

@@ -1,13 +1,13 @@
 <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";
+	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;
+	export let open: $$Props['open'] = false;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <Dialog.Root bind:open {...$$restProps}>

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	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}>
+<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
 	<slot />
 </CommandPrimitive.Empty>

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { MagnifyingGlass } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
+	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 = "";
+	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",
+			'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}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.ItemProps;
 
@@ -10,7 +10,7 @@
 
 <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",
+		'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}

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

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

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	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} />
+<CommandPrimitive.Separator class={cn('-mx-1 h-px bg-border', className)} {...$$restProps} />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
@@ -9,7 +9,7 @@
 </script>
 
 <span
-	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

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

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

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

@@ -1,14 +1,14 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
+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";
+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;
 

apps/web/src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,14 +1,14 @@
 <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";
+	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"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 200
 	};
 	export { className as class };
@@ -20,7 +20,7 @@
 		{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",
+			'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}

apps/web/src/lib/components/ui/dialog/dialog-description.svelte

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

apps/web/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	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)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />

apps/web/src/lib/components/ui/dialog/dialog-header.svelte

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

apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { fade } from "svelte/transition";
+	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"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 150
 	};
 	export { className as class };
@@ -16,6 +16,6 @@
 <DialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
 	{...$$restProps}
 />

apps/web/src/lib/components/ui/dialog/dialog-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 
 	type $$Props = DialogPrimitive.PortalProps;
 </script>

apps/web/src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = DialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DialogPrimitive.Title
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

apps/web/src/lib/components/ui/dialog/index.ts

@@ -1,15 +1,15 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+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";
+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,

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { Check } from "radix-icons-svelte";
+	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;
+	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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'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}

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
+	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;
+	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>
 
@@ -16,7 +16,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	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;
+	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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		'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

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	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;
+	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)}
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
 	{...$$restProps}
 >
 	<slot />

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

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

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { DotFilled } from "radix-icons-svelte";
+	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"];
+	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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'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}

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

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

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

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

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
+	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"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		x: -10,
 		y: 0
 	};
@@ -17,7 +17,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { ChevronRight } from "radix-icons-svelte";
+	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;
+	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",
+		'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}

apps/web/src/lib/components/ui/dropdown-menu/index.ts

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

apps/web/src/lib/components/ui/form/form-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button";
+	import * as Button from '$lib/components/ui/button';
 	type $$Props = Button.Props;
 	type $$Events = Button.Events;
 </script>

apps/web/src/lib/components/ui/form/form-checkbox.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { Checkbox } from "$lib/components/ui/checkbox";
+	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;
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
 
 	const { name, setValue, attrStore, value } = getFormField();
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -14,7 +14,7 @@
 
 <Checkbox
 	{...rest}
-	checked={typeof $value === "boolean" ? $value : false}
+	checked={typeof $value === 'boolean' ? $value : false}
 	onCheckedChange={(v) => {
 		onCheckedChange?.(v);
 		setValue(v);

apps/web/src/lib/components/ui/form/form-description.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from "formsnap";
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	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;
@@ -9,7 +9,7 @@
 </script>
 
 <FormPrimitive.Description
-	class={cn("text-[0.8rem] text-muted-foreground", className)}
+	class={cn('text-[0.8rem] text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

apps/web/src/lib/components/ui/form/form-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import { Input, type InputEvents } from "$lib/components/ui/input";
+	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;

apps/web/src/lib/components/ui/form/form-item.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	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}>
+<div class={cn('space-y-2', className)} {...$$restProps}>
 	<slot />
 </div>

apps/web/src/lib/components/ui/form/form-label.svelte

@@ -1,17 +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";
+	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;
+	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}>
+<Label for={$ids.input} class={cn($errors && 'text-destructive', className)} {...$$restProps}>
 	<slot />
 </Label>

apps/web/src/lib/components/ui/form/form-native-select.svelte

@@ -1,9 +1,9 @@
 <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";
+	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;
 
@@ -14,8 +14,8 @@
 <div class="relative">
 	<FormPrimitive.Select
 		class={cn(
-			buttonVariants({ variant: "outline" }),
-			"appearance-none bg-transparent font-normal",
+			buttonVariants({ variant: 'outline' }),
+			'appearance-none bg-transparent font-normal',
 			className
 		)}
 		{...$$restProps}

apps/web/src/lib/components/ui/form/form-radio-group.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import * as RadioGroup from "$lib/components/ui/radio-group";
+	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;
+	export let onValueChange: $$Props['onValueChange'] = undefined;
 </script>
 
 <RadioGroup.Root

apps/web/src/lib/components/ui/form/form-select-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import * as Select from "$lib/components/ui/select";
-	import type { Select as SelectPrimitive } from "bits-ui";
-	import { getFormField } from "formsnap";
+	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 = "";
+	export let placeholder = '';
 </script>
 
 <Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>

apps/web/src/lib/components/ui/form/form-select.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import * as Select from "$lib/components/ui/select";
-	import { getFormField } from "formsnap";
-	import type { Select as SelectPrimitive } from "bits-ui";
+	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;
+	export let onSelectedChange: $$Props['onSelectedChange'] = undefined;
 </script>
 
 <Select.Root

apps/web/src/lib/components/ui/form/form-switch.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { Switch as SwitchPrimitive } from "bits-ui";
-	import { Switch } from "$lib/components/ui/switch";
+	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;
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
 
 	const { name, setValue, attrStore, value } = getFormField();
 </script>
 
 <Switch
 	{...$attrStore}
-	checked={typeof $value === "boolean" ? $value : false}
+	checked={typeof $value === 'boolean' ? $value : false}
 	onCheckedChange={(v) => {
 		onCheckedChange?.(v);
 		setValue(v);

apps/web/src/lib/components/ui/form/form-textarea.svelte

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

apps/web/src/lib/components/ui/form/form-validation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from "formsnap";
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	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;
@@ -9,6 +9,6 @@
 </script>
 
 <FormPrimitive.Validation
-	class={cn("text-[0.8rem] font-medium text-destructive", className)}
+	class={cn('text-[0.8rem] font-medium text-destructive', className)}
 	{...$$restProps}
 />

apps/web/src/lib/components/ui/form/index.ts

@@ -1,20 +1,20 @@
-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";
+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;
@@ -27,7 +27,7 @@ const SelectGroup = SelectComp.Group;
 const SelectItem = SelectComp.Item;
 const SelectSeparator = SelectComp.Separator;
 
-export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, "value"> & {
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
 	value: Writable<string>;
 };
 

apps/web/src/lib/components/ui/popover/index.ts

@@ -1,5 +1,5 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
-import Content from "./popover-content.svelte";
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
 const Root = PopoverPrimitive.Root;
 const Trigger = PopoverPrimitive.Trigger;
 

apps/web/src/lib/components/ui/popover/popover-content.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
 
 	type $$Props = PopoverPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 4;
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export let align: $$Props['align'] = 'center';
+	export let sideOffset: $$Props['sideOffset'] = 4;
 	export { className as class };
 </script>
 
@@ -19,7 +19,7 @@
 	{sideOffset}
 	{...$$restProps}
 	class={cn(
-		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 		className
 	)}
 >

apps/web/src/lib/components/ui/radio-group/index.ts

@@ -1,7 +1,7 @@
-import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
 
-import Root from "./radio-group.svelte";
-import Item from "./radio-group-item.svelte";
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
 const Input = RadioGroupPrimitive.Input;
 
 export {

apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { Check } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { Check } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
 
 	type $$Props = RadioGroupPrimitive.ItemProps & {
 		value: string;
 	};
 	type $$Events = RadioGroupPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <RadioGroupPrimitive.Item
 	{value}
 	class={cn(
-		"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/radio-group/radio-group.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = RadioGroupPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
 	export { className as class };
 </script>
 
-<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...$$restProps}>
+<RadioGroupPrimitive.Root bind:value class={cn('grid gap-2', className)} {...$$restProps}>
 	<slot />
 </RadioGroupPrimitive.Root>

apps/web/src/lib/components/ui/select/index.ts

@@ -1,10 +1,10 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import { Select as SelectPrimitive } from 'bits-ui';
 
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
 
 const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;

apps/web/src/lib/components/ui/select/select-content.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
-	import { scale } from "svelte/transition";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+	import { scale } from 'svelte/transition';
 
 	type $$Props = SelectPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let inTransition: $$Props["inTransition"] = flyAndScale;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = scale;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let inTransition: $$Props['inTransition'] = flyAndScale;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
+	export let outTransition: $$Props['outTransition'] = scale;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
 		start: 0.95,
 		opacity: 0,
 		duration: 50
@@ -25,7 +25,7 @@
 	{outTransitionConfig}
 	{sideOffset}
 	class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none",
+		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/select/select-item.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { Check } from "radix-icons-svelte";
+	import { cn } from '$lib/utils';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { Check } from 'radix-icons-svelte';
 
 	type $$Props = SelectPrimitive.ItemProps;
 	type $$Events = Required<SelectPrimitive.ItemEvents>;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export let label: $$Props['label'] = undefined;
+	export let disabled: $$Props['disabled'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/select/select-label.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SelectPrimitive.LabelProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<SelectPrimitive.Label class={cn("px-2 py-1.5 text-sm font-semibold", className)} {...$$restProps}>
+<SelectPrimitive.Label class={cn('px-2 py-1.5 text-sm font-semibold', className)} {...$$restProps}>
 	<slot />
 </SelectPrimitive.Label>

apps/web/src/lib/components/ui/select/select-separator.svelte

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

apps/web/src/lib/components/ui/select/select-trigger.svelte

@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring line-clamp-1 flex h-9 w-full items-center justify-between truncate rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+		'line-clamp-1 flex h-9 w-full items-center justify-between truncate rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/separator/index.ts

@@ -1,4 +1,4 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
 	Root,

apps/web/src/lib/components/ui/separator/separator.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SeparatorPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative: $$Props["decorative"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'horizontal';
+	export let decorative: $$Props['decorative'] = undefined;
 	export { className as class };
 </script>
 
 <SeparatorPrimitive.Root
 	class={cn(
-		"shrink-0 bg-border",
-		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
 		className
 	)}
 	{orientation}

apps/web/src/lib/components/ui/sheet/index.ts

@@ -1,13 +1,13 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
-import { tv, type VariantProps } from "tailwind-variants";
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import { tv, type VariantProps } from 'tailwind-variants';
 
-import Portal from "./sheet-portal.svelte";
-import Overlay from "./sheet-overlay.svelte";
-import Content from "./sheet-content.svelte";
-import Header from "./sheet-header.svelte";
-import Footer from "./sheet-footer.svelte";
-import Title from "./sheet-title.svelte";
-import Description from "./sheet-description.svelte";
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
 
 const Root = SheetPrimitive.Root;
 const Close = SheetPrimitive.Close;
@@ -38,69 +38,69 @@ export {
 };
 
 export const sheetVariants = tv({
-	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+	base: 'fixed z-50 gap-4 bg-background p-6 shadow-lg',
 	variants: {
 		side: {
-			top: "inset-x-0 top-0 border-b ",
-			bottom: "inset-x-0 bottom-0 border-t",
-			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-			right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
+			top: 'inset-x-0 top-0 border-b ',
+			bottom: 'inset-x-0 bottom-0 border-t',
+			left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+			right: 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
 		}
 	},
 	defaultVariants: {
-		side: "right"
+		side: 'right'
 	}
 });
 
 export const sheetTransitions = {
 	top: {
 		in: {
-			y: "-100%",
+			y: '-100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			y: "-100%",
+			y: '-100%',
 			duration: 300,
 			opacity: 1
 		}
 	},
 	bottom: {
 		in: {
-			y: "100%",
+			y: '100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			y: "100%",
+			y: '100%',
 			duration: 300,
 			opacity: 1
 		}
 	},
 	left: {
 		in: {
-			x: "-100%",
+			x: '-100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			x: "-100%",
+			x: '-100%',
 			duration: 300,
 			opacity: 1
 		}
 	},
 	right: {
 		in: {
-			x: "100%",
+			x: '100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			x: "100%",
+			x: '100%',
 			duration: 300,
 			opacity: 1
 		}
 	}
 };
 
-export type Side = VariantProps<typeof sheetVariants>["side"];
+export type Side = VariantProps<typeof sheetVariants>['side'];

apps/web/src/lib/components/ui/sheet/sheet-content.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from ".";
-	import { Cross2 } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
-	import { fly } from "svelte/transition";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from '.';
+	import { Cross2 } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
+	import { fly } from 'svelte/transition';
 
 	type $$Props = SheetPrimitive.ContentProps & {
 		side?: Side;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let side: $$Props["side"] = "right";
+	let className: $$Props['class'] = undefined;
+	export let side: $$Props['side'] = 'right';
 	export { className as class };
-	export let inTransition: $$Props["inTransition"] = fly;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] =
-		sheetTransitions[side ? side : "right"]["in"];
-	export let outTransition: $$Props["outTransition"] = fly;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] =
-		sheetTransitions[side ? side : "right"]["out"];
+	export let inTransition: $$Props['inTransition'] = fly;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] =
+		sheetTransitions[side ? side : 'right']['in'];
+	export let outTransition: $$Props['outTransition'] = fly;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] =
+		sheetTransitions[side ? side : 'right']['out'];
 </script>
 
 <SheetPortal>

apps/web/src/lib/components/ui/sheet/sheet-description.svelte

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

apps/web/src/lib/components/ui/sheet/sheet-footer.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	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)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />

apps/web/src/lib/components/ui/sheet/sheet-header.svelte

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

apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte

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

apps/web/src/lib/components/ui/sheet/sheet-portal.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SheetPrimitive.PortalProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 

apps/web/src/lib/components/ui/sheet/sheet-title.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SheetPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <SheetPrimitive.Title
-	class={cn("text-lg font-semibold text-foreground", className)}
+	class={cn('text-lg font-semibold text-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

apps/web/src/lib/components/ui/switch/index.ts

@@ -1,4 +1,4 @@
-import Root from "./switch.svelte";
+import Root from './switch.svelte';
 
 export {
 	Root,

apps/web/src/lib/components/ui/switch/switch.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SwitchPrimitive.Props;
 	type $$Events = SwitchPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
 	export { className as class };
 </script>
 
 <SwitchPrimitive.Root
 	bind:checked
 	class={cn(
-		"peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
 		className
 	)}
 	{...$$restProps}
@@ -22,7 +22,7 @@
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+			'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
 		)}
 	/>
 </SwitchPrimitive.Root>

apps/web/src/lib/components/ui/table/index.ts

@@ -1,11 +1,11 @@
-import Root from "./table.svelte";
-import Body from "./table-body.svelte";
-import Caption from "./table-caption.svelte";
-import Cell from "./table-cell.svelte";
-import Footer from "./table-footer.svelte";
-import Head from "./table-head.svelte";
-import Header from "./table-header.svelte";
-import Row from "./table-row.svelte";
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
 
 export {
 	Root,

apps/web/src/lib/components/ui/table/table-body.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
+<tbody class={cn('[&_tr:last-child]:border-0', className)} {...$$restProps}>
 	<slot />
 </tbody>

apps/web/src/lib/components/ui/table/table-caption.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<caption class={cn("mt-4 text-sm text-muted-foreground", className)} {...$$restProps}>
+<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </caption>

apps/web/src/lib/components/ui/table/table-cell.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLTdAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLTdAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLTdAttributes;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <td
 	class={cn(
-		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/table/table-footer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<tfoot class={cn("bg-primary font-medium text-primary-foreground", className)} {...$$restProps}>
+<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
 	<slot />
 </tfoot>

apps/web/src/lib/components/ui/table/table-head.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLThAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLThAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLThAttributes;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <th
 	class={cn(
-		"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/table/table-header.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
+<thead class={cn('[&_tr]:border-b', className)} {...$$restProps} on:click on:keydown>
 	<slot />
 </thead>

apps/web/src/lib/components/ui/table/table-row.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
-		"data-state"?: unknown;
+		'data-state'?: unknown;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <tr
 	class={cn(
-		"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
 		className
 	)}
 	{...$$restProps}