@vizzly-testing/cli 0.30.0 → 0.31.0

package/dist/reporter/reporter-bundle.iife.js

@@ -189,7 +189,7 @@ Error generating stack: `+e.message+`
         bg-slate-800/30 hover:bg-slate-800/50
         border rounded-lg transition-all
         ${o?`border-red-500/40 hover:border-red-500/60`:s?`border-blue-500/40 hover:border-blue-500/60`:`border-slate-700/50 hover:border-slate-600`}
-      `,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>t(a),className:`relative w-16 h-11 rounded-md overflow-hidden flex-shrink-0 bg-slate-900 hover:ring-2 hover:ring-amber-500/50 transition-all`,children:[u?(0,P.jsx)(yo,{src:u,alt:e.name,className:`w-full h-full object-cover object-top`}):(0,P.jsx)(`div`,{className:`w-full h-full flex items-center justify-center text-slate-600`,children:(0,P.jsx)(an,{className:`w-5 h-5`})}),o&&(0,P.jsx)(`div`,{className:`absolute inset-0 bg-red-500/20 flex items-center justify-center`,children:(0,P.jsx)(`div`,{className:`w-2 h-2 bg-red-500 rounded-full animate-pulse`})}),!o&&s&&(0,P.jsx)(`div`,{className:`absolute inset-0 bg-blue-500/10`}),e.comparisons.length>1&&(0,P.jsx)(`div`,{className:`absolute bottom-0.5 right-0.5 px-1 py-0.5 text-[9px] font-bold bg-slate-900/90 text-slate-300 rounded`,children:e.comparisons.length})]}),(0,P.jsxs)(`button`,{type:`button`,onClick:()=>t(a),className:`flex-1 min-w-0 text-left`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(`h3`,{className:`text-sm font-medium text-white truncate`,children:e.name}),c>0&&(0,P.jsxs)(`span`,{className:`text-xs font-mono text-red-400`,children:[c.toFixed(1),`%`]})]}),(0,P.jsx)(`div`,{className:`mt-1`,children:(0,P.jsx)(wo,{group:e})})]}),(0,P.jsxs)(`div`,{className:`flex items-center gap-2 flex-shrink-0`,children:[(0,P.jsx)(Co,{group:e}),l&&(0,P.jsxs)(`div`,{className:`flex items-center gap-1 ${e.acceptedCount===0?`opacity-100`:`opacity-0 group-hover:opacity-100`} transition-opacity`,children:[(0,P.jsx)(L,{variant:`ghost`,size:`sm`,onClick:t=>{t.stopPropagation(),n(e)},disabled:i,className:`!p-1.5 text-emerald-400 hover:bg-emerald-500/20`,title:`Accept ${e.comparisons.length>1?`all ${e.comparisons.length} variants`:``}`,children:(0,P.jsx)(Bt,{className:`w-4 h-4`})}),(0,P.jsx)(L,{variant:`ghost`,size:`sm`,onClick:t=>{t.stopPropagation(),r(e)},disabled:i,className:`!p-1.5 text-red-400 hover:bg-red-500/20`,title:`Reject`,children:(0,P.jsx)($n,{className:`w-4 h-4`})})]}),(0,P.jsx)(Jt,{className:`w-4 h-4 text-slate-500 group-hover:text-slate-300 transition-colors`})]})]})}function Eo({comparisons:e,onSelectComparison:t,onAcceptComparison:n,onRejectComparison:r,onAcceptGroup:i,onRejectGroup:a,loadingStates:o={}}){let s=(0,N.useMemo)(()=>!e||e.length===0?[]:xo(e),[e]);if(s.length===0)return(0,P.jsx)(`div`,{className:`text-center py-12 text-slate-400`,children:`No screenshots to display`});let c=e=>{let t=e.comparisons.map(bo).filter(Boolean);if(i){i(t);return}if(n)for(let e of t)n(e)},l=e=>{let t=e.comparisons.map(bo).filter(Boolean);if(a){a(t);return}if(r)for(let e of t)r(e)},u=Object.values(o).some(e=>e===`accepting`);return(0,P.jsx)(`div`,{className:`space-y-2`,children:s.map(e=>(0,P.jsx)(To,{group:e,onSelect:t,onAcceptGroup:c,onRejectGroup:l,isAccepting:u},e.name))})}function Do(e){return e<=480?ln:e<=1024?dn:an}function Oo({value:e,onChange:t,options:n,placeholder:r,renderOption:i,renderValue:a,testId:o}){let[s,c]=(0,N.useState)(!1),l=(0,N.useRef)(null),u=(0,N.useCallback)(e=>{t(e),c(!1)},[t]);return(0,P.jsxs)(`div`,{className:`relative`,ref:l,onBlur:(0,N.useCallback)(e=>{l.current?.contains(e.relatedTarget)||c(!1)},[]),children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>c(!s),"data-testid":o,className:`
+      `,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>t(a),className:`relative w-16 h-11 rounded-md overflow-hidden flex-shrink-0 bg-slate-900 hover:ring-2 hover:ring-amber-500/50 transition-all`,children:[u?(0,P.jsx)(yo,{src:u,alt:e.name,className:`w-full h-full object-cover object-top`}):(0,P.jsx)(`div`,{className:`w-full h-full flex items-center justify-center text-slate-600`,children:(0,P.jsx)(an,{className:`w-5 h-5`})}),o&&(0,P.jsx)(`div`,{className:`absolute inset-0 bg-red-500/20 flex items-center justify-center`,children:(0,P.jsx)(`div`,{className:`w-2 h-2 bg-red-500 rounded-full animate-pulse`})}),!o&&s&&(0,P.jsx)(`div`,{className:`absolute inset-0 bg-blue-500/10`}),e.comparisons.length>1&&(0,P.jsx)(`div`,{className:`absolute bottom-0.5 right-0.5 px-1 py-0.5 text-[9px] font-bold bg-slate-900/90 text-slate-300 rounded`,children:e.comparisons.length})]}),(0,P.jsxs)(`button`,{type:`button`,onClick:()=>t(a),className:`flex-1 min-w-0 text-left`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(`h3`,{className:`text-sm font-medium text-white truncate`,children:e.name}),c>0&&(0,P.jsxs)(`span`,{className:`text-xs font-mono text-red-400`,children:[c.toFixed(1),`%`]})]}),(0,P.jsx)(`div`,{className:`mt-1`,children:(0,P.jsx)(wo,{group:e})})]}),(0,P.jsxs)(`div`,{className:`flex items-center gap-2 flex-shrink-0`,children:[(0,P.jsx)(Co,{group:e}),l&&(0,P.jsxs)(`div`,{className:`flex items-center gap-1 ${e.acceptedCount===0?`opacity-100`:`opacity-0 group-hover:opacity-100`} transition-opacity`,children:[(0,P.jsx)(L,{variant:`ghost`,size:`sm`,onClick:t=>{t.stopPropagation(),n(e)},disabled:i,className:`!p-1.5 text-emerald-400 hover:bg-emerald-500/20`,title:`Accept ${e.comparisons.length>1?`all ${e.comparisons.length} variants`:``}`,children:(0,P.jsx)(Bt,{className:`w-4 h-4`})}),(0,P.jsx)(L,{variant:`ghost`,size:`sm`,onClick:t=>{t.stopPropagation(),r(e)},disabled:i,className:`!p-1.5 text-red-400 hover:bg-red-500/20`,title:`Reject`,children:(0,P.jsx)($n,{className:`w-4 h-4`})})]}),(0,P.jsx)(Jt,{className:`w-4 h-4 text-slate-500 group-hover:text-slate-300 transition-colors`})]})]})}function Eo({comparisons:e,onSelectComparison:t,onAcceptComparison:n,onRejectComparison:r,onAcceptGroup:i,onRejectGroup:a,loadingStates:o={}}){let s=(0,N.useMemo)(()=>!e||e.length===0?[]:xo(e),[e]);if(s.length===0)return(0,P.jsx)(`div`,{className:`text-center py-12 text-slate-400`,children:`No screenshots to display`});let c=e=>{let t=e.comparisons.map(bo).filter(Boolean);if(i){i(t);return}if(n)for(let e of t)n(e)},l=e=>{let t=e.comparisons.map(bo).filter(Boolean);if(a){a(t);return}if(r)for(let e of t)r(e)},u=Object.values(o).some(e=>e===`accepting`);return(0,P.jsx)(`div`,{className:`space-y-2`,children:s.map(e=>(0,P.jsx)(To,{group:e,onSelect:t,onAcceptGroup:c,onRejectGroup:l,isAccepting:u},e.name))})}function Do(e){return e<=480?ln:e<=1024?dn:an}function Oo(e){return Number(e.split(`×`)[0])}function ko({value:e,onChange:t,options:n,placeholder:r,renderOption:i,renderValue:a,testId:o}){let[s,c]=(0,N.useState)(!1),l=(0,N.useRef)(null),u=(0,N.useCallback)(e=>{t(e),c(!1)},[t]);return(0,P.jsxs)(`div`,{className:`relative`,ref:l,onBlur:(0,N.useCallback)(e=>{l.current?.contains(e.relatedTarget)||c(!1)},[]),children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>c(!s),"data-testid":o,className:`
           inline-flex items-center gap-2 px-2.5 h-8 rounded-md text-xs font-medium
           bg-transparent border transition-all
           ${s?`border-amber-500/50 ring-1 ring-amber-500/20`:`border-slate-700/50 hover:border-slate-600`}
@@ -199,26 +199,26 @@ Error generating stack: `+e.message+`
               `,children:[(0,P.jsx)(`span`,{className:`w-4 h-4`}),(0,P.jsx)(`span`,{children:r})]}),n.map(t=>(0,P.jsx)(`button`,{type:`button`,onClick:()=>u(t),className:`
                   w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors
                   ${e===t?`bg-amber-500/10 text-amber-400`:`text-slate-300 hover:bg-slate-700/50`}
-                `,children:i(t)},t))]})})]})}function ko({value:e,onChange:t}){let[n,r]=(0,N.useState)(!1),i=(0,N.useRef)(null),a=[{value:oo.PRIORITY,label:`Priority`,description:`Failed first`},{value:oo.NAME,label:`Name`,description:`A to Z`},{value:oo.TIME,label:`Time`,description:`Recent first`}],o=a.find(t=>t.value===e)||a[0];return(0,P.jsxs)(`div`,{className:`relative`,ref:i,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>r(!n),className:`
+                `,children:i(t)},t))]})})]})}function Ao({value:e,onChange:t}){let[n,r]=(0,N.useState)(!1),i=(0,N.useRef)(null),a=[{value:oo.PRIORITY,label:`Priority`,description:`Failed first`},{value:oo.NAME,label:`Name`,description:`A to Z`},{value:oo.TIME,label:`Time`,description:`Recent first`}],o=a.find(t=>t.value===e)||a[0];return(0,P.jsxs)(`div`,{className:`relative`,ref:i,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>r(!n),className:`
           inline-flex items-center gap-2 px-2.5 h-8 rounded-md text-xs font-medium
           bg-transparent border transition-all
           ${n?`border-amber-500/50 ring-1 ring-amber-500/20`:`border-slate-700/50 hover:border-slate-600`}
         `,children:[(0,P.jsx)(Ot,{className:`w-3.5 h-3.5 text-slate-500`}),(0,P.jsx)(`span`,{className:`text-slate-300`,children:o.label}),(0,P.jsx)(Wt,{className:`w-3 h-3 text-slate-500 transition-transform ${n?`rotate-180`:``}`})]}),n&&(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`div`,{className:`fixed inset-0 z-40`,onClick:()=>r(!1)}),(0,P.jsx)(`div`,{className:`absolute top-full right-0 mt-1 z-50 w-48 bg-slate-800 border border-slate-700/50 rounded-lg shadow-xl overflow-hidden`,children:(0,P.jsx)(`div`,{className:`py-1`,children:a.map(n=>(0,P.jsxs)(`button`,{type:`button`,onClick:()=>{t(n.value),r(!1)},className:`
                     w-full flex flex-col items-start px-3 py-2 text-left transition-colors
                     ${e===n.value?`bg-amber-500/10`:`hover:bg-slate-700/50`}
