@checkflow/sdk 1.1.2 → 1.1.4

package/dist/index.js

@@ -25,8 +25,7 @@ __export(index_exports, {
   hideWidget: () => hideWidget,
   init: () => init,
   sendFeedback: () => sendFeedback,
-  showWidget: () => showWidget,
-  startHighlighting: () => startHighlighting
+  showWidget: () => showWidget
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -134,6 +133,1157 @@ function clearLogs() {
   errorsCapture = [];
 }
 
+// src/network-interceptor.ts
+var MAX_LOGS2 = 50;
+var logs2 = [];
+var installed2 = false;
+function installNetworkInterceptor() {
+  if (installed2 || typeof window === "undefined") return;
+  installed2 = true;
+  const origFetch = window.fetch;
+  window.fetch = async function(...args) {
+    const start = Date.now();
+    const req = new Request(...args);
+    const entry = {
+      method: req.method,
+      url: req.url,
+      type: "fetch",
+      timestamp: start
+    };
+    try {
+      const res = await origFetch.apply(this, args);
+      entry.status = res.status;
+      entry.duration = Date.now() - start;
+      entry.response_type = res.headers.get("content-type") || void 0;
+      pushLog(entry);
+      return res;
+    } catch (err) {
+      entry.duration = Date.now() - start;
+      entry.error = err.message || "Network error";
+      pushLog(entry);
+      throw err;
+    }
+  };
+  const origOpen = XMLHttpRequest.prototype.open;
+  const origSend = XMLHttpRequest.prototype.send;
+  XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+    this.__cf_method = method;
+    this.__cf_url = String(url);
+    return origOpen.apply(this, [method, url, ...rest]);
+  };
+  XMLHttpRequest.prototype.send = function(...args) {
+    const start = Date.now();
+    const xhr = this;
+    xhr.addEventListener("loadend", () => {
+      const entry = {
+        method: xhr.__cf_method || "GET",
+        url: xhr.__cf_url || "",
+        status: xhr.status,
+        duration: Date.now() - start,
+        type: "xhr",
+        timestamp: start,
+        response_type: xhr.getResponseHeader("content-type") || void 0
+      };
+      if (xhr.status === 0) entry.error = "Request failed";
+      pushLog(entry);
+    });
+    return origSend.apply(this, args);
+  };
+}
+function pushLog(entry) {
+  if (entry.url.includes("/sdk/feedback")) return;
+  logs2.push(entry);
+  if (logs2.length > MAX_LOGS2) logs2.shift();
+}
+function getNetworkLogs() {
+  return [...logs2];
+}
+function clearNetworkLogs() {
+  logs2 = [];
+}
+
+// src/annotation/types.ts
+var DEFAULT_STYLE = {
+  strokeColor: "#FF3B30",
+  strokeWidth: 3,
+  fillColor: "transparent",
+  opacity: 1,
+  fontSize: 16,
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+var HIGHLIGHT_STYLE = {
+  strokeColor: "transparent",
+  fillColor: "#FFEB3B",
+  opacity: 0.4
+};
+var BLUR_STYLE = {
+  strokeColor: "#666666",
+  fillColor: "#666666",
+  opacity: 0.8
+};
+var COLOR_PALETTE = [
+  "#FF3B30",
+  // Red
+  "#FF9500",
+  // Orange
+  "#FFCC00",
+  // Yellow
+  "#34C759",
+  // Green
+  "#007AFF",
+  // Blue
+  "#5856D6",
+  // Purple
+  "#AF52DE",
+  // Pink
+  "#000000",
+  // Black
+  "#FFFFFF"
+  // White
+];
+var STROKE_WIDTHS = [1, 2, 3, 5, 8];
+
+// src/annotation/toolbar.ts
+var 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>`
+};
+var TOOL_LABELS = {
+  select: "S\xE9lection",
+  rectangle: "Rectangle",
+  ellipse: "Ellipse",
+  arrow: "Fl\xE8che",
+  line: "Ligne",
+  highlight: "Surbrillance",
+  blur: "Floutage",
+  text: "Texte",
+  freehand: "Dessin libre"
+};
+var 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
+var 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;
+  }
+}
+`;
+var stylesInjected = false;
+function injectAnnotationStyles() {
+  if (stylesInjected) return;
+  const styleElement = document.createElement("style");
+  styleElement.id = "cf-annotation-styles";
+  styleElement.textContent = STYLES;
+  document.head.appendChild(styleElement);
+  stylesInjected = true;
+}
+
+// src/annotation/editor.ts
+var 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
 var DEFAULT_CONFIG = {
   position: "bottom-right",
@@ -144,79 +1294,168 @@ var DEFAULT_CONFIG = {
 var container = null;
 var onSubmitCallback = null;
 var screenshotDataUrl = null;
+var annotatedImageUrl = null;
 var annotationsData = [];
+var isExpanded = false;
+var currentCfg = { ...DEFAULT_CONFIG };
 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";
-  container.innerHTML = getWidgetHTML(cfg);
+  injectStyles(cfg);
+  container.innerHTML = getTriggerHTML(cfg);
   document.body.appendChild(container);
   const btn = container.querySelector("#cf-trigger");
-  const form = container.querySelector("#cf-form");
-  const closeBtn = container.querySelector("#cf-close");
-  const submitBtn = container.querySelector("#cf-submit");
-  const screenshotBtn = container.querySelector("#cf-screenshot");
-  const highlightBtn = container.querySelector("#cf-highlight");
-  const screenshotPreview = container.querySelector("#cf-screenshot-preview");
-  btn?.addEventListener("click", () => {
-    form.style.display = form.style.display === "none" ? "flex" : "none";
-    screenshotDataUrl = null;
-    annotationsData = [];
-    if (screenshotPreview) screenshotPreview.style.display = "none";
+  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) => {
+    if (e.target === backdrop) closeModal();
   });
-  closeBtn?.addEventListener("click", () => {
-    form.style.display = "none";
+  bindModalEvents(cfg, opts);
+}
+function closeModal() {
+  const backdrop = document.getElementById("cf-modal-backdrop");
+  if (backdrop) backdrop.remove();
+  isExpanded = false;
+  screenshotDataUrl = null;
+  annotatedImageUrl = null;
+  annotationsData = [];
+}
+function expandModal(cfg, opts) {
+  const backdrop = document.getElementById("cf-modal-backdrop");
+  if (!backdrop) return;
+  const name = backdrop.querySelector("#cf-name")?.value || "";
+  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");
+  const emailEl = backdrop.querySelector("#cf-email");
+  const descEl = backdrop.querySelector("#cf-desc");
+  if (nameEl) nameEl.value = name;
+  if (emailEl) emailEl.value = email;
+  if (descEl) descEl.value = desc;
+}
+function collapseModal(cfg, opts) {
+  const backdrop = document.getElementById("cf-modal-backdrop");
+  if (!backdrop) return;
+  const name = backdrop.querySelector("#cf-name")?.value || "";
+  const email = backdrop.querySelector("#cf-email")?.value || "";
+  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");
+  const emailEl = backdrop.querySelector("#cf-email");
+  const descEl = backdrop.querySelector("#cf-desc");
+  if (nameEl) nameEl.value = name;
+  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";
+    }
   });
-  screenshotBtn?.addEventListener("click", async () => {
+  editor.open(screenshotDataUrl);
+}
+function bindModalEvents(cfg, opts) {
+  const backdrop = document.getElementById("cf-modal-backdrop");
+  if (!backdrop) return;
+  backdrop.querySelector("#cf-cancel")?.addEventListener("click", closeModal);
+  backdrop.querySelector("#cf-screenshot-btn")?.addEventListener("click", async () => {
     if (!opts?.onScreenshot) return;
-    screenshotBtn.textContent = "Capturing...";
-    form.style.display = "none";
+    backdrop.style.display = "none";
     try {
       const data = await opts.onScreenshot();
       if (data) {
         screenshotDataUrl = data;
-        if (screenshotPreview) {
-          screenshotPreview.querySelector("img").src = data;
-          screenshotPreview.style.display = "block";
-        }
+        backdrop.style.display = "flex";
+        expandModal(cfg, opts);
+        return;
       }
     } catch {
     }
-    form.style.display = "flex";
-    screenshotBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg> Screenshot';
+    backdrop.style.display = "flex";
   });
-  highlightBtn?.addEventListener("click", async () => {
-    if (!opts?.onHighlight) return;
-    form.style.display = "none";
-    try {
-      const annotations = await opts.onHighlight();
-      if (annotations && annotations.length > 0) {
-        annotationsData = annotations;
-        highlightBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg> ${annotations.length} highlighted`;
+  backdrop.querySelector("#cf-remove-screenshot")?.addEventListener("click", () => {
+    collapseModal(cfg, opts);
+  });
+  backdrop.querySelector("#cf-annotate-btn")?.addEventListener("click", () => {
+    openAnnotationEditor(cfg, opts);
+  });
+  backdrop.querySelector("#cf-submit")?.addEventListener("click", () => {
+    const desc = backdrop.querySelector("#cf-desc")?.value;
+    const name = backdrop.querySelector("#cf-name")?.value;
+    const email = backdrop.querySelector("#cf-email")?.value;
+    if (!desc?.trim()) {
+      const descEl = backdrop.querySelector("#cf-desc");
+      if (descEl) {
+        descEl.style.borderColor = "#e74c3c";
+        descEl.focus();
       }
-    } catch {
+      return;
     }
-    form.style.display = "flex";
-  });
-  submitBtn?.addEventListener("click", () => {
-    const title = container.querySelector("#cf-title")?.value;
-    const desc = container.querySelector("#cf-desc")?.value;
-    const type = container.querySelector("#cf-type")?.value;
-    const priority = container.querySelector("#cf-priority")?.value;
-    if (!title?.trim()) return;
-    onSubmitCallback?.({ title, description: desc, type, priority, screenshot: screenshotDataUrl || void 0, annotations: annotationsData.length > 0 ? annotationsData : void 0 });
-    container.querySelector("#cf-title").value = "";
-    container.querySelector("#cf-desc").value = "";
-    screenshotDataUrl = null;
-    annotationsData = [];
-    if (screenshotPreview) screenshotPreview.style.display = "none";
-    form.style.display = "none";
-    showToast("Feedback sent!");
+    onSubmitCallback?.({
+      title: desc.trim().slice(0, 100),
+      description: desc.trim(),
+      type: "BUG",
+      priority: "MEDIUM",
+      screenshot: annotatedImageUrl || screenshotDataUrl || void 0,
+      annotations: annotationsData.length > 0 ? annotationsData : void 0,
+      reporter_name: name?.trim() || void 0,
+      reporter_email: email?.trim() || void 0
+    });
+    closeModal();
+    showToast("Rapport envoy\xE9 avec succ\xE8s !");
   });
 }
 function unmountWidget() {
+  closeModal();
   if (container) {
     container.remove();
     container = null;
@@ -225,10 +1464,273 @@ function unmountWidget() {
 function showToast(msg) {
   const toast = document.createElement("div");
   toast.textContent = msg;
-  toast.style.cssText = "position:fixed;bottom:80px;right:20px;background:#10b981;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;z-index:100001;font-family:system-ui;box-shadow:0 2px 8px rgba(0,0,0,.15);";
+  toast.style.cssText = 'position:fixed;bottom:80px;right:20px;background:#10b981;color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;z-index:100010;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;box-shadow:0 4px 16px rgba(0,0,0,.18);animation:cf-toast-in .3s ease;';
   document.body.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    toast.style.transition = "opacity .3s";
+  }, 2500);
   setTimeout(() => toast.remove(), 3e3);
 }
+function injectStyles(cfg) {
+  const style = document.createElement("style");
+  style.id = "cf-widget-styles";
+  style.textContent = `
+    @keyframes cf-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
+    @keyframes cf-modal-in { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
+
+    #cf-trigger {
+      position:fixed;
+      ${getPositionCSS(cfg.position)}
+      z-index:100000;
+      background:${cfg.color};
+      color:#fff;
+      border:none;
+      border-radius:50px;
+      padding:11px 20px;
+      font-size:14px;
+      font-weight:500;
+      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
+      cursor:pointer;
+      box-shadow:0 4px 16px rgba(0,0,0,.18);
+      display:flex;
+      align-items:center;
+      gap:8px;
+      transition:transform .15s,box-shadow .15s;
+    }
+    #cf-trigger:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(0,0,0,.22); }
+    #cf-trigger svg { width:18px; height:18px; }
+
+    #cf-modal-backdrop {
+      position:fixed;
+      top:0;left:0;right:0;bottom:0;
+      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;
+    }
+    #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 {
+      background:#fff;
+      border-radius:16px;
+      box-shadow:0 24px 80px rgba(0,0,0,.25);
+      overflow:hidden;
+      animation:cf-modal-in .25s ease;
+      display:flex;
+      flex-direction:column;
+      max-height:90vh;
+    }
+    .cf-modal--compact { width:420px; }
+    .cf-modal--expanded { width:min(1100px,92vw); flex-direction:column; }
+
+    .cf-modal-header {
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      padding:20px 24px 16px;
+      border-bottom:1px solid #f0f0f0;
+    }
+    .cf-modal-header h2 {
+      margin:0;
+      font-size:20px;
+      font-weight:700;
+      color:#1a1a2e;
+    }
+    .cf-modal-header .cf-logo {
+      width:28px;
+      height:28px;
+      color:${cfg.color};
+    }
+
+    .cf-modal-body { display:flex; flex:1; overflow:hidden; }
+
+    .cf-screenshot-panel {
+      flex:1;
+      min-width:0;
+      background:#1a1a2e;
+      display:flex;
+      flex-direction:column;
+      position:relative;
+    }
+    .cf-screenshot-panel img {
+      width:100%;
+      height:100%;
+      object-fit:contain;
+      max-height:60vh;
+    }
+    .cf-screenshot-tools {
+      position:absolute;
+      bottom:16px;
+      left:50%;
+      transform:translateX(-50%);
+      display:flex;
+      gap:8px;
+    }
+    .cf-screenshot-tools button {
+      padding:8px 18px;
+      border-radius:8px;
+      font-size:13px;
+      font-weight:500;
+      cursor:pointer;
+      font-family:inherit;
+      border:none;
+      transition:all .15s;
+    }
+    .cf-tool-highlight {
+      background:${cfg.color};
+      color:#fff;
+    }
+    .cf-tool-highlight:hover { opacity:.9; }
+    .cf-tool-mask {
+      background:#fff;
+      color:#1a1a2e;
+      border:1px solid #e0e0e0 !important;
+    }
+    .cf-tool-mask:hover { background:#f5f5f5; }
+
+    .cf-form-panel {
+      width:100%;
+      padding:20px 24px;
+      display:flex;
+      flex-direction:column;
+      gap:14px;
+      overflow-y:auto;
+    }
+    .cf-modal--expanded .cf-form-panel {
+      width:340px;
+      flex-shrink:0;
+      border-left:1px solid #f0f0f0;
+    }
+
+    .cf-field label {
+      display:block;
+      font-size:13px;
+      font-weight:500;
+      color:#1a1a2e;
+      margin-bottom:6px;
+    }
+    .cf-field label span { font-weight:400; color:#999; }
+    .cf-field input, .cf-field textarea {
+      width:100%;
+      padding:10px 14px;
+      border:1px solid #e0e0e0;
+      border-radius:10px;
+      font-size:14px;
+      font-family:inherit;
+      box-sizing:border-box;
+      outline:none;
+      transition:border-color .15s,box-shadow .15s;
+      color:#1a1a2e;
+      background:#fff;
+    }
+    .cf-field input::placeholder, .cf-field textarea::placeholder { color:#bbb; }
+    .cf-field input:focus, .cf-field textarea:focus {
+      border-color:${cfg.color};
+      box-shadow:0 0 0 3px ${cfg.color}18;
+    }
+    .cf-field textarea { resize:vertical; min-height:100px; }
+
+    .cf-screenshot-action {
+      width:100%;
+      padding:12px;
+      border:1px solid #e0e0e0;
+      border-radius:10px;
+      background:#fff;
+      font-size:14px;
+      color:#1a1a2e;
+      cursor:pointer;
+      font-family:inherit;
+      transition:all .15s;
+      text-align:center;
+    }
+    .cf-screenshot-action:hover { background:#f8f8f8; border-color:#ccc; }
+
+    .cf-remove-screenshot {
+      width:100%;
+      padding:10px;
+      border:1px solid #e0e0e0;
+      border-radius:10px;
+      background:#fff;
+      font-size:13px;
+      color:#666;
+      cursor:pointer;
+      font-family:inherit;
+      transition:all .15s;
+      text-align:center;
+    }
+    .cf-remove-screenshot:hover { background:#fff0f0; color:#e74c3c; border-color:#e74c3c; }
+
+    .cf-submit-btn {
+      width:100%;
+      padding:13px;
+      border:none;
+      border-radius:10px;
+      background:${cfg.color};
+      color:#fff;
+      font-size:15px;
+      font-weight:600;
+      cursor:pointer;
+      font-family:inherit;
+      transition:all .15s;
+    }
+    .cf-submit-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${cfg.color}40; }
+    .cf-submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
+
+    .cf-cancel-btn {
+      width:100%;
+      padding:11px;
+      border:1px solid #e0e0e0;
+      border-radius:10px;
+      background:#fff;
+      color:#1a1a2e;
+      font-size:14px;
+      font-weight:500;
+      cursor:pointer;
+      font-family:inherit;
+      transition:all .15s;
+      text-align:center;
+    }
+    .cf-cancel-btn:hover { background:#f8f8f8; }
+
+    .cf-footer {
+      text-align:center;
+      padding:12px;
+      border-top:1px solid #f0f0f0;
+      font-size:11px;
+      color:#bbb;
+    }
+    .cf-footer a {
+      color:#999;
+      text-decoration:none;
+      font-weight:500;
+    }
+    .cf-footer a:hover { color:${cfg.color}; }
+  `;
+  document.head.appendChild(style);
+}
 function getPositionCSS(pos) {
   switch (pos) {
     case "bottom-left":
@@ -237,137 +1739,125 @@ 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;";
   }
 }
-function getFormPositionCSS(pos) {
-  switch (pos) {
-    case "bottom-left":
-      return "bottom:70px;left:20px;";
-    case "top-right":
-      return "top:70px;right:20px;";
-    case "top-left":
-      return "top:70px;left:20px;";
-    default:
-      return "bottom:70px;right:20px;";
-  }
-}
-function getWidgetHTML(cfg) {
-  const posBtn = getPositionCSS(cfg.position);
-  const posForm = getFormPositionCSS(cfg.position);
+function getTriggerHTML(cfg) {
   return `
-<style>
-  #cf-trigger{position:fixed;${posBtn}z-index:100000;background:${cfg.color};color:#fff;border:none;border-radius:50px;padding:10px 18px;font-size:13px;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;gap:6px;transition:transform .15s}
-  #cf-trigger:hover{transform:scale(1.05)}
-  #cf-trigger svg{width:16px;height:16px}
-  #cf-form{position:fixed;${posForm}z-index:100000;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);width:360px;padding:16px;font-family:system-ui,-apple-system,sans-serif;display:none;flex-direction:column;gap:10px}
-  #cf-form h3{margin:0;font-size:15px;font-weight:600;color:#111}
-  #cf-form input,#cf-form textarea,#cf-form select{width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;box-sizing:border-box;outline:none;transition:border .15s}
-  #cf-form input:focus,#cf-form textarea:focus,#cf-form select:focus{border-color:${cfg.color}}
-  #cf-form textarea{resize:vertical;min-height:60px}
-  .cf-row{display:flex;gap:8px}
-  .cf-row select{flex:1}
-  .cf-tools{display:flex;gap:6px}
-  .cf-tool-btn{display:flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;color:#475569;font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s}
-  .cf-tool-btn:hover{background:#f1f5f9;border-color:#cbd5e1}
-  .cf-tool-btn svg{width:14px;height:14px}
-  #cf-submit{background:${cfg.color};color:#fff;border:none;border-radius:8px;padding:9px;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s}
-  #cf-submit:hover{opacity:.9}
-  #cf-close{position:absolute;top:10px;right:12px;background:none;border:none;cursor:pointer;font-size:18px;color:#94a3b8;line-height:1}
-  #cf-screenshot-preview{display:none;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;max-height:120px}
-  #cf-screenshot-preview img{width:100%;height:auto;display:block}
-</style>
-<button id="cf-trigger">
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-  ${cfg.text}
-</button>
-<div id="cf-form">
-  <button id="cf-close">&times;</button>
-  <h3>Report Feedback</h3>
-  <input id="cf-title" type="text" placeholder="Title *" />
-  <textarea id="cf-desc" placeholder="Description (optional)"></textarea>
-  <div class="cf-row">
-    <select id="cf-type">
-      <option value="BUG">Bug</option>
-      <option value="FEATURE">Feature</option>
-      <option value="IMPROVEMENT">Improvement</option>
-      <option value="QUESTION">Question</option>
-    </select>
-    <select id="cf-priority">
-      <option value="LOW">Low</option>
-      <option value="MEDIUM" selected>Medium</option>
-      <option value="HIGH">High</option>
-      <option value="CRITICAL">Critical</option>
-    </select>
-  </div>
-  <div class="cf-tools">
-    <button type="button" class="cf-tool-btn" id="cf-screenshot">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
-      Screenshot
+    <button id="cf-trigger">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+      ${cfg.text}
     </button>
-    <button type="button" class="cf-tool-btn" id="cf-highlight">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
-      Highlight
-    </button>
-  </div>
-  <div id="cf-screenshot-preview"><img src="" alt="screenshot" /></div>
-  <button id="cf-submit">Send Feedback</button>
-</div>`;
+  `;
+}
+function getCheckflowLogo() {
+  return `<svg class="cf-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/><path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M9 6.8a6 6 0 0 1 9 5.2v2"/></svg>`;
+}
+function getModalHTML(cfg, expanded) {
+  const modalClass = expanded ? "cf-modal cf-modal--expanded" : "cf-modal cf-modal--compact";
+  const formFields = `
+    <div class="cf-field">
+      <label>Nom <span>(obligatoire)</span></label>
+      <input id="cf-name" type="text" placeholder="Votre nom" />
+    </div>
+    <div class="cf-field">
+      <label>Email <span>(obligatoire)</span></label>
+      <input id="cf-email" type="email" placeholder="votre.email@exemple.com" />
+    </div>
+    <div class="cf-field">
+      <label>Description <span>(obligatoire)</span></label>
+      <textarea id="cf-desc" placeholder="Quel est le probl\xE8me ? Que vous attendiez-vous \xE0 voir ?"></textarea>
+    </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">
+          <h2>Envoyer le rapport</h2>
+          ${getCheckflowLogo()}
+        </div>
+        <div class="cf-modal-body">
+          <div class="cf-screenshot-panel">
+            <img id="cf-screenshot-img" src="${displayImg}" alt="Capture d'\xE9cran" />
+            <div class="cf-screenshot-tools">
+              <button class="cf-tool-highlight" id="cf-annotate-btn">${annotLabel}</button>
+            </div>
+          </div>
+          <div class="cf-form-panel">
+            ${formFields}
+            <button class="cf-remove-screenshot" id="cf-remove-screenshot">Supprimer la capture d'\xE9cran</button>
+            <button class="cf-submit-btn" id="cf-submit">Envoyer le rapport</button>
+            <button class="cf-cancel-btn" id="cf-cancel">Annuler</button>
+          </div>
+        </div>
+        <div class="cf-footer">Powered by <a href="https://checkflow.space" target="_blank" rel="noopener">Checkflow</a></div>
+      </div>
+    `;
+  }
+  return `
+    <div class="${modalClass}">
+      <div class="cf-modal-header">
+        <h2>Envoyer le rapport</h2>
+        ${getCheckflowLogo()}
+      </div>
+      <div class="cf-form-panel">
+        ${formFields}
+        <button class="cf-screenshot-action" id="cf-screenshot-btn">Ajouter une capture d'\xE9cran</button>
+        <button class="cf-submit-btn" id="cf-submit">Envoyer le rapport</button>
+        <button class="cf-cancel-btn" id="cf-cancel">Annuler</button>
+      </div>
+      <div class="cf-footer">Powered by <a href="https://checkflow.space" target="_blank" rel="noopener">Checkflow</a></div>
+    </div>
+  `;
 }
 
 // src/screenshot.ts
 var screenshotData = null;
 async function captureScreenshot() {
   try {
-    if (typeof window.html2canvas === "function") {
-      const canvas2 = await window.html2canvas(document.body, {
-        useCORS: true,
-        allowTaint: true,
-        scale: Math.min(window.devicePixelRatio, 2),
-        logging: false,
-        width: window.innerWidth,
-        height: window.innerHeight,
-        x: window.scrollX,
-        y: window.scrollY
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      video: { displaySurface: "browser" },
+      preferCurrentTab: true
+    });
+    const track = stream.getVideoTracks()[0];
+    const imageCapture = new window.ImageCapture(track);
+    await new Promise((r) => setTimeout(r, 300));
+    let bitmap;
+    try {
+      bitmap = await imageCapture.grabFrame();
+    } catch {
+      const video = document.createElement("video");
+      video.srcObject = stream;
+      video.autoplay = true;
+      await new Promise((resolve) => {
+        video.onloadedmetadata = () => {
+          video.play();
+          resolve();
+        };
       });
-      screenshotData = canvas2.toDataURL("image/png", 0.8);
+      await new Promise((r) => setTimeout(r, 200));
+      const canvas2 = document.createElement("canvas");
+      canvas2.width = video.videoWidth;
+      canvas2.height = video.videoHeight;
+      const ctx2 = canvas2.getContext("2d");
+      ctx2.drawImage(video, 0, 0);
+      track.stop();
+      screenshotData = canvas2.toDataURL("image/png", 0.92);
       return screenshotData;
     }
     const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
     const ctx = canvas.getContext("2d");
-    if (!ctx) return null;
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    ctx.fillStyle = "#ffffff";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "#333333";
-    ctx.font = "14px system-ui";
-    ctx.fillText(`Page: ${window.location.href}`, 10, 30);
-    ctx.fillText(`Viewport: ${window.innerWidth}x${window.innerHeight}`, 10, 50);
-    ctx.fillText(`Screenshot captured at ${(/* @__PURE__ */ new Date()).toISOString()}`, 10, 70);
-    const svgData = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${window.innerWidth}" height="${window.innerHeight}">
-        <foreignObject width="100%" height="100%">
-          <div xmlns="http://www.w3.org/1999/xhtml">
-            ${document.documentElement.outerHTML}
-          </div>
-        </foreignObject>
-      </svg>`;
-    try {
-      const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
-      const url = URL.createObjectURL(blob);
-      const img = new Image();
-      await new Promise((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject();
-        img.src = url;
-      });
-      ctx.drawImage(img, 0, 0);
-      URL.revokeObjectURL(url);
-    } catch {
-    }
-    screenshotData = canvas.toDataURL("image/png", 0.8);
+    ctx.drawImage(bitmap, 0, 0);
+    bitmap.close();
+    track.stop();
+    screenshotData = canvas.toDataURL("image/png", 0.92);
     return screenshotData;
   } catch {
     return null;
@@ -376,143 +1866,6 @@ async function captureScreenshot() {
 function clearScreenshot() {
   screenshotData = null;
 }
-function loadHtml2Canvas() {
-  return new Promise((resolve, reject) => {
-    if (typeof window.html2canvas === "function") {
-      resolve();
-      return;
-    }
-    const script = document.createElement("script");
-    script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load html2canvas"));
-    document.head.appendChild(script);
-  });
-}
-
-// src/highlighter.ts
-var overlay = null;
-var highlights = [];
-var isActive = false;
-var onDoneCallback = null;
-function getSelector(el) {
-  if (el.id) return `#${el.id}`;
-  const parts = [];
-  let current = el;
-  while (current && current !== document.body) {
-    let sel = current.tagName.toLowerCase();
-    if (current.id) {
-      parts.unshift(`#${current.id}`);
-      break;
-    }
-    if (current.className && typeof current.className === "string") {
-      const cls = current.className.trim().split(/\s+/).slice(0, 2).join(".");
-      if (cls) sel += `.${cls}`;
-    }
-    const parent = current.parentElement;
-    if (parent) {
-      const siblings = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
-      if (siblings.length > 1) sel += `:nth-child(${Array.from(parent.children).indexOf(current) + 1})`;
-    }
-    parts.unshift(sel);
-    current = current.parentElement;
-  }
-  return parts.join(" > ");
-}
-function createOverlay() {
-  overlay = document.createElement("div");
-  overlay.id = "cf-highlight-overlay";
-  overlay.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;cursor:crosshair;";
-  const toolbar = document.createElement("div");
-  toolbar.style.cssText = "position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:100002;background:#1e3a5f;color:#fff;padding:8px 16px;border-radius:10px;font-family:system-ui;font-size:13px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 20px rgba(0,0,0,.25);";
-  toolbar.innerHTML = `
-    <span>Click elements to highlight them</span>
-    <button id="cf-hl-done" style="background:#10b981;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;cursor:pointer;font-weight:500;">Done (${highlights.length})</button>
-    <button id="cf-hl-cancel" style="background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 14px;font-size:12px;cursor:pointer;">Cancel</button>
-  `;
-  overlay.appendChild(toolbar);
-  document.body.appendChild(overlay);
-  overlay.addEventListener("click", handleClick);
-  overlay.addEventListener("mousemove", handleHover);
-  document.getElementById("cf-hl-done")?.addEventListener("click", finishHighlighting);
-  document.getElementById("cf-hl-cancel")?.addEventListener("click", cancelHighlighting);
-}
-var hoverBox = null;
-function handleHover(e) {
-  if (!hoverBox) {
-    hoverBox = document.createElement("div");
-    hoverBox.style.cssText = "position:fixed;border:2px solid #0c66e4;background:rgba(12,102,228,0.08);pointer-events:none;z-index:100001;border-radius:3px;transition:all 0.05s;";
-    document.body.appendChild(hoverBox);
-  }
-  const target = document.elementFromPoint(e.clientX, e.clientY);
-  if (target && target !== overlay && !overlay?.contains(target)) {
-    const rect = target.getBoundingClientRect();
-    hoverBox.style.left = rect.left + "px";
-    hoverBox.style.top = rect.top + "px";
-    hoverBox.style.width = rect.width + "px";
-    hoverBox.style.height = rect.height + "px";
-    hoverBox.style.display = "block";
-  } else {
-    hoverBox.style.display = "none";
-  }
-}
-function handleClick(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  const target = document.elementFromPoint(e.clientX, e.clientY);
-  if (!target || target === overlay || overlay?.contains(target)) return;
-  const rect = target.getBoundingClientRect();
-  highlights.push({ el: target, rect });
-  const marker = document.createElement("div");
-  marker.className = "cf-hl-marker";
-  marker.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;border:2px solid #ae2a19;background:rgba(174,42,25,0.12);z-index:100001;pointer-events:none;border-radius:3px;`;
-  const badge = document.createElement("div");
-  badge.style.cssText = "position:absolute;top:-10px;right:-10px;background:#ae2a19;color:#fff;width:20px;height:20px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-family:system-ui;font-weight:600;";
-  badge.textContent = String(highlights.length);
-  marker.appendChild(badge);
-  overlay?.appendChild(marker);
-  const doneBtn = document.getElementById("cf-hl-done");
-  if (doneBtn) doneBtn.textContent = `Done (${highlights.length})`;
-}
-function finishHighlighting() {
-  const annotations = highlights.map((h) => ({
-    selector: getSelector(h.el),
-    tagName: h.el.tagName.toLowerCase(),
-    text: h.el.textContent?.slice(0, 100) || void 0,
-    rect: { x: Math.round(h.rect.x), y: Math.round(h.rect.y), width: Math.round(h.rect.width), height: Math.round(h.rect.height) },
-    note: h.note
-  }));
-  cleanup();
-  onDoneCallback?.(annotations);
-}
-function cancelHighlighting() {
-  cleanup();
-  onDoneCallback?.([]);
-}
-function cleanup() {
-  if (hoverBox) {
-    hoverBox.remove();
-    hoverBox = null;
-  }
-  if (overlay) {
-    overlay.remove();
-    overlay = null;
-  }
-  highlights = [];
-  isActive = false;
-}
-function startHighlighting() {
-  return new Promise((resolve) => {
-    if (isActive) {
-      resolve([]);
-      return;
-    }
-    isActive = true;
-    highlights = [];
-    onDoneCallback = resolve;
-    createOverlay();
-  });
-}
 
 // src/index.ts
 var SDK_VERSION = "1.1.0";
@@ -527,10 +1880,7 @@ function init(cfg) {
   };
   if (!config.enabled) return;
   installInterceptors();
-  if (typeof window !== "undefined") {
-    loadHtml2Canvas().catch(() => {
-    });
-  }
+  installNetworkInterceptor();
   if (typeof window !== "undefined" && config.widget?.showOnInit !== false) {
     mountWidget(
       config.widget,
@@ -541,12 +1891,13 @@ function init(cfg) {
           type: data.type,
           priority: data.priority,
           screenshot_data: data.screenshot,
-          annotations: data.annotations
+          annotations: data.annotations,
+          reporter_name: data.reporter_name,
+          reporter_email: data.reporter_email
         });
       },
       {
-        onScreenshot: () => captureScreenshot(),
-        onHighlight: () => startHighlighting()
+        onScreenshot: () => captureScreenshot()
       }
     );
   }
@@ -559,6 +1910,7 @@ async function sendFeedback(data) {
   const perf = typeof window !== "undefined" ? collectPerformance() : void 0;
   const consoleLogs = getConsoleLogs();
   const jsErrors = getJavascriptErrors();
+  const networkLogs = getNetworkLogs();
   const payload = {
     ...data,
     ...context,
@@ -566,6 +1918,7 @@ async function sendFeedback(data) {
     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) {
@@ -574,6 +1927,12 @@ async function sendFeedback(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",
@@ -603,12 +1962,13 @@ function showWidget() {
         type: data.type,
         priority: data.priority,
         screenshot_data: data.screenshot,
-        annotations: data.annotations
+        annotations: data.annotations,
+        reporter_name: data.reporter_name,
+        reporter_email: data.reporter_email
       });
     },
     {
-      onScreenshot: () => captureScreenshot(),
-      onHighlight: () => startHighlighting()
+      onScreenshot: () => captureScreenshot()
     }
   );
 }
@@ -618,6 +1978,7 @@ function hideWidget() {
 function destroy() {
   unmountWidget();
   clearLogs();
+  clearNetworkLogs();
   clearScreenshot();
   config = null;
 }
@@ -628,6 +1989,5 @@ function destroy() {
   hideWidget,
   init,
   sendFeedback,
-  showWidget,
-  startHighlighting
+  showWidget
 });