diff --git a/apps/mailtools/components.json b/apps/mailtools/components.json
index 240a7fa..e26122b 100644
--- a/apps/mailtools/components.json
+++ b/apps/mailtools/components.json
@@ -11,4 +11,4 @@
     "utils": "@lib/utils"
   },
   "typescript": true
-}
\ No newline at end of file
+}
diff --git a/apps/mailtools/src/components/ui/badge/badge.svelte b/apps/mailtools/src/components/ui/badge/badge.svelte
index a9352c7..5f69068 100644
--- a/apps/mailtools/src/components/ui/badge/badge.svelte
+++ b/apps/mailtools/src/components/ui/badge/badge.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
-	import { cn } from "@lib/utils.js";
-	import { badgeVariants, type Variant } from "./index.js";
+  import { cn } from '@lib/utils.js';
+  import { badgeVariants, type Variant } from './index.js';
 
-	let className: string | undefined | null = undefined;
-	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
-	export { className as class };
+  let className: string | undefined | null = undefined;
+  export let href: string | undefined = undefined;
+  export let variant: Variant = 'default';
+  export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
-	{href}
-	class={cn(badgeVariants({ variant, className }))}
-	{...$$restProps}
->
-	<slot />
+  this={href ? 'a' : 'span'}
+  {href}
+  class={cn(badgeVariants({ variant, className }))}
+  {...$$restProps}>
+  <slot />
 </svelte:element>
