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

package/accordion/entry-accordion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/accordion`. Accordion.
+ */
+export * from './lib/components/accordion/index';

package/accordion/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@gnggln/ng-ui-system/accordion" />
+export * from './entry-accordion';

package/accordion/lib/components/accordion/accordion.component.d.ts

@@ -0,0 +1,125 @@
+import { EventEmitter, DoCheck, TemplateRef } from '@angular/core';
+import { UiAccordionDescriptor, UiAccordionToggleEvent, UiAccordionMode } from './accordion.types';
+import * as i0 from "@angular/core";
+/**
+ * Accordion configurabile, data-driven, con supporto multi/single expand,
+ * animazioni CSS, icone Lucide e template personalizzabili.
+ *
+ * Il contenuto dei pannelli viene fornito tramite un `itemTemplate`
+ * che riceve il descriptor del pannello come contesto.
+ *
+ * @selector ui-accordion
+ *
+ * @example
+ * ```html
+ * <ui-accordion
+ *   [items]="sections"
+ *   [itemTemplate]="panelTpl"
+ *   mode="single"
+ * >
+ *   <ng-template #panelTpl let-item>
+ *     @switch (item.id) {
+ *       @case ('info')    { <app-info-panel /> }
+ *       @case ('address') { <app-address-form /> }
+ *     }
+ *   </ng-template>
+ * </ui-accordion>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * sections: UiAccordionDescriptor[] = [
+ *   { id: 'info', title: 'Informazioni', icon: 'info', expanded: true },
+ *   { id: 'address', title: 'Indirizzo', icon: 'map-pin' },
+ * ];
+ * ```
+ */
+export declare class UiAccordionComponent implements DoCheck {
+    private readonly cdr;
+    /**
+     * Fingerprint dell'ultimo stato dei descriptor.
+     * Usato da DoCheck per rilevare mutazioni in-place sulle proprieta
+     * degli item senza richiedere un nuovo riferimento dell'array.
+     */
+    private _lastFingerprint;
+    /**
+     * Array di descriptor dei pannelli.
+     * Pannelli con `hidden: true` vengono filtrati automaticamente.
+     *
+     * Supporta sia aggiornamenti immutabili (nuovo array) sia
+     * mutazioni in-place delle proprieta dei descriptor.
+     */
+    items: UiAccordionDescriptor[];
+    /**
+     * Template per il contenuto di ogni pannello.
+     * Il contesto fornisce il descriptor come `$implicit`.
+     *
+     * @example
+     * ```html
+     * <ng-template #tpl let-item>
+     *   <p>Contenuto per: {{ item.title }}</p>
+     * </ng-template>
+     * ```
+     */
+    itemTemplate: TemplateRef<unknown> | null;
+    /**
+     * Template opzionale per contenuto aggiuntivo nell'header.
+     * Il contesto fornisce il descriptor come `$implicit`.
+     * Viene renderizzato all'interno del trigger, tra il titolo e il chevron.
+     */
+    headerTemplate: TemplateRef<unknown> | null;
+    /**
+     * Template opzionale per azioni nell'header del pannello.
+     * Posizionato tra il trigger e il chevron, al di fuori del button
+     * per consentire elementi interattivi (es. pulsanti duplica/elimina).
+     * Il contesto fornisce il descriptor come `$implicit`.
+     */
+    actionsTemplate: TemplateRef<unknown> | null;
+    /**
+     * Modalita di espansione.
+     * - `multi`: piu pannelli aperti contemporaneamente
+     * - `single`: un solo pannello aperto alla volta
+     */
+    mode: UiAccordionMode;
+    /** Label accessibile per il gruppo accordion. */
+    ariaLabel: string;
+    /** Emesso quando un pannello viene aperto o chiuso. */
+    itemToggled: EventEmitter<UiAccordionToggleEvent>;
+    /**
+     * Rileva mutazioni in-place sulle proprieta dei descriptor.
+     * Confronta un fingerprint leggero dello stato corrente con quello
+     * precedente e, se diverso, forza un ciclo di change detection.
+     *
+     * Questo permette al consumatore di fare sia:
+     * - `items[2].hidden = true`  (mutazione in-place)
+     * - `items = [...newItems]`   (nuovo riferimento)
+     */
+    ngDoCheck(): void;
+    /** Pannelli visibili (non hidden). */
+    get visibleItems(): UiAccordionDescriptor[];
+    /** Alterna l'espansione di un pannello. */
+    toggle(item: UiAccordionDescriptor): void;
+    /** Apre un pannello specifico per id. */
+    open(id: string): void;
+    /** Chiude un pannello specifico per id. */
+    close(id: string): void;
+    /** Apre tutti i pannelli (solo in modalita multi). */
+    openAll(): void;
+    /** Chiude tutti i pannelli. */
+    closeAll(): void;
+    /** @internal Classi CSS per il pannello. */
+    getPanelClasses(item: UiAccordionDescriptor): string;
+    /** @internal Sposta il focus al primo header. */
+    focusFirst(event: Event): void;
+    /** @internal Sposta il focus all'ultimo header. */
+    focusLast(event: Event): void;
+    /** @internal Recupera tutti i trigger button del DOM. */
+    private getHeaders;
+    /**
+     * @internal Calcola un fingerprint leggero basato sulle proprieta
+     * reattive dei descriptor (quelle che influenzano il rendering).
+     */
+    private computeFingerprint;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiAccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiAccordionComponent, "ui-accordion", never, { "items": { "alias": "items"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "actionsTemplate": { "alias": "actionsTemplate"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "itemToggled": "itemToggled"; }, never, never, true, never>;
+}

package/accordion/lib/components/accordion/accordion.types.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @module ng-ui-system/accordion
+ * Tipi e interfacce per UiAccordion.
+ */
+import { UiIconName } from '../../core/types';
+export { UiIconName };
+/**
+ * Descriptor per un singolo pannello dell'accordion.
+ *
+ * Consente di definire accordion come strutture dati dichiarative,
+ * aggiornabili dinamicamente tramite manipolazione dell'array.
+ *
+ * @usageNotes
+ * ### Utilizzo base
+ * ```typescript
+ * const items: UiAccordionDescriptor[] = [
+ *   { id: 'info', title: 'Informazioni generali', icon: 'info' },
+ *   { id: 'address', title: 'Indirizzo', icon: 'map-pin' },
+ *   { id: 'notes', title: 'Note aggiuntive', expanded: true },
+ * ];
+ * ```
+ *
+ * ### Visibilita condizionale
+ * ```typescript
+ * items[2].hidden = !this.hasNotes;
+ * items[1].disabled = this.isReadonly;
+ * ```
+ */
+export interface UiAccordionDescriptor {
+    /** Identificatore univoco del pannello. */
+    id: string;
+    /** Titolo visualizzato nell'header del pannello. */
+    title: string;
+    /** Icona Lucide opzionale mostrata prima del titolo. @see https://lucide.dev/icons */
+    icon?: UiIconName;
+    /** Stato iniziale di espansione. @default false */
+    expanded?: boolean;
+    /** Disabilita l'interazione con il pannello. @default false */
+    disabled?: boolean;
+    /** Nasconde il pannello dall'interfaccia. @default false */
+    hidden?: boolean;
+    /** Descrizione secondaria mostrata accanto al titolo. */
+    subtitle?: string;
+    /** Indice posizionale del pannello (utile per sezioni repeatable). */
+    index?: number;
+}
+/**
+ * Evento emesso quando un pannello viene aperto o chiuso.
+ */
+export interface UiAccordionToggleEvent {
+    /** Descriptor del pannello coinvolto. */
+    item: UiAccordionDescriptor;
+    /** `true` se il pannello e stato aperto, `false` se chiuso. */
+    expanded: boolean;
+}
+/**
+ * Modalita di espansione dell'accordion.
+ *
+ * | Modalita | Comportamento                                   |
+ * |---------|------------------------------------------------|
+ * | `multi` | Piu pannelli possono essere aperti contemporaneamente |
+ * | `single`| Un solo pannello aperto alla volta (gli altri si chiudono) |
+ */
+export type UiAccordionMode = 'multi' | 'single';

package/accordion/lib/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { UiAccordionComponent } from './accordion.component';
+export { UiAccordionDescriptor, UiAccordionToggleEvent, UiAccordionMode, } from './accordion.types';

package/accordion/lib/core/types/index.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Shared types for ng-ui-system components.
+ * These types are used across multiple components to ensure consistency.
+ */
+/** Standard size variants used across components. */
+export type UiSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Visual style variants for components. */
+export type UiVariant = 'primary' | 'accent' | 'warn' | 'neutral' | 'ghost' | 'outline';
+/** Semantic color palette tokens. */
+export type UiColor = 'primary' | 'accent' | 'warn' | 'success' | 'info' | 'neutral';
+/** Layout direction. */
+export type UiDirection = 'horizontal' | 'vertical';
+/** Horizontal alignment. */
+export type UiAlign = 'start' | 'center' | 'end' | 'stretch';
+/** Component density options for compact or spacious layouts. */
+export type UiDensity = 'compact' | 'default' | 'comfortable';
+/**
+ * Common Lucide icon names with autocomplete support.
+ * Accepts any valid Lucide icon name as a string.
+ *
+ * Provides IntelliSense for the most frequently used enterprise icons.
+ * For the full icon catalogue, visit https://lucide.dev/icons
+ *
+ * @example
+ * ```typescript
+ * const myIcon: UiIconName = 'arrow-right';  // autocomplete ✓
+ * const custom: UiIconName = 'my-custom-icon'; // still valid
+ * ```
+ */
+export type UiIconName = 'arrow-right' | 'arrow-left' | 'arrow-up' | 'arrow-down' | 'chevron-right' | 'chevron-left' | 'chevron-up' | 'chevron-down' | 'external-link' | 'corner-down-left' | 'corner-down-right' | 'check' | 'x' | 'plus' | 'minus' | 'search' | 'refresh-cw' | 'download' | 'upload' | 'save' | 'trash-2' | 'pencil' | 'copy' | 'clipboard' | 'share-2' | 'send' | 'log-in' | 'log-out' | 'mail' | 'message-circle' | 'phone' | 'bell' | 'user' | 'users' | 'lock' | 'unlock' | 'key' | 'shield' | 'file' | 'file-text' | 'file-spreadsheet' | 'file-archive' | 'folder' | 'image' | 'camera' | 'paperclip' | 'info' | 'alert-triangle' | 'alert-circle' | 'check-circle' | 'x-circle' | 'help-circle' | 'loader-2' | 'menu' | 'more-horizontal' | 'more-vertical' | 'grid' | 'list' | 'filter' | 'sliders' | 'columns' | 'maximize-2' | 'minimize-2' | 'home' | 'settings' | 'star' | 'heart' | 'bookmark' | 'calendar' | 'clock' | 'map-pin' | 'eye' | 'eye-off' | 'sun' | 'moon' | 'monitor' | (string & Record<never, never>);
+/** Status values used for feedback components (badges, alerts, indicators). */
+export type UiStatus = 'idle' | 'loading' | 'success' | 'error' | 'warning' | 'info';
+/**
+ * Generic key-value pair used in select options, dropdowns, etc.
+ * @template T - The type of the value.
+ */
+export interface UiOption<T = string> {
+    /** The display label. */
+    label: string;
+    /** The underlying value. */
+    value: T;
+    /** Whether this option is disabled. */
+    disabled?: boolean;
+    /** Optional icon name (Lucide icon). */
+    icon?: UiIconName;
+    /** Optional grouping key for grouped selects. */
+    group?: string;
+}
+/**
+ * Result wrapper for async operations.
+ * @template T - The type of the data payload.
+ */
+export interface UiAsyncState<T = unknown> {
+    status: UiStatus;
+    data: T | null;
+    error: string | null;
+}
+/** Toast notification type. */
+export type UiToastType = 'success' | 'error' | 'warning' | 'info';
+/** Messages configuration for an endpoint (inline, no label archive). */
+export interface UiEndpointMessages {
+    /** Success toast message. Supports `${key}` placeholders replaced at runtime. */
+    success?: string;
+    /** Error toast message. Supports `${key}` placeholders replaced at runtime. */
+    error?: string;
+}
+/**
+ * Extracts a custom error message from the HTTP error response.
+ * Return `null` to fall back to the default message.
+ */
+export type UiErrorExtractor = (error: any) => string | null;
+/**
+ * Dynamically resolves a success message at runtime.
+ * Return `null` to fall back to the default message.
+ */
+export type UiSuccessResolver = () => string | null;
+/**
+ * Query parameters for URL building.
+ * Keys map to query param names; values are auto-converted to strings.
+ */
+export type UiQueryParameters = Record<string, string | string[] | number | number[] | boolean>;
+/**
+ * Endpoint configuration for `UiHttpService`.
+ *
+ * Each endpoint defines its URL, optional inline messages, and
+ * toast/error behaviour. All toast flags default to `false` (opt-in).
+ *
+ * @usageNotes
+ * ### Basic endpoint factory
+ * ```typescript
+ * const SAVE_USER = (): UiEndpoint => ({
+ *   url: '/api/users',
+ *   id: 'user_save',
+ *   showSuccess: true,
+ *   messages: { success: 'Utente salvato!' },
+ * });
+ * ```
+ *
+ * ### Dynamic endpoint with replacements
+ * ```typescript
+ * const UPDATE_ITEM = (id: number): UiEndpoint => ({
+ *   url: `/api/items/${id}`,
+ *   id: 'item_update',
+ *   showSuccess: true,
+ *   showError: true,
+ *   messages: {
+ *     success: 'Elemento ${name} aggiornato',
+ *     error: 'Errore aggiornamento elemento',
+ *   },
+ *   replacements: { name: 'Widget' },
+ * });
+ * ```
+ */
+export interface UiEndpoint {
+    /** Relative or absolute URL for the API call. */
+    url: string;
+    /** Unique identifier for the endpoint (used for debounce keying). */
+    id: string;
+    /** Whether to show a success toast on completion. Default: `false`. */
+    showSuccess?: boolean;
+    /** Whether to show an error toast on failure. Default: `false`. */
+    showError?: boolean;
+    /** Inline messages for success/error toasts. */
+    messages?: UiEndpointMessages;
+    /** Placeholder replacements for message strings (`${key}` → value). */
+    replacements?: Record<string, string | number>;
+    /** Custom error message extractor from the HTTP error response. */
+    errorExtractor?: UiErrorExtractor;
+    /** Custom success message resolver (overrides inline message). */
+    successMessageResolver?: UiSuccessResolver;
+    /** Whether this endpoint should be tracked by BlackBox. Default: `true`. */
+    trackable?: boolean;
+}

package/base-layout/entry-base-layout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/base-layout`. Base Layout.
+ */
+export * from './lib/components/base-layout/index';

