@miragon/mcp-toolkit-ui 2.6.0 → 2.7.0

package/src/primitives/dialog.tsx

@@ -4,7 +4,10 @@ import * as React from "react"
 import { XIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { useToolkitMessages } from "../locale/locale-provider.js"
 import { cn } from "../lib/utils.js"
+import { usePortalContainer } from "../theme/portal-container.js"
 import { Button } from "./button.js"
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -15,8 +18,19 @@ function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+function DialogPortal({
+  container,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  // Default to the nearest ThemeProvider scope (theme + mode), not <body>.
+  const portalContainer = usePortalContainer()
+  return (
+    <DialogPrimitive.Portal
+      data-slot="dialog-portal"
+      container={container ?? portalContainer ?? undefined}
+      {...props}
+    />
+  )
 }
 
 function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
@@ -31,7 +45,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 bg-scrim fixed inset-0 z-50 backdrop-blur-sm",
         className,
       )}
       {...props}
@@ -43,17 +57,21 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  closeLabel,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
+  /** Accessible name of the close button. Default: the locale's "Close". */
+  closeLabel?: string
 }) {
+  const messages = useToolkitMessages()
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-popover text-popover-foreground dark:border-input data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 shadow-3 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-md border p-6 outline-hidden duration-(--motion-base) sm:max-w-lg",
           className,
         )}
         {...props}
@@ -62,10 +80,13 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className={cn(
+              "text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-sm transition-colors disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              FOCUS_RING,
+            )}
           >
             <XIcon />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{closeLabel ?? messages.common.close}</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
