@leanmcp/ui 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,53 +1,41 @@
-import 'reflect-metadata';
-import React7, { forwardRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useRef } from 'react';
-import { PostMessageTransport, App } from '@modelcontextprotocol/ext-apps';
+import { __name } from './chunk-WORZ46KI.mjs';
+export { UIApp, getUIAppMetadata, getUIAppUri } from './chunk-WORZ46KI.mjs';
+import * as React25 from 'react';
+import React25__default, { forwardRef, Component, useState, useRef, useCallback, useEffect, createContext, useContext, useMemo } from 'react';
+import { applyDocumentTheme, applyHostStyleVariables, PostMessageTransport, App } from '@modelcontextprotocol/ext-apps';
+export { App, PostMessageTransport } from '@modelcontextprotocol/ext-apps';
+import { XIcon, ChevronDownIcon, CheckIcon, ChevronUpIcon, Loader2, SearchIcon, Search, X, AlertCircle, RefreshCw, ChevronLeft, ChevronRight, WifiOff, CircleIcon, ChevronRightIcon, Check, ArrowUpDown, ArrowUp, ArrowDown, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { toast, Toaster as Toaster$1 } from 'sonner';
 import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Command as Command$1 } from 'cmdk';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as LabelPrimitive from '@radix-ui/react-label';
+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 ProgressPrimitive from '@radix-ui/react-progress';
+import { useFormContext, useFormState, FormProvider, Controller } from 'react-hook-form';
+import * as TabsPrimitive2 from '@radix-ui/react-tabs';
+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 * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
-import { Chart as Chart$1, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend } from 'chart.js';
+import { Chart as Chart$1, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip as Tooltip$1, Legend } from 'chart.js';
 import { Chart as Chart$2 } from 'react-chartjs-2';
 import { Highlight, themes } from 'prism-react-renderer';
