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

package/lib/webauthn.js

@@ -0,0 +1,287 @@
+// WebAuthn (Web Authentication, level 2) relying party: registration and authentication ceremonies for security keys
+// and passkeys. No dependency: CBOR and COSE parsing, signature checks with `node:crypto`.
+// Attestation statements are not verified (`attestation: 'none'`): the key proves possession, not its make or model.
+import { createHash, createPublicKey, randomBytes, timingSafeEqual, verify } from 'node:crypto';
+export class WebAuthnError extends Error {
+}
+const b64url = (bytes) => Buffer.from(bytes).toString('base64url');
+const fromB64url = (value, what) => {
+    if (typeof value !== 'string' || !/^[A-Za-z0-9_-]*={0,2}$/.test(value) || value.length > 100_000)
+        throw new WebAuthnError(`Invalid ${what}.`);
+    return Buffer.from(value, 'base64url');
+};
+// --- CBOR (RFC 8949): the definite-length subset that authenticators produce.
+/** Decodes one CBOR item at `offset`; returns it with the offset after it. Maps are returned as `Map`. */
+export function decodeCborItem(bytes, offset = 0, depth = 0) {
+    if (depth > 16)
+        throw new WebAuthnError('CBOR nesting too deep.');
+    const need = (count) => { if (offset + count > bytes.length)
+        throw new WebAuthnError('Truncated CBOR data.'); };
+    need(1);
+    const initial = bytes[offset++];
+    const major = initial >> 5, info = initial & 31;
+    let length;
+    if (info < 24)
+        length = info;
+    else if (info === 24) {
+        need(1);
+        length = bytes[offset];
+        offset += 1;
+    }
+    else if (info === 25) {
+        need(2);
+        length = (bytes[offset] << 8) | bytes[offset + 1];
+        offset += 2;
+    }
+    else if (info === 26) {
+        need(4);
+        length = Buffer.from(bytes.subarray(offset, offset + 4)).readUInt32BE(0);
+        offset += 4;
+    }
+    else if (info === 27) {
+        need(8);
+        const big = Buffer.from(bytes.subarray(offset, offset + 8)).readBigUInt64BE(0);
+        offset += 8;
+        if (big > BigInt(Number.MAX_SAFE_INTEGER))
+            throw new WebAuthnError('CBOR integer too large.');
+        length = Number(big);
+    }
+    else
+        throw new WebAuthnError('Unsupported CBOR encoding.');
+    switch (major) {
+        case 0: return [length, offset];
+        case 1: return [-1 - length, offset];
+        case 2:
+            need(length);
+            return [Buffer.from(bytes.subarray(offset, offset + length)), offset + length];
+        case 3:
+            need(length);
+            return [Buffer.from(bytes.subarray(offset, offset + length)).toString('utf8'), offset + length];
+        case 4: {
+            if (length > 10_000)
+                throw new WebAuthnError('CBOR array too long.');
+            const items = [];
+            for (let i = 0; i < length; i++) {
+                const [item, next] = decodeCborItem(bytes, offset, depth + 1);
+                items.push(item);
+                offset = next;
+            }
+            return [items, offset];
+        }
+        case 5: {
+            if (length > 10_000)
+                throw new WebAuthnError('CBOR map too long.');
+            const map = new Map();
+            for (let i = 0; i < length; i++) {
+                const [key, afterKey] = decodeCborItem(bytes, offset, depth + 1);
+                const [value, afterValue] = decodeCborItem(bytes, afterKey, depth + 1);
+                map.set(key, value);
+                offset = afterValue;
+            }
+            return [map, offset];
+        }
+        case 6: return decodeCborItem(bytes, offset, depth + 1); // tag: its content
+        default: {
+            if (info === 20)
+                return [false, offset];
+            if (info === 21)
+                return [true, offset];
+            if (info === 22 || info === 23)
+                return [null, offset];
+            if (info === 25) {
+                const half = length, exponent = (half >> 10) & 31, fraction = half & 1023;
+                const value = exponent === 0 ? fraction * 2 ** -24 : exponent === 31 ? (fraction ? NaN : Infinity) : (fraction + 1024) * 2 ** (exponent - 25);
+                return [half & 0x8000 ? -value : value, offset];
+            }
+            if (info === 26) {
+                const buffer = Buffer.alloc(4);
+                buffer.writeUInt32BE(length);
+                return [buffer.readFloatBE(0), offset];
+            }
+            if (info === 27)
+                throw new WebAuthnError('Unsupported CBOR float.');
+            return [length, offset];
+        }
+    }
+}
+export const decodeCbor = (bytes) => decodeCborItem(bytes, 0)[0];
+// --- COSE keys (RFC 9053) and signatures.
+/** COSE algorithms supported: ES256, EdDSA (Ed25519), ES384, ES512, RS256. */
+export const SUPPORTED_ALGORITHMS = [-8, -7, -257, -35, -36];
+const EC_CURVES = { 1: 'P-256', 2: 'P-384', 3: 'P-521' };
+/** Public key of a COSE key map. */
+export function coseToPublicKey(cose) {
+    const kty = cose.get(1), algorithm = Number(cose.get(3));
+    if (!SUPPORTED_ALGORITHMS.includes(algorithm))
+        throw new WebAuthnError(`Unsupported key algorithm: ${algorithm}.`);
+    const bytes = (label) => { const value = cose.get(label); if (!Buffer.isBuffer(value))
+        throw new WebAuthnError('Invalid public key.'); return b64url(value); };
+    let jwk;
+    if (kty === 2 && [-7, -35, -36].includes(algorithm)) {
+        const curve = EC_CURVES[Number(cose.get(-1))];
+        if (!curve || curve !== { [-7]: 'P-256', [-35]: 'P-384', [-36]: 'P-521' }[algorithm])
+            throw new WebAuthnError('Invalid elliptic curve.');
+        jwk = { kty: 'EC', crv: curve, x: bytes(-2), y: bytes(-3) };
+    }
+    else if (kty === 1 && algorithm === -8) {
+        if (cose.get(-1) !== 6)
+            throw new WebAuthnError('Only the Ed25519 curve is supported for EdDSA.');
+        jwk = { kty: 'OKP', crv: 'Ed25519', x: bytes(-2) };
+    }
+    else if (kty === 3 && algorithm === -257) {
+        jwk = { kty: 'RSA', n: bytes(-1), e: bytes(-2) };
+    }
+    else
+        throw new WebAuthnError('Invalid public key type.');
+    try {
+        return { algorithm, key: createPublicKey({ key: jwk, format: 'jwk' }) };
+    }
+    catch {
+        throw new WebAuthnError('Invalid public key.');
+    }
+}
+/** Checks an assertion signature with a stored public key (SPKI DER, base64url). */
+export function verifySignature(algorithm, publicKey, data, signature) {
+    const key = createPublicKey({ key: fromB64url(publicKey, 'public key'), format: 'der', type: 'spki' });
+    try {
+        if (algorithm === -8)
+            return verify(null, data, key, signature);
+        if (algorithm === -7)
+            return verify('sha256', data, { key, dsaEncoding: 'der' }, signature);
+        if (algorithm === -35)
+            return verify('sha384', data, { key, dsaEncoding: 'der' }, signature);
+        if (algorithm === -36)
+            return verify('sha512', data, { key, dsaEncoding: 'der' }, signature);
+        if (algorithm === -257)
+            return verify('sha256', data, key, signature);
+    }
+    catch {
+        return false;
+    }
+    return false;
+}
+export function parseAuthenticatorData(data) {
+    if (data.length < 37)
+        throw new WebAuthnError('Authenticator data too short.');
+    const flags = data[32];
+    let offset = 37, attestedCredential = null;
+    if (flags & 0x40) {
+        if (data.length < offset + 18)
+            throw new WebAuthnError('Attested credential data too short.');
+        const aaguid = data.subarray(offset, offset + 16).toString('hex');
+        const idLength = data.readUInt16BE(offset + 16);
+        offset += 18;
+        if (idLength > 1023 || data.length < offset + idLength)
+            throw new WebAuthnError('Invalid credential id.');
+        const credentialId = Buffer.from(data.subarray(offset, offset + idLength));
+        offset += idLength;
+        const [publicKey, next] = decodeCborItem(data, offset);
+        if (!(publicKey instanceof Map))
+            throw new WebAuthnError('Invalid credential public key.');
+        offset = next;
+        attestedCredential = { aaguid: `${aaguid.slice(0, 8)}-${aaguid.slice(8, 12)}-${aaguid.slice(12, 16)}-${aaguid.slice(16, 20)}-${aaguid.slice(20)}`, credentialId, publicKey };
+    }
+    if (flags & 0x80)
+        offset = decodeCborItem(data, offset)[1]; // extensions
+    if (offset !== data.length)
+        throw new WebAuthnError('Unexpected data after the authenticator data.');
+    return { rpIdHash: data.subarray(0, 32), userPresent: Boolean(flags & 0x01), userVerified: Boolean(flags & 0x04), backupEligible: Boolean(flags & 0x08), backedUp: Boolean(flags & 0x10), signCount: data.readUInt32BE(33), attestedCredential };
+}
+const sameBytes = (a, b) => a.length === b.length && timingSafeEqual(a, b);
+function checkClientData(raw, type, expected) {
+    let clientData;
+    try {
+        clientData = JSON.parse(raw.toString('utf8'));
+    }
+    catch {
+        throw new WebAuthnError('Invalid client data.');
+    }
+    if (clientData?.type !== type)
+        throw new WebAuthnError('Unexpected ceremony type.');
+    if (typeof clientData.challenge !== 'string' || !sameBytes(fromB64url(clientData.challenge, 'challenge'), fromB64url(expected.challenge, 'challenge')))
+        throw new WebAuthnError('The challenge does not match.');
+    const origins = [expected.origin].flat();
+    if (!origins.includes(clientData.origin))
+        throw new WebAuthnError(`Unexpected origin: ${String(clientData.origin)}.`);
+    if (clientData.crossOrigin === true)
+        throw new WebAuthnError('Cross-origin ceremonies are not allowed.');
+}
+function checkAuthenticatorData(data, expected) {
+    if (!sameBytes(data.rpIdHash, createHash('sha256').update(expected.rpId).digest()))
+        throw new WebAuthnError('The relying party id does not match.');
+    if (!data.userPresent)
+        throw new WebAuthnError('The user was not present.');
+    if (expected.requireUserVerification && !data.userVerified)
+        throw new WebAuthnError('The user was not verified.');
+}
+/** Verifies a registration (`navigator.credentials.create()`), and returns the credential to store. Throws `WebAuthnError`. */
+export function verifyRegistration(response, expected) {
+    const body = response;
+    if (!body || typeof body !== 'object' || body.type !== 'public-key' || !body.response)
+        throw new WebAuthnError('Invalid credential.');
+    checkClientData(fromB64url(body.response.clientDataJSON, 'client data'), 'webauthn.create', expected);
+    const attestation = decodeCbor(fromB64url(body.response.attestationObject, 'attestation'));
+    if (!(attestation instanceof Map) || !Buffer.isBuffer(attestation.get('authData')))
+        throw new WebAuthnError('Invalid attestation object.');
+    const data = parseAuthenticatorData(attestation.get('authData'));
+    checkAuthenticatorData(data, expected);
+    if (!data.attestedCredential)
+        throw new WebAuthnError('No credential in the attestation.');
+    const credentialId = b64url(data.attestedCredential.credentialId);
+    if (credentialId !== b64url(fromB64url(body.rawId ?? body.id, 'credential id')))
+        throw new WebAuthnError('The credential id does not match.');
+    const { algorithm, key } = coseToPublicKey(data.attestedCredential.publicKey);
+    const transports = Array.isArray(body.response.transports) ? body.response.transports.filter((transport) => typeof transport === 'string' && /^[a-z-]{1,20}$/.test(transport)).slice(0, 10) : [];
+    return {
+        credentialId, publicKey: b64url(key.export({ type: 'spki', format: 'der' })), algorithm, signCount: data.signCount, transports,
+        aaguid: data.attestedCredential.aaguid, backedUp: data.backedUp, userVerified: data.userVerified,
+    };
+}
+/**
+ * Verifies an authentication (`navigator.credentials.get()`) against the stored credential whose id the response carries.
+ * Returns the new signature counter, to store. Throws `WebAuthnError`, notably when the counter went backwards (cloned key).
+ */
+export function verifyAuthentication(response, expected) {
+    const body = response;
+    if (!body || typeof body !== 'object' || body.type !== 'public-key' || !body.response)
+        throw new WebAuthnError('Invalid credential.');
+    if (b64url(fromB64url(body.rawId ?? body.id, 'credential id')) !== expected.credential.credentialId)
+        throw new WebAuthnError('Unknown credential.');
+    const clientDataJSON = fromB64url(body.response.clientDataJSON, 'client data');
+    checkClientData(clientDataJSON, 'webauthn.get', expected);
+    const authenticatorData = fromB64url(body.response.authenticatorData, 'authenticator data');
+    const data = parseAuthenticatorData(authenticatorData);
+    checkAuthenticatorData(data, expected);
+    const signed = Buffer.concat([authenticatorData, createHash('sha256').update(clientDataJSON).digest()]);
+    if (!verifySignature(expected.credential.algorithm, expected.credential.publicKey, signed, fromB64url(body.response.signature, 'signature')))
+        throw new WebAuthnError('Invalid signature.');
+    // A counter that does not increase means two copies of the key exist (§6.1.1); 0 means the authenticator keeps none.
+    if ((data.signCount !== 0 || expected.credential.signCount !== 0) && data.signCount <= expected.credential.signCount)
+        throw new WebAuthnError('The signature counter did not increase: this key may have been cloned.');
+    return { signCount: data.signCount, userVerified: data.userVerified };
+}
+/** Random challenge (base64url, 32 bytes). */
+export const generateChallenge = () => b64url(randomBytes(32));
+/** Options for `navigator.credentials.create()`, as JSON (`PublicKeyCredential.parseCreationOptionsFromJSON()`). */
+export function registrationOptions(options) {
+    return {
+        rp: { id: options.rpId, name: options.rpName },
+        user: { id: b64url(Buffer.from(options.userId)), name: options.userName, displayName: options.userDisplayName ?? options.userName },
+        challenge: options.challenge,
+        pubKeyCredParams: SUPPORTED_ALGORITHMS.map((alg) => ({ type: 'public-key', alg })),
+        timeout: options.timeout ?? 120_000,
+        excludeCredentials: (options.excludeCredentials ?? []).map((credential) => ({ type: 'public-key', id: credential.credentialId, ...(credential.transports?.length ? { transports: credential.transports } : {}) })),
+        authenticatorSelection: { residentKey: options.residentKey ?? 'discouraged', requireResidentKey: options.residentKey === 'required', userVerification: options.userVerification ?? 'preferred', ...(options.authenticatorAttachment ? { authenticatorAttachment: options.authenticatorAttachment } : {}) },
+        attestation: 'none',
+    };
+}
+/** Options for `navigator.credentials.get()`, as JSON (`PublicKeyCredential.parseRequestOptionsFromJSON()`). */
+export function authenticationOptions(options) {
+    return {
+        rpId: options.rpId,
+        challenge: options.challenge,
+        timeout: options.timeout ?? 120_000,
+        allowCredentials: (options.allowCredentials ?? []).map((credential) => ({ type: 'public-key', id: credential.credentialId, ...(credential.transports?.length ? { transports: credential.transports } : {}) })),
+        userVerification: options.userVerification ?? 'preferred',
+    };
+}

