@frontmcp/ui 0.5.1 → 0.6.1

package/esm/react/types.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @file types.ts
+ * @description TypeScript types for React wrapper components.
+ *
+ * Re-exports element types from web-components for use with React refs,
+ * and defines React-specific prop interfaces.
+ *
+ * @module @frontmcp/ui/react/types
+ */
+import type { ReactNode } from 'react';
+import type { CardVariant, CardSize, BadgeVariant, BadgeSize } from '../components';
+export type { FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect } from '../web-components';
+/**
+ * React props for Card component
+ */
+export interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card subtitle/description */
+    subtitle?: string;
+    /** Header actions content */
+    headerActions?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card size (padding) */
+    size?: CardSize;
+    /** Additional CSS classes */
+    className?: string;
+    /** Card ID */
+    id?: string;
+    /** Clickable card (adds hover effects) */
+    clickable?: boolean;
+    /** Click handler URL */
+    href?: string;
+    /** Card content */
+    children: ReactNode;
+}
+/**
+ * React props for Badge component
+ */
+export interface BadgeProps {
+    /** Badge variant */
+    variant?: BadgeVariant;
+    /** Badge size */
+    size?: BadgeSize;
+    /** Rounded pill style */
+    pill?: boolean;
+    /** Icon before text (ReactNode) */
+    icon?: ReactNode;
+    /** Dot indicator (no text) */
+    dot?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Removable badge */
+    removable?: boolean;
+    /** Badge content */
+    children?: ReactNode;
+}
+/**
+ * React props for Button component
+ */
+export interface ButtonProps {
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success';
+    /** Button size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Icon position */
+    iconPosition?: 'left' | 'right';
+    /** Icon content */
+    icon?: ReactNode;
+    /** Button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Button content */
+    children: ReactNode;
+}
+/**
+ * React props for Alert component
+ */
+export interface AlertProps {
+    /** Alert variant */
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    /** Alert title */
+    title?: string;
+    /** Icon content */
+    icon?: ReactNode;
+    /** Dismissible */
+    dismissible?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Alert content */
+    children: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/esm/react/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react/types.ts"],"names":[],"mappings":"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"}

package/esm/react/utils.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @file utils.ts
+ * @description Utility functions for React wrapper components.
+ *
+ * Provides helpers for converting React children to HTML strings
+ * for SSR compatibility with FrontMCP web components.
+ *
+ * @module @frontmcp/ui/react/utils
+ */
+import type { ReactNode } from 'react';
+/**
+ * Convert React children to an HTML string for SSR.
+ *
+ * - Strings are escaped via escapeHtml()
+ * - Numbers are converted to strings
+ * - ReactNode is rendered via ReactDOMServer.renderToStaticMarkup()
+ * - null/undefined return empty string
+ *
+ * @param children - React children to convert
+ * @returns HTML string representation
+ *
+ * @example
+ * ```tsx
+ * // String children
+ * renderChildrenToString('Hello') // 'Hello' (escaped)
+ *
+ * // React element children
+ * renderChildrenToString(<div>Test</div>) // '<div>Test</div>'
+ *
+ * // Mixed children
+ * renderChildrenToString(['Hello', <span>World</span>])
+ * ```
+ */
+export declare function renderChildrenToString(children: ReactNode): string;
+/**
+ * Check if we're running in a browser environment
+ */
+export declare function isBrowser(): boolean;
+/**
+ * Check if we're running in a Node.js environment
+ */
+export declare function isServer(): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/esm/react/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/react/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAiClE;AAED;;GAEG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAElC"}

package/esm/render/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file render/index.ts
+ * @description React 19 static rendering utilities.
+ *
+ * @module @frontmcp/ui/render
+ */
+export { renderToString, renderToStringSync, isReactAvailable } from './prerender';
+//# sourceMappingURL=index.d.ts.map

package/esm/render/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/render/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}

package/esm/render/index.js

@@ -0,0 +1,45 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// libs/ui/src/render/prerender.ts
+async function renderToString(element) {
+  const { prerender } = await import("react-dom/static");
+  const { prelude } = await prerender(element);
+  const reader = prelude.getReader();
+  const chunks = [];
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    if (value) chunks.push(value);
+  }
+  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
+  const combined = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    combined.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return new TextDecoder().decode(combined);
+}
+function renderToStringSync(element) {
+  const ReactDOMServer = __require("react-dom/server");
+  return ReactDOMServer.renderToStaticMarkup(element);
+}
+function isReactAvailable() {
+  try {
+    __require("react");
+    __require("react-dom/server");
+    return true;
+  } catch {
+    return false;
+  }
+}
+export {
+  isReactAvailable,
+  renderToString,
+  renderToStringSync
+};

