@frontmcp/ui 0.5.0 → 0.6.0

package/src/react/index.js

@@ -1,113 +0,0 @@
-"use strict";
-/**
- * @file index.ts
- * @description React components and hooks for FrontMCP UI.
- *
- * These are pure React components that can be used:
- * 1. As regular React components in your app
- * 2. To generate static HTML via render functions
- * 3. With hooks to access the MCP bridge
- *
- * @example React usage
- * ```tsx
- * import { Card, Badge, Button, Alert } from '@frontmcp/ui/react';
- *
- * function App() {
- *   return (
- *     <Card title="Welcome" variant="elevated">
- *       <Badge variant="success">New</Badge>
- *       <p>Card content here</p>
- *       <Button variant="primary">Click Me</Button>
- *     </Card>
- *   );
- * }
- * ```
- *
- * @example Static HTML generation
- * ```typescript
- * import { renderCard, renderBadge } from '@frontmcp/ui/react';
- *
- * const cardHtml = await renderCard({
- *   title: 'Welcome',
- *   variant: 'elevated',
- *   children: '<p>Content</p>',
- * });
- * ```
- *
- * @example Using hooks with the MCP bridge
- * ```tsx
- * import {
- *   McpBridgeProvider,
- *   useMcpBridge,
- *   useToolInput,
- *   useCallTool,
- *   useTheme,
- * } from '@frontmcp/ui/react';
- *
- * function App() {
- *   return (
- *     <McpBridgeProvider>
- *       <WeatherWidget />
- *     </McpBridgeProvider>
- *   );
- * }
- *
- * function WeatherWidget() {
- *   const input = useToolInput<{ location: string }>();
- *   const theme = useTheme();
- *   const [getWeather, { data, loading }] = useCallTool('get_weather');
- *
- *   return (
- *     <Card title={`Weather for ${input?.location}`} variant={theme === 'dark' ? 'elevated' : 'default'}>
- *       {loading ? 'Loading...' : data?.temperature}
- *     </Card>
- *   );
- * }
- * ```
- *
- * @module @frontmcp/ui/react
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isServer = exports.isBrowser = exports.renderChildrenToString = exports.useOpenLink = exports.useSendMessage = exports.useToolCalls = exports.useCallTool = exports.useStructuredContent = exports.useToolOutput = exports.useToolInput = exports.useCapability = exports.useHostContext = exports.useDisplayMode = exports.useTheme = exports.useMcpBridge = exports.useMcpBridgeContext = exports.McpBridgeProvider = exports.renderAlertSync = exports.renderAlert = exports.Alert = exports.renderButtonSync = exports.renderButton = exports.Button = exports.renderBadgeSync = exports.renderBadge = exports.Badge = exports.renderCardSync = exports.renderCard = exports.Card = void 0;
-// React Components
-var Card_1 = require("./Card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
-Object.defineProperty(exports, "renderCard", { enumerable: true, get: function () { return Card_1.renderCard; } });
-Object.defineProperty(exports, "renderCardSync", { enumerable: true, get: function () { return Card_1.renderCardSync; } });
-var Badge_1 = require("./Badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
-Object.defineProperty(exports, "renderBadge", { enumerable: true, get: function () { return Badge_1.renderBadge; } });
-Object.defineProperty(exports, "renderBadgeSync", { enumerable: true, get: function () { return Badge_1.renderBadgeSync; } });
-var Button_1 = require("./Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
-Object.defineProperty(exports, "renderButton", { enumerable: true, get: function () { return Button_1.renderButton; } });
-Object.defineProperty(exports, "renderButtonSync", { enumerable: true, get: function () { return Button_1.renderButtonSync; } });
-var Alert_1 = require("./Alert");
-Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
-Object.defineProperty(exports, "renderAlert", { enumerable: true, get: function () { return Alert_1.renderAlert; } });
-Object.defineProperty(exports, "renderAlertSync", { enumerable: true, get: function () { return Alert_1.renderAlertSync; } });
-// React Hooks for MCP Bridge
-var hooks_1 = require("./hooks");
-// Provider
-Object.defineProperty(exports, "McpBridgeProvider", { enumerable: true, get: function () { return hooks_1.McpBridgeProvider; } });
-// Bridge hooks
-Object.defineProperty(exports, "useMcpBridgeContext", { enumerable: true, get: function () { return hooks_1.useMcpBridgeContext; } });
-Object.defineProperty(exports, "useMcpBridge", { enumerable: true, get: function () { return hooks_1.useMcpBridge; } });
-Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return hooks_1.useTheme; } });
-Object.defineProperty(exports, "useDisplayMode", { enumerable: true, get: function () { return hooks_1.useDisplayMode; } });
-Object.defineProperty(exports, "useHostContext", { enumerable: true, get: function () { return hooks_1.useHostContext; } });
-Object.defineProperty(exports, "useCapability", { enumerable: true, get: function () { return hooks_1.useCapability; } });
-// Tool hooks
-Object.defineProperty(exports, "useToolInput", { enumerable: true, get: function () { return hooks_1.useToolInput; } });
-Object.defineProperty(exports, "useToolOutput", { enumerable: true, get: function () { return hooks_1.useToolOutput; } });
-Object.defineProperty(exports, "useStructuredContent", { enumerable: true, get: function () { return hooks_1.useStructuredContent; } });
-Object.defineProperty(exports, "useCallTool", { enumerable: true, get: function () { return hooks_1.useCallTool; } });
-Object.defineProperty(exports, "useToolCalls", { enumerable: true, get: function () { return hooks_1.useToolCalls; } });
-Object.defineProperty(exports, "useSendMessage", { enumerable: true, get: function () { return hooks_1.useSendMessage; } });
-Object.defineProperty(exports, "useOpenLink", { enumerable: true, get: function () { return hooks_1.useOpenLink; } });
-// Utilities (deprecated, use render/prerender instead)
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "renderChildrenToString", { enumerable: true, get: function () { return utils_1.renderChildrenToString; } });
-Object.defineProperty(exports, "isBrowser", { enumerable: true, get: function () { return utils_1.isBrowser; } });
-Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return utils_1.isServer; } });
-//# sourceMappingURL=index.js.map

package/src/react/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;;;AAEH,mBAAmB;AACnB,+BAA0D;AAAjD,4FAAA,IAAI,OAAA;AAAE,kGAAA,UAAU,OAAA;AAAE,sGAAA,cAAc,OAAA;AACzC,iCAA8D;AAArD,8FAAA,KAAK,OAAA;AAAE,oGAAA,WAAW,OAAA;AAAE,wGAAA,eAAe,OAAA;AAC5C,mCAAkE;AAAzD,gGAAA,MAAM,OAAA;AAAE,sGAAA,YAAY,OAAA;AAAE,0GAAA,gBAAgB,OAAA;AAC/C,iCAA8D;AAArD,8FAAA,KAAK,OAAA;AAAE,oGAAA,WAAW,OAAA;AAAE,wGAAA,eAAe,OAAA;AAE5C,6BAA6B;AAC7B,iCAwBiB;AAvBf,WAAW;AACX,0GAAA,iBAAiB,OAAA;AACjB,eAAe;AACf,4GAAA,mBAAmB,OAAA;AACnB,qGAAA,YAAY,OAAA;AACZ,iGAAA,QAAQ,OAAA;AACR,uGAAA,cAAc,OAAA;AACd,uGAAA,cAAc,OAAA;AACd,sGAAA,aAAa,OAAA;AACb,aAAa;AACb,qGAAA,YAAY,OAAA;AACZ,sGAAA,aAAa,OAAA;AACb,6GAAA,oBAAoB,OAAA;AACpB,oGAAA,WAAW,OAAA;AACX,qGAAA,YAAY,OAAA;AACZ,uGAAA,cAAc,OAAA;AACd,oGAAA,WAAW,OAAA;AAwBb,uDAAuD;AACvD,iCAAsE;AAA7D,+GAAA,sBAAsB,OAAA;AAAE,kGAAA,SAAS,OAAA;AAAE,iGAAA,QAAQ,OAAA","sourcesContent":["/**\n * @file index.ts\n * @description React components and hooks for FrontMCP UI.\n *\n * These are pure React components that can be used:\n * 1. As regular React components in your app\n * 2. To generate static HTML via render functions\n * 3. With hooks to access the MCP bridge\n *\n * @example React usage\n * ```tsx\n * import { Card, Badge, Button, Alert } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <Card title=\"Welcome\" variant=\"elevated\">\n *       <Badge variant=\"success\">New</Badge>\n *       <p>Card content here</p>\n *       <Button variant=\"primary\">Click Me</Button>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @example Static HTML generation\n * ```typescript\n * import { renderCard, renderBadge } from '@frontmcp/ui/react';\n *\n * const cardHtml = await renderCard({\n *   title: 'Welcome',\n *   variant: 'elevated',\n *   children: '<p>Content</p>',\n * });\n * ```\n *\n * @example Using hooks with the MCP bridge\n * ```tsx\n * import {\n *   McpBridgeProvider,\n *   useMcpBridge,\n *   useToolInput,\n *   useCallTool,\n *   useTheme,\n * } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <McpBridgeProvider>\n *       <WeatherWidget />\n *     </McpBridgeProvider>\n *   );\n * }\n *\n * function WeatherWidget() {\n *   const input = useToolInput<{ location: string }>();\n *   const theme = useTheme();\n *   const [getWeather, { data, loading }] = useCallTool('get_weather');\n *\n *   return (\n *     <Card title={`Weather for ${input?.location}`} variant={theme === 'dark' ? 'elevated' : 'default'}>\n *       {loading ? 'Loading...' : data?.temperature}\n *     </Card>\n *   );\n * }\n * ```\n *\n * @module @frontmcp/ui/react\n */\n\n// React Components\nexport { Card, renderCard, renderCardSync } from './Card';\nexport { Badge, renderBadge, renderBadgeSync } from './Badge';\nexport { Button, renderButton, renderButtonSync } from './Button';\nexport { Alert, renderAlert, renderAlertSync } from './Alert';\n\n// React Hooks for MCP Bridge\nexport {\n  // Provider\n  McpBridgeProvider,\n  // Bridge hooks\n  useMcpBridgeContext,\n  useMcpBridge,\n  useTheme,\n  useDisplayMode,\n  useHostContext,\n  useCapability,\n  // Tool hooks\n  useToolInput,\n  useToolOutput,\n  useStructuredContent,\n  useCallTool,\n  useToolCalls,\n  useSendMessage,\n  useOpenLink,\n  // Types\n  type McpBridgeContextValue,\n  type McpBridgeProviderProps,\n  type ToolState,\n  type UseCallToolOptions,\n  type UseCallToolReturn,\n} from './hooks';\n\n// Component Types\nexport type { CardProps, CardRenderProps, CardVariant, CardSize } from './Card';\nexport type { BadgeProps, BadgeRenderProps, BadgeVariant, BadgeSize } from './Badge';\nexport type { ButtonProps, ButtonRenderProps, ButtonVariant, ButtonSize } from './Button';\nexport type { AlertProps, AlertRenderProps, AlertVariant } from './Alert';\n\n// Note: ButtonProps and AlertProps are now exported from the new .tsx files above\n// The types.ts file is deprecated\n\n// Legacy web component types (deprecated, will be removed)\nexport type { FmcpCard, FmcpBadge, FmcpButton, FmcpAlert } from './types';\n\n// Legacy schema types (deprecated, use styles/variants instead)\nexport type { CardOptions, BadgeOptions, ButtonOptions, AlertOptions } from './types';\n\n// Utilities (deprecated, use render/prerender instead)\nexport { renderChildrenToString, isBrowser, isServer } from './utils';\n"]}

