@frontmcp/uipack 1.2.1 → 1.4.0

package/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   buildCSPDirectives: () => buildCSPDirectives,
   buildCSPMetaTag: () => buildCSPMetaTag,
   buildChartHtml: () => buildChartHtml,
+  buildCustomDataInjectionScript: () => buildCustomDataInjectionScript,
   buildDataInjectionScript: () => buildDataInjectionScript,
   buildMermaidHtml: () => buildMermaidHtml,
   buildPdfHtml: () => buildPdfHtml,
@@ -297,6 +298,8 @@ function generateBridgeIIFE(options = {}) {
   parts.push("});");
   parts.push("");
   parts.push("window.FrontMcpBridge = bridge;");
+  parts.push("");
+  parts.push(generateAutoResize());
   parts.push("function __showLoading() {");
   parts.push('  var root = document.getElementById("root");');
   parts.push("  if (root && !root.hasChildNodes()) {");
@@ -317,6 +320,112 @@ function generateBridgeIIFE(options = {}) {
   }
   return code;
 }
+function generateAutoResize() {
+  return `
+function __applySizingCss(sizing) {
+  if (typeof document === 'undefined' || !document.documentElement) return;
+  function toLen(v) { return typeof v === 'number' ? v + 'px' : v; }
+  var de = document.documentElement;
+  var body = document.body;
+  var root = document.getElementById('root');
+  if (sizing.preferredHeight != null) {
+    var ph = toLen(sizing.preferredHeight);
+    de.style.height = ph;
+    if (body) body.style.height = ph;
+    if (root && !root.style.minHeight) root.style.minHeight = ph;
+  }
+  if (sizing.minHeight != null) {
+    var mh = toLen(sizing.minHeight);
+    de.style.minHeight = mh;
+    if (body) body.style.minHeight = mh;
+    if (root) root.style.minHeight = mh;
+  }
+  if (sizing.maxHeight != null) {
+    var mx = toLen(sizing.maxHeight);
+    de.style.maxHeight = mx;
+    if (body) body.style.maxHeight = mx;
+    if (root) root.style.maxHeight = mx;
+  }
+  if (sizing.aspectRatio != null && root) {
+    root.style.aspectRatio = String(sizing.aspectRatio);
+  }
+}
+
+function __initAutoResize() {
+  if (typeof window === 'undefined') return;
+  // Idempotent: a re-injected IIFE must not stack observers.
+  if (window.__mcpAutoResizeInit) return;
+  window.__mcpAutoResizeInit = true;
+  var sizing = window.__mcpWidgetSizing;
+  if (!sizing || typeof sizing !== 'object') return;
+
+  // Apply CSS as a runtime fallback (the static <style> may be absent on some
+  // render paths). Wait for the body if it isn't ready yet.
+  function apply() { try { __applySizingCss(sizing); } catch (e) {} }
+  if (typeof document !== 'undefined' && document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', apply);
+  } else {
+    apply();
+  }
+
+  // Auto-resize defaults ON; opt out with autoResize:false.
+  if (sizing.autoResize === false) return;
+  if (typeof ResizeObserver === 'undefined') return;
+
+  function startObserving() {
+    var target = document.getElementById('root') || document.body;
+    if (!target) return;
+
+    var rafId = null;
+    var lastReported = -1;
+    function report() {
+      rafId = null;
+      try {
+        var rect = target.getBoundingClientRect();
+        var height = Math.ceil(rect.height);
+        var width = Math.ceil(rect.width);
+        if (height === lastReported || height <= 0) return;
+        lastReported = height;
+        var payload = { height: height, width: width };
+        if (sizing.aspectRatio != null) payload.aspectRatio = sizing.aspectRatio;
+        if (window.FrontMcpBridge && typeof window.FrontMcpBridge.setSize === 'function') {
+          window.FrontMcpBridge.setSize(payload).catch(function() {});
+        }
+        window.dispatchEvent(new CustomEvent('widget:resize', { detail: payload }));
+      } catch (e) {}
+    }
+    function schedule() {
+      // Debounce via rAF; fall back to setTimeout if rAF is unavailable.
+      if (rafId != null) return;
+      if (typeof requestAnimationFrame === 'function') {
+        rafId = requestAnimationFrame(report);
+      } else {
+        rafId = setTimeout(report, 100);
+      }
+    }
+
+    try {
+      // Disconnect any prior observer before creating a new one (no leaks/dupes).
+      if (window.__mcpResizeObserver && typeof window.__mcpResizeObserver.disconnect === 'function') {
+        window.__mcpResizeObserver.disconnect();
+      }
+      var ro = new ResizeObserver(function() { schedule(); });
+      ro.observe(target);
+      window.__mcpResizeObserver = ro;
+    } catch (e) {}
+    // Report once on init so the host gets an initial measurement.
+    schedule();
+  }
+
+  if (typeof document !== 'undefined' && document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startObserving);
+  } else {
+    startObserving();
+  }
+}
+__initAutoResize();
+`.trim();
+}
 function generateContextDetection() {
   return `
 function detectTheme() {
@@ -424,6 +533,19 @@ var OpenAIAdapter = {
   requestDisplayMode: function(context, mode) {
     return Promise.resolve();
   },
+  setSize: function(context, size) {
+    // OpenAI Apps SDK measures DOM height itself; if a sizing API surfaces on
+    // window.openai, forward to it, otherwise no-op (CSS drives layout).
+    try {
+      if (window.openai && typeof window.openai.requestDisplayMode === 'function' && size && size.displayMode) {
+        window.openai.requestDisplayMode(size.displayMode);
+      }
+      if (window.openai && typeof window.openai.setWidgetHeight === 'function' && size && typeof size.height === 'number') {
+        window.openai.setWidgetHeight(size.height);
+      }
+    } catch (e) {}
+    return Promise.resolve();
+  },
   requestClose: function(context) {
     return Promise.resolve();
   }
@@ -668,6 +790,15 @@ var ExtAppsAdapter = {
   requestDisplayMode: function(context, mode) {
     return this.sendRequest('ui/setDisplayMode', { mode: mode });
   },
+  setSize: function(context, size) {
+    // FrontMCP sizing channel \u2014 parallels ui/setDisplayMode. Reports the
+    // measured/desired widget dimensions to the host.
+    return this.sendRequest('ui/setSize', {
+      height: size && size.height,
+      width: size && size.width,
+      aspectRatio: size && size.aspectRatio
+    });
+  },
   requestClose: function(context) {
     return this.sendRequest('ui/close', {});
   },
@@ -756,6 +887,10 @@ var ClaudeAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    // Claude measures the rendered DOM height itself \u2014 CSS-only, no reporting.
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -807,6 +942,9 @@ var GeminiAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -842,6 +980,9 @@ var GenericAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -1076,6 +1217,15 @@ FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
   });
 };
 
+// Report a desired widget size to the host. \`size\` is { height?, width?, aspectRatio? }.
+// Per-adapter behaviour: Claude/generic no-op (host measures the DOM),
+// ext-apps sends ui/setSize, OpenAI forwards to its SDK when available.
+FrontMcpBridge.prototype.setSize = function(size) {
+  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
+  if (!this._adapter.setSize) return Promise.resolve();
+  return this._adapter.setSize(this._context, size || {});
+};
+
 FrontMcpBridge.prototype.requestClose = function() {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   return this._adapter.requestClose(this._context);
@@ -2830,9 +2980,61 @@ function escapeAttribute(str) {
   return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
+// libs/uipack/src/shell/custom-shell-types.ts
+var SHELL_PLACEHOLDER_NAMES = ["CSP", "DATA", "BRIDGE", "CONTENT", "TITLE"];
+var SHELL_PLACEHOLDERS = {
+  CSP: "{{CSP}}",
+  DATA: "{{DATA}}",
+  BRIDGE: "{{BRIDGE}}",
+  CONTENT: "{{CONTENT}}",
+  TITLE: "{{TITLE}}"
+};
+var REQUIRED_PLACEHOLDERS = ["CONTENT"];
+var OPTIONAL_PLACEHOLDERS = ["CSP", "DATA", "BRIDGE", "TITLE"];
+function isInlineShellSource(source) {
+  return typeof source === "object" && source !== null && "inline" in source;
+}
+function isUrlShellSource(source) {
+  return typeof source === "object" && source !== null && "url" in source;
+}
+function isNpmShellSource(source) {
+  return typeof source === "object" && source !== null && "npm" in source;
+}
+
+// libs/uipack/src/shell/custom-shell-applier.ts
+function applyShellTemplate(template, values) {
+  let result = template;
+  result = result.replaceAll(SHELL_PLACEHOLDERS.CSP, values.csp);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.DATA, values.data);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.BRIDGE, values.bridge);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.CONTENT, values.content);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.TITLE, values.title);
+  return result;
+}
+
+// libs/uipack/src/shell/custom-shell-validator.ts
+function validateShellTemplate(template) {
+  const found = {};
+  for (const name of SHELL_PLACEHOLDER_NAMES) {
+    found[name] = template.includes(SHELL_PLACEHOLDERS[name]);
+  }
+  const missingRequired = REQUIRED_PLACEHOLDERS.filter((name) => !found[name]);
+  const missingOptional = OPTIONAL_PLACEHOLDERS.filter((name) => !found[name]);
+  return {
+    valid: missingRequired.length === 0,
+    found,
+    missingRequired,
+    missingOptional
+  };
+}
+
 // libs/uipack/src/shell/data-injector.ts
+function hasSizing(sizing) {
+  if (!sizing) return false;
+  return sizing.preferredHeight !== void 0 || sizing.minHeight !== void 0 || sizing.maxHeight !== void 0 || sizing.aspectRatio !== void 0 || sizing.autoResize !== void 0;
+}
 function buildDataInjectionScript(options) {
-  const { toolName, input, output, structuredContent } = options;
+  const { toolName, input, output, structuredContent, sizing } = options;
   const lines = [
     `window.__mcpAppsEnabled = true;`,
     `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
@@ -2840,10 +3042,24 @@ function buildDataInjectionScript(options) {
     `window.__mcpToolOutput = ${safeJsonForScript(output ?? null)};`,
     `window.__mcpStructuredContent = ${safeJsonForScript(structuredContent ?? null)};`
   ];
+  if (hasSizing(sizing)) {
+    lines.push(`window.__mcpWidgetSizing = ${safeJsonForScript(sizing)};`);
+  }
   return `<script>
 ${lines.join("\n")}
 </script>`;
 }
