problem: style is not uniform

2025-12-17 05:24:21 +01:00 · 2024-07-16 12:37:14 +08:00
parent c1974378fb
commit 931520acf6
272 changed files with 2396 additions and 2470 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -2,7 +2,7 @@ name: Build and Deploy to Pages

 on:
  push:
-    branches: ["MASTER"]
+    branches: ['MASTER']

  workflow_dispatch:

@@ -14,7 +14,7 @@ permissions:

 # Allow one concurrent deployment
 concurrency:
-  group: "pages"
+  group: 'pages'
  cancel-in-progress: true

 jobs:
@@ -28,7 +28,7 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: 20
-          cache: "npm"
+          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - name: Upload artifact
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -2,5 +2,5 @@
 	"*.{js,ts,svelte,css,scss,postcss,md,json}": [
 		"prettier --write --plugin-search-dir=.",
 		"prettier --check --plugin-search-dir=."
-  ],
+	]
 }
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
 # Hypergolic
+
 A nostrocket client

 ## Pull Requests
+
 Please only solve ONE problem at a time.

 Indicate to others that you are working to solve a particular problem by claiming it on nostrocket or commenting on the github issue so that others do not duplicate your work.
@@ -11,12 +13,15 @@ Pull request should contain only ONE commit that solves exactly ONE problem. The
 The commit message MUST be a short summary of the problem being solved, usually this should be the same as title of the problem from the github or nostrocket issue tracker.

 ## Style Guide
+
 Avoid uneccessary whitespace changes. Whitespace changes make it difficult to see what code was really changed.

 ## UX Library
+
 https://www.shadcn-svelte.com/docs

 ## Getting Paid
+
 If you want to get paid for working on this project, demonstrate your capability by solving some problems and adhering to the instructions in this readme. After you have 2-3 PR's merged, DM gsovereignty on nostr to have a conversation about paid work.

 ## Developing
--- a/src/app.html
+++ b/src/app.html
@@ -3,10 +3,16 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content, maximum-scale=1" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, interactive-widget=resizes-content, maximum-scale=1"
+		/>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class=" bg-zinc-50 dark:bg-zinc-900 overflow-hidden h-dvh">
+	<body
+		data-sveltekit-preload-data="hover"
+		class="h-dvh overflow-hidden bg-zinc-50 dark:bg-zinc-900"
+	>
 		<div class="h-full w-screen" style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/components/CreateNewProduct.svelte
+++ b/src/components/CreateNewProduct.svelte
@@ -15,7 +15,7 @@
 	import { getRocketURL } from '@/helpers';
 	import Textarea from '@/components/ui/textarea/textarea.svelte';

-	export let rocketEvent:NDKEvent;
+	export let rocketEvent: NDKEvent;

 	let name: string;
 	let desc: string;
@@ -36,10 +36,10 @@
 		//todo validate d tag
 		e.tags.push(['name', name]);
 		e.tags.push(['description', desc]);
-		e.tags.push(['cover', image])
-		e.tags.push(['a', `31108:${rocketEvent.pubkey}:${rocketEvent.dTag}`])
+		e.tags.push(['cover', image]);
+		e.tags.push(['a', `31108:${rocketEvent.pubkey}:${rocketEvent.dTag}`]);
 		e.tags.push(['ruleset', '334000']);
