pushfeedback 0.1.68 → 0.1.69

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"metadata":[1],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"metadata":[1],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"takingScreenshot":[32],"showPreviewModal":[32],"showCanvasEditor":[32],"canvasDrawingTool":[32],"canvasDrawingColor":[32],"canvasLineWidth":[32],"isDrawing":[32],"annotations":[32],"currentAnnotation":[32],"isDragging":[32],"draggedAnnotation":[32],"dragStartPos":[32],"showColorPicker":[32],"editingColorIndex":[32],"isResizing":[32],"resizingAnnotation":[32],"resizeStartSize":[32],"hoveredAnnotation":[32],"resizeHandle":[32],"defaultColors":[32],"openModal":[64]}]]]], options);
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"metadata":[1],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"metadata":[1],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"takingScreenshot":[32],"showPreviewModal":[32],"screenshotError":[32],"showScreenshotError":[32],"showCanvasEditor":[32],"canvasDrawingTool":[32],"canvasDrawingColor":[32],"canvasLineWidth":[32],"isDrawing":[32],"annotations":[32],"currentAnnotation":[32],"isDragging":[32],"draggedAnnotation":[32],"dragStartPos":[32],"showColorPicker":[32],"editingColorIndex":[32],"isResizing":[32],"resizingAnnotation":[32],"resizeStartSize":[32],"resizeStartDimensions":[32],"hoveredAnnotation":[32],"resizeHandle":[32],"defaultColors":[32],"openModal":[64]}]]]], options);
   });
 };
 

