@foxeltech/angular-ui 0.7.75 → 0.7.101

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

@@ -60,6 +60,54 @@ declare class HttpWrapper {
     disable(params: any): Promise<any>;
 }
 
+interface FxLoadJob {
+    id: number;
+    /** Short caller-supplied label — "summary", "history", "projects". */
+    label: string;
+}
+/**
+ * Backend-request bookkeeping behind the topbar load status (design
+ * "Loading States", 04/09): while any tracked request is in flight the shell
+ * shows a spinner + "Loading <label> · k of n" and a thin indeterminate bar;
+ * once the batch settles it shows "● Up to date · just now".
+ *
+ * A batch = every job started while at least one job is still pending. When
+ * the last one settles the batch closes (`lastUpdated` moves) and the next
+ * job opens a fresh count — so "k of n" always reads against the requests of
+ * the current page load, not the session total.
+ *
+ * Wire-ups: `fxListResolver` and `BaseTableComponent.fetch()` track
+ * automatically; screens with their own fetches call `track()`.
+ */
+declare class FxLoadStatusService {
+    private seq;
+    private readonly _pending;
+    private readonly _batchTotal;
+    private readonly _lastUpdated;
+    private readonly _reload;
+    /** Jobs still in flight, oldest first. */
+    readonly pending: _angular_core.Signal<FxLoadJob[]>;
+    /** Requests started in the current batch. */
+    readonly total: _angular_core.Signal<number>;
+    readonly done: _angular_core.Signal<number>;
+    readonly loading: _angular_core.Signal<boolean>;
+    /** Label of the oldest pending request — what the status line names. */
+    readonly current: _angular_core.Signal<string>;
+    /** When the last batch settled; null until the first one does. */
+    readonly lastUpdated: _angular_core.Signal<Date | null>;
+    /** Fired by the topbar ↻ — the shell decides how to re-fetch the route. */
+    readonly reload$: rxjs.Observable<void>;
+    /** Register a request; call the returned function when it settles. */
+    begin(label: string): () => void;
+    /** Track a promise (or a factory producing one) under `label`. */
+    track<T>(label: string, work: Promise<T> | (() => Promise<T>)): Promise<T>;
+    requestReload(): void;
+    /** Short label from a request url: `/TEST1/history` → "history", `/search` → "search". */
+    static labelFromUrl(url: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLoadStatusService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<FxLoadStatusService>;
+}
+
 interface ToastData {
     id: number;
     message: string;
@@ -118,6 +166,8 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     loading: boolean;
     expandedElement: T | null;
     toastr: FxToastrService;
+    /** Topbar load status; optional so hand-rolled test injectors keep working. */
+    protected loadStatus: FxLoadStatusService | null;
     _lock: boolean;
     keywordChange$: Subject<string>;
     dataSourcePlaceholder: any[];
@@ -157,7 +207,22 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
             message?: string;
         };
     };
-    paginator: MatPaginator;
+    /**
+     * The paging engine. Either the page's own <mat-paginator> (found by the
+     * ViewChild query) or one handed in by a child such as fx-ui-master-detail,
+     * whose paginator lives in ITS view where the query cannot see it.
+     *
+     * ⚠️ A plain `@ViewChild` property was clobbered: the query re-runs before
+     * every ngAfterViewInit and, finding nothing, wrote `undefined` over the
+     * instance the child had assigned a moment earlier — so page events were
+     * never subscribed and Prev/Next changed the range text but not the rows
+     * (anh Tú 04/09). The setter attaches on any real assignment and ignores
+     * `undefined`, so whichever side provides the paginator wins.
+     */
+    set paginator(p: MatPaginator | undefined);
+    get paginator(): MatPaginator;
+    private _paginator?;
+    private _pageSub?;
     readonly table: _angular_core.Signal<MatTable<any>>;
     constructor(injector: Injector, api: HttpWrapper, modal: MatDialog, ref: ChangeDetectorRef);
     ngOnInit(): void;