@@ -86,11 +107,15 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 function DialogFooter({
   className,
   showCloseButton = false,
+  closeLabel,
   children,
   ...props
 }: React.ComponentProps<"div"> & {
   showCloseButton?: boolean
+  /** Label of the footer close button. Default: the locale's "Close". */
+  closeLabel?: string
 }) {
+  const messages = useToolkitMessages()
   return (
     <div
       data-slot="dialog-footer"
@@ -100,7 +125,7 @@ function DialogFooter({
       {children}
       {showCloseButton && (
         <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
+          <Button variant="outline">{closeLabel ?? messages.common.close}</Button>
         </DialogPrimitive.Close>
       )}
     </div>

package/src/primitives/input.tsx

@@ -8,9 +8,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        // Input border in --input (3:1 on its surface); focus turns border and a
+        // 1px ring --focus: a 2px opaque blue edge (CI §8).
+        "border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground bg-background h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-hidden transition-[color,box-shadow,border-color] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-focus focus-visible:ring-focus focus-visible:ring-1",
+        "aria-invalid:border-danger aria-invalid:ring-danger aria-invalid:ring-1",
         className,
       )}
       {...props}

package/src/primitives/scroll-area.tsx

@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-focus size-full rounded-[inherit] outline-hidden transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-inset"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

package/src/primitives/select.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "../lib/utils.js"
+import { usePortalContainer } from "../theme/portal-container.js"
 
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />
@@ -29,7 +30,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input focus-visible:border-focus focus-visible:ring-focus aria-invalid:border-danger aria-invalid:ring-danger data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground bg-background hover:border-focus flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap outline-hidden transition-[color,box-shadow,border-color] focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -49,12 +50,14 @@ function SelectContent({
   align = "center",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  // Portal into the nearest ThemeProvider scope (theme + mode), not <body>.
+  const portalContainer = usePortalContainer()
   return (
-    <SelectPrimitive.Portal>
+    <SelectPrimitive.Portal container={portalContainer ?? undefined}>
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground dark:border-input data-[side=bottom]:slide-in-from-top-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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 shadow-3 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,

package/src/primitives/sheet.tsx

@@ -4,7 +4,10 @@ import * as React from "react"
 import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
+import { FOCUS_RING } from "../lib/focus-ring.js"
+import { useToolkitMessages } from "../locale/locale-provider.js"
 import { cn } from "../lib/utils.js"
+import { usePortalContainer } from "../theme/portal-container.js"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -18,8 +21,16 @@ function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Clo
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+function SheetPortal({ container, ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  // Default to the nearest ThemeProvider scope (theme + mode), not <body>.
+  const portalContainer = usePortalContainer()
+  return (
+    <SheetPrimitive.Portal
+      data-slot="sheet-portal"
+      container={container ?? portalContainer ?? undefined}
+      {...props}
+    />
+  )
 }
 
 function SheetOverlay({
@@ -30,7 +41,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 bg-scrim fixed inset-0 z-50 backdrop-blur-sm",
         className,
       )}
       {...props}
@@ -43,18 +54,22 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  closeLabel,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
+  /** Accessible name of the close button. Default: the locale's "Close". */
+  closeLabel?: string
 }) {
+  const messages = useToolkitMessages()
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=closed]:animate-out data-[state=open]:animate-in fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-popover text-popover-foreground dark:border-input data-[state=closed]:animate-out data-[state=open]:animate-in shadow-3 fixed z-50 flex flex-col gap-4 transition data-[state=closed]:duration-(--motion-base) data-[state=open]:duration-(--motion-slow)",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
@@ -69,9 +84,14 @@ function SheetContent({
       >
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <SheetPrimitive.Close
+            className={cn(
+              "text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-sm transition-colors disabled:pointer-events-none",
+              FOCUS_RING,
+            )}
+          >
             <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{closeLabel ?? messages.common.close}</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Content>

package/src/primitives/skeleton.tsx

@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-md", className)}
+      className={cn("bg-border animate-pulse rounded-md", className)}
       {...props}
     />
   )

package/src/primitives/switch.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Switch as SwitchPrimitive } from "radix-ui"
 
+import { FOCUS_RING } from "../lib/focus-ring.js"
 import { cn } from "../lib/utils.js"
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
@@ -8,14 +9,15 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        "peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        FOCUS_RING,
         className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        className="bg-primary-foreground shadow-1 pointer-events-none block h-4 w-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       />
     </SwitchPrimitive.Root>
   )

package/src/primitives/tabs.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Tabs as TabsPrimitive } from "radix-ui"
 
+import { FOCUS_RING, FOCUS_RING_INSET } from "../lib/focus-ring.js"
 import { cn } from "../lib/utils.js"
 
 function Tabs({
@@ -21,7 +22,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-md p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -55,10 +56,11 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=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-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "text-muted-foreground hover:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:shadow-1 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-sm border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none disabled:opacity-50 group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        FOCUS_RING,
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground",
+        "after:bg-primary after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className,
       )}
       {...props}
@@ -67,10 +69,11 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 }
 
 function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  // Radix makes the panel a tab stop (tabIndex 0), so it needs a visible focus.
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("flex-1", FOCUS_RING_INSET, className)}
       {...props}
     />
   )

package/src/render-cases.tsx

@@ -1,8 +1,11 @@
 import type { ReactElement } from "react"
