@squadbase/vantage 0.6.2-dev1.ac99e02 → 0.6.2-dev1.b28a4df

package/skills/vantage-design/SKILL.md

@@ -77,19 +77,27 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 
      ```css
      body {
-       font-family: "<Font>", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
+       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 {
-       --slide-font-display: "<Font>", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, 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);
      }
      ```
 
   欧文の Web フォントだけを先頭に足すときも、日本語の system face(`"Hiragino Sans"` 〜 `Meiryo`)は
   必ず残す。消すとカナ・漢字がブラウザ任せのフォールバックになり、細く表示される。
+  `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` を上の並びに直す(ほかの行は書き換えない)。
   日本語の Web フォントは face が 100 を超えるので原則使わない(pptx 書き出しも壊れる。
   `vantage-slide` の `references/tokens.md` 参照)。
 
+長い表(ダッシュボード): カードに `max-h-*` + `overflow-y-auto` の縦スクロール領域を作らず、
+ページング付きの `DataTablePreset`(`enablePagination`)にする(ホイールや End キーがページに届かなくなるため)。
+
 `DESIGN.md`: `references/format.md` の書式で書く。**色コードを書かない**(トークン名だけ)。
 150 行を超えない(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を出す)。ロゴなどの素材は
 `public/brand/logo.svg` のように `public/` 配下のパスで「ブランド素材」行に書く。

package/templates/AGENTS.md

@@ -93,13 +93,25 @@ root/
 | `@squadbase/vantage/router` | `Link`・`Outlet`・`useParams`・`useSearch`・`useNavigate`・`redirect`・`notFound`・`useRoutes`・`useCurrentRoute`・`useSearchParam`・`useSearchState` |
 | `@squadbase/vantage/query` | `useApiQuery`・`useApiMutation`・`apiJson`・`apiFetch`・`apiUrl`・`ApiError`、ほか `useQuery`/`useMutation` など TanStack Query の再エクスポート |
 | `@squadbase/vantage/ui` | shadcn/ui(Base UI バリアント)プリミティブ(`Button`・`Loading`・`ErrorState`・`Empty` ほか) |
-| `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`) |
+| `@squadbase/vantage/components` | 複合パーツ(`PageShell`・`DashboardCardPreset`・`DataTablePreset`、KPI の `KpiCard`・`Delta`、型付きチャート `LineChart`・`BarChart`・`AreaChart`・`DonutChart`・`BarList` ほか、`EChart`、書式の `formatValue`) |
 | `@squadbase/vantage/table` | `FilePageView`・`TableViewer`(データファイルページの表ビューア) |
 | `@squadbase/vantage/slide` | `SlideDeck`・`Slide`・`Steps`・`Step`・`MorphElement`・`useSlideNumber`・`useIsActiveSlide`(スライド専用。1920×1080 の固定キャンバス) |
 | `@squadbase/vantage/doc` | `Document`(ドキュメント専用。中の素の HTML 要素に見出し・表などのスタイルが当たる) |
 | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
 | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
 
+**KPI は `KpiCard`、増減は `Delta`(`comparison` と `polarity` を渡す)。** 向き・率・色は値から計算
+されるので手で渡さない。`TrendIndicator` は非推奨(`direction` を手で渡すので値と食い違いうる)。props は
+`vantage docs kpi-card` / `vantage docs delta` を引く。
+
+```tsx
+import { KpiCard, Delta } from "@squadbase/vantage/components";
+
+<KpiCard label="売上" value={48_200_000} format="currency"
+  comparison={{ previous: 42_900_000, vs: "prior-period" }} />
+<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
+```
+
 ## モードは 2 つ、切り替えるのは `server/` の有無だけ
 
 `server/` ディレクトリがあれば **fullstack**、無ければ **SPA**。`vantage-manifest.json` の

package/templates/agents/page.md

@@ -177,6 +177,16 @@ refetchOnWindowFocus false・networkMode "always")。挙動を変えたいとき
   `/components` の複合パーツも全部取り出せる(名前は kebab-case: `add ui bar-chart`。
   ブロックは `add block sales-overview`。未知名で実行すると候補が一覧表示される)。
 
