cryptique-sdk 1.2.17 → 1.2.18

package/lib/cjs/index.js

@@ -5519,104 +5519,157 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     /**
      * 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.
+     * enter the viewport for ≥ 1 second, capturing the actual dwell duration.
+     *
+     * Covers interactive elements (buttons, links, inputs, headings, images) and
+     * any element with an id or data-cq-track attribute. Each viewport entry is
+     * tracked independently — if a user scrolls away and back, both dwells count.
+     * This gives accurate attention data for the heatmap attention overlay.
      */
     startElementVisibilityTracking() {
       try {
         if (typeof IntersectionObserver === 'undefined') return;
 
-        // Only observe elements with an id or data-cq-track attribute
+        // Observe interactive/structural elements in addition to id/data-cq-track
+        const TRACKABLE_SELECTOR = [
+          '[id]:not([id=""])', '[data-cq-track]',
+          'button', 'a[href]', 'input:not([type=hidden])', 'select', 'textarea',
+          'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img[alt]',
+          '[role="button"]', '[role="tab"]', '[role="menuitem"]', '[role="link"]'
+        ].join(', ');
+
         const getTrackableElements = () =>
-          document.querySelectorAll('[id]:not([id=""]), [data-cq-track]');
+          Array.from(document.querySelectorAll(TRACKABLE_SELECTOR)).filter(el => {
+            try { return el.getBoundingClientRect().height >= 20; } catch (_) { return true; }
+          });
 
-        const viewTimers = new Map(); // elementKey → setTimeout handle
-        const reported = new Set();  // elementKey → already fired once per page load
+        // enterTimes: key → { enterTime, el } — tracks elements currently in viewport
+        const enterTimes  = new Map();
+        const observedEls = new WeakSet(); // prevents double-observing same DOM node
+
+        function elementKey(el) {
+          return `${el.tagName}|${el.id || ''}|${el.getAttribute('data-cq-track') || ''}|${(el.textContent || '').trim().slice(0, 30)}`;
+        }
+
+        function getElementData(el) {
+          return {
+            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)
+          };
+        }
 
         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;
+            const el  = entry.target;
+            const key = elementKey(el);
 
             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);
+              // Element entered viewport — record entry time
+              if (!enterTimes.has(key)) {
+                enterTimes.set(key, { enterTime: Date.now(), el });
               }
             } else {
-              // Element left viewport before 1s — cancel timer
-              if (viewTimers.has(key)) {
-                clearTimeout(viewTimers.get(key));
-                viewTimers.delete(key);
+              // Element left viewport — emit actual dwell if ≥ 1s
+              const record = enterTimes.get(key);
+              if (record) {
+                const dwell = Date.now() - record.enterTime;
+                enterTimes.delete(key);
+                if (dwell >= 1000) {
+                  EventsManager.trackAutoEvent('element_view', {
+                    time_in_viewport_ms:      dwell,
+                    viewport_percent_visible: Math.round(entry.intersectionRatio * 100),
+                    scroll_y_at_view:         window.scrollY
+                  }, getElementData(el));
+                }
               }
             }
           });
-        }, { threshold: 0.5 });
+        }, { threshold: [0.5] });
+
+        const observe = (el) => {
+          if (!observedEls.has(el)) { observedEls.add(el); observer.observe(el); }
+        };
 
-        // Observe existing elements
-        getTrackableElements().forEach(el => observer.observe(el));
+        getTrackableElements().forEach(observe);
 
         // 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);
-              }
-            });
+            getTrackableElements().forEach(observe);
           }).observe(document.body, { childList: true, subtree: true });
         }
-      } catch (error) {
-        }
+
+        // On page unload, flush elements still in viewport
+        window.addEventListener('pagehide', () => {
+          enterTimes.forEach(({ enterTime, el }) => {
+            const dwell = Date.now() - enterTime;
+            if (dwell >= 1000) {
+              EventsManager.trackAutoEvent('element_view', {
+                time_in_viewport_ms:      dwell,
+                viewport_percent_visible: 100,
+                scroll_y_at_view:         window.scrollY
+              }, getElementData(el));
+            }
+          });
+        });
+      } 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)
+     * High-volume/continuous data lives here (grids, counts) to keep event volume low.
+     * Low-frequency, high-signal moments (exit_intent) are emitted as separate auto-events
+     * but their counters are also included here for correlation.
+     *
+     * Captures:
+     *  - Mouse movement grid (move_grid) + hover dwell grid (hover_grid)
+     *  - Element-level hover dwells for named/interactive elements (element_dwells)
      *  - Tab-switch count and hidden time
-     *  - Scroll reversal count
+     *  - Scroll reversal count + depths at each reversal (scroll_reversal_depths)
      *  - Per-field focus dwell times
+     *  - Exit intent count + scroll depth at last exit intent
+     *  - First interaction time (how long before user engaged)
+     *  - Performance: CLS score, long task count/max, INP
      */
     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
