@squadbase/vantage-template 0.1.1-dev1.7a4f5d9 → 0.1.1-dev1.8858348

package/base-template/.squadbase/skills/vantage-design/references/presets.md

@@ -1,110 +1,50 @@
-# 初期デザインのプリセット
-
-プロジェクト作成時に選ぶ 4 つの出発点。**id(`default` / `calm` / `vivid` / `mono`)はプロジェクト
-作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + `--primary` +
-`DESIGN.md` の差分」でできている。**`--primary` はどのプリセットでも必ず書く**(無彩色のプリセットも
-値を明示する)。チャートだけ変えるとホームのような色の少ない画面では見た目が変わらず、別のプリセットから
-切り替えたときに前の `--primary` が残るため。
-
-適用の手順は共通:
-
-1. `npx @squadbase/vantage-template chart <チャートのプリセット>` で `styles.css` のマーカーブロックを
-   差し替える。**マーカーブロックの中(`--chart-1..5`)は手で編集しない** ― コマンドの生成物で、
-   次の適用で消える。
-2. 各プリセットの `--primary` / `--primary-foreground` を、`styles.css` のマーカーの**外**(先頭の
-   `:root` ブロック)に `:root` と `.dark, [data-theme="dark"]` の両方で書く。既にある `--primary` は置き換える。
-3. `DESIGN.md` を `format.md` の雛形から作り、下の「DESIGN.md の差分」の行だけを書き換える。
-4. `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
-
-| id | トーン | チャートのプリセット | `--primary` |
-| --- | --- | --- | --- |
-| `default` | 無彩色のベース。色を持つのはデータ(`blue` チャート)だけ | `blue` | 無彩色(`theme.css` の既定値を明示) |
-| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 深い青(スカイ 700 / 300) |
-| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ(オレンジ 700 / 400) |
-| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | ジンク 900 / 200 |
-
-## `default`
-
-- トーン: 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。装飾より読みやすさ。
-- チャート: `blue`(青 → ティール → フクシア → バイオレット → グレー)。
-- `--primary`(フレームワークの既定と同じ無彩色。他のプリセットから戻すときのために明示する):
-
-  ```css
-  :root {
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md`: 雛形そのまま(`format.md` の雛形は `default` を説明している)。
-
-## `calm`
-
-- トーン: 寒色でまとめた静かな画面。強調は控えめにし、数字と罫線で読ませる。
-- チャート: `ocean`(スカイ → シアン → インディゴ → ティール → スレート)。
-- `--primary`(チャートのスカイに揃えた深い青):
-
-  ```css
-  :root {
-    --primary: var(--color-sky-700);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-sky-300);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md` の差分: 「全体のトーン」を上の文に。チャートの色味を「スカイ → シアン → インディゴ →
-  ティール → スレート」に。良い = `--chart-4`(ティール)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
-  禁止: `--chart-1` と `--chart-2` を隣り合う細い線で並べる(どちらも明るい青系)。
-
-## `vivid`
-
-- トーン: 明るく勢いのある暖色。KPI とトレンドを大きく見せ、強調色をはっきり使う。
-- チャート: `sunset`(オレンジ → アンバー → ローズ → イエロー → ストーン)。
-- `--primary`(オレンジ 600 は白文字で 4.5:1 に届かないので 700 を使う):
-
-  ```css
-  :root {
-    --primary: var(--color-orange-700);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-orange-400);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md` の差分: トーンを上の文に。主色の行を「濃いオレンジ」に。良い = 専用色なし(▲ と
-  `--foreground`)、悪い = `--destructive`。禁止: `--chart-3`(ローズ)と `--destructive` を同じ
-  チャートに置く(悪い値と区別できない)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
-
-## `mono`
-
-- トーン: 白黒と灰色だけ。色で意味を運ばず、太さ・順番・ラベルで読ませる。
-- チャート: `mono`(ジンク 900 → 200。ダークでは反転)。
-- `--primary`(チャートの両端と同じジンク):
-
-  ```css
-  :root {
-    --primary: var(--color-zinc-900);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-zinc-200);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md` の差分: トーンを上の文に。強調 = `--chart-1`(最も濃い灰)。良い = 専用色なし(▲ と
-  符号)、悪い = `--destructive`(**画面で唯一の有彩色**として使う)。チャートは系列を 3 つまでにし、
-  それ以上は直接ラベルを付ける。禁止: 隣り合う `--chart-4` と `--chart-5`(明度差が小さい)。
+# 初期デザイン(テーマ)
+
+プロジェクトの見た目の出発点は、SquadKit の 7 テーマから選ぶ。**テーマ id はプロジェクト作成の
+ワークフローが参照するので変えないこと。** テーマは主色・背景・文字・境界・チャート 5 色・角丸・書体を
+まとめて持つ(ライトとダークの両方)。
+
+| id | トーン | 向く場面 |
+| --- | --- | --- |
+| `neutral` | 既定。Vantage の素の見た目(青の主色と無彩色の面) | 迷ったとき・おまかせ |
+| `ocean` | 青を基調にした落ち着いた信頼感。角丸はやや小さめ | 報告書・経営向け |
+| `forest` | 緑を基調にした自然な印象。丸ゴシック系の書体、角丸はやや小さめ | 環境・ヘルスケア・自然 |
+| `sunset` | 橙を基調にした温かみ。角丸はやや大きめ | 営業・マーケティング |
+| `violet` | 紫を基調にしたやわらかい印象。角丸は大きめ | 華やかさ・ポップ |
+| `rose` | 赤紫からピンクの落ち着いた色。角丸は大きめ(`--destructive` の赤とは別の色) | 華やかさ・ポップ |
+| `mono` | 無彩色寄り。チャートも彩度を抑え、角丸は最小。等幅フォント | 印刷・資料への貼り付け |
+
+## 当てる
+
+プロジェクトルートで次を実行する。`--dry-run` で書き込まずに結果を見られる。
+
+```bash
+npx @squadbase/vantage-template theme <id>
+npx @squadbase/vantage-template theme ocean --reset-chart   # chart コマンドで選んだ配色を捨て、テーマのチャート色に揃える
+```
+
+- `styles.css` の ``/* squadkit-theme — regenerated by `theme`; edits here are lost */`` 〜
+  `/* squadkit-theme:end */` の範囲(テーマ範囲)だけを差し替える。**範囲の中は手で編集しない**。
+  マーカーが無いファイルには自動で足される。同じ id を再実行しても変わらない。
+- テーマ範囲はファイル先頭の `:root` より後ろに置かれ、同じ詳細度なら後ろが勝つ。
+  先頭の `:root` に手書きした `--primary` などはテーマに負ける。
+- `chart <preset>` の範囲(`--chart-*` だけ)はテーマ範囲の**後ろ**に置かれ、テーマのチャート色に勝つ。
+  チャートの配色もテーマに任せるなら `--reset-chart` で外す。
+
+## 旧プリセット id の読み替え
+
+古い呼び出しの `default` / `calm` / `vivid` / `mono` は、`theme` コマンドがそのまま受けて次の id として扱う。
+
+| 旧 | 新 |
+| --- | --- |
+| `default` | `neutral` |
+| `calm` | `ocean` |
+| `vivid` | `sunset` |
+| `mono` | `mono` |
+
+## テーマに無い値(ブランド色など)
+
+テーマの `--primary` を変えたい、特定の色だけブランドに合わせたい、というときは、テーマを当てたうえで
+**`/* squadkit-theme:end */`(チャート範囲があればその終端)より後ろ**に、変えたいトークンだけ
+`:root` と `.dark, [data-theme="dark"]` の**両方**に書く。前に書くとテーマに負ける。
+`scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。

package/base-template/.squadbase/skills/vantage-pitfalls/SKILL.md

@@ -94,6 +94,11 @@ Base UI の `SelectValue` は選択中の **value をそのまま描き**、`Sel
 - 表示ルート `/sales/:customerId`
 - リンク `to="/sales/$customerId"` + `params={{ customerId }}` / 取り出し `useParams().customerId`
 
+## 日本語アプリは `lang` を指定する
+
+ルート `src/_layout.tsx` に `export const lang = "ja"`(リテラル)が無いと `<html lang="en">` のままで、
+スライドの見出しが文節の途中で折れる。内容が日本語なら必ず指定する。
+
 ## ページ:`definePage` の値はリテラルで書く
 
 title/description/navLabel は**ビルド時に静的抽出**される。変数・関数呼び出し・テンプレート補間を

package/base-template/.squadbase/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` `SlideSection` `SlideComparison` `SlideChartFull`）に
+合うものがないか探します。`<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` ほか上の 10 個）、手書きの 1 枚に使う部品（`SlideHeading` `SlideSourceLine` `SlideColumns` `SlideColumn` `DeltaText`）と、その型
 - `@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/base-template/AGENTS.md

@@ -7,8 +7,8 @@
 > このファイルと `agents/*.md` は、いずれも **Vantage フレームワークが所有する正本**の
 > コピーです。手で書き換えても、`vantage upgrade` を実行するとフレームワーク同梱の正本から
 > 再同期されて上書きされます。アプリ固有のメモは別ファイル(例: `README.md`)に書いてください。
-> 例外はプロジェクトルートの `DESIGN.md` で、これは**ユーザーが所有**します(`vantage upgrade` も
-> `vantage add agents` も触らない。→「デザインの意図(DESIGN.md)」)。
+> 例外はプロジェクトルートの任意の `DESIGN.md` で、これは**ユーザーが所有**します(`vantage upgrade` も
+> `vantage add agents` も触らない。→「見た目の規約」)。
 >
 > 手順を伴う踏み込んだワークフローは、同梱の Claude Code Skill に分かれています。このファイルは
 > 「地図」、`agents/*.md` は「種類ごとの静的リファレンス」、Skill は「手順書」という役割分担です。
@@ -47,6 +47,9 @@ UI キット・開発サーバー・API サーバー・ビルドはすべて Van
 - **`definePage` の値はリテラルで書く。** title/description/navLabel はビルド時に静的抽出される
   ため、変数・関数呼び出し・テンプレート補間は使わない。`page` エクスポートはランタイムでは
   読まれない。
+- **アプリの表示言語は、ルート `_layout.tsx` の `export const lang = "en"`(リテラル。BCP 47)で指定する。**
+  `<html lang>` になり、日本語の文節改行とスライドの文言切り替えに効く。未指定は `"en"`。
+  画面の文言・docs・コメントは、ユーザーが使う言語に合わせる(`lang` もその言語にする)。
 
 ## ディレクトリ構造(ページをどこに置くか)
 
@@ -95,12 +98,12 @@ 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`・`SlideSection`・`SlideComparison`・`SlideChartFull`、手書きの 1 枚に使う部品 `SlideHeading`・`SlideSourceLine`・`SlideColumns`・`SlideColumn`・`DeltaText`(スライド専用。1920×1080 の固定キャンバス) |
+| `@squadbase/vantage/doc` | `Document`、ドキュメント用の block `DocReportHeader`・`DocExecutiveSummary`・`DocKpiScorecard`・`DocFigure`・`DocDataTable`・`DocCallout`・`DocKeyFindings`・`DocActionItems`・`DocNotesAndSources`、部品 `DeltaText`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
 | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
 | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
 
-**KPI は `KpiCard`、増減は `Delta`(`comparison` と `polarity` を渡す)。** 向き・率・色は値から計算
+**KPI は `KpiCard`、増減は `Delta`(`comparison` を渡し、下がって良い指標は `betterWhen="down"`)。** 向き・率・色は値から計算
 されるので手で渡さない。`TrendIndicator` は非推奨(`direction` を手で渡すので値と食い違いうる)。props は
 `vantage docs kpi-card` / `vantage docs delta` を引く。
 
@@ -123,17 +126,30 @@ import { KpiCard, Delta } from "@squadbase/vantage/components";
 - `server/` が**無い** → 外部 API を直接叩くなら `useQuery`(→ `agents/page.md`)。自前の API が
   要るようになったら `server/api/*.ts` を足すだけでよい(設定変更は不要)。
 
-## デザインの意図(DESIGN.md)
+## 見た目の規約
 
-プロジェクトルートに `DESIGN.md` があれば、**UI(ページ・スライド・コンポーネント)を書く前に
-読む。** 色・チャート・書体・レイアウトの使い分けがトークン名で書いてあるので、それに従って
-トークンで書く(値は `styles.css` にあり、`DESIGN.md` には色コードを書かない)。
+色・書体・角丸などの**値と色の割り当ては、テーマ(`styles.css` の `/* theme: <name> */` マーカー以降の
+上書き)だけが持つ。** ここには値を書かず、使い分けの規則だけを置く。UI(ページ・スライド・
+コンポーネント)はこの規則に従い、色は必ずトークンで指定する(色コード・素のパレットクラスは書かない)。
 
-- **会話中の指示は `DESIGN.md` より優先する。** 同じ指示が繰り返されたら、`DESIGN.md` への
-  反映をユーザーに提案する。
-- **「色を変えて」「ブランドに合わせて」などデザイン全体の変更は、ファイルごとに直さない。**
-  Skill `vantage-design` の手順で `DESIGN.md` と `styles.css` をまとめて更新する。
-- `DESIGN.md` はユーザーの持ち物。`vantage upgrade` は書き換えない。
+- **意味トークン:** 良い = `positive`、悪い = `negative`、注意 = `warning`、情報 = `info`、
+  中立 = `neutral`。系列色は `chart-1`〜`chart-5` を番号順に使う(5 系列まで。超えるなら「その他」に
+  まとめる)。増減の良否は指標の性質(コスト減・解約率減は良い)で決めて
+  positive / negative に分け(`KpiCard` / `Delta` の `betterWhen`。下がって良い指標は `betterWhen="down"`)、向きは ▲▼ や符号で表す。
+- **レイアウト:** 内容はカードで包む。順序は KPI → チャート → 表。値が 1 つなら KPI にする
+  (1 本の棒グラフにしない)。強調は 1 画面(スライドは 1 枚)に 1 か所。数値には単位と比較対象を添える。
+- **Do:** トークンで色を指定する / 色の意味をアプリ全体でそろえる / チャートのタイトルに結論を書く。
+- **Don't:** 色コードや素のパレットクラスを書く / `dark:` を並べる / 3D・装飾目的のグラデーション・
+  円グラフの多用 / 同じチャートで `negative` を普通の系列色に使う。
+- スライド固有の規則は `agents/slide.md`。
+
+**任意の `DESIGN.md`:** プロジェクトルートにあれば読んで従う(密度・スライドの見出し方針・
+ブランド素材などユーザー固有の意図)。AGENTS.md の規則に加えて従うが、**色の割り当てはテーマを優先**
+する。新規には作らない。ユーザーの持ち物で、`vantage upgrade` は書き換えも削除もしない。
+
+**デザイン変更の依頼**(「もっと落ち着いた色に」「ブランドに合わせて」など)は、ファイルごとに
+直さず、テーマの切り替えかスタイルシートの上書きで完結させる。`DESIGN.md` には記録しない。今のテーマ名は
+`styles.css` の `/* theme: <name> */` マーカーから読む。手順は Skill `vantage-design`。
 
 ## 何を書くか → どのファイルを読むか
 
@@ -172,7 +188,7 @@ vantage docs button           # 1 ページ表示(短縮名。ui/button に解
 vantage docs parts/data-table # 完全な slug でも引ける
 vantage docs data-table --json  # { slug, title, description, section, content }
 vantage docs --all            # 全ページを連結(まとめて読み込む用)
-vantage docs routing --lang en  # 英語版(既定は ja)
+vantage docs routing --lang en  # 英語版(`--lang` 省略時は ja。アプリの文言の言語とは無関係)
 ```
 
 props の表・使用例・落とし穴はコンポーネントのページに載っている。**推測で props を書く前に
@@ -210,7 +226,7 @@ body・レスポンスの status と形)まで出る。`vantage check --json` /
 - **`vantage-app`** — アプリを一から作る / 構成を広げるときの進め方と検証の順序
 - **`vantage-add-feature`** — 既存アプリに page / api / ui を 1 つ足す定型
 - **`vantage-slide`** — `.slide.tsx` でスライドデッキを書く(キャンバスの予算・段階表示・pptx 書き出し)
