@ascendkit/nextjs 0.1.0

package/dist/client/provider.js

@@ -0,0 +1,284 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AuthUIProvider } from "@daveyplate/better-auth-ui";
+import { createAuthClient } from "better-auth/react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { AuthModal } from "../components/auth-modal";
+const AscendKitContext = createContext(null);
+const AUTH_MODES = new Set(["credentials", "magic-link"]);
+function normalizePath(path) {
+    const withLeadingSlash = path.startsWith("/") ? path : `/${path}`;
+    if (withLeadingSlash === "/")
+        return "/";
+    return withLeadingSlash.replace(/\/+$/, "");
+}
+function buildRoute(basePath, routeSegment) {
+    const normalizedBase = normalizePath(basePath || "/");
+    const normalizedRoute = routeSegment.replace(/^\/+/, "");
+    if (normalizedBase === "/")
+        return `/${normalizedRoute}`;
+    return `${normalizedBase}/${normalizedRoute}`;
+}
+function getPathnameFromHref(href) {
+    try {
+        return new URL(href, window.location.origin).pathname;
+    }
+    catch {
+        const pathOnly = href.split(/[?#]/)[0] || "/";
+        return pathOnly.startsWith("/") ? pathOnly : `/${pathOnly}`;
+    }
+}
+export function useAscendKitContext() {
+    const ctx = useContext(AscendKitContext);
+    if (!ctx) {
+        throw new Error("useAscendKitContext must be used within <AscendKitProvider>");
+    }
+    return ctx;
+}
+/**
+ * Wraps Better Auth UI's AuthUIProvider and provides AscendKit config context.
+ *
+ * Automatically fetches enabled providers and branding config on mount.
+ * Pass `enabledProviders` to skip the fetch and use static config.
+ *
+ * Usage (zero-config — reads from env vars automatically):
+ * ```tsx
+ * <AscendKitProvider>
+ *   {children}
+ * </AscendKitProvider>
+ * ```
+ *
+ * Environment variables (set by `ascendkit init` + `ascendkit set-env`):
+ * - NEXT_PUBLIC_ASCENDKIT_ENV_KEY — public key (client-side)
+ * - NEXT_PUBLIC_ASCENDKIT_API_URL — backend URL (default: https://api.ascendkit.com)
+ */
+export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKIT_ENV_KEY ?? "", apiUrl = process.env.NEXT_PUBLIC_ASCENDKIT_API_URL || "https://api.ascendkit.com", enabledProviders: overrideProviders, onFocusRefresh = false, basePath, viewPaths, children, }) {
+    const [providers, setProviders] = useState(overrideProviders ?? []);
+    const [branding, setBranding] = useState({ showBadge: true });
+    const [environmentName, setEnvironmentName] = useState("");
+    const [emailVerificationEnabled, setEmailVerificationEnabled] = useState(false);
+    const [authNotification, setAuthNotification] = useState(null);
+    const clearAuthNotification = useCallback(() => setAuthNotification(null), []);
+    const [settingsLoaded, setSettingsLoaded] = useState(!!overrideProviders);
+    const [settingsError, setSettingsError] = useState(null);
+    const settingsEtagRef = useRef(undefined);
+    const settingsRefreshInFlightRef = useRef(null);
+    const nextSettingsRefreshAtRef = useRef(0);
+    const authClient = useMemo(() => createAuthClient(), []);
+    // Global modal state
+    const [modalOpen, setModalOpen] = useState(false);
+    const [modalView, setModalView] = useState("sign-in");
+    const openModal = useCallback((view = "sign-in") => {
+        setModalView(view);
+        setModalOpen(true);
+    }, []);
+    const closeModal = useCallback(() => {
+        setModalOpen(false);
+    }, []);
+    const modal = useMemo(() => ({ isOpen: modalOpen, view: modalView, open: openModal, close: closeModal }), [modalOpen, modalView, openModal, closeModal]);
+    // Detect ?verified=true (and optional ?waitlisted=true) from email verification redirect
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get("verified") === "true") {
+            const isWaitlisted = params.get("waitlisted") === "true";
+            if (isWaitlisted) {
+                setAuthNotification({
+                    variant: "info",
+                    message: "Email verified! Your account is pending approval. We'll notify you when it's ready.",
+                });
+            }
+            else {
+                setAuthNotification({ variant: "success", message: "Email verified! You can now sign in." });
+                setModalView("sign-in");
+                setModalOpen(true);
+            }
+            params.delete("verified");
+            params.delete("waitlisted");
+            const clean = params.toString();
+            const newUrl = clean ? `${window.location.pathname}?${clean}` : window.location.pathname;
+            window.history.replaceState({}, "", newUrl);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount only
+    // Auto-close modal when user becomes authenticated
+    const { data: session } = authClient.useSession();
+    const prevUserRef = useRef(null);
+    useEffect(() => {
+        const userId = session?.user?.id ?? null;
+        // Close modal when transitioning from no-user to user (successful sign-in/up)
+        if (userId && !prevUserRef.current && modalOpen) {
+            setModalOpen(false);
+        }
+        prevUserRef.current = userId;
+    }, [session?.user?.id, modalOpen]);
+    const refreshSettings = useCallback(async () => {
+        if (Date.now() < nextSettingsRefreshAtRef.current) {
+            return;
+        }
+        if (settingsRefreshInFlightRef.current) {
+            return settingsRefreshInFlightRef.current;
+        }
+        if (overrideProviders) {
+            setSettingsLoaded(true);
+            return;
+        }
+        const headers = { "X-AscendKit-Public-Key": publicKey };
+        if (settingsEtagRef.current) {
+            headers["If-None-Match"] = settingsEtagRef.current;
+        }
+        const refreshTask = (async () => {
+            try {
+                const response = await fetch(`${apiUrl}/api/auth/settings`, {
+                    headers,
+                    cache: "no-store",
+                });
+                if (response.status === 304) {
+                    setSettingsLoaded(true);
+                    return;
+                }
+                if (!response.ok) {
+                    throw new Error(`Settings fetch failed: ${response.status}`);
+                }
+                settingsEtagRef.current = response.headers.get("etag") ?? settingsEtagRef.current;
+                const json = await response.json();
+                const rawProviders = Array.isArray(json.data?.providers)
+                    ? json.data.providers.filter((provider) => typeof provider === "string")
+                    : [];
+                const oauthStatus = json.data?.oauthProviderStatus;
+                let readyProviders;
+                if (oauthStatus) {
+                    readyProviders = rawProviders.filter((provider) => AUTH_MODES.has(provider) || oauthStatus[provider]?.ready === true);
+                }
+                else {
+                    readyProviders = rawProviders;
+                }
+                setProviders(readyProviders);
+                if (json.data?.branding)
+                    setBranding(json.data.branding);
+                setEnvironmentName(json.data?.environmentName ?? "");
+                setEmailVerificationEnabled(json.data?.features?.emailVerification === true);
+                if (readyProviders.length === 0 && rawProviders.length > 0) {
+                    setSettingsError("Sign-in providers are enabled but not yet configured. Please contact the app developer.");
+                }
+                else if (readyProviders.length === 0) {
+                    setSettingsError("No sign-in methods are configured for this application.");
+                }
+                else {
+                    setSettingsError(null);
+                }
+            }
+            catch {
+                setSettingsError("Unable to load authentication settings. Please try again later.");
+            }
+            finally {
+                setSettingsLoaded(true);
+            }
+        })();
+        settingsRefreshInFlightRef.current = refreshTask.finally(() => {
+            settingsRefreshInFlightRef.current = null;
+            nextSettingsRefreshAtRef.current = Date.now() + 5_000;
+        });
+        return settingsRefreshInFlightRef.current;
+    }, [publicKey, apiUrl, overrideProviders]);
+    useEffect(() => {
+        void refreshSettings();
+    }, [refreshSettings]);
+    useEffect(() => {
+        if (!onFocusRefresh || overrideProviders)
+            return undefined;
+        const handleFocus = () => {
+            void refreshSettings();
+        };
+        window.addEventListener("focus", handleFocus);
+        return () => {
+            window.removeEventListener("focus", handleFocus);
+        };
+    }, [onFocusRefresh, overrideProviders, refreshSettings]);
+    // Auth modes are non-social authentication methods — don't render them as social buttons
+    const socialProviders = providers.filter((p) => !AUTH_MODES.has(p));
+    const credentialsEnabled = providers.includes("credentials");
+    const magicLinkEnabled = providers.includes("magic-link");
+    // Intercept navigation when modal is open to switch views instead of navigating
+    const modalOpenRef = useRef(modalOpen);
+    modalOpenRef.current = modalOpen;
+    const resolvedBasePath = basePath ?? "/auth";
+    const signInPath = viewPaths?.SIGN_IN ?? "sign-in";
+    const signUpPath = viewPaths?.SIGN_UP ?? "sign-up";
+    const signOutPath = viewPaths?.SIGN_OUT ?? "sign-out";
+    const signOutRoute = buildRoute(resolvedBasePath, signOutPath);
+    const performSignOut = useCallback(() => {
+        void authClient.signOut().finally(() => {
+            window.location.href = "/";
+        });
+    }, [authClient]);
+    const isSignOutNavigation = useCallback((href) => {
+        const targetPathname = getPathnameFromHref(href);
+        return targetPathname === signOutRoute;
+    }, [signOutRoute]);
+    const handleAuthNav = useCallback((href) => {
+        if (!modalOpenRef.current)
+            return false;
+        if (href.includes(signUpPath)) {
+            setModalView("sign-up");
+            return true;
+        }
+        if (href.includes(signInPath)) {
+            setModalView("sign-in");
+            return true;
+        }
+        return false;
+    }, [signInPath, signUpPath]);
+    const navigate = useCallback((href) => {
+        if (isSignOutNavigation(href)) {
+            performSignOut();
+            return;
+        }
+        if (!handleAuthNav(href)) {
+            window.location.href = href;
+        }
+    }, [handleAuthNav, isSignOutNavigation, performSignOut]);
+    // Custom Link that intercepts auth paths when modal is open
+    const ModalAwareLink = useMemo(() => {
+        return function AkLink({ href, className, children: linkChildren }) {
+            return (_jsx("a", { href: href, className: className, onClick: (e) => {
+                    if (isSignOutNavigation(href)) {
+                        e.preventDefault();
+                        performSignOut();
+                        return;
+                    }
+                    if (handleAuthNav(href)) {
+                        e.preventDefault();
+                    }
+                }, children: linkChildren }));
+        };
+    }, [handleAuthNav, isSignOutNavigation, performSignOut]);
+    return (_jsx(AscendKitContext.Provider, { value: {
+            publicKey,
+            apiUrl,
+            authClient,
+            enabledProviders: providers,
+            refreshSettings,
+            settingsLoaded,
+            settingsError,
+            branding,
+            modal,
+            environmentName,
+            authNotification,
+            clearAuthNotification,
+        }, children: _jsxs(AuthUIProvider, { authClient: authClient, credentials: credentialsEnabled ? { forgotPassword: true } : false, social: socialProviders.length > 0 ? { providers: socialProviders } : undefined, magicLink: magicLinkEnabled, emailVerification: emailVerificationEnabled, signUp: true, account: false, navigate: navigate, replace: navigate, Link: ModalAwareLink, toast: ({ variant = "default", message }) => {
+                if (message)
+                    setAuthNotification({ variant, message });
+            }, localization: {
+                SIGN_IN: environmentName ? `Log in to ${environmentName}` : "Log In",
+                SIGN_IN_DESCRIPTION: credentialsEnabled
+                    ? "Enter your credentials to continue"
+                    : magicLinkEnabled
+                        ? "Enter your email to receive a sign-in link"
+                        : "Choose how you'd like to sign in",
+                SIGN_UP: environmentName ? `Sign up for ${environmentName}` : "Sign Up",
+                SIGN_UP_DESCRIPTION: "Enter your information to create an account",
+                SIGN_IN_WITH: "Continue with",
+                DISABLED_CREDENTIALS_DESCRIPTION: socialProviders.length === 1
+                    ? `Continue with ${socialProviders[0].charAt(0).toUpperCase() + socialProviders[0].slice(1)} to sign in`
+                    : "Choose how you'd like to continue",
+            }, ...(basePath !== undefined && { basePath }), ...(viewPaths !== undefined && { viewPaths }), children: [children, _jsx(AuthModal, {})] }) }));
+}

