@miragon/mcp-toolkit-ui 2.5.0 → 2.7.0

package/dist/theme/fonts.js

@@ -0,0 +1,56 @@
+/**
+ * Opt-in Geist delivery by URL. The toolkit's font tokens name "Geist" and
+ * "Geist Mono" first but load no font: an app either imports
+ * `@miragon/mcp-toolkit-ui/fonts.css` (bundled by the build) or serves the
+ * woff2 files itself and declares them with {@link fontFaces}. The second path
+ * keeps MCP App views small — the files are fetched once and cached instead of
+ * inlined as base64 into every view; allow their origin in the view's CSP
+ * `resourceDomains`. Where the fonts never load, the host's font renders (if
+ * the host sends one, see `adoptHostFontVariables`), else the system stack.
+ */
+/** The latin variable woff2 files, as `@fontsource-variable/geist(-mono)` ship them. */
+export const GEIST_FONT_FILES = {
+    sans: "geist-latin-wght-normal.woff2",
+    mono: "geist-mono-latin-wght-normal.woff2",
+};
+/** The latin subset both files cover (identical to fontsource's `latin` range). */
+const LATIN_UNICODE_RANGE = "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD";
+/** Characters that could break out of the CSS `url("…")` the helper writes. */
+const UNSAFE_URL_CHARS = /["'\\()\s<>]/;
+function fontUrl(baseUrl, file) {
+    const url = `${baseUrl.replace(/\/+$/, "")}/${file.replace(/^\/+/, "")}`;
+    if (UNSAFE_URL_CHARS.test(url)) {
+        throw new Error(`fontFaces: refusing a font URL with quote, bracket or whitespace: ${url}`);
+    }
+    return url;
+}
+function face(family, url, display) {
+    return [
+        "@font-face {",
+        `  font-family: "${family}";`,
+        "  font-style: normal;",
+        `  font-display: ${display};`,
+        "  font-weight: 100 900;",
+        `  src: url("${url}") format("woff2");`,
+        `  unicode-range: ${LATIN_UNICODE_RANGE};`,
+        "}",
+    ].join("\n");
+}
+/**
+ * The `@font-face` rules for Geist and Geist Mono (latin, variable weight
+ * 100–900) served from `baseUrl`. Pure — inject the string where your app
+ * builds its document, e.g. `<style>{fontFaces({ baseUrl })}</style>`.
+ *
+ * @example
+ * fontFaces({ baseUrl: "https://mcp.example.com/fonts" })
+ * // @font-face { font-family: "Geist"; … src: url("https://mcp.example.com/fonts/geist-latin-wght-normal.woff2") … }
+ */
+export function fontFaces({ baseUrl, files, display = "swap" }) {
+    const sans = files?.sans ?? GEIST_FONT_FILES.sans;
+    const mono = files?.mono ?? GEIST_FONT_FILES.mono;
+    return [
+        face("Geist", fontUrl(baseUrl, sans), display),
+        face("Geist Mono", fontUrl(baseUrl, mono), display),
+    ].join("\n");
+}
+//# sourceMappingURL=fonts.js.map

package/dist/theme/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,wFAAwF;AACxF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,+BAA+B;IACrC,IAAI,EAAE,oCAAoC;CAClC,CAAA;AAEV,mFAAmF;AACnF,MAAM,mBAAmB,GACvB,0JAA0J,CAAA;AAY5J,+EAA+E;AAC/E,MAAM,gBAAgB,GAAG,cAAc,CAAA;AAEvC,SAAS,OAAO,CAAC,OAAe,EAAE,IAAY;IAC5C,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAA;IACxE,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QAC/B,MAAM,IAAI,KAAK,CAAC,qEAAqE,GAAG,EAAE,CAAC,CAAA;IAC7F,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,SAAS,IAAI,CAAC,MAAc,EAAE,GAAW,EAAE,OAAe;IACxD,OAAO;QACL,cAAc;QACd,mBAAmB,MAAM,IAAI;QAC7B,uBAAuB;QACvB,mBAAmB,OAAO,GAAG;QAC7B,yBAAyB;QACzB,eAAe,GAAG,qBAAqB;QACvC,oBAAoB,mBAAmB,GAAG;QAC1C,GAAG;KACJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,EAAoB;IAC9E,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,IAAI,gBAAgB,CAAC,IAAI,CAAA;IACjD,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,IAAI,gBAAgB,CAAC,IAAI,CAAA;IACjD,OAAO;QACL,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAC9C,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC;KACpD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACd,CAAC"}

package/dist/theme/host-fonts.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The host's font, demoted to the fallback slot of the font roles.
+ *
+ * SEP-1865 hosts send their fonts as the style variables `--font-sans` and
+ * `--font-mono`, the same names as the toolkit's font roles. mcp-use writes
+ * them inline on `<html>`, where they beat the role stacks in `theme.css` and
+ * replace them whole, so Geist never renders even when it is loaded. The
+ * toolkit's rule is Geist first, the host's font next, the system stack last:
+ * {@link adoptHostFontVariables} moves the host's value to
+ * `--host-font-sans` / `--host-font-mono`, which the role stacks name right
+ * after Geist. `McpToolkitApp` runs it after every host-context update; an app
+ * with its own document layer calls it after it applied the host variables.
+ */
+/** Each host font variable (SEP-1865 name) → where the toolkit keeps it. */
+export declare const HOST_FONT_VARIABLES: {
+    readonly "--font-sans": "--host-font-sans";
+    readonly "--font-mono": "--host-font-mono";
+};
+/** The slice of `CSSStyleDeclaration` the helper touches (`element.style`). */
+export interface InlineStyleTarget {
+    getPropertyValue(property: string): string;
+    setProperty(property: string, value: string): void;
+    removeProperty(property: string): string;
+}
+/**
+ * Move the host's font variables off the role names on `style` (normally
+ * `document.documentElement.style`, where the host variables were applied):
+ * each non-empty `--font-sans` / `--font-mono` in `hostVariables` is written
+ * to its {@link HOST_FONT_VARIABLES} slot, and the role is cleared when it
+ * still holds exactly the host's value — an app's own inline brand font
+ * stays. Idempotent; a no-op without host variables.
+ *
+ * @example
+ * applyHostStyleVariables(vars) // the host layer writes --font-sans on <html>
+ * adoptHostFontVariables(document.documentElement.style, vars)
+ * // --font-sans: "Geist", "Geist Variable", <host font>, system-ui, sans-serif
+ */
+export declare function adoptHostFontVariables(style: InlineStyleTarget, hostVariables: Readonly<Record<string, string | undefined>> | null | undefined): void;
+//# sourceMappingURL=host-fonts.d.ts.map

package/dist/theme/host-fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-fonts.d.ts","sourceRoot":"","sources":["../../src/theme/host-fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB;;;CAGtB,CAAA;AAEV,+EAA+E;AAC/E,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1C,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAClD,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CACzC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,iBAAiB,EACxB,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,GAC7E,IAAI,CAQN"}

package/dist/theme/host-fonts.js

@@ -0,0 +1,44 @@
+/**
+ * The host's font, demoted to the fallback slot of the font roles.
+ *
+ * SEP-1865 hosts send their fonts as the style variables `--font-sans` and
+ * `--font-mono`, the same names as the toolkit's font roles. mcp-use writes
+ * them inline on `<html>`, where they beat the role stacks in `theme.css` and
+ * replace them whole, so Geist never renders even when it is loaded. The
+ * toolkit's rule is Geist first, the host's font next, the system stack last:
+ * {@link adoptHostFontVariables} moves the host's value to
+ * `--host-font-sans` / `--host-font-mono`, which the role stacks name right
+ * after Geist. `McpToolkitApp` runs it after every host-context update; an app
+ * with its own document layer calls it after it applied the host variables.
+ */
+/** Each host font variable (SEP-1865 name) → where the toolkit keeps it. */
+export const HOST_FONT_VARIABLES = {
+    "--font-sans": "--host-font-sans",
+    "--font-mono": "--host-font-mono",
+};
+/**
+ * Move the host's font variables off the role names on `style` (normally
+ * `document.documentElement.style`, where the host variables were applied):
+ * each non-empty `--font-sans` / `--font-mono` in `hostVariables` is written
+ * to its {@link HOST_FONT_VARIABLES} slot, and the role is cleared when it
+ * still holds exactly the host's value — an app's own inline brand font
+ * stays. Idempotent; a no-op without host variables.
+ *
+ * @example
+ * applyHostStyleVariables(vars) // the host layer writes --font-sans on <html>
+ * adoptHostFontVariables(document.documentElement.style, vars)
+ * // --font-sans: "Geist", "Geist Variable", <host font>, system-ui, sans-serif
+ */
+export function adoptHostFontVariables(style, hostVariables) {
+    if (!hostVariables)
+        return;
+    for (const [role, slot] of Object.entries(HOST_FONT_VARIABLES)) {
+        const value = hostVariables[role]?.trim();
+        if (!value)
+            continue;
+        style.setProperty(slot, value);
+        if (style.getPropertyValue(role).trim() === value)
+            style.removeProperty(role);
+    }
+}
+//# sourceMappingURL=host-fonts.js.map

package/dist/theme/host-fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-fonts.js","sourceRoot":"","sources":["../../src/theme/host-fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,4EAA4E;AAC5E,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,aAAa,EAAE,kBAAkB;IACjC,aAAa,EAAE,kBAAkB;CACzB,CAAA;AASV;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAwB,EACxB,aAA8E;IAE9E,IAAI,CAAC,aAAa;QAAE,OAAM;IAC1B,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE,CAAC;QAC/D,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA;QACzC,IAAI,CAAC,KAAK;YAAE,SAAQ;QACpB,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QAC9B,IAAI,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK;YAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAC/E,CAAC;AACH,CAAC"}

package/dist/theme/index.d.ts

@@ -1,7 +1,14 @@
-export { createTheme, tokensToVars, TOKEN_TO_CSS_VAR } from "./create-theme.js";
+export { createTheme, tokensToVars, resolveThemeVars, TOKEN_TO_CSS_VAR, ROLE_TOKENS, MODE_INVARIANT_VARS, } from "./create-theme.js";
 export type { ThemeTokens, ThemeDefinition, ThemeVars, CreateThemeOptions } from "./create-theme.js";
 export { ThemeProvider, useTheme } from "./theme-provider.js";
 export type { ThemeMode, ThemeContextValue, ThemeProviderProps } from "./theme-provider.js";
+export { usePortalContainer } from "./portal-container.js";
 export { themePresets } from "./presets.js";
 export type { ThemePresetId } from "./presets.js";
+export { CD_TOKENS, CD_TOKENS_VERSION } from "./cd-tokens.js";
+export type { CdTokenName } from "./cd-tokens.js";
+export { fontFaces, GEIST_FONT_FILES } from "./fonts.js";
+export type { FontFacesOptions } from "./fonts.js";
+export { adoptHostFontVariables, HOST_FONT_VARIABLES } from "./host-fonts.js";
+export type { InlineStyleTarget } from "./host-fonts.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAC/E,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACpG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC7D,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACpG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC7D,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAC7D,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/theme/index.js

@@ -1,7 +1,11 @@
 // White-label theming. Browser-safe (React + DOM only, no `mcp-use/react`), so
 // it is re-exported from the root barrel — a consumer can theme the toolkit's
 // primitives without pulling in the host runtime.
-export { createTheme, tokensToVars, TOKEN_TO_CSS_VAR } from "./create-theme.js";
+export { createTheme, tokensToVars, resolveThemeVars, TOKEN_TO_CSS_VAR, ROLE_TOKENS, MODE_INVARIANT_VARS, } from "./create-theme.js";
 export { ThemeProvider, useTheme } from "./theme-provider.js";
+export { usePortalContainer } from "./portal-container.js";
 export { themePresets } from "./presets.js";
+export { CD_TOKENS, CD_TOKENS_VERSION } from "./cd-tokens.js";
+export { fontFaces, GEIST_FONT_FILES } from "./fonts.js";
+export { adoptHostFontVariables, HOST_FONT_VARIABLES } from "./host-fonts.js";
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,8EAA8E;AAC9E,kDAAkD;AAClD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE/E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,8EAA8E;AAC9E,kDAAkD;AAClD,OAAO,EACL,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE7D,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/theme/portal-container.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The element portaled overlays (Dialog, Sheet, Select) render into. A
+ * {@link ThemeProvider} provides a node INSIDE its scope, so overlays opened
+ * from a themed subtree keep the theme's variables and its light/dark mode
+ * instead of falling back to `document.body` and the `:root` defaults
+ * (mcp-toolkit#178 N36). `null` — no provider, or before it mounted — means
+ * the overlay library's default (`document.body`).
+ */
+export declare const PortalContainerContext: import("react").Context<HTMLElement | null>;
+/**
+ * The portal container of the nearest {@link ThemeProvider}, or `null`. Pass it
+ * as `container` to a portal of your own so it stays inside the theme scope;
+ * the toolkit's Dialog, Sheet and Select already do.
+ */
+export declare function usePortalContainer(): HTMLElement | null;
+//# sourceMappingURL=portal-container.d.ts.map

package/dist/theme/portal-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-container.d.ts","sourceRoot":"","sources":["../../src/theme/portal-container.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,6CAA0C,CAAA;AAE7E;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,WAAW,GAAG,IAAI,CAEvD"}

package/dist/theme/portal-container.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+/**
+ * The element portaled overlays (Dialog, Sheet, Select) render into. A
+ * {@link ThemeProvider} provides a node INSIDE its scope, so overlays opened
+ * from a themed subtree keep the theme's variables and its light/dark mode
+ * instead of falling back to `document.body` and the `:root` defaults
+ * (mcp-toolkit#178 N36). `null` — no provider, or before it mounted — means
+ * the overlay library's default (`document.body`).
+ */
+export const PortalContainerContext = createContext(null);
+/**
+ * The portal container of the nearest {@link ThemeProvider}, or `null`. Pass it
+ * as `container` to a portal of your own so it stays inside the theme scope;
+ * the toolkit's Dialog, Sheet and Select already do.
+ */
+export function usePortalContainer() {
+    return useContext(PortalContainerContext);
+}
+//# sourceMappingURL=portal-container.js.map

package/dist/theme/portal-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-container.js","sourceRoot":"","sources":["../../src/theme/portal-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEjD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAA;AAE7E;;;;GAIG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,UAAU,CAAC,sBAAsB,CAAC,CAAA;AAC3C,CAAC"}

package/dist/theme/presets.d.ts

@@ -1,21 +1,36 @@
 import { type ThemeDefinition } 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 declare 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: ThemeDefinition;
-    /** 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: ThemeDefinition;
     /** A grounded emerald brand with a crisp, near-square radius — enterprise. */
     emerald: ThemeDefinition;

package/dist/theme/presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/theme/presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY;IACvB;;;OAGG;;IAqBH,4EAA4E;;IAqB5E,8EAA8E;;CAoBrC,CAAA;AAE3C,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAA"}
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/theme/presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAErE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;IACvB;;;;;;;OAOG;;IA2BH;;;;;;OAMG;;IA2BH,8EAA8E;;CA0BrC,CAAA;AAE3C,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAA"}

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":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GAGT,MAAM,OAAO,CAAA;AAuBd,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAElE;;;;GAIG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IACtE,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;;;;GAKG;AACH,SAAS,eAAe,CAAC,IAAe;IACtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAmB,OAAO,CAAC,CAAA;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,QAAQ;YAAE,OAAM;QAC7B,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;YAAE,OAAM;QAEpF,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAA;QAC/D,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACjD,CAAC,CAAA;QACD,IAAI,EAAE,CAAA;QACN,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;QACtC,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;QAC3C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;AAC9C,CAAC;AAyBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,GAAG,OAAO,EACd,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,SAAS,EACT,QAAQ,GACW;IACnB,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAC1C,MAAM,MAAM,GAAG,YAAY,KAAK,MAAM,CAAA;IAEtC,8EAA8E;IAC9E,yEAAyE;IACzE,MAAM,KAAK,GAAG,OAAO,CAAgB,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAA;QACrB,IAAI,MAAM,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC7B,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QAC7C,CAAC;QACD,OAAO,KAAK,CAAC,IAAI,CAAA;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EACpD,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,CAC5B,CAAA;IAED,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,+BAA+B,EAAE,SAAS,CAAC;SACtF,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,KAAC,EAAE,IAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,qBAAmB,YAAY,YAChE,QAAQ,GACN,GACiB,CACzB,CAAA;AACH,CAAC"}
+{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"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"}