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

package/registry/ui/scroll-area.tsx

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

package/registry/ui/searchable-select.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui searchable-select`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/searchable-select.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/searchable-select.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * SearchableSelect — a single-select combobox with a filter box. Filtering runs
  * client-side over the given options; pass `onSearch` to take it over yourself
@@ -17,7 +19,7 @@ import { CheckIcon, LoaderIcon, XIcon } from "lucide-react"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@squadbase/vantage/ui"
 import { isGroupedOptions, type SelectOption } from "@squadbase/vantage/components"
 
-/* ---------- inlined from src/components/option-command.tsx (internal to @squadbase/vantage) ---------- */
+/* ---------- inlined from @squadbase/squadkit registry/components/option-command.tsx (internal to @squadbase/vantage) ---------- */
 
 interface OptionCommandListProps {
   options: SelectOptions
@@ -134,10 +136,13 @@ export interface SearchableSelectProps {
   className?: string
 }
 
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_OPTIONS: never[] = []
+
 export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps>(
   function SearchableSelect(
     {
-      options,
+      options = NO_OPTIONS,
       value,
       onChange,
       onSearch,

package/registry/ui/section-header.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui section-header`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/section-header.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/section-header.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * SectionHeader — a titled divider inside a page: heading, optional
  * description, and right-aligned actions that wrap below on narrow screens.
@@ -10,7 +12,7 @@ import { cn } from "@squadbase/vantage/ui"
 
 const headingStyles = {
   h1: "text-3xl font-bold tracking-tight",
-  h2: "text-2xl font-semibold tracking-tight",
+  h2: "text-xl font-semibold tracking-tight",
   h3: "text-xl font-semibold",
   h4: "text-lg font-semibold",
 } as const

package/registry/ui/segmented-control.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui segmented-control`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/segmented-control.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/segmented-control.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * SegmentedControl — a single-select row of buttons over `ToggleGroup`. Base
  * UI's toggle group is multi-value by default, so this wrapper narrows it to
@@ -27,9 +29,12 @@ export interface SegmentedControlProps {
   className?: string
 }
 
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_OPTIONS: never[] = []
+
 export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   function SegmentedControl(
-    { options, value, onChange, size = "default", fullWidth = false, ariaLabel, className },
+    { options = NO_OPTIONS, value, onChange, size = "default", fullWidth = false, ariaLabel, className },
     ref,
   ) {
     return (

package/registry/ui/select.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui select`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/select.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/select.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
 
@@ -128,7 +130,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
+            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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/separator.tsx

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

package/registry/ui/sheet.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui sheet`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/sheet.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/sheet.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
@@ -53,7 +55,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:data-ending-style:translate-none! motion-reduce:data-starting-style:translate-none! data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className
         )}
         {...props}

package/registry/ui/sidebar.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui sidebar`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/sidebar.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/sidebar.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
@@ -289,7 +291,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-[background-color,translate,left,right] ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",

package/registry/ui/skeleton.tsx

@@ -1,12 +1,14 @@
 // Copied by `vantage add ui skeleton`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/skeleton.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/skeleton.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import { cn } from "@squadbase/vantage/ui"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-muted", className)}
       {...props}
     />
   )

package/registry/ui/slider.tsx

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

