@frontmcp/uipack 0.6.1

package/esm/tool-template/index.js

@@ -0,0 +1,3518 @@
+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/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>
+`;
+var FRONTMCP_BRIDGE_RUNTIME = BRIDGE_SCRIPT_TAGS.universal;
+
+// 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'"
+];
+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 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);
+}
+
+// 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>`;
+}
+
+// libs/uipack/src/tool-template/builder.ts
+init_utils();
+
+// libs/uipack/src/renderers/utils/detect.ts
+function isReactComponent(value) {
+  if (typeof value !== "function") {
+    return false;
+  }
+  const fn = value;
+  const typeofSymbol = fn.$$typeof;
+  if (typeofSymbol) {
+    const symbolString = typeofSymbol.toString();
+    return symbolString.includes("react.memo") || symbolString.includes("react.forward_ref") || symbolString.includes("react.lazy");
+  }
+  if (fn.prototype?.isReactComponent) {
+    return true;
+  }
+  if (fn.name && /^[A-Z]/.test(fn.name)) {
+    return true;
+  }
+  return false;
+}
+function isTemplateBuilderFunction(fn) {
+  if (isReactComponent(fn)) {
+    return false;
+  }
+  if (fn.name && /^[A-Z]/.test(fn.name)) {
+    return false;
+  }
+  return true;
+}
+function containsJsx(source) {
+  if (/<[A-Z][a-zA-Z0-9]*(\s|>|\/)/.test(source)) {
+    return true;
+  }
+  if (/<[A-Z][a-zA-Z0-9]*[^>]*\/>/.test(source)) {
+    return true;
+  }
+  if (/<[a-z]+[^>]*\{[^}]+\}/.test(source)) {
+    return true;
+  }
+  if (/\s(className|onClick|onChange|onSubmit|htmlFor)=/.test(source)) {
+    return true;
+  }
+  if (/<>|<\/>|<React\.Fragment>/.test(source)) {
+    return true;
+  }
+  if (/=>\s*\(?\s*</.test(source)) {
+    return true;
+  }
+  if (/return\s*\(?\s*</.test(source)) {
+    return true;
+  }
+  return false;
+}
+function containsMdxSyntax(source) {
+  if (/<[A-Z][a-zA-Z0-9]*/.test(source)) {
+    return true;
+  }
+  if (/^(import|export)\s/m.test(source)) {
+    return true;
+  }
+  if (/\s(className|onClick|onChange|onSubmit|htmlFor|dangerouslySetInnerHTML)=/.test(source)) {
+    return true;
+  }
+  if (/\{[^}"'\n]*\}/.test(source) && !/=\s*["'][^"']*\{/.test(source)) {
+    return true;
+  }
+  if (/^---[\s\S]*?---/m.test(source)) {
+    return true;
+  }
+  if (/<>|<\/>/.test(source)) {
+    return true;
+  }
+  return false;
+}
+function detectTemplateType(template) {
+  if (typeof template === "function") {
+    if (isReactComponent(template)) {
+      return {
+        type: "react",
+        confidence: 0.9,
+        reason: "Function detected as React component (PascalCase name or React symbols)"
+      };
+    }
+    return {
+      type: "html-function",
+      confidence: 0.8,
+      reason: "Function assumed to be HTML template builder"
+    };
+  }
+  if (typeof template === "string") {
+    if (containsMdxSyntax(template)) {
+      const hasMarkdown = /^#{1,6}\s|^\*\s|^\d+\.\s|^-\s/m.test(template);
+      if (hasMarkdown) {
+        return {
+          type: "mdx",
+          confidence: 0.9,
+          reason: "String contains Markdown with JSX components"
+        };
+      }
+      return {
+        type: "jsx-string",
+        confidence: 0.8,
+        reason: "String contains JSX syntax"
+      };
+    }
+    if (containsJsx(template)) {
+      return {
+        type: "jsx-string",
+        confidence: 0.85,
+        reason: "String contains JSX component tags or expressions"
+      };
+    }
+    return {
+      type: "html-string",
+      confidence: 1,
+      reason: "Plain HTML string"
+    };
+  }
+  return {
+    type: "html-string",
+    confidence: 0.5,
+    reason: "Unknown template type, defaulting to HTML"
+  };
+}
+
+// libs/uipack/src/renderers/utils/hash.ts
+function hashString(source) {
+  let hash = 2166136261;
+  for (let i = 0; i < source.length; i++) {
+    hash ^= source.charCodeAt(i);
+    hash = hash * 16777619 >>> 0;
+  }
+  return hash.toString(36);
+}
+
+// libs/uipack/src/renderers/html.renderer.ts
+var handlebarsRenderer = null;
+async function loadHandlebarsRenderer() {
+  if (handlebarsRenderer !== null) {
+    return handlebarsRenderer;
+  }
+  try {
+    const handlebarsModule = await Promise.resolve().then(() => (init_handlebars(), handlebars_exports));
+    const { HandlebarsRenderer: HandlebarsRenderer2 } = handlebarsModule;
+    const renderer = new HandlebarsRenderer2();
+    handlebarsRenderer = {
+      render: (template, context) => renderer.render(template, {
+        input: context.input ?? {},
+        output: context.output,
+        structuredContent: context.structuredContent
+      }),
+      containsHandlebars: (template) => HandlebarsRenderer2.containsHandlebars(template)
+    };
+    return handlebarsRenderer;
+  } catch {
+    return null;
+  }
+}
+function containsHandlebars2(template) {
+  return /\{\{(?!!)[\s\S]*?\}\}/.test(template);
+}
+var HtmlRenderer = class {
+  type = "html";
+  priority = 0;
+  // Lowest priority - fallback renderer
+  /**
+   * Check if this renderer can handle the given template.
+   *
+   * Accepts:
+   * - Any string (assumed to be HTML, with or without Handlebars)
+   * - Functions that are template builders (not React components)
+   */
+  canHandle(template) {
+    if (typeof template === "string") {
+      return true;
+    }
+    if (typeof template === "function") {
+      return isTemplateBuilderFunction(template);
+    }
+    return false;
+  }
+  /**
+   * Check if a template uses Handlebars syntax.
+   *
+   * @param template - Template string to check
+   * @returns true if template contains {{...}} syntax
+   */
+  usesHandlebars(template) {
+    return containsHandlebars2(template);
+  }
+  /**
+   * Transpile the template.
+   *
+   * For HTML templates, no transpilation is needed.
+   * This method returns a dummy result for consistency.
+   */
+  async transpile(template, _options) {
+    const source = typeof template === "string" ? template : template.toString();
+    const hash = hashString(source);
+    return {
+      code: "",
+      // No transpiled code needed
+      hash,
+      cached: true
+      // Always "cached" since no work is done
+    };
+  }
+  /**
+   * Render the template to HTML string.
+   *
+   * For static strings without Handlebars, returns the string directly.
+   * For strings with Handlebars syntax, processes with HandlebarsRenderer.
+   * For functions, calls the function with the context.
+   */
+  async render(template, context, _options) {
+    if (typeof template === "string") {
+      if (containsHandlebars2(template)) {
+        return this.renderHandlebars(template, context);
+      }
+      return template;
+    }
+    if (typeof template === "function") {
+      const result = template(context);
+      if (typeof result === "string" && containsHandlebars2(result)) {
+        return this.renderHandlebars(result, context);
+      }
+      return result;
+    }
+    return String(template);
+  }
+  /**
+   * Render Handlebars template with context.
+   */
+  async renderHandlebars(template, context) {
+    const renderer = await loadHandlebarsRenderer();
+    if (!renderer) {
+      console.warn(
+        "[@frontmcp/ui] Template contains Handlebars syntax but handlebars is not installed. Install it for template interpolation: npm install handlebars"
+      );
+      return template;
+    }
+    return renderer.render(template, {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent
+    });
+  }
+  /**
+   * Get runtime scripts for client-side functionality.
+   *
+   * HTML templates don't need additional runtime scripts.
+   */
+  getRuntimeScripts(_platform) {
+    return {
+      headScripts: "",
+      isInline: false
+    };
+  }
+};
+var htmlRenderer = new HtmlRenderer();
+
+// libs/uipack/src/renderers/registry.ts
+var RendererRegistry = class {
+  renderers = /* @__PURE__ */ new Map();
+  sortedRenderers = [];
+  defaultRenderer = "html";
+  debug;
+  constructor(options = {}) {
+    this.debug = options.debug ?? false;
+    this.register(htmlRenderer);
+  }
+  /**
+   * Register a renderer.
+   *
+   * Renderers are sorted by priority (highest first) for detection.
+   *
+   * @param renderer - Renderer to register
+   */
+  register(renderer) {
+    this.renderers.set(renderer.type, renderer);
+    this.updateSortedList();
+    if (this.debug) {
+      console.log(`[RendererRegistry] Registered renderer: ${renderer.type} (priority: ${renderer.priority})`);
+    }
+  }
+  /**
+   * Unregister a renderer.
+   *
+   * @param type - Type of renderer to remove
+   * @returns True if renderer was removed
+   */
+  unregister(type) {
+    const removed = this.renderers.delete(type);
+    if (removed) {
+      this.updateSortedList();
+    }
+    return removed;
+  }
+  /**
+   * Get a renderer by type.
+   *
+   * @param type - Renderer type
+   * @returns Renderer or undefined if not found
+   */
+  get(type) {
+    return this.renderers.get(type);
+  }
+  /**
+   * Check if a renderer type is registered.
+   *
+   * @param type - Renderer type
+   * @returns True if registered
+   */
+  has(type) {
+    return this.renderers.has(type);
+  }
+  /**
+   * Get all registered renderer types.
+   *
+   * @returns Array of renderer types
+   */
+  getTypes() {
+    return Array.from(this.renderers.keys());
+  }
+  /**
+   * Auto-detect the renderer for a template.
+   *
+   * Checks renderers in priority order (highest first).
+   * Returns HTML renderer as fallback.
+   *
+   * @param template - Template to detect
+   * @returns Detection result with renderer and confidence
+   */
+  detect(template) {
+    for (const renderer of this.sortedRenderers) {
+      if (renderer.canHandle(template)) {
+        const result = {
+          renderer,
+          confidence: renderer.priority / 100,
+          // Normalize to 0-1
+          reason: `Matched by ${renderer.type} renderer`
+        };
+        if (this.debug) {
+          console.log(`[RendererRegistry] Detected template as ${renderer.type} (confidence: ${result.confidence})`);
+        }
+        return result;
+      }
+    }
+    const fallback = this.renderers.get(this.defaultRenderer);
+    if (!fallback) {
+      throw new Error(`Default renderer '${this.defaultRenderer}' not found`);
+    }
+    return {
+      renderer: fallback,
+      confidence: 0.5,
+      reason: "Fallback to default HTML renderer"
+    };
+  }
+  /**
+   * Render a template with auto-detection.
+   *
+   * @param template - Template to render (React, MDX, or HTML)
+   * @param context - Template context with input/output
+   * @param options - Render options
+   * @returns Rendered result with HTML and metadata
+   */
+  async render(template, context, options = {}) {
+    const platform = options.platform ?? OPENAI_PLATFORM;
+    const detection = this.detect(template);
+    const renderer = detection.renderer;
+    if (this.debug) {
+      console.log(`[RendererRegistry] Rendering with ${renderer.type} renderer`);
+    }
+    const transpileResult = await renderer.transpile(template);
+    const html = await renderer.render(template, context, options);
+    const runtimeScripts = renderer.getRuntimeScripts(platform);
+    return {
+      html,
+      rendererType: renderer.type,
+      transpileCached: transpileResult.cached,
+      runtimeScripts
+    };
+  }
+  /**
+   * Render with a specific renderer type.
+   *
+   * @param type - Renderer type to use
+   * @param template - Template to render
+   * @param context - Template context
+   * @param options - Render options
+   * @returns Rendered result
+   */
+  async renderWith(type, template, context, options = {}) {
+    const renderer = this.renderers.get(type);
+    if (!renderer) {
+      throw new Error(`Renderer '${type}' not registered`);
+    }
+    const platform = options.platform ?? OPENAI_PLATFORM;
+    const transpileResult = await renderer.transpile(template);
+    const html = await renderer.render(template, context, options);
+    const runtimeScripts = renderer.getRuntimeScripts(platform);
+    return {
+      html,
+      rendererType: type,
+      transpileCached: transpileResult.cached,
+      runtimeScripts
+    };
+  }
+  /**
+   * Update the sorted renderer list by priority.
+   */
+  updateSortedList() {
+    this.sortedRenderers = Array.from(this.renderers.values()).sort((a, b) => b.priority - a.priority);
+  }
+  /**
+   * Set the default renderer type.
+   *
+   * @param type - Renderer type to use as default
+   */
+  setDefault(type) {
+    if (!this.renderers.has(type)) {
+      throw new Error(`Cannot set default to unregistered renderer '${type}'`);
+    }
+    this.defaultRenderer = type;
+  }
+  /**
+   * Get registry statistics.
+   */
+  getStats() {
+    return {
+      registeredRenderers: this.getTypes(),
+      defaultRenderer: this.defaultRenderer,
+      priorityOrder: this.sortedRenderers.map((r) => ({
+        type: r.type,
+        priority: r.priority
+      }))
+    };
+  }
+};
+var rendererRegistry = new RendererRegistry();
+
+// libs/uipack/src/tool-template/builder.ts
+function buildTemplateContext(input, output, structuredContent) {
+  return {
+    input,
+    output,
+    structuredContent,
+    helpers: createTemplateHelpers()
+  };
+}
+function executeTemplate(template, ctx) {
+  if (typeof template === "string") {
+    return template;
+  }
+  return template(ctx);
+}
+async function renderTemplate2(template, ctx, options) {
+  const detection = detectTemplateType(template);
+  if (detection.type === "html-function" || detection.type === "html-string") {
+    const html = typeof template === "function" ? template(ctx) : template;
+    return { html, rendererType: "html" };
+  }
+  try {
+    const result = await rendererRegistry.render(template, ctx, {
+      hydrate: options?.hydrate,
+      mdxComponents: options?.mdxComponents
+    });
+    return { html: result.html, rendererType: result.rendererType };
+  } catch (error) {
+    console.warn(
+      `[@frontmcp/ui] Renderer failed for ${detection.type}, falling back to HTML:`,
+      error instanceof Error ? error.message : error
+    );
+    if (typeof template === "function") {
+      try {
+        const html = template(ctx);
+        return { html, rendererType: "html-fallback" };
+      } catch {
+        return {
+          html: `<div class="error">Template rendering failed: ${error instanceof Error ? error.message : "Unknown error"}</div>`,
+          rendererType: "error"
+        };
+      }
+    }
+    return { html: String(template), rendererType: "html-fallback" };
+  }
+}
+function renderToolTemplate(options) {
+  const { ui, toolName, input, output, structuredContent, theme, platform } = options;
+  const ctx = buildTemplateContext(input, output, structuredContent);
+  const content = executeTemplate(ui.template, ctx);
+  const wrapperOptions = {
+    content,
+    toolName,
+    input,
+    output,
+    structuredContent,
+    csp: ui.csp,
+    widgetAccessible: ui.widgetAccessible,
+    title: `${toolName} Result`,
+    theme,
+    platform
+  };
+  const html = wrapToolUI(wrapperOptions);
+  const openaiMeta = buildOpenAIMetaFromUI(ui);
+  return {
+    html,
+    mimeType: "text/html",
+    openaiMeta: Object.keys(openaiMeta).length > 0 ? openaiMeta : void 0
+  };
+}
+async function renderToolTemplateAsync(options) {
+  const { ui, toolName, input, output, structuredContent, theme, platform } = options;
+  const ctx = buildTemplateContext(input, output, structuredContent);
+  const { html: content, rendererType } = await renderTemplate2(ui.template, ctx, {
+    hydrate: ui.hydrate,
+    mdxComponents: ui.mdxComponents
+  });
+  const wrappedContent = ui.wrapper ? ui.wrapper(content, ctx) : content;
+  const wrapperOptions = {
+    content: wrappedContent,
+    toolName,
+    input,
+    output,
+    structuredContent,
+    csp: ui.csp,
+    widgetAccessible: ui.widgetAccessible,
+    title: `${toolName} Result`,
+    theme,
+    platform,
+    // Pass renderer type for framework runtime injection
+    rendererType,
+    hydrate: ui.hydrate
+  };
+  const html = wrapToolUI(wrapperOptions);
+  const openaiMeta = buildOpenAIMetaFromUI(ui);
+  return {
+    html,
+    mimeType: "text/html",
+    rendererType,
+    openaiMeta: Object.keys(openaiMeta).length > 0 ? openaiMeta : void 0
+  };
+}
+function buildOpenAIMetaFromUI(ui) {
+  const meta = {};
+  if (ui.widgetAccessible) {
+    meta["openai/widgetAccessible"] = true;
+  }
+  if (ui.widgetDescription) {
+    meta["openai/widgetDescription"] = ui.widgetDescription;
+  }
+  if (ui.csp) {
+    const cspConfig = {};
+    if (ui.csp.connectDomains?.length) {
+      cspConfig["connect_domains"] = ui.csp.connectDomains;
+    }
+    if (ui.csp.resourceDomains?.length) {
+      cspConfig["resource_domains"] = ui.csp.resourceDomains;
+    }
+    if (Object.keys(cspConfig).length > 0) {
+      meta["openai/widgetCSP"] = cspConfig;
+    }
+  }
+  if (ui.displayMode && ui.displayMode !== "inline") {
+    meta["openai/displayMode"] = ui.displayMode;
+  }
+  return meta;
+}
+function createTemplate(builder) {
+  return builder;
+}
+function createToolUI(config) {
+  return config;
+}
+function container(content, className = "") {
+  const baseClasses = "p-4 rounded-lg bg-surface";
+  return `<div class="${baseClasses} ${className}">${content}</div>`;
+}
+function heading(text, level = 2) {
+  const tag = `h${level}`;
+  const classes = {
+    1: "text-2xl font-bold text-text-primary mb-4",
+    2: "text-xl font-semibold text-text-primary mb-3",
+    3: "text-lg font-medium text-text-primary mb-2",
+    4: "text-base font-medium text-text-secondary mb-2"
+  }[level] || "";
+  return `<${tag} class="${classes}">${escapeHtml(text)}</${tag}>`;
+}
+function paragraph(text, className = "") {
+  return `<p class="text-text-secondary ${className}">${escapeHtml(text)}</p>`;
+}
+function keyValue(key, value, className = "") {
+  const displayValue = typeof value === "boolean" ? value ? "Yes" : "No" : String(value);
+  return `<div class="flex justify-between items-center py-2 border-b border-border ${className}">
+    <span class="text-text-secondary">${escapeHtml(key)}</span>
+    <span class="text-text-primary font-medium">${escapeHtml(displayValue)}</span>
+  </div>`;
+}
+function dataList(items) {
+  const listItems = items.map((item) => keyValue(item.key, item.value)).join("");
+  return `<div class="space-y-1">${listItems}</div>`;
+}
+function errorDisplay(message, details) {
+  return `<div class="p-4 bg-danger/10 border border-danger rounded-lg">
+    <div class="flex items-center gap-2 text-danger">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+      </svg>
+      <span class="font-medium">${escapeHtml(message)}</span>
+    </div>
+    ${details ? `<p class="mt-2 text-sm text-text-secondary">${escapeHtml(details)}</p>` : ""}
+  </div>`;
+}
+function successDisplay(message, details) {
+  return `<div class="p-4 bg-success/10 border border-success rounded-lg">
+    <div class="flex items-center gap-2 text-success">
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+      </svg>
+      <span class="font-medium">${escapeHtml(message)}</span>
+    </div>
+    ${details ? `<p class="mt-2 text-sm text-text-secondary">${escapeHtml(details)}</p>` : ""}
+  </div>`;
+}
+function loadingDisplay(message = "Loading...") {
+  return `<div class="flex items-center justify-center p-8">
+    <div class="flex items-center gap-3 text-text-secondary">
+      <svg class="animate-spin w-5 h-5" 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>
+      <span>${escapeHtml(message)}</span>
+    </div>
+  </div>`;
+}
+export {
+  buildTemplateContext,
+  container,
+  createTemplate,
+  createToolUI,
+  dataList,
+  errorDisplay,
+  executeTemplate,
+  heading,
+  keyValue,
+  loadingDisplay,
+  paragraph,
+  renderTemplate2 as renderTemplate,
+  renderToolTemplate,
+  renderToolTemplateAsync,
+  successDisplay
+};