mcp-use 1.3.3-canary.3 → 1.3.3-canary.5

package/dist/src/react/index.cjs

@@ -31,6 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
+  WidgetDebugger: () => WidgetDebugger,
+  WidgetFullscreenWrapper: () => WidgetFullscreenWrapper,
   onMcpAuthorization: () => onMcpAuthorization,
   useMcp: () => useMcp,
   useWidget: () => useWidget,
@@ -2351,11 +2353,43 @@ function useOpenAiGlobal(key) {
 }
 __name(useOpenAiGlobal, "useOpenAiGlobal");
 function useWidget(defaultProps) {
-  console.log(window?.location?.search, window.openai);
-  const isOpenAiAvailable = (0, import_react2.useMemo)(
-    () => typeof window !== "undefined" && !!window.openai,
-    []
+  const [isOpenAiAvailable, setIsOpenAiAvailable] = (0, import_react2.useState)(
+    () => typeof window !== "undefined" && !!window.openai
   );
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useMemo)(() => {
     return isOpenAiAvailable ? "openai" : "mcp-ui";
   }, [isOpenAiAvailable]);
@@ -2370,7 +2404,6 @@ function useWidget(defaultProps) {
       toolId: ""
     };
   }, [window?.location?.search]);
-  console.log(urlParams);
   const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
   const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
   const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
@@ -2478,3 +2511,1213 @@ function useWidgetState(defaultState) {
   return [state, setState];
 }
 __name(useWidgetState, "useWidgetState");
