@flusys/ng-layout 6.3.0 → 6.4.1

package/fesm2022/flusys-ng-layout.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, DestroyRef, computed, effect, Component, InjectionToken, input, viewChild, ElementRef, Renderer2 } from '@angular/core';
-import * as i3 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, InlineSvgComponent, TranslatePipe, TranslateService, IconComponent, AngularModule } from '@flusys/ng-shared';
-import { isPlatformBrowser, NgComponentOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, DestroyRef, computed, effect, Renderer2, Component, input, viewChild, InjectionToken, ElementRef } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgComponentOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled, isSignUpEnabled } from '@flusys/ng-core';
-import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i2$1 from '@angular/router';
-import { Router, NavigationEnd, isActive, RouterModule } from '@angular/router';
+import * as i3 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, InlineSvgComponent, TranslatePipe, IconComponent, TranslateService, AngularModule } from '@flusys/ng-shared';
+import { Subject, fromEvent, filter } from 'rxjs';
 import * as i1 from '@flusys/ng-ui';
-import { PRESET_NAMES, applyTheme, SURFACE_PALETTES, PRIMARY_PALETTES, applyPrimaryPalette, applySurfacePalette, PRESETS, UiModule, MessageService } from '@flusys/ng-ui';
+import { PRESET_NAMES, UiModule, applyTheme, SURFACE_PALETTES, PRIMARY_PALETTES, NOIR_PRIMARY, applyPrimaryPalette, applySurfacePalette, PRESETS, MessageService } from '@flusys/ng-ui';
 export { applyTheme, buildBootstrapPreset } from '@flusys/ng-ui';