package/esm/render/prerender.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file prerender.ts
+ * @description React 19 static rendering utilities.
+ *
+ * Provides both async (prerender) and sync (renderToStaticMarkup) methods
+ * for converting React elements to HTML strings.
+ *
+ * @example Async rendering (recommended)
+ * ```typescript
+ * import { renderToString } from '@frontmcp/ui/render';
+ * import { Card } from '@frontmcp/ui/components';
+ *
+ * const html = await renderToString(<Card title="Hello">Content</Card>);
+ * ```
+ *
+ * @example Sync rendering (backwards compatible)
+ * ```typescript
+ * import { renderToStringSync } from '@frontmcp/ui/render';
+ *
+ * const html = renderToStringSync(<Card title="Hello">Content</Card>);
+ * ```
+ *
+ * @module @frontmcp/ui/render
+ */
+import type { ReactElement } from 'react';
+/**
+ * Render a React element to static HTML string using React 19's prerender API.
+ *
+ * This is the recommended async method that:
+ * - Waits for all Suspense boundaries to resolve
+ * - Uses React 19's streaming prerender API
+ * - Returns clean static HTML without hydration markers
+ *
+ * @param element - The React element to render
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderToString(element: ReactElement): Promise<string>;
+/**
+ * Render a React element to static HTML string synchronously.
+ *
+ * This is the sync method for backwards compatibility that:
+ * - Does NOT wait for Suspense boundaries
+ * - Uses React's renderToStaticMarkup
+ * - Returns clean static HTML without hydration markers
+ *
+ * @param element - The React element to render
+ * @returns HTML string
+ */
+export declare function renderToStringSync(element: ReactElement): string;
+/**
+ * Check if React and react-dom are available.
+ * Useful for conditional rendering in environments where React may not be installed.
+ *
+ * @returns true if React and react-dom are available
+ */
+export declare function isReactAvailable(): boolean;
+//# sourceMappingURL=prerender.d.ts.map

package/esm/render/prerender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prerender.d.ts","sourceRoot":"","sources":["../../../src/render/prerender.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;;;;;GAUG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CA0B3E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAKhE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAQ1C"}

package/esm/renderers/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * React Renderer Module
+ *
+ * Provides the React renderer for template processing.
+ * Other renderers (HTML, MDX) and utilities are available in @frontmcp/uipack.
+ *
+ * @module @frontmcp/ui/renderers
+ *
+ * @example
+ * ```typescript
+ * import { reactRenderer, ReactRenderer } from '@frontmcp/ui/renderers';
+ * import { rendererRegistry } from '@frontmcp/uipack/renderers';
+ *
+ * // Register React renderer
+ * rendererRegistry.register(reactRenderer);
+ * ```
+ */
+export type { RendererType, UIRenderer, ToolUIProps, HydratedToolUIProps, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts, RenderResult, RendererRegistryOptions, DetectionResult, ReactComponentType, WrapperContext, ExtendedToolUIConfig, } from '@frontmcp/uipack/renderers';
+export { ReactRenderer, reactRenderer, buildHydrationScript } from './react.renderer';
+export { ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './react.adapter';
+//# sourceMappingURL=index.d.ts.map

package/esm/renderers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderers/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/renderers/index.js

@@ -0,0 +1,381 @@
+// libs/ui/src/renderers/react.renderer.ts
+import {
+  isReactComponent,
+  containsJsx,
+  hashString,
+  transpileJsx,
+  executeTranspiledCode,
+  transpileCache
+} from "@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" && isReactComponent(template)) {
+      return true;
+    }
+    if (typeof template === "string" && 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 = hashString(template.toString());
+      return {
+        code: "",
+        // No transpiled code for already-compiled components
+        hash,
+        cached: true
+      };
+    }
+    if (typeof template === "string") {
+      return 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 = transpileCache.getByKey(`exec:${transpiled.hash}`);
+      if (cached) {
+        Component = cached.code;
+      } else {
+        Component = await executeTranspiledCode(transpiled.code, {
+          // Provide any additional MDX components if specified
+          ...options?.mdxComponents
+        });
+        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();
+}
+export {
+  ReactRenderer,
+  ReactRendererAdapter,
+  buildHydrationScript,
+  createReactAdapter,
+  loadReactAdapter,
+  reactRenderer
+};