+### 長い表はページングする(縦スクロール箱を作らない)
+
+- 行が多い表は `DataTablePreset`(または `DataTable`)に `enablePagination` を付けて**ページング**する
+  (既定は 10 行 / ページ。ページングは既定で無効なので、付け忘れると全行が並ぶ)。素の `<table>` を
+  手書きして全行を流し込まない。
+- カードの中に `max-h-*` + `overflow-y-auto` の**縦スクロール領域を作らない**。ホイールやキー
+  (End / Space)がその箱に吸われ、ページ全体がスクロールしなくなる。高さは内容に任せる。
+- 横に広い表の `overflow-x-auto` は構わない。`SheetGrid`(`.csv` / `.xlsx` のビューア)は
+  グリッドとして意図した入れ子スクロールなので対象外。
+
 ### グラフはまず型付きチャートで描く
 
 - 推移は `LineChart` / `AreaChart`、比較は `BarChart`、構成比は `DonutChart`。`data`(行の配列)・

package/theme.css

@@ -1,3 +1,7 @@
+/* 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) */
+
 /**
  * Vantage design tokens. Imported after `@import "tailwindcss"` by the
  * generated runtime.css. Defines CSS variables (light + dark), maps them to
@@ -18,123 +22,153 @@
      `<select>` popup. */
   color-scheme: light;
 
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.975 0.004 255);
+  --foreground: oklch(0.21 0.02 260);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.21 0.02 260);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.21 0.02 260);
+  --primary: oklch(0.55 0.2 262);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  --secondary: oklch(0.965 0.005 255);
+  --secondary-foreground: oklch(0.25 0.02 260);
+  --muted: oklch(0.965 0.005 255);
+  --muted-foreground: oklch(0.5 0.02 258);
+  --accent: oklch(0.955 0.01 255);
+  --accent-foreground: oklch(0.25 0.02 260);
+  --destructive: oklch(0.53 0.21 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --radius: 0.625rem;
-
-  --chart-1: hsl(221 83% 53%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(31 90% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-
-  /* Slides (@squadbase/vantage/slide).
-     These are aliases, not values. Custom properties resolve lazily, 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>`. */
-  --slide-bg: var(--background);
-  --slide-fg: var(--foreground);
-  --slide-accent: var(--primary);
-  --slide-muted: var(--muted-foreground);
-  --slide-radius: var(--radius);
-  /* A system stack that includes Japanese. The pptx export rasterises through
-     an SVG `foreignObject`, where locally installed families resolve by name
-     but webfonts must be inlined — so a system default is what makes the
-     common path export correctly with nothing embedded. */
-  --slide-font-display:
-    system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
+  --border: oklch(0.915 0.008 255);
+  --input: oklch(0.9 0.01 255);
+  --ring: oklch(0.7 0.12 262);
+  --radius: 0.5rem;
+
+  /* Card elevation: a hairline-soft shadow in light, none in dark (the border does the work there). */
+  --shadow-card: 0 1px 2px 0 oklch(0.2 0.02 260 / 0.06);
+
+  /* Body typeface: a system stack only (no web font is shipped). Presets may swap
+     it; `@theme inline` below points `font-sans` at this variable, so overriding
+     the variable also moves the utility (and the `html` rule in `@layer base`).
+     Latin system faces carry no kana/kanji, so without Japanese families here the
+     browser picks a per-locale fallback (lang="en" -> e.g. thin "Yu Gothic" Regular
+     on Windows, or a face without a 500 weight on macOS) and kana render thin.
+     List the Japanese system faces explicitly, after the Latin ones, and keep
+     `ui-sans-serif` / `system-ui` behind them: on Japanese Windows both resolve to
+     the menu font, Yu Gothic UI, which is condensed (made to avoid UI resizing)
+     and has kana, so it would take the kana before Meiryo is ever reached.
+     `-apple-system` is Safari/Firefox; Chrome on macOS needs `BlinkMacSystemFont`. */
+  --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;
-  --slide-font-body: var(--slide-font-display);
-  /* Canvas pixels, on the 1920x1080 canvas — not rem: a slide is scaled as a
-     whole, so its type must not also follow the browser's root font size. */
-  --slide-size-hero: 168px;
-  --slide-size-body: 36px;
 
-  /* Documents (@squadbase/vantage/doc). Aliases, like --slide-*: they follow
-     `.dark` through the tokens they point at, so they are not restated in the
-     dark block. A document overrides any of them inline through
-     `<Document theme>`, an app through its styles.css. */
-  --doc-fg: var(--foreground);
-  --doc-muted: var(--muted-foreground);
-  --doc-accent: var(--primary);
-  --doc-border: var(--border);
-  --doc-subtle: var(--muted);
-  --doc-font-body: inherit;
-  --doc-font-heading: var(--doc-font-body);
-  --doc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --doc-size-body: 1rem;
-  --doc-line-height: 1.8;
-  --doc-max-width: 48rem;
+  --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);
+
+  /* Semantic status tokens — see the contract above the `@theme inline` block. */
+  --positive: oklch(0.52 0.14 150);
+  --positive-subtle: oklch(0.96 0.04 150);
+  --negative: oklch(0.53 0.19 25);
+  --negative-subtle: oklch(0.96 0.03 25);
+  --warning: oklch(0.53 0.12 70);
+  --warning-subtle: oklch(0.96 0.05 85);
+  --info: oklch(0.52 0.16 255);
+  --info-subtle: oklch(0.96 0.03 250);
+  --positive-fill: oklch(0.62 0.15 150);
+  --negative-fill: oklch(0.62 0.17 25);
+  --warning-fill: oklch(0.79 0.16 82);
+  --info-fill: oklch(0.62 0.15 250);
+  --neutral-fill: oklch(0.62 0 0);
+  --neutral: oklch(0.52 0 0);
+  --neutral-subtle: oklch(0.96 0 0);
+
+  --sidebar: oklch(0.985 0.003 255);
+  --sidebar-foreground: oklch(0.21 0.02 260);
+  --sidebar-primary: oklch(0.55 0.2 262);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.955 0.01 255);
+  --sidebar-accent-foreground: oklch(0.25 0.02 260);
+  --sidebar-border: oklch(0.915 0.008 255);
+  --sidebar-ring: oklch(0.7 0.12 262);
 }
 
 .dark,
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --shadow-card: none;
+
+  --background: oklch(0.16 0.012 262);
+  --foreground: oklch(0.96 0.005 255);
+  --card: oklch(0.215 0.015 262);
+  --card-foreground: oklch(0.96 0.005 255);
+  --popover: oklch(0.235 0.016 262);
+  --popover-foreground: oklch(0.96 0.005 255);
+  --primary: oklch(0.68 0.19 262);
+  --primary-foreground: oklch(0.145 0.02 262);
+  --secondary: oklch(0.27 0.016 262);
+  --secondary-foreground: oklch(0.96 0.005 255);
+  --muted: oklch(0.27 0.016 262);
+  --muted-foreground: oklch(0.72 0.02 258);
+  --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);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-
-  --chart-1: hsl(217 91% 60%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(31 90% 55%);
-  --chart-4: hsl(280 65% 65%);
-  --chart-5: hsl(340 75% 60%);
-
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --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);
+
+  --positive: oklch(0.76 0.15 150);
+  --positive-subtle: oklch(0.27 0.05 150);
+  --negative: oklch(0.74 0.15 22);
+  --negative-subtle: oklch(0.27 0.06 25);
+  --warning: oklch(0.8 0.14 80);
+  --warning-subtle: oklch(0.27 0.05 75);
+  --info: oklch(0.75 0.12 250);
+  --info-subtle: oklch(0.27 0.06 255);
+  --positive-fill: oklch(0.56 0.13 150);
+  --negative-fill: oklch(0.56 0.15 22);
+  --warning-fill: oklch(0.73 0.145 78);
+  --info-fill: oklch(0.56 0.13 250);
+  --neutral-fill: oklch(0.56 0 0);
+  --neutral: oklch(0.85 0 0);
+  --neutral-subtle: oklch(0.27 0 0);
+
+  --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-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.3 0.02 262);
+  --sidebar-accent-foreground: oklch(0.96 0.005 255);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.6 0.15 262);
 }
 
