@mhosaic/feedback 0.23.0 → 0.24.0

package/dist/{chunk-NCNRU3SR.mjs → chunk-WIQ7MTPI.mjs}

@@ -50,7 +50,10 @@ function createApiClient(options) {
       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");
+    const screenshots = payload.screenshots?.length ? payload.screenshots : payload.screenshot ? [payload.screenshot] : [];
+    screenshots.forEach((blob, i) => {
+      form.append("screenshot", blob, i === 0 ? "screenshot.png" : `screenshot-${i + 1}.png`);
+    });
     if (payload.synthetic) form.append("synthetic", "true");
     if (payload.user?.id) {
       form.append("user", JSON.stringify(payload.user));
@@ -572,6 +575,7 @@ var DEFAULT_STRINGS = {
   "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.screenshot.error_count": "Too many screenshots (max {max}).",
   "form.context.label": "Page",
   "type.bug": "Bug",
   "type.feature": "Feature request",
@@ -722,6 +726,7 @@ var FRENCH_STRINGS = {
   "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.screenshot.error_count": "Trop de captures d\u2019\xE9cran (max {max}).",
   "form.context.label": "Page",
   "type.bug": "Bogue",
   "type.feature": "Suggestion",
@@ -959,6 +964,7 @@ var ALLOWED_IMAGE_TYPES = [
   "image/webp"
 ];
 var MAX_SCREENSHOT_BYTES = 10 * 1024 * 1024;
+var MAX_SCREENSHOTS = 5;
 function validateScreenshotFile(file) {
   if (!ALLOWED_IMAGE_TYPES.includes(
     file.type
@@ -1128,8 +1134,8 @@ function ReportDetailView({
     /* @__PURE__ */ jsxs2("div", { class: "report-detail-body", children: [
       /* @__PURE__ */ jsx2(ContextBlock, { detail, strings }),
       /* @__PURE__ */ jsx2("p", { class: "report-detail-description", children: detail.description }),
-      detail.screenshot_url && (() => {
-        const safeHref = safeExternalHref(detail.screenshot_url);
+      (detail.screenshots?.length ? detail.screenshots.map((s) => s.url) : [detail.screenshot_url]).filter((url) => Boolean(url)).map((url) => {
+        const safeHref = safeExternalHref(url);
         return safeHref ? /* @__PURE__ */ jsx2(
           "a",
           {
@@ -1137,10 +1143,10 @@ function ReportDetailView({
             href: safeHref,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx2("img", { src: detail.screenshot_url, alt: "", loading: "lazy" })
+            children: /* @__PURE__ */ jsx2("img", { src: url, alt: "", loading: "lazy" })
           }
-        ) : /* @__PURE__ */ jsx2("div", { class: "report-detail-screenshot", children: /* @__PURE__ */ jsx2("img", { src: detail.screenshot_url, alt: "", loading: "lazy" }) });
-      })(),
+        ) : /* @__PURE__ */ jsx2("div", { class: "report-detail-screenshot", children: /* @__PURE__ */ jsx2("img", { src: url, alt: "", loading: "lazy" }) });
+      }),
       /* @__PURE__ */ jsx2("h3", { class: "report-detail-section", children: strings["detail.thread"] }),
       detail.comments.length === 0 ? /* @__PURE__ */ jsx2("p", { class: "report-detail-empty", children: strings["detail.no_replies"] }) : /* @__PURE__ */ jsx2("ul", { class: "report-comments", children: detail.comments.map((c) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(CommentBubble, { comment: c, strings }) })) }),
       detail.status_history && detail.status_history.length > 0 && /* @__PURE__ */ jsx2(StatusHistorySection, { rows: detail.status_history, strings }),
@@ -2519,45 +2525,58 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
   const [feedbackType, setFeedbackType] = useState5("bug");
   const [severity, setSeverity] = useState5("medium");
   const [localError, setLocalError] = useState5("");
-  const [screenshotBlob, setScreenshotBlob] = useState5(null);
-  const [screenshotPreview, setScreenshotPreview] = useState5(null);
+  const [shots, setShots] = useState5([]);
   const [isDragOver, setIsDragOver] = useState5(false);
-  const [annotatorOpen, setAnnotatorOpen] = useState5(false);
+  const [annotatingIndex, setAnnotatingIndex] = useState5(null);
   const fileInputRef = useRef4(null);
   const dropZoneRef = useRef4(null);
   const submitting = status === "submitting";
   const submitLabel = submitting ? strings["form.submitting"] : strings["form.submit"];
   const pageUrl = typeof window !== "undefined" ? window.location.href : "";
+  const shotsRef = useRef4(shots);
+  shotsRef.current = shots;
   useEffect5(() => {
     return () => {
-      if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
+      shotsRef.current.forEach((s) => URL.revokeObjectURL(s.preview));
     };
-  }, [screenshotPreview]);
-  const acceptFile = (file) => {
+  }, []);
+  const acceptFiles = (files) => {
     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;
+    const remaining = MAX_SCREENSHOTS - shots.length;
+    const batch = files.slice(0, Math.max(0, remaining));
+    for (const file of batch) {
+      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));
+    if (batch.length) {
+      const incoming = batch.map((blob) => ({ blob, preview: URL.createObjectURL(blob) }));
+      setShots((prev) => [...prev, ...incoming]);
+    }
+    if (files.length > batch.length) {
+      setLocalError(
+        strings["form.screenshot.error_count"].replace("{max}", String(MAX_SCREENSHOTS))
+      );
+    }
   };
-  const clearScreenshot = () => {
-    if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
-    setScreenshotPreview(null);
-    setScreenshotBlob(null);
+  const removeShot = (index) => {
+    const shot = shots[index];
+    if (shot) URL.revokeObjectURL(shot.preview);
+    setShots((prev) => prev.filter((_, i) => i !== index));
     setLocalError("");
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
   const handleFileInputChange = (e) => {
-    const file = e.target.files?.[0];
-    if (file) acceptFile(file);
+    const input = e.target;
+    const files = Array.from(input.files ?? []);
+    if (files.length) acceptFiles(files);
+    input.value = "";
   };
   const handleDragOver = (e) => {
     e.preventDefault();
@@ -2573,8 +2592,8 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
-    const file = e.dataTransfer?.files?.[0];
-    if (file) acceptFile(file);
+    const files = Array.from(e.dataTransfer?.files ?? []);
+    if (files.length) acceptFiles(files);
   };
   useEffect5(() => {
     const zone = dropZoneRef.current;
@@ -2587,7 +2606,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           const file = item.getAsFile();
           if (file) {
             e.preventDefault();
-            acceptFile(file);
+            acceptFiles([file]);
             return;
           }
         }
@@ -2595,12 +2614,17 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     };
     zone.addEventListener("paste", onPaste);
     return () => zone.removeEventListener("paste", onPaste);
-  }, [screenshotPreview]);
+  }, [shots.length]);
   const handleAnnotated = (annotated) => {
-    if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
-    setScreenshotBlob(annotated);
-    setScreenshotPreview(URL.createObjectURL(annotated));
-    setAnnotatorOpen(false);
+    const index = annotatingIndex;
+    if (index === null || !shots[index]) {
+      setAnnotatingIndex(null);
+      return;
+    }
+    URL.revokeObjectURL(shots[index].preview);
+    const replacement = { blob: annotated, preview: URL.createObjectURL(annotated) };
+    setShots((prev) => prev.map((s, i) => i === index ? replacement : s));
+    setAnnotatingIndex(null);
   };
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -2614,8 +2638,8 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
       feedback_type: feedbackType,
       severity
     };
-    if (screenshotBlob) {
-      values.screenshot = screenshotBlob;
+    if (shots.length) {
+      values.screenshots = shots.map((s) => s.blob);
       values.capture_method = "manual";
     }
     onSubmit(values);
@@ -2668,21 +2692,22 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           ref: fileInputRef,
           type: "file",
           accept: "image/png,image/jpeg,image/webp",
+          multiple: true,
           class: "mfb-sr-only",
           onChange: handleFileInputChange,
           "aria-hidden": "true",
           tabIndex: -1
         }
       ),
-      screenshotPreview ? /* @__PURE__ */ jsxs8("div", { class: "screenshot-preview", children: [
-        /* @__PURE__ */ jsx8("img", { src: screenshotPreview, alt: "" }),
+      shots.length > 0 && /* @__PURE__ */ jsx8("div", { class: "screenshot-strip", children: shots.map((shot, index) => /* @__PURE__ */ jsxs8("div", { class: "screenshot-preview", children: [
+        /* @__PURE__ */ jsx8("img", { src: shot.preview, alt: "" }),
         /* @__PURE__ */ jsxs8("div", { class: "screenshot-preview-actions", children: [
           /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
               class: "btn btn--primary screenshot-annotate",
-              onClick: () => setAnnotatorOpen(true),
+              onClick: () => setAnnotatingIndex(index),
               children: [
                 /* @__PURE__ */ jsxs8("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__ */ jsx8("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
@@ -2692,12 +2717,13 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs8("button", { type: "button", class: "btn", onClick: clearScreenshot, children: [
+          /* @__PURE__ */ jsxs8("button", { type: "button", class: "btn", onClick: () => removeShot(index), children: [
             /* @__PURE__ */ jsx8("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__ */ jsx8("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__ */ jsxs8(
+      ] }, shot.preview)) }),
+      shots.length < MAX_SCREENSHOTS && /* @__PURE__ */ jsxs8(
         "div",
         {
           ref: dropZoneRef,
@@ -2742,12 +2768,12 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
       /* @__PURE__ */ jsx8("button", { type: "button", class: "btn", onClick: onCancel, disabled: submitting, children: strings["form.cancel"] }),
       /* @__PURE__ */ jsx8("button", { type: "submit", class: "btn btn--primary", disabled: submitting, children: submitLabel })
     ] }),
-    annotatorOpen && screenshotBlob && /* @__PURE__ */ jsx8(
+    annotatingIndex !== null && shots[annotatingIndex] && /* @__PURE__ */ jsx8(
       Annotator,
       {
-        imageBlob: screenshotBlob,
+        imageBlob: shots[annotatingIndex].blob,
         strings,
-        onCancel: () => setAnnotatorOpen(false),
+        onCancel: () => setAnnotatingIndex(null),
         onSave: handleAnnotated
       }
     )
@@ -3382,6 +3408,12 @@ var WIDGET_STYLES = `
 .screenshot-cta strong { color: var(--mfb-accent); font-weight: 600; }
 .screenshot-formats { font-size: var(--mfb-text-xs); color: var(--mfb-text-muted); }
 
+.screenshot-strip {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mfb-space-2);
+  margin-bottom: var(--mfb-space-2);
+}
 .screenshot-preview {
   position: relative;
   border: 1px solid var(--mfb-border);
@@ -3399,6 +3431,10 @@ var WIDGET_STYLES = `
   object-fit: contain;
   background: #1a1a1a;
 }
+/* In the multi-shot strip each preview stays compact so several fit. */
+.screenshot-strip .screenshot-preview img {
+  max-height: 120px;
+}
 .screenshot-preview-actions {
   display: flex;
   gap: var(--mfb-space-2);
@@ -4935,7 +4971,8 @@ function createFeedback(config) {
     document.body.appendChild(host);
   }
   async function buildAndSubmit(values) {
-    const manualScreenshot = values.synthetic ? void 0 : values.screenshot;
+    const attached = values.screenshots?.length ? values.screenshots : values.screenshot ? [values.screenshot] : void 0;
+    const manualScreenshots = values.synthetic ? void 0 : attached;
     const technical_context = capture.snapshot();
     if (user) {
       const { userHash: _hash, exp: _exp, ...safeUser } = user;
@@ -4944,7 +4981,7 @@ function createFeedback(config) {
     if (metadata && Object.keys(metadata).length > 0) {
       technical_context.metadata = { ...metadata };
     }
-    const captureMethod = manualScreenshot ? values.capture_method ?? "manual" : "none";
+    const captureMethod = manualScreenshots?.length ? values.capture_method ?? "manual" : "none";
     const payload = {
       description: values.description,
       feedback_type: values.feedback_type ?? "bug",
@@ -4955,10 +4992,13 @@ function createFeedback(config) {
       capture_method: captureMethod,
       technical_context
     };
-    if ("0.23.0") {
-      payload.widget_version = "0.23.0";
+    if ("0.24.0") {
+      payload.widget_version = "0.24.0";
+    }
+    if (manualScreenshots?.length) {
+      payload.screenshots = manualScreenshots;
+      payload.screenshot = manualScreenshots[0];
     }
-    if (manualScreenshot) payload.screenshot = manualScreenshot;
     if (values.synthetic) payload.synthetic = true;
     const pagePath = currentPagePath(config);
     if (pagePath) payload.page_path = pagePath;
@@ -5044,7 +5084,8 @@ function createFeedback(config) {
         ...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 }
+        ...partial.screenshot !== void 0 && { screenshot: partial.screenshot },
+        ...partial.screenshots !== void 0 && { screenshots: partial.screenshots }
       });
     },
     identify(u) {
@@ -5076,4 +5117,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-NCNRU3SR.mjs.map
+//# sourceMappingURL=chunk-WIQ7MTPI.mjs.map