@frontmcp/ui 0.6.1 → 0.6.2

package/bundler/index.js

@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,678 +27,56 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// 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
-});
-function createFilesystemStorage(options) {
-  return new FilesystemStorage(options);
-}
-var import_promises, import_path, import_fs, import_crypto, CacheInitializationError, CacheOperationError, StorageNotInitializedError, DEFAULT_FS_OPTIONS, FilesystemStorage;
-var init_filesystem = __esm({
-  "libs/ui/src/bundler/file-cache/storage/filesystem.ts"() {
-    "use strict";
-    import_promises = require("fs/promises");
-    import_path = require("path");
-    import_fs = require("fs");
-    import_crypto = require("crypto");
-    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 (0, import_promises.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 (!(0, import_fs.existsSync)(filePath)) {
-            this.stats.misses++;
-            this.updateHitRate();
-            return void 0;
-          }
-          const content = await (0, import_promises.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 (!(0, import_fs.existsSync)(filePath)) return false;
-          const content = await (0, import_promises.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 (!(0, import_fs.existsSync)(filePath)) return false;
-          const content = await (0, import_promises.readFile)(filePath, "utf8");
-          const entry = JSON.parse(content);
-          await (0, import_promises.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 (0, import_promises.rm)(this.options.cacheDir, { recursive: true, force: true });
-          await (0, import_promises.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 (0, import_promises.readdir)(this.options.cacheDir);
-          for (const file of files) {
-            if (!file.endsWith(this.options.extension)) continue;
-            const filePath = (0, import_path.join)(this.options.cacheDir, file);
-            try {
-              const content = await (0, import_promises.readFile)(filePath, "utf8");
-              const entry = JSON.parse(content);
-              if (Date.now() > entry.metadata.expiresAt) {
-                await (0, import_promises.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 (0, import_promises.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 = (0, import_crypto.createHash)("sha256").update(key).digest("hex").slice(0, 16);
-        return (0, import_path.join)(this.options.cacheDir, `${hash}${this.options.extension}`);
-      }
-      /**
-       * Write a cache entry to disk.
-       */
-      async writeEntry(filePath, entry) {
-        await (0, import_promises.mkdir)((0, import_path.dirname)(filePath), { recursive: true });
-        await (0, import_promises.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 (0, import_promises.readdir)(this.options.cacheDir);
-          let entries = 0;
-          let totalSize = 0;
-          for (const file of files) {
-            if (!file.endsWith(this.options.extension)) continue;
-            const filePath = (0, import_path.join)(this.options.cacheDir, file);
-            try {
-              const content = await (0, import_promises.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 (0, import_promises.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 = (0, import_path.join)(this.options.cacheDir, file);
-            try {
-              const content = await (0, import_promises.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 (0, import_promises.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/index.ts
 var bundler_exports = {};
 __export(bundler_exports, {
-  BundlerCache: () => BundlerCache,
-  ComponentBuilder: () => ComponentBuilder,
+  ALL_PLATFORMS: () => ALL_PLATFORMS,
+  BundlerCache: () => import_bundler4.BundlerCache,
+  ComponentBuilder: () => import_bundler7.ComponentBuilder,
   DEFAULT_BUNDLER_OPTIONS: () => DEFAULT_BUNDLER_OPTIONS,
   DEFAULT_BUNDLE_OPTIONS: () => DEFAULT_BUNDLE_OPTIONS,
   DEFAULT_SECURITY_POLICY: () => DEFAULT_SECURITY_POLICY,
   DEFAULT_STATIC_HTML_OPTIONS: () => DEFAULT_STATIC_HTML_OPTIONS,
-  DEFAULT_STORAGE_OPTIONS: () => DEFAULT_STORAGE_OPTIONS,
-  ExecutionError: () => ExecutionError,
-  FilesystemStorage: () => FilesystemStorage,
+  DEFAULT_STORAGE_OPTIONS: () => import_bundler7.DEFAULT_STORAGE_OPTIONS,
+  ExecutionError: () => import_bundler2.ExecutionError,
+  FilesystemStorage: () => import_bundler7.FilesystemStorage,
+  HYBRID_DATA_PLACEHOLDER: () => HYBRID_DATA_PLACEHOLDER,
+  HYBRID_INPUT_PLACEHOLDER: () => HYBRID_INPUT_PLACEHOLDER,
   InMemoryBundler: () => InMemoryBundler,
-  RedisStorage: () => RedisStorage,
+  RedisStorage: () => import_bundler7.RedisStorage,
   STATIC_HTML_CDN: () => STATIC_HTML_CDN,
-  SecurityError: () => SecurityError,
-  buildIdFromHash: () => buildIdFromHash,
-  calculateComponentHash: () => calculateComponentHash,
-  calculateManifestSize: () => calculateManifestSize,
-  calculateQuickHash: () => calculateQuickHash,
+  SecurityError: () => import_bundler2.SecurityError,
+  buildIdFromHash: () => import_bundler7.buildIdFromHash,
+  calculateComponentHash: () => import_bundler7.calculateComponentHash,
+  calculateManifestSize: () => import_bundler7.calculateManifestSize,
+  calculateQuickHash: () => import_bundler7.calculateQuickHash,
   createBundler: () => createBundler,
-  createCacheKey: () => createCacheKey,
-  createFilesystemBuilder: () => createFilesystemBuilder,
-  createFilesystemStorage: () => createFilesystemStorage,
-  createRedisBuilder: () => createRedisBuilder,
-  createRedisStorage: () => createRedisStorage,
-  executeCode: () => executeCode,
-  executeDefault: () => executeDefault,
-  generateBuildId: () => generateBuildId,
+  createCacheKey: () => import_bundler4.createCacheKey,
+  createFilesystemBuilder: () => import_bundler7.createFilesystemBuilder,
+  createFilesystemStorage: () => import_bundler7.createFilesystemStorage,
+  createRedisBuilder: () => import_bundler7.createRedisBuilder,
+  createRedisStorage: () => import_bundler7.createRedisStorage,
+  executeCode: () => import_bundler6.executeCode,
+  executeDefault: () => import_bundler6.executeDefault,
+  generateBuildId: () => import_bundler7.generateBuildId,
   getCdnTypeForPlatform: () => getCdnTypeForPlatform,
-  hashContent: () => hashContent,
-  hashFile: () => hashFile,
-  hashFiles: () => hashFiles,
-  isExecutionError: () => isExecutionError,
-  mergePolicy: () => mergePolicy,
-  sha256: () => sha256,
-  sha256Buffer: () => sha256Buffer,
-  throwOnViolations: () => throwOnViolations,
-  validateImports: () => validateImports,
-  validateSize: () => validateSize,
-  validateSource: () => validateSource
+  hashContent: () => import_bundler4.hashContent,
+  hashFile: () => import_bundler7.hashFile,
+  hashFiles: () => import_bundler7.hashFiles,
+  isExecutionError: () => import_bundler6.isExecutionError,
+  mergePolicy: () => import_bundler5.mergePolicy,
+  sha256: () => import_bundler7.sha256,
+  sha256Buffer: () => import_bundler7.sha256Buffer,
+  throwOnViolations: () => import_bundler5.throwOnViolations,
+  validateImports: () => import_bundler5.validateImports,
+  validateSize: () => import_bundler5.validateSize,
+  validateSource: () => import_bundler5.validateSource
 });
 module.exports = __toCommonJS(bundler_exports);
 
 // libs/ui/src/bundler/types.ts
+var HYBRID_DATA_PLACEHOLDER = "__FRONTMCP_OUTPUT_PLACEHOLDER__";
+var HYBRID_INPUT_PLACEHOLDER = "__FRONTMCP_INPUT_PLACEHOLDER__";
 var DEFAULT_SECURITY_POLICY = {
   allowedImports: [/^react$/, /^react-dom$/, /^react\/jsx-runtime$/, /^react\/jsx-dev-runtime$/, /^@frontmcp\/ui/],
   blockedImports: [
@@ -814,6 +189,13 @@ var DEFAULT_BUNDLER_OPTIONS = {
   verbose: false,
   esbuildOptions: {}
 };
+var ALL_PLATFORMS = [
+  "openai",
+  "claude",
+  "cursor",
+  "ext-apps",
+  "generic"
+];
 var STATIC_HTML_CDN = {
   /**
    * ES modules from esm.sh (React 19, modern platforms)
@@ -829,635 +211,44 @@ var STATIC_HTML_CDN = {
     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
-var import_enclave_vm = require("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 import_enclave_vm.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;
-    }
+    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
   }
 };
-function isExecutionError(error) {
-  return error instanceof ExecutionError;
+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,
+  // Build mode defaults
+  buildMode: "static"
+};
 
 // libs/ui/src/bundler/bundler.ts
+var import_adapters = require("@frontmcp/uipack/adapters");
+var import_theme = require("@frontmcp/uipack/theme");
+var import_bundler = require("@frontmcp/uipack/bundler");
 var import_utils = require("@frontmcp/uipack/utils");
 
 // libs/ui/src/universal/types.ts
@@ -1497,6 +288,8 @@ function detectContentType(source) {
 }
 
 // libs/ui/src/universal/cached-runtime.ts
+var import_runtime = require("@frontmcp/uipack/runtime");
+var import_build = require("@frontmcp/uipack/build");
 var RUNTIME_PLACEHOLDERS = {
   /** Placeholder for transpiled component code */
   COMPONENT_CODE: "/*__FRONTMCP_COMPONENT_CODE__*/",
@@ -1522,6 +315,7 @@ function generateCacheKey(options) {
     options.includeMarkdown ? "md" : "",
     options.includeMdx ? "mdx" : "",
     options.minify ? "min" : "",
+    options.includeBridge ? "bridge" : "",
     securityKey
   ].filter(Boolean).join(":");
 }
@@ -1565,6 +359,17 @@ function buildStoreRuntime() {
     context: state,
     setContext: function(ctx) {
       this.setState(ctx);
+    },
+    // Dynamic mode: update output and re-render
+    updateOutput: function(output) {
+      this.setState({ output: output, loading: false });
+      // Also update the global window variable for compatibility
+      window.__mcpToolOutput = output;
+    },
+    // Dynamic mode: update input and re-render
+    updateInput: function(input) {
+      this.setState({ input: input });
+      window.__mcpToolInput = input;
     }
   };
 
@@ -1589,6 +394,32 @@ function buildStoreRuntime() {
   window.useContent = function() {
     return window.useFrontMCPStore().content;
   };
+
+  // Connect to MCP Bridge for platform data detection
+  function initFromBridge() {
+    // Check for data from mcpBridge (handles OpenAI, ext-apps, etc.)
+    if (window.mcpBridge && window.mcpBridge.toolOutput != null) {
+      window.__frontmcp.setState({
+        output: window.mcpBridge.toolOutput,
+        loading: false
+      });
+    }
+
+    // Subscribe to bridge updates via onToolResult
+    if (window.mcpBridge && window.mcpBridge.onToolResult) {
+      window.mcpBridge.onToolResult(function(result) {
+        window.__frontmcp.updateOutput(result);
+      });
+    }
+  }
+
+  // Initialize from bridge when ready
+  if (window.mcpBridge) {
+    initFromBridge();
+  } else {
+    // Wait for bridge to be ready
+    window.addEventListener('mcp:bridge-ready', initFromBridge);
+  }
 })();
 `;
 }
@@ -1808,71 +639,7 @@ function buildRenderersRuntime(options) {
 `;
 }
 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
-  });
-})();
-`;
+  return (0, import_build.buildUIComponentsRuntime)();
 }
 function buildUniversalAppRuntime() {
   return `
@@ -1997,7 +764,11 @@ function getCachedRuntime(options, config = {}) {
     }
     runtimeCache.delete(cacheKey);
   }
-  const vendorParts = [buildStoreRuntime(), buildRequireShim()];
+  const vendorParts = [];
+  if (options.includeBridge) {
+    vendorParts.push((0, import_runtime.getMCPBridgeScript)());
+  }
+  vendorParts.push(buildStoreRuntime(), buildRequireShim());
   if (options.cdnType === "umd" || options.includeMarkdown) {
     vendorParts.push(buildInlineMarkdownParser(options));
   }
@@ -2036,12 +807,51 @@ 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();
+  return script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/[^\n]*$/gm, "").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) {
+var DEFAULT_OUTPUT_PLACEHOLDER = "__FRONTMCP_OUTPUT_PLACEHOLDER__";
+var DEFAULT_INPUT_PLACEHOLDER = "__FRONTMCP_INPUT_PLACEHOLDER__";
+function buildDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, options) {
+  const buildMode = options?.buildMode ?? "static";
+  const cdnType = options?.cdnType ?? "esm";
+  switch (buildMode) {
+    case "dynamic":
+      return buildDynamicDataInjectionCode(
+        toolName,
+        input,
+        output,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent,
+        cdnType,
+        options?.dynamicOptions
+      );
+    case "hybrid":
+      return buildHybridDataInjectionCode(
+        toolName,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent,
+        options?.hybridOptions
+      );
+    default:
+      return buildStaticDataInjectionCode(
+        toolName,
+        input,
+        output,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent
+      );
+  }
+}
+function buildStaticDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent) {
   const safeJson = (value) => {
     try {
       return JSON.stringify(value);
@@ -2051,6 +861,7 @@ function buildDataInjectionCode(toolName, input, output, structuredContent, cont
   };
   if (hasComponent) {
     return `
+  // Static Mode - Data baked at build time
   window.__frontmcp.setState({
     toolName: ${safeJson(toolName)},
     input: ${safeJson(input ?? null)},
@@ -2065,6 +876,7 @@ function buildDataInjectionCode(toolName, input, output, structuredContent, cont
   });`;
   }
   return `
+  // Static Mode - Data baked at build time
   window.__frontmcp.setState({
     toolName: ${safeJson(toolName)},
     input: ${safeJson(input ?? null)},
@@ -2078,6 +890,181 @@ function buildDataInjectionCode(toolName, input, output, structuredContent, cont
     error: null
   });`;
 }
+function buildDynamicDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, cdnType, dynamicOptions) {
+  if (cdnType === "umd") {
+    return buildDynamicWithPlaceholdersCode(
+      toolName,
+      structuredContent,
+      contentType,
+      source,
+      hasComponent,
+      dynamicOptions
+    );
+  }
+  return buildDynamicWithSubscriptionCode(
+    toolName,
+    input,
+    output,
+    structuredContent,
+    contentType,
+    source,
+    hasComponent,
+    dynamicOptions
+  );
+}
+function buildDynamicWithPlaceholdersCode(toolName, structuredContent, contentType, source, hasComponent, dynamicOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const outputPlaceholder = DEFAULT_OUTPUT_PLACEHOLDER;
+  const inputPlaceholder = DEFAULT_INPUT_PLACEHOLDER;
+  const includeInitialData = dynamicOptions?.includeInitialData ?? true;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  return `
+  // Dynamic Mode - Placeholder-based for non-OpenAI platforms
+  var __outputRaw = "${outputPlaceholder}";
+  var __inputRaw = "${inputPlaceholder}";
+  var __output = null;
+  var __input = null;
+  var __error = null;
+  var __outputNotReplaced = false;
+  var __includeInitialData = ${includeInitialData};
+
+  // Parse output placeholder
+  if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") {
+    try { __output = JSON.parse(__outputRaw); } catch (e) {
+      console.warn('[FrontMCP] Failed to parse output:', e);
+      __error = 'Failed to parse output data';
+    }
+  } else if (__outputRaw === "${outputPlaceholder}") {
+    __outputNotReplaced = true;
+  }
+
+  // Parse input placeholder
+  if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") {
+    try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); }
+  }
+
+  // Handle placeholder not replaced - show error if expecting initial data
+  if (__outputNotReplaced && __includeInitialData) {
+    __error = 'No data provided. The output placeholder was not replaced.';
+  }
+
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: __input,
+    output: __output,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: !__includeInitialData && __output === null && !__error,
+    error: __error
+  });`;
+}
+function buildDynamicWithSubscriptionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, dynamicOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const includeInitialData = dynamicOptions?.includeInitialData ?? true;
+  const subscribeToUpdates = dynamicOptions?.subscribeToUpdates ?? true;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  const initialState = includeInitialData ? `{
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: false,
+    error: null
+  }` : `{
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: null,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: true,
+    error: null
+  }`;
+  const subscriptionBlock = subscribeToUpdates ? `
+  // Subscribe to platform tool result events
+  (function() {
+    function subscribeToUpdates() {
+      if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) {
+        window.openai.canvas.onToolResult(function(result) {
+          window.__frontmcp.updateOutput(result);
+          window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result }));
+        });
+      }
+    }
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', subscribeToUpdates);
+    } else {
+      subscribeToUpdates();
+    }
+  })();` : "";
+  return `
+  // Dynamic Mode - OpenAI Subscription
+  window.__frontmcp.setState(${initialState});
+  ${subscriptionBlock}`;
+}
+function buildHybridDataInjectionCode(toolName, structuredContent, contentType, source, hasComponent, hybridOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const outputPlaceholder = hybridOptions?.placeholder ?? DEFAULT_OUTPUT_PLACEHOLDER;
+  const inputPlaceholder = hybridOptions?.inputPlaceholder ?? DEFAULT_INPUT_PLACEHOLDER;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  return `
+  // Hybrid Mode - Placeholders replaced at runtime
+  var __outputRaw = "${outputPlaceholder}";
+  var __inputRaw = "${inputPlaceholder}";
+  var __output = null;
+  var __input = null;
+  var __error = null;
+  var __outputNotReplaced = false;
+
+  // Parse output placeholder
+  if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") {
+    try { __output = JSON.parse(__outputRaw); } catch (e) {
+      console.warn('[FrontMCP] Failed to parse output:', e);
+      __error = 'Failed to parse output data';
+    }
+  } else if (__outputRaw === "${outputPlaceholder}") {
+    // Placeholder not replaced - no data was injected
+    __outputNotReplaced = true;
+  }
+
+  // Parse input placeholder
+  if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") {
+    try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); }
+  }
+
+  // Set error if output placeholder was not replaced (no data provided)
+  if (__outputNotReplaced) {
+    __error = 'No data provided. The output placeholder was not replaced.';
+  }
+
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: __input,
+    output: __output,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: false,
+    error: __error
+  });`;
+}
 function buildComponentCode(transpiledCode) {
   return `
   // CommonJS module shim
@@ -2092,6 +1079,377 @@ function buildComponentCode(transpiledCode) {
 }
 
 // libs/ui/src/bundler/bundler.ts
+var import_build2 = require("@frontmcp/uipack/build");
+
+// libs/ui/src/bundler/browser-components.ts
+var path = __toESM(require("path"));
+var cachedBrowserComponents = null;
+var buildingPromise = null;
+function getComponentsEntrySource() {
+  return `
+// Browser Components Entry Point
+// This gets transpiled by esbuild to create browser-compatible code
+
+import {
+  // Card styles
+  CARD_VARIANTS,
+  CARD_SIZES,
+  // Button styles
+  BUTTON_VARIANTS,
+  BUTTON_SIZES,
+  BUTTON_ICON_SIZES,
+  BUTTON_BASE_CLASSES,
+  LOADING_SPINNER,
+  // Badge styles
+  BADGE_VARIANTS,
+  BADGE_SIZES,
+  BADGE_DOT_SIZES,
+  BADGE_DOT_VARIANTS,
+  // Alert styles
+  ALERT_VARIANTS,
+  ALERT_BASE_CLASSES,
+  ALERT_ICONS,
+  CLOSE_ICON,
+  // Utility
+  cn,
+} from '@frontmcp/uipack/styles';
+
+// Re-export for the IIFE
+export {
+  CARD_VARIANTS,
+  CARD_SIZES,
+  BUTTON_VARIANTS,
+  BUTTON_SIZES,
+  BUTTON_ICON_SIZES,
+  BUTTON_BASE_CLASSES,
+  LOADING_SPINNER,
+  BADGE_VARIANTS,
+  BADGE_SIZES,
+  BADGE_DOT_SIZES,
+  BADGE_DOT_VARIANTS,
+  ALERT_VARIANTS,
+  ALERT_BASE_CLASSES,
+  ALERT_ICONS,
+  CLOSE_ICON,
+  cn,
+};
+
+// Card Component
+export function Card(props: any) {
+  const {
+    title,
+    subtitle,
+    headerActions,
+    footer,
+    variant = 'default',
+    size = 'md',
+    className,
+    id,
+    clickable,
+    href,
+    children,
+  } = props;
+
+  const variantClasses = CARD_VARIANTS[variant] || CARD_VARIANTS.default;
+  const sizeClasses = CARD_SIZES[size] || CARD_SIZES.md;
+  const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';
+  const allClasses = cn(variantClasses, sizeClasses, clickableClasses, className);
+
+  const hasHeader = title || subtitle || headerActions;
+
+  const headerElement = hasHeader ? React.createElement('div', {
+    className: 'flex items-start justify-between mb-4'
+  }, [
+    React.createElement('div', { key: 'titles' }, [
+      title && React.createElement('h3', {
+        key: 'title',
+        className: 'text-lg font-semibold text-text-primary'
+      }, title),
+      subtitle && React.createElement('p', {
+        key: 'subtitle',
+        className: 'text-sm text-text-secondary mt-1'
+      }, subtitle)
+    ]),
+    headerActions && React.createElement('div', {
+      key: 'actions',
+      className: 'flex items-center gap-2'
+    }, headerActions)
+  ]) : null;
+
+  const footerElement = footer ? React.createElement('div', {
+    className: 'mt-4 pt-4 border-t border-divider'
+  }, footer) : null;
+
+  const content = React.createElement(React.Fragment, null, headerElement, children, footerElement);
+
+  if (href) {
+    return React.createElement('a', { href, className: allClasses, id }, content);
+  }
+
+  return React.createElement('div', { className: allClasses, id }, content);
+}
+
+// Button Component
+export function Button(props: any) {
+  const {
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    iconPosition = 'left',
+    icon,
+    iconOnly = false,
+    type = 'button',
+    className,
+    onClick,
+    children,
+  } = props;
+
+  const variantClasses = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.primary;
+  const sizeClasses = iconOnly
+    ? (BUTTON_ICON_SIZES[size] || BUTTON_ICON_SIZES.md)
+    : (BUTTON_SIZES[size] || BUTTON_SIZES.md);
+
+  const disabledClasses = (disabled || loading) ? 'opacity-50 cursor-not-allowed' : '';
+  const widthClasses = fullWidth ? 'w-full' : '';
+
+  const allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
+
+  const iconElement = icon ? React.createElement('span', {
+    className: iconPosition === 'left' ? 'mr-2' : 'ml-2'
+  }, icon) : null;
+
+  const loadingSpinner = loading ? React.createElement('span', {
+    className: 'mr-2',
+    dangerouslySetInnerHTML: { __html: LOADING_SPINNER }
+  }) : null;
+
+  return React.createElement('button', {
+    type,
+    className: allClasses,
+    disabled: disabled || loading,
+    onClick
+  },
+    loadingSpinner,
+    !loading && icon && iconPosition === 'left' ? iconElement : null,
+    !iconOnly ? children : null,
+    !loading && icon && iconPosition === 'right' ? iconElement : null
+  );
+}
+
+// Badge Component
+export function Badge(props: any) {
+  const {
+    variant = 'default',
+    size = 'md',
+    pill = false,
+    icon,
+    dot = false,
+    className,
+    removable = false,
+    onRemove,
+    children,
+  } = props;
+
+  // Handle dot badge
+  if (dot) {
+    const dotSizeClasses = BADGE_DOT_SIZES[size] || BADGE_DOT_SIZES.md;
+    const dotVariantClasses = BADGE_DOT_VARIANTS[variant] || BADGE_DOT_VARIANTS.default;
+    const dotClasses = cn('inline-block rounded-full', dotSizeClasses, dotVariantClasses, className);
+    const label = typeof children === 'string' ? children : undefined;
+    return React.createElement('span', {
+      className: dotClasses,
+      'aria-label': label,
+      title: label
+    });
+  }
+
+  const variantClasses = BADGE_VARIANTS[variant] || BADGE_VARIANTS.default;
+  const sizeClasses = BADGE_SIZES[size] || BADGE_SIZES.md;
+
+  const baseClasses = cn(
+    'inline-flex items-center font-medium',
+    pill ? 'rounded-full' : 'rounded-md',
+    variantClasses,
+    sizeClasses,
+    className
+  );
+
+  const closeButton = removable ? React.createElement('button', {
+    type: 'button',
+    className: 'ml-1.5 -mr-1 hover:opacity-70 transition-opacity',
+    'aria-label': 'Remove',
+    onClick: onRemove
+  }, React.createElement('svg', {
+    className: 'w-3 h-3',
+    fill: 'none',
+    stroke: 'currentColor',
+    viewBox: '0 0 24 24'
+  }, React.createElement('path', {
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '2',
+    d: 'M6 18L18 6M6 6l12 12'
+  }))) : null;
+
+  return React.createElement('span', { className: baseClasses },
+    icon ? React.createElement('span', { className: 'mr-1' }, icon) : null,
+    children,
+    closeButton
+  );
+}
+
+// Alert Component
+export function Alert(props: any) {
+  const {
+    variant = 'info',
+    title,
+    icon,
+    showIcon = true,
+    dismissible = false,
+    onDismiss,
+    className,
+    children,
+  } = props;
+
+  const variantStyles = ALERT_VARIANTS[variant] || ALERT_VARIANTS.info;
+  const allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className);
+
+  const iconContent = icon || (showIcon ? React.createElement('span', {
+    className: cn('flex-shrink-0', variantStyles.icon),
+    dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] || ALERT_ICONS.info }
+  }) : null);
+
+  const dismissButton = dismissible ? React.createElement('button', {
+    type: 'button',
+    className: 'flex-shrink-0 ml-3 hover:opacity-70 transition-opacity',
+    'aria-label': 'Dismiss',
+    onClick: onDismiss
+  }, React.createElement('span', {
+    dangerouslySetInnerHTML: { __html: CLOSE_ICON }
+  })) : null;
+
+  return React.createElement('div', { className: allClasses, role: 'alert' },
+    React.createElement('div', { className: 'flex' },
+      iconContent ? React.createElement('div', { className: 'flex-shrink-0 mr-3' }, iconContent) : null,
+      React.createElement('div', { className: 'flex-1' },
+        title ? React.createElement('h4', { className: 'font-semibold mb-1' }, title) : null,
+        React.createElement('div', { className: 'text-sm' }, children)
+      ),
+      dismissButton
+    )
+  );
+}
+`;
+}
+function getBrowserRuntimeWrapper() {
+  return `
+// Assign components to window for require() shim
+window.Card = Card;
+window.Button = Button;
+window.Badge = Badge;
+window.Alert = Alert;
+
+// Build the namespace object for @frontmcp/ui/react imports
+window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, {
+  // Hooks
+  useToolOutput: window.useToolOutput,
+  useToolInput: window.useToolInput,
+  useMcpBridgeContext: function() { return window.__frontmcp.context; },
+  useMcpBridge: function() { return window.__frontmcp.context; },
+  useCallTool: function() {
+    return function(name, args) {
+      if (window.__frontmcp.context && window.__frontmcp.context.callTool) {
+        return window.__frontmcp.context.callTool(name, args);
+      }
+      console.warn('[FrontMCP] callTool not available');
+      return Promise.resolve(null);
+    };
+  },
+  useTheme: function() { return window.__frontmcp.theme || 'light'; },
+  useDisplayMode: function() { return window.__frontmcp.displayMode || 'embedded'; },
+  useHostContext: function() { return window.__frontmcp.hostContext || {}; },
+  useCapability: function(cap) { return window.__frontmcp.capabilities && window.__frontmcp.capabilities[cap] || false; },
+  useStructuredContent: function() { return window.__frontmcp.getState().structuredContent; },
+  useToolCalls: function() { return []; },
+  useSendMessage: function() { return function() { return Promise.resolve(); }; },
+  useOpenLink: function() { return function() {}; },
+
+  // Components
+  Card: window.Card,
+  Badge: window.Badge,
+  Button: window.Button,
+  Alert: window.Alert,
+
+  // Re-export React for convenience
+  createElement: React.createElement,
+  Fragment: React.Fragment,
+  useState: React.useState,
+  useEffect: React.useEffect,
+  useCallback: React.useCallback,
+  useMemo: React.useMemo,
+  useRef: React.useRef,
+  useContext: React.useContext
+});
+`;
+}
+async function buildWithEsbuild() {
+  try {
+    const esbuild = await import("esbuild");
+    const stylesPath = require.resolve("@frontmcp/uipack/styles");
+    const entrySource = getComponentsEntrySource();
+    const result = await esbuild.build({
+      stdin: {
+        contents: entrySource,
+        loader: "tsx",
+        resolveDir: path.dirname(stylesPath)
+      },
+      bundle: true,
+      format: "iife",
+      globalName: "__frontmcp_components",
+      target: "es2020",
+      minify: false,
+      write: false,
+      external: ["react", "react-dom"],
+      define: {
+        React: "window.React"
+      },
+      platform: "browser"
+    });
+    if (result.outputFiles && result.outputFiles.length > 0) {
+      let code = result.outputFiles[0].text;
+      code += "\n" + getBrowserRuntimeWrapper();
+      return code;
+    }
+    throw new Error("No output from esbuild");
+  } catch (error) {
+    console.warn(
+      `[FrontMCP] esbuild bundle failed, falling back to manual components: ${error instanceof Error ? error.message : String(error)}`
+    );
+    throw error;
+  }
+}
+async function getBrowserComponents() {
+  if (cachedBrowserComponents !== null) {
+    return cachedBrowserComponents;
+  }
+  if (buildingPromise !== null) {
+    return buildingPromise;
+  }
+  buildingPromise = buildWithEsbuild().then((code) => {
+    cachedBrowserComponents = code;
+    buildingPromise = null;
+    return code;
+  }).catch((error) => {
+    buildingPromise = null;
+    throw error;
+  });
+  return buildingPromise;
+}
+
+// libs/ui/src/bundler/bundler.ts
+var import_bundler2 = require("@frontmcp/uipack/bundler");
 var esbuildTransform = null;
 async function loadEsbuild() {
   if (esbuildTransform !== null) {
@@ -2160,11 +1518,11 @@ var InMemoryBundler = class {
         ...options.cache
       }
     };
-    this.cache = new BundlerCache({
+    this.cache = new import_bundler.BundlerCache({
       maxSize: this.options.cache.maxSize,
       ttl: this.options.cache.ttl
     });
-    this.defaultSecurity = mergePolicy(options.defaultSecurity);
+    this.defaultSecurity = (0, import_bundler.mergePolicy)(options.defaultSecurity);
   }
   /**
    * Bundle source code.
@@ -2176,7 +1534,7 @@ var InMemoryBundler = class {
     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 cacheKey = options.cacheKey ?? (0, import_bundler.createCacheKey)(options.source, opts);
       const cached = this.cache.get(cacheKey);
       if (cached) {
         return {
@@ -2189,18 +1547,18 @@ var InMemoryBundler = class {
         };
       }
     }
-    const security = mergePolicy(options.security ?? this.defaultSecurity);
-    const violations = validateSource(options.source, security);
-    throwOnViolations(violations);
+    const security = (0, import_bundler.mergePolicy)(options.security ?? this.defaultSecurity);
+    const violations = (0, import_bundler.validateSource)(options.source, security);
+    (0, import_bundler.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);
+    const sizeViolation = (0, import_bundler.validateSize)(transformed.code.length, security);
     if (sizeViolation) {
-      throwOnViolations([sizeViolation]);
+      (0, import_bundler.throwOnViolations)([sizeViolation]);
     }
-    const hash = hashContent(transformed.code);
+    const hash = (0, import_bundler.hashContent)(transformed.code);
     const result = {
       code: transformed.code,
       hash,
@@ -2217,7 +1575,7 @@ var InMemoryBundler = class {
       format: opts.format
     };
     if (!this.options.cache.disabled) {
-      const cacheKey = options.cacheKey ?? createCacheKey(options.source, opts);
+      const cacheKey = options.cacheKey ?? (0, import_bundler.createCacheKey)(options.source, opts);
       this.cache.set(cacheKey, result);
     }
     return result;
@@ -2244,16 +1602,16 @@ var InMemoryBundler = class {
       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, {
+    const Component = await (0, import_bundler.executeDefault)(bundleResult.code, {
       React,
-      security: mergePolicy(options.security ?? this.defaultSecurity)
+      security: (0, import_bundler.mergePolicy)(options.security ?? this.defaultSecurity)
     });
     let html;
     try {
       const element = React.createElement(Component, options.context ?? {});
       html = ReactDOMServer.renderToString(element);
     } catch (error) {
-      throw new ExecutionError(
+      throw new import_bundler.ExecutionError(
         `SSR rendering failed: ${error instanceof Error ? error.message : String(error)}`,
         error
       );
@@ -2294,10 +1652,10 @@ var InMemoryBundler = class {
       React = await import("react");
     } catch {
     }
-    return executeDefault(result.code, {
+    return (0, import_bundler.executeDefault)(result.code, {
       React,
       globals: context,
-      security: mergePolicy(options.security ?? this.defaultSecurity)
+      security: (0, import_bundler.mergePolicy)(options.security ?? this.defaultSecurity)
     });
   }
   /**
@@ -2348,10 +1706,19 @@ var InMemoryBundler = class {
       security: opts.security,
       skipCache: opts.skipCache
     });
-    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss });
+    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme });
     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 frontmcpRuntime = await this.buildFrontMCPRuntime();
+    const dataScript = this.buildDataInjectionScript(
+      opts.toolName,
+      opts.input,
+      opts.output,
+      opts.structuredContent,
+      opts.buildMode,
+      cdnType,
+      opts.dynamicOptions,
+      opts.hybridOptions
+    );
     const componentScript = this.buildComponentRenderScript(bundleResult.code, opts.rootId, cdnType);
     const html = this.assembleStaticHTML({
       title: opts.title || `${opts.toolName} - Widget`,
@@ -2363,7 +1730,9 @@ var InMemoryBundler = class {
       rootId: opts.rootId,
       cdnType
     });
-    const hash = hashContent(html);
+    const hash = (0, import_bundler.hashContent)(html);
+    const dataPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.placeholder ?? HYBRID_DATA_PLACEHOLDER : void 0;
+    const inputPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER : void 0;
     return {
       html,
       componentCode: bundleResult.code,
@@ -2375,9 +1744,240 @@ var InMemoryBundler = class {
       size: html.length,
       cached: bundleResult.cached,
       sourceType: bundleResult.sourceType,
-      targetPlatform: platform
+      targetPlatform: platform,
+      buildMode: opts.buildMode,
+      dataPlaceholder,
+      inputPlaceholder
+    };
+  }
+  /**
+   * Bundle a component to static HTML for all target platforms at once.
+   *
+   * This method is optimized for efficiency:
+   * - Transpiles the component source code only once
+   * - Generates platform-specific HTML variations from the shared transpiled code
+   * - Returns complete platform metadata ready for MCP responses
+   *
+   * @param options - Multi-platform build options
+   * @returns Multi-platform build result with all platforms
+   *
+   * @example
+   * ```typescript
+   * const result = await bundler.bundleToStaticHTMLAll({
+   *   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 },
+   * });
+   *
+   * // Access platform-specific results
+   * const openaiHtml = result.platforms.openai.html;
+   * const claudeHtml = result.platforms.claude.html;
+   *
+   * // Get metadata for MCP response
+   * const openaiMeta = result.platforms.openai.meta;
+   * ```
+   */
+  async bundleToStaticHTMLAll(options) {
+    const startTime = performance.now();
+    const opts = this.mergeStaticHTMLOptions(options);
+    const platforms = options.platforms ?? [...ALL_PLATFORMS];
+    const transpileStart = performance.now();
+    let transpiledCode = null;
+    let bundleResult = null;
+    const isUniversal = opts.universal;
+    const rawContentType = options.contentType ?? "auto";
+    const contentType = isUniversal ? rawContentType === "auto" ? detectContentType(options.source) : rawContentType : "react";
+    if (contentType === "react" || !isUniversal) {
+      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;
+    }
+    const transpileTime = performance.now() - transpileStart;
+    const generationStart = performance.now();
+    const platformResults = {};
+    for (const platform of platforms) {
+      const platformResult = await this.buildForPlatform({
+        options,
+        opts,
+        platform,
+        transpiledCode,
+        bundleResult,
+        contentType,
+        isUniversal
+      });
+      platformResults[platform] = platformResult;
+    }
+    const generationTime = performance.now() - generationStart;
+    return {
+      platforms: platformResults,
+      sharedComponentCode: transpiledCode ?? "",
+      metrics: {
+        transpileTime,
+        generationTime,
+        totalTime: performance.now() - startTime
+      },
+      cached: bundleResult?.cached ?? false
+    };
+  }
+  /**
+   * Build for a specific platform with pre-transpiled code.
+   * Internal helper for bundleToStaticHTMLAll.
+   */
+  async buildForPlatform(params) {
+    const { options, opts, platform, transpiledCode, bundleResult, contentType, isUniversal } = params;
+    const cdnType = getCdnTypeForPlatform(platform);
+    const buildStart = performance.now();
+    let html;
+    let componentCode;
+    if (isUniversal) {
+      const shouldIncludeBridge = opts.buildMode === "dynamic" || opts.buildMode === "hybrid";
+      const cachedRuntime = getCachedRuntime({
+        cdnType,
+        includeMarkdown: opts.includeMarkdown || contentType === "markdown",
+        includeMdx: opts.includeMdx || contentType === "mdx",
+        minify: opts.minify,
+        includeBridge: shouldIncludeBridge
+      });
+      const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : "";
+      const dataInjectionStr = buildDataInjectionCode(
+        opts.toolName,
+        opts.input,
+        opts.output,
+        opts.structuredContent,
+        contentType,
+        transpiledCode ? null : options.source,
+        transpiledCode !== null,
+        {
+          buildMode: opts.buildMode,
+          cdnType,
+          dynamicOptions: opts.dynamicOptions,
+          hybridOptions: opts.hybridOptions
+        }
+      );
+      const appScript = buildAppScript(
+        cachedRuntime.appTemplate,
+        componentCodeStr,
+        dataInjectionStr,
+        opts.customComponents ?? ""
+      );
+      const head = this.buildStaticHTMLHead({
+        externals: opts.externals,
+        customCss: opts.customCss,
+        theme: opts.theme
+      });
+      const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+      const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType);
+      html = this.assembleUniversalStaticHTMLCached({
+        title: opts.title || `${opts.toolName} - Widget`,
+        head,
+        reactRuntime,
+        cdnImports: cachedRuntime.cdnImports,
+        vendorScript: cachedRuntime.vendorScript,
+        appScript,
+        renderScript,
+        rootId: opts.rootId,
+        cdnType
+      });
+      componentCode = transpiledCode ?? appScript;
+    } else {
+      if (!transpiledCode) {
+        throw new Error("Failed to transpile component source");
+      }
+      const head = this.buildStaticHTMLHead({
+        externals: opts.externals,
+        customCss: opts.customCss,
+        theme: opts.theme
+      });
+      const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
+      const frontmcpRuntime = await this.buildFrontMCPRuntime();
+      const dataScript = this.buildDataInjectionScript(
+        opts.toolName,
+        opts.input,
+        opts.output,
+        opts.structuredContent,
+        opts.buildMode,
+        cdnType,
+        opts.dynamicOptions,
+        opts.hybridOptions
+      );
+      const componentScript = this.buildComponentRenderScript(transpiledCode, opts.rootId, cdnType);
+      html = this.assembleStaticHTML({
+        title: opts.title || `${opts.toolName} - Widget`,
+        head,
+        reactRuntime,
+        frontmcpRuntime,
+        dataScript,
+        componentScript,
+        rootId: opts.rootId,
+        cdnType
+      });
+      componentCode = transpiledCode;
+    }
+    const hash = (0, import_bundler.hashContent)(html);
+    const meta = (0, import_adapters.buildUIMeta)({
+      uiConfig: {
+        template: () => html,
+        widgetAccessible: opts.widgetAccessible
+      },
+      platformType: this.mapTargetPlatformToAIPlatform(platform),
+      html
+    });
+    const dataPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.placeholder ?? HYBRID_DATA_PLACEHOLDER : void 0;
+    const inputPlaceholder = opts.buildMode === "hybrid" ? opts.hybridOptions?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER : void 0;
+    return {
+      html,
+      componentCode,
+      metrics: bundleResult?.metrics ?? {
+        transformTime: 0,
+        bundleTime: 0,
+        totalTime: performance.now() - buildStart
+      },
+      hash,
+      size: html.length,
+      cached: bundleResult?.cached ?? false,
+      sourceType: bundleResult?.sourceType ?? opts.sourceType,
+      targetPlatform: platform,
+      universal: isUniversal,
+      contentType: isUniversal ? contentType : void 0,
+      buildMode: opts.buildMode,
+      dataPlaceholder,
+      inputPlaceholder,
+      meta
     };
   }
+  /**
+   * Map TargetPlatform to AIPlatformType for metadata generation.
+   */
+  mapTargetPlatformToAIPlatform(platform) {
+    switch (platform) {
+      case "openai":
+        return "openai";
+      case "claude":
+        return "claude";
+      case "cursor":
+        return "cursor";
+      case "ext-apps":
+        return "ext-apps";
+      case "generic":
+        return "generic-mcp";
+      default:
+        return "generic-mcp";
+    }
+  }
   /**
    * Bundle to static HTML with universal rendering mode.
    * Uses the universal renderer that can handle multiple content types.
@@ -2409,11 +2009,13 @@ var InMemoryBundler = class {
       transpiledCode = bundleResult.code;
       transformTime = bundleResult.metrics.transformTime;
     }
+    const shouldIncludeBridge = opts.buildMode === "dynamic" || opts.buildMode === "hybrid";
     const cachedRuntime = getCachedRuntime({
       cdnType,
       includeMarkdown: opts.includeMarkdown || contentType === "markdown",
       includeMdx: opts.includeMdx || contentType === "mdx",
-      minify: opts.minify
+      minify: opts.minify,
+      includeBridge: shouldIncludeBridge
     });
     const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : "";
     const dataInjectionStr = buildDataInjectionCode(
@@ -2424,7 +2026,13 @@ var InMemoryBundler = class {
       contentType,
       transpiledCode ? null : options.source,
       // Pass source only if not a component
-      transpiledCode !== null
+      transpiledCode !== null,
+      {
+        buildMode: opts.buildMode,
+        cdnType,
+        dynamicOptions: opts.dynamicOptions,
+        hybridOptions: opts.hybridOptions
+      }
     );
     const appScript = buildAppScript(
       cachedRuntime.appTemplate,
@@ -2432,7 +2040,7 @@ var InMemoryBundler = class {
       dataInjectionStr,
       opts.customComponents ?? ""
     );
-    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss });
+    const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme });
     const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType);
     const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType);
     const html = this.assembleUniversalStaticHTMLCached({
@@ -2446,7 +2054,7 @@ var InMemoryBundler = class {
       rootId: opts.rootId,
       cdnType
     });
-    const hash = hashContent(html);
+    const hash = (0, import_bundler.hashContent)(html);
     return {
       html,
       componentCode: transpiledCode ?? appScript,
@@ -2861,6 +2469,10 @@ ${parts.appScript}
       contentType: options.contentType ?? DEFAULT_STATIC_HTML_OPTIONS.contentType,
       includeMarkdown: options.includeMarkdown ?? DEFAULT_STATIC_HTML_OPTIONS.includeMarkdown,
       includeMdx: options.includeMdx ?? DEFAULT_STATIC_HTML_OPTIONS.includeMdx,
+      // Build mode options
+      buildMode: options.buildMode ?? DEFAULT_STATIC_HTML_OPTIONS.buildMode,
+      dynamicOptions: options.dynamicOptions,
+      hybridOptions: options.hybridOptions,
       // Pass-through options
       toolName: options.toolName,
       input: options.input,
@@ -2869,7 +2481,8 @@ ${parts.appScript}
       title: options.title,
       security: options.security,
       customCss: options.customCss,
-      customComponents: options.customComponents
+      customComponents: options.customComponents,
+      theme: options.theme
     };
   }
   /**
@@ -2883,12 +2496,8 @@ ${parts.appScript}
       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((0, import_build2.buildCDNScriptTag)(import_build2.CLOUDFLARE_CDN.tailwindCss));
+    parts.push(this.buildThemeStyleBlock(opts.theme));
     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; }
@@ -2902,6 +2511,18 @@ ${sanitizeCss(opts.customCss)}
     }
     return parts.join("\n    ");
   }
+  /**
+   * Build theme CSS variables as a :root style block.
+   * Uses DEFAULT_THEME if no theme is provided.
+   */
+  buildThemeStyleBlock(theme = import_theme.DEFAULT_THEME) {
+    const cssVars = (0, import_theme.buildThemeCss)(theme);
+    return `<style>
+      :root {
+        ${cssVars}
+      }
+    </style>`;
+  }
   /**
    * Build React runtime scripts for static HTML.
    */
@@ -2966,9 +2587,17 @@ ${sanitizeCss(opts.customCss)}
   }
   /**
    * Build FrontMCP runtime (hooks and UI components).
+   * Uses esbuild to transpile real React components at first use, then caches.
+   * Falls back to manual implementation if esbuild fails.
    * Always inlined for reliability across platforms.
    */
-  buildFrontMCPRuntime() {
+  async buildFrontMCPRuntime() {
+    let uiComponents;
+    try {
+      uiComponents = await getBrowserComponents();
+    } catch {
+      uiComponents = (0, import_build2.buildUIComponentsRuntime)();
+    }
     return `
     <!-- FrontMCP Runtime (always inline) -->
     <script>
@@ -2988,8 +2617,8 @@ ${sanitizeCss(opts.customCss)}
           '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; },
+          '@frontmcp/ui': function() { return window.frontmcp_ui_namespaceObject; },
+          '@frontmcp/ui/react': function() { return window.frontmcp_ui_namespaceObject; },
         };
 
         var resolver = moduleMap[moduleName];
@@ -3020,7 +2649,7 @@ ${sanitizeCss(opts.customCss)}
         });
       };
 
-      // FrontMCP Hook implementations
+      // FrontMCP Hook implementations and state
       window.__frontmcp = {
         // Context for MCP bridge
         context: {
@@ -3031,10 +2660,35 @@ ${sanitizeCss(opts.customCss)}
           callTool: null,
         },
 
+        // Theme and display settings
+        theme: 'light',
+        displayMode: 'embedded',
+        hostContext: {},
+        capabilities: {},
+
         // Set context from data injection
         setContext: function(ctx) {
           Object.assign(this.context, ctx);
         },
+
+        // State management (for universal mode compatibility)
+        getState: function() {
+          return {
+            toolName: this.context.toolName,
+            input: this.context.toolInput,
+            output: this.context.toolOutput,
+            structuredContent: this.context.structuredContent,
+            loading: false,
+            error: null
+          };
+        },
+
+        setState: function(partial) {
+          if (partial.toolName !== undefined) this.context.toolName = partial.toolName;
+          if (partial.input !== undefined) this.context.toolInput = partial.input;
+          if (partial.output !== undefined) this.context.toolOutput = partial.output;
+          if (partial.structuredContent !== undefined) this.context.structuredContent = partial.structuredContent;
+        }
       };
 
       // Hook: useToolOutput - returns the tool output data
@@ -3062,74 +2716,31 @@ ${sanitizeCss(opts.customCss)}
           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>
+    <!-- UI Components (Full-Featured, Browser-Compatible) -->
+    <script>
+${uiComponents}
     </script>`;
   }
   /**
    * Build data injection script for tool input/output.
+   * Dispatches to mode-specific builders based on buildMode.
+   */
+  buildDataInjectionScript(toolName, input, output, structuredContent, buildMode = "static", cdnType = "esm", dynamicOptions, hybridOptions) {
+    switch (buildMode) {
+      case "dynamic":
+        return this.buildDynamicDataScript(toolName, input, output, structuredContent, cdnType, dynamicOptions);
+      case "hybrid":
+        return this.buildHybridDataScript(toolName, input, structuredContent, hybridOptions);
+      case "static":
+      default:
+        return this.buildStaticDataScript(toolName, input, output, structuredContent);
+    }
+  }
+  /**
+   * Build static data injection - data baked in at build time (current default).
    */
-  buildDataInjectionScript(toolName, input, output, structuredContent) {
+  buildStaticDataScript(toolName, input, output, structuredContent) {
     const safeJson = (value) => {
       try {
         return JSON.stringify(value);
@@ -3138,7 +2749,7 @@ ${sanitizeCss(opts.customCss)}
       }
     };
     return `
-    <!-- Tool Data Injection -->
+    <!-- Tool Data Injection (Static Mode) -->
     <script>
       window.__mcpToolName = ${safeJson(toolName)};
       window.__mcpToolInput = ${safeJson(input ?? null)};
@@ -3154,6 +2765,256 @@ ${sanitizeCss(opts.customCss)}
       });
     </script>`;
   }
+  /**
+   * Build dynamic data injection - platform-aware.
+   * For OpenAI (ESM): subscribes to platform events for updates.
+   * For non-OpenAI (UMD/Claude): uses placeholders for data injection.
+   */
+  buildDynamicDataScript(toolName, input, output, structuredContent, cdnType = "esm", options) {
+    if (cdnType === "umd") {
+      return this.buildDynamicWithPlaceholdersScript(toolName, structuredContent, options);
+    }
+    return this.buildDynamicWithSubscriptionScript(toolName, input, output, structuredContent, options);
+  }
+  /**
+   * Build dynamic data injection for non-OpenAI platforms using placeholders.
+   * Similar to hybrid mode but with platform-appropriate loading/error states.
+   */
+  buildDynamicWithPlaceholdersScript(toolName, structuredContent, options) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    const outputPlaceholder = HYBRID_DATA_PLACEHOLDER;
+    const inputPlaceholder = HYBRID_INPUT_PLACEHOLDER;
+    const includeInitialData = options?.includeInitialData !== false;
+    return `
+    <!-- Tool Data Injection (Dynamic Mode - Placeholder-based for non-OpenAI) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = "${inputPlaceholder}";
+      window.__mcpToolOutput = "${outputPlaceholder}";
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+      window.__mcpHybridError = null;
+
+      (function() {
+        var outputNotReplaced = false;
+        var includeInitialData = ${includeInitialData};
+
+        // Parse output placeholder
+        var rawOutput = window.__mcpToolOutput;
+        if (typeof rawOutput === 'string' && rawOutput !== "${outputPlaceholder}") {
+          try {
+            window.__mcpToolOutput = JSON.parse(rawOutput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected output data:', e);
+            window.__mcpToolOutput = null;
+            window.__mcpHybridError = 'Failed to parse output data';
+          }
+        } else if (rawOutput === "${outputPlaceholder}") {
+          window.__mcpToolOutput = null;
+          outputNotReplaced = true;
+        }
+
+        // Parse input placeholder
+        var rawInput = window.__mcpToolInput;
+        if (typeof rawInput === 'string' && rawInput !== "${inputPlaceholder}") {
+          try {
+            window.__mcpToolInput = JSON.parse(rawInput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected input data:', e);
+            window.__mcpToolInput = null;
+          }
+        } else if (rawInput === "${inputPlaceholder}") {
+          window.__mcpToolInput = null;
+        }
+
+        // Handle placeholder not replaced - show error if expecting initial data
+        if (outputNotReplaced && includeInitialData) {
+          window.__mcpHybridError = 'No data provided. The output placeholder was not replaced.';
+        }
+      })();
+
+      // Initialize FrontMCP context with appropriate loading/error state
+      if (window.__frontmcp && window.__frontmcp.setContext) {
+        window.__frontmcp.setContext({
+          toolName: window.__mcpToolName,
+          toolInput: window.__mcpToolInput,
+          toolOutput: window.__mcpToolOutput,
+          structuredContent: window.__mcpStructuredContent,
+          loading: ${!includeInitialData} && window.__mcpToolOutput === null && !window.__mcpHybridError,
+          error: window.__mcpHybridError,
+        });
+      }
+    </script>`;
+  }
+  /**
+   * Build dynamic data injection for OpenAI using subscription pattern.
+   */
+  buildDynamicWithSubscriptionScript(toolName, input, output, structuredContent, options) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    const includeInitial = options?.includeInitialData !== false;
+    const subscribeToUpdates = options?.subscribeToUpdates !== false;
+    const initialDataBlock = includeInitial ? `
+      window.__mcpToolOutput = ${safeJson(output ?? null)};
+      if (window.__frontmcp && window.__frontmcp.setState) {
+        window.__frontmcp.setState({
+          output: window.__mcpToolOutput,
+          loading: false,
+        });
+      }` : `
+      window.__mcpToolOutput = null;
+      if (window.__frontmcp && window.__frontmcp.setState) {
+        window.__frontmcp.setState({
+          output: null,
+          loading: true,
+        });
+      }`;
+    const subscriptionBlock = subscribeToUpdates ? `
+      // Subscribe to platform tool result updates
+      (function() {
+        function subscribeToUpdates() {
+          // OpenAI Apps SDK
+          if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) {
+            window.openai.canvas.onToolResult(function(result) {
+              window.__mcpToolOutput = result;
+              if (window.__frontmcp && window.__frontmcp.setState) {
+                window.__frontmcp.setState({
+                  output: result,
+                  loading: false,
+                });
+              }
+              // Dispatch custom event for React hooks
+              window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result }));
+            });
+            return;
+          }
+
+          // Fallback: listen for custom events (for testing/other platforms)
+          window.addEventListener('frontmcp:injectData', function(e) {
+            if (e.detail && e.detail.output !== undefined) {
+              window.__mcpToolOutput = e.detail.output;
+              if (window.__frontmcp && window.__frontmcp.setState) {
+                window.__frontmcp.setState({
+                  output: e.detail.output,
+                  loading: false,
+                });
+              }
+            }
+          });
+        }
+
+        // Subscribe when DOM is ready
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', subscribeToUpdates);
+        } else {
+          subscribeToUpdates();
+        }
+      })();` : "";
+    return `
+    <!-- Tool Data Injection (Dynamic Mode - OpenAI Subscription) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = ${safeJson(input ?? null)};
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+      ${initialDataBlock}
+
+      // Initialize FrontMCP context
+      if (window.__frontmcp && window.__frontmcp.setContext) {
+        window.__frontmcp.setContext({
+          toolName: window.__mcpToolName,
+          toolInput: window.__mcpToolInput,
+          toolOutput: window.__mcpToolOutput,
+          structuredContent: window.__mcpStructuredContent,
+        });
+      }
+      ${subscriptionBlock}
+    </script>`;
+  }
+  /**
+   * Build hybrid data injection - shell with placeholders for runtime injection.
+   * Use injectHybridData() or injectHybridDataFull() from @frontmcp/uipack to replace the placeholders.
+   */
+  buildHybridDataScript(toolName, _input, structuredContent, options) {
+    const safeJson = (value) => {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "null";
+      }
+    };
+    const outputPlaceholder = options?.placeholder ?? HYBRID_DATA_PLACEHOLDER;
+    const inputPlaceholder = options?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER;
+    return `
+    <!-- Tool Data Injection (Hybrid Mode - Replace placeholders with JSON) -->
+    <script>
+      window.__mcpToolName = ${safeJson(toolName)};
+      window.__mcpToolInput = "${inputPlaceholder}";
+      window.__mcpToolOutput = "${outputPlaceholder}";
+      window.__mcpStructuredContent = ${safeJson(structuredContent ?? null)};
+      window.__mcpHybridError = null;
+
+      // Parse placeholders if they've been replaced with actual JSON
+      (function() {
+        var outputNotReplaced = false;
+
+        // Parse output placeholder
+        var rawOutput = window.__mcpToolOutput;
+        if (typeof rawOutput === 'string' && rawOutput !== "${outputPlaceholder}") {
+          try {
+            window.__mcpToolOutput = JSON.parse(rawOutput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected output data:', e);
+            window.__mcpToolOutput = null;
+            window.__mcpHybridError = 'Failed to parse output data';
+          }
+        } else if (rawOutput === "${outputPlaceholder}") {
+          // Placeholder not replaced - no data was injected
+          window.__mcpToolOutput = null;
+          outputNotReplaced = true;
+        }
+
+        // Parse input placeholder
+        var rawInput = window.__mcpToolInput;
+        if (typeof rawInput === 'string' && rawInput !== "${inputPlaceholder}") {
+          try {
+            window.__mcpToolInput = JSON.parse(rawInput);
+          } catch (e) {
+            console.warn('[FrontMCP] Failed to parse injected input data:', e);
+            window.__mcpToolInput = null;
+          }
+        } else if (rawInput === "${inputPlaceholder}") {
+          window.__mcpToolInput = null;
+        }
+
+        // Set error if output placeholder was not replaced (no data provided)
+        if (outputNotReplaced) {
+          window.__mcpHybridError = 'No data provided. The output placeholder was not replaced.';
+        }
+      })();
+
+      // Initialize FrontMCP context with appropriate loading/error state
+      if (window.__frontmcp && window.__frontmcp.setContext) {
+        window.__frontmcp.setContext({
+          toolName: window.__mcpToolName,
+          toolInput: window.__mcpToolInput,
+          toolOutput: window.__mcpToolOutput,
+          structuredContent: window.__mcpStructuredContent,
+          loading: false,
+          error: window.__mcpHybridError,
+        });
+      }
+    </script>`;
+  }
   /**
    * Build component render script.
    * Wraps CommonJS code with module/exports shim to capture the component.
@@ -3256,416 +3117,14 @@ 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
-var import_crypto2 = require("crypto");
-var import_promises2 = require("fs/promises");
-var import_fs2 = require("fs");
-var import_path2 = require("path");
-function sha256(content) {
-  return (0, import_crypto2.createHash)("sha256").update(content, "utf8").digest("hex");
-}
-function sha256Buffer(buffer) {
-  return (0, import_crypto2.createHash)("sha256").update(buffer).digest("hex");
-}
-async function hashFile(filePath) {
-  try {
-    const content = await (0, import_promises2.readFile)(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 = (0, import_path2.dirname)(entryPath),
-    externals = [],
-    dependencies = {},
-    bundleOptions = {},
-    maxDepth = 10
-  } = options;
-  const absoluteEntryPath = (0, import_path2.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 (!(0, import_fs2.existsSync)(filePath)) return;
-  collected.add(filePath);
-  try {
-    const content = await (0, import_promises2.readFile)(filePath, "utf8");
-    const imports = extractImportPaths(content);
-    for (const importPath of imports) {
-      if (!importPath.startsWith(".") && !importPath.startsWith("/")) {
-        continue;
-      }
-      const resolvedPath = resolveImportPath(importPath, (0, import_path2.dirname)(filePath));
-      if (resolvedPath && (0, import_fs2.existsSync)(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 = (0, import_path2.join)(fromDir, importPath + ext);
-    if ((0, import_fs2.existsSync)(fullPath)) {
-      return fullPath;
-    }
-  }
-  for (const ext of extensions) {
-    const indexPath = (0, import_path2.join)(fromDir, importPath, `index${ext}`);
-    if ((0, import_fs2.existsSync)(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
-var import_promises3 = require("fs/promises");
-var import_fs3 = require("fs");
-var import_path3 = require("path");
-var import_crypto3 = require("crypto");
-var import_dependency = require("@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 = (0, import_path3.resolve)(entryPath);
-    if (!(0, import_fs3.existsSync)(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 (0, import_promises3.readFile)(absoluteEntryPath, "utf8");
-    const resolver = new import_dependency.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 = (0, import_dependency.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: (0, import_crypto3.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 = (0, import_path3.resolve)(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 = (0, import_path3.resolve)(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 = (0, import_dependency.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 = (0, import_path3.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 exports2 = {};
-      const module2 = { exports: exports2 };
-      if (executeCode3) {
-        executeCode3(code, exports2, module2, React);
-      } else {
-        const fn = new Function("exports", "module", "React", code);
-        fn(exports2, module2, React);
-      }
-      const Component = module2.exports.default || module2.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);
-}
+// libs/ui/src/bundler/index.ts
+var import_bundler4 = require("@frontmcp/uipack/bundler");
+var import_bundler5 = require("@frontmcp/uipack/bundler");
+var import_bundler6 = require("@frontmcp/uipack/bundler");
+var import_bundler7 = require("@frontmcp/uipack/bundler");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ALL_PLATFORMS,
   BundlerCache,
   ComponentBuilder,
   DEFAULT_BUNDLER_OPTIONS,
@@ -3675,6 +3134,8 @@ async function createRedisBuilder(redisClient, keyPrefix = "frontmcp:ui:build:")
   DEFAULT_STORAGE_OPTIONS,
   ExecutionError,
   FilesystemStorage,
+  HYBRID_DATA_PLACEHOLDER,
+  HYBRID_INPUT_PLACEHOLDER,
   InMemoryBundler,
   RedisStorage,
   STATIC_HTML_CDN,