@squadbase/vantage-template 0.0.1

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@squadbase/vantage-template",
+  "version": "0.0.1",
+  "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
+  "keywords": [
+    "squadbase",
+    "vantage",
+    "dashboard",
+    "template",
+    "scaffolding",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/squadbase/squadbase-templates.git",
+    "directory": "vantage-template"
+  },
+  "homepage": "https://github.com/squadbase/squadbase-templates/tree/main/vantage-template#readme",
+  "bugs": {
+    "url": "https://github.com/squadbase/squadbase-templates/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "bin": {
+    "squadbase-vantage-template": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "ui-templates",
+    "base-template",
+    "chart-presets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='package-lock.json' --exclude='*.tsbuildinfo' --exclude='*.log' ../vantage/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
+    "build": "npm run sync-base && tsup",
+    "prepublishOnly": "npm run build",
+    "release": "npm publish --@squadbase:registry=https://registry.npmjs.org"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.0",
+    "tsup": "^8.4.0",
+    "typescript": "~5.7.0"
+  },
+  "optionalDependencies": {
+    "@ai-sdk/anthropic": "^1.0.0",
+    "@ai-sdk/google": "^1.0.0",
+    "@ai-sdk/openai": "^1.0.0",
+    "ai": "^4.0.0"
+  }
+}

package/ui-templates/CLAUDE.md

