pushfeedback 0.1.75 → 0.1.78

package/dist/collection/components/canvas-editor/canvas-editor.css

@@ -22,31 +22,37 @@
 
 .canvas-editor-modal {
   width: 95vw;
-  max-width: 1400px;
-  max-height: 900px;
+  height: 95vh;
+  max-width: none;
+  max-height: none;
   background: var(--feedback-canvas-editor-bg-color, #ffffff);
-  border-radius: 8px;
-  border: 1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: 
+    0 0 0 1px rgba(0, 0, 0, 0.02),
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 16px 32px rgba(0, 0, 0, 0.08),
+    0 32px 64px rgba(0, 0, 0, 0.06);
 }
 
 .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;
+  background: var(--feedback-canvas-editor-header-bg-color, #fafafa);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 16px 20px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 }
 
 .canvas-editor-title h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
-  color: var(--feedback-canvas-editor-tool-text-color, #333);
+  color: var(--feedback-canvas-editor-tool-text-color, #1a1a1a);
+  letter-spacing: -0.02em;
 }
 
 .canvas-editor-toolbar {
@@ -75,11 +81,12 @@
   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;
+  border: 1.5px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   padding: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .tool-btn svg {
@@ -89,13 +96,18 @@
 }
 
 .tool-btn:hover:not(:disabled) {
-  background: var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0);
+  background: var(--feedback-canvas-editor-tool-bg-hover, #f5f5f5);
+  border-color: rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
 
 .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);
+  border-color: var(--feedback-canvas-editor-tool-bg-active, #0070f4);
+  box-shadow: 0 2px 8px rgba(0, 112, 244, 0.3);
 }
 
 .tool-btn.active svg {
@@ -115,15 +127,32 @@
   margin: 0 4px;
 }
 
-.undo-btn {
+.undo-btn,
+.delete-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) {
+.undo-btn:hover:not(:disabled),
+.delete-btn:hover:not(:disabled) {
   background: var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important;
 }
 
+.undo-btn:disabled,
+.delete-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.delete-btn:hover:not(:disabled) {
+  background: #fee !important;
+  border-color: #fcc !important;
+}
+
+.delete-btn:hover:not(:disabled) svg {
+  color: #c53030;
+}
+
 .color-palette {
   display: flex;
   align-items: center;
@@ -139,19 +168,21 @@
 .color-btn {
   width: 32px;
   height: 32px;
-  border-radius: 6px;
+  border-radius: 8px;
   border: 2px solid transparent;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   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: 2px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .color-btn:hover {
-  transform: scale(1.1);
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
 }
 
 .color-btn.active {
@@ -196,41 +227,61 @@
 
 .size-slider {
   width: 80px;
-  height: 20px;
+  height: 14px;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
+  border-radius: 2px;
+  outline: none;
   cursor: pointer;
+  border: none;
+  position: relative;
+}
+
+.size-slider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  transform: translateY(-50%);
+  pointer-events: none;
 }
 
 .size-slider::-webkit-slider-track {
   width: 100%;
   height: 4px;
-  background: var(--feedback-canvas-editor-slider-track, #e0e0e0);
+  background: transparent;
   border-radius: 2px;
+  border: none;
 }
 
 .size-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   background: var(--feedback-primary-color, #0070f4);
   border-radius: 50%;
   cursor: pointer;
+  position: relative;
+  z-index: 1;
 }
 
 .size-slider::-moz-range-track {
   width: 100%;
   height: 4px;
-  background: var(--feedback-canvas-editor-slider-track, #e0e0e0);
+  background: transparent;
   border-radius: 2px;
   border: none;
 }
 
 .size-slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   background: var(--feedback-primary-color, #0070f4);
   border-radius: 50%;
   border: none;
@@ -240,15 +291,15 @@
 .size-slider::-ms-track {
   width: 100%;
   height: 4px;
-  background: var(--feedback-canvas-editor-slider-track, #e0e0e0);
+  background: transparent;
   border-radius: 2px;
   border: none;
   color: transparent;
 }
 
 .size-slider::-ms-thumb {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   background: var(--feedback-primary-color, #0070f4);
   border-radius: 50%;
   border: none;
@@ -296,38 +347,49 @@
 .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;
+  gap: 8px;
+  padding: 0 20px;
+  border: 1.5px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
-  transition: all 0.2s ease;
-  min-width: 65px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 80px;
   justify-content: center;
-  height: 36px;
+  height: 40px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .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);
+  border-color: rgba(0, 0, 0, 0.08);
 }
 
 .action-btn.secondary:hover {
-  background: var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0);
+  background: var(--feedback-canvas-editor-tool-bg-hover, #f5f5f5);
+  border-color: rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
 }
 
 .action-btn.primary {
   background: var(--feedback-primary-color, #0070f4);
   color: #ffffff;
   border-color: var(--feedback-primary-color, #0070f4);
+  box-shadow: 0 2px 4px rgba(0, 112, 244, 0.2);
 }
 
 .action-btn.primary:hover {
   background: #0056cc;
   border-color: #0056cc;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 12px rgba(0, 112, 244, 0.3);
+}
+
+.action-btn:active {
+  transform: translateY(0);
 }
 
 .action-btn.small {
@@ -349,32 +411,93 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
+  padding: 24px;
   background: var(--feedback-canvas-editor-content-bg, #f5f5f5);
   overflow: hidden;
   min-height: 0;
   min-width: 0;
+  position: relative;
+}
+
+/* Hide scroll indicators when at the edges */
+.canvas-editor-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.canvas-editor-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.canvas-editor-content::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.canvas-editor-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .annotation-canvas {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
+  max-width: calc(100% - 48px);
+  max-height: calc(100% - 48px);
+  width: auto !important;
+  height: auto !important;
   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);
+  border-radius: 8px;
+  box-shadow: 
+    0 0 0 1px rgba(0, 0, 0, 0.04),
+    0 4px 6px rgba(0, 0, 0, 0.06),
+    0 8px 16px rgba(0, 0, 0, 0.08);
   background: #ffffff;
-  transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   object-fit: contain;
   display: block;
+  margin: auto;
 }
 
 .annotation-canvas:hover {
-  box-shadow: 0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20);
+  box-shadow: 
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 6px 10px rgba(0, 0, 0, 0.08),
+    0 12px 24px rgba(0, 0, 0, 0.1);
 }
 
 /* Responsive Design */
+
+/* Extra large screens */
+@media screen and (min-width: 1920px) {
+  .canvas-editor-modal {
+    width: 90vw;
+    height: 90vh;
+  }
+  
+  .canvas-editor-content {
+    padding: 32px;
+  }
+}
+
+/* Large screens */
+@media screen and (min-width: 1200px) and (max-width: 1919px) {
+  .canvas-editor-modal {
+    width: 92vw;
+    height: 92vh;
+  }
+  
+  .canvas-editor-content {
+    padding: 28px;
+  }
+}
+
+/* Medium screens */
+@media screen and (min-width: 769px) and (max-width: 1199px) {
+  .canvas-editor-modal {
+    width: 95vw;
+    height: 95vh;
+  }
+}
+
+/* Mobile and tablet */
 @media screen and (max-width: 768px) {
   .canvas-editor-modal {
     width: 100vw;
@@ -401,4 +524,8 @@
     margin-top: 8px;
     min-width: auto;
   }
+  
+  .canvas-editor-content {
+    padding: 16px;
+  }
 } 

package/dist/collection/components/canvas-editor/canvas-editor.js

@@ -1,6 +1,17 @@
 import { h } from '@stencil/core';
 export class CanvasEditor {
   constructor() {
+    this.handleWindowResize = () => {
+      // Debounce resize events
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      this.resizeTimeout = setTimeout(() => {
+        if (this.showCanvasEditor && this.originalImageData) {
+          this.initializeCanvas();
+        }
+      }, 250);
+    };
     this.openScreenShot = async () => {
       // Show loading state immediately
       this.takingScreenshot = true;
@@ -96,14 +107,16 @@ export class CanvasEditor {
         // 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;
-        const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
+        // Get available container dimensions with more generous padding
+        const containerWidth = this.canvasRef.parentElement.clientWidth - 48;
+        const containerHeight = this.canvasRef.parentElement.clientHeight - 48;
         // 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);
+        // Use a more aggressive scaling approach for large screens
+        // Allow scaling up to 1.5x on very large screens, but still maintain aspect ratio
+        const maxScale = window.innerWidth > 1920 ? 1.5 : (window.innerWidth > 1200 ? 1.2 : 1);
+        const scale = Math.min(scaleX, scaleY, maxScale);
         // Calculate final display dimensions
         const displayWidth = img.width * scale;
         const displayHeight = img.height * scale;
@@ -255,6 +268,16 @@ export class CanvasEditor {
       this.annotations = this.annotations.slice(0, -1);
       this.redrawAnnotations();
     };
+    this.deleteSelectedAnnotation = () => {
+      if (this.selectedAnnotation) {
+        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        if (index !== -1) {
+          this.annotations = this.annotations.filter((_, i) => i !== index);
+          this.selectedAnnotation = null;
+          this.redrawAnnotations();
+        }
+      }
+    };
     // Handle color slot editing
     this.handleColorSlotClick = (colorIndex) => {
       if (this.editingColorIndex === colorIndex) {
@@ -768,6 +791,13 @@ export class CanvasEditor {
         this.initializeCanvas();
       }, 100);
     }
+    // Add window resize listener for canvas adaptation
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    window.addEventListener('resize', this.handleWindowResize);
+  }
+  disconnectedCallback() {
+    // Clean up resize listener
+    window.removeEventListener('resize', this.handleWindowResize);
   }
   async captureViewportScreenshot() {
     try {
@@ -828,7 +858,7 @@ export class CanvasEditor {
   }
   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) => {
+    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", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-square" }, h("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'line', title: "Line" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-minus" }, h("path", { d: "M5 12h14" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'arrow', title: "Arrow" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-move-up-right" }, h("path", { d: "M13 5H19V11" }), h("path", { d: "M19 5L5 19" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'text', title: "Text" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-type" }, h("path", { d: "M12 4v16" }), h("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }), h("path", { d: "M9 20h6" }))), h("div", { class: "toolbar-divider" }), h("button", { class: "tool-btn undo-btn", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-undo" }, h("path", { d: "M3 7v6h6" }), h("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" }))), this.selectedAnnotation && (h("button", { class: "tool-btn delete-btn", onClick: this.deleteSelectedAnnotation, title: "Delete" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-trash-2" }, h("path", { d: "M3 6h18" }), h("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), h("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), h("line", { x1: "10", x2: "10", y1: "11", y2: "17" }), h("line", { x1: "14", x2: "14", y1: "11", y2: "17" })))))), 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);