@squadbase/vantage-template 0.1.1-dev1.470473f → 0.1.1-dev1.7a4f5d9

package/base-template/src/index.tsx

@@ -66,14 +66,18 @@ const CHARTS = [
 ]
 
 export default function HomePage() {
+  // `data-vantage-sample` marks this page as the untouched template sample (the coding
+  // agent looks for it). Remove it together with the sample content.
+  const sampleNote = navigator.language.startsWith("ja")
+    ? "サンプルデータです。お手元のデータに置き換えて始めましょう。"
+    : "Sample data — replace with your own to get started."
+
   return (
     <PageShell>
       <PageShellHeader>
         <PageShellHeading>
           <PageShellTitle>Dashboard</PageShellTitle>
-          <PageShellDescription>
-            Sample data — replace with your own to get started.
-          </PageShellDescription>
+          <PageShellDescription data-vantage-sample="home">{sampleNote}</PageShellDescription>
         </PageShellHeading>
       </PageShellHeader>
 

package/base-template/src/styles.css

@@ -17,6 +17,17 @@
   /* --radius: 0.625rem; */
 }
 
+/* Page typeface. Latin system faces first, then Japanese system faces so kana and
+   kanji do not fall back to a thin locale default. `ui-sans-serif` / `system-ui`
+   come after the Japanese families on purpose: on Japanese Windows they resolve to
+   the condensed Yu Gothic UI, which would otherwise take the kana. Put a Latin
+   webfont in front if you add one, but keep the Japanese families. */
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans",
+    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
+}
+
 /* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
 :root {
   --chart-1: var(--color-blue-600);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1-dev1.470473f",
+  "version": "0.1.1-dev1.7a4f5d9",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -36,19 +36,6 @@
     "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",
@@ -58,7 +45,20 @@
   "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": "7a4f5d9abf8a188105421f02222a69ad9173cffb",
+  "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",
+    "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>
+    </>
+  )
+}