@frontmcp/uipack 1.8.6 → 1.9.0

package/esm/index.mjs

@@ -1,3 +1,6 @@
+var __frontmcpModule = typeof process !== "undefined" && typeof process.getBuiltinModule === "function" ? process.getBuiltinModule("module") : undefined;
+const require = __frontmcpModule ? __frontmcpModule.createRequire(import.meta.url || 'file:///') : undefined;
+// __frontmcpCreateRequire
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
@@ -398,12 +401,38 @@ function __applyHostTheme(theme) {
   } catch (e) {}
 }
 
+function extractToolOutput(params) {
+  // A host sends a CallToolResult: prefer structuredContent, then parsed text, then the raw content.
+  if (!params) return undefined;
+  if (params.structuredContent !== undefined && params.structuredContent !== null) return params.structuredContent;
+  var content = params.content;
+  if (Array.isArray(content)) {
+    for (var i = 0; i < content.length; i++) {
+      var item = content[i];
+      if (item && item.type === 'text' && typeof item.text === 'string') {
+        try { return JSON.parse(item.text); } catch (e) { return item.text; }
+      }
+    }
+  }
+  return content;
+}
+
 function readInjectedData() {
   var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
   if (typeof window !== 'undefined') {
     if (window.__mcpToolInput) data.toolInput = window.__mcpToolInput;
     if (window.__mcpToolOutput) data.toolOutput = window.__mcpToolOutput;
     if (window.__mcpStructuredContent) data.structuredContent = window.__mcpStructuredContent;
+    // The OpenAI Apps SDK hands the widget its data as window.openai.toolInput / toolOutput
+    // (toolOutput is the tool's structuredContent).
+    var oa = window.openai;
+    if (oa && typeof oa === 'object') {
+      if (oa.toolInput && !window.__mcpToolInput) data.toolInput = oa.toolInput;
+      if (oa.toolOutput !== undefined && oa.toolOutput !== null) {
+        if (data.toolOutput === undefined) data.toolOutput = oa.toolOutput;
+        if (data.structuredContent === undefined) data.structuredContent = oa.toolOutput;
+      }
+    }
   }
   return data;
 }
@@ -452,7 +481,24 @@ var OpenAIAdapter = {
     if (sdk.displayMode) {
       context.hostContext.displayMode = sdk.displayMode;
     }
-    // Note: OpenAI SDK does not have an onContextChange equivalent
+    // The Apps SDK re-dispatches the changed globals in an 'openai:set_globals' event.
+    window.addEventListener('openai:set_globals', function(event) {
+      var globals = (event && event.detail && event.detail.globals) || window.openai || {};
+      if (globals.toolInput !== undefined && globals.toolInput !== null) {
+        context.toolInput = globals.toolInput;
+        window.dispatchEvent(new CustomEvent('tool:input', { detail: { arguments: context.toolInput } }));
+      }
+      if (globals.toolOutput !== undefined && globals.toolOutput !== null) {
+        context.structuredContent = globals.toolOutput;
+        context.notifyToolResult(globals.toolOutput);
+      }
+      if (globals.theme && globals.theme !== context.hostContext.theme) {
+        context.notifyContextChange({ theme: globals.theme });
+      }
+      if (globals.displayMode && globals.displayMode !== context.hostContext.displayMode) {
+        context.notifyContextChange({ displayMode: globals.displayMode });
+      }
+    });
     return Promise.resolve();
   },
   callTool: function(context, name, args) {
@@ -599,9 +645,10 @@ var ExtAppsAdapter = {
         window.dispatchEvent(new CustomEvent('tool:input-partial', { detail: { arguments: context.toolInput } }));
         break;
       case 'ui/notifications/tool-result':
-        context.toolOutput = params.content;
+        var resultOutput = extractToolOutput(params);
+        context.toolOutput = resultOutput;
         context.structuredContent = params.structuredContent;
-        context.notifyToolResult(params.content);
+        context.notifyToolResult(resultOutput);
         window.dispatchEvent(new CustomEvent('tool:result', { detail: params }));
         break;
       case 'ui/notifications/host-context-changed':
@@ -655,6 +702,15 @@ var ExtAppsAdapter = {
       window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
     });
   },
