@frontmcp/ui 0.5.1 → 0.6.0

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

@@ -0,0 +1,120 @@
+/**
+ * MDX Renderer
+ *
+ * Handles MDX templates - Markdown with embedded JSX components.
+ * Uses @mdx-js/mdx for compilation and react-dom/server for SSR.
+ *
+ * MDX allows mixing Markdown with React components:
+ * - Markdown headings, lists, code blocks
+ * - JSX component tags: `<Card />`
+ * - JS expressions: `{output.items.map(...)}`
+ * - Frontmatter for metadata
+ */
+import type { TemplateContext } from '../runtime/types';
+import type { PlatformCapabilities } from '../theme';
+import type { UIRenderer, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts } from './types';
+/**
+ * Types this renderer can handle - MDX strings.
+ */
+type MdxTemplate = string;
+/**
+ * MDX Renderer Implementation.
+ *
+ * Compiles MDX (Markdown + JSX) to React components using @mdx-js/mdx,
+ * then renders to HTML using react-dom/server.
+ *
+ * @example Basic MDX template
+ * ```typescript
+ * @Tool({
+ *   ui: {
+ *     template: `
+ * # User Profile
+ *
+ * <UserCard name={output.name} email={output.email} />
+ *
+ * ## Recent Activity
+ * {output.items.map(item => <ActivityItem key={item.id} {...item} />)}
+ *     `,
+ *     mdxComponents: { UserCard, ActivityItem }
+ *   }
+ * })
+ * ```
+ *
+ * @example MDX with frontmatter
+ * ```typescript
+ * @Tool({
+ *   ui: {
+ *     template: `
+ * ---
+ * title: Dashboard
+ * ---
+ *
+ * # {frontmatter.title}
+ *
+ * <Dashboard data={output} />
+ *     `
+ *   }
+ * })
+ * ```
+ */
+export declare class MdxRenderer implements UIRenderer<MdxTemplate> {
+    readonly type: "mdx";
+    readonly priority = 10;
+    /**
+     * Lazy-loaded modules.
+     */
+    private React;
+    private ReactDOMServer;
+    private jsxRuntime;
+    private mdxEvaluate;
+    /**
+     * Check if this renderer can handle the given template.
+     *
+     * Accepts strings containing MDX syntax (Markdown + JSX).
+     */
+    canHandle(template: unknown): template is MdxTemplate;
+    /**
+     * Transpile MDX to executable JavaScript.
+     *
+     * Uses @mdx-js/mdx to compile MDX source to a module.
+     * Note: For MDX, we use evaluate() which combines compile + run,
+     * so this method just returns the source hash for caching purposes.
+     */
+    transpile(template: MdxTemplate, _options?: TranspileOptions): Promise<TranspileResult>;
+    /**
+     * Render MDX template to HTML string.
+     *
+     * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
+     * then renders the resulting React component to HTML via SSR.
+     */
+    render<In, Out>(template: MdxTemplate, 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;
+    /**
+     * Load @mdx-js/mdx evaluate function.
+     *
+     * evaluate() is the cleanest way to run MDX - it combines
+     * compile and run in a single step, handling all the runtime
+     * injection automatically.
+     */
+    private loadMdx;
+}
+/**
+ * Singleton instance of the MDX renderer.
+ */
+export declare const mdxRenderer: MdxRenderer;
+/**
+ * Build MDX hydration script for client-side interactivity.
+ *
+ * Note: MDX hydration is more complex than React hydration
+ * because it needs the MDX runtime and component definitions.
+ */
+export declare function buildMdxHydrationScript(): string;
+export {};
+//# sourceMappingURL=mdx.renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mdx.renderer.d.ts","sourceRoot":"","sources":["../../../src/renderers/mdx.renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EAEf,MAAM,SAAS,CAAC;AAKjB;;GAEG;AACH,KAAK,WAAW,GAAG,MAAM,CAAC;AAmB1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAAa,WAAY,YAAW,UAAU,CAAC,WAAW,CAAC;IACzD,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAU;IAC/B,QAAQ,CAAC,QAAQ,MAAM;IAEvB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAa;IAE1B,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,UAAU,CAAa;IAE/B,OAAO,CAAC,WAAW,CAAiF;IAEpG;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,IAAI,WAAW;IAQrD;;;;;;OAMG;IACG,SAAS,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC;IAsB7F;;;;;OAKG;IACG,MAAM,CAAC,EAAE,EAAE,GAAG,EAClB,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,MAAM,CAAC;IAkFlB;;OAEG;IACH,iBAAiB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,cAAc;IAoBjE;;OAEG;YACW,SAAS;IAoBvB;;;;;;OAMG;YACW,OAAO;CAgBtB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,aAAoB,CAAC;AAE7C;;;;;GAKG;AACH,wBAAgB,uBAAuB,IAAI,MAAM,CA+BhD"}

package/esm/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 '../runtime/types';
+import type { PlatformCapabilities } from '../theme';
+import type { UIRenderer, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts, ToolUIProps } from './types';
+/**
+ * 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/esm/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,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,SAAS,CAAC;AAMjB;;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/esm/renderers/registry.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Renderer Registry
+ *
+ * Global registry for template renderers with auto-detection.
+ * Manages registration, detection, and rendering of templates.
+ */
+import type { TemplateContext } from '../runtime/types';
+import type { UIRenderer, RendererType, RendererRegistryOptions, DetectionResult, RenderResult, RenderOptions } from './types';
+/**
+ * Renderer Registry.
+ *
+ * Manages a collection of renderers and provides:
+ * - Registration of custom renderers
+ * - Auto-detection of template types
+ * - Unified rendering interface
+ *
+ * @example
+ * ```typescript
+ * // Register a custom renderer
+ * registry.register(myCustomRenderer);
+ *
+ * // Auto-detect and render
+ * const result = await registry.render(template, context);
+ * ```
+ */
+export declare class RendererRegistry {
+    private renderers;
+    private sortedRenderers;
+    private defaultRenderer;
+    private debug;
+    constructor(options?: RendererRegistryOptions);
+    /**
+     * Register a renderer.
+     *
+     * Renderers are sorted by priority (highest first) for detection.
+     *
+     * @param renderer - Renderer to register
+     */
+    register(renderer: UIRenderer): void;
+    /**
+     * Unregister a renderer.
+     *
+     * @param type - Type of renderer to remove
+     * @returns True if renderer was removed
+     */
+    unregister(type: RendererType): boolean;
+    /**
+     * Get a renderer by type.
+     *
+     * @param type - Renderer type
+     * @returns Renderer or undefined if not found
+     */
+    get(type: RendererType): UIRenderer | undefined;
+    /**
+     * Check if a renderer type is registered.
+     *
+     * @param type - Renderer type
+     * @returns True if registered
+     */
+    has(type: RendererType): boolean;
+    /**
+     * Get all registered renderer types.
+     *
+     * @returns Array of renderer types
+     */
+    getTypes(): RendererType[];
+    /**
+     * Auto-detect the renderer for a template.
+     *
+     * Checks renderers in priority order (highest first).
+     * Returns HTML renderer as fallback.
+     *
+     * @param template - Template to detect
+     * @returns Detection result with renderer and confidence
+     */
+    detect(template: unknown): DetectionResult;
+    /**
+     * Render a template with auto-detection.
+     *
+     * @param template - Template to render (React, MDX, or HTML)
+     * @param context - Template context with input/output
+     * @param options - Render options
+     * @returns Rendered result with HTML and metadata
+     */
+    render<In, Out>(template: unknown, context: TemplateContext<In, Out>, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Render with a specific renderer type.
+     *
+     * @param type - Renderer type to use
+     * @param template - Template to render
+     * @param context - Template context
+     * @param options - Render options
+     * @returns Rendered result
+     */
+    renderWith<In, Out>(type: RendererType, template: unknown, context: TemplateContext<In, Out>, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Update the sorted renderer list by priority.
+     */
+    private updateSortedList;
+    /**
+     * Set the default renderer type.
+     *
+     * @param type - Renderer type to use as default
+     */
+    setDefault(type: RendererType): void;
+    /**
+     * Get registry statistics.
+     */
+    getStats(): {
+        registeredRenderers: RendererType[];
+        defaultRenderer: RendererType;
+        priorityOrder: Array<{
+            type: RendererType;
+            priority: number;
+        }>;
+    };
+}
+/**
+ * Global renderer registry instance.
+ *
+ * Pre-configured with the HTML renderer.
+ * React and MDX renderers can be added:
+ *
+ * ```typescript
+ * import { rendererRegistry } from '@frontmcp/ui';
+ * import { reactRenderer } from '@frontmcp/ui';
+ * import { mdxRenderer } from '@frontmcp/ui';
+ *
+ * rendererRegistry.register(reactRenderer);
+ * rendererRegistry.register(mdxRenderer);
+ * ```
+ */
+export declare const rendererRegistry: RendererRegistry;
+//# sourceMappingURL=registry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/renderers/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,YAAY,EACZ,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAAuC;IACxD,OAAO,CAAC,eAAe,CAAoB;IAC3C,OAAO,CAAC,eAAe,CAAwB;IAC/C,OAAO,CAAC,KAAK,CAAU;gBAEX,OAAO,GAAE,uBAA4B;IAOjD;;;;;;OAMG;IACH,QAAQ,CAAC,QAAQ,EAAE,UAAU,GAAG,IAAI;IASpC;;;;;OAKG;IACH,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO;IAQvC;;;;;OAKG;IACH,GAAG,CAAC,IAAI,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS;IAI/C;;;;;OAKG;IACH,GAAG,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO;IAIhC;;;;OAIG;IACH,QAAQ,IAAI,YAAY,EAAE;IAI1B;;;;;;;;OAQG;IACH,MAAM,CAAC,QAAQ,EAAE,OAAO,GAAG,eAAe;IA+B1C;;;;;;;OAOG;IACG,MAAM,CAAC,EAAE,EAAE,GAAG,EAClB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,YAAY,CAAC;IA4BxB;;;;;;;;OAQG;IACG,UAAU,CAAC,EAAE,EAAE,GAAG,EACtB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,YAAY,CAAC;IAyBxB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAIxB;;;;OAIG;IACH,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAOpC;;OAEG;IACH,QAAQ,IAAI;QACV,mBAAmB,EAAE,YAAY,EAAE,CAAC;QACpC,eAAe,EAAE,YAAY,CAAC;QAC9B,aAAa,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,YAAY,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAChE;CAUF;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,kBAAyB,CAAC"}

package/esm/renderers/types.d.ts

@@ -0,0 +1,342 @@
+/**
+ * Renderer System Types
+ *
+ * Core interfaces for the multi-framework rendering system.
+ * Supports HTML, React, and MDX templates with auto-detection.
+ */
+import type { TemplateContext, TemplateHelpers, TemplateBuilderFn } from '../runtime/types';
+import type { PlatformCapabilities } from '../theme';
+/**
+ * Supported renderer types for template processing.
+ * - 'html': Plain HTML string or template function
+ * - 'react': React functional component
+ * - 'mdx': MDX content string
+ */
+export type RendererType = 'html' | 'react' | 'mdx';
+/**
+ * Props passed to React components used as templates.
+ *
+ * For SSR (server-side rendering), `output` is always available.
+ * For client-side hydration with the bridge, use `HydratedToolUIProps`.
+ */
+export interface ToolUIProps<In = unknown, Out = unknown> {
+    /** Tool input arguments */
+    input: In;
+    /** Tool output result */
+    output: Out;
+    /** Structured content parsed from output */
+    structuredContent?: unknown;
+    /** Helper functions for rendering */
+    helpers: TemplateHelpers;
+}
+/**
+ * Props for client-side hydrated components using the Platform Bridge.
+ *
+ * These props include loading/error state for reactive rendering.
+ * Use with `useSyncExternalStore` from React 18+:
+ *
+ * @example
+ * ```tsx
+ * import { useSyncExternalStore } from 'react';
+ *
+ * function useToolBridge<T>(): HydratedToolUIProps<T> {
+ *   const state = useSyncExternalStore(
+ *     window.__frontmcp.bridge.subscribe,
+ *     window.__frontmcp.bridge.getSnapshot,
+ *     window.__frontmcp.bridge.getServerSnapshot
+ *   );
+ *   return {
+ *     data: state.data as T,
+ *     loading: state.loading,
+ *     error: state.error,
+ *   };
+ * }
+ *
+ * function MyWidget() {
+ *   const { data, loading, error } = useToolBridge<WeatherData>();
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <Error message={error} />;
+ *   if (!data) return <Empty />;
+ *
+ *   return <WeatherCard {...data} />;
+ * }
+ * ```
+ */
+export interface HydratedToolUIProps<Out = unknown> {
+    /** Tool output data (null when loading or no data) */
+    data: Out | null;
+    /** Whether the bridge is waiting for data */
+    loading: boolean;
+    /** Error message if data loading failed */
+    error: string | null;
+}
+/**
+ * Result of transpiling a template.
+ */
+export interface TranspileResult {
+    /** Transpiled JavaScript code */
+    code: string;
+    /** Content hash for caching */
+    hash: string;
+    /** Whether result was retrieved from cache */
+    cached: boolean;
+    /** Source map for debugging (optional) */
+    sourceMap?: string;
+}
+/**
+ * Options for transpilation.
+ */
+export interface TranspileOptions {
+    /** Enable source maps */
+    sourceMaps?: boolean;
+    /** Development mode (more detailed errors) */
+    development?: boolean;
+}
+/**
+ * Options for rendering a template.
+ */
+export interface RenderOptions {
+    /** Target platform capabilities */
+    platform?: PlatformCapabilities;
+    /** Enable client-side hydration */
+    hydrate?: boolean;
+    /** Custom MDX components */
+    mdxComponents?: Record<string, unknown>;
+}
+/**
+ * Runtime scripts to inject for client-side functionality.
+ */
+export interface RuntimeScripts {
+    /** Scripts to include in <head> */
+    headScripts: string;
+    /** Inline script content (for blocked-network platforms) */
+    inlineScripts?: string;
+    /** Whether scripts are inline or external */
+    isInline: boolean;
+}
+/**
+ * Result of rendering a template.
+ */
+export interface RenderResult {
+    /** Rendered HTML content (body only) */
+    html: string;
+    /** Renderer type that was used */
+    rendererType: RendererType;
+    /** Whether transpilation was cached */
+    transpileCached: boolean;
+    /** Runtime scripts needed for this template */
+    runtimeScripts: RuntimeScripts;
+}
+/**
+ * Abstract renderer interface for processing templates.
+ *
+ * Each renderer handles a specific template type (HTML, React, MDX)
+ * and provides:
+ * - Template type detection
+ * - Transpilation (if needed)
+ * - HTML rendering
+ * - Client runtime script generation
+ */
+export interface UIRenderer<T = unknown> {
+    /**
+     * Unique renderer type identifier.
+     */
+    readonly type: RendererType;
+    /**
+     * Priority for auto-detection.
+     * Higher values are checked first.
+     * - React: 20
+     * - MDX: 10
+     * - HTML: 0 (fallback)
+     */
+    readonly priority: number;
+    /**
+     * Check if this renderer can handle the given template.
+     *
+     * @param template - The template to check
+     * @returns True if this renderer can process the template
+     */
+    canHandle(template: unknown): template is T;
+    /**
+     * Transpile the template to executable JavaScript (if needed).
+     *
+     * For React components from imports, no transpilation is needed.
+     * For JSX strings, SWC transpilation is performed.
+     * Results are cached by content hash.
+     *
+     * @param template - Template to transpile
+     * @param options - Transpilation options
+     * @returns Transpiled result with caching metadata
+     */
+    transpile(template: T, options?: TranspileOptions): Promise<TranspileResult>;
+    /**
+     * Render the template to HTML string.
+     *
+     * @param template - Template to render
+     * @param context - Template context with input/output/helpers
+     * @param options - Render options (platform, hydration, etc.)
+     * @returns Rendered HTML string
+     */
+    render<In, Out>(template: T, context: TemplateContext<In, Out>, options?: RenderOptions): Promise<string>;
+    /**
+     * Get runtime scripts needed for client-side functionality.
+     *
+     * @param platform - Target platform capabilities
+     * @returns Scripts to inject (CDN or inline based on platform)
+     */
+    getRuntimeScripts(platform: PlatformCapabilities): RuntimeScripts;
+}
+/**
+ * Options for the renderer registry.
+ */
+export interface RendererRegistryOptions {
+    /** Maximum cache size for transpiled results */
+    maxCacheSize?: number;
+    /** Enable debug logging */
+    debug?: boolean;
+}
+/**
+ * Result of detecting a template's renderer type.
+ */
+export interface DetectionResult {
+    /** The detected renderer */
+    renderer: UIRenderer;
+    /** Confidence level (0-1) */
+    confidence: number;
+    /** Detection reason for debugging */
+    reason: string;
+}
+/**
+ * React component type for Tool UI templates.
+ *
+ * This is a generic function type that accepts props and returns JSX.
+ * We use a loose type here to avoid requiring React types at compile time.
+ */
+export type ReactComponentType<In = unknown, Out = unknown> = (props: ToolUIProps<In, Out>) => any;
+/**
+ * All possible template types.
+ * Auto-detected at runtime.
+ */
+export type ToolUITemplate<In = unknown, Out = unknown> = TemplateBuilderFn<In, Out> | string | ReactComponentType<In, Out>;
+/**
+ * Context passed to custom wrapper functions.
+ */
+export interface WrapperContext {
+    /** Tool name */
+    toolName: string;
+    /** Rendered content HTML */
+    content: string;
+    /** Detected renderer type */
+    rendererType: RendererType;
+    /** Target platform */
+    platform: PlatformCapabilities;
+    /** Runtime scripts to inject */
+    runtimeScripts: RuntimeScripts;
+}
+/**
+ * Extended Tool UI configuration with multi-framework support.
+ *
+ * The template type is auto-detected - no need to specify a renderer!
+ *
+ * @example React component
+ * ```typescript
+ * import { UserCard } from './components/user-card.tsx';
+ *
+ * @Tool({
+ *   ui: {
+ *     template: UserCard, // Auto-detected as React
+ *     hydrate: true,      // Enable client-side interactivity
+ *   }
+ * })
+ * ```
+ *
+ * @example MDX template
+ * ```typescript
+ * @Tool({
+ *   ui: {
+ *     template: `
+ *       # Welcome
+ *       <UserCard name={output.name} />
+ *     `,
+ *     mdxComponents: { UserCard },
+ *   }
+ * })
+ * ```
+ *
+ * @example HTML template (unchanged)
+ * ```typescript
+ * @Tool({
+ *   ui: {
+ *     template: (ctx) => `<div>${ctx.output.name}</div>`,
+ *   }
+ * })
+ * ```
+ */
+export interface ExtendedToolUIConfig<In = unknown, Out = unknown> {
+    /**
+     * Template for rendering the UI.
+     *
+     * Can be:
+     * - React component: `({ input, output }) => <div>...</div>`
+     * - MDX string: `# Title\n<Component />`
+     * - HTML function: `(ctx) => \`<div>...</div>\``
+     * - Static HTML string
+     *
+     * Type is auto-detected at runtime.
+     */
+    template: ToolUITemplate<In, Out>;
+    /**
+     * Enable client-side hydration for React components.
+     * When true, the React runtime is included and components
+     * become interactive in the browser.
+     *
+     * @default false
+     */
+    hydrate?: boolean;
+    /**
+     * Custom wrapper function to override the default HTML document wrapper.
+     * Useful for completely custom document structures.
+     *
+     * @param content - Rendered template HTML
+     * @param ctx - Wrapper context with metadata
+     * @returns Complete HTML document string
+     */
+    wrapper?: (content: string, ctx: WrapperContext) => string;
+    /**
+     * Custom MDX components available in MDX templates.
+     * These components can be used directly in MDX content.
+     *
+     * @example
+     * ```typescript
+     * mdxComponents: {
+     *   UserCard: ({ name }) => <div>{name}</div>,
+     *   Badge: ({ type }) => <span className={type}>...</span>,
+     * }
+     * ```
+     */
+    mdxComponents?: Record<string, (props: any) => any>;
+    /** Content Security Policy for the sandboxed widget. */
+    csp?: {
+        connectDomains?: string[];
+        resourceDomains?: string[];
+    };
+    /** Whether the widget can invoke tools via the MCP bridge. */
+    widgetAccessible?: boolean;
+    /** Preferred display mode for the widget. */
+    displayMode?: 'inline' | 'fullscreen' | 'pip';
+    /** Human-readable description shown to users about what the widget does. */
+    widgetDescription?: string;
+    /** Status messages shown during tool invocation. */
+    invocationStatus?: {
+        invoking?: string;
+        invoked?: string;
+    };
+    /** How the widget HTML should be served to the client. */
+    servingMode?: 'inline' | 'static' | 'hybrid' | 'direct-url' | 'custom-url';
+    /** Custom URL for widget serving when `servingMode: 'custom-url'`. */
+    customWidgetUrl?: string;
+    /** Path for direct URL serving when `servingMode: 'direct-url'`. */
+    directPath?: string;
+}
+//# sourceMappingURL=types.d.ts.map