+export { AppBridge } from '@modelcontextprotocol/ext-apps/app-bridge';
 
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var UI_APP_COMPONENT_KEY = "ui:app:component";
-var UI_APP_URI_KEY = "ui:app:uri";
-var UI_APP_OPTIONS_KEY = "ui:app:options";
-function UIApp(options) {
-  return (target, propertyKey, descriptor) => {
-    const methodName = String(propertyKey);
-    const className = target.constructor.name.toLowerCase().replace("service", "");
-    const uri = options.uri ?? `ui://${className}/${methodName}`;
-    Reflect.defineMetadata(UI_APP_COMPONENT_KEY, options.component, descriptor.value);
-    Reflect.defineMetadata(UI_APP_URI_KEY, uri, descriptor.value);
-    Reflect.defineMetadata(UI_APP_OPTIONS_KEY, options, descriptor.value);
-    const existingMeta = Reflect.getMetadata("tool:meta", descriptor.value) || {};
-    Reflect.defineMetadata("tool:meta", {
-      ...existingMeta,
-      "ui/resourceUri": uri
-    }, descriptor.value);
-    return descriptor;
-  };
-}
-__name(UIApp, "UIApp");
-function getUIAppMetadata(target) {
-  const component = Reflect.getMetadata(UI_APP_COMPONENT_KEY, target);
-  if (!component) return void 0;
-  return {
-    component,
-    uri: Reflect.getMetadata(UI_APP_URI_KEY, target),
-    ...Reflect.getMetadata(UI_APP_OPTIONS_KEY, target)
-  };
-}
-__name(getUIAppMetadata, "getUIAppMetadata");
-function getUIAppUri(target) {
-  return Reflect.getMetadata(UI_APP_URI_KEY, target);
-}
-__name(getUIAppUri, "getUIAppUri");
 var McpAppContext = /* @__PURE__ */ createContext(null);
 function AppProvider({ appInfo, capabilities = {}, options = {
   autoResize: true
-}, children }) {
+}, onTeardown, children }) {
   const [app, setApp] = useState(null);
   const [isConnected, setIsConnected] = useState(false);
   const [error, setError] = useState(null);
@@ -55,6 +43,18 @@ function AppProvider({ appInfo, capabilities = {}, options = {
   const [toolInput, setToolInput] = useState(null);
   const [toolInputPartial, setToolInputPartial] = useState(null);
   const [toolResult, setToolResult] = useState(null);
+  const [toolCancelled, setToolCancelled] = useState({
+    cancelled: false
+  });
+  const stylesApplied = useRef(false);
+  const applyHostStyles = useCallback((context) => {
+    if (context.theme) {
+      applyDocumentTheme(context.theme);
+    }
+    if (context.styles?.variables) {
+      applyHostStyleVariables(context.styles.variables);
+    }
+  }, []);
   useEffect(() => {
     let mounted = true;
     let appInstance = null;
@@ -65,6 +65,9 @@ function AppProvider({ appInfo, capabilities = {}, options = {
         appInstance.ontoolinput = (params) => {
           if (mounted) {
             setToolInput(params.arguments);
+            setToolCancelled({
+              cancelled: false
+            });
           }
         };
         appInstance.ontoolinputpartial = (params) => {
@@ -77,19 +80,42 @@ function AppProvider({ appInfo, capabilities = {}, options = {
             setToolResult(params);
           }
         };
+        appInstance.ontoolcancelled = (params) => {
+          if (mounted) {
+            setToolCancelled({
+              cancelled: true,
+              reason: params.reason
+            });
+          }
+        };
         appInstance.onhostcontextchanged = (params) => {
           if (mounted) {
             setHostContext((prev) => ({
               ...prev,
               ...params
             }));
+            applyHostStyles(params);
           }
         };
+        if (onTeardown) {
+          appInstance.onteardown = async () => {
+            await onTeardown();
+            return {};
+          };
+        }
         await appInstance.connect(transport);
         if (mounted) {
           setApp(appInstance);
           setIsConnected(true);
           setError(null);
+          const initialContext = appInstance.getHostContext();
+          if (initialContext) {
+            setHostContext(initialContext);
+            if (!stylesApplied.current) {
+              applyHostStyles(initialContext);
+              stylesApplied.current = true;
+            }
+          }
         }
       } catch (err) {
         if (mounted) {
@@ -108,12 +134,17 @@ function AppProvider({ appInfo, capabilities = {}, options = {
     };
   }, [
     appInfo.name,
-    appInfo.version
+    appInfo.version,
+    applyHostStyles,
+    onTeardown
   ]);
   const callTool = useCallback(async (name, args = {}) => {
     if (!app) {
       throw new Error("Not connected to host");
     }
+    setToolCancelled({
+      cancelled: false
+    });
     const result = await app.callServerTool({
       name,
       arguments: args
@@ -157,12 +188,24 @@ function AppProvider({ appInfo, capabilities = {}, options = {
       window.open(url, "_blank", "noopener,noreferrer");
       return;
     }
-    await app.sendOpenLink({
+    await app.openLink({
       url
     });
   }, [
     app
   ]);
+  const requestDisplayMode = useCallback(async (mode) => {
+    if (!app) {
+      console.warn("[AppProvider] Not connected - cannot request display mode");
+      return "inline";
+    }
+    const result = await app.requestDisplayMode({
+      mode
+    });
+    return result.mode;
+  }, [
+    app
+  ]);
   const value = {
     app,
     isConnected,
@@ -171,15 +214,17 @@ function AppProvider({ appInfo, capabilities = {}, options = {
     toolInput,
     toolInputPartial,
     toolResult,
+    toolCancelled,
     callTool,
     sendMessage,
     sendLog,
-    openLink
+    openLink,
+    requestDisplayMode
   };
   const theme = hostContext.theme ?? "light";
-  return /* @__PURE__ */ React7.createElement(McpAppContext.Provider, {
+  return /* @__PURE__ */ React25__default.createElement(McpAppContext.Provider, {
     value
-  }, /* @__PURE__ */ React7.createElement("div", {
+  }, /* @__PURE__ */ React25__default.createElement("div", {
     className: "lui-root",
     "data-theme": theme
   }, children));
@@ -193,6 +238,9 @@ var ssrDefaultContext = {
   toolInput: null,
   toolInputPartial: null,
   toolResult: null,
+  toolCancelled: {
+    cancelled: false
+  },
   callTool: /* @__PURE__ */ __name(async () => {
     throw new Error("callTool not available during SSR");
   }, "callTool"),
@@ -204,7 +252,11 @@ var ssrDefaultContext = {
   }, "sendLog"),
   openLink: /* @__PURE__ */ __name(async () => {
     console.warn("openLink not available during SSR");
-  }, "openLink")
+  }, "openLink"),
+  requestDisplayMode: /* @__PURE__ */ __name(async () => {
+    console.warn("requestDisplayMode not available during SSR");
+    return "inline";
+  }, "requestDisplayMode")
 };
 function useMcpApp() {
   const context = useContext(McpAppContext);
@@ -214,311 +266,2598 @@ function useMcpApp() {
   return context;
 }
 __name(useMcpApp, "useMcpApp");
-function useTool(toolName) {
+var DEFAULT_CONTEXT = {
+  resultDisplay: {
+    display: "none"
+  },
+  showLoading: true
+};
+var ToolContext = /* @__PURE__ */ createContext(DEFAULT_CONTEXT);
+function ToolProvider({ defaults = {}, children }) {
+  const parentContext = useContext(ToolContext);
+  const value = useMemo(() => ({
+    resultDisplay: defaults.resultDisplay ?? parentContext.resultDisplay,
+    onError: defaults.onError ?? parentContext.onError,
+    showLoading: defaults.showLoading ?? parentContext.showLoading
+  }), [
+    defaults,
+    parentContext
+  ]);
+  return /* @__PURE__ */ React25.createElement(ToolContext.Provider, {
+    value
+  }, children);
+}
+__name(ToolProvider, "ToolProvider");
+function useToolContext() {
+  return useContext(ToolContext);
+}
+__name(useToolContext, "useToolContext");
+var Toaster = /* @__PURE__ */ __name(({ ...props }) => {
+  const { theme = "system" } = useTheme();
+  return /* @__PURE__ */ React25__default.createElement(Toaster$1, {
+    theme,
+    className: "toaster group",
+    icons: {
+      success: /* @__PURE__ */ React25__default.createElement(CircleCheckIcon, {
+        className: "size-4"
+      }),
+      info: /* @__PURE__ */ React25__default.createElement(InfoIcon, {
+        className: "size-4"
+      }),
+      warning: /* @__PURE__ */ React25__default.createElement(TriangleAlertIcon, {
+        className: "size-4"
+      }),
+      error: /* @__PURE__ */ React25__default.createElement(OctagonXIcon, {
+        className: "size-4"
+      }),
+      loading: /* @__PURE__ */ React25__default.createElement(Loader2Icon, {
+        className: "size-4 animate-spin"
+      })
+    },
+    style: {
+      "--normal-bg": "var(--popover)",
+      "--normal-text": "var(--popover-foreground)",
+      "--normal-border": "var(--border)",
+      "--border-radius": "var(--radius)"
+    },
+    ...props
+  });
+}, "Toaster");
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+
+// src/components/ui/button.tsx
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9",
+      "icon-sm": "size-8",
+      "icon-lg": "size-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ React25.createElement(Comp, {
+    "data-slot": "button",
+    "data-variant": variant,
+    "data-size": size,
+    className: cn(buttonVariants({
+      variant,
+      size,
+      className
+    })),
+    ...props
+  });
+}
+__name(Button, "Button");
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Root, {
+    "data-slot": "dialog",
+    ...props
+  });
+}
+__name(Dialog, "Dialog");
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Trigger, {
+    "data-slot": "dialog-trigger",
+    ...props
+  });
+}
+__name(DialogTrigger, "DialogTrigger");
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Portal, {
+    "data-slot": "dialog-portal",
+    ...props
+  });
+}
+__name(DialogPortal, "DialogPortal");
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Close, {
+    "data-slot": "dialog-close",
+    ...props
+  });
+}
+__name(DialogClose, "DialogClose");
+function DialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Overlay, {
+    "data-slot": "dialog-overlay",
+    className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  });
+}
+__name(DialogOverlay, "DialogOverlay");
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPortal, {
+    "data-slot": "dialog-portal"
+  }, /* @__PURE__ */ React25.createElement(DialogOverlay, null), /* @__PURE__ */ React25.createElement(DialogPrimitive.Content, {
+    "data-slot": "dialog-content",
+    className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg", className),
+    ...props
+  }, children, showCloseButton && /* @__PURE__ */ React25.createElement(DialogPrimitive.Close, {
+    "data-slot": "dialog-close",
+    className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  }, /* @__PURE__ */ React25.createElement(XIcon, null), /* @__PURE__ */ React25.createElement("span", {
+    className: "sr-only"
+  }, "Close"))));
+}
+__name(DialogContent, "DialogContent");
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "dialog-header",
+    className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+    ...props
+  });
+}
+__name(DialogHeader, "DialogHeader");
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "dialog-footer",
+    className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+    ...props
+  });
+}
+__name(DialogFooter, "DialogFooter");
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Title, {
+    "data-slot": "dialog-title",
+    className: cn("text-lg leading-none font-semibold", className),
+    ...props
+  });
+}
+__name(DialogTitle, "DialogTitle");
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DialogPrimitive.Description, {
+    "data-slot": "dialog-description",
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  });
+}
+__name(DialogDescription, "DialogDescription");
+function extractResultData(result) {
+  if ("structuredContent" in result && result.structuredContent) {
+    return result.structuredContent;
+  }
+  if (result.content && result.content.length > 0) {
+    const textContent = result.content.filter((c) => c.type === "text").map((c) => c.text).join("");
+    if (textContent) {
+      try {
+        return JSON.parse(textContent);
+      } catch {
+        return textContent;
+      }
+    }
+  }
+  return result;
+}
+__name(extractResultData, "extractResultData");
+function useTool(toolName, options = {}) {
   const { callTool } = useMcpApp();
-  const [loading, setLoading] = useState(false);
+  const [state, setState] = useState("idle");
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
-  const call = useCallback(async (args = {}) => {
-    setLoading(true);
+  const abortControllerRef = useRef(null);
+  const lastArgsRef = useRef(void 0);
+  const retryCountRef = useRef(0);
+  const { defaultArgs, transform, retry, onStart, onSuccess, onError, onComplete } = options;
+  const retryConfig = typeof retry === "number" ? {
+    count: retry,
+    delay: 1e3
+  } : retry ?? {
+    count: 0,
+    delay: 1e3
+  };
+  const executeCall = useCallback(async (args) => {
+    const mergedArgs = {
+      ...defaultArgs,
+      ...args
+    };
+    lastArgsRef.current = mergedArgs;
+    abortControllerRef.current = new AbortController();
+    setState("loading");
     setError(null);
+    onStart?.();
     try {
-      const response = await callTool(toolName, args);
-      const data = response?.structuredContent ?? response;
+      const response = await callTool(toolName, mergedArgs);
+      if (abortControllerRef.current?.signal.aborted) {
+        throw new Error("Tool call aborted");
+      }
+      let data;
+      if (transform) {
+        data = transform(response);
+      } else {
+        data = extractResultData(response);
+      }
+      setState("success");
       setResult(data);
+      retryCountRef.current = 0;
+      onSuccess?.(data);
+      onComplete?.();
       return data;
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error(String(err));
+      if (retryCountRef.current < retryConfig.count) {
+        retryCountRef.current++;
+        await new Promise((resolve) => setTimeout(resolve, retryConfig.delay));
+        return executeCall(args);
+      }
+      setState("error");
       setError(error2);
+      retryCountRef.current = 0;
+      onError?.(error2);
+      onComplete?.();
       throw error2;
-    } finally {
-      setLoading(false);
     }
   }, [
     callTool,
-    toolName
+    toolName,
+    defaultArgs,
+    transform,
+    retryConfig,
+    onStart,
+    onSuccess,
+    onError,
+    onComplete
+  ]);
+  const call = useCallback(async (args) => {
+    retryCountRef.current = 0;
+    return executeCall(args);
+  }, [
+    executeCall
+  ]);
+  const mutate = useCallback(async (args) => {
+    return call(args);
+  }, [
+    call
   ]);
   const reset = useCallback(() => {
+    setState("idle");
     setResult(null);
     setError(null);
+    retryCountRef.current = 0;
+    abortControllerRef.current?.abort();
+  }, []);
+  const retryCall = useCallback(async () => {
+    if (lastArgsRef.current === void 0 && !defaultArgs) {
+      return null;
+    }
+    retryCountRef.current = 0;
+    return executeCall(lastArgsRef.current);
+  }, [
+    executeCall,
+    defaultArgs
+  ]);
+  const abort = useCallback(() => {
+    abortControllerRef.current?.abort();
+    setState("idle");
   }, []);
   return {
     call,
+    mutate,
+    state,
+    loading: state === "loading",
+    result,
+    error,
+    reset,
+    retry: retryCall,
+    abort
+  };
+}
+__name(useTool, "useTool");
+function ToolButton({ tool, args = {}, resultDisplay = "none", renderResult, resultDuration = 3e3, successMessage, errorMessage, onToolStart, onToolSuccess, onToolError, onToolComplete, loadingText, loadingIcon, disableWhileLoading = true, confirm, children, className, variant = "default", size = "default", disabled, asChild = false, ...props }) {
+  const toolConfig = typeof tool === "string" ? {
+    name: tool
+  } : tool;
+  const mergedArgs = {
+    ...toolConfig.args,
+    ...args
+  };
+  const { call, state, loading, result, error, reset } = useTool(toolConfig.name, {
+    defaultArgs: mergedArgs,
+    transform: toolConfig.transform,
+    onStart: onToolStart,
+    onSuccess: onToolSuccess,
+    onError: onToolError,
+    onComplete: onToolComplete
+  });
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [showResult, setShowResult] = useState(false);
+  const buttonState = {
     loading,
+    state,
     result,
     error,
-    reset
+    hasResult: result !== null || error !== null
+  };
+  const executeCall = useCallback(async () => {
+    try {
+      const res = await call();
+      if (resultDisplay === "toast") {
+        const message = typeof successMessage === "function" ? successMessage(res) : successMessage ?? "Success";
+        toast.success(message);
+      } else if (resultDisplay === "inline") {
+        setShowResult(true);
+        setTimeout(() => setShowResult(false), resultDuration);
+      }
+    } catch (err) {
+      if (resultDisplay === "toast") {
+        const message = typeof errorMessage === "function" ? errorMessage(err instanceof Error ? err : new Error(String(err))) : errorMessage ?? (err instanceof Error ? err.message : "An error occurred");
+        toast.error(message);
+      } else if (resultDisplay === "inline") {
+        setShowResult(true);
+        setTimeout(() => setShowResult(false), resultDuration);
+      }
+    }
+  }, [
+    call,
+    resultDisplay,
+    successMessage,
+    errorMessage,
+    resultDuration
+  ]);
+  const handleClick = useCallback(() => {
+    if (confirm) {
+      setShowConfirm(true);
+    } else {
+      executeCall();
+    }
+  }, [
+    confirm,
+    executeCall
+  ]);
+  const handleConfirm = useCallback(() => {
+    setShowConfirm(false);
+    executeCall();
+  }, [
+    executeCall
+  ]);
+  const confirmConfig = typeof confirm === "object" ? confirm : {
+    title: "Confirm Action",
+    description: "Are you sure you want to proceed?",
+    confirmText: "Confirm",
+    cancelText: "Cancel"
   };
+  const renderChildren = /* @__PURE__ */ __name(() => {
+    if (typeof children === "function") {
+      return children(buttonState);
+    }
+    if (loading) {
+      return /* @__PURE__ */ React25.createElement(React25.Fragment, null, loadingIcon ?? /* @__PURE__ */ React25.createElement(Loader2, {
+        className: "animate-spin"
+      }), loadingText && /* @__PURE__ */ React25.createElement("span", null, loadingText), !loadingText && children);
+    }
+    if (showResult && resultDisplay === "inline") {
+      if (error) {
+        return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(X, {
+          className: "text-destructive"
+        }), /* @__PURE__ */ React25.createElement("span", null, error.message));
+      }
+      if (renderResult) {
+        return renderResult(result);
+      }
+      return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Check, {
+        className: "text-success"
+      }), /* @__PURE__ */ React25.createElement("span", null, "Done"));
+    }
+    return children;
+  }, "renderChildren");
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Button, {
+    type: "button",
+    variant,
+    size,
+    className: cn(className),
+    disabled: disabled || disableWhileLoading && loading,
+    onClick: handleClick,
+    asChild,
+    ...props
+  }, renderChildren()), confirm && /* @__PURE__ */ React25.createElement(Dialog, {
+    open: showConfirm,
+    onOpenChange: setShowConfirm
+  }, /* @__PURE__ */ React25.createElement(DialogContent, null, /* @__PURE__ */ React25.createElement(DialogHeader, null, /* @__PURE__ */ React25.createElement(DialogTitle, null, confirmConfig.title), confirmConfig.description && /* @__PURE__ */ React25.createElement(DialogDescription, null, confirmConfig.description)), /* @__PURE__ */ React25.createElement(DialogFooter, null, /* @__PURE__ */ React25.createElement(Button, {
+    variant: "outline",
+    onClick: /* @__PURE__ */ __name(() => setShowConfirm(false), "onClick")
+  }, confirmConfig.cancelText ?? "Cancel"), /* @__PURE__ */ React25.createElement(Button, {
+    variant: confirmConfig.confirmVariant ?? (variant === "destructive" ? "destructive" : "default"),
+    onClick: handleConfirm
+  }, confirmConfig.confirmText ?? "Confirm")))));
+}
+__name(ToolButton, "ToolButton");
+function Select({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Root, {
+    "data-slot": "select",
+    ...props
+  });
+}
+__name(Select, "Select");
+function SelectGroup({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Group, {
+    "data-slot": "select-group",
+    ...props
+  });
+}
+__name(SelectGroup, "SelectGroup");
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Value, {
+    "data-slot": "select-value",
+    ...props
+  });
+}
+__name(SelectValue, "SelectValue");
+function SelectTrigger({ className, size = "default", children, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Trigger, {
+    "data-slot": "select-trigger",
+    "data-size": size,
+    className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  }, children, /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, {
+    asChild: true
+  }, /* @__PURE__ */ React25.createElement(ChevronDownIcon, {
+    className: "size-4 opacity-50"
+  })));
+}
+__name(SelectTrigger, "SelectTrigger");
+function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(SelectPrimitive.Content, {
+    "data-slot": "select-content",
+    className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+    position,
+    align,
+    ...props
+  }, /* @__PURE__ */ React25.createElement(SelectScrollUpButton, null), /* @__PURE__ */ React25.createElement(SelectPrimitive.Viewport, {
+    className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1")
+  }, children), /* @__PURE__ */ React25.createElement(SelectScrollDownButton, null)));
+}
+__name(SelectContent, "SelectContent");
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Label, {
+    "data-slot": "select-label",
+    className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+    ...props
+  });
+}
+__name(SelectLabel, "SelectLabel");
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+    "data-slot": "select-item",
+    className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement("span", {
+    "data-slot": "select-item-indicator",
+    className: "absolute right-2 flex size-3.5 items-center justify-center"
+  }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(CheckIcon, {
+    className: "size-4"
+  }))), /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children));
+}
+__name(SelectItem, "SelectItem");
+function SelectSeparator({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Separator, {
+    "data-slot": "select-separator",
+    className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+    ...props
+  });
+}
+__name(SelectSeparator, "SelectSeparator");
+function SelectScrollUpButton({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.ScrollUpButton, {
+    "data-slot": "select-scroll-up-button",
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(ChevronUpIcon, {
+    className: "size-4"
+  }));
+}
+__name(SelectScrollUpButton, "SelectScrollUpButton");
+function SelectScrollDownButton({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.ScrollDownButton, {
+    "data-slot": "select-scroll-down-button",
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(ChevronDownIcon, {
+    className: "size-4"
+  }));
+}
+__name(SelectScrollDownButton, "SelectScrollDownButton");
+function ToolSelect({ onSelectTool, argName = "value", additionalArgs = {}, optionsTool, optionsArgs = {}, transformOptions, options: staticOptions = [], placeholder = "Select an option", loadingPlaceholder = "Loading...", emptyMessage = "No options available", value: controlledValue, defaultValue, onValueChange, onOptionsLoaded, onSelectionSuccess, onSelectionError, showSuccessToast = false, successMessage, className, disabled = false }) {
+  const [fetchedOptions, setFetchedOptions] = useState([]);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const optionsToolConfig = optionsTool ? typeof optionsTool === "string" ? {
+    name: optionsTool
+  } : optionsTool : null;
+  const selectToolConfig = onSelectTool ? typeof onSelectTool === "string" ? {
+    name: onSelectTool
+  } : onSelectTool : null;
+  const optionsHook = useTool(optionsToolConfig?.name ?? "", {
+    defaultArgs: {
+      ...optionsToolConfig?.args,
+      ...optionsArgs
+    }
+  });
+  const selectHook = useTool(selectToolConfig?.name ?? "", {
+    onSuccess: /* @__PURE__ */ __name((result) => {
+      onSelectionSuccess?.(result);
+      if (showSuccessToast) {
+        const message = typeof successMessage === "function" ? successMessage(result) : successMessage ?? "Selection saved";
+        toast.success(message);
+      }
+    }, "onSuccess"),
+    onError: onSelectionError
+  });
+  useEffect(() => {
+    if (optionsToolConfig) {
+      optionsHook.call().then((result) => {
+        const options = transformOptions ? transformOptions(result) : result;
+        setFetchedOptions(options);
+        onOptionsLoaded?.(options);
+      }).catch(() => {
+      });
+    }
+  }, [
+    optionsToolConfig?.name
+  ]);
+  const allOptions = [
+    ...staticOptions,
+    ...fetchedOptions
+  ];
+  const value = controlledValue ?? internalValue;
+  const handleValueChange = useCallback((newValue) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+    if (selectToolConfig) {
+      selectHook.call({
+        [argName]: newValue,
+        ...additionalArgs
+      });
+    }
+  }, [
+    onValueChange,
+    selectToolConfig,
+    argName,
+    additionalArgs,
+    selectHook
+  ]);
+  const isLoading = optionsHook.loading || selectHook.loading;
+  const hasError = optionsHook.error || selectHook.error;
+  return /* @__PURE__ */ React25.createElement(Select, {
+    value,
+    onValueChange: handleValueChange,
+    disabled: disabled || isLoading
+  }, /* @__PURE__ */ React25.createElement(SelectTrigger, {
+    className: cn("w-full", className)
+  }, isLoading ? /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-4 w-4 animate-spin"
+  }), /* @__PURE__ */ React25.createElement("span", {
+    className: "text-muted-foreground"
+  }, optionsHook.loading ? loadingPlaceholder : "Saving...")) : /* @__PURE__ */ React25.createElement(SelectValue, {
+    placeholder
+  })), /* @__PURE__ */ React25.createElement(SelectContent, null, allOptions.length === 0 ? /* @__PURE__ */ React25.createElement("div", {
+    className: "py-6 text-center text-sm text-muted-foreground"
+  }, hasError ? "Error loading options" : emptyMessage) : allOptions.map((option) => /* @__PURE__ */ React25.createElement(SelectItem, {
+    key: option.value,
+    value: option.value,
+    disabled: option.disabled
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-2"
+  }, option.icon, /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement("div", null, option.label), option.description && /* @__PURE__ */ React25.createElement("div", {
+    className: "text-xs text-muted-foreground"
+  }, option.description)))))));
+}
+__name(ToolSelect, "ToolSelect");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ React25.createElement("input", {
+    type,
+    "data-slot": "input",
+    className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
+    ...props
+  });
+}
+__name(Input, "Input");
+function Command({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(Command$1, {
+    "data-slot": "command",
+    className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
+    ...props
+  });
+}
+__name(Command, "Command");
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
+  return /* @__PURE__ */ React25.createElement(Dialog, props, /* @__PURE__ */ React25.createElement(DialogHeader, {
+    className: "sr-only"
+  }, /* @__PURE__ */ React25.createElement(DialogTitle, null, title), /* @__PURE__ */ React25.createElement(DialogDescription, null, description)), /* @__PURE__ */ React25.createElement(DialogContent, {
+    className: cn("overflow-hidden p-0", className),
+    showCloseButton
+  }, /* @__PURE__ */ React25.createElement(Command, {
+    className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+  }, children)));
+}
+__name(CommandDialog, "CommandDialog");
+function CommandInput({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "command-input-wrapper",
+    className: "flex h-9 items-center gap-2 border-b px-3"
+  }, /* @__PURE__ */ React25.createElement(SearchIcon, {
+    className: "size-4 shrink-0 opacity-50"
+  }), /* @__PURE__ */ React25.createElement(Command$1.Input, {
+    "data-slot": "command-input",
+    className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+    ...props
+  }));
+}
+__name(CommandInput, "CommandInput");
+function CommandList({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(Command$1.List, {
+    "data-slot": "command-list",
+    className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+    ...props
+  });
+}
+__name(CommandList, "CommandList");
+function CommandEmpty({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(Command$1.Empty, {
+    "data-slot": "command-empty",
+    className: "py-6 text-center text-sm",
+    ...props
+  });
+}
+__name(CommandEmpty, "CommandEmpty");
+function CommandGroup({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(Command$1.Group, {
+    "data-slot": "command-group",
+    className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+    ...props
+  });
+}
+__name(CommandGroup, "CommandGroup");
+function CommandSeparator({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(Command$1.Separator, {
+    "data-slot": "command-separator",
+    className: cn("bg-border -mx-1 h-px", className),
+    ...props
+  });
+}
+__name(CommandSeparator, "CommandSeparator");
+function CommandItem({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(Command$1.Item, {
+    "data-slot": "command-item",
+    className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  });
+}
+__name(CommandItem, "CommandItem");
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("span", {
+    "data-slot": "command-shortcut",
+    className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+    ...props
+  });
+}
+__name(CommandShortcut, "CommandShortcut");
+function Popover({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(PopoverPrimitive.Root, {
+    "data-slot": "popover",
+    ...props
+  });
+}
+__name(Popover, "Popover");
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(PopoverPrimitive.Trigger, {
+    "data-slot": "popover-trigger",
+    ...props
+  });
+}
+__name(PopoverTrigger, "PopoverTrigger");
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+  return /* @__PURE__ */ React25.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(PopoverPrimitive.Content, {
+    "data-slot": "popover-content",
+    align,
+    sideOffset,
+    className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+    ...props
+  }));
+}
+__name(PopoverContent, "PopoverContent");
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(PopoverPrimitive.Anchor, {
+    "data-slot": "popover-anchor",
+    ...props
+  });
+}
+__name(PopoverAnchor, "PopoverAnchor");
+
+// src/mcp/ToolInput.tsx
+function ToolInput({ searchTool, debounce = 300, minChars = 1, argName = "query", additionalArgs = {}, autocomplete = false, transformSuggestions, onSuggestionSelect, emptyMessage = "No results found", value: controlledValue, onChange, onSearchResults, onSearchError, showSearchIcon = true, showClearButton = true, showLoadingIndicator = true, className, placeholder = "Search...", disabled, ...props }) {
+  const [internalValue, setInternalValue] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const debounceRef = useRef(null);
+  const inputRef = useRef(null);
+  const toolConfig = searchTool ? typeof searchTool === "string" ? {
+    name: searchTool
+  } : searchTool : null;
+  const { call, loading, error, reset } = useTool(toolConfig?.name ?? "", {
+    defaultArgs: {
+      ...toolConfig?.args,
+      ...additionalArgs
+    },
+    onSuccess: /* @__PURE__ */ __name((result) => {
+      onSearchResults?.(result);
+      if (autocomplete && transformSuggestions) {
+        const suggestions2 = transformSuggestions(result);
+        setSuggestions(suggestions2);
+        if (suggestions2.length > 0) {
+          setIsOpen(true);
+        }
+      }
+    }, "onSuccess"),
+    onError: onSearchError
+  });
+  const value = controlledValue ?? internalValue;
+  const handleChange = useCallback((e) => {
+    const newValue = e.target.value;
+    setInternalValue(newValue);
+    onChange?.(newValue);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    if (newValue.length < minChars) {
+      setSuggestions([]);
+      setIsOpen(false);
+      return;
+    }
+    if (toolConfig) {
+      debounceRef.current = setTimeout(() => {
+        call({
+          [argName]: newValue
+        });
+      }, debounce);
+    }
+  }, [
+    onChange,
+    minChars,
+    toolConfig,
+    argName,
+    debounce,
+    call
+  ]);
+  const handleClear = useCallback(() => {
+    setInternalValue("");
+    onChange?.("");
+    setSuggestions([]);
+    setIsOpen(false);
+    reset();
+    inputRef.current?.focus();
+  }, [
+    onChange,
+    reset
+  ]);
+  const handleSelect = useCallback((suggestion) => {
+    setInternalValue(suggestion.label);
+    onChange?.(suggestion.label);
+    setIsOpen(false);
+    onSuggestionSelect?.(suggestion);
+  }, [
+    onChange,
+    onSuggestionSelect
+  ]);
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+  const inputElement = /* @__PURE__ */ React25.createElement("div", {
+    className: cn("relative", className)
+  }, showSearchIcon && /* @__PURE__ */ React25.createElement(Search, {
+    className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+  }), /* @__PURE__ */ React25.createElement(Input, {
+    ref: inputRef,
+    value,
+    onChange: handleChange,
+    placeholder,
+    disabled,
+    className: cn(showSearchIcon && "pl-9", (showClearButton || showLoadingIndicator) && "pr-9"),
+    ...props
+  }), /* @__PURE__ */ React25.createElement("div", {
+    className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
+  }, showLoadingIndicator && loading && /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-4 w-4 animate-spin text-muted-foreground"
+  }), showClearButton && value && !loading && /* @__PURE__ */ React25.createElement("button", {
+    type: "button",
+    onClick: handleClear,
+    className: "h-4 w-4 text-muted-foreground hover:text-foreground transition-colors"
+  }, /* @__PURE__ */ React25.createElement(X, {
+    className: "h-4 w-4"
+  }))));
+  if (!autocomplete) {
+    return inputElement;
+  }
+  return /* @__PURE__ */ React25.createElement(Popover, {
+    open: isOpen,
+    onOpenChange: setIsOpen
+  }, /* @__PURE__ */ React25.createElement(PopoverTrigger, {
+    asChild: true
+  }, inputElement), /* @__PURE__ */ React25.createElement(PopoverContent, {
+    className: "p-0 w-[var(--radix-popover-trigger-width)]",
+    align: "start",
+    onOpenAutoFocus: /* @__PURE__ */ __name((e) => e.preventDefault(), "onOpenAutoFocus")
+  }, /* @__PURE__ */ React25.createElement(Command, null, /* @__PURE__ */ React25.createElement(CommandList, null, /* @__PURE__ */ React25.createElement(CommandEmpty, null, emptyMessage), /* @__PURE__ */ React25.createElement(CommandGroup, null, suggestions.map((suggestion) => /* @__PURE__ */ React25.createElement(CommandItem, {
+    key: suggestion.value,
+    value: suggestion.value,
+    onSelect: /* @__PURE__ */ __name(() => handleSelect(suggestion), "onSelect")
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-2"
+  }, suggestion.icon, /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement("div", null, suggestion.label), suggestion.description && /* @__PURE__ */ React25.createElement("div", {
+    className: "text-xs text-muted-foreground"
+  }, suggestion.description))))))))));
+}
+__name(ToolInput, "ToolInput");
+function Label2({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(LabelPrimitive.Root, {
+    "data-slot": "label",
+    className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+    ...props
+  });
+}
+__name(Label2, "Label");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("textarea", {
+    "data-slot": "textarea",
+    className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+    ...props
+  });
+}
+__name(Textarea, "Textarea");
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(CheckboxPrimitive.Root, {
+    "data-slot": "checkbox",
+    className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(CheckboxPrimitive.Indicator, {
+    "data-slot": "checkbox-indicator",
+    className: "grid place-content-center text-current transition-none"
+  }, /* @__PURE__ */ React25.createElement(CheckIcon, {
+    className: "size-3.5"
+  })));
+}
+__name(Checkbox, "Checkbox");
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+  const _values = React25.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
+    min,
+    max
+  ], [
+    value,
+    defaultValue,
+    min,
+    max
+  ]);
+  return /* @__PURE__ */ React25.createElement(SliderPrimitive.Root, {
+    "data-slot": "slider",
+    defaultValue,
+    value,
+    min,
+    max,
+    className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(SliderPrimitive.Track, {
+    "data-slot": "slider-track",
+    className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5")
+  }, /* @__PURE__ */ React25.createElement(SliderPrimitive.Range, {
+    "data-slot": "slider-range",
+    className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+  })), Array.from({
+    length: _values.length
+  }, (_, index) => /* @__PURE__ */ React25.createElement(SliderPrimitive.Thumb, {
+    "data-slot": "slider-thumb",
+    key: index,
+    className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+  })));
+}
+__name(Slider, "Slider");
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SwitchPrimitive.Root, {
+    "data-slot": "switch",
+    className: cn("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(SwitchPrimitive.Thumb, {
+    "data-slot": "switch-thumb",
+    className: cn("bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")
+  }));
+}
+__name(Switch, "Switch");
+var alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Alert({ className, variant, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "alert",
+    role: "alert",
+    className: cn(alertVariants({
+      variant
+    }), className),
+    ...props
+  });
+}
+__name(Alert, "Alert");
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "alert-title",
+    className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
+    ...props
+  });
+}
+__name(AlertTitle, "AlertTitle");
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "alert-description",
+    className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+    ...props
+  });
+}
+__name(AlertDescription, "AlertDescription");
+function ToolForm({ toolName, fields: manualFields, autoSchema = false, submitText = "Submit", loadingText, onSuccess, onError, showResult = false, showSuccessToast = false, successMessage, resetOnSuccess = false, className, layout = "vertical" }) {
+  const { app, isConnected } = useMcpApp();
+  const { call, loading, result, error, reset } = useTool(toolName, {
+    onSuccess: /* @__PURE__ */ __name((result2) => {
+      onSuccess?.(result2);
+      if (showSuccessToast) {
+        const message = typeof successMessage === "function" ? successMessage(result2) : successMessage ?? "Form submitted successfully";
+        toast.success(message);
+      }
+      if (resetOnSuccess) {
+        resetForm();
+      }
+    }, "onSuccess"),
+    onError
+  });
+  const [fields, setFields] = useState(manualFields ?? []);
+  const [schemaLoading, setSchemaLoading] = useState(autoSchema);
+  const [formData, setFormData] = useState({});
+  const initializeFormData = /* @__PURE__ */ __name((fields2) => {
+    const initial = {};
+    fields2.forEach((field) => {
+      if (field.defaultValue !== void 0) {
+        initial[field.name] = field.defaultValue;
+      } else if (field.type === "checkbox" || field.type === "switch") {
+        initial[field.name] = false;
+      } else if (field.type === "number" || field.type === "slider") {
+        initial[field.name] = field.min ?? 0;
+      } else {
+        initial[field.name] = "";
+      }
+    });
+    setFormData(initial);
+  }, "initializeFormData");
+  const resetForm = /* @__PURE__ */ __name(() => {
+    initializeFormData(fields);
+    reset();
+  }, "resetForm");
+  useEffect(() => {
+    if (autoSchema && app && isConnected) {
+      setSchemaLoading(true);
+      const fetchSchema = /* @__PURE__ */ __name(async () => {
+        try {
+          console.warn("[ToolForm] Auto-schema not fully implemented, use manual fields");
+          if (manualFields) {
+            setFields(manualFields);
+            initializeFormData(manualFields);
+          }
+        } catch (err) {
+          console.error("[ToolForm] Failed to fetch schema:", err);
+        } finally {
+          setSchemaLoading(false);
+        }
+      }, "fetchSchema");
+      fetchSchema();
+    } else if (manualFields) {
+      setFields(manualFields);
+      initializeFormData(manualFields);
+    }
+  }, [
+    autoSchema,
+    app,
+    isConnected,
+    manualFields,
+    toolName
+  ]);
+  const handleSubmit = /* @__PURE__ */ __name(async (e) => {
+    e.preventDefault();
+    const args = {};
+    fields.forEach((field) => {
+      let value = formData[field.name];
+      if (field.type === "number" || field.type === "slider") {
+        value = Number(value);
+      }
+      args[field.name] = value;
+    });
+    await call(args);
+  }, "handleSubmit");
+  const handleChange = /* @__PURE__ */ __name((name, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  }, "handleChange");
+  const renderField = /* @__PURE__ */ __name((field) => {
+    const value = formData[field.name];
+    switch (field.type) {
+      case "textarea":
+        return /* @__PURE__ */ React25.createElement(Textarea, {
+          id: field.name,
+          placeholder: field.placeholder,
+          value: value ?? "",
+          onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange"),
+          disabled: field.disabled || loading,
+          required: field.required
+        });
+      case "select":
+        return /* @__PURE__ */ React25.createElement(Select, {
+          value: value ?? "",
+          onValueChange: /* @__PURE__ */ __name((v) => handleChange(field.name, v), "onValueChange"),
+          disabled: field.disabled || loading
+        }, /* @__PURE__ */ React25.createElement(SelectTrigger, null, /* @__PURE__ */ React25.createElement(SelectValue, {
+          placeholder: field.placeholder ?? "Select..."
+        })), /* @__PURE__ */ React25.createElement(SelectContent, null, field.options?.map((option) => /* @__PURE__ */ React25.createElement(SelectItem, {
+          key: option.value,
+          value: option.value
+        }, option.label))));
+      case "checkbox":
+        return /* @__PURE__ */ React25.createElement("div", {
+          className: "flex items-center space-x-2"
+        }, /* @__PURE__ */ React25.createElement(Checkbox, {
+          id: field.name,
+          checked: value ?? false,
+          onCheckedChange: /* @__PURE__ */ __name((checked) => handleChange(field.name, checked), "onCheckedChange"),
+          disabled: field.disabled || loading
+        }), /* @__PURE__ */ React25.createElement("label", {
+          htmlFor: field.name,
+          className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        }, field.label));
+      case "switch":
+        return /* @__PURE__ */ React25.createElement("div", {
+          className: "flex items-center space-x-2"
+        }, /* @__PURE__ */ React25.createElement(Switch, {
+          id: field.name,
+          checked: value ?? false,
+          onCheckedChange: /* @__PURE__ */ __name((checked) => handleChange(field.name, checked), "onCheckedChange"),
+          disabled: field.disabled || loading
+        }), /* @__PURE__ */ React25.createElement(Label2, {
+          htmlFor: field.name
+        }, field.label));
+      case "slider":
+        return /* @__PURE__ */ React25.createElement("div", {
+          className: "space-y-2"
+        }, /* @__PURE__ */ React25.createElement("div", {
+          className: "flex justify-between text-sm"
+        }, /* @__PURE__ */ React25.createElement("span", null, field.min ?? 0), /* @__PURE__ */ React25.createElement("span", null, value ?? field.min ?? 0), /* @__PURE__ */ React25.createElement("span", null, field.max ?? 100)), /* @__PURE__ */ React25.createElement(Slider, {
+          value: [
+            value ?? field.min ?? 0
+          ],
+          onValueChange: /* @__PURE__ */ __name(([v]) => handleChange(field.name, v), "onValueChange"),
+          min: field.min ?? 0,
+          max: field.max ?? 100,
+          step: field.step ?? 1,
+          disabled: field.disabled || loading
+        }));
+      case "number":
+        return /* @__PURE__ */ React25.createElement(Input, {
+          id: field.name,
+          type: "number",
+          placeholder: field.placeholder,
+          value: value ?? "",
+          onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange"),
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          disabled: field.disabled || loading,
+          required: field.required
+        });
+      default:
+        return /* @__PURE__ */ React25.createElement(Input, {
+          id: field.name,
+          type: field.type ?? "text",
+          placeholder: field.placeholder,
+          value: value ?? "",
+          onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange"),
+          disabled: field.disabled || loading,
+          required: field.required
+        });
+    }
+  }, "renderField");
+  if (schemaLoading) {
+    return /* @__PURE__ */ React25.createElement("div", {
+      className: "flex items-center justify-center p-8"
+    }, /* @__PURE__ */ React25.createElement(Loader2, {
+      className: "h-6 w-6 animate-spin text-muted-foreground"
+    }));
+  }
+  return /* @__PURE__ */ React25.createElement("form", {
+    className: cn("space-y-4", className),
+    onSubmit: handleSubmit
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: cn("space-y-4", layout === "horizontal" && "grid grid-cols-2 gap-4")
+  }, fields.map((field) => /* @__PURE__ */ React25.createElement("div", {
+    key: field.name,
+    className: "space-y-2"
+  }, field.type !== "checkbox" && field.type !== "switch" && /* @__PURE__ */ React25.createElement(Label2, {
+    htmlFor: field.name
+  }, field.label, field.required && /* @__PURE__ */ React25.createElement("span", {
+    className: "text-destructive ml-1"
+  }, "*")), renderField(field), field.description && /* @__PURE__ */ React25.createElement("p", {
+    className: "text-sm text-muted-foreground"
+  }, field.description)))), /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React25.createElement(Button, {
+    type: "submit",
+    disabled: loading
+  }, loading ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-4 w-4 animate-spin mr-2"
+  }), loadingText ?? "Submitting...") : submitText)), error && /* @__PURE__ */ React25.createElement(Alert, {
+    variant: "destructive"
+  }, /* @__PURE__ */ React25.createElement(AlertDescription, null, error.message)), showResult && result !== null && /* @__PURE__ */ React25.createElement("div", {
+    className: "rounded-md bg-muted p-4"
+  }, /* @__PURE__ */ React25.createElement("pre", {
+    className: "text-sm overflow-auto"
+  }, JSON.stringify(result, null, 2))));
+}
+__name(ToolForm, "ToolForm");
+function useResource(uri, options = {}) {
+  const { app, isConnected } = useMcpApp();
+  const { refreshInterval, subscribe = false, transform, skip = false } = options;
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(!skip);
+  const [error, setError] = useState(null);
+  const [lastUpdated, setLastUpdated] = useState(null);
+  const intervalRef = useRef(null);
+  const mountedRef = useRef(true);
+  const fetchResource = useCallback(async () => {
+    if (!app || !isConnected) {
+      throw new Error("Not connected to MCP host");
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await app.readResource?.({
+        uri
+      });
+      if (!result) {
+        throw new Error("readResource not supported by host");
+      }
+      let resourceData;
+      if (result.contents && result.contents.length > 0) {
+        const content = result.contents[0];
+        if (content.text) {
+          try {
+            resourceData = JSON.parse(content.text);
+          } catch {
+            resourceData = content.text;
+          }
+        } else if (content.blob) {
+          resourceData = content.blob;
+        } else {
+          resourceData = content;
+        }
+      } else {
+        resourceData = result;
+      }
+      if (transform) {
+        resourceData = transform(resourceData);
+      }
+      if (mountedRef.current) {
+        setData(resourceData);
+        setLastUpdated(/* @__PURE__ */ new Date());
+        setLoading(false);
+      }
+      return resourceData;
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      if (mountedRef.current) {
+        setError(error2);
+        setLoading(false);
+      }
+      throw error2;
+    }
+  }, [
+    app,
+    isConnected,
+    uri,
+    transform
+  ]);
+  const refresh = useCallback(async () => {
+    return fetchResource();
+  }, [
+    fetchResource
+  ]);
+  useEffect(() => {
+    mountedRef.current = true;
+    if (!skip && isConnected) {
+      fetchResource().catch(() => {
+      });
+    }
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [
+    uri,
+    isConnected,
+    skip,
+    fetchResource
+  ]);
+  useEffect(() => {
+    if (refreshInterval && refreshInterval > 0 && isConnected && !skip) {
+      intervalRef.current = setInterval(() => {
+        fetchResource().catch(() => {
+        });
+      }, refreshInterval);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [
+    refreshInterval,
+    isConnected,
+    skip,
+    fetchResource
+  ]);
+  useEffect(() => {
+    if (subscribe) {
+      console.warn("[useResource] Subscription support not yet implemented");
+    }
+  }, [
+    subscribe
+  ]);
+  return {
+    data,
+    loading,
+    error,
+    refresh,
+    lastUpdated
+  };
+}
+__name(useResource, "useResource");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    "data-slot": "skeleton",
+    className: cn("bg-accent animate-pulse rounded-md", className),
+    ...props
+  });
+}
+__name(Skeleton, "Skeleton");
+
+// src/mcp/ResourceView.tsx
+function DefaultLoading() {
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: "flex flex-col gap-3 p-4"
+  }, /* @__PURE__ */ React25.createElement(Skeleton, {
+    className: "h-4 w-3/4"
+  }), /* @__PURE__ */ React25.createElement(Skeleton, {
+    className: "h-4 w-1/2"
+  }), /* @__PURE__ */ React25.createElement(Skeleton, {
+    className: "h-20 w-full"
+  }));
+}
+__name(DefaultLoading, "DefaultLoading");
+function DefaultError({ error, onRetry }) {
+  return /* @__PURE__ */ React25.createElement(Alert, {
+    variant: "destructive"
+  }, /* @__PURE__ */ React25.createElement(AlertCircle, {
+    className: "h-4 w-4"
+  }), /* @__PURE__ */ React25.createElement(AlertTitle, null, "Error loading resource"), /* @__PURE__ */ React25.createElement(AlertDescription, {
+    className: "flex flex-col gap-2"
+  }, /* @__PURE__ */ React25.createElement("span", null, error.message), /* @__PURE__ */ React25.createElement(Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: onRetry,
+    className: "w-fit"
+  }, /* @__PURE__ */ React25.createElement(RefreshCw, {
+    className: "h-4 w-4 mr-2"
+  }), "Retry")));
+}
+__name(DefaultError, "DefaultError");
+function ResourceView({ uri, refreshInterval, subscribe, transform, loading: loadingContent, error: errorContent, children, className, skip = false }) {
+  const { data, loading, error, refresh, lastUpdated } = useResource(uri, {
+    refreshInterval,
+    subscribe,
+    transform,
+    skip
+  });
+  const meta = {
+    uri,
+    refresh,
+    lastUpdated,
+    isRefreshing: loading && data !== null
+  };
+  if (loading && data === null) {
+    if (loadingContent) {
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, loadingContent);
+    }
+    return /* @__PURE__ */ React25.createElement("div", {
+      className: cn("flex items-center justify-center p-8", className)
+    }, /* @__PURE__ */ React25.createElement(Loader2, {
+      className: "h-8 w-8 animate-spin text-muted-foreground"
+    }));
+  }
+  if (error && data === null) {
+    if (errorContent) {
+      if (typeof errorContent === "function") {
+        return /* @__PURE__ */ React25.createElement("div", {
+          className
+        }, errorContent(error, refresh));
+      }
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, errorContent);
+    }
+    return /* @__PURE__ */ React25.createElement("div", {
+      className
+    }, /* @__PURE__ */ React25.createElement(DefaultError, {
+      error,
+      onRetry: refresh
+    }));
+  }
+  if (data !== null) {
+    return /* @__PURE__ */ React25.createElement("div", {
+      className
+    }, children(data, meta));
+  }
+  return /* @__PURE__ */ React25.createElement("div", {
+    className
+  }, loadingContent ?? /* @__PURE__ */ React25.createElement(DefaultLoading, null));
+}
+__name(ResourceView, "ResourceView");
+function useToolStream(options = {}) {
+  const { toolInputPartial, toolInput, toolResult } = useMcpApp();
+  const { onPartial, onComplete } = options;
+  const [partial, setPartial] = useState(null);
+  const [complete, setComplete] = useState(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  useEffect(() => {
+    if (toolInputPartial) {
+      setPartial(toolInputPartial);
+      setIsStreaming(true);
+      setIsComplete(false);
+      onPartial?.(toolInputPartial);
+    }
+  }, [
+    toolInputPartial,
+    onPartial
+  ]);
+  useEffect(() => {
+    if (toolInput) {
+      setComplete(toolInput);
+      setIsStreaming(false);
+      setIsComplete(true);
+      onComplete?.(toolInput);
+    }
+  }, [
+    toolInput,
+    onComplete
+  ]);
+  useEffect(() => {
+    if (toolResult && !toolResult.isError) {
+      setIsStreaming(false);
+      setIsComplete(true);
+    }
+  }, [
+    toolResult
+  ]);
+  return {
+    partial,
+    complete,
+    isStreaming,
+    isComplete
+  };
+}
+__name(useToolStream, "useToolStream");
+function Progress({ className, value, ...props }) {
+  return /* @__PURE__ */ React25.createElement(ProgressPrimitive.Root, {
+    "data-slot": "progress",
+    className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(ProgressPrimitive.Indicator, {
+    "data-slot": "progress-indicator",
+    className: "bg-primary h-full w-full flex-1 transition-all",
+    style: {
+      transform: `translateX(-${100 - (value || 0)}%)`
+    }
+  }));
+}
+__name(Progress, "Progress");
+
+// src/mcp/StreamingContent.tsx
+function StreamingContent({ fallback, showProgress = false, progress: externalProgress, onPartial, onComplete, children, className, streamingStyle = "opacity" }) {
+  const { partial, complete, isStreaming, isComplete } = useToolStream({
+    onPartial,
+    onComplete
+  });
+  const data = complete ?? partial;
+  if (!data) {
+    if (fallback) {
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, fallback);
+    }
+    return /* @__PURE__ */ React25.createElement("div", {
+      className: cn("flex items-center justify-center p-8", className)
+    }, /* @__PURE__ */ React25.createElement(Loader2, {
+      className: "h-6 w-6 animate-spin text-muted-foreground"
+    }));
+  }
+  const streamingClasses = cn(streamingStyle === "opacity" && isStreaming && "opacity-70", streamingStyle === "blur" && isStreaming && "blur-[1px]");
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: cn("relative", className)
+  }, showProgress && isStreaming && /* @__PURE__ */ React25.createElement("div", {
+    className: "absolute top-0 left-0 right-0 z-10"
+  }, externalProgress !== void 0 ? /* @__PURE__ */ React25.createElement(Progress, {
+    value: externalProgress,
+    className: "h-1"
+  }) : /* @__PURE__ */ React25.createElement("div", {
+    className: "h-1 bg-primary/20 overflow-hidden"
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: "h-full w-1/3 bg-primary animate-[shimmer_1s_infinite]"
+  }))), isStreaming && /* @__PURE__ */ React25.createElement("div", {
+    className: "absolute top-2 right-2 z-10"
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-1 px-2 py-1 rounded-full bg-muted text-muted-foreground text-xs"
+  }, /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-3 w-3 animate-spin"
+  }), /* @__PURE__ */ React25.createElement("span", null, "Streaming..."))), /* @__PURE__ */ React25.createElement("div", {
+    className: cn("transition-all duration-200", streamingClasses)
+  }, children(data, isComplete)));
+}
+__name(StreamingContent, "StreamingContent");
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "table-container",
+    className: "relative w-full overflow-x-auto"
+  }, /* @__PURE__ */ React25.createElement("table", {
+    "data-slot": "table",
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }));
+}
+__name(Table, "Table");
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("thead", {
+    "data-slot": "table-header",
+    className: cn("[&_tr]:border-b", className),
+    ...props
+  });
+}
+__name(TableHeader, "TableHeader");
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("tbody", {
+    "data-slot": "table-body",
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  });
+}
+__name(TableBody, "TableBody");
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("tfoot", {
+    "data-slot": "table-footer",
+    className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+    ...props
+  });
+}
+__name(TableFooter, "TableFooter");
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("tr", {
+    "data-slot": "table-row",
+    className: cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className),
+    ...props
+  });
+}
+__name(TableRow, "TableRow");
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("th", {
+    "data-slot": "table-head",
+    className: cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+    ...props
+  });
+}
+__name(TableHead, "TableHead");
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("td", {
+    "data-slot": "table-cell",
+    className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+    ...props
+  });
+}
+__name(TableCell, "TableCell");
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("caption", {
+    "data-slot": "table-caption",
+    className: cn("text-muted-foreground mt-4 text-sm", className),
+    ...props
+  });
+}
+__name(TableCaption, "TableCaption");
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => {
+    if (current && typeof current === "object" && key in current) {
+      return current[key];
+    }
+    return void 0;
+  }, obj);
+}
+__name(getNestedValue, "getNestedValue");
+function ToolDataGrid({ dataTool, columns, transformData, rowActions = [], pagination = true, pageSizes = [
+  10,
+  25,
+  50,
+  100
+], defaultPageSize = 10, defaultSort, refreshInterval, showRefresh = true, onDataLoaded, onError, onRowClick, getRowKey, emptyContent, loadingContent, className }) {
+  const toolConfig = typeof dataTool === "string" ? {
+    name: dataTool
+  } : dataTool;
+  const [data, setData] = useState({
+    rows: [],
+    total: 0
+  });
+  const [paginationState, setPaginationState] = useState({
+    page: 1,
+    pageSize: defaultPageSize
+  });
+  const [sortState, setSortState] = useState(defaultSort ?? {
+    column: null,
+    direction: "asc"
+  });
+  const { call, loading, error } = useTool(toolConfig.name, {
+    defaultArgs: toolConfig.args,
+    onSuccess: /* @__PURE__ */ __name((result) => {
+      const gridData = transformData ? transformData(result) : result;
+      setData(gridData);
+      onDataLoaded?.(gridData);
+    }, "onSuccess"),
+    onError
+  });
+  const fetchData = useCallback(() => {
+    const args = {};
+    if (pagination) {
+      args.page = paginationState.page;
+      args.pageSize = paginationState.pageSize;
+      args.offset = (paginationState.page - 1) * paginationState.pageSize;
+      args.limit = paginationState.pageSize;
+    }
+    if (sortState.column) {
+      args.sortBy = sortState.column;
+      args.sortDirection = sortState.direction;
+      args.sort = `${sortState.column}:${sortState.direction}`;
+    }
+    call(args);
+  }, [
+    call,
+    pagination,
+    paginationState,
+    sortState
+  ]);
+  const initialFetchDone = React25.useRef(false);
+  const prevStateRef = React25.useRef({
+    pagination: paginationState,
+    sort: sortState
+  });
+  useEffect(() => {
+    if (!initialFetchDone.current) {
+      initialFetchDone.current = true;
+      fetchData();
+      return;
+    }
+    const prevState = prevStateRef.current;
+    const stateChanged = prevState.pagination.page !== paginationState.page || prevState.pagination.pageSize !== paginationState.pageSize || prevState.sort.column !== sortState.column || prevState.sort.direction !== sortState.direction;
+    if (stateChanged) {
+      prevStateRef.current = {
+        pagination: paginationState,
+        sort: sortState
+      };
+      fetchData();
+    }
+  }, [
+    fetchData,
+    paginationState,
+    sortState
+  ]);
+  useEffect(() => {
+    if (refreshInterval && refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [
+    refreshInterval,
+    fetchData
+  ]);
+  const handleSort = useCallback((column) => {
+    setSortState((prev) => ({
+      column,
+      direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
+    }));
+  }, []);
+  const handlePageChange = useCallback((page) => {
+    setPaginationState((prev) => ({
+      ...prev,
+      page
+    }));
+  }, []);
+  const handlePageSizeChange = useCallback((pageSize) => {
+    setPaginationState({
+      page: 1,
+      pageSize: parseInt(pageSize, 10)
+    });
+  }, []);
+  const totalPages = Math.ceil(data.total / paginationState.pageSize);
+  const canPreviousPage = paginationState.page > 1;
+  const canNextPage = paginationState.page < totalPages;
+  const getSortIcon = /* @__PURE__ */ __name((column) => {
+    if (sortState.column !== column) {
+      return /* @__PURE__ */ React25.createElement(ArrowUpDown, {
+        className: "h-4 w-4"
+      });
+    }
+    return sortState.direction === "asc" ? /* @__PURE__ */ React25.createElement(ArrowUp, {
+      className: "h-4 w-4"
+    }) : /* @__PURE__ */ React25.createElement(ArrowDown, {
+      className: "h-4 w-4"
+    });
+  }, "getSortIcon");
+  const renderLoading = /* @__PURE__ */ __name(() => {
+    if (loadingContent) return loadingContent;
+    return /* @__PURE__ */ React25.createElement("div", {
+      className: "space-y-2"
+    }, Array.from({
+      length: 5
+    }).map((_, i) => /* @__PURE__ */ React25.createElement(Skeleton, {
+      key: i,
+      className: "h-12 w-full"
+    })));
+  }, "renderLoading");
+  const renderEmpty = /* @__PURE__ */ __name(() => {
+    if (emptyContent) return emptyContent;
+    return /* @__PURE__ */ React25.createElement("div", {
+      className: "flex flex-col items-center justify-center py-12 text-muted-foreground"
+    }, /* @__PURE__ */ React25.createElement("p", {
+      className: "text-lg"
+    }, "No data found"), /* @__PURE__ */ React25.createElement(Button, {
+      variant: "ghost",
+      size: "sm",
+      onClick: fetchData,
+      className: "mt-2"
+    }, /* @__PURE__ */ React25.createElement(RefreshCw, {
+      className: "h-4 w-4 mr-2"
+    }), "Refresh"));
+  }, "renderEmpty");
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: cn("space-y-4", className)
+  }, showRefresh && /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center justify-end gap-2"
+  }, /* @__PURE__ */ React25.createElement(Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: fetchData,
+    disabled: loading
+  }, loading ? /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-4 w-4 animate-spin"
+  }) : /* @__PURE__ */ React25.createElement(RefreshCw, {
+    className: "h-4 w-4"
+  }), /* @__PURE__ */ React25.createElement("span", {
+    className: "ml-2"
+  }, "Refresh"))), /* @__PURE__ */ React25.createElement("div", {
+    className: "rounded-md border"
+  }, loading && data.rows.length === 0 ? /* @__PURE__ */ React25.createElement("div", {
+    className: "p-4"
+  }, renderLoading()) : data.rows.length === 0 ? renderEmpty() : /* @__PURE__ */ React25.createElement(Table, null, /* @__PURE__ */ React25.createElement(TableHeader, null, /* @__PURE__ */ React25.createElement(TableRow, null, columns.map((column) => /* @__PURE__ */ React25.createElement(TableHead, {
+    key: column.key,
+    style: {
+      width: column.width
+    },
+    className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideMobile && "hidden md:table-cell")
+  }, column.sortable ? /* @__PURE__ */ React25.createElement(Button, {
+    variant: "ghost",
+    size: "sm",
+    onClick: /* @__PURE__ */ __name(() => handleSort(column.key), "onClick"),
+    className: "-ml-3"
+  }, column.header, getSortIcon(column.key)) : column.header)), rowActions.length > 0 && /* @__PURE__ */ React25.createElement(TableHead, {
+    className: "w-[100px]"
+  }, "Actions"))), /* @__PURE__ */ React25.createElement(TableBody, null, data.rows.map((row, index) => {
+    const key = getRowKey?.(row, index) ?? String(index);
+    return /* @__PURE__ */ React25.createElement(TableRow, {
+      key,
+      onClick: /* @__PURE__ */ __name(() => onRowClick?.(row, index), "onClick"),
+      className: onRowClick ? "cursor-pointer" : void 0
+    }, columns.map((column) => {
+      const value = getNestedValue(row, column.key);
+      return /* @__PURE__ */ React25.createElement(TableCell, {
+        key: column.key,
+        className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideMobile && "hidden md:table-cell")
+      }, column.render ? column.render(value, row, index) : String(value ?? ""));
+    }), rowActions.length > 0 && /* @__PURE__ */ React25.createElement(TableCell, null, /* @__PURE__ */ React25.createElement("div", {
+      className: "flex items-center gap-1"
+    }, rowActions.filter((action) => !action.hidden?.(row)).map((action, actionIndex) => /* @__PURE__ */ React25.createElement(RowActionButton, {
+      key: actionIndex,
+      action,
+      row,
+      onRefresh: fetchData
+    })))));
+  })))), pagination && data.total > 0 && /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center justify-between"
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: "text-sm text-muted-foreground"
+  }, "Showing ", (paginationState.page - 1) * paginationState.pageSize + 1, " to", " ", Math.min(paginationState.page * paginationState.pageSize, data.total), " of", " ", data.total, " results"), /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-4"
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React25.createElement("span", {
+    className: "text-sm text-muted-foreground"
+  }, "Rows per page"), /* @__PURE__ */ React25.createElement(Select, {
+    value: String(paginationState.pageSize),
+    onValueChange: handlePageSizeChange
+  }, /* @__PURE__ */ React25.createElement(SelectTrigger, {
+    className: "w-[70px]"
+  }, /* @__PURE__ */ React25.createElement(SelectValue, null)), /* @__PURE__ */ React25.createElement(SelectContent, null, pageSizes.map((size) => /* @__PURE__ */ React25.createElement(SelectItem, {
+    key: size,
+    value: String(size)
+  }, size))))), /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */ React25.createElement(Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: /* @__PURE__ */ __name(() => handlePageChange(paginationState.page - 1), "onClick"),
+    disabled: !canPreviousPage || loading
+  }, /* @__PURE__ */ React25.createElement(ChevronLeft, {
+    className: "h-4 w-4"
+  })), /* @__PURE__ */ React25.createElement("span", {
+    className: "text-sm"
+  }, "Page ", paginationState.page, " of ", totalPages), /* @__PURE__ */ React25.createElement(Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: /* @__PURE__ */ __name(() => handlePageChange(paginationState.page + 1), "onClick"),
+    disabled: !canNextPage || loading
+  }, /* @__PURE__ */ React25.createElement(ChevronRight, {
+    className: "h-4 w-4"
+  }))))));
+}
+__name(ToolDataGrid, "ToolDataGrid");
+function RowActionButton({ action, row, onRefresh }) {
+  const toolConfig = typeof action.tool === "string" ? {
+    name: action.tool
+  } : action.tool;
+  const args = action.getArgs?.(row) ?? {
+    id: row.id
+  };
+  const { call, loading } = useTool(toolConfig.name, {
+    onSuccess: /* @__PURE__ */ __name((result) => {
+      action.onSuccess?.(result, row);
+      toast.success("Action completed");
+      onRefresh();
+    }, "onSuccess"),
+    onError: /* @__PURE__ */ __name((error) => {
+      toast.error(error.message);
+    }, "onError")
+  });
+  const handleClick = useCallback((e) => {
+    e.stopPropagation();
+    call(args);
+  }, [
+    call,
+    args
+  ]);
+  return /* @__PURE__ */ React25.createElement(Button, {
+    variant: action.variant ?? "ghost",
+    size: "sm",
+    onClick: handleClick,
+    disabled: loading
+  }, loading ? /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-3 w-3 animate-spin"
+  }) : /* @__PURE__ */ React25.createElement(React25.Fragment, null, action.icon, /* @__PURE__ */ React25.createElement("span", {
+    className: action.icon ? "ml-1" : ""
+  }, action.label)));
+}
+__name(RowActionButton, "RowActionButton");
+var Button2 = /* @__PURE__ */ forwardRef(({ className, variant = "primary", size = "md", loading = false, disabled, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ React25__default.createElement(Comp, {
+    ref,
+    className: clsx("lui-button", `lui-button--${variant}`, `lui-button--${size}`, loading && "lui-button--loading", className),
+    disabled: disabled || loading,
+    ...props
+  }, loading && /* @__PURE__ */ React25__default.createElement("span", {
+    className: "lui-button__spinner",
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ React25__default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className: "lui-spinner-icon"
+  }, /* @__PURE__ */ React25__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeDasharray: "32",
+    strokeDashoffset: "12"
+  }))), leftIcon && !loading && /* @__PURE__ */ React25__default.createElement("span", {
+    className: "lui-button__icon"
+  }, leftIcon), /* @__PURE__ */ React25__default.createElement("span", {
+    className: "lui-button__content"
+  }, children), rightIcon && /* @__PURE__ */ React25__default.createElement("span", {
+    className: "lui-button__icon"
+  }, rightIcon));
+});
+Button2.displayName = "Button";
+
+// src/mcp/ActionButton.tsx
+function ActionButton({ toolName, toolArgs = {}, onToolSuccess, onToolError, showResult = false, renderResult, children, ...buttonProps }) {
+  const { call, loading, result, error } = useTool(toolName);
+  const [hasResult, setHasResult] = useState(false);
+  const handleClick = /* @__PURE__ */ __name(async () => {
+    try {
+      const res = await call(toolArgs);
+      setHasResult(true);
+      onToolSuccess?.(res);
+    } catch (err) {
+      onToolError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, "handleClick");
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    className: "lui-action-button-wrapper"
+  }, /* @__PURE__ */ React25__default.createElement(Button2, {
+    ...buttonProps,
+    loading,
+    onClick: handleClick
+  }, children), showResult && hasResult && result !== null && /* @__PURE__ */ React25__default.createElement("div", {
+    className: "lui-action-button-result"
+  }, renderResult ? renderResult(result) : /* @__PURE__ */ React25__default.createElement("pre", null, JSON.stringify(result, null, 2))), error && /* @__PURE__ */ React25__default.createElement("div", {
+    className: "lui-action-button-error"
+  }, error.message));
+}
+__name(ActionButton, "ActionButton");
+function DefaultLoading2() {
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: "flex items-center justify-center p-8"
+  }, /* @__PURE__ */ React25.createElement(Loader2, {
+    className: "h-6 w-6 animate-spin text-muted-foreground"
+  }));
+}
+__name(DefaultLoading2, "DefaultLoading");
+function DefaultDisconnected() {
+  return /* @__PURE__ */ React25.createElement(Alert, null, /* @__PURE__ */ React25.createElement(WifiOff, {
+    className: "h-4 w-4"
+  }), /* @__PURE__ */ React25.createElement(AlertDescription, null, "Waiting for connection to MCP host..."));
+}
+__name(DefaultDisconnected, "DefaultDisconnected");
+function DefaultError2({ error }) {
+  return /* @__PURE__ */ React25.createElement(Alert, {
+    variant: "destructive"
+  }, /* @__PURE__ */ React25.createElement(AlertCircle, {
+    className: "h-4 w-4"
+  }), /* @__PURE__ */ React25.createElement(AlertDescription, null, "Connection error: ", error.message));
+}
+__name(DefaultError2, "DefaultError");
+function RequireConnection({ loading: loadingContent, error: errorContent, disconnected: disconnectedContent, children, className }) {
+  const { isConnected, error, app } = useMcpApp();
+  if (!app && !error && !isConnected) {
+    if (loadingContent) {
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, loadingContent);
+    }
+    return /* @__PURE__ */ React25.createElement("div", {
+      className
+    }, /* @__PURE__ */ React25.createElement(DefaultLoading2, null));
+  }
+  if (error) {
+    if (errorContent) {
+      if (typeof errorContent === "function") {
+        return /* @__PURE__ */ React25.createElement("div", {
+          className
+        }, errorContent(error));
+      }
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, errorContent);
+    }
+    return /* @__PURE__ */ React25.createElement("div", {
+      className
+    }, /* @__PURE__ */ React25.createElement(DefaultError2, {
+      error
+    }));
+  }
+  if (!isConnected) {
+    if (disconnectedContent) {
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, disconnectedContent);
+    }
+    if (loadingContent) {
+      return /* @__PURE__ */ React25.createElement("div", {
+        className
+      }, loadingContent);
+    }
+    return /* @__PURE__ */ React25.createElement("div", {
+      className
+    }, /* @__PURE__ */ React25.createElement(DefaultDisconnected, null));
+  }
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, children);
+}
+__name(RequireConnection, "RequireConnection");
+function DefaultFallback({ error, onRetry }) {
+  return /* @__PURE__ */ React25.createElement(Alert, {
+    variant: "destructive"
+  }, /* @__PURE__ */ React25.createElement(AlertCircle, {
+    className: "h-4 w-4"
+  }), /* @__PURE__ */ React25.createElement(AlertTitle, null, "Something went wrong"), /* @__PURE__ */ React25.createElement(AlertDescription, {
+    className: "flex flex-col gap-3"
+  }, /* @__PURE__ */ React25.createElement("p", {
+    className: "text-sm"
+  }, error.message), /* @__PURE__ */ React25.createElement(Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: onRetry,
+    className: "w-fit"
+  }, /* @__PURE__ */ React25.createElement(RefreshCw, {
+    className: "h-4 w-4 mr-2"
+  }), "Try Again")));
+}
+__name(DefaultFallback, "DefaultFallback");
+var ToolErrorBoundary = class extends Component {
+  static {
+    __name(this, "ToolErrorBoundary");
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.hasError && this.props.resetKeys && prevProps.resetKeys && this.props.resetKeys.some((key, index) => key !== prevProps.resetKeys?.[index])) {
+      this.reset();
+    }
+  }
+  reset = /* @__PURE__ */ __name(() => {
+    this.setState({
+      hasError: false,
+      error: null
+    });
+  }, "reset");
+  render() {
+    const { hasError, error } = this.state;
+    const { fallback, children } = this.props;
+    if (hasError && error) {
+      if (fallback) {
+        if (typeof fallback === "function") {
+          return fallback(error, this.reset);
+        }
+        return fallback;
+      }
+      return /* @__PURE__ */ React25.createElement(DefaultFallback, {
+        error,
+        onRetry: this.reset
+      });
+    }
+    return children;
+  }
+};
+function useMessage() {
+  const { sendMessage: appSendMessage, isConnected } = useMcpApp();
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
+  const send = useCallback(async (text) => {
+    if (!isConnected) {
+      console.warn("[useMessage] Not connected to host");
+      return;
+    }
+    setSending(true);
+    setError(null);
+    try {
+      await appSendMessage(text);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      throw error2;
+    } finally {
+      setSending(false);
+    }
+  }, [
+    appSendMessage,
+    isConnected
+  ]);
+  const sendContent = useCallback(async (content) => {
+    if (!isConnected) {
+      console.warn("[useMessage] Not connected to host");
+      return;
+    }
+    setSending(true);
+    setError(null);
+    try {
+      const textContent = content.filter((c) => c.type === "text").map((c) => c.text).join("\n");
+      await appSendMessage(textContent);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      throw error2;
+    } finally {
+      setSending(false);
+    }
+  }, [
+    appSendMessage,
+    isConnected
+  ]);
+  const requestTool = useCallback(async (toolName, args) => {
+    let message = `Please call the "${toolName}" tool`;
+    if (args && Object.keys(args).length > 0) {
+      message += ` with arguments: ${JSON.stringify(args)}`;
+    }
+    await send(message);
+  }, [
+    send
+  ]);
+  return {
+    send,
+    sendContent,
+    requestTool,
+    sending,
+    error
+  };
+}
+__name(useMessage, "useMessage");
+
+// src/mcp/useHostContext.ts
+function useHostContext() {
+  const { hostContext } = useMcpApp();
+  return {
+    theme: hostContext.theme ?? "light",
+    displayMode: hostContext.displayMode ?? "inline",
+    availableDisplayModes: hostContext.availableDisplayModes ?? [],
+    viewport: hostContext.viewport ?? null,
+    locale: hostContext.locale ?? null,
+    timeZone: hostContext.timeZone ?? null,
+    platform: hostContext.platform ?? null,
+    userAgent: hostContext.userAgent ?? null,
+    deviceCapabilities: hostContext.deviceCapabilities ?? null,
+    safeAreaInsets: hostContext.safeAreaInsets ?? null,
+    styles: hostContext.styles ?? null,
+    rawContext: hostContext
+  };
+}
+__name(useHostContext, "useHostContext");
+
+// src/mcp/useToolResult.ts
+function useToolResult() {
+  const { toolResult } = useMcpApp();
+  let result = null;
+  let textContent = null;
+  if (toolResult) {
+    if ("structuredContent" in toolResult && toolResult.structuredContent) {
+      result = toolResult.structuredContent;
+    }
+    if (!result && toolResult.content) {
+      const textItem = toolResult.content.find((c) => c.type === "text");
+      if (textItem) {
+        textContent = textItem.text;
+        try {
+          result = JSON.parse(textItem.text);
+        } catch {
+        }
+      }
+    }
+  }
+  return {
+    result,
+    rawResult: toolResult,
+    hasResult: toolResult !== null,
+    textContent
+  };
+}
+__name(useToolResult, "useToolResult");
+
+// src/mcp/useToolInput.ts
+function useToolInput() {
+  const { toolInput } = useMcpApp();
+  return {
+    input: toolInput,
+    hasInput: toolInput !== null
+  };
+}
+__name(useToolInput, "useToolInput");
+
+// src/mcp/useToolInputPartial.ts
+function useToolInputPartial() {
+  const { toolInputPartial } = useMcpApp();
+  return {
+    partialArgs: toolInputPartial,
+    isStreaming: toolInputPartial !== null
+  };
+}
+__name(useToolInputPartial, "useToolInputPartial");
+function useToolSubscription(toolName, options = {}) {
+  const { interval = 1e4, enabled = true, args = {} } = options;
+  const toolHook = useTool(toolName);
+  const intervalRef = useRef(null);
+  const [isPolling, setIsPolling] = useState(false);
+  const stop = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setIsPolling(false);
+  }, []);
+  const start = useCallback(() => {
+    stop();
+    setIsPolling(true);
+    toolHook.call(args).catch(() => {
+    });
+    intervalRef.current = setInterval(() => {
+      toolHook.call(args).catch(() => {
+      });
+    }, interval);
+  }, [
+    toolHook.call,
+    args,
+    interval,
+    stop
+  ]);
+  const refresh = useCallback(async () => {
+    return toolHook.call(args);
+  }, [
+    toolHook.call,
+    args
+  ]);
+  useEffect(() => {
+    if (enabled) {
+      start();
+    }
+    return () => stop();
+  }, [
+    enabled,
+    start,
+    stop
+  ]);
+  return {
+    result: toolHook.result,
+    loading: toolHook.loading,
+    error: toolHook.error,
+    start,
+    stop,
+    isPolling,
+    refresh
+  };
+}
+__name(useToolSubscription, "useToolSubscription");
+
+// src/types/mcp-types.ts
+function normalizeToolBinding(tool) {
+  if (typeof tool === "string") {
+    return {
+      name: tool
+    };
+  }
+  return tool;
+}
+__name(normalizeToolBinding, "normalizeToolBinding");
+var DEFAULT_RESULT_CONFIG = {
+  display: "none",
+  autoDismiss: 5e3
+};
+var INITIAL_TOOL_STATE = {
+  state: "idle",
+  loading: false,
+  result: null,
+  error: null,
+  hasResult: false
+};
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "card-title",
+    className: cn("leading-none font-semibold", className),
+    ...props
+  });
+}
+__name(CardTitle, "CardTitle");
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "card-description",
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  });
+}
+__name(CardDescription, "CardDescription");
+var Form = FormProvider;
+var FormFieldContext = /* @__PURE__ */ React25.createContext({});
+var FormField = /* @__PURE__ */ __name(({ ...props }) => {
+  return /* @__PURE__ */ React25.createElement(FormFieldContext.Provider, {
+    value: {
+      name: props.name
+    }
+  }, /* @__PURE__ */ React25.createElement(Controller, props));
+}, "FormField");
+var useFormField = /* @__PURE__ */ __name(() => {
+  const fieldContext = React25.useContext(FormFieldContext);
+  const itemContext = React25.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({
+    name: fieldContext.name
+  });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+}, "useFormField");
+var FormItemContext = /* @__PURE__ */ React25.createContext({});
+function FormItem({ className, ...props }) {
+  const id = React25.useId();
+  return /* @__PURE__ */ React25.createElement(FormItemContext.Provider, {
+    value: {
+      id
+    }
+  }, /* @__PURE__ */ React25.createElement("div", {
+    "data-slot": "form-item",
+    className: cn("grid gap-2", className),
+    ...props
+  }));
+}
+__name(FormItem, "FormItem");
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ React25.createElement(Label2, {
+    "data-slot": "form-label",
+    "data-error": !!error,
+    className: cn("data-[error=true]:text-destructive", className),
+    htmlFor: formItemId,
+    ...props
+  });
+}
+__name(FormLabel, "FormLabel");
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ React25.createElement(Slot, {
+    "data-slot": "form-control",
+    id: formItemId,
+    "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+    "aria-invalid": !!error,
+    ...props
+  });
+}
+__name(FormControl, "FormControl");
+function FormDescription({ className, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ React25.createElement("p", {
+    "data-slot": "form-description",
+    id: formDescriptionId,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  });
+}
+__name(FormDescription, "FormDescription");
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React25.createElement("p", {
+    "data-slot": "form-message",
+    id: formMessageId,
+    className: cn("text-destructive text-sm", className),
+    ...props
+  }, body);
+}
+__name(FormMessage, "FormMessage");
+var badgeVariants = cva("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+      secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+      destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ React25.createElement(Comp, {
+    "data-slot": "badge",
+    className: cn(badgeVariants({
+      variant
+    }), className),
+    ...props
+  });
+}
+__name(Badge, "Badge");
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(TabsPrimitive2.List, {
+    "data-slot": "tabs-list",
+    className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
+    ...props
+  });
+}
+__name(TabsList, "TabsList");
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(TabsPrimitive2.Trigger, {
+    "data-slot": "tabs-trigger",
+    className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  });
+}
+__name(TabsTrigger, "TabsTrigger");
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(TabsPrimitive2.Content, {
+    "data-slot": "tabs-content",
+    className: cn("flex-1 outline-none", className),
+    ...props
+  });
+}
+__name(TabsContent, "TabsContent");
+function Separator2({ className, orientation = "horizontal", decorative = true, ...props }) {
+  return /* @__PURE__ */ React25.createElement(SeparatorPrimitive.Root, {
+    "data-slot": "separator",
+    decorative,
+    orientation,
+    className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+    ...props
+  });
+}
+__name(Separator2, "Separator");
+function ScrollArea({ className, children, ...props }) {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Root, {
+    "data-slot": "scroll-area",
+    className: cn("relative", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Viewport, {
+    "data-slot": "scroll-area-viewport",
+    className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+  }, children), /* @__PURE__ */ React25.createElement(ScrollBar, null), /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Corner, null));
+}
+__name(ScrollArea, "ScrollArea");
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+    "data-slot": "scroll-area-scrollbar",
+    orientation,
+    className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.ScrollAreaThumb, {
+    "data-slot": "scroll-area-thumb",
+    className: "bg-border relative flex-1 rounded-full"
+  }));
+}
+__name(ScrollBar, "ScrollBar");
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Root, {
+    "data-slot": "dropdown-menu",
+    ...props
+  });
+}
+__name(DropdownMenu, "DropdownMenu");
+function DropdownMenuPortal({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Portal, {
+    "data-slot": "dropdown-menu-portal",
+    ...props
+  });
+}
+__name(DropdownMenuPortal, "DropdownMenuPortal");
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Trigger, {
+    "data-slot": "dropdown-menu-trigger",
+    ...props
+  });
 }
