@squadbase/vantage 0.6.2-dev1.42c4e48 → 0.6.2-dev1.72360fb

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

@@ -0,0 +1,48 @@
+# SlideChartFull
+
+> グラフ 1 つを 12 カラム全幅で見せる 1 枚。下に 1 行の注記。
+
+横幅が要るグラフ（カテゴリが多い・系列が長い）を全幅で見せる 1 枚です。グラフの下に、読み方や注目点を 1 行（`note`）で添えられます。
+
+```tsx
+import { SlideChartFull } from "@squadbase/vantage/slide";
+import type { SlideChartFullProps } 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 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `chart` | `SlideChartInsightChart` | `{ type: "line" \| "bar" \| "area"; categories: string[]; series: { name: string; data: number[] }[] }`。**必須**。`SlideChartInsight` と同じ形・同じ描画。系列が 2 つ以上なら凡例が出る。 |
+| `note` | `string` | グラフの下の 1 行。読み方や注目点。60 文字ほどまで。 |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-01"`）。「2026-10-01 時点」と表示される。「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideChartFull } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideChartFull
+    title="売上は 9 月に過去最高を更新した"
+    chart={{
+      type: "line",
+      categories: ["4 月", "5 月", "6 月", "7 月", "8 月", "9 月"],
+      series: [{ name: "売上(百万円)", data: [460, 480, 490, 500, 503, 540] }],
+    }}
+    note="9 月は大型案件 2 件の計上を含む"
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- グラフは `EChart` でアニメーションなし・ツールチップなし。pptx への書き出しはその描画（`data-waitfor="canvas"`）を待ちます。
+- 読み解きの文を並べたいときは `SlideChartInsight` を使います。

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-columns.md

@@ -0,0 +1,46 @@
+# SlideColumns
+
+> [部品] スライド本文の 12 カラム配置。SlideColumns と SlideColumn。
+
+スライド本文の 12 カラム配置です。`SlideColumns` の中に `SlideColumn` を並べ、それぞれが `span` カラム分を取ります（8 / 4、6 / 6、4 / 4 / 4 など）。グリッドの本文の行に置く**部品**で、1 枚まるごとの block ではありません。
+
+```tsx
+import { SlideColumns, SlideColumn } from "@squadbase/vantage/slide";
+import type { SlideColumnsProps, SlideColumnProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **スライドの部品**で、1 枚まるごとの block ではありません。`<Slide>` 内の 12 カラムのグリッドの行として置きます（ルートはキャンバスいっぱい（100%×100%）には広がりません）。寸法はすべて部品の中で決まっているので、足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+### SlideColumns
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` |  | `SlideColumn` を並べる。**必須**。 |
+| `align` | `"start" \| "center" \| "stretch"` | `"stretch"` | 行の中での縦方向の揃え。 |
+
+### SlideColumn
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `span` | `number` | 12 カラムのうち何カラム分を取るか（1〜12）。**必須**。 |
+| `children` | `ReactNode` | 列の中身。**必須**。 |
+
+## 使い方
+
+```tsx
+import { SlideColumns, SlideColumn } from "@squadbase/vantage/slide";
+
+<SlideColumns align="center">
+  <SlideColumn span={8}>{/* グラフ */}</SlideColumn>
+  <SlideColumn span={4}>{/* 読み解き */}</SlideColumn>
+</SlideColumns>
+```
+
+## 注意
+
+- 並べた `span` の合計は 12 にします。
+- 間隔とカラム数はスライドの仕様値で決まっています。
+- 列の中身が列の高さいっぱいに広がるべきときは、その中身側で `height: "100%"` を指定します。

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

@@ -0,0 +1,68 @@
+# SlideComparison
+
+> A と B、施策の前と後を 2〜3 列で並べる 1 枚。
+
+2〜3 列を横に並べて比べる 1 枚です。各列に見出し・主役の数字（と増減）・要点を置き、下に 1 行の結論（`verdict`）を出せます。列は 12 カラムを等分します（6 / 6 または 4 / 4 / 4）。
+
+```tsx
+import { SlideComparison } from "@squadbase/vantage/slide";
+import type { SlideComparisonProps, SlideComparisonColumn } 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 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `columns` | `SlideComparisonColumn[]` | 2〜3 列。**必須**。各列は下の表のとおり。 |
+| `verdict` | `string` | どちらが優れるか、何が続くかを 1 行で。 |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-01"`）。「2026-10-01 時点」と表示される。「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+### SlideComparisonColumn
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `heading` | `string` |  | その列が何か（「旧プラン」「施策前」）。**必須**。 |
+| `points` | `string[]` |  | 短い要点。**必須**。1 列 3 件まで、1 件 24 文字ほどまで。列ごとに同じ種類の要点を同じ順で書く。 |
+| `value` | `number \| null` |  | 主役の数字。`null` は「—」。`format` で整形される。 |
+| `format` | `ValueFormat` |  | 値の整形（`"currency"` / `"percent"` など）。`delta` の既定の整形にもなる。 |
+| `display` | `string` |  | 整形済みの文字列（「1.2 億円」）。`value` より優先される。 |
+| `delta` | `{ value: number \| null; format?: ValueFormat }` |  | 主役の数字の増減そのもの（`percent` なら比率）。向きは符号で決まる。`format` を省くと列の `format` を使う。 |
+| `comparisonLabel` | `string` |  | `delta` が何との比較かを示す名前（「前月比」「旧プラン比」）。増減の前に薄く出る。 |
+| `betterWhen` | `"up" \| "down"` | `"up"` | `delta` のどちらの向きが良いか。解約率・コストは `"down"`。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideComparison } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideComparison
+    title="新プランは旧プランより解約が少ない"
+    columns={[
+      { heading: "旧プラン", value: 0.024, format: "percent", points: ["月額 9,800 円", "導入支援なし"] },
+      {
+        heading: "新プラン",
+        value: 0.018,
+        format: "percent",
+        delta: { value: -0.006 },
+        comparisonLabel: "旧プラン比",
+        betterWhen: "down",
+        points: ["月額 12,800 円", "導入支援つき"],
+      },
+    ]}
+    verdict="導入支援の有無が解約率の差の主因"
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 列が 2〜3 でない、または要点が多い・長いと、コンソールに警告が出ます。スライドを分けてください。
+- 増減は `DeltaText`（▲ ▼ と「増」「減」つき）で描かれます。極性は `betterWhen` のみで指定します。

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-heading.md

