@navette-js/panels 1.0.0-beta.4 → 1.0.0-beta.5

package/lib/index.js

@@ -8,22 +8,30 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
 };
 // @navette-js/panels: Panel, layouts, pages, resources, navigation, authentication and session.
 import { AsyncLocalStorage } from 'node:async_hooks';
-import { createHash, createHmac, timingSafeEqual } from 'node:crypto';
-import { checkVerificationUrl, consoleMailer, readToken, signToken, signVerificationUrl } from "./auth.js";
-export { consoleMailer, fileMailer, hashPassword, knexAuthProvider, knexTenantProvider, mailText, verifyPassword } from "./auth.js";
+import { createHash, createHmac, randomBytes, timingSafeEqual } from 'node:crypto';
+import { Throttle } from "./throttle.js";
+export { Throttle } from "./throttle.js";
+import { checkVerificationUrl, consoleMailer, fingerprint, readToken, signToken, signVerificationUrl } from "./auth.js";
+export { consoleMailer, fileMailer, hashPassword, knexAuthProvider, knexTenantProvider, mailText, multiFactorAuthenticationSchema, verifyPassword } from "./auth.js";
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import express from 'express';
 import { Action, ActionHalt, useColorManager, ActionGroup } from '@navette-js/actions';
 import { Checkbox, Field, Select, TextInput, Wizard, richDocumentToHtml, richHtmlToDocument, fillSchema, fillSchemaFromRecord, getSchemaState, loadSchemaRelationships, saveSchemaRelationships, validateSchema, useColorManager as useFormsColorManager } from '@navette-js/forms';
-import { Actions, Component as SchemaComponent, EmbeddedSchema, Form, Group, Html, RenderHook, Schema, StatefulGroup } from '@navette-js/schemas';
+import { Actions, childSchema, Component as SchemaComponent, EmbeddedSchema, Form, Group, Html, RenderHook, Schema, Section, StatefulGroup } from '@navette-js/schemas';
 import { WireError } from '@navette-js/wire';
 import { useColorManager as useInfolistsColorManager, useHtmlSanitizer } from '@navette-js/infolists';
 import { Notification, Notifications, publish, runInRequest } from "./notifications.js";
 export { Notification, Notifications } from "./notifications.js";
+import { getDefaultCacheStore, MultiFactorChallenge, SecurityKeyAuthentication } from "./multi-factor.js";
+export { AppAuthentication, EmailAuthentication, EmailCodeInput, decryptSecret, encryptSecret, MemoryCacheStore, MultiFactorChallenge, SecurityKeyAuthentication, SecurityKeyInput, useMultiFactorCacheStore } from "./multi-factor.js";
+export { base32Decode, base32Encode, generateTotpSecret, hotp, totpCode, totpTimestep, totpUri, verifyTotp } from "./totp.js";
+export { qrCodeDataUri, qrCodeMatrix, qrCodeSvg } from "./qr-code.js";
+export { authenticationOptions, decodeCbor, generateChallenge, registrationOptions, verifyAuthentication, verifyRegistration, WebAuthnError } from "./webauthn.js";
 export { MemorySessionStore } from "./session-store.js";
-export { csvCell, csvLine, DownloadStore, ExportAction, ExportBulkAction, ExportColumn, Exporter, ImportAction, ImportColumn, Importer, parseCsv } from "./import-export.js";
+export { csvCell, csvLine, DownloadStore, ExportAction, ExportBulkAction, ExportColumn, Exporter, ImportAction, ImportColumn, Importer, importExportSchema, knexImportExportHistory, parseCsv, readSpreadsheet, runInBackground, useBackgroundRunner } from "./import-export.js";
+export { buildXlsx, readXlsx } from "./xlsx.js";
 import { DownloadStore } from "./import-export.js";
 import { MemorySessionStore } from "./session-store.js";
 import { addDays, addMonths, CALENDAR_LABELS, CALENDAR_VIEWS, isDate, renderCalendar, visibleRange } from "./calendar.js";
