@linhey/react-debug-inspector 1.0.0 → 1.2.1

package/dist/index.mjs

@@ -2,28 +2,42 @@
 function babelPluginDebugLabel() {
   return {
     visitor: {
-      FunctionDeclaration(path) {
-        const name = path.node.id?.name;
-        if (!name || name[0] !== name[0].toUpperCase()) return;
-        injectAllJSX(path, name);
-      },
-      VariableDeclarator(path) {
-        const name = path.node.id?.name;
-        if (!name || name[0] !== name[0].toUpperCase()) return;
-        const init = path.node.init;
-        if (init && (init.type === "ArrowFunctionExpression" || init.type === "FunctionExpression")) {
-          injectAllJSX(path.get("init"), name);
-        }
+      Program(programPath, state) {
+        const filename = state.file.opts.filename || state.filename || "";
+        const cwd = state.cwd || (typeof process !== "undefined" ? process.cwd() : "");
+        const getRelativePath = (absolutePath) => {
+          if (!absolutePath) return "unknown";
+          if (absolutePath.startsWith(cwd)) {
+            return absolutePath.slice(cwd.length + 1);
+          }
+          return absolutePath;
+        };
+        const relativePath = getRelativePath(filename);
+        programPath.traverse({
+          FunctionDeclaration(path) {
+            const name = path.node.id?.name;
+            if (!name || name[0] !== name[0].toUpperCase()) return;
+            injectAllJSX(path, name, relativePath);
+          },
+          VariableDeclarator(path) {
+            const name = path.node.id?.name;
+            if (!name || name[0] !== name[0].toUpperCase()) return;
+            const init = path.node.init;
+            if (init && (init.type === "ArrowFunctionExpression" || init.type === "FunctionExpression")) {
+              injectAllJSX(path.get("init"), name, relativePath);
+            }
+          }
+        });
       }
     }
   };
-  function injectAllJSX(path, componentName) {
+  function injectAllJSX(path, componentName, filePath) {
     path.traverse({
       JSXElement(jsxPath) {
         const { openingElement } = jsxPath.node;
         const tagName = getTagName(openingElement.name);
         const line = openingElement.loc?.start.line || "0";
-        const debugId = `${componentName}:${tagName}:${line}`;
+        const debugId = `${filePath}:${componentName}:${tagName}:${line}`;
         const alreadyHas = openingElement.attributes.some(
           (attr) => attr.type === "JSXAttribute" && attr.name?.name === "data-debug"
         );
@@ -48,7 +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 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";
@@ -71,22 +108,397 @@ function initInspector() {
     justify-content: center;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   `;
-  document.body.appendChild(toggleBtn);
-  const overlay = document.createElement("div");
+  doc.body.appendChild(toggleBtn);
+  const applyAnchor = (anchor) => {
+    toggleBtn.style.top = anchor.startsWith("top") ? `${edgeOffset}px` : "";
+    toggleBtn.style.bottom = anchor.startsWith("bottom") ? `${edgeOffset}px` : "";
+    if (anchor.endsWith("left")) {
+      toggleBtn.style.left = `${edgeOffset}px`;
+      toggleBtn.style.right = "";
+      return;
+    }
+    toggleBtn.style.right = `${edgeOffset}px`;
+    toggleBtn.style.left = "";
+  };
+  const getVisibleDialogs = () => {
+    const candidates = Array.from(
+      document.querySelectorAll('[role="dialog"], dialog[open], [aria-modal="true"]')
+    );
+    return candidates.filter((node) => {
+      if (node.getAttribute("aria-hidden") === "true") return false;
+      if (node.getAttribute("data-aria-hidden") === "true") return false;
+      const style = window.getComputedStyle(node);
+      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 || 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 (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;
+      if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return true;
+    }
+    return false;
+  };
+  const sampleAnchorObstructionScore = () => {
+    const pickStack = typeof document.elementsFromPoint === "function" ? (x, y) => document.elementsFromPoint(x, y) : (x, y) => {
+      const one = doc.elementFromPoint?.(x, y);
+      return one ? [one] : [];
+    };
+    const rect = toggleBtn.getBoundingClientRect();
+    const points = [
+      [rect.left + rect.width / 2, rect.top + rect.height / 2],
+      [rect.left + 2, rect.top + 2],
+      [rect.right - 2, rect.top + 2],
+      [rect.left + 2, rect.bottom - 2],
+      [rect.right - 2, rect.bottom - 2]
+    ];
+    let score = 0;
+    for (const [x, y] of points) {
+      const stack = pickStack(x, y);
+      const blocker = stack.find((el) => !isIgnorableObstacle(el));
+      if (blocker) score += 1;
+    }
+    return score;
+  };
+  const pickBestAnchor = (preferLeft = false) => {
+    const candidates = preferLeft ? ["bottom-left", "top-left", "bottom-right", "top-right"] : ["bottom-right", "top-right", "bottom-left", "top-left"];
+    let best = candidates[0];
+    let bestScore = Number.POSITIVE_INFINITY;
+    for (const anchor of candidates) {
+      applyAnchor(anchor);
+      const score = sampleAnchorObstructionScore();
+      if (score < bestScore) {
+        bestScore = score;
+        best = anchor;
+      }
+      if (score === 0) break;
+    }
+    applyAnchor(best);
+  };
+  const updateAnchorForDialogs = () => {
+    const dialogs = getVisibleDialogs();
+    ensureToggleHost(getPreferredHost(dialogs));
+    ensureToggleVisible();
+    if (dialogs.length > 0) {
+      pickBestAnchor(true);
+      return;
+    }
+    pickBestAnchor(false);
+  };
+  const scheduleAnchorUpdate = () => {
+    if (anchorUpdatePending) return;
+    anchorUpdatePending = true;
+    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();
+  });
+  overlay = document.createElement("div");
   overlay.style.cssText = `
     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);
-  const tooltip = document.createElement("div");
+  doc.body.appendChild(overlay);
+  tooltip = document.createElement("div");
   tooltip.style.cssText = `
     position: fixed;
-    pointer-events: none;
+    pointer-events: auto;
     z-index: 9999999;
     background: #1e293b;
     color: #38bdf8;
@@ -99,79 +511,142 @@ function initInspector() {
     display: none;
     white-space: nowrap;
     transition: all 0.1s ease-out;
+    cursor: help;
   `;
-  document.body.appendChild(tooltip);
-  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";
+  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);
   };
-  toggleBtn.onclick = () => {
+  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();
+      doc.body.style.cursor = "crosshair";
+      return;
     }
+    stopInspecting();
+  };
+  toggleBtn.onclick = handleToggleClick;
+  const handleMouseMove = (event) => {
+    if (!isInspecting) return;
+    latestHoverEvent = event;
+    if (pendingHoverFrame) return;
+    pendingHoverFrame = true;
+    scheduleFrame(() => {
+      pendingHoverFrame = false;
+      if (!latestHoverEvent) return;
+      inspectByPointer(latestHoverEvent);
+    });
   };
-  window.addEventListener("mousemove", (e) => {
+  const handleWindowClick = (event) => {
     if (!isInspecting) return;
-    const target = e.target;
-    if (target === toggleBtn || target === overlay || target === tooltip) 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) {
-      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 = debugId;
-      tooltip.style.color = "#38bdf8";
-      const tooltipY = rect.top < 30 ? rect.bottom + 4 : rect.top - 28;
-      tooltip.style.top = tooltipY + "px";
-      tooltip.style.left = rect.left + "px";
-    } else {
-      overlay.style.display = "none";
-      tooltip.style.display = "none";
+    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