A new start

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+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();
+</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}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</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}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+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 type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+    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();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="alert"
+    class={cn(alertVariants({ variant }), className)}
+    {...restProps}
+    role="alert"
+>
+    {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+    bind:ref
+    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

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

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+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();
+</script>
+
+<AvatarPrimitive.Root
+    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

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

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

@@ -0,0 +1,86 @@
+<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";
+
+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 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();
+</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>
+{:else}
+    <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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</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}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+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();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</script>
+
+<p
+    bind:this={ref}
+    data-slot="card-description"
+    class={cn("text-muted-foreground text-sm", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</p>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="card-footer"
+    class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+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();
+</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}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="card-title"
+    class={cn("font-semibold leading-none", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+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();
+</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}
+>
+    {@render children?.()}
+</div>

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

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

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

@@ -0,0 +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";
+
+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}
+>
+    {#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

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

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+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

@@ -0,0 +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";
+
+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.Portal>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</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}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="dialog-header"
+    class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

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

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

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+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

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+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,
+};

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

@@ -0,0 +1,185 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<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";
+
+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",
+	);
+}
+
+let uploading = $state(false);
+
+const drop = async (
+	e: DragEvent & {
+		currentTarget: EventTarget & HTMLLabelElement;
+	},
+) => {
+	if (disabled || !canUploadFiles) return;
+
+	e.preventDefault();
+
+	const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+
+	await upload(droppedFiles);
+};
+
+const change = async (
+	e: Event & {
+		currentTarget: EventTarget & HTMLInputElement;
+	},
+) => {
+	if (disabled) return;
+
+	const selectedFiles = e.currentTarget.files;
+
+	if (!selectedFiles) return;
+
+	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 = "";
+};
+
+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 (!accept) return undefined;
+
+	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);
+		}
+
+		// 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;
+	});
+
+	if (!isAcceptable) return "File type not allowed";
+
+	return undefined;
+};
+
+const upload = async (uploadFiles: File[]) => {
+	uploading = true;
+
+	const validFiles: File[] = [];
+
+	for (let i = 0; i < uploadFiles.length; i++) {
+		const file = uploadFiles[i];
+
+		const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
+
+		if (rejectedReason) {
+			onFileRejected?.({ file, reason: rejectedReason });
+			continue;
+		}
+
+		validFiles.push(file);
+	}
+
+	await onUpload(validFiles);
+
+	uploading = false;
+};
+
+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,
+    )}
+>
+    {#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

@@ -0,0 +1,29 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+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 < MEGABYTE) return `${(bytes / KILOBYTE).toFixed(0)} KB`;
+
+	if (bytes < GIGABYTE) return `${(bytes / MEGABYTE).toFixed(0)} MB`;
+
+	return `${(bytes / GIGABYTE).toFixed(0)} GB`;
+};
+
+// Utilities for working with file sizes
+export const BYTE = 1;
+export const KILOBYTE = 1024;
+export const MEGABYTE = 1024 * KILOBYTE;
+export const GIGABYTE = 1024 * MEGABYTE;
+
+// utilities for limiting accepted files
+export const ACCEPT_IMAGE = "image/*";
+export const ACCEPT_VIDEO = "video/*";
+export const ACCEPT_AUDIO = "audio/*";
+
+export { FileDropZone, type FileRejectedReason, type FileDropZoneProps };

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

@@ -0,0 +1,51 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+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";
+
+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;
+
+	// 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">;

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

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

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+import type {
+	HTMLInputAttributes,
+	HTMLInputTypeAttribute,
+} from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+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();
+</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}
+    />
+{: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}
+    />
+{/if}

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+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,
+};

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

@@ -0,0 +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";
+
+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}
+    >
+        <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>
+</SelectPrimitive.Portal>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+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();
+</script>
+
+<SelectPrimitive.GroupHeading
+    bind:ref
+    data-slot="select-group-heading"
+    class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</SelectPrimitive.GroupHeading>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+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

@@ -0,0 +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";
+
+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}
+>
+    {#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

@@ -0,0 +1,20 @@
+<script lang="ts">
+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();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="select-label"
+    class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +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";
+
+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}
+>
+    <ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

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

@@ -0,0 +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";
+
+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}
+>
+    <ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

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

@@ -0,0 +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";
+
+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}
+/>

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

