@squadbase/vantage-template 0.0.2 → 0.1.0-dev.0faf4cb

package/base-template/DESIGN.md

@@ -0,0 +1,108 @@
+<!--
+DESIGN.md — このアプリの「見た目の意図」を書くファイルです。
+
+- 実際の色・角丸・書体の値は src/styles.css にあります。ここにはトークン名(--primary など)と
+  使い分けのルールだけを書き、色コードは書きません。
+- エージェントはページ・スライド・コンポーネントを書く前にこのファイルを読みます。
+  会話の中での指示はこのファイルより優先されます。
+- 「このサイトに合わせて」「色を落ち着いた感じに」と頼めば、このファイルと styles.css を
+  まとめて更新します。
+- このファイルはあなたのものです。`vantage upgrade` が書き換えることはありません。
+-->
+
+# デザイン
+
+## 全体のトーン (Overview)
+
+- 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。
+- 装飾より読みやすさを優先する。影・グラデーション・アニメーションは最小限。
+- 数字が主役。1 画面で伝えたいことを 1 つに絞り、補足は小さく添える。
+- ブランド素材: なし(ロゴを使う場合は `public/brand/logo.svg` のように `public/` 配下のパスで書く)
+
+## 色 (Colors)
+
+色は必ずトークン(Tailwind のセマンティッククラス)で指定する。素のパレット(`bg-blue-600` など)や
+色コードを直接書かない。
+
+| 役割 | トークン | 使う場所 |
+| --- | --- | --- |
+| 主色 (Primary) | `--primary` / `--primary-foreground` | 主要ボタン、選択中の状態。既定は無彩色 |
+| 強調 (Accent) | `--chart-1` | 1 つだけ目立たせたい数値・系列・リンク的な強調 |
+| 良い (Positive) | `--chart-2` | 前期比のプラスなど、良い変化の小さな印 |
+| 悪い (Negative) | `--destructive` | 前期比のマイナス、エラー、削除操作 |
+| 注意 (Warning) | 専用トークンなし | 文言とアイコンで示し、色は `--muted-foreground` |
+| 背景の段階 | `--background` → `--card` → `--muted` | ページ → カード → カード内の区画・ホバー |
+| 境界 | `--border` / `--input` / `--ring` | 罫線、入力欄、フォーカス |
+| 文字 | `--foreground` / `--muted-foreground` | 本文 / 補足・ラベル・単位 |
+
+- `--muted`・`--accent`・`--secondary`・`--border` は背景・境界用。文字色に使わない。
+- 増減(▲▼・前期比)は向きで色を分ける: 増加・プラスは `--chart-2`(または `--primary`)、
+  減少・マイナスは `--destructive`。下向きの矢印やマイナスを `--primary` で塗らない。
+- ライトとダークの両方がトークンで決まるので `dark:` を並べない。
+
+## チャート (Charts)
+
+- 系列の順番は `--chart-1` → `--chart-2` → `--chart-3` → `--chart-4` → `--chart-5`
+  (現在はプリセット `blue`: 青 → ティール → フクシア → バイオレット → グレー)。
+- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5`(グレー)にする。
+- 良い / 悪いを色で塗り分けるときは `--chart-2` / `--destructive`。色だけに頼らず ▲▼ や符号も添える。
+- 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
+- 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
+- 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
+- 配色を丸ごと変えるときは `npx @squadbase/vantage-template chart <preset>` を使う
+  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
+
+## 書体 (Typography)
+
+| 用途 | 指定 | 備考 |
+| --- | --- | --- |
+| 見出し・本文 | システムフォント(`body` の `font-family`) | Web フォントは使わない |
+| 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
+| スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
+| スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |
+
+サイズの段階(ダッシュボード):
+
+- ページ見出し: `text-2xl font-bold`
+- カード見出し・ラベル: `text-sm font-medium text-muted-foreground`
+- KPI の数値: `text-3xl font-semibold tabular-nums`
+- 本文・表: `text-sm`
+- 注釈・出典: `text-xs text-muted-foreground`
+
+スライドのサイズは `--slide-size-hero`(表紙・大きな数字)と `--slide-size-body`(本文)を基準にする。
+
+## レイアウトと密度 (Layout)
+
+- 情報はカード(`bg-card` + `border-border`)で区切る。角丸は `--radius` に従う(個別に変えない)。
+- グリッドの間隔は `gap-4`。セクション間は `gap-6` 程度。
+- KPI は 1 行に 2〜4 枚。その下にチャート、最後に明細の表。
+- 密度は「中」。余白を削って詰め込むより、ページを分ける。
+
+## 成果物の種類ごとの規則 (Per-artifact)
+
+### ダッシュボード
+
+- 先頭に KPI カード、次にトレンドのチャート、最後に明細の表。
+- 各 KPI には比較対象(前月比・目標比など)を 1 つ添える。
+- チャートのタイトルは結論を書く(「売上推移」より「売上は 3 か月連続で増加」)。
+
+### スライド
+
+- 1 枚に 1 メッセージ。見出しに結論を書く。
+- 色は `--slide-bg` / `--slide-fg` / `--slide-accent` / `--slide-muted` を使う
+  (既定では `--background` / `--foreground` / `--primary` / `--muted-foreground` に連動)。
+- 強調色は 1 枚につき 1 か所まで。
+
+## Do / Don't
+
+Do:
+
+- トークンと Tailwind のセマンティッククラスで色を指定する。
+- 数値には単位と比較対象を付ける。
+- 色の意味(良い / 悪い / 強調)をアプリ全体でそろえる。
+
+Don't:
+
+- 色コードや素のパレットクラスを直接書く。
+- 1 画面で強調色を何か所にも使う。
+- 3D チャート・円グラフの多用・装飾目的のグラデーション。

package/base-template/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/base-template/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/base-template/agents/doc.md

@@ -0,0 +1,73 @@
+# ドキュメント(.doc.tsx)
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.doc.tsx` で
+ドキュメントを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
+先に読んでいる想定です。
+
+## ドキュメントは `.doc.tsx` で書く
+
+`src/june-summary.doc.tsx` → `/june-summary`。上から下へ読む文章のページで、表やチャートを
+文中に置けます。中身は `<Document>` を返す普通の React コンポーネントで、`definePage` もナビも
+通常のページと同じように効きます。
+
+```tsx
+import { definePage } from "@squadbase/vantage"
+import { EChart } from "@squadbase/vantage/components"
+import { Document } from "@squadbase/vantage/doc"
+
+export const page = definePage({ title: "6月度サマリー", navLabel: "6月度サマリー" })
+export default function JuneSummary() {
+  return (
+    <Document>
+      <h1>6月度サマリー</h1>
+      <p>6月の売上は <strong>5,250 万円</strong>で、目標を 5% 上回りました。</p>
+      <h2>週次の売上</h2>
+      <figure>
+        <EChart option={option} height={280} ariaLabel="6月の週次売上" />
+        <figcaption>第4週はキャンペーン初週</figcaption>
+      </figure>
+      <table>…</table>
+    </Document>
+  )
+}
+```
+
+## 書き方
+
+- **素の HTML 要素で書く。** `<Document>` の中の `h1`〜`h4`・`p`・`ul`/`ol`/`li`・`table`・
+  `blockquote`・`pre`/`code`・`hr`・`a`・`figure`/`figcaption`・`img` には、見出しの大きさ・余白・
+  罫線などが最初から当たっています。クラスは要りません。
+- **Tailwind のユーティリティは、その要素だけ見た目を変えたいときに使う。** 要素の既定の
+  スタイルはユーティリティより弱いので、`className` を付ければそちらが勝ちます。ドキュメント全体の
+  見た目を変えたいときはユーティリティを並べず、下の `--doc-*` を変えます。
+- **数値はコードに直接書く。** ドキュメントは書いた時点の内容を残すページです。
+  `useApiQuery` などで読み込むと、開くたびに値が変わります。
+- **チャートは `EChart`(`@squadbase/vantage/components`)を文中に置く。** `figure` で囲めば
+  `figcaption` がキャプションになります。
+- **ページ全体を包むのは `<Document>` だけ。** `PageShell` などのダッシュボード用の枠で包まない
+  (本文の幅と余白は `<Document>` が決めます)。
+
+## 見た目を変える
+
+配色・書体・本文の幅は `--doc-*` の CSS 変数です。既定値はアプリのトークンへの別名なので、
+ダークモードにもそのまま追従します。
+
+| 変数 | 既定値 | 何に効くか |
+| --- | --- | --- |
+| `--doc-fg` | `var(--foreground)` | 本文の文字色 |
+| `--doc-muted` | `var(--muted-foreground)` | 引用・キャプション |
+| `--doc-accent` | `var(--primary)` | リンク |
+| `--doc-border` | `var(--border)` | 表・`h2` の下線・引用・`hr` |
+| `--doc-subtle` | `var(--muted)` | コード・表の見出し行の背景 |
+| `--doc-font-body` / `--doc-font-heading` / `--doc-font-mono` | アプリの書体 | 本文 / 見出し / コード |
+| `--doc-size-body` | `1rem` | 本文の文字サイズ(見出しはこれに比例) |
+| `--doc-line-height` | `1.8` | 本文の行間 |
+| `--doc-max-width` | `48rem` | 本文の幅 |
+
+アプリのすべてのドキュメントに効かせるなら `styles.css` の `:root` で定義し直します。1 つの
+ドキュメントだけなら `<Document theme={{ accent: "#2563eb", maxWidth: "56rem" }}>` のように
+`theme` で渡します(`theme` のキーは変数名から `--doc-` を外してキャメルケースにしたもの)。
+
+`.doc` を付けられるのはルートになるページモジュールだけで、`_layout.doc.tsx` などは
+`INVALID_PAGE_VARIANT` エラーになります。`june.doc.tsx` と `june.tsx` は同じ URL に解決するので
+`ROUTE_CONFLICT` です。

package/base-template/agents/page.md

@@ -0,0 +1,187 @@
+# ダッシュボード / 通常ページ(.tsx)
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.tsx` の通常ページ
+(ダッシュボード)を書くときに読んでください。前提となる不変条件・ディレクトリ構造は
+`AGENTS.md` を先に読んでいる想定です。
+
+プロジェクトルートに `DESIGN.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/base-template/agents/slide.md

@@ -0,0 +1,41 @@
+# スライド(.slide.tsx)
+
+フレームワーク所有の知識ファイルで、`vantage upgrade` で再同期されます。`.slide.tsx` で
+スライドデッキを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
+先に読んでいる想定です。
+
+プロジェクトルートに `DESIGN.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>
+  )
+}
+```
+
+**`<Slide>` は `<SlideDeck>` の直接の子に書く。** `SlideDeck` は直下の `<Slide>` 要素だけを数えるので、
+`<Slide>` を自作コンポーネント(`<Slide1 />` など)や Fragment で包むと 1 枚も数えられず「1 / 0」に
+なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列は可)。共通の部品は
+`<Slide>` の**中**に置くコンポーネントとして切り出します(`<Slide><CoverPage /></Slide>`)。
+
+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/base-template/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` 警告が知らせます