@squadbase/vantage-template 0.1.0 → 0.1.1-dev1.3f269fd

package/base-template/package.json

@@ -12,17 +12,17 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.1",
-    "@squadbase/vantage-sdk": "0.1.1",
+    "@squadbase/vantage": "0.6.2-dev1.b332e5a",
+    "@squadbase/vantage-sdk": "0.1.1-dev1.28afad5",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "devDependencies": {
     "@types/node": "^22.15.0",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "typescript": "~5.7.0"
   }
 }

package/base-template/squadbase.yml

@@ -3,3 +3,4 @@ version: "1"
 build:
   framework: squadbase-vantage
   runtime: node20
+  package_manager: bun

package/base-template/src/_layout.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react"
 import { SquadbaseProvider } from "@squadbase/react"
-import { Link, Outlet, useCurrentRoute, useRoutes } from "@squadbase/vantage/router"
+import { Link, Outlet, useCurrentRoute, useNavigate, useRoutes } from "@squadbase/vantage/router"
 import { AppShell } from "@squadbase/vantage/components"
 import type { NavGroup } from "@squadbase/vantage/components"
 
@@ -50,6 +50,7 @@ function useNavGroups(): NavGroup[] {
  * 「Something went wrong」のままリロードするまで残る。
  */
 export default function RootLayout() {
+  const navigate = useNavigate()
   return (
     <SquadbaseProvider>
       <AppShell
@@ -57,6 +58,7 @@ export default function RootLayout() {
         groups={useNavGroups()}
         actions={<UserCard />}
         linkComponent={RouterLink}
+        onNavigate={(href) => navigate({ to: href })}
       >
         <BuildRecovery>
           <Outlet />

package/base-template/src/index.tsx

@@ -17,6 +17,7 @@ export const page = definePage({
   title: "Dashboard",
   description: "Sample data — replace with your own to get started.",
   navLabel: "Home",
+  placeholder: true,
 })
 
 const METRICS = [
@@ -65,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,15 @@
   /* --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. Put a Latin webfont in front if
+   you add one, but keep the Japanese families. */
+body {
+  font-family:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans",
+    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
+}
+
 /* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
 :root {
   --chart-1: var(--color-blue-600);

package/dist/index.js

@@ -1022,27 +1022,36 @@ function initProject(options) {
     applyChartPreset(targetDir, options.chart);
     log("cyan", `  chart preset: ${options.chart}`);
   }
+  const packageManager = isBunAvailable() ? "bun" : "npm";
   if (options.skipInstall) {
     log("green", "\nProject initialized successfully!");
     log("dim", "\nNext steps:");
-    log("dim", "  npm install");
-    log("dim", "  npm run dev");
+    log("dim", `  ${packageManager} install`);
+    log("dim", `  ${packageManager} run dev`);
     return;
   }
-  log("green", "\nInstalling dependencies...");
-  const install = spawnSync("npm", ["install"], {
+  log("green", `
+Installing dependencies with ${packageManager}...`);
+  const install = spawnSync(packageManager, ["install"], {
     cwd: targetDir,
     stdio: "inherit",
     shell: process.platform === "win32"
   });
   if (install.error || install.status !== 0) {
     log("red", "\nDependency installation failed.");
-    log("yellow", "Run 'npm install' manually in the project directory.");
+    log("yellow", `Run '${packageManager} install' manually in the project directory.`);
     process.exit(1);
   }
   log("green", "\nProject initialized successfully!");
   log("dim", "\nNext steps:");
-  log("dim", "  npm run dev");
+  log("dim", `  ${packageManager} run dev`);
+}
+function isBunAvailable() {
+  const probe = spawnSync("bun", ["--version"], {
+    stdio: "ignore",
+    shell: process.platform === "win32"
+  });
+  return !probe.error && probe.status === 0;
 }
 
 // src/commands/list.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.0",
+  "version": "0.1.1-dev1.3f269fd",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -42,7 +42,7 @@
     "type-check": "tsc",
     "agents": "node scripts/build-agents.cjs",
     "agents:check": "node scripts/build-agents.cjs --check",
-    "template:install": "npm --prefix template ci",
+    "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",

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

@@ -111,7 +111,7 @@ function DashboardBody({ data }: { data: KpiSummary }) {
         {data.kpis.map((kpi) => {
           const { label, icon: Icon, format } = KPI_META[kpi.id]
           return (
-            <DashboardCard key={kpi.id}>
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
               <DashboardCardHeader>
                 <DashboardCardTitle className="text-muted-foreground">
                   {label}
@@ -141,11 +141,11 @@ function DashboardBody({ data }: { data: KpiSummary }) {
         })}
       </div>
 
-      <DashboardCardPreset title="Trend" description="Values over the selected period">
+      <DashboardCardPreset data-sq-ref="trend" title="Trend" description="Values over the selected period">
         <EChart option={trendOption(data.trend)} height="320px" />
       </DashboardCardPreset>
 
-      <DashboardCardPreset title="Top items" description="Ranked by value">
+      <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

@@ -111,7 +111,7 @@ function DashboardBody({ data }: { data: KpiSummary }) {
         {data.kpis.map((kpi) => {
           const { label, icon: Icon, format } = KPI_META[kpi.id]
           return (
-            <DashboardCard key={kpi.id}>
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
               <DashboardCardHeader>
                 <DashboardCardTitle className="text-muted-foreground">
                   {label}
@@ -141,11 +141,11 @@ function DashboardBody({ data }: { data: KpiSummary }) {
         })}
       </div>
 
-      <DashboardCardPreset title="トレンド" description="選択期間の値">
+      <DashboardCardPreset data-sq-ref="trend" title="トレンド" description="選択期間の値">
         <EChart option={trendOption(data.trend)} height="320px" />
       </DashboardCardPreset>
 
-      <DashboardCardPreset title="上位項目" description="値で並べ替え">
+      <DashboardCardPreset data-sq-ref="top-items" title="上位項目" description="値で並べ替え">
         <TopItemsTable data={data.topItems} />
       </DashboardCardPreset>
     </>