@mhosaic/feedback 0.5.4 → 0.6.1

package/dist/chunk-LGGKJPFH.mjs

@@ -0,0 +1,1680 @@
+// src/api/client.ts
+var SCALAR_FIELDS = [
+  "description",
+  "feedback_type",
+  "severity",
+  "env",
+  "page_url",
+  "user_agent",
+  "capture_method"
+];
+function createApiClient(options) {
+  const endpoint = (options.endpoint ?? "").replace(/\/+$/, "");
+  if (!endpoint) {
+    throw new Error(
+      '[mhosaic-feedback] `endpoint` is required (e.g. "https://feedback.example.com").'
+    );
+  }
+  const fetcher = options.fetch ?? globalThis.fetch;
+  async function submitReport(input) {
+    let payload = input;
+    if (options.beforeSend) payload = await options.beforeSend(input);
+    if (payload === false) throw new Error("Submission cancelled by beforeSend");
+    const form = new FormData();
+    for (const field of SCALAR_FIELDS) {
+      form.append(field, String(payload[field]));
+    }
+    form.append("technical_context", JSON.stringify(payload.technical_context));
+    if (payload.screenshot) form.append("screenshot", payload.screenshot, "screenshot.png");
+    if (payload.synthetic) form.append("synthetic", "true");
+    const response = await fetcher(`${endpoint}/api/feedback/v1/reports/`, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${options.apiKey}` },
+      body: form
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`Feedback submit failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  return { submitReport };
+}
+
+// src/capture/urlSanitizer.ts
+var SENSITIVE = /token|key|password|secret|auth|session|sig/i;
+function sanitizeUrl(url) {
+  try {
+    const isAbsolute = /^https?:\/\//i.test(url);
+    const isRootRelative = url.startsWith("/");
+    if (!isAbsolute && !isRootRelative) return url;
+    const base = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+    const u = new URL(url, base);
+    const clean = new URLSearchParams();
+    u.searchParams.forEach((value, name) => {
+      clean.set(name, SENSITIVE.test(name) ? "[redacted]" : value);
+    });
+    u.search = clean.toString();
+    return u.toString();
+  } catch {
+    return url;
+  }
+}
+
+// src/capture/device.ts
+function collectDevice() {
+  const nav = navigator;
+  const connection = nav.connection?.effectiveType;
+  const deviceMemory = nav.deviceMemory;
+  const referrer = document.referrer || void 0;
+  return {
+    viewport: { w: window.innerWidth, h: window.innerHeight, dpr: window.devicePixelRatio || 1 },
+    screen: { w: window.screen.width, h: window.screen.height },
+    platform: nav.platform,
+    language: nav.language,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    timezoneOffset: (/* @__PURE__ */ new Date()).getTimezoneOffset(),
+    ...connection !== void 0 && { connection },
+    online: nav.onLine,
+    ...deviceMemory !== void 0 && { deviceMemory },
+    hardwareConcurrency: nav.hardwareConcurrency,
+    ...referrer !== void 0 && { referrer },
+    title: document.title,
+    pathname: window.location.pathname
+  };
+}
+
+// src/capture/console.ts
+function safeStringify(arg) {
+  if (arg == null) return String(arg);
+  if (typeof arg === "string") return arg;
+  if (typeof arg === "number" || typeof arg === "boolean") return String(arg);
+  if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
+  if (arg instanceof Element) return `<${arg.tagName.toLowerCase()}>`;
+  try {
+    return JSON.stringify(arg, (_k, v) => typeof v === "bigint" ? v.toString() : v);
+  } catch {
+    try {
+      return String(arg);
+    } catch {
+      return "[unserializable]";
+    }
+  }
+}
+function installConsolePatch(buffer) {
+  const levels = ["log", "info", "warn", "error", "debug"];
+  const originals = {};
+  for (const level of levels) {
+    const original = console[level];
+    if (typeof original !== "function") continue;
+    originals[level] = original;
+    console[level] = function patched(...args) {
+      try {
+        const message = args.map(safeStringify).join(" ").slice(0, 2e3);
+        const entry = { level, message, ts: Date.now() };
+        if (level === "error") {
+          const stack = new Error().stack;
+          if (stack) entry.stack = stack.split("\n").slice(2, 8).join("\n");
+        }
+        buffer.push(entry);
+      } catch {
+      }
+      original.apply(console, args);
+    };
+  }
+  return () => {
+    for (const [level, fn] of Object.entries(originals)) {
+      console[level] = fn;
+    }
+  };
+}
+
+// src/capture/network.ts
+function installFetchPatch(buffer, sanitize) {
+  if (typeof window === "undefined" || typeof window.fetch !== "function") return () => {
+  };
+  const original = window.fetch.bind(window);
+  window.fetch = async function patched(input, init) {
+    const start = performance.now();
+    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    const method = (init?.method || (input instanceof Request ? input.method : "GET")).toUpperCase();
+    try {
+      const response = await original(input, init);
+      buffer.push({ url: sanitize(url), method, status: response.status, durationMs: Math.round(performance.now() - start), ts: Date.now() });
+      return response;
+    } catch (err) {
+      buffer.push({
+        url: sanitize(url),
+        method,
+        status: 0,
+        durationMs: Math.round(performance.now() - start),
+        ts: Date.now(),
+        error: err instanceof Error ? err.message : String(err)
+      });
+      throw err;
+    }
+  };
+  return () => {
+    window.fetch = original;
+  };
+}
+function installXhrPatch(buffer, sanitize) {
+  if (typeof window === "undefined" || typeof window.XMLHttpRequest !== "function") return () => {
+  };
+  const Original = window.XMLHttpRequest;
+  const originalOpen = Original.prototype.open;
+  const originalSend = Original.prototype.send;
+  Original.prototype.open = function patchedOpen(method, url) {
+    this.__mfb = { method: method.toUpperCase(), url: typeof url === "string" ? url : url.toString(), start: performance.now() };
+    return originalOpen.apply(this, arguments);
+  };
+  Original.prototype.send = function patchedSend(body) {
+    this.addEventListener("loadend", () => {
+      try {
+        const ctx = this.__mfb;
+        if (!ctx) return;
+        buffer.push({
+          url: sanitize(ctx.url),
+          method: ctx.method,
+          status: this.status,
+          durationMs: Math.round(performance.now() - ctx.start),
+          ts: Date.now()
+        });
+      } catch {
+      }
+    });
+    return originalSend.call(this, body ?? null);
+  };
+  return () => {
+    Original.prototype.open = originalOpen;
+    Original.prototype.send = originalSend;
+  };
+}
+
+// src/capture/errors.ts
+function installErrorHandlers(buffer) {
+  if (typeof window === "undefined") return () => {
+  };
+  const onError = (e) => {
+    const stack = e.error instanceof Error ? e.error.stack : void 0;
+    buffer.push({
+      message: e.message || "Unknown error",
+      ...stack !== void 0 && { stack },
+      ts: Date.now(),
+      source: "window.error"
+    });
+  };
+  const onRejection = (e) => {
+    const reason = e.reason;
+    const message = reason instanceof Error ? reason.message : typeof reason === "string" ? reason : (() => {
+      try {
+        return JSON.stringify(reason);
+      } catch {
+        return String(reason);
+      }
+    })();
+    const stack = reason instanceof Error ? reason.stack : void 0;
+    buffer.push({
+      message,
+      ...stack !== void 0 && { stack },
+      ts: Date.now(),
+      source: "unhandledrejection"
+    });
+  };
+  window.addEventListener("error", onError);
+  window.addEventListener("unhandledrejection", onRejection);
+  return () => {
+    window.removeEventListener("error", onError);
+    window.removeEventListener("unhandledrejection", onRejection);
+  };
+}
+
+// src/capture/performance.ts
+function createPerformanceCollector(slowResourceMs = 1e3) {
+  const longTasks = [];
+  const slowResources = [];
+  let observer = null;
+  if (typeof PerformanceObserver !== "undefined") {
+    try {
+      observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.entryType === "longtask") {
+            longTasks.push({ duration: entry.duration, startTime: entry.startTime });
+            while (longTasks.length > 20) longTasks.shift();
+          } else if (entry.entryType === "resource") {
+            const e = entry;
+            if (e.duration > slowResourceMs) {
+              slowResources.push({ name: e.name, duration: e.duration, initiatorType: e.initiatorType });
+              while (slowResources.length > 20) slowResources.shift();
+            }
+          }
+        }
+      });
+      observer.observe({ entryTypes: ["longtask", "resource"] });
+    } catch {
+    }
+  }
+  return {
+    snapshot() {
+      const nav = typeof performance !== "undefined" ? performance.getEntriesByType("navigation")[0] : void 0;
+      const navigation = nav ? { type: nav.type, duration: nav.duration } : void 0;
+      return {
+        ...navigation !== void 0 && { navigation },
+        longTasks: longTasks.slice(),
+        slowResources: slowResources.slice()
+      };
+    },
+    dispose() {
+      observer?.disconnect();
+    }
+  };
+}
+
+// src/capture/ringBuffer.ts
+var RingBuffer = class {
+  constructor(max) {
+    this.max = max;
+  }
+  max;
+  items = [];
+  push(item) {
+    this.items.push(item);
+    while (this.items.length > this.max) this.items.shift();
+  }
+  snapshot() {
+    return this.items.slice();
+  }
+  clear() {
+    this.items.length = 0;
+  }
+};
+
+// src/capture/index.ts
+function installCapture(options = {}) {
+  const { maxConsole = 50, maxNetwork = 50, maxErrors = 20 } = options;
+  const sanitize = options.sanitizeUrl ?? sanitizeUrl;
+  const consoleBuf = new RingBuffer(maxConsole);
+  const networkBuf = new RingBuffer(maxNetwork);
+  const errorBuf = new RingBuffer(maxErrors);
+  const uninstallConsole = installConsolePatch(consoleBuf);
+  const uninstallFetch = installFetchPatch(networkBuf, sanitize);
+  const uninstallXhr = installXhrPatch(networkBuf, sanitize);
+  const uninstallErrors = installErrorHandlers(errorBuf);
+  const perf = createPerformanceCollector();
+  return {
+    snapshot() {
+      return {
+        consoleLogs: consoleBuf.snapshot(),
+        networkRequests: networkBuf.snapshot(),
+        errors: errorBuf.snapshot(),
+        device: collectDevice(),
+        capturedAt: Date.now()
+      };
+    },
+    clear() {
+      consoleBuf.clear();
+      networkBuf.clear();
+      errorBuf.clear();
+    },
+    dispose() {
+      uninstallConsole();
+      uninstallFetch();
+      uninstallXhr();
+      uninstallErrors();
+      perf.dispose();
+    }
+  };
+}
+
+// src/screenshot/index.ts
+function isMaskedElement(el) {
+  return el.hasAttribute("data-mfb-mask") || el.classList.contains("mfb-mask");
+}
+function prepareMaskMatcher(selectors) {
+  const joined = selectors.join(",").trim();
+  if (!joined) return isMaskedElement;
+  return (el) => isMaskedElement(el) || el.matches(joined);
+}
+async function takeScreenshot(target, options = {}) {
+  if (typeof document === "undefined") return null;
+  try {
+    const html2canvas = (await import("html2canvas-pro")).default;
+    const matcher = prepareMaskMatcher(options.mask ?? []);
+    const canvas = await html2canvas(target, {
+      ignoreElements: (el) => matcher(el),
+      useCORS: true,
+      logging: false,
+      backgroundColor: null
+    });
+    return await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  } catch {
+    return null;
+  }
+}
+
+// src/widget/i18n.ts
+var DEFAULT_STRINGS = {
+  "fab.label": "Send feedback",
+  "form.title": "Send feedback",
+  "form.description.label": "What happened?",
+  "form.description.placeholder": "Describe the issue or idea in one or two sentences.",
+  "form.type.label": "Type",
+  "form.severity.label": "Severity",
+  "form.submit": "Send",
+  "form.cancel": "Cancel",
+  "form.close": "Close",
+  "form.submitting": "Sending\u2026",
+  "form.success": "Thanks \u2014 your feedback was sent.",
+  "form.error": "Could not send. Please try again.",
+  "form.screenshot.label": "Screenshot",
+  "form.screenshot.cta_click": "Click",
+  "form.screenshot.cta_rest": "drop, or paste an image",
+  "form.screenshot.formats": "PNG, JPEG or WebP \u2014 up to 10 MB",
+  "form.screenshot.remove": "Remove screenshot",
+  "form.screenshot.annotate": "Annotate",
+  "form.screenshot.error_type": "Unsupported file type. Use PNG, JPEG or WebP.",
+  "form.screenshot.error_size": "File too large (max {max} MB).",
+  "form.context.label": "Page",
+  "type.bug": "Bug",
+  "type.feature": "Feature request",
+  "type.question": "Question",
+  "type.praise": "Praise",
+  "type.typo": "Typo",
+  "severity.blocker": "Blocker",
+  "severity.high": "High",
+  "severity.medium": "Medium",
+  "severity.low": "Low",
+  "annotator.title": "Annotate screenshot",
+  "annotator.tool.rectangle": "Rectangle",
+  "annotator.tool.arrow": "Arrow",
+  "annotator.tool.freehand": "Freehand",
+  "annotator.tool.text": "Text",
+  "annotator.text_prompt": "Enter text:",
+  "annotator.undo": "Undo",
+  "annotator.clear": "Clear all",
+  "annotator.count_suffix": "annotations",
+  "annotator.loading": "Loading\u2026",
+  "annotator.apply": "Apply",
+  "annotator.applying": "Applying\u2026"
+};
+var FRENCH_STRINGS = {
+  "fab.label": "Envoyer un commentaire",
+  "form.title": "Envoyer un commentaire",
+  "form.description.label": "Qu\u2019est-il arriv\xE9 ?",
+  "form.description.placeholder": "D\xE9crivez le probl\xE8me ou l\u2019id\xE9e en une ou deux phrases.",
+  "form.type.label": "Type",
+  "form.severity.label": "S\xE9v\xE9rit\xE9",
+  "form.submit": "Envoyer",
+  "form.cancel": "Annuler",
+  "form.close": "Fermer",
+  "form.submitting": "Envoi\u2026",
+  "form.success": "Merci \u2014 votre commentaire a \xE9t\xE9 envoy\xE9.",
+  "form.error": "\xC9chec d\u2019envoi. Veuillez r\xE9essayer.",
+  "form.screenshot.label": "Capture d\u2019\xE9cran",
+  "form.screenshot.cta_click": "Cliquez",
+  "form.screenshot.cta_rest": "d\xE9posez ou collez une image",
+  "form.screenshot.formats": "PNG, JPEG ou WebP \u2014 jusqu\u2019\xE0 10 Mo",
+  "form.screenshot.remove": "Retirer la capture",
+  "form.screenshot.annotate": "Annoter",
+  "form.screenshot.error_type": "Format non support\xE9. Utilisez PNG, JPEG ou WebP.",
+  "form.screenshot.error_size": "Fichier trop volumineux (max {max} Mo).",
+  "form.context.label": "Page",
+  "type.bug": "Bogue",
+  "type.feature": "Suggestion",
+  "type.question": "Question",
+  "type.praise": "Compliment",
+  "type.typo": "Coquille",
+  "severity.blocker": "Bloquant",
+  "severity.high": "\xC9lev\xE9e",
+  "severity.medium": "Moyenne",
+  "severity.low": "Faible",
+  "annotator.title": "Annoter la capture",
+  "annotator.tool.rectangle": "Rectangle",
+  "annotator.tool.arrow": "Fl\xE8che",
+  "annotator.tool.freehand": "Dessin libre",
+  "annotator.tool.text": "Texte",
+  "annotator.text_prompt": "Entrez le texte :",
+  "annotator.undo": "Annuler",
+  "annotator.clear": "Tout effacer",
+  "annotator.count_suffix": "annotations",
+  "annotator.loading": "Chargement\u2026",
+  "annotator.apply": "Appliquer",
+  "annotator.applying": "Application\u2026"
+};
+var LOCALE_PACKS = {
+  fr: FRENCH_STRINGS
+};
+function packFor(locale) {
+  if (!locale) return null;
+  const tag = locale.toLowerCase().split(/[-_]/)[0];
+  return LOCALE_PACKS[tag] ?? null;
+}
+function resolveStrings(overrides, options = {}) {
+  const localePack = packFor(options.locale) ?? {};
+  return {
+    ...DEFAULT_STRINGS,
+    ...localePack,
+    ...overrides
+  };
+}
+
+// src/widget/mount.tsx
+import { h, render } from "preact";
+import { useCallback } from "preact/hooks";
+
+// src/widget/Fab.tsx
+import { jsx } from "preact/jsx-runtime";
+function Fab({ label, onClick }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", class: "fab", "aria-label": label, onClick, children: "\u{1F4AC}" });
+}
+
+// src/widget/Form.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "preact/hooks";
+
+// src/widget/Annotator.tsx
+import { useEffect, useRef, useState } from "preact/hooks";
+import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
+var COLORS = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#ffffff"];
+function drawShape(ctx, shape) {
+  ctx.save();
+  ctx.strokeStyle = shape.color;
+  ctx.fillStyle = shape.color;
+  ctx.lineWidth = shape.lineWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  if (shape.kind === "rectangle") {
+    ctx.strokeRect(shape.x, shape.y, shape.w, shape.h);
+  } else if (shape.kind === "arrow") {
+    drawArrow(ctx, shape.x1, shape.y1, shape.x2, shape.y2);
+  } else if (shape.kind === "freehand") {
+    if (shape.points.length < 2) {
+      ctx.restore();
+      return;
+    }
+    ctx.beginPath();
+    ctx.moveTo(shape.points[0].x, shape.points[0].y);
+    for (let i = 1; i < shape.points.length; i++) {
+      ctx.lineTo(shape.points[i].x, shape.points[i].y);
+    }
+    ctx.stroke();
+  } else if (shape.kind === "text") {
+    ctx.font = `bold ${shape.fontSize}px -apple-system, BlinkMacSystemFont, sans-serif`;
+    ctx.textBaseline = "top";
+    const metrics = ctx.measureText(shape.text);
+    const padding = 4;
+    const w = metrics.width + padding * 2;
+    const hh = shape.fontSize + padding * 2;
+    ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+    ctx.fillRect(shape.x - padding, shape.y - padding, w, hh);
+    ctx.fillStyle = shape.color;
+    ctx.fillText(shape.text, shape.x, shape.y);
+  }
+  ctx.restore();
+}
+function drawArrow(ctx, x1, y1, x2, y2) {
+  const headLen = 14;
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(
+    x2 - headLen * Math.cos(angle - Math.PI / 6),
+    y2 - headLen * Math.sin(angle - Math.PI / 6)
+  );
+  ctx.lineTo(
+    x2 - headLen * Math.cos(angle + Math.PI / 6),
+    y2 - headLen * Math.sin(angle + Math.PI / 6)
+  );
+  ctx.closePath();
+  ctx.fill();
+}
+var Icon = {
+  rect: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("rect", { x: "2", y: "3", width: "12", height: "10", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }) }),
+  arrow: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M2 8h11M9 4l4 4-4 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  pencil: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }) }),
+  text: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M3 3h10M8 3v10M5 13h6", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }),
+  undo: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M4 7l3-3M4 7l3 3M4 7h6a3 3 0 0 1 0 6H7", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  trash: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M3 4h10M6 4V2.5h4V4M5 4l.5 9h5L11 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  close: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M4 4l8 8M12 4l-8 8", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) })
+};
+function Annotator({ imageBlob, strings, onSave, onCancel }) {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const imageRef = useRef(null);
+  const [tool, setTool] = useState("rectangle");
+  const [color, setColor] = useState(COLORS[0]);
+  const [shapes, setShapes] = useState([]);
+  const isDrawingRef = useRef(false);
+  const [draftShape, setDraftShape] = useState(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const scaleRef = useRef(1);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+  useEffect(() => {
+    const url = URL.createObjectURL(imageBlob);
+    const img = new Image();
+    img.onload = () => {
+      imageRef.current = img;
+      setImageLoaded(true);
+    };
+    img.src = url;
+    return () => URL.revokeObjectURL(url);
+  }, [imageBlob]);
+  useEffect(() => {
+    if (!imageLoaded || !canvasRef.current || !imageRef.current || !containerRef.current) {
+      return;
+    }
+    const img = imageRef.current;
+    const container = containerRef.current;
+    const maxW = container.clientWidth - 16;
+    const maxH = window.innerHeight * 0.6;
+    const fitScale = Math.min(maxW / img.width, maxH / img.height, 1);
+    scaleRef.current = fitScale;
+    const canvas = canvasRef.current;
+    canvas.width = img.width;
+    canvas.height = img.height;
+    canvas.style.width = `${img.width * fitScale}px`;
+    canvas.style.height = `${img.height * fitScale}px`;
+    redraw();
+  }, [imageLoaded]);
+  useEffect(() => {
+    redraw();
+  }, [shapes, draftShape]);
+  function redraw() {
+    const canvas = canvasRef.current;
+    const img = imageRef.current;
+    if (!canvas || !img) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0);
+    for (const s of shapes) drawShape(ctx, s);
+    if (draftShape) drawShape(ctx, draftShape);
+  }
+  function getCanvasCoords(e) {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: (e.clientX - rect.left) / scaleRef.current,
+      y: (e.clientY - rect.top) / scaleRef.current
+    };
+  }
+  const handleMouseDown = (e) => {
+    if (!imageLoaded) return;
+    const { x, y } = getCanvasCoords(e);
+    const lineWidth = Math.max(3, Math.round(canvasRef.current.width / 400));
+    if (tool === "text") {
+      const text = window.prompt(strings["annotator.text_prompt"]);
+      if (text && text.trim()) {
+        setShapes((prev) => [
+          ...prev,
+          {
+            kind: "text",
+            x,
+            y,
+            text: text.trim(),
+            color,
+            fontSize: Math.max(16, Math.round(canvasRef.current.width / 50)),
+            lineWidth: 1
+          }
+        ]);
+      }
+      return;
+    }
+    isDrawingRef.current = true;
+    if (tool === "rectangle") {
+      setDraftShape({ kind: "rectangle", x, y, w: 0, h: 0, color, lineWidth });
+    } else if (tool === "arrow") {
+      setDraftShape({ kind: "arrow", x1: x, y1: y, x2: x, y2: y, color, lineWidth });
+    } else if (tool === "freehand") {
+      setDraftShape({ kind: "freehand", points: [{ x, y }], color, lineWidth });
+    }
+  };
+  const handleMouseMove = (e) => {
+    if (!isDrawingRef.current || !draftShape) return;
+    const { x, y } = getCanvasCoords(e);
+    if (draftShape.kind === "rectangle") {
+      setDraftShape({ ...draftShape, w: x - draftShape.x, h: y - draftShape.y });
+    } else if (draftShape.kind === "arrow") {
+      setDraftShape({ ...draftShape, x2: x, y2: y });
+    } else if (draftShape.kind === "freehand") {
+      setDraftShape({ ...draftShape, points: [...draftShape.points, { x, y }] });
+    }
+  };
+  const handleMouseUp = () => {
+    if (isDrawingRef.current && draftShape) {
+      const isTiny = draftShape.kind === "rectangle" && Math.abs(draftShape.w) < 4 && Math.abs(draftShape.h) < 4 || draftShape.kind === "arrow" && Math.hypot(
+        draftShape.x2 - draftShape.x1,
+        draftShape.y2 - draftShape.y1
+      ) < 4 || draftShape.kind === "freehand" && draftShape.points.length < 3;
+      if (!isTiny) {
+        setShapes((prev) => [...prev, draftShape]);
+      }
+    }
+    isDrawingRef.current = false;
+    setDraftShape(null);
+  };
+  const handleSave = async () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    setSaving(true);
+    try {
+      const blob = await new Promise(
+        (resolve) => canvas.toBlob(resolve, "image/png", 0.92)
+      );
+      if (blob) onSave(blob);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const tools = [
+    { id: "rectangle", icon: Icon.rect, label: strings["annotator.tool.rectangle"] },
+    { id: "arrow", icon: Icon.arrow, label: strings["annotator.tool.arrow"] },
+    { id: "freehand", icon: Icon.pencil, label: strings["annotator.tool.freehand"] },
+    { id: "text", icon: Icon.text, label: strings["annotator.tool.text"] }
+  ];
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      class: "annotator-backdrop",
+      role: "presentation",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onCancel();
+      },
+      children: /* @__PURE__ */ jsxs("div", { class: "annotator", role: "dialog", "aria-modal": "true", "aria-label": strings["annotator.title"], children: [
+        /* @__PURE__ */ jsxs("div", { class: "annotator-header", children: [
+          /* @__PURE__ */ jsx2("span", { children: strings["annotator.title"] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              class: "modal-close",
+              "aria-label": strings["form.close"],
+              onClick: onCancel,
+              children: Icon.close
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { class: "annotator-toolbar", children: [
+          /* @__PURE__ */ jsx2("div", { class: "annotator-tools", children: tools.map((t) => /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setTool(t.id),
+              title: t.label,
+              "aria-label": t.label,
+              "aria-pressed": tool === t.id,
+              class: `annotator-tool ${tool === t.id ? "is-active" : ""}`,
+              children: t.icon
+            },
+            t.id
+          )) }),
+          /* @__PURE__ */ jsx2("span", { class: "annotator-sep" }),
+          /* @__PURE__ */ jsx2("div", { class: "annotator-colors", children: COLORS.map((c) => /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setColor(c),
+              "aria-label": c,
+              "aria-pressed": color === c,
+              class: `annotator-color ${color === c ? "is-active" : ""}`,
+              style: { backgroundColor: c }
+            },
+            c
+          )) }),
+          /* @__PURE__ */ jsx2("span", { class: "annotator-sep" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              class: "annotator-btn",
+              onClick: () => setShapes((prev) => prev.slice(0, -1)),
+              disabled: shapes.length === 0,
+              children: [
+                Icon.undo,
+                /* @__PURE__ */ jsx2("span", { children: strings["annotator.undo"] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              class: "annotator-btn",
+              onClick: () => setShapes([]),
+              disabled: shapes.length === 0,
+              children: [
+                Icon.trash,
+                /* @__PURE__ */ jsx2("span", { children: strings["annotator.clear"] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { class: "annotator-spacer" }),
+          /* @__PURE__ */ jsxs("span", { class: "annotator-count", children: [
+            shapes.length,
+            " ",
+            strings["annotator.count_suffix"]
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { ref: containerRef, class: "annotator-canvas-wrap", children: !imageLoaded ? /* @__PURE__ */ jsx2("span", { class: "annotator-loading", children: strings["annotator.loading"] }) : /* @__PURE__ */ jsx2(
+          "canvas",
+          {
+            ref: canvasRef,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseUp,
+            class: "annotator-canvas"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { class: "annotator-footer", children: [
+          /* @__PURE__ */ jsx2("button", { type: "button", class: "btn", onClick: onCancel, children: strings["form.cancel"] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              class: "btn btn--primary",
+              onClick: handleSave,
+              disabled: saving || !imageLoaded,
+              children: saving ? strings["annotator.applying"] : strings["annotator.apply"]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/widget/screenshot-utils.ts
+var ALLOWED_IMAGE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/webp"
+];
+var MAX_SCREENSHOT_BYTES = 10 * 1024 * 1024;
+function validateScreenshotFile(file) {
+  if (!ALLOWED_IMAGE_TYPES.includes(
+    file.type
+  )) {
+    return { kind: "type" };
+  }
+  if (file.size > MAX_SCREENSHOT_BYTES) {
+    return { kind: "size", maxMb: MAX_SCREENSHOT_BYTES / (1024 * 1024) };
+  }
+  return null;
+}
+function truncateUrl(url, maxLength = 80) {
+  if (url.length <= maxLength) return url;
+  const keepStart = Math.floor((maxLength - 1) / 2);
+  const keepEnd = maxLength - 1 - keepStart;
+  return `${url.slice(0, keepStart)}\u2026${url.slice(url.length - keepEnd)}`;
+}
+
+// src/widget/Form.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+var TYPES = ["bug", "feature", "question", "praise", "typo"];
+var SEVERITIES = ["blocker", "high", "medium", "low"];
+function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
+  const [description, setDescription] = useState2("");
+  const [feedbackType, setFeedbackType] = useState2("bug");
+  const [severity, setSeverity] = useState2("medium");
+  const [localError, setLocalError] = useState2("");
+  const [screenshotBlob, setScreenshotBlob] = useState2(null);
+  const [screenshotPreview, setScreenshotPreview] = useState2(null);
+  const [isDragOver, setIsDragOver] = useState2(false);
+  const [annotatorOpen, setAnnotatorOpen] = useState2(false);
+  const fileInputRef = useRef2(null);
+  const dropZoneRef = useRef2(null);
+  const submitting = status === "submitting";
+  const submitLabel = submitting ? strings["form.submitting"] : strings["form.submit"];
+  const pageUrl = typeof window !== "undefined" ? window.location.href : "";
+  useEffect2(() => {
+    return () => {
+      if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
+    };
+  }, [screenshotPreview]);
+  const acceptFile = (file) => {
+    setLocalError("");
+    if (file instanceof File) {
+      const err = validateScreenshotFile(file);
+      if (err) {
+        setLocalError(
+          err.kind === "type" ? strings["form.screenshot.error_type"] : strings["form.screenshot.error_size"].replace("{max}", String(err.maxMb))
+        );
+        return;
+      }
+    }
+    if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
+    setScreenshotBlob(file);
+    setScreenshotPreview(URL.createObjectURL(file));
+  };
+  const clearScreenshot = () => {
+    if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
+    setScreenshotPreview(null);
+    setScreenshotBlob(null);
+    setLocalError("");
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+  const handleFileInputChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) acceptFile(file);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget === e.target) setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (file) acceptFile(file);
+  };
+  useEffect2(() => {
+    const zone = dropZoneRef.current;
+    if (!zone) return;
+    const onPaste = (e) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      for (const item of Array.from(items)) {
+        if (item.kind === "file" && item.type.startsWith("image/")) {
+          const file = item.getAsFile();
+          if (file) {
+            e.preventDefault();
+            acceptFile(file);
+            return;
+          }
+        }
+      }
+    };
+    zone.addEventListener("paste", onPaste);
+    return () => zone.removeEventListener("paste", onPaste);
+  }, [screenshotPreview]);
+  const handleAnnotated = (annotated) => {
+    if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
+    setScreenshotBlob(annotated);
+    setScreenshotPreview(URL.createObjectURL(annotated));
+    setAnnotatorOpen(false);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!description.trim()) {
+      setLocalError(strings["form.description.placeholder"]);
+      return;
+    }
+    setLocalError("");
+    const values = {
+      description: description.trim(),
+      feedback_type: feedbackType,
+      severity
+    };
+    if (screenshotBlob) values.screenshot = screenshotBlob;
+    onSubmit(values);
+  };
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx3("h2", { children: strings["form.title"] }),
+    /* @__PURE__ */ jsxs2("div", { class: "field", children: [
+      /* @__PURE__ */ jsx3("label", { for: "mfb-desc", children: strings["form.description.label"] }),
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          id: "mfb-desc",
+          value: description,
+          placeholder: strings["form.description.placeholder"],
+          onInput: (e) => setDescription(e.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { class: "row", children: [
+      /* @__PURE__ */ jsxs2("div", { class: "field", children: [
+        /* @__PURE__ */ jsx3("label", { for: "mfb-type", children: strings["form.type.label"] }),
+        /* @__PURE__ */ jsx3(
+          "select",
+          {
+            id: "mfb-type",
+            value: feedbackType,
+            onChange: (e) => setFeedbackType(e.target.value),
+            children: TYPES.map((t) => /* @__PURE__ */ jsx3("option", { value: t, children: strings[`type.${t}`] }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { class: "field", children: [
+        /* @__PURE__ */ jsx3("label", { for: "mfb-sev", children: strings["form.severity.label"] }),
+        /* @__PURE__ */ jsx3(
+          "select",
+          {
+            id: "mfb-sev",
+            value: severity,
+            onChange: (e) => setSeverity(e.target.value),
+            children: SEVERITIES.map((s) => /* @__PURE__ */ jsx3("option", { value: s, children: strings[`severity.${s}`] }))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { class: "field", children: [
+      /* @__PURE__ */ jsx3("label", { children: strings["form.screenshot.label"] }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/png,image/jpeg,image/webp",
+          class: "mfb-sr-only",
+          onChange: handleFileInputChange,
+          "aria-hidden": "true",
+          tabIndex: -1
+        }
+      ),
+      screenshotPreview ? /* @__PURE__ */ jsxs2("div", { class: "screenshot-preview", children: [
+        /* @__PURE__ */ jsx3("img", { src: screenshotPreview, alt: "" }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            class: "screenshot-remove",
+            onClick: clearScreenshot,
+            "aria-label": strings["form.screenshot.remove"],
+            children: "\xD7"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            class: "btn screenshot-annotate",
+            onClick: () => setAnnotatorOpen(true),
+            children: strings["form.screenshot.annotate"]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref: dropZoneRef,
+          class: `screenshot-dropzone ${isDragOver ? "is-dragover" : ""}`,
+          tabIndex: 0,
+          role: "button",
+          "aria-label": strings["form.screenshot.label"],
+          onClick: () => fileInputRef.current?.click(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              fileInputRef.current?.click();
+            }
+          },
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxs2("div", { class: "screenshot-cta", children: [
+              /* @__PURE__ */ jsx3("strong", { children: strings["form.screenshot.cta_click"] }),
+              ", ",
+              strings["form.screenshot.cta_rest"]
+            ] }),
+            /* @__PURE__ */ jsx3("div", { class: "screenshot-formats", children: strings["form.screenshot.formats"] })
+          ]
+        }
+      )
+    ] }),
+    pageUrl && /* @__PURE__ */ jsxs2("div", { class: "page-context", title: pageUrl, children: [
+      /* @__PURE__ */ jsx3("span", { class: "page-context-label", children: strings["form.context.label"] }),
+      /* @__PURE__ */ jsx3("span", { class: "page-context-url", children: truncateUrl(pageUrl, 90) })
+    ] }),
+    localError && /* @__PURE__ */ jsx3("div", { class: "error", children: localError }),
+    status === "error" && errorMessage && /* @__PURE__ */ jsx3("div", { class: "error", children: errorMessage }),
+    status === "success" && /* @__PURE__ */ jsx3("div", { class: "success", children: strings["form.success"] }),
+    /* @__PURE__ */ jsxs2("div", { class: "actions", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", class: "btn", onClick: onCancel, disabled: submitting, children: strings["form.cancel"] }),
+      /* @__PURE__ */ jsx3("button", { type: "submit", class: "btn btn--primary", disabled: submitting, children: submitLabel })
+    ] }),
+    annotatorOpen && screenshotBlob && /* @__PURE__ */ jsx3(
+      Annotator,
+      {
+        imageBlob: screenshotBlob,
+        strings,
+        onCancel: () => setAnnotatorOpen(false),
+        onSave: handleAnnotated
+      }
+    )
+  ] });
+}
+
+// src/widget/Modal.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "preact/hooks";
+import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
+function Modal({ onDismiss, children, closeLabel = "Close" }) {
+  const modalRef = useRef3(null);
+  const previouslyFocused = useRef3(null);
+  useEffect3(() => {
+    previouslyFocused.current = document.activeElement;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onDismiss();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    const first = modalRef.current?.querySelector(
+      "textarea, input, select, button"
+    );
+    first?.focus();
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      const prev = previouslyFocused.current;
+      if (prev && typeof prev.focus === "function") prev.focus();
+    };
+  }, [onDismiss]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      class: "backdrop",
+      role: "presentation",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onDismiss();
+      },
+      children: /* @__PURE__ */ jsxs3("div", { ref: modalRef, class: "modal", role: "dialog", "aria-modal": "true", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            class: "modal-close",
+            "aria-label": closeLabel,
+            onClick: onDismiss,
+            children: "\xD7"
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
+
+// src/widget/styles.ts
+var WIDGET_STYLES = `
+:host {
+  --mfb-accent: #3b82f6;
+  --mfb-accent-contrast: #ffffff;
+  --mfb-bg: #ffffff;
+  --mfb-surface: #f9fafb;
+  --mfb-text: #0a0a0a;
+  --mfb-text-muted: #6b7280;
+  --mfb-border: #e5e7eb;
+  --mfb-radius: 8px;
+  --mfb-font: system-ui, -apple-system, sans-serif;
+  --mfb-z-index: 2147483640;
+
+  all: initial;
+  font-family: var(--mfb-font);
+  color: var(--mfb-text);
+  position: fixed;
+  z-index: var(--mfb-z-index);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --mfb-bg: #111827;
+    --mfb-surface: #1f2937;
+    --mfb-text: #f9fafb;
+    --mfb-text-muted: #9ca3af;
+    --mfb-border: #374151;
+  }
+}
+
+.fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 52px;
+  height: 52px;
+  border-radius: 999px;
+  background: var(--mfb-accent);
+  color: var(--mfb-accent-contrast);
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+  font-size: 22px;
+  display: grid;
+  place-items: center;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); }
+.fab:active { transform: translateY(0) scale(0.96); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); }
+.fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px var(--mfb-accent), 0 4px 14px rgba(0, 0, 0, 0.18); }
+@media (prefers-reduced-motion: reduce) { .fab { transition: none; } .fab:hover, .fab:active { transform: none; } }
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: grid;
+  place-items: center;
+}
+
+.modal {
+  background: var(--mfb-bg);
+  border-radius: calc(var(--mfb-radius) * 1.5);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
+  width: min(420px, 92vw);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  /* Cap modal height on short viewports (mobile landscape, tiny laptops)
+     so the form scrolls inside the modal rather than overflowing the
+     viewport with no way to reach the actions row. */
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+}
+
+.modal h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; padding-right: 28px; }
+
+.modal-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--mfb-radius);
+  color: var(--mfb-text-muted);
+  font: inherit;
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+.modal-close:hover { background: var(--mfb-surface); color: var(--mfb-text); }
+.modal-close:focus-visible { outline: 2px solid var(--mfb-accent); outline-offset: 2px; }
+
+.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
+
+.field label { color: var(--mfb-text-muted); }
+
+.field input, .field select, .field textarea {
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  padding: 8px 10px;
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-surface);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mfb-text-muted); }
+.field input:focus, .field select:focus, .field textarea:focus {
+  outline: none;
+  border-color: var(--mfb-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfb-accent) 22%, transparent);
+}
+
+.field select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: 28px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+.field textarea { min-height: 88px; resize: vertical; }
+
+.row { display: flex; gap: 8px; }
+.row > * { flex: 1; }
+
+.actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
+
+.btn {
+  padding: 8px 14px;
+  border-radius: var(--mfb-radius);
+  border: 1px solid var(--mfb-border);
+  background: var(--mfb-bg);
+  color: var(--mfb-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.btn--primary {
+  background: var(--mfb-accent);
+  color: var(--mfb-accent-contrast);
+  border-color: var(--mfb-accent);
+}
+
+.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
+
+.error { color: #dc2626; font-size: 13px; }
+.success { color: #059669; font-size: 13px; }
+
+/* ---- v0.6.0: manual screenshot upload + annotator -------------------- */
+
+.mfb-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.screenshot-dropzone {
+  border: 1px dashed var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  padding: 14px 12px;
+  text-align: center;
+  cursor: pointer;
+  background: var(--mfb-surface);
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.screenshot-dropzone:hover { border-color: var(--mfb-text-muted); }
+.screenshot-dropzone.is-dragover {
+  border-color: var(--mfb-accent);
+  border-style: solid;
+  background: color-mix(in srgb, var(--mfb-accent) 8%, var(--mfb-surface));
+}
+.screenshot-dropzone:focus-visible {
+  outline: 2px solid var(--mfb-accent);
+  outline-offset: 2px;
+}
+.screenshot-cta { font-size: 13px; color: var(--mfb-text); }
+.screenshot-cta strong { color: var(--mfb-accent); font-weight: 600; }
+.screenshot-formats { font-size: 11px; color: var(--mfb-text-muted); margin-top: 4px; }
+
+.screenshot-preview {
+  position: relative;
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  overflow: hidden;
+  background: var(--mfb-surface);
+  display: flex;
+  flex-direction: column;
+}
+.screenshot-preview img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 180px;
+  object-fit: contain;
+  background: #1a1a1a;
+}
+.screenshot-remove {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--mfb-border);
+  border-radius: 999px;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  color: #111827;
+}
+.screenshot-remove:hover { background: #fff; }
+.screenshot-annotate {
+  border-radius: 0;
+  border-width: 0;
+  border-top: 1px solid var(--mfb-border);
+  background: var(--mfb-bg);
+}
+.screenshot-annotate:hover { background: var(--mfb-surface); }
+
+.page-context {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--mfb-text-muted);
+}
+.page-context-label {
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.page-context-url {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--mfb-surface);
+  padding: 4px 6px;
+  border-radius: 4px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Annotator modal \u2014 sits above the feedback modal (z-index +1). */
+
+.annotator-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.78);
+  display: grid;
+  place-items: center;
+  z-index: 1;
+  padding: 12px;
+}
+.annotator {
+  position: relative;
+  background: var(--mfb-bg);
+  color: var(--mfb-text);
+  border-radius: calc(var(--mfb-radius) * 1.5);
+  width: min(960px, 96vw);
+  max-height: calc(100vh - 24px);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+}
+.annotator-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--mfb-border);
+  font-size: 13px;
+  font-weight: 600;
+}
+.annotator-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--mfb-border);
+}
+.annotator-tools, .annotator-colors { display: flex; gap: 4px; }
+.annotator-sep {
+  display: inline-block;
+  width: 1px;
+  height: 18px;
+  background: var(--mfb-border);
+  margin: 0 4px;
+}
+.annotator-spacer { flex: 1; }
+.annotator-tool {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  background: var(--mfb-bg);
+  color: var(--mfb-text);
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  cursor: pointer;
+}
+.annotator-tool:hover { background: var(--mfb-surface); }
+.annotator-tool.is-active {
+  background: var(--mfb-text);
+  color: var(--mfb-bg);
+  border-color: var(--mfb-text);
+}
+.annotator-color {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: 2px solid var(--mfb-border);
+  cursor: pointer;
+  padding: 0;
+  transition: transform 120ms ease;
+}
+.annotator-color.is-active {
+  transform: scale(1.12);
+  border-color: var(--mfb-text);
+}
+.annotator-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 30px;
+  padding: 0 10px;
+  font: inherit;
+  font-size: 12px;
+  background: var(--mfb-bg);
+  color: var(--mfb-text);
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  cursor: pointer;
+}
+.annotator-btn:hover { background: var(--mfb-surface); }
+.annotator-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+.annotator-count { font-size: 11px; color: var(--mfb-text-muted); }
+.annotator-canvas-wrap {
+  flex: 1;
+  overflow: auto;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  min-height: 200px;
+}
+.annotator-canvas {
+  cursor: crosshair;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+  background: #fff;
+}
+.annotator-loading {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+}
+.annotator-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--mfb-border);
+}
+`;
+
+// src/widget/mount.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
+function mountWidget(options) {
+  const shadow = options.host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = WIDGET_STYLES;
+  shadow.appendChild(style);
+  const mountPoint = document.createElement("div");
+  shadow.appendChild(mountPoint);
+  let currentState = { open: false, status: "idle" };
+  function rerender(state) {
+    currentState = state;
+    render(h(Root, { state }), mountPoint);
+  }
+  function Root({ state }) {
+    const handleSubmit = useCallback(async (values) => {
+      rerender({ open: true, status: "submitting" });
+      try {
+        await options.onSubmit(values);
+        rerender({ open: true, status: "success" });
+        setTimeout(() => rerender({ open: false, status: "idle" }), 1200);
+      } catch (err) {
+        rerender({ open: true, status: "error", error: err instanceof Error ? err.message : String(err) });
+      }
+    }, []);
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      options.showFAB && /* @__PURE__ */ jsx5(
+        Fab,
+        {
+          label: options.strings["fab.label"],
+          onClick: () => rerender({ ...currentState, open: true })
+        }
+      ),
+      state.open && /* @__PURE__ */ jsx5(
+        Modal,
+        {
+          onDismiss: () => rerender({ open: false, status: "idle" }),
+          closeLabel: options.strings["form.close"],
+          children: /* @__PURE__ */ jsx5(
+            Form,
+            {
+              strings: options.strings,
+              onSubmit: handleSubmit,
+              onCancel: () => rerender({ open: false, status: "idle" }),
+              status: state.status,
+              ...state.error !== void 0 && { errorMessage: state.error }
+            }
+          )
+        }
+      )
+    ] });
+  }
+  rerender(currentState);
+  return {
+    open() {
+      rerender({ ...currentState, open: true });
+    },
+    close() {
+      rerender({ ...currentState, open: false, status: "idle" });
+    },
+    dispose() {
+      render(null, mountPoint);
+      options.host.innerHTML = "";
+    }
+  };
+}
+
+// src/core.ts
+function createFeedback(config) {
+  const env = config.env ?? "prod";
+  const locale = config.locale ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
+  const strings = resolveStrings(
+    config.translations ?? {},
+    locale !== void 0 ? { locale } : {}
+  );
+  const capture = installCapture({
+    ...config.sanitizeUrl !== void 0 && { sanitizeUrl: config.sanitizeUrl }
+  });
+  const api = createApiClient({
+    apiKey: config.apiKey,
+    endpoint: config.endpoint,
+    ...config.fetchImpl !== void 0 && { fetch: config.fetchImpl },
+    ...config.beforeSend !== void 0 && { beforeSend: config.beforeSend }
+  });
+  let user = config.user;
+  let metadata = config.metadata ?? {};
+  const transformers = [];
+  const host = document.createElement("div");
+  host.className = "mhosaic-feedback";
+  if (config.attachTo) {
+    const attach = typeof config.attachTo === "string" ? document.querySelector(config.attachTo) : config.attachTo;
+    attach?.appendChild(host);
+  } else {
+    document.body.appendChild(host);
+  }
+  async function buildAndSubmit(values) {
+    const manualScreenshot = values.screenshot;
+    const screenshot = values.synthetic ? void 0 : manualScreenshot ?? await takeScreenshot(document.body, {
+      mask: [".mhosaic-feedback", "[data-mfb-mask]"]
+    });
+    const technical_context = capture.snapshot();
+    if (user) technical_context.user = user;
+    if (metadata && Object.keys(metadata).length > 0) {
+      technical_context.metadata = { ...metadata };
+    }
+    const payload = {
+      description: values.description,
+      feedback_type: values.feedback_type ?? "bug",
+      severity: values.severity ?? "medium",
+      env,
+      page_url: window.location.href,
+      user_agent: navigator.userAgent,
+      capture_method: screenshot ? manualScreenshot ? "manual" : "html2canvas" : "none",
+      technical_context
+    };
+    if (screenshot) payload.screenshot = screenshot;
+    if (values.synthetic) payload.synthetic = true;
+    let finalPayload = payload;
+    for (const t of transformers) finalPayload = await t(finalPayload);
+    try {
+      const result = await api.submitReport(finalPayload);
+      config.onSubmitSuccess?.(result);
+      capture.clear();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      config.onError?.(error);
+      throw error;
+    }
+  }
+  const handle = mountWidget({
+    host,
+    strings,
+    showFAB: config.showFAB ?? true,
+    onSubmit: async (values) => {
+      await buildAndSubmit(values);
+    }
+  });
+  const instance = {
+    show() {
+      handle.open();
+    },
+    hide() {
+      handle.close();
+    },
+    open(opts) {
+      handle.open();
+      void opts;
+    },
+    async submit(partial) {
+      return buildAndSubmit({
+        description: partial.description,
+        ...partial.feedback_type !== void 0 && { feedback_type: partial.feedback_type },
+        ...partial.severity !== void 0 && { severity: partial.severity },
+        ...partial.synthetic !== void 0 && { synthetic: partial.synthetic },
+        ...partial.screenshot !== void 0 && { screenshot: partial.screenshot }
+      });
+    },
+    identify(u) {
+      user = u;
+    },
+    setMetadata(kv) {
+      metadata = { ...metadata, ...kv };
+    },
+    shutdown() {
+      handle.dispose();
+      capture.dispose();
+      host.remove();
+      const w = window;
+      if (w.mhosaicFeedback === instance) {
+        delete w.mhosaicFeedback;
+      }
+    },
+    _registerTransformer(fn) {
+      transformers.push(fn);
+    }
+  };
+  window.mhosaicFeedback = instance;
+  return instance;
+}
+
+export {
+  createFeedback
+};
+//# sourceMappingURL=chunk-LGGKJPFH.mjs.map