-__name(useTool, "useTool");
-
-// src/mcp/useToolResult.ts
-function useToolResult() {
-  const { toolResult } = useMcpApp();
-  let result = null;
-  let textContent = null;
-  if (toolResult) {
-    if ("structuredContent" in toolResult && toolResult.structuredContent) {
-      result = toolResult.structuredContent;
-    }
-    if (!result && toolResult.content) {
-      const textItem = toolResult.content.find((c) => c.type === "text");
-      if (textItem) {
-        textContent = textItem.text;
-        try {
-          result = JSON.parse(textItem.text);
-        } catch {
-        }
-      }
-    }
-  }
-  return {
-    result,
-    rawResult: toolResult,
-    hasResult: toolResult !== null,
-    textContent
-  };
+__name(DropdownMenuTrigger, "DropdownMenuTrigger");
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Content, {
+    "data-slot": "dropdown-menu-content",
+    sideOffset,
+    className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className),
+    ...props
+  }));
 }
-__name(useToolResult, "useToolResult");
-
-// src/mcp/useToolInput.ts
-function useToolInput() {
-  const { toolInput } = useMcpApp();
-  return {
-    input: toolInput,
-    hasInput: toolInput !== null
-  };
+__name(DropdownMenuContent, "DropdownMenuContent");
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Group, {
+    "data-slot": "dropdown-menu-group",
+    ...props
+  });
 }