package/src/react/types.d.ts

@@ -1,105 +0,0 @@
-/**
- * @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 { CardOptions, CardVariant, CardSize, BadgeOptions, BadgeVariant, BadgeSize, ButtonOptions, AlertOptions } 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;
-}
-export type { CardOptions, CardVariant, CardSize, BadgeOptions, BadgeVariant, BadgeSize, ButtonOptions, AlertOptions };

package/src/react/types.js

@@ -1,12 +0,0 @@
-"use strict";
-/**
- * @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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

package/src/react/types.js.map

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

package/src/react/utils.d.ts

@@ -1,42 +0,0 @@
-/**
- * @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;

package/src/react/utils.js

@@ -1,99 +0,0 @@
-"use strict";
-/**
- * @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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderChildrenToString = renderChildrenToString;
-exports.isBrowser = isBrowser;
-exports.isServer = isServer;
-const base_1 = require("../layouts/base");
-// Lazy-load ReactDOMServer to avoid import errors in non-React environments
-let cachedReactDOMServer = null;
-/**
- * Get ReactDOMServer lazily (only when needed)
- */
-function getReactDOMServer() {
-    if (!cachedReactDOMServer) {
-        try {
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            cachedReactDOMServer = require('react-dom/server');
-        }
-        catch {
-            return null;
-        }
-    }
-    return cachedReactDOMServer;
-}
-/**
- * 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>])
- * ```
- */
-function renderChildrenToString(children) {
-    // Handle null/undefined
-    if (children == null) {
-        return '';
-    }
-    // Handle string - escape HTML
-    if (typeof children === 'string') {
-        return (0, base_1.escapeHtml)(children);
-    }
-    // Handle number - convert to string
-    if (typeof children === 'number') {
-        return String(children);
-    }
-    // Handle boolean - React doesn't render true/false
-    if (typeof children === 'boolean') {
-        return '';
-    }
-    // Handle React elements and arrays - use ReactDOMServer
-    try {
-        const server = getReactDOMServer();
-        if (server) {
-            return server.renderToStaticMarkup(children);
-        }
-        // Fallback for non-React environments
-        return String(children);
-    }
-    catch {
-        // Fallback for non-React environments
-        return String(children);
-    }
-}
-/**
- * Check if we're running in a browser environment
- */
-function isBrowser() {
-    return typeof window !== 'undefined';
-}
-/**
- * Check if we're running in a Node.js environment
- */
-function isServer() {
-    return typeof window === 'undefined';
-}
-//# sourceMappingURL=utils.js.map

