@frontmcp/ui 0.5.0

package/src/react/index.js

@@ -0,0 +1,113 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,105 @@
+/**
+ * @file types.ts
+ * @description TypeScript types for React wrapper components.
+ *
+ * Re-exports element types from web-components for use with React refs,
+ * and defines React-specific prop interfaces.
+ *
+ * @module @frontmcp/ui/react/types
+ */
+import type { ReactNode } from 'react';
+import type { 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

@@ -0,0 +1,12 @@
+"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

@@ -0,0 +1 @@
+{"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

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

@@ -0,0 +1,99 @@
+"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

@@ -0,0 +1 @@
+{"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

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

@@ -0,0 +1,67 @@
+"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

@@ -0,0 +1 @@
+{"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

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