@vonall/auth 0.2.1 → 0.3.1

package/dist/ui/ProfileManagementTab.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import { m } from "../messages.js";
+	import { updateUserProfile } from "../remote/app_user.remote.js";
+	import type { AppUserClient } from "../types.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	let { user }: { user: AppUserClient | null | undefined } = $props();
+	let isSubmitting = $state(false);
+
+	$effect(() => {
+		if (user) {
+			updateUserProfile.fields.name.set(user.name);
+			updateUserProfile.fields.email.set(user.email);
+		}
+	});
+</script>
+
+<Tabs.Content value="profile" class="panel mt-6 p-6 md:p-8">
+	<form
+		class="space-y-6"
+		{...updateUserProfile.enhance(async ({ submit }) => {
+			isSubmitting = true;
+			try {
+				// submit() resolves false when validation failed; the field issues show why
+				if (await submit()) toast.success(m().profileUpdated);
+			} catch (e) {
+				toast.error(messageOf(e, m().profileNotUpdated));
+			} finally {
+				isSubmitting = false;
+			}
+		})}
+	>
+		<div class="space-y-2">
+			<Label for="name">{m().name}</Label>
+			<Input id="name" {...updateUserProfile.fields.name.as("text")} placeholder={m().yourName} autocomplete="name" />
+			{#each updateUserProfile.fields.name.issues() as issue (issue.message)}
+				<p class="text-sm text-destructive">{issue.message}</p>
+			{/each}
+		</div>
+
+		<div class="space-y-2">
+			<Label for="email">{m().email}</Label>
+			<Input id="email" type="email" {...updateUserProfile.fields.email.as("text")} placeholder={m().emailPlaceholder} autocomplete="email" />
+			{#each updateUserProfile.fields.email.issues() as issue (issue.message)}
+				<p class="text-sm text-destructive">{issue.message}</p>
+			{/each}
+		</div>
+
+		<Button type="submit" class="cursor-pointer" disabled={isSubmitting}>{isSubmitting ? m().saving : m().save}</Button>
+	</form>
+</Tabs.Content>

package/dist/ui/ProfileManagementTab.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AppUserClient } from "../types.js";
+type $$ComponentProps = {
+    user: AppUserClient | null | undefined;
+};
+declare const ProfileManagementTab: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileManagementTab = ReturnType<typeof ProfileManagementTab>;
+export default ProfileManagementTab;

package/dist/ui/RegisterForm.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { LoaderCircle } from "@lucide/svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import { Button } from "../components/ui/button/index.js";
+	import * as Card from "../components/ui/card/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import { m } from "../messages.js";
+	import type { SignupState } from "../types.js";
+	import { authUi } from "./context.js";
+	import { href } from "./href.js";
+	import SocialButton from "./SocialButton.svelte";
+	import { cn } from "../utils.js";
+
+	/** The signup page: what `signupLoad` allows (the signup mode, the Einladung), then email and password or a social login. */
+	const { class: className, ...restProps }: { class?: string } = $props();
+	const { authClient, appName } = authUi();
+
+	let email = $state("");
+	let password = $state("");
+	let password_repeat = $state("");
+	let loading = $state(false);
+	let errorMessage = $state("");
+
+	const providers = $derived(page.data.providers as { github?: boolean; google?: boolean } | undefined);
+	const signupState = $derived(page.data.state as SignupState);
+	const erlaubt = $derived(signupState === "allowed");
+	/** After signing up without a session (signup mode open): confirm by mail first, or (first account) log in. */
+	let done = $state<"confirm" | "login" | null>(null);
+	const einladung = $derived(page.data.einladung as { inviterName: string } | null);
+	const providerNames = $derived([providers?.github && "GitHub", providers?.google && "Google"].filter(Boolean).join(` ${m().or} `));
+
+	async function signUp(e: SubmitEvent) {
+		e.preventDefault();
+		if (password !== password_repeat) {
+			errorMessage = m().passwordsMismatch;
+			return;
+		}
+		const name = email.split("@")[0]; // the server turns it into a readable name
+		await authClient.signUp.email(
+			{ email, password, name, callbackURL: href("/home") },
+			{
+				onRequest: () => {
+					loading = true;
+					errorMessage = "";
+				},
+				onSuccess: async (ctx) => {
+					loading = false;
+					const data = ctx.data as { token?: string | null; user?: { emailVerified?: boolean } } | null;
+					// No session yet when the email address has to be confirmed first (signup mode open)
+					if (!data?.token) done = data?.user?.emailVerified ? "login" : "confirm";
+					else await goto(href("/home"), { replaceState: true });
+				},
+				onError: async (ctx) => {
+					errorMessage =
+						ctx.error.status === 403 ? m().needsValidEinladung : ctx.error.message?.toLowerCase().includes("exist") ? m().emailInUse : ctx.error.message || m().signupFailed;
+					loading = false;
+				},
+			},
+		);
+	}
+</script>
+
+<div class={cn("flex flex-col gap-6", className)} {...restProps}>
+	<Card.Root>
+		<Card.Header class="text-center">
+			<Card.Title class="text-xl">{m().createAccount}</Card.Title>
+			{#if einladung}
+				<Card.Description>{m().invitesYouTo(einladung.inviterName, appName)}</Card.Description>
+			{/if}
+			{#if erlaubt && (providers?.github || providers?.google)}
+				<Card.Description>{m().signUpWith(providerNames)}</Card.Description>
+			{/if}
+		</Card.Header>
+		<Card.Content>
+			{#if done === "confirm"}
+				<div class="grid gap-4 text-center text-sm">
+					<p>{m().almostDone(email, appName)}</p>
+				</div>
+			{:else if done === "login"}
+				<div class="grid gap-4 text-center text-sm">
+					<p>{m().accountReady}</p>
+					<p><a href={href("/auth/login")} class="underline underline-offset-4">{m().logIn}</a></p>
+				</div>
+			{:else if !erlaubt}
+				<div class="grid gap-4 text-center text-sm">
+					{#if signupState === "no_mail"}
+						<p>{m().noNewAccountOpen}</p>
+					{:else}
+						<p>{m().inviteOnly(appName)}</p>
+					{/if}
+					<p>
+						{m().alreadyHaveAccount}
+						<a href={href("/auth/login")} class="underline underline-offset-4">{m().logIn}</a>
+					</p>
+				</div>
+			{:else}
+				<form onsubmit={signUp}>
+					<div class="grid gap-6">
+						{#if providers?.github || providers?.google}
+							<div class="flex flex-col gap-4">
+								{#if providers.github}<SocialButton provider="github" />{/if}
+								{#if providers.google}<SocialButton provider="google" />{/if}
+							</div>
+							<div class="relative text-center text-sm">
+								<span class="relative z-10 bg-card px-2 text-muted-foreground">{m().orWithEmail}</span>
+								<div class="absolute inset-0 top-1/2 z-0 border-t border-border"></div>
+							</div>
+						{/if}
+
+						<div class="grid gap-3">
+							<Label for="email">{m().email}</Label>
+							<Input id="email" name="email" type="email" bind:value={email} required autocomplete="username" />
+						</div>
+						<div class="grid gap-3">
+							<Label for="password">{m().password}</Label>
+							<Input id="password" name="password" type="password" required bind:value={password} autocomplete="new-password" />
+						</div>
+						<div class="grid gap-3">
+							<Label for="password_repeat">{m().repeatPassword}</Label>
+							<Input id="password_repeat" name="password_repeat" type="password" required bind:value={password_repeat} autocomplete="new-password" />
+						</div>
+
+						{#if errorMessage}
+							<div class="rounded-md text-center text-sm text-destructive">{errorMessage}</div>
+						{/if}
+
+						<Button type="submit" class="w-full cursor-pointer" disabled={loading}>
+							{#if loading}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{/if}
+							{m().signUp}
+						</Button>
+
+						<div class="text-center text-sm">
+							{m().alreadyHaveAccount}
+							<a href={href("/auth/login")} class="underline underline-offset-4">{m().logIn}</a>
+						</div>
+					</div>
+				</form>
+			{/if}
+		</Card.Content>
+	</Card.Root>
+</div>

package/dist/ui/RegisterForm.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const RegisterForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type RegisterForm = ReturnType<typeof RegisterForm>;
+export default RegisterForm;

package/dist/ui/ResetPasswordForm.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { LoaderCircle } from "@lucide/svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import * as Card from "../components/ui/card/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import { m } from "../messages.js";
+	import { MIN_PASSWORD_LENGTH } from "../types.js";
+	import { authUi } from "./context.js";
+	import { href } from "./href.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	/** The page the reset mail links to (`?token=`): the new password, twice. */
+	const { authClient } = authUi();
+
+	let password = $state("");
+	let confirmPassword = $state("");
+	let loading = $state(false);
+	let errorMessage = $state("");
+
+	const token = $derived(page.url.searchParams.get("token"));
+
+	async function handleResetPassword(e: SubmitEvent) {
+		e.preventDefault();
+		if (!token) {
+			toast.error(m().resetLinkInvalid);
+			return;
+		}
+		if (password.length < MIN_PASSWORD_LENGTH) {
+			toast.error(m().passwordTooShortDot(MIN_PASSWORD_LENGTH));
+			return;
+		}
+		if (password !== confirmPassword) {
+			toast.error(m().passwordsDontMatchDot);
+			return;
+		}
+		loading = true;
+		errorMessage = "";
+		try {
+			const res = await authClient.resetPassword({ newPassword: password, token });
+			if (res.error) {
+				errorMessage = res.error.message || m().passwordNotReset;
+				toast.error(errorMessage);
+			} else {
+				toast.success(m().passwordWasReset);
+				await goto(href("/auth/login"), { replaceState: true });
+			}
+		} catch (err) {
+			errorMessage = messageOf(err, m().somethingWentWrong);
+			toast.error(errorMessage);
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<Card.Root>
+	<Card.Header class="text-center">
+		<Card.Title class="text-xl">{m().resetTitle}</Card.Title>
+		<Card.Description>{m().resetIntro}</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		{#if !token}
+			<div class="rounded-md border border-destructive/20 bg-destructive/10 p-4 text-center text-sm text-destructive">{m().resetNoToken}</div>
+			<Button variant="outline" class="mt-4 w-full cursor-pointer" onclick={() => goto(href("/auth/login"))}>{m().backToLogin}</Button>
+		{:else}
+			<form onsubmit={handleResetPassword}>
+				<div class="grid gap-6">
+					<div class="grid gap-3">
+						<Label for="password">{m().newPassword}</Label>
+						<Input id="password" type="password" bind:value={password} placeholder="••••••••" required autocomplete="new-password" />
+					</div>
+					<div class="grid gap-3">
+						<Label for="confirmPassword">{m().confirmNewPassword}</Label>
+						<Input id="confirmPassword" type="password" bind:value={confirmPassword} placeholder="••••••••" required autocomplete="new-password" />
+					</div>
+					{#if errorMessage}
+						<div class="rounded-md text-center text-sm text-destructive">{errorMessage}</div>
+					{/if}
+					<Button type="submit" class="w-full cursor-pointer" disabled={loading}>
+						{#if loading}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{/if}
+						{m().savePassword}
+					</Button>
+				</div>
+			</form>
+		{/if}
+	</Card.Content>
+</Card.Root>

package/dist/ui/ResetPasswordForm.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ResetPasswordForm: import("svelte").Component<Record<string, never>, {}, "">;
+type ResetPasswordForm = ReturnType<typeof ResetPasswordForm>;
+export default ResetPasswordForm;

package/dist/ui/SecurityTab.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import { m } from "../messages.js";
+	import { getLinkedAccounts } from "../remote/app_user.remote.js";
+	import ChangePasswordCard from "./ChangePasswordCard.svelte";
+	import SetPasswordCard from "./SetPasswordCard.svelte";
+	import TwoFactorAuthenticationCard from "./TwoFactorAuthenticationCard.svelte";
+
+	const linkedAccounts = $derived(getLinkedAccounts());
+	const hasPasswordAccount = $derived(linkedAccounts.current?.some((acc) => acc.providerId === "credential"));
+</script>
+
+<Tabs.Content value="security" class="mt-6 space-y-6">
+	{#if linkedAccounts.current}
+		{#if hasPasswordAccount}
+			<ChangePasswordCard />
+			<TwoFactorAuthenticationCard />
+		{:else}
+			<!-- Accounts that came through GitHub or Google first set a password -->
+			<SetPasswordCard onSetSuccess={() => linkedAccounts.refresh()} />
+		{/if}
+	{:else}
+		<div class="panel p-8 text-center text-muted-foreground">{m().loadingSecurity}</div>
+	{/if}
+</Tabs.Content>

package/dist/ui/SecurityTab.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SecurityTab: import("svelte").Component<Record<string, never>, {}, "">;
+type SecurityTab = ReturnType<typeof SecurityTab>;
+export default SecurityTab;

package/dist/ui/SessionsTab.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Globe, LogOut, Monitor, Smartphone, Tablet, X } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import { m } from "../messages.js";
+	import { getSessions, revokeOthers, revokeSessionById } from "../remote/app_user.remote.js";
+	import { authUi } from "./context.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	/** The devices the user is logged in on. Only mounted while open: listing them needs a login from the last day. */
+	const { locale } = authUi();
+	const sessions = $derived(await getSessions());
+	const currentSessionId = $derived((page.data.session as { id?: string } | null | undefined)?.id);
+
+	async function handleRevoke(sessionId: string) {
+		try {
+			await revokeSessionById({ sessionId });
+			toast.success(m().sessionEnded);
+		} catch (e) {
+			toast.error(messageOf(e, m().sessionNotEnded));
+		}
+	}
+
+	async function handleRevokeOthers() {
+		try {
+			await revokeOthers();
+			toast.success(m().otherSessionsEnded);
+		} catch (e) {
+			toast.error(messageOf(e, m().otherSessionsNotEnded));
+		}
+	}
+
+	function getDeviceIcon(session: { userAgent?: string | null }) {
+		const ua = session.userAgent?.toLowerCase() || "";
+		if (ua.includes("mobile") || ua.includes("iphone") || ua.includes("android")) return Smartphone;
+		if (ua.includes("tablet") || ua.includes("ipad")) return Tablet;
+		return Monitor;
+	}
+
+	function formatLastActive(date: string | Date) {
+		if (!date) return m().unknown;
+		return new Date(date).toLocaleString(locale, { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
+	}
+</script>
+
+<Tabs.Content value="sessions" class="panel mt-6 p-6 md:p-8">
+	<div class="space-y-6">
+		<div class="flex items-center justify-between">
+			<div>
+				<h3 class="text-lg font-semibold">{m().activeSessions}</h3>
+				<p class="text-sm text-muted-foreground">{m().devicesLoggedIn}</p>
+			</div>
+			<Button variant="destructive" size="sm" onclick={handleRevokeOthers} class="flex cursor-pointer gap-2">
+				<LogOut class="size-4" />
+				{m().endAllOthers}
+			</Button>
+		</div>
+
+		<div class="divide-y overflow-hidden rounded-lg border">
+			{#if sessions.length === 0}
+				<div class="p-8 text-center text-muted-foreground">{m().noActiveSessions}</div>
+			{:else}
+				{#each sessions as s (s.id)}
+					{@const DeviceIcon = getDeviceIcon(s)}
+					<div class="flex items-center justify-between bg-muted/10 p-4">
+						<div class="flex items-center gap-4">
+							<div class="rounded-full bg-muted p-2">
+								<DeviceIcon class="size-5 text-muted-foreground" />
+							</div>
+							<div>
+								<div class="flex items-center gap-2">
+									<!-- Sessions don't record browser and OS yet -->
+									<span class="font-medium">{m().unknownBrowser}</span>
+									{#if s.id === currentSessionId}
+										<span class="rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-bold text-green-700 uppercase dark:bg-green-900/30 dark:text-green-400">{m().thisSession}</span>
+									{/if}
+								</div>
+								<div class="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+									<Globe class="size-3" />
+									<span>{s.ipAddress || m().noIpAddress}</span>
+								</div>
+								<p class="mt-1 text-[11px] text-muted-foreground/80">{m().lastActive(formatLastActive(s.updatedAt || s.createdAt))}</p>
+							</div>
+						</div>
+
+						{#if s.id !== currentSessionId}
+							<Button variant="ghost" size="icon" class="cursor-pointer text-destructive hover:bg-destructive/10" onclick={() => handleRevoke(s.token)}>
+								<X class="size-4" />
+							</Button>
+						{/if}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</div>
+</Tabs.Content>

package/dist/ui/SessionsTab.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SessionsTab: import("svelte").Component<Record<string, never>, {}, "">;
+type SessionsTab = ReturnType<typeof SessionsTab>;
+export default SessionsTab;

package/dist/ui/SetPasswordCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { KeyRound } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import { m } from "../messages.js";
+	import { setPassword } from "../remote/app_user.remote.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	let { onSetSuccess }: { onSetSuccess?: () => void } = $props();
+	let isSubmitting = $state(false);
+</script>
+
+<div class="panel p-6 md:p-8">
+	<h3 class="mb-6 flex items-center gap-2 text-lg font-semibold">
+		<KeyRound class="size-5 text-muted-foreground" />
+		{m().setPassword}
+	</h3>
+	<p class="mb-6 text-sm text-muted-foreground">{m().setPasswordIntro}</p>
+	<form
+		class="space-y-6"
+		{...setPassword.enhance(async ({ submit }) => {
+			isSubmitting = true;
+			try {
+				await submit();
+				toast.success(m().passwordSet);
+				setPassword.fields.newPassword.set("");
+				setPassword.fields.confirmPassword.set("");
+				onSetSuccess?.();
+			} catch (e) {
+				toast.error(messageOf(e, m().passwordNotSet));
+			} finally {
+				isSubmitting = false;
+			}
+		})}
+	>
+		<div class="space-y-2">
+			<Label for="newPassword" class="text-sm font-medium">{m().newPassword}</Label>
+			<Input id="newPassword" type="password" {...setPassword.fields.newPassword.as("text")} placeholder="••••••••" class="bg-muted/30" />
+			{#each setPassword.fields.newPassword.issues() as issue (issue.message)}
+				<p class="text-sm text-destructive">{issue.message}</p>
+			{/each}
+		</div>
+
+		<div class="space-y-2">
+			<Label for="confirmPassword" class="text-sm font-medium">{m().confirmNewPasswordShort}</Label>
+			<Input id="confirmPassword" type="password" {...setPassword.fields.confirmPassword.as("text")} placeholder="••••••••" class="bg-muted/30" />
+			{#each setPassword.fields.confirmPassword.issues() as issue (issue.message)}
+				<p class="text-sm text-destructive">{issue.message}</p>
+			{/each}
+		</div>
+
+		<Button type="submit" class="cursor-pointer" disabled={isSubmitting}>{isSubmitting ? m().saving : m().setPasswordButton}</Button>
+	</form>
+</div>

package/dist/ui/SetPasswordCard.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onSetSuccess?: () => void;
+};
+declare const SetPasswordCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type SetPasswordCard = ReturnType<typeof SetPasswordCard>;
+export default SetPasswordCard;

package/dist/ui/SettingsHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import * as Avatar from "../components/ui/avatar/index.js";
+	import { m } from "../messages.js";
+	import type { AppUserClient } from "../types.js";
+	import { displayInitials, displayName } from "../util/names.js";
+
+	let { user }: { user: AppUserClient | null | undefined } = $props();
+</script>
+
+<div class="flex items-center gap-6">
+	<Avatar.Root class="size-20 rounded-full border-2 border-muted">
+		{#if user?.image}<Avatar.Image src={user.image} alt="" />{/if}
+		<Avatar.Fallback class="text-2xl">{user ? displayInitials(user) : "?"}</Avatar.Fallback>
+	</Avatar.Root>
+	<div class="space-y-1">
+		<h1 class="text-3xl font-bold tracking-tight">{user ? displayName(user) : m().user}</h1>
+		<p class="text-muted-foreground">{user?.email || ""}</p>
+	</div>
+</div>

package/dist/ui/SettingsHeader.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AppUserClient } from "../types.js";
+type $$ComponentProps = {
+    user: AppUserClient | null | undefined;
+};
+declare const SettingsHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsHeader = ReturnType<typeof SettingsHeader>;
+export default SettingsHeader;

package/dist/ui/SettingsPage.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { ArrowLeft } from "@lucide/svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import { m } from "../messages.js";
+	import type { AppUserClient } from "../types.js";
+	import { authUi } from "./context.js";
+	import DeletionTab from "./DeletionTab.svelte";
+	import InvitationsTab from "./InvitationsTab.svelte";
+	import LinksTab from "./LinksTab.svelte";
+	import MobileSettingsMenu from "./MobileSettingsMenu.svelte";
+	import ProfileManagementTab from "./ProfileManagementTab.svelte";
+	import SecurityTab from "./SecurityTab.svelte";
+	import SessionsTab from "./SessionsTab.svelte";
+	import SettingsHeader from "./SettingsHeader.svelte";
+	import SettingsTabsList from "./SettingsTabsList.svelte";
+	import { visibleTabs, type SettingsTabDef } from "./tabs.js";
+
+	/**
+	 * The settings page (`homeLayoutLoad` gives `user`, `session`, `providers` and `einladen` in the page data): on
+	 * desktop a tab bar, on mobile a menu and one tab at a time, `?tab=` either way. A Product adds its own tabs with
+	 * `extraTabs` (their definitions) and `extra` (their content, given the tab id), e.g. the AI assistants of `@vonall/mcp`.
+	 */
+	let { extraTabs = [], extra }: { extraTabs?: SettingsTabDef[]; extra?: Snippet<[string]> } = $props();
+	const { appName, locale } = authUi();
+
+	const user = $derived(page.data.user as AppUserClient);
+	const einladen = $derived(Boolean(page.data.einladen));
+	// Only the tabs this user sees: ?tab=invitations without the right to invite falls back to the profile
+	const tabs = $derived(visibleTabs(einladen, extraTabs));
+	const ids = $derived(tabs.map((t) => t.id));
+	const isTab = (value: string | null): value is string => value !== null && ids.includes(value);
+
+	let activeTab = $state("profile");
+
+	$effect(() => {
+		const tab = page.url.searchParams.get("tab");
+		activeTab = isTab(tab) ? tab : "profile";
+	});
+
+	const hasTabParam = $derived(isTab(page.url.searchParams.get("tab")));
+	const activeTabTitle = $derived(tabs.find((t) => t.id === page.url.searchParams.get("tab"))?.label ?? "");
+
+	function selectTab(tabName: string) {
+		const url = new URL(page.url.href);
+		if (tabName) url.searchParams.set("tab", tabName);
+		else url.searchParams.delete("tab");
+		goto(`${page.url.pathname}${url.search}`); // wherever the Product mounted this page
+	}
+
+	const memberSince = $derived(user.createdAt ? new Date(user.createdAt).toLocaleDateString(locale, { year: "numeric", month: "long" }) : "");
+</script>
+
+<svelte:head><title>{m().settingsTitle} · {appName}</title></svelte:head>
+
+<!-- One Tabs.Root for both layouts, so the tab contents (and their remote forms) mount exactly once -->
+<Tabs.Root bind:value={activeTab} class="w-full">
+	<!-- Desktop -->
+	<div class="hidden w-full space-y-6 md:block">
+		<SettingsHeader {user} />
+		<SettingsTabsList {tabs} />
+	</div>
+
+	<!-- Mobile: a menu, then one tab at a time -->
+	<div class="w-full space-y-4 md:hidden">
+		{#if !hasTabParam}
+			<MobileSettingsMenu {user} {memberSince} {tabs} onSelectTab={selectTab} />
+		{:else}
+			<div class="panel flex items-center gap-3 p-3">
+				<button onclick={() => selectTab("")} class="rounded-full p-2 text-muted-foreground hover:bg-accent" aria-label={m().backToOverview}>
+					<ArrowLeft size={18} />
+				</button>
+				<div>
+					<span class="section-kicker">{m().settingsTitle}</span>
+					<h2 class="text-base font-semibold">{activeTabTitle}</h2>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class={hasTabParam ? "mt-4 block w-full" : "mt-4 hidden w-full md:block"}>
+		<ProfileManagementTab {user} />
+		<SecurityTab />
+		<!-- Only while open: listing the sessions needs a login from the last day, which only this tab should ask for -->
+		{#if activeTab === "sessions"}<SessionsTab />{/if}
+		<LinksTab />
+		{#if einladen}<InvitationsTab />{/if}
+		{#each extraTabs as tab (tab.id)}
+			<Tabs.Content value={tab.id} class="panel mt-6 p-6 md:p-8">{@render extra?.(tab.id)}</Tabs.Content>
+		{/each}
+		<DeletionTab agents={extraTabs.some((t) => t.id === "agents")} />
+	</div>
+</Tabs.Root>

package/dist/ui/SettingsPage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import { type SettingsTabDef } from "./tabs.js";
+type $$ComponentProps = {
+    extraTabs?: SettingsTabDef[];
+    extra?: Snippet<[string]>;
+};
+declare const SettingsPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsPage = ReturnType<typeof SettingsPage>;
+export default SettingsPage;