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

package/registry/ui/states.tsx

@@ -1,21 +1,194 @@
 // Copied by `vantage add ui states`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/states.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/states.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * Loading / Empty / ErrorState — the three non-data states of a panel, worded for
+ * business users. Defaults follow the page language (`<html lang>`: Japanese for `ja`, else
+ * English) and say what is happening, not why the system failed: keep raw errors
+ * ("upstream timeout after 30s") in `details`, which stays folded behind "Show details" (ja: "詳細を表示").
+ *
+ * @example
+ * import { ErrorState } from "@/components/ui/states"
+ * // Vantage: import { ErrorState } from "@squadbase/vantage/ui"
+ *
+ * <ErrorState
+ *   title="売上を読み込めませんでした"
+ *   message="データソースから時間内に応答がありませんでした。しばらくしてから再試行してください。"
+ *   details={error.message}
+ *   action={<Button variant="outline" onClick={retry}>再試行する</Button>}
+ * />
+ */
 import type { ReactNode } from "react"
 import { cn } from "@squadbase/vantage/ui"
+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 TEXT = {
+  ja: {
+    loading: "読み込んでいます…",
+    empty: "表示できるデータがありません",
+    errorTitle: "データを読み込めませんでした",
+    errorMessage: "時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。",
+    details: "詳細を表示",
+  },
+  en: {
+    loading: "Loading…",
+    empty: "No data to display",
+    errorTitle: "Couldn't load the data",
+    errorMessage: "Try again in a moment. If the problem continues, contact your administrator.",
+    details: "Show details",
+  },
+}
+
+const useText = () => TEXT[uiLanguage(useLocale())]
 
