@frontmcp/ui 0.6.0 → 0.6.1

package/esm/renderers/index.js

@@ -1,1428 +1,12 @@
-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
+import {
+  isReactComponent,
+  containsJsx,
+  hashString,
+  transpileJsx,
+  executeTranspiledCode,
+  transpileCache
+} from "@frontmcp/uipack/renderers";
 var REACT_CDN = {
   react: "https://esm.sh/react@19",
   reactDom: "https://esm.sh/react-dom@19/client"
@@ -1592,236 +176,206 @@ function buildHydrationScript() {
 `;
 }
 
-// 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)
+// libs/ui/src/renderers/react.adapter.ts
+var mountedRoots = /* @__PURE__ */ new WeakMap();
+var ReactRendererAdapter = class {
+  type = "react";
+  // Lazy-loaded React runtime
+  react = null;
+  reactDOM = null;
+  loadPromise = null;
   /**
-   * Lazy-loaded modules.
+   * Check if this adapter can handle the given content.
    */
-  // 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;
+  canHandle(content) {
+    if (typeof content === "function") {
+      return true;
+    }
+    if (typeof content === "string") {
+      return content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(") || /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*return\s*[\s\S]*</.test(content);
+    }
+    return false;
+  }
   /**
-   * Check if this renderer can handle the given template.
-   *
-   * Accepts strings containing MDX syntax (Markdown + JSX).
+   * Render React component to a string.
+   * This is a client-side fallback - SSR should be done at build time.
    */
-  canHandle(template) {
-    if (typeof template !== "string") {
-      return false;
-    }
-    return containsMdxSyntax(template);
+  async render(content, context, _options) {
+    return `<div data-frontmcp-react data-tool="${context.toolName}">${content}</div>`;
   }
   /**
-   * 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.
+   * Render React component directly to the DOM.
    */
-  async transpile(template, _options) {
-    const hash = hashString(template);
-    const cached = transpileCache.getByKey(hash);
-    if (cached) {
-      return { ...cached, cached: true };
+  async renderToDOM(content, target, context, options) {
+    try {
+      await this.ensureReactLoaded();
+      if (!this.react || !this.reactDOM) {
+        throw new Error("React runtime not available");
+      }
+      const componentName = target.getAttribute("data-component");
+      const component = this.getComponent(componentName, content);
+      if (!component) {
+        target.innerHTML = content;
+        return { success: true };
+      }
+      const element = this.react.createElement(component, {
+        input: context.input,
+        output: context.output,
+        structuredContent: context.structuredContent,
+        toolName: context.toolName
+      });
+      if (options?.hydrate && this.reactDOM.hydrateRoot) {
+        const root = this.reactDOM.hydrateRoot(target, element);
+        mountedRoots.set(target, root);
+      } else if (this.reactDOM.createRoot) {
+        const root = this.reactDOM.createRoot(target);
+        root.render(element);
+        mountedRoots.set(target, root);
+      } else if (this.reactDOM.render) {
+        this.reactDOM.render(element, target);
+        mountedRoots.set(target, {
+          unmount: () => this.reactDOM?.unmountComponentAtNode?.(target)
+        });
+      } else {
+        throw new Error("No suitable React render method available");
+      }
+      target.dispatchEvent(
+        new CustomEvent("frontmcp:rendered", {
+          bubbles: true,
+          detail: { type: "react", toolName: context.toolName }
+        })
+      );
+      return { success: true };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error("[FrontMCP] React render failed:", message);
+      return { success: false, error: message };
     }
-    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.
+   * Hydrate existing SSR content with React.
    */
-  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
+  async hydrate(target, context, options) {
+    return this.renderToDOM("", target, context, { ...options, hydrate: true });
+  }
+  /**
+   * Update rendered React component with new data.
+   */
+  async update(target, context) {
+    try {
+      await this.ensureReactLoaded();
+      if (!this.react) {
+        throw new Error("React runtime not available");
+      }
+      const existingRoot = mountedRoots.get(target);
+      const componentName = target.getAttribute("data-component");
+      const component = this.getComponent(componentName, "");
+      if (!component) {
+        return { success: false, error: "No component found for update" };
+      }
+      const element = this.react.createElement(component, {
+        input: context.input,
+        output: context.output,
+        structuredContent: context.structuredContent,
+        toolName: context.toolName
       });
-      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);
+      if (existingRoot && "render" in existingRoot) {
+        existingRoot.render(element);
+        return { success: true };
       }
-    };
-    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 this.renderToDOM("", target, context);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error("[FrontMCP] React update failed:", message);
+      return { success: false, error: message };
     }
-    return html;
   }
   /**
-   * Get runtime scripts for client-side functionality.
+   * Clean up React root.
    */
-  getRuntimeScripts(platform) {
-    if (platform.networkMode === "blocked") {
-      return {
-        headScripts: "",
-        inlineScripts: INLINE_MDX_PLACEHOLDER,
-        isInline: true
-      };
+  destroy(target) {
+    const root = mountedRoots.get(target);
+    if (root) {
+      root.unmount();
+      mountedRoots.delete(target);
     }
-    return {
-      headScripts: `
-        <script crossorigin src="${REACT_CDN2.react}"></script>
-        <script crossorigin src="${REACT_CDN2.reactDom}"></script>
-      `,
-      isInline: false
-    };
   }
   /**
-   * Load React and ReactDOMServer modules.
+   * Ensure React is loaded.
    */
-  async loadReact() {
-    if (this.React && this.ReactDOMServer && this.jsxRuntime) {
+  async ensureReactLoaded() {
+    if (this.react && this.reactDOM) {
       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");
+    if (this.loadPromise) {
+      return this.loadPromise;
     }
+    this.loadPromise = this.loadReact();
+    return this.loadPromise;
   }
   /**
-   * 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.
+   * Load React runtime.
    */
-  async loadMdx() {
-    if (this.mdxEvaluate) {
+  async loadReact() {
+    const win = typeof window !== "undefined" ? window : globalThis;
+    if (win.React) {
+      this.react = win.React;
+    }
+    if (win.ReactDOM) {
+      this.reactDOM = win.ReactDOM;
+    }
+    if (this.react && this.reactDOM) {
       return;
     }
     try {
-      const mdx = await import("@mdx-js/mdx");
-      this.mdxEvaluate = mdx.evaluate;
+      if (!this.react) {
+        const reactModule = await import(
+          /* webpackIgnore: true */
+          "react"
+        );
+        this.react = reactModule.default || reactModule;
+      }
+      if (!this.reactDOM) {
+        const reactDOMModule = await import(
+          /* webpackIgnore: true */
+          "react-dom/client"
+        );
+        this.reactDOM = reactDOMModule.default || reactDOMModule;
+      }
     } catch {
-      console.warn(
-        "[@frontmcp/ui] @mdx-js/mdx not available. MDX rendering disabled. Install @mdx-js/mdx to enable: npm install @mdx-js/mdx"
-      );
+      if (!this.react || !this.reactDOM) {
+        console.warn("[FrontMCP] React runtime not available. Ensure React is loaded via CDN or bundled.");
+      }
     }
   }
-};
-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);
+  /**
+   * Get a React component by name or from content.
+   */
+  getComponent(componentName, content) {
+    const win = typeof window !== "undefined" ? window : globalThis;
+    if (componentName && win.__frontmcp_components) {
+      const registered = win.__frontmcp_components?.[componentName];
+      if (registered) {
+        return registered;
       }
     }
-  });
-})();
-</script>
-`;
+    if (content && typeof content === "function") {
+      return content;
+    }
+    return null;
+  }
+};
+function createReactAdapter() {
+  return new ReactRendererAdapter();
+}
+async function loadReactAdapter() {
+  return createReactAdapter();
 }
 export {
-  HtmlRenderer,
-  MdxRenderer,
   ReactRenderer,
-  RendererRegistry,
-  TranspileCache,
+  ReactRendererAdapter,
   buildHydrationScript,
-  buildMdxHydrationScript,
-  containsJsx,
-  containsMdxSyntax,
-  detectTemplateType,
-  executeTranspiledCode,
-  hashCombined,
-  hashString,
-  htmlRenderer,
-  isHash,
-  isPlainHtml,
-  isReactComponent,
-  isSwcAvailable,
-  isTemplateBuilderFunction,
-  mdxRenderer,
-  reactRenderer,
-  renderCache,
-  rendererRegistry,
-  transpileAndExecute,
-  transpileCache,
-  transpileJsx
+  createReactAdapter,
+  loadReactAdapter,
+  reactRenderer
 };