@frontmcp/ui 0.6.1 → 0.6.2

package/esm/universal/{index.js → index.mjs}

@@ -1075,7 +1075,7 @@ function buildUniversalRuntime(options) {
   }
   let script = parts.join("\n");
   if (options.minify) {
-    script = script.replace(/\/\/[^\n]*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
+    script = script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/[^\n]*$/gm, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
   }
   return {
     script,
@@ -1086,12 +1086,14 @@ function buildUniversalRuntime(options) {
 function buildMinimalRuntime(options) {
   let script = buildStoreRuntime();
   if (options.minify) {
-    script = script.replace(/\/\/[^\n]*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
+    script = script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/[^\n]*$/gm, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
   }
   return script;
 }
 
 // libs/ui/src/universal/cached-runtime.ts
+import { getMCPBridgeScript } from "@frontmcp/uipack/runtime";
+import { buildUIComponentsRuntime as buildBrowserUIComponents } from "@frontmcp/uipack/build";
 var RUNTIME_PLACEHOLDERS = {
   /** Placeholder for transpiled component code */
   COMPONENT_CODE: "/*__FRONTMCP_COMPONENT_CODE__*/",
@@ -1117,6 +1119,7 @@ function generateCacheKey(options) {
     options.includeMarkdown ? "md" : "",
     options.includeMdx ? "mdx" : "",
     options.minify ? "min" : "",
+    options.includeBridge ? "bridge" : "",
     securityKey
   ].filter(Boolean).join(":");
 }
@@ -1160,6 +1163,17 @@ function buildStoreRuntime2() {
     context: state,
     setContext: function(ctx) {
       this.setState(ctx);
+    },
+    // Dynamic mode: update output and re-render
+    updateOutput: function(output) {
+      this.setState({ output: output, loading: false });
+      // Also update the global window variable for compatibility
+      window.__mcpToolOutput = output;
+    },
+    // Dynamic mode: update input and re-render
+    updateInput: function(input) {
+      this.setState({ input: input });
+      window.__mcpToolInput = input;
     }
   };
 
@@ -1184,6 +1198,32 @@ function buildStoreRuntime2() {
   window.useContent = function() {
     return window.useFrontMCPStore().content;
   };
+
+  // Connect to MCP Bridge for platform data detection
+  function initFromBridge() {
+    // Check for data from mcpBridge (handles OpenAI, ext-apps, etc.)
+    if (window.mcpBridge && window.mcpBridge.toolOutput != null) {
+      window.__frontmcp.setState({
+        output: window.mcpBridge.toolOutput,
+        loading: false
+      });
+    }
+
+    // Subscribe to bridge updates via onToolResult
+    if (window.mcpBridge && window.mcpBridge.onToolResult) {
+      window.mcpBridge.onToolResult(function(result) {
+        window.__frontmcp.updateOutput(result);
+      });
+    }
+  }
+
+  // Initialize from bridge when ready
+  if (window.mcpBridge) {
+    initFromBridge();
+  } else {
+    // Wait for bridge to be ready
+    window.addEventListener('mcp:bridge-ready', initFromBridge);
+  }
 })();
 `;
 }
@@ -1403,71 +1443,7 @@ function buildRenderersRuntime2(options) {
 `;
 }
 function buildUIComponentsRuntime() {
-  return `
-// UI Components (Vendor)
-(function() {
-  window.Card = function(props) {
-    var children = props.children;
-    var title = props.title;
-    var className = props.className || '';
-    return React.createElement('div', {
-      className: 'bg-white rounded-lg shadow border border-gray-200 overflow-hidden ' + className
-    }, [
-      title && React.createElement('div', {
-        key: 'header',
-        className: 'px-4 py-3 border-b border-gray-200 bg-gray-50'
-      }, React.createElement('h3', { className: 'text-sm font-medium text-gray-900' }, title)),
-      React.createElement('div', { key: 'body', className: 'p-4' }, children)
-    ]);
-  };
-
-  window.Badge = function(props) {
-    var children = props.children;
-    var variant = props.variant || 'default';
-    var variantClasses = {
-      default: 'bg-gray-100 text-gray-800',
-      success: 'bg-green-100 text-green-800',
-      warning: 'bg-yellow-100 text-yellow-800',
-      error: 'bg-red-100 text-red-800',
-      info: 'bg-blue-100 text-blue-800'
-    };
-    return React.createElement('span', {
-      className: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ' + (variantClasses[variant] || variantClasses.default)
-    }, children);
-  };
-
-  window.Button = function(props) {
-    var children = props.children;
-    var variant = props.variant || 'primary';
-    var onClick = props.onClick;
-    var disabled = props.disabled;
-    var variantClasses = {
-      primary: 'bg-blue-600 text-white hover:bg-blue-700',
-      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
-      outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',
-      danger: 'bg-red-600 text-white hover:bg-red-700'
-    };
-    return React.createElement('button', {
-      className: 'px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ' +
-        (disabled ? 'opacity-50 cursor-not-allowed ' : '') +
-        (variantClasses[variant] || variantClasses.primary),
-      onClick: onClick,
-      disabled: disabled
-    }, children);
-  };
-
-  // Export to namespace
-  window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, {
-    useToolOutput: window.useToolOutput,
-    useToolInput: window.useToolInput,
-    useMcpBridgeContext: function() { return window.__frontmcp.context; },
-    useCallTool: function() { return function() { return Promise.resolve(null); }; },
-    Card: window.Card,
-    Badge: window.Badge,
-    Button: window.Button
-  });
-})();
-`;
+  return buildBrowserUIComponents();
 }
 function buildUniversalAppRuntime2() {
   return `
@@ -1592,7 +1568,11 @@ function getCachedRuntime(options, config = {}) {
     }
     runtimeCache.delete(cacheKey);
   }
-  const vendorParts = [buildStoreRuntime2(), buildRequireShim()];
+  const vendorParts = [];
+  if (options.includeBridge) {
+    vendorParts.push(getMCPBridgeScript());
+  }
+  vendorParts.push(buildStoreRuntime2(), buildRequireShim());
   if (options.cdnType === "umd" || options.includeMarkdown) {
     vendorParts.push(buildInlineMarkdownParser2(options));
   }
@@ -1631,7 +1611,7 @@ function buildAppTemplate() {
   return [buildCustomComponentsWrapper(), buildComponentWrapper(), buildDataInjectionWrapper()].join("\n");
 }
 function minifyScript(script) {
-  return script.replace(/\/\/[^\n]*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
+  return script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/[^\n]*$/gm, "").replace(/\n\s*\n/g, "\n").replace(/^\s+/gm, "").trim();
 }
 function clearRuntimeCache() {
   runtimeCache.clear();
@@ -1652,7 +1632,46 @@ function getRuntimeCacheStats() {
 function buildAppScript(appTemplate, componentCode, dataInjection, customComponents = "") {
   return appTemplate.replace(RUNTIME_PLACEHOLDERS.CUSTOM_COMPONENTS, customComponents || "// No custom components").replace(RUNTIME_PLACEHOLDERS.COMPONENT_CODE, componentCode || "// No component code").replace(RUNTIME_PLACEHOLDERS.DATA_INJECTION, dataInjection);
 }
-function buildDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent) {
+var DEFAULT_OUTPUT_PLACEHOLDER = "__FRONTMCP_OUTPUT_PLACEHOLDER__";
+var DEFAULT_INPUT_PLACEHOLDER = "__FRONTMCP_INPUT_PLACEHOLDER__";
+function buildDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, options) {
+  const buildMode = options?.buildMode ?? "static";
+  const cdnType = options?.cdnType ?? "esm";
+  switch (buildMode) {
+    case "dynamic":
+      return buildDynamicDataInjectionCode(
+        toolName,
+        input,
+        output,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent,
+        cdnType,
+        options?.dynamicOptions
+      );
+    case "hybrid":
+      return buildHybridDataInjectionCode(
+        toolName,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent,
+        options?.hybridOptions
+      );
+    default:
+      return buildStaticDataInjectionCode(
+        toolName,
+        input,
+        output,
+        structuredContent,
+        contentType,
+        source,
+        hasComponent
+      );
+  }
+}
+function buildStaticDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent) {
   const safeJson = (value) => {
     try {
       return JSON.stringify(value);
@@ -1662,6 +1681,7 @@ function buildDataInjectionCode(toolName, input, output, structuredContent, cont
   };
   if (hasComponent) {
     return `
+  // Static Mode - Data baked at build time
   window.__frontmcp.setState({
     toolName: ${safeJson(toolName)},
     input: ${safeJson(input ?? null)},
@@ -1676,6 +1696,7 @@ function buildDataInjectionCode(toolName, input, output, structuredContent, cont
   });`;
   }
   return `
+  // Static Mode - Data baked at build time
   window.__frontmcp.setState({
     toolName: ${safeJson(toolName)},
     input: ${safeJson(input ?? null)},
@@ -1689,6 +1710,181 @@ function buildDataInjectionCode(toolName, input, output, structuredContent, cont
     error: null
   });`;
 }
+function buildDynamicDataInjectionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, cdnType, dynamicOptions) {
+  if (cdnType === "umd") {
+    return buildDynamicWithPlaceholdersCode(
+      toolName,
+      structuredContent,
+      contentType,
+      source,
+      hasComponent,
+      dynamicOptions
+    );
+  }
+  return buildDynamicWithSubscriptionCode(
+    toolName,
+    input,
+    output,
+    structuredContent,
+    contentType,
+    source,
+    hasComponent,
+    dynamicOptions
+  );
+}
+function buildDynamicWithPlaceholdersCode(toolName, structuredContent, contentType, source, hasComponent, dynamicOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const outputPlaceholder = DEFAULT_OUTPUT_PLACEHOLDER;
+  const inputPlaceholder = DEFAULT_INPUT_PLACEHOLDER;
+  const includeInitialData = dynamicOptions?.includeInitialData ?? true;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  return `
+  // Dynamic Mode - Placeholder-based for non-OpenAI platforms
+  var __outputRaw = "${outputPlaceholder}";
+  var __inputRaw = "${inputPlaceholder}";
+  var __output = null;
+  var __input = null;
+  var __error = null;
+  var __outputNotReplaced = false;
+  var __includeInitialData = ${includeInitialData};
+
+  // Parse output placeholder
+  if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") {
+    try { __output = JSON.parse(__outputRaw); } catch (e) {
+      console.warn('[FrontMCP] Failed to parse output:', e);
+      __error = 'Failed to parse output data';
+    }
+  } else if (__outputRaw === "${outputPlaceholder}") {
+    __outputNotReplaced = true;
+  }
+
+  // Parse input placeholder
+  if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") {
+    try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); }
+  }
+
+  // Handle placeholder not replaced - show error if expecting initial data
+  if (__outputNotReplaced && __includeInitialData) {
+    __error = 'No data provided. The output placeholder was not replaced.';
+  }
+
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: __input,
+    output: __output,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: !__includeInitialData && __output === null && !__error,
+    error: __error
+  });`;
+}
+function buildDynamicWithSubscriptionCode(toolName, input, output, structuredContent, contentType, source, hasComponent, dynamicOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const includeInitialData = dynamicOptions?.includeInitialData ?? true;
+  const subscribeToUpdates = dynamicOptions?.subscribeToUpdates ?? true;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  const initialState = includeInitialData ? `{
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: false,
+    error: null
+  }` : `{
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: null,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: true,
+    error: null
+  }`;
+  const subscriptionBlock = subscribeToUpdates ? `
+  // Subscribe to platform tool result events
+  (function() {
+    function subscribeToUpdates() {
+      if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) {
+        window.openai.canvas.onToolResult(function(result) {
+          window.__frontmcp.updateOutput(result);
+          window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result }));
+        });
+      }
+    }
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', subscribeToUpdates);
+    } else {
+      subscribeToUpdates();
+    }
+  })();` : "";
+  return `
+  // Dynamic Mode - OpenAI Subscription
+  window.__frontmcp.setState(${initialState});
+  ${subscriptionBlock}`;
+}
+function buildHybridDataInjectionCode(toolName, structuredContent, contentType, source, hasComponent, hybridOptions) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  const outputPlaceholder = hybridOptions?.placeholder ?? DEFAULT_OUTPUT_PLACEHOLDER;
+  const inputPlaceholder = hybridOptions?.inputPlaceholder ?? DEFAULT_INPUT_PLACEHOLDER;
+  const contentBlock = hasComponent ? `content: { type: 'react', source: window.__frontmcp_component }` : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`;
+  return `
+  // Hybrid Mode - Placeholders replaced at runtime
+  var __outputRaw = "${outputPlaceholder}";
+  var __inputRaw = "${inputPlaceholder}";
+  var __output = null;
+  var __input = null;
+  var __error = null;
+  var __outputNotReplaced = false;
+
+  // Parse output placeholder
+  if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") {
+    try { __output = JSON.parse(__outputRaw); } catch (e) {
+      console.warn('[FrontMCP] Failed to parse output:', e);
+      __error = 'Failed to parse output data';
+    }
+  } else if (__outputRaw === "${outputPlaceholder}") {
+    // Placeholder not replaced - no data was injected
+    __outputNotReplaced = true;
+  }
+
+  // Parse input placeholder
+  if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") {
+    try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); }
+  }
+
+  // Set error if output placeholder was not replaced (no data provided)
+  if (__outputNotReplaced) {
+    __error = 'No data provided. The output placeholder was not replaced.';
+  }
+
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: __input,
+    output: __output,
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    ${contentBlock},
+    loading: false,
+    error: __error
+  });`;
+}
 function buildComponentCode(transpiledCode) {
   return `
   // CommonJS module shim

package/index.d.ts

@@ -30,11 +30,8 @@
  */
 export * from './components';
 export * from './layouts';
-export * from './pages';
-export * from './widgets';
 export { type PlatformAdapter, type AdapterCapabilities, type BridgeConfig, FrontMcpBridge, createBridge, AdapterRegistry, defaultRegistry, registerAdapter, generateBridgeIIFE, generatePlatformBundle, UNIVERSAL_BRIDGE_SCRIPT, BRIDGE_SCRIPT_TAGS, } from './bridge';
 export { registerAllComponents, registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect, FmcpElement, } from './web-components';
 export * from './react';
-export * from './render';
-export { ReactRenderer, reactRenderer, buildHydrationScript, ReactRendererAdapter, createReactAdapter, loadReactAdapter, } from './renderers';
+export { ReactRenderer, reactRenderer, ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './renderers';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAKH,cAAc,cAAc,CAAC;AAK7B,cAAc,WAAW,CAAC;AAK1B,cAAc,SAAS,CAAC;AAKxB,cAAc,WAAW,CAAC;AAK1B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,cAAc,EACd,YAAY,EAEZ,eAAe,EACf,eAAe,EACf,eAAe,EAEf,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAKlB,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAElB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EAEV,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAK1B,cAAc,SAAS,CAAC;AAKxB,cAAc,UAAU,CAAC;AAKzB,OAAO,EACL,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAKH,cAAc,cAAc,CAAC;AAK7B,cAAc,WAAW,CAAC;AAK1B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,cAAc,EACd,YAAY,EAEZ,eAAe,EACf,eAAe,EACf,eAAe,EAEf,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAKlB,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAElB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EAEV,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAK1B,cAAc,SAAS,CAAC;AAKxB,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}