+        // 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}]
+        const elementDwellsMap = new Map(); // elemKey → {tag, id, text, dwell_ms}
+        const scrollReversalDepths = [];    // scroll depth % at each reversal
+
+        let tabSwitches               = 0;
+        let totalTabHiddenMs          = 0;
+        let tabHiddenTime             = null;
+        let scrollReversals           = 0;
+        let exitIntentCount           = 0;
+        let exitIntentLastScrollDepth = 0;
+        let firstInteractionMs        = null;
+        let clsScore                  = 0;
+        let longTasksCount            = 0;
+        let maxLongTaskMs             = 0;
+        let inpMs                     = 0;
+
+        const pageLoadTime  = Date.now();
         let lastSigScrollY  = window.scrollY;
         let lastSigDir      = 0; // 1=down, -1=up
 
+        // ── Helpers
+        function getScrollDepth() {
+          const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+          return maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+        }
+
         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);
@@ -5625,6 +5678,39 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           return col * GRID_SIZE + row;
         }
 
+        // ── PerformanceObserver: CLS, Long Tasks, INP (best-effort, not all browsers)
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (!e.hadRecentInput) clsScore = Math.round((clsScore + e.value) * 1000) / 1000;
+            }
+          }).observe({ type: 'layout-shift', buffered: true });
+        } catch (_) {}
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              longTasksCount++;
+              if (e.duration > maxLongTaskMs) maxLongTaskMs = Math.round(e.duration);
+            }
+          }).observe({ type: 'longtask', buffered: true });
+        } catch (_) {}
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (e.duration > inpMs) inpMs = Math.round(e.duration);
+            }
+          }).observe({ type: 'event', durationThreshold: 40, buffered: true });
+        } catch (_) {}
+
+        // ── First interaction: time from page load to first meaningful engagement
+        const markFirstInteraction = () => {
+          if (firstInteractionMs === null) firstInteractionMs = Date.now() - pageLoadTime;
+        };
+        document.addEventListener('click',      markFirstInteraction, { once: true, passive: true });
+        document.addEventListener('keydown',    markFirstInteraction, { once: true, passive: true });
+        document.addEventListener('touchstart', markFirstInteraction, { once: true, passive: true });
+        window.addEventListener('scroll',       markFirstInteraction, { once: true, passive: true });
+
         // ── Mouse movement → move_grid (throttled to max 1 sample / 100 ms)
         let moveThrottle = false;
         document.addEventListener('mousemove', (e) => {
@@ -5635,7 +5721,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           moveGrid.set(key, (moveGrid.get(key) || 0) + 1);
         }, { passive: true });
 
-        // ── Hover dwell → hover_grid (track all elements, filter < 100 ms)
+        // ── Hover dwell → hover_grid + element_dwells for named/interactive elements
+        const ELEMENT_DWELL_TAGS = new Set(['BUTTON', 'A', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'INPUT', 'SELECT', 'TEXTAREA', 'IMG', 'LABEL']);
         const hoverStarts = new Map(); // element → enterTime
         document.addEventListener('mouseover', (e) => {
           if (e.target && e.target !== document.documentElement) {
@@ -5654,6 +5741,22 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             const cy   = rect.top  + rect.height / 2 + window.scrollY;
             const key  = getGridCell(cx, cy);
             hoverGrid.set(key, (hoverGrid.get(key) || 0) + dwell);
+
+            // Element-level dwell: track named/interactive elements hovered ≥ 300ms
+            if (dwell >= 300 && (target.id || ELEMENT_DWELL_TAGS.has(target.tagName))) {
+              const elemKey = `${target.tagName}|${target.id || ''}|${(target.textContent || '').trim().slice(0, 30)}`;
+              const existing = elementDwellsMap.get(elemKey);
+              if (existing) {
+                existing.dwell_ms += dwell;
+              } else {
+                elementDwellsMap.set(elemKey, {
+                  tag:      target.tagName.toLowerCase(),
+                  id:       target.id || '',
+                  text:     (target.textContent || '').trim().slice(0, 50),
+                  dwell_ms: dwell
+                });
+              }
+            }
           } catch (_) {}
         }, { passive: true });
 
@@ -5668,14 +5771,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }
         });
 
-        // ── Scroll reversal detection (direction change > 200 px)
+        // ── Scroll reversal detection (direction change ≥ 200 px) + depth recording
         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 (Math.abs(diff) < 50) return;
+          const dir = diff > 0 ? 1 : -1;
           if (lastSigDir !== 0 && dir !== lastSigDir && Math.abs(curr - lastSigScrollY) >= 200) {
             scrollReversals++;
+            scrollReversalDepths.push(getScrollDepth());
           }
           if (Math.abs(diff) >= 50) { lastSigDir = dir; lastSigScrollY = curr; }
         }, { passive: true });