package/src/react/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/react/utils.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;AA8CH,wDAiCC;AAKD,8BAEC;AAKD,4BAEC;AA1FD,0CAA6C;AAE7C,4EAA4E;AAC5E,IAAI,oBAAoB,GAA6C,IAAI,CAAC;AAE1E;;GAEG;AACH,SAAS,iBAAiB;IACxB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC1B,IAAI,CAAC;YACH,iEAAiE;YACjE,oBAAoB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;QACrD,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IACD,OAAO,oBAAoB,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,SAAgB,sBAAsB,CAAC,QAAmB;IACxD,wBAAwB;IACxB,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,8BAA8B;IAC9B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,IAAA,iBAAU,EAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC;IAED,oCAAoC;IACpC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC;IAED,mDAAmD;IACnD,IAAI,OAAO,QAAQ,KAAK,SAAS,EAAE,CAAC;QAClC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,wDAAwD;IACxD,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;QACnC,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,MAAM,CAAC,oBAAoB,CAAC,QAA8B,CAAC,CAAC;QACrE,CAAC;QACD,sCAAsC;QACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC;IAAC,MAAM,CAAC;QACP,sCAAsC;QACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC;AACH,CAAC;AAED;;GAEG;AACH,SAAgB,SAAS;IACvB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC;AAED;;GAEG;AACH,SAAgB,QAAQ;IACtB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC","sourcesContent":["/**\n * @file utils.ts\n * @description Utility functions for React wrapper components.\n *\n * Provides helpers for converting React children to HTML strings\n * for SSR compatibility with FrontMCP web components.\n *\n * @module @frontmcp/ui/react/utils\n */\n\nimport type { ReactNode } from 'react';\nimport { escapeHtml } from '../layouts/base';\n\n// Lazy-load ReactDOMServer to avoid import errors in non-React environments\nlet cachedReactDOMServer: typeof import('react-dom/server') | null = null;\n\n/**\n * Get ReactDOMServer lazily (only when needed)\n */\nfunction getReactDOMServer(): typeof import('react-dom/server') | null {\n  if (!cachedReactDOMServer) {\n    try {\n      // eslint-disable-next-line @typescript-eslint/no-require-imports\n      cachedReactDOMServer = require('react-dom/server');\n    } catch {\n      return null;\n    }\n  }\n  return cachedReactDOMServer;\n}\n\n/**\n * Convert React children to an HTML string for SSR.\n *\n * - Strings are escaped via escapeHtml()\n * - Numbers are converted to strings\n * - ReactNode is rendered via ReactDOMServer.renderToStaticMarkup()\n * - null/undefined return empty string\n *\n * @param children - React children to convert\n * @returns HTML string representation\n *\n * @example\n * ```tsx\n * // String children\n * renderChildrenToString('Hello') // 'Hello' (escaped)\n *\n * // React element children\n * renderChildrenToString(<div>Test</div>) // '<div>Test</div>'\n *\n * // Mixed children\n * renderChildrenToString(['Hello', <span>World</span>])\n * ```\n */\nexport function renderChildrenToString(children: ReactNode): string {\n  // Handle null/undefined\n  if (children == null) {\n    return '';\n  }\n\n  // Handle string - escape HTML\n  if (typeof children === 'string') {\n    return escapeHtml(children);\n  }\n\n  // Handle number - convert to string\n  if (typeof children === 'number') {\n    return String(children);\n  }\n\n  // Handle boolean - React doesn't render true/false\n  if (typeof children === 'boolean') {\n    return '';\n  }\n\n  // Handle React elements and arrays - use ReactDOMServer\n  try {\n    const server = getReactDOMServer();\n    if (server) {\n      return server.renderToStaticMarkup(children as React.ReactElement);\n    }\n    // Fallback for non-React environments\n    return String(children);\n  } catch {\n    // Fallback for non-React environments\n    return String(children);\n  }\n}\n\n/**\n * Check if we're running in a browser environment\n */\nexport function isBrowser(): boolean {\n  return typeof window !== 'undefined';\n}\n\n/**\n * Check if we're running in a Node.js environment\n */\nexport function isServer(): boolean {\n  return typeof window === 'undefined';\n}\n"]}

