react-grab 0.0.12 → 0.0.13

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

@@ -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);
     };
@@ -214,236 +216,6 @@ 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
   var version = "0.3.31";
   var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
@@ -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,6 +430,7 @@ 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
@@ -2417,14 +2213,18 @@ ${error.stack}`;
     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";
@@ -2811,7 +2893,7 @@ ${error.stack}`;
     }
     const resolvedOptions = {
       enabled: true,
-      hotkey: "Meta",
+      hotkey: ["Meta", "C"],
       keyHoldDuration: 500,
       ...options
     };
@@ -2830,9 +2912,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 +2948,6 @@ ${error.stack}`;
         }
         return;
       }
-      if (isCopyHotkeyPressed() && overlayMode === "visible") {
-        libStore.setState((state) => ({
-          ...state,
-          overlayMode: "copying"
-        }));
-        return;
-      }
       const isActivationHotkeyPressed = checkIsActivationHotkeyPressed();
       if (!isActivationHotkeyPressed) {
         if (cleanupActivationHotkeyWatcher) {
@@ -2949,8 +3021,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 +3029,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 +3052,9 @@ ${text}`);
       if (overlayMode === "hidden") {
         if (selectionOverlay.isVisible()) {
           selectionOverlay.hide();
+          if (!isCopying) {
+            hideLabel();
+          }
           hoveredElement = null;
         }
         return;
@@ -3000,7 +3080,10 @@ ${text}`);
               ...state2,
               overlayMode: "hidden"
             }));
-            isCopying = false;
+            selectionOverlay.hide();
+            window.setTimeout(() => {
+              isCopying = false;
+            }, INDICATOR_TOTAL_HIDE_DELAY_MS);
           });
         }
         return;
@@ -3009,10 +3092,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 +3116,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.13",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/aidenybai/react-grab#readme",