https://blujuniper.ai/assets/qa-BlRk8Bph.js

1import{c as b,r as d,j as t}from"./index-BZ4gXfUu.js";import{a as N,n as y}from"./north-star-framework-DbAf9y37.js";import{L as j,C as v}from"./loader-circle-BeX7O_X1.js";const S=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]],I=b("circle-x",S);const E=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",key:"v9h5vc"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",key:"3uifl3"}],["path",{d:"M8 16H3v5",key:"1cv678"}]],M=b("refresh-cw",E),R="North*Star© framework";function g(a){return new Promise((l,c)=>{const s=new Image;s.onload=()=>l({width:s.naturalWidth,height:s.naturalHeight}),s.onerror=()=>c(new Error("Image failed to load")),s.src=a})}function $({status:a}){return a==="pending"?t.jsx(j,{className:"h-5 w-5 animate-spin text-muted-foreground"}):a==="pass"?t.jsx(v,{className:"h-5 w-5 text-emerald-600"}):t.jsx(I,{className:"h-5 w-5 text-red-600"})}function T(){const[a,l]=d.useState([{id:"asset-framework",label:"North*Star© framework diagram asset loads",status:"pending"},{id:"asset-logo",label:"North*Star© logo asset loads",status:"pending"},{id:"desktop-render",label:"Diagram renders inside North*Star© page (desktop, 1280px)",status:"pending"},{id:"mobile-render",label:"Diagram renders inside North*Star© page (mobile, 375px)",status:"pending"}]),c=d.useRef(null),s=d.useRef(null),[m,w]=d.useState(0),o=(e,n)=>l(h=>h.map(i=>i.id===e?{...i,...n}:i));d.useEffect(()=>{l(e=>e.map(n=>({...n,status:"pending",error:void 0,detail:void 0}))),g(N).then(e=>o("asset-framework",{status:"pass",detail:`${e.width}×${e.height}px`})).catch(e=>o("asset-framework",{status:"fail",error:e.message})),g(y).then(e=>o("asset-logo",{status:"pass",detail:`${e.width}×${e.height}px`})).catch(e=>o("asset-logo",{status:"fail",error:e.message}))},[m]);const x=async(e,n)=>{const h=Date.now(),i=2e4;try{if(!n)throw new Error("Iframe not mounted");let r;for(;Date.now()-h<i;){const p=n.contentDocument;if(p){const u=Array.from(p.querySelectorAll("img")).find(k=>(k.alt||"").includes(R));if(u){r=u;try{r.scrollIntoView({block:"center"})}catch{}break}}await new Promise(u=>setTimeout(u,250))}if(!r)throw new Error("Framework <img> not found in iframe within 20s");for(;Date.now()-h<i&&!(r.complete&&r.naturalWidth>0);)await new Promise(p=>setTimeout(p,200));if(!r.complete||r.naturalWidth===0)throw new Error("Framework <img> in DOM but did not finish loading");const f=r.getBoundingClientRect();o(e,{status:"pass",detail:`rendered ${Math.round(f.width)}×${Math.round(f.height)}px (natural ${r.naturalWidth}×${r.naturalHeight})`})}catch(r){o(e,{status:"fail",error:r?.message||String(r)})}};return d.useEffect(()=>{const e=setTimeout(()=>{x("desktop-render",c.current),x("mobile-render",s.current)},600);return()=>clearTimeout(e)},[m]),t.jsx("main",{className:"container-page py-12",children:t.jsxs("div",{className:"mx-auto max-w-5xl",children:[t.jsxs("div",{className:"flex items-start justify-between gap-4",children:[t.jsxs("div",{children:[t.jsx("h1",{className:"font-display text-3xl font-extrabold text-brand-deep md:text-4xl",children:"QA Checklist"}),t.jsx("p",{className:"mt-2 text-muted-foreground",children:"Automated checks for the North*Star© framework diagram across desktop and mobile viewports."})]}),t.jsxs("button",{onClick:()=>w(e=>e+1),className:"inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 font-display text-sm font-bold text-brand-deep transition-colors hover:bg-secondary",children:[t.jsx(M,{className:"h-4 w-4"})," Re-run"]})]}),t.jsx("ul",{className:"mt-8 space-y-3",children:a.map(e=>t.jsxs("li",{className:"flex items-start gap-3 rounded-xl border border-border bg-card p-4",children:[t.jsx($,{status:e.status}),t.jsxs("div",{className:"min-w-0 flex-1",children:[t.jsx("p",{className:"font-display text-sm font-semibold text-brand-deep",children:e.label}),e.detail&&t.jsx("p",{className:"mt-1 text-xs text-muted-foreground",children:e.detail}),e.error&&t.jsxs("p",{className:"mt-1 text-xs font-semibold text-red-600",children:["FAILED — ",e.error]})]}),t.jsx("span",{className:`shrink-0 rounded-full px-2.5 py-1 font-display text-[10px] font-bold uppercase tracking-[0.18em] ${e.status==="pass"?"bg-emerald-100 text-emerald-700":e.status==="fail"?"bg-red-100 text-red-700":"bg-secondary text-muted-foreground"}`,children:e.status})]},e.id))}),t.jsxs("div",{className:"mt-12 grid gap-8 lg:grid-cols-[1fr_auto]",children:[t.jsxs("div",{className:"min-w-0",children:[t.jsx("p",{className:"font-display text-xs font-bold uppercase tracking-[0.2em] text-brand",children:"Desktop · 1280px (scaled 55%)"}),t.jsx("div",{className:"mt-3 overflow-hidden rounded-2xl border border-border bg-card",style:{width:704,height:715,maxWidth:"100%"},children:t.jsx("iframe",{ref:c,title:"North*Star desktop preview",src:"/governance",style:{width:1280,height:1300,transform:"scale(0.55)",transformOrigin:"top left",border:0,display:"block"}},`desktop-${m}`)})]}),t.jsxs("div",{className:"min-w-0",children:[t.jsx("p",{className:"font-display text-xs font-bold uppercase tracking-[0.2em] text-brand",children:"Mobile · 375px"}),t.jsx("div",{className:"mt-3 overflow-hidden rounded-2xl border border-border bg-card",style:{width:375,maxWidth:"100%"},children:t.jsx("iframe",{ref:s,title:"North*Star mobile preview",src:"/governance",style:{width:375,height:812,border:0,display:"block"}},`mobile-${m}`)})]})]}),t.jsx("p",{className:"mt-10 text-xs text-muted-foreground",children:"This page only verifies that the diagram asset loads and is present in the rendered page DOM at the expected viewports. It does not replace human visual review."})]})})}export{T as component};