@frontmcp/uipack 1.3.0 → 1.4.1

package/esm/shell/index.mjs

@@ -1,158 +1,3 @@
-// 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:"
-];
-var RESTRICTIVE_CSP_DIRECTIVES = [
-  "default-src 'none'",
-  "script-src 'self' 'unsafe-inline'",
-  "style-src 'self' 'unsafe-inline'",
-  "img-src 'self' data:",
-  "font-src 'self' data:",
-  "connect-src 'none'",
-  "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/utils/index.ts
-function escapeHtml(str) {
-  if (str === null || str === void 0) {
-    return "";
-  }
-  const s = String(str);
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
-function escapeScriptClose(jsonString) {
-  return jsonString.replace(/<\//g, "<\\/");
-}
-function safeJsonForScript(value) {
-  if (value === void 0) {
-    return "null";
-  }
-  try {
-    const jsonString = JSON.stringify(value, (_key, val) => {
-      if (typeof val === "bigint") {
-        return val.toString();
-      }
-      return val;
-    });
-    if (jsonString === void 0) {
-      return "null";
-    }
-    return escapeScriptClose(jsonString);
-  } catch {
-    return '{"error":"Value could not be serialized"}';
-  }
-}
-
-// 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/bridge-runtime/iife-generator.ts
 function generateBridgeIIFE(options = {}) {
   const { debug = false, trustedOrigins = [], minify = false } = options;
@@ -207,6 +52,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()) {");
@@ -227,6 +74,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() {
@@ -334,6 +287,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();
   }
@@ -578,6 +544,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', {});
   },
@@ -666,6 +641,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();
   }
@@ -717,6 +696,9 @@ var GeminiAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -752,6 +734,9 @@ var GenericAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -986,6 +971,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);
@@ -1184,6 +1178,89 @@ 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:"
+];
+var RESTRICTIVE_CSP_DIRECTIVES = [
+  "default-src 'none'",
+  "script-src 'self' 'unsafe-inline'",
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data:",
+  "font-src 'self' data:",
+  "connect-src 'none'",
+  "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 = {
@@ -1205,6 +1282,17 @@ function isNpmShellSource(source) {
   return typeof source === "object" && source !== null && "npm" in source;
 }
 
+// libs/uipack/src/shell/custom-shell-applier.ts
+function applyShellTemplate(template, values) {
+  let result = template;
+  result = result.replaceAll(SHELL_PLACEHOLDERS.CSP, values.csp);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.DATA, values.data);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.BRIDGE, values.bridge);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.CONTENT, values.content);
+  result = result.replaceAll(SHELL_PLACEHOLDERS.TITLE, values.title);
+  return result;
+}
+
 // libs/uipack/src/shell/custom-shell-validator.ts
 function validateShellTemplate(template) {
   const found = {};
@@ -1221,22 +1309,169 @@ 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/utils/index.ts
+function escapeHtml(str) {
+  if (str === null || str === void 0) {
+    return "";
+  }
+  const s = String(str);
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function escapeScriptClose(jsonString) {
+  return jsonString.replace(/<\//g, "<\\/");
+}
+function safeJsonForScript(value) {
+  if (value === void 0) {
+    return "null";
+  }
+  try {
+    const jsonString = JSON.stringify(value, (_key, val) => {
+      if (typeof val === "bigint") {
+        return val.toString();
+      }
+      return val;
+    });
+    if (jsonString === void 0) {
+      return "null";
+    }
+    return escapeScriptClose(jsonString);
+  } catch {
+    return '{"error":"Value could not be serialized"}';
+  }
+}
+
+// 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 "";
+}
+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/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}`;
@@ -1254,7 +1489,9 @@ ${content}`;
       output,
       structuredContent,
       includeBridge,
-      title
+      title,
+      sizing,
+      dataInjection
     });
   }
   const headParts = [
@@ -1266,6 +1503,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>`);
@@ -1299,12 +1540,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 });
@@ -1312,7 +1558,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) : ""
@@ -1454,10 +1700,13 @@ export {
   applyShellTemplate,
   buildCSPDirectives,
   buildCSPMetaTag,
+  buildCustomDataInjectionScript,
   buildDataInjectionScript,
   buildShell,
+  buildSizingStyleTag,
   clearShellTemplateCache,
   createTemplateHelpers,
+  hasSizing,
   isInlineShellSource,
   isNpmShellSource,
   isUrlShellSource,