@frontmcp/ui 0.5.1 → 0.6.1

package/universal/cached-runtime.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Cached Runtime Builder
+ *
+ * Optimizes bundling by pre-building and caching the static runtime code.
+ * Separates "vendor" (static runtime) from "app" (user component) chunks.
+ *
+ * Benefits:
+ * - Runtime is built once and cached globally
+ * - Only user components need transpilation per request
+ * - Significantly reduces build time for repeated builds
+ */
+import type { CDNType, ContentSecurityOptions } from './types';
+/**
+ * Runtime cache configuration.
+ */
+interface RuntimeCacheConfig {
+    /** Maximum cache entries */
+    maxEntries?: number;
+    /** TTL in milliseconds (0 = forever) */
+    ttl?: number;
+}
+/**
+ * Placeholders for dynamic content injection.
+ * These are replaced at build time with actual content.
+ */
+export declare const RUNTIME_PLACEHOLDERS: {
+    /** Placeholder for transpiled component code */
+    readonly COMPONENT_CODE: "/*__FRONTMCP_COMPONENT_CODE__*/";
+    /** Placeholder for data injection */
+    readonly DATA_INJECTION: "/*__FRONTMCP_DATA_INJECTION__*/";
+    /** Placeholder for custom components */
+    readonly CUSTOM_COMPONENTS: "/*__FRONTMCP_CUSTOM_COMPONENTS__*/";
+};
+/**
+ * Options for cached runtime.
+ */
+export interface CachedRuntimeOptions {
+    /** CDN type (esm or umd) */
+    cdnType: CDNType;
+    /** Include markdown renderer */
+    includeMarkdown?: boolean;
+    /** Include MDX renderer */
+    includeMdx?: boolean;
+    /** Minify output */
+    minify?: boolean;
+    /** Content security / XSS protection options */
+    contentSecurity?: ContentSecurityOptions;
+}
+/**
+ * Result from getting cached runtime.
+ */
+export interface CachedRuntimeResult {
+    /** Pre-built vendor script (static runtime) */
+    vendorScript: string;
+    /** Template for app script (with placeholders) */
+    appTemplate: string;
+    /** CDN imports for head */
+    cdnImports: string;
+    /** Total size of vendor script */
+    vendorSize: number;
+    /** Whether this was from cache */
+    cached: boolean;
+    /** Cache key used */
+    cacheKey: string;
+}
+/**
+ * Get or build cached runtime.
+ *
+ * @param options - Runtime options
+ * @param config - Cache configuration
+ * @returns Cached runtime result
+ *
+ * @example
+ * ```typescript
+ * const runtime = getCachedRuntime({ cdnType: 'umd', includeMarkdown: true });
+ *
+ * // Replace placeholders with actual content
+ * const appScript = runtime.appTemplate
+ *   .replace(RUNTIME_PLACEHOLDERS.COMPONENT_CODE, transpiledCode)
+ *   .replace(RUNTIME_PLACEHOLDERS.DATA_INJECTION, dataScript);
+ * ```
+ */
+export declare function getCachedRuntime(options: CachedRuntimeOptions, config?: RuntimeCacheConfig): CachedRuntimeResult;
+/**
+ * Clear the runtime cache.
+ */
+export declare function clearRuntimeCache(): void;
+/**
+ * Get cache statistics.
+ */
+export declare function getRuntimeCacheStats(): {
+    entries: number;
+    totalSize: number;
+    keys: string[];
+};
+/**
+ * Build the complete app script by replacing placeholders.
+ *
+ * @param appTemplate - Template with placeholders
+ * @param componentCode - Transpiled component code (or empty string)
+ * @param dataInjection - Data injection script
+ * @param customComponents - Custom components script (or empty string)
+ * @returns Complete app script
+ */
+export declare function buildAppScript(appTemplate: string, componentCode: string, dataInjection: string, customComponents?: string): string;
+/**
+ * Build data injection code for the app script.
+ */
+export declare function buildDataInjectionCode(toolName: string, input: unknown, output: unknown, structuredContent: unknown, contentType: string, source: string | null, hasComponent: boolean): string;
+/**
+ * Build component wrapper code.
+ */
+export declare function buildComponentCode(transpiledCode: string): string;
+export {};
+//# sourceMappingURL=cached-runtime.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cached-runtime.d.ts","sourceRoot":"","sources":["../../src/universal/cached-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAuB/D;;GAEG;AACH,UAAU,kBAAkB;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAMD;;;GAGG;AACH,eAAO,MAAM,oBAAoB;IAC/B,gDAAgD;;IAEhD,qCAAqC;;IAErC,wCAAwC;;CAEhC,CAAC;AAiDX;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,eAAe,CAAC,EAAE,sBAAsB,CAAC;CAC1C;AAkgBD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,oBAAoB,EAAE,MAAM,GAAE,kBAAuB,GAAG,mBAAmB,CAyEpH;AAqBD;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB,CAcA;AAMD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,gBAAgB,SAAK,GACpB,MAAM,CAKR;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,iBAAiB,EAAE,OAAO,EAC1B,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,YAAY,EAAE,OAAO,GACpB,MAAM,CAsCR;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAWjE"}

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"}