style: apply prettier formatting to all files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -1,23 +1,23 @@
 <script lang="ts">
-import type { HTMLAttributes } from "svelte/elements";
-import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="alert-description"
-    class={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className,
-    )}
-    {...restProps}
+  bind:this={ref}
+  data-slot="alert-description"
+  class={cn(
+    "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+    className,
+  )}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-import type { HTMLAttributes } from "svelte/elements";
-import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="alert-title"
-    class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
-    {...restProps}
+  bind:this={ref}
+  data-slot="alert-title"
+  class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -1,44 +1,44 @@
 <script lang="ts" module>
-import { type VariantProps, tv } from "tailwind-variants";
+  import { type VariantProps, tv } from "tailwind-variants";
 
-export const alertVariants = tv({
-	base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-	variants: {
-		variant: {
-			default: "bg-card text-card-foreground",
-			destructive:
-				"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
-});
+  export const alertVariants = tv({
+    base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
 
-export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+  export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
 </script>
 
 <script lang="ts">
-    import type { HTMLAttributes } from "svelte/elements";
-    import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-    let {
-        ref = $bindable(null),
-        class: className,
-        variant = "default",
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-        variant?: AlertVariant;
-    } = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = "default",
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+  } = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="alert"
-    class={cn(alertVariants({ variant }), className)}
-    {...restProps}
-    role="alert"
+  bind:this={ref}
+  data-slot="alert"
+  class={cn(alertVariants({ variant }), className)}
+  {...restProps}
+  role="alert"
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -4,11 +4,11 @@ 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,
+  Root,
+  Description,
+  Title,
+  //
+  Root as Alert,
+  Description as AlertDescription,
+  Title as AlertTitle,
 };

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

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

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

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

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

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

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

@@ -3,11 +3,11 @@ 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,
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback,
 };

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

@@ -1,86 +1,80 @@
 <script lang="ts" module>
-import { cn, type WithElementRef } from "$lib/utils.js";
-import type {
-	HTMLAnchorAttributes,
-	HTMLButtonAttributes,
-} from "svelte/elements";
-import { type VariantProps, tv } from "tailwind-variants";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+  import { type VariantProps, tv } from "tailwind-variants";
 
-export const buttonVariants = tv({
-	base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-	variants: {
-		variant: {
-			default:
-				"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-			destructive:
-				"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-			outline:
-				"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-			secondary:
-				"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-			ghost:
-				"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-			link: "text-primary underline-offset-4 hover:underline",
-		},
-		size: {
-			default: "h-9 px-4 py-2 has-[>svg]:px-3",
-			sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-			icon: "size-9",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
-});
+  export const buttonVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+        outline:
+          "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  });
 
-export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+  export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+  export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-	WithElementRef<HTMLAnchorAttributes> & {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
-	};
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+    };
 </script>
 
 <script lang="ts">
-    let {
-        class: className,
-        variant = "default",
-        size = "default",
-        ref = $bindable(null),
-        href = undefined,
-        type = "button",
-        disabled,
-        children,
-        ...restProps
-    }: ButtonProps = $props();
+  let {
+    class: className,
+    variant = "default",
+    size = "default",
+    ref = $bindable(null),
+    href = undefined,
+    type = "button",
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
 </script>
 
 {#if href}
-    <a
-        bind:this={ref}
-        data-slot="button"
-        class={cn(buttonVariants({ variant, size }), className)}
-        href={disabled ? undefined : href}
-        aria-disabled={disabled}
-        role={disabled ? "link" : undefined}
-        tabindex={disabled ? -1 : undefined}
-        {...restProps}
-    >
-        {@render children?.()}
-    </a>
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    role={disabled ? "link" : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+  >
+    {@render children?.()}
+  </a>
 {:else}
-    <button
-        bind:this={ref}
-        data-slot="button"
-        class={cn(buttonVariants({ variant, size }), className)}
-        {type}
-        {disabled}
-        {...restProps}
-    >
-        {@render children?.()}
-    </button>
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    {disabled}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
 {/if}

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

@@ -1,17 +1,17 @@
 import Root, {
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-	buttonVariants,
+  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,
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
 };

packages/frontend/src/lib/components/ui/card/card-action.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-import { cn, type WithElementRef } from "$lib/utils.js";
-import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="card-action"
-    class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-    {...restProps}
+  bind:this={ref}
+  data-slot="card-action"
+  class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

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

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

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

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-import { cn, type WithElementRef } from "$lib/utils.js";
-import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="card-footer"
-    class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
-    {...restProps}
+  bind:this={ref}
+  data-slot="card-footer"
+  class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -1,23 +1,23 @@
 <script lang="ts">
-import { cn, type WithElementRef } from "$lib/utils.js";
-import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="card-header"
-    class={cn(
-        "@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
-        className,
-    )}
-    {...restProps}
+  bind:this={ref}
+  data-slot="card-header"
+  class={cn(
+    "@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+    className,
+  )}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-import type { HTMLAttributes } from "svelte/elements";
-import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="card-title"
-    class={cn("font-semibold leading-none", className)}
-    {...restProps}
+  bind:this={ref}
+  data-slot="card-title"
+  class={cn("font-semibold leading-none", className)}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -1,23 +1,23 @@
 <script lang="ts">
-import type { HTMLAttributes } from "svelte/elements";
-import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="card"
-    class={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
-    )}
-    {...restProps}
+  bind:this={ref}
+  data-slot="card"
+  class={cn(
+    "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+    className,
+  )}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -7,19 +7,19 @@ import Title from "./card-title.svelte";
 import Action from "./card-action.svelte";
 
 export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	Action,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle,
-	Action as CardAction,
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  Action,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle,
+  Action as CardAction,
 };

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

@@ -1,36 +1,36 @@
 <script lang="ts">
-import { Checkbox as CheckboxPrimitive } from "bits-ui";
-import CheckIcon from "@lucide/svelte/icons/check";
-import MinusIcon from "@lucide/svelte/icons/minus";
-import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import { Checkbox as CheckboxPrimitive } from "bits-ui";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import MinusIcon from "@lucide/svelte/icons/minus";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	checked = $bindable(false),
-	indeterminate = $bindable(false),
-	class: className,
-	...restProps
-}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
 </script>
 
 <CheckboxPrimitive.Root
-    bind:ref
-    data-slot="checkbox"
-    class={cn(
-        "border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-    )}
-    bind:checked
-    bind:indeterminate
-    {...restProps}
+  bind:ref
+  data-slot="checkbox"
+  class={cn(
+    "border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+    className,
+  )}
+  bind:checked
+  bind:indeterminate
+  {...restProps}
 >
-    {#snippet children({ checked, indeterminate })}
-        <div data-slot="checkbox-indicator" class="text-current transition-none">
-            {#if checked}
-                <CheckIcon class="size-3.5" />
-            {:else if indeterminate}
-                <MinusIcon class="size-3.5" />
-            {/if}
-        </div>
-    {/snippet}
+  {#snippet children({ checked, indeterminate })}
+    <div data-slot="checkbox-indicator" class="text-current transition-none">
+      {#if checked}
+        <CheckIcon class="size-3.5" />
+      {:else if indeterminate}
+        <MinusIcon class="size-3.5" />
+      {/if}
+    </div>
+  {/snippet}
 </CheckboxPrimitive.Root>

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

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

packages/frontend/src/lib/components/ui/dialog/dialog-close.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-import { Dialog as DialogPrimitive } from "bits-ui";
+  import { Dialog as DialogPrimitive } from "bits-ui";
 
-let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps =
-	$props();
+  let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
 </script>
 
 <DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

packages/frontend/src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,43 +1,43 @@
 <script lang="ts">
-import { Dialog as DialogPrimitive } from "bits-ui";
-import XIcon from "@lucide/svelte/icons/x";
-import type { Snippet } from "svelte";
-import * as Dialog from "./index.js";
-import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import { Dialog as DialogPrimitive } from "bits-ui";
+  import XIcon from "@lucide/svelte/icons/x";
+  import type { Snippet } from "svelte";
+  import * as Dialog from "./index.js";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	portalProps,
-	children,
-	showCloseButton = true,
-	...restProps
-}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-	portalProps?: DialogPrimitive.PortalProps;
-	children: Snippet;
-	showCloseButton?: boolean;
-} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    showCloseButton = true,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+    showCloseButton?: boolean;
+  } = $props();
 </script>
 
 <Dialog.Portal {...portalProps}>
-    <Dialog.Overlay />
-    <DialogPrimitive.Content
-        bind:ref
-        data-slot="dialog-content"
-        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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-            className,
-        )}
-        {...restProps}
-    >
-        {@render children?.()}
-        {#if showCloseButton}
-            <DialogPrimitive.Close
-                class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
-            >
-                <XIcon />
-                <span class="sr-only">Close</span>
-            </DialogPrimitive.Close>
-        {/if}
-    </DialogPrimitive.Content>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    bind:ref
+    data-slot="dialog-content"
+    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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+      className,
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    {#if showCloseButton}
+      <DialogPrimitive.Close
+        class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+      >
+        <XIcon />
+        <span class="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    {/if}
+  </DialogPrimitive.Content>
 </Dialog.Portal>

packages/frontend/src/lib/components/ui/dialog/dialog-description.svelte

@@ -1,17 +1,17 @@
 <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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: DialogPrimitive.DescriptionProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
 </script>
 
 <DialogPrimitive.Description
-    bind:ref
-    data-slot="dialog-description"
-    class={cn("text-muted-foreground text-sm", className)}
-    {...restProps}
+  bind:ref
+  data-slot="dialog-description"
+  class={cn("text-muted-foreground text-sm", className)}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/dialog/dialog-footer.svelte

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

packages/frontend/src/lib/components/ui/dialog/dialog-header.svelte

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

packages/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -1,20 +1,20 @@
 <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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: DialogPrimitive.OverlayProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.OverlayProps = $props();
 </script>
 
 <DialogPrimitive.Overlay
-    bind:ref
-    data-slot="dialog-overlay"
-    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/50",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  data-slot="dialog-overlay"
+  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/50",
+    className,
+  )}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/dialog/dialog-title.svelte

@@ -1,17 +1,17 @@
 <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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: DialogPrimitive.TitleProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.TitleProps = $props();
 </script>
 
 <DialogPrimitive.Title
-    bind:ref
-    data-slot="dialog-title"
-    class={cn("text-lg font-semibold leading-none", className)}
-    {...restProps}
+  bind:ref
+  data-slot="dialog-title"
+  class={cn("text-lg font-semibold leading-none", className)}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-import { Dialog as DialogPrimitive } from "bits-ui";
+  import { Dialog as DialogPrimitive } from "bits-ui";
 
-let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps =
-	$props();
+  let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
 </script>
 
 <DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

packages/frontend/src/lib/components/ui/dialog/index.ts

@@ -13,25 +13,25 @@ const Root = DialogPrimitive.Root;
 const Portal = DialogPrimitive.Portal;
 
 export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	Close,
-	//
-	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,
-	Close as DialogClose,
+  Root,
+  Title,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  Close,
+  //
+  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,
+  Close as DialogClose,
 };

packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -3,183 +3,174 @@
 -->
 
 <script lang="ts">
-import { cn } from "$lib/utils/utils";
-import UploadIcon from "@lucide/svelte/icons/upload";
-import { displaySize } from ".";
-import { useId } from "bits-ui";
-import type { FileDropZoneProps, FileRejectedReason } from "./types";
+  import { cn } from "$lib/utils/utils";
+  import UploadIcon from "@lucide/svelte/icons/upload";
+  import { displaySize } from ".";
+  import { useId } from "bits-ui";
+  import type { FileDropZoneProps, FileRejectedReason } from "./types";
 
-let {
-	id = useId(),
-	children,
-	maxFiles,
-	maxFileSize,
-	fileCount,
-	disabled = false,
-	onUpload,
-	onFileRejected,
-	accept,
-	class: className,
-	...rest
-}: FileDropZoneProps = $props();
+  let {
+    id = useId(),
+    children,
+    maxFiles,
+    maxFileSize,
+    fileCount,
+    disabled = false,
+    onUpload,
+    onFileRejected,
+    accept,
+    class: className,
+    ...rest
+  }: FileDropZoneProps = $props();
 
-if (maxFiles !== undefined && fileCount === undefined) {
-	console.warn(
-		"Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
-	);
-}
+  if (maxFiles !== undefined && fileCount === undefined) {
+    console.warn(
+      "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
+    );
+  }
 
-let uploading = $state(false);
+  let uploading = $state(false);
 
-const drop = async (
-	e: DragEvent & {
-		currentTarget: EventTarget & HTMLLabelElement;
-	},
-) => {
-	if (disabled || !canUploadFiles) return;
+  const drop = async (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLLabelElement;
+    },
+  ) => {
+    if (disabled || !canUploadFiles) return;
 
-	e.preventDefault();
+    e.preventDefault();
 
-	const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+    const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
 
-	await upload(droppedFiles);
-};
+    await upload(droppedFiles);
+  };
 
-const change = async (
-	e: Event & {
-		currentTarget: EventTarget & HTMLInputElement;
-	},
-) => {
-	if (disabled) return;
+  const change = async (
+    e: Event & {
+      currentTarget: EventTarget & HTMLInputElement;
+    },
+  ) => {
+    if (disabled) return;
 
-	const selectedFiles = e.currentTarget.files;
+    const selectedFiles = e.currentTarget.files;
 
-	if (!selectedFiles) return;
+    if (!selectedFiles) return;
 
-	await upload(Array.from(selectedFiles));
+    await upload(Array.from(selectedFiles));
 
-	// this if a file fails and we upload the same file again we still get feedback
-	(e.target as HTMLInputElement).value = "";
-};
+    // this if a file fails and we upload the same file again we still get feedback
+    (e.target as HTMLInputElement).value = "";
+  };
 
-const shouldAcceptFile = (
-	file: File,
-	fileNumber: number,
-): FileRejectedReason | undefined => {
-	if (maxFileSize !== undefined && file.size > maxFileSize)
-		return "Maximum file size exceeded";
+  const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
+    if (maxFileSize !== undefined && file.size > maxFileSize) return "Maximum file size exceeded";
 
-	if (maxFiles !== undefined && fileNumber > maxFiles)
-		return "Maximum files uploaded";
+    if (maxFiles !== undefined && fileNumber > maxFiles) return "Maximum files uploaded";
 
-	if (!accept) return undefined;
+    if (!accept) return undefined;
 
-	const acceptedTypes = accept.split(",").map((a) => a.trim().toLowerCase());
-	const fileType = file.type.toLowerCase();
-	const fileName = file.name.toLowerCase();
+    const acceptedTypes = accept.split(",").map((a) => a.trim().toLowerCase());
+    const fileType = file.type.toLowerCase();
+    const fileName = file.name.toLowerCase();
 
-	const isAcceptable = acceptedTypes.some((pattern) => {
-		// check extension like .mp4
-		if (fileType.startsWith(".")) {
-			return fileName.endsWith(pattern);
-		}
+    const isAcceptable = acceptedTypes.some((pattern) => {
+      // check extension like .mp4
+      if (fileType.startsWith(".")) {
+        return fileName.endsWith(pattern);
+      }
 
-		// if pattern has wild card like video/*
-		if (pattern.endsWith("/*")) {
-			const baseType = pattern.slice(0, pattern.indexOf("/*"));
-			return fileType.startsWith(baseType + "/");
-		}
+      // if pattern has wild card like video/*
+      if (pattern.endsWith("/*")) {
+        const baseType = pattern.slice(0, pattern.indexOf("/*"));
+        return fileType.startsWith(baseType + "/");
+      }
 
-		// otherwise it must be a specific type like video/mp4
-		return fileType === pattern;
-	});
+      // otherwise it must be a specific type like video/mp4
+      return fileType === pattern;
+    });
 
-	if (!isAcceptable) return "File type not allowed";
+    if (!isAcceptable) return "File type not allowed";
 
-	return undefined;
-};
+    return undefined;
+  };
 
