pushfeedback 0.1.69 → 0.1.71

package/dist/esm/{feedback-button_2.entry.js → canvas-editor_3.entry.js}

@@ -1,419 +1,98 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f65e9124.js';
 
-const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
+const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;max-width:1400px;max-height:900px;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}}";
 
-const FeedbackButton = class {
+const CanvasEditor = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.feedbackSent = createEvent(this, "feedbackSent", 7);
-    this.feedbackError = createEvent(this, "feedbackError", 7);
-    this.buttonPosition = 'default';
-    this.buttonStyle = 'default';
-    this.hideIcon = false;
-    this.hideMobile = false;
-    this.sessionId = '';
-    this.metadata = '';
-    this.submit = false;
-    this.customFont = false;
-    this.emailAddress = '';
-    this.isEmailRequired = false;
-    this.fetchData = true;
-    this.hideEmail = false;
-    this.hidePrivacyPolicy = true;
-    this.hideRating = false;
-    this.hideScreenshotButton = false;
-    this.modalPosition = 'center';
-    this.project = '';
-    this.rating = undefined;
-    this.ratingMode = 'thumbs';
-    this.canvasEditorTitle = 'Edit screenshot';
-    this.canvasEditorCancelText = 'Cancel';
-    this.canvasEditorSaveText = 'Save';
-    this.emailPlaceholder = 'Email address (optional)';
-    this.errorMessage = 'Please try again later.';
-    this.errorMessage403 = 'The request URL does not match the one defined in PushFeedback for this project.';
-    this.errorMessage404 = 'We could not find the provided project id in PushFeedback.';
-    this.footerText = '';
-    this.messagePlaceholder = 'Comments';
-    this.modalTitle = 'Share your feedback';
-    this.modalTitleError = 'Oops!';
-    this.modalTitleSuccess = 'Thanks for your feedback!';
-    this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
-    this.ratingPlaceholder = 'Was this page helpful?';
-    this.ratingStarsPlaceholder = 'How would you rate this page?';
-    this.screenshotAttachedText = 'Screenshot attached';
-    this.screenshotButtonText = 'Add a screenshot';
-    this.screenshotTakingText = 'Taking screenshot...';
-    this.screenshotTopbarText = 'Select an element on this page';
-    this.sendButtonText = 'Send';
-    this.successMessage = '';
-  }
-  componentWillLoad() {
-    if (!this.sessionId) {
-      let storedSessionId = localStorage.getItem('pushfeedback_sessionid');
-      if (!storedSessionId) {
-        storedSessionId = this.generateRandomSessionId();
-        localStorage.setItem('pushfeedback_sessionid', storedSessionId);
-        this.sessionId = storedSessionId;
+    this.screenshotReady = createEvent(this, "screenshotReady", 7);
+    this.screenshotCancelled = createEvent(this, "screenshotCancelled", 7);
+    this.screenshotFailed = createEvent(this, "screenshotFailed", 7);
+    this.openScreenShot = async () => {
+      // Show loading state immediately
+      this.takingScreenshot = true;
+      // Clear any previous annotations when taking a new screenshot
+      this.annotations = [];
+      this.currentAnnotation = null;
+      this.isDrawing = false;
+      this.hoveredAnnotation = null;
+      // Hide any feedback buttons on the page
+      this.hideAllFeedbackElements();
+      try {
+        // 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.originalImageData = dataUrl;
+        // Reset loading state
+        this.takingScreenshot = false;
+        // Go directly to canvas editor
+        this.showCanvasEditor = true;
+        // Restore feedback elements visibility
+        this.showAllFeedbackElements();
+        // Initialize canvas after a short delay to ensure DOM is ready
+        setTimeout(() => {
+          this.initializeCanvas();
+        }, 100);
       }
-    }
-    else {
-      localStorage.setItem('pushfeedback_sessionid', this.sessionId);
-    }
-  }
-  componentDidLoad() {
-    if (this.buttonPosition === 'center-right') {
-      const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
-      let adjustement = 0;
-      if (this.isSafariBrowser()) {
-        adjustement = 5;
+      catch (error) {
+        console.error('Failed to capture screenshot:', error);
+        // Reset loading state on error
+        this.takingScreenshot = false;
+        // Restore feedback elements on error
+        this.showAllFeedbackElements();
+        // Show error message to user
+        this.handleScreenshotError(error);
       }
-      buttonContent.style.right = `${((buttonContent.offsetWidth + adjustement) / 2) * -1}px`;
-    }
-    if (!this.customFont) {
-      this.loadInterFont();
-    }
-  }
-  connectedCallback() {
-    this.feedbackModal = document.createElement('feedback-modal');
-    const props = [
-      'customFont',
-      'emailAddress',
-      'fetchData',
-      'hideEmail',
-      'hidePrivacyPolicy',
-      'hideRating',
-      'hideScreenshotButton',
-      'isEmailRequired',
-      'modalPosition',
-      'project',
-      'rating',
-      'ratingMode',
-      'canvasEditorTitle',
-      'canvasEditorCancelText',
-      'canvasEditorSaveText',
-      'emailPlaceholder',
-      'errorMessage',
-      'errorMessage403',
-      'errorMessage404',
-      'footerText',
-      'messagePlaceholder',
-      'metadata',
-      'modalTitle',
-      'modalTitleError',
-      'modalTitleSuccess',
-      'privacyPolicyText',
-      'ratingPlaceholder',
-      'ratingStarsPlaceholder',
-      'screenshotAttachedText',
-      'screenshotButtonText',
-      'screenshotTakingText',
-      'screenshotTopbarText',
-      'sendButtonText',
-      'successMessage',
-    ];
-    props.forEach((prop) => {
-      this.feedbackModal[prop] = this[prop];
-    });
-    document.body.appendChild(this.feedbackModal);
-  }
-  disconnectedCallback() {
-    document.body.removeChild(this.feedbackModal);
-  }
-  generateRandomSessionId(length = 16) {
-    return Math.random().toString(36).substr(2, length);
-  }
-  isSafariBrowser() {
-    const isSafari = /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent);
-    return isSafari;
-  }
-  loadInterFont() {
-    const link = document.createElement('link');
-    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
-    link.rel = 'stylesheet';
-    document.head.appendChild(link);
-  }
-  showModal() {
-    if (this.submit) {
-      this.submitRatingFeedback();
-    }
-    else {
-      this.feedbackModal.openModal();
-    }
-  }
-  async submitRatingFeedback() {
-    try {
-      const body = {
-        url: window.location.href,
-        project: this.project,
-        rating: this.rating || -1,
-        ratingMode: this.ratingMode,
-        message: '',
-        metadata: this.metadata,
-        session: localStorage.getItem('pushfeedback_sessionid') || '',
-      };
-      const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
-        method: 'POST',
-        body: JSON.stringify(body),
-        headers: {
-          'Content-Type': 'application/json',
-        },
+    };
+    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';
       });
-      if (res.status === 201) {
-        const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
-        this.feedbackSent.emit({ feedback: feedback_with_id });
+    };
+    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 = this.screenshotErrorGeneral;
+      if (error.name === 'NotAllowedError') {
+        errorMessage += ' ' + this.screenshotErrorPermission;
+      }
+      else if (error.name === 'NotSupportedError') {
+        errorMessage += ' ' + this.screenshotErrorNotSupported;
+      }
+      else if (error.name === 'NotFoundError') {
+        errorMessage += ' ' + this.screenshotErrorNotFound;
+      }
+      else if (error.name === 'AbortError') {
+        errorMessage += ' ' + this.screenshotErrorCancelled;
+      }
+      else if (error.message && error.message.includes('not supported')) {
+        errorMessage += ' ' + this.screenshotErrorBrowserNotSupported;
       }
       else {
-        const errorText = await res.text();
-        const response = {
-          status: res.status,
-          message: errorText,
-        };
-        this.feedbackError.emit({ error: response });
+        errorMessage += ' ' + this.screenshotErrorUnexpected;
       }
-    }
-    catch (error) {
-      const response = {
-        status: 500,
-        message: error,
-      };
-      this.feedbackError.emit({ error: response });
-    }
-  }
-  render() {
-    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''} ${this.hideMobile ? 'feedback-button-content--hide-mobile' : ''}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
-FeedbackButton.style = feedbackButtonCss;
-
-const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}.canvas-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--feedback-modal-screenshot-bg-color);z-index:10001;display:flex;align-items:center;justify-content:center}.canvas-editor-modal{width:95vw;height:98vh;background:var(--feedback-canvas-editor-bg-color);border-radius:var(--feedback-modal-content-border-radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color);border-bottom:1px solid var(--feedback-canvas-editor-border-color);padding:12px 16px;display:flex;flex-direction:column;gap:12px;flex-shrink:0}.canvas-editor-title h3{margin:0;font-size:var(--feedback-modal-header-font-size);font-weight:var(--feedback-modal-header-font-weight);color:var(--feedback-modal-header-text-color);font-family:var(--feedback-modal-header-font-family)}.canvas-editor-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.toolbar-section{display:flex;align-items:center}.toolbar-section:last-child{margin-left:auto;gap:10px}.tool-group{display:flex;align-items:center;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:4px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .10)}.tool-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:var(--feedback-modal-button-border-radius);cursor:pointer;color:var(--feedback-canvas-editor-tool-text-color);transition:all 0.2s ease;position:relative}.tool-btn:hover{background:var(--feedback-canvas-editor-tool-bg-hover);color:var(--feedback-modal-button-text-color-active)}.tool-btn.active{background:var(--feedback-canvas-editor-tool-bg-active);color:var(--feedback-canvas-editor-tool-text-active)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed}.tool-btn:disabled:hover{background:none;color:var(--feedback-canvas-editor-tool-text-color)}.toolbar-divider{width:1px;height:20px;background:var(--feedback-canvas-editor-divider-color);margin:0 6px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color) !important;border:1px solid var(--feedback-canvas-editor-border-color) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover) !important}.color-palette{display:flex;align-items:center;gap:6px;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .10)}.color-slot-wrapper{position:relative}.color-btn{width:28px;height:28px;border-radius:var(--feedback-modal-button-border-radius);border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;position:relative;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .15);display:flex;align-items:center;justify-content:center}.color-btn:hover{transform:scale(1.05);box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .25)}.color-btn.active{border-color:var(--feedback-primary-color);transform:scale(1.1);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-highlight-color);box-shadow:0 0 0 2px rgba(255, 180, 34, 0.3)}.color-btn.editing:hover{border-color:var(--feedback-highlight-color);box-shadow:0 0 0 2px rgba(255, 180, 34, 0.4)}.color-picker-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);z-index:1000}.color-picker-dropdown input[type=\"color\"]{width:50px;height:32px;border:none;border-radius:var(--feedback-modal-button-border-radius);cursor:pointer}.size-control{display:flex;align-items:center;gap:10px;background:var(--feedback-canvas-editor-tool-bg-color);border:1px solid var(--feedback-canvas-editor-border-color);border-radius:var(--feedback-modal-button-border-radius);padding:6px 12px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .10)}.size-slider{width:70px;height:4px;border-radius:2px;background:var(--feedback-canvas-editor-slider-track);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none}.size-slider::-webkit-slider-track{width:100%;height:4px;cursor:pointer;background:var(--feedback-canvas-editor-slider-track);border-radius:2px;border:none;box-shadow:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--feedback-primary-color);cursor:pointer;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .20);border:none;margin-top:-5px;}.size-slider::-moz-range-track{width:100%;height:4px;cursor:pointer;background:var(--feedback-canvas-editor-slider-track);border-radius:2px;border:none;box-shadow:none}.size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--feedback-primary-color);cursor:pointer;border:none;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .20)}.size-slider::-moz-range-progress{background:var(--feedback-canvas-editor-slider-track);height:4px;border-radius:2px}.size-slider::-ms-track{width:100%;height:4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.size-slider::-ms-fill-lower{background:var(--feedback-canvas-editor-slider-track);border-radius:2px}.size-slider::-ms-fill-upper{background:var(--feedback-canvas-editor-slider-track);border-radius:2px}.size-slider::-ms-thumb{width:14px;height:14px;border-radius:50%;background:var(--feedback-primary-color);cursor:pointer;border:none}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color);font-size:var(--feedback-text-font-size);min-width:30px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-action-secondary-border);border-radius:var(--feedback-modal-button-border-radius);cursor:pointer;font-size:var(--feedback-modal-button-font-size);font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px;font-family:var(--feedback-font-family)}.action-btn.secondary{background:var(--feedback-canvas-editor-action-secondary-bg);color:var(--feedback-canvas-editor-action-secondary-text);border-color:var(--feedback-canvas-editor-action-secondary-border)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover);color:var(--feedback-modal-button-text-color-active);border-color:var(--feedback-modal-button-border-color-active)}.action-btn.primary{background:var(--feedback-canvas-editor-action-primary-bg);color:var(--feedback-canvas-editor-action-primary-text);border-color:var(--feedback-modal-button-border-color-active)}.action-btn.primary:hover{background:var(--feedback-modal-button-submit-bg-color-hover);border-color:var(--feedback-modal-button-submit-border-color-hover)}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:var(--feedback-white-color);transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@media (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-header{padding:8px 12px;gap:8px}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:12px}.toolbar-section{justify-content:center}.toolbar-section:last-child{margin-left:0;justify-content:stretch;gap:8px}.action-btn{flex:1;min-width:auto}.canvas-editor-content{padding:8px}.tool-group{flex-wrap:wrap;justify-content:center}.color-palette{flex-wrap:wrap;justify-content:center}.size-control{flex-direction:column;gap:6px;text-align:center}.size-slider{width:100px}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.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)}@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}}";
-
-const FeedbackModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.feedbackSent = createEvent(this, "feedbackSent", 7);
-    this.feedbackError = createEvent(this, "feedbackError", 7);
-    this.onScrollDebounced = () => {
-      clearTimeout(this.scrollTimeout);
-      this.scrollTimeout = setTimeout(() => {
-        document.documentElement.classList.remove('feedback-modal-screenshot-closing');
-        document.documentElement.style.top = '';
-        window.removeEventListener('scroll', this.onScrollDebounced);
-      }, 200);
-    };
-    this.handleSubmit = async (event) => {
-      event.preventDefault();
-      if (this.isEmailRequired && !this.formEmail) {
-        return;
-      }
-      this.resetOverflow();
-      this.showScreenshotMode = false;
-      this.showScreenshotTopBar = false;
-      this.showModal = false;
-      this.sending = true;
-      try {
-        const body = {
-          url: window.location.href,
-          message: this.formMessage,
-          email: this.formEmail,
-          project: this.project,
-          screenshot: this.encodedScreenshot,
-          rating: this.selectedRating,
-          ratingMode: this.ratingMode,
-          metadata: this.metadata,
-          verification: this.formVerification,
-          session: localStorage.getItem('pushfeedback_sessionid') || '',
-        };
-        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
-          method: 'POST',
-          body: JSON.stringify(body),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-        if (res.status === 201) {
-          const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
-          this.feedbackSent.emit({ feedback: feedback_with_id });
-          this.formSuccess = true;
-          this.formError = false;
-        }
-        else {
-          const errorText = await res.text();
-          const response = {
-            status: res.status,
-            message: errorText,
-          };
-          this.feedbackError.emit({ error: response });
-          this.formSuccess = false;
-          this.formError = true;
-          this.formErrorStatus = res.status;
-        }
-      }
-      catch (error) {
-        const response = {
-          status: 500,
-          message: error,
-        };
-        this.feedbackError.emit({ error: response });
-        this.formSuccess = false;
-        this.formError = true;
-        this.formErrorStatus = 500;
-      }
-      finally {
-        this.sending = false;
-        this.showModal = true;
-      }
-    };
-    this.close = () => {
-      this.isAnimating = false;
-      setTimeout(() => {
-        this.sending = false;
-        this.showModal = false;
-        this.showScreenshotMode = false;
-        this.showScreenshotTopBar = false;
-        this.hasSelectedElement = false;
-        this.encodedScreenshot = null;
-        // Remove highlight from ALL selected elements
-        document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
-          el.classList.remove('feedback-modal-element-selected');
-        });
-        // Reset canvas editor states
-        this.takingScreenshot = false;
-        this.showPreviewModal = false;
-        this.showCanvasEditor = false;
-        this.annotations = [];
-        this.currentAnnotation = null;
-        this.isDrawing = false;
-        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
-        this.formSuccess = false;
-        this.formError = false;
-        this.formErrorStatus = 500;
-        this.formMessage = '';
-        this.formEmail = '';
-        this.resetOverflow();
-      }, 200);
-    };
-    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 {
-        // 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;
-        // 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();
-        }, 100);
-      }
-      catch (error) {
-        console.error('Failed to capture screenshot:', error);
-        // Reset loading state on error
-        this.takingScreenshot = false;
-        // 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();
-      }
-      this.showModal = false;
-      this.showCanvasEditor = true;
-      // Initialize canvas after a short delay to ensure DOM is ready
-      setTimeout(() => {
-        this.initializeCanvas();
-      }, 100);
+      // Just emit the error to parent - don't show internal notification
+      this.screenshotFailed.emit({ error: errorMessage });
     };
     this.closeCanvasEditor = () => {
       this.showCanvasEditor = false;
-      this.showModal = true;
+      this.screenshotCancelled.emit();
     };
     this.saveAnnotations = () => {
       if (this.canvasRef) {
         // Create final image with annotations
         const finalDataUrl = this.canvasRef.toDataURL('image/png');
-        this.encodedScreenshot = finalDataUrl;
+        this.screenshotReady.emit({ screenshot: finalDataUrl });
       }
       this.showCanvasEditor = false;
-      this.showModal = true;
     };
     this.initializeCanvas = () => {
       if (!this.canvasRef || !this.originalImageData)
@@ -425,31 +104,19 @@ const FeedbackModal = class {
         this.canvasRef.width = img.width;
         this.canvasRef.height = img.height;
         // Get available container dimensions
-        const containerWidth = this.canvasRef.parentElement.clientWidth - 32; // Account for reduced padding (16px * 2)
+        const containerWidth = this.canvasRef.parentElement.clientWidth - 32;
         const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
         // Calculate scale factors for both dimensions
         const scaleX = containerWidth / img.width;
         const scaleY = containerHeight / img.height;
         // Use the smaller scale to ensure complete image fits
-        const scale = Math.min(scaleX, scaleY, 1); // Never scale up, only down
+        const scale = Math.min(scaleX, scaleY, 1);
         // Calculate final display dimensions
         const displayWidth = img.width * scale;
         const displayHeight = img.height * scale;
-        // Set CSS size for display (this scales the canvas visually)
+        // Set CSS size for display
         this.canvasRef.style.width = `${displayWidth}px`;
         this.canvasRef.style.height = `${displayHeight}px`;
-        console.log('Canvas initialized with complete image fit:', {
-          originalWidth: img.width,
-          originalHeight: img.height,
-          displayWidth,
-          displayHeight,
-          scale,
-          scaleX,
-          scaleY,
-          containerWidth,
-          containerHeight,
-          usingScale: scale === scaleX ? 'width-limited' : 'height-limited'
-        });
         // Draw the original image at full resolution
         this.canvasContext.drawImage(img, 0, 0);
         // Redraw existing annotations
@@ -482,7 +149,11 @@ const FeedbackModal = class {
       switch (annotation.type) {
         case 'rectangle':
           this.canvasContext.strokeRect(annotation.startX, annotation.startY, annotation.width, annotation.height);
-          // Draw resize handle if this annotation is hovered
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawSelectionIndicator(annotation);
+          }
+          // Draw resize handles if this annotation is hovered
           if (this.hoveredAnnotation === annotation) {
             this.drawRectangleResizeHandles(annotation);
           }
@@ -492,6 +163,10 @@ const FeedbackModal = class {
           this.canvasContext.moveTo(annotation.startX, annotation.startY);
           this.canvasContext.lineTo(annotation.endX, annotation.endY);
           this.canvasContext.stroke();
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawSelectionIndicator(annotation);
+          }
           // Draw resize handles if this annotation is hovered
           if (this.hoveredAnnotation === annotation) {
             this.drawLineResizeHandles(annotation);
@@ -499,38 +174,73 @@ const FeedbackModal = class {
           break;
         case 'arrow':
           this.drawArrow(annotation.startX, annotation.startY, annotation.endX, annotation.endY);
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawSelectionIndicator(annotation);
+          }
           // Draw resize handles if this annotation is hovered
           if (this.hoveredAnnotation === annotation) {
-            this.drawLineResizeHandles(annotation); // Same as line
+            this.drawLineResizeHandles(annotation);
           }
           break;
         case 'text':
-          const fontSize = annotation.fontSize || 16;
+          const fontSize = annotation.fontSize || 24;
           this.canvasContext.fillStyle = annotation.color;
           this.canvasContext.font = `${fontSize}px Arial`;
           this.canvasContext.fillText(annotation.text, annotation.x, annotation.y);
-          // Draw resize handle if this annotation is hovered
-          if (this.hoveredAnnotation === annotation) {
-            this.drawTextResizeHandle(annotation);
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawTextSelectionIndicator(annotation);
           }
           break;
       }
     };
-    // Draw resize handle for text annotation
-    this.drawTextResizeHandle = (annotation) => {
-      if (!this.canvasContext || annotation.type !== 'text')
+    // Draw selection indicator for shapes
+    this.drawSelectionIndicator = (annotation) => {
+      if (!this.canvasContext)
+        return;
+      // Save current context
+      const originalStrokeStyle = this.canvasContext.strokeStyle;
+      const originalLineWidth = this.canvasContext.lineWidth;
+      // Draw selection outline
+      this.canvasContext.strokeStyle = '#0070F4';
+      this.canvasContext.lineWidth = 2;
+      this.canvasContext.setLineDash([5, 5]);
+      switch (annotation.type) {
+        case 'rectangle':
+          this.canvasContext.strokeRect(annotation.startX - 2, annotation.startY - 2, annotation.width + 4, annotation.height + 4);
+          break;
+        case 'line':
+        case 'arrow':
+          this.canvasContext.beginPath();
+          this.canvasContext.moveTo(annotation.startX, annotation.startY);
+          this.canvasContext.lineTo(annotation.endX, annotation.endY);
+          this.canvasContext.stroke();
+          break;
+      }
+      // Restore context
+      this.canvasContext.setLineDash([]);
+      this.canvasContext.strokeStyle = originalStrokeStyle;
+      this.canvasContext.lineWidth = originalLineWidth;
+    };
+    // Draw selection indicator for text
+    this.drawTextSelectionIndicator = (annotation) => {
+      if (!this.canvasContext)
         return;
-      const fontSize = annotation.fontSize || 16;
+      const fontSize = annotation.fontSize || 24;
       const textWidth = this.getTextWidth(annotation.text, fontSize);
-      const handleSize = 8;
-      const handleX = annotation.x + textWidth;
-      const handleY = annotation.y;
-      // Draw resize handle (small square) - using widget primary color
-      this.canvasContext.fillStyle = '#0070F4'; // var(--feedback-primary-color)
-      this.canvasContext.strokeStyle = '#ffffff';
+      // Save current context
+      const originalStrokeStyle = this.canvasContext.strokeStyle;
+      const originalLineWidth = this.canvasContext.lineWidth;
+      // Draw selection outline around text
+      this.canvasContext.strokeStyle = '#0070F4';
       this.canvasContext.lineWidth = 2;
-      this.canvasContext.fillRect(handleX - handleSize / 2, handleY - handleSize / 2, handleSize, handleSize);
-      this.canvasContext.strokeRect(handleX - handleSize / 2, handleY - handleSize / 2, handleSize, handleSize);
+      this.canvasContext.setLineDash([3, 3]);
+      this.canvasContext.strokeRect(annotation.x - 4, annotation.y - fontSize - 4, textWidth + 8, fontSize + 8);
+      // Restore context
+      this.canvasContext.setLineDash([]);
+      this.canvasContext.strokeStyle = originalStrokeStyle;
+      this.canvasContext.lineWidth = originalLineWidth;
     };
     this.drawArrow = (fromX, fromY, toX, toY) => {
       const headlen = 15; // Arrow head length
@@ -598,16 +308,23 @@ const FeedbackModal = class {
       this.showColorPicker = false;
       this.editingColorIndex = -1;
     };
-    // Check if point is in resize handle for any annotation type
+    // Get text width for resize handle positioning
+    this.getTextWidth = (text, fontSize) => {
+      // Better text width calculation
+      if (!this.canvasContext) {
+        return text.length * fontSize * 0.6; // Fallback
+      }
+      // Use actual canvas measurement for accuracy
+      const originalFont = this.canvasContext.font;
+      this.canvasContext.font = `${fontSize}px Arial`;
+      const width = this.canvasContext.measureText(text).width;
+      this.canvasContext.font = originalFont;
+      return width;
+    };
+    // Check if point is in resize handle for shapes (not text)
     this.isPointInResizeHandle = (x, y, annotation) => {
       const handleSize = 8;
       switch (annotation.type) {
-        case 'text':
-          const textWidth = this.getTextWidth(annotation.text, annotation.fontSize || 16);
-          const handleX = annotation.x + textWidth;
-          const handleY = annotation.y;
-          return x >= handleX - handleSize / 2 && x <= handleX + handleSize / 2 &&
-            y >= handleY - handleSize / 2 && y <= handleY + handleSize / 2;
         case 'rectangle':
           const right = annotation.startX + annotation.width;
           const bottom = annotation.startY + annotation.height;
@@ -632,84 +349,170 @@ const FeedbackModal = class {
           return false;
       }
     };
-    // Get text width for resize handle positioning
-    this.getTextWidth = (text, fontSize) => {
-      // Approximate text width calculation
-      return text.length * fontSize * 0.6;
-    };
-    // Start text resize
-    this.startTextResize = (annotation, startPos) => {
-      this.isResizing = true;
-      this.resizingAnnotation = annotation;
-      this.resizeStartSize = annotation.fontSize || 16;
-      this.dragStartPos = startPos;
+    // Draw resize handles for rectangle annotation (only bottom-right corner)
+    this.drawRectangleResizeHandles = (annotation) => {
+      if (!this.canvasContext || annotation.type !== 'rectangle')
+        return;
+      const handleSize = 8;
+      const right = annotation.startX + annotation.width;
+      const bottom = annotation.startY + annotation.height;
+      // 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;
+      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);
     };
-    // Handle text resize
-    this.handleTextResize = (currentPos) => {
-      if (!this.resizingAnnotation || !this.dragStartPos)
+    // Draw resize handles for line/arrow annotation
+    this.drawLineResizeHandles = (annotation) => {
+      if (!this.canvasContext || (annotation.type !== 'line' && annotation.type !== 'arrow'))
         return;
-      const deltaX = currentPos.x - this.dragStartPos.x;
-      const deltaY = currentPos.y - this.dragStartPos.y;
-      const avgDelta = (deltaX + deltaY) / 2;
-      // Calculate new font size (minimum 8px, maximum 72px)
-      const newSize = Math.max(8, Math.min(72, this.resizeStartSize + avgDelta * 0.5));
-      // Update annotation font size
-      const index = this.annotations.findIndex(a => a === this.resizingAnnotation);
-      if (index !== -1) {
-        this.annotations[index] = Object.assign(Object.assign({}, this.resizingAnnotation), { fontSize: Math.round(newSize) });
-        this.resizingAnnotation = this.annotations[index];
-      }
-      this.redrawAnnotations();
+      const handleSize = 8;
+      // Define handle positions (2 endpoints)
+      const handles = [
+        { x: annotation.startX, y: annotation.startY },
+        { x: annotation.endX, y: annotation.endY } // End point
+      ];
+      // Draw each 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);
+      });
     };
-    // Start resize for any annotation type
+    // Start resize for shapes
     this.startResize = (annotation, handle, startPos) => {
       this.isResizing = true;
       this.resizingAnnotation = annotation;
       this.resizeHandle = handle;
       this.dragStartPos = startPos;
       // Store original values for different annotation types
-      if (annotation.type === 'text') {
-        this.resizeStartSize = annotation.fontSize || 16;
-      }
-      else if (annotation.type === 'rectangle') {
+      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)
+    // Handle resize for different annotation types
+    this.handleResize = (currentPos) => {
+      if (!this.resizingAnnotation || !this.dragStartPos)
         return;
-      // Disable drawing on mobile devices
-      if (window.innerWidth <= 768)
+      const annotation = this.resizingAnnotation;
+      const index = this.annotations.findIndex(a => a === annotation);
+      if (index === -1)
         return;
-      // Close color picker if open
-      if (this.showColorPicker) {
-        this.closeColorPicker();
-      }
-      const coords = this.getCanvasCoordinates(event);
-      // Check if clicking on existing annotation first
-      const found = this.findAnnotationAt(coords.x, coords.y);
-      if (found) {
-        // Check if clicking on resize handle for any annotation type
-        const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
-        if (handle) {
-          this.startResize(found.annotation, handle, coords);
-          this.canvasRef.style.cursor = 'nw-resize';
-          return;
-        }
-        // Start dragging existing annotation
-        if (!this.isDrawing) {
-          this.isDragging = true;
-          this.draggedAnnotation = found.annotation;
+      let updatedAnnotation = Object.assign({}, annotation);
+      switch (annotation.type) {
+        case 'rectangle':
+          // 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);
+          updatedAnnotation.height = Math.max(10, this.resizeStartDimensions.height + rectDeltaY);
+          break;
+        case 'line':
+        case 'arrow':
+          // Line/arrow resize logic - move endpoints
+          if (this.resizeHandle === 'start') {
+            updatedAnnotation.startX = currentPos.x;
+            updatedAnnotation.startY = currentPos.y;
+          }
+          else if (this.resizeHandle === 'end') {
+            updatedAnnotation.endX = currentPos.x;
+            updatedAnnotation.endY = currentPos.y;
+          }
+          break;
+      }
+      // Update annotation in array
+      this.annotations[index] = updatedAnnotation;
+      this.resizingAnnotation = updatedAnnotation;
+      this.redrawAnnotations();
+    };
+    // Text editing methods
+    this.startTextEditing = (annotation) => {
+      const newText = prompt(this.editTextPromptText, annotation.text);
+      if (newText !== null && newText.trim()) {
+        const index = this.annotations.findIndex(a => a === annotation);
+        if (index !== -1) {
+          this.annotations[index] = Object.assign(Object.assign({}, annotation), { text: newText.trim() });
+          this.selectedAnnotation = this.annotations[index];
+          this.redrawAnnotations();
+        }
+      }
+    };
+    // Update selected annotation font size
+    this.updateSelectedTextSize = (newSize) => {
+      if (this.selectedAnnotation && this.selectedAnnotation.type === 'text') {
+        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        if (index !== -1) {
+          this.annotations[index] = Object.assign(Object.assign({}, this.selectedAnnotation), { fontSize: Math.max(8, Math.min(72, newSize)) });
+          this.selectedAnnotation = this.annotations[index];
+          this.redrawAnnotations();
+        }
+      }
+    };
+    // Update selected annotation border width
+    this.updateSelectedBorderWidth = (newWidth) => {
+      if (this.selectedAnnotation && ['rectangle', 'line', 'arrow'].includes(this.selectedAnnotation.type)) {
+        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        if (index !== -1) {
+          this.annotations[index] = Object.assign(Object.assign({}, this.selectedAnnotation), { lineWidth: Math.max(1, Math.min(20, newWidth)) });
+          this.selectedAnnotation = this.annotations[index];
+          this.redrawAnnotations();
+        }
+      }
+    };
+    // Enhanced mouse down handler with resize support
+    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();
+      }
+      const coords = this.getCanvasCoordinates(event);
+      // Check if clicking on existing annotation first
+      const found = this.findAnnotationAt(coords.x, coords.y);
+      if (found) {
+        // Select the annotation
+        this.selectedAnnotation = found.annotation;
+        // Check if clicking on resize handle for shapes (not text)
+        if (found.annotation.type !== 'text') {
+          const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
+          if (handle) {
+            this.startResize(found.annotation, handle, coords);
+            this.canvasRef.style.cursor = 'nw-resize';
+            return;
+          }
+        }
+        // Check for double-click to edit text
+        if (found.annotation.type === 'text' && event.detail === 2) {
+          this.startTextEditing(found.annotation);
+          return;
+        }
+        // Start dragging existing annotation
+        if (!this.isDrawing) {
+          this.isDragging = true;
+          this.draggedAnnotation = found.annotation;
           this.dragStartPos = coords;
           this.canvasRef.style.cursor = 'grabbing';
           return;
         }
       }
+      else {
+        // Clear selection if clicking on empty space
+        this.selectedAnnotation = null;
+      }
       // Original drawing logic
       this.isDrawing = true;
       if (this.canvasDrawingTool === 'text') {
-        const text = prompt('Enter text:');
+        const text = prompt(this.editTextPromptText);
         if (text) {
           const annotation = {
             type: 'text',
@@ -717,7 +520,7 @@ const FeedbackModal = class {
             y: coords.y,
             text,
             color: this.canvasDrawingColor,
-            fontSize: 16
+            fontSize: this.canvasTextSize
           };
           this.annotations = [...this.annotations, annotation];
           this.redrawAnnotations();
@@ -741,7 +544,7 @@ const FeedbackModal = class {
       if (window.innerWidth <= 768)
         return;
       const coords = this.getCanvasCoordinates(event);
-      // Handle resizing for any annotation type
+      // Handle resizing for shapes
       if (this.isResizing && this.resizingAnnotation) {
         this.handleResize(coords);
         return;
@@ -796,13 +599,15 @@ const FeedbackModal = class {
       // Handle hover states and cursor changes
       const found = this.findAnnotationAt(coords.x, coords.y);
       if (found) {
-        // Check if hovering over resize handle for any annotation type
-        const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
-        if (handle) {
-          this.canvasRef.style.cursor = 'nw-resize';
-          this.hoveredAnnotation = found.annotation;
-          this.redrawAnnotations();
-          return;
+        // Check if hovering over resize handle for shapes (not text)
+        if (found.annotation.type !== 'text') {
+          const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
+          if (handle) {
+            this.canvasRef.style.cursor = 'nw-resize';
+            this.hoveredAnnotation = found.annotation;
+            this.redrawAnnotations();
+            return;
+          }
         }
         // Regular hover over annotation
         this.canvasRef.style.cursor = 'grab';
@@ -834,154 +639,577 @@ const FeedbackModal = class {
         if (this.canvasRef) {
           this.canvasRef.style.cursor = 'crosshair';
         }
-        return;
+        return;
+      }
+      // Handle end of dragging
+      if (this.isDragging) {
+        this.isDragging = false;
+        this.draggedAnnotation = null;
+        this.dragStartPos = null;
+        if (this.canvasRef) {
+          this.canvasRef.style.cursor = 'crosshair';
+        }
+        return;
+      }
+      // Handle end of drawing
+      if (!this.isDrawing || !this.currentAnnotation)
+        return;
+      this.isDrawing = false;
+      this.annotations = [...this.annotations, this.currentAnnotation];
+      this.currentAnnotation = null;
+      this.redrawAnnotations();
+    };
+    // Convert screen coordinates to canvas coordinates
+    this.getCanvasCoordinates = (event) => {
+      if (!this.canvasRef)
+        return { x: 0, y: 0 };
+      const rect = this.canvasRef.getBoundingClientRect();
+      // Calculate the scale factor between display size and actual canvas size
+      const scaleX = this.canvasRef.width / rect.width;
+      const scaleY = this.canvasRef.height / rect.height;
+      const x = (event.clientX - rect.left) * scaleX;
+      const y = (event.clientY - rect.top) * scaleY;
+      return { x, y };
+    };
+    // Find annotation under mouse cursor
+    this.findAnnotationAt = (x, y) => {
+      // Check in reverse order (top to bottom)
+      for (let i = this.annotations.length - 1; i >= 0; i--) {
+        const annotation = this.annotations[i];
+        if (this.isPointInAnnotation(x, y, annotation)) {
+          return { annotation, index: i };
+        }
+      }
+      return null;
+    };
+    // Check if point is within annotation bounds
+    this.isPointInAnnotation = (x, y, annotation) => {
+      const tolerance = 10; // Click tolerance
+      switch (annotation.type) {
+        case 'rectangle':
+          const left = Math.min(annotation.startX, annotation.startX + annotation.width);
+          const right = Math.max(annotation.startX, annotation.startX + annotation.width);
+          const top = Math.min(annotation.startY, annotation.startY + annotation.height);
+          const bottom = Math.max(annotation.startY, annotation.startY + annotation.height);
+          return x >= left - tolerance && x <= right + tolerance &&
+            y >= top - tolerance && y <= bottom + tolerance;
+        case 'line':
+        case 'arrow':
+          // Distance from point to line
+          const A = annotation.endY - annotation.startY;
+          const B = annotation.startX - annotation.endX;
+          const C = annotation.endX * annotation.startY - annotation.startX * annotation.endY;
+          const distance = Math.abs(A * x + B * y + C) / Math.sqrt(A * A + B * B);
+          return distance <= tolerance;
+        case 'text':
+          // Use actual text dimensions for better dragging
+          const fontSize = annotation.fontSize || 24;
+          const textWidth = this.getTextWidth(annotation.text, fontSize);
+          const textHeight = fontSize;
+          // Text bounding box (y coordinate is baseline, so subtract font size for top)
+          const textLeft = annotation.x - tolerance;
+          const textRight = annotation.x + textWidth + tolerance;
+          const textTop = annotation.y - textHeight - tolerance;
+          const textBottom = annotation.y + tolerance;
+          return x >= textLeft && x <= textRight &&
+            y >= textTop && y <= textBottom;
+        default:
+          return false;
+      }
+    };
+    this.canvasEditorTitle = 'Edit screenshot';
+    this.canvasEditorCancelText = 'Cancel';
+    this.canvasEditorSaveText = 'Save';
+    this.screenshotTakingText = 'Taking screenshot...';
+    this.screenshotAttachedText = 'Screenshot attached';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.autoStartScreenshot = false;
+    this.existingScreenshot = '';
+    this.editTextButtonText = 'Edit Text';
+    this.sizeLabelText = 'Size:';
+    this.borderLabelText = 'Border:';
+    this.editTextPromptText = 'Edit text:';
+    this.screenshotErrorGeneral = 'Failed to capture screenshot.';
+    this.screenshotErrorPermission = 'Permission denied. Please allow screen sharing to take screenshots.';
+    this.screenshotErrorNotSupported = 'Screen capture is not supported in this browser.';
+    this.screenshotErrorNotFound = 'No screen sources available for capture.';
+    this.screenshotErrorCancelled = 'Screenshot capture was cancelled.';
+    this.screenshotErrorBrowserNotSupported = 'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.';
+    this.screenshotErrorUnexpected = 'An unexpected error occurred. Please try again.';
+    this.takingScreenshot = false;
+    this.showCanvasEditor = false;
+    this.canvasDrawingTool = 'rectangle';
+    this.canvasDrawingColor = '#ff0000';
+    this.canvasLineWidth = 3;
+    this.canvasTextSize = 24;
+    this.isDrawing = false;
+    this.annotations = [];
+    this.currentAnnotation = null;
+    this.isDragging = false;
+    this.draggedAnnotation = null;
+    this.dragStartPos = null;
+    this.showColorPicker = false;
+    this.editingColorIndex = -1;
+    this.selectedAnnotation = null;
+    this.isResizing = false;
+    this.resizingAnnotation = null;
+    this.resizeStartSize = 24;
+    this.resizeStartDimensions = null;
+    this.hoveredAnnotation = null;
+    this.resizeHandle = false;
+    this.defaultColors = ['#ff0000', '#00ff00', '#0000ff', '#000000'];
+  }
+  componentDidLoad() {
+    if (this.autoStartScreenshot) {
+      // Show the editor UI and start screenshot capture
+      this.showCanvasEditor = true;
+      setTimeout(() => {
+        this.openScreenShot();
+      }, 100); // Small delay to ensure component is fully rendered
+    }
+    else if (this.existingScreenshot) {
+      // Show editor with existing screenshot data
+      this.originalImageData = this.existingScreenshot;
+      this.showCanvasEditor = true;
+      setTimeout(() => {
+        this.initializeCanvas();
+      }, 100);
+    }
+  }
+  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;
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    return (h("div", { class: "canvas-editor-wrapper" }, 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) })))))))), (this.selectedAnnotation || this.canvasDrawingTool) && (h("div", { class: "toolbar-section selected-annotation-controls" }, (((_a = this.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === 'text' || (!this.selectedAnnotation && this.canvasDrawingTool === 'text')) && (h("div", { class: "text-controls" }, h("div", { class: "font-size-control" }, h("label", null, this.sizeLabelText), h("input", { type: "range", min: "8", max: "72", value: ((_b = this.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.fontSize) || this.canvasTextSize, onInput: (e) => {
+        const newSize = parseInt(e.target.value);
+        if (this.selectedAnnotation) {
+          this.updateSelectedTextSize(newSize);
+        }
+        else {
+          this.canvasTextSize = newSize;
+        }
+      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_c = this.selectedAnnotation) === null || _c === void 0 ? void 0 : _c.fontSize) || this.canvasTextSize, "px")), this.selectedAnnotation && (h("button", { class: "action-btn small", onClick: () => this.startTextEditing(this.selectedAnnotation) }, this.editTextButtonText)))), ((['rectangle', 'line', 'arrow'].includes((_d = this.selectedAnnotation) === null || _d === void 0 ? void 0 : _d.type)) ||
+      (!this.selectedAnnotation && ['rectangle', 'line', 'arrow'].includes(this.canvasDrawingTool))) && (h("div", { class: "shape-controls" }, h("div", { class: "border-width-control" }, h("label", null, this.borderLabelText), h("input", { type: "range", min: "1", max: "20", value: ((_e = this.selectedAnnotation) === null || _e === void 0 ? void 0 : _e.lineWidth) || this.canvasLineWidth, onInput: (e) => {
+        const newWidth = parseInt(e.target.value);
+        if (this.selectedAnnotation) {
+          this.updateSelectedBorderWidth(newWidth);
+        }
+        else {
+          this.canvasLineWidth = newWidth;
+        }
+      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_f = this.selectedAnnotation) === null || _f === void 0 ? void 0 : _f.lineWidth) || 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 }))))))));
+  }
+};
+CanvasEditor.style = canvasEditorCss;
+
+const feedbackButtonCss = ".feedback-button-content{cursor:pointer;max-width:fit-content;z-index:var(--feedback-button-z-index);font-family:var(--feedback-font-family)}.feedback-button-content--custom-font{font-family:inherit}.feedback-button-content--light{align-items:center;background-color:var(--feedback-button-light-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-light-text-color);display:flex;font-size:var(--feedback-button-text-font-size);font-weight:var(--feedback-button-text-font-weight);padding:8px 15px}.feedback-button-content--dark{align-items:center;background-color:var(--feedback-button-dark-bg-color);border-radius:var(--feedback-button-border-radius);box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;box-sizing:border-box;color:var(--feedback-button-dark-text-color);display:flex;font-weight:var(--feedback-button-text-font-weight);font-size:var(--feedback-button-text-font-size);padding:8px 15px}.icon-edit{stroke:var(--feedback-button-light-icon-color)}.feedback-button-content--dark .icon-edit{stroke:var(--feedback-button-dark-icon-color)}.feedback-button-content--bottom-right{bottom:10px;position:fixed;right:10px}.feedback-button-content--center-right{position:fixed;transform:rotate(-90deg) translateY(-50%);top:50%}.feedback-button-content--center-right.feedback-button-content--dark,.feedback-button-content--center-right.feedback-button-content--light{border-radius:4px;border-bottom-left-radius:0px;border-bottom-right-radius:0px}.feedback-button-content-icon{height:16px;margin-right:5px;width:16px}.feedback-button-content--center-right .feedback-button-content-icon{rotate:90deg}@media screen and (max-width: 767px){.feedback-button-content--hide-mobile{display:none}}";
+
+const FeedbackButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.feedbackSent = createEvent(this, "feedbackSent", 7);
+    this.feedbackError = createEvent(this, "feedbackError", 7);
+    this.buttonPosition = 'default';
+    this.buttonStyle = 'default';
+    this.hideIcon = false;
+    this.hideMobile = false;
+    this.sessionId = '';
+    this.metadata = '';
+    this.submit = false;
+    this.customFont = false;
+    this.emailAddress = '';
+    this.isEmailRequired = false;
+    this.fetchData = true;
+    this.hideEmail = false;
+    this.hidePrivacyPolicy = true;
+    this.hideRating = false;
+    this.hideScreenshotButton = false;
+    this.modalPosition = 'center';
+    this.project = '';
+    this.rating = undefined;
+    this.ratingMode = 'thumbs';
+    this.canvasEditorTitle = 'Edit screenshot';
+    this.canvasEditorCancelText = 'Cancel';
+    this.canvasEditorSaveText = 'Save';
+    this.editTextButtonText = 'Edit Text';
+    this.sizeLabelText = 'Size:';
+    this.borderLabelText = 'Border:';
+    this.editTextPromptText = 'Edit text:';
+    this.screenshotErrorGeneral = 'Failed to capture screenshot.';
+    this.screenshotErrorPermission = 'Permission denied. Please allow screen sharing to take screenshots.';
+    this.screenshotErrorNotSupported = 'Screen capture is not supported in this browser.';
+    this.screenshotErrorNotFound = 'No screen sources available for capture.';
+    this.screenshotErrorCancelled = 'Screenshot capture was cancelled.';
+    this.screenshotErrorBrowserNotSupported = 'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari.';
+    this.screenshotErrorUnexpected = 'An unexpected error occurred. Please try again.';
+    this.emailPlaceholder = 'Email address (optional)';
+    this.errorMessage = 'Please try again later.';
+    this.errorMessage403 = 'The request URL does not match the one defined in PushFeedback for this project.';
+    this.errorMessage404 = 'We could not find the provided project id in PushFeedback.';
+    this.footerText = '';
+    this.messagePlaceholder = 'Comments';
+    this.modalTitle = 'Share your feedback';
+    this.modalTitleError = 'Oops!';
+    this.modalTitleSuccess = 'Thanks for your feedback!';
+    this.privacyPolicyText = "I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.";
+    this.ratingPlaceholder = 'Was this page helpful?';
+    this.ratingStarsPlaceholder = 'How would you rate this page?';
+    this.screenshotAttachedText = 'Screenshot attached';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.screenshotTakingText = 'Taking screenshot...';
+    this.screenshotTopbarText = 'Select an element on this page';
+    this.sendButtonText = 'Send';
+    this.successMessage = '';
+  }
+  componentWillLoad() {
+    if (!this.sessionId) {
+      let storedSessionId = localStorage.getItem('pushfeedback_sessionid');
+      if (!storedSessionId) {
+        storedSessionId = this.generateRandomSessionId();
+        localStorage.setItem('pushfeedback_sessionid', storedSessionId);
+        this.sessionId = storedSessionId;
+      }
+    }
+    else {
+      localStorage.setItem('pushfeedback_sessionid', this.sessionId);
+    }
+  }
+  componentDidLoad() {
+    if (this.buttonPosition === 'center-right') {
+      const buttonContent = this.el.shadowRoot.querySelector('.feedback-button-content');
+      let adjustement = 0;
+      if (this.isSafariBrowser()) {
+        adjustement = 5;
+      }
+      buttonContent.style.right = `${((buttonContent.offsetWidth + adjustement) / 2) * -1}px`;
+    }
+    if (!this.customFont) {
+      this.loadInterFont();
+    }
+  }
+  connectedCallback() {
+    this.feedbackModal = document.createElement('feedback-modal');
+    const props = [
+      'customFont',
+      'emailAddress',
+      'fetchData',
+      'hideEmail',
+      'hidePrivacyPolicy',
+      'hideRating',
+      'hideScreenshotButton',
+      'isEmailRequired',
+      'modalPosition',
+      'project',
+      'rating',
+      'ratingMode',
+      'canvasEditorTitle',
+      'canvasEditorCancelText',
+      'canvasEditorSaveText',
+      'editTextButtonText',
+      'sizeLabelText',
+      'borderLabelText',
+      'editTextPromptText',
+      'screenshotErrorGeneral',
+      'screenshotErrorPermission',
+      'screenshotErrorNotSupported',
+      'screenshotErrorNotFound',
+      'screenshotErrorCancelled',
+      'screenshotErrorBrowserNotSupported',
+      'screenshotErrorUnexpected',
+      'emailPlaceholder',
+      'errorMessage',
+      'errorMessage403',
+      'errorMessage404',
+      'footerText',
+      'messagePlaceholder',
+      'metadata',
+      'modalTitle',
+      'modalTitleError',
+      'modalTitleSuccess',
+      'privacyPolicyText',
+      'ratingPlaceholder',
+      'ratingStarsPlaceholder',
+      'screenshotAttachedText',
+      'screenshotButtonText',
+      'screenshotTakingText',
+      'screenshotTopbarText',
+      'sendButtonText',
+      'successMessage',
+    ];
+    props.forEach((prop) => {
+      this.feedbackModal[prop] = this[prop];
+    });
+    document.body.appendChild(this.feedbackModal);
+  }
+  disconnectedCallback() {
+    document.body.removeChild(this.feedbackModal);
+  }
+  generateRandomSessionId(length = 16) {
+    return Math.random().toString(36).substr(2, length);
+  }
+  isSafariBrowser() {
+    const isSafari = /safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent);
+    return isSafari;
+  }
+  loadInterFont() {
+    const link = document.createElement('link');
+    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+  }
+  showModal() {
+    if (this.submit) {
+      this.submitRatingFeedback();
+    }
+    else {
+      this.feedbackModal.openModal();
+    }
+  }
+  async submitRatingFeedback() {
+    try {
+      const body = {
+        url: window.location.href,
+        project: this.project,
+        rating: this.rating || -1,
+        ratingMode: this.ratingMode,
+        message: '',
+        metadata: this.metadata,
+        session: localStorage.getItem('pushfeedback_sessionid') || '',
+      };
+      const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (res.status === 201) {
+        const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
+        this.feedbackSent.emit({ feedback: feedback_with_id });
+      }
+      else {
+        const errorText = await res.text();
+        const response = {
+          status: res.status,
+          message: errorText,
+        };
+        this.feedbackError.emit({ error: response });
+      }
+    }
+    catch (error) {
+      const response = {
+        status: 500,
+        message: error,
+      };
+      this.feedbackError.emit({ error: response });
+    }
+  }
+  render() {
+    return (h(Host, null, h("a", { class: `feedback-button-content feedback-button-content--${this.buttonStyle} feedback-button-content--${this.buttonPosition} ${this.customFont ? 'feedback-button-content--custom-font' : ''} ${this.hideMobile ? 'feedback-button-content--hide-mobile' : ''}`, onClick: () => this.showModal() }, !this.hideIcon && this.buttonStyle != 'default' && (h("span", { class: "feedback-button-content-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon-edit" }, h("path", { d: "M12 20h9" }), h("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })))), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+FeedbackButton.style = feedbackButtonCss;
+
+const feedbackModalCss = ".text-center{flex-grow:1;text-align:center}.feedback-modal-wrapper *{font-family:var(--feedback-font-family)}.feedback-modal-wrapper--custom-font *{font-family:inherit}.feedback-modal-wrapper{position:absolute;z-index:var(--feedback-modal-modal-wrapper-z-index)}.feedback-overlay{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index);transition:opacity 0.2s ease-out}.feedback-overlay--visible{opacity:1}.feedback-modal{display:inline-block;position:relative}.feedback-modal-content{background-color:var(--feedback-modal-content-bg-color);border-color:1px solid var(--feedback-modal-header-text-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-content-text-color);display:flex;flex-direction:column;left:50%;max-width:90%;padding:20px;position:fixed;top:50%;transform:translate(-50%, -50%) scale(0.95);opacity:0;width:100%;z-index:var(--feedback-modal-content-z-index);transition:transform 0.2s ease-out, opacity 0.2s ease-out}.feedback-modal-content--open{transform:translate(-50%, -50%) scale(1);opacity:1}.feedback-modal-header{align-items:center;color:var(--feedback-modal-header-text-color);display:flex;font-size:var(--feedback-header-font-size);font-weight:var(--feedback-modal-header-font-weight);justify-content:space-between;margin-bottom:20px}.feedback-modal-rating-buttons{width:100%;margin-bottom:20px}.feedback-modal-rating-button{padding:0;background-color:transparent;border:transparent;margin-right:5px;cursor:pointer}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button{border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);font-size:var(--feedback-modal-button-font-size);font-weight:500;margin-right:10px;justify-content:center;padding:5px 10px}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg{stroke:var(--feedback-modal-rating-button-selected-color)}.feedback-modal-rating-buttons svg{stroke:var(--feedback-modal-rating-button-color);cursor:pointer}.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg{fill:var(--feedback-modal-rating-button-stars-selected-color);stroke:var(--feedback-modal-rating-button-stars-selected-color)}.feedback-modal-text textarea{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:100px;min-height:100px;padding:10px;resize:vertical;width:100%}.feedback-modal-email input{background-color:var(--feedback-modal-input-bg-color);border:1px solid var(--feedback-modal-input-border-color);border-radius:var(--feedback-modal-input-border-radius);box-sizing:border-box;color:var(--feedback-modal-input-text-color);font-size:var(--feedback-modal-input-font-size);margin-bottom:20px;height:40px;padding:10px;width:100%;margin-bottom:20px}.feedback-modal-privacy{font-size:var(--feedback-modal-input-font-size);margin-bottom:20px}.feedback-modal-text textarea:focus,.feedback-modal-email input:focus{border:1px solid var(--feedback-modal-input-border-color-focused);outline:none}.feedback-modal-buttons{display:flex;flex-direction:column}.feedback-modal-buttons .feedback-modal-button{margin-bottom:20px}.feedback-modal-button{align-items:center;background-color:transparent;border:1px solid var(--feedback-modal-button-border-color);border-radius:var(--feedback-modal-button-border-radius);color:var(--feedback-modal-button-text-color);cursor:pointer;display:flex;font-size:var(--feedback-modal-button-font-size);font-weight:500;justify-content:center;min-height:40px;padding:5px 10px}.feedback-modal-button svg{margin-right:6px}.feedback-modal-button path{fill:var(--feedback-modal-button-icon-color)}.feedback-modal-button:hover path,.feedback-modal-button--active path{fill:var(--feedback-modal-button-icon-color-active)}.feedback-modal-button--submit{background-color:var(--feedback-modal-button-submit-bg-color);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-submit-text-color)}.feedback-modal-button:hover,.feedback-modal-button--active{background-color:var(--feedback-modal-button-bg-color-active);border:1px solid var(--feedback-modal-button-border-color-active);color:var(--feedback-modal-button-text-color-active)}.feedback-modal-button--submit:hover{background-color:var(--feedback-modal-button-submit-bg-color-hover);border:1px solid var(--feedback-modal-button-submit-border-color-hover);color:var(--feedback-modal-button-submit-text-color-hover)}.feedback-modal-input-heading{display:block;font-size:14px;font-weight:300;padding-bottom:10px}.feedback-modal-footer{font-size:12px;text-align:center}.feedback-modal-footer a{color:var(--feedback-modal-footer-link);font-weight:500;text-decoration:none}.feedback-logo,.feedback-footer-text{display:block;text-align:center;margin-top:5px}.feedback-footer-text{margin-top:10px;line-height:1.5}.feedback-modal-close{background-color:var(--feedback-modal-close-bg-color);border:0;border-radius:50%;cursor:pointer;height:22px;margin-left:auto;padding:0;width:22px}.feedback-modal-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-screenshot{background-color:var(--feedback-modal-screenshot-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--feedback-modal-screnshot-z-index)}.feedback-modal-screenshot-header{align-items:center;background-color:var(--feedback-modal-screenshot-header-bg-color);border-radius:var(--feedback-modal-content-border-radius);box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);box-sizing:border-box;color:var(--feedback-modal-screenshot-header-text-color);cursor:pointer;display:flex;left:50%;top:20px;transform:translateX(-50%);padding:10px;position:fixed;width:max-content;z-index:var(--feedback-modal-screenshot-header-z-index)}.feedback-modal-screenshot-close{height:24px;padding-left:10px;width:24px}.feedback-modal-screenshot-close svg{stroke:var(--feedback-modal-close-color)}.feedback-modal-message{font-size:var(--feedback-modal-message-font-size);margin-top:0}.feedback-modal-element-hover{background-color:transparent;cursor:pointer;border:1px solid var(--feedback-modal-element-hover-border-color)}.feedback-modal-element-selected{background-color:transparent;border:3px solid var(--feedback-modal-element-selected-border-color) !important;box-shadow:0 0 0 2px rgba(0, 123, 255, 0.3) !important}.screenshot-preview{display:inline-block;width:30px;height:30px;overflow:hidden;border-radius:4px;margin-right:10px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:transform 0.2s ease}.screenshot-preview:hover{transform:scale(1.1)}.screenshot-preview img{width:100%;height:100%;object-fit:cover}.screenshot-loading{display:inline-flex;align-items:center;margin-right:8px}@media screen and (min-width: 768px){.feedback-modal-content{max-width:var(--feedback-modal-content-max-width)}.feedback-modal-content.feedback-modal-content--bottom-right{bottom:var(--feedback-modal-content-position-bottom);left:initial;right:var(--feedback-modal-content-position-right);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--bottom-left{bottom:var(--feedback-modal-content-position-bottom);left:var(--feedback-modal-content-position-left);top:initial;transform:initial}.feedback-modal-content.feedback-modal-content--top-right{right:var(--feedback-modal-content-position-right);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--top-left{left:var(--feedback-modal-content-position-left);top:var(--feedback-modal-content-position-top);transform:initial}.feedback-modal-content.feedback-modal-content--center-left{left:5px;right:auto;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--center-right{left:auto;right:5px;top:50%;transform:translateY(-50%)}.feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,.feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{transform:translateX(0)}.feedback-modal-content.feedback-modal-content--sidebar-left{max-width:var(--feedback-modal-content-sidebar-max-width);left:0;right:auto;height:100vh;top:0;transform:translateX(-100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-content.feedback-modal-content--sidebar-right{max-width:var(--feedback-modal-content-sidebar-max-width);left:auto;right:0;height:100vh;top:0;transform:translateX(100%);transition:transform 0.5s ease-in-out;border-radius:0}.feedback-modal-text textarea{height:150px;min-height:150px}.feedback-modal-content.feedback-modal-content--bottom-right{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--bottom-left{transform:translateY(20px)}.feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-right{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open{transform:translateY(0)}.feedback-modal-content.feedback-modal-content--top-left{transform:translateY(-20px)}.feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open{transform:translateY(0)}}@keyframes feather-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.feather-loader{animation:feather-spin 1s linear infinite;display:block}.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)}";
+
+const FeedbackModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.feedbackSent = createEvent(this, "feedbackSent", 7);
+    this.feedbackError = createEvent(this, "feedbackError", 7);
+    this.onScrollDebounced = () => {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = setTimeout(() => {
+        document.documentElement.classList.remove('feedback-modal-screenshot-closing');
+        document.documentElement.style.top = '';
+        window.removeEventListener('scroll', this.onScrollDebounced);
+      }, 200);
+    };
+    this.handleSubmit = async (event) => {
+      event.preventDefault();
+      if (this.isEmailRequired && !this.formEmail) {
+        return;
+      }
+      this.resetOverflow();
+      this.showScreenshotMode = false;
+      this.showScreenshotTopBar = false;
+      this.showModal = false;
+      this.sending = true;
+      try {
+        const body = {
+          url: window.location.href,
+          message: this.formMessage,
+          email: this.formEmail,
+          project: this.project,
+          screenshot: this.encodedScreenshot,
+          rating: this.selectedRating,
+          ratingMode: this.ratingMode,
+          metadata: this.metadata,
+          verification: this.formVerification,
+          session: localStorage.getItem('pushfeedback_sessionid') || '',
+        };
+        const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
+          method: 'POST',
+          body: JSON.stringify(body),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+        if (res.status === 201) {
+          const feedback_with_id = Object.assign(Object.assign({}, body), { id: await res.json() });
+          this.feedbackSent.emit({ feedback: feedback_with_id });
+          this.formSuccess = true;
+          this.formError = false;
+        }
+        else {
+          const errorText = await res.text();
+          const response = {
+            status: res.status,
+            message: errorText,
+          };
+          this.feedbackError.emit({ error: response });
+          this.formSuccess = false;
+          this.formError = true;
+          this.formErrorStatus = res.status;
+        }
       }
-      // Handle end of dragging
-      if (this.isDragging) {
-        this.isDragging = false;
-        this.draggedAnnotation = null;
-        this.dragStartPos = null;
-        if (this.canvasRef) {
-          this.canvasRef.style.cursor = 'crosshair';
-        }
-        return;
+      catch (error) {
+        const response = {
+          status: 500,
+          message: error,
+        };
+        this.feedbackError.emit({ error: response });
+        this.formSuccess = false;
+        this.formError = true;
+        this.formErrorStatus = 500;
+      }
+      finally {
+        this.sending = false;
+        this.showModal = true;
       }
-      // Handle end of drawing
-      if (!this.isDrawing || !this.currentAnnotation)
-        return;
-      this.isDrawing = false;
-      this.annotations = [...this.annotations, this.currentAnnotation];
-      this.currentAnnotation = null;
-      this.redrawAnnotations();
     };
-    // Draw resize handles for rectangle annotation (only bottom-right corner)
-    this.drawRectangleResizeHandles = (annotation) => {
-      if (!this.canvasContext || annotation.type !== 'rectangle')
-        return;
-      const handleSize = 8;
-      const right = annotation.startX + annotation.width;
-      const bottom = annotation.startY + annotation.height;
-      // 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;
-      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.close = () => {
+      this.isAnimating = false;
+      setTimeout(() => {
+        this.sending = false;
+        this.showModal = false;
+        this.showScreenshotMode = false;
+        this.showScreenshotTopBar = false;
+        this.hasSelectedElement = false;
+        this.encodedScreenshot = null;
+        // Remove highlight from ALL selected elements
+        document.querySelectorAll('.feedback-modal-element-selected').forEach(el => {
+          el.classList.remove('feedback-modal-element-selected');
+        });
+        // Reset form states
+        this.formSuccess = false;
+        this.formError = false;
+        this.formErrorStatus = 500;
+        this.formMessage = '';
+        this.formEmail = '';
+        this.resetOverflow();
+      }, 200);
     };
-    // Draw resize handles for line/arrow annotation
-    this.drawLineResizeHandles = (annotation) => {
-      if (!this.canvasContext || (annotation.type !== 'line' && annotation.type !== 'arrow'))
-        return;
-      const handleSize = 8;
-      // Define handle positions (2 endpoints)
-      const handles = [
-        { x: annotation.startX, y: annotation.startY },
-        { x: annotation.endX, y: annotation.endY } // End point
-      ];
-      // Draw each 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);
-      });
+    // Handle screenshot events from canvas editor
+    this.handleScreenshotReady = (event) => {
+      this.encodedScreenshot = event.detail.screenshot;
+      this.showModal = true;
+      this.takingScreenshot = false;
+      this.showCanvasEditor = false;
+      this.autoStartCapture = false;
     };
-    // Convert screen coordinates to canvas coordinates
-    this.getCanvasCoordinates = (event) => {
-      if (!this.canvasRef)
-        return { x: 0, y: 0 };
-      const rect = this.canvasRef.getBoundingClientRect();
-      // Calculate the scale factor between display size and actual canvas size
-      const scaleX = this.canvasRef.width / rect.width;
-      const scaleY = this.canvasRef.height / rect.height;
-      const x = (event.clientX - rect.left) * scaleX;
-      const y = (event.clientY - rect.top) * scaleY;
-      return { x, y };
+    this.handleScreenshotCancelled = () => {
+      this.showModal = true;
+      this.takingScreenshot = false;
+      this.showCanvasEditor = false;
+      this.autoStartCapture = false;
     };
-    // Find annotation under mouse cursor
-    this.findAnnotationAt = (x, y) => {
-      // Check in reverse order (top to bottom)
-      for (let i = this.annotations.length - 1; i >= 0; i--) {
-        const annotation = this.annotations[i];
-        if (this.isPointInAnnotation(x, y, annotation)) {
-          return { annotation, index: i };
-        }
-      }
-      return null;
+    this.handleScreenshotError = (event) => {
+      console.error('Screenshot error:', event.detail.error);
+      // Store error message to display in feedback modal
+      this.screenshotError = event.detail.error;
+      this.showScreenshotError = true;
+      // Close canvas editor and return to feedback modal
+      this.showModal = true;
+      this.takingScreenshot = false;
+      this.showCanvasEditor = false;
+      this.autoStartCapture = false;
+      // Auto-hide error after 8 seconds
+      setTimeout(() => {
+        this.showScreenshotError = false;
+      }, 8000);
     };
-    // Check if point is within annotation bounds
-    this.isPointInAnnotation = (x, y, annotation) => {
-      const tolerance = 10; // Click tolerance
-      switch (annotation.type) {
-        case 'rectangle':
-          const left = Math.min(annotation.startX, annotation.startX + annotation.width);
-          const right = Math.max(annotation.startX, annotation.startX + annotation.width);
-          const top = Math.min(annotation.startY, annotation.startY + annotation.height);
-          const bottom = Math.max(annotation.startY, annotation.startY + annotation.height);
-          return x >= left - tolerance && x <= right + tolerance &&
-            y >= top - tolerance && y <= bottom + tolerance;
-        case 'line':
-        case 'arrow':
-          // Distance from point to line
-          const A = annotation.endY - annotation.startY;
-          const B = annotation.startX - annotation.endX;
-          const C = annotation.endX * annotation.startY - annotation.startX * annotation.endY;
-          const distance = Math.abs(A * x + B * y + C) / Math.sqrt(A * A + B * B);
-          return distance <= tolerance;
-        case 'text':
-          // Simple bounding box for text
-          return x >= annotation.x - tolerance && x <= annotation.x + 100 &&
-            y >= annotation.y - 20 && y <= annotation.y + tolerance;
-        default:
-          return false;
-      }
+    // Trigger screenshot capture
+    this.openScreenShot = () => {
+      this.showModal = false;
+      this.takingScreenshot = true;
+      this.autoStartCapture = true; // Auto-start new screenshot
+      this.showCanvasEditor = true;
     };
-    // Handle resize for different annotation types
-    this.handleResize = (currentPos) => {
-      if (!this.resizingAnnotation || !this.dragStartPos)
-        return;
-      const annotation = this.resizingAnnotation;
-      const index = this.annotations.findIndex(a => a === annotation);
-      if (index === -1)
-        return;
-      let updatedAnnotation = Object.assign({}, annotation);
-      switch (annotation.type) {
-        case 'text':
-          // Text resize logic (existing)
-          const deltaX = currentPos.x - this.dragStartPos.x;
-          const deltaY = currentPos.y - this.dragStartPos.y;
-          const avgDelta = (deltaX + deltaY) / 2;
-          const newSize = Math.max(8, Math.min(72, this.resizeStartSize + avgDelta * 0.5));
-          updatedAnnotation.fontSize = Math.round(newSize);
-          break;
-        case 'rectangle':
-          // 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
-          if (this.resizeHandle === 'start') {
-            updatedAnnotation.startX = currentPos.x;
-            updatedAnnotation.startY = currentPos.y;
-          }
-          else if (this.resizeHandle === 'end') {
-            updatedAnnotation.endX = currentPos.x;
-            updatedAnnotation.endY = currentPos.y;
-          }
-          break;
+    // Open canvas editor for existing screenshot
+    this.openCanvasEditor = (event) => {
+      if (event) {
+        event.stopPropagation();
       }
-      // Update annotation in array
-      this.annotations[index] = updatedAnnotation;
-      this.resizingAnnotation = updatedAnnotation;
-      this.redrawAnnotations();
+      this.showModal = false;
+      this.autoStartCapture = false; // Don't auto-start, just edit existing
+      this.showCanvasEditor = true;
     };
     this.sending = false;
     this.formMessage = '';
@@ -997,28 +1225,10 @@ const FeedbackModal = class {
     this.overlayVisible = false;
     this.isAnimating = false;
     this.takingScreenshot = false;
-    this.showPreviewModal = false;
-    this.screenshotError = '';
     this.showScreenshotError = false;
+    this.screenshotError = '';
     this.showCanvasEditor = false;
-    this.canvasDrawingTool = 'rectangle';
-    this.canvasDrawingColor = '#ff0000';
-    this.canvasLineWidth = 3;
-    this.isDrawing = false;
-    this.annotations = [];
-    this.currentAnnotation = null;
-    this.isDragging = false;
-    this.draggedAnnotation = null;
-    this.dragStartPos = null;
-    this.showColorPicker = false;
-    this.editingColorIndex = -1;
-    this.isResizing = false;
-    this.resizingAnnotation = null;
-    this.resizeStartSize = 16;
-    this.resizeStartDimensions = null;
-    this.hoveredAnnotation = null;
-    this.resizeHandle = false;
-    this.defaultColors = ['#ff0000', '#00ff00', '#0000ff', '#000000'];
+    this.autoStartCapture = false;
     this.customFont = false;
     this.emailAddress = '';
     this.hideEmail = false;
@@ -1057,6 +1267,17 @@ const FeedbackModal = class {
     this.canvasEditorTitle = 'Edit screenshot';
     this.canvasEditorCancelText = 'Cancel';
     this.canvasEditorSaveText = 'Save';
+    this.editTextButtonText = 'Edit Text';
+    this.sizeLabelText = 'Size:';
+    this.borderLabelText = 'Border:';
+    this.editTextPromptText = 'Edit text:';
+    this.screenshotErrorGeneral = 'Failed to capture screenshot.';
+    this.screenshotErrorPermission = 'Permission denied. Please allow screen sharing to take screenshots.';
+    this.screenshotErrorNotSupported = 'Screen capture is not supported in this browser.';
+    this.screenshotErrorNotFound = 'No screen sources available for capture.';
+    this.screenshotErrorCancelled = 'Screenshot capture was cancelled.';
+    this.screenshotErrorBrowserNotSupported = 'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari.';
+    this.screenshotErrorUnexpected = 'An unexpected error occurred. Please try again.';
   }
   componentWillLoad() {
     if (this.fetchData)
@@ -1091,63 +1312,6 @@ const FeedbackModal = class {
   handleEmailInput(event) {
     this.formEmail = event.target.value;
   }
-  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;
   }
@@ -1158,7 +1322,7 @@ const FeedbackModal = class {
     this.selectedRating = newRating;
   }
   render() {
-    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
+    return (h("div", { class: `feedback-modal-wrapper ${this.customFont ? 'feedback-modal-wrapper--custom-font' : ''}` }, this.showCanvasEditor && (h("canvas-editor", { ref: (el) => this.canvasEditorRef = el, "canvas-editor-title": this.canvasEditorTitle, "canvas-editor-cancel-text": this.canvasEditorCancelText, "canvas-editor-save-text": this.canvasEditorSaveText, "screenshot-taking-text": this.screenshotTakingText, "screenshot-attached-text": this.screenshotAttachedText, "screenshot-button-text": this.screenshotButtonText, "auto-start-screenshot": this.autoStartCapture, "existing-screenshot": this.encodedScreenshot || '', "edit-text-button-text": this.editTextButtonText, "size-label-text": this.sizeLabelText, "border-label-text": this.borderLabelText, "edit-text-prompt-text": this.editTextPromptText, "screenshot-error-general": this.screenshotErrorGeneral, "screenshot-error-permission": this.screenshotErrorPermission, "screenshot-error-not-supported": this.screenshotErrorNotSupported, "screenshot-error-not-found": this.screenshotErrorNotFound, "screenshot-error-cancelled": this.screenshotErrorCancelled, "screenshot-error-browser-not-supported": this.screenshotErrorBrowserNotSupported, "screenshot-error-unexpected": this.screenshotErrorUnexpected, onScreenshotReady: this.handleScreenshotReady, onScreenshotCancelled: this.handleScreenshotCancelled, onScreenshotFailed: this.handleScreenshotError })), 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();
@@ -1174,7 +1338,7 @@ const FeedbackModal = class {
         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 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 }))))))));
+      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 }))))))));
   }
   componentDidRender() {
     if (this.showModal) {
@@ -1194,4 +1358,4 @@ const FeedbackModal = class {
 };
 FeedbackModal.style = feedbackModalCss;
 
-export { FeedbackButton as feedback_button, FeedbackModal as feedback_modal };
+export { CanvasEditor as canvas_editor, FeedbackButton as feedback_button, FeedbackModal as feedback_modal };