stashing code

apps/frontend/src/lib/components/atoms/animate-wrapper.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { fly, type FlyParams } from "svelte/transition";
+
+	interface Props {
+		options: FlyParams;
+		children?: import("svelte").Snippet;
+		cls?: string;
+	}
+
+	let { options, children, cls }: Props = $props();
+
+	let visible = $state(false);
+	let el = $state(undefined) as Element | undefined;
+
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						visible = true;
+						observer.unobserve(entry.target);
+					}
+				});
+			},
+			{ threshold: 0.2 },
+		);
+
+		if (el) {
+			observer.observe(el);
+		}
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div bind:this={el} class={cls}>
+	{#if visible}
+		<div transition:fly={options}>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

apps/frontend/src/lib/components/atoms/button-loadable-text.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import LoaderCircleIcon from "~icons/lucide/loader-circle";
+    import Icon from "./icon.svelte";
+
+    let {
+        loading,
+        loadingText,
+        text,
+    }: { loading: boolean; loadingText: string; text: string } = $props();
+</script>
+
+{#if loading}
+    <Icon icon={LoaderCircleIcon} cls="h-5 w-auto animate-spin" />
+    {loadingText}
+{:else}
+    {text}
+{/if}

apps/frontend/src/lib/components/atoms/container.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let {
+		wrapperClass = "",
+		containerClass = "flex w-full flex-col gap-4",
+		children,
+	}: {
+		wrapperClass?: string;
+		containerClass?: string;
+		children?: any;
+	} = $props();
+</script>
+
+<section
+	class={cn(
+		"rounded-xl border-2 border-border/30 from-brand-50 to-brand-100 p-8 drop-shadow-lg",
+		containerClass,
+		wrapperClass,
+	)}
+>
+	{@render children?.()}
+</section>

apps/frontend/src/lib/components/atoms/counter.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Icon from "$lib/components/atoms/icon.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import PlusIcon from "~icons/lucide/plus";
+	import MinusIcon from "~icons/lucide/minus";
+
+	let { value = $bindable() }: { value: number } = $props();
+</script>
+
+<div class="flex items-center justify-between gap-2">
+	<Button
+		size="iconSm"
+		onclick={() => {
+			if (value <= 0) {
+				value = 0;
+				return;
+			}
+			value = value - 1;
+		}}
+	>
+		<Icon icon={MinusIcon} />
+	</Button>
+
+	<span class="p-2">{value}</span>
+
+	<Button size="iconSm" onclick={() => (value = value + 1)}>
+		<Icon icon={PlusIcon} />
+	</Button>
+</div>

apps/frontend/src/lib/components/atoms/go-back-button.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Button from "../ui/button/button.svelte";
+    import ArrowLeftIcon from "~icons/solar/arrow-left-broken";
+    import Icon from "./icon.svelte";
+
+    function goBack() {
+        window.history.back();
+    }
+</script>
+
+<Button onclick={goBack} variant="ghost" size="sm">
+    <Icon icon={ArrowLeftIcon} cls="h-5 w-auto" />
+    Go Back
+</Button>

apps/frontend/src/lib/components/atoms/icon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    let {
+        icon: Icon,
+        cls,
+    }: {
+        icon: any;
+        cls?: string;
+    } = $props();
+</script>
+
+<Icon class={cls} />

apps/frontend/src/lib/components/atoms/label-wrapper.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Label from "$lib/components/ui/label/label.svelte";
+	import { cn } from "$lib/utils";
+
+	let {
+		label,
+		labelCls = "pl-2",
+		children,
+		error = "",
+	}: {
+		label: string;
+		labelCls?: string;
+		children?: any;
+		error?: string;
+	} = $props();
+</script>
+
+<div class="flex w-full flex-col gap-2">
+	<Label class={cn(labelCls)}>{label}</Label>
+	{@render children?.()}
+	{#if error && error.length > 0}
+		<Label class="text-sm text-red-500">{error}</Label>
+	{/if}
+</div>

apps/frontend/src/lib/components/atoms/loader.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	const themes = {
+		black: "bg-black text-white",
+		white: "bg-white text-black",
+	};
+
+	interface Props {
+		cls?: string;
+		theme?: keyof typeof themes;
+	}
+
+	let { cls = "", theme = "black" }: Props = $props();
+</script>
+
+<div class={cn("relative grid w-full place-items-center", cls)}>
+	<div class="loader">
+		<div class={cn("square", themes[theme])} id="sq1"></div>
+		<div class={cn("square", themes[theme])} id="sq2"></div>
+		<div class={cn("square", themes[theme])} id="sq3"></div>
+		<div class={cn("square", themes[theme])} id="sq4"></div>
+		<div class={cn("square", themes[theme])} id="sq5"></div>
+		<div class={cn("square", themes[theme])} id="sq6"></div>
+		<div class={cn("square", themes[theme])} id="sq7"></div>
+		<div class={cn("square", themes[theme])} id="sq8"></div>
+		<div class={cn("square", themes[theme])} id="sq9"></div>
+	</div>
+</div>
+
+<style>
+	/* From Uiverse.io by JkHuger */
+	@keyframes loader_5191 {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	.square {
+		width: 10px;
+		height: 10px;
+		position: absolute;
+		margin-top: -5px;
+		margin-left: -5px;
+	}
+
+	#sq1 {
+		margin-top: -25px;
+		margin-left: -25px;
+		animation: loader_5191 675ms ease-in-out 0s infinite alternate;
+	}
+
+	#sq2 {
+		margin-top: -25px;
+		animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
+	}
+
+	#sq3 {
+		margin-top: -25px;
+		margin-left: 15px;
+		animation: loader_5191 675ms ease-in-out 150ms infinite;
+	}
+
+	#sq4 {
+		margin-left: -25px;
+		animation: loader_5191 675ms ease-in-out 225ms infinite;
+	}
+
+	#sq5 {
+		animation: loader_5191 675ms ease-in-out 300ms infinite;
+	}
+
+	#sq6 {
+		margin-left: 15px;
+		animation: loader_5191 675ms ease-in-out 375ms infinite;
+	}
+
+	#sq7 {
+		margin-top: 15px;
+		margin-left: -25px;
+		animation: loader_5191 675ms ease-in-out 450ms infinite;
+	}
+
+	#sq8 {
+		margin-top: 15px;
+		animation: loader_5191 675ms ease-in-out 525ms infinite;
+	}
+
+	#sq9 {
+		margin-top: 15px;
+		margin-left: 15px;
+		animation: loader_5191 675ms ease-in-out 600ms infinite;
+	}
+</style>

