@riducms/admin 0.2.3 → 0.4.0

package/src/core/runtime/admin-runtime.svelte.ts

@@ -5,21 +5,13 @@ import {
 	type ResolvedAdminConfig,
 } from "@riducms/plugin/admin";
 import {
-	type AdminDashboardPanel,
-	type AdminLoginComponent,
-	type AdminAccountComponent,
-	type AdminNavigationComponent,
-	type AdminLogoutButton,
-	type AdminCoreView,
-	type AdminBrandComponent,
-	type AdminShellComponent,
-	type AdminProvider,
-	type AdminDocumentAction,
-	type AdminDocumentView,
-	type AdminListCell,
-	type AdminRoute,
-} from "@riducms/plugin";
-import type { AuthSession, OperationCapabilities, SchemaManifest } from "@riducms/protocol";
+	bindSchemaManifest,
+	type AdminPreparedNavigationV1,
+	type AdminPreparedRuntimeV1,
+	type AuthSession,
+	type OperationCapabilities,
+	type SchemaManifest,
+} from "@riducms/protocol";
 import { RiduError } from "@riducms/sdk";
 import { createContext } from "svelte";
 
@@ -61,9 +53,11 @@ export class AdminRuntime {
 	manifestRefreshError = $state<string>();
 	collectionOperations = $state.raw<Record<string, OperationCapabilities>>({});
 	globalOperations = $state.raw<Record<string, OperationCapabilities>>({});
+	preparedPreferences = $state.raw<Record<string, unknown>>({});
 	themePreference = $state<ThemePreference>("system");
 	resolvedTheme = $state<"light" | "dark">("dark");
 	contentLocale = $state<string>();
+	contentLocaleTransitioning = $state(false);
 	#confirmedThemePreference: ThemePreference = "system";
 	#confirmedThemeOwnerID = "";
 	#confirmedContentLocale?: string;
@@ -75,6 +69,10 @@ export class AdminRuntime {
 	#contentLocaleBlockers = new Map<symbol, () => boolean>();
 	#contentLocaleBlockerSequence = 0;
 	#contentLocaleBlockerRevision = $state(0);
+	#systemThemeQuery?: MediaQueryList;
+	readonly #handleSystemThemeChange = () => {
+		if (this.themePreference === "system") this.#applyTheme();
+	};
 	#preferenceReset?: {
 		sessionID: string | undefined;
 		ownerID: string;
@@ -141,58 +139,20 @@ export class AdminRuntime {
 		};
 	}
 
-	adoptContentLocale(locale: string) {
-		if (!this.contentLocales.some((candidate) => candidate.code === locale)) return false;
-		if (this.contentLocaleSwitchBlocked) return false;
-		if (this.contentLocale === locale) return true;
-		this.contentLocale = locale;
-		void this.refreshAccess(locale).catch(() => {
-			// Route adoption is best-effort; retain the last complete access snapshot on failure.
-		});
-		return true;
-	}
-
-	readonly pluginRoutes: readonly AdminRoute[];
-	readonly dashboardPanels: readonly AdminDashboardPanel[];
-	readonly loginComponents: readonly AdminLoginComponent[];
-	readonly accountComponents: readonly AdminAccountComponent[];
-	readonly navigationComponents: readonly AdminNavigationComponent[];
-	readonly logoutButton?: AdminLogoutButton;
-	readonly coreViews: readonly AdminCoreView[];
-	readonly brandComponents: readonly AdminBrandComponent[];
-	readonly shellComponents: readonly AdminShellComponent[];
-	readonly providers: readonly AdminProvider[];
-	readonly listCells: readonly AdminListCell[];
-	readonly documentActions: readonly AdminDocumentAction[];
-	readonly documentViews: readonly AdminDocumentView[];
 	readonly rowLabels: RowLabelRegistry;
 	readonly i18n: AdminI18nController;
 
 	readonly config: ResolvedAdminConfig;
 	readonly fields: FieldRegistry;
