@grainql/analytics-web 2.5.4 → 2.7.0

package/dist/index.global.dev.js

@@ -1,4 +1,4 @@
-/* Grain Analytics Web SDK v2.5.4 | MIT License | Development Build */
+/* Grain Analytics Web SDK v2.7.0 | MIT License | Development Build */
 "use strict";
 var Grain = (() => {
   var __defProp = Object.defineProperty;
@@ -22,6 +22,696 @@ var Grain = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+  // src/attention-quality.ts
+  var DEFAULT_OPTIONS, AttentionQualityManager;
+  var init_attention_quality = __esm({
+    "src/attention-quality.ts"() {
+      "use strict";
+      DEFAULT_OPTIONS = {
+        maxSectionDuration: 9e3,
+        // 9 seconds
+        minScrollDistance: 100,
+        // 100 pixels
+        idleThreshold: 3e4
+        // 30 seconds
+      };
+      AttentionQualityManager = class {
+        constructor(activityDetector, options = {}) {
+          this.isDestroyed = false;
+          // Page visibility tracking
+          this.isPageVisible = true;
+          this.visibilityChangeHandler = null;
+          // Section attention state
+          this.sectionStates = /* @__PURE__ */ new Map();
+          // Policies applied reasons (for debugging/traceability)
+          this.lastFilterReason = null;
+          this.activityDetector = activityDetector;
+          this.options = {
+            ...DEFAULT_OPTIONS,
+            ...options,
+            debug: options.debug ?? false
+          };
+          this.setupPageVisibilityTracking();
+        }
+        /**
+         * Setup page visibility tracking
+         */
+        setupPageVisibilityTracking() {
+          if (typeof document === "undefined")
+            return;
+          this.isPageVisible = document.visibilityState === "visible";
+          this.visibilityChangeHandler = () => {
+            const wasVisible = this.isPageVisible;
+            this.isPageVisible = document.visibilityState === "visible";
+            if (!this.isPageVisible && wasVisible) {
+              this.log("Page hidden - tracking paused");
+            } else if (this.isPageVisible && !wasVisible) {
+              this.log("Page visible - tracking resumed");
+              this.resetAllSections();
+            }
+          };
+          document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+        }
+        /**
+         * Check if tracking should be allowed (global check)
+         * Returns true if tracking is allowed, false if it should be paused
+         */
+        shouldTrack() {
+          if (!this.isPageVisible) {
+            this.lastFilterReason = "page_hidden";
+            return false;
+          }
+          if (!this.activityDetector.isActive(this.options.idleThreshold)) {
+            this.lastFilterReason = "user_idle";
+            return false;
+          }
+          this.lastFilterReason = null;
+          return true;
+        }
+        /**
+         * Check if section view tracking should be allowed for a specific section
+         * @param sectionName - Section identifier
+         * @param currentScrollY - Current scroll position
+         * @returns Object with shouldTrack boolean and optional reason
+         */
+        shouldTrackSection(sectionName, currentScrollY) {
+          if (!this.shouldTrack()) {
+            return {
+              shouldTrack: false,
+              reason: this.lastFilterReason || "global_policy"
+            };
+          }
+          let state = this.sectionStates.get(sectionName);
+          if (!state) {
+            state = {
+              sectionName,
+              currentDuration: 0,
+              lastScrollPosition: currentScrollY,
+              lastResetTime: Date.now()
+            };
+            this.sectionStates.set(sectionName, state);
+          }
+          const scrollDistance = Math.abs(currentScrollY - state.lastScrollPosition);
+          const hasScrolledEnough = scrollDistance >= this.options.minScrollDistance;
+          if (hasScrolledEnough) {
+            this.log(`Section "${sectionName}": Attention reset due to ${Math.round(scrollDistance)}px scroll`);
+            state.currentDuration = 0;
+            state.lastScrollPosition = currentScrollY;
+            state.lastResetTime = Date.now();
+            return {
+              shouldTrack: true,
+              resetAttention: true
+            };
+          }
+          if (state.currentDuration >= this.options.maxSectionDuration) {
+            return {
+              shouldTrack: false,
+              reason: "max_duration_reached"
+            };
+          }
+          return {
+            shouldTrack: true
+          };
+        }
+        /**
+         * Update section duration (call this when tracking a section view event)
+         * @param sectionName - Section identifier
+         * @param durationMs - Duration to add to current attention block
+         */
+        updateSectionDuration(sectionName, durationMs) {
+          const state = this.sectionStates.get(sectionName);
+          if (state) {
+            state.currentDuration += durationMs;
+            if (state.currentDuration >= this.options.maxSectionDuration) {
+              this.log(`Section "${sectionName}": Max duration cap reached (${state.currentDuration}ms)`);
+            }
+          }
+        }
+        /**
+         * Reset attention for a specific section (call when user navigates to different section)
+         * @param sectionName - Section identifier
+         */
+        resetSection(sectionName) {
+          const state = this.sectionStates.get(sectionName);
+          if (state) {
+            this.log(`Section "${sectionName}": Attention reset (section exit)`);
+            state.currentDuration = 0;
+            state.lastResetTime = Date.now();
+          }
+        }
+        /**
+         * Reset all section attention states
+         */
+        resetAllSections() {
+          this.log("Resetting all section attention states");
+          for (const state of this.sectionStates.values()) {
+            state.currentDuration = 0;
+            state.lastResetTime = Date.now();
+          }
+        }
+        /**
+         * Get current attention state for a section (for debugging/monitoring)
+         */
+        getSectionState(sectionName) {
+          return this.sectionStates.get(sectionName);
+        }
+        /**
+         * Get reason why last tracking attempt was filtered
+         */
+        getLastFilterReason() {
+          return this.lastFilterReason;
+        }
+        /**
+         * Check if scroll tracking should be allowed
+         * Similar to shouldTrack() but also checks scroll-specific conditions
+         */
+        shouldTrackScroll(previousScrollY, currentScrollY) {
+          if (!this.shouldTrack()) {
+            return {
+              shouldTrack: false,
+              reason: this.lastFilterReason || "global_policy"
+            };
+          }
+          const scrollDistance = Math.abs(currentScrollY - previousScrollY);
+          if (scrollDistance < 10) {
+            return {
+              shouldTrack: false,
+              reason: "scroll_too_small"
+            };
+          }
+          return {
+            shouldTrack: true
+          };
+        }
+        /**
+         * Get all active policies as object (for monitoring/debugging)
+         */
+        getPolicies() {
+          return {
+            maxSectionDuration: this.options.maxSectionDuration,
+            minScrollDistance: this.options.minScrollDistance,
+            idleThreshold: this.options.idleThreshold
+          };
+        }
+        /**
+         * Get current tracking state (for monitoring/debugging)
+         */
+        getTrackingState() {
+          return {
+            isPageVisible: this.isPageVisible,
+            isUserActive: this.activityDetector.isActive(this.options.idleThreshold),
+            timeSinceLastActivity: this.activityDetector.getTimeSinceLastActivity(),
+            activeSections: this.sectionStates.size
+          };
+        }
+        /**
+         * Log debug messages
+         */
+        log(...args) {
+          if (this.options.debug) {
+            console.log("[AttentionQuality]", ...args);
+          }
+        }
+        /**
+         * Destroy and cleanup
+         */
+        destroy() {
+          if (this.isDestroyed)
+            return;
+          this.isDestroyed = true;
+          if (this.visibilityChangeHandler && typeof document !== "undefined") {
+            document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+            this.visibilityChangeHandler = null;
+          }
+          this.sectionStates.clear();
+        }
+      };
+    }
+  });
+
+  // src/heatmap-tracking.ts
+  var heatmap_tracking_exports = {};
+  __export(heatmap_tracking_exports, {
+    HeatmapTrackingManager: () => HeatmapTrackingManager
+  });
+  var DEFAULT_OPTIONS2, HeatmapTrackingManager;
+  var init_heatmap_tracking = __esm({
+    "src/heatmap-tracking.ts"() {
+      "use strict";
+      init_attention_quality();
+      DEFAULT_OPTIONS2 = {
+        scrollDebounceDelay: 100,
+        batchDelay: 2e3,
+        maxBatchSize: 20,
+        debug: false
+      };
+      HeatmapTrackingManager = class {
+        constructor(tracker, options = {}) {
+          this.isDestroyed = false;
+          // Tracking state
+          this.currentScrollState = null;
+          this.pendingClicks = [];
+          this.pendingScrolls = [];
+          // Timers
+          this.scrollDebounceTimer = null;
+          this.batchTimer = null;
+          this.scrollTrackingTimer = null;
+          this.periodicScrollTimer = null;
+          // Scroll tracking
+          this.lastScrollPosition = 0;
+          this.lastScrollTime = Date.now();
+          this.SPLIT_DURATION = 3e3;
+          this.tracker = tracker;
+          this.options = { ...DEFAULT_OPTIONS2, ...options };
+          this.attentionQuality = new AttentionQualityManager(
+            tracker.getActivityDetector(),
+            {
+              maxSectionDuration: 9e3,
+              // 9 seconds per viewport section
+              minScrollDistance: 100,
+              // 100 pixels
+              idleThreshold: 3e4,
+              // 30 seconds
+              debug: this.options.debug
+            }
+          );
+          if (typeof window !== "undefined" && typeof document !== "undefined") {
+            if (document.readyState === "loading") {
+              document.addEventListener("DOMContentLoaded", () => this.initialize());
+            } else {
+              setTimeout(() => this.initialize(), 0);
+            }
+          }
+        }
+        /**
+         * Initialize heatmap tracking
+         */
+        initialize() {
+          if (this.isDestroyed)
+            return;
+          this.log("Initializing heatmap tracking");
+          this.setupClickTracking();
+          this.setupScrollTracking();
+          this.startScrollTracking();
+          this.setupUnloadHandler();
+        }
+        /**
+         * Setup click event tracking
+         */
+        setupClickTracking() {
+          if (typeof document === "undefined")
+            return;
+          const clickHandler = (event) => {
+            if (this.isDestroyed)
+              return;
+            if (!this.tracker.hasConsent("analytics"))
+              return;
+            this.handleClick(event);
+          };
+          document.addEventListener("click", clickHandler, { passive: true, capture: true });
+        }
+        /**
+         * Setup scroll event tracking
+         */
+        setupScrollTracking() {
+          if (typeof window === "undefined")
+            return;
+          const scrollHandler = () => {
+            if (this.scrollDebounceTimer !== null) {
+              clearTimeout(this.scrollDebounceTimer);
+            }
+            this.scrollDebounceTimer = window.setTimeout(() => {
+              this.handleScroll();
+              this.scrollDebounceTimer = null;
+            }, this.options.scrollDebounceDelay);
+          };
+          window.addEventListener("scroll", scrollHandler, { passive: true });
+        }
+        /**
+         * Start periodic scroll state tracking
+         */
+        startScrollTracking() {
+          if (typeof window === "undefined")
+            return;
+          this.updateScrollState();
+          this.scrollTrackingTimer = window.setInterval(() => {
+            if (this.isDestroyed)
+              return;
+            this.updateScrollState();
+          }, 500);
+          this.startPeriodicScrollTracking();
+        }
+        /**
+         * Start periodic scroll tracking (sends events every 3 seconds)
+         */
+        startPeriodicScrollTracking() {
+          if (typeof window === "undefined")
+            return;
+          this.periodicScrollTimer = window.setInterval(() => {
+            if (this.isDestroyed || !this.currentScrollState)
+              return;
+            if (!this.tracker.hasConsent("analytics"))
+              return;
+            if (!this.attentionQuality.shouldTrack()) {
+              this.log("Scroll tracking paused:", this.attentionQuality.getLastFilterReason());
+              return;
+            }
+            const currentTime = Date.now();
+            const duration = currentTime - this.currentScrollState.entryTime;
+            if (duration > 1e3) {
+              const scrollY = window.scrollY || window.pageYOffset;
+              const viewportHeight = window.innerHeight;
+              const pageHeight = document.documentElement.scrollHeight;
+              const sectionKey = `viewport_section_${this.currentScrollState.viewportSection}`;
+              const attentionCheck = this.attentionQuality.shouldTrackSection(sectionKey, scrollY);
+              if (attentionCheck.resetAttention) {
+                this.log(`Viewport section ${this.currentScrollState.viewportSection}: Attention reset`);
+                this.currentScrollState.entryTime = currentTime;
+                return;
+              }
+              if (!attentionCheck.shouldTrack) {
+                this.log(`Viewport section ${this.currentScrollState.viewportSection}: ${attentionCheck.reason}`);
+                return;
+              }
+              const scrollData = {
+                pageUrl: window.location.href,
+                viewportSection: this.currentScrollState.viewportSection,
+                scrollDepthPx: scrollY,
+                durationMs: duration,
+                entryTimestamp: this.currentScrollState.entryTime,
+                exitTimestamp: currentTime,
+                pageHeight,
+                viewportHeight
+              };
+              this.tracker.trackSystemEvent("_grain_heatmap_scroll", {
+                page_url: scrollData.pageUrl,
+                viewport_section: scrollData.viewportSection,
+                scroll_depth_px: scrollData.scrollDepthPx,
+                duration_ms: scrollData.durationMs,
+                entry_timestamp: scrollData.entryTimestamp,
+                exit_timestamp: scrollData.exitTimestamp,
+                page_height: scrollData.pageHeight,
+                viewport_height: scrollData.viewportHeight,
+                is_split: true
+                // Flag to indicate periodic tracking, not final exit
+              }, { flush: true });
+              this.attentionQuality.updateSectionDuration(sectionKey, duration);
+              this.currentScrollState.entryTime = currentTime;
+            }
+          }, this.SPLIT_DURATION);
+        }
+        /**
+         * Setup page unload handler to beacon remaining data
+         */
+        setupUnloadHandler() {
+          if (typeof window === "undefined")
+            return;
+          const unloadHandler = () => {
+            if (this.currentScrollState) {
+              const currentTime = Date.now();
+              const duration = currentTime - this.currentScrollState.entryTime;
+              if (duration > 100) {
+                const scrollData = {
+                  pageUrl: window.location.href,
+                  viewportSection: this.currentScrollState.viewportSection,
+                  scrollDepthPx: this.currentScrollState.scrollDepthPx,
+                  durationMs: duration,
+                  entryTimestamp: this.currentScrollState.entryTime,
+                  exitTimestamp: currentTime,
+                  pageHeight: document.documentElement.scrollHeight,
+                  viewportHeight: window.innerHeight
+                };
+                this.pendingScrolls.push(scrollData);
+              }
+            }
+            this.flushPendingEventsWithBeacon();
+          };
+          window.addEventListener("beforeunload", unloadHandler);
+          window.addEventListener("pagehide", unloadHandler);
+        }
+        /**
+         * Handle click event
+         */
+        handleClick(event) {
+          if (!this.tracker.hasConsent("analytics"))
+            return;
+          const element = event.target;
+          if (!element)
+            return;
+          const pageUrl = window.location.href;
+          const xpath = this.generateXPath(element);
+          const viewportX = Math.round(event.clientX);
+          const viewportY = Math.round(event.clientY);
+          const pageX = Math.round(event.pageX);
+          const pageY = Math.round(event.pageY);
+          const elementTag = element.tagName?.toLowerCase() || "unknown";
+          const elementText = element.textContent?.trim().substring(0, 100);
+          const clickData = {
+            pageUrl,
+            xpath,
+            viewportX,
+            viewportY,
+            pageX,
+            pageY,
+            elementTag,
+            elementText: elementText || void 0,
+            timestamp: Date.now()
+          };
+          const isNavigationLink = element instanceof HTMLAnchorElement && element.href;
+          if (isNavigationLink) {
+            this.tracker.trackSystemEvent("_grain_heatmap_click", {
+              page_url: clickData.pageUrl,
+              xpath: clickData.xpath,
+              viewport_x: clickData.viewportX,
+              viewport_y: clickData.viewportY,
+              page_x: clickData.pageX,
+              page_y: clickData.pageY,
+              element_tag: clickData.elementTag,
+              element_text: clickData.elementText,
+              timestamp: clickData.timestamp
+            }, { flush: true });
+          } else {
+            this.pendingClicks.push(clickData);
+            this.considerBatchFlush();
+          }
+        }
+        /**
+         * Handle scroll event
+         */
+        handleScroll() {
+          if (!this.tracker.hasConsent("analytics"))
+            return;
+          this.updateScrollState();
+        }
+        /**
+         * Update current scroll state
+         */
+        updateScrollState() {
+          if (typeof window === "undefined")
+            return;
+          if (!this.tracker.hasConsent("analytics"))
+            return;
+          const currentTime = Date.now();
+          const scrollY = window.scrollY || window.pageYOffset;
+          const viewportHeight = window.innerHeight;
+          const pageHeight = document.documentElement.scrollHeight;
+          const viewportSection = Math.floor(scrollY / viewportHeight);
+          if (this.currentScrollState && this.currentScrollState.viewportSection !== viewportSection) {
+            const duration = currentTime - this.currentScrollState.entryTime;
+            if (duration > 100) {
+              const scrollData = {
+                pageUrl: window.location.href,
+                viewportSection: this.currentScrollState.viewportSection,
+                scrollDepthPx: this.currentScrollState.scrollDepthPx,
+                durationMs: duration,
+                entryTimestamp: this.currentScrollState.entryTime,
+                exitTimestamp: currentTime,
+                pageHeight,
+                viewportHeight
+              };
+              this.pendingScrolls.push(scrollData);
+            }
+            const prevSectionKey = `viewport_section_${this.currentScrollState.viewportSection}`;
+            this.attentionQuality.resetSection(prevSectionKey);
+          }
+          if (!this.currentScrollState || this.currentScrollState.viewportSection !== viewportSection) {
+            this.currentScrollState = {
+              viewportSection,
+              entryTime: currentTime,
+              scrollDepthPx: scrollY
+            };
+          }
+          this.lastScrollPosition = scrollY;
+          this.lastScrollTime = currentTime;
+          this.considerBatchFlush();
+        }
+        /**
+         * Generate XPath for an element
+         */
+        generateXPath(element) {
+          if (!element)
+            return "";
+          if (element.id) {
+            return `//*[@id="${element.id}"]`;
+          }
+          const paths = [];
+          let currentElement = element;
+          while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {
+            let index = 0;
+            let sibling = currentElement;
+            while (sibling) {
+              sibling = sibling.previousElementSibling;
+              if (sibling && sibling.nodeName === currentElement.nodeName) {
+                index++;
+              }
+            }
+            const tagName = currentElement.nodeName.toLowerCase();
+            const pathIndex = index > 0 ? `[${index + 1}]` : "";
+            paths.unshift(`${tagName}${pathIndex}`);
+            currentElement = currentElement.parentElement;
+          }
+          return paths.length ? `/${paths.join("/")}` : "";
+        }
+        /**
+         * Consider flushing batched events
+         */
+        considerBatchFlush() {
+          const totalEvents = this.pendingClicks.length + this.pendingScrolls.length;
+          if (totalEvents >= this.options.maxBatchSize) {
+            this.flushPendingEvents();
+            return;
+          }
+          if (this.batchTimer === null && totalEvents > 0) {
+            this.batchTimer = window.setTimeout(() => {
+              this.flushPendingEvents();
+              this.batchTimer = null;
+            }, this.options.batchDelay);
+          }
+        }
+        /**
+         * Flush pending events
+         */
+        flushPendingEvents() {
+          if (this.isDestroyed)
+            return;
+          if (!this.tracker.hasConsent("analytics")) {
+            this.pendingClicks = [];
+            this.pendingScrolls = [];
+            return;
+          }
+          if (this.pendingClicks.length > 0) {
+            for (const clickData of this.pendingClicks) {
+              this.tracker.trackSystemEvent("_grain_heatmap_click", {
+                page_url: clickData.pageUrl,
+                xpath: clickData.xpath,
+                viewport_x: clickData.viewportX,
+                viewport_y: clickData.viewportY,
+                page_x: clickData.pageX,
+                page_y: clickData.pageY,
+                element_tag: clickData.elementTag,
+                element_text: clickData.elementText,
+                timestamp: clickData.timestamp
+              });
+            }
+            this.pendingClicks = [];
+          }
+          if (this.pendingScrolls.length > 0) {
+            for (const scrollData of this.pendingScrolls) {
+              this.tracker.trackSystemEvent("_grain_heatmap_scroll", {
+                page_url: scrollData.pageUrl,
+                viewport_section: scrollData.viewportSection,
+                scroll_depth_px: scrollData.scrollDepthPx,
+                duration_ms: scrollData.durationMs,
+                entry_timestamp: scrollData.entryTimestamp,
+                exit_timestamp: scrollData.exitTimestamp,
+                page_height: scrollData.pageHeight,
+                viewport_height: scrollData.viewportHeight
+              });
+            }
+            this.pendingScrolls = [];
+          }
+          if (this.batchTimer !== null) {
+            clearTimeout(this.batchTimer);
+            this.batchTimer = null;
+          }
+        }
+        /**
+         * Flush pending events with beacon (for page unload)
+         */
+        flushPendingEventsWithBeacon() {
+          if (!this.tracker.hasConsent("analytics")) {
+            this.pendingClicks = [];
+            this.pendingScrolls = [];
+            return;
+          }
+          if (this.pendingClicks.length > 0) {
+            for (const clickData of this.pendingClicks) {
+              this.tracker.trackSystemEvent("_grain_heatmap_click", {
+                page_url: clickData.pageUrl,
+                xpath: clickData.xpath,
+                viewport_x: clickData.viewportX,
+                viewport_y: clickData.viewportY,
+                page_x: clickData.pageX,
+                page_y: clickData.pageY,
+                element_tag: clickData.elementTag,
+                element_text: clickData.elementText,
+                timestamp: clickData.timestamp
+              }, { flush: true });
+            }
+            this.pendingClicks = [];
+          }
+          if (this.pendingScrolls.length > 0) {
+            for (const scrollData of this.pendingScrolls) {
+              this.tracker.trackSystemEvent("_grain_heatmap_scroll", {
+                page_url: scrollData.pageUrl,
+                viewport_section: scrollData.viewportSection,
+                scroll_depth_px: scrollData.scrollDepthPx,
+                duration_ms: scrollData.durationMs,
+                entry_timestamp: scrollData.entryTimestamp,
+                exit_timestamp: scrollData.exitTimestamp,
+                page_height: scrollData.pageHeight,
+                viewport_height: scrollData.viewportHeight
+              }, { flush: true });
+            }
+            this.pendingScrolls = [];
+          }
+        }
+        /**
+         * Log debug message
+         */
+        log(...args) {
+          if (this.options.debug) {
+            this.tracker.log("[Heatmap Tracking]", ...args);
+          }
+        }
+        /**
+         * Destroy the tracking manager
+         */
+        destroy() {
+          this.isDestroyed = true;
+          if (this.scrollDebounceTimer !== null) {
+            clearTimeout(this.scrollDebounceTimer);
+            this.scrollDebounceTimer = null;
+          }
+          if (this.batchTimer !== null) {
+            clearTimeout(this.batchTimer);
+            this.batchTimer = null;
+          }
+          if (this.scrollTrackingTimer !== null) {
+            clearInterval(this.scrollTrackingTimer);
+            this.scrollTrackingTimer = null;
+          }
+          if (this.periodicScrollTimer !== null) {
+            clearInterval(this.periodicScrollTimer);
+            this.periodicScrollTimer = null;
+          }
+          this.attentionQuality.destroy();
+          this.flushPendingEvents();
+        }
+      };
+    }
+  });
+
   // src/interaction-tracking.ts
   var interaction_tracking_exports = {};
   __export(interaction_tracking_exports, {
@@ -62,7 +752,7 @@ var Grain = (() => {
         attachAllListeners() {
           if (this.isDestroyed)
             return;
-          this.log("Attaching interaction listeners for", this.interactions.length, "interactions");
+          this.log("Attaching interaction listeners");
           for (const interaction of this.interactions) {
             this.attachInteractionListener(interaction);
           }
@@ -92,7 +782,6 @@ var Grain = (() => {
             handlers.push({ event: "focus", handler: focusHandler });
           }
           this.attachedListeners.set(element, handlers);
-          this.log("Attached listeners to element for:", interaction.eventName);
         }
         /**
          * Handle click event on interaction
@@ -116,17 +805,12 @@ var Grain = (() => {
             ...isNavigationLink && { href: element.href },
             timestamp: Date.now()
           };
-          if (isNavigationLink) {
-            const result = this.tracker.track(interaction.eventName, eventProperties, { flush: true });
-            if (result instanceof Promise) {
-              result.catch((error) => {
-                this.log("Failed to track navigation click:", error);
-              });
-            }
-          } else {
-            this.tracker.track(interaction.eventName, eventProperties);
+          const result = this.tracker.track(interaction.eventName, eventProperties, { flush: true });
+          if (result instanceof Promise) {
+            result.catch((error) => {
+              this.log("Failed to track click:", error);
+            });
           }
-          this.log("Tracked click interaction:", interaction.eventName);
         }
         /**
          * Handle focus event on interaction (for form fields)
@@ -147,7 +831,6 @@ var Grain = (() => {
             element_class: element.className || void 0,
             timestamp: Date.now()
           });
-          this.log("Tracked focus interaction:", interaction.eventName);
         }
         /**
          * Find element by XPath selector
@@ -241,7 +924,6 @@ var Grain = (() => {
             element.removeEventListener(event, handler);
           });
           this.attachedListeners.delete(element);
-          this.log("Detached listeners from element");
         }
         /**
          * Log debug messages
@@ -296,11 +978,12 @@ var Grain = (() => {
   __export(section_tracking_exports, {
     SectionTrackingManager: () => SectionTrackingManager
   });
-  var DEFAULT_OPTIONS, SectionTrackingManager;
+  var DEFAULT_OPTIONS3, SectionTrackingManager;
   var init_section_tracking = __esm({
     "src/section-tracking.ts"() {
       "use strict";
-      DEFAULT_OPTIONS = {
+      init_attention_quality();
+      DEFAULT_OPTIONS3 = {
         minDwellTime: 1e3,
         // 1 second minimum
         scrollVelocityThreshold: 500,
@@ -313,7 +996,6 @@ var Grain = (() => {
         debug: false
       };
       SectionTrackingManager = class {
-        // 3 seconds
         constructor(tracker, sections, options = {}) {
           this.isDestroyed = false;
           // Tracking state
@@ -334,7 +1016,19 @@ var Grain = (() => {
           this.SPLIT_DURATION = 3e3;
           this.tracker = tracker;
           this.sections = sections;
-          this.options = { ...DEFAULT_OPTIONS, ...options };
+          this.options = { ...DEFAULT_OPTIONS3, ...options };
+          this.attentionQuality = new AttentionQualityManager(
+            tracker.getActivityDetector(),
+            {
+              maxSectionDuration: 9e3,
+              // 9 seconds
+              minScrollDistance: 100,
+              // 100 pixels
+              idleThreshold: 3e4,
+              // 30 seconds
+              debug: this.options.debug
+            }
+          );
           if (typeof window !== "undefined" && typeof document !== "undefined") {
             if (document.readyState === "loading") {
               document.addEventListener("DOMContentLoaded", () => this.initialize());
@@ -349,7 +1043,7 @@ var Grain = (() => {
         initialize() {
           if (this.isDestroyed)
             return;
-          this.log("Initializing section tracking for", this.sections.length, "sections");
+          this.log("Initializing section tracking");
           this.setupIntersectionObserver();
           this.setupScrollListener();
           this.initializeSections();
@@ -419,7 +1113,6 @@ var Grain = (() => {
             if (this.intersectionObserver) {
               this.intersectionObserver.observe(element);
             }
-            this.log("Section initialized and observed:", section.sectionName);
           }
         }
         /**
@@ -449,7 +1142,6 @@ var Grain = (() => {
          * Handle section entry (became visible)
          */
         handleSectionEntry(state) {
-          this.log("Section entered view:", state.config.sectionName);
           state.entryTime = Date.now();
           state.entryScrollSpeed = this.scrollVelocity;
           state.lastScrollPosition = window.scrollY;
@@ -470,6 +1162,21 @@ var Grain = (() => {
             const now = Date.now();
             const duration = now - state.entryTime;
             if (duration >= this.options.minDwellTime) {
+              const currentScrollY = window.scrollY;
+              const attentionCheck = this.attentionQuality.shouldTrackSection(
+                state.config.sectionName,
+                currentScrollY
+              );
+              if (attentionCheck.resetAttention) {
+                this.log(`Section "${state.config.sectionName}": Attention reset, restarting timer`);
+                state.entryTime = now;
+                state.entryScrollSpeed = this.scrollVelocity;
+                return;
+              }
+              if (!attentionCheck.shouldTrack) {
+                this.log(`Section "${state.config.sectionName}": Tracking paused - ${attentionCheck.reason}`);
+                return;
+              }
               const viewData = {
                 sectionName: state.config.sectionName,
                 sectionType: state.config.sectionType,
@@ -500,7 +1207,7 @@ var Grain = (() => {
                   is_split: true
                   // Flag to indicate this is a periodic split, not final exit
                 });
-                this.log("Tracked periodic section view split:", state.config.sectionName, "duration:", duration);
+                this.attentionQuality.updateSectionDuration(state.config.sectionName, duration);
                 state.entryTime = now;
                 state.entryScrollSpeed = this.scrollVelocity;
               }
@@ -522,8 +1229,8 @@ var Grain = (() => {
          * Handle section exit (became invisible)
          */
         handleSectionExit(state) {
-          this.log("Section exited view:", state.config.sectionName);
           this.stopPeriodicTracking(state.config.sectionName);
+          this.attentionQuality.resetSection(state.config.sectionName);
           if (state.entryTime === null)
             return;
           state.exitTime = Date.now();
@@ -604,7 +1311,6 @@ var Grain = (() => {
          */
         queueSectionView(viewData) {
           this.pendingEvents.push(viewData);
-          this.log("Queued section view:", viewData.sectionName, "duration:", viewData.duration);
           if (this.batchTimer === null) {
             this.batchTimer = window.setTimeout(() => {
               this.flushPendingEvents();
@@ -621,7 +1327,6 @@ var Grain = (() => {
             this.pendingEvents = [];
             return;
           }
-          this.log("Flushing", this.pendingEvents.length, "section view events");
           for (const viewData of this.pendingEvents) {
             this.tracker.trackSystemEvent("_grain_section_view", {
               section_name: viewData.sectionName,
@@ -722,6 +1427,7 @@ var Grain = (() => {
             this.intersectionObserver.disconnect();
             this.intersectionObserver = null;
           }
+          this.attentionQuality.destroy();
           this.sectionStates.clear();
           this.xpathCache.clear();
           this.pendingEvents = [];
@@ -782,7 +1488,6 @@ var Grain = (() => {
           this.saveConsentState();
         }
       } catch (error) {
-        console.error("[Grain Consent] Failed to load consent state:", error);
       }
     }
     /**
@@ -794,7 +1499,6 @@ var Grain = (() => {
       try {
         localStorage.setItem(this.storageKey, JSON.stringify(this.consentState));
       } catch (error) {
-        console.error("[Grain Consent] Failed to save consent state:", error);
       }
     }
     /**
@@ -895,7 +1599,6 @@ var Grain = (() => {
         try {
           listener(this.consentState);
         } catch (error) {
-          console.error("[Grain Consent] Listener error:", error);
         }
       });
     }
@@ -909,7 +1612,6 @@ var Grain = (() => {
         localStorage.removeItem(this.storageKey);
         this.consentState = null;
       } catch (error) {
-        console.error("[Grain Consent] Failed to clear consent:", error);
       }
     }
   };
@@ -1089,7 +1791,6 @@ var Grain = (() => {
         try {
           listener();
         } catch (error) {
-          console.error("[Activity Detector] Listener error:", error);
         }
       }
     }
@@ -1190,9 +1891,6 @@ var Grain = (() => {
       }
       this.tracker.trackSystemEvent("_grain_heartbeat", properties);
       this.lastHeartbeatTime = now;
-      if (this.config.debug) {
-        console.log("[Heartbeat] Sent heartbeat:", properties);
-      }
     }
     /**
      * Destroy the heartbeat manager
@@ -1205,9 +1903,6 @@ var Grain = (() => {
         this.heartbeatTimer = null;
       }
       this.isDestroyed = true;
-      if (this.config.debug) {
-        console.log("[Heartbeat] Destroyed");
-      }
     }
   };
 
@@ -4408,9 +5103,6 @@ var Grain = (() => {
         properties.viewport = `${window.innerWidth}x${window.innerHeight}`;
       }
       this.tracker.trackSystemEvent("page_view", properties);
-      if (this.config.debug) {
-        console.log("[Page Tracking] Tracked page view:", properties);
-      }
     }
     /**
      * Extract domain from URL
@@ -4533,9 +5225,6 @@ var Grain = (() => {
         }
       }
       this.tracker.trackSystemEvent("page_view", baseProperties);
-      if (this.config.debug) {
-        console.log("[Page Tracking] Manually tracked page:", baseProperties);
-      }
     }
     /**
      * Get page view count for current session
@@ -4562,9 +5251,6 @@ var Grain = (() => {
         window.removeEventListener("hashchange", this.handleHashChange);
       }
       this.isDestroyed = true;
-      if (this.config.debug) {
-        console.log("[Page Tracking] Destroyed");
-      }
     }
   };
 
@@ -4592,6 +5278,7 @@ var Grain = (() => {
       // Auto-tracking properties
       this.interactionTrackingManager = null;
       this.sectionTrackingManager = null;
+      this.heatmapTrackingManager = null;
       // Session tracking
       this.sessionStartTime = Date.now();
       this.sessionEventCount = 0;
@@ -4627,6 +5314,8 @@ var Grain = (() => {
         // 5 minutes
         enableAutoPageView: true,
         stripQueryParams: true,
+        // Heatmap Tracking defaults
+        enableHeatmapTracking: true,
         ...config,
         tenantId: config.tenantId
       };
@@ -4649,6 +5338,9 @@ var Grain = (() => {
       if (typeof window !== "undefined") {
         this.initializeAutomaticTracking();
         this.trackSessionStart();
+        if (this.config.enableHeatmapTracking) {
+          this.initializeHeatmapTracking();
+        }
       }
       this.consentManager.addListener((state) => {
         if (state.granted) {
@@ -4872,6 +5564,8 @@ var Grain = (() => {
      * Log formatted error gracefully
      */
     logError(formattedError) {
+      if (!this.config.debug)
+        return;
       const { code, message, digest, timestamp, context } = formattedError;
       const errorOutput = {
         "\u{1F6A8} Grain Analytics Error": {
@@ -4889,9 +5583,7 @@ var Grain = (() => {
         }
       };
       console.error("\u{1F6A8} Grain Analytics Error:", errorOutput);
-      if (this.config.debug) {
-        console.error(`[Grain Analytics] ${code}: ${message} (${context}) - Events: ${digest.eventCount}, Props: ${digest.totalProperties}, Size: ${digest.totalSize}B`);
-      }
+      console.error(`[Grain Analytics] ${code}: ${message} (${context}) - Events: ${digest.eventCount}, Props: ${digest.totalProperties}, Size: ${digest.totalSize}B`);
     }
     /**
      * Safely execute a function with error handling
@@ -4990,7 +5682,6 @@ var Grain = (() => {
         try {
           const headers = await this.getAuthHeaders();
           const url = `${this.config.apiUrl}/v1/events/${encodeURIComponent(this.config.tenantId)}/multi`;
-          this.log(`Sending ${events.length} events to ${url} (attempt ${attempt + 1})`);
           const response = await fetch(url, {
             method: "POST",
             headers,
@@ -5055,7 +5746,6 @@ var Grain = (() => {
           body,
           keepalive: true
         });
-        this.log(`Successfully sent ${events.length} events via fetch (keepalive)`);
       } catch (error) {
         const formattedError = this.formatError(error, "sendEventsWithBeacon", events);
         this.logError(formattedError);
@@ -5121,7 +5811,6 @@ var Grain = (() => {
               debug: this.config.debug
             }
           );
-          this.log("Heartbeat tracking initialized");
         } catch (error) {
           this.log("Failed to initialize heartbeat tracking:", error);
         }
@@ -5136,19 +5825,48 @@ var Grain = (() => {
               tenantId: this.config.tenantId
             }
           );
-          this.log("Auto page view tracking initialized");
         } catch (error) {
           this.log("Failed to initialize page view tracking:", error);
         }
       }
       this.initializeAutoTracking();
     }
+    /**
+     * Initialize heatmap tracking
+     */
+    initializeHeatmapTracking() {
+      if (typeof window === "undefined")
+        return;
+      try {
+        this.log("Initializing heatmap tracking");
+        Promise.resolve().then(() => (init_heatmap_tracking(), heatmap_tracking_exports)).then(({ HeatmapTrackingManager: HeatmapTrackingManager2 }) => {
+          try {
+            this.heatmapTrackingManager = new HeatmapTrackingManager2(
+              this,
+              {
+                scrollDebounceDelay: 100,
+                batchDelay: 2e3,
+                maxBatchSize: 20,
+                debug: this.config.debug
+              }
+            );
+            this.log("Heatmap tracking initialized");
+          } catch (error) {
+            this.log("Failed to initialize heatmap tracking:", error);
+          }
+        }).catch((error) => {
+          this.log("Failed to load heatmap tracking module:", error);
+        });
+      } catch (error) {
+        this.log("Failed to initialize heatmap tracking:", error);
+      }
+    }
     /**
      * Initialize auto-tracking (interactions and sections)
      */
     async initializeAutoTracking() {
       try {
-        this.log("Initializing auto-tracking...");
+        this.log("Initializing auto-tracking");
         const userId = this.globalUserId || this.persistentAnonymousUserId || this.generateUUID();
         const currentUrl = typeof window !== "undefined" ? window.location.href : "";
         const request = {
@@ -5160,23 +5878,19 @@ var Grain = (() => {
         };
         const headers = await this.getAuthHeaders();
         const url = `${this.config.apiUrl}/v1/client/${encodeURIComponent(this.config.tenantId)}/config/configurations`;
-        this.log("Fetching auto-tracking config from:", url);
         const response = await fetch(url, {
           method: "POST",
           headers,
           body: JSON.stringify(request)
         });
         if (!response.ok) {
-          this.log("Failed to fetch auto-tracking config:", response.status, response.statusText);
+          this.log("Failed to fetch auto-tracking config:", response.status);
           return;
         }
         const configResponse = await response.json();
-        this.log("Received config response:", configResponse);
         if (configResponse.autoTrackingConfig) {
-          this.log("Auto-tracking config found:", configResponse.autoTrackingConfig);
+          this.log("Auto-tracking config loaded");
           this.setupAutoTrackingManagers(configResponse.autoTrackingConfig);
-        } else {
-          this.log("No auto-tracking config in response");
         }
       } catch (error) {
         this.log("Failed to initialize auto-tracking:", error);
@@ -5186,9 +5900,9 @@ var Grain = (() => {
      * Setup auto-tracking managers
      */
     setupAutoTrackingManagers(config) {
-      this.log("Setting up auto-tracking managers...", config);
+      this.log("Setting up auto-tracking managers");
       if (config.interactions && config.interactions.length > 0) {
-        this.log("Loading interaction tracking module for", config.interactions.length, "interactions");
+        this.log("Loading interaction tracking:", config.interactions.length, "interactions");
         Promise.resolve().then(() => (init_interaction_tracking(), interaction_tracking_exports)).then(({ InteractionTrackingManager: InteractionTrackingManager2 }) => {
           try {
             this.interactionTrackingManager = new InteractionTrackingManager2(
@@ -5200,18 +5914,16 @@ var Grain = (() => {
                 mutationDebounceDelay: 500
               }
             );
-            this.log("\u2705 Interaction tracking initialized successfully with", config.interactions.length, "interactions");
+            this.log("Interaction tracking initialized");
           } catch (error) {
-            this.log("\u274C Failed to initialize interaction tracking:", error);
+            this.log("Failed to initialize interaction tracking:", error);
           }
         }).catch((error) => {
-          this.log("\u274C Failed to load interaction tracking module:", error);
+          this.log("Failed to load interaction tracking module:", error);
         });
-      } else {
-        this.log("No interactions configured for auto-tracking");
       }
       if (config.sections && config.sections.length > 0) {
-        this.log("Loading section tracking module for", config.sections.length, "sections");
+        this.log("Loading section tracking:", config.sections.length, "sections");
         Promise.resolve().then(() => (init_section_tracking(), section_tracking_exports)).then(({ SectionTrackingManager: SectionTrackingManager2 }) => {
           try {
             this.sectionTrackingManager = new SectionTrackingManager2(
@@ -5226,15 +5938,13 @@ var Grain = (() => {
                 debug: this.config.debug
               }
             );
-            this.log("\u2705 Section tracking initialized successfully with", config.sections.length, "sections");
+            this.log("Section tracking initialized");
           } catch (error) {
-            this.log("\u274C Failed to initialize section tracking:", error);
+            this.log("Failed to initialize section tracking:", error);
           }
         }).catch((error) => {
-          this.log("\u274C Failed to load section tracking module:", error);
+          this.log("Failed to load section tracking module:", error);
         });
-      } else {
-        this.log("No sections configured for auto-tracking");
       }
     }
     /**
@@ -5290,7 +6000,7 @@ var Grain = (() => {
         properties.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
       }
       this.trackSystemEvent("_grain_session_start", properties);
-      this.log("Session started:", properties);
+      this.log("Session started");
     }
     /**
      * Track session end event
@@ -5315,7 +6025,7 @@ var Grain = (() => {
         properties.page_count = pageCount;
       }
       this.trackSystemEvent("_grain_session_end", properties);
-      this.log("Session ended:", properties);
+      this.log("Session ended");
     }
     /**
      * Detect browser name
@@ -5412,7 +6122,7 @@ var Grain = (() => {
       };
       this.eventQueue.push(event);
       this.eventCountSinceLastHeartbeat++;
-      this.log(`Queued system event: ${eventName}`, properties);
+      this.log(`Queued system event: ${eventName}`);
       if (this.eventQueue.length >= this.config.batchSize) {
         this.flush().catch((error) => {
           const formattedError = this.formatError(error, "flush system event");
@@ -5447,6 +6157,15 @@ var Grain = (() => {
     resetEventCountSinceLastHeartbeat() {
       this.eventCountSinceLastHeartbeat = 0;
     }
+    /**
+     * Get the activity detector (for internal use by tracking managers)
+     */
+    getActivityDetector() {
+      if (!this.activityDetector) {
+        throw new Error("Activity detector not initialized");
+      }
+      return this.activityDetector;
+    }
     /**
      * Get the effective user ID (public method)
      */
@@ -5502,7 +6221,7 @@ var Grain = (() => {
         this.eventQueue.push(formattedEvent);
         this.eventCountSinceLastHeartbeat++;
         this.sessionEventCount++;
-        this.log(`Queued event: ${event.eventName}`, event.properties);
+        this.log(`Queued event: ${event.eventName}`);
         if (opts.flush || this.eventQueue.length >= this.config.batchSize) {
           await this.flush();
         }
@@ -5701,7 +6420,6 @@ var Grain = (() => {
         try {
           const headers = await this.getAuthHeaders();
           const url = `${this.config.apiUrl}/v1/events/${encodeURIComponent(this.config.tenantId)}/properties`;
-          this.log(`Setting properties for user ${payload.userId} (attempt ${attempt + 1})`);
           const response = await fetch(url, {
             method: "POST",
             headers,
@@ -5927,7 +6645,6 @@ var Grain = (() => {
           try {
             const headers = await this.getAuthHeaders();
             const url = `${this.config.apiUrl}/v1/client/${encodeURIComponent(this.config.tenantId)}/config/configurations`;
-            this.log(`Fetching configurations for user ${userId} (attempt ${attempt + 1})`);
             const response = await fetch(url, {
               method: "POST",
               headers,
@@ -5954,7 +6671,7 @@ var Grain = (() => {
             if (configResponse.configurations) {
               this.updateConfigCache(configResponse, userId);
             }
-            this.log(`Successfully fetched configurations for user ${userId}:`, configResponse);
+            this.log("Successfully fetched configurations");
             return configResponse;
           } catch (error) {
             lastError = error;
@@ -6203,6 +6920,10 @@ var Grain = (() => {
         this.sectionTrackingManager.destroy();
         this.sectionTrackingManager = null;
       }
+      if (this.heatmapTrackingManager) {
+        this.heatmapTrackingManager.destroy();
+        this.heatmapTrackingManager = null;
+      }
       if (this.eventQueue.length > 0) {
         const eventsToSend = [...this.eventQueue];
         this.eventQueue = [];