@squadbase/vantage 0.6.2-dev1.ac99e02 → 0.6.2-dev1.d7c0911

package/dist/vite/index.js

@@ -1,5 +1,5 @@
-export { vantagePlugin } from '../chunk-IBGOCWJB.js';
-import '../chunk-QEWCYW3I.js';
+export { vantagePlugin } from '../chunk-2ICNHUG6.js';
+import '../chunk-WAMZWZJB.js';
 import '../chunk-CEXAQQ5W.js';
 import '../chunk-RNTDBX6S.js';
 import '../chunk-46QI6GFC.js';

package/docs/en/components.md

@@ -113,7 +113,12 @@ here they're grouped by what they're for.
 
 ## `@squadbase/vantage/components`
 
-Dashboard parts composed from `ui/`.
+Dashboard parts composed from `ui/`. Their source of truth is SquadKit; Vantage re-exports them.
+
+Show a KPI with [`KpiCard`](parts/kpi-card) and a change with
+[`Delta`](parts/delta) (pass `comparison` and `polarity`).
+[`TrendIndicator`](parts/trend-indicator) is deprecated. Number formatting and the
+change calculation live in [format / comparison](parts/format).
 
 | Component | What it is |
 | --- | --- |
@@ -130,8 +135,10 @@ Dashboard parts composed from `ui/`.
 | [`SegmentedControl`](parts/segmented-control) | Single-choice segments |
 | [`SearchableSelect`](parts/searchable-select) | Single choice with search |
 | [`MultiSelect`](parts/multi-select) | Multiple choice with search |
+| [`KpiCard`](parts/kpi-card) | One KPI as a card: value, change, previous actual, conclusion |
+| [`Delta`](parts/delta) | The change against a comparison, derived from the values |
 | [`MetricValue`](parts/metric-value) | A KPI's number and unit |
-| [`TrendIndicator`](parts/trend-indicator) | An arrow and a percentage |
+| [`TrendIndicator`](parts/trend-indicator) | Deprecated — use `Delta` |
 | [`StatusBadge`](parts/status-badge) | A dot-and-label status badge |
 | [`Placeholder`](parts/placeholder) | An inline marker for sample data |
 
@@ -154,9 +161,8 @@ import {
   PageShellHeaderEnd,
   PageShellActions,
   PageShellContent,
+  KpiCard,
   DashboardCardPreset,
-  MetricValue,
-  TrendIndicator,
   EChart,
   type EChartsOption,
 } from "@squadbase/vantage/components";
