@frontmcp/uipack 0.6.1 → 0.6.3

package/esm/registry/{index.js → index.mjs}

@@ -12,9 +12,6 @@ var __export = (target, all) => {
 function getCachedScript(url) {
   return scriptCache.get(url);
 }
-function isScriptCached(url) {
-  return scriptCache.has(url);
-}
 function buildFontPreconnect() {
   return CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
 }
@@ -47,8 +44,9 @@ function buildCdnScripts(options = {}) {
   const scripts = [];
   if (inline) {
     if (tailwind) {
-      if (isScriptCached(CDN.tailwind)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)));
+      const cached = getCachedScript(CDN.tailwind);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first."
@@ -56,8 +54,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (htmx) {
-      if (isScriptCached(CDN.htmx.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)));
+      const cached = getCachedScript(CDN.htmx.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first."
@@ -65,8 +64,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (alpine) {
-      if (isScriptCached(CDN.alpine.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)));
+      const cached = getCachedScript(CDN.alpine.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first."
@@ -74,8 +74,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (icons) {
-      if (isScriptCached(CDN.icons.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)));
+      const cached = getCachedScript(CDN.icons.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first."
@@ -170,11 +171,12 @@ var init_platforms = __esm({
       id: "claude",
       name: "Claude (Artifacts)",
       supportsWidgets: true,
+      // Claude Artifacts support interactive widgets
       supportsTailwind: true,
       supportsHtmx: false,
       // Network blocked, HTMX won't work for API calls
-      networkMode: "blocked",
-      scriptStrategy: "inline",
+      networkMode: "limited",
+      scriptStrategy: "cdn",
       maxInlineSize: 100 * 1024,
       // 100KB limit for artifacts
       cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
@@ -440,17 +442,30 @@ function emitColorScale(lines, name, scale) {
     if (value) lines.push(`--color-${name}-${shade}: ${value};`);
   }
 }
+function emitColorWithOpacityVariants(lines, name, value) {
+  lines.push(`--color-${name}: ${value};`);
+  for (const opacity of OPACITY_VARIANTS) {
+    lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
+  }
+}
+function emitBrandColorWithVariants(lines, name, value) {
+  lines.push(`--color-${name}: ${value};`);
+  lines.push(`--color-${name}-hover: color-mix(in oklch, ${value} 85%, black);`);
+  for (const opacity of OPACITY_VARIANTS) {
+    lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
+  }
+}
 function buildThemeCss(theme) {
   const lines = [];
   const semantic = theme.colors.semantic;
   if (typeof semantic.primary === "string") {
-    lines.push(`--color-primary: ${semantic.primary};`);
+    emitBrandColorWithVariants(lines, "primary", semantic.primary);
   } else if (semantic.primary) {
     emitColorScale(lines, "primary", semantic.primary);
   }
   if (semantic.secondary) {
     if (typeof semantic.secondary === "string") {
-      lines.push(`--color-secondary: ${semantic.secondary};`);
+      emitBrandColorWithVariants(lines, "secondary", semantic.secondary);
     } else {
       emitColorScale(lines, "secondary", semantic.secondary);
     }
@@ -469,10 +484,10 @@ function buildThemeCss(theme) {
       emitColorScale(lines, "neutral", semantic.neutral);
     }
   }
-  if (semantic.success) lines.push(`--color-success: ${semantic.success};`);
-  if (semantic.warning) lines.push(`--color-warning: ${semantic.warning};`);
-  if (semantic.danger) lines.push(`--color-danger: ${semantic.danger};`);
-  if (semantic.info) lines.push(`--color-info: ${semantic.info};`);
+  if (semantic.success) emitColorWithOpacityVariants(lines, "success", semantic.success);
+  if (semantic.warning) emitColorWithOpacityVariants(lines, "warning", semantic.warning);
+  if (semantic.danger) emitColorWithOpacityVariants(lines, "danger", semantic.danger);
+  if (semantic.info) emitColorWithOpacityVariants(lines, "info", semantic.info);
   const surface = theme.colors.surface;
   if (surface?.background) lines.push(`--color-background: ${surface.background};`);
   if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);
@@ -514,10 +529,11 @@ function buildThemeCss(theme) {
   }
   return lines.join("\n      ");
 }
+var OPACITY_VARIANTS;
 var init_theme = __esm({
   "libs/uipack/src/theme/theme.ts"() {
     "use strict";
-    init_presets();
+    OPACITY_VARIANTS = [10, 20, 30, 50, 70, 90];
   }
 });
 
@@ -532,13 +548,6 @@ var init_theme2 = __esm({
   }
 });
 
-// libs/uipack/src/utils/safe-stringify.ts
-var init_safe_stringify = __esm({
-  "libs/uipack/src/utils/safe-stringify.ts"() {
-    "use strict";
-  }
-});
-
 // libs/uipack/src/utils/escape-html.ts
 function escapeHtml(str) {
   if (str === null || str === void 0) {
@@ -547,6 +556,12 @@ function escapeHtml(str) {
   const s = String(str);
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
+function escapeJsString(str) {
+  return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function escapeScriptClose(jsonString) {
+  return jsonString.replace(/<\//g, "<\\/");
+}
 var init_escape_html = __esm({
   "libs/uipack/src/utils/escape-html.ts"() {
     "use strict";
@@ -557,7 +572,6 @@ var init_escape_html = __esm({
 var init_utils = __esm({
   "libs/uipack/src/utils/index.ts"() {
     "use strict";
-    init_safe_stringify();
     init_escape_html();
   }
 });
@@ -1141,7 +1155,6 @@ var init_helpers = __esm({
 // libs/uipack/src/handlebars/expression-extractor.ts
 function extractExpressions(template) {
   const expressions = [];
-  const lines = template.split("\n");
   const positionMap = buildPositionMap(template);
   let match;
   EXPRESSION_REGEX.lastIndex = 0;
@@ -1839,74 +1852,32 @@ var init_registry = __esm({
   }
 });
 
-// libs/uipack/src/renderers/mdx.renderer.ts
-function buildMdxHydrationScript() {
-  return `
-<script>
-(function() {
-  // MDX hydration requires React and component definitions
-  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
-    console.warn('[FrontMCP] React not available for MDX hydration');
-    return;
-  }
-
-  // Find all elements marked for MDX hydration
-  document.querySelectorAll('[data-mdx-hydrate]').forEach(function(root) {
-    var propsJson = root.getAttribute('data-props');
-    var props = propsJson ? JSON.parse(propsJson) : {};
-
-    // MDX content is pre-rendered, hydration mainly attaches event handlers
-    // For full interactivity, components need to be available client-side
-    if (window.__frontmcp_mdx_content) {
-      try {
-        ReactDOM.hydrateRoot(root, React.createElement(
-          window.__frontmcp_mdx_content,
-          props
-        ));
-      } catch (e) {
-        console.error('[FrontMCP] MDX hydration failed', e);
-      }
-    }
-  });
-})();
-</script>
-`;
+// libs/uipack/src/renderers/mdx-client.renderer.ts
+function buildReactCdnUrls(version = "19") {
+  return {
+    react: `https://esm.sh/react@${version}`,
+    reactDom: `https://esm.sh/react-dom@${version}/client`,
+    jsxRuntime: `https://esm.sh/react@${version}/jsx-runtime`
+  };
 }
-var REACT_CDN, INLINE_MDX_PLACEHOLDER, MdxRenderer, mdxRenderer;
-var init_mdx_renderer = __esm({
-  "libs/uipack/src/renderers/mdx.renderer.ts"() {
+var DEFAULT_CDN, MdxClientRenderer, mdxClientRenderer;
+var init_mdx_client_renderer = __esm({
+  "libs/uipack/src/renderers/mdx-client.renderer.ts"() {
     "use strict";
     init_detect();
     init_hash();
     init_cache();
-    REACT_CDN = {
-      react: "https://unpkg.com/react@18/umd/react.production.min.js",
-      reactDom: "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+    init_utils();
+    DEFAULT_CDN = {
+      mdx: "https://esm.sh/@mdx-js/mdx@3",
+      ...buildReactCdnUrls("19")
     };
-    INLINE_MDX_PLACEHOLDER = `
-// MDX runtime not available inline yet.
-// For blocked-network platforms, use pre-rendered HTML templates.
-console.warn('[FrontMCP] MDX hydration not available on this platform.');
-`;
-    MdxRenderer = class {
-      type = "mdx";
-      priority = 10;
-      // Between HTML (0) and React (20)
-      /**
-       * Lazy-loaded modules.
-       */
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      React = null;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ReactDOMServer = null;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      jsxRuntime = null;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      mdxEvaluate = null;
+    MdxClientRenderer = class {
+      type = "mdx-client";
+      priority = 8;
+      // Lower than server-side MDX (10)
       /**
        * Check if this renderer can handle the given template.
-       *
-       * Accepts strings containing MDX syntax (Markdown + JSX).
        */
       canHandle(template) {
         if (typeof template !== "string") {
@@ -1915,11 +1886,9 @@ console.warn('[FrontMCP] MDX hydration not available on this platform.');
         return containsMdxSyntax(template);
       }
       /**
-       * Transpile MDX to executable JavaScript.
-       *
-       * Uses @mdx-js/mdx to compile MDX source to a module.
-       * Note: For MDX, we use evaluate() which combines compile + run,
-       * so this method just returns the source hash for caching purposes.
+       * Prepare MDX template for rendering.
+       * Caches the template hash for deduplication. Actual MDX compilation
+       * happens client-side via CDN-loaded @mdx-js/mdx in the browser.
        */
       async transpile(template, _options) {
         const hash = hashString(template);
@@ -1929,7 +1898,6 @@ console.warn('[FrontMCP] MDX hydration not available on this platform.');
         }
         const transpileResult = {
           code: template,
-          // Store original MDX for evaluate()
           hash,
           cached: false
         };
@@ -1937,37 +1905,20 @@ console.warn('[FrontMCP] MDX hydration not available on this platform.');
         return transpileResult;
       }
       /**
-       * Render MDX template to HTML string.
+       * Render MDX template to HTML with CDN scripts.
        *
-       * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
-       * then renders the resulting React component to HTML via SSR.
+       * The returned HTML includes:
+       * - A container div for the rendered content
+       * - Script tags that load React and MDX from CDN
+       * - Inline script that compiles and renders the MDX
        */
       async render(template, context, options) {
-        await this.loadReact();
-        await this.loadMdx();
-        if (!this.mdxEvaluate) {
-          throw new Error("MDX compilation requires @mdx-js/mdx. Install it: npm install @mdx-js/mdx");
-        }
-        const templateHash = hashString(template);
-        const cacheKey = `mdx-component:${templateHash}`;
-        let Content = componentCache.get(cacheKey);
-        if (!Content) {
-          const result = await this.mdxEvaluate(template, {
-            ...this.jsxRuntime,
-            Fragment: this.React.Fragment,
-            development: false
-          });
-          Content = result.default;
-          componentCache.set(cacheKey, Content);
-        }
-        const mdxComponents = {
-          // User-provided components from tool config
-          ...options?.mdxComponents,
-          // Wrapper that provides context to the content
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          wrapper: ({ children }) => {
-            return this.React.createElement("div", { className: "mdx-content" }, children);
-          }
+        const containerId = options?.containerId || "mdx-content";
+        const showLoading = options?.showLoading !== false;
+        const loadingMessage = options?.loadingMessage || "Loading...";
+        const cdn = {
+          ...DEFAULT_CDN,
+          ...options?.cdn
         };
         const props = {
           input: context.input,
@@ -1975,82 +1926,80 @@ console.warn('[FrontMCP] MDX hydration not available on this platform.');
           structuredContent: context.structuredContent,
           helpers: context.helpers
         };
+        const reservedProps = /* @__PURE__ */ new Set(["input", "output", "structuredContent", "helpers", "components"]);
+        const outputProps = typeof context.output === "object" && context.output !== null ? Object.fromEntries(Object.entries(context.output).filter(([key]) => !reservedProps.has(key))) : {};
         const spreadProps = {
-          ...props,
-          ...typeof context.output === "object" && context.output !== null ? context.output : {}
+          ...outputProps,
+          ...props
         };
-        const element = this.React.createElement(Content, {
-          components: mdxComponents,
-          ...spreadProps
-        });
-        const html = this.ReactDOMServer.renderToString(element);
-        if (options?.hydrate) {
-          const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-          return `<div data-mdx-hydrate="true" data-props='${escapedProps}'>${html}</div>`;
-        }
-        return html;
+        const escapedMdx = escapeScriptClose(JSON.stringify(template));
+        const escapedProps = escapeScriptClose(JSON.stringify(spreadProps));
+        const safeContainerId = escapeJsString(containerId);
+        const loadingHtml = showLoading ? `<div class="mdx-loading">${escapeHtml(loadingMessage)}</div>` : "";
+        return `
+<div id="${escapeHtml(containerId)}">${loadingHtml}</div>
+<script type="module">
+(async function() {
+  try {
+    // Load dependencies from CDN
+    const [
+      { evaluate },
+      runtime,
+      React,
+      { createRoot }
+    ] = await Promise.all([
+      import('${cdn.mdx}'),
+      import('${cdn.jsxRuntime}'),
+      import('${cdn.react}'),
+      import('${cdn.reactDom}')
+    ]);
+
+    // MDX content and props
+    const mdxSource = ${escapedMdx};
+    const props = ${escapedProps};
+
+    // Compile and evaluate MDX
+    const { default: Content } = await evaluate(mdxSource, {
+      ...runtime,
+      Fragment: React.Fragment,
+      development: false
+    });
+
+    // Render to DOM
+    const container = document.getElementById('${safeContainerId}');
+    if (container) {
+      const root = createRoot(container);
+      root.render(React.createElement(Content, props));
+    }
+  } catch (error) {
+    console.error('[FrontMCP] MDX client rendering failed:', error);
+    const container = document.getElementById('${safeContainerId}');
+    if (container) {
+      container.innerHTML = '<div class="mdx-error">Failed to render MDX content</div>';
+    }
+  }
+})();
+</script>
+`;
       }
       /**
-       * Get runtime scripts for client-side functionality.
+       * Get runtime scripts - not needed for client renderer since scripts are inline.
        */
       getRuntimeScripts(platform) {
         if (platform.networkMode === "blocked") {
           return {
             headScripts: "",
-            inlineScripts: INLINE_MDX_PLACEHOLDER,
+            inlineScripts: `console.warn('[FrontMCP] Client-side MDX rendering requires network access. Use @frontmcp/ui for SSR.');`,
             isInline: true
           };
         }
         return {
-          headScripts: `
-        <script crossorigin src="${REACT_CDN.react}"></script>
-        <script crossorigin src="${REACT_CDN.reactDom}"></script>
-      `,
+          headScripts: "",
           isInline: false
         };
       }
-      /**
-       * Load React and ReactDOMServer modules.
-       */
-      async loadReact() {
-        if (this.React && this.ReactDOMServer && this.jsxRuntime) {
-          return;
-        }
-        try {
-          const [react, reactDomServer, jsxRuntime] = await Promise.all([
-            import("react"),
-            import("react-dom/server"),
-            import("react/jsx-runtime")
-          ]);
-          this.React = react;
-          this.ReactDOMServer = reactDomServer;
-          this.jsxRuntime = jsxRuntime;
-        } catch {
-          throw new Error("React is required for MdxRenderer. Install react and react-dom: npm install react react-dom");
-        }
-      }
-      /**
-       * Load @mdx-js/mdx evaluate function.
-       *
-       * evaluate() is the cleanest way to run MDX - it combines
-       * compile and run in a single step, handling all the runtime
-       * injection automatically.
-       */
-      async loadMdx() {
-        if (this.mdxEvaluate) {
-          return;
-        }
-        try {
-          const mdx = await import("@mdx-js/mdx");
-          this.mdxEvaluate = mdx.evaluate;
-        } catch {
-          console.warn(
-            "[@frontmcp/ui] @mdx-js/mdx not available. MDX rendering disabled. Install @mdx-js/mdx to enable: npm install @mdx-js/mdx"
-          );
-        }
-      }
     };
-    mdxRenderer = new MdxRenderer();
+    mdxClientRenderer = new MdxClientRenderer();
   }
 });
 
@@ -2060,7 +2009,10 @@ async function loadSwcTransform() {
     return swcTransform;
   }
   try {
-    const swc = await import("@swc/core");
+    const swc = await import(
+      /* webpackIgnore: true */
+      "@swc/core"
+    );
     swcTransform = swc.transform;
     return swcTransform;
   } catch {
@@ -2115,43 +2067,15 @@ async function isSwcAvailable() {
   const transform = await loadSwcTransform();
   return transform !== null;
 }
-async function executeTranspiledCode(code, context = {}) {
-  let React;
-  let jsxRuntime;
-  try {
-    React = await import("react");
-    jsxRuntime = await import("react/jsx-runtime");
-  } catch {
-    throw new Error("React is required for JSX templates. Install react: npm install react react-dom");
-  }
-  const exports = {};
-  const module = { exports };
-  const require2 = (id) => {
-    switch (id) {
-      case "react":
-        return React;
-      case "react/jsx-runtime":
-        return jsxRuntime;
-      case "react/jsx-dev-runtime":
-        return jsxRuntime;
-      default:
-        if (context[id]) {
-          return context[id];
-        }
-        throw new Error(`Module '${id}' not available in JSX template context`);
-    }
-  };
-  try {
-    const fn = new Function("exports", "require", "module", "__filename", "__dirname", "React", "context", code);
-    fn(exports, require2, module, "template.js", "/", React, context);
-    return module.exports["default"] || module.exports[Object.keys(module.exports)[0]] || module.exports;
-  } catch (error) {
-    throw new Error(`Failed to execute transpiled JSX: ${error instanceof Error ? error.message : String(error)}`);
-  }
+async function executeTranspiledCode(_code, _context = {}) {
+  throw new Error(
+    'executeTranspiledCode has been moved to @frontmcp/ui/renderers. Install @frontmcp/ui and import from there: import { executeTranspiledCode } from "@frontmcp/ui/renderers"'
+  );
 }
-async function transpileAndExecute(source, context = {}) {
-  const result = await transpileJsx(source);
-  return executeTranspiledCode(result.code, context);
+async function transpileAndExecute(_source, _context = {}) {
+  throw new Error(
+    'transpileAndExecute has been moved to @frontmcp/ui/renderers. Install @frontmcp/ui and import from there: import { transpileAndExecute } from "@frontmcp/ui/renderers"'
+  );
 }
 var DEFAULT_SWC_OPTIONS, swcTransform;
 var init_transpiler = __esm({
@@ -2183,10 +2107,11 @@ var init_utils2 = __esm({
 var renderers_exports = {};
 __export(renderers_exports, {
   HtmlRenderer: () => HtmlRenderer,
-  MdxRenderer: () => MdxRenderer,
+  MdxClientRenderer: () => MdxClientRenderer,
   RendererRegistry: () => RendererRegistry,
   TranspileCache: () => TranspileCache,
-  buildMdxHydrationScript: () => buildMdxHydrationScript,
+  buildReactCdnUrls: () => buildReactCdnUrls,
+  componentCache: () => componentCache,
   containsJsx: () => containsJsx,
   containsMdxSyntax: () => containsMdxSyntax,
   detectTemplateType: () => detectTemplateType,
@@ -2199,8 +2124,7 @@ __export(renderers_exports, {
   isReactComponent: () => isReactComponent,
   isSwcAvailable: () => isSwcAvailable,
   isTemplateBuilderFunction: () => isTemplateBuilderFunction,
-  mdxRenderer: () => mdxRenderer,
-  renderCache: () => renderCache,
+  mdxClientRenderer: () => mdxClientRenderer,
   rendererRegistry: () => rendererRegistry,
   transpileAndExecute: () => transpileAndExecute,
   transpileCache: () => transpileCache,
@@ -2212,7 +2136,7 @@ var init_renderers = __esm({
     init_cache();
     init_registry();
     init_html_renderer();
-    init_mdx_renderer();
+    init_mdx_client_renderer();
     init_utils2();
   }
 });
@@ -3079,9 +3003,6 @@ var BRIDGE_SCRIPT_TAGS = {
   gemini: `<script>${generatePlatformBundle("gemini")}</script>`
 };
 
-// libs/uipack/src/runtime/mcp-bridge.ts
-var FRONTMCP_BRIDGE_RUNTIME = BRIDGE_SCRIPT_TAGS.universal;
-
 // libs/uipack/src/runtime/csp.ts
 var DEFAULT_CDN_DOMAINS = [
   "https://cdn.jsdelivr.net",
@@ -4527,12 +4448,12 @@ function containsMdxSyntax2(source) {
 }
 async function renderMdxContent(mdxContent, context, mdxComponents) {
   try {
-    const { mdxRenderer: mdxRenderer2 } = await Promise.resolve().then(() => (init_renderers(), renderers_exports));
-    const html = await mdxRenderer2.render(mdxContent, context, { mdxComponents });
+    const { mdxClientRenderer: mdxClientRenderer2 } = await Promise.resolve().then(() => (init_renderers(), renderers_exports));
+    const html = await mdxClientRenderer2.render(mdxContent, context, { mdxComponents });
     return html;
   } catch (error) {
     console.error(
-      "[@frontmcp/ui] MDX rendering failed:",
+      "[@frontmcp/uipack] MDX rendering failed:",
       error instanceof Error ? error.stack || error.message : String(error)
     );
     const escaped = mdxContent.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -4586,13 +4507,17 @@ async function renderToolTemplateAsync(options) {
   if (isReactComponent2(template)) {
     const componentName = template.displayName || template.name || "UnknownComponent";
     try {
+      const reactPkg = "react";
+      const reactDomServerPkg = "react-dom/server";
       const [React, ReactDOMServer] = await Promise.all([
-        import("react").catch(() => {
-          throw new Error("React is required for React component templates. Install react as a dependency.");
+        import(reactPkg).catch(() => {
+          throw new Error(
+            "React is required for React component templates. Either install react as a dependency, or use @frontmcp/ui for React component support."
+          );
         }),
-        import("react-dom/server").catch(() => {
+        import(reactDomServerPkg).catch(() => {
           throw new Error(
-            "react-dom/server is required for React component templates. Install react-dom as a dependency."
+            "react-dom/server is required for React component templates. Either install react-dom as a dependency, or use @frontmcp/ui for React component support."
           );
         })
       ]);
@@ -4696,20 +4621,19 @@ function buildOpenAIMeta(meta, uiConfig) {
   }
   return meta;
 }
-function buildOpenAICSP(csp) {
-  const result = {};
-  if (csp.connectDomains?.length) {
-    result.connect_domains = csp.connectDomains;
-  }
-  if (csp.resourceDomains?.length) {
-    result.resource_domains = csp.resourceDomains;
-  }
-  return result;
-}
 function buildClaudeMeta(meta, uiConfig) {
   if (uiConfig.widgetDescription) {
     meta["claude/widgetDescription"] = uiConfig.widgetDescription;
   }
+  if (uiConfig.displayMode) {
+    meta["claude/displayMode"] = uiConfig.displayMode;
+  }
+  if (uiConfig.widgetAccessible) {
+    meta["claude/widgetAccessible"] = true;
+  }
+  if (uiConfig.prefersBorder !== void 0) {
+    meta["claude/prefersBorder"] = uiConfig.prefersBorder;
+  }
   return meta;
 }
 function buildGeminiMeta(meta, uiConfig) {
@@ -4724,12 +4648,34 @@ function buildIDEMeta(meta, uiConfig) {
   }
   return meta;
 }
+function buildFrontMCPCSP(csp) {
+  const result = {};
+  if (csp.connectDomains?.length) {
+    result.connectDomains = csp.connectDomains;
+  }
+  if (csp.resourceDomains?.length) {
+    result.resourceDomains = csp.resourceDomains;
+  }
+  return result;
+}
 function buildGenericMeta(meta, uiConfig) {
   if (uiConfig.widgetAccessible) {
-    meta["openai/widgetAccessible"] = true;
+    meta["frontmcp/widgetAccessible"] = true;
   }
   if (uiConfig.csp) {
-    meta["openai/widgetCSP"] = buildOpenAICSP(uiConfig.csp);
+    meta["frontmcp/widgetCSP"] = buildFrontMCPCSP(uiConfig.csp);
+  }
+  if (uiConfig.displayMode) {
+    meta["frontmcp/displayMode"] = uiConfig.displayMode;
+  }
+  if (uiConfig.widgetDescription) {
+    meta["frontmcp/widgetDescription"] = uiConfig.widgetDescription;
+  }
+  if (uiConfig.prefersBorder !== void 0) {
+    meta["frontmcp/prefersBorder"] = uiConfig.prefersBorder;
+  }
+  if (uiConfig.sandboxDomain) {
+    meta["frontmcp/domain"] = uiConfig.sandboxDomain;
   }
   return meta;
 }
@@ -4770,14 +4716,6 @@ function buildExtAppsMeta(meta, uiConfig) {
   return meta;
 }
 
-// libs/uipack/src/adapters/response-builder.ts
-init_utils();
-
-// libs/uipack/src/build/index.ts
-init_registry();
-init_renderers();
-init_theme2();
-
 // libs/uipack/src/types/ui-runtime.ts
 function isUIType(value) {
   return typeof value === "string" && ["html", "react", "mdx", "markdown", "auto"].includes(value);
@@ -4814,7 +4752,7 @@ var DEFAULT_CSP_BY_TYPE = {
 };
 
 // libs/uipack/src/build/cdn-resources.ts
-var REACT_CDN2 = {
+var REACT_CDN = {
   url: "https://esm.sh/react@19",
   crossorigin: "anonymous"
 };
@@ -4847,13 +4785,13 @@ function getDefaultAssets(uiType, mode = "cdn") {
     case "react":
       return {
         ...baseAssets,
-        react: REACT_CDN2,
+        react: REACT_CDN,
         reactDom: REACT_DOM_CDN
       };
     case "mdx":
       return {
         ...baseAssets,
-        react: REACT_CDN2,
+        react: REACT_CDN,
         reactDom: REACT_DOM_CDN,
         mdxRuntime: MDX_RUNTIME_CDN,
         markdown: MARKED_CDN
@@ -4871,7 +4809,7 @@ function getDefaultAssets(uiType, mode = "cdn") {
     case "auto":
       return {
         ...baseAssets,
-        react: REACT_CDN2,
+        react: REACT_CDN,
         reactDom: REACT_DOM_CDN,
         markdown: MARKED_CDN,
         handlebars: HANDLEBARS_CDN
@@ -4921,9 +4859,6 @@ function detectFormatFromPath(pathOrUrl) {
   return "html";
 }
 
-// libs/uipack/src/validation/error-box.ts
-init_utils();
-
 // libs/uipack/src/validation/schema-paths.ts
 import { z } from "zod";
 function extractSchemaPaths(schema, prefix = "output", options = {}) {
@@ -5355,7 +5290,7 @@ var URL_CACHE_TTL_MS = 5 * 60 * 1e3;
 
 // libs/uipack/src/dependency/template-processor.ts
 init_handlebars();
-init_mdx_renderer();
+init_mdx_client_renderer();
 init_utils();
 function safeInputToRecord(input) {
   if (input && typeof input === "object" && !Array.isArray(input)) {
@@ -5468,7 +5403,7 @@ async function processTemplate(resolved, options) {
         structuredContent: context.structuredContent,
         helpers: defaultHelpers
       };
-      const html = await mdxRenderer.render(processedContent, templateContext);
+      const html = await mdxClientRenderer.render(processedContent, templateContext);
       return {
         html,
         format: "mdx"
@@ -5563,7 +5498,7 @@ async function generateHash(content) {
   return Math.abs(hash).toString(16).padStart(8, "0");
 }
 async function buildToolWidgetManifest(options) {
-  const { toolName, uiConfig, schema, theme, sampleInput, sampleOutput, outputSchema, inputSchema } = options;
+  const { toolName, uiConfig, schema, theme: _theme, sampleInput, sampleOutput, outputSchema, inputSchema } = options;
   const uiType = isUIType(uiConfig.uiType) ? uiConfig.uiType : detectUIType(uiConfig.template);
   const displayMode = uiConfig.displayMode ?? "inline";
   const bundlingMode = uiConfig.bundlingMode ?? "static";
@@ -5701,7 +5636,7 @@ function ensureRenderersRegistered() {
     return;
   }
   if (!rendererRegistry.has("mdx")) {
-    rendererRegistry.register(mdxRenderer);
+    rendererRegistry.register(mdxClientRenderer);
   }
   renderersInitialized = true;
 }