@flusys/ng-layout 5.5.0 → 6.0.0-beta.2

package/fesm2022/flusys-ng-layout.mjs

@@ -1,35 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, InjectionToken, input, DestroyRef, viewChild, ElementRef, Renderer2 } from '@angular/core';
-import * as i2$3 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, InlineSvgComponent, TranslatePipe, TranslateService, IconComponent, AngularModule, PrimeModule } from '@flusys/ng-shared';
-import { isPlatformBrowser, NgComponentOutlet, DOCUMENT as DOCUMENT$1, NgClass } from '@angular/common';
+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 { 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 i1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { Router, NavigationEnd, isActive, RouterModule } from '@angular/router';
-import { definePreset, updatePreset, updateSurfacePalette, $t } from '@primeuix/themes';
-import Aura from '@primeuix/themes/aura';
-import Lara from '@primeuix/themes/lara';
-import Nora from '@primeuix/themes/nora';
-import * as i2 from 'primeng/selectbutton';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i3 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i2$1 from 'primeng/styleclass';
-import { StyleClassModule } from 'primeng/styleclass';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@flusys/ng-ui';
+import { PRESET_NAMES, applyTheme, SURFACE_PALETTES, PRIMARY_PALETTES, applyPrimaryPalette, applySurfacePalette, UiModule, MessageService } from '@flusys/ng-ui';
+export { applyTheme, buildBootstrapPreset } from '@flusys/ng-ui';
 import { filter } from 'rxjs/operators';
-import * as i2$2 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import { MessageService } from 'primeng/api';
-import * as i4 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import * as i3$1 from 'primeng/iconfield';
-import * as i4$1 from 'primeng/inputicon';
-import * as i5 from 'primeng/inputtext';
-import Material from '@primeuix/themes/material';
 
 /** Filter launcher apps based on user permission codes */
 function filterAppsByPermissions(apps, permissionCodes) {
@@ -148,14 +132,15 @@ class LayoutPersistenceService {
         const { _version, ...cleanConfig } = config;
         return cleanConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LayoutPersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutPersistenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+const DESKTOP_BREAKPOINT = 991;
 class LayoutService {
     document = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
@@ -199,6 +184,9 @@ class LayoutService {
     _rawApps = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_rawApps" }] : /* istanbul ignore next */ []));
     permissionValidator = inject(PermissionValidatorService);
+    destroyRef = inject(DestroyRef);
+    _windowWidth = signal(this.isBrowser ? window.innerWidth : DESKTOP_BREAKPOINT + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_windowWidth" }] : /* istanbul ignore next */ []));
     userProfile = this._userProfile.asReadonly();
     companyProfile = this._companyProfile.asReadonly();
     appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
@@ -215,6 +203,10 @@ class LayoutService {
     isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
         this._layoutState().staticMenuMobileActive, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : /* istanbul ignore next */ []));
+    isDesktop = computed(() => this._windowWidth() > DESKTOP_BREAKPOINT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
+    isMobile = computed(() => !this.isDesktop(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     isDarkTheme = computed(() => this._layoutConfig().darkTheme, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
     isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', /* @ts-ignore */
@@ -249,6 +241,14 @@ class LayoutService {
     overlayOpen$ = this.overlayOpen.asObservable();
     initialized = false;
     constructor() {
+        if (this.isBrowser) {
+            this.toggleDarkMode();
+            fromEvent(window, 'resize')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this._windowWidth.set(window.innerWidth);
+            });
+        }
         effect(() => {
             const config = this._layoutConfig();
             if (this.initialized) {
@@ -319,12 +319,6 @@ class LayoutService {
             }));
         }
     }
-    isDesktop() {
-        return this.isBrowser ? window.innerWidth > 991 : true;
-    }
-    isMobile() {
-        return !this.isDesktop();
-    }
     onMenuStateChange(event) {
         this.menuSource.next(event);
     }
@@ -355,10 +349,10 @@ class LayoutService {
     clearApps() {
         this._rawApps.set([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -370,8 +364,8 @@ class AppFooter {
     isLogoSvg = this.layoutService.isAppLogoSvg;
     authorName = this.layoutService.authorName;
     authorUrl = this.layoutService.authorUrl;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
     @if (displayLogo) {
       @if (isLogoSvg) {
         <inline-svg [src]="displayLogo" class="logo-image" />
@@ -391,7 +385,7 @@ class AppFooter {
     </span>
   </div>`, isInline: true, dependencies: [{ kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-footer',
@@ -418,313 +412,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }] });
 
-const _presets = { Aura, Lara, Nora };
-const _noirPrimary = {
-    50: '{surface.50}', 100: '{surface.100}', 200: '{surface.200}',
-    300: '{surface.300}', 400: '{surface.400}', 500: '{surface.500}',
-    600: '{surface.600}', 700: '{surface.700}', 800: '{surface.800}',
-    900: '{surface.900}', 950: '{surface.950}',
-};
-const _noraScheme = {
-    light: {
-        primary: { color: '{primary.600}', contrastColor: '#ffffff', hoverColor: '{primary.700}', activeColor: '{primary.800}' },
-        highlight: { background: '{primary.600}', focusBackground: '{primary.700}', color: '#ffffff', focusColor: '#ffffff' },
-    },
-    dark: {
-        primary: { color: '{primary.500}', contrastColor: '{surface.900}', hoverColor: '{primary.400}', activeColor: '{primary.300}' },
-        highlight: { background: '{primary.500}', focusBackground: '{primary.400}', color: '{surface.900}', focusColor: '{surface.900}' },
-    },
-};
-const _defaultScheme = {
-    light: {
-        primary: { color: '{primary.500}', contrastColor: '#ffffff', hoverColor: '{primary.600}', activeColor: '{primary.700}' },
-        highlight: { background: '{primary.50}', focusBackground: '{primary.100}', color: '{primary.700}', focusColor: '{primary.800}' },
-    },
-    dark: {
-        primary: { color: '{primary.400}', contrastColor: '{surface.900}', hoverColor: '{primary.300}', activeColor: '{primary.200}' },
-        highlight: {
-            background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-            focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-            color: 'rgba(255,255,255,.87)',
-            focusColor: 'rgba(255,255,255,.87)',
-        },
-    },
-};
-function buildSemanticExt(palette, presetName) {
-    if (palette === null) {
-        return {
-            semantic: {
-                primary: _noirPrimary,
-                colorScheme: {
-                    light: {
-                        primary: { color: '{primary.950}', contrastColor: '#ffffff', hoverColor: '{primary.800}', activeColor: '{primary.700}' },
-                        highlight: { background: '{primary.950}', focusBackground: '{primary.700}', color: '#ffffff', focusColor: '#ffffff' },
-                    },
-                    dark: {
-                        primary: { color: '{primary.50}', contrastColor: '{primary.950}', hoverColor: '{primary.200}', activeColor: '{primary.300}' },
-                        highlight: { background: '{primary.50}', focusBackground: '{primary.300}', color: '{primary.950}', focusColor: '{primary.950}' },
-                    },
-                },
-            },
-        };
-    }
-    return { semantic: { primary: palette, colorScheme: presetName === 'Nora' ? _noraScheme : _defaultScheme } };
-}
-function buildPreset(presetName, primary) {
-    const base = _presets[presetName in _presets ? presetName : 'Aura'];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const palette = primary === 'noir' ? null : base.primitive?.[primary];
-    if (primary !== 'noir' && !palette)
-        return base;
-    return definePreset(base, buildSemanticExt(palette, presetName));
-}
-function buildBootstrapPreset(envConfig) {
-    const preset = envConfig?.preset ?? 'Aura';
-    const primary = envConfig?.primary ?? 'violet';
-    if (envConfig?.isMemorable !== false) {
-        try {
-            const stored = localStorage.getItem('flusys.layout.config');
-            if (stored) {
-                const parsed = JSON.parse(stored);
-                return buildPreset(parsed.preset ?? preset, parsed.primary ?? primary);
-            }
-        }
-        catch { /* SSR or storage disabled */ }
-    }
-    return buildPreset(preset, primary);
-}
-
-const presets = {
-    Aura,
-    Lara,
-    Nora,
-};
 class AppConfigurator {
     router = inject(Router);
     translateAdapter = inject(TranslateService, { optional: true });
     platformId = inject(PLATFORM_ID);
     layoutService = inject(LayoutService);
-    presets = Object.keys(presets);
+    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',
-            },
+            { 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',
-            });
+            options.push({ label: this.translate('layout.configurator.menu.mode.topbar'), value: 'topbar' });
         }
         return options;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : /* istanbul ignore next */ []));
     constructor() {
         if (isPlatformBrowser(this.platformId)) {
-            const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
-            this.onPresetChange(preset);
+            effect(() => {
+                const config = this.layoutService.layoutConfig();
+                applyTheme({
+                    preset: (config.preset ?? 'Aura'),
+                    primary: config.primary ?? 'violet',
+                    surface: config.surface ?? null,
+                    darkTheme: config.darkTheme ?? false,
+                });
+            });
         }
     }
-    surfaces = [
-        {
-            name: 'slate',
-            palette: {
-                0: '#ffffff',
-                50: '#f8fafc',
-                100: '#f1f5f9',
-                200: '#e2e8f0',
-                300: '#cbd5e1',
-                400: '#94a3b8',
-                500: '#64748b',
-                600: '#475569',
-                700: '#334155',
-                800: '#1e293b',
-                900: '#0f172a',
-                950: '#020617',
-            },
-        },
-        {
-            name: 'gray',
-            palette: {
-                0: '#ffffff',
-                50: '#f9fafb',
-                100: '#f3f4f6',
-                200: '#e5e7eb',
-                300: '#d1d5db',
-                400: '#9ca3af',
-                500: '#6b7280',
-                600: '#4b5563',
-                700: '#374151',
-                800: '#1f2937',
-                900: '#111827',
-                950: '#030712',
-            },
-        },
-        {
-            name: 'zinc',
-            palette: {
-                0: '#ffffff',
-                50: '#fafafa',
-                100: '#f4f4f5',
-                200: '#e4e4e7',
-                300: '#d4d4d8',
-                400: '#a1a1aa',
-                500: '#71717a',
-                600: '#52525b',
-                700: '#3f3f46',
-                800: '#27272a',
-                900: '#18181b',
-                950: '#09090b',
-            },
-        },
-        {
-            name: 'neutral',
-            palette: {
-                0: '#ffffff',
-                50: '#fafafa',
-                100: '#f5f5f5',
-                200: '#e5e5e5',
-                300: '#d4d4d4',
-                400: '#a3a3a3',
-                500: '#737373',
-                600: '#525252',
-                700: '#404040',
-                800: '#262626',
-                900: '#171717',
-                950: '#0a0a0a',
-            },
-        },
-        {
-            name: 'stone',
-            palette: {
-                0: '#ffffff',
-                50: '#fafaf9',
-                100: '#f5f5f4',
-                200: '#e7e5e4',
-                300: '#d6d3d1',
-                400: '#a8a29e',
-                500: '#78716c',
-                600: '#57534e',
-                700: '#44403c',
-                800: '#292524',
-                900: '#1c1917',
-                950: '#0c0a09',
-            },
-        },
-        {
-            name: 'soho',
-            palette: {
-                0: '#ffffff',
-                50: '#ececec',
-                100: '#dedfdf',
-                200: '#c4c4c6',
-                300: '#adaeb0',
-                400: '#97979b',
-                500: '#7f8084',
-                600: '#6a6b70',
-                700: '#55565b',
-                800: '#3f4046',
-                900: '#2c2c34',
-                950: '#16161d',
-            },
-        },
-        {
-            name: 'viva',
-            palette: {
-                0: '#ffffff',
-                50: '#f3f3f3',
-                100: '#e7e7e8',
-                200: '#cfd0d0',
-                300: '#b7b8b9',
-                400: '#9fa1a1',
-                500: '#87898a',
-                600: '#6e7173',
-                700: '#565a5b',
-                800: '#3e4244',
-                900: '#262b2c',
-                950: '#0e1315',
-            },
-        },
-        {
-            name: 'ocean',
-            palette: {
-                0: '#ffffff',
-                50: '#fbfcfc',
-                100: '#F7F9F8',
-                200: '#EFF3F2',
-                300: '#DADEDD',
-                400: '#B1B7B6',
-                500: '#828787',
-                600: '#5F7274',
-                700: '#415B61',
-                800: '#29444E',
-                900: '#183240',
-                950: '#0c1920',
-            },
-        },
-    ];
+    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 selectedSurface = this.selectedSurfaceColor();
-        if (selectedSurface) {
-            return selectedSurface === surfaceName;
-        }
-        // Default: zinc for dark theme, slate for light theme
-        return this.layoutService.layoutConfig().darkTheme
-            ? surfaceName === 'zinc'
-            : surfaceName === 'slate';
+        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 */ []));
     primaryColors = computed(() => {
-        const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
-        const colors = [
-            'emerald',
-            'green',
-            'lime',
-            'orange',
-            'amber',
-            'yellow',
-            'teal',
-            'cyan',
-            'sky',
-            'blue',
-            'indigo',
-            'violet',
-            'purple',
-            'fuchsia',
-            'pink',
-            'rose',
-        ];
         const palettes = [{ name: 'noir', palette: {} }];
-        colors.forEach((color) => {
-            palettes.push({
-                name: color,
-                palette: presetPalette?.[color],
-            });
-        });
+        for (const [name, pal] of Object.entries(PRIMARY_PALETTES)) {
+            palettes.push({ name, palette: pal });
+        }
         return palettes;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []));
-    getPresetExt() {
-        const color = this.primaryColors().find(c => c.name === this.selectedPrimaryColor()) ?? {};
-        const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
-        const palette = color.name === 'noir' ? null : (color.palette ?? {});
-        return buildSemanticExt(palette, preset);
-    }
     updateColors(event, type, color) {
         if (type === 'primary') {
             this.layoutService.updateLayoutConfig({ primary: color.name });
@@ -732,31 +478,31 @@ class AppConfigurator {
         else if (type === 'surface') {
             this.layoutService.updateLayoutConfig({ surface: color.name });
         }
-        this.applyTheme(type, color);
+        this._applyColorChange(type, color);
         event.stopPropagation();
     }
-    applyTheme(type, color) {
+    _applyColorChange(type, color) {
+        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
         if (type === 'primary') {
-            updatePreset(this.getPresetExt());
+            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);
         }
         else if (type === 'surface') {
-            updateSurfacePalette(color.palette);
+            const surfacePal = SURFACE_PALETTES[color.name ?? 'slate'];
+            if (surfacePal)
+                applySurfacePalette(surfacePal);
         }
     }
     onPresetChange(event) {
         this.layoutService.updateLayoutConfig({ preset: event });
-        const preset = presets[event];
-        // Use selected surface or default (slate for light, zinc for dark)
-        const selectedSurface = this.selectedSurfaceColor();
-        const defaultSurface = this.layoutService.layoutConfig().darkTheme
-            ? 'zinc'
-            : 'slate';
-        const surfacePalette = this.surfaces.find((s) => s.name === (selectedSurface || defaultSurface))?.palette;
-        $t()
-            .preset(preset)
-            .preset(this.getPresetExt())
-            .surfacePalette(surfacePalette)
-            .use({ useDefaultOptions: true });
+        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
+        const primary = this.layoutService.layoutConfig().primary ?? 'violet';
+        const surface = this.layoutService.layoutConfig().surface ?? null;
+        applyTheme({ preset: event, primary, surface, darkTheme: isDark });
     }
     onMenuModeChange(event) {
         this.layoutService.updateLayoutConfig({ menuMode: event });
@@ -764,8 +510,8 @@ class AppConfigurator {
     translate(key) {
         return this.translateAdapter?.translate(key) ?? key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
+    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">{{
@@ -777,13 +523,11 @@ class AppConfigurator {
               type="button"
               [title]="primaryColor.name"
               (click)="updateColors($event, 'primary', primaryColor)"
-              [class.outline-primary]="
-                primaryColor.name === selectedPrimaryColor()
-              "
+              [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(--text-color)'
+                  ? 'var(--f-text-color)'
                   : primaryColor?.palette?.['500']
               "
             ></button>
@@ -804,7 +548,7 @@ class AppConfigurator {
               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(--text-color)'
+                  ? 'var(--f-text-color)'
                   : surface?.palette?.['500']
               "
             ></button>
@@ -815,7 +559,7 @@ class AppConfigurator {
         <span class="text-sm text-muted-color font-semibold">{{
           'layout.configurator.presets' | translate
         }}</span>
-        <p-selectbutton
+        <f-selectbutton
           [options]="presets"
           [ngModel]="selectedPreset()"
           (ngModelChange)="onPresetChange($event)"
@@ -828,7 +572,7 @@ class AppConfigurator {
           <span class="text-sm text-muted-color font-semibold">{{
             'layout.configurator.menu.mode' | translate
           }}</span>
-          <p-selectbutton
+          <f-selectbutton
             [ngModel]="menuMode()"
             (ngModelChange)="onMenuModeChange($event)"
             [options]="menuModeOptions()"
@@ -838,13 +582,13 @@ class AppConfigurator {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.SelectButtonComponent, selector: "f-selectbutton", inputs: ["options", "optionLabel", "optionValue", "multiple", "disabled", "allowEmpty", "size"], 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    imports: [FormsModule, SelectButtonModule, TranslatePipe],
+                    imports: [UiModule, FormsModule, TranslatePipe],
                     template: `
     <div class="flex flex-col gap-4">
       <div>
@@ -857,13 +601,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               type="button"
               [title]="primaryColor.name"
               (click)="updateColors($event, 'primary', primaryColor)"
-              [class.outline-primary]="
-                primaryColor.name === selectedPrimaryColor()
-              "
+              [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(--text-color)'
+                  ? 'var(--f-text-color)'
                   : primaryColor?.palette?.['500']
               "
             ></button>
@@ -884,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               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(--text-color)'
+                  ? 'var(--f-text-color)'
                   : surface?.palette?.['500']
               "
             ></button>
@@ -895,7 +637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <span class="text-sm text-muted-color font-semibold">{{
           'layout.configurator.presets' | translate
         }}</span>
-        <p-selectbutton
+        <f-selectbutton
           [options]="presets"
           [ngModel]="selectedPreset()"
           (ngModelChange)="onPresetChange($event)"
@@ -908,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <span class="text-sm text-muted-color font-semibold">{{
             'layout.configurator.menu.mode' | translate
           }}</span>
-          <p-selectbutton
+          <f-selectbutton
             [ngModel]="menuMode()"
             (ngModelChange)="onMenuModeChange($event)"
             [options]="menuModeOptions()"
@@ -920,7 +662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     </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-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]',
+                        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;',
                     },
                 }]
@@ -946,25 +688,25 @@ class AppFloatingConfigurator {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
         this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+    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
-        pButton
+        fButton
         type="button"
         (click)="toggleDarkMode()"
         [rounded]="true"
         severity="secondary"
       >
-        <span pButtonIcon [class]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'"></span>
+        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
       </button>
       @if (languageSelectorPanel) {
         <div class="relative">
           <button
-            pButton
-            pStyleClass="@next"
+            fButton
+            fStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
             leaveToClass="hidden"
@@ -973,15 +715,15 @@ class AppFloatingConfigurator {
             type="button"
             rounded
           >
-            <span pButtonIcon class="pi pi-globe"></span>
+            <ui-icon pButtonIcon name="globe"></ui-icon>
           </button>
           <ng-container *ngComponentOutlet="languageSelectorPanel" />
         </div>
       }
       <div class="relative">
         <button
-          pButton
-          pStyleClass="@next"
+          fButton
+          fStyleClass="@next"
           enterFromClass="hidden"
           enterActiveClass="animate-scalein"
           leaveToClass="hidden"
@@ -990,33 +732,33 @@ class AppFloatingConfigurator {
           type="button"
           rounded
         >
-          <span pButtonIcon class="pi pi-palette"></span>
+          <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: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i3.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
+  `, 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", "rounded", "raised", "fluid", "disabled", "loading", "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"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
             type: Component,
-            args: [{ selector: 'app-floating-configurator', imports: [NgComponentOutlet, ButtonModule, StyleClassModule, AppConfigurator], template: `
+            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
-        pButton
+        fButton
         type="button"
         (click)="toggleDarkMode()"
         [rounded]="true"
         severity="secondary"
       >
-        <span pButtonIcon [class]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'"></span>
+        <ui-icon pButtonIcon [name]="isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
       </button>
       @if (languageSelectorPanel) {
         <div class="relative">
           <button
-            pButton
-            pStyleClass="@next"
+            fButton
+            fStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
             leaveToClass="hidden"
@@ -1025,15 +767,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type="button"
             rounded
           >
-            <span pButtonIcon class="pi pi-globe"></span>
+            <ui-icon pButtonIcon name="globe"></ui-icon>
           </button>
           <ng-container *ngComponentOutlet="languageSelectorPanel" />
         </div>
       }
       <div class="relative">
         <button
-          pButton
-          pStyleClass="@next"
+          fButton
+          fStyleClass="@next"
           enterFromClass="hidden"
           enterActiveClass="animate-scalein"
           leaveToClass="hidden"
@@ -1042,7 +784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           type="button"
           rounded
         >
-          <span pButtonIcon class="pi pi-palette"></span>
+          <ui-icon pButtonIcon name="palette"></ui-icon>
         </button>
         <app-configurator />
       </div>
@@ -1180,8 +922,8 @@ class AppMenuitem {
         }
         this.layoutService.onMenuStateChange({ key: this.key() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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: `
+    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
@@ -1189,7 +931,6 @@ class AppMenuitem {
           (mouseenter)="onMouseEnter()"
           #parentLink
           tabindex="0"
-          pRipple
         >
           @if (item().icon) {
             <lib-icon
@@ -1203,9 +944,9 @@ class AppMenuitem {
           }}</span>
           @if (item().children) {
             @if (layoutService.isTopbar()) {
-              <i class="pi pi-fw pi-chevron-right layout-submenu-toggler"></i>
+              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
             } @else {
-              <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
             }
           }
         </a>
@@ -1217,7 +958,6 @@ class AppMenuitem {
           routerLinkActive="active-route"
           [routerLinkActiveOptions]="routerLinkActiveOptions()"
           tabindex="0"
-          pRipple
         >
           @if (item().icon) {
             <lib-icon
@@ -1252,11 +992,11 @@ class AppMenuitem {
         </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: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, 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"] }, { 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.5", ngImport: i0, type: AppMenuitem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{ selector: '[app-menuitem]', imports: [IconComponent, RouterModule, RippleModule, TranslatePipe], template: `
+            args: [{ selector: '[app-menuitem]', imports: [UiModule, IconComponent, RouterModule, TranslatePipe], template: `
     <ng-container>
       @if (item().children?.length) {
         <a
@@ -1264,7 +1004,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           (mouseenter)="onMouseEnter()"
           #parentLink
           tabindex="0"
-          pRipple
         >
           @if (item().icon) {
             <lib-icon
@@ -1278,9 +1017,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           }}</span>
           @if (item().children) {
             @if (layoutService.isTopbar()) {
-              <i class="pi pi-fw pi-chevron-right layout-submenu-toggler"></i>
+              <ui-icon name="chevron-right" class="layout-submenu-toggler"></ui-icon>
             } @else {
-              <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+              <ui-icon name="angle-down" class="layout-submenu-toggler"></ui-icon>
             }
           }
         </a>
@@ -1292,7 +1031,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           routerLinkActive="active-route"
           [routerLinkActiveOptions]="routerLinkActiveOptions()"
           tabindex="0"
-          pRipple
         >
           @if (item().icon) {
             <lib-icon
@@ -1346,8 +1084,8 @@ class AppMenu {
      * - Permission state changes (user permissions updated)
      */
     menuItems = this.layoutService.menu;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-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();
@@ -1359,7 +1097,7 @@ class AppMenu {
     </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.5", ngImport: i0, type: AppMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-menu',
@@ -1530,13 +1268,13 @@ class AppCompanyBranchSelector {
     translate(key) {
         return this.translateAdapter?.translate(key) ?? key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1544,14 +1282,14 @@ class AppCompanyBranchSelector {
       [hideOnOutsideClick]="true"
       (click)="onPanelToggle()"
     >
-      <i class="pi pi-building"></i>
+      <ui-icon name="building"></ui-icon>
       <span>{{ currentCompanyName() }}</span>
       @if (currentBranchName()) {
-        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+        <span class="text-xs opacity-70 ml-1">| {{ currentBranchName() }}</span>
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-4">
@@ -1564,7 +1302,7 @@ class AppCompanyBranchSelector {
           <label class="text-sm text-muted-color font-semibold">{{
             'shared.company' | translate
           }}</label>
-          <p-select
+          <f-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
@@ -1584,7 +1322,7 @@ class AppCompanyBranchSelector {
             <label class="text-sm text-muted-color font-semibold">{{
               'layout.company.branch.selector.branch' | translate
             }}</label>
-            <p-select
+            <f-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
@@ -1602,41 +1340,36 @@ class AppCompanyBranchSelector {
         <!-- Actions -->
         <div class="flex gap-2 pt-2">
           <button
-            pButton
+            fButton
             class="flex-1"
             [disabled]="!canSwitch() || isSwitching()"
             (click)="onSwitch()"
           >
             @if (isSwitching()) {
-              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             } @else {
-              <span pButtonIcon class="pi pi-sync"></span>
+              <ui-icon pButtonIcon name="sync"></ui-icon>
             }
             <span pButtonLabel>{{ 'layout.company.branch.selector.switch.button' | translate }}</span>
           </button>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i3.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i3.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { 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"] }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    imports: [
-                        AngularModule,
-                        StyleClassModule,
-                        ButtonModule,
-                        SelectModule,
-                        TranslatePipe,
-                    ],
+                    imports: [UiModule, AngularModule,
+                        TranslatePipe,],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1644,14 +1377,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [hideOnOutsideClick]="true"
       (click)="onPanelToggle()"
     >
-      <i class="pi pi-building"></i>
+      <ui-icon name="building"></ui-icon>
       <span>{{ currentCompanyName() }}</span>
       @if (currentBranchName()) {
-        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+        <span class="text-xs opacity-70 ml-1">| {{ currentBranchName() }}</span>
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-4">
@@ -1664,7 +1397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <label class="text-sm text-muted-color font-semibold">{{
             'shared.company' | translate
           }}</label>
-          <p-select
+          <f-select
             [options]="companies()"
             [ngModel]="selectedCompanyId()"
             (ngModelChange)="onCompanyChange($event)"
@@ -1684,7 +1417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <label class="text-sm text-muted-color font-semibold">{{
               'layout.company.branch.selector.branch' | translate
             }}</label>
-            <p-select
+            <f-select
               [options]="branches()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
@@ -1702,15 +1435,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <!-- Actions -->
         <div class="flex gap-2 pt-2">
           <button
-            pButton
+            fButton
             class="flex-1"
             [disabled]="!canSwitch() || isSwitching()"
             (click)="onSwitch()"
           >
             @if (isSwitching()) {
-              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             } @else {
-              <span pButtonIcon class="pi pi-sync"></span>
+              <ui-icon pButtonIcon name="sync"></ui-icon>
             }
             <span pButtonLabel>{{ 'layout.company.branch.selector.switch.button' | translate }}</span>
           </button>
@@ -1722,16 +1455,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }], ctorParameters: () => [] });
 
 class AppLauncher {
+    layoutService = inject(LayoutService);
     destroyRef = inject(DestroyRef);
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    layoutService = inject(LayoutService);
     _isActive = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
     isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this._isActive()))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
@@ -1739,117 +1472,129 @@ class AppLauncher {
             }
         });
     }
-    togglePanel() {
+    toggleActive() {
         this._isActive.update((v) => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
       leaveActiveClass="animate-fadeout"
       [hideOnOutsideClick]="true"
-      (click)="togglePanel()"
+      (click)="toggleActive()"
     >
-      <i class="pi pi-th-large"></i>
+      <ui-icon name="th-large"></ui-icon>
       <span>{{ 'layout.launcher.apps' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
+      class="hidden absolute top-[3.25rem] z-50 border border-surface rounded-border origin-top surface-overlay"
+      style="inset-inline-end: 0; min-width: 16rem; max-width: 22rem; width: calc(100vw - 2rem); box-shadow: var(--f-shadow-xl);"
     >
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{
+      <div class="px-4 py-3 border-b border-surface">
+        <span class="text-xs font-semibold tracking-wide text-muted-color">{{
           'layout.launcher.applications' | translate
         }}</span>
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      </div>
+      @if (layoutService.apps().length === 0) {
+        <div class="px-4 py-6 text-center text-muted-color text-sm">
+          {{ 'layout.launcher.no.apps' | translate }}
+        </div>
+      } @else {
+        <div class="p-3 grid grid-cols-3 gap-1">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center gap-2 p-3 rounded-border cursor-pointer no-underline transition-colors duration-150 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
             >
               <div
-                class="flex items-center justify-center w-10 h-10 rounded-border bg-emphasis group-hover:bg-primary transition-all duration-200"
+                class="flex items-center justify-center w-9 h-9 rounded-border bg-primary/10 group-hover:bg-primary transition-colors duration-150"
               >
-                <lib-icon
-                  [icon]="app.icon"
-                  [iconType]="app.iconType"
-                  class="text-xl text-primary group-hover:text-primary-contrast transition-colors duration-200"
-                />
+                <ui-icon
+                  [name]="app.icon"
+                  class="text-base text-primary group-hover:text-primary-contrast transition-colors duration-150"
+                ></ui-icon>
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
-                >{{ app.nameKey ? (app.nameKey | translate) : app.name }}</span
+                class="text-xs text-center text-muted-color group-hover:text-color transition-colors duration-150 truncate w-full text-center leading-tight"
               >
+                {{ app.nameKey ? (app.nameKey | translate) : app.name }}
+              </span>
             </a>
           }
         </div>
-      </div>
+      }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppLauncher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLauncher, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-launcher',
-                    imports: [StyleClassModule, IconComponent, TranslatePipe],
+                    imports: [UiModule, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
       leaveActiveClass="animate-fadeout"
       [hideOnOutsideClick]="true"
-      (click)="togglePanel()"
+      (click)="toggleActive()"
     >
-      <i class="pi pi-th-large"></i>
+      <ui-icon name="th-large"></ui-icon>
       <span>{{ 'layout.launcher.apps' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
-      style="background-color: var(--surface-overlay); inset-inline-end: 0;"
+      class="hidden absolute top-[3.25rem] z-50 border border-surface rounded-border origin-top surface-overlay"
+      style="inset-inline-end: 0; min-width: 16rem; max-width: 22rem; width: calc(100vw - 2rem); box-shadow: var(--f-shadow-xl);"
     >
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{
+      <div class="px-4 py-3 border-b border-surface">
+        <span class="text-xs font-semibold tracking-wide text-muted-color">{{
           'layout.launcher.applications' | translate
         }}</span>
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      </div>
+      @if (layoutService.apps().length === 0) {
+        <div class="px-4 py-6 text-center text-muted-color text-sm">
+          {{ 'layout.launcher.no.apps' | translate }}
+        </div>
+      } @else {
+        <div class="p-3 grid grid-cols-3 gap-1">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center gap-2 p-3 rounded-border cursor-pointer no-underline transition-colors duration-150 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
             >
               <div
-                class="flex items-center justify-center w-10 h-10 rounded-border bg-emphasis group-hover:bg-primary transition-all duration-200"
+                class="flex items-center justify-center w-9 h-9 rounded-border bg-primary/10 group-hover:bg-primary transition-colors duration-150"
               >
-                <lib-icon
-                  [icon]="app.icon"
-                  [iconType]="app.iconType"
-                  class="text-xl text-primary group-hover:text-primary-contrast transition-colors duration-200"
-                />
+                <ui-icon
+                  [name]="app.icon"
+                  class="text-base text-primary group-hover:text-primary-contrast transition-colors duration-150"
+                ></ui-icon>
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
-                >{{ app.nameKey ? (app.nameKey | translate) : app.name }}</span
+                class="text-xs text-center text-muted-color group-hover:text-color transition-colors duration-150 truncate w-full text-center leading-tight"
               >
+                {{ app.nameKey ? (app.nameKey | translate) : app.name }}
+              </span>
             </a>
           }
         </div>
-      </div>
+      }
     </div>
   `,
                 }]
@@ -1938,13 +1683,13 @@ class AppProfile {
     translate(key, vars) {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -1952,11 +1697,11 @@ class AppProfile {
       [hideOnOutsideClick]="true"
       (click)="togglePanel()"
     >
-      <i class="pi pi-user"></i>
+      <ui-icon name="user"></ui-icon>
       <span>{{ 'layout.profile.title' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-3">
@@ -1975,7 +1720,7 @@ class AppProfile {
             <div
               class="w-12 h-12 rounded-border bg-primary flex items-center justify-center"
             >
-              <i class="pi pi-user text-xl text-primary-contrast"></i>
+              <ui-icon name="user" class="text-xl text-primary-contrast"></ui-icon>
             </div>
           }
           <div class="flex flex-col min-w-0 flex-1">
@@ -1998,7 +1743,7 @@ class AppProfile {
               class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
               (click)="copySignUpLink()"
             >
-              <i class="pi pi-link text-muted-color"></i>
+              <ui-icon name="link" class="text-muted-color"></ui-icon>
               <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
             </a>
           }
@@ -2006,26 +1751,26 @@ class AppProfile {
             class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
             (click)="logout()"
           >
-            <i class="pi pi-sign-out text-muted-color"></i>
+            <ui-icon name="sign-out" class="text-muted-color"></ui-icon>
             <span>{{ 'layout.profile.logout' | translate }}</span>
           </a>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2$3.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { 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"] }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppProfile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-profile',
-                    imports: [AngularModule, StyleClassModule, TranslatePipe],
+                    imports: [UiModule, AngularModule, TranslatePipe],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
       [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
+      fStyleClass="@next"
       enterFromClass="hidden"
       enterActiveClass="animate-scalein"
       leaveToClass="hidden"
@@ -2033,11 +1778,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [hideOnOutsideClick]="true"
       (click)="togglePanel()"
     >
-      <i class="pi pi-user"></i>
+      <ui-icon name="user"></ui-icon>
       <span>{{ 'layout.profile.title' | translate }}</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
+      class="hidden absolute top-[3.25rem] z-50 p-4 border border-surface rounded-border origin-top shadow-xl w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
       style="background-color: var(--surface-overlay); inset-inline-end: 0;"
     >
       <div class="flex flex-col gap-3">
@@ -2056,7 +1801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <div
               class="w-12 h-12 rounded-border bg-primary flex items-center justify-center"
             >
-              <i class="pi pi-user text-xl text-primary-contrast"></i>
+              <ui-icon name="user" class="text-xl text-primary-contrast"></ui-icon>
             </div>
           }
           <div class="flex flex-col min-w-0 flex-1">
@@ -2079,7 +1824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
               (click)="copySignUpLink()"
             >
-              <i class="pi pi-link text-muted-color"></i>
+              <ui-icon name="link" class="text-muted-color"></ui-icon>
               <span>{{ 'layout.profile.copy.sign.up.link' | translate }}</span>
             </a>
           }
@@ -2087,7 +1832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
             (click)="logout()"
           >
-            <i class="pi pi-sign-out text-muted-color"></i>
+            <ui-icon name="sign-out" class="text-muted-color"></ui-icon>
             <span>{{ 'layout.profile.logout' | translate }}</span>
           </a>
         </div>
@@ -2236,8 +1981,8 @@ class AppSearchbar {
             this.searchAdapter.onSearch(query);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AppSearchbar, isStandalone: true, selector: "app-searchbar", viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AppSearchbar, isStandalone: true, selector: "app-searchbar", viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="search-container h-full"
       #searchWrapper
@@ -2247,23 +1992,20 @@ class AppSearchbar {
         <!-- Topbar/Mobile Icon Mode -->
         <button
           type="button"
-          pButton
-          pRipple
-          class="search-toggle-btn"
-          icon="pi pi-search"
+          class="search-toggle-btn layout-topbar-action"
           (click)="toggleSearch()"
           [attr.aria-label]="'layout.topbar.search' | translate"
-          severity="secondary"
-          text
-        ></button>
+        >
+          <ui-icon name="search"></ui-icon>
+        </button>
 
         @if (isSearchExpanded()) {
           <div class="search-dropdown-panel">
-            <p-iconfield class="search-iconfield">
-              <p-inputicon class="pi pi-search search-icon" />
+            <f-iconfield class="search-iconfield">
+              <f-inputicon class="search-icon"><ui-icon name="search" /></f-inputicon>
               <input
                 type="text"
-                pInputText
+                fInputText
                 class="search-input w-full"
                 [placeholder]="'layout.topbar.search.placeholder' | translate"
                 [(ngModel)]="searchTerm"
@@ -2274,7 +2016,7 @@ class AppSearchbar {
                 #searchInput
                 autocomplete="off"
               />
-            </p-iconfield>
+            </f-iconfield>
 
             @if (suggestionsOpen() && suggestions().length > 0) {
               <div class="search-suggestions">
@@ -2293,7 +2035,7 @@ class AppSearchbar {
                       [attr.aria-selected]="idx === focusedIndex()"
                     >
                       @if (item.icon) {
-                        <i [class]="item.icon" class="suggestion-icon"></i>
+                        <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
                       }
                       <span class="suggestion-label">{{ item.label }}</span>
                     </li>
@@ -2305,11 +2047,11 @@ class AppSearchbar {
         }
       } @else {
         <!-- Desktop Full Input Mode -->
-        <p-iconfield class="search-iconfield">
-          <p-inputicon class="pi pi-search search-icon" (click)="onSearch()" />
+        <f-iconfield class="search-iconfield">
+          <f-inputicon class="search-icon cursor-pointer" (click)="onSearch()"><ui-icon name="search" /></f-inputicon>
           <input
             type="text"
-            pInputText
+            fInputText
             class="search-input w-full"
             [placeholder]="'layout.topbar.search.placeholder' | translate"
             [(ngModel)]="searchTerm"
@@ -2319,7 +2061,7 @@ class AppSearchbar {
             [attr.aria-label]="'layout.topbar.search' | translate"
             #searchInput
           />
-        </p-iconfield>
+        </f-iconfield>
 
         @if (suggestionsOpen() && suggestions().length > 0) {
           <div class="search-dropdown">
@@ -2334,7 +2076,7 @@ class AppSearchbar {
                   [attr.aria-selected]="idx === focusedIndex()"
                 >
                   @if (item.icon) {
-                    <i [class]="item.icon" class="suggestion-icon"></i>
+                    <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
                   }
                   <span class="suggestion-label">{{ item.label }}</span>
                 </li>
@@ -2344,11 +2086,11 @@ 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(--p-content-border-radius);box-shadow:0 4px 20px #00000026;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(--p-content-border-radius);box-shadow:0 4px 16px #0000001f;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(--p-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "component", type: i3$1.IconField, selector: "p-iconfield, p-icon-field", inputs: ["hostName", "iconPosition"] }, { kind: "component", type: i4$1.InputIcon, selector: "p-inputicon", inputs: ["hostName"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i2$2.Ripple, selector: "[pRipple]" }, { 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: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" }, { kind: "component", type: i1.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppSearchbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSearchbar, decorators: [{
             type: Component,
-            args: [{ selector: 'app-searchbar', imports: [AngularModule, PrimeModule, TranslatePipe], template: `
+            args: [{ selector: 'app-searchbar', imports: [UiModule, AngularModule, TranslatePipe], template: `
     <div
       class="search-container h-full"
       #searchWrapper
@@ -2358,23 +2100,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <!-- Topbar/Mobile Icon Mode -->
         <button
           type="button"
-          pButton
-          pRipple
-          class="search-toggle-btn"
-          icon="pi pi-search"
+          class="search-toggle-btn layout-topbar-action"
           (click)="toggleSearch()"
           [attr.aria-label]="'layout.topbar.search' | translate"
-          severity="secondary"
-          text
-        ></button>
+        >
+          <ui-icon name="search"></ui-icon>
+        </button>
 
         @if (isSearchExpanded()) {
           <div class="search-dropdown-panel">
-            <p-iconfield class="search-iconfield">
-              <p-inputicon class="pi pi-search search-icon" />
+            <f-iconfield class="search-iconfield">
+              <f-inputicon class="search-icon"><ui-icon name="search" /></f-inputicon>
               <input
                 type="text"
-                pInputText
+                fInputText
                 class="search-input w-full"
                 [placeholder]="'layout.topbar.search.placeholder' | translate"
                 [(ngModel)]="searchTerm"
@@ -2385,7 +2124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 #searchInput
                 autocomplete="off"
               />
-            </p-iconfield>
+            </f-iconfield>
 
             @if (suggestionsOpen() && suggestions().length > 0) {
               <div class="search-suggestions">
@@ -2404,7 +2143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                       [attr.aria-selected]="idx === focusedIndex()"
                     >
                       @if (item.icon) {
-                        <i [class]="item.icon" class="suggestion-icon"></i>
+                        <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
                       }
                       <span class="suggestion-label">{{ item.label }}</span>
                     </li>
@@ -2416,11 +2155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       } @else {
         <!-- Desktop Full Input Mode -->
-        <p-iconfield class="search-iconfield">
-          <p-inputicon class="pi pi-search search-icon" (click)="onSearch()" />
+        <f-iconfield class="search-iconfield">
+          <f-inputicon class="search-icon cursor-pointer" (click)="onSearch()"><ui-icon name="search" /></f-inputicon>
           <input
             type="text"
-            pInputText
+            fInputText
             class="search-input w-full"
             [placeholder]="'layout.topbar.search.placeholder' | translate"
             [(ngModel)]="searchTerm"
@@ -2430,7 +2169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             [attr.aria-label]="'layout.topbar.search' | translate"
             #searchInput
           />
-        </p-iconfield>
+        </f-iconfield>
 
         @if (suggestionsOpen() && suggestions().length > 0) {
           <div class="search-dropdown">
@@ -2445,7 +2184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                   [attr.aria-selected]="idx === focusedIndex()"
                 >
                   @if (item.icon) {
-                    <i [class]="item.icon" class="suggestion-icon"></i>
+                    <ui-icon [name]="item.icon" class="suggestion-icon"></ui-icon>
                   }
                   <span class="suggestion-label">{{ item.label }}</span>
                 </li>
@@ -2455,7 +2194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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(--p-content-border-radius);box-shadow:0 4px 20px #00000026;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(--p-content-border-radius);box-shadow:0 4px 16px #0000001f;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(--p-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: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 {
@@ -2525,8 +2264,8 @@ class AppTopbar {
             li.style.setProperty('--submenu-top', `${top}px`);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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">
+    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()"
@@ -2537,7 +2276,7 @@ class AppTopbar {
           [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
           (click)="layoutService.onMenuToggle()"
         >
-          <i class="pi pi-bars"></i>
+          <ui-icon name="bars"></ui-icon>
         </button>
       }
       <a class="layout-topbar-logo" routerLink="/">
@@ -2560,7 +2299,7 @@ class AppTopbar {
           [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
           (click)="layoutService.onMenuToggle()"
         >
-          <i class="pi pi-bars"></i>
+          <ui-icon name="bars"></ui-icon>
         </button>
       }
     </div>
@@ -2588,18 +2327,14 @@ class AppTopbar {
           [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
-          <i
-            class="pi"
-            [class.pi-moon]="layoutService.isDarkTheme()"
-            [class.pi-sun]="!layoutService.isDarkTheme()"
-          ></i>
+          <ui-icon [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
         </button>
         <div class="relative" #configContainer>
           <button
             class="layout-topbar-action"
             [class.layout-topbar-action-highlight]="activePanel() === 'config'"
             [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
-            pStyleClass="@next"
+            fStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
             leaveToClass="hidden"
@@ -2607,7 +2342,7 @@ class AppTopbar {
             [hideOnOutsideClick]="true"
             (click)="togglePanel('config')"
           >
-            <i class="pi pi-palette"></i>
+            <ui-icon name="palette"></ui-icon>
           </button>
           <app-configurator />
         </div>
@@ -2616,14 +2351,14 @@ class AppTopbar {
       <button
         class="layout-topbar-menu-button layout-topbar-action"
         [attr.aria-label]="'layout.topbar.more.options' | translate"
-        pStyleClass="@next"
+        fStyleClass="@next"
         enterFromClass="hidden"
         enterActiveClass="animate-scalein"
         leaveToClass="hidden"
         leaveActiveClass="animate-fadeout"
         [hideOnOutsideClick]="true"
       >
-        <i class="pi pi-ellipsis-v"></i>
+        <ui-icon name="ellipsis-v"></ui-icon>
       </button>
 
       <div class="layout-topbar-menu hidden lg:block">
@@ -2644,15 +2379,13 @@ class AppTopbar {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { 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" }] });
+  </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"] }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppTopbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-topbar',
-                    imports: [
-                        RouterModule,
-                        StyleClassModule,
+                    imports: [UiModule, RouterModule,
                         NgComponentOutlet,
                         TranslatePipe,
                         InlineSvgComponent,
@@ -2661,8 +2394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         AppProfile,
                         AppCompanyBranchSelector,
                         AppLauncher,
-                        AppSearchbar,
-                    ],
+                        AppSearchbar,],
                     template: `<div class="layout-topbar">
     <div
       class="layout-topbar-logo-container"
@@ -2674,7 +2406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
           (click)="layoutService.onMenuToggle()"
         >
-          <i class="pi pi-bars"></i>
+          <ui-icon name="bars"></ui-icon>
         </button>
       }
       <a class="layout-topbar-logo" routerLink="/">
@@ -2697,7 +2429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           [attr.aria-label]="'layout.topbar.toggle.menu' | translate"
           (click)="layoutService.onMenuToggle()"
         >
-          <i class="pi pi-bars"></i>
+          <ui-icon name="bars"></ui-icon>
         </button>
       }
     </div>
@@ -2725,18 +2457,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           [attr.aria-label]="'layout.topbar.toggle.dark.mode' | translate"
           (click)="toggleDarkMode()"
         >
-          <i
-            class="pi"
-            [class.pi-moon]="layoutService.isDarkTheme()"
-            [class.pi-sun]="!layoutService.isDarkTheme()"
-          ></i>
+          <ui-icon [name]="layoutService.isDarkTheme() ? 'moon' : 'sun'"></ui-icon>
         </button>
         <div class="relative" #configContainer>
           <button
             class="layout-topbar-action"
             [class.layout-topbar-action-highlight]="activePanel() === 'config'"
             [attr.aria-label]="'layout.topbar.open.theme.settings' | translate"
-            pStyleClass="@next"
+            fStyleClass="@next"
             enterFromClass="hidden"
             enterActiveClass="animate-scalein"
             leaveToClass="hidden"
@@ -2744,7 +2472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             [hideOnOutsideClick]="true"
             (click)="togglePanel('config')"
           >
-            <i class="pi pi-palette"></i>
+            <ui-icon name="palette"></ui-icon>
           </button>
           <app-configurator />
         </div>
@@ -2753,14 +2481,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <button
         class="layout-topbar-menu-button layout-topbar-action"
         [attr.aria-label]="'layout.topbar.more.options' | translate"
-        pStyleClass="@next"
+        fStyleClass="@next"
         enterFromClass="hidden"
         enterActiveClass="animate-scalein"
         leaveToClass="hidden"
         leaveActiveClass="animate-fadeout"
         [hideOnOutsideClick]="true"
       >
-        <i class="pi pi-ellipsis-v"></i>
+        <ui-icon name="ellipsis-v"></ui-icon>
       </button>
 
       <div class="layout-topbar-menu hidden lg:block">
@@ -2786,14 +2514,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }], 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.5", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
+    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.5", ngImport: i0, type: AppSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sidebar',
@@ -2862,23 +2590,32 @@ class AppLayout {
     unblockBodyScroll() {
         this.document.body.classList.remove('blocked-scroll');
     }
-    containerClass = computed(() => {
-        const config = this.layoutService.layoutConfig();
-        const state = this.layoutService.layoutState();
-        return {
-            'layout-overlay': config.menuMode === 'overlay',
-            'layout-static': config.menuMode === 'static',
-            'layout-topbar-mode': config.menuMode === 'topbar',
-            'layout-static-inactive': state.staticMenuDesktopInactive && config.menuMode === 'static',
-            'layout-overlay-active': state.overlayMenuActive,
-            'layout-mobile-active': state.staticMenuMobileActive,
-            'layout-topbar-nav-hidden': !state.topbarMenuVisible && config.menuMode === 'topbar',
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
-    <div class="layout-wrapper" [ngClass]="containerClass()">
+    isOverlay = computed(() => this.layoutService.layoutConfig().menuMode === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+    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: `
+    <div
+      class="layout-wrapper"
+      [class.layout-overlay]="isOverlay()"
+      [class.layout-static]="isStatic()"
+      [class.layout-topbar-mode]="isTopbarMode()"
+      [class.layout-static-inactive]="isStaticInactive()"
+      [class.layout-overlay-active]="isOverlayActive()"
+      [class.layout-mobile-active]="isMobileActive()"
+      [class.layout-topbar-nav-hidden]="isTopbarNavHidden()"
+    >
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2889,15 +2626,24 @@ class AppLayout {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$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$1.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.5", ngImport: i0, type: AppLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
+                    imports: [AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
-    <div class="layout-wrapper" [ngClass]="containerClass()">
+    <div
+      class="layout-wrapper"
+      [class.layout-overlay]="isOverlay()"
+      [class.layout-static]="isStatic()"
+      [class.layout-topbar-mode]="isTopbarMode()"
+      [class.layout-static-inactive]="isStaticInactive()"
+      [class.layout-overlay-active]="isOverlayActive()"
+      [class.layout-mobile-active]="isMobileActive()"
+      [class.layout-topbar-nav-hidden]="isTopbarNavHidden()"
+    >
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2912,47 +2658,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const NavyBlueTheme = definePreset(Material, {
-    semantic: {
-        colorScheme: {
-            light: {
-                primary: {
-                    color: '#3535cd',
-                    inverseColor: '#0707a9',
-                    hoverColor: '#0707a9',
-                    activeColor: '#0707a9',
-                },
-                highlight: {
-                    background: '#e2e8f0',
-                    focusBackground: '#e2e8f0',
-                    color: '#3535cd',
-                    focusColor: '#3535cd',
-                },
-            },
-        },
-    },
-});
+function buildPreset(presetName, primary) {
+    return { preset: presetName, primary };
+}
 
-const GreenTheme = definePreset(Material, {
-    semantic: {
-        colorScheme: {
-            light: {
-                primary: {
-                    color: '#01712c',
-                    inverseColor: '#119744',
-                    hoverColor: '#119744',
-                    activeColor: '#119744',
-                },
-                highlight: {
-                    background: '#e2e8f0',
-                    focusBackground: '#e2e8f0',
-                    color: '#01712c',
-                    focusColor: '#01712c',
-                },
-            },
-        },
-    },
-});
+const NavyBlueTheme = {
+    preset: 'Aura',
+    primary: 'indigo',
+};
+
+const GreenTheme = {
+    preset: 'Aura',
+    primary: 'green',
+};
 
 const LAYOUT_MESSAGES = {
     // components/top-bar/app.profile.ts
@@ -3005,6 +2723,15 @@ const LAYOUT_MESSAGES = {
     'menu.task.manager': 'Task Manager',
     'menu.notifications': 'Notifications',
     'menu.localization': 'Localization',
+    'menu.components': 'Components',
+    'menu.components.display': 'Display',
+    'menu.components.menu': 'Menu',
+    'menu.components.form': 'Form',
+    'menu.components.overlay': 'Overlay',
+    'menu.components.data': 'Data',
+    'menu.components.panel': 'Panel',
+    'menu.components.media': 'Media',
+    'menu.components.misc': 'Directives',
     'menu.projects': 'Projects',
     'menu.projects.active': 'Active Projects',
     'menu.projects.archived': 'Archived',
@@ -3029,5 +2756,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, buildBootstrapPreset, buildPreset, buildSemanticExt, filterAppsByPermissions, filterMenuByPermissions };
+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 };
 //# sourceMappingURL=flusys-ng-layout.mjs.map