package/dist/client/use-analytics.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Client-side analytics hook that auto-captures browser context.
+ *
+ * Events are queued in-memory and flushed in batches. Browser details
+ * (userAgent, locale, screen size, referrer, URL) are captured automatically.
+ *
+ * Requires the user to be authenticated — events are tied to the current
+ * user's `usr_` ID automatically.
+ *
+ * @example
+ * ```tsx
+ * function CheckoutButton() {
+ *   const { track } = useAnalytics();
+ *
+ *   return (
+ *     <button onClick={() => track("checkout.completed", { total: 99.99 })}>
+ *       Buy
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useAnalytics(): {
+    track: (event: string, properties?: Record<string, unknown>) => void;
+    flush: () => Promise<void>;
+};
+//# sourceMappingURL=use-analytics.d.ts.map

package/dist/client/use-analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-analytics.d.ts","sourceRoot":"","sources":["../../src/client/use-analytics.ts"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY;mBAgFhB,MAAM,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;EAsBvD"}

package/dist/client/use-analytics.js

@@ -0,0 +1,133 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import { useAscendKitContext } from "./provider";
+import { useAscendKit } from "./hooks";
+const SDK_VERSION = "0.1.0";
+const FLUSH_INTERVAL_MS = 30_000;
+const BATCH_SIZE = 10;
+const MAX_RETRY_ATTEMPTS = 3;
+function getBrowserContext() {
+    return {
+        url: window.location.href,
+        referrer: document.referrer,
+        userAgent: navigator.userAgent,
+        locale: navigator.language,
+        screenWidth: window.screen.width,
+        screenHeight: window.screen.height,
+        sdk: "js-client",
+        sdkVersion: SDK_VERSION,
+    };
+}
+/**
+ * Client-side analytics hook that auto-captures browser context.
+ *
+ * Events are queued in-memory and flushed in batches. Browser details
+ * (userAgent, locale, screen size, referrer, URL) are captured automatically.
+ *
+ * Requires the user to be authenticated — events are tied to the current
+ * user's `usr_` ID automatically.
+ *
+ * @example
+ * ```tsx
+ * function CheckoutButton() {
+ *   const { track } = useAnalytics();
+ *
+ *   return (
+ *     <button onClick={() => track("checkout.completed", { total: 99.99 })}>
+ *       Buy
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useAnalytics() {
+    const { publicKey, apiUrl } = useAscendKitContext();
+    const { user } = useAscendKit();
+    const queueRef = useRef([]);
+    const flushingRef = useRef(false);
+    const userIdRef = useRef(null);
+    // Keep userId ref in sync so flush closures see the latest value
+    userIdRef.current = user?.id ?? null;
+    const sendBatch = useCallback(async (batch, attempt) => {
+        try {
+            const res = await fetch(`${apiUrl}/api/v1/events`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-AscendKit-Public-Key": publicKey,
+                },
+                body: JSON.stringify({ batch }),
+            });
+            if (!res.ok) {
+                throw new Error(`Event flush failed: ${res.status}`);
+            }
+        }
+        catch (err) {
+            if (attempt < MAX_RETRY_ATTEMPTS) {
+                const delay = 2 ** attempt * 1000;
+                await new Promise((r) => setTimeout(r, delay));
+                return sendBatch(batch, attempt + 1);
+            }
+            throw err;
+        }
+    }, [apiUrl, publicKey]);
+    const flush = useCallback(async () => {
+        if (flushingRef.current || queueRef.current.length === 0)
+            return;
+        flushingRef.current = true;
+        const batch = queueRef.current.splice(0);
+        try {
+            await sendBatch(batch, 0);
+        }
+        catch {
+            // Put events back
+            queueRef.current.unshift(...batch);
+        }
+        finally {
+            flushingRef.current = false;
+        }
+    }, [sendBatch]);
+    // Periodic flush
+    useEffect(() => {
+        const timer = setInterval(() => void flush(), FLUSH_INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [flush]);
+    // Flush on page hide (tab close, navigation) using keepalive fetch
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === "hidden" && queueRef.current.length > 0) {
+                const batch = queueRef.current.splice(0);
+                fetch(`${apiUrl}/api/v1/events`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "X-AscendKit-Public-Key": publicKey,
+                    },
+                    body: JSON.stringify({ batch }),
+                    keepalive: true,
+                }).catch(() => {
+                    // Best-effort — events may be lost on tab close
+                });
+            }
+        };
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+    }, [apiUrl, publicKey]);
+    const track = useCallback((event, properties) => {
+        const userId = userIdRef.current;
+        if (!userId)
+            return;
+        const context = getBrowserContext();
+        const prefixedEvent = event.startsWith("app.") ? event : `app.${event}`;
+        queueRef.current.push({
+            event: prefixedEvent,
+            userId,
+            properties: { ...properties, _context: context },
+            timestamp: new Date().toISOString(),
+        });
+        if (queueRef.current.length >= BATCH_SIZE) {
+            void flush();
+        }
+    }, [flush]);
+    return { track, flush };
+}

