@frontmcp/ui 0.6.0 → 0.6.2

package/renderers/index.js

@@ -5,1478 +5,56 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// 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/index.ts
-var renderers_exports = {};
-__export(renderers_exports, {
-  HtmlRenderer: () => HtmlRenderer,
-  MdxRenderer: () => MdxRenderer,
-  ReactRenderer: () => ReactRenderer,
-  RendererRegistry: () => RendererRegistry,
-  TranspileCache: () => TranspileCache,
-  buildHydrationScript: () => buildHydrationScript,
-  buildMdxHydrationScript: () => buildMdxHydrationScript,
-  containsJsx: () => containsJsx,
-  containsMdxSyntax: () => containsMdxSyntax,
-  detectTemplateType: () => detectTemplateType,
-  executeTranspiledCode: () => executeTranspiledCode,
-  hashCombined: () => hashCombined,
-  hashString: () => hashString,
-  htmlRenderer: () => htmlRenderer,
-  isHash: () => isHash,
-  isPlainHtml: () => isPlainHtml,
-  isReactComponent: () => isReactComponent,
-  isSwcAvailable: () => isSwcAvailable,
-  isTemplateBuilderFunction: () => isTemplateBuilderFunction,
-  mdxRenderer: () => mdxRenderer,
-  reactRenderer: () => reactRenderer,
-  renderCache: () => renderCache,
-  rendererRegistry: () => rendererRegistry,
-  transpileAndExecute: () => transpileAndExecute,
-  transpileCache: () => transpileCache,
-  transpileJsx: () => transpileJsx
-});
-module.exports = __toCommonJS(renderers_exports);
-
-// 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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
 };
-var rendererRegistry = new RendererRegistry();
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// 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;
+// libs/ui/src/renderers/index.ts
+var renderers_exports = {};
+__export(renderers_exports, {
+  MdxRenderer: () => MdxRenderer,
+  ReactRenderer: () => ReactRenderer,
+  ReactRendererAdapter: () => ReactRendererAdapter,
+  createReactAdapter: () => createReactAdapter,
+  executeTranspiledCode: () => executeTranspiledCode,
+  loadReactAdapter: () => loadReactAdapter,
+  mdxRenderer: () => mdxRenderer,
+  reactRenderer: () => reactRenderer,
+  transpileAndExecute: () => transpileAndExecute
+});
+module.exports = __toCommonJS(renderers_exports);
+
+// libs/ui/src/renderers/react.renderer.ts
+var import_renderers = require("@frontmcp/uipack/renderers");
+var VALID_JS_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function isValidComponentName(name) {
+  return VALID_JS_IDENTIFIER.test(name);
 }
-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 exports2 = {};
-  const module2 = { exports: exports2 };
-  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(exports2, require2, module2, "template.js", "/", React, context);
-    return module2.exports["default"] || module2.exports[Object.keys(module2.exports)[0]] || module2.exports;
-  } catch (error) {
-    throw new Error(`Failed to execute transpiled JSX: ${error instanceof Error ? error.message : String(error)}`);
+function sanitizeComponentName(name) {
+  if (isValidComponentName(name)) {
+    return name;
   }
+  const sanitized = name.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/^[0-9]/, "_$&");
+  return sanitized || "Component";
 }
-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"
@@ -1490,13 +68,6 @@ 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.
    *