diff --git a/apps/mailtools/src/components/ui/badge/index.ts b/apps/mailtools/src/components/ui/badge/index.ts
index 432886f..f478837 100644
--- a/apps/mailtools/src/components/ui/badge/index.ts
+++ b/apps/mailtools/src/components/ui/badge/index.ts
@@ -1,21 +1,22 @@
-import { tv, type VariantProps } from "tailwind-variants";
-export { default as Badge } from "./badge.svelte";
+import { tv, type VariantProps } from 'tailwind-variants';
+export { default as Badge } from './badge.svelte';
 
 export const badgeVariants = tv({
-	base: "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-	variants: {
-		variant: {
-			default: "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
-			secondary:
-				"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
-			destructive:
-				"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
-			outline: "text-foreground",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
+  base: 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  variants: {
+    variant: {
+      default:
+        'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
+      secondary:
+        'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
+      destructive:
+        'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
+      outline: 'text-foreground'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
 });
 
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export type Variant = VariantProps<typeof badgeVariants>['variant'];
diff --git a/apps/mailtools/src/components/ui/button/button.svelte b/apps/mailtools/src/components/ui/button/button.svelte
index c2446de..dfd82f7 100644
--- a/apps/mailtools/src/components/ui/button/button.svelte
+++ b/apps/mailtools/src/components/ui/button/button.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
-	import { buttonVariants, type Props, type Events } from "./index.js";
+  import { Button as ButtonPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
+  import { buttonVariants, type Props, type Events } from './index.js';
 
-	type $$Props = Props;
-	type $$Events = Events;
+  type $$Props = Props;
+  type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let variant: $$Props['variant'] = 'default';
+  export let size: $$Props['size'] = 'default';
+  export let builders: $$Props['builders'] = [];
+  export { className as class };
 </script>
 
 <ButtonPrimitive.Root
-	{builders}
-	class={cn(buttonVariants({ variant, size, className }))}
-	type="button"
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<slot />
+  {builders}
+  class={cn(buttonVariants({ variant, size, className }))}
+  type="button"
+  {...$$restProps}
+  on:click
+  on:keydown>
+  <slot />
 </ButtonPrimitive.Root>
diff --git a/apps/mailtools/src/components/ui/button/index.ts b/apps/mailtools/src/components/ui/button/index.ts
index a3c3076..0f5c1fa 100644
--- a/apps/mailtools/src/components/ui/button/index.ts
+++ b/apps/mailtools/src/components/ui/button/index.ts
@@ -1,49 +1,50 @@
-import Root from "./button.svelte";
-import { tv, type VariantProps } from "tailwind-variants";
-import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from './button.svelte';
+import { tv, type VariantProps } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
 
 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",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
-		},
-		size: {
-			default: "h-10 px-4 py-2",
-			sm: "h-9 rounded-md px-3",
-			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
+  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive:
+        'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline:
+        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline'
+    },
+    size: {
+      default: 'h-10 px-4 py-2',
+      sm: 'h-9 rounded-md px-3',
+      lg: 'h-11 rounded-md px-8',
+      icon: 'h-10 w-10'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default'
+  }
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
 
 type Props = ButtonPrimitive.Props & {
-	variant?: Variant;
-	size?: Size;
+  variant?: Variant;
+  size?: Size;
 };
 
 type Events = ButtonPrimitive.Events;
 
 export {
-	Root,
-	type Props,
-	type Events,
-	//
-	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
-	buttonVariants,
+  Root,
+  type Props,
+  type Events,
+  //
+  Root as Button,
+  type Props as ButtonProps,
+  type Events as ButtonEvents,
+  buttonVariants
 };
diff --git a/apps/mailtools/src/components/ui/card/card-content.svelte b/apps/mailtools/src/components/ui/card/card-content.svelte
index beedfab..517b0e6 100644
--- a/apps/mailtools/src/components/ui/card/card-content.svelte
+++ b/apps/mailtools/src/components/ui/card/card-content.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import { cn } from "@lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from '@lib/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
-	<slot />
+<div
+  class={cn('p-6 pt-0', className)}
+  {...$$restProps}>
+  <slot />
 </div>
diff --git a/apps/mailtools/src/components/ui/card/card-description.svelte b/apps/mailtools/src/components/ui/card/card-description.svelte
index 4c2be2a..4a2092c 100644
--- a/apps/mailtools/src/components/ui/card/card-description.svelte
+++ b/apps/mailtools/src/components/ui/card/card-description.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+  type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
-	<slot />
+<p
+  class={cn('text-muted-foreground text-sm', className)}
+  {...$$restProps}>
+  <slot />
 </p>
diff --git a/apps/mailtools/src/components/ui/card/card-footer.svelte b/apps/mailtools/src/components/ui/card/card-footer.svelte
index 7f6aeb6..7ecfc62 100644
--- a/apps/mailtools/src/components/ui/card/card-footer.svelte
+++ b/apps/mailtools/src/components/ui/card/card-footer.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
-	<slot />
+<div
+  class={cn('flex items-center p-6 pt-0', className)}
+  {...$$restProps}>
+  <slot />
 </div>
diff --git a/apps/mailtools/src/components/ui/card/card-header.svelte b/apps/mailtools/src/components/ui/card/card-header.svelte
index e866c53..781ca3c 100644
--- a/apps/mailtools/src/components/ui/card/card-header.svelte
+++ b/apps/mailtools/src/components/ui/card/card-header.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
-	<slot />
+<div
+  class={cn('flex flex-col space-y-1.5 p-6', className)}
+  {...$$restProps}>
+  <slot />
 </div>
diff --git a/apps/mailtools/src/components/ui/card/card-title.svelte b/apps/mailtools/src/components/ui/card/card-title.svelte
index a4776ca..2aaaad8 100644
--- a/apps/mailtools/src/components/ui/card/card-title.svelte
+++ b/apps/mailtools/src/components/ui/card/card-title.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
-	import type { HeadingLevel } from "./index.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
+  import type { HeadingLevel } from './index.js';
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		tag?: HeadingLevel;
-	};
+  type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+    tag?: HeadingLevel;
+  };
 
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let tag: $$Props['tag'] = 'h3';
+  export { className as class };
 </script>
 
 <svelte:element
-	this={tag}
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
+  this={tag}
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}>
+  <slot />
 </svelte:element>
diff --git a/apps/mailtools/src/components/ui/card/card.svelte b/apps/mailtools/src/components/ui/card/card.svelte
index e676acb..c91894a 100644
--- a/apps/mailtools/src/components/ui/card/card.svelte
+++ b/apps/mailtools/src/components/ui/card/card.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <div
-	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
-	{...$$restProps}
->
-	<slot />
+  class={cn(
+    'bg-card text-card-foreground rounded-lg border shadow-sm',
+    className
+  )}
+  {...$$restProps}>
+  <slot />
 </div>
