@frontmcp/uipack 1.2.1 → 1.4.0

package/adapters/template-renderer.d.ts

@@ -6,6 +6,7 @@
  * @packageDocumentation
  */
 import type { ImportResolver } from '../resolver/types';
+import type { WidgetSizing } from '../shell/types';
 /**
  * Options for rendering a tool template.
  */
@@ -22,6 +23,19 @@ export interface RenderToolTemplateOptions {
     platformType?: string;
     /** Optional import resolver with CDN overrides */
     resolver?: ImportResolver;
+    /**
+     * Resource loading mode. When `'inline'` and the template is a FileSource
+     * `.tsx`/`.jsx`, React is bundled into the output (no esm.sh import map)
+     * so the widget is fully self-contained — required for hosts that block
+     * external script execution like Claude (#454). Default `'cdn'`.
+     */
+    resourceMode?: 'cdn' | 'inline';
+    /**
+     * Widget sizing config (preferred/min/max height, aspect-ratio, auto-resize).
+     * Drives the static sizing CSS + `window.__mcpWidgetSizing` injection in the
+     * shell, and is mirrored onto the returned `meta` as `ui/preferredHeight` etc.
+     */
+    sizing?: WidgetSizing;
 }
 /**
  * Result of rendering a tool template.

package/adapters/template-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-renderer.d.ts","sourceRoot":"","sources":["../../src/adapters/template-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AASH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAsBD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,wBAAwB,CAgF/F"}
+{"version":3,"file":"template-renderer.d.ts","sourceRoot":"","sources":["../../src/adapters/template-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAsBD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,wBAAwB,CAyG/F"}

package/bridge-runtime/iife-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iife-generator.d.ts","sourceRoot":"","sources":["../../src/bridge-runtime/iife-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC;IACvE,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CA0G7E;AAm+BD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,EACvD,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAM,GACnD,MAAM,CAYR;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}
+{"version":3,"file":"iife-generator.d.ts","sourceRoot":"","sources":["../../src/bridge-runtime/iife-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC;IACvE,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CA8G7E;AAooCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,EACvD,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAM,GACnD,MAAM,CAYR;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}

package/bridge-runtime/index.js

@@ -81,6 +81,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()) {");
@@ -101,6 +103,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() {
@@ -208,6 +316,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();
   }
@@ -452,6 +573,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', {});
   },
@@ -540,6 +670,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();
   }
@@ -591,6 +725,9 @@ var GeminiAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -626,6 +763,9 @@ var GenericAdapter = {
   requestDisplayMode: function() {
     return Promise.resolve();
   },
+  setSize: function() {
+    return Promise.resolve();
+  },
   requestClose: function() {
     return Promise.resolve();
   }
@@ -860,6 +1000,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);

package/component/index.d.ts

@@ -10,5 +10,6 @@ export type { NpmSource, FileSource, ImportSource, FunctionSource, UISource, UIC
 export { isNpmSource, isFileSource, isImportSource, isFunctionSource, FRONTMCP_META_KEY } from './types';
 export { resolveUISource, generateMountScript } from './loader';
 export { transpileReactSource, bundleFileSource, extractDefaultExportName } from './transpiler';
+export type { BundleFileSourceOptions } from './transpiler';
 export { renderComponent } from './renderer';
 //# sourceMappingURL=index.d.ts.map

package/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/component/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,YAAY,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGzG,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAGhG,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/component/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,YAAY,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGzG,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAChG,YAAY,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}