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

package/lib/index.js

@@ -8,28 +8,41 @@ 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, useColorManager, ActionGroup } from '@navette-js/actions';
-import { Checkbox, Field, Select, TextInput, Wizard, richDocumentToHtml, richHtmlToDocument, fillSchema, fillSchemaFromRecord, getSchemaState, 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 { 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, 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, 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";
 export { addDays, addMonths, CALENDAR_LABELS, dayOf, daysBetween, eventsOn, renderCalendar, renderCalendarEvent, timeOf, visibleRange } from "./calendar.js";
 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 { REORDER_LIMIT, Table, initializeTableGrouping, updateTableColumnState as updateEditableColumnState, getTableQuery, renderTable, sanitizeColumnState, sortTable, useColorManager as useTableColorManager } from '@navette-js/tables';
+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';
 const dir = (p) => fileURLToPath(new URL(p, import.meta.url));
@@ -37,6 +50,19 @@ views.namespace('filament-panels', dir('../views'));
 views.namespace('filament', fileURLToPath(new URL('../views', import.meta.resolve('@navette-js/support'))));
 views.share({ t, tc });
 export const ASSET_VERSION = '5.11.2.0';
+/** Navigation group: label, icon (then its items have none, as in Filament) and whether it can be collapsed. */
+export class NavigationGroup {
+    _label;
+    _icon = null;
+    _collapsible = true;
+    constructor(label) { this._label = label; }
+    static make(label) { return new NavigationGroup(label); }
+    icon(name) { this._icon = name; return this; }
+    collapsible(condition = true) { this._collapsible = condition; return this; }
+    getLabel() { return this._label; }
+    getIcon() { return this._icon; }
+    isCollapsible() { return this._collapsible; }
+}
 export class NavigationItem {
     label;
     _url = '#';
@@ -46,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; }
@@ -73,10 +105,24 @@ export class Panel {
     _login = null;
     _auth = null;
     _key = 'cle-de-developpement-a-remplacer';
+    _sessionStore = null;
+    /** Where per-browser data is kept (persisted table filters, search and sort): in memory by default. */
+    sessionStore(store) { this._sessionStore = store; return this; }
+    getSessionStore() { return (this._sessionStore ??= new MemorySessionStore()); }
+    _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 = [];
     _resources = [];
     _navigationItems = [];
     _navigationGroups = [];
+    _navigationGroupOptions = new Map();
     _maxContentWidth = '7xl';
     colors = new ColorManager();
     static make() { return new Panel(); }
@@ -136,19 +182,99 @@ export class Panel {
     login(page = Login) { this._login = page; return this; }
     auth(provider) { this._auth = provider; return this; }
     key(key) { this._key = key; return this; }
-    pages(pages) { this._pages.push(...pages); return this; }
+    _authGuard = 'web';
+    _canAccess = null;
+    /**
+     * Session shared with the other panels that use the same guard (`'web'` by default): signing into one signs into all of
+     * them, and `canAccess()` decides who may enter each one. `null` gives this panel a session of its own.
+     * Panels sharing a guard must use the same key and the same auth provider.
+     */
+    authGuard(guard) {
+        if (guard !== null && !/^[a-z0-9_-]{1,40}$/.test(guard))
+            throw new Error(`Invalid auth guard name: ${guard}`);
+        this._authGuard = guard;
+        return this;
+    }
+    getAuthGuard() { return this._authGuard; }
+    /** Who may use this panel, e.g. `panel.canAccess((user) => user.role === 'admin')`. Checked on every request and at login. */
+    canAccess(rule) { this._canAccess = rule; return this; }
+    /** True if this user may use this panel: the panel's rule and the provider's `canAccessPanel()`, when set, must both allow it. */
+    async userCanAccess(user) {
+        if (this._canAccess && !(await this._canAccess(user, this)))
+            return false;
+        const provider = this.getAuth();
+        if (provider.canAccessPanel && !(await provider.canAccessPanel(user, this)))
+            return false;
+        return true;
+    }
+    /** 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) {
+        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. */
-    navigationGroups(groups) { this._navigationGroups = groups; return this; }
+    /** Order of the navigation groups: labels, or `NavigationGroup.make('Shop').icon('o-shopping-cart').collapsible(false)`. */
+    _darkMode = true;
+    _darkModeForced = false;
+    _defaultThemeMode = 'system';
+    /** `false`: light mode only (no switcher); `darkMode(true, true)`: dark mode only. */
+    darkMode(condition = true, isForced = false) { this._darkMode = condition; this._darkModeForced = condition && isForced; return this; }
+    /** Mode used until the user picks one in the switcher: `'system'` (default), `'light'` or `'dark'`. */
+    defaultThemeMode(mode) { if (!['light', 'dark', 'system'].includes(mode))
+        throw new Error(`Invalid theme mode: ${mode}`); this._defaultThemeMode = mode; return this; }
+    hasDarkMode() { return this._darkMode; }
+    hasDarkModeForced() { return this._darkModeForced; }
+    getDefaultThemeMode() { return this._defaultThemeMode; }
+    navigationGroups(groups) {
+        this._navigationGroups = groups.map((group) => (typeof group === 'string' ? group : group.getLabel()));
+        this._navigationGroupOptions = new Map(groups.filter((group) => typeof group !== 'string').map((group) => [group.getLabel(), { icon: group.getIcon(), collapsible: group.isCollapsible() }]));
+        return this;
+    }
     _plugins = [];
     /** Applies a plugin: an object that configures the panel (resources, pages, render hooks, themes…). */
     plugin(plugin) {
@@ -171,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)
@@ -306,25 +450,114 @@ 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; }
-    getRegistrationUrl() { return this.getBaseUrl('register'); }
-    getRequestPasswordResetUrl() { return this.getBaseUrl('password-reset/request'); }
+    _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). */
+    loginRouteSlug(slug) { this._authSlugs.login = this.authSlug(slug); return this; }
+    /** URL segment of the registration page (`register` by default). */
+    registrationRouteSlug(slug) { this._authSlugs.registration = this.authSlug(slug); return this; }
+    /** URL segments of the password reset pages: `<prefix>/<request>` and `<prefix>/<reset>` (`password-reset/request` and `password-reset/reset` by default). */
+    passwordResetRoutePrefix(prefix) { this._authSlugs.passwordResetPrefix = this.authSlug(prefix); return this; }
+    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}`, 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() { 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) {
         const token = signToken(this._key, `${this._id}.password-reset`, { uid: user.id, fp: fingerprint }, 60 * 60);
-        return `${this.getBaseUrl('password-reset/reset')}?email=${encodeURIComponent(user.email)}&token=${encodeURIComponent(token)}`;
+        return `${this.getBaseUrl(this.getAuthPaths().passwordReset)}?email=${encodeURIComponent(user.email)}&token=${encodeURIComponent(token)}`;
     }
     /** Payload of a password reset token valid for this panel, otherwise `null`. */
     readResetPasswordToken(token) { return readToken(this._key, `${this._id}.password-reset`, token); }
     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) {
@@ -358,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;
@@ -380,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('login'); }
-    getLogoutUrl() { return this.getBaseUrl('logout'); }
+    getLoginUrl() { return this.getBaseUrl(this.getAuthPaths().login); }
+    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}`; }
@@ -398,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('');
@@ -425,28 +773,37 @@ 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) }));
-            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: own };
+            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 || 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(`navette_${this._id}_session`, `${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(`navette_${this._id}_session`); }
+    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(`navette_${this._id}_session=`))?.split('=')[1];
+        const raw = (req.headers.cookie ?? '').split(';').map((c) => c.trim()).find((c) => c.startsWith(`${this.getSessionCookieName()}=`))?.split('=')[1];
         if (!raw)
             return null;
         const [value, mac] = raw.split('.');
@@ -579,113 +936,86 @@ 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. */
+    componentFileAttachments = {};
     getActionMountContext() { return {}; }
     getActionRecord() { return null; }
     /** Record targeted by an action mounted in a given context (table row…). */
     async resolveActionRecord(_context) { return this.getActionRecord(); }
     /** Actions that can be mounted in a given context (page header by default). */
     getMountableActions(context) {
-        return typeof context.schemaComponent === 'string' ? this.getSchemaComponentActions(context.schemaComponent) : this.getHeaderActions();
+        return typeof context.schemaComponent === 'string' ? this.getSchemaComponentActions(context.schemaComponent) : flattenActions(this.getHeaderActions());
     }
     /**
      * Actions owned by a schema component (Repeater: add, delete, move; Section: header actions).
      * The key comes from the browser: it must match a real component of the schema, or the schema itself.
      */
+    /** Visible component of a schema of this page (or of a mounted action's form) with this key. */
+    async findSchemaComponent(key) {
+        const name = key.split('.')[0];
+        const mountedIndex = /^mountedActionSchema(\d+)$/.exec(name);
+        if (!mountedIndex && (!/^[A-Za-z]+$/.test(name) || typeof this[`${name}Schema`] !== 'function'))
+            return null;
+        const schema = mountedIndex ? await this.getMountedActionSchema(Number(mountedIndex[1])) : this.getSchema(name);
+        return schema ? (await schema.getVisibleFlatComponents()).find((c) => c.getKey() === key) ?? null : null;
+    }
     async getSchemaComponentActions(key) {
         const name = key.split('.')[0];
         // The component may belong to the form of an already mounted action (rich editor in a modal).
@@ -708,12 +1038,42 @@ export class Page extends BasePage {
         return typeof component === 'string' && component.length <= 200 ? { ...this.getActionMountContext(), schemaComponent: component } : this.getActionMountContext();
     }
     async findMountableAction(name, context = this.getActionMountContext()) {
+        // An action of a modal footer: found among the extra footer actions of its (mounted) parent action.
+        if (typeof context.parentAction === 'number') {
+            const parent = this.mountedActions[context.parentAction];
+            const owner = parent ? await this.findMountableAction(parent.name, parent.context) : null;
+            const child = owner?.getExtraModalFooterActions().find((a) => a.getName() === name && a.isMountable());
+            if (!child)
+                throw new WireError(404, `Action not found: ${String(name)}`);
+            return child;
+        }
         const action = (await this.getMountableActions(context)).find((a) => a.getName() === name && a.isMountable());
         if (!action)
             throw new WireError(404, `Action not found: ${String(name)}`);
         return action;
     }
-    async actionContext(mounted) { return { livewire: this, record: await this.resolveActionRecord(mounted.context), arguments: mounted.arguments, data: emptyToNull(mounted.data ?? {}) }; }
+    async actionContext(mounted) {
+        const parentIndex = mounted.context.parentAction;
+        const parent = typeof parentIndex === 'number' ? this.mountedActions[parentIndex] : undefined;
+        const parentData = parent ? (parent.data ??= {}) : undefined;
+        // An action of a form field (affix action): its state, and access to the other fields of the same form.
+        let fieldAccess = {};
+        if (typeof mounted.context.schemaComponent === 'string') {
+            const component = await this.findSchemaComponent(mounted.context.schemaComponent);
+            const path = typeof component?.getStatePath === 'function' && component.hasStatePath() ? String(component.getStatePath()) : null;
+            if (path) {
+                const container = path.split('.').slice(0, -1);
+                const nodeOf = () => container.reduce((node, segment) => (node && typeof node === 'object' ? node[segment] : undefined), this);
+                fieldAccess = {
+                    state: path.split('.').reduce((node, segment) => (node && typeof node === 'object' ? node[segment] : undefined), this),
+                    get: (name) => nodeOf()?.[name],
+                    set: (name, value) => { const node = nodeOf(); if (node && typeof node === 'object' && /^[A-Za-z0-9_]+$/.test(name))
+                        node[name] = value; },
+                };
+            }
+        }
+        return { livewire: this, record: await this.resolveActionRecord(mounted.context), arguments: mounted.arguments, data: emptyToNull(mounted.data ?? {}), ...(parentData ? { parentData } : {}), ...fieldAccess };
+    }
     /** Form schema of a mounted action: key `mountedActionSchema<n>`, state under `mountedActions.<n>.data`. */
     async getMountedActionSchema(index) {
         const mounted = this.mountedActions[index];
@@ -724,7 +1084,7 @@ export class Page extends BasePage {
     }
     async renderActionModal(index) {
         const mounted = this.mountedActions[index];
-        return (await this.findMountableAction(mounted.name, mounted.context)).toModalHtml(await this.actionContext(mounted), index, (await (await this.getMountedActionSchema(index))?.toHtml()) ?? null);
+        return (await this.findMountableAction(mounted.name, mounted.context)).toModalHtml(await this.actionContext(mounted), index, (await (await this.getMountedActionSchema(index))?.toHtml()) ?? null, mounted.context);
     }
     /** Cancels a partial modal render prepared by a live field when the same request then runs an action. */
     cancelModalPartialRender() {
@@ -741,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 ??= {});
@@ -797,12 +1158,23 @@ export class Page extends BasePage {
     /** Mounts an action: without a modal it runs immediately; with one, only the modals fragment is returned. */
     async mountAction(name, args = {}, _context = {}) {
         this.cancelModalPartialRender();
-        const context = this.resolveMountContext(_context);
+        // A modal footer action: its context is its parent's (kept by the server), plus the parent's index.
+        const parentIndex = _context?.parentAction;
+        const context = Number.isInteger(parentIndex) && parentIndex >= 0 && parentIndex < this.mountedActions.length
+            ? { ...this.mountedActions[parentIndex].context, parentAction: parentIndex }
+            : this.resolveMountContext(_context);
         const action = await this.findMountableAction(name, context);
         await this.assertActionVisible(action, context);
         const mounted = { name: String(name), arguments: args && typeof args === 'object' ? args : {}, context };
-        if (!action.hasModal()) {
-            await action.call(await this.actionContext(mounted));
+        if (!action.hasModal() || (await action.isModalHidden(await this.actionContext(mounted)))) {
+            // Without a modal, `halt()` and `cancel()` simply stop the action.
+            try {
+                await action.call(await this.actionContext(mounted));
+            }
+            catch (error) {
+                if (!(error instanceof ActionHalt))
+                    throw error;
+            }
             return;
         }
         this.mountedActions.push(mounted);
@@ -812,10 +1184,37 @@ export class Page extends BasePage {
             const data = {};
             mounted.data = data;
             fillSchema(schema, data);
-            const fill = await action.getFormFill(await this.actionContext(mounted));
-            if (fill)
+            const fillContext = await this.actionContext(mounted);
+            const fill = await action.getFormFill(fillContext);
+            if (fill) {
                 fillSchemaFromRecord(schema, data, fill);
+                await loadSchemaRelationships(schema, data, fillContext.record);
+            }
         }
+        await action.runMountUsing({ ...(await this.actionContext(mounted)), data: (mounted.data ??= {}), action });
+        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();
     }
@@ -841,19 +1240,184 @@ export class Page extends BasePage {
             }
         }
         const callContext = await this.actionContext(mounted);
-        if (schema)
+        if (schema) {
             callContext.data = await getSchemaState(schema);
-        await action.call(callContext);
-        // "… & create another": the modal stays open with a reset form.
+            callContext.schema = schema;
+        }
+        try {
+            await action.call(callContext);
+        }
+        catch (error) {
+            // `action.halt()`: the modal stays open; `action.cancel()`: it closes.
+            if (!(error instanceof ActionHalt))
+                throw error;
+            if (error.closesModal) {
+                this.mountedActions.pop();
+                this.syncActionModals();
+            }
+            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 ?? {})));
             const data = {};
             mounted.data = data;
             fillSchema(schema, data);
+            Object.assign(data, preserved);
             return;
         }
         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 = [];
@@ -862,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`.
@@ -880,7 +1466,8 @@ export class Dashboard extends Page {
     /** Filters form state. Stays `null` while the page has no filters. */
     filters = null;
     /** Dashboard widgets. Defaults to the panel's (`panel.widgets([...])`). */
-    getWidgets() { return this.panel.getWidgets(); }
+    /** The panel's widgets, ordered by their `sort` (stable). */
+    getWidgets() { return [...this.panel.getWidgets()].map((widget, index) => ({ widget, index })).sort((a, b) => (a.widget.sort ?? Infinity) - (b.widget.sort ?? Infinity) || a.index - b.index).map(({ widget }) => widget); }
     /** Grid columns: a number (at the `lg` breakpoint), or one number per breakpoint. */
     getColumns() { return 2; }
     hasFiltersForm() { return typeof this.filtersFormSchema === 'function'; }
@@ -907,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 {
@@ -939,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`). */
@@ -1177,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'); }
@@ -1191,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.` }),
@@ -1205,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;
@@ -1224,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();
     }
