cryptique-sdk 1.2.14 → 1.2.16

package/lib/esm/index.js

@@ -143,7 +143,16 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
   }
   
   // Parse disabled events (comma-separated string to array)
-  // Available events: page_view, element_click, rage_click, page_scroll, form_submit, form_focus, media_play, media_pause, text_selection
+  // Disabling works per-event-name. All auto event names that can be individually disabled:
+  //   Interaction:  element_click, element_hover, rage_click, dead_click, page_scroll, text_selection
+  //   Navigation:   page_view
+  //   Form:         form_submit, form_validation_error, form_abandoned
+  //   Media:        media_play, media_pause, media_ended
+  //   Visibility:   element_view
+  //   Error:        js_error, network_error
+  //   Performance:  page_performance
+  //   Session:      session_start, session_end
+  // Example: auto-events-disabled-events="js_error,network_error,page_performance"
   if (disabledEventsAttr && disabledEventsAttr.trim()) {
     CONFIG.AUTO_EVENTS.disabledEvents = disabledEventsAttr
       .split(',')
@@ -158,7 +167,9 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
     isInitialized: false,           // Prevents API calls during initialization
     sessionConfirmed: false,       // True after first successful POST /api/sdk/track (session exists on server)
     eip6963Providers: [],           // EIP-6963 discovered wallet providers
-    reportedWalletAddress: null    // Last wallet address reported to backend (prevents duplicate calls)
+    reportedWalletAddress: null,   // Last wallet address reported to backend (prevents duplicate calls)
+    activeTimeMs: 0,               // Cumulative time tab was in foreground (for active_time_seconds)
+    tabFocusTimestamp: null        // When the tab most recently became visible
   };
 
   // Ready promise - resolves when SDK is fully initialized (allows consumers to await init)
@@ -4037,10 +4048,12 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       const interactionTypes = [
         'clicks', 'mediaInteractions', 'contextMenuEvents', 'windowEvents',
         'formInteractions', 'scrollEvents', 'focusEvents', 'hoverEvents',
-        'formSubmissions', 'fieldChanges', 'validationErrors',
+        'formSubmissions', 'fieldChanges',
         'keyboardEvents', 'copyPasteEvents', 'dragDropEvents',
-        'touchEvents', 'performanceEvents', 'errorEvents',
-        'networkEvents', 'formAnalytics'
+        'touchEvents', 'formAnalytics'
+        // Note: validationErrors, performanceEvents, errorEvents, networkEvents are no longer
+        // stored in session interactions — they are emitted as individual queryable auto events
+        // (form_validation_error, page_performance, js_error, network_error)
       ];
       
       // Helper to normalize path for matching
@@ -4258,7 +4271,10 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         interactions: {
           ...sessionInteractions,
           chronological: chronologicalInteractions.chronological || []
-        }
+        },
+
+        // Active tab time in ms (tab foreground time only, for active_time_seconds in DB)
+        active_time_ms: sourceData.active_time_ms || null
       };
       
       // Remove null/undefined values for cleaner payload (optional - can be kept for explicit nulls)