@@ -5693,7 +5797,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (!t || !fieldFocusTimes.has(t)) return;
           const dwell = Date.now() - fieldFocusTimes.get(t);
           fieldFocusTimes.delete(t);
-          if (dwell < 100) return; // skip accidental focus
+          if (dwell < 100) return;
           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 || '');
@@ -5706,6 +5810,26 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           });
         }, true);
 
+        // ── Exit intent: mouse leaving viewport toward the top (user about to navigate away)
+        // Also fires as a standalone auto-event for direct querying.
+        let lastExitIntentTime = 0;
+        document.addEventListener('mouseleave', (e) => {
+          if (e.clientY > 0 || e.relatedTarget !== null) return; // only top-edge exits
+          const now = Date.now();
+          if (now - lastExitIntentTime < 2000) return; // debounce: max once per 2s
+          lastExitIntentTime = now;
+          exitIntentCount++;
+          exitIntentLastScrollDepth = getScrollDepth();
+          EventsManager.trackAutoEvent('exit_intent', {
+            scroll_depth:    exitIntentLastScrollDepth,
+            time_on_page_ms: now - pageLoadTime,
+            scroll_y:        window.scrollY,
+            document_height: Math.min(
+              document.documentElement.scrollHeight || document.body.scrollHeight, 25000
+            )
+          }).catch(() => {});
+        });
+
         // ── Serialise grid Map to [[col, row, value], ...] sparse array
         function serializeGrid(grid) {
           const out = [];
@@ -5722,17 +5846,34 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         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;
+          const hasData = moveGrid.size > 0 || hoverGrid.size > 0 || fieldDwells.length > 0
+            || tabSwitches > 0 || scrollReversals > 0 || exitIntentCount > 0
+            || firstInteractionMs !== null || clsScore > 0 || longTasksCount > 0;
+          if (!hasData) return;
           summarySent = true;
           try {
+            // Serialize element_dwells: filter ≥ 300ms, sort desc, cap at 20
+            const elementDwells = Array.from(elementDwellsMap.values())
+              .filter(e => e.dwell_ms >= 300)
+              .sort((a, b) => b.dwell_ms - a.dwell_ms)
+              .slice(0, 20);
+
             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,
+              scroll_reversals:              scrollReversals,
+              scroll_reversal_depths:        scrollReversalDepths,
+              tab_switches:                  tabSwitches,
+              total_tab_hidden_ms:           totalTabHiddenMs,
+              move_grid:                     serializeGrid(moveGrid),
+              hover_grid:                    serializeGrid(hoverGrid),
+              field_dwells:                  fieldDwells,
+              element_dwells:                elementDwells,
+              first_interaction_ms:          firstInteractionMs,
+              exit_intent_count:             exitIntentCount,
+              exit_intent_last_scroll_depth: exitIntentLastScrollDepth,
+              cls_score:                     clsScore,
+              long_tasks_count:              longTasksCount,
+              max_long_task_ms:              maxLongTaskMs,
+              inp_ms:                        inpMs,
               document_height: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
               document_width:  document.documentElement.scrollWidth  || document.body.scrollWidth  || 0,
               viewport_width:  window.innerWidth,

package/lib/esm/index.js

@@ -5517,104 +5517,157 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     /**
      * 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.
+     * enter the viewport for ≥ 1 second, capturing the actual dwell duration.
+     *
+     * Covers interactive elements (buttons, links, inputs, headings, images) and
+     * any element with an id or data-cq-track attribute. Each viewport entry is
+     * tracked independently — if a user scrolls away and back, both dwells count.
+     * This gives accurate attention data for the heatmap attention overlay.
      */
     startElementVisibilityTracking() {
       try {
         if (typeof IntersectionObserver === 'undefined') return;
 
-        // Only observe elements with an id or data-cq-track attribute
+        // Observe interactive/structural elements in addition to id/data-cq-track
+        const TRACKABLE_SELECTOR = [
+          '[id]:not([id=""])', '[data-cq-track]',
+          'button', 'a[href]', 'input:not([type=hidden])', 'select', 'textarea',
+          'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img[alt]',
+          '[role="button"]', '[role="tab"]', '[role="menuitem"]', '[role="link"]'
+        ].join(', ');
+
         const getTrackableElements = () =>
-          document.querySelectorAll('[id]:not([id=""]), [data-cq-track]');
+          Array.from(document.querySelectorAll(TRACKABLE_SELECTOR)).filter(el => {
+            try { return el.getBoundingClientRect().height >= 20; } catch (_) { return true; }
+          });
 
-        const viewTimers = new Map(); // elementKey → setTimeout handle
-        const reported = new Set();  // elementKey → already fired once per page load
+        // enterTimes: key → { enterTime, el } — tracks elements currently in viewport
+        const enterTimes  = new Map();
+        const observedEls = new WeakSet(); // prevents double-observing same DOM node
+
+        function elementKey(el) {
+          return `${el.tagName}|${el.id || ''}|${el.getAttribute('data-cq-track') || ''}|${(el.textContent || '').trim().slice(0, 30)}`;
+        }
+
+        function getElementData(el) {
+          return {
+            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)
+          };
+        }
 
         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;
+            const el  = entry.target;
+            const key = elementKey(el);
 
             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);
+              // Element entered viewport — record entry time
+              if (!enterTimes.has(key)) {
+                enterTimes.set(key, { enterTime: Date.now(), el });
               }
             } else {
-              // Element left viewport before 1s — cancel timer
-              if (viewTimers.has(key)) {
-                clearTimeout(viewTimers.get(key));
-                viewTimers.delete(key);
+              // Element left viewport — emit actual dwell if ≥ 1s
+              const record = enterTimes.get(key);
+              if (record) {
+                const dwell = Date.now() - record.enterTime;
+                enterTimes.delete(key);
+                if (dwell >= 1000) {
+                  EventsManager.trackAutoEvent('element_view', {
+                    time_in_viewport_ms:      dwell,
+                    viewport_percent_visible: Math.round(entry.intersectionRatio * 100),
+                    scroll_y_at_view:         window.scrollY
+                  }, getElementData(el));
+                }
               }
             }
           });