-                  `,children:[(0,P.jsx)(`span`,{className:e===n.value?`text-amber-400 font-medium`:`text-slate-300`,children:n.label}),(0,P.jsx)(`span`,{className:`text-xs text-slate-500`,children:n.description})]},n.value))})})]})]})}function Ao({label:e,icon:t,onRemove:n}){return(0,P.jsxs)(`span`,{className:`inline-flex items-center gap-1.5 px-2 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-xs text-amber-400`,children:[t&&(0,P.jsx)(t,{className:`w-3 h-3`}),(0,P.jsx)(`span`,{children:e}),(0,P.jsx)(`button`,{type:`button`,onClick:n,className:`ml-0.5 hover:text-amber-200 transition-colors`,children:(0,P.jsx)(tr,{className:`w-3 h-3`})})]})}function jo({filter:e,setFilter:t,sortBy:n,setSortBy:r,searchQuery:i,setSearchQuery:a,selectedBrowser:o,setSelectedBrowser:s,selectedViewport:c,setSelectedViewport:l,availableFilters:u,counts:d,onRefresh:f,loading:p}){let[m,h]=(0,N.useState)(!1),g=u.browsers.length>1||u.viewports.length>1,_=(0,N.useMemo)(()=>{let t=0;return e!==H.ALL&&t++,o!==`all`&&t++,c!==`all`&&t++,i.trim()&&t++,t},[e,o,c,i]),v=(0,N.useCallback)(()=>{t(H.ALL),s(`all`),l(`all`),a(``)},[t,s,l,a]),y=(0,N.useCallback)(e=>(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(Di,{browser:e,className:`w-4 h-4`}),(0,P.jsx)(`span`,{className:`capitalize`,children:e})]}),[]),b=(0,N.useCallback)(e=>e===`all`?(0,P.jsx)(`span`,{className:`text-slate-400`,children:`All browsers`}):(0,P.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(Di,{browser:e,className:`w-4 h-4`}),(0,P.jsx)(`span`,{className:`text-slate-300 capitalize`,children:e})]}),[]),x=(0,N.useCallback)(e=>(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(Do(parseInt(e.split(`×`)[0],10)),{className:`w-4 h-4 text-slate-400`}),(0,P.jsx)(`span`,{className:`font-mono text-xs`,children:e})]}),[]),S=(0,N.useCallback)(e=>e===`all`?(0,P.jsx)(`span`,{className:`text-slate-400`,children:`All viewports`}):(0,P.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(Do(parseInt(e.split(`×`)[0],10)),{className:`w-4 h-4 text-slate-400`}),(0,P.jsx)(`span`,{className:`text-slate-300 font-mono text-xs`,children:e})]}),[]);return(0,P.jsxs)(`div`,{className:`space-y-3`,children:[(0,P.jsxs)(`div`,{className:`flex flex-col gap-3 p-3 bg-slate-800/30 border border-slate-700/40 rounded-xl`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(`div`,{className:`flex-1`,children:(0,P.jsx)(ba,{value:i,onChange:a,placeholder:`Search screenshots...`,className:`w-full`})}),g&&(0,P.jsxs)(`button`,{type:`button`,onClick:()=>h(!m),className:`
+                  `,children:[(0,P.jsx)(`span`,{className:e===n.value?`text-amber-400 font-medium`:`text-slate-300`,children:n.label}),(0,P.jsx)(`span`,{className:`text-xs text-slate-500`,children:n.description})]},n.value))})})]})]})}function jo({label:e,icon:t,onRemove:n}){return(0,P.jsxs)(`span`,{className:`inline-flex items-center gap-1.5 px-2 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-xs text-amber-400`,children:[t&&(0,P.jsx)(t,{className:`w-3 h-3`}),(0,P.jsx)(`span`,{children:e}),(0,P.jsx)(`button`,{type:`button`,onClick:n,className:`ml-0.5 hover:text-amber-200 transition-colors`,children:(0,P.jsx)(tr,{className:`w-3 h-3`})})]})}function Mo({filter:e,setFilter:t,sortBy:n,setSortBy:r,searchQuery:i,setSearchQuery:a,selectedBrowser:o,setSelectedBrowser:s,selectedViewport:c,setSelectedViewport:l,availableFilters:u,counts:d,onRefresh:f,loading:p}){let[m,h]=(0,N.useState)(!1),g=u.browsers.length>1||u.viewports.length>1,_=(0,N.useMemo)(()=>{let t=0;return e!==H.ALL&&t++,o!==`all`&&t++,c!==`all`&&t++,i.trim()&&t++,t},[e,o,c,i]),v=(0,N.useCallback)(()=>{t(H.ALL),s(`all`),l(`all`),a(``)},[t,s,l,a]),y=(0,N.useCallback)(e=>(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(Di,{browser:e,className:`w-4 h-4`}),(0,P.jsx)(`span`,{className:`capitalize`,children:e})]}),[]),b=(0,N.useCallback)(e=>e===`all`?(0,P.jsx)(`span`,{className:`text-slate-400`,children:`All browsers`}):(0,P.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(Di,{browser:e,className:`w-4 h-4`}),(0,P.jsx)(`span`,{className:`text-slate-300 capitalize`,children:e})]}),[]),x=(0,N.useCallback)(e=>(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(Do(Oo(e)),{className:`w-4 h-4 text-slate-400`}),(0,P.jsx)(`span`,{className:`font-mono text-xs`,children:e})]}),[]),S=(0,N.useCallback)(e=>e===`all`?(0,P.jsx)(`span`,{className:`text-slate-400`,children:`All viewports`}):(0,P.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(Do(Oo(e)),{className:`w-4 h-4 text-slate-400`}),(0,P.jsx)(`span`,{className:`text-slate-300 font-mono text-xs`,children:e})]}),[]);return(0,P.jsxs)(`div`,{className:`space-y-3`,children:[(0,P.jsxs)(`div`,{className:`flex flex-col gap-3 p-3 bg-slate-800/30 border border-slate-700/40 rounded-xl`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,P.jsx)(`div`,{className:`flex-1`,children:(0,P.jsx)(ba,{value:i,onChange:a,placeholder:`Search screenshots...`,className:`w-full`})}),g&&(0,P.jsxs)(`button`,{type:`button`,onClick:()=>h(!m),className:`
                 relative md:hidden inline-flex items-center justify-center w-8 h-8 rounded-md transition-all
                 ${m||_>0?`bg-amber-500/20 text-amber-400 border border-amber-500/30`:`text-slate-400 border border-slate-700/50 hover:border-slate-600`}