package/src/registry/index.d.ts

@@ -1,45 +0,0 @@
-/**
- * @frontmcp/ui Registry Module
- *
- * Standalone widget building without @frontmcp/sdk.
- *
- * This module enables external platforms (like AgentLink) to use FrontMCP's
- * widget compilation and rendering system without requiring the full SDK.
- *
- * @example
- * ```typescript
- * import {
- *   ToolUIRegistry,
- *   renderToolTemplateAsync,
- *   buildStaticWidgetUri,
- * } from '@frontmcp/ui/registry';
- *
- * // Create a registry for widget management
- * const registry = new ToolUIRegistry();
- *
- * // Compile static widgets at startup
- * await registry.compileStaticWidgetAsync({
- *   toolName: 'get_weather',
- *   template: WeatherWidget,
- *   uiConfig: { template: WeatherWidget, ... },
- * });
- *
- * // Render inline widgets at tool call time
- * const result = await registry.renderAndRegisterAsync({
- *   toolName: 'get_weather',
- *   requestId: 'abc123',
- *   input: { location: 'London' },
- *   output: { temp: 72 },
- *   uiConfig,
- *   platformType: 'openai',
- * });
- * ```
- *
- * @packageDocumentation
- */
-export { ToolUIRegistry } from './tool-ui.registry';
-export type { RenderOptions, UIRenderResult, CompileStaticWidgetOptions, HybridComponentPayload, BuildHybridComponentPayloadOptions, } from './tool-ui.registry';
-export { renderToolTemplate, renderToolTemplateAsync, isReactComponent, hasUIConfig, containsMdxSyntax, } from './render-template';
-export type { RenderTemplateOptions } from './render-template';
-export { UI_RESOURCE_SCHEME, isUIResourceUri, isStaticWidgetUri, parseWidgetUri, buildStaticWidgetUri, getUIResourceMimeType, } from './uri-utils';
-export type { ParsedWidgetUri } from './uri-utils';