-__name(useToolInput, "useToolInput");
-
-// src/mcp/useToolInputPartial.ts
-function useToolInputPartial() {
-  const { toolInputPartial } = useMcpApp();
-  return {
-    partialArgs: toolInputPartial,
-    isStreaming: toolInputPartial !== null
-  };
+__name(DropdownMenuGroup, "DropdownMenuGroup");
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Item, {
+    "data-slot": "dropdown-menu-item",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  });
 }
-__name(useToolInputPartial, "useToolInputPartial");
-
-// src/mcp/useHostContext.ts
-function useHostContext() {
-  const { hostContext } = useMcpApp();
-  return {
-    theme: hostContext.theme ?? "light",
-    displayMode: hostContext.displayMode ?? "inline",
-    viewport: hostContext.viewport ?? null,
-    locale: hostContext.locale ?? null,
-    timeZone: hostContext.timeZone ?? null,
-    platform: hostContext.platform ?? null,
-    rawContext: hostContext
-  };
+__name(DropdownMenuItem, "DropdownMenuItem");
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.CheckboxItem, {
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    checked,
+    ...props
+  }, /* @__PURE__ */ React25.createElement("span", {
+    className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+  }, /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(CheckIcon, {
+    className: "size-4"
+  }))), children);
 }
-__name(useHostContext, "useHostContext");
-var Button = /* @__PURE__ */ forwardRef(({ className, variant = "primary", size = "md", loading = false, disabled, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ React7.createElement(Comp, {
-    ref,
-    className: clsx("lui-button", `lui-button--${variant}`, `lui-button--${size}`, loading && "lui-button--loading", className),
-    disabled: disabled || loading,
+__name(DropdownMenuCheckboxItem, "DropdownMenuCheckboxItem");
+function DropdownMenuRadioGroup({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.RadioGroup, {
+    "data-slot": "dropdown-menu-radio-group",
     ...props
-  }, loading && /* @__PURE__ */ React7.createElement("span", {
-    className: "lui-button__spinner",
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React7.createElement("svg", {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    className: "lui-spinner-icon"
-  }, /* @__PURE__ */ React7.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    strokeWidth: "3",
-    strokeLinecap: "round",
-    strokeDasharray: "32",
-    strokeDashoffset: "12"
-  }))), leftIcon && !loading && /* @__PURE__ */ React7.createElement("span", {
-    className: "lui-button__icon"
-  }, leftIcon), /* @__PURE__ */ React7.createElement("span", {
-    className: "lui-button__content"
-  }, children), rightIcon && /* @__PURE__ */ React7.createElement("span", {
-    className: "lui-button__icon"
-  }, rightIcon));
-});
-Button.displayName = "Button";
-
-// src/mcp/ActionButton.tsx
-function ActionButton({ toolName, toolArgs = {}, onToolSuccess, onToolError, showResult = false, renderResult, children, ...buttonProps }) {
-  const { call, loading, result, error } = useTool(toolName);
-  const [hasResult, setHasResult] = useState(false);
-  const handleClick = /* @__PURE__ */ __name(async () => {
-    try {
-      const res = await call(toolArgs);
-      setHasResult(true);
-      onToolSuccess?.(res);
-    } catch (err) {
-      onToolError?.(err instanceof Error ? err : new Error(String(err)));
-    }
-  }, "handleClick");
-  return /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-action-button-wrapper"
-  }, /* @__PURE__ */ React7.createElement(Button, {
-    ...buttonProps,
-    loading,
-    onClick: handleClick
-  }, children), showResult && hasResult && result !== null && /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-action-button-result"
-  }, renderResult ? renderResult(result) : /* @__PURE__ */ React7.createElement("pre", null, JSON.stringify(result, null, 2))), error && /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-action-button-error"
-  }, error.message));
+  });
 }
