@uxbertlabs/reportly 1.0.21 → 1.0.22

package/dist/components/IssueModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IssueModal.d.ts","sourceRoot":"","sources":["../../src/components/IssueModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAc,EAAE,EAAE,eAAe,4BAkX7D;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IssueModal.d.ts","sourceRoot":"","sources":["../../src/components/IssueModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAc,EAAE,EAAE,eAAe,4BA2Y7D;AAED,eAAe,UAAU,CAAC"}

package/dist/components/Reportly.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reportly.d.ts","sourceRoot":"","sources":["../../src/components/Reportly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAkFD,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,aAAa,qBAMjD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Reportly.d.ts","sourceRoot":"","sources":["../../src/components/Reportly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AA0GD,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,aAAa,qBAMjD;AAED,eAAe,QAAQ,CAAC"}

package/dist/features/annotation.d.ts

@@ -12,10 +12,17 @@ declare class AnnotationManager {
     private currentPath;
     private textInput;
     private currentTextAnnotation;
+    private drawingBounds;
+    private currentMode;
+    private scrollListener;
+    private initialScrollPosition;
     constructor();
     createCanvas(): HTMLCanvasElement;
     private updateCanvasSize;
+    private updateDrawingBounds;
+    private checkAndAdjustCanvasMode;
     show(mode?: 'viewport' | 'fullpage'): void;
+    private handleScroll;
     hide(): void;
     setTool(tool: AnnotationTool): void;
     setColor(color: string): void;
@@ -37,7 +44,8 @@ declare class AnnotationManager {
     private redraw;
     undo(): void;
     clear(): void;
-    exportAnnotatedScreenshot(baseScreenshot: string): Promise<string>;
+    getCurrentMode(): 'viewport' | 'fullpage';
+    exportAnnotatedScreenshot(baseScreenshot: string, mode?: 'viewport' | 'fullpage'): Promise<string>;
     destroy(): void;
 }
 export default AnnotationManager;

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

@@ -1 +1 @@
-{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;;IAiB1G,YAAY,IAAI,iBAAiB;IAkCjC,OAAO,CAAC,gBAAgB;IA8BxB,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IAgCtD,IAAI,IAAI,IAAI;IAUZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA+DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAKP,yBAAyB,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IA0BxE,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;IAC1G,OAAO,CAAC,aAAa,CAAoE;IACzF,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,qBAAqB,CAAkC;;IAqB/D,YAAY,IAAI,iBAAiB;IAqDjC,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,wBAAwB;IAwDhC,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IA8CtD,OAAO,CAAC,YAAY;IAmCpB,IAAI,IAAI,IAAI;IAkBZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA8DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAMb,cAAc,IAAI,UAAU,GAAG,UAAU;IAInC,yBAAyB,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC;IAkDxG,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/index.cjs.js

@@ -9497,6 +9497,11 @@ class Screenshot {
   }
 }
 
+var screenshot = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: Screenshot
+});
+
 const initialState = {
   isOpen: false,
   isAnnotating: false,
@@ -13107,7 +13112,7 @@ function FloatingButton({
 }) {
   const {
     state,
-    openModal
+    startAnnotation
   } = useReportly();
   const {
     config
@@ -13126,7 +13131,7 @@ function FloatingButton({
     style: {
       zIndex: "var(--uxbert-z-button)"
     },
-    onClick: openModal,
+    onClick: startAnnotation,
     title: "Report an issue",
     "aria-label": "Report an issue"
   }, /*#__PURE__*/React.createElement(Bug, {
@@ -13163,7 +13168,8 @@ function IssueModal({
     retakeScreenshot,
     startAnnotation,
     submitIssue,
-    submitToN8n
+    submitToN8n,
+    reset
   } = useReportly();
   const [formData, setFormData] = React.useState({
     title: "",
@@ -13180,6 +13186,27 @@ function IssueModal({
       [field]: value
     }));
   }, []);
+  const handleClose = React.useCallback(() => {
+    // Check if there's any data that would be lost
+    const hasData = state.screenshot !== null || formData.title.trim() !== "" || formData.description.trim() !== "";
+    if (hasData) {
+      const confirmed = window.confirm("Are you sure you want to close? All unsaved data (screenshot, title, description) will be lost.");
+      if (confirmed) {
+        // Clear all data
+        reset();
+        setFormData({
+          title: "",
+          description: "",
+          priority: "Medium",
+          deviceType: "desktop"
+        });
+        closeModal();
+      }
+    } else {
+      // No data to lose, just close
+      closeModal();
+    }
+  }, [state.screenshot, formData.title, formData.description, reset, closeModal]);
   const handleCapture = React.useCallback(async () => {
     try {
       await captureScreenshot(captureMode);
@@ -13209,6 +13236,7 @@ function IssueModal({
     try {
       setIsSubmitting(true);
       submitIssue(formData);
+      // Form data is cleared by the submitIssue function which calls reset()
       setFormData({
         title: "",
         description: "",
@@ -13278,7 +13306,7 @@ function IssueModal({
   })), /*#__PURE__*/React.createElement("h2", {
     className: "text-xl font-semibold"
   }, "Report Issue")), /*#__PURE__*/React.createElement("button", {
-    onClick: closeModal,
+    onClick: handleClose,
     className: "p-2 rounded-md hover:bg-muted transition-colors cursor-pointer",
     "aria-label": "Close"
   }, /*#__PURE__*/React.createElement(X, {
@@ -13643,12 +13671,20 @@ class AnnotationManager {
     this.currentPath = [];
     this.textInput = null;
     this.currentTextAnnotation = null;
+    this.drawingBounds = null;
+    this.currentMode = 'fullpage';
+    this.scrollListener = null;
+    this.initialScrollPosition = null;
   }
   createCanvas() {
+    // Calculate page dimensions BEFORE creating canvas
+    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);
+    // Create canvas with calculated dimensions
     this.canvas = document.createElement('canvas');
     this.canvas.className = 'uxbert-canvas-overlay';
-    // Set canvas to full page dimensions
-    this.updateCanvasSize();
+    this.canvas.width = fullPageWidth;
+    this.canvas.height = fullPageHeight;
     this.ctx = this.canvas.getContext('2d');
     if (this.ctx) {
       // Set canvas styles
@@ -13668,6 +13704,8 @@ class AnnotationManager {
       className: this.canvas.className,
       width: this.canvas.width,
       height: this.canvas.height,
+      fullPageHeight: fullPageHeight,
+      fullPageWidth: fullPageWidth,
       inDOM: document.body.contains(this.canvas)
     });
     return this.canvas;
@@ -13686,8 +13724,80 @@ class AnnotationManager {
       this.canvas.height = fullPageHeight;
     }
   }
+  updateDrawingBounds(x, y) {
+    if (!this.drawingBounds) {
+      this.drawingBounds = {
+        minX: x,
+        minY: y,
+        maxX: x,
+        maxY: y
+      };
+    } else {
+      this.drawingBounds.minX = Math.min(this.drawingBounds.minX, x);
+      this.drawingBounds.minY = Math.min(this.drawingBounds.minY, y);
+      this.drawingBounds.maxX = Math.max(this.drawingBounds.maxX, x);
+      this.drawingBounds.maxY = Math.max(this.drawingBounds.maxY, y);
+    }
+  }
+  checkAndAdjustCanvasMode() {
+    if (!this.drawingBounds || !this.canvas) return;
+    // Get current viewport bounds (accounting for scroll position)
+    const viewportBounds = {
+      minX: window.scrollX,
+      minY: window.scrollY,
+      maxX: window.scrollX + window.innerWidth,
+      maxY: window.scrollY + window.innerHeight
+    };
+    // Check if all drawings are within viewport
+    const isWithinViewport = this.drawingBounds.minX >= viewportBounds.minX && this.drawingBounds.maxX <= viewportBounds.maxX && this.drawingBounds.minY >= viewportBounds.minY && this.drawingBounds.maxY <= viewportBounds.maxY;
+    // If currently in fullpage mode and drawings are within viewport, switch to viewport mode
+    if (this.currentMode === 'fullpage' && isWithinViewport && this.annotations.length > 0) {
+      console.log('🔄 Switching to viewport mode - all drawings within viewport', {
+        drawingBounds: this.drawingBounds,
+        viewportBounds
+      });
+      this.currentMode = 'viewport';
+      this.updateCanvasSize('viewport');
+      this.canvas.classList.add('viewport-mode');
+      // Reset context properties after resize
+      if (this.ctx) {
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+      }
+      this.redraw();
+    }
+    // If currently in viewport mode but drawings extend beyond, switch to fullpage mode
+    else if (this.currentMode === 'viewport' && !isWithinViewport) {
+      console.log('🔄 Switching to fullpage mode - drawings extend beyond viewport', {
+        drawingBounds: this.drawingBounds,
+        viewportBounds
+      });
+      this.currentMode = 'fullpage';
+      this.updateCanvasSize('fullpage');
+      this.canvas.classList.remove('viewport-mode');
+      // Reset context properties after resize
+      if (this.ctx) {
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+      }
+      this.redraw();
+    }
+  }
   show(mode = 'fullpage') {
     if (this.canvas && this.ctx) {
+      // Set the current mode and reset drawing bounds for new annotation session
+      this.currentMode = mode;
+      this.drawingBounds = null;
+      // Store initial scroll position
+      this.initialScrollPosition = {
+        x: window.scrollX,
+        y: window.scrollY
+      };
+      // Add scroll listener to detect scrolling
+      this.scrollListener = this.handleScroll.bind(this);
+      window.addEventListener('scroll', this.scrollListener, {
+        passive: true
+      });
       // Update canvas size to match current page dimensions
       this.updateCanvasSize(mode);
       // Reset context properties after resize
@@ -13714,11 +13824,51 @@ class AnnotationManager {
       this.redraw();
     }
   }
+  handleScroll() {
+    if (!this.initialScrollPosition) return;
+    // Check if user has scrolled significantly (more than 10 pixels)
+    const scrollThreshold = 10;
+    const scrollDeltaX = Math.abs(window.scrollX - this.initialScrollPosition.x);
+    const scrollDeltaY = Math.abs(window.scrollY - this.initialScrollPosition.y);
+    if (scrollDeltaX > scrollThreshold || scrollDeltaY > scrollThreshold) {
+      // User scrolled - switch to fullpage mode if not already
+      if (this.currentMode === 'viewport') {
+        console.log('📜 User scrolled - switching to fullpage mode', {
+          scrollDelta: {
+            x: scrollDeltaX,
+            y: scrollDeltaY
+          },
+          initialScroll: this.initialScrollPosition,
+          currentScroll: {
+            x: window.scrollX,
+            y: window.scrollY
+          }
+        });
+        this.currentMode = 'fullpage';
+        this.updateCanvasSize('fullpage');
+        if (this.canvas) {
+          this.canvas.classList.remove('viewport-mode');
+        }
+        // Reset context properties after resize
+        if (this.ctx) {
+          this.ctx.lineCap = 'round';
+          this.ctx.lineJoin = 'round';
+        }
+        this.redraw();
+      }
+    }
+  }
   hide() {
     if (this.canvas) {
       this.canvas.classList.remove('active');
       this.canvas.classList.remove('viewport-mode');
     }
+    // Remove scroll listener
+    if (this.scrollListener) {
+      window.removeEventListener('scroll', this.scrollListener);
+      this.scrollListener = null;
+    }
+    this.initialScrollPosition = null;
     // Clean up any active text input
     this.removeTextInput();
     this.currentTextAnnotation = null;
@@ -13731,12 +13881,16 @@ class AnnotationManager {
   }
   handleMouseDown(e) {
     const isViewportMode = this.canvas?.classList.contains('viewport-mode');
+    // For fullpage mode (absolute positioning), we need to add scroll offset
+    // For viewport mode (fixed positioning), we don't need scroll offset
     const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
     const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
     // Handle text tool separately
     if (this.currentTool === 'text') {
       const x = e.clientX + scrollOffsetX;
       const y = e.clientY + scrollOffsetY;
+      // Update drawing bounds for text
+      this.updateDrawingBounds(x, y);
       // Check if clicking on existing text to edit
       const clickedText = this.getTextAnnotationAt(x, y);
       if (clickedText) {
@@ -13754,6 +13908,8 @@ class AnnotationManager {
       x: this.startX,
       y: this.startY
     }];
+    // Update drawing bounds with start position
+    this.updateDrawingBounds(this.startX, this.startY);
   }
   handleMouseMove(e) {
     if (!this.isDrawing || !this.ctx) return;
@@ -13762,6 +13918,8 @@ class AnnotationManager {
     const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
     const x = e.clientX + scrollOffsetX;
     const y = e.clientY + scrollOffsetY;
+    // Update drawing bounds with current position
+    this.updateDrawingBounds(x, y);
     if (this.currentTool === 'pen') {
       this.currentPath.push({
         x,
@@ -13786,6 +13944,8 @@ class AnnotationManager {
     const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
     const x = e.clientX + scrollOffsetX;
     const y = e.clientY + scrollOffsetY;
+    // Update drawing bounds with final position
+    this.updateDrawingBounds(x, y);
     // Save the annotation
     if (this.currentTool === 'pen') {
       this.annotations.push({
@@ -13813,6 +13973,8 @@ class AnnotationManager {
         color: this.currentColor
       });
     }
+    // Check if we need to adjust canvas mode based on drawing location
+    this.checkAndAdjustCanvasMode();
     this.redraw();
   }
   handleTouchStart(e) {
@@ -13883,8 +14045,7 @@ class AnnotationManager {
     this.textInput = document.createElement('input');
     this.textInput.type = 'text';
     this.textInput.className = 'uxbert-text-input';
-    this.textInput.style.position = 'absolute';
-    // Position relative to the document, accounting for scroll
+    // Position relative to the document (absolute positioning)
     this.textInput.style.left = `${x}px`;
     this.textInput.style.top = `${y}px`;
     this.textInput.style.transform = 'translate(0, 0)';
@@ -13948,6 +14109,8 @@ class AnnotationManager {
       if (text) {
         this.currentTextAnnotation.text = text;
         this.annotations.push(this.currentTextAnnotation);
+        // Check if we need to adjust canvas mode based on drawing location
+        this.checkAndAdjustCanvasMode();
         this.redraw();
       }
     }
@@ -14028,9 +14191,13 @@ class AnnotationManager {
   }
   clear() {
     this.annotations = [];
+    this.drawingBounds = null;
     this.redraw();
   }
-  async exportAnnotatedScreenshot(baseScreenshot) {
+  getCurrentMode() {
+    return this.currentMode;
+  }
+  async exportAnnotatedScreenshot(baseScreenshot, mode) {
     // Create a temporary canvas to combine screenshot + annotations
     const tempCanvas = document.createElement('canvas');
     const img = new Image();
@@ -14044,8 +14211,29 @@ class AnnotationManager {
         if (tempCtx && this.canvas) {
           // Draw the base screenshot
           tempCtx.drawImage(img, 0, 0);
-          // Draw annotations on top
-          tempCtx.drawImage(this.canvas, 0, 0);
+          // If mode is specified and different from current canvas mode, we need to adjust
+          const isCanvasInViewportMode = this.canvas.classList.contains('viewport-mode');
+          const isTargetFullpage = mode === 'fullpage';
+          if (isCanvasInViewportMode && isTargetFullpage) {
+            // User drew in viewport mode, but we're capturing fullpage
+            // Need to offset annotations by current scroll position
+            const scrollOffsetX = window.scrollX;
+            const scrollOffsetY = window.scrollY;
+            // Create a temporary canvas for adjusted annotations
+            const adjustedCanvas = document.createElement('canvas');
+            adjustedCanvas.width = tempCanvas.width;
+            adjustedCanvas.height = tempCanvas.height;
+            const adjustedCtx = adjustedCanvas.getContext('2d');
+            if (adjustedCtx) {
+              // Draw annotations with scroll offset
+              adjustedCtx.drawImage(this.canvas, scrollOffsetX, scrollOffsetY);
+              // Draw the adjusted annotations on top of screenshot
+              tempCtx.drawImage(adjustedCanvas, 0, 0);
+            }
+          } else {
+            // Draw annotations directly on top
+            tempCtx.drawImage(this.canvas, 0, 0);
+          }
           resolve(tempCanvas.toDataURL('image/png'));
         }
       };
@@ -14091,14 +14279,15 @@ function ReportlyInner() {
   React.useEffect(() => {
     if (annotationRef.current) {
       if (state.isAnnotating) {
-        console.log('Showing canvas in mode:', state.captureMode);
-        annotationRef.current.show(state.captureMode);
+        // Start in fullpage mode - it will auto-switch to viewport if drawings stay within viewport
+        console.log('Showing canvas in fullpage mode (will auto-adjust based on drawing location)');
+        annotationRef.current.show('fullpage');
       } else {
         console.log('Hiding canvas');
         annotationRef.current.hide();
       }
     }
-  }, [state.isAnnotating, state.captureMode]);
+  }, [state.isAnnotating]);
   const handleUndo = () => {
     annotationRef.current?.undo();
   };
@@ -14106,14 +14295,31 @@ function ReportlyInner() {
     annotationRef.current?.clear();
   };
   const handleDone = async () => {
-    if (!annotationRef.current || !state.screenshot) return;
+    if (!annotationRef.current) return;
     try {
-      const annotatedScreenshot = await annotationRef.current.exportAnnotatedScreenshot(state.screenshot);
+      const Screenshot = (await Promise.resolve().then(function () { return screenshot; })).default;
+      // Use the current mode from annotation manager (it has auto-adjusted based on drawing location)
+      const captureMode = annotationRef.current.getCurrentMode();
+      console.log('Using capture mode from annotation manager:', captureMode);
+      // Hide the annotation canvas temporarily
+      annotationRef.current.hide();
+      // Capture the screenshot
+      const screenshotService = new Screenshot();
+      const baseScreenshot = await screenshotService.capture(captureMode);
+      // Export the annotated screenshot (combine base screenshot + annotations)
+      // Pass the capture mode so annotations can be positioned correctly
+      const annotatedScreenshot = await annotationRef.current.exportAnnotatedScreenshot(baseScreenshot, captureMode);
+      // Update the screenshot in state
       updateScreenshot(annotatedScreenshot);
+      // End annotation mode and show the modal
       endAnnotation();
     } catch (error) {
       console.error('Failed to finish annotation:', error);
-      alert('Failed to process annotations. Please try again.');
+      alert('Failed to capture screenshot. Please try again.');
+      // Show canvas again in case of error
+      if (annotationRef.current) {
+        annotationRef.current.show('fullpage'); // Default back to fullpage mode on error
+      }
     }
   };
   const handleExit = () => {