@squadbase/vantage 0.6.1 → 0.6.2-dev1.0017a4d

package/docs/ja/routing.md

@@ -1,6 +1,6 @@
 # ファイルベースルーティング
 
-> ファイルを置くだけでルートが生まれる。ページ・レイアウト・動的パラメータ・404/error の規約と、tsx 以外のページ（csv / xlsx / スライド / ドキュメント）。
+> ファイルを置くだけでルートが生まれる。ページ・レイアウト・動的パラメータ・404/error の規約。
 
 Vantage のルーティングは **ファイルの配置がそのまま URL** になります。ルーターの設定は書きません。
 
@@ -46,90 +46,13 @@ Vantage のルーティングは **ファイルの配置がそのまま URL**
 
 ## tsx 以外もページになる
 
-ルートになるのは `.tsx` / `.jsx` だけではありません。**`.csv` と `.xlsx`** はそのまま表として
-読めるページになり、**`<name>.slide.tsx`** はスライドデッキに、**`<name>.doc.tsx`** はドキュメントになります。どれも URL の作り方は
-tsx と同じで、`vantage routes` にも `useRoutes()` のナビにも同格で並びます。
+ルートになるのは `.tsx` / `.jsx` だけではありません。**`<name>.slide.tsx`** はスライドデッキに、
+**`<name>.doc.tsx`** はドキュメントに、**`.csv` と `.xlsx`** はそのまま表として読めるページに
+なります。どれも URL の作り方は tsx と同じで、`.slide` / `.doc` と拡張子は URL に出ません
+（`june.slide.tsx`・`june.csv` → `/june`）。`vantage routes` にも `useRoutes()` のナビにも同格で並びます。
 
-### データファイル（`.csv` / `.xlsx`）
-
-`src/data/june.xlsx` を置いて `/data/june` を開くと、ダウンロードせずブラウザ上で表として
-読めます。xlsx は複数シートを切り替えられ、元ファイルをダウンロードする導線も付きます。
-
-描かれるのは**表計算ソフトそのものの見た目**です —— 列は A / B / C、左に行番号、ファイルの
-1 行目はヘッダとして固定され、罫線はデータの外まで続きます。シートのタブは下端に並びます。
-読み取り専用なので編集もソートもできません(セルを選んで `Cmd/Ctrl+C` でコピーはできます)。
-並べ替えや絞り込みが要るデータは、`server/api/` から配って `DataTable` で描いてください。
-
-- **タイトルはファイル名から導かれます**（`june.xlsx` → 「June」、`index.csv` はディレクトリ名）。
-  データファイルに `definePage` は書けないので、名前を変えたいときはファイルをリネームします。
-- **パースはブラウザで行われます。** dev・ビルド後・デプロイ後で同じコードが同じバイトを読むので、
-  同じ URL が同じものを返します。25MB を超えるファイルはそのページにエラーが出ます
-  （`vantage check` が `FILE_PAGE_TOO_LARGE` で先に警告します）。
-- 数式・グラフ・セル書式は再現されません。**値として読めれば十分**という設計です。
-- ページにしたくないファイルは `_` を前置します（`_june.xlsx`）。tsx から自分で描きたいときは
-  こうしてルート化を止め、`@squadbase/vantage/table` の `FilePageView` を使います。
-
-> [!WARNING]
-> **ビューアの無い拡張子はルートになりません。** `.xls` / `.ods` / `.tsv` などを置いても
-> 404 にすらならず、ナビにも `vantage routes` にも出ません。`vantage check` の
-> `UNSUPPORTED_PAGE_FILE` 警告が唯一の告知点です。
-
-### スライド（`.slide.tsx`）
-
-`.slide` は**ページ種別サフィックス**で、URL には出ません（`src/june.slide.tsx` → `/june`）。
-中身は `<SlideDeck>` を返す普通の React コンポーネントなので、`definePage` もナビも
-通常のページと同じように効きます。
-
-```tsx
-import { definePage } from "@squadbase/vantage";
-import { Slide, SlideDeck } from "@squadbase/vantage/slide";
-
-export const page = definePage({ title: "6月度レビュー", navLabel: "6月度" });
-
-export default function Deck() {
-  return (
-    <SlideDeck>
-      <Slide>…</Slide>
-      <Slide>…</Slide>
-    </SlideDeck>
-  );
-}
-```
-
-1920×1080 の固定キャンバスに書き、画面サイズに合わせて縮小されます。キーボードとクリックで
-送れ、左のスライド一覧は `L` で開閉、`F` で全画面、ツールバーから pptx を書き出せます。詳しくは
-[UI とテーマ](ui-and-theming)。
-
-> [!WARNING]
-> `.slide` を付けられるのは**ルートになるページモジュールだけ**です。`_layout.slide.tsx` や
-> `deck.slide.ts` は `INVALID_PAGE_VARIANT` エラーになります。また `june.slide.tsx` と
-> `june.tsx`、`sales.csv` と `sales.tsx` はいずれも同じ URL に解決するので `ROUTE_CONFLICT` です。
-
-### ドキュメント（`.doc.tsx`）
-
-`.doc` も**ページ種別サフィックス**です（`src/june-summary.doc.tsx` → `/june-summary`）。上から下へ
-読む文章のページで、中身は `<Document>` を返す普通の React コンポーネントです。
-
-```tsx
-import { definePage } from "@squadbase/vantage";
-import { Document } from "@squadbase/vantage/doc";
-
-export const page = definePage({ title: "6月度サマリー" });
-
-export default function JuneSummary() {
-  return (
-    <Document>
-      <h1>6月度サマリー</h1>
-      <p>6月の売上は目標を 5% 上回りました。</p>
-      <table>…</table>
-    </Document>
-  );
-}
-```
-
-`<Document>` の中の見出し・段落・リスト・表・引用・コードには、クラスを書かなくてもスタイルが
-当たります。詳しくは [UI とテーマ](ui-and-theming)。`.slide` と同じく、`.doc` を付けられるのは
-ルートになるページモジュールだけです。
+それぞれの書き方・できること・制限、そして**置いてもページにならないファイル**（`.xls`・`.tsv`・
+`.md` など）は [ページの種類](page-types) にまとめてあります。
 
 ## ルーティングされないディレクトリ
 
