@foxeltech/angular-ui 0.4.0 → 0.7.75

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

@@ -1,11 +1,85 @@
-/* Full-width when stacked; fixed width beside the detail pane on lg+ (1080px). */
-.fx-md-list {
+/* ============================================================================
+   Layout 3 cụm quyết định theo BỀ RỘNG CỦA CHÍNH HÀNG ĐÓ, không theo viewport.
+
+   🔬 Vì sao đổi (truy ra 03/09): trước đây dùng `@media (min-width: 1080px)`
+   cộng với `lg:flex-row` (mà `lg` trong lib này là **1080px**, không phải
+   1024px). Viewport là proxy SAI cho câu hỏi "có đủ chỗ cho 3 cụm không":
+   hàng thật = viewport − drawer(261px) − padding. Đo được:
+
+     viewport 1080 → hàng 787px → facets 230 + list 420 + gap ≈ 690
+                                  ⇒ cụm detail chỉ còn **97px**
+     viewport 1280 → hàng 987px ⇒ detail 297px (vẫn vỡ)
+     viewport 1440 → hàng 1147px ⇒ detail 457px (mới dùng được)
+
+   Nên có HAI vùng hỏng: <1080px xếp dọc dù màn to (đúng cái anh Tú gặp: OS
+   scaling 125-150% hoặc zoom kéo viewport xuống dưới 1080), và 1080-1280px
+   "ba cột nhưng detail quá hẹp".
+
+   Container query chữa cả hai: hàng tự biết mình rộng bao nhiêu, nên drawer
+   thu lại là có thêm chỗ ngay, và không phụ thuộc thang breakpoint toàn cục.
+   ============================================================================ */
+
+/* Host là containment context. `display: block` là BẮT BUỘC — host component
+   mặc định `display: inline` thì `container-type: inline-size` không có
+   inline-size xác định để đo. */
+:host {
+  display: block;
+  container-type: inline-size;
+  container-name: fx-md;
+}
+
+/* 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. */
+.fx-md-list,
+.fx-md-facets {
   width: 100%;
 }
 
-@media (min-width: 1080px) {
+/*
+ * 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).
+ */
+@container fx-md (min-width: 968px) {
+  .fx-md-row {
+    flex-direction: row;
+    height: var(--fx-md-pane-h, calc(100vh - 300px));
+    min-height: 420px;
+  }
+
+  /* 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. */
+  .fx-md-facets {
+    flex: 0 1 230px;
+    min-width: 200px;
+    max-width: 260px;
+  }
+
   .fx-md-list {
-    width: var(--fx-md-list-width, 420px);
-    flex-shrink: 0;
+    width: auto;
+    flex: 0 1 var(--fx-md-list-width, 420px);
+    min-width: 320px;
+    max-width: var(--fx-md-list-width, 420px);
   }
+
+  .fx-md-detail {
+    flex: 1 1 400px;
+    min-width: 400px;
+  }
+}
+
+/* prevnext style: the Material paginator stays as the paging engine but is
+   visually removed (display:none would break its measurements on re-show). */
+.fx-md-paginator-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
 }

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

@@ -1,11 +1,33 @@
-<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth()">
+<!-- 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. -->
+<div
+  class="fx-md-row flex flex-col items-stretch gap-xl"
+  [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"
+    [class.hidden]="!hasFacets"
+  >
+    <div class="flex-1 min-h-0 overflow-auto pr-xs">
+      <ng-content select="[mdFacets]"></ng-content>
+    </div>
+  </div>
+
   <!-- Master: list pane -->
-  <div class="fx-md-list card-common">
+  <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>
     <div
-      class="flex flex-col gap-normal overflow-auto pr-xs"
-      [style.maxHeight]="maxListHeight()"
+      class="flex flex-col gap-normal overflow-auto pr-xs flex-1 min-h-0"
       role="listbox"
       [attr.aria-label]="listLabel() || null"
     >
@@ -24,7 +46,7 @@
             class="text-left rounded-lg border p-semi transition-colors"
             [ngClass]="
               isSelected(row)
-                ? 'border-gradient-primary-start bg-gradient-primary-start/5'
+                ? 'border-accent bg-accent-soft/60'
                 : 'border-border-default hover:border-border-interactive bg-bg-primary'
             "
           >
@@ -44,14 +66,41 @@
          wires page events — a binding here would double-fetch every change. -->
     <mat-paginator
       class="mt-normal"
+      [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">
+        <span class="txt-utility-description" style="font-family: var(--og-font-figure)">
+          {{ rangeText() }}
+        </span>
+        <div class="flex gap-small">
+          <button
+            type="button"
+            class="btn-alternative !h-8 !px-semi text-sm"
+            [disabled]="!paginator().hasPreviousPage()"
+            (click)="paginator().previousPage()"
+          >
+            {{ prevLabel() }}
+          </button>
+          <button
+            type="button"
+            class="btn-alternative !h-8 !px-semi text-sm"
+            [disabled]="!paginator().hasNextPage()"
+            (click)="paginator().nextPage()"
+          >
+            {{ nextLabel() }}
+          </button>
+        </div>
+      </div>
+    }
   </div>
 
   <!-- Detail pane -->
-  <div class="w-full lg:flex-1 min-w-0">
+  <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>
@@ -62,9 +111,10 @@
         ></ng-container>
       }
     } @else {
-      <div class="card-common flex items-center justify-center h-[300px]">
+      <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>
 </div>

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

@@ -0,0 +1,15 @@
+@if (variant() === 'dot') {
+  <span
+    class="inline-block w-[7px] h-[7px] rounded-full bg-warning/70 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"
+    [attr.title]="tooltip"
+  >
+    <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
+    {{ label() }}
+  </span>
+}

package/src/lib/ui/components/pipeline-stepper/pipeline-stepper.component.html

@@ -0,0 +1,45 @@
+<ol class="flex items-start overflow-x-auto pb-small" role="list">
+  @for (stage of stages(); track stage.id; let i = $index; let last = $last) {
+    <li class="flex items-start" [class.flex-1]="!last" [attr.aria-current]="stateOf(stage) === 'active' ? 'step' : null">
+      <button
+        type="button"
+        class="flex flex-col items-center gap-xs min-w-20 px-xs"
+        [class.cursor-pointer]="canClick(stage)"
+        [class.cursor-default]="!canClick(stage)"
+        [tabindex]="canClick(stage) ? 0 : -1"
+        (click)="onStageClick(stage, i)"
+      >
+        <span
+          class="w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-colors"
+          [ngClass]="circleClass(stage)"
+        >
+          @switch (stateOf(stage)) {
+            @case ('done') {
+              <fx-ui-hero-icon icon="check" [size]="16" class="flex" />
+            }
+            @case ('error') {
+              <fx-ui-hero-icon icon="exclamation-triangle" [size]="16" class="flex" />
+            }
+            @default {
+              {{ i + 1 }}
+            }
+          }
+        </span>
+        <span class="text-xs text-center whitespace-nowrap" [ngClass]="labelClass(stage)">
+          {{ stage.label }}
+        </span>
+        @if (stage.description) {
+          <span class="txt-utility-description text-center whitespace-nowrap">
+            {{ stage.description }}
+          </span>
+        }
+      </button>
+      @if (!last) {
+        <div class="flex-1 h-[2px] mt-4 mx-xs rounded-pill min-w-6" [ngClass]="connectorClass(stage)"></div>
+      }
+    </li>
+  }
+</ol>
+<div class="mt-large">
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,102 @@
+<button
+  type="button"
+  class="card-common bg-surface w-full 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) -->
+  <div class="flex items-start justify-between gap-normal w-full">
+    <div class="flex items-start gap-normal min-w-0">
+      @if (card().avatar) {
+        <span
+          class="w-9 h-9 rounded-control bg-accent-soft text-accent flex items-center justify-center shrink-0 txt-utility-caption font-bold uppercase"
+          style="font-family: var(--og-font-figure)"
+          >{{ card().avatar }}</span
+        >
+      }
+      <div class="min-w-0">
+        <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">
+            @if (sub.icon) {
+              <fx-ui-hero-icon [icon]="sub.icon" [size]="13" class="flex shrink-0" />
+            }
+            <span class="truncate">{{ sub.label }}</span>
+          </div>
+        } @else if (card().description) {
+          <div class="txt-card-content truncate mt-xs text-left">{{ card().description }}</div>
+        }
+      </div>
+    </div>
+    @if (card().score !== undefined) {
+      <div class="text-right shrink-0">
+        <span
+          class="txt-tag-label px-normal py-[2px] rounded-pill whitespace-nowrap"
+          [ngClass]="scoreChipClass()"
+          >{{ card().score }}</span
+        >
+        @if (card().scoreLabel) {
+          <div class="txt-utility-description mt-xs">{{ card().scoreLabel }}</div>
+        }
+      </div>
+    }
+  </div>
+
+  @if (card().chips?.length) {
+    <div class="flex flex-wrap gap-xs w-full">
+      @for (chip of card().chips; track chip.label) {
+        <span class="txt-tag-label px-normal py-[1px] rounded-pill" [ngClass]="chipClass(chip)">
+          {{ chip.label }}
+        </span>
+      }
+    </div>
+  }
+
+  <!-- Design-12 risk trend: toned blocks + caption line -->
+  @if (card().trend; as trend) {
+    <div class="w-full">
+      <div class="flex gap-xs w-full">
+        @for (tone of trend.tones; track $index) {
+          <span class="flex-1 h-4 rounded-[2px]" [ngClass]="blockClass(tone)"></span>
+        }
+      </div>
+      @if (trend.caption || trend.aside) {
+        <div class="flex items-center justify-between mt-xs txt-utility-description font-mono">
+          <span>{{ trend.caption }}</span>
+          <span>{{ trend.aside }}</span>
+        </div>
+      }
+    </div>
+  }
+
+  @if (card().spark?.length) {
+    <fx-ui-sparkbar class="w-full" [values]="card().spark!" [height]="24" />
+  }
+
+  <!-- Metric columns: figure + caption (design 12) -->
+  @if (card().metrics?.length) {
+    <div
+      class="grid gap-normal w-full"
+      [style.grid-template-columns]="'repeat(' + card().metrics!.length + ', minmax(0, 1fr))'"
+    >
+      @for (m of card().metrics; track m.label) {
+        <div class="min-w-0 text-left">
+          <div class="txt-heading-06" style="font-family: var(--og-font-figure)">{{ m.value }}</div>
+          <div class="txt-utility-description truncate">{{ m.label }}</div>
+        </div>
+      }
+    </div>
+  }
+
+  @if (card().meta || card().openLabel) {
+    <div
+      class="flex items-center justify-between w-full pt-normal border-t border-border-default"
+    >
+      <span class="txt-utility-description text-left">{{ card().meta }}</span>
+      @if (card().openLabel) {
+        <span class="txt-utility-caption font-bold text-accent whitespace-nowrap"
+          >{{ card().openLabel }} ›</span
+        >
+      }
+    </div>
+  }
+</button>