@@ -719,7 +784,23 @@ declare function toneBadge(tone: Tone | string | null | undefined): string;
  * 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. */
+/**
+ * Chỉ MÀU của tông, không kèm hình dạng pill — cho ô icon, chip, ô nền.
+ *
+ * ⚠️ Đây là họ SOLID: `tone-tint-critical` đặt `background: --og-text`
+ * (gần đen) VÀ `color: --og-surface` (trắng) trên CÙNG element.
+ *
+ * Hệ quả bắt buộc nhớ:
+ * 1. Chỉ dùng cho **badge một phần tử**. Với hộp nhiều dòng thì con sẽ cần màu
+ *    chữ riêng, và nếu con ghi đè bằng `toneFg()` (đỏ sẫm) thì thành đỏ sẫm
+ *    trên gần đen — không đọc được. Đã bị đúng vậy ở hộp RISK của
+ *    `info-binary-detail` (anh Tú 03/09).
+ * 2. **KHÔNG** đặt `toneFg()` lên phần tử con của một phần tử đã có
+ *    `toneTint()` — nó phá màu tương phản mà `toneTint` vừa đặt.
+ *
+ * Hộp/khối nhiều dòng thì dùng `toneScale()`: nền nhạt (color-mix 12%) + chữ
+ * đúng tông, con chỉ cần THỪA HƯỞNG.
+ */
 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
@@ -918,10 +999,57 @@ declare class AuthInterceptor implements HttpInterceptor {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AuthInterceptor>;
 }
 
