@frontmcp/ui 0.5.0 → 0.6.0

package/universal/context.d.ts

@@ -0,0 +1,122 @@
+/**
+ * FrontMCP Context Provider
+ *
+ * React context for providing the FrontMCP store to child components.
+ * Supports custom store injection and auto-initialization from window.
+ */
+import React from 'react';
+import type { FrontMCPStore, FrontMCPProviderProps, FrontMCPState } from './types';
+/**
+ * FrontMCP Provider component.
+ *
+ * Provides the FrontMCP store to child components and optionally
+ * initializes from window.__frontmcp data.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <FrontMCPProvider>
+ *       <MyWidget />
+ *     </FrontMCPProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom store
+ * ```tsx
+ * const store = createFrontMCPStore({ toolName: 'test' });
+ *
+ * function App() {
+ *   return (
+ *     <FrontMCPProvider store={store}>
+ *       <MyWidget />
+ *     </FrontMCPProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function FrontMCPProvider({ store, initialState, children }: FrontMCPProviderProps): React.ReactElement;
+/**
+ * Props for the ComponentsProvider.
+ */
+export interface ComponentsProviderProps {
+    /** Custom components to make available */
+    components: Record<string, React.ComponentType<any>>;
+    /** Children to render (optional when using React.createElement) */
+    children?: React.ReactNode;
+}
+/**
+ * Provide custom components to renderers.
+ *
+ * @example
+ * ```tsx
+ * const components = {
+ *   WeatherCard: ({ temp }) => <div>{temp}°F</div>,
+ *   Badge: ({ type }) => <span className={type}>Badge</span>,
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <ComponentsProvider components={components}>
+ *       <UniversalRenderer content={mdxContent} />
+ *     </ComponentsProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ComponentsProvider({ components, children }: ComponentsProviderProps): React.ReactElement;
+/**
+ * Hook to access the FrontMCP store from context.
+ *
+ * @throws Error if used outside of FrontMCPProvider
+ * @returns Store instance
+ */
+export declare function useFrontMCPContext(): FrontMCPStore;
+/**
+ * Hook to access custom components from context.
+ *
+ * @returns Components record
+ */
+export declare function useComponents(): Record<string, React.ComponentType<any>>;
+/**
+ * Hook to safely access the FrontMCP store (returns null outside provider).
+ *
+ * @returns Store instance or null
+ */
+export declare function useFrontMCPContextSafe(): FrontMCPStore | null;
+/**
+ * Props for the combined UniversalProvider.
+ */
+export interface UniversalProviderProps extends FrontMCPProviderProps {
+    /** Custom components to make available */
+    components?: Record<string, React.ComponentType<any>>;
+}
+/**
+ * Combined provider for FrontMCP store and custom components.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <UniversalProvider
+ *       initialState={{ toolName: 'get_weather' }}
+ *       components={{ WeatherCard: MyWeatherCard }}
+ *     >
+ *       <UniversalApp />
+ *     </UniversalProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function UniversalProvider({ store, initialState, components, children, }: UniversalProviderProps): React.ReactElement;
+/**
+ * Higher-order component to inject FrontMCP store as props.
+ *
+ * @param Component - Component to wrap
+ * @returns Wrapped component with store props
+ */
+export declare function withFrontMCP<P extends {
+    state?: FrontMCPState;
+}>(Component: React.ComponentType<P>): React.FC<Omit<P, 'state'>>;
+//# sourceMappingURL=context.d.ts.map

package/universal/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/universal/context.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAgE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAsBnF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAkB7G;AAMD;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAE1C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IACrD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAYxG;AAMD;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,aAAa,CAQlD;AAED;;;;GAIG;AAEH,wBAAgB,aAAa,IAAI,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAExE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,aAAa,GAAG,IAAI,CAE7D;AAMD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;IACnE,0CAA0C;IAE1C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,UAAe,EACf,QAAQ,GACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAM7C;AAMD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,EAC9D,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAChC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAU5B"}