package/src/lib/ui/components/radio-button/radio-button.component.html

@@ -31,7 +31,7 @@
       [attr.aria-checked]="value === opt.value"
       (click)="onSelectValue(opt.value)"
       [disabled]="disabled"
-      [class.text-gray-900]="value !== opt.value"
+      [class.text-strong]="value !== opt.value"
       class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
       [matTooltip]="opt.tooltip || ''"
       matTooltipPosition="right"

package/src/lib/ui/components/radio-button-toggle/radio-button-toggle.component.html

@@ -16,7 +16,7 @@
       [attr.aria-checked]="value === opt.value"
       (click)="onSelectValue(opt.value)"
       [disabled]="disabled"
-      [class.text-gray-900]="value !== opt.value"
+      [class.text-strong]="value !== opt.value"
       class="flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
     >
       <span

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

@@ -0,0 +1,38 @@
+/* Cùng cơ chế với master-detail: hàng 3 cụm quyết định theo BỀ RỘNG CỦA CHÍNH
+   NÓ (container query), không theo viewport. Nếu chỗ này còn dùng `lg:` thì
+   skeleton và màn thật sẽ lật ở hai ngưỡng khác nhau — xem ghi chú đầu
+   master-detail.component.css. */
+:host {
+  display: block;
+  container-type: inline-size;
+  container-name: fx-rs;
+}
+
+.fx-rs-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl, 1.5rem);
+}
+
+/* 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) {
+  .fx-rs-row {
+    flex-direction: row;
+    align-items: stretch;
+    height: calc(100vh - 300px);
+    min-height: 420px;
+  }
+
+  .fx-rs-facets {
+    flex: 0 1 230px;
+    min-width: 200px;
+    max-width: 260px;
+  }
+
+  .fx-rs-list {
+    flex: 0 1 420px;
+    min-width: 320px;
+    max-width: 420px;
+  }
+}

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

@@ -0,0 +1,184 @@
+<div class="w-full flex flex-col gap-xl">
+  @for (b of blocks(); track $index) {
+    @switch (b.kind) {
+      @case ('heading') {
+        <div data-fx-skel="heading" class="flex flex-col md:flex-row md:items-start justify-between gap-normal">
+          <div class="flex flex-col gap-small">
+            <div class="skeleton-load h-7 w-64"></div>
+            <div class="skeleton-load h-3 w-32"></div>
+          </div>
+          @if (items(b, 2).length) {
+            <div class="flex items-center gap-normal">
+              @for (a of items(b, 2); track a) {
+                <div class="skeleton-load h-9 rounded-lg" [class]="a === 0 ? 'w-28' : 'w-32'"></div>
+              }
+            </div>
+          }
+        </div>
+      }
+
+      @case ('toolbar') {
+        <div data-fx-skel="toolbar" class="flex flex-wrap items-center gap-normal">
+          <div class="skeleton-load h-9 w-72 rounded-lg"></div>
+          @for (f of items(b, 2); track f) {
+            <div class="skeleton-load h-7 rounded-full" [class]="f % 2 ? 'w-24' : 'w-20'"></div>
+          }
+        </div>
+      }
+
+      @case ('table') {
+        <!-- Bảng: mỗi Ô là một `.skeleton-load` riêng, đúng cách
+             `fx-ui-table-cell [loading]` làm trên bảng thật. -->
+        <div data-fx-skel="table" class="card-common overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-border-default">
+                @for (c of cols(b); track c) {
+                  <th class="px-normal py-semi text-left">
+                    <div class="skeleton-load h-3" [style.width.%]="headWidth(c)"></div>
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (r of rows(b); track r) {
+                <tr class="border-b border-border-subtle">
+                  @for (c of cols(b); track c) {
+                    <td class="px-normal py-semi align-middle">
+                      <div class="skeleton-load h-4" [style.width.%]="cellWidth(r, c)"></div>
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+
+      @case ('stat-cards') {
+        <div data-fx-skel="stat-cards" class="grid gap-normal grid-cols-2 md:grid-cols-4">
+          @for (i of items(b, 4); track i) {
+            <div class="card-common flex flex-col gap-normal">
+              <div class="skeleton-load h-3 w-16"></div>
+              <div class="skeleton-load h-8 w-24"></div>
+              <div class="skeleton-load h-3 w-20"></div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('kpi-strip') {
+        <!-- MỘT card chia cột (kiểu app-dash-kpi-row), không phải các tile rời -->
+        <div data-fx-skel="kpi-strip" class="card-common !p-0">
+          <div class="grid grid-cols-2 md:grid-cols-4">
+            @for (i of items(b, 4); track i) {
+              <div
+                class="flex flex-col gap-normal px-xl py-large border-border-subtle"
+                [class.border-l]="!$first"
+              >
+                <div class="skeleton-load h-3 w-20"></div>
+                <div class="skeleton-load h-9 w-28"></div>
+                <div class="skeleton-load h-3 w-24"></div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
+      @case ('panels') {
+        <div data-fx-skel="panels" class="grid gap-xl" [class]="gridClass(b)">
+          @for (i of items(b, 2); track i) {
+            <div class="card-common flex flex-col gap-large">
+              <div class="skeleton-load h-4 w-1/3"></div>
+              <div class="flex items-end gap-normal h-40">
+                @for (x of bars; track x) {
+                  <div class="skeleton-load flex-1 rounded-t" [style.height.%]="barHeight(x)"></div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('cards') {
+        <div data-fx-skel="cards" class="grid gap-xl" [class]="gridClass(b)">
+          @for (i of items(b, 6); track i) {
+            <div class="card-common flex flex-col gap-normal">
+              <div class="flex items-center gap-normal">
+                <div class="skeleton-load w-9 h-9 rounded-lg shrink-0"></div>
+                <div class="flex flex-col gap-small flex-1 min-w-0">
+                  <div class="skeleton-load h-4 w-3/4"></div>
+                  <div class="skeleton-load h-3 w-1/2"></div>
+                </div>
+                <div class="skeleton-load h-5 w-14 rounded-full shrink-0"></div>
+              </div>
+              <div class="grid grid-cols-4 gap-normal pt-normal border-t border-border-subtle">
+                @for (m of [0, 1, 2, 3]; track m) {
+                  <div class="flex flex-col gap-small">
+                    <div class="skeleton-load h-2.5 w-full"></div>
+                    <div class="skeleton-load h-4 w-2/3"></div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('card') {
+        <div data-fx-skel="card" class="card-common flex flex-col gap-large">
+          <div class="skeleton-load h-4 w-1/3"></div>
+          <div class="flex flex-col gap-normal">
+            @for (r of [0, 1, 2, 3]; track r) {
+              <div class="skeleton-load h-3" [style.width.%]="cellWidth(r, 1)"></div>
+            }
+          </div>
+        </div>
+      }
+
+      @case ('tabs') {
+        <div data-fx-skel="tabs" class="flex items-center gap-large border-b border-border-default pb-normal">
+          @for (t of items(b, 6); track t) {
+            <div class="flex items-center gap-small">
+              <div class="skeleton-load w-4 h-4"></div>
+              <div class="skeleton-load h-3 w-16"></div>
+            </div>
+          }
+        </div>
+      }
+
+      @case ('facets') {
+        <div data-fx-skel="facets" class="fx-rs-row">
+          <div class="fx-rs-facets card-common overflow-hidden">
+            <fx-ui-skeleton-facets />
+          </div>
+          <div class="fx-rs-list card-common overflow-hidden">
+            <fx-ui-skeleton-list [rows]="6" />
+          </div>
+          <div class="flex-1 min-w-0 overflow-hidden">
+            <fx-ui-skeleton-detail />
+          </div>
+        </div>
+      }
+
+      @case ('detail') {
+        <fx-ui-skeleton-detail data-fx-skel="detail" />
+      }
+
+      @case ('form') {
+        <div data-fx-skel="form" class="card-common flex flex-col gap-large">
+          @for (r of [0, 1, 2, 3]; track r) {
+            <div class="flex flex-col gap-small">
+              <div class="skeleton-load h-3 w-24"></div>
+              <div class="skeleton-load h-9 w-full rounded-lg"></div>
+            </div>
+          }
+          <div class="flex justify-end gap-normal">
+            <div class="skeleton-load h-9 w-24 rounded-lg"></div>
+            <div class="skeleton-load h-9 w-28 rounded-lg"></div>
+          </div>
+        </div>
+      }
+    }
+  }
+</div>

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

@@ -0,0 +1,18 @@
+<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>
+    <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"
+      [attr.title]="tooltip"
+    >
+      <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
+      {{ pendingLabel() }}
+    </span>
+  </div>
+  <!-- Sample content is non-interactive: nothing here reflects real state. -->
+  <div class="pointer-events-none select-none opacity-90">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+<span
+  class="inline-flex items-center justify-center rounded-control whitespace-nowrap"
+  [ngClass]="[badgeClass(), sizeClass()]"
+  style="font-family: var(--og-font-figure)"
+>
+  {{ score() }}@if (outOf() !== null) {<span class="opacity-60">&nbsp;/&nbsp;{{ outOf() }}</span>}
+</span>

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

@@ -0,0 +1,40 @@
+@if (label()) {
+  <div class="txt-utility-caption font-bold text-text-secondary mb-normal">{{ label() }}</div>
+}
+<div class="rounded-control border border-border bg-surface overflow-hidden">
+  <!-- Window chrome: traffic lights + mono file name + capture time -->
+  <div class="flex items-center gap-small px-normal py-small border-b border-border bg-surface-sunken">
+    <span class="flex items-center gap-xs shrink-0">
+      <span class="w-2 h-2 rounded-full bg-critical/70"></span>
+      <span class="w-2 h-2 rounded-full bg-warning/70"></span>
+      <span class="w-2 h-2 rounded-full bg-success/70"></span>
+    </span>
+    @if (fileName()) {
+      <span class="txt-utility-caption text-text-secondary truncate" style="font-family: var(--og-font-mono)">
+        {{ fileName() }}
+      </span>
+    }
+    @if (timestamp()) {
+      <span class="txt-utility-caption text-text-placeholder shrink-0" style="font-family: var(--og-font-mono)">
+        · {{ timestamp() }}
+      </span>
+    }
+  </div>
+
+  @if (src()) {
+    <img [src]="src()" [alt]="alt() || fileName()" class="block w-full object-cover" [style.height]="height()" />
+  } @else {
+    <div
+      class="flex flex-col items-center justify-center gap-normal px-large text-center"
+      [style.height]="height()"
+    >
+      <fx-ui-hero-icon icon="camera" [size]="22" class="flex text-text-placeholder"></fx-ui-hero-icon>
+      @if (caption()) {
+        <span class="txt-utility-caption text-text-placeholder max-w-[280px]">{{ caption() }}</span>
+      }
+    </div>
+  }
+</div>
+@if (src() && caption()) {
+  <div class="txt-utility-caption text-text-placeholder mt-normal">{{ caption() }}</div>
+}