-__name(ActionButton, "ActionButton");
-var Input = /* @__PURE__ */ forwardRef(({ className, label, helperText, error, size = "md", leftElement, rightElement, fullWidth = false, id, ...props }, ref) => {
-  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-  const hasError = Boolean(error);
-  return /* @__PURE__ */ React7.createElement("div", {
-    className: clsx("lui-input-wrapper", fullWidth && "lui-input-wrapper--full-width", className)
-  }, label && /* @__PURE__ */ React7.createElement("label", {
-    htmlFor: inputId,
-    className: "lui-input-label"
-  }, label), /* @__PURE__ */ React7.createElement("div", {
-    className: clsx("lui-input-container", `lui-input-container--${size}`, hasError && "lui-input-container--error", leftElement && "lui-input-container--has-left", rightElement && "lui-input-container--has-right")
-  }, leftElement && /* @__PURE__ */ React7.createElement("span", {
-    className: "lui-input-element lui-input-element--left"
-  }, leftElement), /* @__PURE__ */ React7.createElement("input", {
-    ref,
-    id: inputId,
-    className: "lui-input",
-    "aria-invalid": hasError,
-    "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+__name(DropdownMenuRadioGroup, "DropdownMenuRadioGroup");
+function DropdownMenuRadioItem({ className, children, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.RadioItem, {
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  }, /* @__PURE__ */ React25.createElement("span", {
+    className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+  }, /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(CircleIcon, {
+    className: "size-2 fill-current"
+  }))), children);
+}
+__name(DropdownMenuRadioItem, "DropdownMenuRadioItem");
+function DropdownMenuLabel({ className, inset, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Label, {
+    "data-slot": "dropdown-menu-label",
+    "data-inset": inset,
+    className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
     ...props
-  }), rightElement && /* @__PURE__ */ React7.createElement("span", {
-    className: "lui-input-element lui-input-element--right"
-  }, rightElement)), (error || helperText) && /* @__PURE__ */ React7.createElement("p", {
-    id: error ? `${inputId}-error` : `${inputId}-helper`,
-    className: clsx("lui-input-message", error && "lui-input-message--error")
-  }, error || helperText));
-});
-Input.displayName = "Input";
-function ToolForm({ toolName, fields, submitText = "Submit", onSuccess, onError, showResult = false, className }) {
-  const { call, loading, result, error } = useTool(toolName);
-  const [formData, setFormData] = useState(() => {
-    const initial = {};
-    fields.forEach((field) => {
-      if (field.defaultValue !== void 0) {
-        initial[field.name] = field.defaultValue;
-      }
-    });
-    return initial;
   });
-  const handleSubmit = /* @__PURE__ */ __name(async (e) => {
-    e.preventDefault();
-    const args = {};
-    fields.forEach((field) => {
-      const value = formData[field.name];
-      if (field.type === "number" && value !== void 0) {
-        args[field.name] = Number(value);
-      } else {
-        args[field.name] = value;
-      }
-    });
-    try {
-      const res = await call(args);
-      onSuccess?.(res);
-    } catch (err) {
-      onError?.(err instanceof Error ? err : new Error(String(err)));
-    }
-  }, "handleSubmit");
-  const handleChange = /* @__PURE__ */ __name((name, value) => {
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value
-    }));
-  }, "handleChange");
-  return /* @__PURE__ */ React7.createElement("form", {
-    className: clsx("lui-tool-form", className),
-    onSubmit: handleSubmit
-  }, /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-tool-form-fields"
-  }, fields.map((field) => /* @__PURE__ */ React7.createElement("div", {
-    key: field.name,
-    className: "lui-tool-form-field"
-  }, field.type === "textarea" ? /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-input-wrapper lui-input-wrapper--full-width"
-  }, /* @__PURE__ */ React7.createElement("label", {
-    className: "lui-input-label"
-  }, field.label), /* @__PURE__ */ React7.createElement("textarea", {
-    className: "lui-tool-form-textarea",
-    name: field.name,
-    placeholder: field.placeholder,
-    required: field.required,
-    value: formData[field.name] ?? "",
-    onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange")
-  }), field.helperText && /* @__PURE__ */ React7.createElement("p", {
-    className: "lui-input-message"
-  }, field.helperText)) : /* @__PURE__ */ React7.createElement(Input, {
-    fullWidth: true,
-    label: field.label,
-    type: field.type ?? "text",
-    name: field.name,
-    placeholder: field.placeholder,
-    required: field.required,
-    helperText: field.helperText,
-    value: formData[field.name] ?? "",
-    onChange: /* @__PURE__ */ __name((e) => handleChange(field.name, e.target.value), "onChange")
-  })))), /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-tool-form-actions"
-  }, /* @__PURE__ */ React7.createElement(Button, {
-    type: "submit",
-    loading
-  }, submitText)), error && /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-tool-form-error"
-  }, error.message), showResult && result !== null && /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-tool-form-result"
-  }, /* @__PURE__ */ React7.createElement("pre", null, JSON.stringify(result, null, 2))));
 }