@@ -4741,17 +4757,20 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (event.target && 
               (event.target.tagName === 'INPUT' || 
                event.target.tagName === 'TEXTAREA')) {
-            const validationData = {
-              type: 'validation_error',
-              fieldType: event.target.type || '',
-              fieldName: event.target.name || '',
-              fieldId: event.target.id || '',
-              formId: event.target.form ? event.target.form.id : '',
-              validationMessage: event.target.validationMessage || '',
-              path: window.location.pathname
-            };
-            
-            InteractionManager.add('validationErrors', validationData);
+            EventsManager.trackAutoEvent('form_validation_error', {
+              field_id: event.target.id || '',
+              field_name: event.target.name || '',
+              field_type: event.target.type || event.target.tagName.toLowerCase(),
+              form_id: event.target.form ? (event.target.form.id || '') : '',
+              validation_message: event.target.validationMessage || ''
+            }, {
+              element_id: event.target.id || '',
+              element_name: event.target.name || '',
+              element_tag_name: event.target.tagName || '',
+              element_type: event.target.type || '',
+              element_class: event.target.className || '',
+              element_text: (event.target.placeholder || event.target.getAttribute('aria-label') || '').trim().slice(0, 100)
+            });
           }
         }, true);
       } catch (error) {
@@ -5206,23 +5225,62 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      */
     startPerformanceTracking() {
       try {
+        // Collect Core Web Vitals via PerformanceObserver + Navigation Timing
+        // Emits a single queryable page_performance auto event per page load
+        const vitals = { lcp: null, cls: 0, inp: null, fcp: null, ttfb: null };
+
+        // LCP
+        try {
+          new PerformanceObserver((list) => {
+            const entries = list.getEntries();
+            if (entries.length > 0) {
+              vitals.lcp = Math.round(entries[entries.length - 1].startTime);
+            }
+          }).observe({ type: 'largest-contentful-paint', buffered: true });
+        } catch (e) {}
+
+        // CLS
+        try {
+          new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if (!entry.hadRecentInput) {
+                vitals.cls = Math.round((vitals.cls + entry.value) * 10000) / 10000;
+              }
+            }
+          }).observe({ type: 'layout-shift', buffered: true });
+        } catch (e) {}
+
+        // INP (interaction to next paint)
+        try {
+          new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if (entry.duration && (vitals.inp === null || entry.duration > vitals.inp)) {
+                vitals.inp = Math.round(entry.duration);
+              }
+            }
+          }).observe({ type: 'event', buffered: true, durationThreshold: 16 });
+        } catch (e) {}
+
+        // FCP + TTFB from paint + navigation entries (available after load)
         window.addEventListener('load', () => {
-          // Wait a bit for all resources to load
           setTimeout(() => {
-            const navigation = performance.getEntriesByType('navigation')[0];
-            const paint = performance.getEntriesByType('paint');
-            
-            const performanceData = {
-              type: 'page_load_complete',
-              loadTime: navigation ? (navigation.loadEventEnd - navigation.navigationStart) : 0,
-              domContentLoaded: navigation ? (navigation.domContentLoadedEventEnd - navigation.navigationStart) : 0,
-              firstPaint: paint.find(p => p.name === 'first-paint')?.startTime || 0,
-              firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime || 0,
-              path: window.location.pathname
-            };
-            
-            InteractionManager.add('performanceEvents', performanceData);
-          }, 1000);
+            try {
+              const nav = performance.getEntriesByType('navigation')[0];
+              const paint = performance.getEntriesByType('paint');
+              vitals.ttfb = nav ? Math.round(nav.responseStart - nav.requestStart) : null;
+              vitals.fcp = paint.find(p => p.name === 'first-contentful-paint')
+                ? Math.round(paint.find(p => p.name === 'first-contentful-paint').startTime)
+                : null;
+            } catch (e) {}
+
+            EventsManager.trackAutoEvent('page_performance', {
+              lcp: vitals.lcp,
+              cls: vitals.cls,
+              inp: vitals.inp,
+              fcp: vitals.fcp,
+              ttfb: vitals.ttfb
+            });
+          }, 1500);
         });
       } catch (error) {
         }
