mcp-use 1.5.0-canary.0 → 1.5.0-canary.1

package/dist/{chunk-RE7EYFDV.js → chunk-5XVM4A23.js}

@@ -609,6 +609,52 @@ function useMcp(options) {
 }
 __name(useMcp, "useMcp");
 
+// src/react/ErrorBoundary.tsx
+import React from "react";
+var ErrorBoundary = class extends React.Component {
+  static {
+    __name(this, "ErrorBoundary");
+  }
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Widget Error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ React.createElement("div", { className: "p-4 border border-red-500 bg-red-50 text-red-900 rounded-md dark:bg-red-900/20 dark:text-red-100" }, /* @__PURE__ */ React.createElement("h3", { className: "font-bold mb-2" }, "Widget Error"), /* @__PURE__ */ React.createElement("pre", { className: "text-sm whitespace-pre-wrap" }, this.state.error?.message));
+    }
+    return this.props.children;
+  }
+};
+
+// src/react/Image.tsx
+import React2 from "react";
+var Image = /* @__PURE__ */ __name(({ src, ...props }) => {
+  const publicUrl = typeof window !== "undefined" && window.__mcpPublicUrl ? window.__mcpPublicUrl : "";
+  const getFinalSrc = /* @__PURE__ */ __name((source) => {
+    if (!source) return source;
+    if (source.startsWith("http://") || source.startsWith("https://") || source.startsWith("data:")) {
+      return source;
+    }
+    if (!publicUrl) {
+      return source;
+    }
+    const cleanSrc = source.startsWith("/") ? source.slice(1) : source;
+    return `${publicUrl}/${cleanSrc}`;
+  }, "getFinalSrc");
+  const finalSrc = getFinalSrc(src);
+  return /* @__PURE__ */ React2.createElement("img", { src: finalSrc, ...props });
+}, "Image");
+
+// src/react/ThemeProvider.tsx
+import React3, { useEffect as useEffect3, useLayoutEffect, useState as useState3 } from "react";
+
 // src/react/useWidget.ts
 import {
   useCallback as useCallback2,
@@ -687,8 +733,9 @@ function useWidget(defaultProps) {
   const provider = useMemo(() => {
     return isOpenAiAvailable ? "openai" : "mcp-ui";
   }, [isOpenAiAvailable]);
+  const searchString = typeof window !== "undefined" ? window.location.search : "";
   const urlParams = useMemo(() => {
-    const urlParams2 = new URLSearchParams(window?.location?.search);
+    const urlParams2 = new URLSearchParams(searchString);
     if (urlParams2.has("mcpUseParams")) {
       return JSON.parse(urlParams2.get("mcpUseParams"));
     }
@@ -697,7 +744,7 @@ function useWidget(defaultProps) {
       toolOutput: {},
       toolId: ""
     };
-  }, [window?.location?.search]);
+  }, [searchString]);
   const toolInput = provider === "openai" ? useOpenAiGlobal("toolInput") : urlParams.toolInput;
   const toolOutput = provider === "openai" ? useOpenAiGlobal("toolOutput") : urlParams.toolOutput;
   const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
