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

package/docs/ja/changelog.md

@@ -46,6 +46,11 @@ Vantage のリリースごとの変更点です。新しいものが上に来ま
   持たないのに、ブラウザのタイムゾーンで表示していたため、UTC より西(アメリカなど)では
   `2026-06-02` が `6/1` と前日に、時刻付きのセルは UTC より東(日本など)でも夜の時刻が翌日に
   ずれていました。いまはどのタイムゾーンでもファイルに書かれた日付・時刻のまま表示します。
+- **ドキュメント(`.doc.tsx`)を画面で見るとき、本文が画面の端に付かなくなりました。** 画面表示用の
+  余白が無かったため、表示幅が本文の幅(`--doc-max-width`、既定 48rem)より狭いと本文が左右の端に
+  付き、見出しもヘッダーのすぐ下から始まっていました。いまは左右に 1.5rem、上に 3rem、下に 5rem の
+  余白を取ります。下を広めにしているのは、右下の「PDF として保存」ボタンに最後の行が隠れないように
+  するためです。広い画面での本文の幅と、印刷の見た目は変わりません。
 
 ## v0.6.2
 

package/docs/ja/components.md

@@ -30,6 +30,7 @@ import { MarkdownRenderer } from "@squadbase/vantage/markdown";
 | [`Badge`](ui/badge) / [`StatusBadge`](parts/status-badge) | 件数やタグなど**ただのラベル**は `Badge`。`active` / `failed` のような**レコードの状態**を色付きドットで示すなら `StatusBadge`（色は状態名から自動で決まる）。 |
 | [`ToggleGroup`](ui/toggle-group) / [`SegmentedControl`](parts/segmented-control) | 表示期間やビューの切り替えのような**単一選択**は `SegmentedControl`（値は `string`）。複数を同時に押せる**トグルの束**が要るときだけ `ToggleGroup`（値は常に配列）。 |
 | [`Select`](ui/select) / [`SearchableSelect`](parts/searchable-select) / [`MultiSelect`](parts/multi-select) / [`FilterBar`](parts/filter-bar) | 候補が**数個**なら `Select`。**多くて探したい**なら `SearchableSelect`、**複数選ぶ**なら `MultiSelect`。ページ上部に並ぶ**絞り込み一式**は、個別に置かず `FilterBar`（`FilterBarSelect` / `FilterBarMultiSelect`）でまとめて 1 つの値として扱う。 |
+| [`KpiCard`](parts/kpi-card) / [`Delta`](parts/delta) / [`MetricValue`](parts/metric-value) | KPI のタイル 1 枚なら `KpiCard`（値・増減・前期実績・結論の 1 文まで出る）。表のセルや見出しの横に**増減だけ**を置くなら `Delta`。`MetricValue` は書式を自分で決めた数値を大きく見せたいときだけ。`TrendIndicator` は非推奨。 |
 | [`Sparkline`](parts/sparkline) / [`EChart`](parts/echart) | 表のセルや KPI タイルの隅に置く、**軸も凡例もない小さな推移**は `Sparkline`。軸・ツールチップ・凡例のある**本格的なグラフ**は `EChart`。 |
 | [`Skeleton`](ui/skeleton) / [`DashboardCardSkeleton`](parts/dashboard-card) / [`Placeholder`](parts/placeholder) | **読み込み中**の任意の形は `Skeleton`、ダッシュボードのタイル 1 枚分なら `DashboardCardSkeleton`。`Placeholder` は読み込み中ではなく、**中身が仮データであること**を示す目印。 |
 | [`Loading`](ui/loading) / [`Empty`](ui/empty) / [`ErrorState`](ui/error-state) | データ取得の 3 状態に 1 つずつ対応する。**取得中**は `Loading`、**0 件**は `Empty`、**失敗**は `ErrorState`（`action` に再試行ボタンを置ける）。 |
@@ -77,8 +78,12 @@ shadcn/ui のプリミティブです。名前も props も shadcn/ui のもの
 
 `ui/` を組み上げた、ダッシュボード向けの複合部品です。ページ枠（`PageShell` / `AppShell`）、
 タイル（`DashboardCard`）、表（`DataTable`）、グラフ（`EChart` / `Sparkline` / `FunnelSteps`）、
