ui-sniper 3.2.1 → 3.2.2

package/README.md

@@ -39,12 +39,21 @@ The toolbar appears in the bottom-right corner. Click to activate, then click an
 - **Text selection** – Select text to annotate specific content
 - **Multi-select** – Drag to select multiple elements at once
 - **Area selection** – Drag to annotate any region, even empty space
-- **Animation pause** – Freeze all animations (CSS, JS, videos) to capture specific states
+- **Animation pause (P)** – Freeze all animations (CSS, JS, videos) to capture specific states
+- **X-Ray mode (X)** – Reveal invisible structure, bounding boxes, and alignments
+- **Layout mode (L)** – Drag, drop, edit text, or draw directly on the screen
+- **Detailed Help Panel** – In-app guide detailing how, why, and the value of each mode
 - **Structured output** – Copy markdown with selectors, positions, and context
 - **Programmatic access** – Callback prop for direct integration with tools
 - **Dark/light mode** – Toggle in settings, persists to localStorage
 - **Zero dependencies** – Pure CSS animations, no runtime libraries
 
+## What's New in v3.2
+- **Rich Help Panel**: A new built-in help panel explaining feature usage and value propositions.
+- **Improved Review Panel**: Hover states, distinct color actions (Delete, Copy, Mark Done), and layout fixes preventing overlap.
+- **Enhanced Visual Feedback**: The toolbar now has a distinct active border, and capturing screenshots accurately respects visibility states.
+- **Advanced X-Ray & Layout Tools**: Reposition elements on the fly or inspect padding/margins before writing feedback.
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -135,6 +144,6 @@ Full documentation at [hara-xy.com](https://hara-xy.com)
 
 ## License
 
-© 2026 Benji Taylor
+© 2026 Shiva Patil
 
 Licensed under PolyForm Shield 1.0.0

package/dist/index.js

@@ -3706,7 +3706,7 @@ var styles_module_default4 = classNames5;
 
 // src/components/xray-overlay/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function XRayOverlay({ isActive, isDarkMode }) {
+function XRayOverlay({ isActive, isDarkMode, isFrozen }) {
   const [hoveredNode, setHoveredNode] = (0, import_react4.useState)(null);
   const [stylesData, setStylesData] = (0, import_react4.useState)({});
   const [cursorPos, setCursorPos] = (0, import_react4.useState)({ x: 0, y: 0 });
@@ -3716,6 +3716,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]")) {
@@ -3739,7 +3740,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 (0, import_react_dom2.createPortal)(
@@ -7879,20 +7880,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) {
@@ -8948,7 +8935,7 @@ function SettingsPanel({
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { className: styles_module_default11.settingsBrand, href: "https://hara-xy.com", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { width: "72", height: "16", viewBox: "0 0 500 151", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("p", { className: styles_module_default11.settingsVersion, children: [
                   "v",
-                  "3.2.1"
+                  "3.2.2"
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
@@ -10981,7 +10968,7 @@ function PageFeedbackToolbarCSS({
     });
   }, [effectiveReactMode]);
   (0, import_react11.useEffect)(() => {
-    if (!isActive || isDrawMode || isDesignMode || isXRayMode || showReviewPanel) return;
+    if (!isActive || isDrawMode || isDesignMode || showReviewPanel) return;
     const handleClick = (e) => {
       if (justFinishedDragRef.current) {
         justFinishedDragRef.current = false;
@@ -11134,7 +11121,7 @@ function PageFeedbackToolbarCSS({
     };
   }, [isActive, pendingMultiSelectElements, createMultiSelectPendingAnnotation]);
   (0, import_react11.useEffect)(() => {
-    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;
@@ -11485,16 +11472,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
             );
@@ -12202,7 +12203,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();
@@ -12210,6 +12211,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 || "");
@@ -12238,7 +12257,8 @@ function PageFeedbackToolbarCSS({
     toggleFreeze,
     copyOutput,
     clearAll,
-    pendingMultiSelectElements
+    pendingMultiSelectElements,
+    isXRayMode
   ]);
   if (!mounted) return null;
   if (isToolbarHidden) return null;
@@ -12561,7 +12581,7 @@ function PageFeedbackToolbarCSS({
                                 ),
                                 /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: styles_module_default6.buttonTooltip, children: [
                                   "Clear your notes",
-                                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: styles_module_default6.shortcut, children: "X" })
+                                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: styles_module_default6.shortcut, children: "Shift+X" })
                                 ] })
                               ] }),
                               /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: styles_module_default6.buttonWrapper, children: [
@@ -12810,7 +12830,7 @@ function PageFeedbackToolbarCSS({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XRayOverlay, { isActive: isXRayMode, isDarkMode }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XRayOverlay, { isActive: isXRayMode, isDarkMode, isFrozen: !!(pendingAnnotation || editingAnnotation) }),
               (isDesignMode || designOverlayExiting) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "div",
                 {