-              `,children:[(0,P.jsx)(mt,{className:`w-4 h-4`}),_>0&&(0,P.jsx)(`span`,{className:`absolute -top-1 -right-1 w-4 h-4 bg-amber-500 text-slate-900 text-[10px] font-bold rounded-full flex items-center justify-center`,children:_})]}),(0,P.jsx)(`div`,{className:`hidden md:block`,children:(0,P.jsx)(ko,{value:n,onChange:r})}),(0,P.jsx)(`button`,{type:`button`,onClick:f,disabled:p,className:`inline-flex items-center justify-center w-8 h-8 rounded-md border border-slate-700/50 text-slate-400 hover:text-white hover:border-slate-600 transition-all disabled:opacity-50`,title:`Refresh`,children:(0,P.jsx)(vt,{className:`w-4 h-4 ${p?`animate-spin`:``}`})})]}),(0,P.jsxs)(`div`,{className:`hidden md:flex items-center gap-3 flex-wrap`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,P.jsx)(z,{label:`All`,count:d.all,color:`gray`,active:e===H.ALL,onClick:()=>t(H.ALL),testId:`filter-status-all`}),(0,P.jsx)(z,{label:`Failed`,count:d.failed,color:`red`,active:e===H.FAILED,onClick:()=>t(H.FAILED),testId:`filter-status-failed`}),(0,P.jsx)(z,{label:`New`,count:d.new,color:`blue`,active:e===H.NEW,onClick:()=>t(H.NEW),testId:`filter-status-new`}),(0,P.jsx)(z,{label:`Passed`,count:d.passed,color:`emerald`,active:e===H.PASSED,onClick:()=>t(H.PASSED),testId:`filter-status-passed`})]}),g&&(0,P.jsx)(`div`,{className:`w-px h-6 bg-slate-700/50`}),u.browsers.length>1&&(0,P.jsx)(Oo,{value:o,onChange:s,options:u.browsers,placeholder:`All browsers`,renderOption:y,renderValue:b,testId:`filter-browser`}),u.viewports.length>1&&(0,P.jsx)(Oo,{value:c,onChange:l,options:u.viewports,placeholder:`All viewports`,renderOption:x,renderValue:S,testId:`filter-viewport`})]}),(0,P.jsxs)(`div`,{className:`md:hidden flex items-center gap-1.5 overflow-x-auto pb-1 -mx-1 px-1 scrollbar-hide`,children:[(0,P.jsx)(z,{label:`All`,count:d.all,color:`gray`,active:e===H.ALL,onClick:()=>t(H.ALL),testId:`mobile-filter-status-all`}),(0,P.jsx)(z,{label:`Failed`,count:d.failed,color:`red`,active:e===H.FAILED,onClick:()=>t(H.FAILED),testId:`mobile-filter-status-failed`}),(0,P.jsx)(z,{label:`New`,count:d.new,color:`blue`,active:e===H.NEW,onClick:()=>t(H.NEW),testId:`mobile-filter-status-new`}),(0,P.jsx)(z,{label:`Passed`,count:d.passed,color:`emerald`,active:e===H.PASSED,onClick:()=>t(H.PASSED),testId:`mobile-filter-status-passed`})]}),m&&g&&(0,P.jsxs)(`div`,{className:`md:hidden space-y-3 pt-2 border-t border-slate-700/30`,children:[(0,P.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`span`,{className:`text-sm text-slate-400`,children:`Sort by`}),(0,P.jsx)(ko,{value:n,onChange:r})]}),u.browsers.length>1&&(0,P.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`span`,{className:`text-sm text-slate-400`,children:`Browser`}),(0,P.jsx)(Oo,{value:o,onChange:s,options:u.browsers,placeholder:`All browsers`,renderOption:y,renderValue:b,testId:`filter-browser-mobile`})]}),u.viewports.length>1&&(0,P.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`span`,{className:`text-sm text-slate-400`,children:`Viewport`}),(0,P.jsx)(Oo,{value:c,onChange:l,options:u.viewports,placeholder:`All viewports`,renderOption:x,renderValue:S,testId:`filter-viewport-mobile`})]})]})]}),_>0&&(0,P.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,P.jsx)(`span`,{className:`text-xs text-slate-500`,children:`Filters:`}),e!==H.ALL&&(0,P.jsx)(Ao,{label:e.charAt(0).toUpperCase()+e.slice(1),onRemove:()=>t(H.ALL)}),o!==`all`&&(0,P.jsx)(Ao,{label:o,icon:()=>(0,P.jsx)(Di,{browser:o,className:`w-3 h-3`}),onRemove:()=>s(`all`)}),c!==`all`&&(0,P.jsx)(Ao,{label:c,icon:Do(parseInt(c.split(`×`)[0],10)),onRemove:()=>l(`all`)}),i.trim()&&(0,P.jsx)(Ao,{label:`"${i}"`,onRemove:()=>a(``)}),(0,P.jsx)(`button`,{type:`button`,onClick:v,className:`text-xs text-slate-500 hover:text-slate-300 transition-colors ml-2`,children:`Clear all`})]})]})}function Mo(e){return Array.isArray(e)?e.filter(Boolean):e?[e]:[]}function No({failedCount:e,newCount:t,onAcceptAll:n,isLoading:r}){let i=e+t,a=e>0;return(0,P.jsxs)(`div`,{className:`
+              `,children:[(0,P.jsx)(mt,{className:`w-4 h-4`}),_>0&&(0,P.jsx)(`span`,{className:`absolute -top-1 -right-1 w-4 h-4 bg-amber-500 text-slate-900 text-[10px] font-bold rounded-full flex items-center justify-center`,children:_})]}),(0,P.jsx)(`div`,{className:`hidden md:block`,children:(0,P.jsx)(Ao,{value:n,onChange:r})}),(0,P.jsx)(`button`,{type:`button`,onClick:f,disabled:p,className:`inline-flex items-center justify-center w-8 h-8 rounded-md border border-slate-700/50 text-slate-400 hover:text-white hover:border-slate-600 transition-all disabled:opacity-50`,title:`Refresh`,children:(0,P.jsx)(vt,{className:`w-4 h-4 ${p?`animate-spin`:``}`})})]}),(0,P.jsxs)(`div`,{className:`hidden md:flex items-center gap-3 flex-wrap`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,P.jsx)(z,{label:`All`,count:d.all,color:`gray`,active:e===H.ALL,onClick:()=>t(H.ALL),testId:`filter-status-all`}),(0,P.jsx)(z,{label:`Failed`,count:d.failed,color:`red`,active:e===H.FAILED,onClick:()=>t(H.FAILED),testId:`filter-status-failed`}),(0,P.jsx)(z,{label:`New`,count:d.new,color:`blue`,active:e===H.NEW,onClick:()=>t(H.NEW),testId:`filter-status-new`}),(0,P.jsx)(z,{label:`Passed`,count:d.passed,color:`emerald`,active:e===H.PASSED,onClick:()=>t(H.PASSED),testId:`filter-status-passed`})]}),g&&(0,P.jsx)(`div`,{className:`w-px h-6 bg-slate-700/50`}),u.browsers.length>1&&(0,P.jsx)(ko,{value:o,onChange:s,options:u.browsers,placeholder:`All browsers`,renderOption:y,renderValue:b,testId:`filter-browser`}),u.viewports.length>1&&(0,P.jsx)(ko,{value:c,onChange:l,options:u.viewports,placeholder:`All viewports`,renderOption:x,renderValue:S,testId:`filter-viewport`})]}),(0,P.jsxs)(`div`,{className:`md:hidden flex items-center gap-1.5 overflow-x-auto pb-1 -mx-1 px-1 scrollbar-hide`,children:[(0,P.jsx)(z,{label:`All`,count:d.all,color:`gray`,active:e===H.ALL,onClick:()=>t(H.ALL),testId:`mobile-filter-status-all`}),(0,P.jsx)(z,{label:`Failed`,count:d.failed,color:`red`,active:e===H.FAILED,onClick:()=>t(H.FAILED),testId:`mobile-filter-status-failed`}),(0,P.jsx)(z,{label:`New`,count:d.new,color:`blue`,active:e===H.NEW,onClick:()=>t(H.NEW),testId:`mobile-filter-status-new`}),(0,P.jsx)(z,{label:`Passed`,count:d.passed,color:`emerald`,active:e===H.PASSED,onClick:()=>t(H.PASSED),testId:`mobile-filter-status-passed`})]}),m&&g&&(0,P.jsxs)(`div`,{className:`md:hidden space-y-3 pt-2 border-t border-slate-700/30`,children:[(0,P.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`span`,{className:`text-sm text-slate-400`,children:`Sort by`}),(0,P.jsx)(Ao,{value:n,onChange:r})]}),u.browsers.length>1&&(0,P.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`span`,{className:`text-sm text-slate-400`,children:`Browser`}),(0,P.jsx)(ko,{value:o,onChange:s,options:u.browsers,placeholder:`All browsers`,renderOption:y,renderValue:b,testId:`filter-browser-mobile`})]}),u.viewports.length>1&&(0,P.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`span`,{className:`text-sm text-slate-400`,children:`Viewport`}),(0,P.jsx)(ko,{value:c,onChange:l,options:u.viewports,placeholder:`All viewports`,renderOption:x,renderValue:S,testId:`filter-viewport-mobile`})]})]})]}),_>0&&(0,P.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,P.jsx)(`span`,{className:`text-xs text-slate-500`,children:`Filters:`}),e!==H.ALL&&(0,P.jsx)(jo,{label:e.charAt(0).toUpperCase()+e.slice(1),onRemove:()=>t(H.ALL)}),o!==`all`&&(0,P.jsx)(jo,{label:o,icon:()=>(0,P.jsx)(Di,{browser:o,className:`w-3 h-3`}),onRemove:()=>s(`all`)}),c!==`all`&&(0,P.jsx)(jo,{label:c,icon:Do(Oo(c)),onRemove:()=>l(`all`)}),i.trim()&&(0,P.jsx)(jo,{label:`"${i}"`,onRemove:()=>a(``)}),(0,P.jsx)(`button`,{type:`button`,onClick:v,className:`text-xs text-slate-500 hover:text-slate-300 transition-colors ml-2`,children:`Clear all`})]})]})}function No(e){return Array.isArray(e)?e.filter(Boolean):e?[e]:[]}function Po({failedCount:e,newCount:t,onAcceptAll:n,isLoading:r}){let i=e+t,a=e>0;return(0,P.jsxs)(`div`,{className:`
       relative overflow-hidden rounded-xl border
       ${a?`bg-gradient-to-r from-red-500/10 via-red-500/5 to-transparent border-red-500/20`:`bg-gradient-to-r from-emerald-500/10 via-emerald-500/5 to-transparent border-emerald-500/20`}
     `,children:[(0,P.jsx)(`div`,{className:`absolute inset-0 opacity-5`,children:(0,P.jsx)(`div`,{className:`absolute inset-0`,style:{backgroundImage:`radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,backgroundSize:`24px 24px`}})}),(0,P.jsxs)(`div`,{className:`relative flex items-center gap-4 p-4`,children:[(0,P.jsx)(`div`,{className:`
           flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center
           ${a?`bg-red-500/20 text-red-400`:`bg-emerald-500/20 text-emerald-400`}
-        `,children:a?(0,P.jsx)(hn,{className:`w-5 h-5`}):(0,P.jsx)(Vn,{className:`w-5 h-5`})}),(0,P.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3 flex-wrap`,children:[e>0&&(0,P.jsxs)(`span`,{className:`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-sm font-medium`,children:[(0,P.jsx)(`span`,{className:`w-1.5 h-1.5 rounded-full bg-red-400`}),e,` changed`]}),t>0&&(0,P.jsxs)(`span`,{className:`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-sm font-medium`,children:[(0,P.jsx)(`span`,{className:`w-1.5 h-1.5 rounded-full bg-blue-400`}),t,` new`]})]}),(0,P.jsx)(`p`,{className:`text-sm text-slate-400 mt-1`,children:a?`Review visual differences and accept to update baselines`:`New screenshots ready to be saved as baselines`})]}),(0,P.jsxs)(L,{variant:`success`,onClick:n,loading:r,icon:Bt,className:`flex-shrink-0`,"data-testid":`btn-accept-all`,children:[`Accept All (`,i,`)`]})]})]})}function Po(){let[,e]=Fr(),{addToast:t,confirm:n}=Ja(),[r,i]=(0,N.useState)({}),{data:a,isLoading:o,refetch:s}=di(),c=pi(),l=gi(),u=_i(),{filteredComparisons:d,filter:f,setFilter:p,sortBy:m,setSortBy:h,searchQuery:g,setSearchQuery:_,selectedBrowser:v,setSelectedBrowser:y,selectedViewport:b,setSelectedViewport:x,availableFilters:S,counts:ee}=vo(a?.comparisons),C=(0,N.useCallback)(t=>{let n=t.id||t.signature||t.name;n&&e(`/comparison/${encodeURIComponent(n)}`)},[e]),w=(0,N.useCallback)((e,t)=>{i(n=>{let r={...n};for(let n of e)n&&(t?r[n]=t:delete r[n]);return r})},[]),te=(0,N.useCallback)(e=>{!e||e.length===0||(w(e,`accepting`),l.mutate(e,{onSuccess:()=>{w(e,`accepted`)},onError:n=>{let r=Mo(n?.succeededIds),i=Mo(n?.failedIds);r.length>0&&w(r,`accepted`),i.length>0?w(i,null):w(e,null),t(`Failed to accept: ${n.message}`,`error`)}}))},[l,t,w]),ne=(0,N.useCallback)(e=>{!e||e.length===0||(w(e,`rejecting`),u.mutate(e,{onSuccess:()=>{w(e,`rejected`)},onError:n=>{let r=Mo(n?.succeededIds),i=Mo(n?.failedIds);r.length>0&&w(r,`rejected`),i.length>0?w(i,null):w(e,null),t(`Failed to reject: ${n.message}`,`error`)}}))},[u,t,w]),T=(0,N.useCallback)(e=>te(e?[e]:[]),[te]),re=(0,N.useCallback)(e=>ne(e?[e]:[]),[ne]),E=(0,N.useCallback)(async()=>{await n(`This will update all failed and new screenshots.`,`Accept all changes as new baselines?`)&&c.mutate(void 0,{onSuccess:()=>{t(`All baselines accepted successfully`,`success`)},onError:e=>{console.error(`Failed to accept all baselines:`,e),t(`Failed to accept all baselines. Please try again.`,`error`)}})},[c,t,n]),D=!a?.comparisons||a.comparisons.length===0,O=f!==`all`||g.trim()||v!==`all`||b!==`all`,k=a?.comparisons?.some(e=>go(e.status)),A=a?.comparisons?.filter(e=>e.status===`failed`).length||0,ie=a?.comparisons?.filter(e=>ho(e.status)).length||0;return D?(0,P.jsx)(Mi,{icon:It,title:`No Screenshots Yet`,description:`Run your tests with vizzlyScreenshot() to start capturing visual comparisons.`}):(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(jo,{filter:f,setFilter:p,sortBy:m,setSortBy:h,searchQuery:g,setSearchQuery:_,selectedBrowser:v,setSelectedBrowser:y,selectedViewport:b,setSelectedViewport:x,availableFilters:S,counts:ee,onRefresh:s,loading:o}),k&&(0,P.jsx)(No,{failedCount:A,newCount:ie,onAcceptAll:E,isLoading:c.isPending}),d.length===0?(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{className:`py-12`,children:(0,P.jsx)(Mi,{icon:xn,title:`No matches`,description:`No comparisons match your current filters.`,action:O&&(0,P.jsx)(L,{variant:`ghost`,size:`sm`,onClick:()=>{p(`all`),_(``),y(`all`),x(`all`)},children:`Clear all filters`})})})}):(0,P.jsx)(Eo,{comparisons:d,onSelectComparison:C,onAcceptComparison:T,onRejectComparison:re,onAcceptGroup:te,onRejectGroup:ne,loadingStates:r})]})}function Fo(e={}){return at({queryKey:F.config,queryFn:Jr.get,...e})}function Io(){let e=We();return ot({mutationFn:Jr.updateProject,onSuccess:()=>{e.invalidateQueries({queryKey:F.config})}})}function Lo(e){return{threshold:String(e?.comparison?.threshold??2),port:String(e?.server?.port??47392),timeout:String(e?.server?.timeout??3e4),buildName:e?.build?.name??`Build {timestamp}`,environment:e?.build?.environment??`test`,openReport:e?.tdd?.openReport??!1}}function Ro(e){if(e==null||String(e).trim()===``)return null;let t=Number(e);return Number.isFinite(t)?t:null}function zo(e){let t=Ro(e);return Number.isInteger(t)?t:null}function Bo(e){let t={threshold:null,port:null,timeout:null},n=Ro(e.threshold);(n===null||n<0)&&(t.threshold=`Threshold must be a number greater than or equal to 0.`);let r=zo(e.port);(r===null||r<1||r>65535)&&(t.port=`Port must be a whole number between 1 and 65535.`);let i=zo(e.timeout);return(i===null||i<0)&&(t.timeout=`Timeout must be a whole number greater than or equal to 0.`),t}function Vo({source:e}){return(0,P.jsx)(Ti,{variant:{default:`default`,project:`info`,global:`purple`,env:`success`,cli:`warning`}[e]||`default`,size:`sm`,children:{default:`Default`,project:`Project`,global:`Global`,env:`Environment`,cli:`CLI Flag`}[e]||e})}function Ho({title:e,source:t,description:n,children:r,noSource:i}){return(0,P.jsxs)(`div`,{className:`space-y-4`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(`h3`,{className:`text-sm font-semibold text-white uppercase tracking-wide`,children:e}),!i&&(0,P.jsx)(Vo,{source:t||`default`})]}),n&&(0,P.jsx)(`p`,{className:`text-sm text-slate-400`,children:n}),(0,P.jsx)(`div`,{className:`space-y-4`,children:r})]})}function Uo({config:e,sources:t,onSave:n,isSaving:r}){let[i,a]=(0,N.useState)(Lo(e)),[o,s]=(0,N.useState)(!1),c=(0,N.useMemo)(()=>Bo(i),[i]),l=Object.values(c).some(Boolean),u=(0,N.useCallback)((e,t)=>{a(n=>({...n,[e]:t})),s(!0)},[]),d=(0,N.useCallback)(()=>{a(Lo(e)),s(!1)},[e]),f=(0,N.useCallback)(()=>{let e=Ro(i.threshold),t=zo(i.port),r=zo(i.timeout);e===null||t===null||r===null||n({comparison:{threshold:e},server:{port:t,timeout:r},build:{name:i.buildName,environment:i.environment},tdd:{openReport:i.openReport}},()=>s(!1))},[i,n]);return(0,P.jsxs)(`div`,{className:`grid grid-cols-1 lg:grid-cols-2 gap-6`,children:[(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsxs)(Ho,{title:`Comparison`,source:t?.comparison,description:`Configure how screenshots are compared`,children:[(0,P.jsx)(B,{label:`Threshold`,type:`number`,value:i.threshold,onChange:e=>u(`threshold`,e.target.value),hint:`CIEDE2000 Delta E. 0 = exact, 2 = recommended`,step:`0.1`,min:`0`}),c.threshold&&(0,P.jsx)(`p`,{className:`-mt-2 text-xs text-red-400`,children:c.threshold})]})})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsxs)(Ho,{title:`Server`,source:t?.server,description:`Local screenshot server configuration`,children:[(0,P.jsx)(B,{label:`Port`,type:`number`,value:i.port,onChange:e=>u(`port`,e.target.value),hint:`Default: 47392`}),c.port&&(0,P.jsx)(`p`,{className:`-mt-2 text-xs text-red-400`,children:c.port}),(0,P.jsx)(B,{label:`Timeout`,type:`number`,value:i.timeout,onChange:e=>u(`timeout`,e.target.value),hint:`Request timeout in milliseconds`}),c.timeout&&(0,P.jsx)(`p`,{className:`-mt-2 text-xs text-red-400`,children:c.timeout})]})})})]}),(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsxs)(Ho,{title:`Build`,source:t?.build,description:`Build naming and environment`,children:[(0,P.jsx)(B,{label:`Name Template`,type:`text`,value:i.buildName,onChange:e=>u(`buildName`,e.target.value),hint:`Use {timestamp} for current time`}),(0,P.jsx)(Pi,{label:`Environment`,value:i.environment,onChange:e=>u(`environment`,e.target.value),options:[{value:`test`,label:`Test`},{value:`development`,label:`Development`},{value:`staging`,label:`Staging`},{value:`production`,label:`Production`}]})]})})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsx)(Ho,{title:`TDD Mode`,source:t?.tdd,description:`Development workflow preferences`,children:(0,P.jsx)(Fi,{label:`Auto-open Report`,description:`Open dashboard in browser when starting TDD mode`,checked:i.openReport,onChange:e=>u(`openReport`,e.target.checked)})})})})]}),(0,P.jsx)(`div`,{className:`lg:col-span-2`,children:(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`div`,{className:`text-sm text-slate-400`,children:l?(0,P.jsx)(`span`,{className:`text-red-400`,children:`Fix validation errors before saving`}):o?(0,P.jsx)(`span`,{className:`text-amber-400`,children:`You have unsaved changes`}):(0,P.jsx)(`span`,{children:`Settings saved to project config`})}),(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(L,{variant:`ghost`,onClick:d,disabled:!o||r,children:`Reset`}),(0,P.jsx)(L,{variant:`primary`,onClick:f,loading:r,disabled:!o||l,children:`Save Changes`})]})]})})})]})}function Wo(){let{data:e,isLoading:t,error:n,refetch:r}=Fo(),i=Io(),{addToast:a}=Ja(),o=(0,N.useCallback)((e,t)=>{i.mutate(e,{onSuccess:()=>{t(),a(`Settings saved successfully!`,`success`)},onError:e=>{a(`Failed to save settings: ${e.message}`,`error`)}})},[i,a]);return t?(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(V,{variant:`heading`,className:`w-32 mb-2`}),(0,P.jsx)(V,{variant:`text`,className:`w-64`})]}),(0,P.jsxs)(`div`,{className:`grid grid-cols-1 lg:grid-cols-2 gap-6`,children:[(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-24`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-20`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})})]}),(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-16`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-24`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})})]})]})]}):n?(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white`,children:`Settings`}),(0,P.jsx)(`p`,{className:`text-slate-400 mt-1`,children:`Configure your Vizzly local development server`})]}),(0,P.jsxs)(xi,{variant:`danger`,title:`Failed to load settings`,dismissible:!0,onDismiss:()=>r(),children:[n.message,(0,P.jsx)(L,{variant:`danger`,size:`sm`,onClick:()=>r(),className:`mt-3`,children:`Retry`})]})]}):(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white`,children:`Settings`}),(0,P.jsx)(`p`,{className:`text-slate-400 mt-1`,children:`Configure your Vizzly local development server`})]}),(0,P.jsx)(Uo,{config:e?.config,sources:e?.sources,onSave:o,isSaving:i.isPending},JSON.stringify(e?.config))]})}function Go({icon:e,label:t,value:n,subvalue:r,variant:i,iconColor:a}){return(0,P.jsx)(R,{variant:i,hover:!1,children:(0,P.jsx)(ki,{padding:`p-5`,children:(0,P.jsxs)(`div`,{className:`flex items-start justify-between`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`p`,{className:`text-xs font-medium text-slate-500 uppercase tracking-wide mb-1`,children:t}),(0,P.jsx)(`p`,{className:`text-2xl font-semibold font-mono text-white`,children:n}),r&&(0,P.jsx)(`p`,{className:`text-xs text-slate-400 mt-1`,children:r})]}),(0,P.jsx)(`div`,{className:`w-10 h-10 rounded-lg flex items-center justify-center ${a}`,children:(0,P.jsx)(e,{className:`w-5 h-5`})})]})})})}function Ko(){let{addToast:e,confirm:t}=Ja(),{data:n,isLoading:r,refetch:i}=di(),a=pi(),o=mi(),s=n?.comparisons,c=n?.baseline,l=s?.length||0,u=s?.filter(e=>e.status===`passed`).length||0,d=s?.filter(e=>e.status===`failed`).length||0,f=s?.filter(e=>ho(e.status)).length||0,p=l>0?Math.round(u/l*100):0,m=s?.some(e=>go(e.status)),h=(0,N.useCallback)(async()=>{await t(`This will update all failed and new screenshots.`,`Accept all changes as new baselines?`)&&a.mutate(void 0,{onSuccess:()=>{e(`All baselines accepted successfully`,`success`)},onError:t=>{console.error(`Failed to accept all baselines:`,t),e(`Failed to accept all baselines. Please try again.`,`error`)}})},[a,e,t]),g=(0,N.useCallback)(async()=>{await t(`This will delete all baseline images and clear comparison history.`,`Reset all baselines?`)&&o.mutate(void 0,{onSuccess:()=>{e(`Baselines reset successfully`,`success`)},onError:t=>{console.error(`Failed to reset baselines:`,t),e(`Failed to reset baselines. Please try again.`,`error`)}})},[o,e,t]);return(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white`,children:`Statistics`}),(0,P.jsx)(`p`,{className:`text-slate-400 mt-1`,children:`Visual regression testing overview`})]}),(0,P.jsxs)(`div`,{className:`grid grid-cols-1 lg:grid-cols-3 gap-4`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`flex flex-col items-center justify-center py-8`,children:[(0,P.jsx)(Ii,{value:p,label:`Pass Rate`}),(0,P.jsxs)(`p`,{className:`text-sm text-slate-400 mt-4`,children:[u,` of `,l,` screenshots passing`]})]})}),(0,P.jsxs)(`div`,{className:`lg:col-span-2 grid grid-cols-2 gap-4`,children:[(0,P.jsx)(Go,{icon:zn,label:`Total Screenshots`,value:l,iconColor:`bg-slate-700/50 text-slate-400`}),(0,P.jsx)(Go,{icon:Ht,label:`Passed`,value:u,variant:`success`,iconColor:`bg-emerald-500/10 text-emerald-400`}),(0,P.jsx)(Go,{icon:hn,label:`Failed`,value:d,variant:d>0?`danger`:void 0,iconColor:`bg-red-500/10 text-red-400`}),(0,P.jsx)(Go,{icon:Vn,label:`New`,value:f,variant:f>0?`info`:void 0,iconColor:`bg-blue-500/10 text-blue-400`})]})]}),c&&(0,P.jsxs)(R,{hover:!1,children:[(0,P.jsx)(Oi,{icon:Qt,title:`Current Baseline`,iconColor:`bg-amber-500/10 text-amber-400`,actions:f>0&&(0,P.jsxs)(Ti,{variant:`warning`,dot:!0,children:[f,` new without baseline`]})}),(0,P.jsx)(ki,{children:(0,P.jsxs)(`div`,{className:`grid grid-cols-2 gap-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`p`,{className:`text-xs font-medium text-slate-500 uppercase tracking-wide mb-1`,children:`Build Name`}),(0,P.jsx)(`p`,{className:`text-white font-medium`,children:c.buildName||`default`})]}),(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`p`,{className:`text-xs font-medium text-slate-500 uppercase tracking-wide mb-1`,children:`Created`}),(0,P.jsx)(`p`,{className:`text-white font-medium`,children:c.createdAt?new Date(c.createdAt).toLocaleString():`Unknown`})]})]})})]}),(0,P.jsxs)(R,{hover:!1,children:[(0,P.jsx)(Oi,{title:`Baseline Management`,description:`Accept changes to update baselines or reset to restore previous state`}),(0,P.jsxs)(Ai,{className:`flex flex-wrap gap-3`,children:[(0,P.jsx)(L,{variant:`success`,onClick:h,loading:a.isPending,disabled:!m||r,icon:Ht,children:m?`Accept All Changes`:`No Changes to Accept`}),(0,P.jsx)(L,{variant:`secondary`,onClick:g,loading:o.isPending,disabled:r,icon:vt,children:`Reset Baselines`}),(0,P.jsx)(L,{variant:`ghost`,onClick:()=>i(),loading:r,icon:vt,className:`ml-auto`,children:`Refresh`})]})]})]})}function qo(e,t){let n=[];if(t===`shell`)return e.split(`
+        `,children:a?(0,P.jsx)(hn,{className:`w-5 h-5`}):(0,P.jsx)(Vn,{className:`w-5 h-5`})}),(0,P.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3 flex-wrap`,children:[e>0&&(0,P.jsxs)(`span`,{className:`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-sm font-medium`,children:[(0,P.jsx)(`span`,{className:`w-1.5 h-1.5 rounded-full bg-red-400`}),e,` changed`]}),t>0&&(0,P.jsxs)(`span`,{className:`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-blue-500/20 text-blue-400 text-sm font-medium`,children:[(0,P.jsx)(`span`,{className:`w-1.5 h-1.5 rounded-full bg-blue-400`}),t,` new`]})]}),(0,P.jsx)(`p`,{className:`text-sm text-slate-400 mt-1`,children:a?`Review visual differences and accept to update baselines`:`New screenshots ready to be saved as baselines`})]}),(0,P.jsxs)(L,{variant:`success`,onClick:n,loading:r,icon:Bt,className:`flex-shrink-0`,"data-testid":`btn-accept-all`,children:[`Accept All (`,i,`)`]})]})]})}function Fo(){let[,e]=Fr(),{addToast:t,confirm:n}=Ja(),[r,i]=(0,N.useState)({}),{data:a,isLoading:o,refetch:s}=di(),c=pi(),l=gi(),u=_i(),{filteredComparisons:d,filter:f,setFilter:p,sortBy:m,setSortBy:h,searchQuery:g,setSearchQuery:_,selectedBrowser:v,setSelectedBrowser:y,selectedViewport:b,setSelectedViewport:x,availableFilters:S,counts:ee}=vo(a?.comparisons),C=(0,N.useCallback)(t=>{let n=t.id||t.signature||t.name;n&&e(`/comparison/${encodeURIComponent(n)}`)},[e]),w=(0,N.useCallback)((e,t)=>{i(n=>{let r={...n};for(let n of e)n&&(t?r[n]=t:delete r[n]);return r})},[]),te=(0,N.useCallback)(e=>{!e||e.length===0||(w(e,`accepting`),l.mutate(e,{onSuccess:()=>{w(e,`accepted`)},onError:n=>{let r=No(n?.succeededIds),i=No(n?.failedIds);r.length>0&&w(r,`accepted`),i.length>0?w(i,null):w(e,null),t(`Failed to accept: ${n.message}`,`error`)}}))},[l,t,w]),ne=(0,N.useCallback)(e=>{!e||e.length===0||(w(e,`rejecting`),u.mutate(e,{onSuccess:()=>{w(e,`rejected`)},onError:n=>{let r=No(n?.succeededIds),i=No(n?.failedIds);r.length>0&&w(r,`rejected`),i.length>0?w(i,null):w(e,null),t(`Failed to reject: ${n.message}`,`error`)}}))},[u,t,w]),T=(0,N.useCallback)(e=>te(e?[e]:[]),[te]),re=(0,N.useCallback)(e=>ne(e?[e]:[]),[ne]),E=(0,N.useCallback)(async()=>{await n(`This will update all failed and new screenshots.`,`Accept all changes as new baselines?`)&&c.mutate(void 0,{onSuccess:()=>{t(`All baselines accepted successfully`,`success`)},onError:e=>{console.error(`Failed to accept all baselines:`,e),t(`Failed to accept all baselines. Please try again.`,`error`)}})},[c,t,n]),D=!a?.comparisons||a.comparisons.length===0,O=f!==`all`||g.trim()||v!==`all`||b!==`all`,k=a?.comparisons?.some(e=>go(e.status)),A=a?.comparisons?.filter(e=>e.status===`failed`).length||0,ie=a?.comparisons?.filter(e=>ho(e.status)).length||0;return D?(0,P.jsx)(Mi,{icon:It,title:`No Screenshots Yet`,description:`Run your tests with vizzlyScreenshot() to start capturing visual comparisons.`}):(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(Mo,{filter:f,setFilter:p,sortBy:m,setSortBy:h,searchQuery:g,setSearchQuery:_,selectedBrowser:v,setSelectedBrowser:y,selectedViewport:b,setSelectedViewport:x,availableFilters:S,counts:ee,onRefresh:s,loading:o}),k&&(0,P.jsx)(Po,{failedCount:A,newCount:ie,onAcceptAll:E,isLoading:c.isPending}),d.length===0?(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{className:`py-12`,children:(0,P.jsx)(Mi,{icon:xn,title:`No matches`,description:`No comparisons match your current filters.`,action:O&&(0,P.jsx)(L,{variant:`ghost`,size:`sm`,onClick:()=>{p(`all`),_(``),y(`all`),x(`all`)},children:`Clear all filters`})})})}):(0,P.jsx)(Eo,{comparisons:d,onSelectComparison:C,onAcceptComparison:T,onRejectComparison:re,onAcceptGroup:te,onRejectGroup:ne,loadingStates:r})]})}function Io(e={}){return at({queryKey:F.config,queryFn:Jr.get,...e})}function Lo(){let e=We();return ot({mutationFn:Jr.updateProject,onSuccess:()=>{e.invalidateQueries({queryKey:F.config})}})}function Ro(e){return{threshold:String(e?.comparison?.threshold??2),port:String(e?.server?.port??47392),timeout:String(e?.server?.timeout??3e4),buildName:e?.build?.name??`Build {timestamp}`,environment:e?.build?.environment??`test`,openReport:e?.tdd?.openReport??!1}}function zo(e){if(e==null||String(e).trim()===``)return null;let t=Number(e);return Number.isFinite(t)?t:null}function Bo(e){let t=zo(e);return Number.isInteger(t)?t:null}function Vo(e){let t={threshold:null,port:null,timeout:null},n=zo(e.threshold);(n===null||n<0)&&(t.threshold=`Threshold must be a number greater than or equal to 0.`);let r=Bo(e.port);(r===null||r<1||r>65535)&&(t.port=`Port must be a whole number between 1 and 65535.`);let i=Bo(e.timeout);return(i===null||i<0)&&(t.timeout=`Timeout must be a whole number greater than or equal to 0.`),t}function Ho({source:e}){return(0,P.jsx)(Ti,{variant:{default:`default`,project:`info`,global:`purple`,env:`success`,cli:`warning`}[e]||`default`,size:`sm`,children:{default:`Default`,project:`Project`,global:`Global`,env:`Environment`,cli:`CLI Flag`}[e]||e})}function Uo({title:e,source:t,description:n,children:r,noSource:i}){return(0,P.jsxs)(`div`,{className:`space-y-4`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(`h3`,{className:`text-sm font-semibold text-white uppercase tracking-wide`,children:e}),!i&&(0,P.jsx)(Ho,{source:t||`default`})]}),n&&(0,P.jsx)(`p`,{className:`text-sm text-slate-400`,children:n}),(0,P.jsx)(`div`,{className:`space-y-4`,children:r})]})}function Wo({config:e,sources:t,onSave:n,isSaving:r}){let[i,a]=(0,N.useState)(Ro(e)),[o,s]=(0,N.useState)(!1),c=(0,N.useMemo)(()=>Vo(i),[i]),l=Object.values(c).some(Boolean),u=(0,N.useCallback)((e,t)=>{a(n=>({...n,[e]:t})),s(!0)},[]),d=(0,N.useCallback)(()=>{a(Ro(e)),s(!1)},[e]),f=(0,N.useCallback)(()=>{let e=zo(i.threshold),t=Bo(i.port),r=Bo(i.timeout);e===null||t===null||r===null||n({comparison:{threshold:e},server:{port:t,timeout:r},build:{name:i.buildName,environment:i.environment},tdd:{openReport:i.openReport}},()=>s(!1))},[i,n]);return(0,P.jsxs)(`div`,{className:`grid grid-cols-1 lg:grid-cols-2 gap-6`,children:[(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsxs)(Uo,{title:`Comparison`,source:t?.comparison,description:`Configure how screenshots are compared`,children:[(0,P.jsx)(B,{label:`Threshold`,type:`number`,value:i.threshold,onChange:e=>u(`threshold`,e.target.value),hint:`CIEDE2000 Delta E. 0 = exact, 2 = recommended`,step:`0.1`,min:`0`}),c.threshold&&(0,P.jsx)(`p`,{className:`-mt-2 text-xs text-red-400`,children:c.threshold})]})})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsxs)(Uo,{title:`Server`,source:t?.server,description:`Local screenshot server configuration`,children:[(0,P.jsx)(B,{label:`Port`,type:`number`,value:i.port,onChange:e=>u(`port`,e.target.value),hint:`Default: 47392`}),c.port&&(0,P.jsx)(`p`,{className:`-mt-2 text-xs text-red-400`,children:c.port}),(0,P.jsx)(B,{label:`Timeout`,type:`number`,value:i.timeout,onChange:e=>u(`timeout`,e.target.value),hint:`Request timeout in milliseconds`}),c.timeout&&(0,P.jsx)(`p`,{className:`-mt-2 text-xs text-red-400`,children:c.timeout})]})})})]}),(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsxs)(Uo,{title:`Build`,source:t?.build,description:`Build naming and environment`,children:[(0,P.jsx)(B,{label:`Name Template`,type:`text`,value:i.buildName,onChange:e=>u(`buildName`,e.target.value),hint:`Use {timestamp} for current time`}),(0,P.jsx)(Pi,{label:`Environment`,value:i.environment,onChange:e=>u(`environment`,e.target.value),options:[{value:`test`,label:`Test`},{value:`development`,label:`Development`},{value:`staging`,label:`Staging`},{value:`production`,label:`Production`}]})]})})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsx)(ki,{children:(0,P.jsx)(Uo,{title:`TDD Mode`,source:t?.tdd,description:`Development workflow preferences`,children:(0,P.jsx)(Fi,{label:`Auto-open Report`,description:`Open dashboard in browser when starting TDD mode`,checked:i.openReport,onChange:e=>u(`openReport`,e.target.checked)})})})})]}),(0,P.jsx)(`div`,{className:`lg:col-span-2`,children:(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`flex items-center justify-between`,children:[(0,P.jsx)(`div`,{className:`text-sm text-slate-400`,children:l?(0,P.jsx)(`span`,{className:`text-red-400`,children:`Fix validation errors before saving`}):o?(0,P.jsx)(`span`,{className:`text-amber-400`,children:`You have unsaved changes`}):(0,P.jsx)(`span`,{children:`Settings saved to project config`})}),(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(L,{variant:`ghost`,onClick:d,disabled:!o||r,children:`Reset`}),(0,P.jsx)(L,{variant:`primary`,onClick:f,loading:r,disabled:!o||l,children:`Save Changes`})]})]})})})]})}function Go(){let{data:e,isLoading:t,error:n,refetch:r}=Io(),i=Lo(),{addToast:a}=Ja(),o=(0,N.useCallback)((e,t)=>{i.mutate(e,{onSuccess:()=>{t(),a(`Settings saved successfully!`,`success`)},onError:e=>{a(`Failed to save settings: ${e.message}`,`error`)}})},[i,a]);return t?(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(V,{variant:`heading`,className:`w-32 mb-2`}),(0,P.jsx)(V,{variant:`text`,className:`w-64`})]}),(0,P.jsxs)(`div`,{className:`grid grid-cols-1 lg:grid-cols-2 gap-6`,children:[(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-24`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-20`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})})]}),(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-16`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})}),(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`space-y-4`,children:[(0,P.jsx)(V,{variant:`text`,className:`w-24`}),(0,P.jsx)(V,{variant:`text`,className:`w-full h-10`})]})})]})]})]}):n?(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white`,children:`Settings`}),(0,P.jsx)(`p`,{className:`text-slate-400 mt-1`,children:`Configure your Vizzly local development server`})]}),(0,P.jsxs)(xi,{variant:`danger`,title:`Failed to load settings`,dismissible:!0,onDismiss:()=>r(),children:[n.message,(0,P.jsx)(L,{variant:`danger`,size:`sm`,onClick:()=>r(),className:`mt-3`,children:`Retry`})]})]}):(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white`,children:`Settings`}),(0,P.jsx)(`p`,{className:`text-slate-400 mt-1`,children:`Configure your Vizzly local development server`})]}),(0,P.jsx)(Wo,{config:e?.config,sources:e?.sources,onSave:o,isSaving:i.isPending},JSON.stringify(e?.config))]})}function Ko({icon:e,label:t,value:n,subvalue:r,variant:i,iconColor:a}){return(0,P.jsx)(R,{variant:i,hover:!1,children:(0,P.jsx)(ki,{padding:`p-5`,children:(0,P.jsxs)(`div`,{className:`flex items-start justify-between`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`p`,{className:`text-xs font-medium text-slate-500 uppercase tracking-wide mb-1`,children:t}),(0,P.jsx)(`p`,{className:`text-2xl font-semibold font-mono text-white`,children:n}),r&&(0,P.jsx)(`p`,{className:`text-xs text-slate-400 mt-1`,children:r})]}),(0,P.jsx)(`div`,{className:`w-10 h-10 rounded-lg flex items-center justify-center ${a}`,children:(0,P.jsx)(e,{className:`w-5 h-5`})})]})})})}function qo(){let{addToast:e,confirm:t}=Ja(),{data:n,isLoading:r,refetch:i}=di(),a=pi(),o=mi(),s=n?.comparisons,c=n?.baseline,l=s?.length||0,u=s?.filter(e=>e.status===`passed`).length||0,d=s?.filter(e=>e.status===`failed`).length||0,f=s?.filter(e=>ho(e.status)).length||0,p=l>0?Math.round(u/l*100):0,m=s?.some(e=>go(e.status)),h=(0,N.useCallback)(async()=>{await t(`This will update all failed and new screenshots.`,`Accept all changes as new baselines?`)&&a.mutate(void 0,{onSuccess:()=>{e(`All baselines accepted successfully`,`success`)},onError:t=>{console.error(`Failed to accept all baselines:`,t),e(`Failed to accept all baselines. Please try again.`,`error`)}})},[a,e,t]),g=(0,N.useCallback)(async()=>{await t(`This will delete all baseline images and clear comparison history.`,`Reset all baselines?`)&&o.mutate(void 0,{onSuccess:()=>{e(`Baselines reset successfully`,`success`)},onError:t=>{console.error(`Failed to reset baselines:`,t),e(`Failed to reset baselines. Please try again.`,`error`)}})},[o,e,t]);return(0,P.jsxs)(`div`,{className:`space-y-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white`,children:`Statistics`}),(0,P.jsx)(`p`,{className:`text-slate-400 mt-1`,children:`Visual regression testing overview`})]}),(0,P.jsxs)(`div`,{className:`grid grid-cols-1 lg:grid-cols-3 gap-4`,children:[(0,P.jsx)(R,{hover:!1,children:(0,P.jsxs)(ki,{className:`flex flex-col items-center justify-center py-8`,children:[(0,P.jsx)(Ii,{value:p,label:`Pass Rate`}),(0,P.jsxs)(`p`,{className:`text-sm text-slate-400 mt-4`,children:[u,` of `,l,` screenshots passing`]})]})}),(0,P.jsxs)(`div`,{className:`lg:col-span-2 grid grid-cols-2 gap-4`,children:[(0,P.jsx)(Ko,{icon:zn,label:`Total Screenshots`,value:l,iconColor:`bg-slate-700/50 text-slate-400`}),(0,P.jsx)(Ko,{icon:Ht,label:`Passed`,value:u,variant:`success`,iconColor:`bg-emerald-500/10 text-emerald-400`}),(0,P.jsx)(Ko,{icon:hn,label:`Failed`,value:d,variant:d>0?`danger`:void 0,iconColor:`bg-red-500/10 text-red-400`}),(0,P.jsx)(Ko,{icon:Vn,label:`New`,value:f,variant:f>0?`info`:void 0,iconColor:`bg-blue-500/10 text-blue-400`})]})]}),c&&(0,P.jsxs)(R,{hover:!1,children:[(0,P.jsx)(Oi,{icon:Qt,title:`Current Baseline`,iconColor:`bg-amber-500/10 text-amber-400`,actions:f>0&&(0,P.jsxs)(Ti,{variant:`warning`,dot:!0,children:[f,` new without baseline`]})}),(0,P.jsx)(ki,{children:(0,P.jsxs)(`div`,{className:`grid grid-cols-2 gap-6`,children:[(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`p`,{className:`text-xs font-medium text-slate-500 uppercase tracking-wide mb-1`,children:`Build Name`}),(0,P.jsx)(`p`,{className:`text-white font-medium`,children:c.buildName||`default`})]}),(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`p`,{className:`text-xs font-medium text-slate-500 uppercase tracking-wide mb-1`,children:`Created`}),(0,P.jsx)(`p`,{className:`text-white font-medium`,children:c.createdAt?new Date(c.createdAt).toLocaleString():`Unknown`})]})]})})]}),(0,P.jsxs)(R,{hover:!1,children:[(0,P.jsx)(Oi,{title:`Baseline Management`,description:`Accept changes to update baselines or reset to restore previous state`}),(0,P.jsxs)(Ai,{className:`flex flex-wrap gap-3`,children:[(0,P.jsx)(L,{variant:`success`,onClick:h,loading:a.isPending,disabled:!m||r,icon:Ht,children:m?`Accept All Changes`:`No Changes to Accept`}),(0,P.jsx)(L,{variant:`secondary`,onClick:g,loading:o.isPending,disabled:r,icon:vt,children:`Reset Baselines`}),(0,P.jsx)(L,{variant:`ghost`,onClick:()=>i(),loading:r,icon:vt,className:`ml-auto`,children:`Refresh`})]})]})]})}function Jo(e,t){let n=[];if(t===`shell`)return e.split(`
 `).forEach((t,r)=>{let i=e.split(`
 `).slice(0,r).join(`
-`).length+ +(r>0);t.trim().startsWith(`#`)?n.push({type:`comment`,start:i,end:i+t.length}):(t.trim().startsWith(`npm`)||t.trim().startsWith(`npx`))&&n.push({type:`command`,start:i,end:i+t.length})}),n;for(let{type:t,regex:r}of[{type:`comment`,regex:/\/\/.*$/gm},{type:`comment`,regex:/\/\*[\s\S]*?\*\//g},{type:`string`,regex:/'([^'\\]|\\.)*'/g},{type:`string`,regex:/"([^"\\]|\\.)*"/g},{type:`string`,regex:/`([^`\\]|\\.)*`/g},{type:`keyword`,regex:/\b(import|export|from|const|let|var|function|class|if|else|return|await|async|test|it|describe|expect|func|let|class|import|require|RSpec|do|end|def|Vizzly)\b/g},{type:`function`,regex:/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*\(/g},{type:`number`,regex:/\b\d+\.?\d*\b/g}]){let i=r.exec(e);for(;i!==null;)n.push({type:t,start:i.index,end:i.index+i[0].length}),i=r.exec(e)}n.sort((e,t)=>e.start-t.start);let r=[],i=0;return n.forEach(e=>{e.start>=i&&(r.push(e),i=e.end)}),r}function Jo({code:e,language:t=`javascript`}){let n=(0,N.useRef)(null),r=t===`shell`||e.trim().startsWith(`#`)||e.trim().startsWith(`npm`);return(0,N.useEffect)(()=>{if(typeof window>`u`||!window.CSS?.highlights||!n.current)return;let i=n.current.firstChild;if(!i||i.nodeType!==window.Node.TEXT_NODE)return;let a=qo(e,r?`shell`:t).map(e=>{let t=new window.Range;return t.setStart(i,e.start),t.setEnd(i,e.end),{type:e.type,range:t}}),o=new Map;a.forEach(({type:e,range:t})=>{o.has(e)||o.set(e,[]),o.get(e).push(t)});let s=new Map;for(let[e,t]of o){let n=new window.Highlight(...t);s.set(e,n),window.CSS.highlights.set(`code-${e}`,n)}return()=>{for(let[e]of s)window.CSS.highlights.delete(`code-${e}`)}},[e,t,r]),(0,P.jsx)(`pre`,{className:`bg-slate-950 rounded-lg p-4 overflow-x-auto text-sm`,children:(0,P.jsx)(`code`,{ref:n,className:`font-mono text-slate-300 block whitespace-pre`,children:e})})}var Yo=[{id:`playwright`,name:`Playwright`,code:`import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
+`).length+ +(r>0);t.trim().startsWith(`#`)?n.push({type:`comment`,start:i,end:i+t.length}):(t.trim().startsWith(`npm`)||t.trim().startsWith(`npx`))&&n.push({type:`command`,start:i,end:i+t.length})}),n;for(let{type:t,regex:r}of[{type:`comment`,regex:/\/\/.*$/gm},{type:`comment`,regex:/\/\*[\s\S]*?\*\//g},{type:`string`,regex:/'([^'\\]|\\.)*'/g},{type:`string`,regex:/"([^"\\]|\\.)*"/g},{type:`string`,regex:/`([^`\\]|\\.)*`/g},{type:`keyword`,regex:/\b(import|export|from|const|let|var|function|class|if|else|return|await|async|test|it|describe|expect|func|let|class|import|require|RSpec|do|end|def|Vizzly)\b/g},{type:`function`,regex:/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*\(/g},{type:`number`,regex:/\b\d+\.?\d*\b/g}]){let i=r.exec(e);for(;i!==null;)n.push({type:t,start:i.index,end:i.index+i[0].length}),i=r.exec(e)}n.sort((e,t)=>e.start-t.start);let r=[],i=0;return n.forEach(e=>{e.start>=i&&(r.push(e),i=e.end)}),r}function Yo(e){return`code-token code-token--${e}`}function Xo(e,t){let n=Jo(e,t),r=[],i=0;return n.forEach((t,n)=>{t.start>i&&r.push(e.slice(i,t.start)),r.push((0,P.jsx)(`span`,{className:Yo(t.type),children:e.slice(t.start,t.end)},`${t.type}-${n}`)),i=t.end}),i<e.length&&r.push(e.slice(i)),r}function Zo({code:e,language:t=`javascript`}){return(0,P.jsx)(`pre`,{className:`bg-slate-950 rounded-lg p-4 overflow-x-auto text-sm`,children:(0,P.jsx)(`code`,{className:`font-mono text-slate-300 block whitespace-pre`,children:Xo(e,t===`shell`||e.trim().startsWith(`#`)||e.trim().startsWith(`npm`)?`shell`:t)})})}var Qo=[{id:`playwright`,name:`Playwright`,code:`import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
 
 test('homepage', async ({ page }) => {
   await page.goto('/');
@@ -267,4 +267,4 @@ class VisualTests: XCTestCase {
 # Just run the CLI against your Storybook build:
 
 npm run build-storybook
-npx vizzly storybook ./storybook-static`}];function Xo(){let[e,t]=(0,N.useState)(`playwright`),n=Yo.find(t=>t.id===e);return(0,P.jsx)(`div`,{className:`flex flex-col items-center justify-center py-12 px-6`,children:(0,P.jsxs)(`div`,{className:`max-w-2xl w-full`,children:[(0,P.jsxs)(`div`,{className:`text-center mb-8`,children:[(0,P.jsx)(`div`,{className:`w-16 h-16 rounded-2xl bg-amber-500/10 flex items-center justify-center mx-auto mb-5`,children:(0,P.jsx)(Qt,{className:`w-8 h-8 text-amber-400`})}),(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white mb-2`,children:`Waiting for Screenshots`}),(0,P.jsx)(`p`,{className:`text-slate-400`,children:`Run your tests to start capturing visual comparisons`}),(0,P.jsxs)(`div`,{className:`mt-4 flex items-center justify-center gap-2 text-sm text-slate-500`,children:[(0,P.jsx)(`div`,{className:`w-2 h-2 rounded-full bg-amber-500 animate-pulse`}),`Listening for screenshots...`]})]}),(0,P.jsxs)(`div`,{className:`vz-card overflow-hidden`,children:[(0,P.jsx)(`div`,{className:`border-b border-slate-700/50 px-4 pt-4`,children:(0,P.jsx)(`div`,{className:`flex items-center gap-1 overflow-x-auto scrollbar-hide -mb-px`,children:Yo.map(n=>(0,P.jsx)(`button`,{type:`button`,onClick:()=>t(n.id),className:`px-4 py-2.5 text-sm font-medium rounded-t-lg transition-colors whitespace-nowrap ${e===n.id?`bg-slate-800 text-white border-t border-x border-slate-700/50`:`text-slate-400 hover:text-white hover:bg-slate-800/50`}`,children:n.name},n.id))})}),(0,P.jsx)(`div`,{className:`p-4`,children:(0,P.jsx)(Jo,{code:n?.code||``})})]}),(0,P.jsx)(`div`,{className:`mt-6 text-center`,children:(0,P.jsxs)(`a`,{href:`https://docs.vizzly.dev/`,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex items-center gap-2 text-sm text-slate-400 hover:text-amber-400 transition-colors`,children:[(0,P.jsx)(Mt,{className:`w-4 h-4`}),`View full documentation`]})})]})})}function Zo(){return(0,P.jsxs)(`div`,{className:`flex flex-col items-center justify-center py-32`,children:[(0,P.jsx)(Sa,{size:`lg`,className:`text-amber-400 mb-4`}),(0,P.jsx)(`p`,{className:`text-slate-400 text-sm`,children:`Loading report data...`})]})}function Qo({error:e,onRetry:t}){return(0,P.jsx)(Mi,{icon:hn,title:`Failed to load report`,description:e||`An unexpected error occurred while loading the report data.`,action:(0,P.jsx)(`button`,{type:`button`,onClick:t,className:`px-4 py-2 bg-amber-500 hover:bg-amber-400 text-slate-900 font-medium rounded-lg transition-colors`,children:`Try Again`})})}function $o(){let[e,t]=Fr(),n=e===`/settings`||e===`/builds`,{data:r,isLoading:i,error:a,refetch:o}=di({enabled:!n,polling:!n}),s=e.startsWith(`/comparison/`),c=e===`/stats`?`stats`:e===`/settings`?`settings`:e===`/builds`?`builds`:`comparisons`,l=e=>{t(e===`stats`?`/stats`:e===`settings`?`/settings`:e===`builds`?`/builds`:`/`)};return i&&!r&&!n?(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsx)(Zo,{})}):a&&!r&&!n?(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsx)(Qo,{error:a.message,onRetry:o})}):!r&&!n?(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsx)(Xo,{})}):s?r?(0,P.jsx)(Ur,{children:(0,P.jsx)(Vr,{path:`/comparison/:id`,children:(0,P.jsx)(fo,{})})}):(0,P.jsx)(za,{currentView:`comparisons`,onNavigate:l,loading:i,children:(0,P.jsx)(Xo,{})}):(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsxs)(Ur,{children:[(0,P.jsx)(Vr,{path:`/stats`,children:r?(0,P.jsx)(Ko,{}):(0,P.jsx)(Xo,{})}),(0,P.jsx)(Vr,{path:`/settings`,children:(0,P.jsx)(Wo,{})}),(0,P.jsx)(Vr,{path:`/builds`,children:(0,P.jsx)(io,{})}),(0,P.jsx)(Vr,{path:`/`,children:r?(0,P.jsx)(Po,{}):(0,P.jsx)(Xo,{})})]})})}var es=new Re({defaultOptions:{queries:{staleTime:5*1e3,refetchOnWindowFocus:!0,retry:1}}}),ts=()=>{let e=document.getElementById(`vizzly-reporter-root`);e||(e=document.createElement(`div`),e.id=`vizzly-reporter-root`,document.body.appendChild(e)),nr.createRoot(e).render((0,P.jsx)(N.StrictMode,{children:(0,P.jsx)(Ge,{client:es,children:(0,P.jsx)($r,{children:(0,P.jsx)(qa,{children:(0,P.jsx)($o,{})})})})}))};document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,ts):ts()})();
+npx vizzly storybook ./storybook-static`}];function $o(){let[e,t]=(0,N.useState)(`playwright`),n=Qo.find(t=>t.id===e);return(0,P.jsx)(`div`,{className:`flex flex-col items-center justify-center py-12 px-6`,children:(0,P.jsxs)(`div`,{className:`max-w-2xl w-full`,children:[(0,P.jsxs)(`div`,{className:`text-center mb-8`,children:[(0,P.jsx)(`div`,{className:`w-16 h-16 rounded-2xl bg-amber-500/10 flex items-center justify-center mx-auto mb-5`,children:(0,P.jsx)(Qt,{className:`w-8 h-8 text-amber-400`})}),(0,P.jsx)(`h1`,{className:`text-2xl font-bold text-white mb-2`,children:`Waiting for Screenshots`}),(0,P.jsx)(`p`,{className:`text-slate-400`,children:`Run your tests to start capturing visual comparisons`}),(0,P.jsxs)(`div`,{className:`mt-4 flex items-center justify-center gap-2 text-sm text-slate-500`,children:[(0,P.jsx)(`div`,{className:`w-2 h-2 rounded-full bg-amber-500 animate-pulse`}),`Listening for screenshots...`]})]}),(0,P.jsxs)(`div`,{className:`vz-card overflow-hidden`,children:[(0,P.jsx)(`div`,{className:`border-b border-slate-700/50 px-4 pt-4`,children:(0,P.jsx)(`div`,{className:`flex items-center gap-1 overflow-x-auto scrollbar-hide -mb-px`,children:Qo.map(n=>(0,P.jsx)(`button`,{type:`button`,onClick:()=>t(n.id),className:`px-4 py-2.5 text-sm font-medium rounded-t-lg transition-colors whitespace-nowrap ${e===n.id?`bg-slate-800 text-white border-t border-x border-slate-700/50`:`text-slate-400 hover:text-white hover:bg-slate-800/50`}`,children:n.name},n.id))})}),(0,P.jsx)(`div`,{className:`p-4`,children:(0,P.jsx)(Zo,{code:n?.code||``})})]}),(0,P.jsx)(`div`,{className:`mt-6 text-center`,children:(0,P.jsxs)(`a`,{href:`https://docs.vizzly.dev/`,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex items-center gap-2 text-sm text-slate-400 hover:text-amber-400 transition-colors`,children:[(0,P.jsx)(Mt,{className:`w-4 h-4`}),`View full documentation`]})})]})})}function es(){return(0,P.jsxs)(`div`,{className:`flex flex-col items-center justify-center py-32`,children:[(0,P.jsx)(Sa,{size:`lg`,className:`text-amber-400 mb-4`}),(0,P.jsx)(`p`,{className:`text-slate-400 text-sm`,children:`Loading report data...`})]})}function ts({error:e,onRetry:t}){return(0,P.jsx)(Mi,{icon:hn,title:`Failed to load report`,description:e||`An unexpected error occurred while loading the report data.`,action:(0,P.jsx)(`button`,{type:`button`,onClick:t,className:`px-4 py-2 bg-amber-500 hover:bg-amber-400 text-slate-900 font-medium rounded-lg transition-colors`,children:`Try Again`})})}function ns(){let[e,t]=Fr(),n=e===`/settings`||e===`/builds`,{data:r,isLoading:i,error:a,refetch:o}=di({enabled:!n,polling:!n}),s=e.startsWith(`/comparison/`),c=e===`/stats`?`stats`:e===`/settings`?`settings`:e===`/builds`?`builds`:`comparisons`,l=e=>{t(e===`stats`?`/stats`:e===`settings`?`/settings`:e===`builds`?`/builds`:`/`)};return i&&!r&&!n?(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsx)(es,{})}):a&&!r&&!n?(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsx)(ts,{error:a.message,onRetry:o})}):!r&&!n?(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsx)($o,{})}):s?r?(0,P.jsx)(Ur,{children:(0,P.jsx)(Vr,{path:`/comparison/:id`,children:(0,P.jsx)(fo,{})})}):(0,P.jsx)(za,{currentView:`comparisons`,onNavigate:l,loading:i,children:(0,P.jsx)($o,{})}):(0,P.jsx)(za,{currentView:c,onNavigate:l,loading:i,children:(0,P.jsxs)(Ur,{children:[(0,P.jsx)(Vr,{path:`/stats`,children:r?(0,P.jsx)(qo,{}):(0,P.jsx)($o,{})}),(0,P.jsx)(Vr,{path:`/settings`,children:(0,P.jsx)(Go,{})}),(0,P.jsx)(Vr,{path:`/builds`,children:(0,P.jsx)(io,{})}),(0,P.jsx)(Vr,{path:`/`,children:r?(0,P.jsx)(Fo,{}):(0,P.jsx)($o,{})})]})})}var rs=new Re({defaultOptions:{queries:{staleTime:5*1e3,refetchOnWindowFocus:!0,retry:1}}}),is=()=>{let e=document.getElementById(`vizzly-reporter-root`);e||(e=document.createElement(`div`),e.id=`vizzly-reporter-root`,document.body.appendChild(e)),nr.createRoot(e).render((0,P.jsx)(N.StrictMode,{children:(0,P.jsx)(Ge,{client:rs,children:(0,P.jsx)($r,{children:(0,P.jsx)(qa,{children:(0,P.jsx)(ns,{})})})})}))};document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,is):is()})();

package/dist/sdk/index.js

@@ -11,13 +11,15 @@
  */
 
 import { EventEmitter } from 'node:events';
+import { createServer } from 'node:http';
 import { VizzlyError } from '../errors/vizzly-error.js';
-import { ScreenshotServer } from '../services/screenshot-server.js';
-import { createUploader } from '../services/uploader.js';
+import { handleRequest as handleScreenshotRequest, startServer as startScreenshotServer, stopServer as stopScreenshotServer } from '../screenshot-server/index.js';
 import { createTDDService } from '../tdd/tdd-service.js';
+import { createUploader } from '../uploader/index.js';
 import { loadConfig } from '../utils/config-loader.js';
 import { resolveImageBuffer } from '../utils/file-helpers.js';
 import * as output from '../utils/output.js';
+import { createScreenshotProperties } from '../utils/screenshot-options.js';
 
 /**
  * Create a new Vizzly instance with custom configuration
@@ -52,79 +54,94 @@ import * as output from '../utils/output.js';
  * // Cleanup
  * await vizzly.stop();
  */
-export function createVizzly(config = {}, options = {}) {
+export async function createVizzly(config = {}, options = {}) {
   // Configure output based on options
   output.configure({
     verbose: options.verbose || false
   });
-
-  // Merge with loaded config
-  const resolvedConfig = {
+  let loadConfigFn = options.loadConfig || loadConfig;
+  let fileConfig = await loadConfigFn();
+  let resolvedConfig = {
+    ...fileConfig,
     ...config
   };
-
-  /**
-   * Initialize SDK with config loading
-   */
-  const init = async () => {
-    const fileConfig = await loadConfig();
-    Object.assign(resolvedConfig, fileConfig, config); // CLI config takes precedence
-    return resolvedConfig;
-  };
-
-  /**
-   * Create uploader service
-   */
-  const createUploaderService = (uploaderOptions = {}) => {
-    return createUploader({
-      apiKey: resolvedConfig.apiKey,
-      apiUrl: resolvedConfig.apiUrl
-    }, {
-      ...options,
-      ...uploaderOptions
-    });
-  };
-
-  /**
-   * Create TDD service
-   */
-  const createTDDServiceInstance = (tddOptions = {}) => {
-    return createTDDService(resolvedConfig, {
-      ...options,
-      ...tddOptions
-    });
-  };
-
-  /**
-   * Upload screenshots (convenience method)
-   */
-  const upload = async uploadOptions => {
-    const uploader = createUploaderService();
-    return uploader.upload(uploadOptions);
+  return new VizzlySDK(resolvedConfig, {
+    createUploader: (uploaderOptions = {}, activeConfig = resolvedConfig) => {
+      let {
+        upload: uploadConfig = activeConfig.upload,
+        ...serviceOptions
+      } = uploaderOptions;
+      let createUploaderService = options.createUploader || createUploader;
+      return createUploaderService({
+        apiKey: activeConfig.apiKey,
+        apiUrl: activeConfig.apiUrl,
+        upload: uploadConfig
+      }, {
+        ...options,
+        ...serviceOptions
+      });
+    },
+    createTDDService: (tddOptions = {}, activeConfig = resolvedConfig) => {
+      let createTDDServiceInstance = options.createTDDService || createTDDService;
+      return createTDDServiceInstance(activeConfig, {
+        ...options,
+        ...tddOptions
+      });
+    },
+    createScreenshotServer: createLocalScreenshotServer,
+    fetch: options.fetch,
+    loadConfig: loadConfigFn
+  });
+}
+function createLocalBuildManager() {
+  let screenshots = new Map();
+  return {
+    async addScreenshot(buildId, screenshot) {
+      if (!screenshots.has(buildId)) {
+        screenshots.set(buildId, []);
+      }
+      screenshots.get(buildId).push(screenshot);
+    },
+    getScreenshots(buildId) {
+      return screenshots.get(buildId) || [];
+    }
   };
-
-  /**
-   * Start TDD mode (convenience method)
-   */
-  const startTDD = async (tddOptions = {}) => {
-    const tddService = createTDDServiceInstance();
-    return tddService.start(tddOptions);
+}
+function createLocalScreenshotServer(config, buildManager, options = {}) {
+  let server = null;
+  let deps = {
+    createHttpServer: options.createHttpServer || createServer,
+    output: options.output || output,
+    createError: options.createError || ((message, code) => new VizzlyError(message, code))
   };
   return {
-    // Core methods
-    init,
-    upload,
-    startTDD,
-    // Service factories
-    createUploader: createUploaderService,
-    createTDDService: createTDDServiceInstance,
-    // Utilities
-    loadConfig: () => loadConfig(),
-    // Config access
-    getConfig: () => ({
-      ...resolvedConfig
-    }),
-    updateConfig: newConfig => Object.assign(resolvedConfig, newConfig)
+    async start() {
+      server = await startScreenshotServer({
+        config,
+        requestHandler: (req, res) => handleScreenshotRequest({
+          req,
+          res,
+          deps: {
+            buildManager,
+            createError: deps.createError,
+            output: deps.output
+          }
+        }),
+        deps
+      });
+    },
+    async stop() {
+      await stopScreenshotServer({
+        server,
+        deps: {
+          output: deps.output
+        }
+      });
+      server = null;
+    },
+    isRunning() {
+      return Boolean(server?.listening);
+    }
   };
 }
 
@@ -153,7 +170,7 @@ export class VizzlySDK extends EventEmitter {
   constructor(config, services) {
     super();
     this.config = config;
-    this.services = services;
+    this.services = services || {};
     this.server = null;
     this.currentBuildId = null;
   }
@@ -181,6 +198,59 @@ export class VizzlySDK extends EventEmitter {
     };
   }
 
+  /**
+   * Merge new config values into the active SDK config.
+   * @param {Object} newConfig - Config updates
+   * @returns {Object} Updated config
+   */
+  updateConfig(newConfig) {
+    Object.assign(this.config, newConfig);
+    return this.getConfig();
+  }
+
+  /**
+   * Reload file config and re-apply current in-memory overrides.
+   * @returns {Promise<Object>} Updated config
+   */
+  async init() {
+    let loadConfigFn = this.services.loadConfig || loadConfig;
+    let fileConfig = await loadConfigFn();
+    let currentConfig = {
+      ...this.config
+    };
+    Object.assign(this.config, fileConfig, currentConfig);
+    return this.getConfig();
+  }
+  createUploader(options = {}) {
+    let {
+      upload: uploadConfig = this.config.upload,
+      ...serviceOptions
+    } = options;
+    let createUploaderService = this.services.createUploader || ((uploaderOptions, activeConfig = this.config) => {
+      let {
+        upload: resolvedUploadConfig = activeConfig.upload,
+        ...resolvedServiceOptions
+      } = uploaderOptions;
+      return createUploader({
+        apiKey: activeConfig.apiKey,
+        apiUrl: activeConfig.apiUrl,
+        upload: resolvedUploadConfig
+      }, resolvedServiceOptions);
+    });
+    return createUploaderService({
+      upload: uploadConfig,
+      ...serviceOptions
+    }, this.config);
+  }
+  createTDDService(options = {}) {
+    let createTDDServiceInstance = this.services.createTDDService || ((tddOptions, activeConfig = this.config) => createTDDService(activeConfig, tddOptions));
+    return createTDDServiceInstance(options, this.config);
+  }
+  async startTDD(options = {}) {
+    let tddService = this.createTDDService(options);
+    return tddService.start(options);
+  }
+
   /**
    * Start the Vizzly server
    * @returns {Promise<{port: number, url: string}>} Server information
@@ -193,25 +263,12 @@ export class VizzlySDK extends EventEmitter {
         url: `http://localhost:${this.config.server?.port || 3000}`
       };
     }
-
-    // Create a simple build manager for screenshot collection
-    const buildManager = {
-      screenshots: new Map(),
-      currentBuildId: null,
-      async addScreenshot(buildId, screenshot) {
-        if (!this.screenshots.has(buildId)) {
-          this.screenshots.set(buildId, []);
-        }
-        this.screenshots.get(buildId).push(screenshot);
-      },
-      getScreenshots(buildId) {
-        return this.screenshots.get(buildId) || [];
-      }
-    };
-    this.server = new ScreenshotServer(this.config, buildManager);
+    let createScreenshotServer = this.services.createScreenshotServer || createLocalScreenshotServer;
+    let buildManager = createLocalBuildManager();
+    this.server = createScreenshotServer(this.config, buildManager);
     await this.server.start();
-    const port = this.config.server?.port || 3000;
-    const serverInfo = {
+    let port = this.config.server?.port || 3000;
+    let serverInfo = {
       port,
       url: `http://localhost:${port}`
     };
@@ -230,31 +287,32 @@ export class VizzlySDK extends EventEmitter {
    * @throws {VizzlyError} When file cannot be read due to permissions or I/O errors
    */
   async screenshot(name, imageBuffer, options = {}) {
-    if (!this.server?.isRunning()) {
+    if (this.server?.isRunning?.() !== true) {
       throw new VizzlyError('Server not running. Call start() first.', 'SERVER_NOT_RUNNING');
     }
 
     // Resolve Buffer or file path using shared utility
-    const buffer = resolveImageBuffer(imageBuffer, 'screenshot');
+    let buffer = resolveImageBuffer(imageBuffer, 'screenshot');
 
     // Generate or use provided build ID
-    const buildId = options.buildId || this.currentBuildId || 'default';
+    let buildId = options.buildId || this.currentBuildId || 'default';
     this.currentBuildId = buildId;
 
     // Convert Buffer to base64 for JSON transport
-    const imageBase64 = buffer.toString('base64');
-    const screenshotData = {
+    let imageBase64 = buffer.toString('base64');
+    let screenshotData = {
       buildId,
       name,
       image: imageBase64,
       type: 'base64',
-      properties: options.properties || {}
+      properties: createScreenshotProperties(options)
     };
 
     // POST to the local screenshot server
-    const serverUrl = `http://localhost:${this.config.server?.port || 3000}`;
+    let serverUrl = `http://localhost:${this.config.server?.port || 3000}`;
+    let fetchFn = this.services.fetch || fetch;
     try {
-      const response = await fetch(`${serverUrl}/screenshot`, {
+      let response = await fetchFn(`${serverUrl}/screenshot`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -262,7 +320,7 @@ export class VizzlySDK extends EventEmitter {
         body: JSON.stringify(screenshotData)
       });
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({
+        let errorData = await response.json().catch(() => ({
           error: 'Unknown error'
         }));
         throw new VizzlyError(`Screenshot capture failed: ${errorData.error}`, 'SCREENSHOT_FAILED', {
@@ -295,23 +353,21 @@ export class VizzlySDK extends EventEmitter {
   async upload(options = {}) {
     if (!this.services?.uploader) {
       this.services = this.services || {};
-      this.services.uploader = createUploader({
-        apiKey: this.config.apiKey,
-        apiUrl: this.config.apiUrl,
+      this.services.uploader = this.createUploader({
         upload: this.config.upload
       });
     }
 
     // Get the screenshots directory from config or default
-    const screenshotsDir = options.screenshotsDir || this.config?.upload?.screenshotsDir || './screenshots';
-    const uploadOptions = {
+    let screenshotsDir = options.screenshotsDir || this.config?.upload?.screenshotsDir || './screenshots';
+    let uploadOptions = {
       screenshotsDir,
       buildName: options.buildName || this.config.buildName,
       branch: options.branch || this.config.branch,
       commit: options.commit || this.config.commit,
       message: options.message || this.config.message,
       environment: options.environment || this.config.environment || 'production',
-      threshold: options.threshold || this.config.threshold,
+      threshold: options.threshold ?? this.config.threshold,
       onProgress: progress => {
         this.emit('upload:progress', progress);
         if (options.onProgress) {
@@ -320,7 +376,7 @@ export class VizzlySDK extends EventEmitter {
       }
     };
     try {
-      const result = await this.services.uploader.upload(uploadOptions);
+      let result = await this.services.uploader.upload(uploadOptions);
       this.emit('upload:completed', result);
       return result;
     } catch (error) {
@@ -340,13 +396,13 @@ export class VizzlySDK extends EventEmitter {
   async compare(name, imageBuffer) {
     if (!this.services?.tddService) {
       this.services = this.services || {};
-      this.services.tddService = createTDDService(this.config);
+      this.services.tddService = this.createTDDService();
     }
 
     // Resolve Buffer or file path using shared utility
-    const buffer = resolveImageBuffer(imageBuffer, 'compare');
+    let buffer = resolveImageBuffer(imageBuffer, 'compare');
     try {
-      const result = await this.services.tddService.compareScreenshot(name, buffer);
+      let result = await this.services.tddService.compareScreenshot(name, buffer);
       this.emit('comparison:completed', result);
       return result;
     } catch (error) {
@@ -358,10 +414,9 @@ export class VizzlySDK extends EventEmitter {
     }
   }
 }
-
-// Export service creators for advanced usage
-export { createUploader } from '../services/uploader.js';
 export { createTDDService } from '../tdd/tdd-service.js';
+// Export service creators for advanced usage
+export { createUploader } from '../uploader/index.js';
 // Re-export key utilities and errors
 export { loadConfig } from '../utils/config-loader.js';
 export * as output from '../utils/output.js';