-- **`vantage-design`** — `DESIGN.md` と `styles.css` をまとめて作る / 直す(配色・書体・ブランド合わせ)
+- **`vantage-design`** — テーマの切り替え・`styles.css` の上書きで見た目を直す(配色・書体・ブランド合わせ)
 - **`vantage-pitfalls`** — Base UI(≠ Radix)の癖など、静かに壊れる落とし穴のリファレンス
 - **`project-storage`** — Squadbase の Project Storage(アップロード済みファイル)をブラウザから読み書きする
 
@@ -509,3 +525,14 @@ function KpiRow({ items }: { items: Kpi[] }) { /* … */ }  // 子の部品は
 - **値(定数・データ・列定義・小さな関数)は本体より上。** 小文字の関数・hook も値として上に置く。
 - 型は消えるのでどこでもよい。値のそばに置く。
 - 順序だけのために、既に並んでいるファイルを書き換えない。
+
+## アプリの表示言語(`lang`)
+
+ルートの `src/_layout.tsx` の `export const lang = "en"` が `<html lang>` になる。**アプリの内容の言語に合わせて書き換える**
+(ユーザーが日本語で依頼している・画面の文言が日本語なら `"ja"`)。
+
+- `lang` は**リテラル文字列**(BCP 47。`"ja"` / `"en"` / `"ja-JP"`)。変数・テンプレート補間は読まれない。
+- 読まれるのは**ルートの `src/_layout.tsx` だけ**。入れ子の `_layout.tsx` やページには書かない。
+- 日本語アプリで `"en"` のままだと、スライドの文節改行(`word-break: auto-phrase`)が効かず、見出しが単語の途中で折れる。
+  スライドのツールバー文言も `lang` で切り替わる(`"ja"` なら日本語、`en*` なら英語)。
+- 値は消さない。指定が無いと `"en"` 扱いになる。