-        }, { threshold: 0.5 });
+        }, { threshold: [0.5] });
+
+        const observe = (el) => {
+          if (!observedEls.has(el)) { observedEls.add(el); observer.observe(el); }
+        };
 
-        // Observe existing elements
-        getTrackableElements().forEach(el => observer.observe(el));
+        getTrackableElements().forEach(observe);
 
         // 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);
-              }
-            });
+            getTrackableElements().forEach(observe);
           }).observe(document.body, { childList: true, subtree: true });
         }
-      } catch (error) {
-        }
+
+        // On page unload, flush elements still in viewport
+        window.addEventListener('pagehide', () => {
+          enterTimes.forEach(({ enterTime, el }) => {
+            const dwell = Date.now() - enterTime;
+            if (dwell >= 1000) {
+              EventsManager.trackAutoEvent('element_view', {
+                time_in_viewport_ms:      dwell,
+                viewport_percent_visible: 100,
+                scroll_y_at_view:         window.scrollY
+              }, getElementData(el));
+            }
+          });
+        });
+      } 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)
+     * High-volume/continuous data lives here (grids, counts) to keep event volume low.
+     * Low-frequency, high-signal moments (exit_intent) are emitted as separate auto-events
+     * but their counters are also included here for correlation.
+     *
+     * Captures:
+     *  - Mouse movement grid (move_grid) + hover dwell grid (hover_grid)
+     *  - Element-level hover dwells for named/interactive elements (element_dwells)
      *  - Tab-switch count and hidden time
-     *  - Scroll reversal count
+     *  - Scroll reversal count + depths at each reversal (scroll_reversal_depths)
      *  - Per-field focus dwell times
+     *  - Exit intent count + scroll depth at last exit intent
+     *  - First interaction time (how long before user engaged)
+     *  - Performance: CLS score, long task count/max, INP
      */
     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
+        // 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}]
+        const elementDwellsMap = new Map(); // elemKey → {tag, id, text, dwell_ms}
+        const scrollReversalDepths = [];    // scroll depth % at each reversal
+
+        let tabSwitches               = 0;
+        let totalTabHiddenMs          = 0;
+        let tabHiddenTime             = null;
+        let scrollReversals           = 0;
+        let exitIntentCount           = 0;
+        let exitIntentLastScrollDepth = 0;
+        let firstInteractionMs        = null;
+        let clsScore                  = 0;
+        let longTasksCount            = 0;
+        let maxLongTaskMs             = 0;
+        let inpMs                     = 0;
+
+        const pageLoadTime  = Date.now();
         let lastSigScrollY  = window.scrollY;
         let lastSigDir      = 0; // 1=down, -1=up
 
+        // ── Helpers
+        function getScrollDepth() {
+          const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+          return maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+        }
+
         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);
@@ -5623,6 +5676,39 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           return col * GRID_SIZE + row;
         }
 
+        // ── PerformanceObserver: CLS, Long Tasks, INP (best-effort, not all browsers)
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (!e.hadRecentInput) clsScore = Math.round((clsScore + e.value) * 1000) / 1000;
+            }
+          }).observe({ type: 'layout-shift', buffered: true });
+        } catch (_) {}
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              longTasksCount++;
+              if (e.duration > maxLongTaskMs) maxLongTaskMs = Math.round(e.duration);
+            }
+          }).observe({ type: 'longtask', buffered: true });
+        } catch (_) {}
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (e.duration > inpMs) inpMs = Math.round(e.duration);
+            }
+          }).observe({ type: 'event', durationThreshold: 40, buffered: true });
+        } catch (_) {}
+
+        // ── First interaction: time from page load to first meaningful engagement
+        const markFirstInteraction = () => {
+          if (firstInteractionMs === null) firstInteractionMs = Date.now() - pageLoadTime;
+        };
+        document.addEventListener('click',      markFirstInteraction, { once: true, passive: true });
+        document.addEventListener('keydown',    markFirstInteraction, { once: true, passive: true });
+        document.addEventListener('touchstart', markFirstInteraction, { once: true, passive: true });
+        window.addEventListener('scroll',       markFirstInteraction, { once: true, passive: true });
+
         // ── Mouse movement → move_grid (throttled to max 1 sample / 100 ms)
         let moveThrottle = false;
         document.addEventListener('mousemove', (e) => {
@@ -5633,7 +5719,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           moveGrid.set(key, (moveGrid.get(key) || 0) + 1);
         }, { passive: true });
 
