@miragon/mcp-toolkit-ui 2.5.0 → 2.7.0

package/src/components/FilterBar.tsx

@@ -1,3 +1,5 @@
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { useToolkitMessages } from "../locale/locale-provider.js"
 import { Input } from "../primitives/input.js"
 
 export interface FilterChip {
@@ -14,7 +16,7 @@ export interface FilterChip {
 export interface FilterBarProps {
   /** Current search text (controlled). */
   search: string
-  /** Placeholder for the search input. Default `"Filter…"`. */
+  /** Placeholder for the search input. Default: the locale's "Filter…". */
   searchPlaceholder?: string
   /** Called with the new search text on every keystroke. */
   onSearchChange: (next: string) => void
@@ -30,18 +32,19 @@ export interface FilterBarProps {
  */
 export function FilterBar({
   search,
-  searchPlaceholder = "Filter…",
+  searchPlaceholder,
   onSearchChange,
   chips,
   onChipToggle,
 }: FilterBarProps) {
+  const messages = useToolkitMessages()
   return (
     <div className="flex flex-wrap items-center gap-2">
       <Input
         type="search"
         value={search}
         onChange={(e) => onSearchChange(e.target.value)}
-        placeholder={searchPlaceholder}
+        placeholder={searchPlaceholder ?? messages.filterBar.searchPlaceholder}
         className="h-9 min-w-[220px] flex-1 text-sm"
       />
       <div className="flex flex-wrap gap-1.5">
@@ -50,15 +53,15 @@ export function FilterBar({
             type="button"
             key={chip.id}
             onClick={() => onChipToggle(chip.id)}
-            className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ${
+            className={`inline-flex items-center gap-1.5 rounded-sm border px-2.5 py-1 text-xs font-medium transition-colors ${FOCUS_RING} ${
               chip.active
-                ? "bg-accent border-border text-accent-foreground font-semibold"
+                ? "bg-accent border-focus text-accent-foreground font-semibold"
                 : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"
             }`}
           >
             {chip.label}
             {chip.count !== undefined && chip.count !== "" && (
-              <span className="tabular-nums opacity-60">{chip.count}</span>
+              <span className="font-normal tabular-nums">{chip.count}</span>
             )}
           </button>
         ))}

package/src/components/GroupCard.tsx

@@ -1,4 +1,5 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from "react"
+import { FOCUS_RING_INSET } from "../lib/focus-ring.js"
 
 export interface GroupCardProps {
   /** Whether the body is expanded. */
@@ -33,14 +34,14 @@ export function GroupCard({ expanded, onToggle, summary, children }: GroupCardPr
   }
 
   return (
-    <div className="border-border mb-2 overflow-hidden rounded-lg border">
+    <div className="border-border mb-2 overflow-hidden rounded-md border">
       <div
         role="button"
         tabIndex={0}
         aria-expanded={expanded}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
-        className={`bg-card hover:bg-muted focus-visible:ring-ring/50 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 ${
+        className={`bg-card hover:bg-muted cursor-pointer transition-colors ${FOCUS_RING_INSET} ${
           expanded ? "border-border border-b" : ""
         }`}
       >

package/src/components/KpiGrid.tsx

@@ -1,11 +1,15 @@
 import type { ReactNode } from "react"
-import { TONE_TEXT, type ToneVariant } from "../lib/tone-utils.js"
+import { FOCUS_RING_INSET } from "../lib/focus-ring.js"
+import { TONE_DOT, type ToneVariant } from "../lib/tone-utils.js"
 
-/** Trend direction → tone for the small trend line under a value. */
-const TREND_TONE: Record<"up" | "down" | "flat", string> = {
-  up: "text-danger",
-  down: "text-success",
-  flat: "text-muted-foreground",
+/**
+ * Trend direction → tone. The tone shows ONLY as a dot before the trend line;
+ * the figures stay in the foreground (no coloured digits, CI §3.3).
+ */
+const TREND_TONE: Record<"up" | "down" | "flat", ToneVariant> = {
+  up: "danger",
+  down: "success",
+  flat: "neutral",
 }
 
 export interface KpiCell {
@@ -17,9 +21,15 @@ export interface KpiCell {
   fraction?: ReactNode
   /** Optional trend line under the value (e.g. `"+12% vs last week"`). */
   trend?: ReactNode
-  /** Colours the trend line. `up` reads as bad (danger), `down` as good (success). */
+  /**
+   * Tones the trend line's dot. `up` reads as bad (danger), `down` as good
+   * (success); the trend text itself stays in the foreground.
+   */
   trendDirection?: "up" | "down" | "flat"
-  /** Tone applied to the value text (e.g. `"danger"` for a breached metric). */
+  /**
+   * Status of the metric (e.g. `"danger"` for a breached one), shown as a dot
+   * before the label. The figure itself stays in the foreground colour.
+   */
   tone?: ToneVariant
   /** When set, the cell renders as a button — turns a metric into a nav entry point. */
   onClick?: () => void
@@ -52,12 +62,65 @@ export interface KpiGridProps {
   header?: KpiGridHeader
 }
 
+/** A small status dot; decorative — the label next to it carries the meaning. */
+function ToneDot({ tone, size }: { tone: ToneVariant; size: "size-1.5" | "size-2" }) {
+  return <span aria-hidden="true" className={`${size} shrink-0 rounded-full ${TONE_DOT[tone]}`} />
+}
+
+/**
+ * The trend line under a value: a tone dot plus the trend text in the
+ * foreground — never in a tone colour. Without a tone it stays quiet text.
+ */
+function KpiTrend({
+  trend,
+  direction,
+}: {
+  trend: ReactNode
+  direction?: KpiCell["trendDirection"]
+}) {
+  const tone = direction ? TREND_TONE[direction] : "neutral"
+  const textClass = tone === "neutral" ? "text-muted-foreground" : "text-foreground"
+  return (
+    <div className={`mt-1.5 inline-flex items-center gap-1.5 text-xs ${textClass}`}>
+      {tone !== "neutral" && <ToneDot tone={tone} size="size-1.5" />}
+      {trend}
+    </div>
+  )
+}
+
+/** One cell's label row, figure and optional trend — status as dots, never as coloured digits. */
+function KpiCellContent({ cell }: { cell: KpiCell }) {
+  return (
+    <>
+      <div className="text-muted-foreground flex items-center justify-between gap-2 text-xs font-medium">
+        <span className="inline-flex min-w-0 items-center gap-1.5">
+          {cell.tone && cell.tone !== "neutral" && <ToneDot tone={cell.tone} size="size-2" />}
+          <span>{cell.label}</span>
+        </span>
+        {cell.onClick && (
+          <span aria-hidden="true" className="text-sm leading-none">
+            ›
+          </span>
+        )}
+      </div>
+      <div className="text-foreground mt-1.5 text-2xl leading-none font-bold tracking-tight tabular-nums">
+        {cell.value}
+        {cell.fraction && (
+          <span className="text-muted-foreground ml-0.5 text-sm font-normal">{cell.fraction}</span>
+        )}
+      </div>
+      {cell.trend && <KpiTrend trend={cell.trend} direction={cell.trendDirection} />}
+    </>
+  )
+}
+
 /**
  * Bordered strip of KPI cells — the canonical way to show a row of headline
  * metrics in a widget (replaces the single-metric KPICard). Cells flow as
  * columns (1–6) and can be made clickable to drill into a detail view. Use
  * `boxed` + `header` for a labelled metric block; unboxed (default) renders the
- * lighter `border-y` strip.
+ * lighter `border-y` strip. A cell's `tone` shows as a status dot next to its
+ * label; figures stay in the foreground colour.
  */
 export function KpiGrid({ cells, boxed = false, header }: KpiGridProps) {
   const cols = Math.min(Math.max(cells.length, 1), 6)
@@ -70,7 +133,7 @@ export function KpiGrid({ cells, boxed = false, header }: KpiGridProps) {
         <div className="border-border bg-muted text-muted-foreground flex items-center gap-2 border-b px-4 py-2 text-[11px] font-semibold tracking-wide uppercase">
           <span>{header.label}</span>
           {header.badge && (
-            <span className="border-border bg-card text-muted-foreground rounded border px-1.5 py-0 text-[10px] font-medium normal-case">
+            <span className="border-border bg-card text-muted-foreground rounded-sm border px-1.5 py-0 text-[10px] font-medium normal-case">
               {header.badge}
             </span>
           )}
@@ -79,46 +142,14 @@ export function KpiGrid({ cells, boxed = false, header }: KpiGridProps) {
       <div className={`grid ${colClass} ${stripClass}`}>
         {cells.map((cell, idx) => {
           const borderClass = idx < cells.length - 1 ? "border-border border-r" : ""
-          const content = (
-            <>
-              <div className="text-muted-foreground flex items-center justify-between gap-2 text-xs font-medium">
-                <span>{cell.label}</span>
-                {cell.onClick && (
-                  <span aria-hidden="true" className="text-sm leading-none">
-                    ›
-                  </span>
-                )}
-              </div>
-              <div
-                className={`mt-1.5 text-2xl leading-none font-bold tracking-tight tabular-nums ${
-                  (cell.tone && TONE_TEXT[cell.tone]) || "text-foreground"
-                }`}
-              >
-                {cell.value}
-                {cell.fraction && (
-                  <span className="text-muted-foreground ml-0.5 text-sm font-normal">
-                    {cell.fraction}
-                  </span>
-                )}
-              </div>
-              {cell.trend && (
-                <div
-                  className={`mt-1.5 text-xs ${
-                    cell.trendDirection ? TREND_TONE[cell.trendDirection] : "text-muted-foreground"
-                  }`}
-                >
-                  {cell.trend}
-                </div>
-              )}
-            </>
-          )
+          const content = <KpiCellContent cell={cell} />
           return cell.onClick ? (
             <button
               key={idx}
               type="button"
               onClick={cell.onClick}
               aria-label={cell.ariaLabel}
-              className={`hover:bg-muted focus-visible:ring-ring cursor-pointer px-5 py-4 text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-inset ${borderClass}`}
+              className={`hover:bg-muted cursor-pointer px-5 py-4 text-left transition-colors ${FOCUS_RING_INSET} ${borderClass}`}
             >
               {content}
             </button>

package/src/components/ListFooter.tsx

@@ -1,3 +1,7 @@
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { useToolkitLocale, useToolkitMessages } from "../locale/locale-provider.js"
+import { formatCount } from "../locale/toolkit-messages.js"
+
 export interface ListFooterProps {
   /** How many rows are currently rendered. */
   shown: number
@@ -9,7 +13,7 @@ export interface ListFooterProps {
   loadingMore?: boolean
   /** Called when the user asks for the next page. */
   onLoadMore: () => void
-  /** Plural noun for the count, e.g. `"instances"`. Default `"rows"`. */
+  /** Plural noun for the count, e.g. `"instances"`. Default: the locale's word for rows. */
   noun?: string
 }
 
@@ -17,7 +21,8 @@ export interface ListFooterProps {
  * Footer for a paginated list: an honest "Showing X of Y" total plus an
  * explicit "Load more" control. Deliberately not infinite scroll — the user
  * gets the total, a reachable footer, and control over fetching. Renders
- * nothing when `total` is 0.
+ * nothing when `total` is 0. Text and number format follow the active locale
+ * (`LocaleProvider`, else the host's inside `McpAppView`).
  */
 export function ListFooter({
   shown,
@@ -25,22 +30,28 @@ export function ListFooter({
   hasMore,
   loadingMore = false,
   onLoadMore,
-  noun = "rows",
+  noun,
 }: ListFooterProps) {
+  const locale = useToolkitLocale()
+  const { listFooter } = useToolkitMessages()
   if (total <= 0) return null
   return (
     <div className="text-muted-foreground flex items-center justify-between gap-3 px-1 py-2 text-xs">
       <span>
-        Showing {shown.toLocaleString()} of {total.toLocaleString()} {noun}
+        {listFooter.showing({
+          shown: formatCount(shown, locale),
+          total: formatCount(total, locale),
+          noun: noun ?? listFooter.defaultNoun,
+        })}
       </span>
       {hasMore && (
         <button
           type="button"
           onClick={onLoadMore}
           disabled={loadingMore}
-          className="border-border text-foreground hover:bg-muted focus-visible:ring-ring inline-flex items-center gap-1 rounded-md border px-3 py-1.5 font-medium outline-none focus-visible:ring-2 disabled:opacity-50"
+          className={`border-border text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground inline-flex items-center gap-1 rounded-md border px-3 py-1.5 font-medium transition-colors disabled:opacity-50 ${FOCUS_RING}`}
         >
-          {loadingMore ? "Loading…" : "Load more"}
+          {loadingMore ? listFooter.loadingMore : listFooter.loadMore}
         </button>
       )}
     </div>

package/src/components/Pills.tsx

@@ -1,43 +1,52 @@
 import type { ReactNode } from "react"
-import { TONE_DOT, TONE_SOFT, type ToneVariant } from "../lib/tone-utils.js"
+import { useToolkitMessages } from "../locale/locale-provider.js"
+import { TONE_BORDER, TONE_DOT, TONE_SOFT, type ToneVariant } from "../lib/tone-utils.js"
 
 export interface LivePillProps {
-  /** Status tone driving the dot + tint. Default `"info"`. */
+  /** Status tone driving the dot, tint and border. Default `"info"`. */
   tone?: ToneVariant
-  /** Pill label. Defaults to `"Live"`. */
+  /** Pill label. Defaults to the locale's "Live". */
   children?: ReactNode
 }
 
 /**
  * Small tinted pill with a pulsing dot. Use in a widget header to signal that
- * the data is live/real-time. Tone-based, so it inherits the active theme.
+ * the data is live/real-time. Tone-based (tint, border and dot in the tone,
+ * text in the foreground), so it inherits the active theme. The pulse stops
+ * under `prefers-reduced-motion`.
  */
 export function LivePill({ tone = "info", children }: LivePillProps) {
+  const messages = useToolkitMessages()
   return (
     <span
-      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-semibold ${TONE_SOFT[tone]}`}
+      className={`inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 text-xs font-semibold ${TONE_SOFT[tone]} ${TONE_BORDER[tone]}`}
     >
-      <span className={`size-1.5 animate-pulse rounded-full ${TONE_DOT[tone]}`} />
-      {children ?? "Live"}
+      <span
+        aria-hidden="true"
+        className={`size-1.5 animate-pulse rounded-full ${TONE_DOT[tone]}`}
+      />
+      {children ?? messages.pills.live}
     </span>
   )
 }
 
 export interface CountPillProps {
-  /** Status tone driving the tint. Default `"neutral"`. */
+  /** Status tone driving the tint and border. Default `"neutral"`. */
   tone?: ToneVariant
   /** The count/value to display (tabular numbers). */
   children: ReactNode
 }
 
 /**
- * Compact count badge — tabular numbers on a tinted background. Use as the
- * right-aligned indicator on a list/group row (e.g. a per-group item count).
+ * Compact count badge — tabular numbers on a tinted background with a border
+ * in the tone. Use as the right-aligned indicator on a list/group row (e.g. a
+ * per-group item count). The number stays in the foreground in every tone
+ * (no coloured digits): the tint and the border carry the tone.
  */
 export function CountPill({ tone = "neutral", children }: CountPillProps) {
   return (
     <span
-      className={`inline-flex min-w-[2.5rem] items-center justify-center rounded-md px-2.5 py-0.5 text-sm font-semibold tabular-nums ${TONE_SOFT[tone]}`}
+      className={`inline-flex min-w-[2.5rem] items-center justify-center rounded-sm border px-2.5 py-0.5 text-sm font-semibold tabular-nums ${TONE_SOFT[tone]} ${TONE_BORDER[tone]}`}
     >
       {children}
     </span>

package/src/components/Toast.tsx

@@ -0,0 +1,188 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X, type LucideIcon } from "lucide-react"
+import { useToolkitMessages } from "../locale/locale-provider.js"
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { TONE_ICON } from "../lib/tone-utils.js"
+import { cn } from "../lib/utils.js"
+import {
+  createToast,
+  toastReducer,
+  type ToastItem,
+  type ToastOptions,
+  type ToastTone,
+} from "../lib/toast-model.js"
+
+export type { ToastOptions, ToastTone } from "../lib/toast-model.js"
+
+/** What {@link useToast} returns. */
+export interface ToastApi {
+  /** Show a toast; returns its id (for an early {@link ToastApi.dismiss}). */
+  show: (options: ToastOptions) => number
+  /** Remove a toast before its timer runs out. */
+  dismiss: (id: number) => void
+}
+
+const ToastContext = createContext<ToastApi | null>(null)
+
+/** Outside a provider `useToast()` degrades to a no-op instead of throwing. */
+const NOOP_TOASTS: ToastApi = { show: () => -1, dismiss: () => {} }
+
+/**
+ * Raise toasts from anywhere below a {@link ToastProvider}: `show({ tone,
+ * title })` after a write succeeded or failed, never a silent `console` line.
+ * Outside a provider it returns a no-op API, so a widget rendered in a bare
+ * fixture never crashes on feedback.
+ */
+export function useToast(): ToastApi {
+  return useContext(ToastContext) ?? NOOP_TOASTS
+}
+
+/**
+ * Status edge per tone — the status colour as border, never as text. Repeated
+ * under `dark:` so the card's dark 3:1 rim (`dark:border-input`, a later rule)
+ * does not paint over it.
+ */
+const TONE_EDGE: Record<ToastTone, string> = {
+  success: "border-l-success dark:border-l-success",
+  warning: "border-l-warning dark:border-l-warning",
+  danger: "border-l-danger dark:border-l-danger",
+  info: "border-l-info dark:border-l-info",
+}
+
+/**
+ * Lucide icon per tone, drawn in the tone colour (`TONE_ICON`, CI §3.3: status
+ * as edge and icon). The title next to it carries the message, so success and
+ * warning stay CI-exempt from 3:1 on light like every other status icon.
+ */
+const TOAST_ICON: Record<ToastTone, LucideIcon> = {
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert,
+  info: Info,
+}
+
+/**
+ * The stack of toasts — a presentational view over a list (the provider owns
+ * the state). The container is ONE persistent live region (`role="status"`,
+ * `aria-live="polite"`), so a newly added toast is announced without stealing
+ * focus. Bottom centre, above dialogs (z 60), per CI §5/§8.
+ */
+export function ToastViewport({
+  toasts,
+  onDismiss,
+}: {
+  toasts: readonly ToastItem[]
+  onDismiss: (id: number) => void
+}) {
+  const messages = useToolkitMessages()
+  return (
+    <div
+      data-slot="toast-viewport"
+      role="status"
+      aria-live="polite"
+      aria-label={messages.common.notifications}
+      className="pointer-events-none fixed inset-x-0 bottom-4 z-60 flex flex-col items-center gap-2 px-4"
+    >
+      {toasts.map((toast) => (
+        <ToastCard
+          key={toast.id}
+          toast={toast}
+          dismissLabel={messages.common.dismiss}
+          onDismiss={onDismiss}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ToastCard({
+  toast,
+  dismissLabel,
+  onDismiss,
+}: {
+  toast: ToastItem
+  dismissLabel: string
+  onDismiss: (id: number) => void
+}) {
+  // Hover or keyboard focus holds the toast: the timer restarts on leave.
+  const [held, setHeld] = useState(false)
+  useEffect(() => {
+    if (held) return
+    const timer = setTimeout(() => onDismiss(toast.id), toast.duration)
+    return () => clearTimeout(timer)
+  }, [held, onDismiss, toast.id, toast.duration])
+  const Icon = TOAST_ICON[toast.tone]
+  return (
+    <div
+      data-slot="toast"
+      data-tone={toast.tone}
+      onMouseEnter={() => setHeld(true)}
+      onMouseLeave={() => setHeld(false)}
+      onFocus={() => setHeld(true)}
+      onBlur={() => setHeld(false)}
+      className={cn(
+        // An overlay like Dialog/Sheet: shadow-2 on light, the 3:1 input rim on
+        // dark (shadows vanish on the ground).
+        "bg-popover text-popover-foreground dark:border-input shadow-2 pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-md border border-l-4 px-4 py-3 text-sm",
+        "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-2 motion-safe:duration-(--motion-base) motion-safe:ease-(--ease)",
+        TONE_EDGE[toast.tone],
+      )}
+    >
+      <Icon aria-hidden="true" className={cn("mt-0.5 size-4 shrink-0", TONE_ICON[toast.tone])} />
+      <div className="min-w-0 flex-1">
+        <p className="font-medium break-words">{toast.title}</p>
+        {toast.description && (
+          <p className="text-muted-foreground mt-0.5 break-words">{toast.description}</p>
+        )}
+      </div>
+      <button
+        type="button"
+        aria-label={dismissLabel}
+        onClick={() => onDismiss(toast.id)}
+        className={`text-muted-foreground hover:text-foreground -mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-sm ${FOCUS_RING}`}
+      >
+        <X aria-hidden="true" className="size-4" />
+      </button>
+    </div>
+  )
+}
+
+function ToastRoot({ children }: { children: ReactNode }) {
+  const [toasts, dispatch] = useReducer(toastReducer, [])
+  const nextId = useRef(0)
+  const dismiss = useCallback((id: number) => dispatch({ type: "dismiss", id }), [])
+  const show = useCallback((options: ToastOptions) => {
+    nextId.current += 1
+    const id = nextId.current
+    dispatch({ type: "add", toast: createToast(id, options) })
+    return id
+  }, [])
+  const api = useMemo<ToastApi>(() => ({ show, dismiss }), [show, dismiss])
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <ToastViewport toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  )
+}
+
+/**
+ * Provide toasts to a subtree and render their stack. Idempotent: nested
+ * inside another `ToastProvider` it adds nothing, so the app shell and an
+ * embedded builder share one stack and one live region. `McpAppView` mounts
+ * one for you.
+ */
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const parent = useContext(ToastContext)
+  return parent ? children : <ToastRoot>{children}</ToastRoot>
+}

package/src/components/WidgetHeader.tsx

@@ -31,7 +31,7 @@ export function WidgetHeader({
       <div className="min-w-0">
         {icon && (
           <div
-            className={`mb-3.5 grid size-11 place-items-center rounded-xl text-xl ${TONE_SOFT[iconTone]}`}
+            className={`mb-3.5 grid size-11 place-items-center rounded-md text-xl ${TONE_SOFT[iconTone]}`}
           >
             {icon}
           </div>