package/base-template/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,30 @@ 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` | 次のアクション(担当・期限つき) |
+| `DocNotesAndSources` | 末尾の注記・用語の定義・データソースをまとめた節 |
+
+**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`)。
+
+本文の中で増減を書くときは `DeltaText`(部品。「▲ +3.2%」の形で、文字サイズは持たず置かれた行に従う。`value` `format` `betterWhen` `comparisonLabel`)を使う。節ではなく文の中に置く。
+
+block が合わない**1 節だけ**を素の HTML 要素で手で書く。import 元は `@squadbase/vantage/doc` のままで、
+block のための新しい import 元はありません。本文は文字列か ReactNode で渡し、Markdown 文字列は渡さない。
+
 ## 見た目を変える
 
 配色・書体・本文の幅は `--doc-*` の CSS 変数です。既定値はアプリのトークンへの別名なので、
@@ -74,3 +105,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/base-template/agents/page.md

@@ -4,7 +4,7 @@
 (ダッシュボード)を書くときに読んでください。前提となる不変条件・ディレクトリ構造は
 `AGENTS.md` を先に読んでいる想定です。
 
-プロジェクトルートに `DESIGN.md` があれば、書き始める前に読んで配色・書体・レイアウトの規則に従う。
+書き始める前に `AGENTS.md` の「見た目の規約」(と、あればプロジェクトルートの `DESIGN.md`)に従う。
 
 ## 最小アプリ(2 ファイル)
 
@@ -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 に置く