@wyxos/vibe 2.0.1 → 2.0.2

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),ze={mode:"default",pageSize:20,backfillRequestDelayMs:2e3,page:1,itemWidth:300,prefetchThresholdPx:200,gapX:16,gapY:16,headerHeight:0,footerHeight:0,overscanPx:600};function Ge(l,y){return!l||l<=0||!y||y<=0?1:Math.max(1,Math.floor(l/y))}function Ke(l,y,B,o=0){if(!l||l<=0||!y||y<=0)return B;const i=typeof o=="number"&&o>0?o:0,b=Math.max(0,y-1)*i,w=l-b;return!w||w<=0?B:w/y}function Je(l,y){const B=l?.width,o=l?.height;return typeof B=="number"&&typeof o=="number"&&B>0&&o>0?o/B*y:y}function He(l){return Number.isFinite(l)&&l>0?Math.floor(l):1}function fe(l){return Number.isFinite(l)&&l>0?Math.floor(l):0}function Qe(l){async function y(o){const i=fe(o);if(i<=0)return;l.stats.value={...l.stats.value,cooldownMsTotal:i,cooldownMsRemaining:i};const b=Date.now(),w=100;await new Promise(h=>{const m=setInterval(()=>{const g=Date.now()-b,k=Math.max(0,i-g);l.stats.value={...l.stats.value,cooldownMsTotal:i,cooldownMsRemaining:k},k<=0&&(clearInterval(m),h())},w)})}async function B(o){const i=He(l.getPageSize()),b=l.isEnabled(),w=fe(l.getRequestDelayMs()),h=[];let m=0;l.buffer.value.length&&(m=l.buffer.value.length,h.push(...l.buffer.value),l.buffer.value=[]),l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,cooldownMsTotal:w,cooldownMsRemaining:0,progress:{collected:0,target:0},pageSize:i,bufferSize:0};const g=[];let k=o,F=0,I=!1;for(;h.length<i&&k!=null;){const N=k;I&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!0,requestPage:N,progress:{collected:Math.min(h.length,i),target:i},cooldownMsTotal:w,cooldownMsRemaining:0,pageSize:i});const x=await l.getContent(N);g.push(N),I&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null}),F+=x.items.length,l.markEnterFromLeft(x.items),h.push(...x.items),k=x.nextPage,!I&&h.length<i&&k!=null?(I=!0,l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null,progress:{collected:Math.min(h.length,i),target:i},cooldownMsTotal:w,cooldownMsRemaining:0,pageSize:i}):I&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,progress:{collected:Math.min(h.length,i),target:i}}),I&&h.length<i&&k!=null&&await y(w)}const E=h.slice(0,i),S=h.slice(i);return l.buffer.value=S,l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsTotal:w,cooldownMsRemaining:0,pageSize:i,bufferSize:S.length,lastBatch:{startPage:o,pages:g,usedFromBuffer:m,fetchedFromNetwork:F,collectedTotal:h.length,emitted:E.length,carried:S.length},totals:{pagesFetched:l.stats.value.totals.pagesFetched+g.length,itemsFetchedFromNetwork:l.stats.value.totals.itemsFetchedFromNetwork+F}},{batchItems:E,pages:g,nextPage:k}}return{loadBackfillBatch:B}}function Ze(l){const y=l.columnCount,B=l.columnWidth,o=l.gapX,i=l.gapY,b=l.headerHeight,w=l.footerHeight,h=l.bucketPx,m=Array.from({length:y},()=>0),g=new Array(l.items.length),k=new Array(l.items.length),F=new Map,I=new Map;let E=0;for(let S=0;S<l.items.length;S+=1){const N=l.items[S];N?.id&&I.set(N.id,S);let x=0;for(let M=1;M<m.length;M+=1)m[M]<m[x]&&(x=M);const z=x*(B+o),H=m[x],C=Je(N,B)+b+w;g[S]={x:z,y:H},k[S]=C,m[x]=H+C+i,E=Math.max(E,H+C);const G=Math.floor(H/h),K=Math.floor((H+C)/h);for(let M=G;M<=K;M+=1){const A=F.get(M);A?A.push(S):F.set(M,[S])}}return{positions:g,heights:k,buckets:F,contentHeight:E,indexById:I}}function et(l){const y=l.itemCount;if(!y)return[];if(l.viewportHeight<=0)return Array.from({length:y},(m,g)=>g);const B=Math.max(0,l.scrollTop-l.overscanPx),o=l.scrollTop+l.viewportHeight+l.overscanPx,i=Math.floor(B/l.bucketPx),b=Math.floor(o/l.bucketPx),w=new Set;for(let m=i;m<=b;m+=1){const g=l.buckets.get(m);if(g)for(const k of g)w.add(k)}const h=Array.from(w);return h.sort((m,g)=>m-g),h}const tt={key:0,class:"flex h-full items-center justify-center"},nt={key:1,class:"text-sm font-medium text-red-700"},lt=["src","width","height","alt"],at=["poster"],ot=["src"],st=["src","width","height","alt"],rt=["poster"],it=["src"],ct={class:"mt-4 pb-2 text-center text-xs text-slate-600"},ut={key:0,class:"inline-flex items-center justify-center gap-2"},ft={key:1},dt={key:2},mt=200,Ne=600,U=300,Ce=e.defineComponent({inheritAttrs:!1,__name:"Masonry",props:e.mergeDefaults({getContent:{},mode:{},pageSize:{},backfillRequestDelayMs:{},items:{},page:{},itemWidth:{},prefetchThresholdPx:{},gapX:{},gapY:{},headerHeight:{},footerHeight:{},overscanPx:{}},ze),emits:["update:items"],setup(l,{expose:y,emit:B}){const o=l,i=B,b=e.useAttrs(),w=e.useSlots(),h=e.computed(()=>{const{class:t,...a}=b;return a}),m=e.ref(null),g=e.ref(0),k=e.ref(0),F=e.ref(0);let I;const E=e.computed(()=>o.gapX),S=e.computed(()=>o.gapY);function N(t){if(!t)return 0;const a=Math.max(0,E.value);return Math.max(0,t.clientWidth-a)}const x=e.computed(()=>o.headerHeight),z=e.computed(()=>o.footerHeight),H=e.computed(()=>!!w.itemHeader),C=e.computed(()=>!!w.itemFooter),G=e.computed(()=>{if(x.value>0)return{height:`${x.value}px`}}),K=e.computed(()=>{if(z.value>0)return{height:`${z.value}px`}}),M=e.ref([]),A=e.ref([]),de=e.ref(new Map),me=e.ref(0),J=e.ref(new Map),q=e.ref(new Set),O=e.ref(new Set),ee=new Set,te=e.ref(new Map),R=e.ref(new Set),V=e.ref([]);function Re(t){const a=te.value.get(t);return a||{dx:0,dy:0}}function Ve(t){return O.value.has(t)||R.value.has(t)?`transform ${U}ms ease-out`:void 0}function _e(t){const n=r.value[t]?.id,s=M.value[t]??{x:0,y:0},c=A.value[t]??0,v=c>0?c:j.value,p=s.x,d=n&&q.value.has(n)?s.y-v:s.y,f=n?Re(n):{dx:0,dy:0};return`translate3d(${p+f.dx}px,${d+f.dy}px,0)`}function L(t){(typeof requestAnimationFrame=="function"?requestAnimationFrame:n=>setTimeout(()=>n(0),0))(()=>t())}function Ae(t){L(()=>L(t))}function ne(t){if(!Array.isArray(t)||t.length===0)return;const a=new Set(q.value);let n=!1;for(const s of t){const c=s?.id;c&&(a.has(c)||(a.add(c),n=!0))}n&&(q.value=a)}function ve(){const t=new Map;for(const a of ce.value){const s=r.value[a]?.id;if(!s)continue;const c=M.value[a];c&&t.set(s,{x:c.x,y:c.y})}return t}function he(t,a){if(!t.size)return;const n=new Map,s=[];for(const[v,p]of t.entries()){if(a?.has(v))continue;const d=J.value.get(v);if(d==null)continue;const f=M.value[d];if(!f)continue;const u=p.x-f.x,P=p.y-f.y;(u||P)&&(n.set(v,{dx:u,dy:P}),s.push(v))}if(!n.size)return;te.value=n;const c=new Set(R.value);for(const v of s)c.delete(v);R.value=c,L(()=>{R.value=new Set([...R.value,...s]),L(()=>{te.value=new Map})}),setTimeout(()=>{const v=new Set(R.value);for(const p of s)v.delete(p);R.value=v},U)}const Q=e.ref(!0),X=e.ref(!1),D=e.ref(""),_=e.ref([]),ge=e.ref([]),le=e.ref([]),T=e.ref(o.page),ae=e.ref([]);let oe=0;function $(t){for(const a of t)!a||typeof a!="object"||a.id&&a.originalIndex==null&&(a.originalIndex=oe,oe+=1)}const Y=new Map,se=[];function Z(t){return typeof t=="number"&&Number.isFinite(t)}function qe(t,a){if(!a.length)return t;const n=new Set;for(const p of t){const d=p?.id;d&&n.add(d)}const s=[];for(const p of a){const d=p?.id;d&&(n.has(d)||(s.push(p),n.add(d)))}if(!s.length)return t;const c=s.slice().sort((p,d)=>{const f=Z(p.originalIndex)?p.originalIndex:Number.POSITIVE_INFINITY,u=Z(d.originalIndex)?d.originalIndex:Number.POSITIVE_INFINITY;return f-u}),v=t.slice();for(const p of c){const d=p.originalIndex;if(!Z(d)){v.push(p);continue}let f=0,u=v.length;for(;f<u;){const P=f+u>>1,W=v[P]?.originalIndex;(Z(W)?W:Number.POSITIVE_INFINITY)<=d?f=P+1:u=P}v.splice(f,0,p)}return v}async function pe(t){if(!t.length)return;ne(t);const a=ve();r.value=qe(r.value,t),await e.nextTick(),he(a)}async function ye(t){const n=(Array.isArray(t)?t:[t]).map(xe).filter(Boolean);if(!n.length)return;const s=[];for(const c of n){const v=Y.get(c);v&&s.push(v)}if(s.length){await pe(s);for(const c of s)c?.id&&Y.delete(c.id)}}async function we(){const t=se.pop();if(!t?.length)return;const a=[];for(const n of t){const s=Y.get(n);s&&a.push(s)}if(a.length){await pe(a);for(const n of a)n?.id&&Y.delete(n.id)}}async function Le(t){return ye(t)}async function De(){return we()}const re=e.shallowRef({enabled:!1,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:2e3,pageSize:20,bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}),ke=Qe({getContent:t=>o.getContent(t),markEnterFromLeft:ne,buffer:ae,stats:re,isEnabled:()=>o.mode==="backfill",getPageSize:()=>o.pageSize,getRequestDelayMs:()=>o.backfillRequestDelayMs}),ie=e.computed(()=>o.items!==void 0);e.watch(()=>o.items,t=>{ie.value&&(le.value=Array.isArray(t)?t:[])},{immediate:!0});const r=e.computed({get(){return ie.value?le.value:ge.value},set(t){ie.value?(le.value=t,i("update:items",t)):ge.value=t}});async function be(t){const a=await o.getContent(t);return $(a.items),ne(a.items),{items:a.items,nextPage:a.nextPage}}function xe(t){return t?typeof t=="string"?t:t?.id:null}async function Be(t){const n=(Array.isArray(t)?t:[t]).map(xe).filter(Boolean);if(!n.length)return;const s=new Set(n),c=[];for(const f of s){const u=J.value.get(f);if(u==null)continue;const P=r.value[u];P&&(Y.set(f,P),c.push(f))}c.length&&se.push(c);const v=ve(),p=j.value,d=[];for(const f of s){const u=J.value.get(f);if(u==null)continue;const P=r.value[u];if(!P)continue;const W=M.value[u]??{x:0,y:0},Te=A.value[u]??p;d.push({id:f,item:P,fromX:W.x,fromY:W.y,width:p,height:Te,leaving:!0})}if(d.length&&(V.value=[...V.value,...d]),r.value=r.value.filter(f=>{const u=f?.id;return!u||!s.has(u)}),await e.nextTick(),he(v,s),d.length){const f=new Set(d.map(u=>u.id));L(()=>{V.value=V.value.map(u=>f.has(u.id)?{...u,leaving:!1}:u),setTimeout(()=>{V.value=V.value.filter(u=>!f.has(u.id))},U)})}}async function Se(t){return Be(t)}y({remove:Be,restore:Le,undo:De,restoreRemoved:ye,undoLastRemoval:we,backfillStats:re});function Me(){const t=Ze({items:r.value,columnCount:ue.value,columnWidth:j.value,gapX:E.value,gapY:S.value,headerHeight:x.value,footerHeight:z.value,bucketPx:Ne});M.value=t.positions,A.value=t.heights,de.value=t.buckets,me.value=t.contentHeight,J.value=t.indexById}const Ye=e.computed(()=>Math.max(me.value,k.value)+mt),ce=e.computed(()=>et({itemCount:r.value.length,viewportHeight:k.value,scrollTop:F.value,overscanPx:o.overscanPx,bucketPx:Ne,buckets:de.value}));e.watch(ce,t=>{if(!t?.length)return;const a=[];for(const n of t){const s=r.value[n]?.id;s&&q.value.has(s)&&(ee.has(s)||(ee.add(s),a.push(s)))}a.length&&(L(()=>{const n=new Set(O.value);for(const s of a)n.add(s);O.value=n}),Ae(()=>{const n=new Set(q.value);for(const s of a)n.delete(s);q.value=n,setTimeout(()=>{const s=new Set(O.value);for(const c of a)s.delete(c),ee.delete(c);O.value=s},U)}))},{flush:"post"});async function Oe(){if(!(Q.value||X.value)&&!(o.mode!=="backfill"&&T.value==null)&&!(o.mode==="backfill"&&T.value==null&&ae.value.length===0))try{if(X.value=!0,D.value="",o.mode==="backfill"){const n=await ke.loadBackfillBatch(T.value);n.pages.length&&(_.value=[..._.value,...n.pages]),$(n.batchItems),r.value=[...r.value,...n.batchItems],T.value=n.nextPage;return}const t=T.value;if(t==null)return;const a=await be(t);_.value=[..._.value,t],$(a.items),r.value=[...r.value,...a.items],T.value=a.nextPage}catch(t){D.value=t instanceof Error?t.message:String(t)}finally{X.value=!1}}function Xe(){const t=m.value;if(!t)return;F.value=t.scrollTop,k.value=t.clientHeight,t.scrollHeight-(t.scrollTop+t.clientHeight)<=o.prefetchThresholdPx&&Oe()}function Ie(){return m.value}function Ee(t){g.value=N(t),k.value=t.clientHeight}function $e(){typeof ResizeObserver>"u"||(I=new ResizeObserver(()=>{const t=Ie();t&&Ee(t)}))}function je(){return{enabled:o.mode==="backfill",isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:fe(o.backfillRequestDelayMs),pageSize:He(o.pageSize),bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}}function Pe(t){oe=0,Y.clear(),se.length=0,_.value=[],r.value=[],T.value=t,ae.value=[],re.value=je(),Q.value=!0,X.value=!1,D.value=""}async function Fe(t){try{if(o.mode==="backfill"){const a=await ke.loadBackfillBatch(t);_.value=a.pages.length?a.pages:[t],$(a.batchItems),r.value=a.batchItems,T.value=a.nextPage}else{const a=await be(t);_.value=[t],$(a.items),r.value=a.items,T.value=a.nextPage}}catch(a){D.value=a instanceof Error?a.message:String(a)}finally{Q.value=!1}}function We(){const t=Ie();t&&(Ee(t),F.value=t.scrollTop,I?.observe(t))}e.onMounted(async()=>{$e(),Pe(o.page),await Fe(o.page),await e.nextTick(),We()}),e.onUnmounted(()=>{I?.disconnect()}),e.watch(()=>o.page,async t=>{Pe(t),await Fe(t)}),e.watch(E,()=>{const t=m.value;t&&(g.value=N(t))},{immediate:!1});const ue=e.computed(()=>Ge(g.value,o.itemWidth)),j=e.computed(()=>Ke(g.value,ue.value,o.itemWidth,E.value));e.watch([ue,j,E,S,x,z],()=>{Me()},{immediate:!0}),e.watch(()=>[r.value,r.value.length],()=>Me(),{immediate:!0});const Ue=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,a)=>(e.openBlock(),e.createElementBlock("section",e.mergeProps(h.value,{class:Ue.value}),[e.createElementVNode("div",{ref_key:"scrollViewportRef",ref:m,"data-testid":"items-scroll-container",class:"mt-4 min-h-0 flex-1 overflow-auto",style:e.normalizeStyle({paddingRight:E.value+"px"}),onScroll:Xe},[Q.value?(e.openBlock(),e.createElementBlock("div",tt,a[0]||(a[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)]))):D.value?(e.openBlock(),e.createElementBlock("p",nt,"Error: "+e.toDisplayString(D.value),1)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"relative",style:e.normalizeStyle({height:Ye.value+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(ce.value,n=>(e.openBlock(),e.createElementBlock("article",{key:r.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:j.value+"px",transition:Ve(r.value[n].id),transform:_e(n)})},[H.value||x.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(G.value)},[e.renderSlot(t.$slots,"itemHeader",{item:r.value[n],remove:()=>Se(r.value[n])})],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"bg-slate-100",style:e.normalizeStyle({aspectRatio:r.value[n].width+" / "+r.value[n].height})},[r.value[n].type==="image"?(e.openBlock(),e.createElementBlock("img",{key:0,class:"h-full w-full object-cover",src:r.value[n].preview,width:r.value[n].width,height:r.value[n].height,loading:"lazy",alt:r.value[n].id},null,8,lt)):(e.openBlock(),e.createElementBlock("video",{key:1,class:"h-full w-full object-cover",poster:r.value[n].preview,controls:"",preload:"metadata"},[e.createElementVNode("source",{src:r.value[n].original,type:"video/mp4"},null,8,ot)],8,at))],4),C.value||z.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(K.value)},[e.renderSlot(t.$slots,"itemFooter",{item:r.value[n],remove:()=>Se(r.value[n])})],4)):e.createCommentVNode("",!0)],4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.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 "+U+"ms ease-out",transform:n.leaving?"translate3d("+n.fromX+"px,"+n.fromY+"px,0)":"translate3d("+n.fromX+"px,"+(n.fromY-n.height)+"px,0)"})},[H.value||x.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(G.value)},[e.renderSlot(t.$slots,"itemHeader",{item:n.item,remove:()=>{}})],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"bg-slate-100",style:e.normalizeStyle({aspectRatio:n.item.width+" / "+n.item.height})},[n.item.type==="image"?(e.openBlock(),e.createElementBlock("img",{key:0,class:"h-full w-full object-cover",src:n.item.preview,width:n.item.width,height:n.item.height,loading:"lazy",alt:n.item.id},null,8,st)):(e.openBlock(),e.createElementBlock("video",{key:1,class:"h-full w-full object-cover",poster:n.item.preview,controls:"",preload:"metadata"},[e.createElementVNode("source",{src:n.item.original,type:"video/mp4"},null,8,it)],8,rt))],4),C.value||z.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(K.value)},[e.renderSlot(t.$slots,"itemFooter",{item:n.item,remove:()=>{}})],4)):e.createCommentVNode("",!0)],4))),128))],4)),e.createElementVNode("div",ct,[X.value?(e.openBlock(),e.createElementBlock("span",ut,a[1]||(a[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)]))):T.value==null?(e.openBlock(),e.createElementBlock("span",ft,"End of list")):(e.openBlock(),e.createElementBlock("span",dt,"Scroll to load page "+e.toDisplayString(T.value),1))])],36)],16))}}),vt={install(l){l.component("Masonry",Ce)}};exports.Masonry=Ce;exports.VibePlugin=vt;exports.masonryDefaults=ze;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),Ae={mode:"default",pageSize:20,backfillRequestDelayMs:2e3,page:1,itemWidth:300,prefetchThresholdPx:200,gapX:16,gapY:16,headerHeight:0,footerHeight:0,overscanPx:600};function Ze(l,y){return!l||l<=0||!y||y<=0?1:Math.max(1,Math.floor(l/y))}function et(l,y,B,s=0){if(!l||l<=0||!y||y<=0)return B;const c=typeof s=="number"&&s>0?s:0,b=Math.max(0,y-1)*c,w=l-b;return!w||w<=0?B:w/y}function tt(l,y){const B=l?.width,s=l?.height;return typeof B=="number"&&typeof s=="number"&&B>0&&s>0?s/B*y:y}function Ce(l){return Number.isFinite(l)&&l>0?Math.floor(l):1}function fe(l){return Number.isFinite(l)&&l>0?Math.floor(l):0}function nt(l){async function y(s){const c=fe(s);if(c<=0)return;l.stats.value={...l.stats.value,cooldownMsTotal:c,cooldownMsRemaining:c};const b=Date.now(),w=100;await new Promise(g=>{const h=setInterval(()=>{const p=Date.now()-b,k=Math.max(0,c-p);l.stats.value={...l.stats.value,cooldownMsTotal:c,cooldownMsRemaining:k},k<=0&&(clearInterval(h),g())},w)})}async function B(s){const c=Ce(l.getPageSize()),b=l.isEnabled(),w=fe(l.getRequestDelayMs()),g=[];let h=0;l.buffer.value.length&&(h=l.buffer.value.length,g.push(...l.buffer.value),l.buffer.value=[]),l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,cooldownMsTotal:w,cooldownMsRemaining:0,progress:{collected:0,target:0},pageSize:c,bufferSize:0};const p=[];let k=s,F=0,I=!1;for(;g.length<c&&k!=null;){const T=k;I&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!0,requestPage:T,progress:{collected:Math.min(g.length,c),target:c},cooldownMsTotal:w,cooldownMsRemaining:0,pageSize:c});const x=await l.getContent(T);p.push(T),I&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null}),F+=x.items.length,l.markEnterFromLeft(x.items),g.push(...x.items),k=x.nextPage,!I&&g.length<c&&k!=null?(I=!0,l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null,progress:{collected:Math.min(g.length,c),target:c},cooldownMsTotal:w,cooldownMsRemaining:0,pageSize:c}):I&&(l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!0,progress:{collected:Math.min(g.length,c),target:c}}),I&&g.length<c&&k!=null&&await y(w)}const E=g.slice(0,c),S=g.slice(c);return l.buffer.value=S,l.stats.value={...l.stats.value,enabled:b,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsTotal:w,cooldownMsRemaining:0,pageSize:c,bufferSize:S.length,lastBatch:{startPage:s,pages:p,usedFromBuffer:h,fetchedFromNetwork:F,collectedTotal:g.length,emitted:E.length,carried:S.length},totals:{pagesFetched:l.stats.value.totals.pagesFetched+p.length,itemsFetchedFromNetwork:l.stats.value.totals.itemsFetchedFromNetwork+F}},{batchItems:E,pages:p,nextPage:k}}return{loadBackfillBatch:B}}function lt(l){const y=l.columnCount,B=l.columnWidth,s=l.gapX,c=l.gapY,b=l.headerHeight,w=l.footerHeight,g=l.bucketPx,h=Array.from({length:y},()=>0),p=new Array(l.items.length),k=new Array(l.items.length),F=new Map,I=new Map;let E=0;for(let S=0;S<l.items.length;S+=1){const T=l.items[S];T?.id&&I.set(T.id,S);let x=0;for(let M=1;M<h.length;M+=1)h[M]<h[x]&&(x=M);const z=x*(B+s),_=h[x],H=tt(T,B)+b+w;p[S]={x:z,y:_},k[S]=H,h[x]=_+H+c,E=Math.max(E,_+H);const G=Math.floor(_/g),K=Math.floor((_+H)/g);for(let M=G;M<=K;M+=1){const L=F.get(M);L?L.push(S):F.set(M,[S])}}return{positions:p,heights:k,buckets:F,contentHeight:E,indexById:I}}function ot(l){const y=l.itemCount;if(!y)return[];if(l.viewportHeight<=0)return Array.from({length:y},(h,p)=>p);const B=Math.max(0,l.scrollTop-l.overscanPx),s=l.scrollTop+l.viewportHeight+l.overscanPx,c=Math.floor(B/l.bucketPx),b=Math.floor(s/l.bucketPx),w=new Set;for(let h=c;h<=b;h+=1){const p=l.buckets.get(h);if(p)for(const k of p)w.add(k)}const g=Array.from(w);return g.sort((h,p)=>h-p),g}const at={key:0,class:"flex h-full items-center justify-center"},st={key:1,class:"text-sm font-medium text-red-700"},rt=["src","width","height","alt"],it=["poster"],ct=["src"],ut=["src","width","height","alt"],ft=["poster"],dt=["src"],mt={class:"mt-4 pb-2 text-center text-xs text-slate-600"},vt={key:0,class:"inline-flex items-center justify-center gap-2"},ht={key:1},gt={key:2},pt=200,ze=600,_e=300,He=600,Re=600,Ve=t.defineComponent({inheritAttrs:!1,__name:"Masonry",props:t.mergeDefaults({getContent:{},mode:{},pageSize:{},backfillRequestDelayMs:{},items:{},page:{},itemWidth:{},prefetchThresholdPx:{},gapX:{},gapY:{},headerHeight:{},footerHeight:{},overscanPx:{}},Ae),emits:["update:items"],setup(l,{expose:y,emit:B}){const s=l,c=B,b=t.useAttrs(),w=t.useSlots(),g=t.computed(()=>{const{class:e,...o}=b;return o}),h=t.ref(null),p=t.ref(0),k=t.ref(0),F=t.ref(0);let I;const E=t.computed(()=>s.gapX),S=t.computed(()=>s.gapY);function T(e){if(!e)return 0;const o=Math.max(0,E.value);return Math.max(0,e.clientWidth-o)}const x=t.computed(()=>s.headerHeight),z=t.computed(()=>s.footerHeight),_=t.computed(()=>!!w.itemHeader),H=t.computed(()=>!!w.itemFooter),G=t.computed(()=>{if(x.value>0)return{height:`${x.value}px`}}),K=t.computed(()=>{if(z.value>0)return{height:`${z.value}px`}}),M=t.ref([]),L=t.ref([]),de=t.ref(new Map),me=t.ref(0),J=t.ref(new Map);function ve(e){const o=typeof e=="number"&&Number.isFinite(e)?e:0;return-Math.max(0,o)}const D=t.ref(new Set),X=t.ref(new Set),ee=new Set,te=t.ref(new Map),R=t.ref(new Set),A=t.ref([]);function qe(e){const o=te.value.get(e);return o||{dx:0,dy:0}}function Le(e){if(X.value.has(e))return`transform ${He}ms ease-out`;if(R.value.has(e))return`transform ${_e}ms ease-out`}function De(e){const n=r.value[e]?.id,a=M.value[e]??{x:0,y:0},i=L.value[e]??0,v=i>0?i:W.value,m=a.x,f=n&&D.value.has(n)?ve(v):a.y,d=n?qe(n):{dx:0,dy:0};return`translate3d(${m+d.dx}px,${f+d.dy}px,0)`}function Y(e){(typeof requestAnimationFrame=="function"?requestAnimationFrame:n=>setTimeout(()=>n(0),0))(()=>e())}function Ye(e){Y(()=>Y(e))}function ne(e){if(!Array.isArray(e)||e.length===0)return;const o=new Set(D.value);let n=!1;for(const a of e){const i=a?.id;i&&(o.has(i)||(o.add(i),n=!0))}n&&(D.value=o)}function he(){const e=new Map;for(const o of ce.value){const a=r.value[o]?.id;if(!a)continue;const i=M.value[o];i&&e.set(a,{x:i.x,y:i.y})}return e}function ge(e,o){if(!e.size)return;const n=new Map,a=[];for(const[v,m]of e.entries()){if(o?.has(v))continue;const f=J.value.get(v);if(f==null)continue;const d=M.value[f];if(!d)continue;const u=m.x-d.x,P=m.y-d.y;(u||P)&&(n.set(v,{dx:u,dy:P}),a.push(v))}if(!n.size)return;te.value=n;const i=new Set(R.value);for(const v of a)i.delete(v);R.value=i,Y(()=>{R.value=new Set([...R.value,...a]),Y(()=>{te.value=new Map})}),setTimeout(()=>{const v=new Set(R.value);for(const m of a)v.delete(m);R.value=v},_e)}const Q=t.ref(!0),$=t.ref(!1),O=t.ref(""),C=t.ref([]),pe=t.ref([]),le=t.ref([]),N=t.ref(s.page),oe=t.ref([]);let ae=0;function j(e){for(const o of e)!o||typeof o!="object"||o.id&&o.originalIndex==null&&(o.originalIndex=ae,ae+=1)}const V=new Map,q=[];function Z(e){return typeof e=="number"&&Number.isFinite(e)}function Oe(e,o){if(!o.length)return e;const n=new Set;for(const m of e){const f=m?.id;f&&n.add(f)}const a=[];for(const m of o){const f=m?.id;f&&(n.has(f)||(a.push(m),n.add(f)))}if(!a.length)return e;const i=a.slice().sort((m,f)=>{const d=Z(m.originalIndex)?m.originalIndex:Number.POSITIVE_INFINITY,u=Z(f.originalIndex)?f.originalIndex:Number.POSITIVE_INFINITY;return d-u}),v=e.slice();for(const m of i){const f=m.originalIndex;if(!Z(f)){v.push(m);continue}let d=0,u=v.length;for(;d<u;){const P=d+u>>1,U=v[P]?.originalIndex;(Z(U)?U:Number.POSITIVE_INFINITY)<=f?d=P+1:u=P}v.splice(d,0,m)}return v}async function ye(e){if(!e.length)return;ne(e);const o=he();r.value=Oe(r.value,e),await t.nextTick(),ge(o)}async function we(e){const n=(Array.isArray(e)?e:[e]).map(ie).filter(Boolean);if(!n.length)return;const a=[];for(const i of n){const v=V.get(i);v&&a.push(v)}if(a.length){await ye(a);for(const i of a)i?.id&&V.delete(i.id)}}async function ke(){const e=q.pop();if(!e?.length)return;const o=[];for(const n of e){const a=V.get(n);a&&o.push(a)}if(o.length){await ye(o);for(const n of o)n?.id&&V.delete(n.id)}}async function Xe(e){return we(e)}async function $e(){return ke()}function be(e){const n=(Array.isArray(e)?e:[e]).map(ie).filter(Boolean);if(!n.length)return;const a=new Set(n);for(const i of a)V.delete(i);for(let i=q.length-1;i>=0;i-=1){const m=q[i].filter(f=>!a.has(f));m.length?q[i]=m:q.splice(i,1)}}const se=t.shallowRef({enabled:!1,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:2e3,pageSize:20,bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}),xe=nt({getContent:e=>s.getContent(e),markEnterFromLeft:ne,buffer:oe,stats:se,isEnabled:()=>s.mode==="backfill",getPageSize:()=>s.pageSize,getRequestDelayMs:()=>s.backfillRequestDelayMs}),re=t.computed(()=>s.items!==void 0);t.watch(()=>s.items,e=>{re.value&&(le.value=Array.isArray(e)?e:[])},{immediate:!0});const r=t.computed({get(){return re.value?le.value:pe.value},set(e){re.value?(le.value=e,c("update:items",e)):pe.value=e}});async function Be(e){const o=await s.getContent(e);return j(o.items),ne(o.items),{items:o.items,nextPage:o.nextPage}}function ie(e){return e?typeof e=="string"?e:e?.id:null}async function Se(e){const n=(Array.isArray(e)?e:[e]).map(ie).filter(Boolean);if(!n.length)return;const a=new Set(n),i=[];for(const d of a){const u=J.value.get(d);if(u==null)continue;const P=r.value[u];P&&(V.set(d,P),i.push(d))}i.length&&q.push(i);const v=he(),m=W.value,f=[];for(const d of a){const u=J.value.get(d);if(u==null)continue;const P=r.value[u];if(!P)continue;const U=M.value[u]??{x:0,y:0},Te=L.value[u]??m;f.push({id:d,item:P,fromX:U.x,fromY:U.y,width:m,height:Te,leaving:!0})}if(f.length&&(A.value=[...A.value,...f]),r.value=r.value.filter(d=>{const u=d?.id;return!u||!a.has(u)}),await t.nextTick(),ge(v,a),f.length){const d=new Set(f.map(u=>u.id));Y(()=>{A.value=A.value.map(u=>d.has(u.id)?{...u,leaving:!1}:u),setTimeout(()=>{A.value=A.value.filter(u=>!d.has(u.id))},Re)})}}async function Me(e){return Se(e)}y({remove:Se,restore:Xe,undo:$e,forget:be,restoreRemoved:we,undoLastRemoval:ke,forgetRemoved:be,backfillStats:se});function Ie(){const e=lt({items:r.value,columnCount:ue.value,columnWidth:W.value,gapX:E.value,gapY:S.value,headerHeight:x.value,footerHeight:z.value,bucketPx:ze});M.value=e.positions,L.value=e.heights,de.value=e.buckets,me.value=e.contentHeight,J.value=e.indexById}const je=t.computed(()=>Math.max(me.value,k.value)+pt),ce=t.computed(()=>ot({itemCount:r.value.length,viewportHeight:k.value,scrollTop:F.value,overscanPx:s.overscanPx,bucketPx:ze,buckets:de.value}));t.watch(ce,e=>{if(!e?.length)return;const o=[];for(const n of e){const a=r.value[n]?.id;a&&D.value.has(a)&&(ee.has(a)||(ee.add(a),o.push(a)))}o.length&&(Y(()=>{const n=new Set(X.value);for(const a of o)n.add(a);X.value=n}),Ye(()=>{const n=new Set(D.value);for(const a of o)n.delete(a);D.value=n,setTimeout(()=>{const a=new Set(X.value);for(const i of o)a.delete(i),ee.delete(i);X.value=a},He)}))},{flush:"post"});async function We(){if(!(Q.value||$.value)&&!(s.mode!=="backfill"&&N.value==null)&&!(s.mode==="backfill"&&N.value==null&&oe.value.length===0))try{if($.value=!0,O.value="",s.mode==="backfill"){const n=await xe.loadBackfillBatch(N.value);n.pages.length&&(C.value=[...C.value,...n.pages]),j(n.batchItems),r.value=[...r.value,...n.batchItems],N.value=n.nextPage;return}const e=N.value;if(e==null)return;const o=await Be(e);C.value=[...C.value,e],j(o.items),r.value=[...r.value,...o.items],N.value=o.nextPage}catch(e){O.value=e instanceof Error?e.message:String(e)}finally{$.value=!1}}function Ue(){const e=h.value;if(!e)return;F.value=e.scrollTop,k.value=e.clientHeight,e.scrollHeight-(e.scrollTop+e.clientHeight)<=s.prefetchThresholdPx&&We()}function Ee(){return h.value}function Pe(e){p.value=T(e),k.value=e.clientHeight}function Ge(){typeof ResizeObserver>"u"||(I=new ResizeObserver(()=>{const e=Ee();e&&Pe(e)}))}function Ke(){return{enabled:s.mode==="backfill",isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:fe(s.backfillRequestDelayMs),pageSize:Ce(s.pageSize),bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}}function Fe(e){ae=0,V.clear(),q.length=0,C.value=[],r.value=[],N.value=e,oe.value=[],se.value=Ke(),Q.value=!0,$.value=!1,O.value=""}async function Ne(e){try{if(s.mode==="backfill"){const o=await xe.loadBackfillBatch(e);C.value=o.pages.length?o.pages:[e],j(o.batchItems),r.value=o.batchItems,N.value=o.nextPage}else{const o=await Be(e);C.value=[e],j(o.items),r.value=o.items,N.value=o.nextPage}}catch(o){O.value=o instanceof Error?o.message:String(o)}finally{Q.value=!1}}function Je(){const e=Ee();e&&(Pe(e),F.value=e.scrollTop,I?.observe(e))}t.onMounted(async()=>{Ge(),Je(),Fe(s.page),await Ne(s.page)}),t.onUnmounted(()=>{I?.disconnect()}),t.watch(()=>s.page,async e=>{Fe(e),await Ne(e)}),t.watch(E,()=>{const e=h.value;e&&(p.value=T(e))},{immediate:!1});const ue=t.computed(()=>Ze(p.value,s.itemWidth)),W=t.computed(()=>et(p.value,ue.value,s.itemWidth,E.value));t.watch([ue,W,E,S,x,z],()=>{Ie()},{immediate:!0}),t.watch(()=>[r.value,r.value.length],()=>Ie(),{immediate:!0});const Qe=t.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(e,o)=>(t.openBlock(),t.createElementBlock("section",t.mergeProps(g.value,{class:Qe.value}),[t.createElementVNode("div",{ref_key:"scrollViewportRef",ref:h,"data-testid":"items-scroll-container",class:"mt-4 min-h-0 flex-1 overflow-auto",style:t.normalizeStyle({paddingRight:E.value+"px"}),onScroll:Ue},[Q.value?(t.openBlock(),t.createElementBlock("div",at,o[0]||(o[0]=[t.createElementVNode("div",{class:"inline-flex items-center gap-3 text-sm text-slate-600"},[t.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[t.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),t.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})]),t.createElementVNode("span",null,"Loading…")],-1)]))):O.value?(t.openBlock(),t.createElementBlock("p",st,"Error: "+t.toDisplayString(O.value),1)):(t.openBlock(),t.createElementBlock("div",{key:2,class:"relative",style:t.normalizeStyle({height:je.value+"px"})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(ce.value,n=>(t.openBlock(),t.createElementBlock("article",{key:r.value[n].id,"data-testid":"item-card",class:"absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:t.normalizeStyle({width:W.value+"px",transition:Le(r.value[n].id),transform:De(n)})},[_.value||x.value>0?(t.openBlock(),t.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:t.normalizeStyle(G.value)},[t.renderSlot(e.$slots,"itemHeader",{item:r.value[n],remove:()=>Me(r.value[n])})],4)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"bg-slate-100",style:t.normalizeStyle({aspectRatio:r.value[n].width+" / "+r.value[n].height})},[r.value[n].type==="image"?(t.openBlock(),t.createElementBlock("img",{key:0,class:"h-full w-full object-cover",src:r.value[n].preview,width:r.value[n].width,height:r.value[n].height,loading:"lazy",alt:r.value[n].id},null,8,rt)):(t.openBlock(),t.createElementBlock("video",{key:1,class:"h-full w-full object-cover",poster:r.value[n].preview,controls:"",preload:"metadata"},[t.createElementVNode("source",{src:r.value[n].original,type:"video/mp4"},null,8,ct)],8,it))],4),H.value||z.value>0?(t.openBlock(),t.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:t.normalizeStyle(K.value)},[t.renderSlot(e.$slots,"itemFooter",{item:r.value[n],remove:()=>Me(r.value[n])})],4)):t.createCommentVNode("",!0)],4))),128)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(A.value,n=>(t.openBlock(),t.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:t.normalizeStyle({width:n.width+"px",transition:"transform "+Re+"ms ease-out",transform:n.leaving?"translate3d("+n.fromX+"px,"+n.fromY+"px,0)":"translate3d("+n.fromX+"px,"+ve(n.height)+"px,0)"})},[_.value||x.value>0?(t.openBlock(),t.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:t.normalizeStyle(G.value)},[t.renderSlot(e.$slots,"itemHeader",{item:n.item,remove:()=>{}})],4)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"bg-slate-100",style:t.normalizeStyle({aspectRatio:n.item.width+" / "+n.item.height})},[n.item.type==="image"?(t.openBlock(),t.createElementBlock("img",{key:0,class:"h-full w-full object-cover",src:n.item.preview,width:n.item.width,height:n.item.height,loading:"lazy",alt:n.item.id},null,8,ut)):(t.openBlock(),t.createElementBlock("video",{key:1,class:"h-full w-full object-cover",poster:n.item.preview,controls:"",preload:"metadata"},[t.createElementVNode("source",{src:n.item.original,type:"video/mp4"},null,8,dt)],8,ft))],4),H.value||z.value>0?(t.openBlock(),t.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:t.normalizeStyle(K.value)},[t.renderSlot(e.$slots,"itemFooter",{item:n.item,remove:()=>{}})],4)):t.createCommentVNode("",!0)],4))),128))],4)),t.createElementVNode("div",mt,[$.value?(t.openBlock(),t.createElementBlock("span",vt,o[1]||(o[1]=[t.createElementVNode("svg",{class:"h-4 w-4 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[t.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),t.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1),t.createElementVNode("span",null,"Loading more…",-1)]))):N.value==null?(t.openBlock(),t.createElementBlock("span",ht,"End of list")):(t.openBlock(),t.createElementBlock("span",gt,"Scroll to load page "+t.toDisplayString(N.value),1))])],36)],16))}}),yt={install(l){l.component("Masonry",Ve)}};exports.Masonry=Ve;exports.VibePlugin=yt;exports.masonryDefaults=Ae;

package/lib/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as st, mergeDefaults as ot, useAttrs as it, useSlots as rt, computed as B, ref as h, shallowRef as ut, watch as U, onMounted as ct, nextTick as we, onUnmounted as ft, createElementBlock as b, openBlock as k, mergeProps as dt, createElementVNode as T, normalizeStyle as q, toDisplayString as Ye, Fragment as Ve, renderList as De, createCommentVNode as oe, renderSlot as ie } from "vue";
-const vt = {
+import { defineComponent as ut, mergeDefaults as ct, useAttrs as ft, useSlots as dt, computed as B, ref as g, shallowRef as vt, watch as G, onMounted as ht, onUnmounted as gt, createElementBlock as x, openBlock as k, mergeProps as mt, createElementVNode as T, normalizeStyle as N, toDisplayString as Ve, Fragment as Ye, renderList as De, createCommentVNode as oe, renderSlot as ie, nextTick as Oe } from "vue";
+const pt = {
   mode: "default",
   pageSize: 20,
   backfillRequestDelayMs: 2e3,
@@ -12,49 +12,49 @@ const vt = {
   footerHeight: 0,
   overscanPx: 600
 };
-function ht(n, y) {
+function yt(n, y) {
   return !n || n <= 0 || !y || y <= 0 ? 1 : Math.max(1, Math.floor(n / y));
 }
-function gt(n, y, S, l = 0) {
+function wt(n, y, S, l = 0) {
   if (!n || n <= 0 || !y || y <= 0) return S;
-  const i = typeof l == "number" && l > 0 ? l : 0, M = Math.max(0, y - 1) * i, w = n - M;
+  const r = typeof l == "number" && l > 0 ? l : 0, M = Math.max(0, y - 1) * r, w = n - M;
   return !w || w <= 0 ? S : w / y;
 }
-function mt(n, y) {
+function bt(n, y) {
   const S = n?.width, l = n?.height;
   return typeof S == "number" && typeof l == "number" && S > 0 && l > 0 ? l / S * y : y;
 }
-function Xe(n) {
+function Ue(n) {
   return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
 }
-function xe(n) {
+function we(n) {
   return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
 }
-function pt(n) {
+function xt(n) {
   async function y(l) {
-    const i = xe(l);
-    if (i <= 0) return;
+    const r = we(l);
+    if (r <= 0) return;
     n.stats.value = {
       ...n.stats.value,
-      cooldownMsTotal: i,
-      cooldownMsRemaining: i
+      cooldownMsTotal: r,
+      cooldownMsRemaining: r
     };
     const M = Date.now(), w = 100;
-    await new Promise((g) => {
-      const d = setInterval(() => {
-        const m = Date.now() - M, x = Math.max(0, i - m);
+    await new Promise((m) => {
+      const h = setInterval(() => {
+        const p = Date.now() - M, b = Math.max(0, r - p);
         n.stats.value = {
           ...n.stats.value,
-          cooldownMsTotal: i,
-          cooldownMsRemaining: x
-        }, x <= 0 && (clearInterval(d), g());
+          cooldownMsTotal: r,
+          cooldownMsRemaining: b
+        }, b <= 0 && (clearInterval(h), m());
       }, w);
     });
   }
   async function S(l) {
-    const i = Xe(n.getPageSize()), M = n.isEnabled(), w = xe(n.getRequestDelayMs()), g = [];
-    let d = 0;
-    n.buffer.value.length && (d = n.buffer.value.length, g.push(...n.buffer.value), n.buffer.value = []), n.stats.value = {
+    const r = Ue(n.getPageSize()), M = n.isEnabled(), w = we(n.getRequestDelayMs()), m = [];
+    let h = 0;
+    n.buffer.value.length && (h = n.buffer.value.length, m.push(...n.buffer.value), n.buffer.value = []), n.stats.value = {
       ...n.stats.value,
       enabled: M,
       isBackfillActive: !1,
@@ -66,59 +66,59 @@ function pt(n) {
         collected: 0,
         target: 0
       },
-      pageSize: i,
+      pageSize: r,
       bufferSize: 0
     };
-    const m = [];
-    let x = l, A = 0, H = !1;
-    for (; g.length < i && x != null; ) {
-      const z = x;
-      H && (n.stats.value = {
+    const p = [];
+    let b = l, A = 0, _ = !1;
+    for (; m.length < r && b != null; ) {
+      const z = b;
+      _ && (n.stats.value = {
         ...n.stats.value,
         enabled: M,
         isBackfillActive: !0,
         isRequestInFlight: !0,
         requestPage: z,
         progress: {
-          collected: Math.min(g.length, i),
-          target: i
+          collected: Math.min(m.length, r),
+          target: r
         },
         cooldownMsTotal: w,
         cooldownMsRemaining: 0,
-        pageSize: i
+        pageSize: r
       });
       const I = await n.getContent(z);
-      m.push(z), H && (n.stats.value = {
+      p.push(z), _ && (n.stats.value = {
         ...n.stats.value,
         enabled: M,
         isBackfillActive: !0,
         isRequestInFlight: !1,
         requestPage: null
-      }), A += I.items.length, n.markEnterFromLeft(I.items), g.push(...I.items), x = I.nextPage, !H && g.length < i && x != null ? (H = !0, n.stats.value = {
+      }), A += I.items.length, n.markEnterFromLeft(I.items), m.push(...I.items), b = I.nextPage, !_ && m.length < r && b != null ? (_ = !0, n.stats.value = {
         ...n.stats.value,
         enabled: M,
         isBackfillActive: !0,
         isRequestInFlight: !1,
         requestPage: null,
         progress: {
-          collected: Math.min(g.length, i),
-          target: i
+          collected: Math.min(m.length, r),
+          target: r
         },
         cooldownMsTotal: w,
         cooldownMsRemaining: 0,
-        pageSize: i
-      }) : H && (n.stats.value = {
+        pageSize: r
+      }) : _ && (n.stats.value = {
         ...n.stats.value,
         enabled: M,
         isBackfillActive: !0,
         progress: {
-          collected: Math.min(g.length, i),
-          target: i
+          collected: Math.min(m.length, r),
+          target: r
         }
-      }), H && g.length < i && x != null && await y(w);
+      }), _ && m.length < r && b != null && await y(w);
     }
-    const R = g.slice(0, i), P = g.slice(i);
-    return n.buffer.value = P, n.stats.value = {
+    const H = m.slice(0, r), F = m.slice(r);
+    return n.buffer.value = F, n.stats.value = {
       ...n.stats.value,
       enabled: M,
       isBackfillActive: !1,
@@ -130,70 +130,70 @@ function pt(n) {
       },
       cooldownMsTotal: w,
       cooldownMsRemaining: 0,
-      pageSize: i,
-      bufferSize: P.length,
+      pageSize: r,
+      bufferSize: F.length,
       lastBatch: {
         startPage: l,
-        pages: m,
-        usedFromBuffer: d,
+        pages: p,
+        usedFromBuffer: h,
         fetchedFromNetwork: A,
-        collectedTotal: g.length,
-        emitted: R.length,
-        carried: P.length
+        collectedTotal: m.length,
+        emitted: H.length,
+        carried: F.length
       },
       totals: {
-        pagesFetched: n.stats.value.totals.pagesFetched + m.length,
+        pagesFetched: n.stats.value.totals.pagesFetched + p.length,
         itemsFetchedFromNetwork: n.stats.value.totals.itemsFetchedFromNetwork + A
       }
-    }, { batchItems: R, pages: m, nextPage: x };
+    }, { batchItems: H, pages: p, nextPage: b };
   }
   return { loadBackfillBatch: S };
 }
-function yt(n) {
-  const y = n.columnCount, S = n.columnWidth, l = n.gapX, i = n.gapY, M = n.headerHeight, w = n.footerHeight, g = n.bucketPx, d = Array.from({ length: y }, () => 0), m = new Array(n.items.length), x = new Array(n.items.length), A = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map();
-  let R = 0;
-  for (let P = 0; P < n.items.length; P += 1) {
-    const z = n.items[P];
-    z?.id && H.set(z.id, P);
+function kt(n) {
+  const y = n.columnCount, S = n.columnWidth, l = n.gapX, r = n.gapY, M = n.headerHeight, w = n.footerHeight, m = n.bucketPx, h = Array.from({ length: y }, () => 0), p = new Array(n.items.length), b = new Array(n.items.length), A = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
+  let H = 0;
+  for (let F = 0; F < n.items.length; F += 1) {
+    const z = n.items[F];
+    z?.id && _.set(z.id, F);
     let I = 0;
-    for (let F = 1; F < d.length; F += 1)
-      d[F] < d[I] && (I = F);
-    const N = I * (S + l), E = d[I], L = mt(z, S) + M + w;
-    m[P] = { x: N, y: E }, x[P] = L, d[I] = E + L + i, R = Math.max(R, E + L);
-    const te = Math.floor(E / g), ne = Math.floor((E + L) / g);
-    for (let F = te; F <= ne; F += 1) {
-      const O = A.get(F);
-      O ? O.push(P) : A.set(F, [P]);
+    for (let P = 1; P < h.length; P += 1)
+      h[P] < h[I] && (I = P);
+    const q = I * (S + l), E = h[I], L = bt(z, S) + M + w;
+    p[F] = { x: q, y: E }, b[F] = L, h[I] = E + L + r, H = Math.max(H, E + L);
+    const te = Math.floor(E / m), ne = Math.floor((E + L) / m);
+    for (let P = te; P <= ne; P += 1) {
+      const $ = A.get(P);
+      $ ? $.push(F) : A.set(P, [F]);
     }
   }
-  return { positions: m, heights: x, buckets: A, contentHeight: R, indexById: H };
+  return { positions: p, heights: b, buckets: A, contentHeight: H, indexById: _ };
 }
-function wt(n) {
+function Mt(n) {
   const y = n.itemCount;
   if (!y) return [];
-  if (n.viewportHeight <= 0) return Array.from({ length: y }, (d, m) => m);
-  const S = Math.max(0, n.scrollTop - n.overscanPx), l = n.scrollTop + n.viewportHeight + n.overscanPx, i = Math.floor(S / n.bucketPx), M = Math.floor(l / n.bucketPx), w = /* @__PURE__ */ new Set();
-  for (let d = i; d <= M; d += 1) {
-    const m = n.buckets.get(d);
-    if (m)
-      for (const x of m) w.add(x);
+  if (n.viewportHeight <= 0) return Array.from({ length: y }, (h, p) => p);
+  const S = Math.max(0, n.scrollTop - n.overscanPx), l = n.scrollTop + n.viewportHeight + n.overscanPx, r = Math.floor(S / n.bucketPx), M = Math.floor(l / n.bucketPx), w = /* @__PURE__ */ new Set();
+  for (let h = r; h <= M; h += 1) {
+    const p = n.buckets.get(h);
+    if (p)
+      for (const b of p) w.add(b);
   }
-  const g = Array.from(w);
-  return g.sort((d, m) => d - m), g;
+  const m = Array.from(w);
+  return m.sort((h, p) => h - p), m;
 }
-const xt = {
+const It = {
   key: 0,
   class: "flex h-full items-center justify-center"
-}, bt = {
+}, St = {
   key: 1,
   class: "text-sm font-medium text-red-700"
-}, kt = ["src", "width", "height", "alt"], Mt = ["poster"], It = ["src"], St = ["src", "width", "height", "alt"], Bt = ["poster"], Pt = ["src"], Ft = { class: "mt-4 pb-2 text-center text-xs text-slate-600" }, Tt = {
+}, Bt = ["src", "width", "height", "alt"], Ft = ["poster"], Pt = ["src"], Tt = ["src", "width", "height", "alt"], _t = ["poster"], Ht = ["src"], Rt = { class: "mt-4 pb-2 text-center text-xs text-slate-600" }, At = {
   key: 0,
   class: "inline-flex items-center justify-center gap-2"
-}, Ht = { key: 1 }, Rt = { key: 2 }, _t = 200, Oe = 600, ee = 300, At = /* @__PURE__ */ st({
+}, Ct = { key: 1 }, zt = { key: 2 }, Nt = 200, Xe = 600, $e = 300, je = 600, We = 600, qt = /* @__PURE__ */ ut({
   inheritAttrs: !1,
   __name: "Masonry",
-  props: /* @__PURE__ */ ot({
+  props: /* @__PURE__ */ ct({
     getContent: {},
     mode: {},
     pageSize: {},
@@ -207,127 +207,133 @@ const xt = {
     headerHeight: {},
     footerHeight: {},
     overscanPx: {}
-  }, vt),
+  }, pt),
   emits: ["update:items"],
   setup(n, { expose: y, emit: S }) {
-    const l = n, i = S, M = it(), w = rt(), g = B(() => {
+    const l = n, r = S, M = ft(), w = dt(), m = B(() => {
       const { class: e, ...a } = M;
       return a;
-    }), d = h(null), m = h(0), x = h(0), A = h(0);
-    let H;
-    const R = B(() => l.gapX), P = B(() => l.gapY);
+    }), h = g(null), p = g(0), b = g(0), A = g(0);
+    let _;
+    const H = B(() => l.gapX), F = B(() => l.gapY);
     function z(e) {
       if (!e) return 0;
-      const a = Math.max(0, R.value);
+      const a = Math.max(0, H.value);
       return Math.max(0, e.clientWidth - a);
     }
-    const I = B(() => l.headerHeight), N = B(() => l.footerHeight), E = B(() => !!w.itemHeader), L = B(() => !!w.itemFooter), te = B(() => {
+    const I = B(() => l.headerHeight), q = B(() => l.footerHeight), E = B(() => !!w.itemHeader), L = B(() => !!w.itemFooter), te = B(() => {
       if (I.value > 0) return { height: `${I.value}px` };
     }), ne = B(() => {
-      if (N.value > 0) return { height: `${N.value}px` };
-    }), F = h([]), O = h([]), be = h(/* @__PURE__ */ new Map()), ke = h(0), ae = h(/* @__PURE__ */ new Map()), X = h(/* @__PURE__ */ new Set()), G = h(/* @__PURE__ */ new Set()), re = /* @__PURE__ */ new Set(), ue = h(/* @__PURE__ */ new Map()), Y = h(/* @__PURE__ */ new Set()), V = h([]);
-    function $e(e) {
+      if (q.value > 0) return { height: `${q.value}px` };
+    }), P = g([]), $ = g([]), be = g(/* @__PURE__ */ new Map()), xe = g(0), ae = g(/* @__PURE__ */ new Map());
+    function ke(e) {
+      const a = typeof e == "number" && Number.isFinite(e) ? e : 0;
+      return -Math.max(0, a);
+    }
+    const j = g(/* @__PURE__ */ new Set()), K = g(/* @__PURE__ */ new Set()), re = /* @__PURE__ */ new Set(), ue = g(/* @__PURE__ */ new Map()), V = g(/* @__PURE__ */ new Set()), Y = g([]);
+    function Ge(e) {
       const a = ue.value.get(e);
       return a || { dx: 0, dy: 0 };
     }
-    function je(e) {
-      return G.value.has(e) || Y.value.has(e) ? `transform ${ee}ms ease-out` : void 0;
+    function Ke(e) {
+      if (K.value.has(e)) return `transform ${je}ms ease-out`;
+      if (V.value.has(e)) return `transform ${$e}ms ease-out`;
     }
-    function We(e) {
-      const t = o.value[e]?.id, s = F.value[e] ?? { x: 0, y: 0 }, r = O.value[e] ?? 0, v = r > 0 ? r : Q.value, p = s.x, f = t && X.value.has(t) ? s.y - v : s.y, c = t ? $e(t) : { dx: 0, dy: 0 };
-      return `translate3d(${p + c.dx}px,${f + c.dy}px,0)`;
+    function Je(e) {
+      const t = o.value[e]?.id, s = P.value[e] ?? { x: 0, y: 0 }, i = $.value[e] ?? 0, v = i > 0 ? i : Z.value, d = s.x, c = t && j.value.has(t) ? ke(v) : s.y, f = t ? Ge(t) : { dx: 0, dy: 0 };
+      return `translate3d(${d + f.dx}px,${c + f.dy}px,0)`;
     }
-    function $(e) {
+    function W(e) {
       (typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(0), 0))(() => e());
     }
-    function Ue(e) {
-      $(() => $(e));
+    function Qe(e) {
+      W(() => W(e));
     }
     function ce(e) {
       if (!Array.isArray(e) || e.length === 0) return;
-      const a = new Set(X.value);
+      const a = new Set(j.value);
       let t = !1;
       for (const s of e) {
-        const r = s?.id;
-        r && (a.has(r) || (a.add(r), t = !0));
+        const i = s?.id;
+        i && (a.has(i) || (a.add(i), t = !0));
       }
-      t && (X.value = a);
+      t && (j.value = a);
     }
     function Me() {
       const e = /* @__PURE__ */ new Map();
       for (const a of pe.value) {
         const s = o.value[a]?.id;
         if (!s) continue;
-        const r = F.value[a];
-        r && e.set(s, { x: r.x, y: r.y });
+        const i = P.value[a];
+        i && e.set(s, { x: i.x, y: i.y });
       }
       return e;
     }
     function Ie(e, a) {
       if (!e.size) return;
       const t = /* @__PURE__ */ new Map(), s = [];
-      for (const [v, p] of e.entries()) {
+      for (const [v, d] of e.entries()) {
         if (a?.has(v)) continue;
-        const f = ae.value.get(v);
-        if (f == null) continue;
-        const c = F.value[f];
-        if (!c) continue;
-        const u = p.x - c.x, _ = p.y - c.y;
-        (u || _) && (t.set(v, { dx: u, dy: _ }), s.push(v));
+        const c = ae.value.get(v);
+        if (c == null) continue;
+        const f = P.value[c];
+        if (!f) continue;
+        const u = d.x - f.x, R = d.y - f.y;
+        (u || R) && (t.set(v, { dx: u, dy: R }), s.push(v));
       }
       if (!t.size) return;
       ue.value = t;
-      const r = new Set(Y.value);
-      for (const v of s) r.delete(v);
-      Y.value = r, $(() => {
-        Y.value = /* @__PURE__ */ new Set([...Y.value, ...s]), $(() => {
+      const i = new Set(V.value);
+      for (const v of s) i.delete(v);
+      V.value = i, W(() => {
+        V.value = /* @__PURE__ */ new Set([...V.value, ...s]), W(() => {
           ue.value = /* @__PURE__ */ new Map();
         });
       }), setTimeout(() => {
-        const v = new Set(Y.value);
-        for (const p of s) v.delete(p);
-        Y.value = v;
-      }, ee);
+        const v = new Set(V.value);
+        for (const d of s) v.delete(d);
+        V.value = v;
+      }, $e);
     }
-    const le = h(!0), K = h(!1), j = h(""), D = h([]), Se = h([]), fe = h([]), C = h(l.page), de = h([]);
+    const se = g(!0), J = g(!1), U = g(""), D = g([]), Se = g([]), fe = g([]), C = g(l.page), de = g([]);
     let ve = 0;
-    function J(e) {
+    function Q(e) {
       for (const a of e)
         !a || typeof a != "object" || a.id && a.originalIndex == null && (a.originalIndex = ve, ve += 1);
     }
-    const W = /* @__PURE__ */ new Map(), he = [];
-    function se(e) {
+    const O = /* @__PURE__ */ new Map(), X = [];
+    function le(e) {
       return typeof e == "number" && Number.isFinite(e);
     }
-    function Ge(e, a) {
+    function Ze(e, a) {
       if (!a.length) return e;
       const t = /* @__PURE__ */ new Set();
-      for (const p of e) {
-        const f = p?.id;
-        f && t.add(f);
+      for (const d of e) {
+        const c = d?.id;
+        c && t.add(c);
       }
       const s = [];
-      for (const p of a) {
-        const f = p?.id;
-        f && (t.has(f) || (s.push(p), t.add(f)));
+      for (const d of a) {
+        const c = d?.id;
+        c && (t.has(c) || (s.push(d), t.add(c)));
       }
       if (!s.length) return e;
-      const r = s.slice().sort((p, f) => {
-        const c = se(p.originalIndex) ? p.originalIndex : Number.POSITIVE_INFINITY, u = se(f.originalIndex) ? f.originalIndex : Number.POSITIVE_INFINITY;
-        return c - u;
+      const i = s.slice().sort((d, c) => {
+        const f = le(d.originalIndex) ? d.originalIndex : Number.POSITIVE_INFINITY, u = le(c.originalIndex) ? c.originalIndex : Number.POSITIVE_INFINITY;
+        return f - u;
       }), v = e.slice();
-      for (const p of r) {
-        const f = p.originalIndex;
-        if (!se(f)) {
-          v.push(p);
+      for (const d of i) {
+        const c = d.originalIndex;
+        if (!le(c)) {
+          v.push(d);
           continue;
         }
-        let c = 0, u = v.length;
-        for (; c < u; ) {
-          const _ = c + u >> 1, Z = v[_]?.originalIndex;
-          (se(Z) ? Z : Number.POSITIVE_INFINITY) <= f ? c = _ + 1 : u = _;
+        let f = 0, u = v.length;
+        for (; f < u; ) {
+          const R = f + u >> 1, ee = v[R]?.originalIndex;
+          (le(ee) ? ee : Number.POSITIVE_INFINITY) <= c ? f = R + 1 : u = R;
         }
-        v.splice(c, 0, p);
+        v.splice(f, 0, d);
       }
       return v;
     }
@@ -335,43 +341,53 @@ const xt = {
       if (!e.length) return;
       ce(e);
       const a = Me();
-      o.value = Ge(o.value, e), await we(), Ie(a);
+      o.value = Ze(o.value, e), await Oe(), Ie(a);
     }
-    async function Pe(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(Re).filter(Boolean);
+    async function Fe(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
       if (!t.length) return;
       const s = [];
-      for (const r of t) {
-        const v = W.get(r);
+      for (const i of t) {
+        const v = O.get(i);
         v && s.push(v);
       }
       if (s.length) {
         await Be(s);
-        for (const r of s)
-          r?.id && W.delete(r.id);
+        for (const i of s)
+          i?.id && O.delete(i.id);
       }
     }
-    async function Fe() {
-      const e = he.pop();
+    async function Pe() {
+      const e = X.pop();
       if (!e?.length) return;
       const a = [];
       for (const t of e) {
-        const s = W.get(t);
+        const s = O.get(t);
         s && a.push(s);
       }
       if (a.length) {
         await Be(a);
         for (const t of a)
-          t?.id && W.delete(t.id);
+          t?.id && O.delete(t.id);
       }
     }
-    async function Ke(e) {
-      return Pe(e);
+    async function et(e) {
+      return Fe(e);
     }
-    async function Je() {
-      return Fe();
+    async function tt() {
+      return Pe();
     }
-    const ge = ut({
+    function Te(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
+      if (!t.length) return;
+      const s = new Set(t);
+      for (const i of s) O.delete(i);
+      for (let i = X.length - 1; i >= 0; i -= 1) {
+        const d = X[i].filter((c) => !s.has(c));
+        d.length ? X[i] = d : X.splice(i, 1);
+      }
+    }
+    const he = vt({
       enabled: !1,
       isBackfillActive: !1,
       isRequestInFlight: !1,
@@ -389,174 +405,176 @@ const xt = {
         pagesFetched: 0,
         itemsFetchedFromNetwork: 0
       }
-    }), Te = pt({
+    }), _e = xt({
       getContent: (e) => l.getContent(e),
       markEnterFromLeft: ce,
       buffer: de,
-      stats: ge,
+      stats: he,
       isEnabled: () => l.mode === "backfill",
       getPageSize: () => l.pageSize,
       getRequestDelayMs: () => l.backfillRequestDelayMs
-    }), me = B(() => l.items !== void 0);
-    U(
+    }), ge = B(() => l.items !== void 0);
+    G(
       () => l.items,
       (e) => {
-        me.value && (fe.value = Array.isArray(e) ? e : []);
+        ge.value && (fe.value = Array.isArray(e) ? e : []);
       },
       { immediate: !0 }
     );
     const o = B({
       get() {
-        return me.value ? fe.value : Se.value;
+        return ge.value ? fe.value : Se.value;
       },
       set(e) {
-        me.value ? (fe.value = e, i("update:items", e)) : Se.value = e;
+        ge.value ? (fe.value = e, r("update:items", e)) : Se.value = e;
       }
     });
     async function He(e) {
       const a = await l.getContent(e);
-      return J(a.items), ce(a.items), { items: a.items, nextPage: a.nextPage };
+      return Q(a.items), ce(a.items), { items: a.items, nextPage: a.nextPage };
     }
-    function Re(e) {
+    function me(e) {
       return e ? typeof e == "string" ? e : e?.id : null;
     }
-    async function _e(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(Re).filter(Boolean);
+    async function Re(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
       if (!t.length) return;
-      const s = new Set(t), r = [];
-      for (const c of s) {
-        const u = ae.value.get(c);
+      const s = new Set(t), i = [];
+      for (const f of s) {
+        const u = ae.value.get(f);
         if (u == null) continue;
-        const _ = o.value[u];
-        _ && (W.set(c, _), r.push(c));
+        const R = o.value[u];
+        R && (O.set(f, R), i.push(f));
       }
-      r.length && he.push(r);
-      const v = Me(), p = Q.value, f = [];
-      for (const c of s) {
-        const u = ae.value.get(c);
+      i.length && X.push(i);
+      const v = Me(), d = Z.value, c = [];
+      for (const f of s) {
+        const u = ae.value.get(f);
         if (u == null) continue;
-        const _ = o.value[u];
-        if (!_) continue;
-        const Z = F.value[u] ?? { x: 0, y: 0 }, Le = O.value[u] ?? p;
-        f.push({
-          id: c,
-          item: _,
-          fromX: Z.x,
-          fromY: Z.y,
-          width: p,
+        const R = o.value[u];
+        if (!R) continue;
+        const ee = P.value[u] ?? { x: 0, y: 0 }, Le = $.value[u] ?? d;
+        c.push({
+          id: f,
+          item: R,
+          fromX: ee.x,
+          fromY: ee.y,
+          width: d,
           height: Le,
           leaving: !0
         });
       }
-      if (f.length && (V.value = [...V.value, ...f]), o.value = o.value.filter((c) => {
-        const u = c?.id;
+      if (c.length && (Y.value = [...Y.value, ...c]), o.value = o.value.filter((f) => {
+        const u = f?.id;
         return !u || !s.has(u);
-      }), await we(), Ie(v, s), f.length) {
-        const c = new Set(f.map((u) => u.id));
-        $(() => {
-          V.value = V.value.map(
-            (u) => c.has(u.id) ? { ...u, leaving: !1 } : u
+      }), await Oe(), Ie(v, s), c.length) {
+        const f = new Set(c.map((u) => u.id));
+        W(() => {
+          Y.value = Y.value.map(
+            (u) => f.has(u.id) ? { ...u, leaving: !1 } : u
           ), setTimeout(() => {
-            V.value = V.value.filter((u) => !c.has(u.id));
-          }, ee);
+            Y.value = Y.value.filter((u) => !f.has(u.id));
+          }, We);
         });
       }
     }
     async function Ae(e) {
-      return _e(e);
+      return Re(e);
     }
     y({
-      remove: _e,
-      restore: Ke,
-      undo: Je,
+      remove: Re,
+      restore: et,
+      undo: tt,
+      forget: Te,
       // Aliases (kept for now; can be removed if you want strictly short API only).
-      restoreRemoved: Pe,
-      undoLastRemoval: Fe,
-      backfillStats: ge
+      restoreRemoved: Fe,
+      undoLastRemoval: Pe,
+      forgetRemoved: Te,
+      backfillStats: he
     });
     function Ce() {
-      const e = yt({
+      const e = kt({
         items: o.value,
         columnCount: ye.value,
-        columnWidth: Q.value,
-        gapX: R.value,
-        gapY: P.value,
+        columnWidth: Z.value,
+        gapX: H.value,
+        gapY: F.value,
         headerHeight: I.value,
-        footerHeight: N.value,
-        bucketPx: Oe
+        footerHeight: q.value,
+        bucketPx: Xe
       });
-      F.value = e.positions, O.value = e.heights, be.value = e.buckets, ke.value = e.contentHeight, ae.value = e.indexById;
+      P.value = e.positions, $.value = e.heights, be.value = e.buckets, xe.value = e.contentHeight, ae.value = e.indexById;
     }
-    const Qe = B(() => Math.max(ke.value, x.value) + _t), pe = B(() => wt({
+    const nt = B(() => Math.max(xe.value, b.value) + Nt), pe = B(() => Mt({
       itemCount: o.value.length,
-      viewportHeight: x.value,
+      viewportHeight: b.value,
       scrollTop: A.value,
       overscanPx: l.overscanPx,
-      bucketPx: Oe,
+      bucketPx: Xe,
       buckets: be.value
     }));
-    U(
+    G(
       pe,
       (e) => {
         if (!e?.length) return;
         const a = [];
         for (const t of e) {
           const s = o.value[t]?.id;
-          s && X.value.has(s) && (re.has(s) || (re.add(s), a.push(s)));
+          s && j.value.has(s) && (re.has(s) || (re.add(s), a.push(s)));
         }
-        a.length && ($(() => {
-          const t = new Set(G.value);
+        a.length && (W(() => {
+          const t = new Set(K.value);
           for (const s of a) t.add(s);
-          G.value = t;
-        }), Ue(() => {
-          const t = new Set(X.value);
+          K.value = t;
+        }), Qe(() => {
+          const t = new Set(j.value);
           for (const s of a) t.delete(s);
-          X.value = t, setTimeout(() => {
-            const s = new Set(G.value);
-            for (const r of a)
-              s.delete(r), re.delete(r);
-            G.value = s;
-          }, ee);
+          j.value = t, setTimeout(() => {
+            const s = new Set(K.value);
+            for (const i of a)
+              s.delete(i), re.delete(i);
+            K.value = s;
+          }, je);
         }));
       },
       { flush: "post" }
     );
-    async function Ze() {
-      if (!(le.value || K.value) && !(l.mode !== "backfill" && C.value == null) && !(l.mode === "backfill" && C.value == null && de.value.length === 0))
+    async function at() {
+      if (!(se.value || J.value) && !(l.mode !== "backfill" && C.value == null) && !(l.mode === "backfill" && C.value == null && de.value.length === 0))
         try {
-          if (K.value = !0, j.value = "", l.mode === "backfill") {
-            const t = await Te.loadBackfillBatch(C.value);
-            t.pages.length && (D.value = [...D.value, ...t.pages]), J(t.batchItems), o.value = [...o.value, ...t.batchItems], C.value = t.nextPage;
+          if (J.value = !0, U.value = "", l.mode === "backfill") {
+            const t = await _e.loadBackfillBatch(C.value);
+            t.pages.length && (D.value = [...D.value, ...t.pages]), Q(t.batchItems), o.value = [...o.value, ...t.batchItems], C.value = t.nextPage;
             return;
           }
           const e = C.value;
           if (e == null) return;
           const a = await He(e);
-          D.value = [...D.value, e], J(a.items), o.value = [...o.value, ...a.items], C.value = a.nextPage;
+          D.value = [...D.value, e], Q(a.items), o.value = [...o.value, ...a.items], C.value = a.nextPage;
         } catch (e) {
-          j.value = e instanceof Error ? e.message : String(e);
+          U.value = e instanceof Error ? e.message : String(e);
         } finally {
-          K.value = !1;
+          J.value = !1;
         }
     }
-    function et() {
-      const e = d.value;
+    function st() {
+      const e = h.value;
       if (!e) return;
-      A.value = e.scrollTop, x.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= l.prefetchThresholdPx && Ze();
+      A.value = e.scrollTop, b.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= l.prefetchThresholdPx && at();
     }
     function ze() {
-      return d.value;
+      return h.value;
     }
-    function qe(e) {
-      m.value = z(e), x.value = e.clientHeight;
+    function Ne(e) {
+      p.value = z(e), b.value = e.clientHeight;
     }
-    function tt() {
-      typeof ResizeObserver > "u" || (H = new ResizeObserver(() => {
+    function lt() {
+      typeof ResizeObserver > "u" || (_ = new ResizeObserver(() => {
         const e = ze();
-        e && qe(e);
+        e && Ne(e);
       }));
     }
-    function nt() {
+    function ot() {
       return {
         enabled: l.mode === "backfill",
         isBackfillActive: !1,
@@ -567,8 +585,8 @@ const xt = {
           target: 0
         },
         cooldownMsRemaining: 0,
-        cooldownMsTotal: xe(l.backfillRequestDelayMs),
-        pageSize: Xe(l.pageSize),
+        cooldownMsTotal: we(l.backfillRequestDelayMs),
+        pageSize: Ue(l.pageSize),
         bufferSize: 0,
         lastBatch: null,
         totals: {
@@ -577,55 +595,55 @@ const xt = {
         }
       };
     }
-    function Ne(e) {
-      ve = 0, W.clear(), he.length = 0, D.value = [], o.value = [], C.value = e, de.value = [], ge.value = nt(), le.value = !0, K.value = !1, j.value = "";
+    function qe(e) {
+      ve = 0, O.clear(), X.length = 0, D.value = [], o.value = [], C.value = e, de.value = [], he.value = ot(), se.value = !0, J.value = !1, U.value = "";
     }
     async function Ee(e) {
       try {
         if (l.mode === "backfill") {
-          const a = await Te.loadBackfillBatch(e);
-          D.value = a.pages.length ? a.pages : [e], J(a.batchItems), o.value = a.batchItems, C.value = a.nextPage;
+          const a = await _e.loadBackfillBatch(e);
+          D.value = a.pages.length ? a.pages : [e], Q(a.batchItems), o.value = a.batchItems, C.value = a.nextPage;
         } else {
           const a = await He(e);
-          D.value = [e], J(a.items), o.value = a.items, C.value = a.nextPage;
+          D.value = [e], Q(a.items), o.value = a.items, C.value = a.nextPage;
         }
       } catch (a) {
-        j.value = a instanceof Error ? a.message : String(a);
+        U.value = a instanceof Error ? a.message : String(a);
       } finally {
-        le.value = !1;
+        se.value = !1;
       }
     }
-    function at() {
+    function it() {
       const e = ze();
-      e && (qe(e), A.value = e.scrollTop, H?.observe(e));
+      e && (Ne(e), A.value = e.scrollTop, _?.observe(e));
     }
-    ct(async () => {
-      tt(), Ne(l.page), await Ee(l.page), await we(), at();
-    }), ft(() => {
-      H?.disconnect();
-    }), U(
+    ht(async () => {
+      lt(), it(), qe(l.page), await Ee(l.page);
+    }), gt(() => {
+      _?.disconnect();
+    }), G(
       () => l.page,
       async (e) => {
-        Ne(e), await Ee(e);
+        qe(e), await Ee(e);
       }
-    ), U(
-      R,
+    ), G(
+      H,
       () => {
-        const e = d.value;
-        e && (m.value = z(e));
+        const e = h.value;
+        e && (p.value = z(e));
       },
       { immediate: !1 }
     );
-    const ye = B(() => ht(m.value, l.itemWidth)), Q = B(
-      () => gt(m.value, ye.value, l.itemWidth, R.value)
+    const ye = B(() => yt(p.value, l.itemWidth)), Z = B(
+      () => wt(p.value, ye.value, l.itemWidth, H.value)
     );
-    U(
-      [ye, Q, R, P, I, N],
+    G(
+      [ye, Z, H, F, I, q],
       () => {
         Ce();
       },
       { immediate: !0 }
-    ), U(
+    ), G(
       // Performance note: this component targets very large arrays (e.g. 10k items).
       // Avoid deep watchers over items; rebuild layout only when the list structure
       // changes (new array reference or length change). This keeps metadata-only
@@ -634,20 +652,20 @@ const xt = {
       () => Ce(),
       { immediate: !0 }
     );
-    const lt = B(() => [
+    const rt = B(() => [
       "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",
       M.class
     ]);
-    return (e, a) => (k(), b("section", dt(g.value, { class: lt.value }), [
+    return (e, a) => (k(), x("section", mt(m.value, { class: rt.value }), [
       T("div", {
         ref_key: "scrollViewportRef",
-        ref: d,
+        ref: h,
         "data-testid": "items-scroll-container",
         class: "mt-4 min-h-0 flex-1 overflow-auto",
-        style: q({ paddingRight: R.value + "px" }),
-        onScroll: et
+        style: N({ paddingRight: H.value + "px" }),
+        onScroll: st
       }, [
-        le.value ? (k(), b("div", xt, a[0] || (a[0] = [
+        se.value ? (k(), x("div", It, a[0] || (a[0] = [
           T("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
             T("svg", {
               class: "h-5 w-5 animate-spin text-slate-500",
@@ -671,26 +689,26 @@ const xt = {
             ]),
             T("span", null, "Loading…")
           ], -1)
-        ]))) : j.value ? (k(), b("p", bt, "Error: " + Ye(j.value), 1)) : (k(), b("div", {
+        ]))) : U.value ? (k(), x("p", St, "Error: " + Ve(U.value), 1)) : (k(), x("div", {
           key: 2,
           class: "relative",
-          style: q({ height: Qe.value + "px" })
+          style: N({ height: nt.value + "px" })
         }, [
-          (k(!0), b(Ve, null, De(pe.value, (t) => (k(), b("article", {
+          (k(!0), x(Ye, null, De(pe.value, (t) => (k(), x("article", {
             key: o.value[t].id,
             "data-testid": "item-card",
             class: "absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",
-            style: q({
-              width: Q.value + "px",
-              transition: je(o.value[t].id),
-              transform: We(t)
+            style: N({
+              width: Z.value + "px",
+              transition: Ke(o.value[t].id),
+              transform: Je(t)
             })
           }, [
-            E.value || I.value > 0 ? (k(), b("div", {
+            E.value || I.value > 0 ? (k(), x("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: q(te.value)
+              style: N(te.value)
             }, [
               ie(e.$slots, "itemHeader", {
                 item: o.value[t],
@@ -699,9 +717,9 @@ const xt = {
             ], 4)) : oe("", !0),
             T("div", {
               class: "bg-slate-100",
-              style: q({ aspectRatio: o.value[t].width + " / " + o.value[t].height })
+              style: N({ aspectRatio: o.value[t].width + " / " + o.value[t].height })
             }, [
-              o.value[t].type === "image" ? (k(), b("img", {
+              o.value[t].type === "image" ? (k(), x("img", {
                 key: 0,
                 class: "h-full w-full object-cover",
                 src: o.value[t].preview,
@@ -709,7 +727,7 @@ const xt = {
                 height: o.value[t].height,
                 loading: "lazy",
                 alt: o.value[t].id
-              }, null, 8, kt)) : (k(), b("video", {
+              }, null, 8, Bt)) : (k(), x("video", {
                 key: 1,
                 class: "h-full w-full object-cover",
                 poster: o.value[t].preview,
@@ -719,14 +737,14 @@ const xt = {
                 T("source", {
                   src: o.value[t].original,
                   type: "video/mp4"
-                }, null, 8, It)
-              ], 8, Mt))
+                }, null, 8, Pt)
+              ], 8, Ft))
             ], 4),
-            L.value || N.value > 0 ? (k(), b("div", {
+            L.value || q.value > 0 ? (k(), x("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: q(ne.value)
+              style: N(ne.value)
             }, [
               ie(e.$slots, "itemFooter", {
                 item: o.value[t],
@@ -734,21 +752,21 @@ const xt = {
               })
             ], 4)) : oe("", !0)
           ], 4))), 128)),
-          (k(!0), b(Ve, null, De(V.value, (t) => (k(), b("article", {
+          (k(!0), x(Ye, null, De(Y.value, (t) => (k(), x("article", {
             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: q({
+            style: N({
               width: t.width + "px",
-              transition: "transform " + ee + "ms ease-out",
-              transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + (t.fromY - t.height) + "px,0)"
+              transition: "transform " + We + "ms ease-out",
+              transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + ke(t.height) + "px,0)"
             })
           }, [
-            E.value || I.value > 0 ? (k(), b("div", {
+            E.value || I.value > 0 ? (k(), x("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: q(te.value)
+              style: N(te.value)
             }, [
               ie(e.$slots, "itemHeader", {
                 item: t.item,
@@ -758,9 +776,9 @@ const xt = {
             ], 4)) : oe("", !0),
             T("div", {
               class: "bg-slate-100",
-              style: q({ aspectRatio: t.item.width + " / " + t.item.height })
+              style: N({ aspectRatio: t.item.width + " / " + t.item.height })
             }, [
-              t.item.type === "image" ? (k(), b("img", {
+              t.item.type === "image" ? (k(), x("img", {
                 key: 0,
                 class: "h-full w-full object-cover",
                 src: t.item.preview,
@@ -768,7 +786,7 @@ const xt = {
                 height: t.item.height,
                 loading: "lazy",
                 alt: t.item.id
-              }, null, 8, St)) : (k(), b("video", {
+              }, null, 8, Tt)) : (k(), x("video", {
                 key: 1,
                 class: "h-full w-full object-cover",
                 poster: t.item.preview,
@@ -778,14 +796,14 @@ const xt = {
                 T("source", {
                   src: t.item.original,
                   type: "video/mp4"
-                }, null, 8, Pt)
-              ], 8, Bt))
+                }, null, 8, Ht)
+              ], 8, _t))
             ], 4),
-            L.value || N.value > 0 ? (k(), b("div", {
+            L.value || q.value > 0 ? (k(), x("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: q(ne.value)
+              style: N(ne.value)
             }, [
               ie(e.$slots, "itemFooter", {
                 item: t.item,
@@ -795,8 +813,8 @@ const xt = {
             ], 4)) : oe("", !0)
           ], 4))), 128))
         ], 4)),
-        T("div", Ft, [
-          K.value ? (k(), b("span", Tt, a[1] || (a[1] = [
+        T("div", Rt, [
+          J.value ? (k(), x("span", At, a[1] || (a[1] = [
             T("svg", {
               class: "h-4 w-4 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
@@ -818,18 +836,18 @@ const xt = {
               })
             ], -1),
             T("span", null, "Loading more…", -1)
-          ]))) : C.value == null ? (k(), b("span", Ht, "End of list")) : (k(), b("span", Rt, "Scroll to load page " + Ye(C.value), 1))
+          ]))) : C.value == null ? (k(), x("span", Ct, "End of list")) : (k(), x("span", zt, "Scroll to load page " + Ve(C.value), 1))
         ])
       ], 36)
     ], 16));
   }
-}), zt = {
+}), Lt = {
   install(n) {
-    n.component("Masonry", At);
+    n.component("Masonry", qt);
   }
 };
 export {
-  At as Masonry,
-  zt as VibePlugin,
-  vt as masonryDefaults
+  qt as Masonry,
+  Lt as VibePlugin,
+  pt as masonryDefaults
 };

package/package.json

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