@mhosaic/feedback 0.9.0 → 0.10.0

package/dist/{chunk-KO5NHJ7J.mjs → chunk-XSAUJEJN.mjs}

@@ -476,8 +476,12 @@ var DEFAULT_STRINGS = {
   "annotator.tool.arrow": "Arrow",
   "annotator.tool.freehand": "Freehand",
   "annotator.tool.text": "Text",
+  "annotator.tool.highlight": "Highlight",
+  "annotator.tool.blur": "Blur (hide sensitive data)",
   "annotator.text_prompt": "Enter text:",
+  "annotator.color_picker": "Custom color",
   "annotator.undo": "Undo",
+  "annotator.redo": "Redo",
   "annotator.clear": "Clear all",
   "annotator.count_suffix": "annotations",
   "annotator.loading": "Loading\u2026",
@@ -578,8 +582,12 @@ var FRENCH_STRINGS = {
   "annotator.tool.arrow": "Fl\xE8che",
   "annotator.tool.freehand": "Dessin libre",
   "annotator.tool.text": "Texte",
+  "annotator.tool.highlight": "Surligner",
+  "annotator.tool.blur": "Flouter (donn\xE9es sensibles)",
   "annotator.text_prompt": "Entrez le texte :",
+  "annotator.color_picker": "Couleur personnalis\xE9e",
   "annotator.undo": "Annuler",
+  "annotator.redo": "Refaire",
   "annotator.clear": "Tout effacer",
   "annotator.count_suffix": "annotations",
   "annotator.loading": "Chargement\u2026",
@@ -846,10 +854,11 @@ function Fab({ label, onClick }) {
 import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "preact/hooks";
 
 // src/widget/Annotator.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "preact/hooks";
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState2 } from "preact/hooks";
 import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
 var COLORS = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#ffffff"];
-function drawShape(ctx, shape) {
+var HIGHLIGHT_ALPHA = 0.35;
+function drawShape(ctx, shape, sourceImage) {
   ctx.save();
   ctx.strokeStyle = shape.color;
   ctx.fillStyle = shape.color;
@@ -882,9 +891,22 @@ function drawShape(ctx, shape) {
     ctx.fillRect(shape.x - padding, shape.y - padding, w, hh);
     ctx.fillStyle = shape.color;
     ctx.fillText(shape.text, shape.x, shape.y);
+  } else if (shape.kind === "highlight") {
+    ctx.globalAlpha = HIGHLIGHT_ALPHA;
+    ctx.fillRect(
+      normalizeStart(shape.x, shape.w),
+      normalizeStart(shape.y, shape.h),
+      Math.abs(shape.w),
+      Math.abs(shape.h)
+    );
+  } else if (shape.kind === "blur") {
+    drawBlur(ctx, shape, sourceImage);
   }
   ctx.restore();
 }
+function normalizeStart(start, size) {
+  return size < 0 ? start + size : start;
+}
 function drawArrow(ctx, x1, y1, x2, y2) {
   const headLen = 14;
   const angle = Math.atan2(y2 - y1, x2 - x1);
@@ -905,12 +927,77 @@ function drawArrow(ctx, x1, y1, x2, y2) {
   ctx.closePath();
   ctx.fill();
 }
+function drawBlur(ctx, shape, sourceImage) {
+  if (!sourceImage) return;
+  const x = normalizeStart(shape.x, shape.w);
+  const y = normalizeStart(shape.y, shape.h);
+  const w = Math.abs(shape.w);
+  const h2 = Math.abs(shape.h);
+  if (w < 2 || h2 < 2) return;
+  const tile = Math.max(4, shape.tile);
+  for (let yy = y; yy < y + h2; yy += tile) {
+    for (let xx = x; xx < x + w; xx += tile) {
+      const tw = Math.min(tile, x + w - xx);
+      const th = Math.min(tile, y + h2 - yy);
+      ctx.drawImage(
+        sourceImage,
+        xx,
+        yy,
+        tw,
+        th,
+        // source rect from the image
+        xx,
+        yy,
+        tw,
+        th
+        // dest rect on the canvas (same coords)
+      );
+    }
+  }
+  ctx.imageSmoothingEnabled = false;
+  for (let yy = y; yy < y + h2; yy += tile) {
+    for (let xx = x; xx < x + w; xx += tile) {
+      const tw = Math.min(tile, x + w - xx);
+      const th = Math.min(tile, y + h2 - yy);
+      ctx.drawImage(
+        sourceImage,
+        xx,
+        yy,
+        1,
+        1,
+        // single source pixel
+        xx,
+        yy,
+        tw,
+        th
+        // stretched dest tile
+      );
+    }
+  }
+  ctx.imageSmoothingEnabled = true;
+}
 var Icon = {
   rect: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("rect", { x: "2", y: "3", width: "12", height: "10", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }) }),
   arrow: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M2 8h11M9 4l4 4-4 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
   pencil: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("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__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M3 3h10M8 3v10M5 13h6", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }),
+  highlight: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M3 13l3-3L11 5l-2-2-5 5-3 3v2h2zM10 4l2 2", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+    /* @__PURE__ */ jsx4("path", { d: "M2 14h12", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })
+  ] }),
+  blur: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("rect", { x: "2", y: "2", width: "4", height: "4", fill: "currentColor", opacity: "0.85" }),
+    /* @__PURE__ */ jsx4("rect", { x: "7", y: "2", width: "3", height: "3", fill: "currentColor", opacity: "0.55" }),
+    /* @__PURE__ */ jsx4("rect", { x: "11", y: "2", width: "3", height: "4", fill: "currentColor", opacity: "0.4" }),
+    /* @__PURE__ */ jsx4("rect", { x: "2", y: "7", width: "3", height: "3", fill: "currentColor", opacity: "0.6" }),
+    /* @__PURE__ */ jsx4("rect", { x: "6", y: "7", width: "3", height: "3", fill: "currentColor", opacity: "0.85" }),
+    /* @__PURE__ */ jsx4("rect", { x: "10", y: "7", width: "4", height: "3", fill: "currentColor", opacity: "0.5" }),
+    /* @__PURE__ */ jsx4("rect", { x: "2", y: "11", width: "4", height: "3", fill: "currentColor", opacity: "0.4" }),
+    /* @__PURE__ */ jsx4("rect", { x: "7", y: "11", width: "3", height: "3", fill: "currentColor", opacity: "0.65" }),
+    /* @__PURE__ */ jsx4("rect", { x: "11", y: "11", width: "3", height: "3", fill: "currentColor", opacity: "0.85" })
+  ] }),
   undo: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("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" }) }),