package/dist/cjs/pushfeedback.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"metadata":[1],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"metadata":[1],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"takingScreenshot":[32],"showPreviewModal":[32],"showCanvasEditor":[32],"canvasDrawingTool":[32],"canvasDrawingColor":[32],"canvasLineWidth":[32],"isDrawing":[32],"annotations":[32],"currentAnnotation":[32],"isDragging":[32],"draggedAnnotation":[32],"dragStartPos":[32],"showColorPicker":[32],"editingColorIndex":[32],"isResizing":[32],"resizingAnnotation":[32],"resizeStartSize":[32],"hoveredAnnotation":[32],"resizeHandle":[32],"defaultColors":[32],"openModal":[64]}]]]], options);
+  return index.bootstrapLazy([["feedback-button_2.cjs",[[1,"feedback-button",{"buttonPosition":[1,"button-position"],"buttonStyle":[1,"button-style"],"hideIcon":[4,"hide-icon"],"hideMobile":[4,"hide-mobile"],"sessionId":[1537,"session-id"],"metadata":[1],"submit":[4],"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"isEmailRequired":[4,"is-email-required"],"fetchData":[4,"fetch-data"],"hideEmail":[4,"hide-email"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"modalPosition":[1,"modal-position"],"project":[1],"rating":[2],"ratingMode":[1,"rating-mode"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"footerText":[1,"footer-text"],"messagePlaceholder":[1,"message-placeholder"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"sendButtonText":[1,"send-button-text"],"successMessage":[1,"success-message"]}],[1,"feedback-modal",{"customFont":[4,"custom-font"],"emailAddress":[1,"email-address"],"hideEmail":[4,"hide-email"],"isEmailRequired":[4,"is-email-required"],"ratingMode":[1,"rating-mode"],"hasSelectedElement":[1540,"has-selected-element"],"hidePrivacyPolicy":[4,"hide-privacy-policy"],"hideRating":[4,"hide-rating"],"hideScreenshotButton":[4,"hide-screenshot-button"],"project":[1],"showScreenshotMode":[1540,"show-screenshot-mode"],"showScreenshotTopBar":[1540,"show-screenshot-top-bar"],"showModal":[1540,"show-modal"],"rating":[2],"metadata":[1],"fetchData":[4,"fetch-data"],"emailPlaceholder":[1,"email-placeholder"],"errorMessage":[1,"error-message"],"errorMessage403":[1,"error-message-4-0-3"],"errorMessage404":[1,"error-message-4-0-4"],"messagePlaceholder":[1,"message-placeholder"],"footerText":[1,"footer-text"],"modalPosition":[1,"modal-position"],"modalTitle":[1,"modal-title"],"modalTitleError":[1,"modal-title-error"],"modalTitleSuccess":[1,"modal-title-success"],"privacyPolicyText":[1,"privacy-policy-text"],"ratingPlaceholder":[1,"rating-placeholder"],"ratingStarsPlaceholder":[1,"rating-stars-placeholder"],"sendButtonText":[1,"send-button-text"],"screenshotAttachedText":[1,"screenshot-attached-text"],"screenshotButtonText":[1,"screenshot-button-text"],"screenshotTakingText":[1,"screenshot-taking-text"],"screenshotTopbarText":[1,"screenshot-topbar-text"],"successMessage":[1,"success-message"],"canvasEditorTitle":[1,"canvas-editor-title"],"canvasEditorCancelText":[1,"canvas-editor-cancel-text"],"canvasEditorSaveText":[1,"canvas-editor-save-text"],"sending":[32],"formMessage":[32],"formEmail":[32],"formSuccess":[32],"formVerification":[32],"formError":[32],"formErrorStatus":[32],"encodedScreenshot":[32],"isPrivacyChecked":[32],"whitelabel":[32],"selectedRating":[32],"overlayVisible":[32],"isAnimating":[32],"takingScreenshot":[32],"showPreviewModal":[32],"screenshotError":[32],"showScreenshotError":[32],"showCanvasEditor":[32],"canvasDrawingTool":[32],"canvasDrawingColor":[32],"canvasLineWidth":[32],"isDrawing":[32],"annotations":[32],"currentAnnotation":[32],"isDragging":[32],"draggedAnnotation":[32],"dragStartPos":[32],"showColorPicker":[32],"editingColorIndex":[32],"isResizing":[32],"resizingAnnotation":[32],"resizeStartSize":[32],"resizeStartDimensions":[32],"hoveredAnnotation":[32],"resizeHandle":[32],"defaultColors":[32],"openModal":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/feedback-modal/feedback-modal.css

@@ -894,3 +894,110 @@
     width: 100px;
   }
 }
+
+/* Feather loader animation */
+@keyframes feather-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.feather-loader {
+  animation: feather-spin 1s linear infinite;
+  display: block;
+}
+
+/* Screenshot Error Notification */
+.screenshot-error-notification {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  max-width: 500px;
+  width: 90%;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.screenshot-error-content {
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  color: #c53030;
+}
+
+.screenshot-error-content svg:first-child {
+  color: #e53e3e;
+  flex-shrink: 0;
+}
+
+.screenshot-error-content span {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.error-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: #c53030;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+}
+
+.error-close-btn:hover {
+  background: rgba(197, 48, 48, 0.1);
+}
+
+/* Hide annotation controls on mobile */
+@media (max-width: 768px) {
+  .canvas-editor-toolbar .tool-group,
+  .canvas-editor-toolbar .color-palette,
+  .canvas-editor-toolbar .size-control,
+  .canvas-editor-toolbar .toolbar-divider {
+    display: none !important;
+  }
+  
+  .canvas-editor-toolbar {
+    justify-content: center;
+  }
+  
+  .canvas-editor-toolbar .toolbar-section:first-child {
+    display: none;
+  }
+  
+  .canvas-editor-toolbar .toolbar-section:nth-child(2) {
+    display: none;
+  }
+  
+  .canvas-editor-toolbar .toolbar-section:nth-child(3) {
+    display: none;
+  }
+  
+  .canvas-editor-title {
+    display: none;
+  }
+}

package/dist/collection/components/feedback-modal/feedback-modal.js

@@ -1,5 +1,4 @@
 import { h } from '@stencil/core';
-import html2canvas from 'html2canvas-pro';
 export class FeedbackModal {
   constructor() {
     this.onScrollDebounced = () => {
@@ -96,10 +95,14 @@ export class FeedbackModal {
         this.canvasRef = null;
         this.canvasContext = null;
         this.originalImageData = null;
+        // Reset error states
+        this.showScreenshotError = false;
+        this.screenshotError = '';
         // Reset resizing states
         this.isResizing = false;
         this.resizingAnnotation = null;
         this.resizeStartSize = 16;
+        this.resizeStartDimensions = null;
         this.hoveredAnnotation = null;
         this.resizeHandle = false;
         // Reset form states
@@ -114,16 +117,30 @@ export class FeedbackModal {
     this.openScreenShot = async () => {
       // Show loading state immediately
       this.takingScreenshot = true;
+      this.showScreenshotError = false;
+      // Clear any previous annotations when taking a new screenshot
+      this.annotations = [];
+      this.currentAnnotation = null;
+      this.isDrawing = false;
+      this.hoveredAnnotation = null;
+      // Hide the feedback modal temporarily to exclude it from screenshot
+      const wasModalVisible = this.showModal;
+      this.showModal = false;
+      // Also hide any feedback buttons on the page
+      this.hideAllFeedbackElements();
       try {
-        // Capture viewport screenshot immediately
+        // Wait a moment for UI to update before capturing
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // Capture viewport screenshot using browser API
         const dataUrl = await this.captureViewportScreenshot();
         this.encodedScreenshot = dataUrl;
         this.originalImageData = dataUrl;
         // Reset loading state
         this.takingScreenshot = false;
-        // Skip preview modal and go directly to canvas editor
-        this.showModal = false;
+        // Go directly to canvas editor (don't restore modal)
         this.showCanvasEditor = true;
+        // Restore feedback elements visibility
+        this.showAllFeedbackElements();
         // Initialize canvas after a short delay to ensure DOM is ready
         setTimeout(() => {
           this.initializeCanvas();
@@ -133,10 +150,54 @@ export class FeedbackModal {
         console.error('Failed to capture screenshot:', error);
         // Reset loading state on error
         this.takingScreenshot = false;
-        // Show modal anyway
-        this.showModal = true;
+        // Restore modal and feedback elements on error
+        this.showModal = wasModalVisible;
+        this.showAllFeedbackElements();
+        // Show error message to user
+        this.handleScreenshotError(error);
       }
     };
+    this.hideAllFeedbackElements = () => {
+      // Hide all feedback buttons and modals on the page
+      const feedbackElements = document.querySelectorAll('feedback-button, feedback-modal');
+      feedbackElements.forEach(element => {
+        element.style.visibility = 'hidden';
+      });
+    };
+    this.showAllFeedbackElements = () => {
+      // Show all feedback buttons and modals on the page
+      const feedbackElements = document.querySelectorAll('feedback-button, feedback-modal');
+      feedbackElements.forEach(element => {
+        element.style.visibility = 'visible';
+      });
+    };
+    this.handleScreenshotError = (error) => {
+      let errorMessage = 'Failed to capture screenshot. ';
+      if (error.name === 'NotAllowedError') {
+        errorMessage += 'Permission denied. Please allow screen sharing to take screenshots.';
+      }
+      else if (error.name === 'NotSupportedError') {
+        errorMessage += 'Screen capture is not supported in this browser.';
+      }
+      else if (error.name === 'NotFoundError') {
+        errorMessage += 'No screen sources available for capture.';
+      }
+      else if (error.name === 'AbortError') {
+        errorMessage += 'Screenshot capture was cancelled.';
+      }
+      else if (error.message && error.message.includes('not supported')) {
+        errorMessage += 'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari.';
+      }
+      else {
+        errorMessage += 'An unexpected error occurred. Please try again.';
+      }
+      this.screenshotError = errorMessage;
+      this.showScreenshotError = true;
+      // Auto-hide error after 5 seconds
+      setTimeout(() => {
+        this.showScreenshotError = false;
+      }, 5000);
+    };
     this.openCanvasEditor = (event) => {
       if (event) {
         event.stopPropagation();
@@ -228,7 +289,10 @@ export class FeedbackModal {
       switch (annotation.type) {
         case 'rectangle':
           this.canvasContext.strokeRect(annotation.startX, annotation.startY, annotation.width, annotation.height);
-          // Rectangle resize handles disabled for now
+          // Draw resize handle if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawRectangleResizeHandles(annotation);
+          }
           break;
         case 'line':
           this.canvasContext.beginPath();
@@ -352,8 +416,11 @@ export class FeedbackModal {
           return x >= handleX - handleSize / 2 && x <= handleX + handleSize / 2 &&
             y >= handleY - handleSize / 2 && y <= handleY + handleSize / 2;
         case 'rectangle':
-          // Rectangle resizing disabled for now
-          return false;
+          const right = annotation.startX + annotation.width;
+          const bottom = annotation.startY + annotation.height;
+          // Only check bottom-right corner handle
+          return x >= right - handleSize / 2 && x <= right + handleSize / 2 &&
+            y >= bottom - handleSize / 2 && y <= bottom + handleSize / 2;
         case 'line':
         case 'arrow':
           // Check both endpoint handles
@@ -411,11 +478,17 @@ export class FeedbackModal {
       if (annotation.type === 'text') {
         this.resizeStartSize = annotation.fontSize || 16;
       }
+      else if (annotation.type === 'rectangle') {
+        this.resizeStartDimensions = { width: annotation.width, height: annotation.height };
+      }
     };
     // Enhanced mouse down handler with resize detection for all annotation types
     this.handleCanvasMouseDown = (event) => {
       if (!this.canvasRef)
         return;
+      // Disable drawing on mobile devices
+      if (window.innerWidth <= 768)
+        return;
       // Close color picker if open
       if (this.showColorPicker) {
         this.closeColorPicker();
@@ -471,6 +544,9 @@ export class FeedbackModal {
     this.handleCanvasMouseMove = (event) => {
       if (!this.canvasRef)
         return;
+      // Disable drawing on mobile devices
+      if (window.innerWidth <= 768)
+        return;
       const coords = this.getCanvasCoordinates(event);
       // Handle resizing for any annotation type
       if (this.isResizing && this.resizingAnnotation) {
@@ -552,12 +628,16 @@ export class FeedbackModal {
       }
     };
     this.handleCanvasMouseUp = () => {
-      // Handle end of text resizing
+      // Disable drawing on mobile devices
+      if (window.innerWidth <= 768)
+        return;
+      // Handle end of resizing
       if (this.isResizing) {
         this.isResizing = false;
         this.resizingAnnotation = null;
         this.dragStartPos = null;
         this.resizeHandle = false;
+        this.resizeStartDimensions = null;
         if (this.canvasRef) {
           this.canvasRef.style.cursor = 'crosshair';
         }
@@ -581,30 +661,21 @@ export class FeedbackModal {
       this.currentAnnotation = null;
       this.redrawAnnotations();
     };
-    // Draw resize handles for rectangle annotation
+    // Draw resize handles for rectangle annotation (only bottom-right corner)
     this.drawRectangleResizeHandles = (annotation) => {
       if (!this.canvasContext || annotation.type !== 'rectangle')
         return;
       const handleSize = 8;
-      const left = annotation.startX;
-      const top = annotation.startY;
       const right = annotation.startX + annotation.width;
       const bottom = annotation.startY + annotation.height;
-      // Define handle positions (4 corners)
-      const handles = [
-        { x: left, y: top },
-        { x: right, y: top },
-        { x: right, y: bottom },
-        { x: left, y: bottom } // Bottom-left
-      ];
-      // Draw each handle
+      // Only draw bottom-right corner handle
+      const handle = { x: right, y: bottom };
+      // Draw the handle
       this.canvasContext.fillStyle = '#0070F4'; // Primary color
       this.canvasContext.strokeStyle = '#ffffff';
       this.canvasContext.lineWidth = 2;
-      handles.forEach(handle => {
-        this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
-        this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
-      });
+      this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+      this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
     };
     // Draw resize handles for line/arrow annotation
     this.drawLineResizeHandles = (annotation) => {
@@ -694,8 +765,13 @@ export class FeedbackModal {
           updatedAnnotation.fontSize = Math.round(newSize);
           break;
         case 'rectangle':
-          // Rectangle resizing disabled for now
-          return;
+          // Rectangle resize logic - only bottom-right corner
+          const rectDeltaX = currentPos.x - this.dragStartPos.x;
+          const rectDeltaY = currentPos.y - this.dragStartPos.y;
+          // Update width and height based on original dimensions plus delta
+          updatedAnnotation.width = Math.max(10, this.resizeStartDimensions.width + rectDeltaX); // Minimum width of 10px
+          updatedAnnotation.height = Math.max(10, this.resizeStartDimensions.height + rectDeltaY); // Minimum height of 10px
+          break;
         case 'line':
         case 'arrow':
           // Line/arrow resize logic - move endpoints
@@ -729,6 +805,8 @@ export class FeedbackModal {
     this.isAnimating = false;
     this.takingScreenshot = false;
     this.showPreviewModal = false;
+    this.screenshotError = '';
+    this.showScreenshotError = false;
     this.showCanvasEditor = false;
     this.canvasDrawingTool = 'rectangle';
     this.canvasDrawingColor = '#ff0000';
@@ -744,6 +822,7 @@ export class FeedbackModal {
     this.isResizing = false;
     this.resizingAnnotation = null;
     this.resizeStartSize = 16;
+    this.resizeStartDimensions = null;
     this.hoveredAnnotation = null;
     this.resizeHandle = false;
     this.defaultColors = ['#ff0000', '#00ff00', '#0000ff', '#000000'];
@@ -819,52 +898,62 @@ export class FeedbackModal {
   handleEmailInput(event) {
     this.formEmail = event.target.value;
   }
-  captureViewportScreenshot() {
-    return new Promise((resolve, reject) => {
-      requestAnimationFrame(() => {
-        // Get viewport dimensions and scroll position
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const scrollX = window.scrollX || window.pageXOffset || 0;
-        const scrollY = window.scrollY || window.pageYOffset || 0;
-        // Capture exactly what the user sees in their viewport
-        html2canvas(document.documentElement, {
-          x: scrollX,
-          y: scrollY,
-          width: viewportWidth,
-          height: viewportHeight,
-          scrollX: 0,
-          scrollY: 0,
-          allowTaint: false,
-          useCORS: true,
-          scale: 1,
-          backgroundColor: '#ffffff',
-          logging: false,
-          foreignObjectRendering: false,
-          imageTimeout: 15000,
-          windowWidth: viewportWidth,
-          windowHeight: viewportHeight,
-          removeContainer: true,
-          ignoreElements: (element) => {
-            // Ignore all feedback modal elements
-            return element.closest('feedback-modal') !== null ||
-              element.classList.contains('feedback-overlay') ||
-              element.classList.contains('feedback-modal-screenshot-header') ||
-              element.tagName === 'FEEDBACK-MODAL' ||
-              element.tagName === 'FEEDBACK-BUTTON';
-          }
-        })
-          .then((canvas) => {
-          const dataUrl = canvas.toDataURL('image/png');
-          console.log('Screenshot captured successfully, size:', canvas.width, 'x', canvas.height);
-          resolve(dataUrl);
-        })
-          .catch((error) => {
-          console.error('Failed to capture viewport screenshot:', error);
-          reject(error);
-        });
+  async captureViewportScreenshot() {
+    try {
+      // Check if Screen Capture API is supported
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+        throw new Error('Screen Capture API is not supported in this browser');
+      }
+      // Request screen capture with preference for current tab
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: {
+          mediaSource: 'screen',
+          width: { ideal: window.innerWidth },
+          height: { ideal: window.innerHeight }
+        },
+        audio: false,
+        preferCurrentTab: true
       });
-    });
+      // Create video element to capture frame
+      const video = document.createElement('video');
+      video.srcObject = stream;
+      video.autoplay = true;
+      video.muted = true;
+      return new Promise((resolve, reject) => {
+        video.onloadedmetadata = () => {
+          video.play();
+          // Wait a moment for video to stabilize
+          setTimeout(() => {
+            try {
+              // Create canvas to capture frame
+              const canvas = document.createElement('canvas');
+              canvas.width = video.videoWidth;
+              canvas.height = video.videoHeight;
+              const ctx = canvas.getContext('2d');
+              ctx.drawImage(video, 0, 0);
+              // Stop the stream
+              stream.getTracks().forEach(track => track.stop());
+              // Convert to data URL
+              const dataUrl = canvas.toDataURL('image/png');
+              console.log('Screenshot captured successfully using Screen Capture API');
+              resolve(dataUrl);
+            }
+            catch (error) {
+              stream.getTracks().forEach(track => track.stop());
+              reject(error);
+            }
+          }, 100);
+        };
+        video.onerror = (_) => {
+          stream.getTracks().forEach(track => track.stop());
+          reject(new Error('Failed to load video for screenshot capture'));
+        };
+      });
+    }
+    catch (error) {
+      console.error('Screen capture failed:', error);
+      throw error;
+    }
   }
   handleCheckboxChange(event) {
     this.isPrivacyChecked = event.target.checked;
@@ -876,7 +965,7 @@ export class FeedbackModal {
     this.selectedRating = newRating;
   }
   render() {
-    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showModal && (h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''}`, ref: (el) => (this.modalContent = el) }, h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (h("span", null, this.modalTitle)) : this.formSuccess ? (h("span", null, this.modalTitleSuccess)) : (h("span", null, this.modalTitleError)), h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
+    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showScreenshotError && (h("div", { class: "screenshot-error-notification" }, h("div", { class: "screenshot-error-content" }, h("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15" })), h("span", null, this.screenshotError), h("button", { class: "error-close-btn", onClick: () => this.showScreenshotError = false, title: "Close" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))), this.showModal && (h("div", { class: `feedback-overlay ${this.isAnimating ? 'feedback-overlay--visible' : ''}` })), this.showModal && (h("div", { class: `feedback-modal-content feedback-modal-content--${this.modalPosition} ${this.isAnimating ? 'feedback-modal-content--open' : ''}`, ref: (el) => (this.modalContent = el) }, h("div", { class: "feedback-modal-header" }, !this.formSuccess && !this.formError ? (h("span", null, this.modalTitle)) : this.formSuccess ? (h("span", null, this.modalTitleSuccess)) : (h("span", null, this.modalTitleError)), h("button", { class: "feedback-modal-close", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "#191919", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "feedback-modal-body" }, !this.formSuccess && !this.formError ? (h("form", { onSubmit: this.handleSubmit }, !this.hideRating && (h("div", { class: "feedback-modal-rating" }, this.ratingMode === 'thumbs' ? (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--thumbs" }, h("button", { title: "Yes", class: `feedback-modal-rating-button ${this.selectedRating === 1
         ? 'feedback-modal-rating-button--selected'
         : ''}`, onClick: (event) => {
         event.preventDefault();
@@ -891,7 +980,7 @@ export class FeedbackModal {
         : ''}`, onClick: (event) => {
         event.preventDefault();
         this.handleRatingChange(rating);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16" }, h("circle", { cx: "8", cy: "8", r: "6", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-dasharray": "6 6", "transform-origin": "8 8" }, h("animateTransform", { attributeName: "transform", type: "rotate", values: "0 8 8;360 8 8", dur: "1s", repeatCount: "indefinite" }))))), this.takingScreenshot ? this.screenshotTakingText :
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot ? this.screenshotTakingText :
       this.encodedScreenshot ? this.screenshotAttachedText : this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-success" }, h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (h("span", null))), h("div", { class: "feedback-modal-footer" }, h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (h("div", { class: "feedback-footer-text" }, h("span", { innerHTML: this.footerText })))))), this.showCanvasEditor && (h("div", { class: "canvas-editor-overlay" }, h("div", { class: "canvas-editor-modal" }, h("div", { class: "canvas-editor-header" }, h("div", { class: "canvas-editor-title" }, h("h3", null, this.canvasEditorTitle)), h("div", { class: "canvas-editor-toolbar" }, h("div", { class: "toolbar-section" }, h("div", { class: "tool-group" }, h("button", { class: `tool-btn ${this.canvasDrawingTool === 'rectangle' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'rectangle', title: "Rectangle" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'line', title: "Line" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'arrow', title: "Arrow" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "7", y1: "17", x2: "17", y2: "7" }), h("polyline", { points: "7,7 17,7 17,17" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'text', title: "Text" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "4,7 4,4 20,4 20,7" }), h("line", { x1: "9", y1: "20", x2: "15", y2: "20" }), h("line", { x1: "12", y1: "4", x2: "12", y2: "20" }))), h("div", { class: "toolbar-divider" }), h("button", { class: "tool-btn undo-btn", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "1,4 1,10 7,10" }), h("path", { d: "M3.51,15a9,9,0,0,0,14.85-3.36,9,9,0,0,0-9.19-10.15L1.83,10" }))))), h("div", { class: "toolbar-section" }, h("div", { class: "color-palette" }, this.defaultColors.map((color, index) => (h("div", { class: "color-slot-wrapper" }, h("button", { class: `color-btn ${this.canvasDrawingColor === color ? 'active' : ''} ${this.editingColorIndex === index ? 'editing' : ''}`, style: { backgroundColor: color }, onClick: () => this.handleColorSlotClick(index), title: `Color ${index + 1} - Click to customize` }, this.editingColorIndex === index && (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", "stroke-width": "2" }, h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })))), this.editingColorIndex === index && this.showColorPicker && (h("div", { class: "color-picker-dropdown" }, h("input", { type: "color", value: color, onInput: (e) => this.handleColorPickerInput(e), onClick: (e) => this.handleColorPickerClick(e) })))))))), h("div", { class: "toolbar-section" }, h("div", { class: "size-control" }, h("input", { type: "range", min: "1", max: "10", value: this.canvasLineWidth, onInput: (e) => this.canvasLineWidth = parseInt(e.target.value), class: "size-slider" }), h("span", { class: "size-value" }, this.canvasLineWidth, "px"))), h("div", { class: "toolbar-section" }, h("button", { class: "action-btn secondary", onClick: this.closeCanvasEditor }, this.canvasEditorCancelText), h("button", { class: "action-btn primary", onClick: this.saveAnnotations }, this.canvasEditorSaveText))), h("div", { class: "canvas-editor-content" }, h("canvas", { ref: (el) => this.canvasRef = el, class: "annotation-canvas", onMouseDown: this.handleCanvasMouseDown, onMouseMove: this.handleCanvasMouseMove, onMouseUp: this.handleCanvasMouseUp, onMouseLeave: this.handleCanvasMouseUp }))))))));
   }
   componentDidRender() {
@@ -1624,6 +1713,8 @@ export class FeedbackModal {
       "isAnimating": {},
       "takingScreenshot": {},
       "showPreviewModal": {},
+      "screenshotError": {},
+      "showScreenshotError": {},
       "showCanvasEditor": {},
       "canvasDrawingTool": {},
       "canvasDrawingColor": {},
@@ -1639,6 +1730,7 @@ export class FeedbackModal {
       "isResizing": {},
       "resizingAnnotation": {},
       "resizeStartSize": {},
+      "resizeStartDimensions": {},
       "hoveredAnnotation": {},
       "resizeHandle": {},
       "defaultColors": {}