@squadbase/vantage-template 0.1.0 → 0.1.1-dev1.0eaa1f0

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.42c4e48",
+    "@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,21 +1,12 @@
 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"
 
 import { BuildRecovery } from "./components/build-recovery"
 import { UserCard } from "./components/user-card"
 
-/**
- * `AppShell` is router-agnostic and renders nav entries through whatever
- * component it is handed, using an `href` prop. Adapt it to the Vantage router
- * so navigation stays client-side.
- */
-function RouterLink({ href, ...props }: { href: string } & ComponentProps<"a">) {
-  return <Link to={href} {...props} />
-}
-
 /**
  * The nav *is* the route list — adding a page file puts it in the nav, with no
  * second list to keep in sync. Dynamic routes (`sales/[id].tsx`) have no single
@@ -50,6 +41,7 @@ function useNavGroups(): NavGroup[] {
  * 「Something went wrong」のままリロードするまで残る。
  */
 export default function RootLayout() {
+  const navigate = useNavigate()
   return (
     <SquadbaseProvider>
       <AppShell
@@ -57,6 +49,7 @@ export default function RootLayout() {
         groups={useNavGroups()}
         actions={<UserCard />}
         linkComponent={RouterLink}
+        onNavigate={(href) => navigate({ to: href })}
       >
         <BuildRecovery>
           <Outlet />
@@ -65,3 +58,12 @@ export default function RootLayout() {
     </SquadbaseProvider>
   )
 }
+
+/**
+ * `AppShell` is router-agnostic and renders nav entries through whatever
+ * component it is handed, using an `href` prop. Adapt it to the Vantage router
+ * so navigation stays client-side.
+ */
+function RouterLink({ href, ...props }: { href: string } & ComponentProps<"a">) {
+  return <Link to={href} {...props} />
+}

package/base-template/src/components/build-recovery.tsx

@@ -29,6 +29,12 @@ import { Button, Spinner } from "@squadbase/vantage/ui"
  */
 const FRAMEWORK_ERROR_SELECTOR = '[role="alert"] h2'
 
+/** `import.meta.hot` のうち、ここで使う分だけ。 */
+interface ViteHot {
+  on(event: string, cb: () => void): void
+  off?(event: string, cb: () => void): void
+}
+
 /** 書き込みの連鎖が落ち着くのを待ってからリロードする。 */
 const RELOAD_DELAY_MS = 1200
 
@@ -43,6 +49,21 @@ const SETTLE_MS = 5000
 
 const RELOAD_COUNT_KEY = "vantage:build-recovery-reloads"
 
+/**
+ * 書きかけのファイルを下書きとして表示している間、Vantage のクライアントが立てる目印。
+ * 下書き中の描画エラーはフレームワークが直前に通った版へ戻すので、ここでは覆わず、
+ * リロードもしない(リロードすると下書きの表示ごと消える)。
+ */
+declare global {
+  interface Window {
+    __VANTAGE_DRAFT__?: { active: boolean }
+  }
+}
+
+function isDraftActive(): boolean {
+  return window.__VANTAGE_DRAFT__?.active === true
+}
+
 /** コピーしたことが伝わればいいので、確認表示はすぐ元に戻す。 */
 const COPIED_FEEDBACK_MS = 2000
 
@@ -90,6 +111,7 @@ export function RecoveringState({ error }: { error?: unknown }) {
       const attempts = readReloadCount()
       if (attempts < MAX_RELOADS) {
         const timer = setTimeout(() => {
+          if (isDraftActive()) return
           writeReloadCount(attempts + 1)
           window.location.reload()
         }, RELOAD_DELAY_MS)
@@ -181,6 +203,11 @@ export function BuildRecovery({ children }: { children: ReactNode }) {
     const host = hostRef.current
     if (!host) return
     const sync = () => {
+      // 下書きの表示中は覆わない。終わった時点でエラー画面が残っていれば、次の sync で覆う。
+      if (isDraftActive()) {
+        setMessage(null)
+        return
+      }
       const heading = host.querySelector(FRAMEWORK_ERROR_SELECTOR)
       // 覆って見えなくする以上、支援技術にも読ませない。`role="alert"` のままだと
       // 「Something went wrong」がそのまま読み上げられてしまう。属性は observe の
@@ -192,7 +219,16 @@ export function BuildRecovery({ children }: { children: ReactNode }) {
     sync()
     const observer = new MutationObserver(sync)
     observer.observe(host, { childList: true, subtree: true })
-    return () => observer.disconnect()
+    // 下書きの有無が変わったときに見直す(目印の更新を待つため 1 tick 遅らせる)。
+    const onDraftState = () => setTimeout(sync, 0)
+    // 生成される `ImportMeta` は `env` しか宣言しない(HMR の型を入れるとアプリが vite/client を
+    // 入れたときに二重宣言になる)ので、ここだけ局所キャストで読む。
+    const hot = (import.meta as unknown as { hot?: ViteHot }).hot
+    hot?.on("vantage:draft-state", onDraftState)
+    return () => {
+      observer.disconnect()
+      hot?.off?.("vantage:draft-state", onDraftState)
+    }
   }, [])
 
   const crashed = message !== null

package/base-template/src/components/user-card.tsx

@@ -11,6 +11,16 @@ import {
   cn,
 } from "@squadbase/vantage/ui"
 
+export function UserCard() {
+  const userState = useUser()
+
+  if (userState.status === "success") {
+    return <UserInfo user={userState.data} />
+  }
+
+  return <UserInfoFallback />
+}
+
 /**
  * Squadbase-authenticated user chip for the app shell.
  *
@@ -120,13 +130,3 @@ function UserInfoFallback() {
     </div>
   )
 }
-
-export function UserCard() {
-  const userState = useUser()
-
-  if (userState.status === "success") {
-    return <UserInfo user={userState.data} />
-  }
-
-  return <UserInfoFallback />
-}

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.0eaa1f0",
   "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/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>
+    </>
+  )
+}