@howone/sdk 0.3.21 → 0.3.23

package/dist/index.js

@@ -269,6 +269,69 @@ var init_auth = __esm({
   }
 });
 
+// src/utils/session.ts
+var session_exports = {};
+__export(session_exports, {
+  clearGuestSession: () => clearGuestSession,
+  consumeGuestSession: () => consumeGuestSession,
+  getExistingSessionId: () => getExistingSessionId,
+  getGuestSessionId: () => getGuestSessionId,
+  isGuestMode: () => isGuestMode
+});
+function getGuestSessionId() {
+  if (typeof window === "undefined") return null;
+  try {
+    let sessionId = localStorage.getItem(GUEST_SESSION_KEY);
+    if (!sessionId) {
+      sessionId = crypto.randomUUID();
+      localStorage.setItem(GUEST_SESSION_KEY, sessionId);
+    }
+    return sessionId;
+  } catch {
+    return null;
+  }
+}
+function clearGuestSession() {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(GUEST_SESSION_KEY);
+  } catch {
+  }
+}
+function isGuestMode() {
+  if (typeof window === "undefined") return false;
+  const hasAuthToken = !!localStorage.getItem("auth_token");
+  const hasSession = !!localStorage.getItem(GUEST_SESSION_KEY);
+  return !hasAuthToken && hasSession;
+}
+function getExistingSessionId() {
+  if (typeof window === "undefined") return null;
+  try {
+    return localStorage.getItem(GUEST_SESSION_KEY);
+  } catch {
+    return null;
+  }
+}
+function consumeGuestSession() {
+  if (typeof window === "undefined") return null;
+  try {
+    const sessionId = localStorage.getItem(GUEST_SESSION_KEY);
+    if (sessionId) {
+      localStorage.removeItem(GUEST_SESSION_KEY);
+    }
+    return sessionId;
+  } catch {
+    return null;
+  }
+}
+var GUEST_SESSION_KEY;
+var init_session = __esm({
+  "src/utils/session.ts"() {
+    "use strict";
+    GUEST_SESSION_KEY = "howone_guest_session";
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -289,6 +352,7 @@ __export(index_exports, {
   ThemeToggle: () => ThemeToggle,
   aiWorkflow: () => aiWorkflow,
   canAccessArtifact: () => canAccessArtifact,
+  clearGuestSession: () => clearGuestSession,
   createAIWorkflowClient: () => createAIWorkflowClient,
   createAIWorkflowClientAxios: () => createAIWorkflowClientAxios,
   createArtifactsClient: () => createArtifactsClient,
@@ -303,10 +367,12 @@ __export(index_exports, {
   getEnvironment: () => getEnvironment,
   getEnvs: () => getEnvs,
   getGlobalEnvironment: () => getGlobalEnvironment,
+  getGuestSessionId: () => getGuestSessionId,
   getToken: () => getToken,
   howone: () => client_default,
   iframeNavigation: () => iframeNavigation,
   initIframeNavigation: () => initIframeNavigation,
+  isGuestMode: () => isGuestMode,
   isTokenValid: () => isTokenValid,
   loginWithEmailCode: () => loginWithEmailCode,
   onAuthStateChanged: () => onAuthStateChanged,
@@ -317,6 +383,8 @@ __export(index_exports, {
   setEnvironment: () => setEnvironment,
   setToken: () => setToken,
   showLimitUpgradeToast: () => showLimitUpgradeToast,
+  showPremiumActionToast: () => showPremiumActionToast,
+  showSignInRequiredToast: () => showSignInRequiredToast,
   unifiedAuth: () => unifiedAuth,
   unifiedOAuth: () => unifiedOAuth,
   useAuth: () => useAuth,
@@ -1021,7 +1089,7 @@ var LoginForm = ({
 };
 
 // src/components/auth/HowoneProvider.tsx
-var import_react8 = require("react");
+var import_react11 = require("react");
 init_auth();
 
 // src/components/theme/ThemeProvider.tsx
@@ -1320,851 +1388,944 @@ 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 redirectOverlayStylesInjected = false;
-var injectRedirectOverlayStyles = () => {
-  if (redirectOverlayStylesInjected || typeof document === "undefined") return;
-  const style = document.createElement("style");
-  style.setAttribute("data-howone-auth-overlay", "true");
-  style.textContent = `
-@keyframes howone-logo-pulse {
-  0%, 100% {
-    opacity: 0.2;
-    transform: scale(0.95);
-    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.2));
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.03);
-    filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.55));
-  }
-}
+init_session();
 
-@keyframes howone-glow-ring {
-  0%, 100% {
-    opacity: 0.12;
-    transform: scale(0.85);
-  }
-  50% {
-    opacity: 0.42;
-    transform: scale(1.05);
-  }
-}
+// src/components/ui/Toast/ClayxToast.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_toastify2 = require("react-toastify");
+var import_react10 = require("@iconify/react");
 
-[data-howone-auth-overlay-root] {
-  position: fixed;
-  inset: 0;
-  z-index: 2147483646;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  color: #ffffff;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  text-align: center;
-}
-  `;
-  document.head.appendChild(style);
-  redirectOverlayStylesInjected = true;
-};
-var HowOneProvider = ({
-  children,
-  showFloatingButton = true,
-  projectId,
-  defaultTheme = "system",
-  themeStorageKey = "howone-theme",
-  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);
-  (0, import_react8.useEffect)(() => {
-    try {
-      const params = new URLSearchParams(window.location.search);
-      let urlToken = params.get("access_token") || params.get("token");
-      if (!urlToken && window.location.hash) {
-        const hashParams = new URLSearchParams(window.location.hash.slice(1));
-        urlToken = hashParams.get("access_token") || hashParams.get("token");
-      }
-      if (urlToken) {
-        setToken(urlToken);
-        setTokenState(urlToken);
-        setUser(parseUserFromToken(urlToken));
-        params.delete("access_token");
-        params.delete("token");
-        params.delete("project_id");
-        const newSearch = params.toString();
-        const newUrl = window.location.pathname + (newSearch ? "?" + newSearch : "");
-        window.history.replaceState({}, "", newUrl);
-      }
-    } catch (e) {
-      console.error("[HowOneProvider] Failed to capture token from URL:", e);
-    } finally {
-      setHasCheckedUrlToken(true);
-    }
-  }, []);
-  const resolvedAuthUrl = (0, import_react8.useMemo)(() => {
-    const env3 = getGlobalEnvironment() ?? "dev";
-    switch (env3) {
-      case "local":
-        return "http://localhost:3000/auth";
-      case "prod":
-        return "https://howone.ai/auth";
-      case "dev":
-      default:
-        return "https://howone.dev/auth";
-    }
+// src/components/theme/ThemeToggle.tsx
+var React4 = __toESM(require("react"));
+var import_react8 = require("@iconify/react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ThemeToggle({ className }) {
+  const { setTheme, theme } = useTheme();
+  const [mounted, setMounted] = React4.useState(false);
+  React4.useEffect(() => {
+    setMounted(true);
   }, []);
-  (0, import_react8.useEffect)(() => {
-    if (pendingRedirect) {
-      injectRedirectOverlayStyles();
-    }
-  }, [pendingRedirect]);
-  (0, import_react8.useEffect)(() => {
-    if (pendingRedirect) {
-      injectRedirectOverlayStyles();
-    }
-  }, [pendingRedirect]);
-  const redirectToAuth = (0, import_react8.useCallback)(() => {
-    if (!redirectOnUnauthenticated || typeof window === "undefined") return;
-    const activeProjectId = projectId ?? getDefaultProjectId();
-    const navigateToResolvedAuth = () => {
-      setPendingRedirect(true);
-      requestAnimationFrame(() => {
-        if (activeProjectId) {
-          try {
-            const url = new URL(resolvedAuthUrl);
-            url.searchParams.set("redirect_uri", window.location.href);
-            url.searchParams.set("project_id", activeProjectId);
-            window.location.href = url.toString();
-            return;
-          } catch (error) {
-            console.error("[HowOneProvider] Failed to attach project_id to auth URL:", error);
-          }
-        }
-        window.location.href = resolvedAuthUrl;
-      });
-    };
-    try {
-      const currentUrl = new URL(window.location.href);
-      if (currentUrl.pathname.includes("/auth")) return;
-      try {
-        const authUrlObj = new URL(resolvedAuthUrl);
-        authUrlObj.searchParams.set("redirect_uri", window.location.href);
-        if (activeProjectId) {
-          authUrlObj.searchParams.set("project_id", activeProjectId);
-        }
-        setPendingRedirect(true);
-        requestAnimationFrame(() => {
-          window.location.href = authUrlObj.toString();
-        });
-        return;
-      } catch (error) {
-        console.error("[HowOneProvider] Failed to build auth URL:", error);
-      }
-      navigateToResolvedAuth();
-    } catch {
-      navigateToResolvedAuth();
-    }
-  }, [redirectOnUnauthenticated, resolvedAuthUrl, projectId]);
-  (0, import_react8.useEffect)(() => {
-    if (!hasCheckedUrlToken) return;
-    if (!token && !user) {
-      redirectToAuth();
-    }
-  }, [token, user, hasCheckedUrlToken, redirectToAuth]);
-  const logout = () => {
-    try {
-      setToken(null);
-    } catch {
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
     }
-    setTokenState(null);
-    setUser(null);
-    redirectToAuth();
-  };
-  const value = {
-    user,
-    token,
-    isAuthenticated: hasCheckedUrlToken && !!token,
-    logout
   };
-  if (!hasCheckedUrlToken) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    ThemeProvider,
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Icon, { icon: "solar:sun-bold", width: 20, height: 20 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
     {
-      defaultTheme,
-      storageKey: themeStorageKey,
-      forceDefault: forceDefaultTheme,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ElementSelectorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(HowoneContext.Provider, { value, children: [
-          children,
-          showFloatingButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingButton, { onClick: () => window.open("https://howone.ai", "_blank") }),
-          pendingRedirect && /* @__PURE__ */ (0, import_jsx_runtime7.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)(
-                  "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)(
-                  "img",
-                  {
-                    style: { width: 250, animation: "howone-logo-pulse 2s ease-in-out infinite" },
-                    src: "https://sxwxqoixnnklnpeutjrj.supabase.co/storage/v1/object/public/create-x/logo/logo.svg",
-                    alt: "HowOne"
-                  }
-                )
-              ] })
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlobalToastContainer, {})
-      ]
+      className: `cursor-pointer ${className || ""}`,
+      onClick: handleToggle,
+      children: theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Icon, { icon: "solar:sun-bold", width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Icon, { icon: "solar:moon-linear", width: 20, height: 20 })
     }
   );
-};
-function useHowoneContext() {
-  const ctx = (0, import_react8.useContext)(HowoneContext);
-  if (!ctx) {
-    const t = getToken();
-    return {
-      user: parseUserFromToken(t),
-      token: t,
-      isAuthenticated: !!t,
-      logout: () => {
-        try {
-          setToken(null);
-        } catch {
-        }
-      }
-    };
-  }
-  return ctx;
 }
 
-// src/components/index.ts
-init_auth();
-
-// src/howone/client.ts
-init_auth();
-init_config();
-var HowoneAuthClient = class {
-  constructor() {
-    this.listeners = /* @__PURE__ */ new Set();
-    this.loading = false;
-  }
-  emit() {
-    const state = {
-      user: parseUserFromToken(getToken()),
-      isLoading: this.loading
-    };
-    for (const l of this.listeners) {
-      try {
-        l(state);
-      } catch (e) {
-        void e;
-      }
+// src/components/ui/Toast/ClayxToast.tsx
+var import_jsx_runtime8 = 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"
     }
-  }
-  onAuthStateChanged(listener) {
-    this.listeners.add(listener);
-    try {
-      listener({ user: parseUserFromToken(getToken()), isLoading: this.loading });
-    } catch (e) {
-      void e;
+  },
+  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"
     }
-    return () => {
-      this.listeners.delete(listener);
-    };
   }
-  // Simple redirect-based login trigger (consumer can override)
-  login() {
-    const root = getEnvs().AUTH_ROOT_VALUE;
-    try {
-      const loc = window.location.href;
-      const authUrl = new URL("/auth", String(root));
-      authUrl.searchParams.set("redirect_uri", String(loc));
-      try {
-        const cfg = (init_config(), __toCommonJS(config_exports));
-        const pid = cfg.getDefaultProjectId && cfg.getDefaultProjectId();
-        if (pid) authUrl.searchParams.set("project_id", String(pid));
-      } catch {
+};
+var CloseButton = import_react9.default.memo(({ closeToast }) => {
+  const { theme } = useTheme();
+  const handleClick = (0, import_react9.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_runtime8.jsx)(
+    import_react10.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();
       }
-      try {
-        if (window.top && window.top !== window) {
-          window.top.location.replace(authUrl.toString());
-        } else {
-          window.location.replace(authUrl.toString());
-        }
-      } catch {
-        try {
-          window.location.replace(String(root));
-        } catch {
+    }
+  );
+});
+CloseButton.displayName = "CloseButton";
+var ToastContent = ({ type, title, message, component, closeToast }) => {
+  const iconConfig = TOAST_ICONS[type];
+  const { theme } = useTheme();
+  const handleClose = (0, import_react9.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_runtime8.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_runtime8.jsx)("div", { className: "flex-1 relative z-10", children: component }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseButton, { closeToast: handleClose }) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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
         }
       }
-    } catch {
-      try {
-        window.location.replace(String(root));
-      } catch {
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.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
+        }
       }
-    }
-  }
-  logout() {
-    setToken(null);
-    this.emit();
-  }
-  getUser() {
-    return parseUserFromToken(getToken());
-  }
-  // helper to programmatically set token (e.g., after callback handling)
-  setToken(token) {
-    setToken(token);
-    this.emit();
-  }
-};
-var howone = {
-  auth: new HowoneAuthClient()
-};
-var client_default = howone;
-
-// src/components/ui/Loading.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Loading = ({
-  size = "md",
-  text = "Loading...",
-  className = "",
-  fullScreen = false
-}) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-8 w-8",
-    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)(
       "div",
       {
-        className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 mx-auto ${sizeClasses[size]}`
+        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
+        }
       }
     ),
-    text && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-2 text-sm text-gray-600", children: text })
-  ] }) });
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-shrink-0 flex-grow-0 mt-0.5 relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("div", { className: "rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react10.Icon,
+          {
+            icon: iconConfig.icon,
+            width: 16,
+            height: 16,
+            className: `flex-shrink-0`,
+            style: {
+              color: themeConfig.gradientColor,
+              display: "block"
+            }
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1 flex-1 relative z-10", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: "text-[16px] font-semibold leading-tight drop-shadow-sm",
+          style: {
+            color: getTextColor(),
+            backgroundClip: "text"
+          },
+          children: title
+        }
+      ),
+      message && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: "text-[13px] font-normal leading-relaxed drop-shadow-sm",
+          style: {
+            color: getTextColor(),
+            backgroundClip: "text"
+          },
+          children: message
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseButton, { closeToast: handleClose }) })
+  ] });
 };
-var LoadingSpinner = ({
-  size = "md",
-  className = ""
-}) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-8 w-8",
-    lg: "h-12 w-12"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
-    {
-      className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className}`
-    }
-  );
+var defaultToastOptions = {
+  position: "bottom-right",
+  autoClose: 1500,
+  hideProgressBar: true,
+  closeOnClick: false,
+  pauseOnHover: true,
+  draggable: true,
+  pauseOnFocusLoss: false,
+  transition: import_react_toastify2.Bounce
 };
-
-// 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 {
-  constructor(props) {
-    super(props);
-    this.handleRetry = () => {
-      this.setState({ hasError: false, error: void 0, errorInfo: void 0 });
-    };
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    this.setState({
-      error,
-      errorInfo
-    });
-    this.props.onError?.(error, errorInfo);
+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";
   }
-  render() {
-    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_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)(
-          "button",
+  return "light";
+};
+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_runtime8.jsx)(
+          ToastContent,
           {
-            onClick: this.handleRetry,
-            className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors",
-            children: "Try Again"
+            type,
+            title,
+            message: message || "",
+            component,
+            closeToast
           }
-        ),
-        false
-      ] }) });
-    }
-    return this.props.children;
-  }
+        );
+      },
+      {
+        ...defaultToastOptions,
+        ...options,
+        theme: getToastifyTheme(),
+        // 确保圆角样式不被覆盖，添加 rounded-xl 类
+        className: "!p-0 !shadow-none !rounded-xl",
+        style: { padding: 0, borderRadius: "0.75rem", backgroundColor: "transparent" }
+      }
+    );
+  };
+};
+var ClayxToast = {
+  success: createToast("success"),
+  error: createToast("error"),
+  warning: createToast("warning"),
+  info: createToast("info"),
+  default: createToast("default")
 };
