@flusys/ng-layout 1.0.0-beta → 1.0.0

package/fesm2022/flusys-ng-layout.mjs

@@ -1,8 +1,11 @@
-import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, ChangeDetectionStrategy, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2, ViewChild } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, ChangeDetectionStrategy, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
+import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import * as i2$2 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, NavigationEnd } from '@angular/router';
@@ -10,13 +13,8 @@ import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeuix/
 import Aura from '@primeuix/themes/aura';
 import Lara from '@primeuix/themes/lara';
 import Nora from '@primeuix/themes/nora';
-import { PrimeNG } from 'primeng/config';
-import * as i3 from 'primeng/selectbutton';
+import * as i2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, PlatformService, AngularModule, IconComponent } from '@flusys/ng-shared';
-import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/styleclass';
@@ -204,94 +202,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-/**
- * Service managing layout configuration and state.
- * Provides signals for reactive layout updates.
- */
+/** Layout configuration and state management service */
 class LayoutService {
     document = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     persistence = inject(LayoutPersistenceService);
     appConfig = inject(APP_CONFIG, { optional: true });
-    defaultConfig = {
+    DEFAULT_CONFIG = {
         preset: 'Aura',
         primary: 'emerald',
         surface: null,
         darkTheme: false,
         menuMode: 'static',
     };
-    // Load persisted config merged with defaults
-    initialConfig = (() => {
-        const persisted = this.persistence.load();
-        return persisted
-            ? { ...this.defaultConfig, ...persisted }
-            : this.defaultConfig;
-    })();
-    defaultState = {
+    DEFAULT_STATE = {
         staticMenuDesktopInactive: false,
         overlayMenuActive: false,
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false,
     };
-    // Signals
-    layoutConfig = signal(this.initialConfig, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
-    layoutState = signal(this.defaultState, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
-    transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
-    // User Profile Signals
-    userProfile = signal(null, ...(ngDevMode ? [{ debugName: "userProfile" }] : []));
-    companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "companyProfile" }] : []));
-    appName = signal(this.appConfig?.appName ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "appName" }] : []));
-    // Author/Brand Signals
-    authorName = signal(this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name, ...(ngDevMode ? [{ debugName: "authorName" }] : []));
-    authorUrl = signal(this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url, ...(ngDevMode ? [{ debugName: "authorUrl" }] : []));
-    // App Launcher Signals
-    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
-    /**
-     * Filtered launcher apps based on user permissions.
-     * Automatically recomputes when raw apps or permissions change.
-     */
-    apps = computed(() => {
-        const raw = this._rawApps();
-        const permission = this.permissionValidator.permissions();
-        return filterAppsByPermissions(raw, permission);
-    }, ...(ngDevMode ? [{ debugName: "apps" }] : []));
-    // Menu Signals
+    _layoutConfig = signal({
+        ...this.DEFAULT_CONFIG,
+        ...this.persistence.load(),
+    }, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
+    _layoutState = signal(this.DEFAULT_STATE, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
+    _transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : []));
+    layoutConfig = this._layoutConfig.asReadonly();
+    layoutState = this._layoutState.asReadonly();
+    transitionComplete = this._transitionComplete.asReadonly();
+    _userProfile = signal(null, ...(ngDevMode ? [{ debugName: "_userProfile" }] : []));
+    _companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "_companyProfile" }] : []));
     _rawMenu = signal([], ...(ngDevMode ? [{ debugName: "_rawMenu" }] : []));
+    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
     permissionValidator = inject(PermissionValidatorService);
-    /**
-     * Filtered menu items based on user permissions.
-     * Automatically recomputes when raw menu or permission checker changes.
-     * Role checker is optional - if not set, role-based permissions will be denied.
-     */
-    menu = computed(() => {
-        const raw = this._rawMenu(); // Track permission changes
-        const permission = this.permissionValidator.permissions();
-        return filterMenuByPermissions(raw, permission);
-    }, ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    userProfile = this._userProfile.asReadonly();
+    companyProfile = this._companyProfile.asReadonly();
+    // Static app info from config
+    appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
+    authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
+    authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
+    // Permission-filtered menu and apps
+    menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "apps" }] : []));
+    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
     // Computed signals - Layout
