@rspnseapp/dev-inspector 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.inspector.js +1 -1
- package/package.json +1 -1
package/dist/index.inspector.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
height: 100%;
|
|
6
6
|
pointer-events: none;
|
|
7
7
|
z-index: 2147483645;
|
|
8
|
-
`,document.body.appendChild(p),h=p.getContext("2d"),H(),ye(),p)}function H(){if(!p||!h)return;let e=window.devicePixelRatio||1,t=window.innerWidth,n=window.innerHeight;p.width=t*e,p.height=n*e,p.style.width=t+"px",p.style.height=n+"px",h.scale(e,e)}function B(){p&&(p.remove(),p=null,h=null)}function G(){let e=[],t=document.querySelectorAll("*"),n=0,s=0;return t.forEach(o=>{if(o.id?.startsWith("rspnse-"))return;let r=window.getComputedStyle(o).display;r==="grid"||r==="inline-grid"?e.push(le(o,n++)):(r==="flex"||r==="inline-flex")&&e.push(ce(o,s++))}),W=e,e}function le(e,t){let n=window.getComputedStyle(e),s=e.getBoundingClientRect(),o=parseFloat(n.columnGap)||0,i=parseFloat(n.rowGap)||0,r=P(n.gridTemplateColumns,o),a=P(n.gridTemplateRows,i),l=de(n.gridTemplateAreas,r.length,a.length);return{id:`grid-${t}`,type:"grid",selector:F(e),label:U(e),rect:{x:s.x,y:s.y,width:s.width,height:s.height},columns:r,rows:a,areas:l,columnGap:o,rowGap:i}}function ce(e,t){let n=window.getComputedStyle(e),s=e.getBoundingClientRect();return{id:`flex-${t}`,type:"flex",selector:F(e),label:U(e),rect:{x:s.x,y:s.y,width:s.width,height:s.height},direction:n.flexDirection,wrap:n.flexWrap,justifyContent:n.justifyContent,alignItems:n.alignItems,gap:parseFloat(n.gap)||0}}function P(e,t){if(!e||e==="none")return[];let n=e.split(" ").filter(i=>i.trim()),s=[],o=0;return n.forEach((i,r)=>{let a=parseFloat(i);isNaN(a)||(s.push({index:r,start:o,end:o+a,size:i,isImplicit:!1}),o+=a+(r<n.length-1?t:0))}),s}function de(e,t,n){if(!e||e==="none")return[];let s=e.match(/"([^"]+)"/g);if(!s)return[];let o=new Map;return s.forEach((i,r)=>{i.replace(/"/g,"").split(/\s+/).filter(l=>l).forEach((l,d)=>{if(l!==".")if(!o.has(l))o.set(l,{name:l,rowStart:r,rowEnd:r+1,colStart:d,colEnd:d+1});else{let c=o.get(l);c.rowEnd=Math.max(c.rowEnd,r+1),c.colEnd=Math.max(c.colEnd,d+1)}})}),Array.from(o.values())}function F(e){if(e.id)return`#${e.id}`;let t=Array.from(e.classList).filter(s=>!s.startsWith("__")&&!s.startsWith("rspnse-")).slice(0,2);if(t.length>0){let s=`.${t.join(".")}`;if(document.querySelectorAll(s).length===1)return s}let n=e.tagName.toLowerCase();return t.length>0?`${n}.${t[0]}`:n}function U(e){if(e.id)return`#${e.id}`;if(e.classList.length>0){let t=Array.from(e.classList).find(n=>!n.startsWith("__"));if(t)return`.${t}`}return e.tagName.toLowerCase()}function Y(e,t,n){let s=W.find(o=>o.id===e);s&&(ae(),T.set(e,{containerId:e,container:s,settings:t,color:n}),V())}function j(e){T.delete(e),V(),T.size===0&&B()}function q(){T.clear(),B()}function V(){R||(R=!0,requestAnimationFrame(()=>{R=!1,M()}))}function M(){if(!h||!p)return;let e=window.devicePixelRatio||1;h.setTransform(1,0,0,1,0,0),h.clearRect(0,0,p.width,p.height),h.scale(e,e),T.forEach(t=>{t.container.type==="grid"?ue(t):ge(t)})}function ue(e){let{container:t,settings:n,color:s}=e,o=h,i=document.querySelector(t.selector);if(!i)return;let r=i.getBoundingClientRect();o.strokeStyle=s,o.lineWidth=2,o.setLineDash([]),o.strokeRect(r.x,r.y,r.width,r.height),t.columns&&t.columns.length>0&&k(o,r,t.columns,"column",s,n),t.rows&&t.rows.length>0&&k(o,r,t.rows,"row",s,n),n.showAreaNames&&t.areas&&t.areas.length>0&&pe(o,r,t,s)}function k(e,t,n,s,o,i){let r=s==="column";n.forEach((l,d)=>{let c=r?t.x+l.start:t.y+l.start;if(e.strokeStyle=l.isImplicit&&i.highlightImplicitTracks?w(o,.5):w(o,.7),e.lineWidth=1,e.setLineDash(l.isImplicit?[4,4]:[]),e.beginPath(),r?(e.moveTo(c,t.y),e.lineTo(c,t.y+t.height)):(e.moveTo(t.x,c),e.lineTo(t.x+t.width,c)),e.stroke(),i.showLineNumbers&&$(e,d+1,c,t,r,o),i.showTrackSizes){let f=r?t.x+l.end:t.y+l.end;fe(e,l.size,c,f,t,r,o)}});let a=n[n.length-1];if(a){let l=r?t.x+a.end:t.y+a.end;e.strokeStyle=w(o,.7),e.lineWidth=1,e.setLineDash([]),e.beginPath(),r?(e.moveTo(l,t.y),e.lineTo(l,t.y+t.height)):(e.moveTo(t.x,l),e.lineTo(t.x+t.width,l)),e.stroke(),i.showLineNumbers&&$(e,n.length+1,l,t,r,o)}}function $(e,t,n,s,o,i){let r=String(t),a=10,l=2;e.font=`${a}px ui-monospace, monospace`;let d=e.measureText(r).width,c,f;o?(c=n-d/2,f=s.y-a/2):(c=s.x-d-l*3,f=n+a/3),e.fillStyle=i,e.fillRect(c-l,f-a,d+l*2,a+l),e.fillStyle="#ffffff",e.fillText(r,c,f)}function fe(e,t,n,s,o,i,r){let a=(n+s)/2,l=9,d=2;e.font=`${l}px ui-monospace, monospace`;let c=e.measureText(t).width,f,m;i?(f=a-c/2,m=o.y+o.height+l+d*2):(f=o.x+o.width+d*2,m=a+l/3),e.fillStyle=w(r,.8),e.fillRect(f-d,m-l,c+d*2,l+d),e.fillStyle="#ffffff",e.fillText(t,f,m)}function pe(e,t,n,s){!n.areas||!n.columns||!n.rows||n.areas.forEach(o=>{let i=n.columns[o.colStart]?.start||0,r=n.columns[o.colEnd-1]?.end||0,a=n.rows[o.rowStart]?.start||0,l=n.rows[o.rowEnd-1]?.end||0,d={x:t.x+i,y:t.y+a,width:r-i,height:l-a};e.fillStyle=w(s,.1),e.fillRect(d.x,d.y,d.width,d.height);let c=11;e.font=`bold ${c}px sans-serif`;let f=e.measureText(o.name).width,m=d.x+(d.width-f)/2,E=d.y+(d.height+c)/2;e.fillStyle=s,e.fillRect(m-4,E-c,f+8,c+4),e.fillStyle="#ffffff",e.fillText(o.name,m,E)})}function ge(e){let{container:t,color:n}=e,s=h,o=document.querySelector(t.selector);if(!o)return;let i=o.getBoundingClientRect();s.strokeStyle=n,s.lineWidth=2,s.setLineDash([8,4]),s.strokeRect(i.x,i.y,i.width,i.height),me(s,i,t.direction||"row",n),s.setLineDash([]),s.strokeStyle=w(n,.6),s.lineWidth=1;let r=o.children;for(let a=0;a<r.length;a++){let l=r[a];if(l.id?.startsWith("rspnse-"))continue;let d=l.getBoundingClientRect();s.strokeRect(d.x,d.y,d.width,d.height)}he(s,i,"flex",n)}function me(e,t,n,s){e.fillStyle=s,e.beginPath();let r=t.x+t.width/2,a=t.y+t.height/2;switch(n){case"row":e.moveTo(t.x+8,a-16/2),e.lineTo(t.x+8+16,a),e.lineTo(t.x+8,a+16/2);break;case"row-reverse":e.moveTo(t.x+t.width-8,a-16/2),e.lineTo(t.x+t.width-8-16,a),e.lineTo(t.x+t.width-8,a+16/2);break;case"column":e.moveTo(r-16/2,t.y+8),e.lineTo(r,t.y+8+16),e.lineTo(r+16/2,t.y+8);break;case"column-reverse":e.moveTo(r-16/2,t.y+t.height-8),e.lineTo(r,t.y+t.height-8-16),e.lineTo(r+16/2,t.y+t.height-8);break}e.closePath(),e.fill()}function he(e,t,n,s){let i=n.toUpperCase();e.font="bold 10px sans-serif";let r=e.measureText(i).width,a=t.x+4,l=t.y+10+4;e.fillStyle=s,e.fillRect(a-2,l-10,r+4,12),e.fillStyle="#ffffff",e.fillText(i,a,l)}function w(e,t){let n=parseInt(e.slice(1,3),16),s=parseInt(e.slice(3,5),16),o=parseInt(e.slice(5,7),16);return`rgba(${n}, ${s}, ${o}, ${t})`}var z=!1;function ye(){if(z)return;z=!0;let e=!1,t=()=>{e||(e=!0,requestAnimationFrame(()=>{M(),e=!1}))};window.addEventListener("scroll",t,{passive:!0}),window.addEventListener("resize",()=>{H(),M()})}var v="rspnse-injected-css",S="rspnse-inspect-highlight",L="rspnse-inspect-label",I="rspnse-inspect-margin",_="rspnse-inspect-padding",x="1.0.0",X=["https://rspnse.net","https://www.rspnse.net","http://localhost","http://127.0.0.1"];function Ee(){return window.__RSPNSE_TRUSTED_ORIGINS__&&Array.isArray(window.__RSPNSE_TRUSTED_ORIGINS__)?[...X,...window.__RSPNSE_TRUSTED_ORIGINS__]:X}var b=!1,y=null,g=null,K={layout:["display","position","top","right","bottom","left","z-index"],flexbox:["flex","flex-direction","flex-wrap","justify-content","align-items","align-content","gap","row-gap","column-gap"],grid:["grid-template-columns","grid-template-rows","grid-column","grid-row"],box:["width","height","min-width","max-width","min-height","max-height","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","border","border-radius","box-sizing"],typography:["font-family","font-size","font-weight","font-style","line-height","letter-spacing","text-align","text-decoration","text-transform","color","white-space"],background:["background","background-color","background-image","background-size","background-position"],visual:["opacity","visibility","overflow","overflow-x","overflow-y","box-shadow","transform","cursor"]};function we(e){return Ee().some(n=>n.startsWith("http://localhost")||n.startsWith("http://127.0.0.1")?e.startsWith("http://localhost")||e.startsWith("http://127.0.0.1"):e===n||e.startsWith(n))}function Se(e){let t=document.getElementById(v);return t||(t=document.createElement("style"),t.id=v,(document.head||document.documentElement).appendChild(t)),t.textContent=e,{success:!0}}function be(){let e=document.getElementById(v);return e?(e.remove(),{success:!0}):{success:!1,error:"No styles to remove"}}function Te(){let e=document.getElementById(v);return e&&e.textContent||""}async function xe(){let e=[];document.querySelectorAll("style").forEach((s,o)=>{s.textContent&&s.id!==v&&e.push({type:"inline",index:o+1,css:s.textContent.trim()})});let n=document.querySelectorAll('link[rel="stylesheet"]');for(let s of Array.from(n)){let o=s.href;try{let i=await fetch(o);if(i.ok){let r=await i.text();e.push({type:"external",href:o,css:r.trim()})}}catch(i){e.push({type:"external",href:o,css:null,error:`Could not fetch: ${i.message}`})}}return e}function ve(e){if(e.id)return"#"+CSS.escape(e.id);let t=[],n=e,s=0;for(;n&&n!==document.body&&n!==document.documentElement&&s<3;){let o=n.tagName.toLowerCase();if(n.className&&typeof n.className=="string"){let i=n.className.trim().split(/\s+/).filter(r=>r&&!r.startsWith("rspnse-")).slice(0,2);i.length>0&&(o+="."+i.map(r=>CSS.escape(r)).join("."))}if(n.parentElement){let i=Array.from(n.parentElement.children).filter(r=>r.tagName===n.tagName);if(i.length>1){let r=i.indexOf(n)+1;o+=`:nth-of-type(${r})`}}t.unshift(o),n=n.parentElement,s++}return t.join(" > ")}function J(e){let t=window.getComputedStyle(e),n={},s=document.createElement(e.tagName);s.style.cssText="position: absolute; visibility: hidden;",document.body.appendChild(s);let o=window.getComputedStyle(s);return Object.keys(K).forEach(i=>{K[i].forEach(r=>{let a=t.getPropertyValue(r),l=o.getPropertyValue(r);a&&a!==l&&a!=="none"&&a!=="auto"&&a!=="normal"&&a!=="0px"&&a!=="rgba(0, 0, 0, 0)"&&(n[r]=a)})}),s.remove(),{selector:ve(e),tagName:e.tagName.toLowerCase(),classList:Array.from(e.classList),id:e.id||null,computedStyles:n}}function Q(e){let t=[],n=e;for(;n&&n!==document.documentElement;){if(n.nodeType!==1){n=n.parentElement;continue}let s=n.tagName.toLowerCase(),o=n.id?"#"+n.id:"",i=n.className&&typeof n.className=="string"?"."+n.className.trim().split(/\s+/).filter(r=>r&&!r.startsWith("rspnse-")).slice(0,1).join("."):"";t.unshift({label:s+o+i,index:t.length}),n=n.parentElement}t.unshift({label:"html",index:t.length});for(let s=0;s<t.length;s++)t[s].index=s;return t}function Ce(e){if(!g)return null;let t=[],n=g;for(;n&&n!==document.documentElement;)n.nodeType===1&&t.unshift(n),n=n.parentElement;return t.unshift(document.documentElement),t[e]||null}function Le(e){let t=e.tagName.toLowerCase(),n=e.id?"#"+e.id:"",s=e.className&&typeof e.className=="string"?"."+e.className.trim().split(/\s+/).filter(o=>o&&!o.startsWith("rspnse-")).slice(0,2).join("."):"";return t+n+s}function Ie(){[S,L,I,_].forEach(o=>{let i=document.getElementById(o);i&&i.remove()});let e=document.createElement("div");e.id=S,e.style.cssText="position: fixed; pointer-events: none; z-index: 2147483646; border: 2px solid #3b82f6; background: rgba(59, 130, 246, 0.15); transition: all 0.05s ease-out; display: none;",document.body.appendChild(e);let t=document.createElement("div");t.id=I,t.style.cssText="position: fixed; pointer-events: none; z-index: 2147483645; background: rgba(249, 115, 22, 0.25); transition: all 0.05s ease-out; display: none;",document.body.appendChild(t);let n=document.createElement("div");n.id=_,n.style.cssText="position: fixed; pointer-events: none; z-index: 2147483644; background: rgba(34, 197, 94, 0.25); transition: all 0.05s ease-out; display: none;",document.body.appendChild(n);let s=document.createElement("div");return s.id=L,s.style.cssText="position: fixed; pointer-events: none; z-index: 2147483647; background: #1e293b; color: #f8fafc; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); max-width: calc(100vw - 16px); overflow: hidden; text-overflow: ellipsis;",document.body.appendChild(s),e}function Z(e){let t=document.getElementById(S),n=document.getElementById(L),s=document.getElementById(I),o=document.getElementById(_);if(!t||!n)return;if(!e){t.style.display="none",n.style.display="none",s&&(s.style.display="none"),o&&(o.style.display="none");return}let i=e.getBoundingClientRect(),r=window.getComputedStyle(e),a=parseFloat(r.marginTop)||0,l=parseFloat(r.marginRight)||0,d=parseFloat(r.marginBottom)||0,c=parseFloat(r.marginLeft)||0,f=parseFloat(r.paddingTop)||0,m=parseFloat(r.paddingRight)||0,E=parseFloat(r.paddingBottom)||0,C=parseFloat(r.paddingLeft)||0;t.style.display="block",t.style.top=i.top+"px",t.style.left=i.left+"px",t.style.width=i.width+"px",t.style.height=i.height+"px",s&&(a||l||d||c)?(s.style.display="block",s.style.top=i.top-a+"px",s.style.left=i.left-c+"px",s.style.width=i.width+c+l+"px",s.style.height=i.height+a+d+"px",s.style.clipPath=`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${c}px ${a}px, ${c}px ${a+i.height}px, ${c+i.width}px ${a+i.height}px, ${c+i.width}px ${a}px, ${c}px ${a}px)`):s&&(s.style.display="none"),o&&(f||m||E||C)?(o.style.display="block",o.style.top=i.top+"px",o.style.left=i.left+"px",o.style.width=i.width+"px",o.style.height=i.height+"px",o.style.clipPath=`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${C}px ${f}px, ${C}px ${i.height-E}px, ${i.width-m}px ${i.height-E}px, ${i.width-m}px ${f}px, ${C}px ${f}px)`):o&&(o.style.display="none");let oe=Le(e),ie=`${Math.round(i.width)} x ${Math.round(i.height)}`;n.innerHTML=`<span style="color: #93c5fd;">${oe}</span> <span style="color: #94a3b8; margin-left: 6px;">${ie}</span>`,n.style.display="block",n.style.left="auto",n.style.right="auto";let O=window.innerWidth,N=i.top-24-6;N<4&&(N=i.bottom+6),n.style.top=N+"px",i.left+i.width/2>O/2?(n.style.right=Math.max(4,O-i.right)+"px",n.style.left="auto"):(n.style.left=Math.max(4,i.left)+"px",n.style.right="auto")}function A(e){if(!g)return-1;let t=[],n=g;for(;n&&n!==document.documentElement;)n.nodeType===1&&t.unshift(n),n=n.parentElement;t.unshift(document.documentElement);for(let s=0;s<t.length;s++)if(t[s]===e)return s;return-1}function D(e){if(!e||e.id&&e.id.startsWith("rspnse-"))return!1;y=e,Z(e);let t=J(e),n=Q(g),s=A(e);return window.parent!==window&&window.parent.postMessage({type:"RSPNSE_INSPECT_ELEMENT_RESULT",success:!0,element:t,breadcrumb:n,breadcrumbIndex:s},"*"),!0}function ee(e){if(!b)return;let t=document.elementFromPoint(e.clientX,e.clientY);t&&t.id!==S&&Z(t)}function te(e){if(!b)return;e.preventDefault(),e.stopPropagation();let t=document.elementFromPoint(e.clientX,e.clientY);if(t&&t.id!==S&&!t.id?.startsWith("rspnse-")){g=t,y=t;let n=J(t),s=Q(t);window.parent!==window&&window.parent.postMessage({type:"RSPNSE_INSPECT_ELEMENT_RESULT",success:!0,element:n,breadcrumb:s,breadcrumbIndex:s.length-1},"*")}}function ne(e){if(!b)return;if(e.key==="Escape"){se(),window.parent!==window&&window.parent.postMessage({type:"RSPNSE_INSPECT_CANCELLED",reason:"escape"},"*");return}if(!y||!g)return;let t=A(y),n=[],s=g;for(;s&&s!==document.documentElement;)s.nodeType===1&&n.unshift(s),s=s.parentElement;n.unshift(document.documentElement);let o=t;switch(e.key){case"ArrowUp":case"ArrowLeft":o=t-1;break;case"ArrowDown":case"ArrowRight":o=t+1;break;default:return}o>=0&&o<n.length&&(e.preventDefault(),D(n[o]))}function _e(){b||(b=!0,document.body.style.cursor="crosshair",Ie(),document.addEventListener("mousemove",ee,!0),document.addEventListener("click",te,!0),document.addEventListener("keydown",ne,!0))}function se(){b=!1,y=null,g=null,document.body.style.cursor="",[S,L,I,_].forEach(e=>{let t=document.getElementById(e);t&&t.remove()}),document.removeEventListener("mousemove",ee,!0),document.removeEventListener("click",te,!0),document.removeEventListener("keydown",ne,!0)}function u(e,t,n){if(e.source&&e.source!==window)try{e.source.postMessage({type:t.type+"_RESULT",requestId:t.requestId,frameId:t.frameId,...n},"*")}catch{}}function Ne(e){if(!we(e.origin))return;let t=e.data;if(!(!t||typeof t!="object")&&t.type&&t.type.startsWith("RSPNSE_"))switch(t.type){case"RSPNSE_INJECT_CSS":typeof t.css=="string"?u(e,t,Se(t.css)):u(e,t,{success:!1,error:"CSS must be a string"});break;case"RSPNSE_REMOVE_CSS":u(e,t,be());break;case"RSPNSE_GET_CSS":u(e,t,{success:!0,css:Te()});break;case"RSPNSE_CAPTURE_STYLES":xe().then(n=>{u(e,t,{success:!0,styles:n})}).catch(n=>{u(e,t,{success:!1,error:n.message})});break;case"RSPNSE_INSPECT_START":_e(),u(e,t,{success:!0});break;case"RSPNSE_INSPECT_STOP":se(),u(e,t,{success:!0});break;case"RSPNSE_INSPECT_NAVIGATE_TO":if(g&&typeof t.breadcrumbIndex=="number"){let n=Ce(t.breadcrumbIndex);n?(D(n),u(e,t,{success:!0})):u(e,t,{success:!1,error:"Element not found"})}else u(e,t,{success:!1,error:"No original element or invalid index"});break;case"RSPNSE_INSPECT_NAVIGATE":if(g&&y&&t.direction){let n=A(y),s=[],o=g;for(;o&&o!==document.documentElement;)o.nodeType===1&&s.unshift(o),o=o.parentElement;s.unshift(document.documentElement);let i=n;(t.direction==="left"||t.direction==="up")&&(i=n-1),(t.direction==="right"||t.direction==="down")&&(i=n+1),i>=0&&i<s.length?(D(s[i]),u(e,t,{success:!0})):u(e,t,{success:!1,error:"At end of breadcrumb"})}else u(e,t,{success:!1,error:"No selection"});break;case"RSPNSE_PING":u(e,t,{success:!0,pong:!0,version:x});break;case"RSPNSE_LAYOUT_DETECT":console.log("[dev-inspector] RSPNSE_LAYOUT_DETECT received, requestId:",t.requestId);try{let n=G();console.log("[dev-inspector] Detected",n.length,"containers"),u(e,t,{success:!0,containers:n}),console.log("[dev-inspector] Sent RSPNSE_LAYOUT_DETECT_RESULT")}catch(n){console.error("[dev-inspector] Detection error:",n),u(e,t,{success:!1,error:n.message})}break;case"RSPNSE_LAYOUT_HIGHLIGHT":t.containerId&&t.settings&&t.color?(t.visible!==!1?Y(t.containerId,t.settings,t.color):j(t.containerId),u(e,t,{success:!0})):u(e,t,{success:!1,error:"Missing containerId, settings, or color"});break;case"RSPNSE_LAYOUT_CLEAR":q(),u(e,t,{success:!0});break}}function Re(){if(document.documentElement.setAttribute("data-rspnse-inspector",x),window.addEventListener("message",Ne),window.parent!==window)try{window.parent.postMessage({type:"RSPNSE_DEV_INSPECTOR_READY",version:x,url:window.location.href},"*"),window.parent.postMessage({type:"RSPNSE_EXTENSION_READY",version:x,url:window.location.href},"*")}catch{}window.dispatchEvent(new CustomEvent("rspnse-inspector-loaded",{detail:{version:x}}))}Re();})();
|
|
8
|
+
`,document.body.appendChild(p),h=p.getContext("2d"),H(),ye(),p)}function H(){if(!p||!h)return;let e=window.devicePixelRatio||1,t=window.innerWidth,n=window.innerHeight;p.width=t*e,p.height=n*e,p.style.width=t+"px",p.style.height=n+"px",h.scale(e,e)}function B(){p&&(p.remove(),p=null,h=null)}function G(){let e=[],t=document.querySelectorAll("*"),n=0,s=0;return t.forEach(o=>{if(o.id?.startsWith("rspnse-"))return;let r=window.getComputedStyle(o).display;r==="grid"||r==="inline-grid"?e.push(le(o,n++)):(r==="flex"||r==="inline-flex")&&e.push(ce(o,s++))}),W=e,e}function le(e,t){let n=window.getComputedStyle(e),s=e.getBoundingClientRect(),o=parseFloat(n.columnGap)||0,i=parseFloat(n.rowGap)||0,r=P(n.gridTemplateColumns,o),a=P(n.gridTemplateRows,i),l=de(n.gridTemplateAreas,r.length,a.length);return{id:`grid-${t}`,type:"grid",selector:F(e),label:U(e),rect:{x:s.x,y:s.y,width:s.width,height:s.height},columns:r,rows:a,areas:l,columnGap:o,rowGap:i}}function ce(e,t){let n=window.getComputedStyle(e),s=e.getBoundingClientRect();return{id:`flex-${t}`,type:"flex",selector:F(e),label:U(e),rect:{x:s.x,y:s.y,width:s.width,height:s.height},direction:n.flexDirection,wrap:n.flexWrap,justifyContent:n.justifyContent,alignItems:n.alignItems,gap:parseFloat(n.gap)||0}}function P(e,t){if(!e||e==="none")return[];let n=e.split(" ").filter(i=>i.trim()),s=[],o=0;return n.forEach((i,r)=>{let a=parseFloat(i);isNaN(a)||(s.push({index:r,start:o,end:o+a,size:i,isImplicit:!1}),o+=a+(r<n.length-1?t:0))}),s}function de(e,t,n){if(!e||e==="none")return[];let s=e.match(/"([^"]+)"/g);if(!s)return[];let o=new Map;return s.forEach((i,r)=>{i.replace(/"/g,"").split(/\s+/).filter(l=>l).forEach((l,d)=>{if(l!==".")if(!o.has(l))o.set(l,{name:l,rowStart:r,rowEnd:r+1,colStart:d,colEnd:d+1});else{let c=o.get(l);c.rowEnd=Math.max(c.rowEnd,r+1),c.colEnd=Math.max(c.colEnd,d+1)}})}),Array.from(o.values())}function F(e){if(e.id)return`#${CSS.escape(e.id)}`;let t=Array.from(e.classList).filter(s=>!s.startsWith("__")&&!s.startsWith("rspnse-")&&!/[[\]():]/.test(s)).slice(0,2);if(t.length>0){let s=`.${t.map(o=>CSS.escape(o)).join(".")}`;try{if(document.querySelectorAll(s).length===1)return s}catch{}}let n=e.tagName.toLowerCase();return t.length>0?`${n}.${CSS.escape(t[0])}`:n}function U(e){if(e.id)return`#${e.id}`;if(e.classList.length>0){let t=Array.from(e.classList).find(n=>!n.startsWith("__"));if(t)return`.${t}`}return e.tagName.toLowerCase()}function Y(e,t,n){let s=W.find(o=>o.id===e);s&&(ae(),T.set(e,{containerId:e,container:s,settings:t,color:n}),V())}function j(e){T.delete(e),V(),T.size===0&&B()}function q(){T.clear(),B()}function V(){R||(R=!0,requestAnimationFrame(()=>{R=!1,M()}))}function M(){if(!h||!p)return;let e=window.devicePixelRatio||1;h.setTransform(1,0,0,1,0,0),h.clearRect(0,0,p.width,p.height),h.scale(e,e),T.forEach(t=>{t.container.type==="grid"?ue(t):ge(t)})}function ue(e){let{container:t,settings:n,color:s}=e,o=h,i=document.querySelector(t.selector);if(!i)return;let r=i.getBoundingClientRect();o.strokeStyle=s,o.lineWidth=2,o.setLineDash([]),o.strokeRect(r.x,r.y,r.width,r.height),t.columns&&t.columns.length>0&&k(o,r,t.columns,"column",s,n),t.rows&&t.rows.length>0&&k(o,r,t.rows,"row",s,n),n.showAreaNames&&t.areas&&t.areas.length>0&&pe(o,r,t,s)}function k(e,t,n,s,o,i){let r=s==="column";n.forEach((l,d)=>{let c=r?t.x+l.start:t.y+l.start;if(e.strokeStyle=l.isImplicit&&i.highlightImplicitTracks?w(o,.5):w(o,.7),e.lineWidth=1,e.setLineDash(l.isImplicit?[4,4]:[]),e.beginPath(),r?(e.moveTo(c,t.y),e.lineTo(c,t.y+t.height)):(e.moveTo(t.x,c),e.lineTo(t.x+t.width,c)),e.stroke(),i.showLineNumbers&&$(e,d+1,c,t,r,o),i.showTrackSizes){let f=r?t.x+l.end:t.y+l.end;fe(e,l.size,c,f,t,r,o)}});let a=n[n.length-1];if(a){let l=r?t.x+a.end:t.y+a.end;e.strokeStyle=w(o,.7),e.lineWidth=1,e.setLineDash([]),e.beginPath(),r?(e.moveTo(l,t.y),e.lineTo(l,t.y+t.height)):(e.moveTo(t.x,l),e.lineTo(t.x+t.width,l)),e.stroke(),i.showLineNumbers&&$(e,n.length+1,l,t,r,o)}}function $(e,t,n,s,o,i){let r=String(t),a=10,l=2;e.font=`${a}px ui-monospace, monospace`;let d=e.measureText(r).width,c,f;o?(c=n-d/2,f=s.y-a/2):(c=s.x-d-l*3,f=n+a/3),e.fillStyle=i,e.fillRect(c-l,f-a,d+l*2,a+l),e.fillStyle="#ffffff",e.fillText(r,c,f)}function fe(e,t,n,s,o,i,r){let a=(n+s)/2,l=9,d=2;e.font=`${l}px ui-monospace, monospace`;let c=e.measureText(t).width,f,m;i?(f=a-c/2,m=o.y+o.height+l+d*2):(f=o.x+o.width+d*2,m=a+l/3),e.fillStyle=w(r,.8),e.fillRect(f-d,m-l,c+d*2,l+d),e.fillStyle="#ffffff",e.fillText(t,f,m)}function pe(e,t,n,s){!n.areas||!n.columns||!n.rows||n.areas.forEach(o=>{let i=n.columns[o.colStart]?.start||0,r=n.columns[o.colEnd-1]?.end||0,a=n.rows[o.rowStart]?.start||0,l=n.rows[o.rowEnd-1]?.end||0,d={x:t.x+i,y:t.y+a,width:r-i,height:l-a};e.fillStyle=w(s,.1),e.fillRect(d.x,d.y,d.width,d.height);let c=11;e.font=`bold ${c}px sans-serif`;let f=e.measureText(o.name).width,m=d.x+(d.width-f)/2,E=d.y+(d.height+c)/2;e.fillStyle=s,e.fillRect(m-4,E-c,f+8,c+4),e.fillStyle="#ffffff",e.fillText(o.name,m,E)})}function ge(e){let{container:t,color:n}=e,s=h,o=document.querySelector(t.selector);if(!o)return;let i=o.getBoundingClientRect();s.strokeStyle=n,s.lineWidth=2,s.setLineDash([8,4]),s.strokeRect(i.x,i.y,i.width,i.height),me(s,i,t.direction||"row",n),s.setLineDash([]),s.strokeStyle=w(n,.6),s.lineWidth=1;let r=o.children;for(let a=0;a<r.length;a++){let l=r[a];if(l.id?.startsWith("rspnse-"))continue;let d=l.getBoundingClientRect();s.strokeRect(d.x,d.y,d.width,d.height)}he(s,i,"flex",n)}function me(e,t,n,s){e.fillStyle=s,e.beginPath();let r=t.x+t.width/2,a=t.y+t.height/2;switch(n){case"row":e.moveTo(t.x+8,a-16/2),e.lineTo(t.x+8+16,a),e.lineTo(t.x+8,a+16/2);break;case"row-reverse":e.moveTo(t.x+t.width-8,a-16/2),e.lineTo(t.x+t.width-8-16,a),e.lineTo(t.x+t.width-8,a+16/2);break;case"column":e.moveTo(r-16/2,t.y+8),e.lineTo(r,t.y+8+16),e.lineTo(r+16/2,t.y+8);break;case"column-reverse":e.moveTo(r-16/2,t.y+t.height-8),e.lineTo(r,t.y+t.height-8-16),e.lineTo(r+16/2,t.y+t.height-8);break}e.closePath(),e.fill()}function he(e,t,n,s){let i=n.toUpperCase();e.font="bold 10px sans-serif";let r=e.measureText(i).width,a=t.x+4,l=t.y+10+4;e.fillStyle=s,e.fillRect(a-2,l-10,r+4,12),e.fillStyle="#ffffff",e.fillText(i,a,l)}function w(e,t){let n=parseInt(e.slice(1,3),16),s=parseInt(e.slice(3,5),16),o=parseInt(e.slice(5,7),16);return`rgba(${n}, ${s}, ${o}, ${t})`}var z=!1;function ye(){if(z)return;z=!0;let e=!1,t=()=>{e||(e=!0,requestAnimationFrame(()=>{M(),e=!1}))};window.addEventListener("scroll",t,{passive:!0}),window.addEventListener("resize",()=>{H(),M()})}var v="rspnse-injected-css",S="rspnse-inspect-highlight",L="rspnse-inspect-label",I="rspnse-inspect-margin",_="rspnse-inspect-padding",x="1.0.0",X=["https://rspnse.net","https://www.rspnse.net","http://localhost","http://127.0.0.1"];function Ee(){return window.__RSPNSE_TRUSTED_ORIGINS__&&Array.isArray(window.__RSPNSE_TRUSTED_ORIGINS__)?[...X,...window.__RSPNSE_TRUSTED_ORIGINS__]:X}var b=!1,y=null,g=null,K={layout:["display","position","top","right","bottom","left","z-index"],flexbox:["flex","flex-direction","flex-wrap","justify-content","align-items","align-content","gap","row-gap","column-gap"],grid:["grid-template-columns","grid-template-rows","grid-column","grid-row"],box:["width","height","min-width","max-width","min-height","max-height","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","border","border-radius","box-sizing"],typography:["font-family","font-size","font-weight","font-style","line-height","letter-spacing","text-align","text-decoration","text-transform","color","white-space"],background:["background","background-color","background-image","background-size","background-position"],visual:["opacity","visibility","overflow","overflow-x","overflow-y","box-shadow","transform","cursor"]};function we(e){return Ee().some(n=>n.startsWith("http://localhost")||n.startsWith("http://127.0.0.1")?e.startsWith("http://localhost")||e.startsWith("http://127.0.0.1"):e===n||e.startsWith(n))}function Se(e){let t=document.getElementById(v);return t||(t=document.createElement("style"),t.id=v,(document.head||document.documentElement).appendChild(t)),t.textContent=e,{success:!0}}function be(){let e=document.getElementById(v);return e?(e.remove(),{success:!0}):{success:!1,error:"No styles to remove"}}function Te(){let e=document.getElementById(v);return e&&e.textContent||""}async function xe(){let e=[];document.querySelectorAll("style").forEach((s,o)=>{s.textContent&&s.id!==v&&e.push({type:"inline",index:o+1,css:s.textContent.trim()})});let n=document.querySelectorAll('link[rel="stylesheet"]');for(let s of Array.from(n)){let o=s.href;try{let i=await fetch(o);if(i.ok){let r=await i.text();e.push({type:"external",href:o,css:r.trim()})}}catch(i){e.push({type:"external",href:o,css:null,error:`Could not fetch: ${i.message}`})}}return e}function ve(e){if(e.id)return"#"+CSS.escape(e.id);let t=[],n=e,s=0;for(;n&&n!==document.body&&n!==document.documentElement&&s<3;){let o=n.tagName.toLowerCase();if(n.className&&typeof n.className=="string"){let i=n.className.trim().split(/\s+/).filter(r=>r&&!r.startsWith("rspnse-")).slice(0,2);i.length>0&&(o+="."+i.map(r=>CSS.escape(r)).join("."))}if(n.parentElement){let i=Array.from(n.parentElement.children).filter(r=>r.tagName===n.tagName);if(i.length>1){let r=i.indexOf(n)+1;o+=`:nth-of-type(${r})`}}t.unshift(o),n=n.parentElement,s++}return t.join(" > ")}function J(e){let t=window.getComputedStyle(e),n={},s=document.createElement(e.tagName);s.style.cssText="position: absolute; visibility: hidden;",document.body.appendChild(s);let o=window.getComputedStyle(s);return Object.keys(K).forEach(i=>{K[i].forEach(r=>{let a=t.getPropertyValue(r),l=o.getPropertyValue(r);a&&a!==l&&a!=="none"&&a!=="auto"&&a!=="normal"&&a!=="0px"&&a!=="rgba(0, 0, 0, 0)"&&(n[r]=a)})}),s.remove(),{selector:ve(e),tagName:e.tagName.toLowerCase(),classList:Array.from(e.classList),id:e.id||null,computedStyles:n}}function Q(e){let t=[],n=e;for(;n&&n!==document.documentElement;){if(n.nodeType!==1){n=n.parentElement;continue}let s=n.tagName.toLowerCase(),o=n.id?"#"+n.id:"",i=n.className&&typeof n.className=="string"?"."+n.className.trim().split(/\s+/).filter(r=>r&&!r.startsWith("rspnse-")).slice(0,1).join("."):"";t.unshift({label:s+o+i,index:t.length}),n=n.parentElement}t.unshift({label:"html",index:t.length});for(let s=0;s<t.length;s++)t[s].index=s;return t}function Ce(e){if(!g)return null;let t=[],n=g;for(;n&&n!==document.documentElement;)n.nodeType===1&&t.unshift(n),n=n.parentElement;return t.unshift(document.documentElement),t[e]||null}function Le(e){let t=e.tagName.toLowerCase(),n=e.id?"#"+e.id:"",s=e.className&&typeof e.className=="string"?"."+e.className.trim().split(/\s+/).filter(o=>o&&!o.startsWith("rspnse-")).slice(0,2).join("."):"";return t+n+s}function Ie(){[S,L,I,_].forEach(o=>{let i=document.getElementById(o);i&&i.remove()});let e=document.createElement("div");e.id=S,e.style.cssText="position: fixed; pointer-events: none; z-index: 2147483646; border: 2px solid #3b82f6; background: rgba(59, 130, 246, 0.15); transition: all 0.05s ease-out; display: none;",document.body.appendChild(e);let t=document.createElement("div");t.id=I,t.style.cssText="position: fixed; pointer-events: none; z-index: 2147483645; background: rgba(249, 115, 22, 0.25); transition: all 0.05s ease-out; display: none;",document.body.appendChild(t);let n=document.createElement("div");n.id=_,n.style.cssText="position: fixed; pointer-events: none; z-index: 2147483644; background: rgba(34, 197, 94, 0.25); transition: all 0.05s ease-out; display: none;",document.body.appendChild(n);let s=document.createElement("div");return s.id=L,s.style.cssText="position: fixed; pointer-events: none; z-index: 2147483647; background: #1e293b; color: #f8fafc; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); max-width: calc(100vw - 16px); overflow: hidden; text-overflow: ellipsis;",document.body.appendChild(s),e}function Z(e){let t=document.getElementById(S),n=document.getElementById(L),s=document.getElementById(I),o=document.getElementById(_);if(!t||!n)return;if(!e){t.style.display="none",n.style.display="none",s&&(s.style.display="none"),o&&(o.style.display="none");return}let i=e.getBoundingClientRect(),r=window.getComputedStyle(e),a=parseFloat(r.marginTop)||0,l=parseFloat(r.marginRight)||0,d=parseFloat(r.marginBottom)||0,c=parseFloat(r.marginLeft)||0,f=parseFloat(r.paddingTop)||0,m=parseFloat(r.paddingRight)||0,E=parseFloat(r.paddingBottom)||0,C=parseFloat(r.paddingLeft)||0;t.style.display="block",t.style.top=i.top+"px",t.style.left=i.left+"px",t.style.width=i.width+"px",t.style.height=i.height+"px",s&&(a||l||d||c)?(s.style.display="block",s.style.top=i.top-a+"px",s.style.left=i.left-c+"px",s.style.width=i.width+c+l+"px",s.style.height=i.height+a+d+"px",s.style.clipPath=`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${c}px ${a}px, ${c}px ${a+i.height}px, ${c+i.width}px ${a+i.height}px, ${c+i.width}px ${a}px, ${c}px ${a}px)`):s&&(s.style.display="none"),o&&(f||m||E||C)?(o.style.display="block",o.style.top=i.top+"px",o.style.left=i.left+"px",o.style.width=i.width+"px",o.style.height=i.height+"px",o.style.clipPath=`polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${C}px ${f}px, ${C}px ${i.height-E}px, ${i.width-m}px ${i.height-E}px, ${i.width-m}px ${f}px, ${C}px ${f}px)`):o&&(o.style.display="none");let oe=Le(e),ie=`${Math.round(i.width)} x ${Math.round(i.height)}`;n.innerHTML=`<span style="color: #93c5fd;">${oe}</span> <span style="color: #94a3b8; margin-left: 6px;">${ie}</span>`,n.style.display="block",n.style.left="auto",n.style.right="auto";let O=window.innerWidth,N=i.top-24-6;N<4&&(N=i.bottom+6),n.style.top=N+"px",i.left+i.width/2>O/2?(n.style.right=Math.max(4,O-i.right)+"px",n.style.left="auto"):(n.style.left=Math.max(4,i.left)+"px",n.style.right="auto")}function A(e){if(!g)return-1;let t=[],n=g;for(;n&&n!==document.documentElement;)n.nodeType===1&&t.unshift(n),n=n.parentElement;t.unshift(document.documentElement);for(let s=0;s<t.length;s++)if(t[s]===e)return s;return-1}function D(e){if(!e||e.id&&e.id.startsWith("rspnse-"))return!1;y=e,Z(e);let t=J(e),n=Q(g),s=A(e);return window.parent!==window&&window.parent.postMessage({type:"RSPNSE_INSPECT_ELEMENT_RESULT",success:!0,element:t,breadcrumb:n,breadcrumbIndex:s},"*"),!0}function ee(e){if(!b)return;let t=document.elementFromPoint(e.clientX,e.clientY);t&&t.id!==S&&Z(t)}function te(e){if(!b)return;e.preventDefault(),e.stopPropagation();let t=document.elementFromPoint(e.clientX,e.clientY);if(t&&t.id!==S&&!t.id?.startsWith("rspnse-")){g=t,y=t;let n=J(t),s=Q(t);window.parent!==window&&window.parent.postMessage({type:"RSPNSE_INSPECT_ELEMENT_RESULT",success:!0,element:n,breadcrumb:s,breadcrumbIndex:s.length-1},"*")}}function ne(e){if(!b)return;if(e.key==="Escape"){se(),window.parent!==window&&window.parent.postMessage({type:"RSPNSE_INSPECT_CANCELLED",reason:"escape"},"*");return}if(!y||!g)return;let t=A(y),n=[],s=g;for(;s&&s!==document.documentElement;)s.nodeType===1&&n.unshift(s),s=s.parentElement;n.unshift(document.documentElement);let o=t;switch(e.key){case"ArrowUp":case"ArrowLeft":o=t-1;break;case"ArrowDown":case"ArrowRight":o=t+1;break;default:return}o>=0&&o<n.length&&(e.preventDefault(),D(n[o]))}function _e(){b||(b=!0,document.body.style.cursor="crosshair",Ie(),document.addEventListener("mousemove",ee,!0),document.addEventListener("click",te,!0),document.addEventListener("keydown",ne,!0))}function se(){b=!1,y=null,g=null,document.body.style.cursor="",[S,L,I,_].forEach(e=>{let t=document.getElementById(e);t&&t.remove()}),document.removeEventListener("mousemove",ee,!0),document.removeEventListener("click",te,!0),document.removeEventListener("keydown",ne,!0)}function u(e,t,n){if(e.source&&e.source!==window)try{e.source.postMessage({type:t.type+"_RESULT",requestId:t.requestId,frameId:t.frameId,...n},"*")}catch{}}function Ne(e){if(!we(e.origin))return;let t=e.data;if(!(!t||typeof t!="object")&&t.type&&t.type.startsWith("RSPNSE_"))switch(t.type){case"RSPNSE_INJECT_CSS":typeof t.css=="string"?u(e,t,Se(t.css)):u(e,t,{success:!1,error:"CSS must be a string"});break;case"RSPNSE_REMOVE_CSS":u(e,t,be());break;case"RSPNSE_GET_CSS":u(e,t,{success:!0,css:Te()});break;case"RSPNSE_CAPTURE_STYLES":xe().then(n=>{u(e,t,{success:!0,styles:n})}).catch(n=>{u(e,t,{success:!1,error:n.message})});break;case"RSPNSE_INSPECT_START":_e(),u(e,t,{success:!0});break;case"RSPNSE_INSPECT_STOP":se(),u(e,t,{success:!0});break;case"RSPNSE_INSPECT_NAVIGATE_TO":if(g&&typeof t.breadcrumbIndex=="number"){let n=Ce(t.breadcrumbIndex);n?(D(n),u(e,t,{success:!0})):u(e,t,{success:!1,error:"Element not found"})}else u(e,t,{success:!1,error:"No original element or invalid index"});break;case"RSPNSE_INSPECT_NAVIGATE":if(g&&y&&t.direction){let n=A(y),s=[],o=g;for(;o&&o!==document.documentElement;)o.nodeType===1&&s.unshift(o),o=o.parentElement;s.unshift(document.documentElement);let i=n;(t.direction==="left"||t.direction==="up")&&(i=n-1),(t.direction==="right"||t.direction==="down")&&(i=n+1),i>=0&&i<s.length?(D(s[i]),u(e,t,{success:!0})):u(e,t,{success:!1,error:"At end of breadcrumb"})}else u(e,t,{success:!1,error:"No selection"});break;case"RSPNSE_PING":u(e,t,{success:!0,pong:!0,version:x});break;case"RSPNSE_LAYOUT_DETECT":console.log("[dev-inspector] RSPNSE_LAYOUT_DETECT received, requestId:",t.requestId);try{let n=G();console.log("[dev-inspector] Detected",n.length,"containers"),u(e,t,{success:!0,containers:n}),console.log("[dev-inspector] Sent RSPNSE_LAYOUT_DETECT_RESULT")}catch(n){console.error("[dev-inspector] Detection error:",n),u(e,t,{success:!1,error:n.message})}break;case"RSPNSE_LAYOUT_HIGHLIGHT":t.containerId&&t.settings&&t.color?(t.visible!==!1?Y(t.containerId,t.settings,t.color):j(t.containerId),u(e,t,{success:!0})):u(e,t,{success:!1,error:"Missing containerId, settings, or color"});break;case"RSPNSE_LAYOUT_CLEAR":q(),u(e,t,{success:!0});break}}function Re(){if(document.documentElement.setAttribute("data-rspnse-inspector",x),window.addEventListener("message",Ne),window.parent!==window)try{window.parent.postMessage({type:"RSPNSE_DEV_INSPECTOR_READY",version:x,url:window.location.href},"*"),window.parent.postMessage({type:"RSPNSE_EXTENSION_READY",version:x,url:window.location.href},"*")}catch{}window.dispatchEvent(new CustomEvent("rspnse-inspector-loaded",{detail:{version:x}}))}Re();})();
|