@nubitio/admin 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { BrowserRouter, Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { Component, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Badge, Button, Card, EmptyState, FeatureGate as FeatureGate$1, FormField, IconButton, Skeleton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel } from "@nubitio/ui";
+import { Badge, Button, Card, EmptyState, FeatureGate as FeatureGate$1, FormField, IconButton, Skeleton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel, useUiStrings } from "@nubitio/ui";
+import { CoreConfigProvider, CoreProvider, DEFAULT_CSRF_HEADER_NAME, MercureProvider, readCsrfToken, useCoreHttpClient, useMercureSubscription } from "@nubitio/core";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CoreConfigProvider, CoreProvider, MercureProvider, useCoreHttpClient, useMercureSubscription } from "@nubitio/core";
 import { DevToolsProvider, SessionPermissionsProvider, SmartCrudRolesProvider, isDevEnvironment, useDevTools } from "@nubitio/crud";
 import { HydraResourceSchemaProvider, HydraResourceStoreProvider, SchemaProvider } from "@nubitio/hydra";
 //#region packages/admin/FeatureHubLayout.tsx
@@ -124,50 +124,61 @@ function ActionPopover({ action }) {
 	});
 }
 function UserMenuPopover({ renderUserMenu }) {
+	const strings = useUiStrings();
 	const { open, toggle, setOpen, containerRef } = useFloatingPanel();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "nb-admin-header-popover",
 		ref: containerRef,
 		children: [/* @__PURE__ */ jsx(IconButton, {
 			icon: "ph ph-user-circle",
-			label: "User menu",
+			label: strings.userMenu,
 			"aria-expanded": open,
 			onClick: toggle
 		}), open && /* @__PURE__ */ jsx("div", {
 			className: "nb-admin-header-popover__panel",
 			role: "dialog",
-			"aria-label": "User menu",
+			"aria-label": strings.userMenu,
 			children: renderUserMenu({ close: () => setOpen(false) })
 		})]
 	});
 }
-const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], renderUserMenu, renderThemeSwitcher }) => /* @__PURE__ */ jsx("header", {
-	className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
-	children: /* @__PURE__ */ jsxs("div", {
-		className: "nb-admin-header-toolbar",
-		role: "toolbar",
-		"aria-label": "Main toolbar",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "nb-admin-header-toolbar__before",
-			children: [menuToggleEnabled && /* @__PURE__ */ jsx(IconButton, {
-				className: "nb-admin-menu-button",
-				icon: "ph ph-list",
-				label: "Toggle menu",
-				onClick: toggleMenu
-			}), title && /* @__PURE__ */ jsx("div", {
-				className: "nb-admin-header-title",
-				children: title
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "nb-admin-header-toolbar__after",
+const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], content, renderUserMenu, renderThemeSwitcher }) => {
+	const strings = useUiStrings();
+	return /* @__PURE__ */ jsx("header", {
+		className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "nb-admin-header-toolbar",
+			role: "toolbar",
+			"aria-label": strings.mainToolbar,
 			children: [
-				renderThemeSwitcher?.(),
-				actions.map((action) => /* @__PURE__ */ jsx(ActionPopover, { action }, action.id)),
-				renderUserMenu && /* @__PURE__ */ jsx(UserMenuPopover, { renderUserMenu })
+				/* @__PURE__ */ jsxs("div", {
+					className: "nb-admin-header-toolbar__before",
+					children: [menuToggleEnabled && /* @__PURE__ */ jsx(IconButton, {
+						className: "nb-admin-menu-button",
+						icon: "ph ph-list",
+						label: strings.toggleMenu,
+						onClick: toggleMenu
+					}), title && /* @__PURE__ */ jsx("div", {
+						className: "nb-admin-header-title",
+						children: title
+					})]
+				}),
+				content && /* @__PURE__ */ jsx("div", {
+					className: "nb-admin-header-content",
+					children: content
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "nb-admin-header-toolbar__after",
+					children: [
+						renderThemeSwitcher?.(),
+						actions.map((action) => /* @__PURE__ */ jsx(ActionPopover, { action }, action.id)),
+						renderUserMenu && /* @__PURE__ */ jsx(UserMenuPopover, { renderUserMenu })
+					]
+				})
 			]
-		})]
-	})
-});
+		})
+	});
+};
 //#endregion
 //#region packages/admin/useScreenSize.ts
 let handlers = [];
