@frontmcp/uipack 1.8.4 → 1.8.6

package/component/index.js

@@ -498,8 +498,24 @@ function isFrontmcpUiResolvable(...candidatePaths) {
 }
 
 // libs/uipack/src/component/transpiler.ts
+function loadEsbuild(filename) {
+  try {
+    return require("esbuild");
+  } catch (err) {
+    if (!isMissingEsbuild(err)) throw err;
+    const subject = filename ? `FileSource widget "${filename}"` : "A FileSource widget";
+    throw new Error(
+      `${subject} needs esbuild, which is not installed. @frontmcp/uipack loads esbuild on demand to bundle FileSource widgets (.tsx/.jsx) when the tool is called, so it must be installed where the server runs: \`npm install esbuild\` (in "dependencies", not "devDependencies"). Projects created with \`frontmcp create\` already get it through the \`frontmcp\` package.`,
+      { cause: err }
+    );
+  }
+}
+function isMissingEsbuild(err) {
+  if (!(err instanceof Error)) return false;
+  return err.code === "MODULE_NOT_FOUND" && /Cannot find module ['"]esbuild['"]/.test(err.message);
+}
 function transpileReactSource(source, filename) {
-  const esbuild = require("esbuild");
+  const esbuild = loadEsbuild(filename);
   const loader = filename?.endsWith(".tsx") ? "tsx" : "jsx";
   const result = esbuild.transformSync(source, {
     loader,
@@ -518,7 +534,7 @@ function bundleFileSource(source, filename, resolveDir, componentName, options =
       `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 esbuild = loadEsbuild(filename);
   const mountCode = `
 // --- Auto-generated mount ---
 import { createElement as __h } from 'react';
@@ -615,7 +631,8 @@ if (__root) {
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
     throw new Error(
-      `Failed to bundle FileSource "${filename}": ${message}. If the error mentions @frontmcp/ui or @frontmcp/uipack, ensure both packages are installed in the consuming project.`
+      `Failed to bundle FileSource "${filename}": ${message}. If the error mentions @frontmcp/ui or @frontmcp/uipack, ensure both packages are installed in the consuming project.`,
+      { cause: err }
     );
   }
 }
@@ -677,6 +694,37 @@ function resolveImportSource(source) {
     peerDependencies: []
   };
 }
+var BUILD_DIR_SEGMENTS = /* @__PURE__ */ new Set(["dist", "build", "out"]);
+function missingWidgetError(filePath, cause) {
+  const sourceWidget = findSourceWidget(filePath);
+  const error = new Error(
+    `FileSource widget not found (ENOENT): no file at "${filePath}". The widget source is read from this path when the tool is called, so it has to exist where the compiled tool runs \u2014 a path built from \`__dirname\` or \`import.meta.url\` points into the build output once the tool is compiled. tsc does not copy \`*.widget.tsx\` / \`*.widget.jsx\` files into its output; \`frontmcp build\` does, and any other build needs a step that copies them next to the compiled tool.` + (sourceWidget ? ` The source widget exists at "${sourceWidget}" \u2014 copy it to "${filePath}", or build with \`frontmcp build\`.` : ""),
+    { cause }
+  );
+  error.code = "ENOENT";
+  error.path = filePath;
+  return error;
+}
+function findSourceWidget(filePath) {
+  const path = require("path");
+  const fs = require("fs");
+  const parts = filePath.split(path.sep);
+  for (let i = parts.length - 2; i >= 0; i--) {
+    if (!BUILD_DIR_SEGMENTS.has(parts[i])) continue;
+    const candidates = [[...parts.slice(0, i), "src", ...parts.slice(i + 1)]];
+    if (parts.length - i > 2) candidates.push([...parts.slice(0, i), "src", ...parts.slice(i + 2)]);
+    candidates.push([...parts.slice(0, i), ...parts.slice(i + 1)]);
+    for (const candidate of candidates) {
+      const candidatePath = candidate.join(path.sep);
+      try {
+        if (fs.existsSync(candidatePath)) return candidatePath;
+      } catch {
+      }
+    }
+    return void 0;
+  }
+  return void 0;
+}
 function resolveFileSource(source, options = {}) {
   const path = require("path");
   const ext = path.extname(source.file).toLowerCase();
@@ -691,9 +739,11 @@ function resolveFileSource(source, options = {}) {
       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).`
+          `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).`,
+          { cause: err }
         );
       }
+      if (isNotFound) throw missingWidgetError(filePath, err);
       throw err;
     }
     const componentName = source.exportName || extractDefaultExportName(rawSource) || "Component";
@@ -911,6 +961,23 @@ function __applySizingCss(sizing) {
   }
 }
 
+function __measureHeight() {
+  // <html> at fit-content includes body margins and collapsed child margins;
+  // content overflowing a fixed-height body is added; a px max-height clamps.
+  var de = document.documentElement;
+  var body = document.body;
+  if (!de || !body) return 0;
+  var prev = de.style.height;
+  de.style.height = 'fit-content';
+  var dr = de.getBoundingClientRect();
+  var br = body.getBoundingClientRect();
+  var h = Math.max(dr.height, br.top + body.scrollHeight + Math.max(0, dr.bottom - br.bottom) - dr.top);
+  de.style.height = prev;
+  var maxHeight = getComputedStyle(de).maxHeight;
+  var mx = maxHeight && maxHeight.slice(-2) === 'px' ? parseFloat(maxHeight) : NaN;
+  return Math.ceil(isNaN(mx) ? h : Math.min(h, mx));
+}
+
 function __initAutoResize() {
   if (typeof window === 'undefined') return;
   // Idempotent: a re-injected IIFE must not stack observers.
@@ -933,23 +1000,30 @@ function __initAutoResize() {
   if (typeof ResizeObserver === 'undefined') return;
 
   function startObserving() {
-    var target = document.getElementById('root') || document.body;
-    if (!target) return;
+    if (!document.body) return;
+    var targets = [document.documentElement, document.body];
+    var root = document.getElementById('root');
+    if (root) targets.push(root);
 
     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);
+        // Before the handshake an ext-apps host can't receive the report; the
+        // bridge:ready listener below sends it once the bridge is up.
+        if (window.FrontMcpBridge && window.FrontMcpBridge.initialized === false) return;
+        var height = __measureHeight();
+        var width = Math.ceil(document.documentElement.getBoundingClientRect().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.FrontMcpBridge.setSize(payload).catch(function() {
+            // Forget a rejected report so the same height is sent again.
+            if (lastReported === height) lastReported = -1;
+          });
         }
         window.dispatchEvent(new CustomEvent('widget:resize', { detail: payload }));
       } catch (e) {}
@@ -970,9 +1044,17 @@ function __initAutoResize() {
         window.__mcpResizeObserver.disconnect();
       }
       var ro = new ResizeObserver(function() { schedule(); });
-      ro.observe(target);
+      for (var i = 0; i < targets.length; i++) ro.observe(targets[i]);
       window.__mcpResizeObserver = ro;
     } catch (e) {}
+    // Report once the bridge is ready (the report scheduled below is skipped
+    // while the handshake is still pending).
+    var readySent = false;
+    window.addEventListener('bridge:ready', function() {
+      if (readySent) return;
+      readySent = true;
+      schedule();
+    });
     // Report once on init so the host gets an initial measurement.
     schedule();
   }
@@ -1020,6 +1102,25 @@ function detectViewport() {
   return undefined;
 }
 
+function __applyHostTheme(theme) {
+  // Follow a host-supplied theme: <meta name="color-scheme"> sets the frame's
+  // canvas and form controls (a widget's own :root color-scheme still wins),
+  // <html data-theme> is a styling hook. The OS fallback is never written.
+  if (theme !== 'light' && theme !== 'dark') return;
+  if (typeof document === 'undefined' || !document.documentElement) return;
+  try {
+    var meta = document.querySelector('meta[name="color-scheme"]');
+    var head = document.head || document.getElementsByTagName('head')[0];
+    if (!meta && head) {
+      meta = document.createElement('meta');
+      meta.setAttribute('name', 'color-scheme');
+      head.appendChild(meta);
+    }
+    if (meta) meta.setAttribute('content', theme);
+    document.documentElement.setAttribute('data-theme', theme);
+  } catch (e) {}
+}
+
 function readInjectedData() {
   var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
   if (typeof window !== 'undefined') {
@@ -1126,6 +1227,8 @@ var ExtAppsAdapter = {
   pendingRequests: {},
   requestId: 0,
   hostCapabilities: {},
+  handshakeSettled: false,
+  pendingSize: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -1291,6 +1394,7 @@ var ExtAppsAdapter = {
       var timeout = setTimeout(function() {
         delete self.pendingRequests[id];
         // Handshake timeout is non-fatal \u2014 notifications may still arrive
+        self.settleHandshake();
         resolve();
       }, 10000);
 
@@ -1304,7 +1408,9 @@ var ExtAppsAdapter = {
             supportsDisplayModes: true
           });
           if (result.hostContext) {
-            Object.assign(context.hostContext, result.hostContext);
+            // Notify (not a silent merge) so onContextChange listeners and the
+            // host theme see the handshake's context.
+            context.notifyContextChange(result.hostContext);
           }
           // Send ui/notifications/initialized to tell the host the view is ready.
           // Per MCP Apps spec, the host waits for this before sending tool-result.
@@ -1314,9 +1420,10 @@ var ExtAppsAdapter = {
             method: 'ui/notifications/initialized',
             params: {}
           }, targetOrigin);
+          self.settleHandshake();
           resolve();
         },
-        reject: function(err) { resolve(); }, // Non-fatal
+        reject: function(err) { self.settleHandshake(); resolve(); }, // Non-fatal
         timeout: timeout
       };
 
@@ -1330,6 +1437,18 @@ var ExtAppsAdapter = {
   performHandshake: function(context) {
     return this.sendHandshake(context);
   },
+  settleHandshake: function() {
+    // Deliver the latest size requested while no host origin was trusted.
+    this.handshakeSettled = true;
+    var pending = this.pendingSize;
+    if (!pending) return;
+    this.pendingSize = null;
+    this.sendRequest('ui/setSize', pending.params).then(function(result) {
+      for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].resolve(result);
+    }, function(err) {
+      for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].reject(err);
+    });
+  },
   callTool: function(context, name, args) {
     if (!this.hostCapabilities.serverTools && !this.hostCapabilities.serverToolProxy) {
       return Promise.reject(new Error('Server tool proxy not supported'));
@@ -1353,11 +1472,22 @@ var ExtAppsAdapter = {
   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', {
+    var params = {
       height: size && size.height,
       width: size && size.width,
       aspectRatio: size && size.aspectRatio
-    });
+    };
+    if (!this.handshakeSettled && !this.trustedOrigin && this.trustedOrigins.length === 0) {
+      // No host origin yet: keep only the latest size and send it when the
+      // handshake settles; every caller's promise follows that one request.
+      var self = this;
+      if (!this.pendingSize) this.pendingSize = { params: params, waiters: [] };
+      this.pendingSize.params = params;
+      return new Promise(function(resolve, reject) {
+        self.pendingSize.waiters.push({ resolve: resolve, reject: reject });
+      });
+    }
+    return this.sendRequest('ui/setSize', params);
   },
   requestClose: function(context) {
     return this.sendRequest('ui/close', {});
@@ -1603,6 +1733,7 @@ function FrontMcpBridge() {
     toolResultListeners: [],
     notifyContextChange: function(changes) {
       Object.assign(this.hostContext, changes);
+      if (changes && changes.theme) __applyHostTheme(changes.theme);
       for (var i = 0; i < this.contextListeners.length; i++) {
         try { this.contextListeners[i](changes); } catch(e) {}
       }

package/component/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../src/component/loader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,mBAAmB,CAAC;AAGxE,OAAO,EACL,iBAAiB,EAUjB,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACd,MAAM,SAAS,CAAC;AAOjB;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,QAAQ,EAChB,OAAO,CAAC,EAAE;IACR,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACA,iBAAiB,CA2BnB;AA6ID;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CA6B9G;AAmBD;;GAEG;AACH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../src/component/loader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,mBAAmB,CAAC;AAGxE,OAAO,EACL,iBAAiB,EAUjB,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACd,MAAM,SAAS,CAAC;AAOjB;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,QAAQ,EAChB,OAAO,CAAC,EAAE;IACR,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACA,iBAAiB,CA2BnB;AAsMD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CA6B9G;AAmBD;;GAEG;AACH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/component/transpiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transpiler.d.ts","sourceRoot":"","sources":["../../src/component/transpiler.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAkB9E;AAED;;;;;;;;;;;;GAYG;AACH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,uBAA4B,GACpC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CA6HlB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAUpE"}
+{"version":3,"file":"transpiler.d.ts","sourceRoot":"","sources":["../../src/component/transpiler.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAyCH;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAiB9E;AAED;;;;;;;;;;;;GAYG;AACH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,uBAA4B,GACpC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CA8HlB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAUpE"}

package/esm/adapters/index.mjs

@@ -637,6 +637,23 @@ function __applySizingCss(sizing) {
   }
 }
 
+function __measureHeight() {
+  // <html> at fit-content includes body margins and collapsed child margins;
+  // content overflowing a fixed-height body is added; a px max-height clamps.
+  var de = document.documentElement;
+  var body = document.body;
+  if (!de || !body) return 0;
+  var prev = de.style.height;
+  de.style.height = 'fit-content';
+  var dr = de.getBoundingClientRect();
+  var br = body.getBoundingClientRect();
+  var h = Math.max(dr.height, br.top + body.scrollHeight + Math.max(0, dr.bottom - br.bottom) - dr.top);
+  de.style.height = prev;
+  var maxHeight = getComputedStyle(de).maxHeight;
+  var mx = maxHeight && maxHeight.slice(-2) === 'px' ? parseFloat(maxHeight) : NaN;
+  return Math.ceil(isNaN(mx) ? h : Math.min(h, mx));
+}
+
 function __initAutoResize() {
   if (typeof window === 'undefined') return;
   // Idempotent: a re-injected IIFE must not stack observers.
@@ -659,23 +676,30 @@ function __initAutoResize() {
   if (typeof ResizeObserver === 'undefined') return;
 
   function startObserving() {
-    var target = document.getElementById('root') || document.body;
-    if (!target) return;
+    if (!document.body) return;
+    var targets = [document.documentElement, document.body];
+    var root = document.getElementById('root');
+    if (root) targets.push(root);
 
     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);
+        // Before the handshake an ext-apps host can't receive the report; the
+        // bridge:ready listener below sends it once the bridge is up.
+        if (window.FrontMcpBridge && window.FrontMcpBridge.initialized === false) return;
+        var height = __measureHeight();
+        var width = Math.ceil(document.documentElement.getBoundingClientRect().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.FrontMcpBridge.setSize(payload).catch(function() {
+            // Forget a rejected report so the same height is sent again.
+            if (lastReported === height) lastReported = -1;
+          });
         }
         window.dispatchEvent(new CustomEvent('widget:resize', { detail: payload }));
       } catch (e) {}
@@ -696,9 +720,17 @@ function __initAutoResize() {
         window.__mcpResizeObserver.disconnect();
       }
       var ro = new ResizeObserver(function() { schedule(); });
-      ro.observe(target);
+      for (var i = 0; i < targets.length; i++) ro.observe(targets[i]);
       window.__mcpResizeObserver = ro;
     } catch (e) {}
+    // Report once the bridge is ready (the report scheduled below is skipped
+    // while the handshake is still pending).
+    var readySent = false;
+    window.addEventListener('bridge:ready', function() {
+      if (readySent) return;
+      readySent = true;
+      schedule();
+    });
     // Report once on init so the host gets an initial measurement.
     schedule();
   }
@@ -746,6 +778,25 @@ function detectViewport() {
   return undefined;
 }
 
+function __applyHostTheme(theme) {
+  // Follow a host-supplied theme: <meta name="color-scheme"> sets the frame's
+  // canvas and form controls (a widget's own :root color-scheme still wins),
+  // <html data-theme> is a styling hook. The OS fallback is never written.
+  if (theme !== 'light' && theme !== 'dark') return;
+  if (typeof document === 'undefined' || !document.documentElement) return;
+  try {
+    var meta = document.querySelector('meta[name="color-scheme"]');
+    var head = document.head || document.getElementsByTagName('head')[0];
+    if (!meta && head) {
+      meta = document.createElement('meta');
+      meta.setAttribute('name', 'color-scheme');
+      head.appendChild(meta);
+    }
+    if (meta) meta.setAttribute('content', theme);
+    document.documentElement.setAttribute('data-theme', theme);
+  } catch (e) {}
+}
+
 function readInjectedData() {
   var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
   if (typeof window !== 'undefined') {
@@ -852,6 +903,8 @@ var ExtAppsAdapter = {
   pendingRequests: {},
   requestId: 0,
   hostCapabilities: {},
+  handshakeSettled: false,
+  pendingSize: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -1017,6 +1070,7 @@ var ExtAppsAdapter = {
       var timeout = setTimeout(function() {
         delete self.pendingRequests[id];
         // Handshake timeout is non-fatal \u2014 notifications may still arrive
+        self.settleHandshake();
         resolve();
       }, 10000);
 
@@ -1030,7 +1084,9 @@ var ExtAppsAdapter = {
             supportsDisplayModes: true
           });
           if (result.hostContext) {
-            Object.assign(context.hostContext, result.hostContext);
+            // Notify (not a silent merge) so onContextChange listeners and the
+            // host theme see the handshake's context.
+            context.notifyContextChange(result.hostContext);
           }
           // Send ui/notifications/initialized to tell the host the view is ready.
           // Per MCP Apps spec, the host waits for this before sending tool-result.
@@ -1040,9 +1096,10 @@ var ExtAppsAdapter = {
             method: 'ui/notifications/initialized',
             params: {}
           }, targetOrigin);
+          self.settleHandshake();
           resolve();
         },
-        reject: function(err) { resolve(); }, // Non-fatal
+        reject: function(err) { self.settleHandshake(); resolve(); }, // Non-fatal
         timeout: timeout
       };
 
@@ -1056,6 +1113,18 @@ var ExtAppsAdapter = {
   performHandshake: function(context) {
     return this.sendHandshake(context);
   },
+  settleHandshake: function() {
+    // Deliver the latest size requested while no host origin was trusted.
+    this.handshakeSettled = true;
+    var pending = this.pendingSize;
+    if (!pending) return;
+    this.pendingSize = null;
+    this.sendRequest('ui/setSize', pending.params).then(function(result) {
+      for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].resolve(result);
+    }, function(err) {
+      for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].reject(err);
+    });
+  },
   callTool: function(context, name, args) {
     if (!this.hostCapabilities.serverTools && !this.hostCapabilities.serverToolProxy) {
       return Promise.reject(new Error('Server tool proxy not supported'));
@@ -1079,11 +1148,22 @@ var ExtAppsAdapter = {
   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', {
+    var params = {
       height: size && size.height,
       width: size && size.width,
       aspectRatio: size && size.aspectRatio
-    });
+    };
+    if (!this.handshakeSettled && !this.trustedOrigin && this.trustedOrigins.length === 0) {
+      // No host origin yet: keep only the latest size and send it when the
+      // handshake settles; every caller's promise follows that one request.
+      var self = this;
+      if (!this.pendingSize) this.pendingSize = { params: params, waiters: [] };
+      this.pendingSize.params = params;
+      return new Promise(function(resolve, reject) {
+        self.pendingSize.waiters.push({ resolve: resolve, reject: reject });
+      });
+    }
+    return this.sendRequest('ui/setSize', params);
   },
   requestClose: function(context) {
     return this.sendRequest('ui/close', {});
@@ -1329,6 +1409,7 @@ function FrontMcpBridge() {
     toolResultListeners: [],
     notifyContextChange: function(changes) {
       Object.assign(this.hostContext, changes);
+      if (changes && changes.theme) __applyHostTheme(changes.theme);
       for (var i = 0; i < this.contextListeners.length; i++) {
         try { this.contextListeners[i](changes); } catch(e) {}
       }
@@ -2113,8 +2194,24 @@ function isFrontmcpUiResolvable(...candidatePaths) {
 }
 
 // libs/uipack/src/component/transpiler.ts
+function loadEsbuild(filename) {
+  try {
+    return __require("esbuild");
+  } catch (err) {
+    if (!isMissingEsbuild(err)) throw err;
+    const subject = filename ? `FileSource widget "${filename}"` : "A FileSource widget";
+    throw new Error(
+      `${subject} needs esbuild, which is not installed. @frontmcp/uipack loads esbuild on demand to bundle FileSource widgets (.tsx/.jsx) when the tool is called, so it must be installed where the server runs: \`npm install esbuild\` (in "dependencies", not "devDependencies"). Projects created with \`frontmcp create\` already get it through the \`frontmcp\` package.`,
+      { cause: err }
+    );
+  }
+}
+function isMissingEsbuild(err) {
+  if (!(err instanceof Error)) return false;
+  return err.code === "MODULE_NOT_FOUND" && /Cannot find module ['"]esbuild['"]/.test(err.message);
+}
 function transpileReactSource(source, filename) {
-  const esbuild = __require("esbuild");
+  const esbuild = loadEsbuild(filename);
   const loader = filename?.endsWith(".tsx") ? "tsx" : "jsx";
   const result = esbuild.transformSync(source, {
     loader,
@@ -2133,7 +2230,7 @@ function bundleFileSource(source, filename, resolveDir, componentName, options =
       `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 esbuild = loadEsbuild(filename);
   const mountCode = `
 // --- Auto-generated mount ---
 import { createElement as __h } from 'react';
@@ -2230,7 +2327,8 @@ if (__root) {
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
     throw new Error(
-      `Failed to bundle FileSource "${filename}": ${message}. If the error mentions @frontmcp/ui or @frontmcp/uipack, ensure both packages are installed in the consuming project.`
+      `Failed to bundle FileSource "${filename}": ${message}. If the error mentions @frontmcp/ui or @frontmcp/uipack, ensure both packages are installed in the consuming project.`,
+      { cause: err }
     );
   }
 }
@@ -2306,6 +2404,37 @@ function resolveImportSource(source) {
     peerDependencies: []
   };
 }
+var BUILD_DIR_SEGMENTS = /* @__PURE__ */ new Set(["dist", "build", "out"]);
+function missingWidgetError(filePath, cause) {
+  const sourceWidget = findSourceWidget(filePath);
+  const error = new Error(
+    `FileSource widget not found (ENOENT): no file at "${filePath}". The widget source is read from this path when the tool is called, so it has to exist where the compiled tool runs \u2014 a path built from \`__dirname\` or \`import.meta.url\` points into the build output once the tool is compiled. tsc does not copy \`*.widget.tsx\` / \`*.widget.jsx\` files into its output; \`frontmcp build\` does, and any other build needs a step that copies them next to the compiled tool.` + (sourceWidget ? ` The source widget exists at "${sourceWidget}" \u2014 copy it to "${filePath}", or build with \`frontmcp build\`.` : ""),
+    { cause }
+  );
+  error.code = "ENOENT";
+  error.path = filePath;
+  return error;
+}
+function findSourceWidget(filePath) {
+  const path = __require("path");
+  const fs = __require("fs");
+  const parts = filePath.split(path.sep);
+  for (let i = parts.length - 2; i >= 0; i--) {
+    if (!BUILD_DIR_SEGMENTS.has(parts[i])) continue;
+    const candidates = [[...parts.slice(0, i), "src", ...parts.slice(i + 1)]];
+    if (parts.length - i > 2) candidates.push([...parts.slice(0, i), "src", ...parts.slice(i + 2)]);
+    candidates.push([...parts.slice(0, i), ...parts.slice(i + 1)]);
+    for (const candidate of candidates) {
+      const candidatePath = candidate.join(path.sep);
+      try {
+        if (fs.existsSync(candidatePath)) return candidatePath;
+      } catch {
+      }
+    }
+    return void 0;
+  }
+  return void 0;
+}
 function resolveFileSource(source, options = {}) {
   const path = __require("path");
   const ext = path.extname(source.file).toLowerCase();
@@ -2320,9 +2449,11 @@ function resolveFileSource(source, options = {}) {
       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).`
+          `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).`,
+          { cause: err }
         );
       }
+      if (isNotFound) throw missingWidgetError(filePath, err);
       throw err;
     }
     const componentName = source.exportName || extractDefaultExportName(rawSource) || "Component";