problem: style is not uniform

.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

.lintstagedrc

@@ -1,6 +1,6 @@
 {
-  "*.{js,ts,svelte,css,scss,postcss,md,json}": [
+	"*.{js,ts,svelte,css,scss,postcss,md,json}": [
-    "prettier --write --plugin-search-dir=.",
+		"prettier --write --plugin-search-dir=.",
-    "prettier --check --plugin-search-dir=."
+		"prettier --check --plugin-search-dir=."
-  ],
+	]
 }

README.md

@@ -1,8 +1,10 @@
 # Hypergolic
+
 A nostrocket client
 
 ## Pull Requests
-Please only solve ONE problem at a time. 
+
+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

components.json

@@ -11,4 +11,4 @@
 		"utils": "$lib/utils"
 	},
 	"typescript": true
-}
+}

src/app.css

@@ -1,58 +1,58 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
+	:root {
-    --background: 0 0% 100%;
+		--background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+		--foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
+		--card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+		--card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
+		--popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
+		--popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
+		--primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
+		--primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
+		--secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
+		--secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
+		--muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
+		--muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
+		--accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+		--accent-foreground: 24 9.8% 10%;
-    --destructive: 0 72.22% 50.59%;
+		--destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 60 9.1% 97.8%;
+		--destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
+		--border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+		--ring: 24.6 95% 53.1%;
-    --radius: 0.5rem;
+		--radius: 0.5rem;
-  }
+	}
-  .dark {
+	.dark {
-    --background: 20 14.3% 4.1%;
+		--background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+		--foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
+		--card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
+		--card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
+		--popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
+		--popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
+		--primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
+		--primary-foreground: 60 9.1% 97.8%;
-    --secondary: 12 6.5% 15.1%;
+		--secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
+		--secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
+		--muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
+		--muted-foreground: 24 5.4% 63.9%;
-    --accent: 12 6.5% 15.1%;
+		--accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
+		--accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
+		--destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
+		--destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
+		--border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+		--ring: 20.5 90.2% 48.2%;
-  }
+	}
 }