-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)(
-    "button",
-    {
-      onClick: retry,
-      className: "px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors",
-      children: "Retry"
-    }
-  )
-] }) });
 
-// src/components/ui/ClayxButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var getSizeClasses = (size, isIconOnly) => {
-  if (isIconOnly) {
-    switch (size) {
-      case "sm":
-        return "h-8 w-8 min-w-8 p-0";
-      case "md":
-        return "h-10 w-10 min-w-10 p-0";
-      case "lg":
-        return "h-12 w-12 min-w-12 p-0";
-      default:
-        return "h-10 w-10 min-w-10 p-0";
-    }
+// src/components/auth/HowoneProvider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var HowoneContext = (0, import_react11.createContext)(null);
+var redirectOverlayStylesInjected = false;
+var injectRedirectOverlayStyles = () => {
+  if (redirectOverlayStylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.setAttribute("data-howone-auth-overlay", "true");
+  style.textContent = `
+@keyframes howone-logo-pulse {
+  0%, 100% {
+    opacity: 0.2;
+    transform: scale(0.95);
+    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.2));
   }
-  switch (size) {
-    case "sm":
-      return "h-8 px-3 text-sm";
-    case "md":
-      return "h-10 px-4 text-base";
-    case "lg":
-      return "h-12 px-6 text-lg";
-    default:
-      return "h-10 px-4 text-base";
+  50% {
+    opacity: 1;
+    transform: scale(1.03);
+    filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.55));
+  }
+}
+
+@keyframes howone-glow-ring {
+  0%, 100% {
+    opacity: 0.12;
+    transform: scale(0.85);
   }
-};
-var getVariantClasses = (variant) => {
-  switch (variant) {
-    case "solid":
-      return "bg-primary text-white hover:bg-primary/90";
-    case "ghost":
-      return "bg-transparent hover:bg-white/10";
-    case "flat":
-      return "bg-white/5 hover:bg-white/10";
-    default:
-      return "";
+  50% {
+    opacity: 0.42;
+    transform: scale(1.05);
   }
+}
+
+[data-howone-auth-overlay-root] {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  color: #ffffff;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  text-align: center;
+}
+  `;
+  document.head.appendChild(style);
+  redirectOverlayStylesInjected = true;
 };
-var ClayxButton = ({
-  isIconOnly = false,
-  size = "md",
-  variant = "solid",
-  className = "",
+var HowOneProvider = ({
   children,
-  disabled = false,
-  ...props
+  showFloatingButton = true,
+  projectId,
+  defaultTheme = "system",
+  themeStorageKey = "howone-theme",
+  forceDefaultTheme = false,
+  redirectOnUnauthenticated = false
 }) => {
-  const sizeClasses = getSizeClasses(size, isIconOnly);
-  const variantClasses = getVariantClasses(variant);
-  const baseClasses = `
-    inline-flex items-center justify-center
-    rounded-md font-medium
-    transition-all duration-200
-    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent
-    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)(
-    "button",
-    {
-      className: combinedClasses,
-      disabled,
-      ...props,
-      children
+  const [user, setUser] = (0, import_react11.useState)(() => parseUserFromToken(getToken()));
+  const [token, setTokenState] = (0, import_react11.useState)(() => getToken());
+  const [hasCheckedUrlToken, setHasCheckedUrlToken] = (0, import_react11.useState)(false);
+  const [pendingRedirect, setPendingRedirect] = (0, import_react11.useState)(false);
+  const [isGuest, setIsGuest] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      let urlToken = params.get("access_token") || params.get("token");
+      if (!urlToken && window.location.hash) {
+        const hashParams = new URLSearchParams(window.location.hash.slice(1));
+        urlToken = hashParams.get("access_token") || hashParams.get("token");
+      }
+      if (urlToken) {
+        setToken(urlToken);
+        setTokenState(urlToken);
+        setUser(parseUserFromToken(urlToken));
+        params.delete("access_token");
+        params.delete("token");
+        params.delete("project_id");
+        const newSearch = params.toString();
+        const newUrl = window.location.pathname + (newSearch ? "?" + newSearch : "");
+        window.history.replaceState({}, "", newUrl);
+      }
+    } catch (e) {
+      console.error("[HowOneProvider] Failed to capture token from URL:", e);
+    } finally {
+      setHasCheckedUrlToken(true);
     }
-  );
-};
-
-// 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 })
+  const resolvedAuthUrl = (0, import_react11.useMemo)(() => {
+    const env3 = getGlobalEnvironment() ?? "dev";
+    switch (env3) {
+      case "local":
+        return "http://localhost:3000/auth";
+      case "prod":
+        return "https://howone.ai/auth";
+      case "dev":
+      default:
+        return "https://howone.dev/auth";
     }
-  );
-}
-
-// 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"
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (pendingRedirect) {
+      injectRedirectOverlayStyles();
     }
-  },
-  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"
+  }, [pendingRedirect]);
+  (0, import_react11.useEffect)(() => {
+    if (pendingRedirect) {
+      injectRedirectOverlayStyles();
     }
-  },
-  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"
+  }, [pendingRedirect]);
+  const redirectToAuth = (0, import_react11.useCallback)(() => {
+    if (!redirectOnUnauthenticated || typeof window === "undefined") return;
+    const activeProjectId = projectId ?? getDefaultProjectId();
+    const navigateToResolvedAuth = () => {
+      setPendingRedirect(true);
+      requestAnimationFrame(() => {
+        if (activeProjectId) {
+          try {
+            const url = new URL(resolvedAuthUrl);
+            url.searchParams.set("redirect_uri", window.location.origin);
+            url.searchParams.set("project_id", activeProjectId);
+            window.location.href = url.toString();
+            return;
+          } catch (error) {
+            console.error("[HowOneProvider] Failed to attach project_id to auth URL:", error);
+          }
+        }
+        window.location.href = resolvedAuthUrl;
+      });
+    };
+    try {
+      const currentUrl = new URL(window.location.href);
+      if (currentUrl.pathname.includes("/auth")) return;
+      try {
+        const authUrlObj = new URL(resolvedAuthUrl);
+        authUrlObj.searchParams.set("redirect_uri", window.location.origin);
+        if (activeProjectId) {
+          authUrlObj.searchParams.set("project_id", activeProjectId);
+        }
+        setPendingRedirect(true);
+        requestAnimationFrame(() => {
+          window.location.href = authUrlObj.toString();
+        });
+        return;
+      } catch (error) {
+        console.error("[HowOneProvider] Failed to build auth URL:", error);
+      }
+      navigateToResolvedAuth();
+    } catch {
+      navigateToResolvedAuth();
     }
-  },
-  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"
+  }, [redirectOnUnauthenticated, resolvedAuthUrl, projectId]);
+  (0, import_react11.useEffect)(() => {
+    if (!hasCheckedUrlToken) return;
+    const guestMode = isGuestMode() || !!getExistingSessionId();
+    setIsGuest(guestMode);
+    if (token || user || guestMode) {
+      return;
     }
-  },
-  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"
+    redirectToAuth();
+  }, [token, user, hasCheckedUrlToken, redirectToAuth]);
+  (0, import_react11.useEffect)(() => {
+    if (!hasCheckedUrlToken || !token || !user) return;
+    const migrateGuestData = async () => {
+      try {
+        const guestSessionId = getExistingSessionId();
+        if (!guestSessionId) return;
+        const activeProjectId = projectId ?? getDefaultProjectId();
+        if (!activeProjectId) {
+          console.warn("[HowOneProvider] No projectId available for guest data migration");
+          return;
+        }
+        const baseUrl = getEnvs().baseUrl;
+        const response = await fetch(
+          `${baseUrl}/entities/apps/${activeProjectId}/migrate-guest-data`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${token}`
+            },
+            body: JSON.stringify({ guestSessionId })
+          }
+        );
+        if (response.ok) {
+          const result = await response.json();
+          console.log("[HowOneProvider] Guest data migration result:", result);
+          clearGuestSession();
+          setIsGuest(false);
+          if (result.totalCount > 0) {
+            const entityList = result.details?.map((d) => `${d.entityName} (${d.count})`).join(", ") || "";
+            ClayxToast.success({
+              title: "Data Synced",
+              message: `Migrated ${result.totalCount} records${entityList ? `: ${entityList}` : ""}`
+            });
+          }
+        } else {
+          console.error("[HowOneProvider] Guest data migration failed:", response.status);
+        }
+      } catch (error) {
+        console.error("[HowOneProvider] Failed to migrate guest data:", error);
+      }
+    };
+    migrateGuestData();
+  }, [token, user, hasCheckedUrlToken, projectId]);
+  const logout = () => {
+    try {
+      setToken(null);
+    } catch {
     }
-  }
-};
-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";
+    setTokenState(null);
+    setUser(null);
+    redirectToAuth();
   };