@@ -289,3 +212,4 @@ setSegments((prev) => [...prev, "enterprise"]);
 ## 次に読む
 
 - [ページと definePage](pages-and-metadata) — ページの契約とメタデータ
+- [ページの種類](page-types) — スライド・ドキュメント・CSV・Excel

package/docs/ja/slide/slide-chart-insight.md

@@ -0,0 +1,52 @@
+# SlideChartInsight
+
+> グラフ 1 つと、その読み解き。レポートでいちばん多い 1 枚。
+
+グラフ 1 つ（12 カラムのうち 8）と、その読み解き（残りの 4、最大 3 点）を並べる 1 枚です。グラフは `line` / `bar` / `area`。キャンバス用の文字サイズで、ツールチップとアニメーションなしで組まれるので、pptx に見た目のまま書き出せます。
+
+```tsx
+import { SlideChartInsight } from "@squadbase/vantage/slide";
+import type { SlideChartInsightProps, SlideChartInsightChart } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `chart` | `SlideChartInsightChart` |  | `{ type: "line" \| "bar" \| "area"; categories: string[]; series: { name: string; data: number[] }[] }`。**必須**。系列が 2 つ以上なら凡例が出る。 |
+| `insights` | `string[]` |  | グラフの読み解き。2〜3 点。**必須**。 |
+| `chartSide` | `"left" \| "right"` | `"left"` | グラフを置く側。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideChartInsight } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideChartInsight
+    title="解約率は 6 月以降、毎月下がり続けている"
+    chart={{
+      type: "line",
+      categories: ["6 月", "7 月", "8 月", "9 月"],
+      series: [{ name: "解約率(%)", data: [2.7, 2.4, 2.1, 1.8] }],
+    }}
+    insights={[
+      "オンボーディング刷新後の 3 か月で 0.9pt 低下",
+      "低下は中小企業プランが中心",
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 4 点以上の `insights` は描画されますが `console.warn` が出ます。スライドを分けてください。
+- 型付きグラフ（`LineChart` など）は使いません。この block が `EChart` で直接組みます。

package/docs/ja/slide/slide-cover.md

@@ -0,0 +1,39 @@
+# SlideCover
+
+> デッキの表紙。タイトル・サブタイトル・期間・作成者・時点を 1 枚に収める。
+
+デッキの表紙です。タイトルは左 8 カラムに置かれ、期間・作成者・時点は下端の 1 行にまとまります。
+
+```tsx
+import { SlideCover } from "@squadbase/vantage/slide";
+import type { SlideCoverProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `title` | `string` | デッキの名前。**必須**。 |
+| `subtitle` | `string` | タイトルの下の 1 行。 |
+| `period` | `string` | 対象期間（「2026 年 7 月〜9 月」）。 |
+| `author` | `string` | 作成者・チーム名。 |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-20"`）。block が「2026-10-20 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideCover } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideCover title="2026 年度 第 2 四半期 事業レビュー" subtitle="売上・解約・新規獲得の振り返りと次の打ち手" period="2026 年 7 月〜9 月" author="事業企画チーム" asOf="2026-10-20" source="社内 BI" />
+</Slide>
+```
+
+## 注意
+
+- 表紙は 1 デッキに 1 枚です。2 枚目以降の見出しは他の block のアクションタイトルで書きます。
+- サブタイトルは目的や読み手を 1 行で。長い説明は 2 枚目以降へ。

package/docs/ja/slide/slide-exec-summary.md

@@ -0,0 +1,47 @@
+# SlideExecSummary
+
+> 結論を先に伝える 1 枚。アクションタイトルと 3〜5 個の要点。
+
+結論が先の 1 枚です。アクションタイトルの下に、1 行の見出し（と任意の補足 1 行）を持つ要点を 3〜5 個並べます。
+
+```tsx
+import { SlideExecSummary } from "@squadbase/vantage/slide";
+import type { SlideExecSummaryProps, SlideExecSummaryPoint } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `points` | `SlideExecSummaryPoint[]` |  | 要点（`{ headline: string; detail?: string }`）。3〜5 個。**必須**。 |
+| `layout` | `"rows" \| "columns"` | `"rows"` | `rows` は番号付きで縦に積む。`columns` は横に並べる（3〜4 個向き）。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideExecSummary } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideExecSummary
+    title="Q2 は売上が計画を 4% 上回り、解約の改善が次の課題"
+    points={[
+      { headline: "売上は 5.4 億円で計画比 +4%", detail: "新規 38 社が牽引" },
+      { headline: "解約率は 1.8% まで低下", detail: "オンボーディング刷新の効果" },
+      { headline: "新規獲得は目標に 12 社届かず", detail: "紹介経由が想定の半分" },
+    ]}
+    asOf="2026-10-20"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 6 個以上は描画されますが、`console.warn` が出ます。スライドを分けてください。
+- `title` は話題（「売上の状況」）ではなく、結論の文で書きます。