+/** One row of a crumb's switcher panel. */
+interface BreadcrumbOption {
+    label: string;
+    value: string;
+    /** Where picking the row navigates. */
+    url: string;
+    /** Muted trailing text (a risk chip, a date, a status). */
+    meta?: string;
+}
+/**
+ * V2 topbar (design 02/12/13): a crumb that names an entity — the project, the
+ * analysed binary — is a bordered chip with a dropdown to switch to a sibling.
+ * The caller owns the data: `load` runs on open and on every keystroke.
+ */
+interface BreadcrumbSwitcher {
+    /** Panel heading, e.g. "Switch project". */
+    title: string;
+    /** Search box placeholder; omit to render no search box. */
+    filterPlaceholder?: string;
+    /** Value of the option currently in scope — rendered with a check mark. */
+    selected?: string;
+    /** Options for the keyword ('' on open). Caller-translated labels. */
+    load: (keyword: string) => Promise<BreadcrumbOption[]>;
+    /** Copy for an empty result. */
+    emptyLabel?: string;
+    /** Quiet link under the options — "View all projects". */
+    viewAll?: {
+        label: string;
+        url: string;
+    };
+    /** Accent-soft CTA at the bottom — "Create project". */
+    create?: {
+        label: string;
+        url: string;
+    };
+    /** Options render in the mono face (binary identities). */
+    mono?: boolean;
+}
 interface Breadcrumb {
     label: string;
     url?: string;
     code?: string;
+    /**
+     * Heroicon drawn in accent before the label. Setting it (or `switcher`)
+     * turns the crumb into a chip — the design's project / analysis pickers.
+     */
+    icon?: string;
+    /** Mono face for binary identities ("rocketchat.exe · 4.8.1"). */
+    mono?: boolean;
+    /** Dropdown to switch the entity this crumb names. */
+    switcher?: BreadcrumbSwitcher;
 }
 declare class BreadcrumbService {
     private breadcrumbs$;
@@ -1675,6 +1803,11 @@ declare class StatCardsComponent {
     readonly variant: _angular_core.InputSignal<"figure" | "tile">;
     /** Grid columns; defaults to one column per card. */
     cols?: number;
+    /**
+     * Column count for the ≥ md (720px) container. Below that the CSS takes
+     * over (2-up, then 1-up under 360px) — see stat-cards.component.css — so an
+     * explicit `cols` never squeezes four figures into a phone-width row.
+     */
     get gridColumns(): string;
     numClass(card: FxStatCard): string;
     boxClass(card: FxStatCard): string;
@@ -1742,6 +1875,12 @@ declare class FilterPillsComponent {
     /** Accepts undefined so screens can bind an optional filter-bag key. */
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Fill of the ACTIVE pill. 'accent' (default, design 11 vulnerabilities);
+     * 'solid' = `--og-text` on inverse text — the demo's Attack-paths panel on
+     * the Overview tab (design 02 "All paths 164") and Recent analyses (design 13).
+     */
+    readonly tone: _angular_core.InputSignal<"accent" | "solid">;
     isActive(option: FxFilterPillOption): boolean;
     /**
      * Pill ĐANG CHỌN dùng **accent** (xanh), không phải nền đen — khớp demo:
@@ -1752,7 +1891,7 @@ declare class FilterPillsComponent {
     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>;
+    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; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1837,6 +1976,10 @@ declare class MeterComponent {
  *  - 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
+ *
+ * The host is a flex column (not the custom element's inline default) so that
+ * in a CSS grid row every card stretches to the row height and panels line up
+ * (anh Tú 04/09); a footer projected with `mt-auto` sticks to the bottom.
  */
 declare class SectionCardComponent {
     /** Caller-translated heading. */
@@ -1946,19 +2089,33 @@ declare class MasterDetailComponent implements AfterViewInit, AfterContentInit {
     /** Caller-translated Prev/Next labels ("X of Y" is numeric). */
     readonly prevLabel: _angular_core.InputSignal<string>;
     readonly nextLabel: _angular_core.InputSignal<string>;
+    /** "Page 1 of 4" (design 11/14/17) — the two words, caller-translated. */
+    readonly pageLabel: _angular_core.InputSignal<string>;
+    readonly ofLabel: _angular_core.InputSignal<string>;
+    /**
+     * Facets rail open (design 11/14) or collapsed to a 40px strip (design 17).
+     * The user can toggle either way; this only sets the initial state.
+     */
+    readonly facetsOpen: _angular_core.InputSignal<boolean>;
+    /** Caller-translated rail heading ("Scope & facets"). */
+    readonly facetsLabel: _angular_core.InputSignal<string>;
+    readonly expandFacetsLabel: _angular_core.InputSignal<string>;
+    readonly collapseFacetsLabel: _angular_core.InputSignal<string>;
+    /** Current rail state — follows `facetsOpen` until the user toggles. */
+    readonly railOpen: _angular_core.WritableSignal<boolean>;
     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. */
+    /** "Page X of Y" for the prevnext pagination style (design 11/14/17). */
     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; }; "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>;
+    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; }; "pageLabel": { "alias": "pageLabel"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "facetsOpen": { "alias": "facetsOpen"; "required": false; "isSignal": true; }; "facetsLabel": { "alias": "facetsLabel"; "required": false; "isSignal": true; }; "expandFacetsLabel": { "alias": "expandFacetsLabel"; "required": false; "isSignal": true; }; "collapseFacetsLabel": { "alias": "collapseFacetsLabel"; "required": false; "isSignal": true; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdFacets]", "[mdHeader]", "[mdFilters]"], true, never>;
 }
 
 interface FxMenuItem {
@@ -2023,6 +2180,7 @@ declare class ThemePickerComponent {
  *   <fx-ui-pending-badge [field]="'confirmed-chains weekly series'" />
  *
  * Keep the copy factual: it states that data is missing, never fakes a value.
+ * Styling is neutral on purpose (anh Tú 04/09): a hint, not a warning.
  */
 declare class PendingBadgeComponent {
     /** Caller-translated chip text. */
@@ -2039,15 +2197,90 @@ declare class PendingBadgeComponent {
     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>;
 }
 
+/**
+ * V2 topbar breadcrumb (design 02/12/13, measured on the demo 04/09).
+ *
+ *   Projects  /  [◳ RocketChat ▾]  /  [⬡ rocketchat.exe · 4.8.1 ▾]
+ *
+ * Plain crumbs are quiet links (12.5px / 500 / muted); the last one is strong.
+ * A crumb with `icon` or `switcher` renders as a chip — hairline border,
+ * surface fill, 1px shadow — and a `switcher` opens a listbox with a filter
+ * box, the sibling options, an optional "View all" row and a "Create" CTA.
+ * Data comes from the app through `BreadcrumbService`; this component only
+ * draws and navigates.
+ */
+declare class BreadcrumbComponent {
+    private readonly service;
+    private readonly router;
+    private readonly host;
+    readonly crumbs: _angular_core.Signal<Breadcrumb[]>;
+    /** Index of the crumb whose switcher panel is open; null = closed. */
+    readonly openIndex: _angular_core.WritableSignal<number | null>;
+    readonly options: _angular_core.WritableSignal<BreadcrumbOption[]>;
+    readonly loading: _angular_core.WritableSignal<boolean>;
+    readonly keyword: _angular_core.WritableSignal<string>;
+    /** Drops results of a superseded load (typing fast, reopening). */
+    private loadSeq;
+    isChip(crumb: Breadcrumb): boolean;
+    onChipClick(crumb: Breadcrumb, index: number, event: MouseEvent): void;
+    private open;
+    close(): void;
+    onFilter(crumb: Breadcrumb, value: string): void;
+    private load;
+    pick(option: BreadcrumbOption, event: Event): void;
+    go(event: Event, url?: string): void;
+    private navigate;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbComponent, "fx-ui-breadcrumb", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Topbar load status (design "Loading States", measured 04/09):
+ *
+ *   ◌ Loading charts · 1 of 4          → while requests are pending
+ *   ● Up to date · just now      ↻     → once the batch settled
+ *
+ * Mono 10.5px; muted while loading, faint when idle; 11px spinner (2px ring,
+ * accent top). With `bar` a 2px indeterminate strip is drawn along the top
+ * edge of the nearest positioned ancestor (the topbar) while loading.
+ * Labels are caller-translated inputs; the ↻ button emits `reload`.
+ */
+declare class LoadStatusComponent {
+    readonly status: FxLoadStatusService;
+    readonly loadingLabel: _angular_core.InputSignal<string>;
+    readonly ofLabel: _angular_core.InputSignal<string>;
+    readonly upToDateLabel: _angular_core.InputSignal<string>;
+    readonly justNowLabel: _angular_core.InputSignal<string>;
+    /** `{n}` is replaced by the minute count. */
+    readonly minutesAgoLabel: _angular_core.InputSignal<string>;
+    readonly reloadLabel: _angular_core.InputSignal<string>;
+    /** Draw the 2px indeterminate bar along the top of the positioned ancestor. */
+    readonly bar: _angular_core.InputSignal<boolean>;
+    /** Show the ↻ button. */
+    readonly showReload: _angular_core.InputSignal<boolean>;
+    readonly reload: _angular_core.OutputEmitterRef<void>;
+    /** Ticks every 30 s so "just now" ages into "N min ago" without traffic. */
+    private readonly tick;
+    constructor();
+    readonly loadingText: _angular_core.Signal<string>;
+    readonly idleText: _angular_core.Signal<string>;
+    onReload(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadStatusComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadStatusComponent, "fx-ui-load-status", never, { "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "upToDateLabel": { "alias": "upToDateLabel"; "required": false; "isSignal": true; }; "justNowLabel": { "alias": "justNowLabel"; "required": false; "isSignal": true; }; "minutesAgoLabel": { "alias": "minutesAgoLabel"; "required": false; "isSignal": true; }; "reloadLabel": { "alias": "reloadLabel"; "required": false; "isSignal": true; }; "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "showReload": { "alias": "showReload"; "required": false; "isSignal": true; }; }, { "reload": "reload"; }, 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 marker is deliberately quiet (anh Tú 04/09: no yellow frame, just a
+ * subtle "Pending API" chip): a neutral chip above the block, with the label
+ * and missing field in its tooltip. The content itself is non-interactive so
+ * sample shapes are never mistaken for live state. 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
@@ -2058,7 +2291,7 @@ declare class PendingBadgeComponent {
  *   </fx-ui-sample-frame>
  */
 declare class SampleFrameComponent {
-    /** Caller-translated corner label. */
+    /** Caller-translated block label — surfaces in the chip tooltip only. */
     readonly label: _angular_core.InputSignal<string>;
     /** Field the backend still owes — shown on the pending badge tooltip. */
     readonly field: _angular_core.InputSignal<string>;
@@ -2156,17 +2389,29 @@ declare class SegmentedComponent {
      * (design refs 04/05).
      */
     readonly variant: _angular_core.InputSignal<"default" | "pill">;
+    /**
+     * 'equal' (default): every segment takes the same width (view toggles such
+     * as Catalog | Table). 'content': each segment is as wide as its label —
+     * the demo's detail-pane tabs ("Affected software · Summary · Evidence"),
+     * where equal columns would truncate the long label in a narrow pane.
+     */
+    readonly fit: _angular_core.InputSignal<"content" | "equal">;
+    private readonly optionEls;
+    /** Measured box of the active segment — only used when fit === 'content'. */
+    private readonly thumbBox;
+    constructor();
     /** 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>;
+    readonly gridClass: _angular_core.Signal<"auto-cols-auto" | "auto-cols-fr">;
     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>;
+    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; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 interface FxListRowBadge {
@@ -2433,6 +2678,80 @@ declare class ConfirmationDialogComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmationDialogComponent, "fx-ui-confirmation-dialog", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Staggered entrance for one element (GSAP).
+ *
+ *   <fx-ui-section-card [fxReveal]="2">…</fx-ui-section-card>
+ *
+ * The host starts invisible and rises into place; `fxReveal` is its slot in
+ * the stagger (× 60 ms). Elements that mount later (async lists) animate on
+ * their own mount, so late data arrives with motion instead of a jump.
+ * Reduced-motion users see the final state immediately. For a whole page use
+ * `fxRevealGroup` on the container instead of numbering children by hand.
+ */
+declare class FxRevealDirective {
+    /** Stagger slot; 0 = first. */
+    readonly fxReveal: _angular_core.InputSignal<string | number | undefined>;
+    private readonly el;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxRevealDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxRevealDirective, "[fxReveal]", never, { "fxReveal": { "alias": "fxReveal"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Run the standard reveal on an element at the given stagger slot. */
+declare function fxRevealElement(el: HTMLElement, slot?: number): void;
+
+/**
+ * One attribute on a page root reveals its sections top-to-bottom.
+ *
+ *   <div fxRevealGroup>            ← page root
+ *     <div>heading…</div>          ← slot 0
+ *     <fx-ui-stat-cards …/>        ← slot 1
+ *     <div class="grid …">…</div>  ← slot 2 (the grid moves as one block)
+ *   </div>
+ *
+ * Direct element children present at first render get consecutive slots.
+ * Children added later (a list that arrives after its request, an `@if` that
+ * flips) are revealed as they mount, so async content never pops in flat.
+ * Skeletons (`fx-ui-route-skeleton`, `[aria-busy]`) are left alone. Replaces
+ * the page-level `animate.enter="fade-in-animation"` one-shot fade.
+ */
+declare class FxRevealGroupDirective implements OnDestroy {
+    /** Cap on how many children get their own slot; the rest share the last one. */
+    readonly fxRevealGroup: _angular_core.InputSignal<string | number | undefined>;
+    private readonly el;
+    private observer?;
+    private readonly seen;
+    constructor();
+    private children;
+    private eligible;
+    private hide;
+    private reveal;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxRevealGroupDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxRevealGroupDirective, "[fxRevealGroup]", never, { "fxRevealGroup": { "alias": "fxRevealGroup"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Counts a figure up from 0 (GSAP) whenever its value changes.
+ *
+ *   <span [fxCountUp]="card.value"></span>
+ *
+ * Numbers tween over 0.8 s and render with the user's locale grouping; any
+ * non-numeric value ('--', '98 / 100', '1,224') is written verbatim so pending
+ * or composite figures never animate to nonsense. Reduced motion → final value.
+ */
+declare class FxCountUpDirective implements OnDestroy {
+    readonly fxCountUp: _angular_core.InputSignal<string | number | null | undefined>;
+    private readonly el;
+    private tween?;
+    private readonly state;
+    constructor();
+    private format;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxCountUpDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxCountUpDirective, "[fxCountUp]", never, { "fxCountUp": { "alias": "fxCountUp"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Compatibility barrel over the (now standalone) core components.
  *
@@ -2446,9 +2765,25 @@ 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 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 ɵ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 BreadcrumbComponent, typeof LoadStatusComponent, 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 FxRevealDirective, typeof FxRevealGroupDirective, typeof FxCountUpDirective], [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 BreadcrumbComponent, typeof LoadStatusComponent, 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 FxRevealDirective, typeof FxRevealGroupDirective, typeof FxCountUpDirective, typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<UiModule>;
 }
 
-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 };
+/** Users who asked the OS for reduced motion get instant state changes. */
+declare function fxMotionAllowed(): boolean;
+/** Shared timing so every screen moves the same way. */
+declare const FX_MOTION: {
+    readonly duration: 0.5;
+    /** Delay between consecutive slots. */
+    readonly stagger: 0.06;
+    /** Never let a long list push the last item beyond this delay. */
+    readonly maxSlot: 12;
+    readonly travelPx: 12;
+    readonly ease: "power2.out";
+};
+
+/** Motion directives exported by UiModule (GSAP-based, reduced-motion aware). */
+declare const FX_MOTION_DIRECTIVES: readonly [typeof FxRevealDirective, typeof FxRevealGroupDirective, typeof FxCountUpDirective];
+
+export { AuthInterceptor, AuthStateService, BarListComponent, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseTableComponent, BreadcrumbComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, CodeBlockComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FX_MOTION, FX_MOTION_DIRECTIVES, FX_SKELETON_DATA_KEY, FacetsRailComponent, FilterChipsComponent, FilterPillsComponent, FxComponent, FxCountUpDirective, FxDialogService, FxLoadStatusService, FxLoadingService, FxRevealDirective, FxRevealGroupDirective, FxRouteSkeletonService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, ListRowComponent, LoadStatusComponent, 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, fxMotionAllowed, fxRevealElement, scoreTone, severityTone, toneBadge, toneBadgeSolid, toneBg, toneBorder, toneColor, toneDot, toneDotChart, toneFg, toneScale, toneText, toneTint };
+export type { Breadcrumb, BreadcrumbOption, BreadcrumbSwitcher, ColumnChangedEvent, DrawerItem, ErrorMessages, FxApiClass, FxBarListItem, FxConfirmOptions, FxFacetGroup, FxFacetOption, FxFacetSelection, FxFeatureFlags, FxFilterChipOption, FxFilterPillOption, FxListRequest, FxListResolverContext, FxListRowBadge, FxLoadJob, 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 };

package/utilities.css

@@ -31,9 +31,15 @@
 }
 
 @utility card-common {
-  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+  @apply text-left px-xl py-large border border-border-default rounded-lg transition-colors duration-500 ease-in-out;
+  /* Demo `.og-panel` / `.og-statgrid`: hairline border + two soft layers.
+     Replaces Tailwind shadow-sm, which reads harder at the edges. */
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
 }
 
 @utility tag-common {
-  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
+  /* design .og-badge: 3px 10px (anh Tú 04/09: pills read too thin at 2px) */
+  @apply flex min-w-7 px-[10px] py-[3px] leading-5 hover:opacity-70 items-center justify-center;
 }