@nubitio/admin 1.1.1 → 1.2.0

package/dist/index.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -26,8 +26,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = __toESM(react, 1);
 let _nubitio_ui = require("@nubitio/ui");
-let _tanstack_react_query = require("@tanstack/react-query");
 let _nubitio_core = require("@nubitio/core");
+let _tanstack_react_query = require("@tanstack/react-query");
 let _nubitio_crud = require("@nubitio/crud");
 let _nubitio_hydra = require("@nubitio/hydra");
 //#region packages/admin/FeatureHubLayout.tsx
@@ -148,50 +148,61 @@ function ActionPopover({ action }) {
 	});
 }
 function UserMenuPopover({ renderUserMenu }) {
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { open, toggle, setOpen, containerRef } = (0, _nubitio_ui.useFloatingPanel)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "nb-admin-header-popover",
 		ref: containerRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
 			icon: "ph ph-user-circle",
-			label: "User menu",
+			label: strings.userMenu,
 			"aria-expanded": open,
 			onClick: toggle
 		}), open && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("header", {
-	className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "nb-admin-header-toolbar",
-		role: "toolbar",
-		"aria-label": "Main toolbar",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "nb-admin-header-toolbar__before",
-			children: [menuToggleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
-				className: "nb-admin-menu-button",
-				icon: "ph ph-list",
-				label: "Toggle menu",
-				onClick: toggleMenu
-			}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "nb-admin-header-title",
-				children: title
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "nb-admin-header-toolbar__after",
+const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], content, renderUserMenu, renderThemeSwitcher }) => {
+	const strings = (0, _nubitio_ui.useUiStrings)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+		className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "nb-admin-header-toolbar",
+			role: "toolbar",
+			"aria-label": strings.mainToolbar,
 			children: [
-				renderThemeSwitcher?.(),
-				actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionPopover, { action }, action.id)),
-				renderUserMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMenuPopover, { renderUserMenu })
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-admin-header-toolbar__before",
+					children: [menuToggleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
+						className: "nb-admin-menu-button",
+						icon: "ph ph-list",
+						label: strings.toggleMenu,
+						onClick: toggleMenu
+					}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "nb-admin-header-title",
+						children: title
+					})]
+				}),
+				content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "nb-admin-header-content",
+					children: content
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-admin-header-toolbar__after",
+					children: [
+						renderThemeSwitcher?.(),
+						actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionPopover, { action }, action.id)),
+						renderUserMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMenuPopover, { renderUserMenu })
+					]
+				})
 			]
-		})]
-	})
-});
+		})
+	});
+};
 //#endregion
 //#region packages/admin/useScreenSize.ts
 let handlers = [];
@@ -255,8 +266,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] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { isLarge } = useScreenSize();
 	const location = (0, react_router_dom.useLocation)();
 	(0, react.useEffect)(() => {
@@ -303,74 +315,86 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `nb-admin-menu${compactMode ? " compact" : ""}`,
 		onPointerDown: openMenu,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "nb-admin-menu-container theme-dependent",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "nb-admin-menu__text",
-									children: item.text
-								}),
-								hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `nb-admin-menu__chevron${expanded ? " is-expanded" : ""}`,
-									"aria-hidden": "true"
-								})
-							]
-						}), expanded && (item.items?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "nb-admin-menu__children",
-							children: item.items.map((subItem) => {
-								const childSelected = isSelected(subItem.path);
-								return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [
+			brand && !compactMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-menu__brand",
+				children: brand
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-menu-container theme-dependent",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+							className: `nb-admin-menu__section${containsSelected ? " has-selected-child" : ""}`,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `nb-admin-menu__icon ${getIconClassName(item.icon)}`,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "nb-admin-menu__text",
-										children: subItem.text
+										children: item.text
+									}),
+									hasChildren && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "nb-admin-menu__children",
+								children: item.items.map((subItem) => {
+									const childSelected = isSelected(subItem.path);
+									return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "nb-admin-menu__text",
+											children: subItem.text
+										})
+									}, subItem.path || subItem.text);
+								})
+							})]
+						}, itemKey);
+					})
 				})
