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

package/README.md

@@ -14,7 +14,7 @@ npx @squadbase/vantage-template <command> [options]
 
 #### `init`
 
-Initialize a new Vantage project in the current directory. Copies the base template — `src/index.tsx`, `src/_layout.tsx`, `src/_404.tsx`, `src/_error.tsx`, `src/styles.css`, `server/api/`, `tsconfig.json`, `squadbase.yml`, a neutral `DESIGN.md` (the design intent, by token name — user-owned; the `vantage-design` skill keeps it in step with `src/styles.css`), plus the agent guidance in `AGENTS.md` (and `agents/`, when the framework ships per-type knowledge files) and `.squadbase/skills/` — and installs dependencies.
+Initialize a new Vantage project in the current directory. Copies the base template — `src/index.tsx`, `src/_layout.tsx`, `src/_404.tsx`, `src/_error.tsx`, `src/styles.css`, `server/api/`, `tsconfig.json`, `squadbase.yml`, a starter `DESIGN.md` (the design intent, by token name — user-owned; the `vantage-design` skill keeps it in step with `src/styles.css`), plus the agent guidance in `AGENTS.md` (and `agents/`, when the framework ships per-type knowledge files) and `.squadbase/skills/` — and installs dependencies.
 
 ```bash
 npx @squadbase/vantage-template init

package/base-template/.squadbase/skills/vantage-design/SKILL.md

@@ -106,10 +106,12 @@ node <このスキルの場所>/scripts/contrast.mjs '<文字色>' '<背景色>'
 見出しだけに使う色は 3:1 以上。`var(--color-*)` で書いた値は Tailwind の `oklch()` 値に直してから渡す。
 落ちたら明度を調整して、提案に戻らずに直してよい(直したことは報告する)。
 
-### 5. プレビューを見せる
+### 5. プレビューを見せる(省略しない)
 
-- 使い捨てページ `src/design-preview.tsx`(`src/` が無ければルート直下)を作る: KPI カード 3〜4 枚、
-  `EChart` の棒または折れ線 1 つ(5 系列)、主要ボタン・破壊的ボタン、補足の文字。すべてトークンで書く。
+- **必ず**使い捨てページ `src/design-preview.tsx`(`src/` が無ければルート直下)を作る: KPI カード
+  3〜4 枚、`EChart` の棒または折れ線 1 つ(5 系列)、主要ボタン・破壊的ボタン、補足の文字。すべて
+  トークンで書く。既存ページやホームで代用しない ― ホームなどの画面はチャートやボタンを持たないことが
+  多く、変更後の色が見えない。
 - スライドがあるなら既存のデッキの URL を案内する(プレビュー用のデッキは作らない)。
 - **ユーザーが承認したら `src/design-preview.tsx` を削除する。** 残すとナビに出る。
 
@@ -121,6 +123,14 @@ npx vantage check
 
 `HARDCODED_COLOR`(ページ内の色コード)や `DESIGN_MD_TOO_LONG` が出たらその場で直す。
 
+### 7. 完了を報告する
+
+報告には、更新したファイル(`DESIGN.md` / `styles.css`)に加えて次を**必ず**入れる。
+
+- プレビューページのパスと URL(`src/design-preview.tsx` → `/design-preview`)。
+- 「ホームなど既存の画面は一部の色しか使っていないので、変更が見えないことがある。配色はプレビュー
+  ページで確認してほしい」という一言。
+
 ## 会話中の指示との関係
 
 - 会話中の個別の指示(「このグラフだけ赤で」)は `DESIGN.md` より優先する。そのページだけ直せばよい。

package/base-template/.squadbase/skills/vantage-design/references/presets.md

@@ -1,38 +1,53 @@
 # 初期デザインのプリセット
 
 プロジェクト作成時に選ぶ 4 つの出発点。**id(`default` / `calm` / `vivid` / `mono`)はプロジェクト
-作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + 必要なら
-`--primary` の上書き + `DESIGN.md` の差分」でできている。
+作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + `--primary` +
+`DESIGN.md` の差分」でできている。**`--primary` はどのプリセットでも必ず書く**(無彩色のプリセットも
+値を明示する)。チャートだけ変えるとホームのような色の少ない画面では見た目が変わらず、別のプリセットから
+切り替えたときに前の `--primary` が残るため。
 
 適用の手順は共通:
 
 1. `npx @squadbase/vantage-template chart <チャートのプリセット>` で `styles.css` のマーカーブロックを
    差し替える。**マーカーブロックの中(`--chart-1..5`)は手で編集しない** ― コマンドの生成物で、
    次の適用で消える。
-2. `--primary` の上書きがあるプリセットは、`styles.css` のマーカーの**外**(先頭の `:root` ブロック)に
-   `:root` と `.dark, [data-theme="dark"]` の両方を書く。
+2. 各プリセットの `--primary` / `--primary-foreground` を、`styles.css` のマーカーの**外**(先頭の
+   `:root` ブロック)に `:root` と `.dark, [data-theme="dark"]` の両方で書く。既にある `--primary` は置き換える。
 3. `DESIGN.md` を `format.md` の雛形から作り、下の「DESIGN.md の差分」の行だけを書き換える。
 4. `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
 
 | id | トーン | チャートのプリセット | `--primary` |
 | --- | --- | --- | --- |