apps/frontend/src/lib/components/atoms/logo.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	interface Props {
+		cls?: string;
+		intent?: "white" | "base";
+	}
+
+	let { cls = "w-auto h-10 lg:h-12 xl:h-14", intent }: Props = $props();
+
+	const logos = {
+		base: "/assets/logos/logo-main.svg",
+		white: "/assets/logos/logo-washed.svg",
+	};
+</script>
+
+{#if intent === "white"}
+	<img src={logos.white} alt="Logo" class={cn("object-contain", cls)} />
+{:else}
+	<img src={logos.base} alt="Logo" class={cn("object-contain", cls)} />
+{/if}

apps/frontend/src/lib/components/atoms/payment-card-images.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	const cardImageLinks = [
+		"/assets/images/cards/visa.png",
+		"/assets/images/cards/mastercard.png",
+		"/assets/images/cards/american.png",
+		"/assets/images/cards/pci-dss-compliant.png",
+	];
+</script>
+
+<div class="flex w-full flex-wrap gap-3">
+	{#each cardImageLinks as imLink}
+		<img
+			class="h-6 w-auto object-contain object-center"
+			src={imLink}
+			alt={"provider"}
+		/>
+	{/each}
+</div>

apps/frontend/src/lib/components/atoms/rating-counter.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import IconStar from "~icons/solar/star-broken";
+	import Icon from "./icon.svelte";
+
+	let { rating }: { rating: number } = $props();
+</script>
+
+<div class="flex items-center gap-2">
+	<p class="text-xl font-medium tracking-wide text-brand-100">{rating}</p>
+	<Icon icon={IconStar} cls="w-auto h-8 text-amber-300" />
+</div>

apps/frontend/src/lib/components/atoms/social-media-buttons.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { SOCIAL_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
+	import { cn } from "$lib/utils";
+	const themes = {
+		light: "bg-brand-100 text-brand-950 hover:bg-brand-300 active:bg-brand-200",
+		dark: "bg-brand-950 text-brand-50 hover:bg-brand-800 active:bg-brand-600",
+	};
+	interface Props {
+		padding?: string;
+		iconSize?: string;
+		theme?: "light" | "dark";
+	}
+
+	let {
+		padding = "p-2",
+		iconSize = "h-4 w-auto",
+		theme = "dark",
+	}: Props = $props();
+</script>
+
+<div class="flex items-center gap-2">
+	{#each SOCIAL_LINKS as link}
+		<a
+			href={link.link}
+			class={cn(
+				"grid place-items-center rounded-full",
+				themes[theme],
+				TRANSITION_COLORS,
+				padding,
+			)}
+			target="_blank"
+		>
+			<link.icon class={cn(iconSize)} />
+		</a>
+	{/each}
+</div>

apps/frontend/src/lib/components/atoms/theme-switch.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import SunIcon from "~icons/solar/sun-broken";
+	import MoonIcon from "~icons/solar/moon-sleep-broken";
+	import { resetMode, setMode, mode } from "mode-watcher";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils";
+	import Icon from "./icon.svelte";
+
+	interface Props {
+		expanded?: boolean;
+	}
+
+	let { expanded = false }: Props = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger
+		class={cn(
+			buttonVariants({
+				variant: "ghost",
+				size: expanded ? "default" : "icon",
+			}),
+			expanded ? "w-full justify-start" : "",
+		)}
+	>
+		{#if $mode === "light"}
+			<Icon
+				icon={SunIcon}
+				cls="h-6 w-auto rotate-0 scale-100 dark:-rotate-90 dark:scale-0"
+			/>
+		{:else}
+			<Icon
+				icon={MoonIcon}
+				cls="h-6 w-auto rotate-90 scale-0 dark:rotate-0 dark:scale-100"
+			/>
+		{/if}
+
+		{#if expanded}
+			<p>Theme</p>
+		{/if}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Item onclick={() => setMode("light")}
+			>Light</DropdownMenu.Item
+		>
+		<DropdownMenu.Item onclick={() => setMode("dark")}>Dark</DropdownMenu.Item
+		>
+		<DropdownMenu.Item onclick={() => resetMode()}>System</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

apps/frontend/src/lib/components/atoms/title.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	type TitleSize = "h1" | "h2" | "h3" | "h4" | "h5" | "p";
+	type TitleFontWeight = "bold" | "semibold" | "normal" | "medium";
+
+	const colors = {
+		theme: "text-brand-900 dark:text-brand-200",
+		white: "text-white",
+		black: "text-black",
+		primaryLight: "text-brand-900",
+		primaryDark: "text-brand-200",
+		gradientPrimary:
+			"bg-gradient-to-br from-brand-600 to-brand-950 dark:from-brand-100 dark:to-brand-400 inline-block text-transparent bg-clip-text leading-normal sm:pb-1 xl:pb-2",
+	};
+
+	const weights = {
+		bold: "font-bold",
+		semibold: "font-semibold",
+		medium: "font-medium",
+		normal: "font-normal",
+	} as const;
+
+	const sizes = {
+		h1: "text-6xl md:text-7xl",
+		h2: "text-5xl lg:text-6xl",
+		h3: "text-4xl lg:text-5xl",
+		h4: "text-2xl lg:text-3xl",
+		h5: "text-xl lg:text-2xl",
+		p: "text-lg lg:text-xl",
+	};
+
+	let {
+		size = "h2",
+		weight = "medium",
+		capitalize = true,
+		color = "black",
+		center = false,
+		id = undefined,
+		maxwidth = "",
+		children,
+	}: {
+		size?: TitleSize;
+		weight?: TitleFontWeight;
+		capitalize?: boolean;
+		color?: keyof typeof colors;
+		center?: boolean;
+		id?: string;
+		children?: any;
+		maxwidth?: string;
+	} = $props();
+</script>
+
+<svelte:element
+	this={size}
+	class={cn(
+		"leading-relaxed",
+		sizes[size] || sizes.p,
+		weights[weight ?? "bold"],
+		capitalize && "capitalize",
+		colors[color],
+		center && "text-center",
+		maxwidth ? `${maxwidth} overflow-hidden text-ellipsis` : "",
+		"whitespace-break-spaces",
+	)}
+	{id}
+>
+	{@render children?.()}
+</svelte:element>

apps/frontend/src/lib/components/molecules/data-table/data-table-actions.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import Ellipsis from "@lucide/svelte/icons/ellipsis";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+	import { Button } from "$lib/components/ui/button";
+
+	let {
+		actions,
+	}: {
+		actions: {
+			title: string;
+			action: () => void;
+		}[];
+	} = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="ghostGhosted"
+				size="icon"
+				class="relative h-8 w-8 p-0"
+			>
+				<span class="sr-only">Open menu</span>
+				<Ellipsis class="h-4 w-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content>
+		{#each actions as action}
+			<DropdownMenu.Item onclick={action.action}>
+				<p>
+					{action.title}
+				</p>
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

apps/frontend/src/lib/components/molecules/data-table/data-table-checkbox.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Checkbox } from "$lib/components/ui/checkbox";
+	import type { Writable } from "svelte/store";
+
+	interface Props {
+		checked: Writable<boolean>;
+	}
+
+	let { checked }: Props = $props();
+</script>
+
+<Checkbox bind:checked={$checked} />

apps/frontend/src/lib/components/molecules/data-table/data-table.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Table as TableType } from "@tanstack/table-core";
+
+	import * as Table from "$lib/components/ui/table/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import Title from "$lib/components/atoms/title.svelte";
+	import { FlexRender } from "$lib/components/ui/data-table";
+
+	let {
+		table,
+		query = "",
+		hasData,
+		currPage,
+		totalPages,
+		filterFieldPlaceholder,
+		onPreviousPageClick,
+		onNextPageClick,
+		onQueryChange,
+		filterFieldDisabled = false,
+	}: {
+		table: TableType<any>;
+		query: string;
+		hasData: boolean;
+		currPage: number;
+		totalPages: number;
+		filterFieldDisabled?: boolean;
+		filterFieldPlaceholder?: string;
+		onQueryChange?: (q: string) => void;
+		onPreviousPageClick?: () => void;
+		onNextPageClick?: () => void;
+	} = $props();
+
+	function gotoPreviousPage() {
+		onPreviousPageClick && onPreviousPageClick();
+	}
+
+	function gotoNextPage() {
+		onNextPageClick && onNextPageClick();
+	}
+</script>
+
+<div class="h-full w-full">
+	<div class="mb-4 flex flex-col items-center gap-4 sm:flex-row">
+		<Input
+			class="w-full md:max-w-xs"
+			placeholder={filterFieldPlaceholder ?? "Search..."}
+			type="text"
+			disabled={filterFieldDisabled}
+			bind:value={query}
+			oninput={(e) => {
+				onQueryChange && onQueryChange(e.currentTarget.value);
+			}}
+		/>
+	</div>
+
+	{#if hasData}
+		<Table.Root class="w-full min-w-[40rem]">
+			<Table.Header>
+				{#each table.getHeaderGroups() as headerGroup}
+					<Table.Row>
+						{#each headerGroup.headers as header}
+							<Table.Head>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Header>
+			<Table.Body>
+				{#each table.getRowModel().rows as row}
+					<Table.Row>
+						{#each row.getVisibleCells() as cell}
+							<Table.Cell>
+								<FlexRender
+									content={cell.column.columnDef.cell}
+									context={cell.getContext()}
+								/>
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
+
+		<div class="flex items-center justify-end space-x-2 py-4">
+			<div class="flex-1 text-sm text-muted-foreground">
+				Showing page {currPage} of {totalPages}
+			</div>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={gotoPreviousPage}
+				disabled={currPage <= 1}>Previous</Button
+			>
+			<Button
+				variant="outline"
+				size="sm"
+				disabled={currPage >= totalPages}
+				onclick={gotoNextPage}>Next</Button
+			>
+		</div>
+	{:else}
+		<div class="grid w-full place-items-center p-4 py-32 md:p-8 md:py-64">
+			<Title size="h5">No data found</Title>
+		</div>
+	{/if}
+</div>

apps/frontend/src/lib/components/molecules/date-picker.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import CalendarIcon from "~icons/solar/calendar-broken";
+	import {
+		DateFormatter,
+		type DateValue,
+		getLocalTimeZone,
+	} from "@internationalized/date";
+	import { cn } from "$lib/utils";
+	import { Calendar } from "$lib/components/ui/calendar/index.js";
+	import * as Popover from "$lib/components/ui/popover/index.js";
+	import { TRANSITION_COLORS } from "$lib/core/constants";
+	import Icon from "../atoms/icon.svelte";
+
+	const inputSizes = {
+		sm: "px-3 py-2 text-sm file:text-sm",
+		default: "px-4 py-3",
+		lg: "px-5 py-3 text-lg file:text-lg",
+		xl: "px-6 py-4 text-xl file:text-xl",
+	};
+
+	const df = new DateFormatter("en-US", {
+		dateStyle: "long",
+	});
+
+	let contentRef = $state<HTMLElement | null>(null);
+
+	let {
+		value = $bindable(),
+		inputSize = "default",
+	}: {
+		value: DateValue;
+		inputSize?: keyof typeof inputSizes;
+	} = $props();
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={cn(
+			"bg-brand-50/10 focus:border-brand-500 focus:bg-brand-50/60 dark:bg-brand-950/85 flex w-full items-center gap-2 rounded-md border-2 border-white shadow-[inset_0_3px_8px_0_rgba(0,0,0,0.15)] file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-border/40 dark:shadow-[inset_0_3px_12px_0_rgba(0,0,0,0.50)] dark:focus:border-border",
+			inputSizes[inputSize],
+			TRANSITION_COLORS,
+			value ? "" : "text-muted-foreground",
+		)}
+	>
+		<Icon icon={CalendarIcon} cls="mr-2 h-6 w-auto" />
+		{value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date"}
+	</Popover.Trigger>
+	<Popover.Content bind:ref={contentRef} class="w-auto p-0">
+		<Calendar type="single" bind:value />
+	</Popover.Content>
+</Popover.Root>

apps/frontend/src/lib/components/molecules/footer/footer.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { PROJECT_NAME, SPECIAL_PARTNERS } from "$lib/core/constants";
+	import Logo from "$lib/components/atoms/logo.svelte";
+	import PaymentCardImages from "$lib/components/atoms/payment-card-images.svelte";
+	import CurrencySelect from "$lib/domains/currency/view/currency-select.svelte";
+	import MaxWidthWrapper from "../max-width-wrapper.svelte";
+	import Input from "$lib/components/ui/input/input.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import Facebook from "~icons/ic/baseline-facebook";
+	import Twitter from "~icons/arcticons/x-twitter";
+	import Instagram from "~icons/hugeicons/instagram";
+	import Linkedin from "~icons/tabler/brand-linkedin";
+	import Youtube from "~icons/uil/youtube";
+
+	// Social media links
+	const SOCIAL_LINKS = [
+		{ icon: Facebook, url: "#", ariaLabel: "Facebook" },
+		{ icon: Twitter, url: "#", ariaLabel: "Twitter" },
+		{ icon: Instagram, url: "#", ariaLabel: "Instagram" },
+		{ icon: Linkedin, url: "#", ariaLabel: "LinkedIn" },
+		{ icon: Youtube, url: "#", ariaLabel: "YouTube" },
+	];
+
+	// Company links
+	const COMPANY_LINKS = [
+		{ name: "About Us", url: "#" },
+		{ name: "Careers", url: "#" },
+		{ name: "Press", url: "#" },
+		{ name: "Partners", url: "#" },
+	];
+
+	// Support links
+	const SUPPORT_LINKS = [
+		{ name: "Help Center", url: "#" },
+		{ name: "Contact Us", url: "#" },
+		{ name: "Privacy Policy", url: "#" },
+		{ name: "Terms of Service", url: "#" },
+	];
+
+	// Legal links
+	const LEGAL_LINKS = [
+		{ name: "Privacy Policy", url: "#" },
+		{ name: "Terms of Service", url: "#" },
+		{ name: "Cookies", url: "#" },
+	];
+</script>
+
+<footer class="bg-brand-950 text-white">
+	<MaxWidthWrapper cls="px-4 py-16">
+		<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-5">
+			<div class="lg:col-span-2">
+				<Logo intent="white" />
+				<p class="my-6 max-w-md text-brand-100">
+					Connecting travelers to their destinations with premium
+					service, competitive prices, and a seamless booking experience
+					since 2020.
+				</p>
+				<!-- <div class="flex space-x-4">
+					{#each SOCIAL_LINKS as social}
+						<a
+							href={social.url}
+							class="rounded-full bg-brand-900 p-2 transition-colors hover:bg-brand-700"
+							aria-label={social.ariaLabel}
+						>
+							<svelte:component
+								this={social.icon}
+								class="h-4 w-5"
+							/>
+						</a>
+					{/each}
+				</div> -->
+				<!-- <div class="mt-6">
+					<a
+						class="flex items-center gap-2 text-brand-100 hover:text-white"
+						href={`mailto:${CONTACT_INFO.email}`}
+					>
+						<Icon icon={IconEmail} cls="h-4 w-auto" />
+						<p>
+							{CONTACT_INFO.email}
+						</p>
+					</a>
+				</div> -->
+			</div>
+
+			<div>
+				<h3 class="mb-4 text-lg font-semibold text-white">Company</h3>
+				<ul class="space-y-2">
+					{#each COMPANY_LINKS as link}
+						<li>
+							<a
+								href={link.url}
+								class="text-brand-100 transition-colors hover:text-white"
+								>{link.name}</a
+							>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="mb-4 text-lg font-semibold text-white">Support</h3>
+				<ul class="space-y-2">
+					{#each SUPPORT_LINKS as link}
+						<li>
+							<a
+								href={link.url}
+								class="text-brand-100 transition-colors hover:text-white"
+								>{link.name}</a
+							>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="mb-4 text-lg font-semibold text-white">Newsletter</h3>
+				<p class="mb-4 text-brand-100">
+					Subscribe for travel inspiration and exclusive deals.
+				</p>
+				<div class="space-y-2">
+					<Input
+						placeholder="Your email address"
+						class="border-brand-800 bg-brand-900 text-white"
+					/>
+					<Button class="w-full bg-brand-600 hover:bg-brand-500">
+						Subscribe
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<div
+			class="Md:items-center mt-12 flex flex-col justify-between gap-4 border-t border-brand-800 pt-8 md:flex-row"
+		>
+			<div class="mb-6">
+				<h3 class="mb-4 text-lg font-semibold text-white">
+					Payment Methods
+				</h3>
+				<PaymentCardImages />
+			</div>
+
+			{#if SPECIAL_PARTNERS.length > 0}
+				<div class="mb-8">
+					<h3 class="mb-4 text-lg font-semibold text-white">
+						Affiliated Partners
+					</h3>
+					<div class="flex flex-wrap items-center gap-6">
+						{#each SPECIAL_PARTNERS as partner}
+							<img
+								src={partner.link}
+								alt={partner.alt}
+								class="h-8 w-auto"
+							/>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+
+		<div class="mt-8 border-t border-brand-800 pt-8">
+			<div
+				class="flex flex-col items-center justify-between gap-4 md:flex-row"
+			>
+				<p class="text-sm text-brand-300">
+					© {new Date().getFullYear()}
+					{PROJECT_NAME}. All rights reserved.
+				</p>
+				<div class="flex flex-wrap justify-center gap-6">
+					{#each LEGAL_LINKS as link}
+						<a
+							href={link.url}
+							class="text-sm text-brand-300 hover:text-white"
+							>{link.name}</a
+						>
+					{/each}
+				</div>
+				<CurrencySelect invert={false} />
+			</div>
+		</div>
+	</MaxWidthWrapper>
+</footer>

apps/frontend/src/lib/components/molecules/max-width-wrapper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { cls, children }: { cls: string; children: any } = $props();
+
+	let clsss = cn("mx-auto h-full w-full max-w-screen-2xl", cls);
+</script>
+
+<div class={clsss}>
+	{@render children()}
+</div>

apps/frontend/src/lib/components/molecules/navbar/mobile-nav-sheet.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Sheet, SheetContent, SheetTrigger } from "$lib/components/ui/sheet";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import IconMenu from "~icons/solar/hamburger-menu-broken";
+	import IconClose from "~icons/mingcute/close-line";
+	import { NAV_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
+	import { cn } from "$lib/utils";
+	import Icon from "$lib/components/atoms/icon.svelte";
+	import Logo from "$lib/components/atoms/logo.svelte";
+
+	let { invert }: { invert: boolean } = $props();
+
+	let open = $state(false);
+</script>
+
+<Sheet {open} onOpenChange={(to) => (open = to)}>
+	<SheetTrigger
+		class={cn(
+			"block lg:hidden",
+			buttonVariants({
+				variant: invert ? "glassWhite" : "ghost",
+				size: "icon",
+			}),
+		)}
+		onclick={() => (open = true)}
+	>
+		<Icon icon={IconMenu} cls={"h-6 w-auto"} />
+	</SheetTrigger>
+	<SheetContent side="bottom" class="z-[101]">
+		<button
+			onclick={() => (open = false)}
+			class="absolute right-4 top-4 grid place-items-center rounded-md border border-neutral-400 p-1 text-neutral-500"
+		>
+			<IconClose class="h-5 w-5" />
+		</button>
+		<Logo />
+		<div class="mt-8 flex flex-col gap-2 overflow-y-auto">
+			{#each NAV_LINKS as link}
+				<a
+					href={link.link}
+					onclick={() => (open = false)}
+					class={cn(
+						"text-sgreen flex items-center gap-2 rounded-lg border-2 p-3 px-4",
+						TRANSITION_COLORS,
+						"border-transparent hover:border-brand-300 hover:bg-brand-100",
+					)}
+				>
+					<Icon icon={link.icon} cls="h-5 w-5" />
+					<span>{link.name}</span>
+				</a>
+			{/each}
+		</div>
+	</SheetContent>
+</Sheet>

apps/frontend/src/lib/components/molecules/navbar/navbar.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { NAV_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
+	import Logo from "$lib/components/atoms/logo.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import { cn } from "$lib/utils";
+	import MobileNavSheet from "./mobile-nav-sheet.svelte";
+	import Icon from "$lib/components/atoms/icon.svelte";
+	import BookWithBookmarkIcon from "~icons/solar/book-bookmark-linear";
+	import MaxWidthWrapper from "../max-width-wrapper.svelte";
+	import { SearchIcon } from "@lucide/svelte";
+
+	let { invert }: { invert: boolean } = $props();
+</script>
+
+<div class="h-24"></div>
+
+<nav
+	class={cn(
+		"fixed left-0 top-0 z-50 grid w-screen place-items-center bg-white/80 drop-shadow-md backdrop-blur-md",
+	)}
+>
+	<MaxWidthWrapper
+		cls="flex w-full items-center justify-between gap-4 p-4 bg-transparent"
+	>
+		<div class="flex items-center gap-4">
+			<a href="/">
+				<Logo cls="w-auto h-8 md:h-10" />
+			</a>
+
+			<div
+				class="hidden w-full items-center justify-center gap-2 lg:flex lg:gap-4"
+			>
+				{#each NAV_LINKS as link}
+					<a
+						href={link.link}
+						class={cn(
+							"w-28 rounded-lg px-4 py-2 text-center",
+							"bg-transparent hover:bg-primary/10 hover:text-brand-700",
+							TRANSITION_COLORS,
+						)}
+					>
+						{link.name}
+					</a>
+				{/each}
+			</div>
+		</div>
+
+		<div class="hidden items-center gap-2 lg:flex">
+			<a href={"/track"}>
+				<Button variant="ghost">
+					<Icon icon={BookWithBookmarkIcon} cls="w-auto h-5" />
+					<span>Track</span>
+				</Button>
+			</a>
+			<a href={"/search"}>
+				<Button>
+					<Icon icon={SearchIcon} cls="w-auto h-5" />
+					<span>Search Flights</span>
+				</Button>
+			</a>
+		</div>
+		<MobileNavSheet {invert} />
+	</MaxWidthWrapper>
+</nav>

apps/frontend/src/lib/components/organisms/deals-grid.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { ArrowRight, Plane } from "@lucide/svelte";
+	import Card from "$lib/components/ui/card/card.svelte";
+	import CardContent from "$lib/components/ui/card/card-content.svelte";
+
+	let { deals } = $props();
+</script>
+
+<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+	{#each deals as deal}
+		<Card class="card-hover overflow-hidden">
+			<CardContent class="p-5">
+				{#if deal.tag}
+					<div class="mb-3">
+						<span
+							class="rounded-full bg-brand-500 px-3 py-1 text-xs font-medium text-white"
+						>
+							{deal.tag}
+						</span>
+					</div>
+				{/if}
+
+				<div class="mb-3 flex items-center justify-between">
+					<div class="flex items-center">
+						<Plane class="mr-2 h-5 w-5 text-brand-500" />
+						<span class="font-medium">{deal.airline}</span>
+					</div>
+
+					{#if deal.discount}
+						<span
+							class="rounded bg-brand-100 px-2 py-1 text-xs font-medium text-brand-600"
+						>
+							{deal.discount}% OFF
+						</span>
+					{/if}
+				</div>
+
+				<div class="mb-4 flex items-center justify-between">
+					<div>
+						<p class="text-xl font-bold">{deal.from}</p>
+						<p class="text-sm text-muted-foreground">Departure</p>
+					</div>
+
+					<div class="flex-1 px-4">
+						<div class="relative">
+							<div
+								class="absolute left-0 right-0 top-1/2 -translate-y-1/2 transform border-t border-dashed border-gray-300"
+							></div>
+							<div
+								class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform bg-white p-1"
+							>
+								<ArrowRight class="h-4 w-4 text-brand-500" />
+							</div>
+						</div>
+					</div>
+
+					<div class="text-right">
+						<p class="text-xl font-bold">{deal.to}</p>
+						<p class="text-sm text-muted-foreground">Arrival</p>
+					</div>
+				</div>
+
+				<div class="flex items-end justify-between">
+					<div>
+						<p class="text-sm text-muted-foreground">{deal.date}</p>
+					</div>
+					<div>
+						<p class="text-sm">from</p>
+						<p class="text-2xl font-bold text-brand-600">
+							${deal.price}
+						</p>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	{/each}
+</div>

apps/frontend/src/lib/components/organisms/testimonials.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import Card from "$lib/components/ui/card/card.svelte";
+	import CardContent from "$lib/components/ui/card/card-content.svelte";
+	import {
+		Carousel,
+		CarouselContent,
+		CarouselItem,
+		CarouselPrevious,
+		CarouselNext,
+	} from "$lib/components/ui/carousel";
+
+	import { StarIcon } from "@lucide/svelte";
+	import Icon from "../atoms/icon.svelte";
+	import { cn } from "$lib/utils";
+	import MaxWidthWrapper from "../molecules/max-width-wrapper.svelte";
+
+	type Testimonial = {
+		id: number;
+		name: string;
+		role: string;
+		message: string;
+		avatar: string;
+		rating: number;
+	};
+
+	const testimonials: Testimonial[] = [
+		{
+			id: 1,
+			name: "Sarah Johnson",
+			role: "Business Traveler",
+			message:
+				"FlyTicketTravel made my business trips so much easier. Their intuitive booking platform and exceptional customer service saved me hours of planning time.",
+			avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=2487&ixlib=rb-4.0.3",
+			rating: 5,
+		},
+		{
+			id: 2,
+			name: "Michael Chen",
+			role: "Adventure Seeker",
+			message:
+				"I've used many flight booking platforms, but FlyTicketTravel stands out with their competitive prices and flexible cancellation policies. My go-to for all my adventures!",
+			avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=2187&ixlib=rb-4.0.3",
+			rating: 4,
+		},
+		{
+			id: 3,
+			name: "Emma Rodriguez",
+			role: "Family Traveler",
+			message:
+				"Booking flights for the whole family used to be stressful until I discovered FlyTicketTravel. Their group booking feature and 24/7 support made our vacation planning seamless.",
+			avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=2564&ixlib=rb-4.0.3",
+			rating: 5,
+		},
+		{
+			id: 4,
+			name: "James Wilson",
+			role: "Digital Nomad",
+			message:
+				"As someone who travels constantly, I appreciate FlyTicketTravel's rewards program and their mobile app that lets me book flights from anywhere in the world.",
+			avatar: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&q=80&w=2662&ixlib=rb-4.0.3",
+			rating: 5,
+		},
+	];
+</script>
+
+<MaxWidthWrapper cls="py-24 px-4">
+	<div class="mx-auto mb-16 max-w-3xl text-center">
+		<h2 class="mb-4 text-3xl font-bold md:text-4xl">
+			What Our Customers Say
+		</h2>
+		<p class="text-lg text-muted-foreground">
+			Don't just take our word for it – hear what our satisfied customers
+			have to say about their FlyTicketTravel experience.
+		</p>
+	</div>
+
+	<Carousel
+		opts={{
+			align: "start",
+			loop: true,
+		}}
+		class="w-full"
+	>
+		<CarouselContent>
+			{#each testimonials as testimonial}
+				<CarouselItem class="p-2 px-4 md:basis-1/2 lg:basis-1/3">
+					<Card class="h-full">
+						<CardContent class="flex h-full flex-col p-6">
+							<div class="mb-4 flex items-center">
+								{#each Array(5) as _, i}
+									<Icon
+										icon={StarIcon}
+										cls={cn(
+											"h-5 w-5",
+											i < testimonial.rating
+												? "text-brand-500"
+												: "text-muted-foreground",
+										)}
+									/>
+								{/each}
+							</div>
+
+							<p class="mb-6 flex-grow italic">
+								{testimonial.message}
+							</p>
+
+							<div class="flex items-center">
+								<img
+									src={testimonial.avatar}
+									alt={testimonial.name}
+									class="mr-4 h-12 w-12 rounded-full object-cover"
+								/>
+								<div>
+									<h4 class="font-semibold">
+										{testimonial.name}
+									</h4>
+									<p class="text-sm text-muted-foreground">
+										{testimonial.role}
+									</p>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+				</CarouselItem>
+			{/each}
+		</CarouselContent>
+		<div class="mt-8 flex justify-center gap-0">
+			<CarouselPrevious class="relative" />
+			<CarouselNext class="relative" />
+		</div>
+	</Carousel>
+</MaxWidthWrapper>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

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

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: AlertDialogPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{level}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	class={cn("aspect-square h-full w-full", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex 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-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				successGlass:
+					"bg-emerald-500/30 text-emerald-500 hover:bg-emerald-500/30 border-transparent",
+				outline: "text-foreground",
+			},
+			size: {
+				sm: "px-3 py-1 text-sm",
+				default: "px-4 py-1.5",
+				lg: "px-5 py-2 text-lg font-medium",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	export type BadgeSize = VariantProps<typeof badgeVariants>["size"];
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		size = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+		size?: BadgeSize;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	{href}
+	class={cn(badgeVariants({ variant, size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Ellipsis from "@lucide/svelte/icons/ellipsis";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
+>
+	<Ellipsis class="size-4" />
+	<span class="sr-only">More</span>
+</span>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
+	{@render children?.()}
+</li>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		class: cn("hover:text-foreground transition-colors", className),
+		href,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ol>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("text-foreground font-normal", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	bind:this={ref}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<ChevronRight />
+	{/if}
+</li>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav bind:this={ref} class={className} aria-label="breadcrumb" {...restProps}>
+	{@render children?.()}
+</nav>

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

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

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

@@ -0,0 +1,95 @@
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+	} from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				defaultInverted: "bg-brand-100 text-primary hover:bg-brand-200",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+				outlineWhite:
+					"border-input/50 bg-white hover:bg-accent hover:text-accent-foreground border",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-primary dark:hover:bg-brand-1000/80 hover:text-primary-foreground",
+				ghostGhosted:
+					"hover:bg-brand-800/20 text-primary dark:text-primary-foreground dark:hover:bg-brand-100/20",
+				glassWhite: "text-white bg-white/10 hover:bg-white/20",
+				white: "bg-white text-black hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "px-5 py-3 text-sm",
+				sm: "px-3 py-2 text-sm",
+				lg: "px-8 py-4 text-base",
+				icon: "h-12 w-12",
+				iconSm: "h-10 w-10",
+			},
+			rounded: {
+				default: "rounded-md",
+				full: "rounded-full",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			rounded: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+	export type ButtonRounded = VariantProps<typeof buttonVariants>["rounded"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+			rounded?: ButtonRounded;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		rounded = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, rounded, className }))}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, rounded, className }))}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"size-9 p-0 font-normal",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("w-full border-collapse space-y-1", className)}
+	{...restProps}
+/>

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

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

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

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

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading bind:ref class={cn("text-sm font-medium", className)} {...restProps} />

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRight class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header>
+			<Calendar.PrevButton />
+			<Calendar.Heading />
+			<Calendar.NextButton />
+		</Calendar.Header>
+		<Calendar.Months>
+			{#each months as month}
+				<Calendar.Grid>
+					<Calendar.GridHead>
+						<Calendar.GridRow class="flex">
+							{#each weekdays as weekday}
+								<Calendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates}
+							<Calendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date}
+									<Calendar.Cell {date} month={month.value}>
+										<Calendar.Day />
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
+</p>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,22 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<!-- svelte-ignore event_directive_deprecated -->
+<div
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...emblaCtx.options,
+			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: emblaCtx.plugins,
+	}}
+	on:emblaInit={emblaCtx.onInit}
+>
+	<div
+		bind:this={ref}
+		class={cn(
+			"flex",
+			emblaCtx.orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+			className
+		)}
+		data-embla-container=""
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</div>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import { Button, type Props } from "$lib/components/ui/button/index.js";
+	import { ArrowRight } from "@lucide/svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute size-8 touch-manipulation rounded-full",
+		emblaCtx.orientation === "horizontal"
+			? "-right-12 top-1/2 -translate-y-1/2"
+			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+		className,
+	)}
+	disabled={!emblaCtx.canScrollNext}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
+>
+	<ArrowRight class="size-4" />
+	<span class="sr-only">Next slide</span>
+</Button>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import { Button, type Props } from "$lib/components/ui/button/index.js";
+	import { ArrowLeft } from "@lucide/svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute size-8 touch-manipulation rounded-full",
+		emblaCtx.orientation === "horizontal"
+			? "-left-12 top-1/2 -translate-y-1/2"
+			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+		className,
+	)}
+	disabled={!emblaCtx.canScrollPrev}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
+>
+	<ArrowLeft class="size-4" />
+	<span class="sr-only">Previous slide</span>
+</Button>

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: CarouselProps = $props();
+
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
+
+	setEmblaContext(carouselState);
+
+	function scrollPrev() {
+		carouselState.api?.scrollPrev();
+	}
+	function scrollNext() {
+		carouselState.api?.scrollNext();
+	}
+	function scrollTo(index: number, jump?: boolean) {
+		carouselState.api?.scrollTo(index, jump);
+	}
+
+	function onSelect(api: CarouselAPI) {
+		if (!api) return;
+		carouselState.canScrollPrev = api.canScrollPrev();
+		carouselState.canScrollNext = api.canScrollNext();
+		carouselState.selectedIndex = api.selectedScrollSnap();
+	}
+
+	$effect(() => {
+		if (carouselState.api) {
+			onSelect(carouselState.api);
+			carouselState.api.on("select", onSelect);
+			carouselState.api.on("reInit", onSelect);
+		}
+	});
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	$effect(() => {
+		setApi(carouselState.api);
+	});
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		carouselState.api = event.detail;
+
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+	}
+
+	$effect(() => {
+		return () => {
+			carouselState.api?.off("select", onSelect);
+		};
+	});
+</script>
+
+<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,19 @@
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Previous,
+	Next,
+	//
+	Root as Carousel,
+	Content as CarouselContent,
+	Item as CarouselItem,
+	Previous as CarouselPrevious,
+	Next as CarouselNext,
+};

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import {
+		Checkbox as CheckboxPrimitive,
+		type WithoutChildrenOrChild,
+	} from "bits-ui";
+	import Check from "@lucide/svelte/icons/check";
+	import Minus from "@lucide/svelte/icons/minus";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	class={cn(
+		"peer box-content size-5 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
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div class="flex size-5 items-center justify-center text-current">
+			{#if indeterminate}
+				<Minus class="size-3.5" />
+			{:else}
+				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

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

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

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type {
+		Command as CommandPrimitive,
+		Dialog as DialogPrimitive,
+		WithoutChildrenOrChild,
+	} from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
+		<Command
+			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	bind:ref
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import Search from "@lucide/svelte/icons/search";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div class="flex items-center border-b px-2" data-command-input-wrapper="">
+	<Search class="mr-2 size-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		class={cn(
+			"flex h-11 w-full rounded-md border-transparent bg-transparent py-3 text-base outline-none ring-0 placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		bind:ref
+		{...restProps}
+		bind:value
+	/>
+</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>

apps/frontend/src/lib/components/ui/command/command-link-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	{...restProps}
+	bind:ref
+/>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps = $props();
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		className
+	)}
+	bind:value
+	bind:ref
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import Check from "@lucide/svelte/icons/check";
+	import Minus from "@lucide/svelte/icons/minus";
+	import { cn } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-3.5" />
+			{:else}
+				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</ContextMenuPrimitive.CheckboxItem>