@@ -231,8 +242,9 @@ const getIconClassName = (icon) => {
 	if (!icon) return "";
 	return icon.includes(" ") ? icon : `ph ph-${icon}`;
 };
-const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer }) => {
+const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer, brand, context }) => {
 	const [expandedItemKeys, setExpandedItemKeys] = useState(/* @__PURE__ */ new Set());
+	const strings = useUiStrings();
 	const { isLarge } = useScreenSize();
 	const location = useLocation();
 	useEffect(() => {
@@ -279,74 +291,86 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 	return /* @__PURE__ */ jsxs("div", {
 		className: `nb-admin-menu${compactMode ? " compact" : ""}`,
 		onPointerDown: openMenu,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "nb-admin-menu-container theme-dependent",
-			children: /* @__PURE__ */ jsx("nav", {
-				className: "nb-admin-menu__nav",
-				"aria-label": "Main navigation",
-				children: items.map((item) => {
-					const selected = isSelected(item.path);
-					const containsSelected = parentContainsSelected(item);
-					const itemKey = item.path || item.text;
-					const hasChildren = (item.items?.length ?? 0) > 0;
-					const expanded = !compactMode && hasChildren && expandedItemKeys.has(itemKey);
-					return /* @__PURE__ */ jsxs("section", {
-						className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
-						children: [/* @__PURE__ */ jsxs("button", {
-							className: `nb-admin-menu__item nb-admin-menu__item--parent${selected ? " is-selected" : ""}`,
-							type: "button",
-							"aria-current": selected ? "page" : void 0,
-							"aria-expanded": hasChildren ? expanded : void 0,
-							onClick: (event) => {
-								if (hasChildren) {
-									toggleExpanded(itemKey);
-									return;
-								}
-								handleSelect(item.path, selected, event);
-							},
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "nb-admin-menu__text",
-									children: item.text
-								}),
-								hasChildren && /* @__PURE__ */ jsx("span", {
-									className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
-									"aria-hidden": "true"
-								})
-							]
-						}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
-							className: "nb-admin-menu__children",
-							children: item.items.map((subItem) => {
-								const childSelected = isSelected(subItem.path);
-								return /* @__PURE__ */ jsx("button", {
-									className: `nb-admin-menu__item nb-admin-menu__item--child${childSelected ? " is-selected" : ""}`,
-									type: "button",
-									"aria-current": childSelected ? "page" : void 0,
-									onClick: (event) => handleSelect(subItem.path, childSelected, event),
-									children: /* @__PURE__ */ jsx("span", {
+		children: [
+			brand && !compactMode && /* @__PURE__ */ jsx("div", {
+				className: "nb-admin-menu__brand",
+				children: brand
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "nb-admin-menu-container theme-dependent",
+				children: /* @__PURE__ */ jsx("nav", {
+					className: "nb-admin-menu__nav",
+					"aria-label": strings.mainNavigation,
+					children: items.map((item) => {
+						const selected = isSelected(item.path);
+						const containsSelected = parentContainsSelected(item);
+						const itemKey = item.path || item.text;
+						const hasChildren = (item.items?.length ?? 0) > 0;
+						const expanded = !compactMode && hasChildren && expandedItemKeys.has(itemKey);
+						return /* @__PURE__ */ jsxs("section", {
+							className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
+							children: [/* @__PURE__ */ jsxs("button", {
+								className: `nb-admin-menu__item nb-admin-menu__item--parent${selected ? " is-selected" : ""}`,
+								type: "button",
+								"aria-current": selected ? "page" : void 0,
+								"aria-expanded": hasChildren ? expanded : void 0,
+								onClick: (event) => {
+									if (hasChildren) {
+										toggleExpanded(itemKey);
+										return;
+									}
+									handleSelect(item.path, selected, event);
+								},
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("span", {
 										className: "nb-admin-menu__text",
-										children: subItem.text
+										children: item.text
+									}),
+									hasChildren && /* @__PURE__ */ jsx("span", {
+										className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
+										"aria-hidden": "true"
 									})
-								}, subItem.path || subItem.text);
-							})
-						})]
-					}, itemKey);
+								]
+							}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
+								className: "nb-admin-menu__children",
+								children: item.items.map((subItem) => {
+									const childSelected = isSelected(subItem.path);
+									return /* @__PURE__ */ jsx("button", {
+										className: `nb-admin-menu__item nb-admin-menu__item--child${childSelected ? " is-selected" : ""}`,
+										type: "button",
+										"aria-current": childSelected ? "page" : void 0,
+										onClick: (event) => handleSelect(subItem.path, childSelected, event),
+										children: /* @__PURE__ */ jsx("span", {
+											className: "nb-admin-menu__text",
+											children: subItem.text
+										})
+									}, subItem.path || subItem.text);
+								})
+							})]
+						}, itemKey);
+					})
 				})
+			}),
+			context && !compactMode && /* @__PURE__ */ jsx("div", {
+				className: "nb-admin-menu__context",
+				children: context
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "nb-admin-footer",
+				children: footer
 			})
-		}), footer && /* @__PURE__ */ jsx("footer", {
-			className: "nb-admin-footer",
-			children: footer
-		})]
+		]
 	});
 };
 //#endregion
 //#region packages/admin/AdminShell.tsx