diff --git a/apps/mailtools/src/components/ui/card/index.ts b/apps/mailtools/src/components/ui/card/index.ts
index bcc031d..691e6d1 100644
--- a/apps/mailtools/src/components/ui/card/index.ts
+++ b/apps/mailtools/src/components/ui/card/index.ts
@@ -1,24 +1,24 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
+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,
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle
 };
 
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-content.svelte b/apps/mailtools/src/components/ui/dialog/dialog-content.svelte
index 807f61e..507fd09 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-content.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-content.svelte
@@ -1,36 +1,34 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import X from "lucide-svelte/icons/x";
-	import * as Dialog from "./index.js";
-	import { cn, flyAndScale } from "@lib/utils.js";
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import X from 'lucide-svelte/icons/x';
+  import * as Dialog from './index.js';
+  import { cn, flyAndScale } from '@lib/utils.js';
 
-	type $$Props = DialogPrimitive.ContentProps;
+  type $$Props = DialogPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200,
-	};
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200
+  };
+  export { className as class };
 </script>
 
 <Dialog.Portal>
-	<Dialog.Overlay />
-	<DialogPrimitive.Content
-		{transition}
-		{transitionConfig}
-		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
-			className
-		)}
-		{...$$restProps}
-	>
-		<slot />
-		<DialogPrimitive.Close
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-		>
-			<X class="h-4 w-4" />
-			<span class="sr-only">Close</span>
-		</DialogPrimitive.Close>
-	</DialogPrimitive.Content>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    {transition}
+    {transitionConfig}
+    class={cn(
+      'bg-background 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 sm:rounded-lg md:w-full',
+      className
+    )}
+    {...$$restProps}>
+    <slot />
+    <DialogPrimitive.Close
+      class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <X class="h-4 w-4" />
+      <span class="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
 </Dialog.Portal>
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-description.svelte b/apps/mailtools/src/components/ui/dialog/dialog-description.svelte
index 6135349..2abd798 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-description.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-description.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = DialogPrimitive.DescriptionProps;
+  type $$Props = DialogPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <DialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
-	{...$$restProps}
->
-	<slot />
+  class={cn('text-muted-foreground text-sm', className)}
+  {...$$restProps}>
+  <slot />
 </DialogPrimitive.Description>
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-footer.svelte b/apps/mailtools/src/components/ui/dialog/dialog-footer.svelte
index 93953fc..9fa7923 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-footer.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-footer.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-	import { cn } from "@lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from '@lib/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...$$restProps}
->
-	<slot />
+  class={cn(
+    'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+    className
+  )}
+  {...$$restProps}>
+  <slot />
 </div>
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-header.svelte b/apps/mailtools/src/components/ui/dialog/dialog-header.svelte
index 75150ba..6051bf8 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-header.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-header.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import { cn } from "@lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from '@lib/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
-	<slot />
+<div
+  class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
+  {...$$restProps}>
+  <slot />
 </div>
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-overlay.svelte b/apps/mailtools/src/components/ui/dialog/dialog-overlay.svelte
index 6618455..f564454 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-overlay.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-overlay.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
-	import { fade } from "svelte/transition";
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
+  import { fade } from 'svelte/transition';
 
-	type $$Props = DialogPrimitive.OverlayProps;
+  type $$Props = DialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
-	};
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = fade;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 150
+  };
+  export { className as class };
 </script>
 
 <DialogPrimitive.Overlay
-	{transition}
-	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
-	{...$$restProps}
-/>
+  {transition}
+  {transitionConfig}
+  class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm', className)}
+  {...$$restProps} />
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-portal.svelte b/apps/mailtools/src/components/ui/dialog/dialog-portal.svelte
index eb5d0a5..45112b7 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-portal.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-portal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	type $$Props = DialogPrimitive.PortalProps;
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  type $$Props = DialogPrimitive.PortalProps;
 </script>
 
 <DialogPrimitive.Portal {...$$restProps}>
-	<slot />
+  <slot />
 </DialogPrimitive.Portal>
diff --git a/apps/mailtools/src/components/ui/dialog/dialog-title.svelte b/apps/mailtools/src/components/ui/dialog/dialog-title.svelte
index aa17f42..613376f 100644
--- a/apps/mailtools/src/components/ui/dialog/dialog-title.svelte
+++ b/apps/mailtools/src/components/ui/dialog/dialog-title.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = DialogPrimitive.TitleProps;
+  type $$Props = DialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <DialogPrimitive.Title
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}>
+  <slot />
 </DialogPrimitive.Title>
