@squadbase/vantage 0.6.2-dev1.0017a4d → 0.6.2-dev1.02aab78

package/dist/table/index.js

@@ -2,7 +2,7 @@ import { FILE_PAGE_MAX_ROWS, FILE_PAGE_MAX_BYTES } from '../chunk-C2CX6GLX.js';
 import { useQuery } from '../chunk-V3LF7BE7.js';
 import '../chunk-XQUSGIDG.js';
 import { Loading, ErrorState } from '../chunk-2N72FKLB.js';
-import { PageShell, PageShellHeader, PageShellHeading, PageShellTitle, PageShellMeta, PageShellActions, PageShellContent } from '../chunk-RU6WKEOG.js';
+import { PageShell, PageShellHeader, PageShellHeading, PageShellTitle, PageShellMeta, PageShellActions, PageShellContent } from '../chunk-QOXXOFGL.js';
 import '../chunk-JXFCSF3K.js';
 import '../chunk-2IAPIOPS.js';
 import '../chunk-57GHR5LN.js';

package/dist/{upgrade-JHXZBGQS.js → upgrade-7ZXMCTTR.js}

@@ -1,6 +1,6 @@
 import { syncAgentsFile } from './chunk-AABMKHEU.js';
-import { generateArtifacts } from './chunk-WAMZWZJB.js';
-import './chunk-CEXAQQ5W.js';
+import { generateArtifacts } from './chunk-R6MTJAHX.js';
+import './chunk-S5MDTHH7.js';
 import { scanProject } from './chunk-RNTDBX6S.js';
 import { frameworkVersion, printJson, log } from './chunk-GNXCX4WE.js';
 import './chunk-C2CX6GLX.js';
@@ -25,5 +25,5 @@ async function upgrade(root, args) {
 }
 
 export { upgrade };
-//# sourceMappingURL=upgrade-JHXZBGQS.js.map
-//# sourceMappingURL=upgrade-JHXZBGQS.js.map
+//# sourceMappingURL=upgrade-7ZXMCTTR.js.map
+//# sourceMappingURL=upgrade-7ZXMCTTR.js.map

