@squadbase/vantage-template 0.1.1-dev1.6b30e42 → 0.1.1-dev1.742a163

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -94,6 +94,11 @@ Base UI の `SelectValue` は選択中の **value をそのまま描き**、`Sel
94
94
  - 表示ルート `/sales/:customerId`
95
95
  - リンク `to="/sales/$customerId"` + `params={{ customerId }}` / 取り出し `useParams().customerId`
96
96
 
97
+ ## 日本語アプリは `lang` を指定する
98
+
99
+ ルート `src/_layout.tsx` に `export const lang = "ja"`(リテラル)が無いと `<html lang="en">` のままで、
100
+ スライドの見出しが文節の途中で折れる。内容が日本語なら必ず指定する。
101
+
97
102
  ## ページ:`definePage` の値はリテラルで書く
98
103
 
99
104
  title/description/navLabel は**ビルド時に静的抽出**される。変数・関数呼び出し・テンプレート補間を
@@ -43,9 +43,8 @@ export default function JuneDeck() {
43
43
 
44
44
  - **1 ファイル = 1 デッキ = 1 ルート。** `export default` は `<SlideDeck>` を返す React コンポーネント
45
45
  (通常のページと同じ契約なので、`vantage check` も `vantage routes` も特別扱いをしません)。
46
- - **スライドは `<SlideDeck>` の直下の `<Slide>`。** 深くネストした `<Slide>` は拾われません。
47
- - `definePage` の `title` / `navLabel` はビルド時に静的抽出されるので**リテラルで書く**(変数・
48
- テンプレート補間は不可)。ナビの表示名はこれで決まります。
46
+ - **ファイル形式の MUST / SHOULD(`<Slide>` は `<SlideDeck>` の直下、`<Step>` は `<Steps>` の直下、
47
+ `definePage` はリテラル など)は `agents/slide.md` と `agents/page.md` が正本**です。ここでは繰り返しません。
49
48
  - **`.slide` を付けられるのはルートになるページモジュールだけ。** `_layout.slide.tsx` や
50
49
  `deck.slide.ts` は `INVALID_PAGE_VARIANT` エラーになります。
51
50
  - **`june.slide.tsx` と `june.tsx` は同じ URL** になるので `ROUTE_CONFLICT` です。どちらかを消すこと。
@@ -56,10 +55,24 @@ export default function JuneDeck() {
56
55
  スライド専用のコンポーネントを `components/` に切り出すと、デッキ 1 本を読むのに 2 ファイル
57
56
  追わせることになります。
58
57
 
58
+ ## まず block を探す
59
+
60
+ 1 枚分の中身は、手で組む前に `@squadbase/vantage/slide` の block(`SlideCover` `SlideExecSummary`
61
+ `SlideKpiHero` `SlideKpiGrid` `SlideChartInsight` `SlideScorecardTable` `SlideNextActions` `SlideSection` `SlideComparison` `SlideChartFull`)に
62
+ 合うものがないか探します。`<Slide>` の**中**に置き、props は `vantage docs <name>`(例:
63
+ `vantage docs slide-cover`)で引く。一覧は `agents/slide.md` が正本です。
64
+ - props は block 間で共通: `value: number | null` + `format`(上書きだけ `display`)、`delta: { value, format? }` + `betterWhen` + `comparisonLabel`、`target: number`、`source` は文字列、`asOf` は日付だけ(「時点」は block が付ける)。
65
+
66
+ - block は `@squadbase/vantage/slide` から import する。**新しい import 元は増えない**(下の
67
+ 「import してよいもの」と矛盾しない)。`vantage add` でコピーするものでもない。
68
+ - block が合わない**1 枚だけ**を、この下の規約で手書きする。デッキ全体を手書きに切り替えない。
69
+ - デッキ以外のファイルは作らない。block を使っても、デッキは 1 ファイルのままで、独自の
70
+ ヘルパーコンポーネントは同じ `.slide.tsx` に書く。
71
+
59
72
  ## import してよいもの
60
73
 
61
74
  - `@squadbase/vantage/slide` — `SlideDeck` `Slide` `Steps` `Step` `MorphElement` `useSlideNumber`
62
- `useIsActiveSlide` `SlideCanvas` と、その型
75
+ `useIsActiveSlide` `SlideCanvas`、1 枚分の block(`SlideCover` ほか上の 10 個)、手書きの 1 枚に使う部品(`SlideHeading` `SlideSourceLine` `SlideColumns` `SlideColumn` `DeltaText`)と、その型
63
76
  - `@squadbase/vantage` — `definePage`
64
77
  - `@squadbase/vantage/components` の `EChart` — **チャートを載せるときはこれ**(→「チャート」)
65
78
  - `lucide-react` のアイコン
@@ -77,21 +90,25 @@ export default function JuneDeck() {
77
90
  - 各スライドのルート要素はキャンバスを埋める(`width: "100%"; height: "100%"`)
78
91
  - インライン `style={{ … }}` を使う。読み込んだ CSS はグローバルです
79
92
 
80
- ### タイプスケール(ここから始めて調整する)
93
+ 以下の値がスライドの規約です。ヒーローと本文は `var(--slide-size-hero)` /
94
+ `var(--slide-size-body)` としても読めます(→ `references/tokens.md`)。
95
+
96
+ ### タイプスケール
81
97
 
82
98
  | 要素 | サイズ |
83
99
  | --- | --- |
84
- | ヒーロータイトル | 140–200px |
85
- | セクション見出し | 80–120px |
86
- | ページ見出し | 56–80px |
87
- | 本文 | 32–44px |
88
- | キャプション / ラベル | 22–28px |
100
+ | ヒーロータイトル | 168px |
101
+ | セクション見出し | 88px |
102
+ | ページ見出し | 64px |
103
+ | 本文 | 36px |
104
+ | キャプション / ラベル | 24px |
89
105
 
90
- ### 余白
106
+ ### 余白とグリッド
91
107
 
92
- - コンテンツの padding: キャンバス端から **100–160px**。文字を端に触れさせない
93
- - line-height: 見出し 1.2、本文 1.5–1.7
94
- - 要素間: 32–64px
108
+ - セーフエリア: キャンバス端から **左右 160px・上下 120px**。中身はこの内側の **1600 × 840px** に置き、文字を端に触れさせない
109
+ - グリッド: 内容幅 1600px を **12 列**(列幅 104px・溝 32px)に割る
110
+ - line-height: 見出し 1.2、本文 1.6
111
+ - 要素間: 32 / 48 / 64px のどれか
95
112
 
96
113
  ### 縦方向の予算 — 中身は 1080px に収まらなければならない
97
114
 
@@ -99,33 +116,32 @@ export default function JuneDeck() {
99
116
  計算して収まることを確かめること。**これがスライドが壊れる原因の第 1 位**で、確かめない限り
100
117
  溢れていると思ってください。
101
118
 
102
- **使える高さ** = `1080 − 上 padding − 下 padding`。上下 120px なら **840px**、160px なら **760px**。
103
- 先に padding を決めて、その予算の中で設計します。
119
+ **使える高さ** = `1080 − 上下のセーフエリア(120px × 2)` = **840px**。この予算の中で設計します。
104
120
 
105
121
  **要素の高さ** = `文字サイズ × line-height × 行数`。2 行に折り返す箇条書きは 2 行と数えます。
106
- 次の要素を足す前に、その下の gap(32–64px)を加算してください。
122
+ 次の要素を足す前に、その下の gap(32 / 48 / 64px)を加算してください。
107
123
 
108
- **計算例 — 本文 1 枚、padding 120px(予算 840px):**
124
+ **計算例 — 本文 1 枚(予算 840px):**
109
125
 
110
126
  | 要素 | 高さ |
111
127
  | --- | --- |
112
- | 見出し: 80px × 1.2 × 1 行 | 96px |
128
+ | ページ見出し: 64px × 1.2 × 1 行 | 76.8px |
113
129
  | gap | 64px |
114
- | 本文: 40px × 1.6 × 3 行 | 192px |
130
+ | 本文: 36px × 1.6 × 3 行 | 172.8px |
115
131
  | gap | 48px |
116
- | 箇条書き 5 行: 40px × 1.6 × 1 行 | 320px(5 × 64px) |
117
- | 箇条書き間の gap 4 つ: 24px | 96px |
118
- | **合計** | **816px ✅ 840 に収まる** |
132
+ | 箇条書き 5 行: 36px × 1.6 × 1 行 | 288px(5 × 57.6px) |
133
+ | 箇条書き間の gap 4 つ: 32px | 128px |
134
+ | **合計** | **777.6px ✅ 840 に収まる** |
119
135
 
120
- 見出しを 120px にするか箇条書きを 6 つにすると溢れます。**書く前に毎ページこの検算をすること。**
136
+ 箇条書きを 6 つにすると 867.2px で溢れます。**書く前に毎ページこの検算をすること。**
121
137
 
122
138
  **ページ単位の規則:**
123
139
 
124
140
  - 「見出し + 本文」か「見出し + 5 つ以内の短い箇条書き」のどちらか。両方は載せない
125
141
  - 箇条書きは選んだ文字サイズで 1 行に収まること。折り返すなら短くするか別ページに割る
126
- - ヒーロータイトル(140–200px)はタイトル + サブタイトル 1 行 + アイブロウまで。それ以外は載せない
127
- - セクション見出し(80–120px)のページにはほとんど何も足さない
128
- - 収めるために padding を上げる・スケールの下限より小さい文字にする・本文の line-height を 1.4 未満に
142
+ - ヒーロータイトル(168px)はタイトル + サブタイトル 1 行 + アイブロウまで。それ以外は載せない
143
+ - セクション見出し(88px)のページにはほとんど何も足さない
144
+ - 収めるためにセーフエリアを削る・タイプスケールより小さい文字にする・本文の line-height を 1.6 未満に
129
145
  詰める、をやりたくなったら**ページを 2 枚に割る**。予算が厳しいときは分割が常に正解
130
146
 
131
147
  **`overflow: auto/scroll`・負のマージン・transform で溢れを隠さないこと。** キャンバスは固定で、
@@ -139,7 +155,7 @@ export default function JuneDeck() {
139
155
  それ以外はプレーンな const にする(→ `references/tokens.md`)
140
156
  - **書体** — ディスプレイ 1 + 本文 1。指定がなければシステムスタック。見出しは太く(800–900)、
141
157
  本文は通常(400–500)
142
- - **レイアウトグリッド** — padding を 1 つ決めて(例: 120px)貫く。左揃えは編集的、中央揃えは儀礼的
158
+ - **レイアウトグリッド** — セーフエリアと 12 列グリッド(→「余白とグリッド」)を全ページで貫く。左揃えは編集的、中央揃えは儀礼的
143
159
  - **美学のコミットメント** — 1 つ選ぶ: ミニマル / マキシマル / エディトリアル / レトロ /
144
160
  ブルータリスト / ソフト・パステル / ネオン / 紙・印刷。混ぜない
145
161
 
@@ -152,12 +168,12 @@ export default function JuneDeck() {
152
168
  // ✅ 各カードが独自の JSX ノードを持つ
153
169
  const Card = ({ label, value }: { label: string; value: string }) => (
154
170
  <div style={{ flex: 1 }}>
155
- <div style={{ fontSize: 28, opacity: 0.6 }}>{label}</div>
156
- <div style={{ fontSize: 120, fontWeight: 800 }}>{value}</div>
171
+ <div style={{ fontSize: 24, opacity: 0.6 }}>{label}</div>
172
+ <div style={{ fontSize: 88, fontWeight: 800 }}>{value}</div>
157
173
  </div>
158
174
  )
159
175
 
160
- <div style={{ display: "flex", gap: 96 }}>
176
+ <div style={{ display: "flex", gap: 64 }}>
161
177
  <Card label="売上" value="¥5.2億" />
162
178
  <Card label="解約率" value="1.4%" />
163
179
  </div>
@@ -169,6 +185,8 @@ const Card = ({ label, value }: { label: string; value: string }) => (
169
185
 
170
186
  これは**視覚要素が繰り返すとき**の話で、データが繰り返すときの話ではありません。純粋な
171
187
  テキストの箇条書き(`<ul><li>`)は各 `<li>` が既に独立した JSX ノードなので、そのままで正しい。
188
+ `<SlideDeck>` の直下に `<Slide>` を配列で渡すこと自体はファイル形式として可能です(`agents/slide.md`)が、
189
+ 1 枚ごとの文言・図を変えるスライドは 1 枚ずつ書きます。
172
190
 
173
191
  ## ページ番号
174
192
 
@@ -250,8 +268,8 @@ pptx 書き出しのために描き終わりを待たせる必要があります
250
268
  - [ ] `export default` が `<SlideDeck>` を返している
251
269
  - [ ] `<Slide>` が `<SlideDeck>` の直下にある
252
270
  - [ ] 各スライドのルート要素が `100% × 100%` を埋めている
253
- - [ ] 文字が padding の内側にある(端に触れていない)
254
- - [ ] **全ページで(文字サイズ × line-height × 行数)+ gap + padding×2 ≤ 1080px。** 際どいなら分割
271
+ - [ ] 文字がセーフエリア(左右 160px・上下 120px)の内側にある
272
+ - [ ] **全ページで(文字サイズ × line-height × 行数)+ gap ≤ 840px。** 際どいなら分割
255
273
  - [ ] 箇条書きが 2 行目に折り返していない
256
274
  - [ ] 配色とタイプスケールが全ページで一貫している
257
275
  - [ ] 1 ページ 1 メッセージ
@@ -267,11 +285,11 @@ pptx 書き出しのために描き終わりを待たせる必要があります
267
285
  ## アンチパターン
268
286
 
269
287
  - ❌ 文字の壁。1 ページ 40 語を超えたら分割する
270
- - ❌ キャンバス全面を本文で使う。padding 100–160px を守る
288
+ - ❌ キャンバス全面を本文で使う。セーフエリア(左右 160px・上下 120px)を守る
271
289
  - ❌ 縦に 1080px を溢れさせる。切れた中身は見えない — 分割する
272
290
  - ❌ `overflow: auto` / `scroll` / `hidden` で溢れを「隠す」。バグを隠しただけ
273
- - ❌ 詰め込むためにスケールの下限より小さい文字にする・padding を 100px 未満にする
274
- - ❌ 本文 28px 未満。プロジェクタで読めない
291
+ - ❌ 詰め込むためにタイプスケールより小さい文字にする・セーフエリアを削る
292
+ - ❌ 本文を 36px 未満にする。プロジェクタで読めない
275
293
  - ❌ `@squadbase/vantage/ui` のプリミティブをスライドに置く(縮小されて読めなくなる)
276
294
  - ❌ 依存を追加する。使えるのは `@squadbase/vantage/*` と `lucide-react` と標準 Web API だけ
277
295
  - ❌ スライド用のコンポーネントを別ファイルに切り出す
@@ -47,6 +47,8 @@ UI キット・開発サーバー・API サーバー・ビルドはすべて Van
47
47
  - **`definePage` の値はリテラルで書く。** title/description/navLabel はビルド時に静的抽出される
48
48
  ため、変数・関数呼び出し・テンプレート補間は使わない。`page` エクスポートはランタイムでは
49
49
  読まれない。
50
+ - **アプリの表示言語は、ルート `_layout.tsx` の `export const lang = "ja"`(リテラル)で指定する。**
51
+ `<html lang>` になり、日本語の文節改行とスライドの文言切り替えに効く。未指定は `"en"`。
50
52
 
51
53
  ## ディレクトリ構造(ページをどこに置くか)
52
54
 
@@ -95,8 +97,8 @@ root/
95
97
  | `@squadbase/vantage/ui` | shadcn/ui(Base UI バリアント)プリミティブ(`Button`・`Loading`・`ErrorState`・`Empty` ほか) |
96
98
  | `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、KPI の `KpiCard`・`Delta`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`、書式の `formatValue`) |
97
99
  | `@squadbase/vantage/table` | `FilePageView`・`TableViewer`(データファイルページの表ビューア) |
98
- | `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`(スライド専用。1920×1080 の固定キャンバス) |
99
- | `@squadbase/vantage/doc` | `Document`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
100
+ | `@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 の固定キャンバス) |
101
+ | `@squadbase/vantage/doc` | `Document`、ドキュメント用の block `DocReportHeader`・`DocExecutiveSummary`・`DocKpiScorecard`・`DocFigure`・`DocDataTable`・`DocCallout`・`DocKeyFindings`・`DocActionItems`・`DocNotesAndSources`、部品 `DeltaText`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
100
102
  | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
101
103
  | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
102
104
 
@@ -509,3 +511,14 @@ function KpiRow({ items }: { items: Kpi[] }) { /* … */ } // 子の部品は
509
511
  - **値(定数・データ・列定義・小さな関数)は本体より上。** 小文字の関数・hook も値として上に置く。
