@checkflow/sdk 1.1.3 → 1.1.4

package/dist/vue.js

@@ -210,11 +210,1122 @@ var init_network_interceptor = __esm({
   }
 });
 
+// src/annotation/types.ts
+var DEFAULT_STYLE, HIGHLIGHT_STYLE, BLUR_STYLE, COLOR_PALETTE, STROKE_WIDTHS;
+var init_types = __esm({
+  "src/annotation/types.ts"() {
+    "use strict";
+    DEFAULT_STYLE = {
+      strokeColor: "#FF3B30",
+      strokeWidth: 3,
+      fillColor: "transparent",
+      opacity: 1,
+      fontSize: 16,
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    };
+    HIGHLIGHT_STYLE = {
+      strokeColor: "transparent",
+      fillColor: "#FFEB3B",
+      opacity: 0.4
+    };
+    BLUR_STYLE = {
+      strokeColor: "#666666",
+      fillColor: "#666666",
+      opacity: 0.8
+    };
+    COLOR_PALETTE = [
+      "#FF3B30",
+      // Red
+      "#FF9500",
+      // Orange
+      "#FFCC00",
+      // Yellow
+      "#34C759",
+      // Green
+      "#007AFF",
+      // Blue
+      "#5856D6",
+      // Purple
+      "#AF52DE",
+      // Pink
+      "#000000",
+      // Black
+      "#FFFFFF"
+      // White
+    ];
+    STROKE_WIDTHS = [1, 2, 3, 5, 8];
+  }
+});
+
+// src/annotation/toolbar.ts
+var TOOL_ICONS, TOOL_LABELS, AnnotationToolbar;
+var init_toolbar = __esm({
+  "src/annotation/toolbar.ts"() {
+    "use strict";
+    init_types();
+    TOOL_ICONS = {
+      select: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>`,
+      rectangle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`,
+      ellipse: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="12" rx="9" ry="6"/></svg>`,
+      arrow: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>`,
+      line: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="19" x2="19" y2="5"/></svg>`,
+      highlight: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`,
+      blur: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4-12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4-4.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-4c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/></svg>`,
+      text: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      freehand: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>`
+    };
+    TOOL_LABELS = {
+      select: "S\xE9lection",
+      rectangle: "Rectangle",
+      ellipse: "Ellipse",
+      arrow: "Fl\xE8che",
+      line: "Ligne",
+      highlight: "Surbrillance",
+      blur: "Floutage",
+      text: "Texte",
+      freehand: "Dessin libre"
+    };
+    AnnotationToolbar = class {
+      constructor(config2) {
+        this.colorPicker = null;
+        this.strokePicker = null;
+        this.config = config2;
+        this.element = this.createToolbar();
+      }
+      getElement() {
+        return this.element;
+      }
+      setActiveTool(tool) {
+        this.config.activeTool = tool;
+        this.updateActiveState();
+      }
+      setStyle(style) {
+        this.config.style = style;
+        this.updateStyleDisplay();
+      }
+      createToolbar() {
+        const toolbar = document.createElement("div");
+        toolbar.className = "cf-toolbar";
+        const toolsSection = document.createElement("div");
+        toolsSection.className = "cf-toolbar-section cf-toolbar-tools";
+        for (const tool of this.config.tools) {
+          const button = this.createToolButton(tool);
+          toolsSection.appendChild(button);
+        }
+        const separator1 = document.createElement("div");
+        separator1.className = "cf-toolbar-separator";
+        const styleSection = document.createElement("div");
+        styleSection.className = "cf-toolbar-section cf-toolbar-style";
+        const colorBtn = document.createElement("button");
+        colorBtn.className = "cf-toolbar-btn cf-color-btn";
+        colorBtn.title = "Couleur";
+        colorBtn.innerHTML = `<span class="cf-color-preview" style="background: ${this.config.style.strokeColor}"></span>`;
+        colorBtn.addEventListener("click", () => this.toggleColorPicker());
+        styleSection.appendChild(colorBtn);
+        const strokeBtn = document.createElement("button");
+        strokeBtn.className = "cf-toolbar-btn cf-stroke-btn";
+        strokeBtn.title = "\xC9paisseur";
+        strokeBtn.innerHTML = `<span class="cf-stroke-preview">${this.config.style.strokeWidth}px</span>`;
+        strokeBtn.addEventListener("click", () => this.toggleStrokePicker());
+        styleSection.appendChild(strokeBtn);
+        const separator2 = document.createElement("div");
+        separator2.className = "cf-toolbar-separator";
+        const actionsSection = document.createElement("div");
+        actionsSection.className = "cf-toolbar-section cf-toolbar-actions";
+        const undoBtn = document.createElement("button");
+        undoBtn.className = "cf-toolbar-btn";
+        undoBtn.title = "Annuler (Ctrl+Z)";
+        undoBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/></svg>`;
+        undoBtn.addEventListener("click", () => this.config.onUndo());
+        actionsSection.appendChild(undoBtn);
+        const clearBtn = document.createElement("button");
+        clearBtn.className = "cf-toolbar-btn";
+        clearBtn.title = "Tout effacer";
+        clearBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>`;
+        clearBtn.addEventListener("click", () => this.config.onClear());
+        actionsSection.appendChild(clearBtn);
+        toolbar.appendChild(toolsSection);
+        toolbar.appendChild(separator1);
+        toolbar.appendChild(styleSection);
+        toolbar.appendChild(separator2);
+        toolbar.appendChild(actionsSection);
+        return toolbar;
+      }
+      createToolButton(tool) {
+        const button = document.createElement("button");
+        button.className = `cf-toolbar-btn cf-tool-btn ${tool === this.config.activeTool ? "active" : ""}`;
+        button.dataset.tool = tool;
+        button.title = TOOL_LABELS[tool];
+        button.innerHTML = TOOL_ICONS[tool];
+        button.addEventListener("click", () => {
+          this.config.onToolChange(tool);
+          this.setActiveTool(tool);
+        });
+        return button;
+      }
+      updateActiveState() {
+        const buttons = this.element.querySelectorAll(".cf-tool-btn");
+        buttons.forEach((btn) => {
+          const button = btn;
+          button.classList.toggle("active", button.dataset.tool === this.config.activeTool);
+        });
+      }
+      updateStyleDisplay() {
+        const colorPreview = this.element.querySelector(".cf-color-preview");
+        if (colorPreview) {
+          colorPreview.style.background = this.config.style.strokeColor;
+        }
+        const strokePreview = this.element.querySelector(".cf-stroke-preview");
+        if (strokePreview) {
+          strokePreview.textContent = `${this.config.style.strokeWidth}px`;
+        }
+      }
+      toggleColorPicker() {
+        if (this.colorPicker) {
+          this.colorPicker.remove();
+          this.colorPicker = null;
+          return;
+        }
+        if (this.strokePicker) {
+          this.strokePicker.remove();
+          this.strokePicker = null;
+        }
+        this.colorPicker = document.createElement("div");
+        this.colorPicker.className = "cf-picker cf-color-picker";
+        for (const color of COLOR_PALETTE) {
+          const swatch = document.createElement("button");
+          swatch.className = `cf-color-swatch ${color === this.config.style.strokeColor ? "active" : ""}`;
+          swatch.style.background = color;
+          swatch.addEventListener("click", () => {
+            this.config.onStyleChange({ strokeColor: color });
+            this.setStyle({ ...this.config.style, strokeColor: color });
+            this.colorPicker?.remove();
+            this.colorPicker = null;
+          });
+          this.colorPicker.appendChild(swatch);
+        }
+        const colorBtn = this.element.querySelector(".cf-color-btn");
+        colorBtn?.appendChild(this.colorPicker);
+      }
+      toggleStrokePicker() {
+        if (this.strokePicker) {
+          this.strokePicker.remove();
+          this.strokePicker = null;
+          return;
+        }
+        if (this.colorPicker) {
+          this.colorPicker.remove();
+          this.colorPicker = null;
+        }
+        this.strokePicker = document.createElement("div");
+        this.strokePicker.className = "cf-picker cf-stroke-picker";
+        for (const width of STROKE_WIDTHS) {
+          const option = document.createElement("button");
+          option.className = `cf-stroke-option ${width === this.config.style.strokeWidth ? "active" : ""}`;
+          option.innerHTML = `<span style="height: ${width}px"></span> ${width}px`;
+          option.addEventListener("click", () => {
+            this.config.onStyleChange({ strokeWidth: width });
+            this.setStyle({ ...this.config.style, strokeWidth: width });
+            this.strokePicker?.remove();
+            this.strokePicker = null;
+          });
+          this.strokePicker.appendChild(option);
+        }
+        const strokeBtn = this.element.querySelector(".cf-stroke-btn");
+        strokeBtn?.appendChild(this.strokePicker);
+      }
+    };
+  }
+});
+
+// src/annotation/styles.ts
+function injectAnnotationStyles() {
+  if (stylesInjected) return;
+  const styleElement = document.createElement("style");
+  styleElement.id = "cf-annotation-styles";
+  styleElement.textContent = STYLES;
+  document.head.appendChild(styleElement);
+  stylesInjected = true;
+}
+var STYLES, stylesInjected;
+var init_styles = __esm({
+  "src/annotation/styles.ts"() {
+    "use strict";
+    STYLES = `
+/* Annotation Overlay */
+.cf-annotation-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: cf-fade-in 0.2s ease-out;
+}
+
+@keyframes cf-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Editor Wrapper */
+.cf-annotation-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 95vw;
+  max-height: 95vh;
+  background: #1a1a1a;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+}
+
+/* Canvas Container */
+.cf-annotation-canvas-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 16px;
+  background: #0d0d0d;
+}
+
+.cf-annotation-canvas {
+  max-width: 100%;
+  max-height: calc(95vh - 140px);
+  border-radius: 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  cursor: crosshair;
+}
+
+/* Toolbar */
+.cf-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #2a2a2a;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+.cf-toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cf-toolbar-separator {
+  width: 1px;
+  height: 24px;
+  background: #4a4a4a;
+  margin: 0 8px;
+}
+
+.cf-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #999;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cf-toolbar-btn:hover {
+  background: #3a3a3a;
+  color: #fff;
+}
+
+.cf-toolbar-btn.active {
+  background: #007AFF;
+  color: #fff;
+}
+
+.cf-toolbar-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Color Button */
+.cf-color-btn {
+  position: relative;
+}
+
+.cf-color-preview {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+}
+
+/* Stroke Button */
+.cf-stroke-btn {
+  width: auto;
+  padding: 0 12px;
+}
+
+.cf-stroke-preview {
+  font-size: 12px;
+  font-weight: 500;
+  color: inherit;
+}
+
+/* Pickers */
+.cf-picker {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+  padding: 8px;
+  background: #2a2a2a;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 10;
+}
+
+.cf-color-picker {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+  width: 140px;
+}
+
+.cf-color-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.cf-color-swatch:hover {
+  transform: scale(1.15);
+}
+
+.cf-color-swatch.active {
+  border-color: #fff;
+}
+
+.cf-stroke-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 80px;
+}
+
+.cf-stroke-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #999;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cf-stroke-option:hover {
+  background: #3a3a3a;
+  color: #fff;
+}
+
+.cf-stroke-option.active {
+  background: #007AFF;
+  color: #fff;
+}
+
+.cf-stroke-option span {
+  width: 24px;
+  background: currentColor;
+  border-radius: 2px;
+}
+
+/* Action Buttons */
+.cf-annotation-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #2a2a2a;
+  border-top: 1px solid #3a3a3a;
+}
+
+.cf-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cf-btn-primary {
+  background: #007AFF;
+  color: #fff;
+}
+
+.cf-btn-primary:hover {
+  background: #0066DD;
+}
+
+.cf-btn-secondary {
+  background: #3a3a3a;
+  color: #fff;
+}
+
+.cf-btn-secondary:hover {
+  background: #4a4a4a;
+}
+
+/* Text Input */
+.cf-annotation-text-input {
+  position: fixed;
+  z-index: 1000000;
+  padding: 4px 8px;
+  border: 2px solid #007AFF;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.95);
+  font-size: 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  outline: none;
+  min-width: 150px;
+}
+
+/* Tool-specific cursors */
+.cf-annotation-canvas[data-tool="select"] { cursor: default; }
+.cf-annotation-canvas[data-tool="rectangle"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="ellipse"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="arrow"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="line"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="highlight"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="blur"] { cursor: crosshair; }
+.cf-annotation-canvas[data-tool="text"] { cursor: text; }
+.cf-annotation-canvas[data-tool="freehand"] { cursor: crosshair; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .cf-toolbar {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .cf-toolbar-separator {
+    display: none;
+  }
+  
+  .cf-annotation-actions {
+    justify-content: stretch;
+  }
+  
+  .cf-annotation-actions .cf-btn {
+    flex: 1;
+  }
+}
+`;
+    stylesInjected = false;
+  }
+});
+
+// src/annotation/editor.ts
+var AnnotationEditor;
+var init_editor = __esm({
+  "src/annotation/editor.ts"() {
+    "use strict";
+    init_types();
+    init_toolbar();
+    init_styles();
+    AnnotationEditor = class {
+      constructor(config2) {
+        this.container = null;
+        this.canvas = null;
+        this.ctx = null;
+        this.toolbar = null;
+        this.annotations = [];
+        this.backgroundImage = null;
+        this.state = {
+          activeTool: "rectangle",
+          style: { ...DEFAULT_STYLE },
+          isDrawing: false,
+          currentAnnotation: null
+        };
+        this.startPoint = null;
+        this.freehandPoints = [];
+        this.textInput = null;
+        this.config = {
+          ...config2,
+          tools: config2.tools || ["select", "rectangle", "arrow", "highlight", "blur", "text", "freehand"],
+          defaultStyle: config2.defaultStyle || DEFAULT_STYLE
+        };
+        this.state.style = { ...this.config.defaultStyle };
+      }
+      /**
+       * Open the annotation editor with a screenshot
+       */
+      async open(screenshotDataUrl2) {
+        injectAnnotationStyles();
+        this.backgroundImage = await this.loadImage(screenshotDataUrl2);
+        this.createEditorUI();
+        this.setupEventListeners();
+        this.render();
+      }
+      /**
+       * Close the editor
+       */
+      close() {
+        if (this.container) {
+          this.container.remove();
+          this.container = null;
+        }
+        this.canvas = null;
+        this.ctx = null;
+        this.toolbar = null;
+        this.annotations = [];
+        this.backgroundImage = null;
+      }
+      /**
+       * Get the annotated image as data URL
+       */
+      getAnnotatedImage() {
+        if (!this.canvas || !this.ctx) return "";
+        const tempCanvas = document.createElement("canvas");
+        tempCanvas.width = this.canvas.width;
+        tempCanvas.height = this.canvas.height;
+        const tempCtx = tempCanvas.getContext("2d");
+        if (this.backgroundImage) {
+          tempCtx.drawImage(this.backgroundImage, 0, 0);
+        }
+        this.drawAnnotations(tempCtx);
+        return tempCanvas.toDataURL("image/png");
+      }
+      /**
+       * Get annotations data
+       */
+      getAnnotations() {
+        return [...this.annotations];
+      }
+      // Private methods
+      loadImage(src) {
+        return new Promise((resolve, reject) => {
+          const img = new Image();
+          img.onload = () => resolve(img);
+          img.onerror = reject;
+          img.src = src;
+        });
+      }
+      createEditorUI() {
+        this.container = document.createElement("div");
+        this.container.className = "cf-annotation-overlay";
+        const wrapper = document.createElement("div");
+        wrapper.className = "cf-annotation-wrapper";
+        const canvasContainer = document.createElement("div");
+        canvasContainer.className = "cf-annotation-canvas-container";
+        this.canvas = document.createElement("canvas");
+        this.canvas.className = "cf-annotation-canvas";
+        this.canvas.width = this.backgroundImage?.width || 1920;
+        this.canvas.height = this.backgroundImage?.height || 1080;
+        this.ctx = this.canvas.getContext("2d");
+        canvasContainer.appendChild(this.canvas);
+        this.toolbar = new AnnotationToolbar({
+          tools: this.config.tools,
+          activeTool: this.state.activeTool,
+          style: this.state.style,
+          onToolChange: (tool) => this.setActiveTool(tool),
+          onStyleChange: (style) => this.setStyle(style),
+          onUndo: () => this.undo(),
+          onClear: () => this.clearAll(),
+          onSave: () => this.save(),
+          onCancel: () => this.cancel()
+        });
+        const actions = document.createElement("div");
+        actions.className = "cf-annotation-actions";
+        actions.innerHTML = `
+      <button class="cf-btn cf-btn-secondary" data-action="cancel">Annuler</button>
+      <button class="cf-btn cf-btn-primary" data-action="save">Enregistrer</button>
+    `;
+        wrapper.appendChild(this.toolbar.getElement());
+        wrapper.appendChild(canvasContainer);
+        wrapper.appendChild(actions);
+        this.container.appendChild(wrapper);
+        document.body.appendChild(this.container);
+        actions.querySelector('[data-action="cancel"]')?.addEventListener("click", () => this.cancel());
+        actions.querySelector('[data-action="save"]')?.addEventListener("click", () => this.save());
+      }
+      setupEventListeners() {
+        if (!this.canvas) return;
+        this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
+        this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
+        this.canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
+        this.canvas.addEventListener("mouseleave", this.handleMouseUp.bind(this));
+        this.canvas.addEventListener("touchstart", this.handleTouchStart.bind(this));
+        this.canvas.addEventListener("touchmove", this.handleTouchMove.bind(this));
+        this.canvas.addEventListener("touchend", this.handleTouchEnd.bind(this));
+        document.addEventListener("keydown", this.handleKeyDown.bind(this));
+      }
+      handleMouseDown(e) {
+        const point = this.getCanvasPoint(e);
+        this.startDrawing(point);
+      }
+      handleMouseMove(e) {
+        const point = this.getCanvasPoint(e);
+        this.continueDrawing(point);
+      }
+      handleMouseUp(_e) {
+        this.finishDrawing();
+      }
+      handleTouchStart(e) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const point = this.getCanvasPointFromTouch(touch);
+        this.startDrawing(point);
+      }
+      handleTouchMove(e) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const point = this.getCanvasPointFromTouch(touch);
+        this.continueDrawing(point);
+      }
+      handleTouchEnd(e) {
+        e.preventDefault();
+        this.finishDrawing();
+      }
+      handleKeyDown(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+          e.preventDefault();
+          this.undo();
+        }
+        if (e.key === "Escape") {
+          if (this.state.isDrawing) {
+            this.state.isDrawing = false;
+            this.state.currentAnnotation = null;
+            this.render();
+          } else {
+            this.cancel();
+          }
+        }
+        if (e.key === "Enter" && !this.state.isDrawing) {
+          this.save();
+        }
+      }
+      getCanvasPoint(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        return {
+          x: (e.clientX - rect.left) * scaleX,
+          y: (e.clientY - rect.top) * scaleY
+        };
+      }
+      getCanvasPointFromTouch(touch) {
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+        return {
+          x: (touch.clientX - rect.left) * scaleX,
+          y: (touch.clientY - rect.top) * scaleY
+        };
+      }
+      startDrawing(point) {
+        if (this.state.activeTool === "select") return;
+        this.state.isDrawing = true;
+        this.startPoint = point;
+        if (this.state.activeTool === "text") {
+          this.showTextInput(point);
+          return;
+        }
+        if (this.state.activeTool === "freehand") {
+          this.freehandPoints = [point];
+        }
+      }
+      continueDrawing(point) {
+        if (!this.state.isDrawing || !this.startPoint) return;
+        if (this.state.activeTool === "freehand") {
+          this.freehandPoints.push(point);
+        }
+        this.state.currentAnnotation = this.createAnnotation(this.startPoint, point);
+        this.render();
+      }
+      finishDrawing() {
+        if (!this.state.isDrawing || !this.state.currentAnnotation) {
+          this.state.isDrawing = false;
+          return;
+        }
+        if (this.isValidAnnotation(this.state.currentAnnotation)) {
+          this.annotations.push(this.state.currentAnnotation);
+        }
+        this.state.isDrawing = false;
+        this.state.currentAnnotation = null;
+        this.startPoint = null;
+        this.freehandPoints = [];
+        this.render();
+      }
+      isValidAnnotation(annotation) {
+        switch (annotation.type) {
+          case "rectangle":
+          case "ellipse":
+          case "highlight":
+          case "blur":
+            const bounds = annotation.bounds;
+            return Math.abs(bounds.width) > 5 && Math.abs(bounds.height) > 5;
+          case "arrow":
+          case "line":
+            const start = annotation.start;
+            const end = annotation.end;
+            const dist = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
+            return dist > 10;
+          case "freehand":
+            return annotation.points.length > 2;
+          case "text":
+            return !!annotation.text?.trim();
+          default:
+            return true;
+        }
+      }
+      createAnnotation(start, end) {
+        const id = this.generateId();
+        const baseStyle = { ...this.state.style };
+        switch (this.state.activeTool) {
+          case "rectangle":
+            return {
+              id,
+              type: "rectangle",
+              bounds: this.createBounds(start, end),
+              style: baseStyle,
+              timestamp: Date.now()
+            };
+          case "ellipse":
+            return {
+              id,
+              type: "ellipse",
+              bounds: this.createBounds(start, end),
+              style: baseStyle,
+              timestamp: Date.now()
+            };
+          case "arrow":
+            return {
+              id,
+              type: "arrow",
+              start: { ...start },
+              end: { ...end },
+              style: baseStyle,
+              timestamp: Date.now()
+            };
+          case "line":
+            return {
+              id,
+              type: "line",
+              start: { ...start },
+              end: { ...end },
+              style: baseStyle,
+              timestamp: Date.now()
+            };
+          case "highlight":
+            return {
+              id,
+              type: "highlight",
+              bounds: this.createBounds(start, end),
+              style: { ...baseStyle, ...HIGHLIGHT_STYLE },
+              timestamp: Date.now()
+            };
+          case "blur":
+            return {
+              id,
+              type: "blur",
+              bounds: this.createBounds(start, end),
+              style: { ...baseStyle, ...BLUR_STYLE },
+              blurAmount: 10,
+              timestamp: Date.now()
+            };
+          case "freehand":
+            return {
+              id,
+              type: "freehand",
+              points: [...this.freehandPoints],
+              style: baseStyle,
+              timestamp: Date.now()
+            };
+          default:
+            return {
+              id,
+              type: "rectangle",
+              bounds: this.createBounds(start, end),
+              style: baseStyle,
+              timestamp: Date.now()
+            };
+        }
+      }
+      createBounds(start, end) {
+        return {
+          x: Math.min(start.x, end.x),
+          y: Math.min(start.y, end.y),
+          width: Math.abs(end.x - start.x),
+          height: Math.abs(end.y - start.y)
+        };
+      }
+      showTextInput(point) {
+        if (this.textInput) {
+          this.textInput.remove();
+        }
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = rect.width / this.canvas.width;
+        const scaleY = rect.height / this.canvas.height;
+        this.textInput = document.createElement("input");
+        this.textInput.type = "text";
+        this.textInput.className = "cf-annotation-text-input";
+        this.textInput.style.left = `${rect.left + point.x * scaleX}px`;
+        this.textInput.style.top = `${rect.top + point.y * scaleY}px`;
+        this.textInput.style.color = this.state.style.strokeColor;
+        this.textInput.style.fontSize = `${(this.state.style.fontSize || 16) * scaleY}px`;
+        this.textInput.placeholder = "Tapez votre texte...";
+        document.body.appendChild(this.textInput);
+        this.textInput.focus();
+        const handleTextSubmit = () => {
+          if (this.textInput && this.textInput.value.trim()) {
+            const textAnnotation = {
+              id: this.generateId(),
+              type: "text",
+              position: point,
+              text: this.textInput.value.trim(),
+              style: { ...this.state.style },
+              timestamp: Date.now()
+            };
+            this.annotations.push(textAnnotation);
+            this.render();
+          }
+          this.textInput?.remove();
+          this.textInput = null;
+          this.state.isDrawing = false;
+        };
+        this.textInput.addEventListener("blur", handleTextSubmit);
+        this.textInput.addEventListener("keydown", (e) => {
+          if (e.key === "Enter") {
+            handleTextSubmit();
+          } else if (e.key === "Escape") {
+            this.textInput?.remove();
+            this.textInput = null;
+            this.state.isDrawing = false;
+          }
+        });
+      }
+      generateId() {
+        return `ann_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      }
+      setActiveTool(tool) {
+        this.state.activeTool = tool;
+        this.toolbar?.setActiveTool(tool);
+        if (this.canvas) {
+          this.canvas.style.cursor = tool === "select" ? "default" : "crosshair";
+        }
+      }
+      setStyle(style) {
+        this.state.style = { ...this.state.style, ...style };
+        this.toolbar?.setStyle(this.state.style);
+      }
+      undo() {
+        if (this.annotations.length > 0) {
+          this.annotations.pop();
+          this.render();
+        }
+      }
+      clearAll() {
+        this.annotations = [];
+        this.render();
+      }
+      save() {
+        const imageData = this.getAnnotatedImage();
+        this.config.onSave?.(this.annotations, imageData);
+        this.close();
+      }
+      cancel() {
+        this.config.onCancel?.();
+        this.close();
+      }
+      render() {
+        if (!this.ctx || !this.canvas) return;
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        if (this.backgroundImage) {
+          this.ctx.drawImage(this.backgroundImage, 0, 0);
+        }
+        this.drawAnnotations(this.ctx);
+        if (this.state.currentAnnotation) {
+          this.drawAnnotation(this.ctx, this.state.currentAnnotation);
+        }
+      }
+      drawAnnotations(ctx) {
+        for (const annotation of this.annotations) {
+          this.drawAnnotation(ctx, annotation);
+        }
+      }
+      drawAnnotation(ctx, annotation) {
+        ctx.save();
+        ctx.globalAlpha = annotation.style.opacity;
+        ctx.strokeStyle = annotation.style.strokeColor;
+        ctx.fillStyle = annotation.style.fillColor;
+        ctx.lineWidth = annotation.style.strokeWidth;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        switch (annotation.type) {
+          case "rectangle":
+            this.drawRectangle(ctx, annotation.bounds, annotation.style);
+            break;
+          case "ellipse":
+            this.drawEllipse(ctx, annotation.bounds, annotation.style);
+            break;
+          case "arrow":
+            this.drawArrow(ctx, annotation.start, annotation.end, annotation.style);
+            break;
+          case "line":
+            this.drawLine(ctx, annotation.start, annotation.end);
+            break;
+          case "highlight":
+            this.drawHighlight(ctx, annotation.bounds, annotation.style);
+            break;
+          case "blur":
+            this.drawBlur(ctx, annotation.bounds, annotation.blurAmount);
+            break;
+          case "text":
+            this.drawText(ctx, annotation.position, annotation.text, annotation.style);
+            break;
+          case "freehand":
+            this.drawFreehand(ctx, annotation.points);
+            break;
+        }
+        ctx.restore();
+      }
+      drawRectangle(ctx, bounds, style) {
+        if (style.fillColor !== "transparent") {
+          ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+        }
+        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+      }
+      drawEllipse(ctx, bounds, style) {
+        const centerX = bounds.x + bounds.width / 2;
+        const centerY = bounds.y + bounds.height / 2;
+        const radiusX = bounds.width / 2;
+        const radiusY = bounds.height / 2;
+        ctx.beginPath();
+        ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+        if (style.fillColor !== "transparent") {
+          ctx.fill();
+        }
+        ctx.stroke();
+      }
+      drawArrow(ctx, start, end, style) {
+        const headLength = 15 + style.strokeWidth * 2;
+        const angle = Math.atan2(end.y - start.y, end.x - start.x);
+        ctx.beginPath();
+        ctx.moveTo(start.x, start.y);
+        ctx.lineTo(end.x, end.y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(end.x, end.y);
+        ctx.lineTo(
+          end.x - headLength * Math.cos(angle - Math.PI / 6),
+          end.y - headLength * Math.sin(angle - Math.PI / 6)
+        );
+        ctx.lineTo(
+          end.x - headLength * Math.cos(angle + Math.PI / 6),
+          end.y - headLength * Math.sin(angle + Math.PI / 6)
+        );
+        ctx.closePath();
+        ctx.fillStyle = style.strokeColor;
+        ctx.fill();
+      }
+      drawLine(ctx, start, end) {
+        ctx.beginPath();
+        ctx.moveTo(start.x, start.y);
+        ctx.lineTo(end.x, end.y);
+        ctx.stroke();
+      }
+      drawHighlight(ctx, bounds, style) {
+        ctx.fillStyle = style.fillColor;
+        ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+      }
+      drawBlur(ctx, bounds, blurAmount) {
+        const pixelSize = Math.max(blurAmount, 5);
+        if (this.backgroundImage) {
+          const tempCanvas = document.createElement("canvas");
+          tempCanvas.width = bounds.width;
+          tempCanvas.height = bounds.height;
+          const tempCtx = tempCanvas.getContext("2d");
+          tempCtx.drawImage(
+            this.backgroundImage,
+            bounds.x,
+            bounds.y,
+            bounds.width,
+            bounds.height,
+            0,
+            0,
+            bounds.width,
+            bounds.height
+          );
+          const w = tempCanvas.width;
+          const h = tempCanvas.height;
+          tempCtx.imageSmoothingEnabled = false;
+          tempCtx.drawImage(tempCanvas, 0, 0, w, h, 0, 0, w / pixelSize, h / pixelSize);
+          tempCtx.drawImage(tempCanvas, 0, 0, w / pixelSize, h / pixelSize, 0, 0, w, h);
+          ctx.drawImage(tempCanvas, bounds.x, bounds.y);
+        }
+        ctx.strokeStyle = "#999";
+        ctx.lineWidth = 1;
+        ctx.setLineDash([5, 5]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+        ctx.setLineDash([]);
+      }
+      drawText(ctx, position, text, style) {
+        ctx.font = `${style.fontSize || 16}px ${style.fontFamily || "system-ui"}`;
+        ctx.fillStyle = style.strokeColor;
+        ctx.textBaseline = "top";
+        const metrics = ctx.measureText(text);
+        const padding = 4;
+        ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+        ctx.fillRect(
+          position.x - padding,
+          position.y - padding,
+          metrics.width + padding * 2,
+          (style.fontSize || 16) + padding * 2
+        );
+        ctx.fillStyle = style.strokeColor;
+        ctx.fillText(text, position.x, position.y);
+      }
+      drawFreehand(ctx, points) {
+        if (points.length < 2) return;
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+          ctx.lineTo(points[i].x, points[i].y);
+        }
+        ctx.stroke();
+      }
+    };
+  }
+});
+
 // src/widget.ts
 function mountWidget(config2 = {}, onSubmit, opts) {
   if (container) return;
   onSubmitCallback = onSubmit;
   const cfg = { ...DEFAULT_CONFIG, ...config2 };
+  currentCfg = cfg;
   container = document.createElement("div");
   container.id = "checkflow-widget";
   injectStyles(cfg);
@@ -223,15 +1334,22 @@ function mountWidget(config2 = {}, onSubmit, opts) {
   const btn = container.querySelector("#cf-trigger");
   btn?.addEventListener("click", () => openModal(cfg, opts));
 }
+function getBackdropClass(cfg, expanded) {
+  if (expanded) return "cf-backdrop--center";
+  if (cfg.position === "center") return "cf-backdrop--center";
+  return "cf-backdrop--corner cf-pos-" + cfg.position;
+}
 function openModal(cfg, opts) {
   if (!container) return;
   const existing = document.getElementById("cf-modal-backdrop");
   if (existing) existing.remove();
   isExpanded = false;
   screenshotDataUrl = null;
+  annotatedImageUrl = null;
   annotationsData = [];
   const backdrop = document.createElement("div");
   backdrop.id = "cf-modal-backdrop";
+  backdrop.className = getBackdropClass(cfg, false);
   backdrop.innerHTML = getModalHTML(cfg, false);
   document.body.appendChild(backdrop);
   backdrop.addEventListener("click", (e) => {
@@ -244,6 +1362,7 @@ function closeModal() {
   if (backdrop) backdrop.remove();
   isExpanded = false;
   screenshotDataUrl = null;
+  annotatedImageUrl = null;
   annotationsData = [];
 }
 function expandModal(cfg, opts) {
@@ -253,6 +1372,7 @@ function expandModal(cfg, opts) {
   const email = backdrop.querySelector("#cf-email")?.value || "";
   const desc = backdrop.querySelector("#cf-desc")?.value || "";
   isExpanded = true;
+  backdrop.className = getBackdropClass(cfg, true);
   backdrop.innerHTML = getModalHTML(cfg, true);
   bindModalEvents(cfg, opts);
   const nameEl = backdrop.querySelector("#cf-name");
@@ -270,7 +1390,9 @@ function collapseModal(cfg, opts) {
   const desc = backdrop.querySelector("#cf-desc")?.value || "";
   isExpanded = false;
   screenshotDataUrl = null;
+  annotatedImageUrl = null;
   annotationsData = [];
+  backdrop.className = getBackdropClass(cfg, false);
   backdrop.innerHTML = getModalHTML(cfg, false);
   bindModalEvents(cfg, opts);
   const nameEl = backdrop.querySelector("#cf-name");
@@ -280,6 +1402,30 @@ function collapseModal(cfg, opts) {
   if (emailEl) emailEl.value = email;
   if (descEl) descEl.value = desc;
 }
+function openAnnotationEditor(cfg, opts) {
+  if (!screenshotDataUrl) return;
+  const backdrop = document.getElementById("cf-modal-backdrop");
+  if (backdrop) backdrop.style.display = "none";
+  const editor = new AnnotationEditor({
+    tools: ["rectangle", "ellipse", "arrow", "highlight", "blur", "text", "freehand"],
+    defaultStyle: { strokeColor: "#FF3B30", strokeWidth: 3, fillColor: "transparent", opacity: 1, fontSize: 16, fontFamily: "system-ui, -apple-system, sans-serif" },
+    onSave: (annotations, imageData) => {
+      annotationsData = annotations;
+      annotatedImageUrl = imageData;
+      if (backdrop) {
+        backdrop.style.display = "flex";
+        const img = backdrop.querySelector("#cf-screenshot-img");
+        if (img) img.src = annotatedImageUrl;
+        const annotBtn = backdrop.querySelector("#cf-annotate-btn");
+        if (annotBtn) annotBtn.textContent = `Annoter (${annotationsData.length})`;
+      }
+    },
+    onCancel: () => {
+      if (backdrop) backdrop.style.display = "flex";
+    }
+  });
+  editor.open(screenshotDataUrl);
+}
 function bindModalEvents(cfg, opts) {
   const backdrop = document.getElementById("cf-modal-backdrop");
   if (!backdrop) return;
@@ -302,33 +1448,8 @@ function bindModalEvents(cfg, opts) {
   backdrop.querySelector("#cf-remove-screenshot")?.addEventListener("click", () => {
     collapseModal(cfg, opts);
   });
-  backdrop.querySelector("#cf-highlight-btn")?.addEventListener("click", async () => {
-    if (!opts?.onHighlight) return;
-    backdrop.style.display = "none";
-    try {
-      const annotations = await opts.onHighlight();
-      if (annotations && annotations.length > 0) {
-        annotationsData = annotations;
-      }
-    } catch {
-    }
-    backdrop.style.display = "flex";
-    const hlBtn = backdrop.querySelector("#cf-highlight-btn");
-    if (hlBtn && annotationsData.length > 0) {
-      hlBtn.textContent = `Surligner (${annotationsData.length})`;
-    }
-  });
-  backdrop.querySelector("#cf-mask-btn")?.addEventListener("click", async () => {
-    if (!opts?.onHighlight) return;
-    backdrop.style.display = "none";
-    try {
-      const annotations = await opts.onHighlight();
-      if (annotations && annotations.length > 0) {
-        annotationsData = [...annotationsData, ...annotations];
-      }
-    } catch {
-    }
-    backdrop.style.display = "flex";
+  backdrop.querySelector("#cf-annotate-btn")?.addEventListener("click", () => {
+    openAnnotationEditor(cfg, opts);
   });
   backdrop.querySelector("#cf-submit")?.addEventListener("click", () => {
     const desc = backdrop.querySelector("#cf-desc")?.value;
@@ -347,7 +1468,7 @@ function bindModalEvents(cfg, opts) {
       description: desc.trim(),
       type: "BUG",
       priority: "MEDIUM",
-      screenshot: screenshotDataUrl || void 0,
+      screenshot: annotatedImageUrl || screenshotDataUrl || void 0,
       annotations: annotationsData.length > 0 ? annotationsData : void 0,
       reporter_name: name?.trim() || void 0,
       reporter_email: email?.trim() || void 0
@@ -409,9 +1530,30 @@ function injectStyles(cfg) {
       background:rgba(0,0,0,.45);
       z-index:100001;
       display:flex;
+      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+    }
+    #cf-modal-backdrop.cf-backdrop--center {
       align-items:center;
       justify-content:center;
-      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+    }
+    #cf-modal-backdrop.cf-backdrop--corner {
+      padding:20px;
+    }
+    #cf-modal-backdrop.cf-pos-bottom-right {
+      align-items:flex-end;
+      justify-content:flex-end;
+    }
+    #cf-modal-backdrop.cf-pos-bottom-left {
+      align-items:flex-end;
+      justify-content:flex-start;
+    }
+    #cf-modal-backdrop.cf-pos-top-right {
+      align-items:flex-start;
+      justify-content:flex-end;
+    }
+    #cf-modal-backdrop.cf-pos-top-left {
+      align-items:flex-start;
+      justify-content:flex-start;
     }
 
     .cf-modal {
@@ -620,6 +1762,8 @@ function getPositionCSS(pos) {
       return "top:20px;right:20px;";
     case "top-left":
       return "top:20px;left:20px;";
+    case "center":
+      return "bottom:20px;left:50%;transform:translateX(-50%);";
     default:
       return "bottom:20px;right:20px;";
   }
@@ -652,6 +1796,8 @@ function getModalHTML(cfg, expanded) {
     </div>
   `;
   if (expanded && screenshotDataUrl) {
+    const displayImg = annotatedImageUrl || screenshotDataUrl;
+    const annotLabel = annotationsData.length > 0 ? `Annoter (${annotationsData.length})` : "Annoter";
     return `
       <div class="${modalClass}">
         <div class="cf-modal-header">
@@ -660,10 +1806,9 @@ function getModalHTML(cfg, expanded) {
         </div>
         <div class="cf-modal-body">
           <div class="cf-screenshot-panel">
-            <img src="${screenshotDataUrl}" alt="Capture d'\xE9cran" />
+            <img id="cf-screenshot-img" src="${displayImg}" alt="Capture d'\xE9cran" />
             <div class="cf-screenshot-tools">
-              <button class="cf-tool-highlight" id="cf-highlight-btn">Surligner</button>
-              <button class="cf-tool-mask" id="cf-mask-btn">Masquer</button>
+              <button class="cf-tool-highlight" id="cf-annotate-btn">${annotLabel}</button>
             </div>
           </div>
           <div class="cf-form-panel">
@@ -693,10 +1838,11 @@ function getModalHTML(cfg, expanded) {
     </div>
   `;
 }
-var DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotationsData, isExpanded;
+var DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotatedImageUrl, annotationsData, isExpanded, currentCfg;
 var init_widget = __esm({
   "src/widget.ts"() {
     "use strict";
+    init_editor();
     DEFAULT_CONFIG = {
       position: "bottom-right",
       color: "#1e3a5f",
@@ -706,8 +1852,10 @@ var init_widget = __esm({
     container = null;
     onSubmitCallback = null;
     screenshotDataUrl = null;
+    annotatedImageUrl = null;
     annotationsData = [];
     isExpanded = false;
+    currentCfg = { ...DEFAULT_CONFIG };
   }
 });
 
@@ -777,6 +1925,143 @@ var init_screenshot = __esm({
   }
 });
 
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  captureScreenshot: () => captureScreenshot,
+  destroy: () => destroy,
+  hideWidget: () => hideWidget,
+  init: () => init,
+  sendFeedback: () => sendFeedback,
+  showWidget: () => showWidget
+});
+function init(cfg) {
+  config = {
+    enabled: true,
+    endpoint: DEFAULT_ENDPOINT,
+    environment: "production",
+    ...cfg
+  };
+  if (!config.enabled) return;
+  installInterceptors();
+  installNetworkInterceptor();
+  if (typeof window !== "undefined" && config.widget?.showOnInit !== false) {
+    mountWidget(
+      config.widget,
+      (data) => {
+        sendFeedback({
+          title: data.title,
+          description: data.description,
+          type: data.type,
+          priority: data.priority,
+          screenshot_data: data.screenshot,
+          annotations: data.annotations,
+          reporter_name: data.reporter_name,
+          reporter_email: data.reporter_email
+        });
+      },
+      {
+        onScreenshot: () => captureScreenshot()
+      }
+    );
+  }
+}
+async function sendFeedback(data) {
+  if (!config) {
+    return { success: false, error: { message: "SDK not initialized. Call init() first.", code: "NOT_INITIALIZED" } };
+  }
+  const context = typeof window !== "undefined" ? collectContext() : {};
+  const perf = typeof window !== "undefined" ? collectPerformance() : void 0;
+  const consoleLogs = getConsoleLogs();
+  const jsErrors = getJavascriptErrors();
+  const networkLogs = getNetworkLogs();
+  const payload = {
+    ...data,
+    ...context,
+    environment: config.environment,
+    performance_metrics: perf,
+    console_logs: consoleLogs.length > 0 ? consoleLogs : void 0,
+    javascript_errors: jsErrors.length > 0 ? jsErrors : void 0,
+    network_logs: networkLogs.length > 0 ? networkLogs : void 0,
+    sdk_version: SDK_VERSION
+  };
+  if (data.screenshot_data) {
+    payload.screenshot_data = data.screenshot_data;
+  }
+  if (data.annotations && data.annotations.length > 0) {
+    payload.annotations = data.annotations;
+  }
+  if (data.reporter_name) {
+    payload.reporter_name = data.reporter_name;
+  }
+  if (data.reporter_email) {
+    payload.reporter_email = data.reporter_email;
+  }
+  try {
+    const res = await fetch(`${config.endpoint}/sdk/feedback`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": config.apiKey
+      },
+      body: JSON.stringify(payload)
+    });
+    const json = await res.json();
+    if (!res.ok) {
+      return { success: false, error: json.error || { message: "Request failed", code: "REQUEST_FAILED" } };
+    }
+    return { success: true, data: json.data };
+  } catch (err) {
+    return { success: false, error: { message: err.message, code: "NETWORK_ERROR" } };
+  }
+}
+function showWidget() {
+  if (!config) return;
+  mountWidget(
+    config.widget,
+    (data) => {
+      sendFeedback({
+        title: data.title,
+        description: data.description,
+        type: data.type,
+        priority: data.priority,
+        screenshot_data: data.screenshot,
+        annotations: data.annotations,
+        reporter_name: data.reporter_name,
+        reporter_email: data.reporter_email
+      });
+    },
+    {
+      onScreenshot: () => captureScreenshot()
+    }
+  );
+}
+function hideWidget() {
+  unmountWidget();
+}
+function destroy() {
+  unmountWidget();
+  clearLogs();
+  clearNetworkLogs();
+  clearScreenshot();
+  config = null;
+}
+var SDK_VERSION, DEFAULT_ENDPOINT, config;
+var init_index = __esm({
+  "src/index.ts"() {
+    "use strict";
+    init_collector();
+    init_console_interceptor();
+    init_network_interceptor();
+    init_widget();
+    init_screenshot();
+    init_screenshot();
+    SDK_VERSION = "1.1.0";
+    DEFAULT_ENDPOINT = "https://api.checkflow.space/api/v1";
+    config = null;
+  }
+});
+
 // src/highlighter.ts
 var highlighter_exports = {};
 __export(highlighter_exports, {
@@ -915,148 +2200,6 @@ var init_highlighter = __esm({
   }
 });
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  captureScreenshot: () => captureScreenshot,
-  destroy: () => destroy,
-  hideWidget: () => hideWidget,
-  init: () => init,
-  sendFeedback: () => sendFeedback,
-  showWidget: () => showWidget,
-  startHighlighting: () => startHighlighting
-});
-function init(cfg) {
-  config = {
-    enabled: true,
-    endpoint: DEFAULT_ENDPOINT,
-    environment: "production",
-    ...cfg
-  };
-  if (!config.enabled) return;
-  installInterceptors();
-  installNetworkInterceptor();
-  if (typeof window !== "undefined" && config.widget?.showOnInit !== false) {
-    mountWidget(
-      config.widget,
-      (data) => {
-        sendFeedback({
-          title: data.title,
-          description: data.description,
-          type: data.type,
-          priority: data.priority,
-          screenshot_data: data.screenshot,
-          annotations: data.annotations,
-          reporter_name: data.reporter_name,
-          reporter_email: data.reporter_email
-        });
-      },
-      {
-        onScreenshot: () => captureScreenshot(),
-        onHighlight: () => startHighlighting()
-      }
-    );
-  }
-}
-async function sendFeedback(data) {
-  if (!config) {
-    return { success: false, error: { message: "SDK not initialized. Call init() first.", code: "NOT_INITIALIZED" } };
-  }
-  const context = typeof window !== "undefined" ? collectContext() : {};
-  const perf = typeof window !== "undefined" ? collectPerformance() : void 0;
-  const consoleLogs = getConsoleLogs();
-  const jsErrors = getJavascriptErrors();
-  const networkLogs = getNetworkLogs();
-  const payload = {
-    ...data,
-    ...context,
-    environment: config.environment,
-    performance_metrics: perf,
-    console_logs: consoleLogs.length > 0 ? consoleLogs : void 0,
-    javascript_errors: jsErrors.length > 0 ? jsErrors : void 0,
-    network_logs: networkLogs.length > 0 ? networkLogs : void 0,
-    sdk_version: SDK_VERSION
-  };
-  if (data.screenshot_data) {
-    payload.screenshot_data = data.screenshot_data;
-  }
-  if (data.annotations && data.annotations.length > 0) {
-    payload.annotations = data.annotations;
-  }
-  if (data.reporter_name) {
-    payload.reporter_name = data.reporter_name;
-  }
-  if (data.reporter_email) {
-    payload.reporter_email = data.reporter_email;
-  }
-  try {
-    const res = await fetch(`${config.endpoint}/sdk/feedback`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-Key": config.apiKey
-      },
-      body: JSON.stringify(payload)
-    });
-    const json = await res.json();
-    if (!res.ok) {
-      return { success: false, error: json.error || { message: "Request failed", code: "REQUEST_FAILED" } };
-    }
-    return { success: true, data: json.data };
-  } catch (err) {
-    return { success: false, error: { message: err.message, code: "NETWORK_ERROR" } };
-  }
-}
-function showWidget() {
-  if (!config) return;
-  mountWidget(
-    config.widget,
-    (data) => {
-      sendFeedback({
-        title: data.title,
-        description: data.description,
-        type: data.type,
-        priority: data.priority,
-        screenshot_data: data.screenshot,
-        annotations: data.annotations,
-        reporter_name: data.reporter_name,
-        reporter_email: data.reporter_email
-      });
-    },
-    {
-      onScreenshot: () => captureScreenshot(),
-      onHighlight: () => startHighlighting()
-    }
-  );
-}
-function hideWidget() {
-  unmountWidget();
-}
-function destroy() {
-  unmountWidget();
-  clearLogs();
-  clearNetworkLogs();
-  clearScreenshot();
-  config = null;
-}
-var SDK_VERSION, DEFAULT_ENDPOINT, config;
-var init_index = __esm({
-  "src/index.ts"() {
-    "use strict";
-    init_collector();
-    init_console_interceptor();
-    init_network_interceptor();
-    init_widget();
-    init_screenshot();
-    init_highlighter();
-    init_screenshot();
-    init_highlighter();
-    SDK_VERSION = "1.1.0";
-    DEFAULT_ENDPOINT = "https://api.checkflow.space/api/v1";
-    config = null;
-  }
-});
-
 // src/vue.ts
 var vue_exports = {};
 __export(vue_exports, {