@squadbase/vantage 0.5.3-dev.71d2349 → 0.6.0-dev.3cc6138

package/templates/AGENTS.md

@@ -1,17 +1,16 @@
 # AGENTS.md — Vantage アプリの地図
 
 このファイルは、**Vantage(`@squadbase/vantage`)アプリを作るコーディングエージェント**が
-最初に読むための地図です。アプリ作者(= `index.tsx` を書く側)が守るべき規約・不変条件・
-最小レシピを 1 ページに集約しています。ここに書かれた規約だけで、最小のダッシュボードアプリを
-正しく組めます。
+最初に読むための地図です。アプリ作者(= `index.tsx` を書く側)が守るべき規約・不変条件を
+1 ページに集約し、種類ごとの詳しいレシピは `agents/` 配下の知識ファイルに分けています。
 
-> このファイルは **Vantage フレームワークが所有する正本**のコピーです。手で書き換えても、
-> `vantage upgrade` を実行するとフレームワーク同梱の正本から再同期されて上書きされます。
-> アプリ固有のメモは別ファイル(例: `README.md`)に書いてください。
+> このファイルと `agents/*.md` は、いずれも **Vantage フレームワークが所有する正本**の
+> コピーです。手で書き換えても、`vantage upgrade` を実行するとフレームワーク同梱の正本から
+> 再同期されて上書きされます。アプリ固有のメモは別ファイル(例: `README.md`)に書いてください。
 >
 > 手順を伴う踏み込んだワークフローは、同梱の Claude Code Skill に分かれています。このファイルは
-> 「地図」、Skill は「手順書」という役割分担です。**配置済みの Skill を先に探す**手順は
-> 末尾の「さらに詳しく(同梱 Skill)」にあります。
+> 「地図」、`agents/*.md` は「種類ごとの静的リファレンス」、Skill は「手順書」という役割分担です。
+> **配置済みの Skill を先に探す**手順は末尾の「さらに詳しく(同梱 Skill)」にあります。
 
 ## Vantage とは
 
@@ -39,8 +38,8 @@ UI キット・開発サーバー・API サーバー・ビルドはすべて Van
 - **色はセマンティックトークンで書く。** `text-foreground`・`text-muted-foreground`・`bg-card`・
   `border-border`。トークンがライト / ダークの両方を持つので `dark:` を並べる必要が無い。
   素のパレット + `dark:`(`text-slate-900 dark:text-slate-100`)を混ぜると、その 1 か所だけ
-  手動で 2 モードを管理することになる(→「ダークモードは opt-in」)。`--muted`・`--accent`・
-  `--secondary`・`--border` は背景・境界用で、文字色に使うと読めない。
+  手動で 2 モードを管理することになる(→ `agents/page.md` の「ダークモードは opt-in」)。
+  `--muted`・`--accent`・`--secondary`・`--border` は背景・境界用で、文字色に使うと読めない。
 - **`.vantage/` と `dist/` は生成物。** 編集しない・読みにいかない(gitignore 済み)。任意の CLI
   コマンド、または `vantage upgrade` で再生成される。
 - **`definePage` の値はリテラルで書く。** title/description/navLabel はビルド時に静的抽出される
@@ -93,6 +92,8 @@ root/
 | `@squadbase/vantage/query` | `useApiQuery`・`useApiMutation`・`apiJson`・`apiFetch`・`apiUrl`・`ApiError`、ほか `useQuery`/`useMutation` など TanStack Query の再エクスポート |
 | `@squadbase/vantage/ui` | shadcn/ui(Base UI バリアント)プリミティブ(`Button`・`Loading`・`ErrorState`・`Empty` ほか) |
 | `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`・`EChart` ほか) |
+| `@squadbase/vantage/table` | `FilePageView`・`TableViewer`(データファイルページの表ビューア) |
+| `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`(スライド専用。1920×1080 の固定キャンバス) |
 | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
 | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
 
@@ -101,207 +102,24 @@ root/
 `server/` ディレクトリがあれば **fullstack**、無ければ **SPA**。`vantage-manifest.json` の
 `mode` はここから自動で決まり、手で書く設定は無い。**SPA から始めて fullstack へ「昇格」する
 必要はない** ― テンプレートから始めた場合は最初から `server/` があり、その時点で fullstack。
