@frontmcp/uipack 1.2.1 → 1.4.0

package/esm/adapters/index.mjs

@@ -74,78 +74,404 @@ function isUIRenderFailure(result) {
   return typeof rec["reason"] === "string" && !("meta" in rec);
 }
 
-// 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];
+// libs/uipack/src/resolver/cdn-registry.ts
+var DEFAULT_CDN_REGISTRY = {
+  react: {
+    packageName: "react",
+    defaultVersion: "19.2.4",
+    providers: {
+      cloudflare: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/react/19.2.4/umd/react.production.min.js",
+        global: "React",
+        crossorigin: "anonymous"
+      },
+      jsdelivr: {
+        url: "https://cdn.jsdelivr.net/npm/react@19.2.4/umd/react.production.min.js",
+        global: "React",
+        crossorigin: "anonymous"
+      },
+      unpkg: {
+        url: "https://unpkg.com/react@19.2.4/umd/react.production.min.js",
+        global: "React",
+        crossorigin: "anonymous"
+      },
+      "esm.sh": {
+        url: "https://esm.sh/react@19.2.4",
+        esm: true,
+        crossorigin: "anonymous"
+      }
+    },
+    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
+    metadata: {
+      description: "A JavaScript library for building user interfaces",
+      homepage: "https://react.dev",
+      license: "MIT"
+    }
+  },
+  "react-dom": {
+    packageName: "react-dom",
+    defaultVersion: "19.2.4",
+    providers: {
+      cloudflare: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/19.2.4/umd/react-dom.production.min.js",
+        global: "ReactDOM",
+        crossorigin: "anonymous",
+        peerDependencies: ["react"]
+      },
+      jsdelivr: {
+        url: "https://cdn.jsdelivr.net/npm/react-dom@19.2.4/umd/react-dom.production.min.js",
+        global: "ReactDOM",
+        crossorigin: "anonymous",
+        peerDependencies: ["react"]
+      },
+      unpkg: {
+        url: "https://unpkg.com/react-dom@19.2.4/umd/react-dom.production.min.js",
+        global: "ReactDOM",
+        crossorigin: "anonymous",
+        peerDependencies: ["react"]
+      },
+      "esm.sh": {
+        url: "https://esm.sh/react-dom@19.2.4",
+        esm: true,
+        crossorigin: "anonymous",
+        peerDependencies: ["react"]
+      }
+    },
+    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
+    metadata: {
+      description: "React package for working with the DOM",
+      homepage: "https://react.dev",
+      license: "MIT"
+    }
+  },
+  "chart.js": {
+    packageName: "chart.js",
+    defaultVersion: "4.5.1",
+    providers: {
+      cloudflare: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.1/chart.umd.min.js",
+        global: "Chart",
+        crossorigin: "anonymous"
+      },
+      jsdelivr: {
+        url: "https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js",
+        global: "Chart",
+        crossorigin: "anonymous"
+      },
+      unpkg: {
+        url: "https://unpkg.com/chart.js@4.5.1/dist/chart.umd.min.js",
+        global: "Chart",
+        crossorigin: "anonymous"
+      }
+    },
+    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
+    metadata: {
+      description: "Simple yet flexible JavaScript charting library",
+      homepage: "https://www.chartjs.org",
+      license: "MIT"
+    }
+  },
+  d3: {
+    packageName: "d3",
+    defaultVersion: "7.9.0",
+    providers: {
+      cloudflare: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js",
+        integrity: "sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==",
+        global: "d3",
+        crossorigin: "anonymous"
+      },
+      jsdelivr: {
+        url: "https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js",
+        global: "d3",
+        crossorigin: "anonymous"
+      },
+      unpkg: {
+        url: "https://unpkg.com/d3@7.9.0/dist/d3.min.js",
+        global: "d3",
+        crossorigin: "anonymous"
+      }
+    },
+    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
+    metadata: {
+      description: "Data-Driven Documents",
+      homepage: "https://d3js.org",
+      license: "ISC"
+    }
+  },
+  lodash: {
+    packageName: "lodash",
+    defaultVersion: "4.17.21",
+    providers: {
+      cloudflare: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js",
+        integrity: "sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==",
+        global: "_",
+        crossorigin: "anonymous"
+      },
+      jsdelivr: {
+        url: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js",
+        global: "_",
+        crossorigin: "anonymous"
+      },
+      unpkg: {
+        url: "https://unpkg.com/lodash@4.17.21/lodash.min.js",
+        global: "_",
+        crossorigin: "anonymous"
+      }
+    },
+    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
+    metadata: {
+      description: "A modern JavaScript utility library",
+      homepage: "https://lodash.com",
+      license: "MIT"
+    }
   }