+/* Semantic status tokens (increase/decrease/status). Every increase, decrease
+   and status colour in registry/ comes from these — never a Tailwind palette
+   colour like `green-500` (tests/raw-colors.test.ts enforces it).
+     --<tone>         text colour on --background, --card and --<tone>-subtle
+                      (>= 4.5:1), and dot / line / icon colour (>= 3:1).
+     --<tone>-subtle  tinted background behind --<tone> text (badges, callouts).
+     --<tone>-fill   (incl. --neutral-fill, the grey area) FILL colour for areas (bars, heatmap cells, tracker blocks). Not for
+                      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.
+                      --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.
+   Tones: positive (green), negative (red), warning (amber), info (blue),
+   neutral (grey). Colour never carries the meaning alone — pair it with an
+   arrow or sign. `npm run contrast` prints the measured ratios. */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -155,6 +189,21 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-positive: var(--positive);
+  --color-positive-subtle: var(--positive-subtle);
+  --color-negative: var(--negative);
+  --color-negative-subtle: var(--negative-subtle);
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-info: var(--info);
+  --color-info-subtle: var(--info-subtle);
+  --color-positive-fill: var(--positive-fill);
+  --color-negative-fill: var(--negative-fill);
+  --color-warning-fill: var(--warning-fill);
+  --color-info-fill: var(--info-fill);
+  --color-neutral-fill: var(--neutral-fill);
+  --color-neutral: var(--neutral);
+  --color-neutral-subtle: var(--neutral-subtle);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -168,10 +217,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --color-slide-bg: var(--slide-bg);
-  --color-slide-fg: var(--slide-fg);
-  --color-slide-accent: var(--slide-accent);
-  --color-slide-muted: var(--slide-muted);
+  --font-sans: var(--font-sans);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -272,6 +318,100 @@
   }
 }
 