package/registry/ui/sparkline.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui sparkline`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/sparkline.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/charts/sparkline.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * Sparkline — an inline trend micro-chart. Deliberately *not* an `EChart`: a
  * sparkline sits inside table cells and KPI tiles by the dozen, where one
@@ -9,6 +11,7 @@
 import { forwardRef, useEffect, useState, type SVGAttributes } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
+import type { ChartHighlight } from "@squadbase/vantage/components"
 
 export type SparklineVariant = "line" | "bar"
 
@@ -24,7 +27,15 @@ export interface SparklineProps extends SVGAttributes<SVGSVGElement> {
   /** Tailwind text-colour class; drives both stroke and fill via `currentColor`. */
   color?: string
   area?: boolean
+  /** マウント時に線を引く / 棒を伸ばす。既定 `false`(`prefers-reduced-motion` では常に無効)。 */
   animate?: boolean
+  /**
+   * 点の強調(Tufte 流)。`"auto"` は最新・最大・最小の 3 点だけに小さな点を打つ
+   * (最新は系列の色、最大・最小は muted)。`"latest"` は最新の 1 点だけ、`"none"` は線だけ。`variant="line"` のときだけ効く。既定 `"auto"`。
+   */
+  highlight?: ChartHighlight | "latest"
+  /** 指定すると `role="img"` で読み上げ対象にする。省略時は装飾として `aria-hidden`。 */
+  "aria-label"?: string
   className?: string
 }
 
@@ -55,6 +66,37 @@ function buildAreaPath(ys: number[], height: number): string {
   return `${buildLinePath(ys)} L${lastX},${height} L0,${height} Z`
 }
 
+export type SparklinePointKind = "latest" | "max" | "min"
+
+export interface SparklinePoint {
+  kind: SparklinePointKind
+  index: number
+}
+
+/**
+ * The points a Tufte-style sparkline marks: the latest, the max and the min.
+ * A point that is both latest and max/min is drawn once, as `latest`; a flat
+ * series marks only the latest. Ties pick the most recent occurrence.
+ */
+export function sparklineHighlightPoints(values: number[]): SparklinePoint[] {
+  if (values.length === 0) return []
+  const last = values.length - 1
+  const points: SparklinePoint[] = [{ kind: "latest", index: last }]
+  let maxI = 0
+  let minI = 0
+  let max = values[0] as number
+  let min = max
+  values.forEach((v, i) => {
+    if (v >= max) [max, maxI] = [v, i]
+    if (v <= min) [min, minI] = [v, i]
+  })
+  const latest = values[last] as number
+  if (max === min) return points
+  if (max !== latest) points.push({ kind: "max", index: maxI })
+  if (min !== latest) points.push({ kind: "min", index: minI })
+  return points
+}
+
 interface BarRect {
   x: number
   y: number
@@ -67,14 +109,19 @@ function buildBarRects(ys: number[], height: number, gap = 1): BarRect[] {
   return ys.map((y, i) => ({ x: i * (barW + gap), y, w: barW, h: height - y }))
 }
 
+/** Rows not given yet (a draft fills props in steps): draw the empty state, keep the same array between renders. */
+const NO_ROWS: never[] = []
+
 export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Sparkline(
   {
-    data,
+    data = NO_ROWS,
     variant = "line",
     height = 40,
     color = "text-chart-1",
     area = false,
     animate = false,
+    highlight = "auto",
+    "aria-label": ariaLabel,
     className,
     ...props
   },
@@ -88,10 +135,17 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
 
   if (data.length === 0) return null
 
-  const ys = normalizeData(
-    data.map((d) => d.value),
-    height,
-  )
+  const values = data.map((d) => d.value)
+  const ys = normalizeData(values, height)
+  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0
+  const points =
+    variant !== "line"
+      ? []
+      : highlight === "auto"
+        ? sparklineHighlightPoints(values)
+        : highlight === "latest"
+          ? [{ kind: "latest" as const, index: values.length - 1 }]
+          : []
 
   return (
     <svg
@@ -101,7 +155,9 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
       preserveAspectRatio="none"
       width="100%"
       height={height}
-      aria-hidden="true"
+      role={ariaLabel ? "img" : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
       className={cn("overflow-visible", className)}
       {...props}
     >
@@ -124,9 +180,28 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
             pathLength={animate ? 1 : undefined}
             strokeDasharray={animate ? 1 : undefined}
             strokeDashoffset={animate ? (mounted ? 0 : 1) : undefined}
-            className={cn("stroke-current", color)}
+            className={cn("stroke-current", animate && "motion-reduce:transition-none!", color)}
             style={animate ? { transition: "stroke-dashoffset 0.6s ease-in-out" } : undefined}
           />
+          {/* A zero-length round-capped stroke with a non-scaling width stays a
+              circle even though the viewBox stretches (`preserveAspectRatio="none"`). */}
+          {points.map((p) => {
+            const x = (p.index * step).toFixed(2)
+            const y = (ys[p.index] ?? 0).toFixed(2)
+            return (
+              <path
+                key={p.kind}
+                data-slot="sparkline-point"
+                data-point={p.kind}
+                d={`M${x},${y} L${x},${y}`}
+                fill="none"
+                strokeWidth={p.kind === "latest" ? 5 : 4}
+                strokeLinecap="round"
+                vectorEffect="non-scaling-stroke"
+                className={cn("stroke-current", p.kind === "latest" ? color : "text-muted-foreground")}
+              />
+            )
+          })}
         </>
       )}
 
@@ -139,7 +214,7 @@ export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Spar
             width={rect.w}
             height={animate ? (mounted ? rect.h : 0) : rect.h}
             rx={0.5}
-            className={cn("fill-current", color)}
+            className={cn("fill-current", animate && "motion-reduce:transition-none!", color)}
             style={
               animate
                 ? {

package/registry/ui/spinner.tsx

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

package/registry/ui/states.tsx

@@ -1,9 +1,28 @@
 // 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 `npm 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 are Japanese and say what is happening, not why the
