@frontmcp/ui 0.5.1 → 0.6.1

package/renderers/index.js

@@ -0,0 +1,416 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// libs/ui/src/renderers/index.ts
+var renderers_exports = {};
+__export(renderers_exports, {
+  ReactRenderer: () => ReactRenderer,
+  ReactRendererAdapter: () => ReactRendererAdapter,
+  buildHydrationScript: () => buildHydrationScript,
+  createReactAdapter: () => createReactAdapter,
+  loadReactAdapter: () => loadReactAdapter,
+  reactRenderer: () => reactRenderer
+});
+module.exports = __toCommonJS(renderers_exports);
+
+// libs/ui/src/renderers/react.renderer.ts
+var import_renderers = require("@frontmcp/uipack/renderers");
+var REACT_CDN = {
+  react: "https://esm.sh/react@19",
+  reactDom: "https://esm.sh/react-dom@19/client"
+};
+var INLINE_REACT_PLACEHOLDER = `
+// React runtime not available inline yet.
+// For blocked-network platforms, use pre-rendered HTML templates.
+console.warn('[FrontMCP] React hydration not available on this platform.');
+`;
+var ReactRenderer = class {
+  type = "react";
+  priority = 20;
+  // Higher priority than HTML
+  /**
+   * Lazy-loaded React modules.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  React = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ReactDOMServer = null;
+  /**
+   * Check if this renderer can handle the given template.
+   *
+   * Accepts:
+   * - React component functions (imported, already transpiled)
+   * - Strings containing JSX syntax
+   */
+  canHandle(template) {
+    if (typeof template === "function" && (0, import_renderers.isReactComponent)(template)) {
+      return true;
+    }
+    if (typeof template === "string" && (0, import_renderers.containsJsx)(template)) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Transpile the template if needed.
+   *
+   * For imported React components, no transpilation is needed.
+   * For JSX strings, SWC transpilation is performed.
+   */
+  async transpile(template, options) {
+    if (typeof template === "function") {
+      const hash = (0, import_renderers.hashString)(template.toString());
+      return {
+        code: "",
+        // No transpiled code for already-compiled components
+        hash,
+        cached: true
+      };
+    }
+    if (typeof template === "string") {
+      return (0, import_renderers.transpileJsx)(template, {
+        development: options?.sourceMaps ?? false
+      });
+    }
+    throw new Error("Invalid template type for ReactRenderer");
+  }
+  /**
+   * Render the template to HTML string using react-dom/server.
+   */
+  async render(template, context, options) {
+    await this.loadReact();
+    let Component;
+    if (typeof template === "function") {
+      Component = template;
+    } else if (typeof template === "string") {
+      const transpiled = await this.transpile(template);
+      const cached = import_renderers.transpileCache.getByKey(`exec:${transpiled.hash}`);
+      if (cached) {
+        Component = cached.code;
+      } else {
+        Component = await (0, import_renderers.executeTranspiledCode)(transpiled.code, {
+          // Provide any additional MDX components if specified
+          ...options?.mdxComponents
+        });
+        import_renderers.transpileCache.setByKey(`exec:${transpiled.hash}`, {
+          code: Component,
+          hash: transpiled.hash,
+          cached: false
+        });
+      }
+    } else {
+      throw new Error("Invalid template type for ReactRenderer");
+    }
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const element = this.React.createElement(Component, props);
+    const html = this.ReactDOMServer.renderToString(element);
+    if (options?.hydrate) {
+      const componentName = Component.name || "Component";
+      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      return `<div data-hydrate="${componentName}" data-props='${escapedProps}'>${html}</div>`;
+    }
+    return html;
+  }
+  /**
+   * Get runtime scripts for client-side functionality.
+   */
+  getRuntimeScripts(platform) {
+    if (platform.networkMode === "blocked") {
+      return {
+        headScripts: "",
+        inlineScripts: INLINE_REACT_PLACEHOLDER,
+        isInline: true
+      };
+    }
+    return {
+      headScripts: `
+        <script crossorigin src="${REACT_CDN.react}"></script>
+        <script crossorigin src="${REACT_CDN.reactDom}"></script>
+      `,
+      isInline: false
+    };
+  }
+  /**
+   * Load React and ReactDOMServer modules.
+   */
+  async loadReact() {
+    if (this.React && this.ReactDOMServer) {
+      return;
+    }
+    try {
+      this.React = await import("react");
+      this.ReactDOMServer = await import("react-dom/server");
+    } catch {
+      throw new Error("React is required for ReactRenderer. Install react and react-dom: npm install react react-dom");
+    }
+  }
+};
+var reactRenderer = new ReactRenderer();
+function buildHydrationScript() {
+  return `
+<script>
+(function() {
+  // Wait for React to be available
+  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
+    console.warn('[FrontMCP] React not available for hydration');
+    return;
+  }
+
+  // Find all elements marked for hydration
+  document.querySelectorAll('[data-hydrate]').forEach(function(root) {
+    var componentName = root.getAttribute('data-hydrate');
+    var propsJson = root.getAttribute('data-props');
+    var props = propsJson ? JSON.parse(propsJson) : {};
+
+    // Look for the component in the global scope
+    if (window.__frontmcp_components && window.__frontmcp_components[componentName]) {
+      try {
+        ReactDOM.hydrateRoot(root, React.createElement(
+          window.__frontmcp_components[componentName],
+          props
+        ));
+      } catch (e) {
+        console.error('[FrontMCP] Hydration failed for', componentName, e);
+      }
+    }
+  });
+})();
+</script>
+`;
+}
+
+// libs/ui/src/renderers/react.adapter.ts
+var mountedRoots = /* @__PURE__ */ new WeakMap();
+var ReactRendererAdapter = class {
+  type = "react";
+  // Lazy-loaded React runtime
+  react = null;
+  reactDOM = null;
+  loadPromise = null;
+  /**
+   * Check if this adapter can handle the given content.
+   */
+  canHandle(content) {
+    if (typeof content === "function") {
+      return true;
+    }
+    if (typeof content === "string") {
+      return content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(") || /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*return\s*[\s\S]*</.test(content);
+    }
+    return false;
+  }
+  /**
+   * Render React component to a string.
+   * This is a client-side fallback - SSR should be done at build time.
+   */
+  async render(content, context, _options) {
+    return `<div data-frontmcp-react data-tool="${context.toolName}">${content}</div>`;
+  }
+  /**
+   * Render React component directly to the DOM.
+   */
+  async renderToDOM(content, target, context, options) {
+    try {
+      await this.ensureReactLoaded();
+      if (!this.react || !this.reactDOM) {
+        throw new Error("React runtime not available");
+      }
+      const componentName = target.getAttribute("data-component");
+      const component = this.getComponent(componentName, content);
+      if (!component) {
+        target.innerHTML = content;
+        return { success: true };
+      }
+      const element = this.react.createElement(component, {
+        input: context.input,
+        output: context.output,
+        structuredContent: context.structuredContent,
+        toolName: context.toolName
+      });
+      if (options?.hydrate && this.reactDOM.hydrateRoot) {
+        const root = this.reactDOM.hydrateRoot(target, element);
+        mountedRoots.set(target, root);
+      } else if (this.reactDOM.createRoot) {
+        const root = this.reactDOM.createRoot(target);
+        root.render(element);
+        mountedRoots.set(target, root);
+      } else if (this.reactDOM.render) {
+        this.reactDOM.render(element, target);
+        mountedRoots.set(target, {
+          unmount: () => this.reactDOM?.unmountComponentAtNode?.(target)
+        });
+      } else {
+        throw new Error("No suitable React render method available");
+      }
+      target.dispatchEvent(
+        new CustomEvent("frontmcp:rendered", {
+          bubbles: true,
+          detail: { type: "react", toolName: context.toolName }
+        })
+      );
+      return { success: true };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error("[FrontMCP] React render failed:", message);
+      return { success: false, error: message };
+    }
+  }
+  /**
+   * Hydrate existing SSR content with React.
+   */
+  async hydrate(target, context, options) {
+    return this.renderToDOM("", target, context, { ...options, hydrate: true });
+  }
+  /**
+   * Update rendered React component with new data.
+   */
+  async update(target, context) {
+    try {
+      await this.ensureReactLoaded();
+      if (!this.react) {
+        throw new Error("React runtime not available");
+      }
+      const existingRoot = mountedRoots.get(target);
+      const componentName = target.getAttribute("data-component");
+      const component = this.getComponent(componentName, "");
+      if (!component) {
+        return { success: false, error: "No component found for update" };
+      }
+      const element = this.react.createElement(component, {
+        input: context.input,
+        output: context.output,
+        structuredContent: context.structuredContent,
+        toolName: context.toolName
+      });
+      if (existingRoot && "render" in existingRoot) {
+        existingRoot.render(element);
+        return { success: true };
+      }
+      return this.renderToDOM("", target, context);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error("[FrontMCP] React update failed:", message);
+      return { success: false, error: message };
+    }
+  }
+  /**
+   * Clean up React root.
+   */
+  destroy(target) {
+    const root = mountedRoots.get(target);
+    if (root) {
+      root.unmount();
+      mountedRoots.delete(target);
+    }
+  }
+  /**
+   * Ensure React is loaded.
+   */
+  async ensureReactLoaded() {
+    if (this.react && this.reactDOM) {
+      return;
+    }
+    if (this.loadPromise) {
+      return this.loadPromise;
+    }
+    this.loadPromise = this.loadReact();
+    return this.loadPromise;
+  }
+  /**
+   * Load React runtime.
+   */
+  async loadReact() {
+    const win = typeof window !== "undefined" ? window : globalThis;
+    if (win.React) {
+      this.react = win.React;
+    }
+    if (win.ReactDOM) {
+      this.reactDOM = win.ReactDOM;
+    }
+    if (this.react && this.reactDOM) {
+      return;
+    }
+    try {
+      if (!this.react) {
+        const reactModule = await import(
+          /* webpackIgnore: true */
+          "react"
+        );
+        this.react = reactModule.default || reactModule;
+      }
+      if (!this.reactDOM) {
+        const reactDOMModule = await import(
+          /* webpackIgnore: true */
+          "react-dom/client"
+        );
+        this.reactDOM = reactDOMModule.default || reactDOMModule;
+      }
+    } catch {
+      if (!this.react || !this.reactDOM) {
+        console.warn("[FrontMCP] React runtime not available. Ensure React is loaded via CDN or bundled.");
+      }
+    }
+  }
+  /**
+   * Get a React component by name or from content.
+   */
+  getComponent(componentName, content) {
+    const win = typeof window !== "undefined" ? window : globalThis;
+    if (componentName && win.__frontmcp_components) {
+      const registered = win.__frontmcp_components?.[componentName];
+      if (registered) {
+        return registered;
+      }
+    }
+    if (content && typeof content === "function") {
+      return content;
+    }
+    return null;
+  }
+};
+function createReactAdapter() {
+  return new ReactRendererAdapter();
+}
+async function loadReactAdapter() {
+  return createReactAdapter();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactRenderer,
+  ReactRendererAdapter,
+  buildHydrationScript,
+  createReactAdapter,
+  loadReactAdapter,
+  reactRenderer
+});

package/renderers/react.adapter.d.ts

@@ -0,0 +1,70 @@
+/**
+ * React Renderer Adapter
+ *
+ * Client-side adapter for rendering React components.
+ * Handles hydration, client-side rendering, and updates.
+ *
+ * @packageDocumentation
+ */
+import type { RendererAdapter, RenderContext, RenderOptions, RenderResult } from '@frontmcp/uipack/runtime';
+import type { UIType } from '@frontmcp/uipack/types';
+/**
+ * React Renderer Adapter.
+ *
+ * Renders React components to the DOM with support for:
+ * - Server-side rendering (SSR)
+ * - Client-side hydration
+ * - Dynamic updates when data changes
+ */
+export declare class ReactRendererAdapter implements RendererAdapter {
+    readonly type: UIType;
+    private react;
+    private reactDOM;
+    private loadPromise;
+    /**
+     * Check if this adapter can handle the given content.
+     */
+    canHandle(content: string | unknown): boolean;
+    /**
+     * Render React component to a string.
+     * This is a client-side fallback - SSR should be done at build time.
+     */
+    render(content: string, context: RenderContext, _options?: RenderOptions): Promise<string>;
+    /**
+     * Render React component directly to the DOM.
+     */
+    renderToDOM(content: string, target: HTMLElement, context: RenderContext, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Hydrate existing SSR content with React.
+     */
+    hydrate(target: HTMLElement, context: RenderContext, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Update rendered React component with new data.
+     */
+    update(target: HTMLElement, context: RenderContext): Promise<RenderResult>;
+    /**
+     * Clean up React root.
+     */
+    destroy(target: HTMLElement): void;
+    /**
+     * Ensure React is loaded.
+     */
+    private ensureReactLoaded;
+    /**
+     * Load React runtime.
+     */
+    private loadReact;
+    /**
+     * Get a React component by name or from content.
+     */
+    private getComponent;
+}
+/**
+ * Create a new React renderer adapter.
+ */
+export declare function createReactAdapter(): ReactRendererAdapter;
+/**
+ * Adapter loader for lazy loading.
+ */
+export declare function loadReactAdapter(): Promise<RendererAdapter>;
+//# sourceMappingURL=react.adapter.d.ts.map

package/renderers/react.adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.adapter.d.ts","sourceRoot":"","sources":["../../src/renderers/react.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC5G,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAsDrD;;;;;;;GAOG;AACH,qBAAa,oBAAqB,YAAW,eAAe;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAW;IAGhC,OAAO,CAAC,KAAK,CAA6B;IAC1C,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,WAAW,CAA8B;IAEjD;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO;IAqB7C;;;OAGG;IACG,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;IAMhG;;OAEG;IACG,WAAW,CACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,YAAY,CAAC;IA4DxB;;OAEG;IACG,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAI1G;;OAEG;IACG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAsChF;;OAEG;IACH,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAQlC;;OAEG;YACW,iBAAiB;IAa/B;;OAEG;YACW,SAAS;IAmCvB;;OAEG;IACH,OAAO,CAAC,YAAY;CAsBrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED;;GAEG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,eAAe,CAAC,CAEjE"}

package/renderers/react.renderer.d.ts

@@ -0,0 +1,96 @@
+/**
+ * React Renderer
+ *
+ * Handles React component templates:
+ * - Imported React components (already transpiled)
+ * - JSX string templates (transpiled at runtime with SWC)
+ *
+ * Uses react-dom/server for SSR to HTML.
+ */
+import type { TemplateContext } from '@frontmcp/uipack/runtime';
+import type { PlatformCapabilities } from '@frontmcp/uipack/theme';
+import type { UIRenderer, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts, ToolUIProps } from '@frontmcp/uipack/renderers';
+/**
+ * Types this renderer can handle.
+ */
+type ReactTemplate<In = unknown, Out = unknown> = ((props: ToolUIProps<In, Out>) => unknown) | string;
+/**
+ * React Renderer Implementation.
+ *
+ * Handles:
+ * - Imported React components (FC or class)
+ * - JSX string templates (transpiled with SWC at runtime)
+ *
+ * Renders to HTML using react-dom/server's renderToString.
+ *
+ * @example Imported component
+ * ```typescript
+ * import { MyWidget } from './my-widget.tsx';
+ *
+ * @Tool({
+ *   ui: { template: MyWidget }
+ * })
+ * ```
+ *
+ * @example JSX string (runtime transpilation)
+ * ```typescript
+ * @Tool({
+ *   ui: {
+ *     template: `
+ *       function Widget({ output }) {
+ *         return <div>{output.name}</div>;
+ *       }
+ *     `
+ *   }
+ * })
+ * ```
+ */
+export declare class ReactRenderer implements UIRenderer<ReactTemplate> {
+    readonly type: "react";
+    readonly priority = 20;
+    /**
+     * Lazy-loaded React modules.
+     */
+    private React;
+    private ReactDOMServer;
+    /**
+     * Check if this renderer can handle the given template.
+     *
+     * Accepts:
+     * - React component functions (imported, already transpiled)
+     * - Strings containing JSX syntax
+     */
+    canHandle(template: unknown): template is ReactTemplate;
+    /**
+     * Transpile the template if needed.
+     *
+     * For imported React components, no transpilation is needed.
+     * For JSX strings, SWC transpilation is performed.
+     */
+    transpile(template: ReactTemplate, options?: TranspileOptions): Promise<TranspileResult>;
+    /**
+     * Render the template to HTML string using react-dom/server.
+     */
+    render<In, Out>(template: ReactTemplate<In, Out>, context: TemplateContext<In, Out>, options?: RenderOptions): Promise<string>;
+    /**
+     * Get runtime scripts for client-side functionality.
+     */
+    getRuntimeScripts(platform: PlatformCapabilities): RuntimeScripts;
+    /**
+     * Load React and ReactDOMServer modules.
+     */
+    private loadReact;
+}
+/**
+ * Singleton instance of the React renderer.
+ */
+export declare const reactRenderer: ReactRenderer;
+/**
+ * Build React hydration script for client-side interactivity.
+ *
+ * This script finds elements with data-hydrate attributes and
+ * hydrates them with the corresponding React component.
+ */
+export declare function buildHydrationScript(): string;
+export {};
+//# sourceMappingURL=react.renderer.d.ts.map

package/renderers/react.renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/react.renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAUpC;;GAEG;AACH,KAAK,aAAa,CAAC,EAAE,GAAG,OAAO,EAAE,GAAG,GAAG,OAAO,IAC1C,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,GAC1C,MAAM,CAAC;AAqBX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,aAAc,YAAW,UAAU,CAAC,aAAa,CAAC;IAC7D,QAAQ,CAAC,IAAI,EAAG,OAAO,CAAU;IACjC,QAAQ,CAAC,QAAQ,MAAM;IAEvB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAa;IAE1B,OAAO,CAAC,cAAc,CAAa;IAEnC;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,IAAI,aAAa;IAcvD;;;;;OAKG;IACG,SAAS,CAAC,QAAQ,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC;IAsB9F;;OAEG;IACG,MAAM,CAAC,EAAE,EAAE,GAAG,EAClB,QAAQ,EAAE,aAAa,CAAC,EAAE,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,MAAM,CAAC;IAkElB;;OAEG;IACH,iBAAiB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,cAAc;IAoBjE;;OAEG;YACW,SAAS;CAYxB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,eAAsB,CAAC;AAEjD;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CA+B7C"}

package/universal/UniversalApp.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Universal App Component
+ *
+ * Main entry point for the universal renderer.
+ * Handles loading states, error boundaries, and auto-detection.
+ */
+import React from 'react';
+import type { UniversalAppProps, FrontMCPState } from './types';
+/**
+ * Default loading spinner component.
+ */
+declare function LoadingSpinner(): React.ReactElement;
+/**
+ * Default error display component.
+ */
+declare function ErrorDisplay({ error }: {
+    error: string;
+}): React.ReactElement;
+/**
+ * Default empty state component.
+ */
+declare function EmptyState(): React.ReactElement;
+/**
+ * Universal App component.
+ *
+ * Main entry point for the universal renderer. Handles:
+ * - Loading states
+ * - Error display
+ * - Content auto-detection
+ * - Custom component injection
+ *
+ * @example Basic usage
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <FrontMCPProvider>
+ *       <UniversalApp />
+ *     </FrontMCPProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom content
+ * ```tsx
+ * const content: UniversalContent = {
+ *   type: 'markdown',
+ *   source: '# Hello World',
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <FrontMCPProvider>
+ *       <UniversalApp content={content} />
+ *     </FrontMCPProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom components
+ * ```tsx
+ * const components = {
+ *   WeatherCard: ({ temp }) => <div>{temp}°F</div>,
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <FrontMCPProvider>
+ *       <UniversalApp components={components} />
+ *     </FrontMCPProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function UniversalApp({ content: contentOverride, components, fallback, errorFallback: ErrorFallback, }: UniversalAppProps): React.ReactElement;
+/**
+ * Props for the standalone UniversalAppWithProvider.
+ */
+interface StandaloneAppProps extends UniversalAppProps {
+    /** Initial store state */
+    initialState?: Partial<FrontMCPState>;
+}
+/**
+ * Standalone Universal App with built-in provider.
+ *
+ * Use this when you need a self-contained universal renderer
+ * without manually setting up the provider.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <UniversalAppWithProvider
+ *       initialState={{
+ *         toolName: 'get_weather',
+ *         output: { temperature: 72 },
+ *       }}
+ *       content={{
+ *         type: 'markdown',
+ *         source: '# Weather: {output.temperature}°F',
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function UniversalAppWithProvider({ initialState, components, ...appProps }: StandaloneAppProps): React.ReactElement;
+export { LoadingSpinner, ErrorDisplay, EmptyState };
+//# sourceMappingURL=UniversalApp.d.ts.map

package/universal/UniversalApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalApp.d.ts","sourceRoot":"","sources":["../../src/universal/UniversalApp.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAmC,aAAa,EAAE,MAAM,SAAS,CAAC;AAUjG;;GAEG;AACH,iBAAS,cAAc,IAAI,KAAK,CAAC,YAAY,CAQ5C;AAMD;;GAEG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAWtE;AAMD;;GAEG;AACH,iBAAS,UAAU,IAAI,KAAK,CAAC,YAAY,CAQxC;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EAAE,eAAe,EACxB,UAAU,EACV,QAAQ,EACR,aAAa,EAAE,aAA4B,GAC5C,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CA+BxC;AAMD;;GAEG;AACH,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,YAAY,EACZ,UAAU,EACV,GAAG,QAAQ,EACZ,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAQzC;AAMD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC"}