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

package/lib/xlsx.js

@@ -0,0 +1,171 @@
+// 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, 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. */
+function columnName(index) {
+    let name = '';
+    for (let n = index + 1; n > 0; n = Math.floor((n - 1) / 26))
+        name = String.fromCharCode(65 + ((n - 1) % 26)) + name;
+    return name;
+}
+/** Workbook with a single sheet: the first row is bold (header). */
+export function buildXlsx(rows, sheetName = 'Sheet1') {
+    const sheetRows = rows.map((row, r) => `<row r="${r + 1}">${row.map((cell, c) => `<c r="${columnName(c)}${r + 1}" t="inlineStr"${r === 0 ? ' s="1"' : ''}><is><t xml:space="preserve">${xml(cell === null || cell === undefined ? '' : String(cell)).slice(0, 32767)}</t></is></c>`).join('')}</row>`).join('');
+    const files = [
+        ['[Content_Types].xml', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/><Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/></Types>'],
+        ['_rels/.rels', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>'],
+        ['xl/workbook.xml', `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="${xml(sheetName.replace(/[\\/?*[\]:]/g, ' ').slice(0, 31)) || 'Sheet1'}" sheetId="1" r:id="rId1"/></sheets></workbook>`],
+        ['xl/_rels/workbook.xml.rels', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>'],
+        ['xl/styles.xml', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="2"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="1" fillId="0" borderId="0" xfId="0" applyFont="1"/></cellXfs></styleSheet>'],
+        ['xl/worksheets/sheet1.xml', `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${sheetRows}</sheetData></worksheet>`],
+    ];
+    return zip(files.map(([name, content]) => [name, Buffer.from(content, 'utf8')]));
+}
+/** ZIP archive (deflate), as required by the XLSX format. */
+function zip(entries) {
+    const locals = [], centrals = [];
+    let offset = 0;
+    for (const [name, data] of entries) {
+        const nameBuffer = Buffer.from(name, 'utf8');
+        const compressed = deflateRawSync(data);
+        const crc = crc32(data);
+        const local = Buffer.alloc(30);
+        local.writeUInt32LE(0x04034b50, 0);
+        local.writeUInt16LE(20, 4);
+        local.writeUInt16LE(0x0800, 6);
+        local.writeUInt16LE(8, 8);
+        local.writeUInt32LE(0, 10);
+        local.writeUInt32LE(crc >>> 0, 14);
+        local.writeUInt32LE(compressed.length, 18);
+        local.writeUInt32LE(data.length, 22);
+        local.writeUInt16LE(nameBuffer.length, 26);
+        local.writeUInt16LE(0, 28);
+        const central = Buffer.alloc(46);
+        central.writeUInt32LE(0x02014b50, 0);
+        central.writeUInt16LE(20, 4);
+        central.writeUInt16LE(20, 6);
+        central.writeUInt16LE(0x0800, 8);
+        central.writeUInt16LE(8, 10);
+        central.writeUInt32LE(0, 12);
+        central.writeUInt32LE(crc >>> 0, 16);
+        central.writeUInt32LE(compressed.length, 20);
+        central.writeUInt32LE(data.length, 24);
+        central.writeUInt16LE(nameBuffer.length, 28);
+        central.writeUInt32LE(offset, 42);
+        locals.push(local, nameBuffer, compressed);
+        centrals.push(central, nameBuffer);
+        offset += local.length + nameBuffer.length + compressed.length;
+    }
+    const centralSize = centrals.reduce((size, buffer) => size + buffer.length, 0);
+    const end = Buffer.alloc(22);
+    end.writeUInt32LE(0x06054b50, 0);
+    end.writeUInt16LE(entries.length, 8);
+    end.writeUInt16LE(entries.length, 10);
+    end.writeUInt32LE(centralSize, 12);
+    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.3",
+  "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.3",
-    "@navette-js/schemas": "1.0.0-beta.3",
-    "@navette-js/forms": "1.0.0-beta.3",
-    "@navette-js/actions": "1.0.0-beta.3",
-    "@navette-js/wire": "1.0.0-beta.3",
-    "@navette-js/tables": "1.0.0-beta.3",
-    "@navette-js/infolists": "1.0.0-beta.3",
-    "@navette-js/database": "1.0.0-beta.3",
+    "@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/components/user-menu.ejs

@@ -31,13 +31,13 @@
 <% } %>
 <% if (before.length) { %>        <div class="fi-dropdown-list"><%- before.join('') %></div>
 <% } %>
-        <div class="fi-dropdown-list">
+<% if (locals.hasThemeSwitcher !== false) { %>        <div class="fi-dropdown-list">
             <div x-data="{ theme: null }" x-init="
                     $watch('theme', () => {
                         $dispatch('theme-changed', theme)
                     })
 
-                    theme = localStorage.getItem('filament:theme:mode') || 'system'    " role="group" aria-label="<%= t('filament-panels::layout.actions.theme_switcher.label') %>" class="fi-theme-switcher">
+                    theme = localStorage.getItem('filament:theme:mode') || <%- js(locals.defaultThemeMode ?? 'system') %>    " role="group" aria-label="<%= t('filament-panels::layout.actions.theme_switcher.label') %>" class="fi-theme-switcher">
                 <% for (const [theme, iconName] of [['light', 'm-sun'], ['dark', 'm-moon'], ['system', 'm-computer-desktop']]) { %>
                     <% const label = t('filament-panels::layout.actions.theme_switcher.' + theme + '.label') %>
                     <button aria-label="<%= label %>" role="menuitemradio" tabindex="-1" type="button" x-on:click="(theme = <%- js(theme) %>) && close()" x-tooltip="{
@@ -49,6 +49,7 @@
                 <% } %>
             </div>
         </div>
+<% } %>
 
         <% if (locals.themes && themes.length > 1) { %>
             <%# Choice of one of the panel's predefined themes (Panel.themes()). %>

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

@@ -68,10 +68,15 @@
         </style>
 
         <%- renderHook('panels::styles.after', renderHookScopes) %>
+        <% if (locals.darkMode === false) { %><% } else if (locals.darkModeForced) { %>
+        <script>
+            document.documentElement.classList.add('dark')
+        </script>
+        <% } else { %>
         <script>
             const loadDarkMode = () => {
                 window.theme =
-                    localStorage.getItem('filament:theme:mode') ?? 'system'
+                    localStorage.getItem('filament:theme:mode') ?? <%- js(locals.defaultThemeMode ?? 'system') %>
 
                 if (
                     window.theme === 'dark' ||
@@ -87,11 +92,13 @@
 
             document.addEventListener('livewire:navigated', loadDarkMode)
         </script>
+        <% } %>
 
         <% if (locals.themeCss) { %><style data-navette-theme><%- themeCss %></style><% } %>
 
         <% 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) %>
@@ -121,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' %>,
@@ -42,34 +70,21 @@
             <%- renderHook('panels::sidebar.nav.start') %>
             <ul class="fi-sidebar-nav-groups">
                 <% for (const group of groups) { %>
-                    <li x-data="{ label: <%- js(group.label ?? '') %> }" data-group-label="<%= group.label ?? '' %>" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': group.isActive }, 'fi-collapsible']) %>">
+                    <li x-data="{ label: <%- js(group.label ?? '') %> }" data-group-label="<%= group.label ?? '' %>" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': group.isActive, 'fi-collapsible': group.collapsible !== false }]) %>">
                         <% if (group.label) { %>
-                            <div x-on:click="$store.sidebar.toggleCollapsedGroup(label)" class="fi-sidebar-group-btn">
+                            <div<% if (group.collapsible !== false) { %> x-on:click="$store.sidebar.toggleCollapsedGroup(label)"<% } %> class="fi-sidebar-group-btn">
+                                <% if (group.icon) { %><%- icon(group.icon, { size: 'lg' }) %><% } %>
                                 <span class="fi-sidebar-group-label">
                                     <%= group.label %>
                                 </span>
-                                <%- view('filament::components.icon-button', {
+                                <% if (group.collapsible !== false) { %><%- view('filament::components.icon-button', {
                                     iconName: 'm-chevron-up', label: group.label, className: 'fi-sidebar-group-collapse-btn',
                                     extra: attrs({ 'aria-controls': group.itemsId, 'x-bind:aria-expanded': '! $store.sidebar.groupIsCollapsed(label)', 'x-on:click.stop': '$store.sidebar.toggleCollapsedGroup(label)' }),
-                                }) %>
+                                }) %><% } %>
                             </div>
                         <% } %>
-                        <ul<% if (group.label) { %> id="<%= group.itemsId %>" 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>
-                            <% } %>
+                        <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">
+                            <% group.items.forEach((item, index) => sidebarItem(item, { grouped: Boolean(group.label), first: index === 0, last: index === group.items.length - 1 })) %>
                         </ul>
                     </li>
                 <% } %>

package/views/livewire/topbar.ejs

@@ -29,7 +29,7 @@
 <ul class="fi-topbar-nav-groups">
 <% for (const group of topNavigation) { %>
 <% if (group.label) { %>
-<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><li class="<%- cls(['fi-topbar-item', { 'fi-active': group.isActive }]) %>"><button type="button" class="fi-topbar-item-btn"><span class="fi-topbar-item-label"> <%= group.label %> </span><%- icon('m-chevron-down', { attributes: attrs({ class: 'fi-topbar-group-toggle-icon' }) }) %></button></li></div><div x-cloak x-float.placement.bottom-start.flip.teleport.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel " style="" ><div class="fi-dropdown-list"><% for (const item of group.items) { %><a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> class="<%- cls(['fi-dropdown-list-item', ...item.colorClasses]) %>" role="menuitem" tabindex="-1"><% if (item.icon) { %><%- icon(item.icon, item.isActive ? { attributes: attrs({ class: 'fi-color fi-color-primary' }) } : {}) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% if (item.badge !== null) { %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %><% } %></a><% } %></div></div></div>
+<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><li class="<%- cls(['fi-topbar-item', { 'fi-active': group.isActive }]) %>"><button type="button" class="fi-topbar-item-btn"><span class="fi-topbar-item-label"> <%= group.label %> </span><%- icon('m-chevron-down', { attributes: attrs({ class: 'fi-topbar-group-toggle-icon' }) }) %></button></li></div><div x-cloak x-float.placement.bottom-start.flip.teleport.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel " style="" ><% for (const list of group.lists) { %><div class="fi-dropdown-list"><% for (const item of list) { %><a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> class="<%- cls(['fi-dropdown-list-item', ...item.colorClasses]) %>" role="menuitem" tabindex="-1"><% if (item.icon) { %><%- icon(item.icon, item.isActive ? { attributes: attrs({ class: 'fi-color fi-color-primary' }) } : {}) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% if (item.badge !== null) { %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %><% } %></a><% } %></div><% } %></div></div>
 <% } else { %>
 <% for (const item of group.items) { %><li class="<%- cls(['fi-topbar-item', { 'fi-active': item.isActive }]) %>"><a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> class="fi-topbar-item-btn"><% if (item.icon) { %><%- icon(item.icon, { attributes: attrs({ class: 'fi-topbar-item-icon' }) }) %><% } %><span class="fi-topbar-item-label"> <%= item.label %> </span><% if (item.badge !== null) { %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %><% } %></a></li><% } %>
 <% } %>

package/views/pages/page.ejs

@@ -1,6 +1,48 @@
 <%# Panel page: header, breadcrumbs, sub-navigation and content %>
 <% const beforeHeaderActions = renderHook('panels::page.header.actions.before', renderHookScopes), afterHeaderActions = renderHook('panels::page.header.actions.after', renderHookScopes); %>
 <% const subNavigation = locals.subNavigation ?? []; const activeSubItem = subNavigation.find((item) => item.active) ?? subNavigation[0]; const subNavigationPosition = locals.subNavigationPosition ?? 'top'; %>
+<%# Sub-navigation groups: items without a group first, then each group in order of appearance. %>
+<% const subNavigationGroups = []; for (const item of subNavigation) { const label = item.group || null; let group = subNavigationGroups.find((candidate) => candidate.label === label); if (!group) { group = { label, items: [] }; if (label === null) subNavigationGroups.unshift(group); else subNavigationGroups.push(group); } group.items.push(item); } %>
+<% const subNavigationBadge = (item, wrap) => { if (item.badge === null || item.badge === undefined || item.badge === '') return; %><% if (wrap) { %><span class="fi-sidebar-item-badge-ctn"><% } %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses ?? [] }) %><% if (wrap) { %></span><% } %><% } %>
+<% const subNavigationSidebar = () => { %>
+                    <ul class="fi-page-sub-navigation-sidebar">
+                        <% for (const group of subNavigationGroups) { %>
+                        <li x-data="{ label: <% if (group.label) { %><%- js('sub_navigation_' + group.label) %><% } else { %>'sub_navigation_'<% } %> }" data-group-label="sub_navigation_<%= group.label ?? '' %>" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': group.items.some((item) => item.active) }, 'fi-collapsible']) %>">
+                            <% if (group.label) { %>
+                                <div x-on:click="$store.sidebar.toggleCollapsedGroup(label)" class="fi-sidebar-group-btn">
+                                    <span class="fi-sidebar-group-label">
+                                        <%= group.label %>
+                                    </span>
+                                    <%- view('filament::components.icon-button', {
+                                        iconName: 'm-chevron-up', label: group.label, className: 'fi-sidebar-group-collapse-btn',
+                                        extra: attrs({ 'x-bind:aria-expanded': '! $store.sidebar.groupIsCollapsed(label)', 'x-on:click.stop': '$store.sidebar.toggleCollapsedGroup(label)' }),
+                                    }) %>
+                                </div>
+                            <% } %>
+                            <ul<% if (group.label) { %> x-show="! $store.sidebar.groupIsCollapsed(label)" x-collapse.duration.200ms<% } %> class="fi-sidebar-group-items">
+                                <% group.items.forEach((item, index) => { %>
+                                    <li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.active }, 'fi-sidebar-item-has-url']) %>">
+                                        <a href="<%= item.url %>" wire:navigate<% if (item.active) { %> 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' }) }) %><% } %>
+                                            <% if (!item.icon && group.label) { %>
+                                                <div class="fi-sidebar-item-grouped-border">
+                                                    <% if (index > 0) { %><div class="fi-sidebar-item-grouped-border-part-not-first"></div><% } %>
+                                                    <% if (index < group.items.length - 1) { %><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>
+                                            <% subNavigationBadge(item, true) %>
+                                        </a>
+                                    </li>
+                                <% }) %>
+                            </ul>
+                        </li>
+                        <% } %>
+                    </ul>
+<% } %>
 <div class="<%- cls(['fi-page', subNavigation.length ? `fi-page-has-sub-navigation fi-page-has-sub-navigation-${subNavigationPosition}` : null, ...(locals.pageClasses ?? [])]) %>">
     <%- renderHook('panels::page.start', renderHookScopes) %>
     <div class="fi-page-header-main-ctn">
@@ -14,7 +56,7 @@
                 <div x-cloak x-float.placement.bottom-start.flip.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel fi-width-xs" style="">
                     <div class="fi-dropdown-list">
                         <% for (const item of subNavigation) { %>
-                            <a href="<%= item.url %>" wire:navigate class="fi-dropdown-list-item" role="menuitem" tabindex="-1"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span></a>
+                            <a href="<%= item.url %>" wire:navigate class="fi-dropdown-list-item" role="menuitem" tabindex="-1"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% subNavigationBadge(item, false) %></a>
                         <% } %>
                     </div>
                 </div>
@@ -73,22 +115,7 @@
                 <%- renderHook('panels::page.sub-navigation.start.before', renderHookScopes) %>
                 <div class="fi-page-sub-navigation-sidebar-ctn">
                     <%- renderHook('panels::page.sub-navigation.sidebar.before', renderHookScopes) %>
-                    <ul class="fi-page-sub-navigation-sidebar">
-                        <li x-data="{ label: 'sub_navigation_' }" data-group-label="sub_navigation_" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': subNavigation.some((item) => item.active) }, 'fi-collapsible']) %>">
-                            <ul class="fi-sidebar-group-items">
-                                <% for (const item of subNavigation) { %>
-                                    <li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.active }, 'fi-sidebar-item-has-url']) %>">
-                                        <a href="<%= item.url %>" wire:navigate<% if (item.active) { %> 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>
-                                        </a>
-                                    </li>
-                                <% } %>
-                            </ul>
-                        </li>
-                    </ul>
+<% subNavigationSidebar() %>
                     <%- renderHook('panels::page.sub-navigation.sidebar.after', renderHookScopes) %>
                 </div>
                 <%- renderHook('panels::page.sub-navigation.start.after', renderHookScopes) %>
@@ -96,8 +123,14 @@
             <% if (subNavigation.length && subNavigationPosition === 'top') { %>
                 <%- renderHook('panels::page.sub-navigation.top.before', renderHookScopes) %>
                 <nav class="fi-tabs fi-page-sub-navigation-tabs" aria-label="<%= t('filament::components/tabs.label') %>">
-                    <% for (const item of subNavigation) { %>
-                        <a href="<%= item.url %>" wire:navigate class="<%- cls(['fi-tabs-item', { 'fi-active': item.active }]) %>"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-tabs-item-label"><%= item.label %></span></a>
+                    <% for (const group of subNavigationGroups) { %>
+                        <% if (group.label) { %>
+                            <div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown"><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger"><button type="button" class="<%- cls(['fi-tabs-item', { 'fi-active': group.items.some((item) => item.active) }]) %>"><span class="fi-tabs-item-label"><%= group.label %></span></button></div><div x-cloak x-float.placement.bottom-start.flip.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel" style=""><div class="fi-dropdown-list"><% for (const item of group.items) { %><a href="<%= item.url %>" wire:navigate class="fi-dropdown-list-item" role="menuitem" tabindex="-1"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% subNavigationBadge(item, false) %></a><% } %></div></div></div>
+                        <% } else { %>
+                            <% for (const item of group.items) { %>
+                                <a href="<%= item.url %>" wire:navigate class="<%- cls(['fi-tabs-item', { 'fi-active': item.active }]) %>"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-tabs-item-label"><%= item.label %></span><% subNavigationBadge(item, false) %></a>
+                            <% } %>
+                        <% } %>
                     <% } %>
                 </nav>
                 <%- renderHook('panels::page.sub-navigation.top.after', renderHookScopes) %>
@@ -115,22 +148,7 @@
                 <%- renderHook('panels::page.sub-navigation.end.before', renderHookScopes) %>
                 <div class="fi-page-sub-navigation-sidebar-ctn">
                     <%- renderHook('panels::page.sub-navigation.sidebar.before', renderHookScopes) %>
-                    <ul class="fi-page-sub-navigation-sidebar">
-                        <li x-data="{ label: 'sub_navigation_' }" data-group-label="sub_navigation_" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': subNavigation.some((item) => item.active) }, 'fi-collapsible']) %>">
-                            <ul class="fi-sidebar-group-items">
-                                <% for (const item of subNavigation) { %>
-                                    <li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.active }, 'fi-sidebar-item-has-url']) %>">
-                                        <a href="<%= item.url %>" wire:navigate<% if (item.active) { %> 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>
-                                        </a>
-                                    </li>
-                                <% } %>
-                            </ul>
-                        </li>
-                    </ul>
+<% subNavigationSidebar() %>
                     <%- renderHook('panels::page.sub-navigation.sidebar.after', renderHookScopes) %>
                 </div>
                 <%- renderHook('panels::page.sub-navigation.end.after', renderHookScopes) %>