@leanmcp/ui 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -1,64 +1,33 @@
-import React, { ReactNode, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { McpUiAppCapabilities, App, McpUiHostContext } from '@modelcontextprotocol/ext-apps';
-export { App, McpUiAppCapabilities, McpUiHostContext, McpUiToolInputNotification, McpUiToolInputPartialNotification, McpUiToolResultNotification } from '@modelcontextprotocol/ext-apps';
-import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+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, McpUiHostStyles, McpUiStyles, McpUiToolCancelledNotification, McpUiToolInputNotification, McpUiToolInputPartialNotification, McpUiToolResultNotification, PostMessageTransport } 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 { UIApp, UIAppOptions, getUIAppMetadata, getUIAppUri } from './server.mjs';
 import { ChartData, ChartType as ChartType$1, ChartOptions } from 'chart.js';
-
-/**
- * @UIApp Decorator
- *
- * Links an MCP tool to a React UI component.
- * When applied to a tool method, it:
- * 1. Adds _meta.ui/resourceUri to the tool definition
- * 2. Auto-registers a resource that renders the component to HTML
- *
- * This decorator is designed to work with @leanmcp/core decorators.
- */
-
-/**
- * Options for @UIApp decorator
- */
-interface UIAppOptions {
-    /** React component to render for this tool's UI */
-    component: React.ComponentType<any>;
-    /** Custom resource URI (auto-generated if not provided) */
-    uri?: string;
-    /** HTML document title */
-    title?: string;
-    /** Additional CSS styles */
-    styles?: string;
-}
-/**
- * Decorator that links a tool to a UI component.
- *
- * When the tool is called, the host will fetch the UI resource
- * which returns the component rendered as HTML.
- *
- * @example
- * ```typescript
- * import { Tool } from '@leanmcp/core';
- * import { UIApp } from '@leanmcp/ui';
- * import { WeatherCard } from './WeatherCard';
- *
- * class WeatherService {
- *   @Tool({ description: 'Get weather for a city' })
- *   @UIApp({ component: WeatherCard })
- *   async getWeather(args: { city: string }) {
- *     return { city: args.city, temp: 22 };
- *   }
- * }
- * ```
- */
-declare function UIApp(options: UIAppOptions): MethodDecorator;
-/**
- * Helper to get UIApp metadata from a method
- */
-declare function getUIAppMetadata(target: Function): UIAppOptions | undefined;
-/**
- * Helper to get the resource URI from a method
- */
-declare function getUIAppUri(target: Function): string | undefined;
+export { AppBridge } from '@modelcontextprotocol/ext-apps/app-bridge';
 
 /**
  * App information (same as ext-apps Implementation)
@@ -95,6 +64,11 @@ interface McpAppContextValue {
     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 */
