@frontmcp/ui 0.5.0

package/src/react/Card.d.ts

@@ -0,0 +1,103 @@
+/**
+ * @file Card.tsx
+ * @description React Card component with static HTML rendering support.
+ *
+ * This is the single source of truth for the Card component. It can be used:
+ * 1. As a React component: `<Card title="Hello">Content</Card>`
+ * 2. As a static HTML generator: `await renderCard({ title: 'Hello', children: 'Content' })`
+ *
+ * @example React usage
+ * ```tsx
+ * import { Card } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <Card title="Welcome" variant="elevated">
+ *       <p>Card content goes here</p>
+ *     </Card>
+ *   );
+ * }
+ * ```
+ *
+ * @example Static HTML generation
+ * ```typescript
+ * import { renderCard } from '@frontmcp/ui/react';
+ *
+ * const html = await renderCard({
+ *   title: 'Product',
+ *   subtitle: 'Details',
+ *   variant: 'elevated',
+ *   children: '<p>Product description...</p>',
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/react/Card
+ */
+import type { ReactNode, ReactElement } from 'react';
+import { type CardVariant, type CardSize } from '../styles/variants';
+/**
+ * Card component props
+ */
+export interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card subtitle/description */
+    subtitle?: string;
+    /** Header actions (React elements) */
+    headerActions?: ReactNode;
+    /** Footer content (React elements) */
+    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;
+}
+/**
+ * Card component.
+ *
+ * A versatile container component for grouping related content.
+ * Uses Tailwind CSS classes for styling.
+ */
+export declare function Card({ title, subtitle, headerActions, footer, variant, size, className, id, clickable, href, children, }: CardProps): ReactElement;
+/**
+ * Props for static render functions (children is always a string)
+ */
+export interface CardRenderProps extends Omit<CardProps, 'children' | 'headerActions' | 'footer'> {
+    /** Card content as HTML string */
+    children?: string;
+    /** Header actions as HTML string */
+    headerActions?: string;
+    /** Footer content as HTML string */
+    footer?: string;
+}
+/**
+ * Render Card component to static HTML string (async).
+ *
+ * Uses React 19's prerender API for optimal static HTML generation.
+ *
+ * @param props - Card props (with string children)
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderCard(props: CardRenderProps): Promise<string>;
+/**
+ * Render Card component to static HTML string (sync).
+ *
+ * Uses React's renderToStaticMarkup for synchronous rendering.
+ * Does NOT wait for Suspense boundaries.
+ *
+ * @param props - Card props (with string children)
+ * @returns HTML string
+ */
+export declare function renderCardSync(props: CardRenderProps): string;
+export type { CardVariant, CardSize };
+export default Card;

package/src/react/Card.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = Card;
+exports.renderCard = renderCard;
+exports.renderCardSync = renderCardSync;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const variants_1 = require("../styles/variants");
+const prerender_1 = require("../render/prerender");
+/**
+ * Card component.
+ *
+ * A versatile container component for grouping related content.
+ * Uses Tailwind CSS classes for styling.
+ */
+function Card({ title, subtitle, headerActions, footer, variant = 'default', size = 'md', className, id, clickable, href, children, }) {
+    const variantClasses = (0, variants_1.getCardVariantClasses)(variant);
+    const sizeClasses = (0, variants_1.getCardSizeClasses)(size);
+    const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';
+    const allClasses = (0, variants_1.cn)(variantClasses, sizeClasses, clickableClasses, className);
+    const hasHeader = title || subtitle || headerActions;
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [title && (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-text-primary", children: title }), subtitle && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-text-secondary mt-1", children: subtitle })] }), headerActions && (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: headerActions })] })), children, footer && (0, jsx_runtime_1.jsx)("div", { className: "mt-4 pt-4 border-t border-divider", children: footer })] }));
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)("a", { href: href, className: allClasses, id: id, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: allClasses, id: id, children: content }));
+}
+/**
+ * Render Card component to static HTML string (async).
+ *
+ * Uses React 19's prerender API for optimal static HTML generation.
+ *
+ * @param props - Card props (with string children)
+ * @returns Promise resolving to HTML string
+ */
+async function renderCard(props) {
+    const { children, headerActions, footer, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Card, { ...rest, headerActions: headerActions ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : undefined, footer: footer ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: footer } }) : undefined, children: children ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: children } }) : undefined }));
+    return (0, prerender_1.renderToString)(element);
+}
+/**
+ * Render Card component to static HTML string (sync).
+ *
+ * Uses React's renderToStaticMarkup for synchronous rendering.
+ * Does NOT wait for Suspense boundaries.
+ *
+ * @param props - Card props (with string children)
+ * @returns HTML string
+ */
+function renderCardSync(props) {
+    const { children, headerActions, footer, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Card, { ...rest, headerActions: headerActions ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : undefined, footer: footer ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: footer } }) : undefined, children: children ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: children } }) : undefined }));
+    return (0, prerender_1.renderToStringSync)(element);
+}
+exports.default = Card;
+//# sourceMappingURL=Card.js.map

