@checkflow/sdk 1.1.4 → 1.1.5

package/dist/index.js

@@ -3,6 +3,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,408 +20,248 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  captureScreenshot: () => captureScreenshot,
-  destroy: () => destroy,
-  hideWidget: () => hideWidget,
-  init: () => init,
-  sendFeedback: () => sendFeedback,
-  showWidget: () => showWidget
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/collector.ts
-function collectContext() {
-  const ua = navigator.userAgent;
-  return {
-    url: window.location.href,
-    viewport: {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      device: window.innerWidth < 768 ? "mobile" : window.innerWidth < 1024 ? "tablet" : "desktop"
-    },
-    user_agent: ua,
-    browser: detectBrowser(ua),
-    os: detectOS(ua),
-    locale: navigator.language,
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
-  };
-}
-function collectPerformance() {
-  try {
-    const entries = performance.getEntriesByType("paint");
-    const metrics = {};
-    entries.forEach((e) => {
-      if (e.name === "first-contentful-paint") metrics.fcp = Math.round(e.startTime);
-    });
-    const nav = performance.getEntriesByType("navigation")[0];
-    if (nav) {
-      metrics.dom_load = Math.round(nav.domContentLoadedEventEnd - nav.startTime);
-      metrics.load = Math.round(nav.loadEventEnd - nav.startTime);
-    }
-    return Object.keys(metrics).length > 0 ? metrics : void 0;
-  } catch {
-    return void 0;
-  }
-}
-function detectBrowser(ua) {
-  if (ua.includes("Firefox/")) return "Firefox";
-  if (ua.includes("Edg/")) return "Edge";
-  if (ua.includes("Chrome/")) return "Chrome";
-  if (ua.includes("Safari/")) return "Safari";
-  return "Unknown";
-}
-function detectOS(ua) {
-  if (ua.includes("Windows")) return "Windows";
-  if (ua.includes("Mac OS")) return "macOS";
-  if (ua.includes("Linux")) return "Linux";
-  if (ua.includes("Android")) return "Android";
-  if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
-  return "Unknown";
-}
-
-// src/console-interceptor.ts
-var MAX_LOGS = 50;
-var logs = [];
-var errorsCapture = [];
-var installed = false;
-function installInterceptors() {
-  if (installed) return;
-  installed = true;
-  const origConsole = {
-    log: console.log,
-    warn: console.warn,
-    error: console.error
-  };
-  ["log", "warn", "error"].forEach((level) => {
-    console[level] = (...args) => {
-      logs.push({
-        level,
-        message: args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" "),
-        timestamp: Date.now()
-      });
-      if (logs.length > MAX_LOGS) logs.shift();
-      origConsole[level](...args);
+// 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"
     };
-  });
-  window.addEventListener("error", (event) => {
-    errorsCapture.push({
-      message: event.message,
-      filename: event.filename,
-      lineno: event.lineno,
-      colno: event.colno,
-      timestamp: Date.now()
-    });
-    if (errorsCapture.length > MAX_LOGS) errorsCapture.shift();
-  });
-  window.addEventListener("unhandledrejection", (event) => {
-    errorsCapture.push({
-      message: String(event.reason),
-      type: "unhandledrejection",
-      timestamp: Date.now()
-    });
-    if (errorsCapture.length > MAX_LOGS) errorsCapture.shift();
-  });
-}
-function getConsoleLogs() {
-  return [...logs];
-}
-function getJavascriptErrors() {
-  return [...errorsCapture];
-}
-function clearLogs() {
-  logs = [];
-  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
+    HIGHLIGHT_STYLE = {
+      strokeColor: "transparent",
+      fillColor: "#FFEB3B",
+      opacity: 0.4
     };
-    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];
+    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 = {
-  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();
+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.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);
+        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 = `
+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;
@@ -709,598 +552,595 @@ var STYLES = `
   }
 }
 `;
-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;
-}
+    stylesInjected = false;
+  }
+});
 
 // 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 = `
+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();
+        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());
       }
-    }
-    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":
+      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 {
-          id,
-          type: "blur",
-          bounds: this.createBounds(start, end),
-          style: { ...baseStyle, ...BLUR_STYLE },
-          blurAmount: 10,
-          timestamp: Date.now()
+          x: (e.clientX - rect.left) * scaleX,
+          y: (e.clientY - rect.top) * scaleY
         };