@@ -103,6 +77,8 @@ interface McpAppContextValue {
     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 */
@@ -111,6 +87,8 @@ interface AppProviderProps {
     capabilities?: McpUiAppCapabilities;
     /** App options (autoResize, etc.) */
     options?: AppOptions;
+    /** Callback when host requests teardown */
+    onTeardown?: () => void | Promise<void>;
     /** React children */
     children: ReactNode;
 }
@@ -128,6 +106,7 @@ interface AppProviderProps {
  *       appInfo={{ name: "MyApp", version: "1.0.0" }}
  *       capabilities={{ tools: { listChanged: true } }}
  *       options={{ autoResize: true }}
+ *       onTeardown={() => console.log('Cleaning up...')}
  *     >
  *       <MyContent />
  *     </AppProvider>
@@ -135,127 +114,835 @@ interface AppProviderProps {
  * }
  * ```
  */
-declare function AppProvider({ appInfo, capabilities, options, children }: AppProviderProps): react_jsx_runtime.JSX.Element;
+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;
 
-interface UseToolResult<T = unknown> {
-    /** Call the tool with arguments */
-    call: (args?: Record<string, unknown>) => Promise<T>;
-    /** Whether the tool is currently being called */
-    loading: boolean;
-    /** The result of the last tool call */
-    result: T | null;
-    /** Error from the last tool call */
-    error: Error | null;
-    /** Reset the result and error state */
-    reset: () => void;
-}
 /**
- * Hook for calling an MCP tool with loading and error state
+ * 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
- * function WeatherWidget() {
- *   const { call, loading, result, error } = useTool<WeatherData>('get-weather');
+ * // Simple string binding
+ * <ToolButton tool="refresh-data" />
  *
- *   return (
- *     <div>
- *       <button onClick={() => call({ city: 'London' })} disabled={loading}>
- *         {loading ? 'Loading...' : 'Get Weather'}
- *       </button>
- *       {result && <div>Temperature: {result.temperature}°C</div>}
- *       {error && <div>Error: {error.message}</div>}
- *     </div>
- *   );
- * }
+ * // Full configuration
+ * <ToolButton tool={{
+ *   name: "create-item",
+ *   args: { type: "note" },
+ *   transform: (r) => r.item
+ * }} />
  * ```
  */
-declare function useTool<T = unknown>(toolName: string): UseToolResult<T>;
-
-interface UseToolResultReturn<T = unknown> {
-    /** The tool result, typed as T */
+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;
-    /** Raw CallToolResult from MCP */
-    rawResult: CallToolResult | null;
-    /** Whether a result has been received */
+    /** Last error */
+    error: Error | null;
+    /** Whether we have a result (success or error) */
     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>;
- * }
- * ```
+ * Initial tool call state
  */
-declare function useToolResult<T = unknown>(): UseToolResultReturn<T>;
+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;
+}
 
-interface UseToolInputReturn<T = Record<string, unknown>> {
-    /** The tool input arguments, typed as T */
-    input: T | null;
-    /** Whether input has been received */
-    hasInput: boolean;
+/**
+ * ToolContext value
+ */
+interface ToolContextValue {
+    /** Default result display configuration */
+    resultDisplay: ToolResultConfig;
+    /** Default error handler */
+    onError?: (error: Error) => void;
+    /** Show loading states globally */
+    showLoading: boolean;
 }
 /**
- * Hook to access tool input arguments from host
+ * 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
- * function WeatherCard() {
- *   const { input } = useToolInput<{ city: string }>();
- *
- *   if (!input) return <div>Loading...</div>;
+ * <Button variant="primary" onClick={handleClick}>
+ *   Click Me
+ * </Button>
  *
- *   return <div>Weather for: {input.city}</div>;
- * }
+ * <Button variant="ghost" loading>
+ *   Loading...
+ * </Button>
  * ```
  */
-declare function useToolInput<T = Record<string, unknown>>(): UseToolInputReturn<T>;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-interface UseToolInputPartialReturn {
-    /** Partial arguments currently available */
-    partialArgs: Record<string, unknown> | null;
-    /** Whether partial args are being received */
-    isStreaming: boolean;
+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;
 }
 /**
- * Hook to access streaming partial tool input
+ * ActionButton - Button that calls an MCP tool with loading state
  *
  * @example
  * ```tsx
- * function MyComponent() {
- *   const { partialArgs, isStreaming } = useToolInputPartial();
- *
- *   if (isStreaming) {
- *     return <div>Receiving: {JSON.stringify(partialArgs)}</div>;
- *   }
- *   return <div>Ready for input</div>;
- * }
+ * <ActionButton
+ *   toolName="get-weather"
+ *   toolArgs={{ city: 'London' }}
+ *   onToolSuccess={(data) => console.log(data)}
+ * >
+ *   Get Weather
+ * </ActionButton>
  * ```
  */
-declare function useToolInputPartial(): UseToolInputPartialReturn;
+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;
@@ -263,195 +950,318 @@ interface UseHostContextReturn {
     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
+ * 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 ThemedCard() {
- *   const { theme, locale } = useHostContext();
+ * function WeatherCard() {
+ *   const { input } = useToolInput<{ city: string }>();
  *
- *   return (
- *     <div className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>
- *       Locale: {locale}
- *     </div>
- *   );
+ *   if (!input) return <div>Loading...</div>;
+ *
+ *   return <div>Weather for: {input.city}</div>;
  * }
  * ```
  */
-declare function useHostContext(): UseHostContextReturn;
+declare function useToolInput<T = Record<string, unknown>>(): UseToolInputReturn<T>;
 
-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;
+interface UseToolInputPartialReturn {
+    /** Partial arguments currently available */
+    partialArgs: Record<string, unknown> | null;
+    /** Whether partial args are being received */
+    isStreaming: boolean;
 }
 /**
- * Button component with multiple variants and loading state
+ * Hook to access streaming partial tool input
  *
  * @example
  * ```tsx
- * <Button variant="primary" onClick={handleClick}>
- *   Click Me
- * </Button>
+ * function MyComponent() {
+ *   const { partialArgs, isStreaming } = useToolInputPartial();
  *
- * <Button variant="ghost" loading>
- *   Loading...
- * </Button>
+ *   if (isStreaming) {
+ *     return <div>Receiving: {JSON.stringify(partialArgs)}</div>;
+ *   }
+ *   return <div>Ready for input</div>;
+ * }
  * ```
  */
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare function useToolInputPartial(): UseToolInputPartialReturn;
 
-interface ActionButtonProps extends Omit<ButtonProps, 'onClick' | 'loading' | 'onError'> {
-    /** Tool name to call */
-    toolName: string;
+interface UseToolSubscriptionOptions {
+    /** Polling interval in milliseconds */
+    interval?: number;
+    /** Whether to start polling immediately */
+    enabled?: boolean;
     /** 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;
+    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>;
 }
 /**
- * ActionButton - Button that calls an MCP tool with loading state
+ * Hook for subscribing to tool updates with automatic polling
  *
  * @example
  * ```tsx
- * <ActionButton
- *   toolName="get-weather"
- *   toolArgs={{ city: 'London' }}
- *   onToolSuccess={(data) => console.log(data)}
- * >
- *   Get Weather
- * </ActionButton>
+ * 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 ActionButton({ toolName, toolArgs, onToolSuccess, onToolError, showResult, renderResult, children, ...buttonProps }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+declare function useToolSubscription<T = unknown>(toolName: string, options?: UseToolSubscriptionOptions): UseToolSubscriptionResult<T>;
 
-interface ToolFormField {
-    /** Field name (matches tool input schema) */
+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;
-    /** Display label */
-    label: string;
-    /** Input type */
-    type?: 'text' | 'number' | 'email' | 'password' | 'textarea';
-    /** Placeholder text */
-    placeholder?: string;
-    /** Default value */
-    defaultValue?: string | number;
-    /** Required field */
-    required?: boolean;
-    /** Helper text */
-    helperText?: string;
-}
-interface ToolFormProps {
-    /** Tool name to call on submit */
-    toolName: string;
-    /** Form fields */
-    fields: ToolFormField[];
-    /** Submit button text */
-    submitText?: 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;
-    /** Additional class name */
+    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;
-}
-/**
- * ToolForm - Auto-generates a form that submits to an MCP tool
- *
- * @example
- * ```tsx
- * <ToolForm
- *   toolName="create-user"
- *   fields={[
- *     { name: 'name', label: 'Name', required: true },
- *     { name: 'email', label: 'Email', type: 'email', required: true },
- *   ]}
- *   submitText="Create User"
- *   onSuccess={(user) => console.log('Created:', user)}
- * />
- * ```
- */
-declare function ToolForm({ toolName, fields, submitText, onSuccess, onError, showResult, className, }: ToolFormProps): react_jsx_runtime.JSX.Element;
+    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;
 
-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.ForwardRefExoticComponent<CardProps & React.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.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
-interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-}
-declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-}
-declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+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;
 
-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}
- * />
- * ```
+ * Utility function for merging Tailwind CSS classes
+ * Uses clsx for conditional classes and tailwind-merge to handle conflicts
  */
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare function cn(...inputs: ClassValue[]): string;
 
 interface DataGridColumn<T> {
     /** Column key (accessor) */
@@ -552,7 +1362,7 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     sidebarPosition?: 'left' | 'right';
     /** Sidebar width */
     sidebarWidth?: number | string;
-    /** Enable auto-resize to content */
+    /** Enable auto-resize to content (uses ext-apps sendSizeChanged) */
     autoResize?: boolean;
     /** Padding */
     padding?: 'none' | 'sm' | 'md' | 'lg';
@@ -561,6 +1371,7 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
  * 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
@@ -575,6 +1386,56 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
  */
 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;
@@ -601,4 +1462,63 @@ interface CodeBlockProps {
  */
 declare function CodeBlock({ code, language, showLineNumbers, copyable, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, type AppInfo, type AppOptions, AppProvider, type AppProviderProps, AppShell, type AppShellProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Chart, type ChartProps, type ChartType, CodeBlock, type CodeBlockProps, DataGrid, type DataGridColumn, type DataGridProps, Input, type InputProps, type McpAppContextValue, ToolForm, type ToolFormField, type ToolFormProps, UIApp, type UIAppOptions, type UseHostContextReturn, type UseToolInputPartialReturn, type UseToolInputReturn, type UseToolResult, type UseToolResultReturn, getUIAppMetadata, getUIAppUri, useHostContext, useMcpApp, useTool, useToolInput, useToolInputPartial, useToolResult };
+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, 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, 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 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, useFormField, useHostContext, useMcpApp, useMessage, useResource, useTool, useToolContext, useToolInput, useToolInputPartial, useToolResult, useToolStream, useToolSubscription };