package/dist/components/auth-card.d.ts

@@ -0,0 +1,20 @@
+import { type AuthViewProps } from "@daveyplate/better-auth-ui";
+interface AscendKitAuthCardProps extends Omit<AuthViewProps, "view"> {
+    /** Which view to show. Defaults to "SIGN_IN". */
+    view?: AuthViewProps["view"];
+}
+/**
+ * Drop-in auth card powered by Better Auth UI.
+ *
+ * Supports sign-in, sign-up, forgot-password views with social login buttons.
+ * Shows "Powered by AscendKit" badge for free-tier projects (server-driven).
+ *
+ * Usage:
+ * ```tsx
+ * <AscendKitAuthCard />
+ * <AscendKitAuthCard view="SIGN_UP" />
+ * ```
+ */
+export declare function AscendKitAuthCard(props: AscendKitAuthCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auth-card.d.ts.map

package/dist/components/auth-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-card.d.ts","sourceRoot":"","sources":["../../src/components/auth-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK1E,UAAU,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAClE,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAqJ9D"}

package/dist/components/auth-card.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { AuthView } from "@daveyplate/better-auth-ui";
+import { useAscendKitContext } from "../client/provider";
+import { BrandingBadge } from "./branding-badge";
+/**
+ * Drop-in auth card powered by Better Auth UI.
+ *
+ * Supports sign-in, sign-up, forgot-password views with social login buttons.
+ * Shows "Powered by AscendKit" badge for free-tier projects (server-driven).
+ *
+ * Usage:
+ * ```tsx
+ * <AscendKitAuthCard />
+ * <AscendKitAuthCard view="SIGN_UP" />
+ * ```
+ */
+export function AscendKitAuthCard(props) {
+    const { settingsLoaded, settingsError, refreshSettings, authNotification, clearAuthNotification } = useAscendKitContext();
+    useEffect(() => {
+        void refreshSettings();
+    }, [refreshSettings]);
+    // Auto-dismiss notification after 8 seconds
+    useEffect(() => {
+        if (!authNotification)
+            return;
+        const timer = setTimeout(clearAuthNotification, 8000);
+        return () => clearTimeout(timer);
+    }, [authNotification, clearAuthNotification]);
+    if (!settingsLoaded) {
+        return (_jsxs("div", { className: "ak-auth-loading", children: [_jsx("div", { className: "ak-spinner" }), _jsx("style", { children: `
+          .ak-auth-loading { display: flex; justify-content: center; align-items: center; padding: 48px 24px; }
+          .ak-spinner { width: 24px; height: 24px; border: 2px solid rgba(128,128,128,0.3); border-top-color: currentColor; border-radius: 50%; animation: ak-spin 0.6s linear infinite; }
+          @keyframes ak-spin { to { transform: rotate(360deg); } }
+        ` })] }));
+    }
+    if (settingsError) {
+        return (_jsxs("div", { children: [_jsxs("div", { className: "ak-auth-error", children: [_jsx("p", { className: "ak-auth-error-message", children: settingsError }), _jsx("style", { children: `
+            .ak-auth-error { padding: 24px; text-align: center; }
+            .ak-auth-error-message { color: var(--ak-modal-muted, #888); font-size: 14px; line-height: 1.5; margin: 0; }
+          ` })] }), _jsx(BrandingBadge, {})] }));
+    }
+    const notifClass = authNotification?.variant === "error" || authNotification?.variant === "warning"
+        ? "ak-auth-notification--error"
+        : authNotification?.variant === "info"
+            ? "ak-auth-notification--info"
+            : "ak-auth-notification--success";
+    return (_jsxs("div", { children: [authNotification && (_jsxs("div", { className: `ak-auth-notification ${notifClass}`, role: "alert", children: [_jsx("p", { className: "ak-auth-notification-msg", children: authNotification.message }), _jsx("button", { type: "button", className: "ak-auth-notification-close", onClick: clearAuthNotification, "aria-label": "Dismiss", children: "\u2715" }), _jsx("style", { children: `
+            .ak-auth-notification {
+              display: flex;
+              align-items: flex-start;
+              gap: 8px;
+              padding: 12px 16px;
+              margin-bottom: 16px;
+              border-radius: 8px;
+              font-size: 14px;
+              line-height: 1.5;
+            }
+            .ak-auth-notification--success {
+              background: var(--ak-notif-success-bg, #f0fdf4);
+              color: var(--ak-notif-success-color, #166534);
+              border: 1px solid var(--ak-notif-success-border, #bbf7d0);
+            }
+            .ak-auth-notification--error {
+              background: var(--ak-notif-error-bg, #fef2f2);
+              color: var(--ak-notif-error-color, #991b1b);
+              border: 1px solid var(--ak-notif-error-border, #fecaca);
+            }
+            .ak-auth-notification--info {
+              background: var(--ak-notif-info-bg, #eff6ff);
+              color: var(--ak-notif-info-color, #1e40af);
+              border: 1px solid var(--ak-notif-info-border, #bfdbfe);
+            }
+            .ak-auth-notification-msg {
+              flex: 1;
+              margin: 0;
+            }
+            .ak-auth-notification-close {
+              flex-shrink: 0;
+              background: none;
+              border: none;
+              cursor: pointer;
+              font-size: 12px;
+              color: inherit;
+              opacity: 0.6;
+              padding: 0 2px;
+              line-height: 1;
+            }
+            .ak-auth-notification-close:hover { opacity: 1; }
+
+            :root.dark .ak-auth-notification--success,
+            html.dark .ak-auth-notification--success {
+              --ak-notif-success-bg: rgba(34, 197, 94, 0.1);
+              --ak-notif-success-color: #86efac;
+              --ak-notif-success-border: rgba(34, 197, 94, 0.2);
+            }
+            :root.dark .ak-auth-notification--error,
+            html.dark .ak-auth-notification--error {
+              --ak-notif-error-bg: rgba(239, 68, 68, 0.1);
+              --ak-notif-error-color: #fca5a5;
+              --ak-notif-error-border: rgba(239, 68, 68, 0.2);
+            }
+            :root.dark .ak-auth-notification--info,
+            html.dark .ak-auth-notification--info {
+              --ak-notif-info-bg: rgba(59, 130, 246, 0.1);
+              --ak-notif-info-color: #93c5fd;
+              --ak-notif-info-border: rgba(59, 130, 246, 0.2);
+            }
+            @media (prefers-color-scheme: dark) {
+              .ak-auth-notification--success:not(.ak-light) {
+                --ak-notif-success-bg: rgba(34, 197, 94, 0.1);
+                --ak-notif-success-color: #86efac;
+                --ak-notif-success-border: rgba(34, 197, 94, 0.2);
+              }
+              .ak-auth-notification--error:not(.ak-light) {
+                --ak-notif-error-bg: rgba(239, 68, 68, 0.1);
+                --ak-notif-error-color: #fca5a5;
+                --ak-notif-error-border: rgba(239, 68, 68, 0.2);
+              }
+              .ak-auth-notification--info:not(.ak-light) {
+                --ak-notif-info-bg: rgba(59, 130, 246, 0.1);
+                --ak-notif-info-color: #93c5fd;
+                --ak-notif-info-border: rgba(59, 130, 246, 0.2);
+              }
+            }
+          ` })] })), _jsx(AuthView, { ...props }), _jsx(BrandingBadge, {})] }));
+}

package/dist/components/auth-modal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Global auth modal rendered automatically by AscendKitProvider.
+ *
+ * Centered viewport overlay with backdrop, auto-closes on auth success.
+ * Supports dark mode via Tailwind `class="dark"` on <html> and
+ * `prefers-color-scheme` media query.
+ */
+export declare function AuthModal(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=auth-modal.d.ts.map

package/dist/components/auth-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-modal.d.ts","sourceRoot":"","sources":["../../src/components/auth-modal.tsx"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,wBAAgB,SAAS,4CA2HxB"}