@foxeltech/angular-ui 0.4.0 → 0.7.44

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';
@@ -509,6 +509,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. */
@@ -580,6 +588,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 +768,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>;
 }
@@ -1059,6 +1122,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>;
@@ -1075,18 +1141,29 @@ declare class SearchBarComponent extends FxComponent<string> implements AfterVie
 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; }; }, {}, 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 +1172,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 +1192,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>;
 }
 
 /**
@@ -1304,6 +1392,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 +1403,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,7 +1431,7 @@ 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. */
@@ -1357,6 +1454,13 @@ declare class SkeletonDetailComponent {
     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 +1469,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 +1532,100 @@ 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;
+    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 +1640,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 +1712,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,7 +1728,10 @@ 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>;
@@ -1514,16 +1741,26 @@ declare class MasterDetailComponent implements AfterViewInit {
     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; }; "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; }; "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 +1794,385 @@ 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>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -1585,9 +2201,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 SkeletonTableLoadingComponent, 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 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 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 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, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, CodeBlockComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FacetsRailComponent, FilterChipsComponent, FilterPillsComponent, FxComponent, FxDialogService, FxLoadingService, 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, SampleFrameComponent, ScoreBadgeComponent, ScreenshotFrameComponent, SearchBarComponent, SectionCardComponent, SegmentedComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, 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, toneBg, toneColor, toneText };
+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, FxStatCard, FxStatCardDelta, FxTableFilters, IRadioButton, KanbanColumn, NotificationCallback, NotificationConnectOptions, OgTheme, OgThemeMeta, RealtimeTableEvent, RealtimeTableSyncOptions, TableResult, TagType, ToastData, Tone, TreeNode, UploadResult };