-下の 2 節は段階ではなく、いま自分がどちらにいるかを確かめるための地図として読む。
-
-- `server/` が**ある** → 「API を持つ(fullstack モード)」を見る。データは自前の `/api/*` から
-  `useApiQuery` で取る。
-- `server/` が**無い** → 「最小アプリ(2 ファイル)」の構成。外部 API を直接叩くなら `useQuery`。
-  自前の API が要るようになったら `server/api/*.ts` を足すだけでよい(設定変更は不要)。
-
-## 最小アプリ(2 ファイル)
-
-`package.json` と `index.tsx` の 2 ファイルだけで動く。
-
-`package.json`:
-
-```json
-{
-  "name": "my-dashboard",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vantage dev",
-    "build": "vantage build",
-    "preview": "vantage preview",
-    "check": "vantage check",
-    "routes": "vantage routes"
-  },
-  "dependencies": {
-    "@squadbase/vantage": "^0.5.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7"
-  }
-}
-```
-
-`index.tsx`(ルートのデフォルトエクスポートが `/` ページになる):
-
-```tsx
-export default function Dashboard() {
-  return (
-    <main className="p-6">
-      <h1 className="text-2xl font-semibold">Dashboard</h1>
-    </main>
-  )
-}
-```
-
-```bash
-pnpm install
-pnpm dev      # → http://localhost:5173(HMR)
-pnpm check    # 静的診断(エラーがあれば exit 1)
-pnpm routes   # ページ/API の URL マップ
-```
+下の 2 つは段階ではなく、いま自分がどちらにいるかを確かめるための地図として読む。
 
-`server/` ディレクトリが無いので、この構成は **SPA モード**。ページを直下に置く形だが、
-`src/` を作ってその中に集めてもよい(テンプレートから始めた場合は最初から `src/` がある)。
-どちらか一方に寄せること(→「ディレクトリ構造」)。
+- `server/` が**ある** → データは自前の `/api/*` から `useApiQuery` で取る(→ `agents/api.md`)。
+- `server/` が**無い** → 外部 API を直接叩くなら `useQuery`(→ `agents/page.md`)。自前の API が
+  要るようになったら `server/api/*.ts` を足すだけでよい(設定変更は不要)。
 
-## ルーティング規約(ファイル名 → ルート)
+## 何を書くか → どのファイルを読むか
 
-ページルート(`src/` があればその中、無ければプロジェクトルート)からの相対パスが、そのまま
-URL になる。各ページは**デフォルトエクスポートの React コンポーネントが必須**(無いと
-`MISSING_DEFAULT_EXPORT`)。以下の「ファイル」列はページルートからの相対パス。
+**書こうとしている種類のファイルだけを開けばよい。** まず該当する 1 ファイルを readFiles で
+読んでから書き始める。
 
-| ファイル | ルート |
+| 書こうとしているもの | 読むファイル |
 | --- | --- |
