@squadbase/vantage 0.0.1 → 0.1.1

package/templates/AGENTS.md

@@ -0,0 +1,313 @@
+# AGENTS.md — Vantage アプリの地図
+
+このファイルは、**Vantage(`@squadbase/vantage`)アプリを作るコーディングエージェント**が
+最初に読むための地図です。アプリ作者(= `index.tsx` を書く側)が守るべき規約・不変条件・
+最小レシピを 1 ページに集約しています。ここに書かれた規約だけで、最小のダッシュボードアプリを
+正しく組めます。
+
+> このファイルは **Vantage フレームワークが所有する正本**のコピーです。手で書き換えても、
+> `vantage upgrade` を実行するとフレームワーク同梱の正本から再同期されて上書きされます。
+> アプリ固有のメモは別ファイル(例: `README.md`)に書いてください。
+>
+> 手順を伴う踏み込んだワークフローは、同梱の Claude Code Skill に分かれています
+> (`vantage add skill --all` で `.claude/skills/` に配置)。このファイルは「地図」、Skill は
+> 「手順書」という役割分担です。詰まったら `vantage-app` / `vantage-add-feature` /
+> `vantage-pitfalls` を参照してください。
+
+## Vantage とは
+
+設定ファイル不要(config-free)な React ダッシュボードフレームワーク。アプリ作者が書くのは
+`index.tsx`(と任意の追加ファイル)だけで、Vite・ルーティング・TanStack Query・Tailwind・
+UI キット・開発サーバー・API サーバー・ビルドはすべて Vantage が所有します。設定は
+「ファイル名の規約」で表現します。
+
+## 不変条件(破ると静かに壊れる)
+
+- **設定ファイルを作らない。** `vite.config.*`・`tailwind.config.*`・`postcss.config.*`・
+  `components.json`・`vantage.config.*` はすべて禁止。存在すると `vantage check` がエラーにする
+  (`FORBIDDEN_FILE`)。テーマ調整は `styles.css` のトークンで行う。
+- **import は必ず `@squadbase/vantage` のサブパス経由。** `@tanstack/*`・`@base-ui/react`・
+  `echarts`・`hono`・`vite`・`tailwindcss` を直接 import しない。`lucide-react` のアイコンだけは
+  直接 import してよい。
+- **モジュール間の相対 import はランタイムの `.js` 指定子で書く**(例:
+  `./components/revenue-chart.js`)。ソースが `.tsx`/`.ts` でも拡張子は `.js` と書く。
+  ESM の Node 解決に必要。`@squadbase/vantage` のサブパスはこの限りではない。
+- **クライアントコードは `server/` を import してはならない。** 違反は `CLIENT_IMPORTS_SERVER`
+  エラー(静的にもビルド時にも弾かれる)。共有したいコードは `lib/` に置く。
+- **クライアントに届く env は `PUBLIC_` 接頭辞のものだけ。** `import.meta.env.PUBLIC_FOO`。
+  それ以外を `import.meta.env` で読むと `PUBLIC_ENV_MISUSE` 警告。シークレットは
+  `ApiContext.env`(server/ 内)にだけ届く。
+- **`.vantage/` と `dist/` は生成物。** 編集しない・読みにいかない(gitignore 済み)。任意の CLI
+  コマンド、または `vantage upgrade` で再生成される。
+- **`definePage` の値はリテラルで書く。** title/description/navLabel はビルド時に静的抽出される
+  ため、変数・関数呼び出し・テンプレート補間は使わない。`page` エクスポートはランタイムでは
+  読まれない。
+
+## import サブパスの地図
+
+| import 元 | 提供するもの |
+| --- | --- |
+| `@squadbase/vantage` | `definePage`(ページ設定) |
+| `@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`・`EChart` ほか) |
+| `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
+| `@squadbase/vantage/server` | `ApiContext`・`HttpError`(server/ 側でのみ使う) |
+
+## 最小アプリ(SPA モード)
+
+`package.json` と `index.tsx` の 2 ファイルだけで動く。
+
+`package.json`:
+
+```json
+{
+  "name": "my-dashboard",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vantage dev",
+    "build": "vantage build",
+    "preview": "vantage preview",
+    "check": "vantage check",
+    "routes": "vantage routes"
+  },
+  "dependencies": {
+    "@squadbase/vantage": "^0.1.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  }
+}
+```
+
+`index.tsx`(ルートのデフォルトエクスポートが `/` ページになる):
+
+```tsx
+export default function Dashboard() {
+  return (
+    <main className="p-6">
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+    </main>
+  )
+}
+```
+
+```bash
+pnpm install
+pnpm dev      # → http://localhost:5173(HMR)
+pnpm check    # 静的診断(エラーがあれば exit 1)
+pnpm routes   # ページ/API の URL マップ
+```
+
+`server/` ディレクトリが無いので、この時点では **SPA モード**。
+
+## ルーティング規約(ファイル名 → ルート)
+
+ルートディレクトリ直下の `.tsx`/`.jsx` がそのままページになる。各ページは**デフォルト
+エクスポートの React コンポーネントが必須**(無いと `MISSING_DEFAULT_EXPORT`)。
+
+| ファイル | ルート |
+| --- | --- |
+| `index.tsx` | `/` |
+| `monthly-analysis.tsx` | `/monthly-analysis` |
+| `sales/index.tsx` | `/sales` |
+| `sales/[customerId].tsx` | `/sales/:customerId`(動的パラメータ) |
+| `_layout.tsx` | そのディレクトリ配下を包むネストレイアウト(`Outlet` で子を描く) |
+| `_404.tsx` | Not Found ページ |
+| `_error.tsx` | ルートが throw したときのエラーページ |
+
+`components/`・`hooks/`・`lib/`・`server/`・`public/` はルート走査の対象外(ページにならない)。
+
+```tsx
+import { definePage } from "@squadbase/vantage"
+
+// title は document.title、navLabel は useRoutes() で組むナビの表示名(既定は title)
+export const page = definePage({ title: "Monthly Analysis · Acme", navLabel: "Monthly" })
+
+export default function MonthlyAnalysis() {
+  return <main className="p-6">…</main>
+}
+```
+
+### ナビはルート一覧から組む
+
+`useRoutes()` がページルート一覧(スキャン順)を返すので、リンク配列を手で持たない。
+`useCurrentRoute()` は現在のルート(404 なら `undefined`)。
+
+```tsx
+import { Link, useCurrentRoute, useRoutes } from "@squadbase/vantage/router"
+
+// 動的ルートは URL が定まらないので外す。label は navLabel → title → path の順
+const routes = useRoutes().filter((r) => !r.dynamic)
+const current = useCurrentRoute()
+
+routes.map((r) => (
+  <Link key={r.path} to={r.to} activeClassName="font-semibold">
+    {r.label}
+  </Link>
+))
+```
+
+`RouteInfo`: `path`(`/sales/:id`)・`to`(`/sales/$id`)・`params`・`dynamic`・`index`・`label`・
+`title`・`description`・`navLabel`。
+
+### フィルタ状態は URL に置く
+
+リロードで消えず、URL をそのまま共有できる。`useState` と同じ形。
+
+```tsx
+import { useSearchParam, useSearchState } from "@squadbase/vantage/router"
+
+const [region, setRegion] = useSearchParam("region", "all")   // 常に string
+const [segments, setSegments] = useSearchState<string[]>("segments", []) // JSON になる値
+```
+
+デフォルト値(または `null`)を書くとキーは URL から消える。履歴は既定で `replace`
+(`{ replace: false }` で push)。
+
+### 動的パラメータの「3 つの綴り」を同期させる
+
+崩すと静かにマッチしなくなる不変条件:
+
+- ファイル名 `sales/[customerId].tsx`
+- 表示ルート `/sales/:customerId`
+- リンクトークン `to="/sales/$customerId"` + `params={{ customerId }}`
+
+```tsx
+import { Link, useParams } from "@squadbase/vantage/router"
+
+<Link to="/sales/$customerId" params={{ customerId: row.id }}>{row.name}</Link>
+
+// 詳細ページ側で取り出す
+const { customerId } = useParams()
+```
+
+## データ取得(server を持たない fetch)
+
+外部 API を叩くだけなら `server/` は不要。`@squadbase/vantage/query` の `useQuery` を使う:
+
+```tsx
+import { useQuery } from "@squadbase/vantage/query"
+import { Loading, ErrorState } from "@squadbase/vantage/ui"
+
+const q = useQuery({ queryKey: ["stats"], queryFn: () => fetch("/…").then((r) => r.json()) })
+if (q.isPending) return <Loading />
+if (q.isError) return <ErrorState message={(q.error as Error).message} />
+```
+
+`QueryClient` は Vantage が 1 つだけ管理する(staleTime 30s・retry 1・
+refetchOnWindowFocus false・networkMode "always")。挙動を変えたいときはクエリ側のオプションで
+上書きする。
+自分の `server/api` を叩くときは `useQuery` ではなく `useApiQuery`(→「API を足して fullstack に
+する」)。
+
+## API を足して fullstack にする
+
+**`server/` ディレクトリを作った瞬間に fullstack モードになる。** `server/api/**` の各ファイルが
+API ルートになる。
+
+`server/api/monthly-analysis.ts` → `GET /api/monthly-analysis`:
+
+```ts
+import type { ApiContext } from "@squadbase/vantage/server"
+import { HttpError } from "@squadbase/vantage/server"
+
+export async function GET({ params, env }: ApiContext) {
+  if (!env.API_KEY) throw new HttpError(500, "API_KEY missing")
+  return Response.json({ ok: true })
+}
+```
+
+- API モジュールは**大文字の HTTP メソッド**(`GET`/`POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`)を
+  エクスポートする。それ以外の名前は `INVALID_API_EXPORT` エラー。
+- 動的 API も `[id].ts` 記法: `server/api/customers/[id].ts` → `GET /api/customers/:id`。
+  `params.id` で取り出す(`noUncheckedIndexedAccess` が効くので narrowing が要る)。
+- **クライアントに見せたいエラーは `HttpError(status, msg)` を throw する。** それ以外の throw は
+  ログに記録され汎用の 500 に丸められる。
+- **シークレットは `ApiContext.env` にだけ届く**(クライアントには決して届かない)。
+
+クライアント側からは `useApiQuery` で `/api/*` を叩く。ベース URL の解決・JSON パース・
+非 2xx の `ApiError` 化・クエリキー(`["api", url]`)が入っている:
+
+```tsx
+import { useApiQuery, useApiMutation } from "@squadbase/vantage/query"
+
+const q = useApiQuery<Customer>(`/api/customers/${customerId}`)
+if (q.isError) return <ErrorState message={q.error.message} />  // HttpError のメッセージ
+
+// クエリ文字列は search で。undefined の項目は落ちる
+const rows = useApiQuery<Row[]>("/api/customers", { search: { segment } })
+
+// 書き込み。変数がそのまま JSON ボディになる
+const save = useApiMutation<Customer, Payload>("/api/customers", { method: "POST" })
+```
+
+`ApiError` は `message`・`status`・`body`・`requestId` を持つ。hook が使えない場所では
+`apiJson(path, init)`、生の `Response` が要るときは `apiFetch`。
+
+## 環境変数
+
+- **クライアントで読めるのは `import.meta.env.PUBLIC_*` と `MODE`/`DEV`/`PROD`/`SSR`/`BASE_URL`
+  のみ。** `VITE_` 系の公開 API は無い。
+- サーバー側のシークレットは `ApiContext.env.MY_SECRET` で読む(`server/` 内のみ)。
+
+## 組み込み UI / コンポーネントの入口
+
+- **プリミティブ**は `@squadbase/vantage/ui` から import する(`Button`・`Loading`・
+  `ErrorState`・`Empty`・`Select`・`Checkbox` ほか)。編集したいコピーが要るなら
+  `vantage add ui <name>` で `components/ui/` に取り出す。
+- **複合パーツ**は `@squadbase/vantage/components` から(`PageShell`・`DashboardCardPreset`・
+  `DataTablePreset`・`EChart` ほか)。ブロックは `vantage add block <name>` で取り出す。
+- **どの名前が import 可能か / props の詳細は `vantage docs` で引く。** ガイドとコンポーネント
+  リファレンスはパッケージに同梱されていて、オフラインでも読める(→「ドキュメントを引く」)。
+  **名前が分からないとき**はやりたいことで `vantage search` する(→ 同節)。
+- `vantage add ui`・`vantage add block` でコピーできる名前は、未知名で実行すると候補が一覧表示
+  される。
+
+## ドキュメントを引く(`vantage docs` / `vantage search`)
+
+```bash
+vantage docs                  # 全ページの一覧(ガイド + コンポーネント)
+vantage docs button           # 1 ページ表示(短縮名。ui/button に解決される)
+vantage docs parts/data-table # 完全な slug でも引ける
+vantage docs data-table --json  # { slug, title, description, section, content }
+vantage docs --all            # 全ページを連結(まとめて読み込む用)
+vantage docs routing --lang en  # 英語版(既定は ja)
+```
+
+props の表・使用例・落とし穴はコンポーネントのページに載っている。**推測で props を書く前に
+`vantage docs <name>` を引くこと。** 本文中のリンクは slug なので、`[DataTable](parts/data-table)`
+は `vantage docs parts/data-table` で開ける。
+
+**名前が分からないときは検索する。** 対象は `vantage docs` と同じ同梱ドキュメント。
+
+```bash
+vantage search 期間を選ぶ UI が欲しい       # 自然言語(BM25)。やりたいことで引く
+vantage search "enable[A-Z]\w+" --regex    # 正規表現で props を横断(行番号付き)
+vantage search テーブル --limit 5 --json    # 機械可読(slug + score + snippet)
+```
+
+結果の slug はそのまま `vantage docs <slug>` に渡せる。
+
+## 検証・ビルド・プレビュー
+
+```bash
+pnpm check     # 静的診断(禁止ファイル・ルート衝突・境界・API export・env 誤用)
+pnpm routes    # ページ + API の URL マップ
+pnpm build     # dist/ に client(+ server)+ vantage-manifest.json
+pnpm preview   # 本番ビルドをローカル実行
+```
+
+`vantage-manifest.json` の `mode`(`spa` / `fullstack`)は `server/` の有無から自動で決まる
+(手で書かない)。`vantage check --json` / `vantage routes --json` はエージェント向けの機械
+可読出力。`console.*` とランタイムエラーは開発ターミナルに `[browser:…]` として転送される。
+
+## さらに詳しく(同梱 Skill)
+
+`vantage add skill --all` で `.claude/skills/` に配置される:
+
+- **`vantage-app`** — アプリを一から作る / SPA を fullstack に広げる手順
+- **`vantage-add-feature`** — 既存アプリに page / api / ui / block を 1 つ足す定型
+- **`vantage-pitfalls`** — Base UI(≠ Radix)の癖、`SelectValue` の挙動、EChart のテーマ
+  非追従など、静かに壊れる落とし穴のリファレンス

package/theme.css

@@ -1,29 +1,36 @@
 /**
  * Vantage design tokens. Imported after `@import "tailwindcss"` by the
- * generated runtime.css. Defines CSS variables (light + dark) and maps them to
- * Tailwind v4 color/radius utilities via `@theme inline`.
+ * generated runtime.css. Defines CSS variables (light + dark), maps them to
+ * Tailwind v4 color/radius utilities via `@theme inline`, and declares the
+ * `data-*` custom variants the Base UI component kit styles itself with.
  */
 