-	readonly editors: ResolvedAdminConfig["editors"];
 
 	constructor(
 		readonly client: AdminClient,
-		config: AdminConfig = {}
+		config: AdminConfig = {},
+		readonly adminBasePath = "/admin"
 	) {
 		this.config = resolveAdminConfig(config);
-		this.fields = createCoreFieldRegistry(this.config.fields);
-		this.editors = this.config.editors;
+		this.fields = createCoreFieldRegistry(this.config.pluginFields);
 		const extensions = this.config.extensions;
-		this.pluginRoutes = extensions.routes;
-		this.dashboardPanels = extensions.dashboard;
-		this.loginComponents = extensions.login;
-		this.accountComponents = extensions.account;
-		this.navigationComponents = extensions.navigation;
-		this.logoutButton = extensions.logoutButton;
-		this.coreViews = extensions.views;
-		this.brandComponents = extensions.branding;
-		this.shellComponents = extensions.shell;
-		this.providers = extensions.providers;
-		this.listCells = extensions.listCells;
-		this.documentActions = extensions.documentActions;
-		this.documentViews = extensions.documentViews;
 		this.rowLabels = createRowLabelRegistry(extensions.rowLabels, this.config.rowLabels);
 		this.i18n = new AdminI18nController(
 			client,
@@ -203,10 +163,65 @@ export class AdminRuntime {
 		);
 		this.#applyTheme();
 		if (typeof window !== "undefined") {
-			window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-				if (this.themePreference === "system") this.#applyTheme();
-			});
+			this.#systemThemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			this.#systemThemeQuery.addEventListener("change", this.#handleSystemThemeChange);
+		}
+	}
+
+	hardNavigate(path: string) {
+		const base = `/${this.adminBasePath.split("/").filter(Boolean).join("/")}`;
+		const route = path.startsWith("/") ? path : `/${path}`;
+		window.location.assign(base === "/" ? route : `${base}${route}`);
+		// Keep identity-changing handlers pending until the new document takes ownership.
+		return new Promise<never>(() => {});
+	}
+
+	dispose() {
+		this.#systemThemeQuery?.removeEventListener("change", this.#handleSystemThemeChange);
+		this.#systemThemeQuery = undefined;
+	}
+
+	adoptPrepared(prepared: AdminPreparedRuntimeV1) {
+		this.#manifestRequest += 1;
+		this.error = undefined;
+		this.loading = true;
+		const manifest = bindSchemaManifest(prepared.manifest);
+		this.#installManifest(manifest);
+		this.session = prepared.session as AuthSession<AdminDocument> | undefined;
+		this.authBootstrapAvailable = prepared.authBootstrapAvailable;
+		this.collectionOperations = { ...prepared.collectionOperations };
+		this.globalOperations = { ...prepared.globalOperations };
+		this.preparedPreferences = { ...prepared.preferences };
+		this.#confirmedThemePreference = isThemePreference(prepared.theme) ? prepared.theme : "system";
+		this.#confirmedThemeOwnerID = preferenceOwnerID(this.session);
+		this.themePreference = this.#confirmedThemePreference;
+		this.#applyTheme();
+		if (
+			prepared.contentLocale !== undefined &&
+			this.contentLocales.some((candidate) => candidate.code === prepared.contentLocale)
+		) {
+			this.contentLocale = prepared.contentLocale;
+			this.#confirmedContentLocale = prepared.contentLocale;
+			this.#confirmedContentLocaleOwnerID = preferenceOwnerID(this.session);
 		}
+		this.i18n.adoptPreparedPreferences(prepared.adminLanguage, prepared.adminTimeZone);
+		this.loading = false;
+	}
+
+	adoptPreparedNavigation(prepared: AdminPreparedNavigationV1) {
+		this.collectionOperations = { ...prepared.collectionOperations };
+		this.globalOperations = { ...prepared.globalOperations };
+		if (
+			prepared.contentLocale !== undefined &&
+			this.contentLocales.some((candidate) => candidate.code === prepared.contentLocale)
+		) {
+			this.contentLocale = prepared.contentLocale;
+			this.#confirmedContentLocale = prepared.contentLocale;
+			this.#confirmedContentLocaleOwnerID = preferenceOwnerID(this.session);
+		}
+		// The context key guarantees this is the same identity. Preferences are
+		// adopted once from the cold document; a navigation response may have started
+		// before a local theme/language/time-zone write and must not roll it back.
 	}
 
 	async loadTheme() {
@@ -240,6 +255,15 @@ export class AdminRuntime {
 		return contentLocaleFromPath(path, this.contentLocales);
 	}
 
+	/** A supported URL locale wins; otherwise retain the session's selection or the default. */
+	resolveContentLocale(requested: string | null | undefined) {
+		return (
+			this.contentLocales.find((locale) => locale.code === requested)?.code ??
+			this.contentLocale ??
+			this.manifest?.application.localization?.defaultLocale
+		);
+	}
+
 	async loadContentLocale(activeLocale?: string) {
 		const request = ++this.#contentLocaleRequest;
 		const localization = this.manifest?.application.localization;
@@ -274,44 +298,24 @@ export class AdminRuntime {
 			: this.#confirmedContentLocale;
 	}
 
-	async setContentLocale(locale: string) {
+	async persistContentLocalePreference(locale: string) {
 		if (!this.contentLocales.some((candidate) => candidate.code === locale)) return;
 		if (this.contentLocaleSwitchBlocked) throw new ContentLocaleSwitchBlockedError();
-		if (locale === this.contentLocale && locale === this.#confirmedContentLocale) return;
-		const request = ++this.#contentLocaleRequest;
 		const sessionID = this.session?.id;
 		const ownerID = preferenceOwnerID(this.session);
-		this.contentLocale = locale;
-		const accessRefresh = this.refreshAccess(locale);
-		void accessRefresh.catch(() => {
-			// The operation awaits and reconciles this failure after its preference write settles.
-		});
-		try {
-			if (sessionID === undefined || ownerID === "") {
-				await this.client.setPreference("content-locale", { locale });
-			} else {
-				const result = await getPreferenceWriteQueue().enqueue(
-					JSON.stringify([ownerID, "content-locale"]),
-					ownerID,
-					() => this.session?.id === sessionID,
-					() => this.client.setPreference("content-locale", { locale })
-				);
-				if (!result.dispatched) throw new StalePreferenceSessionError();
-			}
-			if (request !== this.#contentLocaleRequest) return;
-			if (this.session?.id !== sessionID || preferenceOwnerID(this.session) !== ownerID) {
-				throw new StalePreferenceSessionError();
-			}
-			await accessRefresh;
-			this.#confirmedContentLocale = locale;
-			this.#confirmedContentLocaleOwnerID = ownerID;
-		} catch (error) {
-			if (request === this.#contentLocaleRequest) {
-				this.contentLocale = this.#confirmedContentLocale;
-				await this.refreshAccess(this.#confirmedContentLocale);
-			}
-			throw error;
+		if (sessionID === undefined || ownerID === "") {
+			await this.client.setPreference("content-locale", { locale });
+		} else {
+			const result = await getPreferenceWriteQueue().enqueue(
+				JSON.stringify([ownerID, "content-locale"]),
+				ownerID,
+				() => this.session?.id === sessionID,
+				() => this.client.setPreference("content-locale", { locale })
+			);
+			if (!result.dispatched) throw new StalePreferenceSessionError();
 		}
+		this.#confirmedContentLocale = locale;
+		this.#confirmedContentLocaleOwnerID = ownerID;
 	}
 
 	async setTheme(preference: ThemePreference) {
@@ -437,6 +441,27 @@ export class AdminRuntime {
 		}
 	}
 
+	#installManifest(manifest: SchemaManifest) {
+		validateAdminManifest(this.config, manifest);
+		this.manifest = manifest;
+		this.manifestRevision += 1;
+		this.#configureContentLocale();
+		this.i18n.configure(manifest.application.adminLocalization);
+		return manifest.application.admin;
+	}
+
+	async #refreshLocalizedAccess() {
+		await this.loadContentLocale(this.#browserRouteContentLocale());
+		const accessAuthoritative = await this.refreshAccess(this.contentLocale);
+		if (!accessAuthoritative || this.session === undefined || this.adminAccessAllowed) return;
+		try {
+			await this.client.auth.logout();
+		} catch {
+			// The local session is still denied even if server cleanup fails.
+		}
+		this.session = undefined;
+	}
+
 	async bootstrap() {
 		const request = ++this.#manifestRequest;
 		this.loading = true;
@@ -444,43 +469,26 @@ export class AdminRuntime {
 		try {
 			const manifest = await this.client.schema();
 			if (request !== this.#manifestRequest) return;
-			validateAdminManifest(this.config, manifest);
-			this.manifest = manifest;
-			this.manifestRevision += 1;
-			this.#configureContentLocale();
-			this.i18n.configure(manifest.application.adminLocalization);
-			const admin = manifest.application.admin;
+			const admin = this.#installManifest(manifest);
 			if (admin !== undefined) {
-				const bootstrap = await this.client.authBootstrap(admin.userCollectionSlug);
+				const bootstrap = await this.client.auth.bootstrap({
+					collection: admin.userCollectionSlug,
+				});
 				if (request !== this.#manifestRequest) return;
 				this.authBootstrapAvailable = bootstrap.available;
 				if (bootstrap.available) {
 					this.session = undefined;
 				} else {
-					try {
-						const session = await this.client.session();
-						if (request !== this.#manifestRequest) return;
-						this.session = session.collection === admin.userCollectionSlug ? session : undefined;
-					} catch (error) {
-						if (request !== this.#manifestRequest) return;
-						if (!(error instanceof RiduError) || error.code !== "access_denied") throw error;
-						this.session = undefined;
-					}
+					// getSession resolves null without a session and rejects on an outage.
+					const session = await this.client.auth.getSession();
+					if (request !== this.#manifestRequest) return;
+					this.session = session?.collection === admin.userCollectionSlug ? session : undefined;
 				}
 			} else {
 				this.session = undefined;
 				this.authBootstrapAvailable = false;
 			}
-			await this.loadContentLocale(this.#browserRouteContentLocale());
-			const accessAuthoritative = await this.refreshAccess(this.contentLocale);
-			if (accessAuthoritative && this.session !== undefined && !this.adminAccessAllowed) {
-				try {
-					await this.client.logout();
-				} catch {
-					// The local session is still denied even if server cleanup fails.
-				}
-				this.session = undefined;
-			}
+			await this.#refreshLocalizedAccess();
 			await Promise.all([this.loadTheme(), this.i18n.loadPreferences()]);
 		} catch (error) {
 			if (request !== this.#manifestRequest) return;
@@ -497,32 +505,20 @@ export class AdminRuntime {
 		try {
 			const manifest = await this.client.schema();
 			if (request !== this.#manifestRequest) return;
-			validateAdminManifest(this.config, manifest);
-			this.manifest = manifest;
-			this.manifestRevision += 1;
-			this.#configureContentLocale();
-			this.i18n.configure(manifest.application.adminLocalization);
-			const admin = manifest.application.admin;
+			const admin = this.#installManifest(manifest);
 			if (admin === undefined || this.session?.collection !== admin.userCollectionSlug) {
 				this.session = undefined;
 			}
 			if (admin !== undefined && this.session === undefined) {
-				const bootstrap = await this.client.authBootstrap(admin.userCollectionSlug);
+				const bootstrap = await this.client.auth.bootstrap({
+					collection: admin.userCollectionSlug,
+				});
 				if (request !== this.#manifestRequest) return;
 				this.authBootstrapAvailable = bootstrap.available;
 			} else {
 				this.authBootstrapAvailable = false;
 			}
-			await this.loadContentLocale(this.#browserRouteContentLocale());
-			const accessAuthoritative = await this.refreshAccess(this.contentLocale);
-			if (accessAuthoritative && this.session !== undefined && !this.adminAccessAllowed) {
-				try {
-					await this.client.logout();
-				} catch {
-					// The local session is still denied even if server cleanup fails.
-				}
-				this.session = undefined;
-			}
+			await this.#refreshLocalizedAccess();
 			await this.i18n.loadPreferences();
 		} catch (error) {
 			if (request !== this.#manifestRequest) return;

package/src/core/schema/field-default.ts

@@ -0,0 +1,33 @@
+import type { SchemaField } from "@riducms/protocol";
+
+export type SchemaFieldDefault = { present: false } | { present: true; value: unknown };
+
+/** Decode the literal-default representation used by the schema manifest. */
+export function schemaFieldDefault(field: SchemaField): SchemaFieldDefault {
+	if (field.type === "select" && field.select?.hasMany === true) {
+		if ((field.select.defaultValues?.length ?? 0) === 0) return { present: false };
+		return { present: true, value: field.select.defaultValues };
+	}
+	if (field.default === undefined) return { present: false };
+	if (field.type === "text-list" || field.type === "number-list")
+		return { present: true, value: JSON.parse(field.default) };
+	if (field.type === "number") return { present: true, value: Number(field.default) };
+	if (field.type === "checkbox") return { present: true, value: field.default === "true" };
+	return { present: true, value: field.default };
+}
+
+/** Whether a generated create object requires this field when that object is supplied. */
+export function schemaFieldRequiredOnCreate(field: SchemaField): boolean {
+	const inputRequired =
+		field.required ||
+		((field.type === "text-list" || field.type === "number-list") &&
+			(field.list?.minRows ?? 0) > 0);
+	if (!inputRequired) return false;
+
+	return !(
+		field.default !== undefined ||
+		field.dynamicDefault === true ||
+		(field.select?.hasMany === true && (field.select.defaultValues?.length ?? 0) > 0) ||
+		field.text?.slug !== undefined
+	);
+}

package/src/core/schema/field-localization.ts

@@ -0,0 +1,15 @@
+import { resolveBlockTypes, type SchemaField } from "@riducms/protocol";
+
+export function fieldsUseLocalization(fields: readonly SchemaField[]): boolean {
+	const visited = new Set<SchemaField>();
+	const usesLocalization = (field: SchemaField): boolean => {
+		if (visited.has(field)) return false;
+		visited.add(field);
+		return (
+			field.localized === true ||
+			field.nested?.fields.some(usesLocalization) === true ||
+			resolveBlockTypes(field.blocks).some((block) => block.fields.some(usesLocalization))
+		);
+	};
+	return fields.some(usesLocalization);
+}

package/src/core/schema/read-document-path.ts

@@ -0,0 +1,11 @@
+import { isRecord } from "@riducms/protocol";
+
+/** Read a document/group path without treating arrays as nested records. */
+export function readDocumentPath(value: unknown, path: string) {
+	let current = value;
+	for (const segment of path.split(".")) {
+		if (!isRecord(current)) return undefined;
+		current = current[segment];
+	}
+	return current;
+}

package/src/features/account/account-menu.scss

@@ -0,0 +1,37 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-account-menu__trigger {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 25px;
+		height: 25px;
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: var(--foreground);
+		cursor: pointer;
+		border-radius: 50%;
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-account-menu__avatar {
+		fill: var(--nav-indicator-color);
+		overflow: visible;
+	}
+	.ridu-account-menu__avatar-background {
+		fill: var(--background-surface);
+		stroke: var(--nav-indicator-color);
+		stroke-width: 1px;
+	}
+	.ridu-account-menu__trigger:hover .ridu-account-menu__avatar {
+		fill: var(--foreground-muted);
+	}
+	.ridu-account-menu__trigger:hover .ridu-account-menu__avatar-background {
+		fill: var(--background-layer);
+		stroke: var(--foreground-muted);
+	}
+}

package/src/features/account/account-menu.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import "@admin/features/account/account-menu.scss";
+	import SettingsIcon from "~icons/lucide/settings";
+	import UserRoundIcon from "~icons/lucide/user-round";
+
+	import { buttonVariants } from "@riducms/ui";
+	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
+	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+
+	const runtime = getAdminRuntime();
+	const extensions = runtime.config.extensions;
+
+	let open = $state(false);
+
+	const accountAvatar = extensions.branding.find(
+		(component) => component.surface === "accountAvatar"
+	);
+	const settingsComponents = extensions.shellSlots.filter(
+		(component) => component.position === "settingsMenu"
+	);
+
+	function accountDetails() {
+		const user = runtime.session?.user;
+		const candidate = user?.name;
+		let displayName =
+			typeof candidate === "string" && candidate.trim().length > 0 ? candidate : undefined;
+
+		const identityField = runtime.authCollection?.authSettings?.identityField;
+		const identity = identityField === undefined ? undefined : user?.[identityField];
+		if (displayName === undefined && typeof identity === "string" && identity.trim().length > 0)
+			displayName = identity;
+		displayName ??= runtime.i18n.t("account:signedInUser");
+
+		return {
+			user,
+			displayName,
+			identity: typeof identity === "string" && identity !== displayName ? identity : undefined,
+		};
+	}
+
+	const account = $derived(accountDetails());
+</script>
+
+<Popover bind:open>
+	<PopoverTrigger
+		class="ridu-account-menu__trigger"
+		aria-label={runtime.i18n.t("account:accountMenuLabel", { name: account.displayName })}
+	>
+		{#if accountAvatar !== undefined && runtime.manifest !== undefined}
+			<accountAvatar.component
+				manifest={runtime.manifest}
+				user={account.user}
+				surface="accountAvatar"
+				i18n={runtime.i18n}
+			/>
+		{:else}
+			<svg
+				class="ridu-account-menu__avatar"
+				width="25"
+				height="25"
+				viewBox="0 0 25 25"
+				aria-hidden="true"
+			>
+				<circle class="ridu-account-menu__avatar-background" cx="12.5" cy="12.5" r="11.5" />
+				<circle cx="12.5" cy="10.73" r="3.98" />
+				<path
+					d="M12.5,24a11.44,11.44,0,0,0,7.66-2.94c-.5-2.71-3.73-4.8-7.66-4.8s-7.16,2.09-7.66,4.8A11.44,11.44,0,0,0,12.5,24Z"
+				/>
+			</svg>
+		{/if}
+	</PopoverTrigger>
+	<PopoverContent side="bottom" align="end" sideOffset={8} class="w-[212px] gap-1 p-2">
+		<div class="border-b border-control-border px-2.5 py-2 pb-3">
+			<p class="truncate text-[13px] font-medium text-foreground">{account.displayName}</p>
+			{#if account.identity !== undefined}
+				<p class="mt-0.5 truncate text-[10.5px] text-foreground-faint">{account.identity}</p>
+			{/if}
+		</div>
+
+		<Link
+			to={adminRoutePatterns.account}
+			class={buttonVariants({
+				variant: "ghost",
+				class: "h-9 w-full justify-start gap-2 px-2.5 text-[12.5px]",
+			})}
+			onclick={() => (open = false)}
+		>
+			<UserRoundIcon class="size-3.5" aria-hidden="true" />
+			{runtime.i18n.t("account:profileAndPreferences")}
+		</Link>
+		<Link
+			to={adminRoutePatterns.accountSecurity}
+			class={buttonVariants({
+				variant: "ghost",
+				class: "h-9 w-full justify-start gap-2 px-2.5 text-[12.5px]",
+			})}
+			onclick={() => (open = false)}
+		>
+			<SettingsIcon class="size-3.5" aria-hidden="true" />
+			{runtime.i18n.t("account:accountSecurity")}
+		</Link>
+		{#if runtime.manifest !== undefined}
+			{#each settingsComponents as component (component.key)}
+				<component.component
+					manifest={runtime.manifest}
+					user={account.user}
+					position="settingsMenu"
+					i18n={runtime.i18n}
+				/>
+			{/each}
+		{/if}
+	</PopoverContent>
+</Popover>

package/src/features/{auth → account}/account-navigation.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { Link } from "@hvniel/svelte-router";
 
-	import { buttonVariants } from "@admin/components/ui/button";
+	import { buttonVariants } from "@riducms/ui";
 	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 
 	const runtime = getAdminRuntime();
+
 	let { active }: { active: "profile" | "security" } = $props();
 </script>
 
@@ -15,29 +16,25 @@
 >
 	<Link
 		to={adminRoutePatterns.account}
-		class={buttonVariants({
-			variant: "ghost",
-			class: [
-				"rounded-b-none border-b-2 px-3",
-				active === "profile"
-					? "border-primary text-foreground-strong"
-					: "border-transparent text-foreground-muted hover:bg-control",
-			],
-		})}
+		class={[
+			buttonVariants({ variant: "ghost" }),
+			"rounded-b-none border-b-2 px-3",
+			active === "profile"
+				? "border-primary text-foreground-strong"
+				: "border-transparent text-foreground-muted hover:bg-control",
+		]}
 	>
 		{runtime.i18n.t("account:profileAndPreferences")}
 	</Link>
 	<Link
 		to={adminRoutePatterns.accountSecurity}
-		class={buttonVariants({
-			variant: "ghost",
-			class: [
-				"rounded-b-none border-b-2 px-3",
-				active === "security"
-					? "border-primary text-foreground-strong"
-					: "border-transparent text-foreground-muted hover:bg-control",
-			],
-		})}
+		class={[
+			buttonVariants({ variant: "ghost" }),
+			"rounded-b-none border-b-2 px-3",
+			active === "security"
+				? "border-primary text-foreground-strong"
+				: "border-transparent text-foreground-muted hover:bg-control",
+		]}
 	>
 		{runtime.i18n.t("account:security")}
 	</Link>