react-grab 0.0.14 → 0.0.15

package/dist/index.global.js

@@ -129,6 +129,7 @@ var ReactGrab = (function (exports) {
   var watchKeyHeldFor = (key, duration, onHeld) => {
     let timeoutId = null;
     let unsubscribe = null;
+    const watchStartTime = Date.now();
     const cleanup = () => {
       if (timeoutId !== null) {
         clearTimeout(timeoutId);
@@ -153,29 +154,9 @@ var ReactGrab = (function (exports) {
       }
       return checkSingleKeyPressed(key, pressedKeys);
     };
-    const getKeyFromTimestamps = (keyToFind, timestamps) => {
-      if (keyToFind.length === 1) {
-        return timestamps.get(keyToFind.toLowerCase()) || timestamps.get(keyToFind.toUpperCase());
-      }
-      return timestamps.get(keyToFind);
-    };
-    const getEarliestPressTime = (timestamps) => {
-      const keysToInspect = Array.isArray(key) ? key : [key];
-      let earliest;
-      for (const keyFromCombo of keysToInspect) {
-        const timestamp = getKeyFromTimestamps(keyFromCombo, timestamps);
-        if (timestamp === void 0) {
-          return void 0;
-        }
-        if (earliest === void 0 || timestamp < earliest) {
-          earliest = timestamp;
-        }
-      }
-      return earliest;
-    };
     const scheduleCallback = () => {
       const state = libStore.getState();
-      const { keyPressTimestamps, pressedKeys } = state;
+      const { pressedKeys } = state;
       if (!checkAllKeysPressed(pressedKeys)) {
         if (timeoutId !== null) {
           clearTimeout(timeoutId);
@@ -183,15 +164,7 @@ var ReactGrab = (function (exports) {
         }
         return;
       }
-      const earliestPressTime = getEarliestPressTime(keyPressTimestamps);
-      if (earliestPressTime === void 0) {
-        if (timeoutId !== null) {
-          clearTimeout(timeoutId);
-          timeoutId = null;
-        }
-        return;
-      }
-      const elapsed = Date.now() - earliestPressTime;
+      const elapsed = Date.now() - watchStartTime;
       const remaining = duration - elapsed;
       if (remaining <= 0) {
         onHeld();
@@ -2469,7 +2442,6 @@ ${error.stack}`;
   var INDICATOR_CLAMP_PADDING_PX = 4;
   var INDICATOR_SUCCESS_VISIBLE_MS = 1500;
   var INDICATOR_FADE_MS = 200;
-  var INDICATOR_TOTAL_HIDE_DELAY_MS = INDICATOR_SUCCESS_VISIBLE_MS + INDICATOR_FADE_MS;
   var lerp = (start, end, factor) => {
     return start + (end - start) * factor;
   };
@@ -2554,6 +2526,30 @@ ${error.stack}`;
       }
     };
   };
+  var createGrabbedOverlay = (root, selection) => {
+    const element = document.createElement("div");
+    element.style.position = "fixed";
+    element.style.top = `${selection.y}px`;
+    element.style.left = `${selection.x}px`;
+    element.style.width = `${selection.width}px`;
+    element.style.height = `${selection.height}px`;
+    element.style.borderRadius = selection.borderRadius;
+    element.style.transform = selection.transform;
+    element.style.pointerEvents = "none";
+    element.style.border = "1px solid rgb(210, 57, 192)";
+    element.style.backgroundColor = "rgba(210, 57, 192, 0.2)";
+    element.style.zIndex = "2147483646";
+    element.style.boxSizing = "border-box";
+    element.style.transition = "opacity 0.3s ease-out";
+    element.style.opacity = "1";
+    root.appendChild(element);
+    requestAnimationFrame(() => {
+      element.style.opacity = "0";
+    });
+    setTimeout(() => {
+      element.remove();
+    }, 300);
+  };
   var createSpinner = () => {
     const spinner = document.createElement("span");
     spinner.style.display = "inline-block";
@@ -2599,12 +2595,12 @@ ${error.stack}`;
     indicator.style.whiteSpace = "nowrap";
     return indicator;
   };
-  var showLabel = (selectionLeftPx, selectionTopPx, tagName) => {
+  var showLabel = (root, selectionLeftPx, selectionTopPx, tagName) => {
     let indicator = activeIndicator;
     let isNewIndicator = false;
     if (!indicator) {
       indicator = createIndicator();
-      document.body.appendChild(indicator);
+      root.appendChild(indicator);
       activeIndicator = indicator;
       isNewIndicator = true;
       isProcessing = false;
@@ -2658,22 +2654,47 @@ ${error.stack}`;
     }
   };
   var isProcessing = false;
-  var updateLabelToProcessing = () => {
-    if (!activeIndicator || isProcessing) return () => {
+  var activeGrabbedIndicators = /* @__PURE__ */ new Set();
+  var updateLabelToProcessing = (root, selectionLeftPx, selectionTopPx) => {
+    const indicator = createIndicator();
+    indicator.style.zIndex = "2147483648";
+    root.appendChild(indicator);
+    activeGrabbedIndicators.add(indicator);
+    const positionIndicator = () => {
+      if (selectionLeftPx === void 0 || selectionTopPx === void 0) return;
+      const indicatorRect = indicator.getBoundingClientRect();
+      const viewportWidthPx = window.innerWidth;
+      const viewportHeightPx = window.innerHeight;
+      let indicatorLeftPx = Math.round(selectionLeftPx);
+      let indicatorTopPx = Math.round(selectionTopPx) - indicatorRect.height - LABEL_OFFSET_PX;
+      const CLAMPED_PADDING = INDICATOR_CLAMP_PADDING_PX;
+      const minLeft = VIEWPORT_MARGIN_PX;
+      const minTop = VIEWPORT_MARGIN_PX;
+      const maxLeft = viewportWidthPx - indicatorRect.width - VIEWPORT_MARGIN_PX;
+      const maxTop = viewportHeightPx - indicatorRect.height - VIEWPORT_MARGIN_PX;
+      const willClampLeft = indicatorLeftPx < minLeft;
+      const willClampTop = indicatorTopPx < minTop;
+      const isClamped = willClampLeft || willClampTop;
+      indicatorLeftPx = Math.max(minLeft, Math.min(indicatorLeftPx, maxLeft));
+      indicatorTopPx = Math.max(minTop, Math.min(indicatorTopPx, maxTop));
+      if (isClamped) {
+        indicatorLeftPx += CLAMPED_PADDING;
+        indicatorTopPx += CLAMPED_PADDING;
+      }
+      indicator.style.left = `${indicatorLeftPx}px`;
+      indicator.style.top = `${indicatorTopPx}px`;
+      indicator.style.right = "auto";
     };
-    isProcessing = true;
-    const indicator = activeIndicator;
-    indicator.innerHTML = "";
     const loadingSpinner = createSpinner();
     const labelText = document.createElement("span");
     labelText.textContent = "Grabbing\u2026";
     indicator.appendChild(loadingSpinner);
     indicator.appendChild(labelText);
+    positionIndicator();
+    requestAnimationFrame(() => {
+      indicator.style.opacity = "1";
+    });
     return (tagName) => {
-      if (!activeIndicator) {
-        isProcessing = false;
-        return;
-      }
       indicator.textContent = "";
       const checkmarkIcon = document.createElement("span");
       checkmarkIcon.textContent = "\u2713";
@@ -2689,14 +2710,14 @@ ${error.stack}`;
       newLabelText.appendChild(tagNameMonospace);
       indicator.appendChild(checkmarkIcon);
       indicator.appendChild(newLabelText);
+      requestAnimationFrame(() => {
+        positionIndicator();
+      });
       setTimeout(() => {
         indicator.style.opacity = "0";
         setTimeout(() => {
           indicator.remove();
-          if (activeIndicator === indicator) {
-            activeIndicator = null;
-          }
-          isProcessing = false;
+          activeGrabbedIndicators.delete(indicator);
         }, INDICATOR_FADE_MS);
       }, INDICATOR_SUCCESS_VISIBLE_MS);
     };
@@ -2708,6 +2729,88 @@ ${error.stack}`;
     }
     isProcessing = false;
   };
+  var cleanupGrabbedIndicators = () => {
+    for (const indicator of activeGrabbedIndicators) {
+      indicator.remove();
+    }
+    activeGrabbedIndicators.clear();
+  };
+  var activeProgressIndicator = null;
+  var createProgressIndicatorElement = () => {
+    const container = document.createElement("div");
+    container.style.position = "fixed";
+    container.style.zIndex = "2147483647";
+    container.style.pointerEvents = "none";
+    container.style.opacity = "0";
+    container.style.transition = "opacity 0.1s ease-in-out";
+    const progressBarContainer = document.createElement("div");
+    progressBarContainer.style.width = "32px";
+    progressBarContainer.style.height = "2px";
+    progressBarContainer.style.backgroundColor = "rgba(178, 28, 142, 0.2)";
+    progressBarContainer.style.borderRadius = "1px";
+    progressBarContainer.style.overflow = "hidden";
+    progressBarContainer.style.position = "relative";
+    const progressBarFill = document.createElement("div");
+    progressBarFill.style.width = "0%";
+    progressBarFill.style.height = "100%";
+    progressBarFill.style.backgroundColor = "#b21c8e";
+    progressBarFill.style.borderRadius = "1px";
+    progressBarFill.style.transition = "width 0.05s linear";
+    progressBarFill.setAttribute("data-progress-fill", "true");
+    progressBarContainer.appendChild(progressBarFill);
+    container.appendChild(progressBarContainer);
+    return container;
+  };
+  var showProgressIndicator = (root, progress, mouseX, mouseY) => {
+    if (!activeProgressIndicator) {
+      activeProgressIndicator = createProgressIndicatorElement();
+      root.appendChild(activeProgressIndicator);
+      requestAnimationFrame(() => {
+        if (activeProgressIndicator) {
+          activeProgressIndicator.style.opacity = "1";
+        }
+      });
+    }
+    const indicator = activeProgressIndicator;
+    const indicatorRect = indicator.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const CURSOR_OFFSET = 14;
+    const VIEWPORT_MARGIN = 8;
+    let indicatorLeft = mouseX - indicatorRect.width / 2;
+    let indicatorTop = mouseY + CURSOR_OFFSET;
+    if (indicatorTop + indicatorRect.height + VIEWPORT_MARGIN > viewportHeight) {
+      indicatorTop = mouseY - indicatorRect.height - CURSOR_OFFSET;
+    }
+    indicatorTop = Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(indicatorTop, viewportHeight - indicatorRect.height - VIEWPORT_MARGIN)
+    );
+    indicatorLeft = Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(indicatorLeft, viewportWidth - indicatorRect.width - VIEWPORT_MARGIN)
+    );
+    indicator.style.top = `${indicatorTop}px`;
+    indicator.style.left = `${indicatorLeft}px`;
+    const progressFill = indicator.querySelector(
+      "[data-progress-fill]"
+    );
+    if (progressFill) {
+      const percentage = Math.min(100, Math.max(0, progress * 100));
+      progressFill.style.width = `${percentage}%`;
+    }
+  };
+  var hideProgressIndicator = () => {
+    if (activeProgressIndicator) {
+      activeProgressIndicator.style.opacity = "0";
+      setTimeout(() => {
+        if (activeProgressIndicator) {
+          activeProgressIndicator.remove();
+          activeProgressIndicator = null;
+        }
+      }, 100);
+    }
+  };
 
   // src/utils/copy-text.ts
   var IS_NAVIGATOR_CLIPBOARD_AVAILABLE = typeof window !== "undefined" && window.navigator.clipboard && window.isSecureContext;
@@ -2773,19 +2876,6 @@ ${error.stack}`;
     return root;
   };
 
-  // src/utils/schedule-run-when-idle.ts
-  var scheduleRunWhenIdle = (callback) => {
-    if ("scheduler" in globalThis) {
-      return globalThis.scheduler.postTask(callback, {
-        priority: "background"
-      });
-    }
-    if ("requestIdleCallback" in window) {
-      return requestIdleCallback(callback);
-    }
-    return setTimeout(callback, 0);
-  };
-
   // src/utils/store.ts
   var createStore = (initializer) => {
     const subscriberMap = /* @__PURE__ */ new Map();
@@ -2857,29 +2947,7 @@ ${error.stack}`;
     return store;
   };
 
-  // src/utils/throttle.ts
-  var throttle = (fn, delay) => {
-    let timeout = null;
-    const throttled = (...args) => {
-      if (timeout) {
-        return;
-      }
-      timeout = window.setTimeout(() => {
-        fn(...args);
-        timeout = null;
-      }, delay);
-    };
-    throttled.cancel = () => {
-      if (timeout) {
-        window.clearTimeout(timeout);
-        timeout = null;
-      }
-    };
-    return throttled;
-  };
-
   // src/index.ts
-  var THROTTLE_DELAY = 16;
   var libStore = createStore(() => ({
     keyPressTimestamps: /* @__PURE__ */ new Map(),
     mouseX: -1e3,
@@ -2899,7 +2967,10 @@ ${error.stack}`;
     const root = mountRoot();
     const selectionOverlay = createSelectionOverlay(root);
     let hoveredElement = null;
+    let lastGrabbedElement = null;
     let isCopying = false;
+    let progressAnimationFrame = null;
+    let progressStartTime = null;
     const checkIsActivationHotkeyPressed = () => {
       if (Array.isArray(resolvedOptions.hotkey)) {
         for (const key of resolvedOptions.hotkey) {
@@ -2911,6 +2982,31 @@ ${error.stack}`;
       }
       return isKeyPressed(resolvedOptions.hotkey);
     };
+    const updateProgressIndicator = () => {
+      if (progressStartTime === null) return;
+      const elapsed = Date.now() - progressStartTime;
+      const progress = Math.min(1, elapsed / resolvedOptions.keyHoldDuration);
+      const { mouseX, mouseY } = libStore.getState();
+      showProgressIndicator(root, progress, mouseX, mouseY);
+      if (progress < 1) {
+        progressAnimationFrame = requestAnimationFrame(updateProgressIndicator);
+      }
+    };
+    const startProgressTracking = () => {
+      if (progressAnimationFrame !== null) return;
+      progressStartTime = Date.now();
+      const { mouseX, mouseY } = libStore.getState();
+      showProgressIndicator(root, 0, mouseX, mouseY);
+      progressAnimationFrame = requestAnimationFrame(updateProgressIndicator);
+    };
+    const stopProgressTracking = () => {
+      if (progressAnimationFrame !== null) {
+        cancelAnimationFrame(progressAnimationFrame);
+        progressAnimationFrame = null;
+      }
+      progressStartTime = null;
+      hideProgressIndicator();
+    };
     let cleanupActivationHotkeyWatcher = null;
     const handleKeyStateChange = (pressedKeys) => {
       const { overlayMode } = libStore.getState();
@@ -2945,6 +3041,7 @@ ${error.stack}`;
           cleanupActivationHotkeyWatcher();
           cleanupActivationHotkeyWatcher = null;
         }
+        stopProgressTracking();
         return;
       }
       const isActivationHotkeyPressed = checkIsActivationHotkeyPressed();
@@ -2959,9 +3056,11 @@ ${error.stack}`;
             overlayMode: "hidden"
           }));
         }
+        stopProgressTracking();
         return;
       }
       if (overlayMode === "hidden" && !cleanupActivationHotkeyWatcher) {
+        startProgressTracking();
         cleanupActivationHotkeyWatcher = watchKeyHeldFor(
           resolvedOptions.hotkey,
           resolvedOptions.keyHoldDuration,
@@ -2970,6 +3069,7 @@ ${error.stack}`;
               ...state,
               overlayMode: "visible"
             }));
+            stopProgressTracking();
             cleanupActivationHotkeyWatcher = null;
           }
         );
@@ -2979,13 +3079,23 @@ ${error.stack}`;
       handleKeyStateChange,
       (state) => state.pressedKeys
     );
-    const handleMouseMove = throttle((event) => {
-      libStore.setState((state) => ({
-        ...state,
-        mouseX: event.clientX,
-        mouseY: event.clientY
-      }));
-    }, THROTTLE_DELAY);
+    let mouseMoveScheduled = false;
+    let pendingMouseX = -1e3;
+    let pendingMouseY = -1e3;
+    const handleMouseMove = (event) => {
+      pendingMouseX = event.clientX;
+      pendingMouseY = event.clientY;
+      if (mouseMoveScheduled) return;
+      mouseMoveScheduled = true;
+      requestAnimationFrame(() => {
+        mouseMoveScheduled = false;
+        libStore.setState((state) => ({
+          ...state,
+          mouseX: pendingMouseX,
+          mouseY: pendingMouseY
+        }));
+      });
+    };
     const handleMouseDown = (event) => {
       if (event.button !== 0) {
         return;
@@ -3002,8 +3112,15 @@ ${error.stack}`;
         overlayMode: "copying"
       }));
     };
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        cleanupGrabbedIndicators();
+        hideLabel();
+      }
+    };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
     const cleanupTrackHotkeys = trackHotkeys();
     const getElementAtPosition = (x, y) => {
       const elements = document.elementsFromPoint(x, y);
@@ -3020,70 +3137,75 @@ ${error.stack}`;
       return null;
     };
     const handleCopy = async (element) => {
-      const cleanupIndicator = updateLabelToProcessing();
+      const tagName = (element.tagName || "").toLowerCase();
+      const rect = element.getBoundingClientRect();
+      const cleanupIndicator = updateLabelToProcessing(root, rect.left, rect.top);
       try {
-        const stack = await getStack(element);
         const htmlSnippet = getHTMLSnippet(element);
-        let text = htmlSnippet;
+        await copyTextToClipboard(
+          `
+
+<referenced_element>
+${htmlSnippet}
+</referenced_element>`
+        );
+        cleanupIndicator(tagName);
+        const stack = await getStack(element);
         if (stack) {
           const filteredStack = filterStack(stack);
           const serializedStack = serializeStack(filteredStack);
-          text = `${htmlSnippet}
+          const fullText = `${htmlSnippet}
 
 Component owner stack:
 ${serializedStack}`;
-        }
-        await copyTextToClipboard(
-          `
+          await copyTextToClipboard(
+            `
 
 <referenced_element>
-${text}
+${fullText}
 </referenced_element>`
-        );
-        const tagName = (element.tagName || "").toLowerCase();
-        cleanupIndicator(tagName);
+          ).catch(() => {
+          });
+        }
       } catch {
-        cleanupIndicator();
+        cleanupIndicator(tagName);
       }
     };
-    const handleRender = throttle((state) => {
+    const handleRender = (state) => {
       const { mouseX, mouseY, overlayMode } = state;
       if (overlayMode === "hidden") {
         if (selectionOverlay.isVisible()) {
           selectionOverlay.hide();
-          if (!isCopying) {
-            hideLabel();
-          }
-          hoveredElement = null;
         }
+        if (!isCopying) {
+          hideLabel();
+        }
+        hoveredElement = null;
+        lastGrabbedElement = null;
         return;
       }
       if (overlayMode === "copying" && hoveredElement) {
-        const computedStyle2 = window.getComputedStyle(hoveredElement);
-        const rect2 = hoveredElement.getBoundingClientRect();
-        selectionOverlay.update({
-          borderRadius: computedStyle2.borderRadius || "0px",
-          height: rect2.height,
-          transform: computedStyle2.transform || "none",
-          width: rect2.width,
-          x: rect2.left,
-          y: rect2.top
-        });
-        if (!selectionOverlay.isVisible()) {
-          selectionOverlay.show();
-        }
         if (!isCopying) {
           isCopying = true;
+          lastGrabbedElement = hoveredElement;
+          const computedStyle2 = window.getComputedStyle(hoveredElement);
+          const rect2 = hoveredElement.getBoundingClientRect();
+          createGrabbedOverlay(root, {
+            borderRadius: computedStyle2.borderRadius || "0px",
+            height: rect2.height,
+            transform: computedStyle2.transform || "none",
+            width: rect2.width,
+            x: rect2.left,
+            y: rect2.top
+          });
           void handleCopy(hoveredElement).finally(() => {
-            libStore.setState((state2) => ({
-              ...state2,
-              overlayMode: "hidden"
-            }));
-            selectionOverlay.hide();
-            window.setTimeout(() => {
-              isCopying = false;
-            }, INDICATOR_TOTAL_HIDE_DELAY_MS);
+            isCopying = false;
           });
+          const isStillPressed = checkIsActivationHotkeyPressed();
+          libStore.setState((state2) => ({
+            ...state2,
+            overlayMode: isStillPressed ? "visible" : "hidden"
+          }));
         }
         return;
       }
@@ -3091,13 +3213,26 @@ ${text}
       if (!element) {
         if (selectionOverlay.isVisible()) {
           selectionOverlay.hide();
-          if (!isCopying) {
-            hideLabel();
-          }
+        }
+        if (!isCopying) {
+          hideLabel();
         }
         hoveredElement = null;
         return;
       }
+      if (lastGrabbedElement && element !== lastGrabbedElement) {
+        lastGrabbedElement = null;
+      }
+      if (element === lastGrabbedElement) {
+        if (selectionOverlay.isVisible()) {
+          selectionOverlay.hide();
+        }
+        if (!isCopying) {
+          hideLabel();
+        }
+        hoveredElement = element;
+        return;
+      }
       const tagName = (element.tagName || "").toLowerCase();
       hoveredElement = element;
       const rect = element.getBoundingClientRect();
@@ -3115,35 +3250,38 @@ ${text}
       if (!selectionOverlay.isVisible()) {
         selectionOverlay.show();
       }
-      showLabel(rect.left, rect.top, tagName);
-    }, 10);
-    const cleanupRenderSubscription = libStore.subscribe((state) => {
-      scheduleRunWhenIdle(() => {
-        handleRender(state);
+      showLabel(root, rect.left, rect.top, tagName);
+    };
+    let renderScheduled = false;
+    const scheduleRender = () => {
+      if (renderScheduled) return;
+      renderScheduled = true;
+      requestAnimationFrame(() => {
+        renderScheduled = false;
+        handleRender(libStore.getState());
       });
+    };
+    const cleanupRenderSubscription = libStore.subscribe(() => {
+      scheduleRender();
     });
-    let timeout = null;
-    const render = () => {
-      timeout = window.setTimeout(() => {
-        scheduleRunWhenIdle(() => {
-          handleRender(libStore.getState());
-          render();
-        });
-      }, 100);
+    const continuousRender = () => {
+      scheduleRender();
+      requestAnimationFrame(continuousRender);
     };
-    render();
+    continuousRender();
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
       cleanupTrackHotkeys();
       cleanupRenderSubscription();
       cleanupKeyStateChangeSubscription();
-      if (timeout) {
-        window.clearTimeout(timeout);
-      }
       if (cleanupActivationHotkeyWatcher) {
         cleanupActivationHotkeyWatcher();
       }
+      stopProgressTracking();
+      cleanupGrabbedIndicators();
+      hideLabel();
     };
   };
   if (typeof window !== "undefined" && typeof document !== "undefined") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grab",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/aidenybai/react-grab#readme",