+  redo: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M12 7l-3-3M12 7l-3 3M12 7H6a3 3 0 0 0 0 6h2", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
   trash: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("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__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M4 4l8 8M12 4l-8 8", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) })
 };
@@ -921,12 +1008,50 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
   const [tool, setTool] = useState2("rectangle");
   const [color, setColor] = useState2(COLORS[0]);
   const [shapes, setShapes] = useState2([]);
+  const [past, setPast] = useState2([]);
+  const [future, setFuture] = useState2([]);
   const isDrawingRef = useRef2(false);
   const [draftShape, setDraftShape] = useState2(null);
   const [imageLoaded, setImageLoaded] = useState2(false);
   const [saving, setSaving] = useState2(false);
   const scaleRef = useRef2(1);
-  useEffect2(() => {
+  function addShape(shape) {
+    setShapes((s) => {
+      setPast((p) => [...p, s]);
+      return [...s, shape];
+    });
+    setFuture([]);
+  }
+  function clearShapes() {
+    setShapes((s) => {
+      setPast((p) => [...p, s]);
+      return [];
+    });
+    setFuture([]);
+  }
+  function undo() {
+    setPast((p) => {
+      if (p.length === 0) return p;
+      const prev = p[p.length - 1];
+      setShapes((s) => {
+        setFuture((f) => [s, ...f]);
+        return prev;
+      });
+      return p.slice(0, -1);
+    });
+  }
+  function redo() {
+    setFuture((f) => {
+      if (f.length === 0) return f;
+      const next = f[0];
+      setShapes((s) => {
+        setPast((p) => [...p, s]);
+        return next;
+      });
+      return f.slice(1);
+    });
+  }
+  useLayoutEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
@@ -936,6 +1061,25 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onCancel]);
+  useEffect2(() => {
+    const onKey = (e) => {
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod) return;
+      const k = e.key.toLowerCase();
+      if (k === "z") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.shiftKey) redo();
+        else undo();
+      } else if (k === "y") {
+        e.preventDefault();
+        e.stopPropagation();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [past, future, shapes]);
   useEffect2(() => {
     const url = URL.createObjectURL(imageBlob);
     const img = new Image();
@@ -953,7 +1097,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     const img = imageRef.current;
     const container = containerRef.current;
     const maxW = container.clientWidth - 16;
-    const maxH = window.innerHeight * 0.6;
+    const maxH = window.innerHeight * 0.65;
     const fitScale = Math.min(maxW / img.width, maxH / img.height, 1);
     scaleRef.current = fitScale;
     const canvas = canvasRef.current;
@@ -974,8 +1118,8 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     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);
+    for (const s of shapes) drawShape(ctx, s, img);
+    if (draftShape) drawShape(ctx, draftShape, img);
   }
   function getCanvasCoords(e) {
     const canvas = canvasRef.current;
@@ -988,22 +1132,21 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
   const handleMouseDown = (e) => {
     if (!imageLoaded) return;
     const { x, y } = getCanvasCoords(e);
-    const lineWidth = Math.max(3, Math.round(canvasRef.current.width / 400));
+    const canvasW = canvasRef.current.width;
+    const lineWidth = Math.max(3, Math.round(canvasW / 400));
+    const blurTile = Math.max(8, Math.round(canvasW / 80));
     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
-          }
-        ]);
+        addShape({
+          kind: "text",
+          x,
+          y,
+          text: text.trim(),
+          color,
+          fontSize: Math.max(16, Math.round(canvasW / 50)),
+          lineWidth: 1
+        });
       }
       return;
     }