-		console.log(e.rawEvent())
+		console.log(e.rawEvent());
 		e.publish().then((x) => {
 			console.log(x);
 			goto(`${base}/rockets/${getRocketURL(e)}`);
@@ -48,9 +48,18 @@
 </script>

 <Dialog.Root>
-	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Propose a New Product</Dialog.Trigger>
+	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}
+		>Propose a New Product</Dialog.Trigger
+	>
 	<Dialog.Content class="sm:max-w-[425px]">
-		<Todo text={["validate sane field entries", "name.length > 5 < 20", "description length > 20", "image url resolves and is image"]} />
+		<Todo
+			text={[
+				'validate sane field entries',
+				'name.length > 5 < 20',
+				'description length > 20',
+				'image url resolves and is image'
+			]}
+		/>
 		{#if !currentUser}
 			<Alert.Root>
 				<Terminal class="h-4 w-4" />
--- a/src/components/CreateNewRocket.svelte
+++ b/src/components/CreateNewRocket.svelte
@@ -14,7 +14,7 @@
 	import { base } from '$app/paths';
 	import { getRocketURL } from '@/helpers';

-    let name:string;
+	let name: string;

 	function publish(ndk: NDKSvelte, name: string) {
 		if (!ndk.signer) {
@@ -29,14 +29,14 @@
 		e.kind = 31108;
 		e.created_at = Math.floor(new Date().getTime() / 1000);
 		//todo validate d tag
-        e.tags.push(["d", name])
-        e.tags.push(["ruleset", "334000"])
-		e.tags.push(["ignition", "this"])
-		e.tags.push(["parent", "this"])
-        e.publish().then((x)=>{
-            console.log(x)
-            goto(`${base}/rockets/${getRocketURL(e)}`)
-        })
+		e.tags.push(['d', name]);
+		e.tags.push(['ruleset', '334000']);
+		e.tags.push(['ignition', 'this']);
+		e.tags.push(['parent', 'this']);
+		e.publish().then((x) => {
+			console.log(x);
+			goto(`${base}/rockets/${getRocketURL(e)}`);
+		});
 	}
 </script>

@@ -64,7 +64,12 @@
 		</div>
 		<Todo text={['validate input is a valid d tag (NIP01)']} />
 		<Dialog.Footer>
-			<Button on:click={()=>{publish($ndk, name)}} type="submit">Publish</Button>
+			<Button
+				on:click={() => {
+					publish($ndk, name);
+				}}
+				type="submit">Publish</Button
+			>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
--- a/src/components/EmptyList.svelte
+++ b/src/components/EmptyList.svelte
@@ -1,14 +1,11 @@
 <script>
-
-	import { Button } from "@/components/ui/button";
-
+	import { Button } from '@/components/ui/button';
 </script>
+
 <div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
 	<div class="flex flex-col items-center gap-1 text-center">
 		<h3 class="text-2xl font-bold tracking-tight">You have no products</h3>
-      <p class="text-sm text-muted-foreground">
-        You can start selling as soon as you add a product.
-      </p>
+		<p class="text-sm text-muted-foreground">You can start selling as soon as you add a product.</p>
 		<Button class="mt-4">Add Product</Button>
 	</div>
-  </div>
+</div>
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -1,56 +1,57 @@
 <script lang="ts">
-	import { ndk } from "$lib/ndk";
-	import { Button } from "@/components/ui/button";
+	import { ndk } from '$lib/ndk';
+	import { Button } from '@/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
-    import { Avatar } from "@nostr-dev-kit/ndk-svelte-components";
-	import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
-	import { onMount } from "svelte";
+	import { Avatar } from '@nostr-dev-kit/ndk-svelte-components';
+	import { NDKNip07Signer } from '@nostr-dev-kit/ndk';
+	import { onMount } from 'svelte';

 	onMount(() => {
-        if (localStorage.getItem("signed-in")) {
+		if (localStorage.getItem('signed-in')) {
 			nip07();
 		}
-    })
-  $: pubkey = ""
+	});
+	$: pubkey = '';

 	async function nip07() {
-        document.body.appendChild(document.createElement('script')).src = 'https://unpkg.com/window.nostr.js/dist/window.nostr.js';
+		document.body.appendChild(document.createElement('script')).src =
+			'https://unpkg.com/window.nostr.js/dist/window.nostr.js';

 		try {
-            
 			const signer = new NDKNip07Signer();
 			const user = await signer.blockUntilReady();

 			if (user) {
-                pubkey = user.pubkey
+				pubkey = user.pubkey;
 				$ndk.signer = signer;
-                $ndk = $ndk
-                localStorage.setItem("signed-in", "true");
+				$ndk = $ndk;
+				localStorage.setItem('signed-in', 'true');
 			}
 		} catch (e) {
 			alert(e);
 		}
 	}
 </script>
+
 {#if !$ndk.signer}
-<Button on:click={nip07}>
+	<Button on:click={nip07}>
 		<span class="hidden sm:block">Sign in</span>
-</Button>
+	</Button>
 {:else}
-<DropdownMenu.Root>
-<DropdownMenu.Trigger asChild let:builder>
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger asChild let:builder>
 			<Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
-        <Avatar ndk={$ndk} {pubkey} class="w-10 h-10 object-cover rounded-full flex-none" />
+				<Avatar ndk={$ndk} {pubkey} class="h-10 w-10 flex-none rounded-full object-cover" />
 				<span class="sr-only">Toggle user menu</span>
 			</Button>
-</DropdownMenu.Trigger>
-<DropdownMenu.Content align="end">
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content align="end">
 			<DropdownMenu.Label>My Account</DropdownMenu.Label>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Item>Settings</DropdownMenu.Item>
 			<DropdownMenu.Item>Support</DropdownMenu.Item>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Item>Logout</DropdownMenu.Item>
-</DropdownMenu.Content>
-</DropdownMenu.Root>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
 {/if}
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -5,55 +5,37 @@
 	import Separator from '@/components/ui/separator/separator.svelte';
 	import { Mail, Package, Pyramid, Rocket, Users } from 'lucide-svelte';

-    let iconClass = "h-5 w-5 md:h-4 md:w-4"
+	let iconClass = 'h-5 w-5 md:h-4 md:w-4';

-    let getClass = (menuItem:string) => {
+	let getClass = (menuItem: string) => {
 		//todo: make this re-run any time our path changes
 		if ($page.url.pathname.includes(menuItem)) {
-            return "flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
+			return 'flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary';
 		} else {
-            return "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+			return 'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary';
 		}
-        
-     }
-
-    
+	};
 </script>

-<a
-	href="{base}/rockets"
-	class={getClass("rockets")}
->
+<a href="{base}/rockets" class={getClass('rockets')}>
 	<Rocket class={iconClass} />
 	Rockets
 </a>
-<a
-	href="##"
-	class={getClass("problems")}
->
+<a href="##" class={getClass('problems')}>
 	<Pyramid class={iconClass} />
 	Problem Tracker
 	<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">6</Badge>
 </a>
-<a
-	href="{base}/products"
-	class={getClass("products")}
->
+<a href="{base}/products" class={getClass('products')}>
 	<Package class={iconClass} />
 	Products
 </a>
-<a
-	href="##"
-	class={getClass("people")}
->
+<a href="##" class={getClass('people')}>
 	<Users class={iconClass} />
 	People
 </a>
 <Separator />
-<a
-	href="##"
-	class={getClass("inbox")}
->
+<a href="##" class={getClass('inbox')}>
 	<Mail class={iconClass} />
 	Inbox
 </a>
--- a/src/components/MeritRequestDashboard.svelte
+++ b/src/components/MeritRequestDashboard.svelte
@@ -21,11 +21,17 @@
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href={`${base}/rockets/${getRocketURL(rocket)}`}>Merit Requests</Breadcrumb.Link>
+					<Breadcrumb.Link href={`${base}/rockets/${getRocketURL(rocket)}`}
+						>Merit Requests</Breadcrumb.Link
+					>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator />
 				<Breadcrumb.Item>
-					<Breadcrumb.Page>{merit.Problem().substring(0,16)}{#if merit.Problem().length > 16}...{/if}</Breadcrumb.Page>
+					<Breadcrumb.Page
+						>{merit
+							.Problem()
+							.substring(0, 16)}{#if merit.Problem().length > 16}...{/if}</Breadcrumb.Page
+					>
 				</Breadcrumb.Item>
 			</Breadcrumb.List>
 		</Breadcrumb.Root>
@@ -34,5 +40,5 @@
 		class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-2 lg:grid-cols-3 xl:grid-cols-3"
 	>
 		<MeritSummaryCard {rocket} {merit} />
-</main>
+	</main>
 </div>
--- a/src/components/MeritSummaryCard.svelte
+++ b/src/components/MeritSummaryCard.svelte
@@ -66,14 +66,14 @@

 	let rocketUpdates = derived([votes, currentUser], ([$votes, $currentUser]) => {
 		let events: NDKEvent[] = [];
+		if ($currentUser && parsedRocket && parsedRocket.VotePowerForPubkey($currentUser.pubkey) > 0) {
+			let votes = new Votes(Array.from($votes, ([_, v]) => v));
+			let result = votes.Results().Result(parsedRocket);
 			if (
-			$currentUser &&
-			parsedRocket &&
-			parsedRocket.VotePowerForPubkey($currentUser.pubkey) > 0
+				result &&
+				result == 'ratify' &&
+				!parsedRocket.ApprovedMeritRequests().get(votes.Request)
 			) {
-			let votes = new Votes(Array.from($votes, ([_, v])=>(v)))
-			let result = votes.Results().Result(parsedRocket)
-			if (result && result == "ratify" && !parsedRocket.ApprovedMeritRequests().get(votes.Request)) {
 				//todo: parsedRocket.AppendAMR(votes.ConstructProof())
 				//
 			}
@@ -81,8 +81,11 @@
 		return events;
 	});

-	rocketUpdates.subscribe((c)=>{if (c.length > 0){console.log(c)}})
-
+	rocketUpdates.subscribe((c) => {
+		if (c.length > 0) {
+			console.log(c);
+		}
+	});
 </script>

 <Card.Root class="sm:col-span-2">
--- a/src/components/MeritsAndSatflow.svelte
+++ b/src/components/MeritsAndSatflow.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
+	import * as Card from '@/components/ui/card';
+	import Pie from './Pie.svelte';
+	import * as Table from '@/components/ui/table';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';

-	import * as Card from "@/components/ui/card";
-	import Pie from "./Pie.svelte";
-	import * as Table from "@/components/ui/table";
-	import type { NDKEvent } from "@nostr-dev-kit/ndk";
-
-    export let rocket:NDKEvent;
-
+	export let rocket: NDKEvent;
 </script>
+
 <Card.Root class="sm:col-span-3">
 	<Card.Header class="pb-3">
 		<Card.Title>Merits and Satflow</Card.Title>
@@ -39,6 +38,5 @@
 			</div>
 		</Card.Description>
 	</Card.Header>
-    <Card.Footer>
-    </Card.Footer>
-  </Card.Root>
+	<Card.Footer></Card.Footer>
+</Card.Root>
--- a/src/components/PayNow.svelte
+++ b/src/components/PayNow.svelte
@@ -9,29 +9,33 @@
 	import Todo from './Todo.svelte';
 	import { requestProvider } from 'webln';

-    export let product:NDKEvent;
-    export let rocket:NDKEvent;
+	export let product: NDKEvent;
+	export let rocket: NDKEvent;

 	function zap() {
-        let z = new NDKZap({ndk:$ndk, zappedEvent:rocket, zappedUser: rocket.author})
-        z.createZapRequest(1000, `Purchase of ${product.getMatchingTags("name")[0][1]} from ${rocket.dTag}`, [["product", product.id]]).then(invoice=>{
+		let z = new NDKZap({ ndk: $ndk, zappedEvent: rocket, zappedUser: rocket.author });
+		z.createZapRequest(
+			1000,
+			`Purchase of ${product.getMatchingTags('name')[0][1]} from ${rocket.dTag}`,
+			[['product', product.id]]
+		).then((invoice) => {
 			if (invoice) {
-                requestProvider().then((webln)=>{
-                    webln.sendPayment(invoice).then((response)=>{
+				requestProvider().then((webln) => {
+					webln.sendPayment(invoice).then((response) => {
 						if (response && response.preimage) {
-                            console.log(response.preimage)
+							console.log(response.preimage);
 							open = false;
 						}
-                    })
+					});
 				});
 			}
-        })
+		});
 	}

-let open:boolean;
+	let open: boolean;
 </script>

-<Dialog.Root bind:open={open}>
+<Dialog.Root bind:open>
 	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Buy Now</Dialog.Trigger>
 	<Dialog.Content class="sm:max-w-[425px]">
 		<Dialog.Header>
--- a/src/components/Pie.svelte
+++ b/src/components/Pie.svelte
@@ -63,7 +63,6 @@
 			fontFamily: 'Inter, sans-serif'
 		},
 		yaxis: {
-        
 			labels: {
 				formatter: function (value) {
 					return value + 'k';
@@ -85,22 +84,17 @@
 		}
 	};

-//     <Card>
-//     <div class="flex justify-between items-start w-full">
-//       <div class="flex-col items-center">
-//         <div class="flex items-center mb-1">
-//           <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white me-1">Merit Distribution</h5>
-          
-          
-//         </div>
-//       </div>
-
-//     </div>
-// </Card>
-  
-</script>
-  
-
+	//     <Card>
+	//     <div class="flex justify-between items-start w-full">
+	//       <div class="flex-col items-center">
+	//         <div class="flex items-center mb-1">
+	//           <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white me-1">Merit Distribution</h5>

+	//         </div>
+	//       </div>

+	//     </div>
+	// </Card>
+</script>

+<Chart {options} class="py-6" />
--- a/src/components/ProductCard.svelte
+++ b/src/components/ProductCard.svelte
@@ -5,7 +5,7 @@
 	import PayNow from './PayNow.svelte';

 	export let product: NDKEvent;
-	export let rocket:NDKEvent;
+	export let rocket: NDKEvent;
 	//$page.url.searchParams.get("tab")

 	function validate(event: NDKEvent): boolean {
@@ -34,19 +34,19 @@
 		return test == 3;
 	}

-	function includedInRocket():boolean {
-		let included = false
-		for (let p of rocket.getMatchingTags("product")) {
-			if (p[1].split(":")[0] == product.id) {
-				included = true
+	function includedInRocket(): boolean {
+		let included = false;
+		for (let p of rocket.getMatchingTags('product')) {
+			if (p[1].split(':')[0] == product.id) {
+				included = true;
 			}
 		}
-		return included
+		return included;
 	}
 </script>

 {#if validate(product)}
-	<Card.Root class="w-[350px] m-2">
+	<Card.Root class="m-2 w-[350px]">
 		<Card.Header>
 			<Card.Title>{product.getMatchingTags('name')[0][1]}</Card.Title>
 			<Card.Description>{product.getMatchingTags('description')[0][1]}</Card.Description>
@@ -55,7 +55,7 @@
 		<Card.Content></Card.Content>
 		<Card.Footer class="flex justify-between">
 			{#if !includedInRocket()}
-			<AddProductToRocket product={product} {rocket} />
+				<AddProductToRocket {product} {rocket} />
 			{:else}
 				<PayNow {product} {rocket} />
 			{/if}
--- a/src/components/ProductCardFromID.svelte
+++ b/src/components/ProductCardFromID.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { ndk } from "@/ndk";
-	import type { NDKEvent } from "@nostr-dev-kit/ndk";
+	import { ndk } from '@/ndk';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import ProductCard from './ProductCard.svelte';
 	export let productID: string;
-    export let rocket:NDKEvent;
-    let productEvent:NDKEvent | undefined;
+	export let rocket: NDKEvent;
+	let productEvent: NDKEvent | undefined;

-	onMount(()=>{
-        $ndk.fetchEvent(productID).then((e)=>{
+	onMount(() => {
+		$ndk.fetchEvent(productID).then((e) => {
 			if (e) {
-                productEvent = e
+				productEvent = e;
 			}
-        })
-    })
-
+		});
+	});
 </script>

 {#if productEvent}
-<ProductCard {rocket} product={productEvent} />
+	<ProductCard {rocket} product={productEvent} />
 {/if}
--- a/src/components/ProductsForRocket.svelte
+++ b/src/components/ProductsForRocket.svelte
@@ -5,7 +5,6 @@
 	import ProductCardFromID from './ProductCardFromID.svelte';
 	import ProductPurchases from './ProductPurchases.svelte';

-
 	export let rocketEvent: NDKEvent;

 	$: rocketProducts = getMapOfProductsFromRocket(rocketEvent);
@@ -16,5 +15,3 @@
 		<ProductCardFromID rocket={rocketEvent} productID={product.ID} />
 		<ProductPurchases rocket={rocketEvent} {product} />{/each}
 {/if}
-
-
--- a/src/components/ProposedProducts.svelte
+++ b/src/components/ProposedProducts.svelte
@@ -8,27 +8,25 @@
 	export let rocket: NDKEvent;

 	let proposals = $ndk.storeSubscribe(
-		[
-			{ '#a': [`31108:${rocket.author.pubkey}:${rocket.dTag}`], kinds: [1908 as number] }
-		],
+		[{ '#a': [`31108:${rocket.author.pubkey}:${rocket.dTag}`], kinds: [1908 as number] }],
 		{ subId: rocket.dTag }
 	);

-    onDestroy(()=>{
-        proposals.unsubscribe()
-    })
+	onDestroy(() => {
+		proposals.unsubscribe();
+	});

-    let unratified = derived(proposals, ($proposals)=>{
-        return $proposals.filter((p)=>{
+	let unratified = derived(proposals, ($proposals) => {
+		return $proposals.filter((p) => {
 			let found = false;
-            for (let product of rocket.getMatchingTags("product")){
-                if (product[1].split(":")[0] == p.id) {
-                    found = true
+			for (let product of rocket.getMatchingTags('product')) {
+				if (product[1].split(':')[0] == p.id) {
+					found = true;
 				}
 			}
-            return !found
-        })
-    })
+			return !found;
+		});
+	});
 </script>

 {#each $unratified as r}<ProductCard {rocket} product={r} />{/each}
--- a/src/components/RocketCard.svelte
+++ b/src/components/RocketCard.svelte
@@ -3,15 +3,14 @@
 	import { base } from '$app/paths';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
-	import { Name, Avatar } from "@nostr-dev-kit/ndk-svelte-components";
+	import { Name, Avatar } from '@nostr-dev-kit/ndk-svelte-components';
 	import { getMission, getRocketURL } from '@/helpers';
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import { ChevronRight } from 'lucide-svelte';
-	import { ndk } from "@/ndk";
+	import { ndk } from '@/ndk';

 	export let rocketEvent: NDKEvent;
 	//$page.url.searchParams.get("tab")
-
 </script>

 <Card.Root class="w-[350px]">
@@ -21,12 +20,25 @@
 	</Card.Header>
 	<Card.Content>
 		<div class="flex items-center gap-2">
-			<Avatar ndk={$ndk} pubkey={rocketEvent.pubkey} class="w-5 h-5 object-cover rounded-full flex-none" />
+			<Avatar
+				ndk={$ndk}
+				pubkey={rocketEvent.pubkey}
+				class="h-5 w-5 flex-none rounded-full object-cover"
+			/>
 			<Name ndk={$ndk} pubkey={rocketEvent.pubkey} class="inline-block truncate" />
 		</div>
 	</Card.Content>
 	<Card.Footer class="flex justify-between">
-        <Button on:click={()=>{console.log(rocketEvent.rawEvent())}} variant="outline">Print to Console</Button>
-		<Button on:click={()=>{goto(`${base}/rockets/${getRocketURL(rocketEvent)}`)}}>View Full Rocket<ChevronRight class="h-4 w-4" /></Button>
+		<Button
+			on:click={() => {
+				console.log(rocketEvent.rawEvent());
+			}}
+			variant="outline">Print to Console</Button
+		>
+		<Button
+			on:click={() => {
+				goto(`${base}/rockets/${getRocketURL(rocketEvent)}`);
+			}}>View Full Rocket<ChevronRight class="h-4 w-4" /></Button
+		>
 	</Card.Footer>
 </Card.Root>
--- a/src/components/RocketDashboard
+++ b/src/components/RocketDashboard
@@ -1,32 +1,29 @@
 <script lang="ts">
-    import ChevronLeft from "lucide-svelte/icons/chevron-left";
-    import ChevronRight from "lucide-svelte/icons/chevron-right";
-    import Copy from "lucide-svelte/icons/copy";
-    import CreditCard from "lucide-svelte/icons/credit-card";
-    import EllipsisVertical from "lucide-svelte/icons/ellipsis-vertical";
-    import File from "lucide-svelte/icons/file";
-    import ListFilter from "lucide-svelte/icons/list-filter";
-    import Truck from "lucide-svelte/icons/truck";
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import Copy from 'lucide-svelte/icons/copy';
+	import CreditCard from 'lucide-svelte/icons/credit-card';
+	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
+	import File from 'lucide-svelte/icons/file';
+	import ListFilter from 'lucide-svelte/icons/list-filter';
+	import Truck from 'lucide-svelte/icons/truck';

-    import { Badge } from "$lib/components/ui/badge/index.js";
-    import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import * as Card from "$lib/components/ui/card/index.js";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import * as Pagination from "$lib/components/ui/pagination/index.js";
-    import { Progress } from "$lib/components/ui/progress/index.js";
-    import { Separator } from "$lib/components/ui/separator/index.js";
-    import * as Table from "$lib/components/ui/table/index.js";
-    import * as Tabs from "$lib/components/ui/tabs/index.js";
-  
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Pagination from '$lib/components/ui/pagination/index.js';
+	import { Progress } from '$lib/components/ui/progress/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+</script>

-  
-
-    
+<div class="flex flex-col sm:gap-4">
 	<header
 		class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
 	>
-      >
 		<Breadcrumb.Root class="hidden md:flex">
 			<Breadcrumb.List>
 				<Breadcrumb.Item>
@@ -52,8 +49,8 @@
 					<Card.Header class="pb-3">
 						<Card.Title>Your Orders</Card.Title>
 						<Card.Description class="max-w-lg text-balance leading-relaxed">
-                <Card.Description class="max-w-lg text-balance leading-relaxed">
-                  Introducing Our Dynamic Orders Dashboard for Seamless Management and
+							Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful
+							Analysis.
 						</Card.Description>
 					</Card.Header>
 					<Card.Footer>
@@ -95,12 +92,7 @@
 					<div class="ml-auto flex items-center gap-2">
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger asChild let:builder>
-                  <DropdownMenu.Trigger asChild let:builder>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      class="h-7 gap-1 text-sm"
-                      builders={[builder]}
+								<Button variant="outline" size="sm" class="h-7 gap-1 text-sm" builders={[builder]}>
 									<ListFilter class="h-3.5 w-3.5" />
 									<span class="sr-only sm:not-sr-only">Filter</span>
 								</Button>
@@ -108,9 +100,7 @@
 							<DropdownMenu.Content align="end">
 								<DropdownMenu.Label>Filter by</DropdownMenu.Label>
 								<DropdownMenu.Separator />
-                    <DropdownMenu.Separator />
-                    <DropdownMenu.CheckboxItem checked>
-                      Fulfilled
+								<DropdownMenu.CheckboxItem checked>Fulfilled</DropdownMenu.CheckboxItem>
 								<DropdownMenu.CheckboxItem>Declined</DropdownMenu.CheckboxItem>
 								<DropdownMenu.CheckboxItem>Refunded</DropdownMenu.CheckboxItem>
 							</DropdownMenu.Content>
@@ -132,15 +122,9 @@
 								<Table.Header>
 									<Table.Row>
 										<Table.Head>Customer</Table.Head>
-                        <Table.Head>Customer</Table.Head>
-                        <Table.Head class="hidden sm:table-cell">
-                          Type
-                        </Table.Head>
-                        <Table.Head class="hidden sm:table-cell">
-                          Status
-                        </Table.Head>
-                        <Table.Head class="hidden md:table-cell">
-                          Date
+										<Table.Head class="hidden sm:table-cell">Type</Table.Head>
+										<Table.Head class="hidden sm:table-cell">Status</Table.Head>
+										<Table.Head class="hidden md:table-cell">Date</Table.Head>
 										<Table.Head class="text-right">Amount</Table.Head>
 									</Table.Row>
 								</Table.Header>
@@ -148,177 +132,113 @@
 									<Table.Row class="bg-accent">
 										<Table.Cell>
 											<div class="font-medium">Liam Johnson</div>
-                          <div class="font-medium">Liam Johnson</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												liam@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Sale</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Sale
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="secondary">
-                            Fulfilled
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="secondary">Fulfilled</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-23</Table.Cell>
 										<Table.Cell class="text-right">$250.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Olivia Smith</div>
-                          <div class="font-medium">Olivia Smith</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												olivia@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Refund</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Refund
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="outline">
-                            Declined
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="outline">Declined</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-24</Table.Cell>
 										<Table.Cell class="text-right">$150.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Noah Williams</div>
-                          <div class="font-medium">Noah Williams</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												noah@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Subscription</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Subscription
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="secondary">
-                            Fulfilled
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="secondary">Fulfilled</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-25</Table.Cell>
 										<Table.Cell class="text-right">$350.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Emma Brown</div>
-                          <div class="font-medium">Emma Brown</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												emma@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Sale</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Sale
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="secondary">
-                            Fulfilled
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="secondary">Fulfilled</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-26</Table.Cell>
 										<Table.Cell class="text-right">$450.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Liam Johnson</div>
-                          <div class="font-medium">Liam Johnson</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												liam@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Sale</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Sale
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="secondary">
-                            Fulfilled
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="secondary">Fulfilled</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-23</Table.Cell>
 										<Table.Cell class="text-right">$250.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Liam Johnson</div>
-                          <div class="font-medium">Liam Johnson</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												liam@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Sale</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Sale
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="secondary">
-                            Fulfilled
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="secondary">Fulfilled</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-23</Table.Cell>
 										<Table.Cell class="text-right">$250.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Olivia Smith</div>
-                          <div class="font-medium">Olivia Smith</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												olivia@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Refund</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Refund
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="outline">
-                            Declined
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="outline">Declined</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-24</Table.Cell>
 										<Table.Cell class="text-right">$150.00</Table.Cell>
 									</Table.Row>
 									<Table.Row>
 										<Table.Cell>
 											<div class="font-medium">Emma Brown</div>
-                          <div class="font-medium">Emma Brown</div>
-                          <div
-                            class="hidden text-sm text-muted-foreground md:inline"
+											<div class="hidden text-sm text-muted-foreground md:inline">
 												emma@example.com
 											</div>
 										</Table.Cell>
+										<Table.Cell class="hidden sm:table-cell">Sale</Table.Cell>
 										<Table.Cell class="hidden sm:table-cell">
-                        <Table.Cell class="hidden sm:table-cell">
-                          Sale
-                        </Table.Cell>
-                        <Table.Cell class="hidden sm:table-cell">
-                          <Badge class="text-xs" variant="secondary">
-                            Fulfilled
-                          </Badge>
-                        </Table.Cell>
-                        <Table.Cell class="hidden md:table-cell">
+											<Badge class="text-xs" variant="secondary">Fulfilled</Badge>
 										</Table.Cell>
+										<Table.Cell class="hidden md:table-cell">2023-06-26</Table.Cell>
 										<Table.Cell class="text-right">$450.00</Table.Cell>
 									</Table.Row>
 								</Table.Body>
@@ -348,18 +268,11 @@
 					<div class="ml-auto flex items-center gap-1">
 						<Button size="sm" variant="outline" class="h-8 gap-1">
 							<Truck class="h-3.5 w-3.5" />
-                  <Truck class="h-3.5 w-3.5" />
-                  <span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                    Track Order
+							<span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap"> Track Order </span>
 						</Button>
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger asChild let:builder>
-                  <DropdownMenu.Trigger asChild let:builder>
-                    <Button
-                      builders={[builder]}
-                      size="icon"
-                      variant="outline"
-                      class="h-8 w-8"
+								<Button builders={[builder]} size="icon" variant="outline" class="h-8 w-8">
 									<EllipsisVertical class="h-3.5 w-3.5" />
 									<span class="sr-only">More</span>
 								</Button>
@@ -485,6 +398,4 @@
 			</Card.Root>
 		</div>
 	</main>
-      </main>
-    </div>
-
+</div>
--- a/src/components/RocketDashboard.svelte
+++ b/src/components/RocketDashboard.svelte
@@ -14,9 +14,7 @@
 </script>

 <div class="flex flex-col sm:gap-4">
-	<header
-		class="flex items-center "
-	>
+	<header class="flex items-center">
 		<Breadcrumb.Root class="flex">
 			<Breadcrumb.List>
 				<Breadcrumb.Item>
@@ -38,7 +36,6 @@

 		<ProposedProducts {rocket} />

-		
 		<MeritRequests {rocket} />
 		<Card.Root class="sm:col-span-3">
 			<Card.Header class="pb-3">
--- a/src/components/RocketPillCard.svelte
+++ b/src/components/RocketPillCard.svelte
@@ -5,14 +5,21 @@
 	import { Button } from '@/components/ui/button';
 	import * as Card from '@/components/ui/card';
 </script>
-{#if $page.route.id != "/"}
-<Card.Root>
-	<Card.Header class="pt-0 p-4">
+
+{#if $page.route.id != '/'}
+	<Card.Root>
+		<Card.Header class="p-4 pt-0">
 			<Card.Title>WTF</Card.Title>
 			<Card.Description>I'm new to Nostrocket, wtf is this thing all about?</Card.Description>
 		</Card.Header>
 		<Card.Content class="pt-0 md:p-4">
-		<Button on:click={()=>{goto(`${base}/`)}} size="sm" class="w-full">Rocketpill Me</Button>
+			<Button
+				on:click={() => {
+					goto(`${base}/`);
+				}}
+				size="sm"
+				class="w-full">Rocketpill Me</Button
+			>
 		</Card.Content>
-</Card.Root>
+	</Card.Root>
 {/if}
--- a/src/components/Todo.svelte
+++ b/src/components/Todo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Terminal from 'lucide-svelte/icons/terminal';
 	import * as Alert from '$lib/components/ui/alert/index.js';
-    export let text:string[];
+	export let text: string[];
 </script>

 <Alert.Root>
@@ -15,6 +15,5 @@
 		{:else}
 			{text}
 		{/if}
-        
 	</Alert.Description>
 </Alert.Root>
--- a/src/components/VoteOnMeritRequest.svelte
+++ b/src/components/VoteOnMeritRequest.svelte
@@ -35,15 +35,13 @@
 		});
 	}

-	$:currentUserHasVotepower = false;
+	$: currentUserHasVotepower = false;

-	$:{
+	$: {
 		if (currentUser && $currentUser) {
-			currentUserHasVotepower = (rocket.VotePowerForPubkey($currentUser.pubkey) > 0)
+			currentUserHasVotepower = rocket.VotePowerForPubkey($currentUser.pubkey) > 0;
 		}
 	}
-
-	
 </script>

 {#if $currentUser}
@@ -54,9 +52,8 @@
 			if (currentUserHasVotepower) {
 				publish($ndk, 'ratify');
 			} else {
-				alert(`Your pubkey does not have votepower in ${rocket.Name()}`)
+				alert(`Your pubkey does not have votepower in ${rocket.Name()}`);
 			}
-			
 		}}>Vote to Approve</Button
 	>
 	<Button
@@ -66,7 +63,7 @@
 			if (currentUserHasVotepower) {
 				publish($ndk, 'blackball');
 			} else {
-				alert(`Your pubkey does not have votepower in ${rocket.Name()}`)
+				alert(`Your pubkey does not have votepower in ${rocket.Name()}`);
 			}
 		}}>Vote to Reject</Button
 	>
--- a/src/layouts/SidePanelLayout.svelte
+++ b/src/layouts/SidePanelLayout.svelte
@@ -35,7 +35,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="flex flex-col h-dvh">
+	<div class="flex h-dvh flex-col">
 		<header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
@@ -83,7 +83,7 @@
 			</div>
 			<Login />
 		</header>
-		<div class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 overflow-auto">
+		<div class="flex flex-1 flex-col gap-4 overflow-auto p-4 lg:gap-6 lg:p-6">
 			<slot name="content"></slot>
 		</div>
 	</div>
--- a/src/lib/components/ui/accordion/accordion-content.svelte
+++ b/src/lib/components/ui/accordion/accordion-content.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { slide } from "svelte/transition";
-	import { cn } from "$lib/utils.js";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AccordionPrimitive.ContentProps;

-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200,
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
 	};
 	export { className as class };
 </script>

 <AccordionPrimitive.Content
-	class={cn("overflow-hidden text-sm transition-all", className)}
+	class={cn('overflow-hidden text-sm transition-all', className)}
 	{transition}
 	{transitionConfig}
 	{...$$restProps}
--- a/src/lib/components/ui/accordion/accordion-item.svelte
+++ b/src/lib/components/ui/accordion/accordion-item.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AccordionPrimitive.ItemProps;

-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
 	export { className as class };
 </script>

-<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
+<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
 	<slot />
 </AccordionPrimitive.Item>
--- a/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
-	import { cn } from "$lib/utils.js";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AccordionPrimitive.TriggerProps;
 	type $$Events = AccordionPrimitive.TriggerEvents;

-	let className: $$Props["class"] = undefined;
-	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	let className: $$Props['class'] = undefined;
+	export let level: AccordionPrimitive.HeaderProps['level'] = 3;
 	export { className as class };
 </script>

 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
 			className
 		)}
 		{...$$restProps}
--- a/src/lib/components/ui/accordion/index.ts
+++ b/src/lib/components/ui/accordion/index.ts
@@ -1,7 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
-import Content from "./accordion-content.svelte";
-import Item from "./accordion-item.svelte";
-import Trigger from "./accordion-trigger.svelte";
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
 const Root = AccordionPrimitive.Root;

 export {
@@ -13,5 +13,5 @@ export {
 	Root as Accordion,
 	Content as AccordionContent,
 	Item as AccordionItem,
-	Trigger as AccordionTrigger,
+	Trigger as AccordionTrigger
 };
--- a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AlertDialogPrimitive.ActionProps;
 	type $$Events = AlertDialogPrimitive.ActionEvents;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

--- a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AlertDialogPrimitive.CancelProps;
 	type $$Events = AlertDialogPrimitive.CancelEvents;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <AlertDialogPrimitive.Cancel
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
 	{...$$restProps}
 	on:click
 	on:keydown
--- a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import * as AlertDialog from "./index.js";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import * as AlertDialog from './index.js';
+	import { cn, flyAndScale } from '$lib/utils.js';

 	type $$Props = AlertDialogPrimitive.ContentProps;

-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

@@ -18,7 +18,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}
--- a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AlertDialogPrimitive.DescriptionProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <AlertDialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	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 />
--- a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	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>
--- a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { fade } from "svelte/transition";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { fade } from 'svelte/transition';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AlertDialogPrimitive.OverlayProps;

-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -16,6 +16,6 @@
 <AlertDialogPrimitive.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}
 />
--- a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';

 	type $$Props = AlertDialogPrimitive.PortalProps;
 </script>
--- a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AlertDialogPrimitive.TitleProps;

-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h3";
+	let className: $$Props['class'] = undefined;
+	export let level: $$Props['level'] = 'h3';
 	export { className as class };
 </script>

-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
 	<slot />
 </AlertDialogPrimitive.Title>
--- a/src/lib/components/ui/alert-dialog/index.ts
+++ b/src/lib/components/ui/alert-dialog/index.ts
@@ -1,14 +1,14 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';

-import Title from "./alert-dialog-title.svelte";
-import Action from "./alert-dialog-action.svelte";
-import Cancel from "./alert-dialog-cancel.svelte";
-import Portal from "./alert-dialog-portal.svelte";
-import Footer from "./alert-dialog-footer.svelte";
-import Header from "./alert-dialog-header.svelte";
-import Overlay from "./alert-dialog-overlay.svelte";
-import Content from "./alert-dialog-content.svelte";
-import Description from "./alert-dialog-description.svelte";
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';

 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;
@@ -36,5 +36,5 @@ export {
 	Trigger as AlertDialogTrigger,
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
-	Description as AlertDialogDescription,
+	Description as AlertDialogDescription
 };
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	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>
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from './index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		level?: HeadingLevel;
 	};

-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h5";
+	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 />
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { type Variant, alertVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type Variant, alertVariants } from './index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 		variant?: Variant;
 	};

-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
 	export { className as class };
 </script>

--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,26 +1,26 @@
-import { type VariantProps, tv } from "tailwind-variants";
+import { type VariantProps, tv } 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 p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	base: 'relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',

 	variants: {
 		variant: {
-			default: "bg-background text-foreground",
+			default: 'bg-background text-foreground',
 			destructive:
-				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
-		},
+				'border-destructive/50 text-destructive 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,
@@ -29,5 +29,5 @@ export {
 	//
 	Root as Alert,
 	Description as AlertDescription,
-	Title as AlertTitle,
+	Title as AlertTitle
 };
--- a/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
+++ b/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+	import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';

 	type $$Props = AspectRatioPrimitive.Props;

-	export let ratio: $$Props["ratio"] = 4 / 3;
+	export let ratio: $$Props['ratio'] = 4 / 3;
 </script>

 <AspectRatioPrimitive.Root {ratio} {...$$restProps}>
--- a/src/lib/components/ui/aspect-ratio/index.ts
+++ b/src/lib/components/ui/aspect-ratio/index.ts
@@ -1,3 +1,3 @@
-import Root from "./aspect-ratio.svelte";
+import Root from './aspect-ratio.svelte';

 export { Root, Root as AspectRatio };
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/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.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	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 />
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/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.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AvatarPrimitive.ImageProps;

-	let className: $$Props["class"] = undefined;
-	export let src: $$Props["src"] = undefined;
-	export let alt: $$Props["alt"] = undefined;
+	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}
 />
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/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.js";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = AvatarPrimitive.Props;

-	let className: $$Props["class"] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
+	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 />
--- a/src/lib/components/ui/avatar/index.ts
+++ b/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,
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback,
+	Fallback as AvatarFallback
 };
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { type Variant, badgeVariants } from './index.js';
+	import { cn } from '$lib/utils.js';

 	let className: string | undefined | null = undefined;
 	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
+	export 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}
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@@ -1,21 +1,20 @@
-import { type VariantProps, tv } from "tailwind-variants";
-export { default as Badge } from "./badge.svelte";
+import { type VariantProps, tv } from 'tailwind-variants';
+export { default as Badge } from './badge.svelte';

 export const badgeVariants = tv({
-	base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	base: 'inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 	variants: {
 		variant: {
-			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-			secondary:
-				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+			secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
 			destructive:
-				"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-			outline: "text-foreground",
-		},
+				'border-transparent bg-destructive text-destructive-foreground 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'];
--- a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import Ellipsis from 'lucide-svelte/icons/ellipsis';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 		el?: HTMLSpanElement;
 	};

-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

@@ -16,7 +16,7 @@
 	bind:this={el}
 	role="presentation"
 	aria-hidden="true"
-	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	class={cn('flex h-9 w-9 items-center justify-center', className)}
 	{...$$restProps}
 >
 	<Ellipsis class="h-4 w-4" />
--- a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLLiAttributes & {
 		el?: HTMLLIElement;
 	};

-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

-<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+<li bind:this={el} class={cn('inline-flex items-center gap-1.5', className)}>
 	<slot />
 </li>
--- a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAnchorAttributes & {
 		el?: HTMLAnchorElement;
 		asChild?: boolean;
 	};

-	export let href: $$Props["href"] = undefined;
-	export let el: $$Props["el"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	let className: $$Props["class"] = undefined;
+	export let href: $$Props['href'] = undefined;
+	export let el: $$Props['el'] = undefined;
+	export let asChild: $$Props['asChild'] = false;
+	let className: $$Props['class'] = undefined;
 	export { className as class };

 	let attrs: Record<string, unknown>;

 	$: attrs = {
-		class: cn("transition-colors hover:text-foreground", className),
+		class: cn('transition-colors hover:text-foreground', className),
 		href,
-		...$$restProps,
+		...$$restProps
 	};
 </script>

--- a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLOlAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLOlAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLOlAttributes & {
 		el?: HTMLOListElement;
 	};

-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <ol
 	bind:this={el}
 	class={cn(
-		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+		'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
 		className
 	)}
 	{...$$restProps}
--- a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 		el?: HTMLSpanElement;
 	};

-	export let el: $$Props["el"] = undefined;
-	export let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	export let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

@@ -16,7 +16,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn("font-normal text-foreground", className)}
+	class={cn('font-normal text-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLLiAttributes & {
 		el?: HTMLLIElement;
 	};

-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <li
 	role="presentation"
 	aria-hidden="true"
-	class={cn("[&>svg]:size-3.5", className)}
+	class={cn('[&>svg]:size-3.5', className)}
 	bind:this={el}
 	{...$$restProps}
 >
--- a/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';

 	type $$Props = HTMLAttributes<HTMLElement> & {
 		el?: HTMLElement;
 	};

-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
+	export let el: $$Props['el'] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

--- a/src/lib/components/ui/breadcrumb/index.ts
+++ b/src/lib/components/ui/breadcrumb/index.ts
@@ -1,10 +1,10 @@
-import Root from "./breadcrumb.svelte";
-import Ellipsis from "./breadcrumb-ellipsis.svelte";
-import Item from "./breadcrumb-item.svelte";
-import Separator from "./breadcrumb-separator.svelte";
-import Link from "./breadcrumb-link.svelte";
-import List from "./breadcrumb-list.svelte";
-import Page from "./breadcrumb-page.svelte";
+import Root from './breadcrumb.svelte';
+import Ellipsis from './breadcrumb-ellipsis.svelte';
+import Item from './breadcrumb-item.svelte';
+import Separator from './breadcrumb-separator.svelte';
+import Link from './breadcrumb-link.svelte';
+import List from './breadcrumb-list.svelte';
+import Page from './breadcrumb-page.svelte';

 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Separator as BreadcrumbSeparator,
 	Link as BreadcrumbLink,
 	List as BreadcrumbList,
-	Page as BreadcrumbPage,
+	Page as BreadcrumbPage
 };
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { Button as ButtonPrimitive } from 'bits-ui';
+	import { type Events, type Props, buttonVariants } from './index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = Props;
 	type $$Events = Events;

-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let size: $$Props['size'] = 'default';
+	export let builders: $$Props['builders'] = [];
 	export { className as class };
 </script>

--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,34 +1,33 @@
-import { type VariantProps, tv } from "tailwind-variants";
-import type { Button as ButtonPrimitive } from "bits-ui";
-import Root from "./button.svelte";
+import { type VariantProps, tv } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import Root from './button.svelte';

 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
+			default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+			destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+			outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
+			link: 'text-primary underline-offset-4 hover:underline'
 		},
 		size: {
-			default: "h-10 px-4 py-2",
-			sm: "h-9 rounded-md px-3",
-			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10",
-		},
+			default: 'h-10 px-4 py-2',
+			sm: 'h-9 rounded-md px-3',
+			lg: 'h-11 rounded-md px-8',
+			icon: 'h-10 w-10'
+		}
 	},
 	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
+		variant: 'default',
+		size: 'default'
+	}
 });