-    isSidebarActive = computed(() => this.layoutState().overlayMenuActive ||
-        this.layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
-    isDarkTheme = computed(() => this.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
-    getPrimary = computed(() => this.layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
-    getSurface = computed(() => this.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
-    isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
-    // Computed signals - User Profile
-    userName = computed(() => this.userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
-    userEmail = computed(() => this.userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    userProfilePictureUrl = computed(() => this.userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
+    isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
+        this._layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
+    isDarkTheme = computed(() => this._layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    getPrimary = computed(() => this._layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
+    getSurface = computed(() => this._layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
+    isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+    // User profile computed signals
+    userName = computed(() => this._userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
+    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
+    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
+    isAuthenticated = computed(() => !!this._userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
     companyName = computed(() => {
-        // If company feature is disabled, always show app name
-        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig)) {
-            return this.appName();
-        }
-        return this.companyProfile()?.name ?? this.appName();
+        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig))
+            return this.appName;
+        return this._companyProfile()?.name ?? this.appName;
     }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
-    companyLogoUrl = computed(() => this.companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
-    isAuthenticated = computed(() => !!this.userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
-    // Computed signals - App Launcher
-    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
     // RxJS Subjects for event communication
     configUpdate = new Subject();
     overlayOpen = new Subject();
@@ -304,79 +277,56 @@ class LayoutService {
     initialized = false;
     constructor() {
         effect(() => {
-            const config = this.layoutConfig();
-            if (config) {
-                this.onConfigUpdate();
-            }
-        });
-        effect(() => {
-            const config = this.layoutConfig();
-            if (!this.initialized || !config) {
-                this.initialized = true;
-                return;
-            }
-            this.handleDarkModeTransition(config);
-        });
-        // Auto-save configuration changes to localStorage
-        effect(() => {
-            const config = this.layoutConfig();
-            if (config && this.initialized) {
+            const config = this._layoutConfig();
+            this.configUpdate.next(config);
+            if (this.initialized) {
+                this.handleDarkModeTransition(config);
                 this.persistence.save(config);
             }
+            this.initialized = true;
         });
     }
+    toggleDarkMode(config) {
+        const isDark = (config ?? this._layoutConfig()).darkTheme;
+        this.document.documentElement.classList.toggle('app-dark', isDark);
+    }
     handleDarkModeTransition(config) {
-        if (this.document.startViewTransition) {
-            this.startViewTransition(config);
+        const doc = this.document;
+        if ('startViewTransition' in doc && typeof doc.startViewTransition === 'function') {
+            doc
+                .startViewTransition(() => this.toggleDarkMode(config))
+                .ready.then(() => this.onTransitionEnd())
+                .catch(() => { });
         }
         else {
             this.toggleDarkMode(config);
             this.onTransitionEnd();
         }
     }
-    startViewTransition(config) {
-        const transition = this.document.startViewTransition(() => {
-            this.toggleDarkMode(config);
-        });
-        transition.ready.then(() => this.onTransitionEnd()).catch(() => { });
-    }
-    toggleDarkMode(config) {
-        const _config = config || this.layoutConfig();
-        if (_config.darkTheme) {
-            this.document.documentElement.classList.add('app-dark');
-        }
-        else {
-            this.document.documentElement.classList.remove('app-dark');
-        }
-    }
     onTransitionEnd() {
-        this.transitionComplete.set(true);
-        setTimeout(() => this.transitionComplete.set(false));
+        this._transitionComplete.set(true);
+        setTimeout(() => this._transitionComplete.set(false));
     }
     onMenuToggle() {
+        const state = this._layoutState();
         if (this.isOverlay()) {
-            this.layoutState.update((prev) => ({
-                ...prev,
-                overlayMenuActive: !this.layoutState().overlayMenuActive,
-            }));
-            if (this.layoutState().overlayMenuActive) {
+            const newOverlayActive = !state.overlayMenuActive;
+            this._layoutState.update((prev) => ({ ...prev, overlayMenuActive: newOverlayActive }));
+            if (newOverlayActive)
                 this.overlayOpen.next();
-            }
+            return;
         }
         if (this.isDesktop()) {
-            this.layoutState.update((prev) => ({
+            this._layoutState.update((prev) => ({
                 ...prev,
-                staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive,
+                staticMenuDesktopInactive: !state.staticMenuDesktopInactive,
             }));
         }
         else {
-            this.layoutState.update((prev) => ({
-                ...prev,
-                staticMenuMobileActive: !this.layoutState().staticMenuMobileActive,
-            }));
-            if (this.layoutState().staticMenuMobileActive) {
+            const newMobileActive = !state.staticMenuMobileActive;
+            this._layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: newMobileActive }));
+            if (newMobileActive)
                 this.overlayOpen.next();
-            }
         }
     }
     isDesktop() {
@@ -385,65 +335,36 @@ class LayoutService {
     isMobile() {
         return !this.isDesktop();
     }
-    onConfigUpdate() {
-        this.configUpdate.next(this.layoutConfig());
-    }
     onMenuStateChange(event) {
         this.menuSource.next(event);
     }
     reset() {
         this.resetSource.next(true);
     }
-    // ==========================================================================
-    // User Profile Methods
-    // ==========================================================================
-    /**
-     * Set the current user profile for display in layout.
-     * Called by auth integration to sync user data.
-     */
+    // Config & state updates
+    updateLayoutConfig(config) {
+        this._layoutConfig.update((prev) => ({ ...prev, ...config }));
+    }
+    updateLayoutState(state) {
+        this._layoutState.update((prev) => ({ ...prev, ...state }));
+    }
+    // Profile setters
     setUserProfile(profile) {
-        this.userProfile.set(profile);
+        this._userProfile.set(profile);
     }
-    /**
-     * Set the current company profile for display in layout.
-     * Called by auth integration to sync company data.
-     */
     setCompanyProfile(profile) {
-        this.companyProfile.set(profile);
+        this._companyProfile.set(profile);
     }
-    // ==========================================================================
-    // Menu Methods
-    // ==========================================================================
-    /**
-     * Set the raw menu items (unfiltered).
-     * Menu will be automatically filtered based on permission checker.
-     * Called by app initialization to set menu from IAM or other source.
-     */
+    // Menu & apps
     setMenu(items) {
         this._rawMenu.set(items);
     }
-    /**
-     * Clear menu and permission/role checkers.
-     * Called on logout.
-     */
     clearMenu() {
         this._rawMenu.set([]);
     }
-    // ==========================================================================
-    // App Launcher Methods
-    // ==========================================================================
-    /**
-     * Set launcher apps for display in header.
-     * Apps will be automatically filtered based on user permissions.
-     * If empty after filtering, the app launcher button is hidden.
-     */
     setApps(apps) {
         this._rawApps.set(apps);
     }
-    /**
-     * Clear launcher apps.
-     * Called on logout.
-     */
     clearApps() {
         this._rawApps.set([]);
     }
@@ -452,10 +373,32 @@ class LayoutService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class AppFooter {
+    layoutService = inject(LayoutService);
+    // Footer shows product branding (appName), not user's company
+    appName = this.layoutService.appName;
+    authorName = this.layoutService.authorName;
+    authorUrl = this.layoutService.authorUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+        {{ appName }} by
+        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
+    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    selector: 'app-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<div class="layout-footer">
+        {{ appName }} by
+        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
+    </div>`,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const presets = {
     Aura,
@@ -464,19 +407,19 @@ const presets = {
 };
 class AppConfigurator {
     router = inject(Router);
-    primeng = inject(PrimeNG);
     layoutService = inject(LayoutService);
-    platformService = inject(PlatformService);
     presets = Object.keys(presets);
     showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
     menuModeOptions = [
         { label: 'Static', value: 'static' },
         { label: 'Overlay', value: 'overlay' },
     ];
-    ngOnInit() {
-        if (!this.platformService.isServer) {
-            this.onPresetChange(this.layoutService.layoutConfig().preset);
-        }
+    constructor() {
+        // Use afterNextRender for browser-only initialization (replaces isServer check)
+        afterNextRender(() => {
+            const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
+            this.onPresetChange(preset);
+        });
     }
     surfaces = [
         {
@@ -782,16 +725,10 @@ class AppConfigurator {
     }
     updateColors(event, type, color) {
         if (type === 'primary') {
-            this.layoutService.layoutConfig.update((state) => ({
-                ...state,
-                primary: color.name,
-            }));
+            this.layoutService.updateLayoutConfig({ primary: color.name });
         }
         else if (type === 'surface') {
-            this.layoutService.layoutConfig.update((state) => ({
-                ...state,
-                surface: color.name,
-            }));
+            this.layoutService.updateLayoutConfig({ surface: color.name });
         }
         this.applyTheme(type, color);
         event.stopPropagation();
@@ -805,12 +742,12 @@ class AppConfigurator {
         }
     }
     onPresetChange(event) {
-        this.layoutService.layoutConfig.update((state) => ({
-            ...state,
-            preset: event,
-        }));
+        this.layoutService.updateLayoutConfig({ preset: event });
         const preset = presets[event];
-        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
+        // 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())
@@ -818,13 +755,10 @@ class AppConfigurator {
             .use({ useDefaultOptions: true });
     }
     onMenuModeChange(event) {
-        this.layoutService.layoutConfig.update((prev) => ({
-            ...prev,
-            menuMode: event,
-        }));
+        this.layoutService.updateLayoutConfig({ menuMode: event });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 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: `
     <div class="flex flex-col gap-4">
       <div>
         <span class="text-sm text-muted-color font-semibold">Primary</span>
@@ -891,14 +825,14 @@ class AppConfigurator {
         </div>
       }
     </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, SelectButtonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, FormsModule, SelectButtonModule],
                     template: `
     <div class="flex flex-col gap-4">
       <div>
@@ -968,36 +902,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     </div>
     `,
                     host: {
-                        class: 'hidden absolute top-[3.25rem] right-0 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] right-0 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)]',
                         style: 'background-color: var(--surface-overlay)',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AppFloatingConfigurator {
-    LayoutService = inject(LayoutService);
-    isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    layoutService = inject(LayoutService);
+    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
     toggleDarkMode() {
-        this.LayoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
+        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
+        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
-        <div class="fixed flex flex-col md:flex-row gap-4 top-8 right-0 md:right-8 z-99">
+        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
             <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
             <div class="relative">
                 <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
                 <app-configurator />
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-floating-configurator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonModule, StyleClassModule, AppConfigurator],
                     template: `
-        <div class="fixed flex flex-col md:flex-row gap-4 top-8 right-0 md:right-8 z-99">
+        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
             <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
             <div class="relative">
                 <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
@@ -1008,34 +944,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-class AppFooter {
-    layoutService = inject(LayoutService);
-    // Footer shows product branding (appName), not user's company
-    appName = this.layoutService.appName;
-    authorName = this.layoutService.authorName;
-    authorUrl = this.layoutService.authorUrl;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
-        {{ appName() }} by
-        <a [href]="authorUrl()" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName() }}</a>
-    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'app-footer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<div class="layout-footer">
-        {{ appName() }} by
-        <a [href]="authorUrl()" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName() }}</a>
-    </div>`,
-                }]
-        }] });
-
 const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
 const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
 
+/**
+ * View Transitions API type definitions
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+ */
+
 /** Company/branch switcher displayed in top bar */
 class AppCompanyBranchSelector {
     destroyRef = inject(DestroyRef);
@@ -1044,26 +960,34 @@ class AppCompanyBranchSelector {
     messageService = inject(MessageService);
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
             .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
-                this.isActive.set(false);
+                this._isActive.set(false);
             }
         });
     }
     currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? 'No Company', ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
     currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
-    companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
-    branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
-    selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : []));
-    selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
-    isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingCompanies" }] : []));
-    isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingBranches" }] : []));
-    isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "isSwitching" }] : []));
+    _companies = signal([], ...(ngDevMode ? [{ debugName: "_companies" }] : []));
+    companies = this._companies.asReadonly();
+    _branches = signal([], ...(ngDevMode ? [{ debugName: "_branches" }] : []));
+    branches = this._branches.asReadonly();
+    _selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedCompanyId" }] : []));
+    selectedCompanyId = this._selectedCompanyId.asReadonly();
+    _selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedBranchId" }] : []));
+    selectedBranchId = this._selectedBranchId.asReadonly();
+    _isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : []));
+    isLoadingCompanies = this._isLoadingCompanies.asReadonly();
+    _isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingBranches" }] : []));
+    isLoadingBranches = this._isLoadingBranches.asReadonly();
+    _isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "_isSwitching" }] : []));
+    isSwitching = this._isSwitching.asReadonly();
     canSwitch = computed(() => {
         const selectedCompany = this.selectedCompanyId();
         if (!selectedCompany)
@@ -1074,7 +998,7 @@ class AppCompanyBranchSelector {
         return selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId;
     }, ...(ngDevMode ? [{ debugName: "canSwitch" }] : []));
     onPanelToggle() {
-        this.isActive.update((v) => !v);
+        this._isActive.update((v) => !v);
         if (this.isActive() && this.companies().length === 0) {
             this.loadCompanies();
         }
@@ -1082,61 +1006,53 @@ class AppCompanyBranchSelector {
     loadCompanies() {
         if (!this.authApi)
             return;
-        this.isLoadingCompanies.set(true);
+        this._isLoadingCompanies.set(true);
         this.authApi
             .getUserCompanies()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (companies) => {
-                this.companies.set(companies);
-                this.isLoadingCompanies.set(false);
+                this._companies.set(companies);
+                this._isLoadingCompanies.set(false);
             },
-            error: (err) => {
-                this.isLoadingCompanies.set(false);
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to load companies',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isLoadingCompanies.set(false);
             },
         });
     }
     onCompanyChange(companyId) {
-        this.selectedCompanyId.set(companyId);
+        this._selectedCompanyId.set(companyId);
         if (!companyId) {
-            this.branches.set([]);
-            this.selectedBranchId.set(null);
+            this._branches.set([]);
+            this._selectedBranchId.set(null);
             return;
         }
         this.loadBranches(companyId);
     }
     onBranchChange(branchId) {
-        this.selectedBranchId.set(branchId);
+        this._selectedBranchId.set(branchId);
     }
     loadBranches(companyId) {
         if (!this.authApi)
             return;
-        this.isLoadingBranches.set(true);
-        this.selectedBranchId.set(null);
+        this._isLoadingBranches.set(true);
+        this._selectedBranchId.set(null);
         this.authApi
             .getCompanyBranches(companyId)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (branches) => {
-                this.branches.set(branches);
-                this.isLoadingBranches.set(false);
+                this._branches.set(branches);
+                this._isLoadingBranches.set(false);
                 // Auto-select if only one branch available
                 if (branches.length === 1) {
-                    this.selectedBranchId.set(branches[0].id);
+                    this._selectedBranchId.set(branches[0].id);
                 }
             },
-            error: (err) => {
-                this.isLoadingBranches.set(false);
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to load branches',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isLoadingBranches.set(false);
             },
         });
     }