- 
+
 @layer base {
-  * {
+	* {
-    @apply border-border;
+		@apply border-border;
-  }
+	}
-  body {
+	body {
-    @apply bg-background text-foreground;
+		@apply bg-background text-foreground;
-  }
+	}
-}
+}

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>

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(['cover', image]);
-		e.tags.push(['a', `31108:${rocketEvent.pubkey}:${rocketEvent.dTag}`])
+		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" />

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) {
@@ -25,18 +25,18 @@
 		if (!author) {
 			throw new Error('no current user');
 		}
-        e.author = author;
+		e.author = author;
-        e.kind = 31108;
+		e.kind = 31108;
-        e.created_at = Math.floor(new Date().getTime() / 1000);
+		e.created_at = Math.floor(new Date().getTime() / 1000);
-        //todo validate d tag
+		//todo validate d tag
-        e.tags.push(["d", name])
+		e.tags.push(['d', name]);
-        e.tags.push(["ruleset", "334000"])
+		e.tags.push(['ruleset', '334000']);
-		e.tags.push(["ignition", "this"])
+		e.tags.push(['ignition', 'this']);
-		e.tags.push(["parent", "this"])
+		e.tags.push(['parent', 'this']);
-        e.publish().then((x)=>{
+		e.publish().then((x) => {
-            console.log(x)
+			console.log(x);
-            goto(`${base}/rockets/${getRocketURL(e)}`)
+			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>

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">
+	<div class="flex flex-col items-center gap-1 text-center">
-      <h3 class="text-2xl font-bold tracking-tight">You have no products</h3>
+		<h3 class="text-2xl font-bold tracking-tight">You have no products</h3>
-      <p class="text-sm text-muted-foreground">
+		<p class="text-sm text-muted-foreground">You can start selling as soon as you add a product.</p>
-        You can start selling as soon as you add a product.
+		<Button class="mt-4">Add Product</Button>
-      </p>
+	</div>
-      <Button class="mt-4">Add Product</Button>
+</div>
-    </div>
-  </div>

src/components/Login.svelte

@@ -1,56 +1,57 @@
 <script lang="ts">
-	import { ndk } from "$lib/ndk";
+	import { ndk } from '$lib/ndk';
-	import { Button } from "@/components/ui/button";
+	import { Button } from '@/components/ui/button';
-    import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
-    import { Avatar } from "@nostr-dev-kit/ndk-svelte-components";
+	import { Avatar } from '@nostr-dev-kit/ndk-svelte-components';
-	import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
+	import { NDKNip07Signer } from '@nostr-dev-kit/ndk';
-	import { onMount } from "svelte";
+	import { onMount } from 'svelte';
 
-    onMount(() => {
+	onMount(() => {
-        if (localStorage.getItem("signed-in")) {
+		if (localStorage.getItem('signed-in')) {
-            nip07();
+			nip07();
-        }
+		}
-    })
+	});
-  $: pubkey = ""
+	$: pubkey = '';
 
-    async function nip07() {
+	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 {
+		try {
-            
+			const signer = new NDKNip07Signer();
-            const signer = new NDKNip07Signer();
+			const user = await signer.blockUntilReady();
-            const user = await signer.blockUntilReady();
+
-            
+			if (user) {
-            if (user) {
+				pubkey = user.pubkey;
-                pubkey = user.pubkey
+				$ndk.signer = signer;
-                $ndk.signer = signer;
+				$ndk = $ndk;
-                $ndk = $ndk
+				localStorage.setItem('signed-in', 'true');
-                localStorage.setItem("signed-in", "true");
+			}
-            }
+		} catch (e) {
-        } catch (e) {
+			alert(e);
-            alert(e);
+		}
-        }
+	}
-    }
 </script>
+
 {#if !$ndk.signer}
-<Button on:click={nip07}>
+	<Button on:click={nip07}>
-    <span class="hidden sm:block">Sign in</span>
+		<span class="hidden sm:block">Sign in</span>
-</Button>
+	</Button>
 {:else}
-<DropdownMenu.Root>
+	<DropdownMenu.Root>
-<DropdownMenu.Trigger asChild let:builder>
+		<DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="secondary" size="icon" class="rounded-full">
+			<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>
+				<span class="sr-only">Toggle user menu</span>
-    </Button>
+			</Button>
-</DropdownMenu.Trigger>
+		</DropdownMenu.Trigger>
-<DropdownMenu.Content align="end">
+		<DropdownMenu.Content align="end">
-    <DropdownMenu.Label>My Account</DropdownMenu.Label>
+			<DropdownMenu.Label>My Account</DropdownMenu.Label>
-    <DropdownMenu.Separator />
+			<DropdownMenu.Separator />
-    <DropdownMenu.Item>Settings</DropdownMenu.Item>
+			<DropdownMenu.Item>Settings</DropdownMenu.Item>
-    <DropdownMenu.Item>Support</DropdownMenu.Item>
+			<DropdownMenu.Item>Support</DropdownMenu.Item>
-    <DropdownMenu.Separator />
+			<DropdownMenu.Separator />
-    <DropdownMenu.Item>Logout</DropdownMenu.Item>
+			<DropdownMenu.Item>Logout</DropdownMenu.Item>
-</DropdownMenu.Content>
+		</DropdownMenu.Content>
-</DropdownMenu.Root>
+	</DropdownMenu.Root>
 {/if}

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)) {
+		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 {
+		} 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
+<a href="{base}/rockets" class={getClass('rockets')}>
-	href="{base}/rockets"
-	class={getClass("rockets")}
->
 	<Rocket class={iconClass} />
 	Rockets
 </a>
-<a
+<a href="##" class={getClass('problems')}>
-	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
+<a href="{base}/products" class={getClass('products')}>
-	href="{base}/products"
-	class={getClass("products")}
->
 	<Package class={iconClass} />
 	Products
 </a>
-<a
+<a href="##" class={getClass('people')}>
-	href="##"
-	class={getClass("people")}
->
 	<Users class={iconClass} />
 	People
 </a>
 <Separator />
-<a
+<a href="##" class={getClass('inbox')}>
-	href="##"
-	class={getClass("inbox")}
->
 	<Mail class={iconClass} />
 	Inbox
 </a>

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>
@@ -33,6 +39,6 @@
 	<main
 		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} />
+		<MeritSummaryCard {rocket} {merit} />
-</main>
+	</main>
 </div>

src/components/MeritSummaryCard.svelte

@@ -66,14 +66,14 @@
 
 	let rocketUpdates = derived([votes, currentUser], ([$votes, $currentUser]) => {
 		let events: NDKEvent[] = [];
-		if (
+		if ($currentUser && parsedRocket && parsedRocket.VotePowerForPubkey($currentUser.pubkey) > 0) {
-			$currentUser &&
+			let votes = new Votes(Array.from($votes, ([_, v]) => v));
-			parsedRocket &&
+			let result = votes.Results().Result(parsedRocket);
-			parsedRocket.VotePowerForPubkey($currentUser.pubkey) > 0
+			if (
-		) {
+				result &&
-			let votes = new Votes(Array.from($votes, ([_, v])=>(v)))
+				result == 'ratify' &&
-			let result = votes.Results().Result(parsedRocket)
+				!parsedRocket.ApprovedMeritRequests().get(votes.Request)
-			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">

src/components/MeritsAndSatflow.svelte

@@ -1,44 +1,42 @@
 <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";
+	export let rocket: NDKEvent;
-	import Pie from "./Pie.svelte";
-	import * as Table from "@/components/ui/table";
-	import type { NDKEvent } from "@nostr-dev-kit/ndk";
-
-    export let rocket:NDKEvent;
-
 </script>
+
 <Card.Root class="sm:col-span-3">
-    <Card.Header class="pb-3">
+	<Card.Header class="pb-3">
-      <Card.Title>Merits and Satflow</Card.Title>
+		<Card.Title>Merits and Satflow</Card.Title>
-      <Card.Description class="grid grid-cols-2">
+		<Card.Description class="grid grid-cols-2">
-        <div class=" grid-cols-1">
+			<div class=" grid-cols-1">
-        This graph displays the Meritization of equity in {rocket.getMatchingTags('d')[0][1]}
+				This graph displays the Meritization of equity in {rocket.getMatchingTags('d')[0][1]}
-        <Pie />
+				<Pie />
-      </div>
+			</div>
-      <div class=" grid-cols-1">
+			<div class=" grid-cols-1">
-        <Table.Root>
+				<Table.Root>
-          <Table.Header>
+					<Table.Header>
-            <Table.Row>
+						<Table.Row>
-              <Table.Head>Participant</Table.Head>
+							<Table.Head>Participant</Table.Head>
-              <Table.Head class="hidden md:table-cell">Merits</Table.Head>
+							<Table.Head class="hidden md:table-cell">Merits</Table.Head>
-              <Table.Head class="text-right">Sats Received</Table.Head>
+							<Table.Head class="text-right">Sats Received</Table.Head>
-            </Table.Row>
+						</Table.Row>
-          </Table.Header>
+					</Table.Header>
-          <Table.Body>
+					<Table.Body>
-            <Table.Row class=" bg-red-800">
+						<Table.Row class=" bg-red-800">
-              <Table.Cell>
+							<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">liam@example.com</div>
+								<div class="hidden text-sm text-muted-foreground md:inline">liam@example.com</div>
-              </Table.Cell>
+							</Table.Cell>
-              <Table.Cell class="hidden md:table-cell">17%</Table.Cell>
+							<Table.Cell class="hidden md:table-cell">17%</Table.Cell>
-              <Table.Cell class="text-right">250k</Table.Cell>
+							<Table.Cell class="text-right">250k</Table.Cell>
-            </Table.Row>
+						</Table.Row>
-          </Table.Body>
+					</Table.Body>
-        </Table.Root>
+				</Table.Root>
-      </div>
+			</div>
-      </Card.Description>
+		</Card.Description>
-    </Card.Header>
+	</Card.Header>
-    <Card.Footer>
+	<Card.Footer></Card.Footer>
-    </Card.Footer>
+</Card.Root>
-  </Card.Root>

src/components/PayNow.svelte

@@ -9,29 +9,33 @@
 	import Todo from './Todo.svelte';
 	import { requestProvider } from 'webln';
 
-    export let product:NDKEvent;
+	export let product: NDKEvent;
-    export let rocket:NDKEvent;
+	export let rocket: NDKEvent;
 
-    function zap() {
+	function zap() {
-        let z = new NDKZap({ndk:$ndk, zappedEvent:rocket, zappedUser: rocket.author})
+		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=>{
+		z.createZapRequest(
-            if (invoice) {
+			1000,
-                requestProvider().then((webln)=>{
+			`Purchase of ${product.getMatchingTags('name')[0][1]} from ${rocket.dTag}`,
-                    webln.sendPayment(invoice).then((response)=>{
+			[['product', product.id]]
-                        if (response && response.preimage) {
+		).then((invoice) => {
-                            console.log(response.preimage)
+			if (invoice) {
+				requestProvider().then((webln) => {
+					webln.sendPayment(invoice).then((response) => {
+						if (response && 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>

src/components/Pie.svelte

@@ -1,106 +1,100 @@
 <script lang="ts">
-    import { Card, Chart } from 'flowbite-svelte';
+	import { Card, Chart } from 'flowbite-svelte';
-  
-    const options = {
-      series: [35.1, 23.5, 2.4, 5.4],
-      colors: ['#9b1c1c', '#16BDCA', '#FDBA8C', '#E74694'],
-      chart: {
-        height: 320,
-        width: '100%',
-        type: 'donut'
-      },
-      stroke: {
-        colors: ['transparent'],
-        lineCap: ''
-      },
-      plotOptions: {
-        pie: {
-          donut: {
-            labels: {
-              show: true,
-              name: {
-                show: true,
-                fontFamily: 'Inter, sans-serif',
-                offsetY: 20
-              },
-              total: {
-                showAlways: false,
-                show: false,
-                label: 'Merit Distribution',
-                fontFamily: 'Inter, sans-serif',
-                formatter: function (w) {
-                  const sum = w.globals.seriesTotals.reduce((a, b) => {
-                    return a + b;
-                  }, 0);
-                  return `${sum}k`;
-                }
-              },
-              value: {
-                show: true,
-                fontFamily: 'Inter, sans-serif',
-                offsetY: -20,
-                formatter: function (value) {
-                  return value + 'k';
-                }
-              }
-            },
-            size: '40%'
-          }
-        }
-      },
-      grid: {
-        padding: {
-          top: -2
-        }
-      },
-      labels: ['Direct', 'Sponsor', 'Affiliate', 'Email marketing'],
-      dataLabels: {
-        enabled: false
-      },
-      legend: {
-        show: false,
-        position: 'bottom',
-        fontFamily: 'Inter, sans-serif'
-      },
-      yaxis: {
-        
-        labels: {
-          formatter: function (value) {
-            return value + 'k';
-          }
-        }
-      },
-      xaxis: {
-        labels: {
-          formatter: function (value) {
-            return value + 'k';
-          }
-        },
-        axisTicks: {
-          show: false
-        },
-        axisBorder: {
-          show: false
-        }
-      }
-    };
 
-//     <Card>
+	const options = {
-//     <div class="flex justify-between items-start w-full">
+		series: [35.1, 23.5, 2.4, 5.4],
-//       <div class="flex-col items-center">
+		colors: ['#9b1c1c', '#16BDCA', '#FDBA8C', '#E74694'],
-//         <div class="flex items-center mb-1">
+		chart: {
-//           <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white me-1">Merit Distribution</h5>
+			height: 320,
-          
+			width: '100%',
-          
+			type: 'donut'
-//         </div>
+		},
-//       </div>
+		stroke: {
+			colors: ['transparent'],
+			lineCap: ''
+		},
+		plotOptions: {
+			pie: {
+				donut: {
+					labels: {
+						show: true,
+						name: {
+							show: true,
+							fontFamily: 'Inter, sans-serif',
+							offsetY: 20
+						},
+						total: {
+							showAlways: false,
+							show: false,
+							label: 'Merit Distribution',
+							fontFamily: 'Inter, sans-serif',
+							formatter: function (w) {
+								const sum = w.globals.seriesTotals.reduce((a, b) => {
+									return a + b;
+								}, 0);
+								return `${sum}k`;
+							}
+						},
+						value: {
+							show: true,
+							fontFamily: 'Inter, sans-serif',
+							offsetY: -20,
+							formatter: function (value) {
+								return value + 'k';
+							}
+						}
+					},
+					size: '40%'
+				}
+			}
+		},
+		grid: {
+			padding: {
+				top: -2
+			}
+		},
+		labels: ['Direct', 'Sponsor', 'Affiliate', 'Email marketing'],
+		dataLabels: {
+			enabled: false
+		},
+		legend: {
+			show: false,
+			position: 'bottom',
+			fontFamily: 'Inter, sans-serif'
+		},
+		yaxis: {
+			labels: {
+				formatter: function (value) {
+					return value + 'k';
+				}
+			}
+		},
+		xaxis: {
+			labels: {
+				formatter: function (value) {
+					return value + 'k';
+				}
+			},
+			axisTicks: {
+				show: false
+			},
+			axisBorder: {
+				show: false
+			}
+		}
+	};
 
-//     </div>
+	//     <Card>
-// </Card>
+	//     <div class="flex justify-between items-start w-full">
-  
+	//       <div class="flex-col items-center">
-</script>
+	//         <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>
-    <Chart {options} class="py-6" />
+	//       </div>
 
-
+	//     </div>
+	// </Card>
+</script>
+
+<Chart {options} class="py-6" />

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 {
+	function includedInRocket(): boolean {
-		let included = false
+		let included = false;
-		for (let p of rocket.getMatchingTags("product")) {
+		for (let p of rocket.getMatchingTags('product')) {
-			if (p[1].split(":")[0] == product.id) {
+			if (p[1].split(':')[0] == product.id) {
-				included = true
+				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,9 +55,9 @@
 		<Card.Content></Card.Content>
 		<Card.Footer class="flex justify-between">
 			{#if !includedInRocket()}
-			<AddProductToRocket product={product} {rocket} />
+				<AddProductToRocket {product} {rocket} />
 			{:else}
-			<PayNow {product} {rocket} />
+				<PayNow {product} {rocket} />
 			{/if}
 		</Card.Footer>
 	</Card.Root>

src/components/ProductCardFromID.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { ndk } from "@/ndk";
+	import { ndk } from '@/ndk';
-	import type { NDKEvent } from "@nostr-dev-kit/ndk";
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import ProductCard from './ProductCard.svelte';
-    export let productID: string;
+	export let productID: string;
-    export let rocket:NDKEvent;
+	export let rocket: NDKEvent;
-    let productEvent:NDKEvent | undefined;
+	let productEvent: NDKEvent | undefined;
-
-	onMount(()=>{
-        $ndk.fetchEvent(productID).then((e)=>{
-            if (e) {
-                productEvent = e
-            }
-        })
-    })
 
+	onMount(() => {
+		$ndk.fetchEvent(productID).then((e) => {
+			if (e) {
+				productEvent = e;
+			}
+		});
+	});
 </script>
 
 {#if productEvent}
-<ProductCard {rocket} product={productEvent} />
+	<ProductCard {rocket} product={productEvent} />
-{/if}
+{/if}

src/components/ProductFomo.svelte

@@ -26,14 +26,14 @@
 	<Card.Header class="pb-3">
 		<Card.Title>Products and Purchases</Card.Title>
 		<Card.Description class="grid grid-cols-2">
-            {#each $products as product}
+			{#each $products as product}
-			<div class=" grid-cols-1">
+				<div class=" grid-cols-1">
-				<ProductCardFromId {rocket} productID={product.ID} />
+					<ProductCardFromId {rocket} productID={product.ID} />
-			</div>
+				</div>
-			<div class="grid-cols-1">
+				<div class="grid-cols-1">
-				<ProductPurchases {rocket} {product} />
+					<ProductPurchases {rocket} {product} />
-			</div>
+				</div>
-            {/each}
+			{/each}
 		</Card.Description>
 	</Card.Header>
 	<Card.Footer></Card.Footer>

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);
@@ -13,8 +12,6 @@
 
 {#if rocketEvent && rocketProducts.size > 0}
 	{#each rocketProducts as [id, product]}
-    <ProductCardFromID rocket={rocketEvent} productID={product.ID} />
+		<ProductCardFromID rocket={rocketEvent} productID={product.ID} />
 		<ProductPurchases rocket={rocketEvent} {product} />{/each}
 {/if}
-
-

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(()=>{
+	onDestroy(() => {
-        proposals.unsubscribe()
+		proposals.unsubscribe();
-    })
+	});
 
-    let unratified = derived(proposals, ($proposals)=>{
+	let unratified = derived(proposals, ($proposals) => {
-        return $proposals.filter((p)=>{
+		return $proposals.filter((p) => {
-            let found = false;
+			let found = false;
-            for (let product of rocket.getMatchingTags("product")){
+			for (let product of rocket.getMatchingTags('product')) {
-                if (product[1].split(":")[0] == p.id) {
+				if (product[1].split(':')[0] == p.id) {
-                    found = true
+					found = true;
-                }
+				}
-            }
+			}
-            return !found
+			return !found;
-        })
+		});
-    })
+	});
 </script>
 
 {#each $unratified as r}<ProductCard {rocket} product={r} />{/each}

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")
+	//$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
-		<Button on:click={()=>{goto(`${base}/rockets/${getRocketURL(rocketEvent)}`)}}>View Full Rocket<ChevronRight class="h-4 w-4" /></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>

src/components/RocketDashboard copy.svelte

@@ -1,490 +1,401 @@
 <script lang="ts">
-    import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
-    import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-    import Copy from "lucide-svelte/icons/copy";
+	import Copy from 'lucide-svelte/icons/copy';
-    import CreditCard from "lucide-svelte/icons/credit-card";
+	import CreditCard from 'lucide-svelte/icons/credit-card';
-    import EllipsisVertical from "lucide-svelte/icons/ellipsis-vertical";
+	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
-    import File from "lucide-svelte/icons/file";
+	import File from 'lucide-svelte/icons/file';
-    import ListFilter from "lucide-svelte/icons/list-filter";
+	import ListFilter from 'lucide-svelte/icons/list-filter';
-    import Truck from "lucide-svelte/icons/truck";
+	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";
-  
-</script>
 
-
+	import { Badge } from '$lib/components/ui/badge/index.js';
-    
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-    <div class="flex flex-col sm:gap-4">
+	import { Button } from '$lib/components/ui/button/index.js';
-      <header
+	import * as Card from '$lib/components/ui/card/index.js';
-        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"
+	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';
-        <Breadcrumb.Root class="hidden md:flex">
+	import { Separator } from '$lib/components/ui/separator/index.js';
-          <Breadcrumb.List>
+	import * as Table from '$lib/components/ui/table/index.js';
-            <Breadcrumb.Item>
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
-              <Breadcrumb.Link href="##">Rocket Name</Breadcrumb.Link>
+</script>
-            </Breadcrumb.Item>
-            <Breadcrumb.Separator />
-            <Breadcrumb.Item>
-              <Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
-            </Breadcrumb.Item>
-            <Breadcrumb.Separator />
-            <Breadcrumb.Item>
-              <Breadcrumb.Page>Recent Orders</Breadcrumb.Page>
-            </Breadcrumb.Item>
-          </Breadcrumb.List>
-        </Breadcrumb.Root>
-      </header>
-      <main
-        class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3"
-      >
-        <div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-          <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-            <Card.Root class="sm:col-span-2">
-              <Card.Header class="pb-3">
-                <Card.Title>Your Orders</Card.Title>
-                <Card.Description class="max-w-lg text-balance leading-relaxed">
-                  Introducing Our Dynamic Orders Dashboard for Seamless Management and
-                  Insightful Analysis.
-                </Card.Description>
-              </Card.Header>
-              <Card.Footer>
-                <Button>Create New Order</Button>
-              </Card.Footer>
-            </Card.Root>
-            <Card.Root>
-              <Card.Header class="pb-2">
-                <Card.Description>This Week</Card.Description>
-                <Card.Title class="text-4xl">$1329</Card.Title>
-              </Card.Header>
-              <Card.Content>
-                <div class="text-xs text-muted-foreground">+25% from last week</div>
-              </Card.Content>
-              <Card.Footer>
-                <Progress value={25} aria-label="25% increase" />
-              </Card.Footer>
-            </Card.Root>
-            <Card.Root>
-              <Card.Header class="pb-2">
-                <Card.Description>This Month</Card.Description>
-                <Card.Title class="text-3xl">$5,329</Card.Title>
-              </Card.Header>
-              <Card.Content>
-                <div class="text-xs text-muted-foreground">+10% from last month</div>
-              </Card.Content>
-              <Card.Footer>
-                <Progress value={12} aria-label="12% increase" />
-              </Card.Footer>
-            </Card.Root>
-          </div>
-          <Tabs.Root value="week">
-            <div class="flex items-center">
-              <Tabs.List>
-                <Tabs.Trigger value="week">Week</Tabs.Trigger>
-                <Tabs.Trigger value="month">Month</Tabs.Trigger>
-                <Tabs.Trigger value="year">Year</Tabs.Trigger>
-              </Tabs.List>
-              <div class="ml-auto flex items-center gap-2">
-                <DropdownMenu.Root>
-                  <DropdownMenu.Trigger asChild let: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>
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content align="end">
-                    <DropdownMenu.Label>Filter by</DropdownMenu.Label>
-                    <DropdownMenu.Separator />
-                    <DropdownMenu.CheckboxItem checked>
-                      Fulfilled
-                    </DropdownMenu.CheckboxItem>
-                    <DropdownMenu.CheckboxItem>Declined</DropdownMenu.CheckboxItem>
-                    <DropdownMenu.CheckboxItem>Refunded</DropdownMenu.CheckboxItem>
-                  </DropdownMenu.Content>
-                </DropdownMenu.Root>
-                <Button size="sm" variant="outline" class="h-7 gap-1 text-sm">
-                  <File class="h-3.5 w-3.5" />
-                  <span class="sr-only sm:not-sr-only">Export</span>
-                </Button>
-              </div>
-            </div>
-            <Tabs.Content value="week">
-              <Card.Root>
-                <Card.Header class="px-7">
-                  <Card.Title>Orders</Card.Title>
-                  <Card.Description>Recent orders from your store.</Card.Description>
-                </Card.Header>
-                <Card.Content>
-                  <Table.Root>
-                    <Table.Header>
-                      <Table.Row>
-                        <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>
-                        <Table.Head class="text-right">Amount</Table.Head>
-                      </Table.Row>
-                    </Table.Header>
-                    <Table.Body>
-                      <Table.Row class="bg-accent">
-                        <Table.Cell>
-                          <div class="font-medium">Liam Johnson</div>
-                          <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">
-                          <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="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">
-                          <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="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">
-                          <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="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">
-                          <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="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">
-                          <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="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">
-                          <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="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">
-                          <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="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">
-                          <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>
-                  </Table.Root>
-                </Card.Content>
-              </Card.Root>
-            </Tabs.Content>
-          </Tabs.Root>
-        </div>
-        <div>
-          <Card.Root class="overflow-hidden">
-            <Card.Header class="flex flex-row items-start bg-muted/50">
-              <div class="grid gap-0.5">
-                <Card.Title class="group flex items-center gap-2 text-lg">
-                  Order Oe31b70H
-                  <Button
-                    size="icon"
-                    variant="outline"
-                    class="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                    <Copy class="h-3 w-3" />
-                    <span class="sr-only">Copy Order ID</span>
-                  </Button>
-                </Card.Title>
-                <Card.Description>Date: November 23, 2023</Card.Description>
-              </div>
-              <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" />
-                  <span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
-                    Track Order
-                  </span>
-                </Button>
-                <DropdownMenu.Root>
-                  <DropdownMenu.Trigger asChild let:builder>
-                    <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>
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content align="end">
-                    <DropdownMenu.Item>Edit</DropdownMenu.Item>
-                    <DropdownMenu.Item>Export</DropdownMenu.Item>
-                    <DropdownMenu.Separator />
-                    <DropdownMenu.Item>Trash</DropdownMenu.Item>
-                  </DropdownMenu.Content>
-                </DropdownMenu.Root>
-              </div>
-            </Card.Header>
-            <Card.Content class="p-6 text-sm">
-              <div class="grid gap-3">
-                <div class="font-semibold">Order Details</div>
-                <ul class="grid gap-3">
-                  <li class="flex items-center justify-between">
-                    <span class="text-muted-foreground">
-                      Glimmer Lamps x <span>2</span>
-                    </span>
-                    <span>$250.00</span>
-                  </li>
-                  <li class="flex items-center justify-between">
-                    <span class="text-muted-foreground">
-                      Aqua Filters x <span>1</span>
-                    </span>
-                    <span>$49.00</span>
-                  </li>
-                </ul>
-                <Separator class="my-2" />
-                <ul class="grid gap-3">
-                  <li class="flex items-center justify-between">
-                    <span class="text-muted-foreground">Subtotal</span>
-                    <span>$299.00</span>
-                  </li>
-                  <li class="flex items-center justify-between">
-                    <span class="text-muted-foreground">Shipping</span>
-                    <span>$5.00</span>
-                  </li>
-                  <li class="flex items-center justify-between">
-                    <span class="text-muted-foreground">Tax</span>
-                    <span>$25.00</span>
-                  </li>
-                  <li class="flex items-center justify-between font-semibold">
-                    <span class="text-muted-foreground">Total</span>
-                    <span>$329.00</span>
-                  </li>
-                </ul>
-              </div>
-              <Separator class="my-4" />
-              <div class="grid grid-cols-2 gap-4">
-                <div class="grid gap-3">
-                  <div class="font-semibold">Shipping Information</div>
-                  <address class="grid gap-0.5 not-italic text-muted-foreground">
-                    <span>Liam Johnson</span>
-                    <span>1234 Main St.</span>
-                    <span>Anytown, CA 12345</span>
-                  </address>
-                </div>
-                <div class="grid auto-rows-max gap-3">
-                  <div class="font-semibold">Billing Information</div>
-                  <div class="text-muted-foreground">Same as shipping address</div>
-                </div>
-              </div>
-              <Separator class="my-4" />
-              <div class="grid gap-3">
-                <div class="font-semibold">Customer Information</div>
-                <dl class="grid gap-3">
-                  <div class="flex items-center justify-between">
-                    <dt class="text-muted-foreground">Customer</dt>
-                    <dd>Liam Johnson</dd>
-                  </div>
-                  <div class="flex items-center justify-between">
-                    <dt class="text-muted-foreground">Email</dt>
-                    <dd>
-                      <a href="mailto:">liam@acme.com</a>
-                    </dd>
-                  </div>
-                  <div class="flex items-center justify-between">
-                    <dt class="text-muted-foreground">Phone</dt>
-                    <dd>
-                      <a href="tel:">+1 234 567 890</a>
-                    </dd>
-                  </div>
-                </dl>
-              </div>
-              <Separator class="my-4" />
-              <div class="grid gap-3">
-                <div class="font-semibold">Payment Information</div>
-                <dl class="grid gap-3">
-                  <div class="flex items-center justify-between">
-                    <dt class="flex items-center gap-1 text-muted-foreground">
-                      <CreditCard class="h-4 w-4" />
-                      Visa
-                    </dt>
-                    <dd>**** **** **** 4532</dd>
-                  </div>
-                </dl>
-              </div>
-            </Card.Content>
-            <Card.Footer class="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
-              <div class="text-xs text-muted-foreground">
-                Updated <time dateTime="2023-11-23">November 23, 2023</time>
-              </div>
-              <Pagination.Root count={10} class="ml-auto mr-0 w-auto">
-                <Pagination.Content>
-                  <Pagination.Item>
-                    <Button size="icon" variant="outline" class="h-6 w-6">
-                      <ChevronLeft class="h-3.5 w-3.5" />
-                      <span class="sr-only">Previous Order</span>
-                    </Button>
-                  </Pagination.Item>
-                  <Pagination.Item>
-                    <Button size="icon" variant="outline" class="h-6 w-6">
-                      <ChevronRight class="h-3.5 w-3.5" />
-                      <span class="sr-only">Next Order</span>
-                    </Button>
-                  </Pagination.Item>
-                </Pagination.Content>
-              </Pagination.Root>
-            </Card.Footer>
-          </Card.Root>
-        </div>
-      </main>
 
-
+<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>
+					<Breadcrumb.Link href="##">Rocket Name</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator />
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator />
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>Recent Orders</Breadcrumb.Page>
+				</Breadcrumb.Item>
+			</Breadcrumb.List>
+		</Breadcrumb.Root>
+	</header>
+	<main
+		class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3"
+	>
+		<div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+			<div class="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
+				<Card.Root class="sm:col-span-2">
+					<Card.Header class="pb-3">
+						<Card.Title>Your Orders</Card.Title>
+						<Card.Description class="max-w-lg text-balance leading-relaxed">
+							Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful
+							Analysis.
+						</Card.Description>
+					</Card.Header>
+					<Card.Footer>
+						<Button>Create New Order</Button>
+					</Card.Footer>
+				</Card.Root>
+				<Card.Root>
+					<Card.Header class="pb-2">
+						<Card.Description>This Week</Card.Description>
+						<Card.Title class="text-4xl">$1329</Card.Title>
+					</Card.Header>
+					<Card.Content>
+						<div class="text-xs text-muted-foreground">+25% from last week</div>
+					</Card.Content>
+					<Card.Footer>
+						<Progress value={25} aria-label="25% increase" />
+					</Card.Footer>
+				</Card.Root>
+				<Card.Root>
+					<Card.Header class="pb-2">
+						<Card.Description>This Month</Card.Description>
+						<Card.Title class="text-3xl">$5,329</Card.Title>
+					</Card.Header>
+					<Card.Content>
+						<div class="text-xs text-muted-foreground">+10% from last month</div>
+					</Card.Content>
+					<Card.Footer>
+						<Progress value={12} aria-label="12% increase" />
+					</Card.Footer>
+				</Card.Root>
+			</div>
+			<Tabs.Root value="week">
+				<div class="flex items-center">
+					<Tabs.List>
+						<Tabs.Trigger value="week">Week</Tabs.Trigger>
+						<Tabs.Trigger value="month">Month</Tabs.Trigger>
+						<Tabs.Trigger value="year">Year</Tabs.Trigger>
+					</Tabs.List>
+					<div class="ml-auto flex items-center gap-2">
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger asChild let: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>
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Label>Filter by</DropdownMenu.Label>
+								<DropdownMenu.Separator />
+								<DropdownMenu.CheckboxItem checked>Fulfilled</DropdownMenu.CheckboxItem>
+								<DropdownMenu.CheckboxItem>Declined</DropdownMenu.CheckboxItem>
+								<DropdownMenu.CheckboxItem>Refunded</DropdownMenu.CheckboxItem>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+						<Button size="sm" variant="outline" class="h-7 gap-1 text-sm">
+							<File class="h-3.5 w-3.5" />
+							<span class="sr-only sm:not-sr-only">Export</span>
+						</Button>
+					</div>
+				</div>
+				<Tabs.Content value="week">
+					<Card.Root>
+						<Card.Header class="px-7">
+							<Card.Title>Orders</Card.Title>
+							<Card.Description>Recent orders from your store.</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<Table.Root>
+								<Table.Header>
+									<Table.Row>
+										<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>
+										<Table.Head class="text-right">Amount</Table.Head>
+									</Table.Row>
+								</Table.Header>
+								<Table.Body>
+									<Table.Row class="bg-accent">
+										<Table.Cell>
+											<div class="font-medium">Liam Johnson</div>
+											<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">
+											<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="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">
+											<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="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">
+											<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="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">
+											<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="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">
+											<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="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">
+											<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="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">
+											<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="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">
+											<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>
+							</Table.Root>
+						</Card.Content>
+					</Card.Root>
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+		<div>
+			<Card.Root class="overflow-hidden">
+				<Card.Header class="flex flex-row items-start bg-muted/50">
+					<div class="grid gap-0.5">
+						<Card.Title class="group flex items-center gap-2 text-lg">
+							Order Oe31b70H
+							<Button
+								size="icon"
+								variant="outline"
+								class="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
+							>
+								<Copy class="h-3 w-3" />
+								<span class="sr-only">Copy Order ID</span>
+							</Button>
+						</Card.Title>
+						<Card.Description>Date: November 23, 2023</Card.Description>
+					</div>
+					<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" />
+							<span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap"> Track Order </span>
+						</Button>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger asChild let:builder>
+								<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>
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item>Edit</DropdownMenu.Item>
+								<DropdownMenu.Item>Export</DropdownMenu.Item>
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item>Trash</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</Card.Header>
+				<Card.Content class="p-6 text-sm">
+					<div class="grid gap-3">
+						<div class="font-semibold">Order Details</div>
+						<ul class="grid gap-3">
+							<li class="flex items-center justify-between">
+								<span class="text-muted-foreground">
+									Glimmer Lamps x <span>2</span>
+								</span>
+								<span>$250.00</span>
+							</li>
+							<li class="flex items-center justify-between">
+								<span class="text-muted-foreground">
+									Aqua Filters x <span>1</span>
+								</span>
+								<span>$49.00</span>
+							</li>
+						</ul>
+						<Separator class="my-2" />
+						<ul class="grid gap-3">
+							<li class="flex items-center justify-between">
+								<span class="text-muted-foreground">Subtotal</span>
+								<span>$299.00</span>
+							</li>
+							<li class="flex items-center justify-between">
+								<span class="text-muted-foreground">Shipping</span>
+								<span>$5.00</span>
+							</li>
+							<li class="flex items-center justify-between">
+								<span class="text-muted-foreground">Tax</span>
+								<span>$25.00</span>
+							</li>
+							<li class="flex items-center justify-between font-semibold">
+								<span class="text-muted-foreground">Total</span>
+								<span>$329.00</span>
+							</li>
+						</ul>
+					</div>
+					<Separator class="my-4" />
+					<div class="grid grid-cols-2 gap-4">
+						<div class="grid gap-3">
+							<div class="font-semibold">Shipping Information</div>
+							<address class="grid gap-0.5 not-italic text-muted-foreground">
+								<span>Liam Johnson</span>
+								<span>1234 Main St.</span>
+								<span>Anytown, CA 12345</span>
+							</address>
+						</div>
+						<div class="grid auto-rows-max gap-3">
+							<div class="font-semibold">Billing Information</div>
+							<div class="text-muted-foreground">Same as shipping address</div>
+						</div>
+					</div>
+					<Separator class="my-4" />
+					<div class="grid gap-3">
+						<div class="font-semibold">Customer Information</div>
+						<dl class="grid gap-3">
+							<div class="flex items-center justify-between">
+								<dt class="text-muted-foreground">Customer</dt>
+								<dd>Liam Johnson</dd>
+							</div>
+							<div class="flex items-center justify-between">
+								<dt class="text-muted-foreground">Email</dt>
+								<dd>
+									<a href="mailto:">liam@acme.com</a>
+								</dd>
+							</div>
+							<div class="flex items-center justify-between">
+								<dt class="text-muted-foreground">Phone</dt>
+								<dd>
+									<a href="tel:">+1 234 567 890</a>
+								</dd>
+							</div>
+						</dl>
+					</div>
+					<Separator class="my-4" />
+					<div class="grid gap-3">
+						<div class="font-semibold">Payment Information</div>
+						<dl class="grid gap-3">
+							<div class="flex items-center justify-between">
+								<dt class="flex items-center gap-1 text-muted-foreground">
+									<CreditCard class="h-4 w-4" />
+									Visa
+								</dt>
+								<dd>**** **** **** 4532</dd>
+							</div>
+						</dl>
+					</div>
+				</Card.Content>
+				<Card.Footer class="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
+					<div class="text-xs text-muted-foreground">
+						Updated <time dateTime="2023-11-23">November 23, 2023</time>
+					</div>
+					<Pagination.Root count={10} class="ml-auto mr-0 w-auto">
+						<Pagination.Content>
+							<Pagination.Item>
+								<Button size="icon" variant="outline" class="h-6 w-6">
+									<ChevronLeft class="h-3.5 w-3.5" />
+									<span class="sr-only">Previous Order</span>
+								</Button>
+							</Pagination.Item>
+							<Pagination.Item>
+								<Button size="icon" variant="outline" class="h-6 w-6">
+									<ChevronRight class="h-3.5 w-3.5" />
+									<span class="sr-only">Next Order</span>
+								</Button>
+							</Pagination.Item>
+						</Pagination.Content>
+					</Pagination.Root>
+				</Card.Footer>
+			</Card.Root>
+		</div>
+	</main>
+</div>

src/components/RocketDashboard.svelte

@@ -14,9 +14,7 @@
 </script>
 
 <div class="flex flex-col sm:gap-4">
-	<header
+	<header class="flex items-center">
-		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">

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>
+{#if $page.route.id != '/'}
-	<Card.Header class="pt-0 p-4">
+	<Card.Root>
-		<Card.Title>WTF</Card.Title>
+		<Card.Header class="p-4 pt-0">
-		<Card.Description>I'm new to Nostrocket, wtf is this thing all about?</Card.Description>
+			<Card.Title>WTF</Card.Title>
-	</Card.Header>
+			<Card.Description>I'm new to Nostrocket, wtf is this thing all about?</Card.Description>
-	<Card.Content class="pt-0 md:p-4">
+		</Card.Header>
-		<Button on:click={()=>{goto(`${base}/`)}} size="sm" class="w-full">Rocketpill Me</Button>
+		<Card.Content class="pt-0 md:p-4">
-	</Card.Content>
+			<Button
-</Card.Root>
+				on:click={() => {
-{/if}
+					goto(`${base}/`);
+				}}
+				size="sm"
+				class="w-full">Rocketpill Me</Button
+			>
+		</Card.Content>
+	</Card.Root>
+{/if}

src/components/Todo.svelte

@@ -1,20 +1,19 @@
 <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>
 	<Terminal class="h-4 w-4" />
 	<Alert.Title>Todo:</Alert.Title>
 	<Alert.Description>
-        {#if text.length > 1} 
+		{#if text.length > 1}
-        <ul class="list-disc">
+			<ul class="list-disc">
-            {#each text as t}<li>{t}</li>{/each}
+				{#each text as t}<li>{t}</li>{/each}
-        </ul>
+			</ul>
-        {:else}
+		{:else}
-        {text}
+			{text}
-        {/if}
+		{/if}
-        
+	</Alert.Description>
-    </Alert.Description>
 </Alert.Root>

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,19 +52,18 @@
 			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
 		variant="destructive"
 		class="m-2"
 		on:click={() => {
-						if (currentUserHasVotepower) {
+			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
 	>

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,8 +83,8 @@
 			</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>
 	</div>
 </div>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import { slide } from "svelte/transition";
+	import { slide } from 'svelte/transition';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AccordionPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = slide;
+	export let transition: $$Props['transition'] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
-		duration: 200,
+		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}

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AccordionPrimitive.ItemProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let value: $$Props["value"];
+	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>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AccordionPrimitive.TriggerProps;
 	type $$Events = AccordionPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	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}

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

@@ -1,7 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import { Accordion as AccordionPrimitive } from 'bits-ui';
-import Content from "./accordion-content.svelte";
+import Content from './accordion-content.svelte';
-import Item from "./accordion-item.svelte";
+import Item from './accordion-item.svelte';
-import Trigger from "./accordion-trigger.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
 };

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 { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils.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>
 

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 { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils.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

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 { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import * as AlertDialog from "./index.js";
+	import * as AlertDialog from './index.js';
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.ContentProps;
 
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	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}

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 { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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 />

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

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

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

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

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 { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { fade } from "svelte/transition";
+	import { fade } from 'svelte/transition';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = fade;
+	export let transition: $$Props['transition'] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
-		duration: 150,
+		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}
 />

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>

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 { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let level: $$Props["level"] = "h3";
+	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>

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 Title from './alert-dialog-title.svelte';
-import Action from "./alert-dialog-action.svelte";
+import Action from './alert-dialog-action.svelte';
-import Cancel from "./alert-dialog-cancel.svelte";
+import Cancel from './alert-dialog-cancel.svelte';
-import Portal from "./alert-dialog-portal.svelte";
+import Portal from './alert-dialog-portal.svelte';
-import Footer from "./alert-dialog-footer.svelte";
+import Footer from './alert-dialog-footer.svelte';
-import Header from "./alert-dialog-header.svelte";
+import Header from './alert-dialog-header.svelte';
-import Overlay from "./alert-dialog-overlay.svelte";
+import Overlay from './alert-dialog-overlay.svelte';
-import Content from "./alert-dialog-content.svelte";
+import Content from './alert-dialog-content.svelte';
-import Description from "./alert-dialog-description.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
 };

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from "./index.js";
+	import type { HeadingLevel } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		level?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let level: $$Props["level"] = "h5";
+	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 />

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

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

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 Root from './alert.svelte';
-import Description from "./alert-description.svelte";
+import Description from './alert-description.svelte';
-import Title from "./alert-title.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 Variant = VariantProps<typeof alertVariants>['variant'];
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+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
 };

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}>

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

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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 />

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AvatarPrimitive.ImageProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let src: $$Props["src"] = undefined;
+	export let src: $$Props['src'] = undefined;
-	export let alt: $$Props["alt"] = 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}
 />

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AvatarPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let delayMs: $$Props["delayMs"] = 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 />

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

@@ -1,6 +1,6 @@
-import Root from "./avatar.svelte";
+import Root from './avatar.svelte';
-import Image from "./avatar-image.svelte";
+import Image from './avatar-image.svelte';
-import Fallback from "./avatar-fallback.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
 };

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
+	import { type Variant, badgeVariants } from './index.js';
-	import { cn } from "$lib/utils.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}

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

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

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import Ellipsis from 'lucide-svelte/icons/ellipsis';
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 		el?: HTMLSpanElement;
 	};
 
-	export let el: $$Props["el"] = undefined;
+	export let el: $$Props['el'] = undefined;
-	let className: $$Props["class"] = 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" />

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
+	import type { HTMLLiAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLLiAttributes & {
 		el?: HTMLLIElement;
 	};
 
-	export let el: $$Props["el"] = undefined;
+	export let el: $$Props['el'] = undefined;
-	let className: $$Props["class"] = 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>

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

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAnchorAttributes & {
 		el?: HTMLAnchorElement;
 		asChild?: boolean;
 	};
 
-	export let href: $$Props["href"] = undefined;
+	export let href: $$Props['href'] = undefined;
-	export let el: $$Props["el"] = undefined;
+	export let el: $$Props['el'] = undefined;
-	export let asChild: $$Props["asChild"] = false;
+	export let asChild: $$Props['asChild'] = false;
-	let className: $$Props["class"] = undefined;
+	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>
 

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLOlAttributes } from "svelte/elements";
+	import type { HTMLOlAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLOlAttributes & {
 		el?: HTMLOListElement;
 	};
 
-	export let el: $$Props["el"] = undefined;
+	export let el: $$Props['el'] = undefined;
-	let className: $$Props["class"] = 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}

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 		el?: HTMLSpanElement;
 	};
 
-	export let el: $$Props["el"] = undefined;
+	export let el: $$Props['el'] = undefined;
-	export let className: $$Props["class"] = 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 />

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

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
+	import type { HTMLLiAttributes } from 'svelte/elements';
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLLiAttributes & {
 		el?: HTMLLIElement;
 	};
 
-	export let el: $$Props["el"] = undefined;
+	export let el: $$Props['el'] = undefined;
-	let className: $$Props["class"] = 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}
 >

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

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

@@ -1,10 +1,10 @@
-import Root from "./breadcrumb.svelte";
+import Root from './breadcrumb.svelte';
-import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Ellipsis from './breadcrumb-ellipsis.svelte';
-import Item from "./breadcrumb-item.svelte";
+import Item from './breadcrumb-item.svelte';
-import Separator from "./breadcrumb-separator.svelte";
+import Separator from './breadcrumb-separator.svelte';
-import Link from "./breadcrumb-link.svelte";
+import Link from './breadcrumb-link.svelte';
-import List from "./breadcrumb-list.svelte";
+import List from './breadcrumb-list.svelte';
-import Page from "./breadcrumb-page.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
 };

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
+	import { Button as ButtonPrimitive } from 'bits-ui';
-	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { type Events, type Props, buttonVariants } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = Props;
 	type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let variant: $$Props["variant"] = "default";
+	export let variant: $$Props['variant'] = 'default';
-	export let size: $$Props["size"] = "default";
+	export let size: $$Props['size'] = 'default';
-	export let builders: $$Props["builders"] = [];
+	export let builders: $$Props['builders'] = [];
 	export { className as class };
 </script>
 

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

@@ -1,34 +1,33 @@
-import { type VariantProps, tv } from "tailwind-variants";
+import { type VariantProps, tv } from 'tailwind-variants';
-import type { Button as ButtonPrimitive } from "bits-ui";
+import type { Button as ButtonPrimitive } from 'bits-ui';
-import Root from "./button.svelte";
+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",
+			default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-			outline:
+			outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
-			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: 'text-primary underline-offset-4 hover:underline'
-			link: "text-primary underline-offset-4 hover:underline",
 		},
 		size: {
-			default: "h-10 px-4 py-2",
+			default: 'h-10 px-4 py-2',
-			sm: "h-9 rounded-md px-3",
+			sm: 'h-9 rounded-md px-3',
-			lg: "h-11 rounded-md px-8",
+			lg: 'h-11 rounded-md px-8',
-			icon: "h-10 w-10",
+			icon: 'h-10 w-10'
-		},
+		}
 	},
 	defaultVariants: {
-		variant: "default",
+		variant: 'default',
-		size: "default",
+		size: 'default'
-	},
+	}
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
-type Size = VariantProps<typeof buttonVariants>["size"];
+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
 };

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = CalendarPrimitive.CellProps;
 
-	export let date: $$Props["date"];
+	export let date: $$Props['date'];
-	let className: $$Props["class"] = undefined;
+	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}

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = CalendarPrimitive.DayProps;
 	type $$Events = CalendarPrimitive.DayEvents;
 
-	export let date: $$Props["date"];
+	export let date: $$Props['date'];
-	export let month: $$Props["month"];
+	export let month: $$Props['month'];
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,17 +17,17 @@
 	{date}
 	{month}
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
+		buttonVariants({ variant: 'ghost' }),
-		"h-9 w-9 p-0 font-normal ",
+		'h-9 w-9 p-0 font-normal ',
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		'[&[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}

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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>
 

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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>
 

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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>

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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>

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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 />

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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 />

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	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}>

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

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

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

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils.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" }),
+		buttonVariants({ variant: 'outline' }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}

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

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

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import * as Calendar from "./index.js";
+	import * as Calendar from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = CalendarPrimitive.Props;
 
 	type $$Events = CalendarPrimitive.Events;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
-	export let placeholder: $$Props["placeholder"] = undefined;
+	export let placeholder: $$Props['placeholder'] = undefined;
-	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+	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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from "./index.js";
+	import type { HeadingLevel } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let tag: $$Props["tag"] = "h3";
+	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 />

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

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

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

@@ -1,9 +1,9 @@
-import Root from "./card.svelte";
+import Root from './card.svelte';
-import Content from "./card-content.svelte";
+import Content from './card-content.svelte';
-import Description from "./card-description.svelte";
+import Description from './card-description.svelte';
-import Footer from "./card-footer.svelte";
+import Footer from './card-footer.svelte';
-import Header from "./card-header.svelte";
+import Header from './card-header.svelte';
-import Title from "./card-title.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';

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

@@ -1,32 +1,32 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
-	import { getEmblaContext } from "./context.js";
+	import { getEmblaContext } from './context.js';
-	import { cn } from "$lib/utils.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]",
+			container: '[data-embla-container]',
-			slides: "[data-embla-slide]",
+			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}
 	>

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

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { getEmblaContext } from "./context.js";
+	import { getEmblaContext } from './context.js';
-	import { cn } from "$lib/utils.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",
+		'min-w-0 shrink-0 grow-0 basis-full',
-		$orientation === "horizontal" ? "pl-4" : "pt-4",
+		$orientation === 'horizontal' ? 'pl-4' : 'pt-4',
 		className
 	)}
 	data-embla-slide=""

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

@@ -1,32 +1,28 @@
 <script lang="ts">
-	import ArrowRight from "lucide-svelte/icons/arrow-right";
+	import ArrowRight from 'lucide-svelte/icons/arrow-right';
-	import type { VariantProps } from "tailwind-variants";
+	import type { VariantProps } from 'tailwind-variants';
-	import { getEmblaContext } from "./context.js";
+	import { getEmblaContext } from './context.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
-	import {
+	import { Button, type Props, type buttonVariants } from '$lib/components/ui/button/index.js';
-		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 variant: VariantProps<typeof buttonVariants>['variant'] = 'outline';
-	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	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",
+		'absolute h-8 w-8 touch-manipulation rounded-full',
-		$orientation === "horizontal"
+		$orientation === 'horizontal'
-			? "-right-12 top-1/2 -translate-y-1/2"
+			? '-right-12 top-1/2 -translate-y-1/2'
-			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+			: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
 		className
 	)}
 	disabled={!$canScrollNext}

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

@@ -1,33 +1,29 @@
 <script lang="ts">
-	import ArrowLeft from "lucide-svelte/icons/arrow-left";
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
-	import type { VariantProps } from "tailwind-variants";
+	import type { VariantProps } from 'tailwind-variants';
-	import { getEmblaContext } from "./context.js";
+	import { getEmblaContext } from './context.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
-	import {
+	import { Button, type Props, type buttonVariants } from '$lib/components/ui/button/index.js';
-		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 variant: VariantProps<typeof buttonVariants>['variant'] = 'outline';
-	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	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",
+		'absolute h-8 w-8 touch-manipulation rounded-full',
-		$orientation === "horizontal"
+		$orientation === 'horizontal'
-			? "-left-12 top-1/2 -translate-y-1/2"
+			? '-left-12 top-1/2 -translate-y-1/2'
-			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+			: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
 		className
 	)}
 	disabled={!$canScrollPrev}

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { writable } from "svelte/store";
+	import { writable } from 'svelte/store';
-	import { onDestroy } from "svelte";
+	import { onDestroy } from 'svelte';
-	import { type CarouselAPI, type CarouselProps, setEmblaContext } from "./context.js";
+	import { type CarouselAPI, type CarouselProps, setEmblaContext } from './context.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = CarouselProps;
 
 	export let opts = {};
-	export let plugins: NonNullable<$$Props["plugins"]> = [];
+	export let plugins: NonNullable<$$Props['plugins']> = [];
-	export let api: $$Props["api"] = undefined;
+	export let api: $$Props['api'] = undefined;
-	export let orientation: NonNullable<$$Props["orientation"]> = "horizontal";
+	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('select', onSelect);
-		api.on("reInit", 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"

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

@@ -1,11 +1,11 @@
-import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type { EmblaCarouselSvelteType } from 'embla-carousel-svelte';
-import type emblaCarouselSvelte from "embla-carousel-svelte";
+import type emblaCarouselSvelte from 'embla-carousel-svelte';
-import { getContext, hasContext, setContext } from "svelte";
+import { getContext, hasContext, setContext } from 'svelte';
-import type { HTMLAttributes } from "svelte/elements";
+import type { HTMLAttributes } from 'svelte/elements';
-import type { Readable, Writable } from "svelte/store";
+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 CarouselOptions = EmblaCarouselConfig['options'];
-export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+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`);
 	}

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import Check from "lucide-svelte/icons/check";
+	import Check from 'lucide-svelte/icons/check';
-	import Minus from "lucide-svelte/icons/minus";
+	import Minus from 'lucide-svelte/icons/minus';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = CheckboxPrimitive.Props;
 	type $$Events = CheckboxPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let checked: $$Props["checked"] = false;
+	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
 	>

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

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

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

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

@@ -1,5 +1,5 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
-import Content from "./collapsible-content.svelte";
+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
 };

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 { Dialog as DialogPrimitive } from 'bits-ui';
-	import type { Command as CommandPrimitive } from "cmdk-sv";
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
-	import Command from "./command.svelte";
+	import Command from './command.svelte';
-	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
 
 	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
 
-	export let open: $$Props["open"] = false;
+	export let open: $$Props['open'] = false;
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <Dialog.Root bind:open {...$$restProps}>

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

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

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

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

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

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