pushfeedback 0.1.69 → 0.1.70

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

@@ -1,1792 +0,0 @@
-import { h } from '@stencil/core';
-export class FeedbackModal {
-  constructor() {
-    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);
-    };
-    this.closeCanvasEditor = () => {
-      this.showCanvasEditor = false;
-      this.showModal = true;
-    };
-    this.saveAnnotations = () => {
-      if (this.canvasRef) {
-        // Create final image with annotations
-        const finalDataUrl = this.canvasRef.toDataURL('image/png');
-        this.encodedScreenshot = finalDataUrl;
-      }
-      this.showCanvasEditor = false;
-      this.showModal = true;
-    };
-    this.initializeCanvas = () => {
-      if (!this.canvasRef || !this.originalImageData)
-        return;
-      this.canvasContext = this.canvasRef.getContext('2d');
-      const img = new Image();
-      img.onload = () => {
-        // Set canvas to original image dimensions
-        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 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
-        // Calculate final display dimensions
-        const displayWidth = img.width * scale;
-        const displayHeight = img.height * scale;
-        // Set CSS size for display (this scales the canvas visually)
-        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
-        this.redrawAnnotations();
-      };
-      img.src = this.originalImageData;
-    };
-    this.redrawAnnotations = () => {
-      if (!this.canvasContext)
-        return;
-      // Clear and redraw background image
-      const img = new Image();
-      img.onload = () => {
-        this.canvasContext.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
-        this.canvasContext.drawImage(img, 0, 0);
-        // Draw all annotations
-        this.annotations.forEach(annotation => {
-          this.drawAnnotation(annotation);
-        });
-      };
-      img.src = this.originalImageData;
-    };
-    this.drawAnnotation = (annotation) => {
-      if (!this.canvasContext)
-        return;
-      this.canvasContext.strokeStyle = annotation.color;
-      this.canvasContext.lineWidth = annotation.lineWidth;
-      this.canvasContext.lineCap = 'round';
-      this.canvasContext.lineJoin = 'round';
-      switch (annotation.type) {
-        case 'rectangle':
-          this.canvasContext.strokeRect(annotation.startX, annotation.startY, annotation.width, annotation.height);
-          // Draw resize handle if this annotation is hovered
-          if (this.hoveredAnnotation === annotation) {
-            this.drawRectangleResizeHandles(annotation);
-          }
-          break;
-        case 'line':
-          this.canvasContext.beginPath();
-          this.canvasContext.moveTo(annotation.startX, annotation.startY);
-          this.canvasContext.lineTo(annotation.endX, annotation.endY);
-          this.canvasContext.stroke();
-          // Draw resize handles if this annotation is hovered
-          if (this.hoveredAnnotation === annotation) {
-            this.drawLineResizeHandles(annotation);
-          }
-          break;
-        case 'arrow':
-          this.drawArrow(annotation.startX, annotation.startY, annotation.endX, annotation.endY);
-          // Draw resize handles if this annotation is hovered
-          if (this.hoveredAnnotation === annotation) {
-            this.drawLineResizeHandles(annotation); // Same as line
-          }
-          break;
-        case 'text':
-          const fontSize = annotation.fontSize || 16;
-          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);
-          }
-          break;
-      }
-    };
-    // Draw resize handle for text annotation
-    this.drawTextResizeHandle = (annotation) => {
-      if (!this.canvasContext || annotation.type !== 'text')
-        return;
-      const fontSize = annotation.fontSize || 16;
-      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';
-      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.drawArrow = (fromX, fromY, toX, toY) => {
-      const headlen = 15; // Arrow head length
-      const angle = Math.atan2(toY - fromY, toX - fromX);
-      // Draw line
-      this.canvasContext.beginPath();
-      this.canvasContext.moveTo(fromX, fromY);
-      this.canvasContext.lineTo(toX, toY);
-      this.canvasContext.stroke();
-      // Draw arrow head
-      this.canvasContext.beginPath();
-      this.canvasContext.moveTo(toX, toY);
-      this.canvasContext.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
-      this.canvasContext.moveTo(toX, toY);
-      this.canvasContext.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
-      this.canvasContext.stroke();
-    };
-    this.undoLastAnnotation = () => {
-      this.annotations = this.annotations.slice(0, -1);
-      this.redrawAnnotations();
-    };
-    // Handle color slot editing
-    this.handleColorSlotClick = (colorIndex) => {
-      if (this.editingColorIndex === colorIndex) {
-        // If already editing this slot, just select the color
-        this.canvasDrawingColor = this.defaultColors[colorIndex];
-        this.showColorPicker = false;
-        this.editingColorIndex = -1;
-      }
-      else {
-        // Start editing this color slot
-        this.editingColorIndex = colorIndex;
-        this.showColorPicker = true;
-        this.canvasDrawingColor = this.defaultColors[colorIndex];
-      }
-    };
-    // Update color in slot
-    this.updateColorSlot = (newColor) => {
-      if (this.editingColorIndex >= 0 && this.editingColorIndex < this.defaultColors.length) {
-        this.defaultColors[this.editingColorIndex] = newColor;
-        this.canvasDrawingColor = newColor;
-        this.showColorPicker = false;
-        this.editingColorIndex = -1;
-        // Force reactivity
-        this.defaultColors = [...this.defaultColors];
-      }
-    };
-    // Handle color picker input without closing
-    this.handleColorPickerInput = (event) => {
-      event.stopPropagation();
-      const newColor = event.target.value;
-      if (this.editingColorIndex >= 0 && this.editingColorIndex < this.defaultColors.length) {
-        this.defaultColors[this.editingColorIndex] = newColor;
-        this.canvasDrawingColor = newColor;
-        // Force reactivity
-        this.defaultColors = [...this.defaultColors];
-      }
-    };
-    // Handle color picker click to prevent closing
-    this.handleColorPickerClick = (event) => {
-      event.stopPropagation();
-    };
-    // Close color picker
-    this.closeColorPicker = () => {
-      this.showColorPicker = false;
-      this.editingColorIndex = -1;
-    };
-    // Check if point is in resize handle for any annotation type
-    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;
-          // Only check bottom-right corner handle
-          return x >= right - handleSize / 2 && x <= right + handleSize / 2 &&
-            y >= bottom - handleSize / 2 && y <= bottom + handleSize / 2;
-        case 'line':
-        case 'arrow':
-          // Check both endpoint handles
-          const lineHandles = [
-            { x: annotation.startX, y: annotation.startY, point: 'start' },
-            { x: annotation.endX, y: annotation.endY, point: 'end' }
-          ];
-          for (const handle of lineHandles) {
-            if (x >= handle.x - handleSize / 2 && x <= handle.x + handleSize / 2 &&
-              y >= handle.y - handleSize / 2 && y <= handle.y + handleSize / 2) {
-              return handle.point; // Return which endpoint was clicked
-            }
-          }
-          return false;
-        default:
-          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;
-    };
-    // Handle text resize
-    this.handleTextResize = (currentPos) => {
-      if (!this.resizingAnnotation || !this.dragStartPos)
-        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();
-    };
-    // Start resize for any annotation type
-    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') {
-        this.resizeStartDimensions = { width: annotation.width, height: annotation.height };
-      }
-    };
-    // Enhanced mouse down handler with resize detection for all annotation types
-    this.handleCanvasMouseDown = (event) => {
-      if (!this.canvasRef)
-        return;
-      // Disable drawing on mobile devices
-      if (window.innerWidth <= 768)
-        return;
-      // Close color picker if open
-      if (this.showColorPicker) {
-        this.closeColorPicker();
-      }
-      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;
-          this.dragStartPos = coords;
-          this.canvasRef.style.cursor = 'grabbing';
-          return;
-        }
-      }
-      // Original drawing logic
-      this.isDrawing = true;
-      if (this.canvasDrawingTool === 'text') {
-        const text = prompt('Enter text:');
-        if (text) {
-          const annotation = {
-            type: 'text',
-            x: coords.x,
-            y: coords.y,
-            text,
-            color: this.canvasDrawingColor,
-            fontSize: 16
-          };
-          this.annotations = [...this.annotations, annotation];
-          this.redrawAnnotations();
-        }
-        this.isDrawing = false;
-      }
-      else {
-        this.currentAnnotation = {
-          type: this.canvasDrawingTool,
-          startX: coords.x,
-          startY: coords.y,
-          color: this.canvasDrawingColor,
-          lineWidth: this.canvasLineWidth
-        };
-      }
-    };
-    this.handleCanvasMouseMove = (event) => {
-      if (!this.canvasRef)
-        return;
-      // Disable drawing on mobile devices
-      if (window.innerWidth <= 768)
-        return;
-      const coords = this.getCanvasCoordinates(event);
-      // Handle resizing for any annotation type
-      if (this.isResizing && this.resizingAnnotation) {
-        this.handleResize(coords);
-        return;
-      }
-      // Handle dragging existing annotation
-      if (this.isDragging && this.draggedAnnotation && this.dragStartPos) {
-        const deltaX = coords.x - this.dragStartPos.x;
-        const deltaY = coords.y - this.dragStartPos.y;
-        // Update annotation position
-        const updatedAnnotation = Object.assign({}, this.draggedAnnotation);
-        switch (updatedAnnotation.type) {
-          case 'rectangle':
-            updatedAnnotation.startX += deltaX;
-            updatedAnnotation.startY += deltaY;
-            break;
-          case 'line':
-          case 'arrow':
-            updatedAnnotation.startX += deltaX;
-            updatedAnnotation.startY += deltaY;
-            updatedAnnotation.endX += deltaX;
-            updatedAnnotation.endY += deltaY;
-            break;
-          case 'text':
-            updatedAnnotation.x += deltaX;
-            updatedAnnotation.y += deltaY;
-            break;
-        }
-        // Update annotation in array
-        const index = this.annotations.findIndex(a => a === this.draggedAnnotation);
-        if (index !== -1) {
-          this.annotations[index] = updatedAnnotation;
-          this.draggedAnnotation = updatedAnnotation;
-        }
-        this.dragStartPos = coords;
-        this.redrawAnnotations();
-        return;
-      }
-      // Handle drawing new annotation
-      if (this.isDrawing && this.currentAnnotation) {
-        if (this.canvasDrawingTool === 'rectangle') {
-          this.currentAnnotation.width = coords.x - this.currentAnnotation.startX;
-          this.currentAnnotation.height = coords.y - this.currentAnnotation.startY;
-        }
-        else {
-          this.currentAnnotation.endX = coords.x;
-          this.currentAnnotation.endY = coords.y;
-        }
-        this.redrawAnnotations();
-        this.drawAnnotation(this.currentAnnotation);
-        return;
-      }
-      // 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;
-        }
-        // Regular hover over annotation
-        this.canvasRef.style.cursor = 'grab';
-        if (this.hoveredAnnotation !== found.annotation) {
-          this.hoveredAnnotation = found.annotation;
-          this.redrawAnnotations();
-        }
-      }
-      else {
-        // No annotation under cursor
-        this.canvasRef.style.cursor = 'crosshair';
-        if (this.hoveredAnnotation) {
-          this.hoveredAnnotation = null;
-          this.redrawAnnotations();
-        }
-      }
-    };
-    this.handleCanvasMouseUp = () => {
-      // Disable drawing on mobile devices
-      if (window.innerWidth <= 768)
-        return;
-      // Handle end of resizing
-      if (this.isResizing) {
-        this.isResizing = false;
-        this.resizingAnnotation = null;
-        this.dragStartPos = null;
-        this.resizeHandle = false;
-        this.resizeStartDimensions = null;
-        if (this.canvasRef) {
-          this.canvasRef.style.cursor = 'crosshair';
-        }
-        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();
-    };
-    // 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);
-    };
-    // 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);
-      });
-    };
-    // 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':
-          // 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;
-      }
-    };
-    // 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;
-      }
-      // Update annotation in array
-      this.annotations[index] = updatedAnnotation;
-      this.resizingAnnotation = updatedAnnotation;
-      this.redrawAnnotations();
-    };
-    this.sending = false;
-    this.formMessage = '';
-    this.formEmail = '';
-    this.formSuccess = false;
-    this.formVerification = '';
-    this.formError = false;
-    this.formErrorStatus = 500;
-    this.encodedScreenshot = undefined;
-    this.isPrivacyChecked = false;
-    this.whitelabel = false;
-    this.selectedRating = -1;
-    this.overlayVisible = false;
-    this.isAnimating = false;
-    this.takingScreenshot = false;
-    this.showPreviewModal = false;
-    this.screenshotError = '';
-    this.showScreenshotError = false;
-    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.customFont = false;
-    this.emailAddress = '';
-    this.hideEmail = false;
-    this.isEmailRequired = false;
-    this.ratingMode = 'thumbs';
-    this.hasSelectedElement = false;
-    this.hidePrivacyPolicy = true;
-    this.hideRating = false;
-    this.hideScreenshotButton = false;
-    this.project = '';
-    this.showScreenshotMode = false;
-    this.showScreenshotTopBar = false;
-    this.showModal = false;
-    this.rating = undefined;
-    this.metadata = undefined;
-    this.fetchData = true;
-    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.messagePlaceholder = 'Comments';
-    this.footerText = '';
-    this.modalPosition = 'center';
-    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.sendButtonText = 'Send';
-    this.screenshotAttachedText = 'Screenshot attached';
-    this.screenshotButtonText = 'Add a screenshot';
-    this.screenshotTakingText = 'Taking screenshot...';
-    this.screenshotTopbarText = 'Select an element on this page';
-    this.successMessage = '';
-    this.canvasEditorTitle = 'Edit screenshot';
-    this.canvasEditorCancelText = 'Cancel';
-    this.canvasEditorSaveText = 'Save';
-  }
-  componentWillLoad() {
-    if (this.fetchData)
-      this.fetchProjectData();
-    this.formEmail = this.emailAddress;
-    if (this.rating) {
-      this.selectedRating = this.rating;
-    }
-    if (this.ratingMode == 'thumbs' && this.rating == 0) {
-      this.selectedRating = 5;
-    }
-  }
-  async fetchProjectData() {
-    try {
-      const response = await fetch('https://app.pushfeedback.com/api/projects/' + this.project + '/');
-      const data = await response.json();
-      this.whitelabel = data.whitelabel;
-    }
-    catch (error) {
-      console.log(error);
-    }
-  }
-  resetOverflow() {
-    // Just clean up any stray classes, don't add/remove during screenshot
-    document.documentElement.classList.remove('feedback-modal-screenshot-open');
-    document.documentElement.classList.remove('feedback-modal-screenshot-open--scroll');
-    document.documentElement.classList.remove('feedback-modal-screenshot-closing');
-  }
-  handleMessageInput(event) {
-    this.formMessage = event.target.value;
-  }
-  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;
-  }
-  handleVerification(event) {
-    this.formVerification = event.target.value;
-  }
-  handleRatingChange(newRating) {
-    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
-        ? 'feedback-modal-rating-button--selected'
-        : ''}`, onClick: (event) => {
-        event.preventDefault();
-        this.handleRatingChange(1);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))), h("button", { title: "No", class: `feedback-modal-rating-button ${this.selectedRating === 5
-        ? 'feedback-modal-rating-button--selected'
-        : ''}`, onClick: (event) => {
-        event.preventDefault();
-        this.handleRatingChange(5);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" })))))) : (h("div", { class: "feedback-modal-rating-content" }, h("span", { class: "feedback-modal-input-heading" }, this.ratingStarsPlaceholder), h("div", { class: "feedback-modal-rating-buttons feedback-modal-rating-buttons--stars" }, [1, 2, 3, 4, 5].map((rating) => (h("button", { key: rating, class: `feedback-modal-rating-button ${this.selectedRating >= rating
-        ? 'feedback-modal-rating-button--selected'
-        : ''}`, onClick: (event) => {
-        event.preventDefault();
-        this.handleRatingChange(rating);
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#5F6368", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })))))))))), h("div", { class: "feedback-modal-text" }, h("textarea", { placeholder: this.messagePlaceholder, value: this.formMessage, onInput: (event) => this.handleMessageInput(event) })), !this.hideEmail && (h("div", { class: "feedback-modal-email" }, h("input", { placeholder: this.emailPlaceholder, type: "email", onInput: (event) => this.handleEmailInput(event), value: this.formEmail, required: this.isEmailRequired }))), h("div", { class: "feedback-verification" }, h("input", { type: "text", name: "verification", style: { display: 'none' }, onInput: (event) => this.handleVerification(event), value: this.formVerification })), !this.hidePrivacyPolicy && (h("div", { class: "feedback-modal-privacy" }, h("input", { type: "checkbox", id: "privacyPolicy", onChange: (ev) => this.handleCheckboxChange(ev), required: true }), h("span", { innerHTML: this.privacyPolicyText }))), h("div", { class: `feedback-modal-buttons ${this.hideScreenshotButton ? 'single' : ''}` }, !this.hideScreenshotButton && (h("button", { type: "button", class: `feedback-modal-button feedback-modal-button--screenshot ${this.encodedScreenshot ? 'feedback-modal-button--active' : ''}`, onClick: this.openScreenShot, disabled: this.sending || this.takingScreenshot }, this.encodedScreenshot && (h("div", { class: "screenshot-preview", onClick: this.openCanvasEditor }, h("img", { src: this.encodedScreenshot, alt: "Screenshot Preview" }))), !this.encodedScreenshot && !this.takingScreenshot && (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 -960 960 960", width: "24" }, h("path", { d: "M680-80v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-200v-200h80v120h120v80H200Zm0-360v-200h200v80H280v120h-80Zm480 0v-120H560v-80h200v200h-80Z" }))), this.takingScreenshot && (h("div", { class: "screenshot-loading" }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#666", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather-loader" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })))), this.takingScreenshot ? this.screenshotTakingText :
-      this.encodedScreenshot ? this.screenshotAttachedText : this.screenshotButtonText)), h("button", { class: "feedback-modal-button feedback-modal-button--submit", type: "submit", disabled: this.sending }, this.sendButtonText)))) : this.formSuccess && !this.formError ? (h("div", { class: "feedback-modal-success" }, h("p", { class: "feedback-modal-message" }, this.successMessage))) : this.formError && this.formErrorStatus == 404 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage404)) : this.formError && this.formErrorStatus == 403 ? (h("p", { class: "feedback-modal-message" }, this.errorMessage403)) : this.formError ? (h("p", { class: "feedback-modal-message" }, this.errorMessage)) : (h("span", null))), h("div", { class: "feedback-modal-footer" }, h("div", { class: "feedback-logo", style: { display: this.whitelabel ? 'none' : 'block' } }, "Powered by", ' ', h("a", { target: "_blank", href: "https://pushfeedback.com" }, "PushFeedback.com")), this.footerText && (h("div", { class: "feedback-footer-text" }, h("span", { innerHTML: this.footerText })))))), this.showCanvasEditor && (h("div", { class: "canvas-editor-overlay" }, h("div", { class: "canvas-editor-modal" }, h("div", { class: "canvas-editor-header" }, h("div", { class: "canvas-editor-title" }, h("h3", null, this.canvasEditorTitle)), h("div", { class: "canvas-editor-toolbar" }, h("div", { class: "toolbar-section" }, h("div", { class: "tool-group" }, h("button", { class: `tool-btn ${this.canvasDrawingTool === 'rectangle' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'rectangle', title: "Rectangle" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'line', title: "Line" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'arrow', title: "Arrow" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "7", y1: "17", x2: "17", y2: "7" }), h("polyline", { points: "7,7 17,7 17,17" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'text', title: "Text" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "4,7 4,4 20,4 20,7" }), h("line", { x1: "9", y1: "20", x2: "15", y2: "20" }), h("line", { x1: "12", y1: "4", x2: "12", y2: "20" }))), h("div", { class: "toolbar-divider" }), h("button", { class: "tool-btn undo-btn", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "1,4 1,10 7,10" }), h("path", { d: "M3.51,15a9,9,0,0,0,14.85-3.36,9,9,0,0,0-9.19-10.15L1.83,10" }))))), h("div", { class: "toolbar-section" }, h("div", { class: "color-palette" }, this.defaultColors.map((color, index) => (h("div", { class: "color-slot-wrapper" }, h("button", { class: `color-btn ${this.canvasDrawingColor === color ? 'active' : ''} ${this.editingColorIndex === index ? 'editing' : ''}`, style: { backgroundColor: color }, onClick: () => this.handleColorSlotClick(index), title: `Color ${index + 1} - Click to customize` }, this.editingColorIndex === index && (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", "stroke-width": "2" }, h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })))), this.editingColorIndex === index && this.showColorPicker && (h("div", { class: "color-picker-dropdown" }, h("input", { type: "color", value: color, onInput: (e) => this.handleColorPickerInput(e), onClick: (e) => this.handleColorPickerClick(e) })))))))), h("div", { class: "toolbar-section" }, h("div", { class: "size-control" }, h("input", { type: "range", min: "1", max: "10", value: this.canvasLineWidth, onInput: (e) => this.canvasLineWidth = parseInt(e.target.value), class: "size-slider" }), h("span", { class: "size-value" }, this.canvasLineWidth, "px"))), h("div", { class: "toolbar-section" }, h("button", { class: "action-btn secondary", onClick: this.closeCanvasEditor }, this.canvasEditorCancelText), h("button", { class: "action-btn primary", onClick: this.saveAnnotations }, this.canvasEditorSaveText))), h("div", { class: "canvas-editor-content" }, h("canvas", { ref: (el) => this.canvasRef = el, class: "annotation-canvas", onMouseDown: this.handleCanvasMouseDown, onMouseMove: this.handleCanvasMouseMove, onMouseUp: this.handleCanvasMouseUp, onMouseLeave: this.handleCanvasMouseUp }))))))));
-  }
-  componentDidRender() {
-    if (this.showModal) {
-      requestAnimationFrame(() => {
-        this.overlayVisible = true;
-      });
-    }
-  }
-  async openModal() {
-    this.showModal = true;
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        this.isAnimating = true;
-      });
-    });
-  }
-  static get is() { return "feedback-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["feedback-modal.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["feedback-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customFont": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "custom-font",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "emailAddress": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "email-address",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "hideEmail": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-email",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isEmailRequired": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-email-required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "ratingMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating-mode",
-        "reflect": false,
-        "defaultValue": "'thumbs'"
-      },
-      "hasSelectedElement": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "has-selected-element",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "hidePrivacyPolicy": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-privacy-policy",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "hideRating": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-rating",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hideScreenshotButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-screenshot-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "project": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "project",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "showScreenshotMode": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-screenshot-mode",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showScreenshotTopBar": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-screenshot-top-bar",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showModal": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-modal",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "rating": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating",
-        "reflect": false
-      },
-      "metadata": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "''",
-          "resolved": "\"\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "metadata",
-        "reflect": false
-      },
-      "fetchData": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "fetch-data",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "emailPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "email-placeholder",
-        "reflect": false,
-        "defaultValue": "'Email address (optional)'"
-      },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message",
-        "reflect": false,
-        "defaultValue": "'Please try again later.'"
-      },
-      "errorMessage403": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message-4-0-3",
-        "reflect": false,
-        "defaultValue": "'The request URL does not match the one defined in PushFeedback for this project.'"
-      },
-      "errorMessage404": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message-4-0-4",
-        "reflect": false,
-        "defaultValue": "'We could not find the provided project ID in PushFeedback.'"
-      },
-      "messagePlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "message-placeholder",
-        "reflect": false,
-        "defaultValue": "'Comments'"
-      },
-      "footerText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "footer-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "modalPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-position",
-        "reflect": false,
-        "defaultValue": "'center'"
-      },
-      "modalTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-title",
-        "reflect": false,
-        "defaultValue": "'Share your feedback'"
-      },
-      "modalTitleError": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-title-error",
-        "reflect": false,
-        "defaultValue": "'Oops!'"
-      },
-      "modalTitleSuccess": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "modal-title-success",
-        "reflect": false,
-        "defaultValue": "'Thanks for your feedback!'"
-      },
-      "privacyPolicyText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "privacy-policy-text",
-        "reflect": false,
-        "defaultValue": "\"I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.\""
-      },
-      "ratingPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating-placeholder",
-        "reflect": false,
-        "defaultValue": "'Was this page helpful?'"
-      },
-      "ratingStarsPlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "rating-stars-placeholder",
-        "reflect": false,
-        "defaultValue": "'How would you rate this page?'"
-      },
-      "sendButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "send-button-text",
-        "reflect": false,
-        "defaultValue": "'Send'"
-      },
-      "screenshotAttachedText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "screenshot-attached-text",
-        "reflect": false,
-        "defaultValue": "'Screenshot attached'"
-      },
-      "screenshotButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "screenshot-button-text",
-        "reflect": false,
-        "defaultValue": "'Add a screenshot'"
-      },
-      "screenshotTakingText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "screenshot-taking-text",
-        "reflect": false,
-        "defaultValue": "'Taking screenshot...'"
-      },
-      "screenshotTopbarText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "screenshot-topbar-text",
-        "reflect": false,
-        "defaultValue": "'Select an element on this page'"
-      },
-      "successMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "success-message",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "canvasEditorTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "canvas-editor-title",
-        "reflect": false,
-        "defaultValue": "'Edit screenshot'"
-      },
-      "canvasEditorCancelText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "canvas-editor-cancel-text",
-        "reflect": false,
-        "defaultValue": "'Cancel'"
-      },
-      "canvasEditorSaveText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "canvas-editor-save-text",
-        "reflect": false,
-        "defaultValue": "'Save'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "sending": {},
-      "formMessage": {},
-      "formEmail": {},
-      "formSuccess": {},
-      "formVerification": {},
-      "formError": {},
-      "formErrorStatus": {},
-      "encodedScreenshot": {},
-      "isPrivacyChecked": {},
-      "whitelabel": {},
-      "selectedRating": {},
-      "overlayVisible": {},
-      "isAnimating": {},
-      "takingScreenshot": {},
-      "showPreviewModal": {},
-      "screenshotError": {},
-      "showScreenshotError": {},
-      "showCanvasEditor": {},
-      "canvasDrawingTool": {},
-      "canvasDrawingColor": {},
-      "canvasLineWidth": {},
-      "isDrawing": {},
-      "annotations": {},
-      "currentAnnotation": {},
-      "isDragging": {},
-      "draggedAnnotation": {},
-      "dragStartPos": {},
-      "showColorPicker": {},
-      "editingColorIndex": {},
-      "isResizing": {},
-      "resizingAnnotation": {},
-      "resizeStartSize": {},
-      "resizeStartDimensions": {},
-      "hoveredAnnotation": {},
-      "resizeHandle": {},
-      "defaultColors": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "feedbackSent",
-        "name": "feedbackSent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ feedback: any }",
-          "resolved": "{ feedback: any; }",
-          "references": {}
-        }
-      }, {
-        "method": "feedbackError",
-        "name": "feedbackError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ error: any }",
-          "resolved": "{ error: any; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "openModal": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}