@@ -1153,19 +1069,15 @@ class AppCompanyBranchSelector {
             });
             return;
         }
-        this.isSwitching.set(true);
+        this._isSwitching.set(true);
         this.authApi
             .switchCompany(selectedCompany, selectedBranch || '')
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: () => { },
-            error: (err) => {
-                this.isSwitching.set(false);
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to switch company',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isSwitching.set(false);
             },
         });
     }
@@ -1190,10 +1102,10 @@ class AppCompanyBranchSelector {
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)]"
+      class="hidden absolute top-[3.25rem] right-0 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]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-4 min-w-[280px]">
+      <div class="flex flex-col gap-4">
         <span class="text-sm text-muted-color font-semibold"
           >Switch Company & Branch</span
         >
@@ -1243,13 +1155,13 @@ class AppCompanyBranchSelector {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ 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: "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: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] });
+  `, 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: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
                     host: { class: 'relative' },
                     template: `
@@ -1272,10 +1184,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)]"
+      class="hidden absolute top-[3.25rem] right-0 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]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-4 min-w-[280px]">
+      <div class="flex flex-col gap-4">
         <span class="text-sm text-muted-color font-semibold"
           >Switch Company & Branch</span
         >
@@ -1334,19 +1246,20 @@ class AppLauncher {
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
     layoutService = inject(LayoutService);
-    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    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)) {
-                this.isActive.set(false);
+                this._isActive.set(false);
             }
         });
     }
     togglePanel() {
-        this.isActive.update((v) => !v);
+        this._isActive.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
@@ -1366,15 +1279,15 @@ class AppLauncher {
       <span>Apps</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)]"
