@squadbase/vantage-template 0.1.1 → 0.2.0-dev1.0c136ab

package/base-template/bunfig.toml

@@ -0,0 +1,5 @@
+# サプライチェーン対策: 公開から 48 時間(172800 秒)未満の版は install で解決しない。
+# 自社パッケージは publish 直後の版を雛形が参照するため除外する。
+[install]
+minimumReleaseAge = 172800
+minimumReleaseAgeExcludes = ["@squadbase/vantage", "@squadbase/vantage-sdk", "@squadbase/react"]

package/base-template/package.json

@@ -12,17 +12,17 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.2",
-    "@squadbase/vantage-sdk": "0.1.1",
+    "@squadbase/vantage": "0.7.1-dev1.01a6413",
+    "@squadbase/vantage-sdk": "0.1.2-dev1.d4039e5",
     "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"
 
@@ -8,13 +8,11 @@ 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.
+ * The app's display language, written to `<html lang>` (a BCP 47 literal, e.g.
+ * "ja"). Set it to the language of the app's content: it also switches the slide
+ * toolbar messages and enables Japanese phrase-aware line breaking in slides.
  */
-function RouterLink({ href, ...props }: { href: string } & ComponentProps<"a">) {
-  return <Link to={href} {...props} />
-}
+export const lang = "en"
 
 /**
  * The nav *is* the route list — adding a page file puts it in the nav, with no
@@ -50,6 +48,7 @@ function useNavGroups(): NavGroup[] {
  * 「Something went wrong」のままリロードするまで残る。
  */
 export default function RootLayout() {
+  const navigate = useNavigate()
   return (
     <SquadbaseProvider>
       <AppShell
@@ -57,6 +56,7 @@ export default function RootLayout() {
         groups={useNavGroups()}
         actions={<UserCard />}
         linkComponent={RouterLink}
+        onNavigate={(href) => navigate({ to: href })}
       >
         <BuildRecovery>
           <Outlet />
@@ -65,3 +65,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.
  *
@@ -47,7 +57,7 @@ function DetailRow({ label, children }: { label: string; children: React.ReactNo
 
 function UserInfo({ user }: { user: User }) {
   const fullName = `${user.firstName} ${user.lastName}`
-  const rolesHref = navigator.language.startsWith("ja")
+  const rolesHref = document.documentElement.lang.startsWith("ja")
     ? "https://www.squadbase.dev/ja/docs/access-control#プロジェクトロール"
     : "https://www.squadbase.dev/docs/access-control#project-roles"
 
@@ -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 = document.documentElement.lang.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,21 +17,117 @@
   /* --radius: 0.625rem; */
 }
 
-/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
+/* Page typeface. `--font-sans` (Vantage theme.css, overridable by the theme range
+   below or here) already lists Latin system faces and then Japanese ones, so kana
+   and kanji do not fall back to a thin locale default. Change the typeface by
+   overriding `--font-sans`; keep the Japanese families if you put a webfont in
+   front. */
+body {
+  font-family: var(--font-sans);
+}
+
+/* squadkit-theme — regenerated by `theme`; edits here are lost */
+/* theme: neutral */
 :root {
-  --chart-1: var(--color-blue-600);
-  --chart-2: var(--color-teal-500);
-  --chart-3: var(--color-fuchsia-500);
-  --chart-4: var(--color-violet-500);
-  --chart-5: var(--color-gray-400);
+  --radius: 0.5rem;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
+  --background: oklch(0.975 0.004 255);
+  --card: oklch(1 0 0);
+  --popover: oklch(1 0 0);
+  --secondary: oklch(0.965 0.005 255);
+  --muted: oklch(0.965 0.005 255);
+  --accent: oklch(0.955 0.01 255);
+  --sidebar: oklch(0.985 0.003 255);
+  --sidebar-accent: oklch(0.955 0.01 255);
+  --border: oklch(0.93 0.006 255);
+  --input: oklch(0.9 0.01 255);
+  --sidebar-border: oklch(0.915 0.008 255);
+  --foreground: oklch(0.21 0.02 260);
+  --card-foreground: oklch(0.21 0.02 260);
+  --popover-foreground: oklch(0.21 0.02 260);
+  --secondary-foreground: oklch(0.25 0.02 260);
+  --muted-foreground: oklch(0.5 0.02 258);
+  --accent-foreground: oklch(0.25 0.02 260);
+  --sidebar-foreground: oklch(0.21 0.02 260);
+  --sidebar-accent-foreground: oklch(0.25 0.02 260);
+  --primary: oklch(0.55 0.2 262);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.7 0.12 262);
+  --sidebar-primary: oklch(0.55 0.2 262);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-ring: oklch(0.7 0.12 262);
+  --chart-1: oklch(0.55 0.2 262);
+  --chart-2: oklch(0.62 0.17 118);
+  --chart-3: oklch(0.5 0.19 352);
+  --chart-4: oklch(0.62 0.1 195);
+  --chart-5: oklch(0.44 0.18 300);
+  --positive: oklch(0.52 0.14 150);
+  --positive-subtle: oklch(0.96 0.04 150);
+  --positive-fill: oklch(0.62 0.15 150);
+  --negative: oklch(0.53 0.19 25);
+  --negative-subtle: oklch(0.96 0.03 25);
+  --negative-fill: oklch(0.62 0.17 25);
+  --warning: oklch(0.53 0.12 70);
+  --warning-subtle: oklch(0.96 0.05 85);
+  --warning-fill: oklch(0.79 0.16 82);
+  --info: oklch(0.52 0.16 255);
+  --info-subtle: oklch(0.96 0.03 250);
+  --info-fill: oklch(0.62 0.15 250);
+  --neutral: oklch(0.52 0 0);
+  --neutral-subtle: oklch(0.96 0 0);
+  --neutral-fill: oklch(0.62 0 0);
+  --destructive: oklch(0.53 0.21 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
 }
 
 .dark,
 [data-theme="dark"] {
-  --chart-1: var(--color-blue-400);
-  --chart-2: var(--color-teal-400);
-  --chart-3: var(--color-fuchsia-400);
-  --chart-4: var(--color-violet-400);
-  --chart-5: var(--color-gray-500);
+  --background: oklch(0.16 0.012 262);
+  --card: oklch(0.215 0.015 262);
+  --popover: oklch(0.235 0.016 262);
+  --secondary: oklch(0.27 0.016 262);
+  --muted: oklch(0.27 0.016 262);
+  --accent: oklch(0.3 0.02 262);
+  --sidebar: oklch(0.2 0.014 262);
+  --sidebar-accent: oklch(0.3 0.02 262);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --foreground: oklch(0.96 0.005 255);
+  --card-foreground: oklch(0.96 0.005 255);
+  --popover-foreground: oklch(0.96 0.005 255);
+  --secondary-foreground: oklch(0.96 0.005 255);
+  --muted-foreground: oklch(0.72 0.02 258);
+  --accent-foreground: oklch(0.96 0.005 255);
+  --sidebar-foreground: oklch(0.96 0.005 255);
+  --sidebar-accent-foreground: oklch(0.96 0.005 255);
+  --primary: oklch(0.68 0.19 262);
+  --primary-foreground: oklch(0.145 0.02 262);
+  --ring: oklch(0.6 0.15 262);
+  --sidebar-primary: oklch(0.68 0.19 262);
+  --sidebar-primary-foreground: oklch(0.145 0.02 262);
+  --sidebar-ring: oklch(0.6 0.15 262);
+  --chart-1: oklch(0.56 0.19 262);
+  --chart-2: oklch(0.75 0.17 118);
+  --chart-3: oklch(0.64 0.19 352);
+  --chart-4: oklch(0.78 0.105 195);
+  --chart-5: oklch(0.71 0.17 300);
+  --positive: oklch(0.76 0.15 150);
+  --positive-subtle: oklch(0.27 0.05 150);
+  --positive-fill: oklch(0.56 0.13 150);
+  --negative: oklch(0.74 0.15 22);
+  --negative-subtle: oklch(0.27 0.06 25);
+  --negative-fill: oklch(0.56 0.15 22);
+  --warning: oklch(0.8 0.14 80);
+  --warning-subtle: oklch(0.27 0.05 75);
+  --warning-fill: oklch(0.73 0.145 78);
+  --info: oklch(0.75 0.12 250);
+  --info-subtle: oklch(0.27 0.06 255);
+  --info-fill: oklch(0.56 0.13 250);
+  --neutral: oklch(0.85 0 0);
+  --neutral-subtle: oklch(0.27 0 0);
+  --neutral-fill: oklch(0.56 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.145 0.02 262);
 }
-/* vantage-template:chart-preset:end */
+/* squadkit-theme:end */