@squadbase/vantage 0.6.2-dev1.5aae04e → 0.6.2-dev1.5c79ef5

package/templates/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/theme.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-theme.mjs — do not edit. Sources:
  *   packages/squadkit/registry/theme/theme.css (UI part tokens)
- *   packages/vantage/src/theme/framework.css   (slide / document styles) */
+ *   packages/squadkit/theme/slide-doc.css         (slide / document styles) */
 
 /**
  * Vantage design tokens. Imported after `@import "tailwindcss"` by the
@@ -62,10 +62,10 @@
     sans-serif;
 
   --chart-1: oklch(0.55 0.2 262);
-  --chart-2: oklch(0.7 0.14 215);
-  --chart-3: oklch(0.6 0.23 295);
-  --chart-4: oklch(0.63 0.24 330);
-  --chart-5: oklch(0.78 0.19 125);
+  --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);
 
   /* Semantic status tokens — see the contract above the `@theme inline` block. */
   --positive: oklch(0.52 0.14 150);
@@ -115,16 +115,16 @@
   --accent: oklch(0.3 0.02 262);
   --accent-foreground: oklch(0.96 0.005 255);
   --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.145 0.02 262);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.6 0.15 262);
 
-  --chart-1: oklch(0.55 0.2 262);
-  --chart-2: oklch(0.76 0.14 215);
-  --chart-3: oklch(0.68 0.2 295);
-  --chart-4: oklch(0.7 0.22 330);
-  --chart-5: oklch(0.82 0.18 125);
+  --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);
@@ -145,7 +145,7 @@
   --sidebar: oklch(0.2 0.014 262);
   --sidebar-foreground: oklch(0.96 0.005 255);
   --sidebar-primary: oklch(0.68 0.19 262);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0.02 262);
   --sidebar-accent: oklch(0.3 0.02 262);
   --sidebar-accent-foreground: oklch(0.96 0.005 255);
   --sidebar-border: oklch(1 0 0 / 10%);
@@ -162,7 +162,8 @@
                       text or icons — use --<tone>. Same lightness step from the page in both
                       modes (light 0.62 / dark 0.56: ~0.36-0.40 OKLCH L away from --background,
                       >= 3:1 against --background and --card), so a fill is never strong in one
-                      mode and faint in the other. Presets do not override it.
+                      mode and faint in the other. Presets may tune hue and chroma within the
+                      status bands while preserving contrast and fill strength (tests/theme-presets.test.ts).
                       --warning-fill is the exception: amber (light 0.79 / dark 0.73, ~#f5b324 / ~#d99a1e) is
                       a light colour by nature, so it is ~2:1 on the light page (still >= 0.18 L away)
                       and ~7-8:1 on the dark one; dark text (--foreground in light, --background in dark) sits on it at >= 4.5:1.
@@ -359,17 +360,20 @@
 /**
  * Vantage framework styles: the slide / document tokens and the document
  * typesetting. The UI parts' tokens live in SquadKit
- * (packages/squadkit/registry/theme/theme.css); scripts/gen-theme.mjs appends
- * this file to them to produce packages/vantage/theme.css.
+ * (packages/squadkit/registry/theme/theme.css); packages/vantage/scripts/gen-theme.mjs
+ * appends this file to them to produce packages/vantage/theme.css.
  */
 
 :root {
   /* Slides (@squadbase/vantage/slide).
-     These are aliases, not values. Custom properties resolve lazily, so
+     These are aliases, not values. A var() in a custom property is resolved
+     on the element that declares it and inherited as that result, so
      pointing them at the tokens above is enough for a deck to follow `.dark`
-     and `[data-theme="dark"]` on its own — restating them in the dark block
-     below would create two places to keep in step for no gain. A deck
-     overrides any of them inline through `<SlideDeck theme>`. */
+     and `[data-theme="dark"]` set on :root — restating them in the dark block
+     below would create two places to keep in step for no gain. Tokens
+     overridden on a descendant (a scoped theme) do not reach them: re-declare
+     the aliases there. A deck overrides any of them inline through
+     `<SlideDeck theme>`. */
   --slide-bg: var(--background);
   --slide-fg: var(--foreground);
   --slide-accent: var(--primary);