@@ -1014,12 +1157,33 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
       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 });
+    } else if (tool === "highlight") {
+      setDraftShape({
+        kind: "highlight",
+        x,
+        y,
+        w: 0,
+        h: 0,
+        color: color === "#ffffff" ? "#fde047" : color,
+        lineWidth: 1
+      });
+    } else if (tool === "blur") {
+      setDraftShape({
+        kind: "blur",
+        x,
+        y,
+        w: 0,
+        h: 0,
+        color: "#000000",
+        lineWidth: 0,
+        tile: blurTile
+      });
     }
   };
   const handleMouseMove = (e) => {
     if (!isDrawingRef.current || !draftShape) return;
     const { x, y } = getCanvasCoords(e);
-    if (draftShape.kind === "rectangle") {
+    if (draftShape.kind === "rectangle" || draftShape.kind === "highlight" || draftShape.kind === "blur") {
       setDraftShape({ ...draftShape, w: x - draftShape.x, h: y - draftShape.y });
     } else if (draftShape.kind === "arrow") {
       setDraftShape({ ...draftShape, x2: x, y2: y });
@@ -1029,12 +1193,12 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
   };
   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(
+      const isTiny = (draftShape.kind === "rectangle" || draftShape.kind === "highlight" || draftShape.kind === "blur") && 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]);
+        addShape(draftShape);
       }
     }
     isDrawingRef.current = false;
