@silverassist/recaptcha 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] - 2026-02-02
+
+### Added
+
+- **Lazy loading support** for better page performance
+  - New `lazy` prop to defer reCAPTCHA script loading until form is visible
+  - New `lazyRootMargin` prop to configure IntersectionObserver threshold (default: "200px")
+  - Reduces initial JS by ~320KB and improves TBT/TTI metrics
+- **Singleton script loading** prevents duplicate script loads across multiple forms
+- Comprehensive test coverage for lazy loading scenarios
+- Documentation for lazy loading with performance metrics
+
+### Fixed
+
+- Add IntersectionObserver feature detection with fallback to eager loading for older browsers/SSR environments
+- Add error handling tests for non-lazy Script component to ensure proper callback notification
+- Queued callbacks now properly receive error notifications on script load failure
+
 ## [0.1.0] - 2026-01-27
 
 ### Added

package/README.md

@@ -14,6 +14,8 @@ Google reCAPTCHA v3 integration for Next.js applications with Server Actions sup
 - ✅ **Auto Token Refresh**: Tokens refresh automatically before expiration
 - ✅ **Graceful Degradation**: Works in development without credentials
 - ✅ **Configurable Thresholds**: Custom score thresholds per form
+- ✅ **Lazy Loading**: Optional lazy loading for better performance
+- ✅ **Singleton Script Loading**: Prevents duplicate script loads across multiple forms
 
 ## Installation
 
