@squadbase/vantage 0.6.2-dev1.5aae04e → 0.6.2-dev1.81c1bbe

package/skills/vantage-slide/SKILL.md

@@ -43,9 +43,8 @@ export default function JuneDeck() {
 
 - **1 ファイル = 1 デッキ = 1 ルート。** `export default` は `<SlideDeck>` を返す React コンポーネント
   （通常のページと同じ契約なので、`vantage check` も `vantage routes` も特別扱いをしません）。
-- **スライドは `<SlideDeck>` の直下の `<Slide>`。** 深くネストした `<Slide>` は拾われません。
-- `definePage` の `title` / `navLabel` はビルド時に静的抽出されるので**リテラルで書く**（変数・
-  テンプレート補間は不可）。ナビの表示名はこれで決まります。
+- **ファイル形式の MUST / SHOULD（`<Slide>` は `<SlideDeck>` の直下、`<Step>` は `<Steps>` の直下、
+  `definePage` はリテラル など）は `agents/slide.md` と `agents/page.md` が正本**です。ここでは繰り返しません。
 - **`.slide` を付けられるのはルートになるページモジュールだけ。** `_layout.slide.tsx` や
   `deck.slide.ts` は `INVALID_PAGE_VARIANT` エラーになります。
 - **`june.slide.tsx` と `june.tsx` は同じ URL** になるので `ROUTE_CONFLICT` です。どちらかを消すこと。
@@ -56,10 +55,24 @@ export default function JuneDeck() {
   スライド専用のコンポーネントを `components/` に切り出すと、デッキ 1 本を読むのに 2 ファイル
   追わせることになります。
 
+## まず block を探す
+
+1 枚分の中身は、手で組む前に `@squadbase/vantage/slide` の block（`SlideCover` `SlideExecSummary`
+`SlideKpiHero` `SlideKpiGrid` `SlideChartInsight` `SlideScorecardTable` `SlideNextActions`）に
+合うものがないか探します。`<Slide>` の**中**に置き、props は `vantage docs <name>`（例:
+`vantage docs slide-cover`）で引く。一覧は `agents/slide.md` が正本です。
+- props は block 間で共通: `value: number | null` + `format`（上書きだけ `display`）、`delta: { value, format? }` + `betterWhen` + `comparisonLabel`、`target: number`、`source` は文字列、`asOf` は日付だけ（「時点」は block が付ける）。
+
+- block は `@squadbase/vantage/slide` から import する。**新しい import 元は増えない**（下の
+  「import してよいもの」と矛盾しない）。`vantage add` でコピーするものでもない。
+- block が合わない**1 枚だけ**を、この下の規約で手書きする。デッキ全体を手書きに切り替えない。
+- デッキ以外のファイルは作らない。block を使っても、デッキは 1 ファイルのままで、独自の
+  ヘルパーコンポーネントは同じ `.slide.tsx` に書く。
+
 ## import してよいもの
 
 - `@squadbase/vantage/slide` — `SlideDeck` `Slide` `Steps` `Step` `MorphElement` `useSlideNumber`
-  `useIsActiveSlide` `SlideCanvas` と、その型
+  `useIsActiveSlide` `SlideCanvas`、1 枚分の block（`SlideCover` ほか上の 7 つ）と、その型
 - `@squadbase/vantage` — `definePage`
 - `@squadbase/vantage/components` の `EChart` — **チャートを載せるときはこれ**（→「チャート」）
 - `lucide-react` のアイコン
@@ -77,21 +90,25 @@ export default function JuneDeck() {
 - 各スライドのルート要素はキャンバスを埋める（`width: "100%"; height: "100%"`）
 - インライン `style={{ … }}` を使う。読み込んだ CSS はグローバルです
 
-### タイプスケール（ここから始めて調整する）
+以下の値がスライドの規約です。ヒーローと本文は `var(--slide-size-hero)` /
+`var(--slide-size-body)` としても読めます（→ `references/tokens.md`）。
+
+### タイプスケール
 
 | 要素 | サイズ |
 | --- | --- |
-| ヒーロータイトル | 140–200px |
-| セクション見出し | 80–120px |
-| ページ見出し | 56–80px |
-| 本文 | 32–44px |
-| キャプション / ラベル | 22–28px |
+| ヒーロータイトル | 168px |
+| セクション見出し | 88px |
+| ページ見出し | 64px |
+| 本文 | 36px |
+| キャプション / ラベル | 24px |
 
-### 余白
+### 余白とグリッド
 
-- コンテンツの padding: キャンバス端から **100–160px**。文字を端に触れさせない
-- line-height: 見出し 1.2、本文 1.5–1.7
-- 要素間: 32–64px
+- セーフエリア: キャンバス端から **左右 160px・上下 120px**。中身はこの内側の **1600 × 840px** に置き、文字を端に触れさせない
+- グリッド: 内容幅 1600px を **12 列**（列幅 104px・溝 32px）に割る
+- line-height: 見出し 1.2、本文 1.6
+- 要素間: 32 / 48 / 64px のどれか
 
 ### 縦方向の予算 — 中身は 1080px に収まらなければならない
 
@@ -99,33 +116,32 @@ export default function JuneDeck() {
 計算して収まることを確かめること。**これがスライドが壊れる原因の第 1 位**で、確かめない限り
 溢れていると思ってください。
 
-**使える高さ** = `1080 − 上 padding − 下 padding`。上下 120px なら **840px**、160px なら **760px**。
-先に padding を決めて、その予算の中で設計します。
+**使える高さ** = `1080 − 上下のセーフエリア（120px × 2）` = **840px**。この予算の中で設計します。
 
 **要素の高さ** = `文字サイズ × line-height × 行数`。2 行に折り返す箇条書きは 2 行と数えます。
-次の要素を足す前に、その下の gap（32–64px）を加算してください。
+次の要素を足す前に、その下の gap（32 / 48 / 64px）を加算してください。
 
-**計算例 — 本文 1 枚、padding 120px（予算 840px）:**
+**計算例 — 本文 1 枚（予算 840px）:**
 
 | 要素 | 高さ |
 | --- | --- |
-| 見出し: 80px × 1.2 × 1 行 | 96px |
+| ページ見出し: 64px × 1.2 × 1 行 | 76.8px |
 | gap | 64px |
-| 本文: 40px × 1.6 × 3 行 | 192px |
+| 本文: 36px × 1.6 × 3 行 | 172.8px |
 | gap | 48px |
-| 箇条書き 5 行: 40px × 1.6 × 1 行 | 320px（5 × 64px） |
-| 箇条書き間の gap 4 つ: 24px | 96px |
-| **合計** | **816px ✅ 840 に収まる** |
+| 箇条書き 5 行: 36px × 1.6 × 1 行 | 288px（5 × 57.6px） |
+| 箇条書き間の gap 4 つ: 32px | 128px |
+| **合計** | **777.6px ✅ 840 に収まる** |
 
-見出しを 120px にするか箇条書きを 6 つにすると溢れます。**書く前に毎ページこの検算をすること。**
+箇条書きを 6 つにすると 867.2px で溢れます。**書く前に毎ページこの検算をすること。**
 
 **ページ単位の規則:**
 
 - 「見出し + 本文」か「見出し + 5 つ以内の短い箇条書き」のどちらか。両方は載せない
 - 箇条書きは選んだ文字サイズで 1 行に収まること。折り返すなら短くするか別ページに割る
-- ヒーロータイトル（140–200px）はタイトル + サブタイトル 1 行 + アイブロウまで。それ以外は載せない
-- セクション見出し（80–120px）のページにはほとんど何も足さない
-- 収めるために padding を上げる・スケールの下限より小さい文字にする・本文の line-height を 1.4 未満に
+- ヒーロータイトル（168px）はタイトル + サブタイトル 1 行 + アイブロウまで。それ以外は載せない
+- セクション見出し（88px）のページにはほとんど何も足さない
+- 収めるためにセーフエリアを削る・タイプスケールより小さい文字にする・本文の line-height を 1.6 未満に
   詰める、をやりたくなったら**ページを 2 枚に割る**。予算が厳しいときは分割が常に正解
 
 **`overflow: auto/scroll`・負のマージン・transform で溢れを隠さないこと。** キャンバスは固定で、
@@ -139,7 +155,7 @@ export default function JuneDeck() {
   それ以外はプレーンな const にする（→ `references/tokens.md`）
 - **書体** — ディスプレイ 1 + 本文 1。指定がなければシステムスタック。見出しは太く（800–900）、
   本文は通常（400–500）
-- **レイアウトグリッド** — padding を 1 つ決めて（例: 120px）貫く。左揃えは編集的、中央揃えは儀礼的
+- **レイアウトグリッド** — セーフエリアと 12 列グリッド（→「余白とグリッド」）を全ページで貫く。左揃えは編集的、中央揃えは儀礼的
 - **美学のコミットメント** — 1 つ選ぶ: ミニマル / マキシマル / エディトリアル / レトロ /
   ブルータリスト / ソフト・パステル / ネオン / 紙・印刷。混ぜない
 
@@ -152,12 +168,12 @@ export default function JuneDeck() {
 // ✅ 各カードが独自の JSX ノードを持つ
 const Card = ({ label, value }: { label: string; value: string }) => (
   <div style={{ flex: 1 }}>
-    <div style={{ fontSize: 28, opacity: 0.6 }}>{label}</div>
-    <div style={{ fontSize: 120, fontWeight: 800 }}>{value}</div>
+    <div style={{ fontSize: 24, opacity: 0.6 }}>{label}</div>
+    <div style={{ fontSize: 88, fontWeight: 800 }}>{value}</div>
   </div>
 )
 
-<div style={{ display: "flex", gap: 96 }}>
+<div style={{ display: "flex", gap: 64 }}>
   <Card label="売上" value="¥5.2億" />
   <Card label="解約率" value="1.4%" />
 </div>
@@ -169,6 +185,8 @@ const Card = ({ label, value }: { label: string; value: string }) => (
 
 これは**視覚要素が繰り返すとき**の話で、データが繰り返すときの話ではありません。純粋な
 テキストの箇条書き（`<ul><li>`）は各 `<li>` が既に独立した JSX ノードなので、そのままで正しい。
+`<SlideDeck>` の直下に `<Slide>` を配列で渡すこと自体はファイル形式として可能です（`agents/slide.md`）が、
+1 枚ごとの文言・図を変えるスライドは 1 枚ずつ書きます。
 
 ## ページ番号
 
@@ -250,8 +268,8 @@ pptx 書き出しのために描き終わりを待たせる必要があります
 - [ ] `export default` が `<SlideDeck>` を返している
 - [ ] `<Slide>` が `<SlideDeck>` の直下にある
 - [ ] 各スライドのルート要素が `100% × 100%` を埋めている
-- [ ] 文字が padding の内側にある（端に触れていない）
-- [ ] **全ページで（文字サイズ × line-height × 行数）+ gap + padding×2 ≤ 1080px。** 際どいなら分割
+- [ ] 文字がセーフエリア（左右 160px・上下 120px）の内側にある
+- [ ] **全ページで（文字サイズ × line-height × 行数）+ gap ≤ 840px。** 際どいなら分割
 - [ ] 箇条書きが 2 行目に折り返していない
 - [ ] 配色とタイプスケールが全ページで一貫している
 - [ ] 1 ページ 1 メッセージ
@@ -267,11 +285,11 @@ pptx 書き出しのために描き終わりを待たせる必要があります
 ## アンチパターン
 
 - ❌ 文字の壁。1 ページ 40 語を超えたら分割する
-- ❌ キャンバス全面を本文で使う。padding 100–160px を守る
+- ❌ キャンバス全面を本文で使う。セーフエリア（左右 160px・上下 120px）を守る
 - ❌ 縦に 1080px を溢れさせる。切れた中身は見えない — 分割する
 - ❌ `overflow: auto` / `scroll` / `hidden` で溢れを「隠す」。バグを隠しただけ
-- ❌ 詰め込むためにスケールの下限より小さい文字にする・padding を 100px 未満にする
-- ❌ 本文 28px 未満。プロジェクタで読めない
+- ❌ 詰め込むためにタイプスケールより小さい文字にする・セーフエリアを削る
+- ❌ 本文を 36px 未満にする。プロジェクタで読めない
 - ❌ `@squadbase/vantage/ui` のプリミティブをスライドに置く（縮小されて読めなくなる）
 - ❌ 依存を追加する。使えるのは `@squadbase/vantage/*` と `lucide-react` と標準 Web API だけ
 - ❌ スライド用のコンポーネントを別ファイルに切り出す

package/templates/AGENTS.md

@@ -95,8 +95,8 @@ root/
 | `@squadbase/vantage/ui` | shadcn/ui(Base UI バリアント)プリミティブ(`Button`・`Loading`・`ErrorState`・`Empty` ほか) |
 | `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、KPI の `KpiCard`・`Delta`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`、書式の `formatValue`) |
 | `@squadbase/vantage/table` | `FilePageView`・`TableViewer`(データファイルページの表ビューア) |
-| `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`(スライド専用。1920×1080 の固定キャンバス) |
-| `@squadbase/vantage/doc` | `Document`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
+| `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`、1 枚分の block `SlideCover`・`SlideExecSummary`・`SlideKpiHero`・`SlideKpiGrid`・`SlideChartInsight`・`SlideScorecardTable`・`SlideNextActions`(スライド専用。1920×1080 の固定キャンバス) |
+| `@squadbase/vantage/doc` | `Document`、ドキュメント用の block `DocReportHeader`・`DocExecutiveSummary`・`DocKpiScorecard`・`DocFigure`・`DocDataTable`・`DocCallout`・`DocKeyFindings`・`DocActionItems`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
 | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
 | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
 

package/templates/agents/doc.md

@@ -15,6 +15,13 @@ import { definePage } from "@squadbase/vantage"
 import { BarChart } from "@squadbase/vantage/components"
 import { Document } from "@squadbase/vantage/doc"
 
+const weekly = [
+  { week: "第1週", 売上: 1180 },
+  { week: "第2週", 売上: 1240 },
+  { week: "第3週", 売上: 1210 },
+  { week: "第4週", 売上: 1620 },
+]
+
 export const page = definePage({ title: "6月度サマリー", navLabel: "6月度サマリー" })
 export default function JuneSummary() {
   return (
@@ -50,6 +57,27 @@ export default function JuneSummary() {
 - **ページ全体を包むのは `<Document>` だけ。** `PageShell` などのダッシュボード用の枠で包まない
   (本文の幅と余白は `<Document>` が決めます)。
 
+## まず block を探す
+
+1 節分の中身は、手で組む前に `@squadbase/vantage/doc` の block から探します(`<Document>` の直下に
+並べる。多くは 1 block = 1 節。`DocCallout`・`DocFigure`・`DocDataTable` は節ではなく、節の中(本文の間)に置く部品)。props は `vantage docs <name>`(例: `vantage docs doc-kpi-scorecard`)で引く。
+
+| block | 用途 |
+| --- | --- |
+| `DocReportHeader` | レポートの冒頭(タイトル・サブタイトル・対象期間・データ時点・作成者・出典) |
+| `DocExecutiveSummary` | 結論を先に述べる要約の節 |
+| `DocKpiScorecard` | 主要指標をまとめたスコアカード |
+| `DocFigure` | 図表 1 つとキャプション(チャートは children で渡す) |
+| `DocDataTable` | 素の `table` による表 |
+| `DocCallout` | 補足・示唆・注意・決定の囲み(`kind`: `note` / `insight` / `warning` / `decision`) |
+| `DocKeyFindings` | 主要な発見の箇条 |
+| `DocActionItems` | 次のアクション(担当・期限つき) |
+
+**props の渡し方は block 間で共通。** 数値は `value: number | null` と `format`(整形は block がする。表示を上書きするときだけ `display`。`null` は「—」)。前期比などは `delta: { value, format? }` と `comparisonLabel`(例 `"前年同期比"`)、良し悪しは指標ごとの `betterWhen`(`"up"` が既定、コストなど下がるほど良いものは `"down"`。向きは block が符号から出す)。目標は `target: number`。出典は `source`、時点は `asOf` に**日付だけ**(例 `"2026-09-30"`。「データ時点」は block が付けるので「時点」を書かない)。時系列は、単一系列なら `{ x, y }[]`(`trend`)。
+
+block が合わない**1 節だけ**を素の HTML 要素で手で書く。import 元は `@squadbase/vantage/doc` のままで、
+block のための新しい import 元はありません。本文は文字列か ReactNode で渡し、Markdown 文字列は渡さない。
+
 ## 見た目を変える
 
 配色・書体・本文の幅は `--doc-*` の CSS 変数です。既定値はアプリのトークンへの別名なので、
@@ -74,3 +102,20 @@ export default function JuneSummary() {
 `.doc` を付けられるのはルートになるページモジュールだけで、`_layout.doc.tsx` などは
 `INVALID_PAGE_VARIANT` エラーになります。`june.doc.tsx` と `june.tsx` は同じ URL に解決するので
 `ROUTE_CONFLICT` です。
+
+## ファイル形式の規約
+
+置き場所・URL・default export・`definePage` の書き方は全ページ共通(`agents/page.md` の
+「ページファイルの規約」)。ここではドキュメント固有のものだけを挙げます。
+
+**MUST**
+
+- ファイル名は `<name>.doc.tsx`(`.jsx` も可)。サフィックスは小文字で 1 つだけ。`.doc.mdx` は
+  `INVALID_PAGE_VARIANT`、`.DOC.tsx`・二重サフィックスは黙って通常ページになる
+- default export は `<Document>` をルートに返す。フレームワークは包まない
+- ドキュメントの部品は `@squadbase/vantage/doc` から import する
+
+**SHOULD**
+
+- `PageShell` で包まない・PDF の保存ボタンを自作しない(上の「書き方」)
+- 数値はコードに直接書き、いつ時点の値かを本文に書く

package/templates/agents/page.md

@@ -71,6 +71,7 @@ URL になる。各ページは**デフォルトエクスポートの React コ
 | `_404.tsx` | Not Found ページ |
 | `_error.tsx` | ルートが throw したときのエラーページ |
 | `monthly-report.slide.tsx` | `/monthly-report`(スライドデッキ。詳しくは `agents/slide.md`) |
+| `june-summary.doc.tsx` | `/june-summary`(ドキュメント。詳しくは `agents/doc.md`) |
 | `sales-export.csv` | `/sales-export`(詳しくは `agents/csv.md`) |
 | `data/june.xlsx` | `/data/june`(詳しくは `agents/xlsx.md`) |
 
@@ -89,6 +90,26 @@ export default function MonthlyAnalysis() {
 }
 ```
 
+### ページファイルの規約(`.tsx` / `.slide.tsx` / `.doc.tsx` 共通)
+
+**MUST**
+
+- ページルートの配下に置く。`components/` などの走査対象外のディレクトリに置いたファイルはページに
+  ならず、エラーも出ない。`_` 始まりの名前は予約名(`_layout` / `_404` / `_error`)にだけ使う
+  (それ以外の `_` 始まりはページにならない。予約名にサフィックスを付けると `INVALID_PAGE_VARIANT`)
+- URL はサフィックスと拡張子を除いたパスで決まる。同じ URL になる別ファイル(`june.tsx` /
+  `june.slide.tsx` / `june.doc.tsx` / `june.csv`)を並べない(`ROUTE_CONFLICT`)。テンプレートの
+  未編集の `index.tsx` だけは例外で、`index.slide.tsx` / `index.doc.tsx` が `/` を取れる
+- default export は React の関数コンポーネント(無いと `MISSING_DEFAULT_EXPORT`。関数かどうかは
+  検査されない)
+- `definePage({ ... })` にはオブジェクトリテラルを直接渡し、`title` / `description` / `navLabel` は
+  文字列リテラルで書く。ビルド時に静的抽出されるので、変数・関数呼び出し・spread・shorthand・
+  `${}` を含むテンプレート文字列は**エラーにならず黙ってメタなし**になる
+
+**SHOULD**
+
+- `definePage` に `title` と `navLabel` を書く(ナビの表示名とブラウザのタブ名になる)
+
 ### ナビはルート一覧から組む
 
 `useRoutes()` がページルート一覧(スキャン順)を返すので、リンク配列を手で持たない。
@@ -109,7 +130,7 @@ routes.map((r) => (
 ```
 
 `RouteInfo`: `path`(`/sales/:id`)・`to`(`/sales/$id`)・`params`・`dynamic`・`index`・`label`・
-`title`・`description`・`navLabel`・`kind`(`"module"` | `"file"`)・`variant`(`"slide"`)。
+`title`・`description`・`navLabel`・`kind`(`"module"` | `"file"`)・`variant`(`"slide"` | `"doc"`)。
 後ろの 2 つで、ナビをダッシュボード / スライド / データに分けたりアイコンを変えたりできます。
 
 ### フィルタ状態は URL に置く

package/templates/agents/slide.md

@@ -19,6 +19,7 @@
 - 新規プロジェクトでまだ `/` が空いている場合のみ、`index.slide.tsx` を使ってよい。
 
 ```tsx
+import { definePage } from "@squadbase/vantage"
 import { Slide, SlideDeck } from "@squadbase/vantage/slide"
 
 export const page = definePage({ title: "6月度レビュー", navLabel: "6月度" })
@@ -34,8 +35,10 @@ export default function Deck() {
 
 **`<Slide>` は `<SlideDeck>` の直接の子に書く。** `SlideDeck` は直下の `<Slide>` 要素だけを数えるので、
 `<Slide>` を自作コンポーネント(`<Slide1 />` など)や Fragment で包むと 1 枚も数えられず「1 / 0」に
-なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列は可)。共通の部品は
-`<Slide>` の**中**に置くコンポーネントとして切り出します(`<Slide><CoverPage /></Slide>`)。
+なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列はファイル形式としては可。
+1 枚の中で視覚要素を `map` で量産しない方針は `vantage-slide` skill の「繰り返す要素は `map` ではなく
+コンポーネント」)。共通の部品は `<Slide>` の**中**に置くコンポーネントとして切り出します
+(`<Slide><CoverPage /></Slide>`)。
 
 1920×1080 の固定キャンバスに絶対 px で書き、画面サイズに合わせて縮小されます。キー / クリックで
 送れ、左のスライド一覧(サムネイル列)は `L` で開閉、`F` で全画面、ツールバーから pptx を
@@ -51,3 +54,53 @@ pptx が壊れる条件、説明と図表のデータ時点の揃え方)。
 `.slide` を付けられるのはルートになるページモジュールだけで、`_layout.slide.tsx` などは
 `INVALID_PAGE_VARIANT` エラーになります。`june.slide.tsx` と `june.tsx` は同じ URL に解決するので
 `ROUTE_CONFLICT` です。
+
+## まず block を探す
+
+1 枚分の中身は、手で組む前に `@squadbase/vantage/slide` の block から探します(`<Slide>` の**中**に
+置く。ルートは 100% で、`<Slide>` 自体は持たない)。props は `vantage docs <name>`(例:
+`vantage docs slide-kpi-hero`)で引く。
+
+| block | 用途 |
+| --- | --- |
+| `SlideCover` | 表紙(タイトル・サブタイトル・期間) |
+| `SlideExecSummary` | 結論を先に述べるエグゼクティブサマリー |
+| `SlideKpiHero` | 主要な KPI 1 つを大きく見せる |
+| `SlideKpiGrid` | 複数の KPI を並べる |
+| `SlideChartInsight` | チャート 1 つと、そこから読み取れること |
+| `SlideScorecardTable` | 指標と目標・達成度を表にしたスコアカード |
+| `SlideNextActions` | 次のアクション(担当・期限つき) |
+
+```tsx
+import { Slide, SlideDeck, SlideCover, SlideExecSummary } from "@squadbase/vantage/slide"
+// <SlideDeck><Slide><SlideCover … /></Slide><Slide><SlideExecSummary … /></Slide></SlideDeck>
+```
+
+**props の渡し方は block 間で共通。** 数値は `value: number | null` と `format`(整形は block がする。表示を上書きするときだけ `display`。`null` は「—」)。前期比などは `delta: { value, format? }` と `comparisonLabel`(例 `"前年同期比"`)、良し悪しは指標ごとの `betterWhen`(`"up"` が既定、コストなど下がるほど良いものは `"down"`。向きは block が符号から出す)。目標は `target: number`。出典は `source`(文字列)、時点は `asOf` に**日付だけ**(例 `"2026-09-30"`。「時点」は block が付けるので書かない)。時系列は、単一系列なら `{ x, y }[]`(kpi-hero・scorecard の `trend`)、複数系列なら `{ categories, series }`(chart-insight の `chart`)。
+
+block が合わない**1 枚だけ**を手で書く(デッキ全体を手書きに切り替えない)。import 元は
+`@squadbase/vantage/slide` のままで、block のための新しい import 元はありません。
+
+## ファイル形式の規約
+
+置き場所・URL・default export・`definePage` の書き方は全ページ共通(`agents/page.md` の
+「ページファイルの規約」)。ここではスライド固有のものだけを挙げます。**中身の値(キャンバス・
+セーフエリア・グリッド・文字サイズ・余白)は `vantage-slide` skill を参照。**
+
+**MUST**(破ると黙って壊れるものが多い。`vantage check` が拾うのは名前の誤りだけ)
+
+- ファイル名は `<name>.slide.tsx`(`.jsx` も可)。サフィックスは小文字で 1 つだけ。`.slide.ts` は
+  `INVALID_PAGE_VARIANT`、`.SLIDE.tsx`・二重サフィックス・`.slide.test.tsx` は黙って通常ページになる
+- default export は `<SlideDeck>` をルートに返す。フレームワークは包まない
+- `<Slide>` は `<SlideDeck>` の直接の子(配列は可。Fragment・自作コンポーネントで包まない)
+- `<Step>` は `<Steps>` の直接の子(包むと常に表示される)
+- スライドの部品は `@squadbase/vantage/slide` から import する
+
+**SHOULD**
+
+- 1 ファイル = 1 デッキ。ヘルパーコンポーネント・定数も同じ `.slide.tsx` に書く
+- 各 `<Slide>` のルート要素は `width: "100%"; height: "100%"` でキャンバスを埋める
+- canvas に描くチャート(`EChart`)は `data-waitfor="canvas"` で包む(無いと pptx でそのスライドが白紙になりうる)
+- pptx に出る中身をアプリの Context(router / query / テーマ)に依存させない
+- `MorphElement` の `id` はページ内で一意にし、入れ子にしない。遷移先の `<Slide>` で `transition.morph` を有効にする
+- pptx 用などの依存を追加しない(html-to-image / fflate は自動で入る)

package/theme.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-theme.mjs — do not edit. Sources:
  *   packages/squadkit/registry/theme/theme.css (UI part tokens)
- *   packages/vantage/src/theme/framework.css   (slide / document styles) */
+ *   packages/squadkit/theme/slide-doc.css         (slide / document styles) */
 
 /**
  * Vantage design tokens. Imported after `@import "tailwindcss"` by the
@@ -62,10 +62,10 @@
     sans-serif;
 
   --chart-1: oklch(0.55 0.2 262);
-  --chart-2: oklch(0.7 0.14 215);
-  --chart-3: oklch(0.6 0.23 295);
-  --chart-4: oklch(0.63 0.24 330);
-  --chart-5: oklch(0.78 0.19 125);
+  --chart-2: oklch(0.62 0.17 118);
+  --chart-3: oklch(0.5 0.19 352);
+  --chart-4: oklch(0.62 0.1 195);
+  --chart-5: oklch(0.44 0.18 300);
 
   /* Semantic status tokens — see the contract above the `@theme inline` block. */
   --positive: oklch(0.52 0.14 150);
@@ -115,16 +115,16 @@
   --accent: oklch(0.3 0.02 262);
   --accent-foreground: oklch(0.96 0.005 255);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.145 0.02 262);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.6 0.15 262);
 
-  --chart-1: oklch(0.55 0.2 262);
-  --chart-2: oklch(0.76 0.14 215);
-  --chart-3: oklch(0.68 0.2 295);
-  --chart-4: oklch(0.7 0.22 330);
-  --chart-5: oklch(0.82 0.18 125);
+  --chart-1: oklch(0.56 0.19 262);
+  --chart-2: oklch(0.75 0.17 118);
+  --chart-3: oklch(0.64 0.19 352);
+  --chart-4: oklch(0.78 0.105 195);
+  --chart-5: oklch(0.71 0.17 300);
 
   --positive: oklch(0.76 0.15 150);
   --positive-subtle: oklch(0.27 0.05 150);
@@ -145,7 +145,7 @@
   --sidebar: oklch(0.2 0.014 262);
   --sidebar-foreground: oklch(0.96 0.005 255);
   --sidebar-primary: oklch(0.68 0.19 262);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0.02 262);
   --sidebar-accent: oklch(0.3 0.02 262);
   --sidebar-accent-foreground: oklch(0.96 0.005 255);
   --sidebar-border: oklch(1 0 0 / 10%);
@@ -162,7 +162,8 @@
                       text or icons — use --<tone>. Same lightness step from the page in both
                       modes (light 0.62 / dark 0.56: ~0.36-0.40 OKLCH L away from --background,
                       >= 3:1 against --background and --card), so a fill is never strong in one
-                      mode and faint in the other. Presets do not override it.
+                      mode and faint in the other. Presets may tune hue and chroma within the
+                      status bands while preserving contrast and fill strength (tests/theme-presets.test.ts).
                       --warning-fill is the exception: amber (light 0.79 / dark 0.73, ~#f5b324 / ~#d99a1e) is
                       a light colour by nature, so it is ~2:1 on the light page (still >= 0.18 L away)
                       and ~7-8:1 on the dark one; dark text (--foreground in light, --background in dark) sits on it at >= 4.5:1.
@@ -359,8 +360,8 @@
 /**
  * Vantage framework styles: the slide / document tokens and the document
  * typesetting. The UI parts' tokens live in SquadKit
- * (packages/squadkit/registry/theme/theme.css); scripts/gen-theme.mjs appends
- * this file to them to produce packages/vantage/theme.css.
+ * (packages/squadkit/registry/theme/theme.css); packages/vantage/scripts/gen-theme.mjs
+ * appends this file to them to produce packages/vantage/theme.css.
  */
 
 :root {