-        // ── Hover dwell → hover_grid (track all elements, filter < 100 ms)
+        // ── Hover dwell → hover_grid + element_dwells for named/interactive elements
+        const ELEMENT_DWELL_TAGS = new Set(['BUTTON', 'A', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'INPUT', 'SELECT', 'TEXTAREA', 'IMG', 'LABEL']);
         const hoverStarts = new Map(); // element → enterTime
         document.addEventListener('mouseover', (e) => {
           if (e.target && e.target !== document.documentElement) {
@@ -5652,6 +5739,22 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             const cy   = rect.top  + rect.height / 2 + window.scrollY;
             const key  = getGridCell(cx, cy);
             hoverGrid.set(key, (hoverGrid.get(key) || 0) + dwell);
+
+            // Element-level dwell: track named/interactive elements hovered ≥ 300ms
+            if (dwell >= 300 && (target.id || ELEMENT_DWELL_TAGS.has(target.tagName))) {
+              const elemKey = `${target.tagName}|${target.id || ''}|${(target.textContent || '').trim().slice(0, 30)}`;
+              const existing = elementDwellsMap.get(elemKey);
+              if (existing) {
+                existing.dwell_ms += dwell;
+              } else {
+                elementDwellsMap.set(elemKey, {
+                  tag:      target.tagName.toLowerCase(),
+                  id:       target.id || '',
+                  text:     (target.textContent || '').trim().slice(0, 50),
+                  dwell_ms: dwell
+                });
+              }
+            }
           } catch (_) {}
         }, { passive: true });
 
@@ -5666,14 +5769,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }
         });
 
-        // ── Scroll reversal detection (direction change > 200 px)
+        // ── Scroll reversal detection (direction change ≥ 200 px) + depth recording
         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 (Math.abs(diff) < 50) return;
+          const dir = diff > 0 ? 1 : -1;
           if (lastSigDir !== 0 && dir !== lastSigDir && Math.abs(curr - lastSigScrollY) >= 200) {
             scrollReversals++;
+            scrollReversalDepths.push(getScrollDepth());
           }
           if (Math.abs(diff) >= 50) { lastSigDir = dir; lastSigScrollY = curr; }
         }, { passive: true });
@@ -5691,7 +5795,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (!t || !fieldFocusTimes.has(t)) return;
           const dwell = Date.now() - fieldFocusTimes.get(t);
           fieldFocusTimes.delete(t);
-          if (dwell < 100) return; // skip accidental focus
+          if (dwell < 100) return;
           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 || '');
@@ -5704,6 +5808,26 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           });
         }, true);
 