-const upload = async (uploadFiles: File[]) => {
-	uploading = true;
+  const upload = async (uploadFiles: File[]) => {
+    uploading = true;
 
-	const validFiles: File[] = [];
+    const validFiles: File[] = [];
 
-	for (let i = 0; i < uploadFiles.length; i++) {
-		const file = uploadFiles[i];
+    for (let i = 0; i < uploadFiles.length; i++) {
+      const file = uploadFiles[i];
 
-		const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
+      const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
 
-		if (rejectedReason) {
-			onFileRejected?.({ file, reason: rejectedReason });
-			continue;
-		}
+      if (rejectedReason) {
+        onFileRejected?.({ file, reason: rejectedReason });
+        continue;
+      }
 
-		validFiles.push(file);
-	}
+      validFiles.push(file);
+    }
 
-	await onUpload(validFiles);
+    await onUpload(validFiles);
 
-	uploading = false;
-};
+    uploading = false;
+  };
 
-const canUploadFiles = $derived(
-	!disabled &&
-		!uploading &&
-		!(
-			maxFiles !== undefined &&
-			fileCount !== undefined &&
-			fileCount >= maxFiles
-		),
-);
+  const canUploadFiles = $derived(
+    !disabled &&
+      !uploading &&
+      !(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles),
+  );
 </script>
 
 <label