@@ -1299,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(),
@@ -1317,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;
         }
@@ -1340,15 +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));
-        if (!user) {
+        // 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);
@@ -1368,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;
@@ -1391,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. */
@@ -1434,7 +2191,11 @@ export class Resource {
     /** Columns searched by global search; defaults to the title attribute. Empty array: the resource is not searchable. */
     static globallySearchableAttributes = null;
     static getGloballySearchableAttributes() { return this.globallySearchableAttributes ?? (this.recordTitleAttribute ? [this.recordTitleAttribute] : []); }
-    static canGloballySearch() { return this.getGloballySearchableAttributes().length > 0; }
+    /** `false`: the resource is left out of global search. */
+    static isGloballySearchable = true;
+    /** `false`: the search term is matched as a whole instead of word by word. */
+    static shouldSplitGlobalSearchTerms = true;
+    static canGloballySearch() { return this.isGloballySearchable && this.getGloballySearchableAttributes().length > 0; }
     /** Position of this resource's group in the results; without one, after the others in registration order. */
     static globalSearchSort = null;
     /** Maximum results rendered per resource. */
@@ -1442,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);
@@ -1455,7 +2221,7 @@ export class Resource {
         return action ? `${this.getUrl('index')}?tableAction=${action}&tableActionRecord=${encodeURIComponent(key)}` : null;
     }
     static async getGlobalSearchResults(search, user) {
-        const page = await this.adapter.paginate({ search, searchColumns: this.getGloballySearchableAttributes(), page: 1, perPage: Math.min(Math.max(this.globalSearchResultsLimit, 1), 200) });
+        const page = await this.adapter.paginate({ search, searchColumns: this.getGloballySearchableAttributes(), splitSearchTerms: this.shouldSplitGlobalSearchTerms, page: 1, perPage: Math.min(Math.max(this.globalSearchResultsLimit, 1), 200) });
         const results = [];
         for (const record of page.records) {
             const url = await this.getGlobalSearchResultUrl(record, user);
@@ -1465,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;
     }
@@ -1492,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) {
@@ -1508,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}`;
@@ -1524,11 +2301,15 @@ 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;
-    /** Width in the widget grid: a number of columns, or `'full'`. */
+    /** Width in the widget grid: a number of columns or `'full'` (from `lg`), or a span per breakpoint (`{ md: 2, xl: 3 }`). */
     static columnSpan = 1;
+    /** Position on the dashboard (lower first); widgets without a sort keep their order, after the sorted ones. */
+    static sort = null;
     /** Loaded when it becomes visible. */
     static isLazy = true;
     get panel() { return this._ctx.panel; }
@@ -1542,9 +2323,16 @@ export class Widget extends Component {
         if (!(await ctx.panel.authorize(ctx.user, 'view', { widget: WidgetClass, rule: () => WidgetClass.canView(ctx.user) })))
             throw new WireError(403, 'Forbidden.');
     }
-    /** Grid column classes and style, at the `lg` breakpoint. */
+    /** Grid column classes and style: at the `lg` breakpoint, or per breakpoint. */
     gridColumn() {
         const span = this.constructor.columnSpan;
+        if (typeof span === 'object') {
+            const entries = Object.entries(span).filter(([breakpoint, value]) => /^(default|sm|md|lg|xl|2xl)$/.test(breakpoint) && (value === 'full' || (Number.isInteger(value) && value > 0)));
+            return {
+                classes: ['fi-grid-col', ...entries.map(([breakpoint]) => (breakpoint === 'default' ? 'fi-grid-col-span' : `${breakpoint}:fi-grid-col-span`))],
+                style: entries.map(([breakpoint, value]) => `--col-span-${breakpoint}: ${value === 'full' ? '1 / -1' : `span ${value} / span ${value}`};`).join(' '),
+            };
+        }
         // The span is always written, even for a single column.
         return { classes: ['fi-grid-col', 'lg:fi-grid-col-span'], style: `--col-span-lg: ${span === 'full' ? '1 / -1' : `span ${Math.floor(span)} / span ${Math.floor(span)}`};` };
     }
@@ -1842,6 +2630,10 @@ export class StatsOverviewWidget extends Widget {
     static columnSpan = 'full';
     /** Polling interval, or `null` to disable polling. */
     static pollingInterval = '5s';
+    /** Heading shown above the stats. */
+    getHeading() { return null; }
+    /** Description under the heading. */
+    getDescription() { return null; }
     /** Row columns: three, or four when the number of stats fits better. */
     getColumns(count) { return count < 3 ? 3 : count % 3 !== 1 ? 3 : 4; }
     async render() {
@@ -1855,11 +2647,13 @@ export class StatsOverviewWidget extends Widget {
             const id = `stats-overview-stat-${index}`, key = `content.${id}`;
             return `<div wire:partial="schema-component::${key}" x-data="filamentSchemaComponent(${e(js({ key, exposedMethods: [], path: '', containerPath: '' }))})" wire:key="${e(`${this.id}.${key}`)}" class="fi-grid-col" style="--col-span-default: span 1 / span 1;"><div class="fi-sc-component">${stat.toHtml(this.panel, id)}</div></div>`;
         }).join('');
+        const heading = this.getHeading(), description = this.getDescription();
+        const header = heading !== null || description !== null ? `<header class="fi-section-header"><div class="fi-section-header-content fi-section-header-content-has-heading"><div class="fi-section-header-text-ctn">${heading !== null ? `<h3 class="fi-section-header-heading">${e(heading)}</h3>` : ''}${description !== null ? `<p class="fi-section-header-description">${e(description)}</p>` : ''}</div></div></header>` : '';
         const interval = this.constructor.pollingInterval;
         const poll = interval && /^[0-9]+(ms|s)$/.test(interval) ? ` wire:poll.${interval}` : '';
         return this.wrap(`<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));"><div ${anonymous} class="fi-grid-col" style="--col-span-default: span 1 / span 1;"><div class="fi-sc-component fi-grid-ctn"><div${poll} class="fi-sc-section"><section x-data="{
         isCollapsed: false,
-    }" class="fi-section fi-section-not-contained"><div class="fi-section-content-ctn"><div class="fi-section-content fi-grid @xl:fi-grid-cols !@lg:fi-grid-cols fi-sc fi-sc-has-gap" style="--cols-cxl: repeat(${columns}, minmax(0, 1fr)); --cols-nclg: repeat(${columns}, minmax(0, 1fr)); --cols-default: repeat(1, minmax(0, 1fr));">${cells}</div></div></section></div></div></div></div>`, ['fi-wi-stats-overview']);
+    }" class="fi-section fi-section-not-contained${header ? ' fi-section-has-header' : ''}">${header}<div class="fi-section-content-ctn"><div class="fi-section-content fi-grid @xl:fi-grid-cols !@lg:fi-grid-cols fi-sc fi-sc-has-gap" style="--cols-cxl: repeat(${columns}, minmax(0, 1fr)); --cols-nclg: repeat(${columns}, minmax(0, 1fr)); --cols-default: repeat(1, minmax(0, 1fr));">${cells}</div></div></section></div></div></div></div>`, ['fi-wi-stats-overview']);
     }
 }
 /**
@@ -1868,6 +2662,10 @@ export class StatsOverviewWidget extends Widget {
  * has changed (checksum).
  */
 export class ChartWidget extends Widget {
+    /** Empty state shown when `getData()` returns nothing. */
+    getEmptyStateHeading() { return t('filament-widgets::chart.empty.heading'); }
+    getEmptyStateDescription() { return null; }
+    getEmptyStateIcon() { return 'o-x-mark'; }
     static callable = ['updateChartData'];
     static locked = ['dataChecksum'];
     /** Polling interval, or `null` to disable polling. */
@@ -1933,7 +2731,7 @@ export class ChartWidget extends Widget {
                                 type: ${e(js(type))},
                             })" class="${cls([...this.panel.colors.getComponentClasses('stat-chart', this.getColor()), 'fi-wi-chart-frame', 'fi-wi-chart-canvas-ctn', { 'fi-wi-chart-frame-no-aspect-ratio': hasMaxHeight }])}"><canvas x-ref="canvas" aria-hidden="true" style="width: 100%; ${hasMaxHeight ? `max-height: ${e(maxHeight)}` : 'height: 100%; max-height: 100%'}"></canvas>${colors.map((name, index) => `<span aria-hidden="true" x-ref="${refs[index]}ColorElement" class="fi-wi-chart-${name}-color"></span>`).join('')}</div>`;
         const empty = isEmpty