+function buildCustomDataInjectionScript(descriptor) {
+  if (descriptor.script !== void 0) {
+    return descriptor.script;
+  }
+  if (descriptor.globalKey !== void 0) {
+    return `<script>window[${safeJsonForScript(descriptor.globalKey)}] = ${safeJsonForScript(
+      descriptor.value ?? null
+    )};</script>`;
+  }
+  return "";
+}
 var _uniqueIdCounter = 0;
 function createTemplateHelpers() {
   return {
@@ -2871,59 +3087,79 @@ function createTemplateHelpers() {
   };
 }
 
-// libs/uipack/src/shell/custom-shell-types.ts
-var SHELL_PLACEHOLDER_NAMES = ["CSP", "DATA", "BRIDGE", "CONTENT", "TITLE"];
-var SHELL_PLACEHOLDERS = {
-  CSP: "{{CSP}}",
-  DATA: "{{DATA}}",
-  BRIDGE: "{{BRIDGE}}",
-  CONTENT: "{{CONTENT}}",
-  TITLE: "{{TITLE}}"
-};
-var REQUIRED_PLACEHOLDERS = ["CONTENT"];
-var OPTIONAL_PLACEHOLDERS = ["CSP", "DATA", "BRIDGE", "TITLE"];
-function isInlineShellSource(source) {
-  return typeof source === "object" && source !== null && "inline" in source;
+// libs/uipack/src/shell/sizing-css.ts
+function sanitizeCssValue(value) {
+  return value.replace(/[<>{};]/g, "").trim();
 }
-function isUrlShellSource(source) {
-  return typeof source === "object" && source !== null && "url" in source;
+function toCssLength(value) {
+  return typeof value === "number" ? `${value}px` : sanitizeCssValue(value);
 }
-function isNpmShellSource(source) {
-  return typeof source === "object" && source !== null && "npm" in source;
-}
-
-// libs/uipack/src/shell/custom-shell-validator.ts
-function validateShellTemplate(template) {
-  const found = {};
-  for (const name of SHELL_PLACEHOLDER_NAMES) {
-    found[name] = template.includes(SHELL_PLACEHOLDERS[name]);
-  }
-  const missingRequired = REQUIRED_PLACEHOLDERS.filter((name) => !found[name]);
-  const missingOptional = OPTIONAL_PLACEHOLDERS.filter((name) => !found[name]);
-  return {
-    valid: missingRequired.length === 0,
-    found,
-    missingRequired,
-    missingOptional
-  };
-}
-
-// libs/uipack/src/shell/custom-shell-applier.ts
-function applyShellTemplate(template, values) {
-  let result = template;
-  result = result.replaceAll(SHELL_PLACEHOLDERS.CSP, values.csp);
-  result = result.replaceAll(SHELL_PLACEHOLDERS.DATA, values.data);
-  result = result.replaceAll(SHELL_PLACEHOLDERS.BRIDGE, values.bridge);
-  result = result.replaceAll(SHELL_PLACEHOLDERS.CONTENT, values.content);
-  result = result.replaceAll(SHELL_PLACEHOLDERS.TITLE, values.title);
-  return result;
+function buildSizingStyleTag(sizing) {
+  if (!hasSizing(sizing)) return "";
+  const hasCssSizing = sizing.preferredHeight !== void 0 || sizing.minHeight !== void 0 || sizing.maxHeight !== void 0 || sizing.aspectRatio !== void 0;
+  if (!hasCssSizing) return "";
+  const rootRules = [];
+  const docRules = ["margin: 0;"];
+  if (sizing.preferredHeight !== void 0) {
+    const h = toCssLength(sizing.preferredHeight);
+    docRules.push(`height: ${h};`);
+    rootRules.push(`min-height: ${h};`);
+  }
+  if (sizing.minHeight !== void 0) {
+    const mh = toCssLength(sizing.minHeight);
+    docRules.push(`min-height: ${mh};`);
+    rootRules.push(`min-height: ${mh};`);
+  }
+  if (sizing.maxHeight !== void 0) {
+    const mx = toCssLength(sizing.maxHeight);
+    docRules.push(`max-height: ${mx};`);
+    rootRules.push(`max-height: ${mx};`);
+  }
+  if (sizing.aspectRatio !== void 0) {
+    const ar = typeof sizing.aspectRatio === "number" ? String(sizing.aspectRatio) : sanitizeCssValue(sizing.aspectRatio);
+    if (ar) rootRules.push(`aspect-ratio: ${ar};`);
+  }
+  const parts = [`html, body { ${docRules.join(" ")} }`];
+  if (rootRules.length > 0) {
+    parts.push(`#root { ${rootRules.join(" ")} }`);
+  }
+  return `<style>${parts.join("\n")}</style>`;
 }
 
 // libs/uipack/src/shell/builder.ts
+function resolveDataInjectionScript(args) {
+  if (args.dataInjection) {
+    return buildCustomDataInjectionScript(args.dataInjection);
+  }
+  return buildDataInjectionScript({
+    toolName: args.toolName,
+    input: args.input,
+    output: args.output,
+    structuredContent: args.structuredContent,
+    sizing: args.sizing
+  });
+}
 function buildShell(content, config) {
-  const { toolName, csp, withShell = true, input, output, structuredContent, includeBridge = true, title } = config;
-  const { customShell } = config;
-  const dataScript = buildDataInjectionScript({ toolName, input, output, structuredContent });
+  const {
+    toolName,
+    csp,
+    withShell = true,
+    input,
+    output,
+    structuredContent,
+    includeBridge = true,
+    title,
+    sizing
+  } = config;
+  const { customShell, dataInjection } = config;
+  const dataScript = resolveDataInjectionScript({
+    dataInjection,
+    toolName,
+    input,
+    output,
+    structuredContent,
+    sizing
+  });
   if (!withShell) {
     const html2 = `${dataScript}
 ${content}`;
@@ -2941,7 +3177,9 @@ ${content}`;
       output,
       structuredContent,
       includeBridge,
-      title
+      title,
+      sizing,
+      dataInjection
     });
   }
   const headParts = [
@@ -2953,6 +3191,10 @@ ${content}`;
   }
   headParts.push(buildCSPMetaTag(csp));
   headParts.push(dataScript);
+  const sizingStyle = buildSizingStyleTag(sizing);
+  if (sizingStyle) {
+    headParts.push(sizingStyle);
+  }
   if (includeBridge) {
     const bridgeScript = generateBridgeIIFE({ minify: true });
     headParts.push(`<script>${bridgeScript}</script>`);
@@ -2986,12 +3228,17 @@ function buildCustomShell(content, customShell, ctx) {
     template = customShell.template;
   }
   const cspTag = buildCSPMetaTag(ctx.csp);
-  const dataScript = buildDataInjectionScript({
+  const dataScript = resolveDataInjectionScript({
+    dataInjection: ctx.dataInjection,
     toolName: ctx.toolName,
     input: ctx.input,
     output: ctx.output,
-    structuredContent: ctx.structuredContent
+    structuredContent: ctx.structuredContent,
+    sizing: ctx.sizing
   });
+  const sizingStyle = buildSizingStyleTag(ctx.sizing);
+  const dataWithSizing = sizingStyle ? `${dataScript}
+${sizingStyle}` : dataScript;
   let bridgeHtml = "";
   if (ctx.includeBridge) {
     const bridgeScript = generateBridgeIIFE({ minify: true });
@@ -2999,7 +3246,7 @@ function buildCustomShell(content, customShell, ctx) {
   }
   const html = applyShellTemplate(template, {
     csp: cspTag,
-    data: dataScript,
+    data: dataWithSizing,
     bridge: bridgeHtml,
     content,
     title: ctx.title ? escapeHtmlForTag(ctx.title) : ""
@@ -3146,6 +3393,29 @@ function isFunctionSource(source) {
 }
 var FRONTMCP_META_KEY = "__frontmcp_meta";
 
+// libs/uipack/src/component/ui-availability.ts
+function isFrontmcpUiResolvable(...candidatePaths) {
+  try {
+    const nodeFs = require("fs");
+    const nodePath = require("path");
+    const ORG = "@frontmcp";
+    const PKG = "ui";
+    for (const candidate of candidatePaths) {
+      let dir = candidate;
+      while (true) {
+        const pkgJson = nodePath.join(dir, "node_modules", ORG, PKG, "package.json");
+        if (nodeFs.existsSync(pkgJson)) return true;
+        const parent = nodePath.dirname(dir);
+        if (parent === dir) break;
+        dir = parent;
+      }
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
 // libs/uipack/src/component/transpiler.ts
 function transpileReactSource(source, filename) {
   const esbuild = require("esbuild");
@@ -3161,7 +3431,12 @@ function transpileReactSource(source, filename) {
   });
   return result.code;
 }
-function bundleFileSource(source, filename, resolveDir, componentName) {
+function bundleFileSource(source, filename, resolveDir, componentName, options = {}) {
+  if (!isFrontmcpUiResolvable(resolveDir, process.cwd())) {
+    throw new Error(
+      `FileSource widget "${filename}" requires the @frontmcp/ui package, which provides the React bridge mount that's injected at bundle time. Install it (e.g. \`npm install @frontmcp/ui\` or \`yarn add @frontmcp/ui\`) and try again.`
+    );
+  }
   const esbuild = require("esbuild");
   const mountCode = `
 // --- Auto-generated mount ---
@@ -3243,7 +3518,11 @@ if (__root) {
       format: "esm",
       target: "es2020",
       jsx: "automatic",
-      external: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"],
+      // When `bundleReact` is set (resourceMode: 'inline'), React itself is
+      // bundled — required for hosts that block external script execution
+      // such as Claude (#454). Otherwise React stays external and is loaded
+      // via the import map emitted by the renderer.
+      external: options.bundleReact ? [] : ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"],
       alias,
       define: { "process.env.NODE_ENV": '"production"' },
       platform: "browser",
@@ -3255,7 +3534,7 @@ if (__root) {
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
     throw new Error(
-      `Failed to bundle FileSource "${filename}": ${message}. Ensure workspace packages are built (e.g. nx build ui).`
+      `Failed to bundle FileSource "${filename}": ${message}. If the error mentions @frontmcp/ui or @frontmcp/uipack, ensure both packages are installed in the consuming project.`
     );
   }
 }
@@ -3273,6 +3552,9 @@ var DEFAULT_META = {
   renderer: "auto"
 };
 function resolveUISource(source, options) {
+  if (options?.inlineReact && options?.transformOnly) {
+    throw new Error("resolveUISource: `inlineReact` and `transformOnly` are mutually exclusive \u2014 set at most one.");
+  }
   const resolver = options?.resolver ?? createEsmShResolver();
   if (isNpmSource(source)) {
     return resolveNpmSource(source, resolver);
@@ -3281,7 +3563,7 @@ function resolveUISource(source, options) {
     return resolveImportSource(source);
   }
   if (isFileSource(source)) {
-    return resolveFileSource(source);
+    return resolveFileSource(source, { inlineReact: options?.inlineReact, transformOnly: options?.transformOnly });
   }
   if (isFunctionSource(source)) {
     return resolveFunctionSource(source, options?.input, options?.output);
@@ -3314,15 +3596,42 @@ function resolveImportSource(source) {
     peerDependencies: []
   };
 }
-function resolveFileSource(source) {
+function resolveFileSource(source, options = {}) {
   const path = require("path");
   const ext = path.extname(source.file).toLowerCase();
   if (ext === ".tsx" || ext === ".jsx") {
     const fs = require("fs");
-    const filePath = path.isAbsolute(source.file) ? source.file : path.resolve(process.cwd(), source.file);
-    const rawSource = fs.readFileSync(filePath, "utf-8");
+    const wasRelative = !path.isAbsolute(source.file);
+    const filePath = wasRelative ? path.resolve(process.cwd(), source.file) : source.file;
+    let rawSource;
+    try {
+      rawSource = fs.readFileSync(filePath, "utf-8");
+    } catch (err) {
+      const isNotFound = err?.code === "ENOENT";
+      if (isNotFound && wasRelative) {
+        throw new Error(
+          `FileSource widget "${source.file}" not found at "${filePath}". Relative paths are resolved against process.cwd() ("${process.cwd()}"), not the tool file's directory. To anchor the path to the tool file, pass an absolute path \u2014 e.g. \`{ file: fileURLToPath(new URL('./widget.tsx', import.meta.url)) }\` from \`node:url\` (see issue #444).`
+        );
+      }
+      throw err;
+    }
     const componentName = source.exportName || extractDefaultExportName(rawSource) || "Component";
-    const bundled = bundleFileSource(rawSource, source.file, path.dirname(filePath), componentName);
+    if (options.transformOnly === true) {
+      const code = transpileReactSource(rawSource, path.basename(filePath));
+      const parsed2 = parseImports(code);
+      return {
+        mode: "module",
+        code,
+        imports: [...new Set(parsed2.externalImports.map((i) => i.specifier))],
+        exportName: componentName,
+        meta: { mcpAware: true, renderer: "react" },
+        peerDependencies: source.peerDependencies || ["react", "react-dom"],
+        bundled: false
+      };
+    }
+    const bundled = bundleFileSource(rawSource, source.file, path.dirname(filePath), componentName, {
+      bundleReact: options.inlineReact === true
+    });
     const parsed = parseImports(bundled.code);
     return {
       mode: "module",
@@ -3391,12 +3700,18 @@ function generateMappedPropsCode(mapping) {
 }
 
 // libs/uipack/src/component/renderer.ts
+var DEFAULT_WIDGET_MOUNT = {
+  moduleSpecifier: "@frontmcp/ui/react",
+  wrapperImportName: "McpBridgeProvider"
+};
 function renderComponent(config, shellConfig) {
   const resolver = shellConfig.resolver ?? createEsmShResolver();
   const resolved = resolveUISource(config.source, {
     resolver,
     input: shellConfig.input,
-    output: shellConfig.output
+    output: shellConfig.output,
+    inlineReact: config.inlineReact === true,
+    transformOnly: config.transformOnly === true
   });
   const mergedShellConfig = {
     ...shellConfig,
@@ -3407,10 +3722,10 @@ function renderComponent(config, shellConfig) {
   if (resolved.mode === "inline") {
     return buildShell(resolved.html ?? "", mergedShellConfig);
   }
-  const content = buildModuleContent(resolved, resolver, config.props);
+  const content = buildModuleContent(resolved, resolver, config.props, shellConfig.mount);
   return buildShell(content, mergedShellConfig);
 }
-function buildModuleContent(resolved, resolver, propsMapping) {
+function buildModuleContent(resolved, resolver, propsMapping, mount = DEFAULT_WIDGET_MOUNT) {
   const parts = [];
   if (resolved.code && resolved.bundled) {
     const importEntries = {};
@@ -3434,14 +3749,16 @@ ${resolved.code}
       ...resolved.imports || [],
       "react-dom/client",
       // needed by mount script
-      "@frontmcp/ui/react",
-      // needed for McpBridgeProvider
+      mount.moduleSpecifier,
+      // mounter/provider package (e.g. @frontmcp/ui/react)
       // React subpath entries needed by esm.sh externalized modules:
       "react/jsx-runtime",
-      "react/jsx-dev-runtime",
-      "react-dom/server",
-      "react-dom/static"
+      "react/jsx-dev-runtime"
     ]);
+    if (mount === DEFAULT_WIDGET_MOUNT) {
+      allSpecifiers.add("react-dom/server");
+      allSpecifiers.add("react-dom/static");
+    }
     const coreDeps = /* @__PURE__ */ new Set([
       "react",
       "react-dom",
@@ -3472,8 +3789,9 @@ ${resolved.code}
       const importMap = createImportMapFromResolved(importEntries);
       parts.push(generateImportMapScriptTag(importMap));
     }
-    parts.push('<div id="root"></div>');
-    const mountCode = generateInlineMountCode(resolved.exportName);
+    const mountNodeId = mount.mountNodeId ?? "root";
+    parts.push(`<div id="${mountNodeId}">${mount.mountNodeInnerHtml ?? ""}</div>`);
+    const mountCode = generateInlineMountCode(resolved.exportName, mount);
     parts.push(`<script type="module">
 ${resolved.code}
 ${mountCode}
@@ -3510,15 +3828,21 @@ function addExternalParam(url, externals) {
   const sep = url.includes("?") ? "&" : "?";
   return `${url}${sep}external=${externals.join(",")}`;
 }
-function generateInlineMountCode(componentName) {
+function generateInlineMountCode(componentName, mount) {
+  if (mount.generate) {
+    return mount.generate(componentName);
+  }
+  const wrapperName = mount.wrapperImportName ?? "McpBridgeProvider";
+  const wrapperAlias = `__${wrapperName}`;
+  const mountNodeId = mount.mountNodeId ?? "root";
   return `
 // --- Mount ---
 import { createRoot as __createRoot } from 'react-dom/client';
-import { McpBridgeProvider as __McpBridgeProvider } from '@frontmcp/ui/react';
-const __root = document.getElementById('root');
+import { ${wrapperName} as ${wrapperAlias} } from '${mount.moduleSpecifier}';
+const __root = document.getElementById('${mountNodeId}');
 if (__root) {
   __createRoot(__root).render(
-    React.createElement(__McpBridgeProvider, null,
+    React.createElement(${wrapperAlias}, null,
       React.createElement(${componentName})
     )
   );
@@ -3594,38 +3918,6 @@ function isUIRenderFailure(result) {
   return typeof rec["reason"] === "string" && !("meta" in rec);
 }
 
-// libs/uipack/src/adapters/type-detector.ts
-function detectUIType(template) {
-  if (template === null || template === void 0) {
-    return "auto";
-  }
-  if (typeof template === "object" && template !== null && "file" in template) {
-    const file = template.file;
-    if (/\.(tsx|jsx)$/i.test(file)) return "react";
-  }
-  if (typeof template === "function") {
-    const proto = template.prototype;
-    if (proto && typeof proto.render === "function") {
-      return "react";
-    }
-    const asRecord = template;
-    if (asRecord["$$typeof"] !== void 0) {
-      return "react";
-    }
-    if (template.name && /^[A-Z]/.test(template.name)) {
-      return "react";
-    }
-    return "html";
-  }
-  if (typeof template === "string") {
-    if (template.includes("<") && template.includes(">")) {
-      return "html";
-    }
-    return "markdown";
-  }
-  return "auto";
-}
-
 // libs/uipack/src/adapters/content-detector.ts
 var CHART_TYPES = /* @__PURE__ */ new Set(["bar", "line", "pie", "area", "scatter", "doughnut", "radar", "polarArea", "bubble"]);
 var MERMAID_PREFIXES = [
@@ -3766,6 +4058,38 @@ function wrapDetectedContent(value) {
   }
 }
 
+// libs/uipack/src/adapters/type-detector.ts
+function detectUIType(template) {
+  if (template === null || template === void 0) {
+    return "auto";
+  }
+  if (typeof template === "object" && template !== null && "file" in template) {
+    const file = template.file;
+    if (/\.(tsx|jsx)$/i.test(file)) return "react";
+  }
+  if (typeof template === "function") {
+    const proto = template.prototype;
+    if (proto && typeof proto.render === "function") {
+      return "react";
+    }
+    const asRecord = template;
+    if (asRecord["$$typeof"] !== void 0) {
+      return "react";
+    }
+    if (template.name && /^[A-Z]/.test(template.name)) {
+      return "react";
+    }
+    return "html";
+  }
+  if (typeof template === "string") {
+    if (template.includes("<") && template.includes(">")) {
+      return "html";
+    }
+    return "markdown";
+  }
+  return "auto";
+}
+
 // libs/uipack/src/adapters/template-renderer.ts
 function buildCspConfig(resolver) {
   const cspResourceDomains = ["https://esm.sh"];
@@ -3786,21 +4110,26 @@ function buildCspConfig(resolver) {
   return { resourceDomains: cspResourceDomains, connectDomains: cspConnectDomains };
 }
 function renderToolTemplate(options) {
-  const { toolName, input, output, template, resolver } = options;
+  const { toolName, input, output, template, resolver, platformType, sizing } = options;
   const uiType = detectUIType(template);
+  const resourceMode = options.resourceMode ?? (platformType === "claude" ? "inline" : "cdn");
   const shellConfig = {
     toolName,
     input,
     output,
     includeBridge: true,
-    resolver
+    resolver,
+    sizing
   };
   let html;
   let hash = "";
   let size = 0;
   if (typeof template === "object" && template !== null && "file" in template) {
     const cspConfig = buildCspConfig(resolver);
-    const result = renderComponent({ source: template }, { ...shellConfig, csp: cspConfig });
+    const result = renderComponent(
+      { source: template, inlineReact: resourceMode === "inline" },
+      { ...shellConfig, csp: cspConfig }
+    );
     html = result.html;
     hash = result.hash;
     size = result.size;
@@ -3842,6 +4171,12 @@ function renderToolTemplate(options) {
     "ui/type": uiType,
     "ui/mimeType": MCP_APPS_MIME_TYPE
   };
+  if (hasSizing(sizing)) {
+    if (sizing.preferredHeight !== void 0) meta["ui/preferredHeight"] = sizing.preferredHeight;
+    if (sizing.minHeight !== void 0) meta["ui/minHeight"] = sizing.minHeight;
+    if (sizing.maxHeight !== void 0) meta["ui/maxHeight"] = sizing.maxHeight;
+    if (sizing.aspectRatio !== void 0) meta["ui/aspectRatio"] = sizing.aspectRatio;
+  }
   return {
     html,
     uiType,
@@ -3947,6 +4282,7 @@ function buildCDNInfoForUIType(uiType) {
   buildCSPDirectives,
   buildCSPMetaTag,
   buildChartHtml,
+  buildCustomDataInjectionScript,
   buildDataInjectionScript,
   buildMermaidHtml,
   buildPdfHtml,