@navette-js/panels 0.0.0-stage → 1.0.0-beta.2

package/resources/filament/packages/tables/resources/css/table.css

@@ -0,0 +1,394 @@
+.fi-ta-table {
+    @apply w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5;
+
+    &.fi-ta-table-stacked-on-mobile {
+        @apply block sm:table sm:table-auto;
+
+        & > thead {
+            @apply block sm:table-header-group;
+
+            &:not(:has(.fi-ta-table-stacked-header-row)) {
+                @apply hidden sm:table-header-group;
+            }
+
+            & > tr:not(.fi-ta-table-stacked-header-row) {
+                @apply hidden sm:table-row;
+            }
+
+            & > tr > .fi-ta-header-cell {
+                @apply max-sm:hidden;
+            }
+
+            & > tr > .fi-ta-selection-cell {
+                @apply hidden sm:table-cell;
+            }
+        }
+
+        & > tbody {
+            @apply block whitespace-normal sm:table-row-group sm:whitespace-nowrap;
+        }
+
+        & > tbody > tr {
+            @apply relative block py-2 sm:static sm:table-row sm:py-0;
+
+            &.fi-collapsed {
+                @apply hidden;
+            }
+
+            &.fi-selected {
+                &::before {
+                    @apply bg-primary-600 absolute inset-y-0 start-0 w-0.5 sm:hidden;
+                    content: '';
+                }
+
+                @variant dark {
+                    &::before {
+                        @apply bg-primary-500;
+                    }
+                }
+
+                & > *:first-child {
+                    @apply max-sm:inset-shadow-none;
+                }
+            }
+
+            &.fi-ta-group-header-row {
+                @apply py-0;
+
+                &.fi-ta-group-header-row-with-selection {
+                    @apply grid grid-cols-[1fr_auto] sm:table-row;
+                }
+
+                & > td {
+                    @apply block w-full sm:table-cell sm:w-auto;
+                }
+
+                & > td:empty {
+                    @apply hidden sm:table-cell;
+                }
+
+                & > .fi-ta-group-selection-cell {
+                    @apply order-last flex! w-auto items-center px-4 sm:table-cell! sm:w-1 sm:px-3;
+                }
+            }
+
+            &.fi-ta-summary-row {
+                @apply py-0;
+            }
+
+            &.fi-ta-summary-header-row {
+                @apply hidden sm:table-row;
+            }
+        }
+
+        & > tbody > tr > .fi-ta-selection-cell {
+            @apply absolute end-4 top-0 pe-4 sm:static sm:table-cell sm:w-1 sm:px-3 sm:py-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+        }
+
+        & > tfoot {
+            @apply max-sm:block;
+
+            & > tr {
+                @apply max-sm:block;
+            }
+        }
+
+        & > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
+            @apply block px-4 sm:table-cell sm:px-0;
+
+            @variant sm {
+                &:first-child {
+                    @apply ps-3;
+                }
+
+                &:last-child {
+                    @apply pe-3;
+                }
+            }
+
+            &.fi-ta-summary-row-heading-cell {
+                @apply pb-0 sm:px-3 sm:py-4 sm:first:ps-6 sm:last:pe-6;
+            }
+
+            &.fi-ta-summary-header-cell {
+                @apply sm:px-3 sm:first:ps-6;
+            }
+
+            &.fi-ta-individual-search-cell {
+                @apply sm:px-3;
+            }
+
+            &.fi-ta-group-selection-cell,
+            &:has(.fi-ta-reorder-handle) {
+                @apply sm:px-3 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+            }
+
+            &.sm\:fi-hidden {
+                @apply sm:hidden;
+            }
+
+            &.md\:fi-hidden {
+                @apply md:hidden;
+            }
+
+            &.lg\:fi-hidden {
+                @apply lg:hidden;
+            }
+
+            &.xl\:fi-hidden {
+                @apply xl:hidden;
+            }
+
+            &.\32xl\:fi-hidden {
+                @apply 2xl:hidden;
+            }
+
+            &.sm\:fi-visible {
+                @apply hidden sm:table-cell;
+            }
+
+            &.md\:fi-visible {
+                @apply hidden md:table-cell;
+            }
+
+            &.lg\:fi-visible {
+                @apply hidden lg:table-cell;
+            }
+
+            &.xl\:fi-visible {
+                @apply hidden xl:table-cell;
+            }
+
+            &.\32xl\:fi-visible {
+                @apply hidden 2xl:table-cell;
+            }
+
+            &.fi-ta-summary-row-heading-cell-responsive {
+                @apply max-sm:block!;
+            }
+
+            & > .fi-ta-cell-label {
+                @apply pt-2 text-sm leading-6 font-semibold text-gray-500 sm:hidden dark:text-gray-400;
+            }
+
+            & > .fi-ta-cell-content {
+                @apply text-sm break-words text-gray-800 sm:block dark:text-gray-200;
+            }
+
+            &:has(.fi-ta-actions) {
+                @apply py-2 sm:px-3 sm:py-4;
+
+                @variant sm {
+                    &:first-of-type {
+                        @apply ps-6;
+                    }
+
+                    &:last-of-type {
+                        @apply pe-6;
+                    }
+                }
+
+                & > .fi-ta-actions {
+                    @apply w-full flex-wrap justify-start gap-x-3 gap-y-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:gap-3;
+                }
+            }
+        }
+    }
+
+    & > thead {
+        @apply divide-y divide-gray-200 dark:divide-white/5;
+
+        & > tr {
+            @apply bg-gray-50 dark:bg-white/5;
+
+            &.fi-ta-table-head-groups-row {
+                @apply bg-gray-100 dark:bg-transparent;
+            }
+        }
+    }
+
+    & > tbody {
+        @apply divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5;
+    }
+
+    & > tfoot {
+        @apply bg-gray-50 dark:bg-white/5;
+    }
+}
+
+:where(.fi-ta-table.fi-ta-table-stacked-on-mobile > tfoot > tr > td),
+:where(.fi-ta-table.fi-ta-table-stacked-on-mobile > tfoot > tr > th) {
+    @apply max-sm:block max-sm:w-full;
+}
+
+@variant max-sm {
+    .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='base'] {
+        @apply hidden;
+    }
+}
+
+@variant sm {
+    @variant max-md {
+        .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='sm'] {
+            @apply hidden;
+        }
+    }
+}
+
+@variant md {
+    @variant max-lg {
+        .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='md'] {
+            @apply hidden;
+        }
+    }
+}
+
+@variant lg {
+    @variant max-xl {
+        .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='lg'] {
+            @apply hidden;
+        }
+    }
+}
+
+@variant xl {
+    @variant max-2xl {
+        .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='xl'] {
+            @apply hidden;
+        }
+    }
+}
+
+@variant 2xl {
+    .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='2xl'] {
+        @apply hidden;
+    }
+}
+
+.fi-ta-summary-row-heading-fallback {
+    @apply hidden min-h-9 px-3 pt-4 text-sm leading-5 font-medium text-gray-950 dark:text-white;
+
+    & > span {
+        @apply sr-only;
+    }
+}
+
+@variant max-sm {
+    .fi-ta-summary-row[data-summary-heading-hidden-at~='base'] {
+        & > td:has(> .fi-ta-summary-row-heading-fallback) {
+            @apply align-top;
+        }
+
+        & > td > .fi-ta-summary-row-heading-fallback {
+            @apply block;
+
+            & > span[data-visible-at~='base'] {
+                @apply not-sr-only block whitespace-nowrap;
+            }
+        }
+    }
+}
+
+@variant sm {
+    @variant max-md {
+        .fi-ta-summary-row[data-summary-heading-hidden-at~='sm'] {
+            & > td:has(> .fi-ta-summary-row-heading-fallback) {
+                @apply align-top;
+            }
+
+            & > td > .fi-ta-summary-row-heading-fallback {
+                @apply block;
+
+                & > span[data-visible-at~='sm'] {
+                    @apply not-sr-only block whitespace-nowrap;
+                }
+            }
+        }
+    }
+}
+
+@variant md {
+    @variant max-lg {
+        .fi-ta-summary-row[data-summary-heading-hidden-at~='md'] {
+            & > td:has(> .fi-ta-summary-row-heading-fallback) {
+                @apply align-top;
+            }
+
+            & > td > .fi-ta-summary-row-heading-fallback {
+                @apply block;
+
+                & > span[data-visible-at~='md'] {
+                    @apply not-sr-only block whitespace-nowrap;
+                }
+            }
+        }
+    }
+}
+
+@variant lg {
+    @variant max-xl {
+        .fi-ta-summary-row[data-summary-heading-hidden-at~='lg'] {
+            & > td:has(> .fi-ta-summary-row-heading-fallback) {
+                @apply align-top;
+            }
+
+            & > td > .fi-ta-summary-row-heading-fallback {
+                @apply block;
+
+                & > span[data-visible-at~='lg'] {
+                    @apply not-sr-only block whitespace-nowrap;
+                }
+            }
+        }
+    }
+}
+
+@variant xl {
+    @variant max-2xl {
+        .fi-ta-summary-row[data-summary-heading-hidden-at~='xl'] {
+            & > td:has(> .fi-ta-summary-row-heading-fallback) {
+                @apply align-top;
+            }
+
+            & > td > .fi-ta-summary-row-heading-fallback {
+                @apply block;
+
+                & > span[data-visible-at~='xl'] {
+                    @apply not-sr-only block whitespace-nowrap;
+                }
+            }
+        }
+    }
+}
+
+@variant 2xl {
+    .fi-ta-summary-row[data-summary-heading-hidden-at~='2xl'] {
+        & > td:has(> .fi-ta-summary-row-heading-fallback) {
+            @apply align-top;
+        }
+
+        & > td > .fi-ta-summary-row-heading-fallback {
+            @apply block;
+
+            & > span[data-visible-at~='2xl'] {
+                @apply not-sr-only block whitespace-nowrap;
+            }
+        }
+    }
+}
+
+.fi-ta-table-stacked-header-row {
+    @apply block w-full border-y-0 sm:hidden;
+
+    & .fi-ta-table-stacked-header-cell {
+        @apply flex w-full items-center gap-4 bg-gray-50 px-4 py-3 font-normal dark:bg-white/5;
+
+        & .fi-ta-page-checkbox {
+            @apply ms-auto shrink-0;
+        }
+
+        & .fi-ta-table-stacked-sorting {
+            @apply flex flex-1 gap-x-3;
+        }
+    }
+}