+import { Inbox } from "lucide-react"
 import {
   Button,
   CountPill,
   DrillButton,
+  EmptyState,
+  ErrorState,
   FilterBar,
   GridItem,
   GridLayout,
@@ -14,6 +17,7 @@ import {
   SectionHeading,
   ThemeProvider,
   themePresets,
+  ToastProvider,
   useLocale,
   WidgetHeader,
 } from "./index.js"
@@ -185,6 +189,46 @@ export const RENDER_CASES: RenderCase[] = [
     render: () => <ListFooter shown={8} total={42} hasMore onLoadMore={noop} noun="tasks" />,
   },
 
+  // ── Feedback and states ──
+  {
+    // The provider renders its children plus the (empty) live region.
+    name: "ToastProvider",
+    marker: "RC:ToastProvider",
+    render: () => (
+      <ToastProvider>
+        <div>RC:ToastProvider</div>
+      </ToastProvider>
+    ),
+  },
+  {
+    name: "EmptyState",
+    marker: "RC:EmptyState",
+    render: () => (
+      <EmptyState
+        icon={<Inbox />}
+        title="RC:EmptyState"
+        description="No orders in this period."
+        action={
+          <Button size="sm" onClick={noop}>
+            New order
+          </Button>
+        }
+      />
+    ),
+  },
+  {
+    name: "ErrorState",
+    marker: "RC:ErrorState",
+    render: () => (
+      <ErrorState
+        title="RC:ErrorState"
+        description="Check the connection and try again."
+        details="HTTP 503 Service Unavailable"
+        onRetry={noop}
+      />
+    ),
+  },
+
   // ── Host seam / providers ──
   {
     name: "HostBridgeProvider",
@@ -212,7 +256,7 @@ export const RENDER_CASES: RenderCase[] = [
     name: "ThemeProvider",
     marker: "RC:ThemeProvider",
     render: () => (
-      <ThemeProvider theme={themePresets.miragon} mode="dark">
+      <ThemeProvider theme={themePresets.emerald} mode="dark">
         <div>RC:ThemeProvider</div>
       </ThemeProvider>
     ),

package/src/render-scan.ts

@@ -0,0 +1,75 @@
+/**
+ * Read SSR markup (`renderToStaticMarkup`) the way a user — sighted or with a
+ * screen reader — meets it: its text nodes plus the attributes that carry
+ * text (accessible names, tooltips, placeholders). DATA/TEST support module
+ * like `render-cases.tsx`: the a11y and i18n render suites scan through it,
+ * so it stays pure and dependency-free. React's SSR output is well-formed
+ * (attributes always double-quoted), which is what keeps these regexes honest.
+ */
+
+/** Attributes whose value a user reads or hears. */
+export const TEXT_ATTRIBUTES = [
+  "aria-label",
+  "aria-description",
+  "aria-roledescription",
+  "aria-valuetext",
+  "title",
+  "placeholder",
+  "alt",
+] as const
+
+const NAMED_ENTITIES: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+}
+
+/** Decode the HTML entities React's SSR emits (named, decimal and hex). */
+export function decodeEntities(text: string): string {
+  return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, ref: string) => {
+    if (ref.startsWith("#x") || ref.startsWith("#X")) {
+      return String.fromCodePoint(Number.parseInt(ref.slice(2), 16))
+    }
+    if (ref.startsWith("#")) return String.fromCodePoint(Number.parseInt(ref.slice(1), 10))
+    return NAMED_ENTITIES[ref.toLowerCase()] ?? whole
+  })
+}
+
+/** One piece of user-facing text in the markup. */
+export interface MarkupText {
+  /** `"text"` for a text node, else the attribute name. */
+  source: string
+  value: string
+}
+
+/** Every non-blank text node and text-bearing attribute value, decoded. */
+export function userFacingTexts(html: string): MarkupText[] {
+  const out: MarkupText[] = []
+  const withoutRawText = html.replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, "")
+  for (const chunk of withoutRawText.split(/<[^>]*>/)) {
+    const value = decodeEntities(chunk).trim()
+    if (value) out.push({ source: "text", value })
+  }
+  for (const tag of withoutRawText.match(/<[a-z][^>]*>/gi) ?? []) {
+    for (const name of TEXT_ATTRIBUTES) {
+      const value = attribute(tag, name)
+      if (value?.trim()) out.push({ source: name, value: value.trim() })
+    }
+  }
+  return out
+}
+
+/** The opening tags of every element named `tag` (e.g. `"button"`). */
+export function openingTags(html: string, tag: string): string[] {
+  return html.match(new RegExp(`<${tag}(?=[\\s>/])[^>]*>`, "gi")) ?? []
+}
+
+/** The decoded value of `name` on one opening tag, `undefined` when absent. */
+export function attribute(openingTag: string, name: string): string | undefined {
+  const escaped = name.replace(/[-]/g, "\\-")
+  const match = new RegExp(`\\s${escaped}="([^"]*)"`, "i").exec(openingTag)
+  return match ? decodeEntities(match[1] ?? "") : undefined
+}

