@squadbase/vantage-template 0.1.1 → 0.2.0-stg.3618932

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1",
+  "version": "0.2.0-stg.3618932",
   "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": "npm --prefix template ci",
-    "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": "3618932d3decca096c0eb3a505149570cc6cddbd",
+  "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,54 +104,6 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90 days", value: "90d" },
 ]
 
-function DashboardBody({ data }: { data: KpiSummary }) {
-  return (
-    <>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {data.kpis.map((kpi) => {
-          const { label, icon: Icon, format } = KPI_META[kpi.id]
-          return (
-            <DashboardCard key={kpi.id}>
-              <DashboardCardHeader>
-                <DashboardCardTitle className="text-muted-foreground">
-                  {label}
-                </DashboardCardTitle>
-                <DashboardCardAction>
-                  <Icon className="size-4 text-muted-foreground" />
-                </DashboardCardAction>
-              </DashboardCardHeader>
-              <DashboardCardContent>
-                <Placeholder className="text-2xl font-bold">
-                  {format(kpi.value)}
-                </Placeholder>
-                <div className="mt-2">
-                  <Placeholder className="text-sm font-medium">
-                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
-                  </Placeholder>
-                </div>
-                <Sparkline
-                  data={kpi.sparklineData.map((v) => ({ value: v }))}
-                  height={32}
-                  area
-                  className="mt-3"
-                />
-              </DashboardCardContent>
-            </DashboardCard>
-          )
-        })}
-      </div>
-
-      <DashboardCardPreset title="Trend" description="Values over the selected period">
-        <EChart option={trendOption(data.trend)} height="320px" />
-      </DashboardCardPreset>
-
-      <DashboardCardPreset title="Top items" description="Ranked by value">
-        <TopItemsTable data={data.topItems} />
-      </DashboardCardPreset>
-    </>
-  )
-}
-
 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.
@@ -198,3 +150,51 @@ export default function HomePage() {
     </PageShell>
   )
 }
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset data-sq-ref="trend" title="Trend" description="Values over the selected period">
+        <EChart option={trendOption(data.trend)} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset data-sq-ref="top-items" title="Top items" description="Ranked by value">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}

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

@@ -104,54 +104,6 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90日", value: "90d" },
 ]
 
-function DashboardBody({ data }: { data: KpiSummary }) {
-  return (
-    <>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {data.kpis.map((kpi) => {
-          const { label, icon: Icon, format } = KPI_META[kpi.id]
-          return (
-            <DashboardCard key={kpi.id}>
-              <DashboardCardHeader>
-                <DashboardCardTitle className="text-muted-foreground">
-                  {label}
-                </DashboardCardTitle>
-                <DashboardCardAction>
-                  <Icon className="size-4 text-muted-foreground" />
-                </DashboardCardAction>
-              </DashboardCardHeader>
-              <DashboardCardContent>
-                <Placeholder className="text-2xl font-bold">
-                  {format(kpi.value)}
-                </Placeholder>
-                <div className="mt-2">
-                  <Placeholder className="text-sm font-medium">
-                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
-                  </Placeholder>
-                </div>
-                <Sparkline
-                  data={kpi.sparklineData.map((v) => ({ value: v }))}
-                  height={32}
-                  area
-                  className="mt-3"
-                />
-              </DashboardCardContent>
-            </DashboardCard>
-          )
-        })}
-      </div>
-
-      <DashboardCardPreset title="トレンド" description="選択期間の値">
-        <EChart option={trendOption(data.trend)} height="320px" />
-      </DashboardCardPreset>
-
-      <DashboardCardPreset title="上位項目" description="値で並べ替え">
-        <TopItemsTable data={data.topItems} />
-      </DashboardCardPreset>
-    </>
-  )
-}
-
 export default function HomePage() {
   // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
   // そのまま共有すれば相手も同じ画面を見られる。
@@ -198,3 +150,51 @@ export default function HomePage() {
     </PageShell>
   )
 }
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset data-sq-ref="trend" title="トレンド" description="選択期間の値">
+        <EChart option={trendOption(data.trend)} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset data-sq-ref="top-items" title="上位項目" description="値で並べ替え">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}

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