@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

package/dist/theme/create-theme.js

@@ -1,24 +1,157 @@
 /**
- * The single source of truth mapping each curated {@link ThemeTokens} field to
- * its real CSS variable name from `globals.css`. `tokensToVars` walks this map,
- * so adding a field here (and to {@link ThemeTokens}) is all that is needed to
- * extend the public theming surface.
+ * The single source of truth mapping each {@link ThemeTokens} field to its real
+ * CSS variable name in `theme.css`. `tokensToVars` walks this map, so adding a
+ * field here (and to {@link ThemeTokens}) is all that is needed to extend the
+ * public theming surface.
  */
 export const TOKEN_TO_CSS_VAR = {
     primary: "--primary",
     primaryForeground: "--primary-foreground",
+    primaryHover: "--primary-hover",
+    link: "--link",
     accent: "--accent",
     accentForeground: "--accent-foreground",
     background: "--background",
     foreground: "--foreground",
     card: "--card",
     cardForeground: "--card-foreground",
+    popover: "--popover",
+    muted: "--muted",
+    mutedForeground: "--muted-foreground",
+    secondary: "--secondary",
     border: "--border",
+    input: "--input",
     ring: "--ring",
+    focus: "--focus",
+    destructive: "--destructive",
+    destructiveForeground: "--destructive-foreground",
+    success: "--success",
+    successSoft: "--success-soft",
+    successInk: "--success-ink",
+    warning: "--warning",
+    warningSoft: "--warning-soft",
+    warningInk: "--warning-ink",
+    danger: "--danger",
+    dangerSoft: "--danger-soft",
+    dangerInk: "--danger-ink",
+    info: "--info",
+    infoSoft: "--info-soft",
+    infoInk: "--info-ink",
     radius: "--radius",
+    radiusSm: "--radius-sm",
+    radiusMd: "--radius-md",
+    radiusLg: "--radius-lg",
+    radiusPill: "--radius-pill",
+    shadow1: "--shadow-1",
+    shadow2: "--shadow-2",
+    shadow3: "--shadow-3",
+    scrim: "--scrim",
+    motionFast: "--motion-fast",
+    motionBase: "--motion-base",
+    motionSlow: "--motion-slow",
+    ease: "--ease",
     fontSans: "--font-sans",
+    fontMono: "--font-mono",
     fontHeading: "--font-heading",
+    textTitle: "--text-title",
+    textSection: "--text-section",
+    textBody: "--text-body",
+    textDense: "--text-dense",
+    textSmall: "--text-small",
 };