@@ -0,0 +1,200 @@
+# CLAUDE.md — ui-templates (Vantage)
+
+UIパターン別テンプレート（KPI重視・チャート格子・テーブル重視・ファネル など）。ユースケース非依存の **UI 骨格の見本市**。コーディングエージェントがこれを起点にユーザー要望のダッシュボードを実装する。
+
+**画面として重複するテンプレは置かない。** 追加を検討する際は、既存テンプレのプレビュー画像と並べて「別の絵になるか」で判断する。`tabbed-dashboard` は Tab 1 が `kpi-chart-simple`、Tab 2 が `table-focus` の再掲でサムネイルが見分けられなかったため削除した（タブは既存テンプレに `<Tabs>` を巻けば作れる）。
+
+このファイルは `vantage-template/ui-templates/` 配下のファイル構成ルールを定義する。デザイン要件・AI relabel・EN/JA・CLI の挙動は親 [`../CLAUDE.md`](../CLAUDE.md) に従う。
+
+> **Vite 版との差分**: 適用先が Vantage アプリ（`@squadbase/vantage`）になったため、(1) エントリは `src/pages/home.tsx` ではなく **ルートの `index.tsx`**、(2) テンプレ固有ファイルは `src/templates/<slug>/` ではなく **`components/<slug>/`**、(3) 全ての building block を `@squadbase/vantage/*` から import する（ローカルコピーは持たない）。
+
+## 設計目標
+
+テンプレートは「出発点」であり、適用後にエージェントが本実装を被せていく。そのため次の3点を最優先する:
+
+1. **探索コスト最小** — テンプレ由来のコードが一目で分かること
+2. **デッドコード/削除コスト最小** — 不要になったら迷わず一掃できること
+3. **indirection 最小** — エージェントが編集対象に最短で到達できること
+
+## ファイル構成の原則
+
+### 1. 1テンプレ = 1ディレクトリ（コロケーション）
+
+適用先では、`index.tsx`（エントリ）以外のテンプレ固有ファイルを **`components/<slug>/` 1ディレクトリに集約** する。
+
+```
+# 適用先（dest）レイアウト
+index.tsx                             # エントリ（ルート "/"）
+components/<slug>/
+  mock-data.ts                        # データ層（relabel:false / 差し替え対象）
+  types.ts                            # 型（index と data で共有）
+  ...（分割した場合のみ追加ファイル）
+```
+
+- **探索**: `components/<slug>/` を見ればテンプレ由来が一覧完結
+- **削除**: `rm -rf components/<slug>/` で一掃
+
+**`components/` を使う理由（重要）**: Vantage は**ファイルベースルーティング**で、`.tsx` ファイルは原則すべてページ扱いになる。`components/` / `hooks/` / `lib/` / `server/` / `public/` だけがルート走査から除外される（`NON_ROUTE_DIRS`）ため、`templates/<slug>/` のようなディレクトリに `.tsx` を置くと **`/templates/<slug>/...` という意図しないルートが生え、`vantage check` が `MISSING_DEFAULT_EXPORT` で落ちる**。データファイル（`.ts`）も同じディレクトリに置いてコロケーションを保つ。
+
+### 2. インライン優先 — 薄いラッパ component を作らない
+
+**`data → EChartsOption → <EChart>` だけの薄いチャート component は作らず、`index.tsx` 内のオプションビルダ関数にする。**
+
+```tsx
+// ✅ 推奨: index.tsx 内のオプションビルダ関数 + EChart 直レンダ
+function areaOption(data: TimePoint[]): EChartsOption {
+  return { /* ... */ }
+}
+// JSX 内:
+<EChart option={areaOption(timeSeries)} height="280px" />
+```
+
+チャート整形ヘルパ（`getBaseGrid` / `formatNumber` 等）も同様に `index.tsx` 内へ inline する。
+
+**チャートに色をハードコードしない。** `@squadbase/vantage` v0.2.1 以降、`EChart` は init 時に `--chart-1..5`（系列色）と文字色/境界色トークン（軸・凡例・ツールチップ）を読み、light / dark の切り替えにも追従する。v0.2.2 からはスタイルシートの差し替え（`chart <preset>` の適用や `styles.css` の HMR）も拾い、トークンの実値が変わった時だけ再描画する。`option.color` / `itemStyle.color` / ラベルの `color` を書くと、その分だけテンプレがテーマ差し替え（`vantage-template chart <preset>` や `styles.css` の override）から外れる。**ui-templates では書かない**のが既定 — 意味色（成功=緑・失敗=赤など）を出したいときだけ、その series に限って指定する。`theme` プロップは使わない（渡した時点でトークン追従が完全に止まる）。
+
+### 3. データ層（mock-data / types）は分離する
+
+`mock-data.ts` と `types.ts` は `index.tsx` に inline せず、`components/<slug>/` の別ファイルに保つ。表示ラベル（KPI名・軸名・stage名など）は描画側（`index.tsx`）の literal/const に置き、データ配列には値・id・generic な sample text のみ置く。
+
+### 3-b. API 版テンプレ（`server/api` から配信する場合）
+
+`kpi-chart-simple` はモック配列を直読みせず、**`server/api` から `useApiQuery` で取る**構成になっている。実データ接続までの導線を1本コードで示すためのもので、この構成を採るテンプレは dest の置き場が変わる:
+
+```
+index.tsx                                # useApiQuery + useSearchParam
+components/<slug>/*.tsx                  # 表示コンポーネント
+lib/<slug>/types.ts                      # ★ client と server が共有する型（relabel:false）
+server/api/<endpoint>.ts                 # ★ サンプルデータ + GET ハンドラ（relabel:false）
+```
+
+- **共有型は `components/` ではなく `lib/`** に置く。クライアントは `server/` を import できない（`CLIENT_IMPORTS_SERVER`）ので、両者が参照できる中立な場所が要る。`lib/` もルート走査対象外なので安全。
+- **サンプルデータはサーバー側に置く。** 「実装者が差し替える場所」がハンドラ1箇所に集約され、`KpiSummary` のような payload 型さえ保てばページを触らずに実データへ移行できる。
+- **絞り込みは `useSearchParam` + `useApiQuery` の `search`** で組む。`search` はクエリ文字列とキャッシュキーの両方に入るので、URL を変えれば再取得される。
+- クライアントに見せたいエラーは `HttpError(status, msg)` を throw する。`useApiQuery` の `error` は `ApiError` なのでキャスト不要で `.message` が読める。
+
+新しくテンプレを足すときにこの構成を必須にはしない（UI 骨格の見本市なのでモックのままでよい）。ただし**モックを使うテンプレでも絞り込み状態は `useState` のままでよい** — URL 化は実データに繋ぐ段階の話で、`kpi-chart-simple` がその見本になっている。
+
+### 4. デッドコードを残さない
+
+テンプレに未使用の関数・型・import を残さない。
+
+### 分割してよい例外
+
+**再利用される** / **内部 state・interaction を持つ** / **`index.tsx` が 400〜500 行を超える** のいずれかに当てはまる UI のみ、`components/<slug>/` 配下に切り出してよい。迷ったら inline。
+
+## import 規約（Vantage）
+
+すべての building block は `@squadbase/vantage/*` から import する。`@/` エイリアスは**存在しない**。
+
+| 用途 | import 元 |
+| --- | --- |
+| `PageShell*` / `DashboardCard*` / `EChart` / `EChartsOption` / `DataTable*` / `ColumnDef` / `DateRangePicker` / `FilterBar*` / `FunnelSteps` / `MetricValue` / `TrendIndicator` / `StatusBadge` / `SegmentedControl` / `MultiSelect` / `SearchableSelect` / `SectionHeader` / `AppShell` / `Placeholder` / `Sparkline` | `@squadbase/vantage/components` |
+| `Button` / `Input` / `Badge` / `Tabs*` / `ToggleGroup*` / `Table*` / `Select*` / `Dialog*` / `cn` ほか shadcn プリミティブ | `@squadbase/vantage/ui` |
+| `definePage` | `@squadbase/vantage` |
+| `Link` / `Outlet` / `useParams` / `useSearch` / `useNavigate` / `useRoutes` / `useCurrentRoute` / `useSearchParam` / `useSearchState` | `@squadbase/vantage/router` |
+| `useApiQuery` / `useApiMutation` / `useQuery` / `useMutation` / `apiFetch` | `@squadbase/vantage/query` |
+| `MarkdownRenderer` | `@squadbase/vantage/markdown` |
+
+**禁止**: `echarts` / `@tanstack/*` / `@base-ui/react` / `hono` / `vite` / `tailwindcss` の直接 import。`EChartsOption` は `@squadbase/vantage/components` から、`ColumnDef` も同じくそこから取る。`lucide-react` と `date-fns` の直接 import は可（ベーステンプレートの dependencies に入っている）。
+
+**相対 import は拡張子なしで書く**（`@squadbase/vantage` v0.2.0 で `.js` 指定子の規約は廃止。既存の `.js` 付き import も動くが、新規テンプレでは付けない）。
+
+```tsx
+// index.tsx から
+import { MOCK_SERIES } from "./components/<slug>/mock-data"
+
+// components/<slug>/detail-table.tsx から
+import type { Row } from "./types"
+```
+
+`Placeholder` / `Sparkline` はローカルコピーではなく `@squadbase/vantage/components` から取る（v0.1.1 でフレームワークに入った）。
+
+### Base UI と Radix の差分（`vantage-pitfalls` skill も参照）
+
+Vantage の UI キットは Radix ではなく **Base UI** ベース。移植時に踏みやすい差分:
+
+- `asChild` は**無い** → `render` prop を使う（`<DialogTrigger render={<button />}>`）
+- `ToggleGroup` の `value` は**配列**（単一選択でも `string[]`）
+- `Select` の `onValueChange` は `string | null` を返す
+- `Checkbox` の中間状態は `indeterminate` prop
+
+`Select` の value/label は v0.2.1 で Vantage 側が `SelectItem` の children から集めるようになったので、`items` は書かなくてよい（`SelectItem` を別コンポーネントが返している場合だけ明示する）。
+
+## エントリの必須要件
+
+`index.tsx` は **default export の React component** が必須（無いと `vantage check` が `MISSING_DEFAULT_EXPORT`）。加えてタイトル/説明を `definePage` で宣言する:
+
+```tsx
+import { definePage } from "@squadbase/vantage"
+
+export const page = definePage({
+  title: "KPI + Chart",
+  description: "...",
+  // ナビの表示名。省略時は title が使われる
+  navLabel: "KPI",
+})
+
+export default function Home() { /* ... */ }
+```
+
+`definePage` の値は**ビルド時に静的抽出される**ため、変数・関数呼び出し・テンプレート補間は使えない（リテラルのみ）。
+
+## ソースのオーサリング構造（このリポジトリ側）
+
+```
+ui-templates/<slug>/
+  manifest.json
+  preview-square.png / preview-wide.png
+  pages/index.tsx       → dest: index.tsx                          (replace)
+  lib/mock-data.ts      → dest: components/<slug>/mock-data.ts     (add, relabel:false)
+  lib/types.ts          → dest: components/<slug>/types.ts         (add, relabel:false)
+  components/*.tsx      → dest: components/<slug>/*.tsx            (add)  ※分割した場合のみ
+  server/*.ts           → dest: server/api/*.ts                    (add, relabel:false) ※API 版のみ
+```
+
+API 版（`kpi-chart-simple`）では `lib/types.ts` の dest が `lib/<slug>/types.ts` になり、`lib/mock-data.ts` は無く、代わりに `server/*.ts` を持つ。上の「3-b」を参照。
+
+## manifest.json
+
+```json
+{
+  "name": "<slug>",
+  "description": "...",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "lib/mock-data.ts", "dest": "components/<slug>/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/<slug>/types.ts", "action": "add", "relabel": false }
+  ]
+}
+```
+
+- `files[]` が manifest の全て（`nav[]` は無い）。ベーステンプレートのナビは `useRoutes()` からルート一覧を組むので、ページファイルをコピーすればナビにも載る
+- データファイルには `"relabel": false` を必ず付ける
+
+## 見本市の例外ルール
+
+`ui-templates/` は「UI 構造の見本市」として、レイアウトの幅を意図的に出す。以下の default は意図的に崩してよい:
+
+- **PageShellSummary（insight cards）は必須ではない** — KPI 重視のテンプレ（`kpi-chart-advanced`）のみに残し、他では省く
+- **本体最初の行を KPI カードで始める必要はない** — テーブル中心 / チャート中心 / ファネル中心など、テーマに合わせて開始要素を変える
+- **PageShellHeaderEnd の中身は DateRangePicker 限定ではない** — 検索ボックス、Export ボタン、Filter chips、ステージ選択など
+- **2 カラム（本体 + サイドバー）のレイアウトを使ってよい**
+
+ただし以下は維持する（テンプレ群としての一貫性のため）:
+- `PageShell` / `PageShellHeader` / `PageShellHeading` / `PageShellTitle` の使用
+- `DashboardCard` / `DashboardCardPreset` の使用（raw `Card` ではなく）
+- `EChart` の使用（生の `echarts` を触らない）
+
+## チェックリスト（テンプレ追加・改修時）
+
+1. テンプレ固有ファイルの `dest` は `components/<slug>/` 配下か（`templates/` に `.tsx` を置いていないか）
+2. `@/` エイリアスや `echarts` / `@tanstack/*` の直接 import、`Placeholder` / `Sparkline` のローカル import が残っていないか
+3. 相対 import に `.js` 拡張子が残っていないか（v0.2.0 で規約廃止）
+4. 薄いチャートラッパ component を作っていないか。チャートに色をハードコードしていないか（`option.color` / `itemStyle.color` / `theme`）
+5. `mock-data.ts` / `types.ts` / `server/*.ts` は分離され `relabel:false` が付いているか
+6. 未使用の関数・型・import が残っていないか
+7. 適用先で `npx vantage check` と `npx tsc --noEmit` が通るか
+8. EN/JA 両方を同じ構成に揃えたか
+9. レイアウトを変えたなら `preview-wide.png` (1600x900) / `preview-square.png` (1200x1200) を撮り直したか