+ * system failed: keep raw errors ("upstream timeout after 30s") in `details`,
+ * which stays folded behind "詳細を表示".
+ *
+ * @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"
 
-export function Loading({ label = "Loading…", className }: { label?: string; className?: string }) {
+export function Loading({ label = "読み込んでいます…", className }: { label?: string; className?: string }) {
   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">
@@ -15,7 +34,7 @@ export function Loading({ label = "Loading…", className }: { label?: string; c
 }
 
 export function Empty({
-  title = "Nothing here yet",
+  title = "表示できるデータがありません",
   description,
   icon,
   action,
@@ -38,13 +57,17 @@ export function Empty({
 }
 
 export function ErrorState({
-  title = "Something went wrong",
-  message,
+  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 "詳細を表示". */
+  details?: ReactNode
   action?: ReactNode
   className?: string
 }) {
@@ -55,6 +78,12 @@ export function ErrorState({
     >
       <p className="font-semibold text-destructive">{title}</p>
       {message ? <p className="mt-1 text-sm text-muted-foreground">{message}</p> : null}
+      {details ? (
+        <details className="mt-2 text-xs text-muted-foreground">
+          <summary className="cursor-pointer select-none">詳細を表示</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,98 @@
 // 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 `npm 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, 日本語ラベル and tone), so the same
+ * state is worded the same everywhere (Tracker legends import it too):
+ *
+ * | status | ラベル | 色調 |
+ * |---|---|---|
+ * | `success` | 正常 | positive |
+ * | `partial` | 一部失敗 | warning |
+ * | `failed` | 失敗 | negative |
+ * | `delayed` | 遅延 | warning |
+ * | `running` | 実行中 | info |
+ * | `stopped` | 停止中 | neutral |
+ * | `active` / `inactive` | 有効 / 無効 | positive / neutral |
+ * | `warning` / `error` / `pending` | 警告 / エラー / 保留中 | warning / negative / info |
  */
 import { forwardRef } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Badge } from "@squadbase/vantage/ui"
 
-const defaultColorMap: Record<string, string> = {
-  active: "green",
-  inactive: "gray",
-  warning: "yellow",
-  error: "red",
-  pending: "blue",
+type StatusTone = "positive" | "negative" | "warning" | "info" | "neutral"
+
+/**
+ * 状態の語彙の正本: status → 日本語ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
+ * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。
+ */
+export const STATUS_VOCABULARY = {
+  success: { label: "正常", tone: "positive" },
+  partial: { label: "一部失敗", tone: "warning" },
+  failed: { label: "失敗", tone: "negative" },
+  delayed: { label: "遅延", tone: "warning" },
+  running: { label: "実行中", tone: "info" },
+  stopped: { label: "停止中", tone: "neutral" },
+  active: { label: "有効", tone: "positive" },
+  inactive: { label: "無効", tone: "neutral" },
+  warning: { label: "警告", tone: "warning" },
+  error: { label: "エラー", tone: "negative" },
+  pending: { label: "保留中", tone: "info" },
+} as const satisfies Record<string, { label: string; tone: StatusTone }>
+
+export type StatusKey = keyof typeof STATUS_VOCABULARY
+
+/** 状態の日本語ラベル。語彙に無い status は渡された文字列のまま返す。 */
+export function statusLabel(status: string): string {
+  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_VOCABULARY[status as StatusKey].label : status
 }
 
-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",
-  },
-  blue: {
-    dot: "bg-blue-500",
-    bg: "bg-blue-50 dark:bg-blue-950",
-    text: "text-blue-700 dark:text-blue-300",
-  },
+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",
+}
+
+/**
+ * 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 }> = {
+  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive" },
+  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative" },
+  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning" },
+  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info" },
+  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral" },
 }
 
-const fallbackStyle = colorStyles.gray!
+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
 }
@@ -59,9 +102,8 @@ export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(functio
   ref,
 ) {
   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)
 
   return (
     <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 `npm 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 `npm 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 `npm 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}
     />
   )