@sessionvision/core 0.2.0 → 0.3.0

package/dist/sessionvision.js

@@ -1,5 +1,5 @@
 /*!
- * Session Vision Core v0.2.0
+ * Session Vision Core v0.3.0
  * (c) 2026 Session Vision
  * Released under the MIT License
  */
@@ -35,8 +35,11 @@
         maskAllInputs: true,
         autocapture: {
             pageview: true,
-            clicks: true,
+            click: true,
             formSubmit: true,
+            rageClick: true,
+            deadClick: true,
+            formAbandonment: true,
         },
     };
     /**
@@ -356,8 +359,11 @@
                 // Boolean: enable or disable all
                 autocapture = {
                     pageview: userConfig.autocapture,
-                    clicks: userConfig.autocapture,
+                    click: userConfig.autocapture,
                     formSubmit: userConfig.autocapture,
+                    rageClick: userConfig.autocapture,
+                    deadClick: userConfig.autocapture,
+                    formAbandonment: userConfig.autocapture,
                 };
             }
             else if (typeof userConfig.autocapture === 'object') {
@@ -365,8 +371,11 @@
                 const userAutocapture = userConfig.autocapture;
                 autocapture = {
                     pageview: userAutocapture.pageview ?? DEFAULT_CONFIG.autocapture.pageview,
-                    clicks: userAutocapture.clicks ?? DEFAULT_CONFIG.autocapture.clicks,
+                    click: userAutocapture.click ?? DEFAULT_CONFIG.autocapture.click,
                     formSubmit: userAutocapture.formSubmit ?? DEFAULT_CONFIG.autocapture.formSubmit,
+                    rageClick: userAutocapture.rageClick ?? DEFAULT_CONFIG.autocapture.rageClick,
+                    deadClick: userAutocapture.deadClick ?? DEFAULT_CONFIG.autocapture.deadClick,
+                    formAbandonment: userAutocapture.formAbandonment ?? DEFAULT_CONFIG.autocapture.formAbandonment,
                 };
             }
         }
@@ -838,7 +847,7 @@
             $timezone: getTimezone(),
             $locale: getLocale(),
             $connection_type: getConnectionType(),
-            $lib_version: "0.2.0"
+            $lib_version: "0.3.0"
                 ,
         };
     }
@@ -941,6 +950,246 @@
         captureEvent(eventName, properties, { includeAutoProperties: true });
     }
 
+    /**
+     * Payload compression module
+     * Uses CompressionStream API when available
+     */
+    /**
+     * Check if compression is supported
+     */
+    function isCompressionSupported() {
+        return (typeof CompressionStream !== 'undefined' &&
+            typeof ReadableStream !== 'undefined');
+    }
+    /**
+     * Compress a string using gzip
+     * Returns the compressed data as a Blob, or null if compression is not supported
+     */
+    async function compressPayload(data) {
+        if (!isCompressionSupported()) {
+            return null;
+        }
+        try {
+            const encoder = new TextEncoder();
+            const inputBytes = encoder.encode(data);
+            const stream = new ReadableStream({
+                start(controller) {
+                    controller.enqueue(inputBytes);
+                    controller.close();
+                },
+            });
+            const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
+            const reader = compressedStream.getReader();
+            const chunks = [];
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                chunks.push(value);
+            }
+            // Combine chunks into a single Blob
+            return new Blob(chunks, { type: 'application/gzip' });
+        }
+        catch {
+            // Compression failed, return null to use uncompressed
+            return null;
+        }
+    }
+    /**
+     * Get the size of data in bytes
+     */
+    function getByteSize(data) {
+        return new Blob([data]).size;
+    }
+    /**
+     * Check if payload should be compressed (based on size threshold)
+     * Only compress if payload is larger than 1KB
+     */
+    function shouldCompress(data) {
+        return isCompressionSupported() && getByteSize(data) > 1024;
+    }
+
+    /**
+     * HTTP transport module
+     * Handles sending events to the ingest API
+     */
+    let config$2 = null;
+    let consecutiveFailures = 0;
+    /**
+     * Set the configuration
+     */
+    function setTransportConfig(cfg) {
+        config$2 = cfg;
+    }
+    /**
+     * Sleep for a given number of milliseconds
+     */
+    function sleep(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    /**
+     * Send events to the ingest API
+     * Handles compression and retry logic
+     */
+    async function sendEvents(payload) {
+        if (!config$2) {
+            console.warn('[SessionVision] SDK not initialized');
+            return false;
+        }
+        const url = `${config$2.ingestHost}/api/v1/ingest/events`;
+        const jsonPayload = JSON.stringify(payload);
+        // Try to compress if payload is large enough
+        const useCompression = shouldCompress(jsonPayload);
+        let body = jsonPayload;
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        if (useCompression) {
+            const compressed = await compressPayload(jsonPayload);
+            if (compressed) {
+                body = compressed;
+                headers['Content-Type'] = 'application/json';
+                headers['Content-Encoding'] = 'gzip';
+            }
+        }
+        // Attempt to send with retries
+        for (let attempt = 0; attempt <= BUFFER_CONFIG.MAX_RETRIES; attempt++) {
+            try {
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers,
+                    body,
+                    keepalive: true, // Keep connection alive for background sends
+                });
+                if (response.ok || response.status === 202) {
+                    // Success
+                    consecutiveFailures = 0;
+                    if (config$2.debug) {
+                        console.log(`[SessionVision] Events sent successfully (${payload.events.length} events)`);
+                    }
+                    return true;
+                }
+                // Server error, might be worth retrying
+                if (response.status >= 500) {
+                    throw new Error(`Server error: ${response.status}`);
+                }
+                // Client error (4xx), don't retry
+                if (config$2.debug) {
+                    console.warn(`[SessionVision] Failed to send events: ${response.status}`);
+                }
+                return false;
+            }
+            catch (error) {
+                // Network error or server error, retry if attempts remaining
+                if (attempt < BUFFER_CONFIG.MAX_RETRIES) {
+                    const delay = BUFFER_CONFIG.RETRY_DELAYS_MS[attempt] || 4000;
+                    if (config$2.debug) {
+                        console.log(`[SessionVision] Retry ${attempt + 1}/${BUFFER_CONFIG.MAX_RETRIES} in ${delay}ms`);
+                    }
+                    await sleep(delay);
+                }
+                else {
+                    // All retries exhausted
+                    consecutiveFailures++;
+                    if (config$2.debug) {
+                        console.warn('[SessionVision] Failed to send events after retries:', error);
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Check if we should stop retrying (3+ consecutive failures)
+     */
+    function shouldStopRetrying() {
+        return consecutiveFailures >= 3;
+    }
+
+    /**
+     * Event buffer module
+     * Buffers events and flushes them periodically or when buffer is full
+     */
+    let eventBuffer = [];
+    let flushTimer = null;
+    let config$1 = null;
+    let isFlushing = false;
+    /**
+     * Set the configuration
+     */
+    function setBufferConfig(cfg) {
+        config$1 = cfg;
+    }
+    /**
+     * Add an event to the buffer
+     */
+    function addToBuffer(event) {
+        // If we've had too many failures, drop events
+        if (shouldStopRetrying()) {
+            if (config$1?.debug) {
+                console.warn('[SessionVision] Too many failures, dropping event');
+            }
+            return;
+        }
+        eventBuffer.push(event);
+        // Flush if buffer is full
+        if (eventBuffer.length >= BUFFER_CONFIG.MAX_EVENTS) {
+            flush();
+        }
+    }
+    /**
+     * Flush the event buffer
+     * Sends all buffered events to the server
+     */
+    async function flush() {
+        if (isFlushing || eventBuffer.length === 0 || !config$1) {
+            return;
+        }
+        isFlushing = true;
+        // Take events from buffer (FIFO eviction on failure)
+        const eventsToSend = [...eventBuffer];
+        eventBuffer = [];
+        const payload = {
+            projectToken: config$1.projectToken,
+            events: eventsToSend,
+        };
+        const success = await sendEvents(payload);
+        if (!success) {
+            // Re-add events to buffer if we haven't exceeded max retries
+            if (!shouldStopRetrying()) {
+                // Only keep most recent events up to max buffer size
+                const combined = [...eventsToSend, ...eventBuffer];
+                eventBuffer = combined.slice(-10);
+                if (config$1.debug && combined.length > BUFFER_CONFIG.MAX_EVENTS) {
+                    console.warn(`[SessionVision] Buffer overflow, dropped ${combined.length - BUFFER_CONFIG.MAX_EVENTS} oldest events`);
+                }
+            }
+        }
+        isFlushing = false;
+    }
+    /**
+     * Start the flush timer
+     */
+    function startFlushTimer() {
+        if (flushTimer) {
+            return;
+        }
+        flushTimer = setInterval(() => {
+            flush();
+        }, BUFFER_CONFIG.FLUSH_INTERVAL_MS);
+    }
+    /**
+     * Initialize visibility change handler for flushing on tab hide
+     */
+    function initVisibilityHandler() {
+        document.addEventListener('visibilitychange', () => {
+            if (document.visibilityState === 'hidden') {
+                // Best-effort flush when tab is hidden
+                flush();
+            }
+        });
+    }
+
     /**
      * Pageview tracking module
      * Handles initial page load and SPA navigation
@@ -964,6 +1213,9 @@
             ...customProperties,
         };
         captureEvent('$pageview', properties);
+        // Flush immediately to ensure pageview is sent quickly
+        // This captures users who bounce before the 5-second interval
+        flush();
     }
     /**
      * Handle history state changes for SPA navigation
@@ -1212,21 +1464,509 @@
             pii.pattern.lastIndex = 0;
             masked = masked.replace(pii.pattern, pii.mask);
         }
-        return masked;
+        return masked;
+    }
+
+    /**
+     * Rage Click Detection
+     *
+     * Detects rapid repeated clicks indicating user frustration.
+     * Emits a single $rage_click event after the click sequence ends.
+     */
+    /** Elements that legitimately receive rapid clicks */
+    const RAGE_CLICK_EXCLUDED_SELECTORS = [
+        'input[type="number"]',
+        'input[type="range"]',
+        '[role="spinbutton"]',
+        '[role="slider"]',
+        '[class*="quantity"]',
+        '[class*="stepper"]',
+        '[class*="increment"]',
+        '[class*="decrement"]',
+        '[class*="plus"]',
+        '[class*="minus"]',
+        'video',
+        'audio',
+        '[class*="player"]',
+        '[class*="volume"]',
+        '[class*="seek"]',
+        'canvas',
+    ];
+    function shouldExcludeFromRageClick(element) {
+        if (element.closest('[data-sessionvision-no-rageclick]')) {
+            return true;
+        }
+        for (const selector of RAGE_CLICK_EXCLUDED_SELECTORS) {
+            if (element.matches(selector) || element.closest(selector)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    class RageClickDetector {
+        constructor(_config) {
+            this.clicks = [];
+            this.emitTimeout = null;
+            this.threshold = RageClickDetector.DEFAULT_THRESHOLD;
+            this.windowMs = RageClickDetector.DEFAULT_WINDOW_MS;
+            this.radiusPx = RageClickDetector.DEFAULT_RADIUS_PX;
+        }
+        recordClick(event, element, properties) {
+            const now = Date.now();
+            this.clicks.push({
+                timestamp: now,
+                x: event.clientX,
+                y: event.clientY,
+                elementSelector: properties.$element_selector || '',
+                element,
+                properties,
+            });
+            // Remove expired clicks outside the window
+            this.clicks = this.clicks.filter((c) => now - c.timestamp <= this.windowMs);
+            // Reset the emit timeout - we'll check after the sequence ends
+            this.scheduleEmit();
+        }
+        scheduleEmit() {
+            if (this.emitTimeout) {
+                clearTimeout(this.emitTimeout);
+            }
+            this.emitTimeout = setTimeout(() => {
+                this.maybeEmitRageClick();
+            }, this.windowMs);
+        }
+        maybeEmitRageClick() {
+            if (this.clicks.length < this.threshold) {
+                this.clicks = [];
+                return;
+            }
+            const sameElement = this.clicks.every((c) => c.elementSelector === this.clicks[0].elementSelector);
+            const sameArea = this.isClickCluster(this.clicks);
+            if (sameElement || sameArea) {
+                this.emitRageClick();
+            }
+            this.clicks = [];
+        }
+        isClickCluster(clicks) {
+            for (let i = 0; i < clicks.length; i++) {
+                for (let j = i + 1; j < clicks.length; j++) {
+                    const dx = clicks[i].x - clicks[j].x;
+                    const dy = clicks[i].y - clicks[j].y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance > this.radiusPx) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        emitRageClick() {
+            const lastClick = this.clicks[this.clicks.length - 1];
+            const firstClick = this.clicks[0];
+            const duration = lastClick.timestamp - firstClick.timestamp;
+            let elementX = 0;
+            let elementY = 0;
+            try {
+                const rect = lastClick.element.getBoundingClientRect();
+                elementX = lastClick.x - rect.left;
+                elementY = lastClick.y - rect.top;
+            }
+            catch {
+                // Element may have been removed from DOM
+            }
+            const rageClickProperties = {
+                ...lastClick.properties,
+                $click_count: this.clicks.length,
+                $rage_click_duration_ms: duration,
+                $click_x: lastClick.x,
+                $click_y: lastClick.y,
+                $element_x: elementX,
+                $element_y: elementY,
+                $click_positions: this.clicks.map((c) => ({
+                    x: c.x,
+                    y: c.y,
+                    timestamp: c.timestamp,
+                })),
+            };
+            captureEvent('$rage_click', rageClickProperties);
+        }
+        destroy() {
+            if (this.emitTimeout) {
+                clearTimeout(this.emitTimeout);
+                this.emitTimeout = null;
+            }
+            this.clicks = [];
+        }
+    }
+    RageClickDetector.DEFAULT_THRESHOLD = 3;
+    RageClickDetector.DEFAULT_WINDOW_MS = 1000;
+    RageClickDetector.DEFAULT_RADIUS_PX = 30;
+
+    /**
+     * Dead Click Detection
+     *
+     * Detects clicks that produce no visible DOM changes.
+     * Emits $dead_click events when no response is detected.
+     */
+    /** Elements that may not cause visible DOM changes when clicked */
+    const DEAD_CLICK_EXCLUDED_SELECTORS = [
+        'input[type="text"]',
+        'input[type="password"]',
+        'input[type="email"]',
+        'input[type="search"]',
+        'input[type="tel"]',
+        'input[type="url"]',
+        'textarea',
+        'select',
+        'video',
+        'audio',
+    ];
+    function shouldExcludeFromDeadClick(element) {
+        if (element.closest('[data-sessionvision-no-deadclick]')) {
+            return true;
+        }
+        for (const selector of DEAD_CLICK_EXCLUDED_SELECTORS) {
+            if (element.matches(selector) || element.closest(selector)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    class DeadClickDetector {
+        constructor(_config) {
+            this.pendingClick = null;
+            this.timeoutMs = DeadClickDetector.DEFAULT_TIMEOUT_MS;
+        }
+        monitorClick(event, element, properties) {
+            // Cancel any pending detection
+            this.cancelPending();
+            const timestamp = Date.now();
+            let mutationDetected = false;
+            const observer = new MutationObserver((mutations) => {
+                const meaningful = mutations.some((m) => this.isMeaningfulMutation(m, element));
+                if (meaningful) {
+                    mutationDetected = true;
+                    this.cancelPending();
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                attributes: true,
+                characterData: true,
+                subtree: true,
+            });
+            const timeout = setTimeout(() => {
+                if (!mutationDetected && this.pendingClick) {
+                    this.emitDeadClick(this.pendingClick);
+                }
+                this.cancelPending();
+            }, this.timeoutMs);
+            this.pendingClick = {
+                x: event.clientX,
+                y: event.clientY,
+                element,
+                properties,
+                timestamp,
+                observer,
+                timeout,
+            };
+        }
+        cancelPending() {
+            if (this.pendingClick) {
+                this.pendingClick.observer.disconnect();
+                clearTimeout(this.pendingClick.timeout);
+                this.pendingClick = null;
+            }
+        }
+        isMeaningfulMutation(mutation, clickedElement) {
+            // Ignore class changes on clicked element (often just :active styles)
+            if (mutation.type === 'attributes' &&
+                mutation.attributeName === 'class' &&
+                mutation.target === clickedElement) {
+                return false;
+            }
+            // Ignore data-* attribute changes (often analytics)
+            if (mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-')) {
+                return false;
+            }
+            // Ignore script/style/link/meta injections
+            if (mutation.type === 'childList') {
+                const ignoredNodes = ['SCRIPT', 'STYLE', 'LINK', 'META'];
+                const addedNonIgnored = Array.from(mutation.addedNodes).some((node) => !ignoredNodes.includes(node.nodeName));
+                if (!addedNonIgnored && mutation.removedNodes.length === 0) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        emitDeadClick(pending) {
+            let elementX = 0;
+            let elementY = 0;
+            try {
+                const rect = pending.element.getBoundingClientRect();
+                elementX = pending.x - rect.left;
+                elementY = pending.y - rect.top;
+            }
+            catch {
+                // Element may have been removed from DOM
+            }
+            const deadClickProperties = {
+                ...pending.properties,
+                $click_x: pending.x,
+                $click_y: pending.y,
+                $element_x: elementX,
+                $element_y: elementY,
+                $wait_duration_ms: Date.now() - pending.timestamp,
+                $element_is_interactive: isInteractiveElement(pending.element),
+            };
+            captureEvent('$dead_click', deadClickProperties);
+        }
+        destroy() {
+            this.cancelPending();
+        }
+    }
+    DeadClickDetector.DEFAULT_TIMEOUT_MS = 1000;
+
+    /**
+     * Form Field Tracking
+     *
+     * Tracks form field interactions for abandonment analysis.
+     * Emits $form_start when user begins filling a form,
+     * $form_field_change when fields are modified.
+     */
+    /**
+     * Form field tracker instance
+     */
+    let isActive = false;
+    const startedForms = new Map();
+    /**
+     * Get form fields (inputs, textareas, selects)
+     */
+    function getFormFields(form) {
+        const fields = form.querySelectorAll('input, textarea, select');
+        return Array.from(fields);
+    }
+    /**
+     * Get the index of a field within its form
+     */
+    function getFieldIndex(field, form) {
+        const fields = getFormFields(form);
+        return fields.indexOf(field);
+    }
+    /**
+     * Get the type of a form field
+     */
+    function getFieldType(field) {
+        if (field instanceof HTMLInputElement) {
+            return field.type || 'text';
+        }
+        if (field instanceof HTMLTextAreaElement) {
+            return 'textarea';
+        }
+        if (field instanceof HTMLSelectElement) {
+            return 'select';
+        }
+        return 'unknown';
+    }
+    /**
+     * Check if a field has a value
+     */
+    function fieldHasValue(field) {
+        if (field instanceof HTMLInputElement) {
+            if (field.type === 'checkbox' || field.type === 'radio') {
+                return field.checked;
+            }
+            return field.value.length > 0;
+        }
+        if (field instanceof HTMLTextAreaElement) {
+            return field.value.length > 0;
+        }
+        if (field instanceof HTMLSelectElement) {
+            return field.selectedIndex > 0 || (field.selectedIndex === 0 && field.value !== '');
+        }
+        return false;
+    }
+    /**
+     * Check if a field is a form field
+     */
+    function isFormField(element) {
+        return (element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement);
+    }
+    /**
+     * Get the parent form of an element
+     */
+    function getParentForm(element) {
+        return element.closest('form');
+    }
+    /**
+     * Handle focus events on form fields
+     */
+    function handleFocusIn(event) {
+        const target = event.target;
+        if (!target || !isFormField(target)) {
+            return;
+        }
+        if (shouldIgnoreElement(target)) {
+            return;
+        }
+        const form = getParentForm(target);
+        if (!form || shouldIgnoreElement(form)) {
+            return;
+        }
+        const formSelector = generateSelector(form);
+        // Check if this form has already been started
+        if (startedForms.has(formSelector)) {
+            return;
+        }
+        // Emit $form_start
+        const fields = getFormFields(form);
+        const properties = {
+            $form_id: form.id || null,
+            $form_name: form.name || null,
+            $form_selector: formSelector,
+            $form_field_count: fields.length,
+        };
+        captureEvent('$form_start', properties);
+        // Track form state
+        startedForms.set(formSelector, {
+            startTime: Date.now(),
+            fieldCount: fields.length,
+            interactedFields: new Set(),
+            filledFields: new Set(),
+        });
+    }
+    /**
+     * Handle change events on form fields
+     */
+    function handleChange(event) {
+        const target = event.target;
+        if (!target || !isFormField(target)) {
+            return;
+        }
+        if (shouldIgnoreElement(target)) {
+            return;
+        }
+        const form = getParentForm(target);
+        if (!form || shouldIgnoreElement(form)) {
+            return;
+        }
+        const formSelector = generateSelector(form);
+        const fieldSelector = generateSelector(target);
+        const formState = startedForms.get(formSelector);
+        // Track interaction even if form wasn't started (edge case)
+        if (!formState) {
+            // Start the form now
+            const fields = getFormFields(form);
+            const startProps = {
+                $form_id: form.id || null,
+                $form_name: form.name || null,
+                $form_selector: formSelector,
+                $form_field_count: fields.length,
+            };
+            captureEvent('$form_start', startProps);
+            startedForms.set(formSelector, {
+                startTime: Date.now(),
+                fieldCount: fields.length,
+                interactedFields: new Set([fieldSelector]),
+                filledFields: new Set(fieldHasValue(target) ? [fieldSelector] : []),
+            });
+        }
+        else {
+            // Update tracking
+            formState.interactedFields.add(fieldSelector);
+            if (fieldHasValue(target)) {
+                formState.filledFields.add(fieldSelector);
+            }
+            else {
+                formState.filledFields.delete(fieldSelector);
+            }
+        }
+        // Emit $form_field_change
+        const properties = {
+            $form_selector: formSelector,
+            $field_selector: fieldSelector,
+            $field_name: target.name || null,
+            $field_type: getFieldType(target),
+            $field_index: getFieldIndex(target, form),
+            $has_value: fieldHasValue(target),
+        };
+        captureEvent('$form_field_change', properties);
+    }
+    /**
+     * Reset tracking for a specific form (called after submit)
+     */
+    function resetForm(formSelector) {
+        startedForms.delete(formSelector);
+    }
+    /**
+     * Get form tracking data for enhanced submit event
+     */
+    function getFormTrackingData(form) {
+        const formSelector = generateSelector(form);
+        const fields = getFormFields(form);
+        const formState = startedForms.get(formSelector);
+        if (!formState) {
+            // Form submitted without tracking (e.g., direct submit without field focus)
+            const filledFields = [];
+            for (const field of fields) {
+                if (fieldHasValue(field) && !shouldIgnoreElement(field)) {
+                    filledFields.push(generateSelector(field));
+                }
+            }
+            return {
+                formSelector,
+                formFieldCount: fields.length,
+                formFieldsFilled: filledFields,
+                formFieldsInteracted: [],
+                formCompletionRate: fields.length > 0 ? filledFields.length / fields.length : 0,
+                formTimeToSubmitMs: null,
+            };
+        }
+        // Update filled fields snapshot at submit time
+        const currentFilledFields = [];
+        for (const field of fields) {
+            if (fieldHasValue(field) && !shouldIgnoreElement(field)) {
+                currentFilledFields.push(generateSelector(field));
+            }
+        }
+        const completionRate = fields.length > 0 ? currentFilledFields.length / fields.length : 0;
+        return {
+            formSelector,
+            formFieldCount: formState.fieldCount,
+            formFieldsFilled: currentFilledFields,
+            formFieldsInteracted: Array.from(formState.interactedFields),
+            formCompletionRate: Math.round(completionRate * 100) / 100,
+            formTimeToSubmitMs: Date.now() - formState.startTime,
+        };
+    }
+    /**
+     * Initialize form field tracking
+     */
+    function initFormFieldTracking(_cfg) {
+        if (isActive) {
+            return;
+        }
+        isActive = true;
+        document.addEventListener('focusin', handleFocusIn, { capture: true });
+        document.addEventListener('change', handleChange, { capture: true });
     }
 
     /**
      * Autocapture module
-     * Handles automatic capture of clicks and form submissions
+     * Handles automatic capture of clicks, form submissions,
+     * rage clicks, and dead clicks
      */
     let isClickTrackingActive = false;
     let isFormTrackingActive = false;
-    let config$2 = null;
+    let config = null;
+    let rageClickDetector = null;
+    let deadClickDetector = null;
     /**
      * Set the configuration
      */
     function setAutocaptureConfig(cfg) {
-        config$2 = cfg;
+        config = cfg;
     }
     /**
      * Handle click events
@@ -1250,6 +1990,13 @@
             $element_href: getElementHref(element),
         };
         captureEvent('$click', properties);
+        // Feed click to frustration detectors
+        if (rageClickDetector && !shouldExcludeFromRageClick(element)) {
+            rageClickDetector.recordClick(event, element, properties);
+        }
+        if (deadClickDetector && !shouldExcludeFromDeadClick(element)) {
+            deadClickDetector.monitorClick(event, element, properties);
+        }
     }
     /**
      * Handle form submission events
@@ -1262,13 +2009,23 @@
         if (shouldIgnoreElement(form)) {
             return;
         }
+        // Get form field tracking data
+        const trackingData = getFormTrackingData(form);
         const properties = {
             $form_id: form.id || null,
             $form_action: form.action || '',
             $form_method: (form.method || 'GET').toUpperCase(),
             $form_name: form.name || null,
+            $form_selector: trackingData.formSelector,
+            $form_field_count: trackingData.formFieldCount,
+            $form_fields_filled: trackingData.formFieldsFilled,
+            $form_fields_interacted: trackingData.formFieldsInteracted,
+            $form_completion_rate: trackingData.formCompletionRate,
+            $form_time_to_submit_ms: trackingData.formTimeToSubmitMs,
         };
         captureEvent('$form_submit', properties);
+        // Reset form tracking state after submit
+        resetForm(trackingData.formSelector);
     }
     /**
      * Initialize click tracking
@@ -1294,253 +2051,24 @@
      * Initialize all autocapture based on configuration
      */
     function initAutocapture(cfg) {
-        config$2 = cfg;
-        if (config$2.autocapture.clicks) {
+        config = cfg;
+        if (config.autocapture.click) {
             initClickTracking();
         }
-        if (config$2.autocapture.formSubmit) {
+        if (config.autocapture.formSubmit) {
             initFormTracking();
         }
-    }
-
-    /**
-     * Payload compression module
-     * Uses CompressionStream API when available
-     */
-    /**
-     * Check if compression is supported
-     */
-    function isCompressionSupported() {
-        return (typeof CompressionStream !== 'undefined' &&
-            typeof ReadableStream !== 'undefined');
-    }
-    /**
-     * Compress a string using gzip
-     * Returns the compressed data as a Blob, or null if compression is not supported
-     */
-    async function compressPayload(data) {
-        if (!isCompressionSupported()) {
-            return null;
-        }
-        try {
-            const encoder = new TextEncoder();
-            const inputBytes = encoder.encode(data);
-            const stream = new ReadableStream({
-                start(controller) {
-                    controller.enqueue(inputBytes);
-                    controller.close();
-                },
-            });
-            const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
-            const reader = compressedStream.getReader();
-            const chunks = [];
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                chunks.push(value);
-            }
-            // Combine chunks into a single Blob
-            return new Blob(chunks, { type: 'application/gzip' });
-        }
-        catch {
-            // Compression failed, return null to use uncompressed
-            return null;
-        }
-    }
-    /**
-     * Get the size of data in bytes
-     */
-    function getByteSize(data) {
-        return new Blob([data]).size;
-    }
-    /**
-     * Check if payload should be compressed (based on size threshold)
-     * Only compress if payload is larger than 1KB
-     */
-    function shouldCompress(data) {
-        return isCompressionSupported() && getByteSize(data) > 1024;
-    }
-
-    /**
-     * HTTP transport module
-     * Handles sending events to the ingest API
-     */
-    let config$1 = null;
-    let consecutiveFailures = 0;
-    /**
-     * Set the configuration
-     */
-    function setTransportConfig(cfg) {
-        config$1 = cfg;
-    }
-    /**
-     * Sleep for a given number of milliseconds
-     */
-    function sleep(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-    /**
-     * Send events to the ingest API
-     * Handles compression and retry logic
-     */
-    async function sendEvents(payload) {
-        if (!config$1) {
-            console.warn('[SessionVision] SDK not initialized');
-            return false;
-        }
-        const url = `${config$1.ingestHost}/api/v1/ingest/events`;
-        const jsonPayload = JSON.stringify(payload);
-        // Try to compress if payload is large enough
-        const useCompression = shouldCompress(jsonPayload);
-        let body = jsonPayload;
-        const headers = {
-            'Content-Type': 'application/json',
-        };
-        if (useCompression) {
-            const compressed = await compressPayload(jsonPayload);
-            if (compressed) {
-                body = compressed;
-                headers['Content-Type'] = 'application/json';
-                headers['Content-Encoding'] = 'gzip';
-            }
-        }
-        // Attempt to send with retries
-        for (let attempt = 0; attempt <= BUFFER_CONFIG.MAX_RETRIES; attempt++) {
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers,
-                    body,
-                    keepalive: true, // Keep connection alive for background sends
-                });
-                if (response.ok || response.status === 202) {
-                    // Success
-                    consecutiveFailures = 0;
-                    if (config$1.debug) {
-                        console.log(`[SessionVision] Events sent successfully (${payload.events.length} events)`);
-                    }
-                    return true;
-                }
-                // Server error, might be worth retrying
-                if (response.status >= 500) {
-                    throw new Error(`Server error: ${response.status}`);
-                }
-                // Client error (4xx), don't retry
-                if (config$1.debug) {
-                    console.warn(`[SessionVision] Failed to send events: ${response.status}`);
-                }
-                return false;
-            }
-            catch (error) {
-                // Network error or server error, retry if attempts remaining
-                if (attempt < BUFFER_CONFIG.MAX_RETRIES) {
-                    const delay = BUFFER_CONFIG.RETRY_DELAYS_MS[attempt] || 4000;
-                    if (config$1.debug) {
-                        console.log(`[SessionVision] Retry ${attempt + 1}/${BUFFER_CONFIG.MAX_RETRIES} in ${delay}ms`);
-                    }
-                    await sleep(delay);
-                }
-                else {
-                    // All retries exhausted
-                    consecutiveFailures++;
-                    if (config$1.debug) {
-                        console.warn('[SessionVision] Failed to send events after retries:', error);
-                    }
-                }
-            }
-        }
-        return false;
-    }
-    /**
-     * Check if we should stop retrying (3+ consecutive failures)
-     */
-    function shouldStopRetrying() {
-        return consecutiveFailures >= 3;
-    }
-
-    /**
-     * Event buffer module
-     * Buffers events and flushes them periodically or when buffer is full
-     */
-    let eventBuffer = [];
-    let flushTimer = null;
-    let config = null;
-    let isFlushing = false;
-    /**
-     * Set the configuration
-     */
-    function setBufferConfig(cfg) {
-        config = cfg;
-    }
-    /**
-     * Add an event to the buffer
-     */
-    function addToBuffer(event) {
-        // If we've had too many failures, drop events
-        if (shouldStopRetrying()) {
-            if (config?.debug) {
-                console.warn('[SessionVision] Too many failures, dropping event');
-            }
-            return;
-        }
-        eventBuffer.push(event);
-        // Flush if buffer is full
-        if (eventBuffer.length >= BUFFER_CONFIG.MAX_EVENTS) {
-            flush();
-        }
-    }
-    /**
-     * Flush the event buffer
-     * Sends all buffered events to the server
-     */
-    async function flush() {
-        if (isFlushing || eventBuffer.length === 0 || !config) {
-            return;
+        // Initialize form field tracking for abandonment analysis
+        if (config.autocapture.formAbandonment) {
+            initFormFieldTracking();
         }
-        isFlushing = true;
-        // Take events from buffer (FIFO eviction on failure)
-        const eventsToSend = [...eventBuffer];
-        eventBuffer = [];
-        const payload = {
-            projectToken: config.projectToken,
-            events: eventsToSend,
-        };
-        const success = await sendEvents(payload);
-        if (!success) {
-            // Re-add events to buffer if we haven't exceeded max retries
-            if (!shouldStopRetrying()) {
-                // Only keep most recent events up to max buffer size
-                const combined = [...eventsToSend, ...eventBuffer];
-                eventBuffer = combined.slice(-10);
-                if (config.debug && combined.length > BUFFER_CONFIG.MAX_EVENTS) {
-                    console.warn(`[SessionVision] Buffer overflow, dropped ${combined.length - BUFFER_CONFIG.MAX_EVENTS} oldest events`);
-                }
-            }
+        // Initialize frustration detectors
+        if (config.autocapture.rageClick) {
+            rageClickDetector = new RageClickDetector(config);
         }
-        isFlushing = false;
-    }
-    /**
-     * Start the flush timer
-     */
-    function startFlushTimer() {
-        if (flushTimer) {
-            return;
+        if (config.autocapture.deadClick) {
+            deadClickDetector = new DeadClickDetector(config);
         }
-        flushTimer = setInterval(() => {
-            flush();
-        }, BUFFER_CONFIG.FLUSH_INTERVAL_MS);
-    }
-    /**
-     * Initialize visibility change handler for flushing on tab hide
-     */
-    function initVisibilityHandler() {
-        document.addEventListener('visibilitychange', () => {
-            if (document.visibilityState === 'hidden') {
-                // Best-effort flush when tab is hidden
-                flush();
-            }
-        });
     }
 
     /**
@@ -1674,6 +2202,12 @@
         }
         registerOnceProperties(properties);
     }
+    /**
+     * Manually flush the event buffer
+     */
+    function flushEvents() {
+        return flush();
+    }
 
     /**
      * Queue replay module
@@ -1745,7 +2279,7 @@
      * Session Vision JavaScript Snippet
      * Main SDK entry point
      *
-     * @version "0.2.0"
+     * @version "0.3.0"
      */
     /**
      * Session Vision SDK instance
@@ -1754,7 +2288,7 @@
         /**
          * SDK version
          */
-        version: "0.2.0" ,
+        version: "0.3.0" ,
         /**
          * Initialize the SDK with a project token and optional configuration
          *
@@ -1869,6 +2403,22 @@
         registerOnce(properties) {
             registerOnce(properties);
         },
+        /**
+         * Manually flush the event buffer
+         * Useful before navigation or when you need to ensure events are sent immediately
+         *
+         * @returns Promise that resolves when the flush is complete
+         *
+         * @example
+         * ```js
+         * // Before navigating away
+         * await sessionvision.flushEvents();
+         * window.location.href = '/new-page';
+         * ```
+         */
+        flushEvents() {
+            return flushEvents();
+        },
     };
     /**
      * Bootstrap the SDK