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

package/THIRD-PARTY-NOTICES.md

@@ -7,6 +7,7 @@ Navette is an independent project, not affiliated with or endorsed by the Filame
 | [Filament](https://github.com/filamentphp/filament) © Filament | HTML markup derived from its Blade views, compiled CSS and JavaScript (`@navette-js/panels/dist/filament`), English translations (`@navette-js/support/data`), image editor icons (`@navette-js/support/icons/filament`) | MIT | `packages/panels/dist/FILAMENT-LICENSE.md`, `packages/support/icons/filament/LICENSE.md` |
 | [Livewire](https://github.com/livewire/livewire) © Caleb Porzio | Client script `livewire.js` (`@navette-js/wire/vendor`); the server runtime follows its protocol | MIT | `packages/wire/vendor/LIVEWIRE-LICENSE.md` |
 | [Heroicons](https://github.com/tailwindlabs/heroicons) | SVG icons (`@navette-js/support/icons`) | MIT | `packages/support/icons/HEROICONS-LICENSE.md` |
+| [QR Code generator library](https://www.nayuki.io/page/qr-code-generator-library) © Project Nayuki | Structure of the QR Code encoder (`@navette-js/panels`, `qr-code.ts`) | MIT | header of `packages/panels/src/qr-code.ts` |
 | [Inter](https://github.com/rsms/inter) © The Inter Project Authors | Default font files (`@navette-js/panels/dist/filament/fonts`) | SIL Open Font License 1.1 | `packages/panels/dist/filament/fonts/INTER-LICENSE.txt` |
 
 Runtime dependencies installed from npm (Express, Knex, Objection, better-sqlite3, Tiptap, EJS, Busboy…) keep their own licenses.

package/dist/navette/navette/calendar.css

@@ -1,9 +1,9 @@
 /*
- * Navette — calendrier (CalendarWidget).
+ * Navette — calendar (CalendarWidget).
  *
- * Composant propre à Navette. Tout passe par des variables : redéfinissez-les sur `.nv-cal` (ou sur une classe ajoutée par
- * `getExtraClasses()`) pour changer hauteur des cases, rayons, bordures… Les couleurs des événements viennent des classes
- * `fi-color fi-color-<nom>` de Filament : toute couleur déclarée par le panel fonctionne.
+ * A Navette component. Everything goes through variables: redefine them on `.nv-cal` (or on a class added by
+ * `getExtraClasses()`) to change the height of the cells, the radii, the borders… Event colors come from Filament's
+ * `fi-color fi-color-<name>` classes: any color declared by the panel works.
  */
 .nv-cal {
     --nv-cal-border: var(--gray-200);
@@ -86,7 +86,7 @@ button.nv-cal-day-number:hover { background: var(--nv-cal-surface-muted); }
 :where(.dark) :is(a, button).nv-cal-event:hover { background: color-mix(in oklab, var(--color-400) 22%, transparent); }
 .nv-cal-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .nv-cal-event-time { flex: none; font-variant-numeric: tabular-nums; opacity: 0.8; }
-/* Événement sur plusieurs jours : les bords intérieurs sont droits et collés à la case voisine. */
+/* An event over several days: its inner edges are straight and touch the next cell. */
 .nv-cal-grid .nv-cal-event-continued { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -0.375rem; }
 .nv-cal-grid .nv-cal-event-continues { border-start-end-radius: 0; border-end-end-radius: 0; margin-inline-end: -0.375rem; }
 .nv-cal-more { align-self: flex-start; padding: 0 0.375rem; border-radius: var(--nv-cal-event-radius); font-size: 0.75rem; font-weight: 500; color: var(--nv-cal-muted); }

package/dist/navette/navette/motion.css

@@ -1,40 +1,40 @@
 /*
- * Navette — mouvement et indicateurs de chargement.
+ * Navette — motion and loading indicators.
  *
- * Écart volontaire avec FilamentPHP (décision du 2026-11-12) : cette feuille n'ajoute que du mouvement et des indicateurs,
- * sans toucher au balisage ni aux dimensions. Elle se désactive avec `Panel.motion(false)`, ce qui rend l'interface de Filament
- * telle quelle. Les courbes reprennent l'esprit d'iOS : ressorts doux, sorties rapides, échelle légère à la pression.
- * Tout est neutralisé pour les personnes qui demandent moins d'animations (`prefers-reduced-motion`).
+ * A deliberate difference from FilamentPHP (decided on 2026-11-12): this sheet only adds motion and indicators, without
+ * touching the markup or the dimensions. `Panel.motion(false)` turns it off, which renders Filament's interface as is.
+ * The curves follow the spirit of iOS: soft springs, quick exits, a slight scale on press.
+ * Everything is neutralized for people who ask for less motion (`prefers-reduced-motion`).
  */
 :root {
-    --nv-spring: cubic-bezier(0.32, 0.72, 0, 1);      /* glissement amorti, sans dépassement */
-    --nv-bounce: cubic-bezier(0.2, 0.9, 0.3, 1.25);   /* léger dépassement à l'arrivée */
+    --nv-spring: cubic-bezier(0.32, 0.72, 0, 1);      /* damped slide, without overshoot */
+    --nv-bounce: cubic-bezier(0.2, 0.9, 0.3, 1.25);   /* slight overshoot on arrival */
     --nv-out: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    /* --- arrivée de page : le contenu monte de quelques pixels en apparaissant */
+    /* --- page arrival: the content rises a few pixels as it appears */
     @keyframes nv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
-    /* `backwards` et non `both` : une animation de `transform` qui reste appliquée après sa fin fait de l'élément le bloc conteneur de ses descendants en `position: fixed` ; le fond d'une modale ne couvrait alors que la page, pas la fenêtre. */
+    /* `backwards`, not `both`: a `transform` animation still applied after its end makes the element the containing block of its `position: fixed` descendants; the backdrop of a modal then only covered the page, not the window. */
     .fi-page { animation: nv-rise 0.42s var(--nv-spring) backwards; }
     .fi-simple-main { animation: nv-rise 0.5s var(--nv-spring) backwards; }
 
-    /* --- pression : boutons, liens d'action, éléments de navigation */
+    /* --- press: buttons, action links, navigation items */
     .fi-btn, .fi-icon-btn, .fi-link, .fi-tabs-item, .fi-sidebar-item-btn, .fi-dropdown-list-item, .fi-pagination-item-btn {
         transition: transform 0.18s var(--nv-spring), background-color 0.2s var(--nv-out), color 0.2s var(--nv-out), box-shadow 0.2s var(--nv-out), opacity 0.2s var(--nv-out);
     }
     .fi-btn:active:not(.fi-disabled, [disabled]), .fi-icon-btn:active:not(.fi-disabled, [disabled]) { transform: scale(0.96); }
     .fi-link:active, .fi-tabs-item:active, .fi-sidebar-item-btn:active, .fi-dropdown-list-item:active:not(.fi-disabled), .fi-pagination-item-btn:active { transform: scale(0.97); }
 
-    /* --- modales : la fenêtre arrive avec un ressort ; le fond reste celui de Filament (voile sombre, sans flou) */
+    /* --- modals: the window arrives with a spring; the backdrop stays Filament's (dark veil, no blur) */
     .fi-modal-window { transition-timing-function: var(--nv-spring) !important; transition-duration: 0.42s !important; }
     .fi-modal-window.fi-transition-leave { transition-timing-function: var(--nv-out) !important; transition-duration: 0.2s !important; }
 
-    /* --- menus déroulants : ils s'ouvrent depuis leur déclencheur */
+    /* --- dropdowns: they open from their trigger */
     @keyframes nv-pop { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } }
     .fi-dropdown-panel:not([style*="display: none"]) { animation: nv-pop 0.26s var(--nv-bounce); transform-origin: top; }
 
-    /* --- notifications : entrée latérale amortie */
+    /* --- notifications: damped side entrance */
     .fi-no-notification { transition-timing-function: var(--nv-spring) !important; transition-duration: 0.45s !important; }
 
     /* --- surfaces et champs */
@@ -44,7 +44,7 @@
     .fi-badge { transition: background-color 0.2s var(--nv-out), color 0.2s var(--nv-out); }
     .fi-sidebar-group-items { transition: opacity 0.25s var(--nv-out); }
 
-    /* --- indicateur de chargement des zones différées : une roue, au lieu d'un cadre vide */
+    /* --- loading indicator of deferred areas: a spinner, instead of an empty frame */
     @keyframes nv-spin { to { transform: rotate(360deg); } }
     @keyframes nv-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
     .fi-loading-section { position: relative; animation: nv-breathe 1.6s ease-in-out infinite; }
@@ -54,8 +54,8 @@
         animation: nv-spin 0.7s linear infinite;
     }
 
-    /* --- éléments qui arrivent après l'affichage de la page : ils se déploient au lieu d'apparaître d'un coup */
-    /* compteur d'onglet (chargé après coup) : il s'élargit depuis zéro, l'onglet s'étire avec lui */
+    /* --- elements that arrive after the page is displayed: they unfold instead of popping in */
+    /* tab counter (loaded afterwards): it widens from zero, and the tab stretches with it */
     @keyframes nv-expand {
         from { opacity: 0; max-width: 0; padding-inline: 0; margin-inline-start: -0.5rem; transform: scale(0.6); }
         60% { opacity: 1; }
@@ -64,22 +64,22 @@
     .fi-tabs-item > .fi-badge { overflow: hidden; white-space: nowrap; transform-origin: left center; animation: nv-expand 0.5s var(--nv-spring) both; }
     /* roue d'attente du compteur : elle s'efface en douceur */
     .fi-tabs-item-badge-placeholder { transition: opacity 0.2s var(--nv-out); }
-    /* zone chargée à la demande (relation manager, widget) : son contenu monte en place quand il remplace la roue */
+    /* area loaded on demand (relation manager, widget): its content rises into place when it replaces the spinner */
     .fi-resource-relation-manager, .fi-wi-widget { animation: nv-rise 0.45s var(--nv-spring) backwards; }
-    /* lignes d'une table qui vient d'être rechargée, erreurs de validation, lignes ajoutées à un Repeater */
+    /* rows of a table that was just reloaded, validation errors, items added to a Repeater */
     @keyframes nv-fade-in { from { opacity: 0; } to { opacity: 1; } }
     @keyframes nv-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
     .fi-fo-field-wrp-error-message { animation: nv-unfold 0.3s var(--nv-spring) backwards; }
-    /* `backwards` et non `both` : une animation d'opacité qui reste appliquée garde la ligne en contexte d'empilement ; la liste d'un sélecteur de la ligne passait alors sous le bouton d'ajout du Repeater. */
+    /* `backwards`, not `both`: an opacity animation still applied keeps the row a stacking context; the list of a select in the row then went under the Repeater's add button. */
     .fi-fo-table-repeater tbody tr { animation: nv-fade-in 0.3s var(--nv-out) backwards; }
     .fi-ta-summary-row, .fi-ta-summary-header-row { animation: nv-fade-in 0.35s var(--nv-out) backwards; }
 
-    /* --- contenu qui se recharge : il s'estompe légèrement pendant la requête */
+    /* --- content being reloaded: it fades slightly during the request */
     .fi-ta-content-ctn { transition: opacity 0.2s var(--nv-out); }
     html[data-nv-busy] .fi-ta-content-ctn { opacity: 0.6; }
 }
 
-/* --- pastille d'activité : visible quand une requête dure (posée par motion.js) */
+/* --- activity pill: visible while a request takes a while (added by motion.js) */
 .nv-busy {
     position: fixed; top: 0.75rem; left: 50%; z-index: 60; display: flex; align-items: center; gap: 0.5rem;
     padding: 0.4rem 0.8rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; pointer-events: none;

package/dist/navette/navette/motion.js

@@ -1,7 +1,7 @@
-// Navette — pastille d'activité : signale une requête qui dure, pour que l'écran ne paraisse jamais figé.
-// Écart volontaire avec FilamentPHP, désactivable avec `Panel.motion(false)`. Aucune dépendance : s'appuie sur les hooks de Livewire.
+// Navette activity pill: signals a request that takes a while, so that the screen never looks frozen.
+// A deliberate difference from FilamentPHP, turned off with `Panel.motion(false)`. No dependency: it relies on Livewire's hooks.
 (() => {
-    const DELAY = 350; // en dessous, la réponse arrive avant qu'un indicateur soit utile
+    const DELAY = 350; // below this, the response arrives before an indicator would help
     let pending = 0;
     let timer = null;
 
@@ -12,7 +12,7 @@
             element.className = 'nv-busy';
             element.setAttribute('role', 'status');
             element.setAttribute('aria-live', 'polite');
-            // Conservée d'une page à l'autre par la navigation de Livewire.
+            // Kept from one page to the next by Livewire's navigation.
             element.setAttribute('wire:ignore', '');
             element.setAttribute('x-persist', 'nv-busy');
             element.textContent = document.documentElement.lang?.startsWith('fr') ? 'Chargement…' : 'Loading…';
@@ -34,7 +34,7 @@
     const end = () => { pending = Math.max(0, pending - 1); update(); };
 
     document.addEventListener('livewire:init', () => {
-        // Chaque requête de mise à jour d'un composant.
+        // Every update request of a component.
         window.Livewire.hook('commit', ({ succeed, fail }) => {
             begin();
             let done = false;
@@ -43,7 +43,7 @@
             fail(finish);
         });
     });
-    // Navigation entre pages.
+    // Navigation between pages.
     document.addEventListener('livewire:navigate', begin);
     document.addEventListener('livewire:navigated', () => { pending = 0; update(); });
 })();

package/dist/navette/navette/security-keys.css

@@ -0,0 +1,11 @@
+/* Navette: SecurityKeyInput field and the list of registered security keys. */
+.nv-security-key { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+.nv-security-key-status { font-size: 0.875rem; line-height: 1.25rem; color: var(--gray-600); }
+.dark .nv-security-key-status { color: var(--gray-400); }
+.nv-security-key-status-error { color: var(--danger-600); }
+.dark .nv-security-key-status-error { color: var(--danger-400); }
+.nv-security-keys { display: grid; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; }
+.nv-security-key-name { font-weight: 500; color: var(--gray-950); }
+.dark .nv-security-key-name { color: #fff; }
+.nv-security-key-meta { color: var(--gray-500); }
+.dark .nv-security-key-meta { color: var(--gray-400); }

package/dist/navette/navette/security-keys.js

@@ -0,0 +1,72 @@
+// Navette: WebAuthn ceremonies of the SecurityKeyInput field (security keys and passkeys). No dependency.
+document.addEventListener('alpine:init', () => {
+    const toBuffer = (value) => {
+        const base64 = value.replace(/-/g, '+').replace(/_/g, '/');
+        return Uint8Array.from(atob(base64.padEnd(Math.ceil(base64.length / 4) * 4, '=')), (character) => character.charCodeAt(0)).buffer;
+    };
+    const toBase64url = (buffer) => {
+        let binary = '';
+        for (const byte of new Uint8Array(buffer)) binary += String.fromCharCode(byte);
+        return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    };
+    const withIds = (credentials) => (credentials ?? []).map((credential) => ({ ...credential, id: toBuffer(credential.id) }));
+    const creationOptions = (options) => (typeof PublicKeyCredential.parseCreationOptionsFromJSON === 'function'
+        ? PublicKeyCredential.parseCreationOptionsFromJSON(options)
+        : { ...options, challenge: toBuffer(options.challenge), user: { ...options.user, id: toBuffer(options.user.id) }, excludeCredentials: withIds(options.excludeCredentials) });
+    const requestOptions = (options) => (typeof PublicKeyCredential.parseRequestOptionsFromJSON === 'function'
+        ? PublicKeyCredential.parseRequestOptionsFromJSON(options)
+        : { ...options, challenge: toBuffer(options.challenge), allowCredentials: withIds(options.allowCredentials) });
+    const serialize = (credential) => {
+        try { if (typeof credential.toJSON === 'function') return credential.toJSON(); } catch (error) { /* some password managers return incomplete objects */ }
+        const response = credential.response;
+        const result = { id: credential.id, rawId: toBase64url(credential.rawId), type: credential.type, response: { clientDataJSON: toBase64url(response.clientDataJSON) } };
+        if (response.attestationObject) {
+            result.response.attestationObject = toBase64url(response.attestationObject);
+            result.response.transports = typeof response.getTransports === 'function' ? response.getTransports() : [];
+        } else {
+            result.response.authenticatorData = toBase64url(response.authenticatorData);
+            result.response.signature = toBase64url(response.signature);
+            result.response.userHandle = response.userHandle ? toBase64url(response.userHandle) : null;
+        }
+        return result;
+    };
+
+    window.Alpine.data('navetteSecurityKey', ({ state, mode, key, submitOnSuccess, autoStart, messages }) => ({
+        state,
+        isWaiting: false,
+        isError: false,
+        message: null,
+        init() {
+            if (autoStart && !this.state) this.$nextTick(() => this.start(true));
+        },
+        async start(isAutomatic = false) {
+            if (this.isWaiting) return;
+            if (!window.PublicKeyCredential || !navigator.credentials) { this.fail(messages.unsupported); return; }
+            this.isWaiting = true;
+            this.isError = false;
+            this.message = messages.waiting;
+            try {
+                const options = await this.$wire.callSchemaComponentMethod(key, 'getPublicKeyOptions', {});
+                if (!options) throw new Error('No options.');
+                const credential = mode === 'register'
+                    ? await navigator.credentials.create({ publicKey: creationOptions(options) })
+                    : await navigator.credentials.get({ publicKey: requestOptions(options) });
+                if (!credential) throw new Error('No credential.');
+                this.state = JSON.stringify(serialize(credential));
+                this.message = messages.success;
+                if (submitOnSuccess) this.$nextTick(() => this.$root.closest('form')?.requestSubmit());
+            } catch (error) {
+                // An automatic start may be refused without a click: the button stays there, without an error.
+                if (isAutomatic && error?.name === 'NotAllowedError') this.message = null;
+                else if (['NotAllowedError', 'AbortError'].includes(error?.name)) this.fail(messages.cancelled);
+                else { console.error(error); this.fail(messages.failed); }
+            } finally {
+                this.isWaiting = false;
+            }
+        },
+        fail(text) {
+            this.isError = true;
+            this.message = text;
+        },
+    }));
+});

package/lib/auth.d.ts

@@ -46,7 +46,23 @@ export type TableQuery = (table: string) => any;
 export declare function knexAuthProvider(db: TableQuery, options?: {
     table?: string;
     verify?: (password: string, hash: string) => boolean | Promise<boolean>;
+    /** Multi-factor authentication storage: users table columns and security keys table (see `multiFactorAuthenticationSchema()`). */
+    appAuthenticationSecretColumn?: string;
+    appAuthenticationRecoveryCodesColumn?: string;
+    securityKeysTable?: string;
+    emailAuthenticationColumn?: string;
 }): AuthProvider;
+/**
+ * Adds what multi-factor authentication stores, when missing: three columns of the users table (authenticator app secret,
+ * recovery codes, email codes flag) and a `security_keys` table. Call it from a migration; it can run more than once.
+ */
+export declare function multiFactorAuthenticationSchema(knex: any, options?: {
+    usersTable?: string;
+    securityKeysTable?: string;
+    appAuthenticationSecretColumn?: string;
+    appAuthenticationRecoveryCodesColumn?: string;
+    emailAuthenticationColumn?: string;
+}): Promise<void>;
 /**
  * Tenants (teams) stored in a table and linked to users through a pivot table (`teams` and `team_user` by default).
  * `label`: text shown above the tenant name in the menu ("Current team").
@@ -58,4 +74,5 @@ export declare function knexTenantProvider(db: TableQuery, options?: {
     userKey?: string;
     nameAttribute?: string;
     label?: string | null;
+    defaultTenantAttribute?: string;
 }): TenantProvider;

package/lib/auth.js

@@ -74,7 +74,45 @@ const now = () => new Date().toISOString().slice(0, 19).replace('T', ' ');
  * `verify(password, hash)`: it is called for any stored hash that is not in scrypt format.
  */
 export function knexAuthProvider(db, options = {}) {
+    const emailColumn = options.emailAuthenticationColumn ?? 'has_email_authentication';
     const table = options.table ?? 'users';
+    const secretColumn = options.appAuthenticationSecretColumn ?? 'app_authentication_secret';
+    const recoveryColumn = options.appAuthenticationRecoveryCodesColumn ?? 'app_authentication_recovery_codes';
+    const keysTable = options.securityKeysTable ?? 'security_keys';
+    const parseList = (value) => { try {
+        const list = JSON.parse(String(value ?? '[]'));
+        return Array.isArray(list) ? list.map(String) : [];
+    }
+    catch {
+        return [];
+    } };
+    const toKey = (row) => ({
+        id: row.id, name: row.name, credentialId: row.credential_id, publicKey: row.public_key, algorithm: Number(row.algorithm), signCount: Number(row.sign_count ?? 0),
+        transports: parseList(row.transports), createdAt: row.created_at ? String(row.created_at) : null, lastUsedAt: row.last_used_at ? String(row.last_used_at) : null,
+    });
+    const multiFactor = {
+        async getAppAuthenticationSecret(user) { return (await db(table).where('id', user.id).first())?.[secretColumn] ?? null; },
+        async saveAppAuthenticationSecret(user, secret) { await db(table).where('id', user.id).update({ [secretColumn]: secret, updated_at: now() }); },
+        async getAppAuthenticationRecoveryCodes(user) { const value = (await db(table).where('id', user.id).first())?.[recoveryColumn]; return value === null || value === undefined ? null : parseList(value); },
+        async saveAppAuthenticationRecoveryCodes(user, codes) { await db(table).where('id', user.id).update({ [recoveryColumn]: codes === null ? null : JSON.stringify(codes), updated_at: now() }); },
+        async hasEmailAuthentication(user) { return Boolean((await db(table).where('id', user.id).first())?.[emailColumn]); },
+        async saveEmailAuthentication(user, enabled) { await db(table).where('id', user.id).update({ [emailColumn]: enabled, updated_at: now() }); },
+        async getSecurityKeys(user) { return (await db(keysTable).where('user_id', user.id).orderBy('id')).map(toKey); },
+        async createSecurityKey(user, key) {
+            await db(keysTable).insert({ user_id: user.id, name: key.name, credential_id: key.credentialId, public_key: key.publicKey, algorithm: key.algorithm, sign_count: key.signCount, transports: JSON.stringify(key.transports ?? []), created_at: now(), updated_at: now() });
+        },
+        async updateSecurityKey(user, id, changes) {
+            const values = { updated_at: now() };
+            if (changes.signCount !== undefined)
+                values.sign_count = changes.signCount;
+            if (changes.lastUsedAt !== undefined)
+                values.last_used_at = changes.lastUsedAt.slice(0, 19).replace('T', ' ');
+            if (changes.name !== undefined)
+                values.name = changes.name;
+            await db(keysTable).where({ id, user_id: user.id }).update(values);
+        },
+        async deleteSecurityKey(user, id) { await db(keysTable).where({ id, user_id: user.id }).delete(); },
+    };
     const toUser = (row) => (row ? { id: row.id, name: row.name, email: row.email, emailVerifiedAt: row.email_verified_at ?? null } : null);
     const byEmail = (email) => db(table).where('email', String(email)).first();
     return {
@@ -110,8 +148,38 @@ export function knexAuthProvider(db, options = {}) {
         async hasVerifiedEmail(user) { return Boolean((await db(table).where('id', user.id).first())?.email_verified_at); },
         async markEmailAsVerified(user) { await db(table).where('id', user.id).update({ email_verified_at: now(), updated_at: now() }); },
         async getPasswordFingerprint(user) { return fingerprint((await db(table).where('id', user.id).first())?.password); },
+        ...multiFactor,
     };
 }
+/**
+ * Adds what multi-factor authentication stores, when missing: three columns of the users table (authenticator app secret,
+ * recovery codes, email codes flag) and a `security_keys` table. Call it from a migration; it can run more than once.
+ */
+export async function multiFactorAuthenticationSchema(knex, options = {}) {
+    const users = options.usersTable ?? 'users', keys = options.securityKeysTable ?? 'security_keys';
+    const secret = options.appAuthenticationSecretColumn ?? 'app_authentication_secret', codes = options.appAuthenticationRecoveryCodesColumn ?? 'app_authentication_recovery_codes';
+    for (const column of [secret, codes])
+        if (!(await knex.schema.hasColumn(users, column)))
+            await knex.schema.alterTable(users, (table) => { table.text(column).nullable(); });
+    const email = options.emailAuthenticationColumn ?? 'has_email_authentication';
+    if (!(await knex.schema.hasColumn(users, email)))
+        await knex.schema.alterTable(users, (table) => { table.boolean(email).notNullable().defaultTo(false); });
+    if (!(await knex.schema.hasTable(keys))) {
+        await knex.schema.createTable(keys, (table) => {
+            table.increments('id');
+            table.integer('user_id').notNullable().index();
+            table.string('name', 60);
+            // Unique: a credential can only belong to one account.
+            table.string('credential_id', 1400).notNullable().unique();
+            table.text('public_key').notNullable();
+            table.integer('algorithm').notNullable();
+            table.bigInteger('sign_count').defaultTo(0);
+            table.text('transports').nullable();
+            table.timestamp('last_used_at').nullable();
+            table.timestamps();
+        });
+    }
+}
 /**
  * Tenants (teams) stored in a table and linked to users through a pivot table (`teams` and `team_user` by default).
  * `label`: text shown above the tenant name in the menu ("Current team").
@@ -126,6 +194,8 @@ export function knexTenantProvider(db, options = {}) {
         getKey: (tenant) => String(tenant.id),
         getName: (tenant) => String(tenant[nameAttribute] ?? ''),
         getCurrentTenantLabel: () => options.label ?? null,
+        // The user's column holding their default tenant (`latest_team_id`): the tenant they land on after signing in.
+        async getDefaultTenant(user) { const key = options.defaultTenantAttribute ? user[options.defaultTenantAttribute] : null; return key === null || key === undefined ? null : this.find(String(key)); },
         async create(data, user) {
             const [id] = await db(table).insert({ ...data, created_at: now(), updated_at: now() });
             const tenantId = typeof id === 'object' ? id.id : id;

package/lib/error-pages.d.ts

@@ -0,0 +1,9 @@
+/** Statuses with their own illustration and texts; the others use the closest one (4xx: 404, 5xx: 500). */
+export declare const ERROR_PAGE_STATUSES: readonly [401, 403, 404, 419, 429, 500, 503];
+export type ErrorPageStatus = (typeof ERROR_PAGE_STATUSES)[number];
+/** The illustrated status for any HTTP status. */
+export declare function errorPageScene(status: number): ErrorPageStatus;
+/** The illustration of an error page. */
+export declare function errorIllustration(status: number, label: string): string;
+/** Styles of the error pages, on top of the panel's stylesheet. */
+export declare const ERROR_PAGE_CSS = "\n.fi-error-page { text-align: center; }\n.fi-error-illustration { margin: -1rem auto 0; max-width: 24rem; }\n.fi-error-illustration-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif; }\n.fi-error-page .fi-simple-header { margin-top: 1.5rem; }\n.fi-error-page .fi-simple-header-subheading { max-width: 26rem; margin-inline: auto; }\n.fi-error-badge-ctn { display: flex; justify-content: center; margin-top: 1.25rem; }\n.fi-error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }\n.fi-error-reference { margin-top: 1.5rem; font-size: 0.75rem; color: var(--gray-400); }\n.fi-error-details { margin-top: 2rem; text-align: start; }\n.fi-error-details summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--gray-500); }\n.fi-error-details pre { margin-top: 0.75rem; max-height: 18rem; overflow: auto; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--gray-50); color: var(--gray-700); font-family: var(--mono-font-family, ui-monospace), monospace; font-size: 0.75rem; line-height: 1.25rem; white-space: pre-wrap; word-break: break-word; }\n.dark .fi-error-details pre { background: color-mix(in oklab, var(--gray-950) 60%, transparent); color: var(--gray-300); }\n\n.fi-error-cabin { fill: var(--primary-600); }\n.fi-error-wheel { fill: var(--primary-600); }\n.fi-error-hanger { fill: none; stroke: var(--primary-600); stroke-width: 10; stroke-linecap: round; }\n.fi-error-cabin-code { fill: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0.02em; }\n.fi-error-cable, .fi-error-cable-faded { fill: none; stroke: var(--gray-400); stroke-width: 3; stroke-linecap: round; }\n.fi-error-cable-faded { stroke: url(#fi-error-cable-fade); }\n.fi-error-cable-stop { stop-color: var(--gray-400); }\n.fi-error-mountains { fill: url(#fi-error-ground); }\n.fi-error-ground-stop { stop-color: var(--gray-100); }\n.fi-error-snow { fill: #fff; }\n.fi-error-cloud { fill: #fff; stroke: var(--gray-200); stroke-width: 1.5; }\n.fi-error-pylon, .fi-error-pylon-arm { fill: none; stroke: var(--gray-300); stroke-width: 3; stroke-linecap: round; }\n.fi-error-pylon-arm { stroke-width: 4; }\n.fi-error-mark { fill: var(--primary-500); font-size: 26px; font-weight: 700; }\n.fi-error-mark-sm { font-size: 18px; opacity: 0.7; }\n.fi-error-sign-post { stroke: var(--gray-400); stroke-width: 3; }\n.fi-error-sign-danger { fill: var(--danger-500); }\n.fi-error-sign-bar { fill: #fff; }\n.fi-error-stop-dash { fill: none; stroke: var(--danger-500); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }\n.fi-error-lock { fill: var(--warning-500); }\n.fi-error-lock-shackle { fill: none; stroke: var(--gray-400); stroke-width: 4; stroke-linecap: round; }\n.fi-error-lock-hole { fill: #fff; }\n.fi-error-station { fill: var(--gray-200); }\n.fi-error-station-roof { fill: none; stroke: var(--gray-400); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }\n.fi-error-clock-face { fill: #fff; stroke: var(--gray-400); stroke-width: 2.5; }\n.fi-error-clock-hands { fill: none; stroke: var(--primary-600); stroke-width: 2.5; stroke-linecap: round; }\n.fi-error-motion { fill: none; stroke: var(--gray-300); stroke-width: 3; stroke-linecap: round; }\n.fi-error-spark { fill: none; stroke: var(--warning-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }\n.fi-error-spark-alt { stroke: var(--danger-500); }\n.fi-error-cone { fill: var(--warning-500); }\n.fi-error-cone-stripe { stroke: #fff; stroke-width: 4; }\n.fi-error-cone-base { stroke: var(--gray-500); stroke-width: 4; stroke-linecap: round; }\n.fi-error-tools { fill: var(--gray-400); }\n.fi-error-barrier { fill: var(--warning-500); }\n.fi-error-barrier-stripes { stroke: #fff; stroke-width: 5; }\n.fi-error-barrier-leg { stroke: var(--gray-500); stroke-width: 3; stroke-linecap: round; }\n\n.dark .fi-error-cabin, .dark .fi-error-wheel { fill: var(--primary-500); }\n.dark .fi-error-hanger { stroke: var(--primary-500); }\n.dark .fi-error-cable, .dark .fi-error-cable-faded { stroke: var(--gray-500); }\n.dark .fi-error-cable-faded { stroke: url(#fi-error-cable-fade); }\n.dark .fi-error-cable-stop { stop-color: var(--gray-500); }\n.dark .fi-error-ground-stop { stop-color: var(--gray-800); }\n.dark .fi-error-snow { fill: var(--gray-600); }\n.dark .fi-error-cloud { fill: var(--gray-900); stroke: var(--gray-700); }\n.dark .fi-error-pylon, .dark .fi-error-pylon-arm { stroke: var(--gray-600); }\n.dark .fi-error-station { fill: var(--gray-800); }\n.dark .fi-error-clock-face { fill: var(--gray-900); stroke: var(--gray-500); }\n.dark .fi-error-motion { stroke: var(--gray-700); }\n\n.fi-error-slow, .fi-error-dangling, .fi-error-shake, .fi-error-bounce, .fi-error-tick, .fi-error-wrench-ctn { transform-box: view-box; }\n.fi-error-slow { animation: fi-error-swing 4s ease-in-out infinite; }\n.fi-error-dangling { animation: fi-error-dangle 2.6s ease-in-out infinite; }\n.fi-error-shake { animation: fi-error-shake 3.2s ease-in-out infinite; }\n.fi-error-bounce { animation: fi-error-bounce 1.6s ease-in-out infinite; }\n.fi-error-bob { animation: fi-error-bob 2.4s ease-in-out infinite; }\n.fi-error-drift { animation: fi-error-drift 9s ease-in-out infinite alternate; }\n.fi-error-sparks { animation: fi-error-flicker 1.1s steps(2, jump-none) infinite; }\n.fi-error-tick { animation: fi-error-tick 4s steps(8) infinite; }\n.fi-error-leave { animation: fi-error-leave 5s ease-in-out infinite; }\n.fi-error-wrench-ctn { animation: fi-error-wrench 2.8s ease-in-out infinite; }\n@keyframes fi-error-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }\n@keyframes fi-error-dangle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }\n@keyframes fi-error-shake { 0%, 70%, 100% { transform: translateX(0); } 74% { transform: translateX(3px) rotate(1.5deg); } 78% { transform: translateX(-3px) rotate(-1.5deg); } 82% { transform: translateX(2px); } 86% { transform: translateX(0); } }\n@keyframes fi-error-bounce { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }\n@keyframes fi-error-bob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: 0.6; } }\n@keyframes fi-error-drift { from { transform: translateX(-6px); } to { transform: translateX(8px); } }\n@keyframes fi-error-flicker { 0% { opacity: 1; } 100% { opacity: 0.2; } }\n@keyframes fi-error-tick { to { transform: rotate(360deg); } }\n@keyframes fi-error-leave { 0%, 20% { transform: translate(0, 0); opacity: 1; } 80%, 100% { transform: translate(34px, -4px); opacity: 0.35; } }\n@keyframes fi-error-wrench { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }\n@media (prefers-reduced-motion: reduce) { .fi-error-illustration * { animation: none !important; } }\n";

package/lib/error-pages.js

@@ -0,0 +1,173 @@
+// Error pages (404, 403, 500…): the Navette cable car in trouble, in the panel's colors.
+// The illustrations are inline SVG: their colors come from the panel's CSS variables, light and dark.
+/** Statuses with their own illustration and texts; the others use the closest one (4xx: 404, 5xx: 500). */
+export const ERROR_PAGE_STATUSES = [401, 403, 404, 419, 429, 500, 503];
+/** The illustrated status for any HTTP status. */
+export function errorPageScene(status) {
+    if (ERROR_PAGE_STATUSES.includes(status))
+        return status;
+    return status >= 500 ? 500 : 404;
+}
+const W = 400;
+/** The cable rises from left to right, like the logo's. */
+const cableY = (x) => 72 - 0.12 * x;
+/**
+ * A cabin hanging from its wheel at (x, y), drawn from the logo's geometry. `code` is painted on the cabin.
+ * `swing`: the cabin sways around its wheel.
+ */
+function cabin(x, y, options = {}) {
+    const scale = options.scale ?? 0.62;
+    const code = options.code ? `<text x="75" y="155" text-anchor="middle" class="fi-error-cabin-code">${options.code}</text>` : '';
+    const drawing = `<g transform="translate(${x} ${y}) rotate(${options.rotate ?? 0}) scale(${scale}) translate(-75 -27)">`
+        + '<path class="fi-error-hanger" d="M75,30 V72" />'
+        + '<circle class="fi-error-wheel" cx="75" cy="27" r="9" />'
+        + '<path class="fi-error-cabin" fill-rule="evenodd" d="M38,72 H112 a20,20 0 0 1 20,20 V146 a20,20 0 0 1 -20,20 H38 a20,20 0 0 1 -20,-20 V92 a20,20 0 0 1 20,-20 Z M36,90 h30 v32 h-30 Z M84,90 h30 v32 h-30 Z" />'
+        + `${code}</g>`;
+    if (!options.swing)
+        return drawing;
+    const delay = options.delay ? ` animation-delay: ${options.delay}s;` : '';
+    return `<g class="fi-error-${options.swing}" style="transform-origin: ${x}px ${y}px;${delay}">${drawing}</g>`;
+}
+const cloud = (x, y, scale = 1, drift = false) => `<g class="${drift ? 'fi-error-drift' : ''}"><path class="fi-error-cloud" transform="translate(${x} ${y}) scale(${scale})" d="M-34,10 a14,14 0 0 1 6,-26 a20,20 0 0 1 36,-8 a16,16 0 0 1 28,10 a12,12 0 0 1 4,24 Z" /></g>`;
+const mountains = '<path class="fi-error-mountains" fill="url(#fi-error-ground)" d="M0,228 V196 L52,160 L92,184 L150,128 L214,190 L268,150 L318,178 L364,146 L400,166 V228 Z" />'
+    + '<path class="fi-error-snow" d="M138,140 L150,128 L162,140 L156,138 L150,144 L144,138 Z M354,153 L364,146 L374,153 L369,152 L364,157 L359,152 Z" />';
+const pylon = (x) => {
+    const top = cableY(x);
+    return `<path class="fi-error-pylon" d="M${x - 9},214 L${x - 2},${top + 4} M${x + 9},214 L${x + 2},${top + 4} M${x - 7},${top + 60} H${x + 7} M${x - 5},${top + 110} H${x + 5}" />`
+        + `<path class="fi-error-pylon-arm" d="M${x - 12},${top + 4} H${x + 12}" />`;
+};
+const cable = (from = -10, to = W + 10, className = 'fi-error-cable') => `<path class="${className}" d="M${from},${cableY(from)} L${to},${cableY(to)}" />`;
+/** Scenes, by status. */
+const SCENES = {
+    // Lost: the cable disappears into the clouds; the cabin wonders where to go.
+    404: (code) => `<defs><linearGradient id="fi-error-cable-fade" x1="0" x2="1" y1="0" y2="0"><stop offset="0.55" class="fi-error-cable-stop" /><stop offset="0.85" class="fi-error-cable-stop" stop-opacity="0" /></linearGradient></defs>`
+        + mountains + pylon(46) + `<path stroke="url(#fi-error-cable-fade)" class="fi-error-cable-faded" d="M-10,${cableY(-10)} L${W + 10},${cableY(W + 10)}" />`
+        + cabin(205, cableY(205), { code, swing: 'slow' })
+        + '<text x="250" y="22" class="fi-error-mark fi-error-bob">?</text><text x="266" y="36" class="fi-error-mark fi-error-mark-sm fi-error-bob" style="animation-delay: .6s">?</text>'
+        + cloud(330, 40, 1.3, true) + cloud(372, 66, 1.1) + cloud(300, 74, 0.9, true) + cloud(60, 118, 0.7),
+    // Blocked: a no-entry sign stops the cabin on the line.
+    403: (code) => mountains + pylon(46) + pylon(316) + cable()
+        + `<g class="fi-error-sign"><path class="fi-error-sign-post" d="M316,${cableY(316) - 2} V${cableY(316) - 22}" /><circle class="fi-error-sign-danger" cx="316" cy="${cableY(316) - 36}" r="17" /><rect x="306" y="${cableY(316) - 39}" width="20" height="6" rx="2" class="fi-error-sign-bar" /></g>`
+        + `<path class="fi-error-stop-dash" d="M262,${cableY(262)} L300,${cableY(300)}" />`
+        + cabin(190, cableY(190), { code, swing: 'shake' }) + cloud(98, 34, 0.8) + cloud(372, 112, 0.7, true),
+    // Sign in first: a padlock on the line.
+    401: (code) => mountains + pylon(46) + pylon(316) + cable()
+        + `<g class="fi-error-sign"><path class="fi-error-sign-post" d="M316,${cableY(316) - 2} V${cableY(316) - 18}" /><path class="fi-error-lock-shackle" d="M307,${cableY(316) - 38} v-6 a9,9 0 0 1 18,0 v6" /><rect x="301" y="${cableY(316) - 40}" width="30" height="24" rx="5" class="fi-error-lock" /><circle cx="316" cy="${cableY(316) - 29}" r="3.5" class="fi-error-lock-hole" /></g>`
+        + cabin(190, cableY(190), { code, swing: 'slow' }) + cloud(98, 34, 0.8) + cloud(372, 112, 0.7, true),
+    // Expired: the cabin left the station without you.
+    419: (code) => mountains + `<path class="fi-error-station" d="M8,${cableY(8) + 10} h70 v54 h-70 Z" /><path class="fi-error-station-roof" d="M2,${cableY(8) + 12} L43,${cableY(8) - 8} L84,${cableY(8) + 12}" />`
+        + `<g class="fi-error-clock"><circle cx="43" cy="${cableY(8) + 36}" r="15" class="fi-error-clock-face" /><path class="fi-error-clock-hands fi-error-tick" style="transform-origin: 43px ${cableY(8) + 36}px" d="M43,${cableY(8) + 36} V${cableY(8) + 26}" /><path class="fi-error-clock-hands" d="M43,${cableY(8) + 36} H51" /></g>`
+        + cable(78) + pylon(200)
+        + `<path class="fi-error-motion" d="M280,${cableY(296) + 26} h-26 M284,${cableY(296) + 36} h-34 M280,${cableY(296) + 46} h-22" />`
+        + `<g class="fi-error-leave">${cabin(312, cableY(312), { code, scale: 0.46 })}</g>` + cloud(150, 36, 0.8, true),
+    // Rush hour: cabins queue on the line, one digit each.
+    429: (code) => mountains + pylon(46) + pylon(356) + cable()
+        + [...code.padEnd(3).slice(0, 3)].map((digit, index) => cabin(140 + index * 62, cableY(140 + index * 62), { code: digit.trim(), scale: 0.5, swing: 'bounce', delay: index * 0.18 })).join('')
+        + cloud(96, 30, 0.7, true) + cloud(352, 104, 0.6),
+    // Broken: the cable snapped and the cabin dangles from the loose end.
+    500: (code) => mountains + pylon(46) + pylon(356)
+        + `<path class="fi-error-cable" d="M-10,${cableY(-10)} L178,${cableY(178)} Q190,${cableY(190) - 1} 192,${cableY(190) + 12}" />`
+        + `<path class="fi-error-cable" d="M${W + 10},${cableY(W + 10)} L236,${cableY(236)} Q224,${cableY(224) + 1} 222,${cableY(222) + 14}" />`
+        + `<g class="fi-error-sparks"><path class="fi-error-spark" d="M207,${cableY(207) - 16} l4,8 l6,-3 l-3,8" /><path class="fi-error-spark fi-error-spark-alt" d="M199,${cableY(199) + 2} l-8,-4 M213,${cableY(213) + 4} l9,-2 M205,${cableY(205) - 4} l1,-9" /></g>`
+        + cabin(192, cableY(190) + 12, { code, rotate: -14, swing: 'dangling' }) + cloud(110, 30, 0.7, true) + cloud(340, 110, 0.6),
+    // Maintenance: the cabin is parked; cones and a wrench on site.
+    503: (code) => mountains + pylon(46) + pylon(316) + cable()
+        + cabin(190, cableY(190), { code })
+        // Heroicons "wrench-screwdriver" (MIT).
+        + `<g class="fi-error-wrench-ctn" style="transform-origin: 258px 92px"><g transform="translate(236 70) scale(1.8)"><path class="fi-error-tools" fill-rule="evenodd" d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z" clip-rule="evenodd"/><path class="fi-error-tools" d="m10.076 8.64-2.201-2.2V4.874a.75.75 0 0 0-.364-.643l-3.75-2.25a.75.75 0 0 0-.916.113l-.75.75a.75.75 0 0 0-.113.916l2.25 3.75a.75.75 0 0 0 .643.364h1.564l2.062 2.062 1.575-1.297Z"/><path class="fi-error-tools" fill-rule="evenodd" d="m12.556 17.329 4.183 4.182a3.375 3.375 0 0 0 4.773-4.773l-3.306-3.305a6.803 6.803 0 0 1-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 0 0-.167.063l-3.086 3.748Zm3.414-1.36a.75.75 0 0 1 1.06 0l1.875 1.876a.75.75 0 1 1-1.06 1.06L15.97 17.03a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></g></g>`
+        + '<path class="fi-error-barrier-leg" d="M168,212 L174,190 M216,212 L210,190" /><rect x="160" y="184" width="64" height="11" rx="2" class="fi-error-barrier" /><path class="fi-error-barrier-stripes" d="M170,195 l8,-11 M186,195 l8,-11 M202,195 l8,-11 M218,195 l6,-8" />'
+        + [138, 246].map((x) => `<path class="fi-error-cone" d="M${x - 11},212 L${x - 3},180 H${x + 3} L${x + 11},212 Z" /><path class="fi-error-cone-stripe" d="M${x - 7},198 H${x + 7}" /><path class="fi-error-cone-base" d="M${x - 15},212 H${x + 15}" />`).join('')
+        + cloud(96, 30, 0.7, true) + cloud(366, 106, 0.6),
+};
+/** The illustration of an error page. */
+export function errorIllustration(status, label) {
+    return `<svg viewBox="0 0 ${W} 228" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${label.replace(/[&<>"]/g, (character) => `&#${character.charCodeAt(0)};`)}" class="fi-error-illustration-svg"><defs><linearGradient id="fi-error-ground" x1="0" x2="0" y1="0" y2="1"><stop offset="0.45" class="fi-error-ground-stop" /><stop offset="1" class="fi-error-ground-stop" stop-opacity="0" /></linearGradient></defs>${SCENES[errorPageScene(status)](String(status))}</svg>`;
+}
+/** Styles of the error pages, on top of the panel's stylesheet. */
+export const ERROR_PAGE_CSS = `
+.fi-error-page { text-align: center; }
+.fi-error-illustration { margin: -1rem auto 0; max-width: 24rem; }
+.fi-error-illustration-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif; }
+.fi-error-page .fi-simple-header { margin-top: 1.5rem; }
+.fi-error-page .fi-simple-header-subheading { max-width: 26rem; margin-inline: auto; }
+.fi-error-badge-ctn { display: flex; justify-content: center; margin-top: 1.25rem; }
+.fi-error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }
+.fi-error-reference { margin-top: 1.5rem; font-size: 0.75rem; color: var(--gray-400); }
+.fi-error-details { margin-top: 2rem; text-align: start; }
+.fi-error-details summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--gray-500); }
+.fi-error-details pre { margin-top: 0.75rem; max-height: 18rem; overflow: auto; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--gray-50); color: var(--gray-700); font-family: var(--mono-font-family, ui-monospace), monospace; font-size: 0.75rem; line-height: 1.25rem; white-space: pre-wrap; word-break: break-word; }
+.dark .fi-error-details pre { background: color-mix(in oklab, var(--gray-950) 60%, transparent); color: var(--gray-300); }
+
+.fi-error-cabin { fill: var(--primary-600); }
+.fi-error-wheel { fill: var(--primary-600); }
+.fi-error-hanger { fill: none; stroke: var(--primary-600); stroke-width: 10; stroke-linecap: round; }
+.fi-error-cabin-code { fill: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0.02em; }
+.fi-error-cable, .fi-error-cable-faded { fill: none; stroke: var(--gray-400); stroke-width: 3; stroke-linecap: round; }
+.fi-error-cable-faded { stroke: url(#fi-error-cable-fade); }
+.fi-error-cable-stop { stop-color: var(--gray-400); }
+.fi-error-mountains { fill: url(#fi-error-ground); }
+.fi-error-ground-stop { stop-color: var(--gray-100); }
+.fi-error-snow { fill: #fff; }
+.fi-error-cloud { fill: #fff; stroke: var(--gray-200); stroke-width: 1.5; }
+.fi-error-pylon, .fi-error-pylon-arm { fill: none; stroke: var(--gray-300); stroke-width: 3; stroke-linecap: round; }
+.fi-error-pylon-arm { stroke-width: 4; }
+.fi-error-mark { fill: var(--primary-500); font-size: 26px; font-weight: 700; }
+.fi-error-mark-sm { font-size: 18px; opacity: 0.7; }
+.fi-error-sign-post { stroke: var(--gray-400); stroke-width: 3; }
+.fi-error-sign-danger { fill: var(--danger-500); }
+.fi-error-sign-bar { fill: #fff; }
+.fi-error-stop-dash { fill: none; stroke: var(--danger-500); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }
+.fi-error-lock { fill: var(--warning-500); }
+.fi-error-lock-shackle { fill: none; stroke: var(--gray-400); stroke-width: 4; stroke-linecap: round; }
+.fi-error-lock-hole { fill: #fff; }
+.fi-error-station { fill: var(--gray-200); }
+.fi-error-station-roof { fill: none; stroke: var(--gray-400); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
+.fi-error-clock-face { fill: #fff; stroke: var(--gray-400); stroke-width: 2.5; }
+.fi-error-clock-hands { fill: none; stroke: var(--primary-600); stroke-width: 2.5; stroke-linecap: round; }
+.fi-error-motion { fill: none; stroke: var(--gray-300); stroke-width: 3; stroke-linecap: round; }
+.fi-error-spark { fill: none; stroke: var(--warning-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
+.fi-error-spark-alt { stroke: var(--danger-500); }
+.fi-error-cone { fill: var(--warning-500); }
+.fi-error-cone-stripe { stroke: #fff; stroke-width: 4; }
+.fi-error-cone-base { stroke: var(--gray-500); stroke-width: 4; stroke-linecap: round; }
+.fi-error-tools { fill: var(--gray-400); }
+.fi-error-barrier { fill: var(--warning-500); }
+.fi-error-barrier-stripes { stroke: #fff; stroke-width: 5; }
+.fi-error-barrier-leg { stroke: var(--gray-500); stroke-width: 3; stroke-linecap: round; }
+
+.dark .fi-error-cabin, .dark .fi-error-wheel { fill: var(--primary-500); }
+.dark .fi-error-hanger { stroke: var(--primary-500); }
+.dark .fi-error-cable, .dark .fi-error-cable-faded { stroke: var(--gray-500); }
+.dark .fi-error-cable-faded { stroke: url(#fi-error-cable-fade); }
+.dark .fi-error-cable-stop { stop-color: var(--gray-500); }
+.dark .fi-error-ground-stop { stop-color: var(--gray-800); }
+.dark .fi-error-snow { fill: var(--gray-600); }
+.dark .fi-error-cloud { fill: var(--gray-900); stroke: var(--gray-700); }
+.dark .fi-error-pylon, .dark .fi-error-pylon-arm { stroke: var(--gray-600); }
+.dark .fi-error-station { fill: var(--gray-800); }
+.dark .fi-error-clock-face { fill: var(--gray-900); stroke: var(--gray-500); }
+.dark .fi-error-motion { stroke: var(--gray-700); }
+
+.fi-error-slow, .fi-error-dangling, .fi-error-shake, .fi-error-bounce, .fi-error-tick, .fi-error-wrench-ctn { transform-box: view-box; }
+.fi-error-slow { animation: fi-error-swing 4s ease-in-out infinite; }
+.fi-error-dangling { animation: fi-error-dangle 2.6s ease-in-out infinite; }
+.fi-error-shake { animation: fi-error-shake 3.2s ease-in-out infinite; }
+.fi-error-bounce { animation: fi-error-bounce 1.6s ease-in-out infinite; }
+.fi-error-bob { animation: fi-error-bob 2.4s ease-in-out infinite; }
+.fi-error-drift { animation: fi-error-drift 9s ease-in-out infinite alternate; }
+.fi-error-sparks { animation: fi-error-flicker 1.1s steps(2, jump-none) infinite; }
+.fi-error-tick { animation: fi-error-tick 4s steps(8) infinite; }
+.fi-error-leave { animation: fi-error-leave 5s ease-in-out infinite; }
+.fi-error-wrench-ctn { animation: fi-error-wrench 2.8s ease-in-out infinite; }
+@keyframes fi-error-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
+@keyframes fi-error-dangle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }
+@keyframes fi-error-shake { 0%, 70%, 100% { transform: translateX(0); } 74% { transform: translateX(3px) rotate(1.5deg); } 78% { transform: translateX(-3px) rotate(-1.5deg); } 82% { transform: translateX(2px); } 86% { transform: translateX(0); } }
+@keyframes fi-error-bounce { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
+@keyframes fi-error-bob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: 0.6; } }
+@keyframes fi-error-drift { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
+@keyframes fi-error-flicker { 0% { opacity: 1; } 100% { opacity: 0.2; } }
+@keyframes fi-error-tick { to { transform: rotate(360deg); } }
+@keyframes fi-error-leave { 0%, 20% { transform: translate(0, 0); opacity: 1; } 80%, 100% { transform: translate(34px, -4px); opacity: 0.35; } }
+@keyframes fi-error-wrench { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }
+@media (prefers-reduced-motion: reduce) { .fi-error-illustration * { animation: none !important; } }
+`;