-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];

 type Props = ButtonPrimitive.Props & {
 	variant?: Variant;
@@ -45,5 +44,5 @@ export {
 	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
-	buttonVariants,
+	buttonVariants
 };
--- a/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.CellProps;

-	export let date: $$Props["date"];
-	let className: $$Props["class"] = undefined;
+	export let date: $$Props['date'];
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <CalendarPrimitive.Cell
 	{date}
 	class={cn(
-		"relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
+		'relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50',
 		className
 	)}
 	{...$$restProps}
--- a/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.DayProps;
 	type $$Events = CalendarPrimitive.DayEvents;

-	export let date: $$Props["date"];
-	export let month: $$Props["month"];
-	let className: $$Props["class"] = undefined;
+	export let date: $$Props['date'];
+	export let month: $$Props['month'];
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

@@ -17,17 +17,17 @@
 	{date}
 	{month}
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"h-9 w-9 p-0 font-normal ",
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		buttonVariants({ variant: 'ghost' }),
+		'h-9 w-9 p-0 font-normal ',
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
 		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
 		// Outside months
-		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
 		className
 	)}
 	{...$$restProps}
--- a/src/lib/components/ui/calendar/calendar-grid-body.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.GridBodyProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

--- a/src/lib/components/ui/calendar/calendar-grid-head.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.GridHeadProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

