@frontmcp/uipack 1.2.1 → 1.4.0

package/esm/component/index.mjs

@@ -444,6 +444,29 @@ function safeJsonForScript(value) {
   }
 }
 
+// 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");
@@ -459,7 +482,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 ---
@@ -541,7 +569,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",
@@ -553,7 +585,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.`
     );
   }
 }
@@ -571,6 +603,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);
@@ -579,7 +614,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);
@@ -612,15 +647,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",
@@ -688,92 +750,27 @@ function generateMappedPropsCode(mapping) {
   return `({ ${entries} })`;
 }
 
-// libs/uipack/src/shell/csp.ts
-var DEFAULT_CDN_DOMAINS = [
-  "https://cdn.jsdelivr.net",
-  "https://cdnjs.cloudflare.com",
-  "https://fonts.googleapis.com",
-  "https://fonts.gstatic.com",
-  "https://esm.sh"
-];
-var DEFAULT_CSP_DIRECTIVES = [
-  "default-src 'none'",
-  `script-src 'self' 'unsafe-inline' ${DEFAULT_CDN_DOMAINS.join(" ")}`,
-  `style-src 'self' 'unsafe-inline' ${DEFAULT_CDN_DOMAINS.join(" ")}`,
-  `img-src 'self' data: ${DEFAULT_CDN_DOMAINS.join(" ")}`,
-  `font-src 'self' data: ${DEFAULT_CDN_DOMAINS.join(" ")}`,
-  `connect-src ${DEFAULT_CDN_DOMAINS.join(" ")}`,
-  "object-src 'self' data:"
-];
-function buildCSPDirectives(csp) {
-  if (!csp) {
-    return [...DEFAULT_CSP_DIRECTIVES];
-  }
-  const validResourceDomains = sanitizeCSPDomains(csp.resourceDomains);
-  const validConnectDomains = sanitizeCSPDomains(csp.connectDomains);
-  const allResourceDomains = [.../* @__PURE__ */ new Set([...DEFAULT_CDN_DOMAINS, ...validResourceDomains])];
-  const directives = [
-    "default-src 'none'",
-    `script-src 'self' 'unsafe-inline' ${allResourceDomains.join(" ")}`,
-    `style-src 'self' 'unsafe-inline' ${allResourceDomains.join(" ")}`
-  ];
-  const imgSources = ["'self'", "data:", ...allResourceDomains];
-  directives.push(`img-src ${imgSources.join(" ")}`);
-  const fontSources = ["'self'", "data:", ...allResourceDomains];
-  directives.push(`font-src ${fontSources.join(" ")}`);
-  if (validConnectDomains.length) {
-    directives.push(`connect-src ${validConnectDomains.join(" ")}`);
-  } else {
-    directives.push(`connect-src ${allResourceDomains.join(" ")}`);
-  }
-  directives.push("object-src 'self' data:");
-  return directives;
-}
-function buildCSPMetaTag(csp) {
-  const directives = buildCSPDirectives(csp);
-  const content = directives.join("; ");
-  return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(content)}">`;
-}
-function validateCSPDomain(domain) {
-  if (domain.startsWith("https://*.")) {
-    const rest = domain.slice(10);
-    return /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.[a-zA-Z]{2,}$/.test(rest);
-  }
-  try {
-    const url = new URL(domain);
-    return url.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-function sanitizeCSPDomains(domains) {
-  if (!domains) return [];
-  const valid = [];
-  for (const domain of domains) {
-    if (validateCSPDomain(domain)) {
-      valid.push(domain);
-    } else {
-      console.warn(`Invalid CSP domain ignored: ${domain}`);
+// libs/uipack/src/resolver/import-map.ts
+function createImportMapFromResolved(resolved) {
+  const imports = {};
+  const integrity = {};
+  for (const [specifier, res] of Object.entries(resolved)) {
+    if (res.type === "url") {
+      imports[specifier] = res.value;
+      if (res.integrity) {
+        integrity[res.value] = res.integrity;
+      }
     }
   }
-  return valid;
-}
-function escapeAttribute(str) {
-  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return {
+    imports,
+    integrity: Object.keys(integrity).length > 0 ? integrity : void 0
+  };
 }
-
-// libs/uipack/src/shell/data-injector.ts
-function buildDataInjectionScript(options) {
-  const { toolName, input, output, structuredContent } = options;
-  const lines = [
-    `window.__mcpAppsEnabled = true;`,
-    `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
-    `window.__mcpToolInput = ${safeJsonForScript(input ?? null)};`,
-    `window.__mcpToolOutput = ${safeJsonForScript(output ?? null)};`,
-    `window.__mcpStructuredContent = ${safeJsonForScript(structuredContent ?? null)};`
-  ];
-  return `<script>
-${lines.join("\n")}
+function generateImportMapScriptTag(map) {
+  const json = JSON.stringify(map, null, 2).replace(/<\//g, "<\\/");
+  return `<script type="importmap">
+${json}
 </script>`;
 }
 
@@ -831,6 +828,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()) {");
@@ -851,6 +850,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() {
@@ -958,6 +1063,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();
   }
@@ -1202,6 +1320,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', {});
   },
@@ -1290,6 +1417,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();
   }
@@ -1341,6 +1472,9 @@ var GeminiAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -1376,6 +1510,9 @@ var GenericAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -1610,6 +1747,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);
@@ -1808,6 +1954,80 @@ var BRIDGE_SCRIPT_TAGS = {
   gemini: `<script>${generatePlatformBundle("gemini")}</script>`
 };
 
+// libs/uipack/src/shell/csp.ts
+var DEFAULT_CDN_DOMAINS = [
+  "https://cdn.jsdelivr.net",
+  "https://cdnjs.cloudflare.com",
+  "https://fonts.googleapis.com",
+  "https://fonts.gstatic.com",
+  "https://esm.sh"
+];
+var DEFAULT_CSP_DIRECTIVES = [
+  "default-src 'none'",
+  `script-src 'self' 'unsafe-inline' ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `style-src 'self' 'unsafe-inline' ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `img-src 'self' data: ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `font-src 'self' data: ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  `connect-src ${DEFAULT_CDN_DOMAINS.join(" ")}`,
+  "object-src 'self' data:"
+];
+function buildCSPDirectives(csp) {
+  if (!csp) {
+    return [...DEFAULT_CSP_DIRECTIVES];
+  }
+  const validResourceDomains = sanitizeCSPDomains(csp.resourceDomains);
+  const validConnectDomains = sanitizeCSPDomains(csp.connectDomains);
+  const allResourceDomains = [.../* @__PURE__ */ new Set([...DEFAULT_CDN_DOMAINS, ...validResourceDomains])];
+  const directives = [
+    "default-src 'none'",
+    `script-src 'self' 'unsafe-inline' ${allResourceDomains.join(" ")}`,
+    `style-src 'self' 'unsafe-inline' ${allResourceDomains.join(" ")}`
+  ];
+  const imgSources = ["'self'", "data:", ...allResourceDomains];
+  directives.push(`img-src ${imgSources.join(" ")}`);
+  const fontSources = ["'self'", "data:", ...allResourceDomains];
+  directives.push(`font-src ${fontSources.join(" ")}`);
+  if (validConnectDomains.length) {
+    directives.push(`connect-src ${validConnectDomains.join(" ")}`);
+  } else {
+    directives.push(`connect-src ${allResourceDomains.join(" ")}`);
+  }
+  directives.push("object-src 'self' data:");
+  return directives;
+}
+function buildCSPMetaTag(csp) {
+  const directives = buildCSPDirectives(csp);
+  const content = directives.join("; ");
+  return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(content)}">`;
+}
+function validateCSPDomain(domain) {
+  if (domain.startsWith("https://*.")) {
+    const rest = domain.slice(10);
+    return /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.[a-zA-Z]{2,}$/.test(rest);
+  }
+  try {
+    const url = new URL(domain);
+    return url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function sanitizeCSPDomains(domains) {
+  if (!domains) return [];
+  const valid = [];
+  for (const domain of domains) {
+    if (validateCSPDomain(domain)) {
+      valid.push(domain);
+    } else {
+      console.warn(`Invalid CSP domain ignored: ${domain}`);
+    }
+  }
+  return valid;
+}
+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 = {
@@ -1820,6 +2040,17 @@ var SHELL_PLACEHOLDERS = {
 var REQUIRED_PLACEHOLDERS = ["CONTENT"];
 var OPTIONAL_PLACEHOLDERS = ["CSP", "DATA", "BRIDGE", "TITLE"];
 
+// 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 = {};
@@ -1836,22 +2067,112 @@ function validateShellTemplate(template) {
   };
 }
 
-// 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/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, sizing } = options;
+  const lines = [
+    `window.__mcpAppsEnabled = true;`,
+    `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
+    `window.__mcpToolInput = ${safeJsonForScript(input ?? null)};`,
+    `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 "";
+}
+
+// libs/uipack/src/shell/sizing-css.ts
+function sanitizeCssValue(value) {
+  return value.replace(/[<>{};]/g, "").trim();
+}
+function toCssLength(value) {
+  return typeof value === "number" ? `${value}px` : sanitizeCssValue(value);
+}
+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}`;
@@ -1869,7 +2190,9 @@ ${content}`;
       output,
       structuredContent,
       includeBridge,
-      title
+      title,
+      sizing,
+      dataInjection
     });
   }
   const headParts = [
@@ -1881,6 +2204,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>`);
@@ -1914,12 +2241,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 });
@@ -1927,7 +2259,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) : ""
@@ -1950,37 +2282,19 @@ function escapeHtmlForTag(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
-// libs/uipack/src/resolver/import-map.ts
-function createImportMapFromResolved(resolved) {
-  const imports = {};
-  const integrity = {};
-  for (const [specifier, res] of Object.entries(resolved)) {
-    if (res.type === "url") {
-      imports[specifier] = res.value;
-      if (res.integrity) {
-        integrity[res.value] = res.integrity;
-      }
-    }
-  }
-  return {
-    imports,
-    integrity: Object.keys(integrity).length > 0 ? integrity : void 0
-  };
-}
-function generateImportMapScriptTag(map) {
-  const json = JSON.stringify(map, null, 2).replace(/<\//g, "<\\/");
-  return `<script type="importmap">
-${json}
-</script>`;
-}
-
 // 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,
@@ -1991,10 +2305,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 = {};
@@ -2018,14 +2332,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",
@@ -2056,8 +2372,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}
@@ -2094,15 +2411,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})
     )
   );