cryptique-sdk 1.2.15 → 1.2.17

package/lib/cjs/index.js

@@ -92,8 +92,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     // Geolocation API
     GEOLOCATION: {
-      PRIMARY_URL: "https://ipinfo.io/json?token=73937f74acc045",
-      BACKUP_URL: "https://ipinfo.io/json?token=73937f74acc045&http=1.1",
+      PRIMARY_URL: "https://ipinfo.io/json?token=8fc6409059aa39",
+      BACKUP_URL: "https://ipinfo.io/json?token=8fc6409059aa39&http=1.1",
       TIMEOUT_MS: 5000                                  // 5 second timeout
     },
 
@@ -145,7 +145,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(',')
@@ -160,7 +169,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)
@@ -4039,10 +4050,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
@@ -4260,7 +4273,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)
@@ -4743,17 +4759,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) {
@@ -4980,19 +4999,26 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
     startCopyPasteTracking() {
       try {
         document.addEventListener('copy', (event) => {
+          const sel = window.getSelection();
           const copyData = {
             type: 'copy_action',
-            selectedText: window.getSelection().toString().substring(0, 100),
+            selectedText: sel ? sel.toString().substring(0, 100) : '',
             target: {
               tagName: event.target?.tagName || '',
               id: event.target?.id || ''
             },
             path: window.location.pathname
           };
-          
           InteractionManager.add('copyPasteEvents', copyData);
+          // Fire structured auto-event (low volume — only when user explicitly copies)
+          EventsManager.trackAutoEvent('copy_action', {
+            text_length: sel ? sel.toString().length : 0,
+            element_id:  event.target?.id    || '',
+            element_tag: event.target?.tagName?.toLowerCase() || '',
+            element_class: (event.target?.className || '').split(' ').filter(Boolean).slice(0, 3).join(' '),
+          });
         });
-        
+
         document.addEventListener('paste', (event) => {
           const pasteData = {
             type: 'paste_action',
@@ -5002,7 +5028,6 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             },
             path: window.location.pathname
           };
-          
           InteractionManager.add('copyPasteEvents', pasteData);
         });
       } catch (error) {
@@ -5028,8 +5053,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             },
             path: window.location.pathname
           };
-          
           InteractionManager.add('contextMenuEvents', contextData);
+          // Fire structured auto-event (low volume — only when user right-clicks)
+          EventsManager.trackAutoEvent('context_menu', {
+            element_tag:   event.target?.tagName?.toLowerCase() || '',
+            element_id:    event.target?.id    || '',
+            element_class: (event.target?.className || '').split(' ').filter(Boolean).slice(0, 3).join(' '),
+            page_x:        event.pageX,
+            page_y:        event.pageY,
+          });
         });
       } catch (error) {
         }
@@ -5208,23 +5240,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) {
         }
@@ -5232,40 +5303,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) {
         }
@@ -5303,32 +5362,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);
@@ -5343,9 +5394,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)) {
@@ -5353,11 +5404,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',
@@ -5366,7 +5417,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               fieldCount: event.target.elements.length,
               path: window.location.pathname
             };
-            
+
             InteractionManager.add('formAnalytics', formCompletionData);
             formStartTimes.delete(formId);
           }
