feat: add warning if passkeys missing

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type Variant, alertVariants } from "./index.js";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>

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

@@ -0,0 +1,35 @@
+import { type VariantProps, tv } from 'tailwind-variants';
+
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+import Root from './alert.svelte';
+
+export const alertVariants = tv({
+	base: '[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
+
+	variants: {
+		variant: {
+			default: 'bg-background text-foreground',
+			destructive:
+				'border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive',
+			warning:
+				'bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100 [&>svg]:text-amber-900 dark:[&>svg]:text-amber-100'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>['variant'];
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export {
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Description,
+	Root,
+	Title
+};