diff --git a/apps/mailtools/src/components/ui/dialog/index.ts b/apps/mailtools/src/components/ui/dialog/index.ts
index 639b50d..676a771 100644
--- a/apps/mailtools/src/components/ui/dialog/index.ts
+++ b/apps/mailtools/src/components/ui/dialog/index.ts
@@ -1,34 +1,34 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import { Dialog as DialogPrimitive } from 'bits-ui';
 
 const Root = DialogPrimitive.Root;
 const Trigger = DialogPrimitive.Trigger;
 
-import Title from "./dialog-title.svelte";
-import Portal from "./dialog-portal.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
+import Title from './dialog-title.svelte';
+import Portal from './dialog-portal.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
 
 export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Portal as DialogPortal,
-	Footer as DialogFooter,
-	Header as DialogHeader,
-	Trigger as DialogTrigger,
-	Overlay as DialogOverlay,
-	Content as DialogContent,
-	Description as DialogDescription,
+  Root,
+  Title,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  //
+  Root as Dialog,
+  Title as DialogTitle,
+  Portal as DialogPortal,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Trigger as DialogTrigger,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Description as DialogDescription
 };
diff --git a/apps/mailtools/src/components/ui/input/index.ts b/apps/mailtools/src/components/ui/input/index.ts
index 859f3b0..c717527 100644
--- a/apps/mailtools/src/components/ui/input/index.ts
+++ b/apps/mailtools/src/components/ui/input/index.ts
@@ -1,27 +1,27 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export type FormInputEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLInputElement;
+  currentTarget: EventTarget & HTMLInputElement;
 };
 export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
+  blur: FormInputEvent<FocusEvent>;
+  change: FormInputEvent<Event>;
+  click: FormInputEvent<MouseEvent>;
+  focus: FormInputEvent<FocusEvent>;
+  focusin: FormInputEvent<FocusEvent>;
+  focusout: FormInputEvent<FocusEvent>;
+  keydown: FormInputEvent<KeyboardEvent>;
+  keypress: FormInputEvent<KeyboardEvent>;
+  keyup: FormInputEvent<KeyboardEvent>;
+  mouseover: FormInputEvent<MouseEvent>;
+  mouseenter: FormInputEvent<MouseEvent>;
+  mouseleave: FormInputEvent<MouseEvent>;
+  paste: FormInputEvent<ClipboardEvent>;
+  input: FormInputEvent<InputEvent>;
 };
 
 export {
-	Root,
-	//
-	Root as Input,
+  Root,
+  //
+  Root as Input
 };
diff --git a/apps/mailtools/src/components/ui/input/input.svelte b/apps/mailtools/src/components/ui/input/input.svelte
index a769224..ab35b38 100644
--- a/apps/mailtools/src/components/ui/input/input.svelte
+++ b/apps/mailtools/src/components/ui/input/input.svelte
@@ -1,35 +1,34 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
-	import type { InputEvents } from "./index.js";
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
+  import type { InputEvents } from './index.js';
 
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
+  type $$Props = HTMLInputAttributes;
+  type $$Events = InputEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'] = undefined;
+  export { className as class };
 </script>
 
 <input
-	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
-/>
+  class={cn(
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:value
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  on:input
+  {...$$restProps} />
diff --git a/apps/mailtools/src/components/ui/label/index.ts b/apps/mailtools/src/components/ui/label/index.ts
index 8bfca0b..d190775 100644
--- a/apps/mailtools/src/components/ui/label/index.ts
+++ b/apps/mailtools/src/components/ui/label/index.ts
@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from './label.svelte';
 
 export {
-	Root,
-	//
-	Root as Label,
+  Root,
+  //
+  Root as Label
 };
diff --git a/apps/mailtools/src/components/ui/label/label.svelte b/apps/mailtools/src/components/ui/label/label.svelte
index 3c7a947..7425f5c 100644
--- a/apps/mailtools/src/components/ui/label/label.svelte
+++ b/apps/mailtools/src/components/ui/label/label.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Label as LabelPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = LabelPrimitive.Props;
-	type $$Events = LabelPrimitive.Events;
+  type $$Props = LabelPrimitive.Props;
+  type $$Events = LabelPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <LabelPrimitive.Root
-	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-		className
-	)}
-	{...$$restProps}
-	on:mousedown
->
-	<slot />
+  class={cn(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    className
+  )}
+  {...$$restProps}
+  on:mousedown>
+  <slot />
 </LabelPrimitive.Root>