@@ -184,17 +190,25 @@ export default function Overview() {
 
       <PageShellContent>
         <div className="grid gap-4 md:grid-cols-3">
-          <DashboardCardPreset title="Revenue">
-            <MetricValue className="my-0">$12,400</MetricValue>
-            <TrendIndicator value={12.4} direction="up" />
-          </DashboardCardPreset>
-          <DashboardCardPreset title="New customers">
-            <MetricValue className="my-0">128</MetricValue>
-            <TrendIndicator value={3.1} direction="down" />
-          </DashboardCardPreset>
-          <DashboardCardPreset title="Churn">
-            <MetricValue className="my-0">2.1%</MetricValue>
-          </DashboardCardPreset>
+          <KpiCard
+            label="Revenue"
+            value={1_240_000}
+            format="currency"
+            comparison={{ previous: 1_103_000, vs: "prior-period" }}
+          />
+          <KpiCard
+            label="New customers"
+            value={128}
+            format="number"
+            comparison={{ previous: 132, vs: "prior-period" }}
+          />
+          <KpiCard
+            label="Churn"
+            value={0.021}
+            format={{ type: "percent", digits: 1 }}
+            comparison={{ previous: 0.026, vs: "prior-period" }}
+            polarity="lower-is-better"
+          />
         </div>
 
         <DashboardCardPreset title="Monthly revenue" className="mt-4">

package/docs/en/parts/data-table.md

@@ -56,6 +56,28 @@ it.
 
 `useDataTable()` gives a child component the TanStack `table` instance directly.
 
+## Column formats and CSV export
+
+A column without `cell` can format its number with `meta.format` (right-aligned, tabular-nums; null shows `meta.nullLabel`, default `—`). Pass a function when the currency changes per row. `DataTableExport` writes a BOM-prefixed UTF-8 CSV in the same sorted, filtered order as the screen; with `DataTablePreset`, `exportable` alone adds it to the toolbar.
+
+```tsx
+const columns: ColumnDef<Row>[] = [
+  { accessorKey: "month", header: "Month" },
+  {
+    accessorKey: "revenue",
+    header: "Revenue",
+    meta: { format: (row) => ({ type: "currency", currency: row.currency, notation: "standard" }) },
+  },
+];
+
+<DataTable columns={columns} data={rows}>
+  <DataTableToolbar toolbar={<DataTableExport fileName="sales.csv" />} />
+  <DataTableContent />
+</DataTable>;
+```
+
+`values="raw"` exports raw values; `scope="page"` exports only the visible page. For server-side paging, `rowCount` (total rows), `manualSorting`, `manualFiltering` and `isLoading` are also available.
+
 ## Paginating on the server
 
 Own `pagination` and `onPaginationChange`, and pass the total in `pageCount`.

package/docs/en/parts/delta.md

@@ -0,0 +1,50 @@
+# Delta
+
+> The change against a comparison — arrow, signed rate and label, all derived from the values.
+
+Shows a change as one line: "↑ +12.4% 前期比". **Direction, rate, colour and wording are all computed
+from `value` and `comparison`** and cannot be passed in, so the arrow and the colour can never disagree.
+Colour is never the only signal — the arrow and the sign always accompany it. For metrics where a rise
+is bad (churn, error rate), pass `polarity="lower-is-better"`.
+
+It replaces the deprecated [`TrendIndicator`](parts/trend-indicator).
+
+```tsx
+import { Delta } from "@squadbase/vantage/components";
+import type { DeltaProps, Comparison, Polarity } from "@squadbase/vantage/components";
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number \| null \| undefined` |  | The current value. **Required.** The previous one comes from `comparison`. |
+| `comparison` | `Comparison` |  | What the value is compared against. **Required**, so the change always carries its label. See below. |
+| `polarity` | `"higher-is-better" \| "lower-is-better"` | `"higher-is-better"` | Whether a rise is good. |
+| `neutralBand` | `number` | `0.01` | Absolute ratio below which the change reads as flat. Default 1%. |
+| `variant` | `"badge" \| "inline"` | `"badge"` | A bordered badge, or plain text for use inline. |
+| `locale` | `string` | `"ja-JP"` | Locale for the percent. |
+| `showLabel` | `boolean` | `true` | Show the comparison label ("前期比") after the percent. |
+| `className` | `string` |  | Classes to add. |
+
+## Comparison
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `previous` | `number \| null \| undefined` | The value compared against. `null` or `0` yields no rate, shown as "—". |
+| `vs` | `"prior-period" \| "prior-year" \| "target"` | The kind of comparison. Default labels: 前期比 / 前年同期比 / 目標比. |
+| `label` | `string` | Override the label (e.g. "vs last week"). |
+
+## Migrating from TrendIndicator
+
+```tsx
+// Before: direction and colour chosen by hand
+<TrendIndicator value={12.4} direction="up" />
+
+// After: pass the current and previous values
+<Delta value={1_240_000} comparison={{ previous: 1_103_000, vs: "prior-period" }} />
+
+// A metric where down is good
+<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
+```
+
+The colours come from the `--positive` / `--negative` / `--neutral` tokens. To show a KPI as a whole
+card, [`KpiCard`](parts/kpi-card) uses `Delta` inside.

package/docs/en/parts/format.md

@@ -0,0 +1,43 @@
+# format / comparison
+
+> The number formatting (formatValue) and change calculation (computeComparison) shared by KPIs, tables and charts.
+
+The formatting and comparison logic that `KpiCard` / `Delta` use internally, exposed as functions. Use
+them when a table cell or a chart's `valueFormatter` should match the KPIs. Shortening (e.g. "4.8億")
+is left to `Intl.NumberFormat`; no unit strings are hard-coded.
+
+```tsx
+import {
+  formatValue,
+  formatDelta,
+  toValueFormatter,
+  computeComparison,
+} from "@squadbase/vantage/components";
+import type { ValueFormat, Comparison, ComparisonResult } from "@squadbase/vantage/components";
+```
+
+## ValueFormat
+
+One of `"number" | "compact" | "currency" | "percent" | "multiple"`, or `{ type, digits?, currency? }`.
+The default format is `"compact"`, the default currency `JPY`, the default locale `"ja-JP"`. `percent`
+takes a ratio (`0.124` → 12.4%). `null` / `undefined` / `NaN` format as "—".
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `formatValue(value, format?, locale?)` | `string` | Format a value. |
+| `formatDelta(value, format?, locale?)` | `string` | For differences: always signed except zero (`+12.4%`). |
+| `toValueFormatter(format?, locale?)` | `(value) => string` | A one-argument formatter with the format and locale bound — fits a chart's `valueFormatter`. |
+
+```tsx
+formatValue(48_200_000, "currency");                // "￥48,200,000"
+formatValue(0.021, { type: "percent", digits: 1 }); // "2.1%"
+<LineChart valueFormatter={toValueFormatter("compact")} … />
+```
+
+## computeComparison
+
+`computeComparison(current, comparison, { polarity?, neutralBand? })` returns
+`{ current, previous, difference, ratio, direction, sentiment, label, vs }`. A rate is produced only
+when the previous value is a non-zero number; moves inside `neutralBand` (default 0.01) give
+`direction: "flat"`. `sentiment` (`"positive" | "negative" | "neutral"`) follows `polarity`. Leave the
+rendering to [`Delta`](parts/delta) rather than building arrows and colours yourself.

package/docs/en/parts/kpi-card.md

@@ -0,0 +1,57 @@
+# KpiCard
+
+> One KPI as a card — value, change, previous actual and a one-line conclusion, all derived from numbers.
+
+A card that shows one KPI. **Pass numbers and enums only**, and it lays out, top to bottom: the metric
+name → the value → the change ([`Delta`](parts/delta)) → the previous actual → a
+one-sentence conclusion. Direction, rate, colour, remaining-to-target, achievement and record highs are
+all computed inside the card, so no two props can disagree. Reach for this before composing a KPI tile
+from `DashboardCardPreset` + `MetricValue`.
+
+```tsx
+import { KpiCard } from "@squadbase/vantage/components";
+import type { KpiCardProps, KpiCardSource, Comparison, Polarity, ValueFormat } from "@squadbase/vantage/components";
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` |  | The metric name. **Required.** |
+| `value` | `number \| null \| undefined` |  | The current value. **Required.** `null` / `undefined` renders "—". |
+| `format` | `ValueFormat` | `"compact"` | How the value is formatted (see the format / comparison page); also used for previous, target and remaining. |
+| `locale` | `string` | `"ja-JP"` | The formatting locale. |
+| `comparison` | `Comparison` |  | What the value is compared against (`{ previous, vs, label? }`). Adds the change and the previous-actual line. |
+| `polarity` | `"higher-is-better" \| "lower-is-better"` | `"higher-is-better"` | Whether a rise is good. Use `"lower-is-better"` for metrics like churn. |
+| `neutralBand` | `number` | `0.01` | Absolute ratio below which the change reads as flat. |
+| `showPrevious` | `boolean` | `true` | Show the previous actual ("前期 400"). Needs `comparison`. |
+| `summary` | `string` |  | The conclusion sentence, as a **template** whose placeholders (below) the card fills. |
+| `target` | `number` |  | Target for the current period; adds a remaining / achievement line. |
+| `period` | `{ start: Date \| string \| number; end: Date \| string \| number }` |  | The current period. With `target`, adds a pace projection (marked 見込み) while the period is in progress. |
+| `history` | `ReadonlyArray<number \| null \| undefined>` |  | Series ending at the current period (last point = `value`); adds a record badge. |
+| `historyGrain` | `"day" \| "week" \| "month" \| "quarter" \| "year"` | `"month"` | The grain of `history`. |
+| `source` | `{ period?: string; count?: number; name?: string }` |  | A data-source footnote (period, row count, source name). |
+| `updatedAt` | `Date \| string \| number` |  | When the data was last refreshed; shown as relative time. |
+| `now` | `Date \| number` |  | Reference time for the projection and relative time (for deterministic rendering). |
+| `isLoading` | `boolean` | `false` | Render a skeleton with the final shape instead of the values. |
+| `className` | `string` |  | Classes to add. |
+
+## Summary placeholders
+
+`{value}` `{delta}` `{difference}` `{previous}` `{label}` `{target}` `{achievement}` `{remaining}`.
+Unknown placeholders are left as written; a known one whose value is missing becomes "—".
+
+> [!WARNING]
+> **Never put numbers in the template itself.** Insert every number through a placeholder, so the
+> sentence can't go stale when the value changes.
+
+```tsx
+<KpiCard
+  label="Revenue"
+  value={48_200_000}
+  format="currency"
+  comparison={{ previous: 42_900_000, vs: "prior-period" }}
+  summary="{label} grew {difference} ({delta}) on last month."
+/>
+```
+
+The card's built-in wording (labels such as 前期比 and 目標まであと) is Japanese. To place just the
+change inside a table or tile, use [`Delta`](parts/delta) on its own.

package/docs/en/parts/metric-value.md

@@ -2,7 +2,8 @@
 
 > The KPI number, with MetricUnit for the unit.
 
-A tight-tracking display for a KPI's number. Units and other trailing text go in `MetricUnit`.
+A tight-tracking display for a KPI's number. Units and other trailing text go in `MetricUnit`. For a whole KPI
+tile, consider [`KpiCard`](parts/kpi-card) first — it also shows the change and the previous actual.
 
 ```tsx
 import { MetricValue, MetricUnit, metricValueVariants } from "@squadbase/vantage/components";
@@ -18,6 +19,6 @@ It carries vertical margin (`my-4`) by default. Inside a card, pass `className="
 ```tsx
 <DashboardCardPreset title="Revenue">
   <MetricValue className="my-0">$12,400</MetricValue>
-  <TrendIndicator value={12.4} direction="up" />
+  <Delta value={12_400} comparison={{ previous: 11_030, vs: "prior-period" }} />
 </DashboardCardPreset>
 ```

package/docs/en/parts/sparkline.md

@@ -44,4 +44,4 @@ series. `Sparkline` conveys the *shape* of a series and nothing else — **no ti
 > [!NOTE]
 > It is `aria-hidden="true"`, so screen readers skip it. Put the actual number next to it as text —
 > [`MetricValue`](parts/metric-value) or
-> [`TrendIndicator`](parts/trend-indicator).
+> [`Delta`](parts/delta).

package/docs/en/parts/trend-indicator.md

@@ -1,6 +1,22 @@
 # TrendIndicator
 
-> An arrow and a percentage; positiveIsGood decides the colour.
+> Deprecated — use Delta for new code. An arrow and a percentage.
+
+> [!WARNING]
+> **Deprecated. Use [`Delta`](parts/delta) in new code.** `TrendIndicator` takes the
+> direction and colour by hand, so the value and the arrow can disagree. `Delta` computes direction,
+> rate, colour and label from the current and compared values. To show a KPI as a card, use
+> [`KpiCard`](parts/kpi-card).
+
+```tsx
+// Before
+<TrendIndicator value={12.4} direction="up" />
+<TrendIndicator value={0.4} direction="down" positiveIsGood={false} />
+
+// After
+<Delta value={1_240_000} comparison={{ previous: 1_103_000, vs: "prior-period" }} />
+<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
+```
 
 Shows a change as an arrow plus a percentage. **Up doesn't always mean good**, so the colour comes
 from `direction` combined with `positiveIsGood` — pass `positiveIsGood={false}` for metrics like

package/docs/en/ui-and-theming.md

@@ -36,7 +36,7 @@ In `/ui` (a selection): `Button`, `Card`, the `Table` primitives, `Tabs`, `Input
 `DropdownMenu`, `Sidebar`, `Alert` / `Skeleton` / `Spinner`, `Loading` / `Empty` / `ErrorState`.
 
 In `/components` (a selection): `PageShell`, `AppShell`, `DashboardCard`, `DataTable`, `EChart`,
-`FunnelSteps`, `FilterBar`, `DateRangePicker`, `MetricValue`, `TrendIndicator`.
+`FunnelSteps`, `FilterBar`, `DateRangePicker`, `KpiCard`, `Delta`.
 
 Props and usage for every component live in the [Components](components) tab.
 

package/docs/index.json

@@ -694,6 +694,16 @@
       "file": "ja/parts/date-range-picker.md",
       "order": 7
     },
+    {
+      "slug": "parts/delta",
+      "lang": "ja",
+      "section": "components/parts",
+      "sectionTitle": "@squadbase/vantage/components",
+      "title": "Delta",
+      "description": "比較相手に対する増減。矢印・符号付きの率・比較ラベルを値から導く。",
+      "file": "ja/parts/delta.md",
+      "order": 8
+    },
     {
       "slug": "parts/donut-chart",
       "lang": "ja",
@@ -702,7 +712,7 @@
       "title": "DonutChart",
       "description": "構成比を見せる型付きのドーナツ / 円グラフ。中央に合計を出す。",
       "file": "ja/parts/donut-chart.md",
-      "order": 8
+      "order": 9
     },
     {
       "slug": "parts/echart",
@@ -712,7 +722,7 @@
       "title": "EChart",
       "description": "Apache ECharts の薄いラッパー。配色はテーマトークンに追従する。",
       "file": "ja/parts/echart.md",
-      "order": 9
+      "order": 10
     },
     {
       "slug": "parts/filter-bar",
@@ -722,7 +732,17 @@
       "title": "FilterBar",
       "description": "フィルタ一式を 1 つの値オブジェクトで扱う行。",
       "file": "ja/parts/filter-bar.md",
-      "order": 10
+      "order": 11
+    },
+    {
+      "slug": "parts/format",
+      "lang": "ja",
+      "section": "components/parts",
+      "sectionTitle": "@squadbase/vantage/components",
+      "title": "format / comparison",
+      "description": "KPI・表・グラフで共有する数値の書式（formatValue）と、増減の計算（computeComparison）。",
+      "file": "ja/parts/format.md",
+      "order": 12
     },
     {
       "slug": "parts/funnel-steps",
@@ -732,7 +752,17 @@
       "title": "FunnelSteps",
       "description": "ファネルの各段を棒で示す。転換率も出せる。",
       "file": "ja/parts/funnel-steps.md",
-      "order": 11
+      "order": 13
+    },
+    {
+      "slug": "parts/kpi-card",
+      "lang": "ja",
+      "section": "components/parts",
+      "sectionTitle": "@squadbase/vantage/components",
+      "title": "KpiCard",
+      "description": "KPI 1 つ分のカード。値・増減・前期実績・結論の 1 文までを数値から組み立てる。",
+      "file": "ja/parts/kpi-card.md",
+      "order": 14
     },
     {
       "slug": "parts/line-chart",
@@ -742,7 +772,7 @@
       "title": "LineChart",
       "description": "推移を線で見せる型付きグラフ。行・x 軸の列・系列の列を渡すだけ。",
       "file": "ja/parts/line-chart.md",
-      "order": 12
+      "order": 15
     },
     {
       "slug": "parts/metric-value",
@@ -752,7 +782,7 @@
       "title": "MetricValue",
       "description": "KPI の数値。単位は MetricUnit で。",
       "file": "ja/parts/metric-value.md",
-      "order": 13
+      "order": 16
     },
     {
       "slug": "parts/multi-select",
@@ -762,7 +792,7 @@
       "title": "MultiSelect",
       "description": "検索できる複数選択。選択はチップで表示。",
       "file": "ja/parts/multi-select.md",
-      "order": 14
+      "order": 17
     },
     {
       "slug": "parts/page-shell",
@@ -772,7 +802,7 @@
       "title": "PageShell",
       "description": "ヘッダー帯・サマリー・本文からなるページ枠。",
       "file": "ja/parts/page-shell.md",
-      "order": 15
+      "order": 18
     },
     {
       "slug": "parts/placeholder",
@@ -782,7 +812,7 @@
       "title": "Placeholder",
       "description": "仮データであることを示す、インラインの目印。",
       "file": "ja/parts/placeholder.md",
-      "order": 16
+      "order": 19
     },
     {
       "slug": "parts/progress-circle",
@@ -792,7 +822,7 @@
       "title": "ProgressCircle",
       "description": "目標に対する達成率をリングで示す。中央に任意の内容を置ける。",
       "file": "ja/parts/progress-circle.md",
-      "order": 17
+      "order": 20
     },
     {
       "slug": "parts/searchable-select",
@@ -802,7 +832,7 @@
       "title": "SearchableSelect",
       "description": "検索できる単一選択。候補が多いときに。",
       "file": "ja/parts/searchable-select.md",
-      "order": 18
+      "order": 21
     },
     {
       "slug": "parts/section-header",
@@ -812,7 +842,7 @@
       "title": "SectionHeader",
       "description": "セクションの見出しとアクション。",
       "file": "ja/parts/section-header.md",
-      "order": 19
+      "order": 22
     },
     {
       "slug": "parts/segmented-control",
@@ -822,7 +852,7 @@
       "title": "SegmentedControl",
       "description": "単一選択のセグメント。ToggleGroup の配列を隠す。",
       "file": "ja/parts/segmented-control.md",
-      "order": 20
+      "order": 23
     },
     {
       "slug": "parts/sparkline",
@@ -832,7 +862,7 @@
       "title": "Sparkline",
       "description": "表のセルや KPI タイルに置く、インラインの推移グラフ。",
       "file": "ja/parts/sparkline.md",
-      "order": 21
+      "order": 24
     },
     {
       "slug": "parts/status-badge",
@@ -842,7 +872,7 @@
       "title": "StatusBadge",
       "description": "ドット付きのステータスバッジ。色は名前で決まる。",
       "file": "ja/parts/status-badge.md",
-      "order": 22
+      "order": 25
     },
     {
       "slug": "parts/tracker",
@@ -852,7 +882,7 @@
       "title": "Tracker",
       "description": "期間ごとの状態を小さなブロックの列で示す。稼働状況やバッチの結果に。",
       "file": "ja/parts/tracker.md",
-      "order": 23
+      "order": 26
     },
     {
       "slug": "parts/trend-indicator",
@@ -860,9 +890,9 @@
       "section": "components/parts",
       "sectionTitle": "@squadbase/vantage/components",
       "title": "TrendIndicator",
-      "description": "増減の矢印と変化率。良し悪しは positiveIsGood で決まる。",
+      "description": "非推奨。新規は Delta を使う。増減の矢印と変化率。",
       "file": "ja/parts/trend-indicator.md",
-      "order": 24
+      "order": 27
     },
     {
       "slug": "markdown/markdown-renderer",
@@ -1476,6 +1506,16 @@
       "file": "en/parts/date-range-picker.md",
       "order": 3
     },
+    {
+      "slug": "parts/delta",
+      "lang": "en",
+      "section": "components/parts",
+      "sectionTitle": "@squadbase/vantage/components",
+      "title": "Delta",
+      "description": "The change against a comparison — arrow, signed rate and label, all derived from the values.",
+      "file": "en/parts/delta.md",
+      "order": 4
+    },
     {
       "slug": "parts/echart",
       "lang": "en",
@@ -1484,7 +1524,7 @@
       "title": "EChart",
       "description": "A thin Apache ECharts wrapper whose colours follow the theme tokens.",
       "file": "en/parts/echart.md",
-      "order": 4
+      "order": 5
     },
     {
       "slug": "parts/filter-bar",
@@ -1494,7 +1534,17 @@
       "title": "FilterBar",
       "description": "A row of filters driven by one value object.",
       "file": "en/parts/filter-bar.md",
-      "order": 5
+      "order": 6
+    },
+    {
+      "slug": "parts/format",
+      "lang": "en",
+      "section": "components/parts",
+      "sectionTitle": "@squadbase/vantage/components",
+      "title": "format / comparison",
+      "description": "The number formatting (formatValue) and change calculation (computeComparison) shared by KPIs, tables and charts.",
+      "file": "en/parts/format.md",
+      "order": 7
     },
     {
       "slug": "parts/funnel-steps",
@@ -1504,7 +1554,17 @@
       "title": "FunnelSteps",
       "description": "A funnel drawn as bars, with conversion rates.",
       "file": "en/parts/funnel-steps.md",
-      "order": 6
+      "order": 8
+    },
+    {
+      "slug": "parts/kpi-card",
+      "lang": "en",
+      "section": "components/parts",
+      "sectionTitle": "@squadbase/vantage/components",
+      "title": "KpiCard",
+      "description": "One KPI as a card — value, change, previous actual and a one-line conclusion, all derived from numbers.",
+      "file": "en/parts/kpi-card.md",
+      "order": 9
     },
     {
       "slug": "parts/metric-value",
@@ -1514,7 +1574,7 @@
       "title": "MetricValue",
       "description": "The KPI number, with MetricUnit for the unit.",
       "file": "en/parts/metric-value.md",
-      "order": 7
+      "order": 10
     },
     {
       "slug": "parts/multi-select",
@@ -1524,7 +1584,7 @@
       "title": "MultiSelect",
       "description": "Multiple choice with search; selections show as chips.",
       "file": "en/parts/multi-select.md",
-      "order": 8
+      "order": 11
     },
     {
       "slug": "parts/page-shell",
@@ -1534,7 +1594,7 @@
       "title": "PageShell",
       "description": "The page frame: header band, summary row, content.",
       "file": "en/parts/page-shell.md",
-      "order": 9
+      "order": 12
     },
     {
       "slug": "parts/placeholder",
@@ -1544,7 +1604,7 @@
       "title": "Placeholder",
       "description": "An inline marker for sample, not-yet-real data.",
       "file": "en/parts/placeholder.md",
-      "order": 10
+      "order": 13
     },
     {
       "slug": "parts/searchable-select",
@@ -1554,7 +1614,7 @@
       "title": "SearchableSelect",
       "description": "Single choice with search, for long option lists.",
       "file": "en/parts/searchable-select.md",
-      "order": 11
+      "order": 14
     },
     {
       "slug": "parts/section-header",
@@ -1564,7 +1624,7 @@
       "title": "SectionHeader",
       "description": "A section heading with its actions.",
       "file": "en/parts/section-header.md",
-      "order": 12
+      "order": 15
     },
     {
       "slug": "parts/segmented-control",
@@ -1574,7 +1634,7 @@
       "title": "SegmentedControl",
       "description": "Single-choice segments — it hides ToggleGroup's array.",
       "file": "en/parts/segmented-control.md",
-      "order": 13
+      "order": 16
     },
     {
       "slug": "parts/sparkline",
@@ -1584,7 +1644,7 @@
       "title": "Sparkline",
       "description": "An inline trend chart for table cells and KPI tiles.",
       "file": "en/parts/sparkline.md",
-      "order": 14
+      "order": 17
     },
     {
       "slug": "parts/status-badge",
@@ -1594,7 +1654,7 @@
       "title": "StatusBadge",
       "description": "A dot-and-label status badge, coloured by name.",
       "file": "en/parts/status-badge.md",
-      "order": 15
+      "order": 18
     },
     {
       "slug": "parts/trend-indicator",
@@ -1602,9 +1662,9 @@
       "section": "components/parts",
       "sectionTitle": "@squadbase/vantage/components",
       "title": "TrendIndicator",
-      "description": "An arrow and a percentage; positiveIsGood decides the colour.",
+      "description": "Deprecated — use Delta for new code. An arrow and a percentage.",
       "file": "en/parts/trend-indicator.md",
-      "order": 16
+      "order": 19
     },
     {
       "slug": "markdown/markdown-renderer",