package/base-layout/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@gnggln/ng-ui-system/base-layout" />
+export * from './entry-base-layout';

package/base-layout/lib/components/base-layout/base-layout.component.d.ts

@@ -0,0 +1,108 @@
+import { type OnInit } from '@angular/core';
+import type { UiButtonAreaAlign, UiButtonDescriptor } from '../button/button.types';
+import type { UiBackButtonConfig } from './base-layout.types';
+import * as i0 from "@angular/core";
+/** Stato letto dalla rotta foglia per header/footer opzionali e `data-route-id`. */
+interface UiBaseLayoutRouteSnapshotFlags {
+    breadcrumbOff: boolean;
+    footerNavOff: boolean;
+    routeId: string | null;
+}
+/**
+ * Full-page layout component that combines a page header (breadcrumbs + title),
+ * a main content area via `<ng-content>`, and a sticky footer action bar
+ * powered by `UiButtonAreaComponent`.
+ *
+ * Optionally renders an automatic "back" button in the footer, derived from
+ * the breadcrumb trail (navigates to the parent breadcrumb).
+ *
+ * ### Route `data`
+ *
+ * Sulla rotta attiva (foglia) puoi impostare:
+ *
+ * - `breadcrumbOff: true` — nasconde `ui-page-header`
+ * - `footerNavOff: true` — nasconde `ui-base-layout__footer`
+ * - `id: string` — valorizza `data-route-id` sul contenitore `.ui-base-layout`
+ *
+ * @selector ui-base-layout
+ *
+ * @example
+ * ```html
+ * <ui-base-layout [actions]="pageActions" footerAlign="end">
+ *   <p>Your page content here</p>
+ * </ui-base-layout>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With back button and custom title -->
+ * <ui-base-layout
+ *   title="Dettaglio utente"
+ *   [showBackButton]="true"
+ *   [actions]="[
+ *     { id: 'save', label: 'Salva', variant: 'primary', icon: 'save', action: save },
+ *   ]"
+ * >
+ *   <app-user-detail />
+ * </ui-base-layout>
+ * ```
+ */
+export declare class UiBaseLayoutComponent implements OnInit {
+    /** Whether to display the page header (breadcrumbs + title). */
+    showHeader: boolean;
+    /** Override the auto-detected page title. Passed through to `ui-page-header`. */
+    title: string;
+    /** Route path for the Home breadcrumb link. */
+    homeRoute: string;
+    /** Whether to display the Home link in the breadcrumb trail. */
+    showHome: boolean;
+    /** When `true`, updates `document.title` on navigation. */
+    updateDocumentTitle: boolean;
+    /** Suffix appended to `document.title`. */
+    titleSuffix: string;
+    /** Whether to show an automatic "back" button based on breadcrumbs. */
+    showBackButton: boolean;
+    /** Configuration overrides for the automatic back button. */
+    backButtonConfig: UiBackButtonConfig;
+    /** Array of button descriptors for the footer action area. */
+    actions: UiButtonDescriptor[];
+    /** Horizontal alignment of the footer button area. */
+    footerAlign: UiButtonAreaAlign;
+    /** Gap size between footer buttons. */
+    footerGap: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    private readonly router;
+    private readonly activatedRoute;
+    private readonly breadcrumbService;
+    private readonly destroyRef;
+    /**
+     * Flag derivati dalla catena attiva (`breadcrumbOff`, `footerNavOff`, `id`).
+     * Aggiornati a ogni `NavigationEnd`.
+     */
+    protected readonly routeSnapshotFlags: import("@angular/core").WritableSignal<UiBaseLayoutRouteSnapshotFlags>;
+    /** Header visibile se abilitato da input e non disattivato da `data.breadcrumbOff`. */
+    protected readonly effectiveShowHeader: () => boolean;
+    /** Footer azioni visibile se ci sono azioni visibili e non disattivato da `data.footerNavOff`. */
+    protected readonly effectiveShowFooterNav: () => boolean;
+    /**
+     * Merged action list (back button + consumer actions).
+     * Computed on every change-detection check so it stays in sync
+     * with both navigation state (breadcrumbs) and input changes.
+     */
+    get mergedActions(): UiButtonDescriptor[];
+    /** Whether the footer should render (at least one non-hidden action exists). */
+    get hasVisibleActions(): boolean;
+    ngOnInit(): void;
+    /** @internal Allinea breadcrumb service e flag layout alla rotta corrente. */
+    private syncFromActivatedRoute;
+    /** @internal Legge `breadcrumbOff`, `footerNavOff`, `id` dalla catena `pathFromRoot` / foglia. */
+    private refreshRouteSnapshotFlags;
+    /** @internal Percorre fino al `ActivatedRoute` foglia sotto il punto di iniezione. */
+    private deepestChildRoute;
+    /** @internal Determina se il back button deve essere nascosto per la rotta corrente. */
+    private shouldHideBackButton;
+    /** @internal Naviga al breadcrumb genitore o esegue il fallback alla home route. */
+    private navigateBack;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiBaseLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiBaseLayoutComponent, "ui-base-layout", never, { "showHeader": { "alias": "showHeader"; "required": false; }; "title": { "alias": "title"; "required": false; }; "homeRoute": { "alias": "homeRoute"; "required": false; }; "showHome": { "alias": "showHome"; "required": false; }; "updateDocumentTitle": { "alias": "updateDocumentTitle"; "required": false; }; "titleSuffix": { "alias": "titleSuffix"; "required": false; }; "showBackButton": { "alias": "showBackButton"; "required": false; }; "backButtonConfig": { "alias": "backButtonConfig"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "footerAlign": { "alias": "footerAlign"; "required": false; }; "footerGap": { "alias": "footerGap"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/base-layout/lib/components/base-layout/base-layout.types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @module ng-ui-system/base-layout
+ * Types and interfaces for UiBaseLayout component.
+ */
+import { UiButtonDescriptor, UiButtonAreaAlign } from '../button/button.types';
+export { UiButtonDescriptor, UiButtonAreaAlign };
+/**
+ * Chiavi opzionali di `data` sulla rotta attiva riconosciute da `UiBaseLayoutComponent`.
+ *
+ * - `id`: stessa risalita usata dai breadcrumb (dal segmento foglia verso il root: primo `id` trovato).
+ * - `breadcrumbOff` / `footerNavOff`: se `true` su **qualsiasi** segmento in `pathFromRoot`, l’area viene nascosta.
+ */
+export interface UiBaseLayoutRouteData {
+    /** Identificativo stabile della rotta; reso come `data-route-id` sul wrapper `.ui-base-layout`. */
+    id?: string;
+    /** Se `true`, non viene renderizzato `ui-page-header` (breadcrumb e titolo). */
+    breadcrumbOff?: boolean;
+    /** Se `true`, non viene renderizzata la barra `ui-base-layout__footer` (azioni / indietro). */
+    footerNavOff?: boolean;
+}
+/**
+ * Configuration for the automatic "back" button rendered in the footer action area.
+ *
+ * @usageNotes
+ * ```typescript
+ * const backConfig: UiBackButtonConfig = {
+ *   label: 'Indietro',
+ *   icon: 'arrow-left',
+ *   variant: 'outline',
+ * };
+ * ```
+ */
+export interface UiBackButtonConfig {
+    /** Label text for the back button. @default 'Indietro' */
+    label?: string;
+    /** Lucide icon name. @default 'arrow-left' */
+    icon?: string;
+    /** Visual variant. @default 'outline' */
+    variant?: string;
+}

package/base-layout/lib/components/base-layout/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ng-ui-system — Base Layout entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiBaseLayoutComponent,
+ *   UiBackButtonConfig,
+ * } from 'ng-ui-system';
+ * ```
+ */
+export { UiBaseLayoutComponent } from './base-layout.component';
+export { UiBackButtonConfig, UiBaseLayoutRouteData } from './base-layout.types';

package/base-layout/lib/components/blackbox/blackbox-fingerprint.service.d.ts

@@ -0,0 +1,36 @@
+import type { UiBlackboxFingerprint } from './blackbox.types';
+import * as i0 from "@angular/core";
+/**
+ * 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)
+ * ```
+ */
+export declare class UiBlackboxFingerprintService {
+    private readonly platformId;
+    private cached;
+    /**
+     * 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.
+     */
+    getFingerprint(): Promise<UiBlackboxFingerprint>;
+    /**
+     * Fallback fingerprint when FingerprintJS is unavailable.
+     * Combines basic browser signals into a hash.
+     * @internal
+     */
+    private generateFallbackFingerprint;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiBlackboxFingerprintService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiBlackboxFingerprintService>;
+}

package/base-layout/lib/components/blackbox/blackbox-storage.service.d.ts

@@ -0,0 +1,55 @@
+import type { UiBlackboxSession } from './blackbox.types';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class UiBlackboxStorageService {
+    private readonly platformId;
+    private db;
+    private maxStorageMb;
+    /** Update the storage quota from the parent service config. */
+    setMaxStorageMb(mb: number): void;
+    /** Open (or create) the IndexedDB database. */
+    private openDb;
+    /** Compress a string to a gzip Uint8Array using native CompressionStream. */
+    private compress;
+    /** Decompress a gzip Uint8Array back to a string. */
+    private decompress;
+    /**
+     * Persist a session to IndexedDB (gzip-compressed).
+     * Enforces quota after saving.
+     */
+    saveSession(session: UiBlackboxSession): Promise<void>;
+    /**
+     * Read and decompress a single session by ID.
+     */
+    getSession(sessionId: string): Promise<UiBlackboxSession | null>;
+    /**
+     * Get all stored sessions (decompressed).
+     */
+    getAllSessions(): Promise<UiBlackboxSession[]>;
+    /**
+     * Get all sessions for a given fingerprint.
+     */
+    getSessionsByFingerprint(fingerprint: string): Promise<UiBlackboxSession[]>;
+    /**
+     * Generate a downloadable JSONL Blob of all sessions.
+     * Each line is one JSON-serialised session (decompressed).
+     */
+    exportDump(): Promise<Blob>;
+    /**
+     * Delete all stored sessions.
+     */
+    clearAll(): Promise<void>;
+    /**
+     * Prune oldest sessions until total stored size is under `maxStorageMb`.
+     * @internal
+     */
+    enforceQuota(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiBlackboxStorageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiBlackboxStorageService>;
+}