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

package/base-template/agents/slide.md

@@ -4,7 +4,13 @@
 スライドデッキを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
 先に読んでいる想定です。
 
-プロジェクトルートに `DESIGN.md` があれば、書き始める前に読んで「スライド」の節と配色・書体の規則に従う。
+書き始める前に `AGENTS.md` の「見た目の規約」(と、あればプロジェクトルートの `DESIGN.md`)に従う。
+スライド固有の規則:
+
+- 1 枚に 1 メッセージ。見出しに結論を書く。
+- 色は `--slide-bg` / `--slide-fg` / `--slide-accent` / `--slide-muted` を使う(既定では
+  `--background` / `--foreground` / `--primary` / `--muted-foreground` に連動)。
+- 強調色は 1 枚につき 1 か所まで。
 
 ## スライドは `.slide.tsx` で書く
 
@@ -19,6 +25,7 @@
 - 新規プロジェクトでまだ `/` が空いている場合のみ、`index.slide.tsx` を使ってよい。
 
 ```tsx
+import { definePage } from "@squadbase/vantage"
 import { Slide, SlideDeck } from "@squadbase/vantage/slide"
 
 export const page = definePage({ title: "6月度レビュー", navLabel: "6月度" })
@@ -34,8 +41,10 @@ export default function Deck() {
 
 **`<Slide>` は `<SlideDeck>` の直接の子に書く。** `SlideDeck` は直下の `<Slide>` 要素だけを数えるので、
 `<Slide>` を自作コンポーネント(`<Slide1 />` など)や Fragment で包むと 1 枚も数えられず「1 / 0」に
-なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列は可)。共通の部品は
-`<Slide>` の**中**に置くコンポーネントとして切り出します(`<Slide><CoverPage /></Slide>`)。
+なります(`{items.map((x) => <Slide key={x.id}>…</Slide>)}` のような配列はファイル形式としては可。
+1 枚の中で視覚要素を `map` で量産しない方針は `vantage-slide` skill の「繰り返す要素は `map` ではなく
+コンポーネント」)。共通の部品は `<Slide>` の**中**に置くコンポーネントとして切り出します
+(`<Slide><CoverPage /></Slide>`)。
 
 1920×1080 の固定キャンバスに絶対 px で書き、画面サイズに合わせて縮小されます。キー / クリックで
 送れ、左のスライド一覧(サムネイル列)は `L` で開閉、`F` で全画面、ツールバーから pptx を
@@ -51,3 +60,68 @@ pptx が壊れる条件、説明と図表のデータ時点の揃え方)。
 `.slide` を付けられるのはルートになるページモジュールだけで、`_layout.slide.tsx` などは
 `INVALID_PAGE_VARIANT` エラーになります。`june.slide.tsx` と `june.tsx` は同じ URL に解決するので
 `ROUTE_CONFLICT` です。
+
+## まず block を探す
+
+1 枚分の中身は、手で組む前に `@squadbase/vantage/slide` の block から探します(`<Slide>` の**中**に
+置く。ルートは 100% で、`<Slide>` 自体は持たない)。props は `vantage docs <name>`(例:
+`vantage docs slide-kpi-hero`)で引く。
+
+| block | 用途 |
+| --- | --- |
+| `SlideCover` | 表紙(タイトル・サブタイトル・期間) |
+| `SlideExecSummary` | 結論を先に述べるエグゼクティブサマリー |
+| `SlideKpiHero` | 主要な KPI 1 つを大きく見せる |
+| `SlideKpiGrid` | 複数の KPI を並べる |
+| `SlideChartInsight` | チャート 1 つと、そこから読み取れること |
+| `SlideScorecardTable` | 指標と目標・達成度を表にしたスコアカード |
+| `SlideNextActions` | 次のアクション(担当・期限つき) |
+| `SlideSection` | 章の扉(`items` を渡すと番号付きのアジェンダ。`current` の章を強調) |
+| `SlideComparison` | A vs B・前後の 2〜3 列比較(各列に見出し・主要数値・箇条) |
+| `SlideChartFull` | チャートを全幅に置き、注記を 1 行添える |
+
+**手書きの 1 枚には部品を使う。** block が合わない 1 枚でも、見出し・出典行・列割りは自前で組まず、
+次の部品を使う(どれも `@squadbase/vantage/slide`。1 枚にはならないので `<Slide>` の中に並べる)。
+
+| 部品 | 用途 |
+| --- | --- |
+| `SlideHeading` | 見出し(`title`、任意で `eyebrow`)。1 枚の先頭に置く |
+| `SlideSourceLine` | 足元の出典・時点(`source` `asOf`)。`page={{ current, total }}` を渡すとページ番号も出す |
+| `SlideColumns` / `SlideColumn` | 12 列の割り付け(`<SlideColumn span={8}>` と `span={4}` など)。`align` は `start` / `center` / `stretch` |
+| `DeltaText` | 増減の文字(「▲ +3.2%」)。`value` `format` `betterWhen` `comparisonLabel` |
+
+`SlideSection` は `Steps` を持たない。順に見せたいときは呼び出し側で `<Steps>` で包む。
+
+```tsx
+import { Slide, SlideDeck, SlideCover, SlideExecSummary } from "@squadbase/vantage/slide"
+// <SlideDeck><Slide><SlideCover … /></Slide><Slide><SlideExecSummary … /></Slide></SlideDeck>
+```
+
+**props の渡し方は block 間で共通。** 数値は `value: number | null` と `format`(整形は block がする。表示を上書きするときだけ `display`。`null` は「—」)。前期比などは `delta: { value, format? }` と `comparisonLabel`(例 `"前年同期比"`)、良し悪しは指標ごとの `betterWhen`(`"up"` が既定、コストなど下がるほど良いものは `"down"`。向きは block が符号から出す)。目標は `target: number`。出典は `source`(文字列)、時点は `asOf` に**日付だけ**(例 `"2026-09-30"`。「時点」は block が付けるので書かない)。時系列は、単一系列なら `{ x, y }[]`(kpi-hero の `trend`。scorecard に `trend` は無い)、複数系列なら `{ categories, series }`(chart-insight の `chart`)。
+
+block が合わない**1 枚だけ**を手で書く(デッキ全体を手書きに切り替えない)。import 元は
+`@squadbase/vantage/slide` のままで、block のための新しい import 元はありません。
+
+## ファイル形式の規約
+
+置き場所・URL・default export・`definePage` の書き方は全ページ共通(`agents/page.md` の
+「ページファイルの規約」)。ここではスライド固有のものだけを挙げます。**中身の値(キャンバス・
+セーフエリア・グリッド・文字サイズ・余白)は `vantage-slide` skill を参照。**
+
+**MUST**(破ると黙って壊れるものが多い。`vantage check` が拾うのは名前の誤りだけ)
+
+- ファイル名は `<name>.slide.tsx`(`.jsx` も可)。サフィックスは小文字で 1 つだけ。`.slide.ts` は
+  `INVALID_PAGE_VARIANT`、`.SLIDE.tsx`・二重サフィックス・`.slide.test.tsx` は黙って通常ページになる
+- default export は `<SlideDeck>` をルートに返す。フレームワークは包まない
+- `<Slide>` は `<SlideDeck>` の直接の子(配列は可。Fragment・自作コンポーネントで包まない)
+- `<Step>` は `<Steps>` の直接の子(包むと常に表示される)
+- スライドの部品は `@squadbase/vantage/slide` から import する
+
+**SHOULD**
+
+- 1 ファイル = 1 デッキ。ヘルパーコンポーネント・定数も同じ `.slide.tsx` に書く
+- 各 `<Slide>` のルート要素は `width: "100%"; height: "100%"` でキャンバスを埋める
+- canvas に描くチャート(`EChart`)は `data-waitfor="canvas"` で包む(無いと pptx でそのスライドが白紙になりうる)
+- pptx に出る中身をアプリの Context(router / query / テーマ)に依存させない
+- `MorphElement` の `id` はページ内で一意にし、入れ子にしない。遷移先の `<Slide>` で `transition.morph` を有効にする
+- pptx 用などの依存を追加しない(html-to-image / fflate は自動で入る)

package/base-template/bun.lock

@@ -6,8 +6,8 @@
       "name": "vibe-app",
       "dependencies": {
         "@squadbase/react": "^0.1.0",
-        "@squadbase/vantage": "0.6.2-dev1.25d59a0",
-        "@squadbase/vantage-sdk": "0.1.1-dev1.cacbb3c",
+        "@squadbase/vantage": "0.6.2-dev1.bcb51d1",
+        "@squadbase/vantage-sdk": "0.1.1-dev1.54d3684",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.468.0",
         "react": "^19.3.1",
@@ -196,9 +196,9 @@
 
     "@squadbase/react": ["@squadbase/react@0.1.0", "", { "dependencies": { "zod": "^4.3.6" }, "peerDependencies": { "@types/react": "17.x || 18.x || 19.x", "react": "17.x || 18.x || 19.x" }, "optionalPeers": ["@types/react"] }, "sha512-k+Dpyj7eH+Yjydw54iEluCjYDae086d12hWgBjNMpw4wLbQGz3CrJ6Yipodg8n1cKUt7zvwddlcTHd79bgKsXg=="],
 
-    "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.25d59a0", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-dCnm1xBOD0iDk3thdw2tSZaHOTyU/AlUxWpcJpya0Imk7ylaaDOswMxkOxfQlFwa4BzFhm2zx+7g4i2mFv63fw=="],
+    "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.bcb51d1", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-r12gMlgfkR6kGRuKmQ5AYhq56imbznE4Z4tsUvGtpkDsNtIRz8QFQQrWVeiDXSmpAlJr3IUh21SzsO/rDA8SjQ=="],
 
-    "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.cacbb3c", "", {}, "sha512-2putGlaDgbIYZFSYKP6hsLUTp5PHdIqT5x2NvfnvFzhlNnjAFZVki2GyEwSOq/DHM3wmQAV2bnI+FUnFopP77Q=="],
+    "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.54d3684", "", {}, "sha512-dKwVlkeeyKn92zeF1GWwswLHmARsT5Nx2Pvi6Z+XfCzu3N02XmlxISr/YCAzAaXrdWEoAp3/ghlRZtLoPl30AQ=="],
 
     "@streamdown/code": ["@streamdown/code@1.1.1", "", { "dependencies": { "shiki": "^3.19.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-i7HTNuDgZWb+VdrNVOam9gQhIc5MSSDXKWXgbUrn/4vSRaSMM+Rtl10MQj4wLWPNpF7p80waJsAqFP8HZfb0Jg=="],
 

package/base-template/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.2-dev1.25d59a0",
-    "@squadbase/vantage-sdk": "0.1.1-dev1.cacbb3c",
+    "@squadbase/vantage": "0.6.2-dev1.bcb51d1",
+    "@squadbase/vantage-sdk": "0.1.1-dev1.54d3684",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "react": "^19.3.1",

package/base-template/src/_layout.tsx

@@ -7,6 +7,13 @@ import type { NavGroup } from "@squadbase/vantage/components"
 import { BuildRecovery } from "./components/build-recovery"
 import { UserCard } from "./components/user-card"
 
+/**
+ * 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.
+ */
+export const lang = "en"
+
 /**
  * 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

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

@@ -57,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"
 

package/base-template/src/index.tsx

@@ -68,7 +68,7 @@ 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")
+  const sampleNote = document.documentElement.lang.startsWith("ja")
     ? "サンプルデータです。お手元のデータに置き換えて始めましょう。"
     : "Sample data — replace with your own to get started."
 

package/base-template/src/styles.css

@@ -17,32 +17,117 @@
   /* --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. */
+/* 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:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans",
-    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-sans);
 }
 
-/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
+/* 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 */