react-grep 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Max Murray
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# react-grep
+
+Hold **Cmd** to see React component names + file:line overlaid on any element.
+
+- **Inspect** — Hold `Cmd` (Mac) / `Ctrl` (Windows/Linux) and hover over any element to see the React component name and source file location
+- **Toggle source** — Tap `Shift` (while holding modifier) to switch between the component definition and the call site where it's rendered
+- **Copy** — `Cmd+Shift+Click` to copy the active file path and line number to your clipboard
+
+Zero dependencies. Works with any React app in development mode.
+
+## Install
+
+```bash
+npm install react-grep
+```
+
+## Usage
+
+### ESM import
+
+```ts
+import "react-grep";
+```
+
+That's it. The inspector activates automatically on page load.
+
+If you need manual control:
+
+```ts
+import { init, destroy } from "react-grep";
+
+init(); // start the inspector
+destroy(); // stop and clean up
+```
+
+### Script tag
+
+```html
+<script src="https://unpkg.com/react-grep/dist/index.global.js"></script>
+```
+
+The inspector starts automatically when the script loads.
+
+## How it works
+
+react-grep reads React's internal fiber tree to find component names and source locations (`_debugSource` / `_debugStack`). This data is only available in **development builds** of React — production builds strip it out.
+
+When the modifier key is held:
+
+1. The hovered DOM element is highlighted with a blue overlay
+2. A tooltip shows the component name, file path, and call site (if available)
+3. Tap `Shift` to toggle between the component source and call site — the active source is highlighted, the inactive one is dimmed
+4. `Cmd+Shift+Click` copies the active `file:line` to clipboard (without toggling)
+
+## API
+
+### `init()`
+
+Start the inspector. Called automatically on import — only needed if you previously called `destroy()`.
+
+### `destroy()`
+
+Stop the inspector and remove all event listeners and DOM elements.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,533 @@
+'use strict';
+
+// src/source-map.ts
+var cache = /* @__PURE__ */ new Map();
+var VLQ_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+var charToInt = [];
+for (let i = 0; i < VLQ_CHARS.length; i++) charToInt[VLQ_CHARS.charCodeAt(i)] = i;
+var decodeVLQ = (str, pos) => {
+  let shift = 0;
+  let value = 0;
+  while (pos.i < str.length) {
+    const digit = charToInt[str.charCodeAt(pos.i++)];
+    value += (digit & 31) << shift;
+    if (!(digit & 32)) return value & 1 ? -(value >> 1) : value >> 1;
+    shift += 5;
+  }
+  return 0;
+};
+var decodeMappings = (raw) => {
+  const result = [];
+  let srcIdx = 0;
+  let origLine = 0;
+  let origCol = 0;
+  for (const line of raw.split(";")) {
+    const segments = [];
+    let genCol = 0;
+    if (line) {
+      const pos = { i: 0 };
+      while (pos.i < line.length) {
+        if (line.charCodeAt(pos.i) === 44) {
+          pos.i++;
+          continue;
+        }
+        genCol += decodeVLQ(line, pos);
+        if (pos.i >= line.length || line.charCodeAt(pos.i) === 44) continue;
+        srcIdx += decodeVLQ(line, pos);
+        origLine += decodeVLQ(line, pos);
+        origCol += decodeVLQ(line, pos);
+        if (pos.i < line.length && line.charCodeAt(pos.i) !== 44) decodeVLQ(line, pos);
+        segments.push([genCol, srcIdx, origLine, origCol]);
+      }
+    }
+    result.push(segments);
+  }
+  return result;
+};
+var DATA_URI_RE = /^data:application\/json[^,]*;base64,([A-Za-z0-9+/=]+)$/;
+var isSameOrigin = (a, b) => {
+  try {
+    return new URL(a).origin === new URL(b).origin;
+  } catch {
+    return false;
+  }
+};
+var fetchAndParse = async (url) => {
+  try {
+    const res = await fetch(url);
+    const text = await res.text();
+    const match = text.match(/\/\/[#@]\s*sourceMappingURL=([^\s]+)$/m);
+    if (!match) return null;
+    const ref = match[1].trim();
+    let mapJson;
+    if (ref.startsWith("data:")) {
+      const dataMatch = DATA_URI_RE.exec(ref);
+      if (!dataMatch) return null;
+      mapJson = atob(dataMatch[1]);
+    } else {
+      const mapUrl = new URL(ref, url).href;
+      if (!isSameOrigin(url, mapUrl)) return null;
+      const mapRes = await fetch(mapUrl);
+      mapJson = await mapRes.text();
+    }
+    const raw = JSON.parse(mapJson);
+    return { sources: raw.sources, mappings: decodeMappings(raw.mappings) };
+  } catch {
+    return null;
+  }
+};
+var getSourceMap = (url) => {
+  let promise = cache.get(url);
+  if (!promise) {
+    promise = fetchAndParse(url);
+    cache.set(url, promise);
+  }
+  return promise;
+};
+var lookup = (map, genLine, genCol) => {
+  if (genLine < 0 || genLine >= map.mappings.length) return null;
+  const segments = map.mappings[genLine];
+  if (!segments.length) return null;
+  let lo = 0;
+  let hi = segments.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    if (segments[mid][0] <= genCol) lo = mid;
+    else hi = mid - 1;
+  }
+  return segments[lo];
+};
+var resolveOriginalPosition = async (url, line, column) => {
+  const map = await getSourceMap(url);
+  if (!map) return null;
+  const seg = lookup(map, line - 1, column - 1);
+  if (!seg) return null;
+  const fileName = map.sources[seg[1]];
+  return {
+    fileName,
+    lineNumber: seg[2] + 1,
+    columnNumber: seg[3] + 1
+  };
+};
+
+// src/fiber.ts
+var COMPOSITE_TAGS = /* @__PURE__ */ new Set([
+  0,
+  // FunctionComponent
+  1,
+  // ClassComponent
+  11,
+  // ForwardRef
+  14,
+  // MemoComponent
+  15
+  // SimpleMemoComponent
+]);
+var getFiberFromElement = (el) => {
+  try {
+    const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+    if (!key) return null;
+    return el[key];
+  } catch {
+    return null;
+  }
+};
+var getCompositeComponentFiber = (fiber) => {
+  let current = fiber;
+  while (current) {
+    if (COMPOSITE_TAGS.has(current.tag)) return current;
+    current = current.return;
+  }
+  return null;
+};
+var getInnerFunction = (type) => {
+  if (typeof type === "function") return type;
+  if (type && typeof type === "object") {
+    if ("render" in type && typeof type.render === "function")
+      return type.render;
+    if ("type" in type && typeof type.type === "function")
+      return type.type;
+  }
+  return null;
+};
+var getComponentName = (fiber) => {
+  const { type } = fiber;
+  if (typeof type === "function") {
+    return type.displayName || type.name || "Anonymous";
+  }
+  if (type && typeof type === "object") {
+    if ("displayName" in type && type.displayName) return type.displayName;
+    const inner = getInnerFunction(type);
+    if (inner) return inner.displayName || inner.name || "Anonymous";
+  }
+  return "Anonymous";
+};
+var SKIP_FRAMES = /* @__PURE__ */ new Set([
+  "jsxDEV",
+  "jsxs",
+  "jsx",
+  "react-stack-top-frame",
+  "react_stack_bottom_frame"
+]);
+var FRAME_RE = /at (?:(\S+) )?\(?(.+):(\d+):(\d+)\)?$/;
+var parseFirstUserFrame = (fiber) => {
+  const stack = fiber._debugStack?.stack;
+  if (!stack) return null;
+  for (const line of stack.split("\n")) {
+    const match = FRAME_RE.exec(line.trim());
+    if (!match) continue;
+    const [, fnName, url, lineStr, colStr] = match;
+    if (fnName && SKIP_FRAMES.has(fnName)) continue;
+    if (url.includes("/node_modules/")) continue;
+    return { url, line: Number(lineStr), column: Number(colStr) };
+  }
+  return null;
+};
+var resolveFrame = async (frame) => {
+  const resolved = await resolveOriginalPosition(frame.url, frame.line, frame.column);
+  if (resolved) return resolved;
+  let fileName = frame.url;
+  try {
+    const parsed = new URL(frame.url);
+    fileName = decodeURIComponent(parsed.pathname);
+    const qIdx = fileName.indexOf("?");
+    if (qIdx !== -1) fileName = fileName.substring(0, qIdx);
+  } catch {
+  }
+  fileName = fileName.replace(/\.\.\//g, "");
+  if (fileName.startsWith("/")) fileName = fileName.substring(1);
+  return { fileName, lineNumber: frame.line, columnNumber: frame.column };
+};
+var getCompositeDebugSource = async (fiber) => {
+  if (fiber._debugSource) return fiber._debugSource;
+  if (fiber._debugOwner?._debugSource) return fiber._debugOwner._debugSource;
+  const frame = parseFirstUserFrame(fiber);
+  if (frame) return resolveFrame(frame);
+  if (fiber._debugOwner) {
+    const ownerFrame = parseFirstUserFrame(fiber._debugOwner);
+    if (ownerFrame) return resolveFrame(ownerFrame);
+  }
+  return null;
+};
+var getDomDebugSource = async (fiber) => {
+  if (fiber._debugSource) return fiber._debugSource;
+  const frame = parseFirstUserFrame(fiber);
+  if (frame) return resolveFrame(frame);
+  return null;
+};
+var getComponentInfo = async (el) => {
+  const domFiber = getFiberFromElement(el);
+  if (!domFiber) return null;
+  const composite = getCompositeComponentFiber(domFiber);
+  if (!composite) return null;
+  const isComponentRoot = domFiber.return != null && COMPOSITE_TAGS.has(domFiber.return.tag);
+  if (isComponentRoot) {
+    return {
+      kind: "component",
+      name: getComponentName(composite),
+      elementTag: null,
+      source: await getCompositeDebugSource(composite),
+      callSite: null
+    };
+  }
+  const owner = domFiber._debugOwner;
+  const elementTag = typeof domFiber.type === "string" ? domFiber.type : null;
+  if (owner && owner === composite) {
+    return {
+      kind: "element",
+      name: getComponentName(owner),
+      elementTag,
+      source: await getDomDebugSource(domFiber),
+      callSite: await getCompositeDebugSource(composite)
+    };
+  }
+  const nameSource = owner && COMPOSITE_TAGS.has(owner.tag) ? owner : composite;
+  return {
+    kind: "children",
+    name: getComponentName(nameSource),
+    elementTag,
+    source: await getDomDebugSource(domFiber),
+    callSite: null
+  };
+};
+
+// src/overlay.ts
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var COLORS = {
+  name: "#93c5fd",
+  tag: "#a78bfa",
+  path: "#71717a",
+  pathActive: "#a1a1aa",
+  pathDim: "#3f3f46",
+  hint: "#52525b"
+};
+var HIGHLIGHT_STYLES = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: "2147483646",
+  backgroundColor: "rgba(66, 135, 245, 0.15)",
+  border: "1.5px solid rgba(66, 135, 245, 0.6)",
+  borderRadius: "3px",
+  display: "none",
+  transition: "top 60ms ease-out, left 60ms ease-out, width 60ms ease-out, height 60ms ease-out"
+};
+var TOOLTIP_STYLES = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: "2147483647",
+  display: "none",
+  fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",
+  fontSize: "12px",
+  lineHeight: "1.4",
+  color: "#e4e4e7",
+  backgroundColor: "#18181b",
+  border: "1px solid #3f3f46",
+  borderRadius: "6px",
+  padding: "4px 8px",
+  whiteSpace: "nowrap",
+  maxWidth: "500px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4)"
+};
+var applyStyles = (el, styles) => {
+  Object.assign(el.style, styles);
+};
+var truncatePath = (filePath) => {
+  const parts = filePath.split("/");
+  if (parts.length <= 3) return filePath;
+  return `.../${parts.slice(-3).join("/")}`;
+};
+var createSpan = (text, styles) => {
+  const span = document.createElement("span");
+  span.textContent = text;
+  Object.assign(span.style, styles);
+  return span;
+};
+var OverlayManager = class {
+  highlight = null;
+  tooltip = null;
+  init() {
+    if (this.highlight) return;
+    this.highlight = document.createElement("div");
+    this.highlight.dataset.reactGrep = "highlight";
+    applyStyles(this.highlight, HIGHLIGHT_STYLES);
+    document.body.appendChild(this.highlight);
+    this.tooltip = document.createElement("div");
+    this.tooltip.dataset.reactGrep = "tooltip";
+    applyStyles(this.tooltip, TOOLTIP_STYLES);
+    document.body.appendChild(this.tooltip);
+  }
+  show(el, info, activeSource = "source") {
+    if (!this.highlight || !this.tooltip) return;
+    const rect = el.getBoundingClientRect();
+    this.highlight.style.top = `${rect.top}px`;
+    this.highlight.style.left = `${rect.left}px`;
+    this.highlight.style.width = `${rect.width}px`;
+    this.highlight.style.height = `${rect.height}px`;
+    this.highlight.style.display = "block";
+    this.tooltip.textContent = "";
+    this.tooltip.appendChild(createSpan(info.name, { color: COLORS.name, fontWeight: "600" }));
+    if (info.elementTag != null) {
+      this.tooltip.appendChild(createSpan(" > ", { color: COLORS.path }));
+      this.tooltip.appendChild(
+        createSpan(info.elementTag, { color: COLORS.tag, fontWeight: "600" })
+      );
+    }
+    const filePath = info.source ? `${info.source.fileName}:${info.source.lineNumber}` : null;
+    const callSitePath = info.callSite ? `${info.callSite.fileName}:${info.callSite.lineNumber}` : null;
+    if (filePath && callSitePath) {
+      const sourceColor = activeSource === "source" ? COLORS.pathActive : COLORS.pathDim;
+      const callSiteColor = activeSource === "callSite" ? COLORS.pathActive : COLORS.pathDim;
+      const shiftHint = isMac ? "\u21E7" : "Shift";
+      const sourceText = truncatePath(filePath);
+      const callSiteText = truncatePath(callSitePath);
+      this.tooltip.appendChild(
+        createSpan(
+          ` ${activeSource === "callSite" ? "(" : ""}${sourceText}${activeSource === "callSite" ? ")" : ""}`,
+          { color: sourceColor }
+        )
+      );
+      this.tooltip.appendChild(createSpan(` ${shiftHint} `, { color: COLORS.hint }));
+      this.tooltip.appendChild(
+        createSpan(
+          `${activeSource === "source" ? "(" : ""}${callSiteText}${activeSource === "source" ? ")" : ""}`,
+          { color: callSiteColor }
+        )
+      );
+    } else if (filePath) {
+      this.tooltip.appendChild(createSpan(` ${truncatePath(filePath)}`, { color: COLORS.path }));
+    }
+    const tooltipRect = this.tooltip.getBoundingClientRect();
+    let top = rect.top - tooltipRect.height - 6;
+    let left = rect.left;
+    if (top < 4) {
+      top = rect.bottom + 6;
+    }
+    if (left + tooltipRect.width > window.innerWidth - 4) {
+      left = window.innerWidth - tooltipRect.width - 4;
+    }
+    this.tooltip.style.top = `${top}px`;
+    this.tooltip.style.left = `${Math.max(4, left)}px`;
+    this.tooltip.style.display = "block";
+  }
+  showCopied(location) {
+    if (!this.tooltip) return;
+    this.tooltip.textContent = "";
+    this.tooltip.appendChild(createSpan("Copied!", { color: "#4ade80", fontWeight: "600" }));
+    this.tooltip.appendChild(createSpan(` ${truncatePath(location)}`, { color: "#a1a1aa" }));
+    this.tooltip.style.display = "block";
+    setTimeout(() => this.hide(), 1500);
+  }
+  hide() {
+    if (this.highlight) this.highlight.style.display = "none";
+    if (this.tooltip) this.tooltip.style.display = "none";
+  }
+  destroy() {
+    this.highlight?.remove();
+    this.tooltip?.remove();
+    this.highlight = null;
+    this.tooltip = null;
+  }
+};
+
+// src/inspector.ts
+var isMac2 = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var Inspector = class {
+  overlay = new OverlayManager();
+  moveGeneration = 0;
+  lastTarget = null;
+  lastInfo = null;
+  sourceToggled = false;
+  shiftPressedClean = false;
+  boundHandlers;
+  constructor() {
+    this.boundHandlers = {
+      mousemove: this.handleMouseMove.bind(this),
+      click: this.handleClick.bind(this),
+      keydown: this.handleKeyDown.bind(this),
+      keyup: this.handleKeyUp.bind(this)
+    };
+  }
+  start() {
+    window.addEventListener("mousemove", this.boundHandlers.mousemove);
+    window.addEventListener("click", this.boundHandlers.click, true);
+    window.addEventListener("keydown", this.boundHandlers.keydown);
+    window.addEventListener("keyup", this.boundHandlers.keyup);
+  }
+  stop() {
+    window.removeEventListener("mousemove", this.boundHandlers.mousemove);
+    window.removeEventListener("click", this.boundHandlers.click, true);
+    window.removeEventListener("keydown", this.boundHandlers.keydown);
+    window.removeEventListener("keyup", this.boundHandlers.keyup);
+    this.overlay.destroy();
+    document.body.style.cursor = "";
+    this.lastTarget = null;
+    this.lastInfo = null;
+    this.sourceToggled = false;
+    this.shiftPressedClean = false;
+  }
+  isModifierHeld(e) {
+    return isMac2 ? e.metaKey : e.ctrlKey;
+  }
+  async handleMouseMove(e) {
+    if (!this.isModifierHeld(e)) {
+      this.overlay.hide();
+      document.body.style.cursor = "";
+      this.lastTarget = null;
+      this.lastInfo = null;
+      return;
+    }
+    this.overlay.init();
+    document.body.style.cursor = "crosshair";
+    const target = document.elementFromPoint(e.clientX, e.clientY);
+    if (!target || target.closest("[data-react-grep]")) return;
+    if (target !== this.lastTarget) {
+      this.sourceToggled = false;
+    }
+    const gen = ++this.moveGeneration;
+    const info = await getComponentInfo(target);
+    if (gen !== this.moveGeneration) return;
+    if (!info) {
+      this.overlay.hide();
+      this.lastTarget = null;
+      this.lastInfo = null;
+      return;
+    }
+    this.lastTarget = target;
+    this.lastInfo = info;
+    this.overlay.show(target, info, this.getActiveSource());
+  }
+  async handleClick(e) {
+    if (!this.isModifierHeld(e) || !e.shiftKey) return;
+    const target = document.elementFromPoint(e.clientX, e.clientY);
+    if (!target || target.closest("[data-react-grep]")) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    this.shiftPressedClean = false;
+    const info = await getComponentInfo(target);
+    if (!info) return;
+    const source = this.getActiveCopySource(info);
+    if (!source) return;
+    const { fileName, lineNumber, columnNumber } = source;
+    const location = columnNumber != null ? `${fileName}:${lineNumber}:${columnNumber}` : `${fileName}:${lineNumber}`;
+    await this.copyToClipboard(location);
+    this.overlay.showCopied(location);
+  }
+  handleKeyDown(e) {
+    if (e.key === "Shift" && this.isModifierHeld(e)) {
+      this.shiftPressedClean = true;
+    }
+  }
+  handleKeyUp(e) {
+    if (isMac2 && e.key === "Meta" || !isMac2 && e.key === "Control") {
+      this.overlay.hide();
+      document.body.style.cursor = "";
+      this.lastTarget = null;
+      this.lastInfo = null;
+      return;
+    }
+    if (e.key === "Shift" && this.shiftPressedClean && this.lastTarget && this.lastInfo && this.lastInfo.callSite) {
+      this.sourceToggled = !this.sourceToggled;
+      this.overlay.show(this.lastTarget, this.lastInfo, this.getActiveSource());
+    }
+    this.shiftPressedClean = false;
+  }
+  getActiveSource() {
+    return this.sourceToggled ? "callSite" : "source";
+  }
+  getActiveCopySource(info) {
+    return this.sourceToggled && info.callSite ? info.callSite : info.source;
+  }
+  async copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+    }
+  }
+};
+
+// src/index.ts
+var inspector = null;
+var init = () => {
+  if (inspector) return;
+  inspector = new Inspector();
+  inspector.start();
+};
+var destroy = () => {
+  if (!inspector) return;
+  inspector.stop();
+  inspector = null;
+};
+if (typeof window !== "undefined") {
+  const bootstrap = () => init();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bootstrap);
+  } else {
+    bootstrap();
+  }
+}
+
+exports.destroy = destroy;
+exports.init = init;

