@foxeltech/angular-ui 0.7.75 → 0.7.101

package/src/lib/ui/components/master-detail/master-detail.component.css

@@ -28,6 +28,29 @@
   container-name: fx-md;
 }
 
+/* The frame — one card around all three panes (design 11/14/17); the panes
+   themselves are flat and separated by hairlines. Shadow = demo .og-panel. */
+.fx-md-row {
+  background: rgb(var(--og-surface));
+  border: 1px solid rgb(var(--border-default));
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
+}
+/* Stacked (narrow): hairline BELOW each pane; rail toggle is a horizontal strip. */
+.fx-md-facets,
+.fx-md-list {
+  border-bottom: 1px solid rgb(var(--og-border-subtle));
+}
+.fx-md-rail-toggle {
+  width: 100%;
+  padding: 10px 12px;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
 /* Mặc định: xếp dọc, mỗi cụm full width, chiều cao tự nhiên.
    KHÔNG ép chiều cao khi xếp dọc — sẽ sinh ba hộp cuộn tí hon lồng trong
    trang đang cuộn, tệ hơn hẳn. */
@@ -37,15 +60,13 @@
 }
 
 /*
- * Ngưỡng 968px = ĐÚNG tổng bề rộng tối thiểu dùng được của ba cụm:
- *   facets 200 + list 320 + detail 400 + 2 gap (~48) = 968px
- * Dưới ngưỡng thì thật sự không đủ chỗ → xếp dọc là đúng, không phải lỗi.
- *
- * ⚠️ Đừng làm tròn lên 1000px: viewport 1280 (rất phổ biến) cho hàng đúng
- * 987px — trượt ngưỡng 1000 chỉ vì 13px dù thừa sức xếp 3 cụm ở mức sàn
- * (đo được: facets 200 / list 320 / detail 419).
+ * Ngưỡng 720px = `md` của lib (anh Tú 04/09: mọi ngưỡng layout theo `md`,
+ * không còn `lg` 1080). Từ 0.7.85 khung là MỘT mảnh, rail thu gọn còn 40px,
+ * nên 720 vẫn đủ: rail 40 + list ≥ 300 + detail ≥ 360. Rail mở ở bề rộng
+ * hẹp thì list nhường chỗ (min 260) — người dùng tự đóng rail nếu cần.
+ * Dưới 720 thật sự không đủ chỗ → xếp dọc là đúng, không phải lỗi.
  */