-    ondragover={(e) => e.preventDefault()}
-    ondrop={drop}
-    for={id}
-    aria-disabled={!canUploadFiles}
-    class={cn(
-        "border-border hover:bg-accent/25 flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed p-6 transition-all hover:cursor-pointer aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed",
-        className,
-    )}
+  ondragover={(e) => e.preventDefault()}
+  ondrop={drop}
+  for={id}
+  aria-disabled={!canUploadFiles}
+  class={cn(
+    "border-border hover:bg-accent/25 flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed p-6 transition-all hover:cursor-pointer aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed",
+    className,
+  )}
 >
-    {#if children}
-        {@render children()}
-    {:else}
-        <div class="flex flex-col place-items-center justify-center gap-2">
-            <div
-                class="border-border text-muted-foreground flex size-14 place-items-center justify-center rounded-full border border-dashed"
-            >
-                <UploadIcon class="size-7" />
-            </div>
-            <div class="flex flex-col gap-0.5 text-center">
-                <span class="text-muted-foreground font-medium">
-                    Drag 'n' drop files here, or click to select files
-                </span>
-                {#if maxFiles || maxFileSize}
-                    <span class="text-muted-foreground/75 text-sm">
-                        {#if maxFiles}
-                            <span>You can upload {maxFiles} files</span>
-                        {/if}
-                        {#if maxFiles && maxFileSize}
-                            <span>(up to {displaySize(maxFileSize)} each)</span>
-                        {/if}
-                        {#if maxFileSize && !maxFiles}
-                            <span>Maximum size {displaySize(maxFileSize)}</span>
-                        {/if}
-                    </span>
-                {/if}
-            </div>
-        </div>
-    {/if}
-    <input
-        {...rest}
-        disabled={!canUploadFiles}
-        {id}
-        {accept}
-        multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
-        type="file"
-        onchange={change}
-        class="hidden"
-    />
+  {#if children}
+    {@render children()}
+  {:else}
+    <div class="flex flex-col place-items-center justify-center gap-2">
+      <div
+        class="border-border text-muted-foreground flex size-14 place-items-center justify-center rounded-full border border-dashed"
+      >
+        <UploadIcon class="size-7" />
+      </div>
+      <div class="flex flex-col gap-0.5 text-center">
+        <span class="text-muted-foreground font-medium">
+          Drag 'n' drop files here, or click to select files
+        </span>
+        {#if maxFiles || maxFileSize}
+          <span class="text-muted-foreground/75 text-sm">
+            {#if maxFiles}
+              <span>You can upload {maxFiles} files</span>
+            {/if}
+            {#if maxFiles && maxFileSize}
+              <span>(up to {displaySize(maxFileSize)} each)</span>
+            {/if}
+            {#if maxFileSize && !maxFiles}
+              <span>Maximum size {displaySize(maxFileSize)}</span>
+            {/if}
+          </span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  <input
+    {...rest}
+    disabled={!canUploadFiles}
+    {id}
+    {accept}
+    multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
+    type="file"
+    onchange={change}
+    class="hidden"
+  />
 </label>

packages/frontend/src/lib/components/ui/file-drop-zone/index.ts

@@ -6,13 +6,13 @@ import FileDropZone from "./file-drop-zone.svelte";
 import { type FileRejectedReason, type FileDropZoneProps } from "./types";
 
 export const displaySize = (bytes: number): string => {
-	if (bytes < KILOBYTE) return `${bytes.toFixed(0)} B`;
+  if (bytes < KILOBYTE) return `${bytes.toFixed(0)} B`;
 
-	if (bytes < MEGABYTE) return `${(bytes / KILOBYTE).toFixed(0)} KB`;
+  if (bytes < MEGABYTE) return `${(bytes / KILOBYTE).toFixed(0)} KB`;
 
-	if (bytes < GIGABYTE) return `${(bytes / MEGABYTE).toFixed(0)} MB`;
+  if (bytes < GIGABYTE) return `${(bytes / MEGABYTE).toFixed(0)} MB`;
 
-	return `${(bytes / GIGABYTE).toFixed(0)} GB`;
+  return `${(bytes / GIGABYTE).toFixed(0)} GB`;
 };
 
 // Utilities for working with file sizes

packages/frontend/src/lib/components/ui/file-drop-zone/types.ts

@@ -6,46 +6,46 @@ import type { WithChildren } from "bits-ui";
 import type { HTMLInputAttributes } from "svelte/elements";
 
 export type FileRejectedReason =
-	| "Maximum file size exceeded"
-	| "File type not allowed"
-	| "Maximum files uploaded";
+  | "Maximum file size exceeded"
+  | "File type not allowed"
+  | "Maximum files uploaded";
 
 export type FileDropZonePropsWithoutHTML = WithChildren<{
-	ref?: HTMLInputElement | null;
-	/** Called with the uploaded files when the user drops or clicks and selects their files.
-	 *
-	 * @param files
-	 */
-	onUpload: (files: File[]) => Promise<void>;
-	/** The maximum amount files allowed to be uploaded */
-	maxFiles?: number;
-	fileCount?: number;
-	/** The maximum size of a file in bytes */
-	maxFileSize?: number;
-	/** Called when a file does not meet the upload criteria (size, or type) */
-	onFileRejected?: (opts: { reason: FileRejectedReason; file: File }) => void;
+  ref?: HTMLInputElement | null;
+  /** Called with the uploaded files when the user drops or clicks and selects their files.
+   *
+   * @param files
+   */
+  onUpload: (files: File[]) => Promise<void>;
+  /** The maximum amount files allowed to be uploaded */
+  maxFiles?: number;
+  fileCount?: number;
+  /** The maximum size of a file in bytes */
+  maxFileSize?: number;
+  /** Called when a file does not meet the upload criteria (size, or type) */
+  onFileRejected?: (opts: { reason: FileRejectedReason; file: File }) => void;
 
-	// just for extra documentation
-	/** Takes a comma separated list of one or more file types.
-	 *
-	 *  [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
-	 *
-	 * ### Usage
-	 * ```svelte
-	 * <FileDropZone
-	 * 		accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-	 * />
-	 * ```
-	 *
-	 * ### Common Values
-	 * ```svelte
-	 * <FileDropZone accept="audio/*"/>
-	 * <FileDropZone accept="image/*"/>
-	 * <FileDropZone accept="video/*"/>
-	 * ```
-	 */
-	accept?: string;
+  // just for extra documentation
+  /** Takes a comma separated list of one or more file types.
+   *
+   *  [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+   *
+   * ### Usage
+   * ```svelte
+   * <FileDropZone
+   * 		accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+   * />
+   * ```
+   *
+   * ### Common Values
+   * ```svelte
+   * <FileDropZone accept="audio/*"/>
+   * <FileDropZone accept="image/*"/>
+   * <FileDropZone accept="video/*"/>
+   * ```
+   */
+  accept?: string;
 }>;
 
 export type FileDropZoneProps = FileDropZonePropsWithoutHTML &
-	Omit<HTMLInputAttributes, "multiple" | "files">;
+  Omit<HTMLInputAttributes, "multiple" | "files">;

packages/frontend/src/lib/components/ui/input/index.ts

@@ -1,7 +1,7 @@
 import Root from "./input.svelte";
 
 export {
-	Root,
-	//
-	Root as Input,
+  Root,
+  //
+  Root as Input,
 };

packages/frontend/src/lib/components/ui/input/input.svelte

@@ -1,57 +1,51 @@
 <script lang="ts">
-import type {
-	HTMLInputAttributes,
-	HTMLInputTypeAttribute,
-} from "svelte/elements";
-import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
 
-type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+  type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
-type Props = WithElementRef<
-	Omit<HTMLInputAttributes, "type"> &
-		(
-			| { type: "file"; files?: FileList }
-			| { type?: InputType; files?: undefined }
-		)
->;
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, "type"> &
+      ({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+  >;
 
-let {
-	ref = $bindable(null),
-	value = $bindable(),
-	type,
-	files = $bindable(),
-	class: className,
-	...restProps
-}: Props = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    ...restProps
+  }: Props = $props();
 </script>
 
 {#if type === "file"}
-    <input
-        bind:this={ref}
-        data-slot="input"
-        class={cn(
-            "selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            className,
-        )}
-        type="file"
-        bind:files
-        bind:value
-        {...restProps}
-    />
+  <input
+    bind:this={ref}
+    data-slot="input"
+    class={cn(
+      "selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      className,
+    )}
+    type="file"
+    bind:files
+    bind:value
+    {...restProps}
+  />
 {:else}
-    <input
-        bind:this={ref}
-        data-slot="input"
-        class={cn(
-            "border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            className,
-        )}
-        {type}
-        bind:value
-        {...restProps}
-    />
+  <input
+    bind:this={ref}
+    data-slot="input"
+    class={cn(
+      "border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      className,
+    )}
+    {type}
+    bind:value
+    {...restProps}
+  />
 {/if}

packages/frontend/src/lib/components/ui/label/index.ts

@@ -1,7 +1,7 @@
 import Root from "./label.svelte";
 
 export {
-	Root,
-	//
-	Root as Label,
+  Root,
+  //
+  Root as Label,
 };

packages/frontend/src/lib/components/ui/label/label.svelte

@@ -1,20 +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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: LabelPrimitive.RootProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: LabelPrimitive.RootProps = $props();
 </script>
 
 <LabelPrimitive.Root
-    bind:ref
-    data-slot="label"
-    class={cn(
-        "flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  data-slot="label"
+  class={cn(
+    "flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+    className,
+  )}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/select/index.ts

@@ -13,25 +13,25 @@ import GroupHeading from "./select-group-heading.svelte";
 const Root = SelectPrimitive.Root;
 
 export {
-	Root,
-	Group,
-	Label,
-	Item,
-	Content,
-	Trigger,
-	Separator,
-	ScrollDownButton,
-	ScrollUpButton,
-	GroupHeading,
-	//
-	Root as Select,
-	Group as SelectGroup,
-	Label as SelectLabel,
-	Item as SelectItem,
-	Content as SelectContent,
-	Trigger as SelectTrigger,
-	Separator as SelectSeparator,
-	ScrollDownButton as SelectScrollDownButton,
-	ScrollUpButton as SelectScrollUpButton,
-	GroupHeading as SelectGroupHeading,
+  Root,
+  Group,
+  Label,
+  Item,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  GroupHeading,
+  //
+  Root as Select,
+  Group as SelectGroup,
+  Label as SelectLabel,
+  Item as SelectItem,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton,
+  GroupHeading as SelectGroupHeading,
 };

packages/frontend/src/lib/components/ui/select/select-content.svelte

@@ -1,40 +1,40 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui";
-import SelectScrollUpButton from "./select-scroll-up-button.svelte";
-import SelectScrollDownButton from "./select-scroll-down-button.svelte";
-import { cn, type WithoutChild } from "$lib/utils.js";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+  import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+  import { cn, type WithoutChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	sideOffset = 4,
-	portalProps,
-	children,
-	...restProps
-}: WithoutChild<SelectPrimitive.ContentProps> & {
-	portalProps?: SelectPrimitive.PortalProps;
-} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+  } = $props();
 </script>
 
 <SelectPrimitive.Portal {...portalProps}>
-    <SelectPrimitive.Content
-        bind:ref
-        {sideOffset}
-        data-slot="select-content"
-        class={cn(
-            "bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-            className,
-        )}
-        {...restProps}
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    data-slot="select-content"
+    class={cn(
+      "bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className,
+    )}
+    {...restProps}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class={cn(
+        "h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1",
+      )}
     >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-            class={cn(
-                "h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1",
-            )}
-        >
-            {@render children?.()}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-    </SelectPrimitive.Content>
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
 </SelectPrimitive.Portal>

packages/frontend/src/lib/components/ui/select/select-group-heading.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui";
-import { cn } from "$lib/utils.js";
-import type { ComponentProps } from "svelte";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+  import type { ComponentProps } from "svelte";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
 </script>
 
 <SelectPrimitive.GroupHeading
-    bind:ref
-    data-slot="select-group-heading"
-    class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-    {...restProps}
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </SelectPrimitive.GroupHeading>

packages/frontend/src/lib/components/ui/select/select-group.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui";
+  import { Select as SelectPrimitive } from "bits-ui";
 
-// eslint-disable-next-line no-useless-assignment
-let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
-	$props();
+  // eslint-disable-next-line no-useless-assignment
+  let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
 </script>
 
 <SelectPrimitive.Group data-slot="select-group" {...restProps} />

packages/frontend/src/lib/components/ui/select/select-item.svelte

@@ -1,38 +1,38 @@
 <script lang="ts">
-import CheckIcon from "@lucide/svelte/icons/check";
-import { Select as SelectPrimitive } from "bits-ui";
-import { cn, type WithoutChild } from "$lib/utils.js";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn, type WithoutChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	value,
-	label,
-	children: childrenProp,
-	...restProps
-}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ItemProps> = $props();
 </script>
 
 <SelectPrimitive.Item
-    bind:ref
-    {value}
-    data-slot="select-item"
-    class={cn(
-        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(
+    "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
 >
-    {#snippet children({ selected, highlighted })}
-        <span class="absolute right-2 flex size-3.5 items-center justify-center">
-            {#if selected}
-                <CheckIcon class="size-4" />
-            {/if}
-        </span>
-        {#if childrenProp}
-            {@render childrenProp({ selected, highlighted })}
-        {:else}
-            {label || value}
-        {/if}
-    {/snippet}
+  {#snippet children({ selected, highlighted })}
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      {#if selected}
+        <CheckIcon class="size-4" />
+      {/if}
+    </span>
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+    {/if}
+  {/snippet}
 </SelectPrimitive.Item>

packages/frontend/src/lib/components/ui/select/select-label.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-import { cn, type WithElementRef } from "$lib/utils.js";
-import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	...restProps
-}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="select-label"
-    class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-    {...restProps}
+  bind:this={ref}
+  data-slot="select-label"
+  class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+  {...restProps}
 >
-    {@render children?.()}
+  {@render children?.()}
 </div>

packages/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-import { Select as SelectPrimitive } from "bits-ui";
-import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
 </script>
 
 <SelectPrimitive.ScrollDownButton
-    bind:ref
-    data-slot="select-scroll-down-button"
-    class={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...restProps}
+  bind:ref
+  data-slot="select-scroll-down-button"
+  class={cn("flex cursor-default items-center justify-center py-1", className)}
+  {...restProps}
 >
-    <ChevronDownIcon class="size-4" />
+  <ChevronDownIcon class="size-4" />
 </SelectPrimitive.ScrollDownButton>

packages/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
-import { Select as SelectPrimitive } from "bits-ui";
-import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
 </script>
 
 <SelectPrimitive.ScrollUpButton
-    bind:ref
-    data-slot="select-scroll-up-button"
-    class={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...restProps}
+  bind:ref
+  data-slot="select-scroll-up-button"
+  class={cn("flex cursor-default items-center justify-center py-1", className)}
+  {...restProps}
 >
-    <ChevronUpIcon class="size-4" />
+  <ChevronUpIcon class="size-4" />
 </SelectPrimitive.ScrollUpButton>

packages/frontend/src/lib/components/ui/select/select-separator.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-import type { Separator as SeparatorPrimitive } from "bits-ui";
-import { Separator } from "$lib/components/ui/separator/index.js";
-import { cn } from "$lib/utils.js";
+  import type { Separator as SeparatorPrimitive } from "bits-ui";
+  import { Separator } from "$lib/components/ui/separator/index.js";
+  import { cn } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: SeparatorPrimitive.RootProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <Separator
-    bind:ref
-    data-slot="select-separator"
-    class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-    {...restProps}
+  bind:ref
+  data-slot="select-separator"
+  class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/select/select-trigger.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
-import { Select as SelectPrimitive } from "bits-ui";
-import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-import { cn, type WithoutChild } from "$lib/utils.js";
+  import { Select as SelectPrimitive } from "bits-ui";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import { cn, type WithoutChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	children,
-	size = "default",
-	...restProps
-}: WithoutChild<SelectPrimitive.TriggerProps> & {
-	size?: "sm" | "default";
-} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size = "default",
+    ...restProps
+  }: WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: "sm" | "default";
+  } = $props();
 </script>
 
 <SelectPrimitive.Trigger
-    bind:ref
-    data-slot="select-trigger"
-    data-size={size}
-    class={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  data-slot="select-trigger"
+  data-size={size}
+  class={cn(
+    "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
 >
-    {@render children?.()}
-    <ChevronDownIcon class="size-4 opacity-50" />
+  {@render children?.()}
+  <ChevronDownIcon class="size-4 opacity-50" />
 </SelectPrimitive.Trigger>

packages/frontend/src/lib/components/ui/separator/index.ts

@@ -1,7 +1,7 @@
 import Root from "./separator.svelte";
 
 export {
-	Root,
-	//
-	Root as Separator,
+  Root,
+  //
+  Root as Separator,
 };

packages/frontend/src/lib/components/ui/separator/separator.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-import { Separator as SeparatorPrimitive } from "bits-ui";
-import { cn } from "$lib/utils.js";
+  import { Separator as SeparatorPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: SeparatorPrimitive.RootProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
-    bind:ref
-    data-slot="separator"
-    class={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  data-slot="separator"
+  class={cn(
+    "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+    className,
+  )}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/slider/index.ts

@@ -1,7 +1,7 @@
 import Root from "./slider.svelte";
 
 export {
-	Root,
-	//
-	Root as Slider,
+  Root,
+  //
+  Root as Slider,
 };

packages/frontend/src/lib/components/ui/slider/slider.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-import { Slider as SliderPrimitive } from "bits-ui";
-import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import { Slider as SliderPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
-let {
-	ref = $bindable(null),
-	value = $bindable(),
-	orientation = "horizontal",
-	class: className,
-	...restProps
-}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = "horizontal",
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
 </script>
 
 <!--
@@ -16,37 +16,37 @@ Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
 <SliderPrimitive.Root
-    bind:ref
-    bind:value={value as never}
-    data-slot="slider"
-    {orientation}
-    class={cn(
-        "relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  bind:value={value as never}
+  data-slot="slider"
+  {orientation}
+  class={cn(
+    "relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
+    className,
+  )}
+  {...restProps}
 >
-    {#snippet children({ thumbs })}
-        <span
-            data-orientation={orientation}
-            data-slot="slider-track"
-            class={cn(
-                "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
-            )}
-        >
-            <SliderPrimitive.Range
-                data-slot="slider-range"
-                class={cn(
-                    "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-                )}
-            />
-        </span>
-        {#each thumbs as thumb (thumb)}
-            <SliderPrimitive.Thumb
-                data-slot="slider-thumb"
-                index={thumb}
-                class="border-primary bg-background ring-ring/50 focus-visible:outline-hidden block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
-            />
-        {/each}
-    {/snippet}
+  {#snippet children({ thumbs })}
+    <span
+      data-orientation={orientation}
+      data-slot="slider-track"
+      class={cn(
+        "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
+      )}
+    >
+      <SliderPrimitive.Range
+        data-slot="slider-range"
+        class={cn(
+          "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+        )}
+      />
+    </span>
+    {#each thumbs as thumb (thumb)}
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        index={thumb}
+        class="border-primary bg-background ring-ring/50 focus-visible:outline-hidden block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+      />
+    {/each}
+  {/snippet}
 </SliderPrimitive.Root>

packages/frontend/src/lib/components/ui/sonner/sonner.svelte

@@ -1,16 +1,13 @@
 <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";
 
-let { ...restProps }: SonnerProps = $props();
+  let { ...restProps }: SonnerProps = $props();
 </script>
 
 <Sonner
-    theme={mode.current}
-    class="toaster group"
-    style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
-    {...restProps}
+  theme={mode.current}
+  class="toaster group"
+  style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/tabs/index.ts

@@ -4,13 +4,13 @@ import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
 
 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,
 };

packages/frontend/src/lib/components/ui/tabs/tabs-content.svelte

@@ -1,17 +1,17 @@
 <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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: TabsPrimitive.ContentProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ContentProps = $props();
 </script>
 
 <TabsPrimitive.Content
-    bind:ref
-    data-slot="tabs-content"
-    class={cn("flex-1 outline-none", className)}
-    {...restProps}
+  bind:ref
+  data-slot="tabs-content"
+  class={cn("flex-1 outline-none", className)}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/tabs/tabs-list.svelte

@@ -1,20 +1,16 @@
 <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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: TabsPrimitive.ListProps = $props();
+  let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
-    bind:ref
-    data-slot="tabs-list"
-    class={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  data-slot="tabs-list"
+  class={cn(
+    "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+    className,
+  )}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -1,20 +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";
 
-let {
-	ref = $bindable(null),
-	class: className,
-	...restProps
-}: TabsPrimitive.TriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.TriggerProps = $props();
 </script>
 
 <TabsPrimitive.Trigger
-    bind:ref
-    data-slot="tabs-trigger"
-    class={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-    )}
-    {...restProps}
+  bind:ref
+  data-slot="tabs-trigger"
+  class={cn(
+    "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/tabs/tabs.svelte

@@ -1,19 +1,19 @@
 <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";
 
-let {
-	ref = $bindable(null),
-	value = $bindable(""),
-	class: className,
-	...restProps
-}: TabsPrimitive.RootProps = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(""),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.RootProps = $props();
 </script>
 
 <TabsPrimitive.Root
-    bind:ref
-    bind:value
-    data-slot="tabs"
-    class={cn("flex flex-col gap-2", className)}
-    {...restProps}
+  bind:ref
+  bind:value
+  data-slot="tabs"
+  class={cn("flex flex-col gap-2", className)}
+  {...restProps}
 />

packages/frontend/src/lib/components/ui/tags-input/tags-input-tag.svelte

@@ -3,26 +3,26 @@
 -->
 
 <script lang="ts">
-import XIcon from "@lucide/svelte/icons/x";
+  import XIcon from "@lucide/svelte/icons/x";
 
-type Props = {
-	value: string;
-	disabled: boolean | null;
-	active: boolean;
-	onDelete: (value: string) => void;
-};
+  type Props = {
+    value: string;
+    disabled: boolean | null;
+    active: boolean;
+    onDelete: (value: string) => void;
+  };
 
-let { value, disabled, onDelete, active }: Props = $props();
+  let { value, disabled, onDelete, active }: Props = $props();
 </script>
 
 <div
-    class="bg-secondary ring-offset-background hover:bg-secondary/90 aria-selected:bg-secondary/90 aria-selected:ring-ring flex place-items-center gap-2 rounded-md px-2 py-0.5 transition-all hover:cursor-default aria-selected:ring-2 aria-selected:ring-offset-2"
-    aria-selected={active}
+  class="bg-secondary ring-offset-background hover:bg-secondary/90 aria-selected:bg-secondary/90 aria-selected:ring-ring flex place-items-center gap-2 rounded-md px-2 py-0.5 transition-all hover:cursor-default aria-selected:ring-2 aria-selected:ring-offset-2"
+  aria-selected={active}
 >
-    <span>
-        {value}
-    </span>
-    <button type="button" {disabled} onclick={() => onDelete(value)}>
-        <XIcon class="size-4" />
-    </button>
+  <span>
+    {value}
+  </span>
+  <button type="button" {disabled} onclick={() => onDelete(value)}>
+    <XIcon class="size-4" />
+  </button>
 </div>

packages/frontend/src/lib/components/ui/tags-input/tags-input.svelte

@@ -3,209 +3,208 @@
 -->
 
 <script lang="ts">
-import { cn } from "$lib/utils/utils";
-import type { TagsInputProps } from "./types";
-import TagsInputTag from "./tags-input-tag.svelte";
-import { untrack } from "svelte";
+  import { cn } from "$lib/utils/utils";
+  import type { TagsInputProps } from "./types";
+  import TagsInputTag from "./tags-input-tag.svelte";
+  import { untrack } from "svelte";
 
-const defaultValidate: TagsInputProps["validate"] = (val, tags) => {
-	const transformed = val.trim();
+  const defaultValidate: TagsInputProps["validate"] = (val, tags) => {
+    const transformed = val.trim();
 
-	// disallow empties
-	if (transformed.length === 0) return undefined;
+    // disallow empties
+    if (transformed.length === 0) return undefined;
 
-	// disallow duplicates
-	if (tags.find((t) => transformed === t)) return undefined;
+    // disallow duplicates
+    if (tags.find((t) => transformed === t)) return undefined;
 
-	return transformed;
-};
+    return transformed;
+  };
 
-let {
-	value = $bindable([]),
-	placeholder,
-	class: className,
-	disabled = false,
-	validate = defaultValidate,
-	...rest
-}: TagsInputProps = $props();
+  let {
+    value = $bindable([]),
+    placeholder,
+    class: className,
+    disabled = false,
+    validate = defaultValidate,
+    ...rest
+  }: TagsInputProps = $props();
 
-let inputValue = $state("");
-let tagIndex = $state<number>();
-let invalid = $state(false);
-let isComposing = $state(false);
+  let inputValue = $state("");
+  let tagIndex = $state<number>();
+  let invalid = $state(false);
+  let isComposing = $state(false);
 
-$effect(() => {
-	// whenever input value changes reset invalid
-	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-	inputValue;
+  $effect(() => {
+    // whenever input value changes reset invalid
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    inputValue;
 
-	untrack(() => {
-		invalid = false;
-	});
-});
+    untrack(() => {
+      invalid = false;
+    });
+  });
 
-const enter = () => {
-	if (isComposing) return;
+  const enter = () => {
+    if (isComposing) return;
 
-	const validated = validate(inputValue, value);
+    const validated = validate(inputValue, value);
 
-	if (!validated) {
-		invalid = true;
-		return;
-	}
+    if (!validated) {
+      invalid = true;
+      return;
+    }
 
-	value = [...value, validated];
-	inputValue = "";
-};
+    value = [...value, validated];
+    inputValue = "";
+  };
 
-const compositionStart = () => {
-	isComposing = true;
-};
+  const compositionStart = () => {
+    isComposing = true;
+  };
 
-const compositionEnd = () => {
-	isComposing = false;
-};
+  const compositionEnd = () => {
+    isComposing = false;
+  };
 
-const keydown = (e: KeyboardEvent) => {
-	const target = e.target as HTMLInputElement;
+  const keydown = (e: KeyboardEvent) => {
+    const target = e.target as HTMLInputElement;
 
-	if (e.key === "Enter") {
-		// prevent form submit
-		e.preventDefault();
+    if (e.key === "Enter") {
+      // prevent form submit
+      e.preventDefault();
 
-		if (isComposing) return;
+      if (isComposing) return;
 
-		enter();
-		return;
-	}
+      enter();
+      return;
+    }
 
-	const isAtBeginning =
-		target.selectionStart === 0 && target.selectionEnd === 0;
+    const isAtBeginning = target.selectionStart === 0 && target.selectionEnd === 0;
 
-	let shouldResetIndex = true;
+    let shouldResetIndex = true;
 
-	if (e.key === "Backspace") {
-		if (isAtBeginning) {
-			e.preventDefault();
+    if (e.key === "Backspace") {
+      if (isAtBeginning) {
+        e.preventDefault();
 
-			if (tagIndex !== undefined) {
-				deleteIndex(tagIndex);
+        if (tagIndex !== undefined) {
+          deleteIndex(tagIndex);
 
-				// focus previous
-				const prev = tagIndex - 1;
+          // focus previous
+          const prev = tagIndex - 1;
 
-				if (prev < 0) {
-					tagIndex = undefined;
-				} else {
-					tagIndex = prev;
-				}
-			} else {
-				tagIndex = value.length - 1;
-			}
+          if (prev < 0) {
+            tagIndex = undefined;
+          } else {
+            tagIndex = prev;
+          }
+        } else {
+          tagIndex = value.length - 1;
+        }
 
-			shouldResetIndex = false;
-		}
-	}
+        shouldResetIndex = false;
+      }
+    }
 
-	if (e.key === "Delete") {
-		if (isAtBeginning) {
-			if (inputValue.length === 0) {
-				if (tagIndex !== undefined) {
-					e.preventDefault();
+    if (e.key === "Delete") {
+      if (isAtBeginning) {
+        if (inputValue.length === 0) {
+          if (tagIndex !== undefined) {
+            e.preventDefault();
 
-					deleteIndex(tagIndex);
+            deleteIndex(tagIndex);
 
-					// stay focused on the same index unless value.length === 0
-					if (value.length === 0) tagIndex = undefined;
+            // stay focused on the same index unless value.length === 0
+            if (value.length === 0) tagIndex = undefined;
 
-					shouldResetIndex = false;
-				}
-			}
-		}
-	}
+            shouldResetIndex = false;
+          }
+        }
+      }
+    }
 
-	// controls for tag selection
-	if (isAtBeginning) {
-		// left
-		if (e.key === "ArrowLeft") {
-			if (tagIndex !== undefined) {
-				const prev = tagIndex - 1;
+    // controls for tag selection
+    if (isAtBeginning) {
+      // left
+      if (e.key === "ArrowLeft") {
+        if (tagIndex !== undefined) {
+          const prev = tagIndex - 1;
 
-				if (prev < 0) {
-					tagIndex = 0;
-				} else {
-					tagIndex = prev;
-				}
-			} else {
-				// set initial index
-				tagIndex = value.length - 1;
-			}
+          if (prev < 0) {
+            tagIndex = 0;
+          } else {
+            tagIndex = prev;
+          }
+        } else {
+          // set initial index
+          tagIndex = value.length - 1;
+        }
 
-			shouldResetIndex = false;
-		}
+        shouldResetIndex = false;
+      }
 
-		// right
-		// we can only move right if the value is empty
-		if (inputValue.length === 0) {
-			if (e.key === "ArrowRight") {
-				if (tagIndex !== undefined) {
-					const next = tagIndex + 1;
+      // right
+      // we can only move right if the value is empty
+      if (inputValue.length === 0) {
+        if (e.key === "ArrowRight") {
+          if (tagIndex !== undefined) {
+            const next = tagIndex + 1;
 
-					if (next > value.length - 1) {
-						tagIndex = undefined;
-					} else {
-						tagIndex = next;
-					}
+            if (next > value.length - 1) {
+              tagIndex = undefined;
+            } else {
+              tagIndex = next;
+            }
 
-					shouldResetIndex = false;
-				}
-			}
-		}
-	}
+            shouldResetIndex = false;
+          }
+        }
+      }
+    }
 
-	// reset the tag index to undefined
-	if (shouldResetIndex) {
-		tagIndex = undefined;
-	}
-};
+    // reset the tag index to undefined
+    if (shouldResetIndex) {
+      tagIndex = undefined;
+    }
+  };
 
-const deleteValue = (val: string) => {
-	const index = value.findIndex((v) => val === v);
+  const deleteValue = (val: string) => {
+    const index = value.findIndex((v) => val === v);
 
-	if (index === -1) return;
+    if (index === -1) return;
 
-	deleteIndex(index);
-};
+    deleteIndex(index);
+  };
 
-const deleteIndex = (index: number) => {
-	value = [...value.slice(0, index), ...value.slice(index + 1)];
-};
+  const deleteIndex = (index: number) => {
+    value = [...value.slice(0, index), ...value.slice(index + 1)];
+  };
 
-const blur = () => {
-	tagIndex = undefined;
-};
+  const blur = () => {
+    tagIndex = undefined;
+  };
 </script>
 
 <div
-    class={cn(
-        "border-input bg-background selection:bg-primary dark:bg-input/30 flex min-h-[36px] w-full flex-wrap place-items-center gap-1 rounded-md border py-0.5 pr-1 pl-1 disabled:opacity-50 aria-disabled:cursor-not-allowed",
-        className,
-    )}
-    aria-disabled={disabled}
+  class={cn(
+    "border-input bg-background selection:bg-primary dark:bg-input/30 flex min-h-[36px] w-full flex-wrap place-items-center gap-1 rounded-md border py-0.5 pr-1 pl-1 disabled:opacity-50 aria-disabled:cursor-not-allowed",
+    className,
+  )}
+  aria-disabled={disabled}
 >
-    {#each value as tag, i (tag)}
-        <TagsInputTag value={tag} {disabled} onDelete={deleteValue} active={i === tagIndex} />
-    {/each}
-    <input
-        {...rest}
-        bind:value={inputValue}
-        onblur={blur}
-        oncompositionstart={compositionStart}
-        oncompositionend={compositionEnd}
-        {disabled}
-        {placeholder}
-        data-invalid={invalid}
-        onkeydown={keydown}
-        class="placeholder:text-muted-foreground min-w-16 shrink grow basis-0 border-none bg-transparent px-2 outline-hidden focus:outline-hidden disabled:cursor-not-allowed data-[invalid=true]:text-red-500 md:text-sm"
-    />
+  {#each value as tag, i (tag)}
+    <TagsInputTag value={tag} {disabled} onDelete={deleteValue} active={i === tagIndex} />
+  {/each}
+  <input
+    {...rest}
+    bind:value={inputValue}
+    onblur={blur}
+    oncompositionstart={compositionStart}
+    oncompositionend={compositionEnd}
+    {disabled}
+    {placeholder}
+    data-invalid={invalid}
+    onkeydown={keydown}
+    class="placeholder:text-muted-foreground min-w-16 shrink grow basis-0 border-none bg-transparent px-2 outline-hidden focus:outline-hidden disabled:cursor-not-allowed data-[invalid=true]:text-red-500 md:text-sm"
+  />
 </div>

packages/frontend/src/lib/components/ui/tags-input/types.ts

@@ -5,9 +5,8 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 
 export type TagsInputPropsWithoutHTML = {
-	value?: string[];
-	validate?: (val: string, tags: string[]) => string | undefined;
+  value?: string[];
+  validate?: (val: string, tags: string[]) => string | undefined;
 };
 
-export type TagsInputProps = TagsInputPropsWithoutHTML &
-	Omit<HTMLInputAttributes, "value">;
+export type TagsInputProps = TagsInputPropsWithoutHTML & Omit<HTMLInputAttributes, "value">;

packages/frontend/src/lib/components/ui/textarea/index.ts

@@ -1,7 +1,7 @@
 import Root from "./textarea.svelte";
 
 export {
-	Root,
-	//
-	Root as Textarea,
+  Root,
+  //
+  Root as Textarea,
 };

packages/frontend/src/lib/components/ui/textarea/textarea.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
-import type { HTMLTextareaAttributes } from "svelte/elements";
+  import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
 
-let {
-	ref = $bindable(null),
-	value = $bindable(),
-	class: className,
-	...restProps
-}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
-    bind:this={ref}
-    data-slot="textarea"
-    class={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className,
-    )}
-    bind:value
-    {...restProps}
+  bind:this={ref}
+  data-slot="textarea"
+  class={cn(
+    "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+    className,
+  )}
+  bind:value
+  {...restProps}
 ></textarea>