-  const getCloseButtonHoverColor = () => {
-    const actualTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
-    return actualTheme === "dark" ? "white" : "#374151";
+  const value = {
+    user,
+    token,
+    isAuthenticated: hasCheckedUrlToken && (!!token || isGuest),
+    isGuest,
+    logout
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react12.Icon,
+  if (!hasCheckedUrlToken) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    ThemeProvider,
     {
-      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();
-      }
+      defaultTheme,
+      storageKey: themeStorageKey,
+      forceDefault: forceDefaultTheme,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ElementSelectorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HowoneContext.Provider, { value, children: [
+          children,
+          showFloatingButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FloatingButton, { onClick: () => window.open("https://howone.ai", "_blank") }),
+          pendingRedirect && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsxs)("div", { className: "relative mt-6 flex h-[220px] w-[220px] items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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_runtime9.jsx)(
+                  "img",
+                  {
+                    style: { width: 250, animation: "howone-logo-pulse 2s ease-in-out infinite" },
+                    src: "https://sxwxqoixnnklnpeutjrj.supabase.co/storage/v1/object/public/create-x/logo/logo.svg",
+                    alt: "HowOne"
+                  }
+                )
+              ] })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GlobalToastContainer, {})
+      ]
     }
   );
-});
-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
+};
+function useHowoneContext() {
+  const ctx = (0, import_react11.useContext)(HowoneContext);
+  if (!ctx) {
+    const t = getToken();
+    const guestMode = isGuestMode() || !!getExistingSessionId();
+    return {
+      user: parseUserFromToken(t),
+      token: t,
+      isAuthenticated: !!t || guestMode,
+      isGuest: guestMode,
+      logout: () => {
+        try {
+          setToken(null);
+        } catch {
         }
       }
-    ),
-    /* @__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
+    };
+  }
+  return ctx;
+}
+
+// src/components/index.ts
+init_auth();
+
+// src/howone/client.ts
+init_auth();
+init_config();
+var HowoneAuthClient = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.loading = false;
+  }
+  emit() {
+    const state = {
+      user: parseUserFromToken(getToken()),
+      isLoading: this.loading
+    };
+    for (const l of this.listeners) {
+      try {
+        l(state);
+      } catch (e) {
+        void e;
+      }
+    }
+  }
+  onAuthStateChanged(listener) {
+    this.listeners.add(listener);
+    try {
+      listener({ user: parseUserFromToken(getToken()), isLoading: this.loading });
+    } catch (e) {
+      void e;
+    }
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  // Simple redirect-based login trigger (consumer can override)
+  login() {
+    const root = getEnvs().AUTH_ROOT_VALUE;
+    try {
+      const loc = window.location.href;
+      const authUrl = new URL("/auth", String(root));
+      authUrl.searchParams.set("redirect_uri", String(loc));
+      try {
+        const cfg = (init_config(), __toCommonJS(config_exports));
+        const pid = cfg.getDefaultProjectId && cfg.getDefaultProjectId();
+        if (pid) authUrl.searchParams.set("project_id", String(pid));
+      } catch {
+      }
+      try {
+        if (window.top && window.top !== window) {
+          window.top.location.replace(authUrl.toString());
+        } else {
+          window.location.replace(authUrl.toString());
+        }
+      } catch {
+        try {
+          window.location.replace(String(root));
+        } catch {
         }
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    } catch {
+      try {
+        window.location.replace(String(root));
+      } catch {
+      }
+    }
+  }
+  logout() {
+    setToken(null);
+    this.emit();
+  }
+  getUser() {
+    return parseUserFromToken(getToken());
+  }
+  // helper to programmatically set token (e.g., after callback handling)
+  setToken(token) {
+    setToken(token);
+    this.emit();
+  }
+};
+var howone = {
+  auth: new HowoneAuthClient()
+};
+var client_default = howone;
+
+// src/components/ui/Loading.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Loading = ({
+  size = "md",
+  text = "Loading...",
+  className = "",
+  fullScreen = false
+}) => {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    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_runtime10.jsx)("div", { className: `${containerClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.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
-        }
+        className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 mx-auto ${sizeClasses[size]}`
       }
     ),
-    /* @__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 }) })
-  ] });
+    text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-2 text-sm text-gray-600", children: text })
+  ] }) });
 };
-var defaultToastOptions = {
-  position: "bottom-right",
-  autoClose: 1500,
-  hideProgressBar: true,
-  closeOnClick: false,
-  pauseOnHover: true,
-  draggable: true,
-  pauseOnFocusLoss: false,
-  transition: import_react_toastify2.Bounce
+var LoadingSpinner = ({
+  size = "md",
+  className = ""
+}) => {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: `animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className}`
+    }
+  );
 };
-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";
+
+// src/components/ui/ErrorBoundary.tsx
+var import_react12 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react12.Component {
+  constructor(props) {
+    super(props);
+    this.handleRetry = () => {
+      this.setState({ hasError: false, error: void 0, errorInfo: void 0 });
+    };
+    this.state = { hasError: false };
   }
-  return "light";
-};
-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,
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error,
+      errorInfo
+    });
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        const FallbackComponent = this.props.fallback;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FallbackComponent, { error: this.state.error, retry: this.handleRetry });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-h-[400px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-center max-w-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-red-500 text-6xl mb-4", children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-gray-600 mb-4", children: "An unexpected error occurred. Please try refreshing the page." }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
           {
-            type,
-            title,
-            message: message || "",
-            component,
-            closeToast
+            onClick: this.handleRetry,
+            className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors",
+            children: "Try Again"
           }
-        );
-      },
-      {
-        ...defaultToastOptions,
-        ...options,
-        theme: getToastifyTheme(),
-        // 确保圆角样式不被覆盖，添加 rounded-xl 类
-        className: "!p-0 !shadow-none !rounded-xl",
-        style: { padding: 0, borderRadius: "0.75rem", backgroundColor: "transparent" }
-      }
-    );
-  };
+        ),
+        false
+      ] }) });
+    }
+    return this.props.children;
+  }
 };
-var ClayxToast = {
-  success: createToast("success"),
-  error: createToast("error"),
-  warning: createToast("warning"),
-  info: createToast("info"),
-  default: createToast("default")
+var DefaultErrorFallback = ({ retry }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-h-[200px] flex items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-center", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-red-500 text-4xl mb-2", children: "\u26A0\uFE0F" }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-gray-600 mb-2", children: "Something went wrong" }),
+  retry && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "button",
+    {
+      onClick: retry,
+      className: "px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors",
+      children: "Retry"
+    }
+  )
+] }) });
+
+// src/components/ui/ClayxButton.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var getSizeClasses = (size, isIconOnly) => {
+  if (isIconOnly) {
+    switch (size) {
+      case "sm":
+        return "h-8 w-8 min-w-8 p-0";
+      case "md":
+        return "h-10 w-10 min-w-10 p-0";
+      case "lg":
+        return "h-12 w-12 min-w-12 p-0";
+      default:
+        return "h-10 w-10 min-w-10 p-0";
+    }
+  }
+  switch (size) {
+    case "sm":
+      return "h-8 px-3 text-sm";
+    case "md":
+      return "h-10 px-4 text-base";
+    case "lg":
+      return "h-12 px-6 text-lg";
+    default:
+      return "h-10 px-4 text-base";
+  }
+};
+var getVariantClasses = (variant) => {
+  switch (variant) {
+    case "solid":
+      return "bg-primary text-white hover:bg-primary/90";
+    case "ghost":
+      return "bg-transparent hover:bg-white/10";
+    case "flat":
+      return "bg-white/5 hover:bg-white/10";
+    default:
+      return "";
+  }
+};
+var ClayxButton = ({
+  isIconOnly = false,
+  size = "md",
+  variant = "solid",
+  className = "",
+  children,
+  disabled = false,
+  ...props
+}) => {
+  const sizeClasses = getSizeClasses(size, isIconOnly);
+  const variantClasses = getVariantClasses(variant);
+  const baseClasses = `
+    inline-flex items-center justify-center
+    rounded-md font-medium
+    transition-all duration-200
+    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent
+    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_runtime12.jsx)(
+    "button",
+    {
+      className: combinedClasses,
+      disabled,
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/ui/LimitUpgradeToast.tsx
+var import_react13 = __toESM(require("react"));
+var import_react14 = require("@iconify/react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
+var PremiumActionToast = ({
+  message,
+  onAction,
+  closeToast,
+  buttonText = "Upgrade Now",
+  title = "Information",
+  variant = "purple"
+}) => {
   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: [
+  const colors = {
+    purple: {
+      gradient1: "rgba(168,85,247,0.3)",
+      gradient2: "rgba(168,85,247,0.2)",
+      borderStart: "rgba(168,85,247,0.8)",
+      borderEnd: "rgba(168,85,247,0.5)",
+      bgGlow1: "from-purple-500/20 via-pink-500/10",
+      bgGlow2: "from-blue-500/10",
+      tagBg: "bg-purple-500/30",
+      tagText: "text-white",
+      tagBorder: "border border-purple-400/50",
+      borderColor: "#a855f7",
+      btnGradient: hover ? "linear-gradient(to right, #9333ea, #db2777)" : "linear-gradient(to right, #a855f7, #ec4899)",
+      btnShadow: "0 10px 15px -3px rgba(168,85,247,0.3), 0 4px 6px -2px rgba(168,85,247,0.3)",
+      shadow: "0_20px_60px_rgba(168,85,247,0.2)",
+      badge: "Premium"
+    },
+    blue: {
+      gradient1: "rgba(59,130,246,0.3)",
+      gradient2: "rgba(59,130,246,0.2)",
+      borderStart: "rgba(59,130,246,0.8)",
+      borderEnd: "rgba(59,130,246,0.5)",
+      bgGlow1: "from-blue-500/20 via-cyan-500/10",
+      bgGlow2: "from-indigo-500/10",
+      tagBg: "bg-blue-500/30",
+      tagText: "text-white",
+      tagBorder: "border border-blue-400/50",
+      borderColor: "#3b82f6",
+      btnGradient: hover ? "linear-gradient(to right, #1d4ed8, #0ea5e9)" : "linear-gradient(to right, #3b82f6, #06b6d4)",
+      btnShadow: "0 10px 15px -3px rgba(59,130,246,0.3), 0 4px 6px -2px rgba(59,130,246,0.3)",
+      shadow: "0_20px_60px_rgba(59,130,246,0.2)",
+      badge: "Secure"
+    }
+  }[variant];
+  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-[${colors.shadow}] backdrop-blur-sm`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
@@ -2180,7 +2341,7 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
       {
         className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-md",
         style: {
-          background: `linear-gradient(135deg, rgba(168,85,247,0.3) 0%, rgba(168,85,247,0.2) 15%, #1A1A1A 30%)`,
+          background: `linear-gradient(135deg, ${colors.gradient1} 0%, ${colors.gradient2} 15%, #1A1A1A 30%)`,
           zIndex: -1
         }
       }
@@ -2191,7 +2352,7 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
         className: "absolute left-0 top-0 w-full h-full pointer-events-none rounded-md",
         style: {
           border: "2px solid transparent",
-          backgroundImage: `linear-gradient(135deg, rgba(168,85,247,0.6) 0%, rgba(168,85,247,0.4) 5%, transparent 22%)`,
+          backgroundImage: `linear-gradient(135deg, ${colors.borderStart} 0%, ${colors.borderEnd} 5%, transparent 22%)`,
           backgroundOrigin: "border-box",
           backgroundClip: "border-box",
           WebkitMask: "linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)",
@@ -2201,13 +2362,20 @@ 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: `absolute -top-16 -right-16 h-32 w-32 rounded-full bg-gradient-to-br ${colors.bgGlow1} 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 ${colors.bgGlow2} 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_runtime13.jsx)("div", { className: "text-lg font-bold text-white", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: `px-2 py-0.5 text-xs font-bold ${colors.tagBg} ${colors.tagText} rounded-md border`,
+              style: { borderColor: colors.borderColor },
+              children: colors.badge
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ClayxButton,
@@ -2226,16 +2394,16 @@ 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_runtime13.jsx)(import_react14.Icon, { icon: "iconamoon:close", className: "w-4 h-4 text-gray-300" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-gray-300 leading-relaxed", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-white leading-relaxed font-medium", children: message }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-1 flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ClayxButton,
         {
           onClick: () => {
-            onUpgrade();
+            onAction();
             closeToast?.();
           },
           onMouseEnter: () => setHover(true),
@@ -2246,21 +2414,31 @@ var LimitToastContainer = ({ message, onUpgrade, closeToast }) => {
             fontWeight: 600,
             cursor: "pointer",
             transition: "all 300ms ease-in-out",
-            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"
+            backgroundImage: colors.btnGradient,
+            boxShadow: hover ? colors.btnShadow : "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" }),
-            "Upgrade Now"
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.Icon, { icon: variant === "purple" ? "solar:rocket-2-bold" : "solar:login-3-bold", className: "w-4 h-4" }),
+            buttonText
           ] })
         }
       ) })
     ] }) })
   ] });
 };
-function showLimitUpgradeToast(message, onUpgrade) {
+function showPremiumActionToast(message, onAction, buttonText, title, variant = "purple") {
   ClayxToast.default({
-    render: (closeToast) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LimitToastContainer, { message, onUpgrade, closeToast }),
+    render: (closeToast) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      PremiumActionToast,
+      {
+        message,
+        onAction,
+        closeToast,
+        buttonText,
+        title,
+        variant
+      }
+    ),
     options: {
       position: "bottom-right",
       closeOnClick: false,
@@ -2278,6 +2456,12 @@ function showLimitUpgradeToast(message, onUpgrade) {
     }
   });
 }
+function showLimitUpgradeToast(message, onUpgrade, buttonText, title) {
+  showPremiumActionToast(message, onUpgrade, buttonText, title, "purple");
+}
+function showSignInRequiredToast(message, onSignIn, buttonText, title) {
+  showPremiumActionToast(message, onSignIn, buttonText, title, "blue");
+}
 
 // src/services/ai-workflow.ts
 var AIWorkflowClient = class {
@@ -2653,6 +2837,15 @@ async function executeSSEWorkflow(request, options = {}) {
   };
   if (options.authToken) {
     headers["Authorization"] = `Bearer ${options.authToken}`;
+  } else {
+    try {
+      const { getGuestSessionId: getGuestSessionId2 } = (init_session(), __toCommonJS(session_exports));
+      const sessionId = getGuestSessionId2?.();
+      if (sessionId) {
+        headers["X-Session-Id"] = sessionId;
+      }
+    } catch {
+    }
   }
   const method = request.method?.toUpperCase() ?? "POST";
   const hasBody = request.body && Object.keys(request.body).length > 0;
@@ -2667,7 +2860,23 @@ async function executeSSEWorkflow(request, options = {}) {
       signal: options.signal
     });
     if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      if (response.status === 403) {
+        showSignInRequiredToast(
+          "Free trial limit reached. Please sign in to continue.",
+          () => {
+            const authUrl = getEnvs().AUTH_ROOT_VALUE;
+            const redirectUri = window.location.href;
+            const projectId = getDefaultProjectId();
+            let authHref = `${authUrl}/auth?redirect_uri=${encodeURIComponent(redirectUri)}`;
+            if (projectId) {
+              authHref += `&project_id=${encodeURIComponent(projectId)}`;
+            }
+            window.location.href = authHref;
+          },
+          "Sign In",
+          "Sign In Required"
+        );
+      }
     }
     const reader = response.body?.getReader();
     if (!reader) {
@@ -3420,6 +3629,15 @@ function createClient(opts) {
             const availableToken = getAvailableToken();
             if (availableToken) {
               config.headers["Authorization"] = `Bearer ${availableToken}`;
+            } else {
+              try {
+                const { getGuestSessionId: getGuestSessionId2 } = (init_session(), __toCommonJS(session_exports));
+                const sessionId = getGuestSessionId2?.();
+                if (sessionId) {
+                  config.headers["X-Session-Id"] = sessionId;
+                }
+              } catch {
+              }
             }
           }
           return config;
@@ -4222,6 +4440,9 @@ var elementSelector = {
    */
   isActive: () => getElementSelectorState().active
 };
+
+// src/index.ts
+init_session();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AUTH_TOKEN_KEY,
@@ -4241,6 +4462,7 @@ var elementSelector = {
   ThemeToggle,
   aiWorkflow,
   canAccessArtifact,
+  clearGuestSession,
   createAIWorkflowClient,
   createAIWorkflowClientAxios,
   createArtifactsClient,
@@ -4255,10 +4477,12 @@ var elementSelector = {
   getEnvironment,
   getEnvs,
   getGlobalEnvironment,
+  getGuestSessionId,
   getToken,
   howone,
   iframeNavigation,
   initIframeNavigation,
+  isGuestMode,
   isTokenValid,
   loginWithEmailCode,
   onAuthStateChanged,
@@ -4269,6 +4493,8 @@ var elementSelector = {
   setEnvironment,
   setToken,
   showLimitUpgradeToast,
+  showPremiumActionToast,
+  showSignInRequiredToast,
   unifiedAuth,
   unifiedOAuth,
   useAuth,