@meui-creative/dev-tools/dist/index.js

Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing

"use client";
"use strict";var Ke=Object.create;var X=Object.defineProperty;var Xe=Object.getOwnPropertyDescriptor;var qe=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var Ze=(e,s)=>{for(var c in s)X(e,c,{get:s[c],enumerable:!0})},be=(e,s,c,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of qe(s))!Ye.call(e,p)&&p!==c&&X(e,p,{get:()=>s[p],enumerable:!(l=Xe(s,p))||l.enumerable});return e};var U=(e,s,c)=>(c=e!=null?Ke(_e(e)):{},be(s||!e||!e.__esModule?X(c,"default",{value:e,enumerable:!0}):c,e)),Qe=e=>be(X({},"__esModule",{value:!0}),e);var et={};Ze(et,{DevTools:()=>te,DevToolsCore:()=>L,DevToolsForce:()=>De,DevToolsLauncher:()=>Ce,DevToolsManual:()=>$e,DevToolsProvider:()=>Ne,DevToolsStandalone:()=>Te,DevToolsTrigger:()=>W,deviceCategories:()=>q,devices:()=>z,essentialDevices:()=>V,getCleanUrl:()=>B,getPerformanceClass:()=>H,getScaleFactor:()=>Y,getVitalStatus:()=>Z,refreshAllFrames:()=>Q,useDevTools:()=>j,useDevToolsContext:()=>Se,useDevToolsTests:()=>_,withDevTools:()=>ye});module.exports=Qe(et);var P=U(require("react"));var f=U(require("react"));var i=U(require("react")),w=require("lucide-react");var C=U(require("react")),g=require("lucide-react"),z=[{name:"iPhone SE",width:375,height:667,icon:C.default.createElement(g.Smartphone,{className:"w-4 h-4"}),category:"phone",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:"iPhone 15 Pro",width:393,height:852,icon:C.default.createElement(g.Smartphone,{className:"w-4 h-4"}),category:"phone",pixelRatio:3,hasNotch:!0,statusBar:!0,browserUI:!0,os:"ios"},{name:"Samsung S24 Ultra",width:412,height:915,icon:C.default.createElement(g.Smartphone,{className:"w-4 h-4"}),category:"phone",pixelRatio:3,statusBar:!0,browserUI:!0,os:"android"},{name:"iPad Mini",width:768,height:1024,icon:C.default.createElement(g.Tablet,{className:"w-4 h-4"}),category:"tablet",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:"iPad Air",width:820,height:1180,icon:C.default.createElement(g.Tablet,{className:"w-4 h-4"}),category:"tablet",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:'iPad Pro 12.9"',width:1024,height:1366,icon:C.default.createElement(g.Tablet,{className:"w-4 h-4"}),category:"tablet",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:'MacBook Air 13"',width:1280,height:800,icon:C.default.createElement(g.Laptop,{className:"w-4 h-4"}),category:"laptop",browserUI:!0,os:"macos"},{name:'MacBook Pro 14"',width:1512,height:982,icon:C.default.createElement(g.Laptop,{className:"w-4 h-4"}),category:"laptop",browserUI:!0,os:"macos"},{name:'MacBook Pro 16"',width:1728,height:1117,icon:C.default.createElement(g.Laptop,{className:"w-4 h-4"}),category:"laptop",browserUI:!0,os:"macos"},{name:"Small Desktop",width:1366,height:768,icon:C.default.createElement(g.Monitor,{className:"w-4 h-4"}),category:"desktop",browserUI:!0,os:"windows"},{name:"Standard Desktop",width:1920,height:1080,icon:C.default.createElement(g.Monitor,{className:"w-4 h-4"}),category:"desktop",browserUI:!0,os:"windows"},{name:"4K Desktop",width:3840,height:2160,icon:C.default.createElement(g.Monitor,{className:"w-4 h-4"}),category:"desktop",browserUI:!0,os:"windows"},{name:"Ultrawide 21:9",width:3440,height:1440,icon:C.default.createElement(g.MonitorSpeaker,{className:"w-4 h-4"}),category:"special",browserUI:!0,os:"windows"},{name:"Super Ultrawide 32:9",width:5120,height:1440,icon:C.default.createElement(g.MonitorSpeaker,{className:"w-4 h-4"}),category:"special",browserUI:!0,os:"windows"},{name:"Vertical Coding",width:1440,height:2560,icon:C.default.createElement(g.MonitorSpeaker,{className:"w-4 h-4"}),category:"special",browserUI:!0,os:"windows"}],V=[z.find(e=>e.name==="iPhone 15 Pro"),z.find(e=>e.name==='MacBook Air 13"'),z.find(e=>e.name==="4K Desktop")].filter(e=>e!==void 0),q={phone:{title:"Phones",icon:C.default.createElement(g.Smartphone,{className:"w-4 h-4"})},tablet:{title:"Tablets",icon:C.default.createElement(g.Tablet,{className:"w-4 h-4"})},laptop:{title:"Laptops",icon:C.default.createElement(g.Laptop,{className:"w-4 h-4"})},desktop:{title:"Desktops",icon:C.default.createElement(g.Monitor,{className:"w-4 h-4"})},special:{title:"Special",icon:C.default.createElement(g.MonitorSpeaker,{className:"w-4 h-4"})}};var K=require("react");var _=(e,s,c,l,p,r,d)=>{let N=(0,K.useCallback)(async a=>{await new Promise(y=>setTimeout(y,2e3));let o=[{type:"contrast",severity:"serious",message:"Text elements have insufficient color contrast ratio",element:"button.primary, .text-muted",count:8,impact:"high",helpUrl:"https://webaim.org/articles/contrast/"},{type:"alt",severity:"critical",message:"Images missing alternative text",element:"img",count:5,impact:"high",helpUrl:"https://webaim.org/techniques/alttext/"},{type:"heading",severity:"moderate",message:"Heading structure is not properly nested",element:"h1, h3",count:2,impact:"medium",helpUrl:"https://webaim.org/techniques/semanticstructure/"},{type:"keyboard",severity:"serious",message:"Interactive elements not keyboard accessible",element:"div[onclick]",count:3,impact:"high",helpUrl:"https://webaim.org/techniques/keyboard/"},{type:"aria",severity:"moderate",message:"Form elements missing proper labels",element:"input, select",count:4,impact:"medium",helpUrl:"https://webaim.org/techniques/forms/"}].filter(()=>Math.random()>.3);s(y=>new Map(y).set(a,o))},[s]),$=(0,K.useCallback)(async a=>{await new Promise(k=>setTimeout(k,2500));let m=Math.round(35+Math.random()*30),o=Math.round(120+Math.random()*40),y=Math.round(8+Math.random()*12),T=Math.round(Math.random()*5),S={score:Math.round(70+Math.random()*25),title:{exists:Math.random()>.1,length:m,optimal:m>=30&&m<=60},metaDescription:{exists:Math.random()>.2,length:o,optimal:o>=120&&o<=160},headings:{h1Count:Math.round(Math.random()*3),structure:Math.random()>.3,optimal:Math.random()>.4},imageAlts:{total:y,missing:T,percentage:Math.round((y-T)/y*100)},canonicalUrl:Math.random()>.3,viewport:Math.random()>.1,https:Math.random()>.05,mobileFriendly:Math.random()>.2,pageSpeed:Math.round(60+Math.random()*35),wordCount:Math.round(300+Math.random()*1200),readabilityScore:Math.round(60+Math.random()*35),internalLinks:Math.round(3+Math.random()*12),externalLinks:Math.round(1+Math.random()*6),structuredData:Math.random()>.4,openGraph:Math.random()>.3,twitterCards:Math.random()>.5,breadcrumbs:Math.random()>.6,xmlSitemap:Math.random()>.3,robotsTxt:Math.random()>.2,hreflang:Math.random()>.7,coreWebVitals:Math.random()>.4,issues:["Meta description too short","Missing H1 tag","Images without alt text","No canonical URL specified","Missing OpenGraph tags","Low text-to-HTML ratio","Too many internal links","Missing schema markup"].filter(()=>Math.random()>.6),recommendations:["Optimize meta description length (120-160 characters)","Add structured data markup","Improve internal linking structure","Compress and optimize images","Add breadcrumb navigation","Implement lazy loading for images","Minify CSS and JavaScript","Use descriptive anchor text"].filter(()=>Math.random()>.5)};c(k=>new Map(k).set(a,S))},[c]),b=(0,K.useCallback)(async a=>{await new Promise(o=>setTimeout(o,1800));let m={score:Math.round(70+Math.random()*25),https:Math.random()>.1,hsts:Math.random()>.4,contentSecurityPolicy:Math.random()>.6,xFrameOptions:Math.random()>.3,mixedContent:Math.random()<.2,vulnerabilities:Math.round(Math.random()*3)};l(o=>new Map(o).set(a,m))},[l]);return{runPerformanceTest:(0,K.useCallback)(async a=>{p(M=>new Set(M).add(a)),r(a),d("performance"),await new Promise(M=>setTimeout(M,3e3+Math.random()*2e3));let m=z.find(M=>M.name===a),o=(m==null?void 0:m.category)==="phone",y=(m==null?void 0:m.category)==="tablet",T=o?60+Math.random()*30:70+Math.random()*25,S=o?3200:y?2800:2200,k={performance:Math.round(T),accessibility:Math.round(75+Math.random()*20),bestPractices:Math.round(80+Math.random()*15),seo:Math.round(85+Math.random()*12),pwa:Math.round(40+Math.random()*30),loadTime:Math.round(S+Math.random()*1500),firstContentfulPaint:Math.round(S*.4+Math.random()*800),largestContentfulPaint:Math.round(S*.7+Math.random()*1200),firstInputDelay:Math.round(80+Math.random()*150),cumulativeLayoutShift:Math.round((.05+Math.random()*.2)*1e3)/1e3,speedIndex:Math.round(S*.8+Math.random()*1e3),totalBlockingTime:Math.round(100+Math.random()*300),timeToInteractive:Math.round(S*.9+Math.random()*1e3),maxPotentialFID:Math.round(120+Math.random()*200),serverResponseTime:Math.round(150+Math.random()*300),totalSize:Math.round(1200+Math.random()*2800),imageOptimization:Math.round(60+Math.random()*35),textCompression:Math.round(70+Math.random()*25),unusedCode:Math.round(15+Math.random()*35),renderBlocking:Math.round(5+Math.random()*15),requestCount:Math.round(25+Math.random()*45),cacheHitRatio:Math.round(60+Math.random()*35),cdnUsage:Math.random()>.3};e(M=>new Map(M).set(a,k)),p(M=>{let A=new Set(M);return A.delete(a),A}),setTimeout(()=>N(a),500),setTimeout(()=>$(a),1e3),setTimeout(()=>b(a),1500)},[e,p,r,d,N,$,b]),runAccessibilityTest:N,runSEOTest:$,runSecurityTest:b}};var F=require("lucide-react"),Y=(e,s)=>{let c=s.get(e.name)||!1,l=c?e.height:e.width,p=c?e.width:e.height,r,d;switch(e.category){case"phone":r=260,d=480;break;case"tablet":r=380,d=520;break;case"laptop":r=500,d=320;break;case"desktop":r=600,d=360;break;case"special":r=800,d=300;break;default:r=600,d=360;break}let N=r/l,$=d/p;return Math.min(N,$,.75)},H=e=>e>=90?{class:"excellent",color:"#10b981",label:"Excellent"}:e>=75?{class:"good",color:"#22c55e",label:"Good"}:e>=50?{class:"average",color:"#f59e0b",label:"Needs Improvement"}:{class:"poor",color:"#ef4444",label:"Poor"},Z=(e,s)=>{let l={firstContentfulPaint:{good:1800,needsImprovement:3e3},largestContentfulPaint:{good:2500,needsImprovement:4e3},firstInputDelay:{good:100,needsImprovement:300},cumulativeLayoutShift:{good:.1,needsImprovement:.25},speedIndex:{good:3400,needsImprovement:5800},totalBlockingTime:{good:200,needsImprovement:600},timeToInteractive:{good:3800,needsImprovement:7300},loadTime:{good:2e3,needsImprovement:4e3}}[e];return l?s<=l.good?{color:"#10b981",status:"good",icon:F.CheckCircle}:s<=l.needsImprovement?{color:"#f59e0b",status:"needs-improvement",icon:F.AlertTriangle}:{color:"#ef4444",status:"poor",icon:F.AlertCircle}:{color:"#6b7280",status:"unknown"}},B=e=>{try{let s=new URL(e);return s.searchParams.set("no-dev-tools","true"),s.toString()}catch(s){return e+(e.includes("?")?"&":"?")+"no-dev-tools=true"}},Q=()=>{document.querySelectorAll(".device-iframe").forEach(s=>{let c=s.src;s.src="",setTimeout(()=>{s.src=c},50)})};var n=U(require("react")),v=require("lucide-react");function ie({device:e,url:s,deviceRotations:c,performanceData:l,runningTests:p,realDeviceBehavior:r,accessibilityMode:d,showGrid:N,onToggleRotation:$,onRemove:b,onFullscreen:x,onRunTest:a}){let m=c.get(e.name)||!1,o=Y(e,c),y=m?e.height:e.width,T=m?e.width:e.height,S=l.get(e.name),k=p.has(e.name),M=0;r&&(e.hasNotch&&(M+=32),e.statusBar&&(M+=e.os==="android"?24:44),e.browserUI&&(M+=e.category==="phone"?0:72));let A=T-M;return n.default.createElement("div",{className:"device-preview"},n.default.createElement("div",{className:"device-header"},n.default.createElement("div",null,n.default.createElement("div",{className:"device-title"},e.icon,e.name),n.default.createElement("div",{className:"device-info"},n.default.createElement("span",null,y," \xD7 ",T),n.default.createElement("span",null,Math.round(o*100),"%"),S&&n.default.createElement("span",{style:{color:H(S.performance).color,fontWeight:500}},S.performance))),n.default.createElement("div",{className:"device-actions"},n.default.createElement("button",{onClick:()=>a(e.name),className:"test-btn",disabled:k,title:"Run Comprehensive Test"},n.default.createElement(v.Play,{className:"w-2 h-2"})),n.default.createElement("button",{onClick:()=>$(e.name),className:`action-btn ${m?"active":""}`,title:"Rotate"},n.default.createElement(v.RotateCcw,{className:"w-3 h-3"})),n.default.createElement("button",{onClick:x,className:"action-btn",title:"Fullscreen"},n.default.createElement(v.Maximize2,{className:"w-3 h-3"})),n.default.createElement("button",{onClick:b,className:"action-btn remove-btn",title:"Remove device"},n.default.createElement(v.X,{className:"w-3 h-3"})))),n.default.createElement("div",{className:"device-body"},n.default.createElement("div",{className:"device-chrome",style:{width:y*o,height:T*o}},r&&n.default.createElement(n.default.Fragment,null,e.hasNotch&&n.default.createElement("div",{className:"ios-notch",style:{transform:`translateX(-50%) scale(${o})`}}),e.statusBar&&n.default.createElement("div",{className:e.os==="android"?"android-status-bar":"ios-status-bar",style:{height:(e.os==="android"?24:44)*o,fontSize:(e.os==="android"?12:15)*o,padding:`0 ${(e.os==="android"?16:20)*o}px`}},e.os==="android"?n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{className:"android-status-left"},n.default.createElement("span",null,"12:34")),n.default.createElement("div",{className:"android-status-right"},n.default.createElement(v.Signal,{style:{width:10*o,height:10*o}}),n.default.createElement(v.Wifi,{style:{width:10*o,height:10*o}}),n.default.createElement(v.Battery,{style:{width:10*o,height:10*o}}),n.default.createElement("span",null,"100%"))):n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{className:"ios-status-left"},n.default.createElement(v.Signal,{style:{width:12*o,height:12*o}}),n.default.createElement(v.Wifi,{style:{width:12*o,height:12*o}})),n.default.createElement("span",null,"9:41"),n.default.createElement("div",{className:"ios-status-right"},n.default.createElement("span",null,"100%"),n.default.createElement(v.Battery,{style:{width:14*o,height:14*o}})))),e.browserUI&&(e.category==="laptop"||e.category==="desktop"||e.category==="special")&&n.default.createElement("div",{className:e.os==="macos"?"macos-chrome":"windows-chrome",style:{height:72*o}},n.default.createElement("div",{className:"titlebar",style:{height:32*o,padding:`0 ${12*o}px`}},n.default.createElement("div",{className:"browser-controls"},n.default.createElement("div",{className:"browser-btn btn-close",style:{width:12*o,height:12*o}}),n.default.createElement("div",{className:"browser-btn btn-minimize",style:{width:12*o,height:12*o}}),n.default.createElement("div",{className:"browser-btn btn-maximize",style:{width:12*o,height:12*o}})),n.default.createElement("div",{className:"window-title",style:{fontSize:13*o}},s.replace("http://","").replace("https://","").split("/")[0])),n.default.createElement("div",{className:"toolbar",style:{padding:`${6*o}px ${12*o}px`}},n.default.createElement("div",{className:"nav-buttons"},n.default.createElement("button",{className:"nav-btn",style:{width:24*o,height:24*o},disabled:!0},n.default.createElement(v.ArrowLeft,{style:{width:12*o,height:12*o}})),n.default.createElement("button",{className:"nav-btn",style:{width:24*o,height:24*o},disabled:!0},n.default.createElement(v.ArrowRight,{style:{width:12*o,height:12*o}})),n.default.createElement("button",{className:"nav-btn",style:{width:24*o,height:24*o}},n.default.createElement(v.RotateCw,{style:{width:12*o,height:12*o}}))),n.default.createElement("div",{className:"address-bar",style:{height:28*o,fontSize:13*o,padding:`0 ${8*o}px`}},n.default.createElement(v.Lock,{style:{width:12*o,height:12*o,opacity:.7}}),n.default.createElement("span",null,s.replace("http://","").replace("https://","").split("/")[0]))))),n.default.createElement("div",{className:"device-viewport",style:{width:y*o,height:(r?A:T)*o}},k&&n.default.createElement("div",{className:"device-loading"},n.default.createElement("div",{className:"spinner"}),n.default.createElement("span",null,"Running comprehensive analysis...")),n.default.createElement("iframe",{src:B(s),title:`${e.name} device preview`,width:y,height:r?A:T,className:"device-iframe",style:{transform:`scale(${o})`}}),d!=="none"&&n.default.createElement("div",{className:`accessibility-filter ${d==="contrast"?"contrast-filter":"colorblind-filter"}`}),N&&n.default.createElement("div",{className:"grid-overlay"})))))}var t=U(require("react")),u=require("lucide-react");function se({deviceName:e,isExpanded:s,activeTab:c,performanceData:l,accessibilityData:p,seoData:r,securityData:d,onToggleExpand:N,onClose:$,onTabChange:b}){return t.default.createElement("div",{className:"floating-metrics"},t.default.createElement("div",{className:"metrics-header"},t.default.createElement("div",{className:"metrics-title"},"Quality Analysis \u2022 ",e),t.default.createElement("div",{className:"metrics-controls"},t.default.createElement("button",{onClick:N,className:"action-btn",title:s?"Collapse":"Expand"},s?t.default.createElement(u.ChevronDown,{className:"w-4 h-4"}):t.default.createElement(u.ChevronUp,{className:"w-4 h-4"})),t.default.createElement("button",{onClick:$,className:"action-btn",title:"Close metrics"},t.default.createElement(u.X,{className:"w-4 h-4"})))),s&&t.default.createElement("div",{className:"metrics-content"},t.default.createElement("div",{className:"tab-navigation"},t.default.createElement("button",{onClick:()=>b("performance"),className:`tab-btn ${c==="performance"?"active":""}`},t.default.createElement(u.TrendingUp,{className:"w-3 h-3",style:{marginRight:"4px"}}),"Performance"),t.default.createElement("button",{onClick:()=>b("accessibility"),className:`tab-btn ${c==="accessibility"?"active":""}`},t.default.createElement(u.Accessibility,{className:"w-3 h-3",style:{marginRight:"4px"}}),"Accessibility"),t.default.createElement("button",{onClick:()=>b("seo"),className:`tab-btn ${c==="seo"?"active":""}`},t.default.createElement(u.Globe,{className:"w-3 h-3",style:{marginRight:"4px"}}),"SEO"),t.default.createElement("button",{onClick:()=>b("security"),className:`tab-btn ${c==="security"?"active":""}`},t.default.createElement(u.Lock,{className:"w-3 h-3",style:{marginRight:"4px"}}),"Security")),c==="performance"&&l&&t.default.createElement(t.default.Fragment,null,t.default.createElement("div",{className:"lighthouse-scores"},[{key:"performance",label:"Performance",value:l.performance},{key:"accessibility",label:"Accessibility",value:l.accessibility},{key:"bestPractices",label:"Best Practices",value:l.bestPractices},{key:"seo",label:"SEO",value:l.seo},{key:"pwa",label:"PWA",value:l.pwa}].map(({key:x,label:a,value:m})=>{let o=H(m);return t.default.createElement("div",{key:x,className:"score-item"},t.default.createElement("div",{className:"score-value",style:{color:o.color}},m),t.default.createElement("div",{className:"score-label"},a),t.default.createElement("div",{className:"score-status",style:{background:o.color+"20",color:o.color}},o.label))})),t.default.createElement("div",{className:"vitals-section"},t.default.createElement("div",{className:"section-title"},t.default.createElement(u.Zap,{className:"w-4 h-4"}),"Core Web Vitals"),t.default.createElement("div",{className:"vitals-grid"},[{key:"loadTime",label:"Load Time",value:l.loadTime,unit:"ms",benchmark:"Good: < 2000ms"},{key:"firstContentfulPaint",label:"First Contentful Paint",value:l.firstContentfulPaint,unit:"ms",benchmark:"Good: < 1800ms"},{key:"largestContentfulPaint",label:"Largest Contentful Paint",value:l.largestContentfulPaint,unit:"ms",benchmark:"Good: < 2500ms"},{key:"cumulativeLayoutShift",label:"Cumulative Layout Shift",value:l.cumulativeLayoutShift,unit:"",benchmark:"Good: < 0.1"},{key:"firstInputDelay",label:"First Input Delay",value:l.firstInputDelay,unit:"ms",benchmark:"Good: < 100ms"},{key:"totalBlockingTime",label:"Total Blocking Time",value:l.totalBlockingTime,unit:"ms",benchmark:"Good: < 200ms"}].map(({key:x,label:a,value:m,unit:o,benchmark:y})=>{let T=Z(x,m),S=T.icon||u.Info;return t.default.createElement("div",{key:x,className:"vital-item"},t.default.createElement("div",{className:"vital-content"},t.default.createElement("div",{className:"vital-label"},a),t.default.createElement("div",{className:"vital-value",style:{color:T.color}},m,o),t.default.createElement("div",{className:"vital-benchmark"},y)),t.default.createElement("div",{className:"vital-status"},t.default.createElement(S,{style:{width:"20px",height:"20px",color:T.color}})))}))),t.default.createElement("div",{className:"vitals-section"},t.default.createElement("div",{className:"section-title"},t.default.createElement(u.BarChart3,{className:"w-4 h-4"}),"Additional Metrics"),t.default.createElement("div",{className:"performance-grid"},t.default.createElement("div",{className:"performance-item"},t.default.createElement("div",{className:"performance-label"},"Total Size"),t.default.createElement("div",{className:"performance-value"},l.totalSize," KB")),t.default.createElement("div",{className:"performance-item"},t.default.createElement("div",{className:"performance-label"},"Requests"),t.default.createElement("div",{className:"performance-value"},l.requestCount)),t.default.createElement("div",{className:"performance-item"},t.default.createElement("div",{className:"performance-label"},"Cache Hit Rate"),t.default.createElement("div",{className:"performance-value"},l.cacheHitRatio,"%")),t.default.createElement("div",{className:"performance-item"},t.default.createElement("div",{className:"performance-label"},"Image Optimization"),t.default.createElement("div",{className:"performance-value"},l.imageOptimization,"%")),t.default.createElement("div",{className:"performance-item"},t.default.createElement("div",{className:"performance-label"},"Text Compression"),t.default.createElement("div",{className:"performance-value"},l.textCompression,"%")),t.default.createElement("div",{className:"performance-item"},t.default.createElement("div",{className:"performance-label"},"Unused Code"),t.default.createElement("div",{className:"performance-value"},l.unusedCode,"%"))))),c==="accessibility"&&p&&t.default.createElement("div",{className:"accessibility-section"},t.default.createElement("div",{className:"section-title"},t.default.createElement(u.Accessibility,{className:"w-4 h-4"}),"Accessibility Issues Found"),p.map((x,a)=>t.default.createElement("div",{key:a,className:"accessibility-issue"},t.default.createElement("span",{className:`issue-severity severity-${x.severity}`},x.severity),t.default.createElement("div",{className:"issue-content"},t.default.createElement("div",{className:"issue-message"},x.message),t.default.createElement("div",{className:"issue-details"},t.default.createElement("span",null,"Element: ",x.element),x.count&&t.default.createElement("span",null,"Count: ",x.count),t.default.createElement("span",null,"Impact: ",x.impact)))))),c==="seo"&&r&&t.default.createElement("div",{className:"seo-section"},t.default.createElement("div",{className:"section-title"},t.default.createElement(u.Globe,{className:"w-4 h-4"}),"SEO Analysis \u2022 Score: ",r.score,"/100"),t.default.createElement("div",{className:"seo-grid"},t.default.createElement("div",{className:"seo-category"},t.default.createElement("div",{className:"seo-category-title"},t.default.createElement(u.FileText,{className:"w-4 h-4"}),"Content"),t.default.createElement("div",{className:"seo-checklist"},t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.title.exists&&r.title.optimal?"seo-check":"seo-fail"},r.title.exists&&r.title.optimal?"\u2713":"\u2717"),t.default.createElement("span",null,"Title Tag (",r.title.length," chars)")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.metaDescription.exists&&r.metaDescription.optimal?"seo-check":"seo-fail"},r.metaDescription.exists&&r.metaDescription.optimal?"\u2713":"\u2717"),t.default.createElement("span",null,"Meta Description (",r.metaDescription.length," chars)")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.headings.optimal?"seo-check":"seo-fail"},r.headings.optimal?"\u2713":"\u2717"),t.default.createElement("span",null,"Heading Structure (H1: ",r.headings.h1Count,")")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.imageAlts.percentage>80?"seo-check":"seo-fail"},r.imageAlts.percentage>80?"\u2713":"\u2717"),t.default.createElement("span",null,"Image Alt Texts (",r.imageAlts.percentage,"%)")))),t.default.createElement("div",{className:"seo-category"},t.default.createElement("div",{className:"seo-category-title"},t.default.createElement(u.Zap,{className:"w-4 h-4"}),"Technical"),t.default.createElement("div",{className:"seo-checklist"},t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.https?"seo-check":"seo-fail"},r.https?"\u2713":"\u2717"),t.default.createElement("span",null,"HTTPS")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.mobileFriendly?"seo-check":"seo-fail"},r.mobileFriendly?"\u2713":"\u2717"),t.default.createElement("span",null,"Mobile Friendly")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.canonicalUrl?"seo-check":"seo-fail"},r.canonicalUrl?"\u2713":"\u2717"),t.default.createElement("span",null,"Canonical URL")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:r.structuredData?"seo-check":"seo-fail"},r.structuredData?"\u2713":"\u2717"),t.default.createElement("span",null,"Structured Data"))))),r.recommendations.length>0&&t.default.createElement("div",{className:"recommendations"},t.default.createElement("div",{style:{fontWeight:600,marginBottom:"12px",fontSize:"14px"}},"Recommendations"),r.recommendations.slice(0,4).map((x,a)=>t.default.createElement("div",{key:a,className:"recommendation-item"},x)))),c==="security"&&d&&t.default.createElement("div",{className:"security-section"},t.default.createElement("div",{className:"section-title"},t.default.createElement(u.Lock,{className:"w-4 h-4"}),"Security Analysis \u2022 Score: ",d.score,"/100"),t.default.createElement("div",{className:"seo-checklist"},t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:d.https?"seo-check":"seo-fail"},d.https?"\u2713":"\u2717"),t.default.createElement("span",null,"HTTPS Encryption")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:d.hsts?"seo-check":"seo-fail"},d.hsts?"\u2713":"\u2717"),t.default.createElement("span",null,"HSTS Header")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:d.contentSecurityPolicy?"seo-check":"seo-fail"},d.contentSecurityPolicy?"\u2713":"\u2717"),t.default.createElement("span",null,"Content Security Policy")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:d.xFrameOptions?"seo-check":"seo-fail"},d.xFrameOptions?"\u2713":"\u2717"),t.default.createElement("span",null,"X-Frame-Options")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:d.mixedContent?"seo-fail":"seo-check"},d.mixedContent?"\u2717":"\u2713"),t.default.createElement("span",null,"No Mixed Content")),t.default.createElement("div",{className:"seo-item"},t.default.createElement("span",{className:d.vulnerabilities===0?"seo-check":"seo-fail"},d.vulnerabilities===0?"\u2713":"\u2717"),t.default.createElement("span",null,"Vulnerabilities: ",d.vulnerabilities))))))}var D=U(require("react")),J=require("lucide-react");function ne({devices:e,selectedDevices:s,deviceRotations:c,onToggleDevice:l,onLoadEssentials:p,onFullscreen:r}){return D.default.createElement("div",{className:"sidebar"},D.default.createElement("div",{style:{marginBottom:"20px"}},D.default.createElement("button",{onClick:p,className:"preset-btn",style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"12px"},title:"Load Essential Devices"},D.default.createElement(J.Zap,{className:"w-4 h-4"}),"Essentials")),Object.entries(q).map(([d,{title:N,icon:$}])=>{let b=e.filter(a=>a.category===d),x=s.filter(a=>a.category===d).length;return D.default.createElement("div",{key:d,className:"device-category"},D.default.createElement("div",{className:"category-header"},D.default.createElement("div",{className:"category-title"},$,N),D.default.createElement("div",{className:"category-count"},x,"/",b.length)),D.default.createElement("div",{className:"device-list"},b.map(a=>{let m=s.find(S=>S.name===a.name),o=c.get(a.name)||!1,y=o?a.height:a.width,T=o?a.width:a.height;return D.default.createElement("div",{key:a.name,role:"button",tabIndex:0,onClick:()=>l(a),onKeyDown:S=>S.key==="Enter"&&l(a),className:`device-item ${m?"selected":""}`},D.default.createElement("div",{className:"device-name"},D.default.createElement("span",{style:{display:"flex",alignItems:"center",gap:"6px"}},a.icon,a.name),m&&D.default.createElement("button",{onClick:S=>{S.stopPropagation(),r(a)},className:"action-btn",title:"Fullscreen"},D.default.createElement(J.Maximize2,{className:"w-3 h-3"}))),D.default.createElement("div",{className:"device-specs"},D.default.createElement("span",null,y," \xD7 ",T),D.default.createElement("span",null,a.os),a.pixelRatio&&D.default.createElement("span",null,"@",a.pixelRatio,"x")))})))}))}var ae=e=>`
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.devtools-container {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: ${e?"rgba(0, 0, 0, 0.95)":"rgba(0, 0, 0, 0.85)"};
  backdrop-filter: blur(8px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: ${e?"#ffffff":"#000000"};
  display: flex;
  flex-direction: column;
}

.devtools-header {
  padding: 12px 20px;
  border-bottom: 1px solid ${e?"#334155":"#e2e8f0"};
  background: ${e?"#1e293b":"#f8fafc"};
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: ${e?"#ffffff":"#0f172a"};
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-btn {
  padding: 6px;
  background: ${e?"#334155":"#ffffff"};
  border: 1px solid ${e?"#475569":"#cbd5e1"};
  border-radius: 6px;
  cursor: pointer;
  color: ${e?"#ffffff":"#334155"};
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: ${e?"#475569":"#f1f5f9"};
}

.control-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: ${e?"#334155":"#f1f5f9"};
  border-radius: 6px;
}

.more-controls {
  position: relative;
}

.more-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: ${e?"#1e293b":"#ffffff"};
  border: 1px solid ${e?"#334155":"#e2e8f0"};
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 180px;
}

.more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  color: ${e?"#cbd5e1":"#475569"};
}

.more-item:hover {
  background: ${e?"#334155":"#f1f5f9"};
}

.more-item.active {
  background: ${e?"#1e40af":"#eff6ff"};
  color: ${e?"#ffffff":"#1e40af"};
  font-weight: 500;
}

.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 300px;
  background: ${e?"#1e293b":"#f8fafc"};
  border-right: 1px solid ${e?"#334155":"#e2e8f0"};
  overflow-y: auto;
  padding: 16px;
  flex-shrink: 0;
}

.preset-btn {
  padding: 8px 12px;
  background: ${e?"#334155":"#ffffff"};
  border: 1px solid ${e?"#475569":"#cbd5e1"};
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: ${e?"#ffffff":"#334155"};
}

.preset-btn:hover {
  background: ${e?"#475569":"#f1f5f9"};
}

.device-category {
  margin-bottom: 16px;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.category-title {
  font-weight: 500;
  font-size: 12px;
  color: ${e?"#cbd5e1":"#475569"};
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-count {
  font-size: 10px;
  padding: 2px 6px;
  background: ${e?"#475569":"#e2e8f0"};
  border-radius: 10px;
  color: ${e?"#cbd5e1":"#475569"};
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.device-item {
  padding: 12px;
  border: 1px solid ${e?"#475569":"#cbd5e1"};
  border-radius: 8px;
  background: ${e?"#334155":"#ffffff"};
  cursor: pointer;
}

.device-item:hover {
  background: ${e?"#475569":"#f8fafc"};
}

.device-item.selected {
  background: ${e?"#1e40af":"#eff6ff"};
  border-color: #3b82f6;
}

.device-name {
  font-weight: 500;
  font-size: 13px;
  color: ${e?"#ffffff":"#0f172a"};
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.device-specs {
  font-size: 11px;
  color: ${e?"#94a3b8":"#64748b"};
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.preview-area {
  flex: 1;
  overflow: auto;
  background: ${e?"#0f172a":"#f1f5f9"};
  position: relative;
}

.preview-content {
  padding: 16px;
  height: 100%;
}

.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
}

.device-preview {
  background: ${e?"#1e293b":"#ffffff"};
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  border: 1px solid ${e?"#334155":"#e2e8f0"};
  flex-shrink: 0;
  position: relative;
}

.device-header {
  padding: 10px 14px;
  background: ${e?"#334155":"#f8fafc"};
  border-bottom: 1px solid ${e?"#475569":"#e2e8f0"};
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-title {
  font-weight: 500;
  font-size: 12px;
  color: ${e?"#ffffff":"#0f172a"};
  display: flex;
  align-items: center;
  gap: 6px;
}

.device-info {
  font-size: 10px;
  color: ${e?"#94a3b8":"#64748b"};
  display: flex;
  gap: 6px;
  align-items: center;
}

.device-actions {
  display: flex;
  gap: 2px;
}

.action-btn {
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: ${e?"#94a3b8":"#64748b"};
  border-radius: 4px;
}

.action-btn:hover {
  background: ${e?"#475569":"#e2e8f0"};
  color: ${e?"#ffffff":"#0f172a"};
}

.action-btn.active {
  background: #3b82f6;
  color: white;
}

.remove-btn:hover {
  background: ${e?"#450a0a":"#fecaca"};
  color: ${e?"#fca5a5":"#dc2626"};
}

.test-btn {
  padding: 4px 6px;
  background: ${e?"#475569":"#e2e8f0"};
  color: ${e?"#ffffff":"#334155"};
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
}

.test-btn:hover {
  background: ${e?"#1e40af":"#3b82f6"};
  color: white;
}

.test-btn:disabled {
  background: #6b7280;
  cursor: not-allowed;
  color: #9ca3af;
}

.device-body {
  position: relative;
}

.device-chrome {
  position: relative;
  background: ${e?"#1e293b":"#ffffff"};
}

.ios-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 32px;
  background: linear-gradient(135deg, #000000, #1a1a1a);
  border-radius: 0 0 16px 16px;
  z-index: 20;
  box-shadow: inset 0 -2px 4px rgba(255,255,255,0.1);
}

.ios-status-bar {
  height: 44px;
  background: ${e?"#000000":"#ffffff"};
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: ${e?"#ffffff":"#000000"};
  position: relative;
  z-index: 15;
}

.ios-status-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ios-status-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.android-status-bar {
  height: 24px;
  background: ${e?"#212121":"#ffffff"};
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 500;
  color: ${e?"#ffffff":"#000000"};
}

.android-status-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.android-status-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.macos-chrome, .windows-chrome {
  height: 72px;
  background: ${e?"#1c1c1e":"#f6f6f6"};
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid ${e?"#38383a":"#d1d1d6"};
}

.titlebar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: ${e?"#323233":"#ebebeb"};
  border-bottom: 1px solid ${e?"#38383a":"#d1d1d6"};
}

.browser-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.browser-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
}

.browser-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
}

.browser-btn:hover::after {
  opacity: 1;
}

.btn-close { background: #ff5f57; }
.btn-close:hover::after {
  content: '\xD7';
  color: #8b0000;
  font-size: 10px;
  font-weight: bold;
}

.btn-minimize { background: #ffbd2e; }
.btn-minimize:hover::after {
  content: '\u2212';
  color: #996600;
  font-size: 10px;
  font-weight: bold;
}

.btn-maximize { background: #28ca42; }
.btn-maximize:hover::after {
  content: '+';
  color: #006600;
  font-size: 10px;
  font-weight: bold;
}

.window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 500;
  color: ${e?"#ffffff":"#333333"};
}

.toolbar {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
}

.nav-buttons {
  display: flex;
  gap: 4px;
}

.nav-btn {
  width: 24px;
  height: 24px;
  border: 1px solid ${e?"#48484a":"#d1d1d6"};
  background: ${e?"#48484a":"#ffffff"};
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: ${e?"#ffffff":"#333333"};
}

.nav-btn:hover {
  background: ${e?"#5a5a5c":"#f0f0f0"};
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.address-bar {
  flex: 1;
  height: 28px;
  background: ${e?"#48484a":"#ffffff"};
  border: 1px solid ${e?"#38383a":"#d1d1d6"};
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
  color: ${e?"#ffffff":"#000000"};
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px;
}

.device-viewport {
  position: relative;
  overflow: hidden;
  background: white;
}

.device-iframe {
  border: none;
  transform-origin: top left;
  background: white;
}

.device-loading {
  position: absolute;
  inset: 0;
  background: ${e?"#1e293b":"#f8fafc"};
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  font-size: 11px;
  color: ${e?"#94a3b8":"#64748b"};
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid ${e?"#475569":"#e2e8f0"};
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.accessibility-filter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.contrast-filter {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.05) 10px,
    rgba(255,255,255,0.05) 20px
  );
}

.colorblind-filter {
  filter: sepia(1) saturate(0) hue-rotate(180deg);
}

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(to right, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 5;
}

.floating-metrics {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 700px;
  max-width: calc(100vw - 40px);
  max-height: 80vh;
  background: ${e?"rgba(15, 23, 42, 0.98)":"rgba(255, 255, 255, 0.98)"};
  backdrop-filter: blur(16px);
  border: 1px solid ${e?"#334155":"#e2e8f0"};
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 1000000;
  overflow: hidden;
}

.metrics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid ${e?"#334155":"#e2e8f0"};
  background: ${e?"#1e293b":"#f8fafc"};
}

.metrics-title {
  font-weight: 600;
  font-size: 14px;
  color: ${e?"#ffffff":"#0f172a"};
}

.metrics-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab-navigation {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 8px 16px;
  background: ${e?"#334155":"#f1f5f9"};
  color: ${e?"#cbd5e1":"#64748b"};
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.tab-btn.active {
  background: #3b82f6;
  color: white;
}

.tab-btn:hover:not(.active) {
  background: ${e?"#475569":"#e2e8f0"};
}

.metrics-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(80vh - 68px);
}

.lighthouse-scores {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.score-item {
  text-align: center;
  padding: 16px 12px;
  border-radius: 12px;
  background: ${e?"#334155":"#f8fafc"};
  border: 1px solid ${e?"#475569":"#e2e8f0"};
  position: relative;
}

.score-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1;
}

.score-label {
  font-size: 12px;
  opacity: 0.7;
  font-weight: 500;
}

.score-status {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.vitals-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: ${e?"#ffffff":"#0f172a"};
  padding-bottom: 8px;
  border-bottom: 1px solid ${e?"#334155":"#e2e8f0"};
  display: flex;
  align-items: center;
  gap: 8px;
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vital-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: ${e?"#334155":"#f8fafc"};
  border-radius: 12px;
  border: 1px solid ${e?"#475569":"#e2e8f0"};
}

.vital-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vital-label {
  font-size: 12px;
  font-weight: 500;
  color: ${e?"#cbd5e1":"#64748b"};
}

.vital-value {
  font-size: 18px;
  font-weight: 700;
  color: ${e?"#ffffff":"#0f172a"};
}

.vital-benchmark {
  font-size: 10px;
  opacity: 0.6;
  color: ${e?"#94a3b8":"#6b7280"};
}

.vital-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.performance-item {
  padding: 16px;
  background: ${e?"#334155":"#f8fafc"};
  border-radius: 12px;
  border: 1px solid ${e?"#475569":"#e2e8f0"};
}

.performance-label {
  font-size: 12px;
  font-weight: 500;
  color: ${e?"#cbd5e1":"#64748b"};
  margin-bottom: 8px;
}

.performance-value {
  font-size: 16px;
  font-weight: 600;
  color: ${e?"#ffffff":"#0f172a"};
}

.accessibility-section, .seo-section, .security-section {
  margin-bottom: 20px;
}

.accessibility-issue {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  margin-bottom: 12px;
  background: ${e?"#334155":"#f8fafc"};
  border-radius: 12px;
  border: 1px solid ${e?"#475569":"#e2e8f0"};
}

.issue-severity {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  flex-shrink: 0;
}

.severity-critical { background: #fecaca; color: #dc2626; }
.severity-serious { background: #fed7aa; color: #ea580c; }
.severity-moderate { background: #fef3c7; color: #d97706; }
.severity-minor { background: #dcfce7; color: #16a34a; }

.issue-content {
  flex: 1;
}

.issue-message {
  font-size: 13px;
  font-weight: 500;
  color: ${e?"#ffffff":"#0f172a"};
  margin-bottom: 4px;
}

.issue-details {
  font-size: 11px;
  color: ${e?"#94a3b8":"#64748b"};
  display: flex;
  gap: 12px;
  align-items: center;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.seo-category {
  background: ${e?"#334155":"#f8fafc"};
  border-radius: 12px;
  border: 1px solid ${e?"#475569":"#e2e8f0"};
  padding: 16px;
}

.seo-category-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: ${e?"#ffffff":"#0f172a"};
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 8px 0;
}

.seo-check { color: #10b981; font-weight: 600; }
.seo-fail { color: #ef4444; font-weight: 600; }

.recommendations {
  margin-top: 16px;
}

.recommendation-item {
  padding: 8px 12px;
  background: ${e?"#1e293b":"#eff6ff"};
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: ${e?"#cbd5e1":"#1e40af"};
  border-left: 3px solid #3b82f6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: ${e?"#94a3b8":"#64748b"};
  text-align: center;
}

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  background: ${e?"#000000":"#ffffff"};
  display: flex;
  flex-direction: column;
}

.fullscreen-header {
  padding: 12px 20px;
  background: ${e?"#1e293b":"#f8fafc"};
  border-bottom: 1px solid ${e?"#334155":"#e2e8f0"};
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fullscreen-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
`;function L({url:e=typeof window!="undefined"?window.location.href:"/",isOpen:s,onToggle:c}){let[l,p]=(0,i.useState)(V),[r,d]=(0,i.useState)(!1),[N,$]=(0,i.useState)(!1),[b,x]=(0,i.useState)(new Map),[a,m]=(0,i.useState)(null),[o,y]=(0,i.useState)(!1),[T,S]=(0,i.useState)(!1),[k,M]=(0,i.useState)("none"),[A,Me]=(0,i.useState)(new Map),[ke,Pe]=(0,i.useState)(new Map),[Ee,Ie]=(0,i.useState)(new Map),[ze,Le]=(0,i.useState)(new Map),[Ae,Ue]=(0,i.useState)(new Set),[I,re]=(0,i.useState)(null),[le,Oe]=(0,i.useState)(!0),[Fe,ce]=(0,i.useState)("performance"),oe=(0,i.useRef)(null),{runPerformanceTest:He}=_(Me,Pe,Ie,Le,Ue,re,ce);(0,i.useEffect)(()=>(s?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset"}),[s]),(0,i.useEffect)(()=>{let h=E=>{oe.current&&!oe.current.contains(E.target)&&y(!1)};return o&&document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)}},[o]);let de=h=>{x(E=>{let O=new Map(E);return O.set(h,!E.get(h)),O})},pe=h=>{p(E=>E.find(G=>G.name===h.name)?E.filter(G=>G.name!==h.name):[...E,h])},me=()=>{p(V)};if(!s)return null;let fe=I?A.get(I):null,he=I?ke.get(I):null,ue=I?Ee.get(I):null,ge=I?ze.get(I):null;return i.default.createElement("div",null,i.default.createElement("style",null,ae(r)),i.default.createElement("div",{className:"devtools-container"},i.default.createElement("div",{className:"devtools-header"},i.default.createElement("div",{className:"header-title"},"DevTools \u2022 ",l.length," devices"),i.default.createElement("div",{className:"header-controls"},i.default.createElement("div",{className:"control-group"},i.default.createElement("button",{onClick:Q,className:"control-btn",title:"Refresh all"},i.default.createElement(w.RefreshCw,{className:"w-4 h-4"}))),i.default.createElement("div",{className:"more-controls",ref:oe},i.default.createElement("button",{onClick:()=>y(!o),className:`control-btn ${o?"active":""}`,title:"More options"},i.default.createElement(w.MoreHorizontal,{className:"w-4 h-4"})),o&&i.default.createElement("div",{className:"more-dropdown"},i.default.createElement("div",{className:`more-item ${r?"active":""}`,role:"button",tabIndex:0,onClick:()=>d(!r),onKeyDown:h=>h.key==="Enter"&&d(!r)},r?i.default.createElement(w.Sun,{className:"w-4 h-4"}):i.default.createElement(w.Moon,{className:"w-4 h-4"}),"Dark Mode"),i.default.createElement("div",{className:`more-item ${N?"active":""}`,role:"button",tabIndex:0,onClick:()=>$(!N),onKeyDown:h=>h.key==="Enter"&&$(!N)},i.default.createElement(w.Grid,{className:"w-4 h-4"}),"Grid Overlay"),i.default.createElement("div",{className:`more-item ${T?"active":""}`,role:"button",tabIndex:0,onClick:()=>S(!T),onKeyDown:h=>h.key==="Enter"&&S(!T)},i.default.createElement(w.Smartphone,{className:"w-4 h-4"}),"Real Device UI"),i.default.createElement("div",{className:`more-item ${k!=="none"?"active":""}`,role:"button",tabIndex:0,onClick:()=>M(k==="none"?"contrast":k==="contrast"?"colorblind":"none"),onKeyDown:h=>h.key==="Enter"&&M(k==="none"?"contrast":k==="contrast"?"colorblind":"none")},i.default.createElement(w.Accessibility,{className:"w-4 h-4"}),"A11y Filters (",k,")"),i.default.createElement("div",{className:"more-item",role:"button",tabIndex:0,onClick:()=>{p([]),y(!1)},onKeyDown:h=>{h.key==="Enter"&&(p([]),y(!1))}},i.default.createElement(w.X,{className:"w-4 h-4"}),"Clear All"))),i.default.createElement("button",{onClick:c,className:"control-btn",title:"Close DevTools"},i.default.createElement(w.X,{className:"w-4 h-4"})))),i.default.createElement("div",{className:"content-wrapper"},i.default.createElement(ne,{devices:z,selectedDevices:l,deviceRotations:b,onToggleDevice:pe,onLoadEssentials:me,onFullscreen:m}),i.default.createElement("div",{className:"preview-area"},i.default.createElement("div",{className:"preview-content"},l.length===0?i.default.createElement("div",{className:"empty-state"},i.default.createElement(w.Monitor,{className:"w-12 h-12",style:{marginBottom:"12px",opacity:.3}}),i.default.createElement("p",{style:{fontSize:"16px",marginBottom:"6px",fontWeight:500}},"No devices selected"),i.default.createElement("p",{style:{fontSize:"13px",opacity:.7,marginBottom:"12p