510
512
  - 型は消えるのでどこでもよい。値のそばに置く。
511
513
  - 順序だけのために、既に並んでいるファイルを書き換えない。
514
+
515
+ ## アプリの表示言語(`lang`)
516
+
517
+ ルートの `src/_layout.tsx` の `export const lang = "en"` が `<html lang>` になる。**アプリの内容の言語に合わせて書き換える**
518
+ (ユーザーが日本語で依頼している・画面の文言が日本語なら `"ja"`)。
519
+
520
+ - `lang` は**リテラル文字列**(BCP 47。`"ja"` / `"en"` / `"ja-JP"`)。変数・テンプレート補間は読まれない。
521
+ - 読まれるのは**ルートの `src/_layout.tsx` だけ**。入れ子の `_layout.tsx` やページには書かない。
522
+ - 日本語アプリで `"en"` のままだと、スライドの文節改行(`word-break: auto-phrase`)が効かず、見出しが単語の途中で折れる。
523
+ スライドのツールバー文言も `lang` で切り替わる(`"ja"` なら日本語、`en*` なら英語)。
524
+ - 値は消さない。指定が無いと `"en"` 扱いになる。
@@ -15,6 +15,13 @@ import { definePage } from "@squadbase/vantage"
15
15
  import { BarChart } from "@squadbase/vantage/components"