package/src/theme/cd-tokens.generated.css

@@ -0,0 +1,48 @@
+/* Aus Miragon/corporate-identity übernommen (miragon-brand 1.8.0, modeler-tool-design/assets/cd-tokens.generated.css). Nicht ändern, zum Aktualisieren neu aus der Skill kopieren. */
+/* AUTOMATISCH GENERIERT aus brand/tokens.json. Nicht von Hand ändern, sondern die Quelle bearbeiten und `npm run tokens:build` laufen lassen. */
+:root {
+  --cd-blau: #335DE5;
+  --cd-gruen: #00E676;
+  --cd-grau: #F9F7F7;
+  --cd-schwarz: #1D1D1D;
+  --cd-weiss: #FFFFFF;
+  --cd-blau-link: #2B50D4;
+  --cd-blau-hell: #6B8AFF;
+  --cd-success: #00E676;
+  --cd-success-soft: #DAFBEB;
+  --cd-success-hell: #00E676;
+  --cd-warning: #FFB000;
+  --cd-warning-soft: #FFF1D2;
+  --cd-warning-hell: #FFB000;
+  --cd-danger: #CD1839;
+  --cd-danger-soft: #FBEEF0;
+  --cd-danger-hell: #FB6D73;
+  --cd-info: #335DE5;
+  --cd-info-soft: #EEF1FD;
+  --cd-info-hell: #6B8AFF;
+  --cd-linie: #E6E2E2;
+  --cd-kontur: #8F8A8A;
+  --cd-text-leise: #6B6666;
+  --cd-gradient-brand: linear-gradient(120deg, #335DE5 30%, #00E676);
+  --cd-gradient-format: linear-gradient(135deg, #335DE5 0%, #00E676 140%);
+  --cd-space-1: 4px;
+  --cd-space-2: 8px;
+  --cd-space-3: 16px;
+  --cd-space-4: 24px;
+  --cd-space-5: 32px;
+  --cd-space-6: 48px;
+  --cd-space-7: 64px;
+  --cd-space-8: 96px;
+  --cd-radius-sm: 6px;
+  --cd-radius-md: 12px;
+  --cd-radius-lg: 16px;
+  --cd-radius-pill: 999px;
+  --cd-shadow-1: 0 1px 2px rgba(29, 29, 29, 0.06), 0 1px 3px rgba(29, 29, 29, 0.10);
+  --cd-shadow-2: 0 4px 12px rgba(29, 29, 29, 0.10);
+  --cd-shadow-3: 0 12px 32px rgba(29, 29, 29, 0.16);
+  --cd-motion-fast: 150ms;
+  --cd-motion-base: 250ms;
+  --cd-motion-slow: 400ms;
+  --cd-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --cd-ease-out: cubic-bezier(0, 0, 0.2, 1);
+}

package/src/theme/cd-tokens.test.ts

@@ -0,0 +1,107 @@
+/// <reference types="node" />
+import { createHash } from "node:crypto"
+import { existsSync, readdirSync, readFileSync } from "node:fs"
+import { homedir } from "node:os"
+import { join } from "node:path"
+import { describe, expect, it } from "vitest"
+import { CD_TOKENS, CD_TOKENS_VERSION } from "./cd-tokens.js"
+
+/**
+ * Drift guard for the vendored Miragon corporate-design tokens
+ * (modeler-tool-design §13): the copy must stay the skill's file, unchanged.
+ *
+ * `cd-tokens.generated.css` = ONE marker line + the upstream file byte for
+ * byte. Upstream is miragon-brand's `modeler-tool-design/assets/
+ * cd-tokens.generated.css`. When a checkout of the plugin is reachable
+ * (`MIRAGON_CD_TOKENS` or a Claude plugin cache under $HOME), the copy is
+ * compared to it directly; everywhere else (CI) the pinned hash below holds it.
+ *
+ * To re-vendor: copy the new upstream file below the marker line, update the
+ * version in the marker, CD_TOKENS_VERSION, UPSTREAM_SHA256 and CD_TOKENS.
+ */
+const UPSTREAM_SHA256 = "36d76f3a330a1250d332c6862be1dc4f7564d2461e7051d9a565ba723ef2c379"
+const UPSTREAM_REL = join("skills", "modeler-tool-design", "assets", "cd-tokens.generated.css")
+const MARKER =
+  `/* Aus Miragon/corporate-identity übernommen (miragon-brand ${CD_TOKENS_VERSION}, ` +
+  "modeler-tool-design/assets/cd-tokens.generated.css). Nicht ändern, zum Aktualisieren neu aus der Skill kopieren. */\n"
+
+const vendored = readFileSync(new URL("./cd-tokens.generated.css", import.meta.url), "utf8")
+const upstreamPart = vendored.slice(MARKER.length)
+
+/** A reachable upstream copy of this version, or null (CI). */
+function findUpstream(): string | null {
+  const explicit = process.env.MIRAGON_CD_TOKENS
+  if (explicit) return existsSync(explicit) ? explicit : null
+  const home = homedir()
+  let entries: string[]
+  try {
+    entries = readdirSync(home).filter((name) => name.startsWith(".claude"))
+  } catch {
+    return null
+  }
+  for (const dir of entries) {
+    const candidate = join(
+      home,
+      dir,
+      "plugins",
+      "cache",
+      "miragon-agent-skills",
+      "miragon-brand",
+      CD_TOKENS_VERSION,
+      UPSTREAM_REL,
+    )
+    if (existsSync(candidate)) return candidate
+  }
+  return null
+}
+
+/** `--cd-name: value;` declarations of the vendored `:root`. */
+function cssTokens(css: string): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const match of css.matchAll(/--cd-([a-z0-9-]+):\s*([^;]+);/g)) {
+    out[match[1] as string] = (match[2] as string).trim()
+  }
+  return out
+}
+
+describe("cd-tokens.generated.css (vendored, never edited)", () => {
+  it("starts with the generated-file marker naming the brand version", () => {
+    expect(vendored.startsWith(MARKER)).toBe(true)
+  })
+
+  it("is the upstream file byte for byte below the marker (pinned hash)", () => {
+    const hash = createHash("sha256").update(upstreamPart, "utf8").digest("hex")
+    expect(hash, "re-vendor from the skill instead of editing the copy").toBe(UPSTREAM_SHA256)
+  })
+
+  it("is byte-identical to the skill's file when a plugin checkout is reachable", () => {
+    const upstream = findUpstream()
+    // Off-machine (CI) the pinned hash above is the guard; say so loudly.
+    if (!upstream) {
+      console.warn(
+        `cd-tokens drift: no miragon-brand ${CD_TOKENS_VERSION} checkout found — relying on the pinned hash`,
+      )
+      return
+    }
+    expect(upstreamPart).toBe(readFileSync(upstream, "utf8"))
+  })
+})
+
+describe("CD_TOKENS (the TS mirror of :root)", () => {
+  const css = cssTokens(upstreamPart)
+
+  it("mirrors every --cd-* token value exactly", () => {
+    for (const [name, value] of Object.entries(css)) {
+      expect(CD_TOKENS[name as keyof typeof CD_TOKENS], `--cd-${name}`).toBe(value)
+    }
+  })
+
+  it("declares no token the CSS does not", () => {
+    expect(Object.keys(CD_TOKENS).sort()).toEqual(Object.keys(css).sort())
+  })
+
+  it("parses a non-trivial token set (the parser itself is alive)", () => {
+    expect(Object.keys(css).length).toBeGreaterThanOrEqual(40)
+    expect(css.blau).toBe("#335DE5")
+  })
+})