@squadbase/vantage 0.0.1 → 0.1.0

package/docs/ja/ui/spinner.md

@@ -0,0 +1,14 @@
+# Spinner
+
+> いちばん小さい待機表示。
+
+回転するアイコンだけの待機表示です。ボタンの中など、狭い場所に置きます。
+
+```tsx
+import { Spinner } from "@squadbase/vantage/ui";
+```
+
+`<svg>` そのものなので、大きさは `size-*`、色は `text-*` で決まります。
+
+画面ぶんの読み込みには [`Loading`](ui/loading)、レイアウトを保ったまま待たせるなら
+[`Skeleton`](ui/skeleton) を使ってください。

package/docs/ja/ui/switch.md

@@ -0,0 +1,19 @@
+# Switch
+
+> 即時に効く設定のトグル。
+
+その場で効く設定の切り替えです。フォームを送信して初めて効く項目には
+[`Checkbox`](ui/checkbox) の方が適しています。
+
+```tsx
+import { Switch } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `checked` | `boolean` |  | オン/オフ。 |
+| `onCheckedChange` | `(checked: boolean) => void` |  | 変更時。 |
+| `size` | `"default" \| "sm"` | `"default"` | 大きさ。 |
+| `disabled` | `boolean` |  | 操作を無効にする。 |
+
+ラベルは [`Label`](ui/label) で包むと、文字の側を押しても切り替わります。

package/docs/ja/ui/table.md

@@ -0,0 +1,24 @@
+# Table
+
+> 素の表プリミティブ。並べ替えや検索が要るなら DataTable を。
+
+`<table>` 一式にテーマの罫線と余白を付けただけのプリミティブです。並べ替え・検索・ページングが
+要るなら [`DataTable`](parts/data-table) を使ってください。
+
+```tsx
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "@squadbase/vantage/ui";
+```
+
+対応は素の HTML そのままです — `Table` は `<table>`、`TableHeader` は `<thead>`、`TableHead` は
+`<th>`、`TableCell` は `<td>`。props もネイティブのものが通ります。
+
+数値の列は `text-right tabular-nums` を付けると桁が揃います。

package/docs/ja/ui/tabs.md

@@ -0,0 +1,24 @@
+# Tabs
+
+> 表示を切り替えるタブ。
+
+同じ場所に複数の内容を出し分けます。ボタン 2〜4 個で切り替えるだけなら
+[`SegmentedControl`](parts/segmented-control) の方が場所を取りません。
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Tabs` | 状態。`value` / `defaultValue` / `onValueChange`、`orientation` |
+| `TabsList` | タブの帯。`variant`: `default`（塗り）\| `line`（下線） |
+| `TabsTrigger` | タブ 1 つ。`value` は必須 |
+| `TabsContent` | 対応する中身 |
+
+URL に状態を残したい場合は、`value` を検索パラメータと結び付けてください
+（[ルーティング](routing) を参照）。
+
+`orientation="vertical"` にすると縦並びになります。

package/docs/ja/ui/textarea.md

@@ -0,0 +1,15 @@
+# Textarea
+
+> 複数行のテキスト入力。
+
+複数行の入力です。props はネイティブの `<textarea>` と同じです。
+
+```tsx
+import { Textarea } from "@squadbase/vantage/ui";
+```
+
+高さは `rows` か `className`（`min-h-32` など）で決めます。`aria-invalid` を付けるとエラー色に
+なるのは [`Input`](ui/input) と同じです。
+
+上下にツールバーを付けたいときは、[`InputGroup`](ui/input-group) の
+`InputGroupTextarea` と `align="block-end"` の組み合わせが使えます。

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

