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

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

"use client";
import k,{useEffect as $e,useState as De}from"react";import x,{useState as oe,useEffect as Tt}from"react";import l,{useState as $,useEffect as Ne,useRef as pt}from"react";import{Monitor as mt,Smartphone as ft,RotateCcw as ht,X as Se,Moon as ut,Sun as gt,Grid as vt,Minimize2 as bt,MoreHorizontal as xt,RefreshCw as yt,Accessibility as wt}from"lucide-react";import N from"react";import{Smartphone as H,Tablet as B,Laptop as j,Monitor as W,MonitorSpeaker as G}from"lucide-react";var E=[{name:"iPhone SE",width:375,height:667,icon:N.createElement(H,{className:"w-4 h-4"}),category:"phone",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:"iPhone 15 Pro",width:393,height:852,icon:N.createElement(H,{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:N.createElement(H,{className:"w-4 h-4"}),category:"phone",pixelRatio:3,statusBar:!0,browserUI:!0,os:"android"},{name:"iPad Mini",width:768,height:1024,icon:N.createElement(B,{className:"w-4 h-4"}),category:"tablet",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:"iPad Air",width:820,height:1180,icon:N.createElement(B,{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:N.createElement(B,{className:"w-4 h-4"}),category:"tablet",pixelRatio:2,statusBar:!0,browserUI:!0,os:"ios"},{name:'MacBook Air 13"',width:1280,height:800,icon:N.createElement(j,{className:"w-4 h-4"}),category:"laptop",browserUI:!0,os:"macos"},{name:'MacBook Pro 14"',width:1512,height:982,icon:N.createElement(j,{className:"w-4 h-4"}),category:"laptop",browserUI:!0,os:"macos"},{name:'MacBook Pro 16"',width:1728,height:1117,icon:N.createElement(j,{className:"w-4 h-4"}),category:"laptop",browserUI:!0,os:"macos"},{name:"Small Desktop",width:1366,height:768,icon:N.createElement(W,{className:"w-4 h-4"}),category:"desktop",browserUI:!0,os:"windows"},{name:"Standard Desktop",width:1920,height:1080,icon:N.createElement(W,{className:"w-4 h-4"}),category:"desktop",browserUI:!0,os:"windows"},{name:"4K Desktop",width:3840,height:2160,icon:N.createElement(W,{className:"w-4 h-4"}),category:"desktop",browserUI:!0,os:"windows"},{name:"Ultrawide 21:9",width:3440,height:1440,icon:N.createElement(G,{className:"w-4 h-4"}),category:"special",browserUI:!0,os:"windows"},{name:"Super Ultrawide 32:9",width:5120,height:1440,icon:N.createElement(G,{className:"w-4 h-4"}),category:"special",browserUI:!0,os:"windows"},{name:"Vertical Coding",width:1440,height:2560,icon:N.createElement(G,{className:"w-4 h-4"}),category:"special",browserUI:!0,os:"windows"}],V=[E.find(e=>e.name==="iPhone 15 Pro"),E.find(e=>e.name==='MacBook Air 13"'),E.find(e=>e.name==="4K Desktop")].filter(e=>e!==void 0),q={phone:{title:"Phones",icon:N.createElement(H,{className:"w-4 h-4"})},tablet:{title:"Tablets",icon:N.createElement(B,{className:"w-4 h-4"})},laptop:{title:"Laptops",icon:N.createElement(j,{className:"w-4 h-4"})},desktop:{title:"Desktops",icon:N.createElement(W,{className:"w-4 h-4"})},special:{title:"Special",icon:N.createElement(G,{className:"w-4 h-4"})}};import{useCallback as K}from"react";var _=(e,a,d,r,f,n,c)=>{let v=K(async s=>{await new Promise(g=>setTimeout(g,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);a(g=>new Map(g).set(s,o))},[a]),w=K(async s=>{await new Promise(C=>setTimeout(C,2500));let p=Math.round(35+Math.random()*30),o=Math.round(120+Math.random()*40),g=Math.round(8+Math.random()*12),y=Math.round(Math.random()*5),b={score:Math.round(70+Math.random()*25),title:{exists:Math.random()>.1,length:p,optimal:p>=30&&p<=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:g,missing:y,percentage:Math.round((g-y)/g*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)};d(C=>new Map(C).set(s,b))},[d]),h=K(async s=>{await new Promise(o=>setTimeout(o,1800));let p={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)};r(o=>new Map(o).set(s,p))},[r]);return{runPerformanceTest:K(async s=>{f(T=>new Set(T).add(s)),n(s),c("performance"),await new Promise(T=>setTimeout(T,3e3+Math.random()*2e3));let p=E.find(T=>T.name===s),o=(p==null?void 0:p.category)==="phone",g=(p==null?void 0:p.category)==="tablet",y=o?60+Math.random()*30:70+Math.random()*25,b=o?3200:g?2800:2200,C={performance:Math.round(y),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(b+Math.random()*1500),firstContentfulPaint:Math.round(b*.4+Math.random()*800),largestContentfulPaint:Math.round(b*.7+Math.random()*1200),firstInputDelay:Math.round(80+Math.random()*150),cumulativeLayoutShift:Math.round((.05+Math.random()*.2)*1e3)/1e3,speedIndex:Math.round(b*.8+Math.random()*1e3),totalBlockingTime:Math.round(100+Math.random()*300),timeToInteractive:Math.round(b*.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(T=>new Map(T).set(s,C)),f(T=>{let P=new Set(T);return P.delete(s),P}),setTimeout(()=>v(s),500),setTimeout(()=>w(s),1e3),setTimeout(()=>h(s),1500)},[e,f,n,c,v,w,h]),runAccessibilityTest:v,runSEOTest:w,runSecurityTest:h}};import{CheckCircle as Ke,AlertTriangle as Xe,AlertCircle as qe}from"lucide-react";var Y=(e,a)=>{let d=a.get(e.name)||!1,r=d?e.height:e.width,f=d?e.width:e.height,n,c;switch(e.category){case"phone":n=260,c=480;break;case"tablet":n=380,c=520;break;case"laptop":n=500,c=320;break;case"desktop":n=600,c=360;break;case"special":n=800,c=300;break;default:n=600,c=360;break}let v=n/r,w=c/f;return Math.min(v,w,.75)},A=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,a)=>{let r={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 r?a<=r.good?{color:"#10b981",status:"good",icon:Ke}:a<=r.needsImprovement?{color:"#f59e0b",status:"needs-improvement",icon:Xe}:{color:"#ef4444",status:"poor",icon:qe}:{color:"#6b7280",status:"unknown"}},U=e=>{try{let a=new URL(e);return a.searchParams.set("no-dev-tools","true"),a.toString()}catch(a){return e+(e.includes("?")?"&":"?")+"no-dev-tools=true"}},Q=()=>{document.querySelectorAll(".device-iframe").forEach(a=>{let d=a.src;a.src="",setTimeout(()=>{a.src=d},50)})};import i from"react";import{Play as _e,RotateCcw as Ye,Maximize2 as Ze,X as Qe,Wifi as ue,Battery as ge,Signal as ve,Lock as Je,ArrowLeft as Re,ArrowRight as et,RotateCw as tt}from"lucide-react";function J({device:e,url:a,deviceRotations:d,performanceData:r,runningTests:f,realDeviceBehavior:n,accessibilityMode:c,showGrid:v,onToggleRotation:w,onRemove:h,onFullscreen:u,onRunTest:s}){let p=d.get(e.name)||!1,o=Y(e,d),g=p?e.height:e.width,y=p?e.width:e.height,b=r.get(e.name),C=f.has(e.name),T=0;n&&(e.hasNotch&&(T+=32),e.statusBar&&(T+=e.os==="android"?24:44),e.browserUI&&(T+=e.category==="phone"?0:72));let P=y-T;return i.createElement("div",{className:"device-preview"},i.createElement("div",{className:"device-header"},i.createElement("div",null,i.createElement("div",{className:"device-title"},e.icon,e.name),i.createElement("div",{className:"device-info"},i.createElement("span",null,g," \xD7 ",y),i.createElement("span",null,Math.round(o*100),"%"),b&&i.createElement("span",{style:{color:A(b.performance).color,fontWeight:500}},b.performance))),i.createElement("div",{className:"device-actions"},i.createElement("button",{onClick:()=>s(e.name),className:"test-btn",disabled:C,title:"Run Comprehensive Test"},i.createElement(_e,{className:"w-2 h-2"})),i.createElement("button",{onClick:()=>w(e.name),className:`action-btn ${p?"active":""}`,title:"Rotate"},i.createElement(Ye,{className:"w-3 h-3"})),i.createElement("button",{onClick:u,className:"action-btn",title:"Fullscreen"},i.createElement(Ze,{className:"w-3 h-3"})),i.createElement("button",{onClick:h,className:"action-btn remove-btn",title:"Remove device"},i.createElement(Qe,{className:"w-3 h-3"})))),i.createElement("div",{className:"device-body"},i.createElement("div",{className:"device-chrome",style:{width:g*o,height:y*o}},n&&i.createElement(i.Fragment,null,e.hasNotch&&i.createElement("div",{className:"ios-notch",style:{transform:`translateX(-50%) scale(${o})`}}),e.statusBar&&i.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"?i.createElement(i.Fragment,null,i.createElement("div",{className:"android-status-left"},i.createElement("span",null,"12:34")),i.createElement("div",{className:"android-status-right"},i.createElement(ve,{style:{width:10*o,height:10*o}}),i.createElement(ue,{style:{width:10*o,height:10*o}}),i.createElement(ge,{style:{width:10*o,height:10*o}}),i.createElement("span",null,"100%"))):i.createElement(i.Fragment,null,i.createElement("div",{className:"ios-status-left"},i.createElement(ve,{style:{width:12*o,height:12*o}}),i.createElement(ue,{style:{width:12*o,height:12*o}})),i.createElement("span",null,"9:41"),i.createElement("div",{className:"ios-status-right"},i.createElement("span",null,"100%"),i.createElement(ge,{style:{width:14*o,height:14*o}})))),e.browserUI&&(e.category==="laptop"||e.category==="desktop"||e.category==="special")&&i.createElement("div",{className:e.os==="macos"?"macos-chrome":"windows-chrome",style:{height:72*o}},i.createElement("div",{className:"titlebar",style:{height:32*o,padding:`0 ${12*o}px`}},i.createElement("div",{className:"browser-controls"},i.createElement("div",{className:"browser-btn btn-close",style:{width:12*o,height:12*o}}),i.createElement("div",{className:"browser-btn btn-minimize",style:{width:12*o,height:12*o}}),i.createElement("div",{className:"browser-btn btn-maximize",style:{width:12*o,height:12*o}})),i.createElement("div",{className:"window-title",style:{fontSize:13*o}},a.replace("http://","").replace("https://","").split("/")[0])),i.createElement("div",{className:"toolbar",style:{padding:`${6*o}px ${12*o}px`}},i.createElement("div",{className:"nav-buttons"},i.createElement("button",{className:"nav-btn",style:{width:24*o,height:24*o},disabled:!0},i.createElement(Re,{style:{width:12*o,height:12*o}})),i.createElement("button",{className:"nav-btn",style:{width:24*o,height:24*o},disabled:!0},i.createElement(et,{style:{width:12*o,height:12*o}})),i.createElement("button",{className:"nav-btn",style:{width:24*o,height:24*o}},i.createElement(tt,{style:{width:12*o,height:12*o}}))),i.createElement("div",{className:"address-bar",style:{height:28*o,fontSize:13*o,padding:`0 ${8*o}px`}},i.createElement(Je,{style:{width:12*o,height:12*o,opacity:.7}}),i.createElement("span",null,a.replace("http://","").replace("https://","").split("/")[0]))))),i.createElement("div",{className:"device-viewport",style:{width:g*o,height:(n?P:y)*o}},C&&i.createElement("div",{className:"device-loading"},i.createElement("div",{className:"spinner"}),i.createElement("span",null,"Running comprehensive analysis...")),i.createElement("iframe",{src:U(a),title:`${e.name} device preview`,width:g,height:n?P:y,className:"device-iframe",style:{transform:`scale(${o})`}}),c!=="none"&&i.createElement("div",{className:`accessibility-filter ${c==="contrast"?"contrast-filter":"colorblind-filter"}`}),v&&i.createElement("div",{className:"grid-overlay"})))))}import t from"react";import{ChevronDown as ot,ChevronUp as it,X as st,TrendingUp as nt,Accessibility as be,Globe as xe,Lock as ye,Zap as we,BarChart3 as at,FileText as rt,Info as lt}from"lucide-react";function R({deviceName:e,isExpanded:a,activeTab:d,performanceData:r,accessibilityData:f,seoData:n,securityData:c,onToggleExpand:v,onClose:w,onTabChange:h}){return t.createElement("div",{className:"floating-metrics"},t.createElement("div",{className:"metrics-header"},t.createElement("div",{className:"metrics-title"},"Quality Analysis \u2022 ",e),t.createElement("div",{className:"metrics-controls"},t.createElement("button",{onClick:v,className:"action-btn",title:a?"Collapse":"Expand"},a?t.createElement(ot,{className:"w-4 h-4"}):t.createElement(it,{className:"w-4 h-4"})),t.createElement("button",{onClick:w,className:"action-btn",title:"Close metrics"},t.createElement(st,{className:"w-4 h-4"})))),a&&t.createElement("div",{className:"metrics-content"},t.createElement("div",{className:"tab-navigation"},t.createElement("button",{onClick:()=>h("performance"),className:`tab-btn ${d==="performance"?"active":""}`},t.createElement(nt,{className:"w-3 h-3",style:{marginRight:"4px"}}),"Performance"),t.createElement("button",{onClick:()=>h("accessibility"),className:`tab-btn ${d==="accessibility"?"active":""}`},t.createElement(be,{className:"w-3 h-3",style:{marginRight:"4px"}}),"Accessibility"),t.createElement("button",{onClick:()=>h("seo"),className:`tab-btn ${d==="seo"?"active":""}`},t.createElement(xe,{className:"w-3 h-3",style:{marginRight:"4px"}}),"SEO"),t.createElement("button",{onClick:()=>h("security"),className:`tab-btn ${d==="security"?"active":""}`},t.createElement(ye,{className:"w-3 h-3",style:{marginRight:"4px"}}),"Security")),d==="performance"&&r&&t.createElement(t.Fragment,null,t.createElement("div",{className:"lighthouse-scores"},[{key:"performance",label:"Performance",value:r.performance},{key:"accessibility",label:"Accessibility",value:r.accessibility},{key:"bestPractices",label:"Best Practices",value:r.bestPractices},{key:"seo",label:"SEO",value:r.seo},{key:"pwa",label:"PWA",value:r.pwa}].map(({key:u,label:s,value:p})=>{let o=A(p);return t.createElement("div",{key:u,className:"score-item"},t.createElement("div",{className:"score-value",style:{color:o.color}},p),t.createElement("div",{className:"score-label"},s),t.createElement("div",{className:"score-status",style:{background:o.color+"20",color:o.color}},o.label))})),t.createElement("div",{className:"vitals-section"},t.createElement("div",{className:"section-title"},t.createElement(we,{className:"w-4 h-4"}),"Core Web Vitals"),t.createElement("div",{className:"vitals-grid"},[{key:"loadTime",label:"Load Time",value:r.loadTime,unit:"ms",benchmark:"Good: < 2000ms"},{key:"firstContentfulPaint",label:"First Contentful Paint",value:r.firstContentfulPaint,unit:"ms",benchmark:"Good: < 1800ms"},{key:"largestContentfulPaint",label:"Largest Contentful Paint",value:r.largestContentfulPaint,unit:"ms",benchmark:"Good: < 2500ms"},{key:"cumulativeLayoutShift",label:"Cumulative Layout Shift",value:r.cumulativeLayoutShift,unit:"",benchmark:"Good: < 0.1"},{key:"firstInputDelay",label:"First Input Delay",value:r.firstInputDelay,unit:"ms",benchmark:"Good: < 100ms"},{key:"totalBlockingTime",label:"Total Blocking Time",value:r.totalBlockingTime,unit:"ms",benchmark:"Good: < 200ms"}].map(({key:u,label:s,value:p,unit:o,benchmark:g})=>{let y=Z(u,p),b=y.icon||lt;return t.createElement("div",{key:u,className:"vital-item"},t.createElement("div",{className:"vital-content"},t.createElement("div",{className:"vital-label"},s),t.createElement("div",{className:"vital-value",style:{color:y.color}},p,o),t.createElement("div",{className:"vital-benchmark"},g)),t.createElement("div",{className:"vital-status"},t.createElement(b,{style:{width:"20px",height:"20px",color:y.color}})))}))),t.createElement("div",{className:"vitals-section"},t.createElement("div",{className:"section-title"},t.createElement(at,{className:"w-4 h-4"}),"Additional Metrics"),t.createElement("div",{className:"performance-grid"},t.createElement("div",{className:"performance-item"},t.createElement("div",{className:"performance-label"},"Total Size"),t.createElement("div",{className:"performance-value"},r.totalSize," KB")),t.createElement("div",{className:"performance-item"},t.createElement("div",{className:"performance-label"},"Requests"),t.createElement("div",{className:"performance-value"},r.requestCount)),t.createElement("div",{className:"performance-item"},t.createElement("div",{className:"performance-label"},"Cache Hit Rate"),t.createElement("div",{className:"performance-value"},r.cacheHitRatio,"%")),t.createElement("div",{className:"performance-item"},t.createElement("div",{className:"performance-label"},"Image Optimization"),t.createElement("div",{className:"performance-value"},r.imageOptimization,"%")),t.createElement("div",{className:"performance-item"},t.createElement("div",{className:"performance-label"},"Text Compression"),t.createElement("div",{className:"performance-value"},r.textCompression,"%")),t.createElement("div",{className:"performance-item"},t.createElement("div",{className:"performance-label"},"Unused Code"),t.createElement("div",{className:"performance-value"},r.unusedCode,"%"))))),d==="accessibility"&&f&&t.createElement("div",{className:"accessibility-section"},t.createElement("div",{className:"section-title"},t.createElement(be,{className:"w-4 h-4"}),"Accessibility Issues Found"),f.map((u,s)=>t.createElement("div",{key:s,className:"accessibility-issue"},t.createElement("span",{className:`issue-severity severity-${u.severity}`},u.severity),t.createElement("div",{className:"issue-content"},t.createElement("div",{className:"issue-message"},u.message),t.createElement("div",{className:"issue-details"},t.createElement("span",null,"Element: ",u.element),u.count&&t.createElement("span",null,"Count: ",u.count),t.createElement("span",null,"Impact: ",u.impact)))))),d==="seo"&&n&&t.createElement("div",{className:"seo-section"},t.createElement("div",{className:"section-title"},t.createElement(xe,{className:"w-4 h-4"}),"SEO Analysis \u2022 Score: ",n.score,"/100"),t.createElement("div",{className:"seo-grid"},t.createElement("div",{className:"seo-category"},t.createElement("div",{className:"seo-category-title"},t.createElement(rt,{className:"w-4 h-4"}),"Content"),t.createElement("div",{className:"seo-checklist"},t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.title.exists&&n.title.optimal?"seo-check":"seo-fail"},n.title.exists&&n.title.optimal?"\u2713":"\u2717"),t.createElement("span",null,"Title Tag (",n.title.length," chars)")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.metaDescription.exists&&n.metaDescription.optimal?"seo-check":"seo-fail"},n.metaDescription.exists&&n.metaDescription.optimal?"\u2713":"\u2717"),t.createElement("span",null,"Meta Description (",n.metaDescription.length," chars)")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.headings.optimal?"seo-check":"seo-fail"},n.headings.optimal?"\u2713":"\u2717"),t.createElement("span",null,"Heading Structure (H1: ",n.headings.h1Count,")")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.imageAlts.percentage>80?"seo-check":"seo-fail"},n.imageAlts.percentage>80?"\u2713":"\u2717"),t.createElement("span",null,"Image Alt Texts (",n.imageAlts.percentage,"%)")))),t.createElement("div",{className:"seo-category"},t.createElement("div",{className:"seo-category-title"},t.createElement(we,{className:"w-4 h-4"}),"Technical"),t.createElement("div",{className:"seo-checklist"},t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.https?"seo-check":"seo-fail"},n.https?"\u2713":"\u2717"),t.createElement("span",null,"HTTPS")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.mobileFriendly?"seo-check":"seo-fail"},n.mobileFriendly?"\u2713":"\u2717"),t.createElement("span",null,"Mobile Friendly")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.canonicalUrl?"seo-check":"seo-fail"},n.canonicalUrl?"\u2713":"\u2717"),t.createElement("span",null,"Canonical URL")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:n.structuredData?"seo-check":"seo-fail"},n.structuredData?"\u2713":"\u2717"),t.createElement("span",null,"Structured Data"))))),n.recommendations.length>0&&t.createElement("div",{className:"recommendations"},t.createElement("div",{style:{fontWeight:600,marginBottom:"12px",fontSize:"14px"}},"Recommendations"),n.recommendations.slice(0,4).map((u,s)=>t.createElement("div",{key:s,className:"recommendation-item"},u)))),d==="security"&&c&&t.createElement("div",{className:"security-section"},t.createElement("div",{className:"section-title"},t.createElement(ye,{className:"w-4 h-4"}),"Security Analysis \u2022 Score: ",c.score,"/100"),t.createElement("div",{className:"seo-checklist"},t.createElement("div",{className:"seo-item"},t.createElement("span",{className:c.https?"seo-check":"seo-fail"},c.https?"\u2713":"\u2717"),t.createElement("span",null,"HTTPS Encryption")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:c.hsts?"seo-check":"seo-fail"},c.hsts?"\u2713":"\u2717"),t.createElement("span",null,"HSTS Header")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:c.contentSecurityPolicy?"seo-check":"seo-fail"},c.contentSecurityPolicy?"\u2713":"\u2717"),t.createElement("span",null,"Content Security Policy")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:c.xFrameOptions?"seo-check":"seo-fail"},c.xFrameOptions?"\u2713":"\u2717"),t.createElement("span",null,"X-Frame-Options")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:c.mixedContent?"seo-fail":"seo-check"},c.mixedContent?"\u2717":"\u2713"),t.createElement("span",null,"No Mixed Content")),t.createElement("div",{className:"seo-item"},t.createElement("span",{className:c.vulnerabilities===0?"seo-check":"seo-fail"},c.vulnerabilities===0?"\u2713":"\u2717"),t.createElement("span",null,"Vulnerabilities: ",c.vulnerabilities))))))}import S from"react";import{Zap as ct,Maximize2 as dt}from"lucide-react";function ee({devices:e,selectedDevices:a,deviceRotations:d,onToggleDevice:r,onLoadEssentials:f,onFullscreen:n}){return S.createElement("div",{className:"sidebar"},S.createElement("div",{style:{marginBottom:"20px"}},S.createElement("button",{onClick:f,className:"preset-btn",style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"12px"},title:"Load Essential Devices"},S.createElement(ct,{className:"w-4 h-4"}),"Essentials")),Object.entries(q).map(([c,{title:v,icon:w}])=>{let h=e.filter(s=>s.category===c),u=a.filter(s=>s.category===c).length;return S.createElement("div",{key:c,className:"device-category"},S.createElement("div",{className:"category-header"},S.createElement("div",{className:"category-title"},w,v),S.createElement("div",{className:"category-count"},u,"/",h.length)),S.createElement("div",{className:"device-list"},h.map(s=>{let p=a.find(b=>b.name===s.name),o=d.get(s.name)||!1,g=o?s.height:s.width,y=o?s.width:s.height;return S.createElement("div",{key:s.name,role:"button",tabIndex:0,onClick:()=>r(s),onKeyDown:b=>b.key==="Enter"&&r(s),className:`device-item ${p?"selected":""}`},S.createElement("div",{className:"device-name"},S.createElement("span",{style:{display:"flex",alignItems:"center",gap:"6px"}},s.icon,s.name),p&&S.createElement("button",{onClick:b=>{b.stopPropagation(),n(s)},className:"action-btn",title:"Fullscreen"},S.createElement(dt,{className:"w-3 h-3"}))),S.createElement("div",{className:"device-specs"},S.createElement("span",null,g," \xD7 ",y),S.createElement("span",null,s.os),s.pixelRatio&&S.createElement("span",null,"@",s.pixelRatio,"x")))})))}))}var te=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 I({url:e=typeof window!="undefined"?window.location.href:"/",isOpen:a,onToggle:d}){let[r,f]=$(V),[n,c]=$(!1),[v,w]=$(!1),[h,u]=$(new Map),[s,p]=$(null),[o,g]=$(!1),[y,b]=$(!1),[C,T]=$("none"),[P,Me]=$(new Map),[ke,Pe]=$(new Map),[Ee,Ie]=$(new Map),[ze,Le]=$(new Map),[Ae,Ue]=$(new Set),[M,se]=$(null),[ne,Oe]=$(!0),[Fe,ae]=$("performance"),X=pt(null),{runPerformanceTest:He}=_(Me,Pe,Ie,Le,Ue,se,ae);Ne(()=>(a?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset"}),[a]),Ne(()=>{let m=D=>{X.current&&!X.current.contains(D.target)&&g(!1)};return o&&document.addEventListener("mousedown",m),()=>{document.removeEventListener("mousedown",m)}},[o]);let re=m=>{u(D=>{let z=new Map(D);return z.set(m,!D.get(m)),z})},le=m=>{f(D=>D.find(L=>L.name===m.name)?D.filter(L=>L.name!==m.name):[...D,m])},ce=()=>{f(V)};if(!a)return null;let de=M?P.get(M):null,pe=M?ke.get(M):null,me=M?Ee.get(M):null,fe=M?ze.get(M):null;return l.createElement("div",null,l.createElement("style",null,te(n)),l.createElement("div",{className:"devtools-container"},l.createElement("div",{className:"devtools-header"},l.createElement("div",{className:"header-title"},"DevTools \u2022 ",r.length," devices"),l.createElement("div",{className:"header-controls"},l.createElement("div",{className:"control-group"},l.createElement("button",{onClick:Q,className:"control-btn",title:"Refresh all"},l.createElement(yt,{className:"w-4 h-4"}))),l.createElement("div",{className:"more-controls",ref:X},l.createElement("button",{onClick:()=>g(!o),className:`control-btn ${o?"active":""}`,title:"More options"},l.createElement(xt,{className:"w-4 h-4"})),o&&l.createElement("div",{className:"more-dropdown"},l.createElement("div",{className:`more-item ${n?"active":""}`,role:"button",tabIndex:0,onClick:()=>c(!n),onKeyDown:m=>m.key==="Enter"&&c(!n)},n?l.createElement(gt,{className:"w-4 h-4"}):l.createElement(ut,{className:"w-4 h-4"}),"Dark Mode"),l.createElement("div",{className:`more-item ${v?"active":""}`,role:"button",tabIndex:0,onClick:()=>w(!v),onKeyDown:m=>m.key==="Enter"&&w(!v)},l.createElement(vt,{className:"w-4 h-4"}),"Grid Overlay"),l.createElement("div",{className:`more-item ${y?"active":""}`,role:"button",tabIndex:0,onClick:()=>b(!y),onKeyDown:m=>m.key==="Enter"&&b(!y)},l.createElement(ft,{className:"w-4 h-4"}),"Real Device UI"),l.createElement("div",{className:`more-item ${C!=="none"?"active":""}`,role:"button",tabIndex:0,onClick:()=>T(C==="none"?"contrast":C==="contrast"?"colorblind":"none"),onKeyDown:m=>m.key==="Enter"&&T(C==="none"?"contrast":C==="contrast"?"colorblind":"none")},l.createElement(wt,{className:"w-4 h-4"}),"A11y Filters (",C,")"),l.createElement("div",{className:"more-item",role:"button",tabIndex:0,onClick:()=>{f([]),g(!1)},onKeyDown:m=>{m.key==="Enter"&&(f([]),g(!1))}},l.createElement(Se,{className:"w-4 h-4"}),"Clear All"))),l.createElement("button",{onClick:d,className:"control-btn",title:"Close DevTools"},l.createElement(Se,{className:"w-4 h-4"})))),l.createElement("div",{className:"content-wrapper"},l.createElement(ee,{devices:E,selectedDevices:r,deviceRotations:h,onToggleDevice:le,onLoadEssentials:ce,onFullscreen:p}),l.createElement("div",{className:"preview-area"},l.createElement("div",{className:"preview-content"},r.length===0?l.createElement("div",{className:"empty-state"},l.createElement(mt,{className:"w-12 h-12",style:{marginBottom:"12px",opacity:.3}}),l.createElement("p",{style:{fontSize:"16px",marginBottom:"6px",fontWeight:500}},"No devices selected"),l.createElement("p",{style:{fontSize:"13px",opacity:.7,marginBottom:"12px"}},"Choose devices or load essentials"),l.createElement("button",{onClick:ce,className:"preset-btn"},"Load Essentials")):l.createElement("div",{className:"preview-grid"},r.map(m=>l.createElement(J,{key:m.name,device:m,url:e,deviceRotations:h,performanceData:P,runningTests:Ae,realDeviceBehavior:y,accessibilityMode:C,showGrid:v,onToggleRotation:re,onRemove:()=>le(m),onFullscreen:()=>p(m),onRunTest:He})))))),(de||pe||me||fe)&&M&&l.createElement(R,{deviceName:M,isExpanded:ne,activeTab:Fe,performanceData:de||void 0,accessibilityData:pe||void 0,seoData:me||void 0,securityData:fe||void 0,onToggleExpand:()=>Oe(!ne),onClose:()=>se(null),onTabChange:ae}),s&&l.createElement("div",{className:"fullscreen-overlay"},l.createElement("div",{className:"fullscreen-header"},l.createElement("div",null,l.createElement("div",{className:"device-title"},s.icon,s.name,l.createElement("span",{style:{marginLeft:"12px",opacity:.7,fontSize:"13px"}},h.get(s.name)?s.height:s.width," ","\xD7"," ",h.get(s.name)?s.width:s.height))),l.createElement("div",{className:"header-controls"},l.createElement("button",{onClick:()=>re(s.name),className:`control-btn ${h.get(s.name)?"active":""}`},l.createElement(ht,{className:"w-4 h-4"})),l.createElement("button",{onClick:()=>p(null),className:"control-btn"},l.createElement(bt,{className:"w-4 h-4"})))),l.createElement("div",{className:"fullscreen-viewport"},(()=>{let m=h.get(s.name)||!1,D=m?s.height:s.width,z=m?s.width:s.height,L=window.innerWidth-40,Be=window.innerHeight-100,je=L/D,We=Be/z,he=Math.min(je,We),Ge=D*he,Ve=z*he;return l.createElement("iframe",{src:U(e),title:`${s.name} preview in fullscreen mode`,style:{width:Ge,height:Ve,border:"none",borderRadius:"8px",boxShadow:"0 20px 40px -12px rgba(0, 0, 0, 0.25)"}})})()))))}import{useState as Nt,useEffect as St}from"react";function O(){let[e,a]=Nt(!1);return St(()=>{let d=r=>{(r.ctrlKey||r.metaKey)&&r.shiftKey&&r.key==="D"&&(r.preventDefault(),a(f=>!f)),r.key==="Escape"&&e&&a(!1)};return window.addEventListener("keydown",d),()=>window.removeEventListener("keydown",d)},[e]),{isOpen:e,open:()=>a(!0),close:()=>a(!1),toggle:()=>a(d=>!d)}}import{Monitor as Ct,Settings2 as $t}from"lucide-react";function Te(){var n;if(typeof window=="undefined")return!0;if(typeof globalThis!="undefined"){let c=globalThis.process;if((n=c==null?void 0:c.env)!=null&&n.NODE_ENV)return c.env.NODE_ENV==="production"}let e=window.location.port,a=window.location.hostname,d=["3000","3001","5173","8080","4200","8000","9000"];return!(["localhost","127.0.0.1","0.0.0.0"].includes(a)||d.includes(e))}function F(){let{isOpen:e,toggle:a}=O(),[d,r]=oe(!1),[f,n]=oe(!1);return Tt(()=>{let h=()=>{let u=new URLSearchParams(window.location.search);n(u.get("no-dev-tools")==="true")};return h(),window.addEventListener("popstate",h),()=>window.removeEventListener("popstate",h)},[]),Te()||f?null:x.createElement(x.Fragment,null,x.createElement("div",{style:{position:"fixed",bottom:"20px",right:"20px",zIndex:999997,fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'}},x.createElement("button",{onClick:a,onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:{width:"56px",height:"56px",borderRadius:"50%",background:e?"linear-gradient(135deg, #3b82f6, #1d4ed8)":"linear-gradient(135deg, #ffffff, #f8fafc)",border:"1px solid