@frontmcp/uipack 0.6.1

package/esm/runtime/index.js

@@ -0,0 +1,4976 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// libs/uipack/src/utils/safe-stringify.ts
+var init_safe_stringify = __esm({
+  "libs/uipack/src/utils/safe-stringify.ts"() {
+    "use strict";
+  }
+});
+
+// libs/uipack/src/utils/escape-html.ts
+function escapeHtml(str) {
+  if (str === null || str === void 0) {
+    return "";
+  }
+  const s = String(str);
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+var init_escape_html = __esm({
+  "libs/uipack/src/utils/escape-html.ts"() {
+    "use strict";
+  }
+});
+
+// libs/uipack/src/utils/index.ts
+var init_utils = __esm({
+  "libs/uipack/src/utils/index.ts"() {
+    "use strict";
+    init_safe_stringify();
+    init_escape_html();
+  }
+});
+
+// libs/uipack/src/handlebars/helpers.ts
+function formatDate(date, format) {
+  if (date === null || date === void 0) {
+    return "";
+  }
+  let dateObj;
+  if (date instanceof Date) {
+    dateObj = date;
+  } else if (typeof date === "string" || typeof date === "number") {
+    dateObj = new Date(date);
+  } else {
+    return String(date);
+  }
+  if (isNaN(dateObj.getTime())) {
+    return String(date);
+  }
+  const options = {};
+  switch (format) {
+    case "short":
+      options.dateStyle = "short";
+      break;
+    case "medium":
+      options.dateStyle = "medium";
+      break;
+    case "long":
+      options.dateStyle = "long";
+      break;
+    case "full":
+      options.dateStyle = "full";
+      break;
+    case "time":
+      options.timeStyle = "short";
+      break;
+    case "datetime":
+      options.dateStyle = "medium";
+      options.timeStyle = "short";
+      break;
+    case "iso":
+      return dateObj.toISOString();
+    case "relative":
+      return formatRelativeDate(dateObj);
+    default:
+      options.dateStyle = "medium";
+  }
+  return new Intl.DateTimeFormat("en-US", options).format(dateObj);
+}
+function formatRelativeDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1e3);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffSecs < 60) {
+    return "just now";
+  } else if (diffMins < 60) {
+    return `${diffMins} minute${diffMins === 1 ? "" : "s"} ago`;
+  } else if (diffHours < 24) {
+    return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+  } else if (diffDays < 7) {
+    return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+  } else {
+    return formatDate(date, "medium");
+  }
+}
+function formatCurrency(amount, currency) {
+  if (amount === null || amount === void 0) {
+    return "";
+  }
+  const num = typeof amount === "number" ? amount : parseFloat(String(amount));
+  if (isNaN(num)) {
+    return String(amount);
+  }
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: typeof currency === "string" ? currency : "USD"
+  }).format(num);
+}
+function formatNumber(value, decimals) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  const num = typeof value === "number" ? value : parseFloat(String(value));
+  if (isNaN(num)) {
+    return String(value);
+  }
+  const options = {};
+  if (typeof decimals === "number") {
+    options.minimumFractionDigits = decimals;
+    options.maximumFractionDigits = decimals;
+  }
+  return new Intl.NumberFormat("en-US", options).format(num);
+}
+function jsonEmbed(data) {
+  const json2 = JSON.stringify(data ?? null);
+  return json2.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function json(data, pretty) {
+  return JSON.stringify(data ?? null, null, pretty ? 2 : void 0);
+}
+function eq(a, b) {
+  return a === b;
+}
+function ne(a, b) {
+  return a !== b;
+}
+function gt(a, b) {
+  return Number(a) > Number(b);
+}
+function gte(a, b) {
+  return Number(a) >= Number(b);
+}
+function lt(a, b) {
+  return Number(a) < Number(b);
+}
+function lte(a, b) {
+  return Number(a) <= Number(b);
+}
+function and(a, b) {
+  return Boolean(a) && Boolean(b);
+}
+function or(a, b) {
+  return Boolean(a) || Boolean(b);
+}
+function not(value) {
+  return !value;
+}
+function first(arr) {
+  if (!Array.isArray(arr)) return void 0;
+  return arr[0];
+}
+function last(arr) {
+  if (!Array.isArray(arr)) return void 0;
+  return arr[arr.length - 1];
+}
+function length(value) {
+  if (Array.isArray(value)) return value.length;
+  if (typeof value === "string") return value.length;
+  return 0;
+}
+function includes(arr, value) {
+  if (!Array.isArray(arr)) return false;
+  return arr.includes(value);
+}
+function join(arr, separator) {
+  if (!Array.isArray(arr)) return "";
+  return arr.join(typeof separator === "string" ? separator : ", ");
+}
+function uppercase(str) {
+  return String(str ?? "").toUpperCase();
+}
+function lowercase(str) {
+  return String(str ?? "").toLowerCase();
+}
+function capitalize(str) {
+  const s = String(str ?? "");
+  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+function truncate(str, maxLength, suffix) {
+  const s = String(str ?? "");
+  const len = typeof maxLength === "number" ? maxLength : 50;
+  const suf = typeof suffix === "string" ? suffix : "...";
+  if (s.length <= len) return s;
+  return s.slice(0, len - suf.length) + suf;
+}
+function defaultValue(value, defaultValue2) {
+  return value || defaultValue2;
+}
+function uniqueId(prefix) {
+  const id = ++idCounter;
+  return prefix ? `${prefix}-${id}` : `id-${id}`;
+}
+function resetUniqueIdCounter() {
+  idCounter = 0;
+}
+function classNames(...classes) {
+  return classes.filter(Boolean).map(String).join(" ");
+}
+var idCounter, builtinHelpers;
+var init_helpers = __esm({
+  "libs/uipack/src/handlebars/helpers.ts"() {
+    "use strict";
+    init_utils();
+    idCounter = 0;
+    builtinHelpers = {
+      // Escaping
+      escapeHtml,
+      // Formatting
+      formatDate,
+      formatCurrency,
+      formatNumber,
+      json,
+      jsonEmbed,
+      // Comparison
+      eq,
+      ne,
+      gt,
+      gte,
+      lt,
+      lte,
+      // Logical
+      and,
+      or,
+      not,
+      // Array
+      first,
+      last,
+      length,
+      includes,
+      join,
+      // String
+      uppercase,
+      lowercase,
+      capitalize,
+      truncate,
+      // Utility
+      default: defaultValue,
+      uniqueId,
+      classNames
+    };
+  }
+});
+
+// libs/uipack/src/handlebars/expression-extractor.ts
+function extractExpressions(template) {
+  const expressions = [];
+  const lines = template.split("\n");
+  const positionMap = buildPositionMap(template);
+  let match;
+  EXPRESSION_REGEX.lastIndex = 0;
+  while ((match = EXPRESSION_REGEX.exec(template)) !== null) {
+    const fullExpression = match[0];
+    const prefix = match[1];
+    const content = match[2].trim();
+    const position = positionMap.get(match.index) ?? { line: 1, column: 1 };
+    let type = "variable";
+    let helperName;
+    if (prefix === "/") {
+      type = "block-close";
+      helperName = content;
+    } else if (prefix === "#") {
+      type = "block";
+      const parts = content.split(/\s+/);
+      helperName = parts[0];
+    } else {
+      const parts = content.split(/\s+/);
+      if (parts.length > 1 && !content.startsWith("(")) {
+        const firstToken = parts[0];
+        if (!firstToken.includes(".") && !KEYWORDS.has(firstToken)) {
+          type = "helper";
+          helperName = firstToken;
+        }
+      }
+    }
+    const paths = extractPathsFromContent(content);
+    for (const path of paths) {
+      expressions.push({
+        path,
+        fullExpression,
+        line: position.line,
+        column: position.column,
+        type,
+        helperName
+      });
+    }
+    if (paths.length === 0 && type === "variable") {
+      const cleanContent = content.trim();
+      if (!KEYWORDS.has(cleanContent) && !cleanContent.includes(" ") && !cleanContent.startsWith("(")) {
+      }
+    }
+  }
+  return expressions;
+}
+function extractPathsFromContent(content) {
+  const paths = [];
+  let match;
+  const regex = new RegExp(PATH_REGEX.source, "g");
+  while ((match = regex.exec(content)) !== null) {
+    paths.push(match[0]);
+  }
+  return paths;
+}
+function buildPositionMap(template) {
+  const map = /* @__PURE__ */ new Map();
+  let line = 1;
+  let column = 1;
+  for (let i = 0; i < template.length; i++) {
+    map.set(i, { line, column });
+    if (template[i] === "\n") {
+      line++;
+      column = 1;
+    } else {
+      column++;
+    }
+  }
+  return map;
+}
+function extractVariablePaths(template) {
+  const expressions = extractExpressions(template);
+  const paths = new Set(expressions.map((e) => e.path));
+  return Array.from(paths);
+}
+function extractOutputPaths(template) {
+  return extractVariablePaths(template).filter((p) => p.startsWith("output."));
+}
+function extractInputPaths(template) {
+  return extractVariablePaths(template).filter((p) => p.startsWith("input."));
+}
+function extractStructuredContentPaths(template) {
+  return extractVariablePaths(template).filter((p) => p.startsWith("structuredContent."));
+}
+function extractAll(template) {
+  const expressions = extractExpressions(template);
+  const paths = [...new Set(expressions.map((e) => e.path))];
+  return {
+    expressions,
+    paths,
+    outputPaths: paths.filter((p) => p.startsWith("output.")),
+    inputPaths: paths.filter((p) => p.startsWith("input.")),
+    structuredContentPaths: paths.filter((p) => p.startsWith("structuredContent."))
+  };
+}
+function hasVariablePaths(template) {
+  return extractVariablePaths(template).length > 0;
+}
+function getExpressionAt(template, line, column) {
+  const expressions = extractExpressions(template);
+  return expressions.find((expr) => {
+    if (expr.line !== line) return false;
+    const exprEnd = expr.column + expr.fullExpression.length;
+    return column >= expr.column && column <= exprEnd;
+  });
+}
+function normalizePath(path) {
+  return path.replace(/\.\d+\./g, ".[].").replace(/\.\d+$/g, ".[]").replace(/\[\d+\]/g, ".[]");
+}
+var EXPRESSION_REGEX, PATH_REGEX, KEYWORDS;
+var init_expression_extractor = __esm({
+  "libs/uipack/src/handlebars/expression-extractor.ts"() {
+    "use strict";
+    EXPRESSION_REGEX = /\{\{\{?(?!!)(#|\/)?([^}]+?)\}?\}\}/g;
+    PATH_REGEX = /\b(output|input|structuredContent)(\.[a-zA-Z_$][a-zA-Z0-9_$]*|\.\[[^\]]+\])+/g;
+    KEYWORDS = /* @__PURE__ */ new Set(["this", "else", "@index", "@key", "@first", "@last", "@root"]);
+  }
+});
+
+// libs/uipack/src/handlebars/index.ts
+var handlebars_exports = {};
+__export(handlebars_exports, {
+  HandlebarsRenderer: () => HandlebarsRenderer,
+  and: () => and,
+  builtinHelpers: () => builtinHelpers,
+  capitalize: () => capitalize,
+  classNames: () => classNames,
+  containsHandlebars: () => containsHandlebars,
+  createHandlebarsRenderer: () => createHandlebarsRenderer,
+  defaultValue: () => defaultValue,
+  eq: () => eq,
+  escapeHtml: () => escapeHtml,
+  extractAll: () => extractAll,
+  extractExpressions: () => extractExpressions,
+  extractInputPaths: () => extractInputPaths,
+  extractOutputPaths: () => extractOutputPaths,
+  extractStructuredContentPaths: () => extractStructuredContentPaths,
+  extractVariablePaths: () => extractVariablePaths,
+  first: () => first,
+  formatCurrency: () => formatCurrency,
+  formatDate: () => formatDate,
+  formatNumber: () => formatNumber,
+  getExpressionAt: () => getExpressionAt,
+  gt: () => gt,
+  gte: () => gte,
+  hasVariablePaths: () => hasVariablePaths,
+  includes: () => includes,
+  isHandlebarsAvailable: () => isHandlebarsAvailable,
+  join: () => join,
+  json: () => json,
+  jsonEmbed: () => jsonEmbed,
+  last: () => last,
+  length: () => length,
+  lowercase: () => lowercase,
+  lt: () => lt,
+  lte: () => lte,
+  ne: () => ne,
+  normalizePath: () => normalizePath,
+  not: () => not,
+  or: () => or,
+  renderTemplate: () => renderTemplate,
+  resetUniqueIdCounter: () => resetUniqueIdCounter,
+  truncate: () => truncate,
+  uniqueId: () => uniqueId,
+  uppercase: () => uppercase
+});
+async function loadHandlebars() {
+  if (Handlebars !== null) {
+    return Handlebars;
+  }
+  try {
+    Handlebars = await import("handlebars");
+    return Handlebars;
+  } catch {
+    throw new Error("Handlebars is required for template rendering. Install it: npm install handlebars");
+  }
+}
+async function isHandlebarsAvailable() {
+  try {
+    await loadHandlebars();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createHandlebarsRenderer(options) {
+  return new HandlebarsRenderer(options);
+}
+async function renderTemplate(template, context) {
+  const renderer = createHandlebarsRenderer();
+  return renderer.render(template, context);
+}
+function containsHandlebars(template) {
+  return HandlebarsRenderer.containsHandlebars(template);
+}
+var Handlebars, HandlebarsRenderer;
+var init_handlebars = __esm({
+  "libs/uipack/src/handlebars/index.ts"() {
+    "use strict";
+    init_helpers();
+    init_helpers();
+    init_expression_extractor();
+    Handlebars = null;
+    HandlebarsRenderer = class {
+      options;
+      compiledTemplates = /* @__PURE__ */ new Map();
+      initialized = false;
+      hbs = null;
+      constructor(options = {}) {
+        this.options = {
+          strict: false,
+          autoEscape: true,
+          ...options
+        };
+      }
+      /**
+       * Initialize the renderer with Handlebars.
+       */
+      async init() {
+        if (this.initialized) return;
+        this.hbs = await loadHandlebars();
+        for (const [name, helper] of Object.entries(builtinHelpers)) {
+          this.hbs.registerHelper(name, helper);
+        }
+        if (this.options.helpers) {
+          for (const [name, helper] of Object.entries(this.options.helpers)) {
+            this.hbs.registerHelper(name, helper);
+          }
+        }
+        if (this.options.partials) {
+          for (const [name, template] of Object.entries(this.options.partials)) {
+            this.hbs.registerPartial(name, template);
+          }
+        }
+        this.initialized = true;
+      }
+      /**
+       * Render a Handlebars template.
+       *
+       * @param template - Template string
+       * @param context - Render context with input/output
+       * @returns Rendered HTML string
+       */
+      async render(template, context) {
+        await this.init();
+        if (!this.hbs) {
+          throw new Error("Handlebars not initialized");
+        }
+        let compiled = this.compiledTemplates.get(template);
+        if (!compiled) {
+          compiled = this.hbs.compile(template, {
+            strict: this.options.strict,
+            noEscape: !this.options.autoEscape
+          });
+          this.compiledTemplates.set(template, compiled);
+        }
+        const data = {
+          input: context.input ?? {},
+          output: context.output ?? {},
+          structuredContent: context.structuredContent,
+          // Also expose at root level for convenience
+          ...context.input,
+          ...typeof context.output === "object" && context.output !== null ? context.output : {}
+        };
+        try {
+          return compiled(data);
+        } catch (error) {
+          throw new Error(`Template rendering failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+      }
+      /**
+       * Render a template synchronously.
+       *
+       * Note: Requires Handlebars to be pre-loaded. Use `render()` for async loading.
+       *
+       * @param template - Template string
+       * @param context - Render context
+       * @returns Rendered HTML string
+       */
+      renderSync(template, context) {
+        if (!this.initialized || !this.hbs) {
+          throw new Error("HandlebarsRenderer not initialized. Call render() first or use initSync().");
+        }
+        let compiled = this.compiledTemplates.get(template);
+        if (!compiled) {
+          compiled = this.hbs.compile(template, {
+            strict: this.options.strict,
+            noEscape: !this.options.autoEscape
+          });
+          this.compiledTemplates.set(template, compiled);
+        }
+        const data = {
+          input: context.input ?? {},
+          output: context.output ?? {},
+          structuredContent: context.structuredContent,
+          ...context.input,
+          ...typeof context.output === "object" && context.output !== null ? context.output : {}
+        };
+        return compiled(data);
+      }
+      /**
+       * Initialize synchronously (for environments where Handlebars is already loaded).
+       */
+      initSync(handlebars) {
+        this.hbs = handlebars;
+        for (const [name, helper] of Object.entries(builtinHelpers)) {
+          this.hbs.registerHelper(name, helper);
+        }
+        if (this.options.helpers) {
+          for (const [name, helper] of Object.entries(this.options.helpers)) {
+            this.hbs.registerHelper(name, helper);
+          }
+        }
+        if (this.options.partials) {
+          for (const [name, template] of Object.entries(this.options.partials)) {
+            this.hbs.registerPartial(name, template);
+          }
+        }
+        this.initialized = true;
+      }
+      /**
+       * Register a custom helper.
+       *
+       * @param name - Helper name
+       * @param fn - Helper function
+       */
+      registerHelper(name, fn) {
+        if (this.hbs) {
+          this.hbs.registerHelper(name, fn);
+        }
+        if (!this.options.helpers) {
+          this.options.helpers = {};
+        }
+        this.options.helpers[name] = fn;
+      }
+      /**
+       * Register a partial template.
+       *
+       * @param name - Partial name
+       * @param template - Partial template string
+       */
+      registerPartial(name, template) {
+        if (this.hbs) {
+          this.hbs.registerPartial(name, template);
+        }
+        if (!this.options.partials) {
+          this.options.partials = {};
+        }
+        this.options.partials[name] = template;
+      }
+      /**
+       * Clear compiled template cache.
+       */
+      clearCache() {
+        this.compiledTemplates.clear();
+      }
+      /**
+       * Check if a template string contains Handlebars syntax.
+       *
+       * @param template - Template string to check
+       * @returns true if contains {{...}} syntax
+       */
+      static containsHandlebars(template) {
+        return /\{\{(?!!)[\s\S]*?\}\}/.test(template);
+      }
+      /**
+       * Check if the renderer is initialized.
+       */
+      get isInitialized() {
+        return this.initialized;
+      }
+    };
+  }
+});
+
+// libs/uipack/src/runtime/adapters/html.adapter.ts
+var html_adapter_exports = {};
+__export(html_adapter_exports, {
+  HtmlRendererAdapter: () => HtmlRendererAdapter,
+  createHtmlAdapter: () => createHtmlAdapter,
+  loadHtmlAdapter: () => loadHtmlAdapter
+});
+function createHtmlAdapter() {
+  return new HtmlRendererAdapter();
+}
+async function loadHtmlAdapter() {
+  return createHtmlAdapter();
+}
+var HtmlRendererAdapter;
+var init_html_adapter = __esm({
+  "libs/uipack/src/runtime/adapters/html.adapter.ts"() {
+    "use strict";
+    HtmlRendererAdapter = class {
+      type = "html";
+      // Lazy-loaded Handlebars renderer
+      handlebarsRenderer = null;
+      /**
+       * Check if this adapter can handle the given content.
+       */
+      canHandle(content) {
+        return typeof content === "string";
+      }
+      /**
+       * Render HTML content to a string.
+       */
+      async render(content, context, _options) {
+        if (this.containsHandlebars(content)) {
+          return this.renderHandlebars(content, context);
+        }
+        return content;
+      }
+      /**
+       * Render HTML content directly to the DOM.
+       */
+      async renderToDOM(content, target, context, _options) {
+        try {
+          const html = await this.render(content, context);
+          target.innerHTML = html;
+          target.dispatchEvent(
+            new CustomEvent("frontmcp:rendered", {
+              bubbles: true,
+              detail: { type: "html", toolName: context.toolName }
+            })
+          );
+          return { success: true, html };
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error);
+          console.error("[FrontMCP] HTML render failed:", message);
+          return { success: false, error: message };
+        }
+      }
+      /**
+       * Update rendered content with new data.
+       */
+      async update(target, context) {
+        const template = target.getAttribute("data-template");
+        if (template) {
+          return this.renderToDOM(template, target, context);
+        }
+        return { success: false, error: "No template stored for update" };
+      }
+      /**
+       * Clean up (no-op for HTML adapter).
+       */
+      destroy(_target) {
+      }
+      /**
+       * Check if content contains Handlebars syntax.
+       */
+      containsHandlebars(template) {
+        return /\{\{(?!!)[^}]*\}\}/.test(template);
+      }
+      /**
+       * Render Handlebars template.
+       */
+      async renderHandlebars(template, context) {
+        if (!this.handlebarsRenderer) {
+          try {
+            const handlebarsModule = await Promise.resolve().then(() => (init_handlebars(), handlebars_exports));
+            const { HandlebarsRenderer: HandlebarsRenderer2 } = handlebarsModule;
+            const renderer = new HandlebarsRenderer2();
+            this.handlebarsRenderer = {
+              render: (tmpl, ctx) => renderer.render(tmpl, ctx),
+              containsHandlebars: (tmpl) => HandlebarsRenderer2.containsHandlebars(tmpl)
+            };
+          } catch {
+            console.warn(
+              "[FrontMCP] Template contains Handlebars syntax but handlebars module not available. Ensure @frontmcp/ui/handlebars is properly bundled."
+            );
+            return template;
+          }
+        }
+        return this.handlebarsRenderer.render(template, {
+          input: context.input,
+          output: context.output
+        });
+      }
+    };
+  }
+});
+
+// libs/uipack/src/runtime/adapters/mdx.adapter.ts
+var mdx_adapter_exports = {};
+__export(mdx_adapter_exports, {
+  MdxRendererAdapter: () => MdxRendererAdapter,
+  createMdxAdapter: () => createMdxAdapter,
+  loadMdxAdapter: () => loadMdxAdapter
+});
+function createMdxAdapter() {
+  return new MdxRendererAdapter();
+}
+async function loadMdxAdapter() {
+  return createMdxAdapter();
+}
+var MdxRendererAdapter;
+var init_mdx_adapter = __esm({
+  "libs/uipack/src/runtime/adapters/mdx.adapter.ts"() {
+    "use strict";
+    MdxRendererAdapter = class {
+      type = "mdx";
+      // Lazy-loaded MDX runtime
+      mdxRuntime = null;
+      loadPromise = null;
+      /**
+       * Check if this adapter can handle the given content.
+       */
+      canHandle(content) {
+        if (typeof content !== "string") {
+          return false;
+        }
+        return /^---[\s\S]*?---/.test(content) || // Frontmatter
+        /<[A-Z][a-zA-Z0-9]*[\s/>]/.test(content) || // JSX component tags
+        /^import\s+/.test(content) || // Import statements
+        /^export\s+/.test(content) || // Export statements
+        content.includes("```jsx") || // Code blocks with JSX
+        content.includes("```tsx");
+      }
+      /**
+       * Render MDX content to a string.
+       */
+      async render(content, context, _options) {
+        try {
+          await this.ensureMdxLoaded();
+          if (!this.mdxRuntime) {
+            return this.renderMarkdown(content, context);
+          }
+          const compiled = await this.compileMdx(content, context);
+          return compiled;
+        } catch (error) {
+          console.error("[FrontMCP] MDX render failed:", error);
+          return this.renderMarkdown(content, context);
+        }
+      }
+      /**
+       * Render MDX content directly to the DOM.
+       */
+      async renderToDOM(content, target, context, _options) {
+        try {
+          const html = await this.render(content, context);
+          target.innerHTML = html;
+          target.dispatchEvent(
+            new CustomEvent("frontmcp:rendered", {
+              bubbles: true,
+              detail: { type: "mdx", toolName: context.toolName }
+            })
+          );
+          return { success: true, html };
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error);
+          console.error("[FrontMCP] MDX render to DOM failed:", message);
+          return { success: false, error: message };
+        }
+      }
+      /**
+       * Hydrate existing SSR content.
+       * MDX hydration follows React patterns.
+       */
+      async hydrate(target, context, options) {
+        const content = target.getAttribute("data-mdx-source");
+        if (content) {
+          return this.renderToDOM(content, target, context, options);
+        }
+        return { success: true };
+      }
+      /**
+       * Update rendered MDX content with new data.
+       */
+      async update(target, context) {
+        const source = target.getAttribute("data-mdx-source");
+        if (source) {
+          return this.renderToDOM(source, target, context);
+        }
+        return { success: false, error: "No MDX source stored for update" };
+      }
+      /**
+       * Clean up (no-op for MDX adapter).
+       */
+      destroy(_target) {
+      }
+      /**
+       * Ensure MDX runtime is loaded.
+       */
+      async ensureMdxLoaded() {
+        if (this.mdxRuntime) {
+          return;
+        }
+        if (this.loadPromise) {
+          return this.loadPromise;
+        }
+        this.loadPromise = this.loadMdx();
+        return this.loadPromise;
+      }
+      /**
+       * Load MDX runtime.
+       */
+      async loadMdx() {
+        try {
+          const mdxModule = await import(
+            /* webpackIgnore: true */
+            "@mdx-js/mdx"
+          );
+          this.mdxRuntime = {
+            run: async () => ({ default: null }),
+            compile: mdxModule.compile
+          };
+        } catch {
+          console.warn(
+            "[FrontMCP] MDX runtime not available. Install @mdx-js/mdx for full MDX support, or use pre-compiled MDX."
+          );
+        }
+      }
+      /**
+       * Compile MDX content.
+       */
+      async compileMdx(source, context) {
+        if (!this.mdxRuntime?.compile) {
+          return this.renderMarkdown(source, context);
+        }
+        try {
+          const compiled = await this.mdxRuntime.compile(source, {
+            outputFormat: "function-body",
+            development: false
+          });
+          return `<div class="mdx-content" data-compiled="true">${this.renderMarkdown(source, context)}</div>`;
+        } catch (error) {
+          console.warn("[FrontMCP] MDX compilation failed, falling back to markdown:", error);
+          return this.renderMarkdown(source, context);
+        }
+      }
+      /**
+       * Basic markdown rendering (fallback).
+       */
+      renderMarkdown(source, context) {
+        let html = source;
+        html = html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        html = html.replace(/^---[\s\S]*?---\n?/, "");
+        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, "<strong><em>$1</em></strong>");
+        html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+        html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+        html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre><code class="language-$1">$2</code></pre>');
+        html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+        html = html.replace(/^\s*[-*]\s+(.+)$/gm, "<li>$1</li>");
+        html = html.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>");
+        html = html.replace(/^\s*\d+\.\s+(.+)$/gm, "<li>$1</li>");
+        html = html.split(/\n\n+/).map((para) => {
+          const trimmed = para.trim();
+          if (!trimmed || trimmed.startsWith("<h") || trimmed.startsWith("<ul") || trimmed.startsWith("<ol") || trimmed.startsWith("<pre")) {
+            return trimmed;
+          }
+          return `<p>${trimmed}</p>`;
+        }).join("\n");
+        html = html.replace(/\{\{output\.(\w+)\}\}/g, (_match, key) => {
+          const value = context.output?.[key];
+          return value !== void 0 ? String(value) : "";
+        });
+        html = html.replace(/\{\{input\.(\w+)\}\}/g, (_match, key) => {
+          const value = context.input?.[key];
+          return value !== void 0 ? String(value) : "";
+        });
+        return `<div class="markdown-content">${html}</div>`;
+      }
+    };
+  }
+});
+
+// libs/uipack/src/bridge-runtime/iife-generator.ts
+function generateBridgeIIFE(options = {}) {
+  const { debug = false, trustedOrigins = [], minify = false } = options;
+  const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
+  const parts = [];
+  parts.push("(function() {");
+  parts.push('"use strict";');
+  parts.push("");
+  if (debug) {
+    parts.push('function log(msg) { console.log("[FrontMcpBridge] " + msg); }');
+  } else {
+    parts.push("function log() {}");
+  }
+  parts.push("");
+  parts.push("var DEFAULT_SAFE_AREA = { top: 0, bottom: 0, left: 0, right: 0 };");
+  parts.push("");
+  parts.push(generateContextDetection());
+  parts.push("");
+  parts.push(generateBaseCapabilities());
+  parts.push("");
+  if (adapters.includes("openai")) {
+    parts.push(generateOpenAIAdapter());
+    parts.push("");
+  }
+  if (adapters.includes("ext-apps")) {
+    parts.push(generateExtAppsAdapter(trustedOrigins));
+    parts.push("");
+  }
+  if (adapters.includes("claude")) {
+    parts.push(generateClaudeAdapter());
+    parts.push("");
+  }
+  if (adapters.includes("gemini")) {
+    parts.push(generateGeminiAdapter());
+    parts.push("");
+  }
+  if (adapters.includes("generic")) {
+    parts.push(generateGenericAdapter());
+    parts.push("");
+  }
+  parts.push(generatePlatformDetection(adapters));
+  parts.push("");
+  parts.push(generateBridgeClass());
+  parts.push("");
+  parts.push("var bridge = new FrontMcpBridge();");
+  parts.push("bridge.initialize().then(function() {");
+  parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
+  parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
+  parts.push("}).catch(function(err) {");
+  parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
+  parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
+  parts.push("});");
+  parts.push("");
+  parts.push("window.FrontMcpBridge = bridge;");
+  parts.push("})();");
+  const code = parts.join("\n");
+  if (minify) {
+    return minifyJS(code);
+  }
+  return code;
+}
+function generateContextDetection() {
+  return `
+function detectTheme() {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+}
+
+function detectLocale() {
+  if (typeof navigator !== 'undefined') {
+    return navigator.language || 'en-US';
+  }
+  return 'en-US';
+}
+
+function detectUserAgent() {
+  if (typeof navigator === 'undefined') {
+    return { type: 'web', hover: true, touch: false };
+  }
+  var ua = navigator.userAgent || '';
+  var isMobile = /iPhone|iPad|iPod|Android/i.test(ua);
+  var hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  var hasHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;
+  return { type: isMobile ? 'mobile' : 'web', hover: hasHover !== false, touch: hasTouch };
+}
+
+function detectViewport() {
+  if (typeof window !== 'undefined') {
+    return { width: window.innerWidth, height: window.innerHeight };
+  }
+  return undefined;
+}
+
+function readInjectedData() {
+  var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
+  if (typeof window !== 'undefined') {
+    if (window.__mcpToolInput) data.toolInput = window.__mcpToolInput;
+    if (window.__mcpToolOutput) data.toolOutput = window.__mcpToolOutput;
+    if (window.__mcpStructuredContent) data.structuredContent = window.__mcpStructuredContent;
+  }
+  return data;
+}
+`.trim();
+}
+function generateBaseCapabilities() {
+  return `
+var DEFAULT_CAPABILITIES = {
+  canCallTools: false,
+  canSendMessages: false,
+  canOpenLinks: false,
+  canPersistState: true,
+  hasNetworkAccess: true,
+  supportsDisplayModes: false,
+  supportsTheme: true
+};
+`.trim();
+}
+function generateOpenAIAdapter() {
+  return `
+var OpenAIAdapter = {
+  id: 'openai',
+  name: 'OpenAI ChatGPT',
+  priority: 100,
+  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
+    canCallTools: true,
+    canSendMessages: true,
+    canOpenLinks: true,
+    supportsDisplayModes: true
+  }),
+  canHandle: function() {
+    if (typeof window === 'undefined') return false;
+    // Check for window.openai.callTool (the actual OpenAI SDK API)
+    if (window.openai && typeof window.openai.callTool === 'function') return true;
+    // Also check if we're being injected with tool metadata (OpenAI injects toolOutput)
+    if (window.openai && (window.openai.toolOutput !== undefined || window.openai.toolInput !== undefined)) return true;
+    return false;
+  },
+  initialize: function(context) {
+    var sdk = window.openai;
+    context.sdk = sdk;
+    // OpenAI SDK exposes theme and displayMode directly as properties
+    if (sdk.theme) {
+      context.hostContext.theme = sdk.theme;
+    }
+    if (sdk.displayMode) {
+      context.hostContext.displayMode = sdk.displayMode;
+    }
+    // Note: OpenAI SDK does not have an onContextChange equivalent
+    return Promise.resolve();
+  },
+  callTool: function(context, name, args) {
+    return context.sdk.callTool(name, args);
+  },
+  sendMessage: function(context, content) {
+    if (typeof context.sdk.sendFollowUpMessage === 'function') {
+      return context.sdk.sendFollowUpMessage(content);
+    }
+    return Promise.reject(new Error('Messages not supported'));
+  },
+  openLink: function(context, url) {
+    window.open(url, '_blank', 'noopener,noreferrer');
+    return Promise.resolve();
+  },
+  requestDisplayMode: function(context, mode) {
+    return Promise.resolve();
+  },
+  requestClose: function(context) {
+    return Promise.resolve();
+  }
+};
+`.trim();
+}
+function generateExtAppsAdapter(trustedOrigins) {
+  const originsArray = trustedOrigins.length > 0 ? JSON.stringify(trustedOrigins) : "[]";
+  return `
+var ExtAppsAdapter = {
+  id: 'ext-apps',
+  name: 'ext-apps (SEP-1865)',
+  priority: 80,
+  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, { canPersistState: true, hasNetworkAccess: true }),
+  trustedOrigins: ${originsArray},
+  trustedOrigin: null,
+  pendingRequests: {},
+  requestId: 0,
+  hostCapabilities: {},
+  canHandle: function() {
+    if (typeof window === 'undefined') return false;
+    if (window.parent === window) return false;
+    // Check for OpenAI SDK (window.openai.callTool) - defer to OpenAIAdapter
+    if (window.openai && typeof window.openai.callTool === 'function') return false;
+    if (window.__mcpPlatform === 'ext-apps') return true;
+    return true;
+  },
+  initialize: function(context) {
+    var self = this;
+    context.extApps = this;
+
+    window.addEventListener('message', function(event) {
+      self.handleMessage(context, event);
+    });
+
+    return self.performHandshake(context);
+  },
+  handleMessage: function(context, event) {
+    if (!this.isOriginTrusted(event.origin)) return;
+    var data = event.data;
+    if (!data || typeof data !== 'object' || data.jsonrpc !== '2.0') return;
+
+    if ('id' in data && (data.result !== undefined || data.error !== undefined)) {
+      var pending = this.pendingRequests[data.id];
+      if (pending) {
+        clearTimeout(pending.timeout);
+        delete this.pendingRequests[data.id];
+        if (data.error) {
+          pending.reject(new Error(data.error.message + ' (code: ' + data.error.code + ')'));
+        } else {
+          pending.resolve(data.result);
+        }
+      }
+      return;
+    }
+
+    if ('method' in data && !('id' in data)) {
+      this.handleNotification(context, data);
+    }
+  },
+  handleNotification: function(context, notification) {
+    var params = notification.params || {};
+    switch (notification.method) {
+      case 'ui/notifications/tool-input':
+        context.toolInput = params.arguments || {};
+        window.dispatchEvent(new CustomEvent('tool:input', { detail: { arguments: context.toolInput } }));
+        break;
+      case 'ui/notifications/tool-result':
+        context.toolOutput = params.content;
+        context.structuredContent = params.structuredContent;
+        context.notifyToolResult(params.content);
+        window.dispatchEvent(new CustomEvent('tool:result', { detail: params }));
+        break;
+      case 'ui/notifications/host-context-changed':
+        Object.assign(context.hostContext, params);
+        context.notifyContextChange(params);
+        break;
+    }
+  },
+  isOriginTrusted: function(origin) {
+    if (this.trustedOrigins.length > 0) {
+      return this.trustedOrigins.indexOf(origin) !== -1;
+    }
+    // When no trusted origins configured, trust first message origin (trust-on-first-use).
+    // SECURITY WARNING: This creates a race condition - whichever iframe sends the first
+    // message establishes permanent trust. For production, always configure trustedOrigins.
+    if (!this.trustedOrigin) {
+      if (window.parent !== window && origin) {
+        this.trustedOrigin = origin;
+        return true;
+      }
+      return false;
+    }
+    return this.trustedOrigin === origin;
+  },
+  sendRequest: function(method, params) {
+    var self = this;
+    return new Promise(function(resolve, reject) {
+      // Security: Require trusted origin before sending requests to prevent message leaks
+      if (!self.trustedOrigin && self.trustedOrigins.length === 0) {
+        reject(new Error('Cannot send request: no trusted origin established'));
+        return;
+      }
+
+      var id = ++self.requestId;
+      var timeout = setTimeout(function() {
+        delete self.pendingRequests[id];
+        reject(new Error('Request ' + method + ' timed out'));
+      }, 10000);
+
+      self.pendingRequests[id] = { resolve: resolve, reject: reject, timeout: timeout };
+
+      var targetOrigin = self.trustedOrigin || self.trustedOrigins[0];
+      window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
+    });
+  },
+  performHandshake: function(context) {
+    var self = this;
+    var params = {
+      appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
+      appCapabilities: { tools: { listChanged: false } },
+      protocolVersion: '2024-11-05'
+    };
+
+    return this.sendRequest('ui/initialize', params).then(function(result) {
+      self.hostCapabilities = result.hostCapabilities || {};
+      self.capabilities = Object.assign({}, self.capabilities, {
+        canCallTools: Boolean(self.hostCapabilities.serverToolProxy),
+        canSendMessages: true,
+        canOpenLinks: Boolean(self.hostCapabilities.openLink),
+        supportsDisplayModes: true
+      });
+      if (result.hostContext) {
+        Object.assign(context.hostContext, result.hostContext);
+      }
+    });
+  },
+  callTool: function(context, name, args) {
+    if (!this.hostCapabilities.serverToolProxy) {
+      return Promise.reject(new Error('Server tool proxy not supported'));
+    }
+    return this.sendRequest('ui/callServerTool', { name: name, arguments: args });
+  },
+  sendMessage: function(context, content) {
+    return this.sendRequest('ui/message', { content: content });
+  },
+  openLink: function(context, url) {
+    if (!this.hostCapabilities.openLink) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+      return Promise.resolve();
+    }
+    return this.sendRequest('ui/openLink', { url: url });
+  },
+  requestDisplayMode: function(context, mode) {
+    return this.sendRequest('ui/setDisplayMode', { mode: mode });
+  },
+  requestClose: function(context) {
+    return this.sendRequest('ui/close', {});
+  }
+};
+`.trim();
+}
+function generateClaudeAdapter() {
+  return `
+var ClaudeAdapter = {
+  id: 'claude',
+  name: 'Claude (Anthropic)',
+  priority: 60,
+  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
+    canCallTools: false,
+    canSendMessages: false,
+    canOpenLinks: true,
+    hasNetworkAccess: false,
+    supportsDisplayModes: false
+  }),
+  canHandle: function() {
+    if (typeof window === 'undefined') return false;
+    if (window.__mcpPlatform === 'claude') return true;
+    if (window.claude) return true;
+    if (window.__claudeArtifact) return true;
+    if (typeof location !== 'undefined') {
+      var href = location.href;
+      if (href.indexOf('claude.ai') !== -1 || href.indexOf('anthropic.com') !== -1) return true;
+    }
+    return false;
+  },
+  initialize: function(context) {
+    return Promise.resolve();
+  },
+  callTool: function() {
+    return Promise.reject(new Error('Tool calls not supported in Claude'));
+  },
+  sendMessage: function() {
+    return Promise.reject(new Error('Messages not supported in Claude'));
+  },
+  openLink: function(context, url) {
+    window.open(url, '_blank', 'noopener,noreferrer');
+    return Promise.resolve();
+  },
+  requestDisplayMode: function() {
+    return Promise.resolve();
+  },
+  requestClose: function() {
+    return Promise.resolve();
+  }
+};
+`.trim();
+}
+function generateGeminiAdapter() {
+  return `
+var GeminiAdapter = {
+  id: 'gemini',
+  name: 'Google Gemini',
+  priority: 40,
+  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
+    canOpenLinks: true,
+    hasNetworkAccess: true
+  }),
+  canHandle: function() {
+    if (typeof window === 'undefined') return false;
+    if (window.__mcpPlatform === 'gemini') return true;
+    if (window.gemini) return true;
+    if (typeof location !== 'undefined') {
+      var href = location.href;
+      if (href.indexOf('gemini.google.com') !== -1 || href.indexOf('bard.google.com') !== -1) return true;
+    }
+    return false;
+  },
+  initialize: function(context) {
+    if (window.gemini && window.gemini.ui && window.gemini.ui.getTheme) {
+      context.hostContext.theme = window.gemini.ui.getTheme() === 'dark' ? 'dark' : 'light';
+    }
+    return Promise.resolve();
+  },
+  callTool: function() {
+    return Promise.reject(new Error('Tool calls not supported in Gemini'));
+  },
+  sendMessage: function(context, content) {
+    if (window.gemini && window.gemini.ui && window.gemini.ui.sendMessage) {
+      return window.gemini.ui.sendMessage(content);
+    }
+    return Promise.reject(new Error('Messages not supported in Gemini'));
+  },
+  openLink: function(context, url) {
+    if (window.gemini && window.gemini.ui && window.gemini.ui.openLink) {
+      return window.gemini.ui.openLink(url);
+    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+    return Promise.resolve();
+  },
+  requestDisplayMode: function() {
+    return Promise.resolve();
+  },
+  requestClose: function() {
+    return Promise.resolve();
+  }
+};
+`.trim();
+}
+function generateGenericAdapter() {
+  return `
+var GenericAdapter = {
+  id: 'generic',
+  name: 'Generic Web',
+  priority: 0,
+  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
+    canOpenLinks: true,
+    hasNetworkAccess: true
+  }),
+  canHandle: function() {
+    return typeof window !== 'undefined';
+  },
+  initialize: function(context) {
+    return Promise.resolve();
+  },
+  callTool: function() {
+    return Promise.reject(new Error('Tool calls not supported'));
+  },
+  sendMessage: function() {
+    return Promise.reject(new Error('Messages not supported'));
+  },
+  openLink: function(context, url) {
+    window.open(url, '_blank', 'noopener,noreferrer');
+    return Promise.resolve();
+  },
+  requestDisplayMode: function() {
+    return Promise.resolve();
+  },
+  requestClose: function() {
+    return Promise.resolve();
+  }
+};
+`.trim();
+}
+function generatePlatformDetection(adapters) {
+  const adapterVars = adapters.map((a) => {
+    switch (a) {
+      case "openai":
+        return "OpenAIAdapter";
+      case "ext-apps":
+        return "ExtAppsAdapter";
+      case "claude":
+        return "ClaudeAdapter";
+      case "gemini":
+        return "GeminiAdapter";
+      case "generic":
+        return "GenericAdapter";
+      default:
+        return "";
+    }
+  }).filter(Boolean);
+  return `
+var ADAPTERS = [${adapterVars.join(", ")}].sort(function(a, b) { return b.priority - a.priority; });
+
+function detectPlatform() {
+  for (var i = 0; i < ADAPTERS.length; i++) {
+    if (ADAPTERS[i].canHandle()) {
+      log('Detected platform: ' + ADAPTERS[i].id);
+      return ADAPTERS[i];
+    }
+  }
+  log('No platform detected, using generic');
+  return GenericAdapter;
+}
+`.trim();
+}
+function generateBridgeClass() {
+  return `
+function FrontMcpBridge() {
+  this._adapter = null;
+  this._initialized = false;
+  this._context = {
+    hostContext: {
+      theme: detectTheme(),
+      displayMode: 'inline',
+      locale: detectLocale(),
+      userAgent: detectUserAgent(),
+      safeArea: DEFAULT_SAFE_AREA,
+      viewport: detectViewport()
+    },
+    toolInput: {},
+    toolOutput: undefined,
+    structuredContent: undefined,
+    widgetState: {},
+    contextListeners: [],
+    toolResultListeners: [],
+    notifyContextChange: function(changes) {
+      Object.assign(this.hostContext, changes);
+      for (var i = 0; i < this.contextListeners.length; i++) {
+        try { this.contextListeners[i](changes); } catch(e) {}
+      }
+    },
+    notifyToolResult: function(result) {
+      this.toolOutput = result;
+      for (var i = 0; i < this.toolResultListeners.length; i++) {
+        try { this.toolResultListeners[i](result); } catch(e) {}
+      }
+    }
+  };
+
+  var injected = readInjectedData();
+  this._context.toolInput = injected.toolInput;
+  this._context.toolOutput = injected.toolOutput;
+  this._context.structuredContent = injected.structuredContent;
+
+  this._loadWidgetState();
+}
+
+FrontMcpBridge.prototype._loadWidgetState = function() {
+  try {
+    var key = 'frontmcp:widget:' + (window.__mcpToolName || 'unknown');
+    var stored = localStorage.getItem(key);
+    if (stored) this._context.widgetState = JSON.parse(stored);
+  } catch(e) {}
+};
+
+FrontMcpBridge.prototype._saveWidgetState = function() {
+  try {
+    var key = 'frontmcp:widget:' + (window.__mcpToolName || 'unknown');
+    localStorage.setItem(key, JSON.stringify(this._context.widgetState));
+  } catch(e) {}
+};
+
+FrontMcpBridge.prototype.initialize = function() {
+  if (this._initialized) return Promise.resolve();
+  var self = this;
+  this._adapter = detectPlatform();
+  return this._adapter.initialize(this._context).then(function() {
+    self._initialized = true;
+    // Set up the data-tool-call click handler after initialization
+    self._setupDataToolCallHandler();
+  });
+};
+
+Object.defineProperty(FrontMcpBridge.prototype, 'initialized', { get: function() { return this._initialized; } });
+Object.defineProperty(FrontMcpBridge.prototype, 'adapterId', { get: function() { return this._adapter ? this._adapter.id : undefined; } });
+Object.defineProperty(FrontMcpBridge.prototype, 'capabilities', { get: function() { return this._adapter ? this._adapter.capabilities : DEFAULT_CAPABILITIES; } });
+
+FrontMcpBridge.prototype.getTheme = function() { return this._context.hostContext.theme; };
+FrontMcpBridge.prototype.getDisplayMode = function() { return this._context.hostContext.displayMode; };
+FrontMcpBridge.prototype.getToolInput = function() { return this._context.toolInput; };
+FrontMcpBridge.prototype.getToolOutput = function() { return this._context.toolOutput; };
+FrontMcpBridge.prototype.getStructuredContent = function() { return this._context.structuredContent; };
+FrontMcpBridge.prototype.getWidgetState = function() { return this._context.widgetState; };
+FrontMcpBridge.prototype.getHostContext = function() { return Object.assign({}, this._context.hostContext); };
+FrontMcpBridge.prototype.hasCapability = function(cap) { return this._adapter && this._adapter.capabilities[cap] === true; };
+
+// Get tool response metadata (platform-agnostic)
+// Used by inline mode widgets to detect when ui/html arrives
+FrontMcpBridge.prototype.getToolResponseMetadata = function() {
+  // OpenAI injects toolResponseMetadata for widget-producing tools
+  if (typeof window !== 'undefined' && window.openai && window.openai.toolResponseMetadata) {
+    return window.openai.toolResponseMetadata;
+  }
+  // Claude (future support)
+  if (typeof window !== 'undefined' && window.claude && window.claude.toolResponseMetadata) {
+    return window.claude.toolResponseMetadata;
+  }
+  // FrontMCP direct injection (for testing/ext-apps)
+  if (typeof window !== 'undefined' && window.__mcpToolResponseMetadata) {
+    return window.__mcpToolResponseMetadata;
+  }
+  return null;
+};
+
+// Subscribe to tool response metadata changes (for inline mode injection)
+FrontMcpBridge.prototype.onToolResponseMetadata = function(callback) {
+  var self = this;
+  var called = false;
+
+  // Check if already available
+  var existing = self.getToolResponseMetadata();
+  if (existing) {
+    called = true;
+    callback(existing);
+  }
+
+  // Set up property interceptors for OpenAI
+  if (typeof window !== 'undefined') {
+    // OpenAI: Intercept toolResponseMetadata assignment
+    if (!window.__frontmcpMetadataIntercepted) {
+      window.__frontmcpMetadataIntercepted = true;
+      window.__frontmcpMetadataCallbacks = [];
+
+      // Create openai object if it doesn't exist
+      if (!window.openai) window.openai = {};
+
+      var originalMetadata = window.openai.toolResponseMetadata;
+      Object.defineProperty(window.openai, 'toolResponseMetadata', {
+        get: function() { return originalMetadata; },
+        set: function(val) {
+          originalMetadata = val;
+          log('toolResponseMetadata set, notifying ' + window.__frontmcpMetadataCallbacks.length + ' listeners');
+          for (var i = 0; i < window.__frontmcpMetadataCallbacks.length; i++) {
+            try { window.__frontmcpMetadataCallbacks[i](val); } catch(e) {}
+          }
+        },
+        configurable: true
+      });
+    }
+
+    // Register callback wrapper (store reference for unsubscribe)
+    var wrapper = function(metadata) {
+      if (!called) {
+        called = true;
+        callback(metadata);
+      }
+    };
+    window.__frontmcpMetadataCallbacks.push(wrapper);
+
+    // Return unsubscribe function that removes the wrapper (not the original callback)
+    return function() {
+      if (window.__frontmcpMetadataCallbacks) {
+        var idx = window.__frontmcpMetadataCallbacks.indexOf(wrapper);
+        if (idx !== -1) window.__frontmcpMetadataCallbacks.splice(idx, 1);
+      }
+    };
+  }
+
+  // Return no-op unsubscribe for non-window environments
+  return function() {};
+};
+
+FrontMcpBridge.prototype.callTool = function(name, args) {
+  // Priority 1: Direct OpenAI SDK call (most reliable in OpenAI iframe)
+  // This bypasses adapter abstraction for maximum compatibility
+  if (typeof window !== 'undefined' && window.openai && typeof window.openai.callTool === 'function') {
+    log('callTool: Using OpenAI SDK directly');
+    return window.openai.callTool(name, args);
+  }
+
+  // Priority 2: Use adapter (if initialized and supports tool calls)
+  if (this._adapter && this._adapter.capabilities && this._adapter.capabilities.canCallTools) {
+    log('callTool: Using adapter ' + this._adapter.id);
+    return this._adapter.callTool(this._context, name, args);
+  }
+
+  // Not initialized or no tool support
+  if (!this._adapter) {
+    return Promise.reject(new Error('Bridge not initialized. Wait for bridge:ready event.'));
+  }
+  return Promise.reject(new Error('Tool calls not supported on this platform (' + this._adapter.id + ')'));
+};
+
+FrontMcpBridge.prototype.sendMessage = function(content) {
+  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
+  return this._adapter.sendMessage(this._context, content);
+};
+
+FrontMcpBridge.prototype.openLink = function(url) {
+  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
+  return this._adapter.openLink(this._context, url);
+};
+
+FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
+  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
+  var self = this;
+  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
+    self._context.hostContext.displayMode = mode;
+  });
+};
+
+FrontMcpBridge.prototype.requestClose = function() {
+  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
+  return this._adapter.requestClose(this._context);
+};
+
+FrontMcpBridge.prototype.setWidgetState = function(state) {
+  Object.assign(this._context.widgetState, state);
+  this._saveWidgetState();
+};
+
+FrontMcpBridge.prototype.onContextChange = function(callback) {
+  var listeners = this._context.contextListeners;
+  listeners.push(callback);
+  return function() {
+    var idx = listeners.indexOf(callback);
+    if (idx !== -1) listeners.splice(idx, 1);
+  };
+};
+
+FrontMcpBridge.prototype.onToolResult = function(callback) {
+  var listeners = this._context.toolResultListeners;
+  listeners.push(callback);
+  return function() {
+    var idx = listeners.indexOf(callback);
+    if (idx !== -1) listeners.splice(idx, 1);
+  };
+};
+
+// ==================== data-tool-call Click Handler ====================
+
+FrontMcpBridge.prototype._setupDataToolCallHandler = function() {
+  var self = this;
+
+  document.addEventListener('click', function(e) {
+    // Find the closest element with data-tool-call attribute
+    var target = e.target;
+    while (target && target !== document) {
+      if (target.hasAttribute && target.hasAttribute('data-tool-call')) {
+        var toolName = target.getAttribute('data-tool-call');
+        var argsAttr = target.getAttribute('data-tool-args');
+        var args = {};
+
+        try {
+          if (argsAttr) {
+            args = JSON.parse(argsAttr);
+          }
+        } catch (parseErr) {
+          console.error('[frontmcp] Failed to parse data-tool-args:', parseErr);
+        }
+
+        log('data-tool-call clicked: ' + toolName);
+
+        // Show loading state - save original content first
+        var originalContent = target.innerHTML;
+        var originalDisabled = target.disabled;
+        target.disabled = true;
+        target.classList.add('opacity-50', 'cursor-not-allowed');
+
+        // Add spinner for buttons
+        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
+        if (target.tagName === 'BUTTON') {
+          target.innerHTML = spinner + 'Loading...';
+        }
+
+        // Helper to reset button state
+        function resetButton() {
+          target.innerHTML = originalContent;
+          target.disabled = originalDisabled;
+          target.classList.remove('opacity-50', 'cursor-not-allowed');
+        }
+
+        // Determine how to call the tool
+        var toolCallPromise;
+
+        // Priority 1: Direct OpenAI SDK call (bypasses adapter abstraction)
+        if (typeof window !== 'undefined' && window.openai && typeof window.openai.callTool === 'function') {
+          log('Using OpenAI SDK directly for tool call');
+          toolCallPromise = window.openai.callTool(toolName, args);
+        }
+        // Priority 2: Use adapter (if it supports tool calls)
+        else if (self.hasCapability('canCallTools')) {
+          log('Using adapter for tool call');
+          toolCallPromise = self.callTool(toolName, args);
+        }
+        // No tool call capability
+        else {
+          console.error('[frontmcp] Tool calls not supported on this platform (' + self.adapterId + ')');
+          resetButton();
+          target.dispatchEvent(new CustomEvent('tool:error', {
+            detail: { name: toolName, args: args, error: 'Tool calls not supported on this platform' },
+            bubbles: true
+          }));
+          e.preventDefault();
+          return;
+        }
+
+        // Handle the tool call result
+        toolCallPromise.then(function(result) {
+          log('Tool call succeeded: ' + toolName);
+          resetButton();
+
+          // Update bridge state to trigger widget re-render
+          // React isn't hydrated in OpenAI iframe, so useState doesn't work
+          // Instead, we use the bridge's reactive state system
+          if (result && window.__frontmcp && window.__frontmcp.bridge && typeof window.__frontmcp.bridge.setWidgetState === 'function') {
+            var newData = result.structuredContent || result;
+            log('Updating bridge state with new data');
+            window.__frontmcp.bridge.setWidgetState(newData);
+          }
+
+          // Dispatch success event
+          target.dispatchEvent(new CustomEvent('tool:success', {
+            detail: { name: toolName, args: args, result: result },
+            bubbles: true
+          }));
+        }).catch(function(err) {
+          console.error('[frontmcp] Tool call failed: ' + toolName, err);
+          resetButton();
+          // Dispatch error event
+          target.dispatchEvent(new CustomEvent('tool:error', {
+            detail: { name: toolName, args: args, error: err.message || err },
+            bubbles: true
+          }));
+        });
+
+        // Prevent default behavior (e.g., form submission)
+        e.preventDefault();
+        return;
+      }
+      target = target.parentElement;
+    }
+  }, true); // Use capture phase to handle before React handlers
+};
+`.trim();
+}
+function minifyJS(code) {
+  return code.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "").replace(/\s+/g, " ").replace(/\s*([{};,:()[\]])\s*/g, "$1").replace(/;\}/g, "}").trim();
+}
+function generatePlatformBundle(platform, options = {}) {
+  const platformAdapters = {
+    chatgpt: ["openai", "generic"],
+    claude: ["claude", "generic"],
+    gemini: ["gemini", "generic"],
+    universal: ["openai", "ext-apps", "claude", "gemini", "generic"]
+  };
+  return generateBridgeIIFE({
+    ...options,
+    adapters: platformAdapters[platform]
+  });
+}
+var UNIVERSAL_BRIDGE_SCRIPT = generateBridgeIIFE();
+var BRIDGE_SCRIPT_TAGS = {
+  universal: `<script>${UNIVERSAL_BRIDGE_SCRIPT}</script>`,
+  chatgpt: `<script>${generatePlatformBundle("chatgpt")}</script>`,
+  claude: `<script>${generatePlatformBundle("claude")}</script>`,
+  gemini: `<script>${generatePlatformBundle("gemini")}</script>`
+};
+
+// libs/uipack/src/runtime/mcp-bridge.ts
+var MCP_BRIDGE_RUNTIME = `
+<script>
+(function() {
+  'use strict';
+
+  // ==================== Environment Detection ====================
+
+  var isOpenAI = typeof window.openai !== 'undefined';
+  var isExtApps = window.parent !== window && !isOpenAI;
+  var isClaude = typeof window.claude !== 'undefined' ||
+    (window.__mcpPlatform === 'claude');
+  var isGemini = window.__mcpPlatform === 'gemini';
+
+  // ==================== Internal State ====================
+
+  var messageId = 0;
+  var pendingRequests = new Map();
+  var contextChangeListeners = [];
+  var toolResultListeners = [];
+
+  // Default values for polyfilled properties
+  var defaultSafeArea = { top: 0, bottom: 0, left: 0, right: 0 };
+  var defaultUserAgent = { type: 'web', hover: true, touch: false };
+
+  // Host context (for ext-apps and polyfill mode)
+  var hostContext = window.__mcpHostContext || {
+    theme: 'light',
+    displayMode: 'inline'
+  };
+
+  // Trusted origin for postMessage validation (set during ext-apps initialization)
+  var trustedOrigin = null;
+
+  // Detect device capabilities
+  var detectUserAgent = function() {
+    var ua = navigator.userAgent || '';
+    var isMobile = /iPhone|iPad|iPod|Android/i.test(ua);
+    var hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    var hasHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;
+    return {
+      type: isMobile ? 'mobile' : 'web',
+      hover: hasHover !== false,
+      touch: hasTouch
+    };
+  };
+
+  // Detect theme from system preference
+  var detectTheme = function() {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  };
+
+  // ==================== Bridge Implementation ====================
+
+  /**
+   * MCP Bridge provides full OpenAI API compatibility.
+   * On OpenAI, it proxies directly to window.openai.
+   * On other platforms, it provides polyfills.
+   */
+  var bridge = {
+    // ==================== Environment Info ====================
+
+    get provider() {
+      if (isOpenAI) return 'openai';
+      if (isClaude) return 'claude';
+      if (isGemini) return 'gemini';
+      if (isExtApps) return 'ext-apps';
+      return 'unknown';
+    },
+
+    // ==================== OpenAI-Compatible Properties ====================
+
+    get theme() {
+      if (isOpenAI && window.openai) {
+        return window.openai.theme || 'light';
+      }
+      return hostContext.theme || detectTheme();
+    },
+
+    get userAgent() {
+      if (isOpenAI && window.openai && window.openai.userAgent) {
+        return window.openai.userAgent;
+      }
+      return hostContext.userAgent || detectUserAgent();
+    },
+
+    get locale() {
+      if (isOpenAI && window.openai && window.openai.locale) {
+        return window.openai.locale;
+      }
+      return navigator.language || 'en-US';
+    },
+
+    get maxHeight() {
+      if (isOpenAI && window.openai) {
+        return window.openai.maxHeight;
+      }
+      return hostContext.viewport ? hostContext.viewport.maxHeight : undefined;
+    },
+
+    get displayMode() {
+      if (isOpenAI && window.openai) {
+        return window.openai.displayMode || 'inline';
+      }
+      return hostContext.displayMode || 'inline';
+    },
+
+    get safeArea() {
+      if (isOpenAI && window.openai && window.openai.safeArea) {
+        return window.openai.safeArea;
+      }
+      return hostContext.safeArea || defaultSafeArea;
+    },
+
+    get toolInput() {
+      if (isOpenAI && window.openai && window.openai.toolInput) {
+        return window.openai.toolInput;
+      }
+      return window.__mcpToolInput || {};
+    },
+
+    get toolOutput() {
+      if (isOpenAI && window.openai) {
+        return window.openai.toolOutput;
+      }
+      return window.__mcpToolOutput;
+    },
+
+    get structuredContent() {
+      // Alias for toolOutput to maintain compatibility
+      if (isOpenAI && window.openai) {
+        return window.openai.toolOutput;
+      }
+      return window.__mcpStructuredContent;
+    },
+
+    get toolResponseMetadata() {
+      if (isOpenAI && window.openai && window.openai.toolResponseMetadata) {
+        return window.openai.toolResponseMetadata;
+      }
+      return window.__mcpToolResponseMetadata || {};
+    },
+
+    get widgetState() {
+      if (isOpenAI && window.openai) {
+        return window.openai.widgetState || {};
+      }
+      // Polyfill: use localStorage
+      try {
+        var stored = localStorage.getItem('__mcpWidgetState');
+        return stored ? JSON.parse(stored) : {};
+      } catch (e) {
+        return {};
+      }
+    },
+
+    // ==================== OpenAI-Compatible Methods ====================
+
+    callTool: function(name, params) {
+      if (isOpenAI && window.openai && window.openai.callTool) {
+        return window.openai.callTool(name, params);
+      }
+      if (isClaude) {
+        return Promise.reject(new Error(
+          'Tool calls are not supported in Claude widgets (network-blocked sandbox)'
+        ));
+      }
+      if (isGemini) {
+        return Promise.reject(new Error(
+          'Tool calls are not supported in Gemini widgets'
+        ));
+      }
+      if (isExtApps) {
+        return this._sendRequest('tools/call', { name: name, arguments: params });
+      }
+      return Promise.reject(new Error('Tool calls not supported in this environment'));
+    },
+
+    requestDisplayMode: function(options) {
+      if (isOpenAI && window.openai && window.openai.requestDisplayMode) {
+        return window.openai.requestDisplayMode(options);
+      }
+      if (isExtApps) {
+        return this._sendRequest('ui/request-display-mode', options);
+      }
+      // Polyfill: just update local state
+      if (options && options.mode) {
+        hostContext.displayMode = options.mode;
+        contextChangeListeners.forEach(function(cb) {
+          try { cb({ displayMode: options.mode }); } catch (e) {}
+        });
+      }
+      return Promise.resolve();
+    },
+
+    requestClose: function() {
+      if (isOpenAI && window.openai && window.openai.requestClose) {
+        return window.openai.requestClose();
+      }
+      if (isExtApps) {
+        return this._sendRequest('ui/request-close', {});
+      }
+      // Polyfill: dispatch event for parent to handle
+      window.dispatchEvent(new CustomEvent('mcp:request-close'));
+      return Promise.resolve();
+    },
+
+    openExternal: function(options) {
+      var href = typeof options === 'string' ? options : (options && options.href);
+      if (!href) {
+        return Promise.reject(new Error('URL required'));
+      }
+      if (isOpenAI && window.openai && window.openai.openExternal) {
+        return window.openai.openExternal({ href: href });
+      }
+      if (isExtApps) {
+        return this._sendRequest('ui/open-link', { url: href });
+      }
+      // Fallback: open in new window
+      window.open(href, '_blank', 'noopener,noreferrer');
+      return Promise.resolve();
+    },
+
+    // Alias for openExternal (backwards compatibility)
+    openLink: function(url) {
+      return this.openExternal({ href: url });
+    },
+
+    sendFollowUpMessage: function(options) {
+      var prompt = typeof options === 'string' ? options : (options && options.prompt);
+      if (!prompt) {
+        return Promise.reject(new Error('Prompt required'));
+      }
+      if (isOpenAI && window.openai && window.openai.sendFollowUpMessage) {
+        return window.openai.sendFollowUpMessage({ prompt: prompt });
+      }
+      if (isClaude) {
+        return Promise.reject(new Error(
+          'Follow-up messages are not supported in Claude widgets (network-blocked sandbox)'
+        ));
+      }
+      if (isGemini) {
+        return Promise.reject(new Error(
+          'Follow-up messages are not supported in Gemini widgets'
+        ));
+      }
+      if (isExtApps) {
+        return this._sendRequest('ui/message', {
+          role: 'user',
+          content: { type: 'text', text: prompt }
+        });
+      }
+      return Promise.reject(new Error('Messages not supported in this environment'));
+    },
+
+    // Alias for sendFollowUpMessage (backwards compatibility)
+    sendMessage: function(content) {
+      return this.sendFollowUpMessage({ prompt: content });
+    },
+
+    setWidgetState: function(state) {
+      if (isOpenAI && window.openai && window.openai.setWidgetState) {
+        window.openai.setWidgetState(state);
+        return;
+      }
+      // Polyfill: persist to localStorage
+      try {
+        localStorage.setItem('__mcpWidgetState', JSON.stringify(state));
+      } catch (e) {
+        console.warn('Failed to persist widget state:', e);
+      }
+    },
+
+    // ==================== Context API (MCP-specific) ====================
+
+    get context() {
+      return {
+        theme: this.theme,
+        displayMode: this.displayMode,
+        viewport: this.maxHeight ? { maxHeight: this.maxHeight } : undefined,
+        userAgent: this.userAgent,
+        locale: this.locale,
+        safeArea: this.safeArea
+      };
+    },
+
+    onContextChange: function(callback) {
+      contextChangeListeners.push(callback);
+      return function() {
+        var index = contextChangeListeners.indexOf(callback);
+        if (index > -1) contextChangeListeners.splice(index, 1);
+      };
+    },
+
+    onToolResult: function(callback) {
+      toolResultListeners.push(callback);
+      return function() {
+        var index = toolResultListeners.indexOf(callback);
+        if (index > -1) toolResultListeners.splice(index, 1);
+      };
+    },
+
+    // ==================== Internal Methods ====================
+
+    _sendRequest: function(method, params) {
+      return new Promise(function(resolve, reject) {
+        var id = ++messageId;
+        pendingRequests.set(id, { resolve: resolve, reject: reject });
+
+        window.parent.postMessage({
+          jsonrpc: '2.0',
+          id: id,
+          method: method,
+          params: params
+        }, '*');
+
+        // Timeout after 30s
+        setTimeout(function() {
+          if (pendingRequests.has(id)) {
+            pendingRequests.delete(id);
+            reject(new Error('Request timeout'));
+          }
+        }, 30000);
+      });
+    },
+
+    _initExtApps: function() {
+      var self = this;
+      return this._sendRequest('ui/initialize', {}).then(function(result) {
+        if (result && result.hostContext) {
+          hostContext = Object.assign(hostContext, result.hostContext);
+        }
+        // Note: trustedOrigin is now set from first message event origin (trust-on-first-use)
+        // Send initialized notification
+        window.parent.postMessage({
+          jsonrpc: '2.0',
+          method: 'ui/notifications/initialized',
+          params: {}
+        }, '*');
+        return result;
+      });
+    }
+  };
+
+  // ==================== Event Handling ====================
+
+  window.addEventListener('message', function(event) {
+    var data = event.data;
+    if (!data || data.jsonrpc !== '2.0') return;
+
+    // Trust-on-first-use: Establish trusted origin from the first valid message
+    if (isExtApps && !trustedOrigin && event.origin) {
+      trustedOrigin = event.origin;
+    }
+
+    // Validate origin for ext-apps environment to prevent spoofed messages
+    if (isExtApps && trustedOrigin && event.origin !== trustedOrigin) {
+      console.warn('MCP Bridge: Ignoring message from untrusted origin:', event.origin);
+      return;
+    }
+
+    // Handle responses
+    if (data.id && pendingRequests.has(data.id)) {
+      var pending = pendingRequests.get(data.id);
+      pendingRequests.delete(data.id);
+
+      if (data.error) {
+        var err = new Error(data.error.message || 'Unknown error');
+        err.code = data.error.code;
+        err.data = data.error.data;
+        pending.reject(err);
+      } else {
+        pending.resolve(data.result);
+      }
+      return;
+    }
+
+    // Handle notifications
+    switch (data.method) {
+      case 'ui/notifications/tool-input':
+        window.__mcpToolInput = data.params && data.params.arguments;
+        window.dispatchEvent(new CustomEvent('mcp:tool-input', { detail: data.params }));
+        break;
+
+      case 'ui/notifications/tool-input-partial':
+        if (data.params && data.params.arguments) {
+          window.__mcpToolInput = Object.assign(window.__mcpToolInput || {}, data.params.arguments);
+        }
+        break;
+
+      case 'ui/notifications/tool-result':
+        window.__mcpToolOutput = data.params && data.params.content;
+        window.__mcpStructuredContent = data.params && data.params.structuredContent;
+        toolResultListeners.forEach(function(cb) {
+          try { cb(data.params); } catch (e) { console.error('Tool result listener error:', e); }
+        });
+        window.dispatchEvent(new CustomEvent('mcp:tool-result', { detail: data.params }));
+        break;
+
+      case 'ui/notifications/tool-cancelled':
+        window.dispatchEvent(new CustomEvent('mcp:tool-cancelled', { detail: data.params }));
+        break;
+
+      case 'ui/host-context-change':
+        hostContext = Object.assign(hostContext, data.params);
+        contextChangeListeners.forEach(function(cb) {
+          try { cb(data.params); } catch (e) { console.error('Context change listener error:', e); }
+        });
+        window.dispatchEvent(new CustomEvent('mcp:context-change', { detail: data.params }));
+        break;
+
+      case 'ui/size-change':
+        if (hostContext.viewport) {
+          hostContext.viewport = Object.assign(hostContext.viewport, data.params);
+        } else {
+          hostContext.viewport = data.params;
+        }
+        break;
+    }
+  });
+
+  // ==================== Initialize ====================
+
+  // Export bridge
+  window.mcpBridge = bridge;
+
+  // Also create window.openai polyfill for non-OpenAI platforms
+  // This allows code written for OpenAI to work on other platforms
+  if (!isOpenAI) {
+    window.openai = {
+      get theme() { return bridge.theme; },
+      get userAgent() { return bridge.userAgent; },
+      get locale() { return bridge.locale; },
+      get maxHeight() { return bridge.maxHeight; },
+      get displayMode() { return bridge.displayMode; },
+      get safeArea() { return bridge.safeArea; },
+      get toolInput() { return bridge.toolInput; },
+      get toolOutput() { return bridge.toolOutput; },
+      get toolResponseMetadata() { return bridge.toolResponseMetadata; },
+      get widgetState() { return bridge.widgetState; },
+      callTool: function(n, a) { return bridge.callTool(n, a); },
+      requestDisplayMode: function(o) { return bridge.requestDisplayMode(o); },
+      requestClose: function() { return bridge.requestClose(); },
+      openExternal: function(o) { return bridge.openExternal(o); },
+      sendFollowUpMessage: function(o) { return bridge.sendFollowUpMessage(o); },
+      setWidgetState: function(s) { return bridge.setWidgetState(s); }
+    };
+  }
+
+  // Auto-initialize for ext-apps
+  if (isExtApps) {
+    bridge._initExtApps().catch(function(err) {
+      console.warn('Failed to initialize MCP bridge:', err);
+    });
+  }
+
+  // Dispatch ready event
+  window.dispatchEvent(new CustomEvent('mcp:bridge-ready'));
+})();
+</script>
+`;
+function getMCPBridgeScript() {
+  const match = MCP_BRIDGE_RUNTIME.match(/<script>([\s\S]*?)<\/script>/);
+  return match ? match[1].trim() : "";
+}
+function isMCPBridgeSupported() {
+  if (typeof window === "undefined") return false;
+  const w = window;
+  return typeof w.openai !== "undefined" || typeof w.claude !== "undefined" || w.__mcpPlatform === "claude" || w.__mcpPlatform === "gemini" || w.__mcpPlatform === "ext-apps" || window.parent !== window;
+}
+var FRONTMCP_BRIDGE_RUNTIME = BRIDGE_SCRIPT_TAGS.universal;
+var PLATFORM_BRIDGE_SCRIPTS = BRIDGE_SCRIPT_TAGS;
+
+// libs/uipack/src/runtime/csp.ts
+var DEFAULT_CDN_DOMAINS = [
+  "https://cdn.jsdelivr.net",
+  // Tailwind, Alpine, React, icons
+  "https://cdnjs.cloudflare.com",
+  // HTMX, other libraries
+  "https://fonts.googleapis.com",
+  // Google Fonts stylesheets
+  "https://fonts.gstatic.com"
+  // Google Fonts files
+];
+var DEFAULT_CSP_DIRECTIVES = [
+  "default-src 'none'",
+  `script-src 'self' 'unsafe-inline' ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `style-src 'self' 'unsafe-inline' ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `img-src 'self' data: ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `font-src 'self' data: ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  "connect-src 'none'"
+];
+var RESTRICTIVE_CSP_DIRECTIVES = [
+  "default-src 'none'",
+  "script-src 'self' 'unsafe-inline'",
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data:",
+  "font-src 'self' data:",
+  "connect-src 'none'"
+];
+function buildCSPDirectives(csp) {
+  if (!csp) {
+    return [...DEFAULT_CSP_DIRECTIVES];
+  }
+  const validResourceDomains = sanitizeCSPDomains(csp.resourceDomains);
+  const validConnectDomains = sanitizeCSPDomains(csp.connectDomains);
+  const allResourceDomains = [.../* @__PURE__ */ new Set([...DEFAULT_CDN_DOMAINS, ...validResourceDomains])];
+  const directives = [
+    "default-src 'none'",
+    `script-src 'self' 'unsafe-inline' ${allResourceDomains.join(" ")}`,
+    `style-src 'self' 'unsafe-inline' ${allResourceDomains.join(" ")}`
+  ];
+  const imgSources = ["'self'", "data:", ...allResourceDomains];
+  directives.push(`img-src ${imgSources.join(" ")}`);
+  const fontSources = ["'self'", "data:", ...allResourceDomains];
+  directives.push(`font-src ${fontSources.join(" ")}`);
+  if (validConnectDomains.length) {
+    directives.push(`connect-src ${validConnectDomains.join(" ")}`);
+  } else {
+    directives.push("connect-src 'none'");
+  }
+  return directives;
+}
+function buildCSPMetaTag(csp) {
+  const directives = buildCSPDirectives(csp);
+  const content = directives.join("; ");
+  return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(content)}">`;
+}
+function buildOpenAICSP(csp) {
+  if (!csp) return void 0;
+  const result = {};
+  if (csp.connectDomains?.length) {
+    result.connect_domains = csp.connectDomains;
+  }
+  if (csp.resourceDomains?.length) {
+    result.resource_domains = csp.resourceDomains;
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+}
+function escapeAttribute(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function validateCSPDomain(domain) {
+  if (domain.startsWith("https://*.")) {
+    const rest = domain.slice(10);
+    return /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.[a-zA-Z]{2,}$/.test(rest);
+  }
+  try {
+    const url = new URL(domain);
+    return url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function sanitizeCSPDomains(domains) {
+  if (!domains) return [];
+  const valid = [];
+  for (const domain of domains) {
+    if (validateCSPDomain(domain)) {
+      valid.push(domain);
+    } else {
+      console.warn(`Invalid CSP domain ignored: ${domain}`);
+    }
+  }
+  return valid;
+}
+
+// libs/uipack/src/theme/cdn.ts
+var CDN = {
+  /**
+   * Tailwind CSS v4 Browser CDN
+   * Generates styles on-the-fly with @theme support
+   * @see https://tailwindcss.com/docs/installation/play-cdn
+   */
+  tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+  /**
+   * HTMX 2.x - High power tools for HTML
+   * Enables AJAX, WebSockets, Server Sent Events directly in HTML
+   * @see https://htmx.org
+   */
+  htmx: {
+    url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
+    integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
+  },
+  /**
+   * Alpine.js - Lightweight reactive framework
+   * Used for more complex client-side interactions
+   * @see https://alpinejs.dev
+   */
+  alpine: {
+    url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
+    integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
+  },
+  /**
+   * Google Fonts - Inter for modern UI typography
+   */
+  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",
+    mono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
+  },
+  /**
+   * Lucide Icons - Beautiful & consistent icons
+   * @see https://lucide.dev
+   */
+  icons: {
+    url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js",
+    integrity: "sha384-wpLmHb7v7V1LsEuTmPQ9tXqWZvTtRWWVqJuE+Yz6X0I6O2T6bHJVeXH1lVWqF4qE"
+  }
+};
+var scriptCache = /* @__PURE__ */ new Map();
+function getCachedScript(url) {
+  return scriptCache.get(url);
+}
+function isScriptCached(url) {
+  return scriptCache.has(url);
+}
+function buildFontPreconnect() {
+  return CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
+}
+function buildFontStylesheets(options = {}) {
+  const { inter = true, mono = false } = options;
+  const links = [];
+  if (inter) {
+    links.push(`<link href="${CDN.fonts.inter}" rel="stylesheet">`);
+  }
+  if (mono) {
+    links.push(`<link href="${CDN.fonts.mono}" rel="stylesheet">`);
+  }
+  return links.join("\n  ");
+}
+function buildScriptTag(url, integrity, options = {}) {
+  const attrs = [`src="${url}"`];
+  if (integrity) {
+    attrs.push(`integrity="${integrity}"`);
+    attrs.push('crossorigin="anonymous"');
+  }
+  if (options.defer) attrs.push("defer");
+  if (options.async) attrs.push("async");
+  return `<script ${attrs.join(" ")}></script>`;
+}
+function buildInlineScriptTag(content) {
+  return `<script>${content}</script>`;
+}
+function buildCdnScripts(options = {}) {
+  const { tailwind = true, htmx = true, alpine = false, icons = false, inline = false } = options;
+  const scripts = [];
+  if (inline) {
+    if (tailwind) {
+      if (isScriptCached(CDN.tailwind)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+    if (htmx) {
+      if (isScriptCached(CDN.htmx.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+    if (alpine) {
+      if (isScriptCached(CDN.alpine.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+    if (icons) {
+      if (isScriptCached(CDN.icons.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+  } else {
+    if (tailwind) {
+      scripts.push(buildScriptTag(CDN.tailwind));
+    }
+    if (htmx) {
+      scripts.push(buildScriptTag(CDN.htmx.url, CDN.htmx.integrity));
+    }
+    if (alpine) {
+      scripts.push(buildScriptTag(CDN.alpine.url, CDN.alpine.integrity, { defer: true }));
+    }
+    if (icons) {
+      scripts.push(buildScriptTag(CDN.icons.url, CDN.icons.integrity));
+    }
+  }
+  return scripts.join("\n  ");
+}
+
+// libs/uipack/src/theme/platforms.ts
+var OPENAI_PLATFORM = {
+  id: "openai",
+  name: "OpenAI",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: true,
+  networkMode: "full",
+  scriptStrategy: "cdn",
+  options: {
+    sdk: "apps-sdk",
+    version: "1.0"
+  }
+};
+var CLAUDE_PLATFORM = {
+  id: "claude",
+  name: "Claude (Artifacts)",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: false,
+  // Network blocked, HTMX won't work for API calls
+  networkMode: "blocked",
+  scriptStrategy: "inline",
+  maxInlineSize: 100 * 1024,
+  // 100KB limit for artifacts
+  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
+  options: {
+    mode: "artifacts",
+    framework: "react"
+    // Claude artifacts prefer React
+  }
+};
+function canUseCdn(platform) {
+  return platform.networkMode === "full" && platform.scriptStrategy === "cdn";
+}
+function needsInlineScripts(platform) {
+  return platform.scriptStrategy === "inline" || platform.networkMode === "blocked";
+}
+
+// libs/uipack/src/theme/presets/github-openai.ts
+var GITHUB_OPENAI_THEME = {
+  name: "github-openai",
+  colors: {
+    semantic: {
+      // Primary: Near-black for main actions and branding
+      primary: "#24292f",
+      // Secondary: Medium gray for secondary elements
+      secondary: "#57606a",
+      // Accent: Blue for links, focus states, and highlights
+      accent: "#0969da",
+      // Status colors
+      success: "#1a7f37",
+      // GitHub green
+      warning: "#9a6700",
+      // Amber warning
+      danger: "#cf222e",
+      // GitHub red
+      info: "#0969da"
+      // Blue info
+    },
+    surface: {
+      // Pure white background
+      background: "#ffffff",
+      // Light gray surface (GitHub code background style)
+      surface: "#f6f8fa",
+      // White elevated surfaces (modals, cards)
+      elevated: "#ffffff",
+      // Dark semi-transparent overlay
+      overlay: "rgba(27, 31, 36, 0.5)"
+    },
+    text: {
+      // Near-black for primary text
+      primary: "#24292f",
+      // Gray for secondary/muted text
+      secondary: "#57606a",
+      // Light gray for disabled text
+      disabled: "#8c959f",
+      // White for text on dark backgrounds
+      inverse: "#ffffff",
+      // Blue for links
+      link: "#0969da"
+    },
+    border: {
+      // Light gray border (GitHub style)
+      default: "#d0d7de",
+      // Medium gray on hover
+      hover: "#8c959f",
+      // Blue focus ring
+      focus: "#0969da",
+      // Subtle divider
+      divider: "#d8dee4"
+    }
+  },
+  typography: {
+    families: {
+      // System UI font stack (GitHub/Apple style)
+      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      // Monospace stack
+      mono: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace'
+    },
+    sizes: {
+      xs: "0.75rem",
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      base: "1rem",
+      // 16px
+      lg: "1.125rem",
+      // 18px
+      xl: "1.25rem",
+      // 20px
+      "2xl": "1.5rem",
+      // 24px
+      "3xl": "1.875rem",
+      // 30px
+      "4xl": "2.25rem"
+      // 36px
+    },
+    weights: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700"
+    }
+  },
+  radius: {
+    none: "0",
+    sm: "3px",
+    // GitHub uses smaller radii
+    md: "6px",
+    lg: "8px",
+    xl: "12px",
+    "2xl": "16px",
+    full: "9999px"
+  },
+  shadows: {
+    // Subtle shadows with gray tones
+    sm: "0 1px 0 rgba(27, 31, 36, 0.04)",
+    md: "0 3px 6px rgba(140, 149, 159, 0.15)",
+    lg: "0 8px 24px rgba(140, 149, 159, 0.2)",
+    xl: "0 12px 28px rgba(140, 149, 159, 0.3)"
+  },
+  components: {
+    button: {
+      radius: "6px",
+      paddingX: "16px",
+      paddingY: "5px",
+      fontSize: "14px",
+      fontWeight: "500"
+    },
+    card: {
+      radius: "6px",
+      padding: "16px",
+      shadow: "0 1px 0 rgba(27, 31, 36, 0.04)",
+      borderWidth: "1px"
+    },
+    input: {
+      radius: "6px",
+      paddingX: "12px",
+      paddingY: "5px",
+      borderWidth: "1px",
+      focusRingWidth: "3px"
+    }
+  },
+  cdn: {
+    fonts: {
+      preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+      stylesheets: [
+        // System UI fonts don't need external stylesheets, but we include
+        // Inter as an optional enhancement for consistent cross-platform rendering
+        "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      ]
+    },
+    icons: {
+      script: {
+        url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js"
+      }
+    },
+    scripts: {
+      tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+      htmx: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
+        integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
+      },
+      alpine: {
+        url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
+        integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
+      }
+    }
+  }
+};
+var DEFAULT_THEME = GITHUB_OPENAI_THEME;
+
+// libs/uipack/src/theme/theme.ts
+function mergeThemesCore(base, override) {
+  const baseColors = base.colors ?? { semantic: { primary: "#24292f" } };
+  const filterStrings = (arr) => arr.filter((s) => s !== void 0);
+  return {
+    ...base,
+    ...override,
+    colors: {
+      ...baseColors,
+      ...override.colors,
+      semantic: { ...baseColors.semantic, ...override.colors?.semantic },
+      surface: { ...baseColors.surface, ...override.colors?.surface },
+      text: { ...baseColors.text, ...override.colors?.text },
+      border: { ...baseColors.border, ...override.colors?.border },
+      custom: { ...baseColors.custom, ...override.colors?.custom }
+    },
+    typography: {
+      ...base.typography,
+      ...override.typography,
+      families: { ...base.typography?.families, ...override.typography?.families },
+      sizes: { ...base.typography?.sizes, ...override.typography?.sizes },
+      weights: { ...base.typography?.weights, ...override.typography?.weights },
+      lineHeight: { ...base.typography?.lineHeight, ...override.typography?.lineHeight }
+    },
+    spacing: { ...base.spacing, ...override.spacing },
+    radius: { ...base.radius, ...override.radius },
+    shadows: { ...base.shadows, ...override.shadows },
+    components: {
+      ...base.components,
+      ...override.components,
+      button: { ...base.components?.button, ...override.components?.button },
+      card: { ...base.components?.card, ...override.components?.card },
+      input: { ...base.components?.input, ...override.components?.input }
+    },
+    cdn: {
+      ...base.cdn,
+      ...override.cdn,
+      fonts: {
+        // Concatenate then dedupe so base entries are preserved without duplicates
+        preconnect: filterStrings(
+          Array.from(/* @__PURE__ */ new Set([...base.cdn?.fonts?.preconnect ?? [], ...override.cdn?.fonts?.preconnect ?? []]))
+        ),
+        stylesheets: filterStrings(
+          Array.from(/* @__PURE__ */ new Set([...base.cdn?.fonts?.stylesheets ?? [], ...override.cdn?.fonts?.stylesheets ?? []]))
+        )
+      },
+      icons: {
+        ...base.cdn?.icons,
+        ...override.cdn?.icons,
+        // Deep merge script to preserve integrity when only url is overridden
+        script: override.cdn?.icons?.script ? { ...base.cdn?.icons?.script, ...override.cdn?.icons?.script } : base.cdn?.icons?.script
+      },
+      scripts: {
+        // tailwind is a simple string, just use override or base
+        tailwind: override.cdn?.scripts?.tailwind ?? base.cdn?.scripts?.tailwind,
+        // Deep merge htmx/alpine to preserve integrity when only url is overridden
+        htmx: override.cdn?.scripts?.htmx ? { ...base.cdn?.scripts?.htmx, ...override.cdn?.scripts?.htmx } : base.cdn?.scripts?.htmx,
+        alpine: override.cdn?.scripts?.alpine ? { ...base.cdn?.scripts?.alpine, ...override.cdn?.scripts?.alpine } : base.cdn?.scripts?.alpine
+      }
+    },
+    customVars: { ...base.customVars, ...override.customVars },
+    customCss: [base.customCss, override.customCss].filter(Boolean).join("\n")
+  };
+}
+function mergeThemes(base, override) {
+  const merged = mergeThemesCore(base, override);
+  let darkVariant;
+  if (override.dark !== void 0) {
+    const darkBase = base.dark ?? base;
+    const { dark: _nestedDark, ...overrideDarkWithoutNested } = override.dark;
+    darkVariant = mergeThemesCore(darkBase, overrideDarkWithoutNested);
+  } else if (base.dark !== void 0) {
+    const { dark: _nestedDark, ...baseDarkWithoutNested } = base.dark;
+    darkVariant = baseDarkWithoutNested;
+  }
+  return {
+    ...merged,
+    dark: darkVariant
+  };
+}
+function emitColorScale(lines, name, scale) {
+  for (const [shade, value] of Object.entries(scale)) {
+    if (value) lines.push(`--color-${name}-${shade}: ${value};`);
+  }
+}
+function buildThemeCss(theme) {
+  const lines = [];
+  const semantic = theme.colors.semantic;
+  if (typeof semantic.primary === "string") {
+    lines.push(`--color-primary: ${semantic.primary};`);
+  } else if (semantic.primary) {
+    emitColorScale(lines, "primary", semantic.primary);
+  }
+  if (semantic.secondary) {
+    if (typeof semantic.secondary === "string") {
+      lines.push(`--color-secondary: ${semantic.secondary};`);
+    } else {
+      emitColorScale(lines, "secondary", semantic.secondary);
+    }
+  }
+  if (semantic.accent) {
+    if (typeof semantic.accent === "string") {
+      lines.push(`--color-accent: ${semantic.accent};`);
+    } else {
+      emitColorScale(lines, "accent", semantic.accent);
+    }
+  }
+  if (semantic.neutral) {
+    if (typeof semantic.neutral === "string") {
+      lines.push(`--color-neutral: ${semantic.neutral};`);
+    } else {
+      emitColorScale(lines, "neutral", semantic.neutral);
+    }
+  }
+  if (semantic.success) lines.push(`--color-success: ${semantic.success};`);
+  if (semantic.warning) lines.push(`--color-warning: ${semantic.warning};`);
+  if (semantic.danger) lines.push(`--color-danger: ${semantic.danger};`);
+  if (semantic.info) lines.push(`--color-info: ${semantic.info};`);
+  const surface = theme.colors.surface;
+  if (surface?.background) lines.push(`--color-background: ${surface.background};`);
+  if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);
+  if (surface?.elevated) lines.push(`--color-elevated: ${surface.elevated};`);
+  if (surface?.overlay) lines.push(`--color-overlay: ${surface.overlay};`);
+  const text = theme.colors.text;
+  if (text?.primary) lines.push(`--color-text-primary: ${text.primary};`);
+  if (text?.secondary) lines.push(`--color-text-secondary: ${text.secondary};`);
+  if (text?.disabled) lines.push(`--color-text-disabled: ${text.disabled};`);
+  if (text?.inverse) lines.push(`--color-text-inverse: ${text.inverse};`);
+  if (text?.link) lines.push(`--color-text-link: ${text.link};`);
+  const border = theme.colors.border;
+  if (border?.default) lines.push(`--color-border: ${border.default};`);
+  if (border?.hover) lines.push(`--color-border-hover: ${border.hover};`);
+  if (border?.focus) lines.push(`--color-border-focus: ${border.focus};`);
+  if (border?.divider) lines.push(`--color-divider: ${border.divider};`);
+  if (theme.colors.custom) {
+    for (const [key, value] of Object.entries(theme.colors.custom)) {
+      lines.push(`--color-${key}: ${value};`);
+    }
+  }
+  const typography = theme.typography;
+  if (typography?.families?.sans) lines.push(`--font-sans: ${typography.families.sans};`);
+  if (typography?.families?.serif) lines.push(`--font-serif: ${typography.families.serif};`);
+  if (typography?.families?.mono) lines.push(`--font-mono: ${typography.families.mono};`);
+  if (typography?.families?.display) lines.push(`--font-display: ${typography.families.display};`);
+  const radius = theme.radius;
+  if (radius?.none) lines.push(`--radius-none: ${radius.none};`);
+  if (radius?.sm) lines.push(`--radius-sm: ${radius.sm};`);
+  if (radius?.md) lines.push(`--radius-md: ${radius.md};`);
+  if (radius?.lg) lines.push(`--radius-lg: ${radius.lg};`);
+  if (radius?.xl) lines.push(`--radius-xl: ${radius.xl};`);
+  if (radius?.["2xl"]) lines.push(`--radius-2xl: ${radius["2xl"]};`);
+  if (radius?.full) lines.push(`--radius-full: ${radius.full};`);
+  if (theme.customVars) {
+    for (const [key, value] of Object.entries(theme.customVars)) {
+      lines.push(`${key}: ${value};`);
+    }
+  }
+  return lines.join("\n      ");
+}
+
+// libs/uipack/src/runtime/wrapper.ts
+init_utils();
+
+// libs/uipack/src/runtime/sanitizer.ts
+var REDACTION_TOKENS = {
+  EMAIL: "[EMAIL]",
+  PHONE: "[PHONE]",
+  CARD: "[CARD]",
+  ID: "[ID]",
+  IP: "[IP]",
+  REDACTED: "[REDACTED]"
+};
+var PII_PATTERNS = {
+  // Email: user@domain.tld
+  email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  // Email embedded in text
+  emailInText: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
+  // Phone: Various formats (US-centric but flexible)
+  phone: /^[+]?[(]?[0-9]{1,4}[)]?[-\s.]?[0-9]{1,4}[-\s.]?[0-9]{1,9}$/,
+  // Phone embedded in text
+  phoneInText: /(?:\+?1[-.\s]?)?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}/g,
+  // Credit card: 13-19 digits (with optional separators)
+  creditCard: /^(?:[0-9]{4}[-\s]?){3,4}[0-9]{1,4}$/,
+  // Credit card embedded in text
+  creditCardInText: /\b(?:[0-9]{4}[-\s]?){3,4}[0-9]{1,4}\b/g,
+  // SSN: XXX-XX-XXXX
+  ssn: /^[0-9]{3}[-]?[0-9]{2}[-]?[0-9]{4}$/,
+  // SSN embedded in text
+  ssnInText: /\b[0-9]{3}[-]?[0-9]{2}[-]?[0-9]{4}\b/g,
+  // IPv4 address
+  ipv4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+  // IPv4 embedded in text
+  ipv4InText: /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/g
+};
+function isEmail(value) {
+  return PII_PATTERNS.email.test(value);
+}
+function isPhone(value) {
+  return PII_PATTERNS.phone.test(value);
+}
+function isCreditCard(value) {
+  const digits = value.replace(/[-\s]/g, "");
+  return digits.length >= 13 && digits.length <= 19 && PII_PATTERNS.creditCard.test(value);
+}
+function isSSN(value) {
+  return PII_PATTERNS.ssn.test(value);
+}
+function isIPv4(value) {
+  return PII_PATTERNS.ipv4.test(value);
+}
+function detectPIIType(value) {
+  if (isEmail(value)) return "EMAIL";
+  if (isCreditCard(value)) return "CARD";
+  if (isSSN(value)) return "ID";
+  if (isPhone(value)) return "PHONE";
+  if (isIPv4(value)) return "IP";
+  return null;
+}
+function redactPIIFromText(text) {
+  let result = text;
+  result = result.replace(PII_PATTERNS.creditCardInText, REDACTION_TOKENS.CARD);
+  result = result.replace(PII_PATTERNS.ssnInText, REDACTION_TOKENS.ID);
+  result = result.replace(PII_PATTERNS.emailInText, REDACTION_TOKENS.EMAIL);
+  result = result.replace(PII_PATTERNS.phoneInText, REDACTION_TOKENS.PHONE);
+  result = result.replace(PII_PATTERNS.ipv4InText, REDACTION_TOKENS.IP);
+  return result;
+}
+function sanitizeValue(key, value, path, options, depth, visited) {
+  const maxDepth = options.maxDepth ?? 10;
+  if (depth > maxDepth) {
+    return value;
+  }
+  if (value === null || value === void 0) {
+    return value;
+  }
+  if (typeof options.mode === "function") {
+    return options.mode(key, value, path);
+  }
+  if (Array.isArray(options.mode)) {
+    const lowerKey = key.toLowerCase();
+    if (options.mode.some((f) => f.toLowerCase() === lowerKey)) {
+      return REDACTION_TOKENS.REDACTED;
+    }
+  }
+  if (typeof value === "string") {
+    if (options.mode === true) {
+      const piiType = detectPIIType(value);
+      if (piiType) {
+        return REDACTION_TOKENS[piiType];
+      }
+      if (options.sanitizeInText !== false) {
+        const redacted = redactPIIFromText(value);
+        if (redacted !== value) {
+          return redacted;
+        }
+      }
+    }
+    return value;
+  }
+  if (Array.isArray(value)) {
+    if (visited.has(value)) {
+      return REDACTION_TOKENS.REDACTED;
+    }
+    visited.add(value);
+    return value.map(
+      (item, index) => sanitizeValue(String(index), item, [...path, String(index)], options, depth + 1, visited)
+    );
+  }
+  if (typeof value === "object") {
+    if (visited.has(value)) {
+      return REDACTION_TOKENS.REDACTED;
+    }
+    visited.add(value);
+    const result = {};
+    for (const [k, v] of Object.entries(value)) {
+      result[k] = sanitizeValue(k, v, [...path, k], options, depth + 1, visited);
+    }
+    return result;
+  }
+  return value;
+}
+function sanitizeInput(input, mode = true) {
+  if (!input || typeof input !== "object") {
+    return {};
+  }
+  const options = {
+    mode,
+    maxDepth: 10,
+    sanitizeInText: true
+  };
+  const visited = /* @__PURE__ */ new WeakSet();
+  return sanitizeValue("", input, [], options, 0, visited);
+}
+function createSanitizer(mode = true) {
+  return (input) => sanitizeInput(input, mode);
+}
+function detectPII(input, options) {
+  const maxDepth = options?.maxDepth ?? 10;
+  const fields = [];
+  const visited = /* @__PURE__ */ new WeakSet();
+  const check = (value, path, depth) => {
+    if (depth > maxDepth) return;
+    if (value === null || value === void 0) return;
+    if (typeof value === "string") {
+      if (detectPIIType(value)) {
+        fields.push(path.join("."));
+      }
+      return;
+    }
+    if (Array.isArray(value)) {
+      if (visited.has(value)) return;
+      visited.add(value);
+      value.forEach((item, index) => check(item, [...path, String(index)], depth + 1));
+      return;
+    }
+    if (typeof value === "object") {
+      if (visited.has(value)) return;
+      visited.add(value);
+      for (const [k, v] of Object.entries(value)) {
+        check(v, [...path, k], depth + 1);
+      }
+    }
+  };
+  check(input, [], 0);
+  return {
+    hasPII: fields.length > 0,
+    fields
+  };
+}
+
+// libs/uipack/src/runtime/wrapper.ts
+function createTemplateHelpers() {
+  let idCounter2 = 0;
+  return {
+    /**
+     * Escape HTML special characters to prevent XSS
+     */
+    escapeHtml,
+    /**
+     * Format a date for display
+     */
+    formatDate: (date, format) => {
+      const d = typeof date === "string" ? new Date(date) : date;
+      if (isNaN(d.getTime())) return String(date);
+      if (format === "iso") {
+        return d.toISOString();
+      }
+      if (format === "time") {
+        return d.toLocaleTimeString();
+      }
+      if (format === "datetime") {
+        return d.toLocaleString();
+      }
+      return d.toLocaleDateString();
+    },
+    /**
+     * Format a number as currency
+     */
+    formatCurrency: (amount, currency = "USD") => {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency
+      }).format(amount);
+    },
+    /**
+     * Generate a unique ID for DOM elements
+     */
+    uniqueId: (prefix = "mcp") => {
+      return `${prefix}-${++idCounter2}-${Date.now().toString(36)}`;
+    },
+    /**
+     * Safely embed JSON data in HTML
+     * Escapes characters that could break out of script tags or HTML
+     */
+    jsonEmbed: (data) => {
+      const json2 = JSON.stringify(data);
+      if (json2 === void 0) {
+        return "undefined";
+      }
+      return json2.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/'/g, "\\u0027");
+    }
+  };
+}
+function wrapToolUI(options) {
+  const {
+    content,
+    toolName,
+    input = {},
+    output,
+    structuredContent,
+    csp,
+    widgetAccessible = false,
+    title,
+    theme: themeOverrides,
+    platform = OPENAI_PLATFORM,
+    hostContext,
+    sanitizeInput: sanitizeOption,
+    rendererType,
+    hydrate = false,
+    // Disabled by default to prevent React hydration Error #418 in MCP clients
+    skipCspMeta = false
+  } = options;
+  let sanitizedInput = input;
+  if (sanitizeOption) {
+    const sanitizeMode = sanitizeOption === true ? true : sanitizeOption;
+    sanitizedInput = sanitizeInput(input, sanitizeMode);
+  }
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const useCdn = canUseCdn(platform);
+  const useInline = needsInlineScripts(platform);
+  const fontPreconnect = useCdn ? buildFontPreconnect() : "";
+  const fontStylesheets = useCdn ? buildFontStylesheets({ inter: true }) : "";
+  const scripts = buildCdnScripts({
+    tailwind: platform.supportsTailwind,
+    htmx: false,
+    alpine: false,
+    icons: false,
+    inline: useInline
+  });
+  const frameworkScripts = buildFrameworkRuntimeScripts({
+    rendererType,
+    hydrate,
+    platform
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = platform.supportsTailwind ? `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>` : "";
+  const cspMetaTag = skipCspMeta ? "" : buildCSPMetaTag(csp);
+  const dataScript = buildDataInjectionScript({
+    toolName,
+    input: sanitizedInput,
+    output,
+    structuredContent,
+    widgetAccessible,
+    hostContext
+  });
+  const pageTitle = title || `${escapeHtml(toolName)} - Tool Result`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${pageTitle}</title>
+  ${cspMetaTag}
+
+  <!-- Fonts -->
+  ${fontPreconnect}
+  ${fontStylesheets}
+
+  <!-- Tailwind CSS -->
+  ${scripts}
+  ${styleBlock}
+
+  <!-- Framework Runtime -->
+  ${frameworkScripts}
+
+  <!-- Tool Data -->
+  ${dataScript}
+
+  <!-- MCP Bridge Runtime -->
+  ${MCP_BRIDGE_RUNTIME}
+</head>
+<body class="bg-background text-text-primary font-sans antialiased">
+  ${content}
+</body>
+</html>`;
+}
+function buildFrameworkRuntimeScripts(options) {
+  const { rendererType, hydrate, platform } = options;
+  if (!rendererType || rendererType === "html" || rendererType === "html-fallback") {
+    return "";
+  }
+  if (!hydrate) {
+    return "";
+  }
+  if (rendererType === "react" || rendererType === "mdx") {
+    const useCdn = canUseCdn(platform);
+    if (useCdn) {
+      return `
+  <!-- React Runtime (for hydration) -->
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script>
+    // Hydration script for React/MDX components
+    (function() {
+      document.addEventListener('DOMContentLoaded', function() {
+        var hydratables = document.querySelectorAll('[data-hydrate], [data-mdx-hydrate]');
+        if (hydratables.length > 0 && window.__frontmcp_components) {
+          hydratables.forEach(function(el) {
+            var componentName = el.getAttribute('data-hydrate');
+            var propsJson = el.getAttribute('data-props');
+            var props = propsJson ? JSON.parse(propsJson) : {};
+
+            if (window.__frontmcp_components[componentName]) {
+              try {
+                ReactDOM.hydrateRoot(el, React.createElement(
+                  window.__frontmcp_components[componentName],
+                  props
+                ));
+              } catch (e) {
+                console.error('[FrontMCP] Hydration failed:', e);
+              }
+            }
+          });
+        }
+      });
+    })();
+  </script>`;
+    } else {
+      return `
+  <!-- React hydration not available on blocked-network platforms -->
+  <script>
+    console.warn('[FrontMCP] React hydration disabled - platform does not support external scripts');
+  </script>`;
+    }
+  }
+  return "";
+}
+function buildDataInjectionScript(options) {
+  const { toolName, input, output, structuredContent, widgetAccessible, hostContext } = options;
+  const helpers = createTemplateHelpers();
+  const contextData = {
+    theme: hostContext?.theme || "light",
+    displayMode: hostContext?.displayMode || "inline",
+    ...hostContext
+  };
+  return `<script>
+  // Tool metadata
+  window.__mcpToolName = ${helpers.jsonEmbed(toolName)};
+  window.__mcpToolInput = ${helpers.jsonEmbed(input)};
+  window.__mcpToolOutput = ${helpers.jsonEmbed(output)};
+  window.__mcpStructuredContent = ${helpers.jsonEmbed(structuredContent)};
+  window.__mcpWidgetAccessible = ${helpers.jsonEmbed(widgetAccessible)};
+  window.__mcpHostContext = ${helpers.jsonEmbed(contextData)};
+</script>`;
+}
+function wrapToolUIUniversal(options) {
+  const {
+    content,
+    toolName,
+    input = {},
+    output,
+    structuredContent,
+    csp,
+    widgetAccessible = false,
+    title,
+    theme: themeOverrides,
+    includeBridge = true,
+    inlineScripts = false,
+    rendererType,
+    hydrate = false,
+    // Disabled by default to prevent React hydration Error #418 in MCP clients
+    skipCspMeta = false,
+    resourceMode = inlineScripts ? "inline" : "cdn"
+  } = options;
+  const useInlineScripts = resourceMode === "inline" || inlineScripts;
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const fontPreconnect = useInlineScripts ? "" : buildFontPreconnect();
+  const fontStylesheets = useInlineScripts ? "" : buildFontStylesheets({ inter: true });
+  const scripts = buildCdnScripts({
+    tailwind: true,
+    htmx: false,
+    alpine: false,
+    icons: false,
+    inline: useInlineScripts
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>`;
+  const cspMetaTag = skipCspMeta ? "" : buildCSPMetaTag(csp);
+  const dataScript = buildDataInjectionScript({
+    toolName,
+    input,
+    output,
+    structuredContent,
+    widgetAccessible
+  });
+  const frameworkScripts = buildFrameworkRuntimeScriptsUniversal({
+    rendererType,
+    hydrate,
+    inlineScripts: useInlineScripts,
+    resourceMode
+  });
+  const bridgeScript = includeBridge ? BRIDGE_SCRIPT_TAGS.universal : "";
+  const pageTitle = title || `${escapeHtml(toolName)} - Tool Result`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${pageTitle}</title>
+  ${cspMetaTag}
+
+  <!-- Fonts -->
+  ${fontPreconnect}
+  ${fontStylesheets}
+
+  <!-- Tailwind CSS -->
+  ${scripts}
+  ${styleBlock}
+
+  <!-- Framework Runtime -->
+  ${frameworkScripts}
+
+  <!-- Tool Data -->
+  ${dataScript}
+
+  <!-- FrontMCP Bridge (Universal - Auto-detects host platform) -->
+  ${bridgeScript}
+</head>
+<body class="bg-background text-text-primary font-sans antialiased">
+  ${content}
+</body>
+</html>`;
+}
+function buildFrameworkRuntimeScriptsUniversal(options) {
+  const { rendererType, hydrate, inlineScripts, resourceMode = "cdn" } = options;
+  if (!rendererType || rendererType === "html" || rendererType === "html-fallback") {
+    return "";
+  }
+  const useInline = resourceMode === "inline" || inlineScripts;
+  if (rendererType === "react" || rendererType === "mdx") {
+    if (!useInline) {
+      const reactScripts = `
+  <!-- React 19 Runtime (ES modules from esm.sh) -->
+  <script type="module">
+    import React from 'https://esm.sh/react@19';
+    import { createRoot } from 'https://esm.sh/react-dom@19/client';
+    window.React = React;
+    window.ReactDOM = { createRoot };
+  </script>`;
+      const mdxScripts = rendererType === "mdx" ? `
+  <!-- MDX Runtime (CDN mode) -->
+  <script type="module">
+    import * as runtime from 'https://esm.sh/@mdx-js/react@3?bundle';
+    window.MDXRuntime = runtime;
+  </script>` : "";
+      const hydrationScript = hydrate ? `
+  <script>
+    // Hydration script for React/MDX components
+    (function() {
+      document.addEventListener('DOMContentLoaded', function() {
+        var hydratables = document.querySelectorAll('[data-hydrate], [data-mdx-hydrate]');
+        if (hydratables.length > 0 && window.__frontmcp_components) {
+          hydratables.forEach(function(el) {
+            var componentName = el.getAttribute('data-hydrate');
+            var propsJson = el.getAttribute('data-props');
+            var props = propsJson ? JSON.parse(propsJson) : {};
+
+            if (window.__frontmcp_components[componentName]) {
+              try {
+                ReactDOM.hydrateRoot(el, React.createElement(
+                  window.__frontmcp_components[componentName],
+                  props
+                ));
+              } catch (e) {
+                console.error('[FrontMCP] Hydration failed:', e);
+              }
+            }
+          });
+        }
+      });
+    })();
+  </script>` : "";
+      return reactScripts + mdxScripts + hydrationScript;
+    } else {
+      return `
+  <!-- React/MDX runtime disabled (inline/blocked-network mode) -->
+  <script>
+    console.warn('[FrontMCP] React/MDX runtime disabled - inline scripts mode (network blocked). SSR content is static.');
+  </script>`;
+    }
+  }
+  return "";
+}
+function wrapToolUIMinimal(options) {
+  const {
+    content,
+    toolName,
+    input = {},
+    output,
+    structuredContent,
+    csp,
+    widgetAccessible = false,
+    title,
+    skipCspMeta = false
+  } = options;
+  const helpers = createTemplateHelpers();
+  const cspMetaTag = skipCspMeta ? "" : buildCSPMetaTag(csp);
+  const contextData = { theme: "light", displayMode: "inline" };
+  const dataScript = `<script>
+  window.__mcpToolName = ${helpers.jsonEmbed(toolName)};
+  window.__mcpToolInput = ${helpers.jsonEmbed(input)};
+  window.__mcpToolOutput = ${helpers.jsonEmbed(output)};
+  window.__mcpStructuredContent = ${helpers.jsonEmbed(structuredContent)};
+  window.__mcpWidgetAccessible = ${helpers.jsonEmbed(widgetAccessible)};
+  window.__mcpHostContext = ${helpers.jsonEmbed(contextData)};
+</script>`;
+  const pageTitle = title || `${escapeHtml(toolName)} - Tool Result`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${pageTitle}</title>
+  ${cspMetaTag}
+  ${dataScript}
+  ${MCP_BRIDGE_RUNTIME}
+</head>
+<body>
+  ${content}
+</body>
+</html>`;
+}
+function wrapLeanWidgetShell(options) {
+  const { toolName, uiConfig, title, theme: themeOverrides } = options;
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const fontPreconnect = buildFontPreconnect();
+  const fontStylesheets = buildFontStylesheets({ inter: true });
+  const tailwindScript = buildCdnScripts({
+    tailwind: true,
+    htmx: false,
+    alpine: false,
+    icons: false,
+    inline: false
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>`;
+  const placeholderContent = `
+    <div id="frontmcp-widget-root" class="flex items-center justify-center min-h-[200px] p-4">
+      <div class="text-center text-gray-500">
+        <svg class="animate-spin mx-auto mb-2" style="width: 1.5rem; height: 1.5rem; color: #9ca3af;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="text-sm">Loading widget...</p>
+      </div>
+    </div>
+  `;
+  const toolMetaScript = `<script>
+  // Lean widget shell for inline mode
+  // Actual widget content comes in tool response via ui/html
+  window.__mcpToolName = ${JSON.stringify(toolName)};
+  window.__mcpWidgetAccessible = ${JSON.stringify(uiConfig.widgetAccessible ?? false)};
+  window.__mcpLeanShell = true;
+</script>`;
+  const bridgeScript = BRIDGE_SCRIPT_TAGS.universal;
+  const injectorScript = `<script>
+  // Lean shell injector for inline mode
+  // Uses FrontMCP Bridge (platform-agnostic) to detect tool response HTML
+  (function() {
+    var injected = false;
+
+    function injectWidget(metadata) {
+      if (injected) return;
+
+      // Check for ui/html in metadata
+      var html = null;
+
+      if (metadata) {
+        // Try different possible locations for the HTML
+        html = metadata['ui/html'] || metadata['openai/html'] || metadata.html;
+      }
+
+      if (html && typeof html === 'string') {
+        injected = true;
+        console.log('[FrontMCP] Lean shell: Injecting inline widget HTML (' + html.length + ' chars)');
+
+        // Replace entire document with the full React widget HTML
+        document.open();
+        document.write(html);
+        document.close();
+        return true;
+      }
+      return false;
+    }
+
+    // Wait for bridge to be ready, then subscribe
+    function subscribeAndInject() {
+      var bridge = window.FrontMcpBridge;
+      if (!bridge) {
+        console.warn('[FrontMCP] Lean shell: Bridge not found');
+        return;
+      }
+
+      // Check if data already available (via getToolResponseMetadata)
+      if (typeof bridge.getToolResponseMetadata === 'function') {
+        var existing = bridge.getToolResponseMetadata();
+        if (existing && injectWidget(existing)) {
+          return; // Already injected
+        }
+      }
+
+      // Subscribe to metadata changes (via onToolResponseMetadata)
+      if (typeof bridge.onToolResponseMetadata === 'function') {
+        console.log('[FrontMCP] Lean shell: Subscribing to tool response metadata');
+        bridge.onToolResponseMetadata(function(metadata) {
+          console.log('[FrontMCP] Lean shell: Received tool response metadata');
+          injectWidget(metadata);
+        });
+      } else {
+        console.warn('[FrontMCP] Lean shell: onToolResponseMetadata not available on bridge');
+      }
+    }
+
+    // Wait for bridge:ready event
+    window.addEventListener('bridge:ready', function() {
+      console.log('[FrontMCP] Lean shell: Bridge ready, setting up injector');
+      subscribeAndInject();
+    });
+
+    // Also try immediately in case bridge is already ready
+    if (window.FrontMcpBridge && window.FrontMcpBridge.initialized) {
+      subscribeAndInject();
+    }
+
+    // Fallback: poll for bridge if event doesn't fire
+    var bridgeCheckAttempts = 0;
+    var bridgeCheckInterval = setInterval(function() {
+      bridgeCheckAttempts++;
+      if (window.FrontMcpBridge) {
+        clearInterval(bridgeCheckInterval);
+        if (!injected) {
+          subscribeAndInject();
+        }
+      } else if (bridgeCheckAttempts >= 100) {
+        // 10 second timeout
+        clearInterval(bridgeCheckInterval);
+        console.warn('[FrontMCP] Lean shell: Timeout waiting for bridge');
+      }
+    }, 100);
+  })();
+</script>`;
+  const spinnerCss = `<style>
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .animate-spin { animation: spin 1s linear infinite; }
+  </style>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title || toolName)}</title>
+  ${fontPreconnect}
+  ${fontStylesheets}
+  ${tailwindScript}
+  ${styleBlock}
+  ${spinnerCss}
+  ${toolMetaScript}
+  ${bridgeScript}
+</head>
+<body class="bg-white font-sans antialiased">
+  ${placeholderContent}
+  ${injectorScript}
+</body>
+</html>`;
+}
+function wrapHybridWidgetShell(options) {
+  const { toolName, uiConfig, title, theme: themeOverrides } = options;
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const fontPreconnect = buildFontPreconnect();
+  const fontStylesheets = buildFontStylesheets({ inter: true });
+  const tailwindScript = buildCdnScripts({
+    tailwind: true,
+    htmx: false,
+    alpine: false,
+    icons: false,
+    inline: false
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>`;
+  const placeholderContent = `
+    <div id="frontmcp-widget-root" class="flex items-center justify-center min-h-[200px] p-4">
+      <div class="text-center text-gray-500">
+        <svg class="animate-spin mx-auto mb-2" style="width: 1.5rem; height: 1.5rem; color: #9ca3af;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="text-sm">Loading widget...</p>
+      </div>
+    </div>
+    <div id="frontmcp-error" style="display: none; padding: 1rem; margin: 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; color: #dc2626; font-size: 0.875rem;"></div>
+  `;
+  const toolMetaScript = `<script>
+  // Hybrid widget shell - component comes at tool call time
+  window.__mcpToolName = ${JSON.stringify(toolName)};
+  window.__mcpWidgetAccessible = ${JSON.stringify(uiConfig.widgetAccessible ?? false)};
+  window.__mcpHybridShell = true;
+</script>`;
+  const bridgeScript = BRIDGE_SCRIPT_TAGS.universal;
+  const spinnerCss = `<style>
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .animate-spin { animation: spin 1s linear infinite; }
+  </style>`;
+  const hybridRuntimeScript = `
+  <!-- FrontMCP Hybrid Widget Runtime -->
+  <script type="module">
+  // ============================================
+  // 1. Import React 19 from esm.sh
+  // ============================================
+  import React from 'https://esm.sh/react@19';
+  import ReactDOM from 'https://esm.sh/react-dom@19/client';
+
+  // Make React available globally
+  window.React = React;
+  window.ReactDOM = ReactDOM;
+
+  // ============================================
+  // 2. Provide webpack namespace objects for transpiled components
+  // ============================================
+  window.external_react_namespaceObject = React;
+  window.jsx_runtime_namespaceObject = {
+    jsx: (type, props, key) => {
+      if (key !== undefined) props = { ...props, key };
+      return React.createElement(type, props);
+    },
+    jsxs: (type, props, key) => {
+      if (key !== undefined) props = { ...props, key };
+      return React.createElement(type, props);
+    },
+    Fragment: React.Fragment,
+  };
+  window.process = window.process || { env: { NODE_ENV: 'production' } };
+
+  // ============================================
+  // 3. FrontMCP Hooks (platform-agnostic via bridge)
+  // ============================================
+  function useMcpBridgeContext() {
+    return {
+      bridge: window.FrontMcpBridge || null,
+      loading: false,
+      error: null,
+      ready: window.FrontMcpBridge?.initialized ?? false,
+      adapterId: window.FrontMcpBridge?.adapterId ?? 'unknown',
+      capabilities: window.FrontMcpBridge?.capabilities ?? {},
+    };
+  }
+
+  function useToolOutput() {
+    const [output, setOutput] = React.useState(null);
+    React.useEffect(() => {
+      const bridge = window.FrontMcpBridge;
+      if (!bridge) return;
+
+      // Get initial output
+      const initial = bridge.getToolOutput();
+      if (initial) setOutput(initial);
+
+      // Subscribe to updates
+      const unsubscribe = bridge.onToolResult((result) => {
+        setOutput(result);
+      });
+      return unsubscribe;
+    }, []);
+    return output;
+  }
+
+  function useToolInput() {
+    const bridge = window.FrontMcpBridge;
+    return bridge?.getToolInput() || window.__mcpToolInput || {};
+  }
+
+  function useTheme() {
+    const [theme, setTheme] = React.useState('light');
+    React.useEffect(() => {
+      const bridge = window.FrontMcpBridge;
+      if (bridge?.getTheme) setTheme(bridge.getTheme());
+    }, []);
+    return theme;
+  }
+
+  function useCallTool(toolName, options = {}) {
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+
+    const isAvailable = !!(
+      (window.openai && typeof window.openai.callTool === 'function') ||
+      (window.FrontMcpBridge && window.FrontMcpBridge.hasCapability('canCallTools'))
+    );
+
+    const callTool = React.useCallback(async (args) => {
+      setLoading(true);
+      setError(null);
+      try {
+        let result;
+        if (window.openai && typeof window.openai.callTool === 'function') {
+          result = await window.openai.callTool(toolName, args || {});
+        } else if (window.FrontMcpBridge) {
+          result = await window.FrontMcpBridge.callTool(toolName, args || {});
+        } else {
+          throw new Error('Tool calling not available');
+        }
+        options.onSuccess?.(result);
+        return result;
+      } catch (err) {
+        setError(err);
+        options.onError?.(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    }, [toolName]);
+
+    return [callTool, { loading, error, available: isAvailable }];
+  }
+
+  // ============================================
+  // 4. FrontMCP UI Components
+  // ============================================
+  function Card({ title, subtitle, variant, size, className, children, footer }) {
+    const baseClasses = 'rounded-lg border bg-bg-surface';
+    const variantClasses = variant === 'elevated' ? 'shadow-md' : 'border-divider';
+    const sizeClasses = { sm: 'p-3', md: 'p-4', lg: 'p-6' }[size || 'md'];
+    return React.createElement('div', { className: [baseClasses, variantClasses, sizeClasses, className].filter(Boolean).join(' ') },
+      (title || subtitle) && React.createElement('div', { className: 'mb-4' },
+        title && React.createElement('h3', { className: 'text-lg font-semibold text-text-primary' }, title),
+        subtitle && React.createElement('p', { className: 'text-sm text-text-secondary mt-1' }, subtitle)
+      ),
+      children,
+      footer && React.createElement('div', { className: 'mt-4 pt-4 border-t border-divider' }, footer)
+    );
+  }
+
+  function Badge({ children, variant, size, pill }) {
+    const baseClasses = 'inline-flex items-center font-medium';
+    const variantClasses = {
+      default: 'bg-bg-secondary text-text-primary',
+      success: 'bg-green-100 text-green-800',
+      warning: 'bg-yellow-100 text-yellow-800',
+      info: 'bg-blue-100 text-blue-800',
+      danger: 'bg-red-100 text-red-800',
+    }[variant || 'default'];
+    const sizeClasses = { sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-1 text-sm', lg: 'px-3 py-1.5 text-base' }[size || 'md'];
+    const pillClasses = pill ? 'rounded-full' : 'rounded-md';
+    return React.createElement('span', {
+      className: [baseClasses, variantClasses, sizeClasses, pillClasses].filter(Boolean).join(' ')
+    }, children);
+  }
+
+  function Button({ children, variant, size, disabled, onClick, className }) {
+    const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors';
+    const variantClasses = {
+      primary: 'bg-primary text-white hover:bg-primary/90',
+      secondary: 'bg-bg-secondary text-text-primary hover:bg-bg-secondary/80',
+      outline: 'border border-divider bg-transparent hover:bg-bg-secondary',
+      ghost: 'bg-transparent hover:bg-bg-secondary',
+    }[variant || 'primary'];
+    const sizeClasses = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg' }[size || 'md'];
+    const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
+    return React.createElement('button', {
+      type: 'button',
+      className: [baseClasses, variantClasses, sizeClasses, disabledClasses, className].filter(Boolean).join(' '),
+      disabled,
+      onClick,
+    }, children);
+  }
+
+  // Expose via react_namespaceObject for transpiled components
+  window.react_namespaceObject = {
+    ...React,
+    useMcpBridgeContext,
+    useToolOutput,
+    useToolInput,
+    useTheme,
+    useCallTool,
+    Card,
+    Badge,
+    Button,
+    McpBridgeProvider: ({ children }) => children,
+  };
+  window.react_dom_namespaceObject = ReactDOM;
+
+  // Template helpers
+  window.__frontmcp_helpers = {
+    escapeHtml: (str) => String(str).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c] || c),
+    formatDate: (d) => new Date(d).toLocaleDateString(),
+    formatCurrency: (a, c) => new Intl.NumberFormat('en-US', {style:'currency',currency:c||'USD'}).format(a),
+  };
+
+  // Component-specific helpers (for weather demo, etc.)
+  window.iconMap = {
+    sunny: '\\u2600\\uFE0F', cloudy: '\\u2601\\uFE0F', rainy: '\\uD83C\\uDF27\\uFE0F',
+    snowy: '\\u2744\\uFE0F', stormy: '\\u26C8\\uFE0F', windy: '\\uD83D\\uDCA8', foggy: '\\uD83C\\uDF2B\\uFE0F',
+  };
+  window.getConditionBadgeVariant = function(c) {
+    switch(c) { case 'sunny': return 'success'; case 'rainy': case 'snowy': return 'info'; case 'stormy': return 'warning'; default: return 'default'; }
+  };
+
+  console.log('[FrontMCP Hybrid] React 19 runtime loaded with hooks and components');
+
+  // ============================================
+  // 5. Dynamic Renderer
+  // ============================================
+  let currentComponent = null;
+  let reactRoot = null;
+
+  function hideLoader() {
+    const loader = document.querySelector('#frontmcp-widget-root > div');
+    if (loader) loader.style.display = 'none';
+  }
+
+  function showError(message) {
+    const errorEl = document.getElementById('frontmcp-error');
+    if (errorEl) {
+      errorEl.textContent = message;
+      errorEl.style.display = 'block';
+    }
+    hideLoader();
+  }
+
+  function render() {
+    const bridge = window.FrontMcpBridge;
+    const output = bridge?.getToolOutput();
+
+    if (!currentComponent) {
+      console.log('[FrontMCP Hybrid] No component loaded yet');
+      return false;
+    }
+
+    if (!output) {
+      console.log('[FrontMCP Hybrid] No data available yet');
+      return false;
+    }
+
+    const root = document.getElementById('frontmcp-widget-root');
+    if (!root) return false;
+
+    const props = {
+      input: bridge.getToolInput() || {},
+      output: output,
+      structuredContent: bridge.getStructuredContent(),
+      helpers: window.__frontmcp_helpers,
+    };
+
+    try {
+      hideLoader();
+      const element = React.createElement(currentComponent, props);
+      if (!reactRoot) {
+        reactRoot = ReactDOM.createRoot(root);
+      }
+      reactRoot.render(element);
+      console.log('[FrontMCP Hybrid] Component rendered with data');
+      return true;
+    } catch (err) {
+      console.error('[FrontMCP Hybrid] Render failed:', err);
+      showError('Rendering failed: ' + err.message);
+      return false;
+    }
+  }
+
+  async function loadComponent(payload) {
+    if (!payload?.code) {
+      console.warn('[FrontMCP Hybrid] No component code in payload');
+      return;
+    }
+
+    console.log('[FrontMCP Hybrid] Loading component, type:', payload.type);
+
+    try {
+      // Import component via blob URL
+      const blob = new Blob([payload.code], { type: 'application/javascript' });
+      const url = URL.createObjectURL(blob);
+
+      const module = await import(/* webpackIgnore: true */ url);
+      currentComponent = module.default || window.__frontmcp_component;
+      URL.revokeObjectURL(url);
+
+      if (!currentComponent) {
+        throw new Error('Component not found in module');
+      }
+
+      console.log('[FrontMCP Hybrid] Component loaded successfully');
+      render();
+    } catch (err) {
+      console.error('[FrontMCP Hybrid] Failed to load component:', err);
+      showError('Failed to load component: ' + err.message);
+    }
+  }
+
+  // ============================================
+  // 6. Bridge Integration
+  // ============================================
+  async function initializeBridge() {
+    // Wait for bridge to be ready
+    if (!window.FrontMcpBridge?.initialized) {
+      await new Promise(resolve => {
+        window.addEventListener('bridge:ready', resolve, { once: true });
+        // Fallback timeout
+        setTimeout(resolve, 5000);
+      });
+    }
+
+    const bridge = window.FrontMcpBridge;
+    if (!bridge) {
+      console.error('[FrontMCP Hybrid] Bridge not available');
+      showError('Bridge initialization failed');
+      return;
+    }
+
+    console.log('[FrontMCP Hybrid] Bridge ready, adapter:', bridge.adapterId);
+
+    // Listen for component code in tool response metadata
+    if (typeof bridge.onToolResponseMetadata === 'function') {
+      bridge.onToolResponseMetadata(function(metadata) {
+        console.log('[FrontMCP Hybrid] Received tool response metadata');
+
+        // Check for component payload
+        const componentPayload = metadata['ui/component'];
+        if (componentPayload) {
+          loadComponent(componentPayload);
+        }
+      });
+    }
+
+    // Listen for data updates (for re-renders)
+    if (typeof bridge.onToolResult === 'function') {
+      bridge.onToolResult(function(result) {
+        console.log('[FrontMCP Hybrid] Received tool result update');
+        render();
+      });
+    }
+
+    // Check if data already available (e.g., page refresh)
+    const existingMetadata = bridge.getToolResponseMetadata?.();
+    if (existingMetadata?.['ui/component']) {
+      loadComponent(existingMetadata['ui/component']);
+    }
+  }
+
+  // Start initialization
+  initializeBridge();
+  </script>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title || toolName)}</title>
+  ${fontPreconnect}
+  ${fontStylesheets}
+  ${tailwindScript}
+  ${styleBlock}
+  ${spinnerCss}
+  ${toolMetaScript}
+  ${bridgeScript}
+</head>
+<body class="bg-white font-sans antialiased">
+  ${placeholderContent}
+  ${hybridRuntimeScript}
+</body>
+</html>`;
+}
+function wrapStaticWidgetUniversal(options) {
+  const {
+    toolName,
+    ssrContent,
+    uiConfig,
+    title,
+    theme: themeOverrides,
+    rendererType,
+    componentCode,
+    embeddedData,
+    selfContained = false
+  } = options;
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const fontPreconnect = buildFontPreconnect();
+  const fontStylesheets = buildFontStylesheets({ inter: true });
+  const scripts = buildCdnScripts({
+    tailwind: true,
+    htmx: false,
+    alpine: false,
+    icons: false,
+    inline: false
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>`;
+  const cspMetaTag = "";
+  const isReactBased = rendererType === "react" || rendererType === "mdx";
+  const hasEmbeddedData = embeddedData && (embeddedData.output !== void 0 || embeddedData.input !== void 0);
+  const includeBridge = !selfContained && !hasEmbeddedData;
+  const bridgeScript = includeBridge ? BRIDGE_SCRIPT_TAGS.universal : "";
+  const helpers = createTemplateHelpers();
+  const toolNameScript = selfContained && hasEmbeddedData ? `<script>
+  // Tool metadata (self-contained inline mode - no bridge, no wrapper interference)
+  window.__mcpToolName = ${helpers.jsonEmbed(toolName)};
+  window.__mcpWidgetAccessible = ${helpers.jsonEmbed(uiConfig.widgetAccessible ?? false)};
+  // Embedded data for immediate rendering
+  window.__mcpToolInput = ${helpers.jsonEmbed(embeddedData.input ?? {})};
+  window.__mcpToolOutput = ${helpers.jsonEmbed(embeddedData.output)};
+  window.__mcpStructuredContent = ${helpers.jsonEmbed(embeddedData.structuredContent)};
+  // Flags for self-contained mode
+  window.__mcpDataEmbedded = true;
+  window.__mcpSelfContained = true;
+  // No bridge included - React component handles state internally via hooks
+</script>` : hasEmbeddedData ? `<script>
+  // Tool metadata (inline mode - data embedded, backward compat)
+  window.__mcpToolName = ${helpers.jsonEmbed(toolName)};
+  window.__mcpWidgetAccessible = ${helpers.jsonEmbed(uiConfig.widgetAccessible ?? false)};
+  window.__mcpToolInput = ${helpers.jsonEmbed(embeddedData.input ?? {})};
+  window.__mcpToolOutput = ${helpers.jsonEmbed(embeddedData.output)};
+  window.__mcpStructuredContent = ${helpers.jsonEmbed(embeddedData.structuredContent)};
+  window.__mcpDataEmbedded = true;
+</script>` : `<script>
+  // Tool metadata (static mode - data injected by host at runtime)
+  window.__mcpToolName = ${helpers.jsonEmbed(toolName)};
+  window.__mcpWidgetAccessible = ${helpers.jsonEmbed(uiConfig.widgetAccessible ?? false)};
+  // Data will be provided by host platform:
+  // - OpenAI: window.openai.toolOutput
+  // - FrontMCP Bridge: window.__mcpToolOutput, window.__mcpStructuredContent
+</script>`;
+  const reactModuleScript = isReactBased && componentCode ? `
+  <!-- FrontMCP React Widget Runtime (Single ES Module) -->
+  <script type="module">
+  // ============================================
+  // 1. Import React 19 from esm.sh
+  // ============================================
+  import React from 'https://esm.sh/react@19';
+  import ReactDOM from 'https://esm.sh/react-dom@19/client';
+
+  // Make React available globally for the component code
+  window.React = React;
+  window.ReactDOM = ReactDOM;
+
+  // ============================================
+  // 1b. Provide ALL webpack namespace objects
+  // ============================================
+  // Webpack generates different namespace variable names when bundling:
+  // - external_react_namespaceObject: React marked as external
+  // - jsx_runtime_namespaceObject: react/jsx-runtime
+  // We must provide ALL of these for transpiled components to work.
+
+  // external_react_namespaceObject - for React imports (useState, useEffect, etc.)
+  window.external_react_namespaceObject = React;
+
+  // jsx_runtime_namespaceObject - for JSX transformation (jsx, jsxs functions)
+  window.jsx_runtime_namespaceObject = {
+    jsx: (type, props, key) => {
+      if (key !== undefined) props = { ...props, key };
+      return React.createElement(type, props);
+    },
+    jsxs: (type, props, key) => {
+      if (key !== undefined) props = { ...props, key };
+      return React.createElement(type, props);
+    },
+    Fragment: React.Fragment,
+  };
+
+  // process.env - for development mode checks
+  window.process = window.process || { env: { NODE_ENV: 'production' } };
+
+  // ============================================
+  // 1c. Component-specific helpers
+  // ============================================
+  // These are module-level variables that get lost when calling .toString() on the component.
+  // For the weather component, we need iconMap and getConditionBadgeVariant.
+
+  window.iconMap = {
+    sunny: '\u2600\uFE0F',
+    cloudy: '\u2601\uFE0F',
+    rainy: '\u{1F327}\uFE0F',
+    snowy: '\u2744\uFE0F',
+    stormy: '\u26C8\uFE0F',
+    windy: '\u{1F4A8}',
+    foggy: '\u{1F32B}\uFE0F',
+  };
+
+  window.getConditionBadgeVariant = function(conditions) {
+    switch (conditions) {
+      case 'sunny': return 'success';
+      case 'rainy':
+      case 'snowy': return 'info';
+      case 'stormy': return 'warning';
+      default: return 'default';
+    }
+  };
+
+  // ============================================
+  // 2. Provide FrontMCP hooks on the react namespace
+  // ============================================
+  // Transpiled components may call react_namespaceObject.useMcpBridgeContext, etc.
+  // These are FrontMCP hooks that get bundled with React imports.
+  // We provide stub implementations that work with the client-side data.
+
+  // State storage for hooks
+  const hookState = {
+    toolOutput: null,
+    toolInput: null,
+    theme: 'light',
+    ready: false,
+  };
+
+  // useMcpBridgeContext - returns context about the bridge
+  function useMcpBridgeContext() {
+    return {
+      bridge: window.__frontmcp?.bridge || null,
+      loading: false,
+      error: null,
+      ready: hookState.ready,
+      adapterId: 'openai',
+      capabilities: { canCallTools: true, canSendMessages: false },
+    };
+  }
+
+  // useToolOutput - returns the tool output
+  function useToolOutput() {
+    const [output, setOutput] = React.useState(hookState.toolOutput);
+    React.useEffect(() => {
+      // Update when toolOutput changes
+      const checkOutput = () => {
+        const newOutput = getToolOutput();
+        if (newOutput && newOutput !== output) {
+          setOutput(newOutput);
+          hookState.toolOutput = newOutput;
+        }
+      };
+      const interval = setInterval(checkOutput, 100);
+      checkOutput();
+      return () => clearInterval(interval);
+    }, []);
+    return output;
+  }
+
+  // useToolInput - returns the tool input
+  function useToolInput() {
+    return hookState.toolInput || window.__mcpToolInput || {};
+  }
+
+  // useTheme - returns current theme
+  function useTheme() {
+    const [theme, setTheme] = React.useState(hookState.theme);
+    React.useEffect(() => {
+      // Try to detect theme from host
+      if (window.openai?.theme) {
+        setTheme(window.openai.theme);
+      }
+    }, []);
+    return theme;
+  }
+
+  // useCallTool - returns a function to call tools from within widgets
+  // Supports multiple environments:
+  // - OpenAI: Uses window.openai.callTool directly
+  // - FrontMCP Bridge: Uses window.__frontmcp.callTool
+  // - Other: Falls back gracefully
+  function useCallTool(toolName, options = {}) {
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+
+    // Check availability once
+    const isAvailable = !!(
+      (window.openai && typeof window.openai.callTool === 'function') ||
+      (window.__frontmcp && typeof window.__frontmcp.callTool === 'function')
+    );
+
+    const callTool = React.useCallback(async (args) => {
+      setLoading(true);
+      setError(null);
+      try {
+        let result;
+
+        // Priority 1: OpenAI SDK (most reliable in OpenAI iframe)
+        if (window.openai && typeof window.openai.callTool === 'function') {
+          console.log('[FrontMCP] useCallTool: Using OpenAI SDK for', toolName);
+          result = await window.openai.callTool(toolName, args || {});
+        } else if (window.__frontmcp && typeof window.__frontmcp.callTool === 'function') {
+          // Priority 2: FrontMCP bridge
+          console.log('[FrontMCP] useCallTool: Using FrontMCP bridge for', toolName);
+          result = await window.__frontmcp.callTool(toolName, args || {});
+        } else {
+          // Not available - log warning and return null
+          console.warn(
+            '[FrontMCP] useCallTool: No tool calling mechanism available. ' +
+            'Tool: "' + toolName + '". Widget is display-only.'
+          );
+          const notAvailableError = new Error('Tool calling not available in this environment');
+          setError(notAvailableError);
+          options.onError?.(notAvailableError);
+          return null;
+        }
+
+        // Normalize result: ensure structuredContent is available for component callbacks
+        // OpenAI returns raw tool output directly, but components may expect { structuredContent: ... }
+        // This ensures both direct access (result.temperature) and wrapped access (result.structuredContent.temperature) work
+        const normalizedResult = {
+          ...result,
+          structuredContent: result.structuredContent ?? result,
+        };
+
+        // For static mode: Update global state so hooks (useToolOutput) pick up the change
+        // For self-contained/inline mode: Skip this - React component handles state internally via setOutput
+        // Updating global state in inline mode could trigger OpenAI's wrapper to overwrite our React component
+        if (!window.__mcpSelfContained && !window.__mcpDataEmbedded) {
+          window.__mcpToolOutput = normalizedResult.structuredContent;
+          window.__mcpStructuredContent = normalizedResult.structuredContent;
+        }
+
+        console.log('[FrontMCP] useCallTool: Tool returned, normalized result:', normalizedResult);
+        options.onSuccess?.(normalizedResult);
+        return normalizedResult;
+      } catch (err) {
+        console.error('[FrontMCP] useCallTool error:', err);
+        setError(err);
+        options.onError?.(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    }, [toolName]);
+
+    return [callTool, { loading, error, available: isAvailable }];
+  }
+
+  // ============================================
+  // 2b. UI Components (Card, Badge, etc.)
+  // ============================================
+  // These may be bundled from @frontmcp/ui/react and referenced via namespace.
+  // We provide simple stub implementations.
+
+  function Card({ title, subtitle, variant, size, className, children, footer }) {
+    const baseClasses = 'rounded-lg border bg-bg-surface';
+    const variantClasses = variant === 'elevated' ? 'shadow-md' : 'border-divider';
+    const sizeClasses = { sm: 'p-3', md: 'p-4', lg: 'p-6' }[size || 'md'];
+
+    return React.createElement('div', { className: [baseClasses, variantClasses, sizeClasses, className].filter(Boolean).join(' ') },
+      (title || subtitle) && React.createElement('div', { className: 'mb-4' },
+        title && React.createElement('h3', { className: 'text-lg font-semibold text-text-primary' }, title),
+        subtitle && React.createElement('p', { className: 'text-sm text-text-secondary mt-1' }, subtitle)
+      ),
+      children,
+      footer && React.createElement('div', { className: 'mt-4 pt-4 border-t border-divider' }, footer)
+    );
+  }
+
+  function Badge({ children, variant, size, pill }) {
+    const baseClasses = 'inline-flex items-center font-medium';
+    const variantClasses = {
+      default: 'bg-bg-secondary text-text-primary',
+      success: 'bg-green-100 text-green-800',
+      warning: 'bg-yellow-100 text-yellow-800',
+      info: 'bg-blue-100 text-blue-800',
+      danger: 'bg-red-100 text-red-800',
+    }[variant || 'default'];
+    const sizeClasses = { sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-1 text-sm', lg: 'px-3 py-1.5 text-base' }[size || 'md'];
+    const pillClasses = pill ? 'rounded-full' : 'rounded-md';
+
+    return React.createElement('span', {
+      className: [baseClasses, variantClasses, sizeClasses, pillClasses].filter(Boolean).join(' ')
+    }, children);
+  }
+
+  function Button({ children, variant, size, disabled, onClick, className }) {
+    const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors';
+    const variantClasses = {
+      primary: 'bg-primary text-white hover:bg-primary/90',
+      secondary: 'bg-bg-secondary text-text-primary hover:bg-bg-secondary/80',
+      outline: 'border border-divider bg-transparent hover:bg-bg-secondary',
+      ghost: 'bg-transparent hover:bg-bg-secondary',
+    }[variant || 'primary'];
+    const sizeClasses = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg' }[size || 'md'];
+    const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+    return React.createElement('button', {
+      type: 'button',
+      className: [baseClasses, variantClasses, sizeClasses, disabledClasses, className].filter(Boolean).join(' '),
+      disabled,
+      onClick,
+    }, children);
+  }
+
+  // Provide webpack-style namespace objects that transpiled components may reference
+  // This fixes "react_namespaceObject is not defined" errors
+  // Include both React exports AND FrontMCP hooks/components
+  window.react_namespaceObject = {
+    ...React,
+    // FrontMCP hooks
+    useMcpBridgeContext,
+    useToolOutput,
+    useToolInput,
+    useTheme,
+    useCallTool,
+    // FrontMCP UI components
+    Card,
+    Badge,
+    Button,
+    // Also provide as 'McpBridgeProvider' stub (no-op for client)
+    McpBridgeProvider: ({ children }) => children,
+  };
+  window.react_dom_namespaceObject = ReactDOM;
+
+  console.log('[FrontMCP] React 19 loaded from esm.sh with FrontMCP hooks');
+
+  // ============================================
+  // 2. Define the Component
+  // ============================================
+  // Note: The component may reference react_namespaceObject which is now available
+  ${componentCode}
+
+  // ============================================
+  // 3. Helper Functions
+  // ============================================
+  function getComponent() {
+    return window.__frontmcp_component;
+  }
+
+  function getToolOutput() {
+    // Try OpenAI's toolOutput first
+    if (window.openai && window.openai.toolOutput) {
+      return window.openai.toolOutput;
+    }
+    // Try FrontMCP bridge
+    if (window.__mcpToolOutput) {
+      return window.__mcpToolOutput;
+    }
+    // Try __frontmcp namespace
+    if (window.__frontmcp && window.__frontmcp.toolOutput) {
+      return window.__frontmcp.toolOutput;
+    }
+    return null;
+  }
+
+  function showLoader() {
+    const loader = document.getElementById('frontmcp-loader');
+    if (loader) loader.style.display = 'flex';
+  }
+
+  function hideLoader() {
+    const loader = document.getElementById('frontmcp-loader');
+    if (loader) loader.style.display = 'none';
+  }
+
+  function showError(message) {
+    const errorEl = document.getElementById('frontmcp-error');
+    if (errorEl) {
+      errorEl.textContent = message;
+      errorEl.style.display = 'block';
+    }
+    hideLoader();
+  }
+
+  // ============================================
+  // 4. Render Function
+  // ============================================
+  function renderComponent() {
+    const Component = getComponent();
+    if (!Component) {
+      console.warn('[FrontMCP] No component registered for client-side rendering');
+      showError('Component not found');
+      return false;
+    }
+
+    const output = getToolOutput();
+    if (!output) {
+      return false; // Not ready yet, keep polling
+    }
+
+    // Find or create widget root
+    // OpenAI may have removed our original root element during iframe setup
+    // when their wrapper script overwrites #widget-root with a loading spinner
+    let root = document.getElementById('frontmcp-widget-root');
+    if (!root) {
+      console.log('[FrontMCP] Widget root not found, creating new element');
+
+      // Look for OpenAI's container first - we should render inside it
+      const openaiRoot = document.getElementById('widget-root');
+
+      if (openaiRoot) {
+        // Clear OpenAI's wrapper content and create our root inside
+        console.log('[FrontMCP] Found OpenAI widget-root, creating frontmcp-widget-root inside it');
+        openaiRoot.innerHTML = '';
+        root = document.createElement('div');
+        root.id = 'frontmcp-widget-root';
+        openaiRoot.appendChild(root);
+      } else {
+        // Fallback: create in body (for MCP Inspector, etc.)
+        console.log('[FrontMCP] No OpenAI widget-root, creating in body');
+        root = document.createElement('div');
+        root.id = 'frontmcp-widget-root';
+        document.body.innerHTML = '';
+        document.body.appendChild(root);
+      }
+    }
+
+    // Ensure it's visible
+    root.style.display = 'block';
+
+    try {
+      // Build props
+      const props = {
+        input: window.__mcpToolInput || {},
+        output: output,
+        structuredContent: window.__mcpStructuredContent,
+        helpers: {
+          escapeHtml: (str) => String(str).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c] || c),
+          formatDate: (d) => new Date(d).toLocaleDateString(),
+          formatCurrency: (a, c) => new Intl.NumberFormat('en-US', {style:'currency',currency:c||'USD'}).format(a),
+        }
+      };
+
+      // Hide loader and show widget root before rendering
+      hideLoader();
+      root.style.display = 'block';
+
+      // Render with React 19
+      const element = React.createElement(Component, props);
+      const reactRoot = ReactDOM.createRoot(root);
+      reactRoot.render(element);
+      console.log('[FrontMCP] Component rendered successfully with data:', output);
+
+      // Mark React as mounted to prevent OpenAI wrapper from overwriting
+      // This works with the renderContent override in the Tool Metadata script
+      window.__frontmcp = window.__frontmcp || {};
+      window.__frontmcp._reactMounted = true;
+
+      // For inline mode: prevent OpenAI's wrapper from re-rendering over us
+      // The wrapper subscribes to bridge state changes and will overwrite our content
+      // when bridge.setData is called. We disable this after initial render.
+      if (window.__mcpDataEmbedded && window.__frontmcp && window.__frontmcp.bridge) {
+        window.__frontmcp._inlineRendered = true;
+
+        // Override setData to no-op after inline render
+        const originalSetData = window.__frontmcp.bridge.setData;
+        if (originalSetData && !window.__frontmcp._setDataOverridden) {
+          window.__frontmcp._setDataOverridden = true;
+          window.__frontmcp.bridge.setData = function(data) {
+            if (window.__frontmcp._inlineRendered) {
+              console.log('[FrontMCP] Skipping bridge setData - inline mode already rendered');
+              return;
+            }
+            return originalSetData.call(this, data);
+          };
+        }
+      }
+
+      return true;
+    } catch (e) {
+      console.error('[FrontMCP] React rendering failed:', e);
+      showError('Rendering failed: ' + e.message);
+      return false;
+    }
+  }
+
+  // ============================================
+  // 5. Main: Render immediately or poll for toolOutput
+  // ============================================
+  // For inline mode (embeddedData): data is already embedded, render immediately
+  // For static mode: poll for window.openai.toolOutput
+
+  if (window.__mcpDataEmbedded) {
+    // Inline mode: Data is embedded in HTML, render immediately
+    console.log('[FrontMCP] Inline mode: data embedded, rendering immediately');
+    if (!renderComponent()) {
+      showError('Failed to render component');
+    }
+  } else {
+    // MCP-resource mode: Poll for toolOutput from host platform
+    showLoader();
+
+    let attempts = 0;
+    const maxAttempts = 100; // 10 seconds max
+    const pollInterval = setInterval(() => {
+      attempts++;
+      if (renderComponent()) {
+        clearInterval(pollInterval);
+      } else if (attempts >= maxAttempts) {
+        clearInterval(pollInterval);
+        if (!getToolOutput()) {
+          console.warn('[FrontMCP] Timeout waiting for toolOutput');
+          showError('Timeout waiting for data');
+        }
+      }
+    }, 100);
+  }
+  </script>` : "";
+  const pageTitle = title || `${escapeHtml(toolName)} - Tool Widget`;
+  const loaderHtml = isReactBased && componentCode && !hasEmbeddedData ? `
+  <!-- Loading State -->
+  <div id="frontmcp-loader" style="display: flex; align-items: center; justify-content: center; padding: 2rem; gap: 0.5rem;">
+    <svg class="animate-spin" style="width: 1.25rem; height: 1.25rem; color: #6b7280;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    <span style="color: #6b7280; font-size: 0.875rem;">Loading widget...</span>
+  </div>
+  <div id="frontmcp-error" style="display: none; padding: 1rem; margin: 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; color: #dc2626; font-size: 0.875rem;"></div>
+  ` : "";
+  const widgetRootStyle = hasEmbeddedData ? "" : "display: none;";
+  const wrappedContent = isReactBased && componentCode ? `${loaderHtml}<div id="frontmcp-widget-root" style="${widgetRootStyle}">${ssrContent}</div>` : ssrContent;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${pageTitle}</title>
+  ${cspMetaTag}
+
+  <!-- Fonts -->
+  ${fontPreconnect}
+  ${fontStylesheets}
+
+  <!-- Tailwind CSS -->
+  ${scripts}
+  ${styleBlock}
+
+  <!-- Spinner Animation -->
+  <style>
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .animate-spin { animation: spin 1s linear infinite; }
+  </style>
+
+  <!-- Tool Metadata -->
+  ${toolNameScript}
+
+  <!-- FrontMCP Bridge (Universal - Reads data from host at runtime) -->
+  ${bridgeScript}
+</head>
+<body class="bg-background text-text-primary font-sans antialiased">
+  ${wrappedContent}
+  ${reactModuleScript}
+</body>
+</html>`;
+}
+function buildOpenAIMeta(options) {
+  const meta = {};
+  if (options.widgetAccessible) {
+    meta["openai/widgetAccessible"] = true;
+  }
+  if (options.widgetDescription) {
+    meta["openai/widgetDescription"] = options.widgetDescription;
+  }
+  if (options.csp) {
+    const cspConfig = {};
+    if (options.csp.connectDomains?.length) {
+      cspConfig["connect_domains"] = options.csp.connectDomains;
+    }
+    if (options.csp.resourceDomains?.length) {
+      cspConfig["resource_domains"] = options.csp.resourceDomains;
+    }
+    if (Object.keys(cspConfig).length > 0) {
+      meta["openai/widgetCSP"] = cspConfig;
+    }
+  }
+  if (options.displayMode && options.displayMode !== "inline") {
+    meta["openai/displayMode"] = options.displayMode;
+  }
+  return meta;
+}
+function getToolUIMimeType(platform = "generic") {
+  switch (platform) {
+    case "openai":
+      return "text/html+skybridge";
+    case "ext-apps":
+      return "text/html+mcp";
+    default:
+      return "text/html";
+  }
+}
+var CLOUDFLARE_CDN = {
+  tailwindCss: "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",
+  htmx: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.4/htmx.min.js",
+  alpinejs: "https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.3/cdn.min.js"
+};
+function wrapToolUIForClaude(options) {
+  const { content, toolName, input = {}, output, title, includeHtmx = false, includeAlpine = false } = options;
+  const tailwindCss = `<link href="${CLOUDFLARE_CDN.tailwindCss}" rel="stylesheet">`;
+  const htmxScript = includeHtmx ? `<script src="${CLOUDFLARE_CDN.htmx}" crossorigin="anonymous"></script>` : "";
+  const alpineScript = includeAlpine ? `<script src="${CLOUDFLARE_CDN.alpinejs}" crossorigin="anonymous" defer></script>` : "";
+  const helpers = createTemplateHelpers();
+  const dataScript = `<script>
+  window.__mcpToolName = ${helpers.jsonEmbed(toolName)};
+  window.__mcpToolInput = ${helpers.jsonEmbed(input)};
+  window.__mcpToolOutput = ${helpers.jsonEmbed(output)};
+</script>`;
+  const pageTitle = title || `${escapeHtml(toolName)} - Tool Result`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${pageTitle}</title>
+  ${tailwindCss}
+  ${htmxScript}
+  ${alpineScript}
+  ${dataScript}
+</head>
+<body class="bg-gray-100 p-4">
+  ${content}
+</body>
+</html>`;
+}
+
+// libs/uipack/src/runtime/adapters/index.ts
+init_html_adapter();
+init_mdx_adapter();
+var adapterLoaders = {
+  html: () => Promise.resolve().then(() => (init_html_adapter(), html_adapter_exports)).then((m) => m.createHtmlAdapter()),
+  react: void 0,
+  // React adapter is in @frontmcp/ui
+  mdx: () => Promise.resolve().then(() => (init_mdx_adapter(), mdx_adapter_exports)).then((m) => m.createMdxAdapter()),
+  markdown: () => Promise.resolve().then(() => (init_mdx_adapter(), mdx_adapter_exports)).then((m) => m.createMdxAdapter()),
+  // Use MDX for markdown
+  auto: void 0
+  // Auto-detection handled by runtime
+};
+function getAdapterLoader(type) {
+  return adapterLoaders[type];
+}
+async function loadAdapter(type) {
+  const loader = getAdapterLoader(type);
+  if (!loader) {
+    return null;
+  }
+  return loader();
+}
+
+// libs/uipack/src/runtime/renderer-runtime.ts
+var RendererRuntime = class {
+  config;
+  adapters = /* @__PURE__ */ new Map();
+  state;
+  updateCallbacks = [];
+  bridgeUnsubscribe = null;
+  constructor(config = {}) {
+    this.config = config;
+    this.state = {
+      initialized: false,
+      currentAdapter: null,
+      currentTarget: null,
+      context: {
+        input: config.input ?? {},
+        output: config.output,
+        structuredContent: config.structuredContent,
+        toolName: config.toolName ?? "unknown"
+      }
+    };
+  }
+  /**
+   * Initialize the runtime.
+   * Reads manifest, sets up Bridge listeners, and prepares adapters.
+   */
+  async init() {
+    if (this.state.initialized) {
+      return;
+    }
+    this.log("Initializing RendererRuntime");
+    this.readManifest();
+    this.readPageGlobals();
+    this.setupBridgeListeners();
+    this.state.initialized = true;
+    this.log("RendererRuntime initialized", this.config.manifest);
+  }
+  /**
+   * Get the current render context.
+   */
+  get context() {
+    return { ...this.state.context };
+  }
+  /**
+   * Get the manifest.
+   */
+  get manifest() {
+    return this.config.manifest;
+  }
+  /**
+   * Get the resolved UI type.
+   */
+  get uiType() {
+    return this.config.manifest?.uiType ?? "auto";
+  }
+  /**
+   * Render content to a target element.
+   *
+   * @param target - Element to render into
+   * @param content - Content to render (optional, uses existing innerHTML)
+   * @param options - Render options
+   */
+  async render(target, content, options) {
+    const type = this.uiType;
+    const contentToRender = content ?? target.innerHTML;
+    this.log("Rendering", { type, hasContent: !!content, hydrate: options?.hydrate });
+    const adapter = await this.getAdapter(type, contentToRender);
+    if (!adapter) {
+      return {
+        success: false,
+        error: `No adapter available for UI type: ${type}`
+      };
+    }
+    this.state.currentAdapter = adapter;
+    this.state.currentTarget = target;
+    if (options?.hydrate && adapter.hydrate) {
+      return adapter.hydrate(target, this.state.context);
+    }
+    if (adapter.renderToDOM) {
+      return adapter.renderToDOM(contentToRender, target, this.state.context);
+    }
+    const html = await adapter.render(contentToRender, this.state.context);
+    target.innerHTML = html;
+    return { success: true, html };
+  }
+  /**
+   * Update the render context and re-render if needed.
+   */
+  async updateContext(updates) {
+    this.state.context = {
+      ...this.state.context,
+      ...updates
+    };
+    this.log("Context updated", updates);
+    for (const callback of this.updateCallbacks) {
+      try {
+        callback(this.state.context);
+      } catch (error) {
+        console.error("[FrontMCP] Update callback error:", error);
+      }
+    }
+    if (this.state.currentTarget && this.state.currentAdapter) {
+      if (this.state.currentAdapter.update) {
+        await this.state.currentAdapter.update(this.state.currentTarget, this.state.context);
+      }
+    }
+  }
+  /**
+   * Subscribe to context updates.
+   */
+  onUpdate(callback) {
+    this.updateCallbacks.push(callback);
+    return () => {
+      const index = this.updateCallbacks.indexOf(callback);
+      if (index > -1) {
+        this.updateCallbacks.splice(index, 1);
+      }
+    };
+  }
+  /**
+   * Clean up resources.
+   */
+  destroy() {
+    if (this.bridgeUnsubscribe) {
+      this.bridgeUnsubscribe();
+      this.bridgeUnsubscribe = null;
+    }
+    if (this.state.currentAdapter && this.state.currentTarget) {
+      this.state.currentAdapter.destroy?.(this.state.currentTarget);
+    }
+    this.state.initialized = false;
+    this.state.currentAdapter = null;
+    this.state.currentTarget = null;
+    this.updateCallbacks = [];
+  }
+  /**
+   * Read manifest from page.
+   */
+  readManifest() {
+    const manifestEl = document.getElementById("frontmcp-widget-manifest");
+    if (manifestEl) {
+      try {
+        const manifest = JSON.parse(manifestEl.textContent ?? "{}");
+        this.config.manifest = manifest;
+        this.log("Loaded manifest from page", manifest);
+        return;
+      } catch {
+        console.warn("[FrontMCP] Failed to parse manifest from page");
+      }
+    }
+    const legacyManifestEl = document.getElementById("__mcp_manifest");
+    if (legacyManifestEl) {
+      try {
+        const manifest = JSON.parse(legacyManifestEl.textContent ?? "{}");
+        this.config.manifest = manifest;
+        return;
+      } catch {
+        console.warn("[FrontMCP] Failed to parse legacy manifest from page");
+      }
+    }
+    const win = window;
+    if (win.__frontmcp?.widget?.manifest) {
+      this.config.manifest = win.__frontmcp.widget.manifest;
+    }
+  }
+  /**
+   * Read initial data from page globals.
+   */
+  readPageGlobals() {
+    const win = window;
+    if (win.__mcpToolName) {
+      this.state.context.toolName = win.__mcpToolName;
+    } else if (this.config.manifest?.tool) {
+      this.state.context.toolName = this.config.manifest.tool;
+    }
+    if (win.__mcpToolInput) {
+      this.state.context.input = win.__mcpToolInput;
+    } else if (win.openai?.toolInput) {
+      this.state.context.input = win.openai.toolInput;
+    }
+    if (win.__mcpToolOutput !== void 0) {
+      this.state.context.output = win.__mcpToolOutput;
+    } else if (win.openai?.toolOutput !== void 0) {
+      this.state.context.output = win.openai.toolOutput;
+    }
+    if (win.__mcpStructuredContent !== void 0) {
+      this.state.context.structuredContent = win.__mcpStructuredContent;
+    }
+  }
+  /**
+   * Set up Bridge event listeners.
+   */
+  setupBridgeListeners() {
+    const win = window;
+    if (win.mcpBridge?.onToolResult) {
+      this.bridgeUnsubscribe = win.mcpBridge.onToolResult((result) => {
+        this.updateContext({ output: result });
+      });
+    }
+    window.addEventListener("frontmcp:toolOutput", ((event) => {
+      this.updateContext({ output: event.detail });
+    }));
+  }
+  /**
+   * Get or load an adapter for a UI type.
+   */
+  async getAdapter(type, content) {
+    if (this.adapters.has(type)) {
+      return this.adapters.get(type);
+    }
+    let resolvedType = type;
+    if (type === "auto" && content) {
+      resolvedType = this.detectType(content);
+      this.log("Auto-detected type:", resolvedType);
+    }
+    if (this.adapters.has(resolvedType)) {
+      return this.adapters.get(resolvedType);
+    }
+    const adapter = await loadAdapter(resolvedType);
+    if (adapter) {
+      this.adapters.set(resolvedType, adapter);
+      if (resolvedType !== type) {
+        this.adapters.set(type, adapter);
+      }
+    }
+    return adapter;
+  }
+  /**
+   * Auto-detect UI type from content.
+   */
+  detectType(content) {
+    if (content.includes("React.createElement") || content.includes("jsx(") || /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*return\s*[\s\S]*</.test(content)) {
+      return "react";
+    }
+    if (/^---[\s\S]*?---/.test(content) || /<[A-Z][a-zA-Z0-9]*[\s/>]/.test(content) || /^import\s+/m.test(content) || /^export\s+/m.test(content)) {
+      return "mdx";
+    }
+    return "html";
+  }
+  /**
+   * Log message if debug enabled.
+   */
+  log(message, ...args) {
+    if (this.config.debug) {
+      console.log(`[FrontMCP Runtime] ${message}`, ...args);
+    }
+  }
+};
+async function createRendererRuntime(config) {
+  const runtime = new RendererRuntime(config);
+  await runtime.init();
+  return runtime;
+}
+async function bootstrapRendererRuntime() {
+  if (document.readyState === "loading") {
+    await new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", () => resolve());
+    });
+  }
+  try {
+    const runtime = await createRendererRuntime({ debug: false });
+    const contentEl = document.querySelector("[data-frontmcp-widget]") || document.querySelector("[data-mcp-widget]") || document.body.firstElementChild;
+    if (contentEl instanceof HTMLElement) {
+      await runtime.render(contentEl, void 0, { hydrate: true });
+    }
+    const win = window;
+    win.__frontmcp = win.__frontmcp ?? {};
+    win.__frontmcp.runtime = runtime;
+    return runtime;
+  } catch (error) {
+    console.error("[FrontMCP] Failed to bootstrap renderer runtime:", error);
+    return null;
+  }
+}
+function generateBootstrapScript() {
+  return `
+<script>
+(function() {
+  'use strict';
+
+  // Wait for runtime to load
+  function bootstrap() {
+    if (window.__frontmcp && window.__frontmcp.bootstrapRuntime) {
+      window.__frontmcp.bootstrapRuntime();
+    } else {
+      // Retry after short delay
+      setTimeout(bootstrap, 50);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap);
+  } else {
+    bootstrap();
+  }
+})();
+</script>
+`.trim();
+}
+export {
+  DEFAULT_CDN_DOMAINS,
+  DEFAULT_CSP_DIRECTIVES,
+  FRONTMCP_BRIDGE_RUNTIME,
+  HtmlRendererAdapter,
+  MCP_BRIDGE_RUNTIME,
+  MdxRendererAdapter,
+  PII_PATTERNS,
+  PLATFORM_BRIDGE_SCRIPTS,
+  REDACTION_TOKENS,
+  RESTRICTIVE_CSP_DIRECTIVES,
+  RendererRuntime,
+  adapterLoaders,
+  bootstrapRendererRuntime,
+  buildCSPDirectives,
+  buildCSPMetaTag,
+  buildOpenAICSP,
+  buildOpenAIMeta,
+  createHtmlAdapter,
+  createMdxAdapter,
+  createRendererRuntime,
+  createSanitizer,
+  createTemplateHelpers,
+  detectPII,
+  detectPIIType,
+  generateBootstrapScript,
+  generateBridgeIIFE as generateCustomBridge,
+  getAdapterLoader,
+  getMCPBridgeScript,
+  getToolUIMimeType,
+  isCreditCard,
+  isEmail,
+  isIPv4,
+  isMCPBridgeSupported,
+  isPhone,
+  isSSN,
+  loadAdapter,
+  redactPIIFromText,
+  sanitizeCSPDomains,
+  sanitizeInput,
+  validateCSPDomain,
+  wrapHybridWidgetShell,
+  wrapLeanWidgetShell,
+  wrapStaticWidgetUniversal,
+  wrapToolUI,
+  wrapToolUIForClaude,
+  wrapToolUIMinimal,
+  wrapToolUIUniversal
+};