-export function Loading({ label = "Loading…", className }: { label?: string; className?: string }) {
+export function Loading({ label, className }: { label?: string; className?: string }) {
+  const t = useText()
   return (
     <div className={cn("flex min-h-[30vh] items-center justify-center", className)} role="status" aria-live="polite">
       <div className="flex items-center gap-3 text-sm text-muted-foreground">
         <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-        {label}
+        {label ?? t.loading}
       </div>
     </div>
   )
 }
 
 export function Empty({
-  title = "Nothing here yet",
+  title,
   description,
   icon,
   action,
@@ -27,10 +200,11 @@ export function Empty({
   action?: ReactNode
   className?: string
 }) {
+  const t = useText()
   return (
     <div className={cn("flex flex-col items-center justify-center gap-2 p-10 text-center", className)}>
       {icon ? <div className="text-3xl text-muted-foreground">{icon}</div> : null}
-      <p className="font-medium">{title}</p>
+      <p className="font-medium">{title ?? t.empty}</p>
       {description ? <p className="max-w-sm text-sm text-muted-foreground">{description}</p> : null}
       {action ? <div className="mt-2">{action}</div> : null}
     </div>
@@ -38,23 +212,35 @@ export function Empty({
 }
 
 export function ErrorState({
-  title = "Something went wrong",
+  title,
   message,
+  details,
   action,
   className,
 }: {
   title?: string
+  /** What happened and what to do next, in plain words. */
   message?: ReactNode
+  /** Technical detail (error message, status code), folded behind "Show details" (ja: "詳細を表示"). */
+  details?: ReactNode
   action?: ReactNode
   className?: string
 }) {
+  const t = useText()
+  const shownMessage = message === undefined ? t.errorMessage : message
   return (
     <div
       className={cn("rounded-xl border border-destructive/30 bg-destructive/5 p-6", className)}
       role="alert"
     >
-      <p className="font-semibold text-destructive">{title}</p>
-      {message ? <p className="mt-1 text-sm text-muted-foreground">{message}</p> : null}
+      <p className="font-semibold text-destructive">{title ?? t.errorTitle}</p>
+      {shownMessage ? <p className="mt-1 text-sm text-muted-foreground">{shownMessage}</p> : null}
+      {details ? (
+        <details className="mt-2 text-xs text-muted-foreground">
+          <summary className="cursor-pointer select-none">{t.details}</summary>
+          <div className="mt-1 font-mono break-all">{details}</div>
+        </details>
+      ) : null}
       {action ? <div className="mt-3">{action}</div> : null}
     </div>
   )

package/registry/ui/status-badge.tsx

@@ -1,55 +1,262 @@
 // Copied by `vantage add ui status-badge`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/status-badge.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/status-badge.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
- * StatusBadge — a dot-plus-label badge for row/record status. Statuses map to
- * colours through `defaultColorMap`; pass `colorMap` to extend or override it.
+ * StatusBadge — a dot-plus-label badge for row/record status. Statuses map to a
+ * tone through `defaultColorMap`; pass `colorMap` to extend or override it.
+ *
+ * Tones are the theme's semantic tokens — `positive` | `negative` | `warning` |
+ * `info` | `neutral` — drawn as a `--<tone>` dot and text on a `--<tone>-subtle`
+ * background. The legacy colour names `green` / `red` / `yellow` / `blue` /
+ * `gray` are still accepted and map to positive / negative / warning / info /
+ * neutral. Unknown statuses and tones fall back to `neutral`.
+ *
+ * The default label comes from `STATUS_VOCABULARY` (one table of status, label and tone; the label follows the
+ * page's language, `<html lang>`), so the same state is worded the same everywhere (Tracker legends import it too):
+ *
+ * | status | ラベル（ja / en） | 色調 |
+ * |---|---|---|
+ * | `success` | 正常 / Healthy | positive |
+ * | `partial` | 一部失敗 / Partially failed | warning |
+ * | `failed` | 失敗 / Failed | negative |
+ * | `delayed` | 遅延 / Delayed | warning |
+ * | `running` | 実行中 / Running | info |
+ * | `stopped` | 停止中 / Stopped | neutral |
+ * | `active` / `inactive` | 有効 / 無効、Active / Inactive | positive / neutral |
+ * | `warning` / `error` / `pending` | 警告 / エラー / 保留中、Warning / Error / Pending | warning / negative / info |
  */
 import { forwardRef } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Badge } from "@squadbase/vantage/ui"
+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"
 
-const defaultColorMap: Record<string, string> = {
-  active: "green",
-  inactive: "gray",
-  warning: "yellow",
-  error: "red",
-  pending: "blue",
+/** `"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"
 }
 
-const colorStyles: Record<string, { dot: string; bg: string; text: string }> = {
-  green: {
-    dot: "bg-green-500",
-    bg: "bg-green-50 dark:bg-green-950",
-    text: "text-green-700 dark:text-green-300",
-  },
-  gray: {
-    dot: "bg-gray-500",
-    bg: "bg-gray-50 dark:bg-gray-950",
-    text: "text-gray-700 dark:text-gray-300",
-  },
-  yellow: {
-    dot: "bg-yellow-500",
-    bg: "bg-yellow-50 dark:bg-yellow-950",
-    text: "text-yellow-700 dark:text-yellow-300",
-  },
-  red: {
-    dot: "bg-red-500",
-    bg: "bg-red-50 dark:bg-red-950",
-    text: "text-red-700 dark:text-red-300",
+/** 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 ---------- */
+
+type StatusTone = "positive" | "negative" | "warning" | "info" | "neutral"
+
+const STATUS_LABELS = {
+  ja: {
+    success: "正常",
+    partial: "一部失敗",
+    failed: "失敗",
+    delayed: "遅延",
+    running: "実行中",
+    stopped: "停止中",
+    active: "有効",
+    inactive: "無効",
+    warning: "警告",
+    error: "エラー",
+    pending: "保留中",
   },
-  blue: {
-    dot: "bg-blue-500",
-    bg: "bg-blue-50 dark:bg-blue-950",
-    text: "text-blue-700 dark:text-blue-300",
+  en: {
+    success: "Healthy",
+    partial: "Partially failed",
+    failed: "Failed",
+    delayed: "Delayed",
+    running: "Running",
+    stopped: "Stopped",
+    active: "Active",
+    inactive: "Inactive",
+    warning: "Warning",
+    error: "Error",
+    pending: "Pending",
   },
+} as const
+
+/**
+ * 状態の語彙の正本: status → ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
+ * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。`label` は英語（フォールバック）で、
+ * ページの言語に合わせた語は `statusLabel(status, locale)` で引く。
+ */
+export const STATUS_VOCABULARY = {
+  success: { label: STATUS_LABELS.en.success, tone: "positive" },
+  partial: { label: STATUS_LABELS.en.partial, tone: "warning" },
+  failed: { label: STATUS_LABELS.en.failed, tone: "negative" },
+  delayed: { label: STATUS_LABELS.en.delayed, tone: "warning" },
+  running: { label: STATUS_LABELS.en.running, tone: "info" },
+  stopped: { label: STATUS_LABELS.en.stopped, tone: "neutral" },
+  active: { label: STATUS_LABELS.en.active, tone: "positive" },
+  inactive: { label: STATUS_LABELS.en.inactive, tone: "neutral" },
+  warning: { label: STATUS_LABELS.en.warning, tone: "warning" },
+  error: { label: STATUS_LABELS.en.error, tone: "negative" },
+  pending: { label: STATUS_LABELS.en.pending, tone: "info" },
+} as const satisfies Record<string, { label: string; tone: StatusTone }>
+
+export type StatusKey = keyof typeof STATUS_VOCABULARY
+
+/** 状態のラベル（`locale` の言語。既定はページのロケール）。語彙に無い status は渡された文字列のまま返す。 */
+export function statusLabel(status: string, locale?: string): string {
+  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_LABELS[uiLanguage(resolveLocale(locale))][status as StatusKey] : status
+}
+
+const defaultColorMap: Record<string, string> = Object.fromEntries(
+  Object.entries(STATUS_VOCABULARY).map(([key, { tone }]) => [key, tone]),
+)
+
+/** Legacy colour names → tones. */
+const legacyColorTones: Record<string, StatusTone> = {
+  green: "positive",
+  gray: "neutral",
+  yellow: "warning",
+  red: "negative",
+  blue: "info",
 }
 
-const fallbackStyle = colorStyles.gray!
+/**
+ * One literal class set per tone — Tailwind only emits classes it can see
+ * literally in the source.
+ */
+const toneStyles: Record<StatusTone, { dot: string; bg: string; text: string; border: string }> = {
+  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive", border: "border-positive/20 dark:border-positive/25" },
+  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative", border: "border-negative/20 dark:border-negative/25" },
+  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning", border: "border-warning/20 dark:border-warning/25" },
+  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info", border: "border-info/20 dark:border-info/25" },
+  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral", border: "border-neutral/20 dark:border-neutral/25" },
+}
+
+const resolveTone = (color: string | undefined): StatusTone => {
+  if (color === undefined) return "neutral"
+  if (Object.hasOwn(toneStyles, color)) return color as StatusTone
+  return legacyColorTones[color] ?? "neutral"
+}
 
 export interface StatusBadgeProps {
   status: string
   label?: string
+  /** status → tone (`positive` | `negative` | `warning` | `info` | `neutral`) or legacy colour name. */
   colorMap?: Partial<Record<string, string>>
   className?: string
 }
@@ -58,20 +265,20 @@ export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(functio
   { status, label, colorMap, className },
   ref,
 ) {
+  const locale = useLocale()
   const mergedColorMap = { ...defaultColorMap, ...colorMap }
-  const color = mergedColorMap[status] ?? "gray"
-  const style = colorStyles[color] ?? fallbackStyle
-  const displayLabel = label ?? status
+  const style = toneStyles[resolveTone(mergedColorMap[status])]
+  const displayLabel = label ?? statusLabel(status, locale)
 
   return (
     <Badge
       ref={ref}
       data-slot="status-badge"
       variant="outline"
-      className={cn("gap-1.5 border-transparent", style.bg, style.text, className)}
+      className={cn("gap-1.5 rounded-md", style.border, style.bg, style.text, className)}
       aria-label={displayLabel}
     >
-      <span className={cn("inline-block size-2 rounded-full", style.dot)} aria-hidden="true" />
+      <span className={cn("inline-block size-1.5 rounded-full", style.dot)} aria-hidden="true" />
       {displayLabel}
     </Badge>
   )

package/registry/ui/switch.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui switch`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/switch.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/switch.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
 
 import { cn } from "@squadbase/vantage/ui"

package/registry/ui/table.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui table`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/table.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/table.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 
 import { cn } from "@squadbase/vantage/ui"
@@ -70,7 +72,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}

package/registry/ui/tabs.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui tabs`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/tabs.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/tabs.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
 import { cva, type VariantProps } from "class-variance-authority"
 
@@ -58,7 +60,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-[color,background-color,border-color,box-shadow] group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
@@ -73,7 +75,7 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("flex-1 text-sm outline-none", className)}
+      className={cn("flex-1 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", className)}
       {...props}
     />
   )

package/registry/ui/textarea.tsx

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

package/registry/ui/toast.tsx

@@ -1,5 +1,5 @@
 // Copied by `vantage add ui toast`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/toast.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/toast.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
 "use client"
 
 import * as React from "react"
@@ -39,7 +39,7 @@ function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
       className={cn(
         "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
-        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_400ms_cubic-bezier(0.22,1,0.36,1),opacity_400ms,height_150ms] data-ending-style:[transition-duration:200ms] motion-reduce:[transition:opacity_150ms]",
         "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
         "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
         "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",