package/docs/ja/slide/slide-kpi-grid.md

@@ -0,0 +1,55 @@
+# SlideKpiGrid
+
+> 2〜4 個の KPI を並べるスコアボード。値・増減・目標。
+
+2〜4 個の KPI カードを横に並べるスコアボードです。各カードにラベル・値・増減・目標が入り、幅は等分されます。
+
+```tsx
+import { SlideKpiGrid } from "@squadbase/vantage/slide";
+import type { SlideKpiGridProps, SlideKpiGridItem, SlideKpiGridDelta } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `items` | `SlideKpiGridItem[]` |  | KPI。2〜4 個。**必須**。各要素は下の `items[].…` の行。 |
+| `items[].label` | `string` |  | 指標名。**必須**。 |
+| `items[].value` | `number \| null` |  | 数値。`null` は「—」と表示される。**必須**。`format` で整形される。 |
+| `items[].format` | `ValueFormat` |  | 値の整形（`"currency"` / `"percent"` / `{ type: "number", unit: "社" }` など）。`delta` と `target` の既定の整形にもなる。 |
+| `items[].display` | `string` |  | 表示する文字だけを置き換える（元の数値は `value` のまま `data-raw` に残る）。 |
+| `items[].delta` | `SlideKpiGridDelta` |  | `{ value: number; format?: ValueFormat }`。増減の大きさを符号付きで（例: `0.074` と `format: "percent"` で「+7.4%」）。向きは符号で決まり、▲ ▼ と「増」「減」も出る。`format` の既定は item の `format`。 |
+| `items[].betterWhen` | `"up" \| "down"` | `"up"` | `delta` のどちらの向きが良いか。色が決まる。 |
+| `items[].comparisonLabel` | `string` |  | `delta` の比較相手（「前月比」）。 |
+| `items[].target` | `number` |  | 目標。`format` は `value` と同じ。「目標 …（達成率 …）」と表示される。達成率は value ÷ target（`betterWhen` が `"down"` なら target ÷ value）。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideKpiGrid } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideKpiGrid
+    title="売上と継続率は計画どおり、新規獲得だけが未達"
+    items={[
+      { label: "月次売上", value: 540_000_000, format: "currency", delta: { value: 0.074, format: "percent" }, comparisonLabel: "前月比", target: 520_000_000 },
+      { label: "継続率", value: 0.982, format: { type: "percent", digits: 1 }, delta: { value: 0.004 }, comparisonLabel: "前月比", target: 0.98 },
+      { label: "新規獲得", value: 38, format: { type: "number", unit: "社" }, delta: { value: -4 }, comparisonLabel: "前月比", target: 50 },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 5 個以上は描画されますが `console.warn` が出ます。スライドを分けてください。
+- 値・増減・目標は数値で渡します。整形は `format` が行い、文字を変えたいときだけ `display` を使います。
+- 「目標 …（達成率 …）」「増」「減」などの文言は block が出す日本語固定です。

package/docs/ja/slide/slide-kpi-hero.md

@@ -0,0 +1,58 @@
+# SlideKpiHero
+
+> 1 つの数字を主役にする 1 枚。値・増減・推移の線。
+
+1 つの数字を大きく見せる 1 枚です。左 6 カラムにラベルと値（と増減）、右 6 カラムに推移の線を置きます。`trend` を渡さなければ数字が全幅を使います。
+
+```tsx
+import { SlideKpiHero } from "@squadbase/vantage/slide";
+import type { SlideKpiHeroProps, SlideKpiHeroDelta } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `label` | `string` |  | 数字が何か（「月次売上」）。**必須**。 |
+| `value` | `number \| null` |  | 数値。`null` は「—」と表示される。**必須**。`format` で整形される（元の数値は `data-raw` に残り、書き出しやテストで使う）。 |
+| `format` | `ValueFormat` |  | 値の整形（`"currency"` / `"percent"` など）。`delta` の既定の整形にもなる。 |
+| `display` | `string` |  | 表示する文字だけを置き換える（元の数値は `value` のまま）。 |
+| `delta` | `SlideKpiHeroDelta` |  | `{ value: number; format?: ValueFormat }`。増減の大きさを符号付きで（例: `0.074` と `format: "percent"` で「+7.4%」）。向きは符号で決まり、▲ ▼ と「増」「減」も出る。`format` の既定は `format`。省くと増減は出ない。 |
+| `betterWhen` | `"up" \| "down"` | `"up"` | `delta` のどちらの向きが良いか。色が決まる。 |
+| `comparisonLabel` | `string` |  | `delta` の比較相手（「前月比」）。 |
+| `trend` | `{ x: string; y: number }[]` |  | 右側の線の点。省くと数字だけの 1 枚になる。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideKpiHero } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideKpiHero
+    title="9 月の売上は過去最高の 5.4 億円"
+    label="月次売上"
+    value={540_000_000}
+    format="currency"
+    delta={{ value: 0.074, format: "percent" }}
+    comparisonLabel="前月比"
+    trend={[
+      { x: "4 月", y: 460_000_000 }, { x: "5 月", y: 480_000_000 }, { x: "6 月", y: 490_000_000 },
+      { x: "7 月", y: 500_000_000 }, { x: "8 月", y: 503_000_000 }, { x: "9 月", y: 540_000_000 },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- コストのように下がることが良い指標は `betterWhen="down"` と書きます。色は `betterWhen` に従い、向き（▲ ▼ と「増」「減」）は `delta.value` の符号で決まります。
+- 「増」「減」「… 時点」「出典: …」は block が出す日本語固定の文言です。
+- グラフは `EChart` でアニメーションなし。pptx への書き出しはその描画を待ちます。

package/docs/ja/slide/slide-next-actions.md

@@ -0,0 +1,49 @@
+# SlideNextActions
+
+> 次の打ち手。担当・期限・確認する指標つきで 3〜5 件。
+
+次に何をするかを示す 1 枚で、多くのレポートの最後に置きます。アクションごとに担当・期限・確認する指標を添えられます。
+
+```tsx
+import { SlideNextActions } from "@squadbase/vantage/slide";
+import type { SlideNextActionsProps, SlideNextActionsItem } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `title` | `string` | 決定や計画を 1 文で書いた見出し。**必須**。 |
+| `items` | `SlideNextActionsItem[]` | 打ち手。3〜5 件。**必須**。各要素は下の `items[].…` の行。 |
+| `items[].action` | `string` | 何をするか（目的語から始めて 1 文。40 文字程度まで）。**必須**。 |
+| `items[].owner` | `string` | 担当。 |
+| `items[].due` | `string` | 期限。書いたまま 1 行で表示される（「10/31」。10 文字程度まで）。 |
+| `items[].metric` | `string` | 確認する指標。 |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideNextActions } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideNextActions
+    title="解約と新規獲得の施策を 3 つ、11 月末までに始める"
+    items={[
+      { action: "解約予兆スコアの上位 50 社に CS が連絡する", owner: "CS 部 山田", due: "10/31", metric: "解約率 1.5% 以下" },
+      { action: "紹介プログラムの特典を見直す", owner: "マーケ 佐藤", due: "11/15", metric: "紹介経由の新規 20 社" },
+      { action: "料金ページの導線を改善する", owner: "プロダクト 鈴木", due: "11/30", metric: "申込率 +1pt" },
+    ]}
+  />
+</Slide>
+```
+
+## 注意
+
+- 担当・期限・確認する指標の列は、1 件でも値があるときだけ出ます。
+- 列見出し（担当 / 期限 / 確認する指標）は block が出す日本語固定で、上書きできません。
+- `due` は書いたまま表示されます（「10/31」「来週まで」）。6 件以上は `console.warn` が出ます。

package/docs/ja/slide/slide-scorecard-table.md

@@ -0,0 +1,54 @@
+# SlideScorecardTable
+
+> 指標ごとの目標と実績、状態を並べるスコアカード表。
+
+指標ごとに目標・実績・達成率と、状態（順調 / 要注意 / 遅延）を並べる表の 1 枚です。状態は色付きの点と言葉の両方で示すので、色だけに頼りません。
+
+```tsx
+import { SlideScorecardTable } from "@squadbase/vantage/slide";
+import type { SlideScorecardTableProps, SlideScorecardRow, SlideScorecardStatus } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `rows` | `SlideScorecardRow[]` |  | 行。8 行まで。**必須**。各要素は下の `rows[].…` の行。 |
+| `rows[].metric` | `string` |  | 指標名（20 文字程度まで）。**必須**。 |
+| `rows[].value` | `number \| null` |  | 実績。`null` は「—」と表示される。**必須**。 |
+| `rows[].format` | `ValueFormat` |  | `value` と `target` の整形（`"currency"` / `"percent"` など）。 |
+| `rows[].display` | `string` |  | 表示する実績の文字だけを置き換える（元の数値は `value` のまま）。 |
+| `rows[].target` | `number` |  | 目標。`format` は `value` と同じ。どれかの行に目標があると達成率の列が出る（value ÷ target）。 |
+| `rows[].betterWhen` | `"up" \| "down"` | `"up"` | どちらの向きが良いか。`"down"` なら達成率は target ÷ value になり、コストの目標を下回ると 100% を超える。 |
+| `rows[].status` | `SlideScorecardStatus` |  | `"on"`（順調）/ `"risk"`（要注意）/ `"off"`（遅延）。値から導かず、渡したものをそのまま出す。**必須**。 |
+| `columns` | `Partial<Record<"metric" \| "target" \| "actual" \| "attainment" \| "status", string>>` |  | 見出しの語を差し替える。省いた列は既定（指標 / 目標 / 実績 / 達成率 / 状態）。状態の言葉（順調 / 要注意 / 遅延）は上書きできない。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideScorecardTable } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideScorecardTable
+    title="4 指標のうち 2 つが目標どおり、解約と新規が遅れている"
+    rows={[
+      { metric: "月次売上", value: 540_000_000, target: 520_000_000, format: "currency", status: "on" },
+      { metric: "継続率", value: 0.982, target: 0.98, format: { type: "percent", digits: 1 }, status: "on" },
+      { metric: "解約率", value: 0.018, target: 0.015, format: { type: "percent", digits: 1 }, betterWhen: "down", status: "risk" },
+      { metric: "新規獲得", value: 38, target: 50, format: { type: "number", unit: "社" }, status: "off" },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 7 行からは文字が本文から注記のサイズに下がります。9 行以上は描画されますが `console.warn` が出ます。

package/docs/ja/ui/alert-dialog.md

@@ -0,0 +1,41 @@
+# Alert Dialog
+
+> 取り消せない操作の前に確認するモーダル。
+
+削除など取り消せない操作の前に、ユーザーの明示的な返答を求めるモーダルです。
+[`Dialog`](ui/dialog) と違い、背景のクリックでは閉じません。
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `AlertDialog` | 状態。`open` / `defaultOpen` / `onOpenChange` |
+| `AlertDialogTrigger` | 開くきっかけ。`render` でボタンにする |
+| `AlertDialogContent` | 本体。`size` で幅を選ぶ |
+| `AlertDialogMedia` | 見出し横のアイコン枠 |
+| `AlertDialogHeader` / `AlertDialogTitle` / `AlertDialogDescription` | 見出し |
+| `AlertDialogFooter` | ボタン行 |
+| `AlertDialogCancel` | 閉じるボタン(既定 `variant="outline"`) |
+| `AlertDialogAction` | 実行ボタン。`Button` の props をそのまま取る |
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `size` | `"default" \| "sm"` | `"default"` | `AlertDialogContent` に渡す。`sm` はボタンを 2 列に並べる。 |
+
+`AlertDialogAction` は**押しても自動では閉じません**。処理が終わったら `open` を `false` に
+するか、閉じてよいなら `AlertDialogCancel` と同じく `render` で包んでください。

package/docs/ja/ui/avatar.md

@@ -0,0 +1,31 @@
+# Avatar
+
+> ユーザーの顔写真またはイニシャル。
+
+ユーザーやオーナーを小さな丸で示します。画像が読み込めないとき・`src` が無いときは
+`AvatarFallback` の中身(イニシャルなど)を出します。
+
+```tsx
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Avatar` | 外枠。`size` で大きさを選ぶ |
+| `AvatarImage` | 画像。読み込みに失敗すると描画されない |
+| `AvatarFallback` | 画像が無いときの中身 |
+| `AvatarBadge` | 右下の小さな丸(オンライン表示など) |
+| `AvatarGroup` / `AvatarGroupCount` | 重ねて並べる。`AvatarGroupCount` は「+4」などの残数 |
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | `Avatar` に渡す。`sm` は 24px、`default` は 32px、`lg` は 40px。 |

package/docs/ja/ui/combobox.md

@@ -0,0 +1,74 @@
+# Combobox
+
+> 入力して候補を絞り込むセレクト。
+
+テキストを打って候補を絞り込み、1 つ(または複数)を選ぶ入力です。候補が数件なら
+[`Select`](ui/select) のほうが手数が少なくて済みます。Base UI の `Combobox` の上に
+作っています。
+
+```tsx
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Combobox` | 状態。`items` / `value` / `defaultValue` / `onValueChange` / `multiple` |
+| `ComboboxInput` | 入力欄。`showTrigger`(既定 `true`)/ `showClear` で右端のボタンを出す |
+| `ComboboxContent` | 候補のポップアップ。`side` / `align` / `anchor` |
+| `ComboboxList` | 候補の並び。子に関数を渡すと、絞り込み後の `items` が 1 件ずつ渡る |
+| `ComboboxItem` | 1 候補。`value` は必須 |
+| `ComboboxEmpty` | 一致する候補が無いときの表示 |
+| `ComboboxGroup` / `ComboboxLabel` / `ComboboxCollection` / `ComboboxSeparator` | グループ分け |
+| `ComboboxChips` / `ComboboxChip` / `ComboboxChipsInput` | 複数選択をチップで見せる |
+| `ComboboxTrigger` / `ComboboxValue` | 入力欄を使わずボタンで開く形 |
+| `useComboboxAnchor` | チップ枠をポップアップの基準にするための ref |
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `items` | `readonly unknown[]` |  | `Combobox` に渡す候補。入力に応じて絞り込まれ、`ComboboxList` の関数に渡る。 |
+| `multiple` | `boolean` | `false` | 複数選択にする。 |
+| `onValueChange` | `(value) => void` |  | 選択が変わったとき。単一選択では未選択の `null` も渡りうる。 |
+
+## 複数選択
+
+`multiple` を付け、`ComboboxChips` の中にチップと `ComboboxChipsInput` を置きます。ポップアップを
+チップ枠の幅に合わせるには `useComboboxAnchor()` の ref を両方に渡します。
+
+```tsx
+const anchor = useComboboxAnchor();
+
+<Combobox items={metrics} multiple>
+  <ComboboxChips ref={anchor}>
+    <ComboboxValue>
+      {(values: string[]) =>
+        values.map((v) => <ComboboxChip key={v}>{v}</ComboboxChip>)
+      }
+    </ComboboxValue>
+    <ComboboxChipsInput placeholder="指標を追加" />
+  </ComboboxChips>
+  <ComboboxContent anchor={anchor}>
+    <ComboboxList>
+      {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+    </ComboboxList>
+  </ComboboxContent>
+</Combobox>;
+```