diff --git a/apps/mailtools/src/components/ui/scroll-area/index.ts b/apps/mailtools/src/components/ui/scroll-area/index.ts
index e86a25b..7a85ac4 100644
--- a/apps/mailtools/src/components/ui/scroll-area/index.ts
+++ b/apps/mailtools/src/components/ui/scroll-area/index.ts
@@ -1,10 +1,10 @@
-import Scrollbar from "./scroll-area-scrollbar.svelte";
-import Root from "./scroll-area.svelte";
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
 
 export {
-	Root,
-	Scrollbar,
-	//,
-	Root as ScrollArea,
-	Scrollbar as ScrollAreaScrollbar,
+  Root,
+  Scrollbar,
+  //,
+  Root as ScrollArea,
+  Scrollbar as ScrollAreaScrollbar
 };
diff --git a/apps/mailtools/src/components/ui/scroll-area/scroll-area-scrollbar.svelte b/apps/mailtools/src/components/ui/scroll-area/scroll-area-scrollbar.svelte
index 79e48bf..59e08b7 100644
--- a/apps/mailtools/src/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/apps/mailtools/src/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -1,27 +1,30 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-		orientation?: "vertical" | "horizontal";
-	};
+  type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+    orientation?: 'vertical' | 'horizontal';
+  };
 
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "vertical";
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let orientation: $$Props['orientation'] = 'vertical';
+  export { className as class };
 </script>
 
 <ScrollAreaPrimitive.Scrollbar
-	{orientation}
-	class={cn(
-		"flex touch-none select-none transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
-		className
-	)}
->
-	<slot />
-	<ScrollAreaPrimitive.Thumb
-		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
-	/>
+  {orientation}
+  class={cn(
+    'flex touch-none select-none transition-colors',
+    orientation === 'vertical' &&
+      'h-full w-2.5 border-l border-l-transparent p-px',
+    orientation === 'horizontal' &&
+      'h-2.5 w-full border-t border-t-transparent p-px',
+    className
+  )}>
+  <slot />
+  <ScrollAreaPrimitive.Thumb
+    class={cn(
+      'bg-border relative rounded-full',
+      orientation === 'vertical' && 'flex-1'
+    )} />
 </ScrollAreaPrimitive.Scrollbar>