package/lib/xlsx.d.ts

@@ -1,2 +1,7 @@
 /** Workbook with a single sheet: the first row is bold (header). */
 export declare function buildXlsx(rows: unknown[][], sheetName?: string): Buffer;
+/**
+ * Rows of the first worksheet of an XLSX file, as text (numbers as written, booleans as `1`/`0`, formulas as their cached
+ * value). Stops after `maxRows` rows. Throws on a file that is not a valid workbook.
+ */
+export declare function readXlsx(archive: Buffer, maxRows?: number, maxEntryBytes?: number): string[][];

package/lib/xlsx.js

@@ -1,6 +1,6 @@
 // Minimal XLSX writer: one worksheet of text cells (inline strings), zipped with Node's zlib. Cells are never formulas, so
 // spreadsheet software does not evaluate them; numbers stay text, as in Filament's export.
-import { crc32, deflateRawSync } from 'node:zlib';
+import { crc32, deflateRawSync, inflateRawSync } from 'node:zlib';
 /** Escapes a value for XML; characters not allowed in XML 1.0 are dropped. */
 const xml = (value) => value.replace(/[^\x09\x0A\x0D\x20-퟿-�\u{10000}-\u{10FFFF}]/gu, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 /** Column letters of a 0-based index: 0 → A, 26 → AA. */
@@ -67,3 +67,105 @@ function zip(entries) {
     end.writeUInt32LE(offset, 16);
     return Buffer.concat([...locals, ...centrals, end]);
 }
+// ------------------------------------------------------------------ reading
+/** Files of a ZIP archive (stored or deflated entries), read from its central directory. Each entry is limited in size. */
+function unzip(archive, maxEntryBytes) {
+    const files = new Map();
+    let end = -1;
+    for (let i = archive.length - 22; i >= Math.max(0, archive.length - 65557); i--)
+        if (archive.readUInt32LE(i) === 0x06054b50) {
+            end = i;
+            break;
+        }
+    if (end < 0)
+        throw new Error('Not a ZIP archive.');
+    const count = archive.readUInt16LE(end + 10);
+    let pointer = archive.readUInt32LE(end + 16);
+    for (let index = 0; index < count && index < 10_000; index++) {
+        if (archive.readUInt32LE(pointer) !== 0x02014b50)
+            throw new Error('Damaged ZIP archive.');
+        const method = archive.readUInt16LE(pointer + 10), compressedSize = archive.readUInt32LE(pointer + 20), size = archive.readUInt32LE(pointer + 24);
+        const nameLength = archive.readUInt16LE(pointer + 28), extraLength = archive.readUInt16LE(pointer + 30), commentLength = archive.readUInt16LE(pointer + 32);
+        const localOffset = archive.readUInt32LE(pointer + 42);
+        const name = archive.subarray(pointer + 46, pointer + 46 + nameLength).toString('utf8');
+        pointer += 46 + nameLength + extraLength + commentLength;
+        if (archive.readUInt32LE(localOffset) !== 0x04034b50)
+            throw new Error('Damaged ZIP archive.');
+        const dataStart = localOffset + 30 + archive.readUInt16LE(localOffset + 26) + archive.readUInt16LE(localOffset + 28);
+        const data = archive.subarray(dataStart, dataStart + compressedSize);
+        if (size > maxEntryBytes)
+            throw new Error('XLSX file too large.');
+        if (method === 0)
+            files.set(name, Buffer.from(data));
+        else if (method === 8)
+            files.set(name, inflateRawSync(data, { maxOutputLength: maxEntryBytes }));
+    }
+    return files;
+}
+const unescapeXml = (text) => text.replace(/&(lt|gt|quot|apos|amp|#\d+|#x[0-9a-f]+);/gi, (_match, entity) => {
+    const lower = entity.toLowerCase();
+    if (lower === 'lt')
+        return '<';
+    if (lower === 'gt')
+        return '>';
+    if (lower === 'quot')
+        return '"';
+    if (lower === 'apos')
+        return "'";
+    if (lower === 'amp')
+        return '&';
+    const code = lower.startsWith('#x') ? parseInt(lower.slice(2), 16) : parseInt(lower.slice(1), 10);
+    return Number.isFinite(code) && code <= 0x10ffff ? String.fromCodePoint(code) : '';
+});
+/** Text of the `<t>` elements of a shared or inline string (rich text runs joined, phonetic runs skipped). */
+const stringOf = (xmlText) => [...xmlText.replace(/<rPh\b[\s\S]*?<\/rPh>/g, '').matchAll(/<t(?:\s[^>]*)?>([\s\S]*?)<\/t>|<t(?:\s[^>]*)?\/>/g)].map((match) => unescapeXml(match[1] ?? '')).join('');
+const columnIndex = (reference) => { let index = 0; for (const char of reference.replace(/\d+$/, '').toUpperCase())
+    index = index * 26 + (char.charCodeAt(0) - 64); return index - 1; };
+/**
+ * Rows of the first worksheet of an XLSX file, as text (numbers as written, booleans as `1`/`0`, formulas as their cached
+ * value). Stops after `maxRows` rows. Throws on a file that is not a valid workbook.
+ */
+export function readXlsx(archive, maxRows = Infinity, maxEntryBytes = 100 * 1024 * 1024) {
+    const files = unzip(archive, maxEntryBytes);
+    const text = (name) => files.get(name)?.toString('utf8') ?? null;
+    const workbook = text('xl/workbook.xml');
+    if (!workbook)
+        throw new Error('Not an XLSX workbook.');
+    const firstSheet = /<sheet\b[^>]*\br:id="([^"]+)"/.exec(workbook)?.[1];
+    const relations = text('xl/_rels/workbook.xml.rels') ?? '';
+    // The relationship of the first sheet, whatever the order of its attributes.
+    const relation = firstSheet ? [...relations.matchAll(/<Relationship\s([^>]*)>/g)].map((match) => match[1]).find((attributes) => /\bId="([^"]+)"/.exec(attributes)?.[1] === firstSheet) : undefined;
+    let target = relation ? /\bTarget="([^"]+)"/.exec(relation)?.[1] ?? null : null;
+    target ??= 'worksheets/sheet1.xml';
+    const sheetPath = target.startsWith('/') ? target.slice(1) : `xl/${target.replace(/^\.\//, '')}`;
+    const sheet = text(sheetPath);
+    if (!sheet)
+        throw new Error('The workbook has no worksheet.');
+    const shared = [...(text('xl/sharedStrings.xml') ?? '').matchAll(/<si>([\s\S]*?)<\/si>/g)].map((match) => stringOf(match[1]));
+    const rows = [];
+    for (const rowMatch of sheet.matchAll(/<row\b[^>]*?(?:\/>|>([\s\S]*?)<\/row>)/g)) {
+        if (rows.length >= maxRows)
+            break;
+        const row = [];
+        let next = 0;
+        for (const cell of (rowMatch[1] ?? '').matchAll(/<c\b([^>]*?)(?:\/>|>([\s\S]*?)<\/c>)/g)) {
+            const attributes = cell[1], body = cell[2] ?? '';
+            const reference = /\br="([A-Z]+\d+)"/i.exec(attributes)?.[1];
+            const index = reference ? columnIndex(reference) : next;
+            if (index > 16384)
+                continue;
+            const type = /\bt="([^"]+)"/.exec(attributes)?.[1] ?? 'n';
+            const raw = /<v>([\s\S]*?)<\/v>/.exec(body)?.[1];
+            const value = type === 's' ? (shared[Number(raw)] ?? '') : type === 'inlineStr' ? stringOf(body) : type === 'b' ? (raw === '1' ? '1' : '0') : unescapeXml(raw ?? '');
+            while (row.length < index)
+                row.push('');
+            row[index] = value;
+            next = index + 1;
+        }
+        rows.push(row);
+    }
+    // Trailing empty rows are dropped.
+    while (rows.length && rows[rows.length - 1].every((cell) => cell === ''))
+        rows.pop();
+    return rows;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/panels",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "Admin panels for Node.js: resources, pages, navigation, authentication, tenancy.",
   "license": "MIT",
   "type": "module",
