@uxbertlabs/reportly 1.0.18 → 1.0.19

package/dist/reportly.js

@@ -185,11 +185,11 @@ var Reportly = (function () {
         }
         create() {
             // Create overlay
-            this.overlay = document.createElement('div');
-            this.overlay.className = 'uxbert-overlay';
+            this.overlay = document.createElement("div");
+            this.overlay.className = "uxbert-overlay";
             // Create modal
-            this.modal = document.createElement('div');
-            this.modal.className = 'uxbert-modal';
+            this.modal = document.createElement("div");
+            this.modal.className = "uxbert-modal";
             // Modal HTML
             this.modal.innerHTML = `
       <div class="uxbert-modal-header">
@@ -234,12 +234,13 @@ var Reportly = (function () {
 
         <div class="uxbert-form-group">
           <label class="uxbert-form-label" for="uxbert-priority">Priority</label>
-          <select id="uxbert-priority" class="uxbert-form-select">
-            <option value="Low">Low</option>
-            <option value="Medium" selected>Medium</option>
-            <option value="High">High</option>
-            <option value="Critical">Critical</option>
-          </select>
+         <select id="uxbert-priority" class="uxbert-form-select">
+          <option value="5" selected>Lowest</option>
+          <option value="4">Low</option>
+          <option value="3" selected>Medium</option>
+          <option value="2">High</option>
+          <option value="1">Highest</option>
+        </select>
         </div>
 
         <div class="uxbert-capture-action" id="uxbert-capture-action">
@@ -283,67 +284,67 @@ var Reportly = (function () {
             if (!this.modal)
                 return;
             // Close button
-            const closeBtn = this.modal.querySelector('.uxbert-modal-close');
-            closeBtn.addEventListener('click', () => this.close());
+            const closeBtn = this.modal.querySelector(".uxbert-modal-close");
+            closeBtn.addEventListener("click", () => this.close());
             // Cancel button
-            const cancelBtn = this.modal.querySelector('#uxbert-cancel-btn');
-            cancelBtn.addEventListener('click', () => this.close());
+            const cancelBtn = this.modal.querySelector("#uxbert-cancel-btn");
+            cancelBtn.addEventListener("click", () => this.close());
             // Overlay click to close
-            this.overlay?.addEventListener('click', (e) => {
+            this.overlay?.addEventListener("click", (e) => {
                 if (e.target === this.overlay) {
                     this.close();
                 }
             });
             // Form submit
-            const form = this.modal.querySelector('#uxbert-issue-form');
-            form.addEventListener('submit', (e) => {
+            const form = this.modal.querySelector("#uxbert-issue-form");
+            form.addEventListener("submit", (e) => {
                 e.preventDefault();
                 this.handleSubmit();
             });
             // Capture button
-            const captureBtn = this.modal.querySelector('#uxbert-capture-btn');
-            captureBtn.addEventListener('click', () => {
+            const captureBtn = this.modal.querySelector("#uxbert-capture-btn");
+            captureBtn.addEventListener("click", () => {
                 if (this.callbacks.onCapture) {
                     this.callbacks.onCapture();
                 }
             });
             // Annotate button
-            const annotateBtn = this.modal.querySelector('#uxbert-annotate-btn');
-            annotateBtn.addEventListener('click', () => {
+            const annotateBtn = this.modal.querySelector("#uxbert-annotate-btn");
+            annotateBtn.addEventListener("click", () => {
                 if (this.callbacks.onAnnotate) {
                     this.callbacks.onAnnotate();
                 }
             });
             // Retake button
-            const retakeBtn = this.modal.querySelector('#uxbert-retake-btn');
-            retakeBtn.addEventListener('click', () => {
+            const retakeBtn = this.modal.querySelector("#uxbert-retake-btn");
+            retakeBtn.addEventListener("click", () => {
                 if (this.callbacks.onRetake) {
                     this.callbacks.onRetake();
                 }
             });
             // n8n button
-            const n8nBtn = this.modal.querySelector('#uxbert-n8n-btn');
-            n8nBtn.addEventListener('click', () => {
+            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 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');
+                alert("Please enter an issue title");
                 return;
             }
             const issueData = {
                 title: title.trim(),
                 description: description.trim(),
-                priority
+                priority,
             };
             if (this.callbacks.onSendToN8n) {
                 this.callbacks.onSendToN8n(issueData);
@@ -352,30 +353,34 @@ var Reportly = (function () {
         handleSubmit() {
             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 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');
+                alert("Please enter an issue title");
                 return;
             }
             const issueData = {
                 title: title.trim(),
                 description: description.trim(),
-                priority
+                priority,
             };
             if (this.callbacks.onSubmit) {
                 this.callbacks.onSubmit(issueData);
             }
         }
         open() {
-            this.overlay?.classList.add('active');
+            this.overlay?.classList.add("active");
+            // Prevent body scroll when modal is open
+            document.body.style.overflow = "hidden";
         }
         close() {
-            this.overlay?.classList.remove('active');
+            this.overlay?.classList.remove("active");
+            // Restore body scroll when modal is closed
+            document.body.style.overflow = "";
             this.reset();
             if (this.callbacks.onClose) {
                 this.callbacks.onClose();
@@ -384,47 +389,49 @@ var Reportly = (function () {
         setScreenshot(screenshot) {
             if (!this.modal)
                 return;
-            const container = this.modal.querySelector('#uxbert-screenshot-container');
-            const img = this.modal.querySelector('#uxbert-screenshot-img');
-            const captureAction = this.modal.querySelector('#uxbert-capture-action');
-            const submitBtn = this.modal.querySelector('#uxbert-submit-btn');
+            const container = this.modal.querySelector("#uxbert-screenshot-container");
+            const img = this.modal.querySelector("#uxbert-screenshot-img");
+            const captureAction = this.modal.querySelector("#uxbert-capture-action");
+            const submitBtn = this.modal.querySelector("#uxbert-submit-btn");
             if (screenshot) {
                 img.src = screenshot;
-                container.style.display = 'block';
-                captureAction.style.display = 'none';
+                container.style.display = "block";
+                captureAction.style.display = "none";
                 submitBtn.disabled = false;
             }
             else {
-                container.style.display = 'none';
-                captureAction.style.display = 'block';
+                container.style.display = "none";
+                captureAction.style.display = "block";
                 submitBtn.disabled = true;
             }
         }
         getCaptureMode() {
             if (!this.modal)
-                return 'viewport';
-            const viewportRadio = this.modal.querySelector('#uxbert-capture-viewport');
-            return viewportRadio.checked ? 'viewport' : 'fullpage';
+                return "viewport";
+            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');
+            const n8nBtn = this.modal.querySelector("#uxbert-n8n-btn");
             if (n8nBtn) {
-                n8nBtn.style.display = visible ? 'inline-block' : 'none';
+                n8nBtn.style.display = visible ? "inline-block" : "none";
             }
         }
         reset() {
             if (!this.modal)
                 return;
-            this.modal.querySelector('#uxbert-title').value = '';
-            this.modal.querySelector('#uxbert-description').value = '';
-            this.modal.querySelector('#uxbert-priority').value = 'Medium';
+            this.modal.querySelector("#uxbert-title").value = "";
+            this.modal.querySelector("#uxbert-description").value = "";
+            this.modal.querySelector("#uxbert-priority").value = "Medium";
             this.setScreenshot(null);
         }
         destroy() {
             if (this.overlay && this.overlay.parentNode) {
                 this.overlay.parentNode.removeChild(this.overlay);
+                // Restore body scroll when destroying modal
+                document.body.style.overflow = "";
                 this.overlay = null;
                 this.modal = null;
             }
@@ -10223,24 +10230,23 @@ var Reportly = (function () {
             if (!this.config || !this.config.webhookUrl) {
                 return {
                     success: false,
-                    message: 'n8n webhook URL is not configured',
-                    error: 'MISSING_CONFIG'
+                    message: "n8n webhook URL is not configured",
+                    error: "MISSING_CONFIG",
                 };
             }
             if (!this.config.enabled) {
                 return {
                     success: false,
-                    message: 'n8n integration is disabled',
-                    error: 'DISABLED'
+                    message: "n8n integration is disabled",
+                    error: "DISABLED",
                 };
             }
             try {
-                // Prepare payload
-                const payload = this.preparePayload(issueData);
-                // Setup request headers
+                // Prepare FormData with binary screenshot
+                const formData = await this.prepareFormData(issueData);
+                // Setup request headers (don't set Content-Type - browser will set it with boundary for FormData)
                 const headers = {
-                    'Content-Type': 'application/json',
-                    ...this.config.headers
+                    ...this.config.headers,
                 };
                 // Setup timeout
                 const timeout = this.config.timeout || 30000; // 30 seconds default
@@ -10248,19 +10254,19 @@ var Reportly = (function () {
                 const timeoutId = setTimeout(() => controller.abort(), timeout);
                 // Send request
                 const response = await fetch(this.config.webhookUrl, {
-                    method: 'POST',
+                    method: "POST",
                     headers,
-                    body: JSON.stringify(payload),
-                    signal: controller.signal
+                    body: formData,
+                    signal: controller.signal,
                 });
                 clearTimeout(timeoutId);
                 // Check response
                 if (!response.ok) {
-                    const errorText = await response.text().catch(() => 'Unknown error');
+                    const errorText = await response.text().catch(() => "Unknown error");
                     return {
                         success: false,
                         message: `n8n webhook request failed: ${response.status} ${response.statusText}`,
-                        error: errorText
+                        error: errorText,
                     };
                 }
                 // Parse response
@@ -10270,76 +10276,87 @@ var Reportly = (function () {
                 }
                 catch (e) {
                     // Some webhooks don't return JSON
-                    responseData = { message: 'Success' };
+                    responseData = { message: "Success" };
                 }
                 return {
                     success: true,
-                    message: 'Issue sent to n8n successfully',
-                    workflowId: responseData.workflowId || responseData.executionId
+                    message: "Issue sent to n8n successfully",
+                    workflowId: responseData.workflowId || responseData.executionId,
                 };
             }
             catch (error) {
                 if (error instanceof Error) {
-                    if (error.name === 'AbortError') {
+                    if (error.name === "AbortError") {
                         return {
                             success: false,
-                            message: 'Request to n8n webhook timed out',
-                            error: 'TIMEOUT'
+                            message: "Request to n8n webhook timed out",
+                            error: "TIMEOUT",
                         };
                     }
                     return {
                         success: false,
                         message: `Failed to send issue to n8n: ${error.message}`,
-                        error: error.message
+                        error: error.message,
                     };
                 }
                 return {
                     success: false,
-                    message: 'Unknown error occurred while sending to n8n',
-                    error: 'UNKNOWN'
+                    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
+         * Convert base64 data URL to Blob
          */
-        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()
-                }
-            };
+        base64ToBlob(base64Data) {
+            // Extract the base64 string and mime type
+            const matches = base64Data.match(/^data:([^;]+);base64,(.+)$/);
+            if (!matches) {
+                throw new Error("Invalid base64 data URL");
+            }
+            const mimeType = matches[1];
+            const base64String = matches[2];
+            // Decode base64
+            const byteCharacters = atob(base64String);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            return new Blob([byteArray], { type: mimeType });
+        }
+        /**
+         * Prepare FormData payload for n8n webhook
+         * This sends the screenshot as a binary file instead of base64 JSON
+         */
+        async prepareFormData(issueData) {
+            const formData = new FormData();
+            // Add issue data as JSON string
+            formData.append("title", issueData.title);
+            formData.append("description", issueData.description);
+            formData.append("priority", issueData.priority);
+            formData.append("createdAt", issueData.createdAt);
+            // Convert base64 screenshot to binary Blob and add as file
+            const screenshotBlob = this.base64ToBlob(issueData.screenshot);
+            const filename = `screenshot-${Date.now()}.png`;
+            formData.append("screenshot", screenshotBlob, filename);
+            // Add device info as individual fields
+            formData.append("browser", issueData.deviceInfo.browser);
+            formData.append("os", issueData.deviceInfo.os);
+            formData.append("screenResolution", issueData.deviceInfo.screenResolution);
+            formData.append("viewport", issueData.deviceInfo.viewport);
+            formData.append("url", issueData.deviceInfo.url);
+            formData.append("userAgent", issueData.deviceInfo.userAgent);
+            formData.append("language", issueData.deviceInfo.language || "");
+            formData.append("platform", issueData.deviceInfo.platform);
+            formData.append("cookiesEnabled", String(issueData.deviceInfo.cookiesEnabled));
+            formData.append("onLine", String(issueData.deviceInfo.onLine));
+            formData.append("timestamp", issueData.deviceInfo.timestamp);
+            // Add metadata
+            formData.append("source", "uxbert-reportly");
+            formData.append("version", "1.0.0");
+            return formData;
         }
         /**
          * Test connection to n8n webhook
@@ -10348,28 +10365,28 @@ var Reportly = (function () {
             if (!this.config || !this.config.webhookUrl) {
                 return {
                     success: false,
-                    message: 'n8n webhook URL is not configured',
-                    error: 'MISSING_CONFIG'
+                    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
+                    method: "HEAD",
+                    signal: controller.signal,
                 });
                 clearTimeout(timeoutId);
                 return {
                     success: true,
-                    message: 'n8n webhook is reachable'
+                    message: "n8n webhook is reachable",
                 };
             }
             catch (error) {
                 return {
                     success: false,
-                    message: 'Failed to reach n8n webhook',
-                    error: error instanceof Error ? error.message : 'UNKNOWN'
+                    message: "Failed to reach n8n webhook",
+                    error: error instanceof Error ? error.message : "UNKNOWN",
                 };
             }
         }
@@ -10386,7 +10403,7 @@ var Reportly = (function () {
             if (!this.config) {
                 this.config = {
                     webhookUrl: url,
-                    enabled: true
+                    enabled: true,
                 };
             }
             else {
@@ -10552,7 +10569,7 @@ var Reportly = (function () {
       }
     }
 
-    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}}";
+    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;overflow:hidden;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