-| `default` | 中立・無彩色のベース。データだけが色を持つ | `blue` | 上書きしない(既定の無彩色) |
-| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 任意で深い青 |
-| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ |
-| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | 上書きしない |
+| `default` | 無彩色のベース。色を持つのはデータ(`blue` チャート)だけ | `blue` | 無彩色(`theme.css` の既定値を明示) |
+| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 深い青(スカイ 700 / 300) |
+| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ(オレンジ 700 / 400) |
+| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | ジンク 900 / 200 |
 
 ## `default`
 
 - トーン: 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。装飾より読みやすさ。
 - チャート: `blue`(青 → ティール → フクシア → バイオレット → グレー)。
-- `styles.css`: チャートのブロックだけ。`--primary` は触らない。
+- `--primary`(フレームワークの既定と同じ無彩色。他のプリセットから戻すときのために明示する):
+
+  ```css
+  :root {
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+  }
+  ```
+
 - `DESIGN.md`: 雛形そのまま(`format.md` の雛形は `default` を説明している)。
 
 ## `calm`
 
 - トーン: 寒色でまとめた静かな画面。強調は控えめにし、数字と罫線で読ませる。
 - チャート: `ocean`(スカイ → シアン → インディゴ → ティール → スレート)。
-- `--primary`(任意。ボタンにも色を持たせたいときだけ):
+- `--primary`(チャートのスカイに揃えた深い青):
 
   ```css
   :root {
@@ -76,7 +91,20 @@
 
 - トーン: 白黒と灰色だけ。色で意味を運ばず、太さ・順番・ラベルで読ませる。
 - チャート: `mono`(ジンク 900 → 200。ダークでは反転)。
-- `styles.css`: チャートのブロックだけ。`--primary` は触らない(既定が無彩色)。
+- `--primary`(チャートの両端と同じジンク):
+
+  ```css
+  :root {
+    --primary: var(--color-zinc-900);
+    --primary-foreground: oklch(0.985 0 0);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --primary: var(--color-zinc-200);
+    --primary-foreground: oklch(0.205 0 0);
+  }
+  ```
+
 - `DESIGN.md` の差分: トーンを上の文に。強調 = `--chart-1`(最も濃い灰)。良い = 専用色なし(▲ と
   符号)、悪い = `--destructive`(**画面で唯一の有彩色**として使う)。チャートは系列を 3 つまでにし、
   それ以上は直接ラベルを付ける。禁止: 隣り合う `--chart-4` と `--chart-5`(明度差が小さい)。

package/base-template/bun.lock

@@ -6,7 +6,7 @@
       "name": "vibe-app",
       "dependencies": {
         "@squadbase/react": "^0.1.0",
-        "@squadbase/vantage": "0.6.1-dev.90c1a41",
+        "@squadbase/vantage": "0.6.1-dev.2d25e94",
         "@squadbase/vantage-sdk": "^0.1.0",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.468.0",
@@ -204,7 +204,7 @@
 
     "@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=="],
 
-    "@squadbase/vantage": ["@squadbase/vantage@0.6.1-dev.90c1a41", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.0.8", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.2", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.0.3", "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.5", "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", "streamdown": "^2.5.0", "tailwind-merge": "^3.0.0", "tailwindcss": "^4.3.2", "tw-animate-css": "^1.0.0", "vite": "^8.1.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0" }, "bin": { "vantage": "dist/cli.js" } }, "sha512-+LhC/YVfImlaC/zEUMt3cbLrljjtu5exRkPhgev9SHarnHeYzHdUmLAYaPJR4k0qMq4vWtrmXFRCya66aWrkpQ=="],
+    "@squadbase/vantage": ["@squadbase/vantage@0.6.1-dev.2d25e94", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.0.8", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.2", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.0.3", "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.5", "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", "streamdown": "^2.5.0", "tailwind-merge": "^3.0.0", "tailwindcss": "^4.3.2", "tw-animate-css": "^1.0.0", "vite": "^8.1.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0" }, "bin": { "vantage": "dist/cli.js" } }, "sha512-ZiccfVywXZ8G3Rbbfzm5tDrzWlc5T4Yahd4uYKBDCFMP1ygT1Pspew01k+6L5kzsYCQKGPOBx2IFFhqvA7aBXQ=="],
 
     "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.0", "", {}, "sha512-5dknrb6wkFIHeHWf6SsOL0gtcTxr5+WZWgBxGSj3UlEBt2l4JKNZJ7T7DsXE1vUq9WxfLryrfBkEf3sEHGO9yQ=="],
 

package/base-template/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.1-dev.90c1a41",
+    "@squadbase/vantage": "0.6.1-dev.2d25e94",
     "@squadbase/vantage-sdk": "^0.1.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",

package/base-template/src/index.tsx

@@ -1,6 +1,7 @@
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
+  EChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -8,6 +9,8 @@ import {
   PageShellHeading,
   PageShellTitle,
   Placeholder,
+  Sparkline,
+  type EChartsOption,
 } from "@squadbase/vantage/components"
 
 export const page = definePage({
@@ -17,13 +20,49 @@ export const page = definePage({
 })
 
 const METRICS = [
-  { label: "Metric 1", value: "1,234" },
-  { label: "Metric 2", value: "5,678" },
-  { label: "Metric 3", value: "90.1%" },
-  { label: "Metric 4", value: "$12.3k" },
+  { label: "Metric 1", value: "1,234", trend: [3, 4, 3, 5, 6, 5, 7] },
+  { label: "Metric 2", value: "5,678", trend: [6, 5, 6, 4, 5, 6, 6] },
+  { label: "Metric 3", value: "90.1%", trend: [2, 3, 5, 4, 6, 7, 8] },
+  { label: "Metric 4", value: "$12.3k", trend: [5, 6, 4, 6, 5, 7, 6] },
 ]
 
-const CHARTS = ["Chart 1", "Chart 2"]
+// Sample charts. `EChart` paints series with `--chart-1..5` and the sparklines
+// use `--primary` (both from `styles.css`), so a theme change shows up here.
+const BAR_OPTION: EChartsOption = {
+  legend: { top: 0 },
+  grid: { top: 36, right: 8, bottom: 24, left: 36 },
+  xAxis: { type: "category", data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] },
+  yAxis: { type: "value" },
+  series: [
+    { name: "Series A", type: "bar", data: [12, 18, 15, 22, 26, 24] },
+    { name: "Series B", type: "bar", data: [8, 11, 13, 12, 16, 19] },
+    { name: "Series C", type: "bar", data: [5, 7, 6, 9, 8, 11] },
+  ],
+}
+
+const PIE_OPTION: EChartsOption = {
+  legend: { bottom: 0 },
+  series: [
+    {
+      type: "pie",
+      radius: ["45%", "70%"],
+      center: ["50%", "45%"],
+      label: { show: false },
+      data: [
+        { name: "Category A", value: 35 },
+        { name: "Category B", value: 25 },
+        { name: "Category C", value: 18 },
+        { name: "Category D", value: 12 },
+        { name: "Category E", value: 10 },
+      ],
+    },
+  ],
+}
+
+const CHARTS = [
+  { title: "Chart 1", option: BAR_OPTION },
+  { title: "Chart 2", option: PIE_OPTION },
+]
 
 export default function HomePage() {
   return (
@@ -42,14 +81,20 @@ export default function HomePage() {
           {METRICS.map((metric) => (
             <DashboardCardPreset key={metric.label} title={metric.label}>
               <Placeholder className="text-2xl font-bold">{metric.value}</Placeholder>
+              <Sparkline
+                className="mt-2"
+                data={metric.trend.map((value) => ({ value }))}
+                color="text-primary"
+                area
+              />
             </DashboardCardPreset>
           ))}
         </section>
 
         <section className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          {CHARTS.map((title) => (
-            <DashboardCardPreset key={title} title={title}>
-              <Placeholder className="h-64 w-full" />
+          {CHARTS.map((chart) => (
+            <DashboardCardPreset key={chart.title} title={chart.title}>
+              <EChart option={chart.option} height={256} ariaLabel={chart.title} />
             </DashboardCardPreset>
           ))}
         </section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.0-dev.0faf4cb",
+  "version": "0.1.0-dev.3f759a0",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",