--- a/src/lib/components/ui/calendar/calendar-grid-row.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.GridRowProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

-<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>
 	<slot />
 </CalendarPrimitive.GridRow>
--- a/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.GridProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

-<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+<CalendarPrimitive.Grid class={cn('w-full border-collapse space-y-1', className)} {...$$restProps}>
 	<slot />
 </CalendarPrimitive.Grid>
--- a/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.HeadCellProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <CalendarPrimitive.HeadCell
-	class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
+	class={cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/src/lib/components/ui/calendar/calendar-header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.HeaderProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <CalendarPrimitive.Header
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	class={cn('relative flex w-full items-center justify-between pt-1', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.HeadingProps;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <CalendarPrimitive.Heading
 	let:headingValue
-	class={cn("text-sm font-medium", className)}
+	class={cn('text-sm font-medium', className)}
 	{...$$restProps}
 >
 	<slot {headingValue}>
--- a/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/src/lib/components/ui/calendar/calendar-months.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement>;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <div
-	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.NextButtonProps;
 	type $$Events = CalendarPrimitive.NextButtonEvents;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <CalendarPrimitive.NextButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant: 'outline' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}
--- a/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.PrevButtonProps;
 	type $$Events = CalendarPrimitive.PrevButtonEvents;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <CalendarPrimitive.PrevButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant: 'outline' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}
--- a/src/lib/components/ui/calendar/calendar.svelte
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import * as Calendar from './index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CalendarPrimitive.Props;

 	type $$Events = CalendarPrimitive.Events;

-	export let value: $$Props["value"] = undefined;
-	export let placeholder: $$Props["placeholder"] = undefined;
-	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+	export let value: $$Props['value'] = undefined;
+	export let placeholder: $$Props['placeholder'] = undefined;
+	export let weekdayFormat: $$Props['weekdayFormat'] = 'short';

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

@@ -19,7 +19,7 @@
 	bind:value
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	class={cn('p-3', className)}
 	{...$$restProps}
 	on:keydown
 	let:months
--- a/src/lib/components/ui/calendar/index.ts
+++ b/src/lib/components/ui/calendar/index.ts
@@ -1,16 +1,16 @@
-import Root from "./calendar.svelte";
-import Cell from "./calendar-cell.svelte";
-import Day from "./calendar-day.svelte";
-import Grid from "./calendar-grid.svelte";
-import Header from "./calendar-header.svelte";
-import Months from "./calendar-months.svelte";
-import GridRow from "./calendar-grid-row.svelte";
-import Heading from "./calendar-heading.svelte";
-import GridBody from "./calendar-grid-body.svelte";
-import GridHead from "./calendar-grid-head.svelte";
-import HeadCell from "./calendar-head-cell.svelte";
-import NextButton from "./calendar-next-button.svelte";
-import PrevButton from "./calendar-prev-button.svelte";
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';

 export {
 	Day,
@@ -26,5 +26,5 @@ export {
 	NextButton,
 	PrevButton,
 	//
-	Root as Calendar,
+	Root as Calendar
 };
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement>;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLParagraphElement>;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </p>
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement>;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	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 p-6", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
 	<slot />
 </div>
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from './index.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
 	};

-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
+	let className: $$Props['class'] = undefined;
+	export let tag: $$Props['tag'] = 'h3';
 	export { className as class };
 </script>

 <svelte:element
 	this={tag}
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement>;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>

 <div
-	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+	class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
 	{...$$restProps}
 >
 	<slot />
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,9 +1,9 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';

 export {
 	Root,
@@ -18,7 +18,7 @@ export {
 	Description as CardDescription,
 	Footer as CardFooter,
 	Header as CardHeader,
-	Title as CardTitle,
+	Title as CardTitle
 };

-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
--- a/src/lib/components/ui/carousel/carousel-content.svelte
+++ b/src/lib/components/ui/carousel/carousel-content.svelte
@@ -1,32 +1,32 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import emblaCarouselSvelte from "embla-carousel-svelte";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
+	import { getEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement>;

 	let className: string | undefined | null = undefined;
 	export { className as class };

-	const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
+	const { orientation, options, plugins, onInit } = getEmblaContext('<Carousel.Content/>');
 </script>

 <div
 	class="overflow-hidden"
 	use:emblaCarouselSvelte={{
 		options: {
-			container: "[data-embla-container]",
-			slides: "[data-embla-slide]",
+			container: '[data-embla-container]',
+			slides: '[data-embla-slide]',
 			...$options,
-			axis: $orientation === "horizontal" ? "x" : "y",
+			axis: $orientation === 'horizontal' ? 'x' : 'y'
 		},
-		plugins: $plugins,
+		plugins: $plugins
 	}}
 	on:emblaInit={onInit}
 >
 	<div
-		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		class={cn('flex', $orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
 		data-embla-container=""
 		{...$$restProps}
 	>
--- a/src/lib/components/ui/carousel/carousel-item.svelte
+++ b/src/lib/components/ui/carousel/carousel-item.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = HTMLAttributes<HTMLDivElement>;
 	let className: string | undefined | null = undefined;
 	export { className as class };

-	const { orientation } = getEmblaContext("<Carousel.Item/>");
+	const { orientation } = getEmblaContext('<Carousel.Item/>');
 </script>

 <div
 	role="group"
 	aria-roledescription="slide"
 	class={cn(
-		"min-w-0 shrink-0 grow-0 basis-full",
-		$orientation === "horizontal" ? "pl-4" : "pt-4",
+		'min-w-0 shrink-0 grow-0 basis-full',
+		$orientation === 'horizontal' ? 'pl-4' : 'pt-4',
 		className
 	)}
 	data-embla-slide=""
--- a/src/lib/components/ui/carousel/carousel-next.svelte
+++ b/src/lib/components/ui/carousel/carousel-next.svelte
@@ -1,32 +1,28 @@
 <script lang="ts">
-	import ArrowRight from "lucide-svelte/icons/arrow-right";
-	import type { VariantProps } from "tailwind-variants";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "$lib/utils.js";
-	import {
-		Button,
-		type Props,
-		type buttonVariants,
-	} from "$lib/components/ui/button/index.js";
+	import ArrowRight from 'lucide-svelte/icons/arrow-right';
+	import type { VariantProps } from 'tailwind-variants';
+	import { getEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';
+	import { Button, type Props, type buttonVariants } from '$lib/components/ui/button/index.js';

 	type $$Props = Props;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
-	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	export let variant: VariantProps<typeof buttonVariants>['variant'] = 'outline';
+	export let size: VariantProps<typeof buttonVariants>['size'] = 'icon';
 	const { orientation, canScrollNext, scrollNext, handleKeyDown } =
-		getEmblaContext("<Carousel.Next/>");
+		getEmblaContext('<Carousel.Next/>');
 </script>

 <Button
 	{variant}
 	{size}
 	class={cn(
-		"absolute h-8 w-8 touch-manipulation rounded-full",
-		$orientation === "horizontal"
-			? "-right-12 top-1/2 -translate-y-1/2"
-			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+		'absolute h-8 w-8 touch-manipulation rounded-full',
+		$orientation === 'horizontal'
+			? '-right-12 top-1/2 -translate-y-1/2'
+			: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
 		className
 	)}
 	disabled={!$canScrollNext}
--- a/src/lib/components/ui/carousel/carousel-previous.svelte
+++ b/src/lib/components/ui/carousel/carousel-previous.svelte
@@ -1,33 +1,29 @@
 <script lang="ts">
-	import ArrowLeft from "lucide-svelte/icons/arrow-left";
-	import type { VariantProps } from "tailwind-variants";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "$lib/utils.js";
-	import {
-		Button,
-		type Props,
-		type buttonVariants,
-	} from "$lib/components/ui/button/index.js";
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	import type { VariantProps } from 'tailwind-variants';
+	import { getEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';
+	import { Button, type Props, type buttonVariants } from '$lib/components/ui/button/index.js';

 	type $$Props = Props;

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
-	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	export let variant: VariantProps<typeof buttonVariants>['variant'] = 'outline';
+	export let size: VariantProps<typeof buttonVariants>['size'] = 'icon';

 	const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
-		getEmblaContext("<Carousel.Previous/>");
+		getEmblaContext('<Carousel.Previous/>');
 </script>

 <Button
 	{variant}
 	{size}
 	class={cn(
-		"absolute h-8 w-8 touch-manipulation rounded-full",
-		$orientation === "horizontal"
-			? "-left-12 top-1/2 -translate-y-1/2"
-			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+		'absolute h-8 w-8 touch-manipulation rounded-full',
+		$orientation === 'horizontal'
+			? '-left-12 top-1/2 -translate-y-1/2'
+			: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
 		className
 	)}
 	disabled={!$canScrollPrev}
--- a/src/lib/components/ui/carousel/carousel.svelte
+++ b/src/lib/components/ui/carousel/carousel.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { writable } from "svelte/store";
-	import { onDestroy } from "svelte";
-	import { type CarouselAPI, type CarouselProps, setEmblaContext } from "./context.js";
-	import { cn } from "$lib/utils.js";
+	import { writable } from 'svelte/store';
+	import { onDestroy } from 'svelte';
+	import { type CarouselAPI, type CarouselProps, setEmblaContext } from './context.js';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CarouselProps;

 	export let opts = {};
-	export let plugins: NonNullable<$$Props["plugins"]> = [];
-	export let api: $$Props["api"] = undefined;
-	export let orientation: NonNullable<$$Props["orientation"]> = "horizontal";
+	export let plugins: NonNullable<$$Props['plugins']> = [];
+	export let api: $$Props['api'] = undefined;
+	export let orientation: NonNullable<$$Props['orientation']> = 'horizontal';

-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };

 	const apiStore = writable<CarouselAPI | undefined>(undefined);
@@ -45,15 +45,15 @@

 	$: if (api) {
 		onSelect(api);
-		api.on("select", onSelect);
-		api.on("reInit", onSelect);
+		api.on('select', onSelect);
+		api.on('reInit', onSelect);
 	}

 	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === "ArrowLeft") {
+		if (e.key === 'ArrowLeft') {
 			e.preventDefault();
 			scrollPrev();
-		} else if (e.key === "ArrowRight") {
+		} else if (e.key === 'ArrowRight') {
 			e.preventDefault();
 			scrollNext();
 		}
@@ -72,7 +72,7 @@
 		onInit,
 		scrollSnaps: scrollSnapsStore,
 		selectedIndex: selectedIndexStore,
-		scrollTo,
+		scrollTo
 	});

 	function onInit(event: CustomEvent<CarouselAPI>) {
@@ -82,12 +82,12 @@
 	}

 	onDestroy(() => {
-		api?.off("select", onSelect);
+		api?.off('select', onSelect);
 	});
 </script>

 <div
-	class={cn("relative", className)}
+	class={cn('relative', className)}
 	on:mouseenter
 	on:mouseleave
 	role="region"
--- a/src/lib/components/ui/carousel/context.ts
+++ b/src/lib/components/ui/carousel/context.ts
@@ -1,11 +1,11 @@
-import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
-import type emblaCarouselSvelte from "embla-carousel-svelte";
-import { getContext, hasContext, setContext } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-import type { Readable, Writable } from "svelte/store";
+import type { EmblaCarouselSvelteType } from 'embla-carousel-svelte';
+import type emblaCarouselSvelte from 'embla-carousel-svelte';
+import { getContext, hasContext, setContext } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Readable, Writable } from 'svelte/store';

 export type CarouselAPI =
-	NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
+	NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (
 		evt: CustomEvent<infer CarouselAPI>
 	) => void
 		? CarouselAPI
@@ -13,8 +13,8 @@ export type CarouselAPI =

 type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;

-export type CarouselOptions = EmblaCarouselConfig["options"];
-export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+export type CarouselOptions = EmblaCarouselConfig['options'];
+export type CarouselPlugins = EmblaCarouselConfig['plugins'];

 ////

@@ -22,14 +22,14 @@ export type CarouselProps = {
 	opts?: CarouselOptions;
 	plugins?: CarouselPlugins;
 	api?: CarouselAPI;
-	orientation?: "horizontal" | "vertical";
+	orientation?: 'horizontal' | 'vertical';
 } & HTMLAttributes<HTMLDivElement>;

-const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');

 type EmblaContext = {
 	api: Writable<CarouselAPI | undefined>;
-	orientation: Writable<"horizontal" | "vertical">;
+	orientation: Writable<'horizontal' | 'vertical'>;
 	scrollNext: () => void;
 	scrollPrev: () => void;
 	canScrollNext: Readable<boolean>;
@@ -48,7 +48,7 @@ export function setEmblaContext(config: EmblaContext): EmblaContext {
 	return config;
 }

-export function getEmblaContext(name = "This component") {
+export function getEmblaContext(name = 'This component') {
 	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
 		throw new Error(`${name} must be used within a <Carousel.Root> component`);
 	}
--- a/src/lib/components/ui/carousel/index.ts
+++ b/src/lib/components/ui/carousel/index.ts
@@ -1,5 +1,5 @@
-export { default as Root } from "./carousel.svelte";
-export { default as Content } from "./carousel-content.svelte";
-export { default as Item } from "./carousel-item.svelte";
-export { default as Previous } from "./carousel-previous.svelte";
-export { default as Next } from "./carousel-next.svelte";
+export { default as Root } from './carousel.svelte';
+export { default as Content } from './carousel-content.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as Previous } from './carousel-previous.svelte';
+export { default as Next } from './carousel-next.svelte';
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
-	import Minus from "lucide-svelte/icons/minus";
-	import { cn } from "$lib/utils.js";
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import Check from 'lucide-svelte/icons/check';
+	import Minus from 'lucide-svelte/icons/minus';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CheckboxPrimitive.Props;
 	type $$Events = CheckboxPrimitive.Events;

-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = false;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = false;
 	export { className as class };
 </script>

 <CheckboxPrimitive.Root
 	class={cn(
-		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
 		className
 	)}
 	bind:checked
@@ -22,7 +22,7 @@
 	on:click
 >
 	<CheckboxPrimitive.Indicator
-		class={cn("flex h-4 w-4 items-center justify-center text-current")}
+		class={cn('flex h-4 w-4 items-center justify-center text-current')}
 		let:isChecked
 		let:isIndeterminate
 	>
--- a/src/lib/components/ui/checkbox/index.ts
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export {
 	Root,
 	//
-	Root as Checkbox,
+	Root as Checkbox
 };
--- a/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-	import { slide } from "svelte/transition";
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+	import { slide } from 'svelte/transition';

 	type $$Props = CollapsiblePrimitive.ContentProps;

-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
+	export let transition: $$Props['transition'] = slide;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
 	};
 </script>

--- a/src/lib/components/ui/collapsible/index.ts
+++ b/src/lib/components/ui/collapsible/index.ts
@@ -1,5 +1,5 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-import Content from "./collapsible-content.svelte";
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+import Content from './collapsible-content.svelte';

 const Root = CollapsiblePrimitive.Root;
 const Trigger = CollapsiblePrimitive.Trigger;
@@ -11,5 +11,5 @@ export {
 	//
 	Root as Collapsible,
 	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger,
+	Trigger as CollapsibleTrigger
 };
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { Dialog as DialogPrimitive } from "bits-ui";
-	import type { Command as CommandPrimitive } from "cmdk-sv";
-	import Command from "./command.svelte";
-	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import type { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
+	import Command from './command.svelte';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';

 	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;

-	export let open: $$Props["open"] = false;
-	export let value: $$Props["value"] = undefined;
+	export let open: $$Props['open'] = false;
+	export let value: $$Props['value'] = undefined;
 </script>

 <Dialog.Root bind:open {...$$restProps}>
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CommandPrimitive.EmptyProps;
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>

-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
+<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
 	<slot />
 </CommandPrimitive.Empty>
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils.js';
 	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}
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import Search from "lucide-svelte/icons/search";
-	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import Search from 'lucide-svelte/icons/search';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CommandPrimitive.InputProps;

 	let className: string | undefined | null = undefined;
 	export { className as class };
-	export let value: string = "";
+	export let value: string = '';
 </script>

 <div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
 	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+			'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		{...$$restProps}
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/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.js";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CommandPrimitive.ItemProps;

@@ -13,7 +13,7 @@
 <CommandPrimitive.Item
 	{asChild}
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'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}
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/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.js";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils.js';

 	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 />
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/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.js";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils.js';

 	type $$Props = CommandPrimitive.SeparatorProps;
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>

-<CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} {...$$restProps} />
+<CommandPrimitive.Separator class={cn('-mx-1 h-px bg-border', className)} {...$$restProps} />
--- a/Show More
+++ b/Show More