glitchgrab 1.31.0 → 1.32.0

package/dist/index.mjs

@@ -935,6 +935,7 @@ function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-glitchgrab-layer": "",
       style: {
         position: "fixed",
         inset: 0,
@@ -1511,13 +1512,29 @@ function ReportDialog({
   const isPushToTalkRef = useRef2(false);
   useEffect2(() => {
     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] = useState2(1);
   const [reportType, setReportType] = useState2("BUG");
@@ -1608,6 +1625,8 @@ function ReportDialog({
   };
   const handleOpen = async () => {
     setSubmitted(false);
+    closePreview();
+    setAnnotatingIndex(null);
     if (availableTypes.length === 1) {
       setReportType(availableTypes[0]);
       setStep(2);
@@ -1634,14 +1653,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]);
   useEffect2(() => {
     if (previewIndex === null || annotatingIndex !== null) return;
     const handlePointerDown = (e) => {
@@ -1776,6 +1796,8 @@ function ReportDialog({
   const handleClose = () => {
     stopVoice();
     setIsOpen(false);
+    closePreview();
+    setAnnotatingIndex(null);
     setStep(1);
     setRating(0);
     setHoveredStar(0);
@@ -2026,6 +2048,7 @@ function ReportDialog({
       /* @__PURE__ */ jsx2(
         "div",
         {
+          "data-glitchgrab-layer": "",
           style: {
             position: "fixed",
             inset: 0,
@@ -3451,10 +3474,11 @@ function ReportDialog({
         style: { display: "none" }
       }
     ),
-    previewIndex !== null && screenshots[previewIndex] && createPortal(
+    isOpen && previewIndex !== null && screenshots[previewIndex] && createPortal(
       /* @__PURE__ */ jsxs2(
         "div",
         {
+          "data-glitchgrab-layer": "",
           style: {
             position: "fixed",
             inset: 0,
@@ -3607,7 +3631,7 @@ function ReportDialog({
       ),
       document.body
     ),
-    annotatingIndex !== null && screenshots[annotatingIndex] && createPortal(
+    isOpen && annotatingIndex !== null && screenshots[annotatingIndex] && createPortal(
       /* @__PURE__ */ jsx2(
         AnnotationCanvas,
         {