@howone/sdk 0.5.2 → 0.6.0

package/dist/index.js

@@ -284,13 +284,13 @@ var index_exports = {};
 __export(index_exports, {
   AUTH_TOKEN_KEY: () => AUTH_TOKEN_KEY,
   ClayxButton: () => ClayxButton,
-  ClayxToast: () => ClayxToast,
   DefaultErrorFallback: () => DefaultErrorFallback,
   ElementSelector: () => ElementSelector,
   ElementSelectorProvider: () => ElementSelectorProvider,
   ErrorBoundary: () => ErrorBoundary,
   FloatingButton: () => FloatingButton,
   GlobalToastContainer: () => GlobalToastContainer,
+  GoeyToast: () => GoeyToast,
   HowOneProvider: () => HowOneProvider,
   Loading: () => Loading,
   LoadingSpinner: () => LoadingSpinner,
@@ -1031,7 +1031,7 @@ var LoginForm = ({
 };
 
 // src/components/auth/HowoneProvider.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 init_auth();
 
 // src/components/theme/ThemeProvider.tsx
@@ -1088,33 +1088,68 @@ var useTheme = () => {
 };
 
 // src/components/ui/Toast/GlobalToastContainer.tsx
-var import_react_toastify = require("react-toastify");
+var import_goey_toast = require("goey-toast");
+var import_styles = require("goey-toast/styles.css");
+
+// src/components/theme/ThemeToggle.tsx
+var React2 = __toESM(require("react"));
+var import_react5 = require("@iconify/react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function GlobalToastContainer() {
+function ThemeToggle({ className }) {
+  const { setTheme, theme } = useTheme();
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Icon, { icon: "solar:sun-bold", width: 20, height: 20 });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_react_toastify.ToastContainer,
+    "div",
+    {
+      className: `cursor-pointer ${className || ""}`,
+      onClick: handleToggle,
+      children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Icon, { icon: "solar:sun-bold", width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Icon, { icon: "solar:moon-linear", width: 20, height: 20 })
+    }
+  );
+}
+
+// src/components/ui/Toast/GlobalToastContainer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function GlobalToastContainer() {
+  const { theme } = useTheme();
+  const resolvedTheme = theme === "dark" ? "dark" : "light";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_goey_toast.GoeyToaster,
     {
-      newestOnTop: false,
-      closeButton: false
+      position: "bottom-right",
+      theme: resolvedTheme
     }
   );
 }
 
 // src/components/ElementSelectorProvider.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/ElementSelector.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ElementSelector = ({
   active,
   onSelect,
   onCancel
 }) => {
-  const [hoveredElement, setHoveredElement] = (0, import_react5.useState)(null);
-  const [highlightRect, setHighlightRect] = (0, import_react5.useState)(null);
-  const overlayRef = (0, import_react5.useRef)(null);
-  const getSourceLocation = (0, import_react5.useCallback)((element) => {
+  const [hoveredElement, setHoveredElement] = (0, import_react6.useState)(null);
+  const [highlightRect, setHighlightRect] = (0, import_react6.useState)(null);
+  const overlayRef = (0, import_react6.useRef)(null);
+  const getSourceLocation = (0, import_react6.useCallback)((element) => {
     let current = element;
     while (current && current !== document.body) {
       const sourceLocationAttr = current.getAttribute("data-source-location");
@@ -1129,7 +1164,7 @@ var ElementSelector = ({
     }
     return null;
   }, []);
-  const handleMouseMove = (0, import_react5.useCallback)((e) => {
+  const handleMouseMove = (0, import_react6.useCallback)((e) => {
     if (!active) return;
     const elements = document.elementsFromPoint(e.clientX, e.clientY);
     const targetElement = elements.find(
@@ -1141,7 +1176,7 @@ var ElementSelector = ({
       setHighlightRect(rect);
     }
   }, [active, hoveredElement]);
-  const handleClick = (0, import_react5.useCallback)((e) => {
+  const handleClick = (0, import_react6.useCallback)((e) => {
     if (!active || !hoveredElement) return;
     e.preventDefault();
     e.stopPropagation();
@@ -1169,7 +1204,7 @@ var ElementSelector = ({
       }
     }
   }, [active, hoveredElement, getSourceLocation, onSelect, onCancel]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (active) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("click", handleClick, true);
@@ -1185,8 +1220,8 @@ var ElementSelector = ({
     }
   }, [active, handleMouseMove, handleClick]);
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref: overlayRef,
@@ -1203,7 +1238,7 @@ var ElementSelector = ({
         }
       }
     ),
-    highlightRect && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    highlightRect && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: {
@@ -1221,7 +1256,7 @@ var ElementSelector = ({
         }
       }
     ),
-    hoveredElement && highlightRect && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    hoveredElement && highlightRect && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: {
@@ -1247,17 +1282,17 @@ var ElementSelector = ({
 };
 
 // src/hooks/use-element-selector.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useElementSelector() {
-  const [isSelecting, setIsSelecting] = (0, import_react6.useState)(false);
-  const [selectedElement, setSelectedElement] = (0, import_react6.useState)(null);
-  const startSelecting = (0, import_react6.useCallback)(() => {
+  const [isSelecting, setIsSelecting] = (0, import_react7.useState)(false);
+  const [selectedElement, setSelectedElement] = (0, import_react7.useState)(null);
+  const startSelecting = (0, import_react7.useCallback)(() => {
     setIsSelecting(true);
   }, []);
-  const stopSelecting = (0, import_react6.useCallback)(() => {
+  const stopSelecting = (0, import_react7.useCallback)(() => {
     setIsSelecting(false);
   }, []);
-  const clearSelection = (0, import_react6.useCallback)(() => {
+  const clearSelection = (0, import_react7.useCallback)(() => {
     setSelectedElement(null);
   }, []);
   return {
@@ -1278,10 +1313,10 @@ function sendElementSelectionToParent(data) {
 }
 
 // src/components/ElementSelectorProvider.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ElementSelectorProvider = ({ children }) => {
-  const [isSelecting, setIsSelecting] = (0, import_react7.useState)(false);
-  const handleCancel = (0, import_react7.useCallback)(() => {
+  const [isSelecting, setIsSelecting] = (0, import_react8.useState)(false);
+  const handleCancel = (0, import_react8.useCallback)(() => {
     setIsSelecting(false);
     if (window.parent && window.parent !== window) {
       window.parent.postMessage({
@@ -1289,10 +1324,10 @@ var ElementSelectorProvider = ({ children }) => {
       }, "*");
     }
   }, []);
-  const handleSelect = (0, import_react7.useCallback)((data) => {
+  const handleSelect = (0, import_react8.useCallback)((data) => {
     sendElementSelectionToParent(data);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleStartSelection = () => {
       setIsSelecting(true);
     };
@@ -1315,9 +1350,9 @@ var ElementSelectorProvider = ({ children }) => {
       window.removeEventListener("message", handleMessage);
     };
   }, [handleCancel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ElementSelector,
       {
         active: isSelecting,
@@ -1330,8 +1365,9 @@ var ElementSelectorProvider = ({ children }) => {
 
 // src/components/auth/HowoneProvider.tsx
 init_config();
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var HowoneContext = (0, import_react8.createContext)(null);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var HowoneContext = (0, import_react9.createContext)(null);
+var consumedTokenCache = /* @__PURE__ */ new Set();
 var redirectOverlayStylesInjected = false;
 var injectRedirectOverlayStyles = () => {
   if (redirectOverlayStylesInjected || typeof document === "undefined") return;
@@ -1391,38 +1427,52 @@ var HowOneProvider = ({
   forceDefaultTheme = false,
   redirectOnUnauthenticated = true
 }) => {
-  const [user, setUser] = (0, import_react8.useState)(() => parseUserFromToken(getToken()));
-  const [token, setTokenState] = (0, import_react8.useState)(() => getToken());
-  const [hasCheckedUrlToken, setHasCheckedUrlToken] = (0, import_react8.useState)(false);
-  const [pendingRedirect, setPendingRedirect] = (0, import_react8.useState)(false);
-  const authCookieRoot = (0, import_react8.useMemo)(() => {
+  const [user, setUser] = (0, import_react9.useState)(() => parseUserFromToken(getToken()));
+  const [token, setTokenState] = (0, import_react9.useState)(() => getToken());
+  const [hasCheckedUrlToken, setHasCheckedUrlToken] = (0, import_react9.useState)(false);
+  const [pendingRedirect, setPendingRedirect] = (0, import_react9.useState)(false);
+  const authCookieRoot = (0, import_react9.useMemo)(() => {
     const env3 = getGlobalEnvironment() ?? "dev";
     return setEnvironment(env3).AUTH_COOKIE_ROOT_VALUE;
   }, []);
-  const consumeTokenToCookie = (0, import_react8.useCallback)(async (value2) => {
+  const consumeTokenToCookie = (0, import_react9.useCallback)(async (value2) => {
+    if (!value2) return;
+    if (consumedTokenCache.has(value2)) return;
+    consumedTokenCache.add(value2);
     try {
-      await fetch(`${authCookieRoot}/consume`, {
+      const response = await fetch(`${authCookieRoot}/consume`, {
         method: "POST",
         credentials: "include",
         headers: {
           Authorization: `Bearer ${value2}`
         }
       });
+      if (!response.ok) {
+        console.info("[HowOneProvider] consume token request failed:", response.status, response.statusText);
+      }
     } catch (error) {
-      console.error("[HowOneProvider] Failed to consume token:", error);
+      try {
+        const inIframe = typeof window !== "undefined" && window.top !== window.self;
+        if (inIframe) {
+          console.info("[HowOneProvider] consume token skipped in iframe context (likely third-party cookie/CORS policy).");
+          return;
+        }
+      } catch {
+      }
+      console.warn("[HowOneProvider] Failed to consume token:", error);
     }
   }, [authCookieRoot]);
-  const logoutFromCookie = (0, import_react8.useCallback)(async () => {
+  const logoutFromCookie = (0, import_react9.useCallback)(async () => {
     try {
       await fetch(`${authCookieRoot}/logout`, {
         method: "POST",
         credentials: "include"
       });
     } catch (error) {
-      console.error("[HowOneProvider] Failed to logout from cookie:", error);
+      console.warn("[HowOneProvider] Failed to logout from cookie:", error);
     }
   }, [authCookieRoot]);
-  const readAccessTokenCookie = (0, import_react8.useCallback)(() => {
+  const readAccessTokenCookie = (0, import_react9.useCallback)(() => {
     if (typeof document === "undefined") return null;
     try {
       const parts = document.cookie.split("; ");
@@ -1438,7 +1488,7 @@ var HowOneProvider = ({
     }
     return null;
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     try {
       const params = new URLSearchParams(window.location.search);
       let urlToken = params.get("access_token") || params.get("token");
@@ -1467,12 +1517,12 @@ var HowOneProvider = ({
         }
       }
     } catch (e) {
-      console.error("[HowOneProvider] Failed to capture token from URL:", e);
+      console.warn("[HowOneProvider] Failed to capture token from URL:", e);
     } finally {
       setHasCheckedUrlToken(true);
     }
   }, [consumeTokenToCookie, readAccessTokenCookie]);
-  const resolvedAuthUrl = (0, import_react8.useMemo)(() => {
+  const resolvedAuthUrl = (0, import_react9.useMemo)(() => {
     const env3 = getGlobalEnvironment() ?? "dev";
     switch (env3) {
       case "local":
@@ -1484,17 +1534,12 @@ var HowOneProvider = ({
         return "https://howone.dev/auth";
     }
   }, []);
-  (0, import_react8.useEffect)(() => {
-    if (pendingRedirect) {
-      injectRedirectOverlayStyles();
-    }
-  }, [pendingRedirect]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (pendingRedirect) {
       injectRedirectOverlayStyles();
     }
   }, [pendingRedirect]);
-  const redirectToAuth = (0, import_react8.useCallback)(() => {
+  const redirectToAuth = (0, import_react9.useCallback)(() => {
     if (!redirectOnUnauthenticated || typeof window === "undefined") return;
     const activeProjectId = projectId ?? getDefaultProjectId();
     const navigateToResolvedAuth = () => {
@@ -1508,7 +1553,7 @@ var HowOneProvider = ({
             window.location.href = url.toString();
             return;
           } catch (error) {
-            console.error("[HowOneProvider] Failed to attach project_id to auth URL:", error);
+            console.warn("[HowOneProvider] Failed to attach project_id to auth URL:", error);
           }
         }
         window.location.href = resolvedAuthUrl;
@@ -1529,14 +1574,14 @@ var HowOneProvider = ({
         });
         return;
       } catch (error) {
-        console.error("[HowOneProvider] Failed to build auth URL:", error);
+        console.warn("[HowOneProvider] Failed to build auth URL:", error);
       }
       navigateToResolvedAuth();
     } catch {
       navigateToResolvedAuth();
     }
   }, [redirectOnUnauthenticated, resolvedAuthUrl, projectId]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!hasCheckedUrlToken) return;
     if (!token && !user) {
       redirectToAuth();
@@ -1559,31 +1604,31 @@ var HowOneProvider = ({
     logout
   };
   if (!hasCheckedUrlToken) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     ThemeProvider,
     {
       defaultTheme,
       storageKey: themeStorageKey,
       forceDefault: forceDefaultTheme,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementSelectorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(HowoneContext.Provider, { value, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ElementSelectorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(HowoneContext.Provider, { value, children: [
           children,
-          showHowOneFlag && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingButton, { onClick: () => window.open("https://howone.ai", "_blank") }),
-          pendingRedirect && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          showHowOneFlag && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FloatingButton, { onClick: () => window.open("https://howone.ai", "_blank") }),
+          pendingRedirect && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               "data-howone-auth-overlay-root": true,
               className: "fixed inset-0 z-[100000] h-full w-full flex flex-col items-center justify-center bg-black/65 backdrop-blur-sm text-white",
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative mt-6 flex h-[220px] w-[220px] items-center justify-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative mt-6 flex h-[220px] w-[220px] items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: "absolute inset-0 rounded-full bg-white/20",
                     style: { animation: "howone-glow-ring 2.4s ease-in-out infinite" }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute inset-0 rounded-full bg-gradient-to-br from-white/10 via-white/25 to-white/10 blur-2xl" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 rounded-full bg-gradient-to-br from-white/10 via-white/25 to-white/10 blur-2xl" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "img",
                   {
                     style: { width: 250, animation: "howone-logo-pulse 2s ease-in-out infinite" },
@@ -1595,13 +1640,13 @@ var HowOneProvider = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlobalToastContainer, {})
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GlobalToastContainer, {})
       ]
     }
   );
 };
 function useHowoneContext() {
-  const ctx = (0, import_react8.useContext)(HowoneContext);
+  const ctx = (0, import_react9.useContext)(HowoneContext);
   if (!ctx) {
     const t = getToken();
     return {
@@ -1705,7 +1750,7 @@ var howone = {
 var client_default = howone;
 
 // src/components/ui/Loading.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Loading = ({
   size = "md",
   text = "Loading...",
@@ -1718,14 +1763,14 @@ var Loading = ({
     lg: "h-12 w-12"
   };
   const containerClasses = fullScreen ? "fixed inset-0 flex items-center justify-center bg-white/80 backdrop-blur-sm z-50" : "flex items-center justify-center p-4";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${containerClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${containerClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 mx-auto ${sizeClasses[size]}`
       }
     ),
-    text && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-2 text-sm text-gray-600", children: text })
+    text && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-2 text-sm text-gray-600", children: text })
   ] }) });
 };
 var LoadingSpinner = ({
@@ -1737,7 +1782,7 @@ var LoadingSpinner = ({
     md: "h-8 w-8",
     lg: "h-12 w-12"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className}`
@@ -1746,9 +1791,9 @@ var LoadingSpinner = ({
 };
 
 // src/components/ui/ErrorBoundary.tsx
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react9.Component {
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react10.Component {
   constructor(props) {
     super(props);
     this.handleRetry = () => {
@@ -1770,13 +1815,13 @@ var ErrorBoundary = class extends import_react9.Component {
     if (this.state.hasError) {
       if (this.props.fallback) {
         const FallbackComponent = this.props.fallback;
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FallbackComponent, { error: this.state.error, retry: this.handleRetry });
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FallbackComponent, { error: this.state.error, retry: this.handleRetry });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "min-h-[400px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center max-w-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-red-500 text-6xl mb-4", children: "\u26A0\uFE0F" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Something went wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-gray-600 mb-4", children: "An unexpected error occurred. Please try refreshing the page." }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-[400px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center max-w-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-red-500 text-6xl mb-4", children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600 mb-4", children: "An unexpected error occurred. Please try refreshing the page." }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             onClick: this.handleRetry,
@@ -1790,10 +1835,10 @@ var ErrorBoundary = class extends import_react9.Component {
     return this.props.children;
   }
 };
-var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "min-h-[200px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-red-500 text-4xl mb-2", children: "\u26A0\uFE0F" }),
-  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-gray-600 mb-2", children: "Something went wrong" }),
-  retry && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-[200px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-red-500 text-4xl mb-2", children: "\u26A0\uFE0F" }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600 mb-2", children: "Something went wrong" }),
+  retry && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       onClick: retry,
@@ -1804,7 +1849,7 @@ var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0, import_jsx_runtime
 ] }) });
 
 // src/components/ui/ClayxButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var getSizeClasses = (size, isIconOnly) => {
   if (isIconOnly) {
     switch (size) {
@@ -1860,7 +1905,7 @@ var ClayxButton = ({
     disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none
   `.replace(/\s+/g, " ").trim();
   const combinedClasses = `${baseClasses} ${sizeClasses} ${variantClasses} ${className}`.trim();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "button",
     {
       className: combinedClasses,
@@ -1872,349 +1917,38 @@ var ClayxButton = ({
 };
 
 // src/components/ui/LimitUpgradeToast.tsx
-var import_react13 = __toESM(require("react"));
-var import_react14 = require("@iconify/react");
-
-// src/components/ui/Toast/ClayxToast.tsx
 var import_react11 = __toESM(require("react"));
-var import_react_toastify2 = require("react-toastify");
 var import_react12 = require("@iconify/react");
 
-// src/components/theme/ThemeToggle.tsx
-var React6 = __toESM(require("react"));
-var import_react10 = require("@iconify/react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function ThemeToggle({ className }) {
-  const { setTheme, theme } = useTheme();
-  const [mounted, setMounted] = React6.useState(false);
-  React6.useEffect(() => {
-    setMounted(true);
-  }, []);
-  const handleToggle = () => {
-    if (theme === "dark") {
-      setTheme("light");
-    } else {
-      setTheme("dark");
-    }
-  };
-  if (!mounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Icon, { icon: "solar:sun-bold", width: 20, height: 20 });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "div",
-    {
-      className: `cursor-pointer ${className || ""}`,
-      onClick: handleToggle,
-      children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Icon, { icon: "solar:sun-bold", width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react10.Icon, { icon: "solar:moon-linear", width: 20, height: 20 })
-    }
-  );
-}
-
-// src/components/ui/Toast/ClayxToast.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var TOAST_ICONS = {
-  success: {
-    icon: "mdi:success",
-    color: "text-green-400",
-    className: "text-green-400",
-    // 深色主题配置
-    dark: {
-      bgGradient: "bg-[#14181d]",
-      // 移除透明度 f2
-      gradientColor: "#389726",
-      borderGradient: "border-[#389726]",
-      borderGradientColor: "#389726"
-    },
-    // 浅色主题配置
-    light: {
-      bgGradient: "bg-[#fafafa]",
-      // 移除透明度 ff
-      gradientColor: "#22c55e",
-      borderGradient: "border-[#22c55e]",
-      borderGradientColor: "#22c55e"
-    }
-  },
-  error: {
-    icon: "ic:outline-close",
-    color: "text-red-400",
-    className: "text-red-400",
-    dark: {
-      bgGradient: "bg-[#14181d]",
-      // 移除透明度 f2
-      gradientColor: "#ef4444",
-      borderGradient: "border-[#ef4444]",
-      borderGradientColor: "#ef4444"
-    },
-    light: {
-      bgGradient: "bg-[#fafafa]",
-      // 移除透明度 ff
-      gradientColor: "#f87171",
-      borderGradient: "border-[#f87171]",
-      borderGradientColor: "#f87171"
-    }
-  },
-  warning: {
-    icon: "mi:warning",
-    color: "text-yellow-400",
-    className: "text-yellow-400",
-    dark: {
-      bgGradient: "bg-[#14181d]",
-      // 移除透明度 f2
-      gradientColor: "#facc15",
-      borderGradient: "border-[#facc15]",
-      borderGradientColor: "#facc15"
-    },
-    light: {
-      bgGradient: "bg-[#fafafa]",
-      // 移除透明度 ff
-      gradientColor: "#f59e0b",
-      borderGradient: "border-[#f59e0b]",
-      borderGradientColor: "#f59e0b"
-    }
-  },
-  info: {
-    icon: "ic:outline-info",
-    color: "text-blue-400",
-    className: "text-blue-400",
-    dark: {
-      bgGradient: "bg-[#14181d]",
-      // 移除透明度 f2
-      gradientColor: "#60a5fa",
-      borderGradient: "border-[#60a5fa]",
-      borderGradientColor: "#f0f0f0"
-    },
-    light: {
-      bgGradient: "bg-[#fafafa]",
-      // 移除透明度 ff
-      gradientColor: "#3b82f6",
-      borderGradient: "border-[#3b82f6]",
-      borderGradientColor: "#3b82f6"
-    }
-  },
-  default: {
-    icon: "ic:round-notifications",
-    color: "text-gray-400",
-    className: "text-gray-400",
-    dark: {
-      bgGradient: "bg-[#14181d]",
-      // 移除透明度 f2
-      gradientColor: "#9ca3af",
-      borderGradient: "border-[#9ca3af]",
-      borderGradientColor: "#9ca3af"
-    },
-    light: {
-      bgGradient: "bg-[#fafafa]",
-      // 移除透明度 ff
-      gradientColor: "#6b7280",
-      borderGradient: "border-[#6b7280]",
-      borderGradientColor: "#6b7280"
-    }
-  }
-};
-var CloseButton = import_react11.default.memo(({ closeToast }) => {
-  const { theme } = useTheme();
-  const handleClick = (0, import_react11.useCallback)((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    closeToast?.();
-  }, [closeToast]);
-  const getCloseButtonColor = () => {
-    const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
-    return actualTheme === "dark" ? "#b4b4b4" : "#6b7280";
-  };
-  const getCloseButtonHoverColor = () => {
-    const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
-    return actualTheme === "dark" ? "white" : "#374151";
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react12.Icon,
-    {
-      icon: "vaadin:close",
-      className: "flex items-center justify-center rounded-full relative z-10 flex-shrink-0 cursor-pointer \n                    transition-colors duration-200 drop-shadow-sm",
-      onClick: handleClick,
-      width: 14,
-      height: 14,
-      style: {
-        color: getCloseButtonColor()
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.color = getCloseButtonHoverColor();
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.color = getCloseButtonColor();
-      }
-    }
-  );
-});
-CloseButton.displayName = "CloseButton";
-var ToastContent = ({ type, title, message, component, closeToast }) => {
-  const iconConfig = TOAST_ICONS[type];
-  const { theme } = useTheme();
-  const handleClose = (0, import_react11.useCallback)(() => {
-    closeToast?.();
-  }, [closeToast]);
-  const getTextColor = () => {
-    const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
-    return actualTheme === "dark" ? "white" : "#1f2937";
-  };
-  const getThemeConfig = () => {
-    const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
-    return actualTheme === "dark" ? iconConfig.dark : iconConfig.light;
-  };
-  const themeConfig = getThemeConfig();
-  const lightBaseBackgroundByType = {
-    success: "#f0fdf4",
-    // green-50
-    error: "#fef2f2",
-    // red-50
-    warning: "#fffbeb",
-    // amber-50
-    info: "#eff6ff",
-    // blue-50
-    default: "#f9fafb"
-    // gray-50
-  };
-  if (component) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-start gap-3 !min-h-[90px] w-full backdrop-blur-md p-4 shadow-2xl overflow-hidden ${themeConfig.bgGradient}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1 relative z-10", children: component }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseButton, { closeToast: handleClose }) })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex items-start gap-3 !min-h-[90px] w-full backdrop-blur-md p-4 shadow-2xl relative overflow-hidden ${themeConfig.bgGradient}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "absolute left-0 top-0 w-full h-full rounded-xl",
-        style: {
-          background: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "#0f1419" : lightBaseBackgroundByType[type],
-          zIndex: -2
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-xl",
-        style: {
-          background: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? `linear-gradient(135deg, ${themeConfig.gradientColor}30 0%, ${themeConfig.gradientColor}20 15%, #14181df2 30%)` : `linear-gradient(135deg, ${themeConfig.gradientColor}20 0%, ${themeConfig.gradientColor}12 15%, #ffffff 30%)`,
-          zIndex: -1
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-xl",
-        style: {
-          border: "2px solid transparent",
-          backgroundImage: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? `linear-gradient(135deg, ${themeConfig.borderGradientColor}60 0%, ${themeConfig.borderGradientColor}40 5%, transparent 22%)` : `linear-gradient(135deg, ${themeConfig.borderGradientColor}99 0%, ${themeConfig.borderGradientColor}66 5%, transparent 22%)`,
-          backgroundOrigin: "border-box",
-          backgroundClip: "border-box",
-          WebkitMask: "linear-gradient(#ffffff 0 0) padding-box, linear-gradient(#ffffff 0 0)",
-          WebkitMaskComposite: "xor",
-          zIndex: 0
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-shrink-0 flex-grow-0 mt-0.5 relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className: "backdrop-blur-sm rounded-full flex items-center justify-center overflow-hidden flex-shrink-0 flex-grow-0",
-        style: {
-          backgroundColor: theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)",
-          width: "28px",
-          height: "28px"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react12.Icon,
-          {
-            icon: iconConfig.icon,
-            width: 16,
-            height: 16,
-            className: `flex-shrink-0`,
-            style: {
-              color: themeConfig.gradientColor,
-              display: "block"
-            }
-          }
-        ) })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1 flex-1 relative z-10", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "div",
-        {
-          className: "text-[16px] font-semibold leading-tight drop-shadow-sm",
-          style: {
-            color: getTextColor(),
-            backgroundClip: "text"
-          },
-          children: title
-        }
-      ),
-      message && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "div",
-        {
-          className: "text-[13px] font-normal leading-relaxed drop-shadow-sm",
-          style: {
-            color: getTextColor(),
-            backgroundClip: "text"
-          },
-          children: message
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseButton, { closeToast: handleClose }) })
-  ] });
-};
-var defaultToastOptions = {
-  position: "bottom-right",
-  autoClose: 1500,
-  hideProgressBar: true,
-  closeOnClick: false,
-  pauseOnHover: true,
-  draggable: true,
-  pauseOnFocusLoss: false,
-  transition: import_react_toastify2.Bounce
-};
-var getToastifyTheme = () => {
-  if (typeof window !== "undefined") {
-    const root = document.documentElement;
-    if (root.classList.contains("dark")) return "dark";
-    if (root.classList.contains("light")) return "light";
-    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  return "light";
+// src/components/ui/Toast/GoeyToast.tsx
+var import_goey_toast2 = require("goey-toast");
+var resolveDuration = (autoClose) => {
+  if (typeof autoClose === "number") return autoClose;
+  if (autoClose === false) return 24 * 60 * 60 * 1e3;
+  return void 0;
 };
 var createToast = (type) => {
   return (params) => {
-    const { title, message, component, options } = params;
-    (0, import_react_toastify2.toast)(
-      ({ closeToast }) => {
-        if (params.render) return params.render(closeToast);
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          ToastContent,
-          {
-            type,
-            title,
-            message: message || "",
-            component,
-            closeToast
-          }
-        );
-      },
-      {
-        ...defaultToastOptions,
-        ...options,
-        theme: getToastifyTheme(),
-        // 确保圆角样式不被覆盖，添加 rounded-xl 类
-        className: "!p-0 !shadow-none !rounded-xl",
-        style: { padding: 0, borderRadius: "0.75rem", backgroundColor: "transparent" }
-      }
-    );
+    const { autoClose, ...rawOptions } = params.options ?? {};
+    const id = params.options?.id ?? `goey-${Date.now()}-${Math.random()}`;
+    const closeToast = () => import_goey_toast2.goeyToast.dismiss(id);
+    const description = params.component ?? (params.render ? params.render(closeToast) : params.message);
+    const duration = resolveDuration(autoClose);
+    const goeyOptions = {
+      ...rawOptions,
+      id,
+      description,
+      ...duration !== void 0 ? { duration } : {}
+    };
+    const title = params.title ?? "";
+    if (type === "default") {
+      (0, import_goey_toast2.goeyToast)(title, goeyOptions);
+      return;
+    }
+    import_goey_toast2.goeyToast[type](title, goeyOptions);
   };
 };
-var ClayxToast = {
+var GoeyToast = {
   success: createToast("success"),
   error: createToast("error"),
   warning: createToast("warning"),
@@ -2223,12 +1957,12 @@ var ClayxToast = {
 };
 
 // src/components/ui/LimitUpgradeToast.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
-  const [hover, setHover] = import_react13.default.useState(false);
-  const [closeHover, setCloseHover] = import_react13.default.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-full max-w-[420px] overflow-hidden rounded-md bg-gradient-to-br from-[#1A1A1A] via-[#151515] to-[#1A1A1A] shadow-[0_20px_60px_rgba(168,85,247,0.2)] backdrop-blur-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const [hover, setHover] = import_react11.default.useState(false);
+  const [closeHover, setCloseHover] = import_react11.default.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-full max-w-[420px] overflow-hidden rounded-md bg-gradient-to-br from-[#1A1A1A] via-[#151515] to-[#1A1A1A] shadow-[0_20px_60px_rgba(168,85,247,0.2)] backdrop-blur-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className: "absolute left-0 top-0 w-full h-full rounded-md",
@@ -2238,7 +1972,7 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-md",
@@ -2248,7 +1982,7 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-md",
@@ -2264,15 +1998,15 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-16 -right-16 h-32 w-32 rounded-full bg-gradient-to-br from-purple-500/20 via-pink-500/10 to-transparent blur-3xl animate-pulse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -bottom-16 -left-16 h-32 w-32 rounded-full bg-gradient-to-tr from-blue-500/10 to-transparent blur-2xl animate-pulse", style: { animationDelay: "1s" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative z-10 flex items-start gap-4 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-1 flex-col gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-lg font-bold text-white", children: "Upgrade Required" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-2 py-0.5 text-xs font-bold bg-purple-500/20 text-purple-400 rounded-md border border-purple-500/30", children: "Premium" })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-16 -right-16 h-32 w-32 rounded-full bg-gradient-to-br from-purple-500/20 via-pink-500/10 to-transparent blur-3xl animate-pulse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -bottom-16 -left-16 h-32 w-32 rounded-full bg-gradient-to-tr from-blue-500/10 to-transparent blur-2xl animate-pulse", style: { animationDelay: "1s" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative z-10 flex items-start gap-4 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-lg font-bold text-white", children: "Upgrade Required" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-2 py-0.5 text-xs font-bold bg-purple-500/20 text-purple-400 rounded-md border border-purple-500/30", children: "Premium" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ClayxButton,
           {
             onClick: closeToast,
@@ -2289,12 +2023,12 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
               transition: "background-color 150ms ease",
               cursor: "pointer"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Icon, { icon: "iconamoon:close", className: "w-4 h-4 text-gray-400" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Icon, { icon: "iconamoon:close", className: "w-4 h-4 text-gray-400" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-gray-300 leading-relaxed", children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-1 flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-gray-300 leading-relaxed", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ClayxButton,
         {
           onClick: () => {
@@ -2312,8 +2046,8 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
             backgroundImage: hover ? "linear-gradient(to right, #9333ea, #db2777)" : "linear-gradient(to right, #a855f7, #ec4899)",
             boxShadow: hover ? "0 10px 15px -3px rgba(168,85,247,0.3), 0 4px 6px -2px rgba(168,85,247,0.3)" : "none"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Icon, { icon: "solar:rocket-2-bold", className: "w-4 h-4" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Icon, { icon: "solar:rocket-2-bold", className: "w-4 h-4" }),
             "Upgrade Now"
           ] })
         }
@@ -2322,22 +2056,10 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
   ] });
 };
 function showLimitUpgradeToast(message, onUpgrade) {
-  ClayxToast.default({
-    render: (closeToast) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LimitToastContainer, { message, onUpgrade, closeToast }),
+  GoeyToast.default({
+    render: (closeToast) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LimitToastContainer, { message, onUpgrade, closeToast }),
     options: {
-      position: "bottom-right",
-      closeOnClick: false,
-      autoClose: false,
-      hideProgressBar: true,
-      draggable: false,
-      pauseOnHover: true,
-      className: "!bg-transparent !shadow-none",
-      style: {
-        background: "transparent",
-        padding: 0,
-        width: "auto",
-        maxWidth: "420px"
-      }
+      autoClose: false
     }
   });
 }
@@ -2790,7 +2512,7 @@ async function executeSSEWorkflow(request, options = {}) {
               if (errorData.log_type === "execution_display_error") {
                 const errorContent = errorData.content;
                 const displayMessage = errorContent || "Workflow execution failed";
-                ClayxToast.error({
+                GoeyToast.error({
                   title: "Execution Error",
                   message: displayMessage
                 });
@@ -3896,11 +3618,11 @@ function createClient(opts) {
 }
 
 // src/hooks/use-mobile.ts
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React9.useState(void 0);
-  React9.useEffect(() => {
+  const [isMobile, setIsMobile] = React8.useState(void 0);
+  React8.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -3913,10 +3635,10 @@ function useIsMobile() {
 }
 
 // src/hooks/use-debounce.ts
-var import_react15 = require("react");
+var import_react13 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react15.useState)(value);
-  (0, import_react15.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react13.useState)(value);
+  (0, import_react13.useEffect)(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3928,9 +3650,9 @@ function useDebounce(value, delay) {
 }
 
 // src/hooks/use-workflow-stream.ts
-var import_react16 = require("react");
+var import_react14 = require("react");
 function useWorkflowStream() {
-  const [state, setState] = (0, import_react16.useState)({
+  const [state, setState] = (0, import_react14.useState)({
     loading: false,
     progress: 0,
     streamContent: "",
@@ -3938,8 +3660,8 @@ function useWorkflowStream() {
     result: null,
     error: null
   });
-  const abortControllerRef = (0, import_react16.useRef)(null);
-  const execute = (0, import_react16.useCallback)(async (executeWorkflowStream, workflowId, inputs) => {
+  const abortControllerRef = (0, import_react14.useRef)(null);
+  const execute = (0, import_react14.useCallback)(async (executeWorkflowStream, workflowId, inputs) => {
     setState({
       loading: true,
       progress: 0,
@@ -3992,7 +3714,7 @@ function useWorkflowStream() {
       throw error;
     }
   }, []);
-  const cancel = (0, import_react16.useCallback)(() => {
+  const cancel = (0, import_react14.useCallback)(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
       setState((prev) => ({
@@ -4002,7 +3724,7 @@ function useWorkflowStream() {
       }));
     }
   }, []);
-  const reset = (0, import_react16.useCallback)(() => {
+  const reset = (0, import_react14.useCallback)(() => {
     setState({
       loading: false,
       progress: 0,
@@ -4308,13 +4030,13 @@ var elementSelector = {
 0 && (module.exports = {
   AUTH_TOKEN_KEY,
   ClayxButton,
-  ClayxToast,
   DefaultErrorFallback,
   ElementSelector,
   ElementSelectorProvider,
   ErrorBoundary,
   FloatingButton,
   GlobalToastContainer,
+  GoeyToast,
   HowOneProvider,
   Loading,
   LoadingSpinner,