@squadbase/vantage-template 0.1.1-dev1.93459df → 0.1.1-dev1.934feaa
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.
- package/README.md +11 -1
- package/base-template/.squadbase/skills/vantage-design/SKILL.md +34 -24
- package/base-template/.squadbase/skills/vantage-design/references/extract.md +16 -14
- package/base-template/.squadbase/skills/vantage-design/references/format.md +6 -5
- package/base-template/.squadbase/skills/vantage-design/references/presets.md +60 -110
- package/base-template/.squadbase/skills/vantage-slide/SKILL.md +54 -36
- package/base-template/AGENTS.md +19 -4
- package/base-template/DESIGN.md +7 -6
- package/base-template/agents/doc.md +48 -0
- package/base-template/agents/page.md +32 -1
- package/base-template/agents/slide.md +70 -2
- package/base-template/bun.lock +6 -6
- package/base-template/bunfig.toml +5 -0
- package/base-template/package.json +2 -2
- package/base-template/src/styles.css +105 -18
- package/dist/index.js +956 -0
- package/package.json +20 -17
package/base-template/AGENTS.md
CHANGED
|
@@ -93,13 +93,25 @@ root/
|
|
|
93
93
|
| `@squadbase/vantage/router` | `Link`・`Outlet`・`useParams`・`useSearch`・`useNavigate`・`redirect`・`notFound`・`useRoutes`・`useCurrentRoute`・`useSearchParam`・`useSearchState` |
|
|
94
94
|
| `@squadbase/vantage/query` | `useApiQuery`・`useApiMutation`・`apiJson`・`apiFetch`・`apiUrl`・`ApiError`、ほか `useQuery`/`useMutation` など TanStack Query の再エクスポート |
|
|
95
95
|
| `@squadbase/vantage/ui` | shadcn/ui(Base UI バリアント)プリミティブ(`Button`・`Loading`・`ErrorState`・`Empty` ほか) |
|
|
96
|
-
| `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`) |
|
|
96
|
+
| `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、KPI の `KpiCard`・`Delta`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`、書式の `formatValue`) |
|
|
97
97
|
| `@squadbase/vantage/table` | `FilePageView`・`TableViewer`(データファイルページの表ビューア) |
|
|
98
|
-
| `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`(スライド専用。1920×1080 の固定キャンバス) |
|
|
99
|
-
| `@squadbase/vantage/doc` | `Document`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
|
|
98
|
+
| `@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 の固定キャンバス) |
|
|
99
|
+
| `@squadbase/vantage/doc` | `Document`、ドキュメント用の block `DocReportHeader`・`DocExecutiveSummary`・`DocKpiScorecard`・`DocFigure`・`DocDataTable`・`DocCallout`・`DocKeyFindings`・`DocActionItems`・`DocNotesAndSources`、部品 `DeltaText`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
|
|
100
100
|
| `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
|
|
101
101
|
| `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
|
|
102
102
|
|
|
103
|
+
**KPI は `KpiCard`、増減は `Delta`(`comparison` と `polarity` を渡す)。** 向き・率・色は値から計算
|
|
104
|
+
されるので手で渡さない。`TrendIndicator` は非推奨(`direction` を手で渡すので値と食い違いうる)。props は
|
|
105
|
+
`vantage docs kpi-card` / `vantage docs delta` を引く。
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import { KpiCard, Delta } from "@squadbase/vantage/components";
|
|
109
|
+
|
|
110
|
+
<KpiCard label="売上" value={48_200_000} format="currency"
|
|
111
|
+
comparison={{ previous: 42_900_000, vs: "prior-period" }} />
|
|
112
|
+
<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
|
|
113
|
+
```
|
|
114
|
+
|
|
103
115
|
## モードは 2 つ、切り替えるのは `server/` の有無だけ
|
|
104
116
|
|
|
105
117
|
`server/` ディレクトリがあれば **fullstack**、無ければ **SPA**。`vantage-manifest.json` の
|
|
@@ -233,7 +245,7 @@ vantage add skill --all --dir .claude/skills # 置き場所を指定(既定は
|
|
|
233
245
|
> `vantage upgrade` はこのファイルをフレームワーク同梱の正本で丸ごと上書きするため、
|
|
234
246
|
> このセクションは消えます。消えたら squadbase-monorepo の
|
|
235
247
|
> `packages/vantage-template/agents/vantage/` から貼り直してください
|
|
236
|
-
> (リポジトリ側では `
|
|
248
|
+
> (リポジトリ側では `pnpm run agents` が正本と結合して再生成します)。
|
|
237
249
|
|
|
238
250
|
## Squadbase の Connection / Query からデータを読む
|
|
239
251
|
|
|
@@ -390,6 +402,9 @@ lockfile は `bun.lock`)。Squadbase のサンドボックスは bun と依存
|
|
|
390
402
|
`bun install` を一度走らせて `bun.lock` を追従させ、両方を同じコミットに入れる。
|
|
391
403
|
- スクリプトは `bun run <script>`(`bun run dev` / `bun run build` / `bun run check` /
|
|
392
404
|
`bun run routes`)。`npm run <script>` でも動くが、install に npm を使わないこと。
|
|
405
|
+
- **公開から 48 時間未満の版は入らない。** `bunfig.toml` の `minimumReleaseAge`(サプライチェーン対策)で
|
|
406
|
+
弾かれる。`bun add` / `bun install` が「バージョンが見つからない」で落ちたら、直近の版を避けて
|
|
407
|
+
少し前の版を指定する。`bunfig.toml` の設定を緩めたり `@squadbase/*` 以外の除外を足したりしない。
|
|
393
408
|
|
|
394
409
|
## このアプリで作れるもの
|
|
395
410
|
|
package/base-template/DESIGN.md
CHANGED
|
@@ -26,7 +26,7 @@ DESIGN.md — このアプリの「見た目の意図」を書くファイルで
|
|
|
26
26
|
|
|
27
27
|
| 役割 | トークン | 使う場所 |
|
|
28
28
|
| --- | --- | --- |
|
|
29
|
-
| 主色 (Primary) | `--primary` / `--primary-foreground` |
|
|
29
|
+
| 主色 (Primary) | `--primary` / `--primary-foreground` | 主要ボタン、選択中の状態。既定(テーマ `neutral`)は青 |
|
|
30
30
|
| 強調 (Accent) | `--chart-1` | 1 つだけ目立たせたい数値・系列・リンク的な強調 |
|
|
31
31
|
| 良い (Positive) | `--chart-2` | 前期比のプラスなど、良い変化の小さな印 |
|
|
32
32
|
| 悪い (Negative) | `--destructive` | 前期比のマイナス、エラー、削除操作 |
|
|
@@ -43,20 +43,21 @@ DESIGN.md — このアプリの「見た目の意図」を書くファイルで
|
|
|
43
43
|
## チャート (Charts)
|
|
44
44
|
|
|
45
45
|
- 系列の順番は `--chart-1` → `--chart-2` → `--chart-3` → `--chart-4` → `--chart-5`
|
|
46
|
-
(
|
|
47
|
-
- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5`
|
|
46
|
+
(現在はテーマ `neutral`: 青 → 黄緑 → 赤紫 → ティール → 紫)。
|
|
47
|
+
- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5` にする。
|
|
48
48
|
- 良い / 悪いを色で塗り分けるときは `--chart-2` / `--destructive`。色だけに頼らず ▲▼ や符号も添える。
|
|
49
49
|
- 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
|
|
50
50
|
- 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
|
|
51
51
|
- 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
|
|
52
|
-
- 配色を丸ごと変えるときは `npx @squadbase/vantage-template
|
|
53
|
-
(`
|
|
52
|
+
- 配色を丸ごと変えるときは `npx @squadbase/vantage-template theme <id>` を使う
|
|
53
|
+
(`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
|
|
54
|
+
`chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
|
|
54
55
|
|
|
55
56
|
## 書体 (Typography)
|
|
56
57
|
|
|
57
58
|
| 用途 | 指定 | 備考 |
|
|
58
59
|
| --- | --- | --- |
|
|
59
|
-
| 見出し・本文 | 日本語を含むシステムフォント(
|
|
60
|
+
| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | Web フォントは使わない |
|
|
60
61
|
| 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
|
|
61
62
|
| スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
|
|
62
63
|
| スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |
|
|
@@ -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 に置く
|
|
@@ -177,6 +198,16 @@ refetchOnWindowFocus false・networkMode "always")。挙動を変えたいとき
|
|
|
177
198
|
`/components` の複合パーツも全部取り出せる(名前は kebab-case: `add ui bar-chart`。
|
|
178
199
|
ブロックは `add block sales-overview`。未知名で実行すると候補が一覧表示される)。
|
|
179
200
|
|
|
201
|
+
### 長い表はページングする(縦スクロール箱を作らない)
|
|
202
|
+
|
|
203
|
+
- 行が多い表は `DataTablePreset`(または `DataTable`)に `enablePagination` を付けて**ページング**する
|
|
204
|
+
(既定は 10 行 / ページ。ページングは既定で無効なので、付け忘れると全行が並ぶ)。素の `<table>` を
|
|
205
|
+
手書きして全行を流し込まない。
|
|
206
|
+
- カードの中に `max-h-*` + `overflow-y-auto` の**縦スクロール領域を作らない**。ホイールやキー
|
|
207
|
+
(End / Space)がその箱に吸われ、ページ全体がスクロールしなくなる。高さは内容に任せる。
|
|
208
|
+
- 横に広い表の `overflow-x-auto` は構わない。`SheetGrid`(`.csv` / `.xlsx` のビューア)は
|
|
209
|
+
グリッドとして意図した入れ子スクロールなので対象外。
|
|
210
|
+
|
|
180
211
|
### グラフはまず型付きチャートで描く
|
|
181
212
|
|
|
182
213
|
- 推移は `LineChart` / `AreaChart`、比較は `BarChart`、構成比は `DonutChart`。`data`(行の配列)・
|
|
@@ -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
|
-
|
|
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 は自動で入る)
|
package/base-template/bun.lock
CHANGED
|
@@ -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.
|
|
10
|
-
"@squadbase/vantage-sdk": "0.1.1-dev1.
|
|
9
|
+
"@squadbase/vantage": "0.6.2-dev1.e85faec",
|
|
10
|
+
"@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
|
|
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.
|
|
199
|
+
"@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.e85faec", "", { "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-9uHOl7DXwJMx+kw71QEsVEGjpT3ZbP8lhnoLdEBWBGe/h24qZ80CCmgXijQEVKwzLeMozuptBKnjjTGH0Avpqw=="],
|
|
200
200
|
|
|
201
|
-
"@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.
|
|
201
|
+
"@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.3bf8f69", "", {}, "sha512-uCvBiPZH6d/mnZjS1u6g/XN0yuZS7K+/p5pqYK3qXAiHK3tM8jCMKFfHFrmc+G8wSpM7glNW/cawdlsGOCaNBQ=="],
|
|
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
|
|
|
@@ -716,7 +716,7 @@
|
|
|
716
716
|
|
|
717
717
|
"react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
|
|
718
718
|
|
|
719
|
-
"read-excel-file": ["read-excel-file@9.3.
|
|
719
|
+
"read-excel-file": ["read-excel-file@9.3.12", "", { "dependencies": { "fflate": "^0.8.3", "saxen": "^11.1.0", "unzipper-esm": "^0.13.3", "worker-f": "^0.1.12" } }, "sha512-benNAoQbe5HqoTi3qrQkR8wMeHq0gVWLt2Br73hVvmBPGdzMf9OLGsps/812AfZ+bvzVYsUyhF77Y3o4B51yCA=="],
|
|
720
720
|
|
|
721
721
|
"regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
|
|
722
722
|
|
|
@@ -752,7 +752,7 @@
|
|
|
752
752
|
|
|
753
753
|
"safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
|
|
754
754
|
|
|
755
|
-
"saxen": ["saxen@11.
|
|
755
|
+
"saxen": ["saxen@11.2.0", "", {}, "sha512-2bG564AAJcm/3vyZC0Uhs/mACrH+4AHMaKHKAB2M5xMqomUZa27FQ7MYaQGFKVcJk/MVzSEQ34A8QZWW+eiWEw=="],
|
|
756
756
|
|
|
757
757
|
"scheduler": ["scheduler@0.28.0", "", {}, "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw=="],
|
|
758
758
|
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@squadbase/react": "^0.1.0",
|
|
15
|
-
"@squadbase/vantage": "0.6.2-dev1.
|
|
16
|
-
"@squadbase/vantage-sdk": "0.1.1-dev1.
|
|
15
|
+
"@squadbase/vantage": "0.6.2-dev1.e85faec",
|
|
16
|
+
"@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
|
|
17
17
|
"date-fns": "^4.1.0",
|
|
18
18
|
"lucide-react": "^0.468.0",
|
|
19
19
|
"react": "^19.3.1",
|
|
@@ -17,30 +17,117 @@
|
|
|
17
17
|
/* --radius: 0.625rem; */
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
/* Page typeface.
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
/* Page typeface. `--font-sans` (Vantage theme.css, overridable by the theme range
|
|
21
|
+
below or here) already lists Latin system faces and then Japanese ones, so kana
|
|
22
|
+
and kanji do not fall back to a thin locale default. Change the typeface by
|
|
23
|
+
overriding `--font-sans`; keep the Japanese families if you put a webfont in
|
|
24
|
+
front. */
|
|
23
25
|
body {
|
|
24
|
-
font-family:
|
|
25
|
-
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans",
|
|
26
|
-
"Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
|
|
26
|
+
font-family: var(--font-sans);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
/*
|
|
29
|
+
/* squadkit-theme — regenerated by `theme`; edits here are lost */
|
|
30
|
+
/* theme: neutral */
|
|
30
31
|
:root {
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
32
|
+
--radius: 0.5rem;
|
|
33
|
+
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
|
|
34
|
+
--background: oklch(0.975 0.004 255);
|
|
35
|
+
--card: oklch(1 0 0);
|
|
36
|
+
--popover: oklch(1 0 0);
|
|
37
|
+
--secondary: oklch(0.965 0.005 255);
|
|
38
|
+
--muted: oklch(0.965 0.005 255);
|
|
39
|
+
--accent: oklch(0.955 0.01 255);
|
|
40
|
+
--sidebar: oklch(0.985 0.003 255);
|
|
41
|
+
--sidebar-accent: oklch(0.955 0.01 255);
|
|
42
|
+
--border: oklch(0.93 0.006 255);
|
|
43
|
+
--input: oklch(0.9 0.01 255);
|
|
44
|
+
--sidebar-border: oklch(0.915 0.008 255);
|
|
45
|
+
--foreground: oklch(0.21 0.02 260);
|
|
46
|
+
--card-foreground: oklch(0.21 0.02 260);
|
|
47
|
+
--popover-foreground: oklch(0.21 0.02 260);
|
|
48
|
+
--secondary-foreground: oklch(0.25 0.02 260);
|
|
49
|
+
--muted-foreground: oklch(0.5 0.02 258);
|
|
50
|
+
--accent-foreground: oklch(0.25 0.02 260);
|
|
51
|
+
--sidebar-foreground: oklch(0.21 0.02 260);
|
|
52
|
+
--sidebar-accent-foreground: oklch(0.25 0.02 260);
|
|
53
|
+
--primary: oklch(0.55 0.2 262);
|
|
54
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
55
|
+
--ring: oklch(0.7 0.12 262);
|
|
56
|
+
--sidebar-primary: oklch(0.55 0.2 262);
|
|
57
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
58
|
+
--sidebar-ring: oklch(0.7 0.12 262);
|
|
59
|
+
--chart-1: oklch(0.55 0.2 262);
|
|
60
|
+
--chart-2: oklch(0.62 0.17 118);
|
|
61
|
+
--chart-3: oklch(0.5 0.19 352);
|
|
62
|
+
--chart-4: oklch(0.62 0.1 195);
|
|
63
|
+
--chart-5: oklch(0.44 0.18 300);
|
|
64
|
+
--positive: oklch(0.52 0.14 150);
|
|
65
|
+
--positive-subtle: oklch(0.96 0.04 150);
|
|
66
|
+
--positive-fill: oklch(0.62 0.15 150);
|
|
67
|
+
--negative: oklch(0.53 0.19 25);
|
|
68
|
+
--negative-subtle: oklch(0.96 0.03 25);
|
|
69
|
+
--negative-fill: oklch(0.62 0.17 25);
|
|
70
|
+
--warning: oklch(0.53 0.12 70);
|
|
71
|
+
--warning-subtle: oklch(0.96 0.05 85);
|
|
72
|
+
--warning-fill: oklch(0.79 0.16 82);
|
|
73
|
+
--info: oklch(0.52 0.16 255);
|
|
74
|
+
--info-subtle: oklch(0.96 0.03 250);
|
|
75
|
+
--info-fill: oklch(0.62 0.15 250);
|
|
76
|
+
--neutral: oklch(0.52 0 0);
|
|
77
|
+
--neutral-subtle: oklch(0.96 0 0);
|
|
78
|
+
--neutral-fill: oklch(0.62 0 0);
|
|
79
|
+
--destructive: oklch(0.53 0.21 27.325);
|
|
80
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
36
81
|
}
|
|
37
82
|
|
|
38
83
|
.dark,
|
|
39
84
|
[data-theme="dark"] {
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
85
|
+
--background: oklch(0.16 0.012 262);
|
|
86
|
+
--card: oklch(0.215 0.015 262);
|
|
87
|
+
--popover: oklch(0.235 0.016 262);
|
|
88
|
+
--secondary: oklch(0.27 0.016 262);
|
|
89
|
+
--muted: oklch(0.27 0.016 262);
|
|
90
|
+
--accent: oklch(0.3 0.02 262);
|
|
91
|
+
--sidebar: oklch(0.2 0.014 262);
|
|
92
|
+
--sidebar-accent: oklch(0.3 0.02 262);
|
|
93
|
+
--border: oklch(1 0 0 / 10%);
|
|
94
|
+
--input: oklch(1 0 0 / 15%);
|
|
95
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
96
|
+
--foreground: oklch(0.96 0.005 255);
|
|
97
|
+
--card-foreground: oklch(0.96 0.005 255);
|
|
98
|
+
--popover-foreground: oklch(0.96 0.005 255);
|
|
99
|
+
--secondary-foreground: oklch(0.96 0.005 255);
|
|
100
|
+
--muted-foreground: oklch(0.72 0.02 258);
|
|
101
|
+
--accent-foreground: oklch(0.96 0.005 255);
|
|
102
|
+
--sidebar-foreground: oklch(0.96 0.005 255);
|
|
103
|
+
--sidebar-accent-foreground: oklch(0.96 0.005 255);
|
|
104
|
+
--primary: oklch(0.68 0.19 262);
|
|
105
|
+
--primary-foreground: oklch(0.145 0.02 262);
|
|
106
|
+
--ring: oklch(0.6 0.15 262);
|
|
107
|
+
--sidebar-primary: oklch(0.68 0.19 262);
|
|
108
|
+
--sidebar-primary-foreground: oklch(0.145 0.02 262);
|
|
109
|
+
--sidebar-ring: oklch(0.6 0.15 262);
|
|
110
|
+
--chart-1: oklch(0.56 0.19 262);
|
|
111
|
+
--chart-2: oklch(0.75 0.17 118);
|
|
112
|
+
--chart-3: oklch(0.64 0.19 352);
|
|
113
|
+
--chart-4: oklch(0.78 0.105 195);
|
|
114
|
+
--chart-5: oklch(0.71 0.17 300);
|
|
115
|
+
--positive: oklch(0.76 0.15 150);
|
|
116
|
+
--positive-subtle: oklch(0.27 0.05 150);
|
|
117
|
+
--positive-fill: oklch(0.56 0.13 150);
|
|
118
|
+
--negative: oklch(0.74 0.15 22);
|
|
119
|
+
--negative-subtle: oklch(0.27 0.06 25);
|
|
120
|
+
--negative-fill: oklch(0.56 0.15 22);
|
|
121
|
+
--warning: oklch(0.8 0.14 80);
|
|
122
|
+
--warning-subtle: oklch(0.27 0.05 75);
|
|
123
|
+
--warning-fill: oklch(0.73 0.145 78);
|
|
124
|
+
--info: oklch(0.75 0.12 250);
|
|
125
|
+
--info-subtle: oklch(0.27 0.06 255);
|
|
126
|
+
--info-fill: oklch(0.56 0.13 250);
|
|
127
|
+
--neutral: oklch(0.85 0 0);
|
|
128
|
+
--neutral-subtle: oklch(0.27 0 0);
|
|
129
|
+
--neutral-fill: oklch(0.56 0 0);
|
|
130
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
131
|
+
--destructive-foreground: oklch(0.145 0.02 262);
|
|
45
132
|
}
|
|
46
|
-
/*
|
|
133
|
+
/* squadkit-theme:end */
|