package/dist/{upgrade-JHXZBGQS.js.map → upgrade-7ZXMCTTR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/cli/upgrade.ts"],"names":[],"mappings":";;;;;;;;;;AAWA,eAAsB,OAAA,CAAQ,MAAc,IAAA,EAAmC;AAC7E,EAAA,MAAM,UAAU,gBAAA,EAAiB;AACjC,EAAA,MAAM,KAAA,GAAQ,YAAY,IAAI,CAAA;AAC9B,EAAA,iBAAA,CAAkB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAKjC,EAAA,MAAM,MAAA,GAAS,eAAe,IAAI,CAAA;AAElC,EAAA,IAAI,IAAA,CAAK,MAAM,IAAA,EAAM;AACnB,IAAA,SAAA,CAAU,EAAE,EAAA,EAAI,IAAA,EAAM,OAAA,EAAS,UAAA,EAAY,EAAC,EAAG,WAAA,EAAa,IAAA,EAAM,YAAA,EAAc,MAAA,KAAW,SAAA,EAAW,CAAA;AACtG,IAAA,OAAO,CAAA;AAAA,EACT;AAEA,EAAA,GAAA,CAAI,KAAA,CAAM,CAAA,gBAAA,EAAc,OAAO,CAAA,CAAE,CAAA;AACjC,EAAA,GAAA,CAAI,GAAG,iCAAiC,CAAA;AACxC,EAAA,IAAI,MAAA,KAAW,SAAA,EAAW,GAAA,CAAI,EAAA,CAAG,kDAAkD,CAAA;AACnF,EAAA,GAAA,CAAI,KAAK,wDAAwD,CAAA;AACjE,EAAA,OAAO,CAAA;AACT","file":"upgrade-JHXZBGQS.js","sourcesContent":["import { generateArtifacts } from \"../core/generate\"\nimport { scanProject } from \"../core/scan\"\nimport { syncAgentsFile } from \"./add\"\nimport { frameworkVersion, log, printJson, type ParsedArgs } from \"./util\"\n\n/**\n * `vantage upgrade` — reconcile generated artifacts with the installed\n * framework version and apply any needed code transforms. v0.1 only\n * regenerates artifacts and re-syncs a managed AGENTS.md + agents/*.md; the\n * migration hook exists for future major versions.\n */\nexport async function upgrade(root: string, args: ParsedArgs): Promise<number> {\n  const version = frameworkVersion()\n  const model = scanProject(root)\n  generateArtifacts({ root, model })\n\n  // Keep an adopted AGENTS.md + agents/*.md (the app-author map and its\n  // per-artifact-type knowledge files) in step with the framework's canonical\n  // copies. No-op when the app never ran `vantage add agents`.\n  const agents = syncAgentsFile(root)\n\n  if (args.flags.json) {\n    printJson({ ok: true, version, transforms: [], regenerated: true, agentsSynced: agents === \"updated\" })\n    return 0\n  }\n\n  log.brand(`upgrade → v${version}`)\n  log.ok(\"Regenerated .vantage artifacts.\")\n  if (agents === \"updated\") log.ok(\"Synced AGENTS.md and agents/ from the framework.\")\n  log.info(\"No breaking code transforms required for this version.\")\n  return 0\n}\n"]}
+{"version":3,"sources":["../src/cli/upgrade.ts"],"names":[],"mappings":";;;;;;;;;;AAWA,eAAsB,OAAA,CAAQ,MAAc,IAAA,EAAmC;AAC7E,EAAA,MAAM,UAAU,gBAAA,EAAiB;AACjC,EAAA,MAAM,KAAA,GAAQ,YAAY,IAAI,CAAA;AAC9B,EAAA,iBAAA,CAAkB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAKjC,EAAA,MAAM,MAAA,GAAS,eAAe,IAAI,CAAA;AAElC,EAAA,IAAI,IAAA,CAAK,MAAM,IAAA,EAAM;AACnB,IAAA,SAAA,CAAU,EAAE,EAAA,EAAI,IAAA,EAAM,OAAA,EAAS,UAAA,EAAY,EAAC,EAAG,WAAA,EAAa,IAAA,EAAM,YAAA,EAAc,MAAA,KAAW,SAAA,EAAW,CAAA;AACtG,IAAA,OAAO,CAAA;AAAA,EACT;AAEA,EAAA,GAAA,CAAI,KAAA,CAAM,CAAA,gBAAA,EAAc,OAAO,CAAA,CAAE,CAAA;AACjC,EAAA,GAAA,CAAI,GAAG,iCAAiC,CAAA;AACxC,EAAA,IAAI,MAAA,KAAW,SAAA,EAAW,GAAA,CAAI,EAAA,CAAG,kDAAkD,CAAA;AACnF,EAAA,GAAA,CAAI,KAAK,wDAAwD,CAAA;AACjE,EAAA,OAAO,CAAA;AACT","file":"upgrade-7ZXMCTTR.js","sourcesContent":["import { generateArtifacts } from \"../core/generate\"\nimport { scanProject } from \"../core/scan\"\nimport { syncAgentsFile } from \"./add\"\nimport { frameworkVersion, log, printJson, type ParsedArgs } from \"./util\"\n\n/**\n * `vantage upgrade` — reconcile generated artifacts with the installed\n * framework version and apply any needed code transforms. v0.1 only\n * regenerates artifacts and re-syncs a managed AGENTS.md + agents/*.md; the\n * migration hook exists for future major versions.\n */\nexport async function upgrade(root: string, args: ParsedArgs): Promise<number> {\n  const version = frameworkVersion()\n  const model = scanProject(root)\n  generateArtifacts({ root, model })\n\n  // Keep an adopted AGENTS.md + agents/*.md (the app-author map and its\n  // per-artifact-type knowledge files) in step with the framework's canonical\n  // copies. No-op when the app never ran `vantage add agents`.\n  const agents = syncAgentsFile(root)\n\n  if (args.flags.json) {\n    printJson({ ok: true, version, transforms: [], regenerated: true, agentsSynced: agents === \"updated\" })\n    return 0\n  }\n\n  log.brand(`upgrade → v${version}`)\n  log.ok(\"Regenerated .vantage artifacts.\")\n  if (agents === \"updated\") log.ok(\"Synced AGENTS.md and agents/ from the framework.\")\n  log.info(\"No breaking code transforms required for this version.\")\n  return 0\n}\n"]}

package/dist/vite/index.js

