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

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

@@ -0,0 +1,1905 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, inject, PLATFORM_ID, Injectable, NgZone, InjectionToken, DestroyRef, ChangeDetectorRef, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, ActivatedRoute, RouterLink } from '@angular/router';
+import { filter, takeUntil, debounceTime } from 'rxjs/operators';
+import * as i1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
+import { isPlatformBrowser } from '@angular/common';
+import { Subject } from 'rxjs';
+import { Title } from '@angular/platform-browser';
+
+/** @internal Size-to-icon-pixel mapping for consistent icon sizing. */
+const ICON_SIZE_MAP = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22,
+};
+/**
+ * Standalone button component with design-token-driven theming,
+ * variant/size system, Lucide icon support, loading states, and WCAG 2.1 AA accessibility.
+ *
+ * Uses native `<button>` click events — listen with `(click)` on the host element.
+ *
+ * @selector ui-button
+ *
+ * @example
+ * ```html
+ * <!-- Basic -->
+ * <ui-button label="Save" variant="primary" icon="save" (click)="save()" />
+ *
+ * <!-- Loading -->
+ * <ui-button label="Submitting..." variant="primary" [loading]="true" />
+ *
+ * <!-- Icon-only: tooltip o ariaLabel forniscono il nome accessibile -->
+ * <ui-button icon="trash-2" variant="warn" tooltip="Elimina" (click)="delete()" />
+ * ```
+ */
+class UiButtonComponent {
+    constructor() {
+        /** Button label text. */
+        this.label = '';
+        /** Tooltip text shown on hover (uses Angular Material tooltip). */
+        this.tooltip = '';
+        /** Visual style variant. */
+        this.variant = 'primary';
+        /** Size variant. */
+        this.size = 'md';
+        /** Icon position relative to the label. */
+        this.iconPosition = 'trailing';
+        /** Whether the button is in a loading state. Disables interaction and shows spinner. */
+        this.loading = false;
+        /** Whether the button is disabled. */
+        this.disabled = false;
+        /** Expand button to full container width. */
+        this.fullWidth = false;
+        /** HTML button type attribute. */
+        this.type = 'button';
+    }
+    /**
+     * Nome accessibile risolto per il pulsante nativo.
+     * Usa `ariaLabel` se impostato; per pulsanti solo icona senza testo visibile
+     * ricade sul `tooltip` (il tooltip Material non sostituisce il nome accessibile).
+     */
+    get effectiveAriaLabel() {
+        const explicit = this.ariaLabel?.trim();
+        if (explicit)
+            return explicit;
+        if (this.label?.trim())
+            return undefined;
+        const tip = this.tooltip?.trim();
+        if (this.icon && tip)
+            return tip;
+        return undefined;
+    }
+    /** Computed icon pixel size based on button size. */
+    get iconSize() {
+        return ICON_SIZE_MAP[this.size] ?? 18;
+    }
+    /** Assembled CSS class string for the native button element. */
+    get buttonClasses() {
+        return [
+            'ui-button',
+            `ui-button--${this.variant}`,
+            `ui-button--${this.size}`,
+            this.loading ? 'ui-button--loading' : '',
+            this.fullWidth ? 'ui-button--full-width' : '',
+            !this.label && this.icon ? 'ui-button--icon-only' : '',
+            this.customClass ?? '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiButtonComponent, isStandalone: true, selector: "ui-button", inputs: { label: "label", tooltip: "tooltip", variant: "variant", size: "size", icon: "icon", iconPosition: "iconPosition", loading: "loading", disabled: "disabled", fullWidth: "fullWidth", type: "type", ariaLabel: "ariaLabel", customClass: "customClass" }, host: { properties: { "class.ui-button-host--full-width": "fullWidth" }, classAttribute: "ui-button-host" }, ngImport: i0, template: `
+    <button
+      [type]="type"
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      [attr.aria-label]="effectiveAriaLabel || null"
+      [attr.aria-busy]="loading || null"
+      [matTooltip]="tooltip"
+    >
+      <span class="ui-button__content" [class.ui-button__content--hidden]="loading">
+        @if (icon && iconPosition === 'leading') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+        @if (label) {
+          <span class="ui-button__label">{{ label }}</span>
+        }
+        <ng-content />
+        @if (icon && iconPosition === 'trailing') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+      </span>
+      @if (loading) {
+        <span class="ui-button__spinner-overlay">
+          <span class="ui-button__spinner" aria-hidden="true"></span>
+          <span class="ui-button__sr-only">Loading</span>
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [".ui-button-host{display:inline-flex}.ui-button-host--full-width{display:flex;width:100%}.ui-button{appearance:none;border:none;cursor:pointer;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);letter-spacing:.01em;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-md);white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),opacity var(--ui-transition-fast)}.ui-button:focus{outline:none}.ui-button:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button--full-width{width:100%}.ui-button--xs{height:28px;padding:0 var(--ui-spacing-2);font-size:var(--ui-font-size-xs);border-radius:var(--ui-radius-sm);gap:var(--ui-spacing-1)}.ui-button--sm{height:32px;padding:0 var(--ui-spacing-3);font-size:var(--ui-font-size-xs);gap:6px}.ui-button--md{height:36px;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--lg{height:40px;padding:0 var(--ui-spacing-5);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--xl{height:48px;padding:0 var(--ui-spacing-6);font-size:var(--ui-font-size-md);gap:var(--ui-spacing-3)}.ui-button--icon-only.ui-button--xs{width:28px;padding:0}.ui-button--icon-only.ui-button--sm{width:32px;padding:0}.ui-button--icon-only.ui-button--md{width:36px;padding:0}.ui-button--icon-only.ui-button--lg{width:40px;padding:0}.ui-button--icon-only.ui-button--xl{width:48px;padding:0}.ui-button--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--accent{background:var(--ui-color-accent);color:var(--ui-color-accent-contrast)}.ui-button--accent:hover:not(:disabled){background:var(--ui-color-accent-hover)}.ui-button--accent:active:not(:disabled){background:var(--ui-color-accent-active)}.ui-button--warn{background:var(--ui-color-warn);color:var(--ui-color-warn-contrast)}.ui-button--warn:hover:not(:disabled){background:var(--ui-color-warn-hover)}.ui-button--warn:active:not(:disabled){background:var(--ui-color-warn-active)}.ui-button--neutral{background:var(--ui-color-neutral-200);color:var(--ui-color-text)}.ui-button--neutral:hover:not(:disabled){background:var(--ui-color-neutral-300)}.ui-button--neutral:active:not(:disabled){background:var(--ui-color-neutral-400);color:var(--ui-color-text-inverse)}.ui-button--ghost{background:transparent;color:var(--ui-color-text-secondary)}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-button--ghost:active:not(:disabled){background:var(--ui-color-neutral-200)}.ui-button--outline{background:transparent;color:var(--ui-color-primary);border:1.5px solid var(--ui-color-border-strong)}.ui-button--outline:hover:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary)}.ui-button--outline:active:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary-hover)}.ui-button--loading{cursor:wait;pointer-events:none}.ui-button__content{display:inline-flex;align-items:center;gap:inherit;transition:visibility var(--ui-transition-fast)}.ui-button__content--hidden{visibility:hidden}.ui-button__label{line-height:1;background-color:transparent!important}.ui-button__spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ui-button__spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-button-spin .6s linear infinite}@keyframes ui-button-spin{to{transform:rotate(360deg)}}.ui-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.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: UiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', standalone: true, imports: [MatTooltipModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-button-host',
+                        '[class.ui-button-host--full-width]': 'fullWidth',
+                    }, template: `
+    <button
+      [type]="type"
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      [attr.aria-label]="effectiveAriaLabel || null"
+      [attr.aria-busy]="loading || null"
+      [matTooltip]="tooltip"
+    >
+      <span class="ui-button__content" [class.ui-button__content--hidden]="loading">
+        @if (icon && iconPosition === 'leading') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+        @if (label) {
+          <span class="ui-button__label">{{ label }}</span>
+        }
+        <ng-content />
+        @if (icon && iconPosition === 'trailing') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+      </span>
+      @if (loading) {
+        <span class="ui-button__spinner-overlay">
+          <span class="ui-button__spinner" aria-hidden="true"></span>
+          <span class="ui-button__sr-only">Loading</span>
+        </span>
+      }
+    </button>
+  `, styles: [".ui-button-host{display:inline-flex}.ui-button-host--full-width{display:flex;width:100%}.ui-button{appearance:none;border:none;cursor:pointer;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);letter-spacing:.01em;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-md);white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),opacity var(--ui-transition-fast)}.ui-button:focus{outline:none}.ui-button:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button--full-width{width:100%}.ui-button--xs{height:28px;padding:0 var(--ui-spacing-2);font-size:var(--ui-font-size-xs);border-radius:var(--ui-radius-sm);gap:var(--ui-spacing-1)}.ui-button--sm{height:32px;padding:0 var(--ui-spacing-3);font-size:var(--ui-font-size-xs);gap:6px}.ui-button--md{height:36px;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--lg{height:40px;padding:0 var(--ui-spacing-5);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--xl{height:48px;padding:0 var(--ui-spacing-6);font-size:var(--ui-font-size-md);gap:var(--ui-spacing-3)}.ui-button--icon-only.ui-button--xs{width:28px;padding:0}.ui-button--icon-only.ui-button--sm{width:32px;padding:0}.ui-button--icon-only.ui-button--md{width:36px;padding:0}.ui-button--icon-only.ui-button--lg{width:40px;padding:0}.ui-button--icon-only.ui-button--xl{width:48px;padding:0}.ui-button--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--accent{background:var(--ui-color-accent);color:var(--ui-color-accent-contrast)}.ui-button--accent:hover:not(:disabled){background:var(--ui-color-accent-hover)}.ui-button--accent:active:not(:disabled){background:var(--ui-color-accent-active)}.ui-button--warn{background:var(--ui-color-warn);color:var(--ui-color-warn-contrast)}.ui-button--warn:hover:not(:disabled){background:var(--ui-color-warn-hover)}.ui-button--warn:active:not(:disabled){background:var(--ui-color-warn-active)}.ui-button--neutral{background:var(--ui-color-neutral-200);color:var(--ui-color-text)}.ui-button--neutral:hover:not(:disabled){background:var(--ui-color-neutral-300)}.ui-button--neutral:active:not(:disabled){background:var(--ui-color-neutral-400);color:var(--ui-color-text-inverse)}.ui-button--ghost{background:transparent;color:var(--ui-color-text-secondary)}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-button--ghost:active:not(:disabled){background:var(--ui-color-neutral-200)}.ui-button--outline{background:transparent;color:var(--ui-color-primary);border:1.5px solid var(--ui-color-border-strong)}.ui-button--outline:hover:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary)}.ui-button--outline:active:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary-hover)}.ui-button--loading{cursor:wait;pointer-events:none}.ui-button__content{display:inline-flex;align-items:center;gap:inherit;transition:visibility var(--ui-transition-fast)}.ui-button__content--hidden{visibility:hidden}.ui-button__label{line-height:1;background-color:transparent!important}.ui-button__spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ui-button__spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-button-spin .6s linear infinite}@keyframes ui-button-spin{to{transform:rotate(360deg)}}.ui-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }] } });
+
+/**
+ * @module ng-ui-system/blackbox
+ * Types and interfaces for the BlackBox observability service.
+ *
+ * The BlackBox service acts as a "black box recorder" for user sessions,
+ * capturing navigation, UI interactions, form events and HTTP calls
+ * in a compressed, opaque format stored in IndexedDB.
+ */
+// ─── Defaults ────────────────────────────────────────────────────────
+/** Default configuration values. */
+const UI_BLACKBOX_DEFAULTS = {
+    maxStorageMb: 50,
+    flushIntervalMs: 5000,
+    flushThreshold: 20,
+    bufferDebounceMs: 500,
+    formTracking: {
+        trackValues: false,
+        trackFocus: true,
+        trackBlur: true,
+        trackValueChanges: true,
+        trackValidation: true,
+        debounceMs: 500,
+    },
+};
+
+/**
+ * @module ng-ui-system/blackbox
+ * Fingerprint service — generates a stable device/browser hash
+ * using the open-source FingerprintJS library (MIT, no API key required).
+ *
+ * The fingerprint is computed once and cached in `localStorage` under
+ * the key `__ui_bb_fp` to avoid redundant recalculations.
+ */
+/** localStorage key for the cached fingerprint. */
+const FP_CACHE_KEY = '__ui_bb_fp';
+/**
+ * Generates and caches a stable browser/device fingerprint.
+ *
+ * Uses `@fingerprintjs/fingerprintjs` (open-source, MIT) which analyses
+ * canvas rendering, WebGL, audio context, screen properties, timezone,
+ * user-agent, and other browser signals to produce a stable hash.
+ *
+ * @usageNotes
+ * ```typescript
+ * const fp = inject(UiBlackboxFingerprintService);
+ * const hash = await fp.getFingerprint();
+ * // => "a1b2c3d4e5f6..." (stable across sessions)
+ * ```
+ */
+class UiBlackboxFingerprintService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.cached = null;
+    }
+    /**
+     * Returns the stable fingerprint for this device/browser.
+     *
+     * On first call, loads FingerprintJS dynamically, computes the hash,
+     * and caches it in both memory and `localStorage`.
+     * Subsequent calls return the cached value immediately.
+     */
+    async getFingerprint() {
+        // Return cached value if available
+        if (this.cached) {
+            return this.cached;
+        }
+        // SSR guard
+        if (!isPlatformBrowser(this.platformId)) {
+            return 'ssr-placeholder';
+        }
+        // Try localStorage cache first
+        try {
+            const stored = localStorage.getItem(FP_CACHE_KEY);
+            if (stored) {
+                this.cached = stored;
+                return stored;
+            }
+        }
+        catch {
+            // localStorage may be unavailable (privacy mode, quota exceeded)
+        }
+        // Compute fingerprint via FingerprintJS
+        try {
+            const FingerprintJS = await import('@fingerprintjs/fingerprintjs');
+            const agent = await FingerprintJS.load();
+            const result = await agent.get();
+            this.cached = result.visitorId;
+            // Persist to localStorage
+            try {
+                localStorage.setItem(FP_CACHE_KEY, this.cached);
+            }
+            catch {
+                // Silently ignore storage errors
+            }
+            return this.cached;
+        }
+        catch {
+            // Fallback: generate a pseudo-fingerprint from available signals
+            const fallback = this.generateFallbackFingerprint();
+            this.cached = fallback;
+            try {
+                localStorage.setItem(FP_CACHE_KEY, fallback);
+            }
+            catch {
+                // Silently ignore
+            }
+            return fallback;
+        }
+    }
+    /**
+     * Fallback fingerprint when FingerprintJS is unavailable.
+     * Combines basic browser signals into a hash.
+     * @internal
+     */
+    generateFallbackFingerprint() {
+        const signals = [
+            navigator.userAgent,
+            navigator.language,
+            screen.width + 'x' + screen.height,
+            screen.colorDepth?.toString() ?? '',
+            Intl.DateTimeFormat().resolvedOptions().timeZone,
+            navigator.hardwareConcurrency?.toString() ?? '',
+        ].join('|');
+        // Simple string hash (djb2)
+        let hash = 5381;
+        for (let i = 0; i < signals.length; i++) {
+            hash = ((hash << 5) + hash + signals.charCodeAt(i)) >>> 0;
+        }
+        return hash.toString(36).padStart(12, '0');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxFingerprintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxFingerprintService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxFingerprintService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * IndexedDB storage adapter for BlackBox sessions.
+ *
+ * Handles persistence, compression (via native CompressionStream gzip),
+ * quota enforcement, and JSONL export.
+ *
+ * Design notes:
+ * - DB name: `ui-blackbox`, object store: `sessions`
+ * - Each session is gzip-compressed before storage for both size
+ *   reduction and inherent obfuscation
+ * - Quota enforced by total stored size; oldest sessions are pruned first
+ */
+const DB_NAME = 'ui-blackbox';
+const DB_VERSION = 1;
+const STORE_NAME = 'sessions';
+/**
+ * Low-level IndexedDB adapter for reading/writing compressed BlackBox sessions.
+ *
+ * @usageNotes
+ * This service is used internally by `UiBlackboxService`.
+ * Consumers should interact with the higher-level `UiBlackboxService` API.
+ */
+class UiBlackboxStorageService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.db = null;
+        this.maxStorageMb = UI_BLACKBOX_DEFAULTS.maxStorageMb;
+    }
+    // ─── Configuration ─────────────────────────────────────────────────
+    /** Update the storage quota from the parent service config. */
+    setMaxStorageMb(mb) {
+        this.maxStorageMb = mb;
+    }
+    // ─── Database lifecycle ────────────────────────────────────────────
+    /** Open (or create) the IndexedDB database. */
+    async openDb() {
+        if (this.db)
+            return this.db;
+        if (!isPlatformBrowser(this.platformId)) {
+            throw new Error('IndexedDB is not available in SSR');
+        }
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(DB_NAME, DB_VERSION);
+            request.onupgradeneeded = () => {
+                const db = request.result;
+                if (!db.objectStoreNames.contains(STORE_NAME)) {
+                    const store = db.createObjectStore(STORE_NAME, { keyPath: 'sessionId' });
+                    store.createIndex('fingerprint', 'fingerprint', { unique: false });
+                    store.createIndex('startedAt', 'startedAt', { unique: false });
+                }
+            };
+            request.onsuccess = () => {
+                this.db = request.result;
+                resolve(this.db);
+            };
+            request.onerror = () => reject(request.error);
+        });
+    }
+    // ─── Compression helpers ───────────────────────────────────────────
+    /** Compress a string to a gzip Uint8Array using native CompressionStream. */
+    async compress(data) {
+        const encoder = new TextEncoder();
+        const stream = new Blob([encoder.encode(data)])
+            .stream()
+            .pipeThrough(new CompressionStream('gzip'));
+        const reader = stream.getReader();
+        const chunks = [];
+        let done = false;
+        while (!done) {
+            const result = await reader.read();
+            done = result.done;
+            if (result.value) {
+                chunks.push(result.value);
+            }
+        }
+        // Merge chunks into a single ArrayBuffer-backed Uint8Array
+        const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
+        const buffer = new ArrayBuffer(totalLength);
+        const merged = new Uint8Array(buffer);
+        let offset = 0;
+        for (const chunk of chunks) {
+            merged.set(chunk, offset);
+            offset += chunk.length;
+        }
+        return merged;
+    }
+    /** Decompress a gzip Uint8Array back to a string. */
+    async decompress(data) {
+        const stream = new Blob([data])
+            .stream()
+            .pipeThrough(new DecompressionStream('gzip'));
+        const reader = stream.getReader();
+        const decoder = new TextDecoder();
+        let result = '';
+        let done = false;
+        while (!done) {
+            const chunk = await reader.read();
+            done = chunk.done;
+            if (chunk.value) {
+                result += decoder.decode(chunk.value, { stream: !done });
+            }
+        }
+        return result;
+    }
+    // ─── CRUD ──────────────────────────────────────────────────────────
+    /**
+     * Persist a session to IndexedDB (gzip-compressed).
+     * Enforces quota after saving.
+     */
+    async saveSession(session) {
+        const db = await this.openDb();
+        const json = JSON.stringify(session);
+        const compressed = await this.compress(json);
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            // Store as { sessionId, fingerprint, startedAt, data: Uint8Array }
+            store.put({
+                sessionId: session.sessionId,
+                fingerprint: session.fingerprint,
+                startedAt: session.startedAt,
+                sizeBytes: compressed.byteLength,
+                data: compressed,
+            });
+            tx.oncomplete = () => {
+                this.enforceQuota().then(resolve).catch(resolve);
+            };
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    /**
+     * Read and decompress a single session by ID.
+     */
+    async getSession(sessionId) {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const req = store.get(sessionId);
+            req.onsuccess = async () => {
+                if (!req.result) {
+                    resolve(null);
+                    return;
+                }
+                try {
+                    const json = await this.decompress(req.result.data);
+                    resolve(JSON.parse(json));
+                }
+                catch (e) {
+                    reject(e);
+                }
+            };
+            req.onerror = () => reject(req.error);
+        });
+    }
+    /**
+     * Get all stored sessions (decompressed).
+     */
+    async getAllSessions() {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const req = store.getAll();
+            req.onsuccess = async () => {
+                try {
+                    const sessions = [];
+                    for (const record of req.result) {
+                        const json = await this.decompress(record.data);
+                        sessions.push(JSON.parse(json));
+                    }
+                    resolve(sessions);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            };
+            req.onerror = () => reject(req.error);
+        });
+    }
+    /**
+     * Get all sessions for a given fingerprint.
+     */
+    async getSessionsByFingerprint(fingerprint) {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const index = store.index('fingerprint');
+            const req = index.getAll(fingerprint);
+            req.onsuccess = async () => {
+                try {
+                    const sessions = [];
+                    for (const record of req.result) {
+                        const json = await this.decompress(record.data);
+                        sessions.push(JSON.parse(json));
+                    }
+                    resolve(sessions);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            };
+            req.onerror = () => reject(req.error);
+        });
+    }
+    /**
+     * Generate a downloadable JSONL Blob of all sessions.
+     * Each line is one JSON-serialised session (decompressed).
+     */
+    async exportDump() {
+        const sessions = await this.getAllSessions();
+        const lines = sessions.map((s) => JSON.stringify(s)).join('\n');
+        return new Blob([lines], { type: 'application/x-ndjson' });
+    }
+    /**
+     * Delete all stored sessions.
+     */
+    async clearAll() {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            store.clear();
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    // ─── Quota enforcement ─────────────────────────────────────────────
+    /**
+     * Prune oldest sessions until total stored size is under `maxStorageMb`.
+     * @internal
+     */
+    async enforceQuota() {
+        const db = await this.openDb();
+        const maxBytes = this.maxStorageMb * 1024 * 1024;
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            const index = store.index('startedAt');
+            // Collect all records sorted by startedAt (ascending = oldest first)
+            const cursorReq = index.openCursor();
+            const records = [];
+            let totalSize = 0;
+            cursorReq.onsuccess = () => {
+                const cursor = cursorReq.result;
+                if (cursor) {
+                    const size = cursor.value.sizeBytes || 0;
+                    totalSize += size;
+                    records.push({ key: cursor.primaryKey, size });
+                    cursor.continue();
+                }
+                else {
+                    // Cursor exhausted — prune if over quota
+                    if (totalSize <= maxBytes) {
+                        resolve();
+                        return;
+                    }
+                    let freed = 0;
+                    const target = totalSize - maxBytes;
+                    for (const record of records) {
+                        if (freed >= target)
+                            break;
+                        store.delete(record.key);
+                        freed += record.size;
+                    }
+                    resolve();
+                }
+            };
+            cursorReq.onerror = () => reject(cursorReq.error);
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * Core BlackBox observability service — the main entry point for session
+ * recording, event buffering, and export.
+ *
+ * Architecture:
+ * - Root singleton (`providedIn: 'root'`)
+ * - On first inject: generates fingerprint, creates session, subscribes to Router events
+ * - Centralised in-memory buffer with periodic/threshold-based flush to IndexedDB
+ * - `window:beforeunload` triggers a final best-effort async flush
+ */
+/**
+ * Central BlackBox observability service.
+ *
+ * Records navigation, UI interactions, form events, and HTTP calls
+ * into compressed sessions stored in IndexedDB.
+ *
+ * @usageNotes
+ * The service activates automatically when injected. Provide it at root level
+ * and it will start recording immediately.
+ *
+ * ```typescript
+ * // app.config.ts — just importing the service is enough
+ * import { UiBlackboxService } from '@gnggln/ng-ui-system';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     // The service is providedIn: 'root', so it's auto-provided.
+ *     // To force eager initialisation:
+ *     { provide: APP_INITIALIZER, useFactory: () => () => inject(UiBlackboxService), multi: true },
+ *   ],
+ * };
+ * ```
+ */
+class UiBlackboxService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.router = inject(Router);
+        this.zone = inject(NgZone);
+        this.fingerprint = inject(UiBlackboxFingerprintService);
+        this.storage = inject(UiBlackboxStorageService);
+        this.destroy$ = new Subject();
+        this.config = { ...UI_BLACKBOX_DEFAULTS };
+        this.currentStep = null;
+        this.initialised = false;
+        // ─── Centralised event buffer ──────────────────────────────────────
+        this.buffer = [];
+        this.flushTimerId = null;
+        this.beforeUnloadHandler = null;
+        if (isPlatformBrowser(this.platformId)) {
+            this.init();
+        }
+    }
+    // ─── Initialisation ────────────────────────────────────────────────
+    async init() {
+        // Generate session ID
+        const sessionId = this.generateUuid();
+        const fp = await this.fingerprint.getFingerprint();
+        this.session = {
+            sessionId,
+            fingerprint: fp,
+            startedAt: Date.now(),
+            userAgent: navigator.userAgent,
+            steps: [],
+            formEvents: [],
+            calls: [],
+        };
+        // Create initial step from current URL
+        this.currentStep = {
+            timestamp: Date.now(),
+            route: this.router.url,
+            actions: [],
+        };
+        this.session.steps.push(this.currentStep);
+        // Subscribe to router navigation
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this.destroy$))
+            .subscribe((event) => {
+            const previousRoute = this.currentStep?.route;
+            this.currentStep = {
+                timestamp: Date.now(),
+                route: event.urlAfterRedirects,
+                previousRoute,
+                actions: [],
+            };
+            this.pushBufferEvent({ kind: 'step', payload: this.currentStep });
+        });
+        // Setup periodic flush (outside Angular zone to avoid triggering CD)
+        this.zone.runOutsideAngular(() => {
+            this.flushTimerId = setInterval(() => this.flush(), this.config.flushIntervalMs);
+            // Best-effort flush on tab close (IndexedDB is async, no sync fallback)
+            this.beforeUnloadHandler = () => {
+                this.session.endedAt = Date.now();
+                void this.flush();
+            };
+            window.addEventListener('beforeunload', this.beforeUnloadHandler);
+        });
+        this.initialised = true;
+    }
+    // ─── Public API: Configuration ─────────────────────────────────────
+    /**
+     * Update the BlackBox configuration.
+     * Can be called at any time; changes take effect immediately.
+     */
+    configure(config) {
+        this.config = {
+            ...this.config,
+            ...config,
+            formTracking: {
+                ...this.config.formTracking,
+                ...(config.formTracking ?? {}),
+            },
+        };
+        this.storage.setMaxStorageMb(this.config.maxStorageMb);
+        // Restart flush timer with new interval
+        if (this.flushTimerId !== null) {
+            clearInterval(this.flushTimerId);
+            this.zone.runOutsideAngular(() => {
+                this.flushTimerId = setInterval(() => this.flush(), this.config.flushIntervalMs);
+            });
+        }
+    }
+    /** Returns the current configuration (readonly snapshot). */
+    getConfig() {
+        return { ...this.config };
+    }
+    // ─── Public API: Tracking ──────────────────────────────────────────
+    /**
+     * Manually track a UI action (click).
+     *
+     * Called automatically by `UiButtonAreaComponent` and the `[uiTrack]` directive.
+     * Can also be called programmatically for custom interactions.
+     *
+     * @param trackId - Identifier for the action (e.g. button id, link name).
+     * @param meta - Optional metadata: `tag`, `text`, `id` of the element.
+     */
+    trackAction(trackId, meta) {
+        if (!this.initialised)
+            return;
+        const action = {
+            timestamp: Date.now(),
+            type: 'click',
+            target: {
+                tag: meta?.tag ?? 'unknown',
+                id: meta?.id,
+                trackId,
+                text: meta?.text?.substring(0, 50),
+            },
+        };
+        // Add to current step immediately (for in-memory session access)
+        this.currentStep?.actions.push(action);
+        // Also push to buffer for persistence
+        this.pushBufferEvent({
+            kind: 'action',
+            payload: { ...action, route: this.currentStep?.route ?? this.router.url },
+        });
+    }
+    /**
+     * Track a form interaction event.
+     *
+     * Called automatically by `UiFormBuilderComponent` when the BlackBox
+     * service is available.
+     */
+    trackFormEvent(event) {
+        if (!this.initialised)
+            return;
+        this.session.formEvents.push(event);
+        this.pushBufferEvent({ kind: 'formEvent', payload: event });
+    }
+    /**
+     * Track an intercepted HTTP call.
+     * Called by `UiBlackboxInterceptor`.
+     * @internal
+     */
+    trackHttpCall(call) {
+        if (!this.initialised)
+            return;
+        this.session.calls.push(call);
+        this.pushBufferEvent({ kind: 'httpCall', payload: call });
+    }
+    // ─── Public API: Session access ────────────────────────────────────
+    /**
+     * Returns the current in-memory session (live, not yet flushed).
+     * Useful for debugging or real-time inspection.
+     */
+    getCurrentSession() {
+        return this.session;
+    }
+    /**
+     * Retrieve all sessions stored in IndexedDB (decompressed).
+     */
+    async getSessionHistory() {
+        return this.storage.getAllSessions();
+    }
+    /**
+     * Retrieve sessions for the current device fingerprint.
+     */
+    async getSessionsForDevice() {
+        const fp = await this.fingerprint.getFingerprint();
+        return this.storage.getSessionsByFingerprint(fp);
+    }
+    // ─── Public API: Export ────────────────────────────────────────────
+    /**
+     * Export all sessions as a downloadable JSONL Blob.
+     *
+     * @returns A Blob containing JSONL data (one session per line).
+     *
+     * @example
+     * ```typescript
+     * const blob = await blackbox.exportSessions();
+     * const url = URL.createObjectURL(blob);
+     * const a = document.createElement('a');
+     * a.href = url;
+     * a.download = 'blackbox-sessions.jsonl';
+     * a.click();
+     * ```
+     */
+    async exportSessions() {
+        // Flush current session first
+        await this.flush();
+        return this.storage.exportDump();
+    }
+    // ─── Public API: Lifecycle ─────────────────────────────────────────
+    /**
+     * Explicitly end the current session.
+     * Flushes all buffered events and marks the session as ended.
+     */
+    async endSession() {
+        if (!this.initialised)
+            return;
+        this.session.endedAt = Date.now();
+        await this.flush();
+    }
+    /**
+     * Clear all stored sessions from IndexedDB.
+     */
+    async clearHistory() {
+        return this.storage.clearAll();
+    }
+    // ─── Buffer management ─────────────────────────────────────────────
+    /**
+     * Push an event into the centralised buffer.
+     * Triggers an immediate flush if the buffer exceeds the threshold.
+     * @internal
+     */
+    pushBufferEvent(event) {
+        this.buffer.push(event);
+        if (this.buffer.length >= this.config.flushThreshold) {
+            this.flush();
+        }
+    }
+    /**
+     * Flush buffered events to IndexedDB asynchronously.
+     * @internal
+     */
+    async flush() {
+        if (!this.initialised || this.buffer.length === 0)
+            return;
+        // Drain buffer
+        const events = this.buffer.splice(0);
+        // Apply step events to the session
+        for (const event of events) {
+            if (event.kind === 'step') {
+                // Steps are already pushed in real-time; ensure they're in the session
+                if (!this.session.steps.includes(event.payload)) {
+                    this.session.steps.push(event.payload);
+                }
+            }
+            // Actions, formEvents, httpCalls are already pushed in real-time
+            // to the in-memory session by trackAction/trackFormEvent/trackHttpCall
+        }
+        // Save the full session snapshot
+        try {
+            await this.storage.saveSession(this.session);
+        }
+        catch (e) {
+            // storage error — re-enqueue events for next flush
+            console.warn('[UiBlackbox] Storage flush failed:', e);
+        }
+    }
+    // ─── Utilities ─────────────────────────────────────────────────────
+    /** Generate a UUID v4. */
+    generateUuid() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback for older browsers
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+    // ─── Cleanup ───────────────────────────────────────────────────────
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.flushTimerId !== null) {
+            clearInterval(this.flushTimerId);
+        }
+        if (this.beforeUnloadHandler) {
+            window.removeEventListener('beforeunload', this.beforeUnloadHandler);
+        }
+        // Final flush
+        void this.flush();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Standalone button-group component driven by a `UiButtonDescriptor[]` configuration.
+ *
+ * Renders a group of `UiButton` instances from declarative descriptors.
+ * Supports per-button loading/disabled states, dynamic visibility,
+ * alignment control, and optional navigation via Angular Router.
+ *
+ * When the `UiBlackboxService` is provided, button clicks are
+ * automatically tracked in the active session.
+ *
+ * @selector ui-button-area
+ *
+ * @example
+ * ```html
+ * <ui-button-area
+ *   [buttons]="actions"
+ *   align="end"
+ *   gap="sm"
+ *   [loadingIds]="currentlyLoading"
+ * />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Dynamic configuration
+ * actions: UiButtonDescriptor[] = [
+ *   { id: 'export', label: 'Export Excel', icon: 'file-spreadsheet', variant: 'primary',
+ *     action: () => this.exportExcel() },
+ *   { id: 'delete', label: 'Delete', icon: 'trash-2', variant: 'warn',
+ *     action: () => this.deleteSelected(), hidden: !this.hasSelection },
+ * ];
+ *
+ * // Set loading state from outside:
+ * currentlyLoading: string | string[] | null = 'export';
+ * ```
+ */
+class UiButtonAreaComponent {
+    constructor() {
+        /**
+         * Array of button descriptors to render.
+         * Buttons with `hidden: true` are filtered out.
+         */
+        this.buttons = [];
+        /** Horizontal alignment of the button group. */
+        this.align = 'end';
+        /** Accessible group label for screen readers. */
+        this.ariaLabel = 'Actions';
+        /** Gap between buttons (maps to design token spacing). */
+        this.gap = 'sm';
+        /** Stack buttons vertically on mobile viewports (<600px). */
+        this.stackOnMobile = true;
+        /**
+         * When `true`, all buttons are disabled while any button is in a loading state.
+         * Useful to prevent double-actions during async operations.
+         */
+        this.disableWhileLoading = false;
+        /** @internal */
+        this._loadingIds = new Set();
+        /** @internal Optional router for href navigation. */
+        this.router = inject(Router, { optional: true });
+        /** @internal Optional BlackBox service — auto-tracks button clicks when available. */
+        this.blackbox = inject(UiBlackboxService, { optional: true });
+    }
+    /**
+     * Set one or more buttons to a loading state by their `id`.
+     * Accepts a single string, an array of strings, or `null` to clear.
+     *
+     * @example
+     * ```html
+     * <!-- Single -->
+     * <ui-button-area [loadingIds]="'save'" />
+     *
+     * <!-- Multiple -->
+     * <ui-button-area [loadingIds]="['save', 'export']" />
+     * ```
+     */
+    set loadingIds(value) {
+        if (value === null || value === undefined) {
+            this._loadingIds = new Set();
+        }
+        else if (Array.isArray(value)) {
+            this._loadingIds = new Set(value);
+        }
+        else {
+            this._loadingIds = new Set([value]);
+        }
+    }
+    /** Buttons filtered to visible (non-hidden) entries. */
+    get visibleButtons() {
+        return this.buttons.filter((b) => !b.hidden);
+    }
+    /** Assembled CSS class string for the button area container. */
+    get areaClasses() {
+        return [
+            'ui-button-area',
+            `ui-button-area--align-${this.align}`,
+            `ui-button-area--gap-${this.gap}`,
+            this.stackOnMobile ? 'ui-button-area--stack-mobile' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /** @internal Track function for @for loop. */
+    trackButton(index, button) {
+        return button.id ?? `idx-${index}`;
+    }
+    /** Whether a specific button is in a loading state. */
+    isButtonLoading(button) {
+        return !!button.loading || (!!button.id && this._loadingIds.has(button.id));
+    }
+    /** Whether a specific button is disabled (includes loading logic). */
+    isButtonDisabled(button) {
+        if (button.disabled)
+            return true;
+        if (this.isButtonLoading(button))
+            return true;
+        if (this.disableWhileLoading && this._loadingIds.size > 0)
+            return true;
+        return false;
+    }
+    /** @internal Handles button click: tracks action, calls callback and/or navigates. */
+    handleButtonClick(button, event) {
+        // BlackBox auto-tracking (no-op if service is not provided)
+        this.blackbox?.trackAction(button.id ?? button.label, {
+            tag: 'ui-button',
+            id: button.id,
+            text: button.label,
+        });
+        if (button.action) {
+            button.action(event);
+        }
+        if (button.href && this.router) {
+            this.router.navigateByUrl(button.href);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiButtonAreaComponent, isStandalone: true, selector: "ui-button-area", inputs: { buttons: "buttons", align: "align", ariaLabel: "ariaLabel", gap: "gap", stackOnMobile: "stackOnMobile", disableWhileLoading: "disableWhileLoading", loadingIds: "loadingIds" }, host: { classAttribute: "ui-button-area-host" }, ngImport: i0, template: `
+    <div
+      [class]="areaClasses"
+      role="group"
+      [attr.aria-label]="ariaLabel"
+    >
+      @for (button of visibleButtons; track trackButton($index, button)) {
+        <ui-button
+          [attr.data-button-id]="button.id || null"
+          [label]="button.label"
+          [tooltip]="button.tooltip ?? ''"
+          [ariaLabel]="button.ariaLabel"
+          [icon]="button.icon"
+          [iconPosition]="button.iconPosition ?? 'trailing'"
+          [variant]="button.variant ?? 'primary'"
+          [size]="button.size ?? 'md'"
+          [loading]="isButtonLoading(button)"
+          [disabled]="isButtonDisabled(button)"
+          [customClass]="button.customClass"
+          (click)="handleButtonClick(button, $event)"
+        />
+      }
+    </div>
+  `, isInline: true, styles: [".ui-button-area-host{display:block}@media (max-width: 767.98px){.ui-button-area-host{width:100%}}.ui-button-area{display:flex;flex-wrap:wrap;align-items:center}.ui-button-area--gap-xs{gap:var(--ui-spacing-1)}.ui-button-area--gap-sm{gap:var(--ui-spacing-2)}.ui-button-area--gap-md{gap:var(--ui-spacing-3)}.ui-button-area--gap-lg{gap:var(--ui-spacing-4)}.ui-button-area--gap-xl{gap:var(--ui-spacing-5)}.ui-button-area--align-start{justify-content:flex-start}.ui-button-area--align-center{justify-content:center}.ui-button-area--align-end{justify-content:flex-end}.ui-button-area--align-between{justify-content:space-between}@media (max-width: 767.98px){.ui-button-area--stack-mobile{flex-direction:column;width:100%}.ui-button-area--stack-mobile .ui-button-host{display:flex;width:100%}.ui-button-area--stack-mobile .ui-button{width:100%}}\n"], dependencies: [{ kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["label", "tooltip", "variant", "size", "icon", "iconPosition", "loading", "disabled", "fullWidth", "type", "ariaLabel", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button-area', standalone: true, imports: [UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-button-area-host',
+                    }, template: `
+    <div
+      [class]="areaClasses"
+      role="group"
+      [attr.aria-label]="ariaLabel"
+    >
+      @for (button of visibleButtons; track trackButton($index, button)) {
+        <ui-button
+          [attr.data-button-id]="button.id || null"
+          [label]="button.label"
+          [tooltip]="button.tooltip ?? ''"
+          [ariaLabel]="button.ariaLabel"
+          [icon]="button.icon"
+          [iconPosition]="button.iconPosition ?? 'trailing'"
+          [variant]="button.variant ?? 'primary'"
+          [size]="button.size ?? 'md'"
+          [loading]="isButtonLoading(button)"
+          [disabled]="isButtonDisabled(button)"
+          [customClass]="button.customClass"
+          (click)="handleButtonClick(button, $event)"
+        />
+      }
+    </div>
+  `, styles: [".ui-button-area-host{display:block}@media (max-width: 767.98px){.ui-button-area-host{width:100%}}.ui-button-area{display:flex;flex-wrap:wrap;align-items:center}.ui-button-area--gap-xs{gap:var(--ui-spacing-1)}.ui-button-area--gap-sm{gap:var(--ui-spacing-2)}.ui-button-area--gap-md{gap:var(--ui-spacing-3)}.ui-button-area--gap-lg{gap:var(--ui-spacing-4)}.ui-button-area--gap-xl{gap:var(--ui-spacing-5)}.ui-button-area--align-start{justify-content:flex-start}.ui-button-area--align-center{justify-content:center}.ui-button-area--align-end{justify-content:flex-end}.ui-button-area--align-between{justify-content:space-between}@media (max-width: 767.98px){.ui-button-area--stack-mobile{flex-direction:column;width:100%}.ui-button-area--stack-mobile .ui-button-host{display:flex;width:100%}.ui-button-area--stack-mobile .ui-button{width:100%}}\n"] }]
+        }], propDecorators: { buttons: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], stackOnMobile: [{
+                type: Input
+            }], disableWhileLoading: [{
+                type: Input
+            }], loadingIds: [{
+                type: Input
+            }] } });
+
+/**
+ * @module ng-ui-system/page-header
+ * Types and interfaces for UiPageHeader and UiBreadcrumbService.
+ */
+/**
+ * Injection token for providing a custom label resolver to UiBreadcrumbService.
+ *
+ * When not provided, parameters are displayed as-is (identity function).
+ *
+ * @example
+ * ```typescript
+ * // In your app.config.ts or module providers:
+ * { provide: UI_BREADCRUMB_LABEL_RESOLVER, useValue: myLabelResolver }
+ * ```
+ */
+const UI_BREADCRUMB_LABEL_RESOLVER = new InjectionToken('UI_BREADCRUMB_LABEL_RESOLVER', {
+    providedIn: 'root',
+    factory: () => (_name, value) => value,
+});
+
+/** biome-ignore-all lint/complexity/useLiteralKeys: <explanation> */
+/**
+ * Service that builds a nested breadcrumb trail from Angular route configuration.
+ *
+ * Routes must define `data.id`, `data.title`, and optionally `data.breadcrumbs`
+ * (an array of parent route IDs) for the chain to resolve correctly.
+ *
+ * Supports lazy-loaded routes: the internal route map is rebuilt automatically
+ * whenever new routes are loaded via `NavigationEnd`.
+ *
+ * Label resolution for route parameters (`:param`) is delegated to an injectable
+ * `UiLabelResolverFn` via the `UI_BREADCRUMB_LABEL_RESOLVER` token.
+ *
+ * @usageNotes
+ * ### Route configuration
+ * ```typescript
+ * const routes: Routes = [
+ *   {
+ *     path: 'users',
+ *     data: { id: 'users', title: 'Utenti' },
+ *     children: [
+ *       {
+ *         path: ':userId',
+ *         data: { id: 'user-detail', title: ':userId', breadcrumbs: ['users'] },
+ *         component: UserDetailComponent,
+ *       },
+ *     ],
+ *   },
+ * ];
+ * ```
+ *
+ * ### Custom label resolver
+ * ```typescript
+ * providers: [
+ *   {
+ *     provide: UI_BREADCRUMB_LABEL_RESOLVER,
+ *     useValue: (name: string, value: string) =>
+ *       name === 'userId' ? `User #${value}` : value,
+ *   },
+ * ]
+ * ```
+ */
+class UiBreadcrumbService {
+    constructor() {
+        this.router = inject(Router);
+        this.labelResolver = inject(UI_BREADCRUMB_LABEL_RESOLVER);
+        /** @internal Map of route ID → breadcrumb configuration. */
+        this.breadcrumbMap = new Map();
+        /** @internal Tracks route count to detect lazy-loaded route additions. */
+        this.lastRouteConfigLength = 0;
+        /** @internal Last computed breadcrumbs for navigateBack. */
+        this.lastBreadcrumbs = [];
+        this.rebuildRouteMap();
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe(() => this.rebuildRouteMapIfNeeded());
+    }
+    /**
+     * Computes the breadcrumb trail for the currently active route.
+     *
+     * @param route - The root `ActivatedRoute` (typically injected in the component).
+     * @returns Ordered array of breadcrumb items from root to current route.
+     */
+    getBreadcrumbsForRoute(route) {
+        let deepestRoute = route;
+        while (deepestRoute.firstChild) {
+            deepestRoute = deepestRoute.firstChild;
+        }
+        let routeWithId = deepestRoute;
+        while (routeWithId && !routeWithId.snapshot.data['id']) {
+            routeWithId = routeWithId.parent;
+        }
+        const routeId = routeWithId?.snapshot.data['id'];
+        if (!routeId) {
+            this.lastBreadcrumbs = [];
+            return [];
+        }
+        const params = this.collectParamsFromPath(deepestRoute);
+        const breadcrumbs = this.buildBreadcrumbChain(routeId, params);
+        this.lastBreadcrumbs = breadcrumbs;
+        return breadcrumbs;
+    }
+    /**
+     * Navigates to the previous breadcrumb (parent route).
+     * Falls back to `fallbackUrl` (default: `/`) when no parent exists.
+     */
+    navigateBack(fallbackUrl = '/') {
+        const prev = this.lastBreadcrumbs.length > 1 ? this.lastBreadcrumbs[this.lastBreadcrumbs.length - 2] : null;
+        const target = prev?.url ?? fallbackUrl;
+        this.router.navigateByUrl(target);
+    }
+    /** @internal Collects all route params from the full path (including parents). */
+    collectParamsFromPath(route) {
+        const params = {};
+        for (const r of route.pathFromRoot) {
+            Object.assign(params, r.snapshot.params);
+        }
+        return params;
+    }
+    // ─── Private helpers ─────────────────────────────────────────────
+    /** @internal Rebuilds the map only when new lazy routes appear. */
+    rebuildRouteMapIfNeeded() {
+        const currentLength = this.countRoutes(this.router.config);
+        if (currentLength !== this.lastRouteConfigLength) {
+            this.rebuildRouteMap();
+        }
+    }
+    /** @internal Recursively counts routes including lazy-loaded children. */
+    countRoutes(routes) {
+        let count = routes.length;
+        for (const route of routes) {
+            if (route.children) {
+                count += this.countRoutes(route.children);
+            }
+            if (route._loadedRoutes) {
+                count += this.countRoutes(route._loadedRoutes);
+            }
+        }
+        return count;
+    }
+    /** @internal Clears and rebuilds the full route → breadcrumb map. */
+    rebuildRouteMap() {
+        this.breadcrumbMap.clear();
+        this.buildRouteMap(this.router.config);
+        this.lastRouteConfigLength = this.countRoutes(this.router.config);
+    }
+    /** @internal Recursively walks route tree to build the breadcrumb map. */
+    buildRouteMap(routes, parentPath = '') {
+        for (const route of routes) {
+            const currentPath = `${parentPath}/${route.path || ''}`;
+            if (route.data?.['id']) {
+                const fullPath = this.normalizePath(currentPath);
+                this.breadcrumbMap.set(route.data['id'], {
+                    id: route.data['id'],
+                    path: fullPath,
+                    label: route.data['title'] || route.path || route.data['id'],
+                    parentIds: route.data['breadcrumbs'] || [],
+                    metadata: route.data,
+                });
+            }
+            if (route.children) {
+                this.buildRouteMap(route.children, currentPath);
+            }
+            if (route._loadedRoutes) {
+                this.buildRouteMap(route._loadedRoutes, currentPath);
+            }
+        }
+    }
+    /** @internal Builds the full breadcrumb chain for a route by its ID. */
+    buildBreadcrumbChain(routeId, params) {
+        const config = this.breadcrumbMap.get(routeId);
+        if (!config)
+            return [];
+        this.saveFullPath(routeId, this.router.url);
+        const parentChain = this.getParentChain(config.parentIds, params);
+        const breadcrumbs = [...parentChain];
+        breadcrumbs.push({
+            label: this.resolveLabel(config.label, params),
+            url: this.stripQueryParams(this.router.url),
+            isLast: true,
+        });
+        return breadcrumbs;
+    }
+    /** @internal Resolves parent breadcrumbs from ordered parent IDs. */
+    getParentChain(parentIds, params) {
+        if (!parentIds?.length)
+            return [];
+        return parentIds
+            .map((id) => {
+            const config = this.breadcrumbMap.get(id);
+            if (!config)
+                return null;
+            return {
+                label: this.resolveLabel(config.label, params),
+                url: this.resolveUrl(config.path, params),
+                isLast: false,
+            };
+        })
+            .filter(Boolean);
+    }
+    /**
+     * @internal Resolves `:param` placeholders in a label using
+     * the injected label resolver function.
+     */
+    resolveLabel(label, params) {
+        if (!label.includes(':'))
+            return label;
+        let resolved = label;
+        for (const [key, value] of Object.entries(params)) {
+            const readableValue = this.labelResolver(key, value);
+            resolved = resolved.replace(`:${key}`, readableValue);
+        }
+        return resolved;
+    }
+    /** @internal Resolves `:param` placeholders in a path and creates a URL. */
+    resolveUrl(path, params) {
+        let processedPath = path;
+        if (path.includes(':')) {
+            const segments = path.split('/');
+            const processedSegments = segments.map((segment) => {
+                if (segment.startsWith(':')) {
+                    const paramName = segment.substring(1);
+                    return params[paramName] || segment;
+                }
+                return segment;
+            });
+            processedPath = processedSegments.join('/');
+        }
+        try {
+            return this.router.createUrlTree([processedPath]).toString();
+        }
+        catch {
+            return processedPath;
+        }
+    }
+    /** @internal Normalizes path by collapsing double slashes and trimming trailing slash. */
+    normalizePath(path) {
+        return path.replace(/\/+/g, '/').replace(/\/$/, '');
+    }
+    /** @internal Removes query parameters from a URL. */
+    stripQueryParams(url) {
+        return url.split('?')[0];
+    }
+    /** @internal Caches the fully resolved URL for a route ID. */
+    saveFullPath(routeId, fullPath) {
+        const config = this.breadcrumbMap.get(routeId);
+        if (config) {
+            config.fullPath = this.stripQueryParams(fullPath);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBreadcrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Page header component that renders a breadcrumb navigation trail
+ * and a page title. Integrates with `UiBreadcrumbService` to
+ * automatically derive breadcrumbs from Angular route configuration.
+ *
+ * The breadcrumb trail is generated from route `data` properties:
+ * - `data.id` — unique route identifier
+ * - `data.title` — display label
+ * - `data.breadcrumbs` — ordered array of parent route IDs
+ *
+ * @selector ui-page-header
+ *
+ * @example
+ * ```html
+ * <!-- Auto breadcrumbs from route data -->
+ * <ui-page-header />
+ *
+ * <!-- With explicit title override -->
+ * <ui-page-header title="Custom Title" />
+ *
+ * <!-- With document title update -->
+ * <ui-page-header [updateDocumentTitle]="true" titleSuffix=" | My App" />
+ * ```
+ */
+class UiPageHeaderComponent {
+    constructor() {
+        /** Override the auto-detected page title. When empty, title is derived from the last breadcrumb. */
+        this.title = '';
+        /** Route path for the Home breadcrumb link. */
+        this.homeRoute = '/';
+        /** Whether to display the Home link at the start of the trail. */
+        this.showHome = true;
+        /** When `true`, updates `document.title` on each navigation. */
+        this.updateDocumentTitle = false;
+        /** Suffix appended to `document.title` (e.g. `' | My App'`). Only used when `updateDocumentTitle` is `true`. */
+        this.titleSuffix = '';
+        /** @internal */
+        this.breadcrumbs = [];
+        this.router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.titleService = inject(Title);
+        this.breadcrumbService = inject(UiBreadcrumbService);
+        this.destroyRef = inject(DestroyRef);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    /** Resolved page title: explicit `title` input wins, otherwise last breadcrumb label. */
+    get displayTitle() {
+        if (this.title)
+            return this.title;
+        if (this.breadcrumbs.length > 0) {
+            return this.breadcrumbs[this.breadcrumbs.length - 1].label;
+        }
+        return '';
+    }
+    ngOnInit() {
+        this.refresh();
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.refresh());
+    }
+    /**
+     * Navigates to the previous breadcrumb (parent route).
+     * @param fallbackUrl - URL to navigate to when no parent exists (default: homeRoute).
+     */
+    navigateBack(fallbackUrl) {
+        this.breadcrumbService.navigateBack(fallbackUrl ?? this.homeRoute);
+    }
+    /** @internal */
+    refresh() {
+        this.breadcrumbs = this.breadcrumbService.getBreadcrumbsForRoute(this.activatedRoute);
+        if (this.updateDocumentTitle) {
+            const title = this.displayTitle;
+            if (title) {
+                this.titleService.setTitle(`${title}${this.titleSuffix}`);
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiPageHeaderComponent, isStandalone: true, selector: "ui-page-header", inputs: { title: "title", homeRoute: "homeRoute", showHome: "showHome", updateDocumentTitle: "updateDocumentTitle", titleSuffix: "titleSuffix" }, host: { classAttribute: "ui-page-header-host" }, ngImport: i0, template: `
+    <header class="ui-page-header">
+      <nav aria-label="Breadcrumb" class="ui-page-header__nav">
+        <ol
+          class="ui-page-header__breadcrumb"
+          itemscope
+          itemtype="https://schema.org/BreadcrumbList"
+        >
+          @if (showHome) {
+            <li
+              class="ui-page-header__item"
+              itemprop="itemListElement"
+              itemscope
+              itemtype="https://schema.org/ListItem"
+            >
+              <a
+                itemprop="item"
+                [routerLink]="homeRoute"
+                class="ui-page-header__link"
+                aria-label="Home"
+              >
+                <lucide-icon name="home" [size]="14" aria-hidden="true" />
+                <span itemprop="name" class="ui-page-header__text">Home</span>
+              </a>
+              <meta itemprop="position" content="1" />
+              <span class="ui-page-header__separator" aria-hidden="true">
+                <lucide-icon name="chevron-right" [size]="14" />
+              </span>
+            </li>
+          }
+          @for (crumb of breadcrumbs; track crumb.url; let i = $index) {
+            <li
+              class="ui-page-header__item"
+              [class.ui-page-header__item--current]="crumb.isLast"
+              itemprop="itemListElement"
+              itemscope
+              itemtype="https://schema.org/ListItem"
+            >
+              @if (!crumb.isLast) {
+                <a
+                  itemprop="item"
+                  [routerLink]="crumb.url"
+                  class="ui-page-header__link"
+                >
+                  <span itemprop="name" class="ui-page-header__text">{{ crumb.label }}</span>
+                </a>
+                <span class="ui-page-header__separator" aria-hidden="true">
+                  <lucide-icon name="chevron-right" [size]="14" />
+                </span>
+              } @else {
+                <span
+                  itemprop="name"
+                  class="ui-page-header__text ui-page-header__text--current"
+                  aria-current="page"
+                >
+                  {{ crumb.label }}
+                </span>
+              }
+              <meta itemprop="position" [attr.content]="showHome ? i + 2 : i + 1" />
+            </li>
+          }
+        </ol>
+      </nav>
+
+      <h1 class="ui-page-header__title" id="page-title">
+        {{ displayTitle }}
+      </h1>
+    </header>
+  `, isInline: true, styles: [".ui-page-header-host{display:block}.ui-page-header{margin-bottom:var(--ui-spacing-5)}.ui-page-header__nav{margin-bottom:var(--ui-spacing-2)}.ui-page-header__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-page-header__item{display:inline-flex;align-items:center;gap:var(--ui-spacing-1)}a.ui-page-header__link lucide-icon{transform:translateY(2px)!important}span.ui-page-header__separator lucide-icon{transform:translateY(3px)!important}.ui-page-header__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-page-header__link:hover{color:var(--ui-color-primary-hover);text-decoration:underline}.ui-page-header__link:focus{outline:none}.ui-page-header__link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-page-header__text{white-space:nowrap}.ui-page-header__text--current{font-weight:var(--ui-font-weight-medium);color:var(--ui-color-text)}.ui-page-header__separator{display:inline-flex;align-items:center;color:var(--ui-color-text-muted);flex-shrink:0}.ui-page-header__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-page-header__title:focus{outline:none}@media (min-width: 640px){.ui-page-header__title{font-size:var(--ui-font-size-xl)}.ui-page-header__breadcrumb{font-size:var(--ui-font-size-xs)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.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: UiPageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-page-header', standalone: true, imports: [RouterLink, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-page-header-host',
+                    }, template: `
+    <header class="ui-page-header">
+      <nav aria-label="Breadcrumb" class="ui-page-header__nav">
+        <ol
+          class="ui-page-header__breadcrumb"
+          itemscope
+          itemtype="https://schema.org/BreadcrumbList"
+        >
+          @if (showHome) {
+            <li
+              class="ui-page-header__item"
+              itemprop="itemListElement"
+              itemscope
+              itemtype="https://schema.org/ListItem"
+            >
+              <a
+                itemprop="item"
+                [routerLink]="homeRoute"
+                class="ui-page-header__link"
+                aria-label="Home"
+              >
+                <lucide-icon name="home" [size]="14" aria-hidden="true" />
+                <span itemprop="name" class="ui-page-header__text">Home</span>
+              </a>
+              <meta itemprop="position" content="1" />
+              <span class="ui-page-header__separator" aria-hidden="true">
+                <lucide-icon name="chevron-right" [size]="14" />
+              </span>
+            </li>
+          }
+          @for (crumb of breadcrumbs; track crumb.url; let i = $index) {
+            <li
+              class="ui-page-header__item"
+              [class.ui-page-header__item--current]="crumb.isLast"
+              itemprop="itemListElement"
+              itemscope
+              itemtype="https://schema.org/ListItem"
+            >
+              @if (!crumb.isLast) {
+                <a
+                  itemprop="item"
+                  [routerLink]="crumb.url"
+                  class="ui-page-header__link"
+                >
+                  <span itemprop="name" class="ui-page-header__text">{{ crumb.label }}</span>
+                </a>
+                <span class="ui-page-header__separator" aria-hidden="true">
+                  <lucide-icon name="chevron-right" [size]="14" />
+                </span>
+              } @else {
+                <span
+                  itemprop="name"
+                  class="ui-page-header__text ui-page-header__text--current"
+                  aria-current="page"
+                >
+                  {{ crumb.label }}
+                </span>
+              }
+              <meta itemprop="position" [attr.content]="showHome ? i + 2 : i + 1" />
+            </li>
+          }
+        </ol>
+      </nav>
+
+      <h1 class="ui-page-header__title" id="page-title">
+        {{ displayTitle }}
+      </h1>
+    </header>
+  `, styles: [".ui-page-header-host{display:block}.ui-page-header{margin-bottom:var(--ui-spacing-5)}.ui-page-header__nav{margin-bottom:var(--ui-spacing-2)}.ui-page-header__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-page-header__item{display:inline-flex;align-items:center;gap:var(--ui-spacing-1)}a.ui-page-header__link lucide-icon{transform:translateY(2px)!important}span.ui-page-header__separator lucide-icon{transform:translateY(3px)!important}.ui-page-header__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-page-header__link:hover{color:var(--ui-color-primary-hover);text-decoration:underline}.ui-page-header__link:focus{outline:none}.ui-page-header__link:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-page-header__text{white-space:nowrap}.ui-page-header__text--current{font-weight:var(--ui-font-weight-medium);color:var(--ui-color-text)}.ui-page-header__separator{display:inline-flex;align-items:center;color:var(--ui-color-text-muted);flex-shrink:0}.ui-page-header__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-page-header__title:focus{outline:none}@media (min-width: 640px){.ui-page-header__title{font-size:var(--ui-font-size-xl)}.ui-page-header__breadcrumb{font-size:var(--ui-font-size-xs)}}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], homeRoute: [{
+                type: Input
+            }], showHome: [{
+                type: Input
+            }], updateDocumentTitle: [{
+                type: Input
+            }], titleSuffix: [{
+                type: Input
+            }] } });
+
+/**
+ * Full-page layout component that combines a page header (breadcrumbs + title),
+ * a main content area via `<ng-content>`, and a sticky footer action bar
+ * powered by `UiButtonAreaComponent`.
+ *
+ * Optionally renders an automatic "back" button in the footer, derived from
+ * the breadcrumb trail (navigates to the parent breadcrumb).
+ *
+ * ### Route `data`
+ *
+ * Sulla rotta attiva (foglia) puoi impostare:
+ *
+ * - `breadcrumbOff: true` — nasconde `ui-page-header`
+ * - `footerNavOff: true` — nasconde `ui-base-layout__footer`
+ * - `id: string` — valorizza `data-route-id` sul contenitore `.ui-base-layout`
+ *
+ * @selector ui-base-layout
+ *
+ * @example
+ * ```html
+ * <ui-base-layout [actions]="pageActions" footerAlign="end">
+ *   <p>Your page content here</p>
+ * </ui-base-layout>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With back button and custom title -->
+ * <ui-base-layout
+ *   title="Dettaglio utente"
+ *   [showBackButton]="true"
+ *   [actions]="[
+ *     { id: 'save', label: 'Salva', variant: 'primary', icon: 'save', action: save },
+ *   ]"
+ * >
+ *   <app-user-detail />
+ * </ui-base-layout>
+ * ```
+ */
+class UiBaseLayoutComponent {
+    constructor() {
+        /** Whether to display the page header (breadcrumbs + title). */
+        this.showHeader = true;
+        /** Override the auto-detected page title. Passed through to `ui-page-header`. */
+        this.title = '';
+        /** Route path for the Home breadcrumb link. */
+        this.homeRoute = '/';
+        /** Whether to display the Home link in the breadcrumb trail. */
+        this.showHome = true;
+        /** When `true`, updates `document.title` on navigation. */
+        this.updateDocumentTitle = false;
+        /** Suffix appended to `document.title`. */
+        this.titleSuffix = '';
+        /** Whether to show an automatic "back" button based on breadcrumbs. */
+        this.showBackButton = true;
+        /** Configuration overrides for the automatic back button. */
+        this.backButtonConfig = {};
+        /** Array of button descriptors for the footer action area. */
+        this.actions = [];
+        /** Horizontal alignment of the footer button area. */
+        this.footerAlign = 'start';
+        /** Gap size between footer buttons. */
+        this.footerGap = 'sm';
+        this.router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.breadcrumbService = inject(UiBreadcrumbService);
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Flag derivati dalla catena attiva (`breadcrumbOff`, `footerNavOff`, `id`).
+         * Aggiornati a ogni `NavigationEnd`.
+         */
+        this.routeSnapshotFlags = signal({
+            breadcrumbOff: false,
+            footerNavOff: false,
+            routeId: null,
+        });
+        /** Header visibile se abilitato da input e non disattivato da `data.breadcrumbOff`. */
+        this.effectiveShowHeader = () => this.showHeader && !this.routeSnapshotFlags().breadcrumbOff;
+        /** Footer azioni visibile se ci sono azioni visibili e non disattivato da `data.footerNavOff`. */
+        this.effectiveShowFooterNav = () => !this.routeSnapshotFlags().footerNavOff && this.hasVisibleActions;
+    }
+    /**
+     * Merged action list (back button + consumer actions).
+     * Computed on every change-detection check so it stays in sync
+     * with both navigation state (breadcrumbs) and input changes.
+     */
+    get mergedActions() {
+        const result = [];
+        if (this.showBackButton) {
+            result.push({
+                id: '__ui-back',
+                label: this.backButtonConfig.label ?? 'Indietro',
+                icon: this.backButtonConfig.icon ?? 'arrow-left',
+                iconPosition: 'leading',
+                variant: this.backButtonConfig.variant ?? 'outline',
+                hidden: this.shouldHideBackButton(),
+                action: () => this.navigateBack(),
+            });
+        }
+        result.push(...this.actions);
+        return result;
+    }
+    /** Whether the footer should render (at least one non-hidden action exists). */
+    get hasVisibleActions() {
+        return this.mergedActions.some((a) => !a.hidden);
+    }
+    ngOnInit() {
+        this.syncFromActivatedRoute();
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), debounceTime(50), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.syncFromActivatedRoute());
+    }
+    /** @internal Allinea breadcrumb service e flag layout alla rotta corrente. */
+    syncFromActivatedRoute() {
+        this.refreshRouteSnapshotFlags();
+        this.breadcrumbService.getBreadcrumbsForRoute(this.activatedRoute);
+    }
+    /** @internal Legge `breadcrumbOff`, `footerNavOff`, `id` dalla catena `pathFromRoot` / foglia. */
+    refreshRouteSnapshotFlags() {
+        const deepest = this.deepestChildRoute(this.activatedRoute);
+        let breadcrumbOff = false;
+        let footerNavOff = false;
+        for (const seg of deepest.pathFromRoot) {
+            const d = seg.snapshot.data;
+            if (!d)
+                continue;
+            // biome-ignore lint/complexity/useLiteralKeys: chiavi documentate in UiBaseLayoutRouteData
+            if (d['breadcrumbOff'] === true)
+                breadcrumbOff = true;
+            // biome-ignore lint/complexity/useLiteralKeys: chiavi documentate in UiBaseLayoutRouteData
+            if (d['footerNavOff'] === true)
+                footerNavOff = true;
+        }
+        let routeId = null;
+        let cursor = deepest;
+        while (cursor) {
+            const raw = cursor.snapshot.data?.['id'];
+            if (typeof raw === 'string' && raw.length > 0) {
+                routeId = raw;
+                break;
+            }
+            cursor = cursor.parent;
+        }
+        this.routeSnapshotFlags.set({ breadcrumbOff, footerNavOff, routeId });
+    }
+    /** @internal Percorre fino al `ActivatedRoute` foglia sotto il punto di iniezione. */
+    deepestChildRoute(route) {
+        let deepest = route;
+        while (deepest.firstChild) {
+            deepest = deepest.firstChild;
+        }
+        return deepest;
+    }
+    /** @internal Determina se il back button deve essere nascosto per la rotta corrente. */
+    shouldHideBackButton() {
+        const currentPath = this.router.url.split('?')[0].split('#')[0];
+        if (currentPath === this.homeRoute) {
+            return true;
+        }
+        const deepestRoute = this.deepestChildRoute(this.activatedRoute);
+        // biome-ignore lint/complexity/useLiteralKeys: <explanation>
+        if (deepestRoute.snapshot.data?.['hideBackButton'] === true) {
+            return true;
+        }
+        return false;
+    }
+    /** @internal Naviga al breadcrumb genitore o esegue il fallback alla home route. */
+    navigateBack() {
+        this.breadcrumbService.navigateBack(this.homeRoute);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBaseLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiBaseLayoutComponent, isStandalone: true, selector: "ui-base-layout", inputs: { showHeader: "showHeader", title: "title", homeRoute: "homeRoute", showHome: "showHome", updateDocumentTitle: "updateDocumentTitle", titleSuffix: "titleSuffix", showBackButton: "showBackButton", backButtonConfig: "backButtonConfig", actions: "actions", footerAlign: "footerAlign", footerGap: "footerGap" }, host: { classAttribute: "ui-base-layout-host" }, ngImport: i0, template: `
+    <div class="ui-base-layout" [attr.data-route-id]="routeSnapshotFlags().routeId">
+      @if (effectiveShowHeader()) {
+        <ui-page-header
+          [title]="title"
+          [homeRoute]="homeRoute"
+          [showHome]="showHome"
+          [updateDocumentTitle]="updateDocumentTitle"
+          [titleSuffix]="titleSuffix"
+        />
+      }
+
+      <main class="ui-base-layout__content">
+        <ng-content />
+      </main>
+
+      @if (effectiveShowFooterNav()) {
+        <aside
+          class="ui-base-layout__footer"
+          aria-label="Page actions"
+        >
+          <ui-button-area
+            [buttons]="mergedActions"
+            [align]="footerAlign"
+            [gap]="footerGap"
+            [stackOnMobile]="true"
+            ariaLabel="Page actions"
+          />
+        </aside>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-base-layout-host{display:block;min-height:100%}.ui-base-layout{display:flex;flex-direction:column;min-height:100%;font-family:var(--ui-font-family);padding:var(--ui-spacing-6)}.ui-base-layout__content{flex:1 1 auto}.ui-base-layout__footer{position:sticky;bottom:0;z-index:var(--ui-z-sticky, 100);padding:var(--ui-spacing-4) 0;margin-top:var(--ui-spacing-6);background:var(--ui-color-surface);border-top:1px solid var(--ui-color-border)}@media (min-width: 640px){.ui-base-layout__footer{padding:var(--ui-spacing-3) 0}}\n"], dependencies: [{ kind: "component", type: UiPageHeaderComponent, selector: "ui-page-header", inputs: ["title", "homeRoute", "showHome", "updateDocumentTitle", "titleSuffix"] }, { kind: "component", type: UiButtonAreaComponent, selector: "ui-button-area", inputs: ["buttons", "align", "ariaLabel", "gap", "stackOnMobile", "disableWhileLoading", "loadingIds"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBaseLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-base-layout', standalone: true, imports: [UiPageHeaderComponent, UiButtonAreaComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-base-layout-host',
+                    }, template: `
+    <div class="ui-base-layout" [attr.data-route-id]="routeSnapshotFlags().routeId">
+      @if (effectiveShowHeader()) {
+        <ui-page-header
+          [title]="title"
+          [homeRoute]="homeRoute"
+          [showHome]="showHome"
+          [updateDocumentTitle]="updateDocumentTitle"
+          [titleSuffix]="titleSuffix"
+        />
+      }
+
+      <main class="ui-base-layout__content">
+        <ng-content />
+      </main>
+
+      @if (effectiveShowFooterNav()) {
+        <aside
+          class="ui-base-layout__footer"
+          aria-label="Page actions"
+        >
+          <ui-button-area
+            [buttons]="mergedActions"
+            [align]="footerAlign"
+            [gap]="footerGap"
+            [stackOnMobile]="true"
+            ariaLabel="Page actions"
+          />
+        </aside>
+      }
+    </div>
+  `, styles: [".ui-base-layout-host{display:block;min-height:100%}.ui-base-layout{display:flex;flex-direction:column;min-height:100%;font-family:var(--ui-font-family);padding:var(--ui-spacing-6)}.ui-base-layout__content{flex:1 1 auto}.ui-base-layout__footer{position:sticky;bottom:0;z-index:var(--ui-z-sticky, 100);padding:var(--ui-spacing-4) 0;margin-top:var(--ui-spacing-6);background:var(--ui-color-surface);border-top:1px solid var(--ui-color-border)}@media (min-width: 640px){.ui-base-layout__footer{padding:var(--ui-spacing-3) 0}}\n"] }]
+        }], propDecorators: { showHeader: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], homeRoute: [{
+                type: Input
+            }], showHome: [{
+                type: Input
+            }], updateDocumentTitle: [{
+                type: Input
+            }], titleSuffix: [{
+                type: Input
+            }], showBackButton: [{
+                type: Input
+            }], backButtonConfig: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], footerAlign: [{
+                type: Input
+            }], footerGap: [{
+                type: Input
+            }] } });
+
+/**
+ * ng-ui-system — Base Layout entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiBaseLayoutComponent,
+ *   UiBackButtonConfig,
+ * } from 'ng-ui-system';
+ * ```
+ */
+// Components
+
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/base-layout`. Base Layout.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiBaseLayoutComponent };
+//# sourceMappingURL=gnggln-ng-ui-system-base-layout.mjs.map