@squadbase/vantage 0.6.2-dev1.42c4e48 → 0.6.2-dev1.51e401a

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/docs/ja/ui-and-theming.md

@@ -39,8 +39,8 @@ export default function Overview() {
 
 `/components` にあるもの（抜粋）: `PageShell`、`AppShell`、`DashboardCard`、`DataTable`、
 型付きチャート（`LineChart` / `AreaChart` / `BarChart` / `DonutChart` / `BarList` / `CategoryBar` /
-`ProgressCircle` / `Tracker`）、`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`MetricValue`、
-`TrendIndicator`。グラフはまず型付きチャートで描き、その props で表せない図（二軸・散布図・
+`ProgressCircle` / `Tracker`）、`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`KpiCard`、
+`Delta`。グラフはまず型付きチャートで描き、その props で表せない図（二軸・散布図・
 ヒートマップなど）だけ `EChart` に `EChartsOption` を渡します。
 
 各コンポーネントの props と使い方は [コンポーネント](components) タブにまとめてあります。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage",
-  "version": "0.6.2-dev1.42c4e48",
+  "version": "0.6.2-dev1.51e401a",
   "description": "Data dashboard framework for Squadbase Editor. Vite-powered, config-free, one-file first.",
   "type": "module",
   "license": "MIT",
@@ -99,25 +99,6 @@
     "templates",
     "NOTICE"
   ],
-  "scripts": {
-    "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
-    "build:js": "tsup --no-dts",
-    "build:types": "tsup --dts-only",
-    "build:docs": "node scripts/build-docs.mjs",
-    "dev": "tsup --watch --no-dts",
-    "dev:types": "tsc --noEmit --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "registry": "node scripts/gen-registry.mjs",
-    "registry:check": "node scripts/gen-registry.mjs --check",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
-    "type-check": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
-    "prepublishOnly": "node scripts/build-docs.mjs && node scripts/build.mjs",
-    "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",
-    "site:install": "npm --prefix site install",
-    "site:dev": "npm --prefix site run dev",
-    "site:build": "npm --prefix site run build"
-  },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@hono/node-server": "^2.1.5",
@@ -132,7 +113,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "echarts": "^6.0.0",
-    "esbuild": "^0.28.1",
+    "esbuild": "0.28.1",
     "fflate": "^0.8.3",
     "hono": "^4.13.13",
     "html-to-image": "^1.11.13",
@@ -141,8 +122,9 @@
     "picocolors": "^1.1.1",
     "react-day-picker": "^10.0.1",
     "read-excel-file": "^9.3.10",
+    "shiki": "3.23.0",
     "streamdown": "^2.5.0",
-    "tailwind-merge": "^3.0.0",
+    "tailwind-merge": "3.6.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.0.0",
     "vite": "^8.3.4"
@@ -167,6 +149,26 @@
     "react-dom": "^19.3.1",
     "tsup": "^8.5.1",
     "typescript": "^5.7.0",
-    "vitest": "^5.0.5"
+    "vitest": "^5.0.5",
+    "@squadbase/squadkit": "0.0.0"
+  },
+  "gitHead": "51e401a7d56dedb01b1dc3061d24eb4398b03062",
+  "scripts": {
+    "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
+    "build:js": "tsup --no-dts",
+    "build:types": "tsup --dts-only",
+    "build:docs": "node scripts/build-docs.mjs",
+    "dev": "tsup --watch --no-dts",
+    "dev:types": "tsc --noEmit --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "registry": "node scripts/gen-registry.mjs",
+    "registry:check": "node scripts/gen-registry.mjs --check",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
+    "type-check": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
+    "release": "pnpm publish --@squadbase:registry=https://registry.npmjs.org",
+    "site:install": "npm --prefix site install",
+    "site:dev": "npm --prefix site run dev",
+    "site:build": "npm --prefix site run build"
   }
-}
+}

package/registry/ui/accordion.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui accordion`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/accordion.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/accordion.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
 
 import { cn } from "@squadbase/vantage/ui"
@@ -56,7 +58,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Panel
       data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up motion-reduce:animate-none"
       {...props}
     >
       <div

package/registry/ui/alert-dialog.tsx

@@ -1,5 +1,5 @@
 // Copied by `vantage add ui alert-dialog`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/alert-dialog.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/alert-dialog.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
 "use client"
 
 import * as React from "react"
@@ -32,7 +32,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in motion-reduce:animate-none! data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in motion-reduce:animate-none! data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

package/registry/ui/alert.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui alert`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/alert.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/alert.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/registry/ui/app-shell.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui app-shell`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/app-shell.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/app-shell.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * AppShell — the outermost application frame. `variant="sidebar"` (default)
  * renders a collapsible sidebar with nested nav groups; `variant="header"`
@@ -42,6 +44,142 @@ import {
   SidebarTrigger,
 } from "@squadbase/vantage/ui"
 import type { NavGroup, NavItem } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
+
+const PAGE_PLACEHOLDER = { ja: "ページを選択", en: "Select a page" }
 
 export interface AppShellSidebarProps {
   variant?: "sidebar"
@@ -85,9 +223,14 @@ function NavSelect({
 }) {
   const allItems = groups.flatMap((g) => g.items.flatMap(flattenItems))
   const currentValue = allItems.find((item) => item.isActive)?.href ?? ""
+  // Base UI's SelectValue renders the raw value (the href) unless `items` maps
+  // it to a label, so pass the page names explicitly.
+  const selectItems = allItems.map((item) => ({ value: item.href, label: item.label }))
+  const placeholder = PAGE_PLACEHOLDER[uiLanguage(useLocale())]
 
   return (
     <Select
+      items={selectItems}
       value={currentValue}
       onValueChange={(href) => {
         // Base UI reports `null` when the selection is cleared; there is no
@@ -96,7 +239,7 @@ function NavSelect({
       }}
     >
       <SelectTrigger size="sm" className="w-48">
-        <SelectValue placeholder="ページを選択" />
+        <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       {/*
         Page titles are author-written and often longer than the 12rem trigger,