@@ -1,6 +1,6 @@
-export { vantagePlugin } from '../chunk-2ICNHUG6.js';
-import '../chunk-WAMZWZJB.js';
-import '../chunk-CEXAQQ5W.js';
+export { vantagePlugin } from '../chunk-7652CGJJ.js';
+import '../chunk-R6MTJAHX.js';
+import '../chunk-S5MDTHH7.js';
 import '../chunk-RNTDBX6S.js';
 import '../chunk-46QI6GFC.js';
 import '../chunk-B7LLBNLV.js';

package/docs/en/changelog.md

@@ -15,6 +15,8 @@ The dev server can now run behind a reverse proxy (2026-09-23).
 
 ### Added
 
+- **App display language `lang`.** `export const lang = "ja"` (a literal) in the root `_layout.tsx` becomes `<html lang>`.
+  Japanese slides and docs no longer break mid-phrase, and the slide toolbar switches to Japanese. Unset stays `"en"`.
 - **`--host [addr]` and `--allowed-hosts <list|true>`** on `vantage dev` / SPA `vantage preview`.
   Vite rejects with 403 any request whose `Host` header is not `localhost`, so anything with
   **another hostname in front of the server** — a sandbox preview proxy, a tunnel — could not reach

package/docs/en/components.md

@@ -154,8 +154,10 @@ over 10 MB to every build, so it is deliberately kept apart.
 
 Blocks for [slide](page-types/slide) and [document](page-types/doc) pages. They live on their own subpaths, apart from `/components`, and `vantage add` does not copy them — import and use them.
 
-- **slide**: the content of one `<Slide>` (not `<Slide>` itself). [`SlideCover`](slide/slide-cover) / [`SlideExecSummary`](slide/slide-exec-summary) / [`SlideKpiHero`](slide/slide-kpi-hero) / [`SlideKpiGrid`](slide/slide-kpi-grid) / [`SlideChartInsight`](slide/slide-chart-insight) / [`SlideScorecardTable`](slide/slide-scorecard-table) / [`SlideNextActions`](slide/slide-next-actions)
-- **doc**: sections and parts placed inside `<Document>` (`DocFigure` / `DocDataTable` / `DocCallout` go inside a section). [`DocReportHeader`](doc/doc-report-header) / [`DocExecutiveSummary`](doc/doc-executive-summary) / [`DocKpiScorecard`](doc/doc-kpi-scorecard) / [`DocFigure`](doc/doc-figure) / [`DocDataTable`](doc/doc-data-table) / [`DocCallout`](doc/doc-callout) / [`DocKeyFindings`](doc/doc-key-findings) / [`DocActionItems`](doc/doc-action-items)
+- **slide**: the content of one `<Slide>` (not `<Slide>` itself). [`SlideCover`](slide/slide-cover) / [`SlideExecSummary`](slide/slide-exec-summary) / [`SlideKpiHero`](slide/slide-kpi-hero) / [`SlideKpiGrid`](slide/slide-kpi-grid) / [`SlideChartInsight`](slide/slide-chart-insight) / [`SlideScorecardTable`](slide/slide-scorecard-table) / [`SlideNextActions`](slide/slide-next-actions) / [`SlideSection`](slide/slide-section) / [`SlideComparison`](slide/slide-comparison) / [`SlideChartFull`](slide/slide-chart-full)
+- **slide parts**: parts used inside a slide (not whole slides). [`SlideHeading`](slide/slide-heading) / [`SlideSourceLine`](slide/slide-source-line) / [`SlideColumns`, `SlideColumn`](slide/slide-columns)
+- **doc**: sections and parts placed inside `<Document>` (`DocFigure` / `DocDataTable` / `DocCallout` go inside a section). [`DocReportHeader`](doc/doc-report-header) / [`DocExecutiveSummary`](doc/doc-executive-summary) / [`DocKpiScorecard`](doc/doc-kpi-scorecard) / [`DocFigure`](doc/doc-figure) / [`DocDataTable`](doc/doc-data-table) / [`DocCallout`](doc/doc-callout) / [`DocKeyFindings`](doc/doc-key-findings) / [`DocActionItems`](doc/doc-action-items) / [`DocNotesAndSources`](doc/doc-notes-and-sources)
+- **doc parts**: a part placed inside a sentence (also usable in slides). [`DeltaText`](doc/delta-text)
 
 ## Putting it together
 