+/**
+ * The role-token contract: every variable the toolkit defines for components
+ * to use (`theme.css`), in light and — for colours — dark. Components in this
+ * package, and in apps built on it, style through these names only, never
+ * through raw colours or Tailwind palette classes.
+ */
+export const ROLE_TOKENS = [
+    "--background",
+    "--card",
+    "--popover",
+    "--muted",
+    "--secondary",
+    "--foreground",
+    "--muted-foreground",
+    "--border",
+    "--input",
+    "--primary",
+    "--primary-foreground",
+    "--primary-hover",
+    "--link",
+    "--ring",
+    "--focus",
+    "--success",
+    "--warning",
+    "--danger",
+    "--info",
+    "--success-soft",
+    "--warning-soft",
+    "--danger-soft",
+    "--info-soft",
+    "--success-ink",
+    "--warning-ink",
+    "--danger-ink",
+    "--info-ink",
+    "--destructive",
+    "--radius-sm",
+    "--radius-md",
+    "--radius-lg",
+    "--radius-pill",
+    "--shadow-1",
+    "--shadow-2",
+    "--shadow-3",
+    "--scrim",
+    "--motion-fast",
+    "--motion-base",
+    "--motion-slow",
+    "--ease",
+    "--font-sans",
+    "--font-mono",
+    "--text-title",
+    "--text-section",
+    "--text-body",
+    "--text-dense",
+    "--text-small",
+];
+/**
+ * Variables whose toolkit value is the same in light and dark (theme.css
+ * declares them once, or identically in both modes). A theme's LIGHT value for
+ * one of these also applies in dark mode — a brand's button colour, radius or
+ * font does not change with the mode. Every other variable (surfaces, text,
+ * links, focus, status tones) takes its dark value from the theme's `dark`
+ * tokens or, failing that, from the toolkit's dark defaults — never from the
+ * light value, which would put light surfaces into a dark scope.
+ * Pinned against theme.css by `theme-css.test.ts`.
+ */
+export const MODE_INVARIANT_VARS = new Set([
+    "--primary",
+    "--primary-foreground",
+    "--primary-hover",
+    "--destructive",
+    "--destructive-foreground",
+    "--input",
+    "--radius",
+    "--radius-sm",
+    "--radius-md",
+    "--radius-lg",
+    "--radius-pill",
+    "--shadow-1",
+    "--shadow-2",
+    "--shadow-3",
+    "--motion-fast",
+    "--motion-base",
+    "--motion-slow",
+    "--ease",
+    "--font-sans",
+    "--font-mono",
+    "--font-heading",
+    "--text-title",
+    "--text-section",
+    "--text-body",
+    "--text-dense",
+    "--text-small",
+]);
 /**
  * Map a {@link ThemeTokens} object to its CSS variables. Empty/partial token
  * objects yield only the variables that were set; fields not present in
@@ -35,20 +168,21 @@ export function tokensToVars(tokens) {
     return vars;
 }
 /**
- * Build a serializable {@link ThemeDefinition} from a curated set of brand
+ * Build a serializable {@link ThemeDefinition} from a set of brand
  * {@link ThemeTokens}. This is the one switch a white-label client flips: pass
- * your brand's primary colour, radius, and (optionally) dark overrides, and
- * every toolkit primitive that reads the design tokens — `Card`, `Button`,
- * `Badge`, `bg-card`, `text-primary`, `rounded-lg` — re-skins to match.
+ * the brand's roles (and, optionally, dark overrides), and every toolkit
+ * primitive that reads the role tokens — `Card`, `Button`, `Badge`, `bg-card`,
+ * `text-link`, `rounded-md` — re-skins to match. Without a theme the toolkit
+ * renders in the Miragon theme.
  *
  * Pure and side-effect-free: it only maps fields to CSS-variable names. Apply
  * the result with {@link ThemeProvider} (recommended) or by spreading
- * `theme.toStyle()` onto a wrapper element.
+ * {@link resolveThemeVars}`(theme, mode)` onto a wrapper element.
  *
  * @example
  * const brand = createTheme(
- *   { primary: "oklch(0.55 0.2 264)", radius: "0.5rem" },
- *   { dark: { primary: "oklch(0.7 0.18 264)" } },
+ *   { primary: "#0f766e", link: "#0f766e", focus: "#0f766e", radiusMd: "6px" },
+ *   { dark: { link: "#5eead4", focus: "#5eead4" } },
  * )
  * // <ThemeProvider theme={brand}>…</ThemeProvider>
  */
