@crediball/react 0.3.0 → 0.3.1

package/dist/CrediballProvider.js

@@ -2,10 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { PaywallModal } from "./PaywallModal";
+import { subscribeFetchWatcher } from "./fetchWatcher";
 const CrediballContext = createContext(null);
-// Symbol used to mark a patched fetch so double-mount in React Strict Mode (dev)
-// or a second <CrediballProvider> doesn't stack intercepts.
-const CREDIBALL_FETCH_PATCHED = Symbol.for("crediball.fetch.patched");
 /**
  * Pattern B, automated. Wrap your app once:
  *
@@ -22,46 +20,15 @@ const CREDIBALL_FETCH_PATCHED = Symbol.for("crediball.fetch.patched");
  */
 export function CrediballProvider({ children, amounts = [5, 10, 20], onTopup, watchFetch = true, allowCustom = false, customMin, customMax, currencySymbol = "€", title, description, accentColor, }) {
     const [open, setOpen] = useState(false);
-    // Stable callback refs so the fetch interceptor closure doesn't go stale.
     const showPaywall = useCallback(() => setOpen(true), []);
     const hidePaywall = useCallback(() => setOpen(false), []);
+    // Keep a ref so the fetch-watcher closure always calls the latest version.
     const showPaywallRef = useRef(showPaywall);
     showPaywallRef.current = showPaywall;
     useEffect(() => {
-        if (!watchFetch || typeof window === "undefined")
+        if (!watchFetch)
             return;
-        // If another provider (or a double-invoke from React Strict Mode) already
-        // patched this window.fetch in the same tick, skip — the cleanup will restore.
-        const win = window;
-        if (win[CREDIBALL_FETCH_PATCHED])
-            return;
-        const original = window.fetch;
-        win[CREDIBALL_FETCH_PATCHED] = true;
-        window.fetch = async (...args) => {
-            const res = await original(...args);
-            if (res.status === 402) {
-                // Clone so the original response body is still readable by the caller.
-                res
-                    .clone()
-                    .json()
-                    .then((body) => {
-                    if (body && body.code === "insufficient_credits") {
-                        showPaywallRef.current();
-                    }
-                })
-                    .catch(() => {
-                    // Non-JSON 402 (e.g. Stripe webhook): open paywall anyway since any
-                    // 402 from the app's own API routes is very likely a credit shortage.
-                    // If the app has other 402 uses, set watchFetch=false and call
-                    // showPaywall() manually.
-                });
-            }
-            return res;
-        };
-        return () => {
-            window.fetch = original;
-            delete win[CREDIBALL_FETCH_PATCHED];
-        };
+        return subscribeFetchWatcher(() => showPaywallRef.current());
     }, [watchFetch]);
     const ctx = useMemo(() => ({ showPaywall, hidePaywall, open }), [showPaywall, hidePaywall, open]);
     async function handleAdd(amount) {

package/dist/PaywallModal.js

@@ -65,7 +65,7 @@ export function PaywallModal({ open, packages, onSelectPackage, amounts = [5, 10
     return (_jsx("div", { role: "dialog", "aria-modal": "true", style: {
             position: "fixed",
             inset: 0,
-            zIndex: 1000,
+            zIndex: 2147483647,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",

package/dist/fetchWatcher.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Module-level singleton that patches window.fetch once and fans out to all
+ * registered listeners (from CrediballProvider and/or usePaywall). Only one
+ * fetch patch exists at a time regardless of how many components subscribe.
+ * Reference-counted: the patch is removed when the last listener unsubscribes.
+ */
+type Listener = () => void;
+/**
+ * Subscribe to insufficient-credits 402 events detected in window.fetch.
+ * Returns an unsubscribe function — call it in your useEffect cleanup.
+ */
+export declare function subscribeFetchWatcher(listener: Listener): () => void;
+export {};

package/dist/fetchWatcher.js

@@ -0,0 +1,57 @@
+/**
+ * Module-level singleton that patches window.fetch once and fans out to all
+ * registered listeners (from CrediballProvider and/or usePaywall). Only one
+ * fetch patch exists at a time regardless of how many components subscribe.
+ * Reference-counted: the patch is removed when the last listener unsubscribes.
+ */
+let _original = null;
+const _listeners = new Set();
+function install() {
+    if (typeof window === "undefined" || _original !== null)
+        return;
+    _original = window.fetch;
+    window.fetch = async (...args) => {
+        const res = await _original(...args);
+        if (res.status === 402) {
+            res
+                .clone()
+                .json()
+                .then((body) => {
+                if (body != null &&
+                    typeof body === "object" &&
+                    body.code === "insufficient_credits") {
+                    _listeners.forEach((fn) => fn());
+                }
+            })
+                .catch(() => {
+                // Non-JSON 402. Fire listeners anyway — a 402 from the app's own API
+                // route is almost certainly a credit shortage. Set watchFetch=false
+                // and call trigger() manually if your app uses 402 for other purposes.
+                _listeners.forEach((fn) => fn());
+            });
+        }
+        return res;
+    };
+}
+function uninstall() {
+    if (typeof window === "undefined" || _original === null)
+        return;
+    window.fetch = _original;
+    _original = null;
+}
+/**
+ * Subscribe to insufficient-credits 402 events detected in window.fetch.
+ * Returns an unsubscribe function — call it in your useEffect cleanup.
+ */
+export function subscribeFetchWatcher(listener) {
+    if (typeof window === "undefined")
+        return () => { };
+    if (_listeners.size === 0)
+        install();
+    _listeners.add(listener);
+    return () => {
+        _listeners.delete(listener);
+        if (_listeners.size === 0)
+            uninstall();
+    };
+}

package/dist/usePaywall.d.ts

@@ -5,6 +5,17 @@ export type UsePaywallProps = Pick<PaywallModalProps, "amounts" | "amountPrefix"
     onTopup?: (amount: number) => void | Promise<void>;
     /** Called when the user picks a package from `packages`. */
     onSelectPackage?: (pkg: PackageOption) => void | Promise<void>;
+    /**
+     * Auto-detect HTTP 402 `insufficient_credits` responses from any fetch() call
+     * and open the paywall automatically. Defaults to true.
+     *
+     * Set to false if your app uses <CrediballProvider> (it already watches fetch)
+     * or if you want to trigger the paywall exclusively via trigger().
+     *
+     * Note: SSE/streaming routes surface credit errors as stream events (HTTP 200),
+     * not HTTP 402 — call trigger() manually from your stream error handler.
+     */
+    watchFetch?: boolean;
 };
 export interface UsePaywallResult {
     /**
@@ -57,4 +68,4 @@ export interface UsePaywallResult {
  *
  *   return <div>...<button onClick={generate}>Generate</button>...{paywall}</div>;
  */
-export declare function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, }?: UsePaywallProps): UsePaywallResult;
+export declare function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, watchFetch, }?: UsePaywallProps): UsePaywallResult;

package/dist/usePaywall.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { PaywallModal } from "./PaywallModal";
+import { subscribeFetchWatcher } from "./fetchWatcher";
 /**
  * Manages a Crediball paywall modal with a simple, misuse-proof API.
  *
@@ -27,10 +28,18 @@ import { PaywallModal } from "./PaywallModal";
  *
  *   return <div>...<button onClick={generate}>Generate</button>...{paywall}</div>;
  */
-export function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, } = {}) {
+export function usePaywall({ amounts, amountPrefix, packages, onTopup, onSelectPackage, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, balance, balanceRate, currency, watchFetch = true, } = {}) {
     const [isOpen, setIsOpen] = useState(false);
     const trigger = useCallback(() => setIsOpen(true), []);
     const dismiss = useCallback(() => setIsOpen(false), []);
+    // Keep a ref so the fetch-watcher closure always calls the latest trigger.
+    const triggerRef = useRef(trigger);
+    triggerRef.current = trigger;
+    useEffect(() => {
+        if (!watchFetch)
+            return;
+        return subscribeFetchWatcher(() => triggerRef.current());
+    }, [watchFetch]);
     const handleTopup = useCallback(async (amount) => {
         setIsOpen(false);
         await onTopup?.(amount);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",