@@ -0,0 +1,27 @@
+# ToggleGroup
+
+> トグルの束。value は常に配列。
+
+複数のトグルをひとつの帯にまとめます。Base UI では**単一選択でも `value` は配列**です — 単一
+選択が欲しいだけなら [`SegmentedControl`](parts/segmented-control) がその面倒を
+引き受けます。
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `value` | `string[]` |  | 選択中の値。**単一選択でも配列**。 |
+| `onValueChange` | `(value: string[]) => void` |  | 変更時。配列で返る。 |
+| `toggleMultiple` | `boolean` |  | 複数選択を許す。 |
+| `variant` | `"default" \| "outline"` | `"default"` |  |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` |  |
+| `spacing` | `number` | `2` | 項目の間隔。`0` で連結された帯になる。 |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
+
+> [!WARNING]
+> Radix 版の `type="single"` / `type="multiple"` はありません。単一選択は「配列の長さを 1 に保つ」
+> という運用になります。その処理は
+> [`SegmentedControl`](parts/segmented-control) に入っているので、
+> 単一選択ならそちらを使うのが確実です。

package/docs/ja/ui/toggle.md

@@ -0,0 +1,19 @@
+# Toggle
+
+> 押した状態を保つボタン。
+
+押すとその状態が残るボタンです。複数を束ねたいときは
+[`ToggleGroup`](ui/toggle-group) を使います。
+
+```tsx
+import { Toggle, toggleVariants } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `pressed` | `boolean` |  | 押された状態。 |
+| `onPressedChange` | `(pressed: boolean) => void` |  | 変更時。 |
+| `variant` | `"default" \| "outline"` | `"default"` | 見た目。 |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | 大きさ。 |
+
+アイコンだけの場合は `aria-label` を必ず付けてください。

package/docs/ja/ui/tooltip.md