@@ -1505,10 +76,10 @@ var ReactRenderer = class {
    * - Strings containing JSX syntax
    */
   canHandle(template) {
-    if (typeof template === "function" && isReactComponent(template)) {
+    if (typeof template === "function" && (0, import_renderers.isReactComponent)(template)) {
       return true;
     }
-    if (typeof template === "string" && containsJsx(template)) {
+    if (typeof template === "string" && (0, import_renderers.containsJsx)(template)) {
       return true;
     }
     return false;
@@ -1521,7 +92,7 @@ var ReactRenderer = class {
    */
   async transpile(template, options) {
     if (typeof template === "function") {
-      const hash = hashString(template.toString());
+      const hash = (0, import_renderers.hashString)(template.toString());
       return {
         code: "",
         // No transpiled code for already-compiled components
@@ -1530,53 +101,116 @@ var ReactRenderer = class {
       };
     }
     if (typeof template === "string") {
-      return transpileJsx(template, {
+      return (0, import_renderers.transpileJsx)(template, {
         development: options?.sourceMaps ?? false
       });
     }
     throw new Error("Invalid template type for ReactRenderer");
   }
   /**
-   * Render the template to HTML string using react-dom/server.
+   * Render the template to HTML for client-side rendering.
+   *
+   * Unlike SSR, this method generates HTML that will be rendered
+   * client-side by React in the browser. No server-side React required.
+   *
+   * The generated HTML includes:
+   * - A container div for the React root
+   * - The component code (transpiled if needed)
+   * - Props embedded as a data attribute
+   * - A render script that initializes the component
    */
-  async render(template, context, options) {
-    await this.loadReact();
-    let Component;
+  async render(template, context, _options) {
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const rootId = `frontmcp-react-${(0, import_renderers.hashString)(Date.now().toString()).slice(0, 8)}`;
+    let componentCode;
+    let componentName;
     if (typeof template === "function") {
-      Component = template;
+      const rawName = template.name || "Component";
+      componentName = sanitizeComponentName(rawName);
+      componentCode = `
+        // Component should be registered via window.__frontmcp_components['${componentName}']
+        (function() {
+          if (!window.__frontmcp_components || !window.__frontmcp_components['${componentName}']) {
+            console.error('[FrontMCP] Component "${componentName}" not registered. Use buildHydrationScript() to register components.');
+          }
+        })();
+      `;
     } 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
-        });
-      }
+      const match = transpiled.code.match(/function\s+(\w+)/);
+      const rawName = match?.[1] || "Widget";
+      componentName = sanitizeComponentName(rawName);
+      componentCode = transpiled.code;
     } else {
       throw new Error("Invalid template type for ReactRenderer");
     }
-    const props = {
-      input: context.input,
-      output: context.output,
-      structuredContent: context.structuredContent,
-      helpers: context.helpers
+    const html = `
+<div id="${rootId}" data-frontmcp-react data-component="${componentName}" data-props='${escapedProps}'>
+  <div class="flex items-center justify-center p-4 text-gray-500">
+    <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    Loading...
+  </div>
+</div>
+<script type="module">
+(function() {
+  ${componentCode}
+
+  // Wait for React to be available
+  function waitForReact(callback, maxAttempts) {
+    var attempts = 0;
+    var check = function() {
+      if (typeof React !== 'undefined' && typeof ReactDOM !== 'undefined') {
+        callback();
+      } else if (attempts < maxAttempts) {
+        attempts++;
+        setTimeout(check, 50);
+      } else {
+        console.error('[FrontMCP] React not loaded after ' + maxAttempts + ' attempts');
+      }
     };
-    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>`;
+    check();
+  }
+
+  waitForReact(function() {
+    try {
+      var root = document.getElementById('${rootId}');
+      if (!root) return;
+
+      var propsJson = root.getAttribute('data-props');
+      var props = propsJson ? JSON.parse(propsJson.replace(/&amp;/g, '&').replace(/&#39;/g, "'").replace(/&lt;/g, '<').replace(/&gt;/g, '>')) : {};
+
+      // Get the component
+      var Component = ${componentName};
+
+      // Check if it's registered globally
+      if (typeof Component === 'undefined' && window.__frontmcp_components) {
+        Component = window.__frontmcp_components['${componentName}'];
+      }
+
+      if (typeof Component === 'function') {
+        var element = React.createElement(Component, props);
+        var reactRoot = ReactDOM.createRoot(root);
+        reactRoot.render(element);
+      } else {
+        console.error('[FrontMCP] Component "${componentName}" not found');
+      }
+    } catch (err) {
+      console.error('[FrontMCP] React render error:', err);
     }
-    return html;
+  }, 100);
+})();
+</script>
+`;
+    return html.trim();
   }
   /**
    * Get runtime scripts for client-side functionality.
@@ -1597,60 +231,214 @@ var ReactRenderer = class {
       isInline: false
     };
   }
+};
+var reactRenderer = new ReactRenderer();
+
+// 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;
   /**
-   * Load React and ReactDOMServer modules.
+   * Check if this adapter can handle the given content.
+   */
+  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;
+  }
+  /**
+   * Render React component to a string.
+   * This is a client-side fallback - SSR should be done at build time.
+   */
+  async render(content, context, _options) {
+    return `<div data-frontmcp-react data-tool="${context.toolName}">${content}</div>`;
+  }
+  /**
+   * Render React component directly to the DOM.
+   */
+  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 };
+    }
+  }
+  /**
+   * Hydrate existing SSR content with React.
+   */
+  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
+      });
+      if (existingRoot && "render" in existingRoot) {
+        existingRoot.render(element);
+        return { success: true };
+      }
+      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 };
+    }
+  }
+  /**
+   * Clean up React root.
+   */
+  destroy(target) {
+    const root = mountedRoots.get(target);
+    if (root) {
+      root.unmount();
+      mountedRoots.delete(target);
+    }
+  }
+  /**
+   * Ensure React is loaded.
+   */
+  async ensureReactLoaded() {
+    if (this.react && this.reactDOM) {
+      return;
+    }
+    if (this.loadPromise) {
+      return this.loadPromise;
+    }
+    this.loadPromise = this.loadReact();
+    return this.loadPromise;
+  }
+  /**
+   * Load React runtime.
    */
   async loadReact() {
-    if (this.React && this.ReactDOMServer) {
+    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 {
-      this.React = await import("react");
-      this.ReactDOMServer = await import("react-dom/server");
+      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 {
-      throw new Error("React is required for ReactRenderer. Install react and react-dom: npm install react react-dom");
+      if (!this.react || !this.reactDOM) {
+        console.warn("[FrontMCP] React runtime not available. Ensure React is loaded via CDN or bundled.");
+      }
     }
   }
-};
-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);
+  /**
+   * 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();
 }
 
 // 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 import_renderers2 = require("@frontmcp/uipack/renderers");
+function buildReactCdnUrls(version = "19") {
+  return {
+    react: `https://esm.sh/react@${version}`,
+    reactDom: `https://esm.sh/react-dom@${version}/client`
+  };
+}
+var REACT_CDN2 = buildReactCdnUrls("19");
 var INLINE_MDX_PLACEHOLDER = `
 // MDX runtime not available inline yet.
 // For blocked-network platforms, use pre-rendered HTML templates.
@@ -1680,28 +468,25 @@ var MdxRenderer = class {
     if (typeof template !== "string") {
       return false;
     }
-    return containsMdxSyntax(template);
+    return (0, import_renderers2.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.
+   * Prepare MDX template for rendering.
+   * Caches the template hash for deduplication. Actual MDX compilation
+   * happens during render() via @mdx-js/mdx evaluate().
    */
   async transpile(template, _options) {
-    const hash = hashString(template);
-    const cached = transpileCache.getByKey(hash);
+    const hash = (0, import_renderers2.hashString)(template);
+    const cached = import_renderers2.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);
+    import_renderers2.transpileCache.setByKey(hash, transpileResult);
     return transpileResult;
   }
   /**
@@ -1716,9 +501,9 @@ var MdxRenderer = class {
     if (!this.mdxEvaluate) {
       throw new Error("MDX compilation requires @mdx-js/mdx. Install it: npm install @mdx-js/mdx");
     }
-    const templateHash = hashString(template);
+    const templateHash = (0, import_renderers2.hashString)(template);
     const cacheKey = `mdx-component:${templateHash}`;
-    let Content = componentCache.get(cacheKey);
+    let Content = import_renderers2.componentCache.get(cacheKey);
     if (!Content) {
       const result = await this.mdxEvaluate(template, {
         ...this.jsxRuntime,
@@ -1726,12 +511,10 @@ var MdxRenderer = class {
         development: false
       });
       Content = result.default;
-      componentCache.set(cacheKey, Content);
+      import_renderers2.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);
@@ -1743,9 +526,11 @@ var MdxRenderer = class {
       structuredContent: context.structuredContent,
       helpers: context.helpers
     };
+    const reservedProps = /* @__PURE__ */ new Set(["input", "output", "structuredContent", "helpers", "components"]);
+    const outputProps = typeof context.output === "object" && context.output !== null ? Object.fromEntries(Object.entries(context.output).filter(([key]) => !reservedProps.has(key))) : {};
     const spreadProps = {
-      ...props,
-      ...typeof context.output === "object" && context.output !== null ? context.output : {}
+      ...outputProps,
+      ...props
     };
     const element = this.React.createElement(Content, {
       components: mdxComponents,
@@ -1799,10 +584,6 @@ var MdxRenderer = class {
   }
   /**
    * 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) {
@@ -1819,64 +600,57 @@ var MdxRenderer = class {
   }
 };
 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);
-      }
+// libs/ui/src/renderers/transpiler.ts
+var import_renderers3 = require("@frontmcp/uipack/renderers");
+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 exports2 = {};
+  const module2 = { exports: exports2 };
+  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`);
     }
-  });
-})();
-</script>
-`;
+  };
+  try {
+    const fn = new Function("exports", "require", "module", "__filename", "__dirname", "React", "context", code);
+    fn(exports2, require2, module2, "template.js", "/", React, context);
+    const exportKeys = Object.keys(module2.exports);
+    return module2.exports["default"] || (exportKeys.length > 0 ? module2.exports[exportKeys[0]] : null) || module2.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 (0, import_renderers3.transpileJsx)(source);
+  return executeTranspiledCode(result.code, context);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HtmlRenderer,
   MdxRenderer,
   ReactRenderer,
-  RendererRegistry,
-  TranspileCache,
-  buildHydrationScript,
-  buildMdxHydrationScript,
-  containsJsx,
-  containsMdxSyntax,
-  detectTemplateType,
+  ReactRendererAdapter,
+  createReactAdapter,
   executeTranspiledCode,
-  hashCombined,
-  hashString,
-  htmlRenderer,
-  isHash,
-  isPlainHtml,
-  isReactComponent,
-  isSwcAvailable,
-  isTemplateBuilderFunction,
+  loadReactAdapter,
   mdxRenderer,
   reactRenderer,
-  renderCache,
-  rendererRegistry,
-  transpileAndExecute,
-  transpileCache,
-  transpileJsx
+  transpileAndExecute
 });