@gnggln/ng-ui-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/fesm2022/gnggln-ng-ui-system-layout-builder.mjs

@@ -0,0 +1,2064 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostListener } from '@angular/core';
+import { Router, NavigationEnd, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i1 from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
+import { BehaviorSubject, filter } from 'rxjs';
+
+/**
+ * Central service for programmatic control of the `ui-layout-builder` shell.
+ *
+ * Provides reactive state management for:
+ * - Overlay loader (with body scroll locking)
+ * - Sidebar open / collapsed state
+ * - Context-sensitive FAB actions
+ * - Navigation badge and visibility overrides
+ * - Layout mode switching (sidebar / topbar / slotted)
+ * - Content type (fluid / boxed / fullscreen)
+ * - Topbar bar visibility (notification bars show/hide)
+ *
+ * @example
+ * ```typescript
+ * export class MyPageComponent {
+ *   private layout = inject(UiLayoutService);
+ *
+ *   async loadData() {
+ *     this.layout.showLoader();
+ *     try {
+ *       await this.api.fetchAll();
+ *     } finally {
+ *       this.layout.hideLoader();
+ *     }
+ *   }
+ * }
+ * ```
+ */
+class UiLayoutService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        // ── Loader ───────────────────────────────────────────────────────
+        this._loading$ = new BehaviorSubject(false);
+        /** Whether the overlay loader is currently visible. */
+        this.loading$ = this._loading$.asObservable();
+        // ── Layout Mode ─────────────────────────────────────────────────
+        this._layoutMode$ = new BehaviorSubject('sidebar');
+        /** Current layout mode (sidebar or topbar). */
+        this.layoutMode$ = this._layoutMode$.asObservable();
+        // ── Content Type ────────────────────────────────────────────────
+        this._contentType$ = new BehaviorSubject('fluid');
+        /** Current content type (fluid, boxed, fullscreen). */
+        this.contentType$ = this._contentType$.asObservable();
+        // ── Sidebar ──────────────────────────────────────────────────────
+        this._sidebarOpen$ = new BehaviorSubject(false);
+        /** Whether the mobile sidebar drawer is open. */
+        this.sidebarOpen$ = this._sidebarOpen$.asObservable();
+        this._sidebarCollapsed$ = new BehaviorSubject(false);
+        /** Whether the desktop sidebar is in collapsed (icon-only) mode. */
+        this.sidebarCollapsed$ = this._sidebarCollapsed$.asObservable();
+        // ── FAB (context-sensitive) ──────────────────────────────────────
+        this._defaultFabConfig = null;
+        this._fabConfig$ = new BehaviorSubject(null);
+        /** Current FAB configuration (schema default merged with page overrides). */
+        this.fabConfig$ = this._fabConfig$.asObservable();
+        // ── Navigation helpers ───────────────────────────────────────────
+        this._navBadges$ = new BehaviorSubject(new Map());
+        /** Observable map of nav-item badges keyed by item ID. */
+        this.navBadges$ = this._navBadges$.asObservable();
+        this._navVisibility$ = new BehaviorSubject(new Map());
+        /** Observable map of nav-item visibility overrides keyed by item ID. */
+        this.navVisibility$ = this._navVisibility$.asObservable();
+        // ── Bar visibility (topbar notification bars) ───────────────────
+        this._barVisibility$ = new BehaviorSubject(new Map());
+        /** Observable map of topbar bar visibility keyed by bar ID. */
+        this.barVisibility$ = this._barVisibility$.asObservable();
+    }
+    /** Show the full-screen overlay loader and block body scroll. */
+    showLoader() {
+        this._loading$.next(true);
+        this.setBodyOverflow(true);
+    }
+    /** Hide the overlay loader and restore body scroll. */
+    hideLoader() {
+        this._loading$.next(false);
+        this.setBodyOverflow(false);
+    }
+    /** Toggle the overlay loader. */
+    toggleLoader() {
+        if (this._loading$.value) {
+            this.hideLoader();
+        }
+        else {
+            this.showLoader();
+        }
+    }
+    /** Synchronous snapshot of the loading state. */
+    isLoading() {
+        return this._loading$.value;
+    }
+    /**
+     * Switch layout mode with loader masking the transition.
+     * Shows the loader, applies the mode change, then hides the loader
+     * after a short delay to prevent visible layout shift.
+     */
+    setLayoutMode(mode, transitionMs = 300) {
+        if (this._layoutMode$.value === mode)
+            return;
+        this.showLoader();
+        this._layoutMode$.next(mode);
+        setTimeout(() => this.hideLoader(), transitionMs);
+    }
+    /** Synchronous snapshot of the current layout mode. */
+    getLayoutMode() {
+        return this._layoutMode$.value;
+    }
+    /**
+     * @internal Called by the layout-builder component to set the initial mode
+     * from the schema without triggering the loader transition.
+     */
+    _setInitialLayoutMode(mode) {
+        this._layoutMode$.next(mode);
+    }
+    /** Set the content type per-route or globally. */
+    setContentType(type) {
+        this._contentType$.next(type);
+    }
+    /** Synchronous snapshot of the current content type. */
+    getContentType() {
+        return this._contentType$.value;
+    }
+    /** @internal */
+    _setInitialContentType(type) {
+        this._contentType$.next(type);
+    }
+    /** Toggle the desktop sidebar between expanded and collapsed. */
+    toggleSidebar() {
+        this._sidebarCollapsed$.next(!this._sidebarCollapsed$.value);
+    }
+    /** Set the desktop sidebar collapsed state explicitly. */
+    collapseSidebar(collapsed = true) {
+        this._sidebarCollapsed$.next(collapsed);
+    }
+    /** Open the mobile sidebar drawer. */
+    openMobileSidebar() {
+        this._sidebarOpen$.next(true);
+    }
+    /** Close the mobile sidebar drawer. */
+    closeMobileSidebar() {
+        this._sidebarOpen$.next(false);
+    }
+    /** Synchronous snapshot: is the mobile sidebar open? */
+    isSidebarOpen() {
+        return this._sidebarOpen$.value;
+    }
+    /** Synchronous snapshot: is the desktop sidebar collapsed? */
+    isSidebarCollapsed() {
+        return this._sidebarCollapsed$.value;
+    }
+    /**
+     * Called internally by the layout-builder component to register the
+     * schema-level default FAB config.
+     * @internal
+     */
+    _setDefaultFabConfig(config) {
+        this._defaultFabConfig = config;
+        this._fabConfig$.next(config);
+    }
+    /** Override the FAB main action for the current page context. */
+    setMainFabAction(action) {
+        const current = this._fabConfig$.value;
+        this._fabConfig$.next({
+            mainAction: action,
+            secondaryActions: current?.secondaryActions ?? [],
+            position: current?.position ?? 'bottom-right',
+        });
+    }
+    /** Override all FAB actions for the current page context. */
+    setFabActions(main, secondary) {
+        const current = this._fabConfig$.value;
+        this._fabConfig$.next({
+            mainAction: main,
+            secondaryActions: secondary ?? [],
+            position: current?.position ?? 'bottom-right',
+        });
+    }
+    /** Reset FAB to the schema-level default configuration. */
+    clearFabActions() {
+        this._fabConfig$.next(this._defaultFabConfig);
+    }
+    /** Set or clear a badge on a navigation item. Pass `null` to remove. */
+    setNavBadge(itemId, badge) {
+        const map = new Map(this._navBadges$.value);
+        if (badge === null) {
+            map.delete(itemId);
+        }
+        else {
+            map.set(itemId, badge);
+        }
+        this._navBadges$.next(map);
+    }
+    /** Override visibility of a navigation item. */
+    setNavItemVisibility(itemId, visible) {
+        const map = new Map(this._navVisibility$.value);
+        map.set(itemId, visible);
+        this._navVisibility$.next(map);
+    }
+    /** Show a topbar bar by ID. */
+    showBar(barId) {
+        const map = new Map(this._barVisibility$.value);
+        map.set(barId, true);
+        this._barVisibility$.next(map);
+    }
+    /** Hide a topbar bar by ID. */
+    hideBar(barId) {
+        const map = new Map(this._barVisibility$.value);
+        map.set(barId, false);
+        this._barVisibility$.next(map);
+    }
+    /** Toggle visibility of a topbar bar by ID. */
+    toggleBar(barId) {
+        const map = new Map(this._barVisibility$.value);
+        const current = map.get(barId);
+        map.set(barId, current === undefined ? false : !current);
+        this._barVisibility$.next(map);
+    }
+    /** Synchronous check of bar visibility (schema `visible` fallback). */
+    isBarVisible(barId, schemaVisible = true) {
+        const override = this._barVisibility$.value.get(barId);
+        return override !== undefined ? override : schemaVisible;
+    }
+    // ── Private helpers ──────────────────────────────────────────────
+    setBodyOverflow(locked) {
+        if (isPlatformBrowser(this.platformId)) {
+            document.body.style.overflow = locked ? 'hidden' : '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Schema-driven application shell that materializes a full responsive layout
+ * from a single `UiLayoutSchema` descriptor.
+ *
+ * Features:
+ * - Two layout modes: sidebar (collapsible) and topbar (multi-bar stack)
+ * - Programmatic mode switching with loader masking
+ * - Content type: fluid, boxed, fullscreen
+ * - Speed-dial FAB with context-sensitive actions
+ * - Overlay loader with body-scroll locking
+ * - Auto-derived breadcrumbs from navigation schema
+ * - Skip-to-content link and full keyboard navigation
+ *
+ * @selector ui-layout-builder
+ *
+ * @example
+ * ```html
+ * <ui-layout-builder [schema]="layoutSchema" />
+ * ```
+ */
+class UiLayoutBuilderComponent {
+    constructor() {
+        this.layoutService = inject(UiLayoutService);
+        this.router = inject(Router);
+        this.cdr = inject(ChangeDetectorRef);
+        this.subs = [];
+        this.currentUrl = '';
+        this.expandedIds = new Set();
+        this.fabOpen = false;
+        this.currentFabConfig = null;
+        this.loading = false;
+        this.sidebarOpen = false;
+        this.sidebarCollapsed = false;
+        this.layoutMode = 'sidebar';
+        this.contentType = 'fluid';
+        this.contentTransitioning = false;
+        this.breadcrumbs = [];
+        this.userDropdownOpen = false;
+        this.hnavDropdownId = null;
+        this.navBadges = new Map();
+        this.navVisibility = new Map();
+        this.barVisibility = new Map();
+    }
+    /** Resolved page title from the last breadcrumb. */
+    get pageTitle() {
+        if (!this.breadcrumbs.length)
+            return '';
+        return this.breadcrumbs[this.breadcrumbs.length - 1].label;
+    }
+    /** Items flagged for the mobile bottom navigation bar (max 5). */
+    get bottomNavItems() {
+        if (!this.schema.navigation)
+            return [];
+        return this.schema.navigation.items
+            .filter((i) => i.bottomNav && !this.isItemHidden(i) && i.route)
+            .sort((a, b) => (a.bottomNavOrder ?? 99) - (b.bottomNavOrder ?? 99))
+            .slice(0, 5);
+    }
+    get mobileMode() {
+        return this.schema.navigation?.mobileMode || 'both';
+    }
+    /** Topbar bars filtered by visibility (schema default + service overrides). */
+    get visibleBars() {
+        if (!this.schema.topbar?.bars)
+            return [];
+        return this.schema.topbar.bars.filter((bar) => this.layoutService.isBarVisible(bar.id, bar.visible !== false));
+    }
+    ngOnInit() {
+        this.currentUrl = this.router.url;
+        this.autoExpandFromUrl(this.currentUrl);
+        if (this.schema.mode) {
+            this.layoutService._setInitialLayoutMode(this.schema.mode);
+        }
+        if (this.schema.contentType) {
+            this.layoutService._setInitialContentType(this.schema.contentType);
+        }
+        if (this.schema.fab) {
+            this.layoutService._setDefaultFabConfig(this.schema.fab);
+        }
+        if (this.schema.loader?.showOnInit) {
+            this.layoutService.showLoader();
+        }
+        this.breadcrumbs = this.computeBreadcrumbs(this.currentUrl);
+        this.subs.push(this.layoutService.loading$.subscribe((v) => {
+            this.loading = v;
+            this.cdr.markForCheck();
+        }), this.layoutService.sidebarOpen$.subscribe((v) => {
+            this.sidebarOpen = v;
+            this.cdr.markForCheck();
+        }), this.layoutService.sidebarCollapsed$.subscribe((v) => {
+            this.sidebarCollapsed = v;
+            this.cdr.markForCheck();
+        }), this.layoutService.fabConfig$.subscribe((config) => {
+            this.currentFabConfig = config;
+            this.cdr.markForCheck();
+        }), this.layoutService.navBadges$.subscribe((m) => {
+            this.navBadges = m;
+            this.cdr.markForCheck();
+        }), this.layoutService.navVisibility$.subscribe((m) => {
+            this.navVisibility = m;
+            this.cdr.markForCheck();
+        }), this.layoutService.layoutMode$.subscribe((mode) => {
+            this.layoutMode = mode;
+            this.cdr.markForCheck();
+        }), this.layoutService.contentType$.subscribe((type) => {
+            this.contentType = type;
+            this.cdr.markForCheck();
+        }), this.layoutService.barVisibility$.subscribe((m) => {
+            this.barVisibility = m;
+            this.cdr.markForCheck();
+        }), this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd))
+            .subscribe((e) => {
+            this.currentUrl = e.urlAfterRedirects;
+            this.autoExpandFromUrl(this.currentUrl);
+            this.layoutService.closeMobileSidebar();
+            this.breadcrumbs = this.computeBreadcrumbs(this.currentUrl);
+            this.contentTransitioning = true;
+            this.userDropdownOpen = false;
+            this.hnavDropdownId = null;
+            if (this.schema.loader?.showOnInit && this.layoutService.isLoading()) {
+                const hide = () => this.layoutService.hideLoader();
+                const minDuration = this.schema.loader.minDuration ?? 0;
+                if (minDuration > 0) {
+                    setTimeout(hide, minDuration);
+                }
+                else {
+                    hide();
+                }
+            }
+            this.cdr.markForCheck();
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.forEach((s) => s.unsubscribe());
+    }
+    onEscape() {
+        if (this.fabOpen) {
+            this.fabOpen = false;
+        }
+        if (this.userDropdownOpen) {
+            this.userDropdownOpen = false;
+        }
+        if (this.hnavDropdownId) {
+            this.hnavDropdownId = null;
+        }
+        if (this.sidebarOpen) {
+            this.layoutService.closeMobileSidebar();
+        }
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (this.userDropdownOpen && !target.closest('.ui-layout__user-dropdown')) {
+            this.userDropdownOpen = false;
+            this.cdr.markForCheck();
+        }
+        if (this.hnavDropdownId && !target.closest('.ui-layout__hnav-dropdown')) {
+            this.hnavDropdownId = null;
+            this.cdr.markForCheck();
+        }
+    }
+    // ── Navigation helpers ──────────────────────────────────────────
+    getItemsForSection(section) {
+        if (!this.schema.navigation)
+            return [];
+        const idSet = new Set(section.itemIds);
+        return this.schema.navigation.items.filter((i) => idSet.has(i.id));
+    }
+    isItemHidden(item) {
+        const override = this.navVisibility.get(item.id);
+        if (override !== undefined)
+            return !override;
+        return item.hidden ?? false;
+    }
+    getItemBadge(item) {
+        return this.navBadges.get(item.id) ?? item.badge ?? null;
+    }
+    isParentActive(item) {
+        if (!item.route)
+            return false;
+        return this.currentUrl === item.route || this.currentUrl.startsWith(item.route + '/');
+    }
+    isRouteActive(item) {
+        if (!item.route)
+            return false;
+        if (item.routeActiveExact)
+            return this.currentUrl === item.route;
+        return this.currentUrl === item.route || this.currentUrl.startsWith(item.route + '/');
+    }
+    toggleExpand(item) {
+        if (this.expandedIds.has(item.id)) {
+            this.expandedIds.delete(item.id);
+        }
+        else {
+            this.expandedIds.add(item.id);
+            if (!this.isParentActive(item) && item.children?.length) {
+                const firstChild = item.children[0]?.items[0];
+                if (firstChild?.route) {
+                    this.router.navigateByUrl(firstChild.route);
+                }
+            }
+        }
+    }
+    onNavClick() {
+        this.layoutService.closeMobileSidebar();
+    }
+    // ── FAB ─────────────────────────────────────────────────────────
+    onFabMainClick() {
+        if (this.currentFabConfig?.secondaryActions?.length) {
+            this.fabOpen = !this.fabOpen;
+        }
+        else {
+            this.currentFabConfig?.mainAction.action?.();
+        }
+    }
+    onFabAction(action) {
+        this.fabOpen = false;
+        action.action?.();
+    }
+    // ── Topbar helpers ──────────────────────────────────────────────
+    getTopbarNavItems(bar) {
+        return bar.navigation?.items ?? this.schema.navigation?.items ?? [];
+    }
+    toggleHnavDropdown(itemId) {
+        this.hnavDropdownId = this.hnavDropdownId === itemId ? null : itemId;
+    }
+    dismissBar(barId) {
+        this.layoutService.hideBar(barId);
+    }
+    onDropdownAction(item) {
+        this.userDropdownOpen = false;
+        item.action?.();
+    }
+    // ── Breadcrumb derivation from nav schema ───────────────────────
+    /**
+     * Derives breadcrumbs by matching the current URL against the
+     * navigation schema. Walks top-level items, sections, and children
+     * to build a trail from root to current page.
+     */
+    computeBreadcrumbs(url) {
+        if (!this.schema.navigation)
+            return [];
+        const items = this.schema.navigation.items;
+        const sections = this.schema.navigation.sections;
+        for (const item of items) {
+            if (item.type === 'divider' || item.type === 'external')
+                continue;
+            if (item.children?.length) {
+                for (const group of item.children) {
+                    for (const child of group.items) {
+                        if (child.route && this.urlMatches(url, child.route, child.routeActiveExact)) {
+                            const trail = [];
+                            const sectionLabel = this.findSectionLabel(item.id, sections);
+                            if (sectionLabel) {
+                                trail.push({ label: sectionLabel, isLast: false });
+                            }
+                            trail.push({ label: item.label, url: item.route, isLast: false });
+                            trail.push({ label: child.label, isLast: true });
+                            return trail;
+                        }
+                    }
+                }
+            }
+            if (item.route && this.urlMatches(url, item.route, item.routeActiveExact)) {
+                const trail = [];
+                const sectionLabel = this.findSectionLabel(item.id, sections);
+                if (sectionLabel) {
+                    trail.push({ label: sectionLabel, isLast: false });
+                }
+                trail.push({ label: item.label, isLast: true });
+                return trail;
+            }
+        }
+        return [];
+    }
+    urlMatches(current, route, exact) {
+        if (exact)
+            return current === route;
+        return current === route || current.startsWith(route + '/');
+    }
+    findSectionLabel(itemId, sections) {
+        if (!sections?.length)
+            return null;
+        const section = sections.find((s) => s.itemIds.includes(itemId));
+        return section?.label ?? null;
+    }
+    autoExpandFromUrl(url) {
+        if (!this.schema.navigation)
+            return;
+        for (const item of this.schema.navigation.items) {
+            if (item.children && item.route && (url === item.route || url.startsWith(item.route + '/'))) {
+                this.expandedIds.add(item.id);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiLayoutBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiLayoutBuilderComponent, isStandalone: true, selector: "ui-layout-builder", inputs: { schema: "schema" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event)" }, classAttribute: "ui-layout-builder-host" }, ngImport: i0, template: `
+    <!-- Skip to content (a11y) -->
+    <a class="ui-layout__skip-link" href="#ui-layout-main">
+      Vai al contenuto principale
+    </a>
+
+    <div
+      class="ui-layout"
+      [class.ui-layout--sidebar-collapsed]="layoutMode === 'sidebar' && sidebarCollapsed"
+      [class.ui-layout--topbar]="layoutMode === 'topbar'"
+      [class.ui-layout--slotted]="layoutMode === 'slotted'"
+    >
+      <!-- ─── Overlay Loader ─────────────────────────────────────── -->
+      @if (loading) {
+        <div
+          class="ui-layout__loader-overlay"
+          role="alert"
+          aria-live="assertive"
+          aria-label="Caricamento in corso"
+        >
+          <div class="ui-layout__loader-spinner" aria-hidden="true">
+            <svg viewBox="0 0 50 50" class="ui-layout__loader-svg">
+              <circle cx="25" cy="25" r="20" fill="none" stroke-width="4" />
+            </svg>
+          </div>
+        </div>
+      }
+
+      @switch (layoutMode) {
+        <!-- ════════════════════════════════════════════════════════ -->
+        <!-- ═══ SIDEBAR MODE ═════════════════════════════════════ -->
+        <!-- ════════════════════════════════════════════════════════ -->
+        @case ('sidebar') {
+          <!-- Mobile Top Bar -->
+          <header class="ui-layout__topbar">
+            <button
+              class="ui-layout__hamburger"
+              (click)="layoutService.openMobileSidebar()"
+              aria-label="Apri navigazione"
+            >
+              <span class="ui-layout__hamburger-line"></span>
+              <span class="ui-layout__hamburger-line"></span>
+              <span class="ui-layout__hamburger-line"></span>
+            </button>
+            @if (schema.header?.logo) {
+              @if (schema.header?.logo?.src) {
+                <img
+                  class="ui-layout__topbar-logo-img"
+                  [src]="schema.header?.logo?.src"
+                  [alt]="schema.header?.logo?.alt || schema.header?.title"
+                />
+              } @else if (schema.header?.logo?.text) {
+                <span class="ui-layout__topbar-logo">{{ schema.header?.logo?.text }}</span>
+              }
+            }
+            <span class="ui-layout__topbar-title">{{ schema.header?.title }}</span>
+          </header>
+
+          <!-- Mobile Backdrop -->
+          @if (sidebarOpen) {
+            <div
+              class="ui-layout__backdrop"
+              (click)="layoutService.closeMobileSidebar()"
+              aria-hidden="true"
+            ></div>
+          }
+
+          <!-- Body (sidebar + content) -->
+          <div class="ui-layout__body">
+            <aside
+              class="ui-layout__sidebar"
+              [class.ui-layout__sidebar--collapsed]="sidebarCollapsed"
+              [class.ui-layout__sidebar--open]="sidebarOpen"
+              role="navigation"
+              aria-label="Navigazione principale"
+            >
+              <div class="ui-layout__sidebar-header">
+                <div class="ui-layout__sidebar-brand">
+                  @if (schema.header?.logo) {
+                    @if (schema.header?.logo?.src) {
+                      <img
+                        class="ui-layout__sidebar-logo-img"
+                        [src]="schema.header?.logo?.src"
+                        [alt]="schema.header?.logo?.alt || schema.header?.title"
+                      />
+                    } @else if (schema.header?.logo?.text) {
+                      <span class="ui-layout__sidebar-logo">{{ schema.header?.logo?.text }}</span>
+                    }
+                  }
+                  @if (!sidebarCollapsed || sidebarOpen) {
+                    <span class="ui-layout__sidebar-title">{{ schema.header?.title }}</span>
+                  }
+                </div>
+
+                @if (schema.navigation?.collapsible !== false) {
+                  <button
+                    class="ui-layout__collapse-btn ui-layout__desktop-only"
+                    (click)="layoutService.toggleSidebar()"
+                    [attr.aria-label]="sidebarCollapsed ? 'Espandi sidebar' : 'Comprimi sidebar'"
+                  >
+                    <lucide-icon
+                      name="chevrons-left"
+                      [size]="16"
+                      class="ui-layout__collapse-icon"
+                      aria-hidden="true"
+                    />
+                  </button>
+                }
+
+                <button
+                  class="ui-layout__close-btn ui-layout__mobile-only"
+                  (click)="layoutService.closeMobileSidebar()"
+                  aria-label="Chiudi navigazione"
+                >
+                  <lucide-icon name="x" [size]="16" aria-hidden="true" />
+                </button>
+              </div>
+
+              @if (!sidebarCollapsed || sidebarOpen) {
+                <nav class="ui-layout__sidebar-nav">
+                  @if (schema.navigation?.sections?.length) {
+                    @for (section of schema.navigation?.sections || []; track section.id) {
+                      <div class="ui-layout__nav-section">
+                        <span class="ui-layout__nav-section-title">{{ section.label }}</span>
+                        @for (item of getItemsForSection(section); track item.id) {
+                          @if (!isItemHidden(item)) {
+                            <ng-container
+                              *ngTemplateOutlet="navItemTpl; context: { $implicit: item }"
+                            />
+                          }
+                        }
+                      </div>
+                    }
+                  } @else {
+                    <div class="ui-layout__nav-section">
+                      @for (item of schema.navigation?.items || []; track item.id) {
+                        @if (!isItemHidden(item)) {
+                          <ng-container
+                            *ngTemplateOutlet="navItemTpl; context: { $implicit: item }"
+                          />
+                        }
+                      }
+                    </div>
+                  }
+                </nav>
+              }
+            </aside>
+
+            <!-- Main content area -->
+            <main
+              class="ui-layout__content"
+              [class.ui-layout__content--boxed]="contentType === 'boxed'"
+              [class.ui-layout__content--fullscreen]="contentType === 'fullscreen'"
+              [class.ui-layout__content--transitioning]="contentTransitioning"
+              (animationend)="contentTransitioning = false"
+              id="ui-layout-main"
+              tabindex="-1"
+            >
+              <div class="ui-layout__content-inner" [class.ui-layout__content-inner--boxed]="contentType === 'boxed'">
+                <ng-container *ngTemplateOutlet="pageHeaderTpl" />
+                <router-outlet />
+              </div>
+            </main>
+          </div>
+        }
+
+        <!-- ════════════════════════════════════════════════════════ -->
+        <!-- ═══ TOPBAR MODE ══════════════════════════════════════ -->
+        <!-- ════════════════════════════════════════════════════════ -->
+        @case ('topbar') {
+          <!-- Bar stack -->
+          <div class="ui-layout__bar-stack">
+            @for (bar of visibleBars; track bar.id) {
+              @switch (bar.type) {
+                @case ('notification') {
+                  @if (bar.notification) {
+                    <div
+                      class="ui-layout__bar ui-layout__bar--notification"
+                      [class]="'ui-layout__bar--notification-' + (bar.notification.variant || 'primary')"
+                      role="alert"
+                    >
+                      @if (bar.notification.icon) {
+                        <lucide-icon [name]="bar.notification.icon" [size]="16" aria-hidden="true" />
+                      }
+                      <span class="ui-layout__bar-text">{{ bar.notification.text }}</span>
+                      @if (bar.notification.dismissible !== false) {
+                        <button
+                          class="ui-layout__bar-dismiss"
+                          (click)="dismissBar(bar.id)"
+                          aria-label="Chiudi notifica"
+                        >
+                          <lucide-icon name="x" [size]="14" aria-hidden="true" />
+                        </button>
+                      }
+                    </div>
+                  }
+                }
+
+                @case ('brand') {
+                  @if (bar.brand; as brand) {
+                    <div class="ui-layout__bar ui-layout__bar--brand">
+                      <div class="ui-layout__bar-brand-left">
+                        <button
+                          class="ui-layout__hamburger ui-layout__topbar-hamburger"
+                          (click)="layoutService.openMobileSidebar()"
+                          aria-label="Apri navigazione"
+                        >
+                          <span class="ui-layout__hamburger-line"></span>
+                          <span class="ui-layout__hamburger-line"></span>
+                          <span class="ui-layout__hamburger-line"></span>
+                        </button>
+                        @if (brand.logo; as logo) {
+                          @if (logo.src) {
+                            <img
+                              class="ui-layout__bar-logo-img"
+                              [src]="logo.src"
+                              [alt]="logo.alt || brand.title || ''"
+                            />
+                          } @else if (logo.text) {
+                            <span class="ui-layout__bar-logo">{{ logo.text }}</span>
+                          }
+                        }
+                        @if (brand.title; as brandTitle) {
+                          <span class="ui-layout__bar-title">{{ brandTitle }}</span>
+                        }
+                      </div>
+                      @if (brand.userDropdown; as dropdown) {
+                        <div class="ui-layout__user-dropdown">
+                          <button
+                            class="ui-layout__user-dropdown-trigger"
+                            (click)="userDropdownOpen = !userDropdownOpen"
+                            [attr.aria-expanded]="userDropdownOpen"
+                            aria-haspopup="true"
+                          >
+                            @if (dropdown.avatar?.src) {
+                              <img
+                                class="ui-layout__user-avatar"
+                                [src]="dropdown.avatar!.src"
+                                [alt]="dropdown.avatar!.alt || dropdown.label"
+                              />
+                            } @else {
+                              <lucide-icon
+                                [name]="dropdown.icon || 'user'"
+                                [size]="18"
+                                aria-hidden="true"
+                              />
+                            }
+                            <span class="ui-layout__user-label">{{ dropdown.label }}</span>
+                            <lucide-icon name="chevron-down" [size]="14" aria-hidden="true" class="ui-layout__user-chevron" />
+                          </button>
+                          @if (userDropdownOpen) {
+                            <div class="ui-layout__user-dropdown-menu" role="menu">
+                              @for (dItem of dropdown.items; track dItem.id) {
+                                @if (dItem.divider) {
+                                  <hr class="ui-layout__user-dropdown-divider" />
+                                }
+                                @if (dItem.route) {
+                                  <a
+                                    class="ui-layout__user-dropdown-item"
+                                    [routerLink]="dItem.route"
+                                    role="menuitem"
+                                    (click)="userDropdownOpen = false"
+                                  >
+                                    @if (dItem.icon) {
+                                      <lucide-icon [name]="dItem.icon" [size]="16" aria-hidden="true" />
+                                    }
+                                    {{ dItem.label }}
+                                  </a>
+                                } @else {
+                                  <button
+                                    class="ui-layout__user-dropdown-item"
+                                    role="menuitem"
+                                    (click)="onDropdownAction(dItem)"
+                                  >
+                                    @if (dItem.icon) {
+                                      <lucide-icon [name]="dItem.icon" [size]="16" aria-hidden="true" />
+                                    }
+                                    {{ dItem.label }}
+                                  </button>
+                                }
+                              }
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                }
+
+                @case ('navigation') {
+                  <nav class="ui-layout__bar ui-layout__bar--navigation" role="navigation" aria-label="Navigazione principale">
+                    @for (item of getTopbarNavItems(bar); track item.id) {
+                      @if (!isItemHidden(item)) {
+                        @if (item.children?.length) {
+                          <div class="ui-layout__hnav-dropdown" [class.ui-layout__hnav-dropdown--open]="hnavDropdownId === item.id">
+                            <button
+                              class="ui-layout__hnav-link ui-layout__hnav-link--parent"
+                              [class.ui-layout__hnav-link--active]="isParentActive(item)"
+                              (click)="toggleHnavDropdown(item.id)"
+                              [attr.aria-expanded]="hnavDropdownId === item.id"
+                            >
+                              @if (item.icon) {
+                                <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+                              }
+                              <span>{{ item.label }}</span>
+                              <lucide-icon name="chevron-down" [size]="14" aria-hidden="true" class="ui-layout__hnav-chevron" />
+                            </button>
+                            @if (hnavDropdownId === item.id) {
+                              <div class="ui-layout__hnav-dropdown-menu">
+                                @for (group of item.children; track group.label) {
+                                  <span class="ui-layout__hnav-dropdown-label">{{ group.label }}</span>
+                                  @for (child of group.items; track child.id) {
+                                    @if (!isItemHidden(child)) {
+                                      <a
+                                        class="ui-layout__hnav-dropdown-item"
+                                        [routerLink]="child.route"
+                                        routerLinkActive="ui-layout__hnav-dropdown-item--active"
+                                        (click)="hnavDropdownId = null; onNavClick()"
+                                      >
+                                        {{ child.label }}
+                                      </a>
+                                    }
+                                  }
+                                }
+                              </div>
+                            }
+                          </div>
+                        } @else if (item.type === 'external') {
+                          <a
+                            class="ui-layout__hnav-link"
+                            [href]="item.href"
+                            [target]="item.target || '_blank'"
+                            [attr.rel]="item.target === '_blank' ? 'noopener noreferrer' : null"
+                          >
+                            @if (item.icon) {
+                              <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+                            }
+                            <span>{{ item.label }}</span>
+                            <lucide-icon name="external-link" [size]="12" aria-hidden="true" />
+                          </a>
+                        } @else if (item.type !== 'divider') {
+                          <a
+                            class="ui-layout__hnav-link"
+                            [routerLink]="item.route"
+                            routerLinkActive="ui-layout__hnav-link--active"
+                            [routerLinkActiveOptions]="{ exact: item.routeActiveExact || false }"
+                          >
+                            @if (item.icon) {
+                              <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+                            }
+                            <span>{{ item.label }}</span>
+                            @if (getItemBadge(item)) {
+                              <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+                            }
+                          </a>
+                        }
+                      }
+                    }
+                  </nav>
+                }
+
+                @case ('links') {
+                  @if (bar.links) {
+                    <div
+                      class="ui-layout__bar ui-layout__bar--links"
+                      [style.justify-content]="bar.links.align === 'start' ? 'flex-start' : bar.links.align === 'center' ? 'center' : bar.links.align === 'space-between' ? 'space-between' : 'flex-end'"
+                    >
+                      @for (lnk of bar.links.items; track lnk.label || lnk.ariaLabel || $index) {
+                        @if (lnk.route) {
+                          <a class="ui-layout__bar-link" [routerLink]="lnk.route" [attr.aria-label]="lnk.ariaLabel || null">
+                            @if (lnk.icon) {
+                              <lucide-icon [name]="lnk.icon" [size]="14" aria-hidden="true" />
+                            }
+                            @if (lnk.label) {
+                              <span>{{ lnk.label }}</span>
+                            }
+                          </a>
+                        } @else if (lnk.href) {
+                          <a
+                            class="ui-layout__bar-link"
+                            [href]="lnk.href"
+                            [target]="lnk.target || '_self'"
+                            [attr.rel]="lnk.target === '_blank' ? 'noopener noreferrer' : null"
+                            [attr.aria-label]="lnk.ariaLabel || null"
+                          >
+                            @if (lnk.icon) {
+                              <lucide-icon [name]="lnk.icon" [size]="14" aria-hidden="true" />
+                            }
+                            @if (lnk.label) {
+                              <span>{{ lnk.label }}</span>
+                            }
+                          </a>
+                        }
+                      }
+                    </div>
+                  }
+                }
+              }
+            }
+          </div>
+
+          <!-- Mobile Backdrop (topbar mode) -->
+          @if (sidebarOpen) {
+            <div
+              class="ui-layout__backdrop ui-layout__backdrop--topbar"
+              (click)="layoutService.closeMobileSidebar()"
+              aria-hidden="true"
+            ></div>
+          }
+
+          <!-- Mobile drawer (topbar mode) -->
+          <aside
+            class="ui-layout__sidebar ui-layout__sidebar--topbar-drawer"
+            [class.ui-layout__sidebar--open]="sidebarOpen"
+            role="navigation"
+            aria-label="Navigazione principale"
+          >
+            <div class="ui-layout__sidebar-header">
+              <div class="ui-layout__sidebar-brand">
+                @if (schema.header?.logo) {
+                  @if (schema.header?.logo?.src) {
+                    <img class="ui-layout__sidebar-logo-img" [src]="schema.header?.logo?.src" [alt]="schema.header?.logo?.alt || schema.header?.title" />
+                  } @else if (schema.header?.logo?.text) {
+                    <span class="ui-layout__sidebar-logo">{{ schema.header?.logo?.text }}</span>
+                  }
+                }
+                <span class="ui-layout__sidebar-title">{{ schema.header?.title }}</span>
+              </div>
+              <button class="ui-layout__close-btn" (click)="layoutService.closeMobileSidebar()" aria-label="Chiudi navigazione">
+                <lucide-icon name="x" [size]="16" aria-hidden="true" />
+              </button>
+            </div>
+            <nav class="ui-layout__sidebar-nav">
+              @if (schema.navigation?.sections?.length) {
+                @for (section of schema.navigation?.sections || []; track section.id) {
+                  <div class="ui-layout__nav-section">
+                    <span class="ui-layout__nav-section-title">{{ section.label }}</span>
+                    @for (item of getItemsForSection(section); track item.id) {
+                      @if (!isItemHidden(item)) {
+                        <ng-container *ngTemplateOutlet="navItemTpl; context: { $implicit: item }" />
+                      }
+                    }
+                  </div>
+                }
+              } @else {
+                <div class="ui-layout__nav-section">
+                  @for (item of schema.navigation?.items || []; track item.id) {
+                    @if (!isItemHidden(item)) {
+                      <ng-container *ngTemplateOutlet="navItemTpl; context: { $implicit: item }" />
+                    }
+                  }
+                </div>
+              }
+            </nav>
+          </aside>
+
+          <!-- Main content area (topbar mode) -->
+          <main
+            class="ui-layout__content ui-layout__content--topbar"
+            [class.ui-layout__content--boxed]="contentType === 'boxed'"
+            [class.ui-layout__content--fullscreen]="contentType === 'fullscreen'"
+            [class.ui-layout__content--transitioning]="contentTransitioning"
+            (animationend)="contentTransitioning = false"
+            id="ui-layout-main"
+            tabindex="-1"
+          >
+            <div class="ui-layout__content-inner" [class.ui-layout__content-inner--boxed]="contentType === 'boxed'">
+              <ng-container *ngTemplateOutlet="pageHeaderTpl" />
+              <router-outlet />
+            </div>
+          </main>
+        }
+
+        @case ('slotted') {
+          <!-- Slotted Header -->
+          <header class="ui-layout__slotted-header">
+            <ng-content select="[uiLayoutHeader]" />
+          </header>
+
+          <!-- Main content area (slotted mode) -->
+          <main
+            class="ui-layout__content ui-layout__content--slotted"
+            [class.ui-layout__content--boxed]="contentType === 'boxed'"
+            [class.ui-layout__content--fullscreen]="contentType === 'fullscreen'"
+            [class.ui-layout__content--transitioning]="contentTransitioning"
+            (animationend)="contentTransitioning = false"
+            id="ui-layout-main"
+            tabindex="-1"
+          >
+            <div class="ui-layout__content-inner" [class.ui-layout__content-inner--boxed]="contentType === 'boxed'">
+              <ng-container *ngTemplateOutlet="pageHeaderTpl" />
+              <router-outlet />
+            </div>
+          </main>
+
+          <!-- Slotted Footer -->
+          <footer class="ui-layout__slotted-footer">
+            <ng-content select="[uiLayoutFooter]" />
+          </footer>
+        }
+      }
+
+      <!-- ─── Footer (sidebar/topbar only) ──────────────────────────── -->
+      @if (layoutMode !== 'slotted' && schema.footer) {
+        <footer class="ui-layout__footer">
+          @if (schema.footer.links?.length) {
+            <nav class="ui-layout__footer-links" aria-label="Link footer">
+              @for (link of schema.footer.links; track link.label) {
+                @if (link.route) {
+                  <a class="ui-layout__footer-link" [routerLink]="link.route">
+                    @if (link.icon) {
+                      <lucide-icon [name]="link.icon" [size]="14" aria-hidden="true" />
+                    }
+                    {{ link.label }}
+                  </a>
+                } @else if (link.href) {
+                  <a
+                    class="ui-layout__footer-link"
+                    [href]="link.href"
+                    [target]="link.target || '_self'"
+                    [attr.rel]="link.target === '_blank' ? 'noopener noreferrer' : null"
+                  >
+                    @if (link.icon) {
+                      <lucide-icon [name]="link.icon" [size]="14" aria-hidden="true" />
+                    }
+                    {{ link.label }}
+                  </a>
+                }
+              }
+            </nav>
+          }
+          @if (schema.footer.text) {
+            <span class="ui-layout__footer-text">{{ schema.footer.text }}</span>
+          }
+        </footer>
+      }
+
+      <!-- ─── Speed Dial FAB ─────────────────────────────────────── -->
+      @if (currentFabConfig) {
+        <div
+          class="ui-layout__fab"
+          [class.ui-layout__fab--open]="fabOpen"
+          [class.ui-layout__fab--bottom-left]="currentFabConfig.position === 'bottom-left'"
+          role="complementary"
+          aria-label="Azioni rapide"
+        >
+          @if (fabOpen && currentFabConfig.secondaryActions?.length) {
+            <div class="ui-layout__fab-actions">
+              @for (action of currentFabConfig.secondaryActions; track action.id; let i = $index) {
+                <button
+                  class="ui-layout__fab-action"
+                  [class]="'ui-layout__fab-action--' + (action.variant || 'neutral')"
+                  [attr.aria-label]="action.ariaLabel || action.label"
+                  [title]="action.label"
+                  [style.animation-delay]="(i * 50) + 'ms'"
+                  (click)="onFabAction(action)"
+                >
+                  <lucide-icon [name]="action.icon" [size]="18" aria-hidden="true" />
+                  <span class="ui-layout__fab-action-label">{{ action.label }}</span>
+                </button>
+              }
+            </div>
+          }
+          <button
+            class="ui-layout__fab-main"
+            [class]="'ui-layout__fab-main--' + (currentFabConfig.mainAction.variant || 'primary')"
+            [attr.aria-label]="currentFabConfig.mainAction.ariaLabel || currentFabConfig.mainAction.label"
+            [attr.aria-expanded]="currentFabConfig.secondaryActions?.length ? fabOpen : null"
+            (click)="onFabMainClick()"
+          >
+            <lucide-icon
+              [name]="currentFabConfig.mainAction.icon"
+              [size]="24"
+              aria-hidden="true"
+              class="ui-layout__fab-main-icon"
+            />
+          </button>
+        </div>
+      }
+
+      <!-- ─── Bottom Navigation (mobile, sidebar mode) ────────────── -->
+      @if (layoutMode === 'sidebar' && bottomNavItems.length > 0 && mobileMode !== 'drawer') {
+        <nav
+          class="ui-layout__bottom-nav"
+          role="navigation"
+          aria-label="Navigazione rapida"
+        >
+          @for (item of bottomNavItems; track item.id) {
+            <a
+              class="ui-layout__bottom-nav-item"
+              [routerLink]="item.route"
+              routerLinkActive="ui-layout__bottom-nav-item--active"
+              [routerLinkActiveOptions]="{ exact: item.routeActiveExact || false }"
+              [attr.aria-current]="isRouteActive(item) ? 'page' : null"
+            >
+              @if (item.icon) {
+                <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" />
+              }
+              <span class="ui-layout__bottom-nav-label">{{ item.label }}</span>
+              @if (getItemBadge(item)) {
+                <span class="ui-layout__badge" aria-label="Notifica">{{ getItemBadge(item) }}</span>
+              }
+            </a>
+          }
+        </nav>
+      }
+    </div>
+
+    <!-- ═══ SHARED TEMPLATES ═══════════════════════════════════════ -->
+
+    <!-- Page header with auto-derived breadcrumbs -->
+    <ng-template #pageHeaderTpl>
+      @if (schema.pageHeader?.show !== false && breadcrumbs.length > 0) {
+        <header class="ui-layout__page-header">
+          <nav aria-label="Breadcrumb" class="ui-layout__breadcrumb-nav">
+            <ol class="ui-layout__breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
+              @if (schema.pageHeader?.showHome !== false) {
+                <li class="ui-layout__breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+                  <a itemprop="item" [routerLink]="schema.pageHeader?.homeRoute || '/'" class="ui-layout__breadcrumb-link" aria-label="Home">
+                    <lucide-icon name="home" [size]="14" aria-hidden="true" />
+                    <span itemprop="name" class="ui-layout__breadcrumb-text">Home</span>
+                  </a>
+                  <meta itemprop="position" content="1" />
+                  <span class="ui-layout__breadcrumb-sep" aria-hidden="true">
+                    <lucide-icon name="chevron-right" [size]="14" />
+                  </span>
+                </li>
+              }
+              @for (crumb of breadcrumbs; track crumb.label; let i = $index) {
+                <li
+                  class="ui-layout__breadcrumb-item"
+                  [class.ui-layout__breadcrumb-item--current]="crumb.isLast"
+                  itemprop="itemListElement"
+                  itemscope
+                  itemtype="https://schema.org/ListItem"
+                >
+                  @if (!crumb.isLast && crumb.url) {
+                    <a itemprop="item" [routerLink]="crumb.url" class="ui-layout__breadcrumb-link">
+                      <span itemprop="name" class="ui-layout__breadcrumb-text">{{ crumb.label }}</span>
+                    </a>
+                    <span class="ui-layout__breadcrumb-sep" aria-hidden="true">
+                      <lucide-icon name="chevron-right" [size]="14" />
+                    </span>
+                  } @else {
+                    <span itemprop="name" class="ui-layout__breadcrumb-text ui-layout__breadcrumb-text--current" aria-current="page">
+                      {{ crumb.label }}
+                    </span>
+                  }
+                  <meta itemprop="position" [attr.content]="(schema.pageHeader?.showHome !== false) ? i + 2 : i + 1" />
+                </li>
+              }
+            </ol>
+          </nav>
+          <h1 class="ui-layout__page-title">{{ pageTitle }}</h1>
+        </header>
+      }
+    </ng-template>
+
+    <!-- Nav item template (sidebar, recursive-friendly) -->
+    <ng-template #navItemTpl let-item>
+      @if (item.type === 'divider') {
+        <hr class="ui-layout__nav-divider" />
+      } @else if (item.type === 'external') {
+        <a
+          class="ui-layout__nav-link"
+          [href]="item.href"
+          [target]="item.target || '_blank'"
+          [attr.rel]="item.target === '_blank' ? 'noopener noreferrer' : null"
+          (click)="onNavClick()"
+        >
+          @if (item.icon) {
+            <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" class="ui-layout__nav-icon" />
+          }
+          <span class="ui-layout__nav-label">{{ item.label }}</span>
+          <lucide-icon name="external-link" [size]="12" aria-hidden="true" class="ui-layout__nav-external" />
+          @if (getItemBadge(item)) {
+            <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+          }
+        </a>
+      } @else if (item.children?.length) {
+        <button
+          class="ui-layout__nav-link ui-layout__nav-link--parent"
+          [class.ui-layout__nav-link--active]="isParentActive(item)"
+          [class.ui-layout__nav-link--expanded]="expandedIds.has(item.id)"
+          [attr.aria-expanded]="expandedIds.has(item.id)"
+          (click)="toggleExpand(item)"
+        >
+          @if (item.icon) {
+            <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" class="ui-layout__nav-icon" />
+          }
+          <span class="ui-layout__nav-label">{{ item.label }}</span>
+          @if (getItemBadge(item)) {
+            <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+          }
+          <span class="ui-layout__nav-chevron" aria-hidden="true">
+            <lucide-icon name="chevron-right" [size]="14" />
+          </span>
+        </button>
+        @if (expandedIds.has(item.id)) {
+          <div class="ui-layout__nav-children">
+            @for (group of item.children; track group.label) {
+              <span class="ui-layout__nav-group-label">{{ group.label }}</span>
+              @for (child of group.items; track child.id) {
+                @if (!isItemHidden(child)) {
+                  <a
+                    class="ui-layout__nav-link ui-layout__nav-link--child"
+                    [routerLink]="child.route"
+                    routerLinkActive="ui-layout__nav-link--active"
+                    (click)="onNavClick()"
+                  >
+                    <span class="ui-layout__nav-label">{{ child.label }}</span>
+                    @if (getItemBadge(child)) {
+                      <span class="ui-layout__badge">{{ getItemBadge(child) }}</span>
+                    }
+                  </a>
+                }
+              }
+            }
+          </div>
+        }
+      } @else {
+        <a
+          class="ui-layout__nav-link"
+          [routerLink]="item.route"
+          routerLinkActive="ui-layout__nav-link--active"
+          [routerLinkActiveOptions]="{ exact: item.routeActiveExact || false }"
+          [attr.aria-current]="isRouteActive(item) ? 'page' : null"
+          (click)="onNavClick()"
+        >
+          @if (item.icon) {
+            <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" class="ui-layout__nav-icon" />
+          }
+          <span class="ui-layout__nav-label">{{ item.label }}</span>
+          @if (getItemBadge(item)) {
+            <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+          }
+        </a>
+      }
+    </ng-template>
+  `, isInline: true, styles: [".ui-layout-builder-host{display:block;height:100vh;height:100dvh}.ui-layout__skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-layout__skip-link:focus{position:fixed;top:var(--ui-spacing-2);left:var(--ui-spacing-2);z-index:calc(var(--ui-z-toast) + 10);width:auto;height:auto;clip:auto;padding:var(--ui-spacing-2) var(--ui-spacing-4);background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);text-decoration:none;overflow:visible;white-space:nowrap;margin:0}.ui-layout{display:flex;flex-direction:column;height:100%;overflow:hidden;font-family:var(--ui-font-family);color:var(--ui-color-text);background:var(--ui-color-bg-subtle)}.ui-layout__loader-overlay{position:fixed;inset:0;z-index:var(--ui-z-modal);display:flex;align-items:center;justify-content:center;background:var(--ui-color-bg-subtle);will-change:opacity;animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}@media (prefers-reduced-motion: reduce){.ui-layout__loader-overlay{animation:none}}.ui-layout__loader-spinner{width:48px;height:48px}.ui-layout__loader-svg{width:100%;height:100%;animation:ui-layout-spin 1s linear infinite}.ui-layout__loader-svg circle{stroke:var(--ui-color-primary);stroke-linecap:round;stroke-dasharray:90,150;stroke-dashoffset:0;animation:ui-layout-dash 1.5s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.ui-layout__loader-svg{animation:none}.ui-layout__loader-svg circle{animation:none;stroke-dasharray:90,150}}@keyframes ui-layout-spin{to{transform:rotate(360deg)}}@keyframes ui-layout-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes ui-layout-fade-in{0%{opacity:0}to{opacity:1}}.ui-layout__topbar{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);align-items:center;padding:0 var(--ui-spacing-4);gap:var(--ui-spacing-3);z-index:var(--ui-z-fixed)}.ui-layout__hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);cursor:pointer;padding:0;transition:all var(--ui-transition-fast);color:var(--ui-color-text)}.ui-layout__hamburger:hover{background:var(--ui-color-surface-hover)}.ui-layout__hamburger:focus{outline:none}.ui-layout__hamburger:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__hamburger-line{display:block;width:18px;height:2px;background:currentColor;border-radius:1px}.ui-layout__topbar-logo,.ui-layout__sidebar-logo{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-bold);flex-shrink:0}.ui-layout__topbar-logo-img,.ui-layout__sidebar-logo-img{width:28px;height:28px;border-radius:var(--ui-radius-md);object-fit:contain;flex-shrink:0}.ui-layout__topbar-title{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:calc(var(--ui-z-modal-backdrop));animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}@media (prefers-reduced-motion: reduce){.ui-layout__backdrop{animation:none}}.ui-layout__backdrop--topbar{display:none}.ui-layout__body{display:flex;flex:1;overflow:hidden}.ui-layout__sidebar{width:260px;min-width:260px;background:var(--ui-color-surface);border-right:1px solid var(--ui-color-border);display:flex;flex-direction:column;transition:width var(--ui-transition-normal),min-width var(--ui-transition-normal);overflow-y:auto;overflow-x:hidden}@media (prefers-reduced-motion: reduce){.ui-layout__sidebar{transition:none}}.ui-layout__sidebar--collapsed{width:60px;min-width:60px}.ui-layout__sidebar--topbar-drawer{display:none}.ui-layout__sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-4);border-bottom:1px solid var(--ui-color-border);flex-shrink:0}.ui-layout__sidebar--collapsed .ui-layout__sidebar-header{flex-direction:column;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-3) var(--ui-spacing-2)}.ui-layout__sidebar-brand{display:flex;align-items:center;gap:var(--ui-spacing-2);min-width:0}.ui-layout__sidebar-title{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__collapse-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-full);cursor:pointer;color:var(--ui-color-text-muted);flex-shrink:0;transition:all var(--ui-transition-fast)}.ui-layout__collapse-btn:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text);border-color:var(--ui-color-text-muted)}.ui-layout__collapse-btn:focus{outline:none}.ui-layout__collapse-btn:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__collapse-icon{transition:transform var(--ui-transition-normal)}.ui-layout__sidebar--collapsed .ui-layout__collapse-icon{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.ui-layout__collapse-icon{transition:none}}.ui-layout__close-btn{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);cursor:pointer;padding:var(--ui-spacing-1);color:var(--ui-color-text-muted);transition:all var(--ui-transition-fast)}.ui-layout__close-btn:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-layout__close-btn:focus{outline:none}.ui-layout__close-btn:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__sidebar-nav{flex:1;padding:var(--ui-spacing-3) 0;overflow-y:auto}.ui-layout__nav-section{padding:0 var(--ui-spacing-3);margin-bottom:var(--ui-spacing-4)}.ui-layout__nav-section-title{display:block;font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);text-transform:uppercase;letter-spacing:.05em;padding:var(--ui-spacing-1) var(--ui-spacing-3);margin-bottom:var(--ui-spacing-1)}.ui-layout__nav-link{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-2) var(--ui-spacing-3);border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);text-decoration:none;transition:all var(--ui-transition-fast);cursor:pointer}.ui-layout__nav-link:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text);text-decoration:none}.ui-layout__nav-link:focus{outline:none}.ui-layout__nav-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__nav-link--active{background:var(--ui-color-primary-light);color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__nav-link--parent{width:100%;background:none;border:none;text-align:left;font-family:inherit;justify-content:flex-start}.ui-layout__nav-link--child{font-size:.8rem;padding:.25rem var(--ui-spacing-2)}.ui-layout__nav-icon{flex-shrink:0}.ui-layout__nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__nav-external{flex-shrink:0;opacity:.5}.ui-layout__nav-chevron{flex-shrink:0;display:inline-flex;align-items:center;color:var(--ui-color-text-muted);transition:transform var(--ui-transition-fast)}.ui-layout__nav-link--expanded .ui-layout__nav-chevron{transform:rotate(90deg)}.ui-layout__nav-link--active .ui-layout__nav-chevron{color:var(--ui-color-primary)}@media (prefers-reduced-motion: reduce){.ui-layout__nav-chevron{transition:none}}.ui-layout__nav-children{margin-top:var(--ui-spacing-1);margin-left:calc(var(--ui-spacing-3) + 4px);padding-left:var(--ui-spacing-2);border-left:2px solid var(--ui-color-border)}.ui-layout__nav-group-label{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-color-text-muted);padding:var(--ui-spacing-1) var(--ui-spacing-2);margin-top:var(--ui-spacing-2)}.ui-layout__nav-group-label:first-child{margin-top:0}.ui-layout__nav-divider{border:none;border-top:1px solid var(--ui-color-border);margin:var(--ui-spacing-2) var(--ui-spacing-3)}.ui-layout__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ui-spacing-1);border-radius:var(--ui-radius-full);background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);font-size:.65rem;font-weight:var(--ui-font-weight-bold);line-height:1;flex-shrink:0}.ui-layout__sidebar-footer{padding:var(--ui-spacing-3) var(--ui-spacing-4);border-top:1px solid var(--ui-color-border);flex-shrink:0;display:none}.ui-layout__version-badge{display:inline-block;padding:2px 8px;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-full);font-size:var(--ui-font-size-xs);color:var(--ui-color-text-muted);font-family:var(--ui-font-family-mono)}.ui-layout__content{flex:1;overflow-y:auto;padding:var(--ui-spacing-8);background:var(--ui-color-bg-subtle)}.ui-layout__content:focus{outline:none}.ui-layout__content--fullscreen{padding:0}.ui-layout__content--topbar{flex:1;overflow-y:auto}.ui-layout__content--transitioning{animation:ui-layout-page-enter var(--ui-transition-normal, .25s) ease-out}@media (prefers-reduced-motion: reduce){.ui-layout__content--transitioning{animation:none}}.ui-layout__content-inner{width:100%;min-width:0}.ui-layout__content-inner--boxed{max-width:var(--ui-layout-content-max-width, 1200px);margin-left:auto;margin-right:auto}@keyframes ui-layout-page-enter{0%{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.ui-layout__page-header{margin-bottom:var(--ui-spacing-5)}.ui-layout__breadcrumb-nav{margin-bottom:var(--ui-spacing-2)}.ui-layout__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal);gap:var(--ui-spacing-1)}.ui-layout__breadcrumb-item{display:inline-flex;align-items:center;gap:var(--ui-spacing-1)}.ui-layout__breadcrumb-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--ui-color-primary);border-radius:var(--ui-radius-sm);padding:2px 4px;margin:-2px -4px;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-layout__breadcrumb-link:hover{color:var(--ui-color-primary-hover);text-decoration:underline}.ui-layout__breadcrumb-link:focus{outline:none}.ui-layout__breadcrumb-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__breadcrumb-link lucide-icon{transform:translateY(2px)}.ui-layout__breadcrumb-text{white-space:nowrap}.ui-layout__breadcrumb-text--current{font-weight:var(--ui-font-weight-medium);color:var(--ui-color-text)}.ui-layout__breadcrumb-sep{display:inline-flex;align-items:center;color:var(--ui-color-text-muted);flex-shrink:0}.ui-layout__breadcrumb-sep lucide-icon{transform:translateY(3px)}.ui-layout__page-title{margin:0;font-family:var(--ui-font-family);font-size:var(--ui-font-size-2xl);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight)}.ui-layout__page-title:focus{outline:none}.ui-layout__footer{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-4);padding:var(--ui-spacing-3) var(--ui-spacing-4);background:var(--ui-color-surface);border-top:1px solid var(--ui-color-border);flex-shrink:0;flex-wrap:wrap}.ui-layout__footer-links{display:flex;gap:var(--ui-spacing-3);flex-wrap:wrap}.ui-layout__footer-link{display:inline-flex;align-items:center;gap:4px;color:var(--ui-color-text-muted);font-size:var(--ui-font-size-xs);text-decoration:none;transition:color var(--ui-transition-fast)}.ui-layout__footer-link:hover{color:var(--ui-color-primary);text-decoration:underline}.ui-layout__footer-link:focus{outline:none}.ui-layout__footer-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__footer-text{font-size:var(--ui-font-size-xs);color:var(--ui-color-text);font-family:var(--ui-font-family-mono)}.ui-layout__fab{position:fixed;bottom:var(--ui-spacing-6);right:var(--ui-spacing-6);z-index:var(--ui-z-fixed);display:flex;flex-direction:column-reverse;align-items:center;gap:var(--ui-spacing-3)}.ui-layout__fab--bottom-left{right:auto;left:var(--ui-spacing-6)}.ui-layout__fab-main{width:56px;height:56px;border-radius:var(--ui-radius-full);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--ui-shadow-lg);transition:all var(--ui-transition-fast)}.ui-layout__fab-main--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-layout__fab-main--primary:hover{filter:brightness(1.1)}.ui-layout__fab-main--accent{background:var(--ui-color-accent, var(--ui-color-primary));color:var(--ui-color-primary-contrast)}.ui-layout__fab-main--accent:hover{filter:brightness(1.1)}.ui-layout__fab-main--warn{background:var(--ui-color-warn, #ef4444);color:#fff}.ui-layout__fab-main--warn:hover{filter:brightness(1.1)}.ui-layout__fab-main--neutral{background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border)}.ui-layout__fab-main--neutral:hover{background:var(--ui-color-surface-hover)}.ui-layout__fab-main:focus{outline:none}.ui-layout__fab-main:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__fab-main-icon{transition:transform var(--ui-transition-fast)}.ui-layout__fab--open .ui-layout__fab-main-icon{transform:rotate(45deg)}@media (prefers-reduced-motion: reduce){.ui-layout__fab-main-icon{transition:none}}.ui-layout__fab-actions{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--ui-spacing-2)}.ui-layout__fab-action{width:44px;height:44px;border-radius:var(--ui-radius-full);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:var(--ui-shadow-md);animation:ui-layout-fab-pop-in var(--ui-transition-fast) ease-out both;transition:all var(--ui-transition-fast)}.ui-layout__fab-action--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-layout__fab-action--accent{background:var(--ui-color-accent, var(--ui-color-primary));color:var(--ui-color-primary-contrast)}.ui-layout__fab-action--warn{background:var(--ui-color-warn, #ef4444);color:#fff}.ui-layout__fab-action--neutral,.ui-layout__fab-action--ghost,.ui-layout__fab-action--outline{background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border)}.ui-layout__fab-action:hover{filter:brightness(1.1)}.ui-layout__fab-action:focus{outline:none}.ui-layout__fab-action:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}@media (prefers-reduced-motion: reduce){.ui-layout__fab-action{animation:none}}.ui-layout__fab-action-label{position:absolute;right:calc(100% + var(--ui-spacing-2));white-space:nowrap;background:var(--ui-color-neutral-900);color:#fff;font-size:var(--ui-font-size-xs);padding:var(--ui-spacing-1) var(--ui-spacing-2);border-radius:var(--ui-radius-sm);pointer-events:none;box-shadow:var(--ui-shadow-sm)}.ui-layout__fab--bottom-left .ui-layout__fab-action-label{right:auto;left:calc(100% + var(--ui-spacing-2))}@keyframes ui-layout-fab-pop-in{0%{opacity:0;transform:scale(.3) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.ui-layout__bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;padding-bottom:env(safe-area-inset-bottom,0);background:var(--ui-color-surface);border-top:1px solid var(--ui-color-border);z-index:var(--ui-z-fixed);justify-content:space-around;align-items:stretch}.ui-layout__bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;color:var(--ui-color-text-muted);text-decoration:none;font-size:.65rem;font-weight:var(--ui-font-weight-medium);padding:var(--ui-spacing-1) 0;position:relative;transition:color var(--ui-transition-fast)}.ui-layout__bottom-nav-item:hover{color:var(--ui-color-text)}.ui-layout__bottom-nav-item--active{color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__bottom-nav-item:focus{outline:none}.ui-layout__bottom-nav-item:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bottom-nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64px;text-align:center}.ui-layout__desktop-only{display:initial}.ui-layout__mobile-only{display:none}.ui-layout__bar-stack{display:flex;flex-direction:column;flex-shrink:0}.ui-layout__bar{display:flex;align-items:center;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm)}.ui-layout__bar--notification{min-height:44px;gap:var(--ui-spacing-2);justify-content:center;font-weight:var(--ui-font-weight-medium)}.ui-layout__bar--notification-primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-layout__bar--notification-accent{background:var(--ui-color-accent, var(--ui-color-primary));color:var(--ui-color-primary-contrast)}.ui-layout__bar--notification-warn{background:var(--ui-color-warn, #ef4444);color:#fff}.ui-layout__bar--notification-neutral{background:var(--ui-color-surface);color:var(--ui-color-text);border-bottom:1px solid var(--ui-color-border)}.ui-layout__bar--notification-ghost,.ui-layout__bar--notification-outline{background:var(--ui-color-bg-muted);color:var(--ui-color-text);border-bottom:1px solid var(--ui-color-border)}.ui-layout__bar--brand{min-height:56px;justify-content:space-between;background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);gap:var(--ui-spacing-4)}.ui-layout__bar--navigation{position:relative;min-height:44px;background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);gap:var(--ui-spacing-1);overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,transparent 0,black var(--ui-spacing-4),black calc(100% - var(--ui-spacing-4)),transparent 100%)}.ui-layout__bar--navigation::-webkit-scrollbar{display:none}.ui-layout__bar--links{min-height:36px;background:var(--ui-color-bg-muted);border-bottom:1px solid var(--ui-color-border);gap:var(--ui-spacing-3);font-size:var(--ui-font-size-xs)}.ui-layout__bar-text{flex:1;text-align:center}.ui-layout__bar-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--ui-spacing-1);border-radius:var(--ui-radius-sm);color:inherit;opacity:.8;transition:opacity var(--ui-transition-fast)}.ui-layout__bar-dismiss:hover{opacity:1}.ui-layout__bar-dismiss:focus{outline:none}.ui-layout__bar-dismiss:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bar-brand-left{display:flex;align-items:center;gap:var(--ui-spacing-3);min-width:0}.ui-layout__bar-logo,.ui-layout__bar-logo-img{width:32px;height:32px;border-radius:var(--ui-radius-md);flex-shrink:0}.ui-layout__bar-logo{display:flex;align-items:center;justify-content:center;background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-bold)}.ui-layout__bar-logo-img{object-fit:contain}.ui-layout__bar-title{font-size:var(--ui-font-size-base);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__topbar-hamburger{display:none}.ui-layout__user-dropdown{position:relative}.ui-layout__user-dropdown-trigger{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-1) var(--ui-spacing-2);background:none;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);cursor:pointer;font-family:inherit;font-size:var(--ui-font-size-sm);color:var(--ui-color-text);transition:all var(--ui-transition-fast)}.ui-layout__user-dropdown-trigger:hover{background:var(--ui-color-surface-hover)}.ui-layout__user-dropdown-trigger:focus{outline:none}.ui-layout__user-dropdown-trigger:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__user-avatar{width:28px;height:28px;border-radius:var(--ui-radius-full);object-fit:cover}.ui-layout__user-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.ui-layout__user-chevron{transition:transform var(--ui-transition-fast);color:var(--ui-color-text-muted)}[aria-expanded=true] .ui-layout__user-chevron{transform:rotate(180deg)}.ui-layout__user-dropdown-menu{position:absolute;top:calc(100% + var(--ui-spacing-1));right:0;min-width:180px;background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-md);padding:var(--ui-spacing-1) 0;z-index:var(--ui-z-dropdown);animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}.ui-layout__user-dropdown-item{display:flex;align-items:center;gap:var(--ui-spacing-2);width:100%;padding:var(--ui-spacing-2) var(--ui-spacing-3);background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--ui-font-size-sm);color:var(--ui-color-text);text-decoration:none;text-align:left;transition:background var(--ui-transition-fast)}.ui-layout__user-dropdown-item:hover{background:var(--ui-color-surface-hover)}.ui-layout__user-dropdown-item:focus{outline:none}.ui-layout__user-dropdown-item:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__user-dropdown-divider{border:none;border-top:1px solid var(--ui-color-border);margin:var(--ui-spacing-1) 0}.ui-layout__hnav-link{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-2) var(--ui-spacing-3);border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);text-decoration:none;transition:all var(--ui-transition-fast);cursor:pointer;white-space:nowrap;background:none;border:none;font-family:inherit}.ui-layout__hnav-link:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-layout__hnav-link:focus{outline:none}.ui-layout__hnav-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__hnav-link--active{color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__hnav-link--parent{cursor:pointer}.ui-layout__hnav-link lucide-icon{transform:translateY(3px)}.ui-layout__hnav-chevron{transition:transform var(--ui-transition-fast)}.ui-layout__hnav-dropdown--open .ui-layout__hnav-chevron{transform:rotate(180deg)}.ui-layout__hnav-dropdown{position:relative}.ui-layout__hnav-dropdown-menu{position:absolute;top:calc(100% + var(--ui-spacing-1));left:0;min-width:200px;max-height:400px;overflow-y:auto;background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-md);padding:var(--ui-spacing-2);z-index:var(--ui-z-dropdown);animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}.ui-layout__hnav-dropdown-label{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-color-text-muted);padding:var(--ui-spacing-1) var(--ui-spacing-2);margin-top:var(--ui-spacing-2)}.ui-layout__hnav-dropdown-label:first-child{margin-top:0}.ui-layout__hnav-dropdown-item{display:block;padding:var(--ui-spacing-1) var(--ui-spacing-2);border-radius:var(--ui-radius-sm);font-size:var(--ui-font-size-sm);color:var(--ui-color-text-secondary);text-decoration:none;transition:all var(--ui-transition-fast)}.ui-layout__hnav-dropdown-item:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-layout__hnav-dropdown-item--active{color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__hnav-dropdown-item:focus{outline:none}.ui-layout__hnav-dropdown-item:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bar-link{display:inline-flex;align-items:center;gap:4px;color:var(--ui-color-text-muted);text-decoration:none;transition:color var(--ui-transition-fast)}.ui-layout__bar-link:hover{color:var(--ui-color-primary)}.ui-layout__bar-link:focus{outline:none}.ui-layout__bar-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bar-link lucide-icon{transform:translateY(3px)}@media (max-width: 767px){.ui-layout__sidebar-footer{display:block}.ui-layout__topbar{display:flex}.ui-layout:not(.ui-layout--topbar){padding-top:56px}.ui-layout__backdrop,.ui-layout__backdrop--topbar{display:block}.ui-layout__sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;min-width:300px;transform:translate(-100%);transition:transform var(--ui-transition-normal);z-index:var(--ui-z-modal)}.ui-layout__sidebar--open{transform:translate(0)}.ui-layout__sidebar--collapsed{width:300px;min-width:300px}.ui-layout__sidebar--collapsed .ui-layout__sidebar-header{flex-direction:row;align-items:center;gap:0;padding:var(--ui-spacing-4)}.ui-layout__sidebar--topbar-drawer{display:flex}}@media (max-width: 767px) and (prefers-reduced-motion: reduce){.ui-layout__sidebar{transition:none}}@media (max-width: 767px){.ui-layout__desktop-only{display:none!important}.ui-layout__mobile-only{display:initial!important}.ui-layout__content{padding:var(--ui-spacing-4)}.ui-layout__content--fullscreen{padding:0}.ui-layout__bottom-nav{display:flex}.ui-layout__fab{bottom:calc(var(--ui-spacing-4) + 56px + env(safe-area-inset-bottom,0))}.ui-layout__topbar-hamburger{display:flex}.ui-layout__bar--navigation,.ui-layout__bar--links,.ui-layout__user-label{display:none}.ui-layout__page-title{font-size:var(--ui-font-size-xl)}.ui-layout__breadcrumb{font-size:var(--ui-font-size-xs)}}@media (min-width: 768px) and (max-width: 1023px){.ui-layout__sidebar:not(.ui-layout__sidebar--topbar-drawer){position:fixed;top:0;left:0;bottom:0;width:300px;min-width:300px;transform:translate(-100%);transition:transform var(--ui-transition-normal);z-index:var(--ui-z-modal)}.ui-layout__sidebar:not(.ui-layout__sidebar--topbar-drawer).ui-layout__sidebar--open{transform:translate(0)}}@media (min-width: 768px) and (max-width: 1023px) and (prefers-reduced-motion: reduce){.ui-layout__sidebar:not(.ui-layout__sidebar--topbar-drawer){transition:none}}@media (min-width: 768px) and (max-width: 1023px){.ui-layout__topbar{display:flex}.ui-layout:not(.ui-layout--topbar){padding-top:56px}.ui-layout__backdrop,.ui-layout__backdrop--topbar{display:block}.ui-layout__desktop-only{display:none!important}.ui-layout__mobile-only{display:initial!important}.ui-layout__content{padding:var(--ui-spacing-6)}.ui-layout__content--fullscreen{padding:0}.ui-layout__topbar-hamburger{display:flex}.ui-layout__sidebar--topbar-drawer{display:flex;position:fixed;top:0;left:0;bottom:0;width:300px;min-width:300px;transform:translate(-100%);transition:transform var(--ui-transition-normal);z-index:var(--ui-z-modal)}.ui-layout__sidebar--topbar-drawer.ui-layout__sidebar--open{transform:translate(0)}}@media (min-width: 768px) and (max-width: 1023px) and (prefers-reduced-motion: reduce){.ui-layout__sidebar--topbar-drawer{transition:none}}.ui-layout--slotted{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.ui-layout__slotted-header{flex-shrink:0;width:100%}.ui-layout--slotted .ui-layout__content--slotted{flex:1}.ui-layout__slotted-footer{flex-shrink:0;width:100%}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiLayoutBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-layout-builder', standalone: true, imports: [
+                        RouterOutlet,
+                        RouterLink,
+                        RouterLinkActive,
+                        NgTemplateOutlet,
+                        LucideAngularModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ui-layout-builder-host' }, template: `
+    <!-- Skip to content (a11y) -->
+    <a class="ui-layout__skip-link" href="#ui-layout-main">
+      Vai al contenuto principale
+    </a>
+
+    <div
+      class="ui-layout"
+      [class.ui-layout--sidebar-collapsed]="layoutMode === 'sidebar' && sidebarCollapsed"
+      [class.ui-layout--topbar]="layoutMode === 'topbar'"
+      [class.ui-layout--slotted]="layoutMode === 'slotted'"
+    >
+      <!-- ─── Overlay Loader ─────────────────────────────────────── -->
+      @if (loading) {
+        <div
+          class="ui-layout__loader-overlay"
+          role="alert"
+          aria-live="assertive"
+          aria-label="Caricamento in corso"
+        >
+          <div class="ui-layout__loader-spinner" aria-hidden="true">
+            <svg viewBox="0 0 50 50" class="ui-layout__loader-svg">
+              <circle cx="25" cy="25" r="20" fill="none" stroke-width="4" />
+            </svg>
+          </div>
+        </div>
+      }
+
+      @switch (layoutMode) {
+        <!-- ════════════════════════════════════════════════════════ -->
+        <!-- ═══ SIDEBAR MODE ═════════════════════════════════════ -->
+        <!-- ════════════════════════════════════════════════════════ -->
+        @case ('sidebar') {
+          <!-- Mobile Top Bar -->
+          <header class="ui-layout__topbar">
+            <button
+              class="ui-layout__hamburger"
+              (click)="layoutService.openMobileSidebar()"
+              aria-label="Apri navigazione"
+            >
+              <span class="ui-layout__hamburger-line"></span>
+              <span class="ui-layout__hamburger-line"></span>
+              <span class="ui-layout__hamburger-line"></span>
+            </button>
+            @if (schema.header?.logo) {
+              @if (schema.header?.logo?.src) {
+                <img
+                  class="ui-layout__topbar-logo-img"
+                  [src]="schema.header?.logo?.src"
+                  [alt]="schema.header?.logo?.alt || schema.header?.title"
+                />
+              } @else if (schema.header?.logo?.text) {
+                <span class="ui-layout__topbar-logo">{{ schema.header?.logo?.text }}</span>
+              }
+            }
+            <span class="ui-layout__topbar-title">{{ schema.header?.title }}</span>
+          </header>
+
+          <!-- Mobile Backdrop -->
+          @if (sidebarOpen) {
+            <div
+              class="ui-layout__backdrop"
+              (click)="layoutService.closeMobileSidebar()"
+              aria-hidden="true"
+            ></div>
+          }
+
+          <!-- Body (sidebar + content) -->
+          <div class="ui-layout__body">
+            <aside
+              class="ui-layout__sidebar"
+              [class.ui-layout__sidebar--collapsed]="sidebarCollapsed"
+              [class.ui-layout__sidebar--open]="sidebarOpen"
+              role="navigation"
+              aria-label="Navigazione principale"
+            >
+              <div class="ui-layout__sidebar-header">
+                <div class="ui-layout__sidebar-brand">
+                  @if (schema.header?.logo) {
+                    @if (schema.header?.logo?.src) {
+                      <img
+                        class="ui-layout__sidebar-logo-img"
+                        [src]="schema.header?.logo?.src"
+                        [alt]="schema.header?.logo?.alt || schema.header?.title"
+                      />
+                    } @else if (schema.header?.logo?.text) {
+                      <span class="ui-layout__sidebar-logo">{{ schema.header?.logo?.text }}</span>
+                    }
+                  }
+                  @if (!sidebarCollapsed || sidebarOpen) {
+                    <span class="ui-layout__sidebar-title">{{ schema.header?.title }}</span>
+                  }
+                </div>
+
+                @if (schema.navigation?.collapsible !== false) {
+                  <button
+                    class="ui-layout__collapse-btn ui-layout__desktop-only"
+                    (click)="layoutService.toggleSidebar()"
+                    [attr.aria-label]="sidebarCollapsed ? 'Espandi sidebar' : 'Comprimi sidebar'"
+                  >
+                    <lucide-icon
+                      name="chevrons-left"
+                      [size]="16"
+                      class="ui-layout__collapse-icon"
+                      aria-hidden="true"
+                    />
+                  </button>
+                }
+
+                <button
+                  class="ui-layout__close-btn ui-layout__mobile-only"
+                  (click)="layoutService.closeMobileSidebar()"
+                  aria-label="Chiudi navigazione"
+                >
+                  <lucide-icon name="x" [size]="16" aria-hidden="true" />
+                </button>
+              </div>
+
+              @if (!sidebarCollapsed || sidebarOpen) {
+                <nav class="ui-layout__sidebar-nav">
+                  @if (schema.navigation?.sections?.length) {
+                    @for (section of schema.navigation?.sections || []; track section.id) {
+                      <div class="ui-layout__nav-section">
+                        <span class="ui-layout__nav-section-title">{{ section.label }}</span>
+                        @for (item of getItemsForSection(section); track item.id) {
+                          @if (!isItemHidden(item)) {
+                            <ng-container
+                              *ngTemplateOutlet="navItemTpl; context: { $implicit: item }"
+                            />
+                          }
+                        }
+                      </div>
+                    }
+                  } @else {
+                    <div class="ui-layout__nav-section">
+                      @for (item of schema.navigation?.items || []; track item.id) {
+                        @if (!isItemHidden(item)) {
+                          <ng-container
+                            *ngTemplateOutlet="navItemTpl; context: { $implicit: item }"
+                          />
+                        }
+                      }
+                    </div>
+                  }
+                </nav>
+              }
+            </aside>
+
+            <!-- Main content area -->
+            <main
+              class="ui-layout__content"
+              [class.ui-layout__content--boxed]="contentType === 'boxed'"
+              [class.ui-layout__content--fullscreen]="contentType === 'fullscreen'"
+              [class.ui-layout__content--transitioning]="contentTransitioning"
+              (animationend)="contentTransitioning = false"
+              id="ui-layout-main"
+              tabindex="-1"
+            >
+              <div class="ui-layout__content-inner" [class.ui-layout__content-inner--boxed]="contentType === 'boxed'">
+                <ng-container *ngTemplateOutlet="pageHeaderTpl" />
+                <router-outlet />
+              </div>
+            </main>
+          </div>
+        }
+
+        <!-- ════════════════════════════════════════════════════════ -->
+        <!-- ═══ TOPBAR MODE ══════════════════════════════════════ -->
+        <!-- ════════════════════════════════════════════════════════ -->
+        @case ('topbar') {
+          <!-- Bar stack -->
+          <div class="ui-layout__bar-stack">
+            @for (bar of visibleBars; track bar.id) {
+              @switch (bar.type) {
+                @case ('notification') {
+                  @if (bar.notification) {
+                    <div
+                      class="ui-layout__bar ui-layout__bar--notification"
+                      [class]="'ui-layout__bar--notification-' + (bar.notification.variant || 'primary')"
+                      role="alert"
+                    >
+                      @if (bar.notification.icon) {
+                        <lucide-icon [name]="bar.notification.icon" [size]="16" aria-hidden="true" />
+                      }
+                      <span class="ui-layout__bar-text">{{ bar.notification.text }}</span>
+                      @if (bar.notification.dismissible !== false) {
+                        <button
+                          class="ui-layout__bar-dismiss"
+                          (click)="dismissBar(bar.id)"
+                          aria-label="Chiudi notifica"
+                        >
+                          <lucide-icon name="x" [size]="14" aria-hidden="true" />
+                        </button>
+                      }
+                    </div>
+                  }
+                }
+
+                @case ('brand') {
+                  @if (bar.brand; as brand) {
+                    <div class="ui-layout__bar ui-layout__bar--brand">
+                      <div class="ui-layout__bar-brand-left">
+                        <button
+                          class="ui-layout__hamburger ui-layout__topbar-hamburger"
+                          (click)="layoutService.openMobileSidebar()"
+                          aria-label="Apri navigazione"
+                        >
+                          <span class="ui-layout__hamburger-line"></span>
+                          <span class="ui-layout__hamburger-line"></span>
+                          <span class="ui-layout__hamburger-line"></span>
+                        </button>
+                        @if (brand.logo; as logo) {
+                          @if (logo.src) {
+                            <img
+                              class="ui-layout__bar-logo-img"
+                              [src]="logo.src"
+                              [alt]="logo.alt || brand.title || ''"
+                            />
+                          } @else if (logo.text) {
+                            <span class="ui-layout__bar-logo">{{ logo.text }}</span>
+                          }
+                        }
+                        @if (brand.title; as brandTitle) {
+                          <span class="ui-layout__bar-title">{{ brandTitle }}</span>
+                        }
+                      </div>
+                      @if (brand.userDropdown; as dropdown) {
+                        <div class="ui-layout__user-dropdown">
+                          <button
+                            class="ui-layout__user-dropdown-trigger"
+                            (click)="userDropdownOpen = !userDropdownOpen"
+                            [attr.aria-expanded]="userDropdownOpen"
+                            aria-haspopup="true"
+                          >
+                            @if (dropdown.avatar?.src) {
+                              <img
+                                class="ui-layout__user-avatar"
+                                [src]="dropdown.avatar!.src"
+                                [alt]="dropdown.avatar!.alt || dropdown.label"
+                              />
+                            } @else {
+                              <lucide-icon
+                                [name]="dropdown.icon || 'user'"
+                                [size]="18"
+                                aria-hidden="true"
+                              />
+                            }
+                            <span class="ui-layout__user-label">{{ dropdown.label }}</span>
+                            <lucide-icon name="chevron-down" [size]="14" aria-hidden="true" class="ui-layout__user-chevron" />
+                          </button>
+                          @if (userDropdownOpen) {
+                            <div class="ui-layout__user-dropdown-menu" role="menu">
+                              @for (dItem of dropdown.items; track dItem.id) {
+                                @if (dItem.divider) {
+                                  <hr class="ui-layout__user-dropdown-divider" />
+                                }
+                                @if (dItem.route) {
+                                  <a
+                                    class="ui-layout__user-dropdown-item"
+                                    [routerLink]="dItem.route"
+                                    role="menuitem"
+                                    (click)="userDropdownOpen = false"
+                                  >
+                                    @if (dItem.icon) {
+                                      <lucide-icon [name]="dItem.icon" [size]="16" aria-hidden="true" />
+                                    }
+                                    {{ dItem.label }}
+                                  </a>
+                                } @else {
+                                  <button
+                                    class="ui-layout__user-dropdown-item"
+                                    role="menuitem"
+                                    (click)="onDropdownAction(dItem)"
+                                  >
+                                    @if (dItem.icon) {
+                                      <lucide-icon [name]="dItem.icon" [size]="16" aria-hidden="true" />
+                                    }
+                                    {{ dItem.label }}
+                                  </button>
+                                }
+                              }
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                }
+
+                @case ('navigation') {
+                  <nav class="ui-layout__bar ui-layout__bar--navigation" role="navigation" aria-label="Navigazione principale">
+                    @for (item of getTopbarNavItems(bar); track item.id) {
+                      @if (!isItemHidden(item)) {
+                        @if (item.children?.length) {
+                          <div class="ui-layout__hnav-dropdown" [class.ui-layout__hnav-dropdown--open]="hnavDropdownId === item.id">
+                            <button
+                              class="ui-layout__hnav-link ui-layout__hnav-link--parent"
+                              [class.ui-layout__hnav-link--active]="isParentActive(item)"
+                              (click)="toggleHnavDropdown(item.id)"
+                              [attr.aria-expanded]="hnavDropdownId === item.id"
+                            >
+                              @if (item.icon) {
+                                <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+                              }
+                              <span>{{ item.label }}</span>
+                              <lucide-icon name="chevron-down" [size]="14" aria-hidden="true" class="ui-layout__hnav-chevron" />
+                            </button>
+                            @if (hnavDropdownId === item.id) {
+                              <div class="ui-layout__hnav-dropdown-menu">
+                                @for (group of item.children; track group.label) {
+                                  <span class="ui-layout__hnav-dropdown-label">{{ group.label }}</span>
+                                  @for (child of group.items; track child.id) {
+                                    @if (!isItemHidden(child)) {
+                                      <a
+                                        class="ui-layout__hnav-dropdown-item"
+                                        [routerLink]="child.route"
+                                        routerLinkActive="ui-layout__hnav-dropdown-item--active"
+                                        (click)="hnavDropdownId = null; onNavClick()"
+                                      >
+                                        {{ child.label }}
+                                      </a>
+                                    }
+                                  }
+                                }
+                              </div>
+                            }
+                          </div>
+                        } @else if (item.type === 'external') {
+                          <a
+                            class="ui-layout__hnav-link"
+                            [href]="item.href"
+                            [target]="item.target || '_blank'"
+                            [attr.rel]="item.target === '_blank' ? 'noopener noreferrer' : null"
+                          >
+                            @if (item.icon) {
+                              <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+                            }
+                            <span>{{ item.label }}</span>
+                            <lucide-icon name="external-link" [size]="12" aria-hidden="true" />
+                          </a>
+                        } @else if (item.type !== 'divider') {
+                          <a
+                            class="ui-layout__hnav-link"
+                            [routerLink]="item.route"
+                            routerLinkActive="ui-layout__hnav-link--active"
+                            [routerLinkActiveOptions]="{ exact: item.routeActiveExact || false }"
+                          >
+                            @if (item.icon) {
+                              <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+                            }
+                            <span>{{ item.label }}</span>
+                            @if (getItemBadge(item)) {
+                              <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+                            }
+                          </a>
+                        }
+                      }
+                    }
+                  </nav>
+                }
+
+                @case ('links') {
+                  @if (bar.links) {
+                    <div
+                      class="ui-layout__bar ui-layout__bar--links"
+                      [style.justify-content]="bar.links.align === 'start' ? 'flex-start' : bar.links.align === 'center' ? 'center' : bar.links.align === 'space-between' ? 'space-between' : 'flex-end'"
+                    >
+                      @for (lnk of bar.links.items; track lnk.label || lnk.ariaLabel || $index) {
+                        @if (lnk.route) {
+                          <a class="ui-layout__bar-link" [routerLink]="lnk.route" [attr.aria-label]="lnk.ariaLabel || null">
+                            @if (lnk.icon) {
+                              <lucide-icon [name]="lnk.icon" [size]="14" aria-hidden="true" />
+                            }
+                            @if (lnk.label) {
+                              <span>{{ lnk.label }}</span>
+                            }
+                          </a>
+                        } @else if (lnk.href) {
+                          <a
+                            class="ui-layout__bar-link"
+                            [href]="lnk.href"
+                            [target]="lnk.target || '_self'"
+                            [attr.rel]="lnk.target === '_blank' ? 'noopener noreferrer' : null"
+                            [attr.aria-label]="lnk.ariaLabel || null"
+                          >
+                            @if (lnk.icon) {
+                              <lucide-icon [name]="lnk.icon" [size]="14" aria-hidden="true" />
+                            }
+                            @if (lnk.label) {
+                              <span>{{ lnk.label }}</span>
+                            }
+                          </a>
+                        }
+                      }
+                    </div>
+                  }
+                }
+              }
+            }
+          </div>
+
+          <!-- Mobile Backdrop (topbar mode) -->
+          @if (sidebarOpen) {
+            <div
+              class="ui-layout__backdrop ui-layout__backdrop--topbar"
+              (click)="layoutService.closeMobileSidebar()"
+              aria-hidden="true"
+            ></div>
+          }
+
+          <!-- Mobile drawer (topbar mode) -->
+          <aside
+            class="ui-layout__sidebar ui-layout__sidebar--topbar-drawer"
+            [class.ui-layout__sidebar--open]="sidebarOpen"
+            role="navigation"
+            aria-label="Navigazione principale"
+          >
+            <div class="ui-layout__sidebar-header">
+              <div class="ui-layout__sidebar-brand">
+                @if (schema.header?.logo) {
+                  @if (schema.header?.logo?.src) {
+                    <img class="ui-layout__sidebar-logo-img" [src]="schema.header?.logo?.src" [alt]="schema.header?.logo?.alt || schema.header?.title" />
+                  } @else if (schema.header?.logo?.text) {
+                    <span class="ui-layout__sidebar-logo">{{ schema.header?.logo?.text }}</span>
+                  }
+                }
+                <span class="ui-layout__sidebar-title">{{ schema.header?.title }}</span>
+              </div>
+              <button class="ui-layout__close-btn" (click)="layoutService.closeMobileSidebar()" aria-label="Chiudi navigazione">
+                <lucide-icon name="x" [size]="16" aria-hidden="true" />
+              </button>
+            </div>
+            <nav class="ui-layout__sidebar-nav">
+              @if (schema.navigation?.sections?.length) {
+                @for (section of schema.navigation?.sections || []; track section.id) {
+                  <div class="ui-layout__nav-section">
+                    <span class="ui-layout__nav-section-title">{{ section.label }}</span>
+                    @for (item of getItemsForSection(section); track item.id) {
+                      @if (!isItemHidden(item)) {
+                        <ng-container *ngTemplateOutlet="navItemTpl; context: { $implicit: item }" />
+                      }
+                    }
+                  </div>
+                }
+              } @else {
+                <div class="ui-layout__nav-section">
+                  @for (item of schema.navigation?.items || []; track item.id) {
+                    @if (!isItemHidden(item)) {
+                      <ng-container *ngTemplateOutlet="navItemTpl; context: { $implicit: item }" />
+                    }
+                  }
+                </div>
+              }
+            </nav>
+          </aside>
+
+          <!-- Main content area (topbar mode) -->
+          <main
+            class="ui-layout__content ui-layout__content--topbar"
+            [class.ui-layout__content--boxed]="contentType === 'boxed'"
+            [class.ui-layout__content--fullscreen]="contentType === 'fullscreen'"
+            [class.ui-layout__content--transitioning]="contentTransitioning"
+            (animationend)="contentTransitioning = false"
+            id="ui-layout-main"
+            tabindex="-1"
+          >
+            <div class="ui-layout__content-inner" [class.ui-layout__content-inner--boxed]="contentType === 'boxed'">
+              <ng-container *ngTemplateOutlet="pageHeaderTpl" />
+              <router-outlet />
+            </div>
+          </main>
+        }
+
+        @case ('slotted') {
+          <!-- Slotted Header -->
+          <header class="ui-layout__slotted-header">
+            <ng-content select="[uiLayoutHeader]" />
+          </header>
+
+          <!-- Main content area (slotted mode) -->
+          <main
+            class="ui-layout__content ui-layout__content--slotted"
+            [class.ui-layout__content--boxed]="contentType === 'boxed'"
+            [class.ui-layout__content--fullscreen]="contentType === 'fullscreen'"
+            [class.ui-layout__content--transitioning]="contentTransitioning"
+            (animationend)="contentTransitioning = false"
+            id="ui-layout-main"
+            tabindex="-1"
+          >
+            <div class="ui-layout__content-inner" [class.ui-layout__content-inner--boxed]="contentType === 'boxed'">
+              <ng-container *ngTemplateOutlet="pageHeaderTpl" />
+              <router-outlet />
+            </div>
+          </main>
+
+          <!-- Slotted Footer -->
+          <footer class="ui-layout__slotted-footer">
+            <ng-content select="[uiLayoutFooter]" />
+          </footer>
+        }
+      }
+
+      <!-- ─── Footer (sidebar/topbar only) ──────────────────────────── -->
+      @if (layoutMode !== 'slotted' && schema.footer) {
+        <footer class="ui-layout__footer">
+          @if (schema.footer.links?.length) {
+            <nav class="ui-layout__footer-links" aria-label="Link footer">
+              @for (link of schema.footer.links; track link.label) {
+                @if (link.route) {
+                  <a class="ui-layout__footer-link" [routerLink]="link.route">
+                    @if (link.icon) {
+                      <lucide-icon [name]="link.icon" [size]="14" aria-hidden="true" />
+                    }
+                    {{ link.label }}
+                  </a>
+                } @else if (link.href) {
+                  <a
+                    class="ui-layout__footer-link"
+                    [href]="link.href"
+                    [target]="link.target || '_self'"
+                    [attr.rel]="link.target === '_blank' ? 'noopener noreferrer' : null"
+                  >
+                    @if (link.icon) {
+                      <lucide-icon [name]="link.icon" [size]="14" aria-hidden="true" />
+                    }
+                    {{ link.label }}
+                  </a>
+                }
+              }
+            </nav>
+          }
+          @if (schema.footer.text) {
+            <span class="ui-layout__footer-text">{{ schema.footer.text }}</span>
+          }
+        </footer>
+      }
+
+      <!-- ─── Speed Dial FAB ─────────────────────────────────────── -->
+      @if (currentFabConfig) {
+        <div
+          class="ui-layout__fab"
+          [class.ui-layout__fab--open]="fabOpen"
+          [class.ui-layout__fab--bottom-left]="currentFabConfig.position === 'bottom-left'"
+          role="complementary"
+          aria-label="Azioni rapide"
+        >
+          @if (fabOpen && currentFabConfig.secondaryActions?.length) {
+            <div class="ui-layout__fab-actions">
+              @for (action of currentFabConfig.secondaryActions; track action.id; let i = $index) {
+                <button
+                  class="ui-layout__fab-action"
+                  [class]="'ui-layout__fab-action--' + (action.variant || 'neutral')"
+                  [attr.aria-label]="action.ariaLabel || action.label"
+                  [title]="action.label"
+                  [style.animation-delay]="(i * 50) + 'ms'"
+                  (click)="onFabAction(action)"
+                >
+                  <lucide-icon [name]="action.icon" [size]="18" aria-hidden="true" />
+                  <span class="ui-layout__fab-action-label">{{ action.label }}</span>
+                </button>
+              }
+            </div>
+          }
+          <button
+            class="ui-layout__fab-main"
+            [class]="'ui-layout__fab-main--' + (currentFabConfig.mainAction.variant || 'primary')"
+            [attr.aria-label]="currentFabConfig.mainAction.ariaLabel || currentFabConfig.mainAction.label"
+            [attr.aria-expanded]="currentFabConfig.secondaryActions?.length ? fabOpen : null"
+            (click)="onFabMainClick()"
+          >
+            <lucide-icon
+              [name]="currentFabConfig.mainAction.icon"
+              [size]="24"
+              aria-hidden="true"
+              class="ui-layout__fab-main-icon"
+            />
+          </button>
+        </div>
+      }
+
+      <!-- ─── Bottom Navigation (mobile, sidebar mode) ────────────── -->
+      @if (layoutMode === 'sidebar' && bottomNavItems.length > 0 && mobileMode !== 'drawer') {
+        <nav
+          class="ui-layout__bottom-nav"
+          role="navigation"
+          aria-label="Navigazione rapida"
+        >
+          @for (item of bottomNavItems; track item.id) {
+            <a
+              class="ui-layout__bottom-nav-item"
+              [routerLink]="item.route"
+              routerLinkActive="ui-layout__bottom-nav-item--active"
+              [routerLinkActiveOptions]="{ exact: item.routeActiveExact || false }"
+              [attr.aria-current]="isRouteActive(item) ? 'page' : null"
+            >
+              @if (item.icon) {
+                <lucide-icon [name]="item.icon" [size]="20" aria-hidden="true" />
+              }
+              <span class="ui-layout__bottom-nav-label">{{ item.label }}</span>
+              @if (getItemBadge(item)) {
+                <span class="ui-layout__badge" aria-label="Notifica">{{ getItemBadge(item) }}</span>
+              }
+            </a>
+          }
+        </nav>
+      }
+    </div>
+
+    <!-- ═══ SHARED TEMPLATES ═══════════════════════════════════════ -->
+
+    <!-- Page header with auto-derived breadcrumbs -->
+    <ng-template #pageHeaderTpl>
+      @if (schema.pageHeader?.show !== false && breadcrumbs.length > 0) {
+        <header class="ui-layout__page-header">
+          <nav aria-label="Breadcrumb" class="ui-layout__breadcrumb-nav">
+            <ol class="ui-layout__breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
+              @if (schema.pageHeader?.showHome !== false) {
+                <li class="ui-layout__breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+                  <a itemprop="item" [routerLink]="schema.pageHeader?.homeRoute || '/'" class="ui-layout__breadcrumb-link" aria-label="Home">
+                    <lucide-icon name="home" [size]="14" aria-hidden="true" />
+                    <span itemprop="name" class="ui-layout__breadcrumb-text">Home</span>
+                  </a>
+                  <meta itemprop="position" content="1" />
+                  <span class="ui-layout__breadcrumb-sep" aria-hidden="true">
+                    <lucide-icon name="chevron-right" [size]="14" />
+                  </span>
+                </li>
+              }
+              @for (crumb of breadcrumbs; track crumb.label; let i = $index) {
+                <li
+                  class="ui-layout__breadcrumb-item"
+                  [class.ui-layout__breadcrumb-item--current]="crumb.isLast"
+                  itemprop="itemListElement"
+                  itemscope
+                  itemtype="https://schema.org/ListItem"
+                >
+                  @if (!crumb.isLast && crumb.url) {
+                    <a itemprop="item" [routerLink]="crumb.url" class="ui-layout__breadcrumb-link">
+                      <span itemprop="name" class="ui-layout__breadcrumb-text">{{ crumb.label }}</span>
+                    </a>
+                    <span class="ui-layout__breadcrumb-sep" aria-hidden="true">
+                      <lucide-icon name="chevron-right" [size]="14" />
+                    </span>
+                  } @else {
+                    <span itemprop="name" class="ui-layout__breadcrumb-text ui-layout__breadcrumb-text--current" aria-current="page">
+                      {{ crumb.label }}
+                    </span>
+                  }
+                  <meta itemprop="position" [attr.content]="(schema.pageHeader?.showHome !== false) ? i + 2 : i + 1" />
+                </li>
+              }
+            </ol>
+          </nav>
+          <h1 class="ui-layout__page-title">{{ pageTitle }}</h1>
+        </header>
+      }
+    </ng-template>
+
+    <!-- Nav item template (sidebar, recursive-friendly) -->
+    <ng-template #navItemTpl let-item>
+      @if (item.type === 'divider') {
+        <hr class="ui-layout__nav-divider" />
+      } @else if (item.type === 'external') {
+        <a
+          class="ui-layout__nav-link"
+          [href]="item.href"
+          [target]="item.target || '_blank'"
+          [attr.rel]="item.target === '_blank' ? 'noopener noreferrer' : null"
+          (click)="onNavClick()"
+        >
+          @if (item.icon) {
+            <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" class="ui-layout__nav-icon" />
+          }
+          <span class="ui-layout__nav-label">{{ item.label }}</span>
+          <lucide-icon name="external-link" [size]="12" aria-hidden="true" class="ui-layout__nav-external" />
+          @if (getItemBadge(item)) {
+            <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+          }
+        </a>
+      } @else if (item.children?.length) {
+        <button
+          class="ui-layout__nav-link ui-layout__nav-link--parent"
+          [class.ui-layout__nav-link--active]="isParentActive(item)"
+          [class.ui-layout__nav-link--expanded]="expandedIds.has(item.id)"
+          [attr.aria-expanded]="expandedIds.has(item.id)"
+          (click)="toggleExpand(item)"
+        >
+          @if (item.icon) {
+            <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" class="ui-layout__nav-icon" />
+          }
+          <span class="ui-layout__nav-label">{{ item.label }}</span>
+          @if (getItemBadge(item)) {
+            <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+          }
+          <span class="ui-layout__nav-chevron" aria-hidden="true">
+            <lucide-icon name="chevron-right" [size]="14" />
+          </span>
+        </button>
+        @if (expandedIds.has(item.id)) {
+          <div class="ui-layout__nav-children">
+            @for (group of item.children; track group.label) {
+              <span class="ui-layout__nav-group-label">{{ group.label }}</span>
+              @for (child of group.items; track child.id) {
+                @if (!isItemHidden(child)) {
+                  <a
+                    class="ui-layout__nav-link ui-layout__nav-link--child"
+                    [routerLink]="child.route"
+                    routerLinkActive="ui-layout__nav-link--active"
+                    (click)="onNavClick()"
+                  >
+                    <span class="ui-layout__nav-label">{{ child.label }}</span>
+                    @if (getItemBadge(child)) {
+                      <span class="ui-layout__badge">{{ getItemBadge(child) }}</span>
+                    }
+                  </a>
+                }
+              }
+            }
+          </div>
+        }
+      } @else {
+        <a
+          class="ui-layout__nav-link"
+          [routerLink]="item.route"
+          routerLinkActive="ui-layout__nav-link--active"
+          [routerLinkActiveOptions]="{ exact: item.routeActiveExact || false }"
+          [attr.aria-current]="isRouteActive(item) ? 'page' : null"
+          (click)="onNavClick()"
+        >
+          @if (item.icon) {
+            <lucide-icon [name]="item.icon" [size]="16" aria-hidden="true" class="ui-layout__nav-icon" />
+          }
+          <span class="ui-layout__nav-label">{{ item.label }}</span>
+          @if (getItemBadge(item)) {
+            <span class="ui-layout__badge">{{ getItemBadge(item) }}</span>
+          }
+        </a>
+      }
+    </ng-template>
+  `, styles: [".ui-layout-builder-host{display:block;height:100vh;height:100dvh}.ui-layout__skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-layout__skip-link:focus{position:fixed;top:var(--ui-spacing-2);left:var(--ui-spacing-2);z-index:calc(var(--ui-z-toast) + 10);width:auto;height:auto;clip:auto;padding:var(--ui-spacing-2) var(--ui-spacing-4);background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);text-decoration:none;overflow:visible;white-space:nowrap;margin:0}.ui-layout{display:flex;flex-direction:column;height:100%;overflow:hidden;font-family:var(--ui-font-family);color:var(--ui-color-text);background:var(--ui-color-bg-subtle)}.ui-layout__loader-overlay{position:fixed;inset:0;z-index:var(--ui-z-modal);display:flex;align-items:center;justify-content:center;background:var(--ui-color-bg-subtle);will-change:opacity;animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}@media (prefers-reduced-motion: reduce){.ui-layout__loader-overlay{animation:none}}.ui-layout__loader-spinner{width:48px;height:48px}.ui-layout__loader-svg{width:100%;height:100%;animation:ui-layout-spin 1s linear infinite}.ui-layout__loader-svg circle{stroke:var(--ui-color-primary);stroke-linecap:round;stroke-dasharray:90,150;stroke-dashoffset:0;animation:ui-layout-dash 1.5s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.ui-layout__loader-svg{animation:none}.ui-layout__loader-svg circle{animation:none;stroke-dasharray:90,150}}@keyframes ui-layout-spin{to{transform:rotate(360deg)}}@keyframes ui-layout-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes ui-layout-fade-in{0%{opacity:0}to{opacity:1}}.ui-layout__topbar{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);align-items:center;padding:0 var(--ui-spacing-4);gap:var(--ui-spacing-3);z-index:var(--ui-z-fixed)}.ui-layout__hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);cursor:pointer;padding:0;transition:all var(--ui-transition-fast);color:var(--ui-color-text)}.ui-layout__hamburger:hover{background:var(--ui-color-surface-hover)}.ui-layout__hamburger:focus{outline:none}.ui-layout__hamburger:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__hamburger-line{display:block;width:18px;height:2px;background:currentColor;border-radius:1px}.ui-layout__topbar-logo,.ui-layout__sidebar-logo{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-bold);flex-shrink:0}.ui-layout__topbar-logo-img,.ui-layout__sidebar-logo-img{width:28px;height:28px;border-radius:var(--ui-radius-md);object-fit:contain;flex-shrink:0}.ui-layout__topbar-title{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:calc(var(--ui-z-modal-backdrop));animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}@media (prefers-reduced-motion: reduce){.ui-layout__backdrop{animation:none}}.ui-layout__backdrop--topbar{display:none}.ui-layout__body{display:flex;flex:1;overflow:hidden}.ui-layout__sidebar{width:260px;min-width:260px;background:var(--ui-color-surface);border-right:1px solid var(--ui-color-border);display:flex;flex-direction:column;transition:width var(--ui-transition-normal),min-width var(--ui-transition-normal);overflow-y:auto;overflow-x:hidden}@media (prefers-reduced-motion: reduce){.ui-layout__sidebar{transition:none}}.ui-layout__sidebar--collapsed{width:60px;min-width:60px}.ui-layout__sidebar--topbar-drawer{display:none}.ui-layout__sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-4);border-bottom:1px solid var(--ui-color-border);flex-shrink:0}.ui-layout__sidebar--collapsed .ui-layout__sidebar-header{flex-direction:column;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-3) var(--ui-spacing-2)}.ui-layout__sidebar-brand{display:flex;align-items:center;gap:var(--ui-spacing-2);min-width:0}.ui-layout__sidebar-title{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__collapse-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-full);cursor:pointer;color:var(--ui-color-text-muted);flex-shrink:0;transition:all var(--ui-transition-fast)}.ui-layout__collapse-btn:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text);border-color:var(--ui-color-text-muted)}.ui-layout__collapse-btn:focus{outline:none}.ui-layout__collapse-btn:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__collapse-icon{transition:transform var(--ui-transition-normal)}.ui-layout__sidebar--collapsed .ui-layout__collapse-icon{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.ui-layout__collapse-icon{transition:none}}.ui-layout__close-btn{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-sm);cursor:pointer;padding:var(--ui-spacing-1);color:var(--ui-color-text-muted);transition:all var(--ui-transition-fast)}.ui-layout__close-btn:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-layout__close-btn:focus{outline:none}.ui-layout__close-btn:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__sidebar-nav{flex:1;padding:var(--ui-spacing-3) 0;overflow-y:auto}.ui-layout__nav-section{padding:0 var(--ui-spacing-3);margin-bottom:var(--ui-spacing-4)}.ui-layout__nav-section-title{display:block;font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);text-transform:uppercase;letter-spacing:.05em;padding:var(--ui-spacing-1) var(--ui-spacing-3);margin-bottom:var(--ui-spacing-1)}.ui-layout__nav-link{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-2) var(--ui-spacing-3);border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);text-decoration:none;transition:all var(--ui-transition-fast);cursor:pointer}.ui-layout__nav-link:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text);text-decoration:none}.ui-layout__nav-link:focus{outline:none}.ui-layout__nav-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__nav-link--active{background:var(--ui-color-primary-light);color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__nav-link--parent{width:100%;background:none;border:none;text-align:left;font-family:inherit;justify-content:flex-start}.ui-layout__nav-link--child{font-size:.8rem;padding:.25rem var(--ui-spacing-2)}.ui-layout__nav-icon{flex-shrink:0}.ui-layout__nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__nav-external{flex-shrink:0;opacity:.5}.ui-layout__nav-chevron{flex-shrink:0;display:inline-flex;align-items:center;color:var(--ui-color-text-muted);transition:transform var(--ui-transition-fast)}.ui-layout__nav-link--expanded .ui-layout__nav-chevron{transform:rotate(90deg)}.ui-layout__nav-link--active .ui-layout__nav-chevron{color:var(--ui-color-primary)}@media (prefers-reduced-motion: reduce){.ui-layout__nav-chevron{transition:none}}.ui-layout__nav-children{margin-top:var(--ui-spacing-1);margin-left:calc(var(--ui-spacing-3) + 4px);padding-left:var(--ui-spacing-2);border-left:2px solid var(--ui-color-border)}.ui-layout__nav-group-label{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-color-text-muted);padding:var(--ui-spacing-1) var(--ui-spacing-2);margin-top:var(--ui-spacing-2)}.ui-layout__nav-group-label:first-child{margin-top:0}.ui-layout__nav-divider{border:none;border-top:1px solid var(--ui-color-border);margin:var(--ui-spacing-2) var(--ui-spacing-3)}.ui-layout__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ui-spacing-1);border-radius:var(--ui-radius-full);background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);font-size:.65rem;font-weight:var(--ui-font-weight-bold);line-height:1;flex-shrink:0}.ui-layout__sidebar-footer{padding:var(--ui-spacing-3) var(--ui-spacing-4);border-top:1px solid var(--ui-color-border);flex-shrink:0;display:none}.ui-layout__version-badge{display:inline-block;padding:2px 8px;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-full);font-size:var(--ui-font-size-xs);color:var(--ui-color-text-muted);font-family:var(--ui-font-family-mono)}.ui-layout__content{flex:1;overflow-y:auto;padding:var(--ui-spacing-8);background:var(--ui-color-bg-subtle)}.ui-layout__content:focus{outline:none}.ui-layout__content--fullscreen{padding:0}.ui-layout__content--topbar{flex:1;overflow-y:auto}.ui-layout__content--transitioning{animation:ui-layout-page-enter var(--ui-transition-normal, .25s) ease-out}@media (prefers-reduced-motion: reduce){.ui-layout__content--transitioning{animation:none}}.ui-layout__content-inner{width:100%;min-width:0}.ui-layout__content-inner--boxed{max-width:var(--ui-layout-content-max-width, 1200px);margin-left:auto;margin-right:auto}@keyframes ui-layout-page-enter{0%{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.ui-layout__page-header{margin-bottom:var(--ui-spacing-5)}.ui-layout__breadcrumb-nav{margin-bottom:var(--ui-spacing-2)}.ui-layout__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-family:var(--ui-font-family);font-size:var(--ui-font-size-sm);line-height:var(--ui-line-height-normal);gap:var(--ui-spacing-1)}.ui-layout__breadcrumb-item{display:inline-flex;align-items:center;gap:var(--ui-spacing-1)}.ui-layout__breadcrumb-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--ui-color-primary);border-radius:var(--ui-radius-sm);padding:2px 4px;margin:-2px -4px;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-layout__breadcrumb-link:hover{color:var(--ui-color-primary-hover);text-decoration:underline}.ui-layout__breadcrumb-link:focus{outline:none}.ui-layout__breadcrumb-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__breadcrumb-link lucide-icon{transform:translateY(2px)}.ui-layout__breadcrumb-text{white-space:nowrap}.ui-layout__breadcrumb-text--current{font-weight:var(--ui-font-weight-medium);color:var(--ui-color-text)}.ui-layout__breadcrumb-sep{display:inline-flex;align-items:center;color:var(--ui-color-text-muted);flex-shrink:0}.ui-layout__breadcrumb-sep lucide-icon{transform:translateY(3px)}.ui-layout__page-title{margin:0;font-family:var(--ui-font-family);font-size:var(--ui-font-size-2xl);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight)}.ui-layout__page-title:focus{outline:none}.ui-layout__footer{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-4);padding:var(--ui-spacing-3) var(--ui-spacing-4);background:var(--ui-color-surface);border-top:1px solid var(--ui-color-border);flex-shrink:0;flex-wrap:wrap}.ui-layout__footer-links{display:flex;gap:var(--ui-spacing-3);flex-wrap:wrap}.ui-layout__footer-link{display:inline-flex;align-items:center;gap:4px;color:var(--ui-color-text-muted);font-size:var(--ui-font-size-xs);text-decoration:none;transition:color var(--ui-transition-fast)}.ui-layout__footer-link:hover{color:var(--ui-color-primary);text-decoration:underline}.ui-layout__footer-link:focus{outline:none}.ui-layout__footer-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__footer-text{font-size:var(--ui-font-size-xs);color:var(--ui-color-text);font-family:var(--ui-font-family-mono)}.ui-layout__fab{position:fixed;bottom:var(--ui-spacing-6);right:var(--ui-spacing-6);z-index:var(--ui-z-fixed);display:flex;flex-direction:column-reverse;align-items:center;gap:var(--ui-spacing-3)}.ui-layout__fab--bottom-left{right:auto;left:var(--ui-spacing-6)}.ui-layout__fab-main{width:56px;height:56px;border-radius:var(--ui-radius-full);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--ui-shadow-lg);transition:all var(--ui-transition-fast)}.ui-layout__fab-main--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-layout__fab-main--primary:hover{filter:brightness(1.1)}.ui-layout__fab-main--accent{background:var(--ui-color-accent, var(--ui-color-primary));color:var(--ui-color-primary-contrast)}.ui-layout__fab-main--accent:hover{filter:brightness(1.1)}.ui-layout__fab-main--warn{background:var(--ui-color-warn, #ef4444);color:#fff}.ui-layout__fab-main--warn:hover{filter:brightness(1.1)}.ui-layout__fab-main--neutral{background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border)}.ui-layout__fab-main--neutral:hover{background:var(--ui-color-surface-hover)}.ui-layout__fab-main:focus{outline:none}.ui-layout__fab-main:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__fab-main-icon{transition:transform var(--ui-transition-fast)}.ui-layout__fab--open .ui-layout__fab-main-icon{transform:rotate(45deg)}@media (prefers-reduced-motion: reduce){.ui-layout__fab-main-icon{transition:none}}.ui-layout__fab-actions{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--ui-spacing-2)}.ui-layout__fab-action{width:44px;height:44px;border-radius:var(--ui-radius-full);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:var(--ui-shadow-md);animation:ui-layout-fab-pop-in var(--ui-transition-fast) ease-out both;transition:all var(--ui-transition-fast)}.ui-layout__fab-action--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-layout__fab-action--accent{background:var(--ui-color-accent, var(--ui-color-primary));color:var(--ui-color-primary-contrast)}.ui-layout__fab-action--warn{background:var(--ui-color-warn, #ef4444);color:#fff}.ui-layout__fab-action--neutral,.ui-layout__fab-action--ghost,.ui-layout__fab-action--outline{background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border)}.ui-layout__fab-action:hover{filter:brightness(1.1)}.ui-layout__fab-action:focus{outline:none}.ui-layout__fab-action:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}@media (prefers-reduced-motion: reduce){.ui-layout__fab-action{animation:none}}.ui-layout__fab-action-label{position:absolute;right:calc(100% + var(--ui-spacing-2));white-space:nowrap;background:var(--ui-color-neutral-900);color:#fff;font-size:var(--ui-font-size-xs);padding:var(--ui-spacing-1) var(--ui-spacing-2);border-radius:var(--ui-radius-sm);pointer-events:none;box-shadow:var(--ui-shadow-sm)}.ui-layout__fab--bottom-left .ui-layout__fab-action-label{right:auto;left:calc(100% + var(--ui-spacing-2))}@keyframes ui-layout-fab-pop-in{0%{opacity:0;transform:scale(.3) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.ui-layout__bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;padding-bottom:env(safe-area-inset-bottom,0);background:var(--ui-color-surface);border-top:1px solid var(--ui-color-border);z-index:var(--ui-z-fixed);justify-content:space-around;align-items:stretch}.ui-layout__bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;color:var(--ui-color-text-muted);text-decoration:none;font-size:.65rem;font-weight:var(--ui-font-weight-medium);padding:var(--ui-spacing-1) 0;position:relative;transition:color var(--ui-transition-fast)}.ui-layout__bottom-nav-item:hover{color:var(--ui-color-text)}.ui-layout__bottom-nav-item--active{color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__bottom-nav-item:focus{outline:none}.ui-layout__bottom-nav-item:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bottom-nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64px;text-align:center}.ui-layout__desktop-only{display:initial}.ui-layout__mobile-only{display:none}.ui-layout__bar-stack{display:flex;flex-direction:column;flex-shrink:0}.ui-layout__bar{display:flex;align-items:center;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm)}.ui-layout__bar--notification{min-height:44px;gap:var(--ui-spacing-2);justify-content:center;font-weight:var(--ui-font-weight-medium)}.ui-layout__bar--notification-primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-layout__bar--notification-accent{background:var(--ui-color-accent, var(--ui-color-primary));color:var(--ui-color-primary-contrast)}.ui-layout__bar--notification-warn{background:var(--ui-color-warn, #ef4444);color:#fff}.ui-layout__bar--notification-neutral{background:var(--ui-color-surface);color:var(--ui-color-text);border-bottom:1px solid var(--ui-color-border)}.ui-layout__bar--notification-ghost,.ui-layout__bar--notification-outline{background:var(--ui-color-bg-muted);color:var(--ui-color-text);border-bottom:1px solid var(--ui-color-border)}.ui-layout__bar--brand{min-height:56px;justify-content:space-between;background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);gap:var(--ui-spacing-4)}.ui-layout__bar--navigation{position:relative;min-height:44px;background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);gap:var(--ui-spacing-1);overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,transparent 0,black var(--ui-spacing-4),black calc(100% - var(--ui-spacing-4)),transparent 100%)}.ui-layout__bar--navigation::-webkit-scrollbar{display:none}.ui-layout__bar--links{min-height:36px;background:var(--ui-color-bg-muted);border-bottom:1px solid var(--ui-color-border);gap:var(--ui-spacing-3);font-size:var(--ui-font-size-xs)}.ui-layout__bar-text{flex:1;text-align:center}.ui-layout__bar-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--ui-spacing-1);border-radius:var(--ui-radius-sm);color:inherit;opacity:.8;transition:opacity var(--ui-transition-fast)}.ui-layout__bar-dismiss:hover{opacity:1}.ui-layout__bar-dismiss:focus{outline:none}.ui-layout__bar-dismiss:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bar-brand-left{display:flex;align-items:center;gap:var(--ui-spacing-3);min-width:0}.ui-layout__bar-logo,.ui-layout__bar-logo-img{width:32px;height:32px;border-radius:var(--ui-radius-md);flex-shrink:0}.ui-layout__bar-logo{display:flex;align-items:center;justify-content:center;background:var(--ui-color-primary);color:var(--ui-color-primary-contrast);font-size:var(--ui-font-size-xs);font-weight:var(--ui-font-weight-bold)}.ui-layout__bar-logo-img{object-fit:contain}.ui-layout__bar-title{font-size:var(--ui-font-size-base);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-layout__topbar-hamburger{display:none}.ui-layout__user-dropdown{position:relative}.ui-layout__user-dropdown-trigger{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-1) var(--ui-spacing-2);background:none;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);cursor:pointer;font-family:inherit;font-size:var(--ui-font-size-sm);color:var(--ui-color-text);transition:all var(--ui-transition-fast)}.ui-layout__user-dropdown-trigger:hover{background:var(--ui-color-surface-hover)}.ui-layout__user-dropdown-trigger:focus{outline:none}.ui-layout__user-dropdown-trigger:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__user-avatar{width:28px;height:28px;border-radius:var(--ui-radius-full);object-fit:cover}.ui-layout__user-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.ui-layout__user-chevron{transition:transform var(--ui-transition-fast);color:var(--ui-color-text-muted)}[aria-expanded=true] .ui-layout__user-chevron{transform:rotate(180deg)}.ui-layout__user-dropdown-menu{position:absolute;top:calc(100% + var(--ui-spacing-1));right:0;min-width:180px;background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-md);padding:var(--ui-spacing-1) 0;z-index:var(--ui-z-dropdown);animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}.ui-layout__user-dropdown-item{display:flex;align-items:center;gap:var(--ui-spacing-2);width:100%;padding:var(--ui-spacing-2) var(--ui-spacing-3);background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--ui-font-size-sm);color:var(--ui-color-text);text-decoration:none;text-align:left;transition:background var(--ui-transition-fast)}.ui-layout__user-dropdown-item:hover{background:var(--ui-color-surface-hover)}.ui-layout__user-dropdown-item:focus{outline:none}.ui-layout__user-dropdown-item:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__user-dropdown-divider{border:none;border-top:1px solid var(--ui-color-border);margin:var(--ui-spacing-1) 0}.ui-layout__hnav-link{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-2) var(--ui-spacing-3);border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-medium);text-decoration:none;transition:all var(--ui-transition-fast);cursor:pointer;white-space:nowrap;background:none;border:none;font-family:inherit}.ui-layout__hnav-link:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-layout__hnav-link:focus{outline:none}.ui-layout__hnav-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__hnav-link--active{color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__hnav-link--parent{cursor:pointer}.ui-layout__hnav-link lucide-icon{transform:translateY(3px)}.ui-layout__hnav-chevron{transition:transform var(--ui-transition-fast)}.ui-layout__hnav-dropdown--open .ui-layout__hnav-chevron{transform:rotate(180deg)}.ui-layout__hnav-dropdown{position:relative}.ui-layout__hnav-dropdown-menu{position:absolute;top:calc(100% + var(--ui-spacing-1));left:0;min-width:200px;max-height:400px;overflow-y:auto;background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-md);padding:var(--ui-spacing-2);z-index:var(--ui-z-dropdown);animation:ui-layout-fade-in var(--ui-transition-fast) ease-out}.ui-layout__hnav-dropdown-label{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-color-text-muted);padding:var(--ui-spacing-1) var(--ui-spacing-2);margin-top:var(--ui-spacing-2)}.ui-layout__hnav-dropdown-label:first-child{margin-top:0}.ui-layout__hnav-dropdown-item{display:block;padding:var(--ui-spacing-1) var(--ui-spacing-2);border-radius:var(--ui-radius-sm);font-size:var(--ui-font-size-sm);color:var(--ui-color-text-secondary);text-decoration:none;transition:all var(--ui-transition-fast)}.ui-layout__hnav-dropdown-item:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-layout__hnav-dropdown-item--active{color:var(--ui-color-primary);font-weight:var(--ui-font-weight-semibold)}.ui-layout__hnav-dropdown-item:focus{outline:none}.ui-layout__hnav-dropdown-item:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bar-link{display:inline-flex;align-items:center;gap:4px;color:var(--ui-color-text-muted);text-decoration:none;transition:color var(--ui-transition-fast)}.ui-layout__bar-link:hover{color:var(--ui-color-primary)}.ui-layout__bar-link:focus{outline:none}.ui-layout__bar-link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-layout__bar-link lucide-icon{transform:translateY(3px)}@media (max-width: 767px){.ui-layout__sidebar-footer{display:block}.ui-layout__topbar{display:flex}.ui-layout:not(.ui-layout--topbar){padding-top:56px}.ui-layout__backdrop,.ui-layout__backdrop--topbar{display:block}.ui-layout__sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;min-width:300px;transform:translate(-100%);transition:transform var(--ui-transition-normal);z-index:var(--ui-z-modal)}.ui-layout__sidebar--open{transform:translate(0)}.ui-layout__sidebar--collapsed{width:300px;min-width:300px}.ui-layout__sidebar--collapsed .ui-layout__sidebar-header{flex-direction:row;align-items:center;gap:0;padding:var(--ui-spacing-4)}.ui-layout__sidebar--topbar-drawer{display:flex}}@media (max-width: 767px) and (prefers-reduced-motion: reduce){.ui-layout__sidebar{transition:none}}@media (max-width: 767px){.ui-layout__desktop-only{display:none!important}.ui-layout__mobile-only{display:initial!important}.ui-layout__content{padding:var(--ui-spacing-4)}.ui-layout__content--fullscreen{padding:0}.ui-layout__bottom-nav{display:flex}.ui-layout__fab{bottom:calc(var(--ui-spacing-4) + 56px + env(safe-area-inset-bottom,0))}.ui-layout__topbar-hamburger{display:flex}.ui-layout__bar--navigation,.ui-layout__bar--links,.ui-layout__user-label{display:none}.ui-layout__page-title{font-size:var(--ui-font-size-xl)}.ui-layout__breadcrumb{font-size:var(--ui-font-size-xs)}}@media (min-width: 768px) and (max-width: 1023px){.ui-layout__sidebar:not(.ui-layout__sidebar--topbar-drawer){position:fixed;top:0;left:0;bottom:0;width:300px;min-width:300px;transform:translate(-100%);transition:transform var(--ui-transition-normal);z-index:var(--ui-z-modal)}.ui-layout__sidebar:not(.ui-layout__sidebar--topbar-drawer).ui-layout__sidebar--open{transform:translate(0)}}@media (min-width: 768px) and (max-width: 1023px) and (prefers-reduced-motion: reduce){.ui-layout__sidebar:not(.ui-layout__sidebar--topbar-drawer){transition:none}}@media (min-width: 768px) and (max-width: 1023px){.ui-layout__topbar{display:flex}.ui-layout:not(.ui-layout--topbar){padding-top:56px}.ui-layout__backdrop,.ui-layout__backdrop--topbar{display:block}.ui-layout__desktop-only{display:none!important}.ui-layout__mobile-only{display:initial!important}.ui-layout__content{padding:var(--ui-spacing-6)}.ui-layout__content--fullscreen{padding:0}.ui-layout__topbar-hamburger{display:flex}.ui-layout__sidebar--topbar-drawer{display:flex;position:fixed;top:0;left:0;bottom:0;width:300px;min-width:300px;transform:translate(-100%);transition:transform var(--ui-transition-normal);z-index:var(--ui-z-modal)}.ui-layout__sidebar--topbar-drawer.ui-layout__sidebar--open{transform:translate(0)}}@media (min-width: 768px) and (max-width: 1023px) and (prefers-reduced-motion: reduce){.ui-layout__sidebar--topbar-drawer{transition:none}}.ui-layout--slotted{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.ui-layout__slotted-header{flex-shrink:0;width:100%}.ui-layout--slotted .ui-layout__content--slotted{flex:1}.ui-layout__slotted-footer{flex-shrink:0;width:100%}\n"] }]
+        }], propDecorators: { schema: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * ng-ui-system — Layout Builder entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiLayoutBuilderComponent,
+ *   UiLayoutService,
+ *   UiLayoutSchema,
+ *   UiNavItem,
+ * } from 'ng-ui-system';
+ * ```
+ */
+// Components
+
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/layout-builder`. Layout Builder.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiLayoutBuilderComponent, UiLayoutService };
+//# sourceMappingURL=gnggln-ng-ui-system-layout-builder.mjs.map