@foxeltech/angular-ui 0.0.14 → 0.3.0

package/index.d.ts

@@ -1,50 +1,52 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, Injector, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
+import { OnDestroy, Injector, DestroyRef, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, Provider, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
 import * as _foxeltech_angular_ui from '@foxeltech/angular-ui';
-import * as i43 from '@angular/material/paginator';
+import * as i53 from '@angular/material/paginator';
 import { MatPaginator } from '@angular/material/paginator';
-import * as i44 from '@angular/material/table';
+import * as i54 from '@angular/material/table';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { HttpClient, HttpEvent, HttpErrorResponse, HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
 import * as rxjs from 'rxjs';
 import { Observable, Subject } from 'rxjs';
-import * as i30 from '@angular/forms';
+import * as i40 from '@angular/forms';
 import { NgForm, ValidationErrors, NgControl, ControlValueAccessor } from '@angular/forms';
-import * as i46 from '@angular/material/dialog';
+import * as i56 from '@angular/material/dialog';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
+import * as i41 from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot, ResolveFn, CanActivate, Router } from '@angular/router';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import * as i31 from '@angular/router';
-import { CanActivate, Router } from '@angular/router';
 import { EChartsOption, ECharts } from 'echarts';
-import * as i37 from 'ngx-vflow';
+import * as i47 from 'ngx-vflow';
 import { Node, Edge, Connection } from 'ngx-vflow';
-import * as i56 from '@angular/cdk/drag-drop';
+import * as i66 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import * as i29 from '@angular/common';
-import * as i32 from '@danielmoncada/angular-datetime-picker';
-import * as i33 from '@danielmoncada/angular-datetime-picker-moment-adapter';
-import * as i36 from '@dimaslz/ng-heroicons';
-import * as i38 from 'ngx-echarts';
-import * as i39 from '@angular/material/select';
-import * as i40 from '@angular/material/radio';
-import * as i41 from '@angular/material/button';
-import * as i42 from '@angular/material/icon';
-import * as i45 from '@angular/material/snack-bar';
-import * as i47 from '@angular/material/checkbox';
-import * as i48 from '@angular/material/card';
-import * as i49 from '@angular/material/datepicker';
-import * as i50 from '@angular/material/timepicker';
-import * as i51 from '@angular/material/badge';
-import * as i52 from '@angular/material/expansion';
-import * as i53 from '@angular/material/form-field';
-import * as i54 from '@angular/material/menu';
-import * as i55 from '@angular/material/tooltip';
+import * as i39 from '@angular/common';
+import * as i42 from '@danielmoncada/angular-datetime-picker';
+import * as i43 from '@danielmoncada/angular-datetime-picker-moment-adapter';
+import * as i46 from '@dimaslz/ng-heroicons';
+import * as i48 from 'ngx-echarts';
+import * as i49 from '@angular/material/select';
+import * as i50 from '@angular/material/radio';
+import * as i51 from '@angular/material/button';
+import * as i52 from '@angular/material/icon';
+import * as i55 from '@angular/material/snack-bar';
+import * as i57 from '@angular/material/checkbox';
+import * as i58 from '@angular/material/card';
+import * as i59 from '@angular/material/datepicker';
+import * as i60 from '@angular/material/timepicker';
+import * as i61 from '@angular/material/badge';
+import * as i62 from '@angular/material/expansion';
+import * as i63 from '@angular/material/form-field';
+import * as i64 from '@angular/material/menu';
+import * as i65 from '@angular/material/tooltip';
 
 declare abstract class BaseComponent implements OnDestroy {
     protected injector: Injector;
-    constructor(injector: Injector);
+    /** Teardown hook for subscriptions: takeUntilDestroyed(this.destroyRef). */
+    protected destroyRef: DestroyRef;
+    constructor(injector?: Injector);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseComponent, never, never, {}, {}, never, never, true, never>;
@@ -54,6 +56,13 @@ declare class HttpWrapper {
     http: HttpClient;
     baseURL: string;
     constructor(http: HttpClient, baseURL: string);
+    /**
+     * Hook applied to every resolved response (get/post/put/delete and all verb
+     * helpers built on them). Default is identity; override to normalize a
+     * backend convention once (e.g. FxUtils.camelizeDeep for snake_case +
+     * protobuf-Long payloads) instead of wrapping each method.
+     */
+    protected transformResponse(res: any): any;
     private addCredentials;
     get(url?: string, params?: any): Promise<any>;
     post(url: string, body?: any, options?: any): Promise<any>;
@@ -122,6 +131,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         create?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -129,6 +139,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         update?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -136,6 +147,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         view?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -158,7 +170,21 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     init(): void;
     ngAfterViewInit(): void;
     refresh(): Promise<void>;
+    /**
+     * Where the list is fetched from. Default (null) keeps the legacy behavior
+     * of calling `api.search()` (GET /search) untouched. Subclasses whose list
+     * lives elsewhere override this instead of re-implementing fetch() — and
+     * keep the stale-response sequence guard for free.
+     */
+    protected listRequest(): {
+        method: 'get' | 'post';
+        url: string;
+    } | null;
+    /** Result keys the list/total are read from. Override alongside listRequest(). */
+    protected listKey: string;
+    protected totalKey: string;
     setDataSource(result: any): void;
+    private _fetchSeq;
     fetch(): Promise<void>;
     onPageChange(event: any): Promise<void>;
     resolve(): {};
@@ -178,6 +204,40 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTableComponent<any>, never, never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * List + detail-pane counterpart of BaseTableComponent: the page keeps a
+ * selectable row list on one side and a lazily fetched, per-id-cached detail
+ * on the other. Pair it with `<fx-ui-master-detail>` which renders the
+ * two-column shell from this state.
+ *
+ * Subclasses declare where ids and details come from:
+ *   protected override idKey = 'licenseId';
+ *   protected override detailUrl(id: string) { return `/license/${id}`; }
+ * `detailUrl` returning null (the default) means the selected row itself is
+ * the detail and no request is made.
+ */
+declare class BaseMasterDetailComponent<T = any> extends BaseTableComponent<T> {
+    selectedId: string | null;
+    selected: T | null;
+    detailMap: Map<string, any>;
+    detailLoading: Set<string>;
+    constructor(injector: Injector, api: HttpWrapper, modal: any, ref: ChangeDetectorRef);
+    /** Key the row id is read from. Override idOf() instead for composite ids. */
+    protected idKey: string;
+    idOf(row: any): string | null;
+    protected detailUrl(id: string): string | null;
+    /** What the detail pane shows: the fetched detail when cached, else the row. */
+    get detail(): any;
+    get detailBusy(): boolean;
+    setDataSource(result: any): void;
+    /** Keep the previous selection when it survived the new page, else pick row 0. */
+    autoSelectFirst(): void;
+    selectItem(row: T): void;
+    fetchDetail(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseMasterDetailComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseMasterDetailComponent<any>, never, never, {}, {}, never, never, true, never>;
+}
+
 declare class BaseDialogComponent<T = any> extends BaseComponent implements AfterViewInit, OnInit {
     ref: MatDialogRef<any>;
     bindings: any;
@@ -225,9 +285,205 @@ declare class BaseResolver {
     baseResolverInit(): void;
 }
 
+interface FxListRequest {
+    /** Defaults to 'get'. */
+    method?: 'get' | 'post';
+    url: string;
+    /** Query params (get) — for post they are sent as the body unless `body` is set. */
+    params?: any;
+    body?: any;
+}
+interface FxListResolverContext {
+    /** Page size remembered for this route url (FxStorageService convention), default 10. */
+    pageSize: number;
+}
+/**
+ * Functional replacement for the copy-pasted list-resolver class:
+ * starts the loading overlay, runs one API request, and on failure stops the
+ * overlay and shows a parsed error toast — the exact convention every
+ * BaseResolver subclass hand-rolls today. BaseResolver stays for existing
+ * classes; new routes should use this factory.
+ *
+ * Usage:
+ *   resolve: { histories: fxListResolver(ScanManagementApi, (route, state, ctx) =>
+ *     ({ url: `/${route.paramMap.get('id')}/history`, params: { page: 1, pageSize: ctx.pageSize } })) }
+ */
+declare function fxListResolver<A extends HttpWrapper>(apiType: Type<A>, request: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ctx: FxListResolverContext) => FxListRequest): ResolveFn<any>;
+
+type FxApiClass = Type<HttpWrapper> & {
+    provider: Provider;
+};
+/**
+ * Factory for the 11-line HttpWrapper subclasses copy-pasted per endpoint.
+ * Returns a distinct injectable class per call (so constructor injection by
+ * type keeps working) without needing a decorator:
+ *
+ *   export const ScanManagementApi = createApi(() => `${environment.baseService}/scarf/scan`);
+ *   // module: providers: [ScanManagementApi.provider]
+ *   // usage:  constructor(private api: InstanceType<typeof ScanManagementApi>)
+ *
+ * `baseURL` accepts a string or a lazy factory (for environment-derived URLs).
+ * An optional `transform` plugs into HttpWrapper.transformResponse — e.g.
+ * FxUtils.camelizeDeep for snake_case/Long-encoded backends.
+ *
+ * IMPORTANT — when subclassing (`@Injectable() class X extends createApi(...)`),
+ * declare an explicit `constructor(http: HttpClient) { super(http); }`.
+ * The generated base carries no Angular factory metadata, so an inherited
+ * constructor makes Ivy fall back to `new X()` with NO arguments: the class
+ * silently gets `http = undefined` and every call fails at runtime while the
+ * build stays green.
+ */
+declare function createApi(baseURL: string | (() => string), transform?: (res: any) => any): FxApiClass;
+
+type NotificationCallback = (...args: any[]) => void;
+interface NotificationConnectOptions {
+    headers?: any;
+    accessTokenFactory?: () => string | Promise<string>;
+}
+declare class NotificationService {
+    private hubConnection;
+    private connectionStatus;
+    /**
+     * Single source of truth for subscriptions. The hub connection gets exactly
+     * one dispatcher per event, so:
+     * - off(event, callback) can remove one subscriber without nuking the rest
+     *   (hubConnection.off(event) removes every handler for the event);
+     * - handlers registered before connect() are attached once connected;
+     * - handlers survive a re-connect that builds a new HubConnection.
+     */
+    private handlers;
+    private connectPromise;
+    private lastHubUrl;
+    private lastOptions?;
+    private manualDisconnect;
+    private restartAttempts;
+    private restartTimer;
+    /**
+     * Connect to SignalR Hub. Overlapping calls share the same in-flight
+     * promise instead of building two competing connections.
+     */
+    connect(hubUrl: string, options?: NotificationConnectOptions): Promise<void>;
+    private doConnect;
+    private scheduleRestart;
+    /**
+     * Disconnect from SignalR Hub. Stops any pending auto-restart.
+     */
+    disconnect(): Promise<void>;
+    /**
+     * Listen to a specific event from the server. Safe to call before
+     * connect(): the handler is attached once the connection is up.
+     */
+    on(eventName: string, callback: NotificationCallback): void;
+    /**
+     * Remove listener(s) for an event.
+     * Prefer passing the callback (or using on$()): calling off(event) without
+     * one removes EVERY handler for the event, including other features'.
+     */
+    off(eventName: string, callback?: NotificationCallback): void;
+    /**
+     * Observable stream of an event. Teardown removes exactly this
+     * subscriber — the safe replacement for manual on()/off().
+     * Emits the event's first argument (SignalR payloads are single-arg here).
+     */
+    on$<T = any>(eventName: string): Observable<T>;
+    private attachDispatcher;
+    private dispatch;
+    /**
+     * Invoke a method on the server
+     * @param methodName - Name of the method to invoke
+     * @param args - Arguments to pass to the method
+     */
+    invoke(methodName: string, ...args: any[]): Promise<any>;
+    /**
+     * Get current connection status
+     */
+    getConnectionStatus(): 'disconnected' | 'connecting' | 'connected';
+    /**
+     * Get connection ID
+     */
+    getConnectionId(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NotificationService>;
+}
+
+interface RealtimeTableEvent<T> {
+    /** Value the event is matched to a row with (via `matchKey`). */
+    key: any;
+    /** Fields to merge onto the matched row. */
+    patch: Partial<T>;
+    /** Marks a final state (e.g. COMPLETED) — forwarded to `onApplied`. */
+    terminal?: boolean;
+}
+interface RealtimeTableSyncOptions<T> {
+    /** Hub event name to subscribe to (via NotificationService.on$). */
+    event: string;
+    /** Parse the raw payload; return null to ignore the event. */
+    parse: (raw: any) => RealtimeTableEvent<T> | null;
+    /** Current table rows (live reference is fine). */
+    getRows: () => T[];
+    /** Replace table rows (callers usually also trigger change detection here). */
+    setRows: (rows: T[]) => void;
+    /** Key events match rows on (e.g. row.analyzeCode). */
+    matchKey: (row: T) => any;
+    /**
+     * Stable identity used when merging a background re-fetch into the current
+     * rows (existing row objects are patched in place so the table keeps their
+     * identity — no flash).
+     */
+    identityKey: (row: T) => any;
+    /** Background list re-fetch used to pick up rows that don't exist yet. */
+    fetchList: () => Promise<{
+        rows: T[];
+        total?: number;
+    } | null>;
+    /** Called after a patch lands on a row (change detection, terminal enrich…). */
+    onApplied?: (row: T, event: RealtimeTableEvent<T>) => void;
+    /** Called when a background re-fetch produced a new total. */
+    onTotal?: (total: number) => void;
+    /** Debounce for the background sync (default 1200ms). */
+    debounceMs?: number;
+    /** Consecutive no-op syncs before giving up on buffered keys (default 3). */
+    idleCap?: number;
+}
+/**
+ * Live-progress plumbing for server-paginated tables fed by hub events:
+ * events matching a visible row are merged in place; events for rows that
+ * are not in the list yet (a just-created record whose list read lags) are
+ * buffered by key and replayed after a debounced, idle-capped background
+ * re-fetch that merges by stable identity.
+ *
+ * The domain contract (event name, payload parsing, terminal semantics) is
+ * injected via options — nothing app-specific lives here.
+ */
+declare class RealtimeTableSync<T = any> {
+    private notifications;
+    private options;
+    private pending;
+    private syncTimer;
+    private idleSyncs;
+    private stopped;
+    private subscription;
+    constructor(notifications: NotificationService, options: RealtimeTableSyncOptions<T>);
+    /**
+     * Subscribe to the hub event. Pass a DestroyRef to tie teardown to a
+     * component lifecycle; stop() is still available for manual control.
+     */
+    start(destroyRef?: DestroyRef): this;
+    stop(): void;
+    /**
+     * Replay buffered events onto the current rows (call from setDataSource so
+     * a regular refresh also applies buffered progress). Returns true if
+     * anything was applied.
+     */
+    applyPending(): boolean;
+    private handleEvent;
+    private scheduleSync;
+    private syncFromServer;
+}
+
 declare class FxUtils {
     private static preresolve;
-    static resolve(value: Object): Promise<{}>;
+    static resolve(value: object): Promise<{}>;
     static isNotNull(obj: any): boolean;
     static isNull(obj: any): boolean;
     static isFunction(obj: any): boolean;
@@ -242,12 +498,86 @@ declare class FxUtils {
     static isSameCollection(collection: any[], compareCollection: any): boolean;
     static isSameValue(model: any, compareModel: any): boolean;
     static parseError(err: HttpErrorResponse): any;
-    static convertColorFromVariable(name: string, alpha?: number): string;
+    /**
+     * Resolve a theme channel triple (`--danger: 255 122 0`) to a CSS colour.
+     * Pass `legacyCommaSyntax: true` for canvas/ECharts consumers: canvas paints
+     * both forms, but zrender's colour parser can't read the CSS4 space syntax
+     * and renders slices black on hover when given it.
+     */
+    static convertColorFromVariable(name: string, alpha?: number, options?: {
+        legacyCommaSyntax?: boolean;
+    }): string;
     static getTagClass(key: string, isCriticalExist?: boolean): TagType;
     static validateEmail(value: string): boolean;
+    /** Safe deep accessor with the org-wide empty placeholder. */
+    static value(model: any, key: string, defaultValue?: any): any;
+    /**
+     * Severity weight for ordering — kept next to getTagClass so ordering and
+     * colouring can never drift apart.
+     */
+    static severityWeight(level: string): number;
+    /** Org-wide date-time rendering (DD/MM/YYYY HH:mm:ss, local time). */
+    static formatDateTime(time: string | Date): string;
+    /** Seconds → compact duration ("2d 4h", "3h 12m", "45s"). */
+    static formatDuration(totalSeconds: number): string;
+    /** Relative time within the last 24h ("3 hours ago"), else DD/MM/YYYY. */
+    static formatRelative(time: string | Date): string;
+    /**
+     * Normalize a snake_case + protobuf-Long API payload for camelCase binding:
+     * - genuine snake_case keys -> camelCase (data-as-key entries such as DLL
+     *   names like "kernel32.dll" are left untouched by the strict regex);
+     * - Long-encoded numbers `{ high, low, unsigned }` -> plain number.
+     */
+    static camelizeDeep(input: any): any;
     static formatSizeUnits(bytes: number): string;
 }
 
+/**
+ * Shared value→colour rules for report/metric displays.
+ *
+ * Every metric that varies in meaning (severity, score, count…) gets ONE rule
+ * so the colour is consistent everywhere and callers never hardcode a tone
+ * for a value that can be good or bad. Domain-specific rules (EPSS, exploit
+ * maturity, license categories…) stay in the consuming app — only the
+ * mechanism and the org-wide rules live here.
+ *
+ * There is intentionally NO `default` text/bg colour in the theme, so rule
+ * helpers return `null` for "no meaningful value" and the `toneText` /
+ * `toneBg` / `toneBadge` wrappers fall back to a neutral class.
+ *
+ * Every emitted utility must appear below as a WHOLE literal string — the
+ * Tailwind content scanner (v4 has no safelist) only sees complete class
+ * names. Never rebuild these with string interpolation.
+ */
+type Tone = 'critical' | 'danger' | 'warning' | 'success' | 'information';
+/** Severity / risk-level string → tone (Critical & High → danger, Medium → warning, Low → success). */
+declare function severityTone(value: any): Tone | null;
+/**
+ * CVSS-style 0–10 score → tone, following the CVSS v3 qualitative bands
+ * (≥9 Critical, ≥7 High, ≥4 Medium, else Low). Backends occasionally send a
+ * 0–100 scale, so values > 10 are normalised down by /10.
+ */
+declare function scoreTone(score: any): Tone | null;
+/**
+ * Count of "bad" things → tone: 0 is good (success), anything positive is bad.
+ * `positiveTone` sets how severe a non-zero count reads (default `danger`;
+ * pass `critical` for the worst metrics, `warning` for milder ones).
+ * Non-numeric values (e.g. "--") return null → neutral.
+ */
+declare function countTone(count: any, positiveTone?: Tone): Tone | null;
+/** Tone → text colour class, with a neutral fallback when there is no value. */
+declare function toneText(tone: Tone | null): string;
+/** Tone → background colour class, with a neutral fallback when there is no value. */
+declare function toneBg(tone: Tone | null): string;
+/** Tone → soft pill/badge classes (tinted bg + matching text), neutral fallback. */
+declare function toneBadge(tone: Tone | null): string;
+/**
+ * Tone → resolved CSS colour string for ECharts / canvas where a Tailwind
+ * class can't be used (e.g. per-slice pie `itemStyle.color`). Emits the
+ * legacy comma syntax — see FxUtils.convertColorFromVariable.
+ */
+declare function toneColor(tone: Tone | null, alpha?: number): string;
+
 declare class FxValidators {
     /**
      * Name fields: firstName, lastName, groupName, projectName, displayName
@@ -413,7 +743,7 @@ declare class QuillStyleLoaderService {
     private platformId;
     private loaded;
     private loadingPromise;
-    constructor(platformId: Object);
+    constructor(platformId: object);
     /**
      * Load Quill CSS (only in browser). Returns a promise that resolves when
      * the CSS links have been appended.
@@ -439,76 +769,41 @@ declare class ThemeService {
     static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
 }
 
-declare class NotificationService {
-    private hubConnection;
-    private connectionStatus;
-    constructor();
-    /**
-     * Connect to SignalR Hub
-     * @param hubUrl - The URL of the SignalR hub
-     * @returns Promise that resolves when connected
-     */
-    connect(hubUrl: string, options?: {
-        headers?: any;
-        accessTokenFactory?: () => string | Promise<string>;
-    }): Promise<void>;
-    /**
-     * Disconnect from SignalR Hub
-     */
-    disconnect(): Promise<void>;
+type ErrorMessages = Record<string, any>;
+declare abstract class FxComponent<T> implements ControlValueAccessor {
     /**
-     * Listen to a specific event from the server
-     * @param eventName - Name of the event to listen to
-     * @param callback - Callback function to execute when event is received
+     * Injected via inject() rather than a constructor parameter: parameter
+     * decorators (@Optional/@Self) are NOT inherited by subclasses, which used
+     * to make every control crash when used without a form binding, or silently
+     * bind to an ancestor's NgControl.
      */
-    on(eventName: string, callback: (...args: any[]) => void): void;
-    /**
-     * Remove listener for a specific event
-     * @param eventName - Name of the event to stop listening to
-     */
-    off(eventName: string): void;
-    /**
-     * Invoke a method on the server
-     * @param methodName - Name of the method to invoke
-     * @param args - Arguments to pass to the method
-     */
-    invoke(methodName: string, ...args: any[]): Promise<any>;
-    /**
-     * Get current connection status
-     */
-    getConnectionStatus(): 'disconnected' | 'connecting' | 'connected';
-    /**
-     * Get connection ID
-     */
-    getConnectionId(): string | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NotificationService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NotificationService>;
-}
-
-type ErrorMessages = {
-    [key: string]: any;
-};
-declare class FxComponent<T> implements ControlValueAccessor {
-    ngControl: NgControl;
+    ngControl: NgControl | null;
+    disabled: boolean;
     value: T;
     onChange: (value: T) => void;
     onTouched: () => void;
-    validationError: ErrorMessages;
+    validationError?: ErrorMessages;
     errorMessages?: ErrorMessages;
-    constructor(ngControl: NgControl);
+    constructor();
     setValue(value: T): void;
     onEnter(value: T): void;
     writeValue(value: T): void;
     registerOnChange(fn: (value: T) => void): void;
     registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     get invalid(): boolean;
-    get errors(): {
-        [key: string]: any;
-    };
-    validate(validateFn: Function): void;
+    get errors(): Record<string, any>;
+    validate(validateFn?: (value: T) => ValidationErrors | null | undefined): void;
     setErrors(error: ValidationErrors): void;
+    /**
+     * Removes only the errors this component set imperatively via setErrors().
+     * Errors owned by the validator pipeline (built-in or custom validators)
+     * are left untouched.
+     */
     clearErrors(): void;
     getErrorMessage(label?: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FxComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FxComponent<any>, never, never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class InputComponent extends FxComponent<string> implements AfterViewInit {
@@ -517,11 +812,8 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     tooltip: string;
     type: string;
     placeholder: string;
-    errorMessages: {
-        [key: string]: string;
-    };
+    errorMessages: Record<string, string>;
     required: string | boolean;
-    disabled: boolean;
     suffixIcon?: string;
     class?: any;
     maxlength?: number;
@@ -529,11 +821,14 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     blurred: EventEmitter<void>;
     focused: EventEmitter<void>;
     suffixClick: EventEmitter<void>;
+    /** Accessible name for the suffix icon button (it renders no text). */
+    suffixAriaLabel: string;
+    readonly fieldId: string;
     showPassword: boolean;
     validateError: ValidationErrors | null;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
-    setDisabledState?(isDisabled: boolean): void;
+    writeValue(value: string): void;
     onInput(event: Event): void;
     onFocus(): void;
     onBlur(): void;
@@ -541,7 +836,7 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     onSuffixClick(): void;
     get displayType(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "suffixAriaLabel": { "alias": "suffixAriaLabel"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
 }
 
 declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit, OnInit, OnChanges {
@@ -554,10 +849,7 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
         value: string;
     }[];
     multiple: boolean;
-    disabled: boolean;
-    errorMessages: {
-        [key: string]: string;
-    };
+    errorMessages: Record<string, string>;
     required: boolean;
     class?: any;
     enableSearch: boolean;
@@ -567,13 +859,16 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     }[]>;
     /** Emits the current value when the select panel closes (useful for multiple mode). */
     closed: EventEmitter<string | string[]>;
+    readonly fieldId: string;
     searchTerm: string;
     filteredOptions: {
         label: string;
         value: string;
     }[];
     private search$;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    private destroyRef;
+    constructor(ref: ChangeDetectorRef);
+    writeValue(value: string | string[]): void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -583,7 +878,7 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     onSelectionChange(value: any): void;
     isSelected(value: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
 }
 
 interface IRadioButton {
@@ -594,6 +889,7 @@ interface IRadioButton {
 }
 declare class RadioButtonComponent extends FxComponent<IRadioButton> implements AfterViewInit {
     private ref;
+    readonly groupId: string;
     label?: string;
     tooltip: string;
     required?: boolean;
@@ -603,40 +899,37 @@ declare class RadioButtonComponent extends FxComponent<IRadioButton> implements
         icon?: any;
         tooltip?: string;
     }[];
-    disabled: boolean;
     errorMessages: ErrorMessages;
     class?: any;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
-    setDisabledState?(isDisabled: boolean): void;
     onSelectValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "fx-ui-radio", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "fx-ui-radio", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class CheckboxComponent extends FxComponent<any> implements AfterViewInit {
     private ref;
     label: string;
-    disabled: boolean;
     rounded: boolean;
     valueChange: EventEmitter<boolean>;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
-    setDisabledState?(isDisabled: boolean): void;
+    writeValue(value: any): void;
     onInputChange(event: Event): void;
     markTouched(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "fx-ui-checkbox", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "fx-ui-checkbox", never, { "label": { "alias": "label"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
 }
 
-type UploadResult = {
+interface UploadResult {
     files: File[];
     accepted: File[];
     rejected: {
         file: File;
         reason: string;
     }[];
-};
+}
 declare class DndUploadComponent {
     multiple: boolean;
     accept: string;
@@ -675,14 +968,19 @@ declare class ButtonComponent {
     icon?: any;
     class?: any;
     loading: boolean;
+    /** Native button type. Defaults to 'button' so it never implicitly submits a form. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible name for icon-only usage (icon set, no label). */
+    ariaLabel: string;
     clicked: EventEmitter<void>;
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fx-ui-button", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fx-ui-button", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
 }
 
 declare class RadioButtonToggleComponent extends FxComponent<any> implements AfterViewInit {
     private ref;
+    readonly groupId: string;
     label?: string;
     required?: boolean;
     options: {
@@ -690,38 +988,34 @@ declare class RadioButtonToggleComponent extends FxComponent<any> implements Aft
         value: any;
         icon?: any;
     }[];
-    disabled: boolean;
     errorMessages: ErrorMessages;
     class?: any;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
-    setDisabledState?(isDisabled: boolean): void;
     onSelectValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonToggleComponent, "fx-ui-radio-toggle, [fx-ui-radio-toggle]", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonToggleComponent, "fx-ui-radio-toggle, [fx-ui-radio-toggle]", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-declare class DatetimePicker extends FxComponent<any> implements AfterViewInit, OnInit {
+declare class DatetimePicker extends FxComponent<any> implements AfterViewInit {
     private ref;
     label?: string;
     placeholder: string;
     required: boolean;
     type: any;
-    disabled: boolean;
     minDate?: any;
     maxDate?: any;
     errorMessages: ErrorMessages;
     validateFn: (date: string) => ValidationErrors | null;
+    readonly fieldId: string;
     startAt: any;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
-    ngOnInit(): void;
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
-    setDisabledState?(isDisabled: boolean): void;
     onBlur(): void;
     writeValue(value: any): void;
     onValueChange(date: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatetimePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimePicker, "fx-ui-datetime-picker", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatetimePicker, "fx-ui-datetime-picker", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class LoadingPanel {
@@ -734,16 +1028,16 @@ declare class LoadingPanel {
 declare class SearchBarComponent extends FxComponent<string> implements AfterViewInit {
     private ref;
     placeholder: string;
-    disabled: boolean;
     search: EventEmitter<string>;
     valueChange: EventEmitter<string>;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
+    writeValue(value: string): void;
     onValueChange(value: string): void;
     onEnterKey(): void;
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "fx-ui-search-bar", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "search": "search"; "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "fx-ui-search-bar", never, { "placeholder": { "alias": "placeholder"; "required": false; }; }, { "search": "search"; "valueChange": "valueChange"; }, never, never, false, never>;
 }
 
 declare class TabComponent {
@@ -768,6 +1062,8 @@ declare class TabGroupComponent implements AfterContentInit {
     constructor(renderer: Renderer2);
     ngAfterContentInit(): void;
     selectTab(index: number): void;
+    /** Roving tablist keyboard nav: arrows move AND activate (selection follows focus). */
+    onTabKeydown(event: KeyboardEvent, index: number): void;
     private updateUnderlinePosition;
     private scrollToActiveTab;
     scroll(direction: 'left' | 'right'): void;
@@ -816,13 +1112,13 @@ declare class TagComponent {
     rounded: boolean;
     icon?: any;
     solid: boolean;
-    click: EventEmitter<void>;
+    clicked: EventEmitter<void>;
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; }, { "click": "click"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
 }
 
-type IChartType = 'bar' | 'pie' | 'line' | 'sunburst' | 'radar' | 'auto';
+type IChartType = 'bar' | 'pie' | 'sunburst' | 'auto';
 declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     private ref;
     private cdr;
@@ -877,12 +1173,11 @@ declare class SliderComponent extends FxComponent<any> implements AfterViewInit
     max: number;
     step: number;
     vertical: boolean;
-    disabled: boolean;
     valueChange: EventEmitter<number>;
     dragging: boolean;
-    constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
-    setDisabledState?(isDisabled: boolean): void;
+    setDisabledState(isDisabled: boolean): void;
     writeValue(value: number): void;
     private _normalizeValue;
     private _decimalPlaces;
@@ -906,19 +1201,20 @@ declare class SliderComponent extends FxComponent<any> implements AfterViewInit
         bottom?: undefined;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "fx-ui-slider", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "fx-ui-slider", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
 }
 
 declare class SwitchComponent extends FxComponent<any> implements AfterViewInit {
     private cdr;
-    disabled: boolean;
     onSwitch: EventEmitter<boolean>;
+    /** Accessible name — the switch renders no visible text of its own. */
+    ariaLabel: string;
     ngAfterViewInit(): void;
-    constructor(ngControl: NgControl, cdr: ChangeDetectorRef);
-    setDisabledState(isDisabled: boolean): void;
+    constructor(cdr: ChangeDetectorRef);
+    writeValue(value: any): void;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "onSwitch": "onSwitch"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "onSwitch": "onSwitch"; }, never, never, false, never>;
 }
 
 declare class RichTextAreaComponent extends FxComponent<any> implements AfterViewInit {
@@ -930,7 +1226,7 @@ declare class RichTextAreaComponent extends FxComponent<any> implements AfterVie
     toolbarOptions: any;
     contentChange: EventEmitter<string>;
     private quillInstance;
-    constructor(ngControl: NgControl, cdr: ChangeDetectorRef, styleLoader: QuillStyleLoaderService, platformId: Object);
+    constructor(cdr: ChangeDetectorRef, styleLoader: QuillStyleLoaderService, platformId: object);
     ngAfterViewInit(): Promise<void>;
     writeValue(value: any): void;
     setDisabledState(isDisabled: boolean): void;
@@ -1067,6 +1363,195 @@ declare class DrawerComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "fx-ui-drawer", never, { "items": { "alias": "items"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "version": { "alias": "version"; "required": false; }; }, { "toggleExpanded": "toggleExpanded"; "itemClicked": "itemClicked"; }, never, never, false, never>;
 }
 
+/** Row-card skeleton placeholder for master-detail list panes. */
+declare class SkeletonListComponent {
+    rows: number;
+    range(n: number): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonListComponent, "fx-ui-skeleton-list", never, { "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/** Card-shaped skeleton placeholder for detail panels. */
+declare class SkeletonDetailComponent {
+    /** Number of content cards rendered below the header card. */
+    cards: number;
+    /** Rows per content card. */
+    rows: number;
+    range(n: number): number[];
+    rowWidth(i: number): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonDetailComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonDetailComponent, "fx-ui-skeleton-detail", never, { "cards": { "alias": "cards"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+interface FxStatCard {
+    /** Caller-translated caption. */
+    label: string;
+    value: string | number;
+    /** hero-icon name shown in the tinted box. */
+    icon?: any;
+    /** Colours the number and the icon box; null/undefined renders neutral. */
+    tone?: Tone | null;
+}
+/** KPI tile row: big number + tinted icon box + caption, in a responsive grid. */
+declare class StatCardsComponent {
+    cards: FxStatCard[];
+    /** Grid columns; defaults to one column per card. */
+    cols?: number;
+    get gridColumns(): string;
+    numClass(card: FxStatCard): string;
+    boxClass(card: FxStatCard): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatCardsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatCardsComponent, "fx-ui-stat-cards", never, { "cards": { "alias": "cards"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/** Centered "no data" block. The message is caller-translated (no i18n in lib). */
+declare class EmptyStateComponent {
+    message: string;
+    /** Optional icon (hero-icon name). */
+    icon?: any;
+    /** Min height of the block, CSS length. */
+    height: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "fx-ui-empty-state", never, { "message": { "alias": "message"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+interface FxFilterChipOption {
+    /** Caller-translated label. */
+    label: string;
+    /** '' (empty) renders as the neutral "All" chip. */
+    value: string;
+}
+/**
+ * Tone-tinted filter chip row. Replaces the per-tab chipClass() copies —
+ * including their classic bug of comparing a hardcoded filter key: the active
+ * chip here is always derived from [value].
+ */
+declare class FilterChipsComponent {
+    options: FxFilterChipOption[];
+    value: string;
+    valueChange: EventEmitter<string>;
+    /** Per-value tone overrides (e.g. { Safe: 'information', Protected: 'discovery' as any }). */
+    toneOverrides: Record<string, Tone | null>;
+    select(option: FxFilterChipOption): void;
+    chipClass(option: FxFilterChipOption): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterChipsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterChipsComponent, "fx-ui-filter-chips", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "toneOverrides": { "alias": "toneOverrides"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+}
+
+/** Thin tone-coloured progress/score bar with optional label and caption. */
+declare class MeterComponent {
+    value: number;
+    max: number;
+    tone: Tone | null;
+    /** Caller-translated texts; omitted → bar only. */
+    label?: string;
+    caption?: string;
+    get percent(): number;
+    get fillClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MeterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MeterComponent, "fx-ui-meter", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "label": { "alias": "label"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/** Detail-panel section: card with an icon + heading header and projected body. */
+declare class SectionCardComponent {
+    /** Caller-translated heading. */
+    title: string;
+    /** hero-icon name; omitted → text-only header. */
+    icon?: any;
+    iconTone: Tone | null;
+    get iconClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionCardComponent, "fx-ui-section-card", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconTone": { "alias": "iconTone"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+
+/**
+ * Label-over-value field for detail panels. The label uses txt-field-label
+ * with its baked-in margin neutralised (the known mb-1 alignment gotcha) —
+ * spacing is owned by this component.
+ */
+declare class InfoFieldComponent {
+    /** Caller-translated label. */
+    label: string;
+    value: string | number | null | undefined;
+    /** Colours the value; null/undefined renders the primary text colour. */
+    tone: Tone | null;
+    /** Monospace value (hashes, paths). */
+    mono: boolean;
+    /** Placeholder when value is empty. */
+    placeholder: string;
+    get displayValue(): string;
+    get valueClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfoFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InfoFieldComponent, "fx-ui-info-field", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "mono": { "alias": "mono"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+interface FxSeverityBadge {
+    key: string;
+    label: string | number;
+    tone: Tone | null;
+}
+/**
+ * Compact total/critical/high/medium(/low) badge cluster used in table cells.
+ * Pass counts via [stats]; missing fields are skipped. Labels are numbers, so
+ * no i18n is involved; the total badge renders neutral.
+ */
+declare class SeverityBadgesComponent {
+    stats: {
+        total?: number;
+        critical?: number;
+        high?: number;
+        medium?: number;
+        low?: number;
+    } | null;
+    /** Show zero-count badges (default true, mirrors the table-cell usage). */
+    showZero: boolean;
+    /** Append the severity letter to counts ("3C", "5H", "2M") per the report design. */
+    suffixed: boolean;
+    badgeClick: EventEmitter<string>;
+    private static readonly TONES;
+    get badges(): FxSeverityBadge[];
+    badgeClass(badge: FxSeverityBadge): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SeverityBadgesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SeverityBadgesComponent, "fx-ui-severity-badges", never, { "stats": { "alias": "stats"; "required": false; }; "showZero": { "alias": "showZero"; "required": false; }; "suffixed": { "alias": "suffixed"; "required": false; }; }, { "badgeClick": "badgeClick"; }, never, never, false, never>;
+}
+
+/**
+ * Two-column master-detail shell driven by a BaseMasterDetailComponent.
+ * The host page projects its own header/filters and supplies templates for
+ * the parts that vary per entity:
+ *
+ *   <fx-ui-master-detail [table]="this" [emptyMessage]="'noData' | translate">
+ *     <div mdHeader>…title / stat cards…</div>
+ *     <div mdFilters>…search bar / filter chips…</div>
+ *     <ng-template #row let-item let-selected="selected">…row body…</ng-template>
+ *     <ng-template #detail let-detail>…detail pane…</ng-template>
+ *   </fx-ui-master-detail>
+ *
+ * The list behaves as a single-select listbox: the selected option is the
+ * tab stop, ArrowUp/Down/Home/End move the selection.
+ */
+declare class MasterDetailComponent implements AfterViewInit {
+    table: BaseMasterDetailComponent<any>;
+    /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
+    listWidth: string;
+    maxListHeight: string;
+    pageSizeOptions: number[];
+    /** Labels come in via inputs — the lib carries no i18n. */
+    emptyMessage: string;
+    listLabel: string;
+    skeletonCards: number;
+    rowTemplate: TemplateRef<any>;
+    detailTemplate: TemplateRef<any>;
+    paginator: MatPaginator;
+    readonly uid: string;
+    ngAfterViewInit(): void;
+    isSelected(row: any): boolean;
+    optionId(index: number): string;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MasterDetailComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; }; "maxListHeight": { "alias": "maxListHeight"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "listLabel": { "alias": "listLabel"; "required": false; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdHeader]", "[mdFilters]"], false, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -1093,9 +1578,9 @@ declare const MY_MOMENT_FORMATS: {
 };
 declare class UiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof ConfirmationDialogComponent], [typeof i29.CommonModule, typeof i30.FormsModule, typeof i30.ReactiveFormsModule, typeof i31.RouterModule, typeof i32.OwlDateTimeModule, typeof i32.OwlNativeDateTimeModule, typeof i33.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i36.NgHeroiconsModule, typeof i37.VflowComponent, typeof i37.HandleComponent, typeof i37.ResizableComponent, typeof i37.SelectableDirective, typeof i37.MiniMapComponent, typeof i37.NodeToolbarComponent, typeof i37.CustomTemplateEdgeComponent, typeof i37.DragHandleDirective, typeof i37.ConnectionControllerDirective, typeof i37.NodeHtmlTemplateDirective, typeof i37.NodeSvgTemplateDirective, typeof i37.GroupNodeTemplateDirective, typeof i37.EdgeLabelHtmlTemplateDirective, typeof i37.EdgeTemplateDirective, typeof i37.ConnectionTemplateDirective, typeof i37.HandleTemplateDirective, typeof i38.NgxEchartsModule, typeof i39.MatSelectModule, typeof i40.MatRadioModule, typeof i41.MatButtonModule, typeof i42.MatIconModule, typeof i43.MatPaginatorModule, typeof i44.MatTableModule, typeof i45.MatSnackBarModule, typeof i46.MatDialogModule, typeof i47.MatCheckboxModule, typeof i48.MatCardModule, typeof i49.MatDatepickerModule, typeof i50.MatTimepickerModule, typeof i51.MatBadgeModule, typeof i52.MatExpansionModule, typeof i53.MatFormFieldModule, typeof i54.MatMenuModule, typeof i55.MatTooltipModule, typeof i56.DragDropModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof ConfirmationDialogComponent, typeof i30.FormsModule, typeof i30.ReactiveFormsModule, typeof i31.RouterModule, typeof i32.OwlDateTimeModule, typeof i32.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i36.NgHeroiconsModule, typeof i39.MatSelectModule, typeof i40.MatRadioModule, typeof i41.MatButtonModule, typeof i42.MatIconModule, typeof i43.MatPaginatorModule, typeof i44.MatTableModule, typeof i45.MatSnackBarModule, typeof i46.MatDialogModule, typeof i47.MatCheckboxModule, typeof i48.MatCardModule, typeof i49.MatDatepickerModule, typeof i50.MatTimepickerModule, typeof i51.MatBadgeModule, typeof i52.MatExpansionModule, typeof i53.MatFormFieldModule, typeof i54.MatMenuModule, typeof i55.MatTooltipModule, typeof i56.DragDropModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof ConfirmationDialogComponent], [typeof i39.CommonModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.OwlDateTimeModule, typeof i42.OwlNativeDateTimeModule, typeof i43.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i46.NgHeroiconsModule, typeof i47.VflowComponent, typeof i47.HandleComponent, typeof i47.ResizableComponent, typeof i47.SelectableDirective, typeof i47.MiniMapComponent, typeof i47.NodeToolbarComponent, typeof i47.CustomTemplateEdgeComponent, typeof i47.DragHandleDirective, typeof i47.ConnectionControllerDirective, typeof i47.NodeHtmlTemplateDirective, typeof i47.NodeSvgTemplateDirective, typeof i47.GroupNodeTemplateDirective, typeof i47.EdgeLabelHtmlTemplateDirective, typeof i47.EdgeTemplateDirective, typeof i47.ConnectionTemplateDirective, typeof i47.HandleTemplateDirective, typeof i48.NgxEchartsModule, typeof i49.MatSelectModule, typeof i50.MatRadioModule, typeof i51.MatButtonModule, typeof i52.MatIconModule, typeof i53.MatPaginatorModule, typeof i54.MatTableModule, typeof i55.MatSnackBarModule, typeof i56.MatDialogModule, typeof i57.MatCheckboxModule, typeof i58.MatCardModule, typeof i59.MatDatepickerModule, typeof i60.MatTimepickerModule, typeof i61.MatBadgeModule, typeof i62.MatExpansionModule, typeof i63.MatFormFieldModule, typeof i64.MatMenuModule, typeof i65.MatTooltipModule, typeof i66.DragDropModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof ConfirmationDialogComponent, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.OwlDateTimeModule, typeof i42.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i46.NgHeroiconsModule, typeof i49.MatSelectModule, typeof i50.MatRadioModule, typeof i51.MatButtonModule, typeof i52.MatIconModule, typeof i53.MatPaginatorModule, typeof i54.MatTableModule, typeof i55.MatSnackBarModule, typeof i56.MatDialogModule, typeof i57.MatCheckboxModule, typeof i58.MatCardModule, typeof i59.MatDatepickerModule, typeof i60.MatTimepickerModule, typeof i61.MatBadgeModule, typeof i62.MatExpansionModule, typeof i63.MatFormFieldModule, typeof i64.MatMenuModule, typeof i65.MatTooltipModule, typeof i66.DragDropModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiModule>;
 }
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
-export type { Breadcrumb, ColumnChangedEvent, IChartType, IRadioButton, KanbanColumn, TableResult, TagType, ToastData, TreeNode, UploadResult };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FilterChipsComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, MasterDetailComponent, MeterComponent, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RichTextAreaComponent, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
+export type { Breadcrumb, ColumnChangedEvent, FxApiClass, FxFilterChipOption, FxListRequest, FxListResolverContext, FxSeverityBadge, FxStatCard, IChartType, IRadioButton, KanbanColumn, NotificationCallback, NotificationConnectOptions, RealtimeTableEvent, RealtimeTableSyncOptions, TableResult, TagType, ToastData, Tone, TreeNode, UploadResult };