@checkflow/sdk 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,4576 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useCallback, useMemo, useContext, Component } from 'react';
+
+/**
+ * CheckFlow API Client
+ * Handles all communication with the CheckFlow backend
+ */
+class APIClient {
+    constructor(options) {
+        this.apiUrl = options.apiUrl.replace(/\/$/, '');
+        this.apiKey = options.apiKey;
+        this.projectId = options.projectId;
+        this.timeout = options.timeout || 30000;
+        this.debug = options.debug || false;
+    }
+    getProjectId() {
+        return this.projectId;
+    }
+    getBaseUrl() {
+        return this.apiUrl;
+    }
+    log(...args) {
+        if (this.debug) {
+            console.log('[CheckFlow]', ...args);
+        }
+    }
+    async get(endpoint, headers) {
+        return this.request('GET', endpoint, undefined, headers);
+    }
+    async post(endpoint, data, headers) {
+        return this.request('POST', endpoint, data, headers);
+    }
+    async put(endpoint, data, headers) {
+        return this.request('PUT', endpoint, data, headers);
+    }
+    async request(method, endpoint, data, headers) {
+        const url = `${this.apiUrl}${endpoint}`;
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+        try {
+            this.log(`${method} ${endpoint}`, data);
+            const response = await fetch(url, {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': this.apiKey,
+                    ...headers,
+                },
+                body: data ? JSON.stringify(data) : undefined,
+                signal: controller.signal,
+            });
+            clearTimeout(timeoutId);
+            const responseData = await response.json();
+            if (!response.ok) {
+                this.log('API Error:', response.status, responseData);
+                return {
+                    success: false,
+                    error: responseData.detail || responseData.message || 'Request failed',
+                    statusCode: response.status,
+                };
+            }
+            this.log('API Response:', responseData);
+            return {
+                success: true,
+                data: responseData,
+                statusCode: response.status,
+            };
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            if (error.name === 'AbortError') {
+                return {
+                    success: false,
+                    error: 'Request timeout',
+                    statusCode: 408,
+                };
+            }
+            this.log('API Error:', error);
+            return {
+                success: false,
+                error: error.message || 'Network error',
+                statusCode: 0,
+            };
+        }
+    }
+    /**
+     * Submit feedback to the backend
+     */
+    async submitFeedback(feedback, capture, user, sessionRecording, annotations) {
+        const payload = {
+            title: feedback.title,
+            description: feedback.description || '',
+            type: feedback.type,
+            priority: feedback.priority || 'medium',
+            tags: feedback.tags || [],
+            url: capture?.context?.url || window.location.href,
+            // Context data
+            viewport_width: capture?.context?.viewport?.width,
+            viewport_height: capture?.context?.viewport?.height,
+            user_agent: capture?.context?.userAgent || navigator.userAgent,
+            browser: capture?.context?.browser?.name,
+            browser_version: capture?.context?.browser?.version,
+            os: capture?.context?.os?.name,
+            os_version: capture?.context?.os?.version,
+            locale: capture?.context?.language || navigator.language,
+            timezone: capture?.context?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // Capture data
+            console_logs: capture?.consoleLogs || [],
+            network_logs: capture?.networkLogs || [],
+            performance_metrics: capture?.performance || {},
+            // Screenshot (base64) - included directly in payload
+            screenshot_base64: capture?.screenshot || null,
+            // Session recording events
+            session_recording_events: sessionRecording?.events || null,
+            session_id: sessionRecording?.sessionId || null,
+            // Annotations data
+            annotations: annotations || null,
+            // User data
+            reporter_email: user?.email,
+            reporter_name: user?.name,
+            // Custom metadata
+            custom_fields: {
+                ...feedback.metadata,
+                sdk_version: '__SDK_VERSION__',
+            },
+        };
+        const response = await this.request('POST', '/api/v1/capture/sdk/feedback', payload);
+        if (response.success && response.data) {
+            return {
+                success: true,
+                feedbackId: response.data.id,
+                shortId: response.data.short_id,
+                screenshotUrl: response.data.screenshot_url,
+                videoUrl: response.data.video_url,
+                message: 'Feedback submitted successfully',
+            };
+        }
+        return {
+            success: false,
+            error: response.error || 'Failed to submit feedback',
+        };
+    }
+    /**
+     * Upload screenshot as attachment
+     */
+    async uploadScreenshot(feedbackId, base64Image) {
+        // Convert base64 to blob
+        const byteString = atob(base64Image.split(',')[1] || base64Image);
+        const mimeType = base64Image.match(/data:(.*?);/)?.[1] || 'image/png';
+        const ab = new ArrayBuffer(byteString.length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+        const blob = new Blob([ab], { type: mimeType });
+        const formData = new FormData();
+        formData.append('file', blob, `screenshot-${Date.now()}.png`);
+        try {
+            const response = await fetch(`${this.apiUrl}/api/v1/comments/attachments/upload?feedback_id=${feedbackId}`, {
+                method: 'POST',
+                headers: {
+                    'X-API-Key': this.apiKey,
+                },
+                body: formData,
+            });
+            if (response.ok) {
+                return { success: true, data: await response.json() };
+            }
+            return { success: false, error: 'Failed to upload screenshot' };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
+    }
+    /**
+     * Send SDK capture data to backend for processing
+     * Aligns with backend SDKCapturePayload schema
+     */
+    async sendCapture(capture, sessionId) {
+        // Format payload to match backend SDKCapturePayload schema
+        const payload = {
+            url: capture.context.url,
+            page_title: capture.context.title,
+            referrer: capture.context.referrer,
+            screenshot_base64: capture.screenshot,
+            console_logs: capture.consoleLogs?.map(log => ({
+                level: log.level,
+                message: log.message,
+                timestamp: log.timestamp,
+                source: log.stack?.split('\n')[0],
+            })) || [],
+            network_requests: capture.networkLogs?.map(req => ({
+                url: req.url,
+                method: req.method,
+                status: req.status,
+                status_text: req.statusText,
+                duration_ms: req.duration,
+                size: req.size,
+                resource_type: req.type,
+                timestamp: req.timestamp,
+                is_failed: !!req.error,
+                failure_text: req.error,
+            })) || [],
+            performance_data: capture.performance ? {
+                navigation_start: 0,
+                dom_content_loaded: capture.performance.domContentLoaded,
+                load_event: capture.performance.loadTime,
+                first_contentful_paint: capture.performance.firstContentfulPaint,
+                largest_contentful_paint: capture.performance.largestContentfulPaint,
+                cumulative_layout_shift: capture.performance.cumulativeLayoutShift,
+                first_input_delay: capture.performance.firstInputDelay,
+            } : undefined,
+            javascript_errors: [],
+            viewport: capture.context.viewport,
+            user_agent: capture.context.userAgent,
+            language: capture.context.language,
+            timezone: capture.context.timezone,
+            session_id: sessionId,
+            custom_data: {
+                browser: capture.context.browser,
+                os: capture.context.os,
+                device_type: capture.context.deviceType,
+                screen_resolution: capture.context.screenResolution,
+                pixel_ratio: capture.context.pixelRatio,
+            },
+        };
+        return this.request('POST', '/api/v1/capture/sdk/capture', payload);
+    }
+    /**
+     * Upload just a screenshot (simpler endpoint)
+     */
+    async uploadScreenshotOnly(screenshotBase64, url) {
+        return this.request('POST', '/api/v1/capture/sdk/screenshot', {
+            screenshot_base64: screenshotBase64,
+            url: url,
+        });
+    }
+    /**
+     * Save session recording to backend
+     * Aligns with backend /sdk/recording endpoint
+     */
+    async saveSessionRecording(recording) {
+        return this.request('POST', '/api/v1/capture/sdk/recording', {
+            events: recording.events,
+            session_id: recording.sessionId,
+            start_url: recording.startUrl,
+            end_url: recording.endUrl,
+            duration_seconds: recording.durationSeconds,
+        });
+    }
+    /**
+     * Report an error to the backend
+     */
+    async reportError(error) {
+        return this.request('POST', '/api/v1/capture/sdk/error', {
+            ...error,
+            timestamp: new Date().toISOString(),
+            url: window.location.href,
+            user_agent: navigator.userAgent,
+        });
+    }
+    /**
+     * Check API health
+     */
+    async healthCheck() {
+        const response = await this.request('GET', '/health');
+        return response.success;
+    }
+    /**
+     * Update project ID
+     */
+    setProjectId(projectId) {
+        this.projectId = projectId;
+    }
+}
+
+/**
+ * Context Capture Module
+ * Handles screenshot capture, console logs, network logs, and performance metrics
+ */
+// ==================== Console Capture ====================
+class ConsoleCapture {
+    constructor(maxEntries = 100) {
+        this.entries = [];
+        this.originalMethods = {};
+        this.isCapturing = false;
+        this.maxEntries = maxEntries;
+    }
+    start() {
+        if (this.isCapturing)
+            return;
+        this.isCapturing = true;
+        const levels = [
+            'log', 'info', 'warn', 'error', 'debug'
+        ];
+        levels.forEach((level) => {
+            const originalMethod = console[level];
+            if (typeof originalMethod === 'function') {
+                this.originalMethods[level] = originalMethod.bind(console);
+                console[level] = (...args) => {
+                    this.addEntry(level, args);
+                    if (this.originalMethods[level]) {
+                        this.originalMethods[level](...args);
+                    }
+                };
+            }
+        });
+    }
+    stop() {
+        if (!this.isCapturing)
+            return;
+        this.isCapturing = false;
+        Object.entries(this.originalMethods).forEach(([level, method]) => {
+            console[level] = method;
+        });
+        this.originalMethods = {};
+    }
+    addEntry(level, args) {
+        const message = args
+            .map((arg) => {
+            if (typeof arg === 'object') {
+                try {
+                    return JSON.stringify(arg, null, 2);
+                }
+                catch {
+                    return String(arg);
+                }
+            }
+            return String(arg);
+        })
+            .join(' ');
+        const entry = {
+            level,
+            message: message.substring(0, 5000), // Limit message length
+            timestamp: new Date().toISOString(),
+        };
+        // Capture stack for errors
+        if (level === 'error') {
+            const stack = new Error().stack;
+            if (stack) {
+                entry.stack = stack.split('\n').slice(3).join('\n');
+            }
+        }
+        this.entries.push(entry);
+        // Keep only recent entries
+        if (this.entries.length > this.maxEntries) {
+            this.entries.shift();
+        }
+    }
+    getEntries() {
+        return [...this.entries];
+    }
+    clear() {
+        this.entries = [];
+    }
+}
+// ==================== Network Capture ====================
+class NetworkCapture {
+    constructor(maxEntries = 100) {
+        this.entries = [];
+        this.isCapturing = false;
+        this.maxEntries = maxEntries;
+    }
+    start() {
+        if (this.isCapturing)
+            return;
+        this.isCapturing = true;
+        // Intercept fetch - bind to window to avoid "Illegal invocation"
+        this.originalFetch = window.fetch.bind(window);
+        const self = this;
+        window.fetch = async function (input, init) {
+            const startTime = performance.now();
+            const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+            const method = init?.method || 'GET';
+            try {
+                const response = await self.originalFetch(input, init);
+                const duration = performance.now() - startTime;
+                self.addEntry({
+                    url,
+                    method,
+                    status: response.status,
+                    statusText: response.statusText,
+                    duration: Math.round(duration),
+                    type: response.headers.get('content-type') || undefined,
+                    timestamp: new Date().toISOString(),
+                });
+                return response;
+            }
+            catch (error) {
+                const duration = performance.now() - startTime;
+                self.addEntry({
+                    url,
+                    method,
+                    duration: Math.round(duration),
+                    timestamp: new Date().toISOString(),
+                    error: error.message,
+                });
+                throw error;
+            }
+        };
+        // Intercept XMLHttpRequest
+        this.originalXHROpen = XMLHttpRequest.prototype.open;
+        this.originalXHRSend = XMLHttpRequest.prototype.send;
+        XMLHttpRequest.prototype.open = function (method, url, ...rest) {
+            this._checkflow = {
+                method,
+                url: url.toString(),
+                startTime: 0,
+            };
+            return self.originalXHROpen.apply(this, [method, url, ...rest]);
+        };
+        XMLHttpRequest.prototype.send = function (body) {
+            const xhr = this;
+            const meta = xhr._checkflow;
+            if (meta) {
+                meta.startTime = performance.now();
+                xhr.addEventListener('loadend', () => {
+                    const duration = performance.now() - meta.startTime;
+                    self.addEntry({
+                        url: meta.url,
+                        method: meta.method,
+                        status: xhr.status,
+                        statusText: xhr.statusText,
+                        duration: Math.round(duration),
+                        type: xhr.getResponseHeader('content-type') || undefined,
+                        timestamp: new Date().toISOString(),
+                    });
+                });
+                xhr.addEventListener('error', () => {
+                    const duration = performance.now() - meta.startTime;
+                    self.addEntry({
+                        url: meta.url,
+                        method: meta.method,
+                        duration: Math.round(duration),
+                        timestamp: new Date().toISOString(),
+                        error: 'Network error',
+                    });
+                });
+            }
+            return self.originalXHRSend.apply(this, [body]);
+        };
+    }
+    stop() {
+        if (!this.isCapturing)
+            return;
+        this.isCapturing = false;
+        if (this.originalFetch) {
+            window.fetch = this.originalFetch;
+        }
+        if (this.originalXHROpen) {
+            XMLHttpRequest.prototype.open = this.originalXHROpen;
+        }
+        if (this.originalXHRSend) {
+            XMLHttpRequest.prototype.send = this.originalXHRSend;
+        }
+    }
+    addEntry(entry) {
+        // Filter out CheckFlow API calls
+        if (entry.url.includes('checkflow') || entry.url.includes('/api/v1/capture')) {
+            return;
+        }
+        this.entries.push(entry);
+        if (this.entries.length > this.maxEntries) {
+            this.entries.shift();
+        }
+    }
+    getEntries() {
+        return [...this.entries];
+    }
+    clear() {
+        this.entries = [];
+    }
+}
+// ==================== Performance Capture ====================
+function capturePerformance() {
+    const metrics = {};
+    try {
+        // Navigation timing
+        const navTiming = performance.getEntriesByType('navigation')[0];
+        if (navTiming) {
+            metrics.loadTime = Math.round(navTiming.loadEventEnd - navTiming.fetchStart);
+            metrics.domContentLoaded = Math.round(navTiming.domContentLoadedEventEnd - navTiming.fetchStart);
+        }
+        // Paint timing
+        const paintEntries = performance.getEntriesByType('paint');
+        const fcp = paintEntries.find((e) => e.name === 'first-contentful-paint');
+        if (fcp) {
+            metrics.firstContentfulPaint = Math.round(fcp.startTime);
+        }
+        // LCP (if available via PerformanceObserver)
+        const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
+        if (lcpEntries.length > 0) {
+            metrics.largestContentfulPaint = Math.round(lcpEntries[lcpEntries.length - 1].startTime);
+        }
+        // Memory (Chrome only)
+        if (performance.memory) {
+            metrics.memoryUsage = Math.round(performance.memory.usedJSHeapSize / 1024 / 1024);
+        }
+        // CLS (approximation from layout shift entries)
+        const layoutShiftEntries = performance.getEntriesByType('layout-shift');
+        if (layoutShiftEntries.length > 0) {
+            metrics.cumulativeLayoutShift = layoutShiftEntries.reduce((sum, entry) => sum + (entry.hadRecentInput ? 0 : entry.value), 0);
+        }
+    }
+    catch (e) {
+        // Performance API not fully available
+    }
+    return metrics;
+}
+// ==================== Page Context ====================
+function capturePageContext() {
+    const ua = navigator.userAgent;
+    // Parse browser info
+    let browserName = 'Unknown';
+    let browserVersion = '';
+    if (ua.includes('Firefox/')) {
+        browserName = 'Firefox';
+        browserVersion = ua.match(/Firefox\/(\d+\.\d+)/)?.[1] || '';
+    }
+    else if (ua.includes('Edg/')) {
+        browserName = 'Edge';
+        browserVersion = ua.match(/Edg\/(\d+\.\d+)/)?.[1] || '';
+    }
+    else if (ua.includes('Chrome/')) {
+        browserName = 'Chrome';
+        browserVersion = ua.match(/Chrome\/(\d+\.\d+)/)?.[1] || '';
+    }
+    else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
+        browserName = 'Safari';
+        browserVersion = ua.match(/Version\/(\d+\.\d+)/)?.[1] || '';
+    }
+    // Parse OS info
+    let osName = 'Unknown';
+    let osVersion = '';
+    if (ua.includes('Windows NT')) {
+        osName = 'Windows';
+        const ntVersion = ua.match(/Windows NT (\d+\.\d+)/)?.[1];
+        if (ntVersion === '10.0')
+            osVersion = '10/11';
+        else if (ntVersion === '6.3')
+            osVersion = '8.1';
+        else if (ntVersion === '6.2')
+            osVersion = '8';
+        else if (ntVersion === '6.1')
+            osVersion = '7';
+    }
+    else if (ua.includes('Mac OS X')) {
+        osName = 'macOS';
+        osVersion = ua.match(/Mac OS X (\d+[._]\d+)/)?.[1]?.replace('_', '.') || '';
+    }
+    else if (ua.includes('Linux')) {
+        osName = 'Linux';
+    }
+    else if (ua.includes('Android')) {
+        osName = 'Android';
+        osVersion = ua.match(/Android (\d+\.\d+)/)?.[1] || '';
+    }
+    else if (ua.includes('iOS') || ua.includes('iPhone') || ua.includes('iPad')) {
+        osName = 'iOS';
+        osVersion = ua.match(/OS (\d+_\d+)/)?.[1]?.replace('_', '.') || '';
+    }
+    // Detect device type
+    let deviceType = 'desktop';
+    if (/Mobi|Android/i.test(ua)) {
+        deviceType = 'mobile';
+    }
+    else if (/Tablet|iPad/i.test(ua)) {
+        deviceType = 'tablet';
+    }
+    return {
+        url: window.location.href,
+        title: document.title,
+        viewport: {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        },
+        userAgent: ua,
+        browser: {
+            name: browserName,
+            version: browserVersion,
+        },
+        os: {
+            name: osName,
+            version: osVersion,
+        },
+        deviceType,
+        screenResolution: {
+            width: window.screen.width,
+            height: window.screen.height,
+        },
+        pixelRatio: window.devicePixelRatio || 1,
+        language: navigator.language,
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        referrer: document.referrer || undefined,
+    };
+}
+// ==================== Screenshot Capture ====================
+async function captureScreenshot(options = {}) {
+    try {
+        // Dynamic import of html2canvas
+        const html2canvas = (await import('html2canvas')).default;
+        // Hide elements if specified
+        const hiddenElements = [];
+        if (options.hideElements) {
+            options.hideElements.forEach((selector) => {
+                document.querySelectorAll(selector).forEach((el) => {
+                    hiddenElements.push({ element: el, display: el.style.display });
+                    el.style.display = 'none';
+                });
+            });
+        }
+        // Mask elements if specified
+        const maskedElements = [];
+        if (options.maskElements) {
+            options.maskElements.forEach((selector) => {
+                document.querySelectorAll(selector).forEach((el) => {
+                    maskedElements.push({ element: el, innerHTML: el.innerHTML });
+                    el.innerHTML = '••••••••';
+                });
+            });
+        }
+        // Wait for delay if specified
+        if (options.delay) {
+            await new Promise((resolve) => setTimeout(resolve, options.delay));
+        }
+        // Capture
+        const canvas = await html2canvas(document.body, {
+            useCORS: true,
+            allowTaint: true,
+            logging: false,
+            scale: Math.min(window.devicePixelRatio || 1, 2),
+            windowWidth: options.fullPage ? document.documentElement.scrollWidth : window.innerWidth,
+            windowHeight: options.fullPage ? document.documentElement.scrollHeight : window.innerHeight,
+        });
+        // Restore hidden elements
+        hiddenElements.forEach(({ element, display }) => {
+            element.style.display = display;
+        });
+        // Restore masked elements
+        maskedElements.forEach(({ element, innerHTML }) => {
+            element.innerHTML = innerHTML;
+        });
+        // Convert to base64
+        const quality = (options.quality || 80) / 100;
+        return canvas.toDataURL('image/png', quality);
+    }
+    catch (error) {
+        console.error('[CheckFlow] Screenshot capture failed:', error);
+        return null;
+    }
+}
+// ==================== Main Capture Class ====================
+class ContextCapture {
+    constructor(options = {}) {
+        this.isCapturing = false;
+        this.consoleCapture = new ConsoleCapture(options.maxConsoleEntries || 100);
+        this.networkCapture = new NetworkCapture(options.maxNetworkEntries || 100);
+    }
+    /**
+     * Start capturing console and network logs
+     */
+    startCapture() {
+        if (this.isCapturing)
+            return;
+        this.isCapturing = true;
+        this.consoleCapture.start();
+        this.networkCapture.start();
+    }
+    /**
+     * Stop capturing
+     */
+    stopCapture() {
+        if (!this.isCapturing)
+            return;
+        this.isCapturing = false;
+        this.consoleCapture.stop();
+        this.networkCapture.stop();
+    }
+    /**
+     * Capture current page context with optional screenshot
+     */
+    async capture(options = {}) {
+        const result = {
+            context: capturePageContext(),
+            capturedAt: new Date().toISOString(),
+        };
+        // Capture screenshot
+        if (options.includeConsole !== false) {
+            const screenshot = await captureScreenshot(options);
+            if (screenshot) {
+                result.screenshot = screenshot;
+            }
+        }
+        // Include console logs
+        if (options.includeConsole !== false) {
+            result.consoleLogs = this.consoleCapture.getEntries();
+        }
+        // Include network logs
+        if (options.includeNetwork !== false) {
+            result.networkLogs = this.networkCapture.getEntries();
+        }
+        // Include performance metrics
+        if (options.includePerformance !== false) {
+            result.performance = capturePerformance();
+        }
+        return result;
+    }
+    /**
+     * Get current console entries
+     */
+    getConsoleLogs() {
+        return this.consoleCapture.getEntries();
+    }
+    /**
+     * Get current network entries
+     */
+    getNetworkLogs() {
+        return this.networkCapture.getEntries();
+    }
+    /**
+     * Clear all captured data
+     */
+    clear() {
+        this.consoleCapture.clear();
+        this.networkCapture.clear();
+    }
+}
+
+/**
+ * Error Capture Module
+ * Automatic error capture and reporting
+ */
+class ErrorCapture {
+    constructor(handler) {
+        this.isCapturing = false;
+        this.capturedErrors = [];
+        this.maxErrors = 50;
+        this.handler = handler;
+    }
+    /**
+     * Start capturing errors
+     */
+    start() {
+        if (this.isCapturing)
+            return;
+        this.isCapturing = true;
+        // Capture window.onerror
+        this.originalOnError = window.onerror;
+        window.onerror = (message, filename, lineno, colno, error) => {
+            this.captureError({
+                message: typeof message === 'string' ? message : message.type,
+                stack: error?.stack,
+                type: error?.name || 'Error',
+                filename,
+                lineno,
+                colno,
+            });
+            // Call original handler
+            if (this.originalOnError) {
+                return this.originalOnError(message, filename, lineno, colno, error);
+            }
+            return false;
+        };
+        // Capture unhandled promise rejections
+        this.originalOnUnhandledRejection = window.onunhandledrejection;
+        window.onunhandledrejection = (event) => {
+            const reason = event.reason;
+            this.captureError({
+                message: reason?.message || String(reason),
+                stack: reason?.stack,
+                type: 'UnhandledPromiseRejection',
+            });
+            // Call original handler
+            if (this.originalOnUnhandledRejection) {
+                return this.originalOnUnhandledRejection(event);
+            }
+        };
+    }
+    /**
+     * Stop capturing errors
+     */
+    stop() {
+        if (!this.isCapturing)
+            return;
+        this.isCapturing = false;
+        window.onerror = this.originalOnError || null;
+        window.onunhandledrejection = this.originalOnUnhandledRejection || null;
+    }
+    /**
+     * Set error handler
+     */
+    setHandler(handler) {
+        this.handler = handler;
+    }
+    /**
+     * Manually capture an error
+     */
+    captureError(error) {
+        const errorInfo = {
+            message: error.message || 'Unknown error',
+            stack: error.stack,
+            type: error.type || 'Error',
+            filename: error.filename,
+            lineno: error.lineno,
+            colno: error.colno,
+            timestamp: new Date().toISOString(),
+            context: capturePageContext(),
+        };
+        // Store error
+        this.capturedErrors.push(errorInfo);
+        if (this.capturedErrors.length > this.maxErrors) {
+            this.capturedErrors.shift();
+        }
+        // Call handler
+        if (this.handler) {
+            try {
+                this.handler(errorInfo);
+            }
+            catch (e) {
+                console.error('[CheckFlow] Error handler failed:', e);
+            }
+        }
+    }
+    /**
+     * Capture an exception (try/catch style)
+     */
+    captureException(error, context) {
+        this.captureError({
+            message: error.message,
+            stack: error.stack,
+            type: error.name,
+            context: context ? { ...capturePageContext(), ...context } : undefined,
+        });
+    }
+    /**
+     * Get captured errors
+     */
+    getErrors() {
+        return [...this.capturedErrors];
+    }
+    /**
+     * Clear captured errors
+     */
+    clear() {
+        this.capturedErrors = [];
+    }
+}
+// Note: The actual React ErrorBoundary component is in react/ErrorBoundary.tsx
+// This file provides the core error capture logic that can be used by any framework
+
+/**
+ * CheckFlow SDK Types
+ */
+const DEFAULT_TRANSLATIONS = {
+    feedbackButton: 'Feedback',
+    titleLabel: 'Title',
+    titlePlaceholder: 'Brief summary of the issue or suggestion',
+    descriptionLabel: 'Description',
+    descriptionPlaceholder: 'Provide more details...',
+    typeLabel: 'Type',
+    priorityLabel: 'Priority',
+    typeBug: 'Bug',
+    typeFeature: 'Feature Request',
+    typeImprovement: 'Improvement',
+    typeQuestion: 'Question',
+    typeOther: 'Other',
+    priorityLow: 'Low',
+    priorityMedium: 'Medium',
+    priorityHigh: 'High',
+    priorityCritical: 'Critical',
+    submitButton: 'Submit Feedback',
+    cancelButton: 'Cancel',
+    captureButton: 'Capture Screenshot',
+    retakeButton: 'Retake',
+    submitting: 'Submitting...',
+    submitSuccess: 'Thank you for your feedback!',
+    submitError: 'Failed to submit. Please try again.',
+    captureSuccess: 'Screenshot captured',
+    captureError: 'Failed to capture screenshot',
+    screenshotLabel: 'Screenshot',
+    includeScreenshot: 'Include screenshot',
+    annotateScreenshot: 'Click to annotate',
+    includeConsole: 'Include console logs',
+    includeNetwork: 'Include network logs',
+};
+const TRANSLATIONS = {
+    en: DEFAULT_TRANSLATIONS,
+    fr: {
+        feedbackButton: 'Feedback',
+        titleLabel: 'Titre',
+        titlePlaceholder: 'Résumé bref du problème ou de la suggestion',
+        descriptionLabel: 'Description',
+        descriptionPlaceholder: 'Fournir plus de détails...',
+        typeLabel: 'Type',
+        priorityLabel: 'Priorité',
+        typeBug: 'Bug',
+        typeFeature: 'Demande de fonctionnalité',
+        typeImprovement: 'Amélioration',
+        typeQuestion: 'Question',
+        typeOther: 'Autre',
+        priorityLow: 'Faible',
+        priorityMedium: 'Moyenne',
+        priorityHigh: 'Haute',
+        priorityCritical: 'Critique',
+        submitButton: 'Envoyer',
+        cancelButton: 'Annuler',
+        captureButton: 'Capturer l\'écran',
+        retakeButton: 'Reprendre',
+        submitting: 'Envoi en cours...',
+        submitSuccess: 'Merci pour votre feedback!',
+        submitError: 'Échec de l\'envoi. Veuillez réessayer.',
+        captureSuccess: 'Capture d\'écran effectuée',
+        captureError: 'Échec de la capture d\'écran',
+        screenshotLabel: 'Capture d\'écran',
+        includeScreenshot: 'Inclure une capture d\'écran',
+        annotateScreenshot: 'Cliquez pour annoter',
+        includeConsole: 'Inclure les logs console',
+        includeNetwork: 'Inclure les logs réseau',
+    },
+};
+
+/**
+ * CheckFlow Annotation System Types
+ * Figma-like annotation tools for feedback screenshots
+ */
+const DEFAULT_STYLE = {
+    strokeColor: '#FF3B30',
+    strokeWidth: 3,
+    fillColor: 'transparent',
+    opacity: 1,
+    fontSize: 16,
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+};
+const HIGHLIGHT_STYLE = {
+    strokeColor: 'transparent',
+    fillColor: '#FFEB3B',
+    opacity: 0.4,
+};
+const BLUR_STYLE = {
+    strokeColor: '#666666',
+    fillColor: '#666666',
+    opacity: 0.8,
+};
+const COLOR_PALETTE = [
+    '#FF3B30', // Red
+    '#FF9500', // Orange
+    '#FFCC00', // Yellow
+    '#34C759', // Green
+    '#007AFF', // Blue
+    '#5856D6', // Purple
+    '#AF52DE', // Pink
+    '#000000', // Black
+    '#FFFFFF', // White
+];
+const STROKE_WIDTHS = [1, 2, 3, 5, 8];
+
+/**
+ * CheckFlow Annotation Toolbar
+ * Figma-like floating toolbar for annotation tools
+ */
+const TOOL_ICONS = {
+    select: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>`,
+    rectangle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`,
+    ellipse: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="12" rx="9" ry="6"/></svg>`,
+    arrow: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>`,
+    line: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="19" x2="19" y2="5"/></svg>`,
+    highlight: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`,
+    blur: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4-12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4-4.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-4c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/></svg>`,
+    text: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+    freehand: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>`,
+};
+const TOOL_LABELS = {
+    select: 'Sélection',
+    rectangle: 'Rectangle',
+    ellipse: 'Ellipse',
+    arrow: 'Flèche',
+    line: 'Ligne',
+    highlight: 'Surbrillance',
+    blur: 'Floutage',
+    text: 'Texte',
+    freehand: 'Dessin libre',
+};
+class AnnotationToolbar {
+    constructor(config) {
+        this.colorPicker = null;
+        this.strokePicker = null;
+        this.config = config;
+        this.element = this.createToolbar();
+    }
+    getElement() {
+        return this.element;
+    }
+    setActiveTool(tool) {
+        this.config.activeTool = tool;
+        this.updateActiveState();
+    }
+    setStyle(style) {
+        this.config.style = style;
+        this.updateStyleDisplay();
+    }
+    createToolbar() {
+        const toolbar = document.createElement('div');
+        toolbar.className = 'cf-toolbar';
+        // Tools section
+        const toolsSection = document.createElement('div');
+        toolsSection.className = 'cf-toolbar-section cf-toolbar-tools';
+        for (const tool of this.config.tools) {
+            const button = this.createToolButton(tool);
+            toolsSection.appendChild(button);
+        }
+        // Separator
+        const separator1 = document.createElement('div');
+        separator1.className = 'cf-toolbar-separator';
+        // Style section
+        const styleSection = document.createElement('div');
+        styleSection.className = 'cf-toolbar-section cf-toolbar-style';
+        // Color picker button
+        const colorBtn = document.createElement('button');
+        colorBtn.className = 'cf-toolbar-btn cf-color-btn';
+        colorBtn.title = 'Couleur';
+        colorBtn.innerHTML = `<span class="cf-color-preview" style="background: ${this.config.style.strokeColor}"></span>`;
+        colorBtn.addEventListener('click', () => this.toggleColorPicker());
+        styleSection.appendChild(colorBtn);
+        // Stroke width button
+        const strokeBtn = document.createElement('button');
+        strokeBtn.className = 'cf-toolbar-btn cf-stroke-btn';
+        strokeBtn.title = 'Épaisseur';
+        strokeBtn.innerHTML = `<span class="cf-stroke-preview">${this.config.style.strokeWidth}px</span>`;
+        strokeBtn.addEventListener('click', () => this.toggleStrokePicker());
+        styleSection.appendChild(strokeBtn);
+        // Separator
+        const separator2 = document.createElement('div');
+        separator2.className = 'cf-toolbar-separator';
+        // Actions section
+        const actionsSection = document.createElement('div');
+        actionsSection.className = 'cf-toolbar-section cf-toolbar-actions';
+        // Undo button
+        const undoBtn = document.createElement('button');
+        undoBtn.className = 'cf-toolbar-btn';
+        undoBtn.title = 'Annuler (Ctrl+Z)';
+        undoBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/></svg>`;
+        undoBtn.addEventListener('click', () => this.config.onUndo());
+        actionsSection.appendChild(undoBtn);
+        // Clear button
+        const clearBtn = document.createElement('button');
+        clearBtn.className = 'cf-toolbar-btn';
+        clearBtn.title = 'Tout effacer';
+        clearBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>`;
+        clearBtn.addEventListener('click', () => this.config.onClear());
+        actionsSection.appendChild(clearBtn);
+        // Assemble toolbar
+        toolbar.appendChild(toolsSection);
+        toolbar.appendChild(separator1);
+        toolbar.appendChild(styleSection);
+        toolbar.appendChild(separator2);
+        toolbar.appendChild(actionsSection);
+        return toolbar;
+    }
+    createToolButton(tool) {
+        const button = document.createElement('button');
+        button.className = `cf-toolbar-btn cf-tool-btn ${tool === this.config.activeTool ? 'active' : ''}`;
+        button.dataset.tool = tool;
+        button.title = TOOL_LABELS[tool];
+        button.innerHTML = TOOL_ICONS[tool];
+        button.addEventListener('click', () => {
+            this.config.onToolChange(tool);
+            this.setActiveTool(tool);
+        });
+        return button;
+    }
+    updateActiveState() {
+        const buttons = this.element.querySelectorAll('.cf-tool-btn');
+        buttons.forEach((btn) => {
+            const button = btn;
+            button.classList.toggle('active', button.dataset.tool === this.config.activeTool);
+        });
+    }
+    updateStyleDisplay() {
+        const colorPreview = this.element.querySelector('.cf-color-preview');
+        if (colorPreview) {
+            colorPreview.style.background = this.config.style.strokeColor;
+        }
+        const strokePreview = this.element.querySelector('.cf-stroke-preview');
+        if (strokePreview) {
+            strokePreview.textContent = `${this.config.style.strokeWidth}px`;
+        }
+    }
+    toggleColorPicker() {
+        if (this.colorPicker) {
+            this.colorPicker.remove();
+            this.colorPicker = null;
+            return;
+        }
+        // Close stroke picker if open
+        if (this.strokePicker) {
+            this.strokePicker.remove();
+            this.strokePicker = null;
+        }
+        this.colorPicker = document.createElement('div');
+        this.colorPicker.className = 'cf-picker cf-color-picker';
+        for (const color of COLOR_PALETTE) {
+            const swatch = document.createElement('button');
+            swatch.className = `cf-color-swatch ${color === this.config.style.strokeColor ? 'active' : ''}`;
+            swatch.style.background = color;
+            swatch.addEventListener('click', () => {
+                this.config.onStyleChange({ strokeColor: color });
+                this.setStyle({ ...this.config.style, strokeColor: color });
+                this.colorPicker?.remove();
+                this.colorPicker = null;
+            });
+            this.colorPicker.appendChild(swatch);
+        }
+        const colorBtn = this.element.querySelector('.cf-color-btn');
+        colorBtn?.appendChild(this.colorPicker);
+    }
+    toggleStrokePicker() {
+        if (this.strokePicker) {
+            this.strokePicker.remove();
+            this.strokePicker = null;
+            return;
+        }
+        // Close color picker if open
+        if (this.colorPicker) {
+            this.colorPicker.remove();
+            this.colorPicker = null;
+        }
+        this.strokePicker = document.createElement('div');
+        this.strokePicker.className = 'cf-picker cf-stroke-picker';
+        for (const width of STROKE_WIDTHS) {
+            const option = document.createElement('button');
+            option.className = `cf-stroke-option ${width === this.config.style.strokeWidth ? 'active' : ''}`;
+            option.innerHTML = `<span style="height: ${width}px"></span> ${width}px`;
+            option.addEventListener('click', () => {
+                this.config.onStyleChange({ strokeWidth: width });
+                this.setStyle({ ...this.config.style, strokeWidth: width });
+                this.strokePicker?.remove();
+                this.strokePicker = null;
+            });
+            this.strokePicker.appendChild(option);
+        }
+        const strokeBtn = this.element.querySelector('.cf-stroke-btn');
+        strokeBtn?.appendChild(this.strokePicker);
+    }
+}
+
+/**
+ * CheckFlow Annotation Styles
+ * CSS-in-JS styles for the annotation editor
+ */
+const STYLES = `
+/* Annotation Overlay */
+.cf-annotation-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: cf-fade-in 0.2s ease-out;
+}
+
+@keyframes cf-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Editor Wrapper */
+.cf-annotation-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 95vw;
+  max-height: 95vh;
+  background: #1a1a1a;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+}
+
+/* Canvas Container */
+.cf-annotation-canvas-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 16px;
+  background: #0d0d0d;
+}
+
+.cf-annotation-canvas {
+  max-width: 100%;
+  max-height: calc(95vh - 140px);
+  border-radius: 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  cursor: crosshair;
+}
+
+/* Toolbar */
+.cf-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #2a2a2a;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+.cf-toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cf-toolbar-separator {
+  width: 1px;
+  height: 24px;
+  background: #4a4a4a;
+  margin: 0 8px;
+}
+
+.cf-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #999;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cf-toolbar-btn:hover {
+  background: #3a3a3a;
+  color: #fff;
+}
+
+.cf-toolbar-btn.active {
+  background: #007AFF;
+  color: #fff;
+}
+
+.cf-toolbar-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Color Button */
+.cf-color-btn {
+  position: relative;
+}
+
+.cf-color-preview {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+}
+
+/* Stroke Button */
+.cf-stroke-btn {
+  width: auto;
+  padding: 0 12px;
+}
+
+.cf-stroke-preview {
+  font-size: 12px;
+  font-weight: 500;
+  color: inherit;
+}
+
+/* Pickers */
+.cf-picker {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+  padding: 8px;
+  background: #2a2a2a;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 10;
+}
+
+.cf-color-picker {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+  width: 140px;
+}
+
+.cf-color-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.cf-color-swatch:hover {
+  transform: scale(1.15);
+}
+
+.cf-color-swatch.active {
+  border-color: #fff;
+}
+
+.cf-stroke-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 80px;
+}
+
+.cf-stroke-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #999;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cf-stroke-option:hover {
+  background: #3a3a3a;
+  color: #fff;
+}
+
+.cf-stroke-option.active {
+  background: #007AFF;
+  color: #fff;
+}
+
+.cf-stroke-option span {
+  width: 24px;
+  background: currentColor;
+  border-radius: 2px;
+}
+
+/* Action Buttons */
+.cf-annotation-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #2a2a2a;
+  border-top: 1px solid #3a3a3a;
+}
+
+.cf-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cf-btn-primary {
+  background: #007AFF;
+  color: #fff;
+}
+
+.cf-btn-primary:hover {
+  background: #0066DD;
+}
+
+.cf-btn-secondary {
+  background: #3a3a3a;
+  color: #fff;
+}
+
+.cf-btn-secondary:hover {
+  background: #4a4a4a;
+}
+
+/* Text Input */
+.cf-annotation-text-input {
+  position: fixed;
+  z-index: 1000000;
+  padding: 4px 8px;
+  border: 2px solid #007AFF;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.95);
+  font-size: 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  outline: none;
+  min-width: 150px;
+}
+
+/* Tool-specific cursors */
+.cf-annotation-canvas[data-tool="select"] { cursor: default; }
+.cf-annotation-canvas[data-tool="rectangle"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="ellipse"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="arrow"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="line"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="highlight"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="blur"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="text"] { cursor: text; }
+.cf-annotation-canvas[data-tool="freehand"] { cursor: crosshair; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .cf-toolbar {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .cf-toolbar-separator {
+    display: none;
+  }
+  
+  .cf-annotation-actions {
+    justify-content: stretch;
+  }
+  
+  .cf-annotation-actions .cf-btn {
+    flex: 1;
+  }
+}
+`;
+let stylesInjected = false;
+function injectAnnotationStyles() {
+    if (stylesInjected)
+        return;
+    const styleElement = document.createElement('style');
+    styleElement.id = 'cf-annotation-styles';
+    styleElement.textContent = STYLES;
+    document.head.appendChild(styleElement);
+    stylesInjected = true;
+}
+function removeAnnotationStyles() {
+    const styleElement = document.getElementById('cf-annotation-styles');
+    if (styleElement) {
+        styleElement.remove();
+        stylesInjected = false;
+    }
+}
+
+/**
+ * CheckFlow Annotation Editor
+ * Figma-like canvas editor for annotating screenshots
+ */
+class AnnotationEditor {
+    constructor(config) {
+        this.container = null;
+        this.canvas = null;
+        this.ctx = null;
+        this.toolbar = null;
+        this.annotations = [];
+        this.backgroundImage = null;
+        this.state = {
+            activeTool: 'rectangle',
+            style: { ...DEFAULT_STYLE },
+            isDrawing: false,
+            currentAnnotation: null,
+        };
+        this.startPoint = null;
+        this.freehandPoints = [];
+        this.textInput = null;
+        this.config = {
+            ...config,
+            tools: config.tools || ['select', 'rectangle', 'arrow', 'highlight', 'blur', 'text', 'freehand'],
+            defaultStyle: config.defaultStyle || DEFAULT_STYLE,
+        };
+        this.state.style = { ...this.config.defaultStyle };
+    }
+    /**
+     * Open the annotation editor with a screenshot
+     */
+    async open(screenshotDataUrl) {
+        injectAnnotationStyles();
+        // Load the background image
+        this.backgroundImage = await this.loadImage(screenshotDataUrl);
+        // Create the editor UI
+        this.createEditorUI();
+        // Setup event listeners
+        this.setupEventListeners();
+        // Initial render
+        this.render();
+    }
+    /**
+     * Close the editor
+     */
+    close() {
+        if (this.container) {
+            this.container.remove();
+            this.container = null;
+        }
+        this.canvas = null;
+        this.ctx = null;
+        this.toolbar = null;
+        this.annotations = [];
+        this.backgroundImage = null;
+    }
+    /**
+     * Get the annotated image as data URL
+     */
+    getAnnotatedImage() {
+        if (!this.canvas || !this.ctx)
+            return '';
+        // Create a temporary canvas to flatten the image
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = this.canvas.width;
+        tempCanvas.height = this.canvas.height;
+        const tempCtx = tempCanvas.getContext('2d');
+        // Draw background
+        if (this.backgroundImage) {
+            tempCtx.drawImage(this.backgroundImage, 0, 0);
+        }
+        // Draw all annotations
+        this.drawAnnotations(tempCtx);
+        return tempCanvas.toDataURL('image/png');
+    }
+    /**
+     * Get annotations data
+     */
+    getAnnotations() {
+        return [...this.annotations];
+    }
+    // Private methods
+    loadImage(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = src;
+        });
+    }
+    createEditorUI() {
+        // Create overlay container
+        this.container = document.createElement('div');
+        this.container.className = 'cf-annotation-overlay';
+        // Create editor wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'cf-annotation-wrapper';
+        // Create canvas container
+        const canvasContainer = document.createElement('div');
+        canvasContainer.className = 'cf-annotation-canvas-container';
+        // Create canvas
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'cf-annotation-canvas';
+        this.canvas.width = this.backgroundImage?.width || 1920;
+        this.canvas.height = this.backgroundImage?.height || 1080;
+        this.ctx = this.canvas.getContext('2d');
+        canvasContainer.appendChild(this.canvas);
+        // Create toolbar
+        this.toolbar = new AnnotationToolbar({
+            tools: this.config.tools,
+            activeTool: this.state.activeTool,
+            style: this.state.style,
+            onToolChange: (tool) => this.setActiveTool(tool),
+            onStyleChange: (style) => this.setStyle(style),
+            onUndo: () => this.undo(),
+            onClear: () => this.clearAll(),
+            onSave: () => this.save(),
+            onCancel: () => this.cancel(),
+        });
+        // Create action buttons
+        const actions = document.createElement('div');
+        actions.className = 'cf-annotation-actions';
+        actions.innerHTML = `
+      <button class="cf-btn cf-btn-secondary" data-action="cancel">Annuler</button>
+      <button class="cf-btn cf-btn-primary" data-action="save">Enregistrer</button>
+    `;
+        // Assemble UI
+        wrapper.appendChild(this.toolbar.getElement());
+        wrapper.appendChild(canvasContainer);
+        wrapper.appendChild(actions);
+        this.container.appendChild(wrapper);
+        document.body.appendChild(this.container);
+        // Bind action buttons
+        actions.querySelector('[data-action="cancel"]')?.addEventListener('click', () => this.cancel());
+        actions.querySelector('[data-action="save"]')?.addEventListener('click', () => this.save());
+    }
+    setupEventListeners() {
+        if (!this.canvas)
+            return;
+        this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
+        this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+        this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
+        this.canvas.addEventListener('mouseleave', this.handleMouseUp.bind(this));
+        // Touch support
+        this.canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
+        this.canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
+        this.canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
+        // Keyboard shortcuts
+        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+    }
+    handleMouseDown(e) {
+        const point = this.getCanvasPoint(e);
+        this.startDrawing(point);
+    }
+    handleMouseMove(e) {
+        const point = this.getCanvasPoint(e);
+        this.continueDrawing(point);
+    }
+    handleMouseUp(_e) {
+        this.finishDrawing();
+    }
+    handleTouchStart(e) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const point = this.getCanvasPointFromTouch(touch);
+        this.startDrawing(point);
+    }
+    handleTouchMove(e) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const point = this.getCanvasPointFromTouch(touch);
+        this.continueDrawing(point);
+    }
+    handleTouchEnd(e) {
+        e.preventDefault();
+        this.finishDrawing();
+    }
+    handleKeyDown(e) {
+        // Undo: Ctrl+Z / Cmd+Z
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+            e.preventDefault();
+            this.undo();
+        }
+        // Escape: Cancel
+        if (e.key === 'Escape') {
+            if (this.state.isDrawing) {
+                this.state.isDrawing = false;
+                this.state.currentAnnotation = null;
+                this.render();
+            }
+            else {
+                this.cancel();
+            }
+        }
+        // Enter: Save (when not drawing)
+        if (e.key === 'Enter' && !this.state.isDrawing) {
+            this.save();
+        }
+    }
+    getCanvasPoint(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        return {
+            x: (e.clientX - rect.left) * scaleX,
+            y: (e.clientY - rect.top) * scaleY,
+        };
+    }
+    getCanvasPointFromTouch(touch) {
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        return {
+            x: (touch.clientX - rect.left) * scaleX,
+            y: (touch.clientY - rect.top) * scaleY,
+        };
+    }
+    startDrawing(point) {
+        if (this.state.activeTool === 'select')
+            return;
+        this.state.isDrawing = true;
+        this.startPoint = point;
+        if (this.state.activeTool === 'text') {
+            this.showTextInput(point);
+            return;
+        }
+        if (this.state.activeTool === 'freehand') {
+            this.freehandPoints = [point];
+        }
+    }
+    continueDrawing(point) {
+        if (!this.state.isDrawing || !this.startPoint)
+            return;
+        if (this.state.activeTool === 'freehand') {
+            this.freehandPoints.push(point);
+        }
+        // Create preview annotation
+        this.state.currentAnnotation = this.createAnnotation(this.startPoint, point);
+        this.render();
+    }
+    finishDrawing() {
+        if (!this.state.isDrawing || !this.state.currentAnnotation) {
+            this.state.isDrawing = false;
+            return;
+        }
+        // Don't add empty annotations
+        if (this.isValidAnnotation(this.state.currentAnnotation)) {
+            this.annotations.push(this.state.currentAnnotation);
+        }
+        this.state.isDrawing = false;
+        this.state.currentAnnotation = null;
+        this.startPoint = null;
+        this.freehandPoints = [];
+        this.render();
+    }
+    isValidAnnotation(annotation) {
+        switch (annotation.type) {
+            case 'rectangle':
+            case 'ellipse':
+            case 'highlight':
+            case 'blur':
+                const bounds = annotation.bounds;
+                return Math.abs(bounds.width) > 5 && Math.abs(bounds.height) > 5;
+            case 'arrow':
+            case 'line':
+                const start = annotation.start;
+                const end = annotation.end;
+                const dist = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
+                return dist > 10;
+            case 'freehand':
+                return annotation.points.length > 2;
+            case 'text':
+                return !!annotation.text?.trim();
+            default:
+                return true;
+        }
+    }
+    createAnnotation(start, end) {
+        const id = this.generateId();
+        const baseStyle = { ...this.state.style };
+        switch (this.state.activeTool) {
+            case 'rectangle':
+                return {
+                    id,
+                    type: 'rectangle',
+                    bounds: this.createBounds(start, end),
+                    style: baseStyle,
+                    timestamp: Date.now(),
+                };
+            case 'ellipse':
+                return {
+                    id,
+                    type: 'ellipse',
+                    bounds: this.createBounds(start, end),
+                    style: baseStyle,
+                    timestamp: Date.now(),
+                };
+            case 'arrow':
+                return {
+                    id,
+                    type: 'arrow',
+                    start: { ...start },
+                    end: { ...end },
+                    style: baseStyle,
+                    timestamp: Date.now(),
+                };
+            case 'line':
+                return {
+                    id,
+                    type: 'line',
+                    start: { ...start },
+                    end: { ...end },
+                    style: baseStyle,
+                    timestamp: Date.now(),
+                };
+            case 'highlight':
+                return {
+                    id,
+                    type: 'highlight',
+                    bounds: this.createBounds(start, end),
+                    style: { ...baseStyle, ...HIGHLIGHT_STYLE },
+                    timestamp: Date.now(),
+                };
+            case 'blur':
+                return {
+                    id,
+                    type: 'blur',
+                    bounds: this.createBounds(start, end),
+                    style: { ...baseStyle, ...BLUR_STYLE },
+                    blurAmount: 10,
+                    timestamp: Date.now(),
+                };
+            case 'freehand':
+                return {
+                    id,
+                    type: 'freehand',
+                    points: [...this.freehandPoints],
+                    style: baseStyle,
+                    timestamp: Date.now(),
+                };
+            default:
+                return {
+                    id,
+                    type: 'rectangle',
+                    bounds: this.createBounds(start, end),
+                    style: baseStyle,
+                    timestamp: Date.now(),
+                };
+        }
+    }
+    createBounds(start, end) {
+        return {
+            x: Math.min(start.x, end.x),
+            y: Math.min(start.y, end.y),
+            width: Math.abs(end.x - start.x),
+            height: Math.abs(end.y - start.y),
+        };
+    }
+    showTextInput(point) {
+        if (this.textInput) {
+            this.textInput.remove();
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = rect.width / this.canvas.width;
+        const scaleY = rect.height / this.canvas.height;
+        this.textInput = document.createElement('input');
+        this.textInput.type = 'text';
+        this.textInput.className = 'cf-annotation-text-input';
+        this.textInput.style.left = `${rect.left + point.x * scaleX}px`;
+        this.textInput.style.top = `${rect.top + point.y * scaleY}px`;
+        this.textInput.style.color = this.state.style.strokeColor;
+        this.textInput.style.fontSize = `${(this.state.style.fontSize || 16) * scaleY}px`;
+        this.textInput.placeholder = 'Tapez votre texte...';
+        document.body.appendChild(this.textInput);
+        this.textInput.focus();
+        const handleTextSubmit = () => {
+            if (this.textInput && this.textInput.value.trim()) {
+                const textAnnotation = {
+                    id: this.generateId(),
+                    type: 'text',
+                    position: point,
+                    text: this.textInput.value.trim(),
+                    style: { ...this.state.style },
+                    timestamp: Date.now(),
+                };
+                this.annotations.push(textAnnotation);
+                this.render();
+            }
+            this.textInput?.remove();
+            this.textInput = null;
+            this.state.isDrawing = false;
+        };
+        this.textInput.addEventListener('blur', handleTextSubmit);
+        this.textInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                handleTextSubmit();
+            }
+            else if (e.key === 'Escape') {
+                this.textInput?.remove();
+                this.textInput = null;
+                this.state.isDrawing = false;
+            }
+        });
+    }
+    generateId() {
+        return `ann_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    setActiveTool(tool) {
+        this.state.activeTool = tool;
+        this.toolbar?.setActiveTool(tool);
+        // Update cursor
+        if (this.canvas) {
+            this.canvas.style.cursor = tool === 'select' ? 'default' : 'crosshair';
+        }
+    }
+    setStyle(style) {
+        this.state.style = { ...this.state.style, ...style };
+        this.toolbar?.setStyle(this.state.style);
+    }
+    undo() {
+        if (this.annotations.length > 0) {
+            this.annotations.pop();
+            this.render();
+        }
+    }
+    clearAll() {
+        this.annotations = [];
+        this.render();
+    }
+    save() {
+        const imageData = this.getAnnotatedImage();
+        this.config.onSave?.(this.annotations, imageData);
+        this.close();
+    }
+    cancel() {
+        this.config.onCancel?.();
+        this.close();
+    }
+    render() {
+        if (!this.ctx || !this.canvas)
+            return;
+        // Clear canvas
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        // Draw background image
+        if (this.backgroundImage) {
+            this.ctx.drawImage(this.backgroundImage, 0, 0);
+        }
+        // Draw all saved annotations
+        this.drawAnnotations(this.ctx);
+        // Draw current annotation (preview)
+        if (this.state.currentAnnotation) {
+            this.drawAnnotation(this.ctx, this.state.currentAnnotation);
+        }
+    }
+    drawAnnotations(ctx) {
+        for (const annotation of this.annotations) {
+            this.drawAnnotation(ctx, annotation);
+        }
+    }
+    drawAnnotation(ctx, annotation) {
+        ctx.save();
+        ctx.globalAlpha = annotation.style.opacity;
+        ctx.strokeStyle = annotation.style.strokeColor;
+        ctx.fillStyle = annotation.style.fillColor;
+        ctx.lineWidth = annotation.style.strokeWidth;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        switch (annotation.type) {
+            case 'rectangle':
+                this.drawRectangle(ctx, annotation.bounds, annotation.style);
+                break;
+            case 'ellipse':
+                this.drawEllipse(ctx, annotation.bounds, annotation.style);
+                break;
+            case 'arrow':
+                this.drawArrow(ctx, annotation.start, annotation.end, annotation.style);
+                break;
+            case 'line':
+                this.drawLine(ctx, annotation.start, annotation.end);
+                break;
+            case 'highlight':
+                this.drawHighlight(ctx, annotation.bounds, annotation.style);
+                break;
+            case 'blur':
+                this.drawBlur(ctx, annotation.bounds, annotation.blurAmount);
+                break;
+            case 'text':
+                this.drawText(ctx, annotation.position, annotation.text, annotation.style);
+                break;
+            case 'freehand':
+                this.drawFreehand(ctx, annotation.points);
+                break;
+        }
+        ctx.restore();
+    }
+    drawRectangle(ctx, bounds, style) {
+        if (style.fillColor !== 'transparent') {
+            ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+        }
+        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    }
+    drawEllipse(ctx, bounds, style) {
+        const centerX = bounds.x + bounds.width / 2;
+        const centerY = bounds.y + bounds.height / 2;
+        const radiusX = bounds.width / 2;
+        const radiusY = bounds.height / 2;
+        ctx.beginPath();
+        ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+        if (style.fillColor !== 'transparent') {
+            ctx.fill();
+        }
+        ctx.stroke();
+    }
+    drawArrow(ctx, start, end, style) {
+        const headLength = 15 + style.strokeWidth * 2;
+        const angle = Math.atan2(end.y - start.y, end.x - start.x);
+        // Draw line
+        ctx.beginPath();
+        ctx.moveTo(start.x, start.y);
+        ctx.lineTo(end.x, end.y);
+        ctx.stroke();
+        // Draw arrowhead
+        ctx.beginPath();
+        ctx.moveTo(end.x, end.y);
+        ctx.lineTo(end.x - headLength * Math.cos(angle - Math.PI / 6), end.y - headLength * Math.sin(angle - Math.PI / 6));
+        ctx.lineTo(end.x - headLength * Math.cos(angle + Math.PI / 6), end.y - headLength * Math.sin(angle + Math.PI / 6));
+        ctx.closePath();
+        ctx.fillStyle = style.strokeColor;
+        ctx.fill();
+    }
+    drawLine(ctx, start, end) {
+        ctx.beginPath();
+        ctx.moveTo(start.x, start.y);
+        ctx.lineTo(end.x, end.y);
+        ctx.stroke();
+    }
+    drawHighlight(ctx, bounds, style) {
+        ctx.fillStyle = style.fillColor;
+        ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    }
+    drawBlur(ctx, bounds, blurAmount) {
+        // For blur, we pixelate the area
+        const pixelSize = Math.max(blurAmount, 5);
+        // Get image data for the blur region
+        if (this.backgroundImage) {
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = bounds.width;
+            tempCanvas.height = bounds.height;
+            const tempCtx = tempCanvas.getContext('2d');
+            // Draw the region from background
+            tempCtx.drawImage(this.backgroundImage, bounds.x, bounds.y, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
+            // Pixelate
+            const w = tempCanvas.width;
+            const h = tempCanvas.height;
+            // Scale down
+            tempCtx.imageSmoothingEnabled = false;
+            tempCtx.drawImage(tempCanvas, 0, 0, w, h, 0, 0, w / pixelSize, h / pixelSize);
+            // Scale back up
+            tempCtx.drawImage(tempCanvas, 0, 0, w / pixelSize, h / pixelSize, 0, 0, w, h);
+            // Draw back to main canvas
+            ctx.drawImage(tempCanvas, bounds.x, bounds.y);
+        }
+        // Draw border
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([5, 5]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+        ctx.setLineDash([]);
+    }
+    drawText(ctx, position, text, style) {
+        ctx.font = `${style.fontSize || 16}px ${style.fontFamily || 'system-ui'}`;
+        ctx.fillStyle = style.strokeColor;
+        ctx.textBaseline = 'top';
+        // Draw text background for readability
+        const metrics = ctx.measureText(text);
+        const padding = 4;
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+        ctx.fillRect(position.x - padding, position.y - padding, metrics.width + padding * 2, (style.fontSize || 16) + padding * 2);
+        // Draw text
+        ctx.fillStyle = style.strokeColor;
+        ctx.fillText(text, position.x, position.y);
+    }
+    drawFreehand(ctx, points) {
+        if (points.length < 2)
+            return;
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            ctx.lineTo(points[i].x, points[i].y);
+        }
+        ctx.stroke();
+    }
+}
+
+/**
+ * CheckFlow Feedback Widget
+ * Pure JavaScript widget that works without frameworks
+ */
+const ICONS = {
+    feedback: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
+    close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+    check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
+    camera: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>`,
+    annotate: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/></svg>`,
+    // Material Design inspired SVG icons
+    bug: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5s-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/></svg>`,
+    feature: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z"/></svg>`,
+    improvement: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>`,
+    question: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>`,
+    other: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>`,
+};
+class FeedbackWidget {
+    constructor(options = {}) {
+        this.container = null;
+        this.state = {
+            isOpen: false,
+            isMinimized: false,
+            isCapturing: false,
+            isSubmitting: false,
+        };
+        this.annotationEditor = null;
+        this.currentAnnotations = [];
+        this.options = {
+            position: 'bottom-right',
+            buttonText: 'Feedback',
+            zIndex: 999999,
+            ...options,
+        };
+        // Setup translations
+        const localeTranslations = TRANSLATIONS[options.locale || 'en'] || DEFAULT_TRANSLATIONS;
+        this.translations = { ...localeTranslations, ...options.translations };
+        this.capture = new ContextCapture();
+    }
+    /**
+     * Mount the widget to the DOM
+     */
+    mount() {
+        if (this.container)
+            return;
+        // Create container
+        this.container = document.createElement('div');
+        this.container.className = 'checkflow-widget';
+        this.container.innerHTML = this.renderTrigger();
+        document.body.appendChild(this.container);
+        // Bind events
+        this.bindEvents();
+        // Start capturing context
+        this.capture.startCapture();
+    }
+    /**
+     * Unmount the widget
+     */
+    unmount() {
+        if (this.container) {
+            this.container.remove();
+            this.container = null;
+        }
+        this.capture.stopCapture();
+    }
+    /**
+     * Open the feedback modal
+     */
+    open() {
+        this.state.isOpen = true;
+        this.render();
+    }
+    /**
+     * Close the feedback modal
+     */
+    close() {
+        this.state.isOpen = false;
+        this.state.captureResult = undefined;
+        this.state.error = undefined;
+        this.render();
+        this.options.onClose?.();
+    }
+    renderTrigger() {
+        const { position, buttonText, primaryColor } = this.options;
+        const displayText = buttonText || 'Signaler un bug';
+        // Apply custom color if provided
+        const customStyle = primaryColor ? `style="background-color: ${primaryColor}; color: ${this.getContrastColor(primaryColor)};"` : '';
+        return `
+      <button class="checkflow-trigger checkflow-trigger-pill ${position}" id="cf-trigger" ${customStyle}>
+        <span class="checkflow-trigger-icon">${ICONS.feedback}</span>
+        <span class="checkflow-trigger-text">${displayText}</span>
+      </button>
+    `;
+    }
+    /**
+     * Calculate contrast color (white or black) based on background color
+     */
+    getContrastColor(hexColor) {
+        // Remove # if present
+        const hex = hexColor.replace('#', '');
+        // Convert to RGB
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        // Calculate luminance using relative luminance formula
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        // Return black for light colors, white for dark colors
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
+    renderModal() {
+        const t = this.translations;
+        const { captureResult, isSubmitting, error } = this.state;
+        const { position } = this.options;
+        const hasScreenshot = !!captureResult?.screenshot;
+        // Mode expanded avec screenshot: fullscreen avec 2 colonnes au centre
+        if (hasScreenshot) {
+            return this.renderExpandedModal();
+        }
+        // Mode compact: panneau en bas à droite (pas centré)
+        const panelPosition = position?.includes('left') ? 'bottom-left' : '';
+        return `
+      <div class="checkflow-panel ${panelPosition}" id="cf-panel">
+        <div class="checkflow-header">
+          <h3>Envoyer le rapport</h3>
+          <button class="checkflow-close" id="cf-close">${ICONS.close}</button>
+        </div>
+        
+        <div class="checkflow-body">
+          ${error ? `<div class="checkflow-error">${error}</div>` : ''}
+          
+          <form class="checkflow-form" id="cf-form">
+            <!-- Type Selection -->
+            <div class="checkflow-field">
+              <label class="checkflow-label">Type de retour</label>
+              <div class="checkflow-type-grid">
+                ${this.renderTypeOptions()}
+              </div>
+            </div>
+
+            <!-- Name -->
+            <div class="checkflow-field">
+              <label class="checkflow-label">Nom <span class="cf-required">(obligatoire)</span></label>
+              <input type="text" class="checkflow-input" id="cf-name" 
+                     placeholder="Votre nom" required>
+            </div>
+
+            <!-- Email -->
+            <div class="checkflow-field">
+              <label class="checkflow-label">Email <span class="cf-required">(obligatoire)</span></label>
+              <input type="email" class="checkflow-input" id="cf-email" 
+                     placeholder="votre.email@exemple.com" required>
+            </div>
+
+            <!-- Description -->
+            <div class="checkflow-field">
+              <label class="checkflow-label">Description <span class="cf-required">(obligatoire)</span></label>
+              <textarea class="checkflow-textarea" id="cf-description" 
+                        placeholder="Quel est le problème ? Que vous attendiez-vous à voir ?" required></textarea>
+            </div>
+
+            <!-- Screenshot Button -->
+            <div class="checkflow-field">
+              ${this.renderCaptureButton()}
+            </div>
+
+            <!-- Options -->
+            <div class="checkflow-options">
+              <label class="checkflow-checkbox">
+                <input type="checkbox" id="cf-console" checked>
+                <span class="checkflow-checkbox-label">${t.includeConsole}</span>
+              </label>
+              <label class="checkflow-checkbox">
+                <input type="checkbox" id="cf-network" checked>
+                <span class="checkflow-checkbox-label">${t.includeNetwork}</span>
+              </label>
+            </div>
+          </form>
+        </div>
+
+        <div class="checkflow-footer">
+          <button type="submit" form="cf-form" class="checkflow-btn checkflow-btn-primary" 
+                  id="cf-submit" ${isSubmitting ? 'disabled' : ''} ${this.options.primaryColor ? `style="background-color: ${this.options.primaryColor}; color: ${this.getContrastColor(this.options.primaryColor)};"` : ''}>
+            ${isSubmitting ? 'Envoi en cours...' : 'Envoyer le rapport'}
+          </button>
+          <button type="button" class="checkflow-btn checkflow-btn-secondary" id="cf-cancel">
+            Annuler
+          </button>
+        </div>
+        <div class="checkflow-powered">Powered by CheckFlow</div>
+      </div>
+    `;
+    }
+    renderExpandedModal() {
+        this.translations;
+        const { captureResult, isSubmitting, error } = this.state;
+        return `
+      <div class="checkflow-overlay checkflow-expanded" id="cf-overlay">
+        <div class="checkflow-modal-expanded">
+          <div class="checkflow-header">
+            <h3>Envoyer le rapport</h3>
+            <button class="checkflow-close" id="cf-close">${ICONS.close}</button>
+          </div>
+          
+          <div class="checkflow-content-split">
+            <!-- Left: Screenshot with annotation tools -->
+            <div class="checkflow-screenshot-area">
+              <div class="checkflow-screenshot-container">
+                <img src="${captureResult?.screenshot}" alt="Capture d'écran" class="checkflow-screenshot-large">
+              </div>
+              <div class="checkflow-annotation-toolbar">
+                <button type="button" class="checkflow-tool-btn checkflow-tool-highlight" id="cf-annotate">
+                  ${ICONS.annotate}
+                  <span>Surligner</span>
+                </button>
+                <button type="button" class="checkflow-tool-btn" id="cf-retake">
+                  ${ICONS.camera}
+                  <span>Reprendre</span>
+                </button>
+              </div>
+            </div>
+            
+            <!-- Right: Form -->
+            <div class="checkflow-form-area">
+              ${error ? `<div class="checkflow-error">${error}</div>` : ''}
+              
+              <form class="checkflow-form" id="cf-form">
+                <!-- Type Selection -->
+                <div class="checkflow-field">
+                  <label class="checkflow-label">Type de retour</label>
+                  <div class="checkflow-type-grid">
+                    ${this.renderTypeOptions()}
+                  </div>
+                </div>
+
+                <!-- Name -->
+                <div class="checkflow-field">
+                  <label class="checkflow-label">Nom <span class="cf-required">(obligatoire)</span></label>
+                  <input type="text" class="checkflow-input" id="cf-name" 
+                         placeholder="Votre nom" required>
+                </div>
+
+                <!-- Email -->
+                <div class="checkflow-field">
+                  <label class="checkflow-label">Email <span class="cf-required">(obligatoire)</span></label>
+                  <input type="email" class="checkflow-input" id="cf-email" 
+                         placeholder="votre.email@exemple.com" required>
+                </div>
+
+                <!-- Description -->
+                <div class="checkflow-field">
+                  <label class="checkflow-label">Description <span class="cf-required">(obligatoire)</span></label>
+                  <textarea class="checkflow-textarea" id="cf-description" 
+                            placeholder="Quel est le problème ? Que vous attendiez-vous à voir ?" required></textarea>
+                </div>
+
+                <!-- Delete screenshot -->
+                <button type="button" class="checkflow-btn-link" id="cf-delete-screenshot">
+                  Supprimer la capture d'écran
+                </button>
+              </form>
+
+              <div class="checkflow-footer-expanded">
+                <button type="submit" form="cf-form" class="checkflow-btn checkflow-btn-primary" 
+                        id="cf-submit" ${isSubmitting ? 'disabled' : ''} ${this.options.primaryColor ? `style="background-color: ${this.options.primaryColor}; color: ${this.getContrastColor(this.options.primaryColor)};"` : ''}>
+                  ${isSubmitting ? 'Envoi en cours...' : 'Envoyer le rapport'}
+                </button>
+                <button type="button" class="checkflow-btn checkflow-btn-secondary" id="cf-cancel">
+                  Annuler
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderTypeOptions() {
+        const t = this.translations;
+        const types = [
+            { value: 'bug', icon: ICONS.bug, label: t.typeBug },
+            { value: 'feature_request', icon: ICONS.feature, label: t.typeFeature },
+            { value: 'improvement', icon: ICONS.improvement, label: t.typeImprovement },
+            { value: 'question', icon: ICONS.question, label: t.typeQuestion },
+            { value: 'other', icon: ICONS.other, label: t.typeOther },
+        ];
+        return types.map((type, i) => `
+      <label class="checkflow-type-option ${i === 0 ? 'selected' : ''}">
+        <input type="radio" name="cf-type" value="${type.value}" ${i === 0 ? 'checked' : ''} hidden>
+        <span class="checkflow-type-icon">${type.icon}</span>
+        <span class="checkflow-type-label">${type.label}</span>
+      </label>
+    `).join('');
+    }
+    renderCaptureButton() {
+        return `
+      <button type="button" class="checkflow-capture-btn" id="cf-capture">
+        ${ICONS.camera}
+        <span>${this.translations.captureButton}</span>
+      </button>
+    `;
+    }
+    renderScreenshotPreview(screenshot) {
+        return `
+      <div class="checkflow-screenshot">
+        <img src="${screenshot}" alt="Screenshot">
+        <div class="checkflow-screenshot-actions">
+          <button type="button" class="checkflow-screenshot-btn checkflow-annotate-btn" id="cf-annotate">
+            ${ICONS.annotate}
+            <span>Annoter</span>
+          </button>
+          <button type="button" class="checkflow-screenshot-btn" id="cf-retake">
+            ${this.translations.retakeButton}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderSuccess() {
+        const t = this.translations;
+        const { position } = this.options;
+        const panelPosition = position?.includes('left') ? 'bottom-left' : '';
+        return `
+      <div class="checkflow-panel ${panelPosition}" id="cf-panel">
+        <div class="checkflow-body">
+          <div class="checkflow-success">
+            <div class="checkflow-success-icon">${ICONS.check}</div>
+            <h3 class="checkflow-success-title">${t.submitSuccess}</h3>
+            <p class="checkflow-success-message">Merci pour votre retour ! Notre équipe va l'examiner.</p>
+          </div>
+        </div>
+        <div class="checkflow-footer">
+          <button class="checkflow-btn checkflow-btn-primary" id="cf-done">
+            Fermer
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        if (!this.container)
+            return;
+        if (!this.state.isOpen) {
+            this.container.innerHTML = this.renderTrigger();
+        }
+        else {
+            this.container.innerHTML = this.renderTrigger() + this.renderModal();
+        }
+        this.bindEvents();
+    }
+    bindEvents() {
+        if (!this.container)
+            return;
+        // Trigger button
+        const trigger = this.container.querySelector('#cf-trigger');
+        trigger?.addEventListener('click', () => this.open());
+        // Close button
+        const close = this.container.querySelector('#cf-close');
+        close?.addEventListener('click', () => this.close());
+        // Cancel button
+        const cancel = this.container.querySelector('#cf-cancel');
+        cancel?.addEventListener('click', () => this.close());
+        // Done button (success state)
+        const done = this.container.querySelector('#cf-done');
+        done?.addEventListener('click', () => this.close());
+        // Capture button
+        const captureBtn = this.container.querySelector('#cf-capture');
+        captureBtn?.addEventListener('click', () => this.captureScreenshot());
+        // Retake button
+        const retakeBtn = this.container.querySelector('#cf-retake');
+        retakeBtn?.addEventListener('click', () => this.captureScreenshot());
+        // Annotate button
+        const annotateBtn = this.container.querySelector('#cf-annotate');
+        annotateBtn?.addEventListener('click', () => this.openAnnotationEditor());
+        // Delete screenshot button
+        const deleteScreenshotBtn = this.container.querySelector('#cf-delete-screenshot');
+        deleteScreenshotBtn?.addEventListener('click', () => {
+            this.state.captureResult = undefined;
+            this.currentAnnotations = [];
+            this.render();
+        });
+        // Overlay click to close
+        const overlay = this.container.querySelector('#cf-overlay');
+        overlay?.addEventListener('click', (e) => {
+            if (e.target === overlay)
+                this.close();
+        });
+        // Type selection
+        const typeOptions = this.container.querySelectorAll('.checkflow-type-option');
+        typeOptions.forEach((option) => {
+            option.addEventListener('click', () => {
+                typeOptions.forEach((o) => o.classList.remove('selected'));
+                option.classList.add('selected');
+            });
+        });
+        // Form submission
+        const form = this.container.querySelector('#cf-form');
+        form?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.handleSubmit();
+        });
+    }
+    async captureScreenshot() {
+        this.state.isCapturing = true;
+        // Temporarily hide widget for clean screenshot
+        if (this.container) {
+            this.container.style.display = 'none';
+        }
+        try {
+            // Use native browser screen capture API (fast, with permission dialog)
+            const screenshot = await this.captureWithDisplayMedia();
+            if (screenshot) {
+                const captureResult = await this.capture.capture({
+                    includeConsole: true,
+                    includeNetwork: true,
+                    includePerformance: true,
+                });
+                captureResult.screenshot = screenshot;
+                this.state.captureResult = captureResult;
+                // Reset annotations when taking new screenshot
+                this.currentAnnotations = [];
+            }
+        }
+        catch (error) {
+            console.error('[CheckFlow] Screenshot failed:', error);
+            // Check if user denied permission
+            if (error.name === 'NotAllowedError') {
+                this.state.error = 'Permission refusée par l\'utilisateur';
+            }
+            else {
+                this.state.error = this.translations.captureError;
+            }
+        }
+        // Restore widget
+        if (this.container) {
+            this.container.style.display = '';
+        }
+        this.state.isCapturing = false;
+        this.render();
+    }
+    /**
+     * Capture screen using native browser API (getDisplayMedia)
+     * Optimized for instant capture after user allows
+     */
+    async captureWithDisplayMedia() {
+        try {
+            // Request screen capture permission
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: {
+                    displaySurface: 'browser',
+                },
+                audio: false,
+                // @ts-ignore - preferCurrentTab is a newer API
+                preferCurrentTab: true,
+            });
+            const track = stream.getVideoTracks()[0];
+            // Use ImageCapture API for instant capture (no video element needed)
+            // @ts-ignore - ImageCapture may not be in all TS definitions
+            if (typeof ImageCapture !== 'undefined') {
+                try {
+                    // @ts-ignore
+                    const imageCapture = new ImageCapture(track);
+                    const bitmap = await imageCapture.grabFrame();
+                    // Draw bitmap to canvas
+                    const canvas = document.createElement('canvas');
+                    canvas.width = bitmap.width;
+                    canvas.height = bitmap.height;
+                    const ctx = canvas.getContext('2d');
+                    if (ctx) {
+                        ctx.drawImage(bitmap, 0, 0);
+                        track.stop();
+                        stream.getTracks().forEach(t => t.stop());
+                        return canvas.toDataURL('image/png', 0.9);
+                    }
+                }
+                catch (e) {
+                    // Fall back to video method
+                }
+            }
+            // Fallback: Use video element with minimal delay
+            const video = document.createElement('video');
+            video.srcObject = stream;
+            video.muted = true;
+            video.playsInline = true;
+            await video.play();
+            // Capture immediately after play starts
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth || 1920;
+            canvas.height = video.videoHeight || 1080;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                track.stop();
+                throw new Error('Could not get canvas context');
+            }
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            // Stop immediately
+            track.stop();
+            stream.getTracks().forEach(t => t.stop());
+            return canvas.toDataURL('image/png', 0.9);
+        }
+        catch (error) {
+            console.error('[CheckFlow] getDisplayMedia failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * Open the annotation editor for the current screenshot
+     */
+    async openAnnotationEditor() {
+        const screenshot = this.state.captureResult?.screenshot;
+        if (!screenshot)
+            return;
+        // Hide the widget modal while annotating
+        if (this.container) {
+            this.container.style.display = 'none';
+        }
+        this.annotationEditor = new AnnotationEditor({
+            tools: ['rectangle', 'ellipse', 'arrow', 'highlight', 'blur', 'text', 'freehand'],
+            defaultStyle: {
+                strokeColor: '#FF3B30',
+                strokeWidth: 3,
+                fillColor: 'transparent',
+                opacity: 1,
+                fontSize: 16,
+            },
+            onSave: (annotations, annotatedImage) => {
+                // Update screenshot with annotated version
+                if (this.state.captureResult) {
+                    this.state.captureResult.screenshot = annotatedImage;
+                }
+                this.currentAnnotations = annotations;
+                // Restore and re-render widget
+                if (this.container) {
+                    this.container.style.display = '';
+                }
+                this.render();
+                this.annotationEditor = null;
+            },
+            onCancel: () => {
+                // Restore widget without changes
+                if (this.container) {
+                    this.container.style.display = '';
+                }
+                this.annotationEditor = null;
+            },
+        });
+        await this.annotationEditor.open(screenshot);
+    }
+    async handleSubmit() {
+        if (!this.container)
+            return;
+        const nameInput = this.container.querySelector('#cf-name');
+        const emailInput = this.container.querySelector('#cf-email');
+        const descInput = this.container.querySelector('#cf-description');
+        const typeInput = this.container.querySelector('input[name="cf-type"]:checked');
+        const name = nameInput?.value.trim();
+        const email = emailInput?.value.trim();
+        const description = descInput?.value.trim();
+        const feedbackType = (typeInput?.value || 'bug');
+        // Validation
+        if (!name) {
+            this.state.error = 'Veuillez entrer votre nom';
+            this.render();
+            return;
+        }
+        if (!email) {
+            this.state.error = 'Veuillez entrer votre email';
+            this.render();
+            return;
+        }
+        if (!description) {
+            this.state.error = 'Veuillez décrire le problème';
+            this.render();
+            return;
+        }
+        this.state.isSubmitting = true;
+        this.state.error = undefined;
+        this.render();
+        try {
+            const submitData = {
+                name,
+                email,
+                description,
+                type: feedbackType,
+                priority: 'medium',
+                screenshot: this.state.captureResult?.screenshot,
+                annotations: this.currentAnnotations.length > 0 ? this.currentAnnotations : undefined,
+                includeConsole: true,
+                includeNetwork: true,
+            };
+            if (this.options.onSubmit) {
+                await this.options.onSubmit(submitData);
+            }
+            // Show success
+            this.state.isSubmitting = false;
+            this.container.innerHTML = this.renderTrigger() + this.renderSuccess();
+            this.bindEvents();
+            // Auto-close after delay
+            setTimeout(() => this.close(), 3000);
+        }
+        catch (error) {
+            this.state.isSubmitting = false;
+            this.state.error = error.message || this.translations.submitError;
+            this.render();
+        }
+    }
+    /**
+     * Update widget options
+     */
+    setOptions(options) {
+        this.options = { ...this.options, ...options };
+        if (options.translations) {
+            this.translations = { ...this.translations, ...options.translations };
+        }
+        this.render();
+    }
+    /**
+     * Get capture context
+     */
+    getCapture() {
+        return this.capture;
+    }
+}
+
+/**
+ * Session Recording Module
+ * Captures user interactions for replay
+ */
+const DEFAULT_CONFIG = {
+    enabled: true,
+    recordMouse: true,
+    recordScroll: true,
+    recordInput: true,
+    recordMutations: true,
+    maskInputs: true,
+    maskSelectors: ['[type="password"]', '[data-sensitive]', '.sensitive'],
+    maxDurationSeconds: 300,
+    sampleRate: 1.0,
+};
+class SessionRecording {
+    constructor(config = {}) {
+        this.events = [];
+        this.startTime = 0;
+        this.isRecording = false;
+        this.mutationObserver = null;
+        this.listeners = [];
+        this.config = { ...DEFAULT_CONFIG, ...config };
+        this.sessionId = this.generateSessionId();
+    }
+    generateSessionId() {
+        return `sess_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+    }
+    /**
+     * Start recording the session
+     */
+    start() {
+        if (this.isRecording || !this.config.enabled)
+            return;
+        this.isRecording = true;
+        this.startTime = Date.now();
+        this.events = [];
+        // Record initial DOM snapshot
+        this.recordSnapshot();
+        // Setup event listeners
+        if (this.config.recordMouse) {
+            this.setupMouseTracking();
+        }
+        if (this.config.recordScroll) {
+            this.setupScrollTracking();
+        }
+        if (this.config.recordInput) {
+            this.setupInputTracking();
+        }
+        if (this.config.recordMutations) {
+            this.setupMutationObserver();
+        }
+        // Track navigation
+        this.setupNavigationTracking();
+        // Track resize
+        this.setupResizeTracking();
+        // Auto-stop after max duration
+        setTimeout(() => {
+            if (this.isRecording) {
+                this.stop();
+            }
+        }, this.config.maxDurationSeconds * 1000);
+    }
+    /**
+     * Stop recording
+     */
+    stop() {
+        if (!this.isRecording)
+            return;
+        this.isRecording = false;
+        // Remove all event listeners
+        this.listeners.forEach(({ element, event, handler }) => {
+            element.removeEventListener(event, handler);
+        });
+        this.listeners = [];
+        // Disconnect mutation observer
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+    }
+    /**
+     * Get session ID
+     */
+    getSessionId() {
+        return this.sessionId;
+    }
+    /**
+     * Get recorded events
+     */
+    getEvents() {
+        return [...this.events];
+    }
+    /**
+     * Get recording duration in seconds
+     */
+    getDuration() {
+        if (!this.startTime)
+            return 0;
+        return Math.round((Date.now() - this.startTime) / 1000);
+    }
+    /**
+     * Clear events (for chunked uploads)
+     */
+    clearEvents() {
+        this.events = [];
+    }
+    /**
+     * Get recording data for submission
+     */
+    getRecordingData() {
+        if (this.events.length === 0)
+            return null;
+        return {
+            events: [...this.events],
+            sessionId: this.sessionId,
+            duration: this.getDuration(),
+        };
+    }
+    addEvent(type, data) {
+        // Sample rate filtering
+        if (Math.random() > this.config.sampleRate)
+            return;
+        this.events.push({
+            type,
+            timestamp: Date.now() - this.startTime,
+            data,
+        });
+        // Limit event buffer size
+        if (this.events.length > 10000) {
+            this.events.shift();
+        }
+    }
+    recordSnapshot() {
+        // Record initial page state
+        this.addEvent('mutation', {
+            action: 'snapshot',
+            html: this.sanitizeHTML(document.documentElement.outerHTML),
+            url: window.location.href,
+            title: document.title,
+            viewport: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            },
+        });
+    }
+    setupMouseTracking() {
+        let lastX = 0, lastY = 0;
+        let throttleTimer = null;
+        const handler = (e) => {
+            // Throttle to ~30fps
+            if (throttleTimer)
+                return;
+            throttleTimer = window.setTimeout(() => {
+                throttleTimer = null;
+            }, 33);
+            // Only record if position changed significantly
+            if (Math.abs(e.clientX - lastX) > 5 || Math.abs(e.clientY - lastY) > 5) {
+                lastX = e.clientX;
+                lastY = e.clientY;
+                this.addEvent('mouse', {
+                    action: 'move',
+                    x: e.clientX,
+                    y: e.clientY,
+                });
+            }
+        };
+        const clickHandler = (e) => {
+            this.addEvent('mouse', {
+                action: 'click',
+                x: e.clientX,
+                y: e.clientY,
+                target: this.getElementSelector(e.target),
+            });
+        };
+        document.addEventListener('mousemove', handler, { passive: true });
+        document.addEventListener('click', clickHandler, { passive: true });
+        this.listeners.push({ element: document, event: 'mousemove', handler: handler }, { element: document, event: 'click', handler: clickHandler });
+    }
+    setupScrollTracking() {
+        let throttleTimer = null;
+        const handler = () => {
+            if (throttleTimer)
+                return;
+            throttleTimer = window.setTimeout(() => {
+                throttleTimer = null;
+            }, 100);
+            this.addEvent('scroll', {
+                x: window.scrollX,
+                y: window.scrollY,
+            });
+        };
+        window.addEventListener('scroll', handler, { passive: true });
+        this.listeners.push({ element: window, event: 'scroll', handler });
+    }
+    setupInputTracking() {
+        const handler = (e) => {
+            const target = e.target;
+            if (!target.tagName)
+                return;
+            const isSensitive = this.isSensitiveElement(target);
+            this.addEvent('input', {
+                selector: this.getElementSelector(target),
+                value: isSensitive ? '••••••••' : target.value?.substring(0, 100),
+                type: target.type || 'text',
+            });
+        };
+        document.addEventListener('input', handler, { passive: true });
+        this.listeners.push({ element: document, event: 'input', handler });
+    }
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver((mutations) => {
+            const changes = [];
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            changes.push({
+                                action: 'add',
+                                target: this.getElementSelector(mutation.target),
+                                html: this.sanitizeHTML(node.outerHTML || ''),
+                            });
+                        }
+                    });
+                    mutation.removedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            changes.push({
+                                action: 'remove',
+                                target: this.getElementSelector(mutation.target),
+                                selector: this.getElementSelector(node),
+                            });
+                        }
+                    });
+                }
+                else if (mutation.type === 'attributes') {
+                    changes.push({
+                        action: 'attribute',
+                        target: this.getElementSelector(mutation.target),
+                        attribute: mutation.attributeName,
+                        value: mutation.target.getAttribute(mutation.attributeName),
+                    });
+                }
+            });
+            if (changes.length > 0) {
+                this.addEvent('mutation', { changes });
+            }
+        });
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class', 'style', 'src', 'href'],
+        });
+    }
+    setupNavigationTracking() {
+        const handler = () => {
+            this.addEvent('navigation', {
+                url: window.location.href,
+                title: document.title,
+            });
+        };
+        window.addEventListener('popstate', handler);
+        this.listeners.push({ element: window, event: 'popstate', handler });
+    }
+    setupResizeTracking() {
+        let throttleTimer = null;
+        const handler = () => {
+            if (throttleTimer)
+                return;
+            throttleTimer = window.setTimeout(() => {
+                throttleTimer = null;
+            }, 200);
+            this.addEvent('resize', {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        window.addEventListener('resize', handler, { passive: true });
+        this.listeners.push({ element: window, event: 'resize', handler });
+    }
+    getElementSelector(element) {
+        if (!element || !element.tagName)
+            return '';
+        const parts = [];
+        let current = element;
+        while (current && current.tagName !== 'HTML') {
+            let selector = current.tagName.toLowerCase();
+            if (current.id) {
+                selector += `#${current.id}`;
+                parts.unshift(selector);
+                break;
+            }
+            else if (current.className && typeof current.className === 'string') {
+                const classes = current.className.trim().split(/\s+/).slice(0, 2);
+                if (classes.length > 0 && classes[0]) {
+                    selector += `.${classes.join('.')}`;
+                }
+            }
+            parts.unshift(selector);
+            current = current.parentElement;
+        }
+        return parts.slice(-4).join(' > ');
+    }
+    isSensitiveElement(element) {
+        if (this.config.maskInputs) {
+            const type = element.getAttribute('type');
+            if (type === 'password' || type === 'credit-card')
+                return true;
+        }
+        return this.config.maskSelectors.some((selector) => {
+            try {
+                return element.matches(selector);
+            }
+            catch {
+                return false;
+            }
+        });
+    }
+    sanitizeHTML(html) {
+        // Remove script contents
+        html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '<script></script>');
+        // Mask sensitive inputs
+        if (this.config.maskInputs) {
+            html = html.replace(/(<input[^>]*type=["']password["'][^>]*value=["'])[^"']*["']/gi, '$1••••••••"');
+        }
+        // Truncate if too large
+        if (html.length > 500000) {
+            html = html.substring(0, 500000) + '<!-- truncated -->';
+        }
+        return html;
+    }
+}
+
+/**
+ * CheckFlow Privacy Module Types
+ * Configuration and types for automatic PII masking
+ */
+const DEFAULT_PRIVACY_CONFIG = {
+    enabled: true,
+    autoMask: {
+        emails: true,
+        creditCards: true,
+        phoneNumbers: true,
+        passwords: true,
+        socialSecurity: true,
+        ipAddresses: false,
+        customPatterns: [],
+    },
+    excludeSelectors: [],
+    includeSelectors: [],
+    maskChar: '•',
+    maskLength: 'preserve',
+    fixedMaskLength: 8,
+};
+const SENSITIVE_INPUT_TYPES = [
+    'password',
+    'email',
+    'tel',
+    'credit-card',
+    'cc-number',
+    'cc-csc',
+    'cc-exp',
+];
+const SENSITIVE_AUTOCOMPLETE_VALUES = [
+    'cc-number',
+    'cc-csc',
+    'cc-exp',
+    'cc-exp-month',
+    'cc-exp-year',
+    'cc-name',
+    'cc-type',
+    'new-password',
+    'current-password',
+];
+
+/**
+ * CheckFlow Privacy Detector
+ * Regex patterns for detecting PII (Personally Identifiable Information)
+ */
+const PATTERNS = {
+    email: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
+    creditCard: /\b(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})\b/g,
+    creditCardSpaced: /\b(?:\d{4}[-\s]?){3}\d{4}\b/g,
+    phone: /(?:\+?1[-.\s]?)?(?:\([0-9]{3}\)|[0-9]{3})[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}\b/g,
+    phoneFR: /(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}/g,
+    ssn: /\b\d{3}[-]?\d{2}[-]?\d{4}\b/g,
+    ipv4: /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/g,
+    ipv6: /\b(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}\b/g,
+};
+class PrivacyDetector {
+    constructor(customPatterns = []) {
+        this.customPatterns = [];
+        this.customPatterns = customPatterns;
+    }
+    /**
+     * Add a custom pattern
+     */
+    addPattern(pattern) {
+        this.customPatterns.push(pattern);
+    }
+    /**
+     * Detect all PII in a text string
+     */
+    detectAll(text, options = {}) {
+        const detections = [];
+        const { emails = true, creditCards = true, phoneNumbers = true, ssn = true, ipAddresses = false, } = options;
+        if (emails) {
+            detections.push(...this.detectEmails(text));
+        }
+        if (creditCards) {
+            detections.push(...this.detectCreditCards(text));
+        }
+        if (phoneNumbers) {
+            detections.push(...this.detectPhoneNumbers(text));
+        }
+        if (ssn) {
+            detections.push(...this.detectSSN(text));
+        }
+        if (ipAddresses) {
+            detections.push(...this.detectIPAddresses(text));
+        }
+        // Custom patterns
+        for (const custom of this.customPatterns) {
+            detections.push(...this.detectCustom(text, custom));
+        }
+        // Sort by start index and remove overlaps
+        return this.removeOverlaps(detections);
+    }
+    /**
+     * Detect email addresses
+     */
+    detectEmails(text) {
+        return this.findMatches(text, PATTERNS.email, 'email');
+    }
+    /**
+     * Detect credit card numbers
+     */
+    detectCreditCards(text) {
+        const detections = [];
+        // Standard format
+        detections.push(...this.findMatches(text, PATTERNS.creditCard, 'credit_card'));
+        // Spaced/dashed format
+        detections.push(...this.findMatches(text, PATTERNS.creditCardSpaced, 'credit_card'));
+        return detections;
+    }
+    /**
+     * Detect phone numbers
+     */
+    detectPhoneNumbers(text) {
+        const detections = [];
+        // US format
+        detections.push(...this.findMatches(text, PATTERNS.phone, 'phone'));
+        // French format
+        detections.push(...this.findMatches(text, PATTERNS.phoneFR, 'phone'));
+        return detections;
+    }
+    /**
+     * Detect Social Security Numbers
+     */
+    detectSSN(text) {
+        return this.findMatches(text, PATTERNS.ssn, 'ssn');
+    }
+    /**
+     * Detect IP addresses
+     */
+    detectIPAddresses(text) {
+        const detections = [];
+        detections.push(...this.findMatches(text, PATTERNS.ipv4, 'ip_address'));
+        detections.push(...this.findMatches(text, PATTERNS.ipv6, 'ip_address'));
+        return detections;
+    }
+    /**
+     * Detect custom pattern
+     */
+    detectCustom(text, pattern) {
+        return this.findMatches(text, pattern.pattern, 'custom');
+    }
+    /**
+     * Find all matches of a pattern in text
+     */
+    findMatches(text, pattern, type) {
+        const detections = [];
+        const regex = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            detections.push({
+                type,
+                value: match[0],
+                masked: '', // Will be filled by masker
+                startIndex: match.index,
+                endIndex: match.index + match[0].length,
+            });
+        }
+        return detections;
+    }
+    /**
+     * Remove overlapping detections (keep the longer one)
+     */
+    removeOverlaps(detections) {
+        if (detections.length <= 1)
+            return detections;
+        // Sort by start index
+        const sorted = [...detections].sort((a, b) => a.startIndex - b.startIndex);
+        const result = [sorted[0]];
+        for (let i = 1; i < sorted.length; i++) {
+            const current = sorted[i];
+            const last = result[result.length - 1];
+            // Check for overlap
+            if (current.startIndex < last.endIndex) {
+                // Keep the longer one
+                if (current.endIndex - current.startIndex > last.endIndex - last.startIndex) {
+                    result[result.length - 1] = current;
+                }
+            }
+            else {
+                result.push(current);
+            }
+        }
+        return result;
+    }
+}
+
+/**
+ * CheckFlow Privacy Masker
+ * Applies masking to detected PII in text and DOM elements
+ */
+class PrivacyMasker {
+    constructor(config = {}) {
+        this.config = { ...DEFAULT_PRIVACY_CONFIG, ...config };
+        this.detector = new PrivacyDetector(this.config.autoMask.customPatterns);
+    }
+    /**
+     * Update configuration
+     */
+    configure(config) {
+        this.config = { ...this.config, ...config };
+        if (config.autoMask?.customPatterns) {
+            this.detector = new PrivacyDetector(config.autoMask.customPatterns);
+        }
+    }
+    /**
+     * Mask PII in a text string
+     */
+    maskText(text) {
+        if (!this.config.enabled || !text) {
+            return { original: text, masked: text, detections: [] };
+        }
+        const detections = this.detector.detectAll(text, {
+            emails: this.config.autoMask.emails,
+            creditCards: this.config.autoMask.creditCards,
+            phoneNumbers: this.config.autoMask.phoneNumbers,
+            ssn: this.config.autoMask.socialSecurity,
+            ipAddresses: this.config.autoMask.ipAddresses,
+        });
+        if (detections.length === 0) {
+            return { original: text, masked: text, detections: [] };
+        }
+        // Apply masking
+        let masked = text;
+        let offset = 0;
+        for (const detection of detections) {
+            const maskValue = this.getMaskValue(detection.value);
+            detection.masked = maskValue;
+            const start = detection.startIndex + offset;
+            const end = detection.endIndex + offset;
+            masked = masked.substring(0, start) + maskValue + masked.substring(end);
+            offset += maskValue.length - detection.value.length;
+        }
+        return { original: text, masked, detections };
+    }
+    /**
+     * Generate mask value for a detected PII
+     */
+    getMaskValue(value) {
+        const { maskChar, maskLength, fixedMaskLength } = this.config;
+        if (maskLength === 'fixed') {
+            return maskChar.repeat(fixedMaskLength);
+        }
+        // Preserve length - show first and last chars for context
+        if (value.length <= 4) {
+            return maskChar.repeat(value.length);
+        }
+        // For emails, preserve domain
+        if (value.includes('@')) {
+            const [local, domain] = value.split('@');
+            const maskedLocal = local[0] + maskChar.repeat(Math.max(local.length - 2, 1)) + (local.length > 1 ? local[local.length - 1] : '');
+            return `${maskedLocal}@${domain}`;
+        }
+        // For credit cards, show last 4 digits
+        if (value.replace(/[\s-]/g, '').length >= 13) {
+            const digits = value.replace(/[\s-]/g, '');
+            return maskChar.repeat(digits.length - 4) + digits.slice(-4);
+        }
+        // Default: mask middle, show first and last
+        return value[0] + maskChar.repeat(value.length - 2) + value[value.length - 1];
+    }
+    /**
+     * Process DOM elements for privacy masking
+     * Returns a cloned document with masked content
+     */
+    processDOM(doc) {
+        const result = {
+            elementsProcessed: 0,
+            elementsMasked: 0,
+            detections: [],
+        };
+        if (!this.config.enabled) {
+            return result;
+        }
+        // Process text nodes
+        const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, null);
+        const textNodes = [];
+        let node;
+        while ((node = walker.nextNode())) {
+            textNodes.push(node);
+        }
+        for (const textNode of textNodes) {
+            result.elementsProcessed++;
+            const text = textNode.textContent || '';
+            if (!text.trim())
+                continue;
+            // Skip if in excluded selector
+            if (this.isExcluded(textNode.parentElement))
+                continue;
+            const maskResult = this.maskText(text);
+            if (maskResult.detections.length > 0) {
+                textNode.textContent = maskResult.masked;
+                result.elementsMasked++;
+                for (const detection of maskResult.detections) {
+                    result.detections.push({
+                        selector: this.getSelector(textNode.parentElement),
+                        type: detection.type,
+                        originalText: detection.value,
+                        maskedText: detection.masked,
+                    });
+                }
+            }
+        }
+        // Process input values
+        const inputs = doc.querySelectorAll('input, textarea');
+        inputs.forEach((input) => {
+            result.elementsProcessed++;
+            const el = input;
+            // Check if sensitive input type
+            if (this.isSensitiveInput(el)) {
+                const value = el.value;
+                if (value) {
+                    el.value = this.config.maskChar.repeat(Math.min(value.length, 12));
+                    result.elementsMasked++;
+                    result.detections.push({
+                        selector: this.getSelector(el),
+                        type: 'password',
+                        originalText: '[REDACTED]',
+                        maskedText: el.value,
+                    });
+                }
+            }
+            else if (!this.isExcluded(el)) {
+                // Mask PII in regular inputs
+                const maskResult = this.maskText(el.value);
+                if (maskResult.detections.length > 0) {
+                    el.value = maskResult.masked;
+                    result.elementsMasked++;
+                    for (const detection of maskResult.detections) {
+                        result.detections.push({
+                            selector: this.getSelector(el),
+                            type: detection.type,
+                            originalText: detection.value,
+                            maskedText: detection.masked,
+                        });
+                    }
+                }
+            }
+        });
+        // Process data attributes that might contain PII
+        const elementsWithData = doc.querySelectorAll('[data-email], [data-phone], [data-user]');
+        elementsWithData.forEach((el) => {
+            result.elementsProcessed++;
+            if (this.isExcluded(el))
+                return;
+            const attrs = ['data-email', 'data-phone', 'data-user'];
+            for (const attr of attrs) {
+                const value = el.getAttribute(attr);
+                if (value) {
+                    const maskResult = this.maskText(value);
+                    if (maskResult.detections.length > 0) {
+                        el.setAttribute(attr, maskResult.masked);
+                        result.elementsMasked++;
+                    }
+                }
+            }
+        });
+        return result;
+    }
+    /**
+     * Check if element should be excluded from masking
+     */
+    isExcluded(element) {
+        if (!element)
+            return false;
+        // Check exclude selectors
+        for (const selector of this.config.excludeSelectors) {
+            if (element.matches(selector) || element.closest(selector)) {
+                return true;
+            }
+        }
+        // Check data-checkflow-ignore attribute
+        if (element.hasAttribute('data-checkflow-ignore') ||
+            element.closest('[data-checkflow-ignore]')) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Check if input is a sensitive type
+     */
+    isSensitiveInput(input) {
+        const type = input.getAttribute('type') || 'text';
+        const autocomplete = input.getAttribute('autocomplete') || '';
+        const name = input.getAttribute('name') || '';
+        // Check type
+        if (SENSITIVE_INPUT_TYPES.includes(type.toLowerCase())) {
+            return true;
+        }
+        // Check autocomplete
+        if (SENSITIVE_AUTOCOMPLETE_VALUES.some(val => autocomplete.toLowerCase().includes(val))) {
+            return true;
+        }
+        // Check name patterns
+        const sensitiveNames = ['password', 'pwd', 'pass', 'secret', 'credit', 'card', 'cvv', 'cvc', 'ssn'];
+        if (sensitiveNames.some(n => name.toLowerCase().includes(n))) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Generate CSS selector for element
+     */
+    getSelector(element) {
+        if (!element)
+            return '';
+        if (element.id) {
+            return `#${element.id}`;
+        }
+        const path = [];
+        let current = element;
+        while (current && current !== document.body) {
+            let selector = current.tagName.toLowerCase();
+            if (current.className) {
+                const classes = current.className.toString().trim().split(/\s+/).slice(0, 2);
+                if (classes.length) {
+                    selector += '.' + classes.join('.');
+                }
+            }
+            path.unshift(selector);
+            current = current.parentElement;
+            if (path.length >= 3)
+                break;
+        }
+        return path.join(' > ');
+    }
+    /**
+     * Get current configuration
+     */
+    getConfig() {
+        return { ...this.config };
+    }
+}
+
+/**
+ * Analytics Tracker for CheckFlow SDK
+ * Automatically tracks user sessions and interactions for analytics
+ */
+// ==================== Analytics Tracker ====================
+class AnalyticsTracker {
+    constructor(apiClient, options = {}) {
+        this.isActive = false;
+        this.currentPageUrl = '';
+        this.pageLoadStart = 0;
+        // Batching
+        this.interactionBuffer = [];
+        this.batchTimer = null;
+        // Event tracking state
+        this.scrollEvents = 0;
+        this.lastScrollTime = 0;
+        this.isFirstPageView = true;
+        // ==================== Private Methods - Event Handlers ====================
+        this.handleClick = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const interaction = {
+                pageUrl: window.location.href,
+                pageTitle: document.title,
+                eventType: 'click',
+                elementSelector: this.getElementSelector(target),
+                elementText: this.getElementText(target),
+                mouseX: event.clientX,
+                mouseY: event.clientY
+            };
+            this.queueInteraction(interaction);
+        };
+        this.handleScroll = () => {
+            const now = Date.now();
+            // Throttle scroll events
+            if (now - this.lastScrollTime < this.options.throttleScrollMs)
+                return;
+            if (this.scrollEvents >= this.options.maxScrollEvents)
+                return;
+            this.lastScrollTime = now;
+            this.scrollEvents++;
+            const scrollDepth = this.calculateScrollDepth();
+            const interaction = {
+                pageUrl: window.location.href,
+                pageTitle: document.title,
+                eventType: 'scroll',
+                scrollDepth: scrollDepth
+            };
+            this.queueInteraction(interaction);
+        };
+        this.handleFormFocus = (event) => {
+            const target = event.target;
+            if (!this.isFormElement(target))
+                return;
+            const interaction = {
+                pageUrl: window.location.href,
+                pageTitle: document.title,
+                eventType: 'form_interaction',
+                elementSelector: this.getElementSelector(target),
+                elementText: this.getElementText(target)
+            };
+            this.queueInteraction(interaction);
+        };
+        this.handleFormChange = (event) => {
+            const target = event.target;
+            if (!this.isFormElement(target))
+                return;
+            // Don't capture actual form values for privacy
+            const interaction = {
+                pageUrl: window.location.href,
+                pageTitle: document.title,
+                eventType: 'form_interaction',
+                elementSelector: this.getElementSelector(target)
+            };
+            this.queueInteraction(interaction);
+        };
+        this.handleError = (event) => {
+            const interaction = {
+                pageUrl: window.location.href,
+                pageTitle: document.title,
+                eventType: 'error',
+                errorMessage: event.message,
+                errorStack: event.error?.stack
+            };
+            this.queueInteraction(interaction);
+        };
+        this.handleUnhandledRejection = (event) => {
+            const interaction = {
+                pageUrl: window.location.href,
+                pageTitle: document.title,
+                eventType: 'error',
+                errorMessage: `Unhandled Promise Rejection: ${event.reason}`,
+                errorStack: event.reason?.stack
+            };
+            this.queueInteraction(interaction);
+        };
+        this.handlePageUnload = () => {
+            // Send any pending interactions synchronously
+            if (this.interactionBuffer.length > 0) {
+                // Use sendBeacon for reliable delivery
+                const data = JSON.stringify({ interactions: this.interactionBuffer });
+                const url = `${this.apiClient.getBaseUrl()}/api/v1/analytics/sessions/${this.sessionId}/interactions/batch`;
+                if (navigator.sendBeacon) {
+                    navigator.sendBeacon(url, data);
+                }
+            }
+        };
+        this.handleVisibilityChange = () => {
+            if (document.hidden) {
+                // Page became hidden - flush interactions
+                this.flushInteractions();
+            }
+        };
+        this.apiClient = apiClient;
+        this.options = {
+            batchSize: 10,
+            batchTimeout: 5000,
+            trackClicks: true,
+            trackScrolling: true,
+            trackFormInteractions: true,
+            trackErrors: true,
+            trackPerformance: true,
+            throttleScrollMs: 1000,
+            maxScrollEvents: 50,
+            debug: false,
+            ...options
+        };
+        this.sessionId = this.generateSessionId();
+        this.projectId = apiClient.getProjectId() || '';
+        this.userFingerprint = this.generateUserFingerprint();
+        this.sessionStartTime = Date.now();
+    }
+    // ==================== Public Methods ====================
+    async startTracking() {
+        if (this.isActive) {
+            this.log('Analytics tracking already active');
+            return;
+        }
+        try {
+            // Create session with backend
+            await this.createSession();
+            // Setup event listeners
+            this.setupEventListeners();
+            // Track initial page view
+            this.trackPageView();
+            this.isActive = true;
+            this.log('Analytics tracking started', { sessionId: this.sessionId });
+        }
+        catch (error) {
+            console.error('Failed to start analytics tracking:', error);
+            throw error;
+        }
+    }
+    async stopTracking() {
+        if (!this.isActive)
+            return;
+        try {
+            // Flush any remaining interactions
+            await this.flushInteractions();
+            // Update session with end time
+            await this.updateSessionEnd();
+            // Remove event listeners
+            this.removeEventListeners();
+            // Clear timers
+            if (this.batchTimer) {
+                clearTimeout(this.batchTimer);
+                this.batchTimer = null;
+            }
+            // Stop performance observer
+            if (this.performanceObserver) {
+                this.performanceObserver.disconnect();
+            }
+            this.isActive = false;
+            this.log('Analytics tracking stopped');
+        }
+        catch (error) {
+            console.error('Error stopping analytics tracking:', error);
+        }
+    }
+    // ==================== Private Methods - Session Management ====================
+    async createSession() {
+        const sessionData = {
+            sessionId: this.sessionId,
+            projectId: this.projectId,
+            userFingerprint: this.userFingerprint,
+            // Technical context
+            userAgent: navigator.userAgent,
+            viewport: this.getViewportInfo(),
+            browser: this.getBrowserInfo(),
+            os: this.getOSInfo(),
+            locale: navigator.language,
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // Session data
+            entryUrl: window.location.href,
+            referrer: document.referrer || undefined
+        };
+        // Try to get geolocation (with permission)
+        try {
+            const geoData = await this.getGeolocation();
+            if (geoData) {
+                sessionData.latitude = geoData.latitude;
+                sessionData.longitude = geoData.longitude;
+            }
+        }
+        catch (error) {
+            // Geolocation failed or denied - continue without it
+            this.log('Geolocation not available:', error);
+        }
+        const response = await this.apiClient.post('/api/v1/analytics/sessions', sessionData);
+        this.log('Session created:', response);
+    }
+    async updateSessionEnd() {
+        const sessionDuration = Math.floor((Date.now() - this.sessionStartTime) / 1000);
+        const updateData = {
+            sessionEnd: new Date().toISOString(),
+            durationSeconds: sessionDuration,
+            pageViews: this.getPageViewCount(),
+            hasFeedback: false, // Will be updated when feedback is created
+            hasErrors: this.scrollEvents > 0 // Simple heuristic for now
+        };
+        try {
+            await this.apiClient.put(`/api/v1/analytics/sessions/${this.sessionId}`, updateData);
+            this.log('Session updated:', updateData);
+        }
+        catch (error) {
+            console.error('Failed to update session:', error);
+        }
+    }
+    // ==================== Private Methods - Event Setup ====================
+    setupEventListeners() {
+        // Page navigation
+        this.currentPageUrl = window.location.href;
+        window.addEventListener('beforeunload', this.handlePageUnload);
+        window.addEventListener('pagehide', this.handlePageUnload);
+        // Page visibility changes
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        if (this.options.trackClicks) {
+            document.addEventListener('click', this.handleClick, { passive: true });
+        }
+        if (this.options.trackScrolling) {
+            window.addEventListener('scroll', this.handleScroll, { passive: true });
+        }
+        if (this.options.trackFormInteractions) {
+            document.addEventListener('focusin', this.handleFormFocus, { passive: true });
+            document.addEventListener('change', this.handleFormChange, { passive: true });
+        }
+        if (this.options.trackErrors) {
+            window.addEventListener('error', this.handleError);
+            window.addEventListener('unhandledrejection', this.handleUnhandledRejection);
+        }
+        if (this.options.trackPerformance && 'PerformanceObserver' in window) {
+            this.setupPerformanceTracking();
+        }
+        // Track SPA navigation
+        this.setupSPATracking();
+    }
+    removeEventListeners() {
+        window.removeEventListener('beforeunload', this.handlePageUnload);
+        window.removeEventListener('pagehide', this.handlePageUnload);
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        document.removeEventListener('click', this.handleClick);
+        window.removeEventListener('scroll', this.handleScroll);
+        document.removeEventListener('focusin', this.handleFormFocus);
+        document.removeEventListener('change', this.handleFormChange);
+        window.removeEventListener('error', this.handleError);
+        window.removeEventListener('unhandledrejection', this.handleUnhandledRejection);
+    }
+    // ==================== Private Methods - SPA & Performance ====================
+    setupSPATracking() {
+        // Track URL changes for SPAs
+        let currentUrl = window.location.href;
+        const checkUrlChange = () => {
+            const newUrl = window.location.href;
+            if (newUrl !== currentUrl) {
+                currentUrl = newUrl;
+                this.trackPageView();
+            }
+        };
+        // Listen for pushState/replaceState
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+        history.pushState = function (...args) {
+            originalPushState.apply(this, args);
+            setTimeout(checkUrlChange, 0);
+        };
+        history.replaceState = function (...args) {
+            originalReplaceState.apply(this, args);
+            setTimeout(checkUrlChange, 0);
+        };
+        // Listen for popstate
+        window.addEventListener('popstate', checkUrlChange);
+    }
+    setupPerformanceTracking() {
+        try {
+            this.performanceObserver = new PerformanceObserver((list) => {
+                const entries = list.getEntries();
+                for (const entry of entries) {
+                    if (entry.entryType === 'navigation') {
+                        this.trackPageLoadPerformance(entry);
+                    }
+                }
+            });
+            this.performanceObserver.observe({
+                entryTypes: ['navigation', 'paint', 'largest-contentful-paint']
+            });
+        }
+        catch (error) {
+            this.log('Performance tracking setup failed:', error);
+        }
+    }
+    trackPageView() {
+        const loadTime = this.isFirstPageView ? this.getPageLoadTime() : undefined;
+        const domReadyTime = this.isFirstPageView ? this.getDOMReadyTime() : undefined;
+        const interaction = {
+            pageUrl: window.location.href,
+            pageTitle: document.title,
+            eventType: 'page_view',
+            loadTime,
+            domReadyTime
+        };
+        this.queueInteraction(interaction);
+        this.isFirstPageView = false;
+        // Reset scroll tracking for new page
+        this.scrollEvents = 0;
+    }
+    trackPageLoadPerformance(timing) {
+        const loadTime = Math.round(timing.loadEventEnd - timing.loadEventStart);
+        const domReadyTime = Math.round(timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart);
+        // Update the most recent page_view interaction with performance data
+        const lastInteraction = this.interactionBuffer[this.interactionBuffer.length - 1];
+        if (lastInteraction && lastInteraction.eventType === 'page_view') {
+            lastInteraction.loadTime = loadTime;
+            lastInteraction.domReadyTime = domReadyTime;
+        }
+    }
+    // ==================== Private Methods - Batching ====================
+    queueInteraction(interaction) {
+        this.interactionBuffer.push(interaction);
+        this.log('Interaction queued:', interaction);
+        // Flush if buffer is full
+        if (this.interactionBuffer.length >= this.options.batchSize) {
+            this.flushInteractions();
+        }
+        else {
+            // Set timeout for batch sending
+            if (this.batchTimer) {
+                clearTimeout(this.batchTimer);
+            }
+            this.batchTimer = window.setTimeout(() => {
+                this.flushInteractions();
+            }, this.options.batchTimeout);
+        }
+    }
+    async flushInteractions() {
+        if (this.interactionBuffer.length === 0)
+            return;
+        const interactions = [...this.interactionBuffer];
+        this.interactionBuffer = [];
+        if (this.batchTimer) {
+            clearTimeout(this.batchTimer);
+            this.batchTimer = null;
+        }
+        try {
+            await this.apiClient.post(`/api/v1/analytics/sessions/${this.sessionId}/interactions/batch`, { interactions });
+            this.log(`Flushed ${interactions.length} interactions`);
+        }
+        catch (error) {
+            console.error('Failed to send interactions:', error);
+            // Re-queue interactions on failure (with limit to avoid infinite growth)
+            if (this.interactionBuffer.length < 50) {
+                this.interactionBuffer.unshift(...interactions);
+            }
+        }
+    }
+    // ==================== Private Methods - Utilities ====================
+    generateSessionId() {
+        return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    generateUserFingerprint() {
+        // Create anonymous fingerprint from browser characteristics
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        ctx?.fillText('CheckFlow', 2, 2);
+        const fingerprint = [
+            navigator.userAgent,
+            navigator.language,
+            screen.width + 'x' + screen.height,
+            screen.colorDepth,
+            new Date().getTimezoneOffset(),
+            canvas.toDataURL()
+        ].join('|');
+        // Simple hash function
+        let hash = 0;
+        for (let i = 0; i < fingerprint.length; i++) {
+            const char = fingerprint.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash;
+        }
+        return Math.abs(hash).toString(36);
+    }
+    async getGeolocation() {
+        return new Promise((resolve) => {
+            if (!navigator.geolocation) {
+                resolve(null);
+                return;
+            }
+            navigator.geolocation.getCurrentPosition((position) => {
+                resolve({
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude
+                });
+            }, () => resolve(null), { timeout: 5000, enableHighAccuracy: false });
+        });
+    }
+    getViewportInfo() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        let device = 'desktop';
+        if (width <= 768) {
+            device = 'mobile';
+        }
+        else if (width <= 1024) {
+            device = 'tablet';
+        }
+        return { width, height, device };
+    }
+    getBrowserInfo() {
+        const userAgent = navigator.userAgent;
+        if (userAgent.includes('Chrome'))
+            return 'Chrome';
+        if (userAgent.includes('Firefox'))
+            return 'Firefox';
+        if (userAgent.includes('Safari'))
+            return 'Safari';
+        if (userAgent.includes('Edge'))
+            return 'Edge';
+        return 'Unknown';
+    }
+    getOSInfo() {
+        const platform = navigator.platform;
+        if (platform.includes('Win'))
+            return 'Windows';
+        if (platform.includes('Mac'))
+            return 'macOS';
+        if (platform.includes('Linux'))
+            return 'Linux';
+        if (/iPhone|iPad|iPod/.test(navigator.userAgent))
+            return 'iOS';
+        if (/Android/.test(navigator.userAgent))
+            return 'Android';
+        return 'Unknown';
+    }
+    getElementSelector(element) {
+        // Generate a CSS selector for the element
+        if (element.id) {
+            return `#${element.id}`;
+        }
+        if (element.className) {
+            const classes = element.className.trim().split(/\s+/);
+            return `${element.tagName.toLowerCase()}.${classes.join('.')}`;
+        }
+        return element.tagName.toLowerCase();
+    }
+    getElementText(element) {
+        // Get text content, but limit length for privacy/storage
+        const text = element.textContent?.trim() || '';
+        return text.substring(0, 100);
+    }
+    isFormElement(element) {
+        const tagName = element.tagName.toLowerCase();
+        return ['input', 'textarea', 'select'].includes(tagName);
+    }
+    calculateScrollDepth() {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+        const windowHeight = window.innerHeight;
+        const scrollable = documentHeight - windowHeight;
+        if (scrollable <= 0)
+            return 100;
+        return Math.round((scrollTop / scrollable) * 100);
+    }
+    getPageLoadTime() {
+        if (performance.timing) {
+            return performance.timing.loadEventEnd - performance.timing.navigationStart;
+        }
+        return undefined;
+    }
+    getDOMReadyTime() {
+        if (performance.timing) {
+            return performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
+        }
+        return undefined;
+    }
+    getPageViewCount() {
+        // Simple estimation based on interactions
+        return this.interactionBuffer.filter(i => i.eventType === 'page_view').length + 1;
+    }
+    log(message, data) {
+        if (this.options.debug) {
+            console.log(`[CheckFlow Analytics] ${message}`, data);
+        }
+    }
+}
+
+/**
+ * CheckFlow SDK Main Class
+ * Entry point for the CheckFlow feedback SDK
+ */
+const DEFAULT_OPTIONS = {
+    apiUrl: 'https://api.checkflow.space',
+    showWidget: true,
+    widgetPosition: 'bottom-right',
+    widgetButtonText: 'Feedback',
+    captureErrors: true,
+    captureConsole: true,
+    captureNetwork: true,
+    capturePerformance: true,
+    maxConsoleEntries: 100,
+    maxNetworkEntries: 100,
+    debug: false,
+    locale: 'en',
+    privacy: {
+        enabled: true,
+        autoMask: {
+            emails: true,
+            creditCards: true,
+            phoneNumbers: true,
+            passwords: true,
+        },
+        excludeSelectors: [],
+    },
+    // Analytics options
+    enableAnalytics: true,
+    analytics: {
+        trackClicks: true,
+        trackScrolling: true,
+        trackFormInteractions: true,
+        trackErrors: true,
+        trackPerformance: true,
+        batchSize: 10,
+        batchTimeout: 5000,
+        debug: false,
+    },
+};
+class CheckFlow {
+    constructor(apiKey, options = {}) {
+        this.sessionRecording = null;
+        this.widget = null;
+        this.analyticsTracker = null;
+        this.isInitialized = false;
+        this.apiKey = apiKey;
+        this.options = { ...DEFAULT_OPTIONS, ...options };
+        // Initialize API client
+        this.apiClient = new APIClient({
+            apiUrl: this.options.apiUrl,
+            apiKey: this.apiKey,
+            projectId: this.options.projectId,
+            debug: this.options.debug,
+        });
+        // Initialize context capture
+        this.contextCapture = new ContextCapture({
+            maxConsoleEntries: this.options.maxConsoleEntries,
+            maxNetworkEntries: this.options.maxNetworkEntries,
+        });
+        // Initialize error capture
+        this.errorCapture = new ErrorCapture(this.handleError.bind(this));
+        // Initialize privacy masker
+        this.privacyMasker = new PrivacyMasker({
+            enabled: this.options.privacy?.enabled ?? true,
+            autoMask: {
+                emails: this.options.privacy?.autoMask?.emails ?? true,
+                creditCards: this.options.privacy?.autoMask?.creditCards ?? true,
+                phoneNumbers: this.options.privacy?.autoMask?.phoneNumbers ?? true,
+                passwords: this.options.privacy?.autoMask?.passwords ?? true,
+                socialSecurity: true,
+                ipAddresses: false,
+                customPatterns: [],
+            },
+            excludeSelectors: this.options.privacy?.excludeSelectors || [],
+            includeSelectors: [],
+            maskChar: '•',
+            maskLength: 'preserve',
+            fixedMaskLength: 8,
+        });
+        // Initialize analytics tracker
+        if (this.options.enableAnalytics) {
+            this.analyticsTracker = new AnalyticsTracker(this.apiClient, {
+                batchSize: this.options.analytics?.batchSize || 10,
+                batchTimeout: this.options.analytics?.batchTimeout || 5000,
+                trackClicks: this.options.analytics?.trackClicks ?? true,
+                trackScrolling: this.options.analytics?.trackScrolling ?? true,
+                trackFormInteractions: this.options.analytics?.trackFormInteractions ?? true,
+                trackErrors: this.options.analytics?.trackErrors ?? true,
+                trackPerformance: this.options.analytics?.trackPerformance ?? true,
+                throttleScrollMs: 1000,
+                maxScrollEvents: 50,
+                debug: this.options.analytics?.debug || this.options.debug || false,
+            });
+        }
+        // Store as singleton
+        CheckFlow.instance = this;
+    }
+    /**
+     * Initialize the SDK
+     */
+    init() {
+        if (this.isInitialized) {
+            this.log('SDK already initialized');
+            return this;
+        }
+        this.log('Initializing CheckFlow SDK...');
+        // Start context capture
+        if (this.options.captureConsole || this.options.captureNetwork) {
+            this.contextCapture.startCapture();
+        }
+        // Start error capture
+        if (this.options.captureErrors) {
+            this.errorCapture.start();
+        }
+        // Start session recording
+        if (this.options.captureSessionRecording !== false) {
+            this.sessionRecording = new SessionRecording();
+            this.sessionRecording.start();
+            this.log('Session recording started');
+        }
+        // Start analytics tracking
+        if (this.analyticsTracker) {
+            try {
+                this.analyticsTracker.startTracking();
+                this.log('Analytics tracking started');
+            }
+            catch (error) {
+                this.log('Failed to start analytics tracking:', error);
+            }
+        }
+        // Show widget
+        if (this.options.showWidget) {
+            this.showWidget();
+        }
+        this.isInitialized = true;
+        this.log('SDK initialized successfully');
+        return this;
+    }
+    /**
+     * Show the feedback widget
+     */
+    showWidget() {
+        if (this.widget) {
+            return;
+        }
+        this.widget = new FeedbackWidget({
+            position: this.options.widgetPosition,
+            buttonText: this.options.widgetButtonText,
+            locale: this.options.locale,
+            translations: this.options.translations,
+            onSubmit: this.handleWidgetSubmit.bind(this),
+            onClose: () => this.log('Widget closed'),
+        });
+        this.widget.mount();
+        this.log('Widget mounted');
+    }
+    /**
+     * Hide the feedback widget
+     */
+    hideWidget() {
+        if (this.widget) {
+            this.widget.unmount();
+            this.widget = null;
+            this.log('Widget unmounted');
+        }
+    }
+    /**
+     * Open the feedback form
+     */
+    open() {
+        if (!this.widget) {
+            this.showWidget();
+        }
+        this.widget?.open();
+    }
+    /**
+     * Close the feedback form
+     */
+    close() {
+        this.widget?.close();
+    }
+    /**
+     * Capture current page context
+     */
+    async capture(options = {}) {
+        this.log('Capturing context...');
+        const result = await this.contextCapture.capture({
+            includeConsole: options.includeConsole ?? this.options.captureConsole,
+            includeNetwork: options.includeNetwork ?? this.options.captureNetwork,
+            includePerformance: options.includePerformance ?? this.options.capturePerformance,
+            ...options,
+        });
+        this.log('Context captured', result);
+        return result;
+    }
+    /**
+     * Submit feedback
+     */
+    async submitFeedback(feedback) {
+        this.log('Submitting feedback...', feedback);
+        // Call beforeSubmit hook
+        if (this.options.beforeSubmit) {
+            const result = this.options.beforeSubmit(feedback);
+            if (result === false) {
+                this.log('Submission cancelled by beforeSubmit hook');
+                return { success: false, error: 'Submission cancelled' };
+            }
+            feedback = result;
+        }
+        // Capture context if requested
+        let captureResult;
+        if (feedback.includeScreenshot || feedback.includeConsoleLogs || feedback.includeNetworkLogs) {
+            captureResult = await this.capture({
+                includeConsole: feedback.includeConsoleLogs,
+                includeNetwork: feedback.includeNetworkLogs,
+            });
+        }
+        // Merge user info
+        const user = { ...this.options.user, ...feedback.user };
+        // Get session recording if available
+        let sessionRecording;
+        if (this.sessionRecording && feedback.includeSessionRecording !== false) {
+            const recordingData = this.sessionRecording.getRecordingData();
+            if (recordingData && recordingData.events.length > 0) {
+                sessionRecording = {
+                    events: recordingData.events,
+                    sessionId: recordingData.sessionId,
+                };
+                this.log('Including session recording', { eventCount: recordingData.events.length });
+            }
+        }
+        // Submit to API
+        const result = await this.apiClient.submitFeedback(feedback, captureResult, user, sessionRecording);
+        // Call onSubmit hook
+        if (this.options.onSubmit) {
+            this.options.onSubmit(result);
+        }
+        this.log('Feedback submitted', result);
+        return result;
+    }
+    /**
+     * Capture and report an error
+     */
+    captureException(error, context) {
+        this.errorCapture.captureException(error, context);
+    }
+    /**
+     * Set user information
+     */
+    setUser(user) {
+        this.options.user = { ...this.options.user, ...user };
+        this.log('User set', user);
+    }
+    /**
+     * Clear user information
+     */
+    clearUser() {
+        this.options.user = undefined;
+        this.log('User cleared');
+    }
+    /**
+     * Add custom metadata
+     */
+    setMetadata(metadata) {
+        this.options.metadata = { ...this.options.metadata, ...metadata };
+    }
+    /**
+     * Get console logs
+     */
+    getConsoleLogs() {
+        return this.contextCapture.getConsoleLogs();
+    }
+    /**
+     * Get network logs
+     */
+    getNetworkLogs() {
+        return this.contextCapture.getNetworkLogs();
+    }
+    /**
+     * Get captured errors
+     */
+    getErrors() {
+        return this.errorCapture.getErrors();
+    }
+    /**
+     * Configure privacy settings
+     */
+    configurePrivacy(config) {
+        this.privacyMasker.configure({
+            enabled: config.enabled,
+            autoMask: config.autoMask ? {
+                emails: config.autoMask.emails ?? true,
+                creditCards: config.autoMask.creditCards ?? true,
+                phoneNumbers: config.autoMask.phoneNumbers ?? true,
+                passwords: config.autoMask.passwords ?? true,
+                socialSecurity: true,
+                ipAddresses: false,
+                customPatterns: [],
+            } : undefined,
+            excludeSelectors: config.excludeSelectors,
+        });
+        this.log('Privacy configured', config);
+    }
+    /**
+     * Mask text using privacy rules
+     */
+    maskText(text) {
+        return this.privacyMasker.maskText(text);
+    }
+    /**
+     * Get privacy masker instance
+     */
+    getPrivacyMasker() {
+        return this.privacyMasker;
+    }
+    /**
+     * Destroy the SDK instance
+     */
+    destroy() {
+        this.log('Destroying SDK...');
+        this.hideWidget();
+        this.contextCapture.stopCapture();
+        this.errorCapture.stop();
+        this.isInitialized = false;
+        if (CheckFlow.instance === this) {
+            CheckFlow.instance = null;
+        }
+        this.log('SDK destroyed');
+    }
+    /**
+     * Get the singleton instance
+     */
+    static getInstance() {
+        return CheckFlow.instance;
+    }
+    // Private methods
+    async handleWidgetSubmit(data) {
+        // Prepare feedback with user info from widget form
+        const feedback = {
+            title: `Rapport de ${data.name}`,
+            description: data.description,
+            type: data.type,
+            priority: data.priority,
+            includeScreenshot: !!data.screenshot,
+            includeConsoleLogs: data.includeConsole,
+            includeNetworkLogs: data.includeNetwork,
+            user: {
+                name: data.name,
+                email: data.email,
+            },
+        };
+        // If screenshot provided directly from widget, add to capture result
+        let captureResult;
+        if (data.screenshot) {
+            captureResult = await this.contextCapture.capture({
+                includeConsole: data.includeConsole,
+                includeNetwork: data.includeNetwork,
+                includePerformance: true,
+            });
+            captureResult.screenshot = data.screenshot;
+        }
+        // Submit with annotations
+        const result = await this.apiClient.submitFeedback(feedback, captureResult, { name: data.name, email: data.email }, undefined, // session recording
+        data.annotations);
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to submit feedback');
+        }
+    }
+    handleError(error) {
+        this.log('Error captured', error);
+        // Report to backend if configured
+        if (this.options.captureErrors) {
+            this.apiClient.reportError({
+                message: error.message,
+                stack: error.stack,
+                type: error.type,
+                filename: error.filename,
+                lineno: error.lineno,
+                colno: error.colno,
+                context: error.context,
+            }).catch((e) => this.log('Failed to report error', e));
+        }
+        // Call user error handler
+        if (this.options.onError) {
+            this.options.onError(new Error(error.message));
+        }
+    }
+    log(...args) {
+        if (this.options.debug) {
+            console.log('[CheckFlow]', ...args);
+        }
+    }
+}
+CheckFlow.instance = null;
+/**
+ * Factory function for creating CheckFlow instance
+ */
+function createCheckFlow(apiKey, options) {
+    return new CheckFlow(apiKey, options).init();
+}
+
+const CheckFlowContext = createContext(null);
+function CheckFlowProvider({ apiKey, options = {}, children }) {
+    const [checkflow, setCheckflow] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    useEffect(() => {
+        const instance = createCheckFlow(apiKey, options);
+        setCheckflow(instance);
+        setIsReady(true);
+        return () => {
+            instance.destroy();
+        };
+    }, [apiKey]);
+    const capture = useCallback(async () => {
+        if (!checkflow)
+            return null;
+        return checkflow.capture();
+    }, [checkflow]);
+    const submitFeedback = useCallback(async (feedback) => {
+        if (!checkflow) {
+            return { success: false, error: 'CheckFlow not initialized' };
+        }
+        return checkflow.submitFeedback(feedback);
+    }, [checkflow]);
+    const openWidget = useCallback(() => {
+        checkflow?.open();
+    }, [checkflow]);
+    const closeWidget = useCallback(() => {
+        checkflow?.close();
+    }, [checkflow]);
+    const setUser = useCallback((user) => {
+        checkflow?.setUser(user);
+    }, [checkflow]);
+    const clearUser = useCallback(() => {
+        checkflow?.clearUser();
+    }, [checkflow]);
+    const value = useMemo(() => ({
+        checkflow,
+        isReady,
+        capture,
+        submitFeedback,
+        openWidget,
+        closeWidget,
+        setUser,
+        clearUser,
+    }), [checkflow, isReady, capture, submitFeedback, openWidget, closeWidget, setUser, clearUser]);
+    return (jsx(CheckFlowContext.Provider, { value: value, children: children }));
+}
+// ==================== Hook ====================
+function useCheckFlow() {
+    const context = useContext(CheckFlowContext);
+    if (!context) {
+        throw new Error('useCheckFlow must be used within a CheckFlowProvider');
+    }
+    return context;
+}
+function useFeedbackForm(options = {}) {
+    const { submitFeedback, capture } = useCheckFlow();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [screenshot, setScreenshot] = useState(null);
+    const [formState, setFormState] = useState({
+        title: '',
+        description: '',
+        type: options.defaultType || 'bug',
+        priority: options.defaultPriority || 'medium',
+        includeScreenshot: true,
+        includeConsoleLogs: true,
+        includeNetworkLogs: true,
+    });
+    const updateField = useCallback((field, value) => {
+        setFormState(prev => ({ ...prev, [field]: value }));
+    }, []);
+    const captureScreenshot = useCallback(async () => {
+        const result = await capture();
+        if (result?.screenshot) {
+            setScreenshot(result.screenshot);
+        }
+        return result;
+    }, [capture]);
+    const submit = useCallback(async () => {
+        if (!formState.title.trim()) {
+            setError('Title is required');
+            return null;
+        }
+        setIsSubmitting(true);
+        setError(null);
+        try {
+            const result = await submitFeedback({
+                ...formState,
+            });
+            if (result.success) {
+                options.onSuccess?.(result);
+                // Reset form
+                setFormState({
+                    title: '',
+                    description: '',
+                    type: options.defaultType || 'bug',
+                    priority: options.defaultPriority || 'medium',
+                    includeScreenshot: true,
+                    includeConsoleLogs: true,
+                    includeNetworkLogs: true,
+                });
+                setScreenshot(null);
+            }
+            else {
+                setError(result.error || 'Failed to submit feedback');
+                options.onError?.(new Error(result.error));
+            }
+            return result;
+        }
+        catch (err) {
+            const errorMessage = err.message || 'An error occurred';
+            setError(errorMessage);
+            options.onError?.(err);
+            return null;
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [formState, submitFeedback, options]);
+    const reset = useCallback(() => {
+        setFormState({
+            title: '',
+            description: '',
+            type: options.defaultType || 'bug',
+            priority: options.defaultPriority || 'medium',
+            includeScreenshot: true,
+            includeConsoleLogs: true,
+            includeNetworkLogs: true,
+        });
+        setScreenshot(null);
+        setError(null);
+    }, [options.defaultType, options.defaultPriority]);
+    return {
+        formState,
+        updateField,
+        screenshot,
+        captureScreenshot,
+        submit,
+        reset,
+        isSubmitting,
+        error,
+    };
+}
+class CheckFlowErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.reset = () => {
+            this.setState({ hasError: false, error: null });
+        };
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Call user handler
+        this.props.onError?.(error, errorInfo);
+        // Report to CheckFlow
+        if (this.props.reportToCheckFlow !== false) {
+            const checkflow = CheckFlow.getInstance();
+            if (checkflow) {
+                checkflow.captureException(error, {
+                    componentStack: errorInfo.componentStack,
+                });
+            }
+        }
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            const { fallback } = this.props;
+            if (typeof fallback === 'function') {
+                return fallback(this.state.error, this.reset);
+            }
+            if (fallback) {
+                return fallback;
+            }
+            // Default fallback
+            return (jsxs("div", { style: {
+                    padding: '20px',
+                    background: '#fef2f2',
+                    border: '1px solid #fecaca',
+                    borderRadius: '8px',
+                    color: '#991b1b',
+                }, children: [jsx("h3", { style: { margin: '0 0 8px' }, children: "Something went wrong" }), jsx("p", { style: { margin: '0 0 12px', fontSize: '14px' }, children: this.state.error.message }), jsx("button", { onClick: this.reset, style: {
+                            padding: '8px 16px',
+                            background: '#dc2626',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                        }, children: "Try again" })] }));
+        }
+        return this.props.children;
+    }
+}
+// ==================== HOC ====================
+function withCheckFlow(WrappedComponent) {
+    return function WithCheckFlowComponent(props) {
+        const checkflow = useCheckFlow();
+        return jsx(WrappedComponent, { ...props, checkflow: checkflow });
+    };
+}
+function withErrorBoundary(WrappedComponent, errorBoundaryProps) {
+    return function WithErrorBoundaryComponent(props) {
+        return (jsx(CheckFlowErrorBoundary, { ...errorBoundaryProps, children: jsx(WrappedComponent, { ...props }) }));
+    };
+}
+function FeedbackButton({ children, className, style }) {
+    const { openWidget } = useCheckFlow();
+    return (jsx("button", { onClick: openWidget, className: className, style: style, children: children || 'Send Feedback' }));
+}
+
+/**
+ * CheckFlow SDK
+ * User feedback collection with automatic context capture
+ *
+ * @packageDocumentation
+ */
+// Main exports
+// Version
+const VERSION = '1.0.0';
+
+export { APIClient, AnnotationEditor, AnnotationToolbar, BLUR_STYLE, COLOR_PALETTE, CheckFlow, CheckFlowErrorBoundary, CheckFlowProvider, ContextCapture, DEFAULT_PRIVACY_CONFIG, DEFAULT_STYLE, DEFAULT_TRANSLATIONS, ErrorCapture, FeedbackButton, FeedbackWidget, HIGHLIGHT_STYLE, PATTERNS as PRIVACY_PATTERNS, PrivacyDetector, PrivacyMasker, STROKE_WIDTHS, SessionRecording, TRANSLATIONS, VERSION, capturePageContext, capturePerformance, captureScreenshot, createCheckFlow, CheckFlow as default, injectAnnotationStyles, removeAnnotationStyles, useCheckFlow, useFeedbackForm, withCheckFlow, withErrorBoundary };
+//# sourceMappingURL=index.esm.js.map