@@ -92,6 +94,197 @@ export async function submitForm(formData: FormData) {
 }
 ```
 
+## ⚠️ Important: Custom FormData
+
+`RecaptchaWrapper` injects a **hidden input field** containing the reCAPTCHA token. If your form handler creates a custom `FormData` object, you must ensure the hidden token is included.
+
+### ❌ This will fail (token is missing):
+
+```tsx
+"use client";
+
+import { RecaptchaWrapper } from "@silverassist/recaptcha";
+import { submitForm } from "./actions"; // Your server action
+
+export function ContactForm() {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    // ❌ Creating empty FormData - hidden reCAPTCHA input is NOT included!
+    const formData = new FormData();
+    formData.set("email", "user@example.com");
+    formData.set("message", "Hello");
+    
+    await submitForm(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <RecaptchaWrapper action="contact_form" />
+      <input name="email" type="email" required />
+      <textarea name="message" required />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+### ✅ Recommended: Pass form element to capture all inputs
+
+```tsx
+"use client";
+
+import { RecaptchaWrapper } from "@silverassist/recaptcha";
+import { submitForm } from "./actions"; // Your server action
+
+export function ContactForm() {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    // ✅ Pass form element - captures ALL inputs including hidden reCAPTCHA token
+    const formData = new FormData(e.currentTarget);
+    
+    await submitForm(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <RecaptchaWrapper action="contact_form" />
+      <input name="email" type="email" required />
+      <textarea name="message" required />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+### ✅ Alternative: Start with form element, then modify
+
+```tsx
+"use client";
+
+import { RecaptchaWrapper } from "@silverassist/recaptcha";
+import { submitForm } from "./actions"; // Your server action
+
+export function ContactForm() {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    // ✅ Start with form element (includes hidden token)
+    const formData = new FormData(e.currentTarget);
+    
+    // Then add/override specific fields
+    formData.set("customField", "customValue");
+    formData.set("timestamp", Date.now().toString());
+    
+    await submitForm(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <RecaptchaWrapper action="contact_form" />
+      <input name="email" type="email" required />
+      <textarea name="message" required />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+## Performance Optimization: Lazy Loading
+
+The `lazy` prop enables lazy loading of the reCAPTCHA script, which defers loading until the form becomes visible in the viewport. This significantly improves initial page load performance.
+
+### Performance Benefits
+
+> **Note**: These metrics are approximate values measured on production websites using Google reCAPTCHA v3. Actual performance improvements will vary based on network conditions, device capabilities, and page complexity.
+
+| Metric | Without Lazy Loading | With Lazy Loading | Improvement |
+|--------|---------------------|-------------------|-------------|
+| **Initial JS** | 320KB+ | 0 KB (until visible) | -320KB |
+| **TBT (Total Blocking Time)** | ~470ms | ~0ms (deferred) | -470ms |
+| **TTI (Time to Interactive)** | +2-3s | Minimal impact | -2-3s |
+
+### Basic Lazy Loading
+
+Enable lazy loading by adding the `lazy` prop:
+
+```tsx
+"use client";
+
+import { RecaptchaWrapper } from "@silverassist/recaptcha";
+
+export function ContactForm() {
+  return (
+    <form action={submitForm}>
+      {/* Script loads only when form is near viewport */}
+      <RecaptchaWrapper action="contact_form" lazy />
+      <input name="email" type="email" required />
+      <textarea name="message" required />
+      <button type="submit">Send</button>
+    </form>
+  );
+}
+```
+
+### Custom Root Margin
+
+Control when the script loads with the `lazyRootMargin` prop (default: `"200px"`):
+
+```tsx
+// Load script earlier (400px before entering viewport)
+<RecaptchaWrapper action="contact_form" lazy lazyRootMargin="400px" />
+
+// Load script later (load only when fully visible)
+<RecaptchaWrapper action="contact_form" lazy lazyRootMargin="0px" />
+
+// Load with negative margin (load only after scrolling past)
+<RecaptchaWrapper action="contact_form" lazy lazyRootMargin="-100px" />
+```
+
+### Best Practices
+
+#### 1. Use lazy loading for below-the-fold forms
+
+```tsx
+// Hero form (above the fold) - load immediately
+<RecaptchaWrapper action="hero_signup" />
+
+// Footer form (below the fold) - lazy load
+<RecaptchaWrapper action="footer_contact" lazy />
+```
+
+#### 2. Multiple forms on the same page
+
+The package automatically uses singleton script loading, so the script is only loaded once even with multiple forms:
+
+```tsx
+export function MultiFormPage() {
+  return (
+    <>
+      {/* First form triggers script load */}
+      <RecaptchaWrapper action="newsletter" lazy />
+      
+      {/* Second form reuses the same script */}
+      <RecaptchaWrapper action="contact" lazy />
+      
+      {/* Third form also reuses the script */}
+      <RecaptchaWrapper action="feedback" lazy />
+    </>
+  );
+}
+```
+
+#### 3. Adjust root margin based on form position
+
+```tsx
+// Form near top - smaller margin for faster load
+<RecaptchaWrapper action="signup" lazy lazyRootMargin="100px" />
+
+// Form far down page - larger margin to load in advance
+<RecaptchaWrapper action="newsletter" lazy lazyRootMargin="500px" />
+```
+
 ## API Reference
 
 ### RecaptchaWrapper
@@ -107,9 +300,25 @@ Client component that loads reCAPTCHA and generates tokens.
   refreshInterval={90000}    // Optional: token refresh interval in ms (default: 90000)
   onTokenGenerated={(token) => {}} // Optional: callback when token is generated
   onError={(error) => {}}    // Optional: callback on error
+  lazy={false}               // Optional: enable lazy loading (default: false)
+  lazyRootMargin="200px"     // Optional: IntersectionObserver rootMargin (default: "200px")
 />
 ```
 
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `action` | `string` | **Required** | Action name for reCAPTCHA analytics (e.g., "contact_form", "signup") |
+| `inputName` | `string` | `"recaptchaToken"` | Name attribute for the hidden input field |
+| `inputId` | `string` | `"recaptcha-token"` | ID attribute for the hidden input field |
+| `siteKey` | `string` | `process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY` | Override the site key from environment variable |
+| `refreshInterval` | `number` | `90000` | Token refresh interval in milliseconds (90 seconds) |
+| `onTokenGenerated` | `(token: string) => void` | `undefined` | Callback invoked when a new token is generated |
+| `onError` | `(error: Error) => void` | `undefined` | Callback invoked when an error occurs |
+| `lazy` | `boolean` | `false` | Enable lazy loading to defer script until form is visible |
+| `lazyRootMargin` | `string` | `"200px"` | IntersectionObserver rootMargin (used when `lazy` is true) |
+
 ### validateRecaptcha
 
 Server-side token validation function.

package/dist/client/index.d.mts

@@ -18,6 +18,10 @@ interface RecaptchaWrapperProps {
     onTokenGenerated?: (token: string) => void;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
+    /** Enable lazy loading (default: false for backward compatibility) */
+    lazy?: boolean;
+    /** IntersectionObserver rootMargin for lazy loading (default: "200px") */
+    lazyRootMargin?: string;
 }
 /**
  * Global window interface extension for reCAPTCHA
@@ -30,6 +34,15 @@ declare global {
                 action: string;
             }) => Promise<string>;
         };
+        /** Flag to track if reCAPTCHA script has loaded */
+        __recaptchaLoaded?: boolean;
+        /** Flag to track if reCAPTCHA script is currently loading */
+        __recaptchaLoading?: boolean;
+        /** Callbacks to execute when script finishes loading */
+        __recaptchaCallbacks?: Array<{
+            onLoad: () => void;
+            onError: (error: Error) => void;
+        }>;
     }
 }
 
@@ -42,6 +55,7 @@ declare global {
  * - Refreshes token periodically (tokens expire after 2 minutes)
  * - Stores token in hidden input field for form submission
  * - Graceful fallback when not configured
+ * - Lazy loading support to defer script loading until visible
  *
  * @example Basic usage
  * ```tsx
@@ -69,7 +83,17 @@ declare global {
  *   onError={(error) => console.error("Error:", error)}
  * />
  * ```
+ *
+ * @example Lazy loading for better performance
+ * ```tsx
+ * <RecaptchaWrapper action="contact_form" lazy />
+ * ```
+ *
+ * @example Lazy loading with custom root margin
+ * ```tsx
+ * <RecaptchaWrapper action="contact_form" lazy lazyRootMargin="400px" />
+ * ```
  */
-declare function RecaptchaWrapper({ action, inputName, inputId, siteKey: propSiteKey, refreshInterval, onTokenGenerated, onError, }: RecaptchaWrapperProps): react_jsx_runtime.JSX.Element | null;
+declare function RecaptchaWrapper({ action, inputName, inputId, siteKey: propSiteKey, refreshInterval, onTokenGenerated, onError, lazy, lazyRootMargin, }: RecaptchaWrapperProps): react_jsx_runtime.JSX.Element | null;
 
 export { RecaptchaWrapper, RecaptchaWrapper as default };

package/dist/client/index.d.ts

@@ -18,6 +18,10 @@ interface RecaptchaWrapperProps {
     onTokenGenerated?: (token: string) => void;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
+    /** Enable lazy loading (default: false for backward compatibility) */
+    lazy?: boolean;
+    /** IntersectionObserver rootMargin for lazy loading (default: "200px") */
+    lazyRootMargin?: string;
 }
 /**
  * Global window interface extension for reCAPTCHA
@@ -30,6 +34,15 @@ declare global {
                 action: string;
             }) => Promise<string>;
         };
+        /** Flag to track if reCAPTCHA script has loaded */
+        __recaptchaLoaded?: boolean;
+        /** Flag to track if reCAPTCHA script is currently loading */
+        __recaptchaLoading?: boolean;
+        /** Callbacks to execute when script finishes loading */
+        __recaptchaCallbacks?: Array<{
+            onLoad: () => void;
+            onError: (error: Error) => void;
+        }>;
     }
 }
 
@@ -42,6 +55,7 @@ declare global {
  * - Refreshes token periodically (tokens expire after 2 minutes)
  * - Stores token in hidden input field for form submission
  * - Graceful fallback when not configured
+ * - Lazy loading support to defer script loading until visible
  *
  * @example Basic usage
  * ```tsx
@@ -69,7 +83,17 @@ declare global {
  *   onError={(error) => console.error("Error:", error)}
  * />
  * ```
+ *
+ * @example Lazy loading for better performance
+ * ```tsx
+ * <RecaptchaWrapper action="contact_form" lazy />
+ * ```
+ *
+ * @example Lazy loading with custom root margin
+ * ```tsx
+ * <RecaptchaWrapper action="contact_form" lazy lazyRootMargin="400px" />
+ * ```
  */
-declare function RecaptchaWrapper({ action, inputName, inputId, siteKey: propSiteKey, refreshInterval, onTokenGenerated, onError, }: RecaptchaWrapperProps): react_jsx_runtime.JSX.Element | null;
+declare function RecaptchaWrapper({ action, inputName, inputId, siteKey: propSiteKey, refreshInterval, onTokenGenerated, onError, lazy, lazyRootMargin, }: RecaptchaWrapperProps): react_jsx_runtime.JSX.Element | null;
 
 export { RecaptchaWrapper, RecaptchaWrapper as default };

package/dist/client/index.js

@@ -17,6 +17,39 @@ var RECAPTCHA_CONFIG = {
   /** Default token refresh interval */
   tokenRefreshInterval: DEFAULT_TOKEN_REFRESH_INTERVAL
 };
+function loadRecaptchaScript(siteKey, onLoad, onError) {
+  if (typeof window !== "undefined" && window.__recaptchaLoaded) {
+    onLoad();
+    return;
+  }
+  if (typeof window !== "undefined" && window.__recaptchaLoading) {
+    window.__recaptchaCallbacks = window.__recaptchaCallbacks || [];
+    window.__recaptchaCallbacks.push({ onLoad, onError });
+    return;
+  }
+  if (typeof window !== "undefined") {
+    window.__recaptchaLoading = true;
+    window.__recaptchaCallbacks = [];
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+    script.async = true;
+    script.onload = () => {
+      window.__recaptchaLoaded = true;
+      window.__recaptchaLoading = false;
+      onLoad();
+      window.__recaptchaCallbacks?.forEach((cb) => cb.onLoad());
+      window.__recaptchaCallbacks = [];
+    };
+    script.onerror = () => {
+      window.__recaptchaLoading = false;
+      const error = new Error("Failed to load reCAPTCHA script");
+      onError(error);
+      window.__recaptchaCallbacks?.forEach((cb) => cb.onError(error));
+      window.__recaptchaCallbacks = [];
+    };
+    document.head.appendChild(script);
+  }
+}
 function RecaptchaWrapper({
   action,
   inputName = "recaptchaToken",
@@ -24,11 +57,16 @@ function RecaptchaWrapper({
   siteKey: propSiteKey,
   refreshInterval = RECAPTCHA_CONFIG.tokenRefreshInterval,
   onTokenGenerated,
-  onError
+  onError,
+  lazy = false,
+  lazyRootMargin = "200px"
 }) {
   const siteKey = propSiteKey ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
   const tokenInputRef = react.useRef(null);
   const refreshIntervalRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(!lazy);
+  const [scriptLoaded, setScriptLoaded] = react.useState(false);
   const executeRecaptcha = react.useCallback(async () => {
     if (!siteKey) {
       return;
@@ -60,7 +98,49 @@ function RecaptchaWrapper({
     }
   }, [siteKey, action, onTokenGenerated, onError]);
   react.useEffect(() => {
-    executeRecaptcha();
+    if (!lazy || !containerRef.current) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsVisible(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: lazyRootMargin }
+    );
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [lazy, lazyRootMargin]);
+  react.useEffect(() => {
+    if (!siteKey) return;
+    if (lazy) return;
+    if (typeof window !== "undefined" && !window.__recaptchaLoaded && !window.__recaptchaLoading) {
+      window.__recaptchaLoading = true;
+      window.__recaptchaCallbacks = window.__recaptchaCallbacks || [];
+    }
+  }, [siteKey, lazy]);
+  react.useEffect(() => {
+    if (!siteKey) return;
+    if (!lazy) return;
+    if (!isVisible) return;
+    const handleLoad = () => {
+      setScriptLoaded(true);
+      executeRecaptcha();
+    };
+    const handleError = (error) => {
+      console.error("[reCAPTCHA] Failed to load reCAPTCHA script");
+      if (onError) {
+        onError(error);
+      }
+    };
+    loadRecaptchaScript(siteKey, handleLoad, handleError);
+  }, [siteKey, lazy, isVisible, executeRecaptcha, onError]);
+  react.useEffect(() => {
+    if (!scriptLoaded) return;
     refreshIntervalRef.current = setInterval(() => {
       executeRecaptcha();
     }, refreshInterval);
@@ -69,7 +149,7 @@ function RecaptchaWrapper({
         clearInterval(refreshIntervalRef.current);
       }
     };
-  }, [executeRecaptcha, refreshInterval]);
+  }, [scriptLoaded, executeRecaptcha, refreshInterval]);
   if (!siteKey) {
     if (process.env.NODE_ENV === "development") {
       console.warn(
@@ -78,7 +158,7 @@ function RecaptchaWrapper({
     }
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { display: "contents" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -89,15 +169,28 @@ function RecaptchaWrapper({
         "data-testid": "recaptcha-token-input"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    !lazy && /* @__PURE__ */ jsxRuntime.jsx(
       Script__default.default,
       {
         src: `https://www.google.com/recaptcha/api.js?render=${siteKey}`,
         strategy: "afterInteractive",
         onLoad: () => {
+          if (typeof window !== "undefined") {
+            window.__recaptchaLoaded = true;
+            window.__recaptchaLoading = false;
+            window.__recaptchaCallbacks?.forEach((cb) => cb.onLoad());
+            window.__recaptchaCallbacks = [];
+          }
+          setScriptLoaded(true);
           executeRecaptcha();
         },
         onError: () => {
+          if (typeof window !== "undefined") {
+            window.__recaptchaLoading = false;
+            const error = new Error("Failed to load reCAPTCHA script");
+            window.__recaptchaCallbacks?.forEach((cb) => cb.onError(error));
+            window.__recaptchaCallbacks = [];
+          }
           console.error("[reCAPTCHA] Failed to load reCAPTCHA script");
           if (onError) {
             onError(new Error("Failed to load reCAPTCHA script"));

package/dist/client/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/index.ts","../../src/client/index.tsx"],"names":["useRef","useCallback","useEffect","jsxs","Fragment","jsx","Script"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * reCAPTCHA Configuration Constants\n *\n * Default configuration values for reCAPTCHA v3 integration.\n *\n * @packageDocumentation\n */\n\nimport type { RecaptchaConfig } from \"../types\";\n\n/**\n * Default score threshold for validation\n * Scores below this value are considered suspicious\n * Range: 0.0 (bot) to 1.0 (human)\n */\nexport const DEFAULT_SCORE_THRESHOLD = 0.5;\n\n/**\n * Token refresh interval in milliseconds\n * reCAPTCHA tokens expire after 2 minutes, so we refresh at 90 seconds\n * to ensure tokens are always valid when forms are submitted\n */\nexport const DEFAULT_TOKEN_REFRESH_INTERVAL = 90000;\n\n/**\n * reCAPTCHA v3 configuration constants\n */\nexport const RECAPTCHA_CONFIG: RecaptchaConfig = {\n  /** Google reCAPTCHA verification endpoint */\n  verifyUrl: \"https://www.google.com/recaptcha/api/siteverify\",\n  /** Default score threshold for validation */\n  defaultScoreThreshold: DEFAULT_SCORE_THRESHOLD,\n  /** Default token refresh interval */\n  tokenRefreshInterval: DEFAULT_TOKEN_REFRESH_INTERVAL,\n} as const;\n","/**\n * reCAPTCHA v3 Client Component\n *\n * Loads the Google reCAPTCHA script and generates tokens automatically.\n * Place inside a form to add invisible spam protection.\n *\n * @see https://developers.google.com/recaptcha/docs/v3\n * @packageDocumentation\n */\n\n\"use client\";\n\nimport Script from \"next/script\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { RecaptchaWrapperProps } from \"../types\";\nimport { RECAPTCHA_CONFIG } from \"../constants\";\n\n/**\n * RecaptchaWrapper - Client component for reCAPTCHA v3 integration\n *\n * Features:\n * - Loads reCAPTCHA script automatically\n * - Generates token when script loads\n * - Refreshes token periodically (tokens expire after 2 minutes)\n * - Stores token in hidden input field for form submission\n * - Graceful fallback when not configured\n *\n * @example Basic usage\n * ```tsx\n * <form action={formAction}>\n *   <RecaptchaWrapper action=\"contact_form\" />\n *   <input name=\"email\" type=\"email\" required />\n *   <button type=\"submit\">Submit</button>\n * </form>\n * ```\n *\n * @example Custom input name\n * ```tsx\n * <RecaptchaWrapper\n *   action=\"signup\"\n *   inputName=\"captchaToken\"\n *   inputId=\"signup-captcha\"\n * />\n * ```\n *\n * @example With callbacks\n * ```tsx\n * <RecaptchaWrapper\n *   action=\"payment\"\n *   onTokenGenerated={(token) => console.log(\"Token:\", token)}\n *   onError={(error) => console.error(\"Error:\", error)}\n * />\n * ```\n */\nexport function RecaptchaWrapper({\n  action,\n  inputName = \"recaptchaToken\",\n  inputId = \"recaptcha-token\",\n  siteKey: propSiteKey,\n  refreshInterval = RECAPTCHA_CONFIG.tokenRefreshInterval,\n  onTokenGenerated,\n  onError,\n}: RecaptchaWrapperProps) {\n  // Use prop siteKey or fall back to environment variable\n  const siteKey = propSiteKey ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;\n  const tokenInputRef = useRef<HTMLInputElement>(null);\n  const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Execute reCAPTCHA and store token\n  const executeRecaptcha = useCallback(async () => {\n    if (!siteKey) {\n      return;\n    }\n\n    try {\n      if (typeof window !== \"undefined\" && window.grecaptcha) {\n        window.grecaptcha.ready(async () => {\n          try {\n            const token = await window.grecaptcha.execute(siteKey, { action });\n\n            // Store token in hidden input\n            if (tokenInputRef.current) {\n              tokenInputRef.current.value = token;\n            }\n\n            // Call callback if provided\n            if (onTokenGenerated) {\n              onTokenGenerated(token);\n            }\n          } catch (error) {\n            console.error(\"[reCAPTCHA] Error executing reCAPTCHA:\", error);\n            if (onError && error instanceof Error) {\n              onError(error);\n            }\n          }\n        });\n      }\n    } catch (error) {\n      console.error(\"[reCAPTCHA] Error:\", error);\n      if (onError && error instanceof Error) {\n        onError(error);\n      }\n    }\n  }, [siteKey, action, onTokenGenerated, onError]);\n\n  // Set up token refresh interval (tokens expire after 2 minutes)\n  useEffect(() => {\n    // Generate token immediately when component mounts\n    executeRecaptcha();\n\n    // Set up refresh interval\n    refreshIntervalRef.current = setInterval(() => {\n      executeRecaptcha();\n    }, refreshInterval);\n\n    // Cleanup interval on unmount\n    return () => {\n      if (refreshIntervalRef.current) {\n        clearInterval(refreshIntervalRef.current);\n      }\n    };\n  }, [executeRecaptcha, refreshInterval]);\n\n  // Don't render anything if site key is not configured\n  if (!siteKey) {\n    if (process.env.NODE_ENV === \"development\") {\n      console.warn(\n        \"[reCAPTCHA] Site key not configured. Set NEXT_PUBLIC_RECAPTCHA_SITE_KEY environment variable.\"\n      );\n    }\n    return null;\n  }\n\n  return (\n    <>\n      {/* Hidden input to store the token */}\n      <input\n        ref={tokenInputRef}\n        type=\"hidden\"\n        name={inputName}\n        id={inputId}\n        data-testid=\"recaptcha-token-input\"\n      />\n\n      {/* Load reCAPTCHA script */}\n      <Script\n        src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}\n        strategy=\"afterInteractive\"\n        onLoad={() => {\n          executeRecaptcha();\n        }}\n        onError={() => {\n          console.error(\"[reCAPTCHA] Failed to load reCAPTCHA script\");\n          if (onError) {\n            onError(new Error(\"Failed to load reCAPTCHA script\"));\n          }\n        }}\n      />\n    </>\n  );\n}\n\nexport default RecaptchaWrapper;\n"]}
+{"version":3,"sources":["../../src/constants/index.ts","../../src/client/index.tsx"],"names":["useRef","useState","useCallback","useEffect","jsxs","jsx","Script"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * reCAPTCHA Configuration Constants\n *\n * Default configuration values for reCAPTCHA v3 integration.\n *\n * @packageDocumentation\n */\n\nimport type { RecaptchaConfig } from \"../types\";\n\n/**\n * Default score threshold for validation\n * Scores below this value are considered suspicious\n * Range: 0.0 (bot) to 1.0 (human)\n */\nexport const DEFAULT_SCORE_THRESHOLD = 0.5;\n\n/**\n * Token refresh interval in milliseconds\n * reCAPTCHA tokens expire after 2 minutes, so we refresh at 90 seconds\n * to ensure tokens are always valid when forms are submitted\n */\nexport const DEFAULT_TOKEN_REFRESH_INTERVAL = 90000;\n\n/**\n * reCAPTCHA v3 configuration constants\n */\nexport const RECAPTCHA_CONFIG: RecaptchaConfig = {\n  /** Google reCAPTCHA verification endpoint */\n  verifyUrl: \"https://www.google.com/recaptcha/api/siteverify\",\n  /** Default score threshold for validation */\n  defaultScoreThreshold: DEFAULT_SCORE_THRESHOLD,\n  /** Default token refresh interval */\n  tokenRefreshInterval: DEFAULT_TOKEN_REFRESH_INTERVAL,\n} as const;\n","/**\n * reCAPTCHA v3 Client Component\n *\n * Loads the Google reCAPTCHA script and generates tokens automatically.\n * Place inside a form to add invisible spam protection.\n *\n * @see https://developers.google.com/recaptcha/docs/v3\n * @packageDocumentation\n */\n\n\"use client\";\n\nimport Script from \"next/script\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { RecaptchaWrapperProps } from \"../types\";\nimport { RECAPTCHA_CONFIG } from \"../constants\";\n\n/**\n * Load reCAPTCHA script manually (singleton pattern)\n * Ensures script is only loaded once globally\n */\nfunction loadRecaptchaScript(\n  siteKey: string,\n  onLoad: () => void,\n  onError: (error: Error) => void\n): void {\n  // Already loaded\n  if (typeof window !== \"undefined\" && window.__recaptchaLoaded) {\n    onLoad();\n    return;\n  }\n\n  // Currently loading - add callbacks\n  if (typeof window !== \"undefined\" && window.__recaptchaLoading) {\n    window.__recaptchaCallbacks = window.__recaptchaCallbacks || [];\n    window.__recaptchaCallbacks.push({ onLoad, onError });\n    return;\n  }\n\n  // Start loading\n  if (typeof window !== \"undefined\") {\n    window.__recaptchaLoading = true;\n    window.__recaptchaCallbacks = [];\n\n    const script = document.createElement(\"script\");\n    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;\n    script.async = true;\n\n    script.onload = () => {\n      window.__recaptchaLoaded = true;\n      window.__recaptchaLoading = false;\n      onLoad();\n      window.__recaptchaCallbacks?.forEach((cb) => cb.onLoad());\n      window.__recaptchaCallbacks = [];\n    };\n\n    script.onerror = () => {\n      window.__recaptchaLoading = false;\n      const error = new Error(\"Failed to load reCAPTCHA script\");\n      onError(error);\n      // Notify all queued callbacks about the failure\n      window.__recaptchaCallbacks?.forEach((cb) => cb.onError(error));\n      window.__recaptchaCallbacks = [];\n    };\n\n    document.head.appendChild(script);\n  }\n}\n\n/**\n * RecaptchaWrapper - Client component for reCAPTCHA v3 integration\n *\n * Features:\n * - Loads reCAPTCHA script automatically\n * - Generates token when script loads\n * - Refreshes token periodically (tokens expire after 2 minutes)\n * - Stores token in hidden input field for form submission\n * - Graceful fallback when not configured\n * - Lazy loading support to defer script loading until visible\n *\n * @example Basic usage\n * ```tsx\n * <form action={formAction}>\n *   <RecaptchaWrapper action=\"contact_form\" />\n *   <input name=\"email\" type=\"email\" required />\n *   <button type=\"submit\">Submit</button>\n * </form>\n * ```\n *\n * @example Custom input name\n * ```tsx\n * <RecaptchaWrapper\n *   action=\"signup\"\n *   inputName=\"captchaToken\"\n *   inputId=\"signup-captcha\"\n * />\n * ```\n *\n * @example With callbacks\n * ```tsx\n * <RecaptchaWrapper\n *   action=\"payment\"\n *   onTokenGenerated={(token) => console.log(\"Token:\", token)}\n *   onError={(error) => console.error(\"Error:\", error)}\n * />\n * ```\n *\n * @example Lazy loading for better performance\n * ```tsx\n * <RecaptchaWrapper action=\"contact_form\" lazy />\n * ```\n *\n * @example Lazy loading with custom root margin\n * ```tsx\n * <RecaptchaWrapper action=\"contact_form\" lazy lazyRootMargin=\"400px\" />\n * ```\n */\nexport function RecaptchaWrapper({\n  action,\n  inputName = \"recaptchaToken\",\n  inputId = \"recaptcha-token\",\n  siteKey: propSiteKey,\n  refreshInterval = RECAPTCHA_CONFIG.tokenRefreshInterval,\n  onTokenGenerated,\n  onError,\n  lazy = false,\n  lazyRootMargin = \"200px\",\n}: RecaptchaWrapperProps) {\n  // Use prop siteKey or fall back to environment variable\n  const siteKey = propSiteKey ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;\n  const tokenInputRef = useRef<HTMLInputElement>(null);\n  const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(!lazy); // If not lazy, start visible\n  const [scriptLoaded, setScriptLoaded] = useState(false);\n\n  // Execute reCAPTCHA and store token\n  const executeRecaptcha = useCallback(async () => {\n    if (!siteKey) {\n      return;\n    }\n\n    try {\n      if (typeof window !== \"undefined\" && window.grecaptcha) {\n        window.grecaptcha.ready(async () => {\n          try {\n            const token = await window.grecaptcha.execute(siteKey, { action });\n\n            // Store token in hidden input\n            if (tokenInputRef.current) {\n              tokenInputRef.current.value = token;\n            }\n\n            // Call callback if provided\n            if (onTokenGenerated) {\n              onTokenGenerated(token);\n            }\n          } catch (error) {\n            console.error(\"[reCAPTCHA] Error executing reCAPTCHA:\", error);\n            if (onError && error instanceof Error) {\n              onError(error);\n            }\n          }\n        });\n      }\n    } catch (error) {\n      console.error(\"[reCAPTCHA] Error:\", error);\n      if (onError && error instanceof Error) {\n        onError(error);\n      }\n    }\n  }, [siteKey, action, onTokenGenerated, onError]);\n\n  // IntersectionObserver for lazy loading\n  useEffect(() => {\n    if (!lazy || !containerRef.current) return;\n\n    // Fallback to eager loading if IntersectionObserver is not supported\n    // (older browsers, some SSR/test environments)\n    if (typeof IntersectionObserver === \"undefined\") {\n      setIsVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: lazyRootMargin }\n    );\n\n    observer.observe(containerRef.current);\n    return () => observer.disconnect();\n  }, [lazy, lazyRootMargin]);\n\n  // Mark loading flag for non-lazy mode to prevent duplicate loads\n  useEffect(() => {\n    if (!siteKey) return;\n    if (lazy) return; // Only for non-lazy mode\n\n    // Set loading flag before Script component loads\n    if (typeof window !== \"undefined\" && !window.__recaptchaLoaded && !window.__recaptchaLoading) {\n      window.__recaptchaLoading = true;\n      window.__recaptchaCallbacks = window.__recaptchaCallbacks || [];\n    }\n  }, [siteKey, lazy]);\n\n  // Load script when visible (only for lazy mode)\n  useEffect(() => {\n    if (!siteKey) return;\n    if (!lazy) return; // Only use manual loading for lazy mode\n    if (!isVisible) return; // Wait until visible\n\n    const handleLoad = () => {\n      setScriptLoaded(true);\n      executeRecaptcha();\n    };\n\n    const handleError = (error: Error) => {\n      console.error(\"[reCAPTCHA] Failed to load reCAPTCHA script\");\n      if (onError) {\n        onError(error);\n      }\n    };\n\n    loadRecaptchaScript(siteKey, handleLoad, handleError);\n  }, [siteKey, lazy, isVisible, executeRecaptcha, onError]);\n\n  // Set up token refresh interval (tokens expire after 2 minutes)\n  useEffect(() => {\n    // Only set up refresh if script is loaded\n    if (!scriptLoaded) return;\n\n    // Set up refresh interval\n    refreshIntervalRef.current = setInterval(() => {\n      executeRecaptcha();\n    }, refreshInterval);\n\n    // Cleanup interval on unmount\n    return () => {\n      if (refreshIntervalRef.current) {\n        clearInterval(refreshIntervalRef.current);\n      }\n    };\n  }, [scriptLoaded, executeRecaptcha, refreshInterval]);\n\n  // Don't render anything if site key is not configured\n  if (!siteKey) {\n    if (process.env.NODE_ENV === \"development\") {\n      console.warn(\n        \"[reCAPTCHA] Site key not configured. Set NEXT_PUBLIC_RECAPTCHA_SITE_KEY environment variable.\"\n      );\n    }\n    return null;\n  }\n\n  return (\n    <div ref={containerRef} style={{ display: \"contents\" }}>\n      {/* \n        Note: display: contents makes this wrapper transparent to the DOM layout.\n        The wrapper is needed for IntersectionObserver but shouldn't affect form layout.\n        Browser support: https://caniuse.com/css-display-contents\n      */}\n      {/* Hidden input to store the token */}\n      <input\n        ref={tokenInputRef}\n        type=\"hidden\"\n        name={inputName}\n        id={inputId}\n        data-testid=\"recaptcha-token-input\"\n      />\n\n      {/* Load reCAPTCHA script using Next.js Script component for non-lazy mode */}\n      {!lazy && (\n        <Script\n          src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}\n          strategy=\"afterInteractive\"\n          onLoad={() => {\n            // Mark script as loaded globally for singleton behavior\n            if (typeof window !== \"undefined\") {\n              window.__recaptchaLoaded = true;\n              window.__recaptchaLoading = false;\n              // Flush all queued callbacks from lazy instances\n              window.__recaptchaCallbacks?.forEach((cb) => cb.onLoad());\n              window.__recaptchaCallbacks = [];\n            }\n            setScriptLoaded(true);\n            executeRecaptcha();\n          }}\n          onError={() => {\n            // Mark loading as complete on error\n            if (typeof window !== \"undefined\") {\n              window.__recaptchaLoading = false;\n              // Notify all queued callbacks about the failure\n              const error = new Error(\"Failed to load reCAPTCHA script\");\n              window.__recaptchaCallbacks?.forEach((cb) => cb.onError(error));\n              window.__recaptchaCallbacks = [];\n            }\n            console.error(\"[reCAPTCHA] Failed to load reCAPTCHA script\");\n            if (onError) {\n              onError(new Error(\"Failed to load reCAPTCHA script\"));\n            }\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default RecaptchaWrapper;\n"]}