@wyxos/vibe 2.0.1 → 2.0.3

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 wt, mergeDefaults as yt, useAttrs as bt, useSlots as xt, computed as B, ref as g, shallowRef as kt, watch as Z, onMounted as Mt, onUnmounted as St, createElementBlock as x, openBlock as k, mergeProps as It, createElementVNode as _, normalizeStyle as z, toDisplayString as Ge, Fragment as Ue, renderList as Ke, createCommentVNode as fe, renderSlot as de, nextTick as Je } from "vue";
+const Bt = {
   mode: "default",
   pageSize: 20,
   backfillRequestDelayMs: 2e3,
@@ -12,113 +12,113 @@ const vt = {
   footerHeight: 0,
   overscanPx: 600
 };
-function ht(n, y) {
-  return !n || n <= 0 || !y || y <= 0 ? 1 : Math.max(1, Math.floor(n / y));
+function Ft(n, w) {
+  return !n || n <= 0 || !w || w <= 0 ? 1 : Math.max(1, Math.floor(n / w));
 }
-function gt(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;
-  return !w || w <= 0 ? S : w / y;
+function Pt(n, w, I, o = 0) {
+  if (!n || n <= 0 || !w || w <= 0) return I;
+  const r = typeof o == "number" && o > 0 ? o : 0, M = Math.max(0, w - 1) * r, y = n - M;
+  return !y || y <= 0 ? I : y / w;
 }
-function mt(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 Tt(n, w) {
+  const I = n?.width, o = n?.height;
+  return typeof I == "number" && typeof o == "number" && I > 0 && o > 0 ? o / I * w : w;
 }
-function Xe(n) {
+function nt(n) {
   return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
 }
-function xe(n) {
+function ke(n) {
   return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
 }
-function pt(n) {
-  async function y(l) {
-    const i = xe(l);
-    if (i <= 0) return;
+function _t(n) {
+  async function w(o) {
+    const r = ke(o);
+    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);
+    const M = Date.now(), y = 100;
+    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());
-      }, w);
+          cooldownMsTotal: r,
+          cooldownMsRemaining: b
+        }, b <= 0 && (clearInterval(h), m());
+      }, y);
     });
   }