+        // ── Exit intent: mouse leaving viewport toward the top (user about to navigate away)
+        // Also fires as a standalone auto-event for direct querying.
+        let lastExitIntentTime = 0;
+        document.addEventListener('mouseleave', (e) => {
+          if (e.clientY > 0 || e.relatedTarget !== null) return; // only top-edge exits
+          const now = Date.now();
+          if (now - lastExitIntentTime < 2000) return; // debounce: max once per 2s
+          lastExitIntentTime = now;
+          exitIntentCount++;
+          exitIntentLastScrollDepth = getScrollDepth();
+          EventsManager.trackAutoEvent('exit_intent', {
+            scroll_depth:    exitIntentLastScrollDepth,
+            time_on_page_ms: now - pageLoadTime,
+            scroll_y:        window.scrollY,
+            document_height: Math.min(
+              document.documentElement.scrollHeight || document.body.scrollHeight, 25000
+            )
+          }).catch(() => {});
+        });
+
         // ── Serialise grid Map to [[col, row, value], ...] sparse array
         function serializeGrid(grid) {
           const out = [];
@@ -5720,17 +5844,34 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         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;
+          const hasData = moveGrid.size > 0 || hoverGrid.size > 0 || fieldDwells.length > 0
+            || tabSwitches > 0 || scrollReversals > 0 || exitIntentCount > 0
+            || firstInteractionMs !== null || clsScore > 0 || longTasksCount > 0;
+          if (!hasData) return;
           summarySent = true;
           try {
+            // Serialize element_dwells: filter ≥ 300ms, sort desc, cap at 20
+            const elementDwells = Array.from(elementDwellsMap.values())
+              .filter(e => e.dwell_ms >= 300)
+              .sort((a, b) => b.dwell_ms - a.dwell_ms)
+              .slice(0, 20);
+
             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,
+              scroll_reversals:              scrollReversals,
+              scroll_reversal_depths:        scrollReversalDepths,
+              tab_switches:                  tabSwitches,
+              total_tab_hidden_ms:           totalTabHiddenMs,
+              move_grid:                     serializeGrid(moveGrid),
+              hover_grid:                    serializeGrid(hoverGrid),
+              field_dwells:                  fieldDwells,
+              element_dwells:                elementDwells,
+              first_interaction_ms:          firstInteractionMs,
+              exit_intent_count:             exitIntentCount,
+              exit_intent_last_scroll_depth: exitIntentLastScrollDepth,
+              cls_score:                     clsScore,
+              long_tasks_count:              longTasksCount,
+              max_long_task_ms:              maxLongTaskMs,
+              inp_ms:                        inpMs,
               document_height: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
               document_width:  document.documentElement.scrollWidth  || document.body.scrollWidth  || 0,
               viewport_width:  window.innerWidth,

package/lib/umd/index.js

@@ -5523,104 +5523,157 @@
 
       /**
        * 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.
+       * enter the viewport for ≥ 1 second, capturing the actual dwell duration.
+       *
+       * Covers interactive elements (buttons, links, inputs, headings, images) and
+       * any element with an id or data-cq-track attribute. Each viewport entry is
+       * tracked independently — if a user scrolls away and back, both dwells count.
+       * This gives accurate attention data for the heatmap attention overlay.
        */
       startElementVisibilityTracking() {
         try {
           if (typeof IntersectionObserver === 'undefined') return;
 
-          // Only observe elements with an id or data-cq-track attribute
+          // Observe interactive/structural elements in addition to id/data-cq-track
+          const TRACKABLE_SELECTOR = [
+            '[id]:not([id=""])', '[data-cq-track]',
+            'button', 'a[href]', 'input:not([type=hidden])', 'select', 'textarea',
+            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img[alt]',
+            '[role="button"]', '[role="tab"]', '[role="menuitem"]', '[role="link"]'
+          ].join(', ');
+
           const getTrackableElements = () =>
-            document.querySelectorAll('[id]:not([id=""]), [data-cq-track]');
+            Array.from(document.querySelectorAll(TRACKABLE_SELECTOR)).filter(el => {
+              try { return el.getBoundingClientRect().height >= 20; } catch (_) { return true; }
+            });
 
-          const viewTimers = new Map(); // elementKey → setTimeout handle
-          const reported = new Set();  // elementKey → already fired once per page load
+          // enterTimes: key → { enterTime, el } — tracks elements currently in viewport
+          const enterTimes  = new Map();
+          const observedEls = new WeakSet(); // prevents double-observing same DOM node
+
+          function elementKey(el) {
+            return `${el.tagName}|${el.id || ''}|${el.getAttribute('data-cq-track') || ''}|${(el.textContent || '').trim().slice(0, 30)}`;
+          }
+
+          function getElementData(el) {
+            return {
+              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)
+            };
+          }
 
           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;
+              const el  = entry.target;
+              const key = elementKey(el);
 
               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);
+                // Element entered viewport — record entry time
+                if (!enterTimes.has(key)) {
+                  enterTimes.set(key, { enterTime: Date.now(), el });
                 }
               } else {
-                // Element left viewport before 1s — cancel timer
-                if (viewTimers.has(key)) {
-                  clearTimeout(viewTimers.get(key));
-                  viewTimers.delete(key);
+                // Element left viewport — emit actual dwell if ≥ 1s
+                const record = enterTimes.get(key);
+                if (record) {
+                  const dwell = Date.now() - record.enterTime;
+                  enterTimes.delete(key);
+                  if (dwell >= 1000) {
+                    EventsManager.trackAutoEvent('element_view', {
+                      time_in_viewport_ms:      dwell,
+                      viewport_percent_visible: Math.round(entry.intersectionRatio * 100),
+                      scroll_y_at_view:         window.scrollY
+                    }, getElementData(el));
+                  }
                 }
               }
             });
-          }, { threshold: 0.5 });
+          }, { threshold: [0.5] });
+
+          const observe = (el) => {
+            if (!observedEls.has(el)) { observedEls.add(el); observer.observe(el); }
+          };
 
-          // Observe existing elements
-          getTrackableElements().forEach(el => observer.observe(el));
+          getTrackableElements().forEach(observe);
 
           // 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);
-                }
-              });
+              getTrackableElements().forEach(observe);
             }).observe(document.body, { childList: true, subtree: true });
           }