+			}),
+			context && !compactMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-menu__context",
+				children: context
+			}),
+			footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+				className: "nb-admin-footer",
+				children: footer
 			})
-		}), footer && /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react_router_dom.useNavigate)();
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { isXSmall, isLarge } = useScreenSize();
 	const [menuStatus, setMenuStatus] = (0, react.useState)(null);
 	const getDefaultMenuOpenState = (0, react.useCallback)(() => isLarge ? 2 : 1, [isLarge]);
@@ -424,45 +448,121 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 		isXSmall ? "is-xsmall" : ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "nb-admin-shell",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminHeader, {
-			className: "nb-admin-layout-header",
-			menuToggleEnabled: true,
-			toggleMenu,
-			title,
-			actions: headerActions,
-			renderUserMenu,
-			renderThemeSwitcher
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: bodyClassName,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-					className: "nb-admin-shell__panel",
-					"aria-label": "Main menu",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(AdminHeader, {
+				className: "nb-admin-layout-header",
+				menuToggleEnabled: true,
+				toggleMenu,
+				title,
+				actions: headerActions,
+				content: headerContent,
+				renderUserMenu,
+				renderThemeSwitcher
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: bodyClassName,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+						className: "nb-admin-shell__panel",
+						"aria-label": strings.mainMenu,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminSidebarMenu, {
+							items: menuItems,
+							compactMode: isCompact,
+							selectedItemChanged: onNavigationChanged,
+							openMenu: temporaryOpenMenu,
+							footer,
+							brand,
+							context: sidebarContext
+						})
+					}),
+					!isLarge && isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "nb-admin-shell__scrim",
+						type: "button",
+						"aria-label": strings.closeMenu,
+						onClick: closeMenuFromOverlay
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+						className: "nb-admin-shell__content content",
+						tabIndex: 0,
+						"aria-label": title ? `${title} content` : strings.mainContent,
+						children
 					})