@@ -56,10 +190,67 @@ export function createTheme(tokens, opts) {
     const vars = tokensToVars(tokens);
     const darkTokens = opts?.dark;
     const darkVars = darkTokens ? tokensToVars(darkTokens) : undefined;
-    return {
+    const theme = {
         vars,
         ...(darkVars && Object.keys(darkVars).length > 0 ? { darkVars } : {}),
-        toStyle: () => vars,
+        toStyle: () => resolveThemeVars(theme, "light"),
     };
+    return theme;
+}
+/** Whether the theme sets `name` itself, in light or in dark. */
+function declares(theme, name) {
+    return name in theme.vars || (theme.darkVars !== undefined && name in theme.darkVars);
+}
+/**
+ * Fill the roles a theme written against the pre-role API leaves unset, from
+ * the knobs it does set, so it keeps ONE brand instead of half Miragon:
+ *
+ * - the base `--radius` reshapes the sm/md/lg steps (CI ratio 6 : 12 : 16);
+ * - `--primary` gives `--primary-hover` (90 %, the old `bg-primary/90`) and
+ *   `--link` (the old link button was `text-primary`);
+ * - `--ring` gives `--focus` (the old focus ring).
+ *
+ * A role the theme sets itself — in either mode — is never derived, and an
+ * explicit value always wins.
+ */
+function withDerivedVars(vars, theme) {
+    const derived = {};
+    const radius = vars["--radius"];
+    if (radius) {
+        derived["--radius-sm"] = `calc(${radius} * 0.5)`;
+        derived["--radius-md"] = radius;
+        derived["--radius-lg"] = `calc(${radius} * 4 / 3)`;
+    }
+    const primary = vars["--primary"];
+    if (primary && !declares(theme, "--primary-hover")) {
+        derived["--primary-hover"] = `color-mix(in srgb, ${primary} 90%, transparent)`;
+    }
+    if (primary && !declares(theme, "--link"))
+        derived["--link"] = primary;
+    const ring = vars["--ring"];
+    if (ring && !declares(theme, "--focus"))
+        derived["--focus"] = ring;
+    return { ...derived, ...vars };
+}
+/**
+ * The CSS variables a theme applies at its scope in `mode`. Light mode: the
+ * theme's `vars`. Dark mode: its mode-invariant light vars plus its `darkVars`
+ * — never the other light vars, which would beat the toolkit's dark defaults
+ * (mcp-toolkit#178 N35). Both modes add what the legacy knobs derive (a base
+ * `--radius` → sm/md/lg; `--primary` → hover and link; `--ring` → focus)
+ * where the theme does not set those roles itself.
+ * `null`/`undefined` yields `{}` (the toolkit defaults apply).
+ */
+export function resolveThemeVars(theme, mode) {
+    if (!theme)
+        return {};
+    if (mode === "light")
+        return withDerivedVars(theme.vars, theme);
+    const carried = {};
+    for (const [name, value] of Object.entries(theme.vars)) {
+        if (MODE_INVARIANT_VARS.has(name))
+            carried[name] = value;
+    }
+    return withDerivedVars({ ...carried, ...theme.darkVars }, theme);
 }
 //# sourceMappingURL=create-theme.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"create-theme.js","sourceRoot":"","sources":["../../src/theme/create-theme.ts"],"names":[],"mappings":"AAoDA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,WAAW;IACpB,iBAAiB,EAAE,sBAAsB;IACzC,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,qBAAqB;IACvC,UAAU,EAAE,cAAc;IAC1B,UAAU,EAAE,cAAc;IAC1B,IAAI,EAAE,QAAQ;IACd,cAAc,EAAE,mBAAmB;IACnC,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,aAAa;IACvB,WAAW,EAAE,gBAAgB;CAC2B,CAAA;AA2B1D;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,MAAmB;IAC9C,MAAM,IAAI,GAAc,EAAE,CAAA;IAC1B,KAAK,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAG1D,EAAE,CAAC;QACJ,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;QAC3B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAaD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,IAAyB;IACxE,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;IACjC,MAAM,UAAU,GAAG,IAAI,EAAE,IAAI,CAAA;IAC7B,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAElE,OAAO;QACL,IAAI;QACJ,GAAG,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACrE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI;KACpB,CAAA;AACH,CAAC"}
+{"version":3,"file":"create-theme.js","sourceRoot":"","sources":["../../src/theme/create-theme.ts"],"names":[],"mappings":"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"}

package/dist/theme/fonts.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 declare const GEIST_FONT_FILES: {
+    readonly sans: "geist-latin-wght-normal.woff2";
+    readonly mono: "geist-mono-latin-wght-normal.woff2";
+};
+/** Options for {@link fontFaces}. */
+export interface FontFacesOptions {
+    /** Where the woff2 files are served from, e.g. `https://mcp.example.com/fonts`. */
+    baseUrl: string;
+    /** File names under `baseUrl`. Defaults to {@link GEIST_FONT_FILES}. */
+    files?: {
+        sans?: string;
+        mono?: string;
+    };
+    /** `font-display` strategy. Default `"swap"`: text renders at once in the fallback. */
+    display?: "auto" | "block" | "swap" | "fallback" | "optional";
+}
+/**
+ * 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 declare function fontFaces({ baseUrl, files, display }: FontFacesOptions): string;
+//# sourceMappingURL=fonts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,wFAAwF;AACxF,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAMV,qCAAqC;AACrC,MAAM,WAAW,gBAAgB;IAC/B,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAA;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAA;CAC9D;AA0BD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAgB,EAAE,EAAE,gBAAgB,GAAG,MAAM,CAOxF"}

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"}