package/docs/en/doc/delta-text.md

@@ -0,0 +1,40 @@
+# DeltaText
+
+> [Part] An inline change — ▲ ▼ and a signed value — for documents and slides.
+
+A change as a bare inline `span`: a mark plus a signed value ("▲ +3.2%"), so print and colour-blind readers get the direction; colour only adds good or bad. It sets no text size and takes the size of the line it sits in. It is a **part** usable in both documents and slides, not a section or a slide block.
+
+```tsx
+import { DeltaText } from "@squadbase/vantage/doc";
+import type { DeltaTextProps } from "@squadbase/vantage/doc";
+// The same part is available from the slide subpath
+// import { DeltaText } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **a part to place inside a sentence**. It has no dimensions or text size of its own and follows the line it sits in. It is separate from the dashboard `Delta`.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number \| null` |  | The change itself; its direction comes from the sign. `null` shows 「—」. **Required.** |
+| `format` | `ValueFormat` |  | How to format the value (`"percent"`, `"currency"`, …). Printed with an explicit sign. |
+| `betterWhen` | `"up" \| "down"` | `"up"` | Which direction is good; decides the colour. Use `"down"` for churn and cost. |
+| `comparisonLabel` | `string` |  | Name of the comparison ("vs last month"). Printed before the change, muted. |
+
+## Usage
+
+```tsx
+import { DeltaText } from "@squadbase/vantage/doc";
+
+<p>
+  Revenue in September was ¥540M (<DeltaText value={0.074} format="percent" comparisonLabel="vs last month" />).
+  Churn is 1.8% (<DeltaText value={-0.006} format="percent" betterWhen="down" comparisonLabel="vs last month" />).
+</p>
+```
+
+## Notes
+
+- Zero is shown as 「→」 in the muted colour.
+- The spoken words (「増」, 「減」, 「横ばい」, 「改善」, 「悪化」) in the accessible label are fixed in Japanese.

package/docs/en/doc/doc-notes-and-sources.md

@@ -0,0 +1,43 @@
+# DocNotesAndSources
+
+> The end matter of a document — notes, definitions of terms and data sources.
+
+The section to put last in a document. It prints numbered notes, definitions of terms and the data sources (with their as-of dates). A part with nothing in it is not drawn; with all three empty nothing renders.
+
+```tsx
+import { DocNotesAndSources } from "@squadbase/vantage/doc";
+import type { DocNotesAndSourcesProps, DocDefinition, DocSource } from "@squadbase/vantage/doc";
+```
+
+> [!NOTE]
+> This is **one section placed directly under `<Document>`**. The document sets heading and body sizes and the width, so no dimensions are set here. Markdown strings are not parsed. For the whole page, see [Document](page-types/doc). The sub-headings ("注記", "用語の定義", "出典") and 「（データ時点 …）」 are fixed in Japanese.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `"注記・出典"` | The section heading. |
+| `headingLevel` | `2 \| 3` | `2` | Heading level: `2` directly under `<Document>`, `3` inside another section. The sub-headings go one level lower. |
+| `notes` | `ReactNode[]` |  | Notes, printed as a numbered list (provisional figures, exclusions). |
+| `definitions` | `DocDefinition[]` |  | Definitions of terms: `{ term: string; description: ReactNode }`. |
+| `sources` | `DocSource[]` |  | Data sources: `{ name: string; asOf?: string }`. `asOf` is a date only (e.g. `"2026-10-03"`), printed as 「（データ時点 2026-10-03）」. |
+
+## Usage
+
+```tsx
+import { Document, DocNotesAndSources } from "@squadbase/vantage/doc";
+
+<Document>
+  {/* …body sections… */}
+  <DocNotesAndSources
+    notes={["September figures are provisional; final values are posted on October 10.", "Refunds are excluded from revenue."]}
+    definitions={[{ term: "Churn rate", description: "Contracts cancelled in the month divided by contracts at the start of the month." }]}
+    sources={[{ name: "Contract DB", asOf: "2026-10-03" }, { name: "Accounting system" }]}
+  />
+</Document>
+```
+
+## Notes
+
+- Each part is kept together so it does not break across pages when printed.
+- `asOf` is date only; the 「データ時点」 wording is added for you.

package/docs/en/pages-and-metadata.md

