@frontmcp/uipack 1.9.1 → 1.9.3

package/esm/shell/index.mjs

@@ -2,6 +2,8 @@ var __frontmcpModule = typeof process !== "undefined" && typeof process.getBuilt
 const require = __frontmcpModule ? __frontmcpModule.createRequire(import.meta.url || 'file:///') : undefined;
 // __frontmcpCreateRequire
 // libs/uipack/src/bridge-runtime/iife-generator.ts
+var WIDGET_CALL_META_KEY = "frontmcp/widgetCall";
+var MCP_APPS_DISPLAY_MODES = ["inline", "fullscreen", "pip"];
 function generateBridgeIIFE(options = {}) {
   const { debug = false, trustedOrigins = [], minify = false } = options;
   const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
@@ -49,6 +51,7 @@ function generateBridgeIIFE(options = {}) {
   parts.push("bridge.initialize().then(function() {");
   parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
+  parts.push("  if (window.__mcpDisplayMode) bridge.requestDisplayMode(window.__mcpDisplayMode).catch(function() {});");
   parts.push("}).catch(function(err) {");
   parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
@@ -382,6 +385,9 @@ var OpenAIAdapter = {
     return Promise.resolve();
   },
   requestDisplayMode: function(context, mode) {
+    if (window.openai && typeof window.openai.requestDisplayMode === 'function') {
+      return Promise.resolve(window.openai.requestDisplayMode({ mode: mode }));
+    }
     return Promise.resolve();
   },
   setSize: function(context, size) {
@@ -419,6 +425,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -497,8 +504,19 @@ var ExtAppsAdapter = {
 
     if ('method' in data && !('id' in data)) {
       this.handleNotification(context, data);
+      return;
+    }
+
+    if ('method' in data && 'id' in data) {
+      this.handleRequest(context, data, event.origin);
     }
   },
+  handleRequest: function(context, request, origin) {
+    // ui/resource-teardown: the host is about to unmount the view; reply once listeners have cleaned up.
+    if (request.method !== 'ui/resource-teardown') return;
+    window.dispatchEvent(new CustomEvent('bridge:teardown', { detail: {} }));
+    window.parent.postMessage({ jsonrpc: '2.0', id: request.id, result: {} }, origin);
+  },
   handleNotification: function(context, notification) {
     var params = notification.params || {};
     switch (notification.method) {
@@ -522,6 +540,7 @@ var ExtAppsAdapter = {
         Object.assign(context.hostContext, params);
         context.notifyContextChange(params);
         break;
+      case 'ui/notifications/tool-cancelled':
       case 'ui/notifications/cancelled':
         window.dispatchEvent(new CustomEvent('tool:cancelled', { detail: { reason: params.reason } }));
         break;
@@ -586,7 +605,7 @@ var ExtAppsAdapter = {
     var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
-      appCapabilities: { tools: { listChanged: false } },
+      appCapabilities: { tools: { listChanged: false }, availableDisplayModes: ${JSON.stringify(MCP_APPS_DISPLAY_MODES)} },
       protocolVersion: '2024-11-05'
     };
 
@@ -654,20 +673,25 @@ var ExtAppsAdapter = {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
     // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
-    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
+    return this.sendRequest('tools/call', { name: name, arguments: args || {}, _meta: { '${WIDGET_CALL_META_KEY}': true } });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });
   },
   openLink: function(context, url) {
-    if (!this.hostCapabilities.openLink) {
+    if (!this.hostCapabilities.openLinks && !this.hostCapabilities.openLink) {
       window.open(url, '_blank', 'noopener,noreferrer');
       return Promise.resolve();
     }
-    return this.sendRequest('ui/openLink', { url: url });
+    return this.sendRequest('ui/open-link', { url: url });
   },
   requestDisplayMode: function(context, mode) {
-    return this.sendRequest('ui/setDisplayMode', { mode: mode });
+    // Ask only for a mode the host offers; it answers with the mode it actually set.
+    var offered = context.hostContext.availableDisplayModes;
+    if (!Array.isArray(offered) || offered.indexOf(mode) === -1) {
+      return Promise.reject(new Error('Display mode "' + mode + '" is not available on this host'));
+    }
+    return this.sendRequest('ui/request-display-mode', { mode: mode });
   },
   setSize: function(context, size) {
     // Standard ext-apps sizing: the view tells the host its dimensions with the
@@ -688,14 +712,22 @@ var ExtAppsAdapter = {
     return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
-    return this.sendRequest('ui/close', {});
+    // The host decides whether to tear the view down; it answers with ui/resource-teardown if it does.
+    return this.sendNotification('ui/notifications/request-teardown', {});
   },
   // Extended ext-apps methods (full specification)
   updateModelContext: function(context, data, merge) {
-    if (!this.hostCapabilities.modelContextUpdate) {
+    if (!this.hostCapabilities.updateModelContext && !this.hostCapabilities.modelContextUpdate) {
       return Promise.reject(new Error('Model context update not supported'));
     }
-    return this.sendRequest('ui/updateModelContext', { context: data, merge: merge !== false });
+    // The host keeps only the latest update, so an object merges into the last one here.
+    var isObject = data !== null && typeof data === 'object' && !Array.isArray(data);
+    var modelContext = isObject && merge !== false ? Object.assign({}, this.modelContext, data) : data;
+    this.modelContext = isObject ? modelContext : null;
+    var text = typeof modelContext === 'string' ? modelContext : JSON.stringify(modelContext);
+    var params = { content: [{ type: 'text', text: text }] };
+    if (isObject) params.structuredContent = modelContext;
+    return this.sendRequest('ui/update-model-context', params);
   },
   log: function(context, level, message, data) {
     if (!this.hostCapabilities.logging) {
@@ -704,7 +736,10 @@ var ExtAppsAdapter = {
       logFn('[Widget] ' + message, data);
       return Promise.resolve();
     }
-    return this.sendRequest('ui/log', { level: level, message: message, data: data });
+    return this.sendNotification('notifications/message', {
+      level: level === 'warn' ? 'warning' : level,
+      data: data === undefined ? message : { message: message, data: data }
+    });
   },
   registerTool: function(context, name, description, inputSchema) {
     if (!this.hostCapabilities.widgetTools) {
@@ -1101,8 +1136,10 @@ FrontMcpBridge.prototype.openLink = function(url) {
 FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   var self = this;
-  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
-    self._context.hostContext.displayMode = mode;
+  return this._adapter.requestDisplayMode(this._context, mode).then(function(result) {
+    // The host may set another mode than the one asked for, e.g. when it refuses the change.
+    var setMode = result && result.mode;
+    if (${JSON.stringify(MCP_APPS_DISPLAY_MODES)}.indexOf(setMode) !== -1) self._context.hostContext.displayMode = setMode;
   });
 };
 
@@ -1527,7 +1564,7 @@ function hasSizing(sizing) {
   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 { toolName, input, output, structuredContent, sizing, displayMode } = options;
   const lines = [
     `window.__mcpAppsEnabled = true;`,
     `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
@@ -1538,6 +1575,9 @@ function buildDataInjectionScript(options) {
   if (hasSizing(sizing)) {
     lines.push(`window.__mcpWidgetSizing = ${safeJsonForScript(sizing)};`);
   }
+  if (displayMode && displayMode !== "inline") {
+    lines.push(`window.__mcpDisplayMode = ${safeJsonForScript(displayMode)};`);
+  }
   return `<script>
 ${lines.join("\n")}
 </script>`;
@@ -1629,7 +1669,8 @@ function resolveDataInjectionScript(args) {
     input: args.input,
     output: args.output,
     structuredContent: args.structuredContent,
-    sizing: args.sizing
+    sizing: args.sizing,
+    displayMode: args.displayMode
   });
 }
 function buildShell(content, config) {
@@ -1642,7 +1683,8 @@ function buildShell(content, config) {
     structuredContent,
     includeBridge = true,
     title,
-    sizing
+    sizing,
+    displayMode
   } = config;
   const { customShell, dataInjection } = config;
   const dataScript = resolveDataInjectionScript({
@@ -1651,7 +1693,8 @@ function buildShell(content, config) {
     input,
     output,
     structuredContent,
-    sizing
+    sizing,
+    displayMode
   });
   if (!withShell) {
     const html3 = `${dataScript}
@@ -1672,6 +1715,7 @@ ${content}`;
       includeBridge,
       title,
       sizing,
+      displayMode,
       dataInjection
     });
   }
@@ -1727,7 +1771,8 @@ function buildCustomShell(content, customShell, ctx) {
     input: ctx.input,
     output: ctx.output,
     structuredContent: ctx.structuredContent,
-    sizing: ctx.sizing
+    sizing: ctx.sizing,
+    displayMode: ctx.displayMode
   });
   const sizingStyle = buildSizingStyleTag(ctx.sizing);
   const dataWithSizing = sizingStyle ? `${dataScript}

package/index.js

@@ -121,6 +121,7 @@ __export(index_exports, {
   validateCSPDomain: () => validateCSPDomain,
   validateImportMap: () => validateImportMap,
   validateShellTemplate: () => validateShellTemplate,
+  warnIfComponentReference: () => warnIfComponentReference,
   wrapDetectedContent: () => wrapDetectedContent
 });
 module.exports = __toCommonJS(index_exports);
@@ -252,6 +253,8 @@ function safeJsonForScript(value) {
 }
 
 // libs/uipack/src/bridge-runtime/iife-generator.ts
+var WIDGET_CALL_META_KEY = "frontmcp/widgetCall";
+var MCP_APPS_DISPLAY_MODES = ["inline", "fullscreen", "pip"];
 function generateBridgeIIFE(options = {}) {
   const { debug = false, trustedOrigins = [], minify = false } = options;
   const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
@@ -299,6 +302,7 @@ function generateBridgeIIFE(options = {}) {
   parts.push("bridge.initialize().then(function() {");
   parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
+  parts.push("  if (window.__mcpDisplayMode) bridge.requestDisplayMode(window.__mcpDisplayMode).catch(function() {});");
   parts.push("}).catch(function(err) {");
   parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
@@ -632,6 +636,9 @@ var OpenAIAdapter = {
     return Promise.resolve();
   },
   requestDisplayMode: function(context, mode) {
+    if (window.openai && typeof window.openai.requestDisplayMode === 'function') {
+      return Promise.resolve(window.openai.requestDisplayMode({ mode: mode }));
+    }
     return Promise.resolve();
   },
   setSize: function(context, size) {
@@ -669,6 +676,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -747,8 +755,19 @@ var ExtAppsAdapter = {
 
     if ('method' in data && !('id' in data)) {
       this.handleNotification(context, data);
+      return;
+    }
+
+    if ('method' in data && 'id' in data) {
+      this.handleRequest(context, data, event.origin);
     }
   },
+  handleRequest: function(context, request, origin) {
+    // ui/resource-teardown: the host is about to unmount the view; reply once listeners have cleaned up.
+    if (request.method !== 'ui/resource-teardown') return;
+    window.dispatchEvent(new CustomEvent('bridge:teardown', { detail: {} }));
+    window.parent.postMessage({ jsonrpc: '2.0', id: request.id, result: {} }, origin);
+  },
   handleNotification: function(context, notification) {
     var params = notification.params || {};
     switch (notification.method) {
@@ -772,6 +791,7 @@ var ExtAppsAdapter = {
         Object.assign(context.hostContext, params);
         context.notifyContextChange(params);
         break;
+      case 'ui/notifications/tool-cancelled':
       case 'ui/notifications/cancelled':
         window.dispatchEvent(new CustomEvent('tool:cancelled', { detail: { reason: params.reason } }));
         break;
@@ -836,7 +856,7 @@ var ExtAppsAdapter = {
     var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
-      appCapabilities: { tools: { listChanged: false } },
+      appCapabilities: { tools: { listChanged: false }, availableDisplayModes: ${JSON.stringify(MCP_APPS_DISPLAY_MODES)} },
       protocolVersion: '2024-11-05'
     };
 
@@ -904,20 +924,25 @@ var ExtAppsAdapter = {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
     // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
-    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
+    return this.sendRequest('tools/call', { name: name, arguments: args || {}, _meta: { '${WIDGET_CALL_META_KEY}': true } });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });
   },
   openLink: function(context, url) {
-    if (!this.hostCapabilities.openLink) {
+    if (!this.hostCapabilities.openLinks && !this.hostCapabilities.openLink) {
       window.open(url, '_blank', 'noopener,noreferrer');
       return Promise.resolve();
     }
-    return this.sendRequest('ui/openLink', { url: url });
+    return this.sendRequest('ui/open-link', { url: url });
   },
   requestDisplayMode: function(context, mode) {
-    return this.sendRequest('ui/setDisplayMode', { mode: mode });
+    // Ask only for a mode the host offers; it answers with the mode it actually set.
+    var offered = context.hostContext.availableDisplayModes;
+    if (!Array.isArray(offered) || offered.indexOf(mode) === -1) {
+      return Promise.reject(new Error('Display mode "' + mode + '" is not available on this host'));
+    }
+    return this.sendRequest('ui/request-display-mode', { mode: mode });
   },
   setSize: function(context, size) {
     // Standard ext-apps sizing: the view tells the host its dimensions with the
@@ -938,14 +963,22 @@ var ExtAppsAdapter = {
     return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
-    return this.sendRequest('ui/close', {});
+    // The host decides whether to tear the view down; it answers with ui/resource-teardown if it does.
+    return this.sendNotification('ui/notifications/request-teardown', {});
   },
   // Extended ext-apps methods (full specification)
   updateModelContext: function(context, data, merge) {
-    if (!this.hostCapabilities.modelContextUpdate) {
+    if (!this.hostCapabilities.updateModelContext && !this.hostCapabilities.modelContextUpdate) {
       return Promise.reject(new Error('Model context update not supported'));
     }
-    return this.sendRequest('ui/updateModelContext', { context: data, merge: merge !== false });
+    // The host keeps only the latest update, so an object merges into the last one here.
+    var isObject = data !== null && typeof data === 'object' && !Array.isArray(data);
+    var modelContext = isObject && merge !== false ? Object.assign({}, this.modelContext, data) : data;
+    this.modelContext = isObject ? modelContext : null;
+    var text = typeof modelContext === 'string' ? modelContext : JSON.stringify(modelContext);
+    var params = { content: [{ type: 'text', text: text }] };
+    if (isObject) params.structuredContent = modelContext;
+    return this.sendRequest('ui/update-model-context', params);
   },
   log: function(context, level, message, data) {
     if (!this.hostCapabilities.logging) {
@@ -954,7 +987,10 @@ var ExtAppsAdapter = {
       logFn('[Widget] ' + message, data);
       return Promise.resolve();
     }
-    return this.sendRequest('ui/log', { level: level, message: message, data: data });
+    return this.sendNotification('notifications/message', {
+      level: level === 'warn' ? 'warning' : level,
+      data: data === undefined ? message : { message: message, data: data }
+    });
   },
   registerTool: function(context, name, description, inputSchema) {
     if (!this.hostCapabilities.widgetTools) {
@@ -1351,8 +1387,10 @@ FrontMcpBridge.prototype.openLink = function(url) {
 FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   var self = this;
-  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
-    self._context.hostContext.displayMode = mode;
+  return this._adapter.requestDisplayMode(this._context, mode).then(function(result) {
+    // The host may set another mode than the one asked for, e.g. when it refuses the change.
+    var setMode = result && result.mode;
+    if (${JSON.stringify(MCP_APPS_DISPLAY_MODES)}.indexOf(setMode) !== -1) self._context.hostContext.displayMode = setMode;
   });
 };
 
@@ -3218,7 +3256,7 @@ function hasSizing(sizing) {
   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 { toolName, input, output, structuredContent, sizing, displayMode } = options;
   const lines = [
     `window.__mcpAppsEnabled = true;`,
     `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
@@ -3229,6 +3267,9 @@ function buildDataInjectionScript(options) {
   if (hasSizing(sizing)) {
     lines.push(`window.__mcpWidgetSizing = ${safeJsonForScript(sizing)};`);
   }
+  if (displayMode && displayMode !== "inline") {
+    lines.push(`window.__mcpDisplayMode = ${safeJsonForScript(displayMode)};`);
+  }
   return `<script>
 ${lines.join("\n")}
 </script>`;
@@ -3320,7 +3361,8 @@ function resolveDataInjectionScript(args) {
     input: args.input,
     output: args.output,
     structuredContent: args.structuredContent,
-    sizing: args.sizing
+    sizing: args.sizing,
+    displayMode: args.displayMode
   });
 }
 function buildShell(content, config) {
@@ -3333,7 +3375,8 @@ function buildShell(content, config) {
     structuredContent,
     includeBridge = true,
     title,
-    sizing
+    sizing,
+    displayMode
   } = config;
   const { customShell, dataInjection } = config;
   const dataScript = resolveDataInjectionScript({
@@ -3342,7 +3385,8 @@ function buildShell(content, config) {
     input,
     output,
     structuredContent,
-    sizing
+    sizing,
+    displayMode
   });
   if (!withShell) {
     const html3 = `${dataScript}
@@ -3363,6 +3407,7 @@ ${content}`;
       includeBridge,
       title,
       sizing,
+      displayMode,
       dataInjection
     });
   }
@@ -3418,7 +3463,8 @@ function buildCustomShell(content, customShell, ctx) {
     input: ctx.input,
     output: ctx.output,
     structuredContent: ctx.structuredContent,
-    sizing: ctx.sizing
+    sizing: ctx.sizing,
+    displayMode: ctx.displayMode
   });
   const sizingStyle = buildSizingStyleTag(ctx.sizing);
   const dataWithSizing = sizingStyle ? `${dataScript}
@@ -4436,7 +4482,7 @@ function noticeStringResult(toolName, logger) {
   if (noticedStringResultTools.has(toolName)) return;
   noticedStringResultTools.add(toolName);
   logger.warn(
-    `[frontmcp] The UI template of tool "${toolName}" returned a plain string containing markup, which is rendered as HTML. FrontMCP 1.9 will HTML-escape plain string results by default. Build the markup with ctx.helpers.html\`\u2026\` (interpolated values are escaped) or wrap safe markup with ctx.helpers.trustedHtml(), then set ui.escapeStringResults: true (or escapeStringResults: false to keep the current behaviour without this notice). See ${STRING_RESULT_DOCS}`
+    `[frontmcp] The UI template of tool "${toolName}" returned a plain string containing markup. Since 1.9.2, FrontMCP HTML-escapes plain string results by default, so it is shown as text. Build the markup with ctx.helpers.html\`\u2026\` (interpolated values are escaped) or wrap safe markup with ctx.helpers.trustedHtml(). Set ui.escapeStringResults: false to render plain strings as markup, or true to silence this notice. See ${STRING_RESULT_DOCS}`
   );
 }
 function renderUnwrappedResult(rawResult, options) {
@@ -4446,13 +4492,14 @@ function renderUnwrappedResult(rawResult, options) {
   if (typeof rawResult !== "string") {
     return `<pre>${escapeHtml(JSON.stringify(rawResult, null, 2))}</pre>`;
   }
-  if (detectContentType(rawResult) !== "html" || options.escapeStringResults === true) {
-    return escapeHtml(rawResult);
+  const looksLikeMarkup = detectContentType(rawResult) === "html";
+  if (looksLikeMarkup && options.escapeStringResults === false) {
+    return rawResult;
   }
-  if (options.escapeStringResults === void 0) {
+  if (looksLikeMarkup && options.escapeStringResults === void 0) {
     noticeStringResult(options.toolName, options.logger ?? console);
   }
-  return rawResult;
+  return escapeHtml(rawResult);
 }
 var warnedComponentReferences = /* @__PURE__ */ new WeakMap();
 function warnComponentReference(template, toolName, logger) {
@@ -4464,7 +4511,18 @@ function warnComponentReference(template, toolName, logger) {
     `[FrontMCP] Tool "${toolName}": \`ui.template\` is a React component reference, which cannot be bundled (there is no source file to compile), so the widget would render an empty page. Use \`template: { file: './widget.tsx' }\` instead.`
   );
 }
-function isReactElement(value) {
+var COMPILED_JSX_PATTERN = /\b(?:React\.createElement|_?jsx(?:s|DEV)?)\)?\s*\(/;
+function isComponentReference(template) {
+  if (isReactTypedObject(template)) return true;
+  if (typeof template !== "function" || detectUIType(template) !== "react") return false;
+  return isDefinitelyReactComponent(template) || COMPILED_JSX_PATTERN.test(Function.prototype.toString.call(template));
+}
+function warnIfComponentReference(toolName, template, logger = console) {
+  if (!isComponentReference(template)) return false;
+  warnComponentReference(template, toolName, logger);
+  return true;
+}
+function isReactTypedObject(value) {
   return typeof value === "object" && value !== null && "$$typeof" in value;
 }
 function isDefinitelyReactComponent(template) {
@@ -4483,6 +4541,7 @@ function renderToolTemplate(options) {
     includeBridge: true,
     resolver,
     sizing,
+    displayMode: options.displayMode,
     csp: options.csp ? buildCspConfig(resolver, options.csp) : void 0
   };
   let html2;
@@ -4504,7 +4563,7 @@ function renderToolTemplate(options) {
     if (isHtmlBuilder) {
       try {
         rawResult = template(ctx);
-        isHtmlBuilder = !isReactElement(rawResult);
+        isHtmlBuilder = !isReactTypedObject(rawResult);
       } catch (error) {
         if (uiType !== "react") throw error;
         isHtmlBuilder = false;
@@ -4533,6 +4592,7 @@ function renderToolTemplate(options) {
     hash = shellResult.hash;
     size = shellResult.size;
   } else {
+    if (isReactTypedObject(template)) warnComponentReference(template, toolName, options.logger ?? console);
     const shellResult = buildShell('<div id="root"></div>', shellConfig);
     html2 = shellResult.html;
     hash = shellResult.hash;
@@ -4735,5 +4795,6 @@ function buildCDNInfoForUIType(uiType) {
   validateCSPDomain,
   validateImportMap,
   validateShellTemplate,
+  warnIfComponentReference,
   wrapDetectedContent
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontmcp/uipack",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "FrontMCP UIpack - HTML shell builder, pluggable import resolver, and NPM component loader for MCP UI (React-free core)",
   "author": "AgentFront <info@agentfront.dev>",
   "homepage": "https://docs.agentfront.dev",
@@ -61,7 +61,7 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@frontmcp/lazy-zod": "1.9.1",
+    "@frontmcp/lazy-zod": "1.9.3",
     "esbuild": ">=0.27.0 <1"
   },
   "peerDependenciesMeta": {

package/shell/builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../src/shell/builder.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,OAAO,KAAK,EAAE,WAAW,EAAgC,WAAW,EAAE,MAAM,SAAS,CAAC;AA8BtF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,WAAW,CA4F5E"}
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../src/shell/builder.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,OAAO,KAAK,EAAE,WAAW,EAAgC,WAAW,EAAE,MAAM,SAAS,CAAC;AAgCtF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,WAAW,CA+F5E"}

package/shell/data-injector.d.ts

@@ -21,7 +21,8 @@ export declare function hasSizing(sizing?: WidgetSizing): sizing is WidgetSizing
  * Sets `window.__mcpToolName`, `window.__mcpToolInput`,
  * `window.__mcpToolOutput`, and `window.__mcpStructuredContent`. When `sizing`
  * is provided it also sets `window.__mcpWidgetSizing` so the bridge runtime can
- * apply CSS and drive auto-resize.
+ * apply CSS and drive auto-resize, and a `displayMode` other than `'inline'` sets
+ * `window.__mcpDisplayMode`, which the bridge asks the host for once it connects.
  */
 export declare function buildDataInjectionScript(options: {
     toolName: string;
@@ -29,6 +30,7 @@ export declare function buildDataInjectionScript(options: {
     output?: unknown;
     structuredContent?: unknown;
     sizing?: WidgetSizing;
+    displayMode?: string;
 }): string;
 /**
  * Generic data-injection descriptor: override the injected window global.

package/shell/data-injector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-injector.d.ts","sourceRoot":"","sources":["../../src/shell/data-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,IAAI,YAAY,CASvE;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,GAAG,MAAM,CAgBT;AAED;;;;;;;;;GASG;AACH,wBAAgB,8BAA8B,CAAC,UAAU,EAAE;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,MAAM,CAeT;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,oDAAoD;IACpD,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC;IACrC,gCAAgC;IAChC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D,kCAAkC;IAClC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,qCAAqC;IACrC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACrC,8FAA8F;IAC9F,IAAI,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,KAAK,WAAW,CAAC;IAC3E,gEAAgE;IAChE,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,WAAW,CAAC;CAC9C;AAID;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,eAAe,CA+BvD"}
+{"version":3,"file":"data-injector.d.ts","sourceRoot":"","sources":["../../src/shell/data-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,IAAI,YAAY,CASvE;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,MAAM,CAoBT;AAED;;;;;;;;;GASG;AACH,wBAAgB,8BAA8B,CAAC,UAAU,EAAE;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,MAAM,CAeT;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,oDAAoD;IACpD,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC;IACrC,gCAAgC;IAChC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D,kCAAkC;IAClC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,qCAAqC;IACrC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;IACrC,8FAA8F;IAC9F,IAAI,EAAE,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,KAAK,WAAW,CAAC;IAC3E,gEAAgE;IAChE,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,WAAW,CAAC;CAC9C;AAID;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,eAAe,CA+BvD"}