+  sendNotification: function(method, params) {
+    // JSON-RPC notification: no id, no response. Same origin rule as sendRequest.
+    if (!this.trustedOrigin && this.trustedOrigins.length === 0) {
+      return Promise.reject(new Error('Cannot send notification: no trusted origin established'));
+    }
+    var targetOrigin = this.trustedOrigin || this.trustedOrigins[0];
+    window.parent.postMessage({ jsonrpc: '2.0', method: method, params: params }, targetOrigin);
+    return Promise.resolve();
+  },
   sendHandshake: function(context) {
     // Send ui/initialize using '*' as target origin since TOFU hasn't
     // been established yet. The response from the host will establish
@@ -720,7 +776,7 @@ var ExtAppsAdapter = {
     var pending = this.pendingSize;
     if (!pending) return;
     this.pendingSize = null;
-    this.sendRequest('ui/setSize', pending.params).then(function(result) {
+    this.sendNotification('ui/notifications/size-changed', 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);
@@ -747,13 +803,11 @@ var ExtAppsAdapter = {
     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.
-    var params = {
-      height: size && size.height,
-      width: size && size.width,
-      aspectRatio: size && size.aspectRatio
-    };
+    // Standard ext-apps sizing: the view tells the host its dimensions with the
+    // ui/notifications/size-changed notification ({ width?, height? } in px).
+    var params = {};
+    if (size && typeof size.width === 'number') params.width = size.width;
+    if (size && typeof size.height === 'number') params.height = size.height;
     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.
@@ -764,7 +818,7 @@ var ExtAppsAdapter = {
         self.pendingSize.waiters.push({ resolve: resolve, reject: reject });
       });
     }
-    return this.sendRequest('ui/setSize', params);
+    return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
     return this.sendRequest('ui/close', {});
@@ -1187,7 +1241,7 @@ 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.
+// ext-apps sends ui/notifications/size-changed, 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();
@@ -1289,7 +1343,7 @@ FrontMcpBridge.prototype._setupDataToolCallHandler = function() {
         target.classList.add('opacity-50', 'cursor-not-allowed');
 
         // Add spinner for buttons
-        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
+        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" style="width:1em;height:1em;vertical-align:-0.125em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
         if (target.tagName === 'BUTTON') {
           target.innerHTML = spinner + 'Loading...';
         }
@@ -1370,7 +1424,22 @@ function minifyJS(code) {
   if (code.length > MAX_MINIFY_CODE_LENGTH) {
     return code;
   }
-  return code.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1").replace(/\s+/g, " ").replace(/\s*([{};,:()[\]])\s*/g, "$1").replace(/;\}/g, "}").trim();
+  const out = [];
+  let inBlockComment = false;
+  for (const raw of code.split("\n")) {
+    const line = raw.trim();
+    if (inBlockComment) {
+      if (line.includes("*/")) inBlockComment = false;
+      continue;
+    }
+    if (line === "" || line.startsWith("//")) continue;
+    if (line.startsWith("/*")) {
+      if (!line.includes("*/")) inBlockComment = true;
+      continue;
+    }
+    out.push(line);
+  }
+  return out.join("\n");
 }
 function generatePlatformBundle(platform, options = {}) {
   const platformAdapters = {
@@ -2907,11 +2976,8 @@ function buildCSPDirectives(csp) {
   directives.push(`img-src ${imgSources.join(" ")}`);
   const fontSources = ["'self'", "data:", ...allResourceDomains];
   directives.push(`font-src ${fontSources.join(" ")}`);
-  if (validConnectDomains.length) {
-    directives.push(`connect-src ${validConnectDomains.join(" ")}`);
-  } else {
-    directives.push(`connect-src ${allResourceDomains.join(" ")}`);
-  }
+  const connectSources = [.../* @__PURE__ */ new Set([...allResourceDomains, ...validConnectDomains])];
+  directives.push(`connect-src ${connectSources.join(" ")}`);
   directives.push("object-src 'self' data:");
   return directives;
 }
@@ -2920,26 +2986,34 @@ function buildCSPMetaTag(csp) {
   const content = directives.join("; ");
   return `<meta http-equiv="Content-Security-Policy" content="${escapeAttribute(content)}">`;
 }
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
 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);
+  if (typeof domain !== "string" || /[\s;,'"]/.test(domain)) return false;
+  if (/[?#]/.test(domain)) return false;
+  if (domain.includes("*")) {
+    const wildcard = /^(?:https|wss):\/\/\*\.(.*)$/.exec(domain);
+    return wildcard !== null && /^([a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/.test(wildcard[1]);
   }
   try {
     const url = new URL(domain);
-    return url.protocol === "https:";
+    if (url.protocol === "https:" || url.protocol === "wss:") return true;
+    return (url.protocol === "http:" || url.protocol === "ws:") && LOOPBACK_HOSTS.has(url.hostname);
   } catch {
     return false;
   }
 }
+var reportedInvalidDomains = /* @__PURE__ */ new Set();
 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}`);
+    } else if (!reportedInvalidDomains.has(domain)) {
+      reportedInvalidDomains.add(domain);
+      console.warn(
+        `Invalid CSP domain ignored: ${domain} (expected an https:// or wss:// origin, or http:// / ws:// on localhost)`
+      );
     }
   }
   return valid;
@@ -3476,8 +3550,8 @@ if (__root) {
       configurable: true, enumerable: true
     });
   }
-  // 2. Try injected data globals
-  if (__hasData(window.__mcpToolOutput)) { __render(window.__mcpToolOutput); }
+  // 2. Try injected data globals (null: the page carries no call's data, e.g. compiled at startup)
+  if (__hasData(window.__mcpToolOutput) && window.__mcpToolOutput !== null) { __render(window.__mcpToolOutput); }
   // 3. Listen for bridge tool-result (ext-apps / MCP Inspector)
   var __bridge = window.FrontMcpBridge;
   if (__bridge && typeof __bridge.onToolResult === 'function') {
@@ -3729,7 +3803,7 @@ createRoot(document.getElementById('root'))
   return `${componentImport}
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-const output = window.__mcpToolOutput;
+const output = window.__mcpToolOutput || {};
 const props = ${propsCode};
 createRoot(document.getElementById('root'))
   .render(React.createElement(Component, props));`;
@@ -4102,6 +4176,86 @@ function wrapDetectedContent(value) {
   }
 }
 
+// libs/uipack/src/adapters/markdown.ts
+var SAFE_HREF = /^(https?:|mailto:|\/|#)/i;
+function emphasis(text) {
+  return text.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>");
+}
+function inline(text) {
+  const stash = [];
+  const hold = (html2) => `\uE000${stash.push(html2) - 1}\uE000`;
+  let out = escapeHtml(text.replace(/\uE000/g, "")).replace(
+    /`([^`]+)`/g,
+    (_m, code) => hold(`<code>${code}</code>`)
+  );
+  out = out.replace(
+    /\[([^\]]+)\]\(([^)\s]+)\)/g,
+    (_m, label, href) => SAFE_HREF.test(href) ? hold(`<a href="${href}" rel="noopener noreferrer">${emphasis(label)}</a>`) : label
+  );
+  out = emphasis(out);
+  for (let i = 0; i < 2; i++) out = out.replace(/\uE000(\d+)\uE000/g, (_m, n) => stash[Number(n)]);
+  return out;
+}
+function markdownToHtml(source) {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let paragraph = [];
+  let list;
+  const flushParagraph = () => {
+    if (paragraph.length > 0) blocks.push(`<p>${inline(paragraph.join(" "))}</p>`);
+    paragraph = [];
+  };
+  const flushList = () => {
+    if (list)
+      blocks.push(`<${list.tag}>${list.items.map((item) => `<li>${inline(item)}</li>`).join("")}</${list.tag}>`);
+    list = void 0;
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fence = /^\s*(`{3,})/.exec(line);
+    if (fence) {
+      flushParagraph();
+      flushList();
+      const fenceLength = fence[1].length;
+      const isClosing = (l) => {
+        const m = /^\s*(`{3,})\s*$/.exec(l);
+        return m !== null && m[1].length >= fenceLength;
+      };
+      const code = [];
+      for (i++; i < lines.length && !isClosing(lines[i]); i++) code.push(lines[i]);
+      blocks.push(`<pre><code>${escapeHtml(code.join("\n"))}
+</code></pre>`);
+      continue;
+    }
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      blocks.push(`<h${heading[1].length}>${inline(heading[2].trim())}</h${heading[1].length}>`);
+      continue;
+    }
+    const item = /^\s*([-*+]|\d+\.)\s+(.*)$/.exec(line);
+    if (item) {
+      flushParagraph();
+      const tag = /\d/.test(item[1]) ? "ol" : "ul";
+      if (list && list.tag !== tag) flushList();
+      list ??= { tag, items: [] };
+      list.items.push(item[2]);
+      continue;
+    }
+    if (line.trim() === "") {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+    flushList();
+    paragraph.push(line.trim());
+  }
+  flushParagraph();
+  flushList();
+  return blocks.join("\n");
+}
+
 // libs/uipack/src/adapters/type-detector.ts
 function detectUIType(template) {
   if (template === null || template === void 0) {
@@ -4135,9 +4289,15 @@ function detectUIType(template) {
 }
 
 // libs/uipack/src/adapters/template-renderer.ts
-function buildCspConfig(resolver) {
+function buildCspConfig(resolver, extra) {
   const cspResourceDomains = ["https://esm.sh"];
   const cspConnectDomains = ["https://esm.sh"];
+  for (const domain of extra?.resourceDomains ?? []) {
+    if (!cspResourceDomains.includes(domain)) cspResourceDomains.push(domain);
+  }
+  for (const domain of extra?.connectDomains ?? []) {
+    if (!cspConnectDomains.includes(domain)) cspConnectDomains.push(domain);
+  }
   if (resolver && "overrides" in resolver) {
     const overrides = resolver.overrides;
     if (overrides) {
@@ -4177,6 +4337,24 @@ function renderUnwrappedResult(rawResult, options) {
   }
   return rawResult;
 }
+var warnedComponentReferences = /* @__PURE__ */ new WeakMap();
+function warnComponentReference(template, toolName, logger) {
+  const warned = warnedComponentReferences.get(template) ?? /* @__PURE__ */ new Set();
+  if (warned.has(toolName)) return;
+  warned.add(toolName);
+  warnedComponentReferences.set(template, warned);
+  logger.warn(
+    `[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) {
+  return typeof value === "object" && value !== null && "$$typeof" in value;
+}
+function isDefinitelyReactComponent(template) {
+  if (typeof template !== "function") return false;
+  const proto = template.prototype;
+  return typeof proto?.render === "function" || template["$$typeof"] !== void 0;
+}
 function renderToolTemplate(options) {
   const { toolName, input, output, template, resolver, platformType, sizing } = options;
   const uiType = detectUIType(template);
@@ -4187,30 +4365,41 @@ function renderToolTemplate(options) {
     output,
     includeBridge: true,
     resolver,
-    sizing
+    sizing,
+    csp: options.csp ? buildCspConfig(resolver, options.csp) : void 0
   };
   let html2;
   let hash = "";
   let size = 0;
   if (typeof template === "object" && template !== null && "file" in template) {
-    const cspConfig = buildCspConfig(resolver);
     const result = renderComponent(
       { source: template, inlineReact: resourceMode === "inline" },
-      { ...shellConfig, csp: cspConfig }
+      { ...shellConfig, csp: buildCspConfig(resolver, options.csp) }
     );
     html2 = result.html;
     hash = result.hash;
     size = result.size;
   } else if (typeof template === "function") {
-    if (uiType === "react") {
+    const helpers = createTemplateHelpers();
+    const ctx = { input: input ?? {}, output: output ?? {}, helpers };
+    let rawResult;
+    let isHtmlBuilder = uiType !== "react" || !isDefinitelyReactComponent(template);
+    if (isHtmlBuilder) {
+      try {
+        rawResult = template(ctx);
+        isHtmlBuilder = !isReactElement(rawResult);
+      } catch (error) {
+        if (uiType !== "react") throw error;
+        isHtmlBuilder = false;
+      }
+    }
+    if (!isHtmlBuilder) {
+      warnComponentReference(template, toolName, options.logger ?? console);
       const shellResult = buildShell('<div id="root"></div>', shellConfig);
       html2 = shellResult.html;
       hash = shellResult.hash;
       size = shellResult.size;
     } else {
-      const helpers = createTemplateHelpers();
-      const ctx = { input, output, helpers };
-      const rawResult = template(ctx);
       const wrapped = isTrustedHtml(rawResult) ? void 0 : wrapDetectedContent(rawResult);
       if (wrapped) {
         html2 = wrapped;
@@ -4222,7 +4411,7 @@ function renderToolTemplate(options) {
       }
     }
   } else if (typeof template === "string") {
-    const shellResult = buildShell(template, shellConfig);
+    const shellResult = buildShell(uiType === "markdown" ? markdownToHtml(template) : template, shellConfig);
     html2 = shellResult.html;
     hash = shellResult.hash;
     size = shellResult.size;

package/esm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontmcp/uipack",
-  "version": "1.8.6",
+  "version": "1.9.0",
   "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.8.6",
+    "@frontmcp/lazy-zod": "1.9.0",
     "esbuild": ">=0.27.0 <1"
   },
   "peerDependenciesMeta": {

package/esm/resolver/index.mjs

@@ -1,3 +1,6 @@
+var __frontmcpModule = typeof process !== "undefined" && typeof process.getBuiltinModule === "function" ? process.getBuiltinModule("module") : undefined;
+const require = __frontmcpModule ? __frontmcpModule.createRequire(import.meta.url || 'file:///') : undefined;
+// __frontmcpCreateRequire
 // libs/uipack/src/resolver/cdn-registry.ts
 var DEFAULT_CDN_REGISTRY = {
   react: {