@@ -708,6 +755,12 @@ function useWidget(defaultProps) {
   const maxHeight = useOpenAiGlobal("maxHeight");
   const userAgent = useOpenAiGlobal("userAgent");
   const locale = useOpenAiGlobal("locale");
+  const mcp_url = useMemo(() => {
+    if (typeof window !== "undefined" && window.__mcpPublicUrl) {
+      return window.__mcpPublicUrl.replace(/\/mcp-use\/public$/, "");
+    }
+    return "";
+  }, []);
   const [localWidgetState, setLocalWidgetState] = useState2(null);
   useEffect2(() => {
     if (widgetState !== void 0) {
@@ -749,14 +802,15 @@ function useWidget(defaultProps) {
   );
   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");
       }
+      const currentState = widgetState !== void 0 ? widgetState : localWidgetState;
+      const newState = typeof state === "function" ? state(currentState) : state;
       setLocalWidgetState(newState);
       return window.openai.setWidgetState(newState);
     },
-    [localWidgetState]
+    [widgetState, localWidgetState]
   );
   return {
     // Props and state (with defaults)
@@ -775,6 +829,7 @@ function useWidget(defaultProps) {
       capabilities: { hover: true, touch: false }
     },
     locale: locale || "en",
+    mcp_url,
     // Actions
     callTool,
     sendFollowUpMessage,
@@ -806,283 +861,49 @@ function useWidgetState(defaultState) {
 }
 __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;
+// src/react/ThemeProvider.tsx
+var ThemeProvider = /* @__PURE__ */ __name(({
+  children
+}) => {
+  const { theme, isAvailable } = useWidget();
+  console.log("theme", theme);
+  const [systemPreference, setSystemPreference] = useState3(
+    () => {
+      if (typeof window === "undefined") return "light";
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
-    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"
-        };
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = /* @__PURE__ */ __name((e) => {
+      setSystemPreference(e.matches ? "dark" : "light");
+    }, "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const effectiveTheme = isAvailable ? theme : systemPreference;
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    if (effectiveTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
     }
-  }, "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");
+  }, [effectiveTheme]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
+}, "ThemeProvider");
 
-// src/react/WidgetDebugger.tsx
-import React2, { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
-function WidgetDebugger({
+// src/react/WidgetControls.tsx
+import React4, { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+function WidgetControls({
   children,
   className = "",
   position = "top-right",
   attachTo,
-  showLabels = true
+  showLabels = true,
+  debugger: enableDebugger = false,
+  viewControls = false
 }) {
   const {
     props,
@@ -1104,8 +925,8 @@ function WidgetDebugger({
   } = useWidget();
   const [isHovered, setIsHovered] = useState4(false);
   const [isOverlayOpen, setIsOverlayOpen] = useState4(false);
-  const containerRef = useRef3(null);
-  const overlayRef = useRef3(null);
+  const containerRef = useRef2(null);
+  const overlayRef = useRef2(null);
   const [windowOpenAiKeys, setWindowOpenAiKeys] = useState4([]);
   const [actionResult, setActionResult] = useState4("");
   const [toolName, setToolName] = useState4("get-my-city");
@@ -1118,6 +939,7 @@ function WidgetDebugger({
   );
   const isFullscreen = displayMode === "fullscreen" && isAvailable;
   const isPip = displayMode === "pip" && isAvailable;
+  const isDevMode = typeof window !== "undefined" && window.location.pathname.includes("/inspector/api/dev-widget/");
   useEffect4(() => {
     const timeoutId = setTimeout(() => {
       if (typeof window !== "undefined" && window.openai) {
@@ -1131,74 +953,87 @@ function WidgetDebugger({
         setWindowOpenAiKeys([]);
       }
     }, 100);
-    return () => clearTimeout(timeoutId);
+    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 getPositionClasses = /* @__PURE__ */ __name(() => {
+    const baseClasses = [
+      "absolute",
+      "z-[1000]",
+      "flex",
+      "gap-2",
+      "transition-opacity",
+      "duration-200",
+      "ease-in-out",
+      isHovered ? "opacity-100" : "opacity-0",
+      isHovered ? "pointer-events-auto" : "pointer-events-none"
+    ];
+    switch (position) {
+      case "top-left":
+        return [...baseClasses, "top-4", "left-4"];
+      case "top-center":
+        return [...baseClasses, "top-4", "left-1/2", "-translate-x-1/2"];
+      case "top-right":
+        return [...baseClasses, "top-4", "right-4"];
+      case "center-left":
+        return [...baseClasses, "top-1/2", "left-4", "-translate-y-1/2"];
+      case "center-right":
+        return [...baseClasses, "top-1/2", "right-4", "-translate-y-1/2"];
+      case "bottom-left":
+        return [...baseClasses, "bottom-4", "left-4"];
+      case "bottom-center":
+        return [...baseClasses, "bottom-4", "left-1/2", "-translate-x-1/2"];
+      case "bottom-right":
+        return [...baseClasses, "bottom-4", "right-4"];
+      default:
+        return [...baseClasses, "top-4", "right-4"];
+    }
+  }, "getPositionClasses");
+  const getPositionOffsetStyles = /* @__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"
-    };
+    const topOffset = safeArea?.insets?.top ? Math.max(baseOffset, safeArea.insets.top + 8) : baseOffset;
+    const rightOffset = safeArea?.insets?.right ? Math.max(baseOffset, safeArea.insets.right + 8) : baseOffset;
+    const bottomOffset = safeArea?.insets?.bottom ? Math.max(baseOffset, safeArea.insets.bottom + 8) : baseOffset;
+    const leftOffset = safeArea?.insets?.left ? Math.max(baseOffset, safeArea.insets.left + 8) : baseOffset;
+    const styles = {};
     switch (position) {
       case "top-left":
-        styles.top = topOffset;
-        styles.left = leftOffset;
+        styles.top = `${topOffset}px`;
+        styles.left = `${leftOffset}px`;
         break;
       case "top-center":
-        styles.top = topOffset;
-        styles.left = "50%";
-        styles.transform = "translateX(-50%)";
+        styles.top = `${topOffset}px`;
         break;
       case "top-right":
-        styles.top = topOffset;
-        styles.right = rightOffset;
-        if (!isFullscreen && !isPip) {
-          styles.right = `calc(${rightOffset} + 80px)`;
-        }
+        styles.top = `${topOffset}px`;
+        styles.right = `${rightOffset}px`;
         break;
       case "center-left":
-        styles.top = "50%";
-        styles.left = leftOffset;
-        styles.transform = "translateY(-50%)";
+        styles.left = `${leftOffset}px`;
         break;
       case "center-right":
-        styles.top = "50%";
-        styles.right = rightOffset;
-        styles.transform = "translateY(-50%)";
+        styles.right = `${rightOffset}px`;
         break;
       case "bottom-left":
-        styles.bottom = bottomOffset;
-        styles.left = leftOffset;
+        styles.bottom = `${bottomOffset}px`;
+        styles.left = `${leftOffset}px`;
         break;
       case "bottom-center":
-        styles.bottom = bottomOffset;
-        styles.left = "50%";
-        styles.transform = "translateX(-50%)";
+        styles.bottom = `${bottomOffset}px`;
         break;
       case "bottom-right":
-        styles.bottom = bottomOffset;
-        styles.right = rightOffset;
+        styles.bottom = `${bottomOffset}px`;
+        styles.right = `${rightOffset}px`;
         break;
       default:
-        styles.top = topOffset;
-        styles.right = rightOffset;
+        styles.top = `${topOffset}px`;
+        styles.right = `${rightOffset}px`;
         break;
     }
     return styles;
-  }, "getPositionStyles");
+  }, "getPositionOffsetStyles");
   useEffect4(() => {
     if (!attachTo) return;
     const handleMouseEnter = /* @__PURE__ */ __name(() => setIsHovered(true), "handleMouseEnter");
@@ -1281,128 +1116,97 @@ function WidgetDebugger({
       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"
-    };
+  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 getTooltipClasses = /* @__PURE__ */ __name(() => {
+    const baseClasses = [
+      "absolute",
+      "px-2",
+      "py-1",
+      "bg-black/90",
+      "text-white",
+      "rounded",
+      "text-xs",
+      "whitespace-nowrap",
+      "pointer-events-none",
+      "transition-opacity",
+      "duration-200",
+      "ease-in-out"
+    ];
     switch (position) {
       case "top-right":
-        return {
-          ...baseStyles,
-          top: "100%",
-          right: "0",
-          marginTop: "8px"
-        };
+        return [...baseClasses, "top-full", "right-0", "mt-2"];
       case "top-left":
-        return {
-          ...baseStyles,
-          top: "100%",
-          left: "0",
-          marginTop: "8px"
-        };
+        return [...baseClasses, "top-full", "left-0", "mt-2"];
       case "top-center":
-        return {
-          ...baseStyles,
-          top: "100%",
-          left: "50%",
-          transform: "translateX(-50%)",
-          marginTop: "8px"
-        };
+        return [
+          ...baseClasses,
+          "top-full",
+          "left-1/2",
+          "-translate-x-1/2",
+          "mt-2"
+        ];
       case "bottom-right":
-        return {
-          ...baseStyles,
-          bottom: "100%",
-          right: "0",
-          marginBottom: "8px"
-        };
+        return [...baseClasses, "bottom-full", "right-0", "mb-2"];
       case "bottom-left":
-        return {
-          ...baseStyles,
-          bottom: "100%",
-          left: "0",
-          marginBottom: "8px"
-        };
+        return [...baseClasses, "bottom-full", "left-0", "mb-2"];
       case "bottom-center":
-        return {
-          ...baseStyles,
-          bottom: "100%",
-          left: "50%",
-          transform: "translateX(-50%)",
-          marginBottom: "8px"
-        };
+        return [
+          ...baseClasses,
+          "bottom-full",
+          "left-1/2",
+          "-translate-x-1/2",
+          "mb-2"
+        ];
       case "center-left":
-        return {
-          ...baseStyles,
-          left: "100%",
-          top: "50%",
-          transform: "translateY(-50%)",
-          marginLeft: "8px"
-        };
+        return [
+          ...baseClasses,
+          "left-full",
+          "top-1/2",
+          "-translate-y-1/2",
+          "ml-2"
+        ];
       case "center-right":
-        return {
-          ...baseStyles,
-          right: "100%",
-          top: "50%",
-          transform: "translateY(-50%)",
-          marginRight: "8px"
-        };
+        return [
+          ...baseClasses,
+          "right-full",
+          "top-1/2",
+          "-translate-y-1/2",
+          "mr-2"
+        ];
       default:
-        return {
-          ...baseStyles,
-          top: "100%",
-          right: "0",
-          marginTop: "8px"
-        };
+        return [...baseClasses, "top-full", "right-0", "mt-2"];
     }
-  }, "getTooltipStyles");
+  }, "getTooltipClasses");
   const IconButton = /* @__PURE__ */ __name(({
     onClick,
     label,
     children: icon
   }) => {
     const [isButtonHovered, setIsButtonHovered] = useState4(false);
-    const tooltipStyles = getTooltipStyles();
-    return /* @__PURE__ */ React2.createElement(
+    const tooltipClasses = getTooltipClasses();
+    return /* @__PURE__ */ React4.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);
-        },
+        className: `p-2 ${isDark ? "bg-white/10 hover:bg-white/20" : "bg-black/70 hover:bg-black/90"} text-white border-none rounded-lg cursor-pointer flex items-center justify-center w-8 h-8 transition-colors duration-200 backdrop-blur-md ${isDark ? "shadow-[0_2px_8px_rgba(0,0,0,0.3)]" : "shadow-[0_2px_8px_rgba(0,0,0,0.2)]"} relative`,
+        onMouseEnter: () => setIsButtonHovered(true),
+        onMouseLeave: () => setIsButtonHovered(false),
         onClick,
         "aria-label": label
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React4.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -1414,17 +1218,14 @@ function WidgetDebugger({
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          style: { display: "block" }
+          className: "block"
         },
         icon
       ),
-      showLabels && /* @__PURE__ */ React2.createElement(
+      showLabels && /* @__PURE__ */ React4.createElement(
         "span",
         {
-          style: {
-            ...tooltipStyles,
-            opacity: isButtonHovered ? 1 : 0
-          }
+          className: `${tooltipClasses.join(" ")} ${isButtonHovered ? "opacity-100" : "opacity-0"}`
         },
         label
       )
@@ -1451,577 +1252,258 @@ function WidgetDebugger({
     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(
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
     "div",
     {
       ref: containerRef,
-      className,
-      style: {
-        position: "relative",
-        height: "fit-content"
-      },
+      className: `${className} relative h-fit`,
       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" }))),
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        className: getPositionClasses().join(" "),
+        style: getPositionOffsetStyles()
+      },
+      !isDevMode && /* @__PURE__ */ React4.createElement(React4.Fragment, null, !isFullscreen && !isPip && /* @__PURE__ */ React4.createElement(React4.Fragment, null, (viewControls === true || viewControls === "fullscreen") && /* @__PURE__ */ React4.createElement(IconButton, { onClick: handleFullscreen, label: "Fullscreen" }, /* @__PURE__ */ React4.createElement("path", { d: "M15 3h6v6" }), /* @__PURE__ */ React4.createElement("path", { d: "m21 3-7 7" }), /* @__PURE__ */ React4.createElement("path", { d: "m3 21 7-7" }), /* @__PURE__ */ React4.createElement("path", { d: "M9 21H3v-6" })), (viewControls === true || viewControls === "pip") && /* @__PURE__ */ React4.createElement(IconButton, { onClick: handlePip, label: "Picture in Picture" }, /* @__PURE__ */ React4.createElement("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }), /* @__PURE__ */ React4.createElement("rect", { width: "10", height: "7", x: "12", y: "13", rx: "2" }))), enableDebugger && /* @__PURE__ */ React4.createElement(IconButton, { onClick: handleToggleOverlay, label: "Debug Info" }, /* @__PURE__ */ React4.createElement("path", { d: "M12 20v-9" }), /* @__PURE__ */ React4.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__ */ React4.createElement("path", { d: "M14.12 3.88 16 2" }), /* @__PURE__ */ React4.createElement("path", { d: "M21 21a4 4 0 0 0-3.81-4" }), /* @__PURE__ */ React4.createElement("path", { d: "M21 5a4 4 0 0 1-3.55 3.97" }), /* @__PURE__ */ React4.createElement("path", { d: "M22 13h-4" }), /* @__PURE__ */ React4.createElement("path", { d: "M3 21a4 4 0 0 1 3.81-4" }), /* @__PURE__ */ React4.createElement("path", { d: "M3 5a4 4 0 0 0 3.55 3.97" }), /* @__PURE__ */ React4.createElement("path", { d: "M6 13H2" }), /* @__PURE__ */ React4.createElement("path", { d: "m8 2 1.88 1.88" }), /* @__PURE__ */ React4.createElement("path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13" })))
+    ),
     children
-  ), isOverlayOpen && /* @__PURE__ */ React2.createElement(
+  ), isOverlayOpen && enableDebugger && /* @__PURE__ */ React4.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"
-      },
+      className: "fixed inset-0 bg-black text-white font-mono text-xs z-[10000] overflow-auto p-4",
       onClick: (e) => {
         if (e.target === overlayRef.current) {
           setIsOverlayOpen(false);
         }
       }
     },
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React4.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
-        },
+        className: "absolute top-4 right-4 bg-white/10 text-white border-none rounded w-8 h-8 cursor-pointer flex items-center justify-center text-lg leading-none",
         "aria-label": "Close"
       },
       "\xD7"
     ),
-    /* @__PURE__ */ React2.createElement(
-      "div",
+    /* @__PURE__ */ React4.createElement("div", { className: "max-w-[1200px] mx-auto pt-10" }, /* @__PURE__ */ React4.createElement("h1", { className: "text-lg font-bold mb-4 border-b border-gray-700 pb-2" }, "Debug Info"), /* @__PURE__ */ React4.createElement("table", { className: "w-full border-collapse border-spacing-0" }, /* @__PURE__ */ React4.createElement("tbody", null, /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Props"), /* @__PURE__ */ React4.createElement("td", { className: "p-2 whitespace-pre-wrap break-all" }, formatValue(props))), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Output"), /* @__PURE__ */ React4.createElement("td", { className: "p-2 whitespace-pre-wrap break-all" }, formatValue(output))), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Metadata"), /* @__PURE__ */ React4.createElement("td", { className: "p-2 whitespace-pre-wrap break-all" }, formatValue(metadata))), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "State"), /* @__PURE__ */ React4.createElement("td", { className: "p-2 whitespace-pre-wrap break-all" }, formatValue(state))), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Theme"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, theme)), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Display Mode"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, displayMode)), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Locale"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, locale)), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Max Height"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, maxHeight, "px")), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "User Agent"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, formatUserAgent(userAgent))), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "Safe Area"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, formatSafeArea(safeArea))), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "API Available"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, isAvailable ? "Yes" : "No")), /* @__PURE__ */ React4.createElement("tr", { className: "border-b border-gray-700" }, /* @__PURE__ */ React4.createElement("td", { className: "p-2 font-bold w-[200px] align-top" }, "window.openai Keys"), /* @__PURE__ */ React4.createElement("td", { className: "p-2" }, windowOpenAiKeys.length > 0 ? windowOpenAiKeys.join(", ") : "N/A")))), /* @__PURE__ */ React4.createElement("h2", { className: "text-base font-bold mt-8 mb-4 border-b border-gray-700 pb-2" }, "Actions"), /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React4.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React4.createElement(
+      "input",
       {
-        style: { maxWidth: "1200px", margin: "0 auto", paddingTop: "40px" }
+        type: "text",
+        value: toolName,
+        onChange: (e) => setToolName(e.target.value),
+        placeholder: "Tool name",
+        className: "py-1.5 px-2 bg-[#1a1a1a] text-white border border-gray-700 rounded font-mono text-xs w-[150px]"
+      }
+    ), /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        type: "text",
+        value: toolArgs,
+        onChange: (e) => setToolArgs(e.target.value),
+        placeholder: '{"key": "value"}',
+        className: "py-1.5 px-2 bg-[#1a1a1a] text-white border border-gray-700 rounded font-mono text-xs flex-1"
+      }
+    ), /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: handleCallTool,
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs"
       },
-      /* @__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"
-          )
-        )
-      )
-    )
+      "Call Tool"
+    )), /* @__PURE__ */ React4.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        type: "text",
+        value: followUpMessage,
+        onChange: (e) => setFollowUpMessage(e.target.value),
+        placeholder: "Follow-up message",
+        className: "py-1.5 px-2 bg-[#1a1a1a] text-white border border-gray-700 rounded font-mono text-xs flex-1"
+      }
+    ), /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: handleSendFollowUpMessage,
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs"
+      },
+      "Send Follow-Up"
+    )), /* @__PURE__ */ React4.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        type: "text",
+        value: externalUrl,
+        onChange: (e) => setExternalUrl(e.target.value),
+        placeholder: "External URL",
+        className: "py-1.5 px-2 bg-[#1a1a1a] text-white border border-gray-700 rounded font-mono text-xs flex-1"
+      }
+    ), /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: handleOpenExternal,
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs"
+      },
+      "Open Link"
+    )), /* @__PURE__ */ React4.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React4.createElement("span", { className: "w-[150px] text-xs" }, "Display Mode:"), /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: () => handleRequestDisplayMode("inline"),
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs flex-1"
+      },
+      "Inline"
+    ), /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: () => handleRequestDisplayMode("pip"),
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs flex-1"
+      },
+      "PiP"
+    ), /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: () => handleRequestDisplayMode("fullscreen"),
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs flex-1"
+      },
+      "Fullscreen"
+    )), /* @__PURE__ */ React4.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: handleSetState,
+        className: "py-1.5 px-3 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-xs"
+      },
+      "Set State (Add Timestamp)"
+    )), actionResult && /* @__PURE__ */ React4.createElement("div", { className: "mt-2 p-2 bg-[#1a1a1a] border border-gray-700 rounded whitespace-pre-wrap break-all text-[11px] max-h-[200px] overflow-auto" }, /* @__PURE__ */ React4.createElement("div", { className: "font-bold mb-1 text-gray-400" }, "Result:"), actionResult, /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        onClick: () => setActionResult(""),
+        className: "mt-2 py-1 px-2 bg-gray-800 text-white border border-gray-600 rounded cursor-pointer font-mono text-[11px]"
+      },
+      "Clear"
+    ))))
   ));
 }