-      case "freehand":
+      }
+      getCanvasPointFromTouch(touch) {
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
         return {
-          id,
-          type: "freehand",
-          points: [...this.freehandPoints],
-          style: baseStyle,
-          timestamp: Date.now()
+          x: (touch.clientX - rect.left) * scaleX,
+          y: (touch.clientY - rect.top) * scaleY
         };
-      default:
+      }
+      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 {
-          id,
-          type: "rectangle",
-          bounds: this.createBounds(start, end),
-          style: baseStyle,
-          timestamp: Date.now()
+          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)
         };
-    }
-  }
-  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()
+      }
+      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.annotations.push(textAnnotation);
+        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();
       }
-      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;
+      save() {
+        const imageData = this.getAnnotatedImage();
+        this.config.onSave?.(this.annotations, imageData);
+        this.close();
       }
-    });
-  }
-  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();
+      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",
-  color: "#1e3a5f",
-  text: "Report Bug",
-  showOnInit: true
-};
-var container = null;
-var onSubmitCallback = null;
-var screenshotDataUrl = null;
-var annotatedImageUrl = null;
-var annotationsData = [];
-var isExpanded = false;
-var currentCfg = { ...DEFAULT_CONFIG };
+var widget_exports = {};
+__export(widget_exports, {
+  mountWidget: () => mountWidget,
+  openFeedbackModal: () => openFeedbackModal,
+  unmountWidget: () => unmountWidget
+});
 function mountWidget(config2 = {}, onSubmit, opts) {
   if (container) return;
   onSubmitCallback = onSubmit;
+  currentUser = opts?.user;
   const cfg = { ...DEFAULT_CONFIG, ...config2 };
   currentCfg = cfg;
   container = document.createElement("div");
@@ -1311,13 +1151,20 @@ function mountWidget(config2 = {}, onSubmit, opts) {
   const btn = container.querySelector("#cf-trigger");
   btn?.addEventListener("click", () => openModal(cfg, opts));
 }
+function openFeedbackModal(config2 = {}, onSubmit, opts) {
+  onSubmitCallback = onSubmit;
+  currentUser = opts?.user;
+  const cfg = { ...DEFAULT_CONFIG, ...config2 };
+  currentCfg = cfg;
+  injectStyles(cfg);
+  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;
+  return "cf-backdrop--corner cf-pos-" + (cfg.position || "bottom-right");
 }
 function openModal(cfg, opts) {
-  if (!container) return;
   const existing = document.getElementById("cf-modal-backdrop");
   if (existing) existing.remove();
   isExpanded = false;
@@ -1430,8 +1277,10 @@ function bindModalEvents(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;
+    const nameEl = backdrop.querySelector("#cf-name");
+    const emailEl = backdrop.querySelector("#cf-email");
+    const name = nameEl?.value || currentUser?.name;
+    const email = emailEl?.value || currentUser?.email;
     if (!desc?.trim()) {
       const descEl = backdrop.querySelector("#cf-desc");
       if (descEl) {
@@ -1473,33 +1322,93 @@ function showToast(msg) {
   setTimeout(() => toast.remove(), 3e3);
 }
 function injectStyles(cfg) {
+  const existingStyle = document.getElementById("cf-widget-styles");
+  if (existingStyle) existingStyle.remove();
+  const btn = cfg.button || {};
+  const sizePreset = SIZE_PRESETS[btn.size || "default"] || SIZE_PRESETS.default;
+  const variantPreset = VARIANT_PRESETS[btn.variant || "default"] || VARIANT_PRESETS.default;
+  const bgColor = btn.backgroundColor || cfg.color || variantPreset.bg;
+  const textColor = btn.textColor || variantPreset.color;
+  const borderRadius = btn.borderRadius || "8px";
+  const padding = btn.padding || sizePreset.padding;
+  const fontSize = btn.fontSize || sizePreset.fontSize;
+  const fontWeight = btn.fontWeight || "500";
+  const border = btn.border || variantPreset.border;
+  const boxShadow = btn.boxShadow || "0 2px 8px rgba(0,0,0,0.15)";
+  const primaryColor = cfg.color || "#1e3a5f";
   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); } }
 
+    /* User card styles */
+    .cf-user-card {
+      display:flex;
+      align-items:center;
+      gap:12px;
+      padding:12px;
+      background:#f8f9fa;
+      border-radius:10px;
+      margin-bottom:4px;
+    }
+    .cf-user-avatar {
+      width:40px;
+      height:40px;
+      border-radius:50%;
+      object-fit:cover;
+    }
+    .cf-user-avatar-placeholder {
+      width:40px;
+      height:40px;
+      border-radius:50%;
+      background:${primaryColor};
+      color:#fff;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      font-size:16px;
+      font-weight:600;
+    }
+    .cf-user-info {
+      flex:1;
+      min-width:0;
+    }
+    .cf-user-name {
+      font-size:14px;
+      font-weight:600;
+      color:#1a1a2e;
+    }
+    .cf-user-email {
+      font-size:12px;
+      color:#666;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+    }
+
+    /* Trigger button - now inline, not fixed position */
     #cf-trigger {
       position:fixed;
-      ${getPositionCSS(cfg.position)}
+      ${getPositionCSS(cfg.position || "bottom-right")}
       z-index:100000;
-      background:${cfg.color};
-      color:#fff;
-      border:none;
-      border-radius:50px;
-      padding:11px 20px;
-      font-size:14px;
-      font-weight:500;
+      background:${bgColor};
+      color:${textColor};
+      border:${border};
+      border-radius:${borderRadius};
+      padding:${padding};
+      font-size:${fontSize};
+      font-weight:${fontWeight};
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       cursor:pointer;
-      box-shadow:0 4px 16px rgba(0,0,0,.18);
-      display:flex;
+      box-shadow:${boxShadow};
+      display:inline-flex;
       align-items:center;
       gap:8px;
-      transition:transform .15s,box-shadow .15s;
+      transition:transform .15s,box-shadow .15s,opacity .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-trigger:hover { opacity:0.9; }
+    #cf-trigger svg { width:16px; height:16px; flex-shrink:0; }
 
     #cf-modal-backdrop {
       position:fixed;
@@ -1600,7 +1509,7 @@ function injectStyles(cfg) {
       transition:all .15s;
     }
     .cf-tool-highlight {
-      background:${cfg.color};
+      background:${primaryColor};
       color:#fff;
     }
     .cf-tool-highlight:hover { opacity:.9; }
@@ -1648,8 +1557,8 @@ function injectStyles(cfg) {
     }
     .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;
+      border-color:${primaryColor};
+      box-shadow:0 0 0 3px ${primaryColor}18;
     }
     .cf-field textarea { resize:vertical; min-height:100px; }
 
@@ -1688,7 +1597,7 @@ function injectStyles(cfg) {
       padding:13px;
       border:none;
       border-radius:10px;
-      background:${cfg.color};
+      background:${primaryColor};
       color:#fff;
       font-size:15px;
       font-weight:600;
@@ -1696,7 +1605,7 @@ function injectStyles(cfg) {
       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:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 4px 12px ${primaryColor}40; }
     .cf-submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
 
     .cf-cancel-btn {
@@ -1727,7 +1636,7 @@ function injectStyles(cfg) {
       text-decoration:none;
       font-weight:500;
     }
-    .cf-footer a:hover { color:${cfg.color}; }
+    .cf-footer a:hover { color:${primaryColor}; }
   `;
   document.head.appendChild(style);
 }
@@ -1746,10 +1655,15 @@ function getPositionCSS(pos) {
   }
 }
 function getTriggerHTML(cfg) {
+  const btn = cfg.button || {};
+  const text = btn.text || cfg.text || "Report Bug";
+  const showIcon = btn.showIcon !== false;
+  const customClass = btn.className || "";
+  const icon = showIcon ? `<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>` : "";
   return `
-    <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 id="cf-trigger" class="${customClass}">
+      ${icon}
+      ${text}
     </button>
   `;
 }
@@ -1758,15 +1672,29 @@ function getCheckflowLogo() {
 }
 function getModalHTML(cfg, expanded) {
   const modalClass = expanded ? "cf-modal cf-modal--expanded" : "cf-modal cf-modal--compact";
-  const formFields = `
+  const hasUser = currentUser && (currentUser.name || currentUser.email);
+  const userInfoCard = hasUser ? `
+    <div class="cf-user-card">
+      ${currentUser?.avatar ? `<img class="cf-user-avatar" src="${currentUser.avatar}" alt="${currentUser.name || "User"}" />` : `<div class="cf-user-avatar-placeholder">${(currentUser?.name || currentUser?.email || "U").charAt(0).toUpperCase()}</div>`}
+      <div class="cf-user-info">
+        ${currentUser?.name ? `<div class="cf-user-name">${currentUser.name}</div>` : ""}
+        ${currentUser?.email ? `<div class="cf-user-email">${currentUser.email}</div>` : ""}
+      </div>
+    </div>
+  ` : "";
+  const nameEmailFields = hasUser ? "" : `
     <div class="cf-field">
-      <label>Nom <span>(obligatoire)</span></label>
+      <label>Nom <span>(optionnel)</span></label>
       <input id="cf-name" type="text" placeholder="Votre nom" />
     </div>
     <div class="cf-field">
-      <label>Email <span>(obligatoire)</span></label>
+      <label>Email <span>(optionnel)</span></label>
       <input id="cf-email" type="email" placeholder="votre.email@exemple.com" />
     </div>
+  `;
+  const formFields = `
+    ${userInfoCard}
+    ${nameEmailFields}
     <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>
@@ -1815,6 +1743,246 @@ function getModalHTML(cfg, expanded) {
     </div>
   `;
 }
+var DEFAULT_BUTTON_CONFIG, SIZE_PRESETS, VARIANT_PRESETS, DEFAULT_CONFIG, container, onSubmitCallback, screenshotDataUrl, annotatedImageUrl, annotationsData, isExpanded, currentCfg, currentUser;
+var init_widget = __esm({
+  "src/widget.ts"() {
+    "use strict";
+    init_editor();
+    DEFAULT_BUTTON_CONFIG = {
+      text: "Report Bug",
+      backgroundColor: "#1e3a5f",
+      textColor: "#ffffff",
+      borderRadius: "8px",
+      padding: "10px 18px",
+      fontSize: "14px",
+      fontWeight: "500",
+      border: "none",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      className: "",
+      showIcon: true,
+      size: "default",
+      variant: "default"
+    };
+    SIZE_PRESETS = {
+      xs: { padding: "6px 10px", fontSize: "12px" },
+      sm: { padding: "8px 14px", fontSize: "13px" },
+      default: { padding: "10px 18px", fontSize: "14px" },
+      lg: { padding: "12px 24px", fontSize: "15px" }
+    };
+    VARIANT_PRESETS = {
+      default: { bg: "#1e3a5f", color: "#ffffff", border: "none" },
+      outline: { bg: "transparent", color: "#1e3a5f", border: "1px solid #1e3a5f" },
+      ghost: { bg: "transparent", color: "#1e3a5f", border: "none" },
+      link: { bg: "transparent", color: "#1e3a5f", border: "none" }
+    };
+    DEFAULT_CONFIG = {
+      position: "bottom-right",
+      color: "#1e3a5f",
+      text: "Report Bug",
+      showOnInit: true,
+      button: DEFAULT_BUTTON_CONFIG
+    };
+    container = null;
+    onSubmitCallback = null;
+    screenshotDataUrl = null;
+    annotatedImageUrl = null;
+    annotationsData = [];
+    isExpanded = false;
+    currentCfg = { ...DEFAULT_CONFIG };
+    currentUser = void 0;
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  captureScreenshot: () => captureScreenshot,
+  clearUser: () => clearUser,
+  destroy: () => destroy,
+  hideWidget: () => hideWidget,
+  init: () => init,
+  openFeedbackModal: () => openFeedbackModal2,
+  sendFeedback: () => sendFeedback,
+  setUser: () => setUser,
+  showWidget: () => showWidget
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/collector.ts
+function collectContext() {
+  const ua = navigator.userAgent;
+  return {
+    url: window.location.href,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      device: window.innerWidth < 768 ? "mobile" : window.innerWidth < 1024 ? "tablet" : "desktop"
+    },
+    user_agent: ua,
+    browser: detectBrowser(ua),
+    os: detectOS(ua),
+    locale: navigator.language,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+  };
+}
+function collectPerformance() {
+  try {
+    const entries = performance.getEntriesByType("paint");
+    const metrics = {};
+    entries.forEach((e) => {
+      if (e.name === "first-contentful-paint") metrics.fcp = Math.round(e.startTime);
+    });
+    const nav = performance.getEntriesByType("navigation")[0];
+    if (nav) {
+      metrics.dom_load = Math.round(nav.domContentLoadedEventEnd - nav.startTime);
+      metrics.load = Math.round(nav.loadEventEnd - nav.startTime);
+    }
+    return Object.keys(metrics).length > 0 ? metrics : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function detectBrowser(ua) {
+  if (ua.includes("Firefox/")) return "Firefox";
+  if (ua.includes("Edg/")) return "Edge";
+  if (ua.includes("Chrome/")) return "Chrome";
+  if (ua.includes("Safari/")) return "Safari";
+  return "Unknown";
+}
+function detectOS(ua) {
+  if (ua.includes("Windows")) return "Windows";
+  if (ua.includes("Mac OS")) return "macOS";
+  if (ua.includes("Linux")) return "Linux";
+  if (ua.includes("Android")) return "Android";
+  if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
+  return "Unknown";
+}
+
+// src/console-interceptor.ts
+var MAX_LOGS = 50;
+var logs = [];
+var errorsCapture = [];
+var installed = false;
+function installInterceptors() {
+  if (installed) return;
+  installed = true;
+  const origConsole = {
+    log: console.log,
+    warn: console.warn,
+    error: console.error
+  };
+  ["log", "warn", "error"].forEach((level) => {
+    console[level] = (...args) => {
+      logs.push({
+        level,
+        message: args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" "),
+        timestamp: Date.now()
+      });
+      if (logs.length > MAX_LOGS) logs.shift();
+      origConsole[level](...args);
+    };
+  });
+  window.addEventListener("error", (event) => {
+    errorsCapture.push({
+      message: event.message,
+      filename: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      timestamp: Date.now()
+    });
+    if (errorsCapture.length > MAX_LOGS) errorsCapture.shift();
+  });
+  window.addEventListener("unhandledrejection", (event) => {
+    errorsCapture.push({
+      message: String(event.reason),
+      type: "unhandledrejection",
+      timestamp: Date.now()
+    });
+    if (errorsCapture.length > MAX_LOGS) errorsCapture.shift();
+  });
+}
+function getConsoleLogs() {
+  return [...logs];
+}
+function getJavascriptErrors() {
+  return [...errorsCapture];
+}
+function clearLogs() {
+  logs = [];
+  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/index.ts
+init_widget();
 
 // src/screenshot.ts
 var screenshotData = null;
@@ -1897,7 +2065,8 @@ function init(cfg) {
         });
       },
       {
-        onScreenshot: () => captureScreenshot()
+        onScreenshot: () => captureScreenshot(),
+        user: config.user
       }
     );
   }
@@ -1927,12 +2096,22 @@ async function sendFeedback(data) {
   if (data.annotations && data.annotations.length > 0) {
     payload.annotations = data.annotations;
   }
-  if (data.reporter_name) {
+  if (config.user?.name) {
+    payload.reporter_name = config.user.name;
+  } else if (data.reporter_name) {
     payload.reporter_name = data.reporter_name;
   }
-  if (data.reporter_email) {
+  if (config.user?.email) {
+    payload.reporter_email = config.user.email;
+  } else if (data.reporter_email) {
     payload.reporter_email = data.reporter_email;
   }
+  if (config.user?.id) {
+    payload.user_id = config.user.id;
+  }
+  if (config.user?.avatar) {
+    payload.user_avatar = config.user.avatar;
+  }
   try {
     const res = await fetch(`${config.endpoint}/sdk/feedback`, {
       method: "POST",
@@ -1968,10 +2147,45 @@ function showWidget() {
       });
     },
     {
-      onScreenshot: () => captureScreenshot()
+      onScreenshot: () => captureScreenshot(),
+      user: config.user
     }
   );
 }
+function setUser(user) {
+  if (config) {
+    config.user = user;
+  }
+}
+function clearUser() {
+  if (config) {
+    config.user = void 0;
+  }
+}
+function openFeedbackModal2() {
+  if (!config) return;
+  Promise.resolve().then(() => (init_widget(), widget_exports)).then(({ openFeedbackModal: openModal2 }) => {
+    openModal2(
+      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(),
+        user: config.user
+      }
+    );
+  });
+}
 function hideWidget() {
   unmountWidget();
 }
@@ -1985,9 +2199,12 @@ function destroy() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   captureScreenshot,
+  clearUser,
   destroy,
   hideWidget,
   init,
+  openFeedbackModal,
   sendFeedback,
+  setUser,
   showWidget
 });