@uxbertlabs/reportly 1.0.17 → 1.0.18

package/dist/core/init.d.ts

@@ -21,6 +21,7 @@ declare class Reportly {
     private finishAnnotation;
     private retakeScreenshot;
     private handleIssueSubmit;
+    private handleN8nSubmit;
     private handleModalClose;
     open(): void;
     close(): void;
@@ -28,6 +29,12 @@ declare class Reportly {
     getSavedIssues(): SavedIssue[];
     clearSavedIssues(): void;
     exportAllIssues(): void;
+    configureN8n(webhookUrl: string, enabled?: boolean, options?: {
+        headers?: Record<string, string>;
+        timeout?: number;
+    }): void;
+    enableN8n(enabled: boolean): void;
+    testN8nConnection(): Promise<any>;
     on(event: string, callback: EventCallback): void;
     destroy(): void;
 }

package/dist/core/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/core/init.ts"],"names":[],"mappings":"AAUA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAA4B,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpG,cAAM,QAAQ;IACZ,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,aAAa,CAAU;;IAe/B,IAAI,CAAC,UAAU,GAAE,OAAO,CAAC,cAAc,CAAM,GAAG,IAAI;IAwDpD,OAAO,CAAC,sBAAsB;YAUhB,iBAAiB;YAUjB,eAAe;IAyB7B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;YASR,gBAAgB;YA2BhB,gBAAgB;IAwB9B,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,gBAAgB;IAQxB,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAKb,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAMtD,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,IAAI,IAAI;IAIxB,eAAe,IAAI,IAAI;IAIvB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAIhD,OAAO,IAAI,IAAI;CAOhB;AAGD,QAAA,MAAM,QAAQ,UAAiB,CAAC;AAGhC,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/core/init.ts"],"names":[],"mappings":"AAUA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAA4B,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpG,cAAM,QAAQ;IACZ,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,UAAU,CAAoB;IACtC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,aAAa,CAAU;;IAe/B,IAAI,CAAC,UAAU,GAAE,OAAO,CAAC,cAAc,CAAM,GAAG,IAAI;IAiEpD,OAAO,CAAC,sBAAsB;YAUhB,iBAAiB;YAUjB,eAAe;IAyB7B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;YASR,gBAAgB;YA2BhB,gBAAgB;IAwB9B,OAAO,CAAC,iBAAiB;YA4BX,eAAe;IAsD7B,OAAO,CAAC,gBAAgB;IAQxB,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAKb,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAMtD,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,IAAI,IAAI;IAIxB,eAAe,IAAI,IAAI;IAKvB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,GAAE,OAAc,EAAE,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAYjI,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAKjC,iBAAiB,IAAI,OAAO,CAAC,GAAG,CAAC;IAIjC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAIhD,OAAO,IAAI,IAAI;CAOhB;AAGD,QAAA,MAAM,QAAQ,UAAiB,CAAC;AAGhC,eAAe,QAAQ,CAAC"}

package/dist/features/export.d.ts

@@ -1,7 +1,9 @@
 import type { CompleteIssue, SavedIssue } from '../types';
+import { type N8nConfig, type N8nResponse } from './n8n-integration';
 declare class Export {
     private savedIssues;
-    constructor();
+    private n8nIntegration;
+    constructor(n8nConfig?: N8nConfig);
     exportToJSON(issueData: CompleteIssue): string;
     private saveIssue;
     private loadSavedIssues;
@@ -9,6 +11,34 @@ declare class Export {
     deleteSavedIssue(issueId: number): void;
     clearSavedIssues(): void;
     exportAllIssues(): void;
+    /**
+     * Send issue to n8n webhook
+     */
+    sendToN8n(issueData: CompleteIssue): Promise<N8nResponse>;
+    /**
+     * Configure n8n integration
+     */
+    configureN8n(config: N8nConfig): void;
+    /**
+     * Check if n8n is enabled
+     */
+    isN8nEnabled(): boolean;
+    /**
+     * Test n8n connection
+     */
+    testN8nConnection(): Promise<N8nResponse>;
+    /**
+     * Get n8n configuration
+     */
+    getN8nConfig(): N8nConfig | null;
+    /**
+     * Enable/disable n8n integration
+     */
+    setN8nEnabled(enabled: boolean): void;
+    /**
+     * Set n8n webhook URL
+     */
+    setN8nWebhookUrl(url: string): void;
 }
 export default Export;
 //# sourceMappingURL=export.d.ts.map

package/dist/features/export.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/features/export.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE1D,cAAM,MAAM;IACV,OAAO,CAAC,WAAW,CAAe;;IAMlC,YAAY,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM;IAsB9C,OAAO,CAAC,SAAS;IAmBjB,OAAO,CAAC,eAAe;IAUvB,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKvC,gBAAgB,IAAI,IAAI;IAKxB,eAAe,IAAI,IAAI;CAcxB;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/features/export.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAuB,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErF,cAAM,MAAM;IACV,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,cAAc,CAAiB;gBAE3B,SAAS,CAAC,EAAE,SAAS;IAKjC,YAAY,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM;IAsB9C,OAAO,CAAC,SAAS;IAmBjB,OAAO,CAAC,eAAe;IAUvB,cAAc,IAAI,UAAU,EAAE;IAI9B,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKvC,gBAAgB,IAAI,IAAI;IAKxB,eAAe,IAAI,IAAI;IAiBvB;;OAEG;IACG,SAAS,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC;IAW/D;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAIrC;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACG,iBAAiB,IAAI,OAAO,CAAC,WAAW,CAAC;IAI/C;;OAEG;IACH,YAAY,IAAI,SAAS,GAAG,IAAI;IAIhC;;OAEG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAIrC;;OAEG;IACH,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;CAGpC;AAED,eAAe,MAAM,CAAC"}

package/dist/features/n8n-integration.d.ts

@@ -0,0 +1,52 @@
+import type { CompleteIssue } from '../types';
+export interface N8nConfig {
+    webhookUrl: string;
+    enabled: boolean;
+    headers?: Record<string, string>;
+    timeout?: number;
+}
+export interface N8nResponse {
+    success: boolean;
+    message: string;
+    workflowId?: string;
+    error?: string;
+}
+declare class N8nIntegration {
+    private config;
+    constructor(config?: N8nConfig);
+    /**
+     * Configure n8n integration
+     */
+    configure(config: N8nConfig): void;
+    /**
+     * Check if n8n integration is configured and enabled
+     */
+    isEnabled(): boolean;
+    /**
+     * Send issue data to n8n webhook
+     */
+    sendToN8n(issueData: CompleteIssue): Promise<N8nResponse>;
+    /**
+     * Prepare payload for n8n webhook
+     * This formats the data in a structure that's easy to work with in n8n
+     */
+    private preparePayload;
+    /**
+     * Test connection to n8n webhook
+     */
+    testConnection(): Promise<N8nResponse>;
+    /**
+     * Get current configuration
+     */
+    getConfig(): N8nConfig | null;
+    /**
+     * Update webhook URL
+     */
+    setWebhookUrl(url: string): void;
+    /**
+     * Enable/disable n8n integration
+     */
+    setEnabled(enabled: boolean): void;
+}
+export default N8nIntegration;
+//# sourceMappingURL=n8n-integration.d.ts.map

package/dist/features/n8n-integration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"n8n-integration.d.ts","sourceRoot":"","sources":["../../src/features/n8n-integration.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,cAAM,cAAc;IAClB,OAAO,CAAC,MAAM,CAAmB;gBAErB,MAAM,CAAC,EAAE,SAAS;IAI9B;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI;IAIlC;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACG,SAAS,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC;IA4F/D;;;OAGG;IACH,OAAO,CAAC,cAAc;IAyCtB;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,WAAW,CAAC;IAiC5C;;OAEG;IACH,SAAS,IAAI,SAAS,GAAG,IAAI;IAI7B;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAWhC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;CAKnC;AAED,eAAe,cAAc,CAAC"}

package/dist/reportly.cjs.js

@@ -263,6 +263,9 @@ class Modal {
           <button type="button" class="uxbert-btn uxbert-btn-secondary" id="uxbert-cancel-btn">
             Cancel
           </button>
+          <button type="button" class="uxbert-btn uxbert-btn-success" id="uxbert-n8n-btn" style="display: none;">
+            🚀 Send to n8n
+          </button>
           <button type="submit" class="uxbert-btn uxbert-btn-primary" id="uxbert-submit-btn">
             📥 Download JSON
           </button>
@@ -317,6 +320,33 @@ class Modal {
                 this.callbacks.onRetake();
             }
         });
+        // n8n button
+        const n8nBtn = this.modal.querySelector('#uxbert-n8n-btn');
+        n8nBtn.addEventListener('click', () => {
+            this.handleN8nSubmit();
+        });
+    }
+    handleN8nSubmit() {
+        if (!this.modal)
+            return;
+        const titleInput = this.modal.querySelector('#uxbert-title');
+        const descriptionInput = this.modal.querySelector('#uxbert-description');
+        const prioritySelect = this.modal.querySelector('#uxbert-priority');
+        const title = titleInput.value;
+        const description = descriptionInput.value;
+        const priority = prioritySelect.value;
+        if (!title.trim()) {
+            alert('Please enter an issue title');
+            return;
+        }
+        const issueData = {
+            title: title.trim(),
+            description: description.trim(),
+            priority
+        };
+        if (this.callbacks.onSendToN8n) {
+            this.callbacks.onSendToN8n(issueData);
+        }
     }
     handleSubmit() {
         if (!this.modal)
@@ -375,6 +405,14 @@ class Modal {
         const viewportRadio = this.modal.querySelector('#uxbert-capture-viewport');
         return viewportRadio.checked ? 'viewport' : 'fullpage';
     }
+    setN8nButtonVisible(visible) {
+        if (!this.modal)
+            return;
+        const n8nBtn = this.modal.querySelector('#uxbert-n8n-btn');
+        if (n8nBtn) {
+            n8nBtn.style.display = visible ? 'inline-block' : 'none';
+        }
+    }
     reset() {
         if (!this.modal)
             return;
@@ -10161,9 +10199,213 @@ class DeviceInfo {
     }
 }
 
+class N8nIntegration {
+    constructor(config) {
+        this.config = config || null;
+    }
+    /**
+     * Configure n8n integration
+     */
+    configure(config) {
+        this.config = config;
+    }
+    /**
+     * Check if n8n integration is configured and enabled
+     */
+    isEnabled() {
+        return !!(this.config && this.config.enabled && this.config.webhookUrl);
+    }
+    /**
+     * Send issue data to n8n webhook
+     */
+    async sendToN8n(issueData) {
+        if (!this.config || !this.config.webhookUrl) {
+            return {
+                success: false,
+                message: 'n8n webhook URL is not configured',
+                error: 'MISSING_CONFIG'
+            };
+        }
+        if (!this.config.enabled) {
+            return {
+                success: false,
+                message: 'n8n integration is disabled',
+                error: 'DISABLED'
+            };
+        }
+        try {
+            // Prepare payload
+            const payload = this.preparePayload(issueData);
+            // Setup request headers
+            const headers = {
+                'Content-Type': 'application/json',
+                ...this.config.headers
+            };
+            // Setup timeout
+            const timeout = this.config.timeout || 30000; // 30 seconds default
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), timeout);
+            // Send request
+            const response = await fetch(this.config.webhookUrl, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(payload),
+                signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            // Check response
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => 'Unknown error');
+                return {
+                    success: false,
+                    message: `n8n webhook request failed: ${response.status} ${response.statusText}`,
+                    error: errorText
+                };
+            }
+            // Parse response
+            let responseData;
+            try {
+                responseData = await response.json();
+            }
+            catch (e) {
+                // Some webhooks don't return JSON
+                responseData = { message: 'Success' };
+            }
+            return {
+                success: true,
+                message: 'Issue sent to n8n successfully',
+                workflowId: responseData.workflowId || responseData.executionId
+            };
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                if (error.name === 'AbortError') {
+                    return {
+                        success: false,
+                        message: 'Request to n8n webhook timed out',
+                        error: 'TIMEOUT'
+                    };
+                }
+                return {
+                    success: false,
+                    message: `Failed to send issue to n8n: ${error.message}`,
+                    error: error.message
+                };
+            }
+            return {
+                success: false,
+                message: 'Unknown error occurred while sending to n8n',
+                error: 'UNKNOWN'
+            };
+        }
+    }
+    /**
+     * Prepare payload for n8n webhook
+     * This formats the data in a structure that's easy to work with in n8n
+     */
+    preparePayload(issueData) {
+        return {
+            // Main issue data
+            issue: {
+                title: issueData.title,
+                description: issueData.description,
+                priority: issueData.priority,
+                createdAt: issueData.createdAt
+            },
+            // Screenshot data (base64)
+            screenshot: {
+                data: issueData.screenshot,
+                format: 'base64',
+                mimeType: 'image/png'
+            },
+            // Device and browser information
+            context: {
+                browser: issueData.deviceInfo.browser,
+                os: issueData.deviceInfo.os,
+                screenResolution: issueData.deviceInfo.screenResolution,
+                viewport: issueData.deviceInfo.viewport,
+                url: issueData.deviceInfo.url,
+                userAgent: issueData.deviceInfo.userAgent,
+                language: issueData.deviceInfo.language,
+                platform: issueData.deviceInfo.platform,
+                cookiesEnabled: issueData.deviceInfo.cookiesEnabled,
+                onLine: issueData.deviceInfo.onLine,
+                timestamp: issueData.deviceInfo.timestamp
+            },
+            // Metadata for tracking
+            metadata: {
+                source: 'uxbert-reportly',
+                version: '1.0.0',
+                timestamp: new Date().toISOString()
+            }
+        };
+    }
+    /**
+     * Test connection to n8n webhook
+     */
+    async testConnection() {
+        if (!this.config || !this.config.webhookUrl) {
+            return {
+                success: false,
+                message: 'n8n webhook URL is not configured',
+                error: 'MISSING_CONFIG'
+            };
+        }
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout for test
+            await fetch(this.config.webhookUrl, {
+                method: 'HEAD',
+                signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            return {
+                success: true,
+                message: 'n8n webhook is reachable'
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                message: 'Failed to reach n8n webhook',
+                error: error instanceof Error ? error.message : 'UNKNOWN'
+            };
+        }
+    }
+    /**
+     * Get current configuration
+     */
+    getConfig() {
+        return this.config;
+    }
+    /**
+     * Update webhook URL
+     */
+    setWebhookUrl(url) {
+        if (!this.config) {
+            this.config = {
+                webhookUrl: url,
+                enabled: true
+            };
+        }
+        else {
+            this.config.webhookUrl = url;
+        }
+    }
+    /**
+     * Enable/disable n8n integration
+     */
+    setEnabled(enabled) {
+        if (this.config) {
+            this.config.enabled = enabled;
+        }
+    }
+}
+
 class Export {
-    constructor() {
+    constructor(n8nConfig) {
         this.savedIssues = this.loadSavedIssues();
+        this.n8nIntegration = new N8nIntegration(n8nConfig);
     }
     exportToJSON(issueData) {
         const json = JSON.stringify(issueData, null, 2);
@@ -10232,6 +10474,54 @@ class Export {
         document.body.removeChild(link);
         URL.revokeObjectURL(url);
     }
+    // n8n Integration Methods
+    /**
+     * Send issue to n8n webhook
+     */
+    async sendToN8n(issueData) {
+        const response = await this.n8nIntegration.sendToN8n(issueData);
+        // Save to localStorage if n8n send was successful
+        if (response.success) {
+            this.saveIssue(issueData);
+        }
+        return response;
+    }
+    /**
+     * Configure n8n integration
+     */
+    configureN8n(config) {
+        this.n8nIntegration.configure(config);
+    }
+    /**
+     * Check if n8n is enabled
+     */
+    isN8nEnabled() {
+        return this.n8nIntegration.isEnabled();
+    }
+    /**
+     * Test n8n connection
+     */
+    async testN8nConnection() {
+        return this.n8nIntegration.testConnection();
+    }
+    /**
+     * Get n8n configuration
+     */
+    getN8nConfig() {
+        return this.n8nIntegration.getConfig();
+    }
+    /**
+     * Enable/disable n8n integration
+     */
+    setN8nEnabled(enabled) {
+        this.n8nIntegration.setEnabled(enabled);
+    }
+    /**
+     * Set n8n webhook URL
+     */
+    setN8nWebhookUrl(url) {
+        this.n8nIntegration.setWebhookUrl(url);
+    }
 }
 
 function styleInject(css, ref) {
@@ -10261,7 +10551,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ":root{--uxbert-primary:#4f46e5;--uxbert-primary-hover:#4338ca;--uxbert-danger:#ef4444;--uxbert-success:#10b981;--uxbert-bg:#fff;--uxbert-text:#1f2937;--uxbert-border:#e5e7eb;--uxbert-shadow:0 10px 25px rgba(0,0,0,.1);--uxbert-z-button:999999;--uxbert-z-modal:1000000;--uxbert-z-canvas:1000001;--uxbert-z-toolbar:1000002}[data-theme=dark]{--uxbert-bg:#1f2937;--uxbert-text:#f9fafb;--uxbert-border:#374151}.uxbert-fab{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:flex;font-size:24px;height:56px;justify-content:center;position:fixed;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-button)}.uxbert-fab:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-fab.bottom-right{bottom:24px;right:24px}.uxbert-fab.bottom-left{bottom:24px;left:24px}.uxbert-fab.top-right{right:24px;top:24px}.uxbert-fab.top-left{left:24px;top:24px}.uxbert-overlay{align-items:center;animation:fadeIn .3s ease;background:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--uxbert-z-modal)}.uxbert-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.uxbert-modal{animation:slideUp .3s ease;background:var(--uxbert-bg);border-radius:12px;box-shadow:var(--uxbert-shadow);color:var(--uxbert-text);max-height:90vh;max-width:600px;overflow-y:auto;padding:24px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.uxbert-modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.uxbert-modal-title{font-size:20px;font-weight:600;margin:0}.uxbert-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;width:32px}.uxbert-modal-close:hover{background:var(--uxbert-border)}.uxbert-form-group{margin-bottom:16px}.uxbert-form-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.uxbert-capture-mode{display:flex;flex-wrap:wrap;gap:12px}.uxbert-radio-label{align-items:center;border:2px solid var(--uxbert-border);border-radius:8px;cursor:pointer;display:flex;flex:1;gap:8px;min-width:140px;padding:10px 16px;transition:all .2s ease}.uxbert-radio-label:hover{background:rgba(79,70,229,.05);border-color:var(--uxbert-primary)}.uxbert-radio-label input[type=radio]{cursor:pointer;height:18px;margin:0;width:18px}.uxbert-radio-label input[type=radio]:checked{accent-color:var(--uxbert-primary)}.uxbert-radio-label:has(input[type=radio]:checked){background:rgba(79,70,229,.1);border-color:var(--uxbert-primary)}.uxbert-radio-label span{flex:1;font-size:14px;font-weight:500}.uxbert-form-input,.uxbert-form-select,.uxbert-form-textarea{background:var(--uxbert-bg);border:1px solid var(--uxbert-border);border-radius:6px;box-sizing:border-box;color:var(--uxbert-text);font-family:inherit;font-size:14px;padding:10px;width:100%}.uxbert-form-textarea{min-height:100px;resize:vertical}.uxbert-form-input:focus,.uxbert-form-select:focus,.uxbert-form-textarea:focus{border-color:var(--uxbert-primary);outline:none}.uxbert-capture-action{margin:16px 0;text-align:center}.uxbert-capture-action .uxbert-btn{min-width:200px}.uxbert-screenshot-preview{border:1px solid var(--uxbert-border);border-radius:8px;margin:16px 0;overflow:hidden}.uxbert-screenshot-preview img{display:block;width:100%}.uxbert-screenshot-actions{background:var(--uxbert-border);display:flex;gap:8px;padding:12px}.uxbert-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease}.uxbert-btn-primary{background:var(--uxbert-primary);color:#fff}.uxbert-btn-primary:hover{background:var(--uxbert-primary-hover)}.uxbert-btn-secondary{background:var(--uxbert-border);color:var(--uxbert-text)}.uxbert-btn-secondary:hover{background:#d1d5db}.uxbert-btn-danger{background:var(--uxbert-danger);color:#fff}.uxbert-btn-danger:hover{background:#dc2626}.uxbert-modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.uxbert-toolbar-toggle{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;bottom:24px;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:none;font-size:24px;height:56px;justify-content:center;position:fixed;right:24px;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar-toggle.active{display:flex}.uxbert-toolbar-toggle.hidden{opacity:0;pointer-events:none;transform:scale(.8)}.uxbert-toolbar-toggle:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-toolbar{background:var(--uxbert-bg);border-radius:12px;bottom:24px;box-shadow:var(--uxbert-shadow);display:none;flex-direction:column;gap:8px;max-height:80vh;opacity:0;overflow-y:auto;padding:16px;pointer-events:none;position:fixed;right:24px;transform:translateY(20px);transition:all .3s ease;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar.active{display:flex}.uxbert-toolbar.expanded{opacity:1;pointer-events:all;transform:translateY(0)}.uxbert-toolbar-header{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:8px}.uxbert-toolbar-title{flex:1;font-size:14px;font-weight:600}.uxbert-toolbar-exit,.uxbert-toolbar-minimize{align-items:center;background:var(--uxbert-border);border:none;border-radius:6px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:20px;font-weight:700;height:32px;justify-content:center;transition:all .2s ease;width:32px}.uxbert-toolbar-exit{background:var(--uxbert-danger);color:#fff}.uxbert-toolbar-minimize:hover{background:#d1d5db;transform:scale(1.1)}.uxbert-toolbar-exit:hover{background:#dc2626;transform:scale(1.1)}.uxbert-toolbar-tools{display:flex;flex-wrap:wrap;gap:8px}.uxbert-tool-btn{align-items:center;background:var(--uxbert-bg);border:2px solid var(--uxbert-border);border-radius:6px;cursor:pointer;display:flex;font-family:Arial,sans-serif;font-size:18px;font-weight:700;height:40px;justify-content:center;transition:all .2s ease;width:40px}.uxbert-tool-btn.active,.uxbert-tool-btn:hover{background:var(--uxbert-primary);border-color:var(--uxbert-primary);color:#fff}.uxbert-color-picker{display:flex;gap:6px;margin:8px 0}.uxbert-color-option{border:2px solid var(--uxbert-border);border-radius:50%;cursor:pointer;height:32px;transition:transform .2s ease;width:32px}.uxbert-color-option:hover{transform:scale(1.1)}.uxbert-color-option.active{border:3px solid var(--uxbert-text)}.uxbert-canvas-overlay{cursor:crosshair;display:none;left:0;position:absolute;top:0;z-index:var(--uxbert-z-canvas)}.uxbert-canvas-overlay.active{display:block}.uxbert-canvas-overlay.viewport-mode{left:0;position:fixed;top:0}.uxbert-text-input{background:hsla(0,0%,100%,.95);border:2px solid var(--uxbert-primary);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--uxbert-text);font-family:Arial,sans-serif;font-size:16px;font-weight:700;min-width:200px;outline:none;padding:8px 12px;z-index:var(--uxbert-z-toolbar)}.uxbert-text-input:focus{border-color:var(--uxbert-primary-hover);box-shadow:0 4px 16px rgba(79,70,229,.3)}.uxbert-text-input::placeholder{color:#9ca3af;font-weight:400}@media (max-width:768px){.uxbert-modal{max-height:95vh;padding:16px;width:95%}.uxbert-toolbar{bottom:90px;left:16px;max-height:60vh;right:16px;width:auto}.uxbert-toolbar-toggle{bottom:16px;height:56px;right:16px;width:56px}.uxbert-fab{font-size:20px;height:48px;width:48px}.uxbert-color-picker,.uxbert-toolbar-tools{justify-content:center}}";
+var css_248z = ":root{--uxbert-primary:#4f46e5;--uxbert-primary-hover:#4338ca;--uxbert-danger:#ef4444;--uxbert-success:#10b981;--uxbert-bg:#fff;--uxbert-text:#1f2937;--uxbert-border:#e5e7eb;--uxbert-shadow:0 10px 25px rgba(0,0,0,.1);--uxbert-z-button:999999;--uxbert-z-modal:1000000;--uxbert-z-canvas:1000001;--uxbert-z-toolbar:1000002}[data-theme=dark]{--uxbert-bg:#1f2937;--uxbert-text:#f9fafb;--uxbert-border:#374151}.uxbert-fab{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:flex;font-size:24px;height:56px;justify-content:center;position:fixed;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-button)}.uxbert-fab:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-fab.bottom-right{bottom:24px;right:24px}.uxbert-fab.bottom-left{bottom:24px;left:24px}.uxbert-fab.top-right{right:24px;top:24px}.uxbert-fab.top-left{left:24px;top:24px}.uxbert-overlay{align-items:center;animation:fadeIn .3s ease;background:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--uxbert-z-modal)}.uxbert-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.uxbert-modal{animation:slideUp .3s ease;background:var(--uxbert-bg);border-radius:12px;box-shadow:var(--uxbert-shadow);color:var(--uxbert-text);max-height:90vh;max-width:600px;overflow-y:auto;padding:24px;width:90%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.uxbert-modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.uxbert-modal-title{font-size:20px;font-weight:600;margin:0}.uxbert-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;width:32px}.uxbert-modal-close:hover{background:var(--uxbert-border)}.uxbert-form-group{margin-bottom:16px}.uxbert-form-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.uxbert-capture-mode{display:flex;flex-wrap:wrap;gap:12px}.uxbert-radio-label{align-items:center;border:2px solid var(--uxbert-border);border-radius:8px;cursor:pointer;display:flex;flex:1;gap:8px;min-width:140px;padding:10px 16px;transition:all .2s ease}.uxbert-radio-label:hover{background:rgba(79,70,229,.05);border-color:var(--uxbert-primary)}.uxbert-radio-label input[type=radio]{cursor:pointer;height:18px;margin:0;width:18px}.uxbert-radio-label input[type=radio]:checked{accent-color:var(--uxbert-primary)}.uxbert-radio-label:has(input[type=radio]:checked){background:rgba(79,70,229,.1);border-color:var(--uxbert-primary)}.uxbert-radio-label span{flex:1;font-size:14px;font-weight:500}.uxbert-form-input,.uxbert-form-select,.uxbert-form-textarea{background:var(--uxbert-bg);border:1px solid var(--uxbert-border);border-radius:6px;box-sizing:border-box;color:var(--uxbert-text);font-family:inherit;font-size:14px;padding:10px;width:100%}.uxbert-form-textarea{min-height:100px;resize:vertical}.uxbert-form-input:focus,.uxbert-form-select:focus,.uxbert-form-textarea:focus{border-color:var(--uxbert-primary);outline:none}.uxbert-capture-action{margin:16px 0;text-align:center}.uxbert-capture-action .uxbert-btn{min-width:200px}.uxbert-screenshot-preview{border:1px solid var(--uxbert-border);border-radius:8px;margin:16px 0;overflow:hidden}.uxbert-screenshot-preview img{display:block;width:100%}.uxbert-screenshot-actions{background:var(--uxbert-border);display:flex;gap:8px;padding:12px}.uxbert-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease}.uxbert-btn-primary{background:var(--uxbert-primary);color:#fff}.uxbert-btn-primary:hover{background:var(--uxbert-primary-hover)}.uxbert-btn-secondary{background:var(--uxbert-border);color:var(--uxbert-text)}.uxbert-btn-secondary:hover{background:#d1d5db}.uxbert-btn-success{background:var(--uxbert-success);color:#fff}.uxbert-btn-success:hover{background:#059669}.uxbert-btn-danger{background:var(--uxbert-danger);color:#fff}.uxbert-btn-danger:hover{background:#dc2626}.uxbert-modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.uxbert-toolbar-toggle{align-items:center;background:var(--uxbert-primary);border:none;border-radius:50%;bottom:24px;box-shadow:var(--uxbert-shadow);color:#fff;cursor:pointer;display:none;font-size:24px;height:56px;justify-content:center;position:fixed;right:24px;transition:all .3s ease;width:56px;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar-toggle.active{display:flex}.uxbert-toolbar-toggle.hidden{opacity:0;pointer-events:none;transform:scale(.8)}.uxbert-toolbar-toggle:hover{background:var(--uxbert-primary-hover);transform:scale(1.1)}.uxbert-toolbar{background:var(--uxbert-bg);border-radius:12px;bottom:24px;box-shadow:var(--uxbert-shadow);display:none;flex-direction:column;gap:8px;max-height:80vh;opacity:0;overflow-y:auto;padding:16px;pointer-events:none;position:fixed;right:24px;transform:translateY(20px);transition:all .3s ease;z-index:var(--uxbert-z-toolbar)}.uxbert-toolbar.active{display:flex}.uxbert-toolbar.expanded{opacity:1;pointer-events:all;transform:translateY(0)}.uxbert-toolbar-header{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:8px}.uxbert-toolbar-title{flex:1;font-size:14px;font-weight:600}.uxbert-toolbar-exit,.uxbert-toolbar-minimize{align-items:center;background:var(--uxbert-border);border:none;border-radius:6px;color:var(--uxbert-text);cursor:pointer;display:flex;font-size:20px;font-weight:700;height:32px;justify-content:center;transition:all .2s ease;width:32px}.uxbert-toolbar-exit{background:var(--uxbert-danger);color:#fff}.uxbert-toolbar-minimize:hover{background:#d1d5db;transform:scale(1.1)}.uxbert-toolbar-exit:hover{background:#dc2626;transform:scale(1.1)}.uxbert-toolbar-tools{display:flex;flex-wrap:wrap;gap:8px}.uxbert-tool-btn{align-items:center;background:var(--uxbert-bg);border:2px solid var(--uxbert-border);border-radius:6px;cursor:pointer;display:flex;font-family:Arial,sans-serif;font-size:18px;font-weight:700;height:40px;justify-content:center;transition:all .2s ease;width:40px}.uxbert-tool-btn.active,.uxbert-tool-btn:hover{background:var(--uxbert-primary);border-color:var(--uxbert-primary);color:#fff}.uxbert-color-picker{display:flex;gap:6px;margin:8px 0}.uxbert-color-option{border:2px solid var(--uxbert-border);border-radius:50%;cursor:pointer;height:32px;transition:transform .2s ease;width:32px}.uxbert-color-option:hover{transform:scale(1.1)}.uxbert-color-option.active{border:3px solid var(--uxbert-text)}.uxbert-canvas-overlay{cursor:crosshair;display:none;left:0;position:absolute;top:0;z-index:var(--uxbert-z-canvas)}.uxbert-canvas-overlay.active{display:block}.uxbert-canvas-overlay.viewport-mode{left:0;position:fixed;top:0}.uxbert-text-input{background:hsla(0,0%,100%,.95);border:2px solid var(--uxbert-primary);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--uxbert-text);font-family:Arial,sans-serif;font-size:16px;font-weight:700;min-width:200px;outline:none;padding:8px 12px;z-index:var(--uxbert-z-toolbar)}.uxbert-text-input:focus{border-color:var(--uxbert-primary-hover);box-shadow:0 4px 16px rgba(79,70,229,.3)}.uxbert-text-input::placeholder{color:#9ca3af;font-weight:400}@media (max-width:768px){.uxbert-modal{max-height:95vh;padding:16px;width:95%}.uxbert-toolbar{bottom:90px;left:16px;max-height:60vh;right:16px;width:auto}.uxbert-toolbar-toggle{bottom:16px;height:56px;right:16px;width:56px}.uxbert-fab{font-size:20px;height:48px;width:48px}.uxbert-color-picker,.uxbert-toolbar-tools{justify-content:center}}";
 styleInject(css_248z);
 
 // Main initialization file
@@ -10293,7 +10583,9 @@ class Reportly {
         this.state = new State();
         this.deviceInfo = new DeviceInfo();
         this.screenshot = new Screenshot();
-        this.export = new Export();
+        // Initialize export with n8n config if provided
+        const n8nConfig = userConfig.integrations?.n8n;
+        this.export = new Export(n8nConfig);
         // Initialize UI components
         this.button = new Button(this.config, {
             onClick: () => this.handleButtonClick(),
@@ -10304,6 +10596,7 @@ class Reportly {
             onAnnotate: () => this.startAnnotation(),
             onRetake: () => this.retakeScreenshot(),
             onCapture: () => this.captureWithMode(),
+            onSendToN8n: (issueData) => this.handleN8nSubmit(issueData),
         });
         this.toolbar = new Toolbar({
             onToolChange: (tool) => this.annotation?.setTool(tool),
@@ -10319,6 +10612,10 @@ class Reportly {
         this.modal.create();
         this.toolbar.create();
         this.annotation.createCanvas();
+        // Show/hide n8n button based on configuration
+        if (this.export.isN8nEnabled()) {
+            this.modal.setN8nButtonVisible(true);
+        }
         // Setup keyboard shortcuts
         this.setupKeyboardShortcuts();
         this.isInitialized = true;
@@ -10446,6 +10743,54 @@ class Reportly {
             alert("Failed to export issue. Please try again.");
         }
     }
+    async handleN8nSubmit(issueData) {
+        try {
+            // Create complete issue package
+            const completeIssue = {
+                ...issueData,
+                screenshot: this.state?.getScreenshot() || "",
+                deviceInfo: this.deviceInfo.get(),
+                createdAt: new Date().toISOString(),
+            };
+            // Show loading state
+            const n8nBtn = document.querySelector('#uxbert-n8n-btn');
+            if (n8nBtn) {
+                n8nBtn.disabled = true;
+                n8nBtn.textContent = '⏳ Sending...';
+            }
+            // Send to n8n
+            const response = await this.export?.sendToN8n(completeIssue);
+            if (response?.success) {
+                // Emit event
+                this.state?.emit("issue:sent-to-n8n", completeIssue);
+                // Reset state
+                this.state?.reset();
+                this.annotation?.clear();
+                this.modal?.close();
+                alert("Issue sent to n8n successfully!");
+                console.log("Issue sent to n8n successfully");
+            }
+            else {
+                alert(`Failed to send to n8n: ${response?.message || 'Unknown error'}`);
+                console.error("Failed to send to n8n:", response?.error);
+            }
+            // Reset button state
+            if (n8nBtn) {
+                n8nBtn.disabled = false;
+                n8nBtn.textContent = '🚀 Send to n8n';
+            }
+        }
+        catch (error) {
+            console.error("Failed to send to n8n:", error);
+            alert("Failed to send to n8n. Please try again.");
+            // Reset button state
+            const n8nBtn = document.querySelector('#uxbert-n8n-btn');
+            if (n8nBtn) {
+                n8nBtn.disabled = false;
+                n8nBtn.textContent = '🚀 Send to n8n';
+            }
+        }
+    }
     handleModalClose() {
         this.annotation?.hide();
         this.toolbar?.hide();
@@ -10474,6 +10819,24 @@ class Reportly {
     exportAllIssues() {
         this.export?.exportAllIssues();
     }
+    // n8n Integration API methods
+    configureN8n(webhookUrl, enabled = true, options) {
+        this.export?.configureN8n({
+            webhookUrl,
+            enabled,
+            headers: options?.headers,
+            timeout: options?.timeout
+        });
+        // Update button visibility
+        this.modal?.setN8nButtonVisible(enabled);
+    }
+    enableN8n(enabled) {
+        this.export?.setN8nEnabled(enabled);
+        this.modal?.setN8nButtonVisible(enabled);
+    }
+    testN8nConnection() {
+        return this.export?.testN8nConnection() || Promise.resolve({ success: false, message: 'Not initialized' });
+    }
     on(event, callback) {
         this.state?.on(event, callback);
     }