@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

package/dist/theme/presets.js

@@ -1,22 +1,34 @@
 import { createTheme } from "./create-theme.js";
 /**
  * Ready-made white-label themes — a demonstration of {@link createTheme} and a
- * starting point a client can fork. Each preset sets a distinct brand `primary`,
- * a matching `ring`/`accent`, and a `radius`, plus a `dark` override that
- * brightens the brand colour for legibility on dark surfaces (mirroring how
- * `globals.css` brightens tokens under `.dark`).
+ * starting point a client can fork. Each preset sets its whole interactive
+ * family from one brand hue, in light AND dark: `primary` with its
+ * `primaryForeground` and `primaryHover`, `link`, `focus` (plus the legacy
+ * `ring`), a matching `accent`, and a `radius`. The dark side brightens the
+ * brand colour for legibility on dark surfaces. Every preset meets the same
+ * contrast bar as the default theme in both modes (`theme-css.test.ts`).
  *
- * Colours are authored in `oklch` to stay consistent with the toolkit's token
- * palette in `globals.css`. Apply one with `<ThemeProvider theme={themePresets.violet}>`.
+ * The toolkit's DEFAULT is the Miragon theme (theme.css, built on the vendored
+ * corporate-design tokens); it needs no preset. A full customer brand may set
+ * more roles than these presets do (the status `*Ink` colours); see
+ * docs/guides/white-labeling.md. Apply one with
+ * `<ThemeProvider theme={themePresets.emerald}>`.
  */
 export const themePresets = {
     /**
-     * The toolkit's own brand: a confident indigo-blue with a slightly tighter
-     * radius. A sensible default when a client has no brand of their own yet.
+     * An approximation of the Miragon blue from before the toolkit shipped the
+     * Miragon corporate design.
+     *
+     * @deprecated The Miragon theme is now the toolkit's default: render without
+     * a theme (or `<ThemeProvider>` without `theme`) to get the exact CI values.
+     * This preset is off-palette and will be removed in the next major.
      */
     miragon: createTheme({
         primary: "oklch(0.52 0.21 264)",
         primaryForeground: "oklch(0.985 0 0)",
+        primaryHover: "oklch(0.46 0.2 264)",
+        link: "oklch(0.52 0.21 264)",
+        focus: "oklch(0.52 0.21 264)",
         accent: "oklch(0.95 0.03 264)",
         accentForeground: "oklch(0.32 0.12 264)",
         ring: "oklch(0.52 0.21 264)",
@@ -25,15 +37,27 @@ export const themePresets = {
         dark: {
             primary: "oklch(0.7 0.16 264)",
             primaryForeground: "oklch(0.18 0.02 264)",
+            primaryHover: "oklch(0.76 0.13 264)",
+            link: "oklch(0.7 0.16 264)",
+            focus: "oklch(0.7 0.16 264)",
             accent: "oklch(0.32 0.06 264)",
             accentForeground: "oklch(0.97 0 0)",
             ring: "oklch(0.7 0.16 264)",
         },
     }),
-    /** A vivid violet brand with rounder corners — playful, consumer-facing. */
+    /**
+     * A vivid violet brand with rounder corners — playful, consumer-facing.
+     *
+     * @deprecated The violet tech default is the look the Miragon design system
+     * rules out (anti-slop U9). Fork {@link createTheme} with your own brand
+     * values instead. Will be removed in the next major.
+     */
     violet: createTheme({
         primary: "oklch(0.55 0.24 295)",
         primaryForeground: "oklch(0.985 0 0)",
+        primaryHover: "oklch(0.49 0.23 295)",
+        link: "oklch(0.55 0.24 295)",
+        focus: "oklch(0.55 0.24 295)",
         accent: "oklch(0.95 0.04 295)",
         accentForeground: "oklch(0.34 0.14 295)",
         ring: "oklch(0.55 0.24 295)",
@@ -42,6 +66,9 @@ export const themePresets = {
         dark: {
             primary: "oklch(0.72 0.18 295)",
             primaryForeground: "oklch(0.18 0.03 295)",
+            primaryHover: "oklch(0.78 0.15 295)",
+            link: "oklch(0.72 0.18 295)",
+            focus: "oklch(0.72 0.18 295)",
             accent: "oklch(0.33 0.08 295)",
             accentForeground: "oklch(0.97 0 0)",
             ring: "oklch(0.72 0.18 295)",
@@ -49,16 +76,22 @@ export const themePresets = {
     }),
     /** A grounded emerald brand with a crisp, near-square radius — enterprise. */
     emerald: createTheme({
-        primary: "oklch(0.58 0.15 162)",
+        primary: "oklch(0.5 0.12 162)",
         primaryForeground: "oklch(0.985 0 0)",
+        primaryHover: "oklch(0.44 0.11 162)",
+        link: "oklch(0.5 0.12 162)",
+        focus: "oklch(0.5 0.12 162)",
         accent: "oklch(0.95 0.04 162)",
         accentForeground: "oklch(0.34 0.1 162)",
-        ring: "oklch(0.58 0.15 162)",
+        ring: "oklch(0.5 0.12 162)",
         radius: "0.375rem",
     }, {
         dark: {
             primary: "oklch(0.72 0.15 162)",
             primaryForeground: "oklch(0.17 0.03 162)",
+            primaryHover: "oklch(0.78 0.14 162)",
+            link: "oklch(0.72 0.15 162)",
+            focus: "oklch(0.72 0.15 162)",
             accent: "oklch(0.32 0.07 162)",
             accentForeground: "oklch(0.97 0 0)",
             ring: "oklch(0.72 0.15 162)",

package/dist/theme/presets.js.map

@@ -1 +1 @@
-{"version":3,"file":"presets.js","sourceRoot":"","sources":["../../src/theme/presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAwB,MAAM,mBAAmB,CAAA;AAErE;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAClB;QACE,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,kBAAkB;QACrC,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,sBAAsB;QACxC,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,QAAQ;KACjB,EACD;QACE,IAAI,EAAE;YACJ,OAAO,EAAE,qBAAqB;YAC9B,iBAAiB,EAAE,sBAAsB;YACzC,MAAM,EAAE,sBAAsB;YAC9B,gBAAgB,EAAE,iBAAiB;YACnC,IAAI,EAAE,qBAAqB;SAC5B;KACF,CACF;IAED,4EAA4E;IAC5E,MAAM,EAAE,WAAW,CACjB;QACE,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,kBAAkB;QACrC,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,sBAAsB;QACxC,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,UAAU;KACnB,EACD;QACE,IAAI,EAAE;YACJ,OAAO,EAAE,sBAAsB;YAC/B,iBAAiB,EAAE,sBAAsB;YACzC,MAAM,EAAE,sBAAsB;YAC9B,gBAAgB,EAAE,iBAAiB;YACnC,IAAI,EAAE,sBAAsB;SAC7B;KACF,CACF;IAED,8EAA8E;IAC9E,OAAO,EAAE,WAAW,CAClB;QACE,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,kBAAkB;QACrC,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,qBAAqB;QACvC,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,UAAU;KACnB,EACD;QACE,IAAI,EAAE;YACJ,OAAO,EAAE,sBAAsB;YAC/B,iBAAiB,EAAE,sBAAsB;YACzC,MAAM,EAAE,sBAAsB;YAC9B,gBAAgB,EAAE,iBAAiB;YACnC,IAAI,EAAE,sBAAsB;SAC7B;KACF,CACF;CACwC,CAAA"}
+{"version":3,"file":"presets.js","sourceRoot":"","sources":["../../src/theme/presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAwB,MAAM,mBAAmB,CAAA;AAErE;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B;;;;;;;OAOG;IACH,OAAO,EAAE,WAAW,CAClB;QACE,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,kBAAkB;QACrC,YAAY,EAAE,qBAAqB;QACnC,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,sBAAsB;QAC7B,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,sBAAsB;QACxC,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,QAAQ;KACjB,EACD;QACE,IAAI,EAAE;YACJ,OAAO,EAAE,qBAAqB;YAC9B,iBAAiB,EAAE,sBAAsB;YACzC,YAAY,EAAE,sBAAsB;YACpC,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,sBAAsB;YAC9B,gBAAgB,EAAE,iBAAiB;YACnC,IAAI,EAAE,qBAAqB;SAC5B;KACF,CACF;IAED;;;;;;OAMG;IACH,MAAM,EAAE,WAAW,CACjB;QACE,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,kBAAkB;QACrC,YAAY,EAAE,sBAAsB;QACpC,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,sBAAsB;QAC7B,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,sBAAsB;QACxC,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,UAAU;KACnB,EACD;QACE,IAAI,EAAE;YACJ,OAAO,EAAE,sBAAsB;YAC/B,iBAAiB,EAAE,sBAAsB;YACzC,YAAY,EAAE,sBAAsB;YACpC,IAAI,EAAE,sBAAsB;YAC5B,KAAK,EAAE,sBAAsB;YAC7B,MAAM,EAAE,sBAAsB;YAC9B,gBAAgB,EAAE,iBAAiB;YACnC,IAAI,EAAE,sBAAsB;SAC7B;KACF,CACF;IAED,8EAA8E;IAC9E,OAAO,EAAE,WAAW,CAClB;QACE,OAAO,EAAE,qBAAqB;QAC9B,iBAAiB,EAAE,kBAAkB;QACrC,YAAY,EAAE,sBAAsB;QACpC,IAAI,EAAE,qBAAqB;QAC3B,KAAK,EAAE,qBAAqB;QAC5B,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,qBAAqB;QACvC,IAAI,EAAE,qBAAqB;QAC3B,MAAM,EAAE,UAAU;KACnB,EACD;QACE,IAAI,EAAE;YACJ,OAAO,EAAE,sBAAsB;YAC/B,iBAAiB,EAAE,sBAAsB;YACzC,YAAY,EAAE,sBAAsB;YACpC,IAAI,EAAE,sBAAsB;YAC5B,KAAK,EAAE,sBAAsB;YAC7B,MAAM,EAAE,sBAAsB;YAC9B,gBAAgB,EAAE,iBAAiB;YACnC,IAAI,EAAE,sBAAsB;SAC7B;KACF,CACF;CACwC,CAAA"}

package/dist/theme/theme-provider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { ThemeDefinition } from "./create-theme.js";
+import { type ThemeDefinition } from "./create-theme.js";
 /**
  * How the `.dark` class is resolved on the theme scope:
  * - `"light"` / `"dark"` — forced, ignores the OS preference.
@@ -27,8 +27,11 @@ export declare function useTheme(): ThemeContextValue;
 /** Props for {@link ThemeProvider}. */
 export interface ThemeProviderProps {
     /**
-     * The white-label theme to apply (from {@link createTheme} or `themePresets`).
-     * Omit to manage only the light/dark `mode` against the toolkit defaults.
+     * The white-label theme to apply (from {@link createTheme}). Omit to keep the
+     * theme of the nearest enclosing `ThemeProvider` (re-applied in this
+     * provider's mode, so a light island inside a dark branded scope stays on
+     * the brand), or, at the top, to manage only the light/dark `mode` against
+     * the toolkit defaults (the Miragon theme).
      */
     theme?: ThemeDefinition;
     /**
@@ -49,19 +52,34 @@ export interface ThemeProviderProps {
 /**
  * Apply a white-label {@link ThemeDefinition} to a subtree. Renders a wrapper
  * element carrying the theme's CSS variables as inline `style`, so they override
- * the `:root` defaults for every descendant — `Card`, `Button`, `bg-card`,
- * `text-primary`, and `rounded-lg` all re-skin without touching the widgets.
+ * the toolkit's defaults (the Miragon theme) for every descendant — `Card`,
+ * `Button`, `bg-card`, `text-link`, and `rounded-md` all re-skin without
+ * touching the widgets.
  *
- * Dark mode is handled at the scope: the `.dark` class is toggled on the wrapper
- * (not `<html>`) per the resolved {@link ThemeMode}, and the theme's `darkVars`
- * are layered on under it. This keeps theming local — two differently themed
+ * Dark mode is handled at the scope: the `.dark` class and `data-theme-mode`
+ * are set on the wrapper (not `<html>`) per the resolved {@link ThemeMode}. In
+ * dark mode the wrapper gets the toolkit's dark roles plus the theme's dark
+ * tokens and its mode-invariant light tokens ({@link resolveThemeVars}) — a
+ * light surface colour never leaks into a dark scope (mcp-toolkit#178 N35). A
+ * light scope inside a dark scope stays light: there, `data-theme-mode="light"`
+ * re-declares the toolkit's light roles. A light scope in a light document
+ * re-declares nothing and keeps what the document set (a consumer's `:root`
+ * brand). A nested provider without `theme` re-applies the enclosing one's
+ * theme in its own mode. This keeps theming local — two differently themed
  * subtrees (e.g. a brand preview gallery) coexist on one page.
  *
+ * Overlays opened inside the scope (Dialog, Sheet, Select) portal into a node
+ * within it, so they wear the same theme and mode (#178 N36,
+ * {@link usePortalContainer}). That node is the wrapper's FIRST child, an empty
+ * `display: contents` element: it draws no box, and `space-*`, `divide-*`,
+ * `gap` and `last:` on the wrapper see only your children. Only selectors on
+ * the wrapper's first/nth child (`first:`, `odd:`) count it.
+ *
  * Uses only React + the DOM (no `mcp-use/react`), so it ships from the root
  * barrel and works in a host-free standalone app, a host, or SSR alike.
  *
  * @example
- * <ThemeProvider theme={themePresets.violet} mode={host.theme ?? "system"}>
+ * <ThemeProvider theme={brand} mode={host.theme ?? "system"}>
  *   <YourWidget />
  * </ThemeProvider>
  */

package/dist/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAExD;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEnD,6CAA6C;AAC7C,MAAM,WAAW,iBAAiB;IAChC,gFAAgF;IAChF,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC7B,iEAAiE;IACjE,IAAI,EAAE,SAAS,CAAA;IACf,+EAA+E;IAC/E,YAAY,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AA6BD,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;IACxC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAc,EACd,EAAE,EAAE,EAAU,EACd,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,GAAG,SAAS,CA8BhC"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG1E;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEnD,6CAA6C;AAC7C,MAAM,WAAW,iBAAiB;IAChC,gFAAgF;IAChF,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC7B,iEAAiE;IACjE,IAAI,EAAE,SAAS,CAAA;IACf,+EAA+E;IAC/E,YAAY,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AA6BD,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;IACxC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAc,EACd,EAAE,EAAE,EAAU,EACd,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,GAAG,SAAS,CA+ChC"}

package/dist/theme/theme-provider.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import { resolveThemeVars } from "./create-theme.js";
+import { PortalContainerContext } from "./portal-container.js";
 const ThemeContext = createContext(null);
 /**
  * Read the active theme/mode from the nearest {@link ThemeProvider}. Throws when
@@ -41,39 +43,59 @@ function useResolvedMode(mode) {
 /**
  * Apply a white-label {@link ThemeDefinition} to a subtree. Renders a wrapper
  * element carrying the theme's CSS variables as inline `style`, so they override
- * the `:root` defaults for every descendant — `Card`, `Button`, `bg-card`,
- * `text-primary`, and `rounded-lg` all re-skin without touching the widgets.
+ * the toolkit's defaults (the Miragon theme) for every descendant — `Card`,
+ * `Button`, `bg-card`, `text-link`, and `rounded-md` all re-skin without
+ * touching the widgets.
  *
- * Dark mode is handled at the scope: the `.dark` class is toggled on the wrapper
- * (not `<html>`) per the resolved {@link ThemeMode}, and the theme's `darkVars`
- * are layered on under it. This keeps theming local — two differently themed
+ * Dark mode is handled at the scope: the `.dark` class and `data-theme-mode`
+ * are set on the wrapper (not `<html>`) per the resolved {@link ThemeMode}. In
+ * dark mode the wrapper gets the toolkit's dark roles plus the theme's dark
+ * tokens and its mode-invariant light tokens ({@link resolveThemeVars}) — a
+ * light surface colour never leaks into a dark scope (mcp-toolkit#178 N35). A
+ * light scope inside a dark scope stays light: there, `data-theme-mode="light"`
+ * re-declares the toolkit's light roles. A light scope in a light document
+ * re-declares nothing and keeps what the document set (a consumer's `:root`
+ * brand). A nested provider without `theme` re-applies the enclosing one's
+ * theme in its own mode. This keeps theming local — two differently themed
  * subtrees (e.g. a brand preview gallery) coexist on one page.
  *
+ * Overlays opened inside the scope (Dialog, Sheet, Select) portal into a node
+ * within it, so they wear the same theme and mode (#178 N36,
+ * {@link usePortalContainer}). That node is the wrapper's FIRST child, an empty
+ * `display: contents` element: it draws no box, and `space-*`, `divide-*`,
+ * `gap` and `last:` on the wrapper see only your children. Only selectors on
+ * the wrapper's first/nth child (`first:`, `odd:`) count it.
+ *
  * Uses only React + the DOM (no `mcp-use/react`), so it ships from the root
  * barrel and works in a host-free standalone app, a host, or SSR alike.
  *
  * @example
- * <ThemeProvider theme={themePresets.violet} mode={host.theme ?? "system"}>
+ * <ThemeProvider theme={brand} mode={host.theme ?? "system"}>
  *   <YourWidget />
  * </ThemeProvider>
  */
 export function ThemeProvider({ theme, mode = "light", as: As = "div", className, children, }) {
     const resolvedMode = useResolvedMode(mode);
     const isDark = resolvedMode === "dark";
-    // Merge the light vars with the dark overrides only when dark is active, so a
-    // dark scope gets the brand's dark palette on top of `.dark`'s defaults.
-    const style = useMemo(() => {
-        if (!theme)
-            return {};
-        if (isDark && theme.darkVars) {
-            return { ...theme.vars, ...theme.darkVars };
-        }
-        return theme.vars;
-    }, [theme, isDark]);
-    const value = useMemo(() => ({ theme: theme ?? null, mode, resolvedMode }), [theme, mode, resolvedMode]);
-    const classes = [isDark ? "dark" : undefined, "bg-background text-foreground", className]
+    const [portalContainer, setPortalContainer] = useState(null);
+    // Without its own theme a nested provider keeps the enclosing one's brand.
+    const enclosing = useContext(ThemeContext);
+    const activeTheme = theme ?? enclosing?.theme ?? null;
+    const style = useMemo(() => resolveThemeVars(activeTheme, resolvedMode), [activeTheme, resolvedMode]);
+    const value = useMemo(() => ({ theme: activeTheme, mode, resolvedMode }), [activeTheme, mode, resolvedMode]);
+    const classes = [
+        isDark ? "dark" : undefined,
+        "bg-background text-foreground font-sans",
+        className,
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx(As, { className: classes, style: style, "data-theme-mode": resolvedMode, children: children }) }));
+    // The portal node OPENS the scope as an empty `display: contents` element:
+    // it draws no box, yet overlays portaled into it inherit the scope's
+    // variables and its `.dark` / `data-theme-mode`. First, not last: Tailwind's
+    // `space-*`/`divide-*` and `last:` target the last child, so a trailing node
+    // would hand the real last child a margin or divider it never had.
+    const PortalRoot = As === "span" ? "span" : "div";
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx(PortalContainerContext.Provider, { value: portalContainer, children: _jsxs(As, { className: classes, style: style, "data-theme-mode": resolvedMode, children: [_jsx(PortalRoot, { ref: setPortalContainer, "data-slot": "theme-portal", style: { display: "contents" } }), children] }) }) }));
 }
 //# sourceMappingURL=theme-provider.js.map

package/dist/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@miragon/mcp-toolkit-ui",
-  "version": "2.6.0",
-  "description": "React UI for MCP servers: shadcn primitives, composite components, TanStack Query hooks, and the MCP App shell (McpAppView + WidgetRenderer).",
+  "version": "2.8.0",
+  "description": "React UI for MCP servers in the Miragon design system (white-label through role tokens): primitives, composite components, TanStack Query hooks, and the MCP App shell (McpAppView + WidgetRenderer).",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Miragon/mcp-toolkit.git",
@@ -26,7 +26,10 @@
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.js"
     },
-    "./globals.css": "./src/globals.css"
+    "./globals.css": "./src/globals.css",
+    "./theme.css": "./src/theme.css",
+    "./fonts.css": "./src/fonts.css",
+    "./cd-tokens.generated.css": "./src/theme/cd-tokens.generated.css"
   },
   "files": [
     "dist",
@@ -42,11 +45,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.3.0",
-    "@miragon/mcp-toolkit-core": "~2.6.0"
+    "@miragon/mcp-toolkit-core": "~2.8.0"
   },
   "dependencies": {
     "@base-ui/react": "1.8.0",
     "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
     "@tanstack/react-query": "5.103.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -58,17 +62,19 @@
   "devDependencies": {
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
+    "@types/node": "26.6.4",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitest/coverage-v8": "4.1.11",
     "fast-check": "4.10.2",
+    "happy-dom": "20.14.5",
     "mcp-use": "2.7.3",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
     "vitest": "4.1.11",
-    "@miragon/mcp-toolkit-core": "2.6.0"
+    "@miragon/mcp-toolkit-core": "2.8.0"
   },
   "engines": {
     "node": ">=22.22.2"

package/src/app/adapt-data-widget.tsx

@@ -1,8 +1,6 @@
-import { useEffect, type ComponentType, type ReactNode } from "react"
-import { ModelContext } from "mcp-use/react"
+import type { ComponentType } from "react"
 import type { WidgetProps } from "@miragon/mcp-toolkit-core"
-import { useHostBridgeOrNull } from "./host-bridge.js"
-import { useIsInsideMcpUseView } from "./mcp-use-host-bridge.js"
+import { HostModelContext } from "./model-context.js"
 import type { WidgetComponent } from "./widget-renderer.js"
 
 /**
@@ -16,44 +14,6 @@ export type DescribeForModel<T> = (
   props: Readonly<Record<string, unknown>>,
 ) => string
 
-/**
- * Model-context reporting that works on every host — the host-portable
- * replacement for rendering `mcp-use/react`'s `ModelContext` directly.
- *
- * mcp-use 2.x's `ModelContext` registers with the view runtime and THROWS
- * outside a `bootstrapView` mount, so it is only rendered inside an mcp-use
- * view (where it aggregates nested nodes into one tree). Everywhere else —
- * ChatGPT via `createChatGptHostBridge`, the `WidgetFixtureHost` harness,
- * standalone apps — the description flows through the bridge's
- * `setModelContext` instead (last-writer-wins; fine for the single-widget
- * mounts those hosts render).
- *
- * Widgets that self-fetch and report their own context (cockpit views like
- * `TasksBoard`) must use this instead of importing `ModelContext` from
- * `mcp-use/react` — the direct import crashes the widget in every non-view
- * mount, starting with the widget playground.
- */
-export function HostModelContext({
-  content,
-  children,
-}: {
-  content: string
-  children: ReactNode
-}): ReactNode {
-  const insideView = useIsInsideMcpUseView()
-  if (insideView) return <ModelContext content={content}>{children}</ModelContext>
-  return <BridgeModelContext content={content}>{children}</BridgeModelContext>
-}
-
-function BridgeModelContext({ content, children }: { content: string; children: ReactNode }) {
-  const bridge = useHostBridgeOrNull()
-  const setModelContext = bridge?.setModelContext
-  useEffect(() => {
-    setModelContext?.(content)
-  }, [setModelContext, content])
-  return children
-}
-
 /**
  * Wraps a "single-data" widget component (signature `({ data }: { data: T | null })`)
  * so it can be registered as a framework {@link WidgetComponent} (which receives

package/src/app/builder/BuilderBanners.tsx

@@ -1,4 +1,6 @@
 import { AlertTriangle } from "lucide-react"
+import { ErrorState } from "../../components/ErrorState.js"
+import { TONE_ICON } from "../../lib/tone-utils.js"
 import type { LayoutBuilderLabels } from "./labels.js"
 
 // -------------------------------------------------------------------------- //
@@ -9,7 +11,10 @@ import type { LayoutBuilderLabels } from "./labels.js"
  * Inline feedback strip under the toolbar. Surfaces two things the builder
  * previously swallowed:
  *   - a `get-builder-catalogue` fetch failure (Finding [3]) — only console-
- *     logged before, so the user couldn't tell the palette was stale, and
+ *     logged before, so the user couldn't tell the palette was stale. It is
+ *     the kit's inline `ErrorState`: what happened, what to do, a retry, and
+ *     the tool name with the raw reason under "Details" (never in the
+ *     sentence the user reads), and
  *   - pipeline validation issues (Finding [10]/[6]) the catalogue reports
  *     fail-soft but `render-view` would reject fail-hard.
  *
@@ -21,29 +26,37 @@ export function BuilderBanners({
   catalogueToolName,
   refreshError,
   validationIssues,
+  onRetry,
 }: {
   L: Required<LayoutBuilderLabels>
   catalogueToolName: string
   refreshError: string | null
   validationIssues: string[]
+  /** Fetches the catalogue again; the error state offers it as its retry. */
+  onRetry?: () => void
 }) {
   if (!refreshError && validationIssues.length === 0) return null
   return (
-    <div className="flex flex-col gap-2" role="status" aria-live="polite">
+    <div className="flex flex-col gap-2">
       {refreshError && (
-        <div className="border-destructive/30 bg-destructive/10 text-destructive flex items-start gap-2 rounded-md border px-3 py-2 text-xs">
-          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
-          <div className="min-w-0">
-            <p className="font-medium">{L.catalogueError}</p>
-            <p className="text-destructive/80 mt-0.5 break-words">
-              <span className="font-mono">{catalogueToolName}</span>: {refreshError}
-            </p>
-          </div>
-        </div>
+        <ErrorState
+          variant="inline"
+          title={L.catalogueError}
+          description={L.catalogueErrorHint}
+          details={`${catalogueToolName}: ${refreshError}`}
+          onRetry={onRetry}
+        />
       )}
       {validationIssues.length > 0 && (
-        <div className="flex items-start gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+        <div
+          role="status"
+          aria-live="polite"
+          className="border-warning bg-warning-soft text-foreground text-small flex items-start gap-2 rounded-md border px-3 py-2"
+        >
+          <AlertTriangle
+            className={`mt-0.5 size-3.5 shrink-0 ${TONE_ICON.warning}`}
+            aria-hidden="true"
+          />
           <div className="min-w-0">
             <p className="font-medium">{L.validationWarning}</p>
             <ul className="mt-0.5 list-inside list-disc space-y-0.5">