@@ -0,0 +1,38 @@
+# SlideHeading
+
+> [部品] スライド 1 枚の見出し。アクションタイトルと任意のアイブロウ。
+
+スライド 1 枚の見出しです。ページの大きさの `h2` で、2 行までに収まります。上に小さなラベル（`eyebrow`、章名など）を添えられます。12 カラムのグリッドの最上段に置く**部品**で、1 枚まるごとの block ではありません。
+
+```tsx
+import { SlideHeading } from "@squadbase/vantage/slide";
+import type { SlideHeadingProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **スライドの部品**で、1 枚まるごとの block ではありません。`<Slide>` 内の 12 カラムのグリッドの行として置きます（ルートはキャンバスいっぱい（100%×100%）には広がりません）。寸法はすべて部品の中で決まっているので、足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `title` | `string` | 結論を 1 文で書いた見出し（アクションタイトル）。2 行までに切り詰められる。**必須**。 |
+| `eyebrow` | `string` | 見出しの上の短いラベル（「第 2 章 解約」）。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideHeading } from "@squadbase/vantage/slide";
+
+<Slide>
+  <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)" }}>
+    <SlideHeading title="解約率は 6 月以降、毎月下がり続けている" eyebrow="第 2 章 解約" />
+    {/* …SlideColumns など… */}
+  </div>
+</Slide>
+```
+
+## 注意
+
+- 見出しは話題ではなく結論の文で書きます。
+- 置いたグリッドの 12 カラムすべてにまたがります。

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/slide/slide-section.md

@@ -0,0 +1,44 @@
+# SlideSection
+
+> 章の区切りの 1 枚。章タイトルと、任意で目次。
+
+章の区切りに置く 1 枚です。左に章タイトル、`items` を渡すと右に目次（番号つきの一覧）を出し、`current` の章を強調します。
+
+```tsx
+import { SlideSection } from "@squadbase/vantage/slide";
+import type { SlideSectionProps } 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` | 章のタイトル。**必須**。 |
+| `index` | `number` | 章番号。タイトルの上に「02」のように 2 桁で出る。 |
+| `lead` | `string` | その章が何に答えるかを 1 行で。 |
+| `items` | `string[]` | デッキの章の一覧。右側に番号つきの目次として出る。1 行ずつなので 6 件ほどまで。省くとタイトルが全幅を使う。 |
+| `current` | `number` | `items` のうち強調する章（1 始まり）。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideSection } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideSection
+    index={2}
+    title="解約の動向"
+    lead="どの層が、いつ離れているか"
+    items={["全体像", "解約の動向", "要因の分析", "次の打ち手"]}
+    current={2}
+  />
+</Slide>
+```
+
+## 注意
+
+- 段階表示（reveal）は持ちません。必要なら呼び出し側で `Steps` などで包んでください。
+- 目次に出る番号は `items` の順で自動採番されます。`index` は章番号の表示だけに使われます。

package/docs/ja/slide/slide-source-line.md

@@ -0,0 +1,34 @@
+# SlideSourceLine
+
+> [部品] スライド 1 枚の足元の 1 行。時点・出典・ページ番号。
+
+スライド 1 枚の足元に置く 1 行です。データの時点と出典、任意で右端にページ番号を出します。12 カラムのグリッドの最下段に置く**部品**で、1 枚まるごとの block ではありません。出すものがなければ何も描きません。
+
+```tsx
+import { SlideSourceLine } from "@squadbase/vantage/slide";
+import type { SlideSourceLineProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **スライドの部品**で、1 枚まるごとの block ではありません。`<Slide>` 内の 12 カラムのグリッドの行として置きます（ルートはキャンバスいっぱい（100%×100%）には広がりません）。寸法はすべて部品の中で決まっているので、足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-20"`）。「2026-10-20 時点」と表示される。「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+| `page` | `{ current: number; total: number }` | 右端に「3 / 12」と出すページ番号。呼び出し側から渡す。 |
+
+## 使い方
+
+```tsx
+import { SlideSourceLine } from "@squadbase/vantage/slide";
+
+<SlideSourceLine asOf="2026-10-20" source="社内 BI" page={{ current: 3, total: 12 }} />
+```
+
+## 注意
+
+- ページ番号は SquadKit がスライドの位置を読めないため、`page` で渡します。
+- 「… 時点」「出典: …」は固定の日本語です。