@linhey/react-debug-inspector 1.2.0 → 1.2.1

package/dist/index.mjs

@@ -62,17 +62,30 @@ function babelPluginDebugLabel() {
 // src/runtime.ts
 function initInspector() {
   if (typeof window === "undefined") return;
+  const win = window;
+  const doc = document;
+  const scopedWindow = win;
+  scopedWindow.__reactDebugInspectorCleanup__?.();
   let isInspecting = false;
-  let hasUserPosition = false;
-  let isDragging = false;
-  let pointerMoved = false;
-  let dragOffsetX = 0;
-  let dragOffsetY = 0;
-  let dragStartX = 0;
-  let dragStartY = 0;
   let overlay = null;
   let tooltip = null;
+  let actionMenu = null;
+  let latestContext = null;
+  let lastHoveredDebugEl = null;
+  let latestHoverEvent = null;
+  let pendingHoverFrame = false;
+  let anchorUpdatePending = false;
   const edgeOffset = 24;
+  const successColor = "#10b981";
+  const defaultOverlayBg = "rgba(14, 165, 233, 0.15)";
+  const defaultOverlayBorder = "#0ea5e9";
+  const actionButtons = {};
+  const scheduleFrame = (cb) => {
+    if (typeof win.requestAnimationFrame === "function") {
+      return win.requestAnimationFrame(cb);
+    }
+    return win.setTimeout(() => cb(Date.now()), 16);
+  };
   const toggleBtn = document.createElement("button");
   toggleBtn.innerHTML = "\u{1F3AF}";
   toggleBtn.title = "\u5F00\u542F\u7EC4\u4EF6\u5B9A\u4F4D\u5668";
@@ -95,9 +108,8 @@ function initInspector() {
     justify-content: center;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   `;
-  document.body.appendChild(toggleBtn);
+  doc.body.appendChild(toggleBtn);
   const applyAnchor = (anchor) => {
-    if (hasUserPosition) return;
     toggleBtn.style.top = anchor.startsWith("top") ? `${edgeOffset}px` : "";
     toggleBtn.style.bottom = anchor.startsWith("bottom") ? `${edgeOffset}px` : "";
     if (anchor.endsWith("left")) {
@@ -109,7 +121,6 @@ function initInspector() {
     toggleBtn.style.left = "";
   };
   const getVisibleDialogs = () => {
-    if (typeof document === "undefined") return [];
     const candidates = Array.from(
       document.querySelectorAll('[role="dialog"], dialog[open], [aria-modal="true"]')
     );
@@ -120,18 +131,35 @@ function initInspector() {
       return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0";
     });
   };
+  const getPreferredHost = (dialogs) => {
+    if (dialogs.length === 0) return document.body;
+    const topDialog = dialogs[dialogs.length - 1];
+    const portalHost = topDialog.closest("[data-radix-portal]");
+    if (portalHost) return topDialog;
+    return document.body;
+  };
   const ensureToggleHost = (host) => {
     if (toggleBtn.parentElement !== host) {
       host.appendChild(toggleBtn);
     }
   };
+  const ensureToggleVisible = () => {
+    toggleBtn.removeAttribute("aria-hidden");
+    toggleBtn.removeAttribute("data-aria-hidden");
+    toggleBtn.removeAttribute("inert");
+    if ("inert" in toggleBtn) {
+      toggleBtn.inert = false;
+    }
+    toggleBtn.style.pointerEvents = "auto";
+  };
   const isIgnorableObstacle = (el) => {
-    if (el === toggleBtn || el === overlay || el === tooltip) return true;
+    if (el === toggleBtn || el === overlay || el === tooltip || el === actionMenu) return true;
     if (el instanceof HTMLElement) {
       if (el.contains(toggleBtn) || toggleBtn.contains(el)) return true;
       if (overlay && el.contains(overlay)) return true;
       if (tooltip && el.contains(tooltip)) return true;
-      if (el === document.body || el === document.documentElement) return true;
+      if (actionMenu && (el.contains(actionMenu) || actionMenu.contains(el))) return true;
+      if (el === doc.body || el === doc.documentElement) return true;
       if (el.getAttribute("data-inspector-ignore") === "true") return true;
       const style = window.getComputedStyle(el);
       if (style.pointerEvents === "none") return true;
@@ -141,7 +169,7 @@ function initInspector() {
   };
   const sampleAnchorObstructionScore = () => {
     const pickStack = typeof document.elementsFromPoint === "function" ? (x, y) => document.elementsFromPoint(x, y) : (x, y) => {
-      const one = document.elementFromPoint?.(x, y);
+      const one = doc.elementFromPoint?.(x, y);
       return one ? [one] : [];
     };
     const rect = toggleBtn.getBoundingClientRect();
@@ -176,27 +204,283 @@ function initInspector() {
     applyAnchor(best);
   };
   const updateAnchorForDialogs = () => {
-    if (typeof document === "undefined") return;
     const dialogs = getVisibleDialogs();
+    ensureToggleHost(getPreferredHost(dialogs));
+    ensureToggleVisible();
     if (dialogs.length > 0) {
-      ensureToggleHost(dialogs[dialogs.length - 1]);
       pickBestAnchor(true);
       return;
     }
-    ensureToggleHost(document.body);
     pickBestAnchor(false);
   };
-  let anchorUpdatePending = false;
   const scheduleAnchorUpdate = () => {
-    if (typeof window === "undefined") return;
     if (anchorUpdatePending) return;
     anchorUpdatePending = true;
-    const schedule = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : (cb) => window.setTimeout(() => cb(Date.now()), 16);
-    schedule(() => {
+    scheduleFrame(() => {
       anchorUpdatePending = false;
       updateAnchorForDialogs();
     });
   };
+  const formatDebugId = (debugId) => {
+    const parts = debugId.split(":");
+    if (parts.length === 4) {
+      const [filePath, componentName, tagName, line] = parts;
+      const fileName = filePath.split("/").pop() || filePath;
+      return `${fileName} \u203A ${componentName} \u203A ${tagName}:${line}`;
+    }
+    return debugId.replace(/:/g, " \u203A ");
+  };
+  const normalizeText = (value) => value.replace(/\s+/g, " ").trim();
+  const truncateText = (value, limit = 500) => {
+    if (value.length <= limit) return value;
+    return `${value.slice(0, limit - 3)}...`;
+  };
+  const suppressEvent = (event, { preventDefault = false, immediate = false } = {}) => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+    if (immediate) {
+      event.stopImmediatePropagation?.();
+    }
+  };
+  const extractTextContent = (target) => {
+    const ariaLabel = normalizeText(target.getAttribute("aria-label") || "");
+    if (ariaLabel) return truncateText(ariaLabel);
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+      const inputValue = normalizeText(target.value || "");
+      if (inputValue) return truncateText(inputValue);
+    }
+    const alt = normalizeText(target.getAttribute("alt") || "");
+    if (alt) return truncateText(alt);
+    const title = normalizeText(target.getAttribute("title") || "");
+    if (title) return truncateText(title);
+    const textValue = normalizeText(target.innerText || target.textContent || "");
+    if (textValue) return truncateText(textValue);
+    return null;
+  };
+  const resolveImageTarget = (target) => {
+    const imageEl = target instanceof HTMLImageElement ? target : target.querySelector("img") || target.closest("img");
+    if (imageEl instanceof HTMLImageElement) {
+      const url = imageEl.currentSrc || imageEl.src;
+      if (!url) return null;
+      return {
+        url,
+        alt: imageEl.alt || "",
+        title: imageEl.title || "",
+        filename: url.split("/").pop()?.split("?")[0] || "",
+        source: "img"
+      };
+    }
+    let node = target;
+    while (node) {
+      const bg = window.getComputedStyle(node).backgroundImage;
+      const match = bg.match(/url\(["']?(.*?)["']?\)/);
+      if (match?.[1]) {
+        const url = match[1];
+        return {
+          url,
+          alt: node.getAttribute("aria-label") || "",
+          title: node.getAttribute("title") || "",
+          filename: url.split("/").pop()?.split("?")[0] || "",
+          source: "background"
+        };
+      }
+      node = node.parentElement;
+    }
+    return null;
+  };
+  const buildImageMetadataText = (image, debugId) => [
+    "[image]",
+    `url: ${image.url}`,
+    `alt: ${image.alt}`,
+    `title: ${image.title}`,
+    `filename: ${image.filename}`,
+    `debugId: ${debugId}`
+  ].join("\n");
+  const buildCopyAllPayload = (context) => {
+    const textValue = extractTextContent(context.debugEl);
+    const image = resolveImageTarget(context.debugEl);
+    const lines = [
+      "[debug]",
+      `id: ${context.debugId}`,
+      `display: ${formatDebugId(context.debugId)}`
+    ];
+    if (textValue) {
+      lines.push("", "[text]", `value: ${textValue}`);
+    }
+    if (image) {
+      lines.push("", "[image]", `url: ${image.url}`, `alt: ${image.alt}`, `title: ${image.title}`, `filename: ${image.filename}`);
+    }
+    return lines.join("\n");
+  };
+  const syncActionMenuVisibility = (context) => {
+    actionButtons.id && (actionButtons.id.style.display = "");
+    actionButtons.all && (actionButtons.all.style.display = "");
+    if (actionButtons.text) {
+      actionButtons.text.style.display = extractTextContent(context.debugEl) ? "" : "none";
+    }
+    if (actionButtons.image) {
+      actionButtons.image.style.display = resolveImageTarget(context.debugEl) ? "" : "none";
+    }
+  };
+  const setOverlayTone = (tone) => {
+    if (!overlay) return;
+    if (tone === "success") {
+      overlay.style.background = "rgba(16, 185, 129, 0.2)";
+      overlay.style.borderColor = successColor;
+      return;
+    }
+    overlay.style.background = "rgba(245, 158, 11, 0.18)";
+    overlay.style.borderColor = "#f59e0b";
+  };
+  const resetOverlayTone = () => {
+    if (!overlay) return;
+    overlay.style.background = defaultOverlayBg;
+    overlay.style.borderColor = defaultOverlayBorder;
+  };
+  const showCopyFeedback = (message, tone) => {
+    if (!tooltip) return;
+    tooltip.textContent = tone === "success" ? `\u2705 ${message}` : `\u26A0\uFE0F ${message}`;
+    tooltip.style.color = tone === "success" ? successColor : "#f59e0b";
+    tooltip.title = latestContext?.debugId || "";
+    setOverlayTone(tone);
+  };
+  const resetTooltipContent = (context) => {
+    if (!tooltip) return;
+    tooltip.textContent = formatDebugId(context.debugId);
+    tooltip.style.color = "#38bdf8";
+    tooltip.title = context.debugId;
+    resetOverlayTone();
+  };
+  const positionActionMenu = (context) => {
+    if (!tooltip || !actionMenu) return;
+    const rect = context.rect;
+    const menuWidth = actionMenu.offsetWidth || 248;
+    const menuHeight = actionMenu.offsetHeight || 40;
+    const tooltipRect = tooltip.getBoundingClientRect();
+    let left = tooltipRect.right + 8;
+    if (left + menuWidth > win.innerWidth - 8) {
+      left = Math.max(8, tooltipRect.left - menuWidth - 8);
+    }
+    let top = tooltipRect.top;
+    if (top + menuHeight > win.innerHeight - 8) {
+      top = Math.max(8, rect.bottom - menuHeight);
+    }
+    if (top < 8) {
+      top = Math.min(win.innerHeight - menuHeight - 8, rect.bottom + 8);
+    }
+    actionMenu.style.left = `${left}px`;
+    actionMenu.style.top = `${top}px`;
+  };
+  const showActionMenu = (context) => {
+    if (!actionMenu) return;
+    syncActionMenuVisibility(context);
+    actionMenu.style.display = "flex";
+    positionActionMenu(context);
+  };
+  const hideActionMenu = () => {
+    if (!actionMenu) return;
+    actionMenu.style.display = "none";
+  };
+  const copyText = async (value) => {
+    await navigator.clipboard.writeText(value);
+  };
+  const copyImageBinary = async (image, debugId) => {
+    if (image.url.startsWith("data:")) {
+      await copyText(buildImageMetadataText(image, debugId));
+      return "metadata";
+    }
+    const canWriteBinary = typeof navigator.clipboard?.write === "function" && typeof window.ClipboardItem === "function";
+    if (canWriteBinary) {
+      try {
+        const response = await win.fetch(image.url);
+        if (!response.ok) throw new Error(`failed:${response.status}`);
+        const blob = await response.blob();
+        if (!blob.type.startsWith("image/")) throw new Error("not-image");
+        const item = new window.ClipboardItem({ [blob.type]: blob });
+        await navigator.clipboard.write([item]);
+        return "binary";
+      } catch {
+      }
+    }
+    await copyText(buildImageMetadataText(image, debugId));
+    return "metadata";
+  };
+  const performCopyAction = async (action, context) => {
+    if (action === "id") {
+      await copyText(context.debugId);
+      showCopyFeedback("\u5DF2\u590D\u5236 Debug ID", "success");
+      return;
+    }
+    if (action === "text") {
+      const textValue = extractTextContent(context.debugEl);
+      if (!textValue) return;
+      await copyText(textValue);
+      showCopyFeedback("\u5DF2\u590D\u5236\u6587\u6848", "success");
+      return;
+    }
+    if (action === "image") {
+      const image = resolveImageTarget(context.debugEl);
+      if (!image) {
+        showCopyFeedback("\u672A\u627E\u5230\u56FE\u7247", "warning");
+        return;
+      }
+      const copyResult = await copyImageBinary(image, context.debugId);
+      showCopyFeedback(copyResult === "binary" ? "\u5DF2\u590D\u5236\u56FE\u7247" : "\u5DF2\u590D\u5236\u56FE\u7247\u4FE1\u606F", "success");
+      return;
+    }
+    await copyText(buildCopyAllPayload(context));
+    showCopyFeedback("\u5DF2\u590D\u5236\u5168\u90E8\u4FE1\u606F", "success");
+  };
+  const inspectByPointer = (event) => {
+    if (!isInspecting || !overlay || !tooltip) return;
+    const target = event.target;
+    if (!target) return;
+    if (target === toggleBtn || target === overlay || target === tooltip || target.closest('[data-inspector-ignore="true"]')) {
+      return;
+    }
+    const debugEl = target.closest("[data-debug]");
+    if (debugEl && debugEl === lastHoveredDebugEl && latestContext) {
+      showActionMenu(latestContext);
+      return;
+    }
+    if (!debugEl) {
+      overlay.style.display = "none";
+      tooltip.style.display = "none";
+      hideActionMenu();
+      latestContext = null;
+      lastHoveredDebugEl = null;
+      return;
+    }
+    const debugId = debugEl.getAttribute("data-debug") || "";
+    const rect = debugEl.getBoundingClientRect();
+    latestContext = { debugEl, debugId, rect };
+    lastHoveredDebugEl = debugEl;
+    overlay.style.display = "block";
+    overlay.style.top = `${rect.top}px`;
+    overlay.style.left = `${rect.left}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+    tooltip.style.display = "block";
+    resetTooltipContent(latestContext);
+    const tooltipY = rect.top < 30 ? rect.bottom + 4 : rect.top - 28;
+    tooltip.style.top = `${tooltipY}px`;
+    tooltip.style.left = `${rect.left}px`;
+    showActionMenu(latestContext);
+  };
+  const stopInspecting = () => {
+    isInspecting = false;
+    latestContext = null;
+    lastHoveredDebugEl = null;
+    toggleBtn.style.transform = "scale(1)";
+    toggleBtn.style.background = "#0ea5e9";
+    document.body.style.cursor = "";
+    if (overlay) overlay.style.display = "none";
+    if (tooltip) tooltip.style.display = "none";
+    hideActionMenu();
+    resetOverlayTone();
+  };
   const dialogObserver = new MutationObserver(() => {
     scheduleAnchorUpdate();
   });
@@ -205,12 +489,12 @@ function initInspector() {
     position: fixed;
     pointer-events: none;
     z-index: 9999998;
-    background: rgba(14, 165, 233, 0.15);
-    border: 2px dashed #0ea5e9;
+    background: ${defaultOverlayBg};
+    border: 2px dashed ${defaultOverlayBorder};
     display: none;
     transition: all 0.1s ease-out;
   `;
-  document.body.appendChild(overlay);
+  doc.body.appendChild(overlay);
   tooltip = document.createElement("div");
   tooltip.style.cssText = `
     position: fixed;
@@ -229,153 +513,140 @@ function initInspector() {
     transition: all 0.1s ease-out;
     cursor: help;
   `;
-  document.body.appendChild(tooltip);
-  dialogObserver.observe(document.body, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    attributeFilter: ["style", "class", "open", "aria-hidden"]
-  });
-  window.addEventListener("beforeunload", () => dialogObserver.disconnect(), { once: true });
-  window.addEventListener("resize", scheduleAnchorUpdate);
-  window.addEventListener("scroll", scheduleAnchorUpdate, true);
-  updateAnchorForDialogs();
-  const stopInspecting = () => {
-    isInspecting = false;
-    toggleBtn.style.transform = "scale(1)";
-    toggleBtn.style.background = "#0ea5e9";
-    document.body.style.cursor = "";
-    overlay.style.display = "none";
-    tooltip.style.display = "none";
-  };
-  const onPointerMove = (e) => {
-    if (!isDragging) return;
-    const deltaX = Math.abs(e.clientX - dragStartX);
-    const deltaY = Math.abs(e.clientY - dragStartY);
-    if (deltaX > 3 || deltaY > 3) {
-      pointerMoved = true;
-    }
-    const left = Math.max(8, Math.min(window.innerWidth - 52, e.clientX - dragOffsetX));
-    const top = Math.max(8, Math.min(window.innerHeight - 52, e.clientY - dragOffsetY));
-    toggleBtn.style.left = `${left}px`;
-    toggleBtn.style.top = `${top}px`;
-    toggleBtn.style.right = "";
-    toggleBtn.style.bottom = "";
-    hasUserPosition = true;
-  };
-  const onPointerUp = () => {
-    isDragging = false;
-    window.removeEventListener("mousemove", onPointerMove);
-    window.removeEventListener("mouseup", onPointerUp);
-  };
-  toggleBtn.addEventListener("mousedown", (e) => {
-    const rect = toggleBtn.getBoundingClientRect();
-    isDragging = true;
-    pointerMoved = false;
-    dragStartX = e.clientX;
-    dragStartY = e.clientY;
-    dragOffsetX = e.clientX - rect.left;
-    dragOffsetY = e.clientY - rect.top;
-    window.addEventListener("mousemove", onPointerMove);
-    window.addEventListener("mouseup", onPointerUp);
-  });
-  toggleBtn.onclick = (e) => {
-    if (pointerMoved) {
-      e.preventDefault();
-      e.stopPropagation();
-      pointerMoved = false;
-      return;
-    }
+  doc.body.appendChild(tooltip);
+  actionMenu = document.createElement("div");
+  actionMenu.setAttribute("data-inspector-ignore", "true");
+  actionMenu.style.cssText = `
+    position: fixed;
+    z-index: 10000000;
+    display: none;
+    gap: 6px;
+    padding: 6px;
+    border-radius: 10px;
+    background: rgba(15, 23, 42, 0.96);
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    align-items: center;
+  `;
+  const actionDefinitions = [
+    { action: "id", label: "\u590D\u5236 ID" },
+    { action: "text", label: "\u590D\u5236\u6587\u6848" },
+    { action: "image", label: "\u590D\u5236\u56FE\u7247" },
+    { action: "all", label: "\u5168\u90E8\u590D\u5236" }
+  ];
+  for (const definition of actionDefinitions) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = definition.label;
+    button.dataset.inspectorIgnore = "true";
+    button.dataset.inspectorAction = definition.action;
+    button.style.cssText = `
+      border: 0;
+      border-radius: 8px;
+      padding: 6px 10px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #e2e8f0;
+      background: rgba(30, 41, 59, 0.95);
+      cursor: pointer;
+      white-space: nowrap;
+    `;
+    button.addEventListener("click", async (event) => {
+      suppressEvent(event, { preventDefault: true });
+      if (!latestContext) return;
+      await performCopyAction(definition.action, latestContext);
+    });
+    actionButtons[definition.action] = button;
+    actionMenu.appendChild(button);
+  }
+  doc.body.appendChild(actionMenu);
+  const stopTogglePropagation = (event) => {
+    suppressEvent(event);
+  };
+  const shieldedEvents = ["pointerdown", "pointerup", "mousedown", "mouseup", "click", "touchstart", "touchend"];
+  for (const eventName of shieldedEvents) {
+    toggleBtn.addEventListener(eventName, stopTogglePropagation);
+  }
+  const handleToggleClick = (event) => {
+    suppressEvent(event);
     isInspecting = !isInspecting;
     if (isInspecting) {
       toggleBtn.style.transform = "scale(0.9)";
       toggleBtn.style.background = "#ef4444";
-      document.body.style.cursor = "crosshair";
-    } else {
-      stopInspecting();
-    }
-  };
-  const formatDebugId = (debugId) => {
-    const parts = debugId.split(":");
-    if (parts.length === 4) {
-      const [filePath, componentName, tagName, line] = parts;
-      const fileName = filePath.split("/").pop() || filePath;
-      return `${fileName} \u203A ${componentName} \u203A ${tagName}:${line}`;
-    }
-    return debugId.replace(/:/g, " \u203A ");
-  };
-  const inspectByPointer = (e) => {
-    if (!isInspecting) return;
-    const target = e.target;
-    if (target === toggleBtn || target === overlay || target === tooltip) return;
-    const debugEl = target.closest("[data-debug]");
-    if (debugEl && debugEl === lastHoveredDebugEl) return;
-    if (debugEl) {
-      const debugId = debugEl.getAttribute("data-debug") || "";
-      const rect = debugEl.getBoundingClientRect();
-      overlay.style.display = "block";
-      overlay.style.top = rect.top + "px";
-      overlay.style.left = rect.left + "px";
-      overlay.style.width = rect.width + "px";
-      overlay.style.height = rect.height + "px";
-      tooltip.style.display = "block";
-      tooltip.textContent = formatDebugId(debugId);
-      tooltip.style.color = "#38bdf8";
-      tooltip.title = debugId;
-      const tooltipY = rect.top < 30 ? rect.bottom + 4 : rect.top - 28;
-      tooltip.style.top = tooltipY + "px";
-      tooltip.style.left = rect.left + "px";
-      lastHoveredDebugEl = debugEl;
-    } else {
-      overlay.style.display = "none";
-      tooltip.style.display = "none";
-      lastHoveredDebugEl = null;
+      doc.body.style.cursor = "crosshair";
+      return;
     }
+    stopInspecting();
   };
-  let pendingHoverFrame = false;
-  let latestHoverEvent = null;
-  let lastHoveredDebugEl = null;
-  document.addEventListener("mousemove", (e) => {
+  toggleBtn.onclick = handleToggleClick;
+  const handleMouseMove = (event) => {
     if (!isInspecting) return;
-    latestHoverEvent = e;
+    latestHoverEvent = event;
     if (pendingHoverFrame) return;
     pendingHoverFrame = true;
-    const schedule = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : (cb) => window.setTimeout(() => cb(Date.now()), 16);
-    schedule(() => {
+    scheduleFrame(() => {
       pendingHoverFrame = false;
       if (!latestHoverEvent) return;
       inspectByPointer(latestHoverEvent);
     });
+  };
+  const handleWindowClick = (event) => {
+    if (!isInspecting) return;
+    const target = event.target;
+    if (!target || target === toggleBtn) return;
+    if (target.closest('[data-inspector-ignore="true"]')) {
+      return;
+    }
+    suppressEvent(event, { preventDefault: true, immediate: true });
+    const debugEl = target.closest("[data-debug]");
+    if (!debugEl) {
+      stopInspecting();
+      return;
+    }
+    const debugId = debugEl.getAttribute("data-debug");
+    if (!debugId) return;
+    copyText(debugId).then(() => {
+      showCopyFeedback("Copied!", "success");
+      win.setTimeout(stopInspecting, 600);
+    });
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && isInspecting) stopInspecting();
+  };
+  const handleBeforeUnload = () => {
+    dialogObserver.disconnect();
+  };
+  dialogObserver.observe(doc.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["style", "class", "open", "aria-hidden", "data-aria-hidden", "inert"]
   });
-  window.addEventListener(
-    "click",
-    (e) => {
-      if (!isInspecting) return;
-      const target = e.target;
-      if (target === toggleBtn) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const debugEl = target.closest("[data-debug]");
-      if (debugEl) {
-        const debugId = debugEl.getAttribute("data-debug");
-        if (debugId) {
-          navigator.clipboard.writeText(debugId).then(() => {
-            tooltip.textContent = "\u2705 Copied!";
-            tooltip.style.color = "#10b981";
-            overlay.style.background = "rgba(16, 185, 129, 0.2)";
-            overlay.style.borderColor = "#10b981";
-            setTimeout(stopInspecting, 600);
-          });
-        }
-      } else {
-        stopInspecting();
-      }
-    },
-    { capture: true }
-  );
-  window.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && isInspecting) stopInspecting();
-  });
+  win.addEventListener("beforeunload", handleBeforeUnload, { once: true });
+  win.addEventListener("resize", scheduleAnchorUpdate);
+  win.addEventListener("scroll", scheduleAnchorUpdate, true);
+  doc.addEventListener("mousemove", handleMouseMove);
+  win.addEventListener("click", handleWindowClick, { capture: true });
+  win.addEventListener("keydown", handleKeyDown);
+  updateAnchorForDialogs();
+  scopedWindow.__reactDebugInspectorCleanup__ = () => {
+    dialogObserver.disconnect();
+    win.removeEventListener("beforeunload", handleBeforeUnload);
+    win.removeEventListener("resize", scheduleAnchorUpdate);
+    win.removeEventListener("scroll", scheduleAnchorUpdate, true);
+    doc.removeEventListener("mousemove", handleMouseMove);
+    win.removeEventListener("click", handleWindowClick, { capture: true });
+    win.removeEventListener("keydown", handleKeyDown);
+    for (const eventName of shieldedEvents) {
+      toggleBtn.removeEventListener(eventName, stopTogglePropagation);
+    }
+    toggleBtn.onclick = null;
+    overlay?.remove();
+    tooltip?.remove();
+    actionMenu?.remove();
+    toggleBtn.remove();
+    delete scopedWindow.__reactDebugInspectorCleanup__;
+  };
 }
 
 // src/index.ts