-  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 = {
+  async function I(o) {
+    const r = nt(n.getPageSize()), M = n.isEnabled(), y = ke(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,
       isRequestInFlight: !1,
       requestPage: null,
-      cooldownMsTotal: w,
+      cooldownMsTotal: y,
       cooldownMsRemaining: 0,
       progress: {
         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 = o, H = 0, A = !1;
+    for (; m.length < r && b != null; ) {
+      const N = b;
+      A && (n.stats.value = {
         ...n.stats.value,
         enabled: M,
         isBackfillActive: !0,
         isRequestInFlight: !0,
-        requestPage: z,
+        requestPage: N,
         progress: {
-          collected: Math.min(g.length, i),
-          target: i
+          collected: Math.min(m.length, r),
+          target: r
         },
-        cooldownMsTotal: w,
+        cooldownMsTotal: y,
         cooldownMsRemaining: 0,
-        pageSize: i
+        pageSize: r
       });
-      const I = await n.getContent(z);
-      m.push(z), H && (n.stats.value = {
+      const S = await n.getContent(N);
+      p.push(N), A && (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 = {
+      }), H += S.items.length, n.markEnterFromLeft(S.items), m.push(...S.items), b = S.nextPage, !A && m.length < r && b != null ? (A = !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,
+        cooldownMsTotal: y,
         cooldownMsRemaining: 0,
-        pageSize: i
-      }) : H && (n.stats.value = {
+        pageSize: r
+      }) : A && (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);
+      }), A && m.length < r && b != null && await w(y);
     }
-    const R = g.slice(0, i), P = g.slice(i);
-    return n.buffer.value = P, n.stats.value = {
+    const R = m.slice(0, r), F = m.slice(r);
+    return n.buffer.value = F, n.stats.value = {
       ...n.stats.value,
       enabled: M,
       isBackfillActive: !1,
@@ -128,72 +128,72 @@ function pt(n) {
         collected: 0,
         target: 0
       },
-      cooldownMsTotal: w,
+      cooldownMsTotal: y,
       cooldownMsRemaining: 0,
-      pageSize: i,
-      bufferSize: P.length,
+      pageSize: r,
+      bufferSize: F.length,
       lastBatch: {
-        startPage: l,
-        pages: m,
-        usedFromBuffer: d,
-        fetchedFromNetwork: A,
-        collectedTotal: g.length,
+        startPage: o,
+        pages: p,
+        usedFromBuffer: h,
+        fetchedFromNetwork: H,
+        collectedTotal: m.length,
         emitted: R.length,
-        carried: P.length
+        carried: F.length
       },
       totals: {
-        pagesFetched: n.stats.value.totals.pagesFetched + m.length,
-        itemsFetchedFromNetwork: n.stats.value.totals.itemsFetchedFromNetwork + A
+        pagesFetched: n.stats.value.totals.pagesFetched + p.length,
+        itemsFetchedFromNetwork: n.stats.value.totals.itemsFetchedFromNetwork + H
       }
-    }, { batchItems: R, pages: m, nextPage: x };
+    }, { batchItems: R, pages: p, nextPage: b };
   }
-  return { loadBackfillBatch: S };
+  return { loadBackfillBatch: I };
 }
-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();
+function At(n) {
+  const w = n.columnCount, I = n.columnWidth, o = n.gapX, r = n.gapY, M = n.headerHeight, y = n.footerHeight, m = n.bucketPx, h = Array.from({ length: w }, () => 0), p = new Array(n.items.length), b = new Array(n.items.length), H = /* @__PURE__ */ new Map(), A = /* @__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);
-    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 F = 0; F < n.items.length; F += 1) {
+    const N = n.items[F];
+    N?.id && A.set(N.id, F);
+    let S = 0;
+    for (let P = 1; P < h.length; P += 1)
+      h[P] < h[S] && (S = P);
+    const q = S * (I + o), L = h[S], V = Tt(N, I) + M + y;
+    p[F] = { x: q, y: L }, b[F] = V, h[S] = L + V + r, R = Math.max(R, L + V);
+    const le = Math.floor(L / m), se = Math.floor((L + V) / m);
+    for (let P = le; P <= se; P += 1) {
+      const W = H.get(P);
+      W ? W.push(F) : H.set(P, [F]);
     }
   }
-  return { positions: m, heights: x, buckets: A, contentHeight: R, indexById: H };
+  return { positions: p, heights: b, buckets: H, contentHeight: R, indexById: A };
 }
-function wt(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);
+function Rt(n) {
+  const w = n.itemCount;
+  if (!w) return [];
+  if (n.viewportHeight <= 0) return Array.from({ length: w }, (h, p) => p);
+  const I = Math.max(0, n.scrollTop - n.overscanPx), o = n.scrollTop + n.viewportHeight + n.overscanPx, r = Math.floor(I / n.bucketPx), M = Math.floor(o / n.bucketPx), y = /* @__PURE__ */ new Set();
+  for (let h = r; h <= M; h += 1) {
+    const p = n.buckets.get(h);
+    if (p)
+      for (const b of p) y.add(b);
   }
-  const g = Array.from(w);
-  return g.sort((d, m) => d - m), g;
+  const m = Array.from(y);
+  return m.sort((h, p) => h - p), m;
 }
-const xt = {
+const Et = {
   key: 0,
   class: "flex h-full items-center justify-center"
-}, bt = {
+}, Ht = {
   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 = {
+}, Ct = ["src", "width", "height", "alt"], Nt = ["poster"], zt = ["src"], qt = ["src", "width", "height", "alt"], Lt = ["poster"], Yt = ["src"], Dt = { 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 }, Rt = { key: 2 }, _t = 200, Oe = 600, ee = 300, At = /* @__PURE__ */ st({
+}, Ot = { key: 1 }, $t = { key: 2 }, Xt = 200, Qe = 600, Ze = 300, et = 600, tt = 600, jt = 5, Wt = 1e3, Gt = /* @__PURE__ */ wt({
   inheritAttrs: !1,
   __name: "Masonry",
-  props: /* @__PURE__ */ ot({
+  props: /* @__PURE__ */ yt({
     getContent: {},
     mode: {},
     pageSize: {},
@@ -207,171 +207,226 @@ const xt = {
     headerHeight: {},
     footerHeight: {},
     overscanPx: {}
-  }, vt),
+  }, Bt),
   emits: ["update:items"],
-  setup(n, { expose: y, emit: S }) {
-    const l = n, i = S, M = it(), w = rt(), g = B(() => {
+  setup(n, { expose: w, emit: I }) {
+    const o = n, r = I, M = bt(), y = xt(), 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);
-    function z(e) {
+    }), h = g(null), p = g(0), b = g(0), H = g(0);
+    let A;
+    const R = B(() => o.gapX), F = B(() => o.gapY);
+    function N(e) {
       if (!e) return 0;
       const a = Math.max(0, R.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(() => {
-      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) {
-      const a = ue.value.get(e);
+    const S = B(() => o.headerHeight), q = B(() => o.footerHeight), L = B(() => !!y.itemHeader), V = B(() => !!y.itemFooter), le = B(() => {
+      if (S.value > 0) return { height: `${S.value}px` };
+    }), se = B(() => {
+      if (q.value > 0) return { height: `${q.value}px` };
+    }), P = g([]), W = g([]), Me = g(/* @__PURE__ */ new Map()), Se = g(0), oe = g(/* @__PURE__ */ new Map());
+    function Ie(e) {
+      const a = typeof e == "number" && Number.isFinite(e) ? e : 0;
+      return -Math.max(0, a);
+    }
+    const O = g(/* @__PURE__ */ new Set()), G = g(/* @__PURE__ */ new Set()), ie = /* @__PURE__ */ new Set(), re = g(/* @__PURE__ */ new Map()), Y = g(/* @__PURE__ */ new Set()), D = g([]);
+    function at(e) {
+      const a = re.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 lt(e) {
+      if (G.value.has(e)) return `transform ${et}ms ease-out`;
+      if (Y.value.has(e)) return `transform ${Ze}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 st(e) {
+      const t = i.value[e]?.id, l = P.value[e] ?? { x: 0, y: 0 }, s = W.value[e] ?? 0, f = s > 0 ? s : ne.value, u = l.x, d = t && O.value.has(t) ? Ie(f) : l.y, v = t ? at(t) : { dx: 0, dy: 0 };
+      return `translate3d(${u + v.dx}px,${d + v.dy}px,0)`;
     }
-    function $(e) {
+    function U(e) {
       (typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(0), 0))(() => e());
     }
-    function Ue(e) {
-      $(() => $(e));
+    function ot(e) {
+      U(() => U(e));
     }
-    function ce(e) {
+    const Be = /* @__PURE__ */ new Set();
+    function Fe(e) {
+      return typeof e == "number" && Number.isFinite(e) && e > 0;
+    }
+    function ve(e) {
       if (!Array.isArray(e) || e.length === 0) return;
-      const a = new Set(X.value);
+      const a = new Set(O.value);
       let t = !1;
-      for (const s of e) {
-        const r = s?.id;
-        r && (a.has(r) || (a.add(r), t = !0));
+      for (const l of e) {
+        const s = l?.id;
+        if (s) {
+          if (!Be.has(s)) {
+            const f = l?.width, u = l?.height;
+            (!Fe(f) || !Fe(u)) && (Be.add(s), console.warn(
+              `[Masonry] Item "${s}" has invalid dimensions (width=${String(f)}, height=${String(
+                u
+              )}); layout expects { id, width, height }.`
+            ));
+          }
+          a.has(s) || (a.add(s), t = !0);
+        }
       }
-      t && (X.value = a);
+      t && (O.value = a);
     }
-    function Me() {
+    function Pe() {
       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 });
+      for (const a of be.value) {
+        const l = i.value[a]?.id;
+        if (!l) continue;
+        const s = P.value[a];
+        s && e.set(l, { x: s.x, y: s.y });
       }
       return e;
     }
-    function Ie(e, a) {
+    function Te(e, a) {
       if (!e.size) return;
-      const t = /* @__PURE__ */ new Map(), s = [];
-      for (const [v, p] 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 t = /* @__PURE__ */ new Map(), l = [];
+      for (const [f, u] of e.entries()) {
+        if (a?.has(f)) continue;
+        const d = oe.value.get(f);
+        if (d == null) continue;
+        const v = P.value[d];
+        if (!v) continue;
+        const c = u.x - v.x, E = u.y - v.y;
+        (c || E) && (t.set(f, { dx: c, dy: E }), l.push(f));
       }
       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]), $(() => {
-          ue.value = /* @__PURE__ */ new Map();
+      re.value = t;
+      const s = new Set(Y.value);
+      for (const f of l) s.delete(f);
+      Y.value = s, U(() => {
+        Y.value = /* @__PURE__ */ new Set([...Y.value, ...l]), U(() => {
+          re.value = /* @__PURE__ */ new Map();
         });
       }), setTimeout(() => {
-        const v = new Set(Y.value);
-        for (const p of s) v.delete(p);
-        Y.value = v;
-      }, ee);
-    }
-    const le = h(!0), K = h(!1), j = h(""), D = h([]), Se = h([]), fe = h([]), C = h(l.page), de = h([]);
-    let ve = 0;
-    function J(e) {
+        const f = new Set(Y.value);
+        for (const u of l) f.delete(u);
+        Y.value = f;
+      }, Ze);
+    }
+    const ue = g(!0), ee = g(!1), K = g("");
+    let T = 0;
+    function _e(e) {
+      return e instanceof Error && e.name === "AbortError";
+    }
+    function Ae() {
+      const e = new Error("aborted");
+      return e.name = "AbortError", e;
+    }
+    function it(e) {
+      return new Promise((a) => setTimeout(a, e));
+    }
+    async function Re(e, a) {
+      let t = 0;
+      for (; ; ) {
+        if (a !== T) throw Ae();
+        try {
+          return await o.getContent(e);
+        } catch (l) {
+          if (a !== T) throw Ae();
+          if (t >= jt) throw l;
+          t += 1, await it(t * Wt);
+        }
+      }
+    }
+    const $ = g([]), Ee = g([]), he = g([]), C = g(o.page), ge = g([]);
+    let J = null, Q = null, me = 0;
+    function te(e) {
       for (const a of e)
-        !a || typeof a != "object" || a.id && a.originalIndex == null && (a.originalIndex = ve, ve += 1);
+        !a || typeof a != "object" || a.id && a.originalIndex == null && (a.originalIndex = me, me += 1);
     }
-    const W = /* @__PURE__ */ new Map(), he = [];
-    function se(e) {
+    const X = /* @__PURE__ */ new Map(), j = [];
+    function ce(e) {
       return typeof e == "number" && Number.isFinite(e);
     }
-    function Ge(e, a) {
+    function rt(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 u of e) {
+        const d = u?.id;
+        d && t.add(d);
       }
-      const s = [];
-      for (const p of a) {
-        const f = p?.id;
-        f && (t.has(f) || (s.push(p), t.add(f)));
+      const l = [];
+      for (const u of a) {
+        const d = u?.id;
+        d && (t.has(d) || (l.push(u), t.add(d)));
       }
-      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;
-      }), v = e.slice();
-      for (const p of r) {
-        const f = p.originalIndex;
-        if (!se(f)) {
-          v.push(p);
+      if (!l.length) return e;
+      const s = l.slice().sort((u, d) => {
+        const v = ce(u.originalIndex) ? u.originalIndex : Number.POSITIVE_INFINITY, c = ce(d.originalIndex) ? d.originalIndex : Number.POSITIVE_INFINITY;
+        return v - c;
+      }), f = e.slice();
+      for (const u of s) {
+        const d = u.originalIndex;
+        if (!ce(d)) {
+          f.push(u);
           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 v = 0, c = f.length;
+        for (; v < c; ) {
+          const E = v + c >> 1, ae = f[E]?.originalIndex;
+          (ce(ae) ? ae : Number.POSITIVE_INFINITY) <= d ? v = E + 1 : c = E;
         }
-        v.splice(c, 0, p);
+        f.splice(v, 0, u);
       }
-      return v;
+      return f;
     }
-    async function Be(e) {
+    async function He(e) {
       if (!e.length) return;
-      ce(e);
-      const a = Me();
-      o.value = Ge(o.value, e), await we(), Ie(a);
+      ve(e);
+      const a = Pe();
+      i.value = rt(i.value, e), await Je(), Te(a);
     }
-    async function Pe(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(Re).filter(Boolean);
+    async function Ce(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(ye).filter(Boolean);
       if (!t.length) return;
-      const s = [];
-      for (const r of t) {
-        const v = W.get(r);
-        v && s.push(v);
+      const l = [];
+      for (const s of t) {
+        const f = X.get(s);
+        f && l.push(f);
       }
-      if (s.length) {
-        await Be(s);
-        for (const r of s)
-          r?.id && W.delete(r.id);
+      if (l.length) {
+        await He(l);
+        for (const s of l)
+          s?.id && X.delete(s.id);
       }
     }
-    async function Fe() {
-      const e = he.pop();
+    async function Ne() {
+      const e = j.pop();
       if (!e?.length) return;
       const a = [];
       for (const t of e) {
-        const s = W.get(t);
-        s && a.push(s);
+        const l = X.get(t);
+        l && a.push(l);
       }
       if (a.length) {
-        await Be(a);
+        await He(a);
         for (const t of a)
-          t?.id && W.delete(t.id);
+          t?.id && X.delete(t.id);
       }
     }
-    async function Ke(e) {
-      return Pe(e);
+    async function ut(e) {
+      return Ce(e);
     }
-    async function Je() {
-      return Fe();
+    async function ct() {
+      return Ne();
     }
-    const ge = ut({
+    function ze(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(ye).filter(Boolean);
+      if (!t.length) return;
+      const l = new Set(t);
+      for (const s of l) X.delete(s);
+      for (let s = j.length - 1; s >= 0; s -= 1) {
+        const u = j[s].filter((d) => !l.has(d));
+        u.length ? j[s] = u : j.splice(s, 1);
+      }
+    }
+    const pe = kt({
       enabled: !1,
       isBackfillActive: !1,
       isRequestInFlight: !1,
@@ -389,176 +444,187 @@ const xt = {
         pagesFetched: 0,
         itemsFetchedFromNetwork: 0
       }
-    }), Te = pt({
-      getContent: (e) => l.getContent(e),
-      markEnterFromLeft: ce,
-      buffer: de,
-      stats: ge,
-      isEnabled: () => l.mode === "backfill",
-      getPageSize: () => l.pageSize,
-      getRequestDelayMs: () => l.backfillRequestDelayMs
-    }), me = B(() => l.items !== void 0);
-    U(
-      () => l.items,
+    }), qe = _t({
+      getContent: (e) => Re(e, T),
+      markEnterFromLeft: ve,
+      buffer: ge,
+      stats: pe,
+      isEnabled: () => o.mode === "backfill",
+      getPageSize: () => o.pageSize,
+      getRequestDelayMs: () => o.backfillRequestDelayMs
+    }), we = B(() => o.items !== void 0);
+    Z(
+      () => o.items,
       (e) => {
-        me.value && (fe.value = Array.isArray(e) ? e : []);
+        we.value && (he.value = Array.isArray(e) ? e : []);
       },
       { immediate: !0 }
     );
-    const o = B({
+    const i = B({
       get() {
-        return me.value ? fe.value : Se.value;
+        return we.value ? he.value : Ee.value;
       },
       set(e) {
-        me.value ? (fe.value = e, i("update:items", e)) : Se.value = e;
+        we.value ? (he.value = e, r("update:items", e)) : Ee.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 };
+    async function Le(e) {
+      const a = await Re(e, T);
+      return te(a.items), ve(a.items), { items: a.items, nextPage: a.nextPage };
     }
-    function Re(e) {
+    function ye(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 Ye(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(ye).filter(Boolean);
       if (!t.length) return;
-      const s = new Set(t), r = [];
-      for (const c of s) {
-        const u = ae.value.get(c);
-        if (u == null) continue;
-        const _ = o.value[u];
-        _ && (W.set(c, _), r.push(c));
+      const l = new Set(t), s = [];
+      for (const v of l) {
+        const c = oe.value.get(v);
+        if (c == null) continue;
+        const E = i.value[c];
+        E && (X.set(v, E), s.push(v));
       }
-      r.length && he.push(r);
-      const v = Me(), p = Q.value, f = [];
-      for (const c of s) {
-        const u = ae.value.get(c);
-        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,
-          height: Le,
+      s.length && j.push(s);
+      const f = Pe(), u = ne.value, d = [];
+      for (const v of l) {
+        const c = oe.value.get(v);
+        if (c == null) continue;
+        const E = i.value[c];
+        if (!E) continue;
+        const ae = P.value[c] ?? { x: 0, y: 0 }, We = W.value[c] ?? u;
+        d.push({
+          id: v,
+          item: E,
+          fromX: ae.x,
+          fromY: ae.y,
+          width: u,
+          height: We,
           leaving: !0
         });
       }
-      if (f.length && (V.value = [...V.value, ...f]), o.value = o.value.filter((c) => {
-        const u = c?.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
+      if (d.length && (D.value = [...D.value, ...d]), i.value = i.value.filter((v) => {
+        const c = v?.id;
+        return !c || !l.has(c);
+      }), await Je(), Te(f, l), d.length) {
+        const v = new Set(d.map((c) => c.id));
+        U(() => {
+          D.value = D.value.map(
+            (c) => v.has(c.id) ? { ...c, leaving: !1 } : c
           ), setTimeout(() => {
-            V.value = V.value.filter((u) => !c.has(u.id));
-          }, ee);
+            D.value = D.value.filter((c) => !v.has(c.id));
+          }, tt);
         });
       }
     }
-    async function Ae(e) {
-      return _e(e);
+    async function De(e) {
+      return Ye(e);
     }
-    y({
-      remove: _e,
-      restore: Ke,
-      undo: Je,
+    w({
+      remove: Ye,
+      restore: ut,
+      undo: ct,
+      forget: ze,
       // Aliases (kept for now; can be removed if you want strictly short API only).
-      restoreRemoved: Pe,
-      undoLastRemoval: Fe,
-      backfillStats: ge
+      restoreRemoved: Ce,
+      undoLastRemoval: Ne,
+      forgetRemoved: ze,
+      backfillStats: pe
     });
-    function Ce() {
-      const e = yt({
-        items: o.value,
-        columnCount: ye.value,
-        columnWidth: Q.value,
+    function Ve() {
+      const e = At({
+        items: i.value,
+        columnCount: xe.value,
+        columnWidth: ne.value,
         gapX: R.value,
-        gapY: P.value,
-        headerHeight: I.value,
-        footerHeight: N.value,
-        bucketPx: Oe
+        gapY: F.value,
+        headerHeight: S.value,
+        footerHeight: q.value,
+        bucketPx: Qe
       });
-      F.value = e.positions, O.value = e.heights, be.value = e.buckets, ke.value = e.contentHeight, ae.value = e.indexById;
-    }
-    const Qe = B(() => Math.max(ke.value, x.value) + _t), pe = B(() => wt({
-      itemCount: o.value.length,
-      viewportHeight: x.value,
-      scrollTop: A.value,
-      overscanPx: l.overscanPx,
-      bucketPx: Oe,
-      buckets: be.value
+      P.value = e.positions, W.value = e.heights, Me.value = e.buckets, Se.value = e.contentHeight, oe.value = e.indexById;
+    }
+    const ft = B(() => Math.max(Se.value, b.value) + Xt), be = B(() => Rt({
+      itemCount: i.value.length,
+      viewportHeight: b.value,
+      scrollTop: H.value,
+      overscanPx: o.overscanPx,
+      bucketPx: Qe,
+      buckets: Me.value
     }));
-    U(
-      pe,
+    Z(
+      be,
       (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)));
+          const l = i.value[t]?.id;
+          l && O.value.has(l) && (ie.has(l) || (ie.add(l), a.push(l)));
         }
-        a.length && ($(() => {
+        a.length && (U(() => {
           const t = new Set(G.value);
-          for (const s of a) t.add(s);
+          for (const l of a) t.add(l);
           G.value = t;
-        }), Ue(() => {
-          const t = new Set(X.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);
+        }), ot(() => {
+          const t = new Set(O.value);
+          for (const l of a) t.delete(l);
+          O.value = t, setTimeout(() => {
+            const l = new Set(G.value);
+            for (const s of a)
+              l.delete(s), ie.delete(s);
+            G.value = l;
+          }, et);
         }));
       },
       { 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 dt() {
+      if (J) return J;
+      if (ue.value || ee.value || o.mode !== "backfill" && C.value == null || o.mode === "backfill" && C.value == null && ge.value.length === 0)
+        return;
+      const e = T;
+      let a = null;
+      return a = (async () => {
         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 (ee.value = !0, K.value = "", o.mode === "backfill") {
+            const s = await qe.loadBackfillBatch(C.value);
+            if (e !== T) return;
+            s.pages.length && ($.value = [...$.value, ...s.pages]), te(s.batchItems), i.value = [...i.value, ...s.batchItems], C.value = s.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;
-        } catch (e) {
-          j.value = e instanceof Error ? e.message : String(e);
+          const t = C.value;
+          if (t == null) return;
+          const l = await Le(t);
+          if (e !== T) return;
+          $.value = [...$.value, t], te(l.items), i.value = [...i.value, ...l.items], C.value = l.nextPage;
+        } catch (t) {
+          if (e !== T || _e(t)) return;
+          K.value = t instanceof Error ? t.message : String(t);
         } finally {
-          K.value = !1;
+          e === T && (ee.value = !1), J === a && (J = null);
         }
+      })(), J = a, a;
     }
-    function et() {
-      const e = d.value;
+    function vt() {
+      const e = h.value;
       if (!e) return;
-      A.value = e.scrollTop, x.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= l.prefetchThresholdPx && Ze();
+      H.value = e.scrollTop, b.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= o.prefetchThresholdPx && dt();
     }
-    function ze() {
-      return d.value;
+    function Oe() {
+      return h.value;
     }
-    function qe(e) {
-      m.value = z(e), x.value = e.clientHeight;
+    function $e(e) {
+      p.value = N(e), b.value = e.clientHeight;
     }
-    function tt() {
-      typeof ResizeObserver > "u" || (H = new ResizeObserver(() => {
-        const e = ze();
-        e && qe(e);
+    function ht() {
+      typeof ResizeObserver > "u" || (A = new ResizeObserver(() => {
+        const e = Oe();
+        e && $e(e);
       }));
     }
-    function nt() {
+    function gt() {
       return {
-        enabled: l.mode === "backfill",
+        enabled: o.mode === "backfill",
         isBackfillActive: !1,
         isRequestInFlight: !1,
         requestPage: null,
@@ -567,8 +633,8 @@ const xt = {
           target: 0
         },
         cooldownMsRemaining: 0,
-        cooldownMsTotal: xe(l.backfillRequestDelayMs),
-        pageSize: Xe(l.pageSize),
+        cooldownMsTotal: ke(o.backfillRequestDelayMs),
+        pageSize: nt(o.pageSize),
         bufferSize: 0,
         lastBatch: null,
         totals: {
@@ -577,84 +643,92 @@ 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 = "";
-    }
-    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;
-        } else {
-          const a = await He(e);
-          D.value = [e], J(a.items), o.value = a.items, C.value = a.nextPage;
-        }
-      } catch (a) {
-        j.value = a instanceof Error ? a.message : String(a);
-      } finally {
-        le.value = !1;
-      }
+    function Xe(e) {
+      T += 1, J = null, Q = null, me = 0, X.clear(), j.length = 0, O.value = /* @__PURE__ */ new Set(), G.value = /* @__PURE__ */ new Set(), ie.clear(), re.value = /* @__PURE__ */ new Map(), Y.value = /* @__PURE__ */ new Set(), D.value = [], $.value = [], i.value = [], C.value = e, ge.value = [], pe.value = gt(), ue.value = !0, ee.value = !1, K.value = "";
     }
-    function at() {
-      const e = ze();
-      e && (qe(e), A.value = e.scrollTop, H?.observe(e));
-    }
-    ct(async () => {
-      tt(), Ne(l.page), await Ee(l.page), await we(), at();
-    }), ft(() => {
-      H?.disconnect();
-    }), U(
-      () => l.page,
+    async function je(e) {
+      if (Q) return Q;
+      const a = T;
+      let t = null;
+      return t = (async () => {
+        try {
+          if (o.mode === "backfill") {
+            const l = await qe.loadBackfillBatch(e);
+            if (a !== T) return;
+            $.value = l.pages.length ? l.pages : [e], te(l.batchItems), i.value = l.batchItems, C.value = l.nextPage;
+          } else {
+            const l = await Le(e);
+            if (a !== T) return;
+            $.value = [e], te(l.items), i.value = l.items, C.value = l.nextPage;
+          }
+        } catch (l) {
+          if (a !== T || _e(l)) return;
+          K.value = l instanceof Error ? l.message : String(l);
+        } finally {
+          a === T && (ue.value = !1), Q === t && (Q = null);
+        }
+      })(), Q = t, t;
+    }
+    function mt() {
+      const e = Oe();
+      e && ($e(e), H.value = e.scrollTop, A?.observe(e));
+    }
+    Mt(async () => {
+      ht(), mt(), Xe(o.page), await je(o.page);
+    }), St(() => {
+      A?.disconnect();
+    }), Z(
+      () => o.page,
       async (e) => {
-        Ne(e), await Ee(e);
+        Xe(e), await je(e);
       }
-    ), U(
+    ), Z(
       R,
       () => {
-        const e = d.value;
-        e && (m.value = z(e));
+        const e = h.value;
+        e && (p.value = N(e));
       },
       { immediate: !1 }
     );
-    const ye = B(() => ht(m.value, l.itemWidth)), Q = B(
-      () => gt(m.value, ye.value, l.itemWidth, R.value)
+    const xe = B(() => Ft(p.value, o.itemWidth)), ne = B(
+      () => Pt(p.value, xe.value, o.itemWidth, R.value)
     );
-    U(
-      [ye, Q, R, P, I, N],
+    Z(
+      [xe, ne, R, F, S, q],
       () => {
-        Ce();
+        Ve();
       },
       { immediate: !0 }
-    ), U(
+    ), Z(
       // 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
       // updates (e.g. reactions) cheap.
-      () => [o.value, o.value.length],
-      () => Ce(),
+      () => [i.value, i.value.length],
+      () => Ve(),
       { immediate: !0 }
     );
-    const lt = B(() => [
+    const pt = 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 }), [
-      T("div", {
+    return (e, a) => (k(), x("section", It(m.value, { class: pt.value }), [
+      _("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: z({ paddingRight: R.value + "px" }),
+        onScroll: vt
       }, [
-        le.value ? (k(), b("div", xt, a[0] || (a[0] = [
-          T("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
-            T("svg", {
+        ue.value ? (k(), x("div", Et, a[0] || (a[0] = [
+          _("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
+            _("svg", {
               class: "h-5 w-5 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
               "aria-hidden": "true"
             }, [
-              T("circle", {
+              _("circle", {
                 class: "opacity-25",
                 cx: "12",
                 cy: "12",
@@ -663,104 +737,104 @@ const xt = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              T("path", {
+              _("path", {
                 class: "opacity-75",
                 fill: "currentColor",
                 d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
               })
             ]),
-            T("span", null, "Loading…")
+            _("span", null, "Loading…")
           ], -1)
-        ]))) : j.value ? (k(), b("p", bt, "Error: " + Ye(j.value), 1)) : (k(), b("div", {
+        ]))) : K.value ? (k(), x("p", Ht, "Error: " + Ge(K.value), 1)) : (k(), x("div", {
           key: 2,
           class: "relative",
-          style: q({ height: Qe.value + "px" })
+          style: z({ height: ft.value + "px" })
         }, [
-          (k(!0), b(Ve, null, De(pe.value, (t) => (k(), b("article", {
-            key: o.value[t].id,
+          (k(!0), x(Ue, null, Ke(be.value, (t) => (k(), x("article", {
+            key: i.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: z({
+              width: ne.value + "px",
+              transition: lt(i.value[t].id),
+              transform: st(t)
             })
           }, [
-            E.value || I.value > 0 ? (k(), b("div", {
+            L.value || S.value > 0 ? (k(), x("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: q(te.value)
+              style: z(le.value)
             }, [
-              ie(e.$slots, "itemHeader", {
-                item: o.value[t],
-                remove: () => Ae(o.value[t])
+              de(e.$slots, "itemHeader", {
+                item: i.value[t],
+                remove: () => De(i.value[t])
               })
-            ], 4)) : oe("", !0),
-            T("div", {
+            ], 4)) : fe("", !0),
+            _("div", {
               class: "bg-slate-100",
-              style: q({ aspectRatio: o.value[t].width + " / " + o.value[t].height })
+              style: z({ aspectRatio: i.value[t].width + " / " + i.value[t].height })
             }, [
-              o.value[t].type === "image" ? (k(), b("img", {
+              i.value[t].type === "image" ? (k(), x("img", {
                 key: 0,
                 class: "h-full w-full object-cover",
-                src: o.value[t].preview,
-                width: o.value[t].width,
-                height: o.value[t].height,
+                src: i.value[t].preview,
+                width: i.value[t].width,
+                height: i.value[t].height,
                 loading: "lazy",
-                alt: o.value[t].id
-              }, null, 8, kt)) : (k(), b("video", {
+                alt: i.value[t].id
+              }, null, 8, Ct)) : (k(), x("video", {
                 key: 1,
                 class: "h-full w-full object-cover",
-                poster: o.value[t].preview,
+                poster: i.value[t].preview,
                 controls: "",
                 preload: "metadata"
               }, [
-                T("source", {
-                  src: o.value[t].original,
+                _("source", {
+                  src: i.value[t].original,
                   type: "video/mp4"
-                }, null, 8, It)
-              ], 8, Mt))
+                }, null, 8, zt)
+              ], 8, Nt))
             ], 4),
-            L.value || N.value > 0 ? (k(), b("div", {
+            V.value || q.value > 0 ? (k(), x("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: q(ne.value)
+              style: z(se.value)
             }, [
-              ie(e.$slots, "itemFooter", {
-                item: o.value[t],
-                remove: () => Ae(o.value[t])
+              de(e.$slots, "itemFooter", {
+                item: i.value[t],
+                remove: () => De(i.value[t])
               })
-            ], 4)) : oe("", !0)
+            ], 4)) : fe("", !0)
           ], 4))), 128)),
-          (k(!0), b(Ve, null, De(V.value, (t) => (k(), b("article", {
+          (k(!0), x(Ue, null, Ke(D.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: z({
               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 " + tt + "ms ease-out",
+              transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + Ie(t.height) + "px,0)"
             })
           }, [
-            E.value || I.value > 0 ? (k(), b("div", {
+            L.value || S.value > 0 ? (k(), x("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: q(te.value)
+              style: z(le.value)
             }, [
-              ie(e.$slots, "itemHeader", {
+              de(e.$slots, "itemHeader", {
                 item: t.item,
                 remove: () => {
                 }
               })
-            ], 4)) : oe("", !0),
-            T("div", {
+            ], 4)) : fe("", !0),
+            _("div", {
               class: "bg-slate-100",
-              style: q({ aspectRatio: t.item.width + " / " + t.item.height })
+              style: z({ 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,41 +842,41 @@ const xt = {
                 height: t.item.height,
                 loading: "lazy",
                 alt: t.item.id
-              }, null, 8, St)) : (k(), b("video", {
+              }, null, 8, qt)) : (k(), x("video", {
                 key: 1,
                 class: "h-full w-full object-cover",
                 poster: t.item.preview,
                 controls: "",
                 preload: "metadata"
               }, [
-                T("source", {
+                _("source", {
                   src: t.item.original,
                   type: "video/mp4"
-                }, null, 8, Pt)
-              ], 8, Bt))
+                }, null, 8, Yt)
+              ], 8, Lt))
             ], 4),
-            L.value || N.value > 0 ? (k(), b("div", {
+            V.value || q.value > 0 ? (k(), x("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: q(ne.value)
+              style: z(se.value)
             }, [
-              ie(e.$slots, "itemFooter", {
+              de(e.$slots, "itemFooter", {
                 item: t.item,
                 remove: () => {
                 }
               })
-            ], 4)) : oe("", !0)
+            ], 4)) : fe("", !0)
           ], 4))), 128))
         ], 4)),
-        T("div", Ft, [
-          K.value ? (k(), b("span", Tt, a[1] || (a[1] = [
-            T("svg", {
+        _("div", Dt, [
+          ee.value ? (k(), x("span", Vt, a[1] || (a[1] = [
+            _("svg", {
               class: "h-4 w-4 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
               "aria-hidden": "true"
             }, [
-              T("circle", {
+              _("circle", {
                 class: "opacity-25",
                 cx: "12",
                 cy: "12",
@@ -811,25 +885,25 @@ const xt = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              T("path", {
+              _("path", {
                 class: "opacity-75",
                 fill: "currentColor",
                 d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
               })
             ], -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))
+            _("span", null, "Loading more…", -1)
+          ]))) : C.value == null ? (k(), x("span", Ot, "End of list")) : (k(), x("span", $t, "Scroll to load page " + Ge(C.value), 1))
         ])
       ], 36)
     ], 16));
   }
-}), zt = {
+}), Kt = {
   install(n) {
-    n.component("Masonry", At);
+    n.component("Masonry", Gt);
   }
 };
 export {
-  At as Masonry,
-  zt as VibePlugin,
-  vt as masonryDefaults
+  Gt as Masonry,
+  Kt as VibePlugin,
+  Bt as masonryDefaults
 };