@@ -43,14 +43,14 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/support": "1.0.0-beta.4",
-    "@navette-js/schemas": "1.0.0-beta.4",
-    "@navette-js/forms": "1.0.0-beta.4",
-    "@navette-js/actions": "1.0.0-beta.4",
-    "@navette-js/wire": "1.0.0-beta.4",
-    "@navette-js/tables": "1.0.0-beta.4",
-    "@navette-js/infolists": "1.0.0-beta.4",
-    "@navette-js/database": "1.0.0-beta.4",
+    "@navette-js/support": "1.0.0-beta.5",
+    "@navette-js/schemas": "1.0.0-beta.5",
+    "@navette-js/forms": "1.0.0-beta.5",
+    "@navette-js/actions": "1.0.0-beta.5",
+    "@navette-js/wire": "1.0.0-beta.5",
+    "@navette-js/tables": "1.0.0-beta.5",
+    "@navette-js/infolists": "1.0.0-beta.5",
+    "@navette-js/database": "1.0.0-beta.5",
     "express": "^5.1.0"
   },
   "publishConfig": {

package/views/components/tenant-menu.ejs

@@ -1,6 +1,6 @@
-<%# Tenant menu (no search, even beyond ten tenants) %>
+<%# Tenant menu; with many tenants (or `searchableTenantMenu()`), a search field filters them and the dropdown is not a menu %>
 <%- renderHook('panels::tenant-menu.before') %>
-<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown fi-tenant-menu" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><button<% if (isSidebarCollapsibleOnDesktop) { %> x-data="{ tooltip: false }" x-effect="
+<div x-data="filamentDropdown({ isMenu: <%= locals.isSearchable ? 'false' : 'true' %> })" class="fi-dropdown fi-tenant-menu" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><button<% if (isSidebarCollapsibleOnDesktop) { %> x-data="{ tooltip: false }" x-effect="
                     tooltip = $store.sidebar.isOpen
                         ? false
                         : {
@@ -9,5 +9,5 @@
                               placement: document.dir === 'rtl' ? 'left' : 'right',
                               theme: $store.theme,
                           }
-                " x-tooltip="tooltip"<% } %> type="button" class="fi-tenant-menu-trigger" ><img alt="<%= t('filament-panels::layout.avatar.alt', { name: tenant.name }) %>" class="fi-avatar fi-size-md fi-tenant-avatar" src="<%= tenant.avatarUrl %>" loading="lazy" /><span<% if (isSidebarCollapsibleOnDesktop) { %> x-show="$store.sidebar.isOpen"<% } %> class="fi-tenant-menu-trigger-text" ><% if (tenant.label) { %><span class="fi-tenant-menu-trigger-current-tenant-label"> <%= tenant.label %> </span><% } %><span class="fi-tenant-menu-trigger-tenant-name"> <%= tenant.name %> </span></span><%- icon('m-chevron-down', isSidebarCollapsibleOnDesktop ? { attributes: attrs({ 'x-show': '$store.sidebar.isOpen' }) } : {}) %></button></div><div x-cloak x-float.placement.bottom-start.size.flip<% if (teleport) { %>.teleport<% } %>.offset="{ offset: 8, size: {&quot;padding&quot;:16} }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel fi-scrollable" style="" ><% if (itemsBefore.length) { %><div class="fi-dropdown-list"><%- itemsBefore.join('') %></div><% } %><% if (switchable.length) { %><div x-data="filamentTenantMenu"><div class="fi-dropdown-list"><% for (const other of switchable) { %><div class="fi-tenant-menu-item" x-show="matchesSearch(<%= js(other.name) %>)"><a href="<%= other.url %>" class="fi-dropdown-list-item" role="menuitem" tabindex="-1"><div class="fi-dropdown-list-item-image" style="background-image: url('<%= other.avatarUrl %>')"></div><span class="fi-dropdown-list-item-label"><%= other.name %></span></a></div><% } %></div></div><% } %><% if (itemsAfter.length) { %><div class="fi-dropdown-list"><%- itemsAfter.join('') %></div><% } %></div></div>
+                " x-tooltip="tooltip"<% } %> type="button" class="fi-tenant-menu-trigger" ><img alt="<%= t('filament-panels::layout.avatar.alt', { name: tenant.name }) %>" class="fi-avatar fi-size-md fi-tenant-avatar" src="<%= tenant.avatarUrl %>" loading="lazy" /><span<% if (isSidebarCollapsibleOnDesktop) { %> x-show="$store.sidebar.isOpen"<% } %> class="fi-tenant-menu-trigger-text" ><% if (tenant.label) { %><span class="fi-tenant-menu-trigger-current-tenant-label"> <%= tenant.label %> </span><% } %><span class="fi-tenant-menu-trigger-tenant-name"> <%= tenant.name %> </span></span><%- icon('m-chevron-down', isSidebarCollapsibleOnDesktop ? { attributes: attrs({ 'x-show': '$store.sidebar.isOpen' }) } : {}) %></button></div><div x-cloak x-float.placement.bottom-start.size.flip<% if (teleport) { %>.teleport<% } %>.offset="{ offset: 8, size: {&quot;padding&quot;:16} }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0"<% if (!locals.isSearchable) { %> role="menu"<% } %> class="fi-dropdown-panel fi-scrollable" style="" ><% if (itemsBefore.length) { %><div class="fi-dropdown-list"><%- itemsBefore.join('') %></div><% } %><% if (switchable.length) { %><div x-data="filamentTenantMenu"><div class="fi-dropdown-list"><% if (locals.isSearchable) { %><div x-id="['input']"><label x-bind:for="$id('input')" class="fi-sr-only"><%= t('filament-panels::layout.tenant_menu.search_field.label') %></label><input x-bind:id="$id('input')" x-model="search" placeholder="<%= t('filament-panels::layout.tenant_menu.search_field.placeholder') %>" type="search" class="fi-input" /></div><% } %><% for (const other of switchable) { %><div class="fi-tenant-menu-item" x-show="matchesSearch(<%= js(other.name) %>)"><a href="<%= other.url %>" class="fi-dropdown-list-item"<% if (!locals.isSearchable) { %> role="menuitem" tabindex="-1"<% } %>><div class="fi-dropdown-list-item-image" style="background-image: url('<%= other.avatarUrl %>')"></div><span class="fi-dropdown-list-item-label"><%= other.name %></span></a></div><% } %></div></div><% } %><% if (itemsAfter.length) { %><div class="fi-dropdown-list"><%- itemsAfter.join('') %></div><% } %></div></div>
 <%- renderHook('panels::tenant-menu.after') %>

package/views/errors/page.ejs

@@ -0,0 +1,87 @@
+<%# Error page (404, 403, 500…): a standalone document, so that it renders even when components cannot %>
+<!DOCTYPE html>
+<html lang="<%= locale %>" dir="ltr" class="fi">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="robots" content="noindex" />
+        <% if (locals.favicon) { %><link rel="icon" href="<%= favicon %>" /><% } %>
+
+        <title>
+            <%= title %>
+             -
+            <%= brandName %>
+        </title>
+
+        <link href="<%- assetUrl('fonts/filament/filament/inter/index.css') %>" rel="stylesheet" />
+
+        <%- colorVariables %>
+
+        <link rel="stylesheet" href="<%- locals.theme ? theme : assetUrl('css/filament/filament/app.css') %>" />
+
+        <% if (font.url) { %><link href="<%= font.url %>" rel="stylesheet" /><% } %>
+
+        <style>
+            :root {
+                --font-family: '<%- font.family %>';
+                --font-family-mono: 'ui-monospace';
+                --font-family-serif: 'ui-serif';
+                --default-theme-mode: system;
+            }
+<%- css %>
+        </style>
+
+        <% if (locals.darkMode === false) { %><% } else if (locals.darkModeForced) { %>
+        <script>
+            document.documentElement.classList.add('dark')
+        </script>
+        <% } else { %>
+        <script>
+            const theme = localStorage.getItem('filament:theme:mode') ?? <%- js(locals.defaultThemeMode ?? 'system') %>
+
+            if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+            }
+        </script>
+        <% } %>
+
+        <% if (locals.themeCss) { %><style data-navette-theme><%- themeCss %></style><% } %>
+    </head>
+
+    <body class="<%- cls(['fi-body', 'fi-panel-' + panelId, 'fi-error-body', 'fi-error-' + status]) %>">
+        <div class="fi-simple-layout">
+            <div class="fi-simple-main-ctn">
+                <main id="fi-main-content" class="fi-simple-main fi-width-lg fi-error-page">
+                    <div class="fi-error-illustration">
+                        <%- illustration %>
+                    </div>
+
+                    <div class="fi-error-badge-ctn">
+                        <%- badge %>
+                    </div>
+
+                    <header class="fi-simple-header">
+                        <h1 class="fi-simple-header-heading">
+                            <%= heading %>
+                        </h1>
+
+                        <p class="fi-simple-header-subheading">
+                            <%= description %>
+                        </p>
+                    </header>
+
+                    <div class="fi-error-actions">
+                        <%- actions.join('') %>
+                    </div>
+
+                    <% if (locals.details) { %>
+                        <details class="fi-error-details">
+                            <summary><%= t('filament-panels::errors.details') %></summary>
+                            <pre><%= details %></pre>
+                        </details>
+                    <% } %>
+                </main>
+            </div>
+        </div>
+    </body>
+</html>

package/views/layout/base.ejs

@@ -98,6 +98,7 @@
 
         <% if (locals.motion) { %><link rel="stylesheet" href="<%- assetUrl('navette/motion.css') %>" data-navigate-track /><% } %>
         <link rel="stylesheet" href="<%- assetUrl('navette/calendar.css') %>" data-navigate-track />
+        <% if (locals.securityKeys) { %><link rel="stylesheet" href="<%- assetUrl('navette/security-keys.css') %>" data-navigate-track /><% } %>
 
         <%- wireStyles %>
         <%- renderHook('panels::head.end', renderHookScopes) %>
@@ -127,6 +128,7 @@
             loadDarkMode()
         </script>
 
+        <% if (locals.securityKeys) { %><script src="<%- assetUrl('navette/security-keys.js') %>" data-navigate-once></script><% } %>
         <%- wireScripts %>
         <%- renderHook('panels::scripts.after', renderHookScopes) %>
         <%- renderHook('panels::body.end', renderHookScopes) %>

package/views/livewire/sidebar.ejs

@@ -1,5 +1,33 @@
 <%# Sidebar: navigation groups and items %>
 <% const collapsible = isSidebarCollapsibleOnDesktop || isSidebarFullyCollapsibleOnDesktop; %>
+<%# One item, with its child items below it when it has no URL, is active, or one of them is. %>
+<% const sidebarItem = (item, { grouped, subGrouped = false, first, last }) => { %>
+                                <li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.isActive, 'fi-sidebar-item-has-active-child-items': item.activeChildItems, 'fi-sidebar-item-has-url': Boolean(item.url) }]) %>">
+                                    <a<% if (item.url) { %> href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% } %><% if (item.isActive) { %> aria-current="page"<% } %> x-on:click="$store.sidebar.isMobile && $store.sidebar.close()" class="fi-sidebar-item-btn">
+                                        <% if (item.icon && (!subGrouped || isSidebarCollapsibleOnDesktop)) { %><%- icon(item.icon, { size: 'lg', attributes: attrs({ class: 'fi-sidebar-item-icon', 'x-show': subGrouped ? '! $store.sidebar.isOpen' : false }) }) %><% } %>
+                                        <% if ((!item.icon && grouped) || subGrouped) { %>
+                                            <div<% if (item.icon && subGrouped && isSidebarCollapsibleOnDesktop) { %> x-show="$store.sidebar.isOpen"<% } %> class="fi-sidebar-item-grouped-border">
+                                                <% if (!first) { %><div class="fi-sidebar-item-grouped-border-part-not-first"></div><% } %>
+                                                <% if (!last) { %><div class="fi-sidebar-item-grouped-border-part-not-last"></div><% } %>
+                                                <div class="fi-sidebar-item-grouped-border-part"></div>
+                                            </div>
+                                        <% } %>
+                                        <span class="fi-sidebar-item-label">
+                                            <%= item.label %>
+                                        </span>
+                                        <% if (item.badge !== null) { %>
+                                            <span class="fi-sidebar-item-badge-ctn">
+                                                <%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %>
+                                            </span>
+                                        <% } %>
+                                    </a>
+                                    <% if (item.childItems?.length && (!item.url || item.isActive || item.activeChildItems)) { %>
+                                        <ul class="fi-sidebar-sub-group-items">
+                                            <% item.childItems.forEach((child, index) => sidebarItem(child, { grouped: true, subGrouped: true, first: index === 0, last: index === item.childItems.length - 1 })) %>
+                                        </ul>
+                                    <% } %>
+                                </li>
+<% } %>
 <div>
     <div x-data="filamentSidebar({
             hasTopNavigation: <%= hasTopNavigation ? 'true' : 'false' %>,
