@uxbertlabs/reportly 1.0.5 → 1.0.7

package/dist/reportly.esm.js

@@ -80,6 +80,7 @@ class State {
         this.screenshot = null;
         this.annotations = [];
         this.listeners = {};
+        this.captureMode = 'viewport';
     }
     setState(newState) {
         this.currentState = newState;
@@ -109,11 +110,18 @@ class State {
     clearAnnotations() {
         this.annotations = [];
     }
+    setCaptureMode(mode) {
+        this.captureMode = mode;
+    }
+    getCaptureMode() {
+        return this.captureMode;
+    }
     reset() {
         this.currentState = STATE.IDLE;
         this.currentIssue = null;
         this.screenshot = null;
         this.annotations = [];
+        this.captureMode = 'viewport';
     }
     // Event system
     on(event, callback) {
@@ -187,6 +195,20 @@ class Modal {
       </div>
 
       <form class="uxbert-form" id="uxbert-issue-form">
+        <div class="uxbert-form-group">
+          <label class="uxbert-form-label">Capture Mode</label>
+          <div class="uxbert-capture-mode">
+            <label class="uxbert-radio-label">
+              <input type="radio" name="capture-mode" value="viewport" id="uxbert-capture-viewport" checked />
+              <span>Current View</span>
+            </label>
+            <label class="uxbert-radio-label">
+              <input type="radio" name="capture-mode" value="fullpage" id="uxbert-capture-fullpage" />
+              <span>Full Page</span>
+            </label>
+          </div>
+        </div>
+
         <div class="uxbert-form-group">
           <label class="uxbert-form-label" for="uxbert-title">Issue Title *</label>
           <input
@@ -217,6 +239,12 @@ class Modal {
           </select>
         </div>
 
+        <div class="uxbert-capture-action" id="uxbert-capture-action">
+          <button type="button" class="uxbert-btn uxbert-btn-primary" id="uxbert-capture-btn">
+            📸 Take Screenshot
+          </button>
+        </div>
+
         <div class="uxbert-screenshot-preview" id="uxbert-screenshot-container" style="display: none;">
           <img id="uxbert-screenshot-img" src="" alt="Screenshot" />
           <div class="uxbert-screenshot-actions">
@@ -233,7 +261,7 @@ class Modal {
           <button type="button" class="uxbert-btn uxbert-btn-secondary" id="uxbert-cancel-btn">
             Cancel
           </button>
-          <button type="submit" class="uxbert-btn uxbert-btn-primary">
+          <button type="submit" class="uxbert-btn uxbert-btn-primary" id="uxbert-submit-btn">
             📥 Download JSON
           </button>
         </div>
@@ -266,6 +294,13 @@ class Modal {
             e.preventDefault();
             this.handleSubmit();
         });
+        // Capture button
+        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', () => {
@@ -318,14 +353,26 @@ class 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');
         if (screenshot) {
             img.src = screenshot;
             container.style.display = 'block';
+            captureAction.style.display = 'none';
+            submitBtn.disabled = false;
         }
         else {
             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';
+    }
     reset() {
         if (!this.modal)
             return;
@@ -9400,26 +9447,87 @@ class Screenshot {
     constructor() {
         this.currentScreenshot = null;
     }
-    async capture() {
+    async capture(mode = 'fullpage') {
         try {
             // Hide UXbert UI elements before capturing
             this.hideUXbertElements();
-            // Scroll to top to capture full page
             const originalScrollY = window.scrollY;
-            window.scrollTo(0, 0);
-            // Get full page dimensions
-            const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
-            const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
-            // Capture the full page
-            const canvas = await html2canvas(document.body, {
-                allowTaint: true,
-                useCORS: true,
-                logging: false,
-                width: fullPageWidth,
-                height: fullPageHeight,
-            });
-            // Restore scroll position
-            window.scrollTo(0, originalScrollY);
+            let canvas;
+            if (mode === 'viewport') {
+                // Capture only the current viewport
+                canvas = await html2canvas(document.body, {
+                    useCORS: true,
+                    allowTaint: false,
+                    logging: false,
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                    windowWidth: window.innerWidth,
+                    windowHeight: window.innerHeight,
+                    x: window.scrollX,
+                    y: window.scrollY,
+                    ignoreElements: (element) => {
+                        // Skip cross-origin images that might cause issues
+                        if (element.tagName === 'IMG') {
+                            const img = element;
+                            try {
+                                // Test if image is accessible
+                                const canvas = document.createElement('canvas');
+                                const ctx = canvas.getContext('2d');
+                                canvas.width = 1;
+                                canvas.height = 1;
+                                ctx?.drawImage(img, 0, 0, 1, 1);
+                                canvas.toDataURL(); // This will throw if tainted
+                                return false; // Include the image
+                            }
+                            catch (e) {
+                                // Image is tainted, skip it
+                                console.warn('Skipping cross-origin image:', img.src);
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                });
+            }
+            else {
+                // Scroll to top to capture full page
+                window.scrollTo(0, 0);
+                // Get full page dimensions
+                const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+                const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
+                // Capture the full page
+                canvas = await html2canvas(document.body, {
+                    useCORS: true,
+                    allowTaint: false,
+                    logging: false,
+                    width: fullPageWidth,
+                    height: fullPageHeight,
+                    ignoreElements: (element) => {
+                        // Skip cross-origin images that might cause issues
+                        if (element.tagName === 'IMG') {
+                            const img = element;
+                            try {
+                                // Test if image is accessible
+                                const canvas = document.createElement('canvas');
+                                const ctx = canvas.getContext('2d');
+                                canvas.width = 1;
+                                canvas.height = 1;
+                                ctx?.drawImage(img, 0, 0, 1, 1);
+                                canvas.toDataURL(); // This will throw if tainted
+                                return false; // Include the image
+                            }
+                            catch (e) {
+                                // Image is tainted, skip it
+                                console.warn('Skipping cross-origin image:', img.src);
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                });
+                // Restore scroll position
+                window.scrollTo(0, originalScrollY);
+            }
             // Show UXbert UI elements again
             this.showUXbertElements();
             // Convert to base64
@@ -9495,29 +9603,46 @@ class AnnotationManager {
         document.body.appendChild(this.canvas);
         return this.canvas;
     }
-    updateCanvasSize() {
+    updateCanvasSize(mode = 'fullpage') {
         if (!this.canvas)
             return;
-        // Get full page dimensions
-        const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
-        const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
-        this.canvas.width = fullPageWidth;
-        this.canvas.height = fullPageHeight;
+        if (mode === 'viewport') {
+            // Set canvas to viewport dimensions
+            this.canvas.width = window.innerWidth;
+            this.canvas.height = window.innerHeight;
+        }
+        else {
+            // Get full page dimensions
+            const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+            const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
+            this.canvas.width = fullPageWidth;
+            this.canvas.height = fullPageHeight;
+        }
     }
-    show() {
+    show(mode = 'fullpage') {
         if (this.canvas && this.ctx) {
             // Update canvas size to match current page dimensions
-            this.updateCanvasSize();
+            this.updateCanvasSize(mode);
             // Reset context properties after resize
             this.ctx.lineCap = 'round';
             this.ctx.lineJoin = 'round';
             this.canvas.classList.add('active');
+            // If viewport mode, add viewport-mode class
+            if (mode === 'viewport') {
+                this.canvas.classList.add('viewport-mode');
+                // Note: We don't disable scrolling in viewport mode to allow users to scroll
+                // and annotate different parts of the viewport
+            }
+            else {
+                this.canvas.classList.remove('viewport-mode');
+            }
             this.redraw();
         }
     }
     hide() {
         if (this.canvas) {
             this.canvas.classList.remove('active');
+            this.canvas.classList.remove('viewport-mode');
         }
         // Clean up any active text input
         this.removeTextInput();
@@ -9530,10 +9655,13 @@ class AnnotationManager {
         this.currentColor = color;
     }
     handleMouseDown(e) {
+        const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+        const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
+        const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
         // Handle text tool separately
         if (this.currentTool === 'text') {
-            const x = e.clientX + window.scrollX;
-            const y = e.clientY + window.scrollY;
+            const x = e.clientX + scrollOffsetX;
+            const y = e.clientY + scrollOffsetY;
             // Check if clicking on existing text to edit
             const clickedText = this.getTextAnnotationAt(x, y);
             if (clickedText) {
@@ -9545,15 +9673,18 @@ class AnnotationManager {
             return;
         }
         this.isDrawing = true;
-        this.startX = e.clientX + window.scrollX;
-        this.startY = e.clientY + window.scrollY;
+        this.startX = e.clientX + scrollOffsetX;
+        this.startY = e.clientY + scrollOffsetY;
         this.currentPath = [{ x: this.startX, y: this.startY }];
     }
     handleMouseMove(e) {
         if (!this.isDrawing || !this.ctx)
             return;
-        const x = e.clientX + window.scrollX;
-        const y = e.clientY + window.scrollY;
+        const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+        const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
+        const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
+        const x = e.clientX + scrollOffsetX;
+        const y = e.clientY + scrollOffsetY;
         if (this.currentTool === 'pen') {
             this.currentPath.push({ x, y });
             this.redraw();
@@ -9573,8 +9704,11 @@ class AnnotationManager {
         if (!this.isDrawing)
             return;
         this.isDrawing = false;
-        const x = e.clientX + window.scrollX;
-        const y = e.clientY + window.scrollY;
+        const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+        const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
+        const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
+        const x = e.clientX + scrollOffsetX;
+        const y = e.clientY + scrollOffsetY;
         // Save the annotation
         if (this.currentTool === 'pen') {
             this.annotations.push({
@@ -10047,7 +10181,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-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-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-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-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
@@ -10089,6 +10223,7 @@ class Reportly {
             onClose: () => this.handleModalClose(),
             onAnnotate: () => this.startAnnotation(),
             onRetake: () => this.retakeScreenshot(),
+            onCapture: () => this.captureWithMode(),
         });
         this.toolbar = new Toolbar({
             onToolChange: (tool) => this.annotation?.setTool(tool),
@@ -10119,14 +10254,27 @@ class Reportly {
         });
     }
     async handleButtonClick() {
+        try {
+            // Open modal first to let user choose capture mode
+            this.modal?.open();
+        }
+        catch (error) {
+            console.error("Failed to open modal:", error);
+            alert("Failed to open modal. Please try again.");
+        }
+    }
+    async captureWithMode() {
         try {
             this.state?.setState(STATE.CAPTURING);
+            // Get capture mode from modal
+            const captureMode = this.modal?.getCaptureMode() || 'viewport';
+            // Save capture mode in state
+            this.state?.setCaptureMode(captureMode);
             // Capture screenshot
-            const screenshot = await this.screenshot.capture();
+            const screenshot = await this.screenshot.capture(captureMode);
             this.state?.setScreenshot(screenshot);
             // Show modal with screenshot
             this.modal?.setScreenshot(screenshot);
-            this.modal?.open();
             this.state?.setState(STATE.IDLE);
         }
         catch (error) {
@@ -10139,7 +10287,8 @@ class Reportly {
         this.state?.setState(STATE.ANNOTATING);
         this.modal?.close();
         this.button?.hide();
-        this.annotation?.show();
+        const captureMode = this.state?.getCaptureMode() || 'viewport';
+        this.annotation?.show(captureMode);
         this.toolbar?.show();
     }
     exitAnnotation() {
@@ -10175,13 +10324,16 @@ class Reportly {
     }
     async retakeScreenshot() {
         try {
+            // Get the current capture mode from modal before closing
+            const captureMode = this.modal?.getCaptureMode() || 'viewport';
             this.modal?.close();
             this.state?.setState(STATE.CAPTURING);
             // Clear previous annotations
             this.annotation?.clear();
-            // Capture new screenshot
-            const screenshot = await this.screenshot.capture();
+            // Capture new screenshot with the same mode
+            const screenshot = await this.screenshot.capture(captureMode);
             this.state?.setScreenshot(screenshot);
+            this.state?.setCaptureMode(captureMode);
             // Show modal with new screenshot
             this.modal?.setScreenshot(screenshot);
             this.modal?.open();