@frontmcp/ui 0.5.1 → 0.6.1

package/src/react/Card.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/react/Card.tsx"],"names":[],"mappings":"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","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

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

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

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