@@ -60,6 +60,21 @@ No `navLabel` is set, so the nav shows the same string. To change it, **rename t
 prefix it with `_` to stop it routing and render it from a `.tsx` page with `FilePageView`, where a
 `definePage` of your own applies.
 
+## App display language
+
+Export `lang` as a literal from the root `_layout.tsx` and it becomes `<html lang>`.
+
+```tsx
+// src/_layout.tsx
+export const lang = "ja"
+```
+
+- The value is a BCP 47 language tag (`"ja"`, `"en"`, `"ja-JP"`, …). Variables and template interpolation are not read.
+- Only the root `_layout.tsx` is read. A `lang` in a nested layout or a page is ignored.
+- A missing or malformed value falls back to `"en"` (malformed values raise a diagnostic). Apps that specify nothing produce the same output as before.
+- With `ja`, Japanese text in slides and doc pages no longer breaks mid-phrase (`word-break: auto-phrase`), and the slide toolbar messages switch to Japanese.
+- In dev, editing `lang` reloads the page automatically.
+
 ## Relationship to Fast Refresh
 
 Even with a non-component export like `page`, Vantage handles it internally so React Fast Refresh

package/docs/en/parts/delta.md

@@ -5,7 +5,7 @@
 Shows a change as one line: "↑ +12.4% 前期比". **Direction, rate, colour and wording are all computed
 from `value` and `comparison`** and cannot be passed in, so the arrow and the colour can never disagree.
 Colour is never the only signal — the arrow and the sign always accompany it. For metrics where a rise
-is bad (churn, error rate), pass `polarity="lower-is-better"`.
+is bad (churn, error rate), pass `betterWhen="down"` (`polarity` is the older name and still works).
 
 It replaces the deprecated [`TrendIndicator`](parts/trend-indicator).
 
@@ -18,7 +18,8 @@ import type { DeltaProps, Comparison, Polarity } from "@squadbase/vantage/compon
 | --- | --- | --- | --- |
 | `value` | `number \| null \| undefined` |  | The current value. **Required.** The previous one comes from `comparison`. |
 | `comparison` | `Comparison` |  | What the value is compared against. **Required**, so the change always carries its label. See below. |
-| `polarity` | `"higher-is-better" \| "lower-is-better"` | `"higher-is-better"` | Whether a rise is good. |
+| `betterWhen` | `"up" \| "down"` | `"up"` | Which direction is good. Use `"down"` for metrics like churn. Wins over `polarity`. |
+| `polarity` | `"higher-is-better" \| "lower-is-better" \| "neutral"` | `"higher-is-better"` | Deprecated: the older name of `betterWhen`. `"neutral"` (no good or bad colouring) is only available here. |
 | `neutralBand` | `number` | `0.01` | Absolute ratio below which the change reads as flat. Default 1%. |
 | `variant` | `"badge" \| "inline"` | `"badge"` | A bordered badge, or plain text for use inline. |
 | `locale` | `string` | `"ja-JP"` | Locale for the percent. |
@@ -43,7 +44,7 @@ import type { DeltaProps, Comparison, Polarity } from "@squadbase/vantage/compon
 <Delta value={1_240_000} comparison={{ previous: 1_103_000, vs: "prior-period" }} />
 
 // A metric where down is good