+      class="hidden absolute top-[3.25rem] right-0 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)"
     >
-      <div class="flex flex-col gap-2 min-w-[240px]">
+      <div class="flex flex-col gap-2">
         <span class="text-sm text-muted-color font-semibold">Applications</span>
-        <div class="grid grid-cols-3 gap-2">
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center w-20 p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
@@ -1389,7 +1302,7 @@ class AppLauncher {
                 />
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200"
+                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
                 >{{ app.name }}</span
               >
             </a>
@@ -1397,13 +1310,13 @@ class AppLauncher {
         </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"] }] });
+  `, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLauncher, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-launcher',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [StyleClassModule, IconComponent],
                     host: { class: 'relative' },
                     template: `
@@ -1423,15 +1336,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <span>Apps</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)]"
+      class="hidden absolute top-[3.25rem] right-0 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)"
     >
-      <div class="flex flex-col gap-2 min-w-[240px]">
+      <div class="flex flex-col gap-2">
         <span class="text-sm text-muted-color font-semibold">Applications</span>
-        <div class="grid grid-cols-3 gap-2">
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center w-20 p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
@@ -1446,7 +1359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 />
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200"
+                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
                 >{{ app.name }}</span
               >
             </a>
@@ -1462,26 +1375,28 @@ class AppProfile {
     destroyRef = inject(DestroyRef);
     authState = inject(LAYOUT_AUTH_STATE, { optional: true });
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
+    layoutService = inject(LayoutService);
     messageService = inject(MessageService);
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
             .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
-                this.isActive.set(false);
+                this._isActive.set(false);
             }
         });
     }
     togglePanel() {
-        this.isActive.update((v) => !v);
+        this._isActive.update((v) => !v);
     }
     userName = computed(() => this.authState?.loginUserData()?.name ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    profilePicture = computed(() => this.authState?.loginUserData()?.profilePicture?.url ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
+    profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
     logout() {
         if (!this.authApi)
             return;
@@ -1497,12 +1412,8 @@ class AppProfile {
                 });
                 this.authApi?.navigateLogin(false);
             },
-            error: (err) => {
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to logout',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
             },
         });
     }