@@ -31,8 +39,9 @@ export { addDays, addMonths, CALENDAR_LABELS, dayOf, daysBetween, eventsOn, rend
 import { DatabaseNotifications, GlobalSearch, keyBindingSuffix } from "./topbar.js";
 export { DatabaseNotifications, GlobalSearch, knexNotificationStore, timeAgo } from "./topbar.js";
 import { Attributes, ColorManager, HtmlString, RenderHookRegistry, cls, convertToRgb, e, icon, js, loadingIndicator, renderHook, runWithRenderHooks, views } from '@navette-js/support';
-import { t, tc } from '@navette-js/support/i18n';
-import { emptyState } from '@navette-js/support/ui';
+import { getLocale, t, tc } from '@navette-js/support/i18n';
+import { ERROR_PAGE_CSS, errorIllustration, errorPageScene } from "./error-pages.js";
+import { badge as uiBadge, button as uiButton, emptyState, useColorManager as useUiColorManager } from '@navette-js/support/ui';
 import { REORDER_LIMIT, Table, TrashedFilter, filterSelectableKeys, getTableRecords, initializeTableGrouping, isTableFilterRemovable, updateTableColumnState as updateEditableColumnState, getTableQuery, renderTable, sanitizeColumnState, sortTable, useColorManager as useTableColorManager } from '@navette-js/tables';
 import { Component } from '@navette-js/wire';
 import { csrfToken, verifyCsrf, wireRouter, wireScripts, wireStyles } from '@navette-js/wire/express';
@@ -63,8 +72,14 @@ export class NavigationItem {
     _isActive = null;
     _badge = null;
     _badgeColor = 'primary';
+    _parentItem = null;
+    _childItems = [];
     constructor(label) { this.label = label; }
     static make(label) { return new NavigationItem(label); }
+    /** Shows the item below another item of its group, by that item's label. */
+    parentItem(label) { this._parentItem = label; return this; }
+    /** Items shown below this one, when it (or one of them) is active, or when it has no URL. */
+    childItems(items) { this._childItems = items; return this; }
     url(url) { this._url = url; return this; }
     icon(icon) { this._icon = icon; return this; }
     group(group) { this._group = group; return this; }
@@ -97,6 +112,10 @@ export class Panel {
     _downloads = null;
     /** Where files offered for download (exports, failed import rows) are kept: in memory by default. */
     downloads(store) { this._downloads = store; return this; }
+    _importExportHistory = null;
+    /** Records each import and export run (`knexImportExportHistory(db)`): who, which file, how many rows, failed import rows. */
+    importExportHistory(store) { this._importExportHistory = store; return this; }
+    getImportExportHistory() { return this._importExportHistory; }
     getDownloads() { return (this._downloads ??= new DownloadStore()); }
     getDownloadUrl(token) { return this.getBaseUrl(`downloads/${encodeURIComponent(token)}`); }
     _pages = [];
@@ -190,16 +209,53 @@ export class Panel {
     }
     /** Name of the session cookie: per guard (shared), or per panel. */
     getSessionCookieName() { return this._authGuard !== null ? `navette_${this._authGuard}_session` : `navette_${this._id}_session`; }
-    pages(pages) { this._pages.push(...pages); return this; }
+    pages(pages) {
+        for (const page of pages) {
+            this.registerCluster(page);
+            this._pages.push(page);
+        }
+        return this;
+    }
     /** Registers resources: their pages and navigation items. */
     resources(resources) {
         for (const resource of resources) {
             resource.panel = this;
+            this.registerCluster(resource);
             this._resources.push(resource);
             this._pages.push(...Object.values(resource.getPages()));
         }
         return this;
     }
+    /** A page or resource in a cluster is served under the cluster's slug; the cluster page is registered with it. */
+    registerCluster(component) {
+        const cluster = component.cluster;
+        if (!cluster)
+            return;
+        if (!(cluster.prototype instanceof Cluster))
+            throw new Error(`${component.name}.cluster must be a Cluster subclass.`);
+        cluster.slug = cluster.getSlug();
+        if (!component.slug.startsWith(`${cluster.slug}/`))
+            component.slug = `${cluster.slug}/${component.slug}`;
+        if (!this._pages.includes(cluster))
+            this._pages.push(cluster);
+    }
+    /** Pages (resource list pages included) shown in a cluster's sub-navigation. */
+    getClusteredComponents(cluster) {
+        return this._pages.filter((page) => page !== cluster && page.shouldRegisterNavigation && clusterOf(page) === cluster);
+    }
+    /** Sub-navigation of a cluster, for one of its pages: the components the user can open, sorted, with their groups. */
+    async getClusterSubNavigation(cluster, current, user) {
+        const components = [];
+        for (const component of this.getClusteredComponents(cluster))
+            if (await this.canAccessPage(component, user))
+                components.push(component);
+        const items = [];
+        for (const component of components.sort((a, b) => a.navigationSort - b.navigationSort)) {
+            const badge = typeof component.getNavigationBadge === 'function' ? await component.getNavigationBadge() : component.navigationBadge;
+            items.push({ label: component.getNavigationLabel(), icon: component.navigationIcon, url: this.getUrl(component.slug), active: current instanceof component, group: component.navigationGroup, badge: badge ?? null, badgeColor: component.navigationBadgeColor, sort: component.navigationSort });
+        }
+        return items.map(({ sort: _sort, ...item }) => item);
+    }
     navigationItems(items) { this._navigationItems.push(...items); return this; }
     /** Order of navigation groups. */
     /** Order of the navigation groups: labels, or `NavigationGroup.make('Shop').icon('o-shopping-cart').collapsible(false)`. */
@@ -241,20 +297,38 @@ export class Panel {
     _authorizer = null;
     /** Plugs in your own permission system: consulted before any policy, for every ability, page and widget. */
     authorizeUsing(authorizer) { this._authorizer = authorizer; return this; }
-    /** Authorization decision: the panel hook first, then the given rule. Always `false` without a user. */
+    _guestAccess = false;
+    /**
+     * Lets visitors who are not signed in use the panel's pages. Policies, `canAccess()` and the authorization hook then receive
+     * a `null` user: return `true` there for what guests may see. Not available with tenancy.
+     */
+    guestAccess(condition = true) { this._guestAccess = condition; return this; }
+    allowsGuests() { return this._guestAccess; }
+    /** Authorization decision: the panel hook first, then the given rule. Without a user: `false`, unless the panel allows guests. */
     async authorize(user, ability, subject = {}) {
-        if (!user)
+        if (!user && !this._guestAccess)
             return false;
-        const decided = await this._authorizer?.({ user, ability, resource: subject.resource ?? null, record: subject.record ?? null, page: subject.page ?? null, widget: subject.widget ?? null });
+        const decided = await this._authorizer?.({ user: user, ability, resource: subject.resource ?? null, record: subject.record ?? null, page: subject.page ?? null, widget: subject.widget ?? null });
         if (typeof decided === 'boolean')
             return decided;
+        if (!subject.rule && subject.resource && !subject.page && !subject.widget && this._strictAuthorization) {
+            throw new Error(`Strict authorization mode is enabled, but ${subject.resource.name ?? 'the resource'} has no "${ability}" rule in its policy.`);
+        }
         return subject.rule ? Boolean(await subject.rule()) : true;
     }
     /** Whether the user can open a page. List: `viewAny`; create: `create`; edit: checked against the record; custom page: `canAccess`. */
     async canAccessPage(PageClass, user) {
+        if (PageClass.prototype instanceof Cluster) {
+            if (!(await this.authorize(user, 'access', { page: PageClass, rule: () => PageClass.canAccess(user) })))
+                return false;
+            for (const component of this.getClusteredComponents(PageClass))
+                if (await this.canAccessPage(component, user))
+                    return true;
+            return false;
+        }
         const resource = PageClass.resource;
         if (resource && PageClass.prototype instanceof EditRecord)
-            return user !== null;
+            return user !== null || this._guestAccess;
         if (resource && PageClass.prototype instanceof CreateRecord)
             return resource.can('create', user);
         if (resource)
@@ -376,11 +450,47 @@ export class Panel {
     profile(page = EditProfile, isSimple = true) { this._profile = { page, isSimple }; return this; }
     hasProfile() { return this._profile !== null; }
     getProfile() { return this._profile; }
+    /** Whether the profile page uses the simple layout (`profile(page, false)`: the full layout, with the navigation). */
+    isProfileSimple() { return this._profile?.isSimple !== false; }
+    _multiFactor = null;
+    /**
+     * Multi-factor authentication: after the password, users with a provider set up must pass its challenge. They set providers
+     * up on their profile page (`profile()`). `isRequired`: users without any provider are sent to a setup page first.
+     */
+    multiFactorAuthentication(providers, options = {}) {
+        const ids = providers.map((provider) => provider.getId());
+        for (const id of ids)
+            if (!/^[A-Za-z][A-Za-z0-9_-]{0,40}$/.test(id))
+                throw new Error(`Invalid multi-factor provider id: ${id}`);
+        if (new Set(ids).size !== ids.length)
+            throw new Error('Two multi-factor providers share the same id: give one another id with id().');
+        this._multiFactor = providers.length ? { providers, isRequired: options.isRequired === true, setUpPage: options.setUpPage ?? SetUpRequiredMultiFactorAuthentication } : null;
+        return this;
+    }
+    hasMultiFactorAuthentication() { return this._multiFactor !== null; }
+    getMultiFactorAuthenticationProviders() { return this._multiFactor?.providers ?? []; }
+    isMultiFactorAuthenticationRequired() { return this._multiFactor?.isRequired === true; }
+    getSetUpRequiredMultiFactorAuthenticationPage() { return this._multiFactor?.isRequired ? this._multiFactor.setUpPage : null; }
+    getSetUpRequiredMultiFactorAuthenticationUrl() { return this.getBaseUrl(this.getAuthPaths().setUpRequiredMultiFactor); }
+    /** The login challenge of this panel (enabled providers, rate limiting). */
+    getMultiFactorChallenge() { return MultiFactorChallenge.make(this); }
+    /** Whether the user must set up multi-factor authentication before using the panel. */
+    async mustSetUpMultiFactorAuthentication(user) {
+        if (!user || !this.isMultiFactorAuthenticationRequired())
+            return false;
+        return !(await this.getMultiFactorChallenge().hasEnabledProviders(user));
+    }
+    usesSecurityKeys() { return this.getMultiFactorAuthenticationProviders().some((provider) => provider instanceof SecurityKeyAuthentication); }
     /** Mailer for password reset and verification emails. Defaults to the console. */
     mailer(mailer) { this._mailer = mailer; return this; }
     async sendMail(message) { await this._mailer.send(message); }
     getAuthKey() { return this._key; }
-    _authSlugs = { login: 'login', registration: 'register', passwordResetPrefix: 'password-reset', passwordResetRequest: 'request', passwordReset: 'reset' };
+    _authSlugs = {
+        login: 'login', registration: 'register', passwordResetPrefix: 'password-reset', passwordResetRequest: 'request', passwordReset: 'reset', logout: 'logout',
+        emailVerificationPrefix: 'email-verification', emailVerificationPrompt: 'prompt', emailVerification: 'verify',
+        emailChangeVerificationPrefix: 'email-change-verification', emailChangeVerification: 'verify',
+        multiFactorPrefix: 'multi-factor-authentication', setUpRequiredMultiFactor: 'set-up',
+    };
     authSlug(slug) { if (!/^[a-z0-9][a-z0-9-]{0,60}$/.test(slug))
         throw new Error(`Invalid route slug: ${slug}`); return slug; }
     /** URL segment of the login page (`login` by default). */
@@ -392,12 +502,29 @@ export class Panel {
     passwordResetRequestRouteSlug(slug) { this._authSlugs.passwordResetRequest = this.authSlug(slug); return this; }
     passwordResetRouteSlug(slug) { this._authSlugs.passwordReset = this.authSlug(slug); return this; }
     /** Paths of the authentication pages, relative to the panel. */
+    /** URL segment of the logout route (`logout` by default). */
+    logoutRouteSlug(slug) { this._authSlugs.logout = this.authSlug(slug); return this; }
+    /** URL segments of email verification: `<prefix>/<prompt>` and `<prefix>/<verify>/…` (`email-verification/prompt`, `email-verification/verify`). */
+    emailVerificationRoutePrefix(prefix) { this._authSlugs.emailVerificationPrefix = this.authSlug(prefix); return this; }
+    emailVerificationPromptRouteSlug(slug) { this._authSlugs.emailVerificationPrompt = this.authSlug(slug); return this; }
+    emailVerificationRouteSlug(slug) { this._authSlugs.emailVerification = this.authSlug(slug); return this; }
+    /** URL segments of the email change links: `<prefix>/<verify>` and `<prefix>/block` (`email-change-verification/verify`). */
+    emailChangeVerificationRoutePrefix(prefix) { this._authSlugs.emailChangeVerificationPrefix = this.authSlug(prefix); return this; }
+    emailChangeVerificationRouteSlug(slug) { this._authSlugs.emailChangeVerification = this.authSlug(slug); return this; }
+    /** URL segments of the required multi-factor setup page (`multi-factor-authentication/set-up`). */
+    multiFactorAuthenticationRoutePrefix(prefix) { this._authSlugs.multiFactorPrefix = this.authSlug(prefix); return this; }
+    setUpRequiredMultiFactorAuthenticationRouteSlug(slug) { this._authSlugs.setUpRequiredMultiFactor = this.authSlug(slug); return this; }
     getAuthPaths() {
         const slugs = this._authSlugs;
-        return { login: slugs.login, registration: slugs.registration, passwordResetRequest: `${slugs.passwordResetPrefix}/${slugs.passwordResetRequest}`, passwordReset: `${slugs.passwordResetPrefix}/${slugs.passwordReset}` };
+        return {
+            login: slugs.login, registration: slugs.registration, passwordResetRequest: `${slugs.passwordResetPrefix}/${slugs.passwordResetRequest}`, passwordReset: `${slugs.passwordResetPrefix}/${slugs.passwordReset}`, logout: slugs.logout,
+            emailVerificationPrompt: `${slugs.emailVerificationPrefix}/${slugs.emailVerificationPrompt}`, emailVerification: `${slugs.emailVerificationPrefix}/${slugs.emailVerification}`,
+            emailChangeVerification: `${slugs.emailChangeVerificationPrefix}/${slugs.emailChangeVerification}`, blockEmailChange: `${slugs.emailChangeVerificationPrefix}/block`,
+            setUpRequiredMultiFactor: `${slugs.multiFactorPrefix}/${slugs.setUpRequiredMultiFactor}`,
+        };
     }
     /** First URL segments used by the panel itself (never page slugs or tenant keys). */
-    getReservedSegments() { return new Set([...RESERVED_SEGMENTS, this._authSlugs.login, this._authSlugs.registration, this._authSlugs.passwordResetPrefix]); }
+    getReservedSegments() { const slugs = this._authSlugs; return new Set([...RESERVED_SEGMENTS, slugs.login, slugs.registration, slugs.passwordResetPrefix, slugs.logout, slugs.emailVerificationPrefix, slugs.emailChangeVerificationPrefix, slugs.multiFactorPrefix]); }
     getRegistrationUrl() { return this.getBaseUrl(this.getAuthPaths().registration); }
     getRequestPasswordResetUrl() { return this.getBaseUrl(this.getAuthPaths().passwordResetRequest); }
     getResetPasswordUrl(user, fingerprint) {
@@ -409,10 +536,28 @@ export class Panel {
     getVerifyEmailUrl(user) {
         const expires = Math.floor(Date.now() / 1000) + 60 * 60;
         const { hash, signature } = signVerificationUrl(`${this._key}.${this._id}`, user.id, user.email, expires);
-        return `${this.getBaseUrl(`email-verification/verify/${encodeURIComponent(String(user.id))}/${hash}`)}?expires=${expires}&signature=${encodeURIComponent(signature)}`;
+        return `${this.getBaseUrl(`${this.getAuthPaths().emailVerification}/${encodeURIComponent(String(user.id))}/${hash}`)}?expires=${expires}&signature=${encodeURIComponent(signature)}`;
     }
     checkVerifyEmailUrl(id, hash, expires, signature) { return checkVerificationUrl(`${this._key}.${this._id}`, id, hash, expires, signature); }
-    getEmailVerificationPromptUrl() { return this.getBaseUrl('email-verification/prompt'); }
+    getEmailVerificationPromptUrl() { return this.getBaseUrl(this.getAuthPaths().emailVerificationPrompt); }
+    _emailChangeVerification = false;
+    /**
+     * A new email address set on the profile page is only saved once confirmed: a link is sent to the new address, and a link
+     * to block the change to the old one. Both are valid for 60 minutes.
+     */
+    emailChangeVerification(condition = true) { this._emailChangeVerification = condition; return this; }
+    hasEmailChangeVerification() { return this._emailChangeVerification; }
+    /** Links of an email change request: to confirm the new address, and to block the change. */
+    getEmailChangeUrls(user, newEmail) {
+        const nonce = randomBytes(12).toString('base64url');
+        const verify = signToken(this._key, `${this._id}.email-change`, { uid: user.id, email: newEmail, from: fingerprint(user.email), nonce }, 60 * 60);
+        const block = signToken(this._key, `${this._id}.email-change-block`, { uid: user.id, email: newEmail, nonce }, 60 * 60);
+        return { verify: `${this.getBaseUrl(this.getAuthPaths().emailChangeVerification)}?token=${encodeURIComponent(verify)}`, block: `${this.getBaseUrl(this.getAuthPaths().blockEmailChange)}?token=${encodeURIComponent(block)}` };
+    }
+    readEmailChangeToken(kind, token) {
+        const payload = readToken(this._key, `${this._id}.${kind === 'verify' ? 'email-change' : 'email-change-block'}`, token);
+        return payload && typeof payload.email === 'string' && typeof payload.nonce === 'string' ? payload : null;
+    }
     getProfileUrl() { return this._profile ? this.getBaseUrl('profile') : null; }
     /** Whether the user must still verify their email before using the panel. */
     async mustVerifyEmail(user) {
@@ -446,6 +591,84 @@ export class Panel {
     getTenantProfilePage() { return this._tenantProfile; }
     tenantMenu(condition = true) { this._tenantMenu = condition; return this; }
     hasTenantMenu() { return this._tenantMenu; }
+    _searchableTenantMenu = null;
+    /** A search field above the tenants of the menu. By default (`null`), it is shown from ten tenants to switch to. */
+    searchableTenantMenu(condition = true) { this._searchableTenantMenu = condition; return this; }
+    isTenantMenuSearchable() { return this._searchableTenantMenu; }
+    _tenantRoutePrefix = null;
+    /** A segment before the tenant key in URLs: `tenantRoutePrefix('team')` serves `/app/team/1/projects`. */
+    tenantRoutePrefix(prefix) {
+        if (prefix !== null && !/^[a-z0-9][a-z0-9-]*$/.test(prefix))
+            throw new Error(`Invalid tenant route prefix: ${prefix}`);
+        this._tenantRoutePrefix = prefix;
+        return this;
+    }
+    getTenantRoutePrefix() { return this._tenantRoutePrefix; }
+    _tenantDomain = null;
+    /**
+     * Identifies the tenant by the host instead of the path: `tenantDomain('{tenant}.example.com')` serves the tenant `acme` at
+     * `acme.example.com/app/projects`. A port may follow (`{tenant}.localhost:3000`).
+     */
+    tenantDomain(pattern) {
+        if (pattern !== null && !pattern.includes('{tenant}'))
+            throw new Error('tenantDomain(): the pattern must contain {tenant}.');
+        this._tenantDomain = pattern;
+        return this;
+    }
+    getTenantDomain() { return this._tenantDomain; }
+    /** Domain of a tenant, with its port if the pattern has one. */
+    getTenantDomainFor(tenant) { return this._tenantDomain.replace('{tenant}', encodeURIComponent(this.getTenantUrlKey(tenant)).toLowerCase()); }
+    /** Key of the tenant designated by a request (its path, or its host with `tenantDomain()`), unchecked; `null` if none. */
+    getTenantKeyFromRequest(path, hostname) {
+        if (this._tenantDomain) {
+            const host = this._tenantDomain.replace(/:\d+$/, '').toLowerCase();
+            const [before, after] = host.split('{tenant}').map((part) => part.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+            const match = new RegExp(`^${before}([^.]+)${after}$`).exec(hostname.toLowerCase());
+            if (!match)
+                return null;
+            try {
+                return decodeURIComponent(match[1]);
+            }
+            catch {
+                return null;
+            }
+        }
+        const base = this.getBaseUrl();
+        const prefix = base === '/' ? '/' : `${base}/`;
+        if (!path.startsWith(prefix))
+            return null;
+        const segments = path.slice(prefix.length).split('/');
+        if (this._tenantRoutePrefix !== null && segments.shift() !== this._tenantRoutePrefix)
+            return null;
+        let key;
+        try {
+            key = decodeURIComponent(segments[0] ?? '');
+        }
+        catch {
+            return null;
+        }
+        if (!key || key.length > 200)
+            return null;
+        if (this._tenantRoutePrefix === null && (this.getReservedSegments().has(key) || key === this._tenantRegistration?.slug))
+            return null;
+        return key;
+    }
+    _tenantBilling = null;
+    _tenantBillingRouteSlug = 'billing';
+    _requiresTenantSubscription = false;
+    /** Adds a "Manage subscription" link to the tenant menu, served by the provider at `/<tenant>/billing`. */
+    tenantBillingProvider(provider) { this._tenantBilling = provider; return this; }
+    getTenantBillingProvider() { return this._tenantBilling; }
+    hasTenantBilling() { return this._tenantBilling !== null; }
+    tenantBillingRouteSlug(slug) { this._tenantBillingRouteSlug = slug.replace(/^\/|\/$/g, ''); return this; }
+    getTenantBillingRouteSlug() { return this._tenantBillingRouteSlug; }
+    getTenantBillingUrl(tenant = this.getTenant()) { return this._tenantBilling && tenant ? this.getUrl(this._tenantBillingRouteSlug, tenant) : null; }
+    /** The pages of a tenant without an active subscription (`isSubscribed()`) redirect to its billing page. */
+    requiresTenantSubscription(condition = true) { this._requiresTenantSubscription = condition; return this; }
+    isTenantSubscriptionRequired() { return this._requiresTenantSubscription && this._tenantBilling !== null; }
+    _sessionCookieDomain = null;
+    /** Domain of the session cookie (`.example.com`): with `tenantDomain()`, a sign-in then holds on every tenant's host. */
+    sessionCookieDomain(domain) { this._sessionCookieDomain = domain; return this; }
     tenantMenuItems(items) {
         for (const [key, item] of Array.isArray(items) ? items.map((item) => [item.getName(), item]) : Object.entries(items))
             this._tenantMenuItems[key] = item;
@@ -468,14 +691,20 @@ export class Panel {
     getMaxContentWidth() { return this._maxContentWidth; }
     /** URL inside the panel; in a multi-tenant panel, prefixed with the current (or given) tenant. */
     getUrl(sub = '', tenant = this.getTenant()) {
+        if (this._tenant && tenant && this._tenantDomain) {
+            // On the tenant's own host, a path; another tenant's pages are on its host.
+            const current = this.getTenant();
+            const path = this.getBaseUrl(sub);
+            return current && this.getTenantUrlKey(current) === this.getTenantUrlKey(tenant) ? path : `//${this.getTenantDomainFor(tenant)}${path}`;
+        }
         if (this._tenant && tenant)
-            return '/' + [this._path, encodeURIComponent(this.getTenantUrlKey(tenant)), sub.replace(/^\/|\/$/g, '')].filter(Boolean).join('/');
+            return '/' + [this._path, this._tenantRoutePrefix, encodeURIComponent(this.getTenantUrlKey(tenant)), sub.replace(/^\/|\/$/g, '')].filter(Boolean).join('/');
         return this.getBaseUrl(sub);
     }
     /** URL outside any tenant (login, registration, profile, tenant registration). */
     getBaseUrl(sub = '') { return '/' + [this._path, sub.replace(/^\/|\/$/g, '')].filter(Boolean).join('/'); }
     getLoginUrl() { return this.getBaseUrl(this.getAuthPaths().login); }
-    getLogoutUrl() { return this.getBaseUrl('logout'); }
+    getLogoutUrl() { return this.getBaseUrl(this.getAuthPaths().logout); }
     /** Prefix of this panel's Livewire endpoint (`/livewire` or `/<path>/livewire`): each panel has its own. */
     getLivewirePrefix() { return this._path ? `/${this._path}/livewire` : '/livewire'; }
     assetUrl(file) { return `/${file}?v=${ASSET_VERSION}`; }
@@ -486,9 +715,40 @@ export class Panel {
     /** Tenant avatar: from the tenant provider (`getAvatarUrl`), otherwise its initials. */
     getTenantAvatarUrl(tenant) { return this.getTenantProvider().getAvatarUrl?.(tenant) ?? this.getAvatarUrlFor(this.getTenantProvider().getName(tenant)); }
     _spa = false;
-    /** SPA mode: navigate between panel pages without full reloads (`wire:navigate`). */
-    spa(condition = true) { this._spa = condition; return this; }
+    _spaPrefetching = false;
+    /**
+     * SPA mode: navigate between panel pages without full reloads (`wire:navigate`). `{ prefetch: true }` loads a page as soon
+     * as its link is hovered (`wire:navigate.hover`).
+     */
+    spa(condition = true, options = {}) { this._spa = condition; this._spaPrefetching = options.prefetch === true; return this; }
     hasSpaMode() { return this._spa; }
+    hasSpaPrefetching() { return this._spa && this._spaPrefetching; }
+    _domains = [];
+    /** Serves the panel on this domain only (`admin.example.com`): requests for other hosts go to the next routes. */
+    domain(host) { this._domains = host ? [host] : []; return this; }
+    /** Serves the panel on these domains only. */
+    domains(hosts) { this._domains = [...hosts]; return this; }
+    getDomains() { return this._domains; }
+    _unsavedChangesAlerts = false;
+    /** Warns the user before leaving a create or edit page whose form has unsaved changes. */
+    unsavedChangesAlerts(condition = true) { this._unsavedChangesAlerts = condition; return this; }
+    hasUnsavedChangesAlerts() { return this._unsavedChangesAlerts; }
+    _databaseTransactions = false;
+    /**
+     * Wraps the creation and the saving of records (from `beforeCreate()` / `beforeSave()` to `afterCreate()` / `afterSave()`)
+     * in a database transaction, rolled back when anything throws. Pages can opt in or out with `static hasDatabaseTransactions`.
+     */
+    databaseTransactions(condition = true) { this._databaseTransactions = condition; return this; }
+    hasDatabaseTransactions() { return this._databaseTransactions; }
+    _strictAuthorization = false;
+    /** Throws when a resource is checked for an ability its policy does not define, instead of allowing it. */
+    strictAuthorization(condition = true) { this._strictAuthorization = condition; return this; }
+    isAuthorizationStrict() { return this._strictAuthorization; }
+    _bootCallbacks = [];
+    /** Runs on every request handled by the panel (its pages and their updates), before them. */
+    bootUsing(callback) { this._bootCallbacks.push(callback); return this; }
+    async boot(req) { for (const callback of this._bootCallbacks)
+        await callback(this, req); }
     getAvatarUrlFor(name) {
         const initials = name.trim().split(' ').map((s) => s.replace(/^[^\p{L}\p{N}]+/u, '').slice(0, 1)).join(' ');
         const background = '#' + convertToRgb(this.colors.getColor('gray')[950]).map((n) => n.toString(16).padStart(2, '0')).join('');
@@ -513,27 +773,35 @@ export class Panel {
     }
     getNavigation(path, badges = new Map(), hidden = new Set()) {
         const items = [
-            ...this._pages.filter((p) => p.shouldRegisterNavigation && !hidden.has(p.slug)).map((p) => {
-                const item = NavigationItem.make(p.getNavigationLabel()).url(this.getUrl(p.slug)).icon(p.navigationIcon).group(p.navigationGroup).sort(p.navigationSort).badge(badges.has(p.slug) ? badges.get(p.slug) : p.navigationBadge, p.navigationBadgeColor);
+            // The pages of a cluster are in its sub-navigation: the menu only shows the cluster.
+            ...this._pages.filter((p) => p.shouldRegisterNavigation && !hidden.has(p.slug) && clusterOf(p) === null).map((p) => {
+                const item = NavigationItem.make(p.getNavigationLabel()).url(this.getUrl(p.slug)).icon(p.navigationIcon).group(p.navigationGroup).sort(p.navigationSort).badge(badges.has(p.slug) ? badges.get(p.slug) : p.navigationBadge, p.navigationBadgeColor).parentItem(p.navigationParentItem);
                 const base = this.getUrl(p.slug);
-                return p.resource ? item.isActiveWhen((current) => current === base || current.startsWith(base + '/')) : item;
+                return p.resource || p.prototype instanceof Cluster ? item.isActiveWhen((current) => current === base || current.startsWith(base + '/')) : item;
             }),
             ...this._navigationItems,
         ].sort((a, b) => a._sort - b._sort);
+        const view = (item, children) => {
+            const childItems = children.map((child) => view(child, child._childItems));
+            const activeChildItems = childItems.some((child) => child.isActive || child.activeChildItems);
+            return { label: item.label, url: item._url, icon: item._icon, isActive: !activeChildItems && item.isActive(path), badge: item._badge, badgeColorClasses: this.colors.getComponentClasses('badge', item._badgeColor), childItems, activeChildItems };
+        };
         const order = [null, ...this._navigationGroups, ...items.map((i) => i._group).filter((g) => g !== null && !this._navigationGroups.includes(g))];
         return [...new Set(order)].map((label) => {
-            const own = items.filter((i) => i._group === label).map((i) => ({ label: i.label, url: i._url, icon: i._icon, isActive: i.isActive(path), badge: i._badge, badgeColorClasses: this.colors.getComponentClasses('badge', i._badgeColor) }));
+            const inGroup = items.filter((i) => i._group === label);
+            // An item with a parent item is shown below it (an unknown parent hides it, as in Filament).
+            const own = inGroup.filter((i) => i._parentItem === null).map((i) => view(i, [...i._childItems, ...inGroup.filter((child) => child._parentItem === i.label)]));
             const options = label ? this._navigationGroupOptions.get(label) : undefined;
-            return { label, itemsId: label ? `fi-sidebar-group-items-${slug(label)}-${createHash('md5').update(label).digest('hex').slice(0, 8)}` : '', isActive: own.some((i) => i.isActive), items: options?.icon ? own.map((i) => ({ ...i, icon: null })) : own, icon: options?.icon ?? null, collapsible: options?.collapsible ?? true };
+            return { label, itemsId: label ? `fi-sidebar-group-items-${slug(label)}-${createHash('md5').update(label).digest('hex').slice(0, 8)}` : '', isActive: own.some((i) => i.isActive || i.activeChildItems), items: options?.icon ? own.map((i) => ({ ...i, icon: null })) : own, icon: options?.icon ?? null, collapsible: options?.collapsible ?? true };
         }).filter((g) => g.items.length);
     }
     // --- session: an HMAC-signed cookie holding the user id
     sign(value) { return createHmac('sha256', this._key).update(value).digest('base64url'); }
     logIn(res, user, remember) {
         const value = Buffer.from(JSON.stringify({ uid: user.id })).toString('base64url');
-        res.cookie(this.getSessionCookieName(), `${value}.${this.sign(value)}`, { httpOnly: true, sameSite: 'lax', secure: res.req?.secure === true, ...(remember ? { maxAge: 1000 * 60 * 60 * 24 * 30 } : {}) });
+        res.cookie(this.getSessionCookieName(), `${value}.${this.sign(value)}`, { httpOnly: true, sameSite: 'lax', secure: res.req?.secure === true, ...(this._sessionCookieDomain ? { domain: this._sessionCookieDomain } : {}), ...(remember ? { maxAge: 1000 * 60 * 60 * 24 * 30 } : {}) });
     }
-    logOut(res) { res.clearCookie(this.getSessionCookieName()); }
+    logOut(res) { res.clearCookie(this.getSessionCookieName(), this._sessionCookieDomain ? { domain: this._sessionCookieDomain } : {}); }
     async user(req) {
         const raw = (req.headers.cookie ?? '').split(';').map((c) => c.trim()).find((c) => c.startsWith(`${this.getSessionCookieName()}=`))?.split('=')[1];
         if (!raw)
@@ -668,99 +936,61 @@ class BasePage extends Component {
         const resource = this.constructor.resource;
         return resource ? [this.constructor, resource] : [this.constructor];
     }
-}
-/** A panel page, in the full layout (sidebar, header). */
-export class Page extends BasePage {
-    /** Methods the browser may call. A subclass adds its own: `static callable = ['approve']`. */
-    static callable = ['mountAction', 'unmountAction', 'callMountedAction', 'callSchemaComponentMethod'];
-    static slug = '';
-    static title = null;
-    static navigationLabel = null;
-    static navigationIcon = null;
-    static navigationGroup = null;
-    static navigationSort = 0;
-    static navigationBadge = null;
-    static navigationBadgeColor = 'primary';
-    static shouldRegisterNavigation = true;
-    /** Restricts the page to some users: returning `false` hides it from the menu and denies it (403). */
-    static canAccess(_user) { return true; }
-    static getTitle() { return this.title ?? this.name.replace(/([a-z])([A-Z])/g, '$1 $2'); }
-    static getNavigationLabel() { return this.navigationLabel ?? this.getTitle(); }
-    /** Every request, including browser updates, requires an authenticated user: a snapshot kept after logout is not enough. */
-    async boot() {
-        const ctx = this._ctx;
-        if (!ctx?.user)
-            throw new WireError(401, 'Unauthenticated.');
-        // In a multi-tenant panel, every page belongs to a tenant the user is a member of (checked by the router).
-        if (ctx.panel.hasTenancy() && !ctx.tenant)
-            throw new WireError(404, 'Tenant not found.');
-        if (await ctx.panel.mustVerifyEmail(ctx.user))
-            throw new WireError(403, 'Email address not verified.');
-        // Checked on every request, not only on display: a forged request to a forbidden page is denied.
-        if (!(await this.isAccessAuthorized(ctx)))
-            throw new WireError(403, 'Forbidden.');
-    }
-    isAccessAuthorized(ctx) { return ctx.panel.canAccessPage(this.constructor, ctx.user); }
-    getTitle() { return this.constructor.getTitle(); }
-    getHeading() { return this.getTitle(); }
-    getBreadcrumbs() { return []; }
+    /** Actions of the page header (full layout). */
     getHeaderActions() { return []; }
-    getPageClasses() { return []; }
-    /** Page sub-navigation; empty by default. */
-    getSubNavigation() { return []; }
-    /** Sub-navigation position: `start` (column before the content), `end` (after) or `top` (tabs). Defaults to the resource's, then the panel's. */
-    static subNavigationPosition = null;
-    getSubNavigationPosition() {
-        const own = this.constructor.subNavigationPosition;
-        const resource = this.constructor.resource ?? this.constructor.parentResource;
-        return own ?? resource?.subNavigationPosition ?? this.panel.getSubNavigationPosition();
-    }
-    /** Widgets shown below the page content. */
-    getFooterWidgets() { return []; }
-    getFooterWidgetsColumns() { return 2; }
-    /** Footer widget grid, in the page's `footerWidgets` schema. */
-    async renderFooterWidgets() {
-        const widgets = await this.filterVisibleWidgets(this.getFooterWidgets());
-        if (!widgets.length)
-            return '';
-        const liberate = (hook) => `<div class="fi-sc-liberated" wire:key="" ${ANONYMOUS_SCHEMA_COMPONENT}>${renderHook(hook, this.getRenderHookScopes())}</div>`;
-        return `<div x-data="filamentSchema({ livewireId: ${e(js(this.id))}, schemaKey: 'footerWidgets' })" x-on:form-validation-error.window="handleFormValidationError" x-on:reset-schema-component-state.window="handleClientSideStateReset" class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));">${liberate(PanelsRenderHook.PAGE_FOOTER_WIDGETS_START)}${await this.renderWidgetsGrid(widgets, this.getFooterWidgetsColumns(), 'footerWidgets')}${liberate(PanelsRenderHook.PAGE_FOOTER_WIDGETS_END)}</div>`;
-    }
-    /** Widgets shown above the page content, with the data passed to each (widget properties). */
-    getHeaderWidgets() { return []; }
-    getHeaderWidgetsColumns() { return 2; }
-    getWidgetData() { return {}; }
-    /** Header widget grid, in the page's `headerWidgets` schema. */
-    async renderHeaderWidgets() {
-        const widgets = await this.filterVisibleWidgets(this.getHeaderWidgets());
-        if (!widgets.length)
-            return '';
-        const liberate = (hook) => `<div class="fi-sc-liberated" wire:key="" ${ANONYMOUS_SCHEMA_COMPONENT}>${renderHook(hook, this.getRenderHookScopes())}</div>`;
-        return `<div x-data="filamentSchema({ livewireId: ${e(js(this.id))}, schemaKey: 'headerWidgets' })" x-on:form-validation-error.window="handleFormValidationError" x-on:reset-schema-component-state.window="handleClientSideStateReset" class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));">${liberate(PanelsRenderHook.PAGE_HEADER_WIDGETS_START)}${await this.renderWidgetsGrid(widgets, this.getHeaderWidgetsColumns(), 'headerWidgets')}${liberate(PanelsRenderHook.PAGE_HEADER_WIDGETS_END)}</div>`;
-    }
-    /** Widgets the current user is allowed to see. */
-    async filterVisibleWidgets(candidates) {
-        const viewer = this._ctx.user;
-        const widgets = [];
-        for (const widget of candidates)
-            if (await this.panel.authorize(viewer, 'view', { widget, rule: () => widget.canView(viewer) }))
-                widgets.push(widget);
-        return widgets;
+    // --- lazy loaded schemas (`lazyLoaded()`): loaded when they enter the viewport, then kept loaded
+    static callable = ['loadDeferredSchema'];
+    loadedDeferredSchemas = {};
+    /** Whether a lazy schema is rendered: loaded already, or holding a field with a validation error (loaded so it shows). */
+    async isDeferredSchemaLoaded(schema) {
+        const key = schema.getLazyKey();
+        if (this.loadedDeferredSchemas[key])
+            return true;
+        const errorKeys = Object.keys(this._errors ?? {});
+        if (!errorKeys.length)
+            return false;
+        for (const component of schema.getFlatComponents()) {
+            const path = component.hasStatePath?.() ? component.getStatePath() : '';
+            if (path && errorKeys.some((error) => error === path || error.startsWith(`${path}.`))) {
+                this.loadedDeferredSchemas[key] = true;
+                return true;
+            }
+        }
+        return false;
     }
-    /** Widget grid of a schema: each widget is a child component, lazy-loaded by default. */
-    async renderWidgetsGrid(widgets, columns, schemaKey) {
-        const items = [];
-        for (const [index, widget] of widgets.entries()) {
-            const componentName = this._runtime.nameOf(widget);
-            const key = `${schemaKey}.${componentName}-${index}`;
-            const child = await this.mountChild(componentName, this.getWidgetData(), `${this.id}.${key}`, { lazy: widget.isLazy });
-            items.push(`<div class="fi-sc-liberated" wire:key="${e(`${this.id}.${key}`)}" x-data="filamentSchemaComponent(${e(js({ key, exposedMethods: [], path: '', containerPath: '' }))})">${child}</div>`);
+    /** Called by the loading indicator of a lazy schema: renders only that schema. */
+    async loadDeferredSchema(schemaKey) {
+        if (typeof schemaKey !== 'string' || schemaKey.length > 300 || this.loadedDeferredSchemas[schemaKey]) {
+            this.skipRender();
+            return;
         }
-        const grid = new Attributes().grid(typeof columns === 'number' ? { lg: columns } : columns).class(['fi-sc', 'fi-sc-has-gap']);
-        return `<div ${ANONYMOUS_SCHEMA_COMPONENT} class="fi-grid-col" style="--col-span-default: span 1 / span 1;"><div class="fi-sc-component"><div><div ${grid.toHtml()}>${items.join('')}</div></div></div></div>`;
+        const rootName = schemaKey.split('.')[0];
+        const mountedIndex = /^mountedActionSchema(\d+)$/.exec(rootName);
+        const root = mountedIndex ? await this.getMountedActionSchema(Number(mountedIndex[1])) : /^[A-Za-z]+$/.test(rootName) && typeof this[`${rootName}Schema`] === 'function' ? this.getSchema(rootName) : null;
+        // Only a lazy schema reachable through visible components can be loaded.
+        const find = async (schema) => {
+            if (schema.getLazyKey() === schemaKey && (await schema.isLazyLoaded()))
+                return schema;
+            for (const component of schema.getComponents()) {
+                if (!(await component.isVisible()))
+                    continue;
+                for (const child of (component.getChildSchemas?.() ?? [])) {
+                    const found = await find(child);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        const schema = root ? await find(root) : null;
+        if (!schema) {
+            this.skipRender();
+            return;
+        }
+        this.loadedDeferredSchemas[schemaKey] = true;
+        const html = await schema.toHtml();
+        this.renderPartial(`schema.${schemaKey}`, html || `<div wire:partial="${e(`schema.${schemaKey}`)}" hidden></div>`);
     }
-    /** Page content: its `content` schema by default. */
-    async renderContent() { return (await this.getSchema('content')).toHtml(); }
     // --- mounted actions: the stack lives in the component state, modals are rendered server-side
     mountedActions = [];
     /** Files uploaded by rich editors (`componentFileAttachments.<state path>.<id>`), stored by the editor when it asks for their URL. */
@@ -871,7 +1101,8 @@ export class Page extends BasePage {
             return;
         const index = Number(m[1]);
         const schema = await this.getMountedActionSchema(index);
-        const field = schema?.getFlatComponents().find((c) => c instanceof Field && c.getStatePath() === `mountedActions.${index}.data.${m[2]}`);
+        const path = `mountedActions.${index}.data.${m[2]}`;
+        const field = schema?.getFlatComponents().find((c) => c instanceof Field && (c.getStatePath() === path || path.startsWith(`${c.getStatePath()}.`)));
         if (!field?.hasAfterStateUpdated())
             return;
         const data = (this.mountedActions[index].data ??= {});
@@ -964,6 +1195,29 @@ export class Page extends BasePage {
         this.renderPartial('action-modals', await this.renderActionModals());
         this.syncActionModals();
     }
+    /**
+     * Replaces the action being run with another action of the same component, opened in its place (to show a result, as
+     * the new recovery codes). Call it from the running action; `name` must be mountable in the same context (it may be hidden).
+     */
+    async replaceMountedAction(name, args = {}) {
+        const index = this.mountedActions.length - 1;
+        if (index < 0)
+            return;
+        const context = this.mountedActions[index].context;
+        const action = await this.findMountableAction(name, context);
+        const mounted = { name, arguments: args, context };
+        this.mountedActions[index] = mounted;
+        this._errors = {};
+        const schema = await this.getMountedActionSchema(index);
+        if (schema) {
+            const data = {};
+            mounted.data = data;
+            fillSchema(schema, data);
+        }
+        await action.runMountUsing({ ...(await this.actionContext(mounted)), data: (mounted.data ??= {}), action });
+        this.renderPartial('action-modals', await this.renderActionModals());
+        this.syncActionModals();
+    }
     unmountAction(_shouldCancelParentActions = true) {
         this.cancelModalPartialRender();
         this._errors = {};
@@ -1003,6 +1257,9 @@ export class Page extends BasePage {
             }
             return;
         }
+        // The action replaced itself with another one (`replaceMountedAction()`): that one stays open.
+        if (this.mountedActions[this.mountedActions.length - 1] !== mounted)
+            return;
         // "… & create another": the modal stays open with a reset form (except the preserved fields).
         if (schema && _args && typeof _args === 'object' && _args.another === true) {
             const preserved = JSON.parse(JSON.stringify(action.getDataPreservedForAnother(callContext.data ?? {})));
@@ -1015,6 +1272,152 @@ export class Page extends BasePage {
         this.mountedActions.pop();
         this.syncActionModals();
     }
+}
+/** A navigation group for the topbar: in a dropdown, an item with children forms its own list with them. */
+function topNavigationGroup(group) {
+    const colored = (item) => ({ ...item, colorClasses: item.isActive ? sharedColors.getComponentClasses('dropdown-item', 'primary') : [] });
+    const lists = [];
+    for (const item of group.items) {
+        if (item.childItems.length) {
+            lists.push([colored(item), ...item.childItems.map(colored)], []);
+            continue;
+        }
+        if (!lists.length)
+            lists.push([]);
+        lists[lists.length - 1].push(colored(item));
+    }
+    if (lists.length && !lists[lists.length - 1].length)
+        lists.pop();
+    return { ...group, items: group.items.map(colored), lists };
+}
+/** A panel page, in the full layout (sidebar, header). */
+export class Page extends BasePage {
+    /** Methods the browser may call. A subclass adds its own: `static callable = ['approve']`. */
+    static callable = ['mountAction', 'unmountAction', 'callMountedAction', 'callSchemaComponentMethod'];
+    static slug = '';
+    static title = null;
+    static navigationLabel = null;
+    static navigationIcon = null;
+    static navigationGroup = null;
+    static navigationSort = 0;
+    static navigationBadge = null;
+    static navigationBadgeColor = 'primary';
+    /** Label of another menu item of the group, below which this page is shown. */
+    static navigationParentItem = null;
+    /** Cluster of the page: it is served under the cluster's URL and listed in its sub-navigation. */
+    static cluster = null;
+    static shouldRegisterNavigation = true;
+    /** Restricts the page to some users: returning `false` hides it from the menu and denies it (403). */
+    static canAccess(_user) { return true; }
+    /** Whether the page needs the tenant's subscription (`panel.requiresTenantSubscription()`); `false` keeps it open. */
+    static isTenantSubscriptionRequired(panel) { return panel.isTenantSubscriptionRequired(); }
+    static getTitle() { return this.title ?? this.name.replace(/([a-z])([A-Z])/g, '$1 $2'); }
+    static getNavigationLabel() { return this.navigationLabel ?? this.getTitle(); }
+    /** Every request, including browser updates, requires an authenticated user: a snapshot kept after logout is not enough. */
+    async boot() {
+        const ctx = this._ctx;
+        if (!ctx?.user && !ctx?.panel.allowsGuests())
+            throw new WireError(401, 'Unauthenticated.');
+        // In a multi-tenant panel, every page belongs to a tenant the user is a member of (checked by the router).
+        if (ctx.panel.hasTenancy() && !ctx.tenant)
+            throw new WireError(404, 'Tenant not found.');
+        if (ctx.tenant && this.constructor.isTenantSubscriptionRequired(ctx.panel) && !(await ctx.panel.getTenantBillingProvider().isSubscribed(ctx.tenant)))
+            throw new WireError(403, 'Subscription required.');
+        if (await ctx.panel.mustVerifyEmail(ctx.user))
+            throw new WireError(403, 'Email address not verified.');
+        if (await ctx.panel.mustSetUpMultiFactorAuthentication(ctx.user))
+            throw new WireError(403, 'Multi-factor authentication must be set up.');
+        // Checked on every request, not only on display: a forged request to a forbidden page is denied.
+        if (!(await this.isAccessAuthorized(ctx)))
+            throw new WireError(403, 'Forbidden.');
+    }
+    isAccessAuthorized(ctx) { return ctx.panel.canAccessPage(this.constructor, ctx.user); }
+    getTitle() { return this.constructor.getTitle(); }
+    getHeading() { return this.getTitle(); }
+    getBreadcrumbs() { return []; }
+    getHeaderActions() { return []; }
+    getPageClasses() { return []; }
+    /** Page sub-navigation: its cluster's pages, for a page in a cluster; empty otherwise. */
+    getSubNavigation() {
+        const cluster = this.constructor.cluster;
+        return cluster?.shouldRegisterSubNavigation ? this.panel.getClusterSubNavigation(cluster, this, this._ctx.user) : [];
+    }
+    /** Breadcrumbs, preceded by the cluster's for a page in a cluster. */
+    getBreadcrumbsWithCluster() {
+        const breadcrumbs = this.getBreadcrumbs();
+        const cluster = clusterOf(this.constructor);
+        if (!cluster || this instanceof Cluster)
+            return breadcrumbs;
+        const crumb = cluster.getClusterBreadcrumb();
+        return breadcrumbs[0]?.label === crumb ? breadcrumbs : [{ label: crumb, url: this.panel.getUrl(cluster.slug) }, ...breadcrumbs];
+    }
+    /** Sub-navigation position: `start` (column before the content), `end` (after) or `top` (tabs). Defaults to the resource's, then the panel's. */
+    static subNavigationPosition = null;
+    getSubNavigationPosition() {
+        const own = this.constructor.subNavigationPosition;
+        const resource = this.constructor.resource ?? this.constructor.parentResource;
+        return own ?? resource?.subNavigationPosition ?? clusterOf(this.constructor)?.subNavigationPosition ?? this.panel.getSubNavigationPosition();
+    }
+    /** Widgets shown below the page content. */
+    getFooterWidgets() { return []; }
+    getFooterWidgetsColumns() { return 2; }
+    /** Footer widget grid, in the page's `footerWidgets` schema. */
+    async renderFooterWidgets() {
+        const widgets = await this.filterVisibleWidgets(this.getFooterWidgets());
+        if (!widgets.length)
+            return '';
+        const liberate = (hook) => `<div class="fi-sc-liberated" wire:key="" ${ANONYMOUS_SCHEMA_COMPONENT}>${renderHook(hook, this.getRenderHookScopes())}</div>`;
+        return `<div x-data="filamentSchema({ livewireId: ${e(js(this.id))}, schemaKey: 'footerWidgets' })" x-on:form-validation-error.window="handleFormValidationError" x-on:reset-schema-component-state.window="handleClientSideStateReset" class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));">${liberate(PanelsRenderHook.PAGE_FOOTER_WIDGETS_START)}${await this.renderWidgetsGrid(widgets, this.getFooterWidgetsColumns(), 'footerWidgets')}${liberate(PanelsRenderHook.PAGE_FOOTER_WIDGETS_END)}</div>`;
+    }
+    /** Widgets shown above the page content, with the data passed to each (widget properties). */
+    getHeaderWidgets() { return []; }
+    getHeaderWidgetsColumns() { return 2; }
+    getWidgetData() { return {}; }
+    /** Header widget grid, in the page's `headerWidgets` schema. */
+    async renderHeaderWidgets() {
+        const widgets = await this.filterVisibleWidgets(this.getHeaderWidgets());
+        if (!widgets.length)
+            return '';
+        const liberate = (hook) => `<div class="fi-sc-liberated" wire:key="" ${ANONYMOUS_SCHEMA_COMPONENT}>${renderHook(hook, this.getRenderHookScopes())}</div>`;
+        return `<div x-data="filamentSchema({ livewireId: ${e(js(this.id))}, schemaKey: 'headerWidgets' })" x-on:form-validation-error.window="handleFormValidationError" x-on:reset-schema-component-state.window="handleClientSideStateReset" class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));">${liberate(PanelsRenderHook.PAGE_HEADER_WIDGETS_START)}${await this.renderWidgetsGrid(widgets, this.getHeaderWidgetsColumns(), 'headerWidgets')}${liberate(PanelsRenderHook.PAGE_HEADER_WIDGETS_END)}</div>`;
+    }
+    /** Widgets the current user is allowed to see. */
+    async filterVisibleWidgets(candidates) {
+        const viewer = this._ctx.user;
+        const widgets = [];
+        for (const widget of candidates)
+            if (await this.panel.authorize(viewer, 'view', { widget, rule: () => widget.canView(viewer) }))
+                widgets.push(widget);
+        return widgets;
+    }
+    /** Widget grid of a schema: each widget is a child component, lazy-loaded by default. */
+    async renderWidgetsGrid(widgets, columns, schemaKey) {
+        const items = [];
+        for (const [index, widget] of widgets.entries()) {
+            const componentName = this._runtime.nameOf(widget);
+            const key = `${schemaKey}.${componentName}-${index}`;
+            const child = await this.mountChild(componentName, this.getWidgetData(), `${this.id}.${key}`, { lazy: widget.isLazy });
+            items.push(`<div class="fi-sc-liberated" wire:key="${e(`${this.id}.${key}`)}" x-data="filamentSchemaComponent(${e(js({ key, exposedMethods: [], path: '', containerPath: '' }))})">${child}</div>`);
+        }
+        const grid = new Attributes().grid(typeof columns === 'number' ? { lg: columns } : columns).class(['fi-sc', 'fi-sc-has-gap']);
+        return `<div ${ANONYMOUS_SCHEMA_COMPONENT} class="fi-grid-col" style="--col-span-default: span 1 / span 1;"><div class="fi-sc-component"><div><div ${grid.toHtml()}>${items.join('')}</div></div></div></div>`;
+    }
+    /** Page content: its `content` schema by default. */
+    /**
+     * Content rendered from an EJS view instead of the `content` schema: a namespaced view (`'app::pages.report'`), or a file
+     * (path or `new URL('./report.ejs', import.meta.url)`). The view receives `page` (this page) and `getViewData()`, and may use
+     * component tags (`<x-section>`, `<x-button>`…). Elements calling the server use `wire:click` on a method listed in `static callable`.
+     */
+    static view = null;
+    /** Extra variables for the page view. */
+    getViewData() { return {}; }
+    async renderContent() {
+        const view = this.constructor.view;
+        if (view === null)
+            return (await this.getSchema('content')).toHtml();
+        const data = { page: this, livewireId: this.id, ...(await this.getViewData()) };
+        return typeof view === 'string' && view.includes('::') ? views.render(view, data) : views.renderFile(view instanceof URL ? fileURLToPath(view) : view, data);
+    }
     async render() {
         const ctx = { livewire: this, component: null, operation: null, record: this.getActionRecord(), get: () => undefined, state: undefined };
         const headerActions = [];
@@ -1023,12 +1426,34 @@ export class Page extends BasePage {
                 headerActions.push(await action.toHtml(ctx));
         return views.render('filament-panels::pages.page', {
             heading: this.getHeading(), headerWidgets: await this.renderHeaderWidgets(), content: await this.renderContent(), footerWidgets: await this.renderFooterWidgets(), livewireId: this.id, renderHookScopes: this.getRenderHookScopes(),
-            subNavigation: await this.getSubNavigation(), subNavigationPosition: this.getSubNavigationPosition(),
-            breadcrumbs: this.getBreadcrumbs(), headerActions, pageClasses: this.getPageClasses(), actionModals: this.rendersActionModalsInPage() ? await this.renderActionModals() : '',
+            subNavigation: (await this.getSubNavigation()).map((item) => ({ ...item, badgeColorClasses: sharedColors.getComponentClasses('badge', item.badgeColor ?? 'primary') })), subNavigationPosition: this.getSubNavigationPosition(),
+            breadcrumbs: this.getBreadcrumbsWithCluster(), headerActions, pageClasses: this.getPageClasses(), actionModals: this.rendersActionModalsInPage() ? await this.renderActionModals() : '',
             headerActionsKey: createHash('md5').update(this.getHeaderActions().map((a) => a.getName()).join(',')).digest('hex'),
         });
     }
 }
+/**
+ * Cluster: a menu item gathering pages and resources (`static cluster = Settings`), listed in its sub-navigation and served
+ * under its URL (`/settings/...`). Opening the cluster goes to its first page.
+ */
+export class Cluster extends Page {
+    /** Breadcrumb before those of its pages; defaults to the title. */
+    static clusterBreadcrumb = null;
+    /** `false`: the pages of the cluster have no sub-navigation. */
+    static shouldRegisterSubNavigation = true;
+    static getTitle() { return this.title ?? this.name.replace(/Cluster$/, '').replace(/([a-z])([A-Z])/g, '$1 $2'); }
+    /** URL segment: `slug`, or the class name without "Cluster" in kebab case (`ProductsCluster` → `products`). */
+    static getSlug() { return this.slug || this.name.replace(/Cluster$/, '').replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(); }
+    static getClusterBreadcrumb() { return this.clusterBreadcrumb ?? this.getTitle(); }
+    async mount() {
+        const [first] = await this.getSubNavigation();
+        if (first)
+            this.redirect(first.url);
+    }
+    getSubNavigation() {
+        return this.panel.getClusterSubNavigation(this.constructor, this, this._ctx.user);
+    }
+}
 /**
  * Dashboard: a widget grid, preceded by a filters form when the page defines `filtersFormSchema(schema)`.
  * The filters are passed to widgets as `pageFilters`.
@@ -1069,30 +1494,6 @@ export class Dashboard extends Page {
         return `<div x-data="filamentSchema({ livewireId: ${e(js(this.id))}, schemaKey: 'content' })" x-on:form-validation-error.window="handleFormValidationError" x-on:reset-schema-component-state.window="handleClientSideStateReset" class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));">${filters}${widgets}</div>`;
     }
 }
-/** In-memory rate limiter: `max` attempts per window, per key. Fine for a single instance; use a shared store when running several. */
-export class Throttle {
-    hits = new Map();
-    max;
-    windowMs;
-    constructor(max = 5, windowMs = 60_000) { this.max = max; this.windowMs = windowMs; }
-    /** Records an attempt; returns 0 if allowed, otherwise the number of seconds to wait. */
-    hit(key, now = Date.now()) {
-        const recent = (this.hits.get(key) ?? []).filter((at) => at > now - this.windowMs);
-        if (recent.length >= this.max) {
-            this.hits.set(key, recent);
-            return Math.max(1, Math.ceil((recent[0] + this.windowMs - now) / 1000));
-        }
-        recent.push(now);
-        this.hits.set(key, recent);
-        // Keep the store from growing forever.
-        if (this.hits.size > 10_000)
-            for (const [k, v] of this.hits)
-                if (!v.some((at) => at > now - this.windowMs))
-                    this.hits.delete(k);
-        return 0;
-    }
-    clear(key) { this.hits.delete(key); }
-}
 const loginThrottle = new Throttle();
 /** Page with the simple layout (login, registration…). */
 export class SimplePage extends BasePage {
@@ -1101,7 +1502,7 @@ export class SimplePage extends BasePage {
     getSubheading() { return null; }
     hasLogo() { return true; }
     async render() {
-        return views.render('filament-panels::pages.simple', { brand: this.panel.getBrand(), heading: this.getHeading(), subheading: this.getSubheading(), hasLogo: this.hasLogo(), content: await this.getSchema('content').toHtml(), livewireId: this.id, renderHookScopes: this.getRenderHookScopes() });
+        return views.render('filament-panels::pages.simple', { brand: this.panel.getBrand(), heading: this.getHeading(), subheading: this.getSubheading(), hasLogo: this.hasLogo(), content: await this.getSchema('content').toHtml(), livewireId: this.id, renderHookScopes: this.getRenderHookScopes(), actionModals: await this.renderActionModals() });
     }
 }
 /** Color manager read by the other packages and shared by all panels; each request sets its panel's colors on it (`Panel.withTheme`). */
@@ -1339,7 +1740,7 @@ export class EmailVerificationPrompt extends SimplePage {
 }
 /** User profile page: name, email, new password. The current password is required to change the email or password. */
 export class EditProfile extends SimplePage {
-    static callable = ['save', 'callSchemaComponentMethod'];
+    static callable = ['save', 'mountAction', 'unmountAction', 'callMountedAction', 'callSchemaComponentMethod'];
     static slug = 'profile';
     data = {};
     static getLabel() { return t('filament-panels::auth/pages/edit-profile.label'); }
@@ -1353,10 +1754,32 @@ export class EditProfile extends SimplePage {
         throw new WireError(401, 'Unauthenticated.'); }
     getTitle() { return this.constructor.getLabel(); }
     hasLogo() { return false; }
+    /** Whether the page uses the full layout (`panel.profile(EditProfile, false)`): its form is then split into sections. */
+    usesFullLayout() { return !this.panel.isProfileSimple(); }
+    async render() {
+        if (!this.usesFullLayout())
+            return super.render();
+        return views.render('filament-panels::pages.page', {
+            heading: this.getTitle(), headerWidgets: '', content: await this.getSchema('content').toHtml(), footerWidgets: '', livewireId: this.id, renderHookScopes: this.getRenderHookScopes(),
+            subNavigation: [], subNavigationPosition: 'top', breadcrumbs: [], headerActions: [], pageClasses: ['fi-auth-edit-profile-page'], actionModals: await this.renderActionModals(), headerActionsKey: '',
+        });
+    }
     formSchema(schema) {
+        const fields = this.getFormComponents();
+        if (!this.usesFullLayout())
+            return schema.operation('edit').components(fields);
+        const [name, email, ...password] = fields;
+        const group = 'filament-panels::auth/pages/edit-profile.sections';
+        return schema.operation('edit').components([
+            Section.make(t(`${group}.information.heading`)).description(t(`${group}.information.description`)).schema([name, email]),
+            Section.make(t(`${group}.password.heading`)).description(t(`${group}.password.description`)).schema(password),
+        ]);
+    }
+    /** Fields of the form: name, email, new password, its confirmation, current password. */
+    getFormComponents() {
         const { panel, user } = this._ctx;
         const auth = panel.getAuth();
-        return schema.operation('edit').components([
+        return [
             TextInput.make('name').label(t('filament-panels::auth/pages/edit-profile.form.name.label')).required().maxLength(255).autofocus(),
             TextInput.make('email').label(t('filament-panels::auth/pages/edit-profile.form.email.label')).email().required().maxLength(255).live()
                 .rule({ name: 'unique', passes: async (value) => { const other = await auth.findByEmail?.(String(value)); return !other || String(other.id) === String(user?.id); }, message: (attribute) => `The ${attribute} has already been taken.` }),
@@ -1367,13 +1790,44 @@ export class EditProfile extends SimplePage {
                 .password().autocomplete('current-password').revealable().required()
                 .rule({ name: 'current_password', passes: async (value) => Boolean(user && (await auth.attempt(user.email, String(value)))), message: () => 'The password is incorrect.' })
                 .visible(({ get }) => !blankValue(get('password')) || get('email') !== user?.email).dehydrated(false),
-        ]);
+        ];
     }
     contentSchema(schema) {
-        return schema.components(formContent('save', [
-            Action.make('save').label(t('filament-panels::auth/pages/edit-profile.form.actions.save.label')).submit('save').keyBindings(['mod+s']),
-            Action.make('back').label(t('filament-panels::auth/pages/edit-profile.actions.cancel.label')).color('gray').alpineClickHandler(`document.referrer ? window.history.back() : (window.location.href = ${JSON.stringify(this.panel.getUrl())})`),
-        ], { fullWidth: false, alignment: 'start' }));
+        const { panel, user } = this._ctx;
+        return schema.components([
+            ...formContent('save', [
+                Action.make('save').label(t('filament-panels::auth/pages/edit-profile.form.actions.save.label')).submit('save').keyBindings(['mod+s']),
+                Action.make('back').label(t('filament-panels::auth/pages/edit-profile.actions.cancel.label')).color('gray').alpineClickHandler(`document.referrer ? window.history.back() : (window.location.href = ${JSON.stringify(this.panel.getUrl())})`),
+            ], { fullWidth: false, alignment: 'start' }),
+            ...(panel.hasMultiFactorAuthentication() && user ? [this.multiFactorAuthenticationSection(panel, user)] : []),
+        ]);
+    }
+    /** Emails of an email change: a confirmation link to the new address, a link to block it to the old one. */
+    async sendEmailChangeVerification(user, newEmail) {
+        const { panel, req } = this._ctx;
+        const urls = panel.getEmailChangeUrls(user, newEmail);
+        await panel.sendMail({
+            to: newEmail, subject: 'Verify Email Address',
+            lines: ['Please click the button below to verify your new email address.'],
+            action: { label: 'Verify Email Address', url: absoluteUrl(panel, req, urls.verify) },
+            outro: ['This link will expire in 60 minutes.', 'If you did not request this change, no further action is required.'],
+        });
+        const notice = 'filament-panels::auth/notifications/notice-of-email-change-request';
+        await panel.sendMail({
+            to: user.email, subject: t(`${notice}.subject`),
+            lines: [0, 1, 2].map((index) => t(`${notice}.lines.${index}`, { email: newEmail })),
+            action: { label: t(`${notice}.action`), url: absoluteUrl(panel, req, urls.block) },
+            outro: [t(`${notice}.lines.3`, { email: newEmail })],
+        });
+        Notification.make().success().title(t('filament-panels::auth/pages/edit-profile.notifications.email_change_verification_sent.title')).body(t('filament-panels::auth/pages/edit-profile.notifications.email_change_verification_sent.body', { email: newEmail })).send();
+    }
+    /** Multi-factor authentication settings: each provider's status and actions (set up, turn off…). */
+    multiFactorAuthenticationSection(panel, user) {
+        if (!this.usesFullLayout())
+            return multiFactorManagementSection(panel, user);
+        const group = 'filament-panels::auth/pages/edit-profile.multi_factor_authentication';
+        return Section.make(t(`${group}.label`)).description(t(`${group}.description`)).divided()
+            .schema(panel.getMultiFactorAuthenticationProviders().map((provider) => Group.make(provider.getManagementSchemaComponents(user, panel)).statePath(provider.getId())));
     }
     async save() {
         const { panel, user } = this._ctx;
@@ -1386,7 +1840,13 @@ export class EditProfile extends SimplePage {
             return;
         }
         const data = await getSchemaState(form);
-        await panel.getAuth().update(user, { name: String(data.name), email: String(data.email), password: blankValue(data.password) ? undefined : String(data.password) });
+        const newEmail = String(data.email);
+        const verifyEmailChange = panel.hasEmailChangeVerification() && newEmail !== user.email;
+        await panel.getAuth().update(user, { name: String(data.name), email: verifyEmailChange ? user.email : newEmail, password: blankValue(data.password) ? undefined : String(data.password) });
+        if (verifyEmailChange) {
+            await this.sendEmailChangeVerification(user, newEmail);
+            this.data = { ...this.data, email: user.email };
+        }
         this.data = { ...this.data, password: null, passwordConfirmation: null, currentPassword: null };
         Notification.make().success().title(t('filament-panels::auth/pages/edit-profile.notifications.saved.title')).send();
     }
@@ -1461,15 +1921,41 @@ export class EditTenantProfile extends Page {
 }
 export class Login extends SimplePage {
     static callable = ['authenticate', 'callSchemaComponentMethod'];
+    /** Signed token naming the user undertaking the multi-factor challenge: set by the server only. */
+    static locked = ['userUndertakingMultiFactorAuthentication'];
     data = {};
+    userUndertakingMultiFactorAuthentication = null;
+    /** User of the pending challenge, resolved from the token on each request. */
+    _multiFactorUser = null;
+    _multiFactorProviders = [];
     mount() { fillSchema(this.getSchema('form'), this.data); }
+    async boot() {
+        const payload = this.readMultiFactorToken();
+        const { panel } = this._ctx;
+        this._multiFactorUser = payload ? await panel.getAuth().find(payload.uid) : null;
+        const ids = Array.isArray(payload?.providers) ? payload.providers.map(String) : [];
+        this._multiFactorProviders = this._multiFactorUser ? panel.getMultiFactorAuthenticationProviders().filter((provider) => ids.includes(provider.getId())) : [];
+    }
+    readMultiFactorToken() {
+        const { panel } = this._ctx;
+        return this.userUndertakingMultiFactorAuthentication ? readToken(panel.getAuthKey(), `${panel.getId()}.mfa-login`, this.userUndertakingMultiFactorAuthentication) : null;
+    }
+    /** Whether the multi-factor challenge is shown. */
+    isUndertakingMultiFactorAuthentication() { return this._multiFactorUser !== null && this._multiFactorProviders.length > 0; }
     getTitle() { return t('filament-panels::auth/pages/login.title'); }
-    getHeading() { return t('filament-panels::auth/pages/login.heading'); }
+    getHeading() { return this.isUndertakingMultiFactorAuthentication() ? t('filament-panels::auth/pages/login.multi_factor.heading') : t('filament-panels::auth/pages/login.heading'); }
     getSubheading() {
+        if (this.isUndertakingMultiFactorAuthentication())
+            return e(t('filament-panels::auth/pages/login.multi_factor.subheading'));
         if (!this.panel.hasRegistration())
             return null;
         return `${e(t('filament-panels::auth/pages/login.actions.register.before'))} ${authLink(this.panel.getRegistrationUrl(), t('filament-panels::auth/pages/login.actions.register.label'))}`;
     }
+    getSchema(name) {
+        if (name === 'multiFactorChallengeForm')
+            return this.multiFactorChallengeFormSchema(Schema.make(this).key(name).statePath('data.multiFactor'));
+        return super.getSchema(name);
+    }
     formSchema(schema) {
         return schema.components([
             TextInput.make('email').label(t('filament-panels::auth/pages/login.form.email.label')).email().required().autocomplete().autofocus(),
@@ -1479,19 +1965,48 @@ export class Login extends SimplePage {
             Checkbox.make('remember').label(t('filament-panels::auth/pages/login.form.remember.label')),
         ]);
     }
+    /** Challenge fields of the user's enabled providers (with a picker when there are several). */
+    multiFactorChallengeFormSchema(schema) {
+        if (!this.isUndertakingMultiFactorAuthentication())
+            return schema.components([]);
+        return schema.components(this.panel.getMultiFactorChallenge().getFormComponents(this._multiFactorUser, this._multiFactorProviders));
+    }
     contentSchema(schema) {
+        const challenging = this.isUndertakingMultiFactorAuthentication();
         return schema.components([
             RenderHook.make(PanelsRenderHook.AUTH_LOGIN_FORM_BEFORE),
             Form.make([EmbeddedSchema.make('form')]).id('form').livewireSubmitHandler('authenticate')
-                .footer([Actions.make([Action.make('authenticate').label(t('filament-panels::auth/pages/login.form.actions.authenticate.label')).submit('authenticate')]).fullWidth().key('form-actions')]),
-            // Multi-factor challenge form: hidden until MFA is implemented.
-            Form.make([]).id('multiFactorChallengeForm').hidden(),
+                .footer([Actions.make([Action.make('authenticate').label(t('filament-panels::auth/pages/login.form.actions.authenticate.label')).submit('authenticate')]).fullWidth().key('form-actions')])
+                .hidden(challenging),
+            Form.make(challenging ? [EmbeddedSchema.make('multiFactorChallengeForm')] : []).id('multiFactorChallengeForm').livewireSubmitHandler('authenticate')
+                .footer(challenging ? [Actions.make([Action.make('authenticate').label(t('filament-panels::auth/pages/login.multi_factor.form.actions.authenticate.label')).submit('authenticate')]).fullWidth()] : [])
+                .hidden(!challenging),
             RenderHook.make(PanelsRenderHook.AUTH_LOGIN_FORM_AFTER),
         ]);
     }
+    /** Starts a challenge for this user if one of their providers is set up; returns whether it did. */
+    async startMultiFactorChallenge(user) {
+        const { panel } = this._ctx;
+        if (!panel.hasMultiFactorAuthentication())
+            return false;
+        const challenge = panel.getMultiFactorChallenge();
+        const enabled = await challenge.getEnabledProviders(user);
+        if (!enabled.length)
+            return false;
+        // Ten minutes to answer; the password is checked again when the challenge is answered.
+        this.userUndertakingMultiFactorAuthentication = signToken(panel.getAuthKey(), `${panel.getId()}.mfa-login`, { uid: user.id, providers: enabled.map((provider) => provider.getId()) }, 60 * 10);
+        this._multiFactorUser = user;
+        this._multiFactorProviders = enabled;
+        await challenge.beforeChallenge(user, enabled[0]);
+        const state = {};
+        this.data = { ...this.data, multiFactor: state };
+        fillSchema(this.getSchema('multiFactorChallengeForm'), state);
+        return true;
+    }
     async authenticate() {
         this._errors = await validateSchema(this.getSchema('form'));
         if (Object.keys(this._errors).length) {
+            this.cancelMultiFactorChallenge();
             this.dispatch('form-validation-error', { livewireId: this.id });
             return;
         }
@@ -1502,16 +2017,88 @@ export class Login extends SimplePage {
             Notification.make().danger().title(t('filament-actions::notifications.throttled.title', { seconds: wait, minutes: Math.ceil(wait / 60) })).body(t('filament-actions::notifications.throttled.body', { seconds: wait, minutes: Math.ceil(wait / 60) })).send();
             return;
         }
+        // The password is checked on every submission, the challenge's included: a password changed meanwhile ends it.
         const user = await panel.getAuth().attempt(String(this.data.email), String(this.data.password));
         // As in Filament: a valid account that may not use this panel gets the same message as wrong credentials.
         if (!user || !(await panel.userCanAccess(user))) {
+            this.cancelMultiFactorChallenge();
             this.addError('data.email', t('filament-panels::auth/pages/login.messages.failed'));
             return;
         }
+        if (this.isUndertakingMultiFactorAuthentication() && String(this._multiFactorUser.id) === String(user.id)) {
+            const challenge = panel.getMultiFactorChallenge();
+            const challengeWait = challenge.hitRateLimiter(user);
+            if (challengeWait > 0) {
+                Notification.make().danger().title(t('filament-actions::notifications.throttled.title', { seconds: challengeWait, minutes: Math.ceil(challengeWait / 60) })).body(t('filament-actions::notifications.throttled.body', { seconds: challengeWait, minutes: Math.ceil(challengeWait / 60) })).send();
+                return;
+            }
+            const challengeForm = this.getSchema('multiFactorChallengeForm');
+            this._errors = await validateSchema(challengeForm);
+            if (Object.keys(this._errors).length) {
+                this.dispatch('form-validation-error', { livewireId: this.id });
+                return;
+            }
+            // Defense in depth: the answered provider is one of the user's, and at least one of its fields was validated.
+            const state = (this.data.multiFactor ?? {});
+            const picked = this._multiFactorProviders.length > 1 ? String(state.provider ?? '') : this._multiFactorProviders[0].getId();
+            const answered = this._multiFactorProviders.some((provider) => provider.getId() === picked)
+                && (await challengeForm.getVisibleFlatComponents()).some((component) => component instanceof Field && component.getStatePath().startsWith(`data.multiFactor.${picked}.`));
+            if (!answered) {
+                this.addError('data.multiFactor.provider', t('filament-panels::auth/pages/login.messages.failed'));
+                return;
+            }
+            challenge.clearRateLimiter(user);
+        }
+        else if (await this.startMultiFactorChallenge(user)) {
+            return;
+        }
         loginThrottle.clear(`${panel.getId()}:${req.ip ?? ''}`);
         panel.logIn(res, user, Boolean(this.data.remember));
+        this.userUndertakingMultiFactorAuthentication = null;
         this.redirect(panel.getUrl());
     }
+    /** The user picked another provider in the challenge: run its `beforeChallenge` (an email code is sent). */
+    async updatedData(value, key) {
+        if (key !== 'multiFactor.provider' || !this.isUndertakingMultiFactorAuthentication())
+            return;
+        const provider = this._multiFactorProviders.find((candidate) => candidate.getId() === value);
+        if (provider)
+            await this.panel.getMultiFactorChallenge().beforeChallenge(this._multiFactorUser, provider);
+    }
+    cancelMultiFactorChallenge() {
+        this.userUndertakingMultiFactorAuthentication = null;
+        this._multiFactorUser = null;
+        this._multiFactorProviders = [];
+    }
+}
+/** Shown after sign-in when the panel requires multi-factor authentication and the user has not set any provider up. */
+export class SetUpRequiredMultiFactorAuthentication extends SimplePage {
+    static callable = ['mountAction', 'unmountAction', 'callMountedAction', 'callSchemaComponentMethod'];
+    async boot() { if (!this._ctx?.user)
+        throw new WireError(401, 'Unauthenticated.'); }
+    async mount() {
+        const { panel, user } = this._ctx;
+        if (!panel.hasMultiFactorAuthentication() || (await panel.getMultiFactorChallenge().hasEnabledProviders(user)))
+            this.redirect(panel.getUrl());
+    }
+    getTitle() { return t('filament-panels::auth/multi-factor/pages/set-up-required-multi-factor-authentication.title'); }
+    getHeading() { return t('filament-panels::auth/multi-factor/pages/set-up-required-multi-factor-authentication.heading'); }
+    getSubheading() { return e(t('filament-panels::auth/multi-factor/pages/set-up-required-multi-factor-authentication.subheading')); }
+    contentSchema(schema) {
+        const { panel, user } = this._ctx;
+        return schema.components([
+            multiFactorManagementSection(panel, user),
+            Actions.make([
+                Action.make('continue').label(t('filament-panels::auth/multi-factor/pages/set-up-required-multi-factor-authentication.actions.continue.label')).url(panel.getUrl())
+                    .visible(() => panel.getMultiFactorChallenge().hasEnabledProviders(user)),
+            ]).fullWidth().key('footer-actions'),
+        ]);
+    }
+}
+/** Profile section listing the providers: each one's status and actions, under its id. */
+function multiFactorManagementSection(panel, user) {
+    return Section.make().compact().divided().secondary().key('multi-factor-authentication')
+        .schema(panel.getMultiFactorAuthenticationProviders().map((provider) => Group.make(provider.getManagementSchemaComponents(user, panel)).statePath(provider.getId())));
 }
 /** Whether the host component's user has this ability on the component's resource (or relation manager). Use it in your actions' `authorize()`. */
 export const can = (livewire, ability, record = null) => canOn(livewire, ability, record);
@@ -1531,6 +2118,12 @@ export class Resource {
     static navigationGroup = null;
     static navigationSort = 0;
     static navigationBadge = null;
+    /** Menu label; defaults to the plural model label in title case. */
+    static navigationLabel = null;
+    /** Label of another menu item of the group, below which the resource is shown. */
+    static navigationParentItem = null;
+    /** Cluster of the resource: its pages are served under the cluster's URL, and its list is in the cluster's sub-navigation. */
+    static cluster = null;
     static adapter;
     /** In a multi-tenant panel, whether records belong to each tenant (`true` by default). */
     static isScopedToTenant = true;
@@ -1554,8 +2147,9 @@ export class Resource {
     static widgets = [];
     /** Widgets shown above the table on the list page. */
     static headerWidgets = [];
-    /** Relation managers shown below the edit form. */
+    /** Relation managers shown below the edit form (and the view page), or groups of them (`RelationGroup`). */
     static relations = [];
+    static getRelations() { return this.relations; }
     /** Tabs of the list page. */
     static tabs() { return {}; }
     /** Simple resource: a single page, with create and edit in modals. */
@@ -1609,6 +2203,11 @@ export class Resource {
     static getGlobalSearchResultTitle(record) { return this.getRecordTitle(record); }
     /** Details shown under the title: `{ Author: 'Jane' }`. Empty values are skipped. */
     static getGlobalSearchResultDetails(_record) { return {}; }
+    /**
+     * Buttons under a result: links (`Action.make('edit').url(…)`) or Livewire events (`.dispatch('quickView', [id])`).
+     * They are not mounted: an action needing a modal belongs on the record's pages.
+     */
+    static getGlobalSearchResultActions(_record) { return []; }
     /** URL of a result: the view page, otherwise the edit page; for a simple resource, the list with the action open. `null` if the user has no access. */
     static async getGlobalSearchResultUrl(record, user) {
         const key = this.adapter.getKey(record);
@@ -1632,7 +2231,7 @@ export class Resource {
             for (const [label, value] of Object.entries(await this.getGlobalSearchResultDetails(record)))
                 if (value !== null && value !== undefined && value !== '')
                     details[label] = String(value);
-            results.push({ title: this.getGlobalSearchResultTitle(record), url, details });
+            results.push({ title: this.getGlobalSearchResultTitle(record), url, details, actions: await this.getGlobalSearchResultActions(record), record });
         }
         return results;
     }
@@ -1659,6 +2258,8 @@ export class Resource {
             static navigationGroup = resource.navigationGroup;
             static navigationSort = resource.navigationSort;
             static navigationBadge = resource.navigationBadge;
+            static navigationParentItem = resource.navigationParentItem;
+            static navigationLabel = resource.navigationLabel;
             static getNavigationBadge = typeof resource.getNavigationBadge === 'function' ? () => resource.getNavigationBadge() : undefined;
         };
         const Create = class extends (resource.pages.create ?? CreateRecord) {
@@ -1675,6 +2276,15 @@ export class Resource {
             return { index: List };
         const related = {};
         for (const [name, RelatedPage] of Object.entries(resource.relatedPages)) {
+            // Another edit or view page of the record (`EditCustomerContact extends EditRecord`): served at `<slug>/{record}/<name>`.
+            if (RelatedPage.prototype instanceof EditRecord || RelatedPage.prototype instanceof ViewRecord) {
+                related[name] = class extends RelatedPage {
+                    static resource = resource;
+                    static slug = `${resource.slug}/{record}/${name}`;
+                    static shouldRegisterNavigation = false;
+                };
+                continue;
+            }
             related[name] = class extends RelatedPage {
                 static parentResource = resource;
                 static slug = `${resource.slug}/{record}/${name}`;
@@ -1691,6 +2301,8 @@ export class Resource {
         return { index: List, create: Create, edit: Edit, view: View, ...related };
     }
 }
+/** The cluster a page belongs to: its own, or its resource's. */
+export const clusterOf = (page) => page?.cluster ?? page?.resource?.cluster ?? page?.parentResource?.cluster ?? null;
 /** Widget: a component displayed in a page's widget grid. */
 export class Widget extends Component {
     static componentName;
@@ -2215,40 +2827,105 @@ export class EmbeddedTable extends SchemaComponent {
     static make() { return new EmbeddedTable(); }
     async toHtml() { return this.livewire.renderTable(); }
 }
-/** Relation manager tabs of an edit page: only the active tab's manager is mounted, as a lazy child component. */
+/**
+ * Several relation managers under one tab of a record page: `RelationGroup.make('Contacts', [PhonesManager, EmailsManager])`.
+ * The managers are shown one below the other.
+ */
+export class RelationGroup {
+    _label;
+    _managers;
+    _icon = null;
+    _badge = null;
+    _badgeColor = 'primary';
+    constructor(label, managers) { this._label = label; this._managers = managers; }
+    static make(label, managers) { return new RelationGroup(label, managers); }
+    icon(name) { this._icon = name; return this; }
+    badge(badge) { this._badge = badge; return this; }
+    badgeColor(color) { this._badgeColor = color; return this; }
+    getLabel() { return this._label; }
+    getIcon() { return this._icon; }
+    getManagers() { return this._managers; }
+    async getBadge() { return typeof this._badge === 'function' ? this._badge() : this._badge; }
+    getBadgeColor() { return this._badgeColor; }
+}
+/** Relation manager tabs of a record page: only the active tab's managers are mounted, as lazy child components. */
 class RelationManagerTabs extends SchemaComponent {
-    constructor() { super(); this._keyName = 'relationManagerTabs'; }
+    content = [];
+    constructor(content = []) { super(); this._keyName = 'relationManagerTabs'; this.content = content; }
+    /** With content (the form or infolist), it is the first tab: `hasCombinedRelationManagerTabsWithContent()`. */
+    getChildSchemas() { return this.content.length ? [childSchema(this, this.content)] : []; }
     getExposedMethods() { return ['getLazyLoadedTabBadges', 'getDeferredTabBadges']; }
     getLazyLoadedTabBadges() { return {}; }
     getDeferredTabBadges() { return {}; }
+    /** Tabs the user can see on this record: managers and groups whose `canViewForRecord()` allows it. */
+    async tabs(page) {
+        const owner = page._record;
+        const PageClass = page.constructor;
+        const visible = async (manager) => Boolean(await manager.canViewForRecord(owner, PageClass));
+        const tabs = [];
+        if (this.content.length)
+            tabs.push({ key: '-1', label: page.getContentTabLabel(), icon: page.getContentTabIcon(), badge: null, badgeColor: 'primary', managers: [], isContent: true });
+        for (const [index, entry] of page.getRelationManagers().entries()) {
+            if (entry instanceof RelationGroup) {
+                const managers = [];
+                for (const manager of entry.getManagers())
+                    if (await visible(manager))
+                        managers.push(manager);
+                if (managers.length)
+                    tabs.push({ key: String(index), label: entry.getLabel(), icon: entry.getIcon(), badge: await entry.getBadge(), badgeColor: entry.getBadgeColor(), managers, isContent: false });
+            }
+            else if (await visible(entry)) {
+                tabs.push({ key: String(index), label: entry.getTitle(), icon: entry.getIcon(), badge: await entry.getBadge(owner, PageClass), badgeColor: entry.getBadgeColor(), managers: [entry], isContent: false });
+            }
+        }
+        return tabs;
+    }
+    async isVisible() { return (await super.isVisible()) && (this.content.length > 0 || (await this.tabs(this.livewire)).length > 0); }
     async toHtml() {
         const page = this.livewire;
-        const managers = page.resource.relations;
+        const tabs = await this.tabs(page);
+        if (!tabs.length)
+            return '';
         const key = this.getKey();
         const id = page.id;
-        const active = Math.min(Math.max(Math.floor(Number(page.activeRelationManager)) || 0, 0), managers.length - 1);
-        const tabId = (index) => `fi-sc-tab-${createHash('md5').update(`${key}.${index}`).digest('hex')}`;
-        const tabs = managers.map((manager, index) => `<button id="${tabId(index)}" role="tab" aria-controls="${key}.${index}" aria-selected="${index === active ? 'true' : 'false'}" x-bind:aria-selected="isTabSelected('${index}')" tabindex="${index === active ? '0' : '-1'}" x-bind:tabindex="getTabIndex('${index}')" data-tab-key="${index}" x-bind:data-tab-available="Boolean(true).toString()" x-show="true" x-on:click.capture="if (! selectTab('${index}', $event)) { $event.preventDefault(); $event.stopImmediatePropagation() }" x-bind:class="{ 'fi-active': isTabSelected('${index}') }" type="button" wire:click="$set('activeRelationManager', '${index}')" class="${cls(['fi-tabs-item', { 'fi-active': index === active }])}"><span class="fi-tabs-item-label">${e(manager.getTitle())}</span></button>`);
+        const active = tabs.find((tab) => tab.key === String(page.activeRelationManager)) ?? tabs[0];
+        const tabId = (tab) => `fi-sc-tab-${createHash('md5').update(`${key}.${tab.key}`).digest('hex')}`;
+        const header = tabs.map((tab) => {
+            const isActive = tab === active;
+            const iconHtml = tab.icon ? icon(tab.icon) : '';
+            const badgeHtml = tab.badge !== null && tab.badge !== undefined && tab.badge !== '' ? uiBadge({ color: tab.badgeColor, size: 'sm' }, e(String(tab.badge))) : '';
+            return `<button id="${tabId(tab)}" role="tab" aria-controls="${key}.${tab.key}" aria-selected="${isActive ? 'true' : 'false'}" x-bind:aria-selected="isTabSelected('${tab.key}')" tabindex="${isActive ? '0' : '-1'}" x-bind:tabindex="getTabIndex('${tab.key}')" data-tab-key="${tab.key}" x-bind:data-tab-available="Boolean(true).toString()" x-show="true" x-on:click.capture="if (! selectTab('${tab.key}', $event)) { $event.preventDefault(); $event.stopImmediatePropagation() }" x-bind:class="{ 'fi-active': isTabSelected('${tab.key}') }" type="button" wire:click="$set('activeRelationManager', '${tab.key}')" class="${cls(['fi-tabs-item', { 'fi-active': isActive }])}">${iconHtml}<span class="fi-tabs-item-label">${e(tab.label)}</span>${badgeHtml}</button>`;
+        });
         const panels = [];
-        for (const [index, manager] of managers.entries()) {
+        for (const tab of tabs) {
             let content = '';
-            if (index === active) {
-                const componentName = page._runtime.nameOf(manager);
-                const childKey = `${key}.${index}.${componentName}`;
-                const child = await page.mountChild(componentName, { ownerRecord: page.recordKey }, `${id}.${childKey}`, { lazy: true });
-                content = `<div class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));"><div wire:partial="schema-component::${e(childKey)}" x-data="filamentSchemaComponent(${e(js({ key: childKey, exposedMethods: [], path: '', containerPath: '' }))})" wire:key="${e(`${id}.${childKey}`)}" class="fi-grid-col" style="--col-span-default: span 1 / span 1;"><div class="fi-sc-component">${child}</div></div></div>`;
+            if (tab.isContent) {
+                // The form or infolist: always rendered, so that its state and actions stay in the page.
+                content = (await this.getChildSchemas()[0]?.toHtml()) ?? '';
+            }
+            else if (tab === active) {
+                const parts = [];
+                for (const manager of tab.managers) {
+                    const componentName = page._runtime.nameOf(manager);
+                    const childKey = `${key}.${tab.key}.${componentName}`;
+                    const child = await page.mountChild(componentName, { ownerRecord: page.recordKey }, `${id}.${childKey}`, { lazy: true });
+                    parts.push(`<div wire:partial="schema-component::${e(childKey)}" x-data="filamentSchemaComponent(${e(js({ key: childKey, exposedMethods: [], path: '', containerPath: '' }))})" wire:key="${e(`${id}.${childKey}`)}" class="fi-grid-col" style="--col-span-default: span 1 / span 1;"><div class="fi-sc-component">${child}</div></div>`);
+                }
+                content = `<div class="fi-grid fi-sc fi-sc-has-gap" style="--cols-default: repeat(1, minmax(0, 1fr));">${parts.join('')}</div>`;
             }
-            panels.push(`<div aria-labelledby="${tabId(index)}" id="${key}.${index}" role="tabpanel" tabindex="0" wire:key="${id}.${key}.${index}.container" x-show="true" x-bind:class="{ 'fi-active': isTabSelected('${index}') }" x-on:expand="revealTab('${index}')" x-data="filamentSchemaComponent(${e(js({ key: `${key}.${index}`, exposedMethods: [], path: '', containerPath: '' }))})" class="fi-sc-tabs-tab">${content}</div>`);
+            const isActive = tab === active;
+            panels.push(`<div aria-labelledby="${tabId(tab)}" id="${key}.${tab.key}" role="tabpanel" tabindex="0" wire:key="${id}.${key}.${tab.key}.container" x-show="true" x-bind:class="{ 'fi-active': isTabSelected('${tab.key}') }" x-on:expand="revealTab('${tab.key}')" x-data="filamentSchemaComponent(${e(js({ key: `${key}.${tab.key}`, exposedMethods: [], path: '', containerPath: '' }))})" class="${cls(['fi-sc-tabs-tab', { 'fi-active': isActive && tab.isContent }])}">${content}</div>`);
         }
+        const activeIndex = tabs.indexOf(active);
         return `<div x-data="tabsSchemaComponent({
- activeTab: ${active + 1},
+ activeTab: ${activeIndex + 1},
  hasTabPanels: true,
  isScrollable: true,
  isVertical: false,
  livewireId: ${e(js(id))},
  livewireProperty: 'activeRelationManager',
- tab: '${active}',
- })" x-load x-load-src="${e(page.panel.assetUrl('js/filament/schemas/components/tabs.js'))}" wire:ignore.self id="${key}" wire:key="${id}.${key}.container" class="fi-sc-tabs"><input type="hidden" x-ref="tabsData" data-active-tab="${active}" /><div x-ref="tabsHeader" class="fi-tabs"><div x-ref="tablist" role="tablist" x-bind:role="hasVisibleTabHeaders ? 'tablist' : 'group'" aria-label="${e(t('filament::components/tabs.label'))}" x-on:keydown="handleKeydown($event)" data-prevent-disabled-clicks wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" wire:target="activeRelationManager" class="fi-sc-tabs-tablist">${tabs.join('')}</div></div>${panels.join('')}</div>`;
+ tab: '${active.key}',
+ })" x-load x-load-src="${e(page.panel.assetUrl('js/filament/schemas/components/tabs.js'))}" wire:ignore.self id="${key}" wire:key="${id}.${key}.container" class="fi-sc-tabs"><input type="hidden" x-ref="tabsData" data-active-tab="${active.key}" /><div x-ref="tabsHeader" class="fi-tabs"><div x-ref="tablist" role="tablist" x-bind:role="hasVisibleTabHeaders ? 'tablist' : 'group'" aria-label="${e(t('filament::components/tabs.label'))}" x-on:keydown="handleKeydown($event)" data-prevent-disabled-clicks wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" wire:target="activeRelationManager" class="fi-sc-tabs-tablist">${header.join('')}</div></div>${panels.join('')}</div>`;
     }
 }
 /** List page tab: restricts the table query and can show a badge. */
@@ -2353,6 +3030,11 @@ class ResourceTabs extends SchemaComponent {
 export class ListRecords extends Page {
     static callable = ['updateTableColumnState', 'sortTable', 'gotoPage', 'nextPage', 'previousPage', 'applyTableFilters', 'resetTableFiltersForm', 'removeTableFilters', 'removeTableFilter', 'applyTableColumnManager', 'resetTableColumnManager', 'toggleTableReordering', 'reorderTable'];
     static resource;
+    /** In a cluster, the list page shows the cluster's sub-navigation. */
+    getSubNavigation() {
+        const cluster = this.resource.cluster;
+        return cluster?.shouldRegisterSubNavigation ? this.panel.getClusterSubNavigation(cluster, this, this._ctx.user) : [];
+    }
     tableSearch = '';
     tableSort = null;
     tableColumnSearches = {};
@@ -2628,7 +3310,13 @@ export class ListRecords extends Page {
         return {};
     }
     async resolveActionRecord(context) {
-        return typeof context.recordKey === 'string' ? ((await this.resource.adapter.find(context.recordKey)) ?? null) : null;
+        if (typeof context.recordKey !== 'string')
+            return null;
+        const adapter = this.resource.adapter;
+        // The trashed filter shows deleted records: their row actions must find them, no other key is reachable this way.
+        if (trashedFilterValue(this) !== null && adapter.findWithTrashed)
+            return (await adapter.findWithTrashed(context.recordKey)) ?? null;
+        return (await adapter.find(context.recordKey)) ?? null;
     }
     /**
      * Writes an editable cell. Everything comes from the browser: the column must exist and be editable and visible, the record
@@ -2814,6 +3502,19 @@ export class RelationManager extends ListRecords {
     static table(table) { return table; }
     static form(schema) { return schema; }
     static getTitle() { return this.title ?? ucfirst(this.relationship.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').toLowerCase()); }
+    /** Icon of the manager's tab. */
+    static icon = null;
+    static getIcon() { return this.icon; }
+    /** Badge of the manager's tab (a count of related records…), and its color. */
+    static badge = null;
+    static badgeColor = 'primary';
+    static getBadge(_ownerRecord, _pageClass) { return this.badge; }
+    static getBadgeColor() { return this.badgeColor; }
+    /**
+     * Whether the manager is shown for this record and page (all by default). Hide it here rather than by denying `viewAny`,
+     * which would forbid the whole page.
+     */
+    static canViewForRecord(_ownerRecord, _pageClass) { return true; }
     /** Owner record key: set on mount by the page, never writable from the browser. */
     ownerRecord = '';
     static locked = ['ownerRecord'];
@@ -2827,7 +3528,13 @@ export class RelationManager extends ListRecords {
             getPluralModelLabel: () => manager.pluralModelLabel ?? plural(manager.modelLabel),
             getTitleCasePluralModelLabel: () => (manager.pluralModelLabel ?? plural(manager.modelLabel)).split(' ').map(ucfirst).join(' '),
             getRecordTitle: (record) => (manager.recordTitleAttribute ? String(record?.[manager.recordTitleAttribute] ?? '') : manager.modelLabel),
-            table: (table) => manager.table(table), form: (schema) => manager.form(schema.columns(2)), getUrl: () => '',
+            table: (table) => manager.table(table), getUrl: () => '',
+            form: (schema) => {
+                const form = manager.form(schema.columns(2));
+                const pivot = manager.pivotForm(form);
+                return pivot.length ? form.components([...form.getComponents(), ...pivot]) : form;
+            },
+            pivotFieldNames: () => manager.pivotForm(Schema.make(this)).filter((component) => component instanceof Field).map((field) => field.getName()),
         });
     }
     getTable() {
@@ -2838,8 +3545,16 @@ export class RelationManager extends ListRecords {
         return hasEdit ? table.recordAction('edit') : table;
     }
     // --- many-to-many: to be defined by managers offering Attach / Detach
-    /** Attaches an existing record to the owner. */
-    static attach(_ownerKey, _recordKey) { throw new Error('RelationManager.attach() must be defined.'); }
+    /** Attaches an existing record to the owner; `pivot` holds the values of the `pivotForm()` fields. */
+    static attach(_ownerKey, _recordKey, _pivot = {}) { throw new Error('RelationManager.attach() must be defined.'); }
+    /**
+     * Fields stored on the pivot table (a role, a quantity…): added to the attach modal and to the edit form of a row.
+     * Their values go to `attach()` and `updatePivot()`, never to the related record. List the pivot columns in the
+     * relation's query (`adapterFor()`) so that the table and the edit form can read them.
+     */
+    static pivotForm(_schema) { return []; }
+    /** Saves the pivot fields of an attached record (edit form of a row). */
+    static updatePivot(_ownerKey, _recordKey, _pivot) { throw new Error('RelationManager.updatePivot() must be defined when pivotForm() returns fields.'); }
     /** Detaches records from the owner without deleting them. */
     static detach(_ownerKey, _recordKeys) { throw new Error('RelationManager.detach() must be defined.'); }
     /** Attachable records matching the search: [key, label]. */
@@ -2986,6 +3701,34 @@ class ResourceFormPage extends Page {
     }
     static resource;
     data = {};
+    /** Hash of the form data as last saved: the browser compares it with the current data (unsaved changes alert). */
+    savedDataHash = '';
+    static locked = ['savedDataHash'];
+    /** `true` / `false` overrides the panel's `databaseTransactions()` for this page. */
+    static hasDatabaseTransactions = null;
+    /** `true` / `false` overrides the panel's `unsavedChangesAlerts()` for this page. */
+    static hasUnsavedDataChangesAlert = null;
+    hasDatabaseTransactions() { return this.constructor.hasDatabaseTransactions ?? this.panel.hasDatabaseTransactions(); }
+    hasUnsavedDataChangesAlert() { return this.constructor.hasUnsavedDataChangesAlert ?? this.panel.hasUnsavedChangesAlerts(); }
+    /** Runs `fn` in a database transaction of the resource's adapter, when the page uses them. */
+    wrapInDatabaseTransaction(fn) {
+        const adapter = this.getDataAdapter();
+        return this.hasDatabaseTransactions() && typeof adapter.transaction === 'function' ? adapter.transaction(fn) : fn();
+    }
+    /** Remembers the form data as saved: leaving the page with other data asks for confirmation. */
+    rememberData() {
+        if (!this.hasUnsavedDataChangesAlert())
+            return;
+        this.savedDataHash = createHash('md5').update(JSON.stringify(this.data).replace(/\\/g, '')).digest('hex');
+    }
+    async render() {
+        if (this.hasUnsavedDataChangesAlert()) {
+            this.addScript('unsaved-data-changes-alert', this.panel.hasSpaMode()
+                ? `setUpFilamentSpaModeUnsavedDataChangesAlert({ body: ${js(t('filament-panels::unsaved-changes-alert.body'))}, resolveLivewireComponentUsing: () => window.Livewire.find(${js(this.id)}), $wire })`
+                : 'setUpFilamentUnsavedDataChangesAlert({ $wire })');
+        }
+        return super.render();
+    }
     get resource() { return this.constructor.resource; }
     getDataAdapter() { return this.resource.adapter; }
     getRecordKey() { return null; }
@@ -3051,7 +3794,7 @@ class ResourceFormPage extends Page {
 /** Record creation page. */
 export class CreateRecord extends ResourceFormPage {
     static callable = ['create', 'createAnother'];
-    async mount() { await this.beforeFill(); fillSchema(this.getSchema('form'), this.data); await this.afterFill(); }
+    async mount() { await this.beforeFill(); fillSchema(this.getSchema('form'), this.data); await this.afterFill(); this.rememberData(); }
     getOperation() { return 'create'; }
     getSubmitMethod() { return 'create'; }
     getTitle() { return t('filament-panels::resources/pages/create-record.title', { label: this.resource.modelLabel.split(' ').map(ucfirst).join(' ') }); }
@@ -3083,16 +3826,21 @@ export class CreateRecord extends ResourceFormPage {
         if (!(await this.validateForm()))
             return;
         const data = await this.mutateFormDataBeforeCreate(await getSchemaState(this.getSchema('form')));
-        await this.beforeCreate(data);
-        const record = await this.handleRecordCreation(data);
-        await saveSchemaRelationships(this.getSchema('form'), record);
-        await this.afterCreate(record);
+        const record = await this.wrapInDatabaseTransaction(async () => {
+            await this.beforeCreate(data);
+            const created = await this.handleRecordCreation(data);
+            await saveSchemaRelationships(this.getSchema('form'), created);
+            await this.afterCreate(created);
+            return created;
+        });
+        this.rememberData();
         const title = this.getCreatedNotificationTitle();
         if (title !== null)
             Notification.make().success().title(title).send();
         if (another === true) {
             this.data = {};
             fillSchema(this.getSchema('form'), this.data);
+            this.rememberData();
             return;
         }
         this.redirect(this.getRedirectUrl(record), true);
@@ -3200,7 +3948,14 @@ export class EditAction {
             .fillForm(({ record }) => ({ ...record }))
             .action(async (ctx) => {
             const adapter = of(ctx.livewire).adapter;
-            const saved = await adapter.update(adapter.getKey(ctx.record), ctx.data);
+            const pivotNames = of(ctx.livewire).pivotFieldNames?.() ?? [];
+            let data = ctx.data;
+            if (pivotNames.length) {
+                const pivot = Object.fromEntries(Object.entries(data ?? {}).filter(([name]) => pivotNames.includes(name)));
+                data = Object.fromEntries(Object.entries(data ?? {}).filter(([name]) => !pivotNames.includes(name)));
+                await managerOf(ctx.livewire).updatePivot(ctx.livewire.ownerRecord, adapter.getKey(ctx.record), pivot);
+            }
+            const saved = Object.keys(data ?? {}).length ? await adapter.update(adapter.getKey(ctx.record), data) : ctx.record;
             await saveSchemaRelationships(ctx.schema, saved ?? ctx.record);
             await finishAction(ctx.action, ctx, t('filament-actions::edit.single.notifications.saved.title'));
         });
@@ -3232,10 +3987,12 @@ export class AttachAction {
             const livewire = schema.livewire;
             return [Select.make('recordId').label(t('filament-actions::attach.single.modal.fields.record_id.label')).hiddenLabel().required()
                     .getSearchResultsUsing((search) => managerOf(livewire).searchAttachable(livewire.ownerRecord, search))
-                    .getOptionLabelUsing((value) => managerOf(livewire).attachableLabel(livewire.ownerRecord, value))];
+                    .getOptionLabelUsing((value) => managerOf(livewire).attachableLabel(livewire.ownerRecord, value)),
+                ...managerOf(livewire).pivotForm(schema)];
         })
             .action(async ({ livewire, data }) => {
-            await managerOf(livewire).attach(livewire.ownerRecord, String(data.recordId));
+            const { recordId, ...pivot } = data ?? {};
+            await managerOf(livewire).attach(livewire.ownerRecord, String(recordId), pivot);
             Notification.make().success().title(t('filament-actions::attach.single.notifications.attached.title')).send();
         });
     }
@@ -3321,17 +4078,25 @@ export class DissociateBulkAction {
     }
 }
 /** Restores a soft-deleted record. Only visible when the record is deleted. */
+/** Restores a soft-deleted record: the page's record, or a table row. Only visible when the record is deleted. */
 export class RestoreAction {
     static make() {
-        return Action.make('restore').authorize(({ livewire, record }) => canOn(livewire, 'restore', record))
-            .label(t('filament-actions::restore.single.label')).color('gray')
+        return Action.make('restore').authorize(({ livewire, record }) => canOn(livewire, 'restore', record ?? livewire._record))
+            .label(t('filament-actions::restore.single.label')).color('gray').tableIcon('c-arrow-uturn-left').groupedIcon('m-arrow-uturn-left')
             .requiresConfirmation().modalIcon('o-arrow-uturn-left')
-            .hidden(({ livewire }) => !livewire.getDataAdapter().isTrashed(livewire._record))
-            .modalHeading(({ livewire }) => t('filament-actions::restore.single.modal.heading', { label: livewire.resource.getRecordTitle(livewire._record) }))
+            .hidden(({ livewire, record }) => { const target = record ?? livewire._record; return !target || !livewire.getDataAdapter().isTrashed(target); })
+            .modalHeading(({ livewire, record }) => t('filament-actions::restore.single.modal.heading', { label: livewire.resource.getRecordTitle(record ?? livewire._record) }))
             .modalSubmitActionLabel(t('filament-actions::restore.single.modal.actions.restore.label'))
             .action(async (ctx) => {
-            await ctx.livewire.getDataAdapter().restore(ctx.livewire.recordKey);
-            await ctx.livewire.hydrate();
+            const { livewire, record } = ctx;
+            const adapter = livewire.getDataAdapter();
+            if (typeof livewire.getTable === 'function') {
+                await adapter.restore(adapter.getKey(record));
+            }
+            else {
+                await adapter.restore(livewire.recordKey);
+                await livewire.hydrate();
+            }
             await finishAction(ctx.action, ctx, t('filament-actions::restore.single.notifications.restored.title'));
         });
     }
@@ -3339,15 +4104,18 @@ export class RestoreAction {
 /** Permanently deletes a soft-deleted record. Only visible when the record is deleted. */
 export class ForceDeleteAction {
     static make() {
-        return Action.make('forceDelete').authorize(({ livewire, record }) => canOn(livewire, 'forceDelete', record))
-            .label(t('filament-actions::force-delete.single.label')).color('danger')
+        return Action.make('forceDelete').authorize(({ livewire, record }) => canOn(livewire, 'forceDelete', record ?? livewire._record))
+            .label(t('filament-actions::force-delete.single.label')).color('danger').tableIcon('c-trash').groupedIcon('m-trash')
             .requiresConfirmation().modalIcon('o-trash')
-            .hidden(({ livewire }) => !livewire.getDataAdapter().isTrashed(livewire._record))
-            .modalHeading(({ livewire }) => t('filament-actions::force-delete.single.modal.heading', { label: livewire.resource.getRecordTitle(livewire._record) }))
+            .hidden(({ livewire, record }) => { const target = record ?? livewire._record; return !target || !livewire.getDataAdapter().isTrashed(target); })
+            .modalHeading(({ livewire, record }) => t('filament-actions::force-delete.single.modal.heading', { label: livewire.resource.getRecordTitle(record ?? livewire._record) }))
             .modalSubmitActionLabel(t('filament-actions::force-delete.single.modal.actions.delete.label'))
             .action(async (ctx) => {
-            await ctx.livewire.getDataAdapter().forceDelete(ctx.livewire.recordKey);
-            await finishAction(ctx.action, ctx, t('filament-actions::force-delete.single.notifications.deleted.title'), ctx.livewire.resource.getUrl());
+            const { livewire, record } = ctx;
+            const adapter = livewire.getDataAdapter();
+            const inTable = typeof livewire.getTable === 'function';
+            await adapter.forceDelete(inTable ? adapter.getKey(record) : livewire.recordKey);
+            await finishAction(ctx.action, ctx, t('filament-actions::force-delete.single.notifications.deleted.title'), inTable ? null : livewire.resource.getUrl());
         });
     }
 }
@@ -3444,21 +4212,66 @@ export class EditRecord extends ResourceFormPage {
      */
     previousUrl = '';
     getCancelUrl() { return this.previousUrl; }
+    /** Relation managers of this page: the resource's by default (`static relationManagers` on the page replaces them). */
+    getRelationManagers() { return this.constructor.relationManagers ?? this.resource.getRelations(); }
+    /** `true`: the form becomes the first tab, next to the relation managers. */
+    hasCombinedRelationManagerTabsWithContent() { return false; }
+    getContentTabLabel() { return t('filament-panels::resources/pages/edit-record.content.tab.label'); }
+    getContentTabIcon() { return null; }
+    withRelationManagers(content) {
+        const components = content.getComponents();
+        if (!this.getRelationManagers().length)
+            return content.components([...components, new RelationManagerTabs().key(null).hidden()]);
+        if (this.hasCombinedRelationManagerTabsWithContent())
+            return content.components([new RelationManagerTabs(components)]);
+        return content.components([...components, new RelationManagerTabs()]);
+    }
     contentSchema(schema) {
-        const content = super.contentSchema(schema);
-        // Always present: hidden (empty column) when the resource has no relation manager.
-        return content.components([...content.getComponents(), this.resource.relations.length ? new RelationManagerTabs() : new RelationManagerTabs().key(null).hidden()]);
+        // The tabs are always present: hidden (empty column) when the page has no relation manager.
+        return this.withRelationManagers(super.contentSchema(schema));
+    }
+    /**
+     * Saves the fields of one component of the form (a section with its own "Save" action), after validating them only:
+     * `livewire.saveFormComponentOnly('contact')` (the component's `key()`, or the component).
+     */
+    async saveFormComponentOnly(component, notificationTitle = null) {
+        const form = this.getSchema('form');
+        const wanted = typeof component === 'string' ? component : component.getKey();
+        const target = (await form.getVisibleFlatComponents()).find((candidate) => { const key = candidate.getKey(); return key !== null && wanted !== null && (key === wanted || key.endsWith(`.${wanted}`)); });
+        const part = target?.getChildSchemas()[0];
+        if (!part)
+            throw new Error(`saveFormComponentOnly(): no component ${String(wanted)} with fields in the form.`);
+        const errors = await validateSchema(part);
+        if (Object.keys(errors).length) {
+            this._errors = errors;
+            this.dispatch('form-validation-error', { livewireId: this.id });
+            return;
+        }
+        this._errors = {};
+        const data = await this.mutateFormDataBeforeSave(await getSchemaState(part));
+        this._record = await this.wrapInDatabaseTransaction(async () => {
+            const record = await this.handleRecordUpdate(this._record, data);
+            await saveSchemaRelationships(part, record);
+            return record;
+        });
+        const title = notificationTitle ?? this.getSavedNotificationTitle();
+        if (title !== null)
+            Notification.make().success().title(title).send();
     }
     static locked = ['recordKey', 'previousUrl'];
     _record = null;
     async mount(params) {
         this.recordKey = String(params.record ?? '');
         this.previousUrl = previousUrlOf(this._ctx?.req);
+        // Combined tabs: the form's tab is open first.
+        if (this.hasCombinedRelationManagerTabsWithContent())
+            this.activeRelationManager = '-1';
         await this.hydrate();
         await this.beforeFill();
         fillSchemaFromRecord(this.getSchema('form'), this.data, await this.mutateFormDataBeforeFill({ ...this._record }));
         await loadSchemaRelationships(this.getSchema('form'), this.data, this._record);
         await this.afterFill();
+        this.rememberData();
     }
     /** The record is reloaded on every request (no route model binding). */
     async hydrate() {
@@ -3513,10 +4326,14 @@ export class EditRecord extends ResourceFormPage {
         if (!(await this.validateForm()))
             return;
         const data = await this.mutateFormDataBeforeSave(await getSchemaState(this.getSchema('form')));
-        await this.beforeSave(data);
-        this._record = await this.handleRecordUpdate(this._record, data);
-        await saveSchemaRelationships(this.getSchema('form'), this._record);
-        await this.afterSave(this._record);
+        this._record = await this.wrapInDatabaseTransaction(async () => {
+            await this.beforeSave(data);
+            const record = await this.handleRecordUpdate(this._record, data);
+            await saveSchemaRelationships(this.getSchema('form'), record);
+            await this.afterSave(record);
+            return record;
+        });
+        this.rememberData();
         const title = this.getSavedNotificationTitle();
         if (title !== null)
             Notification.make().success().title(title).send();
@@ -3537,6 +4354,8 @@ export class ViewRecord extends Page {
     getDataAdapter() { return this.resource.adapter; }
     async mount(params) {
         this.recordKey = String(params.record ?? '');
+        if (this.hasCombinedRelationManagerTabsWithContent())
+            this.activeRelationManager = '-1';
         await this.hydrate();
     }
     /** The record is reloaded on every request, as on the edit page. */
@@ -3551,10 +4370,22 @@ export class ViewRecord extends Page {
     getActionMountContext() { return { recordKey: this.recordKey }; }
     getActionRecord() { return this._record; }
     infolistSchema(schema) { return this.resource.infolist(schema.columns(2).operation('view').record(this._record)); }
+    /** Relation managers of this page: the resource's by default (`static relationManagers` on the page replaces them). */
+    getRelationManagers() { return this.constructor.relationManagers ?? this.resource.getRelations(); }
+    /** `true`: the infolist becomes the first tab, next to the relation managers. */
+    hasCombinedRelationManagerTabsWithContent() { return false; }
+    getContentTabLabel() { return t('filament-panels::resources/pages/view-record.content.tab.label'); }
+    getContentTabIcon() { return null; }
+    withRelationManagers(content) {
+        const components = content.getComponents();
+        if (!this.getRelationManagers().length)
+            return content.components([...components, new RelationManagerTabs().key(null).hidden()]);
+        if (this.hasCombinedRelationManagerTabsWithContent())
+            return content.components([new RelationManagerTabs(components)]);
+        return content.components([...components, new RelationManagerTabs()]);
+    }
     contentSchema(schema) {
-        const content = schema.components([EmbeddedSchema.make('infolist')]);
-        // Always present: hidden (empty column) when the resource has no relation manager.
-        return content.components([...content.getComponents(), this.resource.relations.length ? new RelationManagerTabs() : new RelationManagerTabs().key(null).hidden()]);
+        return this.withRelationManagers(schema.components([EmbeddedSchema.make('infolist')]));
     }
     /** Defaults to a link to the edit page. */
     getHeaderActions() { return [this.editAction()]; }
@@ -3599,7 +4430,40 @@ async function renderUserMenu(component, position) {
         hasThemeSwitcher: panel.hasDarkMode() && !panel.hasDarkModeForced(), defaultThemeMode: panel.getDefaultThemeMode(),
     });
 }
-/** Tenant menu: current tenant, other tenants, registration, profile. */
+/**
+ * Answers with the panel's error page for a status (404, 403, 500…): the cable car in trouble, in the request's theme.
+ * Requests that do not accept HTML get plain text. Use it in your own middleware, a maintenance mode answering 503 for example.
+ */
+export function renderErrorPage(panel, req, res, status, options = {}) {
+    res.status(status);
+    if (!req.accepts('html'))
+        return void res.type('text').send(`${status}`);
+    const scene = errorPageScene(status);
+    const text = (name) => t(`filament-panels::errors.${scene}.${name}`);
+    // Inside the request's theme: the buttons' color classes depend on its palette.
+    const html = panel.withTheme(req, () => {
+        const home = uiButton({ tag: 'a', href: panel.getBaseUrl(), icon: 'm-home', color: 'primary' }, t('filament-panels::errors.actions.home'));
+        const homeGray = uiButton({ tag: 'a', href: panel.getBaseUrl(), icon: 'm-home', color: 'gray' }, t('filament-panels::errors.actions.home'));
+        const back = uiButton({ icon: 'm-arrow-left', color: 'gray', attributes: { onclick: 'history.back()' } }, t('filament-panels::errors.actions.back'));
+        const retry = uiButton({ tag: 'a', href: req.method === 'GET' ? req.originalUrl : panel.getBaseUrl(), icon: 'm-arrow-path', color: 'primary' }, t('filament-panels::errors.actions.retry'));
+        const login = panel.getLoginPage() ? uiButton({ tag: 'a', href: panel.getLoginUrl(), icon: 'm-arrow-right-end-on-rectangle', color: 'primary' }, t('filament-panels::errors.actions.login')) : home;
+        const actions = scene === 401 ? (panel.getLoginPage() ? [login, homeGray] : [home]) : scene === 403 || scene === 404 ? [home, back] : scene === 503 ? [retry] : [retry, homeGray];
+        const badgeColor = scene >= 500 ? 'danger' : scene === 419 || scene === 429 ? 'warning' : 'gray';
+        const label = t('filament-panels::errors.label', { code: status });
+        const error = options.error instanceof Error ? options.error : null;
+        const theme = panel.resolveTheme(req);
+        return views.render('filament-panels::errors.page', {
+            status, locale: getLocale(), title: text('title'), heading: text('title'), description: options.description ?? text('description'),
+            illustration: errorIllustration(status, `${label}: ${text('title')}`), badge: uiBadge({ color: badgeColor, size: 'lg' }, e(label)), actions, css: ERROR_PAGE_CSS,
+            // The stack only helps while developing: never shown otherwise.
+            details: error && process.env.NODE_ENV === 'development' ? (error.stack ?? String(error)) : null,
+            brandName: panel.getBrandName(), favicon: panel.getFavicon(), theme: panel.getTheme(), panelId: panel.getId(),
+            font: theme?.font ? { ...panel.getFont(), ...fontOf(theme.font) } : panel.getFont(), themeCss: theme?.css ?? '', colorVariables: panel.colors.renderCssVariables(),
+            darkMode: panel.hasDarkMode(), darkModeForced: panel.hasDarkModeForced(), defaultThemeMode: panel.getDefaultThemeMode(),
+        });
+    });
+    res.type('html').send(html);
+}
 async function renderTenantMenu(component, options) {
     const { panel, user } = component._ctx;
     const tenant = panel.getTenant();
@@ -3612,6 +4476,9 @@ async function renderTenantMenu(component, options) {
     const ProfilePage = panel.getTenantProfilePage();
     if (ProfilePage && provider.update && !custom.profile)
         items.push(Action.make('profile').label(ProfilePage.getLabel()).icon('m-cog-6-tooth').url(panel.getUrl(ProfilePage.slug)).color('gray').sort(-1));
+    const billingUrl = panel.getTenantBillingUrl(tenant);
+    if (billingUrl && !custom.billing)
+        items.push(Action.make('billing').label(t('filament-panels::layout.actions.billing.label')).icon('m-credit-card').url(billingUrl).color('gray').sort(-1));
     const RegistrationPage = panel.getTenantRegistrationPage();
     if (RegistrationPage && !custom.register && (await RegistrationPage.canView(panel, user)))
         items.push(Action.make('register').label(RegistrationPage.getLabel()).icon('m-plus').url(panel.getBaseUrl(RegistrationPage.slug)).color('gray').sort(Number.MAX_SAFE_INTEGER));
@@ -3630,6 +4497,7 @@ async function renderTenantMenu(component, options) {
         itemsBefore: canSwitch ? await html(visible.filter((item) => item.getSort() < 0)) : [],
         itemsAfter: await html(canSwitch ? visible.filter((item) => item.getSort() >= 0) : visible),
         switchable: others.map((other) => ({ name: provider.getName(other), url: panel.getUrl('', other), avatarUrl: panel.getTenantAvatarUrl(other) })),
+        isSearchable: canSwitch && (panel.isTenantMenuSearchable() ?? others.length >= 10),
     });
 }
 /** Sidebar: logo, tenant menu, search, navigation and, without a topbar, the bell and user menu. */
@@ -3641,9 +4509,9 @@ export class Sidebar extends Component {
     /** A resource item stays active on its create and edit pages. */
     async render() {
         const { panel, user } = this._ctx;
-        if (!user)
+        if (!user && !panel.allowsGuests())
             return '<div></div>';
-        const inSidebar = (position) => position === 'sidebar';
+        const inSidebar = (position) => position === 'sidebar' && user !== null;
         return views.render('filament-panels::livewire.sidebar', {
             hasTopbar: panel.hasTopbar(), hasTopNavigation: panel.hasTopNavigation(), spa: panel.hasSpaMode(),
             isSidebarCollapsibleOnDesktop: panel.isSidebarCollapsibleOnDesktop(), isSidebarFullyCollapsibleOnDesktop: panel.isSidebarFullyCollapsibleOnDesktop(),
@@ -3678,9 +4546,9 @@ export class Topbar extends Component {
     mount(params) { this.currentPath = String(params.path ?? '/'); }
     async render() {
         const { panel, user } = this._ctx;
-        if (!user)
+        if (!user && !panel.allowsGuests())
             return '<div></div>';
-        const inTopbar = (position) => position === 'topbar';
+        const inTopbar = (position) => position === 'topbar' && user !== null;
         const hasNavigation = panel.hasNavigation();
         const showsNavigationHere = panel.hasTopNavigation() || !hasNavigation;
         const tenant = panel.getTenant();
@@ -3689,7 +4557,7 @@ export class Topbar extends Component {
             hasNavigation, spa: panel.hasSpaMode(), isSidebarCollapsibleOnDesktop: panel.isSidebarCollapsibleOnDesktop(), isSidebarFullyCollapsibleOnDesktop: panel.isSidebarFullyCollapsibleOnDesktop(),
             homeUrl: panel.getUrl(), brand: panel.getBrand(), livewireId: this.id,
             tenantMenu: showsNavigationHere ? (await renderTenantMenu(this, { teleport: true })) || null : null,
-            topNavigation: groups?.map((group) => ({ ...group, items: group.items.map((item) => ({ ...item, colorClasses: item.isActive ? sharedColors.getComponentClasses('dropdown-item', 'primary') : [] })) })) ?? null,
+            topNavigation: groups?.map((group) => topNavigationGroup(group)) ?? null,
             persistKey: panel.hasTenancy() ? `topbar.end.panel-${panel.getId()}.tenant-${tenant ? panel.getTenantUrlKey(tenant) : ''}` : `topbar.end.panel-${panel.getId()}`,
             globalSearch: panel.hasGlobalSearch() && inTopbar(panel.getGlobalSearchPosition()) ? await this.mountChild(`navette.${panel.getId()}.global-search`, {}, `${this.id}.global-search`) : null,
             databaseNotifications: panel.getDatabaseNotifications() && inTopbar(panel.getDatabaseNotificationsPosition()) ? await this.mountChild(`navette.${panel.getId()}.database-notifications`, {}, `${this.id}.database-notifications`, { lazy: true }) : null,
@@ -3758,7 +4626,7 @@ export async function discoverPanels(directory) {
 /** A runtime serves a single panel: each panel has its own Livewire endpoint and components. */
 const runtimePanels = new WeakMap();
 /** Reserved segments right after a multi-tenant panel's path (they are not tenant keys). */
-const RESERVED_SEGMENTS = new Set(['login', 'logout', 'register', 'password-reset', 'email-verification', 'profile', 'livewire']);
+const RESERVED_SEGMENTS = new Set(['login', 'logout', 'register', 'password-reset', 'email-verification', 'multi-factor-authentication', 'profile', 'livewire']);
 /** Express router for a panel: assets, runtime endpoint, authentication, tenants, protected pages. */
 /** Panels sharing an auth guard: same key and same auth provider, otherwise a user id of one could be read as a user of the other. */
 const guardOwners = new Map();
@@ -3790,6 +4658,8 @@ export function panelRouter(panel, runtime) {
     useFormsColorManager(sharedColors);
     useTableColorManager(sharedColors);
     useInfolistsColorManager(sharedColors);
+    // View components (<x-badge>, <x-button>…) use the same colors.
+    useUiColorManager(sharedColors);
     // HTML rendered by an infolist entry is sanitized through the rich editor schema, which only keeps its own tags.
     useHtmlSanitizer((html) => richDocumentToHtml(richHtmlToDocument(html)) ?? '');
     views.share({ assetUrl: (file) => panel.assetUrl(file) });
@@ -3818,34 +4688,27 @@ export function panelRouter(panel, runtime) {
         const denied = user !== null && !(await panel.userCanAccess(user));
         return { req, res, panel, user: denied ? null : user, denied, mailbox: csrfToken(req, res), tenant: null };
     };
-    const forbidden = (res) => void res.status(403).send('Forbidden');
-    /** Tenant designated by a panel URL, if the user is a member. */
-    const tenantFromPath = async (path, user) => {
+    const forbidden = (req, res) => renderErrorPage(panel, req, res, 403);
+    /** Tenant designated by a panel URL (or its host, with `tenantDomain()`), if the user is a member. */
+    const tenantFromPath = async (path, user, hostname = '') => {
         if (!panel.hasTenancy() || !user)
             return null;
-        const base = panel.getBaseUrl();
-        const prefix = base === '/' ? '/' : `${base}/`;
-        if (!path.startsWith(prefix))
-            return null;
-        let key;
-        try {
-            key = decodeURIComponent(path.slice(prefix.length).split('/')[0] ?? '');
-        }
-        catch {
-            return null;
-        }
-        const registration = panel.getTenantRegistrationPage();
-        if (!key || panel.getReservedSegments().has(key) || key === registration?.slug || key.length > 200)
+        const key = panel.getTenantKeyFromRequest(path, hostname);
+        if (key === null)
             return null;
         const provider = panel.getTenantProvider();
         const tenant = await provider.find(key);
         return tenant && (await provider.canAccess(user, tenant)) ? tenant : null;
     };
-    /** User's home: the panel root or, in a multi-tenant panel, their first tenant's root (otherwise tenant registration). */
+    /** User's home: the panel root or, in a multi-tenant panel, their default tenant's root, their first one's, or tenant registration. */
     const homeUrl = async (user) => {
         if (!panel.hasTenancy())
             return panel.getUrl();
-        const [first] = await panel.getTenantProvider().getTenants(user);
+        const provider = panel.getTenantProvider();
+        const preferred = (await provider.getDefaultTenant?.(user)) ?? null;
+        if (preferred && (await provider.canAccess(user, preferred)))
+            return panel.getUrl('', preferred);
+        const [first] = await provider.getTenants(user);
         if (first)
             return panel.getUrl('', first);
         const registration = panel.getTenantRegistrationPage();
@@ -3868,6 +4731,9 @@ export function panelRouter(panel, runtime) {
     const profile = panel.getProfile();
     if (profile)
         runtime.register(name('auth.profile'), profile.page);
+    const MultiFactorSetUpPage = panel.getSetUpRequiredMultiFactorAuthenticationPage();
+    if (MultiFactorSetUpPage)
+        runtime.register(name('auth.multi-factor-authentication.set-up-required'), MultiFactorSetUpPage);
     const TenantRegistration = panel.getTenantRegistrationPage();
     if (TenantRegistration)
         runtime.register(name('tenancy.registration'), TenantRegistration);
@@ -3885,12 +4751,31 @@ export function panelRouter(panel, runtime) {
     for (const resource of panel.getResources())
         for (const [index, widget] of resource.widgets.entries())
             runtime.register(name(`widgets.${resource.slug.replace(/\//g, '.')}.${index}`), widget);
-    for (const resource of panel.getResources())
-        for (const manager of resource.relations)
+    for (const resource of panel.getResources()) {
+        const managers = new Set();
+        const add = (entries) => { for (const entry of entries ?? [])
+            for (const manager of entry instanceof RelationGroup ? entry.getManagers() : [entry])
+                managers.add(manager); };
+        add(resource.getRelations());
+        for (const page of Object.values(resource.getPages()))
+            add(page.relationManagers);
+        for (const manager of managers)
             runtime.register(name(`relation-managers.${resource.slug.replace(/\//g, '.')}.${manager.relationship}`), manager);
+    }
+    // A panel on its own domains: other hosts go to the next routes (another panel, the application).
+    const domains = panel.getDomains();
+    if (domains.length)
+        router.use((req, _res, next) => next(domains.includes(req.hostname) ? undefined : 'router'));
     router.use(express.static(dir('../dist/filament'), { maxAge: '1y' }));
     // Navette's own front-end files.
     router.use(express.static(dir('../dist/navette')));
+    // `bootUsing()`: before every request of the panel (its pages, their updates).
+    const panelBase = panel.getBaseUrl();
+    const belongsToPanel = (path) => panelBase === '/' || path === panelBase || path.startsWith(`${panelBase}/`) || path.startsWith(`${livewire}/`);
+    router.use((req, _res, next) => { if (!belongsToPanel(req.path))
+        return next(); panel.boot(req).then(() => next(), next); });
+    // SPA prefetching: links load their page as soon as they are hovered.
+    const prefetch = (html) => (panel.hasSpaPrefetching() ? html.replace(/ wire:navigate(?=[\s>/])/g, ' wire:navigate.hover') : html);
     // An update's tenant is the one of the page sending it (from the signed snapshot URL), if the user is a member.
     const wireContext = async (req, res) => {
         const ctx = await context(req, res);
@@ -3901,12 +4786,21 @@ export function panelRouter(panel, runtime) {
         catch {
             path = '';
         }
-        ctx.tenant = await tenantFromPath(path, ctx.user);
+        ctx.tenant = await tenantFromPath(path, ctx.user, req.hostname);
         return ctx;
     };
     // Notifications sent during the request go into a batch announced to the browser.
     router.use(wireRouter(runtime, livewire, wireContext, async (ctx, _req, res, handle) => {
         const { result, pending } = await runInRequest(ctx.mailbox, () => panel.withTheme(ctx.req, () => panel.withTenant(ctx.tenant ?? null, handle)));
+        if (panel.hasSpaPrefetching()) {
+            for (const component of result.components) {
+                if (typeof component.effects.html === 'string')
+                    component.effects.html = prefetch(component.effects.html);
+                for (const [key, html] of Object.entries(component.effects.partials ?? {}))
+                    if (typeof html === 'string')
+                        component.effects.partials[key] = prefetch(html);
+            }
+        }
         if (pending.length) {
             const batch = publish(ctx.mailbox, pending);
             result.filamentNotificationBatch = batch;
@@ -3947,12 +4841,12 @@ export function panelRouter(panel, runtime) {
                 sidebar: hasNavigation ? (await runtime.mount(name('sidebar'), { path: req.path }, request)).replace(/^s*<div /, '<div wire:key="lw-1-1-1" ') : '',
             });
         const bodyClass = options.layout === 'index' ? cls([{ 'fi-body-has-navigation': hasNavigation, 'fi-body-has-sidebar-collapsible-on-desktop': panel.isSidebarCollapsibleOnDesktop(), 'fi-body-has-sidebar-fully-collapsible-on-desktop': panel.isSidebarFullyCollapsibleOnDesktop(), 'fi-body-has-topbar': panel.hasTopbar(), 'fi-body-has-top-navigation': panel.hasTopNavigation() }]) || null : null;
-        res.send(views.render('filament-panels::layout.base', {
-            renderHookScopes, title: options.title, brandName: panel.getBrandName(), favicon: panel.getFavicon(), theme: panel.getTheme(), motion: panel.hasMotion(), panelId: panel.getId(), font: panel.resolveTheme(req)?.font ? { ...panel.getFont(), ...fontOf(panel.resolveTheme(req).font) } : panel.getFont(), themeCss: panel.resolveTheme(req)?.css ?? '',
+        res.send(prefetch(views.render('filament-panels::layout.base', {
+            renderHookScopes, title: options.title, brandName: panel.getBrandName(), favicon: panel.getFavicon(), theme: panel.getTheme(), motion: panel.hasMotion(), securityKeys: panel.usesSecurityKeys(), panelId: panel.getId(), font: panel.resolveTheme(req)?.font ? { ...panel.getFont(), ...fontOf(panel.resolveTheme(req).font) } : panel.getFont(), themeCss: panel.resolveTheme(req)?.css ?? '',
             bodyClass, body, spa: panel.hasSpaMode(), darkMode: panel.hasDarkMode(), darkModeForced: panel.hasDarkModeForced(), defaultThemeMode: panel.getDefaultThemeMode(),
             csrf: csrfToken(req, res), colorVariables: panel.colors.renderCssVariables(), wireStyles: wireStyles(), wireScripts: wireScripts(req, res, livewire),
             notifications: (await runtime.mount('navette.notifications', {}, request)).replace(/^<div /, '<div wire:key="lw-1-0-0" '),
-        }));
+        })));
     };
     /** Page access errors: 404 and 403 are answered directly, anything else is rethrown. */
     const guarded = async (res, render) => {
@@ -3960,10 +4854,8 @@ export function panelRouter(panel, runtime) {
             await render();
         }
         catch (error) {
-            if (error instanceof WireError && error.status === 404)
-                return void res.status(404).send('Not Found');
-            if (error instanceof WireError && error.status === 403)
-                return void res.status(403).send('Forbidden');
+            if (error instanceof WireError && (error.status === 404 || error.status === 403))
+                return renderErrorPage(panel, res.req, res, error.status);
             throw error;
         }
     };
@@ -3972,20 +4864,26 @@ export function panelRouter(panel, runtime) {
         router.get(panel.getBaseUrl(path), async (req, res) => {
             const ctx = await context(req, res);
             if (ctx.denied)
-                return forbidden(res);
+                return forbidden(req, res);
             if (ctx.user)
                 return res.redirect((await homeUrl(ctx.user)) ?? panel.getBaseUrl());
             await guarded(res, () => document(req, res, ctx, { title, component, layout: 'simple', params: params(req) }));
         });
     };
     /** Simple page for a signed-in user, outside any tenant (profile, email verification, tenant registration). */
-    const userPage = (path, component, title, layout = 'simple') => {
+    const userPage = (path, component, title, layout = 'simple', options = {}) => {
         router.get(panel.getBaseUrl(path), async (req, res) => {
             const ctx = await context(req, res);
             if (ctx.denied)
-                return forbidden(res);
+                return forbidden(req, res);
             if (!ctx.user)
                 return res.redirect(panel.getLoginUrl());
+            // Required multi-factor authentication: nothing but its setup page (and email verification) until it is set up.
+            if (!options.beforeMultiFactorSetUp && (await panel.mustSetUpMultiFactorAuthentication(ctx.user)))
+                return res.redirect(panel.getSetUpRequiredMultiFactorAuthenticationUrl());
+            // Full layout in a multi-tenant panel: the navigation links to the user's first tenant.
+            if (layout === 'index' && panel.hasTenancy())
+                ctx.tenant = (await panel.getTenantProvider().getTenants(ctx.user))[0] ?? null;
             await guarded(res, () => document(req, res, ctx, { title, component, layout }));
         });
     };
@@ -3993,10 +4891,10 @@ export function panelRouter(panel, runtime) {
     router.get(panel.getBaseUrl('downloads/:token'), async (req, res) => {
         const ctx = await context(req, res);
         if (!ctx.user || ctx.denied)
-            return forbidden(res);
+            return forbidden(req, res);
         const file = panel.getDownloads().get(String(req.params.token), ctx.user.id);
         if (!file)
-            return void res.status(404).send('Not Found');
+            return renderErrorPage(panel, req, res, 404);
         res.setHeader('Content-Type', file.type);
         res.setHeader('Content-Disposition', `attachment; filename="${file.name.replace(/[^A-Za-z0-9._-]/g, '_')}"`);
         res.setHeader('X-Content-Type-Options', 'nosniff');
@@ -4007,7 +4905,7 @@ export function panelRouter(panel, runtime) {
         guestPage(panel.getAuthPaths().login, name('auth.login'), t('filament-panels::auth/pages/login.title'));
         router.post(panel.getLogoutUrl(), express.urlencoded({ extended: false }), (req, res) => {
             if (!verifyCsrf(req, req.body?._token))
-                return res.status(419).send('Invalid CSRF token.');
+                return renderErrorPage(panel, req, res, 419);
             panel.logOut(res);
             res.redirect(panel.getLoginUrl());
         });
@@ -4019,34 +4917,86 @@ export function panelRouter(panel, runtime) {
         guestPage(panel.getAuthPaths().passwordReset, name('auth.password-reset.reset'), t('filament-panels::auth/pages/password-reset/reset-password.title'), (req) => ({ email: typeof req.query.email === 'string' ? req.query.email : null, token: typeof req.query.token === 'string' ? req.query.token : null }));
     }
     if (VerificationPrompt) {
-        userPage('email-verification/prompt', name('auth.email-verification.prompt'), t('filament-panels::auth/pages/email-verification/email-verification-prompt.title'));
+        userPage(panel.getAuthPaths().emailVerificationPrompt, name('auth.email-verification.prompt'), t('filament-panels::auth/pages/email-verification/email-verification-prompt.title'), 'simple', { beforeMultiFactorSetUp: true });
         // Emailed link: signed, time-limited, and only valid for the signed-in user it designates.
-        router.get(panel.getBaseUrl('email-verification/verify/:id/:hash'), async (req, res) => {
+        router.get(panel.getBaseUrl(`${panel.getAuthPaths().emailVerification}/:id/:hash`), async (req, res) => {
             const ctx = await context(req, res);
             if (ctx.denied)
-                return forbidden(res);
+                return forbidden(req, res);
             if (!ctx.user)
                 return res.redirect(panel.getLoginUrl());
             const id = String(req.params.id), hash = String(req.params.hash);
             const expected = createHash('sha1').update(ctx.user.email).digest('hex');
             if (String(ctx.user.id) !== id || hash !== expected || !panel.checkVerifyEmailUrl(id, hash, req.query.expires, req.query.signature))
-                return void res.status(403).send('Invalid signature.');
+                return renderErrorPage(panel, req, res, 403, { description: t('filament-panels::errors.403.invalid_link') });
             await panel.getAuth().markEmailAsVerified?.(ctx.user);
             res.redirect((await homeUrl(ctx.user)) ?? panel.getBaseUrl());
         });
     }
     if (profile)
-        userPage(profile.page.slug, name('auth.profile'), profile.page.getLabel(), profile.isSimple || panel.hasTenancy() ? 'simple' : 'index');
+        userPage(profile.page.slug, name('auth.profile'), profile.page.getLabel(), profile.isSimple ? 'simple' : 'index');
+    if (panel.hasEmailChangeVerification()) {
+        const flash = async (ctx, build) => { const { pending } = await runInRequest(ctx.mailbox, async () => build()); if (pending.length)
+            publish(ctx.mailbox, pending); };
+        const group = 'filament-panels::auth/http/controllers';
+        // Link sent to the new address: only for the signed-in user who asked, while the old address is still theirs.
+        router.get(panel.getBaseUrl(panel.getAuthPaths().emailChangeVerification), async (req, res) => {
+            const ctx = await context(req, res);
+            if (ctx.denied)
+                return forbidden(req, res);
+            if (!ctx.user)
+                return res.redirect(panel.getLoginUrl());
+            const payload = panel.readEmailChangeToken('verify', req.query.token);
+            if (!payload || String(payload.uid) !== String(ctx.user.id) || payload.from !== fingerprint(ctx.user.email))
+                return renderErrorPage(panel, req, res, 403, { description: t('filament-panels::errors.403.invalid_link') });
+            const store = getDefaultCacheStore();
+            if (await store.get(`navette:email-change:blocked:${payload.nonce}`))
+                return renderErrorPage(panel, req, res, 403, { description: t('filament-panels::errors.403.email_change_blocked') });
+            const auth = panel.getAuth();
+            const other = await auth.findByEmail?.(payload.email);
+            if (other && String(other.id) !== String(ctx.user.id)) {
+                await flash(ctx, () => Notification.make().danger().title(t(`${group}/email-change-verification-controller.notifications.unavailable.title`)).body(t(`${group}/email-change-verification-controller.notifications.unavailable.body`)).send());
+            }
+            else {
+                const updated = await auth.update(ctx.user, { email: payload.email });
+                // The new address was just proven by following the link.
+                await auth.markEmailAsVerified?.(updated);
+                await flash(ctx, () => Notification.make().success().title(t(`${group}/email-change-verification-controller.notifications.verified.title`)).body(t(`${group}/email-change-verification-controller.notifications.verified.body`, { email: payload.email })).send());
+            }
+            res.redirect(panel.getProfileUrl() ?? panel.getBaseUrl());
+        });
+        // Link sent to the old address: works without signing in, until the change is confirmed.
+        router.get(panel.getBaseUrl(panel.getAuthPaths().blockEmailChange), async (req, res) => {
+            const ctx = await context(req, res);
+            const payload = panel.readEmailChangeToken('block', req.query.token);
+            if (!payload)
+                return renderErrorPage(panel, req, res, 403, { description: t('filament-panels::errors.403.invalid_link') });
+            const user = await panel.getAuth().find(payload.uid);
+            if (!user)
+                return renderErrorPage(panel, req, res, 403, { description: t('filament-panels::errors.403.invalid_link') });
+            const changed = user.email === payload.email;
+            if (!changed)
+                await getDefaultCacheStore().put(`navette:email-change:blocked:${payload.nonce}`, true, 60 * 60 + 60);
+            await flash(ctx, () => (changed
+                ? Notification.make().danger().persistent().title(t(`${group}/block-email-change-verification-controller.notifications.failed.title`)).body(t(`${group}/block-email-change-verification-controller.notifications.failed.body`, { email: payload.email }))
+                : Notification.make().success().persistent().title(t(`${group}/block-email-change-verification-controller.notifications.blocked.title`)).body(t(`${group}/block-email-change-verification-controller.notifications.blocked.body`, { email: payload.email }))).send());
+            res.redirect(ctx.user ? (panel.getProfileUrl() ?? panel.getBaseUrl()) : panel.getLoginUrl());
+        });
+    }
     if (TenantRegistration)
         userPage(TenantRegistration.slug, name('tenancy.registration'), TenantRegistration.getLabel());
+    if (MultiFactorSetUpPage)
+        userPage(panel.getAuthPaths().setUpRequiredMultiFactor, name('auth.multi-factor-authentication.set-up-required'), t('filament-panels::auth/multi-factor/pages/set-up-required-multi-factor-authentication.title'), 'simple', { beforeMultiFactorSetUp: true });
     /** Context of a protected page: login, email verification, tenant. Returns `null` after responding. */
     const pageContext = async (req, res) => {
         const ctx = await context(req, res);
         if (ctx.denied) {
-            forbidden(res);
+            forbidden(req, res);
             return null;
         }
         if (!ctx.user) {
+            if (panel.allowsGuests())
+                return ctx;
             res.redirect(panel.getLoginUrl());
             return null;
         }
@@ -4054,64 +5004,125 @@ export function panelRouter(panel, runtime) {
             res.redirect(panel.getEmailVerificationPromptUrl());
             return null;
         }
+        if (await panel.mustSetUpMultiFactorAuthentication(ctx.user)) {
+            res.redirect(panel.getSetUpRequiredMultiFactorAuthenticationUrl());
+            return null;
+        }
         if (panel.hasTenancy()) {
-            ctx.tenant = await tenantFromPath(req.path, ctx.user);
+            ctx.tenant = await tenantFromPath(req.path, ctx.user, req.hostname);
             if (!ctx.tenant) {
-                res.status(404).send('Not Found');
+                renderErrorPage(panel, req, res, 404);
                 return null;
             }
         }
         return ctx;
     };
-    const tenantSegment = panel.hasTenancy() ? ':tenant/' : '';
-    if (panel.hasTenancy()) {
-        // Panel root: the user's first tenant, otherwise tenant registration.
+    // The tenant's segment in page routes: none on tenant domains, `<prefix>/:tenant/` with a route prefix.
+    const tenantRoot = !panel.hasTenancy() || panel.getTenantDomain() ? '' : [panel.getTenantRoutePrefix(), ':tenant'].filter(Boolean).join('/');
+    const tenantSegment = tenantRoot ? `${tenantRoot}/` : '';
+    /** Whether a `:tenant` route parameter is really another route's segment (`login`…), without a route prefix. */
+    const notATenant = (req) => panel.hasTenancy() && tenantRoot !== '' && panel.getTenantRoutePrefix() === null && (panel.getReservedSegments().has(req.params.tenant) || req.params.tenant === TenantRegistration?.slug);
+    /** A tenant page whose tenant has no subscription goes to the billing page. */
+    const requiresSubscription = async (PageClass, ctx) => Boolean(ctx.tenant) && PageClass.isTenantSubscriptionRequired(panel) && !(await panel.getTenantBillingProvider().isSubscribed(ctx.tenant));
+    if (!panel.hasTenancy() && !panel.getPages().some((page) => page.slug === '')) {
+        // Panel root without a dashboard: the first menu page, as in Filament.
         router.get(panel.getBaseUrl(), async (req, res) => {
+            const ctx = await pageContext(req, res);
+            if (!ctx)
+                return;
+            const url = panel.getNavigation(req.path, new Map(), await panel.resolveInaccessiblePages(ctx.user))[0]?.items[0]?.url ?? null;
+            if (!url)
+                return renderErrorPage(panel, req, res, 404);
+            res.redirect(url);
+        });
+    }
+    if (panel.hasTenancy()) {
+        // Panel root: the user's first tenant, otherwise tenant registration (on a tenant's own host: its pages).
+        router.get(panel.getBaseUrl(), async (req, res, next) => {
+            if (panel.getTenantDomain() && panel.getTenantKeyFromRequest(req.path, req.hostname) !== null)
+                return next();
             const ctx = await context(req, res);
             if (ctx.denied)
-                return forbidden(res);
+                return forbidden(req, res);
             if (!ctx.user)
                 return res.redirect(panel.getLoginUrl());
             if (await panel.mustVerifyEmail(ctx.user))
                 return res.redirect(panel.getEmailVerificationPromptUrl());
+            if (await panel.mustSetUpMultiFactorAuthentication(ctx.user))
+                return res.redirect(panel.getSetUpRequiredMultiFactorAuthenticationUrl());
             const url = await homeUrl(ctx.user);
             if (!url)
-                return void res.status(404).send('Not Found');
+                return renderErrorPage(panel, req, res, 404);
             res.redirect(url);
         });
         // Tenant root without a dashboard: the first menu page.
         if (!panel.getPages().some((page) => page.slug === '')) {
-            router.get(panel.getBaseUrl(':tenant'), async (req, res, next) => {
-                if (panel.getReservedSegments().has(req.params.tenant) || req.params.tenant === TenantRegistration?.slug)
+            router.get(panel.getBaseUrl(tenantRoot), async (req, res, next) => {
+                if (notATenant(req))
                     return next();
                 const ctx = await pageContext(req, res);
                 if (!ctx)
                     return;
                 const url = await panel.withTenant(ctx.tenant, async () => panel.getNavigation(req.path, new Map(), await panel.resolveInaccessiblePages(ctx.user))[0]?.items[0]?.url ?? null);
                 if (!url)
-                    return void res.status(404).send('Not Found');
+                    return renderErrorPage(panel, req, res, 404);
                 res.redirect(url);
             });
         }
     }
+    // Billing page of a tenant, served by the billing provider.
+    const billing = panel.getTenantBillingProvider();
+    if (panel.hasTenancy() && billing) {
+        if (panel.isTenantSubscriptionRequired() && typeof billing.isSubscribed !== 'function')
+            throw new Error('requiresTenantSubscription(): the billing provider must implement isSubscribed().');
+        router.get(panel.getBaseUrl(tenantSegment + panel.getTenantBillingRouteSlug()), async (req, res, next) => {
+            if (notATenant(req))
+                return next();
+            const ctx = await pageContext(req, res);
+            if (!ctx)
+                return;
+            await panel.withTenant(ctx.tenant, () => billing.handle(req, res, ctx.tenant));
+        });
+    }
     for (const PageClass of panel.getPages()) {
         const component = name(`pages.${(PageClass.slug || 'dashboard').replace(/[{}]/g, '')}`);
         runtime.register(component, PageClass);
         // `{record}` in the slug becomes a route parameter, passed to mount().
         router.get(panel.getBaseUrl(tenantSegment + PageClass.slug).replace(/\{(\w+)\}/g, ':$1'), async (req, res, next) => {
-            if (panel.hasTenancy() && (panel.getReservedSegments().has(req.params.tenant) || req.params.tenant === TenantRegistration?.slug))
+            if (notATenant(req))
                 return next();
             const ctx = await pageContext(req, res);
             if (!ctx)
                 return;
+            if (await requiresSubscription(PageClass, ctx))
+                return res.redirect(panel.getTenantBillingUrl(ctx.tenant));
             const { tenant: _tenant, ...params } = req.params;
             await guarded(res, () => document(req, res, ctx, { title: PageClass.getTitle(), component, layout: 'index', params }));
         });
     }
+    // Any other URL of a panel with a path is unknown. A panel at the root leaves them to the application (`panelNotFound()`).
+    if (panelBase !== '/')
+        router.get([panelBase, `${panelBase}/*path`], (req, res) => renderErrorPage(panel, req, res, 404));
+    // An error thrown while rendering a page of the panel: the 500 page. Component updates keep Livewire's error handling.
+    router.use((error, req, res, next) => {
+        if (res.headersSent || req.method !== 'GET' || !belongsToPanel(req.path) || req.path.startsWith(`${livewire}/`))
+            return next(error);
+        console.error(error);
+        const status = typeof error?.status === 'number' && error.status >= 400 ? error.status : 500;
+        renderErrorPage(panel, req, res, status, { error });
+    });
     return router;
 }
+/** The panel's 404 page for URLs nothing else answered: mount it after your routes, for a panel served at the root. */
+export function panelNotFound(panel) {
+    return (req, res) => renderErrorPage(panel, req, res, 404);
+}
 /** Each auth feature requires some auth provider methods: fail at startup rather than on first click. */
 function assertAuthCapabilities(panel) {
+    if (panel.allowsGuests() && panel.hasTenancy())
+        throw new Error('guestAccess() is not available in a multi-tenant panel: tenants belong to signed-in users.');
+    for (const provider of panel.getMultiFactorAuthenticationProviders())
+        provider.checkConfiguration?.(panel);
     if (!panel.hasRegistration() && !panel.hasPasswordReset() && !panel.hasEmailVerification() && !panel.hasProfile())
         return;
     const auth = panel.getAuth();
@@ -4128,4 +5139,6 @@ function assertAuthCapabilities(panel) {
         missing('Email verification', ['hasVerifiedEmail', 'markEmailAsVerified']);
     if (panel.hasProfile())
         missing('Profile', ['update']);
+    if (panel.hasEmailChangeVerification())
+        missing('Email change verification', ['update', 'findByEmail']);
 }