package/resources/filament/packages/widgets/resources/css/chart-widget.css

@@ -0,0 +1,88 @@
+.fi-wi-chart {
+    & .fi-wi-chart-frame {
+        @apply mx-auto flex w-full items-center justify-center;
+
+        &:not(.fi-wi-chart-frame-no-aspect-ratio) {
+            @apply aspect-square;
+        }
+    }
+
+    @supports (container-type: inline-size) {
+        & .fi-section-content {
+            @apply @container;
+        }
+
+        & .fi-wi-chart-frame:not(.fi-wi-chart-frame-no-aspect-ratio) {
+            @apply @sm:aspect-[1.5];
+        }
+    }
+
+    @supports not (container-type: inline-size) {
+        & .fi-wi-chart-frame:not(.fi-wi-chart-frame-no-aspect-ratio) {
+            @apply sm:aspect-[1.5];
+        }
+    }
+
+    & .fi-wi-chart-filter {
+        &.fi-input-wrp {
+            @apply w-max sm:-my-2;
+        }
+
+        &.fi-dropdown {
+            & .fi-wi-chart-filter-content {
+                @apply grid gap-y-4 p-6;
+            }
+
+            & .fi-wi-chart-filter-content-actions-ctn {
+                @apply flex gap-3;
+            }
+        }
+    }
+
+    & .fi-color {
+        & .fi-wi-chart-bg-color {
+            @apply text-color-50 dark:text-color-400/10;
+        }
+
+        & .fi-wi-chart-border-color {
+            @apply text-color-500 dark:text-color-400;
+        }
+    }
+
+    & .fi-wi-chart-bg-color {
+        @apply text-gray-100 dark:text-gray-800;
+    }
+
+    & .fi-wi-chart-border-color {
+        @apply text-gray-400;
+    }
+
+    & .fi-wi-chart-grid-color {
+        @apply text-gray-200 dark:text-gray-800;
+    }
+
+    & .fi-wi-chart-text-color {
+        @apply text-gray-500 dark:text-gray-400;
+    }
+
+    /* Tooltips are painted onto the canvas, so these three elements are the only way to
+       color them. Their values are Chart.js' own tooltip colors rather than Filament
+       palette values, which is why they are written out longhand instead of `@apply`.
+       The border only appears once `--chart-tooltip-border-width` is set, so its
+       color defaults to a hairline that suits the background above it. */
+    & .fi-wi-chart-tooltip-bg-color {
+        color: rgb(0 0 0 / 0.8);
+    }
+
+    & .fi-wi-chart-tooltip-text-color {
+        color: rgb(255 255 255);
+    }
+
+    & .fi-wi-chart-tooltip-border-color {
+        color: rgb(255 255 255 / 0.2);
+    }
+
+    & .fi-empty-state {
+        @apply p-0;
+    }
+}

