glitchgrab 1.31.1 → 1.33.0

package/dist/index.js

@@ -989,6 +989,7 @@ function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
+      "data-glitchgrab-layer": "",
       style: {
         position: "fixed",
         inset: 0,
@@ -1508,7 +1509,9 @@ function ReportDialog({
   types,
   showSeverity = true,
   captureScreenshot = captureViaHtml2Canvas,
-  reporter
+  reporter,
+  onClose,
+  headerSlot
 }) {
   const [isEnhancing, setIsEnhancing] = (0, import_react.useState)(false);
   const [isEnhanced, setIsEnhanced] = (0, import_react.useState)(false);
@@ -1565,13 +1568,29 @@ function ReportDialog({
   const isPushToTalkRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
     if (!isOpen) return;
-    const dialogs = Array.from(
-      document.querySelectorAll(
-        '[role="dialog"][data-state="open"]'
-      )
-    );
-    dialogs.forEach((d) => d.setAttribute("inert", ""));
-    return () => dialogs.forEach((d) => d.removeAttribute("inert"));
+    const HOST_LAYERS = '[role="dialog"],[role="alertdialog"],[role="menu"],[role="listbox"]';
+    const inerted = /* @__PURE__ */ new Set();
+    const applyInert = () => {
+      document.querySelectorAll(HOST_LAYERS).forEach((el) => {
+        if (el.closest("[data-glitchgrab-layer]")) return;
+        if (el.querySelector("[data-glitchgrab-layer]")) return;
+        if (inerted.has(el) || el.hasAttribute("inert")) return;
+        el.setAttribute("inert", "");
+        inerted.add(el);
+      });
+    };
+    applyInert();
+    const observer = new MutationObserver((mutations) => {
+      const structural = mutations.some(
+        (m) => m.addedNodes.length > 0 || m.removedNodes.length > 0
+      );
+      if (structural) applyInert();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      inerted.forEach((el) => el.removeAttribute("inert"));
+    };
   }, [isOpen]);
   const [step, setStep] = (0, import_react.useState)(1);
   const [reportType, setReportType] = (0, import_react.useState)("BUG");
@@ -1662,6 +1681,8 @@ function ReportDialog({
   };
   const handleOpen = async () => {
     setSubmitted(false);
+    closePreview();
+    setAnnotatingIndex(null);
     if (availableTypes.length === 1) {
       setReportType(availableTypes[0]);
       setStep(2);
@@ -1688,14 +1709,15 @@ function ReportDialog({
     if (!isOpen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") {
-        if (previewZoomed) setPreviewZoomed(false);
+        if (annotatingIndex !== null) setAnnotatingIndex(null);
+        else if (previewZoomed) setPreviewZoomed(false);
         else if (previewIndex !== null) closePreview();
         else handleClose();
       }
     };
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
-  }, [isOpen, previewIndex, previewZoomed]);
+  }, [isOpen, previewIndex, previewZoomed, annotatingIndex]);
   (0, import_react.useEffect)(() => {
     if (previewIndex === null || annotatingIndex !== null) return;
     const handlePointerDown = (e) => {
@@ -1830,6 +1852,9 @@ function ReportDialog({
   const handleClose = () => {
     stopVoice();
     setIsOpen(false);
+    onClose == null ? void 0 : onClose();
+    closePreview();
+    setAnnotatingIndex(null);
     setStep(1);
     setRating(0);
     setHoveredStar(0);
@@ -2080,6 +2105,7 @@ function ReportDialog({
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "div",
         {
+          "data-glitchgrab-layer": "",
           style: {
             position: "fixed",
             inset: 0,
@@ -2335,6 +2361,7 @@ function ReportDialog({
                         ]
                       }
                     ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                      step === 1 && headerSlot ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginBottom: "14px" }, children: headerSlot }) : null,
                       step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "div",
                         {
@@ -3505,10 +3532,11 @@ function ReportDialog({
         style: { display: "none" }
       }
     ),
-    previewIndex !== null && screenshots[previewIndex] && (0, import_react_dom.createPortal)(
+    isOpen && previewIndex !== null && screenshots[previewIndex] && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
+          "data-glitchgrab-layer": "",
           style: {
             position: "fixed",
             inset: 0,
@@ -3661,7 +3689,7 @@ function ReportDialog({
       ),
       document.body
     ),
-    annotatingIndex !== null && screenshots[annotatingIndex] && (0, import_react_dom.createPortal)(
+    isOpen && annotatingIndex !== null && screenshots[annotatingIndex] && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         AnnotationCanvas,
         {
@@ -4267,6 +4295,29 @@ function GlitchgrabProviderInner({
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
     }
   }, []);
+  (0, import_react3.useEffect)(() => {
+    try {
+      if (typeof document === "undefined") return;
+      document.documentElement.setAttribute("data-glitchgrab-sdk", "1");
+      return () => document.documentElement.removeAttribute("data-glitchgrab-sdk");
+    } catch (e) {
+    }
+  }, []);
+  const [projectName, setProjectName] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    let cancelled = false;
+    fetch(`${baseUrl}/api/v1/sdk/project`, {
+      headers: { Authorization: `Bearer ${token}` }
+    }).then((r) => r.ok ? r.json() : null).then((json) => {
+      var _a;
+      if (cancelled || !(json == null ? void 0 : json.success) || !((_a = json.data) == null ? void 0 : _a.name)) return;
+      setProjectName(json.data.name);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [baseUrl, token]);
   (0, import_react3.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
@@ -4326,7 +4377,22 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportDialog, { report, sendFeedback: feedback, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity, reporter })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ReportDialog,
+          {
+            report,
+            sendFeedback: feedback,
+            enhanceText: enhance,
+            transcribeAudio: transcribe,
+            types,
+            showSeverity,
+            reporter,
+            headerSlot: projectName ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 11, color: "#9aa0a6" }, children: [
+              "Reporting to ",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { style: { color: "#e5e5e5" }, children: projectName })
+            ] }) : null
+          }
+        )
       ]
     }
   );