@frontmcp/ui 0.6.0 → 0.6.2

package/esm/bundler/index.mjs

@@ -0,0 +1,3136 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// libs/ui/src/bundler/types.ts
+var HYBRID_DATA_PLACEHOLDER = "__FRONTMCP_OUTPUT_PLACEHOLDER__";
+var HYBRID_INPUT_PLACEHOLDER = "__FRONTMCP_INPUT_PLACEHOLDER__";
+var DEFAULT_SECURITY_POLICY = {
+  allowedImports: [/^react$/, /^react-dom$/, /^react\/jsx-runtime$/, /^react\/jsx-dev-runtime$/, /^@frontmcp\/ui/],
+  blockedImports: [
+    /^fs$/,
+    /^fs\//,
+    /^net$/,
+    /^child_process$/,
+    /^os$/,
+    /^path$/,
+    /^crypto$/,
+    /^http$/,
+    /^https$/,
+    /^dgram$/,
+    /^dns$/,
+    /^cluster$/,
+    /^readline$/,
+    /^repl$/,
+    /^tls$/,
+    /^vm$/,
+    /^worker_threads$/
+  ],
+  maxBundleSize: 512e3,
+  // 500KB
+  maxTransformTime: 5e3,
+  // 5s
+  noEval: true,
+  noDynamicImports: true,
+  noRequire: true,
+  allowedGlobals: [
+    "console",
+    "Math",
+    "JSON",
+    "Date",
+    "Array",
+    "Object",
+    "String",
+    "Number",
+    "Boolean",
+    "Promise",
+    "Map",
+    "Set",
+    "WeakMap",
+    "WeakSet",
+    "Symbol",
+    "Reflect",
+    "Proxy",
+    "Error",
+    "TypeError",
+    "RangeError",
+    "SyntaxError",
+    "ReferenceError",
+    "parseInt",
+    "parseFloat",
+    "isNaN",
+    "isFinite",
+    "encodeURI",
+    "encodeURIComponent",
+    "decodeURI",
+    "decodeURIComponent",
+    "setTimeout",
+    "clearTimeout",
+    "setInterval",
+    "clearInterval",
+    "atob",
+    "btoa",
+    "Intl",
+    "TextEncoder",
+    "TextDecoder",
+    "URL",
+    "URLSearchParams",
+    "Uint8Array",
+    "Int8Array",
+    "Uint16Array",
+    "Int16Array",
+    "Uint32Array",
+    "Int32Array",
+    "Float32Array",
+    "Float64Array",
+    "BigInt",
+    "BigInt64Array",
+    "BigUint64Array",
+    "ArrayBuffer",
+    "SharedArrayBuffer",
+    "DataView",
+    "queueMicrotask"
+  ]
+};
+var DEFAULT_BUNDLE_OPTIONS = {
+  sourceType: "auto",
+  format: "iife",
+  minify: false,
+  sourceMaps: false,
+  externals: ["react", "react-dom"],
+  jsx: {
+    runtime: "automatic",
+    importSource: "react"
+  },
+  target: "es2020",
+  globalName: "Widget",
+  skipCache: false
+};
+var DEFAULT_BUNDLER_OPTIONS = {
+  defaultSecurity: DEFAULT_SECURITY_POLICY,
+  cache: {
+    maxSize: 100,
+    ttl: 3e5,
+    // 5 minutes
+    disabled: false
+  },
+  verbose: false,
+  esbuildOptions: {}
+};
+var ALL_PLATFORMS = [
+  "openai",
+  "claude",
+  "cursor",
+  "ext-apps",
+  "generic"
+];
+var STATIC_HTML_CDN = {
+  /**
+   * ES modules from esm.sh (React 19, modern platforms)
+   */
+  esm: {
+    react: "https://esm.sh/react@19",
+    reactDom: "https://esm.sh/react-dom@19/client"
+  },
+  /**
+   * UMD builds from cdnjs (React 18.2, Claude only trusts cloudflare)
+   */
+  umd: {
+    react: "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js",
+    reactDom: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
+  },
+  /**
+   * Font CDN URLs
+   */
+  fonts: {
+    preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  }
+};
+function getCdnTypeForPlatform(platform) {
+  if (platform === "claude") return "umd";
+  return "esm";
+}
+var DEFAULT_STATIC_HTML_OPTIONS = {
+  sourceType: "auto",
+  targetPlatform: "auto",
+  minify: true,
+  skipCache: false,
+  rootId: "frontmcp-widget-root",
+  widgetAccessible: false,
+  externals: {
+    react: "cdn",
+    reactDom: "cdn",
+    tailwind: "cdn",
+    frontmcpUi: "inline"
+  },
+  // Universal mode defaults
+  universal: false,
+  contentType: "auto",
+  includeMarkdown: false,
+  includeMdx: false,
+  // Build mode defaults
+  buildMode: "static"
+};
+
+// libs/ui/src/bundler/bundler.ts
+import { buildUIMeta } from "@frontmcp/uipack/adapters";
+import { DEFAULT_THEME, buildThemeCss } from "@frontmcp/uipack/theme";
+import {
+  BundlerCache,
+  createCacheKey,
+  hashContent,
+  validateSource,
+  validateSize,
+  mergePolicy,
+  throwOnViolations,
+  executeDefault,
+  ExecutionError
+} from "@frontmcp/uipack/bundler";
+import { escapeHtml } from "@frontmcp/uipack/utils";
+
+// libs/ui/src/universal/types.ts
+var UNIVERSAL_CDN = {
+  esm: {
+    reactMarkdown: "https://esm.sh/react-markdown@9",
+    mdxReact: "https://esm.sh/@mdx-js/react@3",
+    remarkGfm: "https://esm.sh/remark-gfm@4"
+  }
+  // Note: These libraries are not available on cdnjs
+  // For Claude, we use inline implementations
+};
+function detectContentType(source) {
+  if (typeof source === "function") {
+    return "react";
+  }
+  if (typeof source !== "string") {
+    return "html";
+  }
+  const hasModuleSyntax = /^import\s+/m.test(source) || /^export\s+(default\s+)?/m.test(source) || /^const\s+\w+\s*=\s*\([^)]*\)\s*=>/m.test(source) || // Arrow function components
+  /^function\s+\w+\s*\(/m.test(source);
+  const hasJsxTags = /<[A-Z][a-zA-Z]*/.test(source);
+  const hasMarkdown = /^#{1,6}\s/m.test(source) || /^\*\s/m.test(source) || /^-\s/m.test(source) || /^\d+\.\s/m.test(source);
+  if (hasModuleSyntax && hasJsxTags) {
+    return "react";
+  }
+  if (hasJsxTags && hasMarkdown && !hasModuleSyntax) {
+    return "mdx";
+  }
+  if (hasMarkdown || /\*\*[^*]+\*\*/.test(source) || /\[[^\]]+\]\([^)]+\)/.test(source)) {
+    return "markdown";
+  }
+  if (hasJsxTags && !hasModuleSyntax) {
+    return "mdx";
+  }
+  return "html";
+}
+
+// libs/ui/src/universal/cached-runtime.ts
+import { getMCPBridgeScript } from "@frontmcp/uipack/runtime";
+import { buildUIComponentsRuntime as buildBrowserUIComponents } from "@frontmcp/uipack/build";
+var RUNTIME_PLACEHOLDERS = {
+  /** Placeholder for transpiled component code */
+  COMPONENT_CODE: "/*__FRONTMCP_COMPONENT_CODE__*/",
+  /** Placeholder for data injection */
+  DATA_INJECTION: "/*__FRONTMCP_DATA_INJECTION__*/",
+  /** Placeholder for custom components */
+  CUSTOM_COMPONENTS: "/*__FRONTMCP_CUSTOM_COMPONENTS__*/"
+};
+var runtimeCache = /* @__PURE__ */ new Map();
+var DEFAULT_CACHE_CONFIG = {
+  maxEntries: 10,
+  ttl: 0
+  // Forever by default
+};
+function generateCacheKey(options) {
+  const securityKey = options.contentSecurity ? [
+    options.contentSecurity.allowUnsafeLinks ? "unsafeLinks" : "",
+    options.contentSecurity.allowInlineScripts ? "unsafeScripts" : "",
+    options.contentSecurity.bypassSanitization ? "bypass" : ""
+  ].filter(Boolean).join("+") || "secure" : "secure";
+  return [
+    options.cdnType,
+    options.includeMarkdown ? "md" : "",
+    options.includeMdx ? "mdx" : "",
+    options.minify ? "min" : "",
+    options.includeBridge ? "bridge" : "",
+    securityKey
+  ].filter(Boolean).join(":");
+}
+function buildStoreRuntime() {
+  return `
+// FrontMCP Store (Vendor)
+(function() {
+  var state = {
+    toolName: null,
+    input: null,
+    output: null,
+    content: null,
+    structuredContent: null,
+    loading: false,
+    error: null
+  };
+
+  var listeners = new Set();
+
+  window.__frontmcp = {
+    getState: function() { return state; },
+    setState: function(partial) {
+      state = Object.assign({}, state, partial);
+      listeners.forEach(function(fn) { fn(); });
+    },
+    subscribe: function(fn) {
+      listeners.add(fn);
+      return function() { listeners.delete(fn); };
+    },
+    reset: function() {
+      state = {
+        toolName: null,
+        input: null,
+        output: null,
+        content: null,
+        structuredContent: null,
+        loading: false,
+        error: null
+      };
+    },
+    context: state,
+    setContext: function(ctx) {
+      this.setState(ctx);
+    },
+    // Dynamic mode: update output and re-render
+    updateOutput: function(output) {
+      this.setState({ output: output, loading: false });
+      // Also update the global window variable for compatibility
+      window.__mcpToolOutput = output;
+    },
+    // Dynamic mode: update input and re-render
+    updateInput: function(input) {
+      this.setState({ input: input });
+      window.__mcpToolInput = input;
+    }
+  };
+
+  // React hooks
+  window.useFrontMCPStore = function() {
+    var store = window.__frontmcp;
+    return React.useSyncExternalStore(
+      store.subscribe,
+      store.getState,
+      store.getState
+    );
+  };
+
+  window.useToolOutput = function() {
+    return window.useFrontMCPStore().output;
+  };
+
+  window.useToolInput = function() {
+    return window.useFrontMCPStore().input;
+  };
+
+  window.useContent = function() {
+    return window.useFrontMCPStore().content;
+  };
+
+  // Connect to MCP Bridge for platform data detection
+  function initFromBridge() {
+    // Check for data from mcpBridge (handles OpenAI, ext-apps, etc.)
+    if (window.mcpBridge && window.mcpBridge.toolOutput != null) {
+      window.__frontmcp.setState({
+        output: window.mcpBridge.toolOutput,
+        loading: false
+      });
+    }
+
+    // Subscribe to bridge updates via onToolResult
+    if (window.mcpBridge && window.mcpBridge.onToolResult) {
+      window.mcpBridge.onToolResult(function(result) {
+        window.__frontmcp.updateOutput(result);
+      });
+    }
+  }
+
+  // Initialize from bridge when ready
+  if (window.mcpBridge) {
+    initFromBridge();
+  } else {
+    // Wait for bridge to be ready
+    window.addEventListener('mcp:bridge-ready', initFromBridge);
+  }
+})();
+`;
+}
+function buildRequireShim() {
+  return `
+// Module Require Shim (Vendor)
+(function() {
+  window.__moduleCache = {};
+  window.require = function(moduleName) {
+    if (window.__moduleCache[moduleName]) {
+      return window.__moduleCache[moduleName];
+    }
+
+    var moduleMap = {
+      'react': function() { return window.React; },
+      'react-dom': function() { return window.ReactDOM; },
+      'react-dom/client': function() { return window.ReactDOM; },
+      'react/jsx-runtime': function() { return window.jsx_runtime_namespaceObject; },
+      'react/jsx-dev-runtime': function() { return window.jsx_runtime_namespaceObject; },
+      '@frontmcp/ui': function() { return window.frontmcp_ui_namespaceObject; },
+      '@frontmcp/ui/react': function() { return window.frontmcp_ui_namespaceObject; }
+    };
+
+    var resolver = moduleMap[moduleName];
+    if (resolver) {
+      var mod = resolver();
+      window.__moduleCache[moduleName] = mod;
+      return mod;
+    }
+
+    console.warn('[FrontMCP] Unknown module:', moduleName);
+    return {};
+  };
+})();
+`;
+}
+function buildInlineMarkdownParser(options) {
+  const allowUnsafeLinks = options?.contentSecurity?.bypassSanitization || options?.contentSecurity?.allowUnsafeLinks;
+  return `
+// Inline Markdown Parser (Vendor)
+(function() {
+  // XSS protection settings (configured at build time)
+  // Set to true if contentSecurity.allowUnsafeLinks or bypassSanitization is enabled
+  var __allowUnsafeLinks = ${allowUnsafeLinks ? "true" : "false"};
+
+  // URL scheme validation to prevent XSS via javascript: URLs
+  function isSafeUrl(url) {
+    // If unsafe links are explicitly allowed, skip validation
+    if (__allowUnsafeLinks) return true;
+    if (!url) return false;
+    var lower = url.toLowerCase().trim();
+    return lower.startsWith('http://') ||
+           lower.startsWith('https://') ||
+           lower.startsWith('/') ||
+           lower.startsWith('#') ||
+           lower.startsWith('mailto:');
+  }
+
+  function parseMarkdown(md) {
+    var html = md;
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    html = html.replace(/^######\\s+(.*)$/gm, '<h6>$1</h6>');
+    html = html.replace(/^#####\\s+(.*)$/gm, '<h5>$1</h5>');
+    html = html.replace(/^####\\s+(.*)$/gm, '<h4>$1</h4>');
+    html = html.replace(/^###\\s+(.*)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^##\\s+(.*)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^#\\s+(.*)$/gm, '<h1>$1</h1>');
+    html = html.replace(/\\*\\*\\*(.+?)\\*\\*\\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+    html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');
+    html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+    // Links - validate URL scheme to prevent XSS (unless bypassed)
+    html = html.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, function(match, text, url) {
+      return isSafeUrl(url) ? '<a href="' + url + '">' + text + '</a>' : text;
+    });
+    html = html.replace(/^[-*]\\s+(.*)$/gm, '<li>$1</li>');
+    html = html.replace(/\\n\\n+/g, '</p><p>');
+    html = '<p>' + html + '</p>';
+    return html;
+  }
+
+  window.__frontmcp.parseMarkdown = parseMarkdown;
+
+  window.ReactMarkdown = function(props) {
+    var html = parseMarkdown(props.children || '');
+    return React.createElement('div', {
+      className: 'frontmcp-markdown prose',
+      dangerouslySetInnerHTML: { __html: html }
+    });
+  };
+})();
+`;
+}
+function buildRenderersRuntime(options) {
+  const bypassSanitization = options?.contentSecurity?.bypassSanitization;
+  const allowInlineScripts = bypassSanitization || options?.contentSecurity?.allowInlineScripts;
+  return `
+// Universal Renderers (Vendor)
+(function() {
+  var renderers = {};
+
+  // XSS protection settings (configured at build time)
+  // Set to true if contentSecurity.allowInlineScripts or bypassSanitization is enabled
+  var __allowInlineScripts = ${allowInlineScripts ? "true" : "false"};
+
+  renderers.html = {
+    type: 'html',
+    priority: 0,
+    canHandle: function(c) { return c.type === 'html'; },
+    render: function(c, ctx) {
+      var html = c.source;
+      // Apply XSS protection unless bypassed
+      if (!__allowInlineScripts) {
+        // Remove script tags and event handlers to prevent XSS
+        html = html.replace(/<script[^>]*>[\\s\\S]*?<\\/script>/gi, '');
+        html = html.replace(/\\s+on\\w+\\s*=/gi, ' data-removed-handler=');
+      }
+      return React.createElement('div', {
+        className: 'frontmcp-html-content',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  renderers.markdown = {
+    type: 'markdown',
+    priority: 10,
+    canHandle: function(c) {
+      if (c.type === 'markdown') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /^#{1,6}\\s/m.test(s) || /^[-*]\\s/m.test(s) || /\\*\\*[^*]+\\*\\*/.test(s);
+    },
+    render: function(c, ctx) {
+      if (window.ReactMarkdown) {
+        return React.createElement(window.ReactMarkdown, {
+          children: c.source,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      var html = window.__frontmcp.parseMarkdown ? window.__frontmcp.parseMarkdown(c.source) : c.source;
+      return React.createElement('div', {
+        className: 'frontmcp-markdown prose',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  renderers.react = {
+    type: 'react',
+    priority: 30,
+    canHandle: function(c) { return c.type === 'react' || typeof c.source === 'function'; },
+    render: function(c, ctx) {
+      var Component = c.source;
+      var props = Object.assign({
+        output: ctx.output,
+        input: ctx.input,
+        state: ctx.state,
+        data: ctx.output // Alias for convenience
+      }, c.props);
+      return React.createElement(Component, props);
+    }
+  };
+
+  renderers.mdx = {
+    type: 'mdx',
+    priority: 20,
+    canHandle: function(c) {
+      if (c.type === 'mdx') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /<[A-Z][a-zA-Z]*/.test(s) && /^#{1,6}\\s/m.test(s);
+    },
+    render: function(c, ctx) {
+      if (typeof c.compiledContent === 'function') {
+        var MDXContent = c.compiledContent;
+        return React.createElement(MDXContent, {
+          output: ctx.output,
+          input: ctx.input,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      return React.createElement('div', { className: 'frontmcp-mdx-fallback' }, [
+        React.createElement('div', {
+          key: 'warn',
+          className: 'bg-yellow-50 border border-yellow-200 rounded p-2 mb-2 text-sm text-yellow-800'
+        }, 'MDX requires pre-compilation. Showing raw content.'),
+        React.createElement('pre', {
+          key: 'pre',
+          className: 'bg-gray-100 p-4 rounded text-sm overflow-auto'
+        }, c.source)
+      ]);
+    }
+  };
+
+  var sortedRenderers = [renderers.react, renderers.mdx, renderers.markdown, renderers.html];
+
+  window.__frontmcp.detectRenderer = function(content) {
+    if (content.type && renderers[content.type]) {
+      return renderers[content.type];
+    }
+    for (var i = 0; i < sortedRenderers.length; i++) {
+      if (sortedRenderers[i].canHandle(content)) {
+        return sortedRenderers[i];
+      }
+    }
+    return renderers.html;
+  };
+
+  window.__frontmcp.renderContent = function(content, context) {
+    var renderer = window.__frontmcp.detectRenderer(content);
+    return renderer.render(content, context);
+  };
+
+  window.__frontmcp.renderers = renderers;
+})();
+`;
+}
+function buildUIComponentsRuntime() {
+  return buildBrowserUIComponents();
+}
+function buildUniversalAppRuntime() {
+  return `
+// Universal App (Vendor)
+(function() {
+  var LoadingSpinner = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-loading flex items-center justify-center min-h-[200px]'
+    }, React.createElement('div', {
+      className: 'frontmcp-spinner w-6 h-6 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin'
+    }));
+  };
+
+  var ErrorDisplay = function(props) {
+    return React.createElement('div', {
+      className: 'frontmcp-error bg-red-50 border border-red-200 rounded-lg p-4 text-red-800'
+    }, [
+      React.createElement('div', { key: 'title', className: 'font-medium' }, 'Error'),
+      React.createElement('div', { key: 'msg', className: 'text-sm mt-1' }, props.error)
+    ]);
+  };
+
+  var EmptyState = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-empty text-gray-500 text-center py-8'
+    }, 'No content to display');
+  };
+
+  window.__frontmcp.UniversalApp = function(props) {
+    var state = window.useFrontMCPStore();
+
+    if (state.loading) {
+      return props.fallback || React.createElement(LoadingSpinner);
+    }
+
+    if (state.error) {
+      var ErrorComp = props.errorFallback || ErrorDisplay;
+      return React.createElement(ErrorComp, { error: state.error });
+    }
+
+    var content = props.content || state.content;
+
+    if (!content) {
+      return React.createElement(EmptyState);
+    }
+
+    var context = {
+      output: state.output,
+      input: state.input,
+      state: state,
+      components: props.components || {}
+    };
+
+    var rendered = window.__frontmcp.renderContent(content, context);
+    return React.createElement('div', { className: 'frontmcp-content' }, rendered);
+  };
+
+  window.__frontmcp.LoadingSpinner = LoadingSpinner;
+  window.__frontmcp.ErrorDisplay = ErrorDisplay;
+  window.__frontmcp.EmptyState = EmptyState;
+})();
+`;
+}
+function buildComponentWrapper() {
+  return `
+// Component Execution (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.COMPONENT_CODE}
+})();
+`;
+}
+function buildDataInjectionWrapper() {
+  return `
+// Data Injection (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.DATA_INJECTION}
+})();
+`;
+}
+function buildCustomComponentsWrapper() {
+  return `
+// Custom Components (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.CUSTOM_COMPONENTS}
+})();
+`;
+}
+function buildCdnImports(options) {
+  const parts = [];
+  if (options.cdnType === "esm") {
+    if (options.includeMarkdown) {
+      parts.push(`
+    <script type="module">
+      import ReactMarkdown from '${UNIVERSAL_CDN.esm.reactMarkdown}';
+      window.ReactMarkdown = ReactMarkdown;
+    </script>`);
+    }
+    if (options.includeMdx) {
+      parts.push(`
+    <script type="module">
+      import { MDXProvider } from '${UNIVERSAL_CDN.esm.mdxReact}';
+      window.MDXProvider = MDXProvider;
+    </script>`);
+    }
+  }
+  return parts.join("\n");
+}
+function getCachedRuntime(options, config = {}) {
+  const cacheKey = generateCacheKey(options);
+  const cacheConfig = { ...DEFAULT_CACHE_CONFIG, ...config };
+  const cached = runtimeCache.get(cacheKey);
+  if (cached) {
+    if (cacheConfig.ttl === 0 || Date.now() - cached.cachedAt < cacheConfig.ttl) {
+      return {
+        vendorScript: cached.script,
+        appTemplate: buildAppTemplate(),
+        cdnImports: cached.cdnImports,
+        vendorSize: cached.size,
+        cached: true,
+        cacheKey
+      };
+    }
+    runtimeCache.delete(cacheKey);
+  }
+  const vendorParts = [];
+  if (options.includeBridge) {
+    vendorParts.push(getMCPBridgeScript());
+  }
+  vendorParts.push(buildStoreRuntime(), buildRequireShim());
+  if (options.cdnType === "umd" || options.includeMarkdown) {
+    vendorParts.push(buildInlineMarkdownParser(options));
+  }
+  vendorParts.push(buildRenderersRuntime(options));
+  vendorParts.push(buildUIComponentsRuntime());
+  vendorParts.push(buildUniversalAppRuntime());
+  let vendorScript = vendorParts.join("\n");
+  if (options.minify) {
+    vendorScript = minifyScript(vendorScript);
+  }
+  const cdnImports = buildCdnImports(options);
+  const entry = {
+    script: vendorScript,
+    cdnImports,
+    size: vendorScript.length,
+    cacheKey,
+    cachedAt: Date.now()
+  };
+  if (runtimeCache.size >= cacheConfig.maxEntries) {
+    const oldestKey = runtimeCache.keys().next().value;
+    if (oldestKey) {
+      runtimeCache.delete(oldestKey);
+    }
+  }
+  runtimeCache.set(cacheKey, entry);
+  return {
+    vendorScript,
+    appTemplate: buildAppTemplate(),
+    cdnImports,
+    vendorSize: vendorScript.length,
+    cached: false,
+    cacheKey
+  };
+}
+function buildAppTemplate() {
+  return [buildCustomComponentsWrapper(), buildComponentWrapper(), buildDataInjectionWrapper()].join("\n");
+}
+function minifyScript(script) {
+  return script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/[^\n]*$/gm, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
+}
+function buildAppScript(appTemplate, componentCode, dataInjection, customComponents = "") {
+  return appTemplate.replace(RUNTIME_PLACEHOLDERS.CUSTOM_COMPONENTS, customComponents || "// No custom components").replace(RUNTIME_PLACEHOLDERS.COMPONENT_CODE, componentCode || "// No component code").replace(RUNTIME_PLACEHOLDERS.DATA_INJECTION, dataInjection);
+}
+var DEFAULT_OUTPUT_PLACEHOLDER = "__FRONTMCP_OUTPUT_PLACEHOLDER__";
+var DEFAULT_INPUT_PLACEHOLDER = "__FRONTMCP_INPUT_PLACEHOLDER__";
+function buildDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, options) {
+  const buildMode = options?.buildMode ?? "static";
+  const cdnType = options?.cdnType ?? "esm";
+  switch (buildMode) {
+    case "dynamic":
+      return buildDynamicDataInjectionCode(
+        toolName,
+        input,
+        output,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent,
+        cdnType,
+        options?.dynamicOptions
+      );
+    case "hybrid":
+      return buildHybridDataInjectionCode(
+        toolName,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent,
+        options?.hybridOptions
+      );
+    default:
+      return buildStaticDataInjectionCode(
+        toolName,
+        input,
+        output,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent
+      );
+  }
+}
+function buildStaticDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  if (hasComponent) {
+    return `
+  // Static Mode - Data baked at build time
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    content: {
+      type: 'react',
+      source: window.__frontmcp_component
+    },
+    loading: false,
+    error: null
+  });`;
+  }
+  return `
+  // Static Mode - Data baked at build time
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    content: {
+      type: ${safeJson(contentType)},
+      source: ${safeJson(source)}
+    },
+    loading: false,
+    error: null
+  });`;
+}
+function buildDynamicDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, cdnType, dynamicOptions) {
+  if (cdnType === "umd") {
+    return buildDynamicWithPlaceholdersCode(
+      toolName,
+      structuredContent,
+      contentType,
+      source,
+      hasComponent,
+      dynamicOptions
+    );
+  }
+  return buildDynamicWithSubscriptionCode(
+    toolName,
+    input,
+    output,
+    structuredContent,
+    contentType,
+    source,
+    hasComponent,
+    dynamicOptions
+  );
+}
+function buildDynamicWithPlaceholdersCode(toolName, structuredContent, contentType, source, hasComponent, dynamicOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const outputPlaceholder = DEFAULT_OUTPUT_PLACEHOLDER;
+  const inputPlaceholder = DEFAULT_INPUT_PLACEHOLDER;
+  const includeInitialData = dynamicOptions?.includeInitialData ?? true;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  return `
+  // Dynamic Mode - Placeholder-based for non-OpenAI platforms
+  var __outputRaw = "${outputPlaceholder}";
+  var __inputRaw = "${inputPlaceholder}";
+  var __output = null;
+  var __input = null;
+  var __error = null;
+  var __outputNotReplaced = false;
+  var __includeInitialData = ${includeInitialData};
+
+  // Parse output placeholder
+  if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") {
+    try { __output = JSON.parse(__outputRaw); } catch (e) {
+      console.warn('[FrontMCP] Failed to parse output:', e);
+      __error = 'Failed to parse output data';
+    }
+  } else if (__outputRaw === "${outputPlaceholder}") {
+    __outputNotReplaced = true;
+  }
+
+  // Parse input placeholder
+  if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") {
+    try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); }
+  }
+
+  // Handle placeholder not replaced - show error if expecting initial data
+  if (__outputNotReplaced && __includeInitialData) {
+    __error = 'No data provided. The output placeholder was not replaced.';
+  }
+
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: __input,
+    output: __output,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: !__includeInitialData && __output === null && !__error,
+    error: __error
+  });`;
+}
+function buildDynamicWithSubscriptionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, dynamicOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const includeInitialData = dynamicOptions?.includeInitialData ?? true;
+  const subscribeToUpdates = dynamicOptions?.subscribeToUpdates ?? true;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  const initialState = includeInitialData ? `{
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: false,
+    error: null
+  }` : `{
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: null,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: true,
+    error: null
+  }`;
+  const subscriptionBlock = subscribeToUpdates ? `
+  // Subscribe to platform tool result events
+  (function() {
+    function subscribeToUpdates() {
+      if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) {
+        window.openai.canvas.onToolResult(function(result) {
+          window.__frontmcp.updateOutput(result);
+          window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result }));
+        });
+      }
+    }
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', subscribeToUpdates);
+    } else {
+      subscribeToUpdates();
+    }
+  })();` : "";
+  return `
+  // Dynamic Mode - OpenAI Subscription
+  window.__frontmcp.setState(${initialState});
+  ${subscriptionBlock}`;
+}
+function buildHybridDataInjectionCode(toolName, structuredContent, contentType, source, hasComponent, hybridOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const outputPlaceholder = hybridOptions?.placeholder ?? DEFAULT_OUTPUT_PLACEHOLDER;
+  const inputPlaceholder = hybridOptions?.inputPlaceholder ?? DEFAULT_INPUT_PLACEHOLDER;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  return `
+  // Hybrid Mode - Placeholders replaced at runtime
+  var __outputRaw = "${outputPlaceholder}";
+  var __inputRaw = "${inputPlaceholder}";
+  var __output = null;
+  var __input = null;
+  var __error = null;
+  var __outputNotReplaced = false;
+
+  // Parse output placeholder
+  if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") {
+    try { __output = JSON.parse(__outputRaw); } catch (e) {
+      console.warn('[FrontMCP] Failed to parse output:', e);
+      __error = 'Failed to parse output data';
+    }
+  } else if (__outputRaw === "${outputPlaceholder}") {
+    // Placeholder not replaced - no data was injected
+    __outputNotReplaced = true;
+  }
+
+  // Parse input placeholder
+  if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") {
+    try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); }
+  }
+
+  // Set error if output placeholder was not replaced (no data provided)
+  if (__outputNotReplaced) {
+    __error = 'No data provided. The output placeholder was not replaced.';
+  }
+
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: __input,
+    output: __output,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: false,
+    error: __error
+  });`;
+}
+function buildComponentCode(transpiledCode) {
+  return `
+  // CommonJS module shim
+  var module = { exports: {} };
+  var exports = module.exports;
+
+  // Execute transpiled component
+  ${transpiledCode}
+
+  // Capture component
+  window.__frontmcp_component = module.exports.default || module.exports;`;
+}
+
+// libs/ui/src/bundler/bundler.ts
+import {
+  buildCDNScriptTag,
+  CLOUDFLARE_CDN,
+  buildUIComponentsRuntime as buildFallbackUIComponents
+} from "@frontmcp/uipack/build";
+
+// libs/ui/src/bundler/browser-components.ts
+import * as path from "path";
+var cachedBrowserComponents = null;
+var buildingPromise = null;
+function getComponentsEntrySource() {
+  return `
+// Browser Components Entry Point
+// This gets transpiled by esbuild to create browser-compatible code
+
+import {
+  // Card styles
+  CARD_VARIANTS,
+  CARD_SIZES,
+  // Button styles
+  BUTTON_VARIANTS,
+  BUTTON_SIZES,
+  BUTTON_ICON_SIZES,
+  BUTTON_BASE_CLASSES,
+  LOADING_SPINNER,
+  // Badge styles
+  BADGE_VARIANTS,
+  BADGE_SIZES,
+  BADGE_DOT_SIZES,
+  BADGE_DOT_VARIANTS,
+  // Alert styles
+  ALERT_VARIANTS,
+  ALERT_BASE_CLASSES,
+  ALERT_ICONS,
+  CLOSE_ICON,
+  // Utility
+  cn,
+} from '@frontmcp/uipack/styles';
+
+// Re-export for the IIFE
+export {
+  CARD_VARIANTS,
+  CARD_SIZES,
+  BUTTON_VARIANTS,
+  BUTTON_SIZES,
+  BUTTON_ICON_SIZES,
+  BUTTON_BASE_CLASSES,
+  LOADING_SPINNER,
+  BADGE_VARIANTS,
+  BADGE_SIZES,
+  BADGE_DOT_SIZES,
+  BADGE_DOT_VARIANTS,
+  ALERT_VARIANTS,
+  ALERT_BASE_CLASSES,
+  ALERT_ICONS,
+  CLOSE_ICON,
+  cn,
+};
+
+// Card Component
+export function Card(props: any) {
+  const {
+    title,
+    subtitle,
+    headerActions,
+    footer,
+    variant = 'default',
+    size = 'md',
+    className,
+    id,
+    clickable,
+    href,
+    children,
+  } = props;
+
+  const variantClasses = CARD_VARIANTS[variant] || CARD_VARIANTS.default;
+  const sizeClasses = CARD_SIZES[size] || CARD_SIZES.md;
+  const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';
+  const allClasses = cn(variantClasses, sizeClasses, clickableClasses, className);
+
+  const hasHeader = title || subtitle || headerActions;
+
+  const headerElement = hasHeader ? React.createElement('div', {
+    className: 'flex items-start justify-between mb-4'
+  }, [
+    React.createElement('div', { key: 'titles' }, [
+      title && React.createElement('h3', {
+        key: 'title',
+        className: 'text-lg font-semibold text-text-primary'
+      }, title),
+      subtitle && React.createElement('p', {
+        key: 'subtitle',
+        className: 'text-sm text-text-secondary mt-1'
+      }, subtitle)
+    ]),
+    headerActions && React.createElement('div', {
+      key: 'actions',
+      className: 'flex items-center gap-2'
+    }, headerActions)
+  ]) : null;
+
+  const footerElement = footer ? React.createElement('div', {
+    className: 'mt-4 pt-4 border-t border-divider'
+  }, footer) : null;
+
+  const content = React.createElement(React.Fragment, null, headerElement, children, footerElement);
+
+  if (href) {
+    return React.createElement('a', { href, className: allClasses, id }, content);
+  }
+
+  return React.createElement('div', { className: allClasses, id }, content);
+}
+
+// Button Component
+export function Button(props: any) {
+  const {
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    iconPosition = 'left',
+    icon,
+    iconOnly = false,
+    type = 'button',
+    className,
+    onClick,
+    children,
+  } = props;
+
+  const variantClasses = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.primary;
+  const sizeClasses = iconOnly
+    ? (BUTTON_ICON_SIZES[size] || BUTTON_ICON_SIZES.md)
+    : (BUTTON_SIZES[size] || BUTTON_SIZES.md);
+
+  const disabledClasses = (disabled || loading) ? 'opacity-50 cursor-not-allowed' : '';
+  const widthClasses = fullWidth ? 'w-full' : '';
+
+  const allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
+
+  const iconElement = icon ? React.createElement('span', {
+    className: iconPosition === 'left' ? 'mr-2' : 'ml-2'
+  }, icon) : null;
+
+  const loadingSpinner = loading ? React.createElement('span', {
+    className: 'mr-2',
+    dangerouslySetInnerHTML: { __html: LOADING_SPINNER }
+  }) : null;
+
+  return React.createElement('button', {
+    type,
+    className: allClasses,
+    disabled: disabled || loading,
+    onClick
+  },
+    loadingSpinner,
+    !loading && icon && iconPosition === 'left' ? iconElement : null,
+    !iconOnly ? children : null,
+    !loading && icon && iconPosition === 'right' ? iconElement : null
+  );
+}
+
+// Badge Component
+export function Badge(props: any) {
+  const {
+    variant = 'default',
+    size = 'md',
+    pill = false,
+    icon,
+    dot = false,
+    className,
+    removable = false,
+    onRemove,
+    children,
+  } = props;
+
+  // Handle dot badge
+  if (dot) {
+    const dotSizeClasses = BADGE_DOT_SIZES[size] || BADGE_DOT_SIZES.md;
+    const dotVariantClasses = BADGE_DOT_VARIANTS[variant] || BADGE_DOT_VARIANTS.default;
+    const dotClasses = cn('inline-block rounded-full', dotSizeClasses, dotVariantClasses, className);
+    const label = typeof children === 'string' ? children : undefined;
+    return React.createElement('span', {
+      className: dotClasses,
+      'aria-label': label,
+      title: label
+    });
+  }
+
+  const variantClasses = BADGE_VARIANTS[variant] || BADGE_VARIANTS.default;
+  const sizeClasses = BADGE_SIZES[size] || BADGE_SIZES.md;
+
+  const baseClasses = cn(
+    'inline-flex items-center font-medium',
+    pill ? 'rounded-full' : 'rounded-md',
+    variantClasses,
+    sizeClasses,
+    className
+  );
+
+  const closeButton = removable ? React.createElement('button', {
+    type: 'button',
+    className: 'ml-1.5 -mr-1 hover:opacity-70 transition-opacity',
+    'aria-label': 'Remove',
+    onClick: onRemove
+  }, React.createElement('svg', {
+    className: 'w-3 h-3',
+    fill: 'none',
+    stroke: 'currentColor',
+    viewBox: '0 0 24 24'
+  }, React.createElement('path', {
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '2',
+    d: 'M6 18L18 6M6 6l12 12'
+  }))) : null;
+
+  return React.createElement('span', { className: baseClasses },
+    icon ? React.createElement('span', { className: 'mr-1' }, icon) : null,
+    children,
+    closeButton
+  );
+}
+
+// Alert Component
+export function Alert(props: any) {
+  const {
+    variant = 'info',
+    title,
+    icon,
+    showIcon = true,
+    dismissible = false,
+    onDismiss,
+    className,
+    children,
+  } = props;
+
+  const variantStyles = ALERT_VARIANTS[variant] || ALERT_VARIANTS.info;
+  const allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className);
+
+  const iconContent = icon || (showIcon ? React.createElement('span', {
+    className: cn('flex-shrink-0', variantStyles.icon),
+    dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] || ALERT_ICONS.info }
+  }) : null);
+
+  const dismissButton = dismissible ? React.createElement('button', {
+    type: 'button',
+    className: 'flex-shrink-0 ml-3 hover:opacity-70 transition-opacity',
+    'aria-label': 'Dismiss',
+    onClick: onDismiss
+  }, React.createElement('span', {
+    dangerouslySetInnerHTML: { __html: CLOSE_ICON }
+  })) : null;
+
+  return React.createElement('div', { className: allClasses, role: 'alert' },
+    React.createElement('div', { className: 'flex' },
+      iconContent ? React.createElement('div', { className: 'flex-shrink-0 mr-3' }, iconContent) : null,
+      React.createElement('div', { className: 'flex-1' },
+        title ? React.createElement('h4', { className: 'font-semibold mb-1' }, title) : null,
+        React.createElement('div', { className: 'text-sm' }, children)
+      ),
+      dismissButton
+    )
+  );
+}
+`;
+}
+function getBrowserRuntimeWrapper() {
+  return `
+// Assign components to window for require() shim
+window.Card = Card;
+window.Button = Button;
+window.Badge = Badge;
+window.Alert = Alert;
+
+// Build the namespace object for @frontmcp/ui/react imports
+window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, {
+  // Hooks
+  useToolOutput: window.useToolOutput,
+  useToolInput: window.useToolInput,
+  useMcpBridgeContext: function() { return window.__frontmcp.context; },
+  useMcpBridge: function() { return window.__frontmcp.context; },
+  useCallTool: function() {
+    return function(name, args) {
+      if (window.__frontmcp.context && window.__frontmcp.context.callTool) {
+        return window.__frontmcp.context.callTool(name, args);
+      }
+      console.warn('[FrontMCP] callTool not available');
+      return Promise.resolve(null);
+    };
+  },
+  useTheme: function() { return window.__frontmcp.theme || 'light'; },
+  useDisplayMode: function() { return window.__frontmcp.displayMode || 'embedded'; },
+  useHostContext: function() { return window.__frontmcp.hostContext || {}; },
+  useCapability: function(cap) { return window.__frontmcp.capabilities && window.__frontmcp.capabilities[cap] || false; },
+  useStructuredContent: function() { return window.__frontmcp.getState().structuredContent; },
+  useToolCalls: function() { return []; },
+  useSendMessage: function() { return function() { return Promise.resolve(); }; },
+  useOpenLink: function() { return function() {}; },
+
+  // Components
+  Card: window.Card,
+  Badge: window.Badge,
+  Button: window.Button,
+  Alert: window.Alert,
+
+  // Re-export React for convenience
+  createElement: React.createElement,
+  Fragment: React.Fragment,
+  useState: React.useState,
+  useEffect: React.useEffect,
+  useCallback: React.useCallback,
+  useMemo: React.useMemo,
+  useRef: React.useRef,
+  useContext: React.useContext
+});
+`;
+}
+async function buildWithEsbuild() {
+  try {
+    const esbuild = await import("esbuild");
+    const stylesPath = __require.resolve("@frontmcp/uipack/styles");
+    const entrySource = getComponentsEntrySource();
+    const result = await esbuild.build({
+      stdin: {
+        contents: entrySource,
+        loader: "tsx",
+        resolveDir: path.dirname(stylesPath)
+      },
+      bundle: true,
+      format: "iife",
+      globalName: "__frontmcp_components",
+      target: "es2020",
+      minify: false,
+      write: false,
+      external: ["react", "react-dom"],
+      define: {
+        React: "window.React"
+      },
+      platform: "browser"
+    });
+    if (result.outputFiles && result.outputFiles.length > 0) {
+      let code = result.outputFiles[0].text;
+      code += "\n" + getBrowserRuntimeWrapper();
+      return code;
+    }
+    throw new Error("No output from esbuild");
+  } catch (error) {
+    console.warn(
+      `[FrontMCP] esbuild bundle failed, falling back to manual components: ${error instanceof Error ? error.message : String(error)}`
+    );
+    throw error;
+  }
+}
+async function getBrowserComponents() {
+  if (cachedBrowserComponents !== null) {
+    return cachedBrowserComponents;
+  }
+  if (buildingPromise !== null) {
+    return buildingPromise;
+  }
+  buildingPromise = buildWithEsbuild().then((code) => {
+    cachedBrowserComponents = code;
+    buildingPromise = null;
+    return code;
+  }).catch((error) => {
+    buildingPromise = null;
+    throw error;
+  });
+  return buildingPromise;
+}
+
+// libs/ui/src/bundler/bundler.ts
+import { SecurityError, ExecutionError as ExecutionError2 } from "@frontmcp/uipack/bundler";
+var esbuildTransform = null;
+async function loadEsbuild() {
+  if (esbuildTransform !== null) {
+    return esbuildTransform;
+  }
+  try {
+    const esbuild = await import("esbuild");
+    esbuildTransform = esbuild.transform;
+    return esbuildTransform;
+  } catch {
+    try {
+      const swc = await import("@swc/core");
+      esbuildTransform = async (source, options) => {
+        const opts = options;
+        const result = await swc.transform(source, {
+          jsc: {
+            parser: {
+              syntax: "typescript",
+              tsx: opts.loader === "tsx" || opts.loader === "jsx"
+            },
+            transform: {
+              react: {
+                runtime: "automatic",
+                development: false
+              }
+            },
+            target: "es2020",
+            minify: opts.minify ? { compress: true, mangle: true } : void 0
+          },
+          module: {
+            type: "commonjs"
+          },
+          sourceMaps: opts.sourcemap ? true : false
+        });
+        return { code: result.code, map: result.map };
+      };
+      return esbuildTransform;
+    } catch {
+      console.warn(
+        "[@frontmcp/ui/bundler] Neither esbuild nor @swc/core available. Install esbuild for best performance: npm install esbuild"
+      );
+      return null;
+    }
+  }
+}
+function sanitizeRootId(rootId) {
+  const safeId = rootId.replace(/[^a-zA-Z0-9_-]/g, "");
+  if (safeId !== rootId) {
+    console.warn("[FrontMCP] rootId sanitized:", { original: rootId, sanitized: safeId });
+  }
+  return safeId || "frontmcp-root";
+}
+function sanitizeCss(css) {
+  return css.replace(/<\/style>/gi, "\\3c/style\\3e");
+}
+var InMemoryBundler = class {
+  cache;
+  options;
+  defaultSecurity;
+  constructor(options = {}) {
+    this.options = {
+      ...DEFAULT_BUNDLER_OPTIONS,
+      ...options,
+      cache: {
+        ...DEFAULT_BUNDLER_OPTIONS.cache,
+        ...options.cache
+      }
+    };
+    this.cache = new BundlerCache({
+      maxSize: this.options.cache.maxSize,
+      ttl: this.options.cache.ttl
+    });
+    this.defaultSecurity = mergePolicy(options.defaultSecurity);
+  }
+  /**
+   * Bundle source code.
+   *
+   * @param options - Bundle options
+   * @returns Bundle result
+   */
+  async bundle(options) {
+    const startTime = performance.now();
+    const opts = this.mergeOptions(options);
+    if (!opts.skipCache && !this.options.cache.disabled) {
+      const cacheKey = options.cacheKey ?? createCacheKey(options.source, opts);
+      const cached = this.cache.get(cacheKey);
+      if (cached) {
+        return {
+          ...cached,
+          cached: true,
+          metrics: {
+            ...cached.metrics,
+            cacheTime: performance.now() - startTime
+          }
+        };
+      }
+    }
+    const security = mergePolicy(options.security ?? this.defaultSecurity);
+    const violations = validateSource(options.source, security);
+    throwOnViolations(violations);
+    const sourceType = opts.sourceType === "auto" ? this.detectSourceType(options.source) : opts.sourceType;
+    const transformStart = performance.now();
+    const transformed = await this.transform(options.source, sourceType, opts);
+    const transformTime = performance.now() - transformStart;
+    const sizeViolation = validateSize(transformed.code.length, security);
+    if (sizeViolation) {
+      throwOnViolations([sizeViolation]);
+    }
+    const hash = hashContent(transformed.code);
+    const result = {
+      code: transformed.code,
+      hash,
+      cached: false,
+      size: transformed.code.length,
+      map: transformed.map,
+      metrics: {
+        transformTime,
+        bundleTime: 0,
+        // No separate bundle step for transform-only
+        totalTime: performance.now() - startTime
+      },
+      sourceType,
+      format: opts.format
+    };
+    if (!this.options.cache.disabled) {
+      const cacheKey = options.cacheKey ?? createCacheKey(options.source, opts);
+      this.cache.set(cacheKey, result);
+    }
+    return result;
+  }
+  /**
+   * Bundle and execute for SSR.
+   *
+   * @param options - SSR bundle options
+   * @returns SSR result with rendered HTML
+   */
+  async bundleSSR(options) {
+    const startTime = performance.now();
+    const bundleResult = await this.bundle({
+      ...options,
+      format: "cjs"
+      // CommonJS for execution
+    });
+    let React;
+    let ReactDOMServer;
+    try {
+      React = await import("react");
+      ReactDOMServer = await import("react-dom/server");
+    } catch {
+      throw new Error("React and react-dom/server are required for SSR. Install them: npm install react react-dom");
+    }
+    const renderStart = performance.now();
+    const Component = await executeDefault(bundleResult.code, {
+      React,
+      security: mergePolicy(options.security ?? this.defaultSecurity)
+    });
+    let html;
+    try {
+      const element = React.createElement(Component, options.context ?? {});
+      html = ReactDOMServer.renderToString(element);
+    } catch (error) {
+      throw new ExecutionError(
+        `SSR rendering failed: ${error instanceof Error ? error.message : String(error)}`,
+        error
+      );
+    }
+    const renderTime = performance.now() - renderStart;
+    let hydrationScript;
+    if (options.includeHydration) {
+      hydrationScript = this.buildHydrationScript(bundleResult.code, options.context);
+    }
+    return {
+      ...bundleResult,
+      html,
+      hydrationScript,
+      metrics: {
+        ...bundleResult.metrics,
+        totalTime: performance.now() - startTime
+      },
+      ssrMetrics: {
+        renderTime
+      }
+    };
+  }
+  /**
+   * Bundle and execute code, returning the exports.
+   *
+   * @param options - Bundle options
+   * @param context - Execution context
+   * @returns Exported value
+   */
+  async bundleAndExecute(options, context) {
+    const result = await this.bundle({
+      ...options,
+      format: "cjs"
+      // CommonJS for execution
+    });
+    let React;
+    try {
+      React = await import("react");
+    } catch {
+    }
+    return executeDefault(result.code, {
+      React,
+      globals: context,
+      security: mergePolicy(options.security ?? this.defaultSecurity)
+    });
+  }
+  /**
+   * Bundle a component to a self-contained static HTML document.
+   *
+   * Creates a complete HTML page with:
+   * - React runtime (CDN or inline based on platform)
+   * - FrontMCP UI hooks and components (always inline)
+   * - Tool data injection (input/output)
+   * - Transpiled component code
+   * - Client-side rendering via createRoot
+   *
+   * @param options - Static HTML options
+   * @returns Static HTML result with complete document
+   *
+   * @example
+   * ```typescript
+   * const result = await bundler.bundleToStaticHTML({
+   *   source: `
+   *     import { Card, useToolOutput } from '@frontmcp/ui/react';
+   *     export default function Weather() {
+   *       const output = useToolOutput();
+   *       return <Card title="Weather">{output?.temperature}°F</Card>;
+   *     }
+   *   `,
+   *   toolName: 'get_weather',
+   *   output: { temperature: 72 },
+   * });
+   *
+   * // result.html contains the complete HTML document
+   * ```
+   */
+  async bundleToStaticHTML(options) {
+    const startTime = performance.now();
+    const opts = this.mergeStaticHTMLOptions(options);
+    const platform = opts.targetPlatform === "auto" ? "generic" : opts.targetPlatform;
+    const cdnType = getCdnTypeForPlatform(platform);
+    if (opts.universal) {
+      return this.bundleToStaticHTMLUniversal(options, opts, platform, cdnType, startTime);
+    }
+    const bundleResult = await this.bundle({
+      source: options.source,
+      sourceType: opts.sourceType,
+      format: "cjs",
+      minify: opts.minify,
+      sourceMaps: false,
+      externals: ["react", "react-dom", "react/jsx-runtime", "@frontmcp/ui", "@frontmcp/ui/react"],
+      security: opts.security,
+      skipCache: opts.skipCache
+    });
+    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme });
+    const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+    const frontmcpRuntime = await this.buildFrontMCPRuntime();
+    const dataScript = this.buildDataInjectionScript(
+      opts.toolName,
+      opts.input,
+      opts.output,
+      opts.structuredContent,
+      opts.buildMode,
+      cdnType,
+      opts.dynamicOptions,
+      opts.hybridOptions
+    );
+    const componentScript = this.buildComponentRenderScript(bundleResult.code, opts.rootId, cdnType);
+    const html = this.assembleStaticHTML({
+      title: opts.title || `${opts.toolName} - Widget`,
+      head,
+      reactRuntime,
+      frontmcpRuntime,
+      dataScript,
+      componentScript,
+      rootId: opts.rootId,
+      cdnType
+    });
+    const hash = hashContent(html);
+    const dataPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.placeholder ?? HYBRID_DATA_PLACEHOLDER : void 0;
+    const inputPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER : void 0;
+    return {
+      html,
+      componentCode: bundleResult.code,
+      metrics: {
+        ...bundleResult.metrics,
+        totalTime: performance.now() - startTime
+      },
+      hash,
+      size: html.length,
+      cached: bundleResult.cached,
+      sourceType: bundleResult.sourceType,
+      targetPlatform: platform,
+      buildMode: opts.buildMode,
+      dataPlaceholder,
+      inputPlaceholder
+    };
+  }
+  /**
+   * Bundle a component to static HTML for all target platforms at once.
+   *
+   * This method is optimized for efficiency:
+   * - Transpiles the component source code only once
+   * - Generates platform-specific HTML variations from the shared transpiled code
+   * - Returns complete platform metadata ready for MCP responses
+   *
+   * @param options - Multi-platform build options
+   * @returns Multi-platform build result with all platforms
+   *
+   * @example
+   * ```typescript
+   * const result = await bundler.bundleToStaticHTMLAll({
+   *   source: `
+   *     import { Card, useToolOutput } from '@frontmcp/ui/react';
+   *     export default function Weather() {
+   *       const output = useToolOutput();
+   *       return <Card title="Weather">{output?.temperature}°F</Card>;
+   *     }
+   *   `,
+   *   toolName: 'get_weather',
+   *   output: { temperature: 72 },
+   * });
+   *
+   * // Access platform-specific results
+   * const openaiHtml = result.platforms.openai.html;
+   * const claudeHtml = result.platforms.claude.html;
+   *
+   * // Get metadata for MCP response
+   * const openaiMeta = result.platforms.openai.meta;
+   * ```
+   */
+  async bundleToStaticHTMLAll(options) {
+    const startTime = performance.now();
+    const opts = this.mergeStaticHTMLOptions(options);
+    const platforms = options.platforms ?? [...ALL_PLATFORMS];
+    const transpileStart = performance.now();
+    let transpiledCode = null;
+    let bundleResult = null;
+    const isUniversal = opts.universal;
+    const rawContentType = options.contentType ?? "auto";
+    const contentType = isUniversal ? rawContentType === "auto" ? detectContentType(options.source) : rawContentType : "react";
+    if (contentType === "react" || !isUniversal) {
+      bundleResult = await this.bundle({
+        source: options.source,
+        sourceType: opts.sourceType,
+        format: "cjs",
+        minify: opts.minify,
+        sourceMaps: false,
+        externals: ["react", "react-dom", "react/jsx-runtime", "@frontmcp/ui", "@frontmcp/ui/react"],
+        security: opts.security,
+        skipCache: opts.skipCache
+      });
+      transpiledCode = bundleResult.code;
+    }
+    const transpileTime = performance.now() - transpileStart;
+    const generationStart = performance.now();
+    const platformResults = {};
+    for (const platform of platforms) {
+      const platformResult = await this.buildForPlatform({
+        options,
+        opts,
+        platform,
+        transpiledCode,
+        bundleResult,
+        contentType,
+        isUniversal
+      });
+      platformResults[platform] = platformResult;
+    }
+    const generationTime = performance.now() - generationStart;
+    return {
+      platforms: platformResults,
+      sharedComponentCode: transpiledCode ?? "",
+      metrics: {
+        transpileTime,
+        generationTime,
+        totalTime: performance.now() - startTime
+      },
+      cached: bundleResult?.cached ?? false
+    };
+  }
+  /**
+   * Build for a specific platform with pre-transpiled code.
+   * Internal helper for bundleToStaticHTMLAll.
+   */
+  async buildForPlatform(params) {
+    const { options, opts, platform, transpiledCode, bundleResult, contentType, isUniversal } = params;
+    const cdnType = getCdnTypeForPlatform(platform);
+    const buildStart = performance.now();
+    let html;
+    let componentCode;
+    if (isUniversal) {
+      const shouldIncludeBridge = opts.buildMode === "dynamic" || opts.buildMode === "hybrid";
+      const cachedRuntime = getCachedRuntime({
+        cdnType,
+        includeMarkdown: opts.includeMarkdown || contentType === "markdown",
+        includeMdx: opts.includeMdx || contentType === "mdx",
+        minify: opts.minify,
+        includeBridge: shouldIncludeBridge
+      });
+      const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : "";
+      const dataInjectionStr = buildDataInjectionCode(
+        opts.toolName,
+        opts.input,
+        opts.output,
+        opts.structuredContent,
+        contentType,
+        transpiledCode ? null : options.source,
+        transpiledCode !== null,
+        {
+          buildMode: opts.buildMode,
+          cdnType,
+          dynamicOptions: opts.dynamicOptions,
+          hybridOptions: opts.hybridOptions
+        }
+      );
+      const appScript = buildAppScript(
+        cachedRuntime.appTemplate,
+        componentCodeStr,
+        dataInjectionStr,
+        opts.customComponents ?? ""
+      );
+      const head = this.buildStaticHTMLHead({
+        externals: opts.externals,
+        customCss: opts.customCss,
+        theme: opts.theme
+      });
+      const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+      const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType);
+      html = this.assembleUniversalStaticHTMLCached({
+        title: opts.title || `${opts.toolName} - Widget`,
+        head,
+        reactRuntime,
+        cdnImports: cachedRuntime.cdnImports,
+        vendorScript: cachedRuntime.vendorScript,
+        appScript,
+        renderScript,
+        rootId: opts.rootId,
+        cdnType
+      });
+      componentCode = transpiledCode ?? appScript;
+    } else {
+      if (!transpiledCode) {
+        throw new Error("Failed to transpile component source");
+      }
+      const head = this.buildStaticHTMLHead({
+        externals: opts.externals,
+        customCss: opts.customCss,
+        theme: opts.theme
+      });
+      const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+      const frontmcpRuntime = await this.buildFrontMCPRuntime();
+      const dataScript = this.buildDataInjectionScript(
+        opts.toolName,
+        opts.input,
+        opts.output,
+        opts.structuredContent,
+        opts.buildMode,
+        cdnType,
+        opts.dynamicOptions,
+        opts.hybridOptions
+      );
+      const componentScript = this.buildComponentRenderScript(transpiledCode, opts.rootId, cdnType);
+      html = this.assembleStaticHTML({
+        title: opts.title || `${opts.toolName} - Widget`,
+        head,
+        reactRuntime,
+        frontmcpRuntime,
+        dataScript,
+        componentScript,
+        rootId: opts.rootId,
+        cdnType
+      });
+      componentCode = transpiledCode;
+    }
+    const hash = hashContent(html);
+    const meta = buildUIMeta({
+      uiConfig: {
+        template: () => html,
+        widgetAccessible: opts.widgetAccessible
+      },
+      platformType: this.mapTargetPlatformToAIPlatform(platform),
+      html
+    });
+    const dataPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.placeholder ?? HYBRID_DATA_PLACEHOLDER : void 0;
+    const inputPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER : void 0;
+    return {
+      html,
+      componentCode,
+      metrics: bundleResult?.metrics ?? {
+        transformTime: 0,
+        bundleTime: 0,
+        totalTime: performance.now() - buildStart
+      },
+      hash,
+      size: html.length,
+      cached: bundleResult?.cached ?? false,
+      sourceType: bundleResult?.sourceType ?? opts.sourceType,
+      targetPlatform: platform,
+      universal: isUniversal,
+      contentType: isUniversal ? contentType : void 0,
+      buildMode: opts.buildMode,
+      dataPlaceholder,
+      inputPlaceholder,
+      meta
+    };
+  }
+  /**
+   * Map TargetPlatform to AIPlatformType for metadata generation.
+   */
+  mapTargetPlatformToAIPlatform(platform) {
+    switch (platform) {
+      case "openai":
+        return "openai";
+      case "claude":
+        return "claude";
+      case "cursor":
+        return "cursor";
+      case "ext-apps":
+        return "ext-apps";
+      case "generic":
+        return "generic-mcp";
+      default:
+        return "generic-mcp";
+    }
+  }
+  /**
+   * Bundle to static HTML with universal rendering mode.
+   * Uses the universal renderer that can handle multiple content types.
+   *
+   * Optimization: Uses cached runtime (vendor chunk) to avoid rebuilding
+   * static code on every request. Only the user's component is transpiled.
+   */
+  async bundleToStaticHTMLUniversal(options, opts, platform, cdnType, startTime) {
+    let contentType;
+    const rawContentType = options.contentType ?? "auto";
+    if (rawContentType === "auto") {
+      contentType = detectContentType(options.source);
+    } else {
+      contentType = rawContentType;
+    }
+    let transpiledCode = null;
+    let transformTime = 0;
+    if (contentType === "react") {
+      const bundleResult = await this.bundle({
+        source: options.source,
+        sourceType: opts.sourceType,
+        format: "cjs",
+        minify: opts.minify,
+        sourceMaps: false,
+        externals: ["react", "react-dom", "react/jsx-runtime", "@frontmcp/ui", "@frontmcp/ui/react"],
+        security: opts.security,
+        skipCache: opts.skipCache
+      });
+      transpiledCode = bundleResult.code;
+      transformTime = bundleResult.metrics.transformTime;
+    }
+    const shouldIncludeBridge = opts.buildMode === "dynamic" || opts.buildMode === "hybrid";
+    const cachedRuntime = getCachedRuntime({
+      cdnType,
+      includeMarkdown: opts.includeMarkdown || contentType === "markdown",
+      includeMdx: opts.includeMdx || contentType === "mdx",
+      minify: opts.minify,
+      includeBridge: shouldIncludeBridge
+    });
+    const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : "";
+    const dataInjectionStr = buildDataInjectionCode(
+      opts.toolName,
+      opts.input,
+      opts.output,
+      opts.structuredContent,
+      contentType,
+      transpiledCode ? null : options.source,
+      // Pass source only if not a component
+      transpiledCode !== null,
+      {
+        buildMode: opts.buildMode,
+        cdnType,
+        dynamicOptions: opts.dynamicOptions,
+        hybridOptions: opts.hybridOptions
+      }
+    );
+    const appScript = buildAppScript(
+      cachedRuntime.appTemplate,
+      componentCodeStr,
+      dataInjectionStr,
+      opts.customComponents ?? ""
+    );
+    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme });
+    const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+    const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType);
+    const html = this.assembleUniversalStaticHTMLCached({
+      title: opts.title || `${opts.toolName} - Widget`,
+      head,
+      reactRuntime,
+      cdnImports: cachedRuntime.cdnImports,
+      vendorScript: cachedRuntime.vendorScript,
+      appScript,
+      renderScript,
+      rootId: opts.rootId,
+      cdnType
+    });
+    const hash = hashContent(html);
+    return {
+      html,
+      componentCode: transpiledCode ?? appScript,
+      metrics: {
+        transformTime,
+        bundleTime: 0,
+        totalTime: performance.now() - startTime,
+        cacheTime: cachedRuntime.cached ? 0 : void 0
+      },
+      hash,
+      size: html.length,
+      cached: cachedRuntime.cached,
+      sourceType: opts.sourceType === "auto" ? this.detectSourceType(options.source) : opts.sourceType,
+      targetPlatform: platform,
+      universal: true,
+      contentType
+    };
+  }
+  /**
+   * Assemble the complete universal static HTML document using cached runtime.
+   *
+   * For ESM mode (OpenAI), scripts must wait for React to load asynchronously.
+   * For UMD mode (Claude), scripts can execute synchronously.
+   */
+  assembleUniversalStaticHTMLCached(parts) {
+    if (parts.cdnType === "umd") {
+      return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.cdnImports}
+    <!-- Vendor Runtime (Cached) -->
+    <script>
+${parts.vendorScript}
+    </script>
+    <!-- App Script (User Component) -->
+    <script>
+${parts.appScript}
+    </script>
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    ${parts.renderScript}
+</body>
+</html>`;
+    } else {
+      return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.cdnImports}
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    <!-- Scripts wait for React to load (ESM is async) -->
+    <script type="module">
+      // Wait for React to be ready
+      function initFrontMCP() {
+        // Vendor Runtime (Cached)
+${parts.vendorScript}
+
+        // App Script (User Component)
+${parts.appScript}
+
+        // Render the app
+        var container = document.getElementById('${parts.rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot && window.__frontmcp.UniversalApp) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(window.__frontmcp.UniversalApp));
+        }
+      }
+
+      if (window.__reactReady) {
+        initFrontMCP();
+      } else {
+        window.addEventListener('react:ready', initFrontMCP);
+      }
+    </script>
+</body>
+</html>`;
+    }
+  }
+  /**
+   * Build the component script for transpiled React/MDX content.
+   * Wraps CommonJS code with module/exports shim to capture the component.
+   */
+  buildUniversalComponentScript(transpiledCode, cdnType) {
+    const wrappedCode = `
+        // CommonJS module shim
+        var module = { exports: {} };
+        var exports = module.exports;
+
+        // Execute transpiled component code (CommonJS format)
+        ${transpiledCode}
+
+        // Capture the component export
+        window.__frontmcp_component = module.exports.default || module.exports;
+    `;
+    if (cdnType === "umd") {
+      return `
+    <!-- Universal Component Script (transpiled) -->
+    <script>
+      (function() {
+        ${wrappedCode}
+      })();
+    </script>`;
+    } else {
+      return `
+    <!-- Universal Component Script (transpiled, ESM) -->
+    <script type="module">
+      function loadComponent() {
+        ${wrappedCode}
+      }
+
+      if (window.__reactReady) {
+        loadComponent();
+      } else {
+        window.addEventListener('react:ready', loadComponent);
+      }
+    </script>`;
+    }
+  }
+  /**
+   * Build the universal runtime script section.
+   */
+  buildUniversalRuntimeScript(runtimeScript) {
+    return `
+    <!-- Universal Runtime -->
+    <script>
+      ${runtimeScript}
+    </script>`;
+  }
+  /**
+   * Build data injection script for universal mode.
+   */
+  buildUniversalDataScript(toolName, input, output, structuredContent, contentType, source, hasTranspiledComponent = false) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    if (hasTranspiledComponent) {
+      return `
+    <!-- Universal Data Injection (React Component) -->
+    <script>
+      window.__frontmcp.setState({
+        toolName: ${safeJson(toolName)},
+        input: ${safeJson(input ?? null)},
+        output: ${safeJson(output ?? null)},
+        structuredContent: ${safeJson(structuredContent ?? null)},
+        content: {
+          type: 'react',
+          source: window.__frontmcp_component
+        },
+        loading: false,
+        error: null
+      });
+    </script>`;
+    }
+    const escapedSource = JSON.stringify(source);
+    return `
+    <!-- Universal Data Injection -->
+    <script>
+      window.__frontmcp.setState({
+        toolName: ${safeJson(toolName)},
+        input: ${safeJson(input ?? null)},
+        output: ${safeJson(output ?? null)},
+        structuredContent: ${safeJson(structuredContent ?? null)},
+        content: {
+          type: ${safeJson(contentType)},
+          source: ${escapedSource}
+        },
+        loading: false,
+        error: null
+      });
+    </script>`;
+  }
+  /**
+   * Build the universal render script.
+   */
+  buildUniversalRenderScript(rootId, cdnType) {
+    if (cdnType === "umd") {
+      return `
+    <!-- Universal Render Script (UMD - synchronous) -->
+    <script>
+      (function() {
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot && window.__frontmcp.UniversalApp) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(window.__frontmcp.UniversalApp));
+        } else if (container && window.ReactDOM && window.ReactDOM.render && window.__frontmcp.UniversalApp) {
+          window.ReactDOM.render(
+            React.createElement(window.__frontmcp.UniversalApp),
+            container
+          );
+        }
+      })();
+    </script>`;
+    } else {
+      return `
+    <!-- Universal Render Script (ESM - waits for React) -->
+    <script type="module">
+      function renderUniversalApp() {
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot && window.__frontmcp.UniversalApp) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(window.__frontmcp.UniversalApp));
+        }
+      }
+
+      if (window.__reactReady) {
+        renderUniversalApp();
+      } else {
+        window.addEventListener('react:ready', renderUniversalApp);
+      }
+    </script>`;
+    }
+  }
+  /**
+   * Assemble the complete universal static HTML document.
+   */
+  assembleUniversalStaticHTML(parts) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.frontmcpRuntime ?? ""}
+    ${parts.cdnImports}
+    ${parts.universalRuntimeScript}
+    ${parts.componentScript ?? ""}
+    ${parts.dataScript}
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    ${parts.renderScript}
+</body>
+</html>`;
+  }
+  /**
+   * Get cache statistics.
+   */
+  getCacheStats() {
+    return this.cache.getStats();
+  }
+  /**
+   * Clear the cache.
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+  /**
+   * Clean up expired cache entries.
+   */
+  cleanupCache() {
+    return this.cache.cleanup();
+  }
+  /**
+   * Transform source code using esbuild/SWC.
+   */
+  async transform(source, sourceType, options) {
+    const transform = await loadEsbuild();
+    if (!transform) {
+      throw new Error("No bundler available. Install esbuild or @swc/core: npm install esbuild");
+    }
+    const loader = this.getLoader(sourceType);
+    const esbuildOptions = {
+      loader,
+      minify: options.minify,
+      sourcemap: options.sourceMaps,
+      target: options.target,
+      format: options.format === "cjs" ? "cjs" : options.format === "esm" ? "esm" : "iife",
+      jsx: "automatic",
+      jsxImportSource: options.jsx.importSource
+    };
+    try {
+      const result = await transform(source, esbuildOptions);
+      return {
+        code: result.code,
+        map: result.map
+      };
+    } catch (error) {
+      throw new Error(`Transform failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+  /**
+   * Get esbuild loader for source type.
+   */
+  getLoader(sourceType) {
+    switch (sourceType) {
+      case "jsx":
+        return "jsx";
+      case "tsx":
+        return "tsx";
+      case "mdx":
+        return "tsx";
+      // MDX compiles to JSX/TSX
+      case "html":
+        return "text";
+      default:
+        return "tsx";
+    }
+  }
+  /**
+   * Detect source type from content.
+   */
+  detectSourceType(source) {
+    const hasTypeScript = /:\s*(string|number|boolean|any|unknown|void|never|object)\b/.test(source) || /interface\s+\w+/.test(source) || /type\s+\w+\s*=/.test(source) || /<\w+>/.test(source);
+    const hasJSX = /<[A-Z][a-zA-Z]*/.test(source) || // Component tags
+    /<[a-z]+\s/.test(source) || // HTML tags with attributes
+    /<[a-z]+>/.test(source) || // Self-closing HTML tags
+    /<\/[a-z]+>/.test(source);
+    const hasMDX = /^#\s+/.test(source) || // Markdown heading
+    /^-\s+/.test(source) || // Markdown list
+    /\*\*\w+\*\*/.test(source) || // Bold
+    /```\w*\n/.test(source);
+    if (hasMDX && hasJSX) {
+      return "mdx";
+    }
+    if (hasTypeScript && hasJSX) {
+      return "tsx";
+    }
+    if (hasJSX) {
+      return "jsx";
+    }
+    if (hasTypeScript) {
+      return "tsx";
+    }
+    return "jsx";
+  }
+  /**
+   * Merge bundle options with defaults.
+   */
+  mergeOptions(options) {
+    return {
+      sourceType: options.sourceType ?? DEFAULT_BUNDLE_OPTIONS.sourceType,
+      format: options.format ?? DEFAULT_BUNDLE_OPTIONS.format,
+      minify: options.minify ?? DEFAULT_BUNDLE_OPTIONS.minify,
+      sourceMaps: options.sourceMaps ?? DEFAULT_BUNDLE_OPTIONS.sourceMaps,
+      externals: options.externals ?? DEFAULT_BUNDLE_OPTIONS.externals,
+      jsx: {
+        ...DEFAULT_BUNDLE_OPTIONS.jsx,
+        ...options.jsx
+      },
+      target: options.target ?? DEFAULT_BUNDLE_OPTIONS.target,
+      globalName: options.globalName ?? DEFAULT_BUNDLE_OPTIONS.globalName,
+      skipCache: options.skipCache ?? DEFAULT_BUNDLE_OPTIONS.skipCache
+    };
+  }
+  /**
+   * Build hydration script for client-side React.
+   */
+  buildHydrationScript(bundledCode, context) {
+    const contextJson = context ? JSON.stringify(context) : "{}";
+    return `
+(function() {
+  var context = ${contextJson};
+  var exports = {};
+  var module = { exports: exports };
+
+  // Execute bundled code
+  (function(exports, module) {
+    ${bundledCode}
+  })(exports, module);
+
+  // Get component
+  var Component = module.exports.default || module.exports;
+
+  // Hydrate
+  if (typeof ReactDOM !== 'undefined' && ReactDOM.hydrateRoot) {
+    var container = document.getElementById('root') || document.body.firstElementChild;
+    if (container) {
+      ReactDOM.hydrateRoot(container, React.createElement(Component, context));
+    }
+  }
+})();
+    `.trim();
+  }
+  // ============================================
+  // Static HTML Helper Methods
+  // ============================================
+  /**
+   * Merge static HTML options with defaults.
+   */
+  mergeStaticHTMLOptions(options) {
+    return {
+      sourceType: options.sourceType ?? DEFAULT_STATIC_HTML_OPTIONS.sourceType,
+      targetPlatform: options.targetPlatform ?? DEFAULT_STATIC_HTML_OPTIONS.targetPlatform,
+      minify: options.minify ?? DEFAULT_STATIC_HTML_OPTIONS.minify,
+      skipCache: options.skipCache ?? DEFAULT_STATIC_HTML_OPTIONS.skipCache,
+      rootId: sanitizeRootId(options.rootId ?? DEFAULT_STATIC_HTML_OPTIONS.rootId),
+      widgetAccessible: options.widgetAccessible ?? DEFAULT_STATIC_HTML_OPTIONS.widgetAccessible,
+      externals: {
+        ...DEFAULT_STATIC_HTML_OPTIONS.externals,
+        ...options.externals
+      },
+      // Universal mode options
+      universal: options.universal ?? DEFAULT_STATIC_HTML_OPTIONS.universal,
+      contentType: options.contentType ?? DEFAULT_STATIC_HTML_OPTIONS.contentType,
+      includeMarkdown: options.includeMarkdown ?? DEFAULT_STATIC_HTML_OPTIONS.includeMarkdown,
+      includeMdx: options.includeMdx ?? DEFAULT_STATIC_HTML_OPTIONS.includeMdx,
+      // Build mode options
+      buildMode: options.buildMode ?? DEFAULT_STATIC_HTML_OPTIONS.buildMode,
+      dynamicOptions: options.dynamicOptions,
+      hybridOptions: options.hybridOptions,
+      // Pass-through options
+      toolName: options.toolName,
+      input: options.input,
+      output: options.output,
+      structuredContent: options.structuredContent,
+      title: options.title,
+      security: options.security,
+      customCss: options.customCss,
+      customComponents: options.customComponents,
+      theme: options.theme
+    };
+  }
+  /**
+   * Build the <head> section for static HTML.
+   */
+  buildStaticHTMLHead(opts) {
+    const parts = [];
+    parts.push(`<meta charset="UTF-8">`);
+    parts.push(`<meta name="viewport" content="width=device-width, initial-scale=1.0">`);
+    for (const url of STATIC_HTML_CDN.fonts.preconnect) {
+      parts.push(`<link rel="preconnect" href="${url}" crossorigin>`);
+    }
+    parts.push(`<link rel="stylesheet" href="${STATIC_HTML_CDN.fonts.inter}">`);
+    parts.push(buildCDNScriptTag(CLOUDFLARE_CDN.tailwindCss));
+    parts.push(this.buildThemeStyleBlock(opts.theme));
+    parts.push(`<style>
+      body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+      .frontmcp-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
+      .frontmcp-spinner { width: 24px; height: 24px; border: 2px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
+      @keyframes spin { to { transform: rotate(360deg); } }
+    </style>`);
+    if (opts.customCss) {
+      parts.push(`<style>
+${sanitizeCss(opts.customCss)}
+    </style>`);
+    }
+    return parts.join("\n    ");
+  }
+  /**
+   * Build theme CSS variables as a :root style block.
+   * Uses DEFAULT_THEME if no theme is provided.
+   */
+  buildThemeStyleBlock(theme = DEFAULT_THEME) {
+    const cssVars = buildThemeCss(theme);
+    return `<style>
+      :root {
+        ${cssVars}
+      }
+    </style>`;
+  }
+  /**
+   * Build React runtime scripts for static HTML.
+   */
+  buildReactRuntimeScripts(externals, platform, cdnType) {
+    const reactConfig = externals.react ?? "cdn";
+    const reactDomConfig = externals.reactDom ?? "cdn";
+    if (cdnType === "umd") {
+      const reactUrl = reactConfig === "cdn" ? STATIC_HTML_CDN.umd.react : reactConfig;
+      const reactDomUrl = reactDomConfig === "cdn" ? STATIC_HTML_CDN.umd.reactDom : reactDomConfig;
+      return `
+    <!-- React Runtime (UMD from cdnjs - Claude compatible) -->
+    <script src="${reactUrl}"></script>
+    <script src="${reactDomUrl}"></script>
+    <script>
+      // Webpack/esbuild polyfills for transpiled code (UMD globals)
+      window.external_react_namespaceObject = window.React;
+      window.jsx_runtime_namespaceObject = {
+        jsx: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        jsxs: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        Fragment: React.Fragment
+      };
+      window.__reactReady = true;
+    </script>`;
+    } else {
+      const reactUrl = reactConfig === "cdn" ? STATIC_HTML_CDN.esm.react : reactConfig;
+      const reactDomUrl = reactDomConfig === "cdn" ? STATIC_HTML_CDN.esm.reactDom : reactDomConfig;
+      return `
+    <!-- React Runtime (ES modules from esm.sh) -->
+    <script type="module">
+      import React from '${reactUrl}';
+      import { createRoot } from '${reactDomUrl}';
+
+      // Make React available globally
+      window.React = React;
+      window.ReactDOM = { createRoot };
+
+      // Webpack/esbuild polyfills for transpiled code
+      window.external_react_namespaceObject = React;
+      window.jsx_runtime_namespaceObject = {
+        jsx: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        jsxs: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        Fragment: React.Fragment
+      };
+
+      // Signal React is ready
+      window.__reactReady = true;
+      window.dispatchEvent(new CustomEvent('react:ready'));
+    </script>`;
+    }
+  }
+  /**
+   * Build FrontMCP runtime (hooks and UI components).
+   * Uses esbuild to transpile real React components at first use, then caches.
+   * Falls back to manual implementation if esbuild fails.
+   * Always inlined for reliability across platforms.
+   */
+  async buildFrontMCPRuntime() {
+    let uiComponents;
+    try {
+      uiComponents = await getBrowserComponents();
+    } catch {
+      uiComponents = buildFallbackUIComponents();
+    }
+    return `
+    <!-- FrontMCP Runtime (always inline) -->
+    <script>
+      // Custom require() shim for browser - maps module names to globals
+      // This allows esbuild-transpiled code to work in browsers
+      window.__moduleCache = {};
+      window.require = function(moduleName) {
+        // Check cache first
+        if (window.__moduleCache[moduleName]) {
+          return window.__moduleCache[moduleName];
+        }
+
+        // Map module names to browser globals
+        var moduleMap = {
+          'react': function() { return window.React; },
+          'react-dom': function() { return window.ReactDOM; },
+          'react-dom/client': function() { return window.ReactDOM; },
+          'react/jsx-runtime': function() { return window.jsx_runtime_namespaceObject; },
+          'react/jsx-dev-runtime': function() { return window.jsx_runtime_namespaceObject; },
+          '@frontmcp/ui': function() { return window.frontmcp_ui_namespaceObject; },
+          '@frontmcp/ui/react': function() { return window.frontmcp_ui_namespaceObject; },
+        };
+
+        var resolver = moduleMap[moduleName];
+        if (resolver) {
+          var mod = resolver();
+          window.__moduleCache[moduleName] = mod;
+          return mod;
+        }
+
+        console.warn('[FrontMCP] Unknown module requested:', moduleName);
+        return {};
+      };
+
+      // Async require for dynamic imports (returns Promise)
+      window.requireAsync = function(moduleName) {
+        return new Promise(function(resolve, reject) {
+          // If module is already loaded, resolve immediately
+          var mod = window.require(moduleName);
+          if (mod && Object.keys(mod).length > 0) {
+            resolve(mod);
+            return;
+          }
+
+          // For now, we don't support dynamic CDN loading
+          // All required modules should be pre-loaded
+          console.warn('[FrontMCP] Async module not available:', moduleName);
+          resolve({});
+        });
+      };
+
+      // FrontMCP Hook implementations and state
+      window.__frontmcp = {
+        // Context for MCP bridge
+        context: {
+          toolName: null,
+          toolInput: null,
+          toolOutput: null,
+          structuredContent: null,
+          callTool: null,
+        },
+
+        // Theme and display settings
+        theme: 'light',
+        displayMode: 'embedded',
+        hostContext: {},
+        capabilities: {},
+
+        // Set context from data injection
+        setContext: function(ctx) {
+          Object.assign(this.context, ctx);
+        },
+
+        // State management (for universal mode compatibility)
+        getState: function() {
+          return {
+            toolName: this.context.toolName,
+            input: this.context.toolInput,
+            output: this.context.toolOutput,
+            structuredContent: this.context.structuredContent,
+            loading: false,
+            error: null
+          };
+        },
+
+        setState: function(partial) {
+          if (partial.toolName !== undefined) this.context.toolName = partial.toolName;
+          if (partial.input !== undefined) this.context.toolInput = partial.input;
+          if (partial.output !== undefined) this.context.toolOutput = partial.output;
+          if (partial.structuredContent !== undefined) this.context.structuredContent = partial.structuredContent;
+        }
+      };
+
+      // Hook: useToolOutput - returns the tool output data
+      window.useToolOutput = function() {
+        return window.__frontmcp.context.toolOutput;
+      };
+
+      // Hook: useToolInput - returns the tool input arguments
+      window.useToolInput = function() {
+        return window.__frontmcp.context.toolInput;
+      };
+
+      // Hook: useMcpBridgeContext - returns full bridge context
+      window.useMcpBridgeContext = function() {
+        return window.__frontmcp.context;
+      };
+
+      // Hook: useCallTool - returns function to call other tools
+      window.useCallTool = function() {
+        return function(name, args) {
+          if (window.__frontmcp.context.callTool) {
+            return window.__frontmcp.context.callTool(name, args);
+          }
+          console.warn('[FrontMCP] callTool not available - widget may not have tool access');
+          return Promise.resolve(null);
+        };
+      };
+    </script>
+    <!-- UI Components (Full-Featured, Browser-Compatible) -->
+    <script>
+${uiComponents}
+    </script>`;
+  }
+  /**
+   * Build data injection script for tool input/output.
+   * Dispatches to mode-specific builders based on buildMode.
+   */
+  buildDataInjectionScript(toolName, input, output, structuredContent, buildMode = "static", cdnType = "esm", dynamicOptions, hybridOptions) {
+    switch (buildMode) {
+      case "dynamic":
+        return this.buildDynamicDataScript(toolName, input, output, structuredContent, cdnType, dynamicOptions);
+      case "hybrid":
+        return this.buildHybridDataScript(toolName, input, structuredContent, hybridOptions);
+      case "static":
+      default:
+        return this.buildStaticDataScript(toolName, input, output, structuredContent);
+    }
+  }
+  /**
+   * Build static data injection - data baked in at build time (current default).
+   */
+  buildStaticDataScript(toolName, input, output, structuredContent) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    return `
+    <!-- Tool Data Injection (Static Mode) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = ${safeJson(input ?? null)};
+      window.__mcpToolOutput = ${safeJson(output ?? null)};
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+
+      // Initialize FrontMCP context
+      window.__frontmcp.setContext({
+        toolName: window.__mcpToolName,
+        toolInput: window.__mcpToolInput,
+        toolOutput: window.__mcpToolOutput,
+        structuredContent: window.__mcpStructuredContent,
+      });
+    </script>`;
+  }
+  /**
+   * Build dynamic data injection - platform-aware.
+   * For OpenAI (ESM): subscribes to platform events for updates.
+   * For non-OpenAI (UMD/Claude): uses placeholders for data injection.
+   */
+  buildDynamicDataScript(toolName, input, output, structuredContent, cdnType = "esm", options) {
+    if (cdnType === "umd") {
+      return this.buildDynamicWithPlaceholdersScript(toolName, structuredContent, options);
+    }
+    return this.buildDynamicWithSubscriptionScript(toolName, input, output, structuredContent, options);
+  }
+  /**
+   * Build dynamic data injection for non-OpenAI platforms using placeholders.
+   * Similar to hybrid mode but with platform-appropriate loading/error states.
+   */
+  buildDynamicWithPlaceholdersScript(toolName, structuredContent, options) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    const outputPlaceholder = HYBRID_DATA_PLACEHOLDER;
+    const inputPlaceholder = HYBRID_INPUT_PLACEHOLDER;
+    const includeInitialData = options?.includeInitialData !== false;
+    return `
+    <!-- Tool Data Injection (Dynamic Mode - Placeholder-based for non-OpenAI) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = "${inputPlaceholder}";
+      window.__mcpToolOutput = "${outputPlaceholder}";
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+      window.__mcpHybridError = null;
+
+      (function() {
+        var outputNotReplaced = false;
+        var includeInitialData = ${includeInitialData};
+
+        // Parse output placeholder
+        var rawOutput = window.__mcpToolOutput;
+        if (typeof rawOutput === 'string' && rawOutput !== "${outputPlaceholder}") {
+          try {
+            window.__mcpToolOutput = JSON.parse(rawOutput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected output data:', e);
+            window.__mcpToolOutput = null;
+            window.__mcpHybridError = 'Failed to parse output data';
+          }
+        } else if (rawOutput === "${outputPlaceholder}") {
+          window.__mcpToolOutput = null;
+          outputNotReplaced = true;
+        }
+
+        // Parse input placeholder
+        var rawInput = window.__mcpToolInput;
+        if (typeof rawInput === 'string' && rawInput !== "${inputPlaceholder}") {
+          try {
+            window.__mcpToolInput = JSON.parse(rawInput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected input data:', e);
+            window.__mcpToolInput = null;
+          }
+        } else if (rawInput === "${inputPlaceholder}") {
+          window.__mcpToolInput = null;
+        }
+
+        // Handle placeholder not replaced - show error if expecting initial data
+        if (outputNotReplaced && includeInitialData) {
+          window.__mcpHybridError = 'No data provided. The output placeholder was not replaced.';
+        }
+      })();
+
+      // Initialize FrontMCP context with appropriate loading/error state
+      if (window.__frontmcp && window.__frontmcp.setContext) {
+        window.__frontmcp.setContext({
+          toolName: window.__mcpToolName,
+          toolInput: window.__mcpToolInput,
+          toolOutput: window.__mcpToolOutput,
+          structuredContent: window.__mcpStructuredContent,
+          loading: ${!includeInitialData} && window.__mcpToolOutput === null && !window.__mcpHybridError,
+          error: window.__mcpHybridError,
+        });
+      }
+    </script>`;
+  }
+  /**
+   * Build dynamic data injection for OpenAI using subscription pattern.
+   */
+  buildDynamicWithSubscriptionScript(toolName, input, output, structuredContent, options) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    const includeInitial = options?.includeInitialData !== false;
+    const subscribeToUpdates = options?.subscribeToUpdates !== false;
+    const initialDataBlock = includeInitial ? `
+      window.__mcpToolOutput = ${safeJson(output ?? null)};
+      if (window.__frontmcp && window.__frontmcp.setState) {
+        window.__frontmcp.setState({
+          output: window.__mcpToolOutput,
+          loading: false,
+        });
+      }` : `
+      window.__mcpToolOutput = null;
+      if (window.__frontmcp && window.__frontmcp.setState) {
+        window.__frontmcp.setState({
+          output: null,
+          loading: true,
+        });
+      }`;
+    const subscriptionBlock = subscribeToUpdates ? `
+      // Subscribe to platform tool result updates
+      (function() {
+        function subscribeToUpdates() {
+          // OpenAI Apps SDK
+          if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) {
+            window.openai.canvas.onToolResult(function(result) {
+              window.__mcpToolOutput = result;
+              if (window.__frontmcp && window.__frontmcp.setState) {
+                window.__frontmcp.setState({
+                  output: result,
+                  loading: false,
+                });
+              }
+              // Dispatch custom event for React hooks
+              window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result }));
+            });
+            return;
+          }
+
+          // Fallback: listen for custom events (for testing/other platforms)
+          window.addEventListener('frontmcp:injectData', function(e) {
+            if (e.detail && e.detail.output !== undefined) {
+              window.__mcpToolOutput = e.detail.output;
+              if (window.__frontmcp && window.__frontmcp.setState) {
+                window.__frontmcp.setState({
+                  output: e.detail.output,
+                  loading: false,
+                });
+              }
+            }
+          });
+        }
+
+        // Subscribe when DOM is ready
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', subscribeToUpdates);
+        } else {
+          subscribeToUpdates();
+        }
+      })();` : "";
+    return `
+    <!-- Tool Data Injection (Dynamic Mode - OpenAI Subscription) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = ${safeJson(input ?? null)};
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+      ${initialDataBlock}
+
+      // Initialize FrontMCP context
+      if (window.__frontmcp && window.__frontmcp.setContext) {
+        window.__frontmcp.setContext({
+          toolName: window.__mcpToolName,
+          toolInput: window.__mcpToolInput,
+          toolOutput: window.__mcpToolOutput,
+          structuredContent: window.__mcpStructuredContent,
+        });
+      }
+      ${subscriptionBlock}
+    </script>`;
+  }
+  /**
+   * Build hybrid data injection - shell with placeholders for runtime injection.
+   * Use injectHybridData() or injectHybridDataFull() from @frontmcp/uipack to replace the placeholders.
+   */
+  buildHybridDataScript(toolName, _input, structuredContent, options) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    const outputPlaceholder = options?.placeholder ?? HYBRID_DATA_PLACEHOLDER;
+    const inputPlaceholder = options?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER;
+    return `
+    <!-- Tool Data Injection (Hybrid Mode - Replace placeholders with JSON) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = "${inputPlaceholder}";
+      window.__mcpToolOutput = "${outputPlaceholder}";
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+      window.__mcpHybridError = null;
+
+      // Parse placeholders if they've been replaced with actual JSON
+      (function() {
+        var outputNotReplaced = false;
+
+        // Parse output placeholder
+        var rawOutput = window.__mcpToolOutput;
+        if (typeof rawOutput === 'string' && rawOutput !== "${outputPlaceholder}") {
+          try {
+            window.__mcpToolOutput = JSON.parse(rawOutput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected output data:', e);
+            window.__mcpToolOutput = null;
+            window.__mcpHybridError = 'Failed to parse output data';
+          }
+        } else if (rawOutput === "${outputPlaceholder}") {
+          // Placeholder not replaced - no data was injected
+          window.__mcpToolOutput = null;
+          outputNotReplaced = true;
+        }
+
+        // Parse input placeholder
+        var rawInput = window.__mcpToolInput;
+        if (typeof rawInput === 'string' && rawInput !== "${inputPlaceholder}") {
+          try {
+            window.__mcpToolInput = JSON.parse(rawInput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected input data:', e);
+            window.__mcpToolInput = null;
+          }
+        } else if (rawInput === "${inputPlaceholder}") {
+          window.__mcpToolInput = null;
+        }
+
+        // Set error if output placeholder was not replaced (no data provided)
+        if (outputNotReplaced) {
+          window.__mcpHybridError = 'No data provided. The output placeholder was not replaced.';
+        }
+      })();
+
+      // Initialize FrontMCP context with appropriate loading/error state
+      if (window.__frontmcp && window.__frontmcp.setContext) {
+        window.__frontmcp.setContext({
+          toolName: window.__mcpToolName,
+          toolInput: window.__mcpToolInput,
+          toolOutput: window.__mcpToolOutput,
+          structuredContent: window.__mcpStructuredContent,
+          loading: false,
+          error: window.__mcpHybridError,
+        });
+      }
+    </script>`;
+  }
+  /**
+   * Build component render script.
+   * Wraps CommonJS code with module/exports shim to capture the component.
+   */
+  buildComponentRenderScript(componentCode, rootId, cdnType) {
+    const wrappedCode = `
+        // CommonJS module shim
+        var module = { exports: {} };
+        var exports = module.exports;
+
+        // Execute transpiled component code (CommonJS format)
+        ${componentCode}
+
+        // Capture the component export
+        window.__frontmcp_component = module.exports;
+    `;
+    if (cdnType === "umd") {
+      return `
+    <!-- Component Render Script (UMD - synchronous) -->
+    <script>
+      (function() {
+        ${wrappedCode}
+
+        // Get the component
+        var Component = window.__frontmcp_component.default || window.__frontmcp_component;
+
+        // Render the component
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(Component, {
+            output: window.__mcpToolOutput,
+            input: window.__mcpToolInput,
+          }));
+        } else if (container && window.ReactDOM && window.ReactDOM.render) {
+          // Fallback for React 17
+          window.ReactDOM.render(
+            React.createElement(Component, {
+              output: window.__mcpToolOutput,
+              input: window.__mcpToolInput,
+            }),
+            container
+          );
+        }
+      })();
+    </script>`;
+    } else {
+      return `
+    <!-- Component Render Script (ESM - waits for React) -->
+    <script type="module">
+      function renderComponent() {
+        ${wrappedCode}
+
+        // Get the component
+        var Component = window.__frontmcp_component.default || window.__frontmcp_component;
+
+        // Render the component
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(Component, {
+            output: window.__mcpToolOutput,
+            input: window.__mcpToolInput,
+          }));
+        }
+      }
+
+      // Wait for React to be ready
+      if (window.__reactReady) {
+        renderComponent();
+      } else {
+        window.addEventListener('react:ready', renderComponent);
+      }
+    </script>`;
+    }
+  }
+  /**
+   * Assemble the complete static HTML document.
+   */
+  assembleStaticHTML(parts) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.frontmcpRuntime}
+    ${parts.dataScript}
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    ${parts.componentScript}
+</body>
+</html>`;
+  }
+};
+function createBundler(options) {
+  return new InMemoryBundler(options);
+}
+
+// libs/ui/src/bundler/index.ts
+import { BundlerCache as BundlerCache2, hashContent as hashContent2, createCacheKey as createCacheKey2 } from "@frontmcp/uipack/bundler";
+import {
+  validateSource as validateSource2,
+  validateImports,
+  validateSize as validateSize2,
+  mergePolicy as mergePolicy2,
+  throwOnViolations as throwOnViolations2
+} from "@frontmcp/uipack/bundler";
+import { executeCode, executeDefault as executeDefault2, isExecutionError } from "@frontmcp/uipack/bundler";
+import {
+  DEFAULT_STORAGE_OPTIONS,
+  calculateManifestSize,
+  FilesystemStorage,
+  createFilesystemStorage,
+  RedisStorage,
+  createRedisStorage,
+  sha256,
+  sha256Buffer,
+  hashFile,
+  hashFiles,
+  calculateComponentHash,
+  calculateQuickHash,
+  generateBuildId,
+  buildIdFromHash,
+  ComponentBuilder,
+  createFilesystemBuilder,
+  createRedisBuilder
+} from "@frontmcp/uipack/bundler";
+export {
+  ALL_PLATFORMS,
+  BundlerCache2 as BundlerCache,
+  ComponentBuilder,
+  DEFAULT_BUNDLER_OPTIONS,
+  DEFAULT_BUNDLE_OPTIONS,
+  DEFAULT_SECURITY_POLICY,
+  DEFAULT_STATIC_HTML_OPTIONS,
+  DEFAULT_STORAGE_OPTIONS,
+  ExecutionError2 as ExecutionError,
+  FilesystemStorage,
+  HYBRID_DATA_PLACEHOLDER,
+  HYBRID_INPUT_PLACEHOLDER,
+  InMemoryBundler,
+  RedisStorage,
+  STATIC_HTML_CDN,
+  SecurityError,
+  buildIdFromHash,
+  calculateComponentHash,
+  calculateManifestSize,
+  calculateQuickHash,
+  createBundler,
+  createCacheKey2 as createCacheKey,
+  createFilesystemBuilder,
+  createFilesystemStorage,
+  createRedisBuilder,
+  createRedisStorage,
+  executeCode,
+  executeDefault2 as executeDefault,
+  generateBuildId,
+  getCdnTypeForPlatform,
+  hashContent2 as hashContent,
+  hashFile,
+  hashFiles,
+  isExecutionError,
+  mergePolicy2 as mergePolicy,
+  sha256,
+  sha256Buffer,
+  throwOnViolations2 as throwOnViolations,
+  validateImports,
+  validateSize2 as validateSize,
+  validateSource2 as validateSource
+};