@frontmcp/ui 0.5.1 → 0.6.1

package/esm/bundler/index.js

@@ -0,0 +1,3640 @@
+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/bundler/file-cache/storage/interface.ts
+function calculateManifestSize(manifest) {
+  try {
+    return Buffer.byteLength(JSON.stringify(manifest), "utf8");
+  } catch {
+    return 0;
+  }
+}
+var DEFAULT_STORAGE_OPTIONS;
+var init_interface = __esm({
+  "libs/ui/src/bundler/file-cache/storage/interface.ts"() {
+    "use strict";
+    DEFAULT_STORAGE_OPTIONS = {
+      maxEntries: 1e3,
+      maxSize: 100 * 1024 * 1024,
+      // 100MB
+      defaultTtl: 24 * 60 * 60,
+      // 24 hours
+      compress: false
+    };
+  }
+});
+
+// libs/ui/src/bundler/file-cache/storage/filesystem.ts
+var filesystem_exports = {};
+__export(filesystem_exports, {
+  CacheInitializationError: () => CacheInitializationError,
+  CacheOperationError: () => CacheOperationError,
+  FilesystemStorage: () => FilesystemStorage,
+  StorageNotInitializedError: () => StorageNotInitializedError,
+  createFilesystemStorage: () => createFilesystemStorage
+});
+import { mkdir, readFile, writeFile, readdir, unlink, rm } from "fs/promises";
+import { join, dirname } from "path";
+import { existsSync } from "fs";
+import { createHash } from "crypto";
+function createFilesystemStorage(options) {
+  return new FilesystemStorage(options);
+}
+var CacheInitializationError, CacheOperationError, StorageNotInitializedError, DEFAULT_FS_OPTIONS, FilesystemStorage;
+var init_filesystem = __esm({
+  "libs/ui/src/bundler/file-cache/storage/filesystem.ts"() {
+    "use strict";
+    init_interface();
+    CacheInitializationError = class extends Error {
+      cause;
+      constructor(message, cause) {
+        super(message);
+        this.name = "CacheInitializationError";
+        this.cause = cause;
+      }
+    };
+    CacheOperationError = class extends Error {
+      cause;
+      constructor(message, cause) {
+        super(message);
+        this.name = "CacheOperationError";
+        this.cause = cause;
+      }
+    };
+    StorageNotInitializedError = class extends Error {
+      constructor() {
+        super("Storage not initialized. Call initialize() first.");
+        this.name = "StorageNotInitializedError";
+      }
+    };
+    DEFAULT_FS_OPTIONS = {
+      ...DEFAULT_STORAGE_OPTIONS,
+      cacheDir: ".frontmcp-cache/builds",
+      extension: ".json"
+    };
+    FilesystemStorage = class {
+      type = "filesystem";
+      options;
+      initialized = false;
+      stats = {
+        entries: 0,
+        totalSize: 0,
+        hits: 0,
+        misses: 0,
+        hitRate: 0
+      };
+      constructor(options = {}) {
+        this.options = {
+          ...DEFAULT_FS_OPTIONS,
+          ...options
+        };
+      }
+      /**
+       * Initialize the storage directory.
+       */
+      async initialize() {
+        if (this.initialized) return;
+        try {
+          await mkdir(this.options.cacheDir, { recursive: true });
+          await this.loadStats();
+          this.initialized = true;
+        } catch (error) {
+          throw new CacheInitializationError(`Failed to initialize cache directory: ${error}`, error);
+        }
+      }
+      /**
+       * Get a cached manifest.
+       */
+      async get(key) {
+        this.ensureInitialized();
+        const filePath = this.getFilePath(key);
+        try {
+          if (!existsSync(filePath)) {
+            this.stats.misses++;
+            this.updateHitRate();
+            return void 0;
+          }
+          const content = await readFile(filePath, "utf8");
+          const entry = JSON.parse(content);
+          if (Date.now() > entry.metadata.expiresAt) {
+            await this.delete(key);
+            this.stats.misses++;
+            this.updateHitRate();
+            return void 0;
+          }
+          entry.metadata.lastAccessedAt = Date.now();
+          entry.metadata.accessCount++;
+          this.writeEntry(filePath, entry).catch((err) => {
+            if (process.env["DEBUG"]) {
+              console.debug(`[FilesystemStorage] Failed to update cache metadata for ${key}: ${err}`);
+            }
+          });
+          this.stats.hits++;
+          this.updateHitRate();
+          return entry.data;
+        } catch {
+          this.stats.misses++;
+          this.updateHitRate();
+          return void 0;
+        }
+      }
+      /**
+       * Store a manifest in cache.
+       */
+      async set(key, manifest, ttl) {
+        this.ensureInitialized();
+        const filePath = this.getFilePath(key);
+        const size = calculateManifestSize(manifest);
+        const effectiveTtl = ttl ?? this.options.defaultTtl;
+        await this.ensureCapacity(size);
+        const entry = {
+          data: manifest,
+          metadata: {
+            key,
+            size,
+            createdAt: Date.now(),
+            expiresAt: Date.now() + effectiveTtl * 1e3,
+            lastAccessedAt: Date.now(),
+            accessCount: 0
+          }
+        };
+        await this.writeEntry(filePath, entry);
+        this.stats.entries++;
+        this.stats.totalSize += size;
+      }
+      /**
+       * Check if a key exists.
+       */
+      async has(key) {
+        this.ensureInitialized();
+        const filePath = this.getFilePath(key);
+        try {
+          if (!existsSync(filePath)) return false;
+          const content = await readFile(filePath, "utf8");
+          const entry = JSON.parse(content);
+          if (Date.now() > entry.metadata.expiresAt) {
+            await this.delete(key);
+            return false;
+          }
+          return true;
+        } catch {
+          return false;
+        }
+      }
+      /**
+       * Delete a cached entry.
+       */
+      async delete(key) {
+        this.ensureInitialized();
+        const filePath = this.getFilePath(key);
+        try {
+          if (!existsSync(filePath)) return false;
+          const content = await readFile(filePath, "utf8");
+          const entry = JSON.parse(content);
+          await unlink(filePath);
+          this.stats.entries = Math.max(0, this.stats.entries - 1);
+          this.stats.totalSize = Math.max(0, this.stats.totalSize - entry.metadata.size);
+          return true;
+        } catch {
+          return false;
+        }
+      }
+      /**
+       * Clear all cached entries.
+       */
+      async clear() {
+        this.ensureInitialized();
+        try {
+          await rm(this.options.cacheDir, { recursive: true, force: true });
+          await mkdir(this.options.cacheDir, { recursive: true });
+          this.stats = {
+            entries: 0,
+            totalSize: 0,
+            hits: 0,
+            misses: 0,
+            hitRate: 0
+          };
+        } catch (error) {
+          throw new CacheOperationError(`Failed to clear cache: ${error}`, error);
+        }
+      }
+      /**
+       * Get cache statistics.
+       */
+      async getStats() {
+        return { ...this.stats };
+      }
+      /**
+       * Clean up expired entries.
+       */
+      async cleanup() {
+        this.ensureInitialized();
+        let removed = 0;
+        try {
+          const files = await readdir(this.options.cacheDir);
+          for (const file of files) {
+            if (!file.endsWith(this.options.extension)) continue;
+            const filePath = join(this.options.cacheDir, file);
+            try {
+              const content = await readFile(filePath, "utf8");
+              const entry = JSON.parse(content);
+              if (Date.now() > entry.metadata.expiresAt) {
+                await unlink(filePath);
+                this.stats.entries = Math.max(0, this.stats.entries - 1);
+                this.stats.totalSize = Math.max(0, this.stats.totalSize - entry.metadata.size);
+                removed++;
+              }
+            } catch {
+              await unlink(filePath).catch(() => {
+              });
+              removed++;
+            }
+          }
+        } catch {
+        }
+        return removed;
+      }
+      /**
+       * Close the storage (no-op for filesystem).
+       */
+      async close() {
+      }
+      /**
+       * Get the file path for a cache key.
+       * Uses SHA-256 hash to avoid collisions from key sanitization.
+       */
+      getFilePath(key) {
+        const hash = createHash("sha256").update(key).digest("hex").slice(0, 16);
+        return join(this.options.cacheDir, `${hash}${this.options.extension}`);
+      }
+      /**
+       * Write a cache entry to disk.
+       */
+      async writeEntry(filePath, entry) {
+        await mkdir(dirname(filePath), { recursive: true });
+        await writeFile(filePath, JSON.stringify(entry, null, 2), "utf8");
+      }
+      /**
+       * Ensure the storage is initialized.
+       */
+      ensureInitialized() {
+        if (!this.initialized) {
+          throw new StorageNotInitializedError();
+        }
+      }
+      /**
+       * Load stats from existing cache files.
+       * Reads entry metadata to get accurate manifest sizes.
+       */
+      async loadStats() {
+        try {
+          const files = await readdir(this.options.cacheDir);
+          let entries = 0;
+          let totalSize = 0;
+          for (const file of files) {
+            if (!file.endsWith(this.options.extension)) continue;
+            const filePath = join(this.options.cacheDir, file);
+            try {
+              const content = await readFile(filePath, "utf8");
+              const entry = JSON.parse(content);
+              entries++;
+              totalSize += entry.metadata.size;
+            } catch {
+            }
+          }
+          this.stats.entries = entries;
+          this.stats.totalSize = totalSize;
+        } catch {
+        }
+      }
+      /**
+       * Ensure there's capacity for a new entry.
+       */
+      async ensureCapacity(newEntrySize) {
+        if (this.stats.entries >= this.options.maxEntries) {
+          await this.evictLRU();
+        }
+        while (this.stats.totalSize + newEntrySize > this.options.maxSize) {
+          const evicted = await this.evictLRU();
+          if (!evicted) break;
+        }
+      }
+      /**
+       * Evict the least recently used entry.
+       */
+      async evictLRU() {
+        try {
+          const files = await readdir(this.options.cacheDir);
+          let oldestKey = null;
+          let oldestTime = Infinity;
+          let corruptedFile = null;
+          for (const file of files) {
+            if (!file.endsWith(this.options.extension)) continue;
+            const filePath = join(this.options.cacheDir, file);
+            try {
+              const content = await readFile(filePath, "utf8");
+              const entry = JSON.parse(content);
+              if (entry.metadata.lastAccessedAt < oldestTime) {
+                oldestTime = entry.metadata.lastAccessedAt;
+                oldestKey = entry.metadata.key;
+              }
+            } catch {
+              corruptedFile = filePath;
+            }
+          }
+          if (corruptedFile) {
+            try {
+              await unlink(corruptedFile);
+              this.stats.entries = Math.max(0, this.stats.entries - 1);
+              return true;
+            } catch {
+              return false;
+            }
+          }
+          if (oldestKey) {
+            return await this.delete(oldestKey);
+          }
+          return false;
+        } catch {
+          return false;
+        }
+      }
+      /**
+       * Update hit rate statistic.
+       */
+      updateHitRate() {
+        const total = this.stats.hits + this.stats.misses;
+        this.stats.hitRate = total > 0 ? this.stats.hits / total : 0;
+      }
+    };
+  }
+});
+
+// libs/ui/src/bundler/file-cache/storage/redis.ts
+var redis_exports = {};
+__export(redis_exports, {
+  RedisStorage: () => RedisStorage,
+  createRedisStorage: () => createRedisStorage
+});
+function createRedisStorage(options) {
+  return new RedisStorage(options);
+}
+var STATS_KEY_SUFFIX, RedisStorage;
+var init_redis = __esm({
+  "libs/ui/src/bundler/file-cache/storage/redis.ts"() {
+    "use strict";
+    init_interface();
+    STATS_KEY_SUFFIX = ":__stats__";
+    RedisStorage = class {
+      type = "redis";
+      options;
+      initialized = false;
+      localStats = {
+        entries: 0,
+        totalSize: 0,
+        hits: 0,
+        misses: 0,
+        hitRate: 0
+      };
+      constructor(options) {
+        if (!options.client) {
+          throw new Error("Redis client is required");
+        }
+        this.options = {
+          ...DEFAULT_STORAGE_OPTIONS,
+          keyPrefix: "frontmcp:ui:build:",
+          json: true,
+          ...options
+        };
+      }
+      /**
+       * Initialize the Redis connection.
+       */
+      async initialize() {
+        if (this.initialized) return;
+        try {
+          await this.options.client.ping();
+          await this.loadStats();
+          this.initialized = true;
+        } catch (error) {
+          throw new Error(`Failed to connect to Redis: ${error}`);
+        }
+      }
+      /**
+       * Get a cached manifest.
+       */
+      async get(key) {
+        this.ensureInitialized();
+        const redisKey = this.getRedisKey(key);
+        try {
+          const data = await this.options.client.get(redisKey);
+          if (!data) {
+            this.localStats.misses++;
+            this.updateHitRate();
+            await this.persistStats();
+            return void 0;
+          }
+          const entry = JSON.parse(data);
+          entry.metadata.lastAccessedAt = Date.now();
+          entry.metadata.accessCount++;
+          const ttl = await this.options.client.ttl(redisKey);
+          if (ttl > 0) {
+            const serialized = JSON.stringify(entry);
+            await this.options.client.setex(redisKey, ttl, serialized);
+          }
+          this.localStats.hits++;
+          this.updateHitRate();
+          await this.persistStats();
+          return entry.data;
+        } catch (error) {
+          console.warn?.(`Redis cache get failed for key "${key}": ${error}`);
+          this.localStats.misses++;
+          this.updateHitRate();
+          await this.persistStats().catch(() => {
+          });
+          return void 0;
+        }
+      }
+      /**
+       * Store a manifest in cache.
+       */
+      async set(key, manifest, ttl) {
+        this.ensureInitialized();
+        const redisKey = this.getRedisKey(key);
+        const size = calculateManifestSize(manifest);
+        const effectiveTtl = ttl ?? this.options.defaultTtl;
+        const entry = {
+          data: manifest,
+          metadata: {
+            key,
+            size,
+            createdAt: Date.now(),
+            expiresAt: Date.now() + effectiveTtl * 1e3,
+            lastAccessedAt: Date.now(),
+            accessCount: 0
+          }
+        };
+        const serialized = JSON.stringify(entry);
+        await this.options.client.setex(redisKey, effectiveTtl, serialized);
+        this.localStats.entries++;
+        this.localStats.totalSize += size;
+        await this.persistStats();
+      }
+      /**
+       * Check if a key exists.
+       */
+      async has(key) {
+        this.ensureInitialized();
+        const redisKey = this.getRedisKey(key);
+        const exists = await this.options.client.exists(redisKey);
+        return exists > 0;
+      }
+      /**
+       * Delete a cached entry.
+       */
+      async delete(key) {
+        this.ensureInitialized();
+        const redisKey = this.getRedisKey(key);
+        try {
+          const data = await this.options.client.get(redisKey);
+          if (data) {
+            const entry = JSON.parse(data);
+            this.localStats.totalSize = Math.max(0, this.localStats.totalSize - entry.metadata.size);
+          }
+        } catch {
+        }
+        const deleted = await this.options.client.del(redisKey);
+        if (deleted > 0) {
+          this.localStats.entries = Math.max(0, this.localStats.entries - 1);
+          await this.persistStats();
+          return true;
+        }
+        return false;
+      }
+      /**
+       * Clear all cached entries.
+       */
+      async clear() {
+        this.ensureInitialized();
+        const pattern = `${this.options.keyPrefix}*`;
+        const keys = await this.options.client.keys(pattern);
+        if (keys.length > 0) {
+          await this.options.client.del(keys);
+        }
+        this.localStats = {
+          entries: 0,
+          totalSize: 0,
+          hits: 0,
+          misses: 0,
+          hitRate: 0
+        };
+        await this.persistStats();
+      }
+      /**
+       * Get cache statistics.
+       */
+      async getStats() {
+        await this.loadStats();
+        return { ...this.localStats };
+      }
+      /**
+       * Clean up expired entries.
+       * Redis handles TTL expiration automatically, so this just refreshes stats.
+       */
+      async cleanup() {
+        this.ensureInitialized();
+        const pattern = `${this.options.keyPrefix}*`;
+        const keys = await this.options.client.keys(pattern);
+        const dataKeys = keys.filter((k) => !k.endsWith(STATS_KEY_SUFFIX));
+        const previousCount = this.localStats.entries;
+        this.localStats.entries = dataKeys.length;
+        let totalSize = 0;
+        for (const key of dataKeys) {
+          try {
+            const data = await this.options.client.get(key);
+            if (data) {
+              const entry = JSON.parse(data);
+              totalSize += entry.metadata.size;
+            }
+          } catch {
+          }
+        }
+        this.localStats.totalSize = totalSize;
+        await this.persistStats();
+        return Math.max(0, previousCount - this.localStats.entries);
+      }
+      /**
+       * Close the Redis connection.
+       */
+      async close() {
+        await this.options.client.quit();
+      }
+      /**
+       * Get the Redis key for a cache key.
+       */
+      getRedisKey(key) {
+        return `${this.options.keyPrefix}${key}`;
+      }
+      /**
+       * Get the Redis key for stats.
+       */
+      getStatsKey() {
+        return `${this.options.keyPrefix}${STATS_KEY_SUFFIX}`;
+      }
+      /**
+       * Ensure the storage is initialized.
+       */
+      ensureInitialized() {
+        if (!this.initialized) {
+          throw new Error("Storage not initialized. Call initialize() first.");
+        }
+      }
+      /**
+       * Load stats from Redis.
+       */
+      async loadStats() {
+        try {
+          const statsKey = this.getStatsKey();
+          const data = await this.options.client.get(statsKey);
+          if (data) {
+            const savedStats = JSON.parse(data);
+            this.localStats = {
+              ...this.localStats,
+              ...savedStats
+            };
+          }
+        } catch {
+        }
+      }
+      /**
+       * Persist stats to Redis.
+       */
+      async persistStats() {
+        try {
+          const statsKey = this.getStatsKey();
+          const serialized = JSON.stringify(this.localStats);
+          await this.options.client.set(statsKey, serialized);
+        } catch {
+        }
+      }
+      /**
+       * Update hit rate statistic.
+       */
+      updateHitRate() {
+        const total = this.localStats.hits + this.localStats.misses;
+        this.localStats.hitRate = total > 0 ? this.localStats.hits / total : 0;
+      }
+    };
+  }
+});
+
+// libs/ui/src/bundler/types.ts
+var DEFAULT_SECURITY_POLICY = {
+  allowedImports: [/^react$/, /^react-dom$/, /^react\/jsx-runtime$/, /^react\/jsx-dev-runtime$/, /^@frontmcp\/ui/],
+  blockedImports: [
+    /^fs$/,
+    /^fs\//,
+    /^net$/,
+    /^child_process$/,
+    /^os$/,
+    /^path$/,
+    /^crypto$/,
+    /^http$/,
+    /^https$/,
+    /^dgram$/,
+    /^dns$/,
+    /^cluster$/,
+    /^readline$/,
+    /^repl$/,
+    /^tls$/,
+    /^vm$/,
+    /^worker_threads$/
+  ],
+  maxBundleSize: 512e3,
+  // 500KB
+  maxTransformTime: 5e3,
+  // 5s
+  noEval: true,
+  noDynamicImports: true,
+  noRequire: true,
+  allowedGlobals: [
+    "console",
+    "Math",
+    "JSON",
+    "Date",
+    "Array",
+    "Object",
+    "String",
+    "Number",
+    "Boolean",
+    "Promise",
+    "Map",
+    "Set",
+    "WeakMap",
+    "WeakSet",
+    "Symbol",
+    "Reflect",
+    "Proxy",
+    "Error",
+    "TypeError",
+    "RangeError",
+    "SyntaxError",
+    "ReferenceError",
+    "parseInt",
+    "parseFloat",
+    "isNaN",
+    "isFinite",
+    "encodeURI",
+    "encodeURIComponent",
+    "decodeURI",
+    "decodeURIComponent",
+    "setTimeout",
+    "clearTimeout",
+    "setInterval",
+    "clearInterval",
+    "atob",
+    "btoa",
+    "Intl",
+    "TextEncoder",
+    "TextDecoder",
+    "URL",
+    "URLSearchParams",
+    "Uint8Array",
+    "Int8Array",
+    "Uint16Array",
+    "Int16Array",
+    "Uint32Array",
+    "Int32Array",
+    "Float32Array",
+    "Float64Array",
+    "BigInt",
+    "BigInt64Array",
+    "BigUint64Array",
+    "ArrayBuffer",
+    "SharedArrayBuffer",
+    "DataView",
+    "queueMicrotask"
+  ]
+};
+var DEFAULT_BUNDLE_OPTIONS = {
+  sourceType: "auto",
+  format: "iife",
+  minify: false,
+  sourceMaps: false,
+  externals: ["react", "react-dom"],
+  jsx: {
+    runtime: "automatic",
+    importSource: "react"
+  },
+  target: "es2020",
+  globalName: "Widget",
+  skipCache: false
+};
+var DEFAULT_BUNDLER_OPTIONS = {
+  defaultSecurity: DEFAULT_SECURITY_POLICY,
+  cache: {
+    maxSize: 100,
+    ttl: 3e5,
+    // 5 minutes
+    disabled: false
+  },
+  verbose: false,
+  esbuildOptions: {}
+};
+var STATIC_HTML_CDN = {
+  /**
+   * ES modules from esm.sh (React 19, modern platforms)
+   */
+  esm: {
+    react: "https://esm.sh/react@19",
+    reactDom: "https://esm.sh/react-dom@19/client"
+  },
+  /**
+   * UMD builds from cdnjs (React 18.2, Claude only trusts cloudflare)
+   */
+  umd: {
+    react: "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js",
+    reactDom: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
+  },
+  /**
+   * Tailwind CSS from cdnjs (cloudflare) - works on all platforms
+   * Using CSS file instead of JS browser version to avoid style normalization issues
+   */
+  tailwind: "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.4.1/tailwind.min.css",
+  /**
+   * Font CDN URLs
+   */
+  fonts: {
+    preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  }
+};
+function getCdnTypeForPlatform(platform) {
+  if (platform === "claude") return "umd";
+  return "esm";
+}
+var DEFAULT_STATIC_HTML_OPTIONS = {
+  sourceType: "auto",
+  targetPlatform: "auto",
+  minify: true,
+  skipCache: false,
+  rootId: "frontmcp-widget-root",
+  widgetAccessible: false,
+  externals: {
+    react: "cdn",
+    reactDom: "cdn",
+    tailwind: "cdn",
+    frontmcpUi: "inline"
+  },
+  // Universal mode defaults
+  universal: false,
+  contentType: "auto",
+  includeMarkdown: false,
+  includeMdx: false
+};
+
+// libs/ui/src/bundler/cache.ts
+var BundlerCache = class {
+  cache = /* @__PURE__ */ new Map();
+  options;
+  stats = {
+    hits: 0,
+    misses: 0,
+    evictions: 0
+  };
+  constructor(options = {}) {
+    this.options = {
+      maxSize: options.maxSize ?? 100,
+      ttl: options.ttl ?? 3e5
+    };
+  }
+  /**
+   * Get a cached bundle result.
+   *
+   * @param key - Cache key (typically content hash)
+   * @returns Cached result or undefined if not found/expired
+   */
+  get(key) {
+    const entry = this.cache.get(key);
+    if (!entry) {
+      this.stats.misses++;
+      return void 0;
+    }
+    if (this.isExpired(entry)) {
+      this.cache.delete(key);
+      this.stats.misses++;
+      this.stats.evictions++;
+      return void 0;
+    }
+    entry.lastAccessedAt = Date.now();
+    entry.accessCount++;
+    this.stats.hits++;
+    this.cache.delete(key);
+    this.cache.set(key, entry);
+    return entry.result;
+  }
+  /**
+   * Store a bundle result in the cache.
+   *
+   * @param key - Cache key (typically content hash)
+   * @param result - Bundle result to cache
+   */
+  set(key, result) {
+    while (this.cache.size >= this.options.maxSize) {
+      this.evictOldest();
+    }
+    const now = Date.now();
+    const entry = {
+      result,
+      createdAt: now,
+      lastAccessedAt: now,
+      accessCount: 1
+    };
+    this.cache.set(key, entry);
+  }
+  /**
+   * Check if a key exists in the cache (and is not expired).
+   *
+   * @param key - Cache key to check
+   * @returns true if key exists and is not expired
+   */
+  has(key) {
+    const entry = this.cache.get(key);
+    if (!entry) return false;
+    if (this.isExpired(entry)) {
+      this.cache.delete(key);
+      this.stats.evictions++;
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Delete a specific entry from the cache.
+   *
+   * @param key - Cache key to delete
+   * @returns true if the key was found and deleted
+   */
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  /**
+   * Clear all entries from the cache.
+   */
+  clear() {
+    this.cache.clear();
+    this.stats = {
+      hits: 0,
+      misses: 0,
+      evictions: 0
+    };
+  }
+  /**
+   * Get cache statistics.
+   *
+   * @returns Current cache statistics
+   */
+  getStats() {
+    const total = this.stats.hits + this.stats.misses;
+    const hitRate = total > 0 ? this.stats.hits / total : 0;
+    let memoryUsage = 0;
+    for (const entry of this.cache.values()) {
+      memoryUsage += entry.result.size;
+      if (entry.result.map) {
+        memoryUsage += entry.result.map.length;
+      }
+    }
+    return {
+      size: this.cache.size,
+      hits: this.stats.hits,
+      misses: this.stats.misses,
+      hitRate,
+      evictions: this.stats.evictions,
+      memoryUsage
+    };
+  }
+  /**
+   * Remove expired entries from the cache.
+   *
+   * @returns Number of entries removed
+   */
+  cleanup() {
+    let removed = 0;
+    for (const [key, entry] of this.cache.entries()) {
+      if (this.isExpired(entry)) {
+        this.cache.delete(key);
+        removed++;
+      }
+    }
+    this.stats.evictions += removed;
+    return removed;
+  }
+  /**
+   * Get all cache keys.
+   *
+   * @returns Array of cache keys
+   */
+  keys() {
+    return Array.from(this.cache.keys());
+  }
+  /**
+   * Get the number of entries in the cache.
+   */
+  get size() {
+    return this.cache.size;
+  }
+  /**
+   * Check if an entry is expired.
+   */
+  isExpired(entry) {
+    return Date.now() - entry.createdAt > this.options.ttl;
+  }
+  /**
+   * Evict the oldest (least recently used) entry.
+   */
+  evictOldest() {
+    const oldestKey = this.cache.keys().next().value;
+    if (oldestKey !== void 0) {
+      this.cache.delete(oldestKey);
+      this.stats.evictions++;
+    }
+  }
+};
+function hashContent(content) {
+  let hash = 2166136261;
+  for (let i = 0; i < content.length; i++) {
+    hash ^= content.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+function createCacheKey(source, options) {
+  const sourceHash = hashContent(source);
+  const optionsHash = hashContent(
+    JSON.stringify({
+      sourceType: options.sourceType,
+      format: options.format,
+      minify: options.minify,
+      externals: options.externals?.sort(),
+      target: options.target
+    })
+  );
+  return `${sourceHash}-${optionsHash}`;
+}
+
+// libs/ui/src/bundler/sandbox/policy.ts
+var UNSAFE_PATTERNS = {
+  eval: /\beval\s*\(/g,
+  functionConstructor: /\bnew\s+Function\s*\(/g,
+  dynamicImport: /\bimport\s*\(/g,
+  require: /\brequire\s*\(/g,
+  processEnv: /\bprocess\.env\b/g,
+  globalThis: /\bglobalThis\b/g,
+  windowLocation: /\bwindow\.location\b/g,
+  documentCookie: /\bdocument\.cookie\b/g,
+  innerHTML: /\.innerHTML\s*=/g,
+  outerHTML: /\.outerHTML\s*=/g,
+  document_write: /\bdocument\.write\s*\(/g
+};
+function validateSource(source, policy = DEFAULT_SECURITY_POLICY) {
+  const violations = [];
+  if (policy.noEval !== false) {
+    const evalMatches = [...source.matchAll(UNSAFE_PATTERNS.eval)];
+    for (const match of evalMatches) {
+      violations.push({
+        type: "eval-usage",
+        message: "eval() is not allowed for security reasons",
+        location: getLocation(source, match.index ?? 0),
+        value: match[0]
+      });
+    }
+    const fnMatches = [...source.matchAll(UNSAFE_PATTERNS.functionConstructor)];
+    for (const match of fnMatches) {
+      violations.push({
+        type: "eval-usage",
+        message: "new Function() is not allowed for security reasons",
+        location: getLocation(source, match.index ?? 0),
+        value: match[0]
+      });
+    }
+  }
+  if (policy.noDynamicImports !== false) {
+    const matches = [...source.matchAll(UNSAFE_PATTERNS.dynamicImport)];
+    for (const match of matches) {
+      violations.push({
+        type: "dynamic-import",
+        message: "Dynamic imports are not allowed for security reasons",
+        location: getLocation(source, match.index ?? 0),
+        value: match[0]
+      });
+    }
+  }
+  if (policy.noRequire !== false) {
+    const matches = [...source.matchAll(UNSAFE_PATTERNS.require)];
+    for (const match of matches) {
+      violations.push({
+        type: "require-usage",
+        message: "require() is not allowed for security reasons",
+        location: getLocation(source, match.index ?? 0),
+        value: match[0]
+      });
+    }
+  }
+  const importViolations = validateImports(source, policy);
+  violations.push(...importViolations);
+  return violations;
+}
+function validateImports(source, policy = DEFAULT_SECURITY_POLICY) {
+  const violations = [];
+  const importPattern = /import\s+(?:(?:\{[^}]*\}|[\w*]+)\s+from\s+)?['"]([^'"]+)['"]/g;
+  const imports = [];
+  let match;
+  while ((match = importPattern.exec(source)) !== null) {
+    imports.push({ module: match[1], index: match.index });
+  }
+  const requirePattern = /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+  while ((match = requirePattern.exec(source)) !== null) {
+    imports.push({ module: match[1], index: match.index });
+  }
+  for (const imp of imports) {
+    if (policy.blockedImports) {
+      for (const blocked of policy.blockedImports) {
+        if (blocked.test(imp.module)) {
+          violations.push({
+            type: "blocked-import",
+            message: `Import '${imp.module}' is blocked by security policy`,
+            location: getLocation(source, imp.index),
+            value: imp.module
+          });
+          break;
+        }
+      }
+    }
+    if (policy.allowedImports && policy.allowedImports.length > 0) {
+      const isAllowed = policy.allowedImports.some((pattern) => pattern.test(imp.module));
+      if (!isAllowed) {
+        const alreadyBlocked = violations.some((v) => v.type === "blocked-import" && v.value === imp.module);
+        if (!alreadyBlocked) {
+          violations.push({
+            type: "disallowed-import",
+            message: `Import '${imp.module}' is not in the allowed imports list`,
+            location: getLocation(source, imp.index),
+            value: imp.module
+          });
+        }
+      }
+    }
+  }
+  return violations;
+}
+function validateSize(size, policy = DEFAULT_SECURITY_POLICY) {
+  const maxSize = policy.maxBundleSize ?? DEFAULT_SECURITY_POLICY.maxBundleSize ?? 512e3;
+  if (size > maxSize) {
+    return {
+      type: "size-exceeded",
+      message: `Bundle size (${formatBytes(size)}) exceeds maximum allowed (${formatBytes(maxSize)})`,
+      value: String(size)
+    };
+  }
+  return void 0;
+}
+function mergePolicy(userPolicy) {
+  if (!userPolicy) {
+    return { ...DEFAULT_SECURITY_POLICY };
+  }
+  return {
+    allowedImports: userPolicy.allowedImports ?? DEFAULT_SECURITY_POLICY.allowedImports,
+    blockedImports: userPolicy.blockedImports ?? DEFAULT_SECURITY_POLICY.blockedImports,
+    maxBundleSize: userPolicy.maxBundleSize ?? DEFAULT_SECURITY_POLICY.maxBundleSize,
+    maxTransformTime: userPolicy.maxTransformTime ?? DEFAULT_SECURITY_POLICY.maxTransformTime,
+    noEval: userPolicy.noEval ?? DEFAULT_SECURITY_POLICY.noEval,
+    noDynamicImports: userPolicy.noDynamicImports ?? DEFAULT_SECURITY_POLICY.noDynamicImports,
+    noRequire: userPolicy.noRequire ?? DEFAULT_SECURITY_POLICY.noRequire,
+    allowedGlobals: userPolicy.allowedGlobals ?? DEFAULT_SECURITY_POLICY.allowedGlobals
+  };
+}
+function getLocation(source, index) {
+  const lines = source.slice(0, index).split("\n");
+  return {
+    line: lines.length,
+    column: lines[lines.length - 1].length + 1
+  };
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var SecurityError = class extends Error {
+  violations;
+  constructor(message, violations) {
+    super(message);
+    this.name = "SecurityError";
+    this.violations = violations;
+  }
+};
+function throwOnViolations(violations) {
+  if (violations.length > 0) {
+    const message = violations.map((v) => v.message).join("; ");
+    throw new SecurityError(`Security policy violation: ${message}`, violations);
+  }
+}
+
+// libs/ui/src/bundler/sandbox/enclave-adapter.ts
+import { Enclave } from "enclave-vm";
+var DEFAULT_ENCLAVE_OPTIONS = {
+  securityLevel: "SECURE",
+  timeout: 5e3,
+  maxIterations: 1e4,
+  validate: true,
+  transform: true
+};
+var STRICT_SECURITY_BLOCKED_IMPORTS_THRESHOLD = 10;
+function mapSecurityLevel(policy) {
+  if (policy?.blockedImports && policy.blockedImports.length > STRICT_SECURITY_BLOCKED_IMPORTS_THRESHOLD) {
+    return "STRICT";
+  }
+  return "SECURE";
+}
+function createJSXRuntime(React) {
+  const R = React;
+  return {
+    jsx: (type, props, key) => {
+      const { children, ...rest } = props;
+      return R.createElement(type, key ? { ...rest, key } : rest, children);
+    },
+    jsxs: (type, props, key) => {
+      const { children, ...rest } = props;
+      return R.createElement(type, key ? { ...rest, key } : rest, children);
+    },
+    jsxDEV: (type, props, key, _isStaticChildren, _source, _self) => {
+      const { children, ...rest } = props;
+      return R.createElement(type, key ? { ...rest, key } : rest, children);
+    },
+    Fragment: R.Fragment
+  };
+}
+var DANGEROUS_GLOBAL_KEYS = /* @__PURE__ */ new Set([
+  "process",
+  "require",
+  "__dirname",
+  "__filename",
+  "Buffer",
+  "eval",
+  "Function",
+  "constructor",
+  "global",
+  "globalThis",
+  "module",
+  "exports",
+  "__proto__"
+]);
+function sanitizeGlobalKey(key) {
+  return key.replace(/[^a-zA-Z0-9_$]/g, "_");
+}
+function buildGlobals(context) {
+  const globals = {};
+  if (context.React) {
+    globals["React"] = context.React;
+  }
+  if (context.ReactDOM) {
+    globals["ReactDOM"] = context.ReactDOM;
+  }
+  if (context.React) {
+    const jsxRuntime = createJSXRuntime(context.React);
+    globals["__jsx"] = jsxRuntime["jsx"];
+    globals["__jsxs"] = jsxRuntime["jsxs"];
+    globals["__jsxDEV"] = jsxRuntime["jsxDEV"];
+    globals["Fragment"] = jsxRuntime["Fragment"];
+  }
+  if (context.modules) {
+    for (const [key, value] of Object.entries(context.modules)) {
+      const sanitizedKey = sanitizeGlobalKey(key);
+      if (DANGEROUS_GLOBAL_KEYS.has(sanitizedKey)) {
+        throw new ExecutionError(
+          `Dangerous module key '${key}' (sanitized: '${sanitizedKey}') is not allowed in execution context`,
+          { code: "SECURITY_VIOLATION" }
+        );
+      }
+      globals[sanitizedKey] = value;
+    }
+  }
+  if (context.globals) {
+    for (const [key, value] of Object.entries(context.globals)) {
+      if (DANGEROUS_GLOBAL_KEYS.has(key)) {
+        throw new ExecutionError(`Dangerous global key '${key}' is not allowed in execution context`, {
+          code: "SECURITY_VIOLATION"
+        });
+      }
+      const sanitizedKey = sanitizeGlobalKey(key);
+      if (DANGEROUS_GLOBAL_KEYS.has(sanitizedKey)) {
+        throw new ExecutionError(
+          `Dangerous global key '${key}' (sanitized: '${sanitizedKey}') is not allowed in execution context`,
+          { code: "SECURITY_VIOLATION" }
+        );
+      }
+      globals[sanitizedKey] = value;
+    }
+  }
+  return globals;
+}
+function buildRequireFunction(context) {
+  const normalizedContextModules = {};
+  if (context.modules) {
+    for (const [key, value] of Object.entries(context.modules)) {
+      normalizedContextModules[key.toLowerCase()] = value;
+    }
+  }
+  const modules = {
+    react: context.React,
+    "react-dom": context.ReactDOM,
+    "react/jsx-runtime": context.React ? createJSXRuntime(context.React) : void 0,
+    "react/jsx-dev-runtime": context.React ? createJSXRuntime(context.React) : void 0,
+    ...normalizedContextModules
+  };
+  return (id) => {
+    const normalizedId = id.toLowerCase();
+    if (normalizedId in modules) {
+      const mod = modules[normalizedId];
+      if (mod === void 0) {
+        throw new Error(`Module '${id}' is not available. Did you forget to provide it in the context?`);
+      }
+      return mod;
+    }
+    throw new Error(`Module '${id}' is not available in the sandbox environment`);
+  };
+}
+async function executeCode(code, context = {}) {
+  const consoleOutput = [];
+  const globals = buildGlobals(context);
+  globals["console"] = {
+    log: (...args) => {
+      consoleOutput.push(args.map(String).join(" "));
+    },
+    info: (...args) => {
+      consoleOutput.push(`[INFO] ${args.map(String).join(" ")}`);
+    },
+    warn: (...args) => {
+      consoleOutput.push(`[WARN] ${args.map(String).join(" ")}`);
+    },
+    error: (...args) => {
+      consoleOutput.push(`[ERROR] ${args.map(String).join(" ")}`);
+    },
+    debug: (...args) => {
+      consoleOutput.push(`[DEBUG] ${args.map(String).join(" ")}`);
+    },
+    trace: () => {
+    },
+    dir: () => {
+    },
+    table: () => {
+    },
+    group: () => {
+    },
+    groupEnd: () => {
+    },
+    time: () => {
+    },
+    timeEnd: () => {
+    },
+    assert: () => {
+    },
+    clear: () => {
+    },
+    count: () => {
+    },
+    countReset: () => {
+    }
+  };
+  globals["require"] = buildRequireFunction(context);
+  const enclave = new Enclave({
+    ...DEFAULT_ENCLAVE_OPTIONS,
+    timeout: context.timeout ?? DEFAULT_ENCLAVE_OPTIONS.timeout,
+    maxIterations: context.maxIterations ?? DEFAULT_ENCLAVE_OPTIONS.maxIterations,
+    securityLevel: mapSecurityLevel(context.security),
+    globals,
+    allowFunctionsInGlobals: true
+    // Required for React components
+  });
+  try {
+    const wrappedCode = `
+      const module = { exports: {} };
+      const exports = module.exports;
+      const __filename = 'widget.js';
+      const __dirname = '/';
+      ${code}
+      return module.exports;
+    `;
+    const result = await enclave.run(wrappedCode);
+    if (!result.success) {
+      const errorMessage = result.error?.message ?? "Execution failed";
+      const errorCode = result.error?.code;
+      if (errorCode === "TIMEOUT") {
+        throw new ExecutionError(`Execution timed out after ${context.timeout ?? DEFAULT_ENCLAVE_OPTIONS.timeout}ms`, {
+          code: "TIMEOUT"
+        });
+      }
+      if (errorCode === "MAX_ITERATIONS") {
+        throw new ExecutionError(
+          `Maximum iterations exceeded (${context.maxIterations ?? DEFAULT_ENCLAVE_OPTIONS.maxIterations})`,
+          {
+            code: "MAX_ITERATIONS"
+          }
+        );
+      }
+      if (errorCode === "VALIDATION_ERROR") {
+        throw new ExecutionError(`Security validation failed: ${errorMessage}`, { code: "SECURITY_VIOLATION" });
+      }
+      throw new ExecutionError(errorMessage, result.error);
+    }
+    return {
+      exports: result.value,
+      executionTime: result.stats.duration,
+      consoleOutput: consoleOutput.length > 0 ? consoleOutput : void 0
+    };
+  } finally {
+    enclave.dispose();
+  }
+}
+async function executeDefault(code, context = {}) {
+  const result = await executeCode(code, context);
+  if ("default" in result.exports) {
+    return result.exports.default;
+  }
+  const exportKeys = Object.keys(result.exports);
+  if (exportKeys.length === 0) {
+    throw new ExecutionError("Code did not export any values");
+  }
+  if (exportKeys.length === 1) {
+    return result.exports[exportKeys[0]];
+  }
+  return result.exports;
+}
+var ExecutionError = class extends Error {
+  /** Error code for categorization */
+  code;
+  constructor(message, cause) {
+    super(message, { cause });
+    this.name = "ExecutionError";
+    if (cause && typeof cause === "object" && "code" in cause) {
+      this.code = cause.code;
+    }
+  }
+};
+function isExecutionError(error) {
+  return error instanceof ExecutionError;
+}
+
+// libs/ui/src/bundler/bundler.ts
+import { escapeHtml } from "@frontmcp/uipack/utils";
+
+// libs/ui/src/universal/types.ts
+var UNIVERSAL_CDN = {
+  esm: {
+    reactMarkdown: "https://esm.sh/react-markdown@9",
+    mdxReact: "https://esm.sh/@mdx-js/react@3",
+    remarkGfm: "https://esm.sh/remark-gfm@4"
+  }
+  // Note: These libraries are not available on cdnjs
+  // For Claude, we use inline implementations
+};
+function detectContentType(source) {
+  if (typeof source === "function") {
+    return "react";
+  }
+  if (typeof source !== "string") {
+    return "html";
+  }
+  const hasModuleSyntax = /^import\s+/m.test(source) || /^export\s+(default\s+)?/m.test(source) || /^const\s+\w+\s*=\s*\([^)]*\)\s*=>/m.test(source) || // Arrow function components
+  /^function\s+\w+\s*\(/m.test(source);
+  const hasJsxTags = /<[A-Z][a-zA-Z]*/.test(source);
+  const hasMarkdown = /^#{1,6}\s/m.test(source) || /^\*\s/m.test(source) || /^-\s/m.test(source) || /^\d+\.\s/m.test(source);
+  if (hasModuleSyntax && hasJsxTags) {
+    return "react";
+  }
+  if (hasJsxTags && hasMarkdown && !hasModuleSyntax) {
+    return "mdx";
+  }
+  if (hasMarkdown || /\*\*[^*]+\*\*/.test(source) || /\[[^\]]+\]\([^)]+\)/.test(source)) {
+    return "markdown";
+  }
+  if (hasJsxTags && !hasModuleSyntax) {
+    return "mdx";
+  }
+  return "html";
+}
+
+// libs/ui/src/universal/cached-runtime.ts
+var RUNTIME_PLACEHOLDERS = {
+  /** Placeholder for transpiled component code */
+  COMPONENT_CODE: "/*__FRONTMCP_COMPONENT_CODE__*/",
+  /** Placeholder for data injection */
+  DATA_INJECTION: "/*__FRONTMCP_DATA_INJECTION__*/",
+  /** Placeholder for custom components */
+  CUSTOM_COMPONENTS: "/*__FRONTMCP_CUSTOM_COMPONENTS__*/"
+};
+var runtimeCache = /* @__PURE__ */ new Map();
+var DEFAULT_CACHE_CONFIG = {
+  maxEntries: 10,
+  ttl: 0
+  // Forever by default
+};
+function generateCacheKey(options) {
+  const securityKey = options.contentSecurity ? [
+    options.contentSecurity.allowUnsafeLinks ? "unsafeLinks" : "",
+    options.contentSecurity.allowInlineScripts ? "unsafeScripts" : "",
+    options.contentSecurity.bypassSanitization ? "bypass" : ""
+  ].filter(Boolean).join("+") || "secure" : "secure";
+  return [
+    options.cdnType,
+    options.includeMarkdown ? "md" : "",
+    options.includeMdx ? "mdx" : "",
+    options.minify ? "min" : "",
+    securityKey
+  ].filter(Boolean).join(":");
+}
+function buildStoreRuntime() {
+  return `
+// FrontMCP Store (Vendor)
+(function() {
+  var state = {
+    toolName: null,
+    input: null,
+    output: null,
+    content: null,
+    structuredContent: null,
+    loading: false,
+    error: null
+  };
+
+  var listeners = new Set();
+
+  window.__frontmcp = {
+    getState: function() { return state; },
+    setState: function(partial) {
+      state = Object.assign({}, state, partial);
+      listeners.forEach(function(fn) { fn(); });
+    },
+    subscribe: function(fn) {
+      listeners.add(fn);
+      return function() { listeners.delete(fn); };
+    },
+    reset: function() {
+      state = {
+        toolName: null,
+        input: null,
+        output: null,
+        content: null,
+        structuredContent: null,
+        loading: false,
+        error: null
+      };
+    },
+    context: state,
+    setContext: function(ctx) {
+      this.setState(ctx);
+    }
+  };
+
+  // React hooks
+  window.useFrontMCPStore = function() {
+    var store = window.__frontmcp;
+    return React.useSyncExternalStore(
+      store.subscribe,
+      store.getState,
+      store.getState
+    );
+  };
+
+  window.useToolOutput = function() {
+    return window.useFrontMCPStore().output;
+  };
+
+  window.useToolInput = function() {
+    return window.useFrontMCPStore().input;
+  };
+
+  window.useContent = function() {
+    return window.useFrontMCPStore().content;
+  };
+})();
+`;
+}
+function buildRequireShim() {
+  return `
+// Module Require Shim (Vendor)
+(function() {
+  window.__moduleCache = {};
+  window.require = function(moduleName) {
+    if (window.__moduleCache[moduleName]) {
+      return window.__moduleCache[moduleName];
+    }
+
+    var moduleMap = {
+      'react': function() { return window.React; },
+      'react-dom': function() { return window.ReactDOM; },
+      'react-dom/client': function() { return window.ReactDOM; },
+      'react/jsx-runtime': function() { return window.jsx_runtime_namespaceObject; },
+      'react/jsx-dev-runtime': function() { return window.jsx_runtime_namespaceObject; },
+      '@frontmcp/ui': function() { return window.frontmcp_ui_namespaceObject; },
+      '@frontmcp/ui/react': function() { return window.frontmcp_ui_namespaceObject; }
+    };
+
+    var resolver = moduleMap[moduleName];
+    if (resolver) {
+      var mod = resolver();
+      window.__moduleCache[moduleName] = mod;
+      return mod;
+    }
+
+    console.warn('[FrontMCP] Unknown module:', moduleName);
+    return {};
+  };
+})();
+`;
+}
+function buildInlineMarkdownParser(options) {
+  const allowUnsafeLinks = options?.contentSecurity?.bypassSanitization || options?.contentSecurity?.allowUnsafeLinks;
+  return `
+// Inline Markdown Parser (Vendor)
+(function() {
+  // XSS protection settings (configured at build time)
+  // Set to true if contentSecurity.allowUnsafeLinks or bypassSanitization is enabled
+  var __allowUnsafeLinks = ${allowUnsafeLinks ? "true" : "false"};
+
+  // URL scheme validation to prevent XSS via javascript: URLs
+  function isSafeUrl(url) {
+    // If unsafe links are explicitly allowed, skip validation
+    if (__allowUnsafeLinks) return true;
+    if (!url) return false;
+    var lower = url.toLowerCase().trim();
+    return lower.startsWith('http://') ||
+           lower.startsWith('https://') ||
+           lower.startsWith('/') ||
+           lower.startsWith('#') ||
+           lower.startsWith('mailto:');
+  }
+
+  function parseMarkdown(md) {
+    var html = md;
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    html = html.replace(/^######\\s+(.*)$/gm, '<h6>$1</h6>');
+    html = html.replace(/^#####\\s+(.*)$/gm, '<h5>$1</h5>');
+    html = html.replace(/^####\\s+(.*)$/gm, '<h4>$1</h4>');
+    html = html.replace(/^###\\s+(.*)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^##\\s+(.*)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^#\\s+(.*)$/gm, '<h1>$1</h1>');
+    html = html.replace(/\\*\\*\\*(.+?)\\*\\*\\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+    html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');
+    html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+    // Links - validate URL scheme to prevent XSS (unless bypassed)
+    html = html.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, function(match, text, url) {
+      return isSafeUrl(url) ? '<a href="' + url + '">' + text + '</a>' : text;
+    });
+    html = html.replace(/^[-*]\\s+(.*)$/gm, '<li>$1</li>');
+    html = html.replace(/\\n\\n+/g, '</p><p>');
+    html = '<p>' + html + '</p>';
+    return html;
+  }
+
+  window.__frontmcp.parseMarkdown = parseMarkdown;
+
+  window.ReactMarkdown = function(props) {
+    var html = parseMarkdown(props.children || '');
+    return React.createElement('div', {
+      className: 'frontmcp-markdown prose',
+      dangerouslySetInnerHTML: { __html: html }
+    });
+  };
+})();
+`;
+}
+function buildRenderersRuntime(options) {
+  const bypassSanitization = options?.contentSecurity?.bypassSanitization;
+  const allowInlineScripts = bypassSanitization || options?.contentSecurity?.allowInlineScripts;
+  return `
+// Universal Renderers (Vendor)
+(function() {
+  var renderers = {};
+
+  // XSS protection settings (configured at build time)
+  // Set to true if contentSecurity.allowInlineScripts or bypassSanitization is enabled
+  var __allowInlineScripts = ${allowInlineScripts ? "true" : "false"};
+
+  renderers.html = {
+    type: 'html',
+    priority: 0,
+    canHandle: function(c) { return c.type === 'html'; },
+    render: function(c, ctx) {
+      var html = c.source;
+      // Apply XSS protection unless bypassed
+      if (!__allowInlineScripts) {
+        // Remove script tags and event handlers to prevent XSS
+        html = html.replace(/<script[^>]*>[\\s\\S]*?<\\/script>/gi, '');
+        html = html.replace(/\\s+on\\w+\\s*=/gi, ' data-removed-handler=');
+      }
+      return React.createElement('div', {
+        className: 'frontmcp-html-content',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  renderers.markdown = {
+    type: 'markdown',
+    priority: 10,
+    canHandle: function(c) {
+      if (c.type === 'markdown') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /^#{1,6}\\s/m.test(s) || /^[-*]\\s/m.test(s) || /\\*\\*[^*]+\\*\\*/.test(s);
+    },
+    render: function(c, ctx) {
+      if (window.ReactMarkdown) {
+        return React.createElement(window.ReactMarkdown, {
+          children: c.source,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      var html = window.__frontmcp.parseMarkdown ? window.__frontmcp.parseMarkdown(c.source) : c.source;
+      return React.createElement('div', {
+        className: 'frontmcp-markdown prose',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  renderers.react = {
+    type: 'react',
+    priority: 30,
+    canHandle: function(c) { return c.type === 'react' || typeof c.source === 'function'; },
+    render: function(c, ctx) {
+      var Component = c.source;
+      var props = Object.assign({
+        output: ctx.output,
+        input: ctx.input,
+        state: ctx.state,
+        data: ctx.output // Alias for convenience
+      }, c.props);
+      return React.createElement(Component, props);
+    }
+  };
+
+  renderers.mdx = {
+    type: 'mdx',
+    priority: 20,
+    canHandle: function(c) {
+      if (c.type === 'mdx') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /<[A-Z][a-zA-Z]*/.test(s) && /^#{1,6}\\s/m.test(s);
+    },
+    render: function(c, ctx) {
+      if (typeof c.compiledContent === 'function') {
+        var MDXContent = c.compiledContent;
+        return React.createElement(MDXContent, {
+          output: ctx.output,
+          input: ctx.input,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      return React.createElement('div', { className: 'frontmcp-mdx-fallback' }, [
+        React.createElement('div', {
+          key: 'warn',
+          className: 'bg-yellow-50 border border-yellow-200 rounded p-2 mb-2 text-sm text-yellow-800'
+        }, 'MDX requires pre-compilation. Showing raw content.'),
+        React.createElement('pre', {
+          key: 'pre',
+          className: 'bg-gray-100 p-4 rounded text-sm overflow-auto'
+        }, c.source)
+      ]);
+    }
+  };
+
+  var sortedRenderers = [renderers.react, renderers.mdx, renderers.markdown, renderers.html];
+
+  window.__frontmcp.detectRenderer = function(content) {
+    if (content.type && renderers[content.type]) {
+      return renderers[content.type];
+    }
+    for (var i = 0; i < sortedRenderers.length; i++) {
+      if (sortedRenderers[i].canHandle(content)) {
+        return sortedRenderers[i];
+      }
+    }
+    return renderers.html;
+  };
+
+  window.__frontmcp.renderContent = function(content, context) {
+    var renderer = window.__frontmcp.detectRenderer(content);
+    return renderer.render(content, context);
+  };
+
+  window.__frontmcp.renderers = renderers;
+})();
+`;
+}
+function buildUIComponentsRuntime() {
+  return `
+// UI Components (Vendor)
+(function() {
+  window.Card = function(props) {
+    var children = props.children;
+    var title = props.title;
+    var className = props.className || '';
+    return React.createElement('div', {
+      className: 'bg-white rounded-lg shadow border border-gray-200 overflow-hidden ' + className
+    }, [
+      title && React.createElement('div', {
+        key: 'header',
+        className: 'px-4 py-3 border-b border-gray-200 bg-gray-50'
+      }, React.createElement('h3', { className: 'text-sm font-medium text-gray-900' }, title)),
+      React.createElement('div', { key: 'body', className: 'p-4' }, children)
+    ]);
+  };
+
+  window.Badge = function(props) {
+    var children = props.children;
+    var variant = props.variant || 'default';
+    var variantClasses = {
+      default: 'bg-gray-100 text-gray-800',
+      success: 'bg-green-100 text-green-800',
+      warning: 'bg-yellow-100 text-yellow-800',
+      error: 'bg-red-100 text-red-800',
+      info: 'bg-blue-100 text-blue-800'
+    };
+    return React.createElement('span', {
+      className: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ' + (variantClasses[variant] || variantClasses.default)
+    }, children);
+  };
+
+  window.Button = function(props) {
+    var children = props.children;
+    var variant = props.variant || 'primary';
+    var onClick = props.onClick;
+    var disabled = props.disabled;
+    var variantClasses = {
+      primary: 'bg-blue-600 text-white hover:bg-blue-700',
+      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
+      outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',
+      danger: 'bg-red-600 text-white hover:bg-red-700'
+    };
+    return React.createElement('button', {
+      className: 'px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ' +
+        (disabled ? 'opacity-50 cursor-not-allowed ' : '') +
+        (variantClasses[variant] || variantClasses.primary),
+      onClick: onClick,
+      disabled: disabled
+    }, children);
+  };
+
+  // Export to namespace
+  window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, {
+    useToolOutput: window.useToolOutput,
+    useToolInput: window.useToolInput,
+    useMcpBridgeContext: function() { return window.__frontmcp.context; },
+    useCallTool: function() { return function() { return Promise.resolve(null); }; },
+    Card: window.Card,
+    Badge: window.Badge,
+    Button: window.Button
+  });
+})();
+`;
+}
+function buildUniversalAppRuntime() {
+  return `
+// Universal App (Vendor)
+(function() {
+  var LoadingSpinner = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-loading flex items-center justify-center min-h-[200px]'
+    }, React.createElement('div', {
+      className: 'frontmcp-spinner w-6 h-6 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin'
+    }));
+  };
+
+  var ErrorDisplay = function(props) {
+    return React.createElement('div', {
+      className: 'frontmcp-error bg-red-50 border border-red-200 rounded-lg p-4 text-red-800'
+    }, [
+      React.createElement('div', { key: 'title', className: 'font-medium' }, 'Error'),
+      React.createElement('div', { key: 'msg', className: 'text-sm mt-1' }, props.error)
+    ]);
+  };
+
+  var EmptyState = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-empty text-gray-500 text-center py-8'
+    }, 'No content to display');
+  };
+
+  window.__frontmcp.UniversalApp = function(props) {
+    var state = window.useFrontMCPStore();
+
+    if (state.loading) {
+      return props.fallback || React.createElement(LoadingSpinner);
+    }
+
+    if (state.error) {
+      var ErrorComp = props.errorFallback || ErrorDisplay;
+      return React.createElement(ErrorComp, { error: state.error });
+    }
+
+    var content = props.content || state.content;
+
+    if (!content) {
+      return React.createElement(EmptyState);
+    }
+
+    var context = {
+      output: state.output,
+      input: state.input,
+      state: state,
+      components: props.components || {}
+    };
+
+    var rendered = window.__frontmcp.renderContent(content, context);
+    return React.createElement('div', { className: 'frontmcp-content' }, rendered);
+  };
+
+  window.__frontmcp.LoadingSpinner = LoadingSpinner;
+  window.__frontmcp.ErrorDisplay = ErrorDisplay;
+  window.__frontmcp.EmptyState = EmptyState;
+})();
+`;
+}
+function buildComponentWrapper() {
+  return `
+// Component Execution (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.COMPONENT_CODE}
+})();
+`;
+}
+function buildDataInjectionWrapper() {
+  return `
+// Data Injection (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.DATA_INJECTION}
+})();
+`;
+}
+function buildCustomComponentsWrapper() {
+  return `
+// Custom Components (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.CUSTOM_COMPONENTS}
+})();
+`;
+}
+function buildCdnImports(options) {
+  const parts = [];
+  if (options.cdnType === "esm") {
+    if (options.includeMarkdown) {
+      parts.push(`
+    <script type="module">
+      import ReactMarkdown from '${UNIVERSAL_CDN.esm.reactMarkdown}';
+      window.ReactMarkdown = ReactMarkdown;
+    </script>`);
+    }
+    if (options.includeMdx) {
+      parts.push(`
+    <script type="module">
+      import { MDXProvider } from '${UNIVERSAL_CDN.esm.mdxReact}';
+      window.MDXProvider = MDXProvider;
+    </script>`);
+    }
+  }
+  return parts.join("\n");
+}
+function getCachedRuntime(options, config = {}) {
+  const cacheKey = generateCacheKey(options);
+  const cacheConfig = { ...DEFAULT_CACHE_CONFIG, ...config };
+  const cached = runtimeCache.get(cacheKey);
+  if (cached) {
+    if (cacheConfig.ttl === 0 || Date.now() - cached.cachedAt < cacheConfig.ttl) {
+      return {
+        vendorScript: cached.script,
+        appTemplate: buildAppTemplate(),
+        cdnImports: cached.cdnImports,
+        vendorSize: cached.size,
+        cached: true,
+        cacheKey
+      };
+    }
+    runtimeCache.delete(cacheKey);
+  }
+  const vendorParts = [buildStoreRuntime(), buildRequireShim()];
+  if (options.cdnType === "umd" || options.includeMarkdown) {
+    vendorParts.push(buildInlineMarkdownParser(options));
+  }
+  vendorParts.push(buildRenderersRuntime(options));
+  vendorParts.push(buildUIComponentsRuntime());
+  vendorParts.push(buildUniversalAppRuntime());
+  let vendorScript = vendorParts.join("\n");
+  if (options.minify) {
+    vendorScript = minifyScript(vendorScript);
+  }
+  const cdnImports = buildCdnImports(options);
+  const entry = {
+    script: vendorScript,
+    cdnImports,
+    size: vendorScript.length,
+    cacheKey,
+    cachedAt: Date.now()
+  };
+  if (runtimeCache.size >= cacheConfig.maxEntries) {
+    const oldestKey = runtimeCache.keys().next().value;
+    if (oldestKey) {
+      runtimeCache.delete(oldestKey);
+    }
+  }
+  runtimeCache.set(cacheKey, entry);
+  return {
+    vendorScript,
+    appTemplate: buildAppTemplate(),
+    cdnImports,
+    vendorSize: vendorScript.length,
+    cached: false,
+    cacheKey
+  };
+}
+function buildAppTemplate() {
+  return [buildCustomComponentsWrapper(), buildComponentWrapper(), buildDataInjectionWrapper()].join("\n");
+}
+function minifyScript(script) {
+  return script.replace(/\/\/[^\n]*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
+}
+function buildAppScript(appTemplate, componentCode, dataInjection, customComponents = "") {
+  return appTemplate.replace(RUNTIME_PLACEHOLDERS.CUSTOM_COMPONENTS, customComponents || "// No custom components").replace(RUNTIME_PLACEHOLDERS.COMPONENT_CODE, componentCode || "// No component code").replace(RUNTIME_PLACEHOLDERS.DATA_INJECTION, dataInjection);
+}
+function buildDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  if (hasComponent) {
+    return `
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    content: {
+      type: 'react',
+      source: window.__frontmcp_component
+    },
+    loading: false,
+    error: null
+  });`;
+  }
+  return `
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    content: {
+      type: ${safeJson(contentType)},
+      source: ${safeJson(source)}
+    },
+    loading: false,
+    error: null
+  });`;
+}
+function buildComponentCode(transpiledCode) {
+  return `
+  // CommonJS module shim
+  var module = { exports: {} };
+  var exports = module.exports;
+
+  // Execute transpiled component
+  ${transpiledCode}
+
+  // Capture component
+  window.__frontmcp_component = module.exports.default || module.exports;`;
+}
+
+// libs/ui/src/bundler/bundler.ts
+var esbuildTransform = null;
+async function loadEsbuild() {
+  if (esbuildTransform !== null) {
+    return esbuildTransform;
+  }
+  try {
+    const esbuild = await import("esbuild");
+    esbuildTransform = esbuild.transform;
+    return esbuildTransform;
+  } catch {
+    try {
+      const swc = await import("@swc/core");
+      esbuildTransform = async (source, options) => {
+        const opts = options;
+        const result = await swc.transform(source, {
+          jsc: {
+            parser: {
+              syntax: "typescript",
+              tsx: opts.loader === "tsx" || opts.loader === "jsx"
+            },
+            transform: {
+              react: {
+                runtime: "automatic",
+                development: false
+              }
+            },
+            target: "es2020",
+            minify: opts.minify ? { compress: true, mangle: true } : void 0
+          },
+          module: {
+            type: "commonjs"
+          },
+          sourceMaps: opts.sourcemap ? true : false
+        });
+        return { code: result.code, map: result.map };
+      };
+      return esbuildTransform;
+    } catch {
+      console.warn(
+        "[@frontmcp/ui/bundler] Neither esbuild nor @swc/core available. Install esbuild for best performance: npm install esbuild"
+      );
+      return null;
+    }
+  }
+}
+function sanitizeRootId(rootId) {
+  const safeId = rootId.replace(/[^a-zA-Z0-9_-]/g, "");
+  if (safeId !== rootId) {
+    console.warn("[FrontMCP] rootId sanitized:", { original: rootId, sanitized: safeId });
+  }
+  return safeId || "frontmcp-root";
+}
+function sanitizeCss(css) {
+  return css.replace(/<\/style>/gi, "\\3c/style\\3e");
+}
+var InMemoryBundler = class {
+  cache;
+  options;
+  defaultSecurity;
+  constructor(options = {}) {
+    this.options = {
+      ...DEFAULT_BUNDLER_OPTIONS,
+      ...options,
+      cache: {
+        ...DEFAULT_BUNDLER_OPTIONS.cache,
+        ...options.cache
+      }
+    };
+    this.cache = new BundlerCache({
+      maxSize: this.options.cache.maxSize,
+      ttl: this.options.cache.ttl
+    });
+    this.defaultSecurity = mergePolicy(options.defaultSecurity);
+  }
+  /**
+   * Bundle source code.
+   *
+   * @param options - Bundle options
+   * @returns Bundle result
+   */
+  async bundle(options) {
+    const startTime = performance.now();
+    const opts = this.mergeOptions(options);
+    if (!opts.skipCache && !this.options.cache.disabled) {
+      const cacheKey = options.cacheKey ?? createCacheKey(options.source, opts);
+      const cached = this.cache.get(cacheKey);
+      if (cached) {
+        return {
+          ...cached,
+          cached: true,
+          metrics: {
+            ...cached.metrics,
+            cacheTime: performance.now() - startTime
+          }
+        };
+      }
+    }
+    const security = mergePolicy(options.security ?? this.defaultSecurity);
+    const violations = validateSource(options.source, security);
+    throwOnViolations(violations);
+    const sourceType = opts.sourceType === "auto" ? this.detectSourceType(options.source) : opts.sourceType;
+    const transformStart = performance.now();
+    const transformed = await this.transform(options.source, sourceType, opts);
+    const transformTime = performance.now() - transformStart;
+    const sizeViolation = validateSize(transformed.code.length, security);
+    if (sizeViolation) {
+      throwOnViolations([sizeViolation]);
+    }
+    const hash = hashContent(transformed.code);
+    const result = {
+      code: transformed.code,
+      hash,
+      cached: false,
+      size: transformed.code.length,
+      map: transformed.map,
+      metrics: {
+        transformTime,
+        bundleTime: 0,
+        // No separate bundle step for transform-only
+        totalTime: performance.now() - startTime
+      },
+      sourceType,
+      format: opts.format
+    };
+    if (!this.options.cache.disabled) {
+      const cacheKey = options.cacheKey ?? createCacheKey(options.source, opts);
+      this.cache.set(cacheKey, result);
+    }
+    return result;
+  }
+  /**
+   * Bundle and execute for SSR.
+   *
+   * @param options - SSR bundle options
+   * @returns SSR result with rendered HTML
+   */
+  async bundleSSR(options) {
+    const startTime = performance.now();
+    const bundleResult = await this.bundle({
+      ...options,
+      format: "cjs"
+      // CommonJS for execution
+    });
+    let React;
+    let ReactDOMServer;
+    try {
+      React = await import("react");
+      ReactDOMServer = await import("react-dom/server");
+    } catch {
+      throw new Error("React and react-dom/server are required for SSR. Install them: npm install react react-dom");
+    }
+    const renderStart = performance.now();
+    const Component = await executeDefault(bundleResult.code, {
+      React,
+      security: mergePolicy(options.security ?? this.defaultSecurity)
+    });
+    let html;
+    try {
+      const element = React.createElement(Component, options.context ?? {});
+      html = ReactDOMServer.renderToString(element);
+    } catch (error) {
+      throw new ExecutionError(
+        `SSR rendering failed: ${error instanceof Error ? error.message : String(error)}`,
+        error
+      );
+    }
+    const renderTime = performance.now() - renderStart;
+    let hydrationScript;
+    if (options.includeHydration) {
+      hydrationScript = this.buildHydrationScript(bundleResult.code, options.context);
+    }
+    return {
+      ...bundleResult,
+      html,
+      hydrationScript,
+      metrics: {
+        ...bundleResult.metrics,
+        totalTime: performance.now() - startTime
+      },
+      ssrMetrics: {
+        renderTime
+      }
+    };
+  }
+  /**
+   * Bundle and execute code, returning the exports.
+   *
+   * @param options - Bundle options
+   * @param context - Execution context
+   * @returns Exported value
+   */
+  async bundleAndExecute(options, context) {
+    const result = await this.bundle({
+      ...options,
+      format: "cjs"
+      // CommonJS for execution
+    });
+    let React;
+    try {
+      React = await import("react");
+    } catch {
+    }
+    return executeDefault(result.code, {
+      React,
+      globals: context,
+      security: mergePolicy(options.security ?? this.defaultSecurity)
+    });
+  }
+  /**
+   * Bundle a component to a self-contained static HTML document.
+   *
+   * Creates a complete HTML page with:
+   * - React runtime (CDN or inline based on platform)
+   * - FrontMCP UI hooks and components (always inline)
+   * - Tool data injection (input/output)
+   * - Transpiled component code
+   * - Client-side rendering via createRoot
+   *
+   * @param options - Static HTML options
+   * @returns Static HTML result with complete document
+   *
+   * @example
+   * ```typescript
+   * const result = await bundler.bundleToStaticHTML({
+   *   source: `
+   *     import { Card, useToolOutput } from '@frontmcp/ui/react';
+   *     export default function Weather() {
+   *       const output = useToolOutput();
+   *       return <Card title="Weather">{output?.temperature}°F</Card>;
+   *     }
+   *   `,
+   *   toolName: 'get_weather',
+   *   output: { temperature: 72 },
+   * });
+   *
+   * // result.html contains the complete HTML document
+   * ```
+   */
+  async bundleToStaticHTML(options) {
+    const startTime = performance.now();
+    const opts = this.mergeStaticHTMLOptions(options);
+    const platform = opts.targetPlatform === "auto" ? "generic" : opts.targetPlatform;
+    const cdnType = getCdnTypeForPlatform(platform);
+    if (opts.universal) {
+      return this.bundleToStaticHTMLUniversal(options, opts, platform, cdnType, startTime);
+    }
+    const bundleResult = await this.bundle({
+      source: options.source,
+      sourceType: opts.sourceType,
+      format: "cjs",
+      minify: opts.minify,
+      sourceMaps: false,
+      externals: ["react", "react-dom", "react/jsx-runtime", "@frontmcp/ui", "@frontmcp/ui/react"],
+      security: opts.security,
+      skipCache: opts.skipCache
+    });
+    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss });
+    const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+    const frontmcpRuntime = this.buildFrontMCPRuntime();
+    const dataScript = this.buildDataInjectionScript(opts.toolName, opts.input, opts.output, opts.structuredContent);
+    const componentScript = this.buildComponentRenderScript(bundleResult.code, opts.rootId, cdnType);
+    const html = this.assembleStaticHTML({
+      title: opts.title || `${opts.toolName} - Widget`,
+      head,
+      reactRuntime,
+      frontmcpRuntime,
+      dataScript,
+      componentScript,
+      rootId: opts.rootId,
+      cdnType
+    });
+    const hash = hashContent(html);
+    return {
+      html,
+      componentCode: bundleResult.code,
+      metrics: {
+        ...bundleResult.metrics,
+        totalTime: performance.now() - startTime
+      },
+      hash,
+      size: html.length,
+      cached: bundleResult.cached,
+      sourceType: bundleResult.sourceType,
+      targetPlatform: platform
+    };
+  }
+  /**
+   * Bundle to static HTML with universal rendering mode.
+   * Uses the universal renderer that can handle multiple content types.
+   *
+   * Optimization: Uses cached runtime (vendor chunk) to avoid rebuilding
+   * static code on every request. Only the user's component is transpiled.
+   */
+  async bundleToStaticHTMLUniversal(options, opts, platform, cdnType, startTime) {
+    let contentType;
+    const rawContentType = options.contentType ?? "auto";
+    if (rawContentType === "auto") {
+      contentType = detectContentType(options.source);
+    } else {
+      contentType = rawContentType;
+    }
+    let transpiledCode = null;
+    let transformTime = 0;
+    if (contentType === "react") {
+      const bundleResult = await this.bundle({
+        source: options.source,
+        sourceType: opts.sourceType,
+        format: "cjs",
+        minify: opts.minify,
+        sourceMaps: false,
+        externals: ["react", "react-dom", "react/jsx-runtime", "@frontmcp/ui", "@frontmcp/ui/react"],
+        security: opts.security,
+        skipCache: opts.skipCache
+      });
+      transpiledCode = bundleResult.code;
+      transformTime = bundleResult.metrics.transformTime;
+    }
+    const cachedRuntime = getCachedRuntime({
+      cdnType,
+      includeMarkdown: opts.includeMarkdown || contentType === "markdown",
+      includeMdx: opts.includeMdx || contentType === "mdx",
+      minify: opts.minify
+    });
+    const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : "";
+    const dataInjectionStr = buildDataInjectionCode(
+      opts.toolName,
+      opts.input,
+      opts.output,
+      opts.structuredContent,
+      contentType,
+      transpiledCode ? null : options.source,
+      // Pass source only if not a component
+      transpiledCode !== null
+    );
+    const appScript = buildAppScript(
+      cachedRuntime.appTemplate,
+      componentCodeStr,
+      dataInjectionStr,
+      opts.customComponents ?? ""
+    );
+    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss });
+    const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+    const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType);
+    const html = this.assembleUniversalStaticHTMLCached({
+      title: opts.title || `${opts.toolName} - Widget`,
+      head,
+      reactRuntime,
+      cdnImports: cachedRuntime.cdnImports,
+      vendorScript: cachedRuntime.vendorScript,
+      appScript,
+      renderScript,
+      rootId: opts.rootId,
+      cdnType
+    });
+    const hash = hashContent(html);
+    return {
+      html,
+      componentCode: transpiledCode ?? appScript,
+      metrics: {
+        transformTime,
+        bundleTime: 0,
+        totalTime: performance.now() - startTime,
+        cacheTime: cachedRuntime.cached ? 0 : void 0
+      },
+      hash,
+      size: html.length,
+      cached: cachedRuntime.cached,
+      sourceType: opts.sourceType === "auto" ? this.detectSourceType(options.source) : opts.sourceType,
+      targetPlatform: platform,
+      universal: true,
+      contentType
+    };
+  }
+  /**
+   * Assemble the complete universal static HTML document using cached runtime.
+   *
+   * For ESM mode (OpenAI), scripts must wait for React to load asynchronously.
+   * For UMD mode (Claude), scripts can execute synchronously.
+   */
+  assembleUniversalStaticHTMLCached(parts) {
+    if (parts.cdnType === "umd") {
+      return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.cdnImports}
+    <!-- Vendor Runtime (Cached) -->
+    <script>
+${parts.vendorScript}
+    </script>
+    <!-- App Script (User Component) -->
+    <script>
+${parts.appScript}
+    </script>
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    ${parts.renderScript}
+</body>
+</html>`;
+    } else {
+      return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.cdnImports}
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    <!-- Scripts wait for React to load (ESM is async) -->
+    <script type="module">
+      // Wait for React to be ready
+      function initFrontMCP() {
+        // Vendor Runtime (Cached)
+${parts.vendorScript}
+
+        // App Script (User Component)
+${parts.appScript}
+
+        // Render the app
+        var container = document.getElementById('${parts.rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot && window.__frontmcp.UniversalApp) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(window.__frontmcp.UniversalApp));
+        }
+      }
+
+      if (window.__reactReady) {
+        initFrontMCP();
+      } else {
+        window.addEventListener('react:ready', initFrontMCP);
+      }
+    </script>
+</body>
+</html>`;
+    }
+  }
+  /**
+   * Build the component script for transpiled React/MDX content.
+   * Wraps CommonJS code with module/exports shim to capture the component.
+   */
+  buildUniversalComponentScript(transpiledCode, cdnType) {
+    const wrappedCode = `
+        // CommonJS module shim
+        var module = { exports: {} };
+        var exports = module.exports;
+
+        // Execute transpiled component code (CommonJS format)
+        ${transpiledCode}
+
+        // Capture the component export
+        window.__frontmcp_component = module.exports.default || module.exports;
+    `;
+    if (cdnType === "umd") {
+      return `
+    <!-- Universal Component Script (transpiled) -->
+    <script>
+      (function() {
+        ${wrappedCode}
+      })();
+    </script>`;
+    } else {
+      return `
+    <!-- Universal Component Script (transpiled, ESM) -->
+    <script type="module">
+      function loadComponent() {
+        ${wrappedCode}
+      }
+
+      if (window.__reactReady) {
+        loadComponent();
+      } else {
+        window.addEventListener('react:ready', loadComponent);
+      }
+    </script>`;
+    }
+  }
+  /**
+   * Build the universal runtime script section.
+   */
+  buildUniversalRuntimeScript(runtimeScript) {
+    return `
+    <!-- Universal Runtime -->
+    <script>
+      ${runtimeScript}
+    </script>`;
+  }
+  /**
+   * Build data injection script for universal mode.
+   */
+  buildUniversalDataScript(toolName, input, output, structuredContent, contentType, source, hasTranspiledComponent = false) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    if (hasTranspiledComponent) {
+      return `
+    <!-- Universal Data Injection (React Component) -->
+    <script>
+      window.__frontmcp.setState({
+        toolName: ${safeJson(toolName)},
+        input: ${safeJson(input ?? null)},
+        output: ${safeJson(output ?? null)},
+        structuredContent: ${safeJson(structuredContent ?? null)},
+        content: {
+          type: 'react',
+          source: window.__frontmcp_component
+        },
+        loading: false,
+        error: null
+      });
+    </script>`;
+    }
+    const escapedSource = JSON.stringify(source);
+    return `
+    <!-- Universal Data Injection -->
+    <script>
+      window.__frontmcp.setState({
+        toolName: ${safeJson(toolName)},
+        input: ${safeJson(input ?? null)},
+        output: ${safeJson(output ?? null)},
+        structuredContent: ${safeJson(structuredContent ?? null)},
+        content: {
+          type: ${safeJson(contentType)},
+          source: ${escapedSource}
+        },
+        loading: false,
+        error: null
+      });
+    </script>`;
+  }
+  /**
+   * Build the universal render script.
+   */
+  buildUniversalRenderScript(rootId, cdnType) {
+    if (cdnType === "umd") {
+      return `
+    <!-- Universal Render Script (UMD - synchronous) -->
+    <script>
+      (function() {
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot && window.__frontmcp.UniversalApp) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(window.__frontmcp.UniversalApp));
+        } else if (container && window.ReactDOM && window.ReactDOM.render && window.__frontmcp.UniversalApp) {
+          window.ReactDOM.render(
+            React.createElement(window.__frontmcp.UniversalApp),
+            container
+          );
+        }
+      })();
+    </script>`;
+    } else {
+      return `
+    <!-- Universal Render Script (ESM - waits for React) -->
+    <script type="module">
+      function renderUniversalApp() {
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot && window.__frontmcp.UniversalApp) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(window.__frontmcp.UniversalApp));
+        }
+      }
+
+      if (window.__reactReady) {
+        renderUniversalApp();
+      } else {
+        window.addEventListener('react:ready', renderUniversalApp);
+      }
+    </script>`;
+    }
+  }
+  /**
+   * Assemble the complete universal static HTML document.
+   */
+  assembleUniversalStaticHTML(parts) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.frontmcpRuntime ?? ""}
+    ${parts.cdnImports}
+    ${parts.universalRuntimeScript}
+    ${parts.componentScript ?? ""}
+    ${parts.dataScript}
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    ${parts.renderScript}
+</body>
+</html>`;
+  }
+  /**
+   * Get cache statistics.
+   */
+  getCacheStats() {
+    return this.cache.getStats();
+  }
+  /**
+   * Clear the cache.
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+  /**
+   * Clean up expired cache entries.
+   */
+  cleanupCache() {
+    return this.cache.cleanup();
+  }
+  /**
+   * Transform source code using esbuild/SWC.
+   */
+  async transform(source, sourceType, options) {
+    const transform = await loadEsbuild();
+    if (!transform) {
+      throw new Error("No bundler available. Install esbuild or @swc/core: npm install esbuild");
+    }
+    const loader = this.getLoader(sourceType);
+    const esbuildOptions = {
+      loader,
+      minify: options.minify,
+      sourcemap: options.sourceMaps,
+      target: options.target,
+      format: options.format === "cjs" ? "cjs" : options.format === "esm" ? "esm" : "iife",
+      jsx: "automatic",
+      jsxImportSource: options.jsx.importSource
+    };
+    try {
+      const result = await transform(source, esbuildOptions);
+      return {
+        code: result.code,
+        map: result.map
+      };
+    } catch (error) {
+      throw new Error(`Transform failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  }
+  /**
+   * Get esbuild loader for source type.
+   */
+  getLoader(sourceType) {
+    switch (sourceType) {
+      case "jsx":
+        return "jsx";
+      case "tsx":
+        return "tsx";
+      case "mdx":
+        return "tsx";
+      // MDX compiles to JSX/TSX
+      case "html":
+        return "text";
+      default:
+        return "tsx";
+    }
+  }
+  /**
+   * Detect source type from content.
+   */
+  detectSourceType(source) {
+    const hasTypeScript = /:\s*(string|number|boolean|any|unknown|void|never|object)\b/.test(source) || /interface\s+\w+/.test(source) || /type\s+\w+\s*=/.test(source) || /<\w+>/.test(source);
+    const hasJSX = /<[A-Z][a-zA-Z]*/.test(source) || // Component tags
+    /<[a-z]+\s/.test(source) || // HTML tags with attributes
+    /<[a-z]+>/.test(source) || // Self-closing HTML tags
+    /<\/[a-z]+>/.test(source);
+    const hasMDX = /^#\s+/.test(source) || // Markdown heading
+    /^-\s+/.test(source) || // Markdown list
+    /\*\*\w+\*\*/.test(source) || // Bold
+    /```\w*\n/.test(source);
+    if (hasMDX && hasJSX) {
+      return "mdx";
+    }
+    if (hasTypeScript && hasJSX) {
+      return "tsx";
+    }
+    if (hasJSX) {
+      return "jsx";
+    }
+    if (hasTypeScript) {
+      return "tsx";
+    }
+    return "jsx";
+  }
+  /**
+   * Merge bundle options with defaults.
+   */
+  mergeOptions(options) {
+    return {
+      sourceType: options.sourceType ?? DEFAULT_BUNDLE_OPTIONS.sourceType,
+      format: options.format ?? DEFAULT_BUNDLE_OPTIONS.format,
+      minify: options.minify ?? DEFAULT_BUNDLE_OPTIONS.minify,
+      sourceMaps: options.sourceMaps ?? DEFAULT_BUNDLE_OPTIONS.sourceMaps,
+      externals: options.externals ?? DEFAULT_BUNDLE_OPTIONS.externals,
+      jsx: {
+        ...DEFAULT_BUNDLE_OPTIONS.jsx,
+        ...options.jsx
+      },
+      target: options.target ?? DEFAULT_BUNDLE_OPTIONS.target,
+      globalName: options.globalName ?? DEFAULT_BUNDLE_OPTIONS.globalName,
+      skipCache: options.skipCache ?? DEFAULT_BUNDLE_OPTIONS.skipCache
+    };
+  }
+  /**
+   * Build hydration script for client-side React.
+   */
+  buildHydrationScript(bundledCode, context) {
+    const contextJson = context ? JSON.stringify(context) : "{}";
+    return `
+(function() {
+  var context = ${contextJson};
+  var exports = {};
+  var module = { exports: exports };
+
+  // Execute bundled code
+  (function(exports, module) {
+    ${bundledCode}
+  })(exports, module);
+
+  // Get component
+  var Component = module.exports.default || module.exports;
+
+  // Hydrate
+  if (typeof ReactDOM !== 'undefined' && ReactDOM.hydrateRoot) {
+    var container = document.getElementById('root') || document.body.firstElementChild;
+    if (container) {
+      ReactDOM.hydrateRoot(container, React.createElement(Component, context));
+    }
+  }
+})();
+    `.trim();
+  }
+  // ============================================
+  // Static HTML Helper Methods
+  // ============================================
+  /**
+   * Merge static HTML options with defaults.
+   */
+  mergeStaticHTMLOptions(options) {
+    return {
+      sourceType: options.sourceType ?? DEFAULT_STATIC_HTML_OPTIONS.sourceType,
+      targetPlatform: options.targetPlatform ?? DEFAULT_STATIC_HTML_OPTIONS.targetPlatform,
+      minify: options.minify ?? DEFAULT_STATIC_HTML_OPTIONS.minify,
+      skipCache: options.skipCache ?? DEFAULT_STATIC_HTML_OPTIONS.skipCache,
+      rootId: sanitizeRootId(options.rootId ?? DEFAULT_STATIC_HTML_OPTIONS.rootId),
+      widgetAccessible: options.widgetAccessible ?? DEFAULT_STATIC_HTML_OPTIONS.widgetAccessible,
+      externals: {
+        ...DEFAULT_STATIC_HTML_OPTIONS.externals,
+        ...options.externals
+      },
+      // Universal mode options
+      universal: options.universal ?? DEFAULT_STATIC_HTML_OPTIONS.universal,
+      contentType: options.contentType ?? DEFAULT_STATIC_HTML_OPTIONS.contentType,
+      includeMarkdown: options.includeMarkdown ?? DEFAULT_STATIC_HTML_OPTIONS.includeMarkdown,
+      includeMdx: options.includeMdx ?? DEFAULT_STATIC_HTML_OPTIONS.includeMdx,
+      // Pass-through options
+      toolName: options.toolName,
+      input: options.input,
+      output: options.output,
+      structuredContent: options.structuredContent,
+      title: options.title,
+      security: options.security,
+      customCss: options.customCss,
+      customComponents: options.customComponents
+    };
+  }
+  /**
+   * Build the <head> section for static HTML.
+   */
+  buildStaticHTMLHead(opts) {
+    const parts = [];
+    parts.push(`<meta charset="UTF-8">`);
+    parts.push(`<meta name="viewport" content="width=device-width, initial-scale=1.0">`);
+    for (const url of STATIC_HTML_CDN.fonts.preconnect) {
+      parts.push(`<link rel="preconnect" href="${url}" crossorigin>`);
+    }
+    parts.push(`<link rel="stylesheet" href="${STATIC_HTML_CDN.fonts.inter}">`);
+    const tailwindConfig = opts.externals.tailwind ?? "cdn";
+    if (tailwindConfig === "cdn") {
+      parts.push(`<link rel="stylesheet" href="${STATIC_HTML_CDN.tailwind}">`);
+    } else if (tailwindConfig !== "inline" && tailwindConfig) {
+      parts.push(`<link rel="stylesheet" href="${tailwindConfig}">`);
+    }
+    parts.push(`<style>
+      body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+      .frontmcp-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
+      .frontmcp-spinner { width: 24px; height: 24px; border: 2px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
+      @keyframes spin { to { transform: rotate(360deg); } }
+    </style>`);
+    if (opts.customCss) {
+      parts.push(`<style>
+${sanitizeCss(opts.customCss)}
+    </style>`);
+    }
+    return parts.join("\n    ");
+  }
+  /**
+   * Build React runtime scripts for static HTML.
+   */
+  buildReactRuntimeScripts(externals, platform, cdnType) {
+    const reactConfig = externals.react ?? "cdn";
+    const reactDomConfig = externals.reactDom ?? "cdn";
+    if (cdnType === "umd") {
+      const reactUrl = reactConfig === "cdn" ? STATIC_HTML_CDN.umd.react : reactConfig;
+      const reactDomUrl = reactDomConfig === "cdn" ? STATIC_HTML_CDN.umd.reactDom : reactDomConfig;
+      return `
+    <!-- React Runtime (UMD from cdnjs - Claude compatible) -->
+    <script src="${reactUrl}"></script>
+    <script src="${reactDomUrl}"></script>
+    <script>
+      // Webpack/esbuild polyfills for transpiled code (UMD globals)
+      window.external_react_namespaceObject = window.React;
+      window.jsx_runtime_namespaceObject = {
+        jsx: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        jsxs: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        Fragment: React.Fragment
+      };
+      window.__reactReady = true;
+    </script>`;
+    } else {
+      const reactUrl = reactConfig === "cdn" ? STATIC_HTML_CDN.esm.react : reactConfig;
+      const reactDomUrl = reactDomConfig === "cdn" ? STATIC_HTML_CDN.esm.reactDom : reactDomConfig;
+      return `
+    <!-- React Runtime (ES modules from esm.sh) -->
+    <script type="module">
+      import React from '${reactUrl}';
+      import { createRoot } from '${reactDomUrl}';
+
+      // Make React available globally
+      window.React = React;
+      window.ReactDOM = { createRoot };
+
+      // Webpack/esbuild polyfills for transpiled code
+      window.external_react_namespaceObject = React;
+      window.jsx_runtime_namespaceObject = {
+        jsx: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        jsxs: function(type, props, key) {
+          if (key !== undefined) props = Object.assign({}, props, { key: key });
+          return React.createElement(type, props);
+        },
+        Fragment: React.Fragment
+      };
+
+      // Signal React is ready
+      window.__reactReady = true;
+      window.dispatchEvent(new CustomEvent('react:ready'));
+    </script>`;
+    }
+  }
+  /**
+   * Build FrontMCP runtime (hooks and UI components).
+   * Always inlined for reliability across platforms.
+   */
+  buildFrontMCPRuntime() {
+    return `
+    <!-- FrontMCP Runtime (always inline) -->
+    <script>
+      // Custom require() shim for browser - maps module names to globals
+      // This allows esbuild-transpiled code to work in browsers
+      window.__moduleCache = {};
+      window.require = function(moduleName) {
+        // Check cache first
+        if (window.__moduleCache[moduleName]) {
+          return window.__moduleCache[moduleName];
+        }
+
+        // Map module names to browser globals
+        var moduleMap = {
+          'react': function() { return window.React; },
+          'react-dom': function() { return window.ReactDOM; },
+          'react-dom/client': function() { return window.ReactDOM; },
+          'react/jsx-runtime': function() { return window.jsx_runtime_namespaceObject; },
+          'react/jsx-dev-runtime': function() { return window.jsx_runtime_namespaceObject; },
+          '@frontmcp/ui': function() { return window.react_namespaceObject; },
+          '@frontmcp/ui/react': function() { return window.react_namespaceObject; },
+        };
+
+        var resolver = moduleMap[moduleName];
+        if (resolver) {
+          var mod = resolver();
+          window.__moduleCache[moduleName] = mod;
+          return mod;
+        }
+
+        console.warn('[FrontMCP] Unknown module requested:', moduleName);
+        return {};
+      };
+
+      // Async require for dynamic imports (returns Promise)
+      window.requireAsync = function(moduleName) {
+        return new Promise(function(resolve, reject) {
+          // If module is already loaded, resolve immediately
+          var mod = window.require(moduleName);
+          if (mod && Object.keys(mod).length > 0) {
+            resolve(mod);
+            return;
+          }
+
+          // For now, we don't support dynamic CDN loading
+          // All required modules should be pre-loaded
+          console.warn('[FrontMCP] Async module not available:', moduleName);
+          resolve({});
+        });
+      };
+
+      // FrontMCP Hook implementations
+      window.__frontmcp = {
+        // Context for MCP bridge
+        context: {
+          toolName: null,
+          toolInput: null,
+          toolOutput: null,
+          structuredContent: null,
+          callTool: null,
+        },
+
+        // Set context from data injection
+        setContext: function(ctx) {
+          Object.assign(this.context, ctx);
+        },
+      };
+
+      // Hook: useToolOutput - returns the tool output data
+      window.useToolOutput = function() {
+        return window.__frontmcp.context.toolOutput;
+      };
+
+      // Hook: useToolInput - returns the tool input arguments
+      window.useToolInput = function() {
+        return window.__frontmcp.context.toolInput;
+      };
+
+      // Hook: useMcpBridgeContext - returns full bridge context
+      window.useMcpBridgeContext = function() {
+        return window.__frontmcp.context;
+      };
+
+      // Hook: useCallTool - returns function to call other tools
+      window.useCallTool = function() {
+        return function(name, args) {
+          if (window.__frontmcp.context.callTool) {
+            return window.__frontmcp.context.callTool(name, args);
+          }
+          console.warn('[FrontMCP] callTool not available - widget may not have tool access');
+          return Promise.resolve(null);
+        };
+      };
+
+      // UI Components (simplified inline versions)
+      window.Card = function(props) {
+        var children = props.children;
+        var title = props.title;
+        var className = props.className || '';
+        return React.createElement('div', {
+          className: 'bg-white rounded-lg shadow border border-gray-200 overflow-hidden ' + className
+        }, [
+          title && React.createElement('div', {
+            key: 'header',
+            className: 'px-4 py-3 border-b border-gray-200 bg-gray-50'
+          }, React.createElement('h3', { className: 'text-sm font-medium text-gray-900' }, title)),
+          React.createElement('div', { key: 'body', className: 'p-4' }, children)
+        ]);
+      };
+
+      window.Badge = function(props) {
+        var children = props.children;
+        var variant = props.variant || 'default';
+        var variantClasses = {
+          default: 'bg-gray-100 text-gray-800',
+          success: 'bg-green-100 text-green-800',
+          warning: 'bg-yellow-100 text-yellow-800',
+          error: 'bg-red-100 text-red-800',
+          info: 'bg-blue-100 text-blue-800',
+        };
+        return React.createElement('span', {
+          className: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ' + (variantClasses[variant] || variantClasses.default)
+        }, children);
+      };
+
+      window.Button = function(props) {
+        var children = props.children;
+        var variant = props.variant || 'primary';
+        var onClick = props.onClick;
+        var disabled = props.disabled;
+        var variantClasses = {
+          primary: 'bg-blue-600 text-white hover:bg-blue-700',
+          secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
+          outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',
+          danger: 'bg-red-600 text-white hover:bg-red-700',
+        };
+        return React.createElement('button', {
+          className: 'px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ' +
+            (disabled ? 'opacity-50 cursor-not-allowed ' : '') +
+            (variantClasses[variant] || variantClasses.primary),
+          onClick: onClick,
+          disabled: disabled,
+        }, children);
+      };
+
+      // Make hooks available on react_namespaceObject for bundled imports
+      window.react_namespaceObject = Object.assign({}, window.React || {}, {
+        useToolOutput: window.useToolOutput,
+        useToolInput: window.useToolInput,
+        useMcpBridgeContext: window.useMcpBridgeContext,
+        useCallTool: window.useCallTool,
+        Card: window.Card,
+        Badge: window.Badge,
+        Button: window.Button,
+      });
+    </script>`;
+  }
+  /**
+   * Build data injection script for tool input/output.
+   */
+  buildDataInjectionScript(toolName, input, output, structuredContent) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    return `
+    <!-- Tool Data Injection -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = ${safeJson(input ?? null)};
+      window.__mcpToolOutput = ${safeJson(output ?? null)};
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+
+      // Initialize FrontMCP context
+      window.__frontmcp.setContext({
+        toolName: window.__mcpToolName,
+        toolInput: window.__mcpToolInput,
+        toolOutput: window.__mcpToolOutput,
+        structuredContent: window.__mcpStructuredContent,
+      });
+    </script>`;
+  }
+  /**
+   * Build component render script.
+   * Wraps CommonJS code with module/exports shim to capture the component.
+   */
+  buildComponentRenderScript(componentCode, rootId, cdnType) {
+    const wrappedCode = `
+        // CommonJS module shim
+        var module = { exports: {} };
+        var exports = module.exports;
+
+        // Execute transpiled component code (CommonJS format)
+        ${componentCode}
+
+        // Capture the component export
+        window.__frontmcp_component = module.exports;
+    `;
+    if (cdnType === "umd") {
+      return `
+    <!-- Component Render Script (UMD - synchronous) -->
+    <script>
+      (function() {
+        ${wrappedCode}
+
+        // Get the component
+        var Component = window.__frontmcp_component.default || window.__frontmcp_component;
+
+        // Render the component
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(Component, {
+            output: window.__mcpToolOutput,
+            input: window.__mcpToolInput,
+          }));
+        } else if (container && window.ReactDOM && window.ReactDOM.render) {
+          // Fallback for React 17
+          window.ReactDOM.render(
+            React.createElement(Component, {
+              output: window.__mcpToolOutput,
+              input: window.__mcpToolInput,
+            }),
+            container
+          );
+        }
+      })();
+    </script>`;
+    } else {
+      return `
+    <!-- Component Render Script (ESM - waits for React) -->
+    <script type="module">
+      function renderComponent() {
+        ${wrappedCode}
+
+        // Get the component
+        var Component = window.__frontmcp_component.default || window.__frontmcp_component;
+
+        // Render the component
+        var container = document.getElementById('${rootId}');
+        if (container && window.ReactDOM && window.ReactDOM.createRoot) {
+          var root = window.ReactDOM.createRoot(container);
+          root.render(React.createElement(Component, {
+            output: window.__mcpToolOutput,
+            input: window.__mcpToolInput,
+          }));
+        }
+      }
+
+      // Wait for React to be ready
+      if (window.__reactReady) {
+        renderComponent();
+      } else {
+        window.addEventListener('react:ready', renderComponent);
+      }
+    </script>`;
+    }
+  }
+  /**
+   * Assemble the complete static HTML document.
+   */
+  assembleStaticHTML(parts) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>${escapeHtml(parts.title)}</title>
+    ${parts.head}
+    ${parts.reactRuntime}
+    ${parts.frontmcpRuntime}
+    ${parts.dataScript}
+</head>
+<body>
+    <div id="${parts.rootId}" class="frontmcp-loading">
+        <div class="frontmcp-spinner"></div>
+    </div>
+    ${parts.componentScript}
+</body>
+</html>`;
+  }
+};
+function createBundler(options) {
+  return new InMemoryBundler(options);
+}
+
+// libs/ui/src/bundler/file-cache/storage/index.ts
+init_interface();
+init_filesystem();
+init_redis();
+
+// libs/ui/src/bundler/file-cache/hash-calculator.ts
+import { createHash as createHash2 } from "crypto";
+import { readFile as readFile2 } from "fs/promises";
+import { existsSync as existsSync2 } from "fs";
+import { join as join2, dirname as dirname2, resolve } from "path";
+function sha256(content) {
+  return createHash2("sha256").update(content, "utf8").digest("hex");
+}
+function sha256Buffer(buffer) {
+  return createHash2("sha256").update(buffer).digest("hex");
+}
+async function hashFile(filePath) {
+  try {
+    const content = await readFile2(filePath);
+    return sha256Buffer(content);
+  } catch {
+    return void 0;
+  }
+}
+async function hashFiles(filePaths) {
+  const hashes = [];
+  for (const filePath of filePaths.sort()) {
+    const hash = await hashFile(filePath);
+    if (hash) {
+      hashes.push(`${filePath}:${hash}`);
+    }
+  }
+  return sha256(hashes.join("\n"));
+}
+async function calculateComponentHash(options) {
+  const {
+    entryPath,
+    baseDir = dirname2(entryPath),
+    externals = [],
+    dependencies = {},
+    bundleOptions = {},
+    maxDepth = 10
+  } = options;
+  const absoluteEntryPath = resolve(entryPath);
+  const files = /* @__PURE__ */ new Set();
+  const fileHashes = {};
+  await collectLocalDependencies(absoluteEntryPath, baseDir, files, maxDepth, 0);
+  for (const file of files) {
+    const hash = await hashFile(file);
+    if (hash) {
+      fileHashes[file] = hash;
+    }
+  }
+  const sortedFiles = Array.from(files).sort();
+  const fileHashContent = sortedFiles.map((f) => `${f}:${fileHashes[f] || "missing"}`).join("\n");
+  const filesHash = sha256(fileHashContent);
+  const optionsHash = sha256(JSON.stringify(sortedObject(bundleOptions)));
+  const dependenciesHash = sha256(JSON.stringify(sortedObject(dependencies)));
+  const combinedHash = sha256([filesHash, optionsHash, dependenciesHash].join(":"));
+  return {
+    hash: combinedHash,
+    entryHash: fileHashes[absoluteEntryPath] || "",
+    files: sortedFiles,
+    fileHashes,
+    optionsHash,
+    dependenciesHash
+  };
+}
+async function calculateQuickHash(entryPath, bundleOptions) {
+  const entryHash = await hashFile(entryPath);
+  const optionsHash = bundleOptions ? sha256(JSON.stringify(sortedObject(bundleOptions))) : "";
+  return sha256(`${entryHash || "missing"}:${optionsHash}`);
+}
+async function collectLocalDependencies(filePath, baseDir, collected, maxDepth, currentDepth) {
+  if (currentDepth >= maxDepth) return;
+  if (collected.has(filePath)) return;
+  if (!existsSync2(filePath)) return;
+  collected.add(filePath);
+  try {
+    const content = await readFile2(filePath, "utf8");
+    const imports = extractImportPaths(content);
+    for (const importPath of imports) {
+      if (!importPath.startsWith(".") && !importPath.startsWith("/")) {
+        continue;
+      }
+      const resolvedPath = resolveImportPath(importPath, dirname2(filePath));
+      if (resolvedPath && existsSync2(resolvedPath)) {
+        await collectLocalDependencies(resolvedPath, baseDir, collected, maxDepth, currentDepth + 1);
+      }
+    }
+  } catch {
+  }
+}
+function extractImportPaths(source) {
+  const paths = [];
+  const importRegex = /import\s+(?:[^'"]+\s+from\s+)?['"]([^'"]+)['"]/g;
+  let match;
+  while ((match = importRegex.exec(source)) !== null) {
+    paths.push(match[1]);
+  }
+  const exportRegex = /export\s+(?:\*|{[^}]+})\s+from\s+['"]([^'"]+)['"]/g;
+  while ((match = exportRegex.exec(source)) !== null) {
+    paths.push(match[1]);
+  }
+  const requireRegex = /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+  while ((match = requireRegex.exec(source)) !== null) {
+    paths.push(match[1]);
+  }
+  const dynamicRegex = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+  while ((match = dynamicRegex.exec(source)) !== null) {
+    paths.push(match[1]);
+  }
+  return [...new Set(paths)];
+}
+function resolveImportPath(importPath, fromDir) {
+  const extensions = ["", ".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"];
+  for (const ext of extensions) {
+    const fullPath = join2(fromDir, importPath + ext);
+    if (existsSync2(fullPath)) {
+      return fullPath;
+    }
+  }
+  for (const ext of extensions) {
+    const indexPath = join2(fromDir, importPath, `index${ext}`);
+    if (existsSync2(indexPath)) {
+      return indexPath;
+    }
+  }
+  return void 0;
+}
+function sortedObject(obj) {
+  const sorted = {};
+  const keys = Object.keys(obj).sort();
+  for (const key of keys) {
+    const value = obj[key];
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      sorted[key] = sortedObject(value);
+    } else {
+      sorted[key] = value;
+    }
+  }
+  return sorted;
+}
+function generateBuildId() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `${timestamp}-${random}`;
+}
+function buildIdFromHash(hash) {
+  return hash.substring(0, 12);
+}
+
+// libs/ui/src/bundler/file-cache/component-builder.ts
+import { readFile as readFile3 } from "fs/promises";
+import { existsSync as existsSync3 } from "fs";
+import { resolve as resolve2, extname } from "path";
+import { randomUUID } from "crypto";
+import { DependencyResolver, createImportMap, generateDependencyHTML } from "@frontmcp/uipack/dependency";
+var ComponentBuilder = class {
+  storage;
+  esbuild = null;
+  constructor(storage) {
+    this.storage = storage;
+  }
+  /**
+   * Build a component from a file path.
+   */
+  async build(options) {
+    const startTime = performance.now();
+    const {
+      entryPath,
+      toolName,
+      externals = [],
+      dependencies = {},
+      bundleOptions = {},
+      platform = "unknown",
+      skipCache = false,
+      ssr = false,
+      ssrContext = {},
+      executeCode: executeCode3
+    } = options;
+    const absoluteEntryPath = resolve2(entryPath);
+    if (!existsSync3(absoluteEntryPath)) {
+      throw new Error(`Entry file not found: ${absoluteEntryPath}`);
+    }
+    const hashResult = await calculateComponentHash({
+      entryPath: absoluteEntryPath,
+      externals,
+      dependencies,
+      bundleOptions
+    });
+    if (!skipCache) {
+      const cached = await this.storage.get(hashResult.hash);
+      if (cached) {
+        return {
+          manifest: cached,
+          cached: true,
+          buildTimeMs: performance.now() - startTime
+        };
+      }
+    }
+    const source = await readFile3(absoluteEntryPath, "utf8");
+    const resolver = new DependencyResolver({ platform });
+    const resolvedDeps = [];
+    for (const pkg of externals) {
+      try {
+        const override = dependencies[pkg];
+        const resolved = resolver.resolve(pkg, override);
+        if (resolved) {
+          resolvedDeps.push(resolved);
+        }
+      } catch (error) {
+        console.warn(`Failed to resolve external "${pkg}": ${error}`);
+      }
+    }
+    const allExternals = new Set(externals);
+    for (const dep of resolvedDeps) {
+      const entry = resolver.getRegistry()[dep.packageName];
+      if (entry?.providers) {
+        const providerConfig = Object.values(entry.providers)[0];
+        if (providerConfig?.peerDependencies) {
+          for (const peer of providerConfig.peerDependencies) {
+            if (!allExternals.has(peer)) {
+              allExternals.add(peer);
+              try {
+                const peerOverride = dependencies[peer];
+                const resolved = resolver.resolve(peer, peerOverride);
+                if (resolved) {
+                  resolvedDeps.push(resolved);
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    }
+    const importMap = createImportMap(resolvedDeps);
+    const bundleResult = await this.bundleComponent({
+      source,
+      entryPath: absoluteEntryPath,
+      externals: Array.from(allExternals),
+      bundleOptions
+    });
+    let ssrHtml;
+    if (ssr) {
+      ssrHtml = await this.renderSSR(bundleResult.code, ssrContext, resolvedDeps, executeCode3);
+    }
+    const manifest = {
+      version: "1.0",
+      buildId: randomUUID(),
+      toolName,
+      entryPath: absoluteEntryPath,
+      contentHash: hashResult.hash,
+      dependencies: resolvedDeps,
+      outputs: {
+        code: bundleResult.code,
+        sourceMap: bundleResult.map,
+        ssrHtml
+      },
+      importMap,
+      metadata: {
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        buildTimeMs: performance.now() - startTime,
+        totalSize: Buffer.byteLength(bundleResult.code, "utf8"),
+        bundlerVersion: bundleResult.bundlerVersion
+      }
+    };
+    await this.storage.set(hashResult.hash, manifest);
+    return {
+      manifest,
+      cached: false,
+      buildTimeMs: performance.now() - startTime
+    };
+  }
+  /**
+   * Build multiple components.
+   */
+  async buildMany(options) {
+    return Promise.all(options.map((opt) => this.build(opt)));
+  }
+  /**
+   * Check if a component needs rebuilding.
+   */
+  async needsRebuild(options) {
+    const absoluteEntryPath = resolve2(options.entryPath);
+    const hashResult = await calculateComponentHash({
+      entryPath: absoluteEntryPath,
+      externals: options.externals,
+      dependencies: options.dependencies,
+      bundleOptions: options.bundleOptions
+    });
+    const cached = await this.storage.has(hashResult.hash);
+    return !cached;
+  }
+  /**
+   * Get a cached build if it exists.
+   */
+  async getCached(options) {
+    const absoluteEntryPath = resolve2(options.entryPath);
+    const hashResult = await calculateComponentHash({
+      entryPath: absoluteEntryPath,
+      externals: options.externals,
+      dependencies: options.dependencies,
+      bundleOptions: options.bundleOptions
+    });
+    return this.storage.get(hashResult.hash);
+  }
+  /**
+   * Invalidate a cached build.
+   */
+  async invalidate(contentHash) {
+    return this.storage.delete(contentHash);
+  }
+  /**
+   * Generate complete HTML for a built component.
+   */
+  generateHTML(manifest, minify = false) {
+    const parts = [];
+    const dependencyHtml = generateDependencyHTML(manifest.dependencies, { minify });
+    parts.push(dependencyHtml);
+    parts.push(`<script type="module">${manifest.outputs.code}</script>`);
+    return parts.join(minify ? "" : "\n");
+  }
+  /**
+   * Bundle a component using esbuild.
+   */
+  async bundleComponent(options) {
+    const { source, entryPath, externals, bundleOptions } = options;
+    if (!this.esbuild) {
+      try {
+        this.esbuild = await import("esbuild");
+      } catch {
+        throw new Error("esbuild is required for component building. Install with: npm install esbuild");
+      }
+    }
+    const ext = extname(entryPath).toLowerCase();
+    const loader = ext === ".tsx" ? "tsx" : ext === ".ts" ? "ts" : ext === ".jsx" ? "jsx" : "js";
+    try {
+      const result = await this.esbuild.transform(source, {
+        loader,
+        format: "esm",
+        minify: bundleOptions.minify ?? process.env["NODE_ENV"] === "production",
+        sourcemap: bundleOptions.sourceMaps ? "inline" : false,
+        target: bundleOptions.target ?? "es2020",
+        treeShaking: bundleOptions.treeShake ?? true,
+        jsx: "automatic",
+        jsxImportSource: bundleOptions.jsxImportSource ?? "react",
+        // Mark externals for later import map resolution
+        banner: externals.length > 0 ? `/* externals: ${externals.join(", ")} */` : void 0
+      });
+      return {
+        code: result.code,
+        map: result.map || void 0,
+        bundlerVersion: this.esbuild.version
+      };
+    } catch (error) {
+      throw new Error(`Bundle failed for ${entryPath}: ${error}`);
+    }
+  }
+  /**
+   * Perform server-side rendering.
+   */
+  async renderSSR(code, context, dependencies, executeCode3) {
+    const hasReact = dependencies.some((d) => d.packageName === "react");
+    if (!hasReact) {
+      console.warn("SSR requires React as an external dependency");
+      return void 0;
+    }
+    try {
+      const React = await import("react");
+      const ReactDOMServer = await import("react-dom/server");
+      const exports = {};
+      const module = { exports };
+      if (executeCode3) {
+        executeCode3(code, exports, module, React);
+      } else {
+        const fn = new Function("exports", "module", "React", code);
+        fn(exports, module, React);
+      }
+      const Component = module.exports.default || module.exports;
+      if (typeof Component !== "function") {
+        console.warn("SSR: No default component export found");
+        return void 0;
+      }
+      const element = React.createElement(Component, context);
+      return ReactDOMServer.renderToString(element);
+    } catch (error) {
+      console.warn(`SSR failed: ${error}`);
+      return void 0;
+    }
+  }
+};
+async function createFilesystemBuilder(cacheDir = ".frontmcp-cache/builds") {
+  const { FilesystemStorage: FilesystemStorage2 } = await Promise.resolve().then(() => (init_filesystem(), filesystem_exports));
+  const storage = new FilesystemStorage2({ cacheDir });
+  await storage.initialize();
+  return new ComponentBuilder(storage);
+}
+async function createRedisBuilder(redisClient, keyPrefix = "frontmcp:ui:build:") {
+  const { RedisStorage: RedisStorage2 } = await Promise.resolve().then(() => (init_redis(), redis_exports));
+  const storage = new RedisStorage2({
+    client: redisClient,
+    keyPrefix
+  });
+  await storage.initialize();
+  return new ComponentBuilder(storage);
+}
+export {
+  BundlerCache,
+  ComponentBuilder,
+  DEFAULT_BUNDLER_OPTIONS,
+  DEFAULT_BUNDLE_OPTIONS,
+  DEFAULT_SECURITY_POLICY,
+  DEFAULT_STATIC_HTML_OPTIONS,
+  DEFAULT_STORAGE_OPTIONS,
+  ExecutionError,
+  FilesystemStorage,
+  InMemoryBundler,
+  RedisStorage,
+  STATIC_HTML_CDN,
+  SecurityError,
+  buildIdFromHash,
+  calculateComponentHash,
+  calculateManifestSize,
+  calculateQuickHash,
+  createBundler,
+  createCacheKey,
+  createFilesystemBuilder,
+  createFilesystemStorage,
+  createRedisBuilder,
+  createRedisStorage,
+  executeCode,
+  executeDefault,
+  generateBuildId,
+  getCdnTypeForPlatform,
+  hashContent,
+  hashFile,
+  hashFiles,
+  isExecutionError,
+  mergePolicy,
+  sha256,
+  sha256Buffer,
+  throwOnViolations,
+  validateImports,
+  validateSize,
+  validateSource
+};