-import { filter } from 'rxjs/operators';
+import * as i2 from '@angular/router';
+import { Router, NavigationEnd, isActive, RouterModule } from '@angular/router';
+import { filter as filter$1 } from 'rxjs/operators';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 /** Filter launcher apps based on user permission codes */
 function filterAppsByPermissions(apps, permissionCodes) {
@@ -76,11 +76,13 @@ function filterMenuItem(item, permissionCode) {
 
 const STORAGE_KEY = 'flusys.layout.config';
 const STORAGE_VERSION = 1;
+// Sourced from the theme package so a new preset never silently fails validation.
+const VALID_PRESETS = PRESET_NAMES;
+const VALID_MENU_MODES = ['static', 'overlay', 'topbar'];
+const VALID_LAYOUT_THEMES = ['classic', 'modern'];
 class LayoutPersistenceService {
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
-    validPresets = ['Aura', 'Lara', 'Nora'];
-    validMenuModes = ['static', 'overlay', 'topbar'];
     load() {
         if (!this.isBrowser)
             return null;
@@ -88,8 +90,7 @@ class LayoutPersistenceService {
             const stored = localStorage.getItem(STORAGE_KEY);
             if (!stored)
                 return null;
-            const parsed = JSON.parse(stored);
-            return this.validateConfig(parsed);
+            return this.validateConfig(JSON.parse(stored));
         }
         catch {
             this.clear();
@@ -107,7 +108,7 @@ class LayoutPersistenceService {
             localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore));
         }
         catch {
-            // Silent fail - localStorage may be full or disabled
+            // localStorage may be full or disabled — the config simply stays unsaved.
         }
     }
     clear() {
@@ -115,22 +116,32 @@ class LayoutPersistenceService {
             return;
         localStorage.removeItem(STORAGE_KEY);
     }
-    validateConfig(config) {
-        if (config._version && config._version !== STORAGE_VERSION) {
+    /**
+     * Coerces a stored value only when it is present and unrecognised. A field the
+     * user never changed stays absent so the app's own default still wins when this
+     * result is merged over it.
+     */
+    validateConfig(stored) {
+        if (stored._version && stored._version !== STORAGE_VERSION) {
             this.clear();
             return null;
         }
-        if (config.preset && !this.validPresets.includes(config.preset)) {
+        const { _version, ...config } = stored;
+        if (config.preset !== undefined && !VALID_PRESETS.includes(config.preset)) {
             config.preset = 'Aura';
         }
-        if (config.menuMode && !this.validMenuModes.includes(config.menuMode)) {
+        if (config.menuMode !== undefined &&
+            !VALID_MENU_MODES.includes(config.menuMode)) {
             config.menuMode = 'static';
         }
-        if (typeof config.darkTheme !== 'boolean') {
+        if (config.layoutTheme !== undefined &&
+            !VALID_LAYOUT_THEMES.includes(config.layoutTheme)) {
+            config.layoutTheme = 'classic';
+        }
+        if (config.darkTheme !== undefined && typeof config.darkTheme !== 'boolean') {
             config.darkTheme = false;
         }
-        const { _version, ...cleanConfig } = config;
-        return cleanConfig;
+        return config;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
@@ -140,6 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Matches the 991px shell breakpoint both skins use in SCSS. */
 const DESKTOP_BREAKPOINT = 991;
 class LayoutService {
     document = inject(DOCUMENT);
@@ -153,6 +165,7 @@ class LayoutService {
         surface: null,
         darkTheme: false,
         menuMode: 'static',
+        layoutTheme: 'classic',
     };
     DEFAULT_STATE = {
         staticMenuDesktopInactive: false,
@@ -160,7 +173,6 @@ class LayoutService {
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false,
-        topbarMenuVisible: true,
     };
     memorable = this.DEFAULT_CONFIG.isMemorable !== false;
     _layoutConfig = signal({
@@ -211,22 +223,32 @@ class LayoutService {
     ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
     isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
-    isTopbar = computed(() => this._layoutConfig().menuMode === 'topbar', /* @ts-ignore */
+    layoutTheme = computed(() => this._layoutConfig().layoutTheme ?? 'classic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutTheme" }] : /* istanbul ignore next */ []));
+    isModernLayout = computed(() => this.layoutTheme() === 'modern', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isModernLayout" }] : /* istanbul ignore next */ []));
+    isClassicLayout = computed(() => this.layoutTheme() === 'classic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isClassicLayout" }] : /* istanbul ignore next */ []));
+    /** The modern skin has no horizontal nav, so topbar mode only applies to the classic skin. */
+    isTopbar = computed(() => this._layoutConfig().menuMode === 'topbar' && !this.isModernLayout(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isTopbar" }] : /* istanbul ignore next */ []));
     userName = computed(() => this._userProfile()?.name ?? 'Guest', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
     userEmail = computed(() => this._userProfile()?.email ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []));
-    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, /* @ts-ignore */
+    // `||`, not `??`, throughout the block below: the backend returns "no picture" and
+    // "no logo" as an empty string as often as it does null, and an empty string would
+    // slip past `??` and render as a broken image.
+    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl || null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : /* istanbul ignore next */ []));
-    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, /* @ts-ignore */
+    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl || null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : /* istanbul ignore next */ []));
     isAuthenticated = computed(() => !!this._userProfile(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
     companyName = computed(() => {
         if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig))
             return this.appName;
-        return this._companyProfile()?.name ?? this.appName;
+        return this._companyProfile()?.name || this.appName;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "companyName" }] : /* istanbul ignore next */ []));
     displayLogo = computed(() => this.companyLogoUrl() ?? this.appLogo, /* @ts-ignore */
@@ -240,6 +262,7 @@ class LayoutService {
     resetSource$ = this.resetSource.asObservable();
     overlayOpen$ = this.overlayOpen.asObservable();
     initialized = false;
+    appliedDarkTheme = this._layoutConfig().darkTheme;
     constructor() {
         if (this.isBrowser) {
             this.toggleDarkMode();
@@ -252,7 +275,13 @@ class LayoutService {
         effect(() => {
             const config = this._layoutConfig();
             if (this.initialized) {
-                this.handleDarkModeTransition(config);
+                // Only the dark-mode flip is worth a view transition. Every other field —
+                // preset, primary, menu mode, layout skin — used to start one too, which
+                // cross-faded the whole page for a change that never touched it.
+                if (config.darkTheme !== this.appliedDarkTheme) {
+                    this.appliedDarkTheme = config.darkTheme;
+                    this.handleDarkModeTransition(config);
+                }
                 if (this.memorable)
                     this.persistence.save(config);
             }
@@ -283,14 +312,6 @@ class LayoutService {
     }
     onMenuToggle() {
         const state = this._layoutState();
-        // Desktop topbar mode: toggle topbar nav visibility
-        if (this.isDesktop() && this.isTopbar()) {
-            this._layoutState.update((prev) => ({
-                ...prev,
-                topbarMenuVisible: !prev.topbarMenuVisible,
-            }));
-            return;
-        }
         // Mobile always uses staticMenuMobileActive regardless of menu mode
         if (!this.isDesktop()) {
             const newMobileActive = !state.staticMenuMobileActive;
@@ -357,6 +378,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Shared shell behaviour for every layout skin.
+ * Holds the menu open/close lifecycle so a skin only owns markup and styling.
+ */
+class LayoutShellBase {
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
+    renderer = inject(Renderer2);
+    router = inject(Router);
+    layoutService = inject(LayoutService);
+    menuOutsideClickListener = null;
+    /** Extra work a skin needs on every completed navigation. */
+    onNavigated() { }
+    constructor() {
+        this.layoutService.overlayOpen$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
+                    if (this.isOutsideClicked(event)) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if (this.layoutService.layoutState().staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.hideMenu();
+            this.onNavigated();
+        });
+    }
+    isOutsideClicked(event) {
+        const eventTarget = event.target;
+        // querySelectorAll, not querySelector: a skin may render the same control more
+        // than once (the modern shell has a menu button in both the sidebar and the
+        // topbar) and matching only the first one reads a real click as an outside one.
+        return !this.outsideClickSelectors().some((selector) => Array.from(this.document.querySelectorAll(selector)).some((element) => element.isSameNode(eventTarget) || element.contains(eventTarget)));
+    }
+    hideMenu() {
+        this.layoutService.updateLayoutState({
+            overlayMenuActive: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false,
+        });
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+    blockBodyScroll() {
+        this.document.body.classList.add('blocked-scroll');
+    }
+    unblockBodyScroll() {
+        this.document.body.classList.remove('blocked-scroll');
+    }
+    isOverlay = this.layoutService.isOverlay;
+    /** Delegated so a skin that has no horizontal nav is never treated as being in it. */
+    isTopbarMode = this.layoutService.isTopbar;
+    isOverlayActive = computed(() => this.layoutService.layoutState().overlayMenuActive, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlayActive" }] : /* istanbul ignore next */ []));
+    isMobileActive = computed(() => this.layoutService.layoutState().staticMenuMobileActive, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobileActive" }] : /* istanbul ignore next */ []));
+    /**
+     * The desktop sidebar is collapsed in place. Only meaningful for the modes that
+     * keep the sidebar in the layout flow — an overlay drawer and the horizontal nav
+     * have nothing to collapse.
+     */
+    isDesktopCollapsed = computed(() => !!this.layoutService.layoutState().staticMenuDesktopInactive &&
+        !this.isOverlay() &&
+        !this.isTopbarMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDesktopCollapsed" }] : /* istanbul ignore next */ []));
+}
+
 class AppFooter {
     layoutService = inject(LayoutService);
     appName = this.layoutService.appName;
@@ -412,262 +511,394 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-class AppConfigurator {
+class AppMenuitem {
+    // Signal inputs
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    index = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    parentKey = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []));
+    // Injected services
     router = inject(Router);
-    translateAdapter = inject(TranslateService, { optional: true });
-    platformId = inject(PLATFORM_ID);
     layoutService = inject(LayoutService);
-    presets = PRESET_NAMES;
-    showMenuModeButton = signal(!this.router.url.includes('auth'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : /* istanbul ignore next */ []));
-    menuModeOptions = computed(() => {
-        const options = [
-            { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
-            { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
-        ];
-        if (this.layoutService.isDesktop()) {
-            options.push({ label: this.translate('layout.configurator.menu.mode.topbar'), value: 'topbar' });
-        }
-        return options;
+    destroyRef = inject(DestroyRef);
+    // View references
+    parentLink = viewChild('parentLink', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentLink" }] : /* istanbul ignore next */ []));
+    // State signals - private writable + public readonly pattern
+    _active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    active = this._active.asReadonly();
+    // Computed signals
+    key = computed(() => {
+        const parent = this.parentKey();
+        return parent ? `${parent}-${this.index()}` : String(this.index());
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    routerLink = computed(() => {
+        const menuItem = this.item();
+        return menuItem.routerLink ?? [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    // Computed options for routerLinkActive - use 'exact' for root, 'subset' for others
+    routerLinkActiveOptions = computed(() => {
+        const link = this.routerLink();
+        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
+        return {
+            paths: pathsMatch,
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     constructor() {
-        if (isPlatformBrowser(this.platformId)) {
-            effect(() => {
-                const config = this.layoutService.layoutConfig();
-                applyTheme({
-                    preset: (config.preset ?? 'Aura'),
-                    primary: config.primary ?? 'violet',
-                    surface: config.surface ?? null,
-                    darkTheme: config.darkTheme ?? false,
-                });
+        // Subscribe to menu source changes
+        this.layoutService.menuSource$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            Promise.resolve(null).then(() => {
+                const currentKey = this.key();
+                if (value.routeEvent) {
+                    this._active.set(value.key === currentKey ||
+                        value.key?.startsWith(currentKey + '-'));
+                }
+                else if (value.key !== currentKey &&
+                    !value.key?.startsWith(currentKey + '-')) {
+                    this._active.set(false);
+                }
             });
+        });
+        // Subscribe to menu reset
+        this.layoutService.resetSource$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this._active.set(false));
+        // Subscribe to navigation events
+        this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.item().routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
+        // Effect to update active state on init when item has routerLink
+        effect(() => {
+            const menuItem = this.item();
+            if (menuItem.routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
+        // Effect to update submenu position when active in topbar mode
+        effect(() => {
+            if (this.active() && this.parentLink()) {
+                Promise.resolve().then(() => this.updateSubmenuPosition());
+            }
+        });
+    }
+    onMouseEnter() {
+        if (this.layoutService.isTopbar() && this.item().children) {
+            this.updateSubmenuPosition();
         }
     }
-    surfaces = Object.entries(SURFACE_PALETTES).map(([name, pal]) => ({
-        name,
-        palette: pal,
-    }));
-    selectedPrimaryColor = computed(() => this.layoutService.layoutConfig().primary, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : /* istanbul ignore next */ []));
-    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : /* istanbul ignore next */ []));
-    isSurfaceSelected(surfaceName) {
-        const sel = this.selectedSurfaceColor();
-        if (sel)
-            return sel === surfaceName;
-        const isDark = this.layoutService.layoutConfig().darkTheme;
-        return isDark ? surfaceName === 'zinc' : surfaceName === 'slate';
+    updateSubmenuPosition() {
+        const linkEl = this.parentLink()?.nativeElement;
+        if (!linkEl || typeof linkEl.getBoundingClientRect !== 'function')
+            return;
+        const rect = linkEl.getBoundingClientRect();
+        const hostEl = linkEl.closest('[app-menuitem]');
+        if (!hostEl)
+            return;
+        // Position submenu to the left of the parent link and above it
+        const left = rect.left;
+        const top = rect.top + 30; // 8px gap above the menu item
+        hostEl.style.setProperty('--submenu-left', `${left}px`);
+        hostEl.style.setProperty('--submenu-top', `${top}px`);
     }
-    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []));
-    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
-    primaryColors = computed(() => {
-        const palettes = [{ name: 'noir', palette: {} }];
-        for (const [name, pal] of Object.entries(PRIMARY_PALETTES)) {
-            palettes.push({ name, palette: pal });
-        }
-        return palettes;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []));
-    updateColors(event, type, color) {
-        if (type === 'primary') {
-            this.layoutService.updateLayoutConfig({ primary: color.name });
-        }
-        else if (type === 'surface') {
-            this.layoutService.updateLayoutConfig({ surface: color.name });
+    updateActiveStateFromRoute() {
+        const link = this.routerLink();
+        if (!link.length)
+            return;
+        // Use 'exact' for root path to avoid matching all routes
+        // Use 'subset' for all other paths to match child routes
+        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
+        const active = isActive(link[0], this.router, {
+            paths: pathsMatch,
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored',
+        })();
+        if (active) {
+            this.layoutService.onMenuStateChange({
+                key: this.key(),
+                routeEvent: true,
+            });
         }
-        this._applyColorChange(type, color);
-        event.stopPropagation();
     }
-    _applyColorChange(type, color) {
-        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
-        if (type === 'primary') {
-            const primary = color.name ?? 'violet';
-            const pal = primary === 'noir'
-                ? Object.fromEntries(Object.entries(SURFACE_PALETTES['slate']).map(([k, v]) => [k, v]))
-                : PRIMARY_PALETTES[primary];
-            if (pal)
-                applyPrimaryPalette(pal, isDark);
+    itemClick() {
+        if (this.item().children && !this.layoutService.isTopbar()) {
+            this._active.update((prev) => !prev);
         }
-        else if (type === 'surface') {
-            const surfacePal = SURFACE_PALETTES[color.name ?? 'slate'];
-            if (surfacePal)
-                applySurfacePalette(surfacePal);
-        }
-    }
-    onPresetChange(event) {
-        const primary = PRESETS[event]?.signaturePrimary ?? 'violet';
-        this.layoutService.updateLayoutConfig({ preset: event, primary });
-        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
-        const surface = this.layoutService.layoutConfig().surface ?? null;
-        applyTheme({ preset: event, primary, surface, darkTheme: isDark });
-    }
-    onMenuModeChange(event) {
-        this.layoutService.updateLayoutConfig({ menuMode: event });
-    }
-    translate(key) {
-        return this.translateAdapter?.translate(key) ?? key;
+        this.layoutService.onMenuStateChange({ key: this.key() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl" }, ngImport: i0, template: `
-    <div class="flex flex-col gap-4">
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{
-          'layout.configurator.primary' | translate
-        }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (primaryColor of primaryColors(); track primaryColor.name) {
-            <button
-              type="button"
-              [title]="primaryColor.name"
-              (click)="updateColors($event, 'primary', primaryColor)"
-              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              [style.background-color]="
-                primaryColor?.name === 'noir'
-                  ? 'var(--f-text-color)'
-                  : primaryColor?.palette?.['500']
-              "
-            ></button>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, viewQueries: [{ propertyName: "parentLink", first: true, predicate: ["parentLink"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a
+          (click)="itemClick()"
+          (mouseenter)="onMouseEnter()"
+          #parentLink
+          tabindex="0"
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
           }
-        </div>
-      </div>
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{
-          'layout.configurator.surface' | translate
-        }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (surface of surfaces; track surface.name) {
-            <button
-              type="button"
-              [title]="surface.name"
-              (click)="updateColors($event, 'surface', surface)"
-              [class.outline-primary]="isSurfaceSelected(surface.name)"
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              [style.background-color]="
-                surface?.name === 'noir'
-                  ? 'var(--f-text-color)'
-                  : surface?.palette?.['500']
-              "
-            ></button>
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
+          }}</span>
+          @if (item().children) {
+            @if (layoutService.isTopbar()) {
+              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
+            } @else {
+              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
+            }
           }
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{
-          'layout.configurator.presets' | translate
-        }}</span>
-        <f-selectbutton
-          [options]="presets"
-          [ngModel]="selectedPreset()"
-          (ngModelChange)="onPresetChange($event)"
-          [allowEmpty]="false"
-          size="small"
-        />
-      </div>
-      @if (showMenuModeButton()) {
-        <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">{{
-            'layout.configurator.menu.mode' | translate
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
           }}</span>
-          <f-selectbutton
-            [ngModel]="menuMode()"
-            (ngModelChange)="onMenuModeChange($event)"
-            [options]="menuModeOptions()"
-            [allowEmpty]="false"
-            size="small"
-          />
-        </div>
+        </a>
       }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.SelectButtonComponent, selector: "f-selectbutton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "multiple", "disabled", "invalid", "allowEmpty", "size", "styleClass", "style"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+      @if (item().children) {
+        <ul
+          (mouseenter)="onMouseEnter()"
+          [class.submenu-expanded]="active() && !layoutService.isTopbar()"
+          [class.submenu-collapsed]="!active() && !layoutService.isTopbar()"
+        >
+          @for (
+            child of item().children;
+            track 'menu' + child.id + '' + i;
+            let i = $index
+          ) {
+            <li
+              app-menuitem
+              [item]="child"
+              [index]="i"
+              [parentKey]="key()"
+            ></li>
+          }
+        </ul>
+      }
+    </ng-container>
+  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'app-configurator',
-                    imports: [UiModule, FormsModule, TranslatePipe],
-                    template: `
-    <div class="flex flex-col gap-4">
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{
-          'layout.configurator.primary' | translate
-        }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (primaryColor of primaryColors(); track primaryColor.name) {
-            <button
-              type="button"
-              [title]="primaryColor.name"
-              (click)="updateColors($event, 'primary', primaryColor)"
-              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              [style.background-color]="
-                primaryColor?.name === 'noir'
-                  ? 'var(--f-text-color)'
-                  : primaryColor?.palette?.['500']
-              "
-            ></button>
-          }
-        </div>
-      </div>
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{
-          'layout.configurator.surface' | translate
-        }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (surface of surfaces; track surface.name) {
-            <button
-              type="button"
-              [title]="surface.name"
-              (click)="updateColors($event, 'surface', surface)"
-              [class.outline-primary]="isSurfaceSelected(surface.name)"
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              [style.background-color]="
-                surface?.name === 'noir'
-                  ? 'var(--f-text-color)'
-                  : surface?.palette?.['500']
-              "
-            ></button>
+            args: [{ selector: '[app-menuitem]', imports: [UiModule, IconComponent, RouterModule, TranslatePipe], template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a
+          (click)="itemClick()"
+          (mouseenter)="onMouseEnter()"
+          #parentLink
+          tabindex="0"
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
           }
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{
-          'layout.configurator.presets' | translate
-        }}</span>
-        <f-selectbutton
-          [options]="presets"
-          [ngModel]="selectedPreset()"
-          (ngModelChange)="onPresetChange($event)"
-          [allowEmpty]="false"
-          size="small"
-        />
-      </div>
-      @if (showMenuModeButton()) {
-        <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">{{
-            'layout.configurator.menu.mode' | translate
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
           }}</span>
-          <f-selectbutton
-            [ngModel]="menuMode()"
-            (ngModelChange)="onMenuModeChange($event)"
-            [options]="menuModeOptions()"
-            [allowEmpty]="false"
-            size="small"
-          />
-        </div>
+          @if (item().children) {
+            @if (layoutService.isTopbar()) {
+              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
+            } @else {
+              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
+            }
+          }
+        </a>
       }
-    </div>
-  `,
-                    host: {
-                        class: 'hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl',
-                        style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{
+            item().labelKey ? (item().labelKey! | translate) : item().label
+          }}</span>
+        </a>
+      }
+      @if (item().children) {
+        <ul
+          (mouseenter)="onMouseEnter()"
+          [class.submenu-expanded]="active() && !layoutService.isTopbar()"
+          [class.submenu-collapsed]="!active() && !layoutService.isTopbar()"
+        >
+          @for (
+            child of item().children;
+            track 'menu' + child.id + '' + i;
+            let i = $index
+          ) {
+            <li
+              app-menuitem
+              [item]="child"
+              [index]="i"
+              [parentKey]="key()"
+            ></li>
+          }
+        </ul>
+      }
+    </ng-container>
+  `, host: {
+                        '[class.active-menuitem]': 'active()',
+                    }, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }], parentLink: [{ type: i0.ViewChild, args: ['parentLink', { isSignal: true }] }] } });
+
+/**
+ * Main menu component that displays filtered menu items.
+ * Menu is automatically filtered based on user permissions using the permission checker (logicNode pattern).
+ * The filtering happens internally in LayoutService via computed signal.
+ */
+class AppMenu {
+    layoutService = inject(LayoutService);
+    /**
+     * Filtered menu items from layout service.
+     * This signal is computed in LayoutService and automatically updates when:
+     * - Raw menu changes (setMenu called)
+     * - Permission state changes (user permissions updated)
+     */
+    menuItems = this.layoutService.menu;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
+    <ul>
+      @for (
+        item of menuItems();
+        track 'menu' + item.id + '' + i;
+        let i = $index
+      ) {
+        <li app-menuitem [item]="item" [index]="i"></li>
+      }
+    </ul>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-menu',
+                    imports: [AppMenuitem, RouterModule],
+                    template: `<div class="layout-menu">
+    <ul>
+      @for (
+        item of menuItems();
+        track 'menu' + item.id + '' + i;
+        let i = $index
+      ) {
+        <li app-menuitem [item]="item" [index]="i"></li>
+      }
+    </ul>
+  </div>`,
+                }]
+        }] });
+
+class AppSidebar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
+    <div class="layout-sidebar">
+      <app-menu />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-sidebar',
+                    imports: [AppMenu],
+                    template: `
+    <div class="layout-sidebar">
+      <app-menu />
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Home link showing the active company logo and name.
+ * Every skin renders this same markup; sizing and colour come from the bar it sits in.
+ */
+class AppBrandLogo {
+    layoutService = inject(LayoutService);
+    companyName = this.layoutService.companyName;
+    displayLogo = this.layoutService.displayLogo;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppBrandLogo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppBrandLogo, isStandalone: true, selector: "app-brand-logo", host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <a class="layout-brand-logo" routerLink="/">
+      @if (displayLogo()) {
+        @if (layoutService.isDisplayLogoSvg()) {
+          <inline-svg [src]="displayLogo()" class="logo-image" />
+        } @else {
+          <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
+        }
+      }
+      <span>{{ companyName() }}</span>
+    </a>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppBrandLogo, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-brand-logo',
+                    imports: [RouterModule, InlineSvgComponent],
+                    host: { style: 'display: contents' },
+                    template: `
+    <a class="layout-brand-logo" routerLink="/">
+      @if (displayLogo()) {
+        @if (layoutService.isDisplayLogoSvg()) {
+          <inline-svg [src]="displayLogo()" class="logo-image" />
+        } @else {
+          <img [src]="displayLogo()" [alt]="companyName()" class="logo-image" />
+        }
+      }
+      <span>{{ companyName() }}</span>
+    </a>
+  `,
+                }]
+        }] });
+
 const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
 const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
 const LAYOUT_NOTIFICATION_BELL = new InjectionToken('LAYOUT_NOTIFICATION_BELL');
@@ -677,444 +908,301 @@ const LAYOUT_SEARCHBAR = new InjectionToken('LAYOUT_SEARCHBAR');
 const LAYOUT_IS_RTL = new InjectionToken('LAYOUT_IS_RTL');
 const LAYOUT_SEARCH_ADAPTER = new InjectionToken('LAYOUT_SEARCH_ADAPTER');
 
-class AppFloatingConfigurator {
+class AppConfigurator {
+    router = inject(Router);
+    translateAdapter = inject(TranslateService, { optional: true });
+    platformId = inject(PLATFORM_ID);
     layoutService = inject(LayoutService);
-    languageSelectorPanel = inject(LAYOUT_LANGUAGE_SELECTOR_PANEL, {
-        optional: true,
-    });
-    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
-    toggleDarkMode() {
-        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
-        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
+    presets = PRESET_NAMES;
+    showMenuModeButton = signal(!this.router.url.includes('auth'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : /* istanbul ignore next */ []));
+    menuModeOptions = computed(() => {
+        const options = [
+            { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
+            { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
+        ];
+        // Topbar mode renders a horizontal nav, which only the classic skin provides.
+        if (this.layoutService.isDesktop() && !this.layoutService.isModernLayout()) {
+            options.push({ label: this.translate('layout.configurator.menu.mode.topbar'), value: 'topbar' });
+        }
+        return options;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : /* istanbul ignore next */ []));
+    layoutThemeOptions = computed(() => [
+        { label: this.translate('layout.configurator.layout.theme.classic'), value: 'classic' },
+        { label: this.translate('layout.configurator.layout.theme.modern'), value: 'modern' },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutThemeOptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (isPlatformBrowser(this.platformId)) {
+            effect(() => {
+                const config = this.layoutService.layoutConfig();
+                applyTheme({
+                    preset: (config.preset ?? 'Aura'),
+                    primary: config.primary ?? 'violet',
+                    surface: config.surface ?? null,
+                    darkTheme: config.darkTheme ?? false,
+                });
+            });
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
-    <div
-      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
-    >
-      <button
-        fButton
-        type="button"
-        (click)="toggleDarkMode()"
-        [rounded]="true"
-        severity="secondary"
-      >
-        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
-      </button>
-      @if (languageSelectorPanel) {
-        <div class="relative">
-          <button
-            fButton
-            fStyleClass="@next"
-            enterFromClass="hidden"
-            enterActiveClass="animate-scalein"
-            leaveToClass="hidden"
-            leaveActiveClass="animate-fadeout"
-            [hideOnOutsideClick]="true"
-            type="button"
-            rounded
-          >
-            <ui-icon pButtonIcon name="globe"></ui-icon>
-          </button>
-          <ng-container *ngComponentOutlet="languageSelectorPanel" />
-        </div>
-      }
-      <div class="relative">
-        <button
-          fButton
-          fStyleClass="@next"
-          enterFromClass="hidden"
-          enterActiveClass="animate-scalein"
-          leaveToClass="hidden"
-          leaveActiveClass="animate-fadeout"
-          [hideOnOutsideClick]="true"
-          type="button"
-          rounded
-        >
-          <ui-icon pButtonIcon name="palette"></ui-icon>
-        </button>
-        <app-configurator />
-      </div>
-    </div>
-  `, isInline: true, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-floating-configurator', imports: [NgComponentOutlet, UiModule, AppConfigurator], template: `
-    <div
-      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
-    >
-      <button
-        fButton
-        type="button"
-        (click)="toggleDarkMode()"
-        [rounded]="true"
-        severity="secondary"
-      >
-        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
-      </button>
-      @if (languageSelectorPanel) {
-        <div class="relative">
-          <button
-            fButton
-            fStyleClass="@next"
-            enterFromClass="hidden"
-            enterActiveClass="animate-scalein"
-            leaveToClass="hidden"
-            leaveActiveClass="animate-fadeout"
-            [hideOnOutsideClick]="true"
-            type="button"
-            rounded
-          >
-            <ui-icon pButtonIcon name="globe"></ui-icon>
-          </button>
-          <ng-container *ngComponentOutlet="languageSelectorPanel" />
-        </div>
-      }
-      <div class="relative">
-        <button
-          fButton
-          fStyleClass="@next"
-          enterFromClass="hidden"
-          enterActiveClass="animate-scalein"
-          leaveToClass="hidden"
-          leaveActiveClass="animate-fadeout"
-          [hideOnOutsideClick]="true"
-          type="button"
-          rounded
-        >
-          <ui-icon pButtonIcon name="palette"></ui-icon>
-        </button>
-        <app-configurator />
-      </div>
-    </div>
-  `, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"] }]
-        }] });
-
-class AppMenuitem {
-    // Signal inputs
-    item = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
-    index = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-    parentKey = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []));
-    // Injected services
-    router = inject(Router);
-    layoutService = inject(LayoutService);
-    destroyRef = inject(DestroyRef);
-    // View references
-    parentLink = viewChild('parentLink', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentLink" }] : /* istanbul ignore next */ []));
-    // State signals - private writable + public readonly pattern
-    _active = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
-    active = this._active.asReadonly();
-    // Computed signals
-    key = computed(() => {
-        const parent = this.parentKey();
-        return parent ? `${parent}-${this.index()}` : String(this.index());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    routerLink = computed(() => {
-        const menuItem = this.item();
-        return menuItem.routerLink ?? [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    // Computed options for routerLinkActive - use 'exact' for root, 'subset' for others
-    routerLinkActiveOptions = computed(() => {
-        const link = this.routerLink();
-        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
-        return {
-            paths: pathsMatch,
-            queryParams: 'ignored',
-            matrixParams: 'ignored',
-            fragment: 'ignored',
-        };
+    surfaces = Object.entries(SURFACE_PALETTES).map(([name, pal]) => ({
+        name,
+        palette: pal,
+    }));
+    selectedPrimaryColor = computed(() => this.layoutService.layoutConfig().primary, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : /* istanbul ignore next */ []));
+    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : /* istanbul ignore next */ []));
+    isSurfaceSelected(surfaceName) {
+        const sel = this.selectedSurfaceColor();
+        if (sel)
+            return sel === surfaceName;
+        const isDark = this.layoutService.layoutConfig().darkTheme;
+        return isDark ? surfaceName === 'zinc' : surfaceName === 'slate';
+    }
+    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []));
+    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
+    layoutTheme = this.layoutService.layoutTheme;
+    primaryColors = computed(() => {
+        const palettes = [{ name: 'noir', palette: {} }];
+        for (const [name, pal] of Object.entries(PRIMARY_PALETTES)) {
+            palettes.push({ name, palette: pal });
+        }
+        return palettes;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Subscribe to menu source changes
-        this.layoutService.menuSource$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            Promise.resolve(null).then(() => {
-                const currentKey = this.key();
-                if (value.routeEvent) {
-                    this._active.set(value.key === currentKey ||
-                        value.key?.startsWith(currentKey + '-'));
-                }
-                else if (value.key !== currentKey &&
-                    !value.key?.startsWith(currentKey + '-')) {
-                    this._active.set(false);
-                }
-            });
-        });
-        // Subscribe to menu reset
-        this.layoutService.resetSource$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this._active.set(false));
-        // Subscribe to navigation events
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.item().routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-        // Effect to update active state on init when item has routerLink
-        effect(() => {
-            const menuItem = this.item();
-            if (menuItem.routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-        // Effect to update submenu position when active in topbar mode
-        effect(() => {
-            if (this.active() && this.parentLink()) {
-                Promise.resolve().then(() => this.updateSubmenuPosition());
-            }
-        });
+    ...(ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []));
+    updateColors(event, type, color) {
+        if (type === 'primary') {
+            this.layoutService.updateLayoutConfig({ primary: color.name });
+        }
+        else if (type === 'surface') {
+            this.layoutService.updateLayoutConfig({ surface: color.name });
+        }
+        this._applyColorChange(type, color);
+        event.stopPropagation();
     }
-    onMouseEnter() {
-        if (this.layoutService.isTopbar() && this.item().children) {
-            this.updateSubmenuPosition();
+    _applyColorChange(type, color) {
+        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
+        if (type === 'primary') {
+            const primary = color.name ?? 'violet';
+            // NOIR_PRIMARY, not a copy of a surface palette: its shades are references to
+            // the active surface ramp, which is what lets applyPrimaryPalette recognise the
+            // neutral and derive the same tokens a preset switch to Nora would.
+            const pal = primary === 'noir' ? NOIR_PRIMARY : PRIMARY_PALETTES[primary];
+            if (pal)
+                applyPrimaryPalette(pal, isDark);
+        }
+        else if (type === 'surface') {
+            const surfacePal = SURFACE_PALETTES[color.name ?? 'slate'];
+            if (surfacePal)
+                applySurfacePalette(surfacePal);
         }
     }
-    updateSubmenuPosition() {
-        const linkEl = this.parentLink()?.nativeElement;
-        if (!linkEl || typeof linkEl.getBoundingClientRect !== 'function')
-            return;
-        const rect = linkEl.getBoundingClientRect();
-        const hostEl = linkEl.closest('[app-menuitem]');
-        if (!hostEl)
-            return;
-        // Position submenu to the left of the parent link and above it
-        const left = rect.left;
-        const top = rect.top + 30; // 8px gap above the menu item
-        hostEl.style.setProperty('--submenu-left', `${left}px`);
-        hostEl.style.setProperty('--submenu-top', `${top}px`);
+    onPresetChange(event) {
+        const primary = PRESETS[event]?.signaturePrimary ?? 'violet';
+        this.layoutService.updateLayoutConfig({ preset: event, primary });
+        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
+        const surface = this.layoutService.layoutConfig().surface ?? null;
+        applyTheme({ preset: event, primary, surface, darkTheme: isDark });
     }
-    updateActiveStateFromRoute() {
-        const link = this.routerLink();
-        if (!link.length)
-            return;
-        // Use 'exact' for root path to avoid matching all routes
-        // Use 'subset' for all other paths to match child routes
-        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
-        const active = isActive(link[0], this.router, {
-            paths: pathsMatch,
-            queryParams: 'ignored',
-            matrixParams: 'ignored',
-            fragment: 'ignored',
-        })();
-        if (active) {
-            this.layoutService.onMenuStateChange({
-                key: this.key(),
-                routeEvent: true,
-            });
-        }
+    onMenuModeChange(event) {
+        this.layoutService.updateLayoutConfig({ menuMode: event });
     }
-    itemClick() {
-        if (this.item().children && !this.layoutService.isTopbar()) {
-            this._active.update((prev) => !prev);
-        }
-        this.layoutService.onMenuStateChange({ key: this.key() });
+    onLayoutThemeChange(event) {
+        const menuMode = this.layoutService.layoutConfig().menuMode;
+        this.layoutService.updateLayoutConfig({
+            layoutTheme: event,
+            // Modern skin has no horizontal nav — fall back to the static sidebar.
+            menuMode: event === 'modern' && menuMode === 'topbar' ? 'static' : menuMode,
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, viewQueries: [{ propertyName: "parentLink", first: true, predicate: ["parentLink"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-container>
-      @if (item().children?.length) {
-        <a
-          (click)="itemClick()"
-          (mouseenter)="onMouseEnter()"
-          #parentLink
-          tabindex="0"
-        >
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{
-            item().labelKey ? (item().labelKey! | translate) : item().label
-          }}</span>
-          @if (item().children) {
-            @if (layoutService.isTopbar()) {
-              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
-            } @else {
-              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
-            }
-          }
-        </a>
-      }
-      @if (item().routerLink && !item().children?.length) {
-        <a
-          (click)="itemClick()"
-          [routerLink]="routerLink()"
-          routerLinkActive="active-route"
-          [routerLinkActiveOptions]="routerLinkActiveOptions()"
-          tabindex="0"
-        >
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{
-            item().labelKey ? (item().labelKey! | translate) : item().label
-          }}</span>
-        </a>
-      }
-      @if (item().children) {
-        <ul
-          (mouseenter)="onMouseEnter()"
-          [class.submenu-expanded]="active() && !layoutService.isTopbar()"
-          [class.submenu-collapsed]="!active() && !layoutService.isTopbar()"
-        >
-          @for (
-            child of item().children;
-            track 'menu' + child.id + '' + i;
-            let i = $index
-          ) {
-            <li
-              app-menuitem
-              [item]="child"
-              [index]="i"
-              [parentKey]="key()"
-            ></li>
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl" }, ngImport: i0, template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.primary' | translate
+        }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+              type="button"
+              [title]="primaryColor.name"
+              (click)="updateColors($event, 'primary', primaryColor)"
+              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              [style.background-color]="
+                primaryColor?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : primaryColor?.palette?.['500']
+              "
+            ></button>
           }
-        </ul>
-      }
-    </ng-container>
-  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenuitem, decorators: [{
-            type: Component,
-            args: [{ selector: '[app-menuitem]', imports: [UiModule, IconComponent, RouterModule, TranslatePipe], template: `
-    <ng-container>
-      @if (item().children?.length) {
-        <a
-          (click)="itemClick()"
-          (mouseenter)="onMouseEnter()"
-          #parentLink
-          tabindex="0"
-        >
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.surface' | translate
+        }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (surface of surfaces; track surface.name) {
+            <button
+              type="button"
+              [title]="surface.name"
+              (click)="updateColors($event, 'surface', surface)"
+              [class.outline-primary]="isSurfaceSelected(surface.name)"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              [style.background-color]="
+                surface?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : surface?.palette?.['500']
+              "
+            ></button>
           }
-          <span class="layout-menuitem-text">{{
-            item().labelKey ? (item().labelKey! | translate) : item().label
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.presets' | translate
+        }}</span>
+        <f-selectbutton
+          [options]="presets"
+          [ngModel]="selectedPreset()"
+          (ngModelChange)="onPresetChange($event)"
+          [allowEmpty]="false"
+          size="small"
+        />
+      </div>
+      @if (showMenuModeButton()) {
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">{{
+            'layout.configurator.layout.theme' | translate
           }}</span>
-          @if (item().children) {
-            @if (layoutService.isTopbar()) {
-              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
-            } @else {
-              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
-            }
-          }
-        </a>
-      }
-      @if (item().routerLink && !item().children?.length) {
-        <a
-          (click)="itemClick()"
-          [routerLink]="routerLink()"
-          routerLinkActive="active-route"
-          [routerLinkActiveOptions]="routerLinkActiveOptions()"
-          tabindex="0"
-        >
-          @if (item().icon) {
-            <lib-icon
-              [icon]="item().icon!"
-              [iconType]="item().iconType"
-              class="layout-menuitem-icon"
-            />
-          }
-          <span class="layout-menuitem-text">{{
-            item().labelKey ? (item().labelKey! | translate) : item().label
+          <f-selectbutton
+            [ngModel]="layoutTheme()"
+            (ngModelChange)="onLayoutThemeChange($event)"
+            [options]="layoutThemeOptions()"
+            [allowEmpty]="false"
+            size="small"
+          />
+        </div>
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">{{
+            'layout.configurator.menu.mode' | translate
           }}</span>
-        </a>
-      }
-      @if (item().children) {
-        <ul
-          (mouseenter)="onMouseEnter()"
-          [class.submenu-expanded]="active() && !layoutService.isTopbar()"
-          [class.submenu-collapsed]="!active() && !layoutService.isTopbar()"
-        >
-          @for (
-            child of item().children;
-            track 'menu' + child.id + '' + i;
-            let i = $index
-          ) {
-            <li
-              app-menuitem
-              [item]="child"
-              [index]="i"
-              [parentKey]="key()"
-            ></li>
-          }
-        </ul>
-      }
-    </ng-container>
-  `, host: {
-                        '[class.active-menuitem]': 'active()',
-                    }, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }], parentLink: [{ type: i0.ViewChild, args: ['parentLink', { isSignal: true }] }] } });
-
-/**
- * Main menu component that displays filtered menu items.
- * Menu is automatically filtered based on user permissions using the permission checker (logicNode pattern).
- * The filtering happens internally in LayoutService via computed signal.
- */
-class AppMenu {
-    layoutService = inject(LayoutService);
-    /**
-     * Filtered menu items from layout service.
-     * This signal is computed in LayoutService and automatically updates when:
-     * - Raw menu changes (setMenu called)
-     * - Permission state changes (user permissions updated)
-     */
-    menuItems = this.layoutService.menu;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
-    <ul>
-      @for (
-        item of menuItems();
-        track 'menu' + item.id + '' + i;
-        let i = $index
-      ) {
-        <li app-menuitem [item]="item" [index]="i"></li>
+          <f-selectbutton
+            [ngModel]="menuMode()"
+            (ngModelChange)="onMenuModeChange($event)"
+            [options]="menuModeOptions()"
+            [allowEmpty]="false"
+            size="small"
+          />
+        </div>
       }
-    </ul>
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.SelectButtonComponent, selector: "f-selectbutton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "multiple", "disabled", "invalid", "allowEmpty", "size", "styleClass", "style"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-menu',
-                    imports: [AppMenuitem, RouterModule],
-                    template: `<div class="layout-menu">
-    <ul>
-      @for (
-        item of menuItems();
-        track 'menu' + item.id + '' + i;
-        let i = $index
-      ) {
-        <li app-menuitem [item]="item" [index]="i"></li>
+                    selector: 'app-configurator',
+                    imports: [UiModule, FormsModule, TranslatePipe],
+                    template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.primary' | translate
+        }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+              type="button"
+              [title]="primaryColor.name"
+              (click)="updateColors($event, 'primary', primaryColor)"
+              [class.outline-primary]="primaryColor.name === selectedPrimaryColor()"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              [style.background-color]="
+                primaryColor?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : primaryColor?.palette?.['500']
+              "
+            ></button>
+          }
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.surface' | translate
+        }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (surface of surfaces; track surface.name) {
+            <button
+              type="button"
+              [title]="surface.name"
+              (click)="updateColors($event, 'surface', surface)"
+              [class.outline-primary]="isSurfaceSelected(surface.name)"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              [style.background-color]="
+                surface?.name === 'noir'
+                  ? 'var(--f-text-color)'
+                  : surface?.palette?.['500']
+              "
+            ></button>
+          }
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">{{
+          'layout.configurator.presets' | translate
+        }}</span>
+        <f-selectbutton
+          [options]="presets"
+          [ngModel]="selectedPreset()"
+          (ngModelChange)="onPresetChange($event)"
+          [allowEmpty]="false"
+          size="small"
+        />
+      </div>
+      @if (showMenuModeButton()) {
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">{{
+            'layout.configurator.layout.theme' | translate
+          }}</span>
+          <f-selectbutton
+            [ngModel]="layoutTheme()"
+            (ngModelChange)="onLayoutThemeChange($event)"
+            [options]="layoutThemeOptions()"
+            [allowEmpty]="false"
+            size="small"
+          />
+        </div>
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">{{
+            'layout.configurator.menu.mode' | translate
+          }}</span>
+          <f-selectbutton
+            [ngModel]="menuMode()"
+            (ngModelChange)="onMenuModeChange($event)"
+            [options]="menuModeOptions()"
+            [allowEmpty]="false"
+            size="small"
+          />
+        </div>
       }
-    </ul>
-  </div>`,
+    </div>
+  `,
+                    host: {
+                        class: 'hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl',
+                        style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
+                    },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * View Transitions API type definitions
@@ -1137,7 +1225,7 @@ class AppCompanyBranchSelector {
     isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
@@ -1355,7 +1443,7 @@ class AppCompanyBranchSelector {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
@@ -1464,7 +1552,7 @@ class AppLauncher {
     isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
@@ -1617,7 +1705,7 @@ class AppProfile {
     isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
@@ -1757,7 +1845,7 @@ class AppProfile {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
@@ -2086,7 +2174,7 @@ class AppSearchbar {
         }
       }
     </div>
-  `, isInline: true, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:4rem;left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i1.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:var(--layout-shell-topbar-bottom, 4rem);left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i1.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSearchbar, decorators: [{
             type: Component,
@@ -2194,10 +2282,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }
       }
     </div>
-  `, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:4rem;left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"] }]
+  `, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:var(--layout-shell-topbar-bottom, 4rem);left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchWrapper: [{ type: i0.ViewChild, args: ['searchWrapper', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
-class AppTopbar {
+/**
+ * Trailing action rail of the topbar — search, theme controls and the widget menu.
+ * Skins own the bar around it; the rail itself is identical in every skin, and
+ * `display: contents` on the host keeps it a direct flex child of the bar.
+ */
+class AppTopbarActions {
     appConfig = inject(APP_CONFIG);
     document = inject(DOCUMENT$1);
     destroyRef = inject(DestroyRef);
@@ -2211,111 +2304,34 @@ class AppTopbar {
     searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, {
         optional: true,
     });
-    hasSearchAdapter = computed(() => !!this.searchAdapter, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasSearchAdapter" }] : /* istanbul ignore next */ []));
     configContainer = viewChild('configContainer', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "configContainer" }] : /* istanbul ignore next */ []));
-    navContainer = viewChild('navContainer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navContainer" }] : /* istanbul ignore next */ []));
-    activePanel = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activePanel" }] : /* istanbul ignore next */ []));
+    _configPanelOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_configPanelOpen" }] : /* istanbul ignore next */ []));
+    configPanelOpen = this._configPanelOpen.asReadonly();
+    hasSearchAdapter = computed(() => !!this.searchAdapter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSearchAdapter" }] : /* istanbul ignore next */ []));
+    enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.activePanel() !== null))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this._configPanelOpen()))
             .subscribe((event) => {
-            this.handleOutsideClick(event);
-        });
-        effect(() => {
-            const nav = this.navContainer();
-            if (nav && this.layoutService.isTopbar()) {
-                fromEvent(nav.nativeElement, 'scroll')
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this.recalculateHoveredSubmenu(nav.nativeElement));
+            const configEl = this.configContainer()?.nativeElement;
+            if (configEl && !configEl.contains(event.target)) {
+                this._configPanelOpen.set(false);
             }
         });
     }
-    companyName = this.layoutService.companyName;
-    displayLogo = this.layoutService.displayLogo;
-    enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
     toggleDarkMode() {
-        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
-        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
-    }
-    togglePanel(panel) {
-        this.activePanel.update((current) => (current === panel ? null : panel));
-    }
-    handleOutsideClick(event) {
-        const target = event.target;
-        const configEl = this.configContainer()?.nativeElement;
-        if (configEl && !configEl.contains(target)) {
-            this.activePanel.set(null);
-        }
-    }
-    recalculateHoveredSubmenu(navEl) {
-        const hoveredItems = navEl.querySelectorAll('li:hover');
-        hoveredItems.forEach((li) => {
-            const link = li.querySelector(':scope > a');
-            if (!link)
-                return;
-            const rect = link.getBoundingClientRect();
-            const top = rect.bottom + 12;
-            const left = rect.left - 12;
-            li.style.setProperty('--submenu-left', `${left}px`);
-            li.style.setProperty('--submenu-top', `${top}px`);
+        this.layoutService.updateLayoutConfig({
+            darkTheme: !this.layoutService.layoutConfig().darkTheme,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }, { propertyName: "navContainer", first: true, predicate: ["navContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="layout-topbar">
-    <div
-      class="layout-topbar-logo-container"
-      [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
-    >
-      @if (!layoutService.isTopbar() && layoutService.isMobile()) {
-        <button
-          class="layout-menu-button layout-topbar-action"
-          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
-          (click)="layoutService.onMenuToggle()"
-        >
-          <ui-icon name="bars"></ui-icon>
-        </button>
-      }
-      <a class="layout-topbar-logo" routerLink="/">
-        @if (displayLogo()) {
-          @if (layoutService.isDisplayLogoSvg()) {
-            <inline-svg [src]="displayLogo()" class="logo-image" />
-          } @else {
-            <img
-              [src]="displayLogo()"
-              [alt]="companyName()"
-              class="logo-image"
-            />
-          }
-        }
-        <span class="hidden sm:inline">{{ companyName() }}</span>
-      </a>
-      @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
-        <button
-          class="layout-menu-button layout-topbar-action layout-topbar-action-right"
-          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
-          (click)="layoutService.onMenuToggle()"
-        >
-          <ui-icon name="bars"></ui-icon>
-        </button>
-      }
-    </div>
-
-    @if (layoutService.isTopbar() && layoutService.isDesktop()) {
-      <div
-        #navContainer
-        class="layout-topbar-nav-horizontal"
-        [class.layout-topbar-nav-hidden]="
-          !layoutService.layoutState().topbarMenuVisible
-        "
-      >
-        <app-menu />
-      </div>
+    toggleConfigPanel() {
+        this._configPanelOpen.update((open) => !open);
     }
-
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbarActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppTopbarActions, isStandalone: true, selector: "app-topbar-actions", host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="layout-topbar-actions">
       @if (hasSearchAdapter()) {
         <app-searchbar />
@@ -2327,12 +2343,15 @@ class AppTopbar {
           [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
-          <ui-icon [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
+          <ui-icon
+            [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"
+          ></ui-icon>
         </button>
         <div class="relative" #configContainer>
           <button
+            type="button"
             class="layout-topbar-action"
-            [class.layout-topbar-action-highlight]="activePanel() === 'config'"
+            [class.layout-topbar-action-highlight]="configPanelOpen()"
             [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
             fStyleClass="@next"
             enterFromClass="hidden"
@@ -2340,7 +2359,7 @@ class AppTopbar {
             leaveToClass="hidden"
             leaveActiveClass="animate-fadeout"
             [hideOnOutsideClick]="true"
-            (click)="togglePanel('config')"
+            (click)="toggleConfigPanel()"
           >
             <ui-icon name="palette"></ui-icon>
           </button>
@@ -2349,6 +2368,7 @@ class AppTopbar {
       </div>
 
       <button
+        type="button"
         class="layout-topbar-menu-button layout-topbar-action"
         [attr.aria-label]="'layout.topbar.more.options' | translate"
         fStyleClass="@next"
@@ -2379,73 +2399,24 @@ class AppTopbar {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppMenu, selector: "app-menu" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }, { kind: "component", type: AppSearchbar, selector: "app-searchbar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }, { kind: "component", type: AppSearchbar, selector: "app-searchbar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbarActions, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-topbar',
-                    imports: [UiModule, RouterModule,
+                    selector: 'app-topbar-actions',
+                    imports: [
+                        UiModule,
                         NgComponentOutlet,
                         TranslatePipe,
-                        InlineSvgComponent,
                         AppConfigurator,
-                        AppMenu,
                         AppProfile,
                         AppCompanyBranchSelector,
                         AppLauncher,
-                        AppSearchbar,],
-                    template: `<div class="layout-topbar">
-    <div
-      class="layout-topbar-logo-container"
-      [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
-    >
-      @if (!layoutService.isTopbar() && layoutService.isMobile()) {
-        <button
-          class="layout-menu-button layout-topbar-action"
-          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
-          (click)="layoutService.onMenuToggle()"
-        >
-          <ui-icon name="bars"></ui-icon>
-        </button>
-      }
-      <a class="layout-topbar-logo" routerLink="/">
-        @if (displayLogo()) {
-          @if (layoutService.isDisplayLogoSvg()) {
-            <inline-svg [src]="displayLogo()" class="logo-image" />
-          } @else {
-            <img
-              [src]="displayLogo()"
-              [alt]="companyName()"
-              class="logo-image"
-            />
-          }
-        }
-        <span class="hidden sm:inline">{{ companyName() }}</span>
-      </a>
-      @if (!layoutService.isTopbar() && layoutService.isDesktop()) {
-        <button
-          class="layout-menu-button layout-topbar-action layout-topbar-action-right"
-          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
-          (click)="layoutService.onMenuToggle()"
-        >
-          <ui-icon name="bars"></ui-icon>
-        </button>
-      }
-    </div>
-
-    @if (layoutService.isTopbar() && layoutService.isDesktop()) {
-      <div
-        #navContainer
-        class="layout-topbar-nav-horizontal"
-        [class.layout-topbar-nav-hidden]="
-          !layoutService.layoutState().topbarMenuVisible
-        "
-      >
-        <app-menu />
-      </div>
-    }
-
+                        AppSearchbar,
+                    ],
+                    host: { style: 'display: contents' },
+                    template: `
     <div class="layout-topbar-actions">
       @if (hasSearchAdapter()) {
         <app-searchbar />
@@ -2457,12 +2428,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
-          <ui-icon [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
+          <ui-icon
+            [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"
+          ></ui-icon>
         </button>
         <div class="relative" #configContainer>
           <button
+            type="button"
             class="layout-topbar-action"
-            [class.layout-topbar-action-highlight]="activePanel() === 'config'"
+            [class.layout-topbar-action-highlight]="configPanelOpen()"
             [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
             fStyleClass="@next"
             enterFromClass="hidden"
@@ -2470,7 +2444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             leaveToClass="hidden"
             leaveActiveClass="animate-fadeout"
             [hideOnOutsideClick]="true"
-            (click)="togglePanel('config')"
+            (click)="toggleConfigPanel()"
           >
             <ui-icon name="palette"></ui-icon>
           </button>
@@ -2479,6 +2453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       </div>
 
       <button
+        type="button"
         class="layout-topbar-menu-button layout-topbar-action"
         [attr.aria-label]="'layout.topbar.more.options' | translate"
         fStyleClass="@next"
@@ -2509,112 +2484,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         </div>
       </div>
     </div>
-  </div>`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { configContainer: [{ type: i0.ViewChild, args: ['configContainer', { isSignal: true }] }], navContainer: [{ type: i0.ViewChild, args: ['navContainer', { isSignal: true }] }] } });
-
-class AppSidebar {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
-    <div class="layout-sidebar">
-      <app-menu />
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-sidebar',
-                    imports: [AppMenu],
-                    template: `
-    <div class="layout-sidebar">
-      <app-menu />
-    </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { configContainer: [{ type: i0.ViewChild, args: ['configContainer', { isSignal: true }] }] } });
 
-class AppLayout {
-    destroyRef = inject(DestroyRef);
-    document = inject(DOCUMENT);
+class AppTopbar {
     layoutService = inject(LayoutService);
-    renderer = inject(Renderer2);
-    router = inject(Router);
-    menuOutsideClickListener = null;
+    navContainer = viewChild('navContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navContainer" }] : /* istanbul ignore next */ []));
+    _scrollThumb = signal({ width: 0, offset: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollThumb" }] : /* istanbul ignore next */ []));
+    scrollThumb = this._scrollThumb.asReadonly();
     constructor() {
-        this.layoutService.overlayOpen$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (!this.menuOutsideClickListener) {
-                this.menuOutsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
-                    if (this.isOutsideClicked(event)) {
-                        this.hideMenu();
-                    }
-                });
-            }
-            if (this.layoutService.layoutState().staticMenuMobileActive) {
-                this.blockBodyScroll();
+        effect((onCleanup) => {
+            const nav = this.navContainer();
+            if (!nav) {
+                this._scrollThumb.set({ width: 0, offset: 0 });
+                return;
             }
+            const subscription = fromEvent(nav.nativeElement, 'scroll').subscribe(() => {
+                this.recalculateHoveredSubmenu(nav.nativeElement);
+                this.syncScrollThumb();
+            });
+            const resizeObserver = typeof ResizeObserver === 'undefined'
+                ? null
+                : new ResizeObserver(() => this.syncScrollThumb());
+            resizeObserver?.observe(nav.nativeElement);
+            onCleanup(() => {
+                subscription.unsubscribe();
+                resizeObserver?.disconnect();
+            });
         });
-        this.router.events
-            .pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.hideMenu());
     }
-    isOutsideClicked(event) {
-        const sidebarEl = this.document.querySelector('.layout-sidebar');
-        const topbarEl = this.document.querySelector('.layout-menu-button');
-        const topbarNavEl = this.document.querySelector('.layout-topbar-nav');
-        const eventTarget = event.target;
-        return !(sidebarEl?.isSameNode(eventTarget) ||
-            sidebarEl?.contains(eventTarget) ||
-            topbarEl?.isSameNode(eventTarget) ||
-            topbarEl?.contains(eventTarget) ||
-            topbarNavEl?.isSameNode(eventTarget) ||
-            topbarNavEl?.contains(eventTarget));
+    syncScrollThumb() {
+        const nav = this.navContainer()?.nativeElement;
+        if (!nav)
+            return;
+        const { clientWidth, scrollWidth, scrollLeft } = nav;
+        if (scrollWidth <= clientWidth + 1) {
+            this._scrollThumb.set({ width: 0, offset: 0 });
+            return;
+        }
+        const ratio = clientWidth / scrollWidth;
+        this._scrollThumb.set({
+            width: Math.round(clientWidth * ratio),
+            offset: Math.round(Math.abs(scrollLeft) * ratio),
+        });
     }
-    hideMenu() {
-        this.layoutService.updateLayoutState({
-            overlayMenuActive: false,
-            staticMenuMobileActive: false,
-            menuHoverActive: false,
+    /**
+     * Horizontal-nav submenus are `position: fixed`, so scrolling the nav strip leaves
+     * an open submenu behind — re-anchor it to the item it belongs to.
+     */
+    recalculateHoveredSubmenu(navEl) {
+        navEl.querySelectorAll('li:hover').forEach((li) => {
+            const link = li.querySelector(':scope > a');
+            if (!link)
+                return;
+            const rect = link.getBoundingClientRect();
+            li.style.setProperty('--submenu-left', `${rect.left - 12}px`);
+            li.style.setProperty('--submenu-top', `${rect.bottom + 12}px`);
         });
-        if (this.menuOutsideClickListener) {
-            this.menuOutsideClickListener();
-            this.menuOutsideClickListener = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "navContainer", first: true, predicate: ["navContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="layout-topbar">
+    <div
+      class="layout-topbar-logo-container"
+      [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
+    >
+      @if (layoutService.isMobile()) {
+        <button
+          type="button"
+          class="layout-menu-button layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+      }
+      <app-brand-logo />
+      @if (layoutService.isDesktop() && !layoutService.isTopbar()) {
+        <button
+          type="button"
+          class="layout-menu-button layout-topbar-action layout-topbar-action-right"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+      }
+    </div>
+
+    @if (layoutService.isTopbar() && layoutService.isDesktop()) {
+      <div class="layout-topbar-nav" (pointerenter)="syncScrollThumb()">
+        <div #navContainer class="layout-topbar-nav-horizontal">
+          <app-menu />
+        </div>
+        @if (scrollThumb().width > 0) {
+          <span
+            aria-hidden="true"
+            class="layout-topbar-nav-scroll-thumb"
+            [style.width.px]="scrollThumb().width"
+            [style.marginInlineStart.px]="scrollThumb().offset"
+          ></span>
+        }
+      </div>
+    }
+
+    <app-topbar-actions />
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppBrandLogo, selector: "app-brand-logo" }, { kind: "component", type: AppMenu, selector: "app-menu" }, { kind: "component", type: AppTopbarActions, selector: "app-topbar-actions" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-topbar',
+                    imports: [UiModule, TranslatePipe, AppBrandLogo, AppMenu, AppTopbarActions],
+                    template: `<div class="layout-topbar">
+    <div
+      class="layout-topbar-logo-container"
+      [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
+    >
+      @if (layoutService.isMobile()) {
+        <button
+          type="button"
+          class="layout-menu-button layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+      }
+      <app-brand-logo />
+      @if (layoutService.isDesktop() && !layoutService.isTopbar()) {
+        <button
+          type="button"
+          class="layout-menu-button layout-topbar-action layout-topbar-action-right"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+      }
+    </div>
+
+    @if (layoutService.isTopbar() && layoutService.isDesktop()) {
+      <div class="layout-topbar-nav" (pointerenter)="syncScrollThumb()">
+        <div #navContainer class="layout-topbar-nav-horizontal">
+          <app-menu />
+        </div>
+        @if (scrollThumb().width > 0) {
+          <span
+            aria-hidden="true"
+            class="layout-topbar-nav-scroll-thumb"
+            [style.width.px]="scrollThumb().width"
+            [style.marginInlineStart.px]="scrollThumb().offset"
+          ></span>
         }
-        this.unblockBodyScroll();
-    }
-    blockBodyScroll() {
-        this.document.body.classList.add('blocked-scroll');
-    }
-    unblockBodyScroll() {
-        this.document.body.classList.remove('blocked-scroll');
+      </div>
     }
-    isOverlay = computed(() => this.layoutService.layoutConfig().menuMode === 'overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+
+    <app-topbar-actions />
+  </div>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { navContainer: [{ type: i0.ViewChild, args: ['navContainer', { isSignal: true }] }] } });
+
+class AppClassicLayout extends LayoutShellBase {
     isStatic = computed(() => this.layoutService.layoutConfig().menuMode === 'static', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isStatic" }] : /* istanbul ignore next */ []));
-    isTopbarMode = computed(() => this.layoutService.layoutConfig().menuMode === 'topbar', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isTopbarMode" }] : /* istanbul ignore next */ []));
-    isStaticInactive = computed(() => this.layoutService.layoutState().staticMenuDesktopInactive && this.isStatic(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isStaticInactive" }] : /* istanbul ignore next */ []));
-    isOverlayActive = computed(() => this.layoutService.layoutState().overlayMenuActive, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOverlayActive" }] : /* istanbul ignore next */ []));
-    isMobileActive = computed(() => this.layoutService.layoutState().staticMenuMobileActive, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMobileActive" }] : /* istanbul ignore next */ []));
-    isTopbarNavHidden = computed(() => !this.layoutService.layoutState().topbarMenuVisible && this.isTopbarMode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isTopbarNavHidden" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    outsideClickSelectors() {
+        return ['.layout-sidebar', '.layout-menu-button', '.layout-topbar-nav'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppClassicLayout, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AppClassicLayout, isStandalone: true, selector: "app-classic-layout", usesInheritance: true, ngImport: i0, template: `
     <div
       class="layout-wrapper"
       [class.layout-overlay]="isOverlay()"
       [class.layout-static]="isStatic()"
       [class.layout-topbar-mode]="isTopbarMode()"
-      [class.layout-static-inactive]="isStaticInactive()"
+      [class.layout-static-inactive]="isDesktopCollapsed()"
       [class.layout-overlay-active]="isOverlayActive()"
       [class.layout-mobile-active]="isMobileActive()"
-      [class.layout-topbar-nav-hidden]="isTopbarNavHidden()"
     >
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
@@ -2626,12 +2674,12 @@ class AppLayout {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppClassicLayout, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-layout',
+                    selector: 'app-classic-layout',
                     imports: [AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
     <div
@@ -2639,10 +2687,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       [class.layout-overlay]="isOverlay()"
       [class.layout-static]="isStatic()"
       [class.layout-topbar-mode]="isTopbarMode()"
-      [class.layout-static-inactive]="isStaticInactive()"
+      [class.layout-static-inactive]="isDesktopCollapsed()"
       [class.layout-overlay-active]="isOverlayActive()"
       [class.layout-mobile-active]="isMobileActive()"
-      [class.layout-topbar-nav-hidden]="isTopbarNavHidden()"
     >
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
@@ -2654,10 +2701,357 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
+  `,
+                }]
+        }] });
+
+class AppModernSidebar {
+    layoutService = inject(LayoutService);
+    /**
+     * Only the in-flow column can be collapsed from here. As an overlay or mobile
+     * drawer the sidebar is opened by the topbar button and dismissed by the mask,
+     * so a second toggle inside it would be dead weight next to the brand.
+     */
+    showMenuButton = computed(() => !this.layoutService.isMobile() && !this.layoutService.isOverlay(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMenuButton" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppModernSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppModernSidebar, isStandalone: true, selector: "app-modern-sidebar", ngImport: i0, template: `
+    <aside class="layout-modern-sidebar">
+      <div class="layout-modern-brand">
+        <app-brand-logo />
+        @if (showMenuButton()) {
+          <button
+            type="button"
+            class="layout-modern-menu-button"
+            [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+            (click)="layoutService.onMenuToggle()"
+          >
+            <ui-icon name="bars"></ui-icon>
+          </button>
+        }
+      </div>
+
+      <app-menu />
+
+      <div class="layout-modern-sidebar-footer">
+        <app-footer />
+      </div>
+    </aside>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppBrandLogo, selector: "app-brand-logo" }, { kind: "component", type: AppMenu, selector: "app-menu" }, { kind: "component", type: AppFooter, selector: "app-footer" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppModernSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-modern-sidebar',
+                    imports: [UiModule, TranslatePipe, AppBrandLogo, AppMenu, AppFooter],
+                    template: `
+    <aside class="layout-modern-sidebar">
+      <div class="layout-modern-brand">
+        <app-brand-logo />
+        @if (showMenuButton()) {
+          <button
+            type="button"
+            class="layout-modern-menu-button"
+            [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+            (click)="layoutService.onMenuToggle()"
+          >
+            <ui-icon name="bars"></ui-icon>
+          </button>
+        }
+      </div>
+
+      <app-menu />
+
+      <div class="layout-modern-sidebar-footer">
+        <app-footer />
+      </div>
+    </aside>
+  `,
+                }]
+        }] });
+
+class AppModernTopbar {
+    destroyRef = inject(DestroyRef);
+    router = inject(Router);
+    layoutService = inject(LayoutService);
+    _pageTitle = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageTitle" }] : /* istanbul ignore next */ []));
+    pageTitle = this._pageTitle.asReadonly();
+    /** The sidebar is a drawer (not a column) in these modes, so the topbar owns the brand. */
+    showBrand = computed(() => this.layoutService.isMobile() ||
+        this.layoutService.isOverlay() ||
+        !!this.layoutService.layoutState().staticMenuDesktopInactive, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBrand" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.resolvePageTitle();
+        this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.resolvePageTitle());
+    }
+    resolvePageTitle() {
+        let route = this.router.routerState.snapshot.root;
+        while (route.firstChild) {
+            route = route.firstChild;
+        }
+        this._pageTitle.set(route.title ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppModernTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppModernTopbar, isStandalone: true, selector: "app-modern-topbar", ngImport: i0, template: `
+    <header class="layout-modern-topbar">
+      @if (showBrand()) {
+        <button
+          type="button"
+          class="layout-modern-menu-button layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+
+        <app-brand-logo />
+      }
+
+      <span class="layout-modern-page-title">{{ pageTitle() }}</span>
+
+      <app-topbar-actions />
+    </header>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppBrandLogo, selector: "app-brand-logo" }, { kind: "component", type: AppTopbarActions, selector: "app-topbar-actions" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppModernTopbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-modern-topbar',
+                    imports: [UiModule, TranslatePipe, AppBrandLogo, AppTopbarActions],
+                    template: `
+    <header class="layout-modern-topbar">
+      @if (showBrand()) {
+        <button
+          type="button"
+          class="layout-modern-menu-button layout-topbar-action"
+          [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
+          (click)="layoutService.onMenuToggle()"
+        >
+          <ui-icon name="bars"></ui-icon>
+        </button>
+
+        <app-brand-logo />
+      }
+
+      <span class="layout-modern-page-title">{{ pageTitle() }}</span>
+
+      <app-topbar-actions />
+    </header>
   `,
                 }]
         }], ctorParameters: () => [] });
 
+class AppModernLayout extends LayoutShellBase {
+    content = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    outsideClickSelectors() {
+        return ['.layout-modern-sidebar', '.layout-modern-menu-button'];
+    }
+    /**
+     * The page scrolls inside the content card rather than the window, so the router's
+     * scroll restoration never reaches it — reset it here instead.
+     */
+    onNavigated() {
+        this.content()?.nativeElement.scrollTo({ top: 0 });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppModernLayout, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AppModernLayout, isStandalone: true, selector: "app-modern-layout", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="layout-modern"
+      [class.layout-modern-overlay]="isOverlay()"
+      [class.layout-modern-static-inactive]="isDesktopCollapsed()"
+      [class.layout-modern-overlay-active]="isOverlayActive()"
+      [class.layout-modern-mobile-active]="isMobileActive()"
+    >
+      <app-modern-sidebar />
+      <div class="layout-modern-main">
+        <app-modern-topbar />
+        <div class="layout-modern-content" #content>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+      <div class="layout-modern-mask animate-fadein"></div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AppModernTopbar, selector: "app-modern-topbar" }, { kind: "component", type: AppModernSidebar, selector: "app-modern-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppModernLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-modern-layout',
+                    imports: [AppModernTopbar, AppModernSidebar, RouterModule],
+                    template: `
+    <div
+      class="layout-modern"
+      [class.layout-modern-overlay]="isOverlay()"
+      [class.layout-modern-static-inactive]="isDesktopCollapsed()"
+      [class.layout-modern-overlay-active]="isOverlayActive()"
+      [class.layout-modern-mobile-active]="isMobileActive()"
+    >
+      <app-modern-sidebar />
+      <div class="layout-modern-main">
+        <app-modern-topbar />
+        <div class="layout-modern-content" #content>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+      <div class="layout-modern-mask animate-fadein"></div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+/**
+ * Layout shell entry point.
+ * Renders the skin selected by `LayoutConfig.layoutTheme` — every skin shares
+ * the same services, menu and topbar components, only the markup and styling differ.
+ */
+class AppLayout {
+    layoutService = inject(LayoutService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    @if (layoutService.isModernLayout()) {
+      <app-modern-layout />
+    } @else {
+      <app-classic-layout />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AppClassicLayout, selector: "app-classic-layout" }, { kind: "component", type: AppModernLayout, selector: "app-modern-layout" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-layout',
+                    imports: [AppClassicLayout, AppModernLayout],
+                    template: `
+    @if (layoutService.isModernLayout()) {
+      <app-modern-layout />
+    } @else {
+      <app-classic-layout />
+    }
+  `,
+                }]
+        }] });
+
+class AppFloatingConfigurator {
+    layoutService = inject(LayoutService);
+    languageSelectorPanel = inject(LAYOUT_LANGUAGE_SELECTOR_PANEL, {
+        optional: true,
+    });
+    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
+    toggleDarkMode() {
+        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
+        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+    <div
+      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
+    >
+      <button
+        fButton
+        type="button"
+        (click)="toggleDarkMode()"
+        [rounded]="true"
+        severity="secondary"
+      >
+        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
+      </button>
+      @if (languageSelectorPanel) {
+        <div class="relative">
+          <button
+            fButton
+            fStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+            type="button"
+            rounded
+          >
+            <ui-icon pButtonIcon name="globe"></ui-icon>
+          </button>
+          <ng-container *ngComponentOutlet="languageSelectorPanel" />
+        </div>
+      }
+      <div class="relative">
+        <button
+          fButton
+          fStyleClass="@next"
+          enterFromClass="hidden"
+          enterActiveClass="animate-scalein"
+          leaveToClass="hidden"
+          leaveActiveClass="animate-fadeout"
+          [hideOnOutsideClick]="true"
+          type="button"
+          rounded
+        >
+          <ui-icon pButtonIcon name="palette"></ui-icon>
+        </button>
+        <app-configurator />
+      </div>
+    </div>
+  `, isInline: true, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "directive", type: i1.StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-floating-configurator', imports: [NgComponentOutlet, UiModule, AppConfigurator], template: `
+    <div
+      class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
+    >
+      <button
+        fButton
+        type="button"
+        (click)="toggleDarkMode()"
+        [rounded]="true"
+        severity="secondary"
+      >
+        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
+      </button>
+      @if (languageSelectorPanel) {
+        <div class="relative">
+          <button
+            fButton
+            fStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+            type="button"
+            rounded
+          >
+            <ui-icon pButtonIcon name="globe"></ui-icon>
+          </button>
+          <ng-container *ngComponentOutlet="languageSelectorPanel" />
+        </div>
+      }
+      <div class="relative">
+        <button
+          fButton
+          fStyleClass="@next"
+          enterFromClass="hidden"
+          enterActiveClass="animate-scalein"
+          leaveToClass="hidden"
+          leaveActiveClass="animate-fadeout"
+          [hideOnOutsideClick]="true"
+          type="button"
+          rounded
+        >
+          <ui-icon pButtonIcon name="palette"></ui-icon>
+        </button>
+        <app-configurator />
+      </div>
+    </div>
+  `, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"] }]
+        }] });
+
+// Shell entry point (renders the configured layout skin)
+
 function buildPreset(presetName, primary) {
     return { preset: presetName, primary };
 }
@@ -2673,7 +3067,7 @@ const GreenTheme = {
 };
 
 const LAYOUT_MESSAGES = {
-    // components/top-bar/app.profile.ts
+    // components/shared/top-bar/app.profile.ts
     'layout.profile.title': 'Profile',
     'layout.profile.profile.picture.alt': 'Profile picture',
     'layout.profile.copy.sign.up.link': 'Copy SignUp Link',
@@ -2682,11 +3076,11 @@ const LAYOUT_MESSAGES = {
     'layout.profile.link.copied': 'Link Copied',
     'layout.profile.sign.up.link.copied': 'Sign Up Link copied.',
     'layout.profile.failed.copy.sign.up.link': 'Failed to copy signup link.',
-    // components/top-bar/app.launcher.ts
+    // components/shared/top-bar/app.launcher.ts
     'layout.launcher.apps': 'Apps',
     'layout.launcher.applications': 'Applications',
     'layout.launcher.no.apps': 'No apps available',
-    // components/top-bar/app.company-branch-selector.ts
+    // components/shared/top-bar/app.company-branch-selector.ts
     'layout.company.branch.selector.title': 'Switch Company & Branch',
     'layout.company.branch.selector.select.company': 'Select Company',
     'layout.company.branch.selector.branch': 'Branch',
@@ -2695,15 +3089,17 @@ const LAYOUT_MESSAGES = {
     'layout.company.branch.selector.no.company': 'No Company',
     'layout.company.branch.selector.branch.required': 'Branch Required',
     'layout.company.branch.selector.please.select.branch': 'Please select a branch',
-    // components/top-bar/app.searchbar.ts
+    // components/shared/top-bar/app.searchbar.ts
     'layout.topbar.search': 'Search',
     'layout.topbar.search.placeholder': 'Search for content...',
-    // components/app.topbar.ts
+    // components/layouts/classic/app.topbar.ts + components/layouts/modern/app.modern-topbar.ts
+    // + components/layouts/modern/app.modern-sidebar.ts
     'layout.topbar.toggle.menu': 'Toggle menu',
+    // components/shared/top-bar/app.topbar-actions.ts
     'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
     'layout.topbar.open.theme.settings': 'Open theme settings',
     'layout.topbar.more.options': 'More options',
-    // components/app.configurator.ts
+    // components/shared/app.configurator.ts
     'layout.configurator.primary': 'Primary',
     'layout.configurator.surface': 'Surface',
     'layout.configurator.presets': 'Presets',
@@ -2711,7 +3107,10 @@ const LAYOUT_MESSAGES = {
     'layout.configurator.menu.mode.static': 'Static',
     'layout.configurator.menu.mode.overlay': 'Overlay',
     'layout.configurator.menu.mode.topbar': 'Topbar',
-    // components/app.footer.ts
+    'layout.configurator.layout.theme': 'Layout',
+    'layout.configurator.layout.theme.classic': 'Classic',
+    'layout.configurator.layout.theme.modern': 'Modern',
+    // components/shared/app.footer.ts
     'layout.footer.by': 'by',
     // app-menu.config.ts (main app menu configuration)
     'menu.dashboard': 'Dashboard',
@@ -2761,5 +3160,5 @@ const LAYOUT_MESSAGES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSearchbar, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, NavyBlueTheme, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
+export { AppBrandLogo, AppClassicLayout, AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppModernLayout, AppModernSidebar, AppModernTopbar, AppProfile, AppSearchbar, AppSidebar, AppTopbar, AppTopbarActions, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, LayoutShellBase, NavyBlueTheme, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
 //# sourceMappingURL=flusys-ng-layout.mjs.map