package/universal/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Universal Renderer Module
+ *
+ * Multi-format client-side rendering system for FrontMCP widgets.
+ * Supports HTML, Markdown, React, and MDX content with auto-detection.
+ *
+ * @module @frontmcp/ui/universal
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { UniversalAppWithProvider } from '@frontmcp/ui/universal';
+ *
+ * function App() {
+ *   return (
+ *     <UniversalAppWithProvider
+ *       initialState={{
+ *         toolName: 'get_weather',
+ *         output: { temperature: 72 },
+ *       }}
+ *       content={{
+ *         type: 'markdown',
+ *         source: '# Weather: {output.temperature}°F',
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom components
+ * ```tsx
+ * const components = {
+ *   WeatherCard: ({ temp }) => <div>{temp}°F</div>,
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <UniversalAppWithProvider
+ *       components={components}
+ *       content={{
+ *         type: 'markdown',
+ *         source: '# Weather\n\n<WeatherCard temp={72} />',
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export type { ContentType, UniversalContent, FrontMCPState, FrontMCPStore, RenderContext, ClientRenderer, UniversalAppProps, FrontMCPProviderProps, CDNType, UniversalRuntimeOptions, UniversalRuntimeResult, ContentSecurityOptions, } from './types';
+export { DEFAULT_FRONTMCP_STATE, UNIVERSAL_CDN, detectContentType } from './types';
+export { createFrontMCPStore, getGlobalStore, setGlobalStore, resetGlobalStore, useFrontMCPStore, useToolOutput, useToolInput, useContent, useToolName, useLoadingState, initializeStoreFromWindow, createStoreSelector, } from './store';
+export { FrontMCPProvider, ComponentsProvider, UniversalProvider, useFrontMCPContext, useComponents, useFrontMCPContextSafe, withFrontMCP, } from './context';
+export type { ComponentsProviderProps, UniversalProviderProps } from './context';
+export { RendererRegistry, rendererRegistry, detectRenderer, renderContent, createContent, htmlRenderer, safeHtmlRenderer, markdownRenderer, createMarkdownRenderer, reactRenderer, isReactComponent, mdxRenderer, isMdxSupported, createMdxRenderer, } from './renderers';
+export { UniversalApp, UniversalAppWithProvider, LoadingSpinner, ErrorDisplay, EmptyState } from './UniversalApp';
+export { buildUniversalRuntime, buildMinimalRuntime } from './runtime-builder';
+export { getCachedRuntime, clearRuntimeCache, getRuntimeCacheStats, buildAppScript, buildDataInjectionCode, buildComponentCode, RUNTIME_PLACEHOLDERS, type CachedRuntimeOptions, type CachedRuntimeResult, } from './cached-runtime';
+//# sourceMappingURL=index.d.ts.map

package/universal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/universal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAMH,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EACP,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMnF,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,UAAU,EACV,WAAW,EACX,eAAe,EACf,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAMjB,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,YAAY,GACb,MAAM,WAAW,CAAC;AAEnB,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAMjF,OAAO,EAEL,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,aAAa,EAEb,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMlH,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM/E,OAAO,EAEL,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EAEpB,cAAc,EACd,sBAAsB,EACtB,kBAAkB,EAElB,oBAAoB,EAEpB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC"}

package/universal/renderers/html.renderer.d.ts

@@ -0,0 +1,37 @@
+/**
+ * HTML Renderer
+ *
+ * Renders raw HTML strings using dangerouslySetInnerHTML.
+ * Used for pre-rendered or server-side generated HTML content.
+ */
+import type { ClientRenderer } from '../types';
+/**
+ * HTML renderer implementation.
+ *
+ * Renders HTML strings directly to the DOM using dangerouslySetInnerHTML.
+ * This is the lowest priority renderer (fallback).
+ *
+ * @example
+ * ```tsx
+ * const content: UniversalContent = {
+ *   type: 'html',
+ *   source: '<div class="card"><h1>Hello</h1></div>',
+ * };
+ *
+ * // Renders: <div class="card"><h1>Hello</h1></div>
+ * ```
+ */
+export declare const htmlRenderer: ClientRenderer;
+/**
+ * Sanitize HTML string (basic XSS protection).
+ * For production use, consider using a library like DOMPurify.
+ *
+ * @param html - HTML string to sanitize
+ * @returns Sanitized HTML string
+ */
+export declare function sanitizeHtml(html: string): string;
+/**
+ * Create a safe HTML renderer that sanitizes content.
+ */
+export declare const safeHtmlRenderer: ClientRenderer;
+//# sourceMappingURL=html.renderer.d.ts.map

package/universal/renderers/html.renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.renderer.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/html.renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,cAsB1B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAYjD;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAsB9B,CAAC"}

package/universal/renderers/index.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Renderer Registry
+ *
+ * Central registry for client-side renderers with auto-detection.
+ * Manages registration and selection of renderers based on content type.
+ */
+import type { ClientRenderer, UniversalContent, RenderContext, ContentType } from '../types';
+/**
+ * Client-side renderer registry.
+ *
+ * Manages renderers and provides auto-detection based on content type.
+ *
+ * @example
+ * ```typescript
+ * const registry = new RendererRegistry();
+ *
+ * // Auto-detect and get renderer
+ * const renderer = registry.detect({ type: 'markdown', source: '# Hello' });
+ *
+ * // Register custom renderer
+ * registry.register(myCustomRenderer);
+ * ```
+ */
+export declare class RendererRegistry {
+    private renderers;
+    private sortedRenderers;
+    constructor();
+    /**
+     * Register a renderer.
+     * Renderers are sorted by priority (highest first) for auto-detection.
+     */
+    register(renderer: ClientRenderer): void;
+    /**
+     * Unregister a renderer by type.
+     */
+    unregister(type: ContentType): boolean;
+    /**
+     * Get a renderer by type.
+     */
+    get(type: ContentType): ClientRenderer | undefined;
+    /**
+     * Check if a renderer type is registered.
+     */
+    has(type: ContentType): boolean;
+    /**
+     * Get all registered renderer types.
+     */
+    getTypes(): ContentType[];
+    /**
+     * Auto-detect the best renderer for content.
+     *
+     * Checks renderers in priority order (highest first).
+     * Falls back to HTML renderer if no match.
+     */
+    detect(content: UniversalContent): ClientRenderer;
+    /**
+     * Render content using auto-detection.
+     */
+    render(content: UniversalContent, context: RenderContext): React.ReactNode;
+    /**
+     * Render with a specific renderer type.
+     */
+    renderWith(type: ContentType, content: UniversalContent, context: RenderContext): React.ReactNode;
+    /**
+     * Get registry statistics.
+     */
+    getStats(): {
+        registeredTypes: ContentType[];
+        priorityOrder: Array<{
+            type: ContentType;
+            priority: number;
+        }>;
+    };
+    /**
+     * Update the sorted renderer list by priority.
+     */
+    private updateSortedList;
+}
+/**
+ * Global renderer registry instance.
+ *
+ * Pre-configured with HTML, Markdown, React, and MDX renderers.
+ */
+export declare const rendererRegistry: RendererRegistry;
+/**
+ * Detect the best renderer for content.
+ *
+ * @param content - Content to analyze
+ * @returns Best matching renderer
+ */
+export declare function detectRenderer(content: UniversalContent): ClientRenderer;
+/**
+ * Render content with auto-detection.
+ *
+ * @param content - Content to render
+ * @param context - Render context
+ * @returns Rendered React node
+ */
+export declare function renderContent(content: UniversalContent, context: RenderContext): React.ReactNode;
+/**
+ * Create content object from source with auto-detected type.
+ *
+ * @param source - Content source (string or component)
+ * @param options - Additional options
+ * @returns Content object
+ */
+export declare function createContent(source: UniversalContent['source'], options?: Partial<Omit<UniversalContent, 'source'>>): UniversalContent;
+export { htmlRenderer, safeHtmlRenderer } from './html.renderer';
+export { markdownRenderer, createMarkdownRenderer } from './markdown.renderer';
+export { reactRenderer, isReactComponent } from './react.renderer';
+export { mdxRenderer, isMdxSupported, createMdxRenderer } from './mdx.renderer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAW7F;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,eAAe,CAAwB;;IAU/C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAKxC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAQtC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,WAAW,GAAG,cAAc,GAAG,SAAS;IAIlD;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAI/B;;OAEG;IACH,QAAQ,IAAI,WAAW,EAAE;IAIzB;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,gBAAgB,GAAG,cAAc;IAoBjD;;OAEG;IACH,MAAM,CAAC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS;IAK1E;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS;IAQjG;;OAEG;IACH,QAAQ,IAAI;QACV,eAAe,EAAE,WAAW,EAAE,CAAC;QAC/B,aAAa,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,WAAW,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC/D;IAUD;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAGzB;AAMD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,kBAAyB,CAAC;AAMvD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,gBAAgB,GAAG,cAAc,CAExE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAEhG;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,GAClD,gBAAgB,CAOlB;AAOD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/universal/renderers/markdown.renderer.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Markdown Renderer
+ *
+ * Renders Markdown content using react-markdown.
+ * Supports custom components for enhanced rendering.
+ */
+import React from 'react';
+import type { ClientRenderer } from '../types';
+/**
+ * Markdown renderer implementation.
+ *
+ * Uses react-markdown when available, falls back to minimal inline parser.
+ *
+ * @example
+ * ```tsx
+ * const content: UniversalContent = {
+ *   type: 'markdown',
+ *   source: '# Hello\n\nThis is **bold** text.',
+ *   components: { a: CustomLink },
+ * };
+ *
+ * // Renders: <h1>Hello</h1><p>This is <strong>bold</strong> text.</p>
+ * ```
+ */
+export declare const markdownRenderer: ClientRenderer;
+/**
+ * Create a markdown renderer with custom default components.
+ *
+ * @param defaultComponents - Default components to use
+ * @returns Configured markdown renderer
+ */
+export declare function createMarkdownRenderer(defaultComponents: Record<string, React.ComponentType<any>>): ClientRenderer;
+//# sourceMappingURL=markdown.renderer.d.ts.map

package/universal/renderers/markdown.renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.renderer.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/markdown.renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAqGhF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,EAAE,cA2D9B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAEpC,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAC1D,cAAc,CAgBhB"}

package/universal/renderers/mdx.renderer.d.ts

@@ -0,0 +1,38 @@
+/**
+ * MDX Renderer
+ *
+ * Renders MDX content (Markdown + JSX) using @mdx-js/react.
+ * Supports custom components for enhanced rendering.
+ */
+import React from 'react';
+import type { ClientRenderer } from '../types';
+/**
+ * MDX renderer implementation.
+ *
+ * Uses @mdx-js/react when available. Falls back to warning when MDX
+ * cannot be rendered (e.g., on Claude which only supports cdnjs).
+ *
+ * @example
+ * ```tsx
+ * const content: UniversalContent = {
+ *   type: 'mdx',
+ *   source: '# Hello\n\n<WeatherCard temp={72} />',
+ *   components: { WeatherCard },
+ * };
+ * ```
+ */
+export declare const mdxRenderer: ClientRenderer;
+/**
+ * Check if MDX rendering is supported on the current platform.
+ *
+ * @returns True if MDX can be rendered
+ */
+export declare function isMdxSupported(): boolean;
+/**
+ * Create an MDX renderer with pre-configured components.
+ *
+ * @param defaultComponents - Default components for MDX
+ * @returns Configured MDX renderer
+ */
+export declare function createMdxRenderer(defaultComponents: Record<string, React.ComponentType<any>>): ClientRenderer;
+//# sourceMappingURL=mdx.renderer.d.ts.map

package/universal/renderers/mdx.renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdx.renderer.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/mdx.renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AA4ChF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,EAAE,cA+FzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAExC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAE/B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAC1D,cAAc,CAehB"}

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

@@ -0,0 +1,46 @@
+/**
+ * React Renderer
+ *
+ * Renders React components directly.
+ * Used for pre-compiled or imported React components.
+ */
+import React from 'react';
+import type { ClientRenderer } from '../types';
+/**
+ * React renderer implementation.
+ *
+ * Renders React components by creating elements with the provided props.
+ * This is the highest priority renderer when a function is provided.
+ *
+ * @example
+ * ```tsx
+ * const WeatherCard = ({ output }) => (
+ *   <div className="card">{output.temperature}°F</div>
+ * );
+ *
+ * const content: UniversalContent = {
+ *   type: 'react',
+ *   source: WeatherCard,
+ *   props: { output: { temperature: 72 } },
+ * };
+ *
+ * // Renders: <div class="card">72°F</div>
+ * ```
+ */
+export declare const reactRenderer: ClientRenderer;
+/**
+ * Check if a value is a React component.
+ *
+ * @param value - Value to check
+ * @returns True if the value is a React component
+ */
+export declare function isReactComponent(value: unknown): boolean;
+/**
+ * Wrap a component with error boundary behavior.
+ *
+ * @param Component - Component to wrap
+ * @param fallback - Fallback to render on error
+ * @returns Wrapped component
+ */
+export declare function withErrorBoundary(Component: React.ComponentType<any>, fallback?: React.ReactNode): React.ComponentType<any>;
+//# sourceMappingURL=react.renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.renderer.d.ts","sourceRoot":"","sources":["../../../src/universal/renderers/react.renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,UAAU,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,EAAE,cAgC3B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CA8BxD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAE/B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAEzB,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAkB1B"}

package/universal/runtime-builder.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Universal Runtime Builder
+ *
+ * Generates inline JavaScript for the universal renderer.
+ * Used by bundleToStaticHTML to create self-contained HTML documents.
+ */
+import type { UniversalRuntimeOptions, UniversalRuntimeResult } from './types';
+/**
+ * Build the complete universal runtime script.
+ *
+ * @param options - Build options
+ * @returns Runtime result with script and CDN imports
+ *
+ * @example
+ * ```typescript
+ * const result = buildUniversalRuntime({
+ *   cdnType: 'esm',
+ *   includeMarkdown: true,
+ * });
+ *
+ * // result.script = complete inline runtime
+ * // result.cdnImports = CDN script tags to include in head
+ * ```
+ */
+export declare function buildUniversalRuntime(options: UniversalRuntimeOptions): UniversalRuntimeResult;
+/**
+ * Build a minimal runtime (store + basic rendering only).
+ *
+ * @param options - Build options
+ * @returns Minimal runtime script
+ */
+export declare function buildMinimalRuntime(options: Pick<UniversalRuntimeOptions, 'minify'>): string;
+//# sourceMappingURL=runtime-builder.d.ts.map

package/universal/runtime-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-builder.d.ts","sourceRoot":"","sources":["../../src/universal/runtime-builder.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAW,MAAM,SAAS,CAAC;AAmZxF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CA6C9F;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,EAAE,QAAQ,CAAC,GAAG,MAAM,CAa5F"}

package/universal/store.d.ts

@@ -0,0 +1,135 @@
+/**
+ * FrontMCP Store
+ *
+ * Simple observable store for managing tool context and state.
+ * Uses React 18's useSyncExternalStore for subscription.
+ *
+ * @example
+ * ```typescript
+ * // Create store
+ * const store = createFrontMCPStore();
+ *
+ * // Update state
+ * store.setState({ toolName: 'get_weather', output: { temp: 72 } });
+ *
+ * // In React component
+ * const state = useFrontMCPStore();
+ * console.log(state.output);
+ * ```
+ */
+import type { FrontMCPState, FrontMCPStore, UniversalContent } from './types';
+/**
+ * Create a new FrontMCP store instance.
+ *
+ * @param initialState - Initial state values
+ * @returns Store instance with subscription support
+ */
+export declare function createFrontMCPStore(initialState?: Partial<FrontMCPState>): FrontMCPStore;
+/**
+ * Get or create the global store instance.
+ */
+export declare function getGlobalStore(): FrontMCPStore;
+/**
+ * Set the global store instance.
+ * Used for testing or custom store injection.
+ */
+export declare function setGlobalStore(store: FrontMCPStore): void;
+/**
+ * Reset the global store to a new instance.
+ */
+export declare function resetGlobalStore(initialState?: Partial<FrontMCPState>): void;
+/**
+ * Hook to access the FrontMCP store state.
+ *
+ * @param store - Optional store instance (uses global if not provided)
+ * @returns Current store state
+ *
+ * @example
+ * ```tsx
+ * function MyWidget() {
+ *   const { output, loading, error } = useFrontMCPStore();
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <Error message={error} />;
+ *
+ *   return <div>{output?.message}</div>;
+ * }
+ * ```
+ */
+export declare function useFrontMCPStore(store?: FrontMCPStore): FrontMCPState;
+/**
+ * Hook to access the tool output data.
+ *
+ * @param store - Optional store instance
+ * @returns Tool output (typed as T) or null
+ *
+ * @example
+ * ```tsx
+ * interface WeatherData {
+ *   temperature: number;
+ *   conditions: string;
+ * }
+ *
+ * function Weather() {
+ *   const output = useToolOutput<WeatherData>();
+ *   return <div>{output?.temperature}°F</div>;
+ * }
+ * ```
+ */
+export declare function useToolOutput<T = unknown>(store?: FrontMCPStore): T | null;
+/**
+ * Hook to access the tool input arguments.
+ *
+ * @param store - Optional store instance
+ * @returns Tool input or null
+ */
+export declare function useToolInput<T extends Record<string, unknown> = Record<string, unknown>>(store?: FrontMCPStore): T | null;
+/**
+ * Hook to access the content configuration.
+ *
+ * @param store - Optional store instance
+ * @returns Content configuration or null
+ */
+export declare function useContent(store?: FrontMCPStore): UniversalContent | null;
+/**
+ * Hook to access the tool name.
+ *
+ * @param store - Optional store instance
+ * @returns Tool name or null
+ */
+export declare function useToolName(store?: FrontMCPStore): string | null;
+/**
+ * Hook to access loading and error states.
+ *
+ * @param store - Optional store instance
+ * @returns Loading and error state
+ */
+export declare function useLoadingState(store?: FrontMCPStore): {
+    loading: boolean;
+    error: string | null;
+};
+/**
+ * Initialize store from window.__frontmcp data.
+ * Used by the inline runtime to hydrate the store.
+ *
+ * @param store - Store instance to initialize
+ */
+export declare function initializeStoreFromWindow(store?: FrontMCPStore): void;
+/**
+ * Create a store selector for derived state.
+ *
+ * @param selector - Function to select derived state
+ * @returns Hook that returns the selected state
+ *
+ * @example
+ * ```tsx
+ * const useTemperature = createStoreSelector((state) => state.output?.temperature);
+ *
+ * function Temperature() {
+ *   const temp = useTemperature();
+ *   return <div>{temp}°F</div>;
+ * }
+ * ```
+ */
+export declare function createStoreSelector<T>(selector: (state: FrontMCPState) => T): (store?: FrontMCPStore) => T;
+//# sourceMappingURL=store.d.ts.map

package/universal/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/universal/store.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO9E;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,aAAa,CA6CxF;AAYD;;GAEG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAK9C;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAEzD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAE5E;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,CAIrE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa,GAAG,CAAC,GAAG,IAAI,CAG1E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtF,KAAK,CAAC,EAAE,aAAa,GACpB,CAAC,GAAG,IAAI,CAGV;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,gBAAgB,GAAG,IAAI,CAGzE;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAGhE;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAGjG;AAMD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAiBrE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,CAK1G"}