react-grab 0.0.13 → 0.0.15

package/dist/index.global.js

@@ -63,7 +63,7 @@ var ReactGrab = (function (exports) {
       if (isKeyboardEventTriggeredByInput(event)) {
         return;
       }
-      if (event.code === undefined) {
+      if (event.code === void 0) {
         return;
       }
       libStore.setState((state) => {
@@ -79,7 +79,7 @@ var ReactGrab = (function (exports) {
       });
     };
     const handleKeyUp = (event) => {
-      if (event.code === undefined) {
+      if (event.code === void 0) {
         return;
       }
       libStore.setState((state) => {
@@ -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 === undefined) {
-          return undefined;
-        }
-        if (earliest === undefined || 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 === undefined) {
-        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();
@@ -216,7 +189,7 @@ var ReactGrab = (function (exports) {
     return cleanup;
   };
 
-  // node_modules/.pnpm/bippy@0.3.31_@types+react@19.2.2_react@19.2.0/node_modules/bippy/dist/src-R2iEnVC1.js
+  // ../../node_modules/.pnpm/bippy@0.3.31_@types+react@19.2.2_react@19.2.0/node_modules/bippy/dist/src-R2iEnVC1.js
   var version = "0.3.31";
   var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
   var objectDefineProperty = Object.defineProperty;
@@ -236,7 +209,7 @@ var ReactGrab = (function (exports) {
     return "getFiberRoots" in rdtHook;
   };
   var isReactRefreshOverride = false;
-  var injectFnStr = undefined;
+  var injectFnStr = void 0;
   var isReactRefresh = (rdtHook = getRDTHook()) => {
     if (isReactRefreshOverride) return true;
     if (typeof rdtHook.inject === "function") injectFnStr = rdtHook.inject.toString();
@@ -433,7 +406,7 @@ var ReactGrab = (function (exports) {
   var _fiberRoots = /* @__PURE__ */ new Set();
   safelyInstallRDTHook();
 
-  // node_modules/.pnpm/bippy@0.3.31_@types+react@19.2.2_react@19.2.0/node_modules/bippy/dist/source-DWOhEbf2.js
+  // ../../node_modules/.pnpm/bippy@0.3.31_@types+react@19.2.2_react@19.2.0/node_modules/bippy/dist/source-DWOhEbf2.js
   var __create = Object.create;
   var __defProp = Object.defineProperty;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -466,15 +439,15 @@ var ReactGrab = (function (exports) {
   function extractLocation(urlLike) {
     if (!urlLike.includes(":")) return [
       urlLike,
-      undefined,
-      undefined
+      void 0,
+      void 0
     ];
     const regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
     const parts = regExp.exec(urlLike.replace(/[()]/g, ""));
     return [
       parts[1],
-      parts[2] || undefined,
-      parts[3] || undefined
+      parts[2] || void 0,
+      parts[3] || void 0
     ];
   }
   function applySlice(lines, options) {
@@ -490,13 +463,13 @@ var ReactGrab = (function (exports) {
       const location = sanitizedLine.match(/ (\(.+\)$)/);
       sanitizedLine = location ? sanitizedLine.replace(location[0], "") : sanitizedLine;
       const locationParts = extractLocation(location ? location[1] : sanitizedLine);
-      const functionName = location && sanitizedLine || undefined;
-      const fileName = ["eval", "<anonymous>"].includes(locationParts[0]) ? undefined : locationParts[0];
+      const functionName = location && sanitizedLine || void 0;
+      const fileName = ["eval", "<anonymous>"].includes(locationParts[0]) ? void 0 : locationParts[0];
       return {
         function: functionName,
         file: fileName,
-        line: locationParts[1] ? +locationParts[1] : undefined,
-        col: locationParts[2] ? +locationParts[2] : undefined,
+        line: locationParts[1] ? +locationParts[1] : void 0,
+        col: locationParts[2] ? +locationParts[2] : void 0,
         raw: line
       };
     });
@@ -511,13 +484,13 @@ var ReactGrab = (function (exports) {
       else {
         const functionNameRegex = /(([^\n\r"\u2028\u2029]*".[^\n\r"\u2028\u2029]*"[^\n\r@\u2028\u2029]*(?:@[^\n\r"\u2028\u2029]*"[^\n\r@\u2028\u2029]*)*(?:[\n\r\u2028\u2029][^@]*)?)?[^@]*)@/;
         const matches = line.match(functionNameRegex);
-        const functionName = matches && matches[1] ? matches[1] : undefined;
+        const functionName = matches && matches[1] ? matches[1] : void 0;
         const locationParts = extractLocation(line.replace(functionNameRegex, ""));
         return {
           function: functionName,
           file: locationParts[0],
-          line: locationParts[1] ? +locationParts[1] : undefined,
-          col: locationParts[2] ? +locationParts[2] : undefined,
+          line: locationParts[1] ? +locationParts[1] : void 0,
+          col: locationParts[2] ? +locationParts[2] : void 0,
           raw: line
         };
       }
@@ -1219,7 +1192,7 @@ var ReactGrab = (function (exports) {
     let sortCache = /* @__PURE__ */ new WeakMap();
     exports.quickSort = function(ary, comparator, start = 0) {
       let doQuickSort = sortCache.get(comparator);
-      if (doQuickSort === undefined) {
+      if (doQuickSort === void 0) {
         doQuickSort = cloneSort(comparator);
         sortCache.set(comparator, doQuickSort);
       }
@@ -1316,7 +1289,7 @@ var ReactGrab = (function (exports) {
       var index = this._findMapping(needle, this._originalMappings, "originalLine", "originalColumn", util$1.compareByOriginalPositions, binarySearch.LEAST_UPPER_BOUND);
       if (index >= 0) {
         var mapping = this._originalMappings[index];
-        if (aArgs.column === undefined) {
+        if (aArgs.column === void 0) {
           var originalLine = mapping.originalLine;
           while (mapping && mapping.originalLine === originalLine) {
             mappings.push({
@@ -1754,7 +1727,7 @@ var ReactGrab = (function (exports) {
         var newLine = getNextLine() || "";
         return lineContents + newLine;
         function getNextLine() {
-          return remainingLinesIndex < remainingLines.length ? remainingLines[remainingLinesIndex++] : undefined;
+          return remainingLinesIndex < remainingLines.length ? remainingLines[remainingLinesIndex++] : void 0;
         }
       };
       var lastGeneratedLine = 1, lastGeneratedColumn = 0;
@@ -1798,7 +1771,7 @@ var ReactGrab = (function (exports) {
       });
       return node;
       function addMappingWithCode(mapping, code) {
-        if (mapping === null || mapping.source === undefined) node.add(code);
+        if (mapping === null || mapping.source === void 0) node.add(code);
         else {
           var source = aRelativePath ? util.join(aRelativePath, mapping.source) : mapping.source;
           node.add(new SourceNode(mapping.originalLine, mapping.originalColumn, source, code, mapping.name));
@@ -2011,7 +1984,7 @@ var ReactGrab = (function (exports) {
   var describeNativeComponentFrame = (fn, construct) => {
     if (!fn || reentry) return "";
     const previousPrepareStackTrace = Error.prepareStackTrace;
-    Error.prepareStackTrace = undefined;
+    Error.prepareStackTrace = void 0;
     reentry = true;
     const previousDispatcher = getCurrentDispatcher();
     setCurrentDispatcher(null);
@@ -2193,7 +2166,7 @@ ${error.stack}`;
         match = componentPattern.exec(stackTrace);
         matches.push({
           name,
-          source: undefined
+          source: void 0
         });
         continue;
       }
@@ -2206,7 +2179,7 @@ ${error.stack}`;
       }
       matches.push({
         name,
-        source: source || undefined
+        source: source || void 0
       });
       match = componentPattern.exec(stackTrace);
     }
@@ -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,
@@ -2892,7 +2960,6 @@ ${error.stack}`;
       return;
     }
     const resolvedOptions = {
-      enabled: true,
       hotkey: ["Meta", "C"],
       keyHoldDuration: 500,
       ...options
@@ -2900,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) {
@@ -2912,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();
@@ -2946,6 +3041,7 @@ ${error.stack}`;
           cleanupActivationHotkeyWatcher();
           cleanupActivationHotkeyWatcher = null;
         }
+        stopProgressTracking();
         return;
       }
       const isActivationHotkeyPressed = checkIsActivationHotkeyPressed();
@@ -2960,9 +3056,11 @@ ${error.stack}`;
             overlayMode: "hidden"
           }));
         }
+        stopProgressTracking();
         return;
       }
       if (overlayMode === "hidden" && !cleanupActivationHotkeyWatcher) {
+        startProgressTracking();
         cleanupActivationHotkeyWatcher = watchKeyHeldFor(
           resolvedOptions.hotkey,
           resolvedOptions.keyHoldDuration,
@@ -2971,6 +3069,7 @@ ${error.stack}`;
               ...state,
               overlayMode: "visible"
             }));
+            stopProgressTracking();
             cleanupActivationHotkeyWatcher = null;
           }
         );
@@ -2980,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;
@@ -3003,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);
@@ -3021,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;
       }
@@ -3092,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();
@@ -3116,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.13",
+  "version": "0.0.15",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/aidenybai/react-grab#readme",
@@ -45,16 +45,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch --ignore-watch dist",
-    "lint": "eslint src/**/*.ts",
-    "lint:fix": "eslint src/**/*.ts --fix",
-    "format": "prettier --write .",
-    "check": "eslint src/**/*.ts && prettier --check .",
-    "publint": "publint",
-    "prepublishOnly": "pnpm build"
-  },
   "devDependencies": {
     "eslint": "^9.37.0",
     "eslint-plugin-perfectionist": "^4.15.1",
@@ -68,5 +58,14 @@
   },
   "dependencies": {
     "bippy": "^0.3.31"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --ignore-watch dist",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "format": "prettier --write .",
+    "check": "eslint src/**/*.ts && prettier --check .",
+    "publint": "publint"
   }
-}
+}

package/README.md

@@ -1,46 +0,0 @@
-# react-grab
-
-Inspect React components and copy their source file paths to clipboard.
-
-## Install
-
-```bash
-npm install react-grab
-# or
-pnpm add react-grab
-# or
-yarn add react-grab
-```
-
-## Usage
-
-### Next.js (App Router)
-
-Add to your `app/layout.tsx`:
-
-```jsx
-import Script from "next/script";
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <head>
-        {process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/react-grab@0.0.7/dist/index.global.js"
-            crossOrigin="anonymous"
-            strategy="beforeInteractive"
-          />
-        )}
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-### How it works
-
-1. Hold **Cmd** (Mac) for ~1 second to activate
-2. Hover over any element on the page
-3. Click to copy component stack trace and HTML to clipboard