@@ -0,0 +1,22 @@
+# Tooltip
+
+> ホバーで出る短い説明。
+
+ホバーやフォーカスで出る短い説明です。中に操作を置きたくなったら
+[`Popover`](ui/popover) の出番です。
+
+```tsx
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `TooltipProvider` | 遅延の共有設定。`delay`（既定 `0`、ミリ秒） |
+| `Tooltip` | 1 つ分の状態 |
+| `TooltipTrigger` | きっかけ。`render` で任意の要素にする |
+| `TooltipContent` | 中身。`side`（既定 `top`）/ `align` / `sideOffset` |
+
+> [!NOTE]
+> ツールチップはタッチ環境では出ません。**必要な情報をツールチップだけに置かないでください**。

package/docs/ja/ui/use-is-mobile.md

@@ -0,0 +1,18 @@
+# useIsMobile()
+
+> 画面幅が狭いかどうかを返すフック。
+
+ビューポートが狭い（768px 未満）かどうかを返すフックです。[`Sidebar`](ui/sidebar) が
+モバイルでシートに切り替わる判定にも使っています。
+
+```tsx
+import { useIsMobile } from "@squadbase/vantage/ui";
+
+export default function Overview() {
+  const isMobile = useIsMobile();
+  return <EChart option={option} height={isMobile ? 200 : 360} />;
+}
+```
+
+`matchMedia` を購読しているので、幅を変えると再描画されます。初回描画では `false` から始まる点に
+注意してください（レイアウトの分岐は、可能なら CSS のブレークポイントで書く方が確実です）。

package/docs/ja/ui-and-theming.md

@@ -0,0 +1,95 @@
+# UI とテーマ
+
+> 組み込み UI キットを import する。styles.css でテーマトークンを上書きする。add でソースをコピーする。
+
+Vantage は **shadcn/ui**（Base UI 版）と、Tailwind v4 ベースのテーマを同梱しています。設定不要で
+すぐ使えます。
+
+## UI キットを使う
+
+入り口は 2 つです。shadcn/ui のプリミティブは `@squadbase/vantage/ui`、それらを組み上げた
+ダッシュボード部品は `@squadbase/vantage/components` から import します。
+
+```tsx
+import { Button } from "@squadbase/vantage/ui";
+import { DashboardCardPreset, MetricValue } from "@squadbase/vantage/components";
+
+export default function Overview() {
+  return (
+    <div className="grid gap-4 p-6 md:grid-cols-3">
+      <DashboardCardPreset title="売上">
+        <MetricValue className="my-0">¥1,240,000</MetricValue>
+      </DashboardCardPreset>
+      <DashboardCardPreset title="新規顧客">
+        <MetricValue className="my-0">128</MetricValue>
+      </DashboardCardPreset>
+      <DashboardCardPreset title="解約率">
+        <MetricValue className="my-0">2.1%</MetricValue>
+      </DashboardCardPreset>
+    </div>
+  );
+}
+```
+
+`/ui` にあるもの（抜粋）: `Button`、`Card`、`Table` プリミティブ、`Tabs`、`Input` / `Select` /
+`Checkbox` / `Switch` / `Slider`、`Calendar`、`Dialog` / `Sheet` / `Popover` / `Tooltip` /
+`DropdownMenu`、`Sidebar`、`Alert` / `Skeleton` / `Spinner`、`Loading` / `Empty` / `ErrorState`。
+
+`/components` にあるもの（抜粋）: `PageShell`、`AppShell`、`DashboardCard`、`DataTable`、
+`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`MetricValue`、`TrendIndicator`。
+
+各コンポーネントの props と使い方は [コンポーネント](components) タブにまとめてあります。
+
+## Tailwind はそのまま使える
+
+`className` に Tailwind ユーティリティを書くだけで効きます。`tailwind.config` も `postcss.config`
+も書きません（書くと禁止ファイルとしてエラーになります）。クラス結合には `cn()` が使えます。
+
+```tsx
+import { cn } from "@squadbase/vantage/ui";
+
+<div className={cn("p-4", isActive && "bg-accent")} />;
+```
+
+## テーマトークンを上書きする
+
+色や角丸などのデザイントークンは CSS 変数です。上書きしたいときは、プロジェクトルートに
+`styles.css` を置き、**CSS 変数だけ**を上書きします。このファイルはテーマの後に自動 import されます。
+
+```css
+/* styles.css — CSS 変数の上書きのみ */
+:root {
+  --primary: oklch(0.55 0.22 265);
+}
+.dark,
+[data-theme="dark"] {
+  --primary: oklch(0.72 0.19 265);
+}
+```
+
+> [!WARNING]
+> `styles.css` で許されるのは **CSS 変数（テーマトークン）の上書き**です。`tailwind.config` の
+> 持ち込みはできません（禁止ファイル）。
+
+トークンは shadcn/ui の neutral パレット（oklch）に、チャート用の `--chart-1` 〜 `--chart-5` と
+サイドバー用の `--sidebar-*` を足したものです。`--chart-*` を変えると
+[`EChart`](parts/echart) の配色も一緒に変わります。チャートは CSS 変数を実際に読み取って
+テーマを組み立てるためです。
+
+## ソースを編集したいとき: `vantage add`
+
+コンポーネントの中身を自分のものにしたいときは、編集可能なソースを `components/` にコピーします。
+
+```bash
+vantage add ui data-table      # 編集可能な DataTable をコピー
+vantage add block sales-overview
+```
+
+> [!NOTE]
+> 現行プロトタイプで `vantage add` がコピーできるのは `data-table`（ui）と `sales-overview`（block）
+> のみです。その他の UI コンポーネントは import 専用です。
+
+## 次に読む
+
+- [コンポーネント](components) — 全コンポーネントの props リファレンス
+- [CLI リファレンス](cli-reference) — 全コマンド

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Data dashboard framework for Squadbase Editor. Vite-powered, config-free, one-file first.",
   "type": "module",
   "license": "MIT",
@@ -50,6 +50,14 @@
       "types": "./dist/ui/index.d.ts",
       "default": "./dist/ui/index.js"
     },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown/index.d.ts",
