react-grep 0.1.2 → 0.2.1

package/README.md

@@ -41,6 +41,25 @@ destroy(); // stop and clean up
 
 The inspector starts automatically when the script loads.
 
+## Compatibility
+
+react-grep works with any React app that uses `react-dom` in development mode. It reads React's internal fiber tree, so no framework-specific plugin is needed.
+
+| Framework / Bundler               | Status                 |
+| --------------------------------- | ---------------------- |
+| Vite + React                      | Tested                 |
+| Next.js 15 (Turbopack)            | Tested                 |
+| Next.js (Webpack)                 | Untested — should work |
+| Create React App                  | Untested — should work |
+| Remix                             | Untested — should work |
+| Gatsby                            | Untested — should work |
+| Custom Webpack / Rollup / esbuild | Untested — should work |
+| React Native                      | Not supported (no DOM) |
+
+Next.js has dedicated support for server component names and Turbopack indexed source maps.
+
+Source map resolution is automatic — if your dev server serves source maps (inline or external), react-grep will resolve bundled locations back to original files.
+
 ## 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.

package/dist/index.global.js

@@ -1,3 +1,3 @@
-var ReactGrep=(function(exports){'use strict';var k=new Map,T="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",P=[];for(let e=0;e<T.length;e++)P[T.charCodeAt(e)]=e;var m=(e,t)=>{let n=0,i=0;for(;t.i<e.length;){let o=P[e.charCodeAt(t.i++)];if(i+=(o&31)<<n,!(o&32))return i&1?-(i>>1):i>>1;n+=5;}return 0},F=e=>{let t=[],n=0,i=0,o=0;for(let r of e.split(";")){let s=[],a=0;if(r){let l={i:0};for(;l.i<r.length;){if(r.charCodeAt(l.i)===44){l.i++;continue}a+=m(r,l),!(l.i>=r.length||r.charCodeAt(l.i)===44)&&(n+=m(r,l),i+=m(r,l),o+=m(r,l),l.i<r.length&&r.charCodeAt(l.i)!==44&&m(r,l),s.push([a,n,i,o]));}}t.push(s);}return t},U=/^data:application\/json[^,]*;base64,([A-Za-z0-9+/=]+)$/,j=(e,t)=>{try{return new URL(e).origin===new URL(t).origin}catch{return  false}},I=async(e,t)=>{if(e.startsWith("data:")){let o=U.exec(e);return o?atob(o[1]):null}let n=new URL(e,t).href;if(!j(t,n))return null;let i=await fetch(n);return i.ok?i.text():null},K=e=>{let t=[],n=[];for(let i of e){let o=F(i.map.mappings),r=i.offset.line,s=i.offset.column,a=t.length;for(;n.length<r+o.length;)n.push([]);for(let l=0;l<o.length;l++){let d=n[r+l];for(let h of o[l])d.push([l===0?h[0]+s:h[0],h[1]+a,h[2],h[3]]);}t.push(...i.map.sources);}for(let i of n)i.length>1&&i.sort((o,r)=>o[0]-r[0]);return {sources:t,mappings:n}},g=e=>{try{let t=JSON.parse(e);return Array.isArray(t.sections)?K(t.sections):!t.sources||!t.mappings?null:{sources:t.sources,mappings:F(t.mappings)}}catch{return null}},W=async e=>{try{let t=await fetch(e),i=(await t.text()).match(/\/\/[#@]\s*sourceMappingURL=([^\s]+)$/m);if(i){let s=await I(i[1].trim(),e);if(s){let a=g(s);if(a)return a}}let o=t.headers.get("SourceMap")??t.headers.get("X-SourceMap");if(o){let s=await I(o.trim(),e);if(s){let a=g(s);if(a)return a}}let r=await fetch(`${e}.map`);if(r.ok){let s=await r.text();return g(s)}return null}catch{return null}},R=/^about:\/\/React\/Server\/file:\/\/\//,G=/[/\\](\.next[/\\].+?)(?:\?.*)?$/,X=async e=>{try{let t=decodeURIComponent(e.replace(R,"")),n=G.exec(t);if(!n)return null;let o=`${typeof location<"u"?location.origin:""}/__nextjs_source-map?filename=${encodeURIComponent(n[1])}`,r=await fetch(o);if(!r.ok)return null;let s=await r.text();return s?g(s):null}catch{return null}},z=e=>{let t=k.get(e);return t||(t=R.test(e)?X(e):W(e),k.set(e,t)),t},V=(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,r=i.length-1;for(;o<r;){let s=o+r+1>>1;i[s][0]<=n?o=s:r=s-1;}return i[o]},D=async(e,t,n)=>{let i=await z(e);if(!i)return null;let o=V(i,t-1,n-1);if(!o)return null;let r=i.sources[o[1]];return r.startsWith("file:///")&&(r=decodeURIComponent(new URL(r).pathname)),{fileName:r,lineNumber:o[2]+1,columnNumber:o[3]+1}};var S=e=>"env"in e&&typeof e.name=="string",w=new Set([0,1,11,14,15]),Y=e=>{try{let t=Object.keys(e).find(n=>n.startsWith("__reactFiber$"));return t?e[t]:null}catch{return null}},B=e=>{let t=e;for(;t;){if(w.has(t.tag))return t;t=t.return;}return null},J=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},v=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=J(t);if(n)return n.displayName||n.name||"Anonymous"}return "Anonymous"},Q=new Set(["jsxDEV","jsxs","jsx","react-stack-top-frame","react_stack_bottom_frame","fakeJSXCallSite"]),q=/at (?:(\S+) )?\(?(.+):(\d+):(\d+)\)?$/,C=e=>{let t=e._debugStack?.stack;if(!t)return null;for(let n of t.split(`
-`)){let i=q.exec(n.trim());if(!i)continue;let[,o,r,s,a]=i;if(!(o&&Q.has(o))&&!r.includes("/node_modules/"))return {url:r,line:Number(s),column:Number(a)}}return null},x=async e=>{let t=await D(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}},_=async e=>{if(e._debugSource)return e._debugSource;if(e._debugOwner?._debugSource)return e._debugOwner._debugSource;let t=C(e);if(t)return x(t);if(e._debugOwner){let n=C(e._debugOwner);if(n)return x(n)}return null},$=async e=>{if(e._debugSource)return e._debugSource;let t=C(e);return t?x(t):null},M=async e=>{let t=Y(e);if(!t)return null;let n=B(t);if(!n)return null;if(t.return!=null&&w.has(t.return.tag))return {kind:"component",name:v(n),elementTag:null,source:await _(n),callSite:null};let o=t._debugOwner,r=typeof t.type=="string"?t.type:null;return o&&!S(o)&&o===n?{kind:"element",name:v(o),elementTag:r,source:await $(t),callSite:await _(n)}:{kind:"children",name:o&&S(o)?o.name:v(o&&!S(o)&&w.has(o.tag)?o:n),elementTag:r,source:await $(t),callSite:null}};var Z=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform),c={name:"#93c5fd",tag:"#a78bfa",path:"#71717a",pathActive:"#a1a1aa",pathDim:"#3f3f46",hint:"#52525b"},tt={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"},et={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)"},N=(e,t)=>{Object.assign(e.style,t);},f=e=>{let t=e.split("/");return t.length<=2?e:`.../${t.slice(-2).join("/")}`},u=(e,t)=>{let n=document.createElement("span");return n.textContent=e,Object.assign(n.style,t),n},y=class{highlight=null;tooltip=null;init(){this.highlight||(this.highlight=document.createElement("div"),this.highlight.dataset.reactGrep="highlight",N(this.highlight,tt),document.body.appendChild(this.highlight),this.tooltip=document.createElement("div"),this.tooltip.dataset.reactGrep="tooltip",N(this.tooltip,et),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 r=n.source?`${n.source.fileName}:${n.source.lineNumber}`:null,s=n.callSite?`${n.callSite.fileName}:${n.callSite.lineNumber}`:null;if(r&&s){let h=i==="source"?c.pathActive:c.pathDim,O=i==="callSite"?c.pathActive:c.pathDim,A=Z?"\u21E7":"Shift",L=f(r),H=f(s);this.tooltip.appendChild(u(` ${i==="callSite"?"(":""}${L}${i==="callSite"?")":""}`,{color:h})),this.tooltip.appendChild(u(` ${A} `,{color:c.hint})),this.tooltip.appendChild(u(`${i==="source"?"(":""}${H}${i==="source"?")":""}`,{color:O}));}else r&&this.tooltip.appendChild(u(` ${f(r)}`,{color:c.path}));let a=this.tooltip.getBoundingClientRect(),l=o.top-a.height-6,d=o.left;l<4&&(l=o.bottom+6),d+a.width>window.innerWidth-4&&(d=window.innerWidth-a.width-4),this.tooltip.style.top=`${l}px`,this.tooltip.style.left=`${Math.max(4,d)}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(` ${f(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 E=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform),b=class{overlay=new y;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 E?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 M(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 M(n);if(!i)return;let o=this.getActiveCopySource(i);if(!o)return;let{fileName:r,lineNumber:s,columnNumber:a}=o,l=a!=null?`${r}:${s}:${a}`:`${r}:${s}`;await this.copyToClipboard(l),this.overlay.showCopied(l);}handleKeyDown(t){t.key==="Shift"&&this.isModifierHeld(t)&&(this.shiftPressedClean=true);}handleKeyUp(t){if(E&&t.key==="Meta"||!E&&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 p=null,nt=()=>{p||(p=new b,p.start());},ht=()=>{p&&(p.stop(),p=null);};if(typeof window<"u"){let e=()=>nt();document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e();}
-exports.destroy=ht;exports.init=nt;return exports;})({});
+var ReactGrep=(function(exports){'use strict';var d=typeof navigator<"u"&&/mac/i.test(navigator.userAgentData?.platform??navigator.userAgent);var g=new Map,M="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",R=[];for(let e=0;e<M.length;e++)R[M.charCodeAt(e)]=e;var f=(e,t)=>{let n=0,i=0;for(;t.i<e.length;){let o=R[e.charCodeAt(t.i++)];if(i+=(o&31)<<n,!(o&32))return i&1?-(i>>1):i>>1;n+=5;}return 0},D=e=>{let t=[],n=0,i=0,o=0;for(let r of e.split(";")){let s=[],a=0;if(r){let l={i:0};for(;l.i<r.length;){if(r.charCodeAt(l.i)===44){l.i++;continue}a+=f(r,l),!(l.i>=r.length||r.charCodeAt(l.i)===44)&&(n+=f(r,l),i+=f(r,l),o+=f(r,l),l.i<r.length&&r.charCodeAt(l.i)!==44&&f(r,l),s.push([a,n,i,o]));}}t.push(s);}return t},U=/^data:application\/json[^,]*;base64,([A-Za-z0-9+/=]+)$/,j=(e,t)=>{try{return new URL(e).origin===new URL(t).origin}catch{return  false}},I=async(e,t)=>{if(e.startsWith("data:")){let o=U.exec(e);return o?atob(o[1]):null}let n=new URL(e,t).href;if(!j(t,n))return null;let i=await fetch(n);return i.ok?i.text():null},K=e=>{let t=[],n=[];for(let i of e){let o=D(i.map.mappings),r=i.offset.line,s=i.offset.column,a=t.length;for(;n.length<r+o.length;)n.push([]);for(let l=0;l<o.length;l++){let h=n[r+l];for(let p of o[l])h.push([l===0?p[0]+s:p[0],p[1]+a,p[2],p[3]]);}t.push(...i.map.sources);}for(let i of n)i.length>1&&i.sort((o,r)=>o[0]-r[0]);return {sources:t,mappings:n}},b=e=>{try{let t=JSON.parse(e);return Array.isArray(t.sections)?K(t.sections):!t.sources||!t.mappings?null:{sources:t.sources,mappings:D(t.mappings)}}catch{return null}},G=async e=>{try{let t=await fetch(e),i=(await t.text()).match(/\/\/[#@]\s*sourceMappingURL=([^\s]+)$/m);if(i){let s=await I(i[1].trim(),e);if(s){let a=b(s);if(a)return a}}let o=t.headers.get("SourceMap")??t.headers.get("X-SourceMap");if(o){let s=await I(o.trim(),e);if(s){let a=b(s);if(a)return a}}let r=await fetch(`${e}.map`);if(r.ok){let s=await r.text();return b(s)}return null}catch{return null}},A=/^about:\/\/React\/Server\/file:\/\/\//,W=/[/\\](\.next[/\\].+?)(?:\?.*)?$/,X=async e=>{try{let t=decodeURIComponent(e.replace(A,"")),n=W.exec(t);if(!n)return null;let o=`${typeof location<"u"?location.origin:""}/__nextjs_source-map?filename=${encodeURIComponent(n[1])}`,r=await fetch(o);if(!r.ok)return null;let s=await r.text();return s?b(s):null}catch{return null}},z=e=>{let t=g.get(e);if(!t){if(g.size>=100){let n=g.keys().next().value;g.delete(n);}t=A.test(e)?X(e):G(e),g.set(e,t);}return t},V=(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,r=i.length-1;for(;o<r;){let s=o+r+1>>1;i[s][0]<=n?o=s:r=s-1;}return i[o]},F=async(e,t,n)=>{let i=await z(e);if(!i)return null;let o=V(i,t-1,n-1);if(!o)return null;let r=i.sources[o[1]];return r.startsWith("file:///")&&(r=decodeURIComponent(new URL(r).pathname)),{fileName:r,lineNumber:o[2]+1,columnNumber:o[3]+1}};var y=e=>"env"in e&&typeof e.name=="string",x=new Set([0,1,11,14,15]),Y=e=>{try{let t=Object.keys(e).find(n=>n.startsWith("__reactFiber$"));return t?e[t]:null}catch{return null}},B=e=>{let t=e;for(;t;){if(x.has(t.tag))return t;t=t.return;}return null},J=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},C=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=J(t);if(n)return n.displayName||n.name||"Anonymous"}return "Anonymous"},Z=new Set(["jsxDEV","jsxs","jsx","react-stack-top-frame","react_stack_bottom_frame","fakeJSXCallSite"]),Q=/at (?:(\S+) )?\(?(.+):(\d+):(\d+)\)?$/,T=e=>{let t=e._debugStack?.stack;if(!t)return null;for(let n of t.split(`
+`)){let i=Q.exec(n.trim());if(!i)continue;let[,o,r,s,a]=i;if(!(o&&Z.has(o))&&!r.includes("/node_modules/"))return {url:r,line:Number(s),column:Number(a)}}return null},k=async e=>{let t=await F(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}},P=async e=>{if(e._debugSource)return e._debugSource;let t=e._debugOwner;if(t&&!y(t)&&t._debugSource)return t._debugSource;let n=T(e);if(n)return k(n);if(t&&!y(t)){let i=T(t);if(i)return k(i)}return null},_=async e=>{if(e._debugSource)return e._debugSource;let t=T(e);return t?k(t):null},E=async e=>{let t=Y(e);if(!t)return null;let n=B(t);if(!n)return null;if(t.return!=null&&x.has(t.return.tag))return {kind:"component",name:C(n),elementTag:null,source:await P(n),callSite:null};let o=t._debugOwner,r=typeof t.type=="string"?t.type:null;return o&&!y(o)&&o===n?{kind:"element",name:C(o),elementTag:r,source:await _(t),callSite:await P(n)}:{kind:"children",name:o&&y(o)?o.name:C(o&&!y(o)&&x.has(o.tag)?o:n),elementTag:r,source:await _(t),callSite:null}};var c={name:"#93c5fd",tag:"#a78bfa",path:"#71717a",pathActive:"#a1a1aa",pathDim:"#3f3f46",hint:"#52525b"},q={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"},tt={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)"},$=(e,t)=>{Object.assign(e.style,t);},v=e=>{let t=e.split("/");return t.length<=2?e:`.../${t.slice(-2).join("/")}`},u=(e,t)=>{let n=document.createElement("span");return n.textContent=e,Object.assign(n.style,t),n},S=class{highlight=null;tooltip=null;copiedTimer=null;init(){this.highlight||(this.highlight=document.createElement("div"),this.highlight.dataset.reactGrep="highlight",$(this.highlight,q),document.body.appendChild(this.highlight),this.tooltip=document.createElement("div"),this.tooltip.dataset.reactGrep="tooltip",$(this.tooltip,tt),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 r=n.source?`${n.source.fileName}:${n.source.lineNumber}`:null,s=n.callSite?`${n.callSite.fileName}:${n.callSite.lineNumber}`:null;if(r&&s){let p=i==="source"?c.pathActive:c.pathDim,N=i==="callSite"?c.pathActive:c.pathDim,L=d?"\u21E7":"Shift",H=v(r),O=v(s);this.tooltip.appendChild(u(` ${i==="callSite"?"(":""}${H}${i==="callSite"?")":""}`,{color:p})),this.tooltip.appendChild(u(` ${L} `,{color:c.hint})),this.tooltip.appendChild(u(`${i==="source"?"(":""}${O}${i==="source"?")":""}`,{color:N}));}else r&&this.tooltip.appendChild(u(` ${v(r)}`,{color:c.path}));let a=this.tooltip.getBoundingClientRect(),l=o.top-a.height-6,h=o.left;l<4&&(l=o.bottom+6),h+a.width>window.innerWidth-4&&(h=window.innerWidth-a.width-4),this.tooltip.style.top=`${l}px`,this.tooltip.style.left=`${Math.max(4,h)}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(` ${v(t)}`,{color:"#a1a1aa"})),this.tooltip.style.display="block",this.copiedTimer&&clearTimeout(this.copiedTimer),this.copiedTimer=setTimeout(()=>this.hide(),1500));}hide(){this.highlight&&(this.highlight.style.display="none"),this.tooltip&&(this.tooltip.style.display="none");}destroy(){this.copiedTimer&&(clearTimeout(this.copiedTimer),this.copiedTimer=null),this.highlight?.remove(),this.tooltip?.remove(),this.highlight=null,this.tooltip=null;}};var w=class{overlay=new S;moveGeneration=0;clickGeneration=0;lastTarget=null;lastInfo=null;sourceToggled=false;shiftPressedClean=false;savedCursor="";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(),this.restoreCursor(),this.lastTarget=null,this.lastInfo=null,this.sourceToggled=false,this.shiftPressedClean=false;}isModifierHeld(t){return d?t.metaKey:t.ctrlKey}async handleMouseMove(t){if(!this.isModifierHeld(t)){this.overlay.hide(),this.restoreCursor(),this.lastTarget=null,this.lastInfo=null;return}this.overlay.init(),this.setCrosshairCursor();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 E(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=++this.clickGeneration,o=await E(n);if(i!==this.clickGeneration||!o)return;let r=this.getActiveCopySource(o);if(!r)return;let{fileName:s,lineNumber:a,columnNumber:l}=r,h=l!=null?`${s}:${a}:${l}`:`${s}:${a}`;await this.copyToClipboard(h),this.overlay.showCopied(h);}handleKeyDown(t){t.key==="Shift"&&this.isModifierHeld(t)&&(this.shiftPressedClean=true);}handleKeyUp(t){if(d&&t.key==="Meta"||!d&&t.key==="Control"){this.overlay.hide(),this.restoreCursor(),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}setCrosshairCursor(){document.body.style.cursor!=="crosshair"&&(this.savedCursor=document.body.style.cursor,document.body.style.cursor="crosshair");}restoreCursor(){document.body.style.cursor==="crosshair"&&(document.body.style.cursor=this.savedCursor);}async copyToClipboard(t){try{await navigator.clipboard.writeText(t);}catch{}}};var m=null,et=()=>{m||(m=new w,m.start());},dt=()=>{m&&(m.stop(),m=null);};if(typeof window<"u"){let e=()=>et();document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e();}
+exports.destroy=dt;exports.init=et;return exports;})({});

package/dist/index.js

@@ -1,4 +1,10 @@
+// src/env.ts
+var isMac = typeof navigator !== "undefined" && /mac/i.test(
+  navigator.userAgentData?.platform ?? navigator.userAgent
+);
+
 // src/source-map.ts
+var MAX_CACHE_SIZE = 100;
 var cache = /* @__PURE__ */ new Map();
 var VLQ_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 var charToInt = [];
@@ -144,6 +150,10 @@ var fetchAndParseServerFile = async (url) => {
 var getSourceMap = (url) => {
   let promise = cache.get(url);
   if (!promise) {
+    if (cache.size >= MAX_CACHE_SIZE) {
+      const oldest = cache.keys().next().value;
+      cache.delete(oldest);
+    }
     promise = ABOUT_SERVER_RE.test(url) ? fetchAndParseServerFile(url) : fetchAndParse(url);
     cache.set(url, promise);
   }
@@ -212,10 +222,8 @@ var getCompositeComponentFiber = (fiber) => {
 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;
+    if ("render" in type && typeof type.render === "function") return type.render;
+    if ("type" in type && typeof type.type === "function") return type.type;
   }
   return null;
 };
@@ -270,11 +278,12 @@ var resolveFrame = async (frame) => {
 };
 var getCompositeDebugSource = async (fiber) => {
   if (fiber._debugSource) return fiber._debugSource;
-  if (fiber._debugOwner?._debugSource) return fiber._debugOwner._debugSource;
+  const owner = fiber._debugOwner;
+  if (owner && !isServerComponent(owner) && owner._debugSource) return owner._debugSource;
   const frame = parseFirstUserFrame(fiber);
   if (frame) return resolveFrame(frame);
-  if (fiber._debugOwner) {
-    const ownerFrame = parseFirstUserFrame(fiber._debugOwner);
+  if (owner && !isServerComponent(owner)) {
+    const ownerFrame = parseFirstUserFrame(owner);
     if (ownerFrame) return resolveFrame(ownerFrame);
   }
   return null;
@@ -324,7 +333,6 @@ var getComponentInfo = async (el) => {
 };
 
 // src/overlay.ts
-var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 var COLORS = {
   name: "#93c5fd",
   tag: "#a78bfa",
@@ -379,6 +387,7 @@ var createSpan = (text, styles) => {
 var OverlayManager = class {
   highlight = null;
   tooltip = null;
+  copiedTimer = null;
   init() {
     if (this.highlight) return;
     this.highlight = document.createElement("div");
@@ -449,13 +458,18 @@ var OverlayManager = class {
     this.tooltip.appendChild(createSpan("Copied!", { color: "#4ade80", fontWeight: "600" }));
     this.tooltip.appendChild(createSpan(` ${truncatePath(location2)}`, { color: "#a1a1aa" }));
     this.tooltip.style.display = "block";
-    setTimeout(() => this.hide(), 1500);
+    if (this.copiedTimer) clearTimeout(this.copiedTimer);
+    this.copiedTimer = setTimeout(() => this.hide(), 1500);
   }
   hide() {
     if (this.highlight) this.highlight.style.display = "none";
     if (this.tooltip) this.tooltip.style.display = "none";
   }
   destroy() {
+    if (this.copiedTimer) {
+      clearTimeout(this.copiedTimer);
+      this.copiedTimer = null;
+    }
     this.highlight?.remove();
     this.tooltip?.remove();
     this.highlight = null;
@@ -464,14 +478,15 @@ var OverlayManager = class {
 };
 
 // src/inspector.ts
-var isMac2 = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
 var Inspector = class {
   overlay = new OverlayManager();
   moveGeneration = 0;
+  clickGeneration = 0;
   lastTarget = null;
   lastInfo = null;
   sourceToggled = false;
   shiftPressedClean = false;
+  savedCursor = "";
   boundHandlers;
   constructor() {
     this.boundHandlers = {
@@ -493,25 +508,25 @@ var Inspector = class {
     window.removeEventListener("keydown", this.boundHandlers.keydown);
     window.removeEventListener("keyup", this.boundHandlers.keyup);
     this.overlay.destroy();
-    document.body.style.cursor = "";
+    this.restoreCursor();
     this.lastTarget = null;
     this.lastInfo = null;
     this.sourceToggled = false;
     this.shiftPressedClean = false;
   }
   isModifierHeld(e) {
-    return isMac2 ? e.metaKey : e.ctrlKey;
+    return isMac ? e.metaKey : e.ctrlKey;
   }
   async handleMouseMove(e) {
     if (!this.isModifierHeld(e)) {
       this.overlay.hide();
-      document.body.style.cursor = "";
+      this.restoreCursor();
       this.lastTarget = null;
       this.lastInfo = null;
       return;
     }
     this.overlay.init();
-    document.body.style.cursor = "crosshair";
+    this.setCrosshairCursor();
     const target = document.elementFromPoint(e.clientX, e.clientY);
     if (!target || target.closest("[data-react-grep]")) return;
     if (target !== this.lastTarget) {
@@ -538,8 +553,9 @@ var Inspector = class {
     e.stopPropagation();
     e.stopImmediatePropagation();
     this.shiftPressedClean = false;
+    const gen = ++this.clickGeneration;
     const info = await getComponentInfo(target);
-    if (!info) return;
+    if (gen !== this.clickGeneration || !info) return;
     const source = this.getActiveCopySource(info);
     if (!source) return;
     const { fileName, lineNumber, columnNumber } = source;
@@ -553,9 +569,9 @@ var Inspector = class {
     }
   }
   handleKeyUp(e) {
-    if (isMac2 && e.key === "Meta" || !isMac2 && e.key === "Control") {
+    if (isMac && e.key === "Meta" || !isMac && e.key === "Control") {
       this.overlay.hide();
-      document.body.style.cursor = "";
+      this.restoreCursor();
       this.lastTarget = null;
       this.lastInfo = null;
       return;
@@ -572,6 +588,17 @@ var Inspector = class {
   getActiveCopySource(info) {
     return this.sourceToggled && info.callSite ? info.callSite : info.source;
   }
+  setCrosshairCursor() {
+    if (document.body.style.cursor !== "crosshair") {
+      this.savedCursor = document.body.style.cursor;
+      document.body.style.cursor = "crosshair";
+    }
+  }
+  restoreCursor() {
+    if (document.body.style.cursor === "crosshair") {
+      document.body.style.cursor = this.savedCursor;
+    }
+  }
   async copyToClipboard(text) {
     try {
       await navigator.clipboard.writeText(text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grep",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Hold CMD to see React component names + file:line overlaid on any element",
   "keywords": [
     "component",
@@ -30,21 +30,15 @@
   ],
   "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"
-      }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "publishConfig": {

package/dist/index.cjs

@@ -1,607 +0,0 @@
-'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 fetchSourceMapJson = async (ref, baseUrl) => {
-  if (ref.startsWith("data:")) {
-    const dataMatch = DATA_URI_RE.exec(ref);
-    return dataMatch ? atob(dataMatch[1]) : null;
-  }
-  const mapUrl = new URL(ref, baseUrl).href;
-  if (!isSameOrigin(baseUrl, mapUrl)) return null;
-  const mapRes = await fetch(mapUrl);
-  if (!mapRes.ok) return null;
-  return mapRes.text();
-};
-var flattenIndexedMap = (sections) => {
-  const allSources = [];
-  const allMappings = [];
-  for (const section of sections) {
-    const decoded = decodeMappings(section.map.mappings);
-    const lineOff = section.offset.line;
-    const colOff = section.offset.column;
-    const srcOff = allSources.length;
-    while (allMappings.length < lineOff + decoded.length) allMappings.push([]);
-    for (let i = 0; i < decoded.length; i++) {
-      const target = allMappings[lineOff + i];
-      for (const seg of decoded[i]) {
-        target.push([i === 0 ? seg[0] + colOff : seg[0], seg[1] + srcOff, seg[2], seg[3]]);
-      }
-    }
-    allSources.push(...section.map.sources);
-  }
-  for (const line of allMappings) {
-    if (line.length > 1) line.sort((a, b) => a[0] - b[0]);
-  }
-  return { sources: allSources, mappings: allMappings };
-};
-var parseSourceMap = (json) => {
-  try {
-    const raw = JSON.parse(json);
-    if (Array.isArray(raw.sections)) return flattenIndexedMap(raw.sections);
-    if (!raw.sources || !raw.mappings) return null;
-    return { sources: raw.sources, mappings: decodeMappings(raw.mappings) };
-  } catch {
-    return null;
-  }
-};
-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) {
-      const json = await fetchSourceMapJson(match[1].trim(), url);
-      if (json) {
-        const map = parseSourceMap(json);
-        if (map) return map;
-      }
-    }
-    const headerRef = res.headers.get("SourceMap") ?? res.headers.get("X-SourceMap");
-    if (headerRef) {
-      const json = await fetchSourceMapJson(headerRef.trim(), url);
-      if (json) {
-        const map = parseSourceMap(json);
-        if (map) return map;
-      }
-    }
-    const conventionRes = await fetch(`${url}.map`);
-    if (conventionRes.ok) {
-      const json = await conventionRes.text();
-      return parseSourceMap(json);
-    }
-    return null;
-  } catch {
-    return null;
-  }
-};
-var ABOUT_SERVER_RE = /^about:\/\/React\/Server\/file:\/\/\//;
-var NEXT_DOTDIR_RE = /[/\\](\.next[/\\].+?)(?:\?.*)?$/;
-var fetchAndParseServerFile = async (url) => {
-  try {
-    const filePath = decodeURIComponent(url.replace(ABOUT_SERVER_RE, ""));
-    const dotNextMatch = NEXT_DOTDIR_RE.exec(filePath);
-    if (!dotNextMatch) return null;
-    const origin = typeof location !== "undefined" ? location.origin : "";
-    const mapUrl = `${origin}/__nextjs_source-map?filename=${encodeURIComponent(dotNextMatch[1])}`;
-    const res = await fetch(mapUrl);
-    if (!res.ok) return null;
-    const json = await res.text();
-    if (!json) return null;
-    return parseSourceMap(json);
-  } catch {
-    return null;
-  }
-};
-var getSourceMap = (url) => {
-  let promise = cache.get(url);
-  if (!promise) {
-    promise = ABOUT_SERVER_RE.test(url) ? fetchAndParseServerFile(url) : 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;
-  let fileName = map.sources[seg[1]];
-  if (fileName.startsWith("file:///")) {
-    fileName = decodeURIComponent(new URL(fileName).pathname);
-  }
-  return {
-    fileName,
-    lineNumber: seg[2] + 1,
-    columnNumber: seg[3] + 1
-  };
-};
-
-// src/fiber.ts
-var isServerComponent = (owner) => "env" in owner && typeof owner.name === "string";
-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",
-  "fakeJSXCallSite"
-]);
-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 && !isServerComponent(owner) && owner === composite) {
-    return {
-      kind: "element",
-      name: getComponentName(owner),
-      elementTag,
-      source: await getDomDebugSource(domFiber),
-      callSite: await getCompositeDebugSource(composite)
-    };
-  }
-  const name = owner && isServerComponent(owner) ? owner.name : getComponentName(
-    owner && !isServerComponent(owner) && COMPOSITE_TAGS.has(owner.tag) ? owner : composite
-  );
-  return {
-    kind: "children",
-    name,
-    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 <= 2) return filePath;
-  return `.../${parts.slice(-2).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(location2) {
-    if (!this.tooltip) return;
-    this.tooltip.textContent = "";
-    this.tooltip.appendChild(createSpan("Copied!", { color: "#4ade80", fontWeight: "600" }));
-    this.tooltip.appendChild(createSpan(` ${truncatePath(location2)}`, { 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 location2 = columnNumber != null ? `${fileName}:${lineNumber}:${columnNumber}` : `${fileName}:${lineNumber}`;
-    await this.copyToClipboard(location2);
-    this.overlay.showCopied(location2);
-  }
-  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

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