@foxeltech/angular-ui 0.7.44 → 0.7.83

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

@@ -261,22 +261,135 @@ declare class BaseDialogComponent<T = any> extends BaseComponent implements Afte
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseDialogComponent<any>, never, never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Overlay chặn màn cho HÀNH ĐỘNG của người dùng (bấm nút, đổi trạng thái,
+ * xuất báo cáo…). `app.html` của host bind `fx-ui-loading-panel` vào
+ * `listenerAction`.
+ *
+ * ⚠️ **KHÔNG dùng cho điều hướng.** Channel `listener` + `start()`/`stop()` đã
+ * bị XOÁ ở 0.7.70 (Pha 3). Điều hướng dùng skeleton: `FxRouteSkeletonService`
+ * đọc `data.skeleton` của route đích và shell dựng `fx-ui-route-skeleton`.
+ *
+ * Vì sao xoá thay vì để lại: trước đó cả 46 call site đổ chung MỘT channel, lẫn
+ * hai ngữ nghĩa (điều hướng vs hành động). Sau khi skeleton thay phần điều
+ * hướng, `listener` không còn ai nghe — để lại là một cái bẫy: gọi `start()`
+ * tưởng có overlay mà thực tế không có gì hiện.
+ */
 declare class FxLoadingService {
-    listener: EventEmitter<boolean>;
     listenerAction: EventEmitter<boolean>;
-    start(): void;
-    stop(): void;
     startAction(): void;
     stopAction(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLoadingService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FxLoadingService>;
 }
 
-declare class BaseResolver {
-    loadingService: FxLoadingService;
-    injector: Injector;
-    constructor(loadingService: FxLoadingService, injector: Injector);
-    baseResolverInit(): void;
+/**
+ * Một KHỐI trong skeleton của màn. Ghép các khối này theo đúng thứ tự của màn
+ * thật thì skeleton mới khớp layout — bảng ra bảng, chart ra chart.
+ *
+ * - `heading`    H1 + subline + `count` nút hành động (mặc định 2, 0 = không có)
+ * - `toolbar`    search bar + `count` filter pill (mặc định 2)
+ * - `table`      bảng, skeleton theo TỪNG Ô (`columns` / `rows`)
+ * - `cards`      lưới card (catalog) — `count` / `cols`
+ * - `stat-cards` hàng stat tile rời — `count`
+ * - `kpi-strip`  MỘT card chia cột, số to (kiểu `app-dash-kpi-row`) — `count`
+ * - `panels`     lưới section-card có vùng chart — `count` / `cols`
+ * - `card`       một section-card đơn
+ * - `tabs`       dải tab
+ * - `facets`     3 cụm facets/list/detail
+ * - `detail`     cụm card detail
+ * - `form`       card form
+ */
+type FxSkeletonBlockKind = 'heading' | 'toolbar' | 'table' | 'cards' | 'stat-cards' | 'kpi-strip' | 'panels' | 'card' | 'tabs' | 'facets' | 'detail' | 'form';
+interface FxSkeletonBlockSpec {
+    kind: FxSkeletonBlockKind;
+    /**
+     * Số phần tử con:
+     * - `heading`: số nút hành động (0 = màn không có CTA)
+     * - `toolbar`: số filter pill
+     * - `panels` `cards` `stat-cards` `kpi-strip` `tabs`: số khối
+     */
+    count?: number;
+    /** `panels` `cards`: số cột ở breakpoint lớn. */
+    cols?: number;
+    /** `table`: số cột và số hàng. */
+    columns?: number;
+    rows?: number;
+}
+type FxSkeletonBlock = FxSkeletonBlockKind | FxSkeletonBlockSpec;
+/**
+ * Tên gọn cho các layout dùng lại được. Route nên khai thẳng mảng block khi
+ * layout của nó khác preset — chính app biết layout của mình, không phải lib.
+ */
+type FxSkeletonHint = 'table' | 'panels' | 'dashboard' | 'tabs-facets' | 'facets' | 'detail' | 'form';
+/**
+ * Skeleton cho vùng NỘI DUNG trong lúc resolver của route đang chạy.
+ *
+ * ⚠️ Vì sao skeleton phải nằm ở shell chứ không ở từng màn: Angular **không
+ * tạo component cho tới khi resolver xong**, nên một màn không thể tự vẽ
+ * skeleton của chính nó trong lúc resolver của nó chạy. Thứ vẽ được phải tồn
+ * tại TRƯỚC component đó → shell + router event. Xem `FxRouteSkeletonService`.
+ */
+declare class RouteSkeletonComponent {
+    /** Tên preset, hoặc mảng block mô tả đúng layout của màn. */
+    readonly hint: _angular_core.InputSignal<FxSkeletonHint | FxSkeletonBlock[] | null>;
+    readonly blocks: _angular_core.Signal<FxSkeletonBlockSpec[]>;
+    cols(b: FxSkeletonBlockSpec): number[];
+    rows(b: FxSkeletonBlockSpec): number[];
+    items(b: FxSkeletonBlockSpec, fallback: number): number[];
+    /** Lớp lưới cho `panels`/`cards` — Tailwind v4 không có safelist nên phải
+     *  là chuỗi tĩnh, không ghép động. */
+    gridClass(b: FxSkeletonBlockSpec): string;
+    /** Header ngắn hơn ô dữ liệu, cột đầu rộng nhất (thường là tên). */
+    headWidth(c: number): number;
+    /**
+     * Bề rộng đổi theo cả hàng và cột — cùng bề rộng thì khối skeleton trông
+     * như một hình chữ nhật đặc, mất cảm giác "từng field".
+     */
+    cellWidth(r: number, c: number): number;
+    barHeight(i: number): number;
+    readonly bars: number[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RouteSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RouteSkeletonComponent, "fx-ui-route-skeleton", never, { "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Khai trên route: `data: { skeleton: 'table' }` (tên preset) hoặc
+ * `data: { skeleton: ['heading', 'toolbar', 'table'] }` (mảng block, mô tả
+ * ĐÚNG layout của màn — bảng ra bảng, chart ra chart).
+ */
+declare const FX_SKELETON_DATA_KEY = "skeleton";
+/**
+ * Đọc `data.skeleton` của route đích rồi bật/tắt skeleton cho vùng nội dung.
+ *
+ * ⚠️ Vì sao phải nghe router event chứ không để từng màn tự lo: Angular
+ * **không tạo component cho tới khi resolver xong**, nên trong lúc resolver
+ * của một màn chạy thì component đó chưa tồn tại — không có gì để vẽ
+ * skeleton. Chỉ shell (tồn tại trước) làm được.
+ *
+ * Mốc dùng là `RoutesRecognized` — event ĐẦU TIÊN mang `RouterStateSnapshot`,
+ * và nó xảy ra TRƯỚC `ResolveStart`. `NavigationStart` thì chưa biết route
+ * đích nên không đọc được hint.
+ */
+declare class FxRouteSkeletonService {
+    private readonly router;
+    private readonly _hint;
+    /** Hint đang hiển thị, `null` = không vẽ skeleton. */
+    readonly hint: _angular_core.Signal<FxSkeletonHint | FxSkeletonBlock[] | null>;
+    readonly active: _angular_core.Signal<boolean>;
+    /**
+     * Điều hướng nhanh hơn mốc này thì KHÔNG vẽ skeleton — tránh nháy một
+     * nhịp khi resolver trả về gần như tức thì (dữ liệu đã cache).
+     */
+    private readonly graceMs;
+    private timer?;
+    private started;
+    constructor();
+    /** Gọi một lần từ shell (host và mỗi remote standalone). */
+    start(): void;
+    private clearTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxRouteSkeletonService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<FxRouteSkeletonService>;
 }
 
 interface FxListRequest {
@@ -292,11 +405,12 @@ interface FxListResolverContext {
     pageSize: number;
 }
 /**
- * Functional replacement for the copy-pasted list-resolver class:
- * starts the loading overlay, runs one API request, and on failure stops the
- * overlay and shows a parsed error toast — the exact convention every
- * BaseResolver subclass hand-rolls today. BaseResolver stays for existing
- * classes; new routes should use this factory.
+ * Chạy MỘT request cho list resolver, lỗi thì hiện toast đã parse.
+ *
+ * ⚠️ KHÔNG còn bật overlay chặn màn: điều hướng dùng skeleton
+ * (`FxRouteSkeletonService` + `data.skeleton` trên route). `BaseResolver` đã bị
+ * xoá ở 0.7.70 — mọi resolver giờ là `@Injectable()` thuần hoặc dùng factory
+ * này.
  *
  * Usage:
  *   resolve: { histories: fxListResolver(ScanManagementApi, (route, state, ctx) =>
@@ -555,9 +669,16 @@ declare class FxUtils {
  * helpers return `null` for "no meaningful value" and the `toneText` /
  * `toneBg` / `toneBadge` wrappers fall back to a neutral class.
  *
- * Every emitted utility must appear below as a WHOLE literal string — the
- * Tailwind content scanner (v4 has no safelist) only sees complete class
- * names. Never rebuild these with string interpolation.
+ * Every emitted Tailwind UTILITY must appear below as a WHOLE literal string —
+ * the Tailwind content scanner (v4 has no safelist) only sees complete class
+ * names. Never rebuild those with string interpolation.
+ *
+ * ⚠️ Ngoại lệ có chủ đích: `tone-tint-*`, `tone-fg-*`, `tone-dot-*` và
+ * `tone-dot-chart-*` là CLASS CSS THẬT khai trong components.css, KHÔNG phải
+ * utility Tailwind — chúng luôn tồn tại trong stylesheet nên ghép chuỗi
+ * `tone-fg-${tone}` là an toàn. Đó chính là lý do chọn class thay vì utility:
+ * ngoài việc tránh xung đột tên (`warning` trong theme Tailwind trỏ vào bộ
+ * LEGACY `--og-tone-*`), nó còn xoá hẳn bẫy "class ghép chuỗi bị vô hình".
  */
 type Tone = 'critical' | 'danger' | 'warning' | 'success' | 'information';
 /** Severity / risk-level string → tone (Critical & High → danger, Medium → warning, Low → success). */
@@ -580,7 +701,66 @@ declare function toneText(tone: Tone | null): string;
 /** Tone → background colour class, with a neutral fallback when there is no value. */
 declare function toneBg(tone: Tone | null): string;
 /** Tone → soft pill/badge classes (tinted bg + matching text), neutral fallback. */
-declare function toneBadge(tone: Tone | null): string;
+/**
+ * Badge severity MẶC ĐỊNH — nền MỀM theo thang đo, Critical ra **đỏ sẫm**.
+ *
+ * ⚠️ Trước đây hàm này trả nền ĐẶC (`tone-tint-*`, Critical = đen `--og-text`)
+ * vì demo có biến thể `.og-badge--solid`. Nhưng demo chỉ dùng biến thể đó ở
+ * ĐÚNG MỘT chỗ — badge severity trong danh sách findings — còn app mình gọi
+ * `toneBadge()` ở khắp nơi (`project-card`, `score-badge`, `list-row`,
+ * `severity-badges`, `tab-group`, badge trong hàng…). Kết quả: pill đen tràn
+ * ra mọi màn, anh Tú báo 3 lần (03/09). Nên MẶC ĐỊNH đảo về nền mềm; muốn
+ * pill đen thì gọi `toneBadgeSolid()` một cách tường minh.
+ */
+declare function toneBadge(tone: Tone | string | null | undefined): string;
+/**
+ * Badge severity nền ĐẶC (Critical = `--og-text`, chữ `--og-surface`) — đúng
+ * `.og-badge--solid` của demo. CHỈ dùng cho badge severity đứng một mình ở
+ * nơi cần nhấn mạnh nhất; đừng dùng cho badge có chấm bên trong (chấm sẽ chìm).
+ */
+declare function toneBadgeSolid(tone: Tone | string | null | undefined): string;
+/**
+ * Chỉ MÀU của tông, không kèm hình dạng pill — cho ô icon, chip, ô nền.
+ *
+ * ⚠️ Đâ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
+ * ramp chart (ramp có `warning #f59e0b` chỉ 2.15:1 trên nền trắng). Xem
+ * `.tone-fg-*` trong components.css.
+ */
+declare function toneFg(tone: Tone | string | null | undefined): string;
+/**
+ * Tông THANG ĐO — cho filter chip severity. Critical ra ĐỎ SẪM (nền mềm pha
+ * từ ramp `--og-sev-*`) thay vì pill đen đặc của `toneTint()`: chip filter là
+ * một thang đo, không phải badge severity của một finding. Xem `.tone-scale-*`.
+ */
+declare function toneScale(tone: Tone | string | null | undefined): string;
+/** Viền theo tông — cho panel trạng thái (dropzone upload…). */
+declare function toneBorder(tone: Tone | string | null | undefined): string;
+/**
+ * CHẤM trạng thái trong hàng (`● Confirmed`) — demo dùng màu SEMANTIC
+ * (`.og-statusdot--*`), không phải ramp chart.
+ */
+declare function toneDot(tone: Tone | string | null | undefined): string;
+/**
+ * CHẤM LEGEND của chart — phải TRÙNG màu cung donut nên dùng ramp
+ * `--og-sev-*`. Đừng dùng cho chấm trạng thái trong hàng.
+ */
+declare function toneDotChart(tone: Tone | string | null | undefined): string;
 /**
  * Tone → resolved CSS colour string for ECharts / canvas where a Tailwind
  * class can't be used (e.g. per-slice pie `itemStyle.color`). Emits the
@@ -1040,7 +1220,7 @@ declare class DndUploadComponent {
 declare class ButtonComponent {
     label: string;
     readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly buttonVariant: _angular_core.InputSignal<"default" | "success" | "primary" | "alternative">;
+    readonly buttonVariant: _angular_core.InputSignal<"default" | "success" | "primary" | "cta" | "alternative">;
     icon?: any;
     readonly class: _angular_core.InputSignal<any>;
     readonly loading: _angular_core.InputSignal<boolean>;
@@ -1138,6 +1318,32 @@ declare class SearchBarComponent extends FxComponent<string> implements AfterVie
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchBarComponent, "fx-ui-search-bar", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "search": "search"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
+/**
+ * Một tab của `fx-ui-tab-group`.
+ *
+ * ⚠️ Nội dung tab PHẢI bọc trong `<ng-template>`:
+ *
+ * ```html
+ * <fx-ui-tab [label]="'Components'">
+ *   <ng-template>
+ *     <app-info-components … />
+ *   </ng-template>
+ * </fx-ui-tab>
+ * ```
+ *
+ * Vì sao bắt buộc: trước đây tab dùng `<ng-content>` bọc trong `<ng-template>`
+ * của CHÍNH nó. Cách đó **không hoãn được gì** — `<ng-content>` chỉ CHIẾU node,
+ * còn node do view khai báo (component cha) tạo **eager**. Kết quả: mọi tab đều
+ * khởi tạo và gọi API ngay khi vào màn, dù người dùng chưa mở (đo được trên
+ * scan-info: cả 8 cụm cùng fetch). Nhận `TemplateRef` từ cha thì nội dung chỉ
+ * được dựng khi tab-group stamp template đó.
+ *
+ * Hệ quả cần biết: đổi tab sẽ **huỷ** nội dung tab cũ và dựng lại khi quay lại
+ * — đúng bản chất lazy, giống `matTabContent` của Material.
+ *
+ * `descendants: false` để chỉ bắt `<ng-template>` là con TRỰC TIẾP, tránh nuốt
+ * nhầm template lồng sâu bên trong nội dung tab.
+ */
 declare class TabComponent {
     readonly label: _angular_core.InputSignal<string>;
     icon?: string;
@@ -1147,7 +1353,7 @@ declare class TabComponent {
     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; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "fx-ui-tab", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, ["content"], never, true, never>;
 }
 
 declare class TabGroupComponent implements AfterContentInit, AfterViewChecked, OnChanges {
@@ -1305,13 +1511,6 @@ declare class SwitchComponent extends FxComponent<any> implements AfterViewInit
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onSwitch": "onSwitch"; }, never, never, true, never>;
 }
 
-declare class SkeletonTableLoadingComponent {
-    readonly columns: _angular_core.InputSignal<number>;
-    readonly rows: _angular_core.InputSignal<number>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonTableLoadingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonTableLoadingComponent, "fx-ui-skeleton-table-loading", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class CircleProgressBar {
     readonly percent: _angular_core.InputSignal<number>;
     readonly showPercent: _angular_core.InputSignal<boolean>;
@@ -1437,7 +1636,8 @@ declare class DrawerComponent implements OnInit, OnDestroy {
 /** Row-card skeleton placeholder for master-detail list panes. */
 declare class SkeletonListComponent {
     readonly rows: _angular_core.InputSignal<number>;
-    range(n: number): number[];
+    /** computed, không phải method: method trả mảng MỚI mỗi lần render. */
+    readonly rowList: _angular_core.Signal<number[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonListComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonListComponent, "fx-ui-skeleton-list", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1448,7 +1648,9 @@ declare class SkeletonDetailComponent {
     readonly cards: _angular_core.InputSignal<number>;
     /** Rows per content card. */
     readonly rows: _angular_core.InputSignal<number>;
-    range(n: number): number[];
+    /** computed, không phải method: method trả mảng MỚI mỗi lần render. */
+    readonly cardList: _angular_core.Signal<number[]>;
+    readonly rowList: _angular_core.Signal<number[]>;
     rowWidth(i: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonDetailComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonDetailComponent, "fx-ui-skeleton-detail", never, { "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1557,6 +1759,12 @@ declare class FilterPillsComponent {
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     isActive(option: FxFilterPillOption): boolean;
+    /**
+     * Pill ĐANG CHỌN dùng **accent** (xanh), không phải nền đen — khớp demo:
+     * design ref 11 vẽ pill "All 40" là pill accent. Nền đen `--og-text` chỉ
+     * dành cho badge severity Critical (`.og-badge--solid`), không dùng cho
+     * trạng thái chọn của filter (anh Tú chốt 03/09).
+     */
     pillClass(option: FxFilterPillOption): string;
     countClass(option: FxFilterPillOption): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterPillsComponent, never>;
@@ -1645,6 +1853,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. */
@@ -1735,7 +1947,13 @@ declare class MasterDetailComponent implements AfterViewInit, AfterContentInit {
     table: BaseMasterDetailComponent<any>;
     /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
     readonly listWidth: _angular_core.InputSignal<string>;
-    readonly maxListHeight: _angular_core.InputSignal<string>;
+    /**
+     * Chiều cao CHUNG của cả ba cụm (facets / list / detail). Mặc định trừ phần
+     * chrome phía trên (topbar + tab strip + context line) khỏi viewport để
+     * bảng ba cột vừa đúng một màn, không kéo trang cuộn theo.
+     * Chỉ có tác dụng từ 1080px — xem `.fx-md-row` trong CSS.
+     */
+    readonly paneHeight: _angular_core.InputSignal<string>;
     readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
     /** Labels come in via inputs — the lib carries no i18n. */
     readonly emptyMessage: _angular_core.InputSignal<string>;
@@ -1760,7 +1978,7 @@ declare class MasterDetailComponent implements AfterViewInit, AfterContentInit {
     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; }; "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; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdFacets]", "[mdHeader]", "[mdFilters]"], true, never>;
 }
 
 interface FxMenuItem {
@@ -1825,6 +2043,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. */
@@ -1846,10 +2065,11 @@ declare class PendingBadgeComponent {
  * 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
@@ -1860,7 +2080,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>;
@@ -1958,17 +2178,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<"equal" | "content">;
+    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 {
@@ -2173,6 +2405,53 @@ declare class PipelineStepperComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PipelineStepperComponent, "fx-ui-pipeline-stepper", never, { "stages": { "alias": "stages"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "stageClick": "stageClick"; }, never, ["*"], true, never>;
 }
 
+/** Facets-rail skeleton: N nhóm, mỗi nhóm một eyebrow + vài dòng lựa chọn. */
+declare class SkeletonFacetsComponent {
+    readonly groups: _angular_core.InputSignal<number>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly groupList: _angular_core.Signal<number[]>;
+    readonly rowList: _angular_core.Signal<number[]>;
+    rowWidth(i: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonFacetsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonFacetsComponent, "fx-ui-skeleton-facets", never, { "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Dashboard skeleton: một hàng KPI + N panel có vùng chart. */
+declare class SkeletonDashboardComponent {
+    readonly kpis: _angular_core.InputSignal<number>;
+    readonly panels: _angular_core.InputSignal<number>;
+    readonly kpiList: _angular_core.Signal<number[]>;
+    readonly panelList: _angular_core.Signal<number[]>;
+    readonly barList: _angular_core.Signal<number[]>;
+    /** Chiều cao cột giả — dựng hình chart mà không cần dữ liệu. */
+    barHeight(i: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonDashboardComponent, "fx-ui-skeleton-dashboard", never, { "kpis": { "alias": "kpis"; "required": false; "isSignal": true; }; "panels": { "alias": "panels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Skeleton của cả AppFrame (drawer + topbar + vùng nội dung).
+ *
+ * Chỉ dùng cho giai đoạn **bootstrap**, khi shell của host còn CHƯA tồn tại
+ * (App.ngOnInit đang kiểm tenant + session, router chưa initialNavigation).
+ * Mọi điều hướng SAU đó đã có shell thật → dùng `fx-ui-route-skeleton` bên
+ * trong vùng nội dung, đừng vẽ lại cả frame.
+ *
+ * ⚠️ `contentHint` là thứ làm F5 không còn vẽ hình generic. Lần điều hướng ĐẦU
+ * tạo ra chính `HomeComponent` — nơi chứa `fx-ui-route-skeleton` — nên vùng nội
+ * dung không thể tự vẽ skeleton của route ở lần đó. Truyền hint vào đây để
+ * frame dựng đúng composition của màn đích ngay từ F5.
+ */
+declare class SkeletonFrameComponent {
+    readonly navItems: _angular_core.InputSignal<number>;
+    /** Composition của route đích; null thì vẽ khối generic. */
+    readonly contentHint: _angular_core.InputSignal<FxSkeletonHint | FxSkeletonBlock[] | null>;
+    readonly navList: _angular_core.Signal<number[]>;
+    navWidth(i: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonFrameComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonFrameComponent, "fx-ui-skeleton-frame", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "contentHint": { "alias": "contentHint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -2201,9 +2480,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 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 ɵmod: _angular_core.ɵɵNgModuleDeclaration<UiModule, never, [typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof SliderComponent, typeof SwitchComponent, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof FilterPillsComponent, typeof StageDotsComponent, typeof CodeBlockComponent, typeof ScreenshotFrameComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof MenuComponent, typeof ThemePickerComponent, typeof PendingBadgeComponent, typeof SampleFrameComponent, typeof ScoreBadgeComponent, typeof StatusDotComponent, typeof SparkbarComponent, typeof SegmentedComponent, typeof ListRowComponent, typeof BarListComponent, typeof FacetsRailComponent, typeof ProjectCardComponent, typeof PipelineStepperComponent, typeof SkeletonFacetsComponent, typeof SkeletonDashboardComponent, typeof SkeletonFrameComponent, typeof RouteSkeletonComponent, typeof ConfirmationDialogComponent], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof SliderComponent, typeof SwitchComponent, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof FilterPillsComponent, typeof StageDotsComponent, typeof CodeBlockComponent, typeof ScreenshotFrameComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof MenuComponent, typeof ThemePickerComponent, typeof PendingBadgeComponent, typeof SampleFrameComponent, typeof ScoreBadgeComponent, typeof StatusDotComponent, typeof SparkbarComponent, typeof SegmentedComponent, typeof ListRowComponent, typeof BarListComponent, typeof FacetsRailComponent, typeof ProjectCardComponent, typeof PipelineStepperComponent, typeof SkeletonFacetsComponent, typeof SkeletonDashboardComponent, typeof SkeletonFrameComponent, typeof RouteSkeletonComponent, typeof ConfirmationDialogComponent, typeof i1$1.FormsModule, typeof i1$1.ReactiveFormsModule, typeof i2.RouterModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<UiModule>;
 }
 
-export { AuthInterceptor, AuthStateService, 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 };
+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 };

package/utilities.css

@@ -18,8 +18,25 @@
   @apply flex flex-row items-center px-semi;
 }
 
+/* Nhãn "eyebrow" (tiêu đề panel, nhóm facet) — spec CUỐI của demo sau khi
+   lớp override đè lên base: font MONO, 11.5px, weight 600, letter-spacing
+   0.02em và KHÔNG viết hoa. Base DS viết hoa + tracking 0.08em, nhưng
+   override đặt `text-transform: none` nên demo hiển thị chữ thường. */
+@utility txt-eyebrow {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(var(--og-text-muted));
+}
+
 @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 {

package/src/lib/ui/components/skeleton-table-loading/skeleton-table-loading.component.html

@@ -1,21 +0,0 @@
-<div class="w-full animate-pulse space-y-normal">
-  <div
-    class="grid gap-small"
-    [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }"
-  >
-    @for(col of [].constructor(columns()); track col) {
-      <div class="h-6 bg-bg-hover rounded"></div>
-    }
-  </div>
-
-  @for(row of [].constructor(rows()); track row) {
-    <div
-      class="grid gap-small"
-      [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }"
-    >
-      @for(col of [].constructor(columns()); track col) {
-        <div class="h-7 bg-bg-hover rounded"></div>
-      }
-    </div>
-  }
-</div>

package/src/lib/ui/components/tab-component/tab.component.html

@@ -1 +0,0 @@
-<ng-template><ng-content></ng-content></ng-template>