package/ui-templates/blank/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "blank",
+  "description": "Blank — Empty PageShell with title and description. The minimal scaffold for building a dashboard from scratch.",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" }
+  ]
+}

package/ui-templates/blank/pages/index.tsx

@@ -0,0 +1,33 @@
+import { definePage } from "@squadbase/vantage"
+import {
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeading,
+  PageShellTitle,
+} from "@squadbase/vantage/components"
+
+export const page = definePage({
+  title: "Blank",
+  description:
+    "Empty PageShell with title and description. The minimal scaffold for building a dashboard from scratch.",
+})
+
+export default function HomePage() {
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[Template] Blank</PageShellTitle>
+          <PageShellDescription>
+            Start building your dashboard here.
+          </PageShellDescription>
+        </PageShellHeading>
+      </PageShellHeader>
+      <PageShellContent>
+        {/* Add content */}
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/blank-ja/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "blank-ja",
+  "description": "[日本語] ブランク — タイトルと説明のみの PageShell。ダッシュボードをゼロから構築するための最小骨格",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" }
+  ]
+}

package/ui-templates/blank-ja/pages/index.tsx

@@ -0,0 +1,33 @@
+import { definePage } from "@squadbase/vantage"
+import {
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeading,
+  PageShellTitle,
+} from "@squadbase/vantage/components"
+
+export const page = definePage({
+  title: "ブランク",
+  description:
+    "タイトルと説明のみの PageShell。ダッシュボードをゼロから構築するための最小骨格",
+})
+
+export default function HomePage() {
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] ブランク</PageShellTitle>
+          <PageShellDescription>
+            ここからダッシュボードの構築を始めましょう。
+          </PageShellDescription>
+        </PageShellHeading>
+      </PageShellHeader>
+      <PageShellContent>
+        {/* コンテンツを追加 */}
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/chart-grid/lib/mock-data.ts