@@ -1544,10 +1455,10 @@ class AppProfile {
       <span>Profile</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)]"
+      class="hidden absolute top-[3.25rem] right-0 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)"
     >
-      <div class="flex flex-col gap-3 min-w-[240px]">
+      <div class="flex flex-col gap-3">
         <!-- User Info -->
         <a
           class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline hover:bg-emphasis transition-all duration-200"
@@ -1566,9 +1477,9 @@ class AppProfile {
               <i class="pi pi-user text-xl text-primary-contrast"></i>
             </div>
           }
-          <div class="flex flex-col">
-            <span class="font-semibold text-color">{{ userName() }}</span>
-            <span class="text-sm text-muted-color">{{ userEmail() }}</span>
+          <div class="flex flex-col min-w-0 flex-1">
+            <span class="font-semibold text-color truncate">{{ userName() }}</span>
+            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
           </div>
         </a>
 
@@ -1594,13 +1505,13 @@ class AppProfile {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-profile',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule],
                     host: { class: 'relative' },
                     template: `
@@ -1620,10 +1531,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <span>Profile</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 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)]"
+      class="hidden absolute top-[3.25rem] right-0 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)"
     >
-      <div class="flex flex-col gap-3 min-w-[240px]">
+      <div class="flex flex-col gap-3">
         <!-- User Info -->
         <a
           class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline hover:bg-emphasis transition-all duration-200"
@@ -1642,9 +1553,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               <i class="pi pi-user text-xl text-primary-contrast"></i>
             </div>
           }
-          <div class="flex flex-col">
-            <span class="font-semibold text-color">{{ userName() }}</span>
-            <span class="text-sm text-muted-color">{{ userEmail() }}</span>
+          <div class="flex flex-col min-w-0 flex-1">
+            <span class="font-semibold text-color truncate">{{ userName() }}</span>
+            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
           </div>
         </a>
 
@@ -1688,16 +1599,13 @@ class AppTopbar {
             this.handleOutsideClick(event);
         });
     }
-    // Use layoutService.companyName which falls back to appName
     companyName = this.layoutService.companyName;
     enableCompanyFeature = computed(() => {
         return isCompanyFeatureEnabled(this.appConfig);
     }, ...(ngDevMode ? [{ debugName: "enableCompanyFeature" }] : []));
     toggleDarkMode() {
-        this.layoutService.layoutConfig.update((state) => ({
-            ...state,
-            darkTheme: !state.darkTheme,
-        }));
+        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
+        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
     togglePanel(panel) {
         this.activePanel.update((current) => (current === panel ? null : panel));
@@ -1731,11 +1639,9 @@ class AppTopbar {
           (click)="toggleDarkMode()"
         >
           <i
-            [ngClass]="{
-              'pi ': true,
-              'pi-moon': layoutService.isDarkTheme(),
-              'pi-sun': !layoutService.isDarkTheme(),
-            }"
+            class="pi"
+            [class.pi-moon]="layoutService.isDarkTheme()"
+            [class.pi-sun]="!layoutService.isDarkTheme()"
           ></i>
         </button>
         <div class="relative" #configContainer>
@@ -1780,16 +1686,15 @@ class AppTopbar {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }] });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "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: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-topbar',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         RouterModule,
-                        CommonModule,
                         StyleClassModule,
                         AppConfigurator,
                         AppProfile,
@@ -1817,11 +1722,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           (click)="toggleDarkMode()"
         >
           <i
-            [ngClass]="{
-              'pi ': true,
-              'pi-moon': layoutService.isDarkTheme(),
-              'pi-sun': !layoutService.isDarkTheme(),
-            }"
+            class="pi"
+            [class.pi-moon]="layoutService.isDarkTheme()"
+            [class.pi-sun]="!layoutService.isDarkTheme()"
           ></i>
         </button>
         <div class="relative" #configContainer>
@@ -1878,10 +1781,10 @@ class AppMenuitem {
     // Injected services
     router = inject(Router);
     layoutService = inject(LayoutService);
-    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
     destroyRef = inject(DestroyRef);
-    // State signals
-    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    // State signals - private writable + public readonly pattern
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    active = this._active.asReadonly();
     // Computed signals
     key = computed(() => {
         const parent = this.parentKey();
@@ -1910,19 +1813,19 @@ class AppMenuitem {
             Promise.resolve(null).then(() => {
                 const currentKey = this.key();
                 if (value.routeEvent) {
-                    this.active.set(value.key === currentKey ||
+                    this._active.set(value.key === currentKey ||
                         value.key?.startsWith(currentKey + '-'));
                 }
                 else if (value.key !== currentKey &&
                     !value.key?.startsWith(currentKey + '-')) {
-                    this.active.set(false);
+                    this._active.set(false);
                 }
             });
         });
         // Subscribe to menu reset
         this.layoutService.resetSource$
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.active.set(false));
+            .subscribe(() => this._active.set(false));
         // Subscribe to navigation events
         this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
@@ -1961,7 +1864,7 @@ class AppMenuitem {
     }
     itemClick() {
         if (this.item().children) {
-            this.active.update((prev) => !prev);
+            this._active.update((prev) => !prev);
         }
         this.layoutService.onMenuStateChange({ key: this.key() });
     }
@@ -2022,11 +1925,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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }] });
+  `, 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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{ selector: '[app-menuitem]', standalone: true, imports: [IconComponent, RouterModule, RippleModule], template: `
+            args: [{ selector: '[app-menuitem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
     <ng-container>
       @if (item().children?.length) {
         <a (click)="itemClick()" tabindex="0" pRipple>
@@ -2112,13 +2015,13 @@ class AppMenu {
         <li app-menuitem [item]="item" [index]="i"></li>
       }
     </ul>
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-menu',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenuitem, RouterModule],
                     template: `<div class="layout-menu">
     <ul>
@@ -2140,13 +2043,13 @@ class AppSidebar {
     <div class="layout-sidebar">
       <app-menu />
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sidebar',
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenu],
                     template: `
     <div class="layout-sidebar">
@@ -2163,8 +2066,6 @@ class AppLayout {
     renderer = inject(Renderer2);
     router = inject(Router);
     menuOutsideClickListener = null;
-    appSidebar;
-    appTopBar;
     constructor() {
         this.layoutService.overlayOpen$
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -2194,12 +2095,11 @@ class AppLayout {
             topbarEl?.contains(eventTarget));
     }
     hideMenu() {
-        this.layoutService.layoutState.update((prev) => ({
-            ...prev,
+        this.layoutService.updateLayoutState({
             overlayMenuActive: false,
             staticMenuMobileActive: false,
             menuHoverActive: false,
-        }));
+        });
         if (this.menuOutsideClickListener) {
             this.menuOutsideClickListener();
             this.menuOutsideClickListener = null;
@@ -2212,7 +2112,7 @@ class AppLayout {
     unblockBodyScroll() {
         this.document.body.classList.remove('blocked-scroll');
     }
-    get containerClass() {
+    containerClass = computed(() => {
         const config = this.layoutService.layoutConfig();
         const state = this.layoutService.layoutState();
         return {
@@ -2222,10 +2122,10 @@ class AppLayout {
             'layout-overlay-active': state.overlayMenuActive,
             'layout-mobile-active': state.staticMenuMobileActive,
         };
-    }
+    }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppLayout, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebar, descendants: true }, { propertyName: "appTopBar", first: true, predicate: AppTopbar, descendants: true }], ngImport: i0, template: `
-    <div class="layout-wrapper" [ngClass]="containerClass">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    <div class="layout-wrapper" [ngClass]="containerClass()">
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2236,16 +2136,16 @@ class AppLayout {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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$2.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: "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$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    standalone: true,
-                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppFooter],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
-    <div class="layout-wrapper" [ngClass]="containerClass">
+    <div class="layout-wrapper" [ngClass]="containerClass()">
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2258,50 +2158,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { appSidebar: [{
-                type: ViewChild,
-                args: [AppSidebar]
-            }], appTopBar: [{
-                type: ViewChild,
-                args: [AppTopbar]
-            }] } });
+        }], ctorParameters: () => [] });
 