@@ -5375,9 +5426,333 @@ 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) {
+        }
+    },
+
+    /**
+     * PageSummaryTracker — collects high-frequency signals in-memory and flushes
+     * them as a single 'page_summary' auto-event on page unload.
+     *
+     * This keeps event counts low (1 per page visit) while capturing:
+     *  - Mouse movement grid (move_grid)
+     *  - Hover dwell grid    (hover_grid)
+     *  - Tab-switch count and hidden time
+     *  - Scroll reversal count
+     *  - Per-field focus dwell times
+     */
+    startPageSummaryTracking() {
+      try {
+        const GRID_SIZE = 40;
+        // In-memory accumulators — never sent to the server individually
+        const moveGrid  = new Map(); // cellKey → move count
+        const hoverGrid = new Map(); // cellKey → total dwell_ms
+        const fieldDwells = [];      // [{field_id, field_label, field_type, dwell_ms, was_filled}]
+
+        let tabSwitches      = 0;
+        let totalTabHiddenMs = 0;
+        let tabHiddenTime    = null;
+        let scrollReversals  = 0;
+
+        // Track last significant scroll position for reversal detection
+        let lastSigScrollY  = window.scrollY;
+        let lastSigDir      = 0; // 1=down, -1=up
+
+        function getGridCell(pageX, pageY) {
+          const docW = Math.max(1, document.documentElement.scrollWidth || document.body.scrollWidth || window.innerWidth);
+          const docH = Math.max(1, document.documentElement.scrollHeight || document.body.scrollHeight || window.innerHeight);
+          const col  = Math.min(GRID_SIZE - 1, Math.max(0, Math.floor((pageX / docW) * GRID_SIZE)));
+          const row  = Math.min(GRID_SIZE - 1, Math.max(0, Math.floor((pageY / docH) * GRID_SIZE)));
+          return col * GRID_SIZE + row;
+        }
+
+        // ── Mouse movement → move_grid (throttled to max 1 sample / 100 ms)
+        let moveThrottle = false;
+        document.addEventListener('mousemove', (e) => {
+          if (moveThrottle) return;
+          moveThrottle = true;
+          setTimeout(() => { moveThrottle = false; }, 100);
+          const key = getGridCell(e.pageX, e.pageY);
+          moveGrid.set(key, (moveGrid.get(key) || 0) + 1);
+        }, { passive: true });
+
+        // ── Hover dwell → hover_grid (track all elements, filter < 100 ms)
+        const hoverStarts = new Map(); // element → enterTime
+        document.addEventListener('mouseover', (e) => {
+          if (e.target && e.target !== document.documentElement) {
+            hoverStarts.set(e.target, Date.now());
+          }
+        }, { passive: true });
+        document.addEventListener('mouseout', (e) => {
+          const target = e.target;
+          if (!target || !hoverStarts.has(target)) return;
+          const dwell = Date.now() - hoverStarts.get(target);
+          hoverStarts.delete(target);
+          if (dwell < 100) return; // skip accidental hovers
+          try {
+            const rect = target.getBoundingClientRect();
+            const cx   = rect.left + rect.width  / 2 + window.scrollX;
+            const cy   = rect.top  + rect.height / 2 + window.scrollY;
+            const key  = getGridCell(cx, cy);
+            hoverGrid.set(key, (hoverGrid.get(key) || 0) + dwell);
+          } catch (_) {}
+        }, { passive: true });
+
+        // ── Tab visibility → tab_switches + total_tab_hidden_ms
+        document.addEventListener('visibilitychange', () => {
+          if (document.hidden) {
+            tabHiddenTime = Date.now();
+            tabSwitches++;
+          } else if (tabHiddenTime !== null) {
+            totalTabHiddenMs += Date.now() - tabHiddenTime;
+            tabHiddenTime = null;
+          }
+        });
+
+        // ── Scroll reversal detection (direction change > 200 px)
+        window.addEventListener('scroll', () => {
+          const curr = window.scrollY;
+          const diff = curr - lastSigScrollY;
+          if (Math.abs(diff) < 50) return; // ignore tiny movements
+          const dir  = diff > 0 ? 1 : -1;
+          if (lastSigDir !== 0 && dir !== lastSigDir && Math.abs(curr - lastSigScrollY) >= 200) {
+            scrollReversals++;
+          }
+          if (Math.abs(diff) >= 50) { lastSigDir = dir; lastSigScrollY = curr; }
+        }, { passive: true });
+
+        // ── Field dwell → per-field focus duration (no content captured)
+        const fieldFocusTimes = new Map();
+        document.addEventListener('focus', (e) => {
+          const t = e.target;
+          if (!t || !['INPUT', 'SELECT', 'TEXTAREA'].includes(t.tagName)) return;
+          if (t.type === 'hidden') return;
+          fieldFocusTimes.set(t, Date.now());
+        }, true);
+        document.addEventListener('blur', (e) => {
+          const t = e.target;
+          if (!t || !fieldFocusTimes.has(t)) return;
+          const dwell = Date.now() - fieldFocusTimes.get(t);
+          fieldFocusTimes.delete(t);
+          if (dwell < 100) return; // skip accidental focus
+          const label = t.id
+            ? (document.querySelector(`label[for="${CSS.escape(t.id)}"]`)?.textContent?.trim() || t.placeholder || t.name || t.id)
+            : (t.placeholder || t.name || t.type || '');
+          fieldDwells.push({
+            field_id:    (t.id || t.name || t.type || '').substring(0, 100),
+            field_label: (label || '').substring(0, 100),
+            field_type:  t.type || t.tagName.toLowerCase(),
+            dwell_ms:    dwell,
+            was_filled:  !!(t.value && t.value.length > 0),
+          });
+        }, true);
+
+        // ── Serialise grid Map to [[col, row, value], ...] sparse array
+        function serializeGrid(grid) {
+          const out = [];
+          grid.forEach((val, key) => {
+            if (val > 0) {
+              const col = Math.floor(key / GRID_SIZE);
+              const row = key % GRID_SIZE;
+              out.push([col, row, Math.round(val)]);
+            }
+          });
+          return out;
+        }
+
+        let summarySent = false;
+        function firePageSummary() {
+          if (summarySent) return; // only fire once per page lifecycle
+          if (moveGrid.size === 0 && hoverGrid.size === 0 && fieldDwells.length === 0
+              && tabSwitches === 0 && scrollReversals === 0) return;
+          summarySent = true;
+          try {
+            EventsManager.trackAutoEvent('page_summary', {
+              scroll_reversals:  scrollReversals,
+              tab_switches:      tabSwitches,
+              total_tab_hidden_ms: totalTabHiddenMs,
+              move_grid:  serializeGrid(moveGrid),
+              hover_grid: serializeGrid(hoverGrid),
+              field_dwells: fieldDwells,
+              document_height: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
+              document_width:  document.documentElement.scrollWidth  || document.body.scrollWidth  || 0,
+              viewport_width:  window.innerWidth,
+              viewport_height: window.innerHeight,
+            });
+          } catch (_) {}
+        }
+
+        // Fire on hard navigation / tab close (pagehide is more reliable than beforeunload)
+        window.addEventListener('pagehide', firePageSummary);
+        // Also fire when tab becomes hidden (covers SPA navigation that doesn't fire pagehide)
+        document.addEventListener('visibilitychange', () => {
+          if (document.hidden) firePageSummary();
+        });
+      } catch (error) {}
+    },
+
     /**
      * Initialize all event trackers
-     * 
+     *
      * Starts all tracking modules
      */
     initialize() {
@@ -5396,6 +5771,9 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       this.startErrorTracking();
       this.startNetworkTracking();
       this.startAdvancedFormTracking();
+      this.startFormAbandonmentTracking();
+      this.startElementVisibilityTracking();
+      this.startPageSummaryTracking();
     }
   };
 
@@ -5531,9 +5909,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() {
@@ -5611,6 +6016,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) {
@@ -5778,6 +6188,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();
 
@@ -6136,6 +6549,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)
         });
 
@@ -6160,22 +6576,38 @@ 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',
+        // Page summary (aggregate)
+        'page_summary': 'interaction',
+        // Clipboard & context
+        'copy_action':  'interaction',
+        'context_menu': 'interaction',
       };
 
       return categoryMap[eventName] || 'other';
@@ -6968,50 +7400,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;
@@ -7019,49 +7427,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);
       });
     },
@@ -7088,12 +7503,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;
               }
 
@@ -7987,6 +8404,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
  * The script.js file is inlined during the build process by Rollup.
  */
 
+
 // Create a wrapper that provides programmatic initialization
 const CryptiqueSDK = {
   /**