-        } catch (error) {
-          }
+
+          // On page unload, flush elements still in viewport
+          window.addEventListener('pagehide', () => {
+            enterTimes.forEach(({ enterTime, el }) => {
+              const dwell = Date.now() - enterTime;
+              if (dwell >= 1000) {
+                EventsManager.trackAutoEvent('element_view', {
+                  time_in_viewport_ms:      dwell,
+                  viewport_percent_visible: 100,
+                  scroll_y_at_view:         window.scrollY
+                }, getElementData(el));
+              }
+            });
+          });
+        } 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)
+       * High-volume/continuous data lives here (grids, counts) to keep event volume low.
+       * Low-frequency, high-signal moments (exit_intent) are emitted as separate auto-events
+       * but their counters are also included here for correlation.
+       *
+       * Captures:
+       *  - Mouse movement grid (move_grid) + hover dwell grid (hover_grid)
+       *  - Element-level hover dwells for named/interactive elements (element_dwells)
        *  - Tab-switch count and hidden time
-       *  - Scroll reversal count
+       *  - Scroll reversal count + depths at each reversal (scroll_reversal_depths)
        *  - Per-field focus dwell times
+       *  - Exit intent count + scroll depth at last exit intent
+       *  - First interaction time (how long before user engaged)
+       *  - Performance: CLS score, long task count/max, INP
        */
       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
+          // 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}]
+          const elementDwellsMap = new Map(); // elemKey → {tag, id, text, dwell_ms}
+          const scrollReversalDepths = [];    // scroll depth % at each reversal
+
+          let tabSwitches               = 0;
+          let totalTabHiddenMs          = 0;
+          let tabHiddenTime             = null;
+          let scrollReversals           = 0;
+          let exitIntentCount           = 0;
+          let exitIntentLastScrollDepth = 0;
+          let firstInteractionMs        = null;
+          let clsScore                  = 0;
+          let longTasksCount            = 0;
+          let maxLongTaskMs             = 0;
+          let inpMs                     = 0;
+
+          const pageLoadTime  = Date.now();
           let lastSigScrollY  = window.scrollY;
           let lastSigDir      = 0; // 1=down, -1=up
 
+          // ── Helpers
+          function getScrollDepth() {
+            const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+            return maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+          }
+
           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);
@@ -5629,6 +5682,39 @@
             return col * GRID_SIZE + row;
           }
 
+          // ── PerformanceObserver: CLS, Long Tasks, INP (best-effort, not all browsers)
+          try {
+            new PerformanceObserver(list => {
+              for (const e of list.getEntries()) {
+                if (!e.hadRecentInput) clsScore = Math.round((clsScore + e.value) * 1000) / 1000;
+              }
+            }).observe({ type: 'layout-shift', buffered: true });
+          } catch (_) {}
+          try {
+            new PerformanceObserver(list => {
+              for (const e of list.getEntries()) {
+                longTasksCount++;
+                if (e.duration > maxLongTaskMs) maxLongTaskMs = Math.round(e.duration);
+              }
+            }).observe({ type: 'longtask', buffered: true });
+          } catch (_) {}
+          try {
+            new PerformanceObserver(list => {
+              for (const e of list.getEntries()) {
+                if (e.duration > inpMs) inpMs = Math.round(e.duration);
+              }
+            }).observe({ type: 'event', durationThreshold: 40, buffered: true });
+          } catch (_) {}
+
+          // ── First interaction: time from page load to first meaningful engagement
+          const markFirstInteraction = () => {
+            if (firstInteractionMs === null) firstInteractionMs = Date.now() - pageLoadTime;
+          };
+          document.addEventListener('click',      markFirstInteraction, { once: true, passive: true });
+          document.addEventListener('keydown',    markFirstInteraction, { once: true, passive: true });
+          document.addEventListener('touchstart', markFirstInteraction, { once: true, passive: true });
+          window.addEventListener('scroll',       markFirstInteraction, { once: true, passive: true });
+
           // ── Mouse movement → move_grid (throttled to max 1 sample / 100 ms)
           let moveThrottle = false;
           document.addEventListener('mousemove', (e) => {
@@ -5639,7 +5725,8 @@
             moveGrid.set(key, (moveGrid.get(key) || 0) + 1);
           }, { passive: true });
 
-          // ── Hover dwell → hover_grid (track all elements, filter < 100 ms)
+          // ── Hover dwell → hover_grid + element_dwells for named/interactive elements
+          const ELEMENT_DWELL_TAGS = new Set(['BUTTON', 'A', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'INPUT', 'SELECT', 'TEXTAREA', 'IMG', 'LABEL']);
           const hoverStarts = new Map(); // element → enterTime
           document.addEventListener('mouseover', (e) => {
             if (e.target && e.target !== document.documentElement) {
@@ -5658,6 +5745,22 @@
               const cy   = rect.top  + rect.height / 2 + window.scrollY;
               const key  = getGridCell(cx, cy);
               hoverGrid.set(key, (hoverGrid.get(key) || 0) + dwell);
+
+              // Element-level dwell: track named/interactive elements hovered ≥ 300ms
+              if (dwell >= 300 && (target.id || ELEMENT_DWELL_TAGS.has(target.tagName))) {
+                const elemKey = `${target.tagName}|${target.id || ''}|${(target.textContent || '').trim().slice(0, 30)}`;
+                const existing = elementDwellsMap.get(elemKey);
+                if (existing) {
+                  existing.dwell_ms += dwell;
+                } else {
+                  elementDwellsMap.set(elemKey, {
+                    tag:      target.tagName.toLowerCase(),
+                    id:       target.id || '',
+                    text:     (target.textContent || '').trim().slice(0, 50),
+                    dwell_ms: dwell
+                  });
+                }
+              }
             } catch (_) {}
           }, { passive: true });
 