@@ -0,0 +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";
+
+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}
+>
+    {@render children?.()}
+    <ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+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();
+</script>
+
+<!--
+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}
+>
+    {#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/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+import {
+	Toaster as Sonner,
+	type ToasterProps as SonnerProps,
+} from "svelte-sonner";
+import { mode } from "mode-watcher";
+
+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}
+/>

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

@@ -0,0 +1,16 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+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,
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import TagsInput from "./tags-input.svelte";
+
+export { TagsInput };
+
+export type * from "./types";

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

@@ -0,0 +1,28 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+import XIcon from "@lucide/svelte/icons/x";
+
+type Props = {
+	value: string;
+	disabled: boolean | null;
+	active: boolean;
+	onDelete: (value: string) => void;
+};
+
+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}
+>
+    <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

@@ -0,0 +1,211 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<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";
+
+const defaultValidate: TagsInputProps["validate"] = (val, tags) => {
+	const transformed = val.trim();
+
+	// disallow empties
+	if (transformed.length === 0) return undefined;
+
+	// disallow duplicates
+	if (tags.find((t) => transformed === t)) return undefined;
+
+	return transformed;
+};
+
+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);
+
+$effect(() => {
+	// whenever input value changes reset invalid
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	inputValue;
+
+	untrack(() => {
+		invalid = false;
+	});
+});
+
+const enter = () => {
+	if (isComposing) return;
+
+	const validated = validate(inputValue, value);
+
+	if (!validated) {
+		invalid = true;
+		return;
+	}
+
+	value = [...value, validated];
+	inputValue = "";
+};
+
+const compositionStart = () => {
+	isComposing = true;
+};
+
+const compositionEnd = () => {
+	isComposing = false;
+};
+
+const keydown = (e: KeyboardEvent) => {
+	const target = e.target as HTMLInputElement;
+
+	if (e.key === "Enter") {
+		// prevent form submit
+		e.preventDefault();
+
+		if (isComposing) return;
+
+		enter();
+		return;
+	}
+
+	const isAtBeginning =
+		target.selectionStart === 0 && target.selectionEnd === 0;
+
+	let shouldResetIndex = true;
+
+	if (e.key === "Backspace") {
+		if (isAtBeginning) {
+			e.preventDefault();
+
+			if (tagIndex !== undefined) {
+				deleteIndex(tagIndex);
+
+				// focus previous
+				const prev = tagIndex - 1;
+
+				if (prev < 0) {
+					tagIndex = undefined;
+				} else {
+					tagIndex = prev;
+				}
+			} else {
+				tagIndex = value.length - 1;
+			}
+
+			shouldResetIndex = false;
+		}
+	}
+
+	if (e.key === "Delete") {
+		if (isAtBeginning) {
+			if (inputValue.length === 0) {
+				if (tagIndex !== undefined) {
+					e.preventDefault();
+
+					deleteIndex(tagIndex);
+
+					// stay focused on the same index unless value.length === 0
+					if (value.length === 0) tagIndex = undefined;
+
+					shouldResetIndex = false;
+				}
+			}
+		}
+	}
+
+	// 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;
+			}
+
+			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;
+
+					if (next > value.length - 1) {
+						tagIndex = undefined;
+					} else {
+						tagIndex = next;
+					}
+
+					shouldResetIndex = false;
+				}
+			}
+		}
+	}
+
+	// reset the tag index to undefined
+	if (shouldResetIndex) {
+		tagIndex = undefined;
+	}
+};
+
+const deleteValue = (val: string) => {
+	const index = value.findIndex((v) => val === v);
+
+	if (index === -1) return;
+
+	deleteIndex(index);
+};
+
+const deleteIndex = (index: number) => {
+	value = [...value.slice(0, index), ...value.slice(index + 1)];
+};
+
+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}
+>
+    {#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

@@ -0,0 +1,13 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import type { HTMLInputAttributes } from "svelte/elements";
+
+export type TagsInputPropsWithoutHTML = {
+	value?: string[];
+	validate?: (val: string, tags: string[]) => string | undefined;
+};
+
+export type TagsInputProps = TagsInputPropsWithoutHTML &
+	Omit<HTMLInputAttributes, "value">;

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

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+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();
+</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}
+></textarea>