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

package/fesm2022/gnggln-ng-ui-system-blackbox.mjs

@@ -0,0 +1,2829 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, NgZone, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, Optional, Inject, ChangeDetectorRef, ElementRef, Directive, HostListener } from '@angular/core';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+import { Subject, Observable, map, interval, throwError } from 'rxjs';
+import { filter, takeUntil, tap, catchError } from 'rxjs/operators';
+import * as i1$2 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i1 from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
+import * as i1$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
+import * as i3 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+
+/**
+ * @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: () => [] });
+
+/**
+ * Componente modale standalone con struttura header/body/footer.
+ *
+ * Da utilizzare come wrapper all'interno di componenti aperti
+ * tramite `UiModalService.open()`. Fornisce la struttura visuale
+ * e gestisce la chiusura programmatica.
+ *
+ * **Content projection:**
+ * - Contenuto di default: va nel body
+ * - `[uiModalHeader]`: sostituisce il titolo nell'header
+ * - `[uiModalFooter]`: azioni nel footer
+ *
+ * @selector ui-modal
+ *
+ * @example
+ * ```html
+ * <ui-modal [config]="{ title: 'Dettagli', size: 'md' }">
+ *   <p>Contenuto del body della modale.</p>
+ *   <div uiModalFooter>
+ *     <ui-button label="Chiudi" variant="ghost" (click)="close()" />
+ *     <ui-button label="Salva" variant="primary" (click)="save()" />
+ *   </div>
+ * </ui-modal>
+ * ```
+ */
+class UiModalComponent {
+    constructor() {
+        /** Configurazione strutturale della modale. */
+        this.config = {};
+        /**
+         * Emesso quando la modale viene chiusa.
+         * Utile se il componente e usato direttamente nel template
+         * senza UiModalService.
+         */
+        this.closed = new EventEmitter();
+        /** @internal Riferimento al dialogo Material per la chiusura. */
+        this.dialogRef = inject(MatDialogRef, { optional: true });
+    }
+    /** Chiude la modale con un risultato opzionale. */
+    close(result) {
+        if (this.dialogRef) {
+            this.dialogRef.close(result);
+        }
+        else {
+            this.closed.emit(result);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiModalComponent, isStandalone: true, selector: "ui-modal", inputs: { config: "config" }, outputs: { closed: "closed" }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "attr.aria-label": "config.title || null" }, classAttribute: "ui-modal-host" }, ngImport: i0, template: `
+    <!-- Header -->
+    @if (config.title || config.showCloseButton !== false) {
+      <div class="ui-modal__header">
+        <div class="ui-modal__header-content">
+          <ng-content select="[uiModalHeader]">
+            @if (config.title) {
+              <h2 class="ui-modal__title">{{ config.title }}</h2>
+            }
+          </ng-content>
+        </div>
+        @if (config.showCloseButton !== false) {
+          <button
+            class="ui-modal__close"
+            (click)="close()"
+            aria-label="Chiudi modale"
+            type="button"
+          >
+            <lucide-icon name="x" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+
+    <!-- Body -->
+    <div class="ui-modal__body">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    @if (!config.hideFooter) {
+      <div class="ui-modal__footer">
+        <ng-content select="[uiModalFooter]" />
+      </div>
+    }
+  `, isInline: true, styles: [".ui-modal-host{display:flex;flex-direction:column;max-height:90vh;background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);overflow:hidden;box-shadow:var(--ui-shadow-lg)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-4) var(--ui-spacing-6);border-bottom:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0;gap:var(--ui-spacing-3)}.ui-modal__header-content{flex:1;min-width:0}.ui-modal__title{margin:0;font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-modal__close{appearance:none;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);flex-shrink:0;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-modal__close:focus{outline:none}.ui-modal__close:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-modal__close:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-modal__close:active{background:var(--ui-color-neutral-200)}.ui-modal__body{flex:1;overflow-y:auto;padding:var(--ui-spacing-6)}.ui-modal__body::-webkit-scrollbar{width:6px}.ui-modal__body::-webkit-scrollbar-track{background:transparent}.ui-modal__body::-webkit-scrollbar-thumb{background:var(--ui-color-neutral-300);border-radius:var(--ui-radius-full)}.ui-modal__body::-webkit-scrollbar-thumb:hover{background:var(--ui-color-neutral-400)}.ui-modal__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-4) var(--ui-spacing-6);border-top:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0}.ui-modal__footer:empty{display:none}.ui-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-modal-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}.ui-modal-panel--sm .mat-mdc-dialog-container{max-width:400px}.ui-modal-panel--md .mat-mdc-dialog-container{max-width:560px}.ui-modal-panel--lg .mat-mdc-dialog-container{max-width:720px}.ui-modal-panel--xl .mat-mdc-dialog-container{max-width:900px}.ui-modal-panel--fullscreen .ui-modal-host{height:95vh;max-height:95vh;border-radius:var(--ui-radius-md)}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}@media (max-width: 768px){.ui-modal__header,.ui-modal__footer{padding-left:var(--ui-spacing-4);padding-right:var(--ui-spacing-4)}.ui-modal__body{padding:var(--ui-spacing-4)}}\n"], dependencies: [{ 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: UiModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-modal', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-modal-host',
+                        role: 'dialog',
+                        'aria-modal': 'true',
+                        '[attr.aria-label]': 'config.title || null',
+                    }, template: `
+    <!-- Header -->
+    @if (config.title || config.showCloseButton !== false) {
+      <div class="ui-modal__header">
+        <div class="ui-modal__header-content">
+          <ng-content select="[uiModalHeader]">
+            @if (config.title) {
+              <h2 class="ui-modal__title">{{ config.title }}</h2>
+            }
+          </ng-content>
+        </div>
+        @if (config.showCloseButton !== false) {
+          <button
+            class="ui-modal__close"
+            (click)="close()"
+            aria-label="Chiudi modale"
+            type="button"
+          >
+            <lucide-icon name="x" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+
+    <!-- Body -->
+    <div class="ui-modal__body">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    @if (!config.hideFooter) {
+      <div class="ui-modal__footer">
+        <ng-content select="[uiModalFooter]" />
+      </div>
+    }
+  `, styles: [".ui-modal-host{display:flex;flex-direction:column;max-height:90vh;background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);overflow:hidden;box-shadow:var(--ui-shadow-lg)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-4) var(--ui-spacing-6);border-bottom:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0;gap:var(--ui-spacing-3)}.ui-modal__header-content{flex:1;min-width:0}.ui-modal__title{margin:0;font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-modal__close{appearance:none;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);flex-shrink:0;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-modal__close:focus{outline:none}.ui-modal__close:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-modal__close:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-modal__close:active{background:var(--ui-color-neutral-200)}.ui-modal__body{flex:1;overflow-y:auto;padding:var(--ui-spacing-6)}.ui-modal__body::-webkit-scrollbar{width:6px}.ui-modal__body::-webkit-scrollbar-track{background:transparent}.ui-modal__body::-webkit-scrollbar-thumb{background:var(--ui-color-neutral-300);border-radius:var(--ui-radius-full)}.ui-modal__body::-webkit-scrollbar-thumb:hover{background:var(--ui-color-neutral-400)}.ui-modal__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-4) var(--ui-spacing-6);border-top:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0}.ui-modal__footer:empty{display:none}.ui-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-modal-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}.ui-modal-panel--sm .mat-mdc-dialog-container{max-width:400px}.ui-modal-panel--md .mat-mdc-dialog-container{max-width:560px}.ui-modal-panel--lg .mat-mdc-dialog-container{max-width:720px}.ui-modal-panel--xl .mat-mdc-dialog-container{max-width:900px}.ui-modal-panel--fullscreen .ui-modal-host{height:95vh;max-height:95vh;border-radius:var(--ui-radius-md)}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}@media (max-width: 768px){.ui-modal__header,.ui-modal__footer{padding-left:var(--ui-spacing-4);padding-right:var(--ui-spacing-4)}.ui-modal__body{padding:var(--ui-spacing-4)}}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+/** @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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: 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
+            }] } });
+
+/** @internal Mappatura variante -> icona Lucide di default. */
+const VARIANT_ICON_MAP = {
+    confirm: 'check-circle',
+    delete: 'trash-2',
+    warn: 'alert-triangle',
+    info: 'info',
+};
+/** @internal Mappatura variante -> colore pulsante di conferma. */
+const VARIANT_BUTTON_MAP = {
+    confirm: 'primary',
+    delete: 'warn',
+    warn: 'warn',
+    info: 'primary',
+};
+/**
+ * Dialogo di conferma leggero per azioni condizionali.
+ *
+ * Non va utilizzato direttamente nel template: viene aperto
+ * programmaticamente tramite `UiModalService.confirm()` e i suoi
+ * metodi scorciatoia (`confirmDelete`, `confirmDiscard`, `confirmSave`).
+ *
+ * Supporta quattro varianti semantiche — confirm, delete, warn, info —
+ * ciascuna con icona e colore preconfigurati.
+ *
+ * @selector ui-confirm-dialog
+ *
+ * @example
+ * ```typescript
+ * // Apertura tramite servizio
+ * this.modalService.confirm({
+ *   title: 'Conferma eliminazione',
+ *   message: 'Questa azione non puo essere annullata.',
+ *   variant: 'delete',
+ * }).subscribe(confirmed => {
+ *   if (confirmed) this.deleteItem();
+ * });
+ * ```
+ */
+class UiConfirmDialogComponent {
+    constructor() {
+        /** @internal Dati iniettati dal servizio modale. */
+        this.data = inject(MAT_DIALOG_DATA);
+        /** @internal Riferimento al dialogo per la chiusura. */
+        this.dialogRef = inject(MatDialogRef);
+    }
+    /** Variante semantica corrente. */
+    get variant() {
+        return this.data.variant || 'confirm';
+    }
+    /** Nome icona Lucide da visualizzare. */
+    get iconName() {
+        return this.data.icon || VARIANT_ICON_MAP[this.variant];
+    }
+    /** Variante del pulsante di conferma. */
+    get confirmButtonVariant() {
+        return VARIANT_BUTTON_MAP[this.variant];
+    }
+    /** Classi CSS per il contenitore icona. */
+    get iconClasses() {
+        return `ui-confirm-dialog__icon ui-confirm-dialog__icon--${this.variant}`;
+    }
+    /** Conferma e chiude il dialogo con `true`. */
+    confirm() {
+        this.dialogRef.close(true);
+    }
+    /** Annulla e chiude il dialogo con `false`. */
+    cancel() {
+        this.dialogRef.close(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiConfirmDialogComponent, isStandalone: true, selector: "ui-confirm-dialog", host: { attributes: { "role": "alertdialog", "aria-modal": "true" }, properties: { "attr.aria-labelledby": "\"ui-confirm-title\"", "attr.aria-describedby": "\"ui-confirm-message\"" }, classAttribute: "ui-confirm-dialog-host" }, ngImport: i0, template: `
+    <div class="ui-confirm-dialog">
+      <!-- Icona -->
+      <div [class]="iconClasses">
+        <lucide-icon [name]="iconName" [size]="32" aria-hidden="true" />
+      </div>
+
+      <!-- Contenuto -->
+      <div class="ui-confirm-dialog__content">
+        @if (data.title) {
+          <h3 class="ui-confirm-dialog__title" id="ui-confirm-title">{{ data.title }}</h3>
+        }
+        <p class="ui-confirm-dialog__message" id="ui-confirm-message">{{ data.message }}</p>
+      </div>
+
+      <!-- Azioni -->
+      <div class="ui-confirm-dialog__actions">
+        <ui-button
+          [label]="data.cancelText || 'Annulla'"
+          variant="ghost"
+          size="md"
+          (click)="cancel()"
+        />
+        <ui-button
+          [label]="data.confirmText || 'Conferma'"
+          [variant]="confirmButtonVariant"
+          size="md"
+          (click)="confirm()"
+        />
+      </div>
+    </div>
+  `, isInline: true, styles: [".ui-confirm-dialog-host{display:block}.ui-confirm-dialog{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--ui-spacing-8) var(--ui-spacing-6);background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg)}.ui-confirm-dialog__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--ui-radius-full);margin-bottom:var(--ui-spacing-4)}.ui-confirm-dialog__icon--confirm{background:var(--ui-color-primary-light);color:var(--ui-color-primary)}.ui-confirm-dialog__icon--delete{background:var(--ui-color-warn-light);color:var(--ui-color-warn)}.ui-confirm-dialog__icon--warn{background:var(--ui-color-warning-light);color:var(--ui-color-warning)}.ui-confirm-dialog__icon--info{background:var(--ui-color-info-light);color:var(--ui-color-info)}.ui-confirm-dialog__content{margin-bottom:var(--ui-spacing-6)}.ui-confirm-dialog__title{margin:0 0 var(--ui-spacing-2);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight)}.ui-confirm-dialog__message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-text-secondary);line-height:var(--ui-line-height-normal);max-width:340px}.ui-confirm-dialog__actions{display:flex;gap:var(--ui-spacing-2);width:100%;justify-content:center}.ui-confirm-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-confirm-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}@media (max-width: 480px){.ui-confirm-dialog{padding:var(--ui-spacing-6) var(--ui-spacing-4)}.ui-confirm-dialog__actions{flex-direction:column-reverse;gap:var(--ui-spacing-2)}.ui-confirm-dialog__actions .ui-button-host{width:100%}}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}\n"], dependencies: [{ 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"] }, { 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: UiConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-confirm-dialog', standalone: true, imports: [LucideAngularModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-confirm-dialog-host',
+                        role: 'alertdialog',
+                        'aria-modal': 'true',
+                        '[attr.aria-labelledby]': '"ui-confirm-title"',
+                        '[attr.aria-describedby]': '"ui-confirm-message"',
+                    }, template: `
+    <div class="ui-confirm-dialog">
+      <!-- Icona -->
+      <div [class]="iconClasses">
+        <lucide-icon [name]="iconName" [size]="32" aria-hidden="true" />
+      </div>
+
+      <!-- Contenuto -->
+      <div class="ui-confirm-dialog__content">
+        @if (data.title) {
+          <h3 class="ui-confirm-dialog__title" id="ui-confirm-title">{{ data.title }}</h3>
+        }
+        <p class="ui-confirm-dialog__message" id="ui-confirm-message">{{ data.message }}</p>
+      </div>
+
+      <!-- Azioni -->
+      <div class="ui-confirm-dialog__actions">
+        <ui-button
+          [label]="data.cancelText || 'Annulla'"
+          variant="ghost"
+          size="md"
+          (click)="cancel()"
+        />
+        <ui-button
+          [label]="data.confirmText || 'Conferma'"
+          [variant]="confirmButtonVariant"
+          size="md"
+          (click)="confirm()"
+        />
+      </div>
+    </div>
+  `, styles: [".ui-confirm-dialog-host{display:block}.ui-confirm-dialog{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--ui-spacing-8) var(--ui-spacing-6);background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg)}.ui-confirm-dialog__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--ui-radius-full);margin-bottom:var(--ui-spacing-4)}.ui-confirm-dialog__icon--confirm{background:var(--ui-color-primary-light);color:var(--ui-color-primary)}.ui-confirm-dialog__icon--delete{background:var(--ui-color-warn-light);color:var(--ui-color-warn)}.ui-confirm-dialog__icon--warn{background:var(--ui-color-warning-light);color:var(--ui-color-warning)}.ui-confirm-dialog__icon--info{background:var(--ui-color-info-light);color:var(--ui-color-info)}.ui-confirm-dialog__content{margin-bottom:var(--ui-spacing-6)}.ui-confirm-dialog__title{margin:0 0 var(--ui-spacing-2);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight)}.ui-confirm-dialog__message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-text-secondary);line-height:var(--ui-line-height-normal);max-width:340px}.ui-confirm-dialog__actions{display:flex;gap:var(--ui-spacing-2);width:100%;justify-content:center}.ui-confirm-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-confirm-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}@media (max-width: 480px){.ui-confirm-dialog{padding:var(--ui-spacing-6) var(--ui-spacing-4)}.ui-confirm-dialog__actions{flex-direction:column-reverse;gap:var(--ui-spacing-2)}.ui-confirm-dialog__actions .ui-button-host{width:100%}}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}\n"] }]
+        }] });
+
+/** @internal Mappatura dimensione -> larghezza CSS per il pannello overlay. */
+const SIZE_WIDTH_MAP = {
+    sm: '400px',
+    md: '560px',
+    lg: '720px',
+    xl: '900px',
+    fullscreen: '95vw',
+};
+/**
+ * Servizio per aprire modali e dialoghi di conferma.
+ *
+ * Gestisce lo stacking intelligente: una modale regolare puo
+ * ospitare al massimo un dialogo di conferma sopra di se.
+ * Non e possibile stackare due modali regolari.
+ *
+ * @usageNotes
+ *
+ * ### Aprire una modale personalizzata
+ * ```typescript
+ * const ref = this.modalService.open(MyDialogComponent, {
+ *   size: 'lg',
+ *   data: { userId: 123 },
+ * });
+ *
+ * ref.afterClosed().subscribe(result => {
+ *   console.log('Risultato:', result);
+ * });
+ * ```
+ *
+ * ### Conferma rapida
+ * ```typescript
+ * this.modalService.confirm('Confermi questa azione?')
+ *   .subscribe(ok => { if (ok) this.procedi(); });
+ * ```
+ *
+ * ### Preset di conferma
+ * ```typescript
+ * this.modalService.confirmDelete('Progetto Alpha')
+ *   .subscribe(ok => { if (ok) this.elimina(); });
+ * ```
+ */
+class UiModalService {
+    constructor() {
+        /** @internal Istanza MatDialog per la gestione overlay. */
+        this.dialog = inject(MatDialog);
+        /** @internal Stack delle modali regolari aperte. */
+        this._modalStack = [];
+        /** @internal Traccia se un dialogo di conferma e attualmente aperto. */
+        this._confirmOpen = false;
+    }
+    /**
+     * Apre una modale con un componente personalizzato.
+     *
+     * Il componente aperto puo iniettare `MAT_DIALOG_DATA` per accedere
+     * ai dati e `MatDialogRef` per chiudere la modale.
+     *
+     * @param component - Componente standalone da renderizzare nella modale
+     * @param config - Configurazione (dimensione, dati, comportamento)
+     * @returns Riferimento alla modale aperta
+     */
+    open(component, config) {
+        // Regola di stacking: non stackare due modali regolari
+        if (this._modalStack.length > 0) {
+            console.warn('[UiModalService] Una modale e gia aperta. ' +
+                'Usa confirm() per aprire un dialogo di conferma sopra la modale corrente.');
+        }
+        const size = config?.size || 'md';
+        const dialogConfig = {
+            width: SIZE_WIDTH_MAP[size],
+            maxWidth: size === 'fullscreen' ? '95vw' : '90vw',
+            maxHeight: size === 'fullscreen' ? '95vh' : '90vh',
+            height: size === 'fullscreen' ? '95vh' : undefined,
+            disableClose: config?.disableClose ?? false,
+            autoFocus: true,
+            restoreFocus: true,
+            data: config?.data,
+            panelClass: ['ui-modal-panel', `ui-modal-panel--${size}`, ...(config?.panelClass ? [config.panelClass] : [])],
+            hasBackdrop: true,
+            backdropClass: ['cdk-overlay-dark-backdrop', 'ui-modal-backdrop'],
+        };
+        const ref = this.dialog.open(component, dialogConfig);
+        this._modalStack.push(ref);
+        ref.afterClosed().subscribe(() => {
+            this._modalStack = this._modalStack.filter((r) => r !== ref);
+        });
+        return ref;
+    }
+    /**
+     * Apre un dialogo di conferma.
+     *
+     * Accetta una stringa semplice (messaggio) o un oggetto di
+     * configurazione completo. Puo essere aperto sopra una modale
+     * esistente (stacking consentito).
+     *
+     * @param messageOrConfig - Messaggio o configurazione completa
+     * @returns Observable che emette `true` se confermato, `false` se annullato
+     */
+    confirm(messageOrConfig) {
+        const data = typeof messageOrConfig === 'string' ? { message: messageOrConfig } : messageOrConfig;
+        // Un solo dialogo di conferma alla volta
+        if (this._confirmOpen) {
+            console.warn('[UiModalService] Un dialogo di conferma e gia aperto.');
+            return new Observable((subscriber) => {
+                subscriber.next(false);
+                subscriber.complete();
+            });
+        }
+        this._confirmOpen = true;
+        const dialogConfig = {
+            width: '420px',
+            maxWidth: '90vw',
+            disableClose: false,
+            autoFocus: false,
+            restoreFocus: true,
+            data,
+            panelClass: ['ui-confirm-panel'],
+            hasBackdrop: true,
+            backdropClass: this._modalStack.length > 0
+                ? ['cdk-overlay-dark-backdrop', 'ui-confirm-backdrop--stacked']
+                : ['cdk-overlay-dark-backdrop', 'ui-modal-backdrop'],
+        };
+        const ref = this.dialog.open(UiConfirmDialogComponent, dialogConfig);
+        return ref.afterClosed().pipe(map((result) => {
+            this._confirmOpen = false;
+            return !!result;
+        }));
+    }
+    /**
+     * Scorciatoia: conferma eliminazione.
+     * Variante `delete` con icona cestino e pulsante warn.
+     *
+     * @param itemName - Nome opzionale dell'elemento da eliminare
+     */
+    confirmDelete(itemName) {
+        return this.confirm({
+            title: 'Conferma eliminazione',
+            message: itemName
+                ? `Sei sicuro di voler eliminare "${itemName}"? Questa azione non puo essere annullata.`
+                : 'Sei sicuro di voler eliminare questo elemento? Questa azione non puo essere annullata.',
+            confirmText: 'Elimina',
+            cancelText: 'Annulla',
+            variant: 'delete',
+        });
+    }
+    /**
+     * Scorciatoia: conferma abbandono modifiche.
+     * Variante `warn` con icona avviso.
+     */
+    confirmDiscard() {
+        return this.confirm({
+            title: 'Modifiche non salvate',
+            message: 'Ci sono modifiche non salvate. Sei sicuro di voler uscire senza salvare?',
+            confirmText: 'Esci senza salvare',
+            cancelText: 'Rimani',
+            variant: 'warn',
+        });
+    }
+    /**
+     * Scorciatoia: conferma salvataggio.
+     * Variante `confirm` con icona check.
+     */
+    confirmSave() {
+        return this.confirm({
+            title: 'Conferma salvataggio',
+            message: 'Sei sicuro di voler salvare le modifiche?',
+            confirmText: 'Salva',
+            cancelText: 'Annulla',
+            variant: 'confirm',
+        });
+    }
+    /** Chiude tutte le modali e dialoghi aperti. */
+    closeAll() {
+        this.dialog.closeAll();
+        this._modalStack = [];
+        this._confirmOpen = false;
+    }
+    /** Indica se ci sono modali o dialoghi attualmente aperti. */
+    get hasOpenDialogs() {
+        return this.dialog.openDialogs.length > 0;
+    }
+    /** Numero di modali regolari attualmente aperte. */
+    get openModalCount() {
+        return this._modalStack.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * 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
+            }] } });
+
+/**
+ * ng-ui-system — Button entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiButtonComponent,
+ *   UiButtonAreaComponent,
+ *   UiButtonDescriptor,
+ * } from 'ng-ui-system';
+ * ```
+ */
+// Components
+
+/**
+ * @module ng-ui-system/blackbox
+ * Componente modale per la visualizzazione di dati JSON nel debugger.
+ *
+ * Aperto da `UiBlackboxDebuggerComponent` tramite `UiModalService.open()`.
+ * Mostra il JSON formattato in un code block con syntax highlighting.
+ */
+class UiBlackboxJsonViewerComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.copied = false;
+        this.formattedJson = JSON.stringify(data?.json ?? {}, null, 2);
+    }
+    copyToClipboard() {
+        navigator.clipboard.writeText(this.formattedJson).then(() => {
+            this.copied = true;
+            setTimeout(() => { this.copied = false; }, 2000);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxJsonViewerComponent, deps: [{ token: i1$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UiBlackboxJsonViewerComponent, isStandalone: true, selector: "ui-blackbox-json-viewer", ngImport: i0, template: `
+    <ui-modal [config]="{ title: data.title || 'JSON', showCloseButton: true, hideFooter: true }">
+      <div class="json-viewer">
+        <div class="json-viewer__toolbar">
+          <button class="json-viewer__copy" (click)="copyToClipboard()">
+            <lucide-angular name="clipboard" [size]="12"></lucide-angular>
+            {{ copied ? 'Copiato!' : 'Copia' }}
+          </button>
+        </div>
+        <pre class="json-viewer__code"><code>{{ formattedJson }}</code></pre>
+      </div>
+    </ui-modal>
+  `, isInline: true, styles: [".json-viewer{display:flex;flex-direction:column;gap:8px;min-height:120px}.json-viewer__toolbar{display:flex;justify-content:flex-end}.json-viewer__copy{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--ui-radius-sm, 4px);font-size:11px;font-weight:600;cursor:pointer;background:var(--ui-color-bg-subtle, #f5f5f5);color:var(--ui-color-text-secondary, #666);border:1px solid var(--ui-color-border, #e5e5e5);transition:all .12s;&:hover{background:var(--ui-color-surface-hover, #eee);color:var(--ui-color-primary, #3b82f6);border-color:var(--ui-color-primary, #3b82f6)}}.json-viewer__code{margin:0;padding:16px;background:var(--ui-color-bg-subtle, #1e1e2e);border:1px solid var(--ui-color-border, #e5e5e5);border-radius:var(--ui-radius-md, 8px);overflow:auto;max-height:70vh;font-family:var(--ui-font-family-mono, \"Fira Code\", monospace);font-size:12px;line-height:1.6;color:var(--ui-color-text, #1a1a1a);white-space:pre-wrap;word-break:break-word;tab-size:2}\n"], dependencies: [{ kind: "component", type: UiModalComponent, selector: "ui-modal", inputs: ["config"], outputs: ["closed"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxJsonViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-blackbox-json-viewer', standalone: true, imports: [UiModalComponent, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <ui-modal [config]="{ title: data.title || 'JSON', showCloseButton: true, hideFooter: true }">
+      <div class="json-viewer">
+        <div class="json-viewer__toolbar">
+          <button class="json-viewer__copy" (click)="copyToClipboard()">
+            <lucide-angular name="clipboard" [size]="12"></lucide-angular>
+            {{ copied ? 'Copiato!' : 'Copia' }}
+          </button>
+        </div>
+        <pre class="json-viewer__code"><code>{{ formattedJson }}</code></pre>
+      </div>
+    </ui-modal>
+  `, styles: [".json-viewer{display:flex;flex-direction:column;gap:8px;min-height:120px}.json-viewer__toolbar{display:flex;justify-content:flex-end}.json-viewer__copy{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--ui-radius-sm, 4px);font-size:11px;font-weight:600;cursor:pointer;background:var(--ui-color-bg-subtle, #f5f5f5);color:var(--ui-color-text-secondary, #666);border:1px solid var(--ui-color-border, #e5e5e5);transition:all .12s;&:hover{background:var(--ui-color-surface-hover, #eee);color:var(--ui-color-primary, #3b82f6);border-color:var(--ui-color-primary, #3b82f6)}}.json-viewer__code{margin:0;padding:16px;background:var(--ui-color-bg-subtle, #1e1e2e);border:1px solid var(--ui-color-border, #e5e5e5);border-radius:var(--ui-radius-md, 8px);overflow:auto;max-height:70vh;font-family:var(--ui-font-family-mono, \"Fira Code\", monospace);font-size:12px;line-height:1.6;color:var(--ui-color-text, #1a1a1a);white-space:pre-wrap;word-break:break-word;tab-size:2}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * Componente debugger BlackBox — aperto in modale fullscreen.
+ *
+ * Layout:
+ * - Header con titolo e chiusura
+ * - Tab group: Dashboard | Timeline | Form Events | HTTP Calls
+ *
+ * Funzionalita:
+ * - Timeline unificata (navigazioni + click + form events + HTTP calls)
+ * - Form events con valori del form visibili
+ * - JSON detail modal al click su dati strutturati
+ */
+class UiBlackboxDebuggerComponent {
+    constructor(dialogRef, dialogData) {
+        this.dialogRef = dialogRef;
+        this.dialogData = dialogData;
+        this.blackbox = inject(UiBlackboxService);
+        this.http = inject(HttpClient);
+        this.modalService = inject(UiModalService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroy$ = new Subject();
+        /** Whether opened inside a dialog. */
+        this.isDialogMode = false;
+        this.selectedTab = 0;
+        this.session = null;
+        this.viewingSession = null;
+        this.pastSessions = [];
+        this.statsCards = [];
+        /** Unified timeline entries sorted by timestamp. */
+        this.timelineEntries = [];
+        this.isDialogMode = !!this.dialogRef;
+    }
+    get sessionDuration() {
+        if (!this.session)
+            return '—';
+        const ms = Date.now() - this.session.startedAt;
+        const s = Math.floor(ms / 1000);
+        const m = Math.floor(s / 60);
+        const h = Math.floor(m / 60);
+        if (h > 0)
+            return `${h}h ${m % 60}m`;
+        if (m > 0)
+            return `${m}m ${s % 60}s`;
+        return `${s}s`;
+    }
+    ngOnInit() {
+        this.refresh();
+        // Auto-refresh every 2s
+        interval(2000)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.refresh();
+            this.cdr.markForCheck();
+        });
+        // Load imported sessions if provided
+        if (this.dialogData?.importedSessions?.length) {
+            this.pastSessions = this.dialogData.importedSessions;
+            this.viewingSession = this.pastSessions[0];
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    refresh() {
+        this.session = this.blackbox.getCurrentSession();
+        this.viewingSession = this.viewingSession ?? this.session;
+        this.updateStats();
+        this.buildTimeline();
+        this.blackbox.getSessionHistory().then(sessions => {
+            this.pastSessions = sessions.filter(s => s.sessionId !== this.session?.sessionId);
+            this.cdr.markForCheck();
+        });
+    }
+    updateStats() {
+        const s = this.viewingSession;
+        this.statsCards = [
+            { icon: 'git-branch', value: s?.steps?.length ?? 0, label: 'Navigazioni' },
+            { icon: 'mouse-pointer-click', value: s?.steps?.reduce((sum, st) => sum + st.actions.length, 0) ?? 0, label: 'Click' },
+            { icon: 'file-text', value: s?.formEvents?.length ?? 0, label: 'Form Events' },
+            { icon: 'external-link', value: s?.calls?.length ?? 0, label: 'HTTP Calls' },
+        ];
+    }
+    /** Builds a unified timeline from all event sources. */
+    buildTimeline() {
+        const entries = [];
+        const s = this.viewingSession;
+        if (!s) {
+            this.timelineEntries = [];
+            return;
+        }
+        // Navigation steps + their child actions
+        for (const step of s.steps) {
+            entries.push({
+                timestamp: step.timestamp,
+                kind: 'navigation',
+                route: step.route,
+                previousRoute: step.previousRoute,
+                actionsCount: step.actions.length,
+            });
+            for (const action of step.actions) {
+                entries.push({
+                    timestamp: action.timestamp,
+                    kind: 'click',
+                    tag: action.target.tag,
+                    trackId: action.target.trackId,
+                    text: action.target.text,
+                });
+            }
+        }
+        // Form events
+        for (const fe of s.formEvents) {
+            entries.push({
+                timestamp: fe.timestamp,
+                kind: 'formEvent',
+                route: fe.route,
+                formId: fe.formId,
+                fieldKey: fe.fieldKey,
+                eventType: fe.eventType,
+                metadata: fe.metadata,
+            });
+        }
+        // HTTP calls
+        for (const call of s.calls) {
+            entries.push({
+                timestamp: call.timestamp,
+                kind: 'httpCall',
+                method: call.method,
+                url: call.url,
+                status: call.status,
+                durationMs: call.durationMs,
+                requestPayload: call.requestPayload,
+                responseHeaders: call.responseHeaders,
+            });
+        }
+        entries.sort((a, b) => a.timestamp - b.timestamp);
+        this.timelineEntries = entries;
+    }
+    viewSession(s) {
+        this.viewingSession = s;
+        this.updateStats();
+        this.buildTimeline();
+        this.selectedTab = 1; // switch to timeline
+        this.cdr.markForCheck();
+    }
+    closeDialog() {
+        this.dialogRef?.close();
+    }
+    // ─── JSON Modal ──────────────────────────────────────────────
+    openJsonModal(title, data) {
+        this.modalService.open(UiBlackboxJsonViewerComponent, {
+            size: 'md',
+            data: { title, json: data },
+        });
+    }
+    // ─── HTTP Simulator ────────────────────────────────────────────
+    simulateGet() {
+        this.http.get('https://jsonplaceholder.typicode.com/todos/1', {
+            headers: new HttpHeaders({
+                'X-Ui-Blackbox': 'true',
+                'X-Ui-Blackbox-Headers': 'content-type',
+            }),
+        }).subscribe({ next: () => this.refresh(), error: () => this.refresh() });
+    }
+    simulatePost() {
+        this.http.post('https://jsonplaceholder.typicode.com/posts', {
+            title: 'BlackBox Test',
+            body: 'Payload fittizio dalla demo',
+            userId: 42,
+        }, {
+            headers: new HttpHeaders({ 'X-Ui-Blackbox': 'true' }),
+        }).subscribe({ next: () => this.refresh(), error: () => this.refresh() });
+    }
+    simulateFail() {
+        this.http.get('https://jsonplaceholder.typicode.com/todos/99999999', {
+            headers: new HttpHeaders({ 'X-Ui-Blackbox': 'true' }),
+        }).subscribe({ next: () => this.refresh(), error: () => this.refresh() });
+    }
+    // ─── Export / Import / Clear ───────────────────────────────────
+    async exportSessions() {
+        const blob = await this.blackbox.exportSessions();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `blackbox-${new Date().toISOString().slice(0, 10)}.jsonl`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    importJsonl() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.jsonl,.json';
+        input.onchange = async (e) => {
+            const file = e.target.files[0];
+            if (!file)
+                return;
+            try {
+                const text = await file.text();
+                const lines = text.trim().split('\n').filter((l) => l.trim());
+                const sessions = lines.map((l) => JSON.parse(l));
+                this.pastSessions = [...sessions, ...this.pastSessions];
+                if (sessions.length > 0) {
+                    this.viewingSession = sessions[0];
+                    this.updateStats();
+                    this.buildTimeline();
+                    this.selectedTab = 1;
+                }
+                this.cdr.markForCheck();
+            }
+            catch {
+                console.error('[BlackBox Debugger] Errore parsing JSONL');
+            }
+        };
+        input.click();
+    }
+    async clearHistory() {
+        await this.blackbox.clearHistory();
+        this.pastSessions = [];
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxDebuggerComponent, deps: [{ token: i1$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiBlackboxDebuggerComponent, isStandalone: true, selector: "ui-blackbox-debugger", ngImport: i0, template: `
+    <div class="dbg-root" [class.dialog-mode]="isDialogMode">
+
+      <!-- Header -->
+      @if (isDialogMode) {
+        <div class="dbg-header">
+          <div class="dbg-header__left">
+            <lucide-angular name="activity" [size]="20" class="dbg-header__icon"></lucide-angular>
+            <h2>BlackBox Debugger</h2>
+          </div>
+          <ui-button icon="x" variant="ghost" size="md" ariaLabel="Chiudi" tooltip="Chiudi" (click)="closeDialog()" />
+        </div>
+      }
+
+      <!-- Tabs -->
+      <mat-tab-group
+        [selectedIndex]="selectedTab"
+        (selectedIndexChange)="selectedTab = $event"
+        class="dbg-tabs"
+      >
+        <!-- TAB: Dashboard -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="monitor" [size]="14" style="margin-right:6px"></lucide-angular>
+            Dashboard
+          </ng-template>
+
+          <div class="dbg-tab-content dbg-dashboard">
+            <!-- Stats -->
+            <div class="dbg-stats">
+              <div class="dbg-stat" *ngFor="let s of statsCards">
+                <lucide-angular [name]="s.icon" [size]="18" class="dbg-stat__icon"></lucide-angular>
+                <span class="dbg-stat__value">{{ s.value }}</span>
+                <span class="dbg-stat__label">{{ s.label }}</span>
+              </div>
+            </div>
+            <div class="dbg-dashboard-grid">
+            <!-- Session info -->
+            <div class="dbg-panel" *ngIf="session">
+              <div class="dbg-panel__header">
+                <lucide-angular name="info" [size]="14"></lucide-angular>
+                Sessione corrente
+              </div>
+              <div class="dbg-kv">
+                <span class="dbg-kv__k">Session ID</span>
+                <code class="dbg-kv__v dbg-mono">{{ session.sessionId }}</code>
+                <span class="dbg-kv__k">Fingerprint</span>
+                <code class="dbg-kv__v dbg-mono">{{ session.fingerprint }}</code>
+                <span class="dbg-kv__k">Inizio</span>
+                <span class="dbg-kv__v">{{ session.startedAt | date:'dd/MM/yyyy HH:mm:ss' }}</span>
+                <span class="dbg-kv__k">Durata</span>
+                <span class="dbg-kv__v">{{ sessionDuration }}</span>
+              </div>
+            </div>
+
+            <!-- HTTP Simulator -->
+            <div class="dbg-panel">
+              <div class="dbg-panel__header">
+                <lucide-angular name="zap" [size]="14"></lucide-angular>
+                HTTP Simulator
+              </div>
+              <p class="dbg-panel__desc">Genera chiamate fittizie per testare l'interceptor BlackBox.</p>
+              <div class="dbg-sim-btns">
+                <button class="dbg-sim-btn dbg-sim-btn--get" (click)="simulateGet()">
+                  <lucide-angular name="play" [size]="12"></lucide-angular> GET /todos/1
+                </button>
+                <button class="dbg-sim-btn dbg-sim-btn--post" (click)="simulatePost()">
+                  <lucide-angular name="play" [size]="12"></lucide-angular> POST /posts
+                </button>
+                <button class="dbg-sim-btn dbg-sim-btn--fail" (click)="simulateFail()">
+                  <lucide-angular name="play" [size]="12"></lucide-angular> GET /404
+                </button>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="dbg-panel">
+              <div class="dbg-panel__header">
+                <lucide-angular name="settings" [size]="14"></lucide-angular>
+                Azioni
+              </div>
+              <div class="dbg-sim-btns">
+                <button class="dbg-action-btn" (click)="refresh()">
+                  <lucide-angular name="refresh-cw" [size]="12"></lucide-angular> Aggiorna
+                </button>
+                <button class="dbg-action-btn" (click)="exportSessions()">
+                  <lucide-angular name="download" [size]="12"></lucide-angular> Esporta JSONL
+                </button>
+                <button class="dbg-action-btn" (click)="importJsonl()">
+                  <lucide-angular name="upload" [size]="12"></lucide-angular> Importa JSONL
+                </button>
+                <button class="dbg-action-btn dbg-action-btn--danger" (click)="clearHistory()">
+                  <lucide-angular name="trash-2" [size]="12"></lucide-angular> Svuota
+                </button>
+              </div>
+            </div>
+
+            <!-- Past sessions -->
+            <div class="dbg-panel" *ngIf="pastSessions.length > 0">
+              <div class="dbg-panel__header">
+                <lucide-angular name="clock" [size]="14"></lucide-angular>
+                Sessioni archiviate ({{ pastSessions.length }})
+              </div>
+              <div class="dbg-session-list">
+                <div class="dbg-session-row" *ngFor="let s of pastSessions" (click)="viewSession(s)">
+                  <code class="dbg-mono">{{ s.sessionId | slice:0:12 }}...</code>
+                  <span>{{ s.startedAt | date:'dd/MM HH:mm' }}</span>
+                  <span>{{ s.steps.length }} steps</span>
+                  <lucide-angular name="chevron-right" [size]="14" class="dbg-session-row__arrow"></lucide-angular>
+                </div>
+              </div>
+            </div>
+            </div>
+
+          </div>
+        </mat-tab>
+
+        <!-- TAB: Timeline (unified) -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="git-branch" [size]="14" style="margin-right:6px"></lucide-angular>
+            Timeline
+          </ng-template>
+
+          <div class="dbg-tab-content">
+            <div class="dbg-timeline" *ngIf="timelineEntries.length; else noData">
+              <div class="dbg-tl-entry"
+                   *ngFor="let entry of timelineEntries; let last = last"
+              >
+                <div class="dbg-tl-entry__row">
+                  <!-- Dot -->
+                  <div class="dbg-tl-dot" [ngClass]="'dbg-tl-dot--' + entry.kind"></div>
+
+                  <!-- Time -->
+                  <span class="dbg-tl-entry__time dbg-mono">{{ entry.timestamp | date:'HH:mm:ss.SSS' }}</span>
+
+                  <!-- Kind badge -->
+                  <span class="dbg-badge" [ngClass]="'dbg-badge--tl-' + entry.kind">{{ entry.kind }}</span>
+
+                  <!-- Content based on kind -->
+                  <ng-container [ngSwitch]="entry.kind">
+
+                    <!-- Navigation -->
+                    <ng-container *ngSwitchCase="'navigation'">
+                      <code class="dbg-tl-entry__route">{{ entry.route }}</code>
+                      <span class="dbg-tl-entry__detail">{{ entry.actionsCount }} azioni</span>
+                    </ng-container>
+
+                    <!-- Click -->
+                    <ng-container *ngSwitchCase="'click'">
+                      <code class="dbg-tl-entry__target">&lt;{{ entry.tag }}&gt;</code>
+                      <span class="dbg-badge dbg-badge--id" *ngIf="entry.trackId">#{{ entry.trackId }}</span>
+                      <span class="dbg-tl-entry__text" *ngIf="entry.text">{{ entry.text }}</span>
+                    </ng-container>
+
+                    <!-- Form event -->
+                    <ng-container *ngSwitchCase="'formEvent'">
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + entry.eventType">{{ entry.eventType }}</span>
+                      <code class="dbg-tl-entry__field">{{ entry.formId }}.{{ entry.fieldKey }}</code>
+                      <button class="dbg-json-btn" *ngIf="entry.metadata" (click)="openJsonModal('Form Event — ' + entry.fieldKey, entry.metadata)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                    </ng-container>
+
+                    <!-- HTTP call -->
+                    <ng-container *ngSwitchCase="'httpCall'">
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + (entry.method ?? '').toLowerCase()">{{ entry.method }}</span>
+                      <code class="dbg-tl-entry__url">{{ entry.url }}</code>
+                      <span class="dbg-status" [class.dbg-status--ok]="entry.status && entry.status < 400"
+                            [class.dbg-status--err]="!entry.status || entry.status! >= 400">
+                        {{ entry.status ?? '—' }}
+                      </span>
+                      <span class="dbg-tl-entry__detail" *ngIf="entry.durationMs">{{ entry.durationMs }}ms</span>
+                      <button class="dbg-json-btn" *ngIf="entry.requestPayload" (click)="openJsonModal('HTTP Payload', entry.requestPayload)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                    </ng-container>
+
+                  </ng-container>
+                </div>
+
+                <div class="dbg-tl-line" *ngIf="!last"></div>
+              </div>
+            </div>
+
+            <ng-template #noData>
+              <div class="dbg-empty">
+                <lucide-angular name="git-branch" [size]="48" style="opacity:0.3"></lucide-angular>
+                <p>Nessun evento registrato</p>
+              </div>
+            </ng-template>
+          </div>
+        </mat-tab>
+
+        <!-- TAB: Form Events -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="file-text" [size]="14" style="margin-right:6px"></lucide-angular>
+            Form Events
+          </ng-template>
+
+          <div class="dbg-tab-content">
+            <div class="dbg-table-wrap" *ngIf="viewingSession?.formEvents?.length; else noFormData">
+              <table class="dbg-table">
+                <thead>
+                  <tr>
+                    <th>Ora</th>
+                    <th>Rotta</th>
+                    <th>Form</th>
+                    <th>Campo</th>
+                    <th>Evento</th>
+                    <th>Valore campo</th>
+                    <th>Form completo</th>
+                    <th>Dettagli</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let ev of viewingSession!.formEvents">
+                    <td class="dbg-mono">{{ ev.timestamp | date:'HH:mm:ss.SSS' }}</td>
+                    <td class="dbg-mono dbg-truncate">{{ ev.route }}</td>
+                    <td>{{ ev.formId }}</td>
+                    <td><code>{{ ev.fieldKey }}</code></td>
+                    <td>
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + ev.eventType">{{ ev.eventType }}</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="ev.metadata?.value !== undefined"
+                              (click)="openJsonModal('Valore: ' + ev.fieldKey, ev.metadata!.value)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular> valore
+                      </button>
+                      <span class="dbg-na" *ngIf="ev.metadata?.value === undefined">—</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="ev.metadata?.formValues"
+                              (click)="openJsonModal('Form Values — ' + ev.formId, ev.metadata!.formValues)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular> form
+                      </button>
+                      <span class="dbg-na" *ngIf="!ev.metadata?.formValues">—</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="ev.metadata"
+                              (click)="openJsonModal('Dettagli evento', ev.metadata)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <ng-template #noFormData>
+              <div class="dbg-empty">
+                <lucide-angular name="file-text" [size]="48" style="opacity:0.3"></lucide-angular>
+                <p>Nessun form event registrato</p>
+              </div>
+            </ng-template>
+          </div>
+        </mat-tab>
+
+        <!-- TAB: HTTP Calls -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="external-link" [size]="14" style="margin-right:6px"></lucide-angular>
+            HTTP Calls
+          </ng-template>
+
+          <div class="dbg-tab-content">
+            <div class="dbg-table-wrap" *ngIf="viewingSession?.calls?.length; else noHttpData">
+              <table class="dbg-table">
+                <thead>
+                  <tr>
+                    <th>Ora</th>
+                    <th>Metodo</th>
+                    <th>URL</th>
+                    <th>Status</th>
+                    <th>Durata</th>
+                    <th>Payload</th>
+                    <th>Headers</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let call of viewingSession!.calls">
+                    <td class="dbg-mono">{{ call.timestamp | date:'HH:mm:ss.SSS' }}</td>
+                    <td>
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + call.method.toLowerCase()">{{ call.method }}</span>
+                    </td>
+                    <td class="dbg-mono dbg-truncate">{{ call.url }}</td>
+                    <td>
+                      <span class="dbg-status" [class.dbg-status--ok]="call.status && call.status < 400"
+                            [class.dbg-status--err]="!call.status || call.status >= 400">
+                        {{ call.status ?? '—' }}
+                      </span>
+                    </td>
+                    <td class="dbg-mono">{{ call.durationMs }}ms</td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="call.requestPayload"
+                              (click)="openJsonModal('Payload — ' + call.method + ' ' + call.url, call.requestPayload)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                      <span class="dbg-na" *ngIf="!call.requestPayload">—</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="call.responseHeaders"
+                              (click)="openJsonModal('Response Headers', call.responseHeaders)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                      <span class="dbg-na" *ngIf="!call.responseHeaders">—</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <ng-template #noHttpData>
+              <div class="dbg-empty">
+                <lucide-angular name="external-link" [size]="48" style="opacity:0.3"></lucide-angular>
+                <p>Nessuna chiamata HTTP intercettata</p>
+              </div>
+            </ng-template>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+    </div>
+  `, isInline: true, styles: ["@use \"../../core/tokens/mixins\" as ui;.dbg-root{display:flex;flex-direction:column;height:100vh;background:var(--ui-color-bg-subtle);&.dialog-mode{height:100%}}.dbg-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-3) var(--ui-spacing-4);background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);box-shadow:var(--ui-shadow-sm);h2{margin:0;font-size:var(--ui-font-size-lg);font-weight:500;color:var(--ui-color-text)}}.dbg-header__left{display:flex;align-items:center;gap:var(--ui-spacing-2)}.dbg-header__icon{color:var(--ui-color-primary)}.dbg-tabs{flex:1;display:flex;flex-direction:column;overflow:hidden;::ng-deep .mat-mdc-tab-header{background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border)}::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--ui-color-text-secondary);font-weight:500;font-size:var(--ui-font-size-sm)}::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ui-color-primary);font-weight:600}::ng-deep .mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--ui-color-primary);border-width:3px}::ng-deep .mat-mdc-tab-body-wrapper{flex:1;overflow:hidden}::ng-deep .mat-mdc-tab-body{height:100%}::ng-deep .mat-mdc-tab-body-content{height:100%;overflow:auto}}.dbg-tab-content{padding:var(--ui-spacing-4);max-width:1200px;margin:0 auto;width:100%}.dbg-dashboard{display:flex;flex-direction:column;gap:var(--ui-spacing-4)}.dbg-dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ui-spacing-4)}.dbg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ui-spacing-3)}.dbg-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--ui-spacing-4);background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);transition:box-shadow .15s;&:hover{box-shadow:var(--ui-shadow-md)}}.dbg-stat__icon{color:var(--ui-color-primary);opacity:.7}.dbg-stat__value{font-size:var(--ui-font-size-2xl);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-primary);font-family:var(--ui-font-family-mono)}.dbg-stat__label{font-size:11px;color:var(--ui-color-text-muted);text-transform:uppercase;letter-spacing:.05em}.dbg-panel{background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);padding:var(--ui-spacing-4)}.dbg-panel__header{display:flex;align-items:center;gap:var(--ui-spacing-2);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);margin-bottom:var(--ui-spacing-3)}.dbg-panel__desc{font-size:var(--ui-font-size-xs);color:var(--ui-color-text-secondary);margin:0 0 var(--ui-spacing-3)}.dbg-kv{display:grid;grid-template-columns:100px 1fr;gap:var(--ui-spacing-2) var(--ui-spacing-4);font-size:var(--ui-font-size-sm)}.dbg-kv__k{font-weight:600;color:var(--ui-color-text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.03em}.dbg-kv__v{color:var(--ui-color-text)}.dbg-mono{font-family:var(--ui-font-family-mono);font-size:var(--ui-font-size-xs)}.dbg-sim-btns{display:flex;gap:var(--ui-spacing-2);flex-wrap:wrap}.dbg-sim-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s}.dbg-sim-btn--get{background:#dcfce7;color:#166534;border-color:#86efac;&:hover{background:#bbf7d0}}.dbg-sim-btn--post{background:#dbeafe;color:#1e40af;border-color:#93c5fd;&:hover{background:#bfdbfe}}.dbg-sim-btn--fail{background:#fee2e2;color:#991b1b;border-color:#fca5a5;&:hover{background:#fecaca}}.dbg-action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);font-weight:600;cursor:pointer;background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border);transition:all .15s;&:hover{background:var(--ui-color-surface-hover)}}.dbg-action-btn--danger{color:#dc2626;border-color:#fca5a5}.dbg-action-btn--danger:hover{background:#fee2e2}.dbg-session-list{display:flex;flex-direction:column;gap:var(--ui-spacing-1)}.dbg-session-row{display:flex;align-items:center;gap:var(--ui-spacing-3);padding:var(--ui-spacing-2) var(--ui-spacing-3);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);cursor:pointer;transition:all .12s;&:hover{border-color:var(--ui-color-primary);background:color-mix(in srgb,var(--ui-color-primary) 4%,transparent)}}.dbg-session-row__arrow{margin-left:auto;color:var(--ui-color-text-muted)}.dbg-timeline{position:relative;padding-left:24px}.dbg-tl-entry{position:relative;margin-bottom:2px}.dbg-tl-entry__row{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:4px var(--ui-spacing-3);border-radius:var(--ui-radius-md);font-size:12px;transition:background .12s;&:hover{background:var(--ui-color-surface-hover)}}.dbg-tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:absolute;left:-16px;top:10px}.dbg-tl-dot--navigation{background:var(--ui-color-primary);width:10px;height:10px;left:-17px;top:9px}.dbg-tl-dot--click{background:var(--ui-color-border-strong)}.dbg-tl-dot--formEvent{background:#f59e0b}.dbg-tl-dot--httpCall{background:#3b82f6}.dbg-tl-line{position:absolute;left:-12px;top:24px;bottom:-2px;width:2px;background:var(--ui-color-border)}.dbg-tl-entry__time{color:var(--ui-color-text-muted);min-width:85px;font-size:11px}.dbg-tl-entry__route{font-family:var(--ui-font-family-mono);font-weight:600;color:var(--ui-color-text);font-size:12px}.dbg-tl-entry__target,.dbg-tl-entry__field{font-family:var(--ui-font-family-mono);color:var(--ui-color-text-secondary);font-size:11px}.dbg-tl-entry__url{font-family:var(--ui-font-family-mono);color:var(--ui-color-text-secondary);font-size:11px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbg-tl-entry__detail{font-size:11px;color:var(--ui-color-text-muted)}.dbg-tl-entry__text{color:var(--ui-color-text-muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dbg-json-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--ui-radius-sm);font-size:10px;font-weight:600;cursor:pointer;background:var(--ui-color-bg-subtle);color:var(--ui-color-text-secondary);border:1px solid var(--ui-color-border);transition:all .12s;&:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-primary);border-color:var(--ui-color-primary)}}.dbg-na{color:var(--ui-color-text-muted);font-size:11px}.dbg-table-wrap{overflow-x:auto;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg)}.dbg-table{width:100%;border-collapse:collapse;font-size:var(--ui-font-size-xs);th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--ui-color-border)}th{background:var(--ui-color-bg-subtle);font-weight:600;color:var(--ui-color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:10px}tbody tr:hover{background:var(--ui-color-surface-hover)}tbody tr:last-child td{border-bottom:none}}.dbg-truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbg-badge{display:inline-block;padding:1px 8px;border-radius:var(--ui-radius-full);font-size:10px;font-weight:600;white-space:nowrap}.dbg-badge--tl-navigation{background:color-mix(in srgb,var(--ui-color-primary) 12%,transparent);color:var(--ui-color-primary)}.dbg-badge--tl-click{background:#f1f5f9;color:#475569}.dbg-badge--tl-formEvent{background:#fef3c7;color:#92400e}.dbg-badge--tl-httpCall{background:#dbeafe;color:#1e40af}.dbg-badge--action{background:color-mix(in srgb,var(--ui-color-primary) 10%,transparent);color:var(--ui-color-primary);text-transform:uppercase}.dbg-badge--id{background:color-mix(in srgb,var(--ui-color-primary) 8%,transparent);color:var(--ui-color-primary)}.dbg-badge--focus{background:#dbeafe;color:#1e40af}.dbg-badge--blur{background:#f1f5f9;color:#475569}.dbg-badge--valueChange{background:#fef3c7;color:#92400e}.dbg-badge--validationError{background:#fee2e2;color:#991b1b}.dbg-badge--get{background:#dcfce7;color:#166534}.dbg-badge--post{background:#dbeafe;color:#1e40af}.dbg-badge--put{background:#fef3c7;color:#92400e}.dbg-badge--delete{background:#fee2e2;color:#991b1b}.dbg-status{font-family:var(--ui-font-family-mono);font-weight:600}.dbg-status--ok{color:#16a34a}.dbg-status--err{color:#dc2626}.dbg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ui-spacing-12);color:var(--ui-color-text-muted);text-align:center;p{margin:var(--ui-spacing-3) 0 0;font-size:var(--ui-font-size-sm)}}@media (max-width: 640px){.dbg-stats{grid-template-columns:repeat(2,1fr)}.dbg-dashboard-grid{grid-template-columns:1fr}.dbg-sim-btns{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["label", "tooltip", "variant", "size", "icon", "iconPosition", "loading", "disabled", "fullWidth", "type", "ariaLabel", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxDebuggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-blackbox-debugger', standalone: true, imports: [
+                        CommonModule,
+                        MatTabsModule,
+                        LucideAngularModule,
+                        UiButtonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="dbg-root" [class.dialog-mode]="isDialogMode">
+
+      <!-- Header -->
+      @if (isDialogMode) {
+        <div class="dbg-header">
+          <div class="dbg-header__left">
+            <lucide-angular name="activity" [size]="20" class="dbg-header__icon"></lucide-angular>
+            <h2>BlackBox Debugger</h2>
+          </div>
+          <ui-button icon="x" variant="ghost" size="md" ariaLabel="Chiudi" tooltip="Chiudi" (click)="closeDialog()" />
+        </div>
+      }
+
+      <!-- Tabs -->
+      <mat-tab-group
+        [selectedIndex]="selectedTab"
+        (selectedIndexChange)="selectedTab = $event"
+        class="dbg-tabs"
+      >
+        <!-- TAB: Dashboard -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="monitor" [size]="14" style="margin-right:6px"></lucide-angular>
+            Dashboard
+          </ng-template>
+
+          <div class="dbg-tab-content dbg-dashboard">
+            <!-- Stats -->
+            <div class="dbg-stats">
+              <div class="dbg-stat" *ngFor="let s of statsCards">
+                <lucide-angular [name]="s.icon" [size]="18" class="dbg-stat__icon"></lucide-angular>
+                <span class="dbg-stat__value">{{ s.value }}</span>
+                <span class="dbg-stat__label">{{ s.label }}</span>
+              </div>
+            </div>
+            <div class="dbg-dashboard-grid">
+            <!-- Session info -->
+            <div class="dbg-panel" *ngIf="session">
+              <div class="dbg-panel__header">
+                <lucide-angular name="info" [size]="14"></lucide-angular>
+                Sessione corrente
+              </div>
+              <div class="dbg-kv">
+                <span class="dbg-kv__k">Session ID</span>
+                <code class="dbg-kv__v dbg-mono">{{ session.sessionId }}</code>
+                <span class="dbg-kv__k">Fingerprint</span>
+                <code class="dbg-kv__v dbg-mono">{{ session.fingerprint }}</code>
+                <span class="dbg-kv__k">Inizio</span>
+                <span class="dbg-kv__v">{{ session.startedAt | date:'dd/MM/yyyy HH:mm:ss' }}</span>
+                <span class="dbg-kv__k">Durata</span>
+                <span class="dbg-kv__v">{{ sessionDuration }}</span>
+              </div>
+            </div>
+
+            <!-- HTTP Simulator -->
+            <div class="dbg-panel">
+              <div class="dbg-panel__header">
+                <lucide-angular name="zap" [size]="14"></lucide-angular>
+                HTTP Simulator
+              </div>
+              <p class="dbg-panel__desc">Genera chiamate fittizie per testare l'interceptor BlackBox.</p>
+              <div class="dbg-sim-btns">
+                <button class="dbg-sim-btn dbg-sim-btn--get" (click)="simulateGet()">
+                  <lucide-angular name="play" [size]="12"></lucide-angular> GET /todos/1
+                </button>
+                <button class="dbg-sim-btn dbg-sim-btn--post" (click)="simulatePost()">
+                  <lucide-angular name="play" [size]="12"></lucide-angular> POST /posts
+                </button>
+                <button class="dbg-sim-btn dbg-sim-btn--fail" (click)="simulateFail()">
+                  <lucide-angular name="play" [size]="12"></lucide-angular> GET /404
+                </button>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="dbg-panel">
+              <div class="dbg-panel__header">
+                <lucide-angular name="settings" [size]="14"></lucide-angular>
+                Azioni
+              </div>
+              <div class="dbg-sim-btns">
+                <button class="dbg-action-btn" (click)="refresh()">
+                  <lucide-angular name="refresh-cw" [size]="12"></lucide-angular> Aggiorna
+                </button>
+                <button class="dbg-action-btn" (click)="exportSessions()">
+                  <lucide-angular name="download" [size]="12"></lucide-angular> Esporta JSONL
+                </button>
+                <button class="dbg-action-btn" (click)="importJsonl()">
+                  <lucide-angular name="upload" [size]="12"></lucide-angular> Importa JSONL
+                </button>
+                <button class="dbg-action-btn dbg-action-btn--danger" (click)="clearHistory()">
+                  <lucide-angular name="trash-2" [size]="12"></lucide-angular> Svuota
+                </button>
+              </div>
+            </div>
+
+            <!-- Past sessions -->
+            <div class="dbg-panel" *ngIf="pastSessions.length > 0">
+              <div class="dbg-panel__header">
+                <lucide-angular name="clock" [size]="14"></lucide-angular>
+                Sessioni archiviate ({{ pastSessions.length }})
+              </div>
+              <div class="dbg-session-list">
+                <div class="dbg-session-row" *ngFor="let s of pastSessions" (click)="viewSession(s)">
+                  <code class="dbg-mono">{{ s.sessionId | slice:0:12 }}...</code>
+                  <span>{{ s.startedAt | date:'dd/MM HH:mm' }}</span>
+                  <span>{{ s.steps.length }} steps</span>
+                  <lucide-angular name="chevron-right" [size]="14" class="dbg-session-row__arrow"></lucide-angular>
+                </div>
+              </div>
+            </div>
+            </div>
+
+          </div>
+        </mat-tab>
+
+        <!-- TAB: Timeline (unified) -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="git-branch" [size]="14" style="margin-right:6px"></lucide-angular>
+            Timeline
+          </ng-template>
+
+          <div class="dbg-tab-content">
+            <div class="dbg-timeline" *ngIf="timelineEntries.length; else noData">
+              <div class="dbg-tl-entry"
+                   *ngFor="let entry of timelineEntries; let last = last"
+              >
+                <div class="dbg-tl-entry__row">
+                  <!-- Dot -->
+                  <div class="dbg-tl-dot" [ngClass]="'dbg-tl-dot--' + entry.kind"></div>
+
+                  <!-- Time -->
+                  <span class="dbg-tl-entry__time dbg-mono">{{ entry.timestamp | date:'HH:mm:ss.SSS' }}</span>
+
+                  <!-- Kind badge -->
+                  <span class="dbg-badge" [ngClass]="'dbg-badge--tl-' + entry.kind">{{ entry.kind }}</span>
+
+                  <!-- Content based on kind -->
+                  <ng-container [ngSwitch]="entry.kind">
+
+                    <!-- Navigation -->
+                    <ng-container *ngSwitchCase="'navigation'">
+                      <code class="dbg-tl-entry__route">{{ entry.route }}</code>
+                      <span class="dbg-tl-entry__detail">{{ entry.actionsCount }} azioni</span>
+                    </ng-container>
+
+                    <!-- Click -->
+                    <ng-container *ngSwitchCase="'click'">
+                      <code class="dbg-tl-entry__target">&lt;{{ entry.tag }}&gt;</code>
+                      <span class="dbg-badge dbg-badge--id" *ngIf="entry.trackId">#{{ entry.trackId }}</span>
+                      <span class="dbg-tl-entry__text" *ngIf="entry.text">{{ entry.text }}</span>
+                    </ng-container>
+
+                    <!-- Form event -->
+                    <ng-container *ngSwitchCase="'formEvent'">
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + entry.eventType">{{ entry.eventType }}</span>
+                      <code class="dbg-tl-entry__field">{{ entry.formId }}.{{ entry.fieldKey }}</code>
+                      <button class="dbg-json-btn" *ngIf="entry.metadata" (click)="openJsonModal('Form Event — ' + entry.fieldKey, entry.metadata)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                    </ng-container>
+
+                    <!-- HTTP call -->
+                    <ng-container *ngSwitchCase="'httpCall'">
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + (entry.method ?? '').toLowerCase()">{{ entry.method }}</span>
+                      <code class="dbg-tl-entry__url">{{ entry.url }}</code>
+                      <span class="dbg-status" [class.dbg-status--ok]="entry.status && entry.status < 400"
+                            [class.dbg-status--err]="!entry.status || entry.status! >= 400">
+                        {{ entry.status ?? '—' }}
+                      </span>
+                      <span class="dbg-tl-entry__detail" *ngIf="entry.durationMs">{{ entry.durationMs }}ms</span>
+                      <button class="dbg-json-btn" *ngIf="entry.requestPayload" (click)="openJsonModal('HTTP Payload', entry.requestPayload)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                    </ng-container>
+
+                  </ng-container>
+                </div>
+
+                <div class="dbg-tl-line" *ngIf="!last"></div>
+              </div>
+            </div>
+
+            <ng-template #noData>
+              <div class="dbg-empty">
+                <lucide-angular name="git-branch" [size]="48" style="opacity:0.3"></lucide-angular>
+                <p>Nessun evento registrato</p>
+              </div>
+            </ng-template>
+          </div>
+        </mat-tab>
+
+        <!-- TAB: Form Events -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="file-text" [size]="14" style="margin-right:6px"></lucide-angular>
+            Form Events
+          </ng-template>
+
+          <div class="dbg-tab-content">
+            <div class="dbg-table-wrap" *ngIf="viewingSession?.formEvents?.length; else noFormData">
+              <table class="dbg-table">
+                <thead>
+                  <tr>
+                    <th>Ora</th>
+                    <th>Rotta</th>
+                    <th>Form</th>
+                    <th>Campo</th>
+                    <th>Evento</th>
+                    <th>Valore campo</th>
+                    <th>Form completo</th>
+                    <th>Dettagli</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let ev of viewingSession!.formEvents">
+                    <td class="dbg-mono">{{ ev.timestamp | date:'HH:mm:ss.SSS' }}</td>
+                    <td class="dbg-mono dbg-truncate">{{ ev.route }}</td>
+                    <td>{{ ev.formId }}</td>
+                    <td><code>{{ ev.fieldKey }}</code></td>
+                    <td>
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + ev.eventType">{{ ev.eventType }}</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="ev.metadata?.value !== undefined"
+                              (click)="openJsonModal('Valore: ' + ev.fieldKey, ev.metadata!.value)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular> valore
+                      </button>
+                      <span class="dbg-na" *ngIf="ev.metadata?.value === undefined">—</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="ev.metadata?.formValues"
+                              (click)="openJsonModal('Form Values — ' + ev.formId, ev.metadata!.formValues)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular> form
+                      </button>
+                      <span class="dbg-na" *ngIf="!ev.metadata?.formValues">—</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="ev.metadata"
+                              (click)="openJsonModal('Dettagli evento', ev.metadata)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <ng-template #noFormData>
+              <div class="dbg-empty">
+                <lucide-angular name="file-text" [size]="48" style="opacity:0.3"></lucide-angular>
+                <p>Nessun form event registrato</p>
+              </div>
+            </ng-template>
+          </div>
+        </mat-tab>
+
+        <!-- TAB: HTTP Calls -->
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <lucide-angular name="external-link" [size]="14" style="margin-right:6px"></lucide-angular>
+            HTTP Calls
+          </ng-template>
+
+          <div class="dbg-tab-content">
+            <div class="dbg-table-wrap" *ngIf="viewingSession?.calls?.length; else noHttpData">
+              <table class="dbg-table">
+                <thead>
+                  <tr>
+                    <th>Ora</th>
+                    <th>Metodo</th>
+                    <th>URL</th>
+                    <th>Status</th>
+                    <th>Durata</th>
+                    <th>Payload</th>
+                    <th>Headers</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let call of viewingSession!.calls">
+                    <td class="dbg-mono">{{ call.timestamp | date:'HH:mm:ss.SSS' }}</td>
+                    <td>
+                      <span class="dbg-badge" [ngClass]="'dbg-badge--' + call.method.toLowerCase()">{{ call.method }}</span>
+                    </td>
+                    <td class="dbg-mono dbg-truncate">{{ call.url }}</td>
+                    <td>
+                      <span class="dbg-status" [class.dbg-status--ok]="call.status && call.status < 400"
+                            [class.dbg-status--err]="!call.status || call.status >= 400">
+                        {{ call.status ?? '—' }}
+                      </span>
+                    </td>
+                    <td class="dbg-mono">{{ call.durationMs }}ms</td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="call.requestPayload"
+                              (click)="openJsonModal('Payload — ' + call.method + ' ' + call.url, call.requestPayload)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                      <span class="dbg-na" *ngIf="!call.requestPayload">—</span>
+                    </td>
+                    <td>
+                      <button class="dbg-json-btn" *ngIf="call.responseHeaders"
+                              (click)="openJsonModal('Response Headers', call.responseHeaders)">
+                        <lucide-angular name="code" [size]="12"></lucide-angular>
+                      </button>
+                      <span class="dbg-na" *ngIf="!call.responseHeaders">—</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <ng-template #noHttpData>
+              <div class="dbg-empty">
+                <lucide-angular name="external-link" [size]="48" style="opacity:0.3"></lucide-angular>
+                <p>Nessuna chiamata HTTP intercettata</p>
+              </div>
+            </ng-template>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+    </div>
+  `, styles: ["@use \"../../core/tokens/mixins\" as ui;.dbg-root{display:flex;flex-direction:column;height:100vh;background:var(--ui-color-bg-subtle);&.dialog-mode{height:100%}}.dbg-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-3) var(--ui-spacing-4);background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border);box-shadow:var(--ui-shadow-sm);h2{margin:0;font-size:var(--ui-font-size-lg);font-weight:500;color:var(--ui-color-text)}}.dbg-header__left{display:flex;align-items:center;gap:var(--ui-spacing-2)}.dbg-header__icon{color:var(--ui-color-primary)}.dbg-tabs{flex:1;display:flex;flex-direction:column;overflow:hidden;::ng-deep .mat-mdc-tab-header{background:var(--ui-color-surface);border-bottom:1px solid var(--ui-color-border)}::ng-deep .mat-mdc-tab .mdc-tab__text-label{color:var(--ui-color-text-secondary);font-weight:500;font-size:var(--ui-font-size-sm)}::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ui-color-primary);font-weight:600}::ng-deep .mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--ui-color-primary);border-width:3px}::ng-deep .mat-mdc-tab-body-wrapper{flex:1;overflow:hidden}::ng-deep .mat-mdc-tab-body{height:100%}::ng-deep .mat-mdc-tab-body-content{height:100%;overflow:auto}}.dbg-tab-content{padding:var(--ui-spacing-4);max-width:1200px;margin:0 auto;width:100%}.dbg-dashboard{display:flex;flex-direction:column;gap:var(--ui-spacing-4)}.dbg-dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ui-spacing-4)}.dbg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ui-spacing-3)}.dbg-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--ui-spacing-4);background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);transition:box-shadow .15s;&:hover{box-shadow:var(--ui-shadow-md)}}.dbg-stat__icon{color:var(--ui-color-primary);opacity:.7}.dbg-stat__value{font-size:var(--ui-font-size-2xl);font-weight:var(--ui-font-weight-bold);color:var(--ui-color-primary);font-family:var(--ui-font-family-mono)}.dbg-stat__label{font-size:11px;color:var(--ui-color-text-muted);text-transform:uppercase;letter-spacing:.05em}.dbg-panel{background:var(--ui-color-surface);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);padding:var(--ui-spacing-4)}.dbg-panel__header{display:flex;align-items:center;gap:var(--ui-spacing-2);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);margin-bottom:var(--ui-spacing-3)}.dbg-panel__desc{font-size:var(--ui-font-size-xs);color:var(--ui-color-text-secondary);margin:0 0 var(--ui-spacing-3)}.dbg-kv{display:grid;grid-template-columns:100px 1fr;gap:var(--ui-spacing-2) var(--ui-spacing-4);font-size:var(--ui-font-size-sm)}.dbg-kv__k{font-weight:600;color:var(--ui-color-text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.03em}.dbg-kv__v{color:var(--ui-color-text)}.dbg-mono{font-family:var(--ui-font-family-mono);font-size:var(--ui-font-size-xs)}.dbg-sim-btns{display:flex;gap:var(--ui-spacing-2);flex-wrap:wrap}.dbg-sim-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s}.dbg-sim-btn--get{background:#dcfce7;color:#166534;border-color:#86efac;&:hover{background:#bbf7d0}}.dbg-sim-btn--post{background:#dbeafe;color:#1e40af;border-color:#93c5fd;&:hover{background:#bfdbfe}}.dbg-sim-btn--fail{background:#fee2e2;color:#991b1b;border-color:#fca5a5;&:hover{background:#fecaca}}.dbg-action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);font-weight:600;cursor:pointer;background:var(--ui-color-surface);color:var(--ui-color-text);border:1px solid var(--ui-color-border);transition:all .15s;&:hover{background:var(--ui-color-surface-hover)}}.dbg-action-btn--danger{color:#dc2626;border-color:#fca5a5}.dbg-action-btn--danger:hover{background:#fee2e2}.dbg-session-list{display:flex;flex-direction:column;gap:var(--ui-spacing-1)}.dbg-session-row{display:flex;align-items:center;gap:var(--ui-spacing-3);padding:var(--ui-spacing-2) var(--ui-spacing-3);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md);font-size:var(--ui-font-size-xs);cursor:pointer;transition:all .12s;&:hover{border-color:var(--ui-color-primary);background:color-mix(in srgb,var(--ui-color-primary) 4%,transparent)}}.dbg-session-row__arrow{margin-left:auto;color:var(--ui-color-text-muted)}.dbg-timeline{position:relative;padding-left:24px}.dbg-tl-entry{position:relative;margin-bottom:2px}.dbg-tl-entry__row{display:flex;align-items:center;gap:var(--ui-spacing-2);padding:4px var(--ui-spacing-3);border-radius:var(--ui-radius-md);font-size:12px;transition:background .12s;&:hover{background:var(--ui-color-surface-hover)}}.dbg-tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:absolute;left:-16px;top:10px}.dbg-tl-dot--navigation{background:var(--ui-color-primary);width:10px;height:10px;left:-17px;top:9px}.dbg-tl-dot--click{background:var(--ui-color-border-strong)}.dbg-tl-dot--formEvent{background:#f59e0b}.dbg-tl-dot--httpCall{background:#3b82f6}.dbg-tl-line{position:absolute;left:-12px;top:24px;bottom:-2px;width:2px;background:var(--ui-color-border)}.dbg-tl-entry__time{color:var(--ui-color-text-muted);min-width:85px;font-size:11px}.dbg-tl-entry__route{font-family:var(--ui-font-family-mono);font-weight:600;color:var(--ui-color-text);font-size:12px}.dbg-tl-entry__target,.dbg-tl-entry__field{font-family:var(--ui-font-family-mono);color:var(--ui-color-text-secondary);font-size:11px}.dbg-tl-entry__url{font-family:var(--ui-font-family-mono);color:var(--ui-color-text-secondary);font-size:11px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbg-tl-entry__detail{font-size:11px;color:var(--ui-color-text-muted)}.dbg-tl-entry__text{color:var(--ui-color-text-muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dbg-json-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--ui-radius-sm);font-size:10px;font-weight:600;cursor:pointer;background:var(--ui-color-bg-subtle);color:var(--ui-color-text-secondary);border:1px solid var(--ui-color-border);transition:all .12s;&:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-primary);border-color:var(--ui-color-primary)}}.dbg-na{color:var(--ui-color-text-muted);font-size:11px}.dbg-table-wrap{overflow-x:auto;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg)}.dbg-table{width:100%;border-collapse:collapse;font-size:var(--ui-font-size-xs);th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--ui-color-border)}th{background:var(--ui-color-bg-subtle);font-weight:600;color:var(--ui-color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:10px}tbody tr:hover{background:var(--ui-color-surface-hover)}tbody tr:last-child td{border-bottom:none}}.dbg-truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbg-badge{display:inline-block;padding:1px 8px;border-radius:var(--ui-radius-full);font-size:10px;font-weight:600;white-space:nowrap}.dbg-badge--tl-navigation{background:color-mix(in srgb,var(--ui-color-primary) 12%,transparent);color:var(--ui-color-primary)}.dbg-badge--tl-click{background:#f1f5f9;color:#475569}.dbg-badge--tl-formEvent{background:#fef3c7;color:#92400e}.dbg-badge--tl-httpCall{background:#dbeafe;color:#1e40af}.dbg-badge--action{background:color-mix(in srgb,var(--ui-color-primary) 10%,transparent);color:var(--ui-color-primary);text-transform:uppercase}.dbg-badge--id{background:color-mix(in srgb,var(--ui-color-primary) 8%,transparent);color:var(--ui-color-primary)}.dbg-badge--focus{background:#dbeafe;color:#1e40af}.dbg-badge--blur{background:#f1f5f9;color:#475569}.dbg-badge--valueChange{background:#fef3c7;color:#92400e}.dbg-badge--validationError{background:#fee2e2;color:#991b1b}.dbg-badge--get{background:#dcfce7;color:#166534}.dbg-badge--post{background:#dbeafe;color:#1e40af}.dbg-badge--put{background:#fef3c7;color:#92400e}.dbg-badge--delete{background:#fee2e2;color:#991b1b}.dbg-status{font-family:var(--ui-font-family-mono);font-weight:600}.dbg-status--ok{color:#16a34a}.dbg-status--err{color:#dc2626}.dbg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ui-spacing-12);color:var(--ui-color-text-muted);text-align:center;p{margin:var(--ui-spacing-3) 0 0;font-size:var(--ui-font-size-sm)}}@media (max-width: 640px){.dbg-stats{grid-template-columns:repeat(2,1fr)}.dbg-dashboard-grid{grid-template-columns:1fr}.dbg-sim-btns{flex-direction:column}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * Servizio per aprire il debugger BlackBox in una modale fullscreen.
+ */
+/**
+ * Servizio per aprire il debugger BlackBox in una modale fullscreen
+ * tramite il UiModalService.
+ *
+ * @usageNotes
+ *
+ * ### Apertura base
+ * ```typescript
+ * const ref = this.debuggerService.open();
+ * ```
+ *
+ * ### Apertura con sessioni importate (JSONL)
+ * ```typescript
+ * this.debuggerService.open({ importedSessions: mySessions });
+ * ```
+ */
+class UiBlackboxDebuggerService {
+    constructor() {
+        /** @internal Servizio modale per l'apertura. */
+        this.modalService = inject(UiModalService);
+    }
+    /**
+     * Apre il debugger in una modale fullscreen.
+     *
+     * @param config - Configurazione opzionale
+     * @returns Riferimento alla dialog per gestire chiusura
+     */
+    open(config) {
+        return this.modalService.open(UiBlackboxDebuggerComponent, {
+            size: 'fullscreen',
+            disableClose: false,
+            data: config ?? {},
+            panelClass: 'ui-blackbox-debugger-dialog',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxDebuggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxDebuggerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxDebuggerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * HTTP interceptor for BlackBox — captures requests marked with
+ * the `X-Ui-Blackbox` header.
+ *
+ * @usageNotes
+ * ### Setup (functional interceptor, Angular 17+)
+ * ```typescript
+ * // app.config.ts
+ * import { provideHttpClient, withInterceptors } from '@angular/common/http';
+ * import { uiBlackboxInterceptor } from '@gnggln/ng-ui-system';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideHttpClient(withInterceptors([uiBlackboxInterceptor])),
+ *   ],
+ * };
+ * ```
+ *
+ * ### Marking a request
+ * ```typescript
+ * this.http.get('/api/data', {
+ *   headers: new HttpHeaders({
+ *     'X-Ui-Blackbox': 'true',
+ *     // Optional: filter response headers to capture
+ *     'X-Ui-Blackbox-Headers': 'x-request-id|x-correlation-.*',
+ *   }),
+ * });
+ * ```
+ */
+/** Header name used to mark a request for BlackBox tracking. */
+const MARKER_HEADER = 'X-Ui-Blackbox';
+/** Header name specifying a regex to filter response headers to capture. */
+const HEADER_FILTER = 'X-Ui-Blackbox-Headers';
+/**
+ * Angular functional HTTP interceptor for BlackBox.
+ *
+ * Only processes requests that include the `X-Ui-Blackbox` header.
+ * Strips the custom headers before forwarding the request to the server.
+ */
+const uiBlackboxInterceptor = (req, next) => {
+    // Only intercept marked requests
+    if (!req.headers.has(MARKER_HEADER)) {
+        return next(req);
+    }
+    const blackbox = inject(UiBlackboxService);
+    const headerFilter = req.headers.get(HEADER_FILTER) ?? undefined;
+    const startTime = Date.now();
+    // Strip custom headers before forwarding
+    const cleanReq = req.clone({
+        headers: req.headers.delete(MARKER_HEADER).delete(HEADER_FILTER),
+    });
+    // Capture request payload
+    const requestPayload = extractPayload(cleanReq);
+    return next(cleanReq).pipe(tap((event) => {
+        if (event instanceof HttpResponse) {
+            const call = {
+                timestamp: startTime,
+                method: cleanReq.method,
+                url: cleanReq.urlWithParams,
+                status: event.status,
+                durationMs: Date.now() - startTime,
+                requestPayload,
+                responseHeaders: filterHeaders(event.headers, headerFilter),
+                headerFilter,
+            };
+            blackbox.trackHttpCall(call);
+        }
+    }), catchError((error) => {
+        const call = {
+            timestamp: startTime,
+            method: cleanReq.method,
+            url: cleanReq.urlWithParams,
+            status: error.status ?? 0,
+            durationMs: Date.now() - startTime,
+            requestPayload,
+            headerFilter,
+        };
+        blackbox.trackHttpCall(call);
+        return throwError(() => error);
+    }));
+};
+// ─── Helpers ─────────────────────────────────────────────────────────
+/**
+ * Extract the request body in a serialisable form.
+ * @internal
+ */
+function extractPayload(req) {
+    if (req.body === null || req.body === undefined)
+        return undefined;
+    // Already serialisable (object / string / number)
+    if (typeof req.body !== 'object')
+        return req.body;
+    try {
+        // Deep-clone to avoid mutation issues
+        return JSON.parse(JSON.stringify(req.body));
+    }
+    catch {
+        return '[unserializable]';
+    }
+}
+/**
+ * Filter response headers using a regex pattern.
+ * Returns undefined if no pattern is provided or no headers match.
+ * @internal
+ */
+function filterHeaders(headers, pattern) {
+    if (!pattern)
+        return undefined;
+    try {
+        const regex = new RegExp(pattern, 'i');
+        const result = {};
+        let found = false;
+        for (const key of headers.keys()) {
+            if (regex.test(key)) {
+                const value = headers.get(key);
+                if (value !== null) {
+                    result[key] = value;
+                    found = true;
+                }
+            }
+        }
+        return found ? result : undefined;
+    }
+    catch {
+        // Invalid regex — skip header filtering
+        return undefined;
+    }
+}
+
+/**
+ * @module ng-ui-system/blackbox
+ * Attribute directive for explicit UI action tracking.
+ *
+ * Apply `[uiTrack]` to any element to record clicks in the BlackBox session.
+ * Works with the `UiBlackboxService` — if the service is not provided,
+ * the directive is a no-op.
+ *
+ * @usageNotes
+ * ```html
+ * <!-- Link in a paragraph -->
+ * <a [uiTrack]="'learn-more'" href="/docs">Scopri di più</a>
+ *
+ * <!-- Card with custom tracking ID -->
+ * <div uiTrack="promo-card" (click)="openPromo()">
+ *   <h3>Offerta speciale</h3>
+ * </div>
+ *
+ * <!-- Button outside of ui-button-area -->
+ * <button [uiTrack]="'legacy-save'" (click)="save()">Salva</button>
+ * ```
+ */
+/**
+ * Standalone directive that tracks click actions on the host element.
+ *
+ * The tracking identifier is provided via the `uiTrack` input binding.
+ * Clicking the host element records an action in the active BlackBox session
+ * with the element's tag, id, and truncated innerText.
+ */
+class UiTrackDirective {
+    constructor() {
+        /**
+         * Tracking identifier for this element.
+         * Used as the `trackId` in the recorded action.
+         */
+        this.trackId = '';
+        this.blackbox = inject(UiBlackboxService, { optional: true });
+        this.el = inject((ElementRef));
+    }
+    onClick() {
+        if (!this.blackbox || !this.trackId)
+            return;
+        const nativeEl = this.el.nativeElement;
+        this.blackbox.trackAction(this.trackId, {
+            tag: nativeEl.tagName?.toLowerCase() ?? 'unknown',
+            id: nativeEl.id || undefined,
+            text: nativeEl.innerText?.substring(0, 50)?.trim() || undefined,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: UiTrackDirective, isStandalone: true, selector: "[uiTrack]", inputs: { trackId: ["uiTrack", "trackId"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiTrackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTrack]',
+                    standalone: true,
+                }]
+        }], propDecorators: { trackId: [{
+                type: Input,
+                args: ['uiTrack']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * ng-ui-system — BlackBox Observability entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiBlackboxService,
+ *   UiBlackboxConfig,
+ *   UiTrackDirective,
+ *   uiBlackboxInterceptor,
+ * } from '@gnggln/ng-ui-system';
+ * ```
+ */
+// Services
+
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/blackbox`. BlackBox observability.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UI_BLACKBOX_DEFAULTS, UiBlackboxDebuggerComponent, UiBlackboxDebuggerService, UiBlackboxFingerprintService, UiBlackboxJsonViewerComponent, UiBlackboxService, UiBlackboxStorageService, UiTrackDirective, uiBlackboxInterceptor };
+//# sourceMappingURL=gnggln-ng-ui-system-blackbox.mjs.map