@leanmcp/ui 0.3.4 → 0.3.5

package/dist/index.d.mts

@@ -0,0 +1,1773 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ReactNode, ButtonHTMLAttributes, Component, ErrorInfo, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { McpUiAppCapabilities, App, McpUiHostContext, McpUiDisplayMode, McpUiHostStyles } from '@modelcontextprotocol/ext-apps';
+export { App, McpUiAppCapabilities, McpUiDisplayMode, McpUiHostContext, McpUiHostCss, McpUiHostStyles, McpUiResourceCsp, McpUiResourceMeta, McpUiStyles, McpUiTheme, McpUiToolCancelledNotification, McpUiToolInputNotification, McpUiToolInputPartialNotification, McpUiToolMeta, McpUiToolResultNotification, McpUiToolVisibility, PostMessageTransport, RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY, applyDocumentTheme, applyHostFonts, applyHostStyleVariables, getDocumentTheme } from '@modelcontextprotocol/ext-apps';
+import { CallToolResult, ContentBlock } from '@modelcontextprotocol/sdk/types.js';
+import { ToasterProps } from 'sonner';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import { Slot } from '@radix-ui/react-slot';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Command as Command$1 } from 'cmdk';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { ClassValue } from 'clsx';
+export { GPTApp, GPTAppOptions, UIApp, UIAppOptions, getGPTAppMetadata, getGPTAppUri, getUIAppMetadata, getUIAppUri } from './server.mjs';
+import { ChartData, ChartType as ChartType$1, ChartOptions } from 'chart.js';
+export { AppBridge } from '@modelcontextprotocol/ext-apps/app-bridge';
+import '@modelcontextprotocol/ext-apps/server';
+
+/**
+ * App information (same as ext-apps Implementation)
+ */
+interface AppInfo {
+    name: string;
+    version: string;
+}
+/**
+ * Options for App behavior
+ */
+interface AppOptions {
+    /**
+     * Automatically report size changes to the host using ResizeObserver.
+     * @default true
+     */
+    autoResize?: boolean;
+}
+/**
+ * MCP App context value - available via useMcpApp()
+ */
+interface McpAppContextValue {
+    /** The ext-apps App instance */
+    app: App | null;
+    /** Whether connected to host */
+    isConnected: boolean;
+    /** Connection error, if any */
+    error: Error | null;
+    /** Host context (theme, viewport, etc.) */
+    hostContext: McpUiHostContext;
+    /** Tool input arguments received from host */
+    toolInput: Record<string, unknown> | null;
+    /** Partial tool input (streaming) */
+    toolInputPartial: Record<string, unknown> | null;
+    /** Tool result received from host */
+    toolResult: CallToolResult | null;
+    /** Whether the tool was cancelled by host */
+    toolCancelled: {
+        cancelled: boolean;
+        reason?: string;
+    };
+    /** Call a server tool */
+    callTool: (name: string, args?: Record<string, unknown>) => Promise<CallToolResult>;
+    /** Send a message to the host chat */
+    sendMessage: (text: string) => Promise<void>;
+    /** Send a log message */
+    sendLog: (level: 'debug' | 'info' | 'warning' | 'error', data: unknown) => Promise<void>;
+    /** Open a link in the host */
+    openLink: (url: string) => Promise<void>;
+    /** Request a display mode change */
+    requestDisplayMode: (mode: McpUiDisplayMode) => Promise<McpUiDisplayMode>;
+}
+interface AppProviderProps {
+    /** App name and version */
+    appInfo: AppInfo;
+    /** App capabilities (tools, experimental features) */
+    capabilities?: McpUiAppCapabilities;
+    /** App options (autoResize, etc.) */
+    options?: AppOptions;
+    /** Callback when host requests teardown */
+    onTeardown?: () => void | Promise<void>;
+    /** React children */
+    children: ReactNode;
+}
+/**
+ * AppProvider - Root context for MCP Apps
+ *
+ * Provides connection management and hooks for MCP App components.
+ * Uses PostMessage transport for iframe communication.
+ *
+ * @example
+ * ```tsx
+ * function MyApp() {
+ *   return (
+ *     <AppProvider
+ *       appInfo={{ name: "MyApp", version: "1.0.0" }}
+ *       capabilities={{ tools: { listChanged: true } }}
+ *       options={{ autoResize: true }}
+ *       onTeardown={() => console.log('Cleaning up...')}
+ *     >
+ *       <MyContent />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function AppProvider({ appInfo, capabilities, options, onTeardown, children }: AppProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the MCP App context
+ * Returns SSR-safe defaults when no provider is available (during server rendering)
+ */
+declare function useMcpApp(): McpAppContextValue;
+
+/**
+ * ChatGPT's window.openai interface
+ * Based on: https://developers.openai.com/apps-sdk/build/chatgpt-ui#understand-the-windowopenai-api
+ */
+interface OpenAISDK {
+    /** Input arguments for the tool */
+    toolInput?: Record<string, unknown>;
+    /** Structured content returned by the tool */
+    toolOutput?: any;
+    /** Metadata returned by the tool */
+    toolResponseMetadata?: Record<string, unknown>;
+    /** Persisted state for this widget instance */
+    widgetState?: Record<string, unknown>;
+    /** Call a server tool */
+    callTool: (name: string, args: Record<string, unknown>) => Promise<any>;
+    /** Send a follow-up message to chat */
+    sendFollowUpMessage?: (options: {
+        prompt: string;
+    }) => Promise<void>;
+    /** Upload a file */
+    uploadFile?: (file: File) => Promise<{
+        fileId: string;
+    }>;
+    /** Get download URL for a file */
+    getFileDownloadUrl?: (options: {
+        fileId: string;
+    }) => Promise<{
+        downloadUrl: string;
+    }>;
+    /** Persist widget state */
+    setWidgetState?: (state: Record<string, unknown>) => void;
+    /** Current theme */
+    theme?: 'light' | 'dark';
+    /** Current locale */
+    locale?: string;
+    /** Display mode */
+    displayMode?: 'inline' | 'modal' | 'fullscreen';
+    /** Maximum height for the widget */
+    maxHeight?: number;
+    /** Safe area insets */
+    safeArea?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** View type */
+    view?: 'desktop' | 'mobile';
+}
+declare global {
+    interface Window {
+        openai?: OpenAISDK;
+    }
+}
+/**
+ * GPT App context value - available via useGptApp()
+ */
+interface GptAppContextValue {
+    /** Whether connected to ChatGPT host */
+    isConnected: boolean;
+    /** Connection error, if any */
+    error: Error | null;
+    /** Theme from host */
+    theme: 'light' | 'dark';
+    /** Display mode */
+    displayMode: string;
+    /** Locale */
+    locale: string;
+    /** Max height from host */
+    maxHeight: number;
+    /** Call a server tool via ChatGPT */
+    callTool: (name: string, args?: Record<string, unknown>) => Promise<any>;
+}
+interface GPTAppProviderProps {
+    /** App name */
+    appName: string;
+    /** React children */
+    children: ReactNode;
+}
+/**
+ * GPTAppProvider - Root context for ChatGPT Apps
+ *
+ * Uses ChatGPT's native window.openai SDK for host communication.
+ *
+ * @example
+ * ```tsx
+ * function MyGPTApp() {
+ *   return (
+ *     <GPTAppProvider appName="MyApp">
+ *       <MyContent />
+ *     </GPTAppProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function GPTAppProvider({ appName, children }: GPTAppProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the GPT App context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isConnected, theme, callTool } = useGptApp();
+ *   // ...
+ * }
+ * ```
+ */
+declare function useGptApp(): GptAppContextValue;
+/**
+ * Hook to call tools via ChatGPT SDK
+ * Similar to useTool but for GPT Apps
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { call, result, loading, error } = useGptTool('myTool');
+ *
+ *   useEffect(() => {
+ *     call({ param: 'value' });
+ *   }, []);
+ *
+ *   if (loading) return <div>Loading...</div>;
+ *   return <div>{JSON.stringify(result)}</div>;
+ * }
+ * ```
+ */
+declare function useGptTool(toolName: string): {
+    call: (args?: Record<string, unknown>) => Promise<any>;
+    result: any;
+    loading: boolean;
+    error: Error | null;
+    isConnected: boolean;
+};
+
+/**
+ * MCP-Native UI SDK - Core Types
+ *
+ * Type definitions for MCP-native component patterns. These types enable
+ * declarative tool binding, result handling, and resource integration.
+ */
+
+/**
+ * Configuration for binding a UI component to an MCP tool
+ *
+ * @example
+ * ```tsx
+ * // Simple string binding
+ * <ToolButton tool="refresh-data" />
+ *
+ * // Full configuration
+ * <ToolButton tool={{
+ *   name: "create-item",
+ *   args: { type: "note" },
+ *   transform: (r) => r.item
+ * }} />
+ * ```
+ */
+interface ToolBinding<TArgs = Record<string, unknown>, TResult = unknown> {
+    /** Tool name to call */
+    name: string;
+    /** Static arguments (merged with dynamic args) */
+    args?: Partial<TArgs>;
+    /** Transform result before passing to handlers */
+    transform?: (result: CallToolResult) => TResult;
+}
+/**
+ * Normalized tool binding - always an object, never a string
+ */
+type NormalizedToolBinding<TArgs = Record<string, unknown>, TResult = unknown> = ToolBinding<TArgs, TResult>;
+/**
+ * Helper to normalize string or ToolBinding to ToolBinding
+ */
+declare function normalizeToolBinding<TArgs = Record<string, unknown>, TResult = unknown>(tool: string | ToolBinding<TArgs, TResult>): NormalizedToolBinding<TArgs, TResult>;
+/**
+ * Shared props for components that can trigger MCP tool calls
+ */
+interface McpActionProps<TResult = unknown> {
+    /** Tool to call on action */
+    tool?: string | ToolBinding<Record<string, unknown>, TResult>;
+    /** Called when tool execution starts */
+    onToolStart?: () => void;
+    /** Called on successful tool result */
+    onToolSuccess?: (result: TResult) => void;
+    /** Called on tool error */
+    onToolError?: (error: Error) => void;
+    /** Called after tool completes (success or error) */
+    onToolComplete?: () => void;
+    /** Disable component during tool execution (default: true) */
+    disableWhileLoading?: boolean;
+}
+/**
+ * Configuration for how to display tool results
+ */
+interface ToolResultConfig {
+    /** How to display the result */
+    display: 'inline' | 'toast' | 'modal' | 'none';
+    /** Custom result renderer */
+    renderResult?: (result: unknown) => ReactNode;
+    /** Auto-dismiss after ms (for toast) */
+    autoDismiss?: number;
+    /** Success message template */
+    successMessage?: string | ((result: unknown) => string);
+    /** Error message template */
+    errorMessage?: string | ((error: Error) => string);
+}
+/**
+ * Default result display config
+ */
+declare const DEFAULT_RESULT_CONFIG: ToolResultConfig;
+/**
+ * Configuration for confirmation dialog before tool execution
+ */
+interface ConfirmConfig {
+    /** Dialog title */
+    title?: string;
+    /** Dialog description */
+    description?: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Confirm button variant */
+    confirmVariant?: 'default' | 'destructive';
+}
+/**
+ * Configuration for binding a component to an MCP resource
+ */
+interface ResourceBinding {
+    /** Resource URI */
+    uri: string;
+    /** Refresh interval in ms */
+    refreshInterval?: number;
+    /** Subscribe to resource changes */
+    subscribe?: boolean;
+}
+/**
+ * States a tool call can be in
+ */
+type ToolState = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * Full tool call state with data
+ */
+interface ToolCallState<T = unknown> {
+    /** Current state */
+    state: ToolState;
+    /** Whether currently loading */
+    loading: boolean;
+    /** Last successful result */
+    result: T | null;
+    /** Last error */
+    error: Error | null;
+    /** Whether we have a result (success or error) */
+    hasResult: boolean;
+}
+/**
+ * Initial tool call state
+ */
+declare const INITIAL_TOOL_STATE: ToolCallState;
+/**
+ * Options for useTool hook
+ */
+interface UseToolOptions<TArgs = Record<string, unknown>, TResult = unknown> {
+    /** Static arguments merged with each call */
+    defaultArgs?: Partial<TArgs>;
+    /** Transform result before returning */
+    transform?: (result: CallToolResult) => TResult;
+    /** Retry configuration */
+    retry?: number | {
+        count: number;
+        delay: number;
+    };
+    /** Callbacks */
+    onStart?: () => void;
+    onSuccess?: (result: TResult) => void;
+    onError?: (error: Error) => void;
+    onComplete?: () => void;
+}
+/**
+ * Return type for useTool hook
+ */
+interface UseToolReturn<TArgs = Record<string, unknown>, TResult = unknown> {
+    /** Call the tool with arguments */
+    call: (args?: TArgs) => Promise<TResult>;
+    /** Mutate and call (convenience for forms) */
+    mutate: (args: TArgs) => Promise<TResult>;
+    /** Current state */
+    state: ToolState;
+    /** Loading indicator */
+    loading: boolean;
+    /** Last successful result */
+    result: TResult | null;
+    /** Last error */
+    error: Error | null;
+    /** Reset to initial state */
+    reset: () => void;
+    /** Retry last call */
+    retry: () => Promise<TResult | null>;
+    /** Abort ongoing call */
+    abort: () => void;
+}
+/**
+ * Options for useResource hook
+ */
+interface UseResourceOptions<T = unknown> {
+    /** Auto-refresh interval in ms */
+    refreshInterval?: number;
+    /** Subscribe to resource changes */
+    subscribe?: boolean;
+    /** Transform resource data */
+    transform?: (data: unknown) => T;
+    /** Skip initial fetch */
+    skip?: boolean;
+}
+/**
+ * Return type for useResource hook
+ */
+interface UseResourceReturn<T = unknown> {
+    /** Resource data */
+    data: T | null;
+    /** Loading state */
+    loading: boolean;
+    /** Error if any */
+    error: Error | null;
+    /** Refresh resource */
+    refresh: () => Promise<T>;
+    /** Last updated timestamp */
+    lastUpdated: Date | null;
+}
+/**
+ * Options for useToolStream hook
+ */
+interface UseToolStreamOptions<T = unknown> {
+    /** Called with each partial update */
+    onPartial?: (data: Partial<T>) => void;
+    /** Called when streaming completes */
+    onComplete?: (data: T) => void;
+}
+/**
+ * Return type for useToolStream hook
+ */
+interface UseToolStreamReturn<T = unknown> {
+    /** Current partial data */
+    partial: Partial<T> | null;
+    /** Final complete data */
+    complete: T | null;
+    /** Whether receiving partial data */
+    isStreaming: boolean;
+    /** Whether fully complete */
+    isComplete: boolean;
+}
+/**
+ * Tool provider configuration for scoped defaults
+ */
+interface ToolProviderConfig {
+    /** Default result display */
+    resultDisplay?: ToolResultConfig;
+    /** Default error handler */
+    onError?: (error: Error) => void;
+    /** Show loading states globally */
+    showLoading?: boolean;
+}
+
+/**
+ * ToolContext value
+ */
+interface ToolContextValue {
+    /** Default result display configuration */
+    resultDisplay: ToolResultConfig;
+    /** Default error handler */
+    onError?: (error: Error) => void;
+    /** Show loading states globally */
+    showLoading: boolean;
+}
+/**
+ * ToolProvider props
+ */
+interface ToolProviderProps {
+    /** Default configuration for all tool components */
+    defaults?: ToolProviderConfig;
+    /** Children */
+    children: ReactNode;
+}
+/**
+ * ToolProvider component
+ */
+declare function ToolProvider({ defaults, children, }: ToolProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access tool context
+ */
+declare function useToolContext(): ToolContextValue;
+
+declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * State exposed to render props
+ */
+interface ToolButtonState {
+    /** Whether tool is currently executing */
+    loading: boolean;
+    /** Current tool state */
+    state: ToolState;
+    /** Result from last successful call */
+    result: unknown | null;
+    /** Error from last failed call */
+    error: Error | null;
+    /** Whether we have any result */
+    hasResult: boolean;
+}
+/**
+ * ToolButton props
+ */
+interface ToolButtonProps extends Omit<React.ComponentProps<'button'>, 'children'>, VariantProps<typeof buttonVariants> {
+    /** Tool to call on click - string or full config */
+    tool: string | ToolBinding;
+    /** Tool arguments */
+    args?: Record<string, unknown>;
+    /** How to display result: 'inline' | 'toast' | 'modal' | 'none' */
+    resultDisplay?: 'inline' | 'toast' | 'modal' | 'none';
+    /** Custom result renderer */
+    renderResult?: (result: unknown) => React.ReactNode;
+    /** Duration to show result (for inline/toast) in ms */
+    resultDuration?: number;
+    /** Success message for toast */
+    successMessage?: string | ((result: unknown) => string);
+    /** Error message for toast */
+    errorMessage?: string | ((error: Error) => string);
+    /** Called when tool starts executing */
+    onToolStart?: () => void;
+    /** Called on successful result */
+    onToolSuccess?: (result: unknown) => void;
+    /** Called on error */
+    onToolError?: (error: Error) => void;
+    /** Called after completion (success or error) */
+    onToolComplete?: () => void;
+    /** Text to show while loading */
+    loadingText?: string;
+    /** Custom loading icon */
+    loadingIcon?: React.ReactNode;
+    /** Disable button while loading (default: true) */
+    disableWhileLoading?: boolean;
+    /** Require confirmation before calling */
+    confirm?: boolean | ConfirmConfig;
+    /** Button content - can be ReactNode or render function */
+    children?: React.ReactNode | ((state: ToolButtonState) => React.ReactNode);
+    /** Use Radix Slot for composition */
+    asChild?: boolean;
+}
+/**
+ * ToolButton component
+ */
+declare function ToolButton({ tool, args, resultDisplay, renderResult, resultDuration, successMessage, errorMessage, onToolStart, onToolSuccess, onToolError, onToolComplete, loadingText, loadingIcon, disableWhileLoading, confirm, children, className, variant, size, disabled, asChild, ...props }: ToolButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Option type for ToolSelect
+ */
+interface ToolSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    description?: string;
+}
+/**
+ * ToolSelect props
+ */
+interface ToolSelectProps {
+    /** Tool to call when option selected */
+    onSelectTool?: string | ToolBinding;
+    /** Field name to pass selection value as */
+    argName?: string;
+    /** Additional args to pass with selection */
+    additionalArgs?: Record<string, unknown>;
+    /** Tool to fetch options from */
+    optionsTool?: string | ToolBinding;
+    /** Args for options tool */
+    optionsArgs?: Record<string, unknown>;
+    /** Transform tool result to options */
+    transformOptions?: (result: unknown) => ToolSelectOption[];
+    /** Static options (combined with tool options) */
+    options?: ToolSelectOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Placeholder while loading options */
+    loadingPlaceholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Controlled value */
+    value?: string;
+    /** Default value */
+    defaultValue?: string;
+    /** Called when value changes */
+    onValueChange?: (value: string) => void;
+    /** Called when options are loaded */
+    onOptionsLoaded?: (options: ToolSelectOption[]) => void;
+    /** Called when selection tool succeeds */
+    onSelectionSuccess?: (result: unknown) => void;
+    /** Called when selection tool fails */
+    onSelectionError?: (error: Error) => void;
+    /** Show toast on selection success */
+    showSuccessToast?: boolean;
+    /** Success message */
+    successMessage?: string | ((result: unknown) => string);
+    className?: string;
+    disabled?: boolean;
+}
+/**
+ * ToolSelect component
+ */
+declare function ToolSelect({ onSelectTool, argName, additionalArgs, optionsTool, optionsArgs, transformOptions, options: staticOptions, placeholder, loadingPlaceholder, emptyMessage, value: controlledValue, defaultValue, onValueChange, onOptionsLoaded, onSelectionSuccess, onSelectionError, showSuccessToast, successMessage, className, disabled, }: ToolSelectProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Suggestion type for autocomplete
+ */
+interface ToolInputSuggestion {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    description?: string;
+}
+/**
+ * ToolInput props
+ */
+interface ToolInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {
+    /** Tool to call on input change (debounced) */
+    searchTool?: string | ToolBinding;
+    /** Debounce delay in ms */
+    debounce?: number;
+    /** Minimum characters before calling tool */
+    minChars?: number;
+    /** Field name for the input value */
+    argName?: string;
+    /** Additional args to pass with search */
+    additionalArgs?: Record<string, unknown>;
+    /** Enable autocomplete dropdown */
+    autocomplete?: boolean;
+    /** Transform search results to suggestions */
+    transformSuggestions?: (result: unknown) => ToolInputSuggestion[];
+    /** Called when suggestion is selected */
+    onSuggestionSelect?: (suggestion: ToolInputSuggestion) => void;
+    /** Empty state message */
+    emptyMessage?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Called with search results */
+    onSearchResults?: (results: unknown) => void;
+    /** Called on search error */
+    onSearchError?: (error: Error) => void;
+    /** Show search icon */
+    showSearchIcon?: boolean;
+    /** Show clear button */
+    showClearButton?: boolean;
+    /** Show loading indicator */
+    showLoadingIndicator?: boolean;
+}
+/**
+ * ToolInput component
+ */
+declare function ToolInput({ searchTool, debounce, minChars, argName, additionalArgs, autocomplete, transformSuggestions, onSuggestionSelect, emptyMessage, value: controlledValue, onChange, onSearchResults, onSearchError, showSearchIcon, showClearButton, showLoadingIndicator, className, placeholder, disabled, ...props }: ToolInputProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Form field definition
+ */
+interface ToolFormField {
+    /** Field name (matches tool input schema) */
+    name: string;
+    /** Display label */
+    label: string;
+    /** Input type */
+    type?: 'text' | 'number' | 'email' | 'password' | 'textarea' | 'select' | 'checkbox' | 'switch' | 'slider';
+    /** Placeholder text */
+    placeholder?: string;
+    /** Default value */
+    defaultValue?: string | number | boolean;
+    /** Required field */
+    required?: boolean;
+    /** Helper text */
+    description?: string;
+    /** Options for select type */
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Min value for number/slider */
+    min?: number;
+    /** Max value for number/slider */
+    max?: number;
+    /** Step for number/slider */
+    step?: number;
+    /** Disable field */
+    disabled?: boolean;
+}
+/**
+ * ToolForm props
+ */
+interface ToolFormProps {
+    /** Tool name to call on submit */
+    toolName: string;
+    /** Form fields (optional if autoSchema) */
+    fields?: ToolFormField[];
+    /** Auto-generate form from tool schema */
+    autoSchema?: boolean;
+    /** Submit button text */
+    submitText?: string;
+    /** Loading text */
+    loadingText?: string;
+    /** Callback when tool call succeeds */
+    onSuccess?: (result: unknown) => void;
+    /** Callback when tool call fails */
+    onError?: (error: Error) => void;
+    /** Show result after success */
+    showResult?: boolean;
+    /** Show toast on success */
+    showSuccessToast?: boolean;
+    /** Success message */
+    successMessage?: string | ((result: unknown) => string);
+    /** Reset form on success */
+    resetOnSuccess?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Layout - vertical or horizontal */
+    layout?: 'vertical' | 'horizontal';
+}
+/**
+ * ToolForm component
+ */
+declare function ToolForm({ toolName, fields: manualFields, autoSchema, submitText, loadingText, onSuccess, onError, showResult, showSuccessToast, successMessage, resetOnSuccess, className, layout, }: ToolFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Resource metadata passed to children
+ */
+interface ResourceMeta {
+    /** Resource URI */
+    uri: string;
+    /** Refresh the resource */
+    refresh: () => Promise<unknown>;
+    /** Last updated timestamp */
+    lastUpdated: Date | null;
+    /** Whether currently refreshing */
+    isRefreshing: boolean;
+}
+/**
+ * ResourceView props
+ */
+interface ResourceViewProps<T = unknown> {
+    /** Resource URI */
+    uri: string;
+    /** Refresh interval in ms */
+    refreshInterval?: number;
+    /** Subscribe to updates (when supported) */
+    subscribe?: boolean;
+    /** Transform resource data */
+    transform?: (data: unknown) => T;
+    /** Loading placeholder */
+    loading?: React.ReactNode;
+    /** Error display */
+    error?: React.ReactNode | ((error: Error, retry: () => void) => React.ReactNode);
+    /** Render function for resource data */
+    children: (data: T, meta: ResourceMeta) => React.ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Skip initial fetch */
+    skip?: boolean;
+}
+/**
+ * ResourceView component
+ */
+declare function ResourceView<T = unknown>({ uri, refreshInterval, subscribe, transform, loading: loadingContent, error: errorContent, children, className, skip, }: ResourceViewProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * StreamingContent props
+ */
+interface StreamingContentProps<T = unknown> {
+    /** Fallback while no data available */
+    fallback?: React.ReactNode;
+    /** Show streaming progress indicator */
+    showProgress?: boolean;
+    /** Progress value (0-100) if known */
+    progress?: number;
+    /** Called with partial data updates */
+    onPartial?: (data: Partial<T>) => void;
+    /** Called when data is complete */
+    onComplete?: (data: T) => void;
+    /** Render function for data */
+    children: (data: T | Partial<T>, isComplete: boolean) => React.ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Style to apply while streaming (e.g., opacity) */
+    streamingStyle?: 'opacity' | 'blur' | 'none';
+}
+/**
+ * StreamingContent component
+ */
+declare function StreamingContent<T = unknown>({ fallback, showProgress, progress: externalProgress, onPartial, onComplete, children, className, streamingStyle, }: StreamingContentProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Column definition for ToolDataGrid
+ */
+interface ToolDataGridColumn<T = Record<string, unknown>> {
+    /** Unique key for this column (dot notation supported) */
+    key: string;
+    /** Column header */
+    header: string;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Custom cell renderer */
+    render?: (value: unknown, row: T, index: number) => React.ReactNode;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Align content */
+    align?: 'left' | 'center' | 'right';
+    /** Hide column on small screens */
+    hideMobile?: boolean;
+}
+/**
+ * Row action definition
+ */
+interface ToolDataGridRowAction<T = Record<string, unknown>> {
+    /** Action button label */
+    label: string;
+    /** Icon to show */
+    icon?: React.ReactNode;
+    /** Tool to call */
+    tool: string | ToolBinding;
+    /** Get args from row data */
+    getArgs?: (row: T) => Record<string, unknown>;
+    /** Button variant */
+    variant?: 'default' | 'outline' | 'ghost' | 'destructive';
+    /** Require confirmation */
+    confirm?: boolean | ConfirmConfig;
+    /** Hide for certain rows */
+    hidden?: (row: T) => boolean;
+    /** Called on success */
+    onSuccess?: (result: unknown, row: T) => void;
+}
+/**
+ * Sort state
+ */
+interface SortState {
+    column: string | null;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Data result from transform function
+ */
+interface ToolDataGridData<T = Record<string, unknown>> {
+    rows: T[];
+    total: number;
+}
+/**
+ * ToolDataGrid props
+ */
+interface ToolDataGridProps<T = Record<string, unknown>> {
+    /** Tool to fetch data from */
+    dataTool: string | ToolBinding;
+    /** Column definitions */
+    columns: ToolDataGridColumn<T>[];
+    /** Transform tool result to grid data */
+    transformData?: (result: unknown) => ToolDataGridData<T>;
+    /** Actions to show for each row */
+    rowActions?: ToolDataGridRowAction<T>[];
+    /** Enable pagination */
+    pagination?: boolean;
+    /** Page sizes to offer */
+    pageSizes?: number[];
+    /** Default page size */
+    defaultPageSize?: number;
+    /** Default sort */
+    defaultSort?: SortState;
+    /** Auto-refresh interval in ms */
+    refreshInterval?: number;
+    /** Show refresh button */
+    showRefresh?: boolean;
+    /** Called when data is loaded */
+    onDataLoaded?: (data: ToolDataGridData<T>) => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+    /** Called when row is clicked */
+    onRowClick?: (row: T, index: number) => void;
+    /** Key extractor for rows */
+    getRowKey?: (row: T, index: number) => string;
+    /** Empty state content */
+    emptyContent?: React.ReactNode;
+    /** Loading content */
+    loadingContent?: React.ReactNode;
+    className?: string;
+}
+/**
+ * ToolDataGrid component
+ */
+declare function ToolDataGrid<T = Record<string, unknown>>({ dataTool, columns, transformData, rowActions, pagination, pageSizes, defaultPageSize, defaultSort, refreshInterval, showRefresh, onDataLoaded, onError, onRowClick, getRowKey, emptyContent, loadingContent, className, }: ToolDataGridProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    /** Loading state */
+    loading?: boolean;
+    /** Render as child component (Radix Slot) */
+    asChild?: boolean;
+    /** Left icon */
+    leftIcon?: ReactNode;
+    /** Right icon */
+    rightIcon?: ReactNode;
+}
+/**
+ * Button component with multiple variants and loading state
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Click Me
+ * </Button>
+ *
+ * <Button variant="ghost" loading>
+ *   Loading...
+ * </Button>
+ * ```
+ */
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface ActionButtonProps extends Omit<ButtonProps, 'onClick' | 'loading' | 'onError'> {
+    /** Tool name to call */
+    toolName: string;
+    /** Arguments to pass to the tool */
+    toolArgs?: Record<string, unknown>;
+    /** Callback when tool call succeeds */
+    onToolSuccess?: (result: unknown) => void;
+    /** Callback when tool call fails */
+    onToolError?: (error: Error) => void;
+    /** Show result inline after success */
+    showResult?: boolean;
+    /** Custom result renderer */
+    renderResult?: (result: unknown) => ReactNode;
+}
+/**
+ * ActionButton - Button that calls an MCP tool with loading state
+ *
+ * @example
+ * ```tsx
+ * <ActionButton
+ *   toolName="get-weather"
+ *   toolArgs={{ city: 'London' }}
+ *   onToolSuccess={(data) => console.log(data)}
+ * >
+ *   Get Weather
+ * </ActionButton>
+ * ```
+ */
+declare function ActionButton({ toolName, toolArgs, onToolSuccess, onToolError, showResult, renderResult, children, ...buttonProps }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * RequireConnection props
+ */
+interface RequireConnectionProps {
+    /** Loading fallback */
+    loading?: React.ReactNode;
+    /** Error fallback */
+    error?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /** Disconnected fallback (different from error) */
+    disconnected?: React.ReactNode;
+    /** Content to render when connected */
+    children: React.ReactNode;
+    /** Additional className for wrapper */
+    className?: string;
+}
+/**
+ * RequireConnection component
+ */
+declare function RequireConnection({ loading: loadingContent, error: errorContent, disconnected: disconnectedContent, children, className, }: RequireConnectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ToolErrorBoundary props
+ */
+interface ToolErrorBoundaryProps {
+    /** Fallback UI on error */
+    fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
+    /** Called on error */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Reset error on these props changing */
+    resetKeys?: unknown[];
+    /** Children to render */
+    children: ReactNode;
+}
+/**
+ * ToolErrorBoundary state
+ */
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * ToolErrorBoundary component
+ */
+declare class ToolErrorBoundary extends Component<ToolErrorBoundaryProps, State> {
+    constructor(props: ToolErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidUpdate(prevProps: ToolErrorBoundaryProps): void;
+    reset: () => void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+}
+
+/**
+ * useTool hook for calling MCP tools with full state management
+ */
+declare function useTool<TArgs extends Record<string, unknown> = Record<string, unknown>, TResult = unknown>(toolName: string, options?: UseToolOptions<TArgs, TResult>): UseToolReturn<TArgs, TResult>;
+
+/**
+ * Hook for receiving streaming/partial tool input from the host
+ */
+declare function useToolStream<T = unknown>(options?: UseToolStreamOptions<T>): UseToolStreamReturn<T>;
+
+/**
+ * Hook for reading and managing MCP server resources
+ */
+declare function useResource<T = unknown>(uri: string, options?: UseResourceOptions<T>): UseResourceReturn<T>;
+
+/**
+ * Result returned by useMessage hook
+ */
+interface UseMessageReturn {
+    /** Send a text message to the host chat */
+    send: (text: string) => Promise<void>;
+    /** Send structured content blocks */
+    sendContent: (content: ContentBlock[]) => Promise<void>;
+    /** Request the agent to call a specific tool */
+    requestTool: (toolName: string, args?: Record<string, unknown>) => Promise<void>;
+    /** Whether currently sending a message */
+    sending: boolean;
+    /** Last error if any */
+    error: Error | null;
+}
+/**
+ * Hook for sending messages to the MCP host chat
+ */
+declare function useMessage(): UseMessageReturn;
+
+interface UseHostContextReturn {
+    /** Current theme: 'light' or 'dark' */
+    theme: 'light' | 'dark';
+    /** Display mode: 'inline', 'fullscreen', 'pip' */
+    displayMode: 'inline' | 'fullscreen' | 'pip';
+    /** Available display modes supported by the host */
+    availableDisplayModes: string[];
+    /** Viewport dimensions */
+    viewport: {
+        width: number;
+        height: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    } | null;
+    /** User locale (e.g., 'en-US') */
+    locale: string | null;
+    /** User timezone (e.g., 'America/New_York') */
+    timeZone: string | null;
+    /** Platform type */
+    platform: 'web' | 'desktop' | 'mobile' | null;
+    /** Host application identifier */
+    userAgent: string | null;
+    /** Device input capabilities */
+    deviceCapabilities: {
+        touch?: boolean;
+        hover?: boolean;
+    } | null;
+    /** Mobile safe area insets */
+    safeAreaInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    } | null;
+    /** Host-provided style configuration */
+    styles: McpUiHostStyles | null;
+    /** Full raw context */
+    rawContext: McpUiHostContext;
+}
+/**
+ * Hook to access host context
+ *
+ * FIX #8: Now exposes all fields from McpUiHostContext including:
+ * - styles (CSS variables and fonts)
+ * - availableDisplayModes
+ * - userAgent
+ * - deviceCapabilities
+ * - safeAreaInsets
+ *
+ * @example
+ * ```tsx
+ * function ThemedCard() {
+ *   const { theme, locale, deviceCapabilities, styles } = useHostContext();
+ *
+ *   return (
+ *     <div className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>
+ *       <p>Locale: {locale}</p>
+ *       <p>Touch: {deviceCapabilities?.touch ? 'Yes' : 'No'}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useHostContext(): UseHostContextReturn;
+
+interface UseToolResultReturn<T = unknown> {
+    /** The tool result, typed as T */
+    result: T | null;
+    /** Raw CallToolResult from MCP */
+    rawResult: CallToolResult | null;
+    /** Whether a result has been received */
+    hasResult: boolean;
+    /** Extract text content from result */
+    textContent: string | null;
+}
+/**
+ * Hook to access tool result from host
+ *
+ * @example
+ * ```tsx
+ * function WeatherCard() {
+ *   const { result } = useToolResult<{ city: string; temp: number }>();
+ *
+ *   if (!result) return <div>Loading...</div>;
+ *
+ *   return <div>{result.city}: {result.temp}°C</div>;
+ * }
+ * ```
+ */
+declare function useToolResult<T = unknown>(): UseToolResultReturn<T>;
+
+interface UseToolInputReturn<T = Record<string, unknown>> {
+    /** The tool input arguments, typed as T */
+    input: T | null;
+    /** Whether input has been received */
+    hasInput: boolean;
+}
+/**
+ * Hook to access tool input arguments from host
+ *
+ * @example
+ * ```tsx
+ * function WeatherCard() {
+ *   const { input } = useToolInput<{ city: string }>();
+ *
+ *   if (!input) return <div>Loading...</div>;
+ *
+ *   return <div>Weather for: {input.city}</div>;
+ * }
+ * ```
+ */
+declare function useToolInput$1<T = Record<string, unknown>>(): UseToolInputReturn<T>;
+
+interface UseToolInputPartialReturn {
+    /** Partial arguments currently available */
+    partialArgs: Record<string, unknown> | null;
+    /** Whether partial args are being received */
+    isStreaming: boolean;
+}
+/**
+ * Hook to access streaming partial tool input
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { partialArgs, isStreaming } = useToolInputPartial();
+ *
+ *   if (isStreaming) {
+ *     return <div>Receiving: {JSON.stringify(partialArgs)}</div>;
+ *   }
+ *   return <div>Ready for input</div>;
+ * }
+ * ```
+ */
+declare function useToolInputPartial(): UseToolInputPartialReturn;
+
+interface UseToolSubscriptionOptions {
+    /** Polling interval in milliseconds */
+    interval?: number;
+    /** Whether to start polling immediately */
+    enabled?: boolean;
+    /** Arguments to pass to the tool */
+    args?: Record<string, unknown>;
+}
+interface UseToolSubscriptionResult<T = unknown> {
+    /** Tool call result data */
+    result: T | null;
+    /** Loading state */
+    loading: boolean;
+    /** Error if any */
+    error: Error | null;
+    /** Start polling */
+    start: () => void;
+    /** Stop polling */
+    stop: () => void;
+    /** Whether polling is active */
+    isPolling: boolean;
+    /** Manually refresh (call tool immediately) */
+    refresh: () => Promise<T>;
+}
+/**
+ * Hook for subscribing to tool updates with automatic polling
+ *
+ * @example
+ * ```tsx
+ * function StockTicker() {
+ *   const { result, isPolling, start, stop } = useToolSubscription<StockData>(
+ *     'get-stock-price',
+ *     { interval: 5000, args: { symbol: 'AAPL' } }
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <div>Price: ${result?.price}</div>
+ *       <button onClick={isPolling ? stop : start}>
+ *         {isPolling ? 'Stop' : 'Start'} Updates
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useToolSubscription<T = unknown>(toolName: string, options?: UseToolSubscriptionOptions): UseToolSubscriptionResult<T>;
+
+/**
+ * useAuth - Authentication hook for GPT Apps
+ *
+ * Provides auth status and triggers ChatGPT's OAuth linking UI
+ * when tools return _meta["mcp/www_authenticate"].
+ */
+/**
+ * Authenticated user info
+ */
+interface AuthUser {
+    /** User ID (subject) */
+    id: string;
+    /** Display name */
+    name?: string;
+    /** Email address */
+    email?: string;
+    /** Profile picture URL */
+    picture?: string;
+}
+/**
+ * Return type for useAuth hook
+ */
+interface UseAuthReturn {
+    /** Whether user is authenticated */
+    isAuthenticated: boolean;
+    /** Currently authenticated user (if any) */
+    user: AuthUser | null;
+    /** Loading state */
+    loading: boolean;
+    /** Authentication error (if any) */
+    error: Error | null;
+    /** Trigger an auth-required tool to initiate OAuth flow */
+    triggerAuth: () => Promise<void>;
+    /** Clear auth state (for sign-out UI) */
+    clearAuth: () => void;
+}
+/**
+ * Authentication hook for GPT Apps
+ *
+ * In ChatGPT, authentication is triggered automatically when a tool
+ * returns `_meta["mcp/www_authenticate"]`. Use this hook to:
+ *
+ * 1. Check if the user is authenticated
+ * 2. Show loading state during auth
+ * 3. Display user info after auth
+ * 4. Manually trigger auth by calling an auth-required tool
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isAuthenticated, user, triggerAuth, loading } = useAuth();
+ *
+ *   if (loading) return <div>Authenticating...</div>;
+ *
+ *   if (!isAuthenticated) {
+ *     return (
+ *       <Button onClick={triggerAuth}>
+ *         Sign in with GitHub
+ *       </Button>
+ *     );
+ *   }
+ *
+ *   return <div>Welcome, {user?.name}!</div>;
+ * }
+ * ```
+ */
+declare function useAuth(): UseAuthReturn;
+
+interface OpenAiGlobals {
+    toolInput: Record<string, unknown>;
+    toolOutput: any;
+    toolResponseMetadata: Record<string, unknown>;
+    widgetState: Record<string, unknown>;
+    theme: 'light' | 'dark';
+    displayMode: 'inline' | 'modal' | 'fullscreen';
+    maxHeight: number;
+    safeArea: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    view: 'desktop' | 'mobile';
+    locale: string;
+}
+/**
+ * React hook to subscribe to window.openai global values.
+ * Source: https://developers.openai.com/apps-sdk/build/chatgpt-ui#useopenaiglobal
+ */
+declare function useOpenAiGlobal<K extends keyof OpenAiGlobals>(key: K): OpenAiGlobals[K] | undefined;
+
+/**
+ * Access the structured content returned by the tool.
+ * Maps to 'structuredContent' in the tool response.
+ */
+declare function useToolOutput<T = any>(): T | undefined;
+/**
+ * Access metadata about the tool response.
+ * Maps to '_meta' in the tool response.
+ */
+declare function useToolResponseMetadata<T = any>(): T | undefined;
+/**
+ * Access the input arguments passed to the tool.
+ */
+declare function useToolInput<T = any>(): T | undefined;
+
+/**
+ * Hook to read and write widget state.
+ * Widget state persists across the session for this specific widget instance.
+ *
+ * @param initialState - Default state if none exists
+ */
+declare function useWidgetState<T extends Record<string, unknown>>(initialState: T | (() => T)): [T, (newState: T | ((prev: T) => T)) => void];
+
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): react_jsx_runtime.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element | null;
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React__default.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+
+declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof Command$1.Input>): react_jsx_runtime.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command$1.Group>): react_jsx_runtime.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof Command$1.Item>): react_jsx_runtime.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+
+declare function Table({ className, ...props }: React.ComponentProps<"table">): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): react_jsx_runtime.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): react_jsx_runtime.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): react_jsx_runtime.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Utility function for merging Tailwind CSS classes
+ * Uses clsx for conditional classes and tailwind-merge to handle conflicts
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+interface DataGridColumn<T> {
+    /** Column key (accessor) */
+    key: keyof T | string;
+    /** Column header */
+    header: string;
+    /** Custom cell renderer */
+    cell?: (value: unknown, row: T) => ReactNode;
+    /** Enable sorting */
+    sortable?: boolean;
+    /** Column width */
+    width?: number | string;
+}
+interface DataGridProps<T extends Record<string, unknown>> {
+    /** Data array */
+    data: T[];
+    /** Column definitions */
+    columns: DataGridColumn<T>[];
+    /** Enable global search */
+    searchable?: boolean;
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Row click handler */
+    onRowClick?: (row: T) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * DataGrid - Sortable, filterable data table for tool results
+ *
+ * @example
+ * ```tsx
+ * const { result } = useTool<{ items: Item[] }>('get-items');
+ *
+ * <DataGrid
+ *   data={result?.items ?? []}
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'price', header: 'Price', cell: (v) => `$${v}` },
+ *   ]}
+ *   searchable
+ * />
+ * ```
+ */
+declare function DataGrid<T extends Record<string, unknown>>({ data, columns, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, className, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+
+type ChartType = 'line' | 'bar' | 'pie' | 'doughnut';
+interface ChartProps {
+    /** Chart type */
+    type: ChartType;
+    /** Chart data */
+    data: ChartData<ChartType$1>;
+    /** Chart options */
+    options?: ChartOptions<ChartType$1>;
+    /** Chart height */
+    height?: number | string;
+    /** Chart width */
+    width?: number | string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Chart component for data visualization
+ *
+ * @example
+ * ```tsx
+ * const { result } = useTool<{ prices: number[], labels: string[] }>('get-stock-data');
+ *
+ * <Chart
+ *   type="line"
+ *   data={{
+ *     labels: result?.labels ?? [],
+ *     datasets: [{
+ *       label: 'Price',
+ *       data: result?.prices ?? [],
+ *       borderColor: '#6366f1',
+ *       tension: 0.4,
+ *     }],
+ *   }}
+ *   height={300}
+ * />
+ * ```
+ */
+declare function Chart({ type, data, options, height, width, className, }: ChartProps): react_jsx_runtime.JSX.Element;
+
+interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Header content */
+    header?: ReactNode;
+    /** Sidebar content */
+    sidebar?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Sidebar position */
+    sidebarPosition?: 'left' | 'right';
+    /** Sidebar width */
+    sidebarWidth?: number | string;
+    /** Enable auto-resize to content (uses ext-apps sendSizeChanged) */
+    autoResize?: boolean;
+    /** Padding */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+/**
+ * AppShell - Root layout container for MCP Apps
+ *
+ * Provides header, sidebar, main content, and footer areas with auto-resize support.
+ * Uses the ext-apps protocol for proper size change notifications.
+ *
+ * @example
+ * ```tsx
+ * <AppShell
+ *   header={<h1>My App</h1>}
+ *   sidebar={<Navigation />}
+ *   autoResize
+ * >
+ *   <MainContent />
+ * </AppShell>
+ * ```
+ */
+declare function AppShell({ header, sidebar, footer, sidebarPosition, sidebarWidth, autoResize, padding, className, children, ...props }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface TabsProps {
+    /** Tab items */
+    tabs: TabItem[];
+    /** Default active tab (uncontrolled) */
+    defaultValue?: string;
+    /** Active tab value (controlled) */
+    value?: string;
+    /** Change handler */
+    onValueChange?: (value: string) => void;
+    /** Children (tab content) */
+    children?: React__default.ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+interface TabContentProps {
+    /** Tab value this content belongs to */
+    value: string;
+    /** Children */
+    children: React__default.ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+declare function Tabs({ tabs, defaultValue, value, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabContent({ value, children, className }: TabContentProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    /** Open state */
+    open?: boolean;
+    /** Default open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Children content */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Trigger element */
+    trigger?: ReactNode;
+}
+declare function Modal({ open, defaultOpen, onOpenChange, title, description, children, className, trigger, }: ModalProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    /** Code content */
+    code: string;
+    /** Programming language */
+    language?: string;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Enable copy button */
+    copyable?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * CodeBlock - Syntax highlighted code display
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock
+ *   code={`const greeting = "Hello, World!";`}
+ *   language="javascript"
+ *   copyable
+ * />
+ * ```
+ */
+declare function CodeBlock({ code, language, showLineNumbers, copyable, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card variant */
+    variant?: 'default' | 'outline' | 'elevated';
+    /** Padding size */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Make card interactive (hover effects) */
+    interactive?: boolean;
+}
+/**
+ * Card container component
+ */
+declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Header title */
+    title?: ReactNode;
+    /** Header description */
+    description?: ReactNode;
+    /** Right-side action */
+    action?: ReactNode;
+}
+declare const CardHeader: React__default.ForwardRefExoticComponent<CardHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
+interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const CardContent: React__default.ForwardRefExoticComponent<CardContentProps & React__default.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const CardFooter: React__default.ForwardRefExoticComponent<CardFooterProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Input label */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Input size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Left icon or element */
+    leftElement?: ReactNode;
+    /** Right icon or element */
+    rightElement?: ReactNode;
+    /** Full width */
+    fullWidth?: boolean;
+}
+/**
+ * Input component with label, validation, and icon support
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   error={errors.email}
+ * />
+ * ```
+ */
+declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { ActionButton, type ActionButtonProps, Alert, AlertDescription, AlertTitle, type AppInfo, type AppOptions, AppProvider, type AppProviderProps, AppShell, type AppShellProps, type AuthUser, Badge, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, Chart, type ChartProps, type ChartType, Checkbox, CodeBlock, type CodeBlockProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ConfirmConfig, DEFAULT_RESULT_CONFIG, DataGrid, type DataGridColumn, type DataGridProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GPTAppProvider, type GPTAppProviderProps, type GptAppContextValue, INITIAL_TOOL_STATE, Input, type InputProps, Label, type McpActionProps, type McpAppContextValue, Modal, type ModalProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RequireConnection, type RequireConnectionProps, type ResourceBinding, type ResourceMeta, ResourceView, type ResourceViewProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Slider, StreamingContent, type StreamingContentProps, Switch, TabContent, type TabContentProps, type TabItem, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, Textarea, Toaster, type ToolBinding, ToolButton, type ToolButtonProps, type ToolButtonState, type ToolCallState, type ToolContextValue, ToolDataGrid, type ToolDataGridColumn, type ToolDataGridProps, type ToolDataGridRowAction, ToolErrorBoundary, type ToolErrorBoundaryProps, ToolForm, type ToolFormField, type ToolFormProps, ToolInput, type ToolInputProps, type ToolInputSuggestion, ToolProvider, type ToolProviderProps, type ToolResultConfig, ToolSelect, type ToolSelectOption, type ToolSelectProps, type ToolState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseAuthReturn, type UseHostContextReturn, type UseMessageReturn, type UseResourceOptions, type UseResourceReturn, type UseToolInputPartialReturn, type UseToolInputReturn, type UseToolOptions, type UseToolResultReturn, type UseToolReturn, type UseToolStreamOptions, type UseToolStreamReturn, badgeVariants, buttonVariants, cn, normalizeToolBinding, useAuth, useFormField, useGptApp, useGptTool, useHostContext, useMcpApp, useMessage, useOpenAiGlobal, useResource, useTool, useToolContext, useToolInput$1 as useToolInput, useToolInputPartial, useToolInput as useToolInputSpec, useToolOutput, useToolResponseMetadata, useToolResult, useToolStream, useToolSubscription, useWidgetState };