-@container fx-md (min-width: 968px) {
+@container fx-md (min-width: 720px) {
   .fx-md-row {
     flex-direction: row;
     height: var(--fx-md-pane-h, calc(100vh - 300px));
@@ -55,22 +76,47 @@
   /* Panes CO GIÃN: facets/list nhường chỗ để cụm detail luôn có sàn 400px.
      `--fx-md-list-width` (input `listWidth`) giờ là bề rộng MONG MUỐN kiêm
      tối đa của cụm list, không còn là con số cứng. */
+  /* Hairline to the RIGHT of rail and list instead of below. */
+  .fx-md-facets,
+  .fx-md-list {
+    border-bottom: 0;
+    border-right: 1px solid rgb(var(--og-border-subtle));
+  }
+
+  /* Rail: 40px strip when collapsed (» + vertical label), 230px when open. */
   .fx-md-facets {
+    flex: 0 0 40px;
+    width: 40px;
+    min-width: 40px;
+    max-width: 40px;
+  }
+  .fx-md-facets--open {
     flex: 0 1 230px;
+    width: auto;
     min-width: 200px;
     max-width: 260px;
   }
+  .fx-md-rail-toggle {
+    height: 100%;
+    padding: 12px 0;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+  .fx-md-rail-label {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
 
   .fx-md-list {
     width: auto;
     flex: 0 1 var(--fx-md-list-width, 420px);
-    min-width: 320px;
+    min-width: 260px;
     max-width: var(--fx-md-list-width, 420px);
   }
 
   .fx-md-detail {
-    flex: 1 1 400px;
-    min-width: 400px;
+    flex: 1 1 360px;
+    min-width: 360px;
   }
 }
 
@@ -83,3 +129,9 @@
   overflow: hidden;
   clip-path: inset(50%);
 }
+
+/* Material paginator inside the list pane keeps the pane's horizontal rhythm. */
+.fx-md-paginator {
+  padding: 0 12px;
+  border-top: 1px solid rgb(var(--og-border-subtle));
+}

package/src/lib/ui/components/master-detail/master-detail.component.html

@@ -1,40 +1,67 @@
-<!-- 3 cụm CHUNG chiều cao, mỗi cụm SCROLL RIÊNG (anh Tú chốt 03/09).
-     `items-stretch` + chiều cao đặt trên hàng (xem .fx-md-row trong CSS) để
-     cả ba pane bằng nhau; mỗi pane là flex-col + min-h-0 và chỉ phần thân
-     `overflow-auto flex-1` cuộn — header/filter/paginator đứng yên.
-     ⚠️ Hướng hàng + chiều cao do CONTAINER QUERY trong CSS quyết định (theo
-     bề rộng của chính hàng), KHÔNG phải `lg:flex-row`. Đừng thêm lại class
-     `lg:*` ở đây — `lg` trong lib là 1080px và viewport là proxy sai; xem
-     ghi chú đầu master-detail.component.css. -->
+<!-- ONE frame, three columns (designs 11/14/17): facets rail · list · detail,
+     separated by hairlines, sharing one height; only each pane's body scrolls.
+     Row direction / height come from the CONTAINER QUERY in the CSS (the row's
+     own width), never from `lg:*` — see the note at the top of the .css. -->
 <div
-  class="fx-md-row flex flex-col items-stretch gap-xl"
+  class="fx-md-row flex flex-col items-stretch"
+  [class.fx-md-row--rail-open]="railOpen()"
   [style.--fx-md-list-width]="listWidth()"
   [style.--fx-md-pane-h]="paneHeight()"
 >
-  <!-- Facets rail (V2 3-column lookup) — wrapper always rendered so ng-content
-       stays unconditional; hidden when the host projects nothing. -->
-  <div
-    class="fx-md-facets card-common bg-surface flex flex-col min-h-0"
+  <!-- Facets rail — collapsible (» / «), collapsed = 40px strip with the label
+       set vertically. The [mdFacets] projection is unconditional (hasFacets is
+       detected by querying it) and only hidden while collapsed. -->
+  <aside
+    class="fx-md-facets flex flex-col min-h-0 min-w-0"
     [class.hidden]="!hasFacets"
+    [class.fx-md-facets--open]="railOpen()"
   >
-    <div class="flex-1 min-h-0 overflow-auto pr-xs">
+    <div class="fx-md-rail-head flex items-center gap-small px-normal py-semi border-b border-border-subtle shrink-0" [class.hidden]="!railOpen()">
+      <button
+        type="button"
+        class="flex items-center justify-center w-6 h-6 rounded-control text-muted hover:bg-bg-hover shrink-0"
+        [attr.aria-label]="collapseFacetsLabel()"
+        (click)="railOpen.set(false)"
+      >
+        <fx-ui-hero-icon icon="chevron-double-left" [size]="14" class="flex" />
+      </button>
+      <span class="txt-eyebrow truncate">{{ facetsLabel() }}</span>
+    </div>
+    <div class="flex-1 min-h-0 overflow-auto px-normal py-normal" [class.hidden]="!railOpen()">
       <ng-content select="[mdFacets]"></ng-content>
     </div>
-  </div>
+    <button
+      type="button"
+      class="fx-md-rail-toggle flex items-center gap-normal text-muted hover:bg-bg-hover transition-colors"
+      [class.hidden]="railOpen()"
+      [attr.aria-label]="expandFacetsLabel()"
+      [attr.aria-expanded]="false"
+      (click)="railOpen.set(true)"
+    >
+      <fx-ui-hero-icon icon="chevron-double-right" [size]="14" class="flex shrink-0" />
+      <span class="fx-md-rail-label txt-eyebrow whitespace-nowrap">{{ facetsLabel() }}</span>
+    </button>
+  </aside>
 
   <!-- Master: list pane -->
-  <div class="fx-md-list card-common flex flex-col min-h-0">
-    <ng-content select="[mdHeader]"></ng-content>
-    <ng-content select="[mdFilters]"></ng-content>
+  <section class="fx-md-list flex flex-col min-h-0 min-w-0">
+    <div class="fx-md-list-head px-large pt-large pb-small border-b border-border-subtle shrink-0">
+      <ng-content select="[mdHeader]"></ng-content>
+      <ng-content select="[mdFilters]"></ng-content>
+    </div>
     <div
-      class="flex flex-col gap-normal overflow-auto pr-xs flex-1 min-h-0"
+      class="flex flex-col overflow-auto flex-1 min-h-0"
       role="listbox"
       [attr.aria-label]="listLabel() || null"
     >
       @if (table.loading) {
-        <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
+        <div class="px-large py-normal">
+          <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
+        </div>
       } @else {
         @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {
+          <!-- Hairline rows; the selected one is tinted with an accent bar on
+               the left (design 11/14 selected finding / component). -->
           <button
             type="button"
             role="option"
@@ -43,11 +70,11 @@
             [tabindex]="isSelected(row) ? 0 : -1"
             (click)="table.selectItem(row)"
             (keydown)="onKeydown($event, i)"
-            class="text-left rounded-lg border p-semi transition-colors"
+            class="text-left px-large py-semi border-l-2 border-b border-b-border-subtle transition-colors"
             [ngClass]="
               isSelected(row)
-                ? 'border-accent bg-accent-soft/60'
-                : 'border-border-default hover:border-border-interactive bg-bg-primary'
+                ? 'border-l-accent bg-accent-soft/60'
+                : 'border-l-transparent hover:bg-surface-sunken'
             "
           >
             <ng-container
@@ -57,7 +84,9 @@
           </button>
         }
         @if (!table.dataSource.data.length) {
-          <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
+          <div class="px-large py-large">
+            <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
+          </div>
         }
       }
     </div>
@@ -65,14 +94,14 @@
          whose own BaseTable subscription (running after this child's hook)
          wires page events — a binding here would double-fetch every change. -->
     <mat-paginator
-      class="mt-normal"
+      class="fx-md-paginator"
       [class.fx-md-paginator-hidden]="paginationStyle() === 'prevnext'"
       [length]="table.total"
       [pageSize]="table.pageSize"
       [pageSizeOptions]="pageSizeOptions()"
     ></mat-paginator>
     @if (paginationStyle() === 'prevnext') {
-      <div class="flex items-center justify-between mt-normal">
+      <div class="flex items-center justify-between gap-normal px-large py-normal border-t border-border-subtle shrink-0">
         <span class="txt-utility-description" style="font-family: var(--og-font-figure)">
           {{ rangeText() }}
         </span>
@@ -96,25 +125,25 @@
         </div>
       </div>
     }
-  </div>
+  </section>
 
   <!-- Detail pane -->
-  <div class="fx-md-detail w-full min-w-0 flex flex-col min-h-0">
-    <div class="flex-1 min-h-0 overflow-auto">
-    @if (table.selected) {
-      @if (table.detailBusy) {
-        <fx-ui-skeleton-detail [cards]="skeletonCards()"></fx-ui-skeleton-detail>
+  <section class="fx-md-detail w-full min-w-0 flex flex-col min-h-0">
+    <div class="flex-1 min-h-0 overflow-auto px-large py-large">
+      @if (table.selected) {
+        @if (table.detailBusy) {
+          <fx-ui-skeleton-detail [cards]="skeletonCards()"></fx-ui-skeleton-detail>
+        } @else {
+          <ng-container
+            [ngTemplateOutlet]="detailTemplate()"
+            [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
+          ></ng-container>
+        }
       } @else {
-        <ng-container
-          [ngTemplateOutlet]="detailTemplate()"
-          [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
-        ></ng-container>
+        <div class="flex items-center justify-center h-full min-h-[300px]">
+          <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
+        </div>
       }
-    } @else {
-      <div class="card-common flex items-center justify-center h-full min-h-[300px]">
-        <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
-      </div>
-    }
     </div>
-  </div>
+  </section>
 </div>

package/src/lib/ui/components/pending-badge/pending-badge.component.html

@@ -1,12 +1,12 @@
 @if (variant() === 'dot') {
   <span
-    class="inline-block w-[7px] h-[7px] rounded-full bg-warning/70 align-middle"
+    class="inline-block w-[7px] h-[7px] rounded-full bg-muted/60 align-middle"
     [attr.title]="tooltip"
     [attr.aria-label]="tooltip"
   ></span>
 } @else {
   <span
-    class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap align-middle"
+    class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-border-subtle bg-neutral-soft text-muted txt-tag-label whitespace-nowrap align-middle"
     [attr.title]="tooltip"
   >
     <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />

package/src/lib/ui/components/project-card/project-card.component.html

@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="card-common bg-surface w-full flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all"
+  class="card-common bg-surface w-full flex-1 flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all"
   (click)="open.emit(card())"
 >
   <!-- Header: avatar + name/sub + score chip (design 12) -->
@@ -13,7 +13,10 @@
           >{{ card().avatar }}</span
         >
       }
-      <div class="min-w-0">
+      <!-- min-h 46px = name (24) + mt-xs (2) + sub (20): reserves the two-line
+           header even when a card has no sub line, so trend/metric rows line
+           up across the grid row (measured 04/09). -->
+      <div class="min-w-0 min-h-[46px]">
         <div class="txt-heading-06 truncate text-left">{{ card().name }}</div>
         @if (card().sub; as sub) {
           <div class="flex items-center gap-xs txt-utility-description mt-xs">
@@ -88,8 +91,9 @@
   }
 
   @if (card().meta || card().openLabel) {
+    <!-- mt-auto: footers line up across a grid row whatever each card holds -->
     <div
-      class="flex items-center justify-between w-full pt-normal border-t border-border-default"
+      class="flex items-center justify-between w-full pt-normal mt-auto border-t border-border-default"
     >
       <span class="txt-utility-description text-left">{{ card().meta }}</span>
       @if (card().openLabel) {

package/src/lib/ui/components/route-skeleton/route-skeleton.component.css

@@ -16,7 +16,7 @@
 
 /* Ngưỡng + bề rộng panes giữ y hệt master-detail để skeleton không nhảy hình
    khi dữ liệu về. */
-@container fx-rs (min-width: 968px) {
+@container fx-rs (min-width: 720px) {
   .fx-rs-row {
     flex-direction: row;
     align-items: stretch;

package/src/lib/ui/components/sample-frame/sample-frame.component.html

@@ -1,10 +1,9 @@
-<div class="relative rounded-lg border border-dashed border-warning/50 bg-warning/[0.03] p-normal">
-  <!-- flex-wrap + nowrap label: in narrow rails the chip drops to the next line
-       instead of the label breaking mid-word ("SAMPLE / LAYOUT"). -->
-  <div class="flex flex-wrap items-center gap-small mb-normal">
-    <span class="txt-tag-label text-warning uppercase tracking-wide whitespace-nowrap">{{ label() }}</span>
+<div class="relative flex flex-col flex-1 min-h-0">
+  <!-- One quiet chip marks the block as sample data; the tooltip names the
+       missing field. flex-wrap so the chip drops a line in narrow rails. -->
+  <div class="flex flex-wrap items-center gap-small mb-small">
     <span
-      class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap"
+      class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-border-subtle bg-neutral-soft text-muted txt-tag-label whitespace-nowrap"
       [attr.title]="tooltip"
     >
       <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
@@ -12,7 +11,7 @@
     </span>
   </div>
   <!-- Sample content is non-interactive: nothing here reflects real state. -->
-  <div class="pointer-events-none select-none opacity-90">
+  <div class="pointer-events-none select-none opacity-90 flex-1 min-h-0 flex flex-col">
     <ng-content></ng-content>
   </div>
 </div>

package/src/lib/ui/components/section-card/section-card.component.html

@@ -1,4 +1,6 @@
-<div class="card-common">
+<!-- flex column filling the host: cards in one grid row share a height and a
+     projected footer can sit at the bottom with `mt-auto` (design 01). -->
+<div class="card-common bg-surface flex flex-col flex-1 min-h-0">
   @if (titleStyle() === 'eyebrow') {
     <div class="flex items-baseline justify-between gap-normal mb-large">
       <span class="txt-eyebrow">{{ title() }}</span>

package/src/lib/ui/components/segmented/segmented.component.html

@@ -1,5 +1,6 @@
 <div
-  class="relative inline-grid max-w-full grid-flow-col auto-cols-fr items-stretch p-[3px] bg-surface-sunken border border-border rounded-full"
+  class="relative inline-grid max-w-full grid-flow-col items-stretch p-[3px] bg-surface-sunken border border-border rounded-full"
+  [class]="gridClass()"
   role="group"
   [attr.aria-label]="ariaLabel()"
 >
@@ -13,13 +14,16 @@
       [style.transform]="thumbTransform()"
     ></span>
   }
+  <!-- option 30px tall (7px × 18px padding): the text-box trim below collapses the
+       glyph box to ~8px, so padding alone left the pill at 22px (anh Tú 04/09) -->
   @for (option of options(); track option.value) {
     <button
+      #opt
       type="button"
       (click)="select(option)"
       [disabled]="option.disabled"
       [attr.aria-pressed]="option.value === value()"
-      class="relative z-[1] flex min-w-0 items-center justify-center gap-xs px-semi py-[5px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="relative z-[1] flex min-w-0 min-h-[30px] items-center justify-center gap-xs px-[18px] py-[7px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
       [class]="optionClass(option)"
     >
       @if (option.icon) {

package/src/lib/ui/components/severity-badges/severity-badges.component.html

@@ -2,7 +2,7 @@
   @for (badge of badges; track badge.key) {
     <button
       type="button"
-      class="px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50"
+      class="px-2 py-[3px] rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50"
       [ngClass]="badgeClass(badge)"
       [attr.aria-label]="badge.key + ': ' + badge.label"
       (click)="badgeClick.emit(badge.key)"

package/src/lib/ui/components/stat-cards/stat-cards.component.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  container-type: inline-size;
+}
+
+/* Explicit `cols` only holds from md (720px) up; narrower containers fall back
+   to 2-up, then 1-up — figures stay readable on phones (anh Tú 04/09). The
+   inline style carries the wide layout, so the overrides need !important. */
+@container (width < 720px) {
+  .fx-stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
+@container (width < 360px) {
+  .fx-stat-grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}

package/src/lib/ui/components/stat-cards/stat-cards.component.html

@@ -1,4 +1,4 @@
-<div class="grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
+<div class="fx-stat-grid grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
   @for (card of cards(); track card.label) {
     @if (variant() === 'figure') {
       <div class="card-common flex flex-col gap-small min-w-0">
@@ -7,7 +7,7 @@
           class="txt-heading-03"
           [ngClass]="numClass(card)"
           style="font-family: var(--og-font-figure)"
-          >{{ card.value }}</span
+          ><span [fxCountUp]="card.value"></span></span
         >
         @if (card.sub) {
           <span class="txt-utility-caption" [ngClass]="subClass(card)">{{ card.sub }}</span>
@@ -32,7 +32,7 @@
               class="txt-heading-04"
               [ngClass]="numClass(card)"
               style="font-family: var(--og-font-figure)"
-              >{{ card.value }}</span
+              ><span [fxCountUp]="card.value"></span></span
             >
             @if (card.delta) {
               <span class="text-xs font-semibold" [ngClass]="deltaClass(card)">

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

@@ -37,6 +37,8 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
      * dom.". Chỉ dựng directive khi đã có options thật ⇒ đúng một lần init.
      */
     hasOptions: boolean;
+    /** Heights (%) of the pre-init placeholder bars — a fixed, calm silhouette. */
+    readonly placeholderBars: number[];
     labelFontSize: number;
     private chartInstance?;
     private resizeObserver?;
@@ -136,5 +138,20 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "pieLegendAlign": { "alias": "pieLegendAlign"; "required": false; "isSignal": true; }; "pieLegendPosition": { "alias": "pieLegendPosition"; "required": false; "isSignal": true; }; "showPieLabel": { "alias": "showPieLabel"; "required": false; "isSignal": true; }; "showPieLegend": { "alias": "showPieLegend"; "required": false; "isSignal": true; }; "pieCenterLabel": { "alias": "pieCenterLabel"; "required": false; "isSignal": true; }; "mobileWidth": { "alias": "mobileWidth"; "required": false; "isSignal": true; }; "labelFontFamily": { "alias": "labelFontFamily"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, true, never>;
 }
 
-export { ChartComponent };
+/**
+ * Warm the echarts chunk before any chart is on screen.
+ *
+ * `fx-ui-chart` loads echarts lazily (`provideEchartsCore({ echarts: () =>
+ * import('echarts') })`), so the FIRST chart of a session pays the chunk
+ * download right when the user is looking at an empty panel. Call this once
+ * from an idle callback when the app's env injector is created (e.g. a
+ * `provideEnvironmentInitializer` in the remote's root route) and the dashboard
+ * charts appear on the frame they mount. Same module URL as the directive's
+ * import ⇒ one shared instance, no double load.
+ */
+declare function preloadEcharts(): Promise<unknown>;
+/** Schedule `preloadEcharts()` when the main thread is idle (SSR/tests: no-op). */
+declare function preloadEchartsWhenIdle(timeoutMs?: number): void;
+
+export { ChartComponent, preloadEcharts, preloadEchartsWhenIdle };
 export type { IChartType };

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

@@ -52,6 +52,13 @@ declare class FlowCanvasComponent {
     /** Caller-translated hint shown when the graph is empty. */
     readonly emptyText: _angular_core.InputSignal<string>;
     readonly nodeClick: _angular_core.OutputEmitterRef<string>;
+    private readonly flow;
+    private readonly host;
+    private readonly destroyRef;
+    constructor();
+    private fitHandle;
+    /** Coalesces fit requests into one frame after vflow has measured its nodes. */
+    private scheduleFit;
     /** Column index per node: pinned value, else longest path from a source. */
     private readonly columns;
     /** ngx-vflow nodes: html-template cards positioned by the derived layout. */