package/dist/index.d.cts

@@ -0,0 +1,4 @@
+declare const init: () => void;
+declare const destroy: () => void;
+
+export { destroy, init };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+declare const init: () => void;
+declare const destroy: () => void;
+
+export { destroy, init };

package/dist/index.global.js

@@ -0,0 +1,3 @@
+var ReactGrep=(function(exports){'use strict';var x=new Map,k="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",E=[];for(let e=0;e<k.length;e++)E[k.charCodeAt(e)]=e;var d=(e,t)=>{let n=0,i=0;for(;t.i<e.length;){let o=E[e.charCodeAt(t.i++)];if(i+=(o&31)<<n,!(o&32))return i&1?-(i>>1):i>>1;n+=5;}return 0},L=e=>{let t=[],n=0,i=0,o=0;for(let s of e.split(";")){let l=[],a=0;if(s){let r={i:0};for(;r.i<s.length;){if(s.charCodeAt(r.i)===44){r.i++;continue}a+=d(s,r),!(r.i>=s.length||s.charCodeAt(r.i)===44)&&(n+=d(s,r),i+=d(s,r),o+=d(s,r),r.i<s.length&&s.charCodeAt(r.i)!==44&&d(s,r),l.push([a,n,i,o]));}}t.push(l);}return t},_=/^data:application\/json[^,]*;base64,([A-Za-z0-9+/=]+)$/,A=(e,t)=>{try{return new URL(e).origin===new URL(t).origin}catch{return  false}},H=async e=>{try{let i=(await(await fetch(e)).text()).match(/\/\/[#@]\s*sourceMappingURL=([^\s]+)$/m);if(!i)return null;let o=i[1].trim(),s;if(o.startsWith("data:")){let a=_.exec(o);if(!a)return null;s=atob(a[1]);}else {let a=new URL(o,e).href;if(!A(e,a))return null;s=await(await fetch(a)).text();}let l=JSON.parse(s);return {sources:l.sources,mappings:L(l.mappings)}}catch{return null}},O=e=>{let t=x.get(e);return t||(t=H(e),x.set(e,t)),t},K=(e,t,n)=>{if(t<0||t>=e.mappings.length)return null;let i=e.mappings[t];if(!i.length)return null;let o=0,s=i.length-1;for(;o<s;){let l=o+s+1>>1;i[l][0]<=n?o=l:s=l-1;}return i[o]},M=async(e,t,n)=>{let i=await O(e);if(!i)return null;let o=K(i,t-1,n-1);return o?{fileName:i.sources[o[1]],lineNumber:o[2]+1,columnNumber:o[3]+1}:null};var b=new Set([0,1,11,14,15]),U=e=>{try{let t=Object.keys(e).find(n=>n.startsWith("__reactFiber$"));return t?e[t]:null}catch{return null}},j=e=>{let t=e;for(;t;){if(b.has(t.tag))return t;t=t.return;}return null},W=e=>{if(typeof e=="function")return e;if(e&&typeof e=="object"){if("render"in e&&typeof e.render=="function")return e.render;if("type"in e&&typeof e.type=="function")return e.type}return null},y=e=>{let{type:t}=e;if(typeof t=="function")return t.displayName||t.name||"Anonymous";if(t&&typeof t=="object"){if("displayName"in t&&t.displayName)return t.displayName;let n=W(t);if(n)return n.displayName||n.name||"Anonymous"}return "Anonymous"},G=new Set(["jsxDEV","jsxs","jsx","react-stack-top-frame","react_stack_bottom_frame"]),z=/at (?:(\S+) )?\(?(.+):(\d+):(\d+)\)?$/,v=e=>{let t=e._debugStack?.stack;if(!t)return null;for(let n of t.split(`
+`)){let i=z.exec(n.trim());if(!i)continue;let[,o,s,l,a]=i;if(!(o&&G.has(o))&&!s.includes("/node_modules/"))return {url:s,line:Number(l),column:Number(a)}}return null},S=async e=>{let t=await M(e.url,e.line,e.column);if(t)return t;let n=e.url;try{let i=new URL(e.url);n=decodeURIComponent(i.pathname);let o=n.indexOf("?");o!==-1&&(n=n.substring(0,o));}catch{}return n=n.replace(/\.\.\//g,""),n.startsWith("/")&&(n=n.substring(1)),{fileName:n,lineNumber:e.line,columnNumber:e.column}},T=async e=>{if(e._debugSource)return e._debugSource;if(e._debugOwner?._debugSource)return e._debugOwner._debugSource;let t=v(e);if(t)return S(t);if(e._debugOwner){let n=v(e._debugOwner);if(n)return S(n)}return null},F=async e=>{if(e._debugSource)return e._debugSource;let t=v(e);return t?S(t):null},w=async e=>{let t=U(e);if(!t)return null;let n=j(t);if(!n)return null;if(t.return!=null&&b.has(t.return.tag))return {kind:"component",name:y(n),elementTag:null,source:await T(n),callSite:null};let o=t._debugOwner,s=typeof t.type=="string"?t.type:null;if(o&&o===n)return {kind:"element",name:y(o),elementTag:s,source:await F(t),callSite:await T(n)};let l=o&&b.has(o.tag)?o:n;return {kind:"children",name:y(l),elementTag:s,source:await F(t),callSite:null}};var Y=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform),c={name:"#93c5fd",tag:"#a78bfa",path:"#71717a",pathActive:"#a1a1aa",pathDim:"#3f3f46",hint:"#52525b"},V={position:"fixed",pointerEvents:"none",zIndex:"2147483646",backgroundColor:"rgba(66, 135, 245, 0.15)",border:"1.5px solid rgba(66, 135, 245, 0.6)",borderRadius:"3px",display:"none",transition:"top 60ms ease-out, left 60ms ease-out, width 60ms ease-out, height 60ms ease-out"},B={position:"fixed",pointerEvents:"none",zIndex:"2147483647",display:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",fontSize:"12px",lineHeight:"1.4",color:"#e4e4e7",backgroundColor:"#18181b",border:"1px solid #3f3f46",borderRadius:"6px",padding:"4px 8px",whiteSpace:"nowrap",maxWidth:"500px",overflow:"hidden",textOverflow:"ellipsis",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.4)"},P=(e,t)=>{Object.assign(e.style,t);},p=e=>{let t=e.split("/");return t.length<=3?e:`.../${t.slice(-3).join("/")}`},u=(e,t)=>{let n=document.createElement("span");return n.textContent=e,Object.assign(n.style,t),n},m=class{highlight=null;tooltip=null;init(){this.highlight||(this.highlight=document.createElement("div"),this.highlight.dataset.reactGrep="highlight",P(this.highlight,V),document.body.appendChild(this.highlight),this.tooltip=document.createElement("div"),this.tooltip.dataset.reactGrep="tooltip",P(this.tooltip,B),document.body.appendChild(this.tooltip));}show(t,n,i="source"){if(!this.highlight||!this.tooltip)return;let o=t.getBoundingClientRect();this.highlight.style.top=`${o.top}px`,this.highlight.style.left=`${o.left}px`,this.highlight.style.width=`${o.width}px`,this.highlight.style.height=`${o.height}px`,this.highlight.style.display="block",this.tooltip.textContent="",this.tooltip.appendChild(u(n.name,{color:c.name,fontWeight:"600"})),n.elementTag!=null&&(this.tooltip.appendChild(u(" > ",{color:c.path})),this.tooltip.appendChild(u(n.elementTag,{color:c.tag,fontWeight:"600"})));let s=n.source?`${n.source.fileName}:${n.source.lineNumber}`:null,l=n.callSite?`${n.callSite.fileName}:${n.callSite.lineNumber}`:null;if(s&&l){let I=i==="source"?c.pathActive:c.pathDim,D=i==="callSite"?c.pathActive:c.pathDim,N=Y?"\u21E7":"Shift",$=p(s),R=p(l);this.tooltip.appendChild(u(` ${i==="callSite"?"(":""}${$}${i==="callSite"?")":""}`,{color:I})),this.tooltip.appendChild(u(` ${N} `,{color:c.hint})),this.tooltip.appendChild(u(`${i==="source"?"(":""}${R}${i==="source"?")":""}`,{color:D}));}else s&&this.tooltip.appendChild(u(` ${p(s)}`,{color:c.path}));let a=this.tooltip.getBoundingClientRect(),r=o.top-a.height-6,f=o.left;r<4&&(r=o.bottom+6),f+a.width>window.innerWidth-4&&(f=window.innerWidth-a.width-4),this.tooltip.style.top=`${r}px`,this.tooltip.style.left=`${Math.max(4,f)}px`,this.tooltip.style.display="block";}showCopied(t){this.tooltip&&(this.tooltip.textContent="",this.tooltip.appendChild(u("Copied!",{color:"#4ade80",fontWeight:"600"})),this.tooltip.appendChild(u(` ${p(t)}`,{color:"#a1a1aa"})),this.tooltip.style.display="block",setTimeout(()=>this.hide(),1500));}hide(){this.highlight&&(this.highlight.style.display="none"),this.tooltip&&(this.tooltip.style.display="none");}destroy(){this.highlight?.remove(),this.tooltip?.remove(),this.highlight=null,this.tooltip=null;}};var C=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform),g=class{overlay=new m;moveGeneration=0;lastTarget=null;lastInfo=null;sourceToggled=false;shiftPressedClean=false;boundHandlers;constructor(){this.boundHandlers={mousemove:this.handleMouseMove.bind(this),click:this.handleClick.bind(this),keydown:this.handleKeyDown.bind(this),keyup:this.handleKeyUp.bind(this)};}start(){window.addEventListener("mousemove",this.boundHandlers.mousemove),window.addEventListener("click",this.boundHandlers.click,true),window.addEventListener("keydown",this.boundHandlers.keydown),window.addEventListener("keyup",this.boundHandlers.keyup);}stop(){window.removeEventListener("mousemove",this.boundHandlers.mousemove),window.removeEventListener("click",this.boundHandlers.click,true),window.removeEventListener("keydown",this.boundHandlers.keydown),window.removeEventListener("keyup",this.boundHandlers.keyup),this.overlay.destroy(),document.body.style.cursor="",this.lastTarget=null,this.lastInfo=null,this.sourceToggled=false,this.shiftPressedClean=false;}isModifierHeld(t){return C?t.metaKey:t.ctrlKey}async handleMouseMove(t){if(!this.isModifierHeld(t)){this.overlay.hide(),document.body.style.cursor="",this.lastTarget=null,this.lastInfo=null;return}this.overlay.init(),document.body.style.cursor="crosshair";let n=document.elementFromPoint(t.clientX,t.clientY);if(!n||n.closest("[data-react-grep]"))return;n!==this.lastTarget&&(this.sourceToggled=false);let i=++this.moveGeneration,o=await w(n);if(i===this.moveGeneration){if(!o){this.overlay.hide(),this.lastTarget=null,this.lastInfo=null;return}this.lastTarget=n,this.lastInfo=o,this.overlay.show(n,o,this.getActiveSource());}}async handleClick(t){if(!this.isModifierHeld(t)||!t.shiftKey)return;let n=document.elementFromPoint(t.clientX,t.clientY);if(!n||n.closest("[data-react-grep]"))return;t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation(),this.shiftPressedClean=false;let i=await w(n);if(!i)return;let o=this.getActiveCopySource(i);if(!o)return;let{fileName:s,lineNumber:l,columnNumber:a}=o,r=a!=null?`${s}:${l}:${a}`:`${s}:${l}`;await this.copyToClipboard(r),this.overlay.showCopied(r);}handleKeyDown(t){t.key==="Shift"&&this.isModifierHeld(t)&&(this.shiftPressedClean=true);}handleKeyUp(t){if(C&&t.key==="Meta"||!C&&t.key==="Control"){this.overlay.hide(),document.body.style.cursor="",this.lastTarget=null,this.lastInfo=null;return}t.key==="Shift"&&this.shiftPressedClean&&this.lastTarget&&this.lastInfo&&this.lastInfo.callSite&&(this.sourceToggled=!this.sourceToggled,this.overlay.show(this.lastTarget,this.lastInfo,this.getActiveSource())),this.shiftPressedClean=false;}getActiveSource(){return this.sourceToggled?"callSite":"source"}getActiveCopySource(t){return this.sourceToggled&&t.callSite?t.callSite:t.source}async copyToClipboard(t){try{await navigator.clipboard.writeText(t);}catch{}}};var h=null,J=()=>{h||(h=new g,h.start());},it=()=>{h&&(h.stop(),h=null);};if(typeof window<"u"){let e=()=>J();document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e();}
+exports.destroy=it;exports.init=J;return exports;})({});

package/dist/index.js

@@ -0,0 +1,530 @@
+// src/source-map.ts
+var cache = /* @__PURE__ */ new Map();
+var VLQ_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+var charToInt = [];
+for (let i = 0; i < VLQ_CHARS.length; i++) charToInt[VLQ_CHARS.charCodeAt(i)] = i;
+var decodeVLQ = (str, pos) => {
+  let shift = 0;
+  let value = 0;
+  while (pos.i < str.length) {
+    const digit = charToInt[str.charCodeAt(pos.i++)];
+    value += (digit & 31) << shift;
+    if (!(digit & 32)) return value & 1 ? -(value >> 1) : value >> 1;
+    shift += 5;
+  }
+  return 0;
+};
+var decodeMappings = (raw) => {
+  const result = [];
+  let srcIdx = 0;
+  let origLine = 0;
+  let origCol = 0;
+  for (const line of raw.split(";")) {
+    const segments = [];
+    let genCol = 0;
+    if (line) {
+      const pos = { i: 0 };
+      while (pos.i < line.length) {
+        if (line.charCodeAt(pos.i) === 44) {
+          pos.i++;
+          continue;
+        }
+        genCol += decodeVLQ(line, pos);
+        if (pos.i >= line.length || line.charCodeAt(pos.i) === 44) continue;
+        srcIdx += decodeVLQ(line, pos);
+        origLine += decodeVLQ(line, pos);
+        origCol += decodeVLQ(line, pos);
+        if (pos.i < line.length && line.charCodeAt(pos.i) !== 44) decodeVLQ(line, pos);
+        segments.push([genCol, srcIdx, origLine, origCol]);
+      }
+    }
+    result.push(segments);
+  }
+  return result;
+};
+var DATA_URI_RE = /^data:application\/json[^,]*;base64,([A-Za-z0-9+/=]+)$/;
+var isSameOrigin = (a, b) => {
+  try {
+    return new URL(a).origin === new URL(b).origin;
+  } catch {
+    return false;
+  }
+};
+var fetchAndParse = async (url) => {
+  try {
+    const res = await fetch(url);
+    const text = await res.text();
+    const match = text.match(/\/\/[#@]\s*sourceMappingURL=([^\s]+)$/m);
+    if (!match) return null;
+    const ref = match[1].trim();
+    let mapJson;
+    if (ref.startsWith("data:")) {
+      const dataMatch = DATA_URI_RE.exec(ref);
+      if (!dataMatch) return null;
+      mapJson = atob(dataMatch[1]);
+    } else {
+      const mapUrl = new URL(ref, url).href;
+      if (!isSameOrigin(url, mapUrl)) return null;
+      const mapRes = await fetch(mapUrl);
+      mapJson = await mapRes.text();
+    }
+    const raw = JSON.parse(mapJson);
+    return { sources: raw.sources, mappings: decodeMappings(raw.mappings) };
+  } catch {
+    return null;
+  }
+};
+var getSourceMap = (url) => {
+  let promise = cache.get(url);
+  if (!promise) {
+    promise = fetchAndParse(url);
+    cache.set(url, promise);
+  }
+  return promise;
+};
+var lookup = (map, genLine, genCol) => {
+  if (genLine < 0 || genLine >= map.mappings.length) return null;
+  const segments = map.mappings[genLine];
+  if (!segments.length) return null;
+  let lo = 0;
+  let hi = segments.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    if (segments[mid][0] <= genCol) lo = mid;
+    else hi = mid - 1;
+  }
+  return segments[lo];
+};
+var resolveOriginalPosition = async (url, line, column) => {
+  const map = await getSourceMap(url);
+  if (!map) return null;
+  const seg = lookup(map, line - 1, column - 1);
+  if (!seg) return null;
+  const fileName = map.sources[seg[1]];
+  return {
+    fileName,
+    lineNumber: seg[2] + 1,
+    columnNumber: seg[3] + 1
+  };
+};
+
+// src/fiber.ts
+var COMPOSITE_TAGS = /* @__PURE__ */ new Set([
+  0,
+  // FunctionComponent
+  1,
+  // ClassComponent
+  11,
+  // ForwardRef
+  14,
+  // MemoComponent
+  15
+  // SimpleMemoComponent
+]);
+var getFiberFromElement = (el) => {
+  try {
+    const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+    if (!key) return null;
+    return el[key];
+  } catch {
+    return null;
+  }
+};
+var getCompositeComponentFiber = (fiber) => {
+  let current = fiber;
+  while (current) {
+    if (COMPOSITE_TAGS.has(current.tag)) return current;
+    current = current.return;
+  }
+  return null;
+};
+var getInnerFunction = (type) => {
+  if (typeof type === "function") return type;
+  if (type && typeof type === "object") {
+    if ("render" in type && typeof type.render === "function")
+      return type.render;
+    if ("type" in type && typeof type.type === "function")
+      return type.type;
+  }
+  return null;
+};
+var getComponentName = (fiber) => {
+  const { type } = fiber;
+  if (typeof type === "function") {
+    return type.displayName || type.name || "Anonymous";
+  }
+  if (type && typeof type === "object") {
+    if ("displayName" in type && type.displayName) return type.displayName;
+    const inner = getInnerFunction(type);
+    if (inner) return inner.displayName || inner.name || "Anonymous";
+  }
+  return "Anonymous";
+};
+var SKIP_FRAMES = /* @__PURE__ */ new Set([
+  "jsxDEV",
+  "jsxs",
+  "jsx",
+  "react-stack-top-frame",
+  "react_stack_bottom_frame"
+]);
+var FRAME_RE = /at (?:(\S+) )?\(?(.+):(\d+):(\d+)\)?$/;
+var parseFirstUserFrame = (fiber) => {
+  const stack = fiber._debugStack?.stack;
+  if (!stack) return null;
+  for (const line of stack.split("\n")) {
+    const match = FRAME_RE.exec(line.trim());
+    if (!match) continue;
+    const [, fnName, url, lineStr, colStr] = match;
+    if (fnName && SKIP_FRAMES.has(fnName)) continue;
+    if (url.includes("/node_modules/")) continue;
+    return { url, line: Number(lineStr), column: Number(colStr) };
+  }
+  return null;
+};
+var resolveFrame = async (frame) => {
+  const resolved = await resolveOriginalPosition(frame.url, frame.line, frame.column);
+  if (resolved) return resolved;
+  let fileName = frame.url;
+  try {
+    const parsed = new URL(frame.url);
+    fileName = decodeURIComponent(parsed.pathname);
+    const qIdx = fileName.indexOf("?");
+    if (qIdx !== -1) fileName = fileName.substring(0, qIdx);
+  } catch {
+  }
+  fileName = fileName.replace(/\.\.\//g, "");
+  if (fileName.startsWith("/")) fileName = fileName.substring(1);
+  return { fileName, lineNumber: frame.line, columnNumber: frame.column };
+};
+var getCompositeDebugSource = async (fiber) => {
+  if (fiber._debugSource) return fiber._debugSource;
+  if (fiber._debugOwner?._debugSource) return fiber._debugOwner._debugSource;
+  const frame = parseFirstUserFrame(fiber);
+  if (frame) return resolveFrame(frame);
+  if (fiber._debugOwner) {
+    const ownerFrame = parseFirstUserFrame(fiber._debugOwner);
+    if (ownerFrame) return resolveFrame(ownerFrame);
+  }
+  return null;
+};
+var getDomDebugSource = async (fiber) => {
+  if (fiber._debugSource) return fiber._debugSource;
+  const frame = parseFirstUserFrame(fiber);
+  if (frame) return resolveFrame(frame);
+  return null;
+};
+var getComponentInfo = async (el) => {
+  const domFiber = getFiberFromElement(el);
+  if (!domFiber) return null;
+  const composite = getCompositeComponentFiber(domFiber);
+  if (!composite) return null;
+  const isComponentRoot = domFiber.return != null && COMPOSITE_TAGS.has(domFiber.return.tag);
+  if (isComponentRoot) {
+    return {
+      kind: "component",
+      name: getComponentName(composite),
+      elementTag: null,
+      source: await getCompositeDebugSource(composite),
+      callSite: null
+    };
+  }
+  const owner = domFiber._debugOwner;
+  const elementTag = typeof domFiber.type === "string" ? domFiber.type : null;
+  if (owner && owner === composite) {
+    return {
+      kind: "element",
+      name: getComponentName(owner),
+      elementTag,
+      source: await getDomDebugSource(domFiber),
+      callSite: await getCompositeDebugSource(composite)
+    };
+  }
+  const nameSource = owner && COMPOSITE_TAGS.has(owner.tag) ? owner : composite;
+  return {
+    kind: "children",
+    name: getComponentName(nameSource),
+    elementTag,
+    source: await getDomDebugSource(domFiber),
+    callSite: null
+  };
+};
+
+// src/overlay.ts
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var COLORS = {
+  name: "#93c5fd",
+  tag: "#a78bfa",
+  path: "#71717a",
+  pathActive: "#a1a1aa",
+  pathDim: "#3f3f46",
+  hint: "#52525b"
+};
+var HIGHLIGHT_STYLES = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: "2147483646",
+  backgroundColor: "rgba(66, 135, 245, 0.15)",
+  border: "1.5px solid rgba(66, 135, 245, 0.6)",
+  borderRadius: "3px",
+  display: "none",
+  transition: "top 60ms ease-out, left 60ms ease-out, width 60ms ease-out, height 60ms ease-out"
+};
+var TOOLTIP_STYLES = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: "2147483647",
+  display: "none",
+  fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",
+  fontSize: "12px",
+  lineHeight: "1.4",
+  color: "#e4e4e7",
+  backgroundColor: "#18181b",
+  border: "1px solid #3f3f46",
+  borderRadius: "6px",
+  padding: "4px 8px",
+  whiteSpace: "nowrap",
+  maxWidth: "500px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4)"
+};
+var applyStyles = (el, styles) => {
+  Object.assign(el.style, styles);
+};
+var truncatePath = (filePath) => {
+  const parts = filePath.split("/");
+  if (parts.length <= 3) return filePath;
+  return `.../${parts.slice(-3).join("/")}`;
+};
+var createSpan = (text, styles) => {
+  const span = document.createElement("span");
+  span.textContent = text;
+  Object.assign(span.style, styles);
+  return span;
+};
+var OverlayManager = class {
+  highlight = null;
+  tooltip = null;
+  init() {
+    if (this.highlight) return;
+    this.highlight = document.createElement("div");
+    this.highlight.dataset.reactGrep = "highlight";
+    applyStyles(this.highlight, HIGHLIGHT_STYLES);
+    document.body.appendChild(this.highlight);
+    this.tooltip = document.createElement("div");
+    this.tooltip.dataset.reactGrep = "tooltip";
+    applyStyles(this.tooltip, TOOLTIP_STYLES);
+    document.body.appendChild(this.tooltip);
+  }
+  show(el, info, activeSource = "source") {
+    if (!this.highlight || !this.tooltip) return;
+    const rect = el.getBoundingClientRect();
+    this.highlight.style.top = `${rect.top}px`;
+    this.highlight.style.left = `${rect.left}px`;
+    this.highlight.style.width = `${rect.width}px`;
+    this.highlight.style.height = `${rect.height}px`;
+    this.highlight.style.display = "block";
+    this.tooltip.textContent = "";
+    this.tooltip.appendChild(createSpan(info.name, { color: COLORS.name, fontWeight: "600" }));
+    if (info.elementTag != null) {
+      this.tooltip.appendChild(createSpan(" > ", { color: COLORS.path }));
+      this.tooltip.appendChild(
+        createSpan(info.elementTag, { color: COLORS.tag, fontWeight: "600" })
+      );
+    }
+    const filePath = info.source ? `${info.source.fileName}:${info.source.lineNumber}` : null;
+    const callSitePath = info.callSite ? `${info.callSite.fileName}:${info.callSite.lineNumber}` : null;
+    if (filePath && callSitePath) {
+      const sourceColor = activeSource === "source" ? COLORS.pathActive : COLORS.pathDim;
+      const callSiteColor = activeSource === "callSite" ? COLORS.pathActive : COLORS.pathDim;
+      const shiftHint = isMac ? "\u21E7" : "Shift";
+      const sourceText = truncatePath(filePath);
+      const callSiteText = truncatePath(callSitePath);
+      this.tooltip.appendChild(
+        createSpan(
+          ` ${activeSource === "callSite" ? "(" : ""}${sourceText}${activeSource === "callSite" ? ")" : ""}`,
+          { color: sourceColor }
+        )
+      );
+      this.tooltip.appendChild(createSpan(` ${shiftHint} `, { color: COLORS.hint }));
+      this.tooltip.appendChild(
+        createSpan(
+          `${activeSource === "source" ? "(" : ""}${callSiteText}${activeSource === "source" ? ")" : ""}`,
+          { color: callSiteColor }
+        )
+      );
+    } else if (filePath) {
+      this.tooltip.appendChild(createSpan(` ${truncatePath(filePath)}`, { color: COLORS.path }));
+    }
+    const tooltipRect = this.tooltip.getBoundingClientRect();
+    let top = rect.top - tooltipRect.height - 6;
+    let left = rect.left;
+    if (top < 4) {
+      top = rect.bottom + 6;
+    }
+    if (left + tooltipRect.width > window.innerWidth - 4) {
+      left = window.innerWidth - tooltipRect.width - 4;
+    }
+    this.tooltip.style.top = `${top}px`;
+    this.tooltip.style.left = `${Math.max(4, left)}px`;
+    this.tooltip.style.display = "block";
+  }
+  showCopied(location) {
+    if (!this.tooltip) return;
+    this.tooltip.textContent = "";
+    this.tooltip.appendChild(createSpan("Copied!", { color: "#4ade80", fontWeight: "600" }));
+    this.tooltip.appendChild(createSpan(` ${truncatePath(location)}`, { color: "#a1a1aa" }));
+    this.tooltip.style.display = "block";
+    setTimeout(() => this.hide(), 1500);
+  }
+  hide() {
+    if (this.highlight) this.highlight.style.display = "none";
+    if (this.tooltip) this.tooltip.style.display = "none";
+  }
+  destroy() {
+    this.highlight?.remove();
+    this.tooltip?.remove();
+    this.highlight = null;
+    this.tooltip = null;
+  }
+};
+
+// src/inspector.ts
+var isMac2 = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var Inspector = class {
+  overlay = new OverlayManager();
+  moveGeneration = 0;
+  lastTarget = null;
+  lastInfo = null;
+  sourceToggled = false;
+  shiftPressedClean = false;
+  boundHandlers;
+  constructor() {
+    this.boundHandlers = {
+      mousemove: this.handleMouseMove.bind(this),
+      click: this.handleClick.bind(this),
+      keydown: this.handleKeyDown.bind(this),
+      keyup: this.handleKeyUp.bind(this)
+    };
+  }
+  start() {
+    window.addEventListener("mousemove", this.boundHandlers.mousemove);
+    window.addEventListener("click", this.boundHandlers.click, true);
+    window.addEventListener("keydown", this.boundHandlers.keydown);
+    window.addEventListener("keyup", this.boundHandlers.keyup);
+  }
+  stop() {
+    window.removeEventListener("mousemove", this.boundHandlers.mousemove);
+    window.removeEventListener("click", this.boundHandlers.click, true);
+    window.removeEventListener("keydown", this.boundHandlers.keydown);
+    window.removeEventListener("keyup", this.boundHandlers.keyup);
+    this.overlay.destroy();
+    document.body.style.cursor = "";
+    this.lastTarget = null;
+    this.lastInfo = null;
+    this.sourceToggled = false;
+    this.shiftPressedClean = false;
+  }
+  isModifierHeld(e) {
+    return isMac2 ? e.metaKey : e.ctrlKey;
+  }
+  async handleMouseMove(e) {
+    if (!this.isModifierHeld(e)) {
+      this.overlay.hide();
+      document.body.style.cursor = "";
+      this.lastTarget = null;
+      this.lastInfo = null;
+      return;
+    }
+    this.overlay.init();
+    document.body.style.cursor = "crosshair";
+    const target = document.elementFromPoint(e.clientX, e.clientY);
+    if (!target || target.closest("[data-react-grep]")) return;
+    if (target !== this.lastTarget) {
+      this.sourceToggled = false;
+    }
+    const gen = ++this.moveGeneration;
+    const info = await getComponentInfo(target);
+    if (gen !== this.moveGeneration) return;
+    if (!info) {
+      this.overlay.hide();
+      this.lastTarget = null;
+      this.lastInfo = null;
+      return;
+    }
+    this.lastTarget = target;
+    this.lastInfo = info;
+    this.overlay.show(target, info, this.getActiveSource());
+  }
+  async handleClick(e) {
+    if (!this.isModifierHeld(e) || !e.shiftKey) return;
+    const target = document.elementFromPoint(e.clientX, e.clientY);
+    if (!target || target.closest("[data-react-grep]")) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    this.shiftPressedClean = false;
+    const info = await getComponentInfo(target);
+    if (!info) return;
+    const source = this.getActiveCopySource(info);
+    if (!source) return;
+    const { fileName, lineNumber, columnNumber } = source;
+    const location = columnNumber != null ? `${fileName}:${lineNumber}:${columnNumber}` : `${fileName}:${lineNumber}`;
+    await this.copyToClipboard(location);
+    this.overlay.showCopied(location);
+  }
+  handleKeyDown(e) {
+    if (e.key === "Shift" && this.isModifierHeld(e)) {
+      this.shiftPressedClean = true;
+    }
+  }
+  handleKeyUp(e) {
+    if (isMac2 && e.key === "Meta" || !isMac2 && e.key === "Control") {
+      this.overlay.hide();
+      document.body.style.cursor = "";
+      this.lastTarget = null;
+      this.lastInfo = null;
+      return;
+    }
+    if (e.key === "Shift" && this.shiftPressedClean && this.lastTarget && this.lastInfo && this.lastInfo.callSite) {
+      this.sourceToggled = !this.sourceToggled;
+      this.overlay.show(this.lastTarget, this.lastInfo, this.getActiveSource());
+    }
+    this.shiftPressedClean = false;
+  }
+  getActiveSource() {
+    return this.sourceToggled ? "callSite" : "source";
+  }
+  getActiveCopySource(info) {
+    return this.sourceToggled && info.callSite ? info.callSite : info.source;
+  }
+  async copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+    }
+  }
+};
+
+// src/index.ts
+var inspector = null;
+var init = () => {
+  if (inspector) return;
+  inspector = new Inspector();
+  inspector.start();
+};
+var destroy = () => {
+  if (!inspector) return;
+  inspector.stop();
+  inspector = null;
+};
+if (typeof window !== "undefined") {
+  const bootstrap = () => init();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bootstrap);
+  } else {
+    bootstrap();
+  }
+}
+
+export { destroy, init };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "react-grep",
+  "version": "0.1.0",
+  "description": "Hold CMD to see React component names + file:line overlaid on any element",
+  "keywords": [
+    "component",
+    "debug",
+    "devtools",
+    "fiber",
+    "inspect",
+    "inspector",
+    "react",
+    "source"
+  ],
+  "homepage": "https://github.com/maxmurr/react-grep",
+  "bugs": {
+    "url": "https://github.com/maxmurr/react-grep/issues"
+  },
+  "license": "MIT",
+  "author": "Max Murray",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maxmurr/react-grep.git",
+    "directory": "packages/react-grep"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": true,
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "browser": "dist/index.global.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "tsup": "^8.2.4",
+    "typescript": "^5.7.0"
+  }
+}