+
+// src/react/WidgetFullscreenWrapper.tsx
+var import_react3 = __toESM(require("react"), 1);
+function WidgetFullscreenWrapper({
+  children,
+  className = "",
+  position = "top-right",
+  attachTo,
+  showLabels = true
+}) {
+  const { displayMode, requestDisplayMode, theme, safeArea, isAvailable } = useWidget();
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const containerRef = (0, import_react3.useRef)(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");
+  (0, import_react3.useEffect)(() => {
+    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] = (0, import_react3.useState)(false);
+    const tooltipStyles = getTooltipStyles();
+    return /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.createElement(
+        "span",
+        {
+          style: {
+            ...tooltipStyles,
+            opacity: isButtonHovered ? 1 : 0
+          }
+        },
+        label
+      )
+    );
+  }, "IconButton");
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        height: "fit-content"
+      },
+      onMouseEnter: () => !attachTo && setIsHovered(true),
+      onMouseLeave: () => !attachTo && setIsHovered(false)
+    },
+    !isFullscreen && !isPip && /* @__PURE__ */ import_react3.default.createElement("div", { style: getPositionStyles() }, /* @__PURE__ */ import_react3.default.createElement(IconButton, { onClick: handleFullscreen, label: "Fullscreen" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "m21 3-7 7" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "m3 21 7-7" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "M9 21H3v-6" })), /* @__PURE__ */ import_react3.default.createElement(IconButton, { onClick: handlePip, label: "Picture in Picture" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }), /* @__PURE__ */ import_react3.default.createElement("rect", { width: "10", height: "7", x: "12", y: "13", rx: "2" }))),
+    children
+  );
+}
+__name(WidgetFullscreenWrapper, "WidgetFullscreenWrapper");
+
+// src/react/WidgetDebugger.tsx
+var import_react4 = __toESM(require("react"), 1);
+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] = (0, import_react4.useState)(false);
+  const [isOverlayOpen, setIsOverlayOpen] = (0, import_react4.useState)(false);
+  const containerRef = (0, import_react4.useRef)(null);
+  const overlayRef = (0, import_react4.useRef)(null);
+  const [windowOpenAiKeys, setWindowOpenAiKeys] = (0, import_react4.useState)([]);
+  const [actionResult, setActionResult] = (0, import_react4.useState)("");
+  const [toolName, setToolName] = (0, import_react4.useState)("get-my-city");
+  const [toolArgs, setToolArgs] = (0, import_react4.useState)("{}");
+  const [followUpMessage, setFollowUpMessage] = (0, import_react4.useState)(
+    "Test follow-up message"
+  );
+  const [externalUrl, setExternalUrl] = (0, import_react4.useState)(
+    "https://docs.mcp-use.com"
+  );
+  const isFullscreen = displayMode === "fullscreen" && isAvailable;
+  const isPip = displayMode === "pip" && isAvailable;
+  (0, import_react4.useEffect)(() => {
+    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");
+  (0, import_react4.useEffect)(() => {
+    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]);
+  (0, import_react4.useEffect)(() => {
+    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]);
+  (0, import_react4.useEffect)(() => {
+    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] = (0, import_react4.useState)(false);
+    const tooltipStyles = getTooltipStyles();
+    return /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        height: "fit-content"
+      },
+      onMouseEnter: () => !attachTo && setIsHovered(true),
+      onMouseLeave: () => !attachTo && setIsHovered(false)
+    },
+    /* @__PURE__ */ import_react4.default.createElement("div", { style: getPositionStyles() }, /* @__PURE__ */ import_react4.default.createElement(IconButton, { onClick: handleToggleOverlay, label: "Debug Info" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M12 20v-9" }), /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement("path", { d: "M14.12 3.88 16 2" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M21 21a4 4 0 0 0-3.81-4" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M21 5a4 4 0 0 1-3.55 3.97" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M22 13h-4" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M3 21a4 4 0 0 1 3.81-4" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M3 5a4 4 0 0 0 3.55 3.97" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M6 13H2" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "m8 2 1.88 1.88" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13" }))),
+    children
+  ), isOverlayOpen && /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: { maxWidth: "1200px", margin: "0 auto", paddingTop: "40px" }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "h1",
+        {
+          style: {
+            fontSize: "18px",
+            fontWeight: "bold",
+            marginBottom: "16px",
+            borderBottom: "1px solid #333",
+            paddingBottom: "8px"
+          }
+        },
+        "Debug Info"
+      ),
+      /* @__PURE__ */ import_react4.default.createElement(
+        "table",
+        {
+          style: {
+            width: "100%",
+            borderCollapse: "collapse",
+            borderSpacing: 0
+          }
+        },
+        /* @__PURE__ */ import_react4.default.createElement("tbody", null, /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Props"
+        ), /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(props)
+        )), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Output"
+        ), /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(output)
+        )), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Metadata"
+        ), /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(metadata)
+        )), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "State"
+        ), /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            }
+          },
+          formatValue(state)
+        )), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Theme"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, theme)), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Display Mode"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, displayMode)), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Locale"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, locale)), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Max Height"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, maxHeight, "px")), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "User Agent"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, formatUserAgent(userAgent))), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "Safe Area"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, formatSafeArea(safeArea))), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "API Available"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, isAvailable ? "Yes" : "No")), /* @__PURE__ */ import_react4.default.createElement("tr", { style: { borderBottom: "1px solid #333" } }, /* @__PURE__ */ import_react4.default.createElement(
+          "td",
+          {
+            style: {
+              padding: "8px",
+              fontWeight: "bold",
+              width: "200px",
+              verticalAlign: "top"
+            }
+          },
+          "window.openai Keys"
+        ), /* @__PURE__ */ import_react4.default.createElement("td", { style: { padding: "8px" } }, windowOpenAiKeys.length > 0 ? windowOpenAiKeys.join(", ") : "N/A")))
+      ),
+      /* @__PURE__ */ import_react4.default.createElement(
+        "h2",
+        {
+          style: {
+            fontSize: "16px",
+            fontWeight: "bold",
+            marginTop: "32px",
+            marginBottom: "16px",
+            borderBottom: "1px solid #333",
+            paddingBottom: "8px"
+          }
+        },
+        "Actions"
+      ),
+      /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          style: { display: "flex", flexDirection: "column", gap: "12px" }
+        },
+        /* @__PURE__ */ import_react4.default.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ import_react4.default.createElement("span", { style: { width: "150px", fontSize: "12px" } }, "Display Mode:"),
+          /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+          "div",
+          {
+            style: { display: "flex", gap: "8px", alignItems: "center" }
+          },
+          /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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__ */ import_react4.default.createElement(
+            "div",
+            {
+              style: {
+                fontWeight: "bold",
+                marginBottom: "4px",
+                color: "#aaa"
+              }
+            },
+            "Result:"
+          ),
+          actionResult,
+          /* @__PURE__ */ import_react4.default.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");