package/src/registry/index.js

@@ -1,67 +0,0 @@
-"use strict";
-/**
- * @frontmcp/ui Registry Module
- *
- * Standalone widget building without @frontmcp/sdk.
- *
- * This module enables external platforms (like AgentLink) to use FrontMCP's
- * widget compilation and rendering system without requiring the full SDK.
- *
- * @example
- * ```typescript
- * import {
- *   ToolUIRegistry,
- *   renderToolTemplateAsync,
- *   buildStaticWidgetUri,
- * } from '@frontmcp/ui/registry';
- *
- * // Create a registry for widget management
- * const registry = new ToolUIRegistry();
- *
- * // Compile static widgets at startup
- * await registry.compileStaticWidgetAsync({
- *   toolName: 'get_weather',
- *   template: WeatherWidget,
- *   uiConfig: { template: WeatherWidget, ... },
- * });
- *
- * // Render inline widgets at tool call time
- * const result = await registry.renderAndRegisterAsync({
- *   toolName: 'get_weather',
- *   requestId: 'abc123',
- *   input: { location: 'London' },
- *   output: { temp: 72 },
- *   uiConfig,
- *   platformType: 'openai',
- * });
- * ```
- *
- * @packageDocumentation
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUIResourceMimeType = exports.buildStaticWidgetUri = exports.parseWidgetUri = exports.isStaticWidgetUri = exports.isUIResourceUri = exports.UI_RESOURCE_SCHEME = exports.containsMdxSyntax = exports.hasUIConfig = exports.isReactComponent = exports.renderToolTemplateAsync = exports.renderToolTemplate = exports.ToolUIRegistry = void 0;
-// ============================================
-// Core Registry
-// ============================================
-var tool_ui_registry_1 = require("./tool-ui.registry");
-Object.defineProperty(exports, "ToolUIRegistry", { enumerable: true, get: function () { return tool_ui_registry_1.ToolUIRegistry; } });
-// ============================================
-// Template Rendering
-// ============================================
-var render_template_1 = require("./render-template");
-Object.defineProperty(exports, "renderToolTemplate", { enumerable: true, get: function () { return render_template_1.renderToolTemplate; } });
-Object.defineProperty(exports, "renderToolTemplateAsync", { enumerable: true, get: function () { return render_template_1.renderToolTemplateAsync; } });
-Object.defineProperty(exports, "isReactComponent", { enumerable: true, get: function () { return render_template_1.isReactComponent; } });
-Object.defineProperty(exports, "hasUIConfig", { enumerable: true, get: function () { return render_template_1.hasUIConfig; } });
-Object.defineProperty(exports, "containsMdxSyntax", { enumerable: true, get: function () { return render_template_1.containsMdxSyntax; } });
-// ============================================
-// URI Utilities
-// ============================================
-var uri_utils_1 = require("./uri-utils");
-Object.defineProperty(exports, "UI_RESOURCE_SCHEME", { enumerable: true, get: function () { return uri_utils_1.UI_RESOURCE_SCHEME; } });
-Object.defineProperty(exports, "isUIResourceUri", { enumerable: true, get: function () { return uri_utils_1.isUIResourceUri; } });
-Object.defineProperty(exports, "isStaticWidgetUri", { enumerable: true, get: function () { return uri_utils_1.isStaticWidgetUri; } });
-Object.defineProperty(exports, "parseWidgetUri", { enumerable: true, get: function () { return uri_utils_1.parseWidgetUri; } });
-Object.defineProperty(exports, "buildStaticWidgetUri", { enumerable: true, get: function () { return uri_utils_1.buildStaticWidgetUri; } });
-Object.defineProperty(exports, "getUIResourceMimeType", { enumerable: true, get: function () { return uri_utils_1.getUIResourceMimeType; } });
-//# sourceMappingURL=index.js.map

package/src/registry/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/registry/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;;;AAEH,+CAA+C;AAC/C,gBAAgB;AAChB,+CAA+C;AAE/C,uDAAoD;AAA3C,kHAAA,cAAc,OAAA;AASvB,+CAA+C;AAC/C,qBAAqB;AACrB,+CAA+C;AAE/C,qDAM2B;AALzB,qHAAA,kBAAkB,OAAA;AAClB,0HAAA,uBAAuB,OAAA;AACvB,mHAAA,gBAAgB,OAAA;AAChB,8GAAA,WAAW,OAAA;AACX,oHAAA,iBAAiB,OAAA;AAInB,+CAA+C;AAC/C,gBAAgB;AAChB,+CAA+C;AAE/C,yCAOqB;AANnB,+GAAA,kBAAkB,OAAA;AAClB,4GAAA,eAAe,OAAA;AACf,8GAAA,iBAAiB,OAAA;AACjB,2GAAA,cAAc,OAAA;AACd,iHAAA,oBAAoB,OAAA;AACpB,kHAAA,qBAAqB,OAAA","sourcesContent":["/**\n * @frontmcp/ui Registry Module\n *\n * Standalone widget building without @frontmcp/sdk.\n *\n * This module enables external platforms (like AgentLink) to use FrontMCP's\n * widget compilation and rendering system without requiring the full SDK.\n *\n * @example\n * ```typescript\n * import {\n *   ToolUIRegistry,\n *   renderToolTemplateAsync,\n *   buildStaticWidgetUri,\n * } from '@frontmcp/ui/registry';\n *\n * // Create a registry for widget management\n * const registry = new ToolUIRegistry();\n *\n * // Compile static widgets at startup\n * await registry.compileStaticWidgetAsync({\n *   toolName: 'get_weather',\n *   template: WeatherWidget,\n *   uiConfig: { template: WeatherWidget, ... },\n * });\n *\n * // Render inline widgets at tool call time\n * const result = await registry.renderAndRegisterAsync({\n *   toolName: 'get_weather',\n *   requestId: 'abc123',\n *   input: { location: 'London' },\n *   output: { temp: 72 },\n *   uiConfig,\n *   platformType: 'openai',\n * });\n * ```\n *\n * @packageDocumentation\n */\n\n// ============================================\n// Core Registry\n// ============================================\n\nexport { ToolUIRegistry } from './tool-ui.registry';\nexport type {\n  RenderOptions,\n  UIRenderResult,\n  CompileStaticWidgetOptions,\n  HybridComponentPayload,\n  BuildHybridComponentPayloadOptions,\n} from './tool-ui.registry';\n\n// ============================================\n// Template Rendering\n// ============================================\n\nexport {\n  renderToolTemplate,\n  renderToolTemplateAsync,\n  isReactComponent,\n  hasUIConfig,\n  containsMdxSyntax,\n} from './render-template';\nexport type { RenderTemplateOptions } from './render-template';\n\n// ============================================\n// URI Utilities\n// ============================================\n\nexport {\n  UI_RESOURCE_SCHEME,\n  isUIResourceUri,\n  isStaticWidgetUri,\n  parseWidgetUri,\n  buildStaticWidgetUri,\n  getUIResourceMimeType,\n} from './uri-utils';\nexport type { ParsedWidgetUri } from './uri-utils';\n"]}