@@ -5230,40 +5288,28 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     /**
      * ErrorTracker - Tracks JavaScript errors
+     * Emits as queryable auto events (js_error) instead of session-level JSONB
      */
     startErrorTracking() {
       try {
         window.addEventListener('error', (event) => {
-          const errorData = {
-            type: 'javascript_error',
+          EventsManager.trackAutoEvent('js_error', {
+            error_type: 'javascript_error',
             message: event.message || '',
-            filename: event.filename || '',
-            lineno: event.lineno || 0,
-            colno: event.colno || 0,
-            error: event.error?.stack || '',
-            errorElement: {
-              tagName: event.target?.tagName || '',
-              id: event.target?.id || '',
-              className: event.target?.className || '',
-              src: event.target?.src || '',
-              href: event.target?.href || ''
-            },
-            path: window.location.pathname
-          };
-          
-          InteractionManager.add('errorEvents', errorData);
+            source: event.filename || '',
+            line: event.lineno || 0,
+            column: event.colno || 0,
+            stack: event.error?.stack || ''
+          });
         });
-        
+
         // Track unhandled promise rejections
         window.addEventListener('unhandledrejection', (event) => {
-          const errorData = {
-            type: 'unhandled_promise_rejection',
+          EventsManager.trackAutoEvent('js_error', {
+            error_type: 'unhandled_promise_rejection',
             message: event.reason?.message || String(event.reason || 'Unknown error'),
-            error: event.reason?.stack || String(event.reason || ''),
-            path: window.location.pathname
-          };
-          
-          InteractionManager.add('errorEvents', errorData);
+            stack: event.reason?.stack || String(event.reason || '')
+          });
         });
       } catch (error) {
         }
@@ -5301,32 +5347,24 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           
           xhr.addEventListener('load', function() {
             if (xhr.status >= 400) {
-              const networkErrorData = {
-                type: 'api_error',
+              EventsManager.trackAutoEvent('network_error', {
                 url: xhr._cryptiqueUrl,
                 method: xhr._cryptiqueMethod || 'GET',
                 status: xhr.status,
-                error: `HTTP ${xhr.status} Error`,
-                duration: Date.now() - startTime,
-                path: window.location.pathname
-              };
-              
-              InteractionManager.add('networkEvents', networkErrorData);
+                status_text: `HTTP ${xhr.status} Error`,
+                duration_ms: Date.now() - startTime
+              });
             }
           });
-          
+
           xhr.addEventListener('error', function() {
-            const networkErrorData = {
-              type: 'api_error',
+            EventsManager.trackAutoEvent('network_error', {
               url: xhr._cryptiqueUrl,
               method: xhr._cryptiqueMethod || 'GET',
               status: 0,
-              error: 'XHR Network Error',
-              duration: Date.now() - startTime,
-              path: window.location.pathname
-            };
-            
-            InteractionManager.add('networkEvents', networkErrorData);
+              status_text: 'XHR Network Error',
+              duration_ms: Date.now() - startTime
+            });
           });
           
           return originalXHRSend.apply(this, args);
@@ -5341,9 +5379,9 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
     startAdvancedFormTracking() {
       try {
         const formStartTimes = new Map();
-        
+
         document.addEventListener('focus', (event) => {
-          if (event.target && 
+          if (event.target &&
               (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')) {
             const formId = event.target.form?.id || 'unknown';
             if (!formStartTimes.has(formId)) {
@@ -5351,11 +5389,11 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             }
           }
         });
-        
+
         document.addEventListener('submit', (event) => {
           const formId = event.target.id || 'unknown';
           const startTime = formStartTimes.get(formId);
-          
+
           if (startTime) {
             const formCompletionData = {
               type: 'form_completion',
@@ -5364,7 +5402,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               fieldCount: event.target.elements.length,
               path: window.location.pathname
             };
-            
+
             InteractionManager.add('formAnalytics', formCompletionData);
             formStartTimes.delete(formId);
           }
@@ -5373,9 +5411,172 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         }
     },
 
+    /**
+     * FormAbandonmentTracker - Emits form_abandoned auto event when a user
+     * interacts with a form but navigates away without submitting.
+     * Tracks which field they stopped at — high-value PM signal.
+     */
+    startFormAbandonmentTracking() {
+      try {
+        // Per-form state: formId → { startTime, lastFieldId, lastFieldType, filledFields, totalFields, submitted }
+        const formState = new Map();
+
+        const getOrInitForm = (formEl) => {
+          const formId = formEl?.id || formEl?.name || 'form_' + (formEl ? [...document.forms].indexOf(formEl) : 0);
+          if (!formState.has(formId)) {
+            const totalFields = formEl
+              ? formEl.querySelectorAll('input:not([type=hidden]), select, textarea').length
+              : 0;
+            formState.set(formId, {
+              formId,
+              startTime: Date.now(),
+              lastFieldId: '',
+              lastFieldType: '',
+              filledFields: new Set(),
+              totalFields,
+              submitted: false
+            });
+          }
+          return formState.get(formId);
+        };
+
+        // Track field focus to know where user is
+        document.addEventListener('focus', (event) => {
+          const target = event.target;
+          if (!target || !['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) return;
+          if (target.type === 'hidden') return;
+          const state = getOrInitForm(target.form);
+          state.lastFieldId = target.id || target.name || '';
+          state.lastFieldType = target.type || target.tagName.toLowerCase();
+        }, true);
+
+        // Track field blur to record which fields have been filled
+        document.addEventListener('blur', (event) => {
+          const target = event.target;
+          if (!target || !['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) return;
+          if (target.type === 'hidden') return;
+          const state = getOrInitForm(target.form);
+          const fieldKey = target.id || target.name || target.type;
+          if (target.value && target.value.length > 0 && fieldKey) {
+            state.filledFields.add(fieldKey);
+          }
+        }, true);
+
+        // Mark form as submitted so we don't fire form_abandoned
+        document.addEventListener('submit', (event) => {
+          const formId = event.target?.id || event.target?.name || 'form_' + [...document.forms].indexOf(event.target);
+          if (formState.has(formId)) {
+            formState.get(formId).submitted = true;
+          }
+        }, true);
+
+        // On page unload, fire form_abandoned for any touched, unsubmitted forms
+        window.addEventListener('beforeunload', () => {
+          formState.forEach((state) => {
+            if (!state.submitted && state.filledFields.size > 0) {
+              // Fire synchronously via sendBeacon path — trackAutoEvent is async
+              // but beforeunload already handles this via sendBeacon in _sendEvent
+              // Resolve the actual form DOM element (if still in DOM)
+              const formEl = state.formId && state.formId !== 'unknown'
+                ? document.getElementById(state.formId) || document.querySelector(`form[name="${state.formId}"]`)
+                : null;
+              EventsManager.trackAutoEvent('form_abandoned', {
+                form_id: state.formId,
+                last_active_field_id: state.lastFieldId,
+                last_active_field_type: state.lastFieldType,
+                fields_filled_count: state.filledFields.size,
+                total_fields_count: state.totalFields,
+                time_on_form_ms: Date.now() - state.startTime
+              }, {
+                element_id: formEl?.id || state.formId || '',
+                element_name: formEl?.getAttribute('name') || '',
+                element_tag_name: 'FORM',
+                element_type: '',
+                element_class: formEl?.className || '',
+                element_text: (formEl?.getAttribute('aria-label') || '').slice(0, 100)
+              });
+            }
+          });
+        });
+      } catch (error) {
+        }
+    },
+
+    /**
+     * ElementVisibilityTracker - Emits element_view auto events when elements
+     * with IDs or data-track attributes enter the viewport for ≥ 1 second.
+     * Tells PMs whether users actually SAW key elements (CTAs, pricing, etc.)
+     * vs just didn't click them — completely different problems, opposite fixes.
+     */
+    startElementVisibilityTracking() {
+      try {
+        if (typeof IntersectionObserver === 'undefined') return;
+
+        // Only observe elements with an id or data-cq-track attribute
+        const getTrackableElements = () =>
+          document.querySelectorAll('[id]:not([id=""]), [data-cq-track]');
+
+        const viewTimers = new Map(); // elementKey → setTimeout handle
+        const reported = new Set();  // elementKey → already fired once per page load
+
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            const el = entry.target;
+            const key = el.id || el.getAttribute('data-cq-track') || el.className;
+            if (!key || reported.has(key)) return;
+
+            if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+              // Element entered viewport — start 1s timer
+              if (!viewTimers.has(key)) {
+                const enterTime = Date.now();
+                const timer = setTimeout(() => {
+                  if (reported.has(key)) return;
+                  reported.add(key);
+                  EventsManager.trackAutoEvent('element_view', {
+                    time_in_viewport_ms: Date.now() - enterTime,
+                    viewport_percent_visible: Math.round(entry.intersectionRatio * 100)
+                  }, {
+                    element_id: el.id || '',
+                    element_name: el.getAttribute('name') || el.getAttribute('data-cq-track') || '',
+                    element_tag_name: el.tagName || '',
+                    element_type: el.type || el.getAttribute('type') || '',
+                    element_class: el.className || '',
+                    element_text: (el.textContent || '').trim().slice(0, 100)
+                  });
+                  viewTimers.delete(key);
+                }, 1000);
+                viewTimers.set(key, timer);
+              }
+            } else {
+              // Element left viewport before 1s — cancel timer
+              if (viewTimers.has(key)) {
+                clearTimeout(viewTimers.get(key));
+                viewTimers.delete(key);
+              }
+            }
+          });
+        }, { threshold: 0.5 });
+
+        // Observe existing elements
+        getTrackableElements().forEach(el => observer.observe(el));
+
+        // Observe elements added to DOM later (SPAs)
+        if (typeof MutationObserver !== 'undefined') {
+          new MutationObserver(() => {
+            getTrackableElements().forEach(el => {
+              if (!viewTimers.has(el.id || el.getAttribute('data-cq-track') || el.className)) {
+                observer.observe(el);
+              }
+            });
+          }).observe(document.body, { childList: true, subtree: true });
+        }
+      } catch (error) {
+        }
+    },
+
     /**
      * Initialize all event trackers
-     * 
+     *
      * Starts all tracking modules
      */
     initialize() {
@@ -5394,6 +5595,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       this.startErrorTracking();
       this.startNetworkTracking();
       this.startAdvancedFormTracking();
+      this.startFormAbandonmentTracking();
+      this.startElementVisibilityTracking();
     }
   };
 
@@ -5529,9 +5732,36 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         }
     },
 
+    /**
+     * Tab Visibility Accumulator
+     * Tracks how much time the tab was actually in the foreground.
+     * Writes only to runtimeState — never triggers session end or timing bugs.
+     * active_time_ms is included in every session heartbeat for backend persistence.
+     */
+    startTabVisibilityTracking() {
+      try {
+        // Initialise: tab starts visible
+        runtimeState.tabFocusTimestamp = document.hidden ? null : Date.now();
+
+        document.addEventListener('visibilitychange', () => {
+          if (document.hidden) {
+            // Tab went to background — accumulate time since last focus
+            if (runtimeState.tabFocusTimestamp !== null) {
+              runtimeState.activeTimeMs += Date.now() - runtimeState.tabFocusTimestamp;
+              runtimeState.tabFocusTimestamp = null;
+            }
+          } else {
+            // Tab came back to foreground
+            runtimeState.tabFocusTimestamp = Date.now();
+          }
+        });
+      } catch (error) {
+        }
+    },
+
     /**
      * Start session tracking interval
-     * 
+     *
      * Periodically sends session data and updates session metrics
      */
     startSessionTracking() {
@@ -5609,6 +5839,11 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             // Always sync distinctId from storage before sending to ensure consistency
             sessionData.distinctId = StorageManager.getDistinctId();
 
+            // Include accumulated active time (tab foreground time only)
+            const currentActiveMs = runtimeState.activeTimeMs +
+              (runtimeState.tabFocusTimestamp !== null ? Date.now() - runtimeState.tabFocusTimestamp : 0);
+            sessionData.active_time_ms = currentActiveMs;
+
             // Send session data
             await APIClient.sendSessionData();
           } catch (error) {
@@ -5776,6 +6011,9 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         // Start event trackers
         EventTrackers.initialize();
 
+        // Start tab visibility accumulator (active_time_ms)
+        this.startTabVisibilityTracking();
+
         // Start session tracking interval
         this.startSessionTracking();
 
@@ -6134,6 +6372,9 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             'Content-Type': 'application/json',
             'X-Cryptique-Site-Id': getCurrentSiteId()
           },
+          // keepalive: true allows this request to outlive the page (critical for
+          // form_abandoned events fired in beforeunload handlers)
+          keepalive: true,
           body: JSON.stringify(eventData)
         });
 