-| `index.tsx` | `/` |
-| `monthly-analysis.tsx` | `/monthly-analysis` |
-| `sales/index.tsx` | `/sales` |
-| `sales/[customerId].tsx` | `/sales/:customerId`(動的パラメータ) |
-| `_layout.tsx` | そのディレクトリ配下を包むネストレイアウト(`Outlet` で子を描く) |
-| `_404.tsx` | Not Found ページ |
-| `_error.tsx` | ルートが throw したときのエラーページ |
-
-`components/`・`hooks/`・`lib/`・`server/`・`public/` はどの階層でもルート走査の対象外
-(ページにならない)。それ以外のディレクトリ名は URL のセグメントになる(→「ディレクトリ構造」)。
-
-```tsx
-import { definePage } from "@squadbase/vantage"
-
-// title は document.title、navLabel は useRoutes() で組むナビの表示名(既定は title)
-export const page = definePage({ title: "Monthly Analysis · Acme", navLabel: "Monthly" })
-
-export default function MonthlyAnalysis() {
-  return <main className="p-6">…</main>
-}
-```
-
-### ナビはルート一覧から組む
-
-`useRoutes()` がページルート一覧(スキャン順)を返すので、リンク配列を手で持たない。
-`useCurrentRoute()` は現在のルート(404 なら `undefined`)。
-
-```tsx
-import { Link, useCurrentRoute, useRoutes } from "@squadbase/vantage/router"
-
-// 動的ルートは URL が定まらないので外す。label は navLabel → title → path の順
-const routes = useRoutes().filter((r) => !r.dynamic)
-const current = useCurrentRoute()
-
-routes.map((r) => (
-  <Link key={r.path} to={r.to} activeClassName="font-semibold">
-    {r.label}
-  </Link>
-))
-```
-
-`RouteInfo`: `path`(`/sales/:id`)・`to`(`/sales/$id`)・`params`・`dynamic`・`index`・`label`・
-`title`・`description`・`navLabel`。
-
-### フィルタ状態は URL に置く
-
-リロードで消えず、URL をそのまま共有できる。`useState` と同じ形。
-
-```tsx
-import { useSearchParam, useSearchState } from "@squadbase/vantage/router"
-
-const [region, setRegion] = useSearchParam("region", "all")   // 常に string
-const [segments, setSegments] = useSearchState<string[]>("segments", []) // JSON になる値
-```
-
-デフォルト値(または `null`)を書くとキーは URL から消える。履歴は既定で `replace`
-(`{ replace: false }` で push)。
-
-### 動的パラメータの「3 つの綴り」を同期させる
-
-崩すと静かにマッチしなくなる不変条件:
-
-- ファイル名 `sales/[customerId].tsx`
-- 表示ルート `/sales/:customerId`
-- リンクトークン `to="/sales/$customerId"` + `params={{ customerId }}`
-
-```tsx
-import { Link, useParams } from "@squadbase/vantage/router"
-
-<Link to="/sales/$customerId" params={{ customerId: row.id }}>{row.name}</Link>
-
-// 詳細ページ側で取り出す
-const { customerId } = useParams()
-```
-
-## データ取得(server を持たない fetch)
-
-外部 API を叩くだけなら `server/` は不要。`@squadbase/vantage/query` の `useQuery` を使う:
-
-```tsx
-import { useQuery } from "@squadbase/vantage/query"
-import { Loading, ErrorState } from "@squadbase/vantage/ui"
-
-const q = useQuery({ queryKey: ["stats"], queryFn: () => fetch("/…").then((r) => r.json()) })
-if (q.isPending) return <Loading />
-if (q.isError) return <ErrorState message={(q.error as Error).message} />
-```
-
-`QueryClient` は Vantage が 1 つだけ管理する(staleTime 30s・retry 1・
-refetchOnWindowFocus false・networkMode "always")。挙動を変えたいときはクエリ側のオプションで
-上書きする。
-自分の `server/api` を叩くときは `useQuery` ではなく `useApiQuery`(→「API を持つ(fullstack
-モード)」)。
-
-## API を持つ(fullstack モード)
-
-**`server/` ディレクトリがあれば fullstack モード**(無いアプリに足せば、その時点で切り替わる)。
-`server/api/**` の各ファイルが API ルートになる。
-
-`server/api/monthly-analysis.ts` → `GET /api/monthly-analysis`:
-
-```ts
-import type { ApiContext } from "@squadbase/vantage/server"
-import { HttpError } from "@squadbase/vantage/server"
-
-export async function GET({ params, env }: ApiContext) {
-  if (!env.API_KEY) throw new HttpError(500, "API_KEY missing")
-  return Response.json({ ok: true })
-}
-```
-
-- API モジュールは**大文字の HTTP メソッド**(`GET`/`POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`)を
-  エクスポートする。それ以外の名前は `INVALID_API_EXPORT` エラー。
-- 動的 API も `[id].ts` 記法: `server/api/customers/[id].ts` → `GET /api/customers/:id`。
-  `params.id` で取り出す(`noUncheckedIndexedAccess` が効くので narrowing が要る)。
-- **クライアントに見せたいエラーは `HttpError(status, msg)` を throw する。** それ以外の throw は
-  ログに記録され汎用の 500 に丸められる。
-- **シークレットは `ApiContext.env` にだけ届く**(クライアントには決して届かない)。
-
-クライアント側からは `useApiQuery` で `/api/*` を叩く。ベース URL の解決・JSON パース・
-非 2xx の `ApiError` 化・クエリキー(`["api", url]`)が入っている:
-
-```tsx
-import { useApiQuery, useApiMutation } from "@squadbase/vantage/query"
-
-const q = useApiQuery<Customer>(`/api/customers/${customerId}`)
-if (q.isError) return <ErrorState message={q.error.message} />  // HttpError のメッセージ
-
-// クエリ文字列は search で。undefined の項目は落ちる
-const rows = useApiQuery<Row[]>("/api/customers", { search: { segment } })
-
-// 書き込み。変数がそのまま JSON ボディになる
-const save = useApiMutation<Customer, Payload>("/api/customers", { method: "POST" })
-```
-
-`ApiError` は `message`・`status`・`body`・`requestId` を持つ。hook が使えない場所では
-`apiJson(path, init)`、生の `Response` が要るときは `apiFetch`。
+| ダッシュボード / 通常ページ(`.tsx`) | `agents/page.md` |
+| API(`server/`) | `agents/api.md` |
+| スライド(`.slide.tsx`) | `agents/slide.md` |
+| `.xlsx` ページ | `agents/xlsx.md` |
+| `.csv` ページ | `agents/csv.md` |
 
 ## 環境変数
 