package/src/registry/render-template.d.ts

@@ -1,86 +0,0 @@
-/**
- * Template Rendering
- *
- * Executes tool UI templates with proper context and helpers.
- * Supports sync rendering for HTML strings/template functions,
- * async rendering for React components via SSR, and MDX rendering.
- *
- * @packageDocumentation
- */
-import type { UITemplateConfig, TemplateBuilderFn } from '../types';
-/**
- * Check if a string contains MDX syntax (Markdown + JSX).
- *
- * Looks for:
- * - JSX component tags (PascalCase): `<Component />`
- * - JS expressions: `{variable}` or `{items.map(...)}`
- * - Import/export statements
- * - Frontmatter: `---\n...\n---`
- */
-export declare function containsMdxSyntax(source: string): boolean;
-/**
- * Check if a template is a React component (not a template builder function).
- *
- * React components are distinguished from template builder functions by:
- * - Having $$typeof symbol (React.memo, forwardRef, etc.)
- * - Having prototype.isReactComponent (class components)
- * - PascalCase naming convention (function components)
- *
- * Template builder functions take (ctx) and return a string, while
- * React components take props and return JSX.Element.
- */
-export declare function isReactComponent(template: unknown): boolean;
-/**
- * Options for rendering a tool template.
- */
-export interface RenderTemplateOptions {
-    /** The template configuration from the tool */
-    template: TemplateBuilderFn<unknown, unknown> | string | ((props: any) => any);
-    /** Tool input arguments */
-    input: Record<string, unknown>;
-    /** Tool output (raw result from execute) */
-    output: unknown;
-    /** Structured content parsed from output */
-    structuredContent?: unknown;
-    /** Custom MDX components to use in MDX templates */
-    mdxComponents?: Record<string, any>;
-}
-/**
- * Render a tool UI template.
- *
- * @param options - Template and context data
- * @returns Rendered HTML string
- * @throws Error if template execution fails
- */
-export declare function renderToolTemplate(options: RenderTemplateOptions): string;
-/**
- * Check if a tool has UI configuration.
- * Uses loose typing to handle variance issues with generic tool metadata.
- */
-export declare function hasUIConfig(metadata: {
-    ui?: unknown;
-}): metadata is {
-    ui: UITemplateConfig<unknown, unknown>;
-};
-/**
- * Render a tool UI template asynchronously.
- *
- * This version supports:
- * - React components via SSR
- * - MDX strings (Markdown + JSX) via @mdx-js/mdx
- * - HTML strings and template builder functions
- *
- * For React components:
- * - Dynamically imports react and react-dom/server
- * - Uses renderToString for SSR
- * - React components receive the template context as props
- *
- * For MDX templates:
- * - Detects MDX syntax (Markdown headers, JSX components, expressions)
- * - Compiles and renders via @frontmcp/ui's MDX renderer
- *
- * @param options - Template and context data
- * @returns Promise resolving to rendered HTML string
- * @throws Error if template execution or rendering fails
- */
-export declare function renderToolTemplateAsync(options: RenderTemplateOptions): Promise<string>;