@squadbase/vantage 0.6.2-dev1.01caa72 → 0.6.2-dev1.02aab78

package/docs/ja/slide/slide-exec-summary.md

@@ -0,0 +1,47 @@
+# SlideExecSummary
+
+> 結論を先に伝える 1 枚。アクションタイトルと 3〜5 個の要点。
+
+結論が先の 1 枚です。アクションタイトルの下に、1 行の見出し（と任意の補足 1 行）を持つ要点を 3〜5 個並べます。
+
+```tsx
+import { SlideExecSummary } from "@squadbase/vantage/slide";
+import type { SlideExecSummaryProps, SlideExecSummaryPoint } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `points` | `SlideExecSummaryPoint[]` |  | 要点（`{ headline: string; detail?: string }`）。3〜5 個。**必須**。 |
+| `layout` | `"rows" \| "columns"` | `"rows"` | `rows` は番号付きで縦に積む。`columns` は横に並べる（3〜4 個向き）。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideExecSummary } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideExecSummary
+    title="Q2 は売上が計画を 4% 上回り、解約の改善が次の課題"
+    points={[
+      { headline: "売上は 5.4 億円で計画比 +4%", detail: "新規 38 社が牽引" },
+      { headline: "解約率は 1.8% まで低下", detail: "オンボーディング刷新の効果" },
+      { headline: "新規獲得は目標に 12 社届かず", detail: "紹介経由が想定の半分" },
+    ]}
+    asOf="2026-10-20"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 6 個以上は描画されますが、`console.warn` が出ます。スライドを分けてください。
+- `title` は話題（「売上の状況」）ではなく、結論の文で書きます。

package/docs/ja/slide/slide-heading.md

@@ -0,0 +1,38 @@
+# SlideHeading
+
+> [部品] スライド 1 枚の見出し。アクションタイトルと任意のアイブロウ。
+
+スライド 1 枚の見出しです。ページの大きさの `h2` で、2 行までに収まります。上に小さなラベル（`eyebrow`、章名など）を添えられます。12 カラムのグリッドの最上段に置く**部品**で、1 枚まるごとの block ではありません。
+
+```tsx
+import { SlideHeading } from "@squadbase/vantage/slide";
+import type { SlideHeadingProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **スライドの部品**で、1 枚まるごとの block ではありません。`<Slide>` 内の 12 カラムのグリッドの行として置きます（ルートはキャンバスいっぱい（100%×100%）には広がりません）。寸法はすべて部品の中で決まっているので、足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `title` | `string` | 結論を 1 文で書いた見出し（アクションタイトル）。2 行までに切り詰められる。**必須**。 |
+| `eyebrow` | `string` | 見出しの上の短いラベル（「第 2 章 解約」）。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideHeading } from "@squadbase/vantage/slide";
+
+<Slide>
+  <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)" }}>
+    <SlideHeading title="解約率は 6 月以降、毎月下がり続けている" eyebrow="第 2 章 解約" />
+    {/* …SlideColumns など… */}
+  </div>
+</Slide>
+```
+
+## 注意
+
+- 見出しは話題ではなく結論の文で書きます。
+- 置いたグリッドの 12 カラムすべてにまたがります。

package/docs/ja/slide/slide-kpi-grid.md

@@ -0,0 +1,55 @@
+# SlideKpiGrid
+
+> 2〜4 個の KPI を並べるスコアボード。値・増減・目標。
+
+2〜4 個の KPI カードを横に並べるスコアボードです。各カードにラベル・値・増減・目標が入り、幅は等分されます。
+
+```tsx
+import { SlideKpiGrid } from "@squadbase/vantage/slide";
+import type { SlideKpiGridProps, SlideKpiGridItem, SlideKpiGridDelta } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `items` | `SlideKpiGridItem[]` |  | KPI。2〜4 個。**必須**。各要素は下の `items[].…` の行。 |
+| `items[].label` | `string` |  | 指標名。**必須**。 |
+| `items[].value` | `number \| null` |  | 数値。`null` は「—」と表示される。**必須**。`format` で整形される。 |
+| `items[].format` | `ValueFormat` |  | 値の整形（`"currency"` / `"percent"` / `{ type: "number", unit: "社" }` など）。`delta` と `target` の既定の整形にもなる。 |
+| `items[].display` | `string` |  | 表示する文字だけを置き換える（元の数値は `value` のまま `data-raw` に残る）。 |
+| `items[].delta` | `SlideKpiGridDelta` |  | `{ value: number; format?: ValueFormat }`。増減の大きさを符号付きで（例: `0.074` と `format: "percent"` で「+7.4%」）。向きは符号で決まり、▲ ▼ と「増」「減」も出る。`format` の既定は item の `format`。 |
+| `items[].betterWhen` | `"up" \| "down"` | `"up"` | `delta` のどちらの向きが良いか。色が決まる。 |
+| `items[].comparisonLabel` | `string` |  | `delta` の比較相手（「前月比」）。 |
+| `items[].target` | `number` |  | 目標。`format` は `value` と同じ。「目標 …（達成率 …）」と表示される。達成率は value ÷ target（`betterWhen` が `"down"` なら target ÷ value）。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideKpiGrid } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideKpiGrid
+    title="売上と継続率は計画どおり、新規獲得だけが未達"
+    items={[
+      { label: "月次売上", value: 540_000_000, format: "currency", delta: { value: 0.074, format: "percent" }, comparisonLabel: "前月比", target: 520_000_000 },
+      { label: "継続率", value: 0.982, format: { type: "percent", digits: 1 }, delta: { value: 0.004 }, comparisonLabel: "前月比", target: 0.98 },
+      { label: "新規獲得", value: 38, format: { type: "number", unit: "社" }, delta: { value: -4 }, comparisonLabel: "前月比", target: 50 },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 5 個以上は描画されますが `console.warn` が出ます。スライドを分けてください。
+- 値・増減・目標は数値で渡します。整形は `format` が行い、文字を変えたいときだけ `display` を使います。
+- 「目標 …（達成率 …）」「増」「減」などの文言は block が出す日本語固定です。

package/docs/ja/slide/slide-kpi-hero.md

@@ -0,0 +1,58 @@
+# SlideKpiHero
+
+> 1 つの数字を主役にする 1 枚。値・増減・推移の線。
+
+1 つの数字を大きく見せる 1 枚です。左 6 カラムにラベルと値（と増減）、右 6 カラムに推移の線を置きます。`trend` を渡さなければ数字が全幅を使います。
+
+```tsx
+import { SlideKpiHero } from "@squadbase/vantage/slide";
+import type { SlideKpiHeroProps, SlideKpiHeroDelta } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `label` | `string` |  | 数字が何か（「月次売上」）。**必須**。 |
+| `value` | `number \| null` |  | 数値。`null` は「—」と表示される。**必須**。`format` で整形される（元の数値は `data-raw` に残り、書き出しやテストで使う）。 |
+| `format` | `ValueFormat` |  | 値の整形（`"currency"` / `"percent"` など）。`delta` の既定の整形にもなる。 |
+| `display` | `string` |  | 表示する文字だけを置き換える（元の数値は `value` のまま）。 |
+| `delta` | `SlideKpiHeroDelta` |  | `{ value: number; format?: ValueFormat }`。増減の大きさを符号付きで（例: `0.074` と `format: "percent"` で「+7.4%」）。向きは符号で決まり、▲ ▼ と「増」「減」も出る。`format` の既定は `format`。省くと増減は出ない。 |
+| `betterWhen` | `"up" \| "down"` | `"up"` | `delta` のどちらの向きが良いか。色が決まる。 |
+| `comparisonLabel` | `string` |  | `delta` の比較相手（「前月比」）。 |
+| `trend` | `{ x: string; y: number }[]` |  | 右側の線の点。省くと数字だけの 1 枚になる。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideKpiHero } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideKpiHero
+    title="9 月の売上は過去最高の 5.4 億円"
+    label="月次売上"
+    value={540_000_000}
+    format="currency"
+    delta={{ value: 0.074, format: "percent" }}
+    comparisonLabel="前月比"
+    trend={[
+      { x: "4 月", y: 460_000_000 }, { x: "5 月", y: 480_000_000 }, { x: "6 月", y: 490_000_000 },
+      { x: "7 月", y: 500_000_000 }, { x: "8 月", y: 503_000_000 }, { x: "9 月", y: 540_000_000 },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- コストのように下がることが良い指標は `betterWhen="down"` と書きます。色は `betterWhen` に従い、向き（▲ ▼ と「増」「減」）は `delta.value` の符号で決まります。
+- 「増」「減」「… 時点」「出典: …」は block が出す日本語固定の文言です。
+- グラフは `EChart` でアニメーションなし。pptx への書き出しはその描画を待ちます。

package/docs/ja/slide/slide-next-actions.md

@@ -0,0 +1,49 @@
+# SlideNextActions
+
+> 次の打ち手。担当・期限・確認する指標つきで 3〜5 件。
+
+次に何をするかを示す 1 枚で、多くのレポートの最後に置きます。アクションごとに担当・期限・確認する指標を添えられます。
+
+```tsx
+import { SlideNextActions } from "@squadbase/vantage/slide";
+import type { SlideNextActionsProps, SlideNextActionsItem } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `title` | `string` | 決定や計画を 1 文で書いた見出し。**必須**。 |
+| `items` | `SlideNextActionsItem[]` | 打ち手。3〜5 件。**必須**。各要素は下の `items[].…` の行。 |
+| `items[].action` | `string` | 何をするか（目的語から始めて 1 文。40 文字程度まで）。**必須**。 |
+| `items[].owner` | `string` | 担当。 |
+| `items[].due` | `string` | 期限。書いたまま 1 行で表示される（「10/31」。10 文字程度まで）。 |
+| `items[].metric` | `string` | 確認する指標。 |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideNextActions } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideNextActions
+    title="解約と新規獲得の施策を 3 つ、11 月末までに始める"
+    items={[
+      { action: "解約予兆スコアの上位 50 社に CS が連絡する", owner: "CS 部 山田", due: "10/31", metric: "解約率 1.5% 以下" },
+      { action: "紹介プログラムの特典を見直す", owner: "マーケ 佐藤", due: "11/15", metric: "紹介経由の新規 20 社" },
+      { action: "料金ページの導線を改善する", owner: "プロダクト 鈴木", due: "11/30", metric: "申込率 +1pt" },
+    ]}
+  />
+</Slide>
+```
+
+## 注意
+
+- 担当・期限・確認する指標の列は、1 件でも値があるときだけ出ます。
+- 列見出し（担当 / 期限 / 確認する指標）は block が出す日本語固定で、上書きできません。
+- `due` は書いたまま表示されます（「10/31」「来週まで」）。6 件以上は `console.warn` が出ます。

package/docs/ja/slide/slide-scorecard-table.md

@@ -0,0 +1,54 @@
+# SlideScorecardTable
+
+> 指標ごとの目標と実績、状態を並べるスコアカード表。
+
+指標ごとに目標・実績・達成率と、状態（順調 / 要注意 / 遅延）を並べる表の 1 枚です。状態は色付きの点と言葉の両方で示すので、色だけに頼りません。
+
+```tsx
+import { SlideScorecardTable } from "@squadbase/vantage/slide";
+import type { SlideScorecardTableProps, SlideScorecardRow, SlideScorecardStatus } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` |  | 結論を 1 文で書いた見出し（アクションタイトル）。**必須**。 |
+| `rows` | `SlideScorecardRow[]` |  | 行。8 行まで。**必須**。各要素は下の `rows[].…` の行。 |
+| `rows[].metric` | `string` |  | 指標名（20 文字程度まで）。**必須**。 |
+| `rows[].value` | `number \| null` |  | 実績。`null` は「—」と表示される。**必須**。 |
+| `rows[].format` | `ValueFormat` |  | `value` と `target` の整形（`"currency"` / `"percent"` など）。 |
+| `rows[].display` | `string` |  | 表示する実績の文字だけを置き換える（元の数値は `value` のまま）。 |
+| `rows[].target` | `number` |  | 目標。`format` は `value` と同じ。どれかの行に目標があると達成率の列が出る（value ÷ target）。 |
+| `rows[].betterWhen` | `"up" \| "down"` | `"up"` | どちらの向きが良いか。`"down"` なら達成率は target ÷ value になり、コストの目標を下回ると 100% を超える。 |
+| `rows[].status` | `SlideScorecardStatus` |  | `"on"`（順調）/ `"risk"`（要注意）/ `"off"`（遅延）。値から導かず、渡したものをそのまま出す。**必須**。 |
+| `columns` | `Partial<Record<"metric" \| "target" \| "actual" \| "attainment" \| "status", string>>` |  | 見出しの語を差し替える。省いた列は既定（指標 / 目標 / 実績 / 達成率 / 状態）。状態の言葉（順調 / 要注意 / 遅延）は上書きできない。 |
+| `asOf` | `string` |  | 数字を取った日。日付のみ（例: `"2026-10-01"`）。block が「2026-10-01 時点」と 1 回だけ「時点」を付けるので、「時点」は書かない。 |
+| `source` | `string` |  | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideScorecardTable } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideScorecardTable
+    title="4 指標のうち 2 つが目標どおり、解約と新規が遅れている"
+    rows={[
+      { metric: "月次売上", value: 540_000_000, target: 520_000_000, format: "currency", status: "on" },
+      { metric: "継続率", value: 0.982, target: 0.98, format: { type: "percent", digits: 1 }, status: "on" },
+      { metric: "解約率", value: 0.018, target: 0.015, format: { type: "percent", digits: 1 }, betterWhen: "down", status: "risk" },
+      { metric: "新規獲得", value: 38, target: 50, format: { type: "number", unit: "社" }, status: "off" },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## 注意
+
+- 7 行からは文字が本文から注記のサイズに下がります。9 行以上は描画されますが `console.warn` が出ます。

package/docs/ja/slide/slide-section.md

@@ -0,0 +1,44 @@
+# SlideSection
+
+> 章の区切りの 1 枚。章タイトルと、任意で目次。
+
+章の区切りに置く 1 枚です。左に章タイトル、`items` を渡すと右に目次（番号つきの一覧）を出し、`current` の章を強調します。
+
+```tsx
+import { SlideSection } from "@squadbase/vantage/slide";
+import type { SlideSectionProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **`<Slide>` 1 枚の中身**です。`<Slide>` 自体は持たないので、`<Slide>` の直下に置いてください。ルートはキャンバス（1920×1080）いっぱい（100%）に広がり、`className` は受けません。余白・文字サイズ・グリッドは block の中で決まっている（1920×1080 の 12 カラム）ので、寸法を足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `title` | `string` | 章のタイトル。**必須**。 |
+| `index` | `number` | 章番号。タイトルの上に「02」のように 2 桁で出る。 |
+| `lead` | `string` | その章が何に答えるかを 1 行で。 |
+| `items` | `string[]` | デッキの章の一覧。右側に番号つきの目次として出る。1 行ずつなので 6 件ほどまで。省くとタイトルが全幅を使う。 |
+| `current` | `number` | `items` のうち強調する章（1 始まり）。 |
+
+## 使い方
+
+```tsx
+import { Slide, SlideSection } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideSection
+    index={2}
+    title="解約の動向"
+    lead="どの層が、いつ離れているか"
+    items={["全体像", "解約の動向", "要因の分析", "次の打ち手"]}
+    current={2}
+  />
+</Slide>
+```
+
+## 注意
+
+- 段階表示（reveal）は持ちません。必要なら呼び出し側で `Steps` などで包んでください。
+- 目次に出る番号は `items` の順で自動採番されます。`index` は章番号の表示だけに使われます。

package/docs/ja/slide/slide-source-line.md

@@ -0,0 +1,34 @@
+# SlideSourceLine
+
+> [部品] スライド 1 枚の足元の 1 行。時点・出典・ページ番号。
+
+スライド 1 枚の足元に置く 1 行です。データの時点と出典、任意で右端にページ番号を出します。12 カラムのグリッドの最下段に置く**部品**で、1 枚まるごとの block ではありません。出すものがなければ何も描きません。
+
+```tsx
+import { SlideSourceLine } from "@squadbase/vantage/slide";
+import type { SlideSourceLineProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> これは **スライドの部品**で、1 枚まるごとの block ではありません。`<Slide>` 内の 12 カラムのグリッドの行として置きます（ルートはキャンバスいっぱい（100%×100%）には広がりません）。寸法はすべて部品の中で決まっているので、足さないでください。デッキの組み方は [スライド](page-types/slide) を参照してください。
+
+## props
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `asOf` | `string` | 数字を取った日。日付のみ（例: `"2026-10-20"`）。「2026-10-20 時点」と表示される。「時点」は書かない。 |
+| `source` | `string` | 出典（例: `"社内 BI"`）。「出典: 社内 BI」と表示される。 |
+| `page` | `{ current: number; total: number }` | 右端に「3 / 12」と出すページ番号。呼び出し側から渡す。 |
+
+## 使い方
+
+```tsx
+import { SlideSourceLine } from "@squadbase/vantage/slide";
+
+<SlideSourceLine asOf="2026-10-20" source="社内 BI" page={{ current: 3, total: 12 }} />
+```
+
+## 注意
+
+- ページ番号は SquadKit がスライドの位置を読めないため、`page` で渡します。
+- 「… 時点」「出典: …」は固定の日本語です。

package/docs/ja/ui/empty.md

@@ -10,7 +10,7 @@ import { Empty } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | 説明 |
 | --- | --- | --- | --- |
-| `title` | `string` | `"Nothing here yet"` | 見出し。 |
+| `title` | `string` | `"表示できるデータがありません"` | 見出し。 |
 | `description` | `string` |  | 見出しの下の補足文。 |
 | `icon` | `ReactNode` |  | 見出しの上に置く絵柄。 |
 | `action` | `ReactNode` |  | 下部に置く次の一手（ボタンやリンク）。 |

package/docs/ja/ui/error-state.md

@@ -10,8 +10,9 @@ import { ErrorState } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | 説明 |
 | --- | --- | --- | --- |
-| `title` | `string` | `"Something went wrong"` | 見出し。 |
-| `message` | `ReactNode` |  | 詳細。エラーメッセージをそのまま出せます。 |
+| `title` | `string` | `"データを読み込めませんでした"` | 見出し。 |
+| `message` | `ReactNode` | `"時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。"` | 何が起きたか、次に何をすればよいかを平易な言葉で。 |
+| `details` | `ReactNode` |  | 技術的な詳細（エラーメッセージやステータスコード）。「詳細を表示」の中に折りたたまれます。 |
 | `action` | `ReactNode` |  | 再試行ボタンなど。 |
 | `className` | `string` |  | 足すクラス。 |
 
@@ -34,7 +35,7 @@ export default function Customers() {
   if (error)
     return (
       <ErrorState
-        message={error.message}
+        details={error.message}
         action={<Button variant="outline" onClick={() => refetch()}>再試行</Button>}
       />
     );

package/docs/ja/ui/loading.md

@@ -12,7 +12,7 @@ import { Loading } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | 説明 |
 | --- | --- | --- | --- |
-| `label` | `string` | `"Loading…"` | スピナーの右に出すテキスト。 |
+| `label` | `string` | `"読み込んでいます…"` | スピナーの右に出すテキスト。 |
 | `className` | `string` |  | 足すクラス。既定では最小高 30vh で縦横中央に置かれます。 |
 
 レイアウトを保ったまま待たせたいときは [`Skeleton`](ui/skeleton)、ボタンの中など

package/docs/ja/ui/toggle-group.md

@@ -14,14 +14,15 @@ import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui";
 | --- | --- | --- | --- |
 | `value` | `string[]` |  | 選択中の値。**単一選択でも配列**。 |
 | `onValueChange` | `(value: string[]) => void` |  | 変更時。配列で返る。 |
-| `toggleMultiple` | `boolean` |  | 複数選択を許す。 |
+| `multiple` | `boolean` | `false` | `true` で複数選択を許す。 |
 | `variant` | `"default" \| "outline"` | `"default"` |  |
 | `size` | `"default" \| "sm" \| "lg"` | `"default"` |  |
 | `spacing` | `number` | `2` | 項目の間隔。`0` で連結された帯になる。 |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
 
 > [!WARNING]
-> Radix 版の `type="single"` / `type="multiple"` はありません。単一選択は「配列の長さを 1 に保つ」
-> という運用になります。その処理は
+> Radix 版の `type="single"` / `type="multiple"` はありません。代わりに boolean の `multiple` が
+> あり、既定（`false`）では同時に押せるのは 1 つだけです。ただし単一選択でも `value` は長さ 1 以下
+> の配列になります。その扱いは
 > [`SegmentedControl`](parts/segmented-control) に入っているので、
 > 単一選択ならそちらを使うのが確実です。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage",
-  "version": "0.6.2-dev1.01caa72",
+  "version": "0.6.2-dev1.02aab78",
   "description": "Data dashboard framework for Squadbase Editor. Vite-powered, config-free, one-file first.",
   "type": "module",
   "license": "MIT",
@@ -152,7 +152,7 @@
     "vitest": "^5.0.5",
     "@squadbase/squadkit": "0.0.0"
   },
-  "gitHead": "01caa72ff0cba08c43ecb02cae2ba988eab1b2c1",
+  "gitHead": "02aab78e1f5fcbb0c508300dcb39825ca26b23a0",
   "scripts": {
     "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
     "build:js": "tsup --no-dts",

package/registry/ui/delta.tsx

@@ -9,7 +9,7 @@
  * Direction, rate, colour and wording are all derived here from `value` and
  * `comparison` (via `computeComparison`); none of them can be passed in, so they
  * cannot contradict each other. Colour is never the only signal: the arrow and
- * the sign always accompany it. Set `polarity="lower-is-better"` for metrics
+ * the sign always accompany it. Set `betterWhen="down"` for metrics
  * where a rise is bad (churn, error rate).
  *
  * - A flat change (inside `neutralBand`) uses a right arrow (→), never a minus-like dash, so it cannot
@@ -31,7 +31,7 @@
  * // Vantage: import { Delta } from "@squadbase/vantage/components"
  *
  * <Delta value={48_200_000} comparison={{ previous: 42_900_000, vs: "prior-period", grain: "month" }} />
- * <Delta value={0.021} format="percent" polarity="lower-is-better"
+ * <Delta value={0.021} format="percent" betterWhen="down"
  *   comparison={{ previous: 0.026, vs: "prior-year", grain: "month" }} />
  */
 import { forwardRef, type HTMLAttributes } from "react"
@@ -85,7 +85,9 @@ export interface DeltaProps
   value: number | null | undefined
   /** What the value is compared against. Required so the delta always carries its label. */
   comparison: Comparison
-  /** Whether a rise is good. Default `"higher-is-better"`. */
+  /** 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"` is only reachable here. `betterWhen` wins if both are given. */
   polarity?: Polarity
   /** Absolute ratio below which the change reads as flat (0.01 = 1%). Default 0.01. */
   neutralBand?: number
@@ -134,6 +136,7 @@ export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
     {
       value,
       comparison,
+      betterWhen,
       polarity,
       neutralBand,
       format,
@@ -149,7 +152,7 @@ export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
   ) => {
     // Nothing to compare against yet (a draft fills props in steps).
     if (!comparison) return null
-    const result = computeComparison(value, comparison, { polarity, neutralBand })
+    const result = computeComparison(value, comparison, { polarity: betterWhen ? (betterWhen === "down" ? "lower-is-better" : "higher-is-better") : polarity, neutralBand })
     const display = change ?? defaultChangeDisplay(format)
     const formatDigits = typeof format === "object" && format !== null && "digits" in format ? format.digits : undefined
     const changeDigits = display === "points" ? (digits ?? formatDigits) : digits