@@ -0,0 +1,139 @@
+import type {
+  TimePoint,
+  BarPoint,
+  ScatterPoint,
+  RadarPoint,
+  HeatmapCell,
+} from "./types"
+
+export const timeSeries: TimePoint[] = [
+  { date: "2024-03-02", series1: 16462, series2: 12092 },
+  { date: "2024-03-03", series1: 17807, series2: 11084 },
+  { date: "2024-03-04", series1: 17272, series2: 13572 },
+  { date: "2024-03-05", series1: 18462, series2: 13897 },
+  { date: "2024-03-06", series1: 19943, series2: 12100 },
+  { date: "2024-03-07", series1: 21026, series2: 13152 },
+  { date: "2024-03-08", series1: 18203, series2: 14502 },
+  { date: "2024-03-09", series1: 20265, series2: 13472 },
+  { date: "2024-03-10", series1: 18075, series2: 13476 },
+  { date: "2024-03-11", series1: 21018, series2: 15075 },
+  { date: "2024-03-12", series1: 20104, series2: 12868 },
+  { date: "2024-03-13", series1: 21755, series2: 15713 },
+  { date: "2024-03-14", series1: 20240, series2: 13282 },
+  { date: "2024-03-15", series1: 20796, series2: 14953 },
+  { date: "2024-03-16", series1: 21397, series2: 14028 },
+  { date: "2024-03-17", series1: 21203, series2: 13791 },
+  { date: "2024-03-18", series1: 19673, series2: 13895 },
+  { date: "2024-03-19", series1: 22335, series2: 16589 },
+  { date: "2024-03-20", series1: 21241, series2: 14266 },
+  { date: "2024-03-21", series1: 22068, series2: 14360 },
+  { date: "2024-03-22", series1: 21903, series2: 14062 },
+  { date: "2024-03-23", series1: 21685, series2: 15876 },
+  { date: "2024-03-24", series1: 21315, series2: 17515 },
+  { date: "2024-03-25", series1: 21435, series2: 14613 },
+  { date: "2024-03-26", series1: 23871, series2: 16287 },
+  { date: "2024-03-27", series1: 22747, series2: 17526 },
+  { date: "2024-03-28", series1: 22262, series2: 15910 },
+  { date: "2024-03-29", series1: 25130, series2: 16666 },
+  { date: "2024-03-30", series1: 23698, series2: 15561 },
+  { date: "2024-03-31", series1: 25719, series2: 15619 },
+]
+
+export const barSeries: BarPoint[] = [
+  { value: 184_320 },
+  { value: 162_480 },
+  { value: 138_750 },
+  { value: 121_900 },
+  { value: 98_640 },
+  { value: 87_220 },
+  { value: 72_410 },
+  { value: 54_220 },
+]
+
+export const scatterPoints: ScatterPoint[] = [
+  { x: 24, y: 750, size: 23, label: "Item 1" },
+  { x: 30, y: 572, size: 23, label: "Item 2" },
+  { x: 79, y: 692, size: 19, label: "Item 3" },
+  { x: 43, y: 585, size: 20, label: "Item 4" },
+  { x: 35, y: 626, size: 13, label: "Item 5" },
+  { x: 90, y: 289, size: 29, label: "Item 6" },
+  { x: 80, y: 851, size: 11, label: "Item 7" },
+  { x: 39, y: 885, size: 13, label: "Item 8" },
+  { x: 79, y: 768, size: 21, label: "Item 9" },
+  { x: 75, y: 873, size: 24, label: "Item 10" },
+  { x: 60, y: 676, size: 29, label: "Item 11" },
+  { x: 67, y: 552, size: 25, label: "Item 12" },
+  { x: 49, y: 876, size: 20, label: "Item 13" },
+  { x: 40, y: 223, size: 23, label: "Item 14" },
+  { x: 73, y: 768, size: 22, label: "Item 15" },
+  { x: 21, y: 186, size: 26, label: "Item 16" },
+  { x: 78, y: 652, size: 22, label: "Item 17" },
+  { x: 37, y: 740, size: 19, label: "Item 18" },
+  { x: 92, y: 827, size: 26, label: "Item 19" },
+  { x: 35, y: 386, size: 9, label: "Item 20" },
+  { x: 60, y: 694, size: 21, label: "Item 21" },
+  { x: 41, y: 324, size: 26, label: "Item 22" },
+  { x: 90, y: 552, size: 12, label: "Item 23" },
+  { x: 81, y: 853, size: 11, label: "Item 24" },
+  { x: 48, y: 702, size: 9, label: "Item 25" },
+  { x: 23, y: 474, size: 15, label: "Item 26" },
+  { x: 41, y: 544, size: 17, label: "Item 27" },
+  { x: 53, y: 387, size: 24, label: "Item 28" },
+]
+
+export const radarAxes: RadarPoint[] = [
+  { current: 82, benchmark: 70 },
+  { current: 91, benchmark: 78 },
+  { current: 64, benchmark: 75 },
+  { current: 88, benchmark: 80 },
+  { current: 73, benchmark: 65 },
+  { current: 79, benchmark: 70 },
+]
+
+export const HEATMAP_X_AXIS = ["0", "1", "2", "3", "4", "5"]
+export const HEATMAP_Y_AXIS = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5", "Row 6", "Row 7"]
+
+export const heatmapCells: HeatmapCell[] = [
+  { x: "0", y: "Row 1", value: 57 },
+  { x: "1", y: "Row 1", value: 25 },
+  { x: "2", y: "Row 1", value: 91 },
+  { x: "3", y: "Row 1", value: 77 },
+  { x: "4", y: "Row 1", value: 96 },
+  { x: "5", y: "Row 1", value: 45 },
+  { x: "0", y: "Row 2", value: 46 },
+  { x: "1", y: "Row 2", value: 32 },
+  { x: "2", y: "Row 2", value: 75 },
+  { x: "3", y: "Row 2", value: 94 },
+  { x: "4", y: "Row 2", value: 83 },
+  { x: "5", y: "Row 2", value: 37 },
+  { x: "0", y: "Row 3", value: 56 },
+  { x: "1", y: "Row 3", value: 22 },
+  { x: "2", y: "Row 3", value: 76 },
+  { x: "3", y: "Row 3", value: 85 },
+  { x: "4", y: "Row 3", value: 79 },
+  { x: "5", y: "Row 3", value: 39 },
+  { x: "0", y: "Row 4", value: 56 },
+  { x: "1", y: "Row 4", value: 12 },
+  { x: "2", y: "Row 4", value: 73 },
+  { x: "3", y: "Row 4", value: 88 },
+  { x: "4", y: "Row 4", value: 95 },
+  { x: "5", y: "Row 4", value: 19 },
+  { x: "0", y: "Row 5", value: 60 },
+  { x: "1", y: "Row 5", value: 17 },
+  { x: "2", y: "Row 5", value: 77 },
+  { x: "3", y: "Row 5", value: 85 },
+  { x: "4", y: "Row 5", value: 81 },
+  { x: "5", y: "Row 5", value: 43 },
+  { x: "0", y: "Row 6", value: 36 },
+  { x: "1", y: "Row 6", value: 56 },
+  { x: "2", y: "Row 6", value: 55 },
+  { x: "3", y: "Row 6", value: 34 },
+  { x: "4", y: "Row 6", value: 20 },
+  { x: "5", y: "Row 6", value: 27 },
+  { x: "0", y: "Row 7", value: 50 },
+  { x: "1", y: "Row 7", value: 44 },
+  { x: "2", y: "Row 7", value: 32 },
+  { x: "3", y: "Row 7", value: 55 },
+  { x: "4", y: "Row 7", value: 46 },
+  { x: "5", y: "Row 7", value: 39 },
+]

package/ui-templates/chart-grid/lib/types.ts

@@ -0,0 +1,31 @@
+export interface TimePoint {
+  date: string
+  series1: number
+  series2: number
+}
+
+export interface BarPoint {
+  value: number
+}
+
+export interface ScatterPoint {
+  x: number
+  y: number
+  size: number
+  label: string
+}
+
+export interface RadarPoint {
+  current: number
+  benchmark: number
+}
+
+export interface HeatmapCell {
+  x: string
+  y: string
+  value: number
+}
+
+export interface DashboardFilters {
+  dateRange: { from: Date | undefined; to: Date | undefined }
+}

package/ui-templates/chart-grid/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "chart-grid",
+  "description": "Chart Grid — Six-chart grid (area, line, bar, scatter, radar, heatmap) with category filter chips in the header. Visualization-only layout that puts charts in the spotlight.",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "lib/mock-data.ts", "dest": "components/chart-grid/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/chart-grid/types.ts", "action": "add", "relabel": false }
+  ]
+}