@@ -56,21 +84,7 @@
                             </div>
                         <% } %>
                         <ul<% if (group.label) { %> id="<%= group.itemsId %>"<% if (group.collapsible !== false) { %> x-show="! $store.sidebar.groupIsCollapsed(label)" x-collapse.duration.200ms<% } %><% } %> class="fi-sidebar-group-items">
-                            <% for (const item of group.items) { %>
-                                <li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.isActive }, 'fi-sidebar-item-has-url']) %>">
-                                    <a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> x-on:click="$store.sidebar.isMobile && $store.sidebar.close()" class="fi-sidebar-item-btn">
-                                        <% if (item.icon) { %><%- icon(item.icon, { size: 'lg', attributes: attrs({ class: 'fi-sidebar-item-icon' }) }) %><% } %>
-                                        <span class="fi-sidebar-item-label">
-                                            <%= item.label %>
-                                        </span>
-                                        <% if (item.badge !== null) { %>
-                                            <span class="fi-sidebar-item-badge-ctn">
-                                                <%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %>
-                                            </span>
-                                        <% } %>
-                                    </a>
-                                </li>
-                            <% } %>
+                            <% group.items.forEach((item, index) => sidebarItem(item, { grouped: Boolean(group.label), first: index === 0, last: index === group.items.length - 1 })) %>
                         </ul>
                     </li>
                 <% } %>