16
16
  import { Document } from "@squadbase/vantage/doc"
17
17
 
18
+ const weekly = [
19
+ { week: "第1週", 売上: 1180 },
20
+ { week: "第2週", 売上: 1240 },
21
+ { week: "第3週", 売上: 1210 },
22
+ { week: "第4週", 売上: 1620 },
23
+ ]
24
+
18
25
  export const page = definePage({ title: "6月度サマリー", navLabel: "6月度サマリー" })
19
26
  export default function JuneSummary() {
20
27
  return (
@@ -50,6 +57,30 @@ export default function JuneSummary() {
50
57
  - **ページ全体を包むのは `<Document>` だけ。** `PageShell` などのダッシュボード用の枠で包まない
51
58
  (本文の幅と余白は `<Document>` が決めます)。
52
59
 
60
+ ## まず block を探す
61
+
62
+ 1 節分の中身は、手で組む前に `@squadbase/vantage/doc` の block から探します(`<Document>` の直下に
63
+ 並べる。多くは 1 block = 1 節。`DocCallout`・`DocFigure`・`DocDataTable` は節ではなく、節の中(本文の間)に置く部品)。props は `vantage docs <name>`(例: `vantage docs doc-kpi-scorecard`)で引く。
64
+
65
+ | block | 用途 |
66
+ | --- | --- |
67
+ | `DocReportHeader` | レポートの冒頭(タイトル・サブタイトル・対象期間・データ時点・作成者・出典) |
68
+ | `DocExecutiveSummary` | 結論を先に述べる要約の節 |
69
+ | `DocKpiScorecard` | 主要指標をまとめたスコアカード |
70
+ | `DocFigure` | 図表 1 つとキャプション(チャートは children で渡す) |
71
+ | `DocDataTable` | 素の `table` による表 |
72
+ | `DocCallout` | 補足・示唆・注意・決定の囲み(`kind`: `note` / `insight` / `warning` / `decision`) |
73
+ | `DocKeyFindings` | 主要な発見の箇条 |
74
+ | `DocActionItems` | 次のアクション(担当・期限つき) |
75
+ | `DocNotesAndSources` | 末尾の注記・用語の定義・データソースをまとめた節 |
76
+
77
+ **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`)。
78
+
79
+ 本文の中で増減を書くときは `DeltaText`(部品。「▲ +3.2%」の形で、文字サイズは持たず置かれた行に従う。`value` `format` `betterWhen` `comparisonLabel`)を使う。節ではなく文の中に置く。
80
+
81
+ block が合わない**1 節だけ**を素の HTML 要素で手で書く。import 元は `@squadbase/vantage/doc` のままで、
82
+ block のための新しい import 元はありません。本文は文字列か ReactNode で渡し、Markdown 文字列は渡さない。
83
+
53
84
  ## 見た目を変える
54
85
 
55
86
  配色・書体・本文の幅は `--doc-*` の CSS 変数です。既定値はアプリのトークンへの別名なので、
@@ -74,3 +105,20 @@ export default function JuneSummary() {
74
105
  `.doc` を付けられるのはルートになるページモジュールだけで、`_layout.doc.tsx` などは
75
106
  `INVALID_PAGE_VARIANT` エラーになります。`june.doc.tsx` と `june.tsx` は同じ URL に解決するので
76
107
  `ROUTE_CONFLICT` です。
108
+
109
+ ## ファイル形式の規約
110
+
111
+ 置き場所・URL・default export・`definePage` の書き方は全ページ共通(`agents/page.md` の
112
+ 「ページファイルの規約」)。ここではドキュメント固有のものだけを挙げます。
113
+
114
+ **MUST**
115
+
116
+ - ファイル名は `<name>.doc.tsx`(`.jsx` も可)。サフィックスは小文字で 1 つだけ。`.doc.mdx` は
117
+ `INVALID_PAGE_VARIANT`、`.DOC.tsx`・二重サフィックスは黙って通常ページになる
118
+ - default export は `<Document>` をルートに返す。フレームワークは包まない
119
+ - ドキュメントの部品は `@squadbase/vantage/doc` から import する
120
+
121
+ **SHOULD**
122
+
123
+ - `PageShell` で包まない・PDF の保存ボタンを自作しない(上の「書き方」)
124
+ - 数値はコードに直接書き、いつ時点の値かを本文に書く
@@ -71,6 +71,7 @@ URL になる。各ページは**デフォルトエクスポートの React コ
71
71
  | `_404.tsx` | Not Found ページ |
72
72
  | `_error.tsx` | ルートが throw したときのエラーページ |
73
73
  | `monthly-report.slide.tsx` | `/monthly-report`(スライドデッキ。詳しくは `agents/slide.md`) |
74
+ | `june-summary.doc.tsx` | `/june-summary`(ドキュメント。詳しくは `agents/doc.md`) |
74
75
  | `sales-export.csv` | `/sales-export`(詳しくは `agents/csv.md`) |
75
76
  | `data/june.xlsx` | `/data/june`(詳しくは `agents/xlsx.md`) |
76
77
 
@@ -89,6 +90,26 @@ export default function MonthlyAnalysis() {
89
90
  }
90
91
  ```
91
92
 
93
+ ### ページファイルの規約(`.tsx` / `.slide.tsx` / `.doc.tsx` 共通)
94
+
95
+ **MUST**
96
+
97
+ - ページルートの配下に置く。`components/` などの走査対象外のディレクトリに置いたファイルはページに
98
+ ならず、エラーも出ない。`_` 始まりの名前は予約名(`_layout` / `_404` / `_error`)にだけ使う
99
+ (それ以外の `_` 始まりはページにならない。予約名にサフィックスを付けると `INVALID_PAGE_VARIANT`)
100
+ - URL はサフィックスと拡張子を除いたパスで決まる。同じ URL になる別ファイル(`june.tsx` /
101
+ `june.slide.tsx` / `june.doc.tsx` / `june.csv`)を並べない(`ROUTE_CONFLICT`)。テンプレートの
102
+ 未編集の `index.tsx` だけは例外で、`index.slide.tsx` / `index.doc.tsx` が `/` を取れる
103
+ - default export は React の関数コンポーネント(無いと `MISSING_DEFAULT_EXPORT`。関数かどうかは
104
+ 検査されない)
105
+ - `definePage({ ... })` にはオブジェクトリテラルを直接渡し、`title` / `description` / `navLabel` は
106
+ 文字列リテラルで書く。ビルド時に静的抽出されるので、変数・関数呼び出し・spread・shorthand・
107
+ `${}` を含むテンプレート文字列は**エラーにならず黙ってメタなし**になる
108
+
109
+ **SHOULD**
110
+
111
+ - `definePage` に `title` と `navLabel` を書く(ナビの表示名とブラウザのタブ名になる)
112
+
92
113
  ### ナビはルート一覧から組む
93
114
 
94
115
  `useRoutes()` がページルート一覧(スキャン順)を返すので、リンク配列を手で持たない。
@@ -109,7 +130,7 @@ routes.map((r) => (
109
130
  ```
110
131
 
111
132
  `RouteInfo`: `path`(`/sales/:id`)・`to`(`/sales/$id`)・`params`・`dynamic`・`index`・`label`・
112
- `title`・`description`・`navLabel`・`kind`(`"module"` | `"file"`)・`variant`(`"slide"`)。
133
+ `title`・`description`・`navLabel`・`kind`(`"module"` | `"file"`)・`variant`(`"slide"` | `"doc"`)。
113
134
  後ろの 2 つで、ナビをダッシュボード / スライド / データに分けたりアイコンを変えたりできます。
114
135
 
115
136
  ### フィルタ状態は URL に置く
@@ -19,6 +19,7 @@
19
19
  - 新規プロジェクトでまだ `/` が空いている場合のみ、`index.slide.tsx` を使ってよい。
20
20
 
21
21
  ```tsx
22
+ import { definePage } from "@squadbase/vantage"
22
23
  import { Slide, SlideDeck } from "@squadbase/vantage/slide"
23
24
 
24
25
  export const page = definePage({ title: "6月度レビュー", navLabel: "6月度" })
@@ -34,8 +35,10 @@ export default function Deck() {
34
35
 
35
36
  **`<Slide>` は `<SlideDeck>` の直接の子に書く。** `SlideDeck` は直下の `<Slide>` 要素だけを数えるので、
36
37
  `<Slide>` を自作コンポーネント(`<Slide1 />` など)や Fragment で包むと 1 枚も数えられず「1 / 0」に
37
- なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列は可)。共通の部品は
38
- `<Slide>` の**中**に置くコンポーネントとして切り出します(`<Slide><CoverPage /></Slide>`)。
38
+ なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列はファイル形式としては可。
39
+ 1 枚の中で視覚要素を `map` で量産しない方針は `vantage-slide` skill の「繰り返す要素は `map` ではなく
40
+ コンポーネント」)。共通の部品は `<Slide>` の**中**に置くコンポーネントとして切り出します
41
+ (`<Slide><CoverPage /></Slide>`)。
39
42
 
40
43
  1920×1080 の固定キャンバスに絶対 px で書き、画面サイズに合わせて縮小されます。キー / クリックで
41
44
  送れ、左のスライド一覧(サムネイル列)は `L` で開閉、`F` で全画面、ツールバーから pptx を
@@ -51,3 +54,68 @@ pptx が壊れる条件、説明と図表のデータ時点の揃え方)。
51
54
  `.slide` を付けられるのはルートになるページモジュールだけで、`_layout.slide.tsx` などは
52
55
  `INVALID_PAGE_VARIANT` エラーになります。`june.slide.tsx` と `june.tsx` は同じ URL に解決するので
53
56
  `ROUTE_CONFLICT` です。
57
+
58
+ ## まず block を探す
59
+
60
+ 1 枚分の中身は、手で組む前に `@squadbase/vantage/slide` の block から探します(`<Slide>` の**中**に
61
+ 置く。ルートは 100% で、`<Slide>` 自体は持たない)。props は `vantage docs <name>`(例:
62
+ `vantage docs slide-kpi-hero`)で引く。
63
+
64
+ | block | 用途 |
65
+ | --- | --- |
66
+ | `SlideCover` | 表紙(タイトル・サブタイトル・期間) |
67
+ | `SlideExecSummary` | 結論を先に述べるエグゼクティブサマリー |
68
+ | `SlideKpiHero` | 主要な KPI 1 つを大きく見せる |
69
+ | `SlideKpiGrid` | 複数の KPI を並べる |
70
+ | `SlideChartInsight` | チャート 1 つと、そこから読み取れること |
71
+ | `SlideScorecardTable` | 指標と目標・達成度を表にしたスコアカード |
72
+ | `SlideNextActions` | 次のアクション(担当・期限つき) |
73
+ | `SlideSection` | 章の扉(`items` を渡すと番号付きのアジェンダ。`current` の章を強調) |
74
+ | `SlideComparison` | A vs B・前後の 2〜3 列比較(各列に見出し・主要数値・箇条) |
75
+ | `SlideChartFull` | チャートを全幅に置き、注記を 1 行添える |
76
+
77
+ **手書きの 1 枚には部品を使う。** block が合わない 1 枚でも、見出し・出典行・列割りは自前で組まず、
78
+ 次の部品を使う(どれも `@squadbase/vantage/slide`。1 枚にはならないので `<Slide>` の中に並べる)。
79
+
80
+ | 部品 | 用途 |
81
+ | --- | --- |
82
+ | `SlideHeading` | 見出し(`title`、任意で `eyebrow`)。1 枚の先頭に置く |
83
+ | `SlideSourceLine` | 足元の出典・時点(`source` `asOf`)。`page={{ current, total }}` を渡すとページ番号も出す |
84
+ | `SlideColumns` / `SlideColumn` | 12 列の割り付け(`<SlideColumn span={8}>` と `span={4}` など)。`align` は `start` / `center` / `stretch` |
85
+ | `DeltaText` | 増減の文字(「▲ +3.2%」)。`value` `format` `betterWhen` `comparisonLabel` |
86
+
87
+ `SlideSection` は `Steps` を持たない。順に見せたいときは呼び出し側で `<Steps>` で包む。
88
+
89
+ ```tsx
90
+ import { Slide, SlideDeck, SlideCover, SlideExecSummary } from "@squadbase/vantage/slide"
91
+ // <SlideDeck><Slide><SlideCover … /></Slide><Slide><SlideExecSummary … /></Slide></SlideDeck>
92
+ ```
93
+
94
+ **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 の `trend`。scorecard に `trend` は無い)、複数系列なら `{ categories, series }`(chart-insight の `chart`)。
95
+
96
+ block が合わない**1 枚だけ**を手で書く(デッキ全体を手書きに切り替えない)。import 元は
97
+ `@squadbase/vantage/slide` のままで、block のための新しい import 元はありません。
98
+
99
+ ## ファイル形式の規約
100
+
101
+ 置き場所・URL・default export・`definePage` の書き方は全ページ共通(`agents/page.md` の
102
+ 「ページファイルの規約」)。ここではスライド固有のものだけを挙げます。**中身の値(キャンバス・
103
+ セーフエリア・グリッド・文字サイズ・余白)は `vantage-slide` skill を参照。**
104
+
105
+ **MUST**(破ると黙って壊れるものが多い。`vantage check` が拾うのは名前の誤りだけ)
106
+
107
+ - ファイル名は `<name>.slide.tsx`(`.jsx` も可)。サフィックスは小文字で 1 つだけ。`.slide.ts` は
108
+ `INVALID_PAGE_VARIANT`、`.SLIDE.tsx`・二重サフィックス・`.slide.test.tsx` は黙って通常ページになる
109
+ - default export は `<SlideDeck>` をルートに返す。フレームワークは包まない
110
+ - `<Slide>` は `<SlideDeck>` の直接の子(配列は可。Fragment・自作コンポーネントで包まない)
111
+ - `<Step>` は `<Steps>` の直接の子(包むと常に表示される)
112
+ - スライドの部品は `@squadbase/vantage/slide` から import する
113
+
114
+ **SHOULD**
115
+
116
+ - 1 ファイル = 1 デッキ。ヘルパーコンポーネント・定数も同じ `.slide.tsx` に書く
117
+ - 各 `<Slide>` のルート要素は `width: "100%"; height: "100%"` でキャンバスを埋める
118
+ - canvas に描くチャート(`EChart`)は `data-waitfor="canvas"` で包む(無いと pptx でそのスライドが白紙になりうる)
119
+ - pptx に出る中身をアプリの Context(router / query / テーマ)に依存させない
120
+ - `MorphElement` の `id` はページ内で一意にし、入れ子にしない。遷移先の `<Slide>` で `transition.morph` を有効にする
121
+ - pptx 用などの依存を追加しない(html-to-image / fflate は自動で入る)
@@ -6,8 +6,8 @@
6
6
  "name": "vibe-app",
7
7
  "dependencies": {
8
8
  "@squadbase/react": "^0.1.0",
9
- "@squadbase/vantage": "0.6.2-dev1.83509f7",
10
- "@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
9
+ "@squadbase/vantage": "0.6.2-dev1.e30f2cc",
10
+ "@squadbase/vantage-sdk": "0.1.1-dev1.c070adc",
11
11
  "date-fns": "^4.1.0",
12
12
  "lucide-react": "^0.468.0",
13
13
  "react": "^19.3.1",
@@ -196,9 +196,9 @@
196
196
 
197
197
  "@squadbase/react": ["@squadbase/react@0.1.0", "", { "dependencies": { "zod": "^4.3.6" }, "peerDependencies": { "@types/react": "17.x || 18.x || 19.x", "react": "17.x || 18.x || 19.x" }, "optionalPeers": ["@types/react"] }, "sha512-k+Dpyj7eH+Yjydw54iEluCjYDae086d12hWgBjNMpw4wLbQGz3CrJ6Yipodg8n1cKUt7zvwddlcTHd79bgKsXg=="],
198
198
 
199
- "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.83509f7", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-4G4SzglHShNzX2qrz9YK3EpCpXfO+9lQHoAOiV3e6EfVwMp15MEeITQ1NIJz7Cmn0u7qWNDgEh8MDkyJH9/ZCA=="],
199
+ "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.e30f2cc", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-jGeHcs5zv+C/7N6WS/kywELHey+TOoVQvAln8P8qmkXzF7lM5ZhY2rogSAzOS10h5BXqz5YaZ6bHesoRZOv3BA=="],
200
200
 
201
- "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.3bf8f69", "", {}, "sha512-uCvBiPZH6d/mnZjS1u6g/XN0yuZS7K+/p5pqYK3qXAiHK3tM8jCMKFfHFrmc+G8wSpM7glNW/cawdlsGOCaNBQ=="],
201
+ "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.c070adc", "", {}, "sha512-tB1/cQfBa9YJrU0J/+WGcX9pttVV8dbHIg8TSImQaZ0F2mnkpeeHQ1jVi3YUwc/84fEcoyGLbJbtJHZAvjuY4Q=="],
202
202
 
203
203
  "@streamdown/code": ["@streamdown/code@1.1.1", "", { "dependencies": { "shiki": "^3.19.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-i7HTNuDgZWb+VdrNVOam9gQhIc5MSSDXKWXgbUrn/4vSRaSMM+Rtl10MQj4wLWPNpF7p80waJsAqFP8HZfb0Jg=="],
204
204
 
@@ -12,8 +12,8 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "@squadbase/react": "^0.1.0",
15
- "@squadbase/vantage": "0.6.2-dev1.83509f7",
16
- "@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
15
+ "@squadbase/vantage": "0.6.2-dev1.e30f2cc",
16
+ "@squadbase/vantage-sdk": "0.1.1-dev1.c070adc",
17
17
  "date-fns": "^4.1.0",
18
18
  "lucide-react": "^0.468.0",
19
19
  "react": "^19.3.1",
@@ -7,6 +7,13 @@ import type { NavGroup } from "@squadbase/vantage/components"
7
7
  import { BuildRecovery } from "./components/build-recovery"
8
8
  import { UserCard } from "./components/user-card"
9
9
 
10
+ /**
11
+ * The app's display language, written to `<html lang>` (a BCP 47 literal, e.g.
12
+ * "ja"). Set it to the language of the app's content: it also switches the slide
13
+ * toolbar messages and enables Japanese phrase-aware line breaking in slides.
14
+ */
15
+ export const lang = "en"
16
+
10
17
  /**
11
18
  * The nav *is* the route list — adding a page file puts it in the nav, with no
12
19
  * second list to keep in sync. Dynamic routes (`sales/[id].tsx`) have no single
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@squadbase/vantage-template",
3
- "version": "0.1.1-dev1.6b30e42",
3
+ "version": "0.1.1-dev1.742a163",
4
4
  "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
5
5
  "keywords": [
6
6
  "squadbase",
@@ -50,7 +50,7 @@
50
50
  "@ai-sdk/openai": "2.0.122",
51
51
  "ai": "^5.0.52"
52
52
  },
53
- "gitHead": "6b30e4280409c0b93806484224f6e37c39cb27f4",
53
+ "gitHead": "742a1637c3cf1a1d3a541163d58ce6184b9b1073",
54
54
  "scripts": {
55
55
  "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
56
56
  "build": "pnpm run sync-base && tsup",