1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6567],{3277:function(e,t,n){n.r(t),n.d(t,{ReactScanInternals:function(){return il},Store:function(){return is},getIsProduction:function(){return im},getOptions:function(){return ip},getReport:function(){return id},ignoreScan:function(){return iN},ignoredProps:function(){return ik},onRender:function(){return iy},scan:function(){return ib},setOptions:function(){return iu},start:function(){return ig},useScan:function(){return iv}});var r,a,i,o,s,l=n(32350),c=n(79137),d=n(33847),u=n(34619),p=n(66741),h=n(10348);function m(e,t){return t-e}n(2784);var f=e=>{let t="",n=new Map;for(let t of e){let{forget:e,time:r,aggregatedCount:a,name:i}=t;n.has(a)||n.set(a,[]);let o=n.get(a);o&&o.push({name:i,forget:e,time:r??0})}let r=Array.from(n.keys()).sort(m),a=[],i=0;for(let e of r){let t=n.get(e);if(!t)continue;let r=function(e){let t=e[0].name,n=Math.min(4,e.length);for(let r=1;r<n;r++)t+=`, ${e[r].name}`;return t}(t),o=function(e){let t=e[0].time;for(let n=1,r=e.length;n<r;n++)t+=e[n].time;return t}(t),s=function(e){for(let t=0,n=e.length;t<n;t++)if(e[t].forget)return!0;return!1}(t);i+=o,t.length>4&&(r+="â¦"),e>1&&(r+=` \xd7 ${e}`),s&&(r=`\u2728${r}`),a.push(r)}return(t=a.join(", ")).length?(t.length>40&&(t=`${t.slice(0,40)}\u2026`),i>=.01&&(t+=` (${Number(i.toFixed(2))}ms)`),t):null};function g(e,t){return e===t||e!=e&&t!=t}var w=e=>{let t=e.createOscillator(),n=e.createGain();t.connect(n),n.connect(e.destination);let r=[392,600],a=.3/r.length;r.forEach((n,r)=>{t.frequency.setValueAtTime(n,e.currentTime+r*a)}),t.type="sine",n.gain.setValueAtTime(.12,e.currentTime),n.gain.setTargetAtTime(0,e.currentTime+.21,.05),t.start(),t.stop(e.currentTime+.3)},x=e=>new Promise(t=>{let n=new Map,r=new IntersectionObserver(e=>{for(let t of e){let e=t.target,r=t.boundingClientRect;n.set(e,r)}r.disconnect(),t(n)});for(let t of e)r.observe(t)}),b={mount:1,update:2,unmount:4},v=(0,p.Gp)(({size:e=15,name:t,fill:n="currentColor",stroke:r="currentColor",className:a,externalURL:i="",style:o},s)=>{let l=Array.isArray(e)?e[0]:e,c=Array.isArray(e)?e[1]||e[0]:e,d=`${i}#${t}`;return(0,h.BX)("svg",{ref:s,width:`${l}px`,height:`${c}px`,fill:n,stroke:r,className:a,style:{...o,minWidth:`${l}px`,maxWidth:`${l}px`,minHeight:`${c}px`,maxHeight:`${c}px`},children:[(0,h.tZ)("title",{children:t}),(0,h.tZ)("use",{href:d})]})}),y={width:550,height:350,initialHeight:400},k="react-scan-widget-settings-v2",N="undefined"!=typeof window,z=e=>{let t=C(e),{conflictingClassGroups:n,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:e=>{let n=e.split("-");return""===n[0]&&1!==n.length&&n.shift(),Z(n,t)||T(e)},getConflictingClassGroupIds:(e,t)=>{let a=n[e]||[];return t&&r[e]?[...a,...r[e]]:a}}},Z=(e,t)=>{if(0===e.length)return t.classGroupId;let n=e[0],r=t.nextPart.get(n),a=r?Z(e.slice(1),r):void 0;if(a)return a;if(0===t.validators.length)return;let i=e.join("-");return t.validators.find(({validator:e})=>e(i))?.classGroupId},S=/^\[(.+)\]$/,T=e=>{if(S.test(e)){let t=S.exec(e)[1],n=t?.substring(0,t.indexOf(":"));if(n)return"arbitrary.."+n}},C=e=>{let{theme:t,prefix:n}=e,r={nextPart:new Map,validators:[]};return M(Object.entries(e.classGroups),n).forEach(([e,n])=>{E(n,r,e,t)}),r},E=(e,t,n,r)=>{e.forEach(e=>{if("string"==typeof e){(""===e?t:A(t,e)).classGroupId=n;return}if("function"==typeof e){if(X(e)){E(e(r),t,n,r);return}t.validators.push({validator:e,classGroupId:n});return}Object.entries(e).forEach(([e,a])=>{E(a,A(t,e),n,r)})})},A=(e,t)=>{let n=e;return t.split("-").forEach(e=>{n.nextPart.has(e)||n.nextPart.set(e,{nextPart:new Map,validators:[]}),n=n.nextPart.get(e)}),n},X=e=>e.isThemeGetter,M=(e,t)=>t?e.map(([e,n])=>[e,n.map(e=>"string"==typeof e?t+e:"object"==typeof e?Object.fromEntries(Object.entries(e).map(([e,n])=>[t+e,n])):e)]):e,B=e=>{if(e<1)return{get:()=>void 0,set:()=>{}};let t=0,n=new Map,r=new Map,a=(a,i)=>{n.set(a,i),++t>e&&(t=0,r=n,n=new Map)};return{get(e){let t=n.get(e);return void 0!==t?t:void 0!==(t=r.get(e))?(a(e,t),t):void 0},set(e,t){n.has(e)?n.set(e,t):a(e,t)}}},$=e=>{let{separator:t,experimentalParseClassName:n}=e,r=1===t.length,a=t[0],i=t.length,o=e=>{let n;let o=[],s=0,l=0;for(let c=0;c<e.length;c++){let d=e[c];
1if(0===s){if(d===a&&(r||e.slice(c,c+i)===t)){o.push(e.slice(l,c)),l=c+i;continue}if("/"===d){n=c;continue}}"["===d?s++:"]"===d&&s--}let c=0===o.length?e:e.substring(l),d=c.startsWith("!"),u=d?c.substring(1):c;return{modifiers:o,hasImportantModifier:d,baseClassName:u,maybePostfixModifierPosition:n&&n>l?n-l:void 0}};return n?e=>n({className:e,parseClassName:o}):o},F=e=>{if(e.length<=1)return e;let t=[],n=[];return e.forEach(e=>{"["===e[0]?(t.push(...n.sort(),e),n=[]):n.push(e)}),t.push(...n.sort()),t},R=e=>({cache:B(e.cacheSize),parseClassName:$(e),...z(e)}),I=/\s+/,j=(e,t)=>{let{parseClassName:n,getClassGroupId:r,getConflictingClassGroupIds:a}=t,i=[],o=e.trim().split(I),s="";for(let e=o.length-1;e>=0;e-=1){let t=o[e],{modifiers:l,hasImportantModifier:c,baseClassName:d,maybePostfixModifierPosition:u}=n(t),p=!!u,h=r(p?d.substring(0,u):d);if(!h){if(!p||!(h=r(d))){s=t+(s.length>0?" "+s:s);continue}p=!1}let m=F(l).join(":"),f=c?m+"!":m,g=f+h;if(i.includes(g))continue;i.push(g);let w=a(h,p);for(let e=0;e<w.length;++e){let t=w[e];i.push(f+t)}s=t+(s.length>0?" "+s:s)}return s};function D(){let e,t,n=0,r="";for(;n<arguments.length;)(e=arguments[n++])&&(t=O(e))&&(r&&(r+=" "),r+=t);return r}var O=e=>{let t;if("string"==typeof e)return e;let n="";for(let r=0;r<e.length;r++)e[r]&&(t=O(e[r]))&&(n&&(n+=" "),n+=t);return n},P=e=>{let t=t=>t[e]||[];return t.isThemeGetter=!0,t},L=/^\[(?:([a-z-]+):)?(.+)\]$/i,Y=/^\d+\/\d+$/,H=new Set(["px","full","screen"]),_=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,U=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,W=/^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/,V=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,J=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,q=e=>K(e)||H.has(e)||Y.test(e),G=e=>eu(e,"length",ep),K=e=>!!e&&!Number.isNaN(Number(e)),Q=e=>eu(e,"number",K),ee=e=>!!e&&Number.isInteger(Number(e)),et=e=>e.endsWith("%")&&K(e.slice(0,-1)),en=e=>L.test(e),er=e=>_.test(e),ea=new Set(["length","size","percentage"]),ei=e=>eu(e,ea,eh),eo=e=>eu(e,"position",eh),es=new Set(["image","url"]),el=e=>eu(e,es,ef),ec=e=>eu(e,"",em),ed=()=>!0,eu=(e,t,n)=>{let r=L.exec(e);return!!r&&(r[1]?"string"==typeof t?r[1]===t:t.has(r[1]):n(r[2]))},ep=e=>U.test(e)&&!W.test(e),eh=()=>!1,em=e=>V.test(e),ef=e=>J.test(e),eg=function(e,...t){let n,r,a;let i=function(s){return r=(n=R(t.reduce((e,t)=>t(e),e()))).cache.get,a=n.cache.set,i=o,o(s)};function o(e){let t=r(e);if(t)return t;let i=j(e,n);return a(e,i),i}return function(){return i(D.apply(null,arguments))}}(()=>{let e=P("colors"),t=P("spacing"),n=P("blur"),r=P("brightness"),a=P("borderColor"),i=P("borderRadius"),o=P("borderSpacing"),s=P("borderWidth"),l=P("contrast"),c=P("grayscale"),d=P("hueRotate"),u=P("invert"),p=P("gap"),h=P("gradientColorStops"),m=P("gradientColorStopPositions"),f=P("inset"),g=P("margin"),w=P("opacity"),x=P("padding"),b=P("saturate"),v=P("scale"),y=P("sepia"),k=P("skew"),N=P("space"),z=P("translate"),Z=()=>["auto","contain","none"],S=()=>["auto","hidden","clip","visible","scroll"],T=()=>["auto",en,t],C=()=>[en,t],E=()=>["",q,G],A=()=>["auto",K,en],X=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],M=()=>["solid","dashed","dotted","double","none"],B=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],$=()=>["start","end","center","between","around","evenly","stretch"],F=()=>["","0",en],R=()=>["auto","avoid","all","avoid-page","page","left","right","column"],I=()=>[K,en];return{cacheSize:500,separator:":",theme:{colors:[ed],spacing:[q,G],blur:["none","",er,en],brightness:I(),borderColor:[e],borderRadius:["none","","full",er,en],borderSpacing:C(),borderWidth:E(),contrast:I(),grayscale:F(),hueRotate:I(),invert:F(),gap:C(),gradientColorStops:[e],gradientColorStopPositions:[et,G],inset:T(),margin:T(),opacity:I(),padding:C(),saturate:I(),scale:I(),sepia:F(),skew:I(),space:C(),translate:C()},classGroups:{aspect:[{aspect:["auto","square","video",en]}
vendor: 11,166 bytes, line 1
1],container:["container"],columns:[{columns:[er]}],"break-after":[{"break-after":R()}],"break-before":[{"break-before":R()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...X(),en]}],overflow:[{overflow:S()}],"overflow-x":[{"overflow-x":S()}],"overflow-y":[{"overflow-y":S()}],overscroll:[{overscroll:Z()}],"overscroll-x":[{"overscroll-x":Z()}],"overscroll-y":[{"overscroll-y":Z()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[f]}],"inset-x":[{"inset-x":[f]}],"inset-y":[{"inset-y":[f]}],start:[{start:[f]}],end:[{end:[f]}],top:[{top:[f]}],right:[{right:[f]}],bottom:[{bottom:[f]}],left:[{left:[f]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",ee,en]}],basis:[{basis:T()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",en]}],grow:[{grow:F()}],shrink:[{shrink:F()}],order:[{order:["first","last","none",ee,en]}],"grid-cols":[{"grid-cols":[ed]}],"col-start-end":[{col:["auto",{span:["full",ee,en]},en]}],"col-start":[{"col-start":A()}],"col-end":[{"col-end":A()}],"grid-rows":[{"grid-rows":[ed]}],"row-start-end":[{row:["auto",{span:[ee,en]},en]}],"row-start":[{"row-start":A()}],"row-end":[{"row-end":A()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",en]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",en]}],gap:[{gap:[p]}],"gap-x":[{"gap-x":[p]}],"gap-y":[{"gap-y":[p]}],"justify-content":[{justify:["normal",...$()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...$(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...$(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[x]}],px:[{px:[x]}],py:[{py:[x]}],ps:[{ps:[x]}],pe:[{pe:[x]}],pt:[{pt:[x]}],pr:[{pr:[x]}],pb:[{pb:[x]}],pl:[{pl:[x]}],m:[{m:[g]}],mx:[{mx:[g]}],my:[{my:[g]}],ms:[{ms:[g]}],me:[{me:[g]}],mt:[{mt:[g]}],mr:[{mr:[g]}],mb:[{mb:[g]}],ml:[{ml:[g]}],"space-x":[{"space-x":[N]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[N]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",en,t]}],"min-w":[{"min-w":[en,t,"min","max","fit"]}],"max-w":[{"max-w":[en,t,"none","full","min","max","fit","prose",{screen:[er]},er]}],h:[{h:[en,t,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[en,t,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[en,t,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[en,t,"auto","min","max","fit"]}],"font-size":[{text:["base",er,G]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",Q]}],"font-family":[{font:[ed]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",en]}],"line-clamp":[{"line-clamp":["none",K,Q]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",q,en]}],"list-image":[{"list-image":["none",en]}],"list-style-type":[{list:["none","disc","decimal",en]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[w]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[w]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...M(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",q,G]}],"underline-offset":[{"underline-offset":["auto",q,en]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:C()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",en]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",en]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[w]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...X(),eo]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",ei]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},el]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[m]}],"gradient-via-pos":[{via:[m]}],"gradient-to-pos":[{to:[m]}],"gradient-from":[{from:[h]}],"gradient-via":[{via:[h]}],"gradient-to":[{to:[h]}],rounded:[{rounded:[i]}],"rounded-s":[{"rounded-s":[i]}],"rounded-e":[{"rounded-e":[i]}],"rounded-t":[{"rounded-t":[i]}],"rounded-r":[{"rounded-r":[i]}],"rounded-b":[{"rounded-b":[i]}],"rounded-l":[{"rounded-l":[i]}],"rounded-ss":[{"rounded-ss":[i]}],"rounded-se":[{"rounded-se":[i]}],"rounded-ee":[{"rounded-ee":[i]}],"rounded-es":[{"rounded-es":[i]}],"rounded-tl":[{"rounded-tl":[i]}],"rounded-tr":[{"rounded-tr":[i]}],"rounded-br":[{"rounded-br":[i]}],"rounded-bl":[{"rounded-bl":[i]}],"border-w":[{border:[s]}],"border-w-x":[{"border-x":[s]}],"border-w-y":[{"border-y":[s]}],"border-w-s":[{"border-s":[s]}],"border-w-e":[{"border-e":[s]}],"border-w-t":[{"border-t":[s]}],"border-w-r":[{"border-r":[s]}],"border-w-b":[{"border-b":[s]}],"border-w-l":[{"border-l":[s]}],"border-opacity":[{"border-opacity":[w]}],"border-style":[{border:[...M(),"hidden"]}],"divide-x":[{"divide-x":[s]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[s]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[w]}],"divide-style":[{divide:M()}],"border-color":[{border:[a]}],"border-color-x":[{"border-x":[a]}],"border-color-y":[{"border-y":[a]}],"border-color-s":[{"border-s":[a]}],"border-color-e":[{"border-e":[a]}],"border-color-t":[{"border-t":[a]}],"border-color-r":[{"border-r":[a]}],"border-color-b":[{"border-b":[a]}],"border-color-l":[{"border-l":[a]}],"divide-color":[{divide:[a]}],"outline-style":[{outline:["",...M()]}],"outline-offset":[{"outline-offset":[q,en]}],"outline-w":[{outline:[q,G]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:E()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[w]}],"ring-offset-w":[{"ring-offset":[q,G]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",er,ec]}],"shadow-color":[{shadow:[ed]}],opacity:[{opacity:[w]}],"mix-blend":[{"mix-blend":[...B(),"plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":B()}],filter:[{filter:["","none"]}],blur:[{blur:[n]}],brightness:[{brightness:[r]}],contrast:[{contrast:[l]}],"drop-shadow":[{"drop-shadow":["","none",er,en]}],grayscale:[{grayscale:[c]}],"hue-rotate":[{"hue-rotate":[d]}],invert:[{invert:[u]}],saturate:[{saturate:[b]}],sepia:[{sepia:[y]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[n]}],"backdrop-brightness":[{"backdrop-brightness":[r]}],"backdrop-contrast":[{"backdrop-contrast":[l]}],"backdrop-grayscale":[{"backdrop-grayscale":[c]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[d]}],"backdrop-invert":[{"backdrop-invert":[u]}],"backdrop-opacity":[{"backdrop-opacity":[w]}],"backdrop-saturate":[{"backdrop-saturate":[b]}],"backdrop-sepia":[{"backdrop-sepia":[y]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[o]}],"border-spacing-x":[{"border-spacing-x":[o]}],"border-spacing-y":[{"border-spacing-y":[o]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",en]}],duration:[{duration:I()}],ease:[{ease:["linear","in","out","in-out",en]}],delay:[{delay:I()}],animate:[{animate:["none","spin","ping","pulse","bounce",en]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[v]}],"scale-x":[{"scale-x":[v]}],"scale-y":[{"scale-y":[v]}],rotate:[{rotate:[ee,en]}],"translate-x":[{"translate-x":[z]}],"translate-y":[{"translate-y":[z]}],"skew-x":[{"skew-x":[k]}],"skew-y":[{"skew-y":[k]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",en]}],accent:[{accent:["auto",e]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",en]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":C()}],"scroll-mx":[{"scroll-mx":C()}],"scroll-my":[{"scroll-my":C()}],"scroll-ms":[{"scroll-ms":C()}],"scroll-me":[{"scroll-me":C()}],"scroll-mt":[{"scroll-mt":C()}],"scroll-mr":[{"scroll-mr":C()}],"scroll-mb":[{"scroll-mb":C()}],"scroll-ml":[{"scroll-ml":C()}],"scroll-p":[{"scroll-p":C()}],"scroll-px":[{"scroll-px":C()}],"scroll-py":[{"scroll-py":C()}],"scroll-ps":[{"scroll-ps":C()}],"scroll-pe":[{"scroll-pe":C()}],"scroll-pt":[{"scroll-pt":C()}],"scroll-pr":[{"scroll-pr":C()}],"scroll-pb":[{"scroll-pb":C()}],"scroll-pl":[{"scroll-pl":C()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}
1],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",en]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[q,G,Q]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}}),ew=(...e)=>eg(function(){for(var e,t,n=0,r="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=function e(t){var n,r,a="";if("string"==typeof t||"number"==typeof t)a+=t;else if("object"==typeof t){if(Array.isArray(t)){var i=t.length;for(n=0;n<i;n++)t[n]&&(r=e(t[n]))&&(a&&(a+=" "),a+=r)}else for(r in t)t[r]&&(a&&(a+=" "),a+=r)}return a}(e))&&(r&&(r+=" "),r+=t);return r}(e));"undefined"!=typeof navigator&&navigator.userAgent.includes("Firefox");var ex=(e,t)=>{let n=0;return r=>{let a=Date.now();if(a-n>=t)return n=a,e(r)}},eb=e=>{if(!N)return null;try{let t=localStorage.getItem(e);return t?JSON.parse(t):null}catch{return null}},ev=(e,t)=>{if(N)try{window.localStorage.setItem(e,JSON.stringify(t))}catch{}},ey=e=>{if(!e)return{name:"Unknown",wrappers:[],wrapperTypes:[]};let{tag:t,type:n,elementType:r}=e,a=(0,l.Gf)(n),i=[],o=[];if((0,l.bC)(e)||t===l.$K||t===l.IN||n?.$$typeof===Symbol.for("react.memo")||r?.$$typeof===Symbol.for("react.memo")){let t=(0,l.bC)(e);o.push({type:"memo",title:t?"This component has been auto-memoized by the React Compiler.":"Memoized component that skips re-renders if props are the same",compiler:t})}if(24===t&&o.push({type:"lazy",title:"Lazily loaded component that supports code splitting"}),t===l.Ej&&o.push({type:"suspense",title:"Component that can suspend while content is loading"}),12===t&&o.push({type:"profiler",title:"Component that measures rendering performance"}),"string"==typeof a){let e=/^(\w+)\((.*)\)$/,t=a;for(;e.test(t);){let n=t.match(e);if(n?.[1]&&n?.[2])i.unshift(n[1]),t=n[2];else break}a=t}return{name:a||"Unknown",wrappers:i,wrapperTypes:o}},ek=(0,c.td)(!1),eN=(0,c.td)(null),ez={corner:"bottom-right",dimensions:{isFullWidth:!1,isFullHeight:!1,width:y.width,height:y.height,position:{x:24,y:24}},lastDimensions:{isFullWidth:!1,isFullHeight:!1,width:y.width,height:y.height,position:{x:24,y:24}},componentsTree:{width:240}},eZ=(0,c.td)((()=>{let e=eb(k);return e?{corner:e.corner??ez.corner,dimensions:{isFullWidth:!1,isFullHeight:!1,width:y.width,height:y.height,position:e.dimensions.position??ez.dimensions.position},lastDimensions:e.dimensions??ez.dimensions,componentsTree:e.componentsTree??ez.componentsTree}:(ev(k,{corner:ez.corner,dimensions:ez.dimensions,lastDimensions:ez.lastDimensions,componentsTree:ez.componentsTree}),ez)})()),eS=()=>
1{if(!N)return;let{dimensions:e}=eZ.value,{width:t,height:n,position:r}=e;eZ.value={...eZ.value,dimensions:{isFullWidth:t>=window.innerWidth-48,isFullHeight:n>=window.innerHeight-48,width:t,height:n,position:r}}},eT=(0,c.td)({view:"none"});function eC(){return!1}function eE(e){function t(t){return this.shouldComponentUpdate=eC,(0,d.az)(e,t)}return t.displayName=`Memo(${e.displayName||e.name})`,t.prototype.isReactComponent=!0,t._forwarded=!0,t}var eA=e=>{let{count:t,getScrollElement:n,estimateSize:r,overscan:a=5}=e,[i,o]=(0,u.eJ)(0),[s,l]=(0,u.eJ)(0),c=(0,u.sO)(),d=(0,u.sO)(null),p=(0,u.sO)(null),h=r(),m=(0,u.I4)(e=>{d.current&&l(e?.[0]?.contentRect.height??d.current.getBoundingClientRect().height)},[]),f=(0,u.I4)(()=>{null!==p.current&&cancelAnimationFrame(p.current),p.current=requestAnimationFrame(()=>{m(),p.current=null})},[m]);(0,u.d4)(()=>{let e=n();if(!e)return;d.current=e;let t=()=>{d.current&&o(d.current.scrollTop)};m(),c.current||(c.current=new ResizeObserver(()=>{f()})),c.current.observe(e),e.addEventListener("scroll",t,{passive:!0});let r=new MutationObserver(f);return r.observe(e,{attributes:!0,childList:!0,subtree:!0}),()=>{e.removeEventListener("scroll",t),c.current&&c.current.disconnect(),r.disconnect(),null!==p.current&&cancelAnimationFrame(p.current)}},[n,m,f]);let g=(0,u.Ye)(()=>{let e=Math.floor(i/h);return{start:Math.max(0,e-a),end:Math.min(t,e+Math.ceil(s/h)+a)}},[i,h,s,t,a]);return{virtualItems:(0,u.Ye)(()=>{let e=[];for(let t=g.start;t<g.end;t++)e.push({key:t,index:t,start:t*h});return e},[g,h]),totalSize:t*h,scrollTop:i,containerHeight:s}};eb("react-scann-pinned");var eX=e=>{let t=[],n=e;for(;n;){let e=n.elementType,r="function"==typeof e?e.displayName||e.name:"string"==typeof e?e:"Unknown",a=void 0!==n.index?`[${n.index}]`:"";t.unshift(`${r}${a}`),n=n.return??null}return t.join("::")},eM=new WeakMap,eB=(e,t)=>{let n=t.bind(null,e);return document.addEventListener("scroll",n,{passive:!0,capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}},e$={activeFlashes:new Map,create(e){let t=e.querySelector(".react-scan-flash-overlay"),n=t instanceof HTMLElement?t:(()=>{let t=document.createElement("div");t.className="react-scan-flash-overlay",e.appendChild(t);let n=eB(e,()=>{e.querySelector(".react-scan-flash-overlay")&&this.create(e)});return this.activeFlashes.set(e,{element:e,overlay:t,scrollCleanup:n}),t})(),r=eM.get(n);r&&(clearTimeout(r),eM.delete(n)),requestAnimationFrame(()=>{n.style.transition="none",n.style.opacity="0.9";let t=setTimeout(()=>{n.style.transition="opacity 150ms ease-out",n.style.opacity="0";let t=setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n);let t=this.activeFlashes.get(e);t?.scrollCleanup&&t.scrollCleanup(),this.activeFlashes.delete(e),eM.delete(n)},150);eM.set(n,t)},300);eM.set(n,t)})},cleanup(e){let t=this.activeFlashes.get(e);if(t){let n=eM.get(t.overlay);n&&(clearTimeout(n),eM.delete(t.overlay)),t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),t.scrollCleanup&&t.scrollCleanup(),this.activeFlashes.delete(e)}},cleanupAll(){for(let[,e]of this.activeFlashes)this.cleanup(e.element)}},eF={updates:[],currentFiber:null,totalUpdates:0,windowOffset:0,currentIndex:0,isViewingHistory:!1,latestFiber:null,isVisible:!1,playbackSpeed:1},eR=(0,c.td)(eF),eI=(0,c.td)(0),ej=[],eD=null,eO=()=>{let e;if(0===ej.length)return;let t=[...ej],{updates:n,totalUpdates:r,currentIndex:a,isViewingHistory:i}=eR.value,o=[...n],s=r;for(let{update:e}of t)o.length>=1e3&&o.shift(),o.push(e),s++;let l=Math.max(0,s-1e3);e=i?a===r-1?o.length-1:0===a?0:0===l?a:a-1:o.length-1;let c=t[t.length-1];eR.value={...eR.value,latestFiber:c.fiber,updates:o,totalUpdates:s,windowOffset:l,currentIndex:e,isViewingHistory:i},ej=ej.slice(t.length)},eP={addUpdate:(e,t)=>{if(ej.push({update:e,fiber:t}),!eD){let e=()=>{eO(),eD=null,ej.length>0&&(eD=setTimeout(e,96))};eD=setTimeout(e,96)}},reset:()=>{eD&&(clearTimeout(eD),eD=null),ej=[],eR.value=eF}},eL=(0,c.td)({query:"",matches:[],currentMatchIndex:-1}),eY=(0,c.td)(!1),eH=(e,t=0,n=null)=>e.reduce((e,r,a)=>{let i=r.element?eX(r.fiber):`${n}-${a}
1`,o=r.fiber?.type?np.get(r.fiber.type):void 0,s={...r,depth:t,nodeId:i,parentId:n,fiber:r.fiber,renderData:o};return e.push(s),r.children?.length&&e.push(...eH(r.children,t+1,i)),e},[]),e_=e=>e.reduce((e,t)=>Math.max(e,t.depth),0),eU=(e,t)=>{if(t<=0)return 24;let n=Math.max(0,e-240);return n<24?0:Math.max(0,Math.min(24,Math.min(.3*n,24*t)/t))},eW=["memo","forwardRef","lazy","suspense"],eV=e=>{let t=e.match(/\[(.*?)\]/);if(!t)return null;let n=[];for(let e of t[1].split(",")){let t=e.trim().toLowerCase();t&&n.push(t)}return n},eJ=e=>{if(0===e.length)return!1;for(let t of e){let e=!1;for(let n of eW)if(n.toLowerCase().includes(t)){e=!0;break}if(!e)return!1}return!0},eq=(e,t)=>{if(0===e.length)return!0;if(!t.length)return!1;for(let n of e){let e=!1;for(let r of t)if(r.type.toLowerCase().includes(n)){e=!0;break}if(!e)return!1}return!0},eG=(e,t)=>(0,u.Ye)(()=>{let{query:n,matches:r}=t,a=r.some(t=>t.nodeId===e.nodeId),i=eV(n)||[],o=n?n.replace(/\[.*?\]/,"").trim():"";if(!n||!a)return{highlightedText:(0,h.tZ)("span",{className:"truncate",children:e.label}),typeHighlight:!1};let s=!0;if(i.length>0){if(e.fiber){let{wrapperTypes:t}=ey(e.fiber);s=eq(i,t)}else s=!1}let l=(0,h.tZ)("span",{className:"truncate",children:e.label});if(o)try{if(o.startsWith("/")&&o.endsWith("/")){let t=o.slice(1,-1),n=RegExp(`(${t})`,"i"),r=e.label.split(n);l=(0,h.tZ)("span",{className:"tree-node-search-highlight",children:r.map((t,a)=>n.test(t)?(0,h.tZ)("span",{className:ew("regex",{start:n.test(t)&&0===a,middle:n.test(t)&&a%2==1,end:n.test(t)&&a===r.length-1,"!ml-0":1===a}),children:t},`${e.nodeId}-${t}`):t)})}else{let t=e.label.toLowerCase(),n=o.toLowerCase(),r=t.indexOf(n);r>=0&&(l=(0,h.BX)("span",{className:"tree-node-search-highlight",children:[e.label.slice(0,r),(0,h.tZ)("span",{className:"single",children:e.label.slice(r,r+o.length)}),e.label.slice(r+o.length)]}))}}catch{}return{highlightedText:l,typeHighlight:s&&i.length>0}},[e.label,e.nodeId,e.fiber,t]),eK=e=>e>0?e<.1-Number.EPSILON?"< 0.1":e<1e3?Number(e.toFixed(1)).toString():`${(e/1e3).toFixed(1)}k`:"0",eQ=({node:e,nodeIndex:t,hasChildren:n,isCollapsed:r,handleTreeNodeClick:a,handleTreeNodeToggle:i,searchValue:o})=>{let s=(0,u.sO)(null),l=(0,u.sO)(e.renderData?.renderCount??0),{highlightedText:c,typeHighlight:d}=eG(e,o);(0,u.d4)(()=>{let t=e.renderData?.renderCount,n=s.current;n&&l.current&&t&&l.current!==t&&(n.classList.remove("count-flash"),n.offsetWidth,n.classList.add("count-flash"),l.current=t)},[e.renderData?.renderCount]);let p=(0,u.Ye)(()=>{if(!e.renderData)return null;let{selfTime:t,totalTime:n,renderCount:r}=e.renderData;return r?(0,h.tZ)("span",{className:ew("flex items-center gap-x-0.5 ml-1.5","text-[10px] text-neutral-400"),children:(0,h.BX)("span",{ref:s,title:`Self time: ${eK(t)}ms 2Total time: ${eK(n)}ms`,className:"count-badge",children:["\xd7",r]})}):null},[e.renderData]),m=(0,u.Ye)(()=>{if(!e.fiber)return null;let{wrapperTypes:t}=ey(e.fiber),n=t[0];return(0,h.BX)("span",{className:ew("flex items-center gap-x-1","text-[10px] text-neutral-400 tracking-wide","overflow-hidden"),children:[n&&(0,h.BX)(h.HY,{children:[(0,h.tZ)("span",{title:n?.title,className:ew("rounded py-[1px] px-1","bg-neutral-700 text-neutral-300","truncate","memo"===n.type&&"bg-[#8e61e3] text-white",d&&"bg-yellow-300 text-black"),children:n.type},n.type),n.compiler&&(0,h.tZ)("span",{className:"text-yellow-300 ml-1",children:"â¨"})]}),t.length>1&&`\xd7${t.length}`,p]})},[e.fiber,d,p]);return(0,h.BX)("button",{type:"button",title:e.title,"data-index":t,className:ew("flex items-center gap-x-1","pl-1 pr-2","w-full h-7","text-left","rounded","cursor-pointer select-none"),onClick:a,children:[(0,h.tZ)("button",{type:"button","data-index":t,onClick:i,className:ew("w-6 h-6 flex items-center justify-center","text-left"),children:n&&(0,h.tZ)(v,{name:"icon-chevron-right",size:12,className:ew("transition-transform",!r&&"rotate-90")})}),c,m]})},e0=()=>{let e=(0,u.sO)(null),t=(0,u.sO)(null),n=(0,u.sO)(null),r=(0,u.sO)(null),a=(0,u.sO)(null),i=(0,u.sO)(0),o=(0,u.sO)(!1),s=(0,u.sO)(!1),l=(0,u.sO)(null),[c,d]=(0,u.eJ)([]),[p,m]=(0,u.eJ)(new Set),[f,g]=(0,u.eJ)(void 0),[w,x]=(0,u.eJ)(eL.value),b=(0,u.Ye)(()=>{let e=[],t=new Map(c.map(e=>[e.nodeId,e]));for(let n of c){let r=!0,a=n;for(;a.parentId;){let e=t.get(a.parentId);if(!e)break;if(p.has(e.nodeId)){r=!1;break}a=e}r&&e.push(n)}return e},[p,c]),{virtualItems:y,totalSize:N}=eA({count:b.length,getScrollElement:()=>e.current,estimateSize:()=>28,overscan:5}),z=(0,u.I4)(t=>{o.current=!0,r.current?.blur(),eY.value=!0;let{parentCompositeFiber:n}=tZ(t);if(!n)return;is.inspectState.value={kind:"focused",focusedDomElement:t,fiber:n};let a=b.findIndex(e=>e.element===t);if(-1!==a){g(a);let t=28*a,n=e.current;if(n){let e=n.clientHeight,r=n.scrollTop;(t<r||t+28>r+e)&&n.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}},[b]),Z=(0,u.I4)(e=>{let t=Number(e.currentTarget.dataset.index);if(Number.isNaN(t))return;let n=b[t].element;n&&z(n)},[b,z]),S=(0,u.I4)(e=>{m(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),T=(0,u.I4)(e=>{e.stopPropagation();let t=Number(e.target.dataset.index);Number.isNaN(t)||S(b[t].nodeId)},[b,S]),C=(0,u.I4)(t=>{n.current?.classList.remove("!border-red-500");let r=[];if(!t){eL.value={query:t,matches:r,currentMatchIndex:-1};return}if(t.includes("[")&&!t.includes("]")&&t.length>t.indexOf("[")+1){n.current?.classList.add("!border-red-500");return}let a=eV(t)||[];if(t.includes("[")&&!eJ(a)){n.current?.classList.add("!border-red-500");return}let i=t.replace(/\[.*?\]/,"").trim(),o=/^\/.*\/$/.test(i),s=e=>!1;if(i.startsWith("/")&&!o&&i.length>1){n.current?.classList.add("!border-red-500");return}if(o)try{let e=i.slice(1,-1),t=RegExp(e,"i");s=e=>t.test(e)}catch{n.current?.classList.add("!border-red-500");return}else if(i){let e=i.toLowerCase();s=t=>t.toLowerCase().includes(e)}for(let e of c){let t=!0;if(i&&(t=s(e.label)),t&&a.length>0){if(e.fiber){let{wrapperTypes:n}=ey(e.fiber);t=eq(a,n)}else t=!1}t&&r.push(e)}if(eL.value={query:t,matches:r,currentMatchIndex:r.length>0?0:-1},r.length>0){let t=r[0],n=b.findIndex(e=>e.nodeId===t.nodeId);if(-1!==n){let t=e.current;if(t){let e=t.clientHeight;t.scrollTo({top:Math.max(0,28*n-e/2),behavior:"instant"})}}}},[c,b]),E=(0,u.I4)(e=>{let t=e.currentTarget;t&&C(t.value)},[C]),A=(0,u.I4)(t=>{let{matches:n,currentMatchIndex:r}
2=eL.value;if(0===n.length)return;let a="next"===t?(r+1)%n.length:(r-1+n.length)%n.length;eL.value={...eL.value,currentMatchIndex:a};let i=n[a],o=b.findIndex(e=>e.nodeId===i.nodeId);if(-1!==o){g(o);let t=28*o,n=e.current;if(n){let e=n.clientHeight;n.scrollTo({top:Math.max(0,t-e/2),behavior:"instant"})}}},[b]),X=(0,u.I4)(n=>{if(t.current&&(t.current.style.width=`${n}px`),e.current){e.current.style.width=`${n}px`;let t=eU(n,i.current);e.current.style.setProperty("--indentation-size",`${t}px`)}},[]),M=(0,u.I4)(e=>{if(!l.current)return;let t=eZ.value.dimensions.width;l.current.classList.remove("cursor-ew-resize","cursor-w-resize","cursor-e-resize"),e<=240?l.current.classList.add("cursor-w-resize"):e>=Math.floor(t-120)?l.current.classList.add("cursor-e-resize"):l.current.classList.add("cursor-ew-resize")},[]),B=(0,u.I4)(t=>{if(t.preventDefault(),t.stopPropagation(),!e.current)return;e.current.style.setProperty("pointer-events","none"),s.current=!0;let n=t.clientX,r=e.current.offsetWidth,a=Math.floor(eZ.value.dimensions.width-120);M(r);let i=e=>{let t=r+(n-e.clientX);M(t),X(Math.min(a,Math.max(240,t)))},o=()=>{e.current&&(e.current.style.removeProperty("pointer-events"),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",o),eZ.value={...eZ.value,componentsTree:{...eZ.value.componentsTree,width:e.current.offsetWidth}},ev(k,eZ.value),s.current=!1)};document.addEventListener("pointermove",i),document.addEventListener("pointerup",o)},[X,M]);(0,u.d4)(()=>{if(e.current)return M(e.current.offsetWidth),eZ.subscribe(()=>{e.current&&M(e.current.offsetWidth)})},[M]);let $=(0,u.I4)(()=>{o.current=!1},[]);return(0,u.d4)(()=>{let t=!0,n=e=>{let t=new Map,n=[];for(let{element:n,name:r,fiber:a}of e){if(!n)continue;let e=r,{name:i,wrappers:o}=ey(a);i&&(e=o.length>0?`${o.join("(")}(${i})${")".repeat(o.length)}`:i),t.set(n,{label:i||r,title:e,children:[],element:n,fiber:a})}for(let{element:r,depth:a}of e){if(!r)continue;let e=t.get(r);if(e){if(0===a)n.push(e);else{let n=r.parentElement;for(;n;){let r=t.get(n);if(r){r.children=r.children||[],r.children.push(e);break}n=n.parentElement}}}}return n},r=()=>{let r=a.current;if(!r)return;let o=n(tA());if(o.length>0){let n=eH(o),a=e_(n);if(i.current=a,X(eZ.value.componentsTree.width),d(n),t){t=!1;let a=n.findIndex(e=>e.element===r);if(-1!==a){let t=28*a,n=e.current;n&&setTimeout(()=>{n.scrollTo({top:t,behavior:"instant"})},96)}}}},o=is.inspectState.subscribe(e=>{"focused"!==e.kind||eY.value||(C(""),a.current=e.focusedDomElement,r())}),l=0,c=eI.subscribe(()=>{"focused"!==is.inspectState.value.kind||(cancelAnimationFrame(l),s.current||(l=requestAnimationFrame(()=>{eY.value=!1,r()})))});return()=>{o(),c(),eL.value={query:"",matches:[],currentMatchIndex:-1}}},[]),(0,u.d4)(()=>{let e=e=>{if(o.current&&f)switch(e.key){case"ArrowUp":if(e.preventDefault(),e.stopPropagation(),f>0){let e=b[f-1];e?.element&&z(e.element)}return;case"ArrowDown":if(e.preventDefault(),e.stopPropagation(),f<b.length-1){let e=b[f+1];e?.element&&z(e.element)}return;case"ArrowLeft":{e.preventDefault(),e.stopPropagation();let t=b[f];t?.nodeId&&S(t.nodeId);return}case"ArrowRight":{e.preventDefault(),e.stopPropagation();let t=b[f];t?.nodeId&&S(t.nodeId);return}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[f,b,z,S]),(0,u.d4)(()=>eL.subscribe(x),[]),(0,u.d4)(()=>eZ.subscribe(e=>{t.current?.style.setProperty("transition","width 0.1s"),X(e.componentsTree.width),setTimeout(()=>{t.current?.style.removeProperty("transition")},500)}),[]),(0,h.BX)("div",{className:"react-scan-components-tree flex",children:[(0,h.tZ)("div",{ref:l,onPointerDown:B,className:"relative resize-v-line",children:(0,h.tZ)("span",{children:(0,h.tZ)(v,{name:"icon-ellipsis",size:18})})}),(0,h.BX)("div",{ref:t,className:"flex flex-col h-full",children:[(0,h.tZ)("div",{className:"p-2 border-b border-[#1e1e1e]",children:(0,h.BX)("div",{ref:n,title:`Search components by: 3 4\u2022 Name (e.g., "Button") \u2014 Case insensitive, matches any part 5 6\u2022 Regular Expression (e.g., "/^Button/") \u2014 Use forward slashes 7 8\u2022 Wrapper Type (e.g., "[memo,forwardRef]"): 9 - Available types: memo, forwardRef, lazy, suspense 10 - Matches any part of type name (e.g., "mo" matches "memo") 11 - Use commas for multiple types 12 13\u2022 Combined Search:
14 - Mix name/regex with type: "button [for]" 15 - Will match components satisfying both conditions 16 17\u2022 Navigation: 18 - Enter \u2192 Next match 19 - Shift + Enter \u2192 Previous match 20 - Cmd/Ctrl + Enter \u2192 Select and focus match 21`,className:ew("relative","flex items-center gap-x-1 px-2","rounded","border border-transparent","focus-within:border-[#454545]","bg-[#1e1e1e] text-neutral-300","transition-colors","whitespace-nowrap","overflow-hidden"),children:[(0,h.tZ)(v,{name:"icon-search",size:12,className:" text-neutral-500"}),(0,h.tZ)("div",{className:"relative flex-1 h-7 overflow-hidden",children:(0,h.tZ)("input",{ref:r,type:"text",value:eL.value.query,onClick:e=>{e.stopPropagation(),e.currentTarget.focus()},onPointerDown:e=>{e.stopPropagation()},onKeyDown:e=>{"Escape"===e.key&&e.currentTarget.blur(),eL.value.matches.length&&("Enter"===e.key&&e.shiftKey?A("prev"):"Enter"===e.key&&(e.metaKey||e.ctrlKey?(e.preventDefault(),e.stopPropagation(),z(eL.value.matches[eL.value.currentMatchIndex].element),e.currentTarget.focus()):A("next")))},onChange:E,className:"absolute inset-y-0 inset-x-1",placeholder:"Component name, /regex/, or [type]"})}),eL.value.query?(0,h.BX)(h.HY,{children:[(0,h.BX)("span",{className:"flex items-center gap-x-0.5 text-xs text-neutral-500",children:[eL.value.currentMatchIndex+1,"|",eL.value.matches.length]}),!!eL.value.matches.length&&(0,h.BX)(h.HY,{children:[(0,h.tZ)("button",{type:"button",onClick:e=>{e.stopPropagation(),A("prev")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:(0,h.tZ)(v,{name:"icon-chevron-right",className:"-rotate-90",size:12})}),(0,h.tZ)("button",{type:"button",onClick:e=>{e.stopPropagation(),A("next")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:(0,h.tZ)(v,{name:"icon-chevron-right",className:"rotate-90",size:12})})]}),(0,h.tZ)("button",{type:"button",onClick:e=>{e.stopPropagation(),C("")},className:"button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300",children:(0,h.tZ)(v,{name:"icon-close",size:12})})]}):!!c.length&&(0,h.tZ)("span",{className:"text-xs text-neutral-500",children:c.length})]})}),(0,h.tZ)("div",{className:"flex-1 overflow-hidden",children:(0,h.tZ)("div",{ref:e,onPointerLeave:$,className:"tree h-full overflow-auto will-change-transform",children:(0,h.tZ)("div",{className:"relative w-full",style:{height:N},children:y.map(e=>{let t=b[e.index];if(!t)return null;let n="focused"===is.inspectState.value.kind&&t.element===is.inspectState.value.focusedDomElement,r=e.index===f;return(0,h.tZ)("div",{className:ew("absolute left-0 w-full overflow-hidden","text-neutral-400 hover:text-neutral-300","bg-transparent hover:bg-[#5f3f9a]/20",(n||r)&&"text-neutral-300 bg-[#5f3f9a]/40 hover:bg-[#5f3f9a]/40"),style:{top:e.start,height:28},children:(0,h.tZ)("div",{className:"w-full h-full",style:{paddingLeft:`calc(${t.depth} * var(--indentation-size))`},children:(0,h.tZ)(eQ,{node:t,nodeIndex:e.index,hasChildren:!!t.children?.length,isCollapsed:p.has(t.nodeId),handleTreeNodeClick:Z,handleTreeNodeToggle:T,searchValue:w})})},t.nodeId)})})})})]})]})},e1=(0,p.X$)(({text:e,children:t,onCopy:n,className:r,iconSize:a=14})=>{let[i,o]=(0,u.eJ)(!1);(0,u.d4)(()=>{if(i){let e=setTimeout(()=>o(!1),600);return()=>{clearTimeout(e)}}},[i]);let s=(0,u.I4)(t=>{t.preventDefault(),t.stopPropagation(),navigator.clipboard.writeText(e).then(()=>{o(!0),n?.(!0,e)},()=>{n?.(!1,e)})},[e,n]),l=(0,h.tZ)("button",{onClick:s,type:"button",className:ew("z-10","flex items-center justify-center","hover:text-dev-pink-400","transition-colors duration-200 ease-in-out","cursor-pointer",`size-[${a}px]`,r),children:(0,h.tZ)(v,{name:`icon-${i?"check":"copy"}`,size:[a],className:ew(i&&"text-green-500")})});return t?t({ClipboardIcon:l,onClick:s}):l}),e2=({length:e,expanded:t,onToggle:n,isNegative:r})=>(0,h.BX)("div",{className:"flex items-center gap-1",children:[(0,h.tZ)("button",{type:"button",onClick:n,className:"flex items-center p-0 opacity-50",children:(0,h.tZ)(v,{name:"icon-chevron-right",size:12,className:ew("transition-[color,transform]",r?"text-[#f87171]":"text-[#4ade80]",t&&"rotate-90")})}),(0,h.BX)("span",{children:["Array(",e,")"]})]}),e4=({value:e,path:t,isNegative:n})=>{let[r,a]=(0,u.eJ)(!1);if(!(null!==e&&"object"==typeof e&&!(e instanceof Date)))return(0,h.BX)("div",{className:"flex items-center gap-1",children:[(0,h.BX)("span",{className:"text-gray-500",children:[t,":"]}),(0,h.tZ)("span",{className:"truncate",children:tR(e)})]});let i=Object.entries(e);return(0,h.BX)("div",{className:"flex flex-col",children:[(0,h.BX)("div",{className:"flex items-center gap-1",children:[(0,h.tZ)("button",{type:"button",onClick:()=>a(!r),className:"flex items-center p-0 opacity-50",children:(0,h.tZ)(v,{name:"icon-chevron-right",size:12,className:ew("transition-[color,transform]",n?"text-[#f87171]":"text-[#4ade80]",r&&"rotate-90")})}),(0,h.BX)("span",{className:"text-gray-500",children:[t,":"]}),!r&&(0,h.tZ)("span",{className:"truncate",children:e instanceof Date?tR(e):`{${Object.keys(e).join(", ")}}`})]}),r&&(0,h.tZ)("div",{className:"pl-5 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:i.map(([e,t])=>(0,h.tZ)(e4,{value:t,path:e,isNegative:n},e))})]})},e5=({value:e,expanded:t,onToggle:n,isNegative:r})=>{let{value:a,error:i}=tI(e);return i?(0,h.tZ)("span",{className:"text-gray-500 font-italic",children:i}):null===a||"object"!=typeof a||a instanceof Promise?(0,h.tZ)("span",{children:tR(a)}):Array.isArray(a)?(0,h.BX)("div",{className:"flex flex-col gap-1 relative",children:[(0,h.tZ)(e2,{length:a.length,expanded:t,onToggle:n,isNegative:r}),t&&(0,h.tZ)("div",{className:"pl-2 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:a.map((e,t)=>(0,h.tZ)(e4,{value:e,path:t.toString(),isNegative:r},t.toString()))}),(0,h.tZ)(e1,{text:tX(a),className:"absolute top-0.5 right-0.5 opacity-0 transition-opacity group-hover:opacity-100 self-end",children:({ClipboardIcon:e})=>(0,h.tZ)(h.HY,{children:e})})]}):(0,h.BX)("div",{className:"flex items-start gap-1 relative",children:[(0,h.tZ)("button",{type:"button",onClick:n,className:ew("flex items-center","p-0 mt-0.5 mr-1","opacity-50"),children:(0,h.tZ)(v,{name:"icon-chevron-right",size:12,className:ew("transition-[color,transform]",r?"text-[#f87171]":"text-[#4ade80]",t&&"rotate-90")})}),(0,h.tZ)("div",{className:"flex-1",children:t?(0,h.tZ)("div",{className:"pl-2 border-l border-[#333] mt-0.5 ml-1 flex flex-col gap-0.5",children:Object.entries(a).map(([e,t])=>(0,h.tZ)(e4,{value:t,path:e,isNegative:r},e))}):(0,h.tZ)("span",{children:tR(a)})}),(0,h.tZ)(e1,{text:tX(a),className:"absolute top-0.5 right-0.5 opacity-0 transition-opacity group-hover:opacity-100 self-end",children:({ClipboardIcon:e})=>(0,h.tZ)(h.HY,{children:e})})]})};(0,c.td)({fiber:null,fiberProps:{current:[],changes:new Set},fiberState:{current:[],changes:new Set},fiberContext:{current:[],changes:new Set}});var e3=e=>{switch(e.kind){case"initialized":return e.changes.currentValue;case"partially-initialized":return e.value}},e6=(e,t)=>{for(let n of e){let e=t.get(n.name);if(e){t.set(e.name,{count:e.count+1,currentValue:n.value,id:e.name,lastUpdated:Date.now(),name:e.name,previousValue:n.prevValue});continue}t.set(n.name,{count:1,currentValue:n.value,id:n.name,lastUpdated:Date.now(),name:n.name,previousValue:n.prevValue})}},e8=(e,t)=>
21{for(let n of e){let e=t.contextChanges.get(n.contextType);if(e){if(g(e3(e),n.value))continue;if("partially-initialized"===e.kind){t.contextChanges.set(n.contextType,{kind:"initialized",changes:{count:1,currentValue:n.value,id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,previousValue:e.value}});continue}t.contextChanges.set(n.contextType,{kind:"initialized",changes:{count:e.changes.count+1,currentValue:n.value,id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,previousValue:e.changes.currentValue}});continue}t.contextChanges.set(n.contextType,{kind:"partially-initialized",id:n.contextType.toString(),lastUpdated:Date.now(),name:n.name,value:n.value})}},e7=e=>{let t={contextChanges:new Map,propsChanges:new Map,stateChanges:new Map};return e.forEach(e=>{e8(e.contextChanges,t),e6(e.stateChanges,t.stateChanges),e6(e.propsChanges,t.propsChanges)}),t},e9=(e,t)=>{let n=new Map;return e.forEach((e,t)=>{n.set(t,e)}),t.forEach((e,t)=>{let r=n.get(t);if(!r){n.set(t,e);return}n.set(t,{count:r.count+e.count,currentValue:e.currentValue,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:e.previousValue})}),n},te=(e,t)=>{let n=new Map;
21return e.contextChanges.forEach((e,t)=>{n.set(t,e)}),t.contextChanges.forEach((e,t)=>{let r=n.get(t);if(!r){n.set(t,e);return}if(e3(e)!==e3(r))switch(r.kind){case"initialized":switch(e.kind){case"initialized":n.set(t,{kind:"initialized",changes:{...e.changes,count:e.changes.count+r.changes.count+1,currentValue:e.changes.currentValue,previousValue:e.changes.previousValue}});return;case"partially-initialized":n.set(t,{kind:"initialized",changes:{count:r.changes.count+1,currentValue:e.value,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:r.changes.currentValue}});return}case"partially-initialized":switch(e.kind){case"initialized":n.set(t,{kind:"initialized",changes:{count:e.changes.count+1,currentValue:e.changes.currentValue,id:e.changes.id,lastUpdated:e.changes.lastUpdated,name:e.changes.name,previousValue:r.value}});return;case"partially-initialized":n.set(t,{kind:"initialized",changes:{count:1,currentValue:e.value,id:e.id,lastUpdated:e.lastUpdated,name:e.name,previousValue:r.value}});return}}}),n},tt=(e,t)=>({contextChanges:te(e,t),propsChanges:e9(e.propsChanges,t.propsChanges),stateChanges:e9(e.stateChanges,t.stateChanges)}),tn=e=>Array.from(e.propsChanges.values()).reduce((e,t)=>e+t.count,0)+Array.from(e.stateChanges.values()).reduce((e,t)=>e+t.count,0)+Array.from(e.contextChanges.values()).filter(e=>"initialized"===e.kind).reduce((e,t)=>e+t.changes.count,0),tr=e=>{let t=(0,u.sO)({queue:[]}),[n,r]=(0,u.eJ)({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),a="focused"===is.inspectState.value.kind?is.inspectState.value.fiber:null,i=a?(0,l.Sv)(a):null;return(0,u.d4)(()=>{let n=setInterval(()=>{0!==t.current.queue.length&&(r(n=>{let r=tt(n,e7(t.current.queue)),a=tn(n),i=tn(r);return e?.onChangeUpdate?.(i-a),r}),t.current.queue=[])},50);return()=>{clearInterval(n)}},[a]),(0,u.d4)(()=>{if(!i)return;let e=e=>{t.current?.queue.push(e)},n=is.changesListeners.get(i);return n||(n=[],is.changesListeners.set(i,n)),n.push(e),()=>{r({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),t.current.queue=[],is.changesListeners.set(i,is.changesListeners.get(i)?.filter(t=>t!==e)??[])}},[i]),(0,u.d4)(()=>()=>{r({propsChanges:new Map,stateChanges:new Map,contextChanges:new Map}),t.current.queue=[]},[i]),n},ta=e=>{if(null==e||"function"==typeof e||"object"!=typeof e)return{value:e};if(tj(e))return{value:"Promise"};try{let t=Object.getPrototypeOf(e);if(t===Promise.prototype||t?.constructor?.name==="Promise")return{value:"Promise"};return{value:e}}catch{return{value:null,error:"Error accessing value"}}},ti=(0,p.X$)(()=>{let[e,t]=(0,u.eJ)(!0),n=tr(),[r,a]=(0,u.eJ)(!1),i=tn(n)>0;(0,u.d4)(()=>{if(!r&&i){let e=setTimeout(()=>{a(!0),requestAnimationFrame(()=>{t(!0)})},0);return()=>clearTimeout(e)}},[r,i]);let o=new Map(Array.from(n.contextChanges.entries()).filter(([,e])=>"initialized"===e.kind).map(([e,t])=>[e,"partially-initialized"===t.kind?null:t.changes])),s="focused"===is.inspectState.value.kind?is.inspectState.value.fiber:null;if(s)return(0,h.BX)(h.HY,{children:[(0,h.tZ)(ts,{}),(0,h.BX)("div",{className:"overflow-hidden h-full flex flex-col gap-y-2",children:[(0,h.BX)("div",{className:"flex flex-col gap-2 px-3 pt-2",children:[(0,h.BX)("span",{className:"text-sm font-medium text-[#888]",children:["Why did"," ",(0,h.tZ)("span",{className:"text-[#A855F7]",children:(0,l.Gf)(s)})," ","render?"]}),!i&&(0,h.BX)("div",{className:"text-sm text-[#737373] bg-[#1E1E1E] rounded-md p-4 flex flex-col gap-4",children:[(0,h.tZ)("div",{children:"No changes detected since selecting"}),(0,h.tZ)("div",{children:"The props, state, and context changes within your component will be reported here"})]})]}),(0,h.BX)("div",{className:ew("flex flex-col gap-y-2 pl-3 relative overflow-y-auto h-full"),children:[(0,h.tZ)(tc,{changes:n.propsChanges,title:"Changed Props",isExpanded:e}),(0,h.tZ)(tc,{renderName:e=>to(e,(0,l.Gf)((0,l.oL)(s))??"Unknown Component"),changes:n.stateChanges,title:"Changed State",isExpanded:e}),(0,h.tZ)(tc,{changes:o,title:"Changed Context",isExpanded:e})]})]})]})}),to=(e,t)=>{if(Number.isNaN(Number(e)))return e;let n=Number.parseInt(e);return(0,h.BX)("span",{className:"truncate",children:[(0,h.BX)("span",{className:"text-white",children:[n,(e=>{let t=e%100;if(t>=11&&t<=13)return"th";switch(e%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}})(n)," hook"," "]}),(0,h.BX)("span",{style:{color:"#666"}
21,children:["called in ",(0,h.tZ)("i",{className:"text-[#A855F7] truncate",children:t})]})]})},ts=(0,p.X$)(()=>{let e=(0,u.sO)(null),t=(0,u.sO)(null),n=(0,u.sO)(null),r=(0,u.sO)({isPropsChanged:!1,isStateChanged:!1,isContextChanged:!1});return(0,u.d4)(()=>{let a=ex(()=>{let r=[];for(let a of(e.current?.dataset.flash==="true"&&r.push(e.current),t.current?.dataset.flash==="true"&&r.push(t.current),n.current?.dataset.flash==="true"&&r.push(n.current),r))a.classList.remove("count-flash-white"),a.offsetWidth,a.classList.add("count-flash-white")},400);return eR.subscribe(i=>{if(!e.current||!t.current||!n.current)return;let{currentIndex:o,updates:s}=i,l=s[o];l&&0!==o&&(a(),r.current={isPropsChanged:(l.props?.changes?.size??0)>0,isStateChanged:(l.state?.changes?.size??0)>0,isContextChanged:(l.context?.changes?.size??0)>0},"true"!==e.current.dataset.flash&&(e.current.dataset.flash=r.current.isPropsChanged.toString()),"true"!==t.current.dataset.flash&&(t.current.dataset.flash=r.current.isStateChanged.toString()),"true"!==n.current.dataset.flash&&(n.current.dataset.flash=r.current.isContextChanged.toString()))})},[]),(0,h.tZ)("button",{type:"button",className:ew("react-section-header","overflow-hidden","max-h-0","transition-[max-height]"),children:(0,h.tZ)("div",{className:ew("flex-1 react-scan-expandable"),children:(0,h.tZ)("div",{className:"overflow-hidden",children:(0,h.BX)("div",{className:"flex items-center whitespace-nowrap",children:[(0,h.tZ)("div",{className:"flex items-center gap-x-2",children:"What changed?"}),(0,h.BX)("div",{className:ew("ml-auto","change-scope","transition-opacity duration-300 delay-150"),children:[(0,h.tZ)("div",{ref:e,children:"props"}),(0,h.tZ)("div",{ref:t,children:"state"}),(0,h.tZ)("div",{ref:n,children:"context"})]})]})})})})}),tl=e=>e,tc=(0,p.X$)(({title:e,changes:t,renderName:n=tl})=>{let[r,a]=(0,u.eJ)(new Set),[i,o]=(0,u.eJ)(new Set),s=Array.from(t.entries());return 0===t.size?null:(0,h.BX)("div",{children:[(0,h.tZ)("div",{className:"text-xs text-[#888] mb-1.5",children:e}),(0,h.tZ)("div",{className:"flex flex-col gap-2",children:s.map(([t,s])=>{let l=i.has(String(t)),{value:c,error:d}=ta(s.previousValue),{value:u,error:p}=ta(s.currentValue),m=tB(c,u);return(0,h.BX)("div",{children:[(0,h.tZ)("button",{onClick:()=>{o(e=>{let n=new Set(e);return n.has(String(t))?n.delete(String(t)):n.add(String(t)),n})},className:"flex items-center gap-2 w-full bg-transparent border-none p-0 cursor-pointer text-white text-xs",children:(0,h.BX)("div",{className:"flex items-center gap-1.5 flex-1",children:[(0,h.tZ)(v,{name:"icon-chevron-right",size:12,className:ew("text-[#666] transition-transform duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]",{"rotate-90":l})}),(0,h.BX)("div",{className:"whitespace-pre-wrap break-words text-left font-medium flex items-center gap-x-1.5",children:[n(s.name),(0,h.tZ)(th,{count:s.count,isFunction:"function"==typeof s.currentValue,showWarning:0===m.changes.length,forceFlash:!0})]})]})}),(0,h.tZ)("div",{className:ew("react-scan-expandable",{"react-scan-expanded":l}),children:(0,h.tZ)("div",{className:"pl-3 text-xs font-mono border-l-1 border-[#333]",children:(0,h.tZ)("div",{className:"flex flex-col gap-0.5",children:d||p?(0,h.tZ)(td,{currError:p,prevError:d}):m.changes.length>0?(0,h.tZ)(tu,{change:s,diff:m,expandedFns:r,renderName:n,setExpandedFns:a,title:e}):(0,h.tZ)(tp,{currValue:u,entryKey:t,expandedFns:r,prevValue:c,setExpandedFns:a})})})})]},t)})})]})}),td=({prevError:e,currError:t})=>(0,h.BX)(h.HY,{children:[e&&(0,h.tZ)("div",{className:"text-[#f87171] bg-[#2a1515] pr-1.5 py-[3px] rounded italic",children:e}),t&&(0,h.tZ)("div",{className:"text-[#4ade80] bg-[#1a2a1a] pr-1.5 py-[3px] rounded italic mt-0.5",children:t})]}),tu=({diff:e,title:t,renderName:n,change:r,expandedFns:a,setExpandedFns:i})=>e.changes.map((o,s)=>{let l;let{value:c,error:d}=ta(o.prevValue),{value:u,error:p}=ta(o.currentValue),m="function"==typeof c||"function"==typeof u;return"Props"===t&&(l=o.path.length>0?`${n(String(r.name))}.${t$(o.path)}`:void 0),"State"===t&&o.path.length>0&&(l=`state.${t$(o.path)}`),l||(l=t$(o.path)),(0,h.BX)("div",{className:ew("flex flex-col gap-y-1",s<e.changes.length-1&&"mb-4"),children:[l&&(0,h.tZ)("div",{className:"text-[#666] text-[10px]",children:l}),(0,h.BX)("button",{type:"button",className:ew("group","flex items-start","py-[3px] px-1.5","text-left text-[#f87171] bg-[#2a1515]","rounded","overflow-hidden break-all",m&&"cursor-pointer"),onClick:m?()=>{let e=`${t$(o.path)}-prev`;i(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}:void 0,children:[(0,h.tZ)("span",{className:"w-3 flex items-center justify-center opacity-50",children:"-"}),(0,h.tZ)("span",{className:"flex-1 whitespace-nowrap font-mono",children:d?(0,h.tZ)("span",{className:"italic text-[#f87171]",children:d}
21):m?(0,h.BX)("div",{className:"flex gap-1 items-start flex-col",children:[(0,h.BX)("div",{className:"flex gap-1 items-start w-full",children:[(0,h.tZ)("span",{className:"flex-1 max-h-40",children:tF(c,a.has(`${t$(o.path)}-prev`))}),"function"==typeof c&&(0,h.tZ)(e1,{text:c.toString(),className:"opacity-0 transition-opacity group-hover:opacity-100",children:({ClipboardIcon:e})=>(0,h.tZ)(h.HY,{children:e})})]}),c?.toString()===u?.toString()&&(0,h.tZ)("div",{className:"text-[10px] text-[#666] italic",children:"Function reference changed"})]}):(0,h.tZ)(e5,{value:c,expanded:a.has(`${t$(o.path)}-prev`),onToggle:()=>{let e=`${t$(o.path)}-prev`;i(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!0})})]}),(0,h.BX)("button",{type:"button",className:ew("group","flex items-start","py-[3px] px-1.5","text-left text-[#4ade80] bg-[#1a2a1a]","rounded","overflow-hidden break-all",m&&"cursor-pointer"),onClick:m?()=>{let e=`${t$(o.path)}-current`;i(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}:void 0,children:[(0,h.tZ)("span",{className:"w-3 flex items-center justify-center opacity-50",children:"+"}),(0,h.tZ)("span",{className:"flex-1 whitespace-pre-wrap font-mono",children:p?(0,h.tZ)("span",{className:"italic text-[#4ade80]",children:p}):m?(0,h.BX)("div",{className:"flex gap-1 items-start flex-col",children:[(0,h.BX)("div",{className:"flex gap-1 items-start w-full",children:[(0,h.tZ)("span",{className:"flex-1",children:tF(u,a.has(`${t$(o.path)}-current`))}),"function"==typeof u&&(0,h.tZ)(e1,{text:u.toString(),className:"opacity-0 transition-opacity group-hover:opacity-100",children:({ClipboardIcon:e})=>(0,h.tZ)(h.HY,{children:e})})]}),c?.toString()===u?.toString()&&(0,h.tZ)("div",{className:"text-[10px] text-[#666] italic",children:"Function reference changed"})]}):(0,h.tZ)(e5,{value:u,expanded:a.has(`${t$(o.path)}-current`),onToggle:()=>{let e=`${t$(o.path)}-current`;i(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!1})})]})]},`${l}-${r.name}-${s}`)}),tp=({prevValue:e,currValue:t,entryKey:n,expandedFns:r,setExpandedFns:a})=>(0,h.BX)(h.HY,{children:[(0,h.BX)("div",{className:"group flex gap-0.5 items-start text-[#f87171] bg-[#2a1515] py-[3px] px-1.5 rounded",children:[(0,h.tZ)("span",{className:"w-3 flex items-center justify-center opacity-50",children:"-"}),(0,h.tZ)("span",{className:"flex-1 overflow-hidden whitespace-pre-wrap font-mono",children:(0,h.tZ)(e5,{value:e,expanded:r.has(`${String(n)}-prev`),onToggle:()=>{let e=`${String(n)}-prev`;a(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!0})})]}),(0,h.BX)("div",{className:"group flex gap-0.5 items-start text-[#4ade80] bg-[#1a2a1a] py-[3px] px-1.5 rounded mt-0.5",children:[(0,h.tZ)("span",{className:"w-3 flex items-center justify-center opacity-50",children:"+"}),(0,h.tZ)("span",{className:"flex-1 overflow-hidden whitespace-pre-wrap font-mono",children:(0,h.tZ)(e5,{value:t,expanded:r.has(`${String(n)}-current`),onToggle:()=>{let e=`${String(n)}-current`;a(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},isNegative:!1})})]}),"object"==typeof t&&null!==t&&(0,h.BX)("div",{className:"text-[#666] text-[10px] italic mt-1 flex items-center gap-x-1",children:[(0,h.tZ)(v,{name:"icon-triangle-alert",className:"text-yellow-500 mb-px",size:14}),(0,h.tZ)("span",{children:"Reference changed but objects are structurally the same"})]})]}),th=({count:e,forceFlash:t,isFunction:n,showWarning:r})=>{let a=(0,u.sO)(!0),i=(0,u.sO)(null),o=(0,u.sO)(e);return(0,u.d4)(()=>{let t=i.current;t&&o.current!==e&&(t.classList.remove("count-flash"),t.offsetWidth,t.classList.add("count-flash"),o.current=e)},[e]),(0,u.d4)(()=>{if(a.current){a.current=!1;return}if(t){let e=setTimeout(()=>{i.current?.classList.add("count-flash-white"),e=setTimeout(()=>{i.current?.classList.remove("count-flash-white")},300)},500);return()=>{clearTimeout(e)}}},[t]),(0,h.BX)("div",{ref:i,className:"count-badge",children:[r&&(0,h.tZ)(v,{name:"icon-triangle-alert",className:"text-yellow-500 mb-px",size:14}),n&&(0,h.tZ)(v,{name:"icon-function",className:"text-[#A855F7] mb-px",size:14}),"x",e]})},tm={lastRendered:new Map,expandedPaths:new Set,cleanup:()=>{tm.lastRendered.clear(),tm.expandedPaths.clear(),e$.cleanupAll(),tU(),eP.reset()}},tf=class extends d.wA{constructor(){super(...arguments),this.state={hasError:!1,error:null},this.handleReset=()=>{this.setState({hasError:!1,error:null}),tm.cleanup()}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}render(){return this.state.hasError?(0,h.BX)("div",{className:"p-4 bg-red-950/50 h-screen backdrop-blur-sm",children:[(0,h.BX)("div",{className:"flex items-center gap-2 mb-3 text-red-400 font-medium",children:[(0,h.tZ)(v,{name:"icon-flame",className:"text-red-500",size:16}),"Something went wrong in the inspector"]}),(0,h.tZ)("div",{className:"p-3 bg-black/40 rounded font-mono text-xs text-red-300 mb-4 break-words",children:this.state.error?.message||JSON.stringify(this.state.error)}),(0,h.tZ)("button",{type:"button",onClick:this.handleReset,className:"px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-2",children:"Reset Inspector"})]}):this.props.children}},tg=(0,c.Fl)(()=>ew("react-scan-inspector","flex-1","opacity-0","overflow-y-auto overflow-x-hidden","transition-opacity delay-0","pointer-events-none",!ek.value&&"opacity-100 delay-300 pointer-events-auto")),tw=eE(()=>{let e=(0,u.sO)(null),t=t=>{if(!t)return;e.current=t;let{data:n,shouldUpdate:r}=tQ(t);if(r){let e={timestamp:Date.now(),fiberInfo:tD(t),props:n.fiberProps,state:n.fiberState,context:n.fiberContext,stateNames:t_(t)};eP.addUpdate(e,t)}};return(0,c.bF)(()=>{let n=is.inspectState.value;(0,c.rg)(()=>
21{if("focused"!==n.kind||!n.focusedDomElement){e.current=null,tm.cleanup();return}"focused"===n.kind&&(ek.value=!1);let{parentCompositeFiber:r}=tS(n.focusedDomElement,n.fiber);if(!r){is.inspectState.value={kind:"inspect-off"},eT.value={view:"none"};return}e.current?.type!==r.type&&(e.current=r,tm.cleanup(),t(r))})}),(0,c.bF)(()=>{eI.value,(0,c.rg)(()=>{let n=is.inspectState.value;if("focused"!==n.kind||!n.focusedDomElement){e.current=null,tm.cleanup();return}let{parentCompositeFiber:r}=tS(n.focusedDomElement,n.fiber);if(!r){is.inspectState.value={kind:"inspect-off"},eT.value={view:"none"};return}t(r),n.focusedDomElement.isConnected||(e.current=null,tm.cleanup(),is.inspectState.value={kind:"inspecting",hoveredDomElement:null})})}),(0,u.d4)(()=>()=>{tm.cleanup()},[]),(0,h.tZ)(tf,{children:(0,h.tZ)("div",{className:tg,children:(0,h.tZ)("div",{className:"w-full h-full",children:(0,h.tZ)(ti,{})})})})}),tx=eE(()=>"focused"!==is.inspectState.value.kind?null:(0,h.BX)(tf,{children:[(0,h.tZ)(tw,{}),(0,h.tZ)(e0,{})]})),tb=e=>{if("__REACT_DEVTOOLS_GLOBAL_HOOK__"in window){let t=window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!t?.renderers)return null;for(let[,n]of Array.from(t.renderers))try{let t=n.findFiberByHostInstance?.(e);if(t)return t}catch{}}if("_reactRootContainer"in e){let t=e._reactRootContainer;return t?._internalRoot?.current?.child??null}for(let t in e)if(t.startsWith("__reactInternalInstance$")||t.startsWith("__reactFiber"))return e[t];return null},tv=e=>{let t=e;for(;t;){if(t.stateNode instanceof Element)return t.stateNode;if(!t.child)break;t=t.child}for(;t;){if(t.stateNode instanceof Element)return t.stateNode;if(!t.return)break;t=t.return}return null},ty=e=>{if(!e)return null;try{let t=tb(e);if(!t)return null;let n=tk(t);return n?n[0]:null}catch{return null}},tk=e=>{let t=e,n=null;for(;t;){if((0,l.Iz)(t))return[t,n];(0,l.WT)(t)&&!n&&(n=t),t=t.return}return null},tN=(e,t)=>!!(0,l.pc)(t,t=>t===e),tz=async e=>{let t=ty(e);if(!t)return null;let n=tv(t);return n&&(await x([n])).get(n)||null},tZ=e=>{let t=ty(e);if(!t||!tv(t))return{};let n=tk(t);if(!n)return{};let[r]=n;return{parentCompositeFiber:r}},tS=(e,t)=>{if(!e.isConnected)return{};let n=t??ty(e);if(!n)return{};let r=n,a=null,i=null;for(;r;){if(!r.stateNode){r=r.return;continue}if(il.instrumentation?.fiberRoots.has(r.stateNode)){a=r,i=r.stateNode.current;break}r=r.return}if(!a||!i||!(n=tN(n,i)?n:n.alternate??n)||!tv(n))return{};let o=tk(n)?.[0];return o?{parentCompositeFiber:tN(o,i)?o:o.alternate??o}:{}},tT=e=>{let t=e.memoizedProps??{},n=e.alternate?.memoizedProps??{},r=[];for(let e in t){if("children"===e)continue;let a=t[e],i=n[e];g(a,i)||r.push({name:e,value:a,prevValue:i,type:1})}return r},tC=new Set(["HTML","HEAD","META","TITLE","BASE","SCRIPT","SCRIPT","STYLE","LINK","NOSCRIPT","SOURCE","TRACK","EMBED","OBJECT","PARAM","TEMPLATE","PORTAL","SLOT","AREA","XML","DOCTYPE","COMMENT"]),tE=(e,t=!0)=>{if(e.stateNode&&"nodeType"in e.stateNode){let n=e.stateNode;return t&&n.tagName&&tC.has(n.tagName.toLowerCase())?null:n}let n=e.child;for(;n;){let e=tE(n,t);if(e)return e;n=n.sibling}return null},tA=(e=document.body)=>{let t=[],n=e=>{if(!e)return null;let{parentCompositeFiber:t}=tZ(e);return t&&tE(t)===e?e:null},r=(e,a=0)=>{let i=n(e);if(i){let{parentCompositeFiber:e}=tZ(i);if(!e)return;t.push({element:i,depth:a,name:(0,l.Gf)(e.type)??"Unknown",fiber:e})}for(let t of Array.from(e.children))r(t,i?a+1:a)};return r(e),t},tX=e=>{try{if(null===e)return"null";if(void 0===e)return"undefined";if(tj(e))return"Promise";if("function"==typeof e){let t=e.toString();try{return t.replace(/\s+/g," ").replace(/{\s+/g,"{\n ").replace(/;\s+/g,";\n ").replace(/}\s*$/g,"\n}").replace(/\(\s+/g,"(").replace(/\s+\)/g,")").replace(/,\s+/g,", ")}catch{return t}}switch(!0){case e instanceof Date:return e.toISOString();case e instanceof RegExp:return e.toString();case e instanceof Error:return`${e.name}: ${e.message}`;case e instanceof Map:return JSON.stringify(Array.from(e.entries()),null,2);case e instanceof Set:return JSON.stringify(Array.from(e),null,2);case e instanceof DataView:return JSON.stringify(Array.from(new Uint8Array(e.buffer)),null,2);case e instanceof ArrayBuffer:return JSON.stringify(Array.from(new Uint8Array(e)),null,2);case ArrayBuffer.isView(e)&&"length"in e:return JSON.stringify(Array.from(e),null,2);case Array.isArray(e):case"object"==typeof e:return JSON.stringify(e,null,2);default:return String(e)}}catch{return String(e)}},tM=(e,t)=>{try{if("function"!=typeof e||"function"!=typeof t)return!1;return e.toString()===t.toString()}catch{return!1}},tB=(e,t,n=[],r=new WeakSet)=>{if(e===t)return{type:"primitive",changes:[],hasDeepChanges:!1};if("function"==typeof e&&"function"==typeof t){let r=tM(e,t);return{type:"primitive",changes:[{path:n,prevValue:e,currentValue:t,sameFunction:r}],hasDeepChanges:!r}}if(null===e||null===t||void 0===e||void 0===t||"object"!=typeof e||"object"!=typeof t)return{type:"primitive",changes:[{path:n,prevValue:e,currentValue:t}],hasDeepChanges:!0};if(r.has(e)||r.has(t))return{type:"object",changes:[{path:n,prevValue:"[Circular]",currentValue:"[Circular]"}],hasDeepChanges:!1};r.add(e),r.add(t);let a=new Set([...Object.keys(e),...Object.keys(t)]),i=[],o=!1;for(let s of a){let a=e[s],l=t[s];if(a!==l){if("object"==typeof a&&"object"==typeof l&&null!==a&&null!==l){let e=tB(a,l,[...n,s],r);i.push(...e.changes),e.hasDeepChanges&&(o=!0)}else i.push({path:[...n,s],prevValue:a,currentValue:l}),o=!0}}return{type:"object",changes:i,hasDeepChanges:o}},t$=e=>
210===e.length?"":e.reduce((e,t,n)=>/^\d+$/.test(t)?`${e}[${t}]`:0===n?t:`${e}.${t}`,""),tF=(e,t=!1)=>{try{let n=e.toString(),r=n.match(/(?:function\s*)?(?:\(([^)]*)\)|([^=>\s]+))\s*=>?/);if(!r)return"Æ";let a=(r[1]||r[2]||"").replace(/\s+/g,"");if(!t)return`\u0192 (${a}) => ...`;return function(e){let t=e.replace(/\s+/g," ").trim(),n=[],r="";for(let e=0;e<t.length;e++){let a=t[e];if("="===a&&">"===t[e+1]){r.trim()&&n.push(r.trim()),n.push("=>"),r="",e++;continue}/[(){}[\];,<>:\?!]/.test(a)?(r.trim()&&n.push(r.trim()),n.push(a),r=""):/\s/.test(a)?(r.trim()&&n.push(r.trim()),r=""):r+=a}r.trim()&&n.push(r.trim());let a=[];for(let e=0;e<n.length;e++){let t=n[e],r=n[e+1];"("===t&&")"===r||"["===t&&"]"===r||"{"===t&&"}"===r||"<"===t&&">"===r?(a.push(t+r),e++):a.push(t)}let i=new Set,o=new Set;function s(e,t,n){let r=0;for(let i=n;i<a.length;i++){let n=a[i];if(n===e)r++;else if(n===t&&0==--r)return i}return -1}for(let e=0;e<a.length;e++)if("("===a[e]){let t=s("(",")",e);if(-1!==t&&"=>"===a[t+1])for(let n=e;n<=t;n++)i.add(n)}for(let e=1;e<a.length;e++){let t=a[e-1],n=a[e];if(/^[a-zA-Z0-9_$]+$/.test(t)&&"<"===n){let t=s("<",">",e);if(-1!==t)for(let n=e;n<=t;n++)o.add(n)}}let l=0,c=[],d="";function u(){d.trim()&&c.push(d.replace(/\s+$/,"")),d=""}function p(){u(),d=" ".repeat(l)}let h=[];function m(){return h.length?h[h.length-1]:null}function f(e,t=!1){d.trim()?t||/^[),;:\].}>]$/.test(e)?d+=e:d+=` ${e}`:d+=e}for(let e=0;e<a.length;e++){let t=a[e],n=a[e+1]||"";if(["(","{","[","<"].includes(t))f(t),h.push(t),"{"===t?(l++,p()):("("===t||"["===t||"<"===t)&&(i.has(e)&&"("===t||o.has(e)&&"<"===t||n!==({"(":")","[":"]","<":">"})[t]&&"()"!==n&&"[]"!==n&&"<>"!==n&&(l++,p()));else if([")","}","]",">"].includes(t)){let n=m();")"===t&&"("===n||"]"===t&&"["===n||">"===t&&"<"===n?i.has(e)&&")"===t||o.has(e)&&">"===t||(l=Math.max(l-1,0),p()):"}"===t&&"{"===n&&(l=Math.max(l-1,0),p()),h.pop(),f(t),"}"===t&&p()}else if(/^\(\)|\[\]|\{\}|\<\>$/.test(t))f(t);else if("=>"===t)f(t);else if(";"===t)f(t,!0),p();else if(","===t){f(t,!0);let n=m();!(i.has(e)&&"("===n)&&!(o.has(e)&&"<"===n)&&n&&["{","[","(","<"].includes(n)&&p()}else f(t)}return u(),c.join("\n").replace(/\n\s*\n+/g,"\n").trim()}(n)}catch{return"Æ"}},tR=e=>{if(null===e)return"null";if(void 0===e)return"undefined";if("string"==typeof e)return`"${e.length>150?`${e.slice(0,20)}...`:e}"`;if("number"==typeof e||"boolean"==typeof e)return String(e);if("function"==typeof e)return tF(e);if(Array.isArray(e))return`Array(${e.length})`;if(e instanceof Map)return`Map(${e.size})`;if(e instanceof Set)return`Set(${e.size})`;if(e instanceof Date)return e.toISOString();if(e instanceof RegExp)return e.toString();if(e instanceof Error)return`${e.name}: ${e.message}`;if("object"==typeof e){let t=Object.keys(e);return`{${t.length>2?`${t.slice(0,2).join(", ")}, ...`:t.join(", ")}}`}return String(e)},tI=e=>{if(null==e||"function"==typeof e||"object"!=typeof e)return{value:e};if(e instanceof Promise)return{value:"Promise"};try{let t=Object.getPrototypeOf(e);if(t===Promise.prototype||t?.constructor?.name==="Promise")return{value:"Promise"};return{value:e}}catch{return{value:null,error:"Error accessing value"}}},tj=e=>!!e&&(e instanceof Promise||"object"==typeof e&&"then"in e),tD=e=>{let t=(0,l.nx)(e);return{displayName:(0,l.Gf)(e)||"Unknown",type:e.type,key:e.key,id:e.index,selfTime:t?.selfTime??null,totalTime:t?.totalTime??null}},tO=new Map,tP=new Map,tL=new Map,tY=null,tH=/\[(?<name>\w+),\s*set\w+\]/g,t_=e=>{let t=e.type?.toString?.()||"";return t?Array.from(t.matchAll(tH),e=>e.groups?.name??""):[]},tU=()=>{tO.clear(),tP.clear(),tL.clear(),tY=null},tW=e=>{let t=e.type!==tY;return tY=e.type,t},tV=(e,t,n,r)=>{let a=e.get(t),i=e===tO||e===tL,o=!g(n,r);if(!a)return e.set(t,{count:o&&i?1:0,currentValue:n,previousValue:r,lastUpdated:Date.now()}),{hasChanged:o,count:o&&i?1:i?0:1};if(!g(a.currentValue,n)){let r=a.count+1;return e.set(t,{count:r,currentValue:n,previousValue:a.currentValue,lastUpdated:Date.now()}),{hasChanged:!0,count:r}}return{hasChanged:!1,count:a.count}},tJ=e=>{if(!e)return{};if(e.tag===l.wk||e.tag===l.bI||e.tag===l.$K||e.tag===l.IN){let t=e.memoizedState,n={},r=0;for(;t;)t.queue&&void 0!==t.memoizedState&&(n[r]=t.memoizedState),t=t.next,r++;return n}return e.tag===l.lb&&e.memoizedState||{}},tq=e=>{let t=e.memoizedProps||{},n=e.alternate?.memoizedProps||{},r={},a={};for(let e of Object.keys(t))e in t&&(r[e]=t[e],a[e]=n[e]);return{current:r,prev:a,changes:tT(e).map(e=>({name:e.name,value:e.value,prevValue:e.prevValue}))}},tG=e=>{let t=tJ(e),n=e.alternate?tJ(e.alternate):{},r=[];for(let[a,i]of Object.entries(t)){let t=e.tag===l.lb?a:Number(a);e.alternate&&!g(n[a],i)&&r.push({name:t,value:i,prevValue:n[a]})}return{current:t,prev:n,changes:r}},tK=e=>{let t=t1(e),n=e.alternate?t1(e.alternate):new Map,r={},a={},i=[],o=new Set;for(let[e,s]of t){let t=s.displayName;if(o.has(e))continue;o.add(e),r[t]=s.value;let l=n.get(e);l&&(a[t]=l.value,g(l.value,s.value)||i.push({name:t,value:s.value,prevValue:l.value,contextType:e}))}return{current:r,prev:a,changes:i}},tQ=e=>{let t=()=>({current:[],changes:new Set,changesCounts:new Map});
21if(!e)return{data:{fiberProps:t(),fiberState:t(),fiberContext:t()},shouldUpdate:!1};let n=!1,r=tW(e),a=t();if(e.memoizedProps){let{current:t,changes:r}=tq(e);for(let[e,n]of Object.entries(t))a.current.push({name:e,value:tj(n)?{type:"promise",displayValue:"Promise"}:n});for(let e of r){let{hasChanged:t,count:r}=tV(tO,e.name,e.value,e.prevValue);t&&(n=!0,a.changes.add(e.name),a.changesCounts.set(e.name,r))}}let i=t(),{current:o,changes:s}=tG(e);for(let[t,n]of Object.entries(o)){let r=e.tag===l.lb?t:Number(t);i.current.push({name:r,value:n})}for(let e of s){let{hasChanged:t,count:r}=tV(tP,e.name,e.value,e.prevValue);t&&(n=!0,i.changes.add(e.name),i.changesCounts.set(e.name,r))}let c=t(),{current:d,changes:u}=tK(e);for(let[e,t]of Object.entries(d))c.current.push({name:e,value:t});if(!r)for(let e of u){let{hasChanged:t,count:r}=tV(tL,e.name,e.value,e.prevValue);t&&(n=!0,c.changes.add(e.name),c.changesCounts.set(e.name,r))}return n||r||(a.changes.clear(),i.changes.clear(),c.changes.clear()),{data:{fiberProps:a,fiberState:i,fiberContext:c},shouldUpdate:n||r}},t0=new WeakMap,t1=e=>{if(!e)return new Map;let t=t0.get(e);if(t)return t;let n=new Map,r=e;for(;r;){let e=r.dependencies;if(e?.firstContext){let t=e.firstContext;for(;t;){let e=t.memoizedValue,r=t.context?.displayName;if(n.has(e)||n.set(t.context,{value:e,displayName:r??"UnnamedContext",contextType:null}),t===t.next)break;t=t.next}}r=r.return}return t0.set(e,n),n},t2=e=>{let t=()=>({current:[],changes:new Set,changesCounts:new Map});
21if(!e)return{fiberProps:t(),fiberState:t(),fiberContext:t()};let n=t();if(e.memoizedProps){let{current:t,changes:r}=tq(e);for(let[e,r]of Object.entries(t))n.current.push({name:e,value:tj(r)?{type:"promise",displayValue:"Promise"}:r});for(let e of r)n.changes.add(e.name),n.changesCounts.set(e.name,1)}let r=t();if(e.memoizedState){let{current:t,changes:n}=tG(e);for(let[e,n]of Object.entries(t))r.current.push({name:e,value:tj(n)?{type:"promise",displayValue:"Promise"}:n});for(let e of n)r.changes.add(e.name),r.changesCounts.set(e.name,1)}let a=t(),{current:i,changes:o}=tK(e);for(let[e,t]of Object.entries(i))a.current.push({name:e,value:tj(t)?{type:"promise",displayValue:"Promise"}:t});for(let e of o)a.changes.add(e.name),a.changesCounts.set(e.name,1);return{fiberProps:n,fiberState:r,fiberContext:a}},t4=0,t5=performance.now(),t3=0,t6=!1,t8=()=>{t3++;let e=performance.now();e-t5>=1e3&&(t4=t3,t3=0,t5=e),requestAnimationFrame(t8)},t7=()=>(t6||(t6=!0,t8(),t4=60),t4),t9=(e,t)=>nn(e)===nn(t)&&ne.includes(typeof e)&&ne.includes(typeof t),ne=["function","object"],nt=new WeakMap;function nn(e,t=0){if(t<0)return"â¦";switch(typeof e){case"function":return e.toString();case"string":return e;case"number":case"boolean":case"undefined":default:return String(e);case"object":}if(null===e)return"null";if(nt.has(e)){let t=nt.get(e);if(void 0!==t)return t}if(Array.isArray(e)){let t=e.length?`[${e.length}]`:"[]";return nt.set(e,t),t}if((0,d.l$)(e)){let t=(0,l.Gf)(e.type)??"",n=e.props?Object.keys(e.props).length:0,r=`<${t} ${n}>`;return nt.set(e,r),r}if(Object.getPrototypeOf(e)===Object.prototype){let t=Object.keys(e),n=t.length?`{${t.length}}`:"{}";return nt.set(e,n),n}let n=e&&"object"==typeof e?e.constructor:void 0;if(n&&"function"==typeof n&&n.name){let t=`${n.name}{\u2026}`;return nt.set(e,t),t}let r=Object.prototype.toString.call(e).slice(8,-1),a=`${r}{\u2026}`;return nt.set(e,a),a}var nr=e=>{if(!e)return[];let t=[];if(e.tag===l.wk||e.tag===l.bI||e.tag===l.$K||e.tag===l.IN){let n=e.memoizedState,r=e.alternate?.memoizedState,a=0;for(;n;){if(n.queue&&void 0!==n.memoizedState){let e={type:2,name:a.toString(),value:n.memoizedState,prevValue:r?.memoizedState};g(e.prevValue,e.value)||t.push(e)}n=n.next,r=r?.next,a++}return t}if(e.tag===l.lb){let n={type:3,name:"state",value:e.memoizedState,prevValue:e.alternate?.memoizedState};g(n.prevValue,n.value)||t.push(n)}return t},na=0,ni=new WeakMap,no=e=>ni.get(e)||(na++,ni.set(e,na),na);function ns(e,t){if(!e||!t)return;let n=e.memoizedValue,r={type:4,name:e.context.displayName??"Context.Provider",value:n,contextType:no(e.context)};this.push(r)}var nl=e=>{let t=[];return(0,l.S)(e,ns.bind(t)),t},nc=new Map,nd=!1,nu=()=>Array.from(nc.values()),np=new WeakMap,nh=(e,t,n,r,a)=>{let i=Date.now(),o=np.get(e);if((r||a)&&(!o||i-(o.lastRenderTimestamp||0)>16)){let r=o||{selfTime:0,totalTime:0,renderCount:0,lastRenderTimestamp:i};r.renderCount=(r.renderCount||0)+1,r.selfTime=t||0,r.totalTime=n||0,r.lastRenderTimestamp=i,np.set(e,{...r})}},nm=(e,t)=>{let n={isPaused:(0,c.td)(!il.options.value.enabled),fiberRoots:new WeakSet};return nc.set(e,{key:e,config:t,instrumentation:n}),nd||(nd=!0,(0,l.x6)({name:"react-scan",onActive:t.onActive,onCommitFiberRoot(e,t){n.fiberRoots.add(t);let r=nu();for(let e of r)e.config.onCommitStart();for(let e of((0,l.kZ)(t.current,(e,t)=>{let n=(0,l.oL)(e.type);if(!n)return null;let r=nu(),a=[];for(let t=0,n=r.length;t<n;t++)r[t].config.isValidFiber(e)&&a.push(t);if(!a.length)return null;let i=[];if(r.some(e=>e.config.trackChanges)){let t=tq(e).changes,n=tG(e).changes,r=tK(e).changes;for(let r of(i.push.apply(null,t.map(e=>({type:1,name:e.name,value:e.value}))),n))e.tag===l.lb?i.push({type:3,name:r.name.toString(),value:r.value}):i.push({type:2,name:r.name.toString(),value:r.value});i.push.apply(null,r.map(e=>({type:4,name:e.name,value:e.value,contextType:Number(e.contextType)})))}let{selfTime:o,totalTime:s}=(0,l.nx)(e),c=t7(),d={phase:b[t],componentName:(0,l.Gf)(n),count:1,changes:i,time:o,forget:(0,l.bC)(e),unnecessary:null,didCommit:(0,l.RG)(e),fps:c},u=i.length>0,p=(0,l.v2)(e).length>0;"update"===t&&nh(n,o,s,u,p);for(let t=0,n=a.length;t<n;t++)r[a[t]].config.onRender(e,[d])}),r))e.config.onCommitFinish()},onPostCommitFiberRoot(){for(let e of nu())e.config.onPostCommitFiberRoot()}})),n},nf=e=>{let t=new Map;for(let n=0,r=e.length;n<r;n++){let r=e[n];if(!r.componentName)continue;let a=t.get(r.componentName)??[],i=f([{aggregatedCount:1,computedKey:null,name:r.componentName,frame:null,...r,changes:{type:r.changes.reduce((e,t)=>
21e|t.type,0),unstable:r.changes.some(e=>e.unstable)},phase:r.phase,computedCurrent:null}]);if(!i)continue;let o=null,s=null;if(r.changes)for(let e=0,t=r.changes.length;e<t;e++){let{name:t,prevValue:n,nextValue:i,unstable:l,type:c}=r.changes[e];1===c?(s??={},(o??={})[`${l?"â ï¸":""}${t} (prev)`]=n,s[`${l?"â ï¸":""}${t} (next)`]=i):a.push({prev:n,next:i,type:4===c?"context":"state",unstable:l??!1})}o&&s&&a.push({prev:o,next:s,type:"props",unstable:!1}),t.set(i,a)}for(let[e,n]of Array.from(t.entries())){for(let{type:t,prev:r,next:a,unstable:i}of(console.group(`%c${e}`,"background: hsla(0,0%,70%,.3); border-radius:3px; padding: 0 2px;"),n))console.log(`${t}:`,i?"â ï¸":"",r,"!==",a);console.groupEnd()}},ng=()=>{if(window.hideIntro){window.hideIntro=void 0;return}console.log("%c[\xb7] %cReact Scan","font-weight:bold;color:#7a68e8;font-size:20px;","font-weight:bold;font-size:14px;"),console.log("Try React Scan Monitoring to target performance issues in production: https://react-scan.com/monitoring")},nw=(e,t)=>Math.floor(e+(t-e)*.1),nx="115,97,230";function nb(e,t){return t[0]-e[0]}function nv([e,t]){let n=`${t.slice(0,4).join(", ")} \xd7${e}`;return n.length>40&&(n=`${n.slice(0,40)}\u2026`),n}var ny=e=>{let t=new Map;for(let{name:n,count:r}of e)t.set(n,(t.get(n)||0)+r);let n=new Map;for(let[e,r]of t){let t=n.get(r);t?t.push(e):n.set(r,[e])}let r=[...n.entries()].sort(nb),a=nv(r[0]);for(let e=1,t=r.length;e<t;e++)a+=", "+nv(r[e]);return a.length>40?`${a.slice(0,40)}\u2026`:a},nk=e=>{let t=0;for(let n of e)t+=n.width*n.height;return t},nN=(e,t)=>{for(let{id:n,name:r,count:a,x:i,y:o,width:s,height:l,didCommit:c}of t){let t={id:n,name:r,count:a,x:i,y:o,width:s,height:l,frame:0,targetX:i,targetY:o,targetWidth:s,targetHeight:l,didCommit:c},d=String(t.id),u=e.get(d);u?(u.count++,u.frame=0,u.targetX=i,u.targetY=o,u.targetWidth=s,u.targetHeight=l,u.didCommit=c):e.set(d,t)}},nz=(e,t,n)=>{for(let r of e.values()){let e=r.x-t,a=r.y-n;r.targetX=e,r.targetY=a}},nZ=(e,t)=>{let n=e.getContext("2d",{alpha:!0});return n&&n.scale(t,t),n},nS=(e,t,n,r)=>{e.clearRect(0,0,t.width/n,t.height/n);let a=new Map,i=new Map;for(let e of r.values()){let{x:t,y:n,width:r,height:o,targetX:s,targetY:l,targetWidth:c,targetHeight:d,frame:u}=e;s!==t&&(e.x=nw(t,s)),l!==n&&(e.y=nw(n,l)),c!==r&&(e.width=nw(r,c)),d!==o&&(e.height=nw(o,d));let p=`${s??t},${l??n}`,h=`${p},${c??r},${d??o}`,m=a.get(p);m?m.push(e):a.set(p,[e]);let f=1-u/45;e.frame++;let g=i.get(h)||{x:t,y:n,width:r,height:o,alpha:f};f>g.alpha&&(g.alpha=f),i.set(h,g)}for(let{x:t,y:n,width:r,height:a,alpha:o}of i.values())e.strokeStyle=`rgba(${nx},${o})`,e.lineWidth=1,e.beginPath(),e.rect(t,n,r,a),e.stroke(),e.fillStyle=`rgba(${nx},${.1*o})`,e.fill();e.font="11px Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";let o=new Map;for(let t of(e.textRendering="optimizeSpeed",a.values())){let{x:n,y:a,frame:i}=t[0],s=1-i/45,l=ny(t),{width:c}=e.measureText(l);o.set(`${n},${a},${c},${l}`,{text:l,width:c,height:11,alpha:s,x:n,y:a,outlines:t});let d=a-11-4;if(d<0&&(d=0),i>45)for(let e of t)r.delete(String(e.id))}for(let[t,n]of Array.from(o.entries()).sort(([e,t],[n,r])=>nk(r.outlines)-nk(t.outlines)))if(o.has(t))for(let[r,a]of o.entries()){if(t===r)continue;let{x:i,y:s,width:l,height:c}=n,{x:d,y:u,width:p,height:h}=a;i+l>d&&d+p>i&&s+c>u&&u+h>s&&(n.text=ny(n.outlines.concat(a.outlines)),n.width=e.measureText(n.text).width,o.delete(r))}for(let t of o.values()){let{x:n,y:r,alpha:a,width:i,height:o,text:s}=t,l=r-o-4;l<0&&(l=0),e.fillStyle=`rgba(${nx},${a})`,e.fillRect(n,l,i+4,o+4),e.fillStyle=`rgba(255,255,255,${a})`,e.fillText(s,n+2,l+o)}return r.size>0},nT=null,nC=null,nE=null,nA=1,nX=null,nM=new Map,nB=new Map,n$=new Set,nF=e=>{if(!(0,l.Iz)(e))return;let t="string"==typeof e.type?e.type:(0,l.Gf)(e);if(!t)return;let n=nB.get(e),r=(0,l.G8)(e),a=(0,l.RG)(e);n?n.count++:(nB.set(e,{name:t,count:1,elements:r.map(e=>e.stateNode),didCommit:a?1:0}),n$.add(e))},nR=e=>{let t,n,r,a;let i=e[0];if(1===e.length)return i;for(let i=0,o=e.length;i<o;i++){let o=e[i];t=null==t?o.x:Math.min(t,o.x),n=null==n?o.y:Math.min(n,o.y),r=null==r?o.x+o.width:Math.max(r,o.x+o.width),a=null==a?o.y+o.height:Math.max(a,o.y+o.height)}return null==t||null==n||null==r||null==a?e[0]:new DOMRect(t,n,r-t,a-n)};function nI(e,t){let n=[];for(let t of e){let e=t.target;this.seenElements.has(e)||(this.seenElements.add(e),n.push(t))}n.length>0&&this.resolveNext&&(this.resolveNext(n),this.resolveNext=null),this.seenElements.size===this.uniqueElements.size&&(t.disconnect(),this.done=!0,this.resolveNext&&this.resolveNext([]))}var nj=async function*(e){let t={uniqueElements:new Set(e),seenElements:new Set,resolveNext:null,done:!1},n=new IntersectionObserver(nI.bind(t));for(let e of t.uniqueElements)n.observe(e);for(;!t.done;){let e=await new Promise(e=>{t.resolveNext=e});e.length>0&&(yield e)}},nD="undefined"!=typeof SharedArrayBuffer?SharedArrayBuffer:ArrayBuffer,nO=async()=>{let e=[];for(let t of n$){let n=nB.get(t);if(n)for(let t=0;t<n.elements.length;t++)n.elements[t]instanceof Element&&e.push(n.elements[t])}let t=new Map;for await(let n of nj(e)){for(let e of n){let n=e.target,r=e.intersectionRect;
21e.isIntersecting&&r.width&&r.height&&t.set(n,r)}let e=[],r=[],a=[];for(let n of n$){let i=nB.get(n);if(!i)continue;let o=[];for(let e=0;e<i.elements.length;e++){let n=i.elements[e],r=t.get(n);r&&o.push(r)}o.length&&(e.push(i),r.push(nR(o)),a.push((0,l.Sv)(n)))}if(e.length>0){let t;let n=new nD(28*e.length),i=new Float32Array(n),o=Array(e.length);for(let n=0,s=e.length;n<s;n++){let s=e[n],l=a[n],{x:c,y:d,width:u,height:p}=r[n],{count:h,name:m,didCommit:f}=s;if(nT){let e=7*n;i[e]=l,i[e+1]=h,i[e+2]=c,i[e+3]=d,i[e+4]=u,i[e+5]=p,i[e+6]=f,o[n]=m}else(t||=Array(e.length))[n]={id:l,name:m,count:h,x:c,y:d,width:u,height:p,didCommit:f}}nT?nT.postMessage({type:"draw-outlines",data:n,names:o}):nC&&nE&&t&&(nN(nM,t),nX||(nX=requestAnimationFrame(nP)))}}for(let e of n$)nB.delete(e),n$.delete(e)},nP=()=>{nE&&nC&&(nX=nS(nE,nC,nA,nM)?requestAnimationFrame(nP):null)},nL="undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof Worker,nY=()=>Math.min(window.devicePixelRatio||1,2),nH=()=>{nU();let e=document.createElement("div");e.setAttribute("data-react-scan","true");let t=e.attachShadow({mode:"open"}),n=document.createElement("canvas");if(n.style.position="fixed",n.style.top="0",n.style.left="0",n.style.pointerEvents="none",n.style.zIndex="2147483646",n.setAttribute("aria-hidden","true"),t.appendChild(n),!n)return null;nA=nY(),nC=n;let{innerWidth:r,innerHeight:a}=window;n.style.width=`${r}px`,n.style.height=`${a}px`;let i=r*nA,o=a*nA;if(n.width=i,n.height=o,nL&&!window.__REACT_SCAN_EXTENSION__)try{nT=new Worker(URL.createObjectURL(new Blob(['"use strict";(()=>{var D="Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace";var M=(t,i)=>Math.floor(t+(i-t)*.1);var _="115,97,230";function F(t,i){return i[0]-t[0]}function I(t){return[...t.entries()].sort(F)}function $([t,i]){let o=`${i.slice(0,4).join(", ")} \\xD7${t}`;return o.length>40&&(o=`${o.slice(0,40)}\\u2026`),o}var S=t=>{let i=new Map;for(let{name:e,count:u}of t)i.set(e,(i.get(e)||0)+u);let o=new Map;for(let[e,u]of i){let A=o.get(u);A?A.push(e):o.set(u,[e])}let h=I(o),s=$(h[0]);for(let e=1,u=h.length;e<u;e++)s+=", "+$(h[e]);return s.length>40?`${s.slice(0,40)}\\u2026`:s},X=t=>{let i=0;for(let o of t)i+=o.width*o.height;return i};var N=(t,i)=>{let o=t.getContext("2d",{alpha:!0});return o&&o.scale(i,i),o},Y=(t,i,o,h)=>{t.clearRect(0,0,i.width/o,i.height/o);let s=new Map,e=new Map;for(let n of h.values()){let{x:r,y:c,width:a,height:g,targetX:l,targetY:d,targetWidth:f,targetHeight:p,frame:O}=n;l!==r&&(n.x=M(r,l)),d!==c&&(n.y=M(c,d)),f!==a&&(n.width=M(a,f)),p!==g&&(n.height=M(g,p));let w=`${l??r},${d??c}`,y=`${w},${f??a},${p??g}`,v=s.get(w);v?v.push(n):s.set(w,[n]);let E=1-O/45;n.frame++;let x=e.get(y)||{x:r,y:c,width:a,height:g,alpha:E};E>x.alpha&&(x.alpha=E),e.set(y,x)}for(let{x:n,y:r,width:c,height:a,alpha:g}of e.values())t.strokeStyle=`rgba(${_},${g})`,t.lineWidth=1,t.beginPath(),t.rect(n,r,c,a),t.stroke(),t.fillStyle=`rgba(${_},${g*.1})`,t.fill();t.font=`11px ${D}`;let u=new Map;t.textRendering="optimizeSpeed";for(let n of s.values()){let r=n[0],{x:c,y:a,frame:g}=r,l=1-g/45,d=S(n),{width:f}=t.measureText(d),p=11;u.set(`${c},${a},${f},${d}`,{text:d,width:f,height:p,alpha:l,x:c,y:a,outlines:n});let O=a-p-4;if(O<0&&(O=0),g>45)for(let w of n)h.delete(String(w.id))}let A=Array.from(u.entries()).sort(([n,r],[c,a])=>X(a.outlines)-X(r.outlines));for(let[n,r]of A)if(u.has(n))for(let[c,a]of u.entries()){if(n===c)continue;let{x:g,y:l,width:d,height:f}=r,{x:p,y:O,width:w,height:y}=a;g+d>p&&p+w>g&&l+f>O&&O+y>l&&(r.text=S(r.outlines.concat(a.outlines)),r.width=t.measureText(r.text).width,u.delete(c))}for(let n of u.values()){let{x:r,y:c,alpha:a,width:g,height:l,text:d}=n,f=c-l-4;f<0&&(f=0),t.fillStyle=`rgba(${_},${a})`,t.fillRect(r,f,g+4,l+4),t.fillStyle=`rgba(255,255,255,${a})`,t.fillText(d,r+2,f+l)}return h.size>0};var m=null,L=null,b=1,T=new Map,C=null,R=()=>{if(!L||!m)return;Y(L,m,b,T)?C=requestAnimationFrame(R):C=null};self.onmessage=t=>{let{type:i}=t.data;if(i==="init"&&(m=t.data.canvas,b=t.data.dpr,m&&(m.width=t.data.width,m.height=t.data.height,L=N(m,b))),!(!m||!L)){if(i==="resize"){b=t.data.dpr,m.width=t.data.width*b,m.height=t.data.height*b,L.resetTransform(),L.scale(b,b),R();return}if(i==="draw-outlines"){let{data:o,names:h}=t.data,s=new Float32Array(o);for(let e=0;e<s.length;e+=7){let u=s[e+2],A=s[e+3],n=s[e+4],r=s[e+5],c=s[e+6],a={id:s[e],name:h[e/7],count:s[e+1],x:u,y:A,width:n,height:r,frame:0,targetX:u,targetY:A,targetWidth:n,targetHeight:r,didCommit:c},g=String(a.id),l=T.get(g);l?(l.count++,l.frame=0,l.targetX=u,l.targetY=A,l.targetWidth=n,l.targetHeight=r,l.didCommit=c):T.set(g,a)}C||(C=requestAnimationFrame(R));return}if(i==="scroll"){let{deltaX:o,deltaY:h}=t.data;for(let s of T.values()){let e=s.x-o,u=s.y-h;s.targetX=e,s.targetY=u}}}};})();\n'],{type:"application/javascript"})));let e=n.transferControlToOffscreen();nT?.postMessage({type:"init",canvas:e,width:n.width,height:n.height,dpr:nA},[e])}catch(e){console.warn("Failed to initialize OffscreenCanvas worker:",e)}nT||(nE=nZ(n,nA));let s=!1;window.addEventListener("resize",()=>{s||(s=!0,setTimeout(()=>{let e=window.innerWidth,t=window.innerHeight;nA=nY(),n.style.width=`${e}px`,n.style.height=`${t}px`,nT?nT.postMessage({type:"resize",width:e,height:t,dpr:nA}):(n.width=e*nA,n.height=t*nA,nE&&(nE.resetTransform(),nE.scale(nA,nA)),nP()),s=!1}))});let l=window.scrollX,c=window.scrollY,d=!1;return window.addEventListener("scroll",()=>{d||(d=!0,setTimeout(()=>{let{scrollX:e,scrollY:t}=window,n=e-l,r=t-c;l=e,c=t,nT?nT.postMessage({type:"scroll",deltaX:n,deltaY:r}):requestAnimationFrame(nz.bind(null,nM,n,r)),d=!1},32))}),setInterval(()=>{n$.size&&requestAnimationFrame(nO)},32),t.appendChild(n),e},n_=()=>globalThis.__REACT_SCAN_STOP__,nU=()=>{let e=document.querySelector("[data-react-scan]");e&&e.remove()},nW=e=>{if((0,l.Iz)(e)&&!1!==il.options.value.showToolbar&&"focused"===is.inspectState.value.kind){let{selfTime:t}=(0,l.nx)(e),n=(0,l.Gf)(e.type),r=(0,l.Sv)(e),a=is.reportData.get(r),i=a?.count??0,o=a?.time??0,s=is.changesListeners.get((0,l.Sv)(e));if(s?.length){let t=tT(e).map(e=>({type:1,name:e.name,value:e.value,prevValue:e.prevValue,unstable:!1})),n=nr(e),r=nl(e).map(e=>({name:e.name,type:4,value:e.value,contextType:e.contextType}));
21s.forEach(e=>{e({propsChanges:t,stateChanges:n,contextChanges:r})})}let c={count:i+1,time:o+t||0,renders:[],displayName:n,type:(0,l.oL)(e.type)||null,changes:[]};is.reportData.set(r,c),nV=!0}},nV=!1,nJ=()=>{clearInterval(r),r=setInterval(()=>{nV&&(is.lastReportTime.value=Date.now(),nV=!1)},50)},nq=e=>!ik.has(e.memoizedProps),nG=e=>{let t;if(n_())return;let n=!1,r=()=>{n||(t&&cancelAnimationFrame(t),t=requestAnimationFrame(()=>{n=!0;let t=nH();t&&document.documentElement.appendChild(t),e()}))},a=nm("react-scan-devtools-0.1.0",{onCommitStart:()=>{il.options.value.onCommitStart?.()},onActive:()=>{n_()||(r(),window.__REACT_SCAN_EXTENSION__||(globalThis.__REACT_SCAN__={ReactScanInternals:il}),nJ(),ng())},onError:()=>{},isValidFiber:nq,onRender:(e,t)=>{(0,l.Iz)(e)&&is.interactionListeningForRenders?.(e,t);let n=il.instrumentation?.isPaused.value,r="inspect-off"===is.inspectState.value.kind||"uninitialized"===is.inspectState.value.kind;n&&r||(n||nF(e),il.options.value.log&&nf(t),"focused"===is.inspectState.value.kind&&(eI.value=Date.now()),r||nW(e),il.options.value.onRender?.(e,t))},onCommitFinish:()=>{r(),il.options.value.onCommitFinish?.()},onPostCommitFiberRoot(){r()},trackChanges:!1});il.instrumentation=a},nK=(e,t,n=t)=>{let[r,a]=(0,u.eJ)(e);return(0,u.d4)(()=>{if(e===r)return;let i=setTimeout(()=>a(e),e?t:n);return()=>clearTimeout(i)},[e,t,n]),r},nQ=(0,c.Fl)(()=>ew("absolute inset-0 flex items-center gap-x-2","translate-y-0","transition-transform duration-300",ek.value&&"-translate-y-[200%]")),n0=()=>{let e=(0,u.sO)(null),t=(0,u.sO)(null),[n,r]=(0,u.eJ)(null);(0,c.bF)(()=>{let e=is.inspectState.value;"focused"===e.kind&&r(e.fiber)}),(0,c.bF)(()=>{let n=eR.value;(0,c.rg)(()=>{let r;if("focused"!==is.inspectState.value.kind||!e.current||!t.current)return;let{totalUpdates:a,currentIndex:i,updates:o,isVisible:s,windowOffset:l}=n,c=Math.max(0,a-1),d=s?`#${l+i} Re-render`:c>0?`\xd7${c}`:"";if(c>0&&i>=0&&i<o.length){let e=o[i]?.fiberInfo?.selfTime;r=e>0?e<.1-Number.EPSILON?"< 0.1ms":`${Number(e.toFixed(1))}ms`:void 0}e.current.dataset.text=d?` \u2022 ${d}`:"",t.current.dataset.text=r?` \u2022 ${r}`:""})});let a=(0,u.Ye)(()=>{if(!n)return null;let{name:e,wrappers:t,wrapperTypes:r}=ey(n),a=t.length?`${t.join("(")}(${e})${")".repeat(t.length)}`:e??"",i=r[0];return(0,h.BX)("span",{title:a,className:"flex items-center gap-x-1",children:[e??"Unknown",(0,h.tZ)("span",{title:i?.title,className:"flex items-center gap-x-1 text-[10px] text-purple-400",children:!!i&&(0,h.BX)(h.HY,{children:[(0,h.tZ)("span",{className:ew("rounded py-[1px] px-1","truncate",i.compiler&&"bg-purple-800 text-neutral-400",!i.compiler&&"bg-neutral-700 text-neutral-300","memo"===i.t
21ype&&"bg-[#5f3f9a] text-white"),children:i.type},i.type),i.compiler&&(0,h.tZ)("span",{className:"text-yellow-300",children:"â¨"})]})}),r.length>1&&(0,h.BX)("span",{className:"text-[10px] text-neutral-400",children:["\xd7",r.length-1]})]})},[n]);return(0,h.BX)("div",{className:nQ,children:[a,(0,h.BX)("div",{className:"flex items-center gap-x-2 mr-auto text-xs text-[#888]",children:[(0,h.tZ)("span",{ref:e,className:"with-data-text cursor-pointer !overflow-visible",title:"Click to toggle between rerenders and total renders"}),(0,h.tZ)("span",{ref:t,className:"with-data-text !overflow-visible"})]})]})},n1=()=>{let e=nK("focused"===is.inspectState.value.kind,150,0);if("notifications"!==eT.value.view)return(0,h.BX)("div",{className:"react-scan-header",children:[(0,h.tZ)("div",{className:"relative flex-1 h-full",children:(0,h.tZ)("div",{className:ew("react-scan-header-item is-visible",!e&&"!duration-0"),children:(0,h.tZ)(n0,{})})}),(0,h.tZ)("button",{type:"button",title:"Close",className:"react-scan-close-button",onClick:()=>{eT.value={view:"none"},is.inspectState.value={kind:"inspect-off"}},children:(0,h.tZ)(v,{name:"icon-close"})})]})},n2=({className:e,...t})=>(0,h.BX)("div",{className:ew("react-scan-toggle",e),children:[(0,h.tZ)("input",{type:"checkbox",...t}),(0,h.tZ)("div",{})]}),n4=({fps:e})=>(0,h.BX)("div",{className:ew("flex items-center gap-x-1 px-2 w-full","h-6","rounded-md","font-mono leading-none","bg-[#141414]","ring-1 ring-white/[0.08]"),children:[(0,h.tZ)("div",{style:{color:e<30?"#EF4444":e<50?"#F59E0B":"rgb(214,132,245)"},className:"text-sm font-semibold tracking-wide transition-colors ease-in-out w-full flex justify-center items-center",children:e}),(0,h.tZ)("span",{className:"text-white/30 text-[11px] font-medium tracking-wide ml-auto min-w-fit",children:"FPS"})]}),n5=()=>{let[e,t]=(0,u.eJ)(null);return(0,u.d4)(()=>{let e=setInterval(()=>{t(t7())},200);return()=>clearInterval(e)},[]),(0,h.tZ)("div",{className:ew("flex items-center justify-end gap-x-2 px-1 ml-1 w-[72px]","whitespace-nowrap text-sm text-white"),children:null===e?(0,h.tZ)(h.HY,{children:"ï¸"}):(0,h.tZ)(n4,{fps:e})})};N&&(window.Cypress||navigator.webdriver);var n3=()=>N?(void 0===window.reactScanIdCounter&&(window.reactScanIdCounter=0),`${++window.reactScanIdCounter}
21`):"0",n6=e=>{},n8=e=>e(),n7=class e extends Array{constructor(e=25){super(),this.capacity=e}push(...e){let t=super.push(...e);for(;this.length>this.capacity;)this.shift();return t}static fromArray(t,n){let r=new e(n);return r.push(...t),r}},n9=new class{constructor(e){this.subscribers=new Set,this.currentValue=e}subscribe(e){return this.subscribers.add(e),e(this.currentValue),()=>{this.subscribers.delete(e)}}setState(e){this.currentValue=e,this.subscribers.forEach(t=>t(e))}getCurrentState(){return this.currentValue}}(new n7(150)),re=new class{constructor(){this.channels={}}publish(e,t,n=!0){let r=this.channels[t];if(!r){if(!n)return;this.channels[t]={callbacks:new n7(50),state:new n7(50)},this.channels[t].state.push(e);return}r.state.push(e),r.callbacks.forEach(t=>t(e))}getAvailableChannels(){return n7.fromArray(Object.keys(this.channels),50)}subscribe(e,t,n=!1){let r=this.channels[e];return r?r.callbacks.push(t):(this.channels[e]={callbacks:new n7(50),state:new n7(50)},this.channels[e].callbacks.push(t)),n||this.channels[e].state.forEach(e=>{t(e)}),()=>{let n=this.channels[e].callbacks.filter(e=>e!==t);this.channels[e].callbacks=n7.fromArray(n,50)}}updateChannelState(e,t,n=!0){let r=this.channels[e];if(!r){if(!n)return;let r=new n7(50),a={callbacks:new n7(50),state:r};this.channels[e]=a,a.state=t(r);return}r.state=t(r.state)}getChannelState(e){return this.channels[e].state??new n7(50)}},rt={skipProviders:!0,skipHocs:!0,skipContainers:!0,skipMinified:!0,skipUtilities:!0,skipBoundaries:!0},rn={providers:[/Provider$/,/^Provider$/,/^Context$/],hocs:[/^with[A-Z]/,/^forward(?:Ref)?$/i,/^Forward(?:Ref)?\(/],containers:[/^(?:App)?Container$/,/^Root$/,/^ReactDev/],utilities:[/^Fragment$/,/^Suspense$/,/^ErrorBoundary$/,/^Portal$/,/^Consumer$/,/^Layout$/,/^Router/,/^Hydration/],boundaries:[/^Boundary$/,/Boundary$/,/^Provider$/,/Provider$/]},rr=(e,t=rt)=>{let n=[];return t.skipProviders&&n.push(...rn.providers),t.skipHocs&&n.push(...rn.hocs),t.skipContainers&&n.push(...rn.containers),t.skipUtilities&&n.push(...rn.utilities),t.skipBoundaries&&n.push(...rn.boundaries),!n.some(t=>t.test(e))},ra=[/^[a-z]$/,/^[a-z][0-9]$/,/^_+$/,/^[A-Za-z][_$]$/,/^[a-z]{1,2}$/],ri=e=>{for(let t=0;t<ra.length;t++)if(ra[t].test(e))return!0;let t=!/[aeiou]/i.test(e),n=(e.match(/\d/g)?.length??0)>e.length/2,r=/^[a-z]+$/.test(e),a=/[$_]{2,}/.test(e);return Number(t)+Number(n)+Number(r)+Number(a)>=2},ro=(e,t=rt)=>{if(!e||!(0,l.Gf)(e.type))return[];let n=[],r=e;for(;r.return;){let e=rs(r.type);e&&!ri(e)&&rr(e,t)&&e.toLowerCase()!==e&&n.push(e),r=r.return}let a=Array(n.length);for(let e=0;e<n.length;e++)a[e]=n[n.length-e-1];return a},rs=e=>{let t=(0,l.Gf)(e);return t?t.replace(/^(?:Memo|Forward(?:Ref)?|With.*?)\((?<inner>.*?)\)$/,"$<inner>"):""},rl=(e,t=()=>!0)=>{let n=e;for(;n;){let e=(0,l.Gf)(n.type);if(e&&t(e))return e;n=n.return}return null},rc="never-hidden",rd=()=>{a?.();let e=()=>{document.hidden&&(rc=Date.now())};document.addEventListener("visibilitychange",e),a=()=>{document.removeEventListener("visibilitychange",e)}},ru=e=>["pointerup","click"].includes(e)?"pointer":(e.includes("key"),["keydown","keyup"].includes(e))?"keyboard":null,rp=null,rh=e=>{rd();let t=new Map,n=new Map,r=r=>{if(!r.interactionId)return;if(r.interactionId&&r.target&&!n.has(r.interactionId)&&n.set(r.interactionId,r.target),r.target){let e=r.target;for(;e;){if("react-scan-toolbar-root"===e.id||"react-scan-root"===e.id)return;e=e.parentElement}}let a=t.get(r.interactionId);if(a)r.duration>a.latency?(a.entries=[r],a.latency=r.duration):r.duration===a.latency&&r.startTime===a.entries[0].startTime&&a.entries.push(r);else{let n=ru(r.name);if(!n)return;let a={id:r.interactionId,latency:r.duration,entries:[r],target:r.target,type:n,startTime:r.startTime,endTime:Date.now(),processingStart:r.processingStart,processingEnd:r.processingEnd,duration:r.duration,inputDelay:r.processingStart-r.startTime,processingDuration:r.processingEnd-r.processingStart,presentationDelay:r.duration-(r.processingEnd-r.startTime),timestamp:Date.now(),timeSinceTabInactive:"never-hidden"===rc?"never-hidden":Date.now()-rc,visibilityState:document.visibilityState,timeOrigin:performance.timeOrigin,referrer:document.referrer};t.set(a.id,a),rp||(rp=requestAnimationFrame(()=>{requestAnimationFrame(()=>{e(t.get(a.id)),rp=null})}))}},a=new PerformanceObserver(e=>{let t=e.getEntries();for(let e=0,n=t.length;e<n;e++)r(t[e])});try{a.observe({type:"event",buffered:!0,durationThreshold:16}),a.observe({type:"first-input",buffered:!0})}catch{}return()=>a.disconnect()},rm=()=>rh(e=>{re.publish({kind:"entry-received",entry:e},"recording")}),rf=new n7(25),rg=(e,t)=>{let n=null;for(let r of t){if(r.type!==e.type)continue;if(null===n){n=r;continue}let t=(e,t)=>Math.abs(e.startDateTime)-(t.startTime+t.timeOrigin);t(r,e)<t(n,e)&&(n=r)}return n},rw=e=>re.subscribe("recording",t=>{let n="auto-complete-race"===t.kind?rf.find(e=>e.interactionUUID===t.interactionUUID):rg(t.entry,rf);n&&e(n.completeInteraction(t))}),rx=({onMicroTask:e,onRAF:t,onTimeout:n,abort:r})=>{queueMicrotask(()=>{r?.()!==!0&&e()&&requestAnimationFrame(()=>{r?.()!==!0&&t()&&setTimeout(()=>{r?.()!==!0&&n()},0)})})},rb=e=>{let t=tb(e);if(!t)return;let n=t?(0,l.Gf)(t?.type):"N/A";if(n||(n=rl(t,e=>e.length>2)??"N/A"),n)return{componentPath:ro(t),childrenTree:{},componentName:n}},rv=(e,t)=>
21{let n=null,r=t=>{switch(e){case"pointer":if("start"===t.phase)return"pointerup";if(t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement)return"change";return"click";case"keyboard":if("start"===t.phase)return"keydown";return"change"}},a={current:{kind:"uninitialized-stage",interactionUUID:n3(),stageStart:Date.now(),interactionType:e}},i=n=>{if(n.composedPath().some(e=>e instanceof Element&&"react-scan-toolbar-root"===e.id)||(Date.now()-a.current.stageStart>2e3&&(a.current={kind:"uninitialized-stage",interactionUUID:n3(),stageStart:Date.now(),interactionType:e}),"uninitialized-stage"!==a.current.kind))return;let i=performance.now();t?.onStart?.(a.current.interactionUUID);let s=rb(n.target);if(!s){t?.onError?.(a.current.interactionUUID);return}let l={},c=rN(l);a.current={...a.current,interactionType:e,blockingTimeStart:Date.now(),childrenTree:s.childrenTree,componentName:s.componentName,componentPath:s.componentPath,fiberRenders:l,kind:"interaction-start",interactionStartDetail:i,stopListeningForRenders:c};let d=r({phase:"end",target:n.target});document.addEventListener(d,o,{once:!0}),requestAnimationFrame(()=>{document.removeEventListener(d,o)})};document.addEventListener(r({phase:"start"}),i,{capture:!0});let o=(r,i,o)=>{if("interaction-start"!==a.current.kind&&i===n){if("pointer"===e&&r.target instanceof HTMLSelectElement){a.current={kind:"uninitialized-stage",interactionUUID:n3(),stageStart:Date.now(),interactionType:e};return}t?.onError?.(a.current.interactionUUID),a.current={kind:"uninitialized-stage",interactionUUID:n3(),stageStart:Date.now(),interactionType:e},n6("pointer -> click");return}n=i,rx({abort:o,onMicroTask:()=>"uninitialized-stage"!==a.current.kind&&(a.current={...a.current,kind:"js-end-stage",jsEndDetail:performance.now()},!0),onRAF:()=>"js-end-stage"!==a.current.kind&&"raf-stage"!==a.current.kind?(t?.onError?.(a.current.interactionUUID),n6("bad transition to raf"),a.current={kind:"uninitialized-stage",interactionUUID:n3(),stageStart:Date.now(),interactionType:e},!1):(a.current={...a.current,kind:"raf-stage",rafStart:performance.now()},!0),onTimeout:()=>{if("raf-stage"!==a.current.kind){t?.onError?.(a.current.interactionUUID),a.current={kind:"uninitialized-stage",interactionUUID:n3(),stageStart:Date.now(),interactionType:e},n6("raf->timeout");return}let n=Date.now(),r=Object.freeze({...a.current,kind:"timeout-stage",blockingTimeEnd:n,commitEnd:performance.now()});a.current={kind:"uninitialized-stage",interactionUUID:n3(),stageStart:n,interactionType:e};let i=!1,o=e=>{i=!0;let n={detailedTiming:r,latency:"auto-complete-race"===e.kind?e.detailedTiming.commitEnd-e.detailedTiming.interactionStartDetail
21:e.entry.latency,completedAt:Date.now(),flushNeeded:!0};t?.onComplete?.(r.interactionUUID,n,e);let a=rf.filter(e=>e.interactionUUID!==r.interactionUUID);return rf=n7.fromArray(a,25),n},s={completeInteraction:o,endDateTime:Date.now(),startDateTime:r.blockingTimeStart,type:e,interactionUUID:r.interactionUUID};if(rf.push(s),rk())setTimeout(()=>{if(i)return;o({kind:"auto-complete-race",detailedTiming:r,interactionUUID:r.interactionUUID});let e=rf.filter(e=>e.interactionUUID!==r.interactionUUID);rf=n7.fromArray(e,25)},1e3);else{let e=rf.filter(e=>e.interactionUUID!==r.interactionUUID);rf=n7.fromArray(e,25),o({kind:"auto-complete-race",detailedTiming:r,interactionUUID:r.interactionUUID})}}})},s=e=>{let t=n3();o(e,t,()=>t!==n)};return"keyboard"===e&&document.addEventListener("keypress",s),()=>{document.removeEventListener(r({phase:"start"}),i,{capture:!0}),document.removeEventListener("keypress",s)}},ry=e=>l.pc(e,e=>{if(l.WT(e))return!0})?.stateNode,rk=()=>"PerformanceEventTiming"in globalThis,rN=e=>{let t=t=>{let n=(0,l.Gf)(t.type);if(!n)return;let r=e[n];if(!r){let r=new Set,a=t.return&&tk(t.return),i=a&&(0,l.Gf)(a[0]);i&&r.add(i);let{selfTime:o,totalTime:s}=(0,l.nx)(t),c=t2(t),d={current:[],changes:new Set,changesCounts:new Map},u={fiberProps:c.fiberProps||d,fiberState:c.fiberState||d,fiberContext:c.fiberContext||d};e[n]={renderCount:1,parents:r,selfTime:o,totalTime:s,nodeInfo:[{element:ry(t),name:(0,l.Gf)(t.type)??"Unknown",selfTime:(0,l.nx)(t).selfTime}],changes:u};return}if(tk(t)?.[0]?.type){let e=t.return&&tk(t.return),n=e&&(0,l.Gf)(e[0]);n&&r.parents.add(n)}let{selfTime:a,totalTime:i}=(0,l.nx)(t),o=t2(t);if(!o)return;let s={current:[],changes:new Set,changesCounts:new Map};r.changes={fiberProps:rz(r.changes?.fiberProps||s,o.fiberProps||s),fiberState:rz(r.changes?.fiberState||s,o.fiberState||s),fiberContext:rz(r.changes?.fiberContext||s,o.fiberContext||s)},r.renderCount+=1,r.selfTime+=a,r.totalTime+=i,r.nodeInfo.push({element:ry(t),name:(0,l.Gf)(t.type)??"Unknown",selfTime:(0,l.nx)(t).selfTime})};return is.interactionListeningForRenders=t,()=>{is.interactionListeningForRenders===t&&(is.interactionListeningForRenders=null)}},rz=(e,t)=>{let n={current:[...e.current],changes:new Set,changesCounts:new Map};for(let e of t.current)n.current.some(t=>t.name===e.name)||n.current.push(e);for(let r of t.changes)if("string"==typeof r||"number"==typeof r){n.changes.add(r);let a=e.changesCounts.get(r)||0,i=t.changesCounts.get(r)||0;n.changesCounts.set(r,a+i)}return n},rZ=e=>{let t;let n=new Set,r=(e,r)=>{let a="function"==typeof e?e(t):e;if(!Object.is(a,t)){let e=t;t=r??("object"!=typeof a||null===a)?a:Object.assign({}
21,t,a),n.forEach(n=>n(t,e))}},a=()=>t,i={setState:r,getState:a,getInitialState:()=>o,subscribe:(e,r)=>{let a,i;r?(a=e,i=r):i=e;let o=a?a(t):void 0,s=(e,t)=>{if(a){let n=a(e),r=a(t);Object.is(o,n)||(o=n,i(n,r))}else i(e,t)};return n.add(s),()=>n.delete(s)}},o=t=e(r,a,i);return i},rS=e=>e?rZ(e):rZ,rT=null;rS()(e=>({state:{events:[]},actions:{addEvent:t=>{e(e=>({state:{events:[...e.state.events,t]}}))},clear:()=>{e({state:{events:[]}})}}}));var rC=rS()((e,t)=>{let n=new Set;return{state:{events:[]},actions:{addEvent:r=>{n.forEach(e=>e(r));let a=[...t().state.events,r],i=(e,t)=>{let n=a.find(t=>{if("long-render"!==t.kind&&t.id!==e.id&&(e.data.startAt<=t.data.startAt&&e.data.endAt<=t.data.endAt&&e.data.endAt>=t.data.startAt||t.data.startAt<=e.data.startAt&&t.data.endAt>=e.data.startAt||e.data.startAt<=t.data.startAt&&e.data.endAt>=t.data.endAt))return!0});n&&t(n)},o=new Set;a.forEach(e=>{"interaction"!==e.kind&&i(e,()=>{o.add(e.id)})});let s=a.filter(e=>!o.has(e.id));e(()=>({state:{events:s}}))},addListener:e=>(n.add(e),()=>{n.delete(e)}),clear:()=>{e({state:{events:[]}})}}}}),rE=()=>(0,p.$N)(rC.subscribe,rC.getState),rA=null,rX=null,rM=null,rB=()=>{let e=e=>{i=e.composedPath().map(e=>e.id).filter(Boolean).includes("react-scan-toolbar")};return document.addEventListener("mouseover",e),rM=e,()=>{rM&&document.removeEventListener("mouseover",rM)}},r$=()=>{let e=()=>{rA=performance.now(),rX=performance.timeOrigin};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}},rF=[],rR=()=>{let e=rm(),t=rB(),n=r$(),r=function(){let e,t;let n=function n(){let r=null;rT=null,r=rN(rT={});let a=performance.timeOrigin,o=performance.now();return e=requestAnimationFrame(()=>{t=setTimeout(()=>{let e=performance.now(),t=e-o,s=performance.timeOrigin;rF.push(e+s);let l=rF.filter(t=>e+s-t<=1e3),c=l.length;rF=l;let d=null!==rA&&null!==rX?e+s-(rX+rA)<100:null,u=null!==i&&i;!(t>150)||d||"visible"!==document.visibilityState||u||rC.getState().actions.addEvent({kind:"long-render",id:n3(),data:{endAt:s+e,startAt:o+a,meta:{fiberRenders:rT,latency:t,fps:c}}}),rA=null,rX=null,r?.(),n()},0)}),r}();return()=>{n(),cancelAnimationFrame(e),clearTimeout(t)}}(),a=async(e,t,n)=>{rC.getState().actions.addEvent({kind:"interaction",id:n3(),data:{startAt:t.detailedTiming.blockingTimeStart,endAt:performance.now()+performance.timeOrigin,meta:{...t,kind:n.kind}}});let r=re.getChannelState("recording");t.detailedTiming.stopListeningForRenders(),r.length&&re.updateChannelState("recording",()=>new n7(50))},o=rv("pointer",{onComplete:a}),s=rv("keyboard",{onComplete:a}),l=rw(e=>{n9.setState(n7.fromArray(n9.getCurrentState().concat(e),150))});return()=>{t(),n(),r(),e(),o(),l(),s()}},rI=e=>{let t=e.filter(e=>e.length>2);return 0===t.length?e.at(-1)??"Unknown":t.at(-1)},rj=e=>{switch(e.kind){case"interaction":{let{renderTime:t,otherJSTime:n,framePreparation:r,frameConstruction:a,frameDraw:i}=e;return t+n+r+a+(i??0)}case"dropped-frames":return e.otherTime+e.renderTime}},rD=e=>0===e.changes.context.length&&0===e.changes.props.length&&0===e.changes.state.length,rO=e=>{let t=rj(e.timing);switch(e.kind){case"interaction":if(t<200)return"low";if(t<500)return"needs-improvement";return"high";case"dropped-frames":if(t<50)return"low";if(t<150)return"needs-improvement";return"high"}},rP=()=>(0,u.qp)(rL),rL=(0,d.kr)(null),rY=({size:e=24,className:t})=>(0,h.tZ)("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:ew(["lucide lucide-chevron-right",t]),children:(0,h.tZ)("path",{d:"m9 18 6-6-6-6"})}),rH=({className:e="",size:t=24,events:n=[]})=>{let r=n.includes(!0),a=n.filter(e=>e).length,i=r?Math.max(.6*t,14):Math.max(.4*t,6);return(0,h.BX)("div",{className:"relative",children:[(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:`lucide lucide-bell ${e}`,children:[(0,h.tZ)("path",{d:"M10.268 21a2 2 0 0 0 3.464 0"}),(0,h.tZ)("path",{d:"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"})]}),n.length>0&&a>0&&il.options.value.showNotificationCount&&(0,h.tZ)("div",{className:ew(["absolute",r?"-top-2.5 -right-2.5":"-top-1 -right-1","rounded-full","flex items-center justify-center","text-[8px] font-medium text-white","as
21pect-square",r?"bg-red-500/90":"bg-purple-500/90"]),style:{width:`${i}px`,height:`${i}px`,padding:r?"0.5px":"0"},children:r&&(a>99?">99":a)})]})},r_=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[(0,h.tZ)("path",{d:"M18 6 6 18"}),(0,h.tZ)("path",{d:"m6 6 12 12"})]}),rU=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[(0,h.tZ)("path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"}),(0,h.tZ)("path",{d:"M16 9a5 5 0 0 1 0 6"}),(0,h.tZ)("path",{d:"M19.364 18.364a9 9 0 0 0 0-12.728"})]}),rW=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[(0,h.tZ)("path",{d:"M16 9a5 5 0 0 1 .95 2.293"}),(0,h.tZ)("path",{d:"M19.364 5.636a9 9 0 0 1 1.889 9.96"}),(0,h.tZ)("path",{d:"m2 2 20 20"}),(0,h.tZ)("path",{d:"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"}),(0,h.tZ)("path",{d:"M9.828 4.172A.686.686 0 0 1 11 4.657v.686"})]}),rV=({size:e=24,className:t})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:ew(["lucide lucide-arrow-left",t]),children:[(0,h.tZ)("path",{d:"m12 19-7-7 7-7"}),(0,h.tZ)("path",{d:"M19 12H5"})]}),rJ=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[(0,h.tZ)("path",{d:"M14 4.1 12 6"}),(0,h.tZ)("path",{d:"m5.1 8-2.9-.8"}),(0,h.tZ)("path",{d:"m6 12-1.9 2"}),(0,h.tZ)("path",{d:"M7.2 2.2 8 5.1"}),(0,h.tZ)("path",{d:"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"})]}),rq=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,children:[(0,h.tZ)("path",{d:"M10 8h.01"}),(0,h.tZ)("path",{d:"M12 12h.01"}),(0,h.tZ)("path",{d:"M14 8h.01"}),(0,h.tZ)("path",{d:"M16 12h.01"}),(0,h.tZ)("path",{d:"M18 8h.01"}),(0,h.tZ)("path",{d:"M6 8h.01"}),(0,h.tZ)("path",{d:"M7 16h10"}),(0,h.tZ)("path",{d:"M8 12h.01"}),(0,h.tZ)("rect",{width:"20",height:"16",x:"2",y:"4",rx:"2"})]}),rG=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",className:e,style:{transform:"rotate(180deg)"},children:[(0,h.tZ)("circle",{cx:"12",cy:"12",r:"10"}),(0,h.tZ)("path",{d:"m4.9 4.9 14.2 14.2"})]}),rK=({className:e="",size:t=24})=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:[(0,h.tZ)("polyline",{points:"22 17 13.5 8.5 8.5 13.5 2 7"}),(0,h.tZ)("polyline",{points:"16 17 22 17 22 11"})]}),rQ=({children:e,triggerContent:t,wrapperProps:n})=>{let[r,a]=(0,p.eJ)("closed"),[i,o]=(0,p.eJ)(null),[s,l]=(0,p.eJ)({width:window.innerWidth,height:window.innerHeight}),c=(0,p.sO)(null),d=(0,p.sO)(null),u=(0,p.qp)(a9),m=(0,p.sO)(!1);(0,p.d4)(()=>{let e=()=>{l({width:window.innerWidth,height:window.innerHeight}),f()};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);let f=()=>
21{if(c.current&&u){let e=c.current.getBoundingClientRect(),t=u.getBoundingClientRect(),n=e.left+e.width/2,r=e.top;o(new DOMRect(n-t.left,r-t.top,e.width,e.height))}};(0,p.d4)(()=>{f()},[c.current]),(0,p.d4)(()=>{if("opening"===r){let e=setTimeout(()=>a("open"),120);return()=>clearTimeout(e)}if("closing"===r){let e=setTimeout(()=>a("closed"),120);return()=>clearTimeout(e)}},[r]),(0,p.d4)(()=>{let e=setInterval(()=>{m.current||"closed"===r||a("closing")},1e3);return()=>clearInterval(e)},[r]);let g=()=>{if(!i||!u)return{top:0,left:0};let e=u.getBoundingClientRect(),t=d.current?.offsetHeight||40,n=i.x+e.left,r=i.y+e.top,a=n,o=r-4;return a-87.5<5?a=92.5:a+87.5>s.width-5&&(a=s.width-5-87.5),o-t<5&&(o=r+i.height+4),{top:o-e.top,left:a-e.left}};return(0,h.BX)(h.HY,{children:[u&&i&&"closed"!==r&&(0,p.jz)((0,h.tZ)("div",{ref:d,className:ew(["absolute z-100 bg-white text-black rounded-lg px-3 py-2 shadow-lg","transform transition-all duration-120 ease-[cubic-bezier(0.23,1,0.32,1)]",'after:content-[""] after:absolute after:top-[100%]',"after:left-1/2 after:-translate-x-1/2","after:w-[10px] after:h-[6px]","after:border-l-[5px] after:border-l-transparent","after:border-r-[5px] after:border-r-transparent","after:border-t-[6px] after:border-t-white","pointer-events-none","opening"===r||"closing"===r?"opacity-0 translate-y-1":"opacity-100 translate-y-0"]),style:{top:g().top+"px",left:g().left+"px",transform:"translate(-50%, -100%)",minWidth:"175px"},children:e}),u),(0,h.tZ)("div",{ref:c,onMouseEnter:()=>{m.current=!0,f(),a("opening")},onMouseLeave:()=>{m.current=!1,f(),a("closing")},...n,children:t})]})},r0=({selectedEvent:e})=>{let{notificationState:t,setNotificationState:n,setRoute:r}=rP();return(0,h.BX)("div",{className:ew(["flex w-full justify-between items-center px-3 py-2 text-xs"]),children:[(0,h.BX)("div",{className:ew(["bg-[#18181B] flex items-center gap-x-1 p-1 rounded-sm"]),children:[(0,h.tZ)("button",{onClick:()=>{r({route:"render-visualization",routeMessage:null})},className:ew(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","render-visualization"===t.route||"render-explanation"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:"Ranked"}),(0,h.tZ)("button",{onClick:()=>{r({route:"other-visualization",routeMessage:null})},className:ew(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","other-visualization"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:"Overview"}),(0,h.tZ)("button",{onClick:()=>{r({route:"optimize",routeMessage:null})},className:ew(["w-1/2 flex items-center justify-center whitespace-nowrap py-[5px] px-1 gap-x-1","optimize"===t.route?"text-white bg-[#7521c8] rounded-sm":"text-[#6E6E77] bg-[#18181B] rounded-sm"]),children:(0,h.tZ)("span",{children:"Prompts"})})]}),(0,h.tZ)(rQ,{triggerContent:(0,h.tZ)("button",{onClick:()=>{n(e=>{e.audioNotificationsOptions.enabled&&"closed"!==e.audioNotificationsOptions.audioContext.state&&e.audioNotificationsOptions.audioContext.close();let t=e.audioNotificationsOptions.enabled;localStorage.setItem("react-scan-notifications-audio",String(!t));let n=new AudioContext;return e.audioNotificationsOptions.enabled||w(n),t&&n.close(),{...e,audioNotificationsOptions:t?{audioContext:null,enabled:!1}:{audioContext:n,enabled:!0}}})},className:"ml-auto",children:(0,h.BX)("div",{className:ew(["flex gap-x-2 justify-center items-center text-[#6E6E77]"]),children:[(0,h.tZ)("span",{children:"Alerts"}),t.audioNotificationsOptions.enabled?(0,h.tZ)(rU,{size:16,className:"text-[#6E6E77]"}):(0,h.tZ)(rW,{size:16,className:"text-[#6E6E77]"})]})}),children:(0,h.tZ)(h.HY,{children:"Play a chime when a slowdown is recorded"})})]})},r1=e=>{let t="";return e.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,30).filter(e=>e.totalTime>5).forEach(e=>{let n="";n+="Component Name:"+e.name+"\n"+`Rendered: ${e.count} times 22`+`Sum of self times for ${e.name} is ${e.totalTime.toFixed(0)}ms 23`,e.changes.props.length>0&&(n+=`Changed props for all ${e.name} instances ("name:count" pairs)
24`,e.changes.props.forEach(e=>{n+=`${e.name}:${e.count}x 25`})),e.changes.state.length>0&&(n+=`Changed state for all ${e.name} instances ("hook index:count" pairs) 26`,e.changes.state.forEach(e=>{n+=`${e.index}:${e.count}x 27`})),e.changes.context.length>0&&(n+=`Changed context for all ${e.name} instances ("context display name (if exists):count" pairs) 28`,e.changes.context.forEach(e=>{n+=`${e.name}:${e.count}x 29`})),t+=n+"\n"}),t},r2=({renderTime:e,eHandlerTimeExcludingRenders:t,toRafTime:n,commitTime:r,framePresentTime:a,formattedReactData:i})=>`I will provide you with a set of high level, and low level performance data about an interaction in a React App: 30### High level 31- react component render time: ${e.toFixed(0)}ms 32- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${t.toFixed(0)}ms 33- how long it took from the last event handler time, to the last request animation frame: ${n.toFixed(0)}ms 34 - things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time 35- how long it took from the last request animation frame to when the dom was committed: ${r.toFixed(0)}ms 36 - during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high 37${a&&`- how long it took from dom commit for the frame to be presented: ${a.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`} 38 39### Low level 40We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered. 41${i}`,r4=({interactionType:e,name:t,componentPath:n,time:r,renderTime:a,eHandlerTimeExcludingRenders:i,toRafTime:o,commitTime:s,framePresentTime:l,formattedReactData:c})=>`You will attempt to implement a performance improvement to a user interaction in a React app. You will be provided with data about the interaction, and the slow down. 42 43Your should split your goals into 2 parts: 44- identifying the problem 45- fixing the problem 46 - it is okay to implement a fix even if you aren't 100% sure the fix solves the performance problem. When you aren't sure, you should tell the user to try repeating the interaction, and feeding the "Formatted Data" in the React Scan notifications optimize tab. This allows you to start a debugging flow with the user, where you attempt a fix, and observe the result. The user may make a mistake when they pass you the formatted data, so must make sure, given the data passed to you, that the associated data ties to the same interaction you were trying to debug. 47 48 49Make sure to check if the user has the react compiler enabled (project dependent, configured through build tool), so you don't unnecessarily memoize components. If it is, you do not need to worry about memoizing user components 50 51One challenge you may face is the performance problem lies in a node_module, not in user code. If you are confident the problem originates because of a node_module, there are multiple strategies, which are context dependent: 52- you can try to work around the problem, knowing which module is slow 53- you can determine if its possible to resolve the problem in the node_module by modifying non node_module code 54- you can monkey patch the node_module to experiment and see if it's really the problem (you can modify a functions properties to hijack the call for example) 55- you can determine if it's feasible to replace whatever node_module is causing the problem with a performant option (this is an extreme) 56 57The interaction was a ${e} on the component named ${t}. This component has the following ancestors ${n}. This is the path from the component, to the root. This should be enough information to figure out where this component is in the user's code base 58 59This path is the component that was clicked, so it should tell you roughly where component had an event handler that triggered a state change. 60 61Please note that the leaf node of this path might not be user co
61de (if they use a UI library), and they may contain many wrapper components that just pass through children that aren't relevant to the actual click. So make you sure analyze the path and understand what the user code is doing 62 63We have a set of high level, and low level data about the performance issue. 64 65The click took ${r.toFixed(0)}ms from interaction start, to when a new frame was presented to a user. 66 67We also provide you with a breakdown of what the browser spent time on during the period of interaction start to frame presentation. 68 69- react component render time: ${a.toFixed(0)}ms 70- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${i.toFixed(0)}ms 71- how long it took from the last event handler time, to the last request animation frame: ${o.toFixed(0)}ms 72 - things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time 73- how long it took from the last request animation frame to when the dom was committed: ${s.toFixed(0)}ms 74 - during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high 75${l&&`- how long it took from dom commit for the frame to be presented: ${l.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`} 76 77 78We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered. 79 80${c} 81 82You may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could of been memoized to avoid computation 83 84It's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So the flow should be: 85- find the most expensive components 86- see what's causing them to render 87- determine how you can make those state/props/context not change for a large set of the renders 88- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. 89 90An important thing to note is that if you see a lot of react renders (some components with very high render counts), but javascript excluding renders is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run during the JS event handler period. 91 92It's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time. 93 94If a node_module is the component with high renders, you can experiment to see if that component is the root issue (because of hooks). You should use the same instructions for node_module debugging mentioned previously. 95 96`,r5=({renderTime:e,otherTime:t,formattedReactData:n})=>`You will attempt to implement a performance improvement to a large slowdown in a react app 97 98Your should split your goals into 2 parts: 99- identifying the problem 100- fixing the problem 101 - it is okay to implement a fix even if you aren't 100% sure the fix solves the performance problem. When you aren't sure, you should tell the user to try repeating the interaction, and feeding the "Formatted Data" in the React Scan notifications optimize tab. This allows you to start a debugging flow with the user, where you attempt a fix, and observe the result. The user may make a mistake when they pass you the formatted data, so must make sure, given the data passed to you, that the associated data ties to the same interaction you were trying to debug. 102 103Make sure to check if the user has the react compiler enabled (project dependent, configured through build tool), so you don't unnecessarily memoize components. If it is, you do not need to worry about memoizing user components 104 105One challenge you may face is the performance problem lies in a node_module, not in user code. If you are confident the problem originates because of a node_module, there are multiple strategies, which are context dependent: 106- you can try to work around the problem, knowing which module is slow 107- you can determine if its possible to resolve the problem in the node_module by modifying non node_module code 108- you can monkey patch the node_module to experiment and see if it's really the problem (you can modify a functions properties to hijack the call for example) 109- you can determine if it's feasible to replace whatever node_module is causing the problem with a performant option (this is an extreme) 110 111 112We have the high level time of how much react spent rendering, and what else the browser spent time on during this slowdown 113 114- react component render time: ${e.toFixed(0)}ms 115- other time: ${t}ms 116 117 118We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered. 119 120${n} 121 122You may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could of been memoized to avoid computation 123 124It's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So the flow should be: 125- find the most expensive components 126- see what's causing them to render 127- determine how you can make those state/props/context not change for a large set of the renders 128- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. 129 130An important thing to note is that if you see a lot of react renders (some components with very high render counts), but other time is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run outside of what we profile (just react render time). 131 132It's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may al
132so be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time. 133 134If a node_module is the component with high renders, you can experiment to see if that component is the root issue (because of hooks). You should use the same instructions for node_module debugging mentioned previously. 135 136If renders don't seem to be the problem, see if there are any expensive CSS properties being added/mutated, or any expensive DOM Element mutations/new elements being created that could cause this slowdown. 137`,r3=({renderTime:e,otherTime:t,formattedReactData:n})=>`Your goal will be to help me find the source of a performance problem in a React App. I collected a large dataset about this specific performance problem. 138 139We have the high level time of how much react spent rendering, and what else the browser spent time on during this slowdown 140 141- react component render time: ${e.toFixed(0)}ms 142- other time (other JavaScript, hooks like useEffect, style recalculations, layerization, paint & commit and everything else the browser might do to draw a new frame after javascript mutates the DOM): ${t}ms 143 144 145We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered. 146 147${n} 148 149You may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could of been memoized to avoid computation 150 151It's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So a flow we can go through is: 152- find the most expensive components 153- see what's causing them to render 154- determine how you can make those state/props/context not change for a large set of the renders 155- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. 156 157 158An important thing to note is that if you see a lot of react renders (some components with very high render counts), but other time is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run outside of what we profile (just react render time). 159 160It's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one, and this can add significant overhead when thousands of effects ran. 161 162If it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem. 163`,r6=({renderTime:e,otherTime:t,formattedReactData:n})=>`I will provide you with a set of high level, and low level performance data about a large frame drop in a React App: 164### High level 165- react component render time: ${e.toFixed(0)}ms 166- how long it took to run everything else (other JavaScript, hooks like useEffect, style recalculations, layerization, paint & commit and everything else the browser might do to draw a new frame after javascript mutates the DOM): ${t}ms 167 168### Low level 169We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered. 170${n}`,r8=({interactionType:e,name:t,time:n,renderTime:r,eHandlerTimeExcludingRenders:a,toRafTime:i,commitTime:o,framePresentTime:s,formattedReactData:l})=>`Your goal will be to help me find the source of a performance problem. I collected a large dataset about this specific performance problem. 171 172There was a ${e} on a component named ${t}. This means, roughly, the component that handled the ${e} event was named ${t}. 173 174We have a set of high level, and low level data about the performance issue. 175 176The click took ${n.toFixed(0)}ms from interaction start, to when a new frame was presented to a user. 177 178We also provide you with a breakdown of what the browser spent time on during the period of interaction start to frame presentation. 179 180- react component render time: ${r.toFixed(0)}ms 181- how long it took to run javascript event handlers (EXCLUDING REACT RENDERS): ${a.toFixed(0)}ms 182- how long it took from the last event handler time, to the last request animation frame: ${i.toFixed(0)}ms 183 - things like prepaint, style recalculations, layerization, async web API's like observers may occur during this time 184- how long it took from the last request animation frame to when the dom was committed: ${o.toFixed(0)}ms 185 - during this period you will see paint, commit, potential style recalcs, and other misc browser activity. Frequently high times here imply css that makes the browser do a lot of work, or mutating expensive dom properties during the event handler stage. This can be many things, but it narrows the problem scope significantly when this is high 186${s&&`- how long it took from dom commit for the frame to be presented: ${s.toFixed(0)}ms. This is when information about how to paint the next frame is sent to the compositor threads, and when the GPU does work. If this is high, look for issues that may be a bottleneck for operations occurring during this time`} 187 188We also have lower level information about react components, such as their render time, and which props/state/context changed when they re-rendered. 189 190${l} 191 192 193You may notice components have many renders, but much fewer props/state/context changes. This normally implies most of the components could of been memoized to avoid computation 194 195It's also important to remember if a component had no props/state/context change, and it was memoized, it would not render. So a flow we can go through is: 196- find the most expensive components 197- see what's causing them to render 198- determine how you can make those state/props/context not change for a large set of the renders 199- once there are no more changes left, you can memoize the component so it no longer unnecessarily re-renders. 200 201 202An important thing to note is that if you see a lot of react renders (some components with very high render counts), but javascript excluding renders is much higher than render time, it is possible that the components with lots of renders run hooks like useEffect/useLayoutEffect, which run during the JS event handler peri
202od. 203 204It's also good to note that react profiles hook times in development, and if many hooks are called (lets say 5,000 components all called a useEffect), it will have to profile every single one. And it may also be the case the comparison of the hooks dependency can be expensive, and that would not be tracked in render time. 205 206If it's not possible to explain the root problem from this data, please ask me for more data explicitly, and what we would need to know to find the source of the performance problem. 207`,r7=(e,t)=>n8(()=>{switch(e){case"data":switch(t.kind){case"dropped-frames":return r6({formattedReactData:r1(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return r2({commitTime:t.timing.frameConstruction,eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:r1(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),toRafTime:t.timing.framePreparation})}case"explanation":switch(t.kind){case"dropped-frames":return r3({formattedReactData:r1(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return r8({commitTime:t.timing.frameConstruction,eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:r1(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,interactionType:t.type,name:rI(t.componentPath),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),time:rj(t.timing),toRafTime:t.timing.framePreparation})}case"fix":switch(t.kind){case"dropped-frames":return r5({formattedReactData:r1(t.groupedFiberRenders),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),otherTime:t.timing.otherTime});case"interaction":return r4({commitTime:t.timing.frameConstruction,componentPath:t.componentPath.join(">"),eHandlerTimeExcludingRenders:t.timing.otherJSTime,formattedReactData:r1(t.groupedFiberRenders),framePresentTime:t.timing.frameDraw,interactionType:t.type,name:rI(t.componentPath),renderTime:t.groupedFiberRenders.reduce((e,t)=>e+t.totalTime,0),time:rj(t.timing),toRafTime:t.timing.framePreparation})}}}),r9=({selectedEvent:e})=>{let[t,n]=(0,u.eJ)("fix"),[r,a]=(0,u.eJ)(!1);return(0,h.BX)("div",{className:ew(["w-full h-full"]),children:[(0,h.BX)("div",{className:ew(["border border-[#27272A] rounded-sm h-4/5 text-xs overflow-hidden"]),children:[(0,h.tZ)("div",{className:ew(["bg-[#18181B] p-1 rounded-t-sm"]),children:(0,h.BX)("div",{className:ew(["flex items-center gap-x-1"]),children:[(0,h.tZ)("button",{onClick:()=>n("fix"),className:ew(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","fix"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Fix"}),(0,h.tZ)("button",{onClick:()=>n("explanation"),className:ew(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","explanation"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Explanation"}),(0,h.tZ)("button",{onClick:()=>n("data"),className:ew(["flex items-center justify-center whitespace-nowrap py-1.5 px-3 rounded-sm","data"===t?"text-white bg-[#7521c8]":"text-[#6E6E77] hover:text-white"]),children:"Data"})]})}),(0,h.tZ)("div",{className:ew(["overflow-y-auto h-full"]),children:(0,h.tZ)("pre",{className:ew(["p-2 h-full","whitespace-pre-wrap break-words","text-gray-300 font-mono "]),children:r7(t,e)})})]}),(0,h.BX)("button",{onClick:async()=>{let n=r7(t,e);await navigator.clipboard.writeText(n),a(!0),setTimeout(()=>a(!1),1e3)},className:ew(["mt-4 px-4 py-2 bg-[#18181B] text-[#6E6E77] rounded-sm","hover:text-white transition-colors duration-200","flex items-center justify-center gap-x-2 text-xs"]),children:[(0,h.tZ)("span",{children:r?"Copied!":"Copy Prompt"}),(0,h.tZ)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:ew(["transition-transform duration-200",r&&"scale-110"]),children:r?(0,h.tZ)("path",{d:"M20 6L9 17l-5-5"}):(0,h.BX)(h.HY,{children:[(0,h.tZ)("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),(0,h.tZ)("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})})]})]})},ae=(e,t)=>{switch(e.kind){case"dropped-frames":return[...t?[{name:"Total Processing Time",time:rj(e.timing),color:"bg-red-500",kind:"total-processing-time"}]:[{name:"Renders",time:e.timing.renderTime,color:"bg-purple-500",kind:"render"},{name:"JavaScript, DOM updates, Draw Frame",time:e.timing.otherTime,color:"bg-[#4b4b4b]",kind:"other-frame-drop"}]];case"interaction":return[...t?[]:[{name:"Renders",time:e.timing.renderTime,color:"bg-purple-500",kind:"render"}],{name:t?"React Renders, Hooks, Other JavaScript":"JavaScript/React Hooks ",time:e.timing.otherJSTime,color:"bg-[#EFD81A]",kind:"other-javascript"},{name:"Update DOM and Draw New Frame",time:rj(e.timing)-e.timing.renderTime-e.timing.otherJSTime,color:"bg-[#1D3A66]",kind:"other-not-javascript"}]}},at=({selectedEvent:e})=>{let[t]=(0,u.eJ)(im()??!1),{notificationState:n}=rP(),[r,a]=(0,u.eJ)(n.routeMessage?.name?[n.routeMessage.name]:[]),i=ae(e,t),o=(0,u.qp)(a9);(0,u.d4)(()=>
207{if(n.routeMessage?.name){let e=o?.querySelector("#overview-scroll-container"),t=o?.querySelector(`#react-scan-overview-bar-${n.routeMessage.name}`);if(e&&t){let n=t.getBoundingClientRect().top,r=e.getBoundingClientRect().top;e.scrollTop=e.scrollTop+(n-r)}}},[n.route]),(0,u.d4)(()=>{"other-visualization"===n.route&&a(e=>n.routeMessage?.name?[n.routeMessage.name]:e)},[n.route]);let s=i.reduce((e,t)=>e+t.time,0);return(0,h.BX)("div",{className:"rounded-sm border border-zinc-800 text-xs",children:[(0,h.tZ)("div",{className:"p-2 border-b border-zinc-800 bg-zinc-900/50",children:(0,h.BX)("div",{className:"flex items-center justify-between",children:[(0,h.tZ)("h3",{className:"text-xs font-medium",children:"What was time spent on?"}),(0,h.BX)("span",{className:"text-xs text-zinc-400",children:["Total: ",s.toFixed(0),"ms"]})]})}),(0,h.tZ)("div",{className:"divide-y divide-zinc-800",children:i.map(t=>{let n=r.includes(t.kind);return(0,h.BX)("div",{id:`react-scan-overview-bar-${t.kind}`,children:[(0,h.tZ)("button",{onClick:()=>a(e=>e.includes(t.kind)?e.filter(e=>e!==t.kind):[...e,t.kind]),className:"w-full px-3 py-2 flex items-center gap-4 hover:bg-zinc-800/50 transition-colors",children:(0,h.BX)("div",{className:"flex-1",children:[(0,h.BX)("div",{className:"flex items-center justify-between mb-2",children:[(0,h.BX)("div",{className:"flex items-center gap-0.5",children:[(0,h.tZ)("svg",{className:`h-4 w-4 text-zinc-400 transition-transform ${n?"rotate-90":""}`,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,h.tZ)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}),(0,h.tZ)("span",{className:"font-medium flex items-center text-left",children:t.name})]}),(0,h.BX)("span",{className:" text-zinc-400",children:[t.time.toFixed(0),"ms"]})]}),(0,h.tZ)("div",{className:"h-1 bg-zinc-800 rounded-full overflow-hidden",children:(0,h.tZ)("div",{className:`h-full ${t.color} transition-all`,style:{width:`${t.time/s*100}%`}})})]})}),n&&(0,h.tZ)("div",{className:"bg-zinc-900/30 border-t border-zinc-800 px-2.5 py-3",children:(0,h.tZ)("p",{className:" text-zinc-400 mb-4 text-xs",children:n8(()=>{switch(e.kind){case"interaction":switch(t.kind){case"render":return(0,h.tZ)(ao,{input:aa(e)});case"other-javascript":return(0,h.tZ)(ao,{input:ai(e)});case"other-not-javascript":return(0,h.tZ)(ao,{input:an(e)})}case"dropped-frames":switch(t.kind){case"total-processing-time":return(0,h.tZ)(ao,{input:{kind:"total-processing",data:{time:rj(e.timing)}}});case"render":return(0,h.tZ)(h.HY,{children:(0,h.tZ)(ao,{input:{kind:"render",data:{topByTime:e.groupedFiberRenders.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,3).map(t=>({name:t.name,percentage:t.totalTime/rj(e.timing)}))}}})});case"other-frame-drop":return(0,h.tZ)(ao,{input:{kind:"other"}})}}})})})]},t.kind)})})]})},an=e=>{let t=e.groupedFiberRenders.reduce((e,t)=>e+t.count,0),n=e.timing.renderTime,r=rj(e.timing);return t>100?{kind:"high-render-count-update-dom-draw-frame",data:{count:t,percentageOfTotal:n/r*100,copyButton:(0,h.tZ)(ar,{})}}:{kind:"update-dom-draw-frame",data:{copyButton:(0,h.tZ)(ar,{})}}},ar=()=>{let[e,t]=(0,u.eJ)(!1),{notificationState:n}=rP();return(0,h.BX)("button",{onClick:async()=>{n.selectedEvent&&(await navigator.clipboard.writeText(r7("explanation",n.selectedEvent)),t(!0),setTimeout(()=>t(!1),1e3))},className:"bg-zinc-800 flex hover:bg-zinc-700 text-zinc-200 px-2 py-1 rounded gap-x-3",children:[(0,h.tZ)("span",{children:e?"Copied!":"Copy Prompt"}),(0,h.tZ)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:ew(["transition-transform duration-200",e&&"scale-110"]),children:e?(0,h.tZ)("path",{d:"M20 6L9 17l-5-5"}):(0,h.BX)(h.HY,{children:[(0,h.tZ)("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),(0,h.tZ)("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})})]})},aa=e=>e.timing.renderTime/rj(e.timing)>.3?{kind:"render",data:{topByTime:e.groupedFiberRenders.toSorted((e,t)=>t.totalTime-e.totalTime).slice(0,3).map(t=>({percentage:t.totalTime/rj(e.timing),name:t.name}))}}:{kind:"other"},ai=e=>{let t=e.groupedFiberRenders.reduce((e,t)=>
207e+t.count,0);return e.timing.otherJSTime/rj(e.timing)<.2?{kind:"js-explanation-base"}:e.groupedFiberRenders.find(e=>e.count>200)||e.groupedFiberRenders.reduce((e,t)=>e+t.count,0)>500?{kind:"high-render-count-high-js",data:{renderCount:t,topByCount:e.groupedFiberRenders.filter(e=>e.count>100).toSorted((e,t)=>t.count-e.count).slice(0,3)}}:e.timing.otherJSTime/rj(e.timing)>.3?e.timing.renderTime>.2?{kind:"js-explanation-base"}:{kind:"low-render-count-high-js",data:{renderCount:t}}:{kind:"js-explanation-base"}},ao=({input:e})=>{switch(e.kind){case"total-processing":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.BX)("p",{children:["This is the time it took to draw the entire frame that was presented to the user. To be at 60FPS, this number needs to be ","<=16ms"]}),(0,h.tZ)("p",{children:'To debug the issue, check the "Ranked" tab to see if there are significant component renders'}),(0,h.tZ)("p",{children:"On a production React build, React Scan can't access the time it took for component to render. To get that information, run React Scan on a development build"}),(0,h.BX)("p",{children:["To understand precisely what caused the slowdown while in production, use the ",(0,h.tZ)("strong",{children:"Chrome profiler"})," and analyze the function call times."]}),(0,h.tZ)("p",{})]});case"render":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.tZ)("p",{children:"This is the time it took React to run components, and internal logic to handle the output of your component."}),(0,h.BX)("div",{className:ew(["flex flex-col"]),children:[(0,h.tZ)("p",{children:"The slowest components for this time period were:"}),e.data.topByTime.map(e=>(0,h.BX)("div",{children:[(0,h.tZ)("strong",{children:e.name}),":"," ",(100*e.percentage).toFixed(0),"% of total"]},e.name))]}),(0,h.tZ)("p",{children:'To view the render times of all your components, and what caused them to render, go to the "Ranked" tab'}),(0,h.tZ)("p",{children:'The "Ranked" tab shows the render times of every component.'}),(0,h.tZ)("p",{children:"The render times of the same components are grouped together into one bar."}),(0,h.tZ)("p",{children:"Clicking the component will show you what props, state, or context caused the component to re-render."})]});case"js-explanation-base":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.tZ)("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),(0,h.BX)("p",{children:["The most common culprit for high JS time is expensive hooks, like expensive callbacks inside of ",(0,h.tZ)("code",{children:"useEffect"}),"'s or a large number of useEffect's called, but this can also be JavaScript event handlers (",(0,h.tZ)("code",{children:"'onclick'"}),", ",(0,h.tZ)("code",{children:"'onchange'"}),") that performed expensive computation."]}),(0,h.tZ)("p",{children:"If you have lots of components rendering that call hooks, like useEffect, it can add significant overhead even if the callbacks are not expensive. If this is the case, you can try optimizing the renders of those components to avoid the hook from having to run."}),(0,h.BX)("p",{children:["You should profile your app using the"," ",(0,h.tZ)("strong",{children:"Chrome DevTools profiler"})," to learn exactly which functions took the longest to execute."]})]});case"high-render-count-high-js":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.tZ)("p",{children:"This is the period when JavaScript hooks and other JavaScript outside of React Renders run."}),0===e.data.renderCount?(0,h.BX)(h.HY,{children:[(0,h.tZ)("p",{children:"There were no renders, which means nothing related to React caused this slowdown. The most likely cause of the slowdown is a slow JavaScript event handler, or code related to a Web API"}),(0,h.BX)("p",{children:["You should try to reproduce the slowdown while profiling your website with the",(0,h.tZ)("strong",{children:"Chrome DevTools profiler"})," to see exactly what functions took the longest to execute."]})]}):(0,h.BX)(h.HY,{children:[" ",(0,h.BX)("p",{children:["There were ",(0,h.tZ)("strong",{children:e.data.renderCount})," renders, which could have contributed to the high JavaScript/Hook time if they ran lots of hooks, like ",(0,h.tZ)("code",{children:"useEffects"}),"."]}),(0,h.BX)("div",{className:ew(["flex flex-col"]),children:[(0,h.tZ)("p",{children:"You should try optimizing the renders of:"}),e.data.topByCount.map(e=>(0,h.BX)("div",{children:["- ",(0,h.tZ)("strong",{children:e.name})," (rendered ",e.count,"x)"]},e.name))]}),"and then checking if the problem still exists.",(0,h.BX)("p",{children:["You can also try profiling your app using the"," ",(0,h.tZ)("strong",{children:"Chrome DevTools profiler"})," to see exactly what functions took the longest to execute."]})]})]});case"low-render-count-high-js":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.tZ)("p",{children:"This is the peri
207od when JavaScript hooks and other JavaScript outside of React Renders run."}),(0,h.BX)("p",{children:["There were only ",(0,h.tZ)("strong",{children:e.data.renderCount})," renders detected, which means either you had very expensive hooks like"," ",(0,h.tZ)("code",{children:"useEffect"}),"/",(0,h.tZ)("code",{children:"useLayoutEffect"}),", or there is other JavaScript running during this interaction that took up the majority of the time."]}),(0,h.BX)("p",{children:["To understand precisely what caused the slowdown, use the"," ",(0,h.tZ)("strong",{children:"Chrome profiler"})," and analyze the function call times."]})]});case"high-render-count-update-dom-draw-frame":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.tZ)("p",{children:"These are the calculations the browser is forced to do in response to the JavaScript that ran during the interaction."}),(0,h.tZ)("p",{children:"This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations."}),(0,h.BX)("p",{children:["During this interaction, there were"," ",(0,h.tZ)("strong",{children:e.data.count})," renders, which was"," ",(0,h.BX)("strong",{children:[e.data.percentageOfTotal.toFixed(0),"%"]})," of the time spent processing"]}),(0,h.tZ)("p",{children:"The work performed as a result of the renders may have forced the browser to spend a lot of time to draw the next frame."}),(0,h.tZ)("p",{children:'You can try optimizing the renders to see if the performance problem still exists using the "Ranked" tab.'}),(0,h.tZ)("p",{children:"If you use an AI-based code editor, you can export the performance data collected as a prompt."}),(0,h.tZ)("p",{children:e.data.copyButton}),(0,h.tZ)("p",{children:"Provide this formatted data to the model and ask it to find, or fix, what could be causing this performance problem."}),(0,h.tZ)("p",{children:'For a larger selection of prompts, try the "Prompts" tab'})]});case"update-dom-draw-frame":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.tZ)("p",{children:"These are the calculations the browser is forced to do in response to the JavaScript that ran during the interaction."}),(0,h.tZ)("p",{children:"This can be caused by CSS updates/CSS recalculations, or new DOM elements/DOM mutations."}),(0,h.tZ)("p",{children:"If you use an AI-based code editor, you can export the performance data collected as a prompt."}),(0,h.tZ)("p",{children:e.data.copyButton}),(0,h.tZ)("p",{children:"Provide this formatted data to the model and ask it to find, or fix, what could be causing this performance problem."}),(0,h.tZ)("p",{children:'For a larger selection of prompts, try the "Prompts" tab'})]});case"other":return(0,h.BX)("div",{className:ew(["text-[#E4E4E7] text-[10px] leading-6 flex flex-col gap-y-2"]),children:[(0,h.BX)("p",{children:["This is the time it took to run everything other than React renders. This can be hooks like ",(0,h.tZ)("code",{children:"useEffect"}),", other JavaScript not part of React, or work the browser has to do to update the DOM and draw the next frame."]}),(0,h.BX)("p",{children:["To get a better picture of what happened, profile your app using the"," ",(0,h.tZ)("strong",{children:"Chrome profiler"})," when the performance problem arises."]})]})}},as=null,al=null,ac=null,ad=(0,c.td)({kind:"idle",current:null}),au=null,ap=()=>{au&&cancelAnimationFrame(au),au=requestAnimationFrame(()=>{if(!as||!al)return;al.clearRect(0,0,as.width,as.height);let e="hsl(271, 76%, 53%)",t=ad.value,{alpha:n,current:r}=n8(()=>{switch(t.kind){case"transition":{let e=t.current?.alpha&&t.current.alpha>0?t.current:t.transitionTo;return{alpha:e?e.alpha:0,current:e}}case"move-out":return{alpha:t.current?.alpha??0,current:t.current};case"idle":return{alpha:1,current:t.current}}});switch(r?.rects.forEach(t=>{al&&(al.shadowColor=e,al.shadowBlur=6,al.strokeStyle=e,al.lineWidth=2,al.globalAlpha=n,al.beginPath(),al.rect(t.left,t.top,t.width,t.height),al.stroke(),al.shadowBlur=0,al.beginPath(),al.rect(t.left,t.top,t.width,t.height),al.stroke())}),t.kind){case"move-out":if(0===t.current.alpha){ad.value={kind:"idle",current:null};return}t.current.alpha<=.01&&(t.current.alpha=0),t.current.alpha=Math.max(0,t.current.alpha-.03),ap();return;case"transition":if(t.current&&t.current.alpha>0){t.current.alpha=Math.max(0,t.current.alpha-.03),ap();return}if(1===t.transitionTo.alpha){ad.value={kind:"idle",current:t.transitionTo};return}t.transitionTo.alpha=Math.min(t.transitionTo.alpha+.03,1),ap();case"idle":return}})},ah=null,am=e=>{if(!(al=(as=document.createElement("canvas")).getContext("2d",{alpha:!0})))return null;let t=window.devicePixelRatio||1,{innerWidth:n,innerHeight:r}=window;as.style.width=`${n}px`,as.style.height=`${r}px`,as.width=n*t,as.height=r*t,as.style.position="fixed",as.style.left="0",as.style.top="0",as.style.pointerEvents="none",as.style.zIndex="2147483600",al.scale(t,t),e.appendChild(as),ah&&window.removeEventListener("resize",ah);let a=()=>
207{if(!as||!al)return;let e=window.devicePixelRatio||1,{innerWidth:t,innerHeight:n}=window;as.style.width=`${t}px`,as.style.height=`${n}px`,as.width=t*e,as.height=n*e,al.scale(e,e),ap()};return ah=a,window.addEventListener("resize",a),ad.subscribe(()=>{requestAnimationFrame(()=>{ap()})}),af};function af(){ac&&(cancelAnimationFrame(ac),ac=null),as?.parentNode&&as.parentNode.removeChild(as),as=null,al=null}var ag=()=>{let e=ad.value.current?ad.value.current:"transition"===ad.value.kind?ad.value.transitionTo:null;if(e){if("transition"===ad.value.kind){ad.value={kind:"move-out",current:ad.value.current?.alpha===0?ad.value.transitionTo:ad.value.current??ad.value.transitionTo};return}ad.value={kind:"move-out",current:{alpha:0,...e}}}},aw=({selectedEvent:e})=>{let t=rj(e.timing),n=t-e.timing.renderTime,[r]=(0,u.eJ)(im()),a=e.groupedFiberRenders.map(e=>({event:e,kind:"render",totalTime:r?e.count:e.totalTime})),i=n8(()=>{switch(e.kind){case"dropped-frames":return e.timing.renderTime/t<.1;case"interaction":return(e.timing.otherJSTime+e.timing.renderTime)/t<.2}});"interaction"!==e.kind||r||a.push({kind:"other-javascript",totalTime:e.timing.otherJSTime}),i&&!r&&("interaction"===e.kind?a.push({kind:"other-not-javascript",totalTime:rj(e.timing)-e.timing.renderTime-e.timing.otherJSTime}):a.push({kind:"other-frame-drop",totalTime:n}));let o=(0,u.sO)({lastCallAt:null,timer:null}),s=a.reduce((e,t)=>e+t.totalTime,0);return(0,h.BX)("div",{className:ew(["flex flex-col h-full w-full gap-y-1"]),children:[n8(()=>r&&0===a.length?(0,h.BX)("div",{className:"flex flex-col items-center justify-center h-full text-zinc-400",children:[(0,h.tZ)("p",{className:"text-sm w-full text-left text-white mb-1.5",children:"No data available"}),(0,h.tZ)("p",{className:"text-x w-full text-lefts",children:"No data was collected during this period"})]}):0===a.length?(0,h.BX)("div",{className:"flex flex-col items-center justify-center h-full text-zinc-400",children:[(0,h.tZ)("p",{className:"text-sm w-full text-left text-white mb-1.5",children:"No renders collected"}),(0,h.tZ)("p",{className:"text-x w-full text-lefts",children:"There were no renders during this period"})]}):void 0),a.toSorted((e,t)=>t.totalTime-e.totalTime).map(e=>(0,h.tZ)(ab,{bars:a,bar:e,debouncedMouseEnter:o,totalBarTime:s,isProduction:r}
207,"render"===e.kind?e.event.id:e.kind))]})},ax=e=>e.current&&e.current.alpha>0?"fading-out":"fading-in",ab=({bar:e,debouncedMouseEnter:t,totalBarTime:n,isProduction:r,bars:a,depth:i=0})=>{let{setNotificationState:o,setRoute:s}=rP(),[l,c]=(0,u.eJ)(!1),d="render"!==e.kind||0===e.event.parents.size,p=a.filter(t=>"render"===t.kind&&"render"===e.kind&&e.event.parents.has(t.event.name)&&t.event.name!==e.event.name),m="render"===e.kind?Array.from(e.event.parents).filter(e=>!a.some(t=>"render"===t.kind&&t.event.name===e)):[];return(0,h.BX)("div",{className:"w-full",children:[(0,h.BX)("div",{className:ew(["w-full flex items-center relative text-xs min-w-0"]),children:[(0,h.BX)("button",{onMouseLeave:()=>{t.current.timer&&clearTimeout(t.current.timer),ag()},onMouseEnter:async()=>{let n=async()=>{if(t.current.lastCallAt=Date.now(),"render"!==e.kind){let e=ad.value.current?ad.value.current:"transition"===ad.value.kind?ad.value.transitionTo:null;if(!e){ad.value={kind:"idle",current:null};return}ad.value={kind:"move-out",current:{alpha:0,...e}};return}let n=ad.value,r=n8(()=>{switch(n.kind){case"transition":return n.transitionTo;case"idle":case"move-out":return n.current}}),a=[];if("transition"===n.kind){let t=ax(n);n8(()=>{switch(t){case"fading-in":ad.value={kind:"transition",current:n.transitionTo,transitionTo:{rects:a,alpha:0,name:e.event.name}};return;case"fading-out":ad.value={kind:"transition",current:ad.value.current?{alpha:0,...ad.value.current}:null,transitionTo:{rects:a,alpha:0,name:e.event.name}};return}})}else ad.value={kind:"transition",transitionTo:{rects:a,alpha:0,name:e.event.name},current:r?{alpha:0,...r}:null};for await(let t of nj(e.event.elements.filter(e=>e instanceof Element)))t.forEach(({boundingClientRect:e})=>{a.push(e)}),ap()};if(t.current.lastCallAt&&Date.now()-t.current.lastCallAt<200){t.current.timer&&clearTimeout(t.current.timer),t.current.timer=setTimeout(()=>{n()},200);return}n()},onClick:()=>{"render"===e.kind?(o(t=>({...t,selectedFiber:e.event})),s({route:"render-explanation",routeMessage:null})):s({route:"other-visualization",routeMessage:{kind:"auto-open-overview-accordion",name:e.kind}})},className:ew(["h-full w-[90%] flex items-center hover:bg-[#0f0f0f] rounded-l-md min-w-0 relative"]),children:[(0,h.tZ)("div",{style:{minWidth:"fit-content",width:`${e.totalTime/n*100}%`},className:ew(["flex items-center rounded-sm text-white text-xs h-[28px] shrink-0","render"===e.kind&&"bg-[#412162] group-hover:bg-[#5b2d89]","other-frame-drop"===e.kind&&"bg-[#44444a] group-hover:bg-[#6a6a6a]","other-javascript"===e.kind&&"bg-[#efd81a6b] group-hover:bg-[#efda1a2f]","other-not-javascript"===e.kind&&"bg-[#214379d4] group-hover:bg-[#21437982]"])}),(0,h.tZ)("div",{className:ew(["absolute inset-0 flex items-center px-2","min-w-0"]),children:(0,h.BX)("div",{className:"flex items-center gap-x-2 min-w-0 w-full",children:[(0,h.tZ)("span",{className:ew(["truncate"]),children:n8(()=>{switch(e.kind){case"other-frame-drop":return"JavaScript, DOM updates, Draw Frame";case"other-javascript":return"JavaScript/React Hooks";case"other-not-javascript":return"Update DOM and Draw New Frame";case"render":return e.event.name}})}),"render"===e.kind&&rD(e.event)&&(0,h.tZ)("div",{style:{lineHeight:"10px"},className:ew(["px-1 py-0.5 bg-[#6a369e] flex items-center rounded-sm font-semibold text-[8px] shrink-0"]),children:"Memoizable"})]})})]}),(0,h.BX)("button",{onClick:()=>"render"===e.kind&&!d&&c(!l),className:ew(["flex items-center min-w-fit shrink-0 rounded-r-md h-[28px]",!d&&"hover:bg-[#0f0f0f]","render"!==e.kind||d?"cursor-default":"cursor-pointer"]),children:[(0,h.tZ)("div",{className:"w-[20px] flex items-center justify-center",children:"render"===e.kind&&!d&&(0,h.tZ)(rY,{className:ew("transition-transform",l&&"rotate-90"),size:16})}),(0,h.BX)("div",{style:{minWidth:d?"fit-content":r?"30px":"60px"},className:"flex items-center justify-end gap-x-1",children:["render"===e.kind&&(0,h.BX)("span",{className:ew(["text-[10px]"]),children:["x",e.event.count]}),("render"!==e.kind||!r)&&(0,h.BX)("span",{className:"text-[10px] text-[#7346a0] pr-1",children:[e.totalTime<1?"<1":e.totalTime.toFixed(0),"ms"]})]})]}),0===i&&(0,h.tZ)("div",{className:ew(["absolute right-0 top-1/2 transition-none -translate-y-1/2 bg-white text-black px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity mr-16","pointer-events-none"]),children:"Click to learn more"})]}),l&&(p.length>0||m.length>0)&&(0,h.BX)("div",{className:"pl-3 flex flex-col gap-y-1 mt-1",children:[p.toSorted((e,t)=>t.totalTime-e.totalTime).map((e,o)=>(0,h.tZ)(ab,{depth:i+1,bar:e,debouncedMouseEnter:t,totalBarTime:n,isProduction:r,bars:a},o)),m.map(e=>(0,h.tZ)("div",{className:"w-full",children:(0,h.tZ)("div",{className:"w-full flex items-center relative text-xs",children:(0,h.BX)("div",{className:"h-full w-full flex items-center relative",children:[(0,h.tZ)("div",{className:"flex items-center rounded-sm text-white text-xs h-[28px] w-full"}),(0,h.tZ)("div",{className:"absolute inset-0 flex items-center px-2",children:(0,h.tZ)("span",{className:"truncate whitespace-nowrap text-white/70 w-full",children:e})})]})})},e))]})]})},av=({selectedEvent:e,selectedFiber:t})=>{let{setRoute:n}=rP(),[r,a]=(0,u.eJ)(!0),[i]=(0,u.eJ)(im());(0,u.bt)(()=>{let e=localStorage.getItem("react-scan-tip-shown"),t="true"===e||"false"!==e&&null;if(null===t){a(!0),localStorage.setItem("react-scan-tip-is-shown","true");return}t||a(!1)},[]);let o=0===t.changes.context.length&&0===t.changes.props.length&&0===t.changes.state.length;return(0,h.BX)("div",{className:ew(["w-full min-h-fit h-full flex flex-col py-4 pt-0 rounded-sm"]),children:[(0,h.BX)("div",{className:ew(["flex items-start gap-x-4 "]),children:[(0,h.BX)("button",{onClick:()=>{n({route:"render-visualization",routeMessage:null})},className:ew(["text-white hover:bg-[#34343b] flex gap-x-1 justify-center items-center mb-4 w-fit px-2.5 py-1.5 text-xs rounded-sm bg-[#18181B]"]),children:[(0,h.tZ)(rV,{size:14})," ",(0,h.tZ)("span",{children:"Overview"})]}),(0,h.BX)("div",{className:ew(["flex flex-col gap-y-1"]),children:[(0,h.tZ)("div",{className:ew(["text-sm font-bold text-white overflow-x-hidden"]),children:(0,h.tZ)("div",{className:"flex items-center gap-x-2 truncate",children:t.name})}),(0,h.BX)("div",{className:ew(["flex gap-x-2"]),children:[!i&&(0,h.tZ)(h.HY,{children:(0,h.BX)("div",{className:ew(["text-xs text-gray-400"]),children:["⢠Render time: ",t.totalTime.toFixed(0),"ms"]})}),(0,h.BX)("div",{className:ew(["text-xs text-gray-400 mb-4"]),children:["⢠Renders: ",t.count,"x"]})]})]})]}),r&&!o&&(0,h.BX)("div",{className:ew(["w-full mb-4 bg-[#0A0A0A] border border-[#27272A] rounded-sm overflow-hidden flex relative"]),children:[(0,h.tZ)("button",{onClick:()=>
207{a(!1),localStorage.setItem("react-scan-tip-shown","false")},className:ew(["absolute right-2 top-2 rounded-sm p-1 hover:bg-[#18181B]"]),children:(0,h.tZ)(r_,{size:12})}),(0,h.tZ)("div",{className:ew(["w-1 bg-[#d36cff]"])}),(0,h.BX)("div",{className:ew(["flex-1"]),children:[(0,h.tZ)("div",{className:ew(["px-3 py-2 text-gray-100 text-xs font-semibold"]),children:"How to stop renders"}),(0,h.tZ)("div",{className:ew(["px-3 pb-2 text-gray-400 text-[10px]"]),children:"Stop the following props, state and context from changing between renders, and wrap the component in React.memo if not already"})]})]}),o&&(0,h.BX)("div",{className:ew(["w-full mb-4 bg-[#0A0A0A] border border-[#27272A] rounded-sm overflow-hidden flex"]),children:[(0,h.tZ)("div",{className:ew(["w-1 bg-[#d36cff]"])}),(0,h.BX)("div",{className:ew(["flex-1"]),children:[(0,h.tZ)("div",{className:ew(["px-3 py-2 text-gray-100 text-sm font-semibold"]),children:"No changes detected"}),(0,h.tZ)("div",{className:ew(["px-3 pb-2 text-gray-400 text-xs"]),children:"This component would not of rendered if it was memoized"})]})]}),(0,h.BX)("div",{className:ew(["flex w-full"]),children:[(0,h.BX)("div",{className:ew(["flex flex-col border border-[#27272A] rounded-l-sm overflow-hidden w-1/3"]),children:[(0,h.tZ)("div",{className:ew(["text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed Props"}),t.changes.props.length>0?t.changes.props.toSorted((e,t)=>t.count-e.count).map(e=>(0,h.BX)("div",{className:ew(["flex flex-col justify-between items-center border-t overflow-x-auto border-[#27272A] px-1 py-1 text-wrap bg-[#0A0A0A] text-[10px]"]),children:[(0,h.tZ)("span",{className:ew(["text-white "]),children:e.name}),(0,h.BX)("div",{className:ew([" text-[8px] text-[#d36cff] pl-1 py-1 "]),children:[e.count,"/",t.count,"x"]})]},e.name)):(0,h.tZ)("div",{className:ew(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A]"]),children:"No changes"})]}),(0,h.BX)("div",{className:ew(["flex flex-col border border-[#27272A] border-l-0 overflow-hidden w-1/3"]),children:[(0,h.tZ)("div",{className:ew([" text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed State"}),t.changes.state.length>0?t.changes.state.toSorted((e,t)=>t.count-e.count).map(e=>(0,h.BX)("div",{className:ew(["flex flex-col justify-between items-center border-t overflow-x-auto border-[#27272A] px-1 py-1 text-wrap bg-[#0A0A0A] text-[10px]"]),children:[(0,h.BX)("span",{className:ew(["text-white "]),children:["index ",e.index]}),(0,h.BX)("div",{className:ew(["rounded-full text-[#d36cff] pl-1 py-1 text-[8px]"]),children:[e.count,"/",t.count,"x"]})]},e.index)):(0,h.tZ)("div",{className:ew(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A]"]),children:"No changes"})]}),(0,h.BX)("div",{className:ew(["flex flex-col border border-[#27272A] border-l-0 rounded-r-sm overflow-hidden w-1/3"]),children:[(0,h.tZ)("div",{className:ew([" text-[14px] font-semibold px-2 py-2 bg-[#18181B] text-white flex justify-center"]),children:"Changed Context"}),t.changes.context.length>0?t.changes.context.toSorted((e,t)=>t.count-e.count).map(e=>(0,h.BX)("div",{className:ew(["flex flex-col justify-between items-center border-t border-[#27272A] px-1 py-1 bg-[#0A0A0A] text-[10px] overflow-x-auto"]),children:[(0,h.tZ)("span",{className:ew(["text-white "]),children:e.name}),(0,h.BX)("div",{className:ew(["rounded-full text-[#d36cff] pl-1 py-1 text-[8px] text-wrap"]),children:[e.count,"/",t.count,"x"]})]},e.name)):(0,h.tZ)("div",{className:ew(["flex items-center justify-center h-full bg-[#0A0A0A] text-[#A1A1AA] border-t border-[#27272A] py-2"]),children:"No changes"})]})]})]})},ay=()=>{let{notificationState:e,setNotificationState:t}=rP(),[n,r]=(0,p.eJ)("..."),a=(0,p.sO)(null);if((0,p.d4)(()=>{let e=setInterval(()=>{r(e=>"..."===e?"":e+".")},500);return()=>clearInterval(e)},[]),!e.selectedEvent)return(0,h.BX)("div",{ref:a,className:ew(["h-full w-full flex flex-col items-center justify-center relative py-2 px-4"]),children:[(0,h.tZ)("div",{className:ew(["p-2 flex justify-center items-center border-[#27272A] absolute top-0 right-0"]),children:(0,h.tZ)("button",{onClick:()=>{eT.value={view:"none"}},children:(0,h.tZ)(r_,{size:18,className:"text-[#6F6F78]"})})}),(0,h.tZ)("div",{className:ew(["flex flex-col items-start pt-5 bg-[#0A0A0A] p-5 rounded-sm max-w-md"," shadow-lg"]),children:(0,h.BX)("div",{className:ew(["flex flex-col items-start gap-y-4"]),children:[(0,h.tZ)("div",{className:ew(["flex items-center"]),children:(0,h.BX)("span",{className:ew(["text-zinc-400 font-medium text-[17px]"]),children:["Scanning for slowdowns",n]})}),0!==e.events.length&&(0,h.BX)("p",{className:ew(["text-xs"]),children:["Click on an item in the"," ",(0,h.tZ)("span",{className:ew(["text-purple-400"]),children:"History"})," list to get started"]}),(0,h.tZ)("p",{className:ew(["text-zinc-600 text-xs"]),children:"You don't need to keep this panel open for React Scan to record slowdowns"}),(0,h.tZ)("p",{className:ew(["text-zinc-600 text-xs"]),children:"Enable audio alerts to hear a delightful ding every time a large slowdown is recorded"}),(0,h.tZ)("button",{onClick:()=>
207{if(e.audioNotificationsOptions.enabled){t(e=>(e.audioNotificationsOptions.audioContext?.state!=="closed"&&e.audioNotificationsOptions.audioContext?.close(),localStorage.setItem("react-scan-notifications-audio","false"),{...e,audioNotificationsOptions:{audioContext:null,enabled:!1}}));return}localStorage.setItem("react-scan-notifications-audio","true");let n=new AudioContext;w(n),t(e=>({...e,audioNotificationsOptions:{enabled:!0,audioContext:n}}))},className:ew(["px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-sm w-full"," text-sm flex items-center gap-x-2 justify-center"]),children:e.audioNotificationsOptions.enabled?(0,h.tZ)(h.HY,{children:(0,h.tZ)("span",{className:"flex items-center gap-x-1",children:"Disable audio alerts"})}):(0,h.tZ)(h.HY,{children:(0,h.tZ)("span",{className:"flex items-center gap-x-1",children:"Enable audio alerts"})})})]})})]});switch(e.route){case"render-visualization":return(0,h.tZ)(ak,{children:(0,h.tZ)(aw,{selectedEvent:e.selectedEvent})});case"render-explanation":if(!e.selectedFiber)throw Error("Invariant: must have selected fiber when viewing render explanation");return(0,h.tZ)(ak,{children:(0,h.tZ)(av,{selectedFiber:e.selectedFiber,selectedEvent:e.selectedEvent})});case"other-visualization":return(0,h.tZ)(ak,{children:(0,h.tZ)("div",{className:ew(["flex w-full h-full flex-col overflow-y-auto"]),id:"overview-scroll-container",children:(0,h.tZ)(at,{selectedEvent:e.selectedEvent})})});case"optimize":return(0,h.tZ)(ak,{children:(0,h.tZ)(r9,{selectedEvent:e.selectedEvent})})}e.route},ak=({children:e})=>{let{notificationState:t}=rP();if(!t.selectedEvent)throw Error("Invariant: d must have selected event when viewing render explanation");return(0,h.BX)("div",{className:ew(["w-full h-full flex flex-col gap-y-2"]),children:[(0,h.tZ)("div",{className:ew(["h-[50px] w-full"]),children:(0,h.tZ)(r0,{selectedEvent:t.selectedEvent})}),(0,h.tZ)("div",{className:ew(["h-calc(100%-50px) flex flex-col overflow-y-auto px-3"]),children:e})]})},aN=({selectedEvent:e})=>{let t=rO(e);switch(e.kind){case"interaction":return(0,h.tZ)("div",{className:ew(["w-full flex border-b border-[#27272A] min-h-[48px]"]),children:(0,h.BX)("div",{className:ew(["min-w-fit w-full justify-start flex items-center border-r border-[#27272A] pl-5 pr-2 text-sm gap-x-4"]),children:[(0,h.BX)("div",{className:ew(["flex items-center gap-x-2 "]),children:[(0,h.tZ)("span",{className:ew(["text-[#5a5a5a] mr-0.5"]),children:"click"===e.type?"Clicked ":"Typed in "}),(0,h.tZ)("span",{children:rI(e.componentPath)}),(0,h.BX)("div",{className:ew(["w-fit flex items-center justify-center h-fit text-white px-1 rounded-sm font-semibold text-[10px] whitespace-nowrap","low"===t&&"bg-green-500/50","needs-improvement"===t&&"bg-[#b77116]","high"===t&&"bg-[#b94040]"]),children:[rj(e.timing).toFixed(0),"ms processing time"]})]}),(0,h.tZ)("div",{className:ew(["flex items-center gap-x-2 justify-end ml-auto"]),children:(0,h.tZ)("div",{className:ew(["p-2 flex justify-center items-center border-[#27272A]"]),children:(0,h.tZ)("button",{onClick:()=>{eT.value={view:"none"}},children:(0,h.tZ)(r_,{size:18,className:"text-[#6F6F78]"})})})})]})});case"dropped-frames":return(0,h.tZ)("div",{className:ew(["w-full flex border-b border-[#27272A] min-h-[48px]"]),children:(0,h.BX)("div",{className:ew(["min-w-fit w-full justify-start flex items-center border-r border-[#27272A] pl-5 pr-2 text-sm gap-x-4"]),children:[(0,h.BX)("div",{className:ew(["flex items-center gap-x-2 "]),children:["FPS Drop",(0,h.BX)("div",{className:ew(["w-fit flex items-center justify-center h-fit text-white px-1 rounded-sm font-semibold text-[10px] whitespace-nowrap","low"===t&&"bg-green-500/50","needs-improvement"===t&&"bg-[#b77116]","high"===t&&"bg-[#b94040]"]),children:["dropped to ",e.fps," FPS"]})]}),(0,h.tZ)("div",{className:ew(["flex items-center gap-x-2 w-2/4 justify-end ml-auto"]),children:(0,h.tZ)("div",{className:ew(["p-2 flex justify-center items-center border-[#27272A]"]),children:(0,h.tZ)("button",{onClick:()=>{eT.value={view:"none"}},children:(0,h.tZ)(r_,{size:18,className:"text-[#6F6F78]"})})})})]})})}},az=({flashingItemsCount:e,totalEvents:t})=>{let[n,r]=(0,u.eJ)(!1),a=(0,u.sO)(0),i=(0,u.sO)(0);return(0,u.d4)(()=>
207{if(a.current>=t)return;let e=Date.now()-i.current;if(e>=250){r(!1);let e=setTimeout(()=>{a.current=t,i.current=Date.now(),r(!0),setTimeout(()=>{r(!1)},2e3)},50);return()=>clearTimeout(e)}{let n=setTimeout(()=>{r(!1),setTimeout(()=>{a.current=t,i.current=Date.now(),r(!0),setTimeout(()=>{r(!1)},2e3)},50)},250-e);return()=>clearTimeout(n)}},[e]),n},aZ=({item:e,shouldFlash:t})=>{let[n,r]=(0,u.eJ)(!1),a=e.events.map(rO).reduce((e,t)=>{switch(t){case"high":return"high";case"needs-improvement":return"high"===e?"high":"needs-improvement";case"low":return e}},"low"),i=az({flashingItemsCount:e.events.reduce((e,n)=>t(n.id)?e+1:e,0),totalEvents:e.events.length});return(0,h.BX)("div",{className:ew(["flex flex-col gap-y-0.5"]),children:[(0,h.BX)("button",{onClick:()=>r(e=>!e),className:ew(["pl-2 py-1.5 text-sm flex items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",i&&!n&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[(0,h.BX)("div",{className:ew(["w-4/5 flex items-center justify-start h-full text-xs truncate gap-x-1.5"]),children:[(0,h.tZ)("span",{className:ew(["min-w-fit"]),children:(0,h.tZ)(rY,{className:ew(["text-[#A1A1AA] transition-transform",n?"rotate-90":""]),size:14},`chevron-${e.timestamp}`)}),(0,h.tZ)("span",{className:ew(["text-xs"]),children:"collapsed-frame-drops"===e.kind?"FPS Drops":rI(e.events.at(0)?.componentPath??[])})]}),(0,h.tZ)("div",{className:ew(["ml-auto min-w-fit flex justify-end items-center"]),children:(0,h.BX)("div",{style:{lineHeight:"10px"},className:ew(["w-fit flex items-center text-[10px] justify-center h-full text-white px-1 py-1 rounded-sm font-semibold","low"===a&&"bg-green-500/60","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:["x",e.events.length]})})]}),n&&(0,h.tZ)(aS,{children:e.events.toSorted((e,t)=>t.timestamp-e.timestamp).map(e=>(0,h.tZ)(aE,{event:e,shouldFlash:t(e.id)}))})]})},aS=({children:e})=>(0,h.BX)("div",{className:"relative pl-6 flex flex-col gap-y-1",children:[(0,h.tZ)("div",{className:"absolute left-3 top-0 bottom-0 w-px bg-[#27272A]"}),e]}),aT=e=>{let t=(0,p.sO)([]),[n,r]=(0,p.eJ)(new Set),a=(0,p.sO)(!0);return(0,p.d4)(()=>{if(a.current){a.current=!1,t.current=e;return}let n=new Set(e.map(e=>e.id)),i=new Set(t.current.map(e=>e.id)),o=new Set;n.forEach(e=>{i.has(e)||o.add(e)}),o.size>0&&(r(o),setTimeout(()=>{r(new Set)},2e3)),t.current=e},[e]),e=>n.has(e)},aC=({shouldFlash:e})=>{let[t,n]=(0,p.eJ)(e);return(0,p.d4)(()=>{if(e){n(!0);let e=setTimeout(()=>{n(!1)},1e3);return()=>clearTimeout(e)}},[e]),t},aE=({event:e,shouldFlash:t})=>{let{notificationState:n,setNotificationState:r}=rP(),a=rO(e),i=aC({shouldFlash:t});switch(e.kind){case"interaction":return(0,h.BX)("button",{onClick:()=>{r(t=>({...t,selectedEvent:e,route:"render-visualization",selectedFiber:null}))},className:ew(["pl-2 py-1.5 text-sm flex w-full items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",e.id===n.selectedEvent?.id&&"bg-[#18181B]",i&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[(0,h.BX)("div",{className:ew(["w-4/5 flex items-center justify-start h-full gap-x-1.5"]),children:[(0,h.tZ)("span",{className:ew(["min-w-fit text-xs"]),children:n8(()=>{switch(e.type){case"click":return(0,h.tZ)(rJ,{size:14});case"keyboard":return(0,h.tZ)(rq,{size:14})}})}),(0,h.tZ)("span",{className:ew(["text-xs pr-1 truncate"]),children:rI(e.componentPath)})]}),(0,h.tZ)("div",{className:ew([" min-w-fit flex justify-end items-center ml-auto"]),children:(0,h.tZ)("div",{style:{lineHeight:"10px"},className:ew(["gap-x-0.5 w-fit flex items-end justify-center h-full text-white px-1 py-1 rounded-sm font-semibold text-[10px]","low"===a&&"bg-green-500/50","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:(0,h.BX)("div",{style:{lineHeight:"10px"},className:ew(["text-[10px] text-white flex items-end"]),children:[rj(e.timing).toFixed(0),"ms"]})})})]});case"dropped-frames":return(0,h.BX)("button",{onClick:()=>{r(t=>({...t,selectedEvent:e,route:"render-visualization",selectedFiber:null}))},className:ew(["pl-2 py-1.5 w-full text-sm flex items-center rounded-sm hover:bg-[#18181B] relative overflow-hidden",e.id===n.selectedEvent?.id&&"bg-[#18181B]",i&&"after:absolute after:inset-0 after:bg-purple-500/30 after:animate-[fadeOut_1s_ease-out_forwards]"]),children:[(0,h.BX)("div",{className:ew(["w-4/5 flex items-center justify-start h-full text-xs truncate"]),children:[(0,h.tZ)(rK,{size:14,className:"mr-1.5"})," FPS Drop"]}),(0,h.tZ)("div",{className:ew([" min-w-fit flex justify-end items-center ml-auto"]),children:(0,h.BX)("div",{style:{lineHeight:"10px"},className:ew(["w-fit flex items-center justify-center h-full text-white px-1 py-1 rounded-sm text-[10px] font-bold","low"===a&&"bg-green-500/60","needs-improvement"===a&&"bg-[#b77116] text-[10px]","high"===a&&"bg-[#b94040]"]),children:[e.fps," FPS"]})})]})}},aA=e=>e.reduce((e,t)=>
207{let n=e.at(-1);if(!n)return[{kind:"single",event:t,timestamp:t.timestamp}];switch(n.kind){case"collapsed-keyboard":if("interaction"===t.kind&&"keyboard"===t.type&&t.componentPath.join("-")===n.events[0].componentPath.join("-"))return[...e.filter(e=>e!==n),{kind:"collapsed-keyboard",events:[...n.events,t],timestamp:Math.max(...[...n.events,t].map(e=>e.timestamp))}];return[...e,{kind:"single",event:t,timestamp:t.timestamp}];case"single":if("interaction"===n.event.kind&&"keyboard"===n.event.type&&"interaction"===t.kind&&"keyboard"===t.type&&n.event.componentPath.join("-")===t.componentPath.join("-"))return[...e.filter(e=>e!==n),{kind:"collapsed-keyboard",events:[n.event,t],timestamp:Math.max(n.event.timestamp,t.timestamp)}];if("dropped-frames"===n.event.kind&&"dropped-frames"===t.kind)return[...e.filter(e=>e!==n),{kind:"collapsed-frame-drops",events:[n.event,t],timestamp:Math.max(n.event.timestamp,t.timestamp)}];return[...e,{kind:"single",event:t,timestamp:t.timestamp}];case"collapsed-frame-drops":if("dropped-frames"===t.kind)return[...e.filter(e=>e!==n),{kind:"collapsed-frame-drops",events:[...n.events,t],timestamp:Math.max(...[...n.events,t].map(e=>e.timestamp))}];return[...e,{kind:"single",event:t,timestamp:t.timestamp}]}},[]),aX=(e=150)=>{let{notificationState:t}=rP(),[n,r]=(0,p.eJ)(t.events);return(0,p.d4)(()=>{setTimeout(()=>{r(t.events)},e)},[t.events]),[n,r]},aM=()=>{let{notificationState:e,setNotificationState:t}=rP(),n=aT(e.events),[r,a]=aX(),i=aA(r).toSorted((e,t)=>t.timestamp-e.timestamp);return(0,h.BX)("div",{className:ew(["w-full h-full gap-y-2 flex flex-col border-r border-[#27272A] overflow-y-auto"]),children:[(0,h.BX)("div",{className:ew(["text-sm text-[#65656D] pl-3 pr-1 w-full flex items-center justify-between"]),children:[(0,h.tZ)("span",{children:"History"}),(0,h.tZ)(rQ,{wrapperProps:{className:"h-full flex items-center justify-center ml-auto"},triggerContent:(0,h.tZ)("button",{className:ew(["hover:bg-[#18181B] rounded-full p-2"]),onClick:()=>{rC.getState().actions.clear(),t(e=>({...e,selectedEvent:null,selectedFiber:null,route:"other-visualization"===e.route?"other-visualization":"render-visualization"})),a([])},children:(0,h.tZ)(rG,{className:ew([""]),size:16})}),children:(0,h.tZ)("div",{className:ew(["w-full flex justify-center"]),children:"Clear all events"})})]}),(0,h.BX)("div",{className:ew(["flex flex-col px-1 gap-y-1"]),children:[0===i.length&&(0,h.tZ)("div",{className:ew(["flex items-center justify-center text-zinc-500 text-sm py-4"]),children:"No Events"}),i.map(e=>n8(()=>{switch(e.kind){case"collapsed-keyboard":case"collapsed-frame-drops":return(0,h.tZ)(aZ,{shouldFlash:n,item:e});case"single":return(0,h.tZ)(aE,{event:e.event,shouldFlash:n(e.event.id)},e.event.id)}}))]})]})},aB=e=>Object.values(e).map(e=>({id:n3(),totalTime:e.nodeInfo.reduce((e,t)=>
207e+t.selfTime,0),count:e.nodeInfo.length,name:e.nodeInfo[0].name,deletedAll:!1,parents:e.parents,elements:e.nodeInfo.map(e=>e.element),changes:{context:e.changes.fiberContext.current.filter(t=>e.changes.fiberContext.changesCounts.get(t.name)).map(t=>({name:String(t.name),count:e.changes.fiberContext.changesCounts.get(t.name)??0})),props:e.changes.fiberProps.current.filter(t=>e.changes.fiberProps.changesCounts.get(t.name)).map(t=>({name:String(t.name),count:e.changes.fiberProps.changesCounts.get(t.name)??0})),state:e.changes.fiberState.current.filter(t=>e.changes.fiberState.changesCounts.get(Number(t.name))).map(t=>({index:t.name,count:e.changes.fiberState.changesCounts.get(Number(t.name))??0}))}})),a$=e=>{(0,u.d4)(()=>{let t=setInterval(()=>{e.forEach(e=>{e.groupedFiberRenders&&e.groupedFiberRenders.forEach(e=>{if(e.deletedAll)return;if(!e.elements||0===e.elements.length){e.deletedAll=!0;return}let t=e.elements.length;e.elements=e.elements.filter(e=>e&&e.isConnected),0===e.elements.length&&t>0&&(e.deletedAll=!0)})})},5e3);return()=>{clearInterval(t)}},[e])},aF=()=>{let e=rE(),t=[];return a$(t),e.state.events.forEach(e=>{let n=aB("interaction"===e.kind?e.data.meta.detailedTiming.fiberRenders:e.data.meta.fiberRenders),r=n.reduce((e,t)=>e+t.totalTime,0);switch(e.kind){case"interaction":{let{commitEnd:a,jsEndDetail:i,interactionStartDetail
207:o,rafStart:s}=e.data.meta.detailedTiming;i-o-r<0&&n6("js time must be longer than render time");let l=Math.max(0,i-o-r),c=Math.max(e.data.meta.latency-(a-o),0);t.push({componentPath:e.data.meta.detailedTiming.componentPath,groupedFiberRenders:n,id:e.id,kind:"interaction",memory:null,timestamp:e.data.startAt,type:"keyboard"===e.data.meta.detailedTiming.interactionType?"keyboard":"click",timing:{renderTime:r,kind:"interaction",otherJSTime:l,framePreparation:s-i,frameConstruction:a-s,frameDraw:c}});return}case"long-render":t.push({kind:"dropped-frames",id:e.id,memory:null,timing:{kind:"dropped-frames",renderTime:r,otherTime:e.data.meta.latency},groupedFiberRenders:n,timestamp:e.data.startAt,fps:e.data.meta.fps});return}}),t},aR=()=>{let{notificationState:e,setNotificationState:t}=rP(),n=(0,u.sO)(null),r=(0,u.sO)(null),a=(0,u.sO)(0),[i]=aX(),o=i.filter(e=>"high"===rO(e)).length;return(0,u.d4)(()=>{let e=localStorage.getItem("react-scan-notifications-audio");if("false"!==e&&"true"!==e){localStorage.setItem("react-scan-notifications-audio","false");return}if("false"!==e){t(e=>e.audioNotificationsOptions.enabled?e:{...e,audioNotificationsOptions:{enabled:!0,audioContext:new AudioContext}});return}},[]),(0,u.d4)(()=>{let{audioNotificationsOptions:t}=e;if(!t.enabled||0===o||n.current&&n.current>=o)return;r.current&&clearTimeout(r.current);let i=Date.now()-a.current;r.current=setTimeout(()=>{w(t.audioContext),n.current=o,a.current=Date.now(),r.current=null},Math.max(0,1e3-i))},[o]),(0,u.d4)(()=>{0===o&&(n.current=null)},[o]),(0,u.d4)(()=>()=>{r.current&&clearTimeout(r.current)},[]),null},aI=(0,p.Gp)((e,t)=>{let n=aF(),[r,a]=(0,u.eJ)({detailsExpanded:!1,events:n,filterBy:"latest",moreInfoExpanded:!1,route:"render-visualization",selectedEvent:n.toSorted((e,t)=>e.timestamp-t.timestamp).at(-1)??null,selectedFiber:null,routeMessage:null,audioNotificationsOptions:{enabled:!1,audioContext:null}});return r.events=n,(0,h.BX)(rL.Provider,{value:{notificationState:r,setNotificationState:a,setRoute:({route:e,routeMessage:t})=>{a(n=>{let r={...n,route:e,routeMessage:t};switch(e){case"render-visualization":case"optimize":case"other-visualization":return ag(),{...r,selectedFiber:null};case"render-explanation":return ag(),r}})}},children:[(0,h.tZ)(aR,{}),(0,h.tZ)(aj,{ref:t})]})}),aj=(0,p.Gp)((e,t)=>{let{notificationState:n}=rP();return(0,h.BX)("div",{ref:t,className:ew(["h-full w-full flex flex-col"]),children:[n.selectedEvent&&(0,h.BX)("div",{className:ew(["w-full h-[48px] flex flex-col",n.moreInfoExpanded&&"h-[235px]",n.moreInfoExpanded&&"dropped-frames"===n.selectedEvent.kind&&"h-[150px]"]),children:[(0,h.tZ)(aN,{selectedEvent:n.selectedEvent}),n.moreInfoExpanded&&(0,h.tZ)(aD,{})]}),(0,h.BX)("div",{className:ew(["flex ",n.selectedEvent?"h-[calc(100%-48px)]":"h-full",n.moreInfoExpanded&&"h-[calc(100%-200px)]",n.moreInfoExpanded&&n.selectedEvent?.kind==="dropped-frames"&&"h-[calc(100%-150px)]"]),children:[(0,h.tZ)("div",{className:ew(["h-full min-w-[200px]"]),children:(0,h.tZ)(aM,{})}),(0,h.tZ)("div",{className:ew(["w-[calc(100%-200px)] h-full overflow-y-auto"]),children:(0,h.tZ)(ay,{})})]})]})}),aD=()=>{let{notificationState:e}=rP();if(!e.selectedEvent)throw Error("Invariant must have selected event for more info");let t=e.selectedEvent;return(0,h.tZ)("div",{className:ew(["px-4 py-2 border-b border-[#27272A] bg-[#18181B]/50 h-[calc(100%-40px)]","dropped-frames"===t.kind&&"h-[calc(100%-25px)]"]),children:(0,h.tZ)("div",{className:ew(["flex flex-col gap-y-4 h-full"]),children:n8(()=>{switch(t.kind){case"interaction":return(0,h.BX)(h.HY,{children:[(0,h.BX)("div",{className:ew(["flex items-center gap-x-3"]),children:[(0,h.tZ)("span",{className:"text-[#6F6F78] text-xs font-medium",children:"click"===t.type?"Clicked component location":"Typed in component location"}),(0,h.tZ)("div",{className:"font-mono text-[#E4E4E7] flex items-center bg-[#27272A] pl-2 py-1 rounded-sm overflow-x-auto",children:t.componentPath.toReversed().map((e,n)=>(0,h.BX)(h.HY,{children:[(0,h.tZ)("span",{style:{lineHeight:"14px"},className:"text-[10px] whitespace-nowrap",children:e},e),n<t.componentPath.length-1&&(0,h.tZ)("span",{className:"text-[#6F6F78] mx-0.5",children:"â¹"})]}))})]}),(0,h.BX)("div",{className:ew(["flex items-center gap-x-3"]),children:[(0,h.tZ)("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Total Time"}),(0,h.BX)("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:[rj(t.timing).toFixed(0),"ms"]})]}),(0,h.BX)("div",{className:ew(["flex items-center gap-x-3"]),children:[(0,h.tZ)("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Occurred"}),(0,h.tZ)("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:`${((Date.now()-t.timestamp)/1e3).toFixed(0)}s ago`})]})]});case"dropped-frames":return(0,h.BX)(h.HY,{children:[(0,h.BX)("div",{className:ew(["flex items-center gap-x-3"]),children:[(0,h.tZ)("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Total Time"}),(0,h.BX)("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:[rj(t.timing).toFixed(0),"ms"]})]}),(0,h.BX)("div",{className:ew(["flex items-center gap-x-3"]),children:[(0,h.tZ)("span",{className:"text-[#6F6F78] text-xs font-medium",children:"Occurred"}),(0,h.tZ)("span",{className:"text-[#E4E4E7] bg-[#27272A] px-1.5 py-1 rounded-sm text-xs",children:`${((Date.now()-t.timestamp)/1e3).toFixed(0)}s ago`})]})]})}})})})},aO=eE(()=>{let e=aF(),[t,n]=(0,u.eJ)(e);(0,u.d4)(()=>{let t=setTimeout(()=>{n(e)},600);return()=>{clearTimeout(t)}},[e]);let r=is.inspectState,a="inspecting"===r.value.kind,i="focused"===r.value.kind,[o,s]=(0,u.eJ)([]),l=(0,u.I4)(()=>{switch(is.inspectState.value.kind){case"inspecting":eT.value={view:"none"},is.inspectState.value={kind:"inspect-off"};return;case"focused":eT.value={view:"inspector"},is.inspectState.value={kind:"inspecting",hoveredDomElement:null};return;case"inspect-off":eT.value={view:"none"},is.inspectState.value={kind:"inspecting",hoveredDomElement:null};return;case"uninitialized":return}},[]),d=(0,u.I4)(e=>{if(e.preventDefault(),e.stopPropagation(),!il.instrumentation)return;let t=!il.instrumentation.isPaused.value;il.instrumentation.isPaused.value=t,ev("react-scan-options",{...eb("react-scan-options"),enabled:!t})},[]);(0,c.bF)(()=>{"uninitialized"===is.inspectState.value.kind&&(is.inspectState.value={kind:"inspect-off"})});let p=null,m="#999";return a?(p=(0,h.tZ)(v,{name:"icon-inspect"}),m="#8e61e3"):i?(p=(0,h.tZ)(v,{name:"icon-focus"}),m="#8e61e3"):(p=(0,h.tZ)(v,{name:"icon-inspect"}),m="#999"),(0,u.bt)(()=>{"notifications"===eT.value.view&&s([...new Set(e.map(e=>e.id)).values()])},[e.length,eT.value.view]),(0,h.BX)("div",{className:"flex max-h-9 min-h-9 flex-1 items-stretch overflow-hidden",children:[(0,h.tZ)("div",{className:"h-full flex items-center min-w-fit",children:(0,h.tZ)("button",{type:"button",id:"react-scan-inspect-element",title:"Inspect element",onClick:l,className:"button flex items-center justify-center h-full w-full pl-3 pr-2.5",style:{color:m},children:p})}),(0,h.tZ)("div",{className:"h-full flex items-center justify-center",children:(0,h.tZ)("button",{type:"button",id:"react-scan-notifications",onClick:()=>{switch("inspect-off"!==is.inspectState.value.kind&&(is.inspectState.value={kind:"inspect-off"}),eT.value.view){case"inspector":is.inspectState.value={kind:"inspect-off"},s([...new Set(e.map(e=>e.id)).values()]),eT.value={view:"notifications"};return;case"notifications":eT.value={view:"none"};return;case"none":s([...new Set(e.map(e=>e.id)).values()]),eT.value={view:"notifications"};return}},className:"button flex items-center justify-center h-full pl-2.5 pr-2.5",style:{color:m},children:(0,h.tZ)(rH,{events:t.filter(e=>!o.includes(e.id)).map(e=>"high"===rO(e)),size:16,className:ew(["text-[#999]","notifications"===eT.value.view&&"text-[#8E61E3]"])})})}),(0,h.tZ)(n2,{checked:!il.instrumentation?.isPaused.value,onChange:d,className:"place-self-ce
207nter"}),il.options.value.showFPS&&(0,h.tZ)(n5,{})]})}),aP=(0,c.Fl)(()=>"inspecting"===is.inspectState.value.kind),aL=(0,c.Fl)(()=>ew("relative","flex-1","flex flex-col","rounded-t-lg","overflow-hidden","opacity-100","transition-[opacity]",aP.value&&"opacity-0 duration-0 delay-0")),aY=(0,c.Fl)(()=>"inspector"===eT.value.view),aH=(0,c.Fl)(()=>"notifications"===eT.value.view),a_=()=>(0,h.BX)("div",{className:ew("flex flex-1 flex-col","overflow-hidden z-10","rounded-lg","bg-black","opacity-100","transition-[border-radius]","peer-hover/left:rounded-l-none","peer-hover/right:rounded-r-none","peer-hover/top:rounded-t-none","peer-hover/bottom:rounded-b-none"),children:[(0,h.BX)("div",{className:aL,children:[(0,h.tZ)(n1,{}),(0,h.BX)("div",{className:ew("relative","flex-1 flex","text-white","bg-[#0A0A0A]","transition-opacity delay-150","overflow-hidden","border-b border-[#222]"),children:[(0,h.tZ)(aU,{isOpen:aY,children:(0,h.tZ)(tx,{})}),(0,h.tZ)(aU,{isOpen:aH,children:(0,h.tZ)(aI,{})})]})]}),(0,h.tZ)(aO,{})]}),aU=({isOpen:e,children:t})=>(0,h.tZ)("div",{className:ew("flex-1","opacity-0","overflow-y-auto overflow-x-hidden","transition-opacity delay-0","pointer-events-none",e.value&&"opacity-100 delay-150 pointer-events-auto"),children:(0,h.tZ)("div",{className:"absolute inset-0 flex",children:t})}),aW=(e,t,n)=>e+(t-e)*n,aV={frameInterval:1e3/60,speeds:{fast:.51,slow:.1,off:0}},aJ=N&&window.devicePixelRatio||1,aq=()=>{let e=(0,u.sO)(null),t=(0,u.sO)(null),n=(0,u.sO)(null),r=(0,u.sO)(null),a=(0,u.sO)(null),i=(0,u.sO)(0),o=(0,u.sO)(),s=(0,u.sO)(new Map),c=(0,u.sO)(!1),d=(0,u.sO)(0),p=(e,t,n,r)=>{e.save(),e.strokeStyle="white",e.fillStyle="white",e.lineWidth=1.5;let a=.6*r,i=.5*r;e.beginPath(),e.arc(t+(r-a)/2+a/2,n+i/2,a/2,Math.PI,0,!1),e.stroke();let o=.8*r;e.fillRect(t+(r-o)/2,n+i/2,o,.5*r),e.restore()},m=(e,t,n,a)=>{if(!a)return;let i=(a?.type&&(0,l.Gf)(a.type))??"Unknown";e.save(),e.font="12px system-ui, -apple-system, sans-serif";let o=e.measureText(i).width,s="locked"===n?14:0,c="locked"===n?6:0,d=t.left,u=t.top-24-4;if(e.fillStyle="rgb(37, 37, 38, .75)",e.beginPath(),e.roundRect(d,u,o+16+s+c,24,3),e.fill(),"locked"===n){let t=d+8,n=u+(24-s)/2+2;p(e,t,n,s),r.current={x:t,y:n,width:s,height:s}}else r.current=null;e.fillStyle="white",e.textBaseline="middle",e.fillText(i,d+8+("locked"===n?s+c:0),u+12),e.restore()},f=(e,t,r,a)=>{if(!n.current)return;let i=n.current;t.clearRect(0,0,e.width,e.height),t.strokeStyle="rgba(142, 97, 227, 0.5)",t.fillStyle="rgba(173, 97, 230, 0.10)","locked"===r?t.setLineDash([]):t.setLineDash([4]),t.lineWidth=1,t.fillRect(i.left,i.top,i.width,i.height),t.strokeRect(i.left,i.top,i.width,i.height),m(t,i,r,a)},g=(e,t,r,a,s,l)=>{let c=il.options.value.animationSpeed,u=aV.speeds[c]??aV.speeds.off,p=o=>{if(o-d.current<aV.frameInterval){i.current=requestAnimationFrame(p);return}if(d.current=o,!n.current){cancelAnimationFrame(i.current);return}n.current={left:aW(n.current.left,r.left,u),top:aW(n.current.top,r.top,u),width:aW(n.current.width,r.width,u),height:aW(n.current.height,r.height,u)},f(e,t,a,s),Math.abs(n.current.left-r.left)>.1||Math.abs(n.current.top-r.top)>.1||Math.abs(n.current.width-r.width)>.1||Math.abs(n.current.height-r.height)>
207.1?i.current=requestAnimationFrame(p):(n.current=r,f(e,t,a,s),cancelAnimationFrame(i.current),t.restore(),l?.())};cancelAnimationFrame(i.current),clearTimeout(o.current),i.current=requestAnimationFrame(p),o.current=setTimeout(()=>{cancelAnimationFrame(i.current),n.current=r,f(e,t,a,s),t.restore(),l?.()},1e3)},w=(e,t,r,a,i)=>{if(t.save(),!n.current){n.current=r,f(e,t,a,i),t.restore();return}g(e,t,r,a,i)},x=async(e,t,n,r)=>{if(!e||!t||!n)return;let{parentCompositeFiber:a}=tZ(e),i=await tz(e);a&&i&&w(t,n,i,r,a)},b=()=>{for(let e of s.current.values())e?.()},v=e=>{let t=e.getContext("2d");t&&t.clearRect(0,0,e.width,e.height),n.current=null,r.current=null,a.current=null,e.classList.remove("fade-in"),c.current=!1},y=t=>{if(!e.current||c.current)return;let n=r=>{e.current&&"opacity"===r.propertyName&&c.current&&(e.current.removeEventListener("transitionend",n),v(e.current),t?.())},r=s.current.get("fade-out");r&&(r(),s.current.delete("fade-out")),e.current.addEventListener("transitionend",n),s.current.set("fade-out",()=>{e.current?.removeEventListener("transitionend",n)}),c.current=!0,e.current.classList.remove("fade-in"),requestAnimationFrame(()=>{e.current?.classList.add("fade-out")})},k=()=>{e.current&&(c.current=!1,e.current.classList.remove("fade-out"),requestAnimationFrame(()=>{e.current?.classList.add("fade-in")}))},N=e=>{e!==a.current&&(a.current=e,tC.has(e.tagName)?y():k(),is.inspectState.value={kind:"inspecting",hoveredDomElement:e})},z=()=>{n.current&&e.current&&!c.current&&y()},Z=ex(n=>{if("inspecting"!==is.inspectState.peek().kind||!t.current)return;t.current.style.pointerEvents="none";let r=document.elementFromPoint(n?.clientX??0,n?.clientY??0);if(t.current.style.removeProperty("pointer-events"),clearTimeout(o.current),r&&r!==e.current){let{parentCompositeFiber:e}=tZ(r);if(e){let t=tE(e);if(t){N(t);return}}}z()},32),S=(e,t)=>{let n=r.current;if(!n)return!1;let a=t.getBoundingClientRect(),i=t.width/a.width,o=t.height/a.height,s=(e.clientX-a.left)*i,l=(e.clientY-a.top)*o,c=s/aJ,d=l/aJ;return c>=n.x&&c<=n.x+n.width&&d>=n.y&&d<=n.y+n.height},T=e=>{"focused"===e.kind&&(is.inspectState.value={kind:"inspecting",hoveredDomElement:e.focusedDomElement})},C=e=>{let t=["react-scan-inspect-element","react-scan-power"];if(e.target instanceof HTMLElement&&t.includes(e.target.id))return;let n=a.current?.tagName;if(n&&tC.has(n))return;e.preventDefault(),e.stopPropagation();let r=a.current??document.elementFromPoint(e.clientX,e.clientY);if(!r)return;let i=e.composedPath().at(0);if(i instanceof HTMLElement&&t.includes(i.id)){let t=new MouseEvent(e.type,e);t.__reactScanSyntheticEvent=!0,i.dispatchEvent(t);return}let{parentCompositeFiber:o}=tZ(r);if(!o)return;let s=tE(o);if(!s){a.current=null,is.inspectState.value={kind:"inspect-off"};return}is.inspectState.value={kind:"focused",focusedDomElement:s,fiber:o}},E=n=>{if(n.__reactScanSyntheticEvent)return;let r=is.inspectState.peek(),a=e.current;if(a&&t.current){if(S(n,a)){n.preventDefault(),n.stopPropagation(),T(r);return}"inspecting"===r.kind&&C(n)}},A=t=>{if("Escape"!==t.key)return;let r=is.inspectState.peek();if(e.current){if(document.activeElement?.id==="react-scan-root")return;if(eT.value={view:"none"},"focused"===r.kind||"inspecting"===r.kind)switch(t.preventDefault(),t.stopPropagation(),r.kind){case"focused":k(),n.current=null,a.current=r.focusedDomElement,is.inspectState.value={kind:"inspecting",hoveredDomElement:r.focusedDomElement};break;case"inspecting":y(()=>{ek.value=!1,is.inspectState.value={kind:"inspect-off"}})}}},X=(e,r,o)=>{let l;switch(s.current.get(e.kind)?.(),t.current&&"inspecting"!==e.kind&&(t.current.style.pointerEvents="none"),i.current&&cancelAnimationFrame(i.current),e.kind){case"inspect-off":y();return;case"inspecting":x(e.hoveredDomElement,r,o,"inspecting");break;case"focused":if(!e.focusedDomElement)return;a.current!==e.focusedDomElement&&(a.current=e.focusedDomElement),eT.value={view:"inspector"},x(e.focusedDomElement,r,o,"locked"),(l=is.lastReportTime.subscribe(()=>{if(i.current&&n.current){let{parentCompositeFiber:t}=tZ(e.focusedDomElement);t&&x(e.focusedDomElement,r,o,"locked")}}
207))&&s.current.set(e.kind,l)}},M=(e,t)=>{let n=e.getBoundingClientRect();e.width=n.width*aJ,e.height=n.height*aJ,t.scale(aJ,aJ),t.save()},B=()=>{let t=is.inspectState.peek(),r=e.current;if(!r)return;let a=r?.getContext("2d");a&&(cancelAnimationFrame(i.current),clearTimeout(o.current),M(r,a),n.current=null,"focused"===t.kind&&t.focusedDomElement?x(t.focusedDomElement,r,a,"locked"):"inspecting"===t.kind&&t.hoveredDomElement&&x(t.hoveredDomElement,r,a,"inspecting"))},$=t=>{let n=is.inspectState.peek(),r=e.current;r&&("inspecting"===n.kind||S(t,r))&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())};return(0,u.d4)(()=>{let t=e.current;if(!t)return;let n=t?.getContext("2d");if(!n)return;M(t,n);let r=is.inspectState.subscribe(e=>{X(e,t,n)});return window.addEventListener("scroll",B,{passive:!0}),window.addEventListener("resize",B,{passive:!0}),document.addEventListener("pointermove",Z,{passive:!0,capture:!0}),document.addEventListener("pointerdown",$,{capture:!0}),document.addEventListener("click",E,{capture:!0}),document.addEventListener("keydown",A,{capture:!0}),()=>{b(),r(),window.removeEventListener("scroll",B),window.removeEventListener("resize",B),document.removeEventListener("pointermove",Z,{capture:!0}),document.removeEventListener("click",E,{capture:!0}),document.removeEventListener("pointerdown",$,{capture:!0}),document.removeEventListener("keydown",A,{capture:!0}),i.current&&cancelAnimationFrame(i.current),clearTimeout(o.current)}},[]),(0,h.BX)(h.HY,{children:[(0,h.tZ)("div",{ref:t,className:ew("fixed inset-0 w-screen h-screen","z-[214748365]"),style:{pointerEvents:"none"}}),(0,h.tZ)("canvas",{ref:e,dir:"ltr",className:ew("react-scan-inspector-overlay","fixed inset-0 w-screen h-screen","pointer-events-none","z-[214748367]")})]})},aG=class{constructor(e,t){this.width=e,this.height=t,this.maxWidth=e-48,this.maxHeight=t-48}rightEdge(e){return this.width-e-24}bottomEdge(e){return this.height-e-24}isFullWidth(e){return e>=this.maxWidth}isFullHeight(e){return e>=this.maxHeight}},aK=()=>{let e=window.innerWidth,t=window.innerHeight;return o&&o.width===e&&o.height===t?o:o=new aG(e,t)},aQ=(e,t,n,r,a)=>{if(n){if("top-left"===e)return"bottom-right";if("top-right"===e)return"bottom-left";if("bottom-left"===e)return"top-right";if("bottom-right"===e)return"top-left";let[n,r]=t.split("-");if("left"===e)return`${n}-right`;if("right"===e)return`${n}-left`;if("top"===e)return`bottom-${r}`;if("bottom"===e)return`top-${r}`}if(r){if("left"===e)return`${t.split("-")[0]}-right`;if("right"===e)return`${t.split("-")[0]}-left`}if(a){if("top"===e)return`bottom-${t.split("-")[1]}`;if("bottom"===e)return`top-${t.split("-")[1]}`}return t},a0=(e,t,n)=>{let r,a;let i=window.innerWidth,o=window.innerHeight,s=t===y.width,l=s?t:Math.min(t,i-48),c=s?n:Math.min(n,o-48);switch(e){case"top-right":r=i-l-24,a=24;break;case"bottom-right":r=i-l-24,a=o-c-24;break;case"bottom-left":r=24,a=o-c-24;break;default:r=24,a=24}return s&&(r=Math.max(24,Math.min(r,i-l-24)),a=Math.max(24,Math.min(a,o-c-24))),{x:r,y:a}},a1=(e,t)=>{let[n,r]=t.split("-");return e!==n&&e!==r},a2=(e,t,n,r)=>!!n&&!!r||(n||r?n?e!==t.split("-")[0]:!!r&&e!==t.split("-")[1]:a1(e,t)),a4=(e,t,n)=>Math.min(Math.max(n?y.width:y.initialHeight,e+t),n?aK().maxWidth:aK().maxHeight),a5=(e,t,n,r,a)=>{let i=window.innerWidth-48,o=window.innerHeight-48,s=t.width,l=t.height,c=n.x,d=n.y;if(e.includes("right")){let e=window.innerWidth-n.x-24,a=Math.min(t.width+r,e);s=Math.min(i,Math.max(y.width,a))}if(e.includes("left")){let e=n.x+t.width-24,a=Math.min(t.width-r,e);s=Math.min(i,Math.max(y.width,a)),c=n.x-(s-t.width)}if(e.includes("bottom")){let e=window.innerHeight-n.y-24,r=Math.min(t.height+a,e);l=Math.min(o,Math.max(y.initialHeight,r))}if(e.includes("top")){let e=n.y+t.height-24,r=Math.min(t.height-a,e);l=Math.min(o,Math.max(y.initialHeight,r)),d=n.y-(l-t.height)}return c=Math.max(24,Math.min(c,window.innerWidth-24-s)),d=Math.max(24,Math.min(d,window.innerHeight-24-l)),{newSize:{width:s,height:l},newPosition:{x:c,y:d}}},a3=e=>{let t=aK(),n={"top-left":Math.hypot(e.x,e.y),"top-right":Math.hypot(t.maxWidth-e.x,e.y),"bottom-left":Math.hypot(e.x,t.maxHeight-e.y),"bottom-right":Math.hypot(t.maxWidth-e.x,t.maxHeight-e.y)},r="top-left";for(let e in n)n[e]<n[r]&&(r=e);return r},a6=(e,t,n,r,a=100)=>{let i=void 0!==n?e-n:0,o=void 0!==r?t-r:0,s=window.innerWidth/2,l=window.innerHeight/2,c=i>a,d=o>a;if(c||i<-a){let e=t>l;return c?e?"bottom-right":"top-right":e?"bottom-left":"top-left"}if(d||o<-a){let t=e>s;return d?t?"bottom-right":"bottom-left":t?"top-right":"top-left"}return e>s?t>l?"bottom-right":"top-right":t>l?"bottom-left":"top-left"},a8=({position:e})=>{let t=(0,u.sO)(null),n=(0,u.sO)(null),r=(0,u.sO)(null),a=(0,u.sO)(null);(0,u.d4)(()=>{let i=t.current;if(!i)return;let o=()=>{i.classList.remove("pointer-events-none");let t="focused"===is.inspectState.value.kind,n="none"!==eT.value.view;(t||n)&&a2(e,eZ.value.corner,eZ.value.dimensions.isFullWidth,eZ.value.dimensions.isFullHeight)?i.classList.remove("hidden","pointer-events-none","opacity-0"):i.classList.add("hidden","pointer-events-none","opacity-0")},s=eZ.subscribe(e=>{(null===n.current||null===r.current||null===a.current||e.dimensions.width!==n.current||e.dimensions.height!==r.current||e.corner!==a.current)&&(o(),n.current=e.dimensions.width,r.current=e.dimensions.height,a.current=e.corner)}),l=is.inspectState.subscribe(()=>{o()});return()=>{s(),l(),n.current=null,r.current=null,a.current=null}},[]);let i=(0,u.I4)(t=>{t.preventDefault(),t.stopPropagation();let n=eN.value;if(!n)return;let r=n.style,{dimensions:a}=eZ.value,i=t.clientX,o=t.clientY,s=a.width,l=a.height,c=a.position;eZ.value={...eZ.value,dimensions:{...a,isFullWidth:!1,isFullHeight:!1,width:s,height:l,position:c}};let d=null,u=t=>{d||(r.transition="none",d=requestAnimationFrame(()=>{let{newSize:n,newPosition:a}=a5(e,{width:s,height:l},c,t.clientX-i,t.clientY-o);r.transform=`translate3d(${a.x}px, ${a.y}px, 0)`,r.width=`${n.width}px`,r.height=`${n.height}px`;let u=Math.floor(n.width-120),p=eZ.value.componentsTree.width;eZ.value={...eZ.value,dimensions:{isFullWidth:!1,isFullHeight:!1,width:n.width,height:n.height,position:a},componentsTree:{...eZ.value.componentsTree,width:Math.min(u,Math.max(240,p))}},d=null}))},p=()=>{d&&(cancelAnimationFrame(d),d=null),document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",p);let{dimensions:e,corner:t}=eZ.value,a=aK(),i=a.isFullWidth(e.width),o=a.isFullHeight(e.height),s=t;(i&&o||i||o)&&(s=a3(e.position));let l=a0(s,e.width,e.height),c=()=>{n.removeEventListener("transitionend",c)};n.addEventListener("transitionend",c),r.transform=`translate3d(${l.x}px, ${l.y}px, 0)`,eZ.value={...eZ.value,corner:s,dimensions:{isFullWidth:i,isFullHeight:o,width:e.width,height:e.height,position:l},lastDimensions:{isFullWidth:i,isFullHeight:o,width:e.width,height:e.height,position:l}},ev(k,{corner:s,dimensions:eZ.value.dimensions,lastDimensions:eZ.value.lastDimensions,componentsTree:eZ.value.componentsTree})};document.addEventListener("pointermove",u,{passive:!0}),document.addEventListener("pointerup",p)},[]),o=(0,u.I4)(t=>{t.preventDefault(),t.stopPropagation();let n=eN.value;if(!n)return;let r=n.style,{dimensions:a,corner:i}=eZ.value,o=aK(),s=o.isFullWidth(a.width),l=o.isFullHeight(a.height),c=s&&l,d=(s||l)&&!c,u=a.width,p=a.height,h=aQ(e,i,c,s,l);"left"===e||"right"===e?(u=s?a.width:o.maxWidth,d&&(u=s?y.width:o.maxWidth)):(p=l?a.height:o.maxHeight,d&&(p=l?y.initialHeight:o.maxHeight)),c&&("left"===e||"right"===e?u=y.width:p=y.initialHeight);let m=a0(h,u,p),f={isFullWidth:o.isFullWidth(u),isFullHeight:o.isFullHeight(p),width:u,height:p,position:m},g=Math.floor(u-y.width/2),w=eZ.value.componentsTree.width,x=Math.floor(.3*u),b=s?240:"left"!==e&&"right"!==e||s?Math.min(g,Math.max(240,w)):Math.min(g,Math.max(240,x));requestAnimationFrame(()=>{eZ.value={corner:h,dimensions:f,lastDimensions:a,componentsTree:{...eZ.value.componentsTree,width:b}},r.transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",r.width=`${u}px`,r.height=`${p}px`,r.transform=`translate3d(${m.x}px, ${m.y}px, 0)`}),ev(k,{corner:h,dimensions:f,lastDimensions:a,componentsTree:{...eZ.value.componentsTree,width:b}})},[]);return(0,h.tZ)("div",{ref:t,onPointerDown:i,onDblClick:o,className:ew("absolute z-50","flex items-center justify-center","group","transition-colors select-none","peer",{"resize-left peer/left":"left"===e,"resize-right peer/right z-10":"right"===e,"resize-top peer/top":"top"===e,"resize-bottom peer/bottom":"bottom"===e}),children:(0,h.tZ)("span",{className:"resize-line-wrapper",children:(0,h.tZ)("span",{className:"resize-line",children:(0,h.tZ)(v,{name:"icon-ellipsis",size:18,className:ew("text-neutral-400",("left"
207===e||"right"===e)&&"rotate-90")})})})})},a7=()=>{let e=(0,u.sO)(null),t=(0,u.sO)(!1),n=(0,u.sO)(0),r=(0,u.sO)(0),a=(0,u.I4)((a=!0)=>{let i,o;if(!e.current)return;let{corner:s}=eZ.value;if(t.current){let e=eZ.value.lastDimensions;i=a4(e.width,0,!0),o=a4(e.height,0,!1)}else{let e=eZ.value.dimensions;e.width>n.current&&(eZ.value={...eZ.value,lastDimensions:{isFullWidth:e.isFullWidth,isFullHeight:e.isFullHeight,width:e.width,height:e.height,position:e.position}}),i=n.current,o=r.current}let l=a0(s,i,o),c=i<y.width||o<y.initialHeight,d=e.current,u=d.style,p=null,h=()=>{eS(),d.removeEventListener("transitionend",h),p&&(cancelAnimationFrame(p),p=null)};d.addEventListener("transitionend",h),u.transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",p=requestAnimationFrame(()=>{u.width=`${i}px`,u.height=`${o}px`,u.transform=`translate3d(${l.x}px, ${l.y}px, 0)`,p=null});let m={isFullWidth:i>=window.innerWidth-48,isFullHeight:o>=window.innerHeight-48,width:i,height:o,position:l};eZ.value={corner:s,dimensions:m,lastDimensions:t?eZ.value.lastDimensions:i>n.current?m:eZ.value.lastDimensions,componentsTree:eZ.value.componentsTree},a&&!c&&ev(k,{corner:eZ.value.corner,dimensions:eZ.value.dimensions,lastDimensions:eZ.value.lastDimensions,componentsTree:eZ.value.componentsTree}),eS()},[]),i=(0,u.I4)(t=>{if(t.preventDefault(),!e.current||t.target.closest("button"))return;let n=e.current,r=n.style,{dimensions:a}=eZ.value,i=t.clientX,o=t.clientY,s=a.position.x,l=a.position.y,c=s,d=l,u=null,p=!1,h=i,m=o,f=e=>{u||(p=!0,h=e.clientX,m=e.clientY,u=requestAnimationFrame(()=>{let e=h-i,t=m-o;c=Number(s)+e,d=Number(l)+t,r.transition="none",r.transform=`translate3d(${c}px, ${d}px, 0)`,u=null}))},g=()=>{if(!n)return;u&&(cancelAnimationFrame(u),u=null),document.removeEventListener("pointermove",f),document.removeEventListener("pointerup",g);let e=Math.abs(h-i),t=Math.abs(m-o);if(!p||60>Math.sqrt(e*e+t*t))return;let w=a6(h,m,i,o,"focused"===is.inspectState.value.kind?80:40);if(w===eZ.value.corner){r.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)";let e=eZ.value.dimensions.position;requestAnimationFrame(()=>{r.transform=`translate3d(${e.x}px, ${e.y}px, 0)`});return}let x=a0(w,a.width,a.height);if(c===s&&d===l)return;let b=()=>{r.transition="none",eS(),n.removeEventListener("transitionend",b),u&&(cancelAnimationFrame(u),u=null)};n.addEventListener("transitionend",b),r.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",requestAnimationFrame(()=>{r.transform=`translate3d(${x.x}px, ${x.y}px, 0)`}),eZ.value={corner:w,dimensions:{isFullWidth:a.isFullWidth,isFullHeight:a.isFullHeight,width:a.width,height:a.height,position:x},lastDimensions:eZ.value.lastDimensions,componentsTree:eZ.value.componentsTree},ev(k,{corner:w,dimensions:eZ.value.dimensions,lastDimensions:eZ.value.lastDimensions,componentsTree:eZ.value.componentsTree})};document.addEventListener("pointermove",f),document.addEventListener("pointerup",g)},[]);(0,u.d4)(()=>{if(!e.current)return;e.current.style.width="min-content",r.current=36,n.current=e.current.offsetWidth,e.current.style.maxWidth="calc(100vw - 48px)",e.current.style.maxHeight="calc(100vh - 48px)","focused"!==is.inspectState.value.kind&&(eZ.value={...eZ.value,dimensions:{isFullWidth:!1,isFullHeight:!1,width:n.current,height:r.current,position:eZ.value.dimensions.position}}),eN.value=e.current;let i=eZ.subscribe(t=>{if(!e.current)return;let{x:n,y:r}=t.dimensions.position,{width:a,height:i}=t.dimensions,o=e.current;requestAnimationFrame(()=>{o.style.transform=`translate3d(${n}px, ${r}px, 0)`,o.style.width=`${a}px`,o.style.height=`${i}px`})}),o=eT.subscribe(e=>{t.current="none"!==e.view,a()}),s=is.inspectState.subscribe(e=>{t.current="focused"===e.kind,a()}),l=()=>{a(!0)};return window.addEventListener("resize",l,{passive:!0}),()=>{window.removeEventListener("resize",l),o(),s(),i(),ev(k,{...ez,corner:eZ.value.corner})}},[]);let[o,s]=(0,u.eJ)(!1);return(0,u.d4)(()=>{s(!0)},[]),(0,h.BX)(h.HY,{children:[(0,h.tZ)(aq,{}),(0,h.tZ)(a9.Provider,{value:e.current,children:(0,h.BX)("div",{id:"react-scan-toolbar",dir:"ltr",ref:e,onPointerDown:i,className:ew("fixed inset-0 rounded-lg shadow-lg","flex flex-col","font-mono text-[13px]","user-select-none","opacity-0","cursor-move","z-[124124124124]","animate-fade-in animation-duration-300 animation-delay-300","will-change-transform","[touch-action:none]"),children:[(0,h.tZ)(a8,{position:"top"}),(0,h.tZ)(a8,{position:"bottom"}),(0,h.tZ)(a8,{position:"left"}),(0,h.tZ)(a8,{position:"right"}),(0,h.tZ)(a_,{})]})})]})},a9=(0,d.kr)(null),ie=()=>(0,h.BX)("svg",{xmlns:"http://www.w3.org/2000/svg",style:"display: none;",children:[(0,h.tZ)("title",{children:"React Scan Icons"}),(0,h.BX)("symbol",{id:"icon-inspect",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.
207067 3.443a.5.5 0 0 1-.943.033z"}),(0,h.tZ)("path",{d:"M5 3a2 2 0 0 0-2 2"}),(0,h.tZ)("path",{d:"M19 3a2 2 0 0 1 2 2"}),(0,h.tZ)("path",{d:"M5 21a2 2 0 0 1-2-2"}),(0,h.tZ)("path",{d:"M9 3h1"}),(0,h.tZ)("path",{d:"M9 21h2"}),(0,h.tZ)("path",{d:"M14 3h1"}),(0,h.tZ)("path",{d:"M3 9v1"}),(0,h.tZ)("path",{d:"M21 9v2"}),(0,h.tZ)("path",{d:"M3 14v1"})]}),(0,h.BX)("symbol",{id:"icon-focus",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"}),(0,h.tZ)("path",{d:"M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"})]}),(0,h.tZ)("symbol",{id:"icon-next",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:(0,h.tZ)("path",{d:"M6 9h6V5l7 7-7 7v-4H6V9z"})}),(0,h.tZ)("symbol",{id:"icon-previous",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:(0,h.tZ)("path",{d:"M18 15h-6v4l-7-7 7-7v4h6v6z"})}),(0,h.BX)("symbol",{id:"icon-close",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,h.tZ)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),(0,h.BX)("symbol",{id:"icon-replay",viewBox:"0 0 24 24",fill:"none","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"M3 7V5a2 2 0 0 1 2-2h2"}),(0,h.tZ)("path",{d:"M17 3h2a2 2 0 0 1 2 2v2"}),(0,h.tZ)("path",{d:"M21 17v2a2 2 0 0 1-2 2h-2"}),(0,h.tZ)("path",{d:"M7 21H5a2 2 0 0 1-2-2v-2"}),(0,h.tZ)("circle",{cx:"12",cy:"12",r:"1"}),(0,h.tZ)("path",{d:"M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"})]}),(0,h.BX)("symbol",{id:"icon-ellipsis",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("circle",{cx:"12",cy:"12",r:"1"}),(0,h.tZ)("circle",{cx:"19",cy:"12",r:"1"}),(0,h.tZ)("circle",{cx:"5",cy:"12",r:"1"})]}),(0,h.BX)("symbol",{id:"icon-copy",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),(0,h.tZ)("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),(0,h.tZ)("symbol",{id:"icon-check",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:(0,h.tZ)("path",{d:"M20 6 9 17l-5-5"})}),(0,h.tZ)("symbol",{id:"icon-chevron-right",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:(0,h.tZ)("path",{d:"m9 18 6-6-6-6"})}),(0,h.BX)("symbol",{id:"icon-settings",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"}),(0,h.tZ)("circle",{cx:"12",cy:"12",r:"3"})]}),(0,h.tZ)("symbol",{id:"icon-flame",viewBox:"0 0 24 24",children:(0,h.tZ)("path",{d:"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"})}),(0,h.BX)("symbol",{id:"icon-function",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}),(0,h.tZ)("path",{d:"M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"}),(0,h.tZ)("path",{d:"M9 11.2h5.7"})]}),(0,h.BX)("symbol",{id:"icon-triangle-alert",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}),(0,h.tZ)("path",{d:"M12 9v4"}),(0,h.tZ)("path",{d:"M12 17h.01"})]}),(0,h.BX)("symbol",{id:"icon-gallery-horizontal-end",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"M2 7v10"}),(0,h.tZ)("path",{d:"M6 5v14"}),(0,h.tZ)("rect",{width:"12",height:"18",x:"10",y:"3",rx:"2"})]}),(0,h.BX)("symbol",{id:"icon-search",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("circle",{cx:"11",cy:"11",r:"8"}),(0,h.tZ)("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),(0,h.BX)("symbol",{id:"icon-lock",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),(0,h.tZ)("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]}),(0,h.BX)("symbol",{id:"icon-lock-open",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2"}),(0,h.tZ)("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]}),(0,h.BX)("symbol",{id:"icon-sanil",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[(0,h.tZ)("path",{d:"M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"}),(0,h.tZ)("circle",{cx:"10",cy:"13",r:"8"}),(0,h.tZ)("path",{d:"M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"}),(0,h.tZ)("path",{d:"M18 3 19.1 5.2"})]})]}),it=class extends d.wA{constructor(){super(...arguments),this.state={hasError:!1,error:null},this.handleReset=()=>{this.setState({hasError:!1,error:null})}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}render(){return this.state.hasError?(0,h.tZ)("div",{className:"fixed bottom-4 right-4 z-[124124124124]",children:(0,h.BX)("div",{className:"p-3 bg-black rounded-lg shadow-lg w-80",children:[(0,h.BX)("div",{className:"flex items-center gap-2 mb-2 text-red-400 text-sm font-medium",children:[(0,h.tZ)(v,{name:"icon-flame",className:"text-red-500",size:14}),"React Scan ran into a problem"]}),(0,h.tZ)("div",{className:"p-2 bg-black rounded font-mono text-xs text-red-300 mb-3 break-words",children:this.state.error?.message||JSON.stringify(this.state.error)}),(0,h.tZ)("button",{type:"button",onClick:this.handleReset,className:"px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded text-xs font-medium transition-colors flex items-center justify-center gap-1.5",children:"Restart"})]})}):this.props.children}},ir=e=>{let t=document.createElement("div");t.id="react-scan-toolbar-root",window.__REACT_SCAN_TOOLBAR_CONTAINER__=t,e.appendChild(t),(0,d.sY)((0,h.tZ)(it,{children:(0,h.BX)(h.HY,{children:[(0,h.tZ)(ie,{}),(0,h.tZ)(a7,{})]})}),t);let n=t.remove.bind(t);return t.remove=()=>{window.__REACT_SCAN_TOOLBAR_CONTAINER__=void 0,t.hasChildNodes()&&((0,d.sY)(null,t),(0,d.sY)(null,t)),n()},t},ia=null,ii=null,io=()=>
207{if(ia&&ii)return{rootContainer:ia,shadowRoot:ii};(ia=document.createElement("div")).id="react-scan-root",ii=ia.attachShadow({mode:"open"});let e=document.createElement("style");return e.textContent="*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;
207\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/je
207nsimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none;\n}\n.\\!container {\n width: 100% !important;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 640px) {\n\n .\\!container {\n max-width: 640px !important;\n }\n\n .container {\n max-width: 640px;\n }\n}\n@media (min-width: 768px) {\n\n .\\!container {\n max-width: 768px !important;\n }\n\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n\n .\\!container {\n max-width: 1024px !important;\n }\n\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n\n .\\!container {\n max-width: 1280px !important;\n }\n\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n\n .\\!container {\n max-width: 1536px !important;\n }\n\n .container {\n max-width: 1536px;\n }\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.pointer-events-auto {\n pointer-events: auto;\n}\n.visible {\n visibility: visible;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.inset-x-1 {\n left: 4px;\n right: 4px;\n}\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n.-right-1 {\n right: -4px;\n}\n.-right-2\\.5 {\n right: -10px;\n}\n.-top-1 {\n top: -4px;\n}\n.-top-2\\.5 {\n top: -10px;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-4 {\n bottom: 16px;\n}\n.left-0 {\n left: 0px;\n}\n.left-3 {\n left: 12px;\n}\n.right-0 {\n right: 0px;\n}\n.right-0\\.5 {\n right: 2px;\n}\n.right-2 {\n right: 8px;\n}\n.right-4 {\n right: 16px;\n}\n.top-0 {\n top: 0px;\n}\n.top-0\\.5 {\n top: 2px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-2 {\n top: 8px;\n}\n.z-10 {\n z-index: 10;\n}\n.z-100 {\n z-index: 100;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[124124124124\\] {\n z-index: 124124124124;\n}\n.z-\\[214748365\\] {\n z-index: 214748365;\n}\n.z-\\[214748367\\] {\n z-index: 214748367;\n}\n.m-\\[2px\\] {\n margin: 2px;\n}\n.mx-0\\.5 {\n margin-left: 2px;\n margin-right: 2px;\n}\n.\\!ml-0 {\n margin-left: 0px !important;\n}\n.mb-1\\.5 {\n margin-bottom: 6px;\n}\n.mb-2 {\n margin-bottom: 8px;\n}\n.mb-3 {\n margin-bottom: 12px;\n}\n.mb-4 {\n margin-bottom: 16px;\n}\n.mb-px {\n margin-bottom: 1px;\n}\n.ml-1 {\n margin-left: 4px;\n}\n.ml-1\\.5 {\n margin-left: 6px;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-0\\.5 {\n margin-right: 2px;\n}\n.mr-1 {\n margin-right: 4px;\n}\n.mr-1\\.5 {\n margin-right: 6px;\n}\n.mr-16 {\n margin-right: 64px;\n}\n.mr-auto {\n margin-right: auto;\n}\n.mt-0\\.5 {\n margin-top: 2px;\n}\n.mt-1 {\n margin-top: 4px;\n}\n.mt-4 {\n margin-top: 16px;\n}\n.block {\n display: block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.table {\n display: table;\n}\n.hidden {\n display: none;\n}\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n.h-1 {\n height: 4px;\n}\n.h-1\\.5 {\n height: 6px;\n}\n.h-10 {\n height: 40px;\n}\n.h-12 {\n height: 48px;\n}\n.h-4 {\n height: 16px;\n}\n.h-4\\/5 {\n height: 80%;\n}\n.h-6 {\n height: 24px;\n}\n.h-7 {\n height: 28px;\n}\n.h-8 {\n height: 32px;\n}\n.h-\\[150px\\] {\n height: 150px;\n}\n.h-\\[235px\\] {\n height: 235px;\n}\n.h-\\[28px\\] {\n height: 28px;\n}\n.h-\\[48px\\] {\n height: 48px;\n}\n.h-\\[50px\\] {\n height: 50px;\n}\n.h-\\[calc\\(100\\%-150px\\)\\] {\n height: calc(100% - 150px);\n}\n.h-\\[calc\\(100\\%-200px\\)\\] {\n height: calc(100% - 200px);\n}\n.h-\\[calc\\(100\\%-25px\\)\\] {\n height: calc(100% - 25px);\n}\n.h-\\[calc\\(100\\%-40px\\)\\] {\n height: calc(100% - 40px);\n}\n.h-\\[calc\\(100\\%-48px\\)\\] {\n height: calc(100% - 48px);\n}\n.h-fit {\n height: -moz-fit-content;\n height: fit-content;\n}\n.h-full {\n height: 100%;\n}\n.h-screen {\n height: 100vh;\n}\n.max-h-0 {\n max-height: 0px;\n}\n.max-h-40 {\n max-height: 160px;\n}\n.max-h-9 {\n max-height: 36px;\n}\n.min-h-9 {\n min-height: 36px;\n}\n.min-h-\\[48px\\] {\n min-height: 48px;\n}\n.min-h-fit {\n min-height: -moz-fit-content;\n min-height: fit-content;\n}\n.w-1 {\n width: 4px;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-2\\/4 {\n width: 50%;\n}\n.w-3 {\n width: 12px;\n}\n.w-4 {\n width: 16px;\n}\n.w-4\\/5 {\n width: 80%;\n}\n.w-6 {\n width: 24px;\n}\n.w-80 {\n width: 320px;\n}
207\n.w-\\[20px\\] {\n width: 20px;\n}\n.w-\\[72px\\] {\n width: 72px;\n}\n.w-\\[90\\%\\] {\n width: 90%;\n}\n.w-\\[calc\\(100\\%-200px\\)\\] {\n width: calc(100% - 200px);\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.w-px {\n width: 1px;\n}\n.w-screen {\n width: 100vw;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-\\[200px\\] {\n min-width: 200px;\n}\n.min-w-fit {\n min-width: -moz-fit-content;\n min-width: fit-content;\n}\n.max-w-md {\n max-width: 448px;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.grow {\n flex-grow: 1;\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-\\[200\\%\\] {\n --tw-translate-y: -200%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-1 {\n --tw-translate-y: 4px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n --tw-rotate: -90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-0 {\n --tw-rotate: 0deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes fadeIn {\n\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n.animate-fade-in {\n animation: fadeIn ease-in forwards;\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-e-resize {\n cursor: e-resize;\n}\n.cursor-ew-resize {\n cursor: ew-resize;\n}\n.cursor-move {\n cursor: move;\n}\n.cursor-nesw-resize {\n cursor: nesw-resize;\n}\n.cursor-ns-resize {\n cursor: ns-resize;\n}\n.cursor-nwse-resize {\n cursor: nwse-resize;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-w-resize {\n cursor: w-resize;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.items-stretch {\n align-items: stretch;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0\\.5 {\n gap: 2px;\n}\n.gap-1 {\n gap: 4px;\n}\n.gap-1\\.5 {\n gap: 6px;\n}\n.gap-2 {\n gap: 8px;\n}\n.gap-4 {\n gap: 16px;\n}\n.gap-x-0\\.5 {\n -moz-column-gap: 2px;\n column-gap: 2px;\n}\n.gap-x-1 {\n -moz-column-gap: 4px;\n column-gap: 4px;\n}\n.gap-x-1\\.5 {\n -moz-column-gap: 6px;\n column-gap: 6px;\n}\n.gap-x-2 {\n -moz-column-gap: 8px;\n column-gap: 8px;\n}\n.gap-x-3 {\n -moz-column-gap: 12px;\n column-gap: 12px;\n}\n.gap-x-4 {\n -moz-column-gap: 16px;\n column-gap: 16px;\n}\n.gap-y-0\\.5 {\n row-gap: 2px;\n}\n.gap-y-1 {\n row-gap: 4px;\n}\n.gap-y-2 {\n row-gap: 8px;\n}\n.gap-y-4 {\n row-gap: 16px;\n}\n.space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(6px * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(6px * var(--tw-space-y-reverse));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.divide-zinc-800 > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-opacity: 1;\n border-color: rgb(39 39 42 / var(--tw-divide-opacity, 1));\n}
207\n.place-self-center {\n place-self: center;\n}\n.self-end {\n align-self: flex-end;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.\\!overflow-visible {\n overflow: visible !important;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.text-wrap {\n text-wrap: wrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.break-all {\n word-break: break-all;\n}\n.rounded {\n border-radius: 4px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 8px;\n}\n.rounded-md {\n border-radius: 6px;\n}\n.rounded-sm {\n border-radius: 2px;\n}\n.rounded-l-md {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n}\n.rounded-l-sm {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n.rounded-r-md {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n.rounded-r-sm {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.rounded-t-lg {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n.rounded-t-sm {\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n}\n.border {\n border-width: 1px;\n}\n.border-4 {\n border-width: 4px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-l {\n border-left-width: 1px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-l-1 {\n border-left-width: 1px;\n}\n.border-r {\n border-right-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-none {\n border-style: none;\n}\n.\\!border-red-500 {\n --tw-border-opacity: 1 !important;\n border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;\n}\n.border-\\[\\#1e1e1e\\] {\n --tw-border-opacity: 1;\n border-color: rgb(30 30 30 / var(--tw-border-opacity, 1));\n}\n.border-\\[\\#222\\] {\n --tw-border-opacity: 1;\n border-color: rgb(34 34 34 / var(--tw-border-opacity, 1));\n}\n.border-\\[\\#27272A\\] {\n --tw-border-opacity: 1;\n border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));\n}\n.border-\\[\\#333\\] {\n --tw-border-opacity: 1;\n border-color: rgb(51 51 51 / var(--tw-border-opacity, 1));\n}\n.border-transparent {\n border-color: transparent;\n}\n.border-zinc-800 {\n --tw-border-opacity: 1;\n border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));\n}\n.bg-\\[\\#0A0A0A\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#141414\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#18181B\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#18181B\\]\\/50 {\n background-color: rgb(24 24 27 / 0.5);\n}\n.bg-\\[\\#1D3A66\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(29 58 102 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#1E1E1E\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#1a2a1a\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(26 42 26 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#1e1e1e\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#214379d4\\] {\n background-color: #214379d4;\n}\n.bg-\\[\\#27272A\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#2a1515\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(42 21 21 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#412162\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(65 33 98 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#44444a\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(68 68 74 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#4b4b4b\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(75 75 75 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#5f3f9a\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(95 63 154 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#5f3f9a\\]\\/40 {\n background-color: rgb(95 63 154 / 0.4);\n}\n.bg-\\[\\#6a369e\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(106 54 158 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#7521c8\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(117 33 200 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#8e61e3\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(142 97 227 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#EFD81A\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(239 216 26 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#b77116\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(183 113 22 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#b94040\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(185 64 64 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#d36cff\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(211 108 255 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#efd81a6b\\] {\n background-color: #efd81a6b;\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-black\\/40 {\n background-color: rgb(0 0 0 / 0.4);\n}\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-green-500\\/50 {\n background-color: rgb(34 197 94 / 0.5);\n}\n.bg-green-500\\/60 {\n background-color: rgb(34 197 94 / 0.6);\n}\n.bg-neutral-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));\n}\n.bg-purple-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));\n}\n.bg-purple-500\\/90 {\n background-color: rgb(168 85 247 / 0.9);\n}\n.bg-purple-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));\n}\n.bg-red-500\\/90 {\n background-color: rgb(239 68 68 / 0.9);\n}
207\n.bg-red-950\\/50 {\n background-color: rgb(69 10 10 / 0.5);\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));\n}\n.bg-zinc-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));\n}\n.bg-zinc-900\\/30 {\n background-color: rgb(24 24 27 / 0.3);\n}\n.bg-zinc-900\\/50 {\n background-color: rgb(24 24 27 / 0.5);\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 4px;\n}\n.p-2 {\n padding: 8px;\n}\n.p-3 {\n padding: 12px;\n}\n.p-4 {\n padding: 16px;\n}\n.p-5 {\n padding: 20px;\n}\n.p-6 {\n padding: 24px;\n}\n.px-1 {\n padding-left: 4px;\n padding-right: 4px;\n}\n.px-1\\.5 {\n padding-left: 6px;\n padding-right: 6px;\n}\n.px-2 {\n padding-left: 8px;\n padding-right: 8px;\n}\n.px-2\\.5 {\n padding-left: 10px;\n padding-right: 10px;\n}\n.px-3 {\n padding-left: 12px;\n padding-right: 12px;\n}\n.px-4 {\n padding-left: 16px;\n padding-right: 16px;\n}\n.py-0\\.5 {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n.py-1 {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n.py-1\\.5 {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n.py-2 {\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.py-3 {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n.py-4 {\n padding-top: 16px;\n padding-bottom: 16px;\n}\n.py-\\[1px\\] {\n padding-top: 1px;\n padding-bottom: 1px;\n}\n.py-\\[3px\\] {\n padding-top: 3px;\n padding-bottom: 3px;\n}\n.py-\\[5px\\] {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n.pb-2 {\n padding-bottom: 8px;\n}\n.pl-1 {\n padding-left: 4px;\n}\n.pl-2 {\n padding-left: 8px;\n}\n.pl-2\\.5 {\n padding-left: 10px;\n}\n.pl-3 {\n padding-left: 12px;\n}\n.pl-5 {\n padding-left: 20px;\n}\n.pl-6 {\n padding-left: 24px;\n}\n.pr-1 {\n padding-right: 4px;\n}\n.pr-1\\.5 {\n padding-right: 6px;\n}\n.pr-2 {\n padding-right: 8px;\n}\n.pr-2\\.5 {\n padding-right: 10px;\n}\n.pt-0 {\n padding-top: 0px;\n}\n.pt-2 {\n padding-top: 8px;\n}\n.pt-5 {\n padding-top: 20px;\n}\n.text-left {\n text-align: left;\n}\n.font-mono {\n font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[11px\\] {\n font-size: 11px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-\\[14px\\] {\n font-size: 14px;\n}\n.text-\\[17px\\] {\n font-size: 17px;\n}\n.text-\\[8px\\] {\n font-size: 8px;\n}\n.text-sm {\n font-size: 14px;\n line-height: 20px;\n}\n.text-xs {\n font-size: 12px;\n line-height: 16px;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.italic {\n font-style: italic;\n}\n.leading-6 {\n line-height: 24px;\n}\n.leading-none {\n line-height: 1;\n}\n.tracking-wide {\n letter-spacing: 0.025em;\n}\n.text-\\[\\#4ade80\\] {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#5a5a5a\\] {\n --tw-text-opacity: 1;\n color: rgb(90 90 90 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#65656D\\] {\n --tw-text-opacity: 1;\n color: rgb(101 101 109 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#666\\] {\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#6E6E77\\] {\n --tw-text-opacity: 1;\n color: rgb(110 110 119 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#6F6F78\\] {\n --tw-text-opacity: 1;\n color: rgb(111 111 120 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#7346a0\\] {\n --tw-text-opacity: 1;\n color: rgb(115 70 160 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#737373\\] {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#888\\] {\n --tw-text-opacity: 1;\n color: rgb(136 136 136 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#8E61E3\\] {\n --tw-text-opacity: 1;\n color: rgb(142 97 227 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#999\\] {\n --tw-text-opacity: 1;\n color: rgb(153 153 153 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#A1A1AA\\] {\n --tw-text-opacity: 1;\n color: rgb(161 161 170 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#A855F7\\] {\n --tw-text-opacity: 1;\n color: rgb(168 85 247 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#E4E4E7\\] {\n --tw-text-opacity: 1;
207\n color: rgb(228 228 231 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#d36cff\\] {\n --tw-text-opacity: 1;\n color: rgb(211 108 255 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#f87171\\] {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.text-gray-100 {\n --tw-text-opacity: 1;\n color: rgb(243 244 246 / var(--tw-text-opacity, 1));\n}\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-neutral-300 {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity, 1));\n}\n.text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity, 1));\n}\n.text-neutral-500 {\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity, 1));\n}\n.text-purple-400 {\n --tw-text-opacity: 1;\n color: rgb(192 132 252 / var(--tw-text-opacity, 1));\n}\n.text-red-300 {\n --tw-text-opacity: 1;\n color: rgb(252 165 165 / var(--tw-text-opacity, 1));\n}\n.text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-white\\/30 {\n color: rgb(255 255 255 / 0.3);\n}\n.text-white\\/70 {\n color: rgb(255 255 255 / 0.7);\n}\n.text-yellow-300 {\n --tw-text-opacity: 1;\n color: rgb(253 224 71 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.text-zinc-200 {\n --tw-text-opacity: 1;\n color: rgb(228 228 231 / var(--tw-text-opacity, 1));\n}\n.text-zinc-400 {\n --tw-text-opacity: 1;\n color: rgb(161 161 170 / var(--tw-text-opacity, 1));\n}\n.text-zinc-500 {\n --tw-text-opacity: 1;\n color: rgb(113 113 122 / var(--tw-text-opacity, 1));\n}\n.text-zinc-600 {\n --tw-text-opacity: 1;\n color: rgb(82 82 91 / var(--tw-text-opacity, 1));\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-50 {\n opacity: 0.5;\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
207\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n outline-style: solid;\n}\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-white\\/\\[0\\.08\\] {\n --tw-ring-color: rgb(255 255 255 / 0.08);\n}\n.blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.\\!filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[border-radius\\] {\n transition-property: border-radius;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[color\\2c transform\\] {\n transition-property: color,transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[max-height\\] {\n transition-property: max-height;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[opacity\\] {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-none {\n transition-property: none;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.delay-0 {\n transition-delay: 0s;\n}\n.delay-150 {\n transition-delay: 150ms;\n}\n.delay-300 {\n transition-delay: 300ms;\n}\n.\\!duration-0 {\n transition-duration: 0s !important;\n}\n.duration-0 {\n transition-duration: 0s;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.ease-\\[cubic-bezier\\(0\\.23\\2c 1\\2c 0\\.32\\2c 1\\)\\] {\n transition-timing-function: cubic-bezier(0.23,1,0.32,1);\n}\n.ease-\\[cubic-bezier\\(0\\.25\\2c 0\\.1\\2c 0\\.25\\2c 1\\)\\] {\n transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.will-change-transform {\n will-change: transform;\n}\n.animation-duration-300 {\n animation-duration: .3s;\n}\n.animation-delay-300 {\n animation-delay: .3s;\n}\n.\\[touch-action\\:none\\] {\n touch-action: none;\n}\n\n* {\n outline: none !important;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n backface-visibility: hidden;\n\n /* WebKit (Chrome, Safari, Edge) specific scrollbar styles */\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.3);\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, .4);\n }\n\n &::-webkit-scrollbar-corner {\n background: transparent;\n }\n}\n\n@-moz-document url-prefix() {\n * {\n scrollbar-width: thin;\n scrollbar-color: rgba(255, 255, 255, 0.4) transparent;\n scrollbar-width: 6px;\n }\n}\n\n\nbutton:hover {\n background-image: none;\n}\n\n\nbutton {\n outline: 2px solid transparent;\n outline-offset: 2px;\n border-style: none;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n transition-timing-function: linear;\n cursor: pointer;\n}\n\ninput {\n border-style: none;\n background-color: transparent;\n background-image: none;\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\ninput::-moz-placeholder {\n font-size: 12px;\n line-height: 16px;\n font-style: italic;\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity, 1));\n}\n\ninput::placeholder {\n font-size: 12px;\n line-height: 16px;\n font-style: italic;\n --tw-text-opacity: 1;\n color: rgb(115 115 115 / var(--tw-text-opacity, 1));\n}\n\ninput:-moz-placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\ninput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nsvg {\n height: auto;\n width: auto;\n pointer-events: none;\n}\n\n/*\n Using CSS content with data attributes is more performant than:\n 1. React re-renders with JSX text content\n 2. Direct DOM manipulation methods:\n - element.textContent (creates/updates text nodes, triggers repaint)\n - element.innerText (triggers reflow by computing styles & layout)\n - element.innerHTML (heavy parsing, triggers reflow, security risks)\n 3. Multiple data attributes with complex CSS concatenation\n\n This approach:\n - Avoids React reconciliation\n - Uses browser's native CSS engine (optimized content updates)\n - Minimizes main thread work\n - Reduces DOM operations\n - Avoids forced reflows (layout recalculation)\n - Only triggers necessary repaints\n - Keeps pseudo-element updates in render layer\n*/\n.with-data-text {\n overflow: hidden;\n &::before {\n content: attr(data-text);\n }\n &::before {\n display: block;\n }\n &::before {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n#react-scan-toolbar {\n position: fixed;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
207\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n font-size: 13px;\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: move;\n opacity: 0;\n z-index: 2147483678;\n}\n\n@keyframes fadeIn {\n\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n#react-scan-toolbar {\n animation: fadeIn ease-in forwards;\n animation-duration: .3s;\n animation-delay: .3s;\n --tw-shadow: 0 4px 12px rgba(0,0,0,0.2);\n --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-sha
207dow);\n place-self: start;\n\n /* [CURSOR GENERATED] Anti-blur fixes:\n * We removed will-change-transform and replaced it with these properties\n * because will-change was causing stacking context issues and inconsistent\n * text rendering. The new properties work together to force proper\n * GPU acceleration without z-index side effects:\n */\n transform: translate3d(0, 0, 0); /* Forces GPU acceleration without causing stacking issues */\n backface-visibility: hidden; /* Prevents blurry text during transforms */\n perspective: 1000; /* Creates proper 3D context for crisp text */ /* Ensures consistent text rendering across browsers */\n transform-style: preserve-3d;\n}\n\n.button {\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n &:active {\n background: rgba(255, 255, 255, 0.15);\n }\n}\n\n.resize-line-wrapper {\n position: absolute;\n overflow: hidden;\n}\n\n.resize-line {\n position: absolute;\n inset: 0px;\n overflow: hidden;\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n\n svg {\n position: absolute;\n }\n\n svg {\n top: 50%;\n }\n\n svg {\n left: 50%;\n }\n\n svg {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n svg {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.resize-right,\n.resize-left {\n top: 0px;\n bottom: 0px;\n width: 24px;\n cursor: ew-resize;\n\n .resize-line-wrapper {\n top: 0px;\n bottom: 0px;\n }\n\n .resize-line-wrapper {\n width: 50%;\n }\n\n &:hover {\n .resize-line {\n --tw-translate-x: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n }\n}\n.resize-right {\n right: 0px;\n --tw-translate-x: 50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n .resize-line-wrapper {\n right: 0px;\n }\n .resize-line {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n .resize-line {\n --tw-translate-x: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.resize-left {\n left: 0px;\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n .resize-line-wrapper {\n left: 0px;\n }\n .resize-line {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n .resize-line {\n --tw-translate-x: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.resize-top,\n.resize-bottom {\n left: 0px;\n right: 0px;\n height: 24px;\n cursor: ns-resize;\n\n .resize-line-wrapper {\n left: 0px;\n right: 0px;\n }\n\n .resize-line-wrapper {\n height: 50%;\n }\n\n &:hover {\n .resize-line {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n }\n}\n.resize-top {\n top: 0px;\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n .resize-line-wrapper {\n top: 0px;\n }\n .resize-line {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n .resize-line {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.resize-bottom {\n bottom: 0px;\n --tw-translate-y: 50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n .resize-line-wrapper {\n bottom: 0px;\n }\n .resize-line {\n border-bottom-right-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n .resize-line {\n --tw-translate-y: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.react-scan-header {\n display: flex;\n align-items: center;\n -moz-column-gap: 8px;\n column-gap: 8px;\n padding-left: 12px;\n padding-right: 8px;\n min-height: 36px;\n border-bottom-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgb(34 34 34 / var(--tw-border-opacity, 1));\n overflow: hidden;\n white-space: nowrap;\n}\n\n.react-scan-replay-button,\n.react-scan-close-button {\n display: flex;\n align-items: center;\n padding: 4px;\n min-width: -moz-fit-content;\n min-width: fit-content;\n border-radius: 4px;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n}\n\n.react-scan-replay-button {\n position: relative;\n overflow: hidden;\n background-color: rgb(168 85 247 / 0.5) !important;\n\n &:hover {\n background-color: rgb(168 85 247 / 0.25);\n }\n\n &.disabled {\n opacity: 0.5;\n }\n\n &.disabled {\n pointer-events: none;\n }\n\n &:before {\n content: '';\n }\n\n &:before {\n position: absolute;\n }\n\n &:before {\n inset: 0px;\n }\n\n &:before {\n --tw-translate-x: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &:before {\n animation: shimmer 2s infinite;\n background: linear-gradient(to right,\n transparent,\n rgba(142, 97, 227, 0.3),\n transparent);\n }\n}\n\n.react-scan-close-button {\n background-color: rgb(255 255 255 / 0.1);\n\n &:hover {\n background-color: rgb(255 255 255 / 0.15);\n }\n}\n\n@keyframes shimmer {\n 100% {\n --tw-translate-x: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.react-section-header {\n position: sticky;\n z-index: 100;\n display: flex;\n align-items: center;\n -moz-column-gap: 8px;\n column-gap: 8px;\n padding-left: 12px;\n padding-right: 12px;\n height: 28px;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n --tw-text-opacity: 1;\n color: rgb(136 136 136 / var(--tw-text-opacity, 1));\n border-bottom-width: 1px;\n --tw-border-opacity: 1;\n border-color: rgb(34 34 34 / var(--tw-border-opacity, 1));\n --tw-bg-opacity: 1;\n background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));\n}\n\n.react-scan-section {\n display: flex;\n flex-direction: column;\n padding-left: 8px;\n padding-right: 8px;\n --tw-text-opacity: 1;\n color: rgb(136 136 136 / var(--tw-text-opacity, 1));\n}\n\n.react-scan-section::before {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n --tw-content: attr(data-section);\n content: var(--tw-content);\n}\n\n.react-scan-section {\n font-size: 12px;\n line-height: 16px;\n\n > .react-scan-property {\n margin-left: -14px;\n }\n}\n\n.react-scan-property {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 32px;\n border-left-width: 1px;\n border-color: transparent;\n overflow: hidden;\n}\n\n.react-scan-property-content {\n display: flex;\n flex: 1 1 0%;\n flex-direction: column;\n min-height: 28px;\n max-width: 100%;\n overflow: hidden;\n}\n\n.react-scan-string {\n color: #9ecbff;\n}
207\n\n.react-scan-number {\n color: #79c7ff;\n}\n\n.react-scan-boolean {\n color: #56b6c2;\n}\n\n.react-scan-key {\n width: -moz-fit-content;\n width: fit-content;\n max-width: 240px;\n white-space: nowrap;\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n\n.react-scan-input {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n\n@keyframes blink {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n.react-scan-arrow {\n position: absolute;\n top: 0px;\n left: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n height: 28px;\n width: 24px;\n --tw-translate-x: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n z-index: 10;\n\n > svg {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n}\n\n.react-scan-expandable {\n display: grid;\n grid-template-rows: 0fr;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 75ms;\n\n &.react-scan-expanded {\n grid-template-rows: 1fr;\n }\n\n &.react-scan-expanded {\n transition-duration: 100ms;\n }\n}\n\n.react-scan-nested {\n position: relative;\n overflow: hidden;\n\n &:before {\n content: '';\n }\n\n &:before {\n position: absolute;\n }\n\n &:before {\n top: 0px;\n }\n\n &:before {\n left: 0px;\n }\n\n &:before {\n height: 100%;\n }\n\n &:before {\n width: 1px;\n }\n\n &:before {\n background-color: rgb(107 114 128 / 0.3);\n }\n}\n\n.react-scan-settings {\n position: absolute;\n inset: 0px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-top: 8px;\n padding-bottom: 8px;\n padding-left: 16px;\n padding-right: 16px;\n --tw-text-opacity: 1;\n color: rgb(136 136 136 / var(--tw-text-opacity, 1));\n\n >div {\n display: flex;\n }\n\n >
207div {\n align-items: center;\n }\n\n >div {\n justify-content: space-between;\n }\n\n >div {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n >div {\n transition-duration: 300ms;\n }\n}\n\n.react-scan-preview-line {\n position: relative;\n display: flex;\n min-height: 28px;\n align-items: center;\n -moz-column-gap: 8px;\n column-gap: 8px;\n}\n\n.react-scan-flash-overlay {\n position: absolute;\n inset: 0px;\n opacity: 0;\n z-index: 50;\n pointer-events: none;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n mix-blend-mode: multiply;\n background-color: rgb(168 85 247 / 0.9);\n}\n\n.react-scan-toggle {\n position: relative;\n display: inline-flex;\n height: 24px;\n width: 40px;\n\n input {\n position: absolute;\n }\n\n input {\n inset: 0px;\n }\n\n input {\n z-index: 20;\n }\n\n input {\n opacity: 0;\n }\n\n input {\n cursor: pointer;\n }\n\n input {\n height: 100%;\n }\n\n input {\n width: 100%;\n }\n\n input:checked {\n +div {\n --tw-bg-opacity: 1;\n background-color: rgb(95 63 154 / var(--tw-bg-opacity, 1));\n }\n +div {\n\n &::before {\n --tw-translate-x: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &::before {\n left: auto;\n }\n\n &::before {\n --tw-border-opacity: 1;\n border-color: rgb(95 63 154 / var(--tw-border-opacity, 1));\n }\n }\n }\n\n >div {\n position: absolute;\n }\n\n >div {\n inset: 4px;\n }\n\n >div {\n --tw-bg-opacity: 1;\n background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));\n }\n\n >div {\n border-radius: 9999px;\n }\n\n >div {\n pointer-events: none;\n }\n\n >div {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n >div {\n transition-duration: 300ms;\n }\n\n >div {\n\n &:before {\n --tw-content: '';\n content: var(--tw-content);\n }\n\n &:before {\n position: absolute;\n }\n\n &:before {\n top: 50%;\n }\n\n &:before {\n left: 0px;\n }\n\n &:before {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &:before {\n height: 16px;\n }\n\n &:before {\n width: 16px;\n }\n\n &:before {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n }\n\n &:before {\n border-width: 2px;\n }\n\n &:before {\n --tw-border-opacity: 1;\n border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));\n }\n\n &:before {\n border-radius: 9999px;\n }\n\n &:before {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
207\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n\n &:before {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n &:before {\n transition-duration: 300ms;\n }\n }\n}\n\n.react-scan-flash-active {\n opacity: 0.4;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n}\n\n.react-scan-inspector-overlay {\n display: flex;\n flex-direction: column;\n opacity: 0;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n\n &.fade-out {\n opacity: 0;\n }\n\n &.fade-in {\n opacity: 1;\n }\n}\n\n.react-scan-what-changed {\n ul {\n list-style-type: disc;\n }\n ul {\n padding-left: 16px;\n }\n\n li {\n white-space: nowrap;\n }\n\n li {\n > div {\n display: flex;\n }\n > div {\n align-items: center;\n }\n > div {\n justify-content: space-between;\n }\n > div {\n -moz-column-gap: 8px;\n column-gap: 8px;\n }\n }\n}\n\n.count-badge {\n display: flex;\n align-items: center;\n -moz-column-gap: 8px;\n column-gap: 8px;\n padding-left: 6px;\n padding-right: 6px;\n padding-top: 2px;\n padding-bottom: 2px;\n border-radius: 4px;\n font-size: 12px;\n line-height: 16px;\n font-weight: 500;\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n --tw-text-opacity: 1;\n color: rgb(168 85 247 / var(--tw-text-opacity, 1));\n background-color: rgb(168 85 247 / 0.1);\n transform-origin: center;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-delay: 150ms;\n transition-duration: 300ms;\n}\n\n@keyframes countFlash {\n\n 0% {\n background-color: rgba(168, 85, 247, 0.3);\n transform: scale(1.05);\n }\n\n 100% {\n background-color: rgba(168, 85, 247, 0.1);\n transform: scale(1);\n }\n}\n\n.count-flash {\n animation: countFlash .3s ease-out forwards;\n}\n\n@keyframes countFlashShake {\n\n 0% {\n transform: translateX(0);\n }\n\n 25% {\n transform: translateX(-5px);\n }\n\n 50% {\n transform: translateX(5px) scale(1.1);\n }\n\n 75% {\n transform: translateX(-5px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.count-flash-white {\n animation: countFlashShake .3s ease-out forwards;\n transition-delay: 500ms !important;\n}\n\n.change-scope {\n display: flex;\n align-items: center;\n -moz-column-gap: 4px;\n column-gap: 4px;\n --tw-text-opacity: 1;\n color: rgb(102 102 102 / var(--tw-text-opacity, 1));\n font-size: 12px;\n line-height: 16px;\n font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;\n\n > div {\n padding-left: 6px;\n padding-right: 6px;\n }\n\n > div {\n padding-top: 2px;\n padding-bottom: 2px;\n }\n\n > div {\n transform-origin: center;\n }\n\n > div {\n border-radius: 4px;\n }\n\n > div {\n font-size: 12px;\n line-height: 16px;\n }\n\n > div {\n font-weight: 500;\n }\n\n > div {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n }\n\n > div {\n transform-origin: center;\n }\n\n > div {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n > div {\n transition-delay: 150ms;\n }\n\n > div {\n transition-duration: 300ms;\n }\n\n > div {\n\n &[data-flash=\"true\"] {\n background-color: rgb(168 85 247 / 0.1);\n }\n\n &[data-flash=\"true\"] {\n --tw-text-opacity: 1;\n color: rgb(168 85 247 / var(--tw-text-opacity, 1));\n }\n }\n}\n\n.react-scan-slider {\n position: relative;\n min-height: 24px;\n\n > input {\n position: absolute;\n }\n\n > input {\n inset: 0px;\n }\n\n > input {\n opacity: 0;\n }\n\n &:before {\n --tw-content: '';\n content: var(--tw-content);\n }\n\n &:before {\n position: absolute;\n }\n\n &:before {\n left: 0px;\n right: 0px;\n }\n\n &:before {\n top: 50%;\n }\n\n &:before {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &:before {\n height: 6px;\n }\n\n &:before {\n background-color: rgb(142 97 227 / 0.4);\n }\n\n &:before {\n border-radius: 8px;\n }\n\n &:before {\n pointer-events: none;\n }\n\n &:after {\n --tw-content: '';\n content: var(--tw-content);\n }\n\n &:after {\n position: absolute;\n }\n\n &:after {\n left: 0px;\n right: 0px;\n }\n\n &:after {\n top: -8px;\n bottom: -8px;\n }\n\n &:after {\n z-index: -10;\n }\n\n span {\n position: absolute;\n }\n\n span {\n left: 0px;\n }\n\n span {\n top: 50%;\n }\n\n span {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n span {\n height: 10px;\n }\n\n span {\n width: 10px;\n }\n\n span {\n border-radius: 8px;\n }\n\n span {\n --tw-bg-opacity: 1;\n background-color: rgb(142 97 227 / var(--tw-bg-opacity, 1));\n }\n\n span {\n pointer-events: none;\n }\n\n span {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n span {\n transition-duration: 75ms;\n }\n}\n\n.resize-v-line {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 4px;\n max-width: 4px;\n height: 100%;\n width: 100%;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n\n &:hover,\n &:active {\n > span {\n --tw-bg-opacity: 1;\n background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1));\n }\n\n svg {\n opacity: 1;\n }\n }\n\n &::before {\n --tw-content: \"\";\n content: var(--tw-content);\n }\n\n &::before {\n position: absolute;\n }\n\n &::before {\n inset: 0px;\n }\n\n &::before {\n left: 50%;\n }\n\n &::before {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &::before {\n width: 1px;\n }\n\n &::before {\n --tw-bg-opacity: 1;\n background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1));\n }\n\n &::before {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n > span {\n position: absolute;\n }\n\n > span {\n left: 50%;\n }\n\n > span {\n top: 50%;\n }\n\n > span {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n > span {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n > span {\n height: 18px;\n }\n\n > span {\n width: 6px;\n }\n\n > span {\n border-radius: 4px;\n }\n\n > span {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n svg {\n position: absolute;\n }\n\n svg {\n left: 50%;\n }\n\n svg {\n top: 50%;\n }\n\n svg {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n svg {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n svg {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n svg {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity, 1));\n }\n\n svg {\n opacity: 0;\n }\n\n svg {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n\n svg {\n z-index: 50;\n }\n}\n\n\n.tree-node-search-highlight {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n span {\n padding-top: 1px;\n padding-bottom: 1px;\n }\n\n span {\n border-radius: 2px;\n }\n\n span {\n --tw-bg-opacity: 1;\n background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));\n }\n\n span {\n font-weight: 500;\n }\n\n span {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n }\n\n .single {\n margin-right: 1px;\n }\n\n .single {\n padding-left: 2px;\n padding-right: 2px;\n }\n\n .regex {\n padding-left: 2px;\n padding-right: 2px;\n }\n\n .start {\n margin-left: 1px;\n }\n\n .start {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n }\n\n .end {\n margin-right: 1px;\n }\n\n .end {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n\n .middle {\n margin-left: 1px;\n margin-right: 1px;\n }\n\n .middle {\n border-radius: 2px;\n }\n}\n\n.react-scan-toolbar-notification {\n position: absolute;\n left: 0px;\n right: 0px;\n display: flex;\n align-items: center;\n -moz-column-gap: 8px;\n column-gap: 8px;\n padding: 4px;\n padding-left: 8px;\n font-size: 10px;\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity, 1));\n background-color: rgb(0 0 0 / 0.9);\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n\n &:before {\n --tw-content: '';\n content: var(--tw-content);\n }\n\n &:before {\n position: absolute;\n }\n\n &:before {\n left: 0px;\n right: 0px;\n }\n\n &:before {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n }\n\n &:before {\n height: 8px;\n }\n\n &.position-top {\n top: 100%;\n }\n\n &.position-top {\n --tw-translate-y: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &.position-top {\n border-bottom-right-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n &.position-top {\n\n &::before {\n top: 0px;\n }\n\n &::before {\n --tw-translate-y: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n }\n\n &.position-bottom {\n bottom: 100%;\n }\n\n &.position-bottom {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n &.position-bottom {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n &.position-bottom {\n\n &::before {\n bottom: 0px;\n }\n\n &::before {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n\n }\n\n &.is-open {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n\n.react-scan-header-item {\n position: absolute;\n inset: 0px;\n --tw-translate-y: -200%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n\n &.is-visible {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n\n.react-scan-components-tree:has(.resize-v-line:hover, .resize-v-line:active) .tree {\n overflow: hidden;\n}\n\n\n\n.react-scan-expandable {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 75ms;\n transition-timing-function: ease-out;\n\n > * {\n min-height: 0;\n }\n\n &.react-scan-expanded {\n grid-template-rows: 1fr;\n transition-duration: 100ms;\n }\n}
207\n\n\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n}\n\n\n\n.after\\:inset-0::after {\n content: var(--tw-content);\n inset: 0px;\n}\n\n\n\n.after\\:left-1\\/2::after {\n content: var(--tw-content);\n left: 50%;\n}\n\n\n\n.after\\:top-\\[100\\%\\]::after {\n content: var(--tw-content);\n top: 100%;\n}\n\n\n\n.after\\:h-\\[6px\\]::after {\n content: var(--tw-content);\n height: 6px;\n}\n\n\n\n.after\\:w-\\[10px\\]::after {\n content: var(--tw-content);\n width: 10px;\n}\n\n\n\n.after\\:-translate-x-1\\/2::after {\n content: var(--tw-content);\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n\n\n@keyframes fadeOut {\n\n 0% {\n content: var(--tw-content);\n opacity: 1;\n }\n\n 100% {\n content: var(--tw-content);\n opacity: 0;\n }\n}\n\n\n\n.after\\:animate-\\[fadeOut_1s_ease-out_forwards\\]::after {\n content: var(--tw-content);\n animation: fadeOut 1s ease-out forwards;\n}\n\n\n\n.after\\:border-l-\\[5px\\]::after {\n content: var(--tw-content);\n border-left-width: 5px;\n}\n\n\n\n.after\\:border-r-\\[5px\\]::after {\n content: var(--tw-content);\n border-right-width: 5px;\n}\n\n\n\n.after\\:border-t-\\[6px\\]::after {\n content: var(--tw-content);\n border-top-width: 6px;\n}\n\n\n\n.after\\:border-l-transparent::after {\n content: var(--tw-content);\n border-left-color: transparent;\n}\n\n\n\n.after\\:border-r-transparent::after {\n content: var(--tw-content);\n border-right-color: transparent;\n}\n\n\n\n.after\\:border-t-white::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n\n\n\n.after\\:bg-purple-500\\/30::after {\n content: var(--tw-content);\n background-color: rgb(168 85 247 / 0.3);\n}\n\n\n\n.after\\:content-\\[\\\"\\\"\\]::after {\n --tw-content: \"\";\n content: var(--tw-content);\n}\n\n\n\n.focus-within\\:border-\\[\\#454545\\]:focus-within {\n --tw-border-opacity: 1;\n border-color: rgb(69 69 69 / var(--tw-border-opacity, 1));\n}\n\n\n\n.hover\\:bg-\\[\\#0f0f0f\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(15 15 15 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.hover\\:bg-\\[\\#18181B\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.hover\\:bg-\\[\\#34343b\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(52 52 59 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.hover\\:bg-\\[\\#5f3f9a\\]\\/20:hover {\n background-color: rgb(95 63 154 / 0.2);\n}\n\n\n\n.hover\\:bg-\\[\\#5f3f9a\\]\\/40:hover {\n background-color: rgb(95 63 154 / 0.4);\n}\n\n\n\n.hover\\:bg-red-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.hover\\:bg-zinc-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.hover\\:bg-zinc-800\\/50:hover {\n background-color: rgb(39 39 42 / 0.5);\n}\n\n\n\n.hover\\:text-neutral-300:hover {\n --tw-text-opacity: 1;\n color: rgb(212 212 212 / var(--tw-text-opacity, 1));\n}\n\n\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n\n\n\n.group:hover .group-hover\\:bg-\\[\\#21437982\\] {\n background-color: #21437982;\n}\n\n\n\n.group:hover .group-hover\\:bg-\\[\\#5b2d89\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(91 45 137 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.group:hover .group-hover\\:bg-\\[\\#6a6a6a\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(106 106 106 / var(--tw-bg-opacity, 1));\n}\n\n\n\n.group:hover .group-hover\\:bg-\\[\\#efda1a2f\\] {\n background-color: #efda1a2f;\n}\n\n\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n\n\n.peer\\/bottom:hover ~ .peer-hover\\/bottom\\:rounded-b-none {\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n\n\n.peer\\/left:hover ~ .peer-hover\\/left\\:rounded-l-none {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n\n\n.peer\\/right:hover ~ .peer-hover\\/right\\:rounded-r-none {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n\n\n.peer\\/top:hover ~ .peer-hover\\/top\\:rounded-t-none {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n}",ii.appendChild(e),document.documentElement.appendChild(ia),{rootContainer:ia,shadowRoot:ii}}
207,is={wasDetailsOpen:(0,c.td)(!0),isInIframe:(0,c.td)(N&&window.self!==window.top),inspectState:(0,c.td)({kind:"uninitialized"}),monitor:(0,c.td)(null),fiberRoots:new Set,reportData:new Map,legacyReportData:new Map,lastReportTime:(0,c.td)(0),interactionListeningForRenders:null,changesListeners:new Map},il={instrumentation:null,componentAllowList:null,options:(0,c.td)({enabled:!0,log:!1,showToolbar:!0,animationSpeed:"fast",dangerouslyForceRunInProduction:!1,showFPS:!0,showNotificationCount:!0}),onRender:null,scheduledOutlines:new Map,activeOutlines:new Map,Store:is,version:"0.3.3"};N&&window.__REACT_SCAN_EXTENSION__&&(window.__REACT_SCAN_VERSION__=il.version);var ic=e=>{let t=[],n={};for(let r in e){if(!(r in il.options.value))continue;let a=e[r];switch(r){case"enabled":case"log":case"showToolbar":case"showNotificationCount":case"dangerouslyForceRunInProduction":case"showFPS":"boolean"!=typeof a?t.push(`- ${r} must be a boolean. Got "${a}"`):n[r]=a;break;case"animationSpeed":["slow","fast","off"].includes(a)?n[r]=a:t.push(`- Invalid animation speed "${a}". Using default "fast"`);break;case"onCommitStart":"function"!=typeof a?t.push(`- ${r} must be a function. Got "${a}"`):n.onCommitStart=a;break;case"onCommitFinish":"function"!=typeof a?t.push(`- ${r} must be a function. Got "${a}"`):n.onCommitFinish=a;break;case"onRender":"function"!=typeof a?t.push(`- ${r} must be a function. Got "${a}"`):n.onRender=a;break;case"onPaintStart":case"onPaintFinish":"function"!=typeof a?t.push(`- ${r} must be a function. Got "${a}"`):n[r]=a;break;default:t.push(`- Unknown option "${r}"`)}}return t.length>0&&console.warn(`[React Scan] Invalid options: 208${t.join("\n")}`),n},id=e=>{if(e){for(let t of Array.from(is.legacyReportData.values()))if(t.type===e)return t;return null}return is.legacyReportData},iu=e=>{let t=ic(e);if(0===Object.keys(t).length)return;let n="showToolbar"in t&&void 0!==t.showToolbar,r={...il.options.value,...t},{instrumentation:a}=il;a&&"enabled"in t&&(a.isPaused.value=!1===t.enabled),il.options.value=r;try{let e=eb("react-scan-options")?.enabled;"boolean"==typeof e&&(r.enabled=e)}catch{}return ev("react-scan-options",r),n&&iw(!!r.showToolbar),r},ip=()=>il.options,ih=null,im=()=>
208{if(null!==ih)return ih;for(let e of(s??=(0,l.KL)()).renderers.values())"production"===(0,l.EP)(e)&&(ih=!0);return ih},ig=()=>{try{if(!N||im()&&!il.options.value.dangerouslyForceRunInProduction)return;let e=eb("react-scan-options");if(e){let t=ic(e);Object.keys(t).length>0&&(il.options.value={...il.options.value,...t})}let t=ip();nG(()=>{iw(!!t.value.showToolbar)}),!is.monitor.value&&N&&setTimeout(()=>{(0,l.nN)()||console.error("[React Scan] Failed to load. Must import React Scan before React runs.")},5e3)}catch(e){"verbose"===il.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},iw=e=>{window.reactScanCleanupListeners?.();let t=rR(),n=ix();window.reactScanCleanupListeners=()=>{t(),n?.()};let r=window.__REACT_SCAN_TOOLBAR_CONTAINER__;if(!e){r?.remove();return}r?.remove();let{shadowRoot:a}=io();ir(a)},ix=()=>{try{let e=document.documentElement;return am(e)}catch(e){"verbose"===il.options.value._debug&&console.error("[React Scan Internal Error]","Failed to create notifications outline canvas",e)}},ib=(e={})=>{iu(e),is.isInIframe.value||!1===e.enabled&&!0!==e.showToolbar||ig()},iv=(e={})=>{iu(e),ig()},iy=(e,t)=>{let n=il.onRender;il.onRender=(r,a)=>{n?.(r,a),(0,l.oL)(r.type)===e&&t(r,a)}},ik=new WeakSet,iN=e=>{e&&"object"==typeof e&&ik.add(e)}}}]); 209//# sourceMappingURL=25b68056.17e20c88e7158902.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.