@@ -6158,22 +6399,33 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      */
     _getAutoEventCategory(eventName) {
       const categoryMap = {
+        // Navigation
         'page_view': 'navigation',
+        // Interaction
         'page_scroll': 'interaction',
         'element_click': 'interaction',
         'element_hover': 'interaction',
+        'dead_click': 'interaction',
+        'rage_click': 'interaction',
+        'text_selection': 'interaction',
+        // Form
         'form_submit': 'form',
-        'form_focus': 'form',
-        'form_blur': 'form',
-        'form_change': 'form',
+        'form_validation_error': 'form',
+        'form_abandoned': 'form',
+        // Media
         'media_play': 'media',
         'media_pause': 'media',
         'media_ended': 'media',
-        'dead_click': 'interaction',
-        'rage_click': 'interaction',
-        'text_selection': 'interaction',
+        // Session
         'session_start': 'session',
-        'session_end': 'session'
+        'session_end': 'session',
+        // Error
+        'js_error': 'error',
+        'network_error': 'error',
+        // Performance
+        'page_performance': 'performance',
+        // Visibility
+        'element_view': 'visibility'
       };
 
       return categoryMap[eventName] || 'other';
@@ -6779,8 +7031,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (clickCount >= 3) {
             const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
             const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
-            const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-            const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+            const docHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
+            const docWidth = Math.min(Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), 25000);
             EventsManager.trackAutoEvent('rage_click', {
               click_coordinates: { x: event.clientX, y: event.clientY },
               page_x: event.pageX,
@@ -6810,8 +7062,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           const clickElement = element;
           const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
           const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
-          const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-          const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+          const docHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
+          const docWidth = Math.min(Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), 25000);
 
           // Mark this click as potentially dead
           const clickId = `${now}_${Math.random().toString(36).substr(2, 9)}`;
@@ -6866,8 +7118,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         // Track regular click with enhanced data (viewport + page-relative for heatmaps)
         const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
         const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
-        const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-        const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+        const docHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
+        const docWidth = Math.min(Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), 25000);
         EventsManager.trackAutoEvent('element_click', {
           click_coordinates: { x: event.clientX, y: event.clientY },
           page_x: event.pageX,
@@ -6905,8 +7157,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (scrollDepth > maxScrollDepth) {
             maxScrollDepth = scrollDepth;
             const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
-            const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-            const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+            const docHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
+            const docWidth = Math.min(Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), 25000);
             EventsManager.trackAutoEvent('page_scroll', {
               scroll_depth: scrollDepth,
               max_scroll_reached: maxScrollDepth,
@@ -6933,8 +7185,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         if (form.tagName === 'FORM') {
           const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
           const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
-          const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-          const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+          const docHeight = Math.min(Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 25000);
+          const docWidth = Math.min(Math.max(document.body.scrollWidth, document.documentElement.scrollWidth), 25000);
           const rect = form.getBoundingClientRect();
           const pageX = rect.left + scrollX;
           const pageY = rect.top + scrollY;
@@ -6966,50 +7218,26 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         }
       });
 
-      // Track form field interactions
-      document.addEventListener('focus', (event) => {
-        const element = event.target;
-        if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
-          const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
-          const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
-          const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
-          const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
-          const rect = element.getBoundingClientRect();
-          const pageX = rect.left + scrollX;
-          const pageY = rect.top + scrollY;
-          EventsManager.trackAutoEvent('form_focus', {
-            field_name: element.name || null,
-            field_type: element.type || null,
-            field_id: element.id || null,
-            scroll_x: scrollX,
-            scroll_y: scrollY,
-            document_height: docHeight,
-            document_width: docWidth,
-            page_x: pageX,
-            page_y: pageY,
-            click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
-          }, {
-            element_tag_name: element.tagName.toLowerCase(),
-            element_id: element.id || null,
-            element_name: element.name || element.getAttribute('name') || null, // FIX: Added element_name
-            element_class: element.className || null, // FIX: Added element_class
-            element_type: element.type || null,
-            element_text: element.value ? element.value.toString().trim().substring(0, 100) : null, // FIX: Added element_text (value for form fields)
-            element_position: { // FIX: Added element_position
-              x: event.clientX != null ? event.clientX : rect.left,
-              y: event.clientY != null ? event.clientY : rect.top,
-              width: element.offsetWidth || 0,
-              height: element.offsetHeight || 0
-            }
-          });
-        }
-      }, true);
+      // form_focus, form_blur, form_change are intentionally NOT fired as auto events.
+      // form_abandoned already captures the meaningful signal (which field, how many filled,
+      // time spent) without the per-keystroke noise these would generate.
     },
 
     /**
      * Setup media tracking
+     * play/pause events are throttled per element (2s cooldown) to filter out
+     * scrubbing noise — a user seeking through a video fires rapid play/pause
+     * pairs that have no PM value.
      */
     setupMediaTracking() {
+      // Per-element last-event timestamps — keyed by src or generated index
+      const lastMediaEventTime = new Map();
+      const MEDIA_THROTTLE_MS = 2000;
+
+      function getMediaKey(el) {
+        return el.src || el.id || el.currentSrc || [...document.querySelectorAll('video,audio')].indexOf(el).toString();
+      }
+
       function getPageContext() {
         const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
         const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
@@ -7017,49 +7245,56 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
         return { scrollX, scrollY, docHeight, docWidth };
       }
+
       ['video', 'audio'].forEach(mediaType => {
         document.addEventListener('play', (event) => {
-          if (event.target.tagName.toLowerCase() === mediaType) {
-            const el = event.target;
-            const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
-            const rect = el.getBoundingClientRect();
-            const pageX = rect.left + scrollX;
-            const pageY = rect.top + scrollY;
-            EventsManager.trackAutoEvent('media_play', {
-              media_type: mediaType,
-              media_src: el.src || null,
-              media_duration: el.duration || null,
-              scroll_x: scrollX,
-              scroll_y: scrollY,
-              document_height: docHeight,
-              document_width: docWidth,
-              page_x: pageX,
-              page_y: pageY,
-              click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
-            });
-          }
+          if (event.target.tagName.toLowerCase() !== mediaType) return;
+          const el = event.target;
+          const key = `play:${getMediaKey(el)}`;
+          const now = Date.now();
+          if (now - (lastMediaEventTime.get(key) || 0) < MEDIA_THROTTLE_MS) return;
+          lastMediaEventTime.set(key, now);
+
+          const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+          const rect = el.getBoundingClientRect();
+          EventsManager.trackAutoEvent('media_play', {
+            media_type: mediaType,
+            media_src: el.src || null,
+            media_duration: el.duration || null,
+            media_current_time: el.currentTime || null,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
+            page_x: rect.left + scrollX,
+            page_y: rect.top + scrollY,
+            click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+          });
         }, true);
 
         document.addEventListener('pause', (event) => {
-          if (event.target.tagName.toLowerCase() === mediaType) {
-            const el = event.target;
-            const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
-            const rect = el.getBoundingClientRect();
-            const pageX = rect.left + scrollX;
-            const pageY = rect.top + scrollY;
-            EventsManager.trackAutoEvent('media_pause', {
-              media_type: mediaType,
-              media_current_time: el.currentTime || null,
-              media_duration: el.duration || null,
-              scroll_x: scrollX,
-              scroll_y: scrollY,
-              document_height: docHeight,
-              document_width: docWidth,
-              page_x: pageX,
-              page_y: pageY,
-              click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
-            });
-          }
+          if (event.target.tagName.toLowerCase() !== mediaType) return;
+          const el = event.target;
+          const key = `pause:${getMediaKey(el)}`;
+          const now = Date.now();
+          if (now - (lastMediaEventTime.get(key) || 0) < MEDIA_THROTTLE_MS) return;
+          lastMediaEventTime.set(key, now);
+
+          const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+          const rect = el.getBoundingClientRect();
+          EventsManager.trackAutoEvent('media_pause', {
+            media_type: mediaType,
+            media_src: el.src || null,
+            media_current_time: el.currentTime || null,
+            media_duration: el.duration || null,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
+            page_x: rect.left + scrollX,
+            page_y: rect.top + scrollY,
+            click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+          });
         }, true);
       });
     },
@@ -7086,12 +7321,14 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
             const selectedText = selection.toString().trim();
             
-            // Only track if there's actual text selected and it's different from last selection
-            if (selectedText && selectedText.length > 0 && selectedText !== lastSelectionText) {
+            // Only track if selection is meaningful (≥3 chars) and different from last selection.
+            // <3 chars filters out accidental double-clicks and single-word mis-selections.
+            if (selectedText && selectedText.length >= 3 && selectedText !== lastSelectionText) {
               const now = Date.now();
-              
-              // Don't track if selection happened too quickly (likely accidental)
-              if (now - lastSelectionTime < 200) {
+
+              // 1s cooldown between events — prevents rapid re-selection noise
+              // (e.g. user adjusting selection handles fires many selectionchange events)
+              if (now - lastSelectionTime < 1000) {
                 return;
               }
 
@@ -7933,9 +8170,13 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
   if (window.self !== window.top) {
     const _sendHeatmapDimensions = () => {
       try {
-        const h = Math.max(
-          document.body ? document.body.scrollHeight : 0,
-          document.documentElement ? document.documentElement.scrollHeight : 0
+        // Cap at 25 000 px — browser scroll-animation libraries can report 16 777 216 (2^24).
+        const h = Math.min(
+          Math.max(
+            document.body ? document.body.scrollHeight : 0,
+            document.documentElement ? document.documentElement.scrollHeight : 0
+          ),
+          25000
         );
         if (h > 0) {
           window.parent.postMessage({ type: 'cryptique_heatmap_dimensions', document_height: h }, '*');
@@ -7943,16 +8184,23 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       } catch (_) {}
     };
 
-    // Send once the DOM is fully painted
+    // Send once the DOM is fully painted (immediate — most accurate final height).
     if (document.readyState === 'complete') {
       _sendHeatmapDimensions();
     } else {
       window.addEventListener('load', _sendHeatmapDimensions);
     }
 
-    // Re-send whenever the page grows (lazy-loaded content, SPAs, accordions, etc.)
+    // Re-send whenever the page grows (lazy-loaded content, SPAs, accordions, etc.).
+    // Debounced to 1 s so rapid DOM mutations during React hydration don't trigger
+    // dozens of postMessages and repeated canvas re-renders.
     try {
-      const _heatmapRO = new ResizeObserver(_sendHeatmapDimensions);
+      let _heatmapROTimer;
+      const _debouncedSend = () => {
+        clearTimeout(_heatmapROTimer);
+        _heatmapROTimer = setTimeout(_sendHeatmapDimensions, 1000);
+      };
+      const _heatmapRO = new ResizeObserver(_debouncedSend);
       _heatmapRO.observe(document.documentElement);
     } catch (_) {}
   }