@@ -5672,14 +5775,15 @@
             }
           });
 
-          // ── Scroll reversal detection (direction change > 200 px)
+          // ── Scroll reversal detection (direction change ≥ 200 px) + depth recording
           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 (Math.abs(diff) < 50) return;
+            const dir = diff > 0 ? 1 : -1;
             if (lastSigDir !== 0 && dir !== lastSigDir && Math.abs(curr - lastSigScrollY) >= 200) {
               scrollReversals++;
+              scrollReversalDepths.push(getScrollDepth());
             }
             if (Math.abs(diff) >= 50) { lastSigDir = dir; lastSigScrollY = curr; }
           }, { passive: true });
@@ -5697,7 +5801,7 @@
             if (!t || !fieldFocusTimes.has(t)) return;
             const dwell = Date.now() - fieldFocusTimes.get(t);
             fieldFocusTimes.delete(t);
-            if (dwell < 100) return; // skip accidental focus
+            if (dwell < 100) return;
             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 || '');
@@ -5710,6 +5814,26 @@
             });
           }, true);
 
+          // ── Exit intent: mouse leaving viewport toward the top (user about to navigate away)
+          // Also fires as a standalone auto-event for direct querying.
+          let lastExitIntentTime = 0;
+          document.addEventListener('mouseleave', (e) => {
+            if (e.clientY > 0 || e.relatedTarget !== null) return; // only top-edge exits
+            const now = Date.now();
+            if (now - lastExitIntentTime < 2000) return; // debounce: max once per 2s
+            lastExitIntentTime = now;
+            exitIntentCount++;
+            exitIntentLastScrollDepth = getScrollDepth();
+            EventsManager.trackAutoEvent('exit_intent', {
+              scroll_depth:    exitIntentLastScrollDepth,
+              time_on_page_ms: now - pageLoadTime,
+              scroll_y:        window.scrollY,
+              document_height: Math.min(
+                document.documentElement.scrollHeight || document.body.scrollHeight, 25000
+              )
+            }).catch(() => {});
+          });
+
           // ── Serialise grid Map to [[col, row, value], ...] sparse array
           function serializeGrid(grid) {
             const out = [];
@@ -5726,17 +5850,34 @@
           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;
+            const hasData = moveGrid.size > 0 || hoverGrid.size > 0 || fieldDwells.length > 0
+              || tabSwitches > 0 || scrollReversals > 0 || exitIntentCount > 0
+              || firstInteractionMs !== null || clsScore > 0 || longTasksCount > 0;
+            if (!hasData) return;
             summarySent = true;
             try {
+              // Serialize element_dwells: filter ≥ 300ms, sort desc, cap at 20
+              const elementDwells = Array.from(elementDwellsMap.values())
+                .filter(e => e.dwell_ms >= 300)
+                .sort((a, b) => b.dwell_ms - a.dwell_ms)
+                .slice(0, 20);
+
               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,
+                scroll_reversals:              scrollReversals,
+                scroll_reversal_depths:        scrollReversalDepths,
+                tab_switches:                  tabSwitches,
+                total_tab_hidden_ms:           totalTabHiddenMs,
+                move_grid:                     serializeGrid(moveGrid),
+                hover_grid:                    serializeGrid(hoverGrid),
+                field_dwells:                  fieldDwells,
+                element_dwells:                elementDwells,
+                first_interaction_ms:          firstInteractionMs,
+                exit_intent_count:             exitIntentCount,
+                exit_intent_last_scroll_depth: exitIntentLastScrollDepth,
+                cls_score:                     clsScore,
+                long_tasks_count:              longTasksCount,
+                max_long_task_ms:              maxLongTaskMs,
+                inp_ms:                        inpMs,
                 document_height: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
                 document_width:  document.documentElement.scrollWidth  || document.body.scrollWidth  || 0,
                 viewport_width:  window.innerWidth,

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "cryptique-sdk",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "type": "module",
   "description": "Cryptique Analytics SDK - Comprehensive web analytics and user tracking for modern web applications",
   "main": "lib/cjs/index.js",
+  
   "module": "lib/esm/index.js",
   "browser": "lib/umd/index.js",
   "types": "lib/types/index.d.ts",