package/resources/filament/packages/widgets/resources/css/index.css

@@ -0,0 +1,3 @@
+@import './chart-widget.css' layer(components);
+@import './stats-overview-widget.css' layer(components);
+@import './widget.css' layer(components);

package/resources/filament/packages/widgets/resources/css/stats-overview-widget.css

@@ -0,0 +1,67 @@
+.fi-wi-stats-overview-stat {
+    @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 relative block h-full rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 outline-none focus-visible:ring-2 dark:bg-gray-900 dark:ring-white/10;
+
+    & .fi-icon {
+        @apply shrink-0 text-gray-400 dark:text-gray-500;
+    }
+
+    & .fi-wi-stats-overview-stat-content {
+        @apply grid gap-y-2;
+    }
+
+    & .fi-wi-stats-overview-stat-label-ctn {
+        @apply flex items-center gap-x-2;
+    }
+
+    & .fi-wi-stats-overview-stat-label {
+        @apply text-sm font-medium text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-wi-stats-overview-stat-value {
+        /* Tabular figures: stat values are near-always numeric, and polled
+           widgets would otherwise reflow as digit widths change. */
+        @apply text-3xl font-semibold tracking-tight text-gray-950 tabular-nums dark:text-white;
+    }
+
+    & .fi-wi-stats-overview-stat-placeholder {
+        @apply text-3xl font-medium text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-wi-stats-overview-stat-description {
+        @apply flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400;
+
+        &.fi-color {
+            @apply text-(--text) dark:text-(--dark-text);
+
+            & .fi-icon {
+                @apply text-color-500;
+            }
+        }
+    }
+
+    & .fi-wi-stats-overview-stat-chart {
+        @apply absolute inset-x-0 bottom-0 overflow-hidden rounded-b-xl;
+
+        & > canvas {
+            @apply h-6;
+        }
+
+        & .fi-wi-stats-overview-stat-chart-bg-color {
+            @apply text-gray-100 dark:text-gray-800;
+        }
+
+        & .fi-wi-stats-overview-stat-chart-border-color {
+            @apply text-gray-400;
+        }
+
+        &.fi-color {
+            & .fi-wi-stats-overview-stat-chart-bg-color {
+                @apply text-color-50 dark:text-color-400/10;
+            }
+
+            & .fi-wi-stats-overview-stat-chart-border-color {
+                @apply text-color-500 dark:text-color-400;
+            }
+        }
+    }
+}

package/resources/filament/packages/widgets/resources/css/widget.css

@@ -0,0 +1,3 @@
+.fi-wi {
+    @apply gap-6;
+}

package/theme.css

@@ -0,0 +1,17 @@
+/* Navette's base theme (MIT-licensed sources under resources/), compiled by Tailwind with the application's sources.
+   An application imports it from its own theme stylesheet, then declares its sources with `@source`. */
+@import './resources/filament/packages/panels/resources/css/theme.css';
+
+/* Utility classes used in Navette's own views and code. */
+@source './views/**/*.ejs';
+@source './src/**/*.ts';
+@source '../forms/src/**/*.ts';
+@source '../forms/views/**/*.ejs';
+@source '../tables/src/**/*.ts';
+@source '../tables/views/**/*.ejs';
+@source '../actions/src/**/*.ts';
+@source '../actions/views/**/*.ejs';
+@source '../schemas/src/**/*.ts';
+@source '../support/src/**/*.ts';
+@source '../support/views/**/*.ejs';
+@source '../infolists/src/**/*.ts';

package/views/components/logo.ejs

@@ -0,0 +1,9 @@
+<%# Brand logo or brand name %>
+<% if (brand.logo) { %>
+    <img alt="<%= t('filament-panels::layout.logo.alt', { name: brand.name }) %>" src="<%= brand.logo %>" style="height: <%- brand.height %>;" class="<%- brand.darkLogo ? 'fi-logo fi-logo-light' : 'fi-logo' %>" />
+    <% if (brand.darkLogo) { %>
+        <img alt="<%= t('filament-panels::layout.logo.alt', { name: brand.name }) %>" src="<%= brand.darkLogo %>" style="height: <%- brand.height %>;" class="fi-logo fi-logo-dark" />
+    <% } %>
+<% } else { %>
+    <div class="fi-logo"><%= brand.name %></div>
+<% } %>

package/views/components/tenant-menu.ejs

@@ -0,0 +1,13 @@
+<%# Tenant menu (no search, even beyond ten tenants) %>
+<%- 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="
+                    tooltip = $store.sidebar.isOpen
+                        ? false
+                        : {
+                              content: <%= js(tenant.name) %>,
+                              allowHTML: false,
+                              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>
+<%- renderHook('panels::tenant-menu.after') %>

package/views/components/user-menu.ejs

@@ -0,0 +1,82 @@
+<%# User menu (sidebar or topbar), with the theme switcher %>
+<% const topbar = locals.position === 'topbar'; const collapsible = locals.isSidebarCollapsibleOnDesktop === true; const before = locals.itemsBefore ?? []; const after = locals.itemsAfter ?? []; %>
+<%- renderHook('panels::user-menu.before') %>
+<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown fi-user-menu">
+    <div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger">
+<% if (topbar) { %>
+        <button aria-label="<%= t('filament-panels::layout.actions.open_user_menu.label') %>" type="button" class="fi-user-menu-trigger">
+            <img alt="<%= t('filament-panels::layout.avatar.alt', { name: user.name }) %>" class="fi-avatar fi-circular fi-size-md fi-user-avatar" src="<%= avatarUrl %>" loading="lazy" />
+        </button>
+<% } else { %>
+        <button aria-label="<%= user.name %>" type="button" class="fi-user-menu-trigger">
+            <img alt="<%= t('filament-panels::layout.avatar.alt', { name: user.name }) %>" class="fi-avatar fi-circular fi-size-md fi-user-avatar" src="<%= avatarUrl %>" loading="lazy" />
+            <span<% if (collapsible) { %> x-show="$store.sidebar.isOpen"<% } %> class="fi-user-menu-trigger-text">
+                <%= user.name %>
+            </span>
+            <%- icon('m-chevron-up', collapsible ? { attributes: attrs({ 'x-show': '$store.sidebar.isOpen' }) } : {}) %>
+        </button>
+<% } %>
+    </div>
+
+    <div x-cloak x-float.placement.<%= topbar ? 'bottom-end' : 'top-end' %>.flip<% if (topbar) { %>.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="">
+<% if (!locals.profileUrl) { %>
+        <%- renderHook('panels::user-menu.profile.before') %>
+        <div class="fi-dropdown-header">
+            <%- icon('m-user-circle') %>
+            <span>
+                <%= user.name %>
+            </span>
+        </div>
+        <%- renderHook('panels::user-menu.profile.after') %>
+<% } %>
+<% if (before.length) { %>        <div class="fi-dropdown-list"><%- before.join('') %></div>
+<% } %>
+        <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">
+                <% 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="{
+                            content: <%- js(label) %>,
+                            theme: $store.theme,
+                        }" x-bind:aria-checked="theme === <%- js(theme) %> ? 'true' : 'false'" x-bind:class="{ 'fi-active': theme === <%- js(theme) %> }" class="fi-theme-switcher-btn">
+                        <%- icon(iconName) %>
+                    </button>
+                <% } %>
+            </div>
+        </div>
+
+        <% if (locals.themes && themes.length > 1) { %>
+            <%# Choice of one of the panel's predefined themes (Panel.themes()). %>
+            <div role="group" aria-label="Theme" class="fi-dropdown-list nv-theme-list">
+                <% for (const theme of themes) { %>
+                    <button role="menuitemradio" aria-checked="<%= theme.id === activeTheme ? 'true' : 'false' %>" tabindex="-1" type="button" wire:click="setTheme(<%= js(theme.id) %>)" data-theme="<%= theme.id %>" class="<%- cls(['fi-dropdown-list-item', theme.id === activeTheme && 'fi-active']) %>">
+                        <span aria-hidden="true" class="nv-theme-swatch" style="display: inline-block; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); background-color: <%= theme.swatch %>"></span>
+                        <span class="fi-dropdown-list-item-label">
+                            <%= theme.label %>
+                        </span>
+                        <% if (theme.id === activeTheme) { %><%- icon('m-check') %><% } %>
+                    </button>
+                <% } %>
+            </div>
+        <% } %>
+
+<% if (after.length) { %>        <div class="fi-dropdown-list"><%- after.join('') %></div>
+<% } %>
+        <div class="fi-dropdown-list">
+            <form action="<%= logoutUrl %>" method="post"><input type="hidden" name="_token" value="<%= csrf %>" autocomplete="off">
+                <button role="menuitem" tabindex="-1" type="submit" class="fi-dropdown-list-item">
+                    <%- icon('m-arrow-left-on-rectangle') %>
+                    <span class="fi-dropdown-list-item-label">
+                        <%= t('filament-panels::layout.actions.logout.label') %>
+                    </span>
+                </button>
+            </form>
+        </div>
+    </div>
+</div>
+<%- renderHook('panels::user-menu.after') %>