@@ -309,30 +127,6 @@ const save = useApiMutation<Customer, Payload>("/api/customers", { method: "POST
   のみ。** `VITE_` 系の公開 API は無い。
 - サーバー側のシークレットは `ApiContext.env.MY_SECRET` で読む(`server/` 内のみ)。
 
-## 組み込み UI / コンポーネントの入口
-
-- **プリミティブ**は `@squadbase/vantage/ui` から import する(`Button`・`Loading`・
-  `ErrorState`・`Empty`・`Select`・`Checkbox` ほか)。
-- **複合パーツ**は `@squadbase/vantage/components` から(`PageShell`・`DashboardCardPreset`・
-  `DataTablePreset`・`EChart` ほか)。
-- **どの名前が import 可能か / props の詳細は `vantage docs` で引く。** ガイドとコンポーネント
-  リファレンスはパッケージに同梱されていて、オフラインでも読める(→「ドキュメントを引く」)。
-  **名前が分からないとき**はやりたいことで `vantage search` する(→ 同節)。
-- **UI は import して使うのが既定。取り出す(eject)必要はない。** `vantage add ui|block` は
-  ソースを手元にコピーして**改造したいとき専用**のコマンドで、取り出せるのは
-  `ui: data-table` と `block: sales-overview` の 2 つだけ。それ以外の名前は import 専用で
-  `add` の対象ではない(未知名で実行すると候補が一覧表示される)。
-
-### ダークモードは opt-in
-
-ダークのトークンが効くのは、祖先に `.dark` か `[data-theme="dark"]` が付いているときだけ。
-**OS / ブラウザの設定(`prefers-color-scheme`)は見ない。** `dark:` ユーティリティも同じ
-スイッチに繋いであるので(`theme.css` の `@custom-variant dark`)、自分でクラスを付けない限り
-アプリは常にライトで描かれる ― `dark:` を書いてもそこだけダークになることはない。
-
-明暗を切り替えたいときは、レイアウトのルート要素などに `.dark` / `data-theme="dark"` を
-自分で付ける。
-
 ## ドキュメントを引く(`vantage docs` / `vantage search`)
 
 ```bash
@@ -378,6 +172,7 @@ body・レスポンスの status と形)まで出る。`vantage check --json` /
 
 - **`vantage-app`** — アプリを一から作る / 構成を広げるときの進め方と検証の順序
 - **`vantage-add-feature`** — 既存アプリに page / api / ui を 1 つ足す定型
+- **`vantage-slide`** — `.slide.tsx` でスライドデッキを書く(キャンバスの予算・段階表示・pptx 書き出し)
 - **`vantage-pitfalls`** — Base UI(≠ Radix)の癖など、静かに壊れる落とし穴のリファレンス
 - **`project-storage`** — Squadbase の Project Storage(アップロード済みファイル)をブラウザから読み書きする
 
@@ -398,3 +193,6 @@ vantage add skill --all --dir .claude/skills   # 置き場所を指定(既定は
 `add skill` はプロジェクト内を走査してから動くので、**再実行しても二重に配置されない**。
 配置済みのコピーを新しいバージョンに更新したいときだけ `--force` を付ける(見つかった場所を
 そのまま書き換える)。
+
+**役割分担:** Skill = 手順書(踏み込んだワークフロー) / `agents/*.md` = 種類ごとの静的
+リファレンス / `AGENTS.md`(このファイル) = 地図。

package/templates/agents/api.md

@@ -0,0 +1,49 @@
+# API(server/)
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`server/api/**`
+に API ルートを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
+先に読んでいる想定です。
+
+## API を持つ(fullstack モード)
+
+**`server/` ディレクトリがあれば fullstack モード**(無いアプリに足せば、その時点で切り替わる)。
+`server/api/**` の各ファイルが API ルートになる。
+
+`server/api/monthly-analysis.ts` → `GET /api/monthly-analysis`:
+
+```ts
+import type { ApiContext } from "@squadbase/vantage/server"
+import { HttpError } from "@squadbase/vantage/server"
+
+export async function GET({ params, env }: ApiContext) {
+  if (!env.API_KEY) throw new HttpError(500, "API_KEY missing")
+  return Response.json({ ok: true })
+}
+```
+
+- API モジュールは**大文字の HTTP メソッド**(`GET`/`POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`)を
+  エクスポートする。それ以外の名前は `INVALID_API_EXPORT` エラー。
+- 動的 API も `[id].ts` 記法: `server/api/customers/[id].ts` → `GET /api/customers/:id`。
+  `params.id` で取り出す(`noUncheckedIndexedAccess` が効くので narrowing が要る)。
+- **クライアントに見せたいエラーは `HttpError(status, msg)` を throw する。** それ以外の throw は
+  ログに記録され汎用の 500 に丸められる。
+- **シークレットは `ApiContext.env` にだけ届く**(クライアントには決して届かない)。
+
+クライアント側からは `useApiQuery` で `/api/*` を叩く。ベース URL の解決・JSON パース・
+非 2xx の `ApiError` 化・クエリキー(`["api", url]`)が入っている:
+
+```tsx
+import { useApiQuery, useApiMutation } from "@squadbase/vantage/query"
+
+const q = useApiQuery<Customer>(`/api/customers/${customerId}`)
+if (q.isError) return <ErrorState message={q.error.message} />  // HttpError のメッセージ
+
+// クエリ文字列は search で。undefined の項目は落ちる
+const rows = useApiQuery<Row[]>("/api/customers", { search: { segment } })
+
+// 書き込み。変数がそのまま JSON ボディになる
+const save = useApiMutation<Customer, Payload>("/api/customers", { method: "POST" })
+```
+
+`ApiError` は `message`・`status`・`body`・`requestId` を持つ。hook が使えない場所では
+`apiJson(path, init)`、生の `Response` が要るときは `apiFetch`。

package/templates/agents/csv.md

@@ -0,0 +1,32 @@
+# csv ページ
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.csv` を
+ページとして置くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
+先に読んでいる想定です。
+
+## `.csv` を置くだけでページになる
+
+**`.csv` を `src/` に置くだけで、他のページと同格のルートになります。** URL の作り方は
+`.tsx` と同じ(`src/sales-export.csv` → `/sales-export`、`index.csv` はそのディレクトリ)で、
+ナビにも `vantage routes` にも並びます。開くとフレームワーク同梱の表ビューアが描き、
+元ファイルをダウンロードできます。ビューアは**表計算ソフトの見た目**です —— 列は A / B / C、
+左に行番号、ファイルの 1 行目はヘッダとして固定。読み取り専用で、編集もソートもできません
+(セルを選んで `Cmd/Ctrl+C` でコピーは可)。
+
+- **タイトルはファイル名から導かれる**(`sales-export.csv` → 「Sales Export」)。データファイルに
+  `definePage` は書けません。名前を変えたいときはファイルをリネームします
+- **ページにしたくないファイルは `_` を前置する**(`_sales-export.csv`)。`components/`・`hooks/`・
+  `lib/` に置いたものも同じくページになりません
+- **既定はファイルをそのまま置く(tsx を書かない)。** 自分でタイトルや説明を付けたいときだけ、`_` を
+  前置してルート化を止め、tsx から描きます:
+  ```tsx
+  import { FilePageView } from "@squadbase/vantage/table"
+  import src from "./_sales-export.csv?url&no-inline"
+  export const page = definePage({ title: "売上エクスポート" })
+  export default () => <FilePageView src={src} kind="csv" fileName="sales-export.csv" />
+  ```
+- 数式・グラフ・セル書式といった概念は csv には無いので、値がそのまま読めます。ブラウザで
+  パースするので 25MB を超えるファイルはそのページにエラーが出ます —— 大きいデータは
+  `server/api/` から配って `DataTable` で描いてください
+- **ビューアの無い拡張子(`.tsv` など)はルートになりません。** `vantage check` の
+  `UNSUPPORTED_PAGE_FILE` 警告が知らせます

package/templates/agents/page.md

@@ -0,0 +1,185 @@
+# ダッシュボード / 通常ページ(.tsx)
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.tsx` の通常ページ
+(ダッシュボード)を書くときに読んでください。前提となる不変条件・ディレクトリ構造は
+`AGENTS.md` を先に読んでいる想定です。
+
+## 最小アプリ(2 ファイル)
+
+`package.json` と `index.tsx` の 2 ファイルだけで動く。
+
+`package.json`:
+
+```json
+{
+  "name": "my-dashboard",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vantage dev",
+    "build": "vantage build",
+    "preview": "vantage preview",
+    "check": "vantage check",
+    "routes": "vantage routes"
+  },
+  "dependencies": {
+    "@squadbase/vantage": "^0.5.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  }
+}
+```
+
+`index.tsx`(ルートのデフォルトエクスポートが `/` ページになる):
+
+```tsx
+export default function Dashboard() {
+  return (
+    <main className="p-6">
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+    </main>
+  )
+}
+```
+
+```bash
+pnpm install
+pnpm dev      # → http://localhost:5173(HMR)
+pnpm check    # 静的診断(エラーがあれば exit 1)
+pnpm routes   # ページ/API の URL マップ
+```
+
+`server/` ディレクトリが無いので、この構成は **SPA モード**。ページを直下に置く形だが、
+`src/` を作ってその中に集めてもよい(テンプレートから始めた場合は最初から `src/` がある)。
+どちらか一方に寄せること(→ `AGENTS.md` の「ディレクトリ構造」)。
+
+## ルーティング規約(ファイル名 → ルート)
+
+ページルート(`src/` があればその中、無ければプロジェクトルート)からの相対パスが、そのまま
+URL になる。各ページは**デフォルトエクスポートの React コンポーネントが必須**(無いと
+`MISSING_DEFAULT_EXPORT`)。以下の「ファイル」列はページルートからの相対パス。
+
+| ファイル | ルート |
+| --- | --- |
+| `index.tsx` | `/` |
+| `monthly-analysis.tsx` | `/monthly-analysis` |
+| `sales/index.tsx` | `/sales` |
+| `sales/[customerId].tsx` | `/sales/:customerId`(動的パラメータ) |
+| `_layout.tsx` | そのディレクトリ配下を包むネストレイアウト(`Outlet` で子を描く) |
+| `_404.tsx` | Not Found ページ |
+| `_error.tsx` | ルートが throw したときのエラーページ |
+| `monthly-report.slide.tsx` | `/monthly-report`(スライドデッキ。詳しくは `agents/slide.md`) |
+| `sales-export.csv` | `/sales-export`(詳しくは `agents/csv.md`) |
+| `data/june.xlsx` | `/data/june`(詳しくは `agents/xlsx.md`) |
+
+`components/`・`hooks/`・`lib/`・`server/`・`public/` はどの階層でもルート走査の対象外
+(ページにならない)。それ以外のディレクトリ名は URL のセグメントになる(→ `AGENTS.md` の
+「ディレクトリ構造」)。
+
+```tsx
+import { definePage } from "@squadbase/vantage"
+
+// title は document.title、navLabel は useRoutes() で組むナビの表示名(既定は title)
+export const page = definePage({ title: "Monthly Analysis · Acme", navLabel: "Monthly" })
+
+export default function MonthlyAnalysis() {
+  return <main className="p-6">…</main>
+}
+```
+
+### ナビはルート一覧から組む
+
+`useRoutes()` がページルート一覧(スキャン順)を返すので、リンク配列を手で持たない。
+`useCurrentRoute()` は現在のルート(404 なら `undefined`)。
+
+```tsx
+import { Link, useCurrentRoute, useRoutes } from "@squadbase/vantage/router"
+
+// 動的ルートは URL が定まらないので外す。label は navLabel → title → path の順
+const routes = useRoutes().filter((r) => !r.dynamic)
+const current = useCurrentRoute()
+
+routes.map((r) => (
+  <Link key={r.path} to={r.to} activeClassName="font-semibold">
+    {r.label}
+  </Link>
+))
+```
+
+`RouteInfo`: `path`(`/sales/:id`)・`to`(`/sales/$id`)・`params`・`dynamic`・`index`・`label`・
+`title`・`description`・`navLabel`・`kind`(`"module"` | `"file"`)・`variant`(`"slide"`)。
+後ろの 2 つで、ナビをダッシュボード / スライド / データに分けたりアイコンを変えたりできます。
+
+### フィルタ状態は URL に置く
+
+リロードで消えず、URL をそのまま共有できる。`useState` と同じ形。
+
+```tsx
+import { useSearchParam, useSearchState } from "@squadbase/vantage/router"
+
+const [region, setRegion] = useSearchParam("region", "all")   // 常に string
+const [segments, setSegments] = useSearchState<string[]>("segments", []) // JSON になる値
+```
+
+デフォルト値(または `null`)を書くとキーは URL から消える。履歴は既定で `replace`
+(`{ replace: false }` で push)。
+
+### 動的パラメータの「3 つの綴り」を同期させる
+
+崩すと静かにマッチしなくなる不変条件:
+
+- ファイル名 `sales/[customerId].tsx`
+- 表示ルート `/sales/:customerId`
+- リンクトークン `to="/sales/$customerId"` + `params={{ customerId }}`
+
+```tsx
+import { Link, useParams } from "@squadbase/vantage/router"
+
+<Link to="/sales/$customerId" params={{ customerId: row.id }}>{row.name}</Link>
+
+// 詳細ページ側で取り出す
+const { customerId } = useParams()
+```
+
+## データ取得(server を持たない fetch)
+
+外部 API を叩くだけなら `server/` は不要。`@squadbase/vantage/query` の `useQuery` を使う:
+
+```tsx
+import { useQuery } from "@squadbase/vantage/query"
+import { Loading, ErrorState } from "@squadbase/vantage/ui"
+
+const q = useQuery({ queryKey: ["stats"], queryFn: () => fetch("/…").then((r) => r.json()) })
+if (q.isPending) return <Loading />
+if (q.isError) return <ErrorState message={(q.error as Error).message} />
+```
+
+`QueryClient` は Vantage が 1 つだけ管理する(staleTime 30s・retry 1・
+refetchOnWindowFocus false・networkMode "always")。挙動を変えたいときはクエリ側のオプションで
+上書きする。
+自分の `server/api` を叩くときは `useQuery` ではなく `useApiQuery`(→ `agents/api.md`)。
+
+## 組み込み UI / コンポーネントの入口
+
+- **プリミティブ**は `@squadbase/vantage/ui` から import する(`Button`・`Loading`・
+  `ErrorState`・`Empty`・`Select`・`Checkbox` ほか)。
+- **複合パーツ**は `@squadbase/vantage/components` から(`PageShell`・`DashboardCardPreset`・
+  `DataTablePreset`・`EChart` ほか)。
+- **どの名前が import 可能か / props の詳細は `vantage docs` で引く。** ガイドとコンポーネント
+  リファレンスはパッケージに同梱されていて、オフラインでも読める(→ `AGENTS.md` の
+  「ドキュメントを引く」)。**名前が分からないとき**はやりたいことで `vantage search` する
+  (→ 同節)。
+- **UI は import して使うのが既定。取り出す(eject)必要はない。** `vantage add ui|block` は
+  ソースを手元にコピーして**改造したいとき専用**のコマンドで、取り出せるのは
+  `ui: data-table` と `block: sales-overview` の 2 つだけ。それ以外の名前は import 専用で
+  `add` の対象ではない(未知名で実行すると候補が一覧表示される)。
+
+### ダークモードは opt-in
+
+ダークのトークンが効くのは、祖先に `.dark` か `[data-theme="dark"]` が付いているときだけ。
+**OS / ブラウザの設定(`prefers-color-scheme`)は見ない。** `dark:` ユーティリティも同じ
+スイッチに繋いであるので(`theme.css` の `@custom-variant dark`)、自分でクラスを付けない限り
+アプリは常にライトで描かれる ― `dark:` を書いてもそこだけダークになることはない。
+
+明暗を切り替えたいときは、レイアウトのルート要素などに `.dark` / `data-theme="dark"` を
+自分で付ける。

package/templates/agents/slide.md

@@ -0,0 +1,34 @@
+# スライド(.slide.tsx)
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.slide.tsx` で
+スライドデッキを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
+先に読んでいる想定です。
+
+## スライドは `.slide.tsx` で書く
+
+`src/monthly-report.slide.tsx` → `/monthly-report`。中身は `<SlideDeck>` を返す普通の React
+コンポーネントで、`definePage` もナビも通常のページと同じように効きます。
+
+```tsx
+import { Slide, SlideDeck } from "@squadbase/vantage/slide"
+
+export const page = definePage({ title: "6月度レビュー", navLabel: "6月度" })
+export default function Deck() {
+  return (
+    <SlideDeck>
+      <Slide>…</Slide>
+      <Slide>…</Slide>
+    </SlideDeck>
+  )
+}
+```
+
+1920×1080 の固定キャンバスに絶対 px で書き、画面サイズに合わせて縮小されます。キー / クリックで
+送れ、左のスライド一覧(サムネイル列)は `L` で開閉、`F` で全画面、ツールバーから pptx を
+書き出せます。**書き方の作法は同梱 Skill の
+`vantage-slide`** にあります(キャンバスの縦方向の予算、段階表示、トランジション、モーフ、
+pptx が壊れる条件)。
+
+`.slide` を付けられるのはルートになるページモジュールだけで、`_layout.slide.tsx` などは
+`INVALID_PAGE_VARIANT` エラーになります。`june.slide.tsx` と `june.tsx` は同じ URL に解決するので
+`ROUTE_CONFLICT` です。

package/templates/agents/xlsx.md

@@ -0,0 +1,33 @@
+# xlsx ページ
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.xlsx` を
+ページとして置くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
+先に読んでいる想定です。
+
+## `.xlsx` を置くだけでページになる
+
+**`.xlsx` を `src/` に置くだけで、他のページと同格のルートになります。** URL の作り方は
+`.tsx` と同じ(`src/data/june.xlsx` → `/data/june`、`index.xlsx` はそのディレクトリ)で、
+ナビにも `vantage routes` にも並びます。開くとフレームワーク同梱の表ビューアが描き、複数シートを
+切り替えられ、元ファイルをダウンロードできます。ビューアは**表計算ソフトの見た目**です ——
+列は A / B / C、左に行番号、ファイルの 1 行目はヘッダとして固定、シートのタブは下端。
+読み取り専用で、編集もソートもできません(セルを選んで `Cmd/Ctrl+C` でコピーは可)。
+
+- **タイトルはファイル名から導かれる**(`june.xlsx` → 「June」)。データファイルに `definePage` は
+  書けません。名前を変えたいときはファイルをリネームします
+- **ページにしたくないファイルは `_` を前置する**(`_june.xlsx`)。`components/`・`hooks/`・`lib/` に
+  置いたものも同じくページになりません
+- **既定はファイルをそのまま置く(tsx を書かない)。** 自分でタイトルや説明を付けたいときだけ、`_` を
+  前置してルート化を止め、tsx から描きます:
+  ```tsx
+  import { FilePageView } from "@squadbase/vantage/table"
+  import src from "./_june.xlsx?url&no-inline"
+  export const page = definePage({ title: "6月度 売上レポート" })
+  export default () => <FilePageView src={src} kind="xlsx" fileName="june.xlsx" />
+  ```
+- **複数シートに対応**しています。シートのタブは下端に並び、切り替えて閲覧できます。
+- 数式・グラフ・セル書式は再現されません(値として読めれば十分、という設計)。ブラウザでパースするので
+  25MB を超えるファイルはそのページにエラーが出ます —— 大きいデータは `server/api/` から配って
+  `DataTable` で描いてください
+- **ビューアの無い拡張子(`.xls`・`.ods` など)はルートになりません。** `vantage check` の
+  `UNSUPPORTED_PAGE_FILE` 警告が知らせます