-            ? `<div class="${cls(['fi-wi-chart-frame', { 'fi-wi-chart-frame-no-aspect-ratio': hasMaxHeight }])}"${hasMaxHeight ? ` style="min-height: ${e(maxHeight)}"` : ''}>${emptyState({ heading: t('filament-widgets::chart.empty.heading'), icon: 'o-x-mark', iconColor: 'gray', contained: false })}</div>`
+            ? `<div class="${cls(['fi-wi-chart-frame', { 'fi-wi-chart-frame-no-aspect-ratio': hasMaxHeight }])}"${hasMaxHeight ? ` style="min-height: ${e(maxHeight)}"` : ''}>${emptyState({ heading: this.getEmptyStateHeading(), description: this.getEmptyStateDescription() ?? undefined, icon: this.getEmptyStateIcon() ?? undefined, iconColor: 'gray', contained: false })}</div>`
             : '';
         const body = `<div${poll}${isEmpty ? ' style="display: none"' : ''}><div class="fi-wi-chart-image"${label ? ` role="img" aria-label="${e(label)}"` : ''}>${frame}</div>${assistive ? `<div class="fi-wi-chart-assistive-content fi-sr-only"><p>${e(assistive)}</p></div>` : ''}</div>${empty}`;
         return this.wrap(`<section x-data="{
@@ -2029,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. */
@@ -2078,6 +2941,13 @@ export class Tab {
     badge(resolver) { this._badge = resolver; return this; }
     badgeColor(color) { this._badgeColor = color; this._hasBadgeColor = true; return this; }
     query(modifier) { this._query = modifier; return this; }
+    _icon = null;
+    _iconPosition = 'before';
+    /** Icon of the tab, before its label (or after, with `iconPosition('after')`). */
+    icon(name) { this._icon = name; return this; }
+    iconPosition(position) { this._iconPosition = position; return this; }
+    getIcon() { return this._icon; }
+    getIconPosition() { return this._iconPosition; }
     getLabel(key) { return this._label ?? ucfirst(key.replace(/[_-]+/g, ' ')); }
     hasBadge() { return this._badge !== null; }
     async getBadge() { return this._badge ? this._badge() : null; }
@@ -2132,7 +3002,7 @@ class ResourceTabs extends SchemaComponent {
  ${d}?.badgeIconHtml &&
  ${d}?.badgeIconPosition === 'after'
  "><span x-html="${d}.badgeIconHtml"></span></template></span></template>` : '';
-            return `<button id="fi-sc-tab-${createHash('md5').update(`${key}.${k}`).digest('hex')}" aria-pressed="${k === active ? 'true' : 'false'}" x-bind:aria-pressed="isTabSelected(${q(k)})" tabindex="0" x-bind:tabindex="getTabIndex(${q(k)})" data-tab-key="${e(k)}" x-bind:data-tab-available="Boolean(true).toString()" x-show="true" x-on:click.capture="if (! selectTab(${q(k)}, $event)) { $event.preventDefault(); $event.stopImmediatePropagation() }" x-bind:class="{ 'fi-active': isTabSelected(${q(k)}) }" type="button" wire:click="$set('activeTab', ${k === '' ? 'null' : q(k)})" class="${cls(['fi-tabs-item', { 'fi-active': k === active }])}"><span class="fi-tabs-item-label">${e(tab.getLabel(k))}</span>${badge}</button>`;
+            return `<button id="fi-sc-tab-${createHash('md5').update(`${key}.${k}`).digest('hex')}" aria-pressed="${k === active ? 'true' : 'false'}" x-bind:aria-pressed="isTabSelected(${q(k)})" tabindex="0" x-bind:tabindex="getTabIndex(${q(k)})" data-tab-key="${e(k)}" x-bind:data-tab-available="Boolean(true).toString()" x-show="true" x-on:click.capture="if (! selectTab(${q(k)}, $event)) { $event.preventDefault(); $event.stopImmediatePropagation() }" x-bind:class="{ 'fi-active': isTabSelected(${q(k)}) }" type="button" wire:click="$set('activeTab', ${k === '' ? 'null' : q(k)})" class="${cls(['fi-tabs-item', { 'fi-active': k === active }])}">${tab.getIcon() && tab.getIconPosition() === 'before' ? icon(tab.getIcon(), { attributes: new Attributes().class(['fi-tabs-item-icon']) }) : ''}<span class="fi-tabs-item-label">${e(tab.getLabel(k))}</span>${tab.getIcon() && tab.getIconPosition() === 'after' ? icon(tab.getIcon(), { attributes: new Attributes().class(['fi-tabs-item-icon']) }) : ''}${badge}</button>`;
         });
         return `<div x-data="tabsSchemaComponent({
  activeTab: ${Math.max(tabs.findIndex(([k]) => k === active), 0) + 1},
@@ -2160,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 = {};
@@ -2194,10 +3069,73 @@ export class ListRecords extends Page {
             if (allowed.delete(key))
                 await adapter.update(key, { [column]: ++rank });
     }
+    /** Key of this table's persisted state: per page class (and resource or relationship). */
+    tableSessionKey(part) {
+        const page = this.constructor;
+        return ['tables', page.name, page.resource?.slug ?? '', page.relationship ?? '', part].join(':');
+    }
+    /** Session of the persisted table state: the browser (its CSRF token) and the signed-in user. */
+    tableSession() {
+        const ctx = this._ctx;
+        return ctx?.mailbox ? `${ctx.panel.getId()}:${ctx.user?.id ?? ''}:${ctx.mailbox}` : null;
+    }
+    async dehydrate() {
+        await super.dehydrate?.();
+        const table = this.getTable(), session = this.tableSession();
+        if (!session)
+            return;
+        const store = this._ctx.panel.getSessionStore();
+        if (table.persistsFiltersInSession())
+            await store.set(session, this.tableSessionKey('filters'), this.tableFilters);
+        if (table.persistsSearchInSession())
+            await store.set(session, this.tableSessionKey('search'), this.tableSearch);
+        if (table.persistsColumnSearchesInSession())
+            await store.set(session, this.tableSessionKey('column-searches'), this.tableColumnSearches);
+        if (table.persistsSortInSession())
+            await store.set(session, this.tableSessionKey('sort'), this.tableSort);
+        if (table.persistsGroupingInSession())
+            await store.set(session, this.tableSessionKey('grouping'), this.tableGrouping);
+    }
+    /** Restores the persisted table state; every value is sanitized like browser input. */
+    async restoreTableSession(table) {
+        const session = this.tableSession();
+        if (!session)
+            return;
+        const store = this._ctx.panel.getSessionStore();
+        if (table.persistsFiltersInSession()) {
+            const saved = await store.get(session, this.tableSessionKey('filters'));
+            if (saved && typeof saved === 'object') {
+                this.tableFilters = this.sanitizeTableFilters(saved);
+                this.tableDeferredFilters = JSON.parse(JSON.stringify(this.tableFilters));
+            }
+        }
+        if (table.persistsSearchInSession()) {
+            const saved = await store.get(session, this.tableSessionKey('search'));
+            if (typeof saved === 'string')
+                this.tableSearch = saved.slice(0, 1000);
+        }
+        if (table.persistsColumnSearchesInSession()) {
+            const saved = await store.get(session, this.tableSessionKey('column-searches'));
+            if (saved && typeof saved === 'object')
+                this.tableColumnSearches = Object.fromEntries(Object.entries(saved).filter(([name, value]) => typeof value === 'string' && table.getColumn(name)?.isIndividuallySearchable()).map(([name, value]) => [name, value.slice(0, 1000)]));
+        }
+        if (table.persistsSortInSession()) {
+            const saved = await store.get(session, this.tableSessionKey('sort'));
+            if (typeof saved === 'string' || saved === null)
+                this.tableSort = saved;
+        }
+        // Only a group the table declares is kept: `getTableGrouping()` ignores anything else.
+        if (table.persistsGroupingInSession()) {
+            const saved = await store.get(session, this.tableSessionKey('grouping'));
+            if (typeof saved === 'string' && saved.length <= 200)
+                this.tableGrouping = saved;
+        }
+    }
     async mount(_params = {}) {
         const table = this.getTable();
         this.tableFilters = table.getDefaultFilterState();
         this.tableDeferredFilters = table.getDefaultFilterState();
+        await this.restoreTableSession(table);
         this.tableColumns = table.getDefaultColumnState();
         // Preselect the default group.
         initializeTableGrouping(table, this);
@@ -2216,43 +3154,71 @@ export class ListRecords extends Page {
     /** Filters form: one group per filter, bound to `tableDeferredFilters.<filter>`. */
     tableFiltersFormSchema(schema) {
         const table = this.getTable();
-        // Above the content, filters spread over several columns; in the dropdown, a single one.
-        const columns = table.getFiltersLayout() === 'above-content-collapsible' ? { sm: 2, lg: 3, xl: 4, '2xl': 5 } : 1;
-        return schema.statePath('tableDeferredFilters').columns(columns).partiallyRendered().components(table.getFilters().map((filter) => {
+        // Deferred filters edit a copy applied by the "Apply" button; otherwise the form edits the applied state, field by field.
+        const deferred = table.hasDeferredFilters();
+        const groups = table.getFilters().map((filter) => {
             // A filter may provide its own form (query builder); otherwise it is a select.
             const custom = filter.getFormComponents?.();
             if (custom)
                 return StatefulGroup.make(filter.name, custom).columnSpan(filter.getColumnSpan?.() ?? { default: 1, lg: 1 });
             const definition = filter.getFormDefinition();
             return StatefulGroup.make(filter.name, [Select.make('value').label(filter.getLabel()).placeholder(definition.placeholder).options(filter.getFormOptions ? () => filter.getFormOptions() : definition.options)]).columnSpan({ default: 1, lg: 1 });
+        });
+        // `filtersFormSchema()`: the application arranges the filter groups (sections, columns...).
+        const arrange = table.getFiltersFormSchema();
+        const components = arrange ? arrange(Object.fromEntries(table.getFilters().map((filter, index) => [filter.name, groups[index]]))) : groups;
+        const built = schema.statePath(deferred ? 'tableDeferredFilters' : 'tableFilters').columns(table.getFiltersFormColumns()).partiallyRendered().components(components);
+        if (!deferred)
+            for (const component of built.getFlatComponents())
+                if (component instanceof Field)
+                    component.live();
+        return built;
+    }
+    /** Applied state of every declared filter, sanitized from the given (browser) state. */
+    sanitizeTableFilters(source) {
+        return Object.fromEntries(this.getTable().getFilters().map((filter) => {
+            const received = source?.[filter.name];
+            if (filter.sanitizeState)
+                return [filter.name, filter.sanitizeState(received)];
+            return [filter.name, Object.fromEntries(Object.keys(filter.getDefaultState()).map((key) => [key, received?.[key] ?? null]))];
         }));
     }
+    /** Live filters (`deferFilters(false)`): a changed field applies at once. */
+    async updatedTableFilters(value, key) {
+        if (this.getTable().hasDeferredFilters()) {
+            this.tableFilters = this.sanitizeTableFilters(this.tableFilters);
+            return;
+        }
+        await this.runFilterFieldHook('tableFilters', key);
+        this.tableFilters = this.sanitizeTableFilters(this.tableFilters);
+        this.tableDeferredFilters = JSON.parse(JSON.stringify(this.tableFilters));
+        this.paginators.page = 1;
+        this.dispatch('deselectAllTableRecords', [], { self: true });
+    }
     applyTableFilters() {
         // Only filters declared by the table reach the applied state: each sanitizes its own state, or else only its known keys are kept.
-        this.tableFilters = Object.fromEntries(this.getTable().getFilters().map((filter) => {
-            const deferred = this.tableDeferredFilters?.[filter.name];
-            if (filter.sanitizeState)
-                return [filter.name, filter.sanitizeState(deferred)];
-            return [filter.name, Object.fromEntries(Object.keys(filter.getDefaultState()).map((key) => [key, deferred?.[key] ?? null]))];
-        }));
+        this.tableFilters = this.sanitizeTableFilters(this.tableDeferredFilters);
         this.paginators.page = 1;
     }
     /** Removes an active filter indicator: the field is cleared from both the applied state and the form. */
-    removeTableFilter(filterName, field = null) {
-        const filter = this.getTable().getFilters().find((candidate) => candidate.name === filterName);
-        if (!filter)
+    async removeTableFilter(filterName, field = null) {
+        const table = this.getTable();
+        const filter = table.getFilters().find((candidate) => candidate.name === filterName);
+        // A filter showing a non-removable indicator cannot be removed by a forged call either.
+        if (!filter || !(await isTableFilterRemovable(table, this, filter.name)))
             return;
         const current = this.tableFilters?.[filter.name];
-        const next = filter.removeIndicator && typeof field === 'string' && current && typeof current === 'object' ? filter.removeIndicator(current, field) : filter.getDefaultState();
+        const next = filter.removeIndicator && typeof field === 'string' && current && typeof current === 'object' ? filter.removeIndicator(current, field) : (filter.getResetState?.() ?? filter.getDefaultState());
         this.tableFilters = { ...this.tableFilters, [filter.name]: next };
         this.tableDeferredFilters = { ...this.tableDeferredFilters, [filter.name]: JSON.parse(JSON.stringify(next)) };
         this.paginators.page = 1;
     }
     /** Live field in the filters form (e.g. a rule's operator changed): runs its `afterStateUpdated`. */
-    async updatedTableDeferredFilters(_value, key) {
+    async updatedTableDeferredFilters(_value, key) { await this.runFilterFieldHook('tableDeferredFilters', key); }
+    async runFilterFieldHook(property, key) {
         if (!key)
             return;
-        const path = `tableDeferredFilters.${key}`;
+        const path = `${property}.${key}`;
         const field = this.getSchema('tableFiltersForm').getFlatComponents().find((c) => c instanceof Field && c.getStatePath() === path);
         if (!field?.hasAfterStateUpdated())
             return;
@@ -2273,7 +3239,21 @@ export class ListRecords extends Page {
         this.paginators.page = 1;
         this.dispatch('deselectAllTableRecords', [], { self: true });
     }
-    removeTableFilters() { this.resetTableFiltersForm(); }
+    /** "Remove all": resets every removable filter (to its empty state, not its default), the search and the column searches. */
+    async removeTableFilters() {
+        const table = this.getTable();
+        for (const filter of table.getFilters()) {
+            if (!(await isTableFilterRemovable(table, this, filter.name)))
+                continue;
+            const reset = filter.getResetState?.() ?? filter.getDefaultState();
+            this.tableFilters = { ...this.tableFilters, [filter.name]: reset };
+            this.tableDeferredFilters = { ...this.tableDeferredFilters, [filter.name]: JSON.parse(JSON.stringify(reset)) };
+        }
+        this.tableSearch = '';
+        this.tableColumnSearches = {};
+        this.paginators.page = 1;
+        this.dispatch('deselectAllTableRecords', [], { self: true });
+    }
     applyTableColumnManager(state = null, _wasReordered = false) { if (state)
         this.tableColumns = sanitizeColumnState(this.getTable(), state); }
     resetTableColumnManager() { this.tableColumns = this.getTable().getDefaultColumnState(); }
@@ -2300,7 +3280,11 @@ export class ListRecords extends Page {
     rendersActionModalsInPage() { return false; }
     getBulkActions() { return this.getTable().getBulkActions() ?? [DeleteBulkAction.make()]; }
     /** Row actions declared by the table, with groups flattened. */
-    getRecordActions() { return this.getTable().getRecordActions().flatMap((a) => (a instanceof ActionGroup ? a.getActions() : [a])); }
+    getRecordActions() {
+        const table = this.getTable();
+        // Column actions are record actions too: mounted with the record key, and checked the same way.
+        return [...table.getRecordActions().flatMap((a) => (a instanceof ActionGroup ? a.getActions() : [a])), ...table.getColumnActions()];
+    }
     getMountableActions(context) {
         if (typeof context.schemaComponent === 'string')
             return this.getSchemaComponentActions(context.schemaComponent);
@@ -2309,8 +3293,8 @@ export class ListRecords extends Page {
         if (context.table === true && typeof context.recordKey === 'string')
             return this.getRecordActions();
         if (context.table === true)
-            return this.getTable().getHeaderActions();
-        return this.getHeaderActions();
+            return flattenActions([...this.getTable().getHeaderActions(), ...this.getTable().getToolbarActions(), ...this.getTable().getEmptyStateActions()]);
+        return flattenActions(this.getHeaderActions());
     }
     /** Only known context shapes are kept; the record key is checked again in the database on mount. */
     resolveMountContext(clientContext) {
@@ -2326,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
@@ -2339,11 +3329,73 @@ export class ListRecords extends Page {
     /** Selected keys: the sent list, or, in "select all" mode, every record of the current query except deselected ones. */
     async getSelectedRecordKeys() {
         const clean = (list) => (Array.isArray(list) ? list.filter((k) => typeof k === 'string' || typeof k === 'number').map(String) : []);
+        const table = this.getTable(), adapter = this.getDataAdapterForTable();
+        let keys;
         // The selection comes from the browser: it is narrowed to records this table can actually display.
         if (!this.isTrackingDeselectedTableRecords)
-            return this.resource.adapter.keysInScope(clean(this.selectedTableRecords));
-        const excluded = new Set(clean(this.deselectedTableRecords));
-        return (await this.resource.adapter.listKeys(getTableQuery(this.getTable(), this))).filter((k) => !excluded.has(k));
+            keys = await adapter.keysInScope(clean(this.selectedTableRecords));
+        else {
+            const excluded = new Set(clean(this.deselectedTableRecords));
+            // "Select all" covers the whole query, or only the current page with `selectCurrentPageOnly()`.
+            const all = table.selectsCurrentPageOnly() ? (await getTableRecords(table, this, adapter)).records.map((record) => adapter.getKey(record)) : await adapter.listKeys(getTableQuery(table, this));
+            keys = all.filter((k) => !excluded.has(k));
+        }
+        // Records that cannot be selected, and anything beyond `maxSelectableRecords()`, are dropped whatever the browser sent.
+        keys = await filterSelectableKeys(table, adapter, keys);
+        const max = table.getMaxSelectableRecords();
+        return max !== null ? keys.slice(0, max) : keys;
+    }
+    /**
+     * Runs `process` for each selected record, loaded in chunks of `chunkSelectedRecords()`. Records failing the action's
+     * `authorizeIndividualRecords()` are skipped; `process` reports a failure by returning `false` or throwing. Then sends the
+     * action's success notification, or its failure notification with the number of records skipped and failed.
+     */
+    async processSelectedRecords(action, process) {
+        const keys = await this.getSelectedRecordKeys();
+        const adapter = this.getDataAdapterForTable();
+        const authorization = action.getIndividualRecordsAuthorization();
+        const ctx = { livewire: this, record: null, arguments: {}, data: {}, action };
+        let success = 0, unauthorized = 0, failed = 0;
+        const size = action.getSelectedRecordsChunkSize();
+        for (let index = 0; index < keys.length; index += size) {
+            const records = await Promise.all(keys.slice(index, index + size).map((key) => adapter.find(key)));
+            for (const record of records) {
+                if (!record) {
+                    failed++;
+                    continue;
+                }
+                const allowed = authorization === null ? true : typeof authorization === 'string' ? await canOn(this, authorization, record) : await authorization(record, { ...ctx, record });
+                if (!allowed) {
+                    unauthorized++;
+                    continue;
+                }
+                try {
+                    if ((await process(record)) === false)
+                        failed++;
+                    else
+                        success++;
+                }
+                catch (error) {
+                    failed++;
+                    if (failed === 1)
+                        console.error(error);
+                }
+            }
+        }
+        const total = keys.length;
+        if (unauthorized + failed === 0) {
+            const title = action.getSuccessNotificationTitle();
+            if (title)
+                Notification.make().success().title(title).send();
+        }
+        else {
+            const body = [action.getMissingBulkAuthorizationFailureNotificationMessage(unauthorized, total) && unauthorized ? action.getMissingBulkAuthorizationFailureNotificationMessage(unauthorized, total) : null, failed ? action.getMissingBulkProcessingFailureNotificationMessage(failed, total) : null].filter(Boolean).join(' ');
+            const notification = Notification.make().title(action.getFailureNotificationTitle(success, total) ?? action.getSuccessNotificationTitle() ?? '');
+            (success ? notification.warning() : notification.danger()).body(body || null).send();
+        }
+        if (action.shouldDeselectRecordsAfterCompletion())
+            this.deselectAllTableRecords();
+        return { total, success, unauthorized, failed };
     }
     deselectAllTableRecords() {
         this.selectedTableRecords = [];
@@ -2366,7 +3418,7 @@ export class ListRecords extends Page {
                 bulkActions.push(await action.toGroupedHtml(ctx, { table: true, bulk: true }));
         const table = this.getTable();
         return renderTable(table, this, resource.adapter, {
-            bulkActions, headerActions: await this.renderTableHeaderActions(ctx), after: await this.renderActionModals(),
+            bulkActions, headerActions: await this.renderTableHeaderActions(ctx), toolbarActions: await this.renderTableToolbarActions(ctx), emptyStateActions: await this.renderTableEmptyStateActions(ctx), after: await this.renderActionModals(),
             filtersForm: table.getFilters().length ? await this.getSchema('tableFiltersForm').toHtml() : null,
             rowActionsHtml: table.getRecordActions().length ? async (record) => {
                 const key = resource.adapter.getKey(record);
@@ -2385,7 +3437,21 @@ export class ListRecords extends Page {
             rowActions: async (record) => resource.isSimple || table.getRecordActions().length || !(await canOn(this, 'update', record)) ? [] : [{ label: t('filament-actions::edit.single.label'), url: resource.getUrl('edit', resource.adapter.getKey(record)), icon: 'c-pencil-square', key: `edit.${createHash('md5').update(resource.adapter.getKey(record)).digest('hex')}` }],
         });
     }
+    async renderTableEmptyStateActions(ctx) {
+        const html = [];
+        for (const action of this.getTable().getEmptyStateActions())
+            if (await action.isVisible(ctx))
+                html.push(await action.toHtml(ctx, { table: true }));
+        return html;
+    }
     /** Table header actions (none on a list page: they go in the page header). */
+    async renderTableToolbarActions(ctx) {
+        const html = [];
+        for (const action of this.getTable().getToolbarActions())
+            if (await action.isVisible(ctx))
+                html.push(await action.toHtml(ctx, { table: true }));
+        return html;
+    }
     async renderTableHeaderActions(ctx) {
         const html = [];
         for (const action of this.getTable().getHeaderActions())
@@ -2436,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'];
@@ -2449,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() {
@@ -2460,14 +3545,31 @@ 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]. */
     static searchAttachable(_ownerKey, _search) { throw new Error('RelationManager.searchAttachable() must be defined.'); }
     /** Label of an attachable record, or `null` if it is not attachable (also used as validation). */
     static attachableLabel(_ownerKey, _recordKey) { throw new Error('RelationManager.attachableLabel() must be defined.'); }
+    // --- one-to-many: to be defined by managers offering Associate / Dissociate
+    /** Sets the owner of an existing record (its foreign key). */
+    static associate(_ownerKey, _recordKey) { throw new Error('RelationManager.associate() must be defined.'); }
+    /** Clears the owner of records (their foreign key), without deleting them. */
+    static dissociate(_ownerKey, _recordKeys) { throw new Error('RelationManager.dissociate() must be defined.'); }
+    /** Associable records matching the search: [key, label]. */
+    static searchAssociable(_ownerKey, _search) { throw new Error('RelationManager.searchAssociable() must be defined.'); }
+    /** Label of an associable record, or `null` if it is not associable (also used as validation). */
+    static associableLabel(_ownerKey, _recordKey) { throw new Error('RelationManager.associableLabel() must be defined.'); }
     getHeaderActions() { return []; }
     placeholder() {
         return `<div role="status" aria-busy="true" style="height: 8rem; ;" class="fi-section fi-loading-section fi-grid-col"><span class="fi-sr-only">${e(t('filament::components/loading-section.label'))}</span></div>`;
@@ -2599,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; }
@@ -2640,11 +3770,23 @@ class ResourceFormPage extends Page {
         return Action.make('cancel').label(t(`filament-panels::resources/pages/${this.getOperation()}-record.form.actions.cancel.label`)).color('gray')
             .alpineClickHandler(`document.referrer ? window.history.back() : Livewire.navigate(${js(this.getCancelUrl())})`);
     }
+    // --- lifecycle hooks around filling and validation (to override; none can be called from the browser)
+    /** Before the form is filled (with defaults, or with the record on the edit page). */
+    beforeFill() { }
+    /** After the form is filled. */
+    afterFill() { }
+    /** Before the form is validated, when it is submitted. */
+    beforeValidate() { }
+    /** After the form is validated successfully, before the data is transformed and saved. */
+    afterValidate() { }
     /** Validates the form; on error, sets the errors on the component and notifies the browser. */
     async validateForm() {
+        await this.beforeValidate();
         this._errors = await validateSchema(this.getSchema('form'));
-        if (!Object.keys(this._errors).length)
+        if (!Object.keys(this._errors).length) {
+            await this.afterValidate();
             return true;
+        }
         this.dispatch('form-validation-error', { livewireId: this.id });
         return false;
     }
@@ -2652,7 +3794,7 @@ class ResourceFormPage extends Page {
 /** Record creation page. */
 export class CreateRecord extends ResourceFormPage {
     static callable = ['create', 'createAnother'];
-    mount() { fillSchema(this.getSchema('form'), this.data); }
+    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(' ') }); }
@@ -2684,15 +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 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);
@@ -2710,34 +3858,62 @@ export class DeleteAction {
             .hidden(({ livewire, record }) => { const target = record ?? livewire._record; return target ? livewire.getDataAdapter().isTrashed(target) : false; })
             .modalHeading(({ livewire, record }) => t('filament-actions::delete.single.modal.heading', { label: livewire.resource.getRecordTitle(record ?? livewire._record) }))
             .modalSubmitActionLabel(t('filament-actions::delete.single.modal.actions.delete.label'))
-            .action(async ({ livewire, record }) => {
+            .action(async (ctx) => {
+            const { livewire, record } = ctx;
             const adapter = livewire.getDataAdapter();
             const inTable = typeof livewire.getTable === 'function';
             await adapter.delete(inTable ? adapter.getKey(record) : livewire.recordKey);
-            Notification.make().success().title(t('filament-actions::delete.single.notifications.deleted.title')).send();
-            if (!inTable)
-                livewire.redirect(livewire.resource.getUrl(), true);
+            await finishAction(ctx.action, ctx, t('filament-actions::delete.single.notifications.deleted.title'), inTable ? null : livewire.resource.getUrl());
         });
     }
 }
+/**
+ * Success outcome of a prebuilt action: its notification (`successNotificationTitle()`, `successNotification()`), then the
+ * redirect (`successRedirectUrl()`, or `fallbackUrl`). Only local or http(s) URLs are followed.
+ */
+async function finishAction(action, ctx, defaultTitle, fallbackUrl = null) {
+    let notification = Notification.make().success().title(action.getSuccessNotificationTitle() ?? defaultTitle);
+    const customize = action.getSuccessNotificationCustomizer();
+    if (customize)
+        notification = customize(notification, ctx);
+    notification?.send();
+    const url = (await action.getSuccessRedirectUrl(ctx)) ?? fallbackUrl;
+    if (url && /^(\/(?!\/)|https?:\/\/)/.test(url))
+        ctx.livewire.redirect(url, true);
+}
 /** Duplicates a table row: the copy takes the record's attributes, except its key, timestamps and excluded ones. */
 export class ReplicateAction {
     static make() {
         let excluded = [];
+        let beforeSaved = null, afterSaved = null;
         const action = Action.make('replicate').authorize(({ livewire, record }) => canOn(livewire, 'replicate', record))
             .label(t('filament-actions::replicate.single.label')).tableIcon('c-square-2-stack').groupedIcon('m-square-2-stack')
             .modalHeading(({ livewire, record }) => t('filament-actions::replicate.single.modal.heading', { label: livewire.resource.getRecordTitle(record) }))
             .modalSubmitActionLabel(t('filament-actions::replicate.single.modal.actions.replicate.label'))
-            .action(async ({ livewire, record }) => {
+            // With a modal form (`schema()`), it is filled with the record's attributes; its data overrides them in the copy.
+            .fillForm(({ record }) => {
+            const source = typeof record?.toJSON === 'function' ? record.toJSON() : { ...record };
+            for (const attribute of ['id', 'created_at', 'updated_at', ...excluded])
+                delete source[attribute];
+            return source;
+        })
+            .action(async (ctx) => {
+            const { livewire, record } = ctx;
             const adapter = livewire.getDataAdapter();
             const source = typeof record?.toJSON === 'function' ? record.toJSON() : { ...record };
             // No primary key, no created/updated timestamps.
             for (const attribute of ['id', 'created_at', 'updated_at', ...excluded])
                 delete source[attribute];
-            await adapter.create(source);
-            Notification.make().success().title(t('filament-actions::replicate.single.notifications.replicated.title')).send();
+            const data = ctx.data ?? {};
+            const replica = { ...source, ...data };
+            await beforeSaved?.({ replica, data, record });
+            const saved = await adapter.create(replica);
+            await afterSaved?.({ replica: saved, data, record });
+            await finishAction(ctx.action, { ...ctx, replica: saved }, t('filament-actions::replicate.single.notifications.replicated.title'));
         });
         action.excludeAttributes = (attributes) => { excluded = attributes; return action; };
+        action.beforeReplicaSaved = (callback) => { beforeSaved = callback; return action; };
+        action.afterReplicaSaved = (callback) => { afterSaved = callback; return action; };
         return action;
     }
 }
@@ -2752,9 +3928,10 @@ export class CreateAction {
             .modalSubmitActionLabel(t('filament-actions::create.single.modal.actions.create.label'))
             .extraModalFooterActions([Action.make('createAnother').label(t('filament-actions::create.single.modal.actions.create_another.label')).color('gray').action(`callMountedAction(${js({ another: true })})`)])
             .schema((schema) => of(schema.livewire).form(schema))
-            .action(async ({ livewire, data }) => {
-            await of(livewire).adapter.create(data);
-            Notification.make().success().title(t('filament-actions::create.single.notifications.created.title')).send();
+            .action(async (ctx) => {
+            const record = await of(ctx.livewire).adapter.create(ctx.data);
+            await saveSchemaRelationships(ctx.schema, record);
+            await finishAction(ctx.action, { ...ctx, record }, t('filament-actions::create.single.notifications.created.title'));
         });
     }
 }
@@ -2769,10 +3946,18 @@ export class EditAction {
             .modalSubmitActionLabel(t('filament-actions::edit.single.modal.actions.save.label'))
             .schema((schema) => of(schema.livewire).form(schema))
             .fillForm(({ record }) => ({ ...record }))
-            .action(async ({ livewire, record, data }) => {
-            const adapter = of(livewire).adapter;
-            await adapter.update(adapter.getKey(record), data);
-            Notification.make().success().title(t('filament-actions::edit.single.notifications.saved.title')).send();
+            .action(async (ctx) => {
+            const adapter = of(ctx.livewire).adapter;
+            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'));
         });
     }
 }
@@ -2802,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();
         });
     }
@@ -2840,53 +4027,179 @@ export class DetachBulkAction {
         });
     }
 }
+/** Gives an existing record to the owner of a one-to-many relation manager (its foreign key). */
+export class AssociateAction {
+    static make() {
+        return Action.make('associate')
+            .label(t('filament-actions::associate.single.label')).color('gray').modalWidth('lg')
+            .modalHeading(({ livewire }) => t('filament-actions::associate.single.modal.heading', { label: String(livewire.resource.modelLabel).split(' ').map(ucfirst).join(' ') }))
+            .modalSubmitActionLabel(t('filament-actions::associate.single.modal.actions.associate.label'))
+            .extraModalFooterActions([Action.make('associateAnother').label(t('filament-actions::associate.single.modal.actions.associate_another.label')).color('gray').action(`callMountedAction(${js({ another: true })})`)])
+            .schema((schema) => {
+            const livewire = schema.livewire;
+            return [Select.make('recordId').label(t('filament-actions::associate.single.modal.fields.record_id.label')).hiddenLabel().required()
+                    .getSearchResultsUsing((search) => managerOf(livewire).searchAssociable(livewire.ownerRecord, search))
+                    .getOptionLabelUsing((value) => managerOf(livewire).associableLabel(livewire.ownerRecord, value))];
+        })
+            .action(async ({ livewire, data }) => {
+            await managerOf(livewire).associate(livewire.ownerRecord, String(data.recordId));
+            Notification.make().success().title(t('filament-actions::associate.single.notifications.associated.title')).send();
+        });
+    }
+}
+/** Removes a row from the owner (clears its foreign key) without deleting it. */
+export class DissociateAction {
+    static make() {
+        return Action.make('dissociate')
+            .label(t('filament-actions::dissociate.single.label')).color('danger').icon('c-x-mark').groupedIcon('m-x-mark')
+            .requiresConfirmation().modalIcon('o-x-mark')
+            .modalHeading(({ livewire, record }) => t('filament-actions::dissociate.single.modal.heading', { label: livewire.resource.getRecordTitle(record) }))
+            .modalSubmitActionLabel(t('filament-actions::dissociate.single.modal.actions.dissociate.label'))
+            .action(async ({ livewire, record }) => {
+            await managerOf(livewire).dissociate(livewire.ownerRecord, [livewire.resource.adapter.getKey(record)]);
+            Notification.make().success().title(t('filament-actions::dissociate.single.notifications.dissociated.title')).send();
+        });
+    }
+}
+/** Dissociates the selected rows. */
+export class DissociateBulkAction {
+    static make() {
+        return Action.make('dissociate')
+            .label(t('filament-actions::dissociate.multiple.label')).color('danger').icon('m-x-mark')
+            .requiresConfirmation().modalIcon('o-x-mark')
+            .modalHeading(({ livewire }) => t('filament-actions::dissociate.multiple.modal.heading', { label: livewire.resource.getPluralModelLabel() }))
+            .modalSubmitActionLabel(t('filament-actions::dissociate.multiple.modal.actions.dissociate.label'))
+            .action(async ({ livewire }) => {
+            // Selected keys come from the manager's current query, so they belong to the owner.
+            await managerOf(livewire).dissociate(livewire.ownerRecord, await livewire.getSelectedRecordKeys());
+            Notification.make().success().title(t('filament-actions::dissociate.multiple.notifications.dissociated.title')).send();
+            livewire.deselectAllTableRecords();
+        });
+    }
+}
 /** 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 ({ livewire }) => {
-            await livewire.getDataAdapter().restore(livewire.recordKey);
-            await livewire.hydrate();
-            Notification.make().success().title(t('filament-actions::restore.single.notifications.restored.title')).send();
+            .action(async (ctx) => {
+            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'));
         });
     }
 }
 /** 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 ({ livewire }) => {
-            await livewire.getDataAdapter().forceDelete(livewire.recordKey);
-            Notification.make().success().title(t('filament-actions::force-delete.single.notifications.deleted.title')).send();
-            livewire.redirect(livewire.resource.getUrl(), true);
+            .action(async (ctx) => {
+            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());
         });
     }
 }
-/** Deletes the records selected in a table. */
+/** Actions of a list that may contain action groups: the groups' actions are mounted, never the groups. */
+const flattenActions = (actions) => actions.flatMap((action) => (action instanceof ActionGroup ? action.getActions() : [action]));
+/** Value of the table's trashed filter: `'1'` with deleted records, `'0'` only deleted records, `null` without. */
+const trashedFilterValue = (livewire) => {
+    const filter = livewire.getTable?.().getFilters().find((candidate) => candidate instanceof TrashedFilter);
+    const value = filter ? livewire.tableFilters?.[filter.name]?.value : null;
+    return value === '1' || value === '0' ? value : null;
+};
+/**
+ * Deletes the records selected in a table. Without `authorizeIndividualRecords()`, the selection is deleted in one query;
+ * with it, record by record, and the notification reports the records that could not be deleted.
+ */
 export class DeleteBulkAction {
     static make() {
         return Action.make('delete').authorize(({ livewire, record }) => canOn(livewire, 'deleteAny', record))
             .label(t('filament-actions::delete.multiple.label')).color('danger').icon('m-trash')
             .requiresConfirmation().modalIcon('o-trash')
+            // Showing only deleted records: there is nothing left to delete.
+            .hidden(({ livewire }) => trashedFilterValue(livewire) === '0')
             .modalHeading(({ livewire }) => t('filament-actions::delete.multiple.modal.heading', { label: livewire.resource.getTitleCasePluralModelLabel() }))
             .modalSubmitActionLabel(t('filament-actions::delete.multiple.modal.actions.delete.label'))
-            .action(async ({ livewire }) => {
-            await livewire.getDataAdapterForTable().deleteMany(await livewire.getSelectedRecordKeys());
-            Notification.make().success().title(t('filament-actions::delete.multiple.notifications.deleted.title')).send();
+            .successNotificationTitle(t('filament-actions::delete.multiple.notifications.deleted.title'))
+            .failureNotificationTitle((success, total) => (success ? tc('filament-actions::delete.multiple.notifications.deleted_partial.title', success, { count: success, total }) : tc('filament-actions::delete.multiple.notifications.deleted_none.title', total, { count: total, total })))
+            .missingBulkAuthorizationFailureNotificationMessage((count, total) => tc(`filament-actions::delete.multiple.notifications.${count === total ? 'deleted_none' : 'deleted_partial'}.missing_authorization_failure_message`, count, { count }))
+            .missingBulkProcessingFailureNotificationMessage((count, total) => tc(`filament-actions::delete.multiple.notifications.${count === total ? 'deleted_none' : 'deleted_partial'}.missing_processing_failure_message`, count, { count }))
+            .deselectRecordsAfterCompletion()
+            .action(async ({ livewire, action }) => {
+            const adapter = livewire.getDataAdapterForTable();
+            if (action.getIndividualRecordsAuthorization() !== null) {
+                await livewire.processSelectedRecords(action, (record) => adapter.delete(adapter.getKey(record)));
+                return;
+            }
+            await adapter.deleteMany(await livewire.getSelectedRecordKeys());
+            Notification.make().success().title(action.getSuccessNotificationTitle() ?? t('filament-actions::delete.multiple.notifications.deleted.title')).send();
             livewire.deselectAllTableRecords();
         });
     }
 }
+/** Restores the soft-deleted records selected in a table, each one checked with the `restore` ability. */
+export class RestoreBulkAction {
+    static make() {
+        return Action.make('restore').authorize(({ livewire, record }) => canOn(livewire, 'restoreAny', record))
+            .label(t('filament-actions::restore.multiple.label')).color('gray').icon('m-arrow-uturn-left')
+            .requiresConfirmation().modalIcon('o-arrow-uturn-left')
+            .hidden(({ livewire }) => trashedFilterValue(livewire) === null)
+            .modalHeading(({ livewire }) => t('filament-actions::restore.multiple.modal.heading', { label: livewire.resource.getTitleCasePluralModelLabel() }))
+            .modalSubmitActionLabel(t('filament-actions::restore.multiple.modal.actions.restore.label'))
+            .authorizeIndividualRecords('restore')
+            .successNotificationTitle(t('filament-actions::restore.multiple.notifications.restored.title'))
+            .failureNotificationTitle((success, total) => (success ? tc('filament-actions::restore.multiple.notifications.restored_partial.title', success, { count: success, total }) : tc('filament-actions::restore.multiple.notifications.restored_none.title', total, { count: total, total })))
+            .missingBulkAuthorizationFailureNotificationMessage((count, total) => tc(`filament-actions::restore.multiple.notifications.${count === total ? 'restored_none' : 'restored_partial'}.missing_authorization_failure_message`, count, { count }))
+            .missingBulkProcessingFailureNotificationMessage((count, total) => tc(`filament-actions::restore.multiple.notifications.${count === total ? 'restored_none' : 'restored_partial'}.missing_processing_failure_message`, count, { count }))
+            .deselectRecordsAfterCompletion()
+            .action(async ({ livewire, action }) => {
+            const adapter = livewire.getDataAdapterForTable();
+            // Only deleted records are restored; the others count as failures.
+            await livewire.processSelectedRecords(action, (record) => adapter.isTrashed(record) && adapter.restore(adapter.getKey(record)));
+        });
+    }
+}
+/** Permanently deletes the soft-deleted records selected in a table, each one checked with the `forceDelete` ability. */
+export class ForceDeleteBulkAction {
+    static make() {
+        return Action.make('forceDelete').authorize(({ livewire, record }) => canOn(livewire, 'forceDeleteAny', record))
+            .label(t('filament-actions::force-delete.multiple.label')).color('danger').icon('m-trash')
+            .requiresConfirmation().modalIcon('o-trash')
+            .hidden(({ livewire }) => trashedFilterValue(livewire) === null)
+            .modalHeading(({ livewire }) => t('filament-actions::force-delete.multiple.modal.heading', { label: livewire.resource.getTitleCasePluralModelLabel() }))
+            .modalSubmitActionLabel(t('filament-actions::force-delete.multiple.modal.actions.delete.label'))
+            .authorizeIndividualRecords('forceDelete')
+            .successNotificationTitle(t('filament-actions::force-delete.multiple.notifications.deleted.title'))
+            .failureNotificationTitle((success, total) => (success ? tc('filament-actions::force-delete.multiple.notifications.deleted_partial.title', success, { count: success, total }) : tc('filament-actions::force-delete.multiple.notifications.deleted_none.title', total, { count: total, total })))
+            .missingBulkAuthorizationFailureNotificationMessage((count, total) => tc(`filament-actions::force-delete.multiple.notifications.${count === total ? 'deleted_none' : 'deleted_partial'}.missing_authorization_failure_message`, count, { count }))
+            .missingBulkProcessingFailureNotificationMessage((count, total) => tc(`filament-actions::force-delete.multiple.notifications.${count === total ? 'deleted_none' : 'deleted_partial'}.missing_processing_failure_message`, count, { count }))
+            .deselectRecordsAfterCompletion()
+            .action(async ({ livewire, action }) => {
+            const adapter = livewire.getDataAdapterForTable();
+            await livewire.processSelectedRecords(action, (record) => adapter.forceDelete(adapter.getKey(record)));
+        });
+    }
+}
 /** Record edit page. */
 export class EditRecord extends ResourceFormPage {
     static callable = ['save'];
@@ -2899,18 +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() {
@@ -2965,9 +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 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();
@@ -2988,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. */
@@ -3002,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()]; }
@@ -3047,9 +4427,43 @@ async function renderUserMenu(component, position) {
         profileUrl: profileUrl && !custom.profile ? profileUrl : null,
         itemsBefore: await html(visible.filter((item) => item.getSort() < 0)), itemsAfter: await html(visible.filter((item) => item.getSort() >= 0)),
         themes: panel.getThemes().map((theme) => ({ id: theme.id, label: theme.label, swatch: swatchOf(theme, panel) })), activeTheme: panel.resolveTheme(req)?.id ?? null,
+        hasThemeSwitcher: panel.hasDarkMode() && !panel.hasDarkModeForced(), defaultThemeMode: panel.getDefaultThemeMode(),
+    });
+}
+/**
+ * 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);
 }
-/** Tenant menu: current tenant, other tenants, registration, profile. */
 async function renderTenantMenu(component, options) {
     const { panel, user } = component._ctx;
     const tenant = panel.getTenant();
@@ -3062,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));
@@ -3080,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. */
@@ -3091,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(),
@@ -3128,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();
@@ -3139,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,
@@ -3208,9 +4626,26 @@ 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();
+function checkSharedGuard(panel) {
+    const guard = panel.getAuthGuard();
+    if (guard === null)
+        return;
+    const other = guardOwners.get(guard);
+    if (!other || other === panel) {
+        guardOwners.set(guard, panel);
+        return;
+    }
+    if (other._key !== panel._key)
+        throw new Error(`Panels "${other.getId()}" and "${panel.getId()}" share the auth guard "${guard}" but not the same key: give them the same key, or a different authGuard().`);
+    if (other.getAuth() !== panel.getAuth())
+        throw new Error(`Panels "${other.getId()}" and "${panel.getId()}" share the auth guard "${guard}" but not the same auth provider: share the provider, or give one of them authGuard(null) or another guard.`);
+}
 export function panelRouter(panel, runtime) {
+    checkSharedGuard(panel);
     const owner = runtimePanels.get(runtime);
     if (owner && owner !== panel)
         throw new Error(`This WireRuntime already serves panel "${owner.getId()}": create one WireRuntime per panel.`);
@@ -3223,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) });
@@ -3245,34 +4682,33 @@ export function panelRouter(panel, runtime) {
     const name = (suffix) => `navette.${panel.getId()}.${suffix}`;
     const livewire = panel.getLivewirePrefix();
     // The notifications mailbox is per browser: it is keyed by the CSRF token.
-    const context = async (req, res) => ({ req, res, panel, user: await panel.user(req), mailbox: csrfToken(req, res), tenant: null });
-    /** Tenant designated by a panel URL, if the user is a member. */
-    const tenantFromPath = async (path, user) => {
+    const context = async (req, res) => {
+        const user = await panel.user(req);
+        // Signed in through a shared session, but not allowed into this panel: treated as a guest that gets 403 pages.
+        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 = (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 || RESERVED_SEGMENTS.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();
@@ -3295,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);
@@ -3312,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);
@@ -3328,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;
@@ -3374,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 ?? '',
-            bodyClass, body, spa: panel.hasSpaMode(),
+        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) => {
@@ -3387,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;
         }
     };
@@ -3398,58 +4863,140 @@ export function panelRouter(panel, runtime) {
     const guestPage = (path, component, title, params = () => ({})) => {
         router.get(panel.getBaseUrl(path), async (req, res) => {
             const ctx = await context(req, res);
+            if (ctx.denied)
+                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(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 }));
         });
     };
+    // Files offered to the signed-in user (exports, failed import rows): only the user who created them can download them.
+    router.get(panel.getBaseUrl('downloads/:token'), async (req, res) => {
+        const ctx = await context(req, res);
+        if (!ctx.user || ctx.denied)
+            return forbidden(req, res);
+        const file = panel.getDownloads().get(String(req.params.token), ctx.user.id);
+        if (!file)
+            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');
+        res.setHeader('Cache-Control', 'private, no-store');
+        res.send(file.content);
+    });
     if (LoginPage) {
-        guestPage('login', name('auth.login'), t('filament-panels::auth/pages/login.title'));
+        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());
         });
     }
     if (RegistrationPage)
-        guestPage('register', name('auth.register'), t('filament-panels::auth/pages/register.title'));
+        guestPage(panel.getAuthPaths().registration, name('auth.register'), t('filament-panels::auth/pages/register.title'));
     if (passwordReset) {
-        guestPage('password-reset/request', name('auth.password-reset.request'), t('filament-panels::auth/pages/password-reset/request-password-reset.title'));
-        guestPage('password-reset/reset', 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 }));
+        guestPage(panel.getAuthPaths().passwordResetRequest, name('auth.password-reset.request'), t('filament-panels::auth/pages/password-reset/request-password-reset.title'));
+        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(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(req, res);
+            return null;
+        }
         if (!ctx.user) {
+            if (panel.allowsGuests())
+                return ctx;
             res.redirect(panel.getLoginUrl());
             return null;
         }
@@ -3457,62 +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(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 (RESERVED_SEGMENTS.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() && (RESERVED_SEGMENTS.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();
@@ -3529,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']);
 }