-const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }) => {
+const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, variant = "default", brand, headerContent, sidebarContext, bottomNavigation, children }) => {
 	const navigate = useNavigate();
+	const strings = useUiStrings();
 	const { isXSmall, isLarge } = useScreenSize();
 	const [menuStatus, setMenuStatus] = useState(null);
 	const getDefaultMenuOpenState = useCallback(() => isLarge ? 2 : 1, [isLarge]);
@@ -400,45 +424,121 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 		isXSmall ? "is-xsmall" : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "nb-admin-shell",
-		children: [/* @__PURE__ */ jsx(AdminHeader, {
-			className: "nb-admin-layout-header",
-			menuToggleEnabled: true,
-			toggleMenu,
-			title,
-			actions: headerActions,
-			renderUserMenu,
-			renderThemeSwitcher
-		}), /* @__PURE__ */ jsxs("div", {
-			className: bodyClassName,
-			children: [
-				/* @__PURE__ */ jsx("aside", {
-					className: "nb-admin-shell__panel",
-					"aria-label": "Main menu",
-					children: /* @__PURE__ */ jsx(AdminSidebarMenu, {
-						items: menuItems,
-						compactMode: isCompact,
-						selectedItemChanged: onNavigationChanged,
-						openMenu: temporaryOpenMenu,
-						footer
+		className: [
+			"nb-admin-shell",
+			variant === "workspace" && "nb-admin-shell--workspace",
+			variant === "workspace" && isLarge && "is-workspace-desktop",
+			variant === "workspace" && isLarge && isCompact && "is-workspace-compact"
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(AdminHeader, {
+				className: "nb-admin-layout-header",
+				menuToggleEnabled: true,
+				toggleMenu,
+				title,
+				actions: headerActions,
+				content: headerContent,
+				renderUserMenu,
+				renderThemeSwitcher
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: bodyClassName,
+				children: [
+					/* @__PURE__ */ jsx("aside", {
+						className: "nb-admin-shell__panel",
+						"aria-label": strings.mainMenu,
+						children: /* @__PURE__ */ jsx(AdminSidebarMenu, {
+							items: menuItems,
+							compactMode: isCompact,
+							selectedItemChanged: onNavigationChanged,
+							openMenu: temporaryOpenMenu,
+							footer,
+							brand,
+							context: sidebarContext
+						})
+					}),
+					!isLarge && isMenuOpen && /* @__PURE__ */ jsx("button", {
+						className: "nb-admin-shell__scrim",
+						type: "button",
+						"aria-label": strings.closeMenu,
+						onClick: closeMenuFromOverlay
+					}),
+					/* @__PURE__ */ jsx("main", {
+						className: "nb-admin-shell__content content",
+						tabIndex: 0,
+						"aria-label": title ? `${title} content` : strings.mainContent,
+						children
 					})
+				]
+			}),
+			isXSmall && bottomNavigation && /* @__PURE__ */ jsx("div", {
+				className: "nb-admin-shell__bottom-navigation",
+				children: bottomNavigation
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/admin/AdminBottomNavigation.tsx
+function AdminBottomNavigation({ items, label }) {
+	const { pathname } = useLocation();
+	const strings = useUiStrings();
+	const normalize = (path) => path.replace(/\/+$/, "") || "/";
+	const currentPath = normalize(pathname);
+	const activePath = items.map((item) => normalize(item.path)).filter((path) => currentPath === path || path !== "/" && currentPath.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
+	return /* @__PURE__ */ jsx("nav", {
+		className: "nb-admin-bottom-nav",
+		"aria-label": label ?? strings.mainNavigation,
+		children: items.map((item) => /* @__PURE__ */ jsxs(Link, {
+			to: item.path,
+			className: "nb-admin-bottom-nav__item",
+			"aria-current": normalize(item.path) === activePath ? "page" : void 0,
+			children: [
+				item.icon && /* @__PURE__ */ jsx("span", {
+					className: `nb-admin-bottom-nav__icon ${item.icon.includes(" ") ? item.icon : `ph ph-${item.icon}`}`,
+					"aria-hidden": "true"
 				}),
-				!isLarge && isMenuOpen && /* @__PURE__ */ jsx("button", {
-					className: "nb-admin-shell__scrim",
-					type: "button",
-					"aria-label": "Close menu",
-					onClick: closeMenuFromOverlay
+				/* @__PURE__ */ jsx("span", {
+					className: "nb-admin-bottom-nav__label",
+					children: item.text
 				}),
-				/* @__PURE__ */ jsx("main", {
-					className: "nb-admin-shell__content content",
-					tabIndex: 0,
-					"aria-label": title ? `${title} content` : "Main content",
-					children
+				item.badge != null && /* @__PURE__ */ jsx("span", {
+					className: "nb-admin-bottom-nav__badge",
+					children: item.badge
 				})
 			]
-		})]
+		}, item.path))
 	});
-};
+}
+//#endregion
+//#region packages/admin/auth/csrfFetch.ts
+const MUTATING_METHODS = /* @__PURE__ */ new Set([
+	"POST",
+	"PUT",
+	"PATCH",
+	"DELETE"
+]);
+/**
+* `fetch` that echoes the double-submit CSRF cookie as `X-CSRF-Token` on
+* state-changing requests.
+*
+* The backend rejects cookie-authenticated POST/PUT/PATCH/DELETE that lack it
+* (`nubit_admin.auth.csrf_protection`, on by default), so the auth pages' own
+* calls — logout, change password, TOTP, session revocation — need it exactly
+* as the CRUD client does. Reads, and requests made before login has issued the
+* cookie, pass through untouched.
+*/
+function csrfFetch(input, init = {}) {
+	const method = (init.method ?? "GET").toUpperCase();
+	const token = MUTATING_METHODS.has(method) ? readCsrfToken() : void 0;
+	if (token === void 0) return fetch(input, init);
+	const headers = new Headers(init.headers);
+	if (!headers.has(DEFAULT_CSRF_HEADER_NAME)) headers.set(DEFAULT_CSRF_HEADER_NAME, token);
+	return fetch(input, {
+		...init,
+		headers
+	});
+}
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = createContext(null);
@@ -454,9 +554,10 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 				setSession({ status: "anonymous" });
 				return;
 			}
+			const profile = await response.json();
 			setSession({
 				status: "authenticated",
-				profile: await response.json()
+				profile
 			});
 		} catch {
 			setSession({ status: "anonymous" });
@@ -466,7 +567,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = useCallback(async () => {
-		await fetch(joinApiPath$7(apiBaseUrl, logoutPath), {
+		await csrfFetch(joinApiPath$7(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -527,9 +628,10 @@ function useFeatureConfig(featureKey) {
 //#endregion
 //#region packages/admin/features/FeatureGate.tsx
 function FeatureGate({ featureKey, ...props }) {
+	const enabled = useFeature(featureKey);
 	return /* @__PURE__ */ jsx(FeatureGate$1, {
 		featureKey,
-		enabled: useFeature(featureKey),
+		enabled,
 		...props
 	});
 }
@@ -577,10 +679,13 @@ function PlanPanel({ plans, currentPlanId, subscriptionStatus, trialEndsAt, onSe
 	const currentBadge = labels?.currentBadge ?? "Current plan";
 	const selectingLabel = labels?.selecting ?? "Updating…";
 	let statusLine = null;
-	if (subscriptionStatus === "trialing" && trialEndsAt) statusLine = /* @__PURE__ */ jsx("p", {
-		className: "nb-plan-panel__status",
-		children: (labels?.trialEnds ?? "Trial ends {date}").replace("{date}", formatTrialEnds(trialEndsAt))
-	});
+	if (subscriptionStatus === "trialing" && trialEndsAt) {
+		const trialTemplate = labels?.trialEnds ?? "Trial ends {date}";
+		statusLine = /* @__PURE__ */ jsx("p", {
+			className: "nb-plan-panel__status",
+			children: trialTemplate.replace("{date}", formatTrialEnds(trialEndsAt))
+		});
+	}
 	return /* @__PURE__ */ jsxs("section", {
 		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
 		"aria-labelledby": "plan-panel-title",
@@ -976,7 +1081,7 @@ function ForgotPasswordPage({ apiBaseUrl = "/api/" }) {
 		event.preventDefault();
 		setBusy(true);
 		try {
-			await fetch(joinApiPath$5(apiBaseUrl, "auth/password/forgot"), {
+			await csrfFetch(joinApiPath$5(apiBaseUrl, "auth/password/forgot"), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -1052,7 +1157,7 @@ function ResetPasswordPage({ apiBaseUrl = "/api/" }) {
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$4(apiBaseUrl, "auth/password/reset"), {
+			const response = await csrfFetch(joinApiPath$4(apiBaseUrl, "auth/password/reset"), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -1062,7 +1167,8 @@ function ResetPasswordPage({ apiBaseUrl = "/api/" }) {
 				})
 			});
 			if (!response.ok) {
-				setError((await response.json().catch(() => null))?.message ?? "Reset failed");
+				const payload = await response.json().catch(() => null);
+				setError(payload?.message ?? "Reset failed");
 				return;
 			}
 			setDone(true);
@@ -1144,13 +1250,14 @@ function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
 	const [busy, setBusy] = useState(false);
 	useEffect(() => {
 		let cancelled = false;
-		fetch(joinApiPath$3(apiBaseUrl, `invitations/${token}`), { credentials: "include" }).then(async (response) => {
+		csrfFetch(joinApiPath$3(apiBaseUrl, `invitations/${token}`), { credentials: "include" }).then(async (response) => {
 			if (cancelled) return;
 			if (!response.ok) {
 				setError("This invitation is no longer valid.");
 				return;
 			}
-			setEmail((await response.json()).email ?? null);
+			const payload = await response.json();
+			setEmail(payload.email ?? null);
 		}).catch(() => {
 			if (!cancelled) setError("Network error");
 		});
@@ -1163,14 +1270,15 @@ function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$3(apiBaseUrl, `invitations/${token}/accept`), {
+			const response = await csrfFetch(joinApiPath$3(apiBaseUrl, `invitations/${token}/accept`), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
 				body: JSON.stringify({ password })
 			});
 			if (!response.ok) {
-				setError((await response.json().catch(() => null))?.message ?? "Could not accept the invitation");
+				const payload = await response.json().catch(() => null);
+				setError(payload?.message ?? "Could not accept the invitation");
 				return;
 			}
 			setDone(true);
@@ -1270,7 +1378,10 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 		})]);
 		if (signal?.aborted) return;
 		if (totpResponse.ok) setTotp(await totpResponse.json());
-		if (sessionResponse.ok) setSessions((await sessionResponse.json()).sessions ?? []);
+		if (sessionResponse.ok) {
+			const payload = await sessionResponse.json();
+			setSessions(payload.sessions ?? []);
+		}
 	}, [apiBaseUrl]);
 	useEffect(() => {
 		const controller = new AbortController();
@@ -1282,7 +1393,7 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	const changePassword = async (event) => {
 		event.preventDefault();
 		setPasswordMessage(null);
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/change-password"), {
+		const response = await csrfFetch(joinApiPath$2(apiBaseUrl, "auth/change-password"), {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			credentials: "include",
@@ -1292,7 +1403,8 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 			})
 		});
 		if (!response.ok) {
-			setPasswordMessage((await response.json().catch(() => null))?.message ?? "Could not change password");
+			const payload = await response.json().catch(() => null);
+			setPasswordMessage(payload?.message ?? "Could not change password");
 			return;
 		}
 		setCurrentPassword("");
@@ -1302,12 +1414,13 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	};
 	const beginTotp = async () => {
 		setTotpMessage(null);
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+		const response = await csrfFetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
 			method: "POST",
 			credentials: "include"
 		});
 		if (!response.ok) {
-			setTotpMessage((await response.json().catch(() => null))?.message ?? "Could not start enrolment");
+			const payload = await response.json().catch(() => null);
+			setTotpMessage(payload?.message ?? "Could not start enrolment");
 			return;
 		}
 		const payload = await response.json();
@@ -1316,14 +1429,15 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	};
 	const confirmTotp = async (event) => {
 		event.preventDefault();
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp/confirm"), {
+		const response = await csrfFetch(joinApiPath$2(apiBaseUrl, "auth/totp/confirm"), {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			credentials: "include",
 			body: JSON.stringify({ code: totpCode })
 		});
 		if (!response.ok) {
-			setTotpMessage((await response.json().catch(() => null))?.message ?? "That code is not valid");
+			const payload = await response.json().catch(() => null);
+			setTotpMessage(payload?.message ?? "That code is not valid");
 			return;
 		}
 		setTotpCode("");
@@ -1333,14 +1447,15 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	};
 	const disableTotp = async (event) => {
 		event.preventDefault();
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+		const response = await csrfFetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
 			method: "DELETE",
 			headers: { "Content-Type": "application/json" },
 			credentials: "include",
 			body: JSON.stringify({ code: totpCode })
 		});
 		if (!response.ok) {
-			setTotpMessage((await response.json().catch(() => null))?.message ?? "Could not disable the second factor");
+			const payload = await response.json().catch(() => null);
+			setTotpMessage(payload?.message ?? "Could not disable the second factor");
 			return;
 		}
 		setTotpCode("");
@@ -1348,7 +1463,7 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 		await load();
 	};
 	const revokeSession = async (id) => {
-		await fetch(joinApiPath$2(apiBaseUrl, `auth/sessions/${id}`), {
+		await csrfFetch(joinApiPath$2(apiBaseUrl, `auth/sessions/${id}`), {
 			method: "DELETE",
 			credentials: "include"
 		});
@@ -1534,7 +1649,8 @@ function initialValues(fields) {
 	return Object.fromEntries(fields.map((field) => [field.name, field.defaultValue ?? ""]));
 }
 function RegisterPage({ fields, onRegistered, apiBaseUrl = "/api/", registerPath = "auth/register", title = "Create account", hint, submitLabel = "Create account", busyLabel = "Creating…", loginLink, loginPrompt = "Already have an account?" }) {
-	const [values, setValues] = useState(useMemo(() => initialValues(fields), [fields]));
+	const defaults = useMemo(() => initialValues(fields), [fields]);
+	const [values, setValues] = useState(defaults);
 	const [error, setError] = useState(null);
 	const [busy, setBusy] = useState(false);
 	const setValue = (name, value) => {
@@ -1548,7 +1664,7 @@ function RegisterPage({ fields, onRegistered, apiBaseUrl = "/api/", registerPath
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$1(apiBaseUrl, registerPath), {
+			const response = await csrfFetch(joinApiPath$1(apiBaseUrl, registerPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -1692,9 +1808,10 @@ function useRuntimeConfig({ apiBaseUrl = "/api/", path = "runtime-config", enabl
 				setState({ status: "error" });
 				return;
 			}
+			const config = await response.json();
 			setState({
 				status: "ready",
-				config: await response.json()
+				config
 			});
 		} catch {
 			setState({ status: "error" });
@@ -2035,6 +2152,7 @@ function resolveShellMenu(config, ctx) {
 }
 function NubitAuthenticatedApp({ config }) {
 	const session = useSession();
+	const strings = useUiStrings();
 	const { runtime, toasts, dismiss } = useAppRuntime();
 	const apiBaseUrl = config.apiBaseUrl ?? "/api/";
 	const homePath = config.homePath ?? config.routes[0]?.path ?? "/";
@@ -2051,7 +2169,7 @@ function NubitAuthenticatedApp({ config }) {
 	if (session.session.status === "loading") return /* @__PURE__ */ jsxs("div", {
 		style: { padding: 24 },
 		"aria-busy": "true",
-		"aria-label": "Loading session",
+		"aria-label": strings.loadingSession,
 		children: [
 			/* @__PURE__ */ jsx(Skeleton, {
 				variant: "rect",
@@ -2069,8 +2187,7 @@ function NubitAuthenticatedApp({ config }) {
 	const shell = /* @__PURE__ */ jsx(AdminShell, {
 		title: config.title,
 		menuItems,
-		headerActions: config.shell?.headerActions,
-		footer: config.shell?.footer,
+		...config.shell,
 		renderThemeSwitcher,
 		renderUserMenu: ({ close }) => renderUserMenu({
 			...menuContext,
@@ -2102,6 +2219,7 @@ function NubitAuthenticatedApp({ config }) {
 				baseUrl: apiBaseUrl,
 				refreshPath: "auth/refresh",
 				loginPath: "auth/login",
+				getCsrfToken: () => readCsrfToken(),
 				onUnauthorized: () => {
 					session.logout();
 				}
@@ -2168,6 +2286,7 @@ function createNubitApp(config) {
 			client: queryClient,
 			children: /* @__PURE__ */ jsx(ThemeProvider, {
 				basePath: config.themeBasePath,
+				visualStyle: config.visualStyle,
 				children: /* @__PURE__ */ jsx(SessionProvider, {
 					apiBaseUrl,
 					children: /* @__PURE__ */ jsx(NubitAuthenticatedApp, { config })
@@ -2178,4 +2297,4 @@ function createNubitApp(config) {
 	return { App };
 }
 //#endregion
-export { AcceptInvitationPage, AccountPage, AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, FeatureHubLayout, ForgotPasswordPage, LoginPage, NotificationPanel, NubitDevToolsPanel, PlanPanel, QuotaUsageBanner, RegisterPage, ResetPasswordPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AcceptInvitationPage, AccountPage, AdminBottomNavigation, AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, FeatureHubLayout, ForgotPasswordPage, LoginPage, NotificationPanel, NubitDevToolsPanel, PlanPanel, QuotaUsageBanner, RegisterPage, ResetPasswordPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };