@squadbase/vantage 0.6.2-dev1.1c9e8bc → 0.6.2-dev1.20b05d1

package/registry/ui/echart.tsx

@@ -691,6 +691,116 @@ export function echartSetOptionOpts(prev: EChartsOption | null, next: EChartsOpt
   return { notMerge: false, replaceMerge: [...types], lazyUpdate: true }
 }
 
+/**
+ * Component types that get a generated `id` when the option has none, so replaceMerge can match them across updates.
+ * Not `dataset` / `graphic` / `tooltip`: they are rebuilt on every update (there is nothing to transition).
+ */
+const ID_TYPES = [
+  "title", "legend", "grid", "xAxis", "yAxis", "polar", "radiusAxis", "angleAxis", "radar",
+  "dataZoom", "visualMap", "geo", "singleAxis", "calendar",
+] as const
+
+/**
+ * What `withStableIds` remembers between updates: per generated id, the shape last applied and how many
+ * times it changed (the id's `~v<n>` suffix); per component type, the order of its ids.
+ */
+export interface StableIdState {
+  ids: Map<string, { shape: string; version: number }>
+  order: Map<string, string[]>
+}
+export const createStableIdState = (): StableIdState => ({ ids: new Map(), order: new Map() })
+
+/**
+ * Shape of a component: which keys it has, recursively (arrays only as "array", values not at all —
+ * except `type`). A merge keeps keys the new option dropped, so a changed shape must not be merged.
+ */
+function shapeOf(v: unknown): string {
+  if (Array.isArray(v)) return "[]"
+  if (!v || typeof v !== "object" || Object.getPrototypeOf(v) !== Object.prototype) return "."
+  const o = v as Record<string, unknown>
+  return `{${Object.keys(o)
+    .filter((k) => o[k] !== undefined)
+    .sort()
+    .map((k) => (k === "type" || k === "id" ? `${k}=${String(o[k])}` : `${k}:${shapeOf(o[k])}`))
+    .join(",")}}`
+}
+
+/**
+ * Gives every series (and the common components) an `id` it does not have yet —
+ * series: `series:<name ?? index>`, others `<type>:<index>` — so an update that
+ * only changes values is matched to the existing component and transitions
+ * instead of being rebuilt. If the component's shape changed since `state` last
+ * saw it (a key was removed or added, the type changed), the id gets a new
+ * `~v<n>` suffix so replaceMerge builds it from scratch: the result then always
+ * equals applying the option with `notMerge`. Explicit ids are kept; the input is not mutated.
+ */
+export function withStableIds(option: EChartsOption, state: StableIdState = createStableIdState()): EChartsOption {
+  const out: Record<string, unknown> = { ...(option as Record<string, unknown>) }
+  const taken = new Set<string>()
+  const list = (v: unknown): Record<string, unknown>[] | null =>
+    Array.isArray(v) ? (v as Record<string, unknown>[]) : v && typeof v === "object" ? [v as Record<string, unknown>] : null
+  const give = (key: string, pick: (c: Record<string, unknown>, i: number) => string) => {
+    const items = list(out[key])
+    if (!items) return
+    const used = new Set<string>(items.flatMap((c) => (c && c.id != null ? [String(c.id)] : [])))
+    const bases = items.map((c, i) => {
+      if (!c || typeof c !== "object" || c.id != null) return null
+      let base = pick(c, i)
+      for (let n = 2; used.has(base) || taken.has(`${key}\u0000${base}`); n++) base = `${pick(c, i)}#${n}`
+      used.add(base)
+      taken.add(`${key}\u0000${base}`)
+      return base
+    })
+    // A merge fills the empty slots a removal left and keeps the slot order of what exists, so after any
+    // change in which components there are (or their order) it would not match a fresh render: rebuild them all.
+    const prevOrder = state.order.get(key) ?? []
+    const cur = bases.filter((b): b is string => b !== null)
+    const inOrder = cur.length === prevOrder.length && cur.every((b, i) => b === prevOrder[i])
+    state.order.set(key, cur)
+    out[key] = items.map((c, i) => {
+      const base = bases[i]
+      if (base == null) return c
+      const shape = shapeOf(c)
+      const prev = state.ids.get(base)
+      const version = !prev ? 0 : prev.shape === shape && inOrder ? prev.version : prev.version + 1
+      state.ids.set(base, { shape, version })
+      return { ...c, id: version ? `${base}~v${version}` : base }
+    })
+  }
+  give("series", (c, i) => `series:${typeof c.name === "string" && c.name ? c.name : i}`)
+  for (const key of ID_TYPES) give(key, (_c, i) => `${key}:${i}`)
+  return out as EChartsOption
+}
+
+/** Copy of the plain objects / arrays of an option (functions, class instances, Dates stay shared), to compare against later in-place edits. */
+export function snapshotOption<T>(v: T): T {
+  if (Array.isArray(v)) return v.map(snapshotOption) as T
+  if (v && typeof v === "object") {
+    const proto = Object.getPrototypeOf(v)
+    if (proto === Object.prototype || proto === null) {
+      return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, snapshotOption(x)])) as T
+    }
+  }
+  return v
+}
+
+/** Structural equality for option trees; functions and other non-plain objects compare by reference. */
+export function optionEquals(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false
+  if (Array.isArray(a)) {
+    const bb = b as unknown[]
+    return a.length === bb.length && a.every((v, i) => optionEquals(v, bb[i]))
+  }
+  if (a instanceof Date || b instanceof Date) return a instanceof Date && b instanceof Date && a.getTime() === b.getTime()
+  const pa = Object.getPrototypeOf(a)
+  if ((pa !== Object.prototype && pa !== null) || Object.getPrototypeOf(b) !== pa) return false
+  const ka = Object.keys(a)
+  const kb = Object.keys(b)
+  return ka.length === kb.length && ka.every((k) => Object.hasOwn(b, k) && optionEquals((a as Record<string, unknown>)[k], (b as Record<string, unknown>)[k]))
+}
+
 /** `graphic` text doesn't inherit the global `textStyle`, so give it the inherited font unless it sets its own. */
 function withGraphicFont(option: EChartsOption, fontFamily: string | undefined): EChartsOption {
   const graphic = (option as { graphic?: unknown }).graphic
@@ -748,6 +858,9 @@ export const EChart = forwardRef<HTMLDivElement, EChartProps>(function EChart(
   const reducedMotion = usePrefersReducedMotion()
   // What the current instance last received, to pick the merge mode of the next update.
   const appliedRef = useRef<EChartsOption | null>(null)
+  // The option (before ids) as it was when applied, deep-copied; and the shape history behind the generated ids.
+  const snapshotRef = useRef<EChartsOption | null>(null)
+  const idStateRef = useRef<StableIdState>(createStableIdState())
 
   const autoTheme = useMemo(() => (tokens ? buildChartTheme(tokens) : undefined), [tokens])
   const resolvedTheme = theme ?? autoTheme
@@ -759,6 +872,7 @@ export const EChart = forwardRef<HTMLDivElement, EChartProps>(function EChart(
     if (!container) return
     const inst = init(container, resolvedTheme, { renderer: "canvas" })
     appliedRef.current = null
+    snapshotRef.current = null
     // `data-rendering` stays on until the (animated) paint is done, so anything
     // capturing the page — printing a document — can wait for real pixels.
     container.dataset.rendering = ""
@@ -786,10 +900,18 @@ export const EChart = forwardRef<HTMLDivElement, EChartProps>(function EChart(
 
   useEffect(() => {
     if (!instance || instance.isDisposed()) return
+    const prepared = withGraphicFont(
+      withMotionPreference(option, reducedMotion),
+      theme === undefined ? tokens?.fontFamily : undefined,
+    )
+    // Same content as last time (a re-render that built an equal option): nothing to redraw.
+    // Compared with a snapshot, so an in-place edit of a nested array of the caller's option still counts as a change.
+    if (snapshotRef.current && optionEquals(snapshotRef.current, prepared)) return
     if (containerRef.current) containerRef.current.dataset.rendering = ""
-    const next = withGraphicFont(withMotionPreference(option, reducedMotion), theme === undefined ? tokens?.fontFamily : undefined)
+    const next = withStableIds(prepared, idStateRef.current)
     instance.setOption(next, echartSetOptionOpts(appliedRef.current, next))
     appliedRef.current = next
+    snapshotRef.current = snapshotOption(prepared)
   }, [instance, option, reducedMotion, theme, tokens?.fontFamily])
 
   useEffect(() => {

package/registry/ui/kpi-card.tsx

@@ -43,7 +43,7 @@
  *   line takes its name from it ("昨日 617"), the same way a `label` on any `vs` does.
  * - **Two or more comparisons sit under the value**, not beside it, so the value
  *   keeps its place and its width whatever the card holds.
- * - **Polarity drives everything.** With `polarity="lower-is-better"` the target
+ * - **`betterWhen` drives everything.** With `betterWhen="down"` the target
  *   is met at or below it, and the record badge marks the lowest value.
  * - **Rates change in points.** With a `percent` format the delta and
  *   `{difference}` are in percentage points ("-0.5pt"); `change="relative"` opts
@@ -147,7 +147,9 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
    * @example provisional  /  provisional={{ label: "暫定" }}
    */
   provisional?: boolean | { label?: string }
-  /** Whether a rise is good. Default `"higher-is-better"`. `"neutral"` never colours the change and skips the target and record logic. */
+  /** Which direction is good: `"up"` (default) or `"down"` (churn, error rate). Wins over `polarity`. */
+  betterWhen?: "up" | "down"
+  /** @deprecated Older name of `betterWhen` (`"higher-is-better"` / `"lower-is-better"`). `"neutral"` (never colours the change, skips the target and record logic) is only reachable here. `betterWhen` wins if both are given. */
   polarity?: Polarity
   /** `"relative"` ("+12.4%"), `"points"` ("-0.5pt") or `"difference"` ("+¥530万", in `format`). Default: points for a `percent` format, else relative. */
   change?: ChangeDisplay
@@ -160,7 +162,7 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
   /**
    * Target for the current period. Under the value it adds a 6px bar (actual, the pace
    * projection, a tick at the target) and one line "目標の 49%・このペースなら 98%"
-   * (the projection only while `period` is in progress). With `polarity="lower-is-better"`
+   * (the projection only while `period` is in progress). With `betterWhen="down"`
    * or a rate target (points) there is no bar: "目標 … まであと …" in the footer.
    */
   target?: number
@@ -325,7 +327,8 @@ export function KpiCard({
   comparison: comparisonProp,
   comparisons,
   provisional,
-  polarity,
+  betterWhen,
+  polarity: polarityProp,
   change,
   neutralBand,
   showPrevious = true,
@@ -352,6 +355,8 @@ export function KpiCard({
   const isProvisional = provisional !== undefined && provisional !== false
   const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : "速報"
   const sample = useSampleMark()
+  // `betterWhen` is the documented name and wins over the older `polarity`.
+  const polarity: Polarity | undefined = betterWhen ? (betterWhen === "down" ? "lower-is-better" : "higher-is-better") : polarityProp
   const neutral = polarity === "neutral"
   const hasPrevious = comparison !== undefined && showPrevious
   // Two or more badges would squeeze the value from the right; they get their own row under it instead.

package/skills/vantage-design/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: vantage-design
-description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(プリセット default / calm / vivid / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
+description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
 ---
 
 # DESIGN.md と styles.css をまとめて更新する
@@ -23,7 +23,7 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 | --- | --- |
 | `references/format.md` | `DESIGN.md` を書く / 直すとき(書式・節の順番・雛形) |
 | `references/extract.md` | URL・画像・pptx/pdf・言葉・外部 DESIGN.md から色と書体を取り出すとき |
-| `references/presets.md` | プロジェクト作成時の初期デザイン(`default` / `calm` / `vivid` / `mono`) |
+| `references/presets.md` | テーマ(`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)の選び方と `theme` コマンド。旧プリセット id の読み替え |
 | `scripts/contrast.mjs` | 文字色と背景色のコントラスト比を確かめるとき |
 
 ## 手順
@@ -43,29 +43,32 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
   各行に「何に合わせてその色にしたか」を 1 語添える。
 - **トーンの説明**(2〜3 行。`DESIGN.md` の「全体のトーン」にそのまま入る文)。
 
-プリセットで足りる場合はプリセット名(`references/presets.md`)で提案してよい。
+テーマで足りる場合はテーマ id(`references/presets.md`)で提案してよい。旧プリセット id(`default` / `calm` / `vivid` / `mono`)で頼まれたら新 id に読み替える。
 
 ### 3. styles.css と DESIGN.md を同じステップで書く
 
 `styles.css`:
 
-- **マーカーブロックの中は手で編集しない。**
-  ``/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */`` 〜
-  `/* vantage-template:chart-preset:end */` の間はコマンドが丸ごと書き換える生成物で、手で直した
-  値は次の適用で消える。
-- チャートの 5 色は必ずコマンドで選ぶ: `npx @squadbase/vantage-template chart <preset>`
-  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`。プロジェクトルートで実行。
-  `--dry-run` で書き込まずに結果を見られる)。マーカーの中だけが置き換わり、他の記述は残る。
-- プリセットに無いチャート色(ブランド色を `--chart-1` にしたいなど)は、マーカーブロックの**後ろ**に
+- **テーマ範囲・チャート範囲のマーカーの中は手で編集しない。** 色・角丸・書体の出発点は 7 テーマ
+  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)から選び、コマンドで当てる:
+  `npx @squadbase/vantage-template theme <id>`(プロジェクトルートで実行。`--dry-run` で書き込まずに
+  結果を見られる)。``/* squadkit-theme — regenerated by `theme`; edits here are lost */`` 〜
+  `/* squadkit-theme:end */` の間はコマンドが丸ごと書き換える生成物で、手で直した値は次の適用で消える。
+  旧プリセット id(`default` → `neutral` / `calm` → `ocean` / `vivid` → `sunset` / `mono`)もコマンドが受ける。
+- チャートの 5 色はテーマが持つ。テーマと別の配色にしたいときだけ
+  `npx @squadbase/vantage-template chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)を使う。
+  ``/* vantage-template:chart-preset … */`` 〜 `/* vantage-template:chart-preset:end */` の間が置き換わり、
+  テーマのチャート色より優先される。テーマに揃え直すには `theme <id> --reset-chart`。
+- プリセットに無いチャート色(ブランド色を `--chart-1` にしたいなど)は、**マーカーブロックの後ろ**に
   別の `:root { --chart-1: …; }` と `.dark, [data-theme="dark"] { --chart-1: …; }` を足して上書きする
-  (後に書いた方が勝つ)。上書きするのは変えたい番号だけにし、残りはプリセットに任せる。
-- `--primary` / `--primary-foreground` / `--radius` などチャート以外のトークンは、マーカーの**外**
-  (ファイル先頭の `:root` ブロック)に書く。色は `:root` と `.dark, [data-theme="dark"]` の
-  **両方**に書く。片方だけだとダークモードで既定に戻る。値は `oklch()` か Tailwind のパレット変数
-  (`var(--color-sky-600)`)で書く。
-- 書体は既定でシステムフォント。**ページの書体を決めるのは `body` セレクタの `font-family`**
-  (フレームワークの `theme.css` が `body` にシステムフォントを直接指定しているため、`:root` や
-  `html` に `font-family` を書いても本文には効かない)。スライドの書体は `:root` の
+  (後に書いた方が勝つ)。上書きするのは変えたい番号だけにし、残りはテーマに任せる。
+- `--primary` / `--primary-foreground` / `--radius` などテーマに無い値・ブランド色の上書きも、
+  **マーカーブロックの後ろ**(ファイル末尾)に書く。マーカーより前に書いた値はテーマに負ける。
+  色は `:root` と `.dark, [data-theme="dark"]` の**両方**に書く。片方だけだとダークモードでテーマの値に
+  戻る。値は `oklch()` か Tailwind のパレット変数(`var(--color-sky-600)`)で書く。
+- 書体は既定でシステムフォント。**ページの書体は `--font-sans`**(`styles.css` の `body` が
+  `font-family: var(--font-sans)` で参照する。テーマ範囲も `--font-sans` を持つので、書体を変えるには
+  マーカーブロックの後ろで `:root { --font-sans: …; }` を上書きする)。スライドの書体は `:root` の
   `--slide-font-display`(見出し)/ `--slide-font-body`(本文)で決まる。Web フォントを使うときの
   レシピ:
   1. Google Fonts の CSS
@@ -73,13 +76,11 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
      から使う subset の `@font-face` ブロックだけを `styles.css` の先頭に貼る。
      **`@import url(...)` は使わない** ― `styles.css` はテーマの後ろに連結されるので
      「@import rules must precede all rules」の警告とともにビルドで捨てられる。
-  2. マーカーの外に次を書く(フォールバックは `theme.css` の既定と同じ並び):
+  2. マーカーブロックの後ろに次を書く(フォールバックは `theme.css` の既定と同じ並び):
 
      ```css
-     body {
-       font-family: "<Font>", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
-     }
      :root {
+       --font-sans: "<Font>", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
        --slide-font-display: "<Font>", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
        --slide-font-body: var(--slide-font-display);
      }
@@ -90,8 +91,9 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
   `ui-sans-serif` / `system-ui` は日本語の face より**後ろ**に置く。日本語の Windows ではどちらも
   Yu Gothic UI(UI のリサイズを避けるために字幅を詰めた書体)に解決され、カナがここで決まって
   半角風に見える。macOS の Chrome は `-apple-system` を解釈しないので `BlinkMacSystemFont` も並べる。
-  既存アプリの `styles.css` に `ui-sans-serif, system-ui, …` が先頭にある、または `"Yu Gothic UI"` が
-  残っているときは、`body` の `font-family` を上の並びに直す(ほかの行は書き換えない)。
+  既存アプリの `styles.css` の `body` に `font-family` が直書きされている(`var(--font-sans)` ではない)、
+  または `ui-sans-serif, system-ui, …` が先頭にある、`"Yu Gothic UI"` が残っているときは、
+  `body { font-family: var(--font-sans); }` に直し、書体は `--font-sans` に上の並びで書く。
   日本語の Web フォントは face が 100 を超えるので原則使わない(pptx 書き出しも壊れる。
   `vantage-slide` の `references/tokens.md` 参照)。
 

package/skills/vantage-design/references/extract.md

@@ -7,12 +7,13 @@
 3. **書体**(見出しと本文の `font-family`。システムフォントで足りるか)
 4. **トーン**(2〜3 語: 「落ち着いた」「明るい」「堅い」…)
 
-チャートの 5 色は、主色から直接作るより**主色に最も近いチャートプリセット**を選び、
-`npx @squadbase/vantage-template chart <preset>` で適用する方が安全(5 色の明度差・色覚多様性への
-配慮が済んでいる)。`styles.css` の `vantage-template:chart-preset` マーカーブロックの中は
+チャートの 5 色は、主色から直接作るより**主色に最も近いテーマ**を選び、
+`npx @squadbase/vantage-template theme <id>` で適用する方が安全(5 色の明度差・色覚多様性への
+配慮が済んでいる)。テーマと別のチャート配色が要るときは `chart <preset>`。`styles.css` の
+`squadkit-theme` / `vantage-template:chart-preset` のマーカーブロックの中は
 **手で編集しない**(次の適用で消える)。主色を `--chart-1` に入れたいときだけ、マーカーブロックの
 **後ろ**に `:root` と `.dark, [data-theme="dark"]` の `--chart-1` 上書きを足し、残り 4 色は
-プリセットに任せる。`--primary` や `--radius` もマーカーの外に書く。
+プリセットに任せる。`--primary` や `--radius` はマーカーブロックの後ろに書く。
 
 ## URL(既存サイトに合わせる)
 
@@ -36,7 +37,7 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 3. **ボタン・リンクの色**: `a {` `.btn` `button` `[class*=primary]` のセレクタの `color` /
    `background-color`。出現回数の多い有彩色が主色。
 4. **背景**: `body` / `html` の `background`。暗ければ「暗い基調」。
-5. **書体**: `body` の `font-family`。Google Fonts の `<link>` があればその family 名。
+5. **書体**: `body` の `font-family`(書き込み先は `--font-sans`)。Google Fonts の `<link>` があればその family 名。
 
 注意:
 
@@ -66,18 +67,19 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 
 ## 言葉だけ(「落ち着いた感じに」)
 
-形容詞を `presets.md` の 4 つに寄せ、そのうえで主色だけを調整する。
+形容詞を `presets.md` の 7 テーマに寄せ、そのうえで主色だけを調整する。
 
 | 言われたこと | 出発点 |
 | --- | --- |
-| 落ち着いた・信頼感・堅い・経営向け・青系 | `calm` |
-| 明るい・元気・勢い・暖かい・営業向け | `vivid` |
+| 落ち着いた・信頼感・堅い・経営向け・青系 | `ocean` |
+| 明るい・元気・勢い・暖かい・営業向け | `sunset` |
 | シンプル・モノクロ・印刷する・資料に貼る | `mono` |
-| 特に無し・標準・おまかせ | `default` |
-| 自然・環境・緑 | `default` の構成でチャートを `forest` に |
-| 華やか・ポップ・紫やピンク | `default` の構成でチャートを `berry` に |
+| 特に無し・標準・おまかせ | `neutral` |
+| 自然・環境・緑 | `forest` |
+| 華やか・ポップ・紫 | `violet` |
+| 華やか・ポップ・ピンク | `rose` |
 
-当てはまらない言葉は、2 案(例: `calm` と `default`)を並べて選んでもらう。
+当てはまらない言葉は、2 案(例: `ocean` と `neutral`)を並べて選んでもらう。
 
 ## 外部の DESIGN.md(Stitch などが書いたもの)
 
@@ -99,8 +101,8 @@ Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ
    | error | `--destructive` |
    | success / warning | 専用トークンなし → `--chart-*` のどれかに割り当てて `DESIGN.md` に書く |
    | radius / corner | `--radius` |
-   | display / headline font | `--slide-font-display`(+ ページの見出しなら `body` の font-family) |
-   | body font | `body` セレクタの font-family と `--slide-font-body`(`:root` の font-family は効かない) |
+   | display / headline font | `--slide-font-display`(+ ページの見出しなら `--font-sans`) |
+   | body font | `--font-sans`(ページ本文)と `--slide-font-body` |
 
 3. `styles.css` のマーカーブロックの外に、`:root` と `.dark, [data-theme="dark"]` の両方で書く
    (チャート色・書体の書き方は SKILL.md の手順 3)。外部の DESIGN.md に

package/skills/vantage-design/references/format.md

@@ -50,8 +50,8 @@ Components → 「成果物の種類ごとの規則」/ Do's and Don'ts。値は
 
 - `--muted` `--accent` `--secondary` `--border` は背景・境界用。文字色の役割に割り当てない。
 - 良い / 注意の専用トークンは無い。`--chart-*` の中から割り当てるか、「専用トークンなし」と書く。
-- ページ本文の書体はトークンではなく `body` の `font-family`(`styles.css` の `body` セレクタで上書きする。
-  `:root` / `html` に書いても `theme.css` の `body` 指定に負けて効かない)。
+- ページ本文の書体は `--font-sans`(`styles.css` の `body` が `font-family: var(--font-sans)` で参照する。
+  テーマを当てると `--font-sans` もテーマの値になる。変えるときはテーマ範囲のマーカーの後ろで上書きする)。
 - `--slide-bg` などは既定で `--background` などの別名。`.dark` に書き直す必要は無い。
 
 ## 雛形(中立の既定テーマ)
@@ -112,14 +112,15 @@ DESIGN.md — このアプリの「見た目の意図」を書くファイルで
 - 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
 - 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
 - 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
-- 配色を丸ごと変えるときは `npx @squadbase/vantage-template chart <preset>` を使う
-  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
+- 配色を丸ごと変えるときは `npx @squadbase/vantage-template theme <id>` を使う
+  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
+  `chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
 
 ## 書体 (Typography)
 
 | 用途 | 指定 | 備考 |
 | --- | --- | --- |
-| 見出し・本文 | 日本語を含むシステムフォント(`body` の `font-family`) | Web フォントは使わない |
+| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | Web フォントは使わない |
 | 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
 | スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
 | スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |

package/skills/vantage-design/references/presets.md

@@ -1,110 +1,60 @@
-# 初期デザインのプリセット
-
-プロジェクト作成時に選ぶ 4 つの出発点。**id(`default` / `calm` / `vivid` / `mono`)はプロジェクト
-作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + `--primary` +
-`DESIGN.md` の差分」でできている。**`--primary` はどのプリセットでも必ず書く**(無彩色のプリセットも
-値を明示する)。チャートだけ変えるとホームのような色の少ない画面では見た目が変わらず、別のプリセットから
-切り替えたときに前の `--primary` が残るため。
-
-適用の手順は共通:
-
-1. `npx @squadbase/vantage-template chart <チャートのプリセット>` で `styles.css` のマーカーブロックを
-   差し替える。**マーカーブロックの中(`--chart-1..5`)は手で編集しない** ― コマンドの生成物で、
-   次の適用で消える。
-2. 各プリセットの `--primary` / `--primary-foreground` を、`styles.css` のマーカーの**外**(先頭の
-   `:root` ブロック)に `:root` と `.dark, [data-theme="dark"]` の両方で書く。既にある `--primary` は置き換える。
-3. `DESIGN.md` を `format.md` の雛形から作り、下の「DESIGN.md の差分」の行だけを書き換える。
-4. `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
-
-| id | トーン | チャートのプリセット | `--primary` |
-| --- | --- | --- | --- |
-| `default` | 無彩色のベース。色を持つのはデータ(`blue` チャート)だけ | `blue` | 無彩色(`theme.css` の既定値を明示) |
-| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 深い青(スカイ 700 / 300) |
-| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ(オレンジ 700 / 400) |
-| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | ジンク 900 / 200 |
-
-## `default`
-
-- トーン: 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。装飾より読みやすさ。
-- チャート: `blue`(青 → ティール → フクシア → バイオレット → グレー)。
-- `--primary`(フレームワークの既定と同じ無彩色。他のプリセットから戻すときのために明示する):
-
-  ```css
-  :root {
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md`: 雛形そのまま(`format.md` の雛形は `default` を説明している)。
-
-## `calm`
-
-- トーン: 寒色でまとめた静かな画面。強調は控えめにし、数字と罫線で読ませる。
-- チャート: `ocean`(スカイ → シアン → インディゴ → ティール → スレート)。
-- `--primary`(チャートのスカイに揃えた深い青):
-
-  ```css
-  :root {
-    --primary: var(--color-sky-700);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-sky-300);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md` の差分: 「全体のトーン」を上の文に。チャートの色味を「スカイ → シアン → インディゴ →
-  ティール → スレート」に。良い = `--chart-4`(ティール)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
-  禁止: `--chart-1` と `--chart-2` を隣り合う細い線で並べる(どちらも明るい青系)。
-
-## `vivid`
-
-- トーン: 明るく勢いのある暖色。KPI とトレンドを大きく見せ、強調色をはっきり使う。
-- チャート: `sunset`(オレンジ → アンバー → ローズ → イエロー → ストーン)。
-- `--primary`(オレンジ 600 は白文字で 4.5:1 に届かないので 700 を使う):
-
-  ```css
-  :root {
-    --primary: var(--color-orange-700);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-orange-400);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md` の差分: トーンを上の文に。主色の行を「濃いオレンジ」に。良い = 専用色なし(▲ と
-  `--foreground`)、悪い = `--destructive`。禁止: `--chart-3`(ローズ)と `--destructive` を同じ
-  チャートに置く(悪い値と区別できない)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
-
-## `mono`
-
-- トーン: 白黒と灰色だけ。色で意味を運ばず、太さ・順番・ラベルで読ませる。
-- チャート: `mono`(ジンク 900 → 200。ダークでは反転)。
-- `--primary`(チャートの両端と同じジンク):
-
-  ```css
-  :root {
-    --primary: var(--color-zinc-900);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-zinc-200);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-
-- `DESIGN.md` の差分: トーンを上の文に。強調 = `--chart-1`(最も濃い灰)。良い = 専用色なし(▲ と
-  符号)、悪い = `--destructive`(**画面で唯一の有彩色**として使う)。チャートは系列を 3 つまでにし、
-  それ以上は直接ラベルを付ける。禁止: 隣り合う `--chart-4` と `--chart-5`(明度差が小さい)。
+# 初期デザイン(テーマ)
+
+プロジェクトの見た目の出発点は、SquadKit の 7 テーマから選ぶ。**テーマ id はプロジェクト作成の
+ワークフローが参照するので変えないこと。** テーマは主色・背景・文字・境界・チャート 5 色・角丸・書体を
+まとめて持つ(ライトとダークの両方)。
+
+| id | トーン | 向く場面 |
+| --- | --- | --- |
+| `neutral` | 既定。Vantage の素の見た目(青の主色と無彩色の面) | 迷ったとき・おまかせ |
+| `ocean` | 青を基調にした落ち着いた信頼感。角丸はやや小さめ | 報告書・経営向け |
+| `forest` | 緑を基調にした自然な印象。丸ゴシック系の書体、角丸はやや小さめ | 環境・ヘルスケア・自然 |
+| `sunset` | 橙を基調にした温かみ。角丸はやや大きめ | 営業・マーケティング |
+| `violet` | 紫を基調にしたやわらかい印象。角丸は大きめ | 華やかさ・ポップ |
+| `rose` | 赤紫からピンクの落ち着いた色。角丸は大きめ(`--destructive` の赤とは別の色) | 華やかさ・ポップ |
+| `mono` | 無彩色寄り。チャートも彩度を抑え、角丸は最小。等幅フォント | 印刷・資料への貼り付け |
+
+## 当てる
+
+プロジェクトルートで次を実行する。`--dry-run` で書き込まずに結果を見られる。
+
+```bash
+npx @squadbase/vantage-template theme <id>
+npx @squadbase/vantage-template theme ocean --reset-chart   # chart コマンドで選んだ配色を捨て、テーマのチャート色に揃える
+```
+
+- `styles.css` の ``/* squadkit-theme — regenerated by `theme`; edits here are lost */`` 〜
+  `/* squadkit-theme:end */` の範囲(テーマ範囲)だけを差し替える。**範囲の中は手で編集しない**。
+  マーカーが無いファイルには自動で足される。同じ id を再実行しても変わらない。
+- テーマ範囲はファイル先頭の `:root` より後ろに置かれ、同じ詳細度なら後ろが勝つ。
+  先頭の `:root` に手書きした `--primary` などはテーマに負ける。
+- `chart <preset>` の範囲(`--chart-*` だけ)はテーマ範囲の**後ろ**に置かれ、テーマのチャート色に勝つ。
+  チャートの配色もテーマに任せるなら `--reset-chart` で外す。
+
+## 旧プリセット id の読み替え
+
+古い呼び出しの `default` / `calm` / `vivid` / `mono` は、`theme` コマンドがそのまま受けて次の id として扱う。
+
+| 旧 | 新 |
+| --- | --- |
+| `default` | `neutral` |
+| `calm` | `ocean` |
+| `vivid` | `sunset` |
+| `mono` | `mono` |
+
+## テーマに無い値(ブランド色など)
+
+テーマの `--primary` を変えたい、特定の色だけブランドに合わせたい、というときは、テーマを当てたうえで
+**`/* squadkit-theme:end */`(チャート範囲があればその終端)より後ろ**に、変えたいトークンだけ
+`:root` と `.dark, [data-theme="dark"]` の**両方**に書く。前に書くとテーマに負ける。
+`scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
+
+## DESIGN.md
+
+`format.md` の雛形から作り、選んだテーマに合わせて次の行だけ書き換える。
+
+- 「全体のトーン」: 上の表のトーンを 2〜3 行に。
+- 主色の行: テーマの主色の色味(「青」「橙」など。**色コードは書かない**)。
+- チャートの色味: テーマの `--chart-1..5` の並び(適用後の `styles.css` を見る)。
+- 良い / 悪い / 注意: 専用トークンは無い。`--chart-*` から割り当てるか「専用トークンなし」と書く。
+  `--destructive` を普通の系列色に使わない。

package/skills/vantage-pitfalls/SKILL.md

@@ -94,6 +94,11 @@ Base UI の `SelectValue` は選択中の **value をそのまま描き**、`Sel
 - 表示ルート `/sales/:customerId`
 - リンク `to="/sales/$customerId"` + `params={{ customerId }}` / 取り出し `useParams().customerId`
 
+## 日本語アプリは `lang` を指定する
+
+ルート `src/_layout.tsx` に `export const lang = "ja"`(リテラル)が無いと `<html lang="en">` のままで、
+スライドの見出しが文節の途中で折れる。内容が日本語なら必ず指定する。
+
 ## ページ:`definePage` の値はリテラルで書く
 
 title/description/navLabel は**ビルド時に静的抽出**される。変数・関数呼び出し・テンプレート補間を