@frontmcp/uipack 0.6.1 → 0.6.2

package/build/index.js

@@ -30,13 +30,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// libs/uipack/src/utils/safe-stringify.ts
-var init_safe_stringify = __esm({
-  "libs/uipack/src/utils/safe-stringify.ts"() {
-    "use strict";
-  }
-});
-
 // libs/uipack/src/utils/escape-html.ts
 function escapeHtml(str) {
   if (str === null || str === void 0) {
@@ -48,6 +41,12 @@ function escapeHtml(str) {
 function escapeHtmlAttr(str) {
   return str.replace(/&/g, "&").replace(/"/g, """);
 }
+function escapeJsString(str) {
+  return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function escapeScriptClose(jsonString) {
+  return jsonString.replace(/<\//g, "<\\/");
+}
 var init_escape_html = __esm({
   "libs/uipack/src/utils/escape-html.ts"() {
     "use strict";
@@ -58,7 +57,6 @@ var init_escape_html = __esm({
 var init_utils = __esm({
   "libs/uipack/src/utils/index.ts"() {
     "use strict";
-    init_safe_stringify();
     init_escape_html();
   }
 });
@@ -289,7 +287,6 @@ var init_helpers = __esm({
 // libs/uipack/src/handlebars/expression-extractor.ts
 function extractExpressions(template) {
   const expressions = [];
-  const lines = template.split("\n");
   const positionMap = buildPositionMap(template);
   let match;
   EXPRESSION_REGEX.lastIndex = 0;
@@ -684,7 +681,7 @@ async function calculateComponentHash(options) {
   const {
     entryPath,
     baseDir = (0, import_path.dirname)(entryPath),
-    externals = [],
+    externals: _externals = [],
     dependencies = {},
     bundleOptions = {},
     maxDepth = 10
@@ -816,7 +813,7 @@ function getPackagePeerDependencies(packageName, registry = DEFAULT_CDN_REGISTRY
   }
   return [];
 }
-function resolveAllDependencies(packageNames, platform = "unknown", registry = DEFAULT_CDN_REGISTRY) {
+function resolveAllDependencies(packageNames, _platform = "unknown", registry = DEFAULT_CDN_REGISTRY) {
   const resolved = /* @__PURE__ */ new Set();
   const queue = [...packageNames];
   while (queue.length > 0) {
@@ -2731,8 +2728,10 @@ var init_component_builder = __esm({
           return void 0;
         }
         try {
-          const React = await import("react");
-          const ReactDOMServer = await import("react-dom/server");
+          const reactPkg = "react";
+          const reactDomServerPkg = "react-dom/server";
+          const React = await import(reactPkg);
+          const ReactDOMServer = await import(reactDomServerPkg);
           const exports2 = {};
           const module2 = { exports: exports2 };
           if (executeCode) {
@@ -2760,51 +2759,80 @@ var init_component_builder = __esm({
 // libs/uipack/src/build/index.ts
 var build_exports = {};
 __export(build_exports, {
+  BaseBuilder: () => BaseBuilder,
+  CDN_URLS: () => CDN_URLS,
   CLAUDE_PLATFORM: () => CLAUDE_PLATFORM,
   CLOUDFLARE_CDN: () => CLOUDFLARE_CDN,
+  CLOUDFLARE_CDN_URLS: () => CLOUDFLARE_CDN_URLS,
   DEFAULT_CSP_BY_TYPE: () => DEFAULT_CSP_BY_TYPE,
+  DEFAULT_EXTERNALS: () => DEFAULT_EXTERNALS,
   DEFAULT_RENDERER_ASSETS: () => DEFAULT_RENDERER_ASSETS,
   DEFAULT_THEME: () => DEFAULT_THEME,
+  EXTERNAL_GLOBALS: () => EXTERNAL_GLOBALS,
   HANDLEBARS_CDN: () => HANDLEBARS_CDN,
+  HYBRID_DATA_PLACEHOLDER: () => HYBRID_DATA_PLACEHOLDER,
+  HYBRID_INPUT_PLACEHOLDER: () => HYBRID_INPUT_PLACEHOLDER,
+  HybridBuilder: () => HybridBuilder,
+  InlineBuilder: () => InlineBuilder,
   MARKED_CDN: () => MARKED_CDN,
   MDX_RUNTIME_CDN: () => MDX_RUNTIME_CDN,
   OPENAI_PLATFORM: () => OPENAI_PLATFORM,
-  REACT_CDN: () => REACT_CDN2,
+  REACT_CDN: () => REACT_CDN,
   REACT_DOM_CDN: () => REACT_DOM_CDN,
+  StaticBuilder: () => StaticBuilder,
   TAILWIND_CDN: () => TAILWIND_CDN,
   batchBuildWidgets: () => batchBuildWidgets,
+  buildAlertComponent: () => buildAlertComponent,
+  buildBadgeComponent: () => buildBadgeComponent,
+  buildButtonComponent: () => buildButtonComponent,
   buildCDNInfoForUIType: () => buildCDNInfoForUIType,
   buildCDNScriptTag: () => buildCDNScriptTag,
   buildCSPForType: () => buildCSPForType,
   buildCSPMetaContent: () => buildCSPMetaContent,
+  buildCardComponent: () => buildCardComponent,
   buildCloudflareScriptTag: () => buildCloudflareScriptTag,
   buildCloudflareStylesheetTag: () => buildCloudflareStylesheetTag,
   buildFileComponent: () => buildFileComponent,
   buildFileComponents: () => buildFileComponents,
+  buildNamespaceExport: () => buildNamespaceExport,
   buildScriptsForUIType: () => buildScriptsForUIType,
   buildStaticWidget: () => buildStaticWidget,
+  buildStyleConstants: () => buildStyleConstants,
   buildTailwindScriptTag: () => buildTailwindScriptTag,
   buildToolResponseMeta: () => buildToolResponseMeta,
   buildToolUI: () => buildToolUI,
   buildToolUIMulti: () => buildToolUIMulti,
   buildToolWidgetManifest: () => buildToolWidgetManifest,
+  buildUIComponentsRuntime: () => buildUIComponentsRuntime,
+  createExternalizedConfig: () => createExternalizedConfig,
+  createExternalsBanner: () => createExternalsBanner,
+  createInlineConfig: () => createInlineConfig,
   createTemplateHelpers: () => createTemplateHelpers,
+  createTransformConfig: () => createTransformConfig,
   detectUIType: () => detectUIType,
+  generateCdnScriptTags: () => generateCdnScriptTags,
+  generateGlobalsSetupScript: () => generateGlobalsSetupScript,
   getCachedFileComponent: () => getCachedFileComponent,
   getDefaultAssets: () => getDefaultAssets,
+  getHybridPlaceholders: () => getHybridPlaceholders,
   getOutputModeForClient: () => getOutputModeForClient,
   getPlatformFromClientInfo: () => getPlatformFromClientInfo,
   getRendererAssets: () => getRendererAssets,
   getTailwindForPlatform: () => getTailwindForPlatform,
   getURLsToPreFetch: () => getURLsToPreFetch,
   hasInlineScripts: () => hasInlineScripts,
+  injectHybridData: () => injectHybridData,
+  injectHybridDataFull: () => injectHybridDataFull,
+  injectHybridDataWithTrigger: () => injectHybridDataWithTrigger,
   isBundlingMode: () => isBundlingMode,
   isDisplayMode: () => isDisplayMode,
   isFilePathTemplate: () => isFilePathTemplate,
+  isHybridShell: () => isHybridShell,
   isOutputMode: () => isOutputMode,
   isResourceMode: () => isResourceMode,
   isUIType: () => isUIType,
-  needsFileComponentRebuild: () => needsFileComponentRebuild
+  needsFileComponentRebuild: () => needsFileComponentRebuild,
+  needsInputInjection: () => needsInputInjection
 });
 module.exports = __toCommonJS(build_exports);
 
@@ -3656,9 +3684,6 @@ var BRIDGE_SCRIPT_TAGS = {
   gemini: `<script>${generatePlatformBundle("gemini")}</script>`
 };
 
-// libs/uipack/src/runtime/mcp-bridge.ts
-var FRONTMCP_BRIDGE_RUNTIME = BRIDGE_SCRIPT_TAGS.universal;
-
 // libs/uipack/src/runtime/csp.ts
 var DEFAULT_CDN_DOMAINS = [
   "https://cdn.jsdelivr.net",
@@ -3781,9 +3806,6 @@ var scriptCache = /* @__PURE__ */ new Map();
 function getCachedScript(url) {
   return scriptCache.get(url);
 }
-function isScriptCached(url) {
-  return scriptCache.has(url);
-}
 function buildFontPreconnect() {
   return CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
 }
@@ -3816,8 +3838,9 @@ function buildCdnScripts(options = {}) {
   const scripts = [];
   if (inline) {
     if (tailwind) {
-      if (isScriptCached(CDN.tailwind)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)));
+      const cached = getCachedScript(CDN.tailwind);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first."
@@ -3825,8 +3848,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (htmx) {
-      if (isScriptCached(CDN.htmx.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)));
+      const cached = getCachedScript(CDN.htmx.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first."
@@ -3834,8 +3858,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (alpine) {
-      if (isScriptCached(CDN.alpine.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)));
+      const cached = getCachedScript(CDN.alpine.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first."
@@ -3843,8 +3868,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (icons) {
-      if (isScriptCached(CDN.icons.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)));
+      const cached = getCachedScript(CDN.icons.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first."
@@ -3886,11 +3912,12 @@ var CLAUDE_PLATFORM = {
   id: "claude",
   name: "Claude (Artifacts)",
   supportsWidgets: true,
+  // Claude Artifacts support interactive widgets
   supportsTailwind: true,
   supportsHtmx: false,
   // Network blocked, HTMX won't work for API calls
-  networkMode: "blocked",
-  scriptStrategy: "inline",
+  networkMode: "limited",
+  scriptStrategy: "cdn",
   maxInlineSize: 100 * 1024,
   // 100KB limit for artifacts
   cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
@@ -4140,17 +4167,31 @@ function emitColorScale(lines, name, scale) {
     if (value) lines.push(`--color-${name}-${shade}: ${value};`);
   }
 }
+var OPACITY_VARIANTS = [10, 20, 30, 50, 70, 90];
+function emitColorWithOpacityVariants(lines, name, value) {
+  lines.push(`--color-${name}: ${value};`);
+  for (const opacity of OPACITY_VARIANTS) {
+    lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
+  }
+}
+function emitBrandColorWithVariants(lines, name, value) {
+  lines.push(`--color-${name}: ${value};`);
+  lines.push(`--color-${name}-hover: color-mix(in oklch, ${value} 85%, black);`);
+  for (const opacity of OPACITY_VARIANTS) {
+    lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
+  }
+}
 function buildThemeCss(theme) {
   const lines = [];
   const semantic = theme.colors.semantic;
   if (typeof semantic.primary === "string") {
-    lines.push(`--color-primary: ${semantic.primary};`);
+    emitBrandColorWithVariants(lines, "primary", semantic.primary);
   } else if (semantic.primary) {
     emitColorScale(lines, "primary", semantic.primary);
   }
   if (semantic.secondary) {
     if (typeof semantic.secondary === "string") {
-      lines.push(`--color-secondary: ${semantic.secondary};`);
+      emitBrandColorWithVariants(lines, "secondary", semantic.secondary);
     } else {
       emitColorScale(lines, "secondary", semantic.secondary);
     }
@@ -4169,10 +4210,10 @@ function buildThemeCss(theme) {
       emitColorScale(lines, "neutral", semantic.neutral);
     }
   }
-  if (semantic.success) lines.push(`--color-success: ${semantic.success};`);
-  if (semantic.warning) lines.push(`--color-warning: ${semantic.warning};`);
-  if (semantic.danger) lines.push(`--color-danger: ${semantic.danger};`);
-  if (semantic.info) lines.push(`--color-info: ${semantic.info};`);
+  if (semantic.success) emitColorWithOpacityVariants(lines, "success", semantic.success);
+  if (semantic.warning) emitColorWithOpacityVariants(lines, "warning", semantic.warning);
+  if (semantic.danger) emitColorWithOpacityVariants(lines, "danger", semantic.danger);
+  if (semantic.info) emitColorWithOpacityVariants(lines, "info", semantic.info);
   const surface = theme.colors.surface;
   if (surface?.background) lines.push(`--color-background: ${surface.background};`);
   if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);
@@ -5055,35 +5096,25 @@ var ComponentCache = class {
 };
 var componentCache = new ComponentCache();
 
-// libs/uipack/src/renderers/mdx.renderer.ts
-var REACT_CDN = {
-  react: "https://unpkg.com/react@18/umd/react.production.min.js",
-  reactDom: "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+// libs/uipack/src/renderers/mdx-client.renderer.ts
+init_utils();
+function buildReactCdnUrls(version = "19") {
+  return {
+    react: `https://esm.sh/react@${version}`,
+    reactDom: `https://esm.sh/react-dom@${version}/client`,
+    jsxRuntime: `https://esm.sh/react@${version}/jsx-runtime`
+  };
+}
+var DEFAULT_CDN = {
+  mdx: "https://esm.sh/@mdx-js/mdx@3",
+  ...buildReactCdnUrls("19")
 };
-var INLINE_MDX_PLACEHOLDER = `
-// MDX runtime not available inline yet.
-// For blocked-network platforms, use pre-rendered HTML templates.
-console.warn('[FrontMCP] MDX hydration not available on this platform.');
-`;
-var MdxRenderer = class {
-  type = "mdx";
-  priority = 10;
-  // Between HTML (0) and React (20)
-  /**
-   * Lazy-loaded modules.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  React = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ReactDOMServer = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  jsxRuntime = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  mdxEvaluate = null;
+var MdxClientRenderer = class {
+  type = "mdx-client";
+  priority = 8;
+  // Lower than server-side MDX (10)
   /**
    * Check if this renderer can handle the given template.
-   *
-   * Accepts strings containing MDX syntax (Markdown + JSX).
    */
   canHandle(template) {
     if (typeof template !== "string") {
@@ -5092,11 +5123,9 @@ var MdxRenderer = class {
     return containsMdxSyntax(template);
   }
   /**
-   * Transpile MDX to executable JavaScript.
-   *
-   * Uses @mdx-js/mdx to compile MDX source to a module.
-   * Note: For MDX, we use evaluate() which combines compile + run,
-   * so this method just returns the source hash for caching purposes.
+   * Prepare MDX template for rendering.
+   * Caches the template hash for deduplication. Actual MDX compilation
+   * happens client-side via CDN-loaded @mdx-js/mdx in the browser.
    */
   async transpile(template, _options) {
     const hash = hashString(template);
@@ -5106,7 +5135,6 @@ var MdxRenderer = class {
     }
     const transpileResult = {
       code: template,
-      // Store original MDX for evaluate()
       hash,
       cached: false
     };
@@ -5114,37 +5142,20 @@ var MdxRenderer = class {
     return transpileResult;
   }
   /**
-   * Render MDX template to HTML string.
+   * Render MDX template to HTML with CDN scripts.
    *
-   * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
-   * then renders the resulting React component to HTML via SSR.
+   * The returned HTML includes:
+   * - A container div for the rendered content
+   * - Script tags that load React and MDX from CDN
+   * - Inline script that compiles and renders the MDX
    */
   async render(template, context, options) {
-    await this.loadReact();
-    await this.loadMdx();
-    if (!this.mdxEvaluate) {
-      throw new Error("MDX compilation requires @mdx-js/mdx. Install it: npm install @mdx-js/mdx");
-    }
-    const templateHash = hashString(template);
-    const cacheKey = `mdx-component:${templateHash}`;
-    let Content = componentCache.get(cacheKey);
-    if (!Content) {
-      const result = await this.mdxEvaluate(template, {
-        ...this.jsxRuntime,
-        Fragment: this.React.Fragment,
-        development: false
-      });
-      Content = result.default;
-      componentCache.set(cacheKey, Content);
-    }
-    const mdxComponents = {
-      // User-provided components from tool config
-      ...options?.mdxComponents,
-      // Wrapper that provides context to the content
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      wrapper: ({ children }) => {
-        return this.React.createElement("div", { className: "mdx-content" }, children);
-      }
+    const containerId = options?.containerId || "mdx-content";
+    const showLoading = options?.showLoading !== false;
+    const loadingMessage = options?.loadingMessage || "Loading...";
+    const cdn = {
+      ...DEFAULT_CDN,
+      ...options?.cdn
     };
     const props = {
       input: context.input,
@@ -5152,82 +5163,80 @@ var MdxRenderer = class {
       structuredContent: context.structuredContent,
       helpers: context.helpers
     };
+    const reservedProps = /* @__PURE__ */ new Set(["input", "output", "structuredContent", "helpers", "components"]);
+    const outputProps = typeof context.output === "object" && context.output !== null ? Object.fromEntries(Object.entries(context.output).filter(([key]) => !reservedProps.has(key))) : {};
     const spreadProps = {
-      ...props,
-      ...typeof context.output === "object" && context.output !== null ? context.output : {}
+      ...outputProps,
+      ...props
     };
-    const element = this.React.createElement(Content, {
-      components: mdxComponents,
-      ...spreadProps
+    const escapedMdx = escapeScriptClose(JSON.stringify(template));
+    const escapedProps = escapeScriptClose(JSON.stringify(spreadProps));
+    const safeContainerId = escapeJsString(containerId);
+    const loadingHtml = showLoading ? `<div class="mdx-loading">${escapeHtml(loadingMessage)}</div>` : "";
+    return `
+<div id="${escapeHtml(containerId)}">${loadingHtml}</div>
+<script type="module">
+(async function() {
+  try {
+    // Load dependencies from CDN
+    const [
+      { evaluate },
+      runtime,
+      React,
+      { createRoot }
+    ] = await Promise.all([
+      import('${cdn.mdx}'),
+      import('${cdn.jsxRuntime}'),
+      import('${cdn.react}'),
+      import('${cdn.reactDom}')
+    ]);
+
+    // MDX content and props
+    const mdxSource = ${escapedMdx};
+    const props = ${escapedProps};
+
+    // Compile and evaluate MDX
+    const { default: Content } = await evaluate(mdxSource, {
+      ...runtime,
+      Fragment: React.Fragment,
+      development: false
     });
-    const html = this.ReactDOMServer.renderToString(element);
-    if (options?.hydrate) {
-      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return `<div data-mdx-hydrate="true" data-props='${escapedProps}'>${html}</div>`;
+
+    // Render to DOM
+    const container = document.getElementById('${safeContainerId}');
+    if (container) {
+      const root = createRoot(container);
+      root.render(React.createElement(Content, props));
     }
-    return html;
+  } catch (error) {
+    console.error('[FrontMCP] MDX client rendering failed:', error);
+    const container = document.getElementById('${safeContainerId}');
+    if (container) {
+      container.innerHTML = '<div class="mdx-error">Failed to render MDX content</div>';
+    }
+  }
+})();
+</script>
+`;
   }
   /**
-   * Get runtime scripts for client-side functionality.
+   * Get runtime scripts - not needed for client renderer since scripts are inline.
    */
   getRuntimeScripts(platform) {
     if (platform.networkMode === "blocked") {
       return {
         headScripts: "",
-        inlineScripts: INLINE_MDX_PLACEHOLDER,
+        inlineScripts: `console.warn('[FrontMCP] Client-side MDX rendering requires network access. Use @frontmcp/ui for SSR.');`,
         isInline: true
       };
     }
     return {
-      headScripts: `
-        <script crossorigin src="${REACT_CDN.react}"></script>
-        <script crossorigin src="${REACT_CDN.reactDom}"></script>
-      `,
+      headScripts: "",
       isInline: false
     };
   }
-  /**
-   * Load React and ReactDOMServer modules.
-   */
-  async loadReact() {
-    if (this.React && this.ReactDOMServer && this.jsxRuntime) {
-      return;
-    }
-    try {
-      const [react, reactDomServer, jsxRuntime] = await Promise.all([
-        import("react"),
-        import("react-dom/server"),
-        import("react/jsx-runtime")
-      ]);
-      this.React = react;
-      this.ReactDOMServer = reactDomServer;
-      this.jsxRuntime = jsxRuntime;
-    } catch {
-      throw new Error("React is required for MdxRenderer. Install react and react-dom: npm install react react-dom");
-    }
-  }
-  /**
-   * Load @mdx-js/mdx evaluate function.
-   *
-   * evaluate() is the cleanest way to run MDX - it combines
-   * compile and run in a single step, handling all the runtime
-   * injection automatically.
-   */
-  async loadMdx() {
-    if (this.mdxEvaluate) {
-      return;
-    }
-    try {
-      const mdx = await import("@mdx-js/mdx");
-      this.mdxEvaluate = mdx.evaluate;
-    } catch {
-      console.warn(
-        "[@frontmcp/ui] @mdx-js/mdx not available. MDX rendering disabled. Install @mdx-js/mdx to enable: npm install @mdx-js/mdx"
-      );
-    }
-  }
 };
-var mdxRenderer = new MdxRenderer();
+var mdxClientRenderer = new MdxClientRenderer();
 
 // libs/uipack/src/types/ui-runtime.ts
 function isUIType(value) {
@@ -5297,7 +5306,7 @@ var DEFAULT_RENDERER_ASSETS = {
 };
 
 // libs/uipack/src/build/cdn-resources.ts
-var REACT_CDN2 = {
+var REACT_CDN = {
   url: "https://esm.sh/react@19",
   crossorigin: "anonymous"
 };
@@ -5327,8 +5336,9 @@ var CLOUDFLARE_CDN = {
    * Use this instead of TAILWIND_CDN for Claude Artifacts.
    */
   tailwindCss: {
-    url: "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",
-    type: "stylesheet"
+    url: "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.min.js",
+    integrity: "sha512-TscjjxDy2iXx5s55Ar78c01JDHUug0K5aw4YKId9Yuocjx3ueX/X9PFyH5XNRVWqagx3TtcQWQVBaHAIPFjiFA==",
+    crossorigin: "anonymous"
   },
   /**
    * HTMX for dynamic interactions.
@@ -5368,7 +5378,7 @@ function getTailwindForPlatform(platform) {
   if (platform === "openai") {
     return buildCDNScriptTag(TAILWIND_CDN);
   }
-  return `<link href="${CLOUDFLARE_CDN.tailwindCss.url}" rel="stylesheet">`;
+  return buildCDNScriptTag(CLOUDFLARE_CDN.tailwindCss);
 }
 function buildCloudflareStylesheetTag(url) {
   return `<link href="${url}" rel="stylesheet">`;
@@ -5395,13 +5405,13 @@ function getDefaultAssets(uiType, mode = "cdn") {
     case "react":
       return {
         ...baseAssets,
-        react: REACT_CDN2,
+        react: REACT_CDN,
         reactDom: REACT_DOM_CDN
       };
     case "mdx":
       return {
         ...baseAssets,
-        react: REACT_CDN2,
+        react: REACT_CDN,
         reactDom: REACT_DOM_CDN,
         mdxRuntime: MDX_RUNTIME_CDN,
         markdown: MARKED_CDN
@@ -5419,7 +5429,7 @@ function getDefaultAssets(uiType, mode = "cdn") {
     case "auto":
       return {
         ...baseAssets,
-        react: REACT_CDN2,
+        react: REACT_CDN,
         reactDom: REACT_DOM_CDN,
         markdown: MARKED_CDN,
         handlebars: HANDLEBARS_CDN
@@ -5497,13 +5507,13 @@ function buildCDNInfoForUIType(uiType) {
   switch (uiType) {
     case "react":
       return {
-        react: REACT_CDN2.url,
+        react: REACT_CDN.url,
         reactDom: REACT_DOM_CDN.url,
         tailwind: TAILWIND_CDN.url
       };
     case "mdx":
       return {
-        react: REACT_CDN2.url,
+        react: REACT_CDN.url,
         reactDom: REACT_DOM_CDN.url,
         mdxRuntime: MDX_RUNTIME_CDN.url,
         marked: MARKED_CDN.url,
@@ -5522,7 +5532,7 @@ function buildCDNInfoForUIType(uiType) {
     case "auto":
     default:
       return {
-        react: REACT_CDN2.url,
+        react: REACT_CDN.url,
         reactDom: REACT_DOM_CDN.url,
         handlebars: HANDLEBARS_CDN.url,
         marked: MARKED_CDN.url,
@@ -5567,9 +5577,6 @@ function detectFormatFromPath(pathOrUrl) {
   return "html";
 }
 
-// libs/uipack/src/validation/error-box.ts
-init_utils();
-
 // libs/uipack/src/validation/schema-paths.ts
 var import_zod = require("zod");
 function extractSchemaPaths(schema, prefix = "output", options = {}) {
@@ -6113,7 +6120,7 @@ async function processTemplate(resolved, options) {
         structuredContent: context.structuredContent,
         helpers: defaultHelpers
       };
-      const html = await mdxRenderer.render(processedContent, templateContext);
+      const html = await mdxClientRenderer.render(processedContent, templateContext);
       return {
         html,
         format: "mdx"
@@ -6239,7 +6246,7 @@ async function generateHash(content) {
   return Math.abs(hash).toString(16).padStart(8, "0");
 }
 async function buildToolWidgetManifest(options) {
-  const { toolName, uiConfig, schema, theme, sampleInput, sampleOutput, outputSchema, inputSchema } = options;
+  const { toolName, uiConfig, schema, theme: _theme, sampleInput, sampleOutput, outputSchema, inputSchema } = options;
   const uiType = isUIType(uiConfig.uiType) ? uiConfig.uiType : detectUIType(uiConfig.template);
   const displayMode = uiConfig.displayMode ?? "inline";
   const bundlingMode = uiConfig.bundlingMode ?? "static";
@@ -6377,7 +6384,7 @@ function ensureRenderersRegistered() {
     return;
   }
   if (!rendererRegistry.has("mdx")) {
-    rendererRegistry.register(mdxRenderer);
+    rendererRegistry.register(mdxClientRenderer);
   }
   renderersInitialized = true;
 }
@@ -6665,6 +6672,1684 @@ function getPlatformFromClientInfo(clientInfo) {
   return "unknown";
 }
 
+// libs/uipack/src/build/hybrid-data.ts
+var HYBRID_DATA_PLACEHOLDER = "__FRONTMCP_OUTPUT_PLACEHOLDER__";
+var HYBRID_INPUT_PLACEHOLDER = "__FRONTMCP_INPUT_PLACEHOLDER__";
+function injectHybridData(shell, data, placeholder = HYBRID_DATA_PLACEHOLDER) {
+  let jsonData;
+  try {
+    jsonData = JSON.stringify(JSON.stringify(data));
+    jsonData = jsonData.slice(1, -1);
+  } catch {
+    jsonData = "null";
+  }
+  return shell.replace(placeholder, jsonData);
+}
+function injectHybridDataFull(shell, input, output) {
+  let result = shell;
+  result = injectHybridData(result, output, HYBRID_DATA_PLACEHOLDER);
+  result = injectHybridData(result, input, HYBRID_INPUT_PLACEHOLDER);
+  return result;
+}
+function isHybridShell(html, placeholder = HYBRID_DATA_PLACEHOLDER) {
+  return html.includes(placeholder);
+}
+function needsInputInjection(html) {
+  return html.includes(HYBRID_INPUT_PLACEHOLDER);
+}
+function getHybridPlaceholders(html) {
+  return {
+    hasOutput: html.includes(HYBRID_DATA_PLACEHOLDER),
+    hasInput: html.includes(HYBRID_INPUT_PLACEHOLDER)
+  };
+}
+function injectHybridDataWithTrigger(shell, input, output) {
+  let result = injectHybridDataFull(shell, input, output);
+  let outputJson;
+  try {
+    outputJson = JSON.stringify(output);
+  } catch {
+    outputJson = "null";
+  }
+  const triggerScript = `
+<script>
+(function() {
+  var data = ${outputJson};
+
+  function triggerUpdate() {
+    if (window.__frontmcp && window.__frontmcp.updateOutput) {
+      window.__frontmcp.updateOutput(data);
+    } else if (window.mcpBridge) {
+      // Trigger via bridge listeners
+      window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: data }));
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', triggerUpdate);
+  } else {
+    // Small delay to ensure store is initialized
+    setTimeout(triggerUpdate, 0);
+  }
+})();
+</script>`;
+  result = result.replace("</body>", triggerScript + "\n</body>");
+  return result;
+}
+
+// libs/uipack/src/styles/variants.ts
+var CARD_VARIANTS = {
+  default: "bg-white border border-border rounded-xl shadow-sm",
+  outlined: "bg-transparent border-2 border-border rounded-xl",
+  elevated: "bg-white rounded-xl shadow-lg",
+  filled: "bg-gray-50 rounded-xl",
+  ghost: "bg-transparent"
+};
+var CARD_SIZES = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+var BADGE_VARIANTS = {
+  default: "bg-gray-100 text-gray-800",
+  primary: "bg-primary/10 text-primary",
+  secondary: "bg-secondary/10 text-secondary",
+  success: "bg-success/10 text-success",
+  warning: "bg-warning/10 text-warning",
+  danger: "bg-danger/10 text-danger",
+  info: "bg-info/10 text-info",
+  outline: "border border-border text-text-primary bg-transparent"
+};
+var BADGE_SIZES = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-xs",
+  lg: "px-3 py-1.5 text-sm"
+};
+var BADGE_DOT_SIZES = {
+  sm: "w-2 h-2",
+  md: "w-2.5 h-2.5",
+  lg: "w-3 h-3"
+};
+var BADGE_DOT_VARIANTS = {
+  default: "bg-gray-400",
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  outline: "border border-current"
+};
+var BUTTON_VARIANTS = {
+  primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
+  secondary: "bg-secondary hover:bg-secondary/90 text-white shadow-sm",
+  outline: "border-2 border-primary text-primary bg-transparent hover:bg-primary/10",
+  ghost: "text-text-primary hover:bg-gray-100",
+  danger: "bg-danger hover:bg-danger/90 text-white shadow-sm",
+  success: "bg-success hover:bg-success/90 text-white shadow-sm",
+  link: "text-primary hover:text-primary/80 hover:underline"
+};
+var BUTTON_SIZES = {
+  xs: "px-2.5 py-1.5 text-xs",
+  sm: "px-3 py-2 text-sm",
+  md: "px-4 py-2.5 text-sm",
+  lg: "px-5 py-3 text-base",
+  xl: "px-6 py-3.5 text-lg"
+};
+var BUTTON_ICON_SIZES = {
+  xs: "p-1.5",
+  sm: "p-2",
+  md: "p-2.5",
+  lg: "p-3",
+  xl: "p-4"
+};
+var BUTTON_BASE_CLASSES = "cursor-pointer inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2";
+var ALERT_VARIANTS = {
+  info: {
+    container: "bg-info/10 border-info/30 text-info",
+    icon: "text-info"
+  },
+  success: {
+    container: "bg-success/10 border-success/30 text-success",
+    icon: "text-success"
+  },
+  warning: {
+    container: "bg-warning/10 border-warning/30 text-warning",
+    icon: "text-warning"
+  },
+  danger: {
+    container: "bg-danger/10 border-danger/30 text-danger",
+    icon: "text-danger"
+  },
+  neutral: {
+    container: "bg-gray-50 border-gray-200 text-gray-800",
+    icon: "text-gray-500"
+  }
+};
+var ALERT_BASE_CLASSES = "rounded-lg border p-4";
+var ALERT_ICONS = {
+  info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  success: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  warning: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+  </svg>`,
+  danger: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  neutral: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`
+};
+var CLOSE_ICON = `<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+</svg>`;
+var LOADING_SPINNER = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>`;
+
+// libs/uipack/src/build/ui-components-browser.ts
+function buildStyleConstants() {
+  return `
+// Style Constants (from @frontmcp/uipack/styles)
+var CARD_VARIANTS = ${JSON.stringify(CARD_VARIANTS)};
+var CARD_SIZES = ${JSON.stringify(CARD_SIZES)};
+
+var BUTTON_VARIANTS = ${JSON.stringify(BUTTON_VARIANTS)};
+var BUTTON_SIZES = ${JSON.stringify(BUTTON_SIZES)};
+var BUTTON_ICON_SIZES = ${JSON.stringify(BUTTON_ICON_SIZES)};
+var BUTTON_BASE_CLASSES = ${JSON.stringify(BUTTON_BASE_CLASSES)};
+var LOADING_SPINNER = ${JSON.stringify(LOADING_SPINNER)};
+
+var BADGE_VARIANTS = ${JSON.stringify(BADGE_VARIANTS)};
+var BADGE_SIZES = ${JSON.stringify(BADGE_SIZES)};
+var BADGE_DOT_SIZES = ${JSON.stringify(BADGE_DOT_SIZES)};
+var BADGE_DOT_VARIANTS = ${JSON.stringify(BADGE_DOT_VARIANTS)};
+
+var ALERT_VARIANTS = ${JSON.stringify(ALERT_VARIANTS)};
+var ALERT_BASE_CLASSES = ${JSON.stringify(ALERT_BASE_CLASSES)};
+var ALERT_ICONS = ${JSON.stringify(ALERT_ICONS)};
+var CLOSE_ICON = ${JSON.stringify(CLOSE_ICON)};
+
+// Utility: Join CSS classes, filtering out falsy values
+function cn() {
+  var result = [];
+  for (var i = 0; i < arguments.length; i++) {
+    if (arguments[i]) result.push(arguments[i]);
+  }
+  return result.join(' ');
+}
+`;
+}
+function buildCardComponent() {
+  return `
+// Card Component (matches @frontmcp/ui/react/Card)
+window.Card = function Card(props) {
+  var title = props.title;
+  var subtitle = props.subtitle;
+  var headerActions = props.headerActions;
+  var footer = props.footer;
+  var variant = props.variant || 'default';
+  var size = props.size || 'md';
+  var className = props.className;
+  var id = props.id;
+  var clickable = props.clickable;
+  var href = props.href;
+  var children = props.children;
+
+  var variantClasses = CARD_VARIANTS[variant] || CARD_VARIANTS.default;
+  var sizeClasses = CARD_SIZES[size] || CARD_SIZES.md;
+  var clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';
+  var allClasses = cn(variantClasses, sizeClasses, clickableClasses, className);
+
+  var hasHeader = title || subtitle || headerActions;
+
+  var 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;
+
+  var footerElement = footer ? React.createElement('div', {
+    className: 'mt-4 pt-4 border-t border-divider'
+  }, footer) : null;
+
+  var content = React.createElement(React.Fragment, null, [
+    headerElement,
+    children,
+    footerElement
+  ]);
+
+  if (href) {
+    return React.createElement('a', {
+      href: href,
+      className: allClasses,
+      id: id
+    }, content);
+  }
+
+  return React.createElement('div', {
+    className: allClasses,
+    id: id
+  }, content);
+};
+`;
+}
+function buildButtonComponent() {
+  return `
+// Button Component (matches @frontmcp/ui/react/Button)
+window.Button = function Button(props) {
+  var variant = props.variant || 'primary';
+  var size = props.size || 'md';
+  var disabled = props.disabled || false;
+  var loading = props.loading || false;
+  var fullWidth = props.fullWidth || false;
+  var iconPosition = props.iconPosition || 'left';
+  var icon = props.icon;
+  var iconOnly = props.iconOnly || false;
+  var type = props.type || 'button';
+  var className = props.className;
+  var onClick = props.onClick;
+  var children = props.children;
+
+  var variantClasses = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.primary;
+  var sizeClasses = iconOnly
+    ? (BUTTON_ICON_SIZES[size] || BUTTON_ICON_SIZES.md)
+    : (BUTTON_SIZES[size] || BUTTON_SIZES.md);
+
+  var disabledClasses = (disabled || loading) ? 'opacity-50 cursor-not-allowed' : '';
+  var widthClasses = fullWidth ? 'w-full' : '';
+
+  var allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
+
+  var iconElement = icon ? React.createElement('span', {
+    className: iconPosition === 'left' ? 'mr-2' : 'ml-2'
+  }, icon) : null;
+
+  var loadingSpinner = loading ? React.createElement('span', {
+    className: 'mr-2',
+    dangerouslySetInnerHTML: { __html: LOADING_SPINNER }
+  }) : null;
+
+  return React.createElement('button', {
+    type: type,
+    className: allClasses,
+    disabled: disabled || loading,
+    onClick: onClick
+  }, [
+    loadingSpinner,
+    !loading && icon && iconPosition === 'left' ? iconElement : null,
+    !iconOnly ? children : null,
+    !loading && icon && iconPosition === 'right' ? iconElement : null
+  ]);
+};
+`;
+}
+function buildBadgeComponent() {
+  return `
+// Badge Component (matches @frontmcp/ui/react/Badge)
+window.Badge = function Badge(props) {
+  var variant = props.variant || 'default';
+  var size = props.size || 'md';
+  var pill = props.pill || false;
+  var icon = props.icon;
+  var dot = props.dot || false;
+  var className = props.className;
+  var removable = props.removable || false;
+  var onRemove = props.onRemove;
+  var children = props.children;
+
+  // Handle dot badge (status indicator)
+  if (dot) {
+    var dotSizeClasses = BADGE_DOT_SIZES[size] || BADGE_DOT_SIZES.md;
+    var dotVariantClasses = BADGE_DOT_VARIANTS[variant] || BADGE_DOT_VARIANTS.default;
+    var dotClasses = cn('inline-block rounded-full', dotSizeClasses, dotVariantClasses, className);
+
+    var label = typeof children === 'string' ? children : undefined;
+
+    return React.createElement('span', {
+      className: dotClasses,
+      'aria-label': label,
+      title: label
+    });
+  }
+
+  var variantClasses = BADGE_VARIANTS[variant] || BADGE_VARIANTS.default;
+  var sizeClasses = BADGE_SIZES[size] || BADGE_SIZES.md;
+
+  var baseClasses = cn(
+    'inline-flex items-center font-medium',
+    pill ? 'rounded-full' : 'rounded-md',
+    variantClasses,
+    sizeClasses,
+    className
+  );
+
+  var 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', { key: 'icon', className: 'mr-1' }, icon) : null,
+    children,
+    closeButton
+  ]);
+};
+`;
+}
+function buildAlertComponent() {
+  return `
+// Alert Component (matches @frontmcp/ui/react/Alert)
+window.Alert = function Alert(props) {
+  var variant = props.variant || 'info';
+  var title = props.title;
+  var icon = props.icon;
+  var showIcon = props.showIcon !== false;
+  var dismissible = props.dismissible || false;
+  var onDismiss = props.onDismiss;
+  var className = props.className;
+  var children = props.children;
+
+  var variantStyles = ALERT_VARIANTS[variant] || ALERT_VARIANTS.info;
+  var allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className);
+
+  // Use custom icon or default variant icon
+  var iconContent = icon || (showIcon ? React.createElement('span', {
+    className: cn('flex-shrink-0', variantStyles.icon),
+    dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] || ALERT_ICONS.info }
+  }) : null);
+
+  var 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', {
+      key: 'icon',
+      className: 'flex-shrink-0 mr-3'
+    }, iconContent) : null,
+    React.createElement('div', {
+      key: 'content',
+      className: 'flex-1'
+    }, [
+      title ? React.createElement('h4', {
+        key: 'title',
+        className: 'font-semibold mb-1'
+      }, title) : null,
+      React.createElement('div', {
+        key: 'body',
+        className: 'text-sm'
+      }, children)
+    ]),
+    dismissButton
+  ]));
+};
+`;
+}
+function buildNamespaceExport() {
+  return `
+// Export to namespace (for require('@frontmcp/ui/react') shim)
+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.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?.[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 stuff 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
+});
+`;
+}
+function buildUIComponentsRuntime(options = {}) {
+  const parts = [
+    "// UI Components (Browser-Compatible)",
+    "// Generated from @frontmcp/ui/react components",
+    "(function() {",
+    buildStyleConstants(),
+    buildCardComponent(),
+    buildButtonComponent(),
+    buildBadgeComponent(),
+    buildAlertComponent(),
+    buildNamespaceExport(),
+    "})();"
+  ];
+  let script = parts.join("\n");
+  if (options.minify) {
+    script = minifyScript(script);
+  }
+  return script;
+}
+function minifyScript(script) {
+  return script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/[^\n]*$/gm, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
+}
+
+// libs/uipack/src/build/builders/base-builder.ts
+var import_esbuild = require("esbuild");
+
+// libs/uipack/src/build/builders/esbuild-config.ts
+var DEFAULT_EXTERNALS = [
+  "react",
+  "react-dom",
+  "react/jsx-runtime",
+  "react/jsx-dev-runtime",
+  "@frontmcp/ui",
+  "@frontmcp/ui/*"
+];
+var EXTERNAL_GLOBALS = {
+  "react": "React",
+  "react-dom": "ReactDOM",
+  "react/jsx-runtime": "jsxRuntime",
+  "react/jsx-dev-runtime": "jsxRuntime",
+  "@frontmcp/ui": "FrontMcpUI"
+};
+function createTransformConfig(options = {}) {
+  const {
+    format = "esm",
+    target = "es2020",
+    minify = false,
+    jsxImportSource = "react"
+  } = options;
+  return {
+    loader: "tsx",
+    format,
+    target,
+    minify,
+    treeShaking: true,
+    jsx: "automatic",
+    jsxImportSource,
+    sourcemap: options.minify ? false : "inline"
+  };
+}
+function createExternalizedConfig(options = {}) {
+  const baseConfig = createTransformConfig({
+    ...options,
+    format: "esm"
+  });
+  return {
+    ...baseConfig,
+    // Add banner to define external namespace objects
+    banner: createExternalsBanner(options.externals || DEFAULT_EXTERNALS)
+  };
+}
+function createExternalsBanner(externals) {
+  const lines = [
+    "// Externalized dependencies - loaded from shell globals"
+  ];
+  for (const pkg of externals) {
+    const globalName = EXTERNAL_GLOBALS[pkg];
+    if (globalName) {
+      const safeName = pkg.replace(/[^a-zA-Z0-9]/g, "_");
+      lines.push(`const __external_${safeName} = window.${globalName};`);
+    }
+  }
+  return lines.join("\n");
+}
+function createInlineConfig(options = {}) {
+  return createTransformConfig({
+    ...options,
+    format: "iife",
+    minify: options.minify ?? true
+  });
+}
+var CDN_URLS = {
+  react: "https://esm.sh/react@19",
+  reactDom: "https://esm.sh/react-dom@19",
+  reactJsxRuntime: "https://esm.sh/react@19/jsx-runtime",
+  frontmcpUI: "https://esm.sh/@frontmcp/ui",
+  tailwind: "https://cdn.tailwindcss.com"
+};
+var CLOUDFLARE_CDN_URLS = {
+  react: "https://cdnjs.cloudflare.com/ajax/libs/react/19.0.0/umd/react.production.min.js",
+  reactDom: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/19.0.0/umd/react-dom.production.min.js",
+  tailwind: "https://cdn.tailwindcss.com"
+};
+function generateCdnScriptTags(useCloudflare = false) {
+  const urls = useCloudflare ? CLOUDFLARE_CDN_URLS : CDN_URLS;
+  if (useCloudflare) {
+    return `
+    <script src="${urls.react}"></script>
+    <script src="${urls.reactDom}"></script>
+    <script src="${urls.tailwind}"></script>
+    `;
+  }
+  return `
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "${CDN_URLS.react}",
+          "react-dom": "${CDN_URLS.reactDom}",
+          "react/jsx-runtime": "${CDN_URLS.reactJsxRuntime}",
+          "@frontmcp/ui": "${CDN_URLS.frontmcpUI}"
+        }
+      }
+    </script>
+    <script src="${CDN_URLS.tailwind}"></script>
+  `;
+}
+function generateGlobalsSetupScript() {
+  return `
+    <script type="module">
+      import React from 'react';
+      import ReactDOM from 'react-dom/client';
+      import * as jsxRuntime from 'react/jsx-runtime';
+
+      // Expose as globals for externalized components
+      window.React = React;
+      window.ReactDOM = ReactDOM;
+      window.jsxRuntime = jsxRuntime;
+
+      // Signal that runtime is ready
+      window.__frontmcpRuntimeReady = true;
+      window.dispatchEvent(new CustomEvent('frontmcp:runtime-ready'));
+    </script>
+  `;
+}
+
+// libs/uipack/src/build/builders/base-builder.ts
+init_utils();
+var BaseBuilder = class {
+  /**
+   * CDN loading mode.
+   */
+  cdnMode;
+  /**
+   * Whether to minify output.
+   */
+  minify;
+  /**
+   * Theme configuration.
+   */
+  theme;
+  /**
+   * Whether to include source maps.
+   */
+  sourceMaps;
+  constructor(options = {}) {
+    this.cdnMode = options.cdnMode ?? "cdn";
+    this.minify = options.minify ?? false;
+    this.theme = options.theme ? mergeThemes(DEFAULT_THEME, options.theme) : DEFAULT_THEME;
+    this.sourceMaps = options.sourceMaps ?? false;
+  }
+  // ============================================
+  // Template Detection
+  // ============================================
+  /**
+   * Detect the type of a template.
+   *
+   * @param template - Template to detect
+   * @returns Detection result with type and renderer info
+   */
+  detectTemplate(template) {
+    if (typeof template === "string") {
+      return {
+        type: "html-string",
+        renderer: "html",
+        needsTranspilation: false
+      };
+    }
+    if (typeof template === "function") {
+      const funcStr = template.toString();
+      if (funcStr.includes("jsx") || funcStr.includes("createElement") || funcStr.includes("React") || template.$$typeof) {
+        return {
+          type: "react-component",
+          renderer: "react",
+          needsTranspilation: true
+        };
+      }
+      return {
+        type: "html-function",
+        renderer: "html",
+        needsTranspilation: false
+      };
+    }
+    if (template && typeof template === "object" && template.$$typeof) {
+      return {
+        type: "react-element",
+        renderer: "react",
+        needsTranspilation: true
+      };
+    }
+    return {
+      type: "html-string",
+      renderer: "html",
+      needsTranspilation: false
+    };
+  }
+  // ============================================
+  // Transpilation
+  // ============================================
+  /**
+   * Transpile a component using esbuild.
+   *
+   * @param source - Source code to transpile
+   * @param options - Transpile options
+   * @returns Transpile result
+   */
+  async transpile(source, options = {}) {
+    const externals = options.externals || DEFAULT_EXTERNALS;
+    const config = options.externals ? createExternalizedConfig(options) : createTransformConfig(options);
+    const result = await (0, import_esbuild.transform)(source, config);
+    return {
+      code: result.code,
+      map: result.map,
+      size: Buffer.byteLength(result.code, "utf8"),
+      externalizedImports: externals
+    };
+  }
+  /**
+   * Render an HTML template.
+   *
+   * @param template - HTML template (string or function)
+   * @param context - Template context with input/output
+   * @returns Rendered HTML string
+   */
+  renderHtmlTemplate(template, context) {
+    if (typeof template === "string") {
+      return template;
+    }
+    return template(context);
+  }
+  // ============================================
+  // HTML Generation
+  // ============================================
+  /**
+   * Build the <head> section of the HTML document.
+   *
+   * @param options - Head options
+   * @returns HTML head content
+   */
+  buildHead(options) {
+    const {
+      title,
+      includeBridge = true,
+      includeCdn = this.cdnMode === "cdn",
+      includeTheme = true,
+      customStyles = ""
+    } = options;
+    const parts = [
+      "<head>",
+      '<meta charset="UTF-8">',
+      '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
+      `<title>${escapeHtml(title)}</title>`
+    ];
+    parts.push(buildFontPreconnect());
+    parts.push(buildFontStylesheets({ inter: true }));
+    if (includeTheme) {
+      const themeCss = buildThemeCss(this.theme);
+      const customCss = this.theme.customCss || "";
+      parts.push(`
+        <style type="text/tailwindcss">
+          @theme {
+            ${themeCss}
+          }
+          ${customCss}
+        </style>
+      `);
+    }
+    if (customStyles) {
+      parts.push(`<style>${customStyles}</style>`);
+    }
+    if (includeCdn) {
+      parts.push('<script src="https://cdn.tailwindcss.com"></script>');
+    }
+    if (includeBridge) {
+      parts.push(BRIDGE_SCRIPT_TAGS.universal);
+    }
+    parts.push("</head>");
+    return parts.join("\n");
+  }
+  /**
+   * Build data injection script.
+   *
+   * @param options - Injection options
+   * @returns Script tag with data injection
+   */
+  buildDataInjectionScript(options) {
+    const { toolName, input, output, usePlaceholders = false } = options;
+    if (usePlaceholders) {
+      return `
+        <script>
+          window.__mcpToolName = ${JSON.stringify(toolName)};
+          window.__mcpToolInput = JSON.parse("${HYBRID_INPUT_PLACEHOLDER}");
+          window.__mcpToolOutput = JSON.parse("${HYBRID_DATA_PLACEHOLDER}");
+          window.__mcpStructuredContent = window.__mcpToolOutput;
+        </script>
+      `;
+    }
+    return `
+      <script>
+        window.__mcpToolName = ${JSON.stringify(toolName)};
+        window.__mcpToolInput = ${JSON.stringify(input ?? {})};
+        window.__mcpToolOutput = ${JSON.stringify(output ?? {})};
+        window.__mcpStructuredContent = window.__mcpToolOutput;
+      </script>
+    `;
+  }
+  /**
+   * Wrap content in a complete HTML document.
+   *
+   * @param options - Wrap options
+   * @returns Complete HTML document
+   */
+  wrapInHtmlDocument(options) {
+    const { head, body, bodyClass = "" } = options;
+    return `<!DOCTYPE html>
+<html lang="en">
+${head}
+<body${bodyClass ? ` class="${bodyClass}"` : ""}>
+${body}
+</body>
+</html>`;
+  }
+  // ============================================
+  // Utility Methods
+  // ============================================
+  /**
+   * Calculate content hash.
+   *
+   * @param content - Content to hash
+   * @returns Hash string
+   */
+  async calculateHash(content) {
+    if (typeof crypto !== "undefined" && crypto.subtle) {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(content);
+      const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("").slice(0, 16);
+    }
+    let hash = 0;
+    for (let i = 0; i < content.length; i++) {
+      const char = content.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(16).padStart(8, "0");
+  }
+  /**
+   * Estimate gzipped size.
+   *
+   * @param content - Content to estimate
+   * @returns Estimated gzipped size in bytes
+   */
+  estimateGzipSize(content) {
+    return Math.round(Buffer.byteLength(content, "utf8") * 0.25);
+  }
+  /**
+   * Create template context.
+   *
+   * @param input - Tool input
+   * @param output - Tool output
+   * @returns Template context
+   */
+  createContext(input, output) {
+    return {
+      input,
+      output,
+      helpers: {
+        escapeHtml,
+        formatDate: (date, format) => {
+          const d = typeof date === "string" ? new Date(date) : date;
+          if (isNaN(d.getTime())) return String(date);
+          if (format === "iso") return d.toISOString();
+          if (format === "time") return d.toLocaleTimeString();
+          if (format === "datetime") return d.toLocaleString();
+          return d.toLocaleDateString();
+        },
+        formatCurrency: (amount, currency = "USD") => {
+          return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
+        },
+        uniqueId: (prefix = "mcp") => {
+          return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+        },
+        jsonEmbed: (data) => {
+          const json2 = JSON.stringify(data);
+          if (json2 === void 0) return "undefined";
+          return json2.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/'/g, "\\u0027");
+        }
+      }
+    };
+  }
+};
+
+// libs/uipack/src/build/builders/static-builder.ts
+var StaticBuilder = class extends BaseBuilder {
+  mode = "static";
+  constructor(options = {}) {
+    super(options);
+  }
+  /**
+   * Build a static HTML shell with placeholders.
+   *
+   * @param options - Build options
+   * @returns Static build result
+   */
+  async build(options) {
+    const startTime = Date.now();
+    const { template, toolName, title = `${toolName} Widget` } = options;
+    const detection = this.detectTemplate(template.template);
+    let bodyContent;
+    if (detection.renderer === "html") {
+      const context = this.createContext(
+        options.sampleInput ?? {},
+        options.sampleOutput ?? {}
+      );
+      if (typeof template.template === "function") {
+        bodyContent = template.template(context);
+      } else {
+        bodyContent = template.template;
+      }
+      bodyContent = `
+        <div id="frontmcp-widget-root">
+          ${bodyContent}
+        </div>
+      `;
+    } else {
+      bodyContent = this.buildReactShell(template, toolName);
+    }
+    const head = this.buildHead({
+      title,
+      includeBridge: true,
+      includeCdn: this.cdnMode === "cdn",
+      includeTheme: true
+    });
+    const dataScript = this.buildDataInjectionScript({
+      toolName,
+      usePlaceholders: true
+    });
+    let additionalScripts = "";
+    if (detection.renderer === "react") {
+      additionalScripts = this.cdnMode === "cdn" ? generateCdnScriptTags(false) + generateGlobalsSetupScript() : this.buildInlineReactRuntime();
+    }
+    const body = `
+      ${dataScript}
+      ${additionalScripts}
+      ${bodyContent}
+    `;
+    const html = this.wrapInHtmlDocument({
+      head,
+      body,
+      bodyClass: "antialiased"
+    });
+    const finalHtml = this.minify ? this.minifyHtml(html) : html;
+    const hash = await this.calculateHash(finalHtml);
+    const size = Buffer.byteLength(finalHtml, "utf8");
+    const gzipSize = this.estimateGzipSize(finalHtml);
+    return {
+      mode: "static",
+      html: finalHtml,
+      hash,
+      size,
+      gzipSize,
+      placeholders: {
+        hasOutput: finalHtml.includes(HYBRID_DATA_PLACEHOLDER),
+        hasInput: finalHtml.includes(HYBRID_INPUT_PLACEHOLDER)
+      },
+      rendererType: detection.renderer,
+      buildTime: new Date(startTime).toISOString()
+    };
+  }
+  /**
+   * Inject data into a pre-built shell.
+   *
+   * @param shell - HTML shell with placeholders
+   * @param input - Tool input data
+   * @param output - Tool output data
+   * @returns HTML with data injected
+   */
+  injectData(shell, input, output) {
+    return injectHybridDataFull(shell, input, output);
+  }
+  // ============================================
+  // Private Methods
+  // ============================================
+  /**
+   * Build React rendering shell.
+   *
+   * Creates a client-side React rendering setup that:
+   * 1. Waits for runtime to be ready
+   * 2. Loads component code
+   * 3. Renders into #root with data from window.__mcpToolOutput
+   */
+  buildReactShell(template, _toolName) {
+    const _componentName = this.getComponentName(template.template);
+    return `
+      <div id="frontmcp-widget-root">
+        <div id="root" class="min-h-[200px]">
+          <div class="flex items-center justify-center p-4">
+            <div class="text-center text-gray-500">
+              <svg class="animate-spin mx-auto mb-2" style="width: 1.5rem; height: 1.5rem; color: #9ca3af;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <p class="text-sm">Loading...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <script type="module">
+        // Wait for React runtime to be ready
+        function waitForRuntime() {
+          return new Promise((resolve) => {
+            if (window.__frontmcpRuntimeReady) {
+              resolve();
+            } else {
+              window.addEventListener('frontmcp:runtime-ready', resolve, { once: true });
+            }
+          });
+        }
+
+        async function renderWidget() {
+          await waitForRuntime();
+
+          const React = window.React;
+          const ReactDOM = window.ReactDOM;
+
+          // Get data from injected globals
+          const input = window.__mcpToolInput || {};
+          const output = window.__mcpToolOutput || {};
+
+          // Create simple widget component
+          function Widget() {
+            const [data, setData] = React.useState({ input, output });
+
+            React.useEffect(() => {
+              // Subscribe to data updates via bridge
+              const handleUpdate = (event) => {
+                if (event.detail) {
+                  setData((prev) => ({ ...prev, output: event.detail }));
+                }
+              };
+              window.addEventListener('frontmcp:toolResult', handleUpdate);
+              return () => window.removeEventListener('frontmcp:toolResult', handleUpdate);
+            }, []);
+
+            return React.createElement('div', {
+              className: 'p-4',
+              dangerouslySetInnerHTML: {
+                __html: '<pre>' + JSON.stringify(data.output, null, 2) + '</pre>'
+              }
+            });
+          }
+
+          // Render
+          const root = ReactDOM.createRoot(document.getElementById('root'));
+          root.render(React.createElement(Widget));
+        }
+
+        renderWidget().catch(console.error);
+      </script>
+    `;
+  }
+  /**
+   * Build inline React runtime (for offline mode).
+   */
+  buildInlineReactRuntime() {
+    return `
+      <script>
+        // Inline React runtime would be bundled here
+        console.warn('[FrontMCP] Inline React runtime not yet implemented');
+      </script>
+    `;
+  }
+  /**
+   * Get component name from template.
+   */
+  getComponentName(template) {
+    if (typeof template === "function") {
+      return template.name || "Widget";
+    }
+    return "Widget";
+  }
+  /**
+   * Simple HTML minification.
+   */
+  minifyHtml(html) {
+    return html.replace(/>\s+</g, "><").replace(/\s{2,}/g, " ").trim();
+  }
+};
+
+// libs/uipack/src/build/builders/hybrid-builder.ts
+var HybridBuilder = class extends BaseBuilder {
+  mode = "hybrid";
+  /**
+   * Cached vendor shell.
+   */
+  vendorShellCache = null;
+  constructor(options = {}) {
+    super(options);
+  }
+  /**
+   * Build a hybrid result with vendor shell and component chunk.
+   *
+   * @param options - Build options
+   * @returns Hybrid build result
+   */
+  async build(options) {
+    const startTime = Date.now();
+    const { template, toolName } = options;
+    const vendorShell = await this.buildVendorShell();
+    const componentChunk = await this.buildComponentChunk(template.template);
+    const shellResourceUri = `resource://widget/${toolName}/shell`;
+    const combinedHash = await this.calculateHash(vendorShell + componentChunk);
+    const shellSize = Buffer.byteLength(vendorShell, "utf8");
+    const componentSize = Buffer.byteLength(componentChunk, "utf8");
+    const detection = this.detectTemplate(template.template);
+    return {
+      mode: "hybrid",
+      vendorShell,
+      componentChunk,
+      shellResourceUri,
+      hash: combinedHash,
+      shellSize,
+      componentSize,
+      rendererType: detection.renderer,
+      buildTime: new Date(startTime).toISOString()
+    };
+  }
+  /**
+   * Build the vendor shell (shared across all tools).
+   *
+   * The vendor shell contains:
+   * - React/ReactDOM from CDN
+   * - FrontMCP Bridge runtime
+   * - Theme CSS and fonts
+   * - Component injection point
+   *
+   * @returns Vendor shell HTML
+   */
+  async buildVendorShell() {
+    if (this.vendorShellCache) {
+      return this.vendorShellCache;
+    }
+    const head = this.buildHead({
+      title: "FrontMCP Widget",
+      includeBridge: true,
+      includeCdn: this.cdnMode === "cdn",
+      includeTheme: true
+    });
+    const cdnScripts = this.cdnMode === "cdn" ? generateCdnScriptTags(false) + generateGlobalsSetupScript() : "";
+    const body = `
+      <script>
+        window.__mcpToolName = '';
+        window.__mcpToolInput = {};
+        window.__mcpToolOutput = {};
+        window.__mcpStructuredContent = {};
+      </script>
+      ${cdnScripts}
+      <div id="frontmcp-widget-root">
+        <div id="root" class="min-h-[200px]">
+          <!-- Component will be injected here -->
+          <div class="flex items-center justify-center p-4">
+            <div class="text-center text-gray-500">
+              <svg class="animate-spin mx-auto mb-2" style="width: 1.5rem; height: 1.5rem; color: #9ca3af;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <p class="text-sm">Loading component...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Component injection script -->
+      <script type="module">
+        // Wait for component code to be injected
+        window.__frontmcpInjectComponent = async function(componentCode) {
+          try {
+            // Wait for runtime
+            if (!window.__frontmcpRuntimeReady) {
+              await new Promise((resolve) => {
+                window.addEventListener('frontmcp:runtime-ready', resolve, { once: true });
+              });
+            }
+
+            // Execute component code
+            const blob = new Blob([componentCode], { type: 'application/javascript' });
+            const url = URL.createObjectURL(blob);
+            const module = await import(url);
+            URL.revokeObjectURL(url);
+
+            // Render component
+            const React = window.React;
+            const ReactDOM = window.ReactDOM;
+            const Component = module.default || module.Widget || module.Component;
+
+            if (Component) {
+              const root = ReactDOM.createRoot(document.getElementById('root'));
+              root.render(React.createElement(Component, {
+                input: window.__mcpToolInput,
+                output: window.__mcpToolOutput,
+              }));
+            }
+          } catch (error) {
+            console.error('[FrontMCP] Component injection failed:', error);
+            document.getElementById('root').innerHTML =
+              '<div class="p-4 text-red-500">Component failed to load</div>';
+          }
+        };
+
+        // Listen for component via bridge
+        if (window.FrontMcpBridge) {
+          const checkForComponent = () => {
+            const meta = window.FrontMcpBridge.getToolResponseMetadata?.() || {};
+            const componentCode = meta['ui/component'] || meta['openai/component'];
+            if (componentCode) {
+              window.__frontmcpInjectComponent(componentCode);
+            }
+          };
+
+          if (window.FrontMcpBridge.onToolResponseMetadata) {
+            window.FrontMcpBridge.onToolResponseMetadata((meta) => {
+              const componentCode = meta['ui/component'] || meta['openai/component'];
+              if (componentCode) {
+                window.__frontmcpInjectComponent(componentCode);
+              }
+            });
+          }
+
+          // Check immediately in case data is already available
+          checkForComponent();
+        }
+      </script>
+    `;
+    const html = this.wrapInHtmlDocument({
+      head,
+      body,
+      bodyClass: "antialiased"
+    });
+    this.vendorShellCache = html;
+    return html;
+  }
+  /**
+   * Build a component chunk for a specific template.
+   *
+   * The component chunk is transpiled with externalized dependencies
+   * (React, etc.) that are provided by the vendor shell.
+   *
+   * @param template - Component template
+   * @returns Transpiled component code
+   */
+  async buildComponentChunk(template) {
+    const detection = this.detectTemplate(template);
+    if (detection.renderer === "html") {
+      return this.wrapHtmlAsComponent(template);
+    }
+    if (typeof template === "function") {
+      return this.transpileReactComponent(template);
+    }
+    return `
+      // Externalized React component
+      const React = window.React;
+
+      export default function Widget({ input, output }) {
+        return React.createElement('div', {
+          className: 'p-4',
+        }, React.createElement('pre', null, JSON.stringify(output, null, 2)));
+      }
+    `;
+  }
+  /**
+   * Combine shell and component for Claude/inline delivery.
+   *
+   * @param shell - Vendor shell HTML
+   * @param component - Component chunk code
+   * @param input - Tool input data
+   * @param output - Tool output data
+   * @returns Complete HTML with embedded component and data
+   */
+  combineForInline(shell, component, input, output) {
+    let result = shell.replace("window.__mcpToolInput = {};", `window.__mcpToolInput = ${JSON.stringify(input)};`).replace("window.__mcpToolOutput = {};", `window.__mcpToolOutput = ${JSON.stringify(output)};`).replace("window.__mcpStructuredContent = {};", `window.__mcpStructuredContent = ${JSON.stringify(output)};`);
+    const componentInjection = `
+      <script type="module">
+        (async function() {
+          // Wait for runtime
+          if (!window.__frontmcpRuntimeReady) {
+            await new Promise((resolve) => {
+              window.addEventListener('frontmcp:runtime-ready', resolve, { once: true });
+            });
+          }
+
+          // Execute component
+          ${component}
+
+          // Render
+          const React = window.React;
+          const ReactDOM = window.ReactDOM;
+          const Component = typeof Widget !== 'undefined' ? Widget : (typeof exports !== 'undefined' ? exports.default : null);
+
+          if (Component) {
+            const root = ReactDOM.createRoot(document.getElementById('root'));
+            root.render(React.createElement(Component, {
+              input: window.__mcpToolInput,
+              output: window.__mcpToolOutput,
+            }));
+          }
+        })();
+      </script>
+    `;
+    result = result.replace("</body>", componentInjection + "\n</body>");
+    return result;
+  }
+  // ============================================
+  // Private Methods
+  // ============================================
+  /**
+   * Wrap HTML template as a React component.
+   */
+  wrapHtmlAsComponent(template) {
+    if (typeof template === "string") {
+      return `
+        // HTML template wrapped as component
+        const React = window.React;
+
+        export default function Widget({ input, output }) {
+          return React.createElement('div', {
+            dangerouslySetInnerHTML: { __html: ${JSON.stringify(template)} }
+          });
+        }
+      `;
+    }
+    return `
+      // HTML function template wrapped as component
+      const React = window.React;
+
+      export default function Widget({ input, output }) {
+        const html = (${template.toString()})({ input, output, helpers: {} });
+        return React.createElement('div', {
+          dangerouslySetInnerHTML: { __html: html }
+        });
+      }
+    `;
+  }
+  /**
+   * Transpile a React component function.
+   */
+  async transpileReactComponent(component) {
+    const funcString = component.toString();
+    const componentName = component.name || "Widget";
+    const source = `
+      // Externalized React component
+      const React = window.React;
+
+      const ${componentName} = ${funcString};
+
+      export default ${componentName};
+      export { ${componentName} as Widget, ${componentName} as Component };
+    `;
+    try {
+      const result = await this.transpile(source, {
+        externals: DEFAULT_EXTERNALS,
+        format: "esm",
+        minify: this.minify
+      });
+      return result.code;
+    } catch (error) {
+      console.warn("[HybridBuilder] Transpilation failed, using source directly:", error);
+      return source;
+    }
+  }
+};
+
+// libs/uipack/src/build/builders/inline-builder.ts
+var InlineBuilder = class extends BaseBuilder {
+  mode = "inline";
+  constructor(options = {}) {
+    super(options);
+  }
+  /**
+   * Build an inline result with loader and full widget generator.
+   *
+   * @param options - Build options
+   * @returns Inline build result
+   */
+  async build(options) {
+    const startTime = Date.now();
+    const { template, toolName } = options;
+    const loaderShell = this.buildLoader(toolName);
+    const buildFullWidget = async (input, output) => {
+      return this.buildFullWidget(template.template, input, output);
+    };
+    const hash = await this.calculateHash(loaderShell);
+    const loaderSize = Buffer.byteLength(loaderShell, "utf8");
+    const detection = this.detectTemplate(template.template);
+    return {
+      mode: "inline",
+      loaderShell,
+      buildFullWidget,
+      hash,
+      loaderSize,
+      rendererType: detection.renderer,
+      buildTime: new Date(startTime).toISOString()
+    };
+  }
+  /**
+   * Build the minimal loader shell.
+   *
+   * The loader contains:
+   * - FrontMCP Bridge runtime
+   * - Loading indicator
+   * - Injector script that replaces document on tool response
+   *
+   * @param toolName - Name of the tool
+   * @returns Loader HTML
+   */
+  buildLoader(toolName) {
+    const head = this.buildHead({
+      title: `${toolName} Widget`,
+      includeBridge: true,
+      includeCdn: this.cdnMode === "cdn",
+      includeTheme: true
+    });
+    const body = `
+      <script>
+        window.__mcpToolName = ${JSON.stringify(toolName)};
+        window.__mcpLeanShell = true;
+      </script>
+
+      <div id="frontmcp-widget-root" class="flex items-center justify-center min-h-[200px] p-4">
+        <div class="text-center text-gray-500">
+          <svg class="animate-spin mx-auto mb-2" style="width: 1.5rem; height: 1.5rem; color: #9ca3af;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <p class="text-sm">Loading widget...</p>
+        </div>
+      </div>
+
+      <!-- Injector script -->
+      <script>
+        (function() {
+          var injected = false;
+
+          function injectWidget(metadata) {
+            if (injected) return;
+
+            var html = null;
+            if (metadata) {
+              html = metadata['ui/html'] || metadata['openai/html'] || metadata.html;
+            }
+
+            if (html && typeof html === 'string') {
+              injected = true;
+              console.log('[FrontMCP] Inline shell: Injecting widget HTML (' + html.length + ' chars)');
+              document.open();
+              document.write(html);
+              document.close();
+              return true;
+            }
+            return false;
+          }
+
+          function subscribeAndInject() {
+            var bridge = window.FrontMcpBridge;
+            if (!bridge) {
+              console.warn('[FrontMCP] Inline shell: Bridge not found');
+              return;
+            }
+
+            // Check if data already available
+            if (typeof bridge.getToolResponseMetadata === 'function') {
+              var existing = bridge.getToolResponseMetadata();
+              if (existing && injectWidget(existing)) {
+                return;
+              }
+            }
+
+            // Subscribe to metadata changes
+            if (typeof bridge.onToolResponseMetadata === 'function') {
+              console.log('[FrontMCP] Inline shell: Subscribing to tool response metadata');
+              bridge.onToolResponseMetadata(function(metadata) {
+                console.log('[FrontMCP] Inline shell: Received tool response metadata');
+                injectWidget(metadata);
+              });
+            }
+          }
+
+          // Wait for bridge:ready event
+          window.addEventListener('bridge:ready', function() {
+            console.log('[FrontMCP] Inline shell: Bridge ready, setting up injector');
+            subscribeAndInject();
+          });
+
+          // Also try immediately in case bridge is already ready
+          if (window.FrontMcpBridge && window.FrontMcpBridge.initialized) {
+            subscribeAndInject();
+          }
+
+          // Fallback: poll for bridge
+          var attempts = 0;
+          var interval = setInterval(function() {
+            attempts++;
+            if (window.FrontMcpBridge) {
+              clearInterval(interval);
+              if (!injected) {
+                subscribeAndInject();
+              }
+            } else if (attempts >= 100) {
+              clearInterval(interval);
+              console.warn('[FrontMCP] Inline shell: Timeout waiting for bridge');
+            }
+          }, 100);
+        })();
+      </script>
+
+      <style>
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .animate-spin {
+          animation: spin 1s linear infinite;
+        }
+      </style>
+    `;
+    return this.wrapInHtmlDocument({
+      head,
+      body,
+      bodyClass: "antialiased"
+    });
+  }
+  /**
+   * Build full widget HTML with embedded data.
+   *
+   * @param template - Component template
+   * @param input - Tool input data
+   * @param output - Tool output data
+   * @returns Complete HTML with all dependencies and data
+   */
+  async buildFullWidget(template, input, output) {
+    const detection = this.detectTemplate(template);
+    const head = this.buildHead({
+      title: "FrontMCP Widget",
+      includeBridge: true,
+      includeCdn: this.cdnMode === "cdn",
+      includeTheme: true
+    });
+    const dataScript = this.buildDataInjectionScript({
+      toolName: "widget",
+      input,
+      output,
+      usePlaceholders: false
+    });
+    let content;
+    if (detection.renderer === "html") {
+      const context = this.createContext(input, output);
+      if (typeof template === "function") {
+        content = template(context);
+      } else {
+        content = template;
+      }
+      content = `
+        <div id="frontmcp-widget-root">
+          ${content}
+        </div>
+      `;
+    } else {
+      content = this.buildReactContent(template, input, output);
+    }
+    const body = `
+      ${dataScript}
+      ${detection.renderer === "react" ? this.buildReactScripts() : ""}
+      ${content}
+    `;
+    const html = this.wrapInHtmlDocument({
+      head,
+      body,
+      bodyClass: "antialiased"
+    });
+    return this.minify ? this.minifyHtml(html) : html;
+  }
+  // ============================================
+  // Private Methods
+  // ============================================
+  /**
+   * Build React scripts for client-side rendering.
+   */
+  buildReactScripts() {
+    if (this.cdnMode === "cdn") {
+      return generateCdnScriptTags(false) + generateGlobalsSetupScript();
+    }
+    return `
+      <script>
+        console.warn('[FrontMCP] Inline React runtime not yet implemented');
+      </script>
+    `;
+  }
+  /**
+   * Build React content with client-side rendering.
+   */
+  buildReactContent(_template, _input, _output) {
+    return `
+      <div id="frontmcp-widget-root">
+        <div id="root" class="min-h-[200px]">
+          <div class="flex items-center justify-center p-4">
+            <div class="text-center text-gray-500">
+              <p class="text-sm">Initializing...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <script type="module">
+        // Wait for runtime
+        function waitForRuntime() {
+          return new Promise((resolve) => {
+            if (window.__frontmcpRuntimeReady) {
+              resolve();
+            } else {
+              window.addEventListener('frontmcp:runtime-ready', resolve, { once: true });
+            }
+          });
+        }
+
+        async function renderWidget() {
+          await waitForRuntime();
+
+          const React = window.React;
+          const ReactDOM = window.ReactDOM;
+
+          const input = window.__mcpToolInput || {};
+          const output = window.__mcpToolOutput || {};
+
+          function Widget() {
+            return React.createElement('div', {
+              className: 'p-4',
+            }, React.createElement('pre', {
+              className: 'bg-gray-100 p-2 rounded overflow-auto',
+            }, JSON.stringify(output, null, 2)));
+          }
+
+          const root = ReactDOM.createRoot(document.getElementById('root'));
+          root.render(React.createElement(Widget));
+        }
+
+        renderWidget().catch(console.error);
+      </script>
+    `;
+  }
+  /**
+   * Simple HTML minification.
+   */
+  minifyHtml(html) {
+    return html.replace(/>\s+</g, "><").replace(/\s{2,}/g, " ").trim();
+  }
+};
+
 // libs/uipack/src/build/index.ts
 async function buildToolUI(options) {
   const startTime = Date.now();
@@ -6813,49 +8498,78 @@ async function buildToolUIMulti(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BaseBuilder,
+  CDN_URLS,
   CLAUDE_PLATFORM,
   CLOUDFLARE_CDN,
+  CLOUDFLARE_CDN_URLS,
   DEFAULT_CSP_BY_TYPE,
+  DEFAULT_EXTERNALS,
   DEFAULT_RENDERER_ASSETS,
   DEFAULT_THEME,
+  EXTERNAL_GLOBALS,
   HANDLEBARS_CDN,
+  HYBRID_DATA_PLACEHOLDER,
+  HYBRID_INPUT_PLACEHOLDER,
+  HybridBuilder,
+  InlineBuilder,
   MARKED_CDN,
   MDX_RUNTIME_CDN,
   OPENAI_PLATFORM,
   REACT_CDN,
   REACT_DOM_CDN,
+  StaticBuilder,
   TAILWIND_CDN,
   batchBuildWidgets,
+  buildAlertComponent,
+  buildBadgeComponent,
+  buildButtonComponent,
   buildCDNInfoForUIType,
   buildCDNScriptTag,
   buildCSPForType,
   buildCSPMetaContent,
+  buildCardComponent,
   buildCloudflareScriptTag,
   buildCloudflareStylesheetTag,
   buildFileComponent,
   buildFileComponents,
+  buildNamespaceExport,
   buildScriptsForUIType,
   buildStaticWidget,
+  buildStyleConstants,
   buildTailwindScriptTag,
   buildToolResponseMeta,
   buildToolUI,
   buildToolUIMulti,
   buildToolWidgetManifest,
+  buildUIComponentsRuntime,
+  createExternalizedConfig,
+  createExternalsBanner,
+  createInlineConfig,
   createTemplateHelpers,
+  createTransformConfig,
   detectUIType,
+  generateCdnScriptTags,
+  generateGlobalsSetupScript,
   getCachedFileComponent,
   getDefaultAssets,
+  getHybridPlaceholders,
   getOutputModeForClient,
   getPlatformFromClientInfo,
   getRendererAssets,
   getTailwindForPlatform,
   getURLsToPreFetch,
   hasInlineScripts,
+  injectHybridData,
+  injectHybridDataFull,
+  injectHybridDataWithTrigger,
   isBundlingMode,
   isDisplayMode,
   isFilePathTemplate,
+  isHybridShell,
   isOutputMode,
   isResourceMode,
   isUIType,
-  needsFileComponentRebuild
+  needsFileComponentRebuild,
+  needsInputInjection
 });