mcp-use 1.3.3-canary.2 → 1.3.3-canary.4

package/dist/chunk-QKPVHYJU.js

@@ -0,0 +1,2027 @@
+import {
+  BrowserMCPClient,
+  BrowserOAuthClientProvider
+} from "./chunk-TIUSJAAE.js";
+import {
+  __name
+} from "./chunk-3GQAWCBQ.js";
+
+// src/react/useMcp.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { sanitizeUrl } from "strict-url-sanitise";
+
+// src/utils/assert.ts
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+__name(assert, "assert");
+
+// src/react/useMcp.ts
+var DEFAULT_RECONNECT_DELAY = 3e3;
+var DEFAULT_RETRY_DELAY = 5e3;
+var AUTH_TIMEOUT = 5 * 60 * 1e3;
+function useMcp(options) {
+  const {
+    url,
+    enabled = true,
+    clientName,
+    clientUri,
+    callbackUrl = typeof window !== "undefined" ? sanitizeUrl(
+      new URL("/oauth/callback", window.location.origin).toString()
+    ) : "/oauth/callback",
+    storageKeyPrefix = "mcp:auth",
+    clientConfig = {},
+    customHeaders = {},
+    debug: _debug = false,
+    autoRetry = false,
+    autoReconnect = DEFAULT_RECONNECT_DELAY,
+    transportType = "auto",
+    preventAutoAuth = false,
+    onPopupWindow,
+    timeout = 3e4,
+    // 30 seconds default for connection timeout
+    sseReadTimeout = 3e5
+    // 5 minutes default for SSE read timeout
+  } = options;
+  const [state, setState] = useState("discovering");
+  const [tools, setTools] = useState([]);
+  const [resources, setResources] = useState([]);
+  const [resourceTemplates, setResourceTemplates] = useState([]);
+  const [prompts, setPrompts] = useState([]);
+  const [serverInfo, setServerInfo] = useState();
+  const [capabilities, setCapabilities] = useState();
+  const [error, setError] = useState(void 0);
+  const [log, setLog] = useState([]);
+  const [authUrl, setAuthUrl] = useState(void 0);
+  const clientRef = useRef(null);
+  const authProviderRef = useRef(null);
+  const connectingRef = useRef(false);
+  const isMountedRef = useRef(true);
+  const connectAttemptRef = useRef(0);
+  const authTimeoutRef = useRef(null);
+  const stateRef = useRef(state);
+  const autoReconnectRef = useRef(autoReconnect);
+  const successfulTransportRef = useRef(null);
+  useEffect(() => {
+    stateRef.current = state;
+    autoReconnectRef.current = autoReconnect;
+  }, [state, autoReconnect]);
+  const addLog = useCallback(
+    (level, message, ...args) => {
+      const fullMessage = args.length > 0 ? `${message} ${args.map((arg) => JSON.stringify(arg)).join(" ")}` : message;
+      console[level](`[useMcp] ${fullMessage}`);
+      if (isMountedRef.current) {
+        setLog((prevLog) => [
+          ...prevLog.slice(-100),
+          { level, message: fullMessage, timestamp: Date.now() }
+        ]);
+      }
+    },
+    []
+  );
+  const disconnect = useCallback(
+    async (quiet = false) => {
+      if (!quiet) addLog("info", "Disconnecting...");
+      connectingRef.current = false;
+      if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+      authTimeoutRef.current = null;
+      if (clientRef.current) {
+        try {
+          const serverName = "inspector-server";
+          await clientRef.current.closeSession(serverName);
+        } catch (err) {
+          if (!quiet) addLog("warn", "Error closing session:", err);
+        }
+      }
+      clientRef.current = null;
+      if (isMountedRef.current && !quiet) {
+        setState("discovering");
+        setTools([]);
+        setResources([]);
+        setResourceTemplates([]);
+        setPrompts([]);
+        setError(void 0);
+        setAuthUrl(void 0);
+      }
+    },
+    [addLog]
+  );
+  const failConnection = useCallback(
+    (errorMessage, connectionError) => {
+      addLog("error", errorMessage, connectionError ?? "");
+      if (isMountedRef.current) {
+        setState("failed");
+        setError(errorMessage);
+        const manualUrl = authProviderRef.current?.getLastAttemptedAuthUrl();
+        if (manualUrl) {
+          setAuthUrl(manualUrl);
+          addLog(
+            "info",
+            "Manual authentication URL may be available.",
+            manualUrl
+          );
+        }
+      }
+      connectingRef.current = false;
+    },
+    [addLog]
+  );
+  const connect = useCallback(async () => {
+    if (!enabled || !url) {
+      addLog(
+        "debug",
+        enabled ? "No server URL provided, skipping connection." : "Connection disabled via enabled flag."
+      );
+      return;
+    }
+    if (connectingRef.current) {
+      addLog("debug", "Connection attempt already in progress.");
+      return;
+    }
+    if (!isMountedRef.current) {
+      addLog("debug", "Connect called after unmount, aborting.");
+      return;
+    }
+    connectingRef.current = true;
+    connectAttemptRef.current += 1;
+    setError(void 0);
+    setAuthUrl(void 0);
+    successfulTransportRef.current = null;
+    setState("discovering");
+    addLog(
+      "info",
+      `Connecting attempt #${connectAttemptRef.current} to ${url}...`
+    );
+    if (!authProviderRef.current) {
+      authProviderRef.current = new BrowserOAuthClientProvider(url, {
+        storageKeyPrefix,
+        clientName,
+        clientUri,
+        callbackUrl,
+        preventAutoAuth,
+        onPopupWindow
+      });
+      addLog("debug", "BrowserOAuthClientProvider initialized in connect.");
+    }
+    if (!clientRef.current) {
+      clientRef.current = new BrowserMCPClient();
+      addLog("debug", "BrowserMCPClient initialized in connect.");
+    }
+    const tryConnectWithTransport = /* @__PURE__ */ __name(async (transportTypeParam, isAuthRetry = false) => {
+      addLog(
+        "info",
+        `Attempting connection with transport: ${transportTypeParam}`
+      );
+      try {
+        const serverName = "inspector-server";
+        const serverConfig = {
+          url,
+          transport: transportTypeParam === "sse" ? "http" : transportTypeParam
+        };
+        if (customHeaders && Object.keys(customHeaders).length > 0) {
+          serverConfig.headers = customHeaders;
+        }
+        if (authProviderRef.current) {
+          const tokens = await authProviderRef.current.tokens();
+          if (tokens?.access_token) {
+            serverConfig.headers = {
+              ...serverConfig.headers,
+              Authorization: `Bearer ${tokens.access_token}`
+            };
+          }
+        }
+        clientRef.current.addServer(serverName, {
+          ...serverConfig,
+          authProvider: authProviderRef.current
+          // ← SDK handles OAuth automatically!
+        });
+        const session = await clientRef.current.createSession(serverName);
+        await session.initialize();
+        addLog("info", "\u2705 Successfully connected to MCP server");
+        addLog("info", "Server info:", session.connector.serverInfo);
+        addLog(
+          "info",
+          "Server capabilities:",
+          session.connector.serverCapabilities
+        );
+        console.log("[useMcp] Server info:", session.connector.serverInfo);
+        console.log(
+          "[useMcp] Server capabilities:",
+          session.connector.serverCapabilities
+        );
+        setState("ready");
+        successfulTransportRef.current = transportTypeParam;
+        setTools(session.connector.tools || []);
+        const resourcesResult = await session.connector.listAllResources();
+        setResources(resourcesResult.resources || []);
+        const promptsResult = await session.connector.listPrompts();
+        setPrompts(promptsResult.prompts || []);
+        const serverInfo2 = session.connector.serverInfo;
+        const capabilities2 = session.connector.serverCapabilities;
+        if (serverInfo2) {
+          console.log("[useMcp] Server info:", serverInfo2);
+          setServerInfo(serverInfo2);
+        }
+        if (capabilities2) {
+          console.log("[useMcp] Server capabilities:", capabilities2);
+          setCapabilities(capabilities2);
+        }
+        return "success";
+      } catch (err) {
+        const errorMessage = err?.message || String(err);
+        if (err.code === 401 || errorMessage.includes("401") || errorMessage.includes("Unauthorized")) {
+          if (customHeaders && Object.keys(customHeaders).length > 0) {
+            failConnection(
+              "Authentication failed: Server returned 401 Unauthorized. Check your Authorization header value is correct."
+            );
+            return "failed";
+          }
+          failConnection(
+            "Authentication required: Server returned 401 Unauthorized. Add an Authorization header in the Custom Headers section (e.g., Authorization: Bearer YOUR_API_KEY)."
+          );
+          return "failed";
+        }
+        failConnection(errorMessage, err);
+        return "failed";
+      }
+    }, "tryConnectWithTransport");
+    let finalStatus = "failed";
+    if (transportType === "sse") {
+      addLog("debug", "Using SSE-only transport mode");
+      finalStatus = await tryConnectWithTransport("sse");
+    } else if (transportType === "http") {
+      addLog("debug", "Using HTTP-only transport mode");
+      finalStatus = await tryConnectWithTransport("http");
+    } else {
+      addLog("debug", "Using auto transport mode (HTTP with SSE fallback)");
+      const httpResult = await tryConnectWithTransport("http");
+      if (httpResult === "fallback" && isMountedRef.current && stateRef.current !== "authenticating") {
+        addLog("info", "HTTP failed, attempting SSE fallback...");
+        const sseResult = await tryConnectWithTransport("sse");
+        finalStatus = sseResult;
+      } else {
+        finalStatus = httpResult;
+      }
+    }
+    if (finalStatus === "success" || finalStatus === "failed" || finalStatus === "auth_redirect") {
+      connectingRef.current = false;
+    }
+    addLog("debug", `Connection sequence finished with status: ${finalStatus}`);
+  }, [
+    addLog,
+    failConnection,
+    disconnect,
+    url,
+    storageKeyPrefix,
+    clientName,
+    clientUri,
+    callbackUrl,
+    clientConfig.name,
+    clientConfig.version,
+    customHeaders,
+    transportType,
+    preventAutoAuth,
+    onPopupWindow,
+    enabled,
+    timeout,
+    sseReadTimeout
+  ]);
+  const callTool = useCallback(
+    async (name, args) => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(
+          `MCP client is not ready (current state: ${state}). Cannot call tool "${name}".`
+        );
+      }
+      addLog("info", `Calling tool: ${name}`, args);
+      try {
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const result = await session.connector.callTool(name, args || {});
+        addLog("info", `Tool "${name}" call successful:`, result);
+        return result;
+      } catch (err) {
+        addLog("error", `Tool "${name}" call failed:`, err);
+        throw err;
+      }
+    },
+    [state]
+  );
+  const retry = useCallback(() => {
+    if (stateRef.current === "failed") {
+      addLog("info", "Retry requested...");
+      connect();
+    } else {
+      addLog(
+        "warn",
+        `Retry called but state is not 'failed' (state: ${stateRef.current}). Ignoring.`
+      );
+    }
+  }, [addLog, connect]);
+  const authenticate = useCallback(async () => {
+    addLog("info", "Manual authentication requested...");
+    const currentState = stateRef.current;
+    if (currentState === "failed") {
+      addLog("info", "Attempting to reconnect and authenticate via retry...");
+      retry();
+    } else if (currentState === "pending_auth") {
+      addLog("info", "Proceeding with authentication from pending state...");
+      setState("authenticating");
+      if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+      authTimeoutRef.current = setTimeout(() => {
+        if (isMountedRef.current) {
+          const currentStateValue = stateRef.current;
+          if (currentStateValue === "authenticating") {
+            failConnection("Authentication timed out. Please try again.");
+          }
+        }
+      }, AUTH_TIMEOUT);
+      try {
+        assert(
+          authProviderRef.current,
+          "Auth Provider not available for manual auth"
+        );
+        assert(url, "Server URL is required for authentication");
+        addLog(
+          "info",
+          "Redirecting for manual authentication. Waiting for callback..."
+        );
+      } catch (authError) {
+        if (!isMountedRef.current) return;
+        if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+        failConnection(
+          `Manual authentication failed: ${authError instanceof Error ? authError.message : String(authError)}`,
+          authError instanceof Error ? authError : void 0
+        );
+      }
+    } else if (currentState === "authenticating") {
+      addLog(
+        "warn",
+        "Already attempting authentication. Check for blocked popups or wait for timeout."
+      );
+      const manualUrl = authProviderRef.current?.getLastAttemptedAuthUrl();
+      if (manualUrl && !authUrl) {
+        setAuthUrl(manualUrl);
+        addLog("info", "Manual authentication URL retrieved:", manualUrl);
+      }
+    } else {
+      addLog(
+        "info",
+        `Client not in a state requiring manual authentication trigger (state: ${currentState}). If needed, try disconnecting and reconnecting.`
+      );
+    }
+  }, [addLog, retry, authUrl, url, failConnection, connect]);
+  const clearStorage = useCallback(() => {
+    if (authProviderRef.current) {
+      const count = authProviderRef.current.clearStorage();
+      addLog("info", `Cleared ${count} item(s) from localStorage for ${url}.`);
+      setAuthUrl(void 0);
+      disconnect();
+    } else {
+      addLog("warn", "Auth provider not initialized, cannot clear storage.");
+    }
+  }, [url, addLog, disconnect]);
+  const listResources = useCallback(async () => {
+    if (stateRef.current !== "ready" || !clientRef.current) {
+      throw new Error(
+        `MCP client is not ready (current state: ${state}). Cannot list resources.`
+      );
+    }
+    addLog("info", "Listing resources");
+    try {
+      const serverName = "inspector-server";
+      const session = clientRef.current.getSession(serverName);
+      if (!session) {
+        throw new Error("No active session found");
+      }
+      const resourcesResult = await session.connector.listAllResources();
+      setResources(resourcesResult.resources || []);
+      addLog("info", "Resources listed successfully");
+    } catch (err) {
+      addLog("error", "List resources failed:", err);
+      throw err;
+    }
+  }, [state]);
+  const readResource = useCallback(
+    async (uri) => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(
+          `MCP client is not ready (current state: ${state}). Cannot read resource.`
+        );
+      }
+      addLog("info", `Reading resource: ${uri}`);
+      try {
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const result = await session.connector.readResource(uri);
+        addLog("info", "Resource read successful:", result);
+        return result;
+      } catch (err) {
+        addLog("error", "Resource read failed:", err);
+        throw err;
+      }
+    },
+    [state]
+  );
+  const listPrompts = useCallback(async () => {
+    if (stateRef.current !== "ready" || !clientRef.current) {
+      throw new Error(
+        `MCP client is not ready (current state: ${state}). Cannot list prompts.`
+      );
+    }
+    addLog("info", "Listing prompts");
+    try {
+      const serverName = "inspector-server";
+      const session = clientRef.current.getSession(serverName);
+      if (!session) {
+        throw new Error("No active session found");
+      }
+      const promptsResult = await session.connector.listPrompts();
+      setPrompts(promptsResult.prompts || []);
+      addLog("info", "Prompts listed successfully");
+    } catch (err) {
+      addLog("error", "List prompts failed:", err);
+      throw err;
+    }
+  }, [state]);
+  const getPrompt = useCallback(
+    async (name, args) => {
+      if (stateRef.current !== "ready" || !clientRef.current) {
+        throw new Error(
+          `MCP client is not ready (current state: ${state}). Cannot get prompt.`
+        );
+      }
+      addLog("info", `Getting prompt: ${name}`, args);
+      try {
+        const serverName = "inspector-server";
+        const session = clientRef.current.getSession(serverName);
+        if (!session) {
+          throw new Error("No active session found");
+        }
+        const result = await session.connector.getPrompt(name, args || {});
+        addLog("info", `Prompt "${name}" retrieved successfully:`, result);
+        return result;
+      } catch (err) {
+        addLog("error", `Prompt "${name}" retrieval failed:`, err);
+        throw err;
+      }
+    },
+    [state]
+  );
+  const connectRef = useRef(connect);
+  const failConnectionRef = useRef(failConnection);
+  useEffect(() => {
+    connectRef.current = connect;
+    failConnectionRef.current = failConnection;
+  });
+  useEffect(() => {
+    const messageHandler = /* @__PURE__ */ __name((event) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type === "mcp_auth_callback") {
+        addLog("info", "Received auth callback message.", event.data);
+        if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+        authTimeoutRef.current = null;
+        if (event.data.success) {
+          addLog(
+            "info",
+            "Authentication successful via popup. Reconnecting client..."
+          );
+          if (connectingRef.current) {
+            addLog(
+              "debug",
+              "Connection attempt already in progress, resetting flag to allow reconnection."
+            );
+          }
+          connectingRef.current = false;
+          setTimeout(() => {
+            if (isMountedRef.current) {
+              addLog(
+                "debug",
+                "Initiating reconnection after successful auth callback."
+              );
+              connectRef.current();
+            }
+          }, 100);
+        } else {
+          failConnectionRef.current(
+            `Authentication failed in callback: ${event.data.error || "Unknown reason."}`
+          );
+        }
+      }
+    }, "messageHandler");
+    window.addEventListener("message", messageHandler);
+    addLog("debug", "Auth callback message listener added.");
+    return () => {
+      window.removeEventListener("message", messageHandler);
+      addLog("debug", "Auth callback message listener removed.");
+      if (authTimeoutRef.current) clearTimeout(authTimeoutRef.current);
+    };
+  }, [addLog]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    if (!enabled || !url) {
+      addLog(
+        "debug",
+        enabled ? "No server URL provided, skipping connection." : "Connection disabled via enabled flag."
+      );
+      setState("discovering");
+      return () => {
+        isMountedRef.current = false;
+      };
+    }
+    addLog("debug", "useMcp mounted, initiating connection.");
+    connectAttemptRef.current = 0;
+    if (!authProviderRef.current || authProviderRef.current.serverUrl !== url) {
+      authProviderRef.current = new BrowserOAuthClientProvider(url, {
+        storageKeyPrefix,
+        clientName,
+        clientUri,
+        callbackUrl,
+        preventAutoAuth,
+        onPopupWindow
+      });
+      addLog(
+        "debug",
+        "BrowserOAuthClientProvider initialized/updated on mount/option change."
+      );
+    }
+    connect();
+    return () => {
+      isMountedRef.current = false;
+      addLog("debug", "useMcp unmounting, disconnecting.");
+      disconnect(true);
+    };
+  }, [
+    url,
+    enabled,
+    storageKeyPrefix,
+    callbackUrl,
+    clientName,
+    clientUri,
+    clientConfig.name,
+    clientConfig.version
+  ]);
+  useEffect(() => {
+    let retryTimeoutId = null;
+    if (state === "failed" && autoRetry && connectAttemptRef.current > 0) {
+      const delay = typeof autoRetry === "number" ? autoRetry : DEFAULT_RETRY_DELAY;
+      addLog("info", `Connection failed, auto-retrying in ${delay}ms...`);
+      retryTimeoutId = setTimeout(() => {
+        if (isMountedRef.current && stateRef.current === "failed") {
+          retry();
+        }
+      }, delay);
+    }
+    return () => {
+      if (retryTimeoutId) clearTimeout(retryTimeoutId);
+    };
+  }, [state, autoRetry, retry, addLog]);
+  return {
+    state,
+    tools,
+    resources,
+    resourceTemplates,
+    prompts,
+    serverInfo,
+    capabilities,
+    error,
+    log,
+    authUrl,
+    client: clientRef.current,
+    callTool,
+    readResource,
+    listResources,
+    listPrompts,
+    getPrompt,
+    retry,
+    disconnect,
+    authenticate,
+    clearStorage
+  };
+}
+__name(useMcp, "useMcp");
+
+// src/react/useWidget.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo,
+  useState as useState2,
+  useSyncExternalStore
+} from "react";
+
+// src/react/widget-types.ts
+var SET_GLOBALS_EVENT_TYPE = "openai:set_globals";
+
+// src/react/useWidget.ts
+function useOpenAiGlobal(key) {
+  return useSyncExternalStore(
+    (onChange) => {
+      const handleSetGlobal = /* @__PURE__ */ __name((event) => {
+        const customEvent = event;
+        const value = customEvent.detail.globals[key];
+        if (value === void 0) {
+          return;
+        }
+        onChange();
+      }, "handleSetGlobal");
+      if (typeof window !== "undefined") {
+        window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
+      }
+      return () => {
+        if (typeof window !== "undefined") {
+          window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
+        }
+      };
+    },
+    () => typeof window !== "undefined" && window.openai ? window.openai[key] : void 0
+  );
+}
+__name(useOpenAiGlobal, "useOpenAiGlobal");
+function useWidget(defaultProps) {
+  const [isOpenAiAvailable, setIsOpenAiAvailable] = useState2(
+    () => typeof window !== "undefined" && !!window.openai
+  );
+  useEffect2(() => {
+    if (typeof window !== "undefined" && window.openai) {
+      setIsOpenAiAvailable(true);
+      return;
+    }
+    const checkInterval = setInterval(() => {
+      if (typeof window !== "undefined" && window.openai) {
+        setIsOpenAiAvailable(true);
+        clearInterval(checkInterval);
+      }
+    }, 100);
+    const handleSetGlobals = /* @__PURE__ */ __name(() => {
+      if (typeof window !== "undefined" && window.openai) {
+        setIsOpenAiAvailable(true);
+        clearInterval(checkInterval);
+      }
+    }, "handleSetGlobals");
+    if (typeof window !== "undefined") {
+      window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
+    }
+    const timeout = setTimeout(() => {
+      clearInterval(checkInterval);
+      if (typeof window !== "undefined") {
+        window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
+      }
+    }, 5e3);
+    return () => {
+      clearInterval(checkInterval);
+      clearTimeout(timeout);
+      if (typeof window !== "undefined") {
+        window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobals);
+      }
+    };
+  }, []);
+  const provider = useMemo(() => {
+    return isOpenAiAvailable ? "openai" : "mcp-ui";
+  }, [isOpenAiAvailable]);
+  const urlParams = useMemo(() => {
+    const urlParams2 = new URLSearchParams(window?.location?.search);
+    if (urlParams2.has("mcpUseParams")) {
+      return JSON.parse(urlParams2.get("mcpUseParams"));
+    }
+    return {
+      toolInput: {},
+      toolOutput: {},
+      toolId: ""
+    };
+  }, [window?.location?.search]);
+  const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
+  const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
+  const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
+  const widgetState = useOpenAiGlobal("widgetState");
+  const theme = useOpenAiGlobal("theme");
+  const displayMode = useOpenAiGlobal("displayMode");
+  const safeArea = useOpenAiGlobal("safeArea");
+  const maxHeight = useOpenAiGlobal("maxHeight");
+  const userAgent = useOpenAiGlobal("userAgent");
+  const locale = useOpenAiGlobal("locale");
+  const [localWidgetState, setLocalWidgetState] = useState2(null);
+  useEffect2(() => {
+    if (widgetState !== void 0) {
+      setLocalWidgetState(widgetState);
+    }
+  }, [widgetState]);
+  const callTool = useCallback2(
+    async (name, args) => {
+      if (!window.openai?.callTool) {
+        throw new Error("window.openai.callTool is not available");
+      }
+      return window.openai.callTool(name, args);
+    },
+    []
+  );
+  const sendFollowUpMessage = useCallback2(
+    async (prompt) => {
+      if (!window.openai?.sendFollowUpMessage) {
+        throw new Error("window.openai.sendFollowUpMessage is not available");
+      }
+      return window.openai.sendFollowUpMessage({ prompt });
+    },
+    []
+  );
+  const openExternal = useCallback2((href) => {
+    if (!window.openai?.openExternal) {
+      throw new Error("window.openai.openExternal is not available");
+    }
+    window.openai.openExternal({ href });
+  }, []);
+  const requestDisplayMode = useCallback2(
+    async (mode) => {
+      if (!window.openai?.requestDisplayMode) {
+        throw new Error("window.openai.requestDisplayMode is not available");
+      }
+      return window.openai.requestDisplayMode({ mode });
+    },
+    []
+  );
+  const setState = useCallback2(
+    async (state) => {
+      const newState = typeof state === "function" ? state(localWidgetState) : state;
+      if (!window.openai?.setWidgetState) {
+        throw new Error("window.openai.setWidgetState is not available");
+      }
+      setLocalWidgetState(newState);
+      return window.openai.setWidgetState(newState);
+    },
+    [localWidgetState]
+  );
+  return {
+    // Props and state (with defaults)
+    props: toolInput || defaultProps || {},
+    output: toolOutput ?? null,
+    metadata: toolResponseMetadata ?? null,
+    state: localWidgetState,
+    setState,
+    // Layout and theme (with safe defaults)
+    theme: theme || "light",
+    displayMode: displayMode || "inline",
+    safeArea: safeArea || { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
+    maxHeight: maxHeight || 600,
+    userAgent: userAgent || {
+      device: { type: "desktop" },
+      capabilities: { hover: true, touch: false }
+    },
+    locale: locale || "en",
+    // Actions
+    callTool,
+    sendFollowUpMessage,
+    openExternal,
+    requestDisplayMode,
+    // Availability
+    isAvailable: isOpenAiAvailable
+  };
+}
+__name(useWidget, "useWidget");
+function useWidgetProps(defaultProps) {
+  const { props } = useWidget(defaultProps);
+  return props;
+}
+__name(useWidgetProps, "useWidgetProps");
+function useWidgetTheme() {
+  const { theme } = useWidget();
+  return theme;
+}
+__name(useWidgetTheme, "useWidgetTheme");
+function useWidgetState(defaultState) {
+  const { state, setState } = useWidget();
+  useEffect2(() => {
+    if (state === null && defaultState !== void 0 && window.openai?.setWidgetState) {
+      setState(defaultState);
+    }
+  }, []);
+  return [state, setState];
+}
+__name(useWidgetState, "useWidgetState");
+
+// src/react/WidgetFullscreenWrapper.tsx
+import React, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+function WidgetFullscreenWrapper({
+  children,
+  className = "",
+  position = "top-right",
+  attachTo,
+  showLabels = true
+}) {
+  const { displayMode, requestDisplayMode, theme, safeArea, isAvailable } = useWidget();
+  const [isHovered, setIsHovered] = useState3(false);
+  const containerRef = useRef2(null);
+  const isFullscreen = displayMode === "fullscreen" && isAvailable;
+  const isPip = displayMode === "pip" && isAvailable;
+  const isDark = theme === "dark";
+  const buttonBg = isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.7)";
+  const buttonBgHover = isDark ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.9)";
+  const buttonColor = "white";
+  const getPositionStyles = /* @__PURE__ */ __name(() => {
+    const baseOffset = 16;
+    const topOffset = safeArea?.insets?.top ? `${Math.max(baseOffset, safeArea.insets.top + 8)}px` : `${baseOffset}px`;
+    const rightOffset = safeArea?.insets?.right ? `${Math.max(baseOffset, safeArea.insets.right + 8)}px` : `${baseOffset}px`;
+    const bottomOffset = safeArea?.insets?.bottom ? `${Math.max(baseOffset, safeArea.insets.bottom + 8)}px` : `${baseOffset}px`;
+    const leftOffset = safeArea?.insets?.left ? `${Math.max(baseOffset, safeArea.insets.left + 8)}px` : `${baseOffset}px`;
+    const styles = {
+      position: "absolute",
+      zIndex: 1e3,
+      display: "flex",
+      gap: "8px",
+      opacity: isHovered ? 1 : 0,
+      transition: "opacity 0.2s ease-in-out",
+      pointerEvents: isHovered ? "auto" : "none"
+    };
+    switch (position) {
+      case "top-left":
+        styles.top = topOffset;
+        styles.left = leftOffset;
+        break;
+      case "top-center":
+        styles.top = topOffset;
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+        break;
+      case "top-right":
+        styles.top = topOffset;
+        styles.right = rightOffset;
+        break;
+      case "center-left":
+        styles.top = "50%";
+        styles.left = leftOffset;
+        styles.transform = "translateY(-50%)";
+        break;
+      case "center-right":
+        styles.top = "50%";
+        styles.right = rightOffset;
+        styles.transform = "translateY(-50%)";
+        break;
+      case "bottom-left":
+        styles.bottom = bottomOffset;
+        styles.left = leftOffset;
+        break;
+      case "bottom-center":
+        styles.bottom = bottomOffset;
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+        break;
+      case "bottom-right":
+        styles.bottom = bottomOffset;
+        styles.right = rightOffset;
+        break;
+      default:
+        styles.top = topOffset;
+        styles.right = rightOffset;
+        break;
+    }
+    return styles;
+  }, "getPositionStyles");
+  useEffect3(() => {
+    if (!attachTo) return;
+    const handleMouseEnter = /* @__PURE__ */ __name(() => setIsHovered(true), "handleMouseEnter");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => setIsHovered(false), "handleMouseLeave");
+    attachTo.addEventListener("mouseenter", handleMouseEnter);
+    attachTo.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      attachTo.removeEventListener("mouseenter", handleMouseEnter);
+      attachTo.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [attachTo]);
+  const handleFullscreen = /* @__PURE__ */ __name(async () => {
+    try {
+      await requestDisplayMode("fullscreen");
+    } catch (error) {
+      console.error("Failed to go fullscreen:", error);
+    }
+  }, "handleFullscreen");
+  const handlePip = /* @__PURE__ */ __name(async () => {
+    try {
+      await requestDisplayMode("pip");
+    } catch (error) {
+      console.error("Failed to go pip:", error);
+    }
+  }, "handlePip");
+  const getTooltipStyles = /* @__PURE__ */ __name(() => {
+    const baseStyles = {
+      position: "absolute",
+      padding: "4px 8px",
+      backgroundColor: isDark ? "rgba(0, 0, 0, 0.9)" : "rgba(0, 0, 0, 0.9)",
+      color: "white",
+      borderRadius: "4px",
+      fontSize: "12px",
+      whiteSpace: "nowrap",
+      pointerEvents: "none",
+      transition: "opacity 0.2s ease-in-out"
+    };
+    switch (position) {
+      case "top-right":
+        return {
+          ...baseStyles,
+          top: "100%",
+          right: "0",
+          marginTop: "8px"
+        };
+      case "top-left":
+        return {
+          ...baseStyles,
+          top: "100%",
+          left: "0",
+          marginTop: "8px"
+        };
+      case "top-center":
+        return {
+          ...baseStyles,
+          top: "100%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          marginTop: "8px"
+        };
+      case "bottom-right":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          right: "0",
+          marginBottom: "8px"
+        };
+      case "bottom-left":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          left: "0",
+          marginBottom: "8px"
+        };
+      case "bottom-center":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          marginBottom: "8px"
+        };
+      case "center-left":
+        return {
+          ...baseStyles,
+          left: "100%",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginLeft: "8px"
+        };
+      case "center-right":
+        return {
+          ...baseStyles,
+          right: "100%",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginRight: "8px"
+        };
+      default:
+        return {
+          ...baseStyles,
+          top: "100%",
+          right: "0",
+          marginTop: "8px"
+        };
+    }
+  }, "getTooltipStyles");
+  const IconButton = /* @__PURE__ */ __name(({
+    onClick,
+    label,
+    children: icon
+  }) => {
+    const [isButtonHovered, setIsButtonHovered] = useState3(false);
+    const tooltipStyles = getTooltipStyles();
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        style: {
+          padding: "8px",
+          backgroundColor: buttonBg,
+          color: buttonColor,
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "32px",
+          height: "32px",
+          transition: "background-color 0.2s",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          boxShadow: isDark ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "0 2px 8px rgba(0, 0, 0, 0.2)",
+          position: "relative"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = buttonBgHover;
+          setIsButtonHovered(true);
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = buttonBg;
+          setIsButtonHovered(false);
+        },
+        onClick,
+        "aria-label": label
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          style: { display: "block" }
+        },
+        icon
+      ),
+      showLabels && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            ...tooltipStyles,
+            opacity: isButtonHovered ? 1 : 0
+          }
+        },
+        label
+      )
+    );
+  }, "IconButton");
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        height: "fit-content"
+      },
+      onMouseEnter: () => !attachTo && setIsHovered(true),
+      onMouseLeave: () => !attachTo && setIsHovered(false)
+    },
+    !isFullscreen && !isPip && /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, /* @__PURE__ */ React.createElement(IconButton, { onClick: handleFullscreen, label: "Fullscreen" }, /* @__PURE__ */ React.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ React.createElement("path", { d: "m21 3-7 7" }), /* @__PURE__ */ React.createElement("path", { d: "m3 21 7-7" }), /* @__PURE__ */ React.createElement("path", { d: "M9 21H3v-6" })), /* @__PURE__ */ React.createElement(IconButton, { onClick: handlePip, label: "Picture in Picture" }, /* @__PURE__ */ React.createElement("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }), /* @__PURE__ */ React.createElement("rect", { width: "10", height: "7", x: "12", y: "13", rx: "2" }))),
+    children
+  );
+}
+__name(WidgetFullscreenWrapper, "WidgetFullscreenWrapper");
+
+// src/react/WidgetDebugger.tsx
+import React2, { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+function WidgetDebugger({
+  children,
+  className = "",
+  position = "top-right",
+  attachTo,
+  showLabels = true
+}) {
+  const {
+    props,
+    output,
+    metadata,
+    state,
+    theme,
+    displayMode,
+    safeArea,
+    maxHeight,
+    userAgent,
+    locale,
+    isAvailable,
+    callTool,
+    sendFollowUpMessage,
+    openExternal,
+    requestDisplayMode,
+    setState
+  } = useWidget();
+  const [isHovered, setIsHovered] = useState4(false);
+  const [isOverlayOpen, setIsOverlayOpen] = useState4(false);
+  const containerRef = useRef3(null);
+  const overlayRef = useRef3(null);
+  const [windowOpenAiKeys, setWindowOpenAiKeys] = useState4([]);
+  const [actionResult, setActionResult] = useState4("");
+  const [toolName, setToolName] = useState4("get-my-city");
+  const [toolArgs, setToolArgs] = useState4("{}");
+  const [followUpMessage, setFollowUpMessage] = useState4(
+    "Test follow-up message"
+  );
+  const [externalUrl, setExternalUrl] = useState4(
+    "https://docs.mcp-use.com"
+  );
+  const isFullscreen = displayMode === "fullscreen" && isAvailable;
+  const isPip = displayMode === "pip" && isAvailable;
+  useEffect4(() => {
+    const timeoutId = setTimeout(() => {
+      if (typeof window !== "undefined" && window.openai) {
+        try {
+          const keys = Object.keys(window.openai);
+          setWindowOpenAiKeys(keys);
+        } catch (e) {
+          setWindowOpenAiKeys([]);
+        }
+      } else {
+        setWindowOpenAiKeys([]);
+      }
+    }, 100);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  const isDark = theme === "dark";
+  const buttonBg = isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.7)";
+  const buttonBgHover = isDark ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.9)";
+  const buttonColor = "white";
+  const getPositionStyles = /* @__PURE__ */ __name(() => {
+    const baseOffset = 16;
+    const topOffset = safeArea?.insets?.top ? `${Math.max(baseOffset, safeArea.insets.top + 8)}px` : `${baseOffset}px`;
+    const rightOffset = safeArea?.insets?.right ? `${Math.max(baseOffset, safeArea.insets.right + 8)}px` : `${baseOffset}px`;
+    const bottomOffset = safeArea?.insets?.bottom ? `${Math.max(baseOffset, safeArea.insets.bottom + 8)}px` : `${baseOffset}px`;
+    const leftOffset = safeArea?.insets?.left ? `${Math.max(baseOffset, safeArea.insets.left + 8)}px` : `${baseOffset}px`;
+    const styles = {
+      position: "absolute",
+      zIndex: 1e3,
+      display: "flex",
+      gap: "8px",
+      opacity: isHovered ? 1 : 0,
+      transition: "opacity 0.2s ease-in-out",
+      pointerEvents: isHovered ? "auto" : "none"
+    };
+    switch (position) {
+      case "top-left":
+        styles.top = topOffset;
+        styles.left = leftOffset;
+        break;
+      case "top-center":
+        styles.top = topOffset;
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+        break;
+      case "top-right":
+        styles.top = topOffset;
+        styles.right = rightOffset;
+        if (!isFullscreen && !isPip) {
+          styles.right = `calc(${rightOffset} + 80px)`;
+        }
+        break;
+      case "center-left":
+        styles.top = "50%";
+        styles.left = leftOffset;
+        styles.transform = "translateY(-50%)";
+        break;
+      case "center-right":
+        styles.top = "50%";
+        styles.right = rightOffset;
+        styles.transform = "translateY(-50%)";
+        break;
+      case "bottom-left":
+        styles.bottom = bottomOffset;
+        styles.left = leftOffset;
+        break;
+      case "bottom-center":
+        styles.bottom = bottomOffset;
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+        break;
+      case "bottom-right":
+        styles.bottom = bottomOffset;
+        styles.right = rightOffset;
+        break;
+      default:
+        styles.top = topOffset;
+        styles.right = rightOffset;
+        break;
+    }
+    return styles;
+  }, "getPositionStyles");
+  useEffect4(() => {
+    if (!attachTo) return;
+    const handleMouseEnter = /* @__PURE__ */ __name(() => setIsHovered(true), "handleMouseEnter");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => setIsHovered(false), "handleMouseLeave");
+    attachTo.addEventListener("mouseenter", handleMouseEnter);
+    attachTo.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      attachTo.removeEventListener("mouseenter", handleMouseEnter);
+      attachTo.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [attachTo]);
+  useEffect4(() => {
+    if (!isOverlayOpen) return;
+    const handleClickOutside = /* @__PURE__ */ __name((event) => {
+      if (overlayRef.current && !overlayRef.current.contains(event.target)) {
+        setIsOverlayOpen(false);
+      }
+    }, "handleClickOutside");
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOverlayOpen]);
+  useEffect4(() => {
+    if (isOverlayOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOverlayOpen]);
+  const handleToggleOverlay = /* @__PURE__ */ __name(() => {
+    setIsOverlayOpen(!isOverlayOpen);
+  }, "handleToggleOverlay");
+  const handleCallTool = /* @__PURE__ */ __name(async () => {
+    try {
+      setActionResult("Calling tool...");
+      const args = toolArgs.trim() ? JSON.parse(toolArgs) : {};
+      const result = await callTool(toolName, args);
+      setActionResult(`Success: ${JSON.stringify(result, null, 2)}`);
+    } catch (error) {
+      setActionResult(`Error: ${error.message}`);
+    }
+  }, "handleCallTool");
+  const handleSendFollowUpMessage = /* @__PURE__ */ __name(async () => {
+    try {
+      setActionResult("Sending follow-up message...");
+      await sendFollowUpMessage(followUpMessage);
+      setActionResult("Follow-up message sent successfully");
+    } catch (error) {
+      setActionResult(`Error: ${error.message}`);
+    }
+  }, "handleSendFollowUpMessage");
+  const handleOpenExternal = /* @__PURE__ */ __name(() => {
+    try {
+      openExternal(externalUrl);
+      setActionResult(`Opened external link: ${externalUrl}`);
+    } catch (error) {
+      setActionResult(`Error: ${error.message}`);
+    }
+  }, "handleOpenExternal");
+  const handleRequestDisplayMode = /* @__PURE__ */ __name(async (mode) => {
+    try {
+      setActionResult(`Requesting display mode: ${mode}...`);
+      const result = await requestDisplayMode(mode);
+      setActionResult(`Display mode granted: ${result.mode}`);
+    } catch (error) {
+      setActionResult(`Error: ${error.message}`);
+    }
+  }, "handleRequestDisplayMode");
+  const handleSetState = /* @__PURE__ */ __name(async () => {
+    try {
+      const newState = state ? { ...state, debugTimestamp: (/* @__PURE__ */ new Date()).toISOString() } : { debugTimestamp: (/* @__PURE__ */ new Date()).toISOString() };
+      setActionResult("Setting state...");
+      await setState(newState);
+      setActionResult(`State updated: ${JSON.stringify(newState, null, 2)}`);
+    } catch (error) {
+      setActionResult(`Error: ${error.message}`);
+    }
+  }, "handleSetState");
+  const getTooltipStyles = /* @__PURE__ */ __name(() => {
+    const baseStyles = {
+      position: "absolute",
+      padding: "4px 8px",
+      backgroundColor: "rgba(0, 0, 0, 0.9)",
+      color: "white",
+      borderRadius: "4px",
+      fontSize: "12px",
+      whiteSpace: "nowrap",
+      pointerEvents: "none",
+      transition: "opacity 0.2s ease-in-out"
+    };
+    switch (position) {
+      case "top-right":
+        return {
+          ...baseStyles,
+          top: "100%",
+          right: "0",
+          marginTop: "8px"
+        };
+      case "top-left":
+        return {
+          ...baseStyles,
+          top: "100%",
+          left: "0",
+          marginTop: "8px"
+        };
+      case "top-center":
+        return {
+          ...baseStyles,
+          top: "100%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          marginTop: "8px"
+        };
+      case "bottom-right":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          right: "0",
+          marginBottom: "8px"
+        };
+      case "bottom-left":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          left: "0",
+          marginBottom: "8px"
+        };
+      case "bottom-center":
+        return {
+          ...baseStyles,
+          bottom: "100%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          marginBottom: "8px"
+        };
+      case "center-left":
+        return {
+          ...baseStyles,
+          left: "100%",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginLeft: "8px"
+        };
+      case "center-right":
+        return {
+          ...baseStyles,
+          right: "100%",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginRight: "8px"
+        };
+      default:
+        return {
+          ...baseStyles,
+          top: "100%",
+          right: "0",
+          marginTop: "8px"
+        };
+    }
+  }, "getTooltipStyles");
+  const IconButton = /* @__PURE__ */ __name(({
+    onClick,
+    label,
+    children: icon
+  }) => {
+    const [isButtonHovered, setIsButtonHovered] = useState4(false);
+    const tooltipStyles = getTooltipStyles();
+    return /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        style: {
+          padding: "8px",
+          backgroundColor: buttonBg,
+          color: buttonColor,
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "32px",
+          height: "32px",
+          transition: "background-color 0.2s",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          boxShadow: isDark ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "0 2px 8px rgba(0, 0, 0, 0.2)",
+          position: "relative"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = buttonBgHover;
+          setIsButtonHovered(true);
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = buttonBg;
+          setIsButtonHovered(false);
+        },
+        onClick,
+        "aria-label": label
+      },
+      /* @__PURE__ */ React2.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          style: { display: "block" }
+        },
+        icon
+      ),
+      showLabels && /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          style: {
+            ...tooltipStyles,
+            opacity: isButtonHovered ? 1 : 0
+          }
+        },
+        label
+      )
+    );
+  }, "IconButton");
+  const formatValue = /* @__PURE__ */ __name((value) => {
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    if (typeof value === "object") {
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch {
+        return String(value);
+      }
+    }
+    return String(value);
+  }, "formatValue");
+  const formatUserAgent = /* @__PURE__ */ __name((ua) => {
+    if (!ua) return "N/A";
+    return `${ua.device?.type || "unknown"}`;
+  }, "formatUserAgent");
+  const formatSafeArea = /* @__PURE__ */ __name((sa) => {
+    if (!sa?.insets) return "N/A";
+    const { top, bottom, left, right } = sa.insets;
+    return `T:${top} B:${bottom} L:${left} R:${right}`;
+  }, "formatSafeArea");
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        height: "fit-content"
+      },
+      onMouseEnter: () => !attachTo && setIsHovered(true),
+      onMouseLeave: () => !attachTo && setIsHovered(false)
+    },
+    /* @__PURE__ */ React2.createElement("div", { style: getPositionStyles() }, /* @__PURE__ */ React2.createElement(IconButton, { onClick: handleToggleOverlay, label: "Debug Info" }, /* @__PURE__ */ React2.createElement("path", { d: "M12 20v-9" }), /* @__PURE__ */ React2.createElement("path", { d: "M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" }), /* @__PURE__ */ React2.createElement("path", { d: "M14.12 3.88 16 2" }), /* @__PURE__ */ React2.createElement("path", { d: "M21 21a4 4 0 0 0-3.81-4" }), /* @__PURE__ */ React2.createElement("path", { d: "M21 5a4 4 0 0 1-3.55 3.97" }), /* @__PURE__ */ React2.createElement("path", { d: "M22 13h-4" }), /* @__PURE__ */ React2.createElement("path", { d: "M3 21a4 4 0 0 1 3.81-4" }), /* @__PURE__ */ React2.createElement("path", { d: "M3 5a4 4 0 0 0 3.55 3.97" }), /* @__PURE__ */ React2.createElement("path", { d: "M6 13H2" }), /* @__PURE__ */ React2.createElement("path", { d: "m8 2 1.88 1.88" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13" }))),
+    children
+  ), isOverlayOpen && /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref: overlayRef,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "#000000",
+        color: "#ffffff",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        zIndex: 1e4,
+        overflow: "auto",
+        padding: "16px"
+      },
+      onClick: (e) => {
+        if (e.target === overlayRef.current) {
+          setIsOverlayOpen(false);
+        }
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => setIsOverlayOpen(false),
+        style: {
+          position: "absolute",
+          top: "16px",
+          right: "16px",
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+          color: "#ffffff",
+          border: "none",
+          borderRadius: "4px",
+          width: "32px",
+          height: "32px",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "18px",
+          lineHeight: 1
+        },
+        "aria-label": "Close"
+      },
+      "\xD7"
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        style: { maxWidth: "1200px", margin: "0 auto", paddingTop: "40px" }
+      },
+      /* @__PURE__ */ React2.createElement(
+        "h1",
+        {
+          style: {
+            fontSize: "18px",
+            fontWeight: "bold",
+            marginBottom: "16px",
+            borderBottom: "1px solid #333",
+            paddingBottom: "8px"
+          }
+        },
+        "Debug Info"
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "table",
+        {
+          style: {
+            width: "100%",
+            borderCollapse: "collapse",
+            borderSpacing: 0
+          }
+        },
+        /* @__PURE__ */ React2.createElement("tbody", null, /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Props"
+        ), /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(props)
+        )), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Output"
+        ), /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(output)
+        )), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Metadata"
+        ), /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(metadata)
+        )), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "State"
+        ), /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(state)
+        )), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Theme"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, theme)), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Display Mode"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, displayMode)), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Locale"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, locale)), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Max Height"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, maxHeight, "px")), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "User Agent"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, formatUserAgent(userAgent))), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Safe Area"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, formatSafeArea(safeArea))), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "API Available"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, isAvailable ? "Yes" : "No")), /* @__PURE__ */ React2.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ React2.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "window.openai Keys"
+        ), /* @__PURE__ */ React2.createElement("td", { style: { padding: "8px" } }, windowOpenAiKeys.length > 0 ? windowOpenAiKeys.join(", ") : "N/A")))
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "h2",
+        {
+          style: {
+            fontSize: "16px",
+            fontWeight: "bold",
+            marginTop: "32px",
+            marginBottom: "16px",
+            borderBottom: "1px solid #333",
+            paddingBottom: "8px"
+          }
+        },
+        "Actions"
+      ),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          style: { display: "flex", flexDirection: "column", gap: "12px" }
+        },
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "input",
+            {
+              type: "text",
+              value: toolName,
+              onChange: (e) => setToolName(e.target.value),
+              placeholder: "Tool name",
+              style: {
+                padding: "6px 8px",
+                backgroundColor: "#1a1a1a",
+                color: "#ffffff",
+                border: "1px solid #333",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                width: "150px"
+              }
+            }
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "input",
+            {
+              type: "text",
+              value: toolArgs,
+              onChange: (e) => setToolArgs(e.target.value),
+              placeholder: '{"key": "value"}',
+              style: {
+                padding: "6px 8px",
+                backgroundColor: "#1a1a1a",
+                color: "#ffffff",
+                border: "1px solid #333",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                flex: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: handleCallTool,
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }
+            },
+            "Call Tool"
+          )
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "input",
+            {
+              type: "text",
+              value: followUpMessage,
+              onChange: (e) => setFollowUpMessage(e.target.value),
+              placeholder: "Follow-up message",
+              style: {
+                padding: "6px 8px",
+                backgroundColor: "#1a1a1a",
+                color: "#ffffff",
+                border: "1px solid #333",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                flex: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: handleSendFollowUpMessage,
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }
+            },
+            "Send Follow-Up"
+          )
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "input",
+            {
+              type: "text",
+              value: externalUrl,
+              onChange: (e) => setExternalUrl(e.target.value),
+              placeholder: "External URL",
+              style: {
+                padding: "6px 8px",
+                backgroundColor: "#1a1a1a",
+                color: "#ffffff",
+                border: "1px solid #333",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                flex: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: handleOpenExternal,
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }
+            },
+            "Open Link"
+          )
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ React2.createElement("span", { style: { width: "150px", fontSize: "12px" } }, "Display Mode:"),
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: () => handleRequestDisplayMode("inline"),
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                flex: 1
+              }
+            },
+            "Inline"
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: () => handleRequestDisplayMode("pip"),
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                flex: 1
+              }
+            },
+            "PiP"
+          ),
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: () => handleRequestDisplayMode("fullscreen"),
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                flex: 1
+              }
+            },
+            "Fullscreen"
+          )
+        ),
+        /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: handleSetState,
+              style: {
+                padding: "6px 12px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }
+            },
+            "Set State (Add Timestamp)"
+          )
+        ),
+        actionResult && /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              padding: "8px",
+              backgroundColor: "#1a1a1a",
+              border: "1px solid #333",
+              borderRadius: "4px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              fontSize: "11px",
+              maxHeight: "200px",
+              overflow: "auto"
+            }
+          },
+          /* @__PURE__ */ React2.createElement(
+            "div",
+            {
+              style: {
+                fontWeight: "bold",
+                marginBottom: "4px",
+                color: "#aaa"
+              }
+            },
+            "Result:"
+          ),
+          actionResult,
+          /* @__PURE__ */ React2.createElement(
+            "button",
+            {
+              onClick: () => setActionResult(""),
+              style: {
+                marginTop: "8px",
+                padding: "4px 8px",
+                backgroundColor: "#333",
+                color: "#ffffff",
+                border: "1px solid #555",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: "11px"
+              }
+            },
+            "Clear"
+          )
+        )
+      )
+    )
+  ));
+}
+__name(WidgetDebugger, "WidgetDebugger");
+
+export {
+  useMcp,
+  useWidget,
+  useWidgetProps,
+  useWidgetTheme,
+  useWidgetState,
+  WidgetFullscreenWrapper,
+  WidgetDebugger
+};