+      "default": "./dist/markdown/index.js"
+    },
     "./server": {
       "types": "./dist/server/index.d.ts",
       "default": "./dist/server/index.js"
@@ -71,25 +79,42 @@
   },
   "files": [
     "dist",
+    "docs",
     "theme.css",
-    "registry"
+    "registry",
+    "skills",
+    "templates"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "node scripts/build-docs.mjs && tsup",
+    "build:docs": "node scripts/build-docs.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "tsup"
+    "prepublishOnly": "node scripts/build-docs.mjs && tsup"
   },
   "dependencies": {
+    "@base-ui/react": "^1.6.0",
     "@hono/node-server": "^2.0.8",
+    "@streamdown/code": "^1.1.1",
     "@tailwindcss/vite": "^4.3.2",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-router": "^1.170.17",
+    "@tanstack/react-table": "^8.21.3",
     "@vitejs/plugin-react": "^6.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "echarts": "^6.0.0",
     "esbuild": "^0.28.1",
     "hono": "^4.12.30",
+    "lucide-react": "^0.468.0",
     "picocolors": "^1.1.1",
+    "react-day-picker": "^10.0.1",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.0.0",
     "tailwindcss": "^4.3.2",
+    "tw-animate-css": "^1.0.0",
     "vite": "^8.1.4"
   },
   "peerDependencies": {

package/registry/blocks/sales-overview.tsx

@@ -1,5 +1,11 @@
 // Copied by `vantage add block sales-overview`. This file is yours to edit.
-import { BarChart, Card, CardContent, CardHeader, CardTitle, MetricCard } from "@squadbase/vantage/ui"
+import {
+  DashboardCardPreset,
+  EChart,
+  MetricValue,
+  TrendIndicator,
+  type EChartsOption,
+} from "@squadbase/vantage/components"
 
 export interface SalesOverviewProps {
   totalRevenue: string
@@ -10,28 +16,46 @@ export interface SalesOverviewProps {
 
 /** A composed dashboard section: KPI row + revenue vs. target chart. */
 export function SalesOverview({ totalRevenue, orders, revenueDelta, monthly }: SalesOverviewProps) {
+  const avgOrder = Math.round(
+    (Number(totalRevenue.replace(/[^0-9.]/g, "")) || 0) / Math.max(1, orders),
+  )
+
+  // Annotate the option — without it TypeScript widens `type: "category"` to
+  // `string` and ECharts rejects it.
+  const option: EChartsOption = {
+    tooltip: { trigger: "axis" },
+    legend: { data: ["Revenue", "Target"], top: 0 },
+    grid: { left: 8, right: 8, top: 40, bottom: 8, containLabel: true },
+    xAxis: { type: "category", data: monthly.map((m) => m.month) },
+    yAxis: { type: "value" },
+    series: [
+      { name: "Revenue", type: "bar", data: monthly.map((m) => m.revenue) },
+      { name: "Target", type: "bar", data: monthly.map((m) => m.target) },
+    ],
+  }
+
   return (
     <section className="flex flex-col gap-4">
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <MetricCard label="Revenue" value={totalRevenue} delta={revenueDelta} />
-        <MetricCard label="Orders" value={orders.toLocaleString()} />
-        <MetricCard label="Avg. order" value={`$${Math.round((Number(totalRevenue.replace(/[^0-9.]/g, "")) || 0) / Math.max(1, orders))}`} />
+        <DashboardCardPreset title="Revenue">
+          <MetricValue className="my-0">{totalRevenue}</MetricValue>
+          {revenueDelta !== undefined && (
+            <TrendIndicator
+              value={Math.abs(revenueDelta)}
+              direction={revenueDelta >= 0 ? "up" : "down"}
+            />
+          )}
+        </DashboardCardPreset>
+        <DashboardCardPreset title="Orders">
+          <MetricValue className="my-0">{orders.toLocaleString()}</MetricValue>
+        </DashboardCardPreset>
+        <DashboardCardPreset title="Avg. order">
+          <MetricValue className="my-0">${avgOrder}</MetricValue>
+        </DashboardCardPreset>
       </div>
-      <Card>
-        <CardHeader>
-          <CardTitle>Revenue vs. target</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BarChart
-            data={monthly}
-            categoryKey="month"
-            series={[
-              { key: "revenue", label: "Revenue" },
-              { key: "target", label: "Target" },
-            ]}
-          />
-        </CardContent>
-      </Card>
+      <DashboardCardPreset title="Revenue vs. target">
+        <EChart option={option} height={320} ariaLabel="Revenue vs. target by month" />
+      </DashboardCardPreset>
     </section>
   )
 }