-  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(" ")}`);
+};
+function lookupPackage(packageName, registry = DEFAULT_CDN_REGISTRY) {
+  return registry[packageName];
+}
+
+// libs/uipack/src/resolver/import-parser.ts
+var IMPORT_PATTERNS = {
+  named: /import\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g,
+  default: /import\s+(\w+)\s+from\s*['"]([^'"]+)['"]/g,
+  namespace: /import\s*\*\s*as\s+(\w+)\s+from\s*['"]([^'"]+)['"]/g,
+  sideEffect: /import\s*['"]([^'"]+)['"]/g,
+  dynamic: /(?:await\s+)?import\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
+  defaultAndNamed: /import\s+(\w+)\s*,\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g,
+  defaultAndNamespace: /import\s+(\w+)\s*,\s*\*\s*as\s+(\w+)\s+from\s*['"]([^'"]+)['"]/g,
+  reExport: /export\s*\{[^}]+\}\s*from\s*['"]([^'"]+)['"]/g,
+  reExportAll: /export\s*\*\s*from\s*['"]([^'"]+)['"]/g
+};
+function parseNamedImports(namedString) {
+  return namedString.split(",").map((s) => s.trim()).filter((s) => s.length > 0).map((s) => {
+    const asMatch = s.match(/^(\w+)\s+as\s+\w+$/);
+    return asMatch ? asMatch[1] : s;
+  });
+}
+function isRelativeImport(specifier) {
+  return specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/");
+}
+function isExternalImport(specifier) {
+  return !isRelativeImport(specifier) && !specifier.startsWith("#");
+}
+function getPackageName(specifier) {
+  if (specifier.startsWith("@")) {
+    const parts = specifier.split("/");
+    if (parts.length >= 2) {
+      return `${parts[0]}/${parts[1]}`;
+    }
+    return specifier;
   }
-  directives.push("object-src 'self' data:");
-  return directives;
+  const firstSlash = specifier.indexOf("/");
+  return firstSlash === -1 ? specifier : specifier.slice(0, firstSlash);
 }
-function buildCSPMetaTag(csp) {
-  const directives = buildCSPDirectives(csp);
-  const content = directives.join("; ");
-  return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(content)}">`;
+function getLineNumber(source, index) {
+  let line = 1;
+  for (let i = 0; i < index && i < source.length; i++) {
+    if (source[i] === "\n") {
+      line++;
+    }
+  }
+  return line;
 }
