@wyxos/vibe 2.2.4 → 2.2.5

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),bt={mode:"default",pageSize:20,backfillRequestDelayMs:2e3,enterStaggerMs:40,page:1,itemWidth:300,prefetchThresholdPx:200,gapX:16,gapY:16,headerHeight:0,footerHeight:0,overscanPx:600},Wt=["aria-label","aria-valuemax","aria-valuenow"],qe=e.defineComponent({__name:"MasonryVideoControls",props:{currentTime:{},duration:{},ariaLabel:{default:"Seek"},step:{default:.1},keyboardStep:{default:5}},emits:["seek"],setup(l,{expose:x,emit:u}){const a=l,v=u,k=e.ref(null),y=e.ref(null),p=e.ref(null),c=e.ref(!1),h=e.computed(()=>Number.isFinite(a.step)?Math.max(0,a.step):0),w=e.computed(()=>Number.isFinite(a.duration)?Math.max(0,a.duration):0),S=e.computed(()=>{const f=Number.isFinite(a.currentTime)?a.currentTime:0;return E(f,0,w.value)}),F=e.computed(()=>w.value>0?S.value/w.value:0);function E(f,B,_){return Math.min(_,Math.max(B,f))}function M(f){return h.value<=0?f:Math.round(f/h.value)*h.value}function R(f){const B=E(f,0,w.value);v("seek",M(B))}function N(f){const B=y.value;if(!B)return;const _=B.getBoundingClientRect();if(!_.width)return;const O=E((f-_.left)/_.width,0,1);R(O*w.value)}function $(f){const B=y.value;B&&(c.value=!0,B.setPointerCapture&&B.setPointerCapture(f.pointerId),N(f.clientX))}function A(f){c.value&&N(f.clientX)}function T(f){if(!c.value)return;c.value=!1;const B=y.value;B?.releasePointerCapture&&B.releasePointerCapture(f.pointerId)}function D(f){if(w.value<=0)return;const B=Number.isFinite(a.keyboardStep)?a.keyboardStep:1;let _=S.value;switch(f.key){case"ArrowLeft":case"ArrowDown":_-=B;break;case"ArrowRight":case"ArrowUp":_+=B;break;case"Home":_=0;break;case"End":_=w.value;break;default:return}f.preventDefault(),R(_)}function U(){k.value?.focus()}return x({focus:U,seekTo:R,percent:F,currentValue:S,maxValue:w,isDragging:c,rootEl:k,trackEl:y,thumbEl:p}),(f,B)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:k,class:"w-full select-none",role:"slider",tabindex:"0","aria-label":a.ariaLabel,"aria-valuemin":0,"aria-valuemax":w.value,"aria-valuenow":S.value,onKeydown:D},[e.createElementVNode("div",{ref_key:"trackEl",ref:y,class:"relative h-2 w-full cursor-pointer rounded-full bg-slate-200",onPointerdown:$,onPointermove:A,onPointerup:T,onPointercancel:T,onPointerleave:T},[e.createElementVNode("div",{class:"absolute inset-y-0 left-0 rounded-full bg-slate-500",style:e.normalizeStyle({width:`${F.value*100}%`})},null,4),e.createElementVNode("div",{ref_key:"thumbEl",ref:p,class:"absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-700 shadow",style:e.normalizeStyle({left:`${F.value*100}%`}),"aria-hidden":"true"},null,4)],544)],40,Wt))}}),Gt={key:0,"data-testid":"masonry-loader-spinner",class:"absolute inset-0 z-10 flex flex-col items-center justify-center gap-1"},Kt={key:1,class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},Jt={key:1,"data-testid":"masonry-loader-error",class:"absolute inset-0 z-20 grid place-items-center p-3 pointer-events-none"},Qt={class:"pointer-events-auto flex flex-col items-center justify-center gap-2"},Zt={key:1,class:"text-center text-xs font-medium text-red-700"},en=["src","width","height","alt"],tn=["poster"],nn=["src"],on={key:4,class:"pointer-events-none absolute inset-x-0 bottom-0 z-20 px-2 pb-2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"},pt=e.defineComponent({__name:"MasonryLoader",props:{item:{},remove:{},loaderSlotFn:{},errorSlotFn:{},hovered:{type:Boolean,default:!1}},emits:["success","error"],setup(l,{emit:x}){const u=l,a=x,v=e.defineComponent({name:"SlotRenderer",props:{slotFn:{type:Function,required:!1},slotProps:{type:Object,required:!0}},setup(i){return()=>{const b=i.slotFn;return b?b(i.slotProps):null}}}),k=e.ref(null),y=e.ref(null),p=e.ref(null),c=e.ref(!1),h=e.ref(!1),w=e.ref(!1),S=e.ref(null),F=e.computed(()=>u.item?.type==="video"),E=e.computed(()=>{if(!F.value)return;const i=u.item?.preview,b=u.item?.original;if(!(typeof i!="string"||!i)&&!(typeof b=="string"&&i===b)&&!/\.(mp4|webm)(\?|#|$)/i.test(i)&&/\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(i))return i}),M=e.computed(()=>{if(!F.value)return;const i=u.item?.preview;if(typeof i=="string"&&i&&!/\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(i))return i;const b=u.item?.original;if(typeof b=="string"&&b)return b}),R=e.ref(!1),N=e.computed(()=>!!u.hovered),$=e.ref(0),A=e.ref(0);function T(){u.remove?.()}const D=e.computed(()=>{const i=u.item?.width,b=u.item?.height;return{aspectRatio:`${i} / ${b}`}}),U=e.computed(()=>!F.value);let f=null,B=null;function _(){c.value||(c.value=!0,h.value=!1,w.value=!1,S.value=null)}function O(i){$.value=Number.isFinite(i.duration)?i.duration:0,A.value=Number.isFinite(i.currentTime)?i.currentTime:0}async function J(){if(!F.value||!N.value||!c.value||!h.value||!R.value)return;const i=p.value;if(i)try{i.muted=!0,await i.play()}catch{}}function W(){const i=p.value;i&&(i.paused||i.pause())}function ke(){const i=p.value;i&&(i.paused||i.pause())}e.watch(()=>u.hovered,i=>{if(i){_(),J();return}W()});function be(i){const b=p.value;b&&Number.isFinite(i)&&(b.currentTime=Math.max(0,Math.min(i,Number.isFinite(b.duration)?b.duration:i)),O(b))}e.onMounted(()=>{if(typeof IntersectionObserver>"u"){_();return}if(f=new IntersectionObserver(i=>{for(const b of i)if(b.isIntersecting&&!((b.intersectionRatio??0)<.5)){_(),f?.disconnect(),f=null;return}},{threshold:[0,.5,1]}),k.value&&f.observe(k.value),F.value&&k.value){const i=k.value.closest('[data-testid="items-scroll-container"]');B=new IntersectionObserver(b=>{for(const j of b){const xe=j.intersectionRatio??0,me=!!j.isIntersecting&&xe>=.5;R.value=me,me?N.value&&J():ke()}},{root:i??void 0,threshold:[0,.25,.5,.75,1]}),B.observe(k.value)}}),e.onUnmounted(()=>{f?.disconnect(),f=null,B?.disconnect(),B=null});function Y(){h.value||(h.value=!0,w.value=!1,S.value=null,a("success",u.item))}function X(i){w.value||(h.value=!1,w.value=!0,S.value=i,a("error",{item:u.item,error:i}))}function de(){if(c.value&&!h.value&&!w.value){if(U.value){const i=y.value;if(!i||!i.complete)return;i.naturalWidth>0&&Y();return}if(F.value){const i=p.value;i&&(i.readyState??0)>=1&&ve()}}}e.watch([c,()=>u.item.preview,()=>M.value],()=>{c.value&&Promise.resolve().then(de)},{flush:"post"});function ve(){Y();const i=p.value;i&&O(i),J()}function Q(){const i=p.value;i&&O(i)}return(i,b)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:k,class:"relative bg-slate-100",style:e.normalizeStyle(D.value)},[c.value&&!h.value&&!w.value?(e.openBlock(),e.createElementBlock("div",Gt,[u.loaderSlotFn?(e.openBlock(),e.createBlock(e.unref(v),{key:0,"slot-fn":u.loaderSlotFn,"slot-props":{item:u.item,remove:T}},null,8,["slot-fn","slot-props"])):(e.openBlock(),e.createElementBlock("svg",Kt,b[2]||(b[2]=[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"},null,-1),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"},null,-1)])))])):c.value&&w.value?(e.openBlock(),e.createElementBlock("div",Jt,[e.createElementVNode("div",Qt,[u.errorSlotFn?(e.openBlock(),e.createBlock(e.unref(v),{key:0,"slot-fn":u.errorSlotFn,"slot-props":{item:u.item,remove:T,error:S.value}},null,8,["slot-fn","slot-props"])):(e.openBlock(),e.createElementBlock("p",Zt,"Error "+e.toDisplayString(S.value),1))])])):e.createCommentVNode("",!0),c.value&&U.value&&!w.value?(e.openBlock(),e.createElementBlock("img",{key:u.item.id+":img",ref_key:"imgEl",ref:y,class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",h.value?"opacity-100":"opacity-0"]),src:u.item.preview,width:u.item.width,height:u.item.height,loading:"lazy",alt:u.item.id,onLoad:Y,onError:b[0]||(b[0]=j=>X(j))},null,42,en)):c.value&&!w.value?(e.openBlock(),e.createElementBlock("video",{key:u.item.id+":vid",class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",h.value?"opacity-100":"opacity-0"]),poster:E.value,ref_key:"videoEl",ref:p,playsinline:"",loop:"",preload:"metadata",onLoadedmetadata:ve,onTimeupdate:Q,onDurationchange:Q,onLoadeddata:Q,onError:b[1]||(b[1]=j=>X(j))},[e.createElementVNode("source",{src:M.value,type:"video/mp4"},null,8,nn)],42,tn)):e.createCommentVNode("",!0),c.value&&F.value&&!w.value?(e.openBlock(),e.createElementBlock("div",on,[e.createVNode(qe,{duration:$.value,"current-time":A.value,onSeek:be},null,8,["duration","current-time"])])):e.createCommentVNode("",!0)],4))}}),xt=Symbol("masonryItemRegistry");function ln(l,x){return!l||l<=0||!x||x<=0?1:Math.max(1,Math.floor(l/x))}function rn(l,x,u,a=0){if(!l||l<=0||!x||x<=0)return u;const v=typeof a=="number"&&a>0?a:0,k=Math.max(0,x-1)*v,y=l-k;return!y||y<=0?u:y/x}function an(l,x){const u=l?.width,a=l?.height;return typeof u=="number"&&typeof a=="number"&&u>0&&a>0?a/u*x:x}function St(l){return Number.isFinite(l)&&l>0?Math.floor(l):1}function Ye(l){return Number.isFinite(l)&&l>0?Math.floor(l):0}function sn(){const l=new Error("aborted");return l.name="AbortError",l}function un(l){async function x(a){const v=Ye(a);if(v<=0)return;l.stats.value={...l.stats.value,cooldownMsTotal:v,cooldownMsRemaining:v};const k=Date.now(),y=100;await new Promise(p=>{const c=setInterval(()=>{const h=Date.now()-k,w=Math.max(0,v-h);l.stats.value={...l.stats.value,cooldownMsTotal:v,cooldownMsRemaining:w},w<=0&&(clearInterval(c),p())},y)})}async function u(a){const v=St(l.getPageSize()),k=l.isEnabled(),y=Ye(l.getRequestDelayMs()),p=l.stats.value.page??null,c=l.getCancelToken?.()??null,h=()=>c!==null&&l.getCancelToken&&l.getCancelToken()!==c,w=()=>{if(h())throw sn()},S=[];let F=0;l.buffer.value.length&&(F=l.buffer.value.length,S.push(...l.buffer.value),l.buffer.value=[]),l.stats.value={...l.stats.value,enabled:k,isBackfillActive:!1,isRequestInFlight:!1,page:p??a,next:a,cooldownMsTotal:y,cooldownMsRemaining:0,progress:{collected:0,target:0},pageSize:v,bufferSize:0};const E=[];let M=a,R=0,N=!1;for(;S.length<v&&M!=null;){w();const T=M;N&&(l.stats.value={...l.stats.value,enabled:k,isBackfillActive:!0,isRequestInFlight:!0,page:T,next:null,progress:{collected:Math.min(S.length,v),target:v},cooldownMsTotal:y,cooldownMsRemaining:0,pageSize:v});const D=await l.getContent(T);w(),E.push(T),N&&(l.stats.value={...l.stats.value,enabled:k,isBackfillActive:!0,isRequestInFlight:!1,page:T,next:D.nextPage}),R+=D.items.length,l.markEnterFromLeft(D.items),S.push(...D.items),M=D.nextPage,!N&&S.length<v&&M!=null?(N=!0,l.stats.value={...l.stats.value,enabled:k,isBackfillActive:!0,isRequestInFlight:!1,page:T,next:M,progress:{collected:Math.min(S.length,v),target:v},cooldownMsTotal:y,cooldownMsRemaining:0,pageSize:v}):N&&(l.stats.value={...l.stats.value,enabled:k,isBackfillActive:!0,page:T,next:M,progress:{collected:Math.min(S.length,v),target:v}}),N&&S.length<v&&M!=null&&(await x(y),w())}const $=S.slice(0,v),A=S.slice(v);return l.buffer.value=A,l.stats.value={...l.stats.value,enabled:k,isBackfillActive:!1,isRequestInFlight:!1,page:E.length?E[E.length-1]:p??a,next:M,progress:{collected:0,target:0},cooldownMsTotal:y,cooldownMsRemaining:0,pageSize:v,bufferSize:A.length,lastBatch:{startPage:a,pages:E,usedFromBuffer:F,fetchedFromNetwork:R,collectedTotal:S.length,emitted:$.length,carried:A.length},totals:{pagesFetched:l.stats.value.totals.pagesFetched+E.length,itemsFetchedFromNetwork:l.stats.value.totals.itemsFetchedFromNetwork+R}},{batchItems:$,pages:E,nextPage:M}}return{loadBackfillBatch:u}}function cn(l){const x=l.columnCount,u=l.columnWidth,a=l.gapX,v=l.gapY,k=l.headerHeight,y=l.footerHeight,p=l.bucketPx,c=Array.from({length:x},()=>0),h=new Array(l.items.length),w=new Array(l.items.length),S=new Map,F=new Map;let E=0;for(let M=0;M<l.items.length;M+=1){const R=l.items[M];R?.id&&F.set(R.id,M);let N=0;for(let f=1;f<c.length;f+=1)c[f]<c[N]&&(N=f);const $=N*(u+a),A=c[N],T=an(R,u)+k+y;h[M]={x:$,y:A},w[M]=T,c[N]=A+T+v,E=Math.max(E,A+T);const D=Math.floor(A/p),U=Math.floor((A+T)/p);for(let f=D;f<=U;f+=1){const B=S.get(f);B?B.push(M):S.set(f,[M])}}return{positions:h,heights:w,buckets:S,contentHeight:E,indexById:F}}function fn(l){const x=l.itemCount;if(!x)return[];if(l.viewportHeight<=0)return Array.from({length:x},(c,h)=>h);const u=Math.max(0,l.scrollTop-l.overscanPx),a=l.scrollTop+l.viewportHeight+l.overscanPx,v=Math.floor(u/l.bucketPx),k=Math.floor(a/l.bucketPx),y=new Set;for(let c=v;c<=k;c+=1){const h=l.buckets.get(c);if(h)for(const w of h)y.add(w)}const p=Array.from(y);return p.sort((c,h)=>c-h),p}const dn={class:"hidden"},vn={key:0,class:"flex h-full items-center justify-center"},mn={key:1,class:"text-sm font-medium text-red-700"},pn=["onMouseenter","onMouseleave"],hn={key:0,class:"pointer-events-auto absolute inset-0 z-10"},gn={class:"relative"},yn={key:0,class:"pointer-events-auto absolute inset-0 z-10"},wn={class:"mt-4 pb-2 text-center text-xs text-slate-600"},kn={key:0,class:"inline-flex items-center justify-center gap-2"},bn={key:1},xn={key:2},ht=100,Sn=200,gt=600,yt=300,wt=600,kt=600,Mn=400,Bn=5,En=1e3,Mt=e.defineComponent({inheritAttrs:!1,__name:"Masonry",props:e.mergeDefaults({getContent:{},mode:{},pageSize:{},backfillRequestDelayMs:{},enterStaggerMs:{},items:{},page:{},restoredPages:{},itemWidth:{},prefetchThresholdPx:{},gapX:{},gapY:{},headerHeight:{},footerHeight:{},overscanPx:{}},bt),emits:["update:items","preloaded","failures","removed"],setup(l,{expose:x,emit:u}){const a=l,v=u,k=e.useAttrs(),y=e.defineComponent({name:"SlotRenderer",props:{slotFn:{type:Function,required:!1},slotProps:{type:Object,required:!0}},setup(t){return()=>{const o=t.slotFn;return o?o(t.slotProps):null}}}),p=e.shallowRef(null),c=e.ref(null);function h(t){c.value=t}function w(t){c.value===t&&(c.value=null)}e.provide(xt,t=>{p.value||(p.value=t)});const S=[],F=[];let E=null,M=null;function R(){if(!S.length)return;const t=S.splice(0,S.length);v("preloaded",t)}function N(){if(!F.length)return;const t=F.splice(0,F.length);v("failures",t)}function $(){E||(E=setTimeout(()=>{E=null,R()},ht))}function A(){M||(M=setTimeout(()=>{M=null,N()},ht))}function T(t){p.value?.onPreloaded?.(t),S.push(t),$()}function D(t){p.value?.onFailed?.(t),F.push(t),A()}e.onMounted(()=>{if(!p.value)throw new Error("[Masonry] Missing <MasonryItem> definition. Add <MasonryItem> as a child of <Masonry>.")});const U=e.computed(()=>{const{class:t,...o}=k;return o}),f=e.ref(null),B=e.ref(0),_=e.ref(0),O=e.ref(0);let J;const W=e.computed(()=>a.gapX),ke=e.computed(()=>a.gapY);function be(t){if(!t)return 0;const o=Math.max(0,W.value);return Math.max(0,t.clientWidth-o)}const Y=e.computed(()=>a.headerHeight),X=e.computed(()=>a.footerHeight),de=e.computed(()=>p.value?.header),ve=e.computed(()=>p.value?.loader),Q=e.computed(()=>p.value?.footer),i=e.computed(()=>p.value?.overlay),b=e.computed(()=>p.value?.error),j=e.computed(()=>!!de.value),xe=e.computed(()=>!!Q.value),me=e.computed(()=>!!i.value),Xe=e.computed(()=>{if(Y.value>0)return{height:`${Y.value}px`}}),je=e.computed(()=>{if(X.value>0)return{height:`${X.value}px`}}),pe=e.ref([]),Ve=e.ref([]),Ue=e.ref(new Map),We=e.ref(0),Se=e.ref(new Map);function Et(t){const o=typeof t=="number"&&Number.isFinite(t)?t:0;return O.value+_.value+Math.max(0,o)}const Z=e.ref(new Set),ee=e.ref(new Set),Me=new Set,he=e.ref(new Map);function It(t){return Number.isFinite(t)?Math.max(0,Math.min(250,t)):0}function Ft(t){if(!ee.value.has(t))return;const o=he.value.get(t)??0;if(!(o<=0))return`${o}ms`}const Be=e.ref(new Map),G=e.ref(new Set),K=e.ref([]);function _t(t){const o=Be.value.get(t);return o||{dx:0,dy:0}}function Nt(t){if(ee.value.has(t))return`transform ${wt}ms ease-out`;if(G.value.has(t))return`transform ${yt}ms ease-out`}function Pt(t){const n=m.value[t]?.id,r=pe.value[t]??{x:0,y:0},s=Ve.value[t]??0,d=s>0?s:we.value,g=r.x,I=n&&Z.value.has(n)?Et(d):r.y,H=n?_t(n):{dx:0,dy:0};return`translate3d(${g+H.dx}px,${I+H.dy}px,0)`}function ie(t){(typeof requestAnimationFrame=="function"?requestAnimationFrame:n=>setTimeout(()=>n(0),0))(()=>t())}function Tt(t){ie(()=>ie(t))}const Ge=new Set;function Ke(t){return typeof t=="number"&&Number.isFinite(t)&&t>0}function Ee(t){if(!Array.isArray(t)||t.length===0)return;const o=new Set(Z.value);let n=!1;for(const r of t){const s=r?.id;if(s){if(!Ge.has(s)){const d=r?.width,g=r?.height;(!Ke(d)||!Ke(g))&&(Ge.add(s),console.warn(`[Masonry] Item "${s}" has invalid dimensions (width=${String(d)}, height=${String(g)}); layout expects { id, width, height }.`))}o.has(s)||(o.add(s),n=!0)}}n&&(Z.value=o)}function Je(){const t=new Map;for(const o of Le.value){const r=m.value[o]?.id;if(!r)continue;const s=pe.value[o];s&&t.set(r,{x:s.x,y:s.y})}return t}function Qe(t,o){if(!t.size)return;const n=new Map,r=[];for(const[d,g]of t.entries()){if(o?.has(d))continue;const I=Se.value.get(d);if(I==null)continue;const H=pe.value[I];if(!H)continue;const L=g.x-H.x,C=g.y-H.y;(L||C)&&(n.set(d,{dx:L,dy:C}),r.push(d))}if(!n.size)return;Be.value=n;const s=new Set(G.value);for(const d of r)s.delete(d);G.value=s,ie(()=>{G.value=new Set([...G.value,...r]),ie(()=>{Be.value=new Map})}),setTimeout(()=>{const d=new Set(G.value);for(const g of r)d.delete(g);G.value=d},yt)}const te=e.ref(!0),ne=e.ref(!1),ue=e.ref("");let z=0,Ce=0,Ie=0,Fe=0,ge=!1;function Ze(t){return t instanceof Error&&t.name==="AbortError"}function et(){const t=new Error("aborted");return t.name="AbortError",t}function Vt(t){return new Promise(o=>setTimeout(o,t))}async function tt(t,o){let n=0;for(;;){if(o!==z)throw et();try{return await a.getContent(t)}catch(r){if(o!==z)throw et();if(n>=Bn)throw r;n+=1,await Vt(n*En)}}}const q=e.ref([]),nt=e.ref([]),Re=e.ref([]),V=e.ref(a.page),_e=e.ref([]);let oe=null,le=null,Ne=0;function Ct(t){let o=-1;for(const n of t){const r=n?.originalIndex;ye(r)&&r>o&&(o=r)}Ne=o+1}function ce(t){for(const o of t)!o||typeof o!="object"||o.id&&o.originalIndex==null&&(o.originalIndex=Ne,Ne+=1)}const re=new Map,ae=[];function ye(t){return typeof t=="number"&&Number.isFinite(t)}function Rt(t,o){if(!o.length)return t;const n=new Set;for(const g of t){const I=g?.id;I&&n.add(I)}const r=[];for(const g of o){const I=g?.id;I&&(n.has(I)||(r.push(g),n.add(I)))}if(!r.length)return t;const s=r.slice().sort((g,I)=>{const H=ye(g.originalIndex)?g.originalIndex:Number.POSITIVE_INFINITY,L=ye(I.originalIndex)?I.originalIndex:Number.POSITIVE_INFINITY;return H-L}),d=t.slice();for(const g of s){const I=g.originalIndex;if(!ye(I)){d.push(g);continue}let H=0,L=d.length;for(;H<L;){const C=H+L>>1,P=d[C]?.originalIndex;(ye(P)?P:Number.POSITIVE_INFINITY)<=I?H=C+1:L=C}d.splice(H,0,g)}return d}async function ot(t){if(!t.length)return;ge=!0,Ee(t);const o=Je();m.value=Rt(m.value,t),await e.nextTick(),Qe(o)}async function At(t){const n=(Array.isArray(t)?t:[t]).map(He).filter(Boolean);if(!n.length)return;const r=[];for(const s of n){const d=re.get(s);d&&r.push(d)}if(r.length){await ot(r);for(const s of r)s?.id&&re.delete(s.id)}}async function zt(){const t=ae.pop();if(!t?.length)return;const o=[];for(const n of t){const r=re.get(n);r&&o.push(r)}if(o.length){await ot(o);for(const n of o)n?.id&&re.delete(n.id)}}function Ht(t){const n=(Array.isArray(t)?t:[t]).map(He).filter(Boolean);if(!n.length)return;const r=new Set(n);for(const s of r)re.delete(s);for(let s=ae.length-1;s>=0;s-=1){const g=ae[s].filter(I=>!r.has(I));g.length?ae[s]=g:ae.splice(s,1)}}const Ae=e.shallowRef({enabled:!1,isBackfillActive:!1,isRequestInFlight:!1,page:a.page,next:a.page,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:2e3,pageSize:20,bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}),lt=un({getContent:t=>tt(t,z),markEnterFromLeft:Ee,buffer:_e,stats:Ae,isEnabled:()=>a.mode==="backfill",getPageSize:()=>a.pageSize,getRequestDelayMs:()=>a.backfillRequestDelayMs,getCancelToken:()=>Ce}),Pe=e.computed(()=>a.items!==void 0);e.watch(()=>a.items,t=>{Pe.value&&(Re.value=Array.isArray(t)?t:[])},{immediate:!0});const m=e.computed({get(){return Pe.value?Re.value:nt.value},set(t){Pe.value?(Re.value=t,v("update:items",t)):nt.value=t}}),fe=e.ref(!1),ze=e.ref(!1);async function rt(t){const o=await tt(t,z);return ce(o.items),Ee(o.items),{items:o.items,nextPage:o.nextPage}}function He(t){return t?typeof t=="string"?t:t?.id:null}async function at(t){const n=(Array.isArray(t)?t:[t]).map(He).filter(Boolean);if(!n.length)return;const r=new Set(n),s=[],d=[];for(const C of r){const P=Se.value.get(C);if(P==null)continue;const se=m.value[P];se&&(re.set(C,se),d.push(C),s.push(se))}d.length&&(ae.push(d),ge=!0);const g=Je(),I=we.value,H=O.value+_.value,L=[];for(const C of r){const P=Se.value.get(C);if(P==null)continue;const se=m.value[P];if(!se)continue;const Oe=pe.value[P]??{x:0,y:0},mt=Ve.value[P]??I,Ut=Math.max(Oe.y,H);L.push({id:C,item:se,fromX:Oe.x,fromY:Oe.y,toY:Ut+Math.max(0,mt),width:I,height:mt,leaving:!0})}if(L.length&&(K.value=[...K.value,...L]),m.value=m.value.filter(C=>{const P=C?.id;return!P||!r.has(P)}),await e.nextTick(),Qe(g,r),L.length){const C=new Set(L.map(P=>P.id));ie(()=>{K.value=K.value.map(P=>C.has(P.id)?{...P,leaving:!1}:P),setTimeout(()=>{K.value=K.value.filter(P=>!C.has(P.id))},kt)})}s.length&&v("removed",{items:s,ids:d})}async function Te(t){return at(t)}function Lt(){z+=1,Ce+=1,oe=null,le=null,te.value=!1,ne.value=!1}x({remove:at,restore:At,undo:zt,forget:Ht,loadNextPage:it,cancel:Lt,get pagesLoaded(){return q.value},set pagesLoaded(t){q.value=t},get nextPage(){return V.value},set nextPage(t){V.value=t},get isLoading(){return te.value||ne.value},get hasReachedEnd(){return a.mode!=="backfill"?V.value==null:V.value==null&&_e.value.length===0},get backfillStats(){return Ae.value}});function st(){const t=cn({items:m.value,columnCount:$e.value,columnWidth:we.value,gapX:W.value,gapY:ke.value,headerHeight:Y.value,footerHeight:X.value,bucketPx:gt});pe.value=t.positions,Ve.value=t.heights,Ue.value=t.buckets,We.value=t.contentHeight,Se.value=t.indexById}const Dt=e.computed(()=>Math.max(We.value,_.value)+Sn),Le=e.computed(()=>fn({itemCount:m.value.length,viewportHeight:_.value,scrollTop:O.value,overscanPx:a.overscanPx,bucketPx:gt,buckets:Ue.value}));e.watch(Le,t=>{if(!t?.length)return;if(fe.value&&!ze.value){const r=[];for(const s of t){const d=m.value[s];d&&r.push(d)}r.length&&Ee(r),ze.value=!0}const o=[];for(const r of t){const s=m.value[r]?.id;s&&Z.value.has(s)&&(Me.has(s)||(Me.add(s),o.push(s)))}if(!o.length)return;const n=o.length>1?It(a.enterStaggerMs):0;if(n>0){const r=new Map(he.value);for(let s=0;s<o.length;s+=1){const d=o[s],g=Math.min(s*n,Mn);r.set(d,g)}he.value=r}ie(()=>{const r=new Set(ee.value);for(const s of o)r.add(s);ee.value=r}),Tt(()=>{const r=new Set(Z.value);for(const s of o)r.delete(s);Z.value=r,setTimeout(()=>{const s=new Set(ee.value),d=new Map(he.value);for(const g of o)s.delete(g),Me.delete(g),d.delete(g);ee.value=s,he.value=d},wt)})},{flush:"post"});async function it(){if(oe)return oe;if(te.value||ne.value||a.mode!=="backfill"&&V.value==null||a.mode==="backfill"&&V.value==null&&_e.value.length===0)return;const t=z;let o=null;return o=(async()=>{try{if(ne.value=!0,ue.value="",a.mode==="backfill"){const s=await lt.loadBackfillBatch(V.value);if(t!==z)return;s.pages.length&&(q.value=[...q.value,...s.pages]),ce(s.batchItems),m.value=[...m.value,...s.batchItems],V.value=s.nextPage;return}const n=V.value;if(n==null)return;const r=await rt(n);if(t!==z)return;q.value=[...q.value,n],ce(r.items),m.value=[...m.value,...r.items],V.value=r.nextPage}catch(n){if(t!==z||Ze(n))return;ue.value=n instanceof Error?n.message:String(n)}finally{t===z&&(ne.value=!1),oe===o&&(oe=null)}})(),oe=o,o}function $t(){const t=f.value;if(!t)return;const o=t.scrollTop,n=t.clientHeight,r=t.scrollHeight;O.value=o,_.value=n;const s=Ie,d=Fe,g=o>s,I=d>0&&r<d;if(Ie=o,Fe=r,ge){if(!g)return;ge=!1}if(I&&!g)return;r-(o+n)<=a.prefetchThresholdPx&&it()}function ut(){return f.value}function ct(t){B.value=be(t),_.value=t.clientHeight}function Ot(){typeof ResizeObserver>"u"||(J=new ResizeObserver(()=>{const t=ut();t&&ct(t)}))}function Yt(){return{enabled:a.mode==="backfill",isBackfillActive:!1,isRequestInFlight:!1,page:a.page,next:a.page,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:Ye(a.backfillRequestDelayMs),pageSize:St(a.pageSize),bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}}function ft(){z+=1,Ce+=1,oe=null,le=null,Ie=0,Fe=0,ge=!1,Ne=0,re.clear(),ae.length=0,Z.value=new Set,ee.value=new Set,Me.clear(),Be.value=new Map,G.value=new Set,K.value=[],q.value=[],V.value=null,_e.value=[],Ae.value=Yt(),te.value=!0,ne.value=!1,ue.value="",ze.value=!1}function dt(t){ft(),m.value=[],V.value=t}function qt(t){const o=Array.isArray(t)?t:[t],n=[],r=new Set;for(const s of o){if(s==null)continue;const d=typeof s=="string"?`s:${s}`:`n:${String(s)}`;r.has(d)||(r.add(d),n.push(s))}return n}function De(t){ft(),q.value=t?qt(t):[],V.value=a.page,te.value=!1,Ct(m.value),ce(m.value)}async function vt(t){if(le)return le;const o=z;let n=null;return n=(async()=>{try{if(a.mode==="backfill"){const r=await lt.loadBackfillBatch(t);if(o!==z)return;q.value=r.pages.length?r.pages:[t],ce(r.batchItems),m.value=r.batchItems,V.value=r.nextPage}else{const r=await rt(t);if(o!==z)return;q.value=[t],ce(r.items),m.value=r.items,V.value=r.nextPage}}catch(r){if(o!==z||Ze(r))return;ue.value=r instanceof Error?r.message:String(r)}finally{o===z&&(te.value=!1),le===n&&(le=null)}})(),le=n,n}function Xt(){const t=ut();t&&(ct(t),O.value=t.scrollTop,Ie=t.scrollTop,Fe=t.scrollHeight,J?.observe(t))}e.onMounted(async()=>{if(Ot(),Xt(),a.restoredPages!=null){fe.value=!0,De(a.restoredPages);return}if(Pe.value&&m.value.length>0){fe.value=!0,De();return}fe.value=!1,dt(a.page),await vt(a.page)}),e.onUnmounted(()=>{J?.disconnect(),E&&(clearTimeout(E),E=null),M&&(clearTimeout(M),M=null),R(),N()}),e.watch(()=>a.page,async t=>{if(fe.value){V.value=t;return}dt(t),await vt(t)}),e.watch(()=>a.restoredPages,t=>{t&&(fe.value=!0,De(t))}),e.watch(W,()=>{const t=f.value;t&&(B.value=be(t))},{immediate:!1});const $e=e.computed(()=>ln(B.value,a.itemWidth)),we=e.computed(()=>rn(B.value,$e.value,a.itemWidth,W.value));e.watch([$e,we,W,ke,Y,X],()=>{st()},{immediate:!0}),e.watch(()=>[m.value,m.value.length],()=>st(),{immediate:!0});const jt=e.computed(()=>["mt-8 flex min-h-0 flex-1 flex-col rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur",k.class]);return(t,o)=>(e.openBlock(),e.createElementBlock("section",e.mergeProps(U.value,{class:jt.value}),[e.createElementVNode("div",dn,[e.renderSlot(t.$slots,"default")]),e.createElementVNode("div",{ref_key:"scrollViewportRef",ref:f,"data-testid":"items-scroll-container",class:"mt-4 min-h-0 flex-1 overflow-auto",style:e.normalizeStyle({paddingRight:W.value+"px"}),onScroll:$t},[te.value?(e.openBlock(),e.createElementBlock("div",vn,o[0]||(o[0]=[e.createElementVNode("div",{class:"inline-flex items-center gap-3 text-sm text-slate-600"},[e.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})]),e.createElementVNode("span",null,"Loading…")],-1)]))):ue.value?(e.openBlock(),e.createElementBlock("p",mn,"Error: "+e.toDisplayString(ue.value),1)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"relative",style:e.normalizeStyle({height:Dt.value+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Le.value,n=>(e.openBlock(),e.createElementBlock("article",{key:m.value[n].id,"data-testid":"item-card",class:"absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:we.value+"px",transition:Nt(m.value[n].id),transitionDelay:Ft(m.value[n].id),transform:Pt(n)})},[j.value||Y.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(Xe.value)},[e.createVNode(e.unref(y),{"slot-fn":de.value,"slot-props":{item:m.value[n],remove:()=>Te(m.value[n])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"group relative",onMouseenter:r=>h(m.value[n].id),onMouseleave:r=>w(m.value[n].id)},[e.createVNode(pt,{item:m.value[n],remove:()=>Te(m.value[n]),"loader-slot-fn":ve.value,"error-slot-fn":b.value,hovered:c.value===m.value[n].id,onSuccess:T,onError:D},null,8,["item","remove","loader-slot-fn","error-slot-fn","hovered"]),me.value?(e.openBlock(),e.createElementBlock("div",hn,[e.createVNode(e.unref(y),{"slot-fn":i.value,"slot-props":{item:m.value[n],remove:()=>Te(m.value[n])}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)],40,pn),xe.value||X.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(je.value)},[e.createVNode(e.unref(y),{"slot-fn":Q.value,"slot-props":{item:m.value[n],remove:()=>Te(m.value[n])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(K.value,n=>(e.openBlock(),e.createElementBlock("article",{key:n.id+":leaving","data-testid":"item-card-leaving",class:"pointer-events-none absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:n.width+"px",transition:"transform "+kt+"ms ease-out",transform:n.leaving?"translate3d("+n.fromX+"px,"+n.fromY+"px,0)":"translate3d("+n.fromX+"px,"+n.toY+"px,0)"})},[j.value||Y.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(Xe.value)},[e.createVNode(e.unref(y),{"slot-fn":de.value,"slot-props":{item:n.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",gn,[e.createVNode(pt,{item:n.item,remove:()=>{},"loader-slot-fn":ve.value,"error-slot-fn":b.value,hovered:!1},null,8,["item","loader-slot-fn","error-slot-fn"]),me.value?(e.openBlock(),e.createElementBlock("div",yn,[e.createVNode(e.unref(y),{"slot-fn":i.value,"slot-props":{item:n.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)]),xe.value||X.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(je.value)},[e.createVNode(e.unref(y),{"slot-fn":Q.value,"slot-props":{item:n.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128))],4)),e.createElementVNode("div",wn,[ne.value?(e.openBlock(),e.createElementBlock("span",kn,o[1]||(o[1]=[e.createElementVNode("svg",{class:"h-4 w-4 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1),e.createElementVNode("span",null,"Loading more…",-1)]))):V.value==null?(e.openBlock(),e.createElementBlock("span",bn,"End of list")):(e.openBlock(),e.createElementBlock("span",xn,"Scroll to load page "+e.toDisplayString(V.value),1))])],36)],16))}}),Bt=e.defineComponent({name:"MasonryItem",setup(l,{slots:x,attrs:u}){const a=e.inject(xt,null);if(!a)return()=>null;const v=u.onPreloaded,k=u.onFailed,y=x.overlay,p=x.default;return a({header:x.header,loader:x.loader,overlay:y??p,error:x.error,footer:x.footer,onPreloaded:typeof v=="function"?v:Array.isArray(v)?c=>{for(const h of v)typeof h=="function"&&h(c)}:void 0,onFailed:typeof k=="function"?k:Array.isArray(k)?c=>{for(const h of k)typeof h=="function"&&h(c)}:void 0}),()=>null}}),In={install(l){l.component("Masonry",Mt),l.component("MasonryItem",Bt),l.component("MasonryVideoControls",qe)}};exports.Masonry=Mt;exports.MasonryItem=Bt;exports.MasonryVideoControls=qe;exports.VibePlugin=In;exports.masonryDefaults=bt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),bt={mode:"default",pageSize:20,backfillRequestDelayMs:2e3,enterStaggerMs:40,page:1,itemWidth:300,prefetchThresholdPx:200,gapX:16,gapY:16,headerHeight:0,footerHeight:0,overscanPx:600},Wt=["aria-label","aria-valuemax","aria-valuenow"],qe=e.defineComponent({__name:"MasonryVideoControls",props:{currentTime:{},duration:{},ariaLabel:{default:"Seek"},step:{default:.1},keyboardStep:{default:5}},emits:["seek"],setup(l,{expose:x,emit:u}){const a=l,v=u,b=e.ref(null),y=e.ref(null),p=e.ref(null),c=e.ref(!1),h=e.computed(()=>Number.isFinite(a.step)?Math.max(0,a.step):0),w=e.computed(()=>Number.isFinite(a.duration)?Math.max(0,a.duration):0),S=e.computed(()=>{const f=Number.isFinite(a.currentTime)?a.currentTime:0;return E(f,0,w.value)}),F=e.computed(()=>w.value>0?S.value/w.value:0);function E(f,B,_){return Math.min(_,Math.max(B,f))}function M(f){return h.value<=0?f:Math.round(f/h.value)*h.value}function R(f){const B=E(f,0,w.value);v("seek",M(B))}function N(f){const B=y.value;if(!B)return;const _=B.getBoundingClientRect();if(!_.width)return;const O=E((f-_.left)/_.width,0,1);R(O*w.value)}function $(f){const B=y.value;B&&(c.value=!0,B.setPointerCapture&&B.setPointerCapture(f.pointerId),N(f.clientX))}function A(f){c.value&&N(f.clientX)}function T(f){if(!c.value)return;c.value=!1;const B=y.value;B?.releasePointerCapture&&B.releasePointerCapture(f.pointerId)}function D(f){if(w.value<=0)return;const B=Number.isFinite(a.keyboardStep)?a.keyboardStep:1;let _=S.value;switch(f.key){case"ArrowLeft":case"ArrowDown":_-=B;break;case"ArrowRight":case"ArrowUp":_+=B;break;case"Home":_=0;break;case"End":_=w.value;break;default:return}f.preventDefault(),R(_)}function U(){b.value?.focus()}return x({focus:U,seekTo:R,percent:F,currentValue:S,maxValue:w,isDragging:c,rootEl:b,trackEl:y,thumbEl:p}),(f,B)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:b,class:"w-full select-none",role:"slider",tabindex:"0","aria-label":a.ariaLabel,"aria-valuemin":0,"aria-valuemax":w.value,"aria-valuenow":S.value,onKeydown:D},[e.createElementVNode("div",{ref_key:"trackEl",ref:y,class:"relative h-2 w-full cursor-pointer rounded-full bg-slate-200",onPointerdown:$,onPointermove:A,onPointerup:T,onPointercancel:T,onPointerleave:T},[e.createElementVNode("div",{class:"absolute inset-y-0 left-0 rounded-full bg-slate-500",style:e.normalizeStyle({width:`${F.value*100}%`})},null,4),e.createElementVNode("div",{ref_key:"thumbEl",ref:p,class:"absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-700 shadow",style:e.normalizeStyle({left:`${F.value*100}%`}),"aria-hidden":"true"},null,4)],544)],40,Wt))}}),Gt={key:0,"data-testid":"masonry-loader-spinner",class:"absolute inset-0 z-10 flex flex-col items-center justify-center gap-1"},Kt={key:1,class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},Jt={key:1,"data-testid":"masonry-loader-error",class:"absolute inset-0 z-20 grid place-items-center p-3 pointer-events-none"},Qt={class:"pointer-events-auto flex flex-col items-center justify-center gap-2"},Zt={key:1,class:"text-center text-xs font-medium text-red-700"},en=["src","width","height","alt"],tn=["poster"],nn=["src"],on={key:4,class:"pointer-events-none absolute inset-x-0 bottom-0 z-20 px-2 pb-2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"},pt=e.defineComponent({__name:"MasonryLoader",props:{item:{},remove:{},loaderSlotFn:{},errorSlotFn:{},hovered:{type:Boolean,default:!1}},emits:["success","error"],setup(l,{emit:x}){const u=l,a=x,v=e.defineComponent({name:"SlotRenderer",props:{slotFn:{type:Function,required:!1},slotProps:{type:Object,required:!0}},setup(i){return()=>{const k=i.slotFn;return k?k(i.slotProps):null}}}),b=e.ref(null),y=e.ref(null),p=e.ref(null),c=e.ref(!1),h=e.ref(!1),w=e.ref(!1),S=e.ref(null),F=e.computed(()=>u.item?.type==="video"),E=e.computed(()=>{if(!F.value)return;const i=u.item?.preview,k=u.item?.original;if(!(typeof i!="string"||!i)&&!(typeof k=="string"&&i===k)&&!/\.(mp4|webm)(\?|#|$)/i.test(i)&&/\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(i))return i}),M=e.computed(()=>{if(!F.value)return;const i=u.item?.preview;if(typeof i=="string"&&i&&!/\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(i))return i;const k=u.item?.original;if(typeof k=="string"&&k)return k}),R=e.ref(!1),N=e.computed(()=>!!u.hovered),$=e.ref(0),A=e.ref(0);function T(){u.remove?.()}const D=e.computed(()=>{const i=u.item?.width,k=u.item?.height;return{aspectRatio:`${i} / ${k}`}}),U=e.computed(()=>!F.value);let f=null,B=null;function _(){c.value||(c.value=!0,h.value=!1,w.value=!1,S.value=null)}function O(i){$.value=Number.isFinite(i.duration)?i.duration:0,A.value=Number.isFinite(i.currentTime)?i.currentTime:0}async function J(){if(!F.value||!N.value||!c.value||!h.value||!R.value)return;const i=p.value;if(i)try{i.muted=!0,await i.play()}catch{}}function W(){const i=p.value;i&&(i.paused||i.pause())}function ke(){const i=p.value;i&&(i.paused||i.pause())}e.watch(()=>u.hovered,i=>{if(i){_(),J();return}W()});function be(i){const k=p.value;k&&Number.isFinite(i)&&(k.currentTime=Math.max(0,Math.min(i,Number.isFinite(k.duration)?k.duration:i)),O(k))}e.onMounted(()=>{if(typeof IntersectionObserver>"u"){_();return}if(f=new IntersectionObserver(i=>{for(const k of i)if(k.isIntersecting&&!((k.intersectionRatio??0)<.5)){_(),f?.disconnect(),f=null;return}},{threshold:[0,.5,1]}),b.value&&f.observe(b.value),F.value&&b.value){const i=b.value.closest('[data-testid="items-scroll-container"]');B=new IntersectionObserver(k=>{for(const Y of k){const xe=Y.intersectionRatio??0,me=!!Y.isIntersecting&&xe>=.5;R.value=me,me?N.value&&J():ke()}},{root:i??void 0,threshold:[0,.25,.5,.75,1]}),B.observe(b.value)}}),e.onUnmounted(()=>{f?.disconnect(),f=null,B?.disconnect(),B=null});function q(){h.value||(h.value=!0,w.value=!1,S.value=null,a("success",u.item))}function X(i){w.value||(h.value=!1,w.value=!0,S.value=i,a("error",{item:u.item,error:i}))}function de(){if(c.value&&!h.value&&!w.value){if(U.value){const i=y.value;if(!i||!i.complete)return;i.naturalWidth>0&&q();return}if(F.value){const i=p.value;i&&(i.readyState??0)>=1&&ve()}}}e.watch([c,()=>u.item.preview,()=>M.value],()=>{c.value&&Promise.resolve().then(de)},{flush:"post"});function ve(){q();const i=p.value;i&&O(i),J()}function Q(){const i=p.value;i&&O(i)}return(i,k)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:b,class:"relative bg-slate-100",style:e.normalizeStyle(D.value)},[c.value&&!h.value&&!w.value?(e.openBlock(),e.createElementBlock("div",Gt,[u.loaderSlotFn?(e.openBlock(),e.createBlock(e.unref(v),{key:0,"slot-fn":u.loaderSlotFn,"slot-props":{item:u.item,remove:T}},null,8,["slot-fn","slot-props"])):(e.openBlock(),e.createElementBlock("svg",Kt,k[3]||(k[3]=[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"},null,-1),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"},null,-1)])))])):c.value&&w.value?(e.openBlock(),e.createElementBlock("div",Jt,[e.createElementVNode("div",Qt,[u.errorSlotFn?(e.openBlock(),e.createBlock(e.unref(v),{key:0,"slot-fn":u.errorSlotFn,"slot-props":{item:u.item,remove:T,error:S.value}},null,8,["slot-fn","slot-props"])):(e.openBlock(),e.createElementBlock("p",Zt,"Error "+e.toDisplayString(S.value),1))])])):e.createCommentVNode("",!0),c.value&&U.value&&!w.value?(e.openBlock(),e.createElementBlock("img",{key:u.item.id+":img",ref_key:"imgEl",ref:y,class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",h.value?"opacity-100":"opacity-0"]),src:u.item.preview,width:u.item.width,height:u.item.height,loading:"lazy",alt:u.item.id,onLoad:q,onError:k[0]||(k[0]=Y=>X(Y))},null,42,en)):c.value&&!w.value?(e.openBlock(),e.createElementBlock("video",{key:u.item.id+":vid",class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",h.value?"opacity-100":"opacity-0"]),poster:E.value,ref_key:"videoEl",ref:p,playsinline:"",loop:"",preload:"metadata",onLoadedmetadata:ve,onTimeupdate:Q,onDurationchange:Q,onLoadeddata:Q,onError:k[2]||(k[2]=Y=>X(Y))},[e.createElementVNode("source",{src:M.value,type:"video/mp4",onError:k[1]||(k[1]=Y=>X(Y))},null,40,nn)],42,tn)):e.createCommentVNode("",!0),c.value&&F.value&&!w.value?(e.openBlock(),e.createElementBlock("div",on,[e.createVNode(qe,{duration:$.value,"current-time":A.value,onSeek:be},null,8,["duration","current-time"])])):e.createCommentVNode("",!0)],4))}}),xt=Symbol("masonryItemRegistry");function ln(l,x){return!l||l<=0||!x||x<=0?1:Math.max(1,Math.floor(l/x))}function rn(l,x,u,a=0){if(!l||l<=0||!x||x<=0)return u;const v=typeof a=="number"&&a>0?a:0,b=Math.max(0,x-1)*v,y=l-b;return!y||y<=0?u:y/x}function an(l,x){const u=l?.width,a=l?.height;return typeof u=="number"&&typeof a=="number"&&u>0&&a>0?a/u*x:x}function St(l){return Number.isFinite(l)&&l>0?Math.floor(l):1}function Ye(l){return Number.isFinite(l)&&l>0?Math.floor(l):0}function sn(){const l=new Error("aborted");return l.name="AbortError",l}function un(l){async function x(a){const v=Ye(a);if(v<=0)return;l.stats.value={...l.stats.value,cooldownMsTotal:v,cooldownMsRemaining:v};const b=Date.now(),y=100;await new Promise(p=>{const c=setInterval(()=>{const h=Date.now()-b,w=Math.max(0,v-h);l.stats.value={...l.stats.value,cooldownMsTotal:v,cooldownMsRemaining:w},w<=0&&(clearInterval(c),p())},y)})}async function u(a){const v=St(l.getPageSize()),b=l.isEnabled(),y=Ye(l.getRequestDelayMs()),p=l.stats.value.page??null,c=l.getCancelToken?.()??null,h=()=>c!==null&&l.getCancelToken&&l.getCancelToken()!==c,w=()=>{if(h())throw sn()},S=[];let F=0;l.buffer.value.length&&(F=l.buffer.value.length,S.push(...l.buffer.value),l.buffer.value=[]),l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!1,isRequestInFlight:!1,page:p??a,next:a,cooldownMsTotal:y,cooldownMsRemaining:0,progress:{collected:0,target:0},pageSize:v,bufferSize:0};const E=[];let M=a,R=0,N=!1;for(;S.length<v&&M!=null;){w();const T=M;N&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!0,page:T,next:null,progress:{collected:Math.min(S.length,v),target:v},cooldownMsTotal:y,cooldownMsRemaining:0,pageSize:v});const D=await l.getContent(T);w(),E.push(T),N&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!1,page:T,next:D.nextPage}),R+=D.items.length,l.markEnterFromLeft(D.items),S.push(...D.items),M=D.nextPage,!N&&S.length<v&&M!=null?(N=!0,l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!1,page:T,next:M,progress:{collected:Math.min(S.length,v),target:v},cooldownMsTotal:y,cooldownMsRemaining:0,pageSize:v}):N&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,page:T,next:M,progress:{collected:Math.min(S.length,v),target:v}}),N&&S.length<v&&M!=null&&(await x(y),w())}const $=S.slice(0,v),A=S.slice(v);return l.buffer.value=A,l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!1,isRequestInFlight:!1,page:E.length?E[E.length-1]:p??a,next:M,progress:{collected:0,target:0},cooldownMsTotal:y,cooldownMsRemaining:0,pageSize:v,bufferSize:A.length,lastBatch:{startPage:a,pages:E,usedFromBuffer:F,fetchedFromNetwork:R,collectedTotal:S.length,emitted:$.length,carried:A.length},totals:{pagesFetched:l.stats.value.totals.pagesFetched+E.length,itemsFetchedFromNetwork:l.stats.value.totals.itemsFetchedFromNetwork+R}},{batchItems:$,pages:E,nextPage:M}}return{loadBackfillBatch:u}}function cn(l){const x=l.columnCount,u=l.columnWidth,a=l.gapX,v=l.gapY,b=l.headerHeight,y=l.footerHeight,p=l.bucketPx,c=Array.from({length:x},()=>0),h=new Array(l.items.length),w=new Array(l.items.length),S=new Map,F=new Map;let E=0;for(let M=0;M<l.items.length;M+=1){const R=l.items[M];R?.id&&F.set(R.id,M);let N=0;for(let f=1;f<c.length;f+=1)c[f]<c[N]&&(N=f);const $=N*(u+a),A=c[N],T=an(R,u)+b+y;h[M]={x:$,y:A},w[M]=T,c[N]=A+T+v,E=Math.max(E,A+T);const D=Math.floor(A/p),U=Math.floor((A+T)/p);for(let f=D;f<=U;f+=1){const B=S.get(f);B?B.push(M):S.set(f,[M])}}return{positions:h,heights:w,buckets:S,contentHeight:E,indexById:F}}function fn(l){const x=l.itemCount;if(!x)return[];if(l.viewportHeight<=0)return Array.from({length:x},(c,h)=>h);const u=Math.max(0,l.scrollTop-l.overscanPx),a=l.scrollTop+l.viewportHeight+l.overscanPx,v=Math.floor(u/l.bucketPx),b=Math.floor(a/l.bucketPx),y=new Set;for(let c=v;c<=b;c+=1){const h=l.buckets.get(c);if(h)for(const w of h)y.add(w)}const p=Array.from(y);return p.sort((c,h)=>c-h),p}const dn={class:"hidden"},vn={key:0,class:"flex h-full items-center justify-center"},mn={key:1,class:"text-sm font-medium text-red-700"},pn=["onMouseenter","onMouseleave"],hn={key:0,class:"pointer-events-auto absolute inset-0 z-10"},gn={class:"relative"},yn={key:0,class:"pointer-events-auto absolute inset-0 z-10"},wn={class:"mt-4 pb-2 text-center text-xs text-slate-600"},kn={key:0,class:"inline-flex items-center justify-center gap-2"},bn={key:1},xn={key:2},ht=100,Sn=200,gt=600,yt=300,wt=600,kt=600,Mn=400,Bn=5,En=1e3,Mt=e.defineComponent({inheritAttrs:!1,__name:"Masonry",props:e.mergeDefaults({getContent:{},mode:{},pageSize:{},backfillRequestDelayMs:{},enterStaggerMs:{},items:{},page:{},restoredPages:{},itemWidth:{},prefetchThresholdPx:{},gapX:{},gapY:{},headerHeight:{},footerHeight:{},overscanPx:{}},bt),emits:["update:items","preloaded","failures","removed"],setup(l,{expose:x,emit:u}){const a=l,v=u,b=e.useAttrs(),y=e.defineComponent({name:"SlotRenderer",props:{slotFn:{type:Function,required:!1},slotProps:{type:Object,required:!0}},setup(t){return()=>{const o=t.slotFn;return o?o(t.slotProps):null}}}),p=e.shallowRef(null),c=e.ref(null);function h(t){c.value=t}function w(t){c.value===t&&(c.value=null)}e.provide(xt,t=>{p.value||(p.value=t)});const S=[],F=[];let E=null,M=null;function R(){if(!S.length)return;const t=S.splice(0,S.length);v("preloaded",t)}function N(){if(!F.length)return;const t=F.splice(0,F.length);v("failures",t)}function $(){E||(E=setTimeout(()=>{E=null,R()},ht))}function A(){M||(M=setTimeout(()=>{M=null,N()},ht))}function T(t){p.value?.onPreloaded?.(t),S.push(t),$()}function D(t){p.value?.onFailed?.(t),F.push(t),A()}e.onMounted(()=>{if(!p.value)throw new Error("[Masonry] Missing <MasonryItem> definition. Add <MasonryItem> as a child of <Masonry>.")});const U=e.computed(()=>{const{class:t,...o}=b;return o}),f=e.ref(null),B=e.ref(0),_=e.ref(0),O=e.ref(0);let J;const W=e.computed(()=>a.gapX),ke=e.computed(()=>a.gapY);function be(t){if(!t)return 0;const o=Math.max(0,W.value);return Math.max(0,t.clientWidth-o)}const q=e.computed(()=>a.headerHeight),X=e.computed(()=>a.footerHeight),de=e.computed(()=>p.value?.header),ve=e.computed(()=>p.value?.loader),Q=e.computed(()=>p.value?.footer),i=e.computed(()=>p.value?.overlay),k=e.computed(()=>p.value?.error),Y=e.computed(()=>!!de.value),xe=e.computed(()=>!!Q.value),me=e.computed(()=>!!i.value),Xe=e.computed(()=>{if(q.value>0)return{height:`${q.value}px`}}),je=e.computed(()=>{if(X.value>0)return{height:`${X.value}px`}}),pe=e.ref([]),Ve=e.ref([]),Ue=e.ref(new Map),We=e.ref(0),Se=e.ref(new Map);function Et(t){const o=typeof t=="number"&&Number.isFinite(t)?t:0;return O.value+_.value+Math.max(0,o)}const Z=e.ref(new Set),ee=e.ref(new Set),Me=new Set,he=e.ref(new Map);function It(t){return Number.isFinite(t)?Math.max(0,Math.min(250,t)):0}function Ft(t){if(!ee.value.has(t))return;const o=he.value.get(t)??0;if(!(o<=0))return`${o}ms`}const Be=e.ref(new Map),G=e.ref(new Set),K=e.ref([]);function _t(t){const o=Be.value.get(t);return o||{dx:0,dy:0}}function Nt(t){if(ee.value.has(t))return`transform ${wt}ms ease-out`;if(G.value.has(t))return`transform ${yt}ms ease-out`}function Pt(t){const n=m.value[t]?.id,r=pe.value[t]??{x:0,y:0},s=Ve.value[t]??0,d=s>0?s:we.value,g=r.x,I=n&&Z.value.has(n)?Et(d):r.y,H=n?_t(n):{dx:0,dy:0};return`translate3d(${g+H.dx}px,${I+H.dy}px,0)`}function ie(t){(typeof requestAnimationFrame=="function"?requestAnimationFrame:n=>setTimeout(()=>n(0),0))(()=>t())}function Tt(t){ie(()=>ie(t))}const Ge=new Set;function Ke(t){return typeof t=="number"&&Number.isFinite(t)&&t>0}function Ee(t){if(!Array.isArray(t)||t.length===0)return;const o=new Set(Z.value);let n=!1;for(const r of t){const s=r?.id;if(s){if(!Ge.has(s)){const d=r?.width,g=r?.height;(!Ke(d)||!Ke(g))&&(Ge.add(s),console.warn(`[Masonry] Item "${s}" has invalid dimensions (width=${String(d)}, height=${String(g)}); layout expects { id, width, height }.`))}o.has(s)||(o.add(s),n=!0)}}n&&(Z.value=o)}function Je(){const t=new Map;for(const o of Le.value){const r=m.value[o]?.id;if(!r)continue;const s=pe.value[o];s&&t.set(r,{x:s.x,y:s.y})}return t}function Qe(t,o){if(!t.size)return;const n=new Map,r=[];for(const[d,g]of t.entries()){if(o?.has(d))continue;const I=Se.value.get(d);if(I==null)continue;const H=pe.value[I];if(!H)continue;const L=g.x-H.x,C=g.y-H.y;(L||C)&&(n.set(d,{dx:L,dy:C}),r.push(d))}if(!n.size)return;Be.value=n;const s=new Set(G.value);for(const d of r)s.delete(d);G.value=s,ie(()=>{G.value=new Set([...G.value,...r]),ie(()=>{Be.value=new Map})}),setTimeout(()=>{const d=new Set(G.value);for(const g of r)d.delete(g);G.value=d},yt)}const te=e.ref(!0),ne=e.ref(!1),ue=e.ref("");let z=0,Ce=0,Ie=0,Fe=0,ge=!1;function Ze(t){return t instanceof Error&&t.name==="AbortError"}function et(){const t=new Error("aborted");return t.name="AbortError",t}function Vt(t){return new Promise(o=>setTimeout(o,t))}async function tt(t,o){let n=0;for(;;){if(o!==z)throw et();try{return await a.getContent(t)}catch(r){if(o!==z)throw et();if(n>=Bn)throw r;n+=1,await Vt(n*En)}}}const j=e.ref([]),nt=e.ref([]),Re=e.ref([]),V=e.ref(a.page),_e=e.ref([]);let oe=null,le=null,Ne=0;function Ct(t){let o=-1;for(const n of t){const r=n?.originalIndex;ye(r)&&r>o&&(o=r)}Ne=o+1}function ce(t){for(const o of t)!o||typeof o!="object"||o.id&&o.originalIndex==null&&(o.originalIndex=Ne,Ne+=1)}const re=new Map,ae=[];function ye(t){return typeof t=="number"&&Number.isFinite(t)}function Rt(t,o){if(!o.length)return t;const n=new Set;for(const g of t){const I=g?.id;I&&n.add(I)}const r=[];for(const g of o){const I=g?.id;I&&(n.has(I)||(r.push(g),n.add(I)))}if(!r.length)return t;const s=r.slice().sort((g,I)=>{const H=ye(g.originalIndex)?g.originalIndex:Number.POSITIVE_INFINITY,L=ye(I.originalIndex)?I.originalIndex:Number.POSITIVE_INFINITY;return H-L}),d=t.slice();for(const g of s){const I=g.originalIndex;if(!ye(I)){d.push(g);continue}let H=0,L=d.length;for(;H<L;){const C=H+L>>1,P=d[C]?.originalIndex;(ye(P)?P:Number.POSITIVE_INFINITY)<=I?H=C+1:L=C}d.splice(H,0,g)}return d}async function ot(t){if(!t.length)return;ge=!0,Ee(t);const o=Je();m.value=Rt(m.value,t),await e.nextTick(),Qe(o)}async function At(t){const n=(Array.isArray(t)?t:[t]).map(He).filter(Boolean);if(!n.length)return;const r=[];for(const s of n){const d=re.get(s);d&&r.push(d)}if(r.length){await ot(r);for(const s of r)s?.id&&re.delete(s.id)}}async function zt(){const t=ae.pop();if(!t?.length)return;const o=[];for(const n of t){const r=re.get(n);r&&o.push(r)}if(o.length){await ot(o);for(const n of o)n?.id&&re.delete(n.id)}}function Ht(t){const n=(Array.isArray(t)?t:[t]).map(He).filter(Boolean);if(!n.length)return;const r=new Set(n);for(const s of r)re.delete(s);for(let s=ae.length-1;s>=0;s-=1){const g=ae[s].filter(I=>!r.has(I));g.length?ae[s]=g:ae.splice(s,1)}}const Ae=e.shallowRef({enabled:!1,isBackfillActive:!1,isRequestInFlight:!1,page:a.page,next:a.page,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:2e3,pageSize:20,bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}),lt=un({getContent:t=>tt(t,z),markEnterFromLeft:Ee,buffer:_e,stats:Ae,isEnabled:()=>a.mode==="backfill",getPageSize:()=>a.pageSize,getRequestDelayMs:()=>a.backfillRequestDelayMs,getCancelToken:()=>Ce}),Pe=e.computed(()=>a.items!==void 0);e.watch(()=>a.items,t=>{Pe.value&&(Re.value=Array.isArray(t)?t:[])},{immediate:!0});const m=e.computed({get(){return Pe.value?Re.value:nt.value},set(t){Pe.value?(Re.value=t,v("update:items",t)):nt.value=t}}),fe=e.ref(!1),ze=e.ref(!1);async function rt(t){const o=await tt(t,z);return ce(o.items),Ee(o.items),{items:o.items,nextPage:o.nextPage}}function He(t){return t?typeof t=="string"?t:t?.id:null}async function at(t){const n=(Array.isArray(t)?t:[t]).map(He).filter(Boolean);if(!n.length)return;const r=new Set(n),s=[],d=[];for(const C of r){const P=Se.value.get(C);if(P==null)continue;const se=m.value[P];se&&(re.set(C,se),d.push(C),s.push(se))}d.length&&(ae.push(d),ge=!0);const g=Je(),I=we.value,H=O.value+_.value,L=[];for(const C of r){const P=Se.value.get(C);if(P==null)continue;const se=m.value[P];if(!se)continue;const Oe=pe.value[P]??{x:0,y:0},mt=Ve.value[P]??I,Ut=Math.max(Oe.y,H);L.push({id:C,item:se,fromX:Oe.x,fromY:Oe.y,toY:Ut+Math.max(0,mt),width:I,height:mt,leaving:!0})}if(L.length&&(K.value=[...K.value,...L]),m.value=m.value.filter(C=>{const P=C?.id;return!P||!r.has(P)}),await e.nextTick(),Qe(g,r),L.length){const C=new Set(L.map(P=>P.id));ie(()=>{K.value=K.value.map(P=>C.has(P.id)?{...P,leaving:!1}:P),setTimeout(()=>{K.value=K.value.filter(P=>!C.has(P.id))},kt)})}s.length&&v("removed",{items:s,ids:d})}async function Te(t){return at(t)}function Lt(){z+=1,Ce+=1,oe=null,le=null,te.value=!1,ne.value=!1}x({remove:at,restore:At,undo:zt,forget:Ht,loadNextPage:it,cancel:Lt,get pagesLoaded(){return j.value},set pagesLoaded(t){j.value=t},get nextPage(){return V.value},set nextPage(t){V.value=t},get isLoading(){return te.value||ne.value},get hasReachedEnd(){return a.mode!=="backfill"?V.value==null:V.value==null&&_e.value.length===0},get backfillStats(){return Ae.value}});function st(){const t=cn({items:m.value,columnCount:$e.value,columnWidth:we.value,gapX:W.value,gapY:ke.value,headerHeight:q.value,footerHeight:X.value,bucketPx:gt});pe.value=t.positions,Ve.value=t.heights,Ue.value=t.buckets,We.value=t.contentHeight,Se.value=t.indexById}const Dt=e.computed(()=>Math.max(We.value,_.value)+Sn),Le=e.computed(()=>fn({itemCount:m.value.length,viewportHeight:_.value,scrollTop:O.value,overscanPx:a.overscanPx,bucketPx:gt,buckets:Ue.value}));e.watch(Le,t=>{if(!t?.length)return;if(fe.value&&!ze.value){const r=[];for(const s of t){const d=m.value[s];d&&r.push(d)}r.length&&Ee(r),ze.value=!0}const o=[];for(const r of t){const s=m.value[r]?.id;s&&Z.value.has(s)&&(Me.has(s)||(Me.add(s),o.push(s)))}if(!o.length)return;const n=o.length>1?It(a.enterStaggerMs):0;if(n>0){const r=new Map(he.value);for(let s=0;s<o.length;s+=1){const d=o[s],g=Math.min(s*n,Mn);r.set(d,g)}he.value=r}ie(()=>{const r=new Set(ee.value);for(const s of o)r.add(s);ee.value=r}),Tt(()=>{const r=new Set(Z.value);for(const s of o)r.delete(s);Z.value=r,setTimeout(()=>{const s=new Set(ee.value),d=new Map(he.value);for(const g of o)s.delete(g),Me.delete(g),d.delete(g);ee.value=s,he.value=d},wt)})},{flush:"post"});async function it(){if(oe)return oe;if(te.value||ne.value||a.mode!=="backfill"&&V.value==null||a.mode==="backfill"&&V.value==null&&_e.value.length===0)return;const t=z;let o=null;return o=(async()=>{try{if(ne.value=!0,ue.value="",a.mode==="backfill"){const s=await lt.loadBackfillBatch(V.value);if(t!==z)return;s.pages.length&&(j.value=[...j.value,...s.pages]),ce(s.batchItems),m.value=[...m.value,...s.batchItems],V.value=s.nextPage;return}const n=V.value;if(n==null)return;const r=await rt(n);if(t!==z)return;j.value=[...j.value,n],ce(r.items),m.value=[...m.value,...r.items],V.value=r.nextPage}catch(n){if(t!==z||Ze(n))return;ue.value=n instanceof Error?n.message:String(n)}finally{t===z&&(ne.value=!1),oe===o&&(oe=null)}})(),oe=o,o}function $t(){const t=f.value;if(!t)return;const o=t.scrollTop,n=t.clientHeight,r=t.scrollHeight;O.value=o,_.value=n;const s=Ie,d=Fe,g=o>s,I=d>0&&r<d;if(Ie=o,Fe=r,ge){if(!g)return;ge=!1}if(I&&!g)return;r-(o+n)<=a.prefetchThresholdPx&&it()}function ut(){return f.value}function ct(t){B.value=be(t),_.value=t.clientHeight}function Ot(){typeof ResizeObserver>"u"||(J=new ResizeObserver(()=>{const t=ut();t&&ct(t)}))}function Yt(){return{enabled:a.mode==="backfill",isBackfillActive:!1,isRequestInFlight:!1,page:a.page,next:a.page,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:Ye(a.backfillRequestDelayMs),pageSize:St(a.pageSize),bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}}function ft(){z+=1,Ce+=1,oe=null,le=null,Ie=0,Fe=0,ge=!1,Ne=0,re.clear(),ae.length=0,Z.value=new Set,ee.value=new Set,Me.clear(),Be.value=new Map,G.value=new Set,K.value=[],j.value=[],V.value=null,_e.value=[],Ae.value=Yt(),te.value=!0,ne.value=!1,ue.value="",ze.value=!1}function dt(t){ft(),m.value=[],V.value=t}function qt(t){const o=Array.isArray(t)?t:[t],n=[],r=new Set;for(const s of o){if(s==null)continue;const d=typeof s=="string"?`s:${s}`:`n:${String(s)}`;r.has(d)||(r.add(d),n.push(s))}return n}function De(t){ft(),j.value=t?qt(t):[],V.value=a.page,te.value=!1,Ct(m.value),ce(m.value)}async function vt(t){if(le)return le;const o=z;let n=null;return n=(async()=>{try{if(a.mode==="backfill"){const r=await lt.loadBackfillBatch(t);if(o!==z)return;j.value=r.pages.length?r.pages:[t],ce(r.batchItems),m.value=r.batchItems,V.value=r.nextPage}else{const r=await rt(t);if(o!==z)return;j.value=[t],ce(r.items),m.value=r.items,V.value=r.nextPage}}catch(r){if(o!==z||Ze(r))return;ue.value=r instanceof Error?r.message:String(r)}finally{o===z&&(te.value=!1),le===n&&(le=null)}})(),le=n,n}function Xt(){const t=ut();t&&(ct(t),O.value=t.scrollTop,Ie=t.scrollTop,Fe=t.scrollHeight,J?.observe(t))}e.onMounted(async()=>{if(Ot(),Xt(),a.restoredPages!=null){fe.value=!0,De(a.restoredPages);return}if(Pe.value&&m.value.length>0){fe.value=!0,De();return}fe.value=!1,dt(a.page),await vt(a.page)}),e.onUnmounted(()=>{J?.disconnect(),E&&(clearTimeout(E),E=null),M&&(clearTimeout(M),M=null),R(),N()}),e.watch(()=>a.page,async t=>{if(fe.value){V.value=t;return}dt(t),await vt(t)}),e.watch(()=>a.restoredPages,t=>{t&&(fe.value=!0,De(t))}),e.watch(W,()=>{const t=f.value;t&&(B.value=be(t))},{immediate:!1});const $e=e.computed(()=>ln(B.value,a.itemWidth)),we=e.computed(()=>rn(B.value,$e.value,a.itemWidth,W.value));e.watch([$e,we,W,ke,q,X],()=>{st()},{immediate:!0}),e.watch(()=>[m.value,m.value.length],()=>st(),{immediate:!0});const jt=e.computed(()=>["mt-8 flex min-h-0 flex-1 flex-col rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur",b.class]);return(t,o)=>(e.openBlock(),e.createElementBlock("section",e.mergeProps(U.value,{class:jt.value}),[e.createElementVNode("div",dn,[e.renderSlot(t.$slots,"default")]),e.createElementVNode("div",{ref_key:"scrollViewportRef",ref:f,"data-testid":"items-scroll-container",class:"mt-4 min-h-0 flex-1 overflow-auto",style:e.normalizeStyle({paddingRight:W.value+"px"}),onScroll:$t},[te.value?(e.openBlock(),e.createElementBlock("div",vn,o[0]||(o[0]=[e.createElementVNode("div",{class:"inline-flex items-center gap-3 text-sm text-slate-600"},[e.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})]),e.createElementVNode("span",null,"Loading…")],-1)]))):ue.value?(e.openBlock(),e.createElementBlock("p",mn,"Error: "+e.toDisplayString(ue.value),1)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"relative",style:e.normalizeStyle({height:Dt.value+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Le.value,n=>(e.openBlock(),e.createElementBlock("article",{key:m.value[n].id,"data-testid":"item-card",class:"absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:we.value+"px",transition:Nt(m.value[n].id),transitionDelay:Ft(m.value[n].id),transform:Pt(n)})},[Y.value||q.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(Xe.value)},[e.createVNode(e.unref(y),{"slot-fn":de.value,"slot-props":{item:m.value[n],remove:()=>Te(m.value[n])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"group relative",onMouseenter:r=>h(m.value[n].id),onMouseleave:r=>w(m.value[n].id)},[e.createVNode(pt,{item:m.value[n],remove:()=>Te(m.value[n]),"loader-slot-fn":ve.value,"error-slot-fn":k.value,hovered:c.value===m.value[n].id,onSuccess:T,onError:D},null,8,["item","remove","loader-slot-fn","error-slot-fn","hovered"]),me.value?(e.openBlock(),e.createElementBlock("div",hn,[e.createVNode(e.unref(y),{"slot-fn":i.value,"slot-props":{item:m.value[n],remove:()=>Te(m.value[n])}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)],40,pn),xe.value||X.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(je.value)},[e.createVNode(e.unref(y),{"slot-fn":Q.value,"slot-props":{item:m.value[n],remove:()=>Te(m.value[n])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(K.value,n=>(e.openBlock(),e.createElementBlock("article",{key:n.id+":leaving","data-testid":"item-card-leaving",class:"pointer-events-none absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:n.width+"px",transition:"transform "+kt+"ms ease-out",transform:n.leaving?"translate3d("+n.fromX+"px,"+n.fromY+"px,0)":"translate3d("+n.fromX+"px,"+n.toY+"px,0)"})},[Y.value||q.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(Xe.value)},[e.createVNode(e.unref(y),{"slot-fn":de.value,"slot-props":{item:n.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",gn,[e.createVNode(pt,{item:n.item,remove:()=>{},"loader-slot-fn":ve.value,"error-slot-fn":k.value,hovered:!1},null,8,["item","loader-slot-fn","error-slot-fn"]),me.value?(e.openBlock(),e.createElementBlock("div",yn,[e.createVNode(e.unref(y),{"slot-fn":i.value,"slot-props":{item:n.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)]),xe.value||X.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(je.value)},[e.createVNode(e.unref(y),{"slot-fn":Q.value,"slot-props":{item:n.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128))],4)),e.createElementVNode("div",wn,[ne.value?(e.openBlock(),e.createElementBlock("span",kn,o[1]||(o[1]=[e.createElementVNode("svg",{class:"h-4 w-4 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1),e.createElementVNode("span",null,"Loading more…",-1)]))):V.value==null?(e.openBlock(),e.createElementBlock("span",bn,"End of list")):(e.openBlock(),e.createElementBlock("span",xn,"Scroll to load page "+e.toDisplayString(V.value),1))])],36)],16))}}),Bt=e.defineComponent({name:"MasonryItem",setup(l,{slots:x,attrs:u}){const a=e.inject(xt,null);if(!a)return()=>null;const v=u.onPreloaded,b=u.onFailed,y=x.overlay,p=x.default;return a({header:x.header,loader:x.loader,overlay:y??p,error:x.error,footer:x.footer,onPreloaded:typeof v=="function"?v:Array.isArray(v)?c=>{for(const h of v)typeof h=="function"&&h(c)}:void 0,onFailed:typeof b=="function"?b:Array.isArray(b)?c=>{for(const h of b)typeof h=="function"&&h(c)}:void 0}),()=>null}}),In={install(l){l.component("Masonry",Mt),l.component("MasonryItem",Bt),l.component("MasonryVideoControls",qe)}};exports.Masonry=Mt;exports.MasonryItem=Bt;exports.MasonryVideoControls=qe;exports.VibePlugin=In;exports.masonryDefaults=bt;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as xe, ref as v, computed as k, createElementBlock as P, openBlock as _, createElementVNode as N, normalizeStyle as U, watch as Z, onMounted as Ze, onUnmounted as Vt, createCommentVNode as ee, createBlock as Ft, unref as ae, toDisplayString as et, normalizeClass as _t, createVNode as Q, mergeDefaults as fn, useAttrs as dn, shallowRef as Pt, provide as vn, mergeProps as mn, renderSlot as hn, Fragment as Tt, renderList as Et, nextTick as Bt, inject as gn } from "vue";
+import { defineComponent as xe, ref as v, computed as k, createElementBlock as P, openBlock as _, createElementVNode as N, normalizeStyle as W, watch as Z, onMounted as Ze, onUnmounted as Vt, createCommentVNode as ee, createBlock as Ft, unref as ae, toDisplayString as et, normalizeClass as _t, createVNode as Q, mergeDefaults as fn, useAttrs as dn, shallowRef as Pt, provide as vn, mergeProps as mn, renderSlot as hn, Fragment as Tt, renderList as Et, nextTick as Bt, inject as gn } from "vue";
 const pn = {
   mode: "default",
   pageSize: 20,
@@ -23,7 +23,7 @@ const pn = {
   },
   emits: ["seek"],
   setup(o, { expose: M, emit: i }) {
-    const a = o, d = i, b = v(null), y = v(null), h = v(null), u = v(!1), g = k(
+    const a = o, d = i, x = v(null), y = v(null), h = v(null), u = v(!1), g = k(
       () => Number.isFinite(a.step) ? Math.max(0, a.step) : 0
     ), w = k(
       () => Number.isFinite(a.duration) ? Math.max(0, a.duration) : 0
@@ -89,7 +89,7 @@ const pn = {
       c.preventDefault(), z(R);
     }
     function te() {
-      b.value?.focus();
+      x.value?.focus();
     }
     return M({
       focus: te,
@@ -98,12 +98,12 @@ const pn = {
       currentValue: S,
       maxValue: w,
       isDragging: u,
-      rootEl: b,
+      rootEl: x,
       trackEl: y,
       thumbEl: h
     }), (c, F) => (_(), P("div", {
       ref_key: "rootEl",
-      ref: b,
+      ref: x,
       class: "w-full select-none",
       role: "slider",
       tabindex: "0",
@@ -125,13 +125,13 @@ const pn = {
       }, [
         N("div", {
           class: "absolute inset-y-0 left-0 rounded-full bg-slate-500",
-          style: U({ width: `${B.value * 100}%` })
+          style: W({ width: `${B.value * 100}%` })
         }, null, 4),
         N("div", {
           ref_key: "thumbEl",
           ref: h,
           class: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-700 shadow",
-          style: U({ left: `${B.value * 100}%` }),
+          style: W({ left: `${B.value * 100}%` }),
           "aria-hidden": "true"
         }, null, 4)
       ], 544)
@@ -181,29 +181,29 @@ const pn = {
       },
       setup(s) {
         return () => {
-          const x = s.slotFn;
-          return x ? x(s.slotProps) : null;
+          const b = s.slotFn;
+          return b ? b(s.slotProps) : null;
         };
       }
-    }), b = v(null), y = v(null), h = v(null), u = v(!1), g = v(!1), w = v(!1), S = v(null), B = k(() => i.item?.type === "video"), T = k(() => {
+    }), x = v(null), y = v(null), h = v(null), u = v(!1), g = v(!1), w = v(!1), S = v(null), B = k(() => i.item?.type === "video"), T = k(() => {
       if (!B.value) return;
-      const s = i.item?.preview, x = i.item?.original;
-      if (!(typeof s != "string" || !s) && !(typeof x == "string" && s === x) && !/\.(mp4|webm)(\?|#|$)/i.test(s) && /\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(s))
+      const s = i.item?.preview, b = i.item?.original;
+      if (!(typeof s != "string" || !s) && !(typeof b == "string" && s === b) && !/\.(mp4|webm)(\?|#|$)/i.test(s) && /\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(s))
         return s;
     }), I = k(() => {
       if (!B.value) return;
       const s = i.item?.preview;
       if (typeof s == "string" && s && !/\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(s))
         return s;
-      const x = i.item?.original;
-      if (typeof x == "string" && x) return x;
+      const b = i.item?.original;
+      if (typeof b == "string" && b) return b;
     }), z = v(!1), A = k(() => !!i.hovered), X = v(0), $ = v(0);
     function H() {
       i.remove?.();
     }
     const q = k(() => {
-      const s = i.item?.width, x = i.item?.height;
-      return { aspectRatio: `${s} / ${x}` };
+      const s = i.item?.width, b = i.item?.height;
+      return { aspectRatio: `${s} / ${b}` };
     }), te = k(() => !B.value);
     let c = null, F = null;
     function R() {
@@ -240,8 +240,8 @@ const pn = {
       }
     );
     function Be(s) {
-      const x = h.value;
-      x && Number.isFinite(s) && (x.currentTime = Math.max(0, Math.min(s, Number.isFinite(x.duration) ? x.duration : s)), j(x));
+      const b = h.value;
+      b && Number.isFinite(s) && (b.currentTime = Math.max(0, Math.min(s, Number.isFinite(b.duration) ? b.duration : s)), j(b));
     }
     Ze(() => {
       if (typeof IntersectionObserver > "u") {
@@ -250,19 +250,19 @@ const pn = {
       }
       if (c = new IntersectionObserver(
         (s) => {
-          for (const x of s)
-            if (x.isIntersecting && !((x.intersectionRatio ?? 0) < 0.5)) {
+          for (const b of s)
+            if (b.isIntersecting && !((b.intersectionRatio ?? 0) < 0.5)) {
               R(), c?.disconnect(), c = null;
               return;
             }
         },
         { threshold: [0, 0.5, 1] }
-      ), b.value && c.observe(b.value), B.value && b.value) {
-        const s = b.value.closest('[data-testid="items-scroll-container"]');
+      ), x.value && c.observe(x.value), B.value && x.value) {
+        const s = x.value.closest('[data-testid="items-scroll-container"]');
         F = new IntersectionObserver(
-          (x) => {
-            for (const J of x) {
-              const Re = J.intersectionRatio ?? 0, Se = !!J.isIntersecting && Re >= 0.5;
+          (b) => {
+            for (const U of b) {
+              const Re = U.intersectionRatio ?? 0, Se = !!U.isIntersecting && Re >= 0.5;
               z.value = Se, Se ? A.value && re() : Ee();
             }
           },
@@ -270,12 +270,12 @@ const pn = {
             root: s ?? void 0,
             threshold: [0, 0.25, 0.5, 0.75, 1]
           }
-        ), F.observe(b.value);
+        ), F.observe(x.value);
       }
     }), Vt(() => {
       c?.disconnect(), c = null, F?.disconnect(), F = null;
     });
-    function W() {
+    function G() {
       g.value || (g.value = !0, w.value = !1, S.value = null, a("success", i.item));
     }
     function K(s) {
@@ -286,7 +286,7 @@ const pn = {
         if (te.value) {
           const s = y.value;
           if (!s || !s.complete) return;
-          s.naturalWidth > 0 && W();
+          s.naturalWidth > 0 && G();
           return;
         }
         if (B.value) {
@@ -303,7 +303,7 @@ const pn = {
       { flush: "post" }
     );
     function Me() {
-      W();
+      G();
       const s = h.value;
       s && j(s), re();
     }
@@ -311,18 +311,18 @@ const pn = {
       const s = h.value;
       s && j(s);
     }
-    return (s, x) => (_(), P("div", {
+    return (s, b) => (_(), P("div", {
       ref_key: "rootEl",
-      ref: b,
+      ref: x,
       class: "relative bg-slate-100",
-      style: U(q.value)
+      style: W(q.value)
     }, [
       u.value && !g.value && !w.value ? (_(), P("div", wn, [
         i.loaderSlotFn ? (_(), Ft(ae(d), {
           key: 0,
           "slot-fn": i.loaderSlotFn,
           "slot-props": { item: i.item, remove: H }
-        }, null, 8, ["slot-fn", "slot-props"])) : (_(), P("svg", bn, x[2] || (x[2] = [
+        }, null, 8, ["slot-fn", "slot-props"])) : (_(), P("svg", bn, b[3] || (b[3] = [
           N("circle", {
             class: "opacity-25",
             cx: "12",
@@ -360,8 +360,8 @@ const pn = {
         height: i.item.height,
         loading: "lazy",
         alt: i.item.id,
-        onLoad: W,
-        onError: x[0] || (x[0] = (J) => K(J))
+        onLoad: G,
+        onError: b[0] || (b[0] = (U) => K(U))
       }, null, 42, Sn)) : u.value && !w.value ? (_(), P("video", {
         key: i.item.id + ":vid",
         class: _t([
@@ -378,12 +378,13 @@ const pn = {
         onTimeupdate: se,
         onDurationchange: se,
         onLoadeddata: se,
-        onError: x[1] || (x[1] = (J) => K(J))
+        onError: b[2] || (b[2] = (U) => K(U))
       }, [
         N("source", {
           src: I.value,
-          type: "video/mp4"
-        }, null, 8, Fn)
+          type: "video/mp4",
+          onError: b[1] || (b[1] = (U) => K(U))
+        }, null, 40, Fn)
       ], 42, In)) : ee("", !0),
       u.value && B.value && !w.value ? (_(), P("div", _n, [
         Q(zt, {
@@ -400,7 +401,7 @@ function Pn(o, M) {
 }
 function Tn(o, M, i, a = 0) {
   if (!o || o <= 0 || !M || M <= 0) return i;
-  const d = typeof a == "number" && a > 0 ? a : 0, b = Math.max(0, M - 1) * d, y = o - b;
+  const d = typeof a == "number" && a > 0 ? a : 0, x = Math.max(0, M - 1) * d, y = o - x;
   return !y || y <= 0 ? i : y / M;
 }
 function En(o, M) {
@@ -426,10 +427,10 @@ function Rn(o) {
       cooldownMsTotal: d,
       cooldownMsRemaining: d
     };
-    const b = Date.now(), y = 100;
+    const x = Date.now(), y = 100;
     await new Promise((h) => {
       const u = setInterval(() => {
-        const g = Date.now() - b, w = Math.max(0, d - g);
+        const g = Date.now() - x, w = Math.max(0, d - g);
         o.stats.value = {
           ...o.stats.value,
           cooldownMsTotal: d,
@@ -439,13 +440,13 @@ function Rn(o) {
     });
   }
   async function i(a) {
-    const d = Dt(o.getPageSize()), b = o.isEnabled(), y = tt(o.getRequestDelayMs()), h = o.stats.value.page ?? null, u = o.getCancelToken?.() ?? null, g = () => u !== null && o.getCancelToken && o.getCancelToken() !== u, w = () => {
+    const d = Dt(o.getPageSize()), x = o.isEnabled(), y = tt(o.getRequestDelayMs()), h = o.stats.value.page ?? null, u = o.getCancelToken?.() ?? null, g = () => u !== null && o.getCancelToken && o.getCancelToken() !== u, w = () => {
       if (g()) throw Bn();
     }, S = [];
     let B = 0;
     o.buffer.value.length && (B = o.buffer.value.length, S.push(...o.buffer.value), o.buffer.value = []), o.stats.value = {
       ...o.stats.value,
-      enabled: b,
+      enabled: x,
       isBackfillActive: !1,
       isRequestInFlight: !1,
       page: h ?? a,
@@ -466,7 +467,7 @@ function Rn(o) {
       const H = I;
       A && (o.stats.value = {
         ...o.stats.value,
-        enabled: b,
+        enabled: x,
         isBackfillActive: !0,
         isRequestInFlight: !0,
         page: H,
@@ -482,14 +483,14 @@ function Rn(o) {
       const q = await o.getContent(H);
       w(), T.push(H), A && (o.stats.value = {
         ...o.stats.value,
-        enabled: b,
+        enabled: x,
         isBackfillActive: !0,
         isRequestInFlight: !1,
         page: H,
         next: q.nextPage
       }), z += q.items.length, o.markEnterFromLeft(q.items), S.push(...q.items), I = q.nextPage, !A && S.length < d && I != null ? (A = !0, o.stats.value = {
         ...o.stats.value,
-        enabled: b,
+        enabled: x,
         isBackfillActive: !0,
         isRequestInFlight: !1,
         page: H,
@@ -503,7 +504,7 @@ function Rn(o) {
         pageSize: d
       }) : A && (o.stats.value = {
         ...o.stats.value,
-        enabled: b,
+        enabled: x,
         isBackfillActive: !0,
         page: H,
         next: I,
@@ -516,7 +517,7 @@ function Rn(o) {
     const X = S.slice(0, d), $ = S.slice(d);
     return o.buffer.value = $, o.stats.value = {
       ...o.stats.value,
-      enabled: b,
+      enabled: x,
       isBackfillActive: !1,
       isRequestInFlight: !1,
       page: T.length ? T[T.length - 1] : h ?? a,
@@ -547,7 +548,7 @@ function Rn(o) {
   return { loadBackfillBatch: i };
 }
 function An(o) {
-  const M = o.columnCount, i = o.columnWidth, a = o.gapX, d = o.gapY, b = o.headerHeight, y = o.footerHeight, h = o.bucketPx, u = Array.from({ length: M }, () => 0), g = new Array(o.items.length), w = new Array(o.items.length), S = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
+  const M = o.columnCount, i = o.columnWidth, a = o.gapX, d = o.gapY, x = o.headerHeight, y = o.footerHeight, h = o.bucketPx, u = Array.from({ length: M }, () => 0), g = new Array(o.items.length), w = new Array(o.items.length), S = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
   let T = 0;
   for (let I = 0; I < o.items.length; I += 1) {
     const z = o.items[I];
@@ -555,7 +556,7 @@ function An(o) {
     let A = 0;
     for (let c = 1; c < u.length; c += 1)
       u[c] < u[A] && (A = c);
-    const X = A * (i + a), $ = u[A], H = En(z, i) + b + y;
+    const X = A * (i + a), $ = u[A], H = En(z, i) + x + y;
     g[I] = { x: X, y: $ }, w[I] = H, u[A] = $ + H + d, T = Math.max(T, $ + H);
     const q = Math.floor($ / h), te = Math.floor(($ + H) / h);
     for (let c = q; c <= te; c += 1) {
@@ -569,8 +570,8 @@ function Cn(o) {
   const M = o.itemCount;
   if (!M) return [];
   if (o.viewportHeight <= 0) return Array.from({ length: M }, (u, g) => g);
-  const i = Math.max(0, o.scrollTop - o.overscanPx), a = o.scrollTop + o.viewportHeight + o.overscanPx, d = Math.floor(i / o.bucketPx), b = Math.floor(a / o.bucketPx), y = /* @__PURE__ */ new Set();
-  for (let u = d; u <= b; u += 1) {
+  const i = Math.max(0, o.scrollTop - o.overscanPx), a = o.scrollTop + o.viewportHeight + o.overscanPx, d = Math.floor(i / o.bucketPx), x = Math.floor(a / o.bucketPx), y = /* @__PURE__ */ new Set();
+  for (let u = d; u <= x; u += 1) {
     const g = o.buckets.get(u);
     if (g)
       for (const w of g) y.add(w);
@@ -615,7 +616,7 @@ const Nn = { class: "hidden" }, Hn = {
   }, pn),
   emits: ["update:items", "preloaded", "failures", "removed"],
   setup(o, { expose: M, emit: i }) {
-    const a = o, d = i, b = dn(), y = xe({
+    const a = o, d = i, x = dn(), y = xe({
       name: "SlotRenderer",
       props: {
         slotFn: {
@@ -676,7 +677,7 @@ const Nn = { class: "hidden" }, Hn = {
         throw new Error("[Masonry] Missing <MasonryItem> definition. Add <MasonryItem> as a child of <Masonry>.");
     });
     const te = k(() => {
-      const { class: e, ...n } = b;
+      const { class: e, ...n } = x;
       return n;
     }), c = v(null), F = v(0), R = v(0), j = v(0);
     let re;
@@ -686,8 +687,8 @@ const Nn = { class: "hidden" }, Hn = {
       const n = Math.max(0, ne.value);
       return Math.max(0, e.clientWidth - n);
     }
-    const W = k(() => a.headerHeight), K = k(() => a.footerHeight), ke = k(() => h.value?.header), Me = k(() => h.value?.loader), se = k(() => h.value?.footer), s = k(() => h.value?.overlay), x = k(() => h.value?.error), J = k(() => !!ke.value), Re = k(() => !!se.value), Se = k(() => !!s.value), nt = k(() => {
-      if (W.value > 0) return { height: `${W.value}px` };
+    const G = k(() => a.headerHeight), K = k(() => a.footerHeight), ke = k(() => h.value?.header), Me = k(() => h.value?.loader), se = k(() => h.value?.footer), s = k(() => h.value?.overlay), b = k(() => h.value?.error), U = k(() => !!ke.value), Re = k(() => !!se.value), Se = k(() => !!s.value), nt = k(() => {
+      if (G.value > 0) return { height: `${G.value}px` };
     }), ot = k(() => {
       if (K.value > 0) return { height: `${K.value}px` };
     }), Ie = v([]), Ye = v([]), lt = v(/* @__PURE__ */ new Map()), at = v(0), Ae = v(/* @__PURE__ */ new Map());
@@ -809,7 +810,7 @@ const Nn = { class: "hidden" }, Hn = {
         }
       }
     }
-    const G = v([]), vt = v([]), Xe = v([]), L = v(a.page), ze = v([]);
+    const J = v([]), vt = v([]), Xe = v([]), L = v(a.page), ze = v([]);
     let de = null, ve = null, $e = 0;
     function Kt(e) {
       let n = -1;
@@ -1012,10 +1013,10 @@ const Nn = { class: "hidden" }, Hn = {
       loadNextPage: wt,
       cancel: tn,
       get pagesLoaded() {
-        return G.value;
+        return J.value;
       },
       set pagesLoaded(e) {
-        G.value = e;
+        J.value = e;
       },
       get nextPage() {
         return L.value;
@@ -1040,7 +1041,7 @@ const Nn = { class: "hidden" }, Hn = {
         columnWidth: Te.value,
         gapX: ne.value,
         gapY: Ee.value,
-        headerHeight: W.value,
+        headerHeight: G.value,
         footerHeight: K.value,
         bucketPx: Ct
       });
@@ -1109,14 +1110,14 @@ const Nn = { class: "hidden" }, Hn = {
           if (fe.value = !0, ye.value = "", a.mode === "backfill") {
             const r = await ht.loadBackfillBatch(L.value);
             if (e !== D) return;
-            r.pages.length && (G.value = [...G.value, ...r.pages]), we(r.batchItems), m.value = [...m.value, ...r.batchItems], L.value = r.nextPage;
+            r.pages.length && (J.value = [...J.value, ...r.pages]), we(r.batchItems), m.value = [...m.value, ...r.batchItems], L.value = r.nextPage;
             return;
           }
           const t = L.value;
           if (t == null) return;
           const l = await gt(t);
           if (e !== D) return;
-          G.value = [...G.value, t], we(l.items), m.value = [...m.value, ...l.items], L.value = l.nextPage;
+          J.value = [...J.value, t], we(l.items), m.value = [...m.value, ...l.items], L.value = l.nextPage;
         } catch (t) {
           if (e !== D || ct(t)) return;
           ye.value = t instanceof Error ? t.message : String(t);
@@ -1173,7 +1174,7 @@ const Nn = { class: "hidden" }, Hn = {
       };
     }
     function kt() {
-      D += 1, qe += 1, de = null, ve = null, Le = 0, Ve = 0, _e = !1, $e = 0, me.clear(), he.length = 0, ie.value = /* @__PURE__ */ new Set(), ue.value = /* @__PURE__ */ new Set(), Ce.clear(), Ne.value = /* @__PURE__ */ new Map(), oe.value = /* @__PURE__ */ new Set(), le.value = [], G.value = [], L.value = null, ze.value = [], je.value = an(), ce.value = !0, fe.value = !1, ye.value = "", Ue.value = !1;
+      D += 1, qe += 1, de = null, ve = null, Le = 0, Ve = 0, _e = !1, $e = 0, me.clear(), he.length = 0, ie.value = /* @__PURE__ */ new Set(), ue.value = /* @__PURE__ */ new Set(), Ce.clear(), Ne.value = /* @__PURE__ */ new Map(), oe.value = /* @__PURE__ */ new Set(), le.value = [], J.value = [], L.value = null, ze.value = [], je.value = an(), ce.value = !0, fe.value = !1, ye.value = "", Ue.value = !1;
     }
     function Mt(e) {
       kt(), m.value = [], L.value = e;
@@ -1188,7 +1189,7 @@ const Nn = { class: "hidden" }, Hn = {
       return t;
     }
     function Ke(e) {
-      kt(), G.value = e ? rn(e) : [], L.value = a.page, ce.value = !1, Kt(m.value), we(m.value);
+      kt(), J.value = e ? rn(e) : [], L.value = a.page, ce.value = !1, Kt(m.value), we(m.value);
     }
     async function St(e) {
       if (ve) return ve;
@@ -1199,11 +1200,11 @@ const Nn = { class: "hidden" }, Hn = {
           if (a.mode === "backfill") {
             const l = await ht.loadBackfillBatch(e);
             if (n !== D) return;
-            G.value = l.pages.length ? l.pages : [e], we(l.batchItems), m.value = l.batchItems, L.value = l.nextPage;
+            J.value = l.pages.length ? l.pages : [e], we(l.batchItems), m.value = l.batchItems, L.value = l.nextPage;
           } else {
             const l = await gt(e);
             if (n !== D) return;
-            G.value = [e], we(l.items), m.value = l.items, L.value = l.nextPage;
+            J.value = [e], we(l.items), m.value = l.items, L.value = l.nextPage;
           }
         } catch (l) {
           if (n !== D || ct(l)) return;
@@ -1255,7 +1256,7 @@ const Nn = { class: "hidden" }, Hn = {
       () => Tn(F.value, Je.value, a.itemWidth, ne.value)
     );
     Z(
-      [Je, Te, ne, Ee, W, K],
+      [Je, Te, ne, Ee, G, K],
       () => {
         yt();
       },
@@ -1271,7 +1272,7 @@ const Nn = { class: "hidden" }, Hn = {
     );
     const un = k(() => [
       "mt-8 flex min-h-0 flex-1 flex-col rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur",
-      b.class
+      x.class
     ]);
     return (e, n) => (_(), P("section", mn(te.value, { class: un.value }), [
       N("div", Nn, [
@@ -1282,7 +1283,7 @@ const Nn = { class: "hidden" }, Hn = {
         ref: c,
         "data-testid": "items-scroll-container",
         class: "mt-4 min-h-0 flex-1 overflow-auto",
-        style: U({ paddingRight: ne.value + "px" }),
+        style: W({ paddingRight: ne.value + "px" }),
         onScroll: on
       }, [
         ce.value ? (_(), P("div", Hn, n[0] || (n[0] = [
@@ -1312,24 +1313,24 @@ const Nn = { class: "hidden" }, Hn = {
         ]))) : ye.value ? (_(), P("p", Ln, "Error: " + et(ye.value), 1)) : (_(), P("div", {
           key: 2,
           class: "relative",
-          style: U({ height: nn.value + "px" })
+          style: W({ height: nn.value + "px" })
         }, [
           (_(!0), P(Tt, null, Et(Ge.value, (t) => (_(), P("article", {
             key: m.value[t].id,
             "data-testid": "item-card",
             class: "absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",
-            style: U({
+            style: W({
               width: Te.value + "px",
               transition: jt(m.value[t].id),
               transitionDelay: qt(m.value[t].id),
               transform: Ut(t)
             })
           }, [
-            J.value || W.value > 0 ? (_(), P("div", {
+            U.value || G.value > 0 ? (_(), P("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: U(nt.value)
+              style: W(nt.value)
             }, [
               Q(ae(y), {
                 "slot-fn": ke.value,
@@ -1345,7 +1346,7 @@ const Nn = { class: "hidden" }, Hn = {
                 item: m.value[t],
                 remove: () => Oe(m.value[t]),
                 "loader-slot-fn": Me.value,
-                "error-slot-fn": x.value,
+                "error-slot-fn": b.value,
                 hovered: u.value === m.value[t].id,
                 onSuccess: H,
                 onError: q
@@ -1361,7 +1362,7 @@ const Nn = { class: "hidden" }, Hn = {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: U(ot.value)
+              style: W(ot.value)
             }, [
               Q(ae(y), {
                 "slot-fn": se.value,
@@ -1373,17 +1374,17 @@ const Nn = { class: "hidden" }, Hn = {
             key: t.id + ":leaving",
             "data-testid": "item-card-leaving",
             class: "pointer-events-none absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",
-            style: U({
+            style: W({
               width: t.width + "px",
               transition: "transform " + Lt + "ms ease-out",
               transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + t.toY + "px,0)"
             })
           }, [
-            J.value || W.value > 0 ? (_(), P("div", {
+            U.value || G.value > 0 ? (_(), P("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: U(nt.value)
+              style: W(nt.value)
             }, [
               Q(ae(y), {
                 "slot-fn": ke.value,
@@ -1397,7 +1398,7 @@ const Nn = { class: "hidden" }, Hn = {
                 remove: () => {
                 },
                 "loader-slot-fn": Me.value,
-                "error-slot-fn": x.value,
+                "error-slot-fn": b.value,
                 hovered: !1
               }, null, 8, ["item", "loader-slot-fn", "error-slot-fn"]),
               Se.value ? (_(), P("div", Dn, [
@@ -1412,7 +1413,7 @@ const Nn = { class: "hidden" }, Hn = {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: U(ot.value)
+              style: W(ot.value)
             }, [
               Q(ae(y), {
                 "slot-fn": se.value,
@@ -1456,7 +1457,7 @@ const Nn = { class: "hidden" }, Hn = {
     const a = gn($t, null);
     if (!a)
       return () => null;
-    const d = i.onPreloaded, b = i.onFailed, y = M.overlay, h = M.default;
+    const d = i.onPreloaded, x = i.onFailed, y = M.overlay, h = M.default;
     return a({
       header: M.header,
       loader: M.loader,
@@ -1467,8 +1468,8 @@ const Nn = { class: "hidden" }, Hn = {
         for (const g of d)
           typeof g == "function" && g(u);
       } : void 0,
-      onFailed: typeof b == "function" ? b : Array.isArray(b) ? (u) => {
-        for (const g of b)
+      onFailed: typeof x == "function" ? x : Array.isArray(x) ? (u) => {
+        for (const g of x)
           typeof g == "function" && g(u);
       } : void 0
     }), () => null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.",
   "keywords": [
     "vue",