package/src/react/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/react/Card.tsx"],"names":[],"mappings":";;AA2EA,oBAiDC;AAsBD,gCAYC;AAWD,wCAYC;;AA/ID,iDAAoH;AACpH,mDAAyE;AA8BzE;;;;;GAKG;AACH,SAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,GACE;IACV,MAAM,cAAc,GAAG,IAAA,gCAAqB,EAAC,OAAO,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,IAAA,6BAAkB,EAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,gBAAgB,GAAG,SAAS,CAAC,CAAC,CAAC,kDAAkD,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7F,MAAM,UAAU,GAAG,IAAA,aAAE,EAAC,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAEhF,MAAM,SAAS,GAAG,KAAK,IAAI,QAAQ,IAAI,aAAa,CAAC;IAErD,MAAM,OAAO,GAAG,CACd,6DACG,SAAS,IAAI,CACZ,iCAAK,SAAS,EAAC,uCAAuC,aACpD,4CACG,KAAK,IAAI,+BAAI,SAAS,EAAC,yCAAyC,YAAE,KAAK,GAAM,EAC7E,QAAQ,IAAI,8BAAG,SAAS,EAAC,kCAAkC,YAAE,QAAQ,GAAK,IACvE,EACL,aAAa,IAAI,gCAAK,SAAS,EAAC,yBAAyB,YAAE,aAAa,GAAO,IAC5E,CACP,EACA,QAAQ,EACR,MAAM,IAAI,gCAAK,SAAS,EAAC,mCAAmC,YAAE,MAAM,GAAO,IAC3E,CACJ,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,8BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,YACzC,OAAO,GACN,CACL,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gCAAK,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,YAC/B,OAAO,GACJ,CACP,CAAC;AACJ,CAAC;AAcD;;;;;;;GAOG;AACI,KAAK,UAAU,UAAU,CAAC,KAAsB;IACrD,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,OAAO,GAAG,CACd,uBAAC,IAAI,OACC,IAAI,EACR,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,EACvG,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAEjF,QAAQ,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,GAC1E,CACR,CAAC;IACF,OAAO,IAAA,0BAAc,EAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,cAAc,CAAC,KAAsB;IACnD,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,OAAO,GAAG,CACd,uBAAC,IAAI,OACC,IAAI,EACR,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,EACvG,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAEjF,QAAQ,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,GAC1E,CACR,CAAC;IACF,OAAO,IAAA,8BAAkB,EAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAKD,kBAAe,IAAI,CAAC","sourcesContent":["/**\n * @file Card.tsx\n * @description React Card component with static HTML rendering support.\n *\n * This is the single source of truth for the Card component. It can be used:\n * 1. As a React component: `<Card title=\"Hello\">Content</Card>`\n * 2. As a static HTML generator: `await renderCard({ title: 'Hello', children: 'Content' })`\n *\n * @example React usage\n * ```tsx\n * import { Card } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <Card title=\"Welcome\" variant=\"elevated\">\n *       <p>Card content goes here</p>\n *     </Card>\n *   );\n * }\n * ```\n *\n * @example Static HTML generation\n * ```typescript\n * import { renderCard } from '@frontmcp/ui/react';\n *\n * const html = await renderCard({\n *   title: 'Product',\n *   subtitle: 'Details',\n *   variant: 'elevated',\n *   children: '<p>Product description...</p>',\n * });\n * ```\n *\n * @module @frontmcp/ui/react/Card\n */\n\nimport React from 'react';\nimport type { ReactNode, ReactElement } from 'react';\nimport { type CardVariant, type CardSize, getCardVariantClasses, getCardSizeClasses, cn } from '../styles/variants';\nimport { renderToString, renderToStringSync } from '../render/prerender';\n\n/**\n * Card component props\n */\nexport interface CardProps {\n  /** Card title */\n  title?: string;\n  /** Card subtitle/description */\n  subtitle?: string;\n  /** Header actions (React elements) */\n  headerActions?: ReactNode;\n  /** Footer content (React elements) */\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 * Card component.\n *\n * A versatile container component for grouping related content.\n * Uses Tailwind CSS classes for styling.\n */\nexport function Card({\n  title,\n  subtitle,\n  headerActions,\n  footer,\n  variant = 'default',\n  size = 'md',\n  className,\n  id,\n  clickable,\n  href,\n  children,\n}: CardProps): ReactElement {\n  const variantClasses = getCardVariantClasses(variant);\n  const sizeClasses = getCardSizeClasses(size);\n  const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';\n  const allClasses = cn(variantClasses, sizeClasses, clickableClasses, className);\n\n  const hasHeader = title || subtitle || headerActions;\n\n  const content = (\n    <>\n      {hasHeader && (\n        <div className=\"flex items-start justify-between mb-4\">\n          <div>\n            {title && <h3 className=\"text-lg font-semibold text-text-primary\">{title}</h3>}\n            {subtitle && <p className=\"text-sm text-text-secondary mt-1\">{subtitle}</p>}\n          </div>\n          {headerActions && <div className=\"flex items-center gap-2\">{headerActions}</div>}\n        </div>\n      )}\n      {children}\n      {footer && <div className=\"mt-4 pt-4 border-t border-divider\">{footer}</div>}\n    </>\n  );\n\n  if (href) {\n    return (\n      <a href={href} className={allClasses} id={id}>\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <div className={allClasses} id={id}>\n      {content}\n    </div>\n  );\n}\n\n/**\n * Props for static render functions (children is always a string)\n */\nexport interface CardRenderProps extends Omit<CardProps, 'children' | 'headerActions' | 'footer'> {\n  /** Card content as HTML string */\n  children?: string;\n  /** Header actions as HTML string */\n  headerActions?: string;\n  /** Footer content as HTML string */\n  footer?: string;\n}\n\n/**\n * Render Card component to static HTML string (async).\n *\n * Uses React 19's prerender API for optimal static HTML generation.\n *\n * @param props - Card props (with string children)\n * @returns Promise resolving to HTML string\n */\nexport async function renderCard(props: CardRenderProps): Promise<string> {\n  const { children, headerActions, footer, ...rest } = props;\n  const element = (\n    <Card\n      {...rest}\n      headerActions={headerActions ? <span dangerouslySetInnerHTML={{ __html: headerActions }} /> : undefined}\n      footer={footer ? <span dangerouslySetInnerHTML={{ __html: footer }} /> : undefined}\n    >\n      {children ? <span dangerouslySetInnerHTML={{ __html: children }} /> : undefined}\n    </Card>\n  );\n  return renderToString(element);\n}\n\n/**\n * Render Card component to static HTML string (sync).\n *\n * Uses React's renderToStaticMarkup for synchronous rendering.\n * Does NOT wait for Suspense boundaries.\n *\n * @param props - Card props (with string children)\n * @returns HTML string\n */\nexport function renderCardSync(props: CardRenderProps): string {\n  const { children, headerActions, footer, ...rest } = props;\n  const element = (\n    <Card\n      {...rest}\n      headerActions={headerActions ? <span dangerouslySetInnerHTML={{ __html: headerActions }} /> : undefined}\n      footer={footer ? <span dangerouslySetInnerHTML={{ __html: footer }} /> : undefined}\n    >\n      {children ? <span dangerouslySetInnerHTML={{ __html: children }} /> : undefined}\n    </Card>\n  );\n  return renderToStringSync(element);\n}\n\n// Re-export types\nexport type { CardVariant, CardSize };\n\nexport default Card;\n"]}

package/src/react/hooks/context.d.ts

@@ -0,0 +1,178 @@
+/**
+ * @file context.tsx
+ * @description React context for FrontMcpBridge.
+ *
+ * Provides a context provider that initializes and exposes the MCP bridge
+ * to all child components via hooks.
+ *
+ * @example
+ * ```tsx
+ * import { McpBridgeProvider, useMcpBridge } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <McpBridgeProvider>
+ *       <MyComponent />
+ *     </McpBridgeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/react/hooks
+ */
+import { type ReactNode } from 'react';
+import type { FrontMcpBridgeInterface, BridgeConfig, AdapterCapabilities, HostContext, DisplayMode } from '../../bridge/types';
+/**
+ * MCP Bridge context value.
+ */
+export interface McpBridgeContextValue {
+    /** The bridge instance (null until initialized) */
+    bridge: FrontMcpBridgeInterface | null;
+    /** Whether the bridge is currently initializing */
+    loading: boolean;
+    /** Initialization error, if any */
+    error: Error | null;
+    /** Whether the bridge is initialized and ready */
+    ready: boolean;
+    /** Current adapter ID */
+    adapterId: string | undefined;
+    /** Current adapter capabilities */
+    capabilities: AdapterCapabilities | undefined;
+}
+/**
+ * Props for McpBridgeProvider.
+ */
+export interface McpBridgeProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** Bridge configuration */
+    config?: BridgeConfig;
+    /** Callback when bridge is ready */
+    onReady?: (bridge: FrontMcpBridgeInterface) => void;
+    /** Callback when bridge initialization fails */
+    onError?: (error: Error) => void;
+}
+/**
+ * Provider component that initializes the MCP bridge.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <McpBridgeProvider>
+ *   <App />
+ * </McpBridgeProvider>
+ * ```
+ *
+ * @example With configuration
+ * ```tsx
+ * <McpBridgeProvider
+ *   config={{ debug: true, forceAdapter: 'generic' }}
+ *   onReady={(bridge) => console.log('Bridge ready:', bridge.adapterId)}
+ *   onError={(err) => console.error('Bridge error:', err)}
+ * >
+ *   <App />
+ * </McpBridgeProvider>
+ * ```
+ */
+export declare function McpBridgeProvider({ children, config, onReady, onError }: McpBridgeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the MCP bridge context.
+ *
+ * During client-side rendering, must be used within a McpBridgeProvider.
+ * During SSR (outside of provider), returns a default "not ready" state.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { bridge, loading, error, ready } = useMcpBridgeContext();
+ *
+ *   if (loading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!ready) return null;
+ *
+ *   return <div>Adapter: {bridge.adapterId}</div>;
+ * }
+ * ```
+ */
+export declare function useMcpBridgeContext(): McpBridgeContextValue;
+/**
+ * Hook to get the MCP bridge instance.
+ * Returns null while loading or if not initialized.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const bridge = useMcpBridge();
+ *
+ *   if (!bridge) return <div>Loading...</div>;
+ *
+ *   const theme = bridge.getTheme();
+ *   const input = bridge.getToolInput();
+ *
+ *   return <div>Theme: {theme}</div>;
+ * }
+ * ```
+ */
+export declare function useMcpBridge(): FrontMcpBridgeInterface | null;
+/**
+ * Hook to get the current theme from the bridge.
+ * Automatically updates when theme changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ *   return <div className={theme === 'dark' ? 'bg-black' : 'bg-white'}>...</div>;
+ * }
+ * ```
+ */
+export declare function useTheme(): 'light' | 'dark';
+/**
+ * Hook to get the current display mode from the bridge.
+ * Automatically updates when display mode changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const displayMode = useDisplayMode();
+ *   return <div>Mode: {displayMode}</div>;
+ * }
+ * ```
+ */
+export declare function useDisplayMode(): DisplayMode;
+/**
+ * Hook to get the full host context from the bridge.
+ * Automatically updates when context changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const context = useHostContext();
+ *   return (
+ *     <div>
+ *       Theme: {context?.theme}
+ *       Locale: {context?.locale}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useHostContext(): HostContext | null;
+/**
+ * Hook to check if the bridge has a specific capability.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const canCallTools = useCapability('canCallTools');
+ *   const canSendMessages = useCapability('canSendMessages');
+ *
+ *   return (
+ *     <div>
+ *       {canCallTools && <button>Call Tool</button>}
+ *       {canSendMessages && <button>Send Message</button>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useCapability(cap: keyof AdapterCapabilities): boolean;

package/src/react/hooks/context.js

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.McpBridgeProvider = McpBridgeProvider;
+exports.useMcpBridgeContext = useMcpBridgeContext;
+exports.useMcpBridge = useMcpBridge;
+exports.useTheme = useTheme;
+exports.useDisplayMode = useDisplayMode;
+exports.useHostContext = useHostContext;
+exports.useCapability = useCapability;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file context.tsx
+ * @description React context for FrontMcpBridge.
+ *
+ * Provides a context provider that initializes and exposes the MCP bridge
+ * to all child components via hooks.
+ *
+ * @example
+ * ```tsx
+ * import { McpBridgeProvider, useMcpBridge } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <McpBridgeProvider>
+ *       <MyComponent />
+ *     </McpBridgeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/react/hooks
+ */
+const react_1 = require("react");
+const bridge_factory_1 = require("../../bridge/core/bridge-factory");
+// ============================================
+// Context
+// ============================================
+const McpBridgeContext = (0, react_1.createContext)(null);
+/**
+ * Provider component that initializes the MCP bridge.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <McpBridgeProvider>
+ *   <App />
+ * </McpBridgeProvider>
+ * ```
+ *
+ * @example With configuration
+ * ```tsx
+ * <McpBridgeProvider
+ *   config={{ debug: true, forceAdapter: 'generic' }}
+ *   onReady={(bridge) => console.log('Bridge ready:', bridge.adapterId)}
+ *   onError={(err) => console.error('Bridge error:', err)}
+ * >
+ *   <App />
+ * </McpBridgeProvider>
+ * ```
+ */
+function McpBridgeProvider({ children, config, onReady, onError }) {
+    const [bridge, setBridge] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let mounted = true;
+        let bridgeInstance = null;
+        const initBridge = async () => {
+            try {
+                bridgeInstance = new bridge_factory_1.FrontMcpBridge(config);
+                await bridgeInstance.initialize();
+                if (mounted) {
+                    setBridge(bridgeInstance);
+                    setLoading(false);
+                    onReady?.(bridgeInstance);
+                }
+            }
+            catch (err) {
+                if (mounted) {
+                    const error = err instanceof Error ? err : new Error(String(err));
+                    setError(error);
+                    setLoading(false);
+                    onError?.(error);
+                }
+            }
+        };
+        initBridge();
+        return () => {
+            mounted = false;
+            if (bridgeInstance) {
+                bridgeInstance.dispose();
+            }
+        };
+    }, [config, onReady, onError]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        bridge,
+        loading,
+        error,
+        ready: !loading && !error && bridge !== null,
+        adapterId: bridge?.adapterId,
+        capabilities: bridge?.capabilities,
+    }), [bridge, loading, error]);
+    return (0, jsx_runtime_1.jsx)(McpBridgeContext.Provider, { value: contextValue, children: children });
+}
+// ============================================
+// Hooks
+// ============================================
+/**
+ * Default context value for SSR.
+ * When the component is rendered outside of McpBridgeProvider (e.g., during SSR),
+ * this value is returned instead of throwing an error.
+ */
+const SSR_DEFAULT_CONTEXT = {
+    bridge: null,
+    loading: false,
+    error: null,
+    ready: false,
+    adapterId: undefined,
+    capabilities: undefined,
+};
+/**
+ * Hook to access the MCP bridge context.
+ *
+ * During client-side rendering, must be used within a McpBridgeProvider.
+ * During SSR (outside of provider), returns a default "not ready" state.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { bridge, loading, error, ready } = useMcpBridgeContext();
+ *
+ *   if (loading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!ready) return null;
+ *
+ *   return <div>Adapter: {bridge.adapterId}</div>;
+ * }
+ * ```
+ */
+function useMcpBridgeContext() {
+    const context = (0, react_1.useContext)(McpBridgeContext);
+    // During SSR or outside of provider, return default context instead of throwing
+    if (!context) {
+        return SSR_DEFAULT_CONTEXT;
+    }
+    return context;
+}
+/**
+ * Hook to get the MCP bridge instance.
+ * Returns null while loading or if not initialized.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const bridge = useMcpBridge();
+ *
+ *   if (!bridge) return <div>Loading...</div>;
+ *
+ *   const theme = bridge.getTheme();
+ *   const input = bridge.getToolInput();
+ *
+ *   return <div>Theme: {theme}</div>;
+ * }
+ * ```
+ */
+function useMcpBridge() {
+    const { bridge } = useMcpBridgeContext();
+    return bridge;
+}
+/**
+ * Hook to get the current theme from the bridge.
+ * Automatically updates when theme changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ *   return <div className={theme === 'dark' ? 'bg-black' : 'bg-white'}>...</div>;
+ * }
+ * ```
+ */
+function useTheme() {
+    const { bridge, ready } = useMcpBridgeContext();
+    const [theme, setTheme] = (0, react_1.useState)('light');
+    (0, react_1.useEffect)(() => {
+        if (!ready || !bridge)
+            return;
+        // Get initial theme
+        setTheme(bridge.getTheme());
+        // Subscribe to changes
+        const unsubscribe = bridge.onContextChange((changes) => {
+            if (changes.theme) {
+                setTheme(changes.theme);
+            }
+        });
+        return unsubscribe;
+    }, [bridge, ready]);
+    return theme;
+}
+/**
+ * Hook to get the current display mode from the bridge.
+ * Automatically updates when display mode changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const displayMode = useDisplayMode();
+ *   return <div>Mode: {displayMode}</div>;
+ * }
+ * ```
+ */
+function useDisplayMode() {
+    const { bridge, ready } = useMcpBridgeContext();
+    const [displayMode, setDisplayMode] = (0, react_1.useState)('inline');
+    (0, react_1.useEffect)(() => {
+        if (!ready || !bridge)
+            return;
+        // Get initial display mode
+        setDisplayMode(bridge.getDisplayMode());
+        // Subscribe to changes
+        const unsubscribe = bridge.onContextChange((changes) => {
+            if (changes.displayMode) {
+                setDisplayMode(changes.displayMode);
+            }
+        });
+        return unsubscribe;
+    }, [bridge, ready]);
+    return displayMode;
+}
+/**
+ * Hook to get the full host context from the bridge.
+ * Automatically updates when context changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const context = useHostContext();
+ *   return (
+ *     <div>
+ *       Theme: {context?.theme}
+ *       Locale: {context?.locale}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useHostContext() {
+    const { bridge, ready } = useMcpBridgeContext();
+    const [context, setContext] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!ready || !bridge)
+            return;
+        // Get initial context
+        const adapter = bridge.getAdapter?.();
+        if (adapter) {
+            setContext(adapter.getHostContext());
+        }
+        // Subscribe to changes
+        const unsubscribe = bridge.onContextChange((changes) => {
+            setContext((prev) => (prev ? { ...prev, ...changes } : null));
+        });
+        return unsubscribe;
+    }, [bridge, ready]);
+    return context;
+}
+/**
+ * Hook to check if the bridge has a specific capability.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const canCallTools = useCapability('canCallTools');
+ *   const canSendMessages = useCapability('canSendMessages');
+ *
+ *   return (
+ *     <div>
+ *       {canCallTools && <button>Call Tool</button>}
+ *       {canSendMessages && <button>Send Message</button>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useCapability(cap) {
+    const { capabilities } = useMcpBridgeContext();
+    return capabilities?.[cap] === true;
+}
+//# sourceMappingURL=context.js.map

package/src/react/hooks/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/react/hooks/context.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file context.tsx\n * @description React context for FrontMcpBridge.\n *\n * Provides a context provider that initializes and exposes the MCP bridge\n * to all child components via hooks.\n *\n * @example\n * ```tsx\n * import { McpBridgeProvider, useMcpBridge } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <McpBridgeProvider>\n *       <MyComponent />\n *     </McpBridgeProvider>\n *   );\n * }\n * ```\n *\n * @module @frontmcp/ui/react/hooks\n */\n\nimport { createContext, useContext, useEffect, useState, useCallback, useMemo, type ReactNode } from 'react';\nimport type {\n  FrontMcpBridgeInterface,\n  BridgeConfig,\n  AdapterCapabilities,\n  HostContext,\n  DisplayMode,\n} from '../../bridge/types';\nimport { FrontMcpBridge } from '../../bridge/core/bridge-factory';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * MCP Bridge context value.\n */\nexport interface McpBridgeContextValue {\n  /** The bridge instance (null until initialized) */\n  bridge: FrontMcpBridgeInterface | null;\n  /** Whether the bridge is currently initializing */\n  loading: boolean;\n  /** Initialization error, if any */\n  error: Error | null;\n  /** Whether the bridge is initialized and ready */\n  ready: boolean;\n  /** Current adapter ID */\n  adapterId: string | undefined;\n  /** Current adapter capabilities */\n  capabilities: AdapterCapabilities | undefined;\n}\n\n/**\n * Props for McpBridgeProvider.\n */\nexport interface McpBridgeProviderProps {\n  /** Child components */\n  children: ReactNode;\n  /** Bridge configuration */\n  config?: BridgeConfig;\n  /** Callback when bridge is ready */\n  onReady?: (bridge: FrontMcpBridgeInterface) => void;\n  /** Callback when bridge initialization fails */\n  onError?: (error: Error) => void;\n}\n\n// ============================================\n// Context\n// ============================================\n\nconst McpBridgeContext = createContext<McpBridgeContextValue | null>(null);\n\n/**\n * Provider component that initializes the MCP bridge.\n *\n * @example Basic usage\n * ```tsx\n * <McpBridgeProvider>\n *   <App />\n * </McpBridgeProvider>\n * ```\n *\n * @example With configuration\n * ```tsx\n * <McpBridgeProvider\n *   config={{ debug: true, forceAdapter: 'generic' }}\n *   onReady={(bridge) => console.log('Bridge ready:', bridge.adapterId)}\n *   onError={(err) => console.error('Bridge error:', err)}\n * >\n *   <App />\n * </McpBridgeProvider>\n * ```\n */\nexport function McpBridgeProvider({ children, config, onReady, onError }: McpBridgeProviderProps) {\n  const [bridge, setBridge] = useState<FrontMcpBridgeInterface | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    let mounted = true;\n    let bridgeInstance: FrontMcpBridge | null = null;\n\n    const initBridge = async () => {\n      try {\n        bridgeInstance = new FrontMcpBridge(config);\n        await bridgeInstance.initialize();\n\n        if (mounted) {\n          setBridge(bridgeInstance);\n          setLoading(false);\n          onReady?.(bridgeInstance);\n        }\n      } catch (err) {\n        if (mounted) {\n          const error = err instanceof Error ? err : new Error(String(err));\n          setError(error);\n          setLoading(false);\n          onError?.(error);\n        }\n      }\n    };\n\n    initBridge();\n\n    return () => {\n      mounted = false;\n      if (bridgeInstance) {\n        bridgeInstance.dispose();\n      }\n    };\n  }, [config, onReady, onError]);\n\n  const contextValue = useMemo<McpBridgeContextValue>(\n    () => ({\n      bridge,\n      loading,\n      error,\n      ready: !loading && !error && bridge !== null,\n      adapterId: bridge?.adapterId,\n      capabilities: bridge?.capabilities,\n    }),\n    [bridge, loading, error],\n  );\n\n  return <McpBridgeContext.Provider value={contextValue}>{children}</McpBridgeContext.Provider>;\n}\n\n// ============================================\n// Hooks\n// ============================================\n\n/**\n * Default context value for SSR.\n * When the component is rendered outside of McpBridgeProvider (e.g., during SSR),\n * this value is returned instead of throwing an error.\n */\nconst SSR_DEFAULT_CONTEXT: McpBridgeContextValue = {\n  bridge: null,\n  loading: false,\n  error: null,\n  ready: false,\n  adapterId: undefined,\n  capabilities: undefined,\n};\n\n/**\n * Hook to access the MCP bridge context.\n *\n * During client-side rendering, must be used within a McpBridgeProvider.\n * During SSR (outside of provider), returns a default \"not ready\" state.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { bridge, loading, error, ready } = useMcpBridgeContext();\n *\n *   if (loading) return <div>Loading...</div>;\n *   if (error) return <div>Error: {error.message}</div>;\n *   if (!ready) return null;\n *\n *   return <div>Adapter: {bridge.adapterId}</div>;\n * }\n * ```\n */\nexport function useMcpBridgeContext(): McpBridgeContextValue {\n  const context = useContext(McpBridgeContext);\n\n  // During SSR or outside of provider, return default context instead of throwing\n  if (!context) {\n    return SSR_DEFAULT_CONTEXT;\n  }\n\n  return context;\n}\n\n/**\n * Hook to get the MCP bridge instance.\n * Returns null while loading or if not initialized.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const bridge = useMcpBridge();\n *\n *   if (!bridge) return <div>Loading...</div>;\n *\n *   const theme = bridge.getTheme();\n *   const input = bridge.getToolInput();\n *\n *   return <div>Theme: {theme}</div>;\n * }\n * ```\n */\nexport function useMcpBridge(): FrontMcpBridgeInterface | null {\n  const { bridge } = useMcpBridgeContext();\n  return bridge;\n}\n\n/**\n * Hook to get the current theme from the bridge.\n * Automatically updates when theme changes.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const theme = useTheme();\n *   return <div className={theme === 'dark' ? 'bg-black' : 'bg-white'}>...</div>;\n * }\n * ```\n */\nexport function useTheme(): 'light' | 'dark' {\n  const { bridge, ready } = useMcpBridgeContext();\n  const [theme, setTheme] = useState<'light' | 'dark'>('light');\n\n  useEffect(() => {\n    if (!ready || !bridge) return;\n\n    // Get initial theme\n    setTheme(bridge.getTheme());\n\n    // Subscribe to changes\n    const unsubscribe = bridge.onContextChange((changes) => {\n      if (changes.theme) {\n        setTheme(changes.theme);\n      }\n    });\n\n    return unsubscribe;\n  }, [bridge, ready]);\n\n  return theme;\n}\n\n/**\n * Hook to get the current display mode from the bridge.\n * Automatically updates when display mode changes.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const displayMode = useDisplayMode();\n *   return <div>Mode: {displayMode}</div>;\n * }\n * ```\n */\nexport function useDisplayMode(): DisplayMode {\n  const { bridge, ready } = useMcpBridgeContext();\n  const [displayMode, setDisplayMode] = useState<DisplayMode>('inline');\n\n  useEffect(() => {\n    if (!ready || !bridge) return;\n\n    // Get initial display mode\n    setDisplayMode(bridge.getDisplayMode());\n\n    // Subscribe to changes\n    const unsubscribe = bridge.onContextChange((changes) => {\n      if (changes.displayMode) {\n        setDisplayMode(changes.displayMode);\n      }\n    });\n\n    return unsubscribe;\n  }, [bridge, ready]);\n\n  return displayMode;\n}\n\n/**\n * Hook to get the full host context from the bridge.\n * Automatically updates when context changes.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const context = useHostContext();\n *   return (\n *     <div>\n *       Theme: {context?.theme}\n *       Locale: {context?.locale}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useHostContext(): HostContext | null {\n  const { bridge, ready } = useMcpBridgeContext();\n  const [context, setContext] = useState<HostContext | null>(null);\n\n  useEffect(() => {\n    if (!ready || !bridge) return;\n\n    // Get initial context\n    const adapter = bridge.getAdapter?.();\n    if (adapter) {\n      setContext(adapter.getHostContext());\n    }\n\n    // Subscribe to changes\n    const unsubscribe = bridge.onContextChange((changes) => {\n      setContext((prev) => (prev ? { ...prev, ...changes } : null));\n    });\n\n    return unsubscribe;\n  }, [bridge, ready]);\n\n  return context;\n}\n\n/**\n * Hook to check if the bridge has a specific capability.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const canCallTools = useCapability('canCallTools');\n *   const canSendMessages = useCapability('canSendMessages');\n *\n *   return (\n *     <div>\n *       {canCallTools && <button>Call Tool</button>}\n *       {canSendMessages && <button>Send Message</button>}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useCapability(cap: keyof AdapterCapabilities): boolean {\n  const { capabilities } = useMcpBridgeContext();\n  return capabilities?.[cap] === true;\n}\n"]}