-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);
+function getColumnNumber(source, index) {
+  let column = 0;
+  for (let i = index - 1; i >= 0 && source[i] !== "\n"; i--) {
+    column++;
   }
-  try {
-    const url = new URL(domain);
-    return url.protocol === "https:";
-  } catch {
-    return false;
+  return column;
+}
+function parseImports(source) {
+  const imports = [];
+  const seenStatements = /* @__PURE__ */ new Set();
+  const addImport = (imp) => {
+    const key = `${imp.type}:${imp.specifier}:${imp.statement}`;
+    if (!seenStatements.has(key)) {
+      seenStatements.add(key);
+      imports.push(imp);
+    }
+  };
+  let match;
+  const defaultAndNamedRegex = new RegExp(IMPORT_PATTERNS.defaultAndNamed.source, "g");
+  while ((match = defaultAndNamedRegex.exec(source)) !== null) {
+    const [statement, defaultName, namedString, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "default",
+      defaultImport: defaultName,
+      namedImports: parseNamedImports(namedString),
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
   }
+  const defaultAndNamespaceRegex = new RegExp(IMPORT_PATTERNS.defaultAndNamespace.source, "g");
+  while ((match = defaultAndNamespaceRegex.exec(source)) !== null) {
+    const [statement, defaultName, namespaceName, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "default",
+      defaultImport: defaultName,
+      namespaceImport: namespaceName,
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const namedRegex = new RegExp(IMPORT_PATTERNS.named.source, "g");
+  while ((match = namedRegex.exec(source)) !== null) {
+    const [statement, namedString, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "named",
+      namedImports: parseNamedImports(namedString),
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const defaultRegex = new RegExp(IMPORT_PATTERNS.default.source, "g");
+  while ((match = defaultRegex.exec(source)) !== null) {
+    const [statement, defaultName, specifier] = match;
+    const afterMatch = source.slice(match.index + match[0].length - specifier.length - 2);
+    if (afterMatch.startsWith(",")) continue;
+    addImport({
+      statement,
+      specifier,
+      type: "default",
+      defaultImport: defaultName,
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const namespaceRegex = new RegExp(IMPORT_PATTERNS.namespace.source, "g");
+  while ((match = namespaceRegex.exec(source)) !== null) {
+    const [statement, namespaceName, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "namespace",
+      namespaceImport: namespaceName,
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const sideEffectRegex = new RegExp(IMPORT_PATTERNS.sideEffect.source, "g");
+  while ((match = sideEffectRegex.exec(source)) !== null) {
+    const [statement, specifier] = match;
+    const beforeMatch = source.slice(Math.max(0, match.index - 50), match.index);
+    if (beforeMatch.includes("from")) continue;
+    addImport({
+      statement,
+      specifier,
+      type: "side-effect",
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const dynamicRegex = new RegExp(IMPORT_PATTERNS.dynamic.source, "g");
+  while ((match = dynamicRegex.exec(source)) !== null) {
+    const [statement, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "dynamic",
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const reExportRegex = new RegExp(IMPORT_PATTERNS.reExport.source, "g");
+  while ((match = reExportRegex.exec(source)) !== null) {
+    const [statement, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "named",
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const reExportAllRegex = new RegExp(IMPORT_PATTERNS.reExportAll.source, "g");
+  while ((match = reExportAllRegex.exec(source)) !== null) {
+    const [statement, specifier] = match;
+    addImport({
+      statement,
+      specifier,
+      type: "namespace",
+      line: getLineNumber(source, match.index),
+      column: getColumnNumber(source, match.index)
+    });
+  }
+  const externalImports = imports.filter((imp) => isExternalImport(imp.specifier));
+  const relativeImports = imports.filter((imp) => isRelativeImport(imp.specifier));
+  const externalPackages = [...new Set(externalImports.map((imp) => getPackageName(imp.specifier)))];
+  return {
+    imports,
+    externalImports,
+    relativeImports,
+    externalPackages
+  };
 }
-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/esm-sh.resolver.ts
+var DEFAULT_FALLBACK_CDN = "https://esm.sh";
+function createEsmShResolver(options = {}) {
+  const {
+    fallbackCdnBase = DEFAULT_FALLBACK_CDN,
+    registry = DEFAULT_CDN_REGISTRY,
+    providerOrder = ["esm.sh", "cloudflare", "jsdelivr", "unpkg"]
+  } = options;
+  return {
+    resolve(specifier, _context) {
+      if (specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/")) {
+        return null;
+      }
+      if (specifier.startsWith("node:") || specifier.startsWith("#")) {
+        return null;
+      }
+      const pkgName = getPackageName(specifier);
+      const entry = lookupPackage(pkgName, registry);
+      if (entry) {
+        for (const provider of providerOrder) {
+          const config = entry.providers[provider];
+          if (config?.url) {
+            const subpath = specifier.slice(pkgName.length);
+            if (subpath && config.url.includes("esm.sh/")) {
+              return {
+                value: config.url + subpath,
+                type: "url",
+                integrity: config.integrity
+              };
+            }
+            if (subpath) {
+              return {
+                value: `${fallbackCdnBase}/${specifier}`,
+                type: "url"
+              };
+            }
+            if (config.global && !config.esm) {
+              return {
+                value: config.url,
+                type: "url",
+                integrity: config.integrity
+              };
+            }
+            return {
+              value: config.url,
+              type: "url",
+              integrity: config.integrity
+            };
+          }
+        }
+      }
+      return {
+        value: `${fallbackCdnBase}/${specifier}`,
+        type: "url"
+      };
     }
-  }
-  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/utils/index.ts
@@ -179,46 +505,29 @@ function safeJsonForScript(value) {
   }
 }
 
-// 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")}
-</script>`;
-}
-var _uniqueIdCounter = 0;
-function createTemplateHelpers() {
-  return {
-    escapeHtml: (str) => escapeHtml(str),
-    formatDate: (date, format) => {
-      const d = date instanceof Date ? date : new Date(date);
-      if (isNaN(d.getTime())) return String(date);
-      if (format === "iso") return d.toISOString();
-      if (format === "date") return d.toLocaleDateString();
-      if (format === "time") return d.toLocaleTimeString();
-      return d.toLocaleString();
-    },
-    formatCurrency: (amount, currency = "USD") => {
-      return new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency
-      }).format(amount);
-    },
-    uniqueId: (prefix = "mcp") => {
-      return `${prefix}-${++_uniqueIdCounter}`;
-    },
-    jsonEmbed: (data) => {
-      return escapeScriptClose(JSON.stringify(data));
+// 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/bridge-runtime/iife-generator.ts
 function generateBridgeIIFE(options = {}) {
@@ -274,6 +583,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()) {");
@@ -294,6 +605,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() {
@@ -401,6 +818,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();
   }
@@ -645,6 +1075,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', {});
   },
@@ -733,6 +1172,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();
   }
@@ -784,6 +1227,9 @@ var GeminiAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -819,6 +1265,9 @@ var GenericAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -1053,6 +1502,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);
@@ -1251,564 +1709,404 @@ var BRIDGE_SCRIPT_TAGS = {
   gemini: `<script>${generatePlatformBundle("gemini")}</script>`
 };
 
-// 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"];
-
-// 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;
-}
-
-// libs/uipack/src/shell/builder.ts
-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 });
-  if (!withShell) {
-    const html2 = `${dataScript}
-${content}`;
-    return {
-      html: html2,
-      hash: simpleHash(html2),
-      size: Buffer.byteLength(html2, "utf-8")
-    };
-  }
-  if (customShell) {
-    return buildCustomShell(content, customShell, {
-      csp,
-      toolName,
-      input,
-      output,
-      structuredContent,
-      includeBridge,
-      title
-    });
-  }
-  const headParts = [
-    '<meta charset="UTF-8">',
-    '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
-  ];
-  if (title) {
-    headParts.push(`<title>${escapeHtmlForTag(title)}</title>`);
-  }
-  headParts.push(buildCSPMetaTag(csp));
-  headParts.push(dataScript);
-  if (includeBridge) {
-    const bridgeScript = generateBridgeIIFE({ minify: true });
-    headParts.push(`<script>${bridgeScript}</script>`);
-  }
-  const html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-${headParts.map((p) => `  ${p}`).join("\n")}
-</head>
-<body>
-${content}
-</body>
-</html>`;
-  return {
-    html,
-    hash: simpleHash(html),
-    size: Buffer.byteLength(html, "utf-8")
-  };
-}
-function buildCustomShell(content, customShell, ctx) {
-  let template;
-  if (typeof customShell === "string") {
-    const validation = validateShellTemplate(customShell);
-    if (!validation.valid) {
-      throw new Error(
-        `Custom shell template is missing required placeholder(s): ${validation.missingRequired.map((n) => `{{${n}}}`).join(", ")}`
-      );
-    }
-    template = customShell;
-  } else {
-    template = customShell.template;
+// 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 cspTag = buildCSPMetaTag(ctx.csp);
-  const dataScript = buildDataInjectionScript({
-    toolName: ctx.toolName,
-    input: ctx.input,
-    output: ctx.output,
-    structuredContent: ctx.structuredContent
-  });
-  let bridgeHtml = "";
-  if (ctx.includeBridge) {
-    const bridgeScript = generateBridgeIIFE({ minify: true });
-    bridgeHtml = `<script>${bridgeScript}</script>`;
+  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(" ")}`);
   }
-  const html = applyShellTemplate(template, {
-    csp: cspTag,
-    data: dataScript,
-    bridge: bridgeHtml,
-    content,
-    title: ctx.title ? escapeHtmlForTag(ctx.title) : ""
-  });
-  return {
-    html,
-    hash: simpleHash(html),
-    size: Buffer.byteLength(html, "utf-8")
-  };
+  directives.push("object-src 'self' data:");
+  return directives;
 }
-function simpleHash(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char | 0;
-  }
-  return Math.abs(hash).toString(16).padStart(8, "0");
+function buildCSPMetaTag(csp) {
+  const directives = buildCSPDirectives(csp);
+  const content = directives.join("; ");
+  return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(content)}">`;
 }
-function escapeHtmlForTag(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+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;
+  }
 }
-
-// libs/uipack/src/resolver/cdn-registry.ts
-var DEFAULT_CDN_REGISTRY = {
-  react: {
-    packageName: "react",
-    defaultVersion: "19.2.4",
-    providers: {
-      cloudflare: {
-        url: "https://cdnjs.cloudflare.com/ajax/libs/react/19.2.4/umd/react.production.min.js",
-        global: "React",
-        crossorigin: "anonymous"
-      },
-      jsdelivr: {
-        url: "https://cdn.jsdelivr.net/npm/react@19.2.4/umd/react.production.min.js",
-        global: "React",
-        crossorigin: "anonymous"
-      },
-      unpkg: {
-        url: "https://unpkg.com/react@19.2.4/umd/react.production.min.js",
-        global: "React",
-        crossorigin: "anonymous"
-      },
-      "esm.sh": {
-        url: "https://esm.sh/react@19.2.4",
-        esm: true,
-        crossorigin: "anonymous"
-      }
-    },
-    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
-    metadata: {
-      description: "A JavaScript library for building user interfaces",
-      homepage: "https://react.dev",
-      license: "MIT"
-    }
-  },
-  "react-dom": {
-    packageName: "react-dom",
-    defaultVersion: "19.2.4",
-    providers: {
-      cloudflare: {
-        url: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/19.2.4/umd/react-dom.production.min.js",
-        global: "ReactDOM",
-        crossorigin: "anonymous",
-        peerDependencies: ["react"]
-      },
-      jsdelivr: {
-        url: "https://cdn.jsdelivr.net/npm/react-dom@19.2.4/umd/react-dom.production.min.js",
-        global: "ReactDOM",
-        crossorigin: "anonymous",
-        peerDependencies: ["react"]
-      },
-      unpkg: {
-        url: "https://unpkg.com/react-dom@19.2.4/umd/react-dom.production.min.js",
-        global: "ReactDOM",
-        crossorigin: "anonymous",
-        peerDependencies: ["react"]
-      },
-      "esm.sh": {
-        url: "https://esm.sh/react-dom@19.2.4",
-        esm: true,
-        crossorigin: "anonymous",
-        peerDependencies: ["react"]
-      }
-    },
-    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
-    metadata: {
-      description: "React package for working with the DOM",
-      homepage: "https://react.dev",
-      license: "MIT"
-    }
-  },
-  "chart.js": {
-    packageName: "chart.js",
-    defaultVersion: "4.5.1",
-    providers: {
-      cloudflare: {
-        url: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.1/chart.umd.min.js",
-        global: "Chart",
-        crossorigin: "anonymous"
-      },
-      jsdelivr: {
-        url: "https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js",
-        global: "Chart",
-        crossorigin: "anonymous"
-      },
-      unpkg: {
-        url: "https://unpkg.com/chart.js@4.5.1/dist/chart.umd.min.js",
-        global: "Chart",
-        crossorigin: "anonymous"
-      }
-    },
-    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
-    metadata: {
-      description: "Simple yet flexible JavaScript charting library",
-      homepage: "https://www.chartjs.org",
-      license: "MIT"
-    }
-  },
-  d3: {
-    packageName: "d3",
-    defaultVersion: "7.9.0",
-    providers: {
-      cloudflare: {
-        url: "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js",
-        integrity: "sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==",
-        global: "d3",
-        crossorigin: "anonymous"
-      },
-      jsdelivr: {
-        url: "https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js",
-        global: "d3",
-        crossorigin: "anonymous"
-      },
-      unpkg: {
-        url: "https://unpkg.com/d3@7.9.0/dist/d3.min.js",
-        global: "d3",
-        crossorigin: "anonymous"
-      }
-    },
-    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
-    metadata: {
-      description: "Data-Driven Documents",
-      homepage: "https://d3js.org",
-      license: "ISC"
-    }
-  },
-  lodash: {
-    packageName: "lodash",
-    defaultVersion: "4.17.21",
-    providers: {
-      cloudflare: {
-        url: "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js",
-        integrity: "sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==",
-        global: "_",
-        crossorigin: "anonymous"
-      },
-      jsdelivr: {
-        url: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js",
-        global: "_",
-        crossorigin: "anonymous"
-      },
-      unpkg: {
-        url: "https://unpkg.com/lodash@4.17.21/lodash.min.js",
-        global: "_",
-        crossorigin: "anonymous"
-      }
-    },
-    preferredProviders: ["esm.sh", "cloudflare", "jsdelivr", "unpkg"],
-    metadata: {
-      description: "A modern JavaScript utility library",
-      homepage: "https://lodash.com",
-      license: "MIT"
+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}`);
     }
   }
-};
-function lookupPackage(packageName, registry = DEFAULT_CDN_REGISTRY) {
-  return registry[packageName];
+  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/resolver/import-parser.ts
-var IMPORT_PATTERNS = {
-  named: /import\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g,
-  default: /import\s+(\w+)\s+from\s*['"]([^'"]+)['"]/g,
-  namespace: /import\s*\*\s*as\s+(\w+)\s+from\s*['"]([^'"]+)['"]/g,
-  sideEffect: /import\s*['"]([^'"]+)['"]/g,
-  dynamic: /(?:await\s+)?import\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
-  defaultAndNamed: /import\s+(\w+)\s*,\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]/g,
-  defaultAndNamespace: /import\s+(\w+)\s*,\s*\*\s*as\s+(\w+)\s+from\s*['"]([^'"]+)['"]/g,
-  reExport: /export\s*\{[^}]+\}\s*from\s*['"]([^'"]+)['"]/g,
-  reExportAll: /export\s*\*\s*from\s*['"]([^'"]+)['"]/g
+// 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}}"
 };
-function parseNamedImports(namedString) {
-  return namedString.split(",").map((s) => s.trim()).filter((s) => s.length > 0).map((s) => {
-    const asMatch = s.match(/^(\w+)\s+as\s+\w+$/);
-    return asMatch ? asMatch[1] : s;
-  });
+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;
 }
-function isRelativeImport(specifier) {
-  return specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/");
+
+// 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
+  };
 }
-function isExternalImport(specifier) {
-  return !isRelativeImport(specifier) && !specifier.startsWith("#");
+
+// 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 getPackageName(specifier) {
-  if (specifier.startsWith("@")) {
-    const parts = specifier.split("/");
-    if (parts.length >= 2) {
-      return `${parts[0]}/${parts[1]}`;
-    }
-    return specifier;
+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)};`);
   }
-  const firstSlash = specifier.indexOf("/");
-  return firstSlash === -1 ? specifier : specifier.slice(0, firstSlash);
+  return `<script>
+${lines.join("\n")}
+</script>`;
 }
-function getLineNumber(source, index) {
-  let line = 1;
-  for (let i = 0; i < index && i < source.length; i++) {
-    if (source[i] === "\n") {
-      line++;
-    }
+function buildCustomDataInjectionScript(descriptor) {
+  if (descriptor.script !== void 0) {
+    return descriptor.script;
   }
-  return line;
-}
-function getColumnNumber(source, index) {
-  let column = 0;
-  for (let i = index - 1; i >= 0 && source[i] !== "\n"; i--) {
-    column++;
+  if (descriptor.globalKey !== void 0) {
+    return `<script>window[${safeJsonForScript(descriptor.globalKey)}] = ${safeJsonForScript(
+      descriptor.value ?? null
+    )};</script>`;
   }
-  return column;
+  return "";
 }
-function parseImports(source) {
-  const imports = [];
-  const seenStatements = /* @__PURE__ */ new Set();
-  const addImport = (imp) => {
-    const key = `${imp.type}:${imp.specifier}:${imp.statement}`;
-    if (!seenStatements.has(key)) {
-      seenStatements.add(key);
-      imports.push(imp);
+var _uniqueIdCounter = 0;
+function createTemplateHelpers() {
+  return {
+    escapeHtml: (str) => escapeHtml(str),
+    formatDate: (date, format) => {
+      const d = date instanceof Date ? date : new Date(date);
+      if (isNaN(d.getTime())) return String(date);
+      if (format === "iso") return d.toISOString();
+      if (format === "date") return d.toLocaleDateString();
+      if (format === "time") return d.toLocaleTimeString();
+      return d.toLocaleString();
+    },
+    formatCurrency: (amount, currency = "USD") => {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency
+      }).format(amount);
+    },
+    uniqueId: (prefix = "mcp") => {
+      return `${prefix}-${++_uniqueIdCounter}`;
+    },
+    jsonEmbed: (data) => {
+      return escapeScriptClose(JSON.stringify(data));
     }
   };
-  let match;
-  const defaultAndNamedRegex = new RegExp(IMPORT_PATTERNS.defaultAndNamed.source, "g");
-  while ((match = defaultAndNamedRegex.exec(source)) !== null) {
-    const [statement, defaultName, namedString, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "default",
-      defaultImport: defaultName,
-      namedImports: parseNamedImports(namedString),
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+}
+
+// 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};`);
   }
-  const defaultAndNamespaceRegex = new RegExp(IMPORT_PATTERNS.defaultAndNamespace.source, "g");
-  while ((match = defaultAndNamespaceRegex.exec(source)) !== null) {
-    const [statement, defaultName, namespaceName, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "default",
-      defaultImport: defaultName,
-      namespaceImport: namespaceName,
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  if (sizing.minHeight !== void 0) {
+    const mh = toCssLength(sizing.minHeight);
+    docRules.push(`min-height: ${mh};`);
+    rootRules.push(`min-height: ${mh};`);
   }
-  const namedRegex = new RegExp(IMPORT_PATTERNS.named.source, "g");
-  while ((match = namedRegex.exec(source)) !== null) {
-    const [statement, namedString, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "named",
-      namedImports: parseNamedImports(namedString),
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  if (sizing.maxHeight !== void 0) {
+    const mx = toCssLength(sizing.maxHeight);
+    docRules.push(`max-height: ${mx};`);
+    rootRules.push(`max-height: ${mx};`);
   }
-  const defaultRegex = new RegExp(IMPORT_PATTERNS.default.source, "g");
-  while ((match = defaultRegex.exec(source)) !== null) {
-    const [statement, defaultName, specifier] = match;
-    const afterMatch = source.slice(match.index + match[0].length - specifier.length - 2);
-    if (afterMatch.startsWith(",")) continue;
-    addImport({
-      statement,
-      specifier,
-      type: "default",
-      defaultImport: defaultName,
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  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 namespaceRegex = new RegExp(IMPORT_PATTERNS.namespace.source, "g");
-  while ((match = namespaceRegex.exec(source)) !== null) {
-    const [statement, namespaceName, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "namespace",
-      namespaceImport: namespaceName,
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  const parts = [`html, body { ${docRules.join(" ")} }`];
+  if (rootRules.length > 0) {
+    parts.push(`#root { ${rootRules.join(" ")} }`);
   }
-  const sideEffectRegex = new RegExp(IMPORT_PATTERNS.sideEffect.source, "g");
-  while ((match = sideEffectRegex.exec(source)) !== null) {
-    const [statement, specifier] = match;
-    const beforeMatch = source.slice(Math.max(0, match.index - 50), match.index);
-    if (beforeMatch.includes("from")) continue;
-    addImport({
-      statement,
-      specifier,
-      type: "side-effect",
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  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,
+    sizing
+  } = config;
+  const { customShell, dataInjection } = config;
+  const dataScript = resolveDataInjectionScript({
+    dataInjection,
+    toolName,
+    input,
+    output,
+    structuredContent,
+    sizing
+  });
+  if (!withShell) {
+    const html2 = `${dataScript}
+${content}`;
+    return {
+      html: html2,
+      hash: simpleHash(html2),
+      size: Buffer.byteLength(html2, "utf-8")
+    };
   }
-  const dynamicRegex = new RegExp(IMPORT_PATTERNS.dynamic.source, "g");
-  while ((match = dynamicRegex.exec(source)) !== null) {
-    const [statement, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "dynamic",
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
+  if (customShell) {
+    return buildCustomShell(content, customShell, {
+      csp,
+      toolName,
+      input,
+      output,
+      structuredContent,
+      includeBridge,
+      title,
+      sizing,
+      dataInjection
     });
   }
-  const reExportRegex = new RegExp(IMPORT_PATTERNS.reExport.source, "g");
-  while ((match = reExportRegex.exec(source)) !== null) {
-    const [statement, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "named",
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  const headParts = [
+    '<meta charset="UTF-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
+  ];
+  if (title) {
+    headParts.push(`<title>${escapeHtmlForTag(title)}</title>`);
   }
-  const reExportAllRegex = new RegExp(IMPORT_PATTERNS.reExportAll.source, "g");
-  while ((match = reExportAllRegex.exec(source)) !== null) {
-    const [statement, specifier] = match;
-    addImport({
-      statement,
-      specifier,
-      type: "namespace",
-      line: getLineNumber(source, match.index),
-      column: getColumnNumber(source, match.index)
-    });
+  headParts.push(buildCSPMetaTag(csp));
+  headParts.push(dataScript);
+  const sizingStyle = buildSizingStyleTag(sizing);
+  if (sizingStyle) {
+    headParts.push(sizingStyle);
   }
-  const externalImports = imports.filter((imp) => isExternalImport(imp.specifier));
-  const relativeImports = imports.filter((imp) => isRelativeImport(imp.specifier));
-  const externalPackages = [...new Set(externalImports.map((imp) => getPackageName(imp.specifier)))];
+  if (includeBridge) {
+    const bridgeScript = generateBridgeIIFE({ minify: true });
+    headParts.push(`<script>${bridgeScript}</script>`);
+  }
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+${headParts.map((p) => `  ${p}`).join("\n")}
+</head>
+<body>
+${content}
+</body>
+</html>`;
   return {
-    imports,
-    externalImports,
-    relativeImports,
-    externalPackages
+    html,
+    hash: simpleHash(html),
+    size: Buffer.byteLength(html, "utf-8")
   };
 }
-
-// libs/uipack/src/resolver/esm-sh.resolver.ts
-var DEFAULT_FALLBACK_CDN = "https://esm.sh";
-function createEsmShResolver(options = {}) {
-  const {
-    fallbackCdnBase = DEFAULT_FALLBACK_CDN,
-    registry = DEFAULT_CDN_REGISTRY,
-    providerOrder = ["esm.sh", "cloudflare", "jsdelivr", "unpkg"]
-  } = options;
-  return {
-    resolve(specifier, _context) {
-      if (specifier.startsWith("./") || specifier.startsWith("../") || specifier.startsWith("/")) {
-        return null;
-      }
-      if (specifier.startsWith("node:") || specifier.startsWith("#")) {
-        return null;
-      }
-      const pkgName = getPackageName(specifier);
-      const entry = lookupPackage(pkgName, registry);
-      if (entry) {
-        for (const provider of providerOrder) {
-          const config = entry.providers[provider];
-          if (config?.url) {
-            const subpath = specifier.slice(pkgName.length);
-            if (subpath && config.url.includes("esm.sh/")) {
-              return {
-                value: config.url + subpath,
-                type: "url",
-                integrity: config.integrity
-              };
-            }
-            if (subpath) {
-              return {
-                value: `${fallbackCdnBase}/${specifier}`,
-                type: "url"
-              };
-            }
-            if (config.global && !config.esm) {
-              return {
-                value: config.url,
-                type: "url",
-                integrity: config.integrity
-              };
-            }
-            return {
-              value: config.url,
-              type: "url",
-              integrity: config.integrity
-            };
-          }
-        }
-      }
-      return {
-        value: `${fallbackCdnBase}/${specifier}`,
-        type: "url"
-      };
+function buildCustomShell(content, customShell, ctx) {
+  let template;
+  if (typeof customShell === "string") {
+    const validation = validateShellTemplate(customShell);
+    if (!validation.valid) {
+      throw new Error(
+        `Custom shell template is missing required placeholder(s): ${validation.missingRequired.map((n) => `{{${n}}}`).join(", ")}`
+      );
     }
+    template = customShell;
+  } else {
+    template = customShell.template;
+  }
+  const cspTag = buildCSPMetaTag(ctx.csp);
+  const dataScript = resolveDataInjectionScript({
+    dataInjection: ctx.dataInjection,
+    toolName: ctx.toolName,
+    input: ctx.input,
+    output: ctx.output,
+    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 });
+    bridgeHtml = `<script>${bridgeScript}</script>`;
+  }
+  const html = applyShellTemplate(template, {
+    csp: cspTag,
+    data: dataWithSizing,
+    bridge: bridgeHtml,
+    content,
+    title: ctx.title ? escapeHtmlForTag(ctx.title) : ""
+  });
+  return {
+    html,
+    hash: simpleHash(html),
+    size: Buffer.byteLength(html, "utf-8")
   };
 }
-
-// libs/uipack/src/component/types.ts
-function isNpmSource(source) {
-  return typeof source === "object" && source !== null && "npm" in source;
-}
-function isFileSource(source) {
-  return typeof source === "object" && source !== null && "file" in source;
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char | 0;
+  }
+  return Math.abs(hash).toString(16).padStart(8, "0");
 }
-function isImportSource(source) {
-  return typeof source === "object" && source !== null && "import" in source;
+function escapeHtmlForTag(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function isFunctionSource(source) {
-  return typeof source === "function";
+
+// 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 bundleFileSource(source, filename, resolveDir, componentName) {
+function transpileReactSource(source, filename) {
+  const esbuild = __require("esbuild");
+  const loader = filename?.endsWith(".tsx") ? "tsx" : "jsx";
+  const result = esbuild.transformSync(source, {
+    loader,
+    jsx: "transform",
+    jsxFactory: "React.createElement",
+    jsxFragment: "React.Fragment",
+    format: "esm",
+    target: "es2020",
+    define: { "process.env.NODE_ENV": '"production"' }
+  });
+  return result.code;
+}
+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 ---
@@ -1890,7 +2188,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",
@@ -1902,7 +2204,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.`
     );
   }
 }
@@ -1914,12 +2216,29 @@ function extractDefaultExportName(code) {
   return null;
 }
 
+// libs/uipack/src/component/types.ts
+function isNpmSource(source) {
+  return typeof source === "object" && source !== null && "npm" in source;
+}
+function isFileSource(source) {
+  return typeof source === "object" && source !== null && "file" in source;
+}
+function isImportSource(source) {
+  return typeof source === "object" && source !== null && "import" in source;
+}
+function isFunctionSource(source) {
+  return typeof source === "function";
+}
+
 // libs/uipack/src/component/loader.ts
 var DEFAULT_META = {
   mcpAware: false,
   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);
@@ -1928,7 +2247,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);
@@ -1961,15 +2280,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",
@@ -2037,37 +2383,19 @@ function generateMappedPropsCode(mapping) {
   return `({ ${entries} })`;
 }
 
-// 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,
@@ -2078,10 +2406,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 = {};
@@ -2105,14 +2433,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",
@@ -2143,8 +2473,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}
@@ -2181,53 +2512,27 @@ 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})
     )
   );
 }`;
 }
 
-// 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 = [
@@ -2368,6 +2673,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"];
@@ -2388,21 +2725,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;
@@ -2444,6 +2786,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,