+				]
+			}),
+			isXSmall && bottomNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "nb-admin-shell__bottom-navigation",
+				children: bottomNavigation
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/admin/AdminBottomNavigation.tsx
+function AdminBottomNavigation({ items, label }) {
+	const { pathname } = (0, react_router_dom.useLocation)();
+	const strings = (0, _nubitio_ui.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__ */ (0, react_jsx_runtime.jsx)("nav", {
+		className: "nb-admin-bottom-nav",
+		"aria-label": label ?? strings.mainNavigation,
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+			to: item.path,
+			className: "nb-admin-bottom-nav__item",
+			"aria-current": normalize(item.path) === activePath ? "page" : void 0,
+			children: [
+				item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `nb-admin-bottom-nav__icon ${item.icon.includes(" ") ? item.icon : `ph ph-${item.icon}`}`,
+					"aria-hidden": "true"
 				}),
-				!isLarge && isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					className: "nb-admin-shell__scrim",
-					type: "button",
-					"aria-label": "Close menu",
-					onClick: closeMenuFromOverlay
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "nb-admin-bottom-nav__label",
+					children: item.text
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-					className: "nb-admin-shell__content content",
-					tabIndex: 0,
-					"aria-label": title ? `${title} content` : "Main content",
-					children
+				item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.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) ? (0, _nubitio_core.readCsrfToken)() : void 0;
+	if (token === void 0) return fetch(input, init);
+	const headers = new Headers(init.headers);
+	if (!headers.has(_nubitio_core.DEFAULT_CSRF_HEADER_NAME)) headers.set(_nubitio_core.DEFAULT_CSRF_HEADER_NAME, token);
+	return fetch(input, {
+		...init,
+		headers
+	});
+}
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = (0, react.createContext)(null);
@@ -478,9 +578,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" });
@@ -490,7 +591,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = (0, react.useCallback)(async () => {
-		await fetch(joinApiPath$7(apiBaseUrl, logoutPath), {
+		await csrfFetch(joinApiPath$7(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -551,9 +652,10 @@ function useFeatureConfig(featureKey) {
 //#endregion
 //#region packages/admin/features/FeatureGate.tsx
 function FeatureGate({ featureKey, ...props }) {
+	const enabled = useFeature(featureKey);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.FeatureGate, {
 		featureKey,
-		enabled: useFeature(featureKey),
+		enabled,
 		...props
 	});
 }
@@ -601,10 +703,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "nb-plan-panel__status",
+			children: trialTemplate.replace("{date}", formatTrialEnds(trialEndsAt))
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
 		"aria-labelledby": "plan-panel-title",
@@ -1000,7 +1105,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",
@@ -1076,7 +1181,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",
@@ -1086,7 +1191,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);
@@ -1168,13 +1274,14 @@ function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
 	const [busy, setBusy] = (0, react.useState)(false);
 	(0, react.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");
 		});
@@ -1187,14 +1294,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);
@@ -1294,7 +1402,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]);
 	(0, react.useEffect)(() => {
 		const controller = new AbortController();
@@ -1306,7 +1417,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",
@@ -1316,7 +1427,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("");
@@ -1326,12 +1438,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();
@@ -1340,14 +1453,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("");
@@ -1357,14 +1471,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("");
@@ -1372,7 +1487,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"
 		});
@@ -1558,7 +1673,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] = (0, react.useState)((0, react.useMemo)(() => initialValues(fields), [fields]));
+	const defaults = (0, react.useMemo)(() => initialValues(fields), [fields]);
+	const [values, setValues] = (0, react.useState)(defaults);
 	const [error, setError] = (0, react.useState)(null);
 	const [busy, setBusy] = (0, react.useState)(false);
 	const setValue = (name, value) => {
@@ -1572,7 +1688,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",
@@ -1716,9 +1832,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" });
@@ -2059,6 +2176,7 @@ function resolveShellMenu(config, ctx) {
 }
 function NubitAuthenticatedApp({ config }) {
 	const session = useSession();
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { runtime, toasts, dismiss } = useAppRuntime();
 	const apiBaseUrl = config.apiBaseUrl ?? "/api/";
 	const homePath = config.homePath ?? config.routes[0]?.path ?? "/";
@@ -2075,7 +2193,7 @@ function NubitAuthenticatedApp({ config }) {
 	if (session.session.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: { padding: 24 },
 		"aria-busy": "true",
-		"aria-label": "Loading session",
+		"aria-label": strings.loadingSession,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Skeleton, {
 				variant: "rect",
@@ -2093,8 +2211,7 @@ function NubitAuthenticatedApp({ config }) {
 	const shell = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminShell, {
 		title: config.title,
 		menuItems,
-		headerActions: config.shell?.headerActions,
-		footer: config.shell?.footer,
+		...config.shell,
 		renderThemeSwitcher,
 		renderUserMenu: ({ close }) => renderUserMenu({
 			...menuContext,
@@ -2126,6 +2243,7 @@ function NubitAuthenticatedApp({ config }) {
 				baseUrl: apiBaseUrl,
 				refreshPath: "auth/refresh",
 				loginPath: "auth/login",
+				getCsrfToken: () => (0, _nubitio_core.readCsrfToken)(),
 				onUnauthorized: () => {
 					session.logout();
 				}
@@ -2192,6 +2310,7 @@ function createNubitApp(config) {
 			client: queryClient,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.ThemeProvider, {
 				basePath: config.themeBasePath,
+				visualStyle: config.visualStyle,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionProvider, {
 					apiBaseUrl,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NubitAuthenticatedApp, { config })
@@ -2204,6 +2323,7 @@ function createNubitApp(config) {
 //#endregion
 exports.AcceptInvitationPage = AcceptInvitationPage;
 exports.AccountPage = AccountPage;
+exports.AdminBottomNavigation = AdminBottomNavigation;
 exports.AdminHeader = AdminHeader;
 exports.AdminShell = AdminShell;
 exports.AdminSidebarMenu = AdminSidebarMenu;