+/* ------------------------------------------------------------ utilities */
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Icons that must point the other way when the document is right-to-left. */
+.cn-rtl-flip {
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    transform: scaleX(-1);
+  }
+}
+
+/* Page defaults live in `@layer base`, like shadcn's own init, so a project's
+   `html { @apply font-sans }`, its `next/font` setup and its own border rules
+   (all unlayered or later in the layer) win over them instead of losing to an
+   unlayered rule here. */
+@layer base {
+  html {
+    font-family: var(--font-sans);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  * {
+    border-color: var(--border);
+  }
+}
+
+/**
+ * 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.
+ */
+
+:root {
+  /* Slides (@squadbase/vantage/slide).
+     These are aliases, not values. Custom properties resolve lazily, 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>`. */
+  --slide-bg: var(--background);
+  --slide-fg: var(--foreground);
+  --slide-accent: var(--primary);
+  --slide-muted: var(--muted-foreground);
+  --slide-radius: var(--radius);
+  /* A system stack that includes Japanese. The pptx export rasterises through
+     an SVG `foreignObject`, where locally installed families resolve by name
+     but webfonts must be inlined — so a system default is what makes the
+     common path export correctly with nothing embedded. */
+  --slide-font-display:
+    -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);
+  /* Canvas pixels, on the 1920x1080 canvas — not rem: a slide is scaled as a
+     whole, so its type must not also follow the browser's root font size. */
+  --slide-size-hero: 168px;
+  --slide-size-body: 36px;
+
+  /* Documents (@squadbase/vantage/doc). Aliases, like --slide-*: they follow
+     `.dark` through the tokens they point at, so they are not restated in the
+     dark block. A document overrides any of them inline through
+     `<Document theme>`, an app through its styles.css. */
+  --doc-fg: var(--foreground);
+  --doc-muted: var(--muted-foreground);
+  --doc-accent: var(--primary);
+  --doc-border: var(--border);
+  --doc-subtle: var(--muted);
+  --doc-font-body: inherit;
+  --doc-font-heading: var(--doc-font-body);
+  --doc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --doc-size-body: 1rem;
+  --doc-line-height: 1.8;
+  --doc-max-width: 48rem;
+}
+
+@theme inline {
+  --color-slide-bg: var(--slide-bg);
+  --color-slide-fg: var(--slide-fg);
+  --color-slide-accent: var(--slide-accent);
+  --color-slide-muted: var(--slide-muted);
+}
+
 /* ------------------------------------------------------------ documents */
 
 /* Typesetting for `<Document>`. Plain elements inside it need no classes.
@@ -440,38 +580,3 @@
     overflow: visible;
   }
 }
-
-/* ------------------------------------------------------------ utilities */
-
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* Icons that must point the other way when the document is right-to-left. */
-.cn-rtl-flip {
-  &:where([dir="rtl"], [dir="rtl"] *) {
-    transform: scaleX(-1);
-  }
-}
-
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  /* Latin system faces carry no kana/kanji, so without Japanese families here the
-     browser picks a per-locale fallback (lang="en" → e.g. thin "Yu Gothic" Regular
-     on Windows, or a face without a 500 weight on macOS) and kana render thin.
-     List the Japanese system faces explicitly, after the Latin ones. */
-  font-family:
-    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo,
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-
-* {
-  border-color: var(--border);
-}