-__name(ToolForm, "ToolForm");
-var Card = /* @__PURE__ */ forwardRef(({ className, variant = "default", padding = "md", interactive = false, children, ...props }, ref) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    ref,
-    className: clsx("lui-card", `lui-card--${variant}`, `lui-card--padding-${padding}`, interactive && "lui-card--interactive", className),
+__name(DropdownMenuLabel, "DropdownMenuLabel");
+function DropdownMenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Separator, {
+    "data-slot": "dropdown-menu-separator",
+    className: cn("bg-border -mx-1 my-1 h-px", className),
     ...props
-  }, children);
-});
-Card.displayName = "Card";
-var CardHeader = /* @__PURE__ */ forwardRef(({ className, title, description, action, children, ...props }, ref) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    ref,
-    className: clsx("lui-card-header", className),
+  });
+}
+__name(DropdownMenuSeparator, "DropdownMenuSeparator");
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement("span", {
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
     ...props
-  }, (title || description) && /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-card-header__text"
-  }, title && /* @__PURE__ */ React7.createElement("h3", {
-    className: "lui-card-header__title"
-  }, title), description && /* @__PURE__ */ React7.createElement("p", {
-    className: "lui-card-header__description"
-  }, description)), action && /* @__PURE__ */ React7.createElement("div", {
-    className: "lui-card-header__action"
-  }, action), children);
-});
-CardHeader.displayName = "CardHeader";
-var CardContent = /* @__PURE__ */ forwardRef(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    ref,
-    className: clsx("lui-card-content", className),
+  });
+}
+__name(DropdownMenuShortcut, "DropdownMenuShortcut");
+function DropdownMenuSub({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Sub, {
+    "data-slot": "dropdown-menu-sub",
     ...props
-  }, children);
-});
-CardContent.displayName = "CardContent";
-var CardFooter = /* @__PURE__ */ forwardRef(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    ref,
-    className: clsx("lui-card-footer", className),
+  });
+}
+__name(DropdownMenuSub, "DropdownMenuSub");
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.SubTrigger, {
+    "data-slot": "dropdown-menu-sub-trigger",
+    "data-inset": inset,
+    className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
     ...props
-  }, children);
-});
-CardFooter.displayName = "CardFooter";
+  }, children, /* @__PURE__ */ React25.createElement(ChevronRightIcon, {
+    className: "ml-auto size-4"
+  }));
+}
+__name(DropdownMenuSubTrigger, "DropdownMenuSubTrigger");
+function DropdownMenuSubContent({ className, ...props }) {
+  return /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.SubContent, {
+    "data-slot": "dropdown-menu-sub-content",
+    className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className),
+    ...props
+  });
+}
+__name(DropdownMenuSubContent, "DropdownMenuSubContent");
+function TooltipProvider({ delayDuration = 0, ...props }) {
+  return /* @__PURE__ */ React25.createElement(TooltipPrimitive.Provider, {
+    "data-slot": "tooltip-provider",
+    delayDuration,
+    ...props
+  });
+}
+__name(TooltipProvider, "TooltipProvider");
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(TooltipProvider, null, /* @__PURE__ */ React25.createElement(TooltipPrimitive.Root, {
+    "data-slot": "tooltip",
+    ...props
+  }));
+}
+__name(Tooltip, "Tooltip");
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ React25.createElement(TooltipPrimitive.Trigger, {
+    "data-slot": "tooltip-trigger",
+    ...props
+  });
+}
+__name(TooltipTrigger, "TooltipTrigger");
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+  return /* @__PURE__ */ React25.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(TooltipPrimitive.Content, {
+    "data-slot": "tooltip-content",
+    sideOffset,
+    className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+    ...props
+  }, children, /* @__PURE__ */ React25.createElement(TooltipPrimitive.Arrow, {
+    className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+  })));
+}
+__name(TooltipContent, "TooltipContent");
 function DataGrid({ data, columns, searchable = false, searchPlaceholder = "Search...", onRowClick, loading = false, emptyMessage = "No data", className }) {
   const [sorting, setSorting] = useState([]);
   const [globalFilter, setGlobalFilter] = useState("");
@@ -545,50 +2884,50 @@ function DataGrid({ data, columns, searchable = false, searchPlaceholder = "Sear
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel()
   });
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React25__default.createElement("div", {
     className: clsx("lui-datagrid", className)
-  }, searchable && /* @__PURE__ */ React7.createElement("div", {
+  }, searchable && /* @__PURE__ */ React25__default.createElement("div", {
     className: "lui-datagrid-search"
-  }, /* @__PURE__ */ React7.createElement("input", {
+  }, /* @__PURE__ */ React25__default.createElement("input", {
     type: "text",
     value: globalFilter,
     onChange: /* @__PURE__ */ __name((e) => setGlobalFilter(e.target.value), "onChange"),
     placeholder: searchPlaceholder,
     className: "lui-datagrid-search-input"
-  })), /* @__PURE__ */ React7.createElement("div", {
+  })), /* @__PURE__ */ React25__default.createElement("div", {
     className: "lui-datagrid-container"
-  }, /* @__PURE__ */ React7.createElement("table", {
+  }, /* @__PURE__ */ React25__default.createElement("table", {
     className: "lui-datagrid-table"
-  }, /* @__PURE__ */ React7.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React7.createElement("tr", {
+  }, /* @__PURE__ */ React25__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React25__default.createElement("tr", {
     key: headerGroup.id
-  }, headerGroup.headers.map((header) => /* @__PURE__ */ React7.createElement("th", {
+  }, headerGroup.headers.map((header) => /* @__PURE__ */ React25__default.createElement("th", {
     key: header.id,
     className: clsx("lui-datagrid-th", header.column.getCanSort() && "lui-datagrid-th--sortable"),
     onClick: header.column.getToggleSortingHandler(),
     style: {
       width: header.column.getSize()
     }
-  }, /* @__PURE__ */ React7.createElement("div", {
+  }, /* @__PURE__ */ React25__default.createElement("div", {
     className: "lui-datagrid-th-content"
-  }, flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ React7.createElement("span", {
+  }, flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ React25__default.createElement("span", {
     className: "lui-datagrid-sort-icon"
-  }, header.column.getIsSorted() === "asc" ? "\u2191" : "\u2193"))))))), /* @__PURE__ */ React7.createElement("tbody", null, loading ? /* @__PURE__ */ React7.createElement("tr", null, /* @__PURE__ */ React7.createElement("td", {
+  }, header.column.getIsSorted() === "asc" ? "\u2191" : "\u2193"))))))), /* @__PURE__ */ React25__default.createElement("tbody", null, loading ? /* @__PURE__ */ React25__default.createElement("tr", null, /* @__PURE__ */ React25__default.createElement("td", {
     colSpan: columns.length,
     className: "lui-datagrid-loading"
-  }, "Loading...")) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ React7.createElement("tr", null, /* @__PURE__ */ React7.createElement("td", {
+  }, "Loading...")) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ React25__default.createElement("tr", null, /* @__PURE__ */ React25__default.createElement("td", {
     colSpan: columns.length,
     className: "lui-datagrid-empty"
-  }, emptyMessage)) : table.getRowModel().rows.map((row) => /* @__PURE__ */ React7.createElement("tr", {
+  }, emptyMessage)) : table.getRowModel().rows.map((row) => /* @__PURE__ */ React25__default.createElement("tr", {
     key: row.id,
     className: clsx("lui-datagrid-row", onRowClick && "lui-datagrid-row--clickable"),
     onClick: /* @__PURE__ */ __name(() => onRowClick?.(row.original), "onClick")
-  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React7.createElement("td", {
+  }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React25__default.createElement("td", {
     key: cell.id,
     className: "lui-datagrid-td"
   }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))));
 }
 __name(DataGrid, "DataGrid");
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend);
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip$1, Legend);
 function Chart({ type, data, options, height = 300, width = "100%", className }) {
   const defaultOptions = {
     responsive: true,
@@ -641,13 +2980,13 @@ function Chart({ type, data, options, height = 300, width = "100%", className })
       ...options?.plugins
     }
   };
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React25__default.createElement("div", {
     className: clsx("lui-chart", className),
     style: {
       height,
       width
     }
-  }, /* @__PURE__ */ React7.createElement(Chart$2, {
+  }, /* @__PURE__ */ React25__default.createElement(Chart$2, {
     type,
     data,
     options: mergedOptions
@@ -656,99 +2995,176 @@ function Chart({ type, data, options, height = 300, width = "100%", className })
 __name(Chart, "Chart");
 function AppShell({ header, sidebar, footer, sidebarPosition = "left", sidebarWidth = 240, autoResize = true, padding = "md", className, children, ...props }) {
   const containerRef = useRef(null);
+  const { app } = useMcpApp();
   useEffect(() => {
     if (!autoResize || !containerRef.current) return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { height } = entry.contentRect;
-        window.parent.postMessage({
-          type: "resize",
-          height: Math.ceil(height)
-        }, "*");
-      }
-    });
+    if (!app) return;
+    let lastWidth = 0;
+    let lastHeight = 0;
+    let scheduled = false;
+    const sendSizeChanged = /* @__PURE__ */ __name(() => {
+      if (scheduled) return;
+      scheduled = true;
+      requestAnimationFrame(() => {
+        scheduled = false;
+        if (!containerRef.current) return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const width = Math.ceil(rect.width);
+        const height = Math.ceil(rect.height);
+        if (width !== lastWidth || height !== lastHeight) {
+          lastWidth = width;
+          lastHeight = height;
+          app.sendSizeChanged({
+            width,
+            height
+          });
+        }
+      });
+    }, "sendSizeChanged");
+    const resizeObserver = new ResizeObserver(sendSizeChanged);
     resizeObserver.observe(containerRef.current);
+    sendSizeChanged();
     return () => {
       resizeObserver.disconnect();
     };
   }, [
-    autoResize
+    autoResize,
+    app
   ]);
   const sidebarStyle = {
     width: typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth,
     flexShrink: 0
   };
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React25__default.createElement("div", {
     ref: containerRef,
     className: clsx("lui-app-shell", `lui-app-shell--padding-${padding}`, className),
     ...props
-  }, header && /* @__PURE__ */ React7.createElement("header", {
+  }, header && /* @__PURE__ */ React25__default.createElement("header", {
     className: "lui-app-shell-header"
-  }, header), /* @__PURE__ */ React7.createElement("div", {
+  }, header), /* @__PURE__ */ React25__default.createElement("div", {
     className: "lui-app-shell-body"
-  }, sidebar && sidebarPosition === "left" && /* @__PURE__ */ React7.createElement("aside", {
+  }, sidebar && sidebarPosition === "left" && /* @__PURE__ */ React25__default.createElement("aside", {
     className: "lui-app-shell-sidebar",
     style: sidebarStyle
-  }, sidebar), /* @__PURE__ */ React7.createElement("main", {
+  }, sidebar), /* @__PURE__ */ React25__default.createElement("main", {
     className: "lui-app-shell-main"
-  }, children), sidebar && sidebarPosition === "right" && /* @__PURE__ */ React7.createElement("aside", {
+  }, children), sidebar && sidebarPosition === "right" && /* @__PURE__ */ React25__default.createElement("aside", {
     className: "lui-app-shell-sidebar",
     style: sidebarStyle
-  }, sidebar)), footer && /* @__PURE__ */ React7.createElement("footer", {
+  }, sidebar)), footer && /* @__PURE__ */ React25__default.createElement("footer", {
     className: "lui-app-shell-footer"
   }, footer));
 }
 __name(AppShell, "AppShell");
+function Tabs2({ tabs, defaultValue, value, onValueChange, children, className }) {
+  const defaultTab = defaultValue || tabs[0]?.value;
+  return /* @__PURE__ */ React25__default.createElement(TabsPrimitive2.Root, {
+    className: clsx("lui-tabs", className),
+    defaultValue: defaultTab,
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React25__default.createElement(TabsPrimitive2.List, {
+    className: "lui-tabs-list"
+  }, tabs.map((tab) => /* @__PURE__ */ React25__default.createElement(TabsPrimitive2.Trigger, {
+    key: tab.value,
+    value: tab.value,
+    disabled: tab.disabled,
+    className: "lui-tabs-trigger"
+  }, tab.label))), children);
+}
+__name(Tabs2, "Tabs");
+function TabContent({ value, children, className }) {
+  return /* @__PURE__ */ React25__default.createElement(TabsPrimitive2.Content, {
+    value,
+    className: clsx("lui-tabs-content", className)
+  }, children);
+}
+__name(TabContent, "TabContent");
+function Modal({ open, defaultOpen, onOpenChange, title, description, children, className, trigger }) {
+  return /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Root, {
+    open,
+    defaultOpen,
+    onOpenChange
+  }, trigger && /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Trigger, {
+    asChild: true
+  }, trigger), /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Portal, null, /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Overlay, {
+    className: "lui-modal-overlay"
+  }), /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Content, {
+    className: clsx("lui-modal-content", className)
+  }, title && /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Title, {
+    className: "lui-modal-title"
+  }, title), description && /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Description, {
+    className: "lui-modal-description"
+  }, description), children, /* @__PURE__ */ React25__default.createElement(DialogPrimitive.Close, {
+    className: "lui-modal-close",
+    "aria-label": "Close"
+  }, /* @__PURE__ */ React25__default.createElement(CloseIcon, null)))));
+}
+__name(Modal, "Modal");
+function CloseIcon() {
+  return /* @__PURE__ */ React25__default.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /* @__PURE__ */ React25__default.createElement("path", {
+    d: "M3.5 3.5L10.5 10.5M10.5 3.5L3.5 10.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+}
+__name(CloseIcon, "CloseIcon");
 function CodeBlock({ code, language = "text", showLineNumbers = false, copyable = true, className }) {
-  const [copied, setCopied] = React7.useState(false);
+  const [copied, setCopied] = React25__default.useState(false);
   const handleCopy = /* @__PURE__ */ __name(async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, "handleCopy");
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React25__default.createElement("div", {
     className: clsx("lui-code-block", className)
-  }, copyable && /* @__PURE__ */ React7.createElement("button", {
+  }, copyable && /* @__PURE__ */ React25__default.createElement("button", {
     type: "button",
     className: "lui-code-block-copy",
     onClick: handleCopy,
     "aria-label": copied ? "Copied!" : "Copy code"
-  }, copied ? /* @__PURE__ */ React7.createElement("svg", {
+  }, copied ? /* @__PURE__ */ React25__default.createElement("svg", {
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2"
-  }, /* @__PURE__ */ React7.createElement("polyline", {
+  }, /* @__PURE__ */ React25__default.createElement("polyline", {
     points: "20,6 9,17 4,12"
-  })) : /* @__PURE__ */ React7.createElement("svg", {
+  })) : /* @__PURE__ */ React25__default.createElement("svg", {
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2"
-  }, /* @__PURE__ */ React7.createElement("rect", {
+  }, /* @__PURE__ */ React25__default.createElement("rect", {
     x: "9",
     y: "9",
     width: "13",
     height: "13",
     rx: "2",
     ry: "2"
-  }), /* @__PURE__ */ React7.createElement("path", {
+  }), /* @__PURE__ */ React25__default.createElement("path", {
     d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-  }))), /* @__PURE__ */ React7.createElement(Highlight, {
+  }))), /* @__PURE__ */ React25__default.createElement(Highlight, {
     theme: themes.nightOwl,
     code: code.trim(),
     language
-  }, ({ className: hlClassName, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React7.createElement("pre", {
+  }, ({ className: hlClassName, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React25__default.createElement("pre", {
     className: clsx("lui-code-block-pre", hlClassName),
     style
-  }, tokens.map((line, i) => /* @__PURE__ */ React7.createElement("div", {
+  }, tokens.map((line, i) => /* @__PURE__ */ React25__default.createElement("div", {
     key: i,
     ...getLineProps({
       line
     })
-  }, showLineNumbers && /* @__PURE__ */ React7.createElement("span", {
+  }, showLineNumbers && /* @__PURE__ */ React25__default.createElement("span", {
     className: "lui-code-block-line-number"
-  }, i + 1), line.map((token, key) => /* @__PURE__ */ React7.createElement("span", {
+  }, i + 1), line.map((token, key) => /* @__PURE__ */ React25__default.createElement("span", {
     key,
     ...getTokenProps({
       token
@@ -756,7 +3172,74 @@ function CodeBlock({ code, language = "text", showLineNumbers = false, copyable
   })))))));
 }
 __name(CodeBlock, "CodeBlock");
+var Card2 = /* @__PURE__ */ forwardRef(({ className, variant = "default", padding = "md", interactive = false, children, ...props }, ref) => {
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    ref,
+    className: clsx("lui-card", `lui-card--${variant}`, `lui-card--padding-${padding}`, interactive && "lui-card--interactive", className),
+    ...props
+  }, children);
+});
+Card2.displayName = "Card";
+var CardHeader2 = /* @__PURE__ */ forwardRef(({ className, title, description, action, children, ...props }, ref) => {
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    ref,
+    className: clsx("lui-card-header", className),
+    ...props
+  }, (title || description) && /* @__PURE__ */ React25__default.createElement("div", {
+    className: "lui-card-header__text"
+  }, title && /* @__PURE__ */ React25__default.createElement("h3", {
+    className: "lui-card-header__title"
+  }, title), description && /* @__PURE__ */ React25__default.createElement("p", {
+    className: "lui-card-header__description"
+  }, description)), action && /* @__PURE__ */ React25__default.createElement("div", {
+    className: "lui-card-header__action"
+  }, action), children);
+});
+CardHeader2.displayName = "CardHeader";
+var CardContent2 = /* @__PURE__ */ forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    ref,
+    className: clsx("lui-card-content", className),
+    ...props
+  }, children);
+});
+CardContent2.displayName = "CardContent";
+var CardFooter2 = /* @__PURE__ */ forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    ref,
+    className: clsx("lui-card-footer", className),
+    ...props
+  }, children);
+});
+CardFooter2.displayName = "CardFooter";
+var Input2 = /* @__PURE__ */ forwardRef(({ className, label, helperText, error, size = "md", leftElement, rightElement, fullWidth = false, id, ...props }, ref) => {
+  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ React25__default.createElement("div", {
+    className: clsx("lui-input-wrapper", fullWidth && "lui-input-wrapper--full-width", className)
+  }, label && /* @__PURE__ */ React25__default.createElement("label", {
+    htmlFor: inputId,
+    className: "lui-input-label"
+  }, label), /* @__PURE__ */ React25__default.createElement("div", {
+    className: clsx("lui-input-container", `lui-input-container--${size}`, hasError && "lui-input-container--error", leftElement && "lui-input-container--has-left", rightElement && "lui-input-container--has-right")
+  }, leftElement && /* @__PURE__ */ React25__default.createElement("span", {
+    className: "lui-input-element lui-input-element--left"
+  }, leftElement), /* @__PURE__ */ React25__default.createElement("input", {
+    ref,
+    id: inputId,
+    className: "lui-input",
+    "aria-invalid": hasError,
+    "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+    ...props
+  }), rightElement && /* @__PURE__ */ React25__default.createElement("span", {
+    className: "lui-input-element lui-input-element--right"
+  }, rightElement)), (error || helperText) && /* @__PURE__ */ React25__default.createElement("p", {
+    id: error ? `${inputId}-error` : `${inputId}-helper`,
+    className: clsx("lui-input-message", error && "lui-input-message--error")
+  }, error || helperText));
+});
+Input2.displayName = "Input";
 
-export { ActionButton, AppProvider, AppShell, Button, Card, CardContent, CardFooter, CardHeader, Chart, CodeBlock, DataGrid, Input, ToolForm, UIApp, getUIAppMetadata, getUIAppUri, useHostContext, useMcpApp, useTool, useToolInput, useToolInputPartial, useToolResult };
+export { ActionButton, Alert, AlertDescription, AlertTitle, AppProvider, AppShell, Badge, Button2 as Button, Card2 as Card, CardContent2 as CardContent, CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle, Chart, Checkbox, CodeBlock, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_RESULT_CONFIG, DataGrid, 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, Input2 as Input, Label2 as Label, Modal, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RequireConnection, ResourceView, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Skeleton, Slider, StreamingContent, Switch, TabContent, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, ToolButton, ToolDataGrid, ToolErrorBoundary, ToolForm, ToolInput, ToolProvider, ToolSelect, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, normalizeToolBinding, useFormField, useHostContext, useMcpApp, useMessage, useResource, useTool, useToolContext, useToolInput, useToolInputPartial, useToolResult, useToolStream, useToolSubscription };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map