ui-sniper 3.2.1 → 3.2.2

package/dist/index.mjs

@@ -3623,7 +3623,7 @@ var styles_module_default4 = classNames5;
 
 // src/components/xray-overlay/index.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-function XRayOverlay({ isActive, isDarkMode }) {
+function XRayOverlay({ isActive, isDarkMode, isFrozen }) {
   const [hoveredNode, setHoveredNode] = useState4(null);
   const [stylesData, setStylesData] = useState4({});
   const [cursorPos, setCursorPos] = useState4({ x: 0, y: 0 });
@@ -3633,6 +3633,7 @@ function XRayOverlay({ isActive, isDarkMode }) {
       return;
     }
     const onMouseMove = (e) => {
+      if (isFrozen) return;
       setCursorPos({ x: e.clientX, y: e.clientY });
       const target = e.target;
       if (target.closest("[data-ui-sniper-toolbar]") || target.closest("[data-ui-sniper-root]") || target.closest("[data-review-panel]")) {
@@ -3656,7 +3657,7 @@ function XRayOverlay({ isActive, isDarkMode }) {
     };
     window.addEventListener("mousemove", onMouseMove);
     return () => window.removeEventListener("mousemove", onMouseMove);
-  }, [isActive]);
+  }, [isActive, isFrozen]);
   if (!isActive || !hoveredNode) return null;
   const rect = hoveredNode.getBoundingClientRect();
   return createPortal2(
@@ -7796,20 +7797,6 @@ async function getDomCapture() {
   }
 }
 function findCaptureTarget(captureX, captureY, captureW, captureH) {
-  const cx = captureX + captureW / 2;
-  const cy = captureY + captureH / 2;
-  const elements = document.elementsFromPoint(cx, cy);
-  for (const el of elements) {
-    if (!(el instanceof HTMLElement)) continue;
-    if (el.hasAttribute("data-ui-sniper-root")) continue;
-    if (el.closest?.("[data-ui-sniper-root]")) continue;
-    if (el.tagName === "CANVAS") continue;
-    if (el === document.documentElement || el === document.body) continue;
-    const rect = el.getBoundingClientRect();
-    if (rect.left <= captureX + captureW * 0.1 && rect.top <= captureY + captureH * 0.1 && rect.right >= captureX + captureW * 0.9 && rect.bottom >= captureY + captureH * 0.9) {
-      return el;
-    }
-  }
   return document.body;
 }
 async function captureDomRegion(regionX, regionY, regionW, regionH, strokes, padding = 32, quality = 0.85, piiConfig) {
@@ -8865,7 +8852,7 @@ function SettingsPanel({
                 /* @__PURE__ */ jsx15("a", { className: styles_module_default11.settingsBrand, href: "https://hara-xy.com", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx15("svg", { width: "72", height: "16", viewBox: "0 0 500 151", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("text", { x: "10", y: "110", fontFamily: "'Arial Black', 'Impact', sans-serif", fontSize: "105", fontWeight: "900", fontStyle: "italic", letterSpacing: "-2", fill: "currentColor", children: "UI SNIPER" }) }) }),
                 /* @__PURE__ */ jsxs14("p", { className: styles_module_default11.settingsVersion, children: [
                   "v",
-                  "3.2.1"
+                  "3.2.2"
                 ] }),
                 /* @__PURE__ */ jsx15(
                   "button",
@@ -10898,7 +10885,7 @@ function PageFeedbackToolbarCSS({
     });
   }, [effectiveReactMode]);
   useEffect8(() => {
-    if (!isActive || isDrawMode || isDesignMode || isXRayMode || showReviewPanel) return;
+    if (!isActive || isDrawMode || isDesignMode || showReviewPanel) return;
     const handleClick = (e) => {
       if (justFinishedDragRef.current) {
         justFinishedDragRef.current = false;
@@ -11051,7 +11038,7 @@ function PageFeedbackToolbarCSS({
     };
   }, [isActive, pendingMultiSelectElements, createMultiSelectPendingAnnotation]);
   useEffect8(() => {
-    if (!isActive || pendingAnnotation || isDrawMode || isDesignMode || isXRayMode) return;
+    if (!isActive || pendingAnnotation || isDrawMode || isDesignMode) return;
     const handleMouseDown = (e) => {
       const target = e.composedPath()[0] || e.target;
       if (closestCrossingShadow(target, "[data-feedback-toolbar]")) return;
@@ -11402,16 +11389,30 @@ function PageFeedbackToolbarCSS({
         }
         if (elToCapture) {
           try {
-            const rect = elToCapture.getBoundingClientRect();
+            let targetRect = elToCapture.getBoundingClientRect();
+            let currentEl = elToCapture;
+            const MAX_W = Math.min(800, window.innerWidth - 40);
+            const MAX_H = Math.min(600, window.innerHeight - 40);
+            for (let i = 0; i < 4; i++) {
+              if (!currentEl || !currentEl.parentElement) break;
+              if (currentEl.parentElement === document.body) break;
+              const parentRect = currentEl.parentElement.getBoundingClientRect();
+              if (parentRect.width <= MAX_W && parentRect.height <= MAX_H) {
+                targetRect = parentRect;
+                currentEl = currentEl.parentElement;
+              } else {
+                break;
+              }
+            }
             const result = await captureDomRegion(
-              rect.left,
-              rect.top,
-              rect.width,
-              rect.height,
+              targetRect.left,
+              targetRect.top,
+              targetRect.width,
+              targetRect.height,
               [],
               // No strokes for standard annotation
-              150,
-              // 150px padding to show surrounding context
+              48,
+              // 48px extra padding around the logical parent
               0.8,
               piiConfig.enabled ? piiConfig : void 0
             );
@@ -12119,7 +12120,7 @@ function PageFeedbackToolbarCSS({
           copyOutput();
         }
       }
-      if (e.key === "x" || e.key === "X") {
+      if ((e.key === "x" || e.key === "X") && e.shiftKey) {
         if (annotations.length > 0 || designPlacements.length > 0 || rearrangeState) {
           e.preventDefault();
           hideTooltipsUntilMouseLeave();
@@ -12127,6 +12128,24 @@ function PageFeedbackToolbarCSS({
           if (designPlacements.length > 0) setDesignPlacements([]);
           if (rearrangeState) setRearrangeState(null);
         }
+      } else if ((e.key === "x" || e.key === "X") && !e.shiftKey) {
+        e.preventDefault();
+        hideTooltipsUntilMouseLeave();
+        setIsXRayMode(!isXRayMode);
+      }
+      if (e.key === "l" || e.key === "L") {
+        e.preventDefault();
+        hideTooltipsUntilMouseLeave();
+        if (isDesignMode) {
+          closeDesignMode();
+        } else {
+          setIsDesignMode(true);
+        }
+      }
+      if (e.key === "p" || e.key === "P") {
+        e.preventDefault();
+        hideTooltipsUntilMouseLeave();
+        toggleFreeze();
       }
       if (e.key === "s" || e.key === "S") {
         const hasValidWebhook = isValidUrl(settings.webhookUrl) || isValidUrl(webhookUrl || "");
@@ -12155,7 +12174,8 @@ function PageFeedbackToolbarCSS({
     toggleFreeze,
     copyOutput,
     clearAll,
-    pendingMultiSelectElements
+    pendingMultiSelectElements,
+    isXRayMode
   ]);
   if (!mounted) return null;
   if (isToolbarHidden) return null;
@@ -12478,7 +12498,7 @@ function PageFeedbackToolbarCSS({
                                 ),
                                 /* @__PURE__ */ jsxs16("span", { className: styles_module_default6.buttonTooltip, children: [
                                   "Clear your notes",
-                                  /* @__PURE__ */ jsx17("span", { className: styles_module_default6.shortcut, children: "X" })
+                                  /* @__PURE__ */ jsx17("span", { className: styles_module_default6.shortcut, children: "Shift+X" })
                                 ] })
                               ] }),
                               /* @__PURE__ */ jsxs16("div", { className: styles_module_default6.buttonWrapper, children: [
@@ -12727,7 +12747,7 @@ function PageFeedbackToolbarCSS({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx17(XRayOverlay, { isActive: isXRayMode, isDarkMode }),
+              /* @__PURE__ */ jsx17(XRayOverlay, { isActive: isXRayMode, isDarkMode, isFrozen: !!(pendingAnnotation || editingAnnotation) }),
               (isDesignMode || designOverlayExiting) && /* @__PURE__ */ jsx17(
                 "div",
                 {