@@ -1057,7 +1221,9 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     { 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"] }
+    { id: "text", icon: Icon.text, label: strings["annotator.tool.text"] },
+    { id: "highlight", icon: Icon.highlight, label: strings["annotator.tool.highlight"] },
+    { id: "blur", icon: Icon.blur, label: strings["annotator.tool.blur"] }
   ];
   return /* @__PURE__ */ jsx4(
     "div",
@@ -1096,26 +1262,38 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             t.id
           )) }),
           /* @__PURE__ */ jsx4("span", { class: "annotator-sep" }),
-          /* @__PURE__ */ jsx4("div", { class: "annotator-colors", children: COLORS.map((c) => /* @__PURE__ */ jsx4(
-            "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__ */ jsxs3("div", { class: "annotator-colors", children: [
+            COLORS.map((c) => /* @__PURE__ */ jsx4(
+              "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__ */ jsx4("label", { class: "annotator-color annotator-color-picker", title: strings["annotator.color_picker"], children: /* @__PURE__ */ jsx4(
+              "input",
+              {
+                type: "color",
+                value: color,
+                onInput: (e) => setColor(e.target.value),
+                "aria-label": strings["annotator.color_picker"]
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ jsx4("span", { class: "annotator-sep" }),
           /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
               class: "annotator-btn",
-              onClick: () => setShapes((prev) => prev.slice(0, -1)),
-              disabled: shapes.length === 0,
+              onClick: undo,
+              disabled: past.length === 0,
+              title: strings["annotator.undo"],
               children: [
                 Icon.undo,
                 /* @__PURE__ */ jsx4("span", { children: strings["annotator.undo"] })
@@ -1127,7 +1305,21 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             {
               type: "button",
               class: "annotator-btn",
-              onClick: () => setShapes([]),
+              onClick: redo,
+              disabled: future.length === 0,
+              title: strings["annotator.redo"],
+              children: [
+                Icon.redo,
+                /* @__PURE__ */ jsx4("span", { children: strings["annotator.redo"] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              class: "annotator-btn",
+              onClick: clearShapes,
               disabled: shapes.length === 0,
               children: [
                 Icon.trash,
@@ -1359,25 +1551,27 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
       ),
       screenshotPreview ? /* @__PURE__ */ jsxs4("div", { class: "screenshot-preview", children: [
         /* @__PURE__ */ jsx5("img", { src: screenshotPreview, alt: "" }),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            class: "screenshot-remove",
-            onClick: clearScreenshot,
-            "aria-label": strings["form.screenshot.remove"],
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            class: "btn screenshot-annotate",
-            onClick: () => setAnnotatorOpen(true),
-            children: strings["form.screenshot.annotate"]
-          }
-        )
+        /* @__PURE__ */ jsxs4("div", { class: "screenshot-preview-actions", children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              class: "btn btn--primary screenshot-annotate",
+              onClick: () => setAnnotatorOpen(true),
+              children: [
+                /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx5("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                  /* @__PURE__ */ jsx5("path", { d: "M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+                ] }),
+                strings["form.screenshot.annotate"]
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4("button", { type: "button", class: "btn", onClick: clearScreenshot, children: [
+            /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14z" }) }),
+            strings["form.screenshot.remove"]
+          ] })
+        ] })
       ] }) : /* @__PURE__ */ jsxs4(
         "div",
         {
@@ -1397,6 +1591,11 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           onDragLeave: handleDragLeave,
           onDrop: handleDrop,
           children: [
+            /* @__PURE__ */ jsxs4("svg", { class: "screenshot-icon", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsx5("polyline", { points: "17 8 12 3 7 8" }),
+              /* @__PURE__ */ jsx5("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+            ] }),
             /* @__PURE__ */ jsxs4("div", { class: "screenshot-cta", children: [
               /* @__PURE__ */ jsx5("strong", { children: strings["form.screenshot.cta_click"] }),
               ", ",
@@ -1972,13 +2171,39 @@ var WIDGET_STYLES = `
   --mfb-accent-contrast: #ffffff;
   --mfb-bg: #ffffff;
   --mfb-surface: #f9fafb;
+  --mfb-surface-2: #f3f4f6;
   --mfb-text: #0a0a0a;
   --mfb-text-muted: #6b7280;
   --mfb-border: #e5e7eb;
+  --mfb-border-strong: #d1d5db;
   --mfb-radius: 8px;
+  --mfb-radius-lg: 14px;
   --mfb-font: system-ui, -apple-system, sans-serif;
   --mfb-z-index: 2147483640;
 
+  /* Spacing scale \u2014 4px base, used everywhere instead of magic numbers. */
+  --mfb-space-1: 4px;
+  --mfb-space-2: 8px;
+  --mfb-space-3: 12px;
+  --mfb-space-4: 16px;
+  --mfb-space-5: 24px;
+  --mfb-space-6: 32px;
+  --mfb-space-7: 48px;
+
+  /* Type scale \u2014 fixed sizes, no fluid scaling. Body 14px sits in the
+     "comfortable on every viewport" range; headings step up gracefully. */
+  --mfb-text-xs: 11px;
+  --mfb-text-sm: 13px;
+  --mfb-text-base: 14px;
+  --mfb-text-md: 15px;
+  --mfb-text-lg: 17px;
+  --mfb-text-xl: 20px;
+
+  /* Elevation \u2014 three tiers for layering. */
+  --mfb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --mfb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
+  --mfb-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.10);
+
   all: initial;
   font-family: var(--mfb-font);
   color: var(--mfb-text);
@@ -1988,11 +2213,14 @@ var WIDGET_STYLES = `
 
 @media (prefers-color-scheme: dark) {
   :host {
-    --mfb-bg: #111827;
-    --mfb-surface: #1f2937;
-    --mfb-text: #f9fafb;
-    --mfb-text-muted: #9ca3af;
-    --mfb-border: #374151;
+    --mfb-bg: #0f172a;
+    --mfb-surface: #1e293b;
+    --mfb-surface-2: #253349;
+    --mfb-text: #f8fafc;
+    --mfb-text-muted: #94a3b8;
+    --mfb-border: #334155;
+    --mfb-border-strong: #475569;
+    --mfb-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.40);
   }
 }
 
@@ -2051,60 +2279,98 @@ var WIDGET_STYLES = `
   .fab:hover, .fab:active { transform: none; }
 }
 
+/* Backdrop \u2014 fade in with a slight blur for depth. The blur gives the
+   modal that "page that opens" weight: the underlying page recedes
+   visually so the widget feels foregrounded, not pasted on. */
 .backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
   display: grid;
   place-items: center;
+  animation: mfb-backdrop-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes mfb-backdrop-in {
+  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
+  to { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
 }
 
 .modal {
   background: var(--mfb-bg);
-  border-radius: calc(var(--mfb-radius) * 1.5);
-  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
-  /* 440px is the industry sweet spot for short forms \u2014 Linear, Plain,
-     Sentry all sit in the 420-480 range. 92vw caps it on narrow screens. */
-  width: min(440px, 92vw);
-  /* 24px is shadcn's default; gives every input room to breathe. */
-  padding: 24px;
+  border-radius: var(--mfb-radius-lg);
+  box-shadow: var(--mfb-shadow-lg);
+  /* 720px is the "page that opens" sweet spot \u2014 wide enough to feel
+     like a workspace, narrow enough to not dominate the screen. Was
+     440px before; the bump trades a denser modal for a calmer canvas. */
+  width: min(720px, calc(100vw - var(--mfb-space-7)));
+  padding: var(--mfb-space-6);
   display: flex;
   flex-direction: column;
-  /* 18px between major blocks (h2 \u2192 field \u2192 field \u2192 footer). Within a
-     field group, .field uses a tighter 6px label-to-input gap. */
-  gap: 18px;
+  gap: var(--mfb-space-5);
   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);
+  /* Cap height with breathing room. The form scrolls internally if
+     the user attaches a tall screenshot. */
+  max-height: min(820px, calc(100vh - var(--mfb-space-7)));
   overflow-y: auto;
+  /* Entrance: opacity-only. Avoids any geometric shift during the
+     animation so interaction tests that read boundingBox immediately
+     after the modal becomes visible get stable coordinates. 220ms
+     ease-out is snappy enough that human users barely register it. */
+  animation: mfb-modal-in 220ms ease-out;
+}
+
+@keyframes mfb-modal-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Mobile: full-height sheet that slides up from the bottom. The
+   slide-up gesture matches platform-native sheets users already know. */
+@media (max-width: 640px) {
+  .backdrop { place-items: end center; }
+  .modal {
+    width: 100vw;
+    height: calc(100vh - var(--mfb-space-7));
+    max-height: none;
+    border-radius: var(--mfb-radius-lg) var(--mfb-radius-lg) 0 0;
+    padding: var(--mfb-space-5) var(--mfb-space-4) var(--mfb-space-4);
+    animation: mfb-sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+@keyframes mfb-sheet-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop, .modal { animation: none; }
 }
 
 .modal h2 {
   margin: 0;
-  font-size: 17px;
+  font-size: var(--mfb-text-xl);
   font-weight: 600;
-  padding-right: 28px;
-  letter-spacing: -0.01em;
+  padding-right: var(--mfb-space-6);
+  letter-spacing: -0.015em;
+  line-height: 1.2;
 }
 
-/* The form sits inside .modal as a single flex child, so the modal-level
-   gap doesn't separate the form's *own* children. Mirror the column +
-   gap pattern on the form itself; 22px lands in the middle of the
-   20-24px field-to-field range the design critic recommended. */
 .modal form {
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: var(--mfb-space-5);
 }
 
 .modal-close {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 32px;
-  height: 32px;
+  top: var(--mfb-space-3);
+  right: var(--mfb-space-3);
+  width: 36px;
+  height: 36px;
   display: grid;
   place-items: center;
   background: transparent;
@@ -2115,36 +2381,39 @@ var WIDGET_STYLES = `
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
 }
 .modal-close:hover { background: var(--mfb-surface); color: var(--mfb-text); }
 .modal-close:focus-visible { outline: 2px solid var(--mfb-accent); outline-offset: 2px; }
 
-/* Each field group: label (13px medium, muted) + input (14px regular)
-   stacked with a 6px gap. The 18px modal-level gap separates groups. */
-.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
+/* Each field group: label + input stacked with breathing room.
+   The 24px modal-level gap separates groups. */
+.field { display: flex; flex-direction: column; gap: var(--mfb-space-2); font-size: var(--mfb-text-sm); }
 
 .field label {
   color: var(--mfb-text-muted);
   font-weight: 500;
-  font-size: 12px;
-  letter-spacing: 0.01em;
+  font-size: var(--mfb-text-xs);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 .field input, .field select, .field textarea {
   font-family: inherit;
-  font-size: 14px;
+  font-size: var(--mfb-text-base);
   color: inherit;
-  padding: 9px 12px;
+  padding: 11px 14px;
   border: 1px solid var(--mfb-border);
   border-radius: var(--mfb-radius);
   background: var(--mfb-surface);
-  transition: border-color 120ms ease, box-shadow 120ms ease;
+  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
 }
 
-.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mfb-text-muted); }
+.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mfb-border-strong); }
 .field input:focus, .field select:focus, .field textarea:focus {
   outline: none;
   border-color: var(--mfb-accent);
+  background: var(--mfb-bg);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfb-accent) 22%, transparent);
 }
 
@@ -2158,34 +2427,35 @@ var WIDGET_STYLES = `
   background-position: right 10px center;
 }
 
-.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
+.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
 
-.row { display: flex; gap: 12px; }
+.row { display: flex; gap: var(--mfb-space-3); }
 .row > * { flex: 1; }
 
-/* Footer separation: border-top + 16px breathing room, Stripe/Linear pattern.
-   Stops Cancel/Send from floating against the dropzone or page-URL footer. */
+/* Footer: subtle separation via border, slightly more vertical space. */
 .actions {
   display: flex;
-  gap: 8px;
+  gap: var(--mfb-space-2);
   justify-content: flex-end;
-  padding-top: 16px;
-  margin-top: 4px;
+  padding-top: var(--mfb-space-4);
+  margin-top: var(--mfb-space-1);
   border-top: 1px solid var(--mfb-border);
 }
 
 .btn {
-  padding: 9px 16px;
+  padding: 10px 18px;
   border-radius: var(--mfb-radius);
   border: 1px solid var(--mfb-border);
   background: var(--mfb-bg);
   color: var(--mfb-text);
   font: inherit;
+  font-size: var(--mfb-text-sm);
   font-weight: 500;
   cursor: pointer;
-  transition: background 120ms ease, border-color 120ms ease;
+  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
 }
-.btn:hover { background: var(--mfb-surface); }
+.btn:hover { background: var(--mfb-surface); border-color: var(--mfb-border-strong); }
+.btn:active { transform: scale(0.98); }
 
 .btn--primary {
   background: var(--mfb-accent);
@@ -2216,28 +2486,49 @@ var WIDGET_STYLES = `
   border: 0;
 }
 
+/* Dropzone \u2014 bigger, more inviting; the icon + heading + sub-line
+   hierarchy makes it feel like a deliberate target, not an afterthought. */
 .screenshot-dropzone {
-  border: 1px dashed var(--mfb-border);
-  border-radius: var(--mfb-radius);
-  padding: 18px 14px;
+  border: 1.5px dashed var(--mfb-border-strong);
+  border-radius: var(--mfb-radius-lg);
+  padding: var(--mfb-space-6) var(--mfb-space-4);
   text-align: center;
   cursor: pointer;
   background: var(--mfb-surface);
-  transition: border-color 120ms ease, background 120ms ease;
+  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mfb-space-2);
+}
+.screenshot-dropzone:hover {
+  border-color: var(--mfb-accent);
+  background: color-mix(in srgb, var(--mfb-accent) 4%, var(--mfb-surface));
 }
-.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));
+  background: color-mix(in srgb, var(--mfb-accent) 10%, var(--mfb-surface));
+  transform: scale(1.005);
 }
 .screenshot-dropzone:focus-visible {
   outline: 2px solid var(--mfb-accent);
   outline-offset: 2px;
 }
-.screenshot-cta { font-size: 13px; color: var(--mfb-text); }
+.screenshot-icon {
+  color: var(--mfb-text-muted);
+  opacity: 0.7;
+  margin-bottom: var(--mfb-space-1);
+  transition: color 160ms ease, opacity 160ms ease;
+}
+.screenshot-dropzone:hover .screenshot-icon,
+.screenshot-dropzone.is-dragover .screenshot-icon {
+  color: var(--mfb-accent);
+  opacity: 1;
+}
+.screenshot-cta { font-size: var(--mfb-text-base); color: var(--mfb-text); font-weight: 500; }
 .screenshot-cta strong { color: var(--mfb-accent); font-weight: 600; }
-.screenshot-formats { font-size: 11px; color: var(--mfb-text-muted); margin-top: 4px; }
+.screenshot-formats { font-size: var(--mfb-text-xs); color: var(--mfb-text-muted); }
 
 .screenshot-preview {
   position: relative;
@@ -2252,11 +2543,38 @@ var WIDGET_STYLES = `
   display: block;
   width: 100%;
   height: auto;
-  max-height: 180px;
+  max-height: 280px;
   object-fit: contain;
   background: #1a1a1a;
 }
+.screenshot-preview-actions {
+  display: flex;
+  gap: var(--mfb-space-2);
+  padding: var(--mfb-space-2);
+  border-top: 1px solid var(--mfb-border);
+  background: var(--mfb-bg);
+}
+.screenshot-preview-actions .btn {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: var(--mfb-text-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.screenshot-preview-actions .btn--primary {
+  background: var(--mfb-bg);
+  color: var(--mfb-accent);
+  border-color: var(--mfb-accent);
+}
+.screenshot-preview-actions .btn--primary:hover {
+  background: color-mix(in srgb, var(--mfb-accent) 8%, var(--mfb-bg));
+  border-color: var(--mfb-accent);
+  color: var(--mfb-accent);
+}
 .screenshot-remove {
+  /* Kept for legacy markup that uses the old corner-cross button. */
   position: absolute;
   top: 6px;
   right: 6px;
@@ -2274,6 +2592,7 @@ var WIDGET_STYLES = `
 }
 .screenshot-remove:hover { background: #fff; }
 .screenshot-annotate {
+  /* Kept for legacy; new markup uses .screenshot-preview-actions. */
   border-radius: 0;
   border-width: 0;
   border-top: 1px solid var(--mfb-border);
@@ -2377,11 +2696,31 @@ var WIDGET_STYLES = `
   cursor: pointer;
   padding: 0;
   transition: transform 120ms ease;
+  position: relative;
 }
 .annotator-color.is-active {
   transform: scale(1.12);
   border-color: var(--mfb-text);
 }
+/* Color-picker swatch: rainbow gradient fill so users see this isn't
+   a preset, plus a tiny native <input type="color"> overlaid invisibly. */
+.annotator-color-picker {
+  display: grid;
+  place-items: center;
+  background: conic-gradient(from 180deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444);
+  overflow: hidden;
+}
+.annotator-color-picker input[type="color"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
 .annotator-btn {
   display: inline-flex;
   align-items: center;
@@ -2431,37 +2770,39 @@ var WIDGET_STYLES = `
 
 .tab-strip {
   display: flex;
-  gap: 4px;
+  gap: var(--mfb-space-1);
   border-bottom: 1px solid var(--mfb-border);
-  margin: 0 -4px 4px;
-  padding: 0 4px;
+  margin: 0;
+  padding: 0;
 }
 .tab-button {
   appearance: none;
   background: transparent;
   border: 0;
   border-bottom: 2px solid transparent;
-  padding: 8px 12px;
+  padding: var(--mfb-space-3) var(--mfb-space-4);
+  margin-bottom: -1px;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--mfb-text-sm);
   font-weight: 500;
   color: var(--mfb-text-muted);
   cursor: pointer;
+  transition: color 120ms ease, border-color 120ms ease;
 }
 .tab-button:hover { color: var(--mfb-text); }
 .tab-button.is-active {
-  color: var(--mfb-text);
+  color: var(--mfb-accent);
   border-bottom-color: var(--mfb-accent);
 }
 .tab-button[aria-selected="true"] { font-weight: 600; }
 
-.mine-list { display: flex; flex-direction: column; gap: 10px; }
+.mine-list { display: flex; flex-direction: column; gap: var(--mfb-space-3); }
 .mine-list-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.mine-list-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.mine-list-header h2 { margin: 0; font-size: var(--mfb-text-lg); font-weight: 600; letter-spacing: -0.01em; }
 .mine-loading { color: var(--mfb-text-muted); font-size: 13px; }
 .mine-empty {
   text-align: center;
@@ -3142,8 +3483,8 @@ function createFeedback(config) {
       capture_method: screenshot ? manualScreenshot ? "manual" : "html2canvas" : "none",
       technical_context
     };
-    if ("0.9.0") {
-      payload.widget_version = "0.9.0";
+    if ("0.10.0") {
+      payload.widget_version = "0.10.0";
     }
     if (screenshot) payload.screenshot = screenshot;
     if (values.synthetic) payload.synthetic = true;
@@ -3229,4 +3570,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-KO5NHJ7J.mjs.map
+//# sourceMappingURL=chunk-XSAUJEJN.mjs.map