package/dist/chunk-5ZOP4SQR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ui/states.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,OAAA,CAAQ,EAAE,KAAA,GAAQ,eAAA,EAAY,WAAU,EAA2C;AACjG,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,iDAAiD,SAAS,CAAA,EAAG,IAAA,EAAK,QAAA,EAAS,WAAA,EAAU,QAAA,EACtG,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,gFAAA,EAAiF,CAAA;AAAA,IAChG;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAEO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA,GAAQ,kBAAA;AAAA,EACR,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kEAAA,EAAoE,SAAS,CAAA,EAC7F,QAAA,EAAA;AAAA,IAAA,IAAA,mBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,gBAAK,CAAA,GAAS,IAAA;AAAA,oBACvE,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACjC,8BAAc,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,wCAAA,EAA0C,uBAAY,CAAA,GAAO,IAAA;AAAA,IACxF,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA,GAAA,EACnD,CAAA;AAEJ;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA,GAAQ,sBAAA;AAAA,EACR,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,8DAAA,EAAgE,SAAS,CAAA;AAAA,MACvF,IAAA,EAAK,OAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAA,EAAkC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACpD,0BAAU,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,mBAAQ,CAAA,GAAO,IAAA;AAAA,QAC5E,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,GACnD;AAEJ","file":"chunk-5ZOP4SQR.js","sourcesContent":["import type { ReactNode } from \"react\"\nimport { cn } from \"./cn\"\n\nexport function Loading({ label = \"Loading…\", className }: { label?: string; className?: string }) {\n  return (\n    <div className={cn(\"flex min-h-[30vh] items-center justify-center\", className)} role=\"status\" aria-live=\"polite\">\n      <div className=\"flex items-center gap-3 text-sm text-muted-foreground\">\n        <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        {label}\n      </div>\n    </div>\n  )\n}\n\nexport function Empty({\n  title = \"Nothing here yet\",\n  description,\n  icon,\n  action,\n  className,\n}: {\n  title?: string\n  description?: string\n  icon?: ReactNode\n  action?: ReactNode\n  className?: string\n}) {\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center gap-2 p-10 text-center\", className)}>\n      {icon ? <div className=\"text-3xl text-muted-foreground\">{icon}</div> : null}\n      <p className=\"font-medium\">{title}</p>\n      {description ? <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p> : null}\n      {action ? <div className=\"mt-2\">{action}</div> : null}\n    </div>\n  )\n}\n\nexport function ErrorState({\n  title = \"Something went wrong\",\n  message,\n  action,\n  className,\n}: {\n  title?: string\n  message?: ReactNode\n  action?: ReactNode\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\"rounded-xl border border-destructive/30 bg-destructive/5 p-6\", className)}\n      role=\"alert\"\n    >\n      <p className=\"font-semibold text-destructive\">{title}</p>\n      {message ? <p className=\"mt-1 text-sm text-muted-foreground\">{message}</p> : null}\n      {action ? <div className=\"mt-3\">{action}</div> : null}\n    </div>\n  )\n}\n"]}

package/dist/chunk-A2UUGASH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ui/cn.ts"],"names":[],"mappings":";;;;;AAUO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-A2UUGASH.js","sourcesContent":["/**\n * Class merger used by every component in the kit. `clsx` resolves conditional\n * class values, `tailwind-merge` drops the earlier of two conflicting Tailwind\n * utilities so a caller's `className` always wins over a component default.\n */\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport type { ClassValue }\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n"]}