-const GreenTheme = definePreset(Material, {
+const NavyBlueTheme = definePreset(Material, {
     semantic: {
         colorScheme: {
             light: {
                 primary: {
-                    color: '#01712c',
-                    inverseColor: '#119744',
-                    hoverColor: '#119744',
-                    activeColor: '#119744',
+                    color: '#3535cd',
+                    inverseColor: '#0707a9',
+                    hoverColor: '#0707a9',
+                    activeColor: '#0707a9',
                 },
                 highlight: {
                     background: '#e2e8f0',
                     focusBackground: '#e2e8f0',
-                    color: '#01712c',
-                    focusColor: '#01712c',
+                    color: '#3535cd',
+                    focusColor: '#3535cd',
                 },
             },
         },
     },
 });
 
-const NavyBlueTheme = definePreset(Material, {
+const GreenTheme = definePreset(Material, {
     semantic: {
         colorScheme: {
             light: {
                 primary: {
-                    color: '#3535cd',
-                    inverseColor: '#0707a9',
-                    hoverColor: '#0707a9',
-                    activeColor: '#0707a9',
+                    color: '#01712c',
+                    inverseColor: '#119744',
+                    hoverColor: '#119744',
+                    activeColor: '#119744',
                 },
                 highlight: {
                     background: '#e2e8f0',
                     focusBackground: '#e2e8f0',
-                    color: '#3535cd',
-                    focusColor: '#3535cd',
+                    color: '#01712c',
+                    focusColor: '#01712c',
                 },
             },
         },