@foxeltech/angular-ui 0.4.0 → 0.7.75

package/types/foxeltech-angular-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, Injector, DestroyRef, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, Provider, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, Renderer2, InjectionToken, QueryList, NgZone } from '@angular/core';
+import { OnDestroy, Injector, DestroyRef, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, Provider, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, AfterViewChecked, Renderer2, InjectionToken, QueryList, NgZone } from '@angular/core';
 import * as _foxeltech_angular_ui from '@foxeltech/angular-ui';
 import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
@@ -261,22 +261,135 @@ declare class BaseDialogComponent<T = any> extends BaseComponent implements Afte
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseDialogComponent<any>, never, never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Overlay chặn màn cho HÀNH ĐỘNG của người dùng (bấm nút, đổi trạng thái,
+ * xuất báo cáo…). `app.html` của host bind `fx-ui-loading-panel` vào
+ * `listenerAction`.
+ *
+ * ⚠️ **KHÔNG dùng cho điều hướng.** Channel `listener` + `start()`/`stop()` đã
+ * bị XOÁ ở 0.7.70 (Pha 3). Điều hướng dùng skeleton: `FxRouteSkeletonService`
+ * đọc `data.skeleton` của route đích và shell dựng `fx-ui-route-skeleton`.
+ *
+ * Vì sao xoá thay vì để lại: trước đó cả 46 call site đổ chung MỘT channel, lẫn
+ * hai ngữ nghĩa (điều hướng vs hành động). Sau khi skeleton thay phần điều
+ * hướng, `listener` không còn ai nghe — để lại là một cái bẫy: gọi `start()`
+ * tưởng có overlay mà thực tế không có gì hiện.
+ */
 declare class FxLoadingService {
-    listener: EventEmitter<boolean>;
     listenerAction: EventEmitter<boolean>;
-    start(): void;
-    stop(): void;
     startAction(): void;
     stopAction(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLoadingService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FxLoadingService>;
 }
 
-declare class BaseResolver {
-    loadingService: FxLoadingService;
-    injector: Injector;
-    constructor(loadingService: FxLoadingService, injector: Injector);
-    baseResolverInit(): void;
+/**
+ * Một KHỐI trong skeleton của màn. Ghép các khối này theo đúng thứ tự của màn
+ * thật thì skeleton mới khớp layout — bảng ra bảng, chart ra chart.
+ *
+ * - `heading`    H1 + subline + `count` nút hành động (mặc định 2, 0 = không có)
+ * - `toolbar`    search bar + `count` filter pill (mặc định 2)
+ * - `table`      bảng, skeleton theo TỪNG Ô (`columns` / `rows`)
+ * - `cards`      lưới card (catalog) — `count` / `cols`
+ * - `stat-cards` hàng stat tile rời — `count`
+ * - `kpi-strip`  MỘT card chia cột, số to (kiểu `app-dash-kpi-row`) — `count`
+ * - `panels`     lưới section-card có vùng chart — `count` / `cols`
+ * - `card`       một section-card đơn
+ * - `tabs`       dải tab
+ * - `facets`     3 cụm facets/list/detail
+ * - `detail`     cụm card detail
+ * - `form`       card form
+ */
+type FxSkeletonBlockKind = 'heading' | 'toolbar' | 'table' | 'cards' | 'stat-cards' | 'kpi-strip' | 'panels' | 'card' | 'tabs' | 'facets' | 'detail' | 'form';
+interface FxSkeletonBlockSpec {
+    kind: FxSkeletonBlockKind;
+    /**
+     * Số phần tử con:
+     * - `heading`: số nút hành động (0 = màn không có CTA)
+     * - `toolbar`: số filter pill
+     * - `panels` `cards` `stat-cards` `kpi-strip` `tabs`: số khối
+     */
+    count?: number;
+    /** `panels` `cards`: số cột ở breakpoint lớn. */
+    cols?: number;
+    /** `table`: số cột và số hàng. */
+    columns?: number;
+    rows?: number;
+}
+type FxSkeletonBlock = FxSkeletonBlockKind | FxSkeletonBlockSpec;
+/**
+ * Tên gọn cho các layout dùng lại được. Route nên khai thẳng mảng block khi
+ * layout của nó khác preset — chính app biết layout của mình, không phải lib.
+ */
+type FxSkeletonHint = 'table' | 'panels' | 'dashboard' | 'tabs-facets' | 'facets' | 'detail' | 'form';
+/**
+ * Skeleton cho vùng NỘI DUNG trong lúc resolver của route đang chạy.
+ *
+ * ⚠️ Vì sao skeleton phải nằm ở shell chứ không ở từng màn: Angular **không
+ * tạo component cho tới khi resolver xong**, nên một màn không thể tự vẽ
+ * skeleton của chính nó trong lúc resolver của nó chạy. Thứ vẽ được phải tồn
+ * tại TRƯỚC component đó → shell + router event. Xem `FxRouteSkeletonService`.
+ */
+declare class RouteSkeletonComponent {
+    /** Tên preset, hoặc mảng block mô tả đúng layout của màn. */
+    readonly hint: _angular_core.InputSignal<FxSkeletonHint | FxSkeletonBlock[] | null>;
+    readonly blocks: _angular_core.Signal<FxSkeletonBlockSpec[]>;
+    cols(b: FxSkeletonBlockSpec): number[];
+    rows(b: FxSkeletonBlockSpec): number[];
+    items(b: FxSkeletonBlockSpec, fallback: number): number[];
+    /** Lớp lưới cho `panels`/`cards` — Tailwind v4 không có safelist nên phải
+     *  là chuỗi tĩnh, không ghép động. */
+    gridClass(b: FxSkeletonBlockSpec): string;
+    /** Header ngắn hơn ô dữ liệu, cột đầu rộng nhất (thường là tên). */
+    headWidth(c: number): number;
+    /**
+     * Bề rộng đổi theo cả hàng và cột — cùng bề rộng thì khối skeleton trông
+     * như một hình chữ nhật đặc, mất cảm giác "từng field".
+     */
+    cellWidth(r: number, c: number): number;
+    barHeight(i: number): number;
+    readonly bars: number[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RouteSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RouteSkeletonComponent, "fx-ui-route-skeleton", never, { "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Khai trên route: `data: { skeleton: 'table' }` (tên preset) hoặc
+ * `data: { skeleton: ['heading', 'toolbar', 'table'] }` (mảng block, mô tả
+ * ĐÚNG layout của màn — bảng ra bảng, chart ra chart).
+ */
+declare const FX_SKELETON_DATA_KEY = "skeleton";
+/**
+ * Đọc `data.skeleton` của route đích rồi bật/tắt skeleton cho vùng nội dung.
+ *
+ * ⚠️ Vì sao phải nghe router event chứ không để từng màn tự lo: Angular
+ * **không tạo component cho tới khi resolver xong**, nên trong lúc resolver
+ * của một màn chạy thì component đó chưa tồn tại — không có gì để vẽ
+ * skeleton. Chỉ shell (tồn tại trước) làm được.
+ *
+ * Mốc dùng là `RoutesRecognized` — event ĐẦU TIÊN mang `RouterStateSnapshot`,
+ * và nó xảy ra TRƯỚC `ResolveStart`. `NavigationStart` thì chưa biết route
+ * đích nên không đọc được hint.
+ */
+declare class FxRouteSkeletonService {
+    private readonly router;
+    private readonly _hint;
+    /** Hint đang hiển thị, `null` = không vẽ skeleton. */
+    readonly hint: _angular_core.Signal<FxSkeletonHint | FxSkeletonBlock[] | null>;
+    readonly active: _angular_core.Signal<boolean>;
+    /**
+     * Điều hướng nhanh hơn mốc này thì KHÔNG vẽ skeleton — tránh nháy một
+     * nhịp khi resolver trả về gần như tức thì (dữ liệu đã cache).
+     */
+    private readonly graceMs;
+    private timer?;
+    private started;
+    constructor();
+    /** Gọi một lần từ shell (host và mỗi remote standalone). */
+    start(): void;
+    private clearTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxRouteSkeletonService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<FxRouteSkeletonService>;
 }
 
 interface FxListRequest {
@@ -292,11 +405,12 @@ interface FxListResolverContext {
     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.
+ * Chạy MỘT request cho list resolver, lỗi thì hiện toast đã parse.
+ *
+ * ⚠️ KHÔNG còn bật overlay chặn màn: điều hướng dùng skeleton
+ * (`FxRouteSkeletonService` + `data.skeleton` trên route). `BaseResolver` đã bị
+ * xoá ở 0.7.70 — mọi resolver giờ là `@Injectable()` thuần hoặc dùng factory
+ * này.
  *
  * Usage:
  *   resolve: { histories: fxListResolver(ScanManagementApi, (route, state, ctx) =>
@@ -509,6 +623,14 @@ declare class FxUtils {
     static convertColorFromVariable(name: string, alpha?: number, options?: {
         legacyCommaSyntax?: boolean;
     }): string;
+    /**
+     * Status/severity string → tag tone.
+     *
+     * Coerces instead of trusting the argument: every caller feeds this raw API
+     * values, and a numeric or null field used to throw
+     * "key.toLowerCase is not a function" and take the whole screen down.
+     * Non-string input simply falls through to the default tone.
+     */
     static getTagClass(key: string, isCriticalExist?: boolean): TagType;
     static validateEmail(value: string): boolean;
     /** Safe deep accessor with the org-wide empty placeholder. */
@@ -547,9 +669,16 @@ declare class FxUtils {
  * 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.
+ * Every emitted Tailwind UTILITY must appear below as a WHOLE literal string —
+ * the Tailwind content scanner (v4 has no safelist) only sees complete class
+ * names. Never rebuild those with string interpolation.
+ *
+ * ⚠️ Ngoại lệ có chủ đích: `tone-tint-*`, `tone-fg-*`, `tone-dot-*` và
+ * `tone-dot-chart-*` là CLASS CSS THẬT khai trong components.css, KHÔNG phải
+ * utility Tailwind — chúng luôn tồn tại trong stylesheet nên ghép chuỗi
+ * `tone-fg-${tone}` là an toàn. Đó chính là lý do chọn class thay vì utility:
+ * ngoài việc tránh xung đột tên (`warning` trong theme Tailwind trỏ vào bộ
+ * LEGACY `--og-tone-*`), nó còn xoá hẳn bẫy "class ghép chuỗi bị vô hình".
  */
 type Tone = 'critical' | 'danger' | 'warning' | 'success' | 'information';
 /** Severity / risk-level string → tone (Critical & High → danger, Medium → warning, Low → success). */
@@ -572,7 +701,50 @@ 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;
+/**
+ * Badge severity MẶC ĐỊNH — nền MỀM theo thang đo, Critical ra **đỏ sẫm**.
+ *
+ * ⚠️ Trước đây hàm này trả nền ĐẶC (`tone-tint-*`, Critical = đen `--og-text`)
+ * vì demo có biến thể `.og-badge--solid`. Nhưng demo chỉ dùng biến thể đó ở
+ * ĐÚNG MỘT chỗ — badge severity trong danh sách findings — còn app mình gọi
+ * `toneBadge()` ở khắp nơi (`project-card`, `score-badge`, `list-row`,
+ * `severity-badges`, `tab-group`, badge trong hàng…). Kết quả: pill đen tràn
+ * ra mọi màn, anh Tú báo 3 lần (03/09). Nên MẶC ĐỊNH đảo về nền mềm; muốn
+ * pill đen thì gọi `toneBadgeSolid()` một cách tường minh.
+ */
+declare function toneBadge(tone: Tone | string | null | undefined): string;
+/**
+ * Badge severity nền ĐẶC (Critical = `--og-text`, chữ `--og-surface`) — đúng
+ * `.og-badge--solid` của demo. CHỈ dùng cho badge severity đứng một mình ở
+ * nơi cần nhấn mạnh nhất; đừng dùng cho badge có chấm bên trong (chấm sẽ chìm).
+ */
+declare function toneBadgeSolid(tone: Tone | string | null | undefined): string;
+/** Chỉ MÀU của tông, không kèm hình dạng pill — cho ô icon, chip, ô nền. */
+declare function toneTint(tone: Tone | string | null | undefined): string;
+/**
+ * CHỮ theo tông — dùng thành viên dễ đọc nhất của mỗi họ severity, KHÔNG phải
+ * ramp chart (ramp có `warning #f59e0b` chỉ 2.15:1 trên nền trắng). Xem
+ * `.tone-fg-*` trong components.css.
+ */
+declare function toneFg(tone: Tone | string | null | undefined): string;
+/**
+ * Tông THANG ĐO — cho filter chip severity. Critical ra ĐỎ SẪM (nền mềm pha
+ * từ ramp `--og-sev-*`) thay vì pill đen đặc của `toneTint()`: chip filter là
+ * một thang đo, không phải badge severity của một finding. Xem `.tone-scale-*`.
+ */
+declare function toneScale(tone: Tone | string | null | undefined): string;
+/** Viền theo tông — cho panel trạng thái (dropzone upload…). */
+declare function toneBorder(tone: Tone | string | null | undefined): string;
+/**
+ * CHẤM trạng thái trong hàng (`● Confirmed`) — demo dùng màu SEMANTIC
+ * (`.og-statusdot--*`), không phải ramp chart.
+ */
+declare function toneDot(tone: Tone | string | null | undefined): string;
+/**
+ * CHẤM LEGEND của chart — phải TRÙNG màu cung donut nên dùng ramp
+ * `--og-sev-*`. Đừng dùng cho chấm trạng thái trong hàng.
+ */
+declare function toneDotChart(tone: Tone | string | null | undefined): 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
@@ -580,6 +752,25 @@ declare function toneBadge(tone: Tone | null): string;
  */
 declare function toneColor(tone: Tone | null, alpha?: number): string;
 
+/**
+ * Feature gating for the V2 rollout.
+ *
+ * Each app owns its own `environment.features` block, so the flags are passed
+ * in rather than read here — the library has no environment of its own.
+ *
+ *   readonly knowledge = featureEnabled(environment.features, 'knowledge');
+ *
+ * Why a helper instead of `environment.features?.x`: call sites were drifting
+ * between truthy checks and `=== true`, some behind an `as any` cast that hides
+ * a typo in the flag name. One function keeps the semantics identical
+ * everywhere — a flag counts as on only when it is exactly `true`, so a missing
+ * block, a missing key or a stale string value all read as off.
+ */
+type FxFeatureFlags = Record<string, boolean | undefined> | undefined | null;
+declare function featureEnabled(flags: FxFeatureFlags, name: string): boolean;
+/** Convenience for templates that gate on several flags at once. */
+declare function anyFeatureEnabled(flags: FxFeatureFlags, ...names: string[]): boolean;
+
 declare class FxValidators {
     /**
      * Name fields: firstName, lastName, groupName, projectName, displayName
@@ -741,18 +932,54 @@ declare class BreadcrumbService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<BreadcrumbService>;
 }
 
+/** The six OgeniumDashboards themes. */
+type OgTheme = 'porcelain' | 'charcoal' | 'ivory' | 'studio' | 'blueprint' | 'terminal';
+declare const OG_THEMES: readonly OgTheme[];
+declare const OG_LIGHT_THEMES: readonly OgTheme[];
+/** Display metadata for theme pickers — accent/page swatches are brand constants. */
+interface OgThemeMeta {
+    name: OgTheme;
+    label: string;
+    accent: string;
+    pageBg: string;
+    dark: boolean;
+}
+declare const OG_THEME_META: readonly OgThemeMeta[];
+/**
+ * Theme NGƯỜI DÙNG được chọn (anh Tú chốt 31/08): chỉ còn một cặp
+ * light/dark. Bốn theme còn lại vẫn tồn tại đầy đủ trong theme.css và
+ * setTheme() vẫn nhận — chúng dùng cho trang /themes của demo và cho
+ * harness screenshot chạy ma trận 6 theme; chỉ **giấu khỏi picker**.
+ * Muốn mở lại: thêm tên vào mảng này, không phải dựng lại token.
+ */
+declare const OG_PICKER_THEMES: readonly OgTheme[];
+/** OG_THEME_META đã lọc theo OG_PICKER_THEMES — nguồn duy nhất cho mọi picker. */
+declare const OG_PICKER_THEME_META: readonly OgThemeMeta[];
+/**
+ * V2 theme switching: one `data-og-theme` attribute on <html> selects the
+ * --og-* token block (theme.css). During the migration window the service
+ * also mirrors the legacy `light_theme` class on <body> so remotes built
+ * against the pre-V2 stylesheet keep resolving the correct palette
+ * (see the SKEW SHIELD note in theme.css).
+ */
 declare class ThemeService {
     private renderer;
     private lightClass;
     private theme$;
     themeStorageKey: string;
     constructor(rendererFactory: RendererFactory2);
+    /** Primary API: activate one of the six V2 themes. */
+    setTheme(theme: OgTheme): void;
+    themeChanges(): Observable<OgTheme>;
+    getCurrentTheme(): OgTheme;
+    isLight(): boolean;
+    /** @deprecated V2: use setTheme(). Maps light→porcelain, dark→charcoal. */
     setLightMode(enable: boolean): void;
+    /** @deprecated V2: use setTheme(). Flips between the two default themes. */
     toggleTheme(): void;
-    themeChanges(): rxjs.Observable<"light" | "dark">;
-    getCurrentTheme(): 'light' | 'dark';
-    isLight(): boolean;
     getLogoPath(): string;
+    private isLightTheme;
+    private readSavedTheme;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
 }
@@ -977,7 +1204,7 @@ declare class DndUploadComponent {
 declare class ButtonComponent {
     label: string;
     readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly buttonVariant: _angular_core.InputSignal<"default" | "success" | "primary" | "alternative">;
+    readonly buttonVariant: _angular_core.InputSignal<"default" | "success" | "primary" | "cta" | "alternative">;
     icon?: any;
     readonly class: _angular_core.InputSignal<any>;
     readonly loading: _angular_core.InputSignal<boolean>;
@@ -1059,6 +1286,9 @@ declare class LoadingPanel {
 
 declare class SearchBarComponent extends FxComponent<string> implements AfterViewInit {
     private ref;
+    /** FxComponent leaves `value` undefined; without ngModel the input would
+        render the literal string "undefined". */
+    value: string;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly search: _angular_core.OutputEmitterRef<string>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
@@ -1072,21 +1302,58 @@ declare class SearchBarComponent extends FxComponent<string> implements AfterVie
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchBarComponent, "fx-ui-search-bar", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "search": "search"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
+/**
+ * Một tab của `fx-ui-tab-group`.
+ *
+ * ⚠️ Nội dung tab PHẢI bọc trong `<ng-template>`:
+ *
+ * ```html
+ * <fx-ui-tab [label]="'Components'">
+ *   <ng-template>
+ *     <app-info-components … />
+ *   </ng-template>
+ * </fx-ui-tab>
+ * ```
+ *
+ * Vì sao bắt buộc: trước đây tab dùng `<ng-content>` bọc trong `<ng-template>`
+ * của CHÍNH nó. Cách đó **không hoãn được gì** — `<ng-content>` chỉ CHIẾU node,
+ * còn node do view khai báo (component cha) tạo **eager**. Kết quả: mọi tab đều
+ * khởi tạo và gọi API ngay khi vào màn, dù người dùng chưa mở (đo được trên
+ * scan-info: cả 8 cụm cùng fetch). Nhận `TemplateRef` từ cha thì nội dung chỉ
+ * được dựng khi tab-group stamp template đó.
+ *
+ * Hệ quả cần biết: đổi tab sẽ **huỷ** nội dung tab cũ và dựng lại khi quay lại
+ * — đúng bản chất lazy, giống `matTabContent` của Material.
+ *
+ * `descendants: false` để chỉ bắt `<ng-template>` là con TRỰC TIẾP, tránh nuốt
+ * nhầm template lồng sâu bên trong nội dung tab.
+ */
 declare class TabComponent {
     readonly label: _angular_core.InputSignal<string>;
     icon?: string;
+    /** Trailing count badge (V2 'page' variant); null/undefined hides it. */
+    readonly count: _angular_core.InputSignal<number | null>;
+    /** Tints the count badge (e.g. vulnerabilities tab shows a danger count). */
+    readonly tone: _angular_core.InputSignal<Tone | null>;
     readonly content: _angular_core.Signal<TemplateRef<any>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "fx-ui-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "fx-ui-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, ["content"], never, true, never>;
 }
 
-declare class TabGroupComponent implements AfterContentInit {
+declare class TabGroupComponent implements AfterContentInit, AfterViewChecked, OnChanges {
     private renderer;
     private cdr;
     readonly tabs: _angular_core.Signal<readonly TabComponent[]>;
     activeIndex: number;
+    /** Emitted on user selection — enables [(activeIndex)] two-way binding. */
+    readonly activeIndexChange: _angular_core.OutputEmitterRef<number>;
+    /** 'page' = the V2 workspace tab strip (larger hit area, count badges). */
+    readonly variant: _angular_core.InputSignal<"default" | "page">;
     readonly tabListRef: _angular_core.Signal<ElementRef<HTMLElement>>;
-    readonly underlineRef: _angular_core.Signal<ElementRef<HTMLElement>>;
+    readonly underlineRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    readonly pagePillRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Last applied pill geometry — skip DOM writes when nothing moved. */
+    private pillState;
     canScrollLeft: boolean;
     canScrollRight: boolean;
     private animateDelay;
@@ -1095,8 +1362,19 @@ declare class TabGroupComponent implements AfterContentInit {
     constructor(renderer: Renderer2);
     ngAfterContentInit(): void;
     selectTab(index: number): void;
+    badgeClass(tab: TabComponent): string;
     /** Roving tablist keyboard nav: arrows move AND activate (selection follows focus). */
     onTabKeydown(event: KeyboardEvent, index: number): void;
+    /** Parent-driven activeIndex (deep-link ?tab=, quick-links) must also move the pill. */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Re-measure every view check: catches label-width changes (language switch,
+     * count arriving) with cached geometry so the DOM write only happens when
+     * the pill actually moved.
+     */
+    ngAfterViewChecked(): void;
+    /** Slide the 'page' pill to the active tab (offset* is scroll-content relative). */
+    private updatePagePill;
     private updateUnderlinePosition;
     private scrollToActiveTab;
     scroll(direction: 'left' | 'right'): void;
@@ -1104,7 +1382,7 @@ declare class TabGroupComponent implements AfterContentInit {
     private updateScrollButtons;
     onResize(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabGroupComponent, "fx-ui-tab-group", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; }, {}, ["tabs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabGroupComponent, "fx-ui-tab-group", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "activeIndexChange": "activeIndexChange"; }, ["tabs"], never, true, never>;
 }
 
 /**
@@ -1217,13 +1495,6 @@ declare class SwitchComponent extends FxComponent<any> implements AfterViewInit
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onSwitch": "onSwitch"; }, never, never, true, never>;
 }
 
-declare class SkeletonTableLoadingComponent {
-    readonly columns: _angular_core.InputSignal<number>;
-    readonly rows: _angular_core.InputSignal<number>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonTableLoadingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonTableLoadingComponent, "fx-ui-skeleton-table-loading", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class CircleProgressBar {
     readonly percent: _angular_core.InputSignal<number>;
     readonly showPercent: _angular_core.InputSignal<boolean>;
@@ -1304,6 +1575,8 @@ interface DrawerItem {
     id: string;
     label: string;
     icon: string;
+    /** V2: renders as a non-interactive section caption (flat nav, no accordion). */
+    heading?: boolean;
     route?: string;
     children?: DrawerItem[];
     action?: () => void;
@@ -1313,8 +1586,15 @@ declare class DrawerComponent implements OnInit, OnDestroy {
     private router;
     private cdr;
     readonly items: _angular_core.InputSignal<DrawerItem[]>;
+    /** V2: bottom-pinned section (Administration group) — same item rendering,
+        separated by a rule, above the [drawerFooter] slot and version. */
+    readonly footerItems: _angular_core.InputSignal<DrawerItem[]>;
     isExpanded: boolean;
     logo?: string;
+    /** Wordmark cạnh logo, chỉ hiện khi drawer mở. Bỏ trống = chỉ có mark. */
+    logoText?: string;
+    /** Dòng phụ dưới logoText (tagline/workspace). Chỉ hiện khi drawer mở. */
+    logoSubtext?: string;
     version?: string;
     readonly toggleExpanded: _angular_core.OutputEmitterRef<boolean>;
     readonly itemClicked: _angular_core.OutputEmitterRef<DrawerItem>;
@@ -1334,13 +1614,14 @@ declare class DrawerComponent implements OnInit, OnDestroy {
     getAccordionState(itemId: string): string;
     getDrawerState(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "fx-ui-drawer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "version": { "alias": "version"; "required": false; }; }, { "toggleExpanded": "toggleExpanded"; "itemClicked": "itemClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent, "fx-ui-drawer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "footerItems": { "alias": "footerItems"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "logoText": { "alias": "logoText"; "required": false; }; "logoSubtext": { "alias": "logoSubtext"; "required": false; }; "version": { "alias": "version"; "required": false; }; }, { "toggleExpanded": "toggleExpanded"; "itemClicked": "itemClicked"; }, never, ["[drawerFooter]"], true, never>;
 }
 
 /** Row-card skeleton placeholder for master-detail list panes. */
 declare class SkeletonListComponent {
     readonly rows: _angular_core.InputSignal<number>;
-    range(n: number): number[];
+    /** computed, không phải method: method trả mảng MỚI mỗi lần render. */
+    readonly rowList: _angular_core.Signal<number[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonListComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonListComponent, "fx-ui-skeleton-list", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1351,12 +1632,21 @@ declare class SkeletonDetailComponent {
     readonly cards: _angular_core.InputSignal<number>;
     /** Rows per content card. */
     readonly rows: _angular_core.InputSignal<number>;
-    range(n: number): number[];
+    /** computed, không phải method: method trả mảng MỚI mỗi lần render. */
+    readonly cardList: _angular_core.Signal<number[]>;
+    readonly rowList: _angular_core.Signal<number[]>;
     rowWidth(i: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonDetailComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonDetailComponent, "fx-ui-skeleton-detail", never, { "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface FxStatCardDelta {
+    /** Caller-formatted delta text (e.g. "+12%", "-3"). */
+    value: string;
+    direction: 'up' | 'down';
+    /** Delta colour — up is not always good (findings up = danger). */
+    tone?: Tone | null;
+}
 interface FxStatCard {
     /** Caller-translated caption. */
     label: string;
@@ -1365,17 +1655,33 @@ interface FxStatCard {
     icon?: string;
     /** Colours the number and the icon box; null/undefined renders neutral. */
     tone?: Tone | null;
+    /** V2 StatGrid: trend chip beside the number. */
+    delta?: FxStatCardDelta;
+    /** V2 StatGrid: mini bar-trend under the caption. */
+    spark?: number[];
+    /** variant 'figure': caller-formatted sub-caption under the number ("+1 since 4.8.0"). */
+    sub?: string;
+    /** Colours the sub-caption; null/undefined renders muted. */
+    subTone?: Tone | null;
 }
 /** KPI tile row: big number + tinted icon box + caption, in a responsive grid. */
 declare class StatCardsComponent {
     readonly cards: _angular_core.InputSignal<FxStatCard[]>;
+    /**
+     * 'tile' (default): tinted icon box + number + caption — the pre-V2 look.
+     * 'figure': the V2 design's KPI column — caption on top, large figure-font
+     * number, toned sub-caption underneath (no icon box).
+     */
+    readonly variant: _angular_core.InputSignal<"figure" | "tile">;
     /** Grid columns; defaults to one column per card. */
     cols?: number;
     get gridColumns(): string;
     numClass(card: FxStatCard): string;
     boxClass(card: FxStatCard): string;
+    deltaClass(card: FxStatCard): string;
+    subClass(card: FxStatCard): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCardsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCardsComponent, "fx-ui-stat-cards", never, { "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCardsComponent, "fx-ui-stat-cards", never, { "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /** Centered "no data" block. The message is caller-translated (no i18n in lib). */
@@ -1412,6 +1718,106 @@ declare class FilterChipsComponent {
     static ɵcmp: _angular_core.ɵɵ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, true, never>;
 }
 
+interface FxFilterPillOption {
+    /** '' (empty) is the conventional "All" pill. */
+    value: string;
+    /** Caller-translated label. */
+    label: string;
+    /** Shown muted beside the label; null/undefined renders no count. */
+    count?: number | null;
+}
+/**
+ * V2 filter pills — the quick-filter row above ranked lists (design refs 02,
+ * 03, 11): outlined capsules with a muted count, the active one filled with
+ * the primary text colour.
+ *
+ * Distinct from `fx-ui-filter-chips`, which tints each chip by its severity
+ * tone and carries no count. Presentational: the caller owns the filter state.
+ *
+ *   <fx-ui-filter-pills [options]="pills" [value]="filters.status"
+ *                       (valueChange)="filters.status = $event; refresh()" />
+ */
+declare class FilterPillsComponent {
+    readonly options: _angular_core.InputSignal<FxFilterPillOption[]>;
+    /** Accepts undefined so screens can bind an optional filter-bag key. */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    isActive(option: FxFilterPillOption): boolean;
+    /**
+     * Pill ĐANG CHỌN dùng **accent** (xanh), không phải nền đen — khớp demo:
+     * design ref 11 vẽ pill "All 40" là pill accent. Nền đen `--og-text` chỉ
+     * dành cho badge severity Critical (`.og-badge--solid`), không dùng cho
+     * trạng thái chọn của filter (anh Tú chốt 03/09).
+     */
+    pillClass(option: FxFilterPillOption): string;
+    countClass(option: FxFilterPillOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterPillsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterPillsComponent, "fx-ui-filter-pills", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * V2 stage progress dots — the walkthrough position indicator on the attack
+ * chain toolbar (design refs 04, 07): one dot per stage, the current one drawn
+ * as a wider accent bar, visited ones solid, the rest faint.
+ *
+ *   <fx-ui-stage-dots [count]="8" [current]="stageIndex()"
+ *                     (dotClick)="goToStage($event)" />
+ */
+declare class StageDotsComponent {
+    readonly count: _angular_core.InputSignal<number>;
+    /** 0-based current stage; -1 (default) means none selected yet. */
+    readonly current: _angular_core.InputSignal<number>;
+    /** Emit the clicked stage index; wire it to make the dots navigable. */
+    readonly dotClick: _angular_core.OutputEmitterRef<number>;
+    readonly dots: _angular_core.Signal<number[]>;
+    dotClass(index: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StageDotsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StageDotsComponent, "fx-ui-stage-dots", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, { "dotClick": "dotClick"; }, never, never, true, never>;
+}
+
+/**
+ * V2 evidence code block — the mono panel that carries a process tree, a
+ * command line or any captured text (design ref 05, "Process tree").
+ *
+ * Whitespace is preserved and the box scrolls on its own rather than pushing
+ * the page wide, so ASCII trees survive narrow viewports.
+ *
+ *   <fx-ui-code-block [label]="'analyze.processTree' | translate" [code]="tree" />
+ */
+declare class CodeBlockComponent {
+    readonly code: _angular_core.InputSignal<string>;
+    /** Caller-translated caption above the box; omit for a bare block. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Scroll cap; empty grows with the content. */
+    readonly maxHeight: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeBlockComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeBlockComponent, "fx-ui-code-block", never, { "code": { "alias": "code"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * V2 captured-evidence frame — a faux window chrome (traffic lights + mono file
+ * name + timestamp) around a screenshot, with a placeholder when the image is
+ * missing (design ref 05, "Screenshot").
+ *
+ *   <fx-ui-screenshot-frame [label]="'analyze.screenshot' | translate"
+ *                           fileName="chain-05.png" timestamp="09:42:18"
+ *                           [src]="url" [caption]="caption" />
+ */
+declare class ScreenshotFrameComponent {
+    /** Caller-translated caption above the frame; omit for a bare frame. */
+    readonly label: _angular_core.InputSignal<string>;
+    readonly fileName: _angular_core.InputSignal<string>;
+    readonly timestamp: _angular_core.InputSignal<string>;
+    /** Image URL; empty renders the placeholder body. */
+    readonly src: _angular_core.InputSignal<string>;
+    /** Caller-translated line under (or inside) the frame. */
+    readonly caption: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly height: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScreenshotFrameComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScreenshotFrameComponent, "fx-ui-screenshot-frame", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /** Thin tone-coloured progress/score bar with optional label and caption. */
 declare class MeterComponent {
     value: number;
@@ -1426,16 +1832,24 @@ declare class MeterComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MeterComponent, "fx-ui-meter", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-/** Detail-panel section: card with an icon + heading header and projected body. */
+/**
+ * Panel section: card with a header and projected body.
+ *  - titleStyle 'heading' (default): icon + heading, the pre-V2 look
+ *  - titleStyle 'eyebrow': the V2 design's panel header — small tracked
+ *    caption on the left, muted [aside] text on the right
+ */
 declare class SectionCardComponent {
     /** Caller-translated heading. */
     readonly title: _angular_core.InputSignal<string>;
     /** hero-icon name; omitted → text-only header. */
     icon?: any;
     readonly iconTone: _angular_core.InputSignal<Tone | null>;
+    readonly titleStyle: _angular_core.InputSignal<"heading" | "eyebrow">;
+    /** Caller-translated right-aligned hint (eyebrow style). */
+    readonly aside: _angular_core.InputSignal<string>;
     get iconClass(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionCardComponent, "fx-ui-section-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; }; "iconTone": { "alias": "iconTone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionCardComponent, "fx-ui-section-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; }; "iconTone": { "alias": "iconTone"; "required": false; "isSignal": true; }; "titleStyle": { "alias": "titleStyle"; "required": false; "isSignal": true; }; "aside": { "alias": "aside"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -1490,11 +1904,13 @@ declare class SeverityBadgesComponent {
 }
 
 /**
- * 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:
+ * Master-detail shell driven by a BaseMasterDetailComponent. Two-column by
+ * default; projecting a [mdFacets] block (V2 lookup screens) adds a third
+ * facets-rail column before the list. 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 mdFacets>…<fx-ui-facets-rail …/>…</div>   <!-- optional, V2 -->
  *     <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>
@@ -1504,26 +1920,45 @@ declare class SeverityBadgesComponent {
  * 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 {
+declare class MasterDetailComponent implements AfterViewInit, AfterContentInit {
+    private hostEl;
+    /** True when the host projected a [mdFacets] block — switches to 3 columns. */
+    hasFacets: boolean;
     table: BaseMasterDetailComponent<any>;
     /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
     readonly listWidth: _angular_core.InputSignal<string>;
-    readonly maxListHeight: _angular_core.InputSignal<string>;
+    /**
+     * Chiều cao CHUNG của cả ba cụm (facets / list / detail). Mặc định trừ phần
+     * chrome phía trên (topbar + tab strip + context line) khỏi viewport để
+     * bảng ba cột vừa đúng một màn, không kéo trang cuộn theo.
+     * Chỉ có tác dụng từ 1080px — xem `.fx-md-row` trong CSS.
+     */
+    readonly paneHeight: _angular_core.InputSignal<string>;
     readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
     /** Labels come in via inputs — the lib carries no i18n. */
     readonly emptyMessage: _angular_core.InputSignal<string>;
     readonly listLabel: _angular_core.InputSignal<string>;
     readonly skeletonCards: _angular_core.InputSignal<number>;
+    /** 'prevnext' renders the V2 "X of Y" + Prev/Next controls instead of the
+        Material paginator (which stays in the DOM, hidden — it is the paging
+        engine BaseTable subscribes to). */
+    readonly paginationStyle: _angular_core.InputSignal<"paginator" | "prevnext">;
+    /** Caller-translated Prev/Next labels ("X of Y" is numeric). */
+    readonly prevLabel: _angular_core.InputSignal<string>;
+    readonly nextLabel: _angular_core.InputSignal<string>;
     readonly rowTemplate: _angular_core.Signal<TemplateRef<any>>;
     readonly detailTemplate: _angular_core.Signal<TemplateRef<any>>;
     readonly paginator: _angular_core.Signal<MatPaginator>;
     readonly uid: string;
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
+    /** "X of Y" range text for the prevnext pagination style. */
+    rangeText(): string;
     isSelected(row: any): boolean;
     optionId(index: number): string;
     onKeydown(event: KeyboardEvent, index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MasterDetailComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "maxListHeight": { "alias": "maxListHeight"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; "isSignal": true; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdHeader]", "[mdFilters]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "paneHeight": { "alias": "paneHeight"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; "isSignal": true; }; "paginationStyle": { "alias": "paginationStyle"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdFacets]", "[mdHeader]", "[mdFilters]"], true, never>;
 }
 
 interface FxMenuItem {
@@ -1557,6 +1992,432 @@ declare class MenuComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "fx-ui-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, ["*"], true, never>;
 }
 
+/**
+ * V2 theme picker — dropdown các theme OgeniumDashboards cho chọn
+ * (OG_PICKER_THEME_META: porcelain/charcoal), mỗi dòng có swatch accent +
+ * page. Drives ThemeService.setTheme(); replaces the pre-V2 sun/moon toggle
+ * (behavior-layer rule: mat-menu stays inside the lib, apps never import
+ * @angular/material directly).
+ *
+ *   <fx-ui-theme-picker />
+ */
+declare class ThemePickerComponent {
+    private themeService;
+    readonly themes: readonly OgThemeMeta[];
+    readonly current: _angular_core.Signal<OgTheme>;
+    /** Tra trên bộ ĐẦY ĐỦ: theme đang active có thể là một trong 4 theme đã ẩn
+        khỏi picker (deep-link /themes, localStorage cũ) — nhãn vẫn phải đúng. */
+    currentMeta(): OgThemeMeta;
+    select(theme: OgTheme): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemePickerComponent, "fx-ui-theme-picker", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * "Waiting on the backend" marker (anh Tú 29/08).
+ *
+ * Put this on any UI the V2 design calls for but no endpoint feeds yet, so the
+ * gap is visible in the product instead of living only in a backlog file.
+ * `grep -r "fx-ui-pending-badge"` then lists every outstanding field.
+ *
+ *   <fx-ui-pending-badge [field]="'confirmed-chains weekly series'" />
+ *
+ * Keep the copy factual: it states that data is missing, never fakes a value.
+ */
+declare class PendingBadgeComponent {
+    /** Caller-translated chip text. */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * What exactly is missing — shown as the title tooltip so a reviewer can read
+     * the required field without opening the code.
+     */
+    readonly field: _angular_core.InputSignal<string>;
+    /** 'chip' (default) sits inline; 'dot' is a bare marker for dense rows. */
+    readonly variant: _angular_core.InputSignal<"chip" | "dot">;
+    get tooltip(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PendingBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PendingBadgeComponent, "fx-ui-pending-badge", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Wraps UI that is rendered from PLACEHOLDER data so the layout can be
+ * reviewed before its endpoint exists (anh Tú 29/08: "muốn có full giao diện
+ * trước để review").
+ *
+ * The frame makes the status unmistakable — dashed outline, a corner label and
+ * the pending marker naming the missing field — so sample shapes can never be
+ * mistaken for measured values. Drop the wrapper (and the sample input) the
+ * moment the API lands.
+ *
+ * The pending chip is inlined rather than composed from fx-ui-pending-badge:
+ * one lib component importing another inside the same barrel tripped NG0919
+ * (metadata read before definition) in consuming apps.
+ *
+ *   <fx-ui-sample-frame [field]="'weekly activity'" [label]="'Sample layout'">
+ *     …chart rendered from sample series…
+ *   </fx-ui-sample-frame>
+ */
+declare class SampleFrameComponent {
+    /** Caller-translated corner label. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Field the backend still owes — shown on the pending badge tooltip. */
+    readonly field: _angular_core.InputSignal<string>;
+    /** Caller-translated pending-chip text. */
+    readonly pendingLabel: _angular_core.InputSignal<string>;
+    get tooltip(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SampleFrameComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SampleFrameComponent, "fx-ui-sample-frame", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * V2 score badge — the risk/score chip used on attack-path rows, dashboard
+ * panels and project tiles. Colour comes from the 0–100 risk band unless an
+ * explicit tone is given (bands: ≥90 critical, ≥70 danger, ≥40 warning, else
+ * success — same thresholds as value-tone's scoreTone on a 0–100 scale).
+ */
+declare class ScoreBadgeComponent {
+    readonly score: _angular_core.InputSignal<string | number>;
+    /** Denominator shown as "98 / 100"; omit for a bare score. */
+    readonly outOf: _angular_core.InputSignal<number | null>;
+    /** Overrides the band-derived tone. */
+    readonly tone: _angular_core.InputSignal<Tone | null>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly resolvedTone: _angular_core.Signal<Tone | null>;
+    badgeClass(): string;
+    sizeClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScoreBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScoreBadgeComponent, "fx-ui-score-badge", never, { "score": { "alias": "score"; "required": true; "isSignal": true; }; "outOf": { "alias": "outOf"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * V2 StatusDot — tiny tone-coloured indicator used in list rows, project
+ * cards and stat grids. Optional pulse for "live" states (running scans).
+ *
+ *   <fx-ui-status-dot tone="success" />
+ *   <fx-ui-status-dot tone="warning" [pulse]="true" />
+ */
+declare class StatusDotComponent {
+    readonly tone: _angular_core.InputSignal<Tone | null>;
+    /** Diameter in px. */
+    readonly size: _angular_core.InputSignal<number>;
+    readonly pulse: _angular_core.InputSignal<boolean>;
+    dotClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusDotComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusDotComponent, "fx-ui-status-dot", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * V2 sparkbar — inline mini bar-trend (risk trend on project cards, deltas in
+ * stat grids). Pure DOM, token-coloured; no chart engine.
+ *
+ *   <fx-ui-sparkbar [values]="[3, 5, 2, 8, 6]" />
+ */
+declare class SparkbarComponent {
+    readonly values: _angular_core.InputSignal<number[]>;
+    /** Bar colour; null renders the accent. */
+    readonly tone: _angular_core.InputSignal<Tone | null>;
+    readonly height: _angular_core.InputSignal<number>;
+    readonly bars: _angular_core.Signal<number[]>;
+    barClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SparkbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SparkbarComponent, "fx-ui-sparkbar", never, { "values": { "alias": "values"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface FxSegmentedOption {
+    value: string | number;
+    /** Caller-translated label. */
+    label: string;
+    /** Optional hero-icon before the label. */
+    icon?: string;
+    /** Optional trailing count chip. */
+    count?: number;
+    disabled?: boolean;
+}
+/**
+ * V2 segmented control — mode toggles (Essentials/Advanced), Catalog/Table
+ * view switches, sub-navigation inside a tab. Generic n-option control; the
+ * semantics live with the caller.
+ *
+ * Rendered as a compact pill group (anh Tú 29/08): equal-width options inside
+ * a rounded-full track, with a single "thumb" that SLIDES to the active
+ * option (transform transition — no per-button background repaint).
+ *
+ *   <fx-ui-segmented [options]="modes" [(value)]="mode" />
+ */
+declare class SegmentedComponent {
+    readonly options: _angular_core.InputSignal<FxSegmentedOption[]>;
+    readonly value: _angular_core.ModelSignal<string | number | null>;
+    /** Accessible name for the group. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Both variants share the pill shape; they differ in the thumb fill:
+     * 'default': raised surface thumb — view switches (Catalog/Table, ref 10).
+     * 'pill': accent-filled thumb — the Essential/Advanced depth toggle
+     * (design refs 04/05).
+     */
+    readonly variant: _angular_core.InputSignal<"default" | "pill">;
+    /** Index the sliding thumb sits on; -1 hides it (no/unknown selection). */
+    readonly activeIndex: _angular_core.Signal<number>;
+    /** Equal-width tracks → the thumb is 1/n of the inner width and slides by
+     *  multiples of its own width. Pure CSS transform, nothing to measure. */
+    readonly thumbWidth: _angular_core.Signal<string>;
+    readonly thumbTransform: _angular_core.Signal<string>;
+    select(option: FxSegmentedOption): void;
+    thumbClass(): string;
+    optionClass(option: FxSegmentedOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent, "fx-ui-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+interface FxListRowBadge {
+    /** Caller-translated label. */
+    label: string;
+    tone?: Tone | null;
+}
+/**
+ * V2 ListRow — presentational body for master-detail #row templates and other
+ * selectable lists: status dot + title, trailing badges, meta line. Extra
+ * content projects below the meta line.
+ *
+ *   <ng-template #row let-item>
+ *     <fx-ui-list-row
+ *       [title]="item.name"
+ *       [meta]="item.version + ' · ' + item.date"
+ *       [dotTone]="statusTone(item)"
+ *       [badges]="[{ label: item.severity, tone: severityTone(item.severity) }]"
+ *     />
+ *   </ng-template>
+ */
+declare class ListRowComponent {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly meta: _angular_core.InputSignal<string>;
+    readonly badges: _angular_core.InputSignal<FxListRowBadge[]>;
+    readonly dotTone: _angular_core.InputSignal<Tone | null | undefined>;
+    readonly dotPulse: _angular_core.InputSignal<boolean>;
+    badgeClass(badge: FxListRowBadge): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListRowComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListRowComponent, "fx-ui-list-row", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "badges": { "alias": "badges"; "required": false; "isSignal": true; }; "dotTone": { "alias": "dotTone"; "required": false; "isSignal": true; }; "dotPulse": { "alias": "dotPulse"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface FxBarListItem {
+    /** Caller-translated label. */
+    label: string;
+    value: number;
+    /** Shown instead of the raw value (e.g. "9.8", "82%"). */
+    valueLabel?: string;
+    /** Bar colour; null/undefined renders the accent. */
+    tone?: Tone | null;
+    /** Secondary line under the label. */
+    meta?: string;
+    /** Free-form identifier handed back on (select). */
+    data?: any;
+}
+/**
+ * V2 BarList — ranked horizontal bars ("Top projects by risk", "Top critical
+ * attack paths"). Pure DOM (accessible, token-native, clickable) — charts via
+ * ECharts are for time series, not rankings.
+ *
+ *   <fx-ui-bar-list [items]="topRisk" (select)="open($event)" />
+ */
+declare class BarListComponent {
+    readonly items: _angular_core.InputSignal<FxBarListItem[]>;
+    /** Rows render as buttons only when true (a (select) listener exists). */
+    readonly interactive: _angular_core.InputSignal<boolean>;
+    readonly select: _angular_core.OutputEmitterRef<FxBarListItem>;
+    readonly max: _angular_core.Signal<number>;
+    widthOf(item: FxBarListItem): number;
+    barClass(item: FxBarListItem): string;
+    onSelect(item: FxBarListItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarListComponent, "fx-ui-bar-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
+}
+
+interface FxFacetOption {
+    value: string | number;
+    /** Caller-translated label. */
+    label: string;
+    count?: number;
+    /** Optional tone dot before the label (severity facets). */
+    tone?: Tone | null;
+}
+interface FxFacetGroup {
+    id: string;
+    /** Caller-translated group heading. */
+    label: string;
+    /** Multi-select (checkbox semantics); default single-select toggle. */
+    multi?: boolean;
+    options: FxFacetOption[];
+}
+type FxFacetSelection = Record<string, (string | number)[]>;
+/**
+ * V2 facets rail — the first column of 3-column lookup screens: filter groups
+ * with counts + a Reset link. Presentational: filtering itself stays in the
+ * page (feed the emitted selection into BaseMasterDetail filters).
+ *
+ *   <div mdFacets>
+ *     <fx-ui-facets-rail [groups]="facetGroups" [selection]="facets"
+ *                        (selectionChange)="onFacets($event)" />
+ *   </div>
+ */
+declare class FacetsRailComponent {
+    readonly groups: _angular_core.InputSignal<FxFacetGroup[]>;
+    readonly selection: _angular_core.InputSignal<FxFacetSelection>;
+    /** Caller-translated label for the reset affordance. */
+    readonly resetLabel: _angular_core.InputSignal<string>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<FxFacetSelection>;
+    readonly hasSelection: _angular_core.Signal<boolean>;
+    isSelected(group: FxFacetGroup, option: FxFacetOption): boolean;
+    toggle(group: FxFacetGroup, option: FxFacetOption): void;
+    reset(): void;
+    toneClass(option: FxFacetOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FacetsRailComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FacetsRailComponent, "fx-ui-facets-rail", never, { "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+interface FxProjectCardChip {
+    /** Caller-translated label. */
+    label: string;
+    tone?: Tone | null;
+}
+interface FxProjectCardMetric {
+    /** Caller-formatted figure ("128", "--"). */
+    value: string | number;
+    /** Caller-translated caption under the figure. */
+    label: string;
+}
+interface FxProjectCard {
+    name: string;
+    description?: string;
+    /** 1–2 char initials rendered in an accent-soft square (design 12). */
+    avatar?: string;
+    /** Small line under the name (schedule / scope) with an optional hero-icon. */
+    sub?: {
+        icon?: string;
+        label: string;
+    };
+    /** Score chip top-right ("High · 82"); rendered as a toned pill. */
+    score?: string | number;
+    scoreTone?: Tone | null;
+    /** Caption under the score chip (kept for pre-V2 callers). */
+    scoreLabel?: string;
+    /** Risk-trend sparkbar values (pre-V2 look; prefer `trend`). */
+    spark?: number[];
+    /**
+     * Design-12 risk trend: one toned block per period, oldest first, with a
+     * caption line underneath ("risk trend" · "128 analyses").
+     */
+    trend?: {
+        tones: (Tone | null)[];
+        caption?: string;
+        aside?: string;
+    };
+    chips?: FxProjectCardChip[];
+    /** Metric columns (Binaries · Findings · …): figure + caption. */
+    metrics?: FxProjectCardMetric[];
+    /** Footer meta line (e.g. "Last analysis · 2d ago"). */
+    meta?: string;
+    /** Footer link label right of the meta ("Open ›"); the whole card emits (open). */
+    openLabel?: string;
+    /** Free-form identifier handed back on (open). */
+    data?: any;
+}
+/**
+ * V2 project card — the Project Management catalog tile (design 12): initials
+ * avatar + name + schedule line, toned score chip, risk-trend blocks, metric
+ * columns and a "Last analysis · … / Open ›" footer.
+ *
+ *   <fx-ui-project-card [card]="project" (open)="goTo(project)" />
+ */
+declare class ProjectCardComponent {
+    readonly card: _angular_core.InputSignal<FxProjectCard>;
+    readonly open: _angular_core.OutputEmitterRef<FxProjectCard>;
+    scoreChipClass(): string;
+    chipClass(chip: FxProjectCardChip): string;
+    blockClass(tone: Tone | null): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProjectCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProjectCardComponent, "fx-ui-project-card", never, { "card": { "alias": "card"; "required": true; "isSignal": true; }; }, { "open": "open"; }, never, never, true, never>;
+}
+
+type FxPipelineStageState = 'pending' | 'active' | 'done' | 'error';
+interface FxPipelineStage {
+    id: string;
+    /** Caller-translated label. */
+    label: string;
+    state?: FxPipelineStageState;
+    /** Small line under the label (e.g. "optional", a duration). */
+    description?: string;
+}
+/**
+ * V2 pipeline stepper — the New Analysis 7-stage pipeline header. Renders the
+ * stage strip only; the page owns the stage bodies (project the current one
+ * below). Stage states are data — the parent decides what is done/active.
+ *
+ *   <fx-ui-pipeline-stepper [stages]="stages" (stageClick)="goTo($event)">
+ *     …current stage body…
+ *   </fx-ui-pipeline-stepper>
+ */
+declare class PipelineStepperComponent {
+    readonly stages: _angular_core.InputSignal<FxPipelineStage[]>;
+    /** Only done stages are click-navigable (review a completed step). */
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    readonly stageClick: _angular_core.OutputEmitterRef<number>;
+    stateOf(stage: FxPipelineStage): FxPipelineStageState;
+    circleClass(stage: FxPipelineStage): string;
+    labelClass(stage: FxPipelineStage): string;
+    connectorClass(stage: FxPipelineStage): string;
+    canClick(stage: FxPipelineStage): boolean;
+    onStageClick(stage: FxPipelineStage, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PipelineStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PipelineStepperComponent, "fx-ui-pipeline-stepper", never, { "stages": { "alias": "stages"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "stageClick": "stageClick"; }, never, ["*"], true, never>;
+}
+
+/** Facets-rail skeleton: N nhóm, mỗi nhóm một eyebrow + vài dòng lựa chọn. */
+declare class SkeletonFacetsComponent {
+    readonly groups: _angular_core.InputSignal<number>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly groupList: _angular_core.Signal<number[]>;
+    readonly rowList: _angular_core.Signal<number[]>;
+    rowWidth(i: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonFacetsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonFacetsComponent, "fx-ui-skeleton-facets", never, { "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Dashboard skeleton: một hàng KPI + N panel có vùng chart. */
+declare class SkeletonDashboardComponent {
+    readonly kpis: _angular_core.InputSignal<number>;
+    readonly panels: _angular_core.InputSignal<number>;
+    readonly kpiList: _angular_core.Signal<number[]>;
+    readonly panelList: _angular_core.Signal<number[]>;
+    readonly barList: _angular_core.Signal<number[]>;
+    /** Chiều cao cột giả — dựng hình chart mà không cần dữ liệu. */
+    barHeight(i: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonDashboardComponent, "fx-ui-skeleton-dashboard", never, { "kpis": { "alias": "kpis"; "required": false; "isSignal": true; }; "panels": { "alias": "panels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Skeleton của cả AppFrame (drawer + topbar + vùng nội dung).
+ *
+ * Chỉ dùng cho giai đoạn **bootstrap**, khi shell của host còn CHƯA tồn tại
+ * (App.ngOnInit đang kiểm tenant + session, router chưa initialNavigation).
+ * Mọi điều hướng SAU đó đã có shell thật → dùng `fx-ui-route-skeleton` bên
+ * trong vùng nội dung, đừng vẽ lại cả frame.
+ *
+ * ⚠️ `contentHint` là thứ làm F5 không còn vẽ hình generic. Lần điều hướng ĐẦU
+ * tạo ra chính `HomeComponent` — nơi chứa `fx-ui-route-skeleton` — nên vùng nội
+ * dung không thể tự vẽ skeleton của route ở lần đó. Truyền hint vào đây để
+ * frame dựng đúng composition của màn đích ngay từ F5.
+ */
+declare class SkeletonFrameComponent {
+    readonly navItems: _angular_core.InputSignal<number>;
+    /** Composition của route đích; null thì vẽ khối generic. */
+    readonly contentHint: _angular_core.InputSignal<FxSkeletonHint | FxSkeletonBlock[] | null>;
+    readonly navList: _angular_core.Signal<number[]>;
+    navWidth(i: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonFrameComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonFrameComponent, "fx-ui-skeleton-frame", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "contentHint": { "alias": "contentHint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -1585,9 +2446,9 @@ declare class ConfirmationDialogComponent {
  */
 declare class UiModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<UiModule, never, [typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, 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 SliderComponent, typeof SwitchComponent, typeof SkeletonTableLoadingComponent, 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 MenuComponent, typeof ConfirmationDialogComponent], [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 SliderComponent, typeof SwitchComponent, typeof SkeletonTableLoadingComponent, 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 MenuComponent, typeof ConfirmationDialogComponent, typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<UiModule, never, [typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, 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 SliderComponent, typeof SwitchComponent, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof FilterPillsComponent, typeof StageDotsComponent, typeof CodeBlockComponent, typeof ScreenshotFrameComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof MenuComponent, typeof ThemePickerComponent, typeof PendingBadgeComponent, typeof SampleFrameComponent, typeof ScoreBadgeComponent, typeof StatusDotComponent, typeof SparkbarComponent, typeof SegmentedComponent, typeof ListRowComponent, typeof BarListComponent, typeof FacetsRailComponent, typeof ProjectCardComponent, typeof PipelineStepperComponent, typeof SkeletonFacetsComponent, typeof SkeletonDashboardComponent, typeof SkeletonFrameComponent, typeof RouteSkeletonComponent, typeof ConfirmationDialogComponent], [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 SliderComponent, typeof SwitchComponent, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof FilterPillsComponent, typeof StageDotsComponent, typeof CodeBlockComponent, typeof ScreenshotFrameComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof MenuComponent, typeof ThemePickerComponent, typeof PendingBadgeComponent, typeof SampleFrameComponent, typeof ScoreBadgeComponent, typeof StatusDotComponent, typeof SparkbarComponent, typeof SegmentedComponent, typeof ListRowComponent, typeof BarListComponent, typeof FacetsRailComponent, typeof ProjectCardComponent, typeof PipelineStepperComponent, typeof SkeletonFacetsComponent, typeof SkeletonDashboardComponent, typeof SkeletonFrameComponent, typeof RouteSkeletonComponent, typeof ConfirmationDialogComponent, typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<UiModule>;
 }
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FilterChipsComponent, FxComponent, FxDialogService, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MasterDetailComponent, MenuComponent, MeterComponent, NotificationService, PermissionGuard, PermissionService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, 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, ErrorMessages, FxApiClass, FxConfirmOptions, FxFilterChipOption, FxListRequest, FxListResolverContext, FxMenuItem, FxSeverityBadge, FxStatCard, FxTableFilters, IRadioButton, KanbanColumn, NotificationCallback, NotificationConnectOptions, RealtimeTableEvent, RealtimeTableSyncOptions, TableResult, TagType, ToastData, Tone, TreeNode, UploadResult };
+export { AuthInterceptor, AuthStateService, BarListComponent, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, CodeBlockComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FX_SKELETON_DATA_KEY, FacetsRailComponent, FilterChipsComponent, FilterPillsComponent, FxComponent, FxDialogService, FxLoadingService, FxRouteSkeletonService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, ListRowComponent, LoadingPanel, MasterDetailComponent, MenuComponent, MeterComponent, NotificationService, OG_LIGHT_THEMES, OG_PICKER_THEMES, OG_PICKER_THEME_META, OG_THEMES, OG_THEME_META, PendingBadgeComponent, PermissionGuard, PermissionService, PipelineStepperComponent, ProjectCardComponent, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RouteSkeletonComponent, SampleFrameComponent, ScoreBadgeComponent, ScreenshotFrameComponent, SearchBarComponent, SectionCardComponent, SegmentedComponent, SelectComponent, SeverityBadgesComponent, SkeletonDashboardComponent, SkeletonDetailComponent, SkeletonFacetsComponent, SkeletonFrameComponent, SkeletonListComponent, SliderComponent, SparkbarComponent, StageDotsComponent, StatCardsComponent, StatusDotComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemePickerComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, anyFeatureEnabled, countTone, createApi, featureEnabled, fxListResolver, scoreTone, severityTone, toneBadge, toneBadgeSolid, toneBg, toneBorder, toneColor, toneDot, toneDotChart, toneFg, toneScale, toneText, toneTint };
+export type { Breadcrumb, ColumnChangedEvent, DrawerItem, ErrorMessages, FxApiClass, FxBarListItem, FxConfirmOptions, FxFacetGroup, FxFacetOption, FxFacetSelection, FxFeatureFlags, FxFilterChipOption, FxFilterPillOption, FxListRequest, FxListResolverContext, FxListRowBadge, FxMenuItem, FxPipelineStage, FxPipelineStageState, FxProjectCard, FxProjectCardChip, FxProjectCardMetric, FxSegmentedOption, FxSeverityBadge, FxSkeletonBlock, FxSkeletonBlockKind, FxSkeletonBlockSpec, FxSkeletonHint, FxStatCard, FxStatCardDelta, FxTableFilters, IRadioButton, KanbanColumn, NotificationCallback, NotificationConnectOptions, OgTheme, OgThemeMeta, RealtimeTableEvent, RealtimeTableSyncOptions, TableResult, TagType, ToastData, Tone, TreeNode, UploadResult };