react-grab 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -14,7 +14,7 @@ interface Options {
     /**
      * hotkey to trigger the overlay
      *
-     * default: "Meta"
+     * default: ["Meta", "C"]
      */
     hotkey?: Hotkey | Hotkey[];
     /**

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) => {
@@ -147,7 +147,9 @@ var ReactGrab = (function (exports) {
     };
     const checkAllKeysPressed = (pressedKeys) => {
       if (Array.isArray(key)) {
-        return key.every((keyFromCombo) => checkSingleKeyPressed(keyFromCombo, pressedKeys));
+        return key.every(
+          (keyFromCombo) => checkSingleKeyPressed(keyFromCombo, pressedKeys)
+        );
       }
       return checkSingleKeyPressed(key, pressedKeys);
     };
@@ -162,10 +164,10 @@ var ReactGrab = (function (exports) {
       let earliest;
       for (const keyFromCombo of keysToInspect) {
         const timestamp = getKeyFromTimestamps(keyFromCombo, timestamps);
-        if (timestamp === undefined) {
-          return undefined;
+        if (timestamp === void 0) {
+          return void 0;
         }
-        if (earliest === undefined || timestamp < earliest) {
+        if (earliest === void 0 || timestamp < earliest) {
           earliest = timestamp;
         }
       }
@@ -182,7 +184,7 @@ var ReactGrab = (function (exports) {
         return;
       }
       const earliestPressTime = getEarliestPressTime(keyPressTimestamps);
-      if (earliestPressTime === undefined) {
+      if (earliestPressTime === void 0) {
         if (timeoutId !== null) {
           clearTimeout(timeoutId);
           timeoutId = null;
@@ -214,237 +216,7 @@ var ReactGrab = (function (exports) {
     return cleanup;
   };
 
-  // src/overlay.ts
-  var VIEWPORT_MARGIN_PX = 8;
-  var LABEL_OFFSET_PX = 6;
-  var lerp = (start, end, factor) => {
-    return start + (end - start) * factor;
-  };
-  var SELECTION_LERP_FACTOR = 0.95;
-  var createSelectionElement = ({
-    borderRadius,
-    height,
-    transform,
-    width,
-    x,
-    y
-  }) => {
-    const overlay = document.createElement("div");
-    overlay.style.position = "fixed";
-    overlay.style.top = `${y}px`;
-    overlay.style.left = `${x}px`;
-    overlay.style.width = `${width}px`;
-    overlay.style.height = `${height}px`;
-    overlay.style.borderRadius = borderRadius;
-    overlay.style.transform = transform;
-    overlay.style.pointerEvents = "none";
-    overlay.style.border = "1px solid rgb(210, 57, 192)";
-    overlay.style.backgroundColor = "rgba(210, 57, 192, 0.2)";
-    overlay.style.zIndex = "2147483646";
-    overlay.style.boxSizing = "border-box";
-    overlay.style.display = "none";
-    return overlay;
-  };
-  var updateSelectionElement = (element, { borderRadius, height, transform, width, x, y }) => {
-    const currentTop = parseFloat(element.style.top) || 0;
-    const currentLeft = parseFloat(element.style.left) || 0;
-    const currentWidth = parseFloat(element.style.width) || 0;
-    const currentHeight = parseFloat(element.style.height) || 0;
-    const topValue = `${lerp(currentTop, y, SELECTION_LERP_FACTOR)}px`;
-    const leftValue = `${lerp(currentLeft, x, SELECTION_LERP_FACTOR)}px`;
-    const widthValue = `${lerp(currentWidth, width, SELECTION_LERP_FACTOR)}px`;
-    const heightValue = `${lerp(currentHeight, height, SELECTION_LERP_FACTOR)}px`;
-    if (element.style.top !== topValue) {
-      element.style.top = topValue;
-    }
-    if (element.style.left !== leftValue) {
-      element.style.left = leftValue;
-    }
-    if (element.style.width !== widthValue) {
-      element.style.width = widthValue;
-    }
-    if (element.style.height !== heightValue) {
-      element.style.height = heightValue;
-    }
-    if (element.style.borderRadius !== borderRadius) {
-      element.style.borderRadius = borderRadius;
-    }
-    if (element.style.transform !== transform) {
-      element.style.transform = transform;
-    }
-  };
-  var createSelectionOverlay = (root) => {
-    const element = createSelectionElement({
-      borderRadius: "0px",
-      height: 0,
-      transform: "none",
-      width: 0,
-      x: -1e3,
-      y: -1e3
-    });
-    root.appendChild(element);
-    let visible = false;
-    return {
-      hide: () => {
-        visible = false;
-        element.style.display = "none";
-        element.style.pointerEvents = "none";
-      },
-      isVisible: () => visible,
-      show: () => {
-        visible = true;
-        element.style.display = "block";
-        element.style.pointerEvents = "auto";
-      },
-      update: (selection) => {
-        updateSelectionElement(element, selection);
-      }
-    };
-  };
-  var createSpinner = () => {
-    const spinner = document.createElement("span");
-    spinner.style.display = "inline-block";
-    spinner.style.width = "8px";
-    spinner.style.height = "8px";
-    spinner.style.border = "1.5px solid rgb(210, 57, 192)";
-    spinner.style.borderTopColor = "transparent";
-    spinner.style.borderRadius = "50%";
-    spinner.style.marginRight = "4px";
-    spinner.style.verticalAlign = "middle";
-    spinner.animate(
-      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
-      {
-        duration: 600,
-        easing: "linear",
-        iterations: Infinity
-      }
-    );
-    return spinner;
-  };
-  var activeIndicator = null;
-  var createIndicator = () => {
-    const indicator = document.createElement("div");
-    indicator.style.position = "fixed";
-    indicator.style.top = "calc(8px + env(safe-area-inset-top))";
-    indicator.style.padding = "2px 6px";
-    indicator.style.backgroundColor = "#fde7f7";
-    indicator.style.color = "#b21c8e";
-    indicator.style.border = "1px solid #f7c5ec";
-    indicator.style.borderRadius = "4px";
-    indicator.style.fontSize = "11px";
-    indicator.style.fontWeight = "500";
-    indicator.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    indicator.style.zIndex = "2147483647";
-    indicator.style.pointerEvents = "none";
-    indicator.style.opacity = "0";
-    indicator.style.transition = "opacity 0.2s ease-in-out";
-    indicator.style.display = "flex";
-    indicator.style.alignItems = "center";
-    indicator.style.maxWidth = "calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))";
-    indicator.style.overflow = "hidden";
-    indicator.style.textOverflow = "ellipsis";
-    indicator.style.whiteSpace = "nowrap";
-    return indicator;
-  };
-  var showCopyIndicator = (selectionLeftPx, selectionTopPx) => {
-    if (activeIndicator) {
-      activeIndicator.remove();
-      activeIndicator = null;
-    }
-    const indicator = createIndicator();
-    const loadingSpinner = createSpinner();
-    const labelText = document.createElement("span");
-    labelText.textContent = "Grabbing\u2026";
-    indicator.appendChild(loadingSpinner);
-    indicator.appendChild(labelText);
-    document.body.appendChild(indicator);
-    activeIndicator = indicator;
-    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;
-    indicatorLeftPx = Math.max(
-      VIEWPORT_MARGIN_PX,
-      Math.min(
-        indicatorLeftPx,
-        viewportWidthPx - indicatorRect.width - VIEWPORT_MARGIN_PX
-      )
-    );
-    indicatorTopPx = Math.max(
-      VIEWPORT_MARGIN_PX,
-      Math.min(
-        indicatorTopPx,
-        viewportHeightPx - indicatorRect.height - VIEWPORT_MARGIN_PX
-      )
-    );
-    indicator.style.left = `${indicatorLeftPx}px`;
-    indicator.style.top = `${indicatorTopPx}px`;
-    indicator.style.right = "auto";
-    requestAnimationFrame(() => {
-      indicator.style.opacity = "1";
-    });
-    return (tagName) => {
-      loadingSpinner.remove();
-      const checkmarkIcon = document.createElement("span");
-      checkmarkIcon.textContent = "\u2713";
-      checkmarkIcon.style.display = "inline-block";
-      checkmarkIcon.style.marginRight = "4px";
-      checkmarkIcon.style.fontWeight = "600";
-      indicator.insertBefore(checkmarkIcon, labelText);
-      const tagNameMonospace = document.createElement("span");
-      tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
-      tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
-      tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
-      labelText.replaceChildren(
-        document.createTextNode("Grabbed "),
-        tagNameMonospace
-      );
-      setTimeout(() => {
-        indicator.style.opacity = "0";
-        setTimeout(() => {
-          indicator.remove();
-          if (activeIndicator === indicator) {
-            activeIndicator = null;
-          }
-        }, 200);
-      }, 1500);
-    };
-  };
-
-  // src/utils/copy-text.ts
-  var IS_NAVIGATOR_CLIPBOARD_AVAILABLE = typeof window !== "undefined" && window.navigator.clipboard && window.isSecureContext;
-  var copyTextToClipboard = async (text) => {
-    if (IS_NAVIGATOR_CLIPBOARD_AVAILABLE) {
-      try {
-        await navigator.clipboard.writeText(text);
-        return true;
-      } catch {
-      }
-    }
-    const textareaElement = document.createElement("textarea");
-    textareaElement.value = text;
-    textareaElement.setAttribute("readonly", "");
-    textareaElement.style.position = "fixed";
-    textareaElement.style.top = "-9999px";
-    textareaElement.style.opacity = "0";
-    textareaElement.style.pointerEvents = "none";
-    const doc = document.body || document.documentElement;
-    doc.appendChild(textareaElement);
-    textareaElement.select();
-    textareaElement.setSelectionRange(0, textareaElement.value.length);
-    let didCopyToClipboard = false;
-    try {
-      didCopyToClipboard = document.execCommand("copy");
-    } catch {
-      didCopyToClipboard = false;
-    } finally {
-      doc.removeChild(textareaElement);
-    }
-    return didCopyToClipboard;
-  };
-
-  // 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;
@@ -464,7 +236,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();
@@ -542,6 +314,7 @@ var ReactGrab = (function (exports) {
     return rdtHook;
   };
   var patchRDTHook = (onActive) => {
+    if (onActive) onActiveListeners.add(onActive);
     try {
       const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
       if (!rdtHook) return;
@@ -622,6 +395,28 @@ var ReactGrab = (function (exports) {
     if (!unwrappedType) return null;
     return unwrappedType.displayName || unwrappedType.name || null;
   };
+  var instrument = (options) => {
+    return getRDTHook(() => {
+      const rdtHook = getRDTHook();
+      options.onActive?.();
+      rdtHook._instrumentationSource = options.name ?? BIPPY_INSTRUMENTATION_STRING;
+      const prevOnCommitFiberRoot = rdtHook.onCommitFiberRoot;
+      if (options.onCommitFiberRoot) rdtHook.onCommitFiberRoot = (rendererID, root, priority) => {
+        if (prevOnCommitFiberRoot) prevOnCommitFiberRoot(rendererID, root, priority);
+        options.onCommitFiberRoot?.(rendererID, root, priority);
+      };
+      const prevOnCommitFiberUnmount = rdtHook.onCommitFiberUnmount;
+      if (options.onCommitFiberUnmount) rdtHook.onCommitFiberUnmount = (rendererID, root) => {
+        if (prevOnCommitFiberUnmount) prevOnCommitFiberUnmount(rendererID, root);
+        options.onCommitFiberUnmount?.(rendererID, root);
+      };
+      const prevOnPostCommitFiberRoot = rdtHook.onPostCommitFiberRoot;
+      if (options.onPostCommitFiberRoot) rdtHook.onPostCommitFiberRoot = (rendererID, root) => {
+        if (prevOnPostCommitFiberRoot) prevOnPostCommitFiberRoot(rendererID, root);
+        options.onPostCommitFiberRoot?.(rendererID, root);
+      };
+    });
+  };
   var getFiberFromHostInstance = (hostInstance) => {
     const rdtHook = getRDTHook();
     for (const renderer of rdtHook.renderers.values()) try {
@@ -635,9 +430,10 @@ var ReactGrab = (function (exports) {
     }
     return null;
   };
+  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;
@@ -670,15 +466,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) {
@@ -694,13 +490,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
       };
     });
@@ -715,13 +511,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
         };
       }
@@ -1423,7 +1219,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);
       }
@@ -1520,7 +1316,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({
@@ -1958,7 +1754,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;
@@ -2002,7 +1798,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));
@@ -2215,7 +2011,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);
@@ -2397,7 +2193,7 @@ ${error.stack}`;
         match = componentPattern.exec(stackTrace);
         matches.push({
           name,
-          source: undefined
+          source: void 0
         });
         continue;
       }
@@ -2410,21 +2206,25 @@ ${error.stack}`;
       }
       matches.push({
         name,
-        source: source || undefined
+        source: source || void 0
       });
       match = componentPattern.exec(stackTrace);
     }
     return matches;
   };
 
-  // src/utils/data.ts
+  // src/instrumentation.ts
+  var fiberRoots = _fiberRoots;
+  instrument({
+    onCommitFiberRoot(_, fiberRoot) {
+      fiberRoots.add(fiberRoot);
+    }
+  });
   var getStack = async (element) => {
     const fiber = getFiberFromHostInstance(element);
     if (!fiber) return null;
     const stackTrace = getFiberStackTrace(fiber);
-    console.log(stackTrace);
     const rawOwnerStack = await getOwnerStack(stackTrace);
-    console.log(rawOwnerStack);
     const stack = rawOwnerStack.map((item) => ({
       componentName: item.name,
       fileName: item.source?.fileName
@@ -2612,7 +2412,9 @@ ${error.stack}`;
           lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
         } else if (targetIndex > 0) {
           const indent2 = "  ".repeat(ancestors.length);
-          lines.push(`${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`);
+          lines.push(
+            `${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
+          );
         }
       }
     }
@@ -2622,7 +2424,9 @@ ${error.stack}`;
     const childrenCount = element.children.length;
     if (textContent && childrenCount === 0 && textContent.length < 40) {
       lines.push(
-        `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(element)}`
+        `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(
+        element
+      )}`
       );
     } else {
       lines.push(indent + "  " + getElementTag(element));
@@ -2659,6 +2463,284 @@ ${error.stack}`;
     return lines.join("\n");
   };
 
+  // src/overlay.ts
+  var VIEWPORT_MARGIN_PX = 8;
+  var LABEL_OFFSET_PX = 6;
+  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;
+  };
+  var SELECTION_LERP_FACTOR = 0.95;
+  var createSelectionElement = ({
+    borderRadius,
+    height,
+    transform,
+    width,
+    x,
+    y
+  }) => {
+    const overlay = document.createElement("div");
+    overlay.style.position = "fixed";
+    overlay.style.top = `${y}px`;
+    overlay.style.left = `${x}px`;
+    overlay.style.width = `${width}px`;
+    overlay.style.height = `${height}px`;
+    overlay.style.borderRadius = borderRadius;
+    overlay.style.transform = transform;
+    overlay.style.pointerEvents = "none";
+    overlay.style.border = "1px solid rgb(210, 57, 192)";
+    overlay.style.backgroundColor = "rgba(210, 57, 192, 0.2)";
+    overlay.style.zIndex = "2147483646";
+    overlay.style.boxSizing = "border-box";
+    overlay.style.display = "none";
+    return overlay;
+  };
+  var updateSelectionElement = (element, { borderRadius, height, transform, width, x, y }) => {
+    const currentTop = parseFloat(element.style.top) || 0;
+    const currentLeft = parseFloat(element.style.left) || 0;
+    const currentWidth = parseFloat(element.style.width) || 0;
+    const currentHeight = parseFloat(element.style.height) || 0;
+    const topValue = `${lerp(currentTop, y, SELECTION_LERP_FACTOR)}px`;
+    const leftValue = `${lerp(currentLeft, x, SELECTION_LERP_FACTOR)}px`;
+    const widthValue = `${lerp(currentWidth, width, SELECTION_LERP_FACTOR)}px`;
+    const heightValue = `${lerp(currentHeight, height, SELECTION_LERP_FACTOR)}px`;
+    if (element.style.top !== topValue) {
+      element.style.top = topValue;
+    }
+    if (element.style.left !== leftValue) {
+      element.style.left = leftValue;
+    }
+    if (element.style.width !== widthValue) {
+      element.style.width = widthValue;
+    }
+    if (element.style.height !== heightValue) {
+      element.style.height = heightValue;
+    }
+    if (element.style.borderRadius !== borderRadius) {
+      element.style.borderRadius = borderRadius;
+    }
+    if (element.style.transform !== transform) {
+      element.style.transform = transform;
+    }
+  };
+  var createSelectionOverlay = (root) => {
+    const element = createSelectionElement({
+      borderRadius: "0px",
+      height: 0,
+      transform: "none",
+      width: 0,
+      x: -1e3,
+      y: -1e3
+    });
+    root.appendChild(element);
+    let visible = false;
+    return {
+      hide: () => {
+        visible = false;
+        element.style.display = "none";
+        element.style.pointerEvents = "none";
+      },
+      isVisible: () => visible,
+      show: () => {
+        visible = true;
+        element.style.display = "block";
+        element.style.pointerEvents = "auto";
+      },
+      update: (selection) => {
+        updateSelectionElement(element, selection);
+      }
+    };
+  };
+  var createSpinner = () => {
+    const spinner = document.createElement("span");
+    spinner.style.display = "inline-block";
+    spinner.style.width = "8px";
+    spinner.style.height = "8px";
+    spinner.style.border = "1.5px solid rgb(210, 57, 192)";
+    spinner.style.borderTopColor = "transparent";
+    spinner.style.borderRadius = "50%";
+    spinner.style.marginRight = "4px";
+    spinner.style.verticalAlign = "middle";
+    spinner.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+      {
+        duration: 600,
+        easing: "linear",
+        iterations: Infinity
+      }
+    );
+    return spinner;
+  };
+  var activeIndicator = null;
+  var createIndicator = () => {
+    const indicator = document.createElement("div");
+    indicator.style.position = "fixed";
+    indicator.style.top = "calc(8px + env(safe-area-inset-top))";
+    indicator.style.padding = "2px 6px";
+    indicator.style.backgroundColor = "#fde7f7";
+    indicator.style.color = "#b21c8e";
+    indicator.style.border = "1px solid #f7c5ec";
+    indicator.style.borderRadius = "4px";
+    indicator.style.fontSize = "11px";
+    indicator.style.fontWeight = "500";
+    indicator.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    indicator.style.zIndex = "2147483647";
+    indicator.style.pointerEvents = "none";
+    indicator.style.opacity = "0";
+    indicator.style.transition = "opacity 0.2s ease-in-out";
+    indicator.style.display = "flex";
+    indicator.style.alignItems = "center";
+    indicator.style.maxWidth = "calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))";
+    indicator.style.overflow = "hidden";
+    indicator.style.textOverflow = "ellipsis";
+    indicator.style.whiteSpace = "nowrap";
+    return indicator;
+  };
+  var showLabel = (selectionLeftPx, selectionTopPx, tagName) => {
+    let indicator = activeIndicator;
+    let isNewIndicator = false;
+    if (!indicator) {
+      indicator = createIndicator();
+      document.body.appendChild(indicator);
+      activeIndicator = indicator;
+      isNewIndicator = true;
+      isProcessing = false;
+    }
+    if (!isProcessing) {
+      const labelText = indicator.querySelector("span");
+      if (labelText) {
+        const tagNameMonospace = document.createElement("span");
+        tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
+        tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+        tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
+        labelText.replaceChildren(tagNameMonospace);
+      } else {
+        const newLabelText = document.createElement("span");
+        const tagNameMonospace = document.createElement("span");
+        tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
+        tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+        tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
+        newLabelText.appendChild(tagNameMonospace);
+        indicator.appendChild(newLabelText);
+      }
+    }
+    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";
+    if (isNewIndicator) {
+      requestAnimationFrame(() => {
+        indicator.style.opacity = "1";
+      });
+    } else if (indicator.style.opacity !== "1") {
+      indicator.style.opacity = "1";
+    }
+  };
+  var isProcessing = false;
+  var updateLabelToProcessing = () => {
+    if (!activeIndicator || isProcessing) return () => {
+    };
+    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);
+    return (tagName) => {
+      if (!activeIndicator) {
+        isProcessing = false;
+        return;
+      }
+      indicator.textContent = "";
+      const checkmarkIcon = document.createElement("span");
+      checkmarkIcon.textContent = "\u2713";
+      checkmarkIcon.style.display = "inline-block";
+      checkmarkIcon.style.marginRight = "4px";
+      checkmarkIcon.style.fontWeight = "600";
+      const newLabelText = document.createElement("span");
+      const tagNameMonospace = document.createElement("span");
+      tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
+      tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+      tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
+      newLabelText.appendChild(document.createTextNode("Grabbed "));
+      newLabelText.appendChild(tagNameMonospace);
+      indicator.appendChild(checkmarkIcon);
+      indicator.appendChild(newLabelText);
+      setTimeout(() => {
+        indicator.style.opacity = "0";
+        setTimeout(() => {
+          indicator.remove();
+          if (activeIndicator === indicator) {
+            activeIndicator = null;
+          }
+          isProcessing = false;
+        }, INDICATOR_FADE_MS);
+      }, INDICATOR_SUCCESS_VISIBLE_MS);
+    };
+  };
+  var hideLabel = () => {
+    if (activeIndicator) {
+      activeIndicator.remove();
+      activeIndicator = null;
+    }
+    isProcessing = false;
+  };
+
+  // src/utils/copy-text.ts
+  var IS_NAVIGATOR_CLIPBOARD_AVAILABLE = typeof window !== "undefined" && window.navigator.clipboard && window.isSecureContext;
+  var copyTextToClipboard = async (text) => {
+    if (IS_NAVIGATOR_CLIPBOARD_AVAILABLE) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch {
+      }
+    }
+    const textareaElement = document.createElement("textarea");
+    textareaElement.value = text;
+    textareaElement.setAttribute("readonly", "");
+    textareaElement.style.position = "fixed";
+    textareaElement.style.top = "-9999px";
+    textareaElement.style.opacity = "0";
+    textareaElement.style.pointerEvents = "none";
+    const doc = document.body || document.documentElement;
+    doc.appendChild(textareaElement);
+    textareaElement.select();
+    textareaElement.setSelectionRange(0, textareaElement.value.length);
+    let didCopyToClipboard = false;
+    try {
+      didCopyToClipboard = document.execCommand("copy");
+    } catch {
+      didCopyToClipboard = false;
+    } finally {
+      doc.removeChild(textareaElement);
+    }
+    return didCopyToClipboard;
+  };
+
   // src/utils/is-element-visible.ts
   var isElementVisible = (element, computedStyle = window.getComputedStyle(element)) => {
     return computedStyle.display !== "none" && computedStyle.visibility !== "hidden" && computedStyle.opacity !== "0";
@@ -2810,8 +2892,7 @@ ${error.stack}`;
       return;
     }
     const resolvedOptions = {
-      enabled: true,
-      hotkey: "Meta",
+      hotkey: ["Meta", "C"],
       keyHoldDuration: 500,
       ...options
     };
@@ -2830,9 +2911,6 @@ ${error.stack}`;
       }
       return isKeyPressed(resolvedOptions.hotkey);
     };
-    const isCopyHotkeyPressed = () => {
-      return isKeyPressed("Meta") && isKeyPressed("C");
-    };
     let cleanupActivationHotkeyWatcher = null;
     const handleKeyStateChange = (pressedKeys) => {
       const { overlayMode } = libStore.getState();
@@ -2869,13 +2947,6 @@ ${error.stack}`;
         }
         return;
       }
-      if (isCopyHotkeyPressed() && overlayMode === "visible") {
-        libStore.setState((state) => ({
-          ...state,
-          overlayMode: "copying"
-        }));
-        return;
-      }
       const isActivationHotkeyPressed = checkIsActivationHotkeyPressed();
       if (!isActivationHotkeyPressed) {
         if (cleanupActivationHotkeyWatcher) {
@@ -2949,8 +3020,7 @@ ${error.stack}`;
       return null;
     };
     const handleCopy = async (element) => {
-      const rect = element.getBoundingClientRect();
-      const cleanupCopyIndicator = showCopyIndicator(rect.left, rect.top);
+      const cleanupIndicator = updateLabelToProcessing();
       try {
         const stack = await getStack(element);
         const htmlSnippet = getHTMLSnippet(element);
@@ -2958,16 +3028,22 @@ ${error.stack}`;
         if (stack) {
           const filteredStack = filterStack(stack);
           const serializedStack = serializeStack(filteredStack);
-          text = `${serializedStack}
+          text = `${htmlSnippet}
 
-${htmlSnippet}`;
+Component owner stack:
+${serializedStack}`;
         }
-        await copyTextToClipboard(`
-${text}`);
+        await copyTextToClipboard(
+          `
+
+<referenced_element>
+${text}
+</referenced_element>`
+        );
         const tagName = (element.tagName || "").toLowerCase();
-        cleanupCopyIndicator(tagName);
+        cleanupIndicator(tagName);
       } catch {
-        cleanupCopyIndicator();
+        cleanupIndicator();
       }
     };
     const handleRender = throttle((state) => {
@@ -2975,6 +3051,9 @@ ${text}`);
       if (overlayMode === "hidden") {
         if (selectionOverlay.isVisible()) {
           selectionOverlay.hide();
+          if (!isCopying) {
+            hideLabel();
+          }
           hoveredElement = null;
         }
         return;
@@ -3000,7 +3079,10 @@ ${text}`);
               ...state2,
               overlayMode: "hidden"
             }));
-            isCopying = false;
+            selectionOverlay.hide();
+            window.setTimeout(() => {
+              isCopying = false;
+            }, INDICATOR_TOTAL_HIDE_DELAY_MS);
           });
         }
         return;
@@ -3009,10 +3091,14 @@ ${text}`);
       if (!element) {
         if (selectionOverlay.isVisible()) {
           selectionOverlay.hide();
+          if (!isCopying) {
+            hideLabel();
+          }
         }
         hoveredElement = null;
         return;
       }
+      const tagName = (element.tagName || "").toLowerCase();
       hoveredElement = element;
       const rect = element.getBoundingClientRect();
       const computedStyle = window.getComputedStyle(element);
@@ -3029,6 +3115,7 @@ ${text}`);
       if (!selectionOverlay.isVisible()) {
         selectionOverlay.show();
       }
+      showLabel(rect.left, rect.top, tagName);
     }, 10);
     const cleanupRenderSubscription = libStore.subscribe((state) => {
       scheduleRunWhenIdle(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grab",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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