-<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
+<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} betterWhen="down" />
 ```
 
 The colours come from the `--positive` / `--negative` / `--neutral` tokens. To show a KPI as a whole

package/docs/en/parts/kpi-card.md

@@ -20,7 +20,8 @@ import type { KpiCardProps, KpiCardSource, Comparison, Polarity, ValueFormat } f
 | `format` | `ValueFormat` | `"compact"` | How the value is formatted (see the format / comparison page); also used for previous, target and remaining. |
 | `locale` | `string` | `"ja-JP"` | The formatting locale. |
 | `comparison` | `Comparison` |  | What the value is compared against (`{ previous, vs, label? }`). Adds the change and the previous-actual line. |
-| `polarity` | `"higher-is-better" \| "lower-is-better"` | `"higher-is-better"` | Whether a rise is good. Use `"lower-is-better"` for metrics like churn. |
+| `betterWhen` | `"up" \| "down"` | `"up"` | Which direction is good. Use `"down"` for metrics like churn. Wins over `polarity`. |
+| `polarity` | `"higher-is-better" \| "lower-is-better" \| "neutral"` | `"higher-is-better"` | Deprecated: the older name of `betterWhen`. `"neutral"` (no good or bad colouring) is only available here. |
 | `neutralBand` | `number` | `0.01` | Absolute ratio below which the change reads as flat. |
 | `showPrevious` | `boolean` | `true` | Show the previous actual ("前期 400"). Needs `comparison`. |
 | `summary` | `string` |  | The conclusion sentence, as a **template** whose placeholders (below) the card fills. |

package/docs/en/slide/slide-chart-full.md

@@ -0,0 +1,48 @@
+# SlideChartFull
+
+> One chart across all 12 columns, with a one-line note under it.
+
+A slide that gives one chart the full width — for many categories or a long series. A one-line `note` under the chart can say how to read it or what to watch.
+
+```tsx
+import { SlideChartFull } from "@squadbase/vantage/slide";
+import type { SlideChartFullProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **the content of one `<Slide>`**. It does not include `<Slide>` itself, so put it directly inside one. The root fills the canvas (1920×1080) at 100% and takes no `className`. Margins, text sizes and the grid are fixed inside the block (a 12-column grid on 1920×1080), so don't add your own dimensions. For how to build a deck, see [Slide](page-types/slide). The labels the block adds (「… 時点」, 「出典: …」) are fixed in Japanese; `title`, `lead`, `points` and the like are your own text.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The conclusion as one sentence (an action title). **Required.** |
+| `chart` | `SlideChartInsightChart` | `{ type: "line" \| "bar" \| "area"; categories: string[]; series: { name: string; data: number[] }[] }`. **Required.** Same shape and rendering as `SlideChartInsight`. Two or more series show a legend. |
+| `note` | `string` | One line under the chart: how to read it or what to watch. About 60 characters at most. |
+| `asOf` | `string` | The date the numbers were taken, date only (e.g. `"2026-10-01"`). Shown as 「2026-10-01 時点」; don't write 「時点」 yourself. |
+| `source` | `string` | Where the numbers come from (e.g. `"BI"`). Shown as 「出典: BI」. |
+
+## Usage
+
+```tsx
+import { Slide, SlideChartFull } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideChartFull
+    title="Revenue hit a record high in September"
+    chart={{
+      type: "line",
+      categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep"],
+      series: [{ name: "Revenue (¥M)", data: [460, 480, 490, 500, 503, 540] }],
+    }}
+    note="September includes two large deals"
+    asOf="2026-10-01"
+    source="BI"
+  />
+</Slide>
+```
+
+## Notes
+
+- The chart is an `EChart` with no animation and no tooltip. The pptx export waits for it (`data-waitfor="canvas"`).
+- To put reading points next to the chart, use `SlideChartInsight` instead.

package/docs/en/slide/slide-columns.md

@@ -0,0 +1,46 @@
+# SlideColumns
+
+> [Part] The 12-column layout of a slide's body — SlideColumns and SlideColumn.
+
+The 12-column layout of one slide's body. `SlideColumns` lays out `SlideColumn`s, each taking `span` of the 12 columns (8 / 4, 6 / 6, 4 / 4 / 4, …). It is a **part** for the body row of the grid, not a whole-slide block.
+
+```tsx
+import { SlideColumns, SlideColumn } from "@squadbase/vantage/slide";
+import type { SlideColumnsProps, SlideColumnProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **a slide part**, not a whole-slide block. Place it as a row in the 12-column grid inside a `<Slide>`; its root does not fill the canvas (100%×100%). All dimensions are fixed inside the part, so do not add your own. For how to build a deck, see [Slide](page-types/slide).
+
+## Props
+
+### SlideColumns
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` |  | The `SlideColumn`s. **Required.** |
+| `align` | `"start" \| "center" \| "stretch"` | `"stretch"` | Vertical alignment of the columns in the row. |
+
+### SlideColumn
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `span` | `number` | How many of the 12 columns it takes (1–12). **Required.** |
+| `children` | `ReactNode` | The column's content. **Required.** |
+
+## Usage
+
+```tsx
+import { SlideColumns, SlideColumn } from "@squadbase/vantage/slide";
+
+<SlideColumns align="center">
+  <SlideColumn span={8}>{/* chart */}</SlideColumn>
+  <SlideColumn span={4}>{/* reading */}</SlideColumn>
+</SlideColumns>
+```
+
+## Notes
+
+- The spans should add up to 12.
+- The gap and the number of columns come from the slide spec.
+- If a column's content must fill the column's height, set `height: "100%"` on that content.

package/docs/en/slide/slide-comparison.md

@@ -0,0 +1,68 @@
+# SlideComparison
+
+> A vs B, or before and after — 2 to 3 columns side by side.
+
+A slide that compares 2 to 3 columns side by side. Each column has a heading, one main number (with its change) and a few points; an optional `verdict` line sits underneath. The columns share the 12 columns equally (6 / 6 or 4 / 4 / 4).
+
+```tsx
+import { SlideComparison } from "@squadbase/vantage/slide";
+import type { SlideComparisonProps, SlideComparisonColumn } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **the content of one `<Slide>`**. It does not include `<Slide>` itself, so put it directly inside one. The root fills the canvas (1920×1080) at 100% and takes no `className`. Margins, text sizes and the grid are fixed inside the block (a 12-column grid on 1920×1080), so don't add your own dimensions. For how to build a deck, see [Slide](page-types/slide). The labels the block adds (「… 時点」, 「出典: …」) are fixed in Japanese; `title`, `lead`, `points` and the like are your own text.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The conclusion as one sentence (an action title). **Required.** |
+| `columns` | `SlideComparisonColumn[]` | 2 to 3 columns. **Required.** Each column is described below. |
+| `verdict` | `string` | One line saying which side wins or what follows. |
+| `asOf` | `string` | The date the numbers were taken, date only (e.g. `"2026-10-01"`). Shown as 「2026-10-01 時点」; don't write 「時点」 yourself. |
+| `source` | `string` | Where the numbers come from (e.g. `"BI"`). Shown as 「出典: BI」. |
+
+### SlideComparisonColumn
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `heading` | `string` |  | What the column is ("Old plan", "Before"). **Required.** |
+| `points` | `string[]` |  | Short points. **Required.** At most 3 per column, about 24 characters each. Write the same kind of point in each column, in the same order. |
+| `value` | `number \| null` |  | The main number. `null` shows 「—」. Formatted by `format`. |
+| `format` | `ValueFormat` |  | How to format the value (`"currency"`, `"percent"`, …). Also the default format of `delta`. |
+| `display` | `string` |  | A string you already formatted ("¥120M"). Wins over `value`. |
+| `delta` | `{ value: number \| null; format?: ValueFormat }` |  | The change of the main number itself (a ratio for `percent`). Its direction comes from the sign. Without `format`, the column's `format` is used. |
+| `comparisonLabel` | `string` |  | What `delta` is measured against (「前月比」, 「旧プラン比」). Printed muted before the change. |
+| `betterWhen` | `"up" \| "down"` | `"up"` | Which direction of `delta` is good. Use `"down"` for churn and cost. |
+
+## Usage
+
+```tsx
+import { Slide, SlideComparison } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideComparison
+    title="The new plan churns less than the old one"
+    columns={[
+      { heading: "Old plan", value: 0.024, format: "percent", points: ["¥9,800 per month", "No onboarding support"] },
+      {
+        heading: "New plan",
+        value: 0.018,
+        format: "percent",
+        delta: { value: -0.006 },
+        comparisonLabel: "旧プラン比",
+        betterWhen: "down",
+        points: ["¥12,800 per month", "With onboarding support"],
+      },
+    ]}
+    verdict="Onboarding support explains most of the gap"
+    asOf="2026-10-01"
+    source="BI"
+  />
+</Slide>
+```
+
+## Notes
+
+- Fewer than 2 or more than 3 columns, or too many or too long points, log a console warning. Split the slide.
+- The change is drawn with `DeltaText` (▲ ▼ and 「増」/「減」). Polarity is set only by `betterWhen`.

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

@@ -0,0 +1,38 @@
+# SlideHeading
+
+> [Part] The title of one slide — an action title with an optional eyebrow.
+
+The title of one slide: an `h2` at the page size, clamped to 2 lines, with an optional small label above it (`eyebrow`, e.g. the chapter). It is a **part** for the top row of a slide's 12-column grid, not a whole-slide block.
+
+```tsx
+import { SlideHeading } from "@squadbase/vantage/slide";
+import type { SlideHeadingProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **a slide part**, not a whole-slide block. Place it as a row in the 12-column grid inside a `<Slide>`; its root does not fill the canvas (100%×100%). All dimensions are fixed inside the part, so do not add your own. For how to build a deck, see [Slide](page-types/slide).
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The conclusion as one sentence (an action title). Clamped to 2 lines. **Required.** |
+| `eyebrow` | `string` | A short label above the title ("Chapter 2: Churn"). |
+
+## Usage
+
+```tsx
+import { Slide, SlideHeading } from "@squadbase/vantage/slide";
+
+<Slide>
+  <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)" }}>
+    <SlideHeading title="Churn has fallen every month since June" eyebrow="Chapter 2: Churn" />
+    {/* …SlideColumns and so on… */}
+  </div>
+</Slide>
+```
+
+## Notes
+
+- Write the title as the conclusion, not as a topic.
+- It spans all 12 columns of the grid it sits in.

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

@@ -0,0 +1,44 @@
+# SlideSection
+
+> A chapter divider — the chapter title, optionally with an agenda.
+
+A slide that divides the deck into chapters. The chapter title sits on the left; with `items` the right side shows a numbered agenda with the `current` chapter emphasised.
+
+```tsx
+import { SlideSection } from "@squadbase/vantage/slide";
+import type { SlideSectionProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **the content of one `<Slide>`**. It does not include `<Slide>` itself, so put it directly inside one. The root fills the canvas (1920×1080) at 100% and takes no `className`. Margins, text sizes and the grid are fixed inside the block (a 12-column grid on 1920×1080), so don't add your own dimensions. For how to build a deck, see [Slide](page-types/slide). The labels the block adds (「… 時点」, 「出典: …」) are fixed in Japanese; `title`, `lead`, `points` and the like are your own text.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The chapter title. **Required.** |
+| `index` | `number` | The chapter number, shown above the title as two digits ("02"). |
+| `lead` | `string` | One line saying what the chapter answers. |
+| `items` | `string[]` | The chapters of the deck, shown at the right as a numbered agenda. One line each, so about 6 at most. Without it the title takes the full width. |
+| `current` | `number` | The chapter in `items` to emphasise (1-based). |
+
+## Usage
+
+```tsx
+import { Slide, SlideSection } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideSection
+    index={2}
+    title="Churn trends"
+    lead="Which segments leave, and when"
+    items={["Overview", "Churn trends", "Drivers", "Next actions"]}
+    current={2}
+  />
+</Slide>
+```
+
+## Notes
+
+- It has no reveal steps. If you want one, wrap it yourself (for example in `Steps`).
+- The agenda numbers are assigned from the order of `items`; `index` only controls the chapter number above the title.

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

@@ -0,0 +1,34 @@
+# SlideSourceLine
+
+> [Part] The footer line of one slide — as-of date, source and page number.
+
+The footer line of one slide: the data's as-of date and source, and optionally the page number at the right. It is a **part** for the bottom row of a slide's 12-column grid, not a whole-slide block. It renders nothing when it has nothing to show.
+
+```tsx
+import { SlideSourceLine } from "@squadbase/vantage/slide";
+import type { SlideSourceLineProps } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **a slide part**, not a whole-slide block. Place it as a row in the 12-column grid inside a `<Slide>`; its root does not fill the canvas (100%×100%). All dimensions are fixed inside the part, so do not add your own. For how to build a deck, see [Slide](page-types/slide).
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `asOf` | `string` | The date the numbers were taken, date only (e.g. `"2026-10-20"`). Shown as 「2026-10-20 時点」; don't write 「時点」 yourself. |
+| `source` | `string` | Where the numbers come from (e.g. `"BI"`). Shown as 「出典: BI」. |
+| `page` | `{ current: number; total: number }` | The page number, shown at the right as "3 / 12". Passed in by the caller. |
+
+## Usage
+
+```tsx
+import { SlideSourceLine } from "@squadbase/vantage/slide";
+
+<SlideSourceLine asOf="2026-10-20" source="BI" page={{ current: 3, total: 12 }} />
+```
+
+## Notes
+
+- The page number is passed through `page` because SquadKit cannot read the slide's position from the framework.
+- 「… 時点」 and 「出典: …」 are fixed in Japanese.