@frontmcp/ui 0.5.0 → 0.6.0

package/esm/renderers/index.js

@@ -0,0 +1,1827 @@
+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/ui/src/utils/safe-stringify.ts
+var init_safe_stringify = __esm({
+  "libs/ui/src/utils/safe-stringify.ts"() {
+    "use strict";
+  }
+});
+
+// libs/ui/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/ui/src/utils/escape-html.ts"() {
+    "use strict";
+  }
+});
+
+// libs/ui/src/utils/index.ts
+var init_utils = __esm({
+  "libs/ui/src/utils/index.ts"() {
+    "use strict";
+    init_safe_stringify();
+    init_escape_html();
+  }
+});
+
+// libs/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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);
+}
+function hashCombined(...values) {
+  const combined = values.map((v) => {
+    if (typeof v === "string") return v;
+    if (v === null) return "null";
+    if (v === void 0) return "undefined";
+    try {
+      return JSON.stringify(v);
+    } catch {
+      return String(v);
+    }
+  }).join("|");
+  return hashString(combined);
+}
+function isHash(value) {
+  return /^[0-9a-z]{5,10}$/i.test(value);
+}
+
+// libs/ui/src/renderers/cache.ts
+var TranspileCache = class {
+  cache = /* @__PURE__ */ new Map();
+  maxSize;
+  ttl;
+  /** Cache statistics */
+  stats = {
+    hits: 0,
+    misses: 0,
+    evictions: 0
+  };
+  constructor(options = {}) {
+    this.maxSize = options.maxSize ?? 500;
+    this.ttl = options.ttl ?? 0;
+  }
+  /**
+   * Get a cached transpile result by source content.
+   *
+   * @param source - Source code to look up
+   * @returns Cached result or undefined if not found/expired
+   */
+  get(source) {
+    const key = hashString(source);
+    return this.getByKey(key);
+  }
+  /**
+   * Get a cached transpile result by hash key.
+   *
+   * @param key - Hash key
+   * @returns Cached result or undefined if not found/expired
+   */
+  getByKey(key) {
+    const entry = this.cache.get(key);
+    if (!entry) {
+      this.stats.misses++;
+      return void 0;
+    }
+    if (this.ttl > 0 && Date.now() - entry.timestamp > this.ttl) {
+      this.cache.delete(key);
+      this.stats.misses++;
+      return void 0;
+    }
+    this.cache.delete(key);
+    entry.accessCount++;
+    this.cache.set(key, entry);
+    this.stats.hits++;
+    return entry.value;
+  }
+  /**
+   * Store a transpile result.
+   *
+   * @param source - Source code (used to generate key)
+   * @param value - Transpile result to cache
+   * @returns The hash key used for storage
+   */
+  set(source, value) {
+    const key = hashString(source);
+    this.setByKey(key, value);
+    return key;
+  }
+  /**
+   * Store a transpile result by hash key.
+   *
+   * @param key - Hash key
+   * @param value - Transpile result to cache
+   */
+  setByKey(key, value) {
+    if (this.cache.size >= this.maxSize && !this.cache.has(key)) {
+      const oldestKey = this.cache.keys().next().value;
+      if (oldestKey) {
+        this.cache.delete(oldestKey);
+        this.stats.evictions++;
+      }
+    }
+    this.cache.set(key, {
+      value,
+      timestamp: Date.now(),
+      accessCount: 1
+    });
+  }
+  /**
+   * Check if a source is cached.
+   *
+   * @param source - Source code to check
+   * @returns True if cached and not expired
+   */
+  has(source) {
+    const key = hashString(source);
+    return this.hasByKey(key);
+  }
+  /**
+   * Check if a key is cached.
+   *
+   * @param key - Hash key to check
+   * @returns True if cached and not expired
+   */
+  hasByKey(key) {
+    const entry = this.cache.get(key);
+    if (!entry) return false;
+    if (this.ttl > 0 && Date.now() - entry.timestamp > this.ttl) {
+      this.cache.delete(key);
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Delete a cached entry by source.
+   *
+   * @param source - Source code to delete
+   * @returns True if entry was deleted
+   */
+  delete(source) {
+    const key = hashString(source);
+    return this.cache.delete(key);
+  }
+  /**
+   * Clear all cached entries.
+   */
+  clear() {
+    this.cache.clear();
+    this.stats = { hits: 0, misses: 0, evictions: 0 };
+  }
+  /**
+   * Get current cache size.
+   */
+  get size() {
+    return this.cache.size;
+  }
+  /**
+   * Get cache statistics.
+   */
+  getStats() {
+    const total = this.stats.hits + this.stats.misses;
+    return {
+      ...this.stats,
+      size: this.cache.size,
+      hitRate: total > 0 ? this.stats.hits / total : 0
+    };
+  }
+};
+var transpileCache = new TranspileCache({ maxSize: 500 });
+var renderCache = new TranspileCache({
+  maxSize: 1e3,
+  ttl: 5 * 60 * 1e3
+  // 5 minutes
+});
+var ComponentCache = class {
+  cache = /* @__PURE__ */ new Map();
+  maxSize;
+  constructor(maxSize = 200) {
+    this.maxSize = maxSize;
+  }
+  get(key) {
+    const entry = this.cache.get(key);
+    if (!entry) return void 0;
+    this.cache.delete(key);
+    this.cache.set(key, entry);
+    return entry.value;
+  }
+  set(key, value) {
+    if (this.cache.size >= this.maxSize && !this.cache.has(key)) {
+      const oldestKey = this.cache.keys().next().value;
+      if (oldestKey) {
+        this.cache.delete(oldestKey);
+      }
+    }
+    this.cache.set(key, { value, timestamp: Date.now() });
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  get size() {
+    return this.cache.size;
+  }
+};
+var componentCache = new ComponentCache();
+
+// libs/ui/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
+  }
+};
+
+// libs/ui/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 isPlainHtml(source) {
+  return !containsJsx(source) && !containsMdxSyntax(source);
+}
+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/ui/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/ui/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/ui/src/renderers/utils/transpiler.ts
+var DEFAULT_SWC_OPTIONS = {
+  typescript: true,
+  jsx: true,
+  jsxRuntime: "automatic",
+  development: false
+};
+var swcTransform = null;
+async function loadSwcTransform() {
+  if (swcTransform !== null) {
+    return swcTransform;
+  }
+  try {
+    const swc = await import("@swc/core");
+    swcTransform = swc.transform;
+    return swcTransform;
+  } catch {
+    console.warn(
+      "[@frontmcp/ui] @swc/core not available. Runtime JSX transpilation disabled. Install @swc/core to enable: npm install @swc/core"
+    );
+    return null;
+  }
+}
+async function transpileJsx(source, options = {}) {
+  const hash = hashString(source);
+  const cached = transpileCache.getByKey(hash);
+  if (cached) {
+    return { ...cached, cached: true };
+  }
+  const transform = await loadSwcTransform();
+  if (!transform) {
+    throw new Error(
+      "Runtime JSX transpilation requires @swc/core. Either install @swc/core or use pre-compiled React components."
+    );
+  }
+  const opts = { ...DEFAULT_SWC_OPTIONS, ...options };
+  const swcOptions = {
+    jsc: {
+      parser: {
+        syntax: opts.typescript ? "typescript" : "ecmascript",
+        tsx: opts.jsx,
+        jsx: opts.jsx
+      },
+      transform: {
+        react: {
+          runtime: opts.jsxRuntime,
+          development: opts.development
+        }
+      },
+      target: "es2020"
+    },
+    module: {
+      type: "commonjs"
+    }
+  };
+  const result = await transform(source, swcOptions);
+  const transpileResult = {
+    code: result.code,
+    hash,
+    cached: false
+  };
+  transpileCache.setByKey(hash, transpileResult);
+  return transpileResult;
+}
+async function isSwcAvailable() {
+  const transform = await loadSwcTransform();
+  return transform !== null;
+}
+async function executeTranspiledCode(code, context = {}) {
+  let React;
+  let jsxRuntime;
+  try {
+    React = await import("react");
+    jsxRuntime = await import("react/jsx-runtime");
+  } catch {
+    throw new Error("React is required for JSX templates. Install react: npm install react react-dom");
+  }
+  const exports = {};
+  const module = { exports };
+  const require2 = (id) => {
+    switch (id) {
+      case "react":
+        return React;
+      case "react/jsx-runtime":
+        return jsxRuntime;
+      case "react/jsx-dev-runtime":
+        return jsxRuntime;
+      default:
+        if (context[id]) {
+          return context[id];
+        }
+        throw new Error(`Module '${id}' not available in JSX template context`);
+    }
+  };
+  try {
+    const fn = new Function("exports", "require", "module", "__filename", "__dirname", "React", "context", code);
+    fn(exports, require2, module, "template.js", "/", React, context);
+    return module.exports["default"] || module.exports[Object.keys(module.exports)[0]] || module.exports;
+  } catch (error) {
+    throw new Error(`Failed to execute transpiled JSX: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+async function transpileAndExecute(source, context = {}) {
+  const result = await transpileJsx(source);
+  return executeTranspiledCode(result.code, context);
+}
+
+// libs/ui/src/renderers/react.renderer.ts
+var REACT_CDN = {
+  react: "https://esm.sh/react@19",
+  reactDom: "https://esm.sh/react-dom@19/client"
+};
+var INLINE_REACT_PLACEHOLDER = `
+// React runtime not available inline yet.
+// For blocked-network platforms, use pre-rendered HTML templates.
+console.warn('[FrontMCP] React hydration not available on this platform.');
+`;
+var ReactRenderer = class {
+  type = "react";
+  priority = 20;
+  // Higher priority than HTML
+  /**
+   * Lazy-loaded React modules.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  React = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ReactDOMServer = null;
+  /**
+   * Check if this renderer can handle the given template.
+   *
+   * Accepts:
+   * - React component functions (imported, already transpiled)
+   * - Strings containing JSX syntax
+   */
+  canHandle(template) {
+    if (typeof template === "function" && isReactComponent(template)) {
+      return true;
+    }
+    if (typeof template === "string" && containsJsx(template)) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Transpile the template if needed.
+   *
+   * For imported React components, no transpilation is needed.
+   * For JSX strings, SWC transpilation is performed.
+   */
+  async transpile(template, options) {
+    if (typeof template === "function") {
+      const hash = hashString(template.toString());
+      return {
+        code: "",
+        // No transpiled code for already-compiled components
+        hash,
+        cached: true
+      };
+    }
+    if (typeof template === "string") {
+      return transpileJsx(template, {
+        development: options?.sourceMaps ?? false
+      });
+    }
+    throw new Error("Invalid template type for ReactRenderer");
+  }
+  /**
+   * Render the template to HTML string using react-dom/server.
+   */
+  async render(template, context, options) {
+    await this.loadReact();
+    let Component;
+    if (typeof template === "function") {
+      Component = template;
+    } else if (typeof template === "string") {
+      const transpiled = await this.transpile(template);
+      const cached = transpileCache.getByKey(`exec:${transpiled.hash}`);
+      if (cached) {
+        Component = cached.code;
+      } else {
+        Component = await executeTranspiledCode(transpiled.code, {
+          // Provide any additional MDX components if specified
+          ...options?.mdxComponents
+        });
+        transpileCache.setByKey(`exec:${transpiled.hash}`, {
+          code: Component,
+          hash: transpiled.hash,
+          cached: false
+        });
+      }
+    } else {
+      throw new Error("Invalid template type for ReactRenderer");
+    }
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const element = this.React.createElement(Component, props);
+    const html = this.ReactDOMServer.renderToString(element);
+    if (options?.hydrate) {
+      const componentName = Component.name || "Component";
+      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      return `<div data-hydrate="${componentName}" data-props='${escapedProps}'>${html}</div>`;
+    }
+    return html;
+  }
+  /**
+   * Get runtime scripts for client-side functionality.
+   */
+  getRuntimeScripts(platform) {
+    if (platform.networkMode === "blocked") {
+      return {
+        headScripts: "",
+        inlineScripts: INLINE_REACT_PLACEHOLDER,
+        isInline: true
+      };
+    }
+    return {
+      headScripts: `
+        <script crossorigin src="${REACT_CDN.react}"></script>
+        <script crossorigin src="${REACT_CDN.reactDom}"></script>
+      `,
+      isInline: false
+    };
+  }
+  /**
+   * Load React and ReactDOMServer modules.
+   */
+  async loadReact() {
+    if (this.React && this.ReactDOMServer) {
+      return;
+    }
+    try {
+      this.React = await import("react");
+      this.ReactDOMServer = await import("react-dom/server");
+    } catch {
+      throw new Error("React is required for ReactRenderer. Install react and react-dom: npm install react react-dom");
+    }
+  }
+};
+var reactRenderer = new ReactRenderer();
+function buildHydrationScript() {
+  return `
+<script>
+(function() {
+  // Wait for React to be available
+  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
+    console.warn('[FrontMCP] React not available for hydration');
+    return;
+  }
+
+  // Find all elements marked for hydration
+  document.querySelectorAll('[data-hydrate]').forEach(function(root) {
+    var componentName = root.getAttribute('data-hydrate');
+    var propsJson = root.getAttribute('data-props');
+    var props = propsJson ? JSON.parse(propsJson) : {};
+
+    // Look for the component in the global scope
+    if (window.__frontmcp_components && window.__frontmcp_components[componentName]) {
+      try {
+        ReactDOM.hydrateRoot(root, React.createElement(
+          window.__frontmcp_components[componentName],
+          props
+        ));
+      } catch (e) {
+        console.error('[FrontMCP] Hydration failed for', componentName, e);
+      }
+    }
+  });
+})();
+</script>
+`;
+}
+
+// libs/ui/src/renderers/mdx.renderer.ts
+var REACT_CDN2 = {
+  react: "https://unpkg.com/react@18/umd/react.production.min.js",
+  reactDom: "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+};
+var INLINE_MDX_PLACEHOLDER = `
+// MDX runtime not available inline yet.
+// For blocked-network platforms, use pre-rendered HTML templates.
+console.warn('[FrontMCP] MDX hydration not available on this platform.');
+`;
+var MdxRenderer = class {
+  type = "mdx";
+  priority = 10;
+  // Between HTML (0) and React (20)
+  /**
+   * Lazy-loaded modules.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  React = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ReactDOMServer = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  jsxRuntime = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mdxEvaluate = null;
+  /**
+   * Check if this renderer can handle the given template.
+   *
+   * Accepts strings containing MDX syntax (Markdown + JSX).
+   */
+  canHandle(template) {
+    if (typeof template !== "string") {
+      return false;
+    }
+    return containsMdxSyntax(template);
+  }
+  /**
+   * Transpile MDX to executable JavaScript.
+   *
+   * Uses @mdx-js/mdx to compile MDX source to a module.
+   * Note: For MDX, we use evaluate() which combines compile + run,
+   * so this method just returns the source hash for caching purposes.
+   */
+  async transpile(template, _options) {
+    const hash = hashString(template);
+    const cached = transpileCache.getByKey(hash);
+    if (cached) {
+      return { ...cached, cached: true };
+    }
+    const transpileResult = {
+      code: template,
+      // Store original MDX for evaluate()
+      hash,
+      cached: false
+    };
+    transpileCache.setByKey(hash, transpileResult);
+    return transpileResult;
+  }
+  /**
+   * Render MDX template to HTML string.
+   *
+   * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
+   * then renders the resulting React component to HTML via SSR.
+   */
+  async render(template, context, options) {
+    await this.loadReact();
+    await this.loadMdx();
+    if (!this.mdxEvaluate) {
+      throw new Error("MDX compilation requires @mdx-js/mdx. Install it: npm install @mdx-js/mdx");
+    }
+    const templateHash = hashString(template);
+    const cacheKey = `mdx-component:${templateHash}`;
+    let Content = componentCache.get(cacheKey);
+    if (!Content) {
+      const result = await this.mdxEvaluate(template, {
+        ...this.jsxRuntime,
+        Fragment: this.React.Fragment,
+        development: false
+      });
+      Content = result.default;
+      componentCache.set(cacheKey, Content);
+    }
+    const mdxComponents = {
+      // User-provided components from tool config
+      ...options?.mdxComponents,
+      // Wrapper that provides context to the content
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      wrapper: ({ children }) => {
+        return this.React.createElement("div", { className: "mdx-content" }, children);
+      }
+    };
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const spreadProps = {
+      ...props,
+      ...typeof context.output === "object" && context.output !== null ? context.output : {}
+    };
+    const element = this.React.createElement(Content, {
+      components: mdxComponents,
+      ...spreadProps
+    });
+    const html = this.ReactDOMServer.renderToString(element);
+    if (options?.hydrate) {
+      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      return `<div data-mdx-hydrate="true" data-props='${escapedProps}'>${html}</div>`;
+    }
+    return html;
+  }
+  /**
+   * Get runtime scripts for client-side functionality.
+   */
+  getRuntimeScripts(platform) {
+    if (platform.networkMode === "blocked") {
+      return {
+        headScripts: "",
+        inlineScripts: INLINE_MDX_PLACEHOLDER,
+        isInline: true
+      };
+    }
+    return {
+      headScripts: `
+        <script crossorigin src="${REACT_CDN2.react}"></script>
+        <script crossorigin src="${REACT_CDN2.reactDom}"></script>
+      `,
+      isInline: false
+    };
+  }
+  /**
+   * Load React and ReactDOMServer modules.
+   */
+  async loadReact() {
+    if (this.React && this.ReactDOMServer && this.jsxRuntime) {
+      return;
+    }
+    try {
+      const [react, reactDomServer, jsxRuntime] = await Promise.all([
+        import("react"),
+        import("react-dom/server"),
+        import("react/jsx-runtime")
+      ]);
+      this.React = react;
+      this.ReactDOMServer = reactDomServer;
+      this.jsxRuntime = jsxRuntime;
+    } catch {
+      throw new Error("React is required for MdxRenderer. Install react and react-dom: npm install react react-dom");
+    }
+  }
+  /**
+   * Load @mdx-js/mdx evaluate function.
+   *
+   * evaluate() is the cleanest way to run MDX - it combines
+   * compile and run in a single step, handling all the runtime
+   * injection automatically.
+   */
+  async loadMdx() {
+    if (this.mdxEvaluate) {
+      return;
+    }
+    try {
+      const mdx = await import("@mdx-js/mdx");
+      this.mdxEvaluate = mdx.evaluate;
+    } catch {
+      console.warn(
+        "[@frontmcp/ui] @mdx-js/mdx not available. MDX rendering disabled. Install @mdx-js/mdx to enable: npm install @mdx-js/mdx"
+      );
+    }
+  }
+};
+var mdxRenderer = new MdxRenderer();
+function buildMdxHydrationScript() {
+  return `
+<script>
+(function() {
+  // MDX hydration requires React and component definitions
+  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
+    console.warn('[FrontMCP] React not available for MDX hydration');
+    return;
+  }
+
+  // Find all elements marked for MDX hydration
+  document.querySelectorAll('[data-mdx-hydrate]').forEach(function(root) {
+    var propsJson = root.getAttribute('data-props');
+    var props = propsJson ? JSON.parse(propsJson) : {};
+
+    // MDX content is pre-rendered, hydration mainly attaches event handlers
+    // For full interactivity, components need to be available client-side
+    if (window.__frontmcp_mdx_content) {
+      try {
+        ReactDOM.hydrateRoot(root, React.createElement(
+          window.__frontmcp_mdx_content,
+          props
+        ));
+      } catch (e) {
+        console.error('[FrontMCP] MDX hydration failed', e);
+      }
+    }
+  });
+})();
+</script>
+`;
+}
+export {
+  HtmlRenderer,
+  MdxRenderer,
+  ReactRenderer,
+  RendererRegistry,
+  TranspileCache,
+  buildHydrationScript,
+  buildMdxHydrationScript,
+  containsJsx,
+  containsMdxSyntax,
+  detectTemplateType,
+  executeTranspiledCode,
+  hashCombined,
+  hashString,
+  htmlRenderer,
+  isHash,
+  isPlainHtml,
+  isReactComponent,
+  isSwcAvailable,
+  isTemplateBuilderFunction,
+  mdxRenderer,
+  reactRenderer,
+  renderCache,
+  rendererRegistry,
+  transpileAndExecute,
+  transpileCache,
+  transpileJsx
+};