diff --git a/apps/mailtools/src/components/ui/scroll-area/scroll-area.svelte b/apps/mailtools/src/components/ui/scroll-area/scroll-area.svelte
index 793cf0e..47f01a0 100644
--- a/apps/mailtools/src/components/ui/scroll-area/scroll-area.svelte
+++ b/apps/mailtools/src/components/ui/scroll-area/scroll-area.svelte
@@ -1,32 +1,38 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
-	import { Scrollbar } from "./index.js";
-	import { cn } from "@lib/utils.js";
+  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+  import { Scrollbar } from './index.js';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = ScrollAreaPrimitive.Props & {
-		orientation?: "vertical" | "horizontal" | "both";
-		scrollbarXClasses?: string;
-		scrollbarYClasses?: string;
-	};
+  type $$Props = ScrollAreaPrimitive.Props & {
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    scrollbarXClasses?: string;
+    scrollbarYClasses?: string;
+  };
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let orientation = "vertical";
-	export let scrollbarXClasses: string = "";
-	export let scrollbarYClasses: string = "";
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+  export let orientation = 'vertical';
+  export let scrollbarXClasses: string = '';
+  export let scrollbarYClasses: string = '';
 </script>
 
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
-		<ScrollAreaPrimitive.Content>
-			<slot />
-		</ScrollAreaPrimitive.Content>
-	</ScrollAreaPrimitive.Viewport>
-	{#if orientation === "vertical" || orientation === "both"}
-		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
-	{/if}
-	{#if orientation === "horizontal" || orientation === "both"}
-		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
-	{/if}
-	<ScrollAreaPrimitive.Corner />
+<ScrollAreaPrimitive.Root
+  {...$$restProps}
+  class={cn('relative overflow-hidden', className)}>
+  <ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Content>
+      <slot />
+    </ScrollAreaPrimitive.Content>
+  </ScrollAreaPrimitive.Viewport>
+  {#if orientation === 'vertical' || orientation === 'both'}
+    <Scrollbar
+      orientation="vertical"
+      class={scrollbarYClasses} />
+  {/if}
+  {#if orientation === 'horizontal' || orientation === 'both'}
+    <Scrollbar
+      orientation="horizontal"
+      class={scrollbarXClasses} />
+  {/if}
+  <ScrollAreaPrimitive.Corner />
 </ScrollAreaPrimitive.Root>
diff --git a/apps/mailtools/src/components/ui/skeleton/index.ts b/apps/mailtools/src/components/ui/skeleton/index.ts
index 186db21..df169ce 100644
--- a/apps/mailtools/src/components/ui/skeleton/index.ts
+++ b/apps/mailtools/src/components/ui/skeleton/index.ts
@@ -1,7 +1,7 @@
-import Root from "./skeleton.svelte";
+import Root from './skeleton.svelte';
 
 export {
-	Root,
-	//
-	Root as Skeleton,
+  Root,
+  //
+  Root as Skeleton
 };
diff --git a/apps/mailtools/src/components/ui/skeleton/skeleton.svelte b/apps/mailtools/src/components/ui/skeleton/skeleton.svelte
index e56459f..47e6958 100644
--- a/apps/mailtools/src/components/ui/skeleton/skeleton.svelte
+++ b/apps/mailtools/src/components/ui/skeleton/skeleton.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { cn } from "@lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from '@lib/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />
+<div
+  class={cn('bg-muted animate-pulse rounded-md', className)}
+  {...$$restProps} />
diff --git a/apps/mailtools/src/components/ui/sonner/index.ts b/apps/mailtools/src/components/ui/sonner/index.ts
index 1ad9f4a..fcaf06b 100644
--- a/apps/mailtools/src/components/ui/sonner/index.ts
+++ b/apps/mailtools/src/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';
diff --git a/apps/mailtools/src/components/ui/sonner/sonner.svelte b/apps/mailtools/src/components/ui/sonner/sonner.svelte
index 7d5b2f1..62c7228 100644
--- a/apps/mailtools/src/components/ui/sonner/sonner.svelte
+++ b/apps/mailtools/src/components/ui/sonner/sonner.svelte
@@ -1,20 +1,25 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+  import {
+    Toaster as Sonner,
+    type ToasterProps as SonnerProps
+  } from 'svelte-sonner';
+  import { mode } from 'mode-watcher';
 
-	type $$Props = SonnerProps;
+  type $$Props = SonnerProps;
 </script>
 
 <Sonner
-	theme={$mode}
-	class="toaster group"
-	toastOptions={{
-		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
-	}}
-	{...$$restProps}
-/>
+  theme={$mode}
+  class="toaster group"
+  toastOptions={{
+    classes: {
+      toast:
+        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+      description: 'group-[.toast]:text-muted-foreground',
+      actionButton:
+        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+      cancelButton:
+        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+    }
+  }}
+  {...$$restProps} />
diff --git a/apps/mailtools/src/components/ui/switch/index.ts b/apps/mailtools/src/components/ui/switch/index.ts
index f5533db..7fdb93a 100644
--- a/apps/mailtools/src/components/ui/switch/index.ts
+++ b/apps/mailtools/src/components/ui/switch/index.ts
@@ -1,7 +1,7 @@
-import Root from "./switch.svelte";
+import Root from './switch.svelte';
 
 export {
-	Root,
-	//
-	Root as Switch,
+  Root,
+  //
+  Root as Switch
 };
diff --git a/apps/mailtools/src/components/ui/switch/switch.svelte b/apps/mailtools/src/components/ui/switch/switch.svelte
index 2d09e28..cabce21 100644
--- a/apps/mailtools/src/components/ui/switch/switch.svelte
+++ b/apps/mailtools/src/components/ui/switch/switch.svelte
@@ -1,28 +1,26 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Switch as SwitchPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = SwitchPrimitive.Props;
-	type $$Events = SwitchPrimitive.Events;
+  type $$Props = SwitchPrimitive.Props;
+  type $$Events = SwitchPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let checked: $$Props['checked'] = undefined;
+  export { className as class };
 </script>
 
 <SwitchPrimitive.Root
-	bind:checked
-	class={cn(
-		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<SwitchPrimitive.Thumb
-		class={cn(
-			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-		)}
-	/>
+  bind:checked
+  class={cn(
+    'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown>
+  <SwitchPrimitive.Thumb
+    class={cn(
+      'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+    )} />
 </SwitchPrimitive.Root>
diff --git a/apps/mailtools/src/components/ui/tabs/index.ts b/apps/mailtools/src/components/ui/tabs/index.ts
index f1ab372..dfafad2 100644
--- a/apps/mailtools/src/components/ui/tabs/index.ts
+++ b/apps/mailtools/src/components/ui/tabs/index.ts
@@ -1,18 +1,18 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 
 const Root = TabsPrimitive.Root;
 
 export {
-	Root,
-	Content,
-	List,
-	Trigger,
-	//
-	Root as Tabs,
-	Content as TabsContent,
-	List as TabsList,
-	Trigger as TabsTrigger,
+  Root,
+  Content,
+  List,
+  Trigger,
+  //
+  Root as Tabs,
+  Content as TabsContent,
+  List as TabsList,
+  Trigger as TabsTrigger
 };
diff --git a/apps/mailtools/src/components/ui/tabs/tabs-content.svelte b/apps/mailtools/src/components/ui/tabs/tabs-content.svelte
index 2533b14..fe6ba3e 100644
--- a/apps/mailtools/src/components/ui/tabs/tabs-content.svelte
+++ b/apps/mailtools/src/components/ui/tabs/tabs-content.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = TabsPrimitive.ContentProps;
+  type $$Props = TabsPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'];
+  export { className as class };
 </script>
 
 <TabsPrimitive.Content
-	class={cn(
-		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-		className
-	)}
-	{value}
-	{...$$restProps}
->
-	<slot />
+  class={cn(
+    'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+    className
+  )}
+  {value}
+  {...$$restProps}>
+  <slot />
 </TabsPrimitive.Content>
diff --git a/apps/mailtools/src/components/ui/tabs/tabs-list.svelte b/apps/mailtools/src/components/ui/tabs/tabs-list.svelte
index 1968004..1c13ec6 100644
--- a/apps/mailtools/src/components/ui/tabs/tabs-list.svelte
+++ b/apps/mailtools/src/components/ui/tabs/tabs-list.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = TabsPrimitive.ListProps;
+  type $$Props = TabsPrimitive.ListProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <TabsPrimitive.List
-	class={cn(
-		"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
+  class={cn(
+    'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+    className
+  )}
+  {...$$restProps}>
+  <slot />
 </TabsPrimitive.List>
diff --git a/apps/mailtools/src/components/ui/tabs/tabs-trigger.svelte b/apps/mailtools/src/components/ui/tabs/tabs-trigger.svelte
index 0689d11..ae966d8 100644
--- a/apps/mailtools/src/components/ui/tabs/tabs-trigger.svelte
+++ b/apps/mailtools/src/components/ui/tabs/tabs-trigger.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@lib/utils.js";
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = TabsPrimitive.TriggerProps;
-	type $$Events = TabsPrimitive.TriggerEvents;
+  type $$Props = TabsPrimitive.TriggerProps;
+  type $$Events = TabsPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'];
+  export { className as class };
 </script>
 
 <TabsPrimitive.Trigger
-	class={cn(
-		"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
->
-	<slot />
+  class={cn(
+    'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+    className
+  )}
+  {value}
+  {...$$restProps}
+  on:click>
+  <slot />
 </TabsPrimitive.Trigger>
diff --git a/apps/mailtools/src/components/ui/textarea/index.ts b/apps/mailtools/src/components/ui/textarea/index.ts
index 6eb6ba3..96a081d 100644
--- a/apps/mailtools/src/components/ui/textarea/index.ts
+++ b/apps/mailtools/src/components/ui/textarea/index.ts
@@ -1,28 +1,28 @@
-import Root from "./textarea.svelte";
+import Root from './textarea.svelte';
 
 type FormTextareaEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLTextAreaElement;
+  currentTarget: EventTarget & HTMLTextAreaElement;
 };
 
 type TextareaEvents = {
-	blur: FormTextareaEvent<FocusEvent>;
-	change: FormTextareaEvent<Event>;
-	click: FormTextareaEvent<MouseEvent>;
-	focus: FormTextareaEvent<FocusEvent>;
-	keydown: FormTextareaEvent<KeyboardEvent>;
-	keypress: FormTextareaEvent<KeyboardEvent>;
-	keyup: FormTextareaEvent<KeyboardEvent>;
-	mouseover: FormTextareaEvent<MouseEvent>;
-	mouseenter: FormTextareaEvent<MouseEvent>;
-	mouseleave: FormTextareaEvent<MouseEvent>;
-	paste: FormTextareaEvent<ClipboardEvent>;
-	input: FormTextareaEvent<InputEvent>;
+  blur: FormTextareaEvent<FocusEvent>;
+  change: FormTextareaEvent<Event>;
+  click: FormTextareaEvent<MouseEvent>;
+  focus: FormTextareaEvent<FocusEvent>;
+  keydown: FormTextareaEvent<KeyboardEvent>;
+  keypress: FormTextareaEvent<KeyboardEvent>;
+  keyup: FormTextareaEvent<KeyboardEvent>;
+  mouseover: FormTextareaEvent<MouseEvent>;
+  mouseenter: FormTextareaEvent<MouseEvent>;
+  mouseleave: FormTextareaEvent<MouseEvent>;
+  paste: FormTextareaEvent<ClipboardEvent>;
+  input: FormTextareaEvent<InputEvent>;
 };
 
 export {
-	Root,
-	//
-	Root as Textarea,
-	type TextareaEvents,
-	type FormTextareaEvent,
+  Root,
+  //
+  Root as Textarea,
+  type TextareaEvents,
+  type FormTextareaEvent
 };
diff --git a/apps/mailtools/src/components/ui/textarea/textarea.svelte b/apps/mailtools/src/components/ui/textarea/textarea.svelte
index 9f1410f..ffd18fa 100644
--- a/apps/mailtools/src/components/ui/textarea/textarea.svelte
+++ b/apps/mailtools/src/components/ui/textarea/textarea.svelte
@@ -1,31 +1,30 @@
 <script lang="ts">
-	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import { cn } from "@lib/utils.js";
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import { cn } from '@lib/utils.js';
 
-	type $$Props = HTMLTextareaAttributes;
+  type $$Props = HTMLTextareaAttributes;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'] = undefined;
+  export { className as class };
 </script>
 
 <textarea
-	class={cn(
-		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
-/>
+  class={cn(
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:value
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  on:input
+  {...$$restProps} />
diff --git a/apps/mailtools/src/components/ui/tooltip/index.ts b/apps/mailtools/src/components/ui/tooltip/index.ts
index 7d0444d..30adbb7 100644
--- a/apps/mailtools/src/components/ui/tooltip/index.ts
+++ b/apps/mailtools/src/components/ui/tooltip/index.ts
@@ -1,15 +1,15 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
-import Content from "./tooltip-content.svelte";
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
 
 const Root = TooltipPrimitive.Root;
 const Trigger = TooltipPrimitive.Trigger;
 
 export {
-	Root,
-	Trigger,
-	Content,
-	//
-	Root as Tooltip,
-	Content as TooltipContent,
-	Trigger as TooltipTrigger,
+  Root,
+  Trigger,
+  Content,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger
 };
diff --git a/apps/mailtools/src/components/ui/tooltip/tooltip-content.svelte b/apps/mailtools/src/components/ui/tooltip/tooltip-content.svelte
index 687600f..9d05c94 100644
--- a/apps/mailtools/src/components/ui/tooltip/tooltip-content.svelte
+++ b/apps/mailtools/src/components/ui/tooltip/tooltip-content.svelte
@@ -1,28 +1,27 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "@lib/utils.js";
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import { cn, flyAndScale } from '@lib/utils.js';
 
-	type $$Props = TooltipPrimitive.ContentProps;
+  type $$Props = TooltipPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		y: 8,
-		duration: 150,
-	};
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let sideOffset: $$Props['sideOffset'] = 4;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    y: 8,
+    duration: 150
+  };
+  export { className as class };
 </script>
 
 <TooltipPrimitive.Content
-	{transition}
-	{transitionConfig}
-	{sideOffset}
-	class={cn(
-		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
+  {transition}
+  {transitionConfig}
+  {sideOffset}
+  class={cn(
+    'bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+    className
+  )}
+  {...$$restProps}>
+  <slot />
 </TooltipPrimitive.Content>