@frontmcp/ui 0.5.1 → 0.6.1

package/esm/universal/index.js

@@ -0,0 +1,1755 @@
+// libs/ui/src/universal/types.ts
+var DEFAULT_FRONTMCP_STATE = {
+  toolName: null,
+  input: null,
+  output: null,
+  content: null,
+  structuredContent: null,
+  loading: false,
+  error: null
+};
+var UNIVERSAL_CDN = {
+  esm: {
+    reactMarkdown: "https://esm.sh/react-markdown@9",
+    mdxReact: "https://esm.sh/@mdx-js/react@3",
+    remarkGfm: "https://esm.sh/remark-gfm@4"
+  }
+  // Note: These libraries are not available on cdnjs
+  // For Claude, we use inline implementations
+};
+function detectContentType(source) {
+  if (typeof source === "function") {
+    return "react";
+  }
+  if (typeof source !== "string") {
+    return "html";
+  }
+  const hasModuleSyntax = /^import\s+/m.test(source) || /^export\s+(default\s+)?/m.test(source) || /^const\s+\w+\s*=\s*\([^)]*\)\s*=>/m.test(source) || // Arrow function components
+  /^function\s+\w+\s*\(/m.test(source);
+  const hasJsxTags = /<[A-Z][a-zA-Z]*/.test(source);
+  const hasMarkdown = /^#{1,6}\s/m.test(source) || /^\*\s/m.test(source) || /^-\s/m.test(source) || /^\d+\.\s/m.test(source);
+  if (hasModuleSyntax && hasJsxTags) {
+    return "react";
+  }
+  if (hasJsxTags && hasMarkdown && !hasModuleSyntax) {
+    return "mdx";
+  }
+  if (hasMarkdown || /\*\*[^*]+\*\*/.test(source) || /\[[^\]]+\]\([^)]+\)/.test(source)) {
+    return "markdown";
+  }
+  if (hasJsxTags && !hasModuleSyntax) {
+    return "mdx";
+  }
+  return "html";
+}
+
+// libs/ui/src/universal/store.ts
+import { useSyncExternalStore } from "react";
+function createFrontMCPStore(initialState) {
+  let state = {
+    ...DEFAULT_FRONTMCP_STATE,
+    ...initialState
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  const getState = () => state;
+  const getServerState = () => state;
+  const setState = (partial) => {
+    const hasChanged = Object.keys(partial).some(
+      (key) => partial[key] !== state[key]
+    );
+    if (hasChanged) {
+      state = { ...state, ...partial };
+      listeners.forEach((listener) => listener());
+    }
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  const reset = () => {
+    setState({
+      ...DEFAULT_FRONTMCP_STATE,
+      ...initialState
+    });
+  };
+  return {
+    getState,
+    getServerState,
+    setState,
+    subscribe,
+    reset
+  };
+}
+var globalStore = null;
+function getGlobalStore() {
+  if (!globalStore) {
+    globalStore = createFrontMCPStore();
+  }
+  return globalStore;
+}
+function setGlobalStore(store) {
+  globalStore = store;
+}
+function resetGlobalStore(initialState) {
+  globalStore = createFrontMCPStore(initialState);
+}
+function useFrontMCPStore(store) {
+  const targetStore = store ?? getGlobalStore();
+  return useSyncExternalStore(targetStore.subscribe, targetStore.getState, targetStore.getServerState);
+}
+function useToolOutput(store) {
+  const state = useFrontMCPStore(store);
+  return state.output;
+}
+function useToolInput(store) {
+  const state = useFrontMCPStore(store);
+  return state.input;
+}
+function useContent(store) {
+  const state = useFrontMCPStore(store);
+  return state.content;
+}
+function useToolName(store) {
+  const state = useFrontMCPStore(store);
+  return state.toolName;
+}
+function useLoadingState(store) {
+  const state = useFrontMCPStore(store);
+  return { loading: state.loading, error: state.error };
+}
+function initializeStoreFromWindow(store) {
+  const targetStore = store ?? getGlobalStore();
+  const windowData = typeof window !== "undefined" ? window.__frontmcp : void 0;
+  if (windowData?.context) {
+    targetStore.setState({
+      toolName: windowData.context.toolName ?? null,
+      input: windowData.context.toolInput ?? null,
+      output: windowData.context.toolOutput ?? null,
+      structuredContent: windowData.context.structuredContent ?? null,
+      loading: false,
+      error: null
+    });
+  }
+}
+function createStoreSelector(selector) {
+  return (store) => {
+    const state = useFrontMCPStore(store);
+    return selector(state);
+  };
+}
+
+// libs/ui/src/universal/context.tsx
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var FrontMCPContext = createContext(null);
+var ComponentsContext = createContext({});
+function FrontMCPProvider({ store, initialState, children }) {
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = store ?? createFrontMCPStore(initialState);
+  }
+  const actualStore = storeRef.current;
+  useEffect(() => {
+    if (typeof window !== "undefined" && !store) {
+      initializeStoreFromWindow(actualStore);
+    }
+  }, [actualStore, store]);
+  return /* @__PURE__ */ jsx(FrontMCPContext.Provider, { value: actualStore, children });
+}
+function ComponentsProvider({ components, children }) {
+  const parentComponents = useContext(ComponentsContext);
+  const mergedComponents = useMemo(
+    () => ({
+      ...parentComponents,
+      ...components
+    }),
+    [parentComponents, components]
+  );
+  return /* @__PURE__ */ jsx(ComponentsContext.Provider, { value: mergedComponents, children });
+}
+function useFrontMCPContext() {
+  const store = useContext(FrontMCPContext);
+  if (!store) {
+    throw new Error("useFrontMCPContext must be used within a FrontMCPProvider");
+  }
+  return store;
+}
+function useComponents() {
+  return useContext(ComponentsContext);
+}
+function useFrontMCPContextSafe() {
+  return useContext(FrontMCPContext);
+}
+function UniversalProvider({
+  store,
+  initialState,
+  components = {},
+  children
+}) {
+  return /* @__PURE__ */ jsx(FrontMCPProvider, { store, initialState, children: /* @__PURE__ */ jsx(ComponentsProvider, { components, children }) });
+}
+function withFrontMCP(Component) {
+  const WrappedComponent = (props) => {
+    const store = useFrontMCPContext();
+    const state = store.getState();
+    return /* @__PURE__ */ jsx(Component, { ...props, state });
+  };
+  WrappedComponent.displayName = `withFrontMCP(${Component.displayName || Component.name || "Component"})`;
+  return WrappedComponent;
+}
+
+// libs/ui/src/universal/renderers/html.renderer.ts
+import React2 from "react";
+var htmlRenderer = {
+  type: "html",
+  priority: 0,
+  // Lowest priority (fallback)
+  canHandle(content) {
+    return content.type === "html" || typeof content.source === "string";
+  },
+  render(content, _context) {
+    const source = content.source;
+    if (typeof source !== "string") {
+      return React2.createElement("div", { className: "frontmcp-error" }, "HTML renderer requires a string source");
+    }
+    return React2.createElement("div", {
+      className: "frontmcp-html-content",
+      dangerouslySetInnerHTML: { __html: source }
+    });
+  }
+};
+function sanitizeHtml(html) {
+  let sanitized = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  sanitized = sanitized.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, "");
+  sanitized = sanitized.replace(/\s+on\w+\s*=\s*[^\s>]*/gi, "");
+  sanitized = sanitized.replace(/href\s*=\s*["']javascript:[^"']*["']/gi, 'href="#"');
+  return sanitized;
+}
+var safeHtmlRenderer = {
+  type: "html",
+  priority: 0,
+  canHandle(content) {
+    return content.type === "html" && typeof content.source === "string";
+  },
+  render(content, _context) {
+    const source = content.source;
+    if (typeof source !== "string") {
+      return React2.createElement("div", { className: "frontmcp-error" }, "HTML renderer requires a string source");
+    }
+    const sanitized = sanitizeHtml(source);
+    return React2.createElement("div", {
+      className: "frontmcp-html-content",
+      dangerouslySetInnerHTML: { __html: sanitized }
+    });
+  }
+};
+
+// libs/ui/src/universal/renderers/markdown.renderer.ts
+import React3 from "react";
+import { escapeHtml } from "@frontmcp/uipack/utils";
+function isSafeUrl(url) {
+  if (!url) return false;
+  const lower = url.toLowerCase().trim();
+  return lower.startsWith("http://") || lower.startsWith("https://") || lower.startsWith("/") || lower.startsWith("#") || lower.startsWith("mailto:") || lower.startsWith("tel:");
+}
+function getReactMarkdown() {
+  if (typeof window !== "undefined" && window.ReactMarkdown) {
+    return window.ReactMarkdown;
+  }
+  return null;
+}
+function parseMarkdownToHtml(markdown) {
+  let html = escapeHtml(markdown);
+  html = html.replace(/^######\s+(.*)$/gm, "<h6>$1</h6>");
+  html = html.replace(/^#####\s+(.*)$/gm, "<h5>$1</h5>");
+  html = html.replace(/^####\s+(.*)$/gm, "<h4>$1</h4>");
+  html = html.replace(/^###\s+(.*)$/gm, "<h3>$1</h3>");
+  html = html.replace(/^##\s+(.*)$/gm, "<h2>$1</h2>");
+  html = html.replace(/^#\s+(.*)$/gm, "<h1>$1</h1>");
+  html = html.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  html = html.replace(/___(.+?)___/g, "<strong><em>$1</em></strong>");
+  html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+    return isSafeUrl(url) ? `<a href="${url}">${text}</a>` : text;
+  });
+  html = html.replace(/^[-*]\s+(.*)$/gm, "<li>$1</li>");
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>");
+  html = html.replace(/^\d+\.\s+(.*)$/gm, "<li>$1</li>");
+  html = html.replace(/\n\n+/g, "</p><p>");
+  html = "<p>" + html + "</p>";
+  html = html.replace(/<p>\s*<\/p>/g, "");
+  html = html.replace(/<p>\s*(<h[1-6]>)/g, "$1");
+  html = html.replace(/(<\/h[1-6]>)\s*<\/p>/g, "$1");
+  html = html.replace(/<p>\s*(<ul>)/g, "$1");
+  html = html.replace(/(<\/ul>)\s*<\/p>/g, "$1");
+  return html;
+}
+var markdownRenderer = {
+  type: "markdown",
+  priority: 10,
+  // Medium priority
+  canHandle(content) {
+    if (content.type === "markdown") {
+      return true;
+    }
+    if (typeof content.source === "string") {
+      const source = content.source;
+      const hasMarkdown = /^#{1,6}\s/m.test(source) || // Headers
+      /^\*\s/m.test(source) || // Unordered list
+      /^-\s/m.test(source) || // Unordered list
+      /^\d+\.\s/m.test(source) || // Ordered list
+      /\*\*[^*]+\*\*/.test(source) || // Bold
+      /\[[^\]]+\]\([^)]+\)/.test(source);
+      const hasJsx = /<[A-Z][a-zA-Z]*/.test(source);
+      return hasMarkdown && !hasJsx;
+    }
+    return false;
+  },
+  render(content, context) {
+    const source = content.source;
+    if (typeof source !== "string") {
+      return React3.createElement("div", { className: "frontmcp-error" }, "Markdown renderer requires a string source");
+    }
+    const ReactMarkdown = getReactMarkdown();
+    if (ReactMarkdown) {
+      const components = {
+        ...context.components,
+        ...content.components
+      };
+      return React3.createElement(ReactMarkdown, { components }, source);
+    }
+    const html = parseMarkdownToHtml(source);
+    return React3.createElement("div", {
+      className: "frontmcp-markdown-content prose",
+      dangerouslySetInnerHTML: { __html: html }
+    });
+  }
+};
+function createMarkdownRenderer(defaultComponents) {
+  return {
+    ...markdownRenderer,
+    render(content, context) {
+      const enhancedContext = {
+        ...context,
+        components: {
+          ...defaultComponents,
+          ...context.components
+        }
+      };
+      return markdownRenderer.render(content, enhancedContext);
+    }
+  };
+}
+
+// libs/ui/src/universal/renderers/react.renderer.ts
+import React4 from "react";
+var reactRenderer = {
+  type: "react",
+  priority: 30,
+  // Highest priority for function components
+  canHandle(content) {
+    return content.type === "react" || typeof content.source === "function";
+  },
+  render(content, context) {
+    const Component = content.source;
+    if (typeof Component !== "function") {
+      return React4.createElement("div", {
+        className: "frontmcp-error",
+        children: "React renderer requires a component function"
+      });
+    }
+    const props = {
+      // Default props from context
+      output: context.output,
+      input: context.input,
+      state: context.state,
+      // Override with content-specific props
+      ...content.props
+    };
+    return React4.createElement(Component, props);
+  }
+};
+function isReactComponent(value) {
+  if (typeof value !== "function") {
+    return false;
+  }
+  const fn = value;
+  const typeofSymbol = fn.$$typeof;
+  if (typeofSymbol) {
+    const symbolString = typeofSymbol.toString();
+    return symbolString.includes("react.memo") || symbolString.includes("react.forward_ref") || symbolString.includes("react.lazy");
+  }
+  if (fn.prototype?.isReactComponent) {
+    return true;
+  }
+  if (fn.name && /^[A-Z]/.test(fn.name)) {
+    return true;
+  }
+  return false;
+}
+
+// libs/ui/src/universal/renderers/mdx.renderer.ts
+import React5 from "react";
+import { escapeHtml as escapeHtml2 } from "@frontmcp/uipack/utils";
+function getMDXRuntime() {
+  if (typeof window !== "undefined" && window.MDXProvider) {
+    return { MDXProvider: window.MDXProvider };
+  }
+  return null;
+}
+function containsMdxSyntax(source) {
+  if (/<[A-Z][a-zA-Z]*/.test(source)) {
+    return true;
+  }
+  if (/\{[^}"']+\}/.test(source)) {
+    return true;
+  }
+  if (/^(import|export)\s/m.test(source)) {
+    return true;
+  }
+  if (/\s(className|onClick|onChange)=/.test(source)) {
+    return true;
+  }
+  return false;
+}
+var mdxRenderer = {
+  type: "mdx",
+  priority: 20,
+  // Higher than markdown, lower than React
+  canHandle(content) {
+    if (content.type === "mdx") {
+      return true;
+    }
+    if (typeof content.source === "string") {
+      const source = content.source;
+      const hasMarkdown = /^#{1,6}\s/m.test(source) || /^\*\s/m.test(source) || /^-\s/m.test(source) || /^\d+\.\s/m.test(source);
+      return hasMarkdown && containsMdxSyntax(source);
+    }
+    return false;
+  },
+  render(content, context) {
+    const source = content.source;
+    if (typeof source !== "string") {
+      return React5.createElement("div", { className: "frontmcp-error" }, "MDX renderer requires a string source");
+    }
+    const mdxRuntime = getMDXRuntime();
+    if (!mdxRuntime) {
+      console.warn("[FrontMCP] MDX runtime not available. Content will be displayed as-is.");
+      const escapedContent = escapeHtml2(source).replace(/\n/g, "<br>");
+      return React5.createElement(
+        "div",
+        { className: "frontmcp-mdx-fallback" },
+        React5.createElement(
+          "div",
+          {
+            key: "warning",
+            className: "frontmcp-warning bg-yellow-50 border border-yellow-200 rounded p-2 mb-4 text-sm text-yellow-800"
+          },
+          "MDX rendering is not available on this platform. Content is shown as raw text."
+        ),
+        React5.createElement("pre", {
+          key: "content",
+          className: "bg-gray-100 p-4 rounded overflow-auto",
+          dangerouslySetInnerHTML: { __html: escapedContent }
+        })
+      );
+    }
+    const components = {
+      ...context.components,
+      ...content.components
+    };
+    if (typeof content.compiledContent === "function") {
+      const CompiledContent = content.compiledContent;
+      return React5.createElement(
+        mdxRuntime.MDXProvider,
+        { components },
+        React5.createElement(CompiledContent, {
+          output: context.output,
+          input: context.input
+        })
+      );
+    }
+    console.warn("[FrontMCP] MDX content needs to be pre-compiled. Raw MDX string rendering is not supported.");
+    return React5.createElement(
+      "div",
+      { className: "frontmcp-mdx-uncompiled" },
+      React5.createElement("pre", { className: "bg-gray-100 p-4 rounded overflow-auto text-sm" }, source)
+    );
+  }
+};
+function isMdxSupported() {
+  return getMDXRuntime() !== null;
+}
+function createMdxRenderer(defaultComponents) {
+  return {
+    ...mdxRenderer,
+    render(content, context) {
+      const enhancedContext = {
+        ...context,
+        components: {
+          ...defaultComponents,
+          ...context.components
+        }
+      };
+      return mdxRenderer.render(content, enhancedContext);
+    }
+  };
+}
+
+// libs/ui/src/universal/renderers/index.ts
+var RendererRegistry = class {
+  renderers = /* @__PURE__ */ new Map();
+  sortedRenderers = [];
+  constructor() {
+    this.register(htmlRenderer);
+    this.register(markdownRenderer);
+    this.register(reactRenderer);
+    this.register(mdxRenderer);
+  }
+  /**
+   * Register a renderer.
+   * Renderers are sorted by priority (highest first) for auto-detection.
+   */
+  register(renderer) {
+    this.renderers.set(renderer.type, renderer);
+    this.updateSortedList();
+  }
+  /**
+   * Unregister a renderer by type.
+   */
+  unregister(type) {
+    const removed = this.renderers.delete(type);
+    if (removed) {
+      this.updateSortedList();
+    }
+    return removed;
+  }
+  /**
+   * Get a renderer by type.
+   */
+  get(type) {
+    return this.renderers.get(type);
+  }
+  /**
+   * Check if a renderer type is registered.
+   */
+  has(type) {
+    return this.renderers.has(type);
+  }
+  /**
+   * Get all registered renderer types.
+   */
+  getTypes() {
+    return Array.from(this.renderers.keys());
+  }
+  /**
+   * Auto-detect the best renderer for content.
+   *
+   * Checks renderers in priority order (highest first).
+   * Falls back to HTML renderer if no match.
+   */
+  detect(content) {
+    if (content.type) {
+      const explicit = this.renderers.get(content.type);
+      if (explicit) {
+        return explicit;
+      }
+    }
+    for (const renderer of this.sortedRenderers) {
+      if (renderer.canHandle(content)) {
+        return renderer;
+      }
+    }
+    return htmlRenderer;
+  }
+  /**
+   * Render content using auto-detection.
+   */
+  render(content, context) {
+    const renderer = this.detect(content);
+    return renderer.render(content, context);
+  }
+  /**
+   * Render with a specific renderer type.
+   */
+  renderWith(type, content, context) {
+    const renderer = this.renderers.get(type);
+    if (!renderer) {
+      throw new Error(`Renderer '${type}' not registered`);
+    }
+    return renderer.render(content, context);
+  }
+  /**
+   * Get registry statistics.
+   */
+  getStats() {
+    return {
+      registeredTypes: this.getTypes(),
+      priorityOrder: this.sortedRenderers.map((r) => ({
+        type: r.type,
+        priority: r.priority
+      }))
+    };
+  }
+  /**
+   * Update the sorted renderer list by priority.
+   */
+  updateSortedList() {
+    this.sortedRenderers = Array.from(this.renderers.values()).sort((a, b) => b.priority - a.priority);
+  }
+};
+var rendererRegistry = new RendererRegistry();
+function detectRenderer(content) {
+  return rendererRegistry.detect(content);
+}
+function renderContent(content, context) {
+  return rendererRegistry.render(content, context);
+}
+function createContent(source, options) {
+  return {
+    type: options?.type ?? detectContentType(source),
+    source,
+    props: options?.props,
+    components: options?.components
+  };
+}
+
+// libs/ui/src/universal/UniversalApp.tsx
+import React6 from "react";
+import { escapeHtml as escapeHtml3 } from "@frontmcp/uipack/utils";
+function LoadingSpinner() {
+  return React6.createElement(
+    "div",
+    { className: "frontmcp-loading flex items-center justify-center min-h-[200px]" },
+    React6.createElement("div", {
+      className: "frontmcp-spinner w-6 h-6 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin"
+    })
+  );
+}
+function ErrorDisplay({ error }) {
+  return React6.createElement(
+    "div",
+    {
+      className: "frontmcp-error bg-red-50 border border-red-200 rounded-lg p-4 text-red-800"
+    },
+    [
+      React6.createElement("div", { key: "title", className: "font-medium" }, "Error"),
+      React6.createElement("div", { key: "message", className: "text-sm mt-1" }, escapeHtml3(error))
+    ]
+  );
+}
+function EmptyState() {
+  return React6.createElement(
+    "div",
+    {
+      className: "frontmcp-empty text-gray-500 text-center py-8"
+    },
+    "No content to display"
+  );
+}
+function UniversalRenderer({
+  content,
+  state
+}) {
+  const components = useComponents();
+  const context = {
+    output: state.output,
+    input: state.input,
+    components: {
+      ...components,
+      ...content.components
+    },
+    state
+  };
+  const rendered = renderContent(content, context);
+  return React6.createElement("div", { className: "frontmcp-content" }, rendered);
+}
+function UniversalApp({
+  content: contentOverride,
+  components,
+  fallback,
+  errorFallback: ErrorFallback = ErrorDisplay
+}) {
+  const state = useFrontMCPStore();
+  if (state.loading) {
+    return fallback ? React6.createElement(React6.Fragment, null, fallback) : React6.createElement(LoadingSpinner, null);
+  }
+  if (state.error) {
+    return React6.createElement(ErrorFallback, { error: state.error });
+  }
+  const content = contentOverride ?? state.content;
+  if (!content) {
+    return React6.createElement(EmptyState, null);
+  }
+  if (components) {
+    return React6.createElement(
+      ComponentsProvider,
+      { components },
+      React6.createElement(UniversalRenderer, { content, state })
+    );
+  }
+  return React6.createElement(UniversalRenderer, { content, state });
+}
+function UniversalAppWithProvider({
+  initialState,
+  components,
+  ...appProps
+}) {
+  return React6.createElement(
+    FrontMCPProvider,
+    { initialState },
+    components ? React6.createElement(ComponentsProvider, { components }, React6.createElement(UniversalApp, appProps)) : React6.createElement(UniversalApp, appProps)
+  );
+}
+
+// libs/ui/src/universal/runtime-builder.ts
+function buildStoreRuntime() {
+  return `
+// FrontMCP Store
+(function() {
+  var state = {
+    toolName: null,
+    input: null,
+    output: null,
+    content: null,
+    structuredContent: null,
+    loading: false,
+    error: null
+  };
+
+  var listeners = new Set();
+
+  window.__frontmcp = {
+    // Store methods
+    getState: function() { return state; },
+    setState: function(partial) {
+      state = Object.assign({}, state, partial);
+      listeners.forEach(function(fn) { fn(); });
+    },
+    subscribe: function(fn) {
+      listeners.add(fn);
+      return function() { listeners.delete(fn); };
+    },
+    reset: function() {
+      state = {
+        toolName: null,
+        input: null,
+        output: null,
+        content: null,
+        structuredContent: null,
+        loading: false,
+        error: null
+      };
+    },
+
+    // Context (legacy support)
+    context: state,
+    setContext: function(ctx) {
+      this.setState(ctx);
+    }
+  };
+
+  // Hooks for React components
+  window.useFrontMCPStore = function() {
+    var store = window.__frontmcp;
+    return React.useSyncExternalStore(
+      store.subscribe,
+      store.getState,
+      store.getState
+    );
+  };
+
+  window.useToolOutput = function() {
+    return window.useFrontMCPStore().output;
+  };
+
+  window.useToolInput = function() {
+    return window.useFrontMCPStore().input;
+  };
+
+  window.useContent = function() {
+    return window.useFrontMCPStore().content;
+  };
+})();
+`;
+}
+function buildInlineMarkdownParser(options) {
+  const allowUnsafeLinks = options?.contentSecurity?.bypassSanitization || options?.contentSecurity?.allowUnsafeLinks;
+  return `
+// Inline Markdown Parser
+(function() {
+  // XSS protection settings (configured at build time)
+  var __allowUnsafeLinks = ${allowUnsafeLinks ? "true" : "false"};
+
+  // URL scheme validation to prevent XSS via javascript: URLs
+  function isSafeUrl(url) {
+    // If unsafe links are allowed, all URLs are considered safe
+    if (__allowUnsafeLinks) return true;
+    if (!url) return false;
+    var lower = url.toLowerCase().trim();
+    return lower.startsWith('http://') ||
+           lower.startsWith('https://') ||
+           lower.startsWith('/') ||
+           lower.startsWith('#') ||
+           lower.startsWith('mailto:');
+  }
+
+  function parseMarkdown(md) {
+    var html = md;
+    // Escape HTML
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    // Headers
+    html = html.replace(/^######\\s+(.*)$/gm, '<h6>$1</h6>');
+    html = html.replace(/^#####\\s+(.*)$/gm, '<h5>$1</h5>');
+    html = html.replace(/^####\\s+(.*)$/gm, '<h4>$1</h4>');
+    html = html.replace(/^###\\s+(.*)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^##\\s+(.*)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^#\\s+(.*)$/gm, '<h1>$1</h1>');
+    // Bold and italic
+    html = html.replace(/\\*\\*\\*(.+?)\\*\\*\\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+    html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');
+    // Inline code
+    html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+    // Links - validate URL scheme to prevent XSS (unless bypassed)
+    html = html.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, function(match, text, url) {
+      return isSafeUrl(url) ? '<a href="' + url + '">' + text + '</a>' : text;
+    });
+    // Lists
+    html = html.replace(/^[-*]\\s+(.*)$/gm, '<li>$1</li>');
+    // Paragraphs
+    html = html.replace(/\\n\\n+/g, '</p><p>');
+    html = '<p>' + html + '</p>';
+    return html;
+  }
+
+  window.__frontmcp.parseMarkdown = parseMarkdown;
+
+  // Simple ReactMarkdown replacement
+  window.ReactMarkdown = function(props) {
+    var html = parseMarkdown(props.children || '');
+    return React.createElement('div', {
+      className: 'frontmcp-markdown prose',
+      dangerouslySetInnerHTML: { __html: html }
+    });
+  };
+})();
+`;
+}
+function buildRenderersRuntime(options) {
+  const bypassSanitization = options?.contentSecurity?.bypassSanitization;
+  const allowInlineScripts = bypassSanitization || options?.contentSecurity?.allowInlineScripts;
+  return `
+// Universal Renderers
+(function() {
+  var renderers = {};
+
+  // XSS protection settings (configured at build time)
+  var __allowInlineScripts = ${allowInlineScripts ? "true" : "false"};
+
+  // HTML Renderer
+  renderers.html = {
+    type: 'html',
+    priority: 0,
+    canHandle: function(c) { return c.type === 'html'; },
+    render: function(c, ctx) {
+      var html = c.source;
+      // Apply XSS protection unless bypassed
+      if (!__allowInlineScripts) {
+        // Remove script tags and event handlers
+        html = html.replace(/<script[^>]*>[\\s\\S]*?<\\/script>/gi, '');
+        html = html.replace(/\\s+on\\w+\\s*=/gi, ' data-removed-handler=');
+      }
+      return React.createElement('div', {
+        className: 'frontmcp-html-content',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  // Markdown Renderer
+  renderers.markdown = {
+    type: 'markdown',
+    priority: 10,
+    canHandle: function(c) {
+      if (c.type === 'markdown') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /^#{1,6}\\s/m.test(s) || /^[-*]\\s/m.test(s) || /\\*\\*[^*]+\\*\\*/.test(s);
+    },
+    render: function(c, ctx) {
+      if (window.ReactMarkdown) {
+        return React.createElement(window.ReactMarkdown, {
+          children: c.source,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      // Fallback to inline parser
+      var html = window.__frontmcp.parseMarkdown ? window.__frontmcp.parseMarkdown(c.source) : c.source;
+      return React.createElement('div', {
+        className: 'frontmcp-markdown prose',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  // React Renderer
+  renderers.react = {
+    type: 'react',
+    priority: 30,
+    canHandle: function(c) { return c.type === 'react' || typeof c.source === 'function'; },
+    render: function(c, ctx) {
+      var Component = c.source;
+      var props = Object.assign({
+        output: ctx.output,
+        input: ctx.input,
+        state: ctx.state
+      }, c.props);
+      return React.createElement(Component, props);
+    }
+  };
+
+  // MDX Renderer
+  renderers.mdx = {
+    type: 'mdx',
+    priority: 20,
+    canHandle: function(c) {
+      if (c.type === 'mdx') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /<[A-Z][a-zA-Z]*/.test(s) && /^#{1,6}\\s/m.test(s);
+    },
+    render: function(c, ctx) {
+      // MDX requires pre-compilation, fallback to showing source
+      if (typeof c.compiledContent === 'function') {
+        var MDXContent = c.compiledContent;
+        return React.createElement(MDXContent, {
+          output: ctx.output,
+          input: ctx.input,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      // Show warning
+      return React.createElement('div', { className: 'frontmcp-mdx-fallback' }, [
+        React.createElement('div', {
+          key: 'warn',
+          className: 'bg-yellow-50 border border-yellow-200 rounded p-2 mb-2 text-sm text-yellow-800'
+        }, 'MDX requires pre-compilation. Showing raw content.'),
+        React.createElement('pre', {
+          key: 'pre',
+          className: 'bg-gray-100 p-4 rounded text-sm overflow-auto'
+        }, c.source)
+      ]);
+    }
+  };
+
+  // Sorted by priority
+  var sortedRenderers = [renderers.react, renderers.mdx, renderers.markdown, renderers.html];
+
+  // Detect renderer
+  window.__frontmcp.detectRenderer = function(content) {
+    if (content.type && renderers[content.type]) {
+      return renderers[content.type];
+    }
+    for (var i = 0; i < sortedRenderers.length; i++) {
+      if (sortedRenderers[i].canHandle(content)) {
+        return sortedRenderers[i];
+      }
+    }
+    return renderers.html;
+  };
+
+  // Render content
+  window.__frontmcp.renderContent = function(content, context) {
+    var renderer = window.__frontmcp.detectRenderer(content);
+    return renderer.render(content, context);
+  };
+
+  window.__frontmcp.renderers = renderers;
+})();
+`;
+}
+function buildUniversalAppRuntime() {
+  return `
+// Universal App Component
+(function() {
+  var LoadingSpinner = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-loading flex items-center justify-center min-h-[200px]'
+    }, React.createElement('div', {
+      className: 'frontmcp-spinner w-6 h-6 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin'
+    }));
+  };
+
+  var ErrorDisplay = function(props) {
+    return React.createElement('div', {
+      className: 'frontmcp-error bg-red-50 border border-red-200 rounded-lg p-4 text-red-800'
+    }, [
+      React.createElement('div', { key: 'title', className: 'font-medium' }, 'Error'),
+      React.createElement('div', { key: 'msg', className: 'text-sm mt-1' }, props.error)
+    ]);
+  };
+
+  var EmptyState = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-empty text-gray-500 text-center py-8'
+    }, 'No content to display');
+  };
+
+  window.__frontmcp.UniversalApp = function(props) {
+    var state = window.useFrontMCPStore();
+
+    if (state.loading) {
+      return props.fallback || React.createElement(LoadingSpinner);
+    }
+
+    if (state.error) {
+      var ErrorComp = props.errorFallback || ErrorDisplay;
+      return React.createElement(ErrorComp, { error: state.error });
+    }
+
+    var content = props.content || state.content;
+
+    if (!content) {
+      return React.createElement(EmptyState);
+    }
+
+    var context = {
+      output: state.output,
+      input: state.input,
+      state: state,
+      components: props.components || {}
+    };
+
+    var rendered = window.__frontmcp.renderContent(content, context);
+    return React.createElement('div', { className: 'frontmcp-content' }, rendered);
+  };
+
+  window.__frontmcp.LoadingSpinner = LoadingSpinner;
+  window.__frontmcp.ErrorDisplay = ErrorDisplay;
+  window.__frontmcp.EmptyState = EmptyState;
+})();
+`;
+}
+function buildCdnImports(options) {
+  const parts = [];
+  if (options.cdnType === "esm") {
+    if (options.includeMarkdown) {
+      parts.push(`
+    <script type="module">
+      import ReactMarkdown from '${UNIVERSAL_CDN.esm.reactMarkdown}';
+      window.ReactMarkdown = ReactMarkdown;
+    </script>`);
+    }
+    if (options.includeMdx) {
+      parts.push(`
+    <script type="module">
+      import { MDXProvider } from '${UNIVERSAL_CDN.esm.mdxReact}';
+      window.MDXProvider = MDXProvider;
+    </script>`);
+    }
+  }
+  return parts.join("\n");
+}
+function buildUniversalRuntime(options) {
+  const parts = [];
+  parts.push(buildStoreRuntime());
+  if (options.cdnType === "umd" || options.includeMarkdown) {
+    parts.push(buildInlineMarkdownParser(options));
+  }
+  parts.push(buildRenderersRuntime(options));
+  parts.push(buildUniversalAppRuntime());
+  if (options.customComponents) {
+    parts.push(`
+// Custom Components
+(function() {
+  ${options.customComponents}
+})();
+`);
+  }
+  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();
+  }
+  return {
+    script,
+    cdnImports: buildCdnImports(options),
+    size: script.length
+  };
+}
+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();
+  }
+  return script;
+}
+
+// libs/ui/src/universal/cached-runtime.ts
+var RUNTIME_PLACEHOLDERS = {
+  /** Placeholder for transpiled component code */
+  COMPONENT_CODE: "/*__FRONTMCP_COMPONENT_CODE__*/",
+  /** Placeholder for data injection */
+  DATA_INJECTION: "/*__FRONTMCP_DATA_INJECTION__*/",
+  /** Placeholder for custom components */
+  CUSTOM_COMPONENTS: "/*__FRONTMCP_CUSTOM_COMPONENTS__*/"
+};
+var runtimeCache = /* @__PURE__ */ new Map();
+var DEFAULT_CACHE_CONFIG = {
+  maxEntries: 10,
+  ttl: 0
+  // Forever by default
+};
+function generateCacheKey(options) {
+  const securityKey = options.contentSecurity ? [
+    options.contentSecurity.allowUnsafeLinks ? "unsafeLinks" : "",
+    options.contentSecurity.allowInlineScripts ? "unsafeScripts" : "",
+    options.contentSecurity.bypassSanitization ? "bypass" : ""
+  ].filter(Boolean).join("+") || "secure" : "secure";
+  return [
+    options.cdnType,
+    options.includeMarkdown ? "md" : "",
+    options.includeMdx ? "mdx" : "",
+    options.minify ? "min" : "",
+    securityKey
+  ].filter(Boolean).join(":");
+}
+function buildStoreRuntime2() {
+  return `
+// FrontMCP Store (Vendor)
+(function() {
+  var state = {
+    toolName: null,
+    input: null,
+    output: null,
+    content: null,
+    structuredContent: null,
+    loading: false,
+    error: null
+  };
+
+  var listeners = new Set();
+
+  window.__frontmcp = {
+    getState: function() { return state; },
+    setState: function(partial) {
+      state = Object.assign({}, state, partial);
+      listeners.forEach(function(fn) { fn(); });
+    },
+    subscribe: function(fn) {
+      listeners.add(fn);
+      return function() { listeners.delete(fn); };
+    },
+    reset: function() {
+      state = {
+        toolName: null,
+        input: null,
+        output: null,
+        content: null,
+        structuredContent: null,
+        loading: false,
+        error: null
+      };
+    },
+    context: state,
+    setContext: function(ctx) {
+      this.setState(ctx);
+    }
+  };
+
+  // React hooks
+  window.useFrontMCPStore = function() {
+    var store = window.__frontmcp;
+    return React.useSyncExternalStore(
+      store.subscribe,
+      store.getState,
+      store.getState
+    );
+  };
+
+  window.useToolOutput = function() {
+    return window.useFrontMCPStore().output;
+  };
+
+  window.useToolInput = function() {
+    return window.useFrontMCPStore().input;
+  };
+
+  window.useContent = function() {
+    return window.useFrontMCPStore().content;
+  };
+})();
+`;
+}
+function buildRequireShim() {
+  return `
+// Module Require Shim (Vendor)
+(function() {
+  window.__moduleCache = {};
+  window.require = function(moduleName) {
+    if (window.__moduleCache[moduleName]) {
+      return window.__moduleCache[moduleName];
+    }
+
+    var moduleMap = {
+      'react': function() { return window.React; },
+      'react-dom': function() { return window.ReactDOM; },
+      'react-dom/client': function() { return window.ReactDOM; },
+      'react/jsx-runtime': function() { return window.jsx_runtime_namespaceObject; },
+      'react/jsx-dev-runtime': function() { return window.jsx_runtime_namespaceObject; },
+      '@frontmcp/ui': function() { return window.frontmcp_ui_namespaceObject; },
+      '@frontmcp/ui/react': function() { return window.frontmcp_ui_namespaceObject; }
+    };
+
+    var resolver = moduleMap[moduleName];
+    if (resolver) {
+      var mod = resolver();
+      window.__moduleCache[moduleName] = mod;
+      return mod;
+    }
+
+    console.warn('[FrontMCP] Unknown module:', moduleName);
+    return {};
+  };
+})();
+`;
+}
+function buildInlineMarkdownParser2(options) {
+  const allowUnsafeLinks = options?.contentSecurity?.bypassSanitization || options?.contentSecurity?.allowUnsafeLinks;
+  return `
+// Inline Markdown Parser (Vendor)
+(function() {
+  // XSS protection settings (configured at build time)
+  // Set to true if contentSecurity.allowUnsafeLinks or bypassSanitization is enabled
+  var __allowUnsafeLinks = ${allowUnsafeLinks ? "true" : "false"};
+
+  // URL scheme validation to prevent XSS via javascript: URLs
+  function isSafeUrl(url) {
+    // If unsafe links are explicitly allowed, skip validation
+    if (__allowUnsafeLinks) return true;
+    if (!url) return false;
+    var lower = url.toLowerCase().trim();
+    return lower.startsWith('http://') ||
+           lower.startsWith('https://') ||
+           lower.startsWith('/') ||
+           lower.startsWith('#') ||
+           lower.startsWith('mailto:');
+  }
+
+  function parseMarkdown(md) {
+    var html = md;
+    html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    html = html.replace(/^######\\s+(.*)$/gm, '<h6>$1</h6>');
+    html = html.replace(/^#####\\s+(.*)$/gm, '<h5>$1</h5>');
+    html = html.replace(/^####\\s+(.*)$/gm, '<h4>$1</h4>');
+    html = html.replace(/^###\\s+(.*)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^##\\s+(.*)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^#\\s+(.*)$/gm, '<h1>$1</h1>');
+    html = html.replace(/\\*\\*\\*(.+?)\\*\\*\\*/g, '<strong><em>$1</em></strong>');
+    html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+    html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');
+    html = html.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+    // Links - validate URL scheme to prevent XSS (unless bypassed)
+    html = html.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, function(match, text, url) {
+      return isSafeUrl(url) ? '<a href="' + url + '">' + text + '</a>' : text;
+    });
+    html = html.replace(/^[-*]\\s+(.*)$/gm, '<li>$1</li>');
+    html = html.replace(/\\n\\n+/g, '</p><p>');
+    html = '<p>' + html + '</p>';
+    return html;
+  }
+
+  window.__frontmcp.parseMarkdown = parseMarkdown;
+
+  window.ReactMarkdown = function(props) {
+    var html = parseMarkdown(props.children || '');
+    return React.createElement('div', {
+      className: 'frontmcp-markdown prose',
+      dangerouslySetInnerHTML: { __html: html }
+    });
+  };
+})();
+`;
+}
+function buildRenderersRuntime2(options) {
+  const bypassSanitization = options?.contentSecurity?.bypassSanitization;
+  const allowInlineScripts = bypassSanitization || options?.contentSecurity?.allowInlineScripts;
+  return `
+// Universal Renderers (Vendor)
+(function() {
+  var renderers = {};
+
+  // XSS protection settings (configured at build time)
+  // Set to true if contentSecurity.allowInlineScripts or bypassSanitization is enabled
+  var __allowInlineScripts = ${allowInlineScripts ? "true" : "false"};
+
+  renderers.html = {
+    type: 'html',
+    priority: 0,
+    canHandle: function(c) { return c.type === 'html'; },
+    render: function(c, ctx) {
+      var html = c.source;
+      // Apply XSS protection unless bypassed
+      if (!__allowInlineScripts) {
+        // Remove script tags and event handlers to prevent XSS
+        html = html.replace(/<script[^>]*>[\\s\\S]*?<\\/script>/gi, '');
+        html = html.replace(/\\s+on\\w+\\s*=/gi, ' data-removed-handler=');
+      }
+      return React.createElement('div', {
+        className: 'frontmcp-html-content',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  renderers.markdown = {
+    type: 'markdown',
+    priority: 10,
+    canHandle: function(c) {
+      if (c.type === 'markdown') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /^#{1,6}\\s/m.test(s) || /^[-*]\\s/m.test(s) || /\\*\\*[^*]+\\*\\*/.test(s);
+    },
+    render: function(c, ctx) {
+      if (window.ReactMarkdown) {
+        return React.createElement(window.ReactMarkdown, {
+          children: c.source,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      var html = window.__frontmcp.parseMarkdown ? window.__frontmcp.parseMarkdown(c.source) : c.source;
+      return React.createElement('div', {
+        className: 'frontmcp-markdown prose',
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    }
+  };
+
+  renderers.react = {
+    type: 'react',
+    priority: 30,
+    canHandle: function(c) { return c.type === 'react' || typeof c.source === 'function'; },
+    render: function(c, ctx) {
+      var Component = c.source;
+      var props = Object.assign({
+        output: ctx.output,
+        input: ctx.input,
+        state: ctx.state,
+        data: ctx.output // Alias for convenience
+      }, c.props);
+      return React.createElement(Component, props);
+    }
+  };
+
+  renderers.mdx = {
+    type: 'mdx',
+    priority: 20,
+    canHandle: function(c) {
+      if (c.type === 'mdx') return true;
+      if (typeof c.source !== 'string') return false;
+      var s = c.source;
+      return /<[A-Z][a-zA-Z]*/.test(s) && /^#{1,6}\\s/m.test(s);
+    },
+    render: function(c, ctx) {
+      if (typeof c.compiledContent === 'function') {
+        var MDXContent = c.compiledContent;
+        return React.createElement(MDXContent, {
+          output: ctx.output,
+          input: ctx.input,
+          components: Object.assign({}, ctx.components, c.components)
+        });
+      }
+      return React.createElement('div', { className: 'frontmcp-mdx-fallback' }, [
+        React.createElement('div', {
+          key: 'warn',
+          className: 'bg-yellow-50 border border-yellow-200 rounded p-2 mb-2 text-sm text-yellow-800'
+        }, 'MDX requires pre-compilation. Showing raw content.'),
+        React.createElement('pre', {
+          key: 'pre',
+          className: 'bg-gray-100 p-4 rounded text-sm overflow-auto'
+        }, c.source)
+      ]);
+    }
+  };
+
+  var sortedRenderers = [renderers.react, renderers.mdx, renderers.markdown, renderers.html];
+
+  window.__frontmcp.detectRenderer = function(content) {
+    if (content.type && renderers[content.type]) {
+      return renderers[content.type];
+    }
+    for (var i = 0; i < sortedRenderers.length; i++) {
+      if (sortedRenderers[i].canHandle(content)) {
+        return sortedRenderers[i];
+      }
+    }
+    return renderers.html;
+  };
+
+  window.__frontmcp.renderContent = function(content, context) {
+    var renderer = window.__frontmcp.detectRenderer(content);
+    return renderer.render(content, context);
+  };
+
+  window.__frontmcp.renderers = renderers;
+})();
+`;
+}
+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
+  });
+})();
+`;
+}
+function buildUniversalAppRuntime2() {
+  return `
+// Universal App (Vendor)
+(function() {
+  var LoadingSpinner = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-loading flex items-center justify-center min-h-[200px]'
+    }, React.createElement('div', {
+      className: 'frontmcp-spinner w-6 h-6 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin'
+    }));
+  };
+
+  var ErrorDisplay = function(props) {
+    return React.createElement('div', {
+      className: 'frontmcp-error bg-red-50 border border-red-200 rounded-lg p-4 text-red-800'
+    }, [
+      React.createElement('div', { key: 'title', className: 'font-medium' }, 'Error'),
+      React.createElement('div', { key: 'msg', className: 'text-sm mt-1' }, props.error)
+    ]);
+  };
+
+  var EmptyState = function() {
+    return React.createElement('div', {
+      className: 'frontmcp-empty text-gray-500 text-center py-8'
+    }, 'No content to display');
+  };
+
+  window.__frontmcp.UniversalApp = function(props) {
+    var state = window.useFrontMCPStore();
+
+    if (state.loading) {
+      return props.fallback || React.createElement(LoadingSpinner);
+    }
+
+    if (state.error) {
+      var ErrorComp = props.errorFallback || ErrorDisplay;
+      return React.createElement(ErrorComp, { error: state.error });
+    }
+
+    var content = props.content || state.content;
+
+    if (!content) {
+      return React.createElement(EmptyState);
+    }
+
+    var context = {
+      output: state.output,
+      input: state.input,
+      state: state,
+      components: props.components || {}
+    };
+
+    var rendered = window.__frontmcp.renderContent(content, context);
+    return React.createElement('div', { className: 'frontmcp-content' }, rendered);
+  };
+
+  window.__frontmcp.LoadingSpinner = LoadingSpinner;
+  window.__frontmcp.ErrorDisplay = ErrorDisplay;
+  window.__frontmcp.EmptyState = EmptyState;
+})();
+`;
+}
+function buildComponentWrapper() {
+  return `
+// Component Execution (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.COMPONENT_CODE}
+})();
+`;
+}
+function buildDataInjectionWrapper() {
+  return `
+// Data Injection (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.DATA_INJECTION}
+})();
+`;
+}
+function buildCustomComponentsWrapper() {
+  return `
+// Custom Components (App Chunk)
+(function() {
+  ${RUNTIME_PLACEHOLDERS.CUSTOM_COMPONENTS}
+})();
+`;
+}
+function buildCdnImports2(options) {
+  const parts = [];
+  if (options.cdnType === "esm") {
+    if (options.includeMarkdown) {
+      parts.push(`
+    <script type="module">
+      import ReactMarkdown from '${UNIVERSAL_CDN.esm.reactMarkdown}';
+      window.ReactMarkdown = ReactMarkdown;
+    </script>`);
+    }
+    if (options.includeMdx) {
+      parts.push(`
+    <script type="module">
+      import { MDXProvider } from '${UNIVERSAL_CDN.esm.mdxReact}';
+      window.MDXProvider = MDXProvider;
+    </script>`);
+    }
+  }
+  return parts.join("\n");
+}
+function getCachedRuntime(options, config = {}) {
+  const cacheKey = generateCacheKey(options);
+  const cacheConfig = { ...DEFAULT_CACHE_CONFIG, ...config };
+  const cached = runtimeCache.get(cacheKey);
+  if (cached) {
+    if (cacheConfig.ttl === 0 || Date.now() - cached.cachedAt < cacheConfig.ttl) {
+      return {
+        vendorScript: cached.script,
+        appTemplate: buildAppTemplate(),
+        cdnImports: cached.cdnImports,
+        vendorSize: cached.size,
+        cached: true,
+        cacheKey
+      };
+    }
+    runtimeCache.delete(cacheKey);
+  }
+  const vendorParts = [buildStoreRuntime2(), buildRequireShim()];
+  if (options.cdnType === "umd" || options.includeMarkdown) {
+    vendorParts.push(buildInlineMarkdownParser2(options));
+  }
+  vendorParts.push(buildRenderersRuntime2(options));
+  vendorParts.push(buildUIComponentsRuntime());
+  vendorParts.push(buildUniversalAppRuntime2());
+  let vendorScript = vendorParts.join("\n");
+  if (options.minify) {
+    vendorScript = minifyScript(vendorScript);
+  }
+  const cdnImports = buildCdnImports2(options);
+  const entry = {
+    script: vendorScript,
+    cdnImports,
+    size: vendorScript.length,
+    cacheKey,
+    cachedAt: Date.now()
+  };
+  if (runtimeCache.size >= cacheConfig.maxEntries) {
+    const oldestKey = runtimeCache.keys().next().value;
+    if (oldestKey) {
+      runtimeCache.delete(oldestKey);
+    }
+  }
+  runtimeCache.set(cacheKey, entry);
+  return {
+    vendorScript,
+    appTemplate: buildAppTemplate(),
+    cdnImports,
+    vendorSize: vendorScript.length,
+    cached: false,
+    cacheKey
+  };
+}
+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();
+}
+function clearRuntimeCache() {
+  runtimeCache.clear();
+}
+function getRuntimeCacheStats() {
+  let totalSize = 0;
+  const keys = [];
+  for (const [key, entry] of runtimeCache) {
+    keys.push(key);
+    totalSize += entry.size;
+  }
+  return {
+    entries: runtimeCache.size,
+    totalSize,
+    keys
+  };
+}
+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) {
+  const safeJson = (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "null";
+    }
+  };
+  if (hasComponent) {
+    return `
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    content: {
+      type: 'react',
+      source: window.__frontmcp_component
+    },
+    loading: false,
+    error: null
+  });`;
+  }
+  return `
+  window.__frontmcp.setState({
+    toolName: ${safeJson(toolName)},
+    input: ${safeJson(input ?? null)},
+    output: ${safeJson(output ?? null)},
+    structuredContent: ${safeJson(structuredContent ?? null)},
+    content: {
+      type: ${safeJson(contentType)},
+      source: ${safeJson(source)}
+    },
+    loading: false,
+    error: null
+  });`;
+}
+function buildComponentCode(transpiledCode) {
+  return `
+  // CommonJS module shim
+  var module = { exports: {} };
+  var exports = module.exports;
+
+  // Execute transpiled component
+  ${transpiledCode}
+
+  // Capture component
+  window.__frontmcp_component = module.exports.default || module.exports;`;
+}
+export {
+  ComponentsProvider,
+  DEFAULT_FRONTMCP_STATE,
+  EmptyState,
+  ErrorDisplay,
+  FrontMCPProvider,
+  LoadingSpinner,
+  RUNTIME_PLACEHOLDERS,
+  RendererRegistry,
+  UNIVERSAL_CDN,
+  UniversalApp,
+  UniversalAppWithProvider,
+  UniversalProvider,
+  buildAppScript,
+  buildComponentCode,
+  buildDataInjectionCode,
+  buildMinimalRuntime,
+  buildUniversalRuntime,
+  clearRuntimeCache,
+  createContent,
+  createFrontMCPStore,
+  createMarkdownRenderer,
+  createMdxRenderer,
+  createStoreSelector,
+  detectContentType,
+  detectRenderer,
+  getCachedRuntime,
+  getGlobalStore,
+  getRuntimeCacheStats,
+  htmlRenderer,
+  initializeStoreFromWindow,
+  isMdxSupported,
+  isReactComponent,
+  markdownRenderer,
+  mdxRenderer,
+  reactRenderer,
+  renderContent,
+  rendererRegistry,
+  resetGlobalStore,
+  safeHtmlRenderer,
+  setGlobalStore,
+  useComponents,
+  useContent,
+  useFrontMCPContext,
+  useFrontMCPContextSafe,
+  useFrontMCPStore,
+  useLoadingState,
+  useToolInput,
+  useToolName,
+  useToolOutput,
+  withFrontMCP
+};