+@import "tw-animate-css";
+
+/* --------------------------------------------------------------- tokens */
+/* shadcn/ui's neutral base palette (oklch), plus the chart hues Vantage adds
+   on top — charts need distinguishable colours, not a greyscale ramp. */
+
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(240 10% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(240 10% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(240 10% 3.9%);
-  --primary: hsl(240 5.9% 10%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(240 4.8% 95.9%);
-  --secondary-foreground: hsl(240 5.9% 10%);
-  --muted: hsl(240 4.8% 95.9%);
-  --muted-foreground: hsl(240 3.8% 46.1%);
-  --accent: hsl(240 4.8% 95.9%);
-  --accent-foreground: hsl(240 5.9% 10%);
-  --destructive: hsl(0 72% 51%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(240 5.9% 90%);
-  --input: hsl(240 5.9% 90%);
-  --ring: hsl(240 5.9% 10%);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --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);
+  --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%);
@@ -31,35 +38,53 @@
   --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);
 }
 
 .dark,
 [data-theme="dark"] {
-  --background: hsl(240 10% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(240 8% 6%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(240 8% 6%);
-  --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(240 5.9% 10%);
-  --secondary: hsl(240 3.7% 15.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(240 3.7% 15.9%);
-  --muted-foreground: hsl(240 5% 64.9%);
-  --accent: hsl(240 3.7% 15.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 62% 50%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(240 3.7% 15.9%);
-  --input: hsl(240 3.7% 18%);
-  --ring: hsl(240 4.9% 83.9%);
+  --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);
+  --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);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {
@@ -87,10 +112,119 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* Accordion open/close, driven by Base UI's measured panel height. */
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height, auto);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-panel-height, auto);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/* ------------------------------------------------------- custom variants */
+/* Base UI reports state through `data-open`, `data-checked`, … rather than
+   Radix's `data-state="open"`. These variants accept both spellings so the
+   component classes read the same either way. */
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+/* ------------------------------------------------------------ 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 {
@@ -99,3 +233,7 @@ body {
   font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
+
+* {
+  border-color: var(--border);
+}

package/dist/chunk-73J5ZD4C.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/server/dispatch.ts"],"names":[],"mappings":"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","file":"chunk-73J5ZD4C.js","sourcesContent":["import type { Segment } from \"../core/types.js\"\nimport type { ApiContext, ApiHandler, ApiModule } from \"./index.js\"\nimport { isHttpError } from \"./index.js\"\n\n/** A resolvable API route: its segments plus a lazy module loader. */\nexport interface ApiRouteEntry {\n  routePath: string\n  segments: Segment[]\n  hasCatchall: boolean\n  staticCount: number\n  load: () => Promise<ApiModule>\n}\n\n/** Order routes so the most specific matches first (static > param > catchall). */\nexport function sortApiRoutes<T extends ApiRouteEntry>(routes: T[]): T[] {\n  return [...routes].sort((a, b) => {\n    if (a.hasCatchall !== b.hasCatchall) return a.hasCatchall ? 1 : -1\n    if (a.staticCount !== b.staticCount) return b.staticCount - a.staticCount\n    return b.segments.length - a.segments.length\n  })\n}\n\nfunction matchSegments(segments: Segment[], parts: string[]): Record<string, string> | null {\n  const params: Record<string, string> = {}\n  let i = 0\n  for (const seg of segments) {\n    if (seg.kind === \"catchall\") {\n      params[seg.name] = parts.slice(i).map(decode).join(\"/\")\n      return params\n    }\n    if (i >= parts.length) return null\n    if (seg.kind === \"static\") {\n      if (parts[i] !== seg.value) return null\n    } else {\n      params[seg.name] = decode(parts[i]!)\n    }\n    i++\n  }\n  return i === parts.length ? params : null\n}\n\nfunction decode(s: string): string {\n  try {\n    return decodeURIComponent(s)\n  } catch {\n    return s\n  }\n}\n\n/** Match a pathname (e.g. `/api/customers/42`) against the API routes. */\nexport function matchApiRoute(\n  routes: ApiRouteEntry[],\n  pathname: string,\n): { route: ApiRouteEntry; params: Record<string, string> } | null {\n  if (pathname !== \"/api\" && !pathname.startsWith(\"/api/\")) return null\n  let rest = pathname.slice(4)\n  if (rest.startsWith(\"/\")) rest = rest.slice(1)\n  // Normalize a single trailing slash so `/api/customers/` doesn't match a\n  // `:id` route with an empty-string param.\n  if (rest.endsWith(\"/\")) rest = rest.slice(0, -1)\n  const parts = rest === \"\" ? [] : rest.split(\"/\")\n  for (const route of routes) {\n    const params = matchSegments(route.segments, parts)\n    if (params) return { route, params }\n  }\n  return null\n}\n\n/** Unique per-request id used to correlate the terminal log with the response. */\nfunction requestId(): string {\n  const g = globalThis as { crypto?: { randomUUID?: () => string } }\n  if (g.crypto?.randomUUID) return g.crypto.randomUUID()\n  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`\n}\n\n/**\n * Invoke a matched API module for a request. Shared by the dev middleware and\n * the production Node server so behavior is identical across environments.\n */\nexport async function dispatchApi(\n  mod: ApiModule,\n  request: Request,\n  params: Record<string, string>,\n  env: Record<string, string | undefined>,\n): Promise<Response> {\n  const method = request.method.toUpperCase() as keyof ApiModule\n  const handler = mod[method] as ApiHandler | undefined\n  const rid = requestId()\n\n  if (typeof handler !== \"function\") {\n    const allowed = ([\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\", \"OPTIONS\"] as const).filter(\n      (m) => typeof mod[m] === \"function\",\n    )\n    return Response.json(\n      { error: \"Method Not Allowed\", method: request.method, requestId: rid },\n      { status: 405, headers: { Allow: allowed.join(\", \"), \"x-vantage-request-id\": rid } },\n    )\n  }\n\n  const ctx: ApiContext = {\n    request,\n    params,\n    env,\n    // Fire-and-forget: runs after the response is sent, on the server's own\n    // event loop; errors are swallowed so background work can't crash it.\n    waitUntil: (p) => {\n      void Promise.resolve(p).catch(() => undefined)\n    },\n  }\n\n  try {\n    const res = await handler(ctx)\n    // waitUntil work runs after the response is returned, never blocking it.\n    const headers = new Headers(res.headers)\n    headers.set(\"x-vantage-request-id\", rid)\n    return new Response(res.body, { status: res.status, statusText: res.statusText, headers })\n  } catch (err) {\n    const status = isHttpError(err) ? err.status : 500\n    // Only surface intentional HttpError messages; internal errors are logged\n    // server-side but returned generically to avoid information disclosure.\n    const message = isHttpError(err) ? err.message : \"Internal Server Error\"\n    // Logged with request id so agents can correlate terminal + response.\n    console.error(`[vantage] API error (${rid}) ${request.method} ${new URL(request.url).pathname}:`, err)\n    return Response.json(\n      { error: message, requestId: rid },\n      { status, headers: { \"x-vantage-request-id\": rid } },\n    )\n  }\n}\n"]}

package/dist/chunk-ATYZ45XL.js

@@ -1,19 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-// @squadbase/vantage — generated build. Do not edit.
-
-function createQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 3e4,
-        retry: 1,
-        refetchOnWindowFocus: false
-      }
-    }
-  });
-}
-
-export { createQueryClient };
-//# sourceMappingURL=chunk-ATYZ45XL.js.map
-//# sourceMappingURL=chunk-ATYZ45XL.js.map

package/dist/chunk-ATYZ45XL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/query/client.ts"],"names":[],"mappings":";;;;AAOO,SAAS,iBAAA,GAAiC;AAC/C,EAAA,OAAO,IAAI,WAAA,CAAY;AAAA,IACrB,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS;AAAA,QACP,SAAA,EAAW,GAAA;AAAA,QACX,KAAA,EAAO,CAAA;AAAA,QACP,oBAAA,EAAsB;AAAA;AACxB;AACF,GACD,CAAA;AACH","file":"chunk-ATYZ45XL.js","sourcesContent":["import { QueryClient } from \"@tanstack/react-query\"\n\n/**\n * Create the QueryClient with Vantage defaults. Individual queries may override\n * these, but replacing the QueryClient wholesale is intentionally not exposed —\n * Squadbase relies on a single managed client for auth, logging and telemetry.\n */\nexport function createQueryClient(): QueryClient {\n  return new QueryClient({\n    defaultOptions: {\n      queries: {\n        staleTime: 30_000,\n        retry: 1,\n        refetchOnWindowFocus: false,\n      },\n    },\n  })\n}\n"]}