-__name(WidgetDebugger, "WidgetDebugger");
+__name(WidgetControls, "WidgetControls");
+
+// src/react/McpUseProvider.tsx
+import React5, { StrictMode, useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { BrowserRouter } from "react-router-dom";
+function getBasename() {
+  if (typeof window === "undefined") return "/";
+  const path = window.location.pathname;
+  const match = path.match(/^(\/inspector\/api\/dev-widget\/[^/]+)/);
+  if (match) {
+    return match[1];
+  }
+  return "/";
+}
+__name(getBasename, "getBasename");
+var HEIGHT_DEBOUNCE_MS = 150;
+var MIN_HEIGHT_CHANGE_PX = 5;
+function McpUseProvider({
+  children,
+  debugger: enableDebugger = false,
+  viewControls = false,
+  autoSize = false
+}) {
+  const basename = getBasename();
+  const containerRef = useRef3(null);
+  const lastHeightRef = useRef3(0);
+  const debounceTimeoutRef = useRef3(null);
+  const notificationInProgressRef = useRef3(false);
+  const notifyHeight = useCallback3((height) => {
+    if (typeof window !== "undefined" && window.openai?.notifyIntrinsicHeight) {
+      notificationInProgressRef.current = true;
+      window.openai.notifyIntrinsicHeight(height).then(() => {
+        notificationInProgressRef.current = false;
+      }).catch((error) => {
+        notificationInProgressRef.current = false;
+        console.error(
+          "[McpUseProvider] Failed to notify intrinsic height:",
+          error
+        );
+      });
+    }
+  }, []);
+  const debouncedNotifyHeight = useCallback3(
+    (height) => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      debounceTimeoutRef.current = setTimeout(() => {
+        const heightDiff = Math.abs(height - lastHeightRef.current);
+        if (heightDiff >= MIN_HEIGHT_CHANGE_PX && height > 0) {
+          lastHeightRef.current = height;
+          notifyHeight(height);
+        }
+      }, HEIGHT_DEBOUNCE_MS);
+    },
+    [notifyHeight]
+  );
+  useEffect5(() => {
+    if (!autoSize) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      if (notificationInProgressRef.current) {
+        return;
+      }
+      for (const entry of entries) {
+        const height = entry.contentRect.height;
+        const scrollHeight = entry.target.scrollHeight;
+        const intrinsicHeight = Math.max(height, scrollHeight);
+        debouncedNotifyHeight(intrinsicHeight);
+      }
+    });
+    observer.observe(container);
+    const initialHeight = Math.max(
+      container.offsetHeight,
+      container.scrollHeight
+    );
+    if (initialHeight > 0) {
+      debouncedNotifyHeight(initialHeight);
+    }
+    return () => {
+      observer.disconnect();
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+      notificationInProgressRef.current = false;
+    };
+  }, [autoSize, debouncedNotifyHeight]);
+  let content = children;
+  content = /* @__PURE__ */ React5.createElement(ErrorBoundary, null, content);
+  if (enableDebugger || viewControls) {
+    content = /* @__PURE__ */ React5.createElement(WidgetControls, { debugger: enableDebugger, viewControls }, content);
+  }
+  content = /* @__PURE__ */ React5.createElement(BrowserRouter, { basename }, content);
+  content = /* @__PURE__ */ React5.createElement(ThemeProvider, null, content);
+  if (autoSize) {
+    const containerStyle = {
+      width: "100%",
+      minHeight: 0
+    };
+    content = /* @__PURE__ */ React5.createElement("div", { ref: containerRef, style: containerStyle }, content);
+  }
+  return /* @__PURE__ */ React5.createElement(StrictMode, null, content);
+}
+__name(McpUseProvider, "McpUseProvider");
 
 export {
   useMcp,
+  ErrorBoundary,
+  Image,
   useWidget,
   useWidgetProps,
   useWidgetTheme,
   useWidgetState,
-  WidgetFullscreenWrapper,
-  WidgetDebugger
+  ThemeProvider,
+  WidgetControls,
+  McpUseProvider
 };