@squadbase/vantage-template 0.1.1-dev1.ac4fa22 → 0.1.1-dev1.bb2f95a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1-dev1.ac4fa22",
+  "version": "0.1.1-dev1.bb2f95a",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -36,29 +36,32 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "scripts": {
-    "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
-    "build": "npm run sync-base && tsup",
-    "type-check": "tsc",
-    "agents": "node scripts/build-agents.cjs",
-    "agents:check": "node scripts/build-agents.cjs --check",
-    "template:install": "bun install --cwd template --frozen-lockfile",
-    "template:build": "npm --prefix template run build",
-    "prepublishOnly": "npm run agents:check && npm run build",
-    "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",
-    "dev": "node scripts/dev.mjs",
-    "screenshot": "node scripts/screenshot.mjs"
-  },
   "devDependencies": {
     "@types/node": "^22.15.0",
     "playwright": "^1.49.0",
     "tsup": "^8.4.0",
-    "typescript": "~5.7.0"
+    "typescript": "~5.7.0",
+    "vitest": "^5.0.5",
+    "@squadbase/squadkit": "0.0.0"
   },
   "optionalDependencies": {
     "@ai-sdk/anthropic": "^2.0.0",
     "@ai-sdk/google": "^2.0.0",
-    "@ai-sdk/openai": "^2.0.0",
+    "@ai-sdk/openai": "2.0.122",
     "ai": "^5.0.52"
+  },
+  "gitHead": "bb2f95a39a1a3f6b111cea5f59b677f4f92b9037",
+  "scripts": {
+    "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
+    "build": "pnpm run sync-base && tsup",
+    "type-check": "tsc",
+    "test": "vitest run",
+    "agents": "node scripts/build-agents.cjs",
+    "agents:check": "node scripts/build-agents.cjs --check",
+    "template:install": "bun install --cwd template --frozen-lockfile",
+    "template:build": "bun run --cwd template build",
+    "release": "pnpm publish --@squadbase:registry=https://registry.npmjs.org",
+    "dev": "node scripts/dev.mjs",
+    "screenshot": "node scripts/screenshot.mjs"
   }
-}
+}

package/ui-templates/CLAUDE.md

@@ -96,6 +96,8 @@ server/api/<endpoint>.ts                 # ★ サンプルデータ + GET ハ
 | --- | --- |
 | `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` |
+
+型付きチャート(`LineChart` / `AreaChart` / `BarChart` / `DonutChart` / `BarList` / `CategoryBar` / `ProgressCircle` / `Tracker`、`@squadbase/vantage/components`)と `Avatar` / `Pagination` / `RadioGroup` / `AlertDialog` / `Drawer` / `Toaster` / `Field` / `Combobox` / `HoverCard` / `Kbd`(`@squadbase/vantage/ui`)は 0.6.3 で入った。雛形の依存が `^0.5.3` の間は使わない(上の EChart の書き方のまま)。
 | `definePage` | `@squadbase/vantage` |
 | `Link` / `Outlet` / `useParams` / `useSearch` / `useNavigate` / `useRoutes` / `useCurrentRoute` / `useSearchParam` / `useSearchState` | `@squadbase/vantage/router` |
 | `useApiQuery` / `useApiMutation` / `useQuery` / `useMutation` / `apiFetch` | `@squadbase/vantage/query` |

package/ui-templates/kpi-chart-simple/pages/index.tsx

@@ -104,6 +104,53 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90 days", value: "90d" },
 ]
 