-フィルタ（`FilterBar` / `DateRangePicker` など）、KPI 表示（`MetricValue` / `TrendIndicator`）が
-入っています。
+フィルタ（`FilterBar` / `DateRangePicker` など）、KPI 表示が入っています。部品の正本は SquadKit で、
+Vantage はそれを再エクスポートしています。
+
+KPI は [`KpiCard`](parts/kpi-card)、増減は [`Delta`](parts/delta)（`comparison` と
+`polarity` を渡す）で示します。[`TrendIndicator`](parts/trend-indicator) は非推奨です。数値の
+書式と増減の計算は [format / comparison](parts/format) にまとまっています。
 
 ## `@squadbase/vantage/markdown`
 
@@ -99,9 +104,8 @@ import {
   PageShellHeaderEnd,
   PageShellActions,
   PageShellContent,
+  KpiCard,
   DashboardCardPreset,
-  MetricValue,
-  TrendIndicator,
   EChart,
   type EChartsOption,
 } from "@squadbase/vantage/components";
@@ -129,17 +133,25 @@ export default function Overview() {
 
       <PageShellContent>
         <div className="grid gap-4 md:grid-cols-3">
-          <DashboardCardPreset title="売上">
-            <MetricValue className="my-0">¥1,240,000</MetricValue>
-            <TrendIndicator value={12.4} direction="up" />
-          </DashboardCardPreset>
-          <DashboardCardPreset title="新規顧客">
-            <MetricValue className="my-0">128</MetricValue>
-            <TrendIndicator value={3.1} direction="down" />
-          </DashboardCardPreset>
-          <DashboardCardPreset title="解約率">
-            <MetricValue className="my-0">2.1%</MetricValue>
-          </DashboardCardPreset>
+          <KpiCard
+            label="売上"
+            value={1_240_000}
+            format="currency"
+            comparison={{ previous: 1_103_000, vs: "prior-period" }}
+          />
+          <KpiCard
+            label="新規顧客"
+            value={128}
+            format="number"
+            comparison={{ previous: 132, vs: "prior-period" }}
+          />
+          <KpiCard
+            label="解約率"
+            value={0.021}
+            format={{ type: "percent", digits: 1 }}
+            comparison={{ previous: 0.026, vs: "prior-period" }}
+            polarity="lower-is-better"
+          />
         </div>
 
         <DashboardCardPreset title="月次売上" className="mt-4">

package/docs/ja/parts/data-table.md

@@ -55,6 +55,28 @@ import type { ColumnDef, SortingState, PaginationState } from "@squadbase/vantag
 
 `useDataTable()` を使うと、子コンポーネントから TanStack の `table` インスタンスを直接触れます。
 
+## 列の書式と CSV 書き出し
+
+`cell` を書かない列は `meta.format` で数値を整形できます（右寄せ・tabular-nums、null は `meta.nullLabel`、既定 `—`）。行ごとに通貨が変わるときは関数で渡します。`DataTableExport` は画面と同じ並べ替え・絞り込み後の順で、BOM 付き UTF-8 の CSV を書き出します。`DataTablePreset` なら `exportable` だけで toolbar に置けます。
+
+```tsx
+const columns: ColumnDef<Row>[] = [
+  { accessorKey: "month", header: "月" },
+  {
+    accessorKey: "revenue",
+    header: "売上",
+    meta: { format: (row) => ({ type: "currency", currency: row.currency, notation: "standard" }) },
+  },
+];
+
+<DataTable columns={columns} data={rows}>
+  <DataTableToolbar toolbar={<DataTableExport fileName="sales.csv" />} />
+  <DataTableContent />
+</DataTable>;
+```
+
+`values="raw"` で生の値、`scope="page"` で表示中のページだけを書き出せます。サーバー側でページングするときは `rowCount`（総件数）・`manualSorting`・`manualFiltering`・`isLoading` も使えます。
+
 ## サーバー側でページングする
 
 `pagination` と `onPaginationChange` を自分で持ち、`pageCount` に総ページ数を渡します。

package/docs/ja/parts/delta.md

@@ -0,0 +1,50 @@
+# Delta
+
+> 比較相手に対する増減。矢印・符号付きの率・比較ラベルを値から導く。
+
+値の変化を「↑ +12.4% 前期比」の 1 行で示します。**向き・率・色・文言はすべて `value` と `comparison`
+から計算**され、外から渡すことはできません — そのため矢印と色が食い違うことがありません。色だけに
+頼らず、矢印と符号が必ず付きます。解約率のように上がると悪い指標は `polarity="lower-is-better"` を
+渡してください。
+
+非推奨の [`TrendIndicator`](parts/trend-indicator) の置き換えです。
+
+```tsx
+import { Delta } from "@squadbase/vantage/components";
+import type { DeltaProps, Comparison, Polarity } from "@squadbase/vantage/components";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `value` | `number \| null \| undefined` |  | 現在の値。**必須**。前の値は `comparison` から取る。 |
+| `comparison` | `Comparison` |  | 比較の相手。**必須**（増減に必ずラベルが付くように）。下の表を参照。 |
+| `polarity` | `"higher-is-better" \| "lower-is-better"` | `"higher-is-better"` | 上がることが良いか。 |
+| `neutralBand` | `number` | `0.01` | 変化率の絶対値がこれ未満なら横ばい（–）として扱う。既定は 1%。 |
+| `variant` | `"badge" \| "inline"` | `"badge"` | 枠付きのバッジか、文中に置く素の文字か。 |
+| `locale` | `string` | `"ja-JP"` | 率の書式のロケール。 |
+| `showLabel` | `boolean` | `true` | 率のあとに比較ラベル（「前期比」）を出すか。 |
+| `className` | `string` |  | 足すクラス。 |
+
+## Comparison
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `previous` | `number \| null \| undefined` | 比較相手の値。`null` や `0` のときは率が出せないので「—」になる。 |
+| `vs` | `"prior-period" \| "prior-year" \| "target"` | 比較の種類。ラベルは順に「前期比」「前年同期比」「目標比」。 |
+| `label` | `string` | ラベルを差し替える（「先週比」など）。 |
+
+## TrendIndicator からの置き換え
+
+```tsx
+// 旧: 向きと色を手で決めていた
+<TrendIndicator value={12.4} direction="up" />
+
+// 新: 今期と前期の値を渡すだけ
+<Delta value={1_240_000} comparison={{ previous: 1_103_000, vs: "prior-period" }} />
+
+// 下がる方が良い指標
+<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
+```
+
+色は `--positive` / `--negative` / `--neutral` のトークンで決まります。KPI を 1 枚のカードで見せる
+なら [`KpiCard`](parts/kpi-card) が中で `Delta` を使います。

package/docs/ja/parts/format.md

@@ -0,0 +1,44 @@
+# format / comparison
+
+> KPI・表・グラフで共有する数値の書式（formatValue）と、増減の計算（computeComparison）。
+
+`KpiCard` / `Delta` が内部で使っている数値の書式と比較の計算を、そのまま関数として使えます。表の
+セルやグラフの `valueFormatter` を KPI と同じ書式に揃えたいときに使ってください。短縮（「4.8億」
+など）は `Intl.NumberFormat` に任せており、単位の文字列を自前で持ちません。
+
+```tsx
+import {
+  formatValue,
+  formatDelta,
+  toValueFormatter,
+  computeComparison,
+} from "@squadbase/vantage/components";
+import type { ValueFormat, Comparison, ComparisonResult } from "@squadbase/vantage/components";
+```
+
+## ValueFormat
+
+`"number" | "compact" | "currency" | "percent" | "multiple"` のどれか、または
+`{ type, digits?, currency? }`。既定は `"compact"`、通貨の既定は `JPY`、ロケールの既定は `"ja-JP"`。
+`percent` は比率（`0.124` → 12.4%）を受け取ります。値が `null` / `undefined` / `NaN` のときは「—」を
+返します。
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `formatValue(value, format?, locale?)` | `string` | 値を書式化する。 |
+| `formatDelta(value, format?, locale?)` | `string` | 差分用。0 以外は常に符号が付く（`+12.4%`）。 |
+| `toValueFormatter(format?, locale?)` | `(value) => string` | 書式とロケールを束ねた 1 引数の関数。グラフの `valueFormatter` に渡せる。 |
+
+```tsx
+formatValue(48_200_000, "currency");                // "￥48,200,000"
+formatValue(0.021, { type: "percent", digits: 1 }); // "2.1%"
+<LineChart valueFormatter={toValueFormatter("compact")} … />
+```
+
+## computeComparison
+
+`computeComparison(current, comparison, { polarity?, neutralBand? })` が
+`{ current, previous, difference, ratio, direction, sentiment, label, vs }` を返します。率は前の値が
+0 でない数のときだけ出し、`neutralBand`（既定 0.01）未満の変化は `direction: "flat"` になります。
+`sentiment`（`"positive" | "negative" | "neutral"`）は `polarity` で決まります。表示は
+[`Delta`](parts/delta) に任せ、自前で矢印や色を組まないでください。

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

@@ -0,0 +1,55 @@
+# KpiCard
+
+> KPI 1 つ分のカード。値・増減・前期実績・結論の 1 文までを数値から組み立てる。
+
+KPI を 1 つ見せるカードです。**数値と列挙値だけを渡せば**、上から「指標名 → 値 → 増減
+（[`Delta`](parts/delta)）→ 前期の実績 → 結論の 1 文」の順に組み立てます。増減の向き・率・
+色・目標までの残り・達成率・記録更新はすべてカードの中で計算するので、props どうしが食い違うことは
+ありません。KPI タイルは `DashboardCardPreset` + `MetricValue` で組むより、まずこれを使ってください。
+
+```tsx
+import { KpiCard } from "@squadbase/vantage/components";
+import type { KpiCardProps, KpiCardSource, Comparison, Polarity, ValueFormat } from "@squadbase/vantage/components";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `label` | `string` |  | 指標名。**必須**。 |
+| `value` | `number \| null \| undefined` |  | 現在の値。**必須**。`null` / `undefined` は「—」と表示する。 |
+| `format` | `ValueFormat` | `"compact"` | 値の書式（→ format / comparison のページ）。前期実績・目標・残りにも同じ書式を使う。 |
+| `locale` | `string` | `"ja-JP"` | 書式のロケール。 |
+| `comparison` | `Comparison` |  | 比較の相手（`{ previous, vs, label? }`）。渡すと増減と前期実績の行が出る。 |
+| `polarity` | `"higher-is-better" \| "lower-is-better"` | `"higher-is-better"` | 上がることが良いか。解約率のように下がる方が良い指標は `"lower-is-better"`。 |
+| `neutralBand` | `number` | `0.01` | 変化率の絶対値がこれ未満なら横ばいとして扱う。 |
+| `showPrevious` | `boolean` | `true` | 前期の実績（「前期 400」）を出すか。`comparison` が要る。 |
+| `summary` | `string` |  | 結論の 1 文の**テンプレート**。下のプレースホルダをカードが埋める。 |
+| `target` | `number` |  | 今期の目標。「目標まであと …（… 達成）」の行が出る。 |
+| `period` | `{ start: Date \| string \| number; end: Date \| string \| number }` |  | 今期の期間。`target` と一緒に渡すと、期間中は「見込み」（このペースなら期末いくつ）が出る。 |
+| `history` | `ReadonlyArray<number \| null \| undefined>` |  | 今期で終わる系列（最後の点 = `value`）。記録更新のバッジが出る。 |
+| `historyGrain` | `"day" \| "week" \| "month" \| "quarter" \| "year"` | `"month"` | `history` の粒度。 |
+| `source` | `{ period?: string; count?: number; name?: string }` |  | データの出所の注記（「2023-04 以降・48,210 件から集計・Snowflake」）。 |
+| `updatedAt` | `Date \| string \| number` |  | 最終更新時刻。「3 分前に更新」と出る。 |
+| `now` | `Date \| number` |  | 見込みと相対時刻の基準時刻（表示を固定したいとき）。 |
+| `isLoading` | `boolean` | `false` | 値の代わりに、完成形と同じ形のスケルトンを出す。 |
+| `className` | `string` |  | 足すクラス。 |
+
+## summary のプレースホルダ
+
+`{value}` `{delta}` `{difference}` `{previous}` `{label}` `{target}` `{achievement}` `{remaining}` が
+使えます。知らない名前はそのまま残り、値が無いものは「—」になります。
+
+> [!WARNING]
+> **テンプレートに数値を直接書かないでください。** 数値はすべてプレースホルダで差し込みます —
+> 値が変わっても文が古くならないようにするためです。
+
+```tsx
+<KpiCard
+  label="売上"
+  value={48_200_000}
+  format="currency"
+  comparison={{ previous: 42_900_000, vs: "prior-period" }}
+  summary="{label}は前月から {difference}（{delta}）伸びています。"
+/>
+```
+
+増減だけを表やタイルの中に置きたいときは [`Delta`](parts/delta) を単体で使います。

package/docs/ja/parts/metric-value.md

@@ -2,7 +2,8 @@
 
 > KPI の数値。単位は MetricUnit で。
 
-KPI の数値を大きく見せるための、字送りを詰めた表示です。単位や補助的な文字は `MetricUnit` で
+KPI の数値を大きく見せるための、字送りを詰めた表示です。KPI のタイルを 1 枚作るなら、増減や前期実績まで
+出せる [`KpiCard`](parts/kpi-card) を先に検討してください。単位や補助的な文字は `MetricUnit` で
 添えます。
 
 ```tsx
@@ -20,6 +21,6 @@ import { MetricValue, MetricUnit, metricValueVariants } from "@squadbase/vantage
 ```tsx
 <DashboardCardPreset title="売上">
   <MetricValue className="my-0">¥1,240,000</MetricValue>
-  <TrendIndicator value={12.4} direction="up" />
+  <Delta value={1_240_000} comparison={{ previous: 1_103_000, vs: "prior-period" }} />
 </DashboardCardPreset>
 ```

package/docs/ja/parts/sparkline.md

@@ -44,4 +44,4 @@ import type { SparklineDataPoint, SparklineVariant } from "@squadbase/vantage/co
 > [!NOTE]
 > `aria-hidden="true"` が付いているため、スクリーンリーダーには読まれません。実際の数値は
 > [`MetricValue`](parts/metric-value) や
-> [`TrendIndicator`](parts/trend-indicator) など、テキストとして隣に置いてください。
+> [`Delta`](parts/delta) など、テキストとして隣に置いてください。

package/docs/ja/parts/trend-indicator.md

@@ -1,6 +1,22 @@
 # TrendIndicator
 
-> 増減の矢印と変化率。良し悪しは positiveIsGood で決まる。
+> 非推奨。新規は Delta を使う。増減の矢印と変化率。
+
+> [!WARNING]
+> **非推奨です。新規のコードでは [`Delta`](parts/delta) を使ってください。**
+> `TrendIndicator` は向き（`direction`）と色を手で渡すため、値と矢印が食い違うことがあります。`Delta` は今期と
+> 比較相手の値から向き・率・色・ラベルを計算します。KPI をカードで見せるなら
+> [`KpiCard`](parts/kpi-card) を使います。
+
+```tsx
+// 旧
+<TrendIndicator value={12.4} direction="up" />
+<TrendIndicator value={0.4} direction="down" positiveIsGood={false} />
+
+// 新
+<Delta value={1_240_000} comparison={{ previous: 1_103_000, vs: "prior-period" }} />
+<Delta value={0.021} comparison={{ previous: 0.026, vs: "prior-period" }} polarity="lower-is-better" />
+```
 
 前期比などの変化を、矢印と変化率で示します。**「上がった＝良い」とは限らない**ので、色は
 `direction` と `positiveIsGood` の組み合わせで決まります — 解約率のように下がる方が良い指標では

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.ac99e02",
+  "version": "0.6.2-dev1.d7c0911",
   "description": "Data dashboard framework for Squadbase Editor. Vite-powered, config-free, one-file first.",
   "type": "module",
   "license": "MIT",
@@ -158,6 +158,7 @@
     }
   },
   "devDependencies": {
+    "@squadbase/squadkit": "*",
     "@types/node": "^22.10.0",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.2.0",

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 `npm 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 `npm 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 `npm 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 `npm 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"`
@@ -85,9 +87,13 @@ 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 }))
 
   return (
     <Select
+      items={selectItems}
       value={currentValue}
       onValueChange={(href) => {
         // Base UI reports `null` when the selection is cleared; there is no