+export default function HomePage() {
+  // Filter state belongs in the URL rather than `useState`: it survives a
+  // reload, and a pasted link reproduces exactly what you were looking at.
+  const [range, setRange] = useSearchParam("range", "30d")
+
+  // `search` goes into the query string *and* the cache key, so changing the
+  // range refetches instead of serving the previous window.
+  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[Template] Performance overview</PageShellTitle>
+          <PageShellDescription>
+            Key metrics and trends for the selected period.
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <SegmentedControl
+            options={RANGE_OPTIONS}
+            value={range}
+            onChange={setRange}
+            ariaLabel="Period"
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        {summary.isPending ? (
+          <Loading />
+        ) : summary.isError ? (
+          // `summary.error` is an `ApiError`: `message` is the text the handler
+          // passed to `HttpError`, so there is no cast and no generic wording.
+          <ErrorState
+            title="Could not load the dashboard"
+            message={summary.error.message}
+            action={<Button onClick={() => void summary.refetch()}>Retry</Button>}
+          />
+        ) : (
+          <DashboardBody data={summary.data} />
+        )}
+      </PageShellContent>
+    </PageShell>
+  )
+}
+
 function DashboardBody({ data }: { data: KpiSummary }) {
   return (
     <>
@@ -151,50 +198,3 @@ function DashboardBody({ data }: { data: KpiSummary }) {
     </>
   )
 }
-
-export default function HomePage() {
-  // Filter state belongs in the URL rather than `useState`: it survives a
-  // reload, and a pasted link reproduces exactly what you were looking at.
-  const [range, setRange] = useSearchParam("range", "30d")
-
-  // `search` goes into the query string *and* the cache key, so changing the
-  // range refetches instead of serving the previous window.
-  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
-
-  return (
-    <PageShell>
-      <PageShellHeader>
-        <PageShellHeading>
-          <PageShellTitle>[Template] Performance overview</PageShellTitle>
-          <PageShellDescription>
-            Key metrics and trends for the selected period.
-          </PageShellDescription>
-        </PageShellHeading>
-        <PageShellHeaderEnd>
-          <SegmentedControl
-            options={RANGE_OPTIONS}
-            value={range}
-            onChange={setRange}
-            ariaLabel="Period"
-          />
-        </PageShellHeaderEnd>
-      </PageShellHeader>
-
-      <PageShellContent className="space-y-6">
-        {summary.isPending ? (
-          <Loading />
-        ) : summary.isError ? (
-          // `summary.error` is an `ApiError`: `message` is the text the handler
-          // passed to `HttpError`, so there is no cast and no generic wording.
-          <ErrorState
-            title="Could not load the dashboard"
-            message={summary.error.message}
-            action={<Button onClick={() => void summary.refetch()}>Retry</Button>}
-          />
-        ) : (
-          <DashboardBody data={summary.data} />
-        )}
-      </PageShellContent>
-    </PageShell>
-  )
-}

package/ui-templates/kpi-chart-simple-ja/pages/index.tsx

@@ -104,6 +104,53 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90日", value: "90d" },
 ]
 
+export default function HomePage() {
+  // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
+  // そのまま共有すれば相手も同じ画面を見られる。
+  const [range, setRange] = useSearchParam("range", "30d")
+
+  // search はクエリ文字列とキャッシュキーの両方に入るので、期間を変えると
+  // 前の期間のデータを返さずに再取得される。
+  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] パフォーマンス概要</PageShellTitle>
+          <PageShellDescription>
+            選択期間の主要指標とトレンド。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <SegmentedControl
+            options={RANGE_OPTIONS}
+            value={range}
+            onChange={setRange}
+            ariaLabel="期間"
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        {summary.isPending ? (
+          <Loading />
+        ) : summary.isError ? (
+          // summary.error は ApiError。message にはハンドラが HttpError に
+          // 渡した文言がそのまま入るので、キャストも汎用文言も要らない。
+          <ErrorState
+            title="ダッシュボードを読み込めませんでした"
+            message={summary.error.message}
+            action={<Button onClick={() => void summary.refetch()}>再試行</Button>}
+          />
+        ) : (
+          <DashboardBody data={summary.data} />
+        )}
+      </PageShellContent>
+    </PageShell>
+  )
+}
+
 function DashboardBody({ data }: { data: KpiSummary }) {
   return (
     <>
@@ -151,50 +198,3 @@ function DashboardBody({ data }: { data: KpiSummary }) {
     </>
   )
 }
-
-export default function HomePage() {
-  // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
-  // そのまま共有すれば相手も同じ画面を見られる。
-  const [range, setRange] = useSearchParam("range", "30d")
-
-  // search はクエリ文字列とキャッシュキーの両方に入るので、期間を変えると
-  // 前の期間のデータを返さずに再取得される。
-  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
-
-  return (
-    <PageShell>
-      <PageShellHeader>
-        <PageShellHeading>
-          <PageShellTitle>[テンプレート] パフォーマンス概要</PageShellTitle>
-          <PageShellDescription>
-            選択期間の主要指標とトレンド。
-          </PageShellDescription>
-        </PageShellHeading>
-        <PageShellHeaderEnd>
-          <SegmentedControl
-            options={RANGE_OPTIONS}
-            value={range}
-            onChange={setRange}
-            ariaLabel="期間"
-          />
-        </PageShellHeaderEnd>
-      </PageShellHeader>
-
-      <PageShellContent className="space-y-6">
-        {summary.isPending ? (
-          <Loading />
-        ) : summary.isError ? (
-          // summary.error は ApiError。message にはハンドラが HttpError に
-          // 渡した文言がそのまま入るので、キャストも汎用文言も要らない。
-          <ErrorState
-            title="ダッシュボードを読み込めませんでした"
-            message={summary.error.message}
-            action={<Button onClick={() => void summary.refetch()}>再試行</Button>}
-          />
-        ) : (
-          <DashboardBody data={summary.data} />
-        )}
-      </PageShellContent>
-    </PageShell>
-  )
-}

package/base-template/DESIGN.md

@@ -1,108 +0,0 @@
-<!--
-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 チャート・円グラフの多用・装飾目的のグラデーション。