@wyxos/vibe 1.6.29 → 2.0.2

package/lib/index.js

@@ -1,1849 +1,853 @@
-import { nextTick as C, ref as D, computed as Q, defineComponent as Ge, onMounted as qe, onUnmounted as Je, watch as ae, createElementBlock as U, openBlock as _, createCommentVNode as ne, createElementVNode as X, normalizeStyle as he, renderSlot as K, normalizeClass as ie, withModifiers as Ce, toDisplayString as He, unref as J, Fragment as Oe, renderList as Ae, createVNode as ke, withCtx as ve, mergeProps as fe, TransitionGroup as Lt } from "vue";
-let Se = null;
-function kt() {
-  if (Se != null) return Se;
-  const e = document.createElement("div");
-  e.style.visibility = "hidden", e.style.overflow = "scroll", e.style.msOverflowStyle = "scrollbar", e.style.width = "100px", e.style.height = "100px", document.body.appendChild(e);
-  const n = document.createElement("div");
-  n.style.width = "100%", e.appendChild(n);
-  const s = e.offsetWidth - n.offsetWidth;
-  return document.body.removeChild(e), Se = s, s;
-}
-function Ve(e, n, s, a = {}) {
-  const {
-    gutterX: h = 0,
-    gutterY: g = 0,
-    header: f = 0,
-    footer: l = 0,
-    paddingLeft: i = 0,
-    paddingRight: M = 0,
-    sizes: t = {
-      base: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-      "2xl": 6
-    },
-    placement: T = "masonry"
-  } = a;
-  let I = 0, x = 0;
-  try {
-    if (n && n.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const k = window.getComputedStyle(n);
-      I = parseFloat(k.paddingLeft) || 0, x = parseFloat(k.paddingRight) || 0;
-    }
-  } catch {
-  }
-  const m = (i || 0) + I, L = (M || 0) + x, S = n.offsetWidth - n.clientWidth, d = S > 0 ? S + 2 : kt() + 2, c = n.offsetWidth - d - m - L, r = h * (s - 1), b = Math.floor((c - r) / s), P = e.map((k) => {
-    const H = k.width, W = k.height;
-    return Math.round(b * W / H) + l + f;
-  });
-  if (T === "sequential-balanced") {
-    const k = P.length;
-    if (k === 0) return [];
-    const H = (w, F, B) => w + (F > 0 ? g : 0) + B;
-    let W = Math.max(...P), E = P.reduce((w, F) => w + F, 0) + g * Math.max(0, k - 1);
-    const N = (w) => {
-      let F = 1, B = 0, j = 0;
-      for (let q = 0; q < k; q++) {
-        const le = P[q], G = H(B, j, le);
-        if (G <= w)
-          B = G, j++;
-        else if (F++, B = le, j = 1, le > w || F > s) return !1;
-      }
-      return F <= s;
-    };
-    for (; W < E; ) {
-      const w = Math.floor((W + E) / 2);
-      N(w) ? E = w : W = w + 1;
-    }
-    const Z = E, o = new Array(s).fill(0);
-    let v = s - 1, y = 0, R = 0;
-    for (let w = k - 1; w >= 0; w--) {
-      const F = P[w], B = w < v;
-      !(H(y, R, F) <= Z) || B ? (o[v] = w + 1, v--, y = F, R = 1) : (y = H(y, R, F), R++);
-    }
-    o[0] = 0;
-    const O = [], V = new Array(s).fill(0);
-    for (let w = 0; w < s; w++) {
-      const F = o[w], B = w + 1 < s ? o[w + 1] : k, j = w * (b + h);
-      for (let q = F; q < B; q++) {
-        const G = {
-          ...e[q],
-          columnWidth: b,
-          imageHeight: 0,
-          columnHeight: 0,
-          left: 0,
-          top: 0
-        };
-        G.imageHeight = P[q] - (l + f), G.columnHeight = P[q], G.left = j, G.top = V[w], V[w] += G.columnHeight + (q + 1 < B ? g : 0), O.push(G);
-      }
-    }
-    return O;
-  }
-  const p = new Array(s).fill(0), z = [];
-  for (let k = 0; k < e.length; k++) {
-    const H = e[k], W = {
-      ...H,
-      columnWidth: 0,
-      imageHeight: 0,
-      columnHeight: 0,
-      left: 0,
-      top: 0
-    }, E = p.indexOf(Math.min(...p)), N = H.width, Z = H.height;
-    W.columnWidth = b, W.left = E * (b + h), W.imageHeight = Math.round(b * Z / N), W.columnHeight = W.imageHeight + l + f, W.top = p[E], p[E] += W.columnHeight + g, z.push(W);
-  }
-  return z;
-}
-var St = typeof global == "object" && global && global.Object === Object && global, Et = typeof self == "object" && self && self.Object === Object && self, Ke = St || Et || Function("return this")(), we = Ke.Symbol, Qe = Object.prototype, Ht = Qe.hasOwnProperty, $t = Qe.toString, de = we ? we.toStringTag : void 0;
-function Dt(e) {
-  var n = Ht.call(e, de), s = e[de];
-  try {
-    e[de] = void 0;
-    var a = !0;
-  } catch {
-  }
-  var h = $t.call(e);
-  return a && (n ? e[de] = s : delete e[de]), h;
-}
-var Nt = Object.prototype, zt = Nt.toString;
-function Bt(e) {
-  return zt.call(e);
-}
-var Wt = "[object Null]", Rt = "[object Undefined]", je = we ? we.toStringTag : void 0;
-function Ft(e) {
-  return e == null ? e === void 0 ? Rt : Wt : je && je in Object(e) ? Dt(e) : Bt(e);
-}
-function Ct(e) {
-  return e != null && typeof e == "object";
-}
-var Ot = "[object Symbol]";
-function At(e) {
-  return typeof e == "symbol" || Ct(e) && Ft(e) == Ot;
-}
-var Vt = /\s/;
-function jt(e) {
-  for (var n = e.length; n-- && Vt.test(e.charAt(n)); )
-    ;
-  return n;
-}
-var Yt = /^\s+/;
-function Ut(e) {
-  return e && e.slice(0, jt(e) + 1).replace(Yt, "");
-}
-function $e(e) {
-  var n = typeof e;
-  return e != null && (n == "object" || n == "function");
-}
-var Ye = NaN, _t = /^[-+]0x[0-9a-f]+$/i, Xt = /^0b[01]+$/i, Gt = /^0o[0-7]+$/i, qt = parseInt;
-function Ue(e) {
-  if (typeof e == "number")
-    return e;
-  if (At(e))
-    return Ye;
-  if ($e(e)) {
-    var n = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = $e(n) ? n + "" : n;
-  }
-  if (typeof e != "string")
-    return e === 0 ? e : +e;
-  e = Ut(e);
-  var s = Xt.test(e);
-  return s || Gt.test(e) ? qt(e.slice(2), s ? 2 : 8) : _t.test(e) ? Ye : +e;
-}
-var Ee = function() {
-  return Ke.Date.now();
-}, Jt = "Expected a function", Kt = Math.max, Qt = Math.min;
-function _e(e, n, s) {
-  var a, h, g, f, l, i, M = 0, t = !1, T = !1, I = !0;
-  if (typeof e != "function")
-    throw new TypeError(Jt);
-  n = Ue(n) || 0, $e(s) && (t = !!s.leading, T = "maxWait" in s, g = T ? Kt(Ue(s.maxWait) || 0, n) : g, I = "trailing" in s ? !!s.trailing : I);
-  function x(p) {
-    var z = a, k = h;
-    return a = h = void 0, M = p, f = e.apply(k, z), f;
-  }
-  function m(p) {
-    return M = p, l = setTimeout(d, n), t ? x(p) : f;
-  }
-  function L(p) {
-    var z = p - i, k = p - M, H = n - z;
-    return T ? Qt(H, g - k) : H;
-  }
-  function S(p) {
-    var z = p - i, k = p - M;
-    return i === void 0 || z >= n || z < 0 || T && k >= g;
-  }
-  function d() {
-    var p = Ee();
-    if (S(p))
-      return c(p);
-    l = setTimeout(d, L(p));
-  }
-  function c(p) {
-    return l = void 0, I && a ? x(p) : (a = h = void 0, f);
-  }
-  function r() {
-    l !== void 0 && clearTimeout(l), M = 0, a = i = h = l = void 0;
-  }
-  function b() {
-    return l === void 0 ? f : c(Ee());
-  }
-  function P() {
-    var p = Ee(), z = S(p);
-    if (a = arguments, h = this, i = p, z) {
-      if (l === void 0)
-        return m(i);
-      if (T)
-        return clearTimeout(l), l = setTimeout(d, n), x(i);
-    }
-    return l === void 0 && (l = setTimeout(d, n)), f;
-  }
-  return P.cancel = r, P.flush = b, P;
-}
-function se(e, n) {
-  const s = n ?? (typeof window < "u" ? window.innerWidth : 1024), a = e.sizes;
-  return s >= 1536 && a["2xl"] ? a["2xl"] : s >= 1280 && a.xl ? a.xl : s >= 1024 && a.lg ? a.lg : s >= 768 && a.md ? a.md : s >= 640 && a.sm ? a.sm : a.base;
-}
-function Zt(e) {
-  const n = e ?? (typeof window < "u" ? window.innerWidth : 1024);
-  return n >= 1536 ? "2xl" : n >= 1280 ? "xl" : n >= 1024 ? "lg" : n >= 768 ? "md" : n >= 640 ? "sm" : "base";
+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,
+  page: 1,
+  itemWidth: 300,
+  prefetchThresholdPx: 200,
+  gapX: 16,
+  gapY: 16,
+  headerHeight: 0,
+  footerHeight: 0,
+  overscanPx: 600
+};
+function yt(n, y) {
+  return !n || n <= 0 || !y || y <= 0 ? 1 : Math.max(1, Math.floor(n / y));
 }
-function ea(e) {
-  return e.reduce((s, a) => Math.max(s, a.top + a.columnHeight), 0) + 500;
+function wt(n, y, S, l = 0) {
+  if (!n || n <= 0 || !y || y <= 0) return S;
+  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 ta(e) {
-  return {
-    transform: `translate3d(${e.left}px, ${e.top}px, 0)`,
-    top: "0px",
-    left: "0px",
-    width: `${e.columnWidth}px`,
-    height: `${e.columnHeight}px`
-  };
+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 aa(e, n = 0) {
-  return {
-    style: ta(e),
-    "data-top": e.top,
-    "data-left": e.left,
-    "data-id": `${e.page}-${e.id}`,
-    "data-index": n
-  };
+function Ue(n) {
+  return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
 }
-function De(e, n) {
-  if (!e.length || n <= 0)
-    return new Array(Math.max(1, n)).fill(0);
-  const a = Array.from(new Set(e.map((f) => f.left))).sort((f, l) => f - l).slice(0, n), h = /* @__PURE__ */ new Map();
-  for (let f = 0; f < a.length; f++) h.set(a[f], f);
-  const g = new Array(a.length).fill(0);
-  for (const f of e) {
-    const l = h.get(f.left);
-    l != null && (g[l] = Math.max(g[l], f.top + f.columnHeight));
-  }
-  for (; g.length < n; ) g.push(0);
-  return g;
+function we(n) {
+  return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
 }
-function na(e, n) {
-  let s = 0, a = 0;
-  const h = 1e3;
-  function g(t, T) {
-    var m;
-    const I = (m = e.container) == null ? void 0 : m.value;
-    if (I) {
-      const L = I.scrollTop, S = I.clientHeight;
-      s = L - h, a = L + S + h;
-    }
-    return t + T >= s && t <= a;
-  }
-  function f(t, T) {
-    var r;
-    const I = parseInt(t.dataset.left || "0", 10), x = parseInt(t.dataset.top || "0", 10), m = parseInt(t.dataset.index || "0", 10), L = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
-    if ((r = n == null ? void 0 : n.virtualizing) != null && r.value) {
-      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${I}px, ${x}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), t.style.transition = "", T();
-      return;
-    }
-    if (!g(x, L)) {
-      t.style.opacity = "1", t.style.transform = `translate3d(${I}px, ${x}px, 0) scale(1)`, t.style.transition = "none", T();
-      return;
-    }
-    const S = Math.min(m * 20, 160), d = t.style.getPropertyValue("--masonry-opacity-delay");
-    t.style.setProperty("--masonry-opacity-delay", `${S}ms`), t.style.opacity = "1", t.style.transform = `translate3d(${I}px, ${x}px, 0) scale(1)`;
-    const c = () => {
-      d ? t.style.setProperty("--masonry-opacity-delay", d) : t.style.removeProperty("--masonry-opacity-delay"), t.removeEventListener("transitionend", c), T();
+function xt(n) {
+  async function y(l) {
+    const r = we(l);
+    if (r <= 0) return;
+    n.stats.value = {
+      ...n.stats.value,
+      cooldownMsTotal: r,
+      cooldownMsRemaining: r
     };
-    t.addEventListener("transitionend", c);
-  }
-  function l(t) {
-    var x;
-    const T = parseInt(t.dataset.left || "0", 10), I = parseInt(t.dataset.top || "0", 10);
-    if ((x = n == null ? void 0 : n.virtualizing) != null && x.value) {
-      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${I}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
-      return;
-    }
-    t.style.opacity = "0", t.style.transform = `translate3d(${T}px, ${I + 10}px, 0) scale(0.985)`;
+    const M = Date.now(), w = 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: r,
+          cooldownMsRemaining: b
+        }, b <= 0 && (clearInterval(h), m());
+      }, w);
+    });
   }
-  function i(t) {
-    var m;
-    const T = parseInt(t.dataset.left || "0", 10), I = parseInt(t.dataset.top || "0", 10), x = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
-    if (!((m = n == null ? void 0 : n.virtualizing) != null && m.value)) {
-      if (!g(I, x)) {
-        t.style.transition = "none";
-        return;
+  async function S(l) {
+    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,
+      isRequestInFlight: !1,
+      requestPage: null,
+      cooldownMsTotal: w,
+      cooldownMsRemaining: 0,
+      progress: {
+        collected: 0,
+        target: 0
+      },
+      pageSize: r,
+      bufferSize: 0
+    };
+    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(m.length, r),
+          target: r
+        },
+        cooldownMsTotal: w,
+        cooldownMsRemaining: 0,
+        pageSize: r
+      });
+      const I = await n.getContent(z);
+      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), 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(m.length, r),
+          target: r
+        },
+        cooldownMsTotal: w,
+        cooldownMsRemaining: 0,
+        pageSize: r
+      }) : _ && (n.stats.value = {
+        ...n.stats.value,
+        enabled: M,
+        isBackfillActive: !0,
+        progress: {
+          collected: Math.min(m.length, r),
+          target: r
+        }
+      }), _ && m.length < r && b != null && await y(w);
+    }
+    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,
+      isRequestInFlight: !1,
+      requestPage: null,
+      progress: {
+        collected: 0,
+        target: 0
+      },
+      cooldownMsTotal: w,
+      cooldownMsRemaining: 0,
+      pageSize: r,
+      bufferSize: F.length,
+      lastBatch: {
+        startPage: l,
+        pages: p,
+        usedFromBuffer: h,
+        fetchedFromNetwork: A,
+        collectedTotal: m.length,
+        emitted: H.length,
+        carried: F.length
+      },
+      totals: {
+        pagesFetched: n.stats.value.totals.pagesFetched + p.length,
+        itemsFetchedFromNetwork: n.stats.value.totals.itemsFetchedFromNetwork + A
       }
-      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${I}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), t.style.transition = "";
-    }
+    }, { batchItems: H, pages: p, nextPage: b };
   }
-  function M(t, T) {
-    var P;
-    const I = parseInt(t.dataset.left || "0", 10), x = parseInt(t.dataset.top || "0", 10), m = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
-    if ((P = n == null ? void 0 : n.virtualizing) != null && P.value) {
-      T();
-      return;
-    }
-    if (!g(x, m)) {
-      t.style.transition = "none", t.style.opacity = "0", T();
-      return;
-    }
-    const L = typeof (n == null ? void 0 : n.leaveDurationMs) == "number" ? n.leaveDurationMs : Number.NaN;
-    let S = Number.isFinite(L) && L > 0 ? L : Number.NaN;
-    if (!Number.isFinite(S)) {
-      const z = getComputedStyle(t).getPropertyValue("--masonry-leave-duration") || "", k = parseFloat(z);
-      S = Number.isFinite(k) && k > 0 ? k : 200;
-    }
-    const d = t.style.transitionDuration, c = () => {
-      t.removeEventListener("transitionend", r), clearTimeout(b), t.style.transitionDuration = d || "";
-    }, r = (p) => {
-      (!p || p.target === t) && (c(), T());
-    }, b = setTimeout(() => {
-      c(), T();
-    }, S + 100);
-    t.style.transitionDuration = `${S}ms`, t.style.opacity = "0", t.style.transform = `translate3d(${I}px, ${x + 10}px, 0) scale(0.985)`, t.addEventListener("transitionend", r);
-  }
-  return {
-    onEnter: f,
-    onBeforeEnter: l,
-    onBeforeLeave: i,
-    onLeave: M
-  };
+  return { loadBackfillBatch: S };
 }
-function la({
-  container: e,
-  masonry: n,
-  columns: s,
-  containerHeight: a,
-  isLoading: h,
-  pageSize: g,
-  refreshLayout: f,
-  setItemsRaw: l,
-  loadNext: i,
-  loadThresholdPx: M
-}) {
-  let t = 0;
-  async function T(I, x = !1) {
-    if (!e.value) return;
-    const m = I ?? De(n.value, s.value), L = m.length ? Math.max(...m) : 0, S = e.value.scrollTop + e.value.clientHeight, d = e.value.scrollTop > t + 1;
-    t = e.value.scrollTop;
-    const c = typeof M == "number" ? M : 200, r = c >= 0 ? Math.max(0, L - c) : Math.max(0, L + c);
-    if (S >= r && (d || x) && !h.value) {
-      await i(), await C();
-      return;
-    }
-  }
-  return {
-    handleScroll: T
-  };
+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 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: p, heights: b, buckets: A, contentHeight: H, indexById: _ };
 }
-function oa(e) {
-  const { useSwipeMode: n, masonry: s, isLoading: a, loadNext: h, loadPage: g, paginationHistory: f } = e, l = D(0), i = D(0), M = D(!1), t = D(0), T = D(0), I = D(null), x = Q(() => {
-    if (!n.value || s.value.length === 0) return null;
-    const E = Math.max(0, Math.min(l.value, s.value.length - 1));
-    return s.value[E] || null;
-  }), m = Q(() => {
-    if (!n.value || !x.value) return null;
-    const E = l.value + 1;
-    return E >= s.value.length ? null : s.value[E] || null;
-  }), L = Q(() => {
-    if (!n.value || !x.value) return null;
-    const E = l.value - 1;
-    return E < 0 ? null : s.value[E] || null;
-  });
-  function S() {
-    if (!I.value) return;
-    const E = I.value.clientHeight;
-    i.value = -l.value * E;
-  }
-  function d() {
-    if (!m.value) {
-      h();
-      return;
-    }
-    l.value++, S(), l.value >= s.value.length - 5 && h();
-  }
-  function c() {
-    L.value && (l.value--, S());
-  }
-  function r(E) {
-    n.value && (M.value = !0, t.value = E.touches[0].clientY, T.value = i.value, E.preventDefault());
-  }
-  function b(E) {
-    if (!n.value || !M.value) return;
-    const N = E.touches[0].clientY - t.value;
-    i.value = T.value + N, E.preventDefault();
-  }
-  function P(E) {
-    if (!n.value || !M.value) return;
-    M.value = !1;
-    const N = i.value - T.value;
-    Math.abs(N) > 100 ? N > 0 && L.value ? c() : N < 0 && m.value ? d() : S() : S(), E.preventDefault();
-  }
-  function p(E) {
-    n.value && (M.value = !0, t.value = E.clientY, T.value = i.value, E.preventDefault());
-  }
-  function z(E) {
-    if (!n.value || !M.value) return;
-    const N = E.clientY - t.value;
-    i.value = T.value + N, E.preventDefault();
-  }
-  function k(E) {
-    if (!n.value || !M.value) return;
-    M.value = !1;
-    const N = i.value - T.value;
-    Math.abs(N) > 100 ? N > 0 && L.value ? c() : N < 0 && m.value ? d() : S() : S(), E.preventDefault();
-  }
-  function H() {
-    !n.value && l.value > 0 && (l.value = 0, i.value = 0), n.value && s.value.length === 0 && !a.value && g(f.value[0]), n.value && S();
-  }
-  function W() {
-    l.value = 0, i.value = 0, M.value = !1;
-  }
-  return {
-    // State
-    currentSwipeIndex: l,
-    swipeOffset: i,
-    isDragging: M,
-    swipeContainer: I,
-    // Computed
-    currentItem: x,
-    nextItem: m,
-    previousItem: L,
-    // Functions
-    handleTouchStart: r,
-    handleTouchMove: b,
-    handleTouchEnd: P,
-    handleMouseDown: p,
-    handleMouseMove: z,
-    handleMouseUp: k,
-    goToNextItem: d,
-    goToPreviousItem: c,
-    snapToCurrentItem: S,
-    handleWindowResize: H,
-    reset: W
-  };
+function Mt(n) {
+  const y = n.itemCount;
+  if (!y) return [];
+  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 m = Array.from(w);
+  return m.sort((h, p) => h - p), m;
 }
-function ge(e) {
-  return e instanceof Error ? e : new Error(String(e));
-}
-function ra(e) {
-  const {
-    getPage: n,
-    context: s,
-    masonry: a,
-    isLoading: h,
-    hasReachedEnd: g,
-    loadError: f,
-    currentPage: l,
-    paginationHistory: i,
-    refreshLayout: M,
-    retryMaxAttempts: t,
-    retryInitialDelayMs: T,
-    retryBackoffStepMs: I,
-    mode: x,
-    backfillDelayMs: m,
-    backfillMaxCalls: L,
-    pageSize: S,
-    emits: d
-  } = e, c = typeof x == "string" ? D(x) : x, r = D(!1);
-  let b = !1;
-  function P(o) {
-    return a.value.filter((v) => v.page === o).length;
-  }
-  function p(o, v) {
-    return new Promise((y) => {
-      const R = Math.max(0, o | 0), O = Date.now();
-      v(R, R);
-      const V = setInterval(() => {
-        if (r.value) {
-          clearInterval(V), y();
-          return;
-        }
-        const w = Date.now() - O, F = Math.max(0, R - w);
-        v(F, R), F <= 0 && (clearInterval(V), y());
-      }, 100);
-    });
-  }
-  async function z(o) {
-    let v = 0;
-    const y = t;
-    let R = T;
-    for (; ; )
-      try {
-        const O = await o();
-        return v > 0 && d("retry:stop", { attempt: v, success: !0 }), O;
-      } catch (O) {
-        if (v++, v > y)
-          throw d("retry:stop", { attempt: v - 1, success: !1 }), O;
-        d("retry:start", { attempt: v, max: y, totalMs: R }), await p(R, (V, w) => {
-          d("retry:tick", { attempt: v, remainingMs: V, totalMs: w });
-        }), R += I;
+const It = {
+  key: 0,
+  class: "flex h-full items-center justify-center"
+}, St = {
+  key: 1,
+  class: "text-sm font-medium text-red-700"
+}, 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"
+}, 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__ */ ct({
+    getContent: {},
+    mode: {},
+    pageSize: {},
+    backfillRequestDelayMs: {},
+    items: {},
+    page: {},
+    itemWidth: {},
+    prefetchThresholdPx: {},
+    gapX: {},
+    gapY: {},
+    headerHeight: {},
+    footerHeight: {},
+    overscanPx: {}
+  }, pt),
+  emits: ["update:items"],
+  setup(n, { expose: y, emit: S }) {
+    const l = n, r = S, M = ft(), w = dt(), m = B(() => {
+      const { class: e, ...a } = M;
+      return a;
+    }), 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, H.value);
+      return Math.max(0, e.clientWidth - a);
+    }
+    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 (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 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 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 W(e) {
+      (typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(0), 0))(() => e());
+    }
+    function Qe(e) {
+      W(() => W(e));
+    }
+    function ce(e) {
+      if (!Array.isArray(e) || e.length === 0) return;
+      const a = new Set(j.value);
+      let t = !1;
+      for (const s of e) {
+        const i = s?.id;
+        i && (a.has(i) || (a.add(i), t = !0));
       }
-  }
-  async function k(o) {
-    try {
-      const v = await z(() => n(o, s == null ? void 0 : s.value)), y = [...a.value, ...v.items];
-      return a.value = y, await C(), await C(), await C(), M(y), v;
-    } catch (v) {
-      throw v;
-    }
-  }
-  async function H(o, v = !1) {
-    if (!v && c.value !== "backfill" || b || r.value || g.value) return;
-    const y = (o || 0) + (S || 0);
-    if (!S || S <= 0) return;
-    if (i.value[i.value.length - 1] == null) {
-      g.value = !0;
-      return;
-    }
-    if (!(a.value.length >= y)) {
-      b = !0, h.value || (h.value = !0, d("loading:start"));
-      try {
-        let O = 0;
-        const V = l.value, w = i.value[i.value.length - 1];
-        for (d("backfill:start", {
-          target: y,
-          fetched: a.value.length,
-          calls: O,
-          currentPage: V,
-          nextPage: w
-        }); a.value.length < y && O < L && i.value[i.value.length - 1] != null && !r.value && !g.value && b; ) {
-          const j = l.value, q = i.value[i.value.length - 1];
-          if (await p(m, (G, be) => {
-            d("backfill:tick", {
-              fetched: a.value.length,
-              target: y,
-              calls: O,
-              remainingMs: G,
-              totalMs: be,
-              currentPage: j,
-              nextPage: q
-            });
-          }), r.value || !b) break;
-          const le = i.value[i.value.length - 1];
-          if (le == null) {
-            g.value = !0;
-            break;
-          }
-          try {
-            if (r.value || !b) break;
-            const G = await k(le);
-            if (r.value || !b) break;
-            f.value = null, l.value = le, i.value.push(G.nextPage), G.nextPage == null && (g.value = !0);
-          } catch (G) {
-            if (r.value || !b) break;
-            f.value = ge(G);
-          }
-          O++;
-        }
-        const F = l.value, B = i.value[i.value.length - 1];
-        d("backfill:stop", {
-          fetched: a.value.length,
-          calls: O,
-          currentPage: F,
-          nextPage: B
-        });
-      } finally {
-        b = !1, h.value = !1;
-        const O = l.value, V = i.value[i.value.length - 1];
-        d("loading:stop", {
-          fetched: a.value.length,
-          currentPage: O,
-          nextPage: V
-        });
+      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 i = P.value[a];
+        i && e.set(s, { x: i.x, y: i.y });
       }
-    }
-  }
-  async function W(o) {
-    if (!h.value) {
-      r.value = !1, h.value || (h.value = !0, d("loading:start")), g.value = !1, f.value = null;
-      try {
-        const v = a.value.length;
-        if (r.value) return;
-        const y = await k(o);
-        return r.value ? void 0 : (f.value = null, l.value = o, i.value.push(y.nextPage), y.nextPage == null && (g.value = !0), await H(v), y);
-      } catch (v) {
-        throw f.value = ge(v), v;
-      } finally {
-        h.value = !1;
-        const v = l.value, y = i.value[i.value.length - 1];
-        d("loading:stop", {
-          fetched: a.value.length,
-          currentPage: v,
-          nextPage: y
-        });
+      return e;
+    }
+    function Ie(e, a) {
+      if (!e.size) return;
+      const t = /* @__PURE__ */ new Map(), s = [];
+      for (const [v, d] of e.entries()) {
+        if (a?.has(v)) continue;
+        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));
       }
-    }
-  }
-  async function E() {
-    if (!h.value && !g.value) {
-      r.value = !1, h.value || (h.value = !0, d("loading:start")), f.value = null;
-      try {
-        const o = a.value.length;
-        if (r.value) return;
-        if (c.value === "refresh" && l.value != null && P(l.value) < S) {
-          const O = await z(() => n(l.value, s == null ? void 0 : s.value));
-          if (r.value) return;
-          const V = [...a.value], w = O.items.filter((B) => !B || B.id == null || B.page == null ? !1 : !V.some((j) => j && j.id === B.id && j.page === B.page));
-          if (w.length > 0) {
-            const B = [...a.value, ...w];
-            a.value = B, await C(), await C(), await C(), M(B);
-          }
-          if (f.value = null, w.length === 0) {
-            const B = i.value[i.value.length - 1];
-            if (B == null) {
-              g.value = !0;
-              return;
-            }
-            const j = await k(B);
-            return r.value ? void 0 : (f.value = null, l.value = B, i.value.push(j.nextPage), j.nextPage == null && (g.value = !0), await H(o), j);
-          }
-          if (P(l.value) >= S) {
-            const B = i.value[i.value.length - 1];
-            if (B == null) {
-              g.value = !0;
-              return;
-            }
-            const j = await k(B);
-            return r.value ? void 0 : (f.value = null, l.value = B, i.value.push(j.nextPage), j.nextPage == null && (g.value = !0), await H(o), j);
-          } else
-            return O;
-        }
-        const v = i.value[i.value.length - 1];
-        if (v == null) {
-          g.value = !0;
-          return;
-        }
-        const y = await k(v);
-        return r.value ? void 0 : (f.value = null, l.value = v, i.value.push(y.nextPage), y.nextPage == null && (g.value = !0), await H(o), y);
-      } catch (o) {
-        throw f.value = ge(o), o;
-      } finally {
-        h.value = !1;
-        const o = l.value, v = i.value[i.value.length - 1];
-        d("loading:stop", {
-          fetched: a.value.length,
-          currentPage: o,
-          nextPage: v
+      if (!t.size) return;
+      ue.value = t;
+      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(V.value);
+        for (const d of s) v.delete(d);
+        V.value = v;
+      }, $e);
+    }
+    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 Q(e) {
+      for (const a of e)
+        !a || typeof a != "object" || a.id && a.originalIndex == null && (a.originalIndex = ve, ve += 1);
+    }
+    const O = /* @__PURE__ */ new Map(), X = [];
+    function le(e) {
+      return typeof e == "number" && Number.isFinite(e);
+    }
+    function Ze(e, a) {
+      if (!a.length) return e;
+      const t = /* @__PURE__ */ new Set();
+      for (const d of e) {
+        const c = d?.id;
+        c && t.add(c);
       }
-    }
-  }
-  async function N() {
-    if (!h.value) {
-      r.value = !1, h.value = !0, d("loading:start");
-      try {
-        const o = l.value;
-        if (o == null) {
-          console.warn("[Masonry] No current page to refresh - currentPage:", l.value, "paginationHistory:", i.value);
-          return;
+      const s = [];
+      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 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 d of i) {
+        const c = d.originalIndex;
+        if (!le(c)) {
+          v.push(d);
+          continue;
         }
-        a.value = [], g.value = !1, f.value = null, i.value = [o];
-        const v = await k(o);
-        if (r.value) return;
-        f.value = null, l.value = o, i.value.push(v.nextPage), v.nextPage == null && (g.value = !0);
-        const y = a.value.length;
-        return await H(y), v;
-      } catch (o) {
-        throw f.value = ge(o), o;
-      } finally {
-        h.value = !1;
-        const o = l.value, v = i.value[i.value.length - 1];
-        d("loading:stop", {
-          fetched: a.value.length,
-          currentPage: o,
-          nextPage: v
-        });
+        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(f, 0, d);
       }
-    }
-  }
-  function Z() {
-    const o = b;
-    r.value = !0, h.value = !1, b = !1;
-    const v = l.value, y = i.value[i.value.length - 1];
-    o && d("backfill:stop", {
-      fetched: a.value.length,
-      calls: 0,
-      cancelled: !0,
-      currentPage: v,
-      nextPage: y
-    }), d("loading:stop", {
-      fetched: a.value.length,
-      currentPage: v,
-      nextPage: y
-    });
-  }
-  return {
-    loadPage: W,
-    loadNext: E,
-    refreshCurrentPage: N,
-    cancelLoad: Z,
-    maybeBackfillToTarget: H,
-    getContent: k
-  };
-}
-function ia(e) {
-  const {
-    masonry: n,
-    useSwipeMode: s,
-    refreshLayout: a,
-    loadNext: h,
-    maybeBackfillToTarget: g,
-    paginationHistory: f
-  } = e;
-  let l = /* @__PURE__ */ new Set(), i = null, M = !1;
-  async function t() {
-    if (l.size === 0 || M) return;
-    M = !0;
-    const d = Array.from(l);
-    l.clear(), i = null, await I(d), M = !1;
-  }
-  async function T(d) {
-    l.add(d), i && clearTimeout(i), i = setTimeout(() => {
-      t();
-    }, 16);
-  }
-  async function I(d) {
-    if (!d || d.length === 0) return;
-    const c = new Set(d.map((b) => b.id)), r = n.value.filter((b) => !c.has(b.id));
-    if (n.value = r, await C(), r.length === 0 && f.value.length > 0) {
-      try {
-        await h(), await g(0, !0);
-      } catch {
+      return v;
+    }
+    async function Be(e) {
+      if (!e.length) return;
+      ce(e);
+      const a = Me();
+      o.value = Ze(o.value, e), await Oe(), Ie(a);
+    }
+    async function Fe(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
+      if (!t.length) return;
+      const s = [];
+      for (const i of t) {
+        const v = O.get(i);
+        v && s.push(v);
       }
-      return;
-    }
-    await C(), await C(), a(r);
-  }
-  async function x(d) {
-    !d || d.length === 0 || (d.forEach((c) => l.add(c)), i && clearTimeout(i), i = setTimeout(() => {
-      t();
-    }, 16));
-  }
-  async function m(d, c) {
-    if (!d) return;
-    const r = n.value;
-    if (r.findIndex((z) => z.id === d.id) !== -1) return;
-    const P = [...r], p = Math.min(c, P.length);
-    P.splice(p, 0, d), n.value = P, await C(), s.value || (await C(), await C(), a(P));
-  }
-  async function L(d, c) {
-    var E;
-    if (!d || d.length === 0) return;
-    if (!c || c.length !== d.length) {
-      console.warn("[Masonry] restoreMany: items and indices arrays must have the same length");
-      return;
-    }
-    const r = n.value, b = new Set(r.map((N) => N.id)), P = [];
-    for (let N = 0; N < d.length; N++)
-      b.has((E = d[N]) == null ? void 0 : E.id) || P.push({ item: d[N], index: c[N] });
-    if (P.length === 0) return;
-    const p = /* @__PURE__ */ new Map();
-    for (const { item: N, index: Z } of P)
-      p.set(Z, N);
-    const z = P.length > 0 ? Math.max(...P.map(({ index: N }) => N)) : -1, k = Math.max(r.length - 1, z), H = [];
-    let W = 0;
-    for (let N = 0; N <= k; N++)
-      p.has(N) ? H.push(p.get(N)) : W < r.length && (H.push(r[W]), W++);
-    for (; W < r.length; )
-      H.push(r[W]), W++;
-    n.value = H, await C(), s.value || (await C(), await C(), a(H));
-  }
-  async function S() {
-    n.value = [];
-  }
-  return {
-    remove: T,
-    removeMany: x,
-    restore: m,
-    restoreMany: L,
-    removeAll: S
-  };
-}
-function sa(e) {
-  const {
-    masonry: n,
-    useSwipeMode: s,
-    container: a,
-    columns: h,
-    containerWidth: g,
-    masonryContentHeight: f,
-    layout: l,
-    fixedDimensions: i,
-    checkItemDimensions: M
-  } = e;
-  let t = [];
-  function T(L) {
-    const S = ea(L);
-    let d = 0;
-    if (a.value) {
-      const { scrollTop: c, clientHeight: r } = a.value;
-      d = c + r + 100;
-    }
-    f.value = Math.max(S, d);
-  }
-  function I(L) {
-    var r, b;
-    if (s.value) {
-      n.value = L;
-      return;
-    }
-    if (n.value = L, !a.value) return;
-    if (M(L, "refreshLayout"), L.length > 1e3 && t.length > L.length && t.length - L.length < 100) {
-      let P = !0;
-      for (let p = 0; p < L.length; p++)
-        if (((r = L[p]) == null ? void 0 : r.id) !== ((b = t[p]) == null ? void 0 : b.id)) {
-          P = !1;
-          break;
-        }
-      if (P) {
-        const p = L.map((z, k) => ({
-          ...t[k],
-          originalIndex: k
-        }));
-        T(p), n.value = p, t = p;
-        return;
+      if (s.length) {
+        await Be(s);
+        for (const i of s)
+          i?.id && O.delete(i.id);
       }
     }
-    const d = L.map((P, p) => ({
-      ...P,
-      originalIndex: p
-    })), c = a.value;
-    if (i.value && i.value.width !== void 0) {
-      const P = c.style.width, p = c.style.boxSizing;
-      c.style.boxSizing = "border-box", c.style.width = `${i.value.width}px`, c.offsetWidth;
-      const z = Ve(d, c, h.value, l.value);
-      c.style.width = P, c.style.boxSizing = p, T(z), n.value = z, t = z;
-    } else {
-      const P = Ve(d, c, h.value, l.value);
-      T(P), n.value = P, t = P;
-    }
-  }
-  function x(L, S) {
-    i.value = L, L && (L.width !== void 0 && (g.value = L.width), !s.value && a.value && n.value.length > 0 && C(() => {
-      h.value = se(l.value, g.value), I(n.value), S && S();
-    }));
-  }
-  function m() {
-    h.value = se(l.value, g.value), I(n.value);
-  }
-  return {
-    refreshLayout: I,
-    setFixedDimensions: x,
-    onResize: m,
-    calculateHeight: T
-  };
-}
-function ua(e) {
-  const {
-    masonry: n,
-    container: s,
-    columns: a,
-    virtualBufferPx: h,
-    loadThresholdPx: g
-  } = e, f = D(e.handleScroll), l = D(0), i = D(0), M = h, t = D(!1), T = D({
-    distanceToTrigger: 0,
-    isNearTrigger: !1
-  }), I = Q(() => {
-    const S = l.value - M, d = l.value + i.value + M, c = n.value;
-    return !c || c.length === 0 ? [] : c.filter((b) => {
-      if (typeof b.top != "number" || typeof b.columnHeight != "number")
-        return !0;
-      const P = b.top;
-      return b.top + b.columnHeight >= S && P <= d;
-    });
-  });
-  function x(S) {
-    if (!s.value) return;
-    const { scrollTop: d, clientHeight: c } = s.value, r = d + c, b = S ?? De(n.value, a.value), P = b.length ? Math.max(...b) : 0, p = typeof g == "number" ? g : 200, z = p >= 0 ? Math.max(0, P - p) : Math.max(0, P + p), k = Math.max(0, z - r), H = k <= 100;
-    T.value = {
-      distanceToTrigger: Math.round(k),
-      isNearTrigger: H
-    };
-  }
-  async function m() {
-    if (s.value) {
-      const d = s.value.scrollTop, c = s.value.clientHeight || window.innerHeight, r = c > 0 ? c : window.innerHeight;
-      l.value = d, i.value = r;
-    }
-    t.value = !0, await C(), await C(), t.value = !1;
-    const S = De(n.value, a.value);
-    f.value(S), x(S);
-  }
-  function L() {
-    l.value = 0, i.value = 0, t.value = !1, T.value = {
-      distanceToTrigger: 0,
-      isNearTrigger: !1
-    };
-  }
-  return {
-    viewportTop: l,
-    viewportHeight: i,
-    virtualizing: t,
-    scrollProgress: T,
-    visibleMasonry: I,
-    updateScrollProgress: x,
-    updateViewport: m,
-    reset: L,
-    handleScroll: f
-  };
-}
-function ca(e) {
-  const { masonry: n } = e, s = D(/* @__PURE__ */ new Set());
-  function a(f) {
-    return typeof f == "number" && f > 0 && Number.isFinite(f);
-  }
-  function h(f, l) {
-    try {
-      if (!Array.isArray(f) || f.length === 0) return;
-      const i = f.filter((t) => !a(t == null ? void 0 : t.width) || !a(t == null ? void 0 : t.height));
-      if (i.length === 0) return;
-      const M = [];
-      for (const t of i) {
-        const T = (t == null ? void 0 : t.id) ?? `idx:${n.value.indexOf(t)}`;
-        s.value.has(T) || (s.value.add(T), M.push(T));
+    async function Pe() {
+      const e = X.pop();
+      if (!e?.length) return;
+      const a = [];
+      for (const t of e) {
+        const s = O.get(t);
+        s && a.push(s);
       }
-      if (M.length > 0) {
-        const t = M.slice(0, 10);
-        console.warn(
-          "[Masonry] Items missing width/height detected:",
-          {
-            context: l,
-            count: M.length,
-            sampleIds: t,
-            hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
-          }
-        );
+      if (a.length) {
+        await Be(a);
+        for (const t of a)
+          t?.id && O.delete(t.id);
       }
-    } catch {
-    }
-  }
-  function g() {
-    s.value.clear();
-  }
-  return {
-    checkItemDimensions: h,
-    invalidDimensionIds: s,
-    reset: g
-  };
-}
-const va = { class: "flex-1 relative min-h-0" }, fa = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm transition-all duration-300 bg-white relative" }, da = {
-  key: 0,
-  class: "absolute inset-0 flex flex-col items-center justify-center bg-slate-100 text-slate-400 text-sm p-4 text-center"
-}, ga = {
-  key: 1,
-  class: "relative w-full h-full"
-}, ha = ["src"], ma = ["src", "autoplay", "controls"], pa = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, ya = {
-  key: 3,
-  class: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-center justify-center z-10"
-}, wa = {
-  key: 4,
-  class: "absolute inset-0 flex flex-col items-center justify-center bg-slate-50 text-slate-400 text-sm p-4 text-center"
-}, xe = /* @__PURE__ */ Ge({
-  __name: "MasonryItem",
-  props: {
-    item: {},
-    remove: {},
-    type: { default: void 0 },
-    notFound: { type: Boolean, default: void 0 },
-    headerHeight: { default: 0 },
-    footerHeight: { default: 0 },
-    isActive: { type: Boolean, default: !1 },
-    inSwipeMode: { type: Boolean, default: !1 },
-    preloadThreshold: { default: 1 }
-  },
-  emits: ["preload:success", "preload:error", "mouse-enter", "mouse-leave", "in-view", "in-view-and-loaded"],
-  setup(e, { emit: n }) {
-    const s = e, a = n, h = D(!1), g = D(!1), f = D(null), l = D(!1), i = D(!1), M = D(null), t = D(!1), T = D(!1), I = D(!1), x = D(!1), m = D(!1), L = D(null), S = D(null);
-    let d = null;
-    const c = Q(() => {
-      var o;
-      return s.type ?? ((o = s.item) == null ? void 0 : o.type) ?? "image";
-    }), r = Q(() => {
-      var o;
-      return s.notFound ?? ((o = s.item) == null ? void 0 : o.notFound) ?? !1;
-    }), b = Q(() => !!s.inSwipeMode);
-    function P(o, v) {
-      const y = o === "image" ? h.value : l.value;
-      T.value && y && !I.value && (I.value = !0, a("in-view-and-loaded", { item: s.item, type: o, src: v }));
-    }
-    function p(o) {
-      a("mouse-enter", { item: s.item, type: o });
-    }
-    function z(o) {
-      a("mouse-leave", { item: s.item, type: o });
     }
-    function k(o) {
-      if (b.value) return;
-      const v = o.target;
-      v && (v.paused ? v.play() : v.pause());
+    async function et(e) {
+      return Fe(e);
     }
-    function H(o) {
-      const v = o.target;
-      v && (b.value || v.play(), p("video"));
+    async function tt() {
+      return Pe();
     }
-    function W(o) {
-      const v = o.target;
-      v && (b.value || v.pause(), z("video"));
-    }
-    function E(o) {
-      return new Promise((v, y) => {
-        if (!o) {
-          const w = new Error("No image source provided");
-          a("preload:error", { item: s.item, type: "image", src: o, error: w }), y(w);
-          return;
-        }
-        const R = new Image(), O = Date.now(), V = 300;
-        R.onload = () => {
-          const w = Date.now() - O, F = Math.max(0, V - w);
-          setTimeout(async () => {
-            h.value = !0, g.value = !1, x.value = !1, await C(), await new Promise((B) => setTimeout(B, 100)), m.value = !0, a("preload:success", { item: s.item, type: "image", src: o }), P("image", o), v();
-          }, F);
-        }, R.onerror = () => {
-          g.value = !0, h.value = !1, x.value = !1;
-          const w = new Error("Failed to load image");
-          a("preload:error", { item: s.item, type: "image", src: o, error: w }), y(w);
-        }, R.src = o;
-      });
-    }
-    function N(o) {
-      return new Promise((v, y) => {
-        if (!o) {
-          const w = new Error("No video source provided");
-          a("preload:error", { item: s.item, type: "video", src: o, error: w }), y(w);
-          return;
-        }
-        const R = document.createElement("video"), O = Date.now(), V = 300;
-        R.preload = "metadata", R.muted = !0, R.onloadedmetadata = () => {
-          const w = Date.now() - O, F = Math.max(0, V - w);
-          setTimeout(async () => {
-            l.value = !0, i.value = !1, x.value = !1, await C(), await new Promise((B) => setTimeout(B, 100)), m.value = !0, a("preload:success", { item: s.item, type: "video", src: o }), P("video", o), v();
-          }, F);
-        }, R.onerror = () => {
-          i.value = !0, l.value = !1, x.value = !1;
-          const w = new Error("Failed to load video");
-          a("preload:error", { item: s.item, type: "video", src: o, error: w }), y(w);
-        }, R.src = o;
-      });
-    }
-    async function Z() {
-      var v;
-      if (!t.value || x.value || r.value || c.value === "video" && l.value || c.value === "image" && h.value)
-        return;
-      const o = (v = s.item) == null ? void 0 : v.src;
-      if (o)
-        if (x.value = !0, m.value = !1, c.value === "video") {
-          M.value = o, l.value = !1, i.value = !1;
-          try {
-            await N(o);
-          } catch {
-          }
-        } else {
-          f.value = o, h.value = !1, g.value = !1;
-          try {
-            await E(o);
-          } catch {
-          }
-        }
+    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);
+      }
     }
-    return qe(async () => {
-      if (!L.value) return;
-      const o = [s.preloadThreshold, 1].filter((y, R, O) => O.indexOf(y) === R).sort((y, R) => y - R);
-      d = new IntersectionObserver(
-        (y) => {
-          y.forEach((R) => {
-            const O = R.intersectionRatio, V = O >= 1, w = O >= s.preloadThreshold;
-            if (V && !T.value) {
-              T.value = !0, a("in-view", { item: s.item, type: c.value });
-              const F = c.value === "image" ? f.value : M.value, B = c.value === "image" ? h.value : l.value;
-              F && B && P(c.value, F);
-            }
-            w && !t.value ? (t.value = !0, Z()) : R.isIntersecting;
-          });
-        },
-        {
-          // Trigger at both preloadThreshold and 1.0 (fully in view)
-          threshold: o
-        }
-      ), d.observe(L.value), await C(), await C(), await C(), v(), setTimeout(() => {
-        v();
-      }, 100);
-      function v() {
-        if (!L.value || T.value) return;
-        const y = L.value.getBoundingClientRect(), R = window.innerHeight, O = window.innerWidth;
-        if (y.top >= 0 && y.bottom <= R && y.left >= 0 && y.right <= O && y.height > 0 && y.width > 0) {
-          T.value = !0, a("in-view", { item: s.item, type: c.value });
-          const w = c.value === "image" ? f.value : M.value, F = c.value === "image" ? h.value : l.value;
-          w && F && P(c.value, w);
-        }
+    const he = vt({
+      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
       }
-    }), Je(() => {
-      d && (d.disconnect(), d = null);
-    }), ae(
-      () => {
-        var o;
-        return (o = s.item) == null ? void 0 : o.src;
+    }), _e = xt({
+      getContent: (e) => l.getContent(e),
+      markEnterFromLeft: ce,
+      buffer: de,
+      stats: he,
+      isEnabled: () => l.mode === "backfill",
+      getPageSize: () => l.pageSize,
+      getRequestDelayMs: () => l.backfillRequestDelayMs
+    }), ge = B(() => l.items !== void 0);
+    G(
+      () => l.items,
+      (e) => {
+        ge.value && (fe.value = Array.isArray(e) ? e : []);
       },
-      async (o) => {
-        if (!(!o || r.value)) {
-          if (c.value === "video") {
-            if (o !== M.value && (l.value = !1, i.value = !1, M.value = o, t.value)) {
-              x.value = !0;
-              try {
-                await N(o);
-              } catch {
-              }
-            }
-          } else if (o !== f.value && (h.value = !1, g.value = !1, f.value = o, t.value)) {
-            x.value = !0;
-            try {
-              await E(o);
-            } catch {
-            }
-          }
-        }
+      { immediate: !0 }
+    );
+    const o = B({
+      get() {
+        return ge.value ? fe.value : Se.value;
+      },
+      set(e) {
+        ge.value ? (fe.value = e, r("update:items", e)) : Se.value = e;
       }
-    ), ae(
-      () => s.isActive,
-      (o) => {
-        !b.value || !S.value || (o ? S.value.play() : S.value.pause());
+    });
+    async function He(e) {
+      const a = await l.getContent(e);
+      return Q(a.items), ce(a.items), { items: a.items, nextPage: a.nextPage };
+    }
+    function me(e) {
+      return e ? typeof e == "string" ? e : e?.id : null;
+    }
+    async function Re(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
+      if (!t.length) return;
+      const s = new Set(t), i = [];
+      for (const f of s) {
+        const u = ae.value.get(f);
+        if (u == null) continue;
+        const R = o.value[u];
+        R && (O.set(f, R), i.push(f));
       }
-    ), (o, v) => (_(), U("div", {
-      ref_key: "containerRef",
-      ref: L,
-      class: "relative w-full h-full flex flex-col"
-    }, [
-      o.headerHeight > 0 ? (_(), U("div", {
-        key: 0,
-        class: "relative z-10",
-        style: he({ height: `${o.headerHeight}px` })
-      }, [
-        K(o.$slots, "header", {
-          item: o.item,
-          remove: o.remove,
-          imageLoaded: h.value,
-          imageError: g.value,
-          videoLoaded: l.value,
-          videoError: i.value,
-          showNotFound: r.value,
-          isLoading: x.value,
-          mediaType: c.value,
-          isFullyInView: T.value
-        })
-      ], 4)) : ne("", !0),
-      X("div", va, [
-        K(o.$slots, "default", {
-          item: o.item,
-          remove: o.remove,
-          imageLoaded: h.value,
-          imageError: g.value,
-          videoLoaded: l.value,
-          videoError: i.value,
-          showNotFound: r.value,
-          isLoading: x.value,
-          mediaType: c.value,
-          imageSrc: f.value,
-          videoSrc: M.value,
-          showMedia: m.value,
-          isFullyInView: T.value
-        }, () => [
-          X("div", fa, [
-            r.value ? (_(), U("div", da, v[3] || (v[3] = [
-              X("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
-              X("span", { class: "font-medium" }, "Not Found", -1),
-              X("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
-            ]))) : (_(), U("div", ga, [
-              c.value === "image" && f.value ? (_(), U("img", {
-                key: 0,
-                src: f.value,
-                class: ie([
-                  "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  h.value && m.value ? "opacity-100" : "opacity-0"
-                ]),
-                style: { position: "absolute", top: "0", left: "0" },
-                loading: "lazy",
-                decoding: "async",
-                alt: "",
-                onMouseenter: v[0] || (v[0] = (y) => p("image")),
-                onMouseleave: v[1] || (v[1] = (y) => z("image"))
-              }, null, 42, ha)) : ne("", !0),
-              c.value === "video" && M.value ? (_(), U("video", {
-                key: 1,
-                ref_key: "videoEl",
-                ref: S,
-                src: M.value,
-                class: ie([
-                  "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  l.value && m.value ? "opacity-100" : "opacity-0"
-                ]),
-                style: { position: "absolute", top: "0", left: "0" },
-                muted: "",
-                loop: "",
-                playsinline: "",
-                autoplay: b.value && s.isActive,
-                controls: b.value,
-                onClick: Ce(k, ["stop"]),
-                onTouchend: Ce(k, ["stop", "prevent"]),
-                onMouseenter: H,
-                onMouseleave: W,
-                onError: v[2] || (v[2] = (y) => i.value = !0)
-              }, null, 42, ma)) : ne("", !0),
-              !h.value && !l.value && !g.value && !i.value ? (_(), U("div", {
-                key: 2,
-                class: ie([
-                  "absolute inset-0 bg-slate-100 flex items-center justify-center transition-opacity duration-500",
-                  m.value ? "opacity-0 pointer-events-none" : "opacity-100"
-                ])
-              }, [
-                X("div", pa, [
-                  K(o.$slots, "placeholder-icon", { mediaType: c.value }, () => [
-                    X("i", {
-                      class: ie(c.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
-                    }, null, 2)
-                  ])
-                ])
-              ], 2)) : ne("", !0),
-              x.value ? (_(), U("div", ya, v[4] || (v[4] = [
-                X("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
-                  X("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
-                ], -1)
-              ]))) : ne("", !0),
-              c.value === "image" && g.value || c.value === "video" && i.value ? (_(), U("div", wa, [
-                X("i", {
-                  class: ie(c.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
-                }, null, 2),
-                X("span", null, "Failed to load " + He(c.value), 1)
-              ])) : ne("", !0)
-            ]))
-          ])
-        ])
-      ]),
-      o.footerHeight > 0 ? (_(), U("div", {
-        key: 1,
-        class: "relative z-10",
-        style: he({ height: `${o.footerHeight}px` })
-      }, [
-        K(o.$slots, "footer", {
-          item: o.item,
-          remove: o.remove,
-          imageLoaded: h.value,
-          imageError: g.value,
-          videoLoaded: l.value,
-          videoError: i.value,
-          showNotFound: r.value,
-          isLoading: x.value,
-          mediaType: c.value,
-          isFullyInView: T.value
-        })
-      ], 4)) : ne("", !0)
-    ], 512));
-  }
-}), xa = {
-  key: 0,
-  class: "w-full h-full flex items-center justify-center"
-}, ba = { class: "w-full h-full flex items-center justify-center p-4" }, Ma = { class: "w-full h-full max-w-full max-h-full relative" }, Ta = {
-  key: 0,
-  class: "w-full py-8 text-center"
-}, Pa = {
-  key: 1,
-  class: "w-full py-8 text-center"
-}, Ia = { class: "text-red-500 dark:text-red-400" }, La = {
-  key: 0,
-  class: "w-full py-8 text-center"
-}, ka = {
-  key: 1,
-  class: "w-full py-8 text-center"
-}, Sa = { class: "text-red-500 dark:text-red-400" }, Ea = /* @__PURE__ */ Ge({
-  __name: "Masonry",
-  props: {
-    getPage: {
-      type: Function,
-      default: () => {
+      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 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
+        });
       }
-    },
-    loadAtPage: {
-      type: [Number, String],
-      default: null
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    // Opaque caller-owned context passed through to getPage(page, context).
-    // Useful for including filters, service selection, tabId, etc.
-    context: {
-      type: Object,
-      default: null
-    },
-    layout: {
-      type: Object
-    },
-    paginationType: {
-      type: String,
-      default: "page",
-      // or 'cursor'
-      validator: (e) => ["page", "cursor"].includes(e)
-    },
-    init: {
-      type: String,
-      default: "manual",
-      validator: (e) => ["auto", "manual"].includes(e)
-    },
-    pageSize: {
-      type: Number,
-      default: 40
-    },
-    // Backfill configuration
-    mode: {
-      type: String,
-      default: "backfill",
-      validator: (e) => ["backfill", "none", "refresh"].includes(e)
-    },
-    backfillDelayMs: {
-      type: Number,
-      default: 2e3
-    },
-    backfillMaxCalls: {
-      type: Number,
-      default: 10
-    },
-    // Retry configuration
-    retryMaxAttempts: {
-      type: Number,
-      default: 3
-    },
-    retryInitialDelayMs: {
-      type: Number,
-      default: 2e3
-    },
-    retryBackoffStepMs: {
-      type: Number,
-      default: 2e3
-    },
-    transitionDurationMs: {
-      type: Number,
-      default: 450
-    },
-    // Shorter, snappier duration specifically for item removal (leave)
-    leaveDurationMs: {
-      type: Number,
-      default: 160
-    },
-    transitionEasing: {
-      type: String,
-      default: "cubic-bezier(.22,.61,.36,1)"
-    },
-    // Force motion even when user has reduced-motion enabled
-    forceMotion: {
-      type: Boolean,
-      default: !1
-    },
-    virtualBufferPx: {
-      type: Number,
-      default: 600
-    },
-    loadThresholdPx: {
-      type: Number,
-      default: 200
-    },
-    // Layout mode: 'auto' (detect from screen size), 'masonry', or 'swipe'
-    layoutMode: {
-      type: String,
-      default: "auto",
-      validator: (e) => ["auto", "masonry", "swipe"].includes(e)
-    },
-    // Breakpoint for switching to swipe mode (in pixels or Tailwind breakpoint name)
-    mobileBreakpoint: {
-      type: [Number, String],
-      default: 768
-      // 'md' breakpoint
-    }
-  },
-  emits: [
-    "update:items",
-    "loading:start",
-    "backfill:start",
-    "backfill:tick",
-    "backfill:stop",
-    "retry:start",
-    "retry:tick",
-    "retry:stop",
-    "loading:stop",
-    "remove-all:complete",
-    // Re-emit item-level preload events from the default MasonryItem
-    "item:preload:success",
-    "item:preload:error",
-    // Mouse events from MasonryItem content
-    "item:mouse-enter",
-    "item:mouse-leave",
-    "update:context"
-  ],
-  setup(e, { expose: n, emit: s }) {
-    const a = e, h = {
-      sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
-      gutterX: 10,
-      gutterY: 10,
-      header: 0,
-      footer: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-      placement: "masonry"
-    }, g = Q(() => {
-      var u;
-      return {
-        ...h,
-        ...a.layout,
-        sizes: {
-          ...h.sizes,
-          ...((u = a.layout) == null ? void 0 : u.sizes) || {}
-        }
-      };
-    }), f = D(null), l = D(typeof window < "u" ? window.innerWidth : 1024), i = D(typeof window < "u" ? window.innerHeight : 768), M = D(null);
-    let t = null;
-    function T(u) {
-      return {
-        sm: 640,
-        md: 768,
-        lg: 1024,
-        xl: 1280,
-        "2xl": 1536
-      }[u] || 768;
-    }
-    const I = Q(() => {
-      if (a.layoutMode === "masonry") return !1;
-      if (a.layoutMode === "swipe") return !0;
-      const u = typeof a.mobileBreakpoint == "string" ? T(a.mobileBreakpoint) : a.mobileBreakpoint;
-      return l.value < u;
-    }), x = s, m = Q({
-      get: () => a.items,
-      set: (u) => x("update:items", u)
-    }), L = Q({
-      get: () => a.context,
-      set: (u) => x("update:context", u)
-    });
-    function S(u) {
-      L.value = u;
-    }
-    const d = Q(() => {
-      const u = m.value;
-      return (u == null ? void 0 : u.length) ?? 0;
-    }), c = D(7), r = D(null), b = D([]), P = D(null), p = D(!1), z = D(0), k = D(!1), H = D(null), W = D(!1), E = Q(() => Zt(l.value)), N = ca({
-      masonry: m
-    }), { checkItemDimensions: Z, reset: o } = N, v = sa({
-      masonry: m,
-      useSwipeMode: I,
-      container: r,
-      columns: c,
-      containerWidth: l,
-      masonryContentHeight: z,
-      layout: g,
-      fixedDimensions: M,
-      checkItemDimensions: Z
-    }), { refreshLayout: y, setFixedDimensions: R, onResize: O } = v, V = ua({
-      masonry: m,
-      container: r,
-      columns: c,
-      virtualBufferPx: a.virtualBufferPx,
-      loadThresholdPx: a.loadThresholdPx,
-      handleScroll: () => {
+      if (c.length && (Y.value = [...Y.value, ...c]), o.value = o.value.filter((f) => {
+        const u = f?.id;
+        return !u || !s.has(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(() => {
+            Y.value = Y.value.filter((u) => !f.has(u.id));
+          }, We);
+        });
       }
-      // Will be set after pagination is initialized
-    }), { viewportTop: w, viewportHeight: F, virtualizing: B, visibleMasonry: j, updateScrollProgress: q, updateViewport: le, reset: G } = V, { onEnter: be, onBeforeEnter: Ze, onBeforeLeave: et, onLeave: tt } = na(
-      { container: r },
-      { leaveDurationMs: a.leaveDurationMs, virtualizing: B }
-    ), at = be, nt = Ze, lt = et, ot = tt, rt = Q(() => a.mode), it = ra({
-      getPage: a.getPage,
-      context: L,
-      masonry: m,
-      isLoading: p,
-      hasReachedEnd: k,
-      loadError: H,
-      currentPage: P,
-      paginationHistory: b,
-      refreshLayout: y,
-      retryMaxAttempts: a.retryMaxAttempts,
-      retryInitialDelayMs: a.retryInitialDelayMs,
-      retryBackoffStepMs: a.retryBackoffStepMs,
-      mode: rt,
-      backfillDelayMs: a.backfillDelayMs,
-      backfillMaxCalls: a.backfillMaxCalls,
-      pageSize: a.pageSize,
-      emits: x
-    }), { loadPage: Me, loadNext: me, refreshCurrentPage: st, cancelLoad: Te, maybeBackfillToTarget: ut } = it, ee = oa({
-      useSwipeMode: I,
-      masonry: m,
-      isLoading: p,
-      loadNext: me,
-      loadPage: Me,
-      paginationHistory: b
-    }), { handleScroll: ct } = la({
-      container: r,
-      masonry: m,
-      columns: c,
-      containerHeight: z,
-      isLoading: p,
-      pageSize: a.pageSize,
-      refreshLayout: y,
-      setItemsRaw: (u) => {
-        m.value = u;
-      },
-      loadNext: me,
-      loadThresholdPx: a.loadThresholdPx
-    });
-    V.handleScroll.value = ct;
-    const vt = ia({
-      masonry: m,
-      useSwipeMode: I,
-      refreshLayout: y,
-      loadNext: me,
-      maybeBackfillToTarget: ut,
-      paginationHistory: b
-    }), { remove: ue, removeMany: ft, restore: dt, restoreMany: gt, removeAll: ht } = vt;
-    function mt(u) {
-      R(u, q), !u && f.value && (l.value = f.value.clientWidth, i.value = f.value.clientHeight);
     }
-    n({
-      // Cancels any ongoing load operations (page loads, backfills, etc.)
-      cancelLoad: Te,
-      // Opaque caller context passed through to getPage(page, context). Useful for including filters, service selection, tabId, etc.
-      context: L,
-      // Container height (wrapper element) in pixels
-      containerHeight: i,
-      // Container width (wrapper element) in pixels
-      containerWidth: l,
-      // Current Tailwind breakpoint name (base, sm, md, lg, xl, 2xl) based on containerWidth
-      currentBreakpoint: E,
-      // Current page number or cursor being displayed
-      currentPage: P,
-      // Completely destroys the component, clearing all state and resetting to initial state
-      destroy: Pt,
-      // Boolean indicating if the end of the list has been reached (no more pages to load)
-      hasReachedEnd: k,
-      // Initializes the component with items, page, and next page cursor. Use this for manual init mode.
-      initialize: It,
-      // Boolean indicating if the component has been initialized (first content has loaded)
-      isInitialized: W,
-      // Boolean indicating if a page load or backfill operation is currently in progress
-      isLoading: p,
-      // Error object if the last load operation failed, null otherwise
-      loadError: H,
-      // Loads the next page of items asynchronously
-      loadNext: me,
-      // Loads a specific page number or cursor asynchronously
-      loadPage: Me,
-      // Array tracking pagination history (pages/cursors that have been loaded)
-      paginationHistory: b,
-      // Refreshes the current page by clearing items and reloading from the current page
-      refreshCurrentPage: st,
-      // Recalculates the layout positions for all items. Call this after manually modifying items.
-      refreshLayout: y,
-      // Removes a single item from the masonry
-      remove: ue,
-      // Removes all items from the masonry
-      removeAll: ht,
-      // Clears all items and pagination history (useful when applying filters)
-      clear: Mt,
-      // Removes multiple items from the masonry in a single operation
-      removeMany: ft,
-      // Resets the component to initial state (clears items, resets pagination, scrolls to top)
-      reset: Tt,
-      // Restores a single item at its original index (useful for undo operations)
-      restore: dt,
-      // Restores multiple items at their original indices (useful for undo operations)
-      restoreMany: gt,
-      // Scrolls the container to a specific position
-      scrollTo: xt,
-      // Scrolls the container to the top
-      scrollToTop: wt,
-      // Sets the opaque caller context (alternative to v-model:context)
-      setContext: S,
-      // Sets fixed dimensions for the container, overriding ResizeObserver. Pass null to restore automatic sizing.
-      setFixedDimensions: mt,
-      // Computed property returning the total number of items currently in the masonry
-      totalItems: Q(() => m.value.length)
+    async function Ae(e) {
+      return Re(e);
+    }
+    y({
+      remove: Re,
+      restore: et,
+      undo: tt,
+      forget: Te,
+      // Aliases (kept for now; can be removed if you want strictly short API only).
+      restoreRemoved: Fe,
+      undoLastRemoval: Pe,
+      forgetRemoved: Te,
+      backfillStats: he
     });
-    const ce = ee.currentSwipeIndex, pe = ee.swipeOffset, ye = ee.isDragging, oe = ee.swipeContainer, Ne = ee.handleTouchStart, ze = ee.handleTouchMove, Be = ee.handleTouchEnd, We = ee.handleMouseDown, Pe = ee.handleMouseMove, Ie = ee.handleMouseUp, Le = ee.snapToCurrentItem;
-    function pt(u) {
-      const $ = d.value, Y = typeof u == "string" ? parseInt(u, 10) : u;
-      return $ > 0 ? `${Y * (100 / $)}%` : "0%";
-    }
-    function yt() {
-      const u = d.value;
-      return u > 0 ? `${100 / u}%` : "0%";
-    }
-    function wt(u) {
-      r.value && r.value.scrollTo({
-        top: 0,
-        behavior: (u == null ? void 0 : u.behavior) ?? "smooth",
-        ...u
+    function Ce() {
+      const e = kt({
+        items: o.value,
+        columnCount: ye.value,
+        columnWidth: Z.value,
+        gapX: H.value,
+        gapY: F.value,
+        headerHeight: I.value,
+        footerHeight: q.value,
+        bucketPx: Xe
       });
+      P.value = e.positions, $.value = e.heights, be.value = e.buckets, xe.value = e.contentHeight, ae.value = e.indexById;
+    }
+    const nt = B(() => Math.max(xe.value, b.value) + Nt), pe = B(() => Mt({
+      itemCount: o.value.length,
+      viewportHeight: b.value,
+      scrollTop: A.value,
+      overscanPx: l.overscanPx,
+      bucketPx: Xe,
+      buckets: be.value
+    }));
+    G(
+      pe,
+      (e) => {
+        if (!e?.length) return;
+        const a = [];
+        for (const t of e) {
+          const s = o.value[t]?.id;
+          s && j.value.has(s) && (re.has(s) || (re.add(s), a.push(s)));
+        }
+        a.length && (W(() => {
+          const t = new Set(K.value);
+          for (const s of a) t.add(s);
+          K.value = t;
+        }), Qe(() => {
+          const t = new Set(j.value);
+          for (const s of a) t.delete(s);
+          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 at() {
+      if (!(se.value || J.value) && !(l.mode !== "backfill" && C.value == null) && !(l.mode === "backfill" && C.value == null && de.value.length === 0))
+        try {
+          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], Q(a.items), o.value = [...o.value, ...a.items], C.value = a.nextPage;
+        } catch (e) {
+          U.value = e instanceof Error ? e.message : String(e);
+        } finally {
+          J.value = !1;
+        }
     }
-    function xt(u) {
-      r.value && (r.value.scrollTo({
-        top: u.top ?? r.value.scrollTop,
-        left: u.left ?? r.value.scrollLeft,
-        behavior: u.behavior ?? "auto"
-      }), r.value && (w.value = r.value.scrollTop, F.value = r.value.clientHeight || window.innerHeight));
+    function st() {
+      const e = h.value;
+      if (!e) return;
+      A.value = e.scrollTop, b.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= l.prefetchThresholdPx && at();
     }
-    function bt() {
-      O(), r.value && (w.value = r.value.scrollTop, F.value = r.value.clientHeight);
+    function ze() {
+      return h.value;
     }
-    function Mt() {
-      m.value = [], b.value = [];
+    function Ne(e) {
+      p.value = z(e), b.value = e.clientHeight;
     }
-    function Tt() {
-      Te(), r.value && r.value.scrollTo({
-        top: 0,
-        behavior: "smooth"
-      }), m.value = [], i.value = 0, P.value = a.loadAtPage, b.value = [a.loadAtPage], k.value = !1, H.value = null, W.value = !1, G();
+    function lt() {
+      typeof ResizeObserver > "u" || (_ = new ResizeObserver(() => {
+        const e = ze();
+        e && Ne(e);
+      }));
     }
-    function Pt() {
-      Te(), m.value = [], z.value = 0, P.value = null, b.value = [], k.value = !1, H.value = null, p.value = !1, W.value = !1, ce.value = 0, pe.value = 0, ye.value = !1, G(), o(), r.value && r.value.scrollTo({
-        top: 0,
-        behavior: "auto"
-        // Instant scroll for destroy
-      });
+    function ot() {
+      return {
+        enabled: l.mode === "backfill",
+        isBackfillActive: !1,
+        isRequestInFlight: !1,
+        requestPage: null,
+        progress: {
+          collected: 0,
+          target: 0
+        },
+        cooldownMsRemaining: 0,
+        cooldownMsTotal: we(l.backfillRequestDelayMs),
+        pageSize: Ue(l.pageSize),
+        bufferSize: 0,
+        lastBatch: null,
+        totals: {
+          pagesFetched: 0,
+          itemsFetchedFromNetwork: 0
+        }
+      };
     }
-    const re = _e(async () => {
-      I.value || await le();
-    }, 200), Re = _e(bt, 200);
-    function Fe() {
-      ee.handleWindowResize();
+    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 It(u, $, Y) {
-      P.value = $, b.value = [$], Y != null && b.value.push(Y), k.value = Y === null, Z(u, "initialize");
-      const te = m.value, A = te.length === 0 ? u : [...te, ...u];
-      m.value = A, await C(), I.value ? ce.value === 0 && m.value.length > 0 && (pe.value = 0) : (await C(), await C(), y(A), r.value && (w.value = r.value.scrollTop, F.value = r.value.clientHeight || window.innerHeight), C(() => {
-        r.value && (w.value = r.value.scrollTop, F.value = r.value.clientHeight || window.innerHeight, q());
-      })), u && u.length > 0 && (W.value = !0);
+    async function Ee(e) {
+      try {
+        if (l.mode === "backfill") {
+          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], Q(a.items), o.value = a.items, C.value = a.nextPage;
+        }
+      } catch (a) {
+        U.value = a instanceof Error ? a.message : String(a);
+      } finally {
+        se.value = !1;
+      }
     }
-    return ae(
-      g,
+    function it() {
+      const e = ze();
+      e && (Ne(e), A.value = e.scrollTop, _?.observe(e));
+    }
+    ht(async () => {
+      lt(), it(), qe(l.page), await Ee(l.page);
+    }), gt(() => {
+      _?.disconnect();
+    }), G(
+      () => l.page,
+      async (e) => {
+        qe(e), await Ee(e);
+      }
+    ), G(
+      H,
       () => {
-        I.value || r.value && (c.value = se(g.value, l.value), y(m.value));
-      },
-      { deep: !0 }
-    ), ae(() => a.layoutMode, () => {
-      M.value && M.value.width !== void 0 ? l.value = M.value.width : f.value && (l.value = f.value.clientWidth);
-    }), ae(r, (u) => {
-      u && !I.value ? (u.removeEventListener("scroll", re), u.addEventListener("scroll", re, { passive: !0 })) : u && u.removeEventListener("scroll", re);
-    }, { immediate: !0 }), ae(
-      () => m.value.length,
-      (u, $) => {
-        a.init === "manual" && !W.value && u > 0 && $ === 0 && (W.value = !0);
+        const e = h.value;
+        e && (p.value = z(e));
       },
       { immediate: !1 }
-    ), ae(I, (u, $) => {
-      $ === void 0 && u === !1 || C(() => {
-        u ? (document.addEventListener("mousemove", Pe), document.addEventListener("mouseup", Ie), r.value && r.value.removeEventListener("scroll", re), ce.value = 0, pe.value = 0, m.value.length > 0 && Le()) : (document.removeEventListener("mousemove", Pe), document.removeEventListener("mouseup", Ie), r.value && f.value && (M.value && M.value.width !== void 0 ? l.value = M.value.width : l.value = f.value.clientWidth, r.value.removeEventListener("scroll", re), r.value.addEventListener("scroll", re, { passive: !0 }), m.value.length > 0 && (c.value = se(g.value, l.value), y(m.value), w.value = r.value.scrollTop, F.value = r.value.clientHeight, q())));
-      });
-    }, { immediate: !0 }), ae(oe, (u) => {
-      u && (u.addEventListener("touchstart", Ne, { passive: !1 }), u.addEventListener("touchmove", ze, { passive: !1 }), u.addEventListener("touchend", Be), u.addEventListener("mousedown", We));
-    }), ae(() => m.value.length, (u, $) => {
-      I.value && u > 0 && $ === 0 && (ce.value = 0, C(() => Le()));
-    }), ae(f, (u) => {
-      t && (t.disconnect(), t = null), u && typeof ResizeObserver < "u" ? (t = new ResizeObserver(($) => {
-        if (!M.value)
-          for (const Y of $) {
-            const te = Y.contentRect.width, A = Y.contentRect.height;
-            l.value !== te && (l.value = te), i.value !== A && (i.value = A);
-          }
-      }), t.observe(u), M.value || (l.value = u.clientWidth, i.value = u.clientHeight)) : u && (M.value || (l.value = u.clientWidth, i.value = u.clientHeight));
-    }, { immediate: !0 }), ae(l, (u, $) => {
-      u !== $ && u > 0 && !I.value && r.value && m.value.length > 0 && C(() => {
-        c.value = se(g.value, u), y(m.value), q();
-      });
-    }), qe(async () => {
-      try {
-        await C(), f.value && !t && (l.value = f.value.clientWidth, i.value = f.value.clientHeight), I.value || (c.value = se(g.value, l.value), r.value && (w.value = r.value.scrollTop, F.value = r.value.clientHeight));
-        const u = a.loadAtPage;
-        if (a.init === "auto" && b.value.length === 0 && (b.value = [u]), a.init === "auto") {
-          W.value = !0, await C();
-          try {
-            await Me(u);
-          } catch {
-          }
-        }
-        I.value ? C(() => Le()) : q();
-      } catch (u) {
-        H.value || (console.error("Error during component initialization:", u), H.value = ge(u)), p.value = !1;
-      }
-      window.addEventListener("resize", Re), window.addEventListener("resize", Fe);
-    }), Je(() => {
-      var u;
-      t && (t.disconnect(), t = null), (u = r.value) == null || u.removeEventListener("scroll", re), window.removeEventListener("resize", Re), window.removeEventListener("resize", Fe), oe.value && (oe.value.removeEventListener("touchstart", Ne), oe.value.removeEventListener("touchmove", ze), oe.value.removeEventListener("touchend", Be), oe.value.removeEventListener("mousedown", We)), document.removeEventListener("mousemove", Pe), document.removeEventListener("mouseup", Ie);
-    }), (u, $) => (_(), U("div", {
-      ref_key: "wrapper",
-      ref: f,
-      class: "w-full h-full flex flex-col relative"
-    }, [
-      W.value ? I.value ? (_(), U("div", {
-        key: 1,
-        class: ie(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": a.forceMotion, "cursor-grab": !J(ye), "cursor-grabbing": J(ye) }]),
-        ref_key: "swipeContainer",
-        ref: oe,
-        style: { height: "100%", "max-height": "100%", position: "relative" }
+    );
+    const ye = B(() => yt(p.value, l.itemWidth)), Z = B(
+      () => wt(p.value, ye.value, l.itemWidth, H.value)
+    );
+    G(
+      [ye, Z, H, F, I, q],
+      () => {
+        Ce();
+      },
+      { immediate: !0 }
+    ), 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
+      // updates (e.g. reactions) cheap.
+      () => [o.value, o.value.length],
+      () => Ce(),
+      { immediate: !0 }
+    );
+    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(), x("section", mt(m.value, { class: rt.value }), [
+      T("div", {
+        ref_key: "scrollViewportRef",
+        ref: h,
+        "data-testid": "items-scroll-container",
+        class: "mt-4 min-h-0 flex-1 overflow-auto",
+        style: N({ paddingRight: H.value + "px" }),
+        onScroll: st
       }, [
-        X("div", {
-          class: "relative w-full",
-          style: he({
-            transform: `translateY(${J(pe)}px)`,
-            transition: J(ye) ? "none" : `transform ${e.transitionDurationMs}ms ${e.transitionEasing}`,
-            height: `${d.value * 100}%`
-          })
+        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",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true"
+            }, [
+              T("circle", {
+                class: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "4"
+              }),
+              T("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…")
+          ], -1)
+        ]))) : U.value ? (k(), x("p", St, "Error: " + Ve(U.value), 1)) : (k(), x("div", {
+          key: 2,
+          class: "relative",
+          style: N({ height: nt.value + "px" })
         }, [
-          (_(!0), U(Oe, null, Ae(m.value, (Y, te) => (_(), U("div", {
-            key: `${Y.page}-${Y.id}`,
-            class: "absolute top-0 left-0 w-full",
-            style: he({
-              top: pt(te),
-              height: yt()
+          (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: N({
+              width: Z.value + "px",
+              transition: Ke(o.value[t].id),
+              transform: Je(t)
             })
           }, [
-            X("div", ba, [
-              X("div", Ma, [
-                K(u.$slots, "default", {
-                  item: Y,
-                  remove: J(ue),
-                  index: Y.originalIndex ?? te
-                }, () => [
-                  ke(xe, {
-                    item: Y,
-                    remove: J(ue),
-                    "header-height": g.value.header,
-                    "footer-height": g.value.footer,
-                    "in-swipe-mode": !0,
-                    "is-active": te === J(ce),
-                    "onPreload:success": $[0] || ($[0] = (A) => x("item:preload:success", A)),
-                    "onPreload:error": $[1] || ($[1] = (A) => x("item:preload:error", A)),
-                    onMouseEnter: $[2] || ($[2] = (A) => x("item:mouse-enter", A)),
-                    onMouseLeave: $[3] || ($[3] = (A) => x("item:mouse-leave", A))
-                  }, {
-                    header: ve((A) => [
-                      K(u.$slots, "item-header", fe({ ref_for: !0 }, A), void 0, !0)
-                    ]),
-                    footer: ve((A) => [
-                      K(u.$slots, "item-footer", fe({ ref_for: !0 }, A), void 0, !0)
-                    ]),
-                    _: 2
-                  }, 1032, ["item", "remove", "header-height", "footer-height", "is-active"])
-                ], !0)
-              ])
-            ])
+            E.value || I.value > 0 ? (k(), x("div", {
+              key: 0,
+              "data-testid": "item-header-container",
+              class: "w-full",
+              style: N(te.value)
+            }, [
+              ie(e.$slots, "itemHeader", {
+                item: o.value[t],
+                remove: () => Ae(o.value[t])
+              })
+            ], 4)) : oe("", !0),
+            T("div", {
+              class: "bg-slate-100",
+              style: N({ aspectRatio: o.value[t].width + " / " + o.value[t].height })
+            }, [
+              o.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,
+                loading: "lazy",
+                alt: o.value[t].id
+              }, null, 8, Bt)) : (k(), x("video", {
+                key: 1,
+                class: "h-full w-full object-cover",
+                poster: o.value[t].preview,
+                controls: "",
+                preload: "metadata"
+              }, [
+                T("source", {
+                  src: o.value[t].original,
+                  type: "video/mp4"
+                }, null, 8, Pt)
+              ], 8, Ft))
+            ], 4),
+            L.value || q.value > 0 ? (k(), x("div", {
+              key: 1,
+              "data-testid": "item-footer-container",
+              class: "w-full",
+              style: N(ne.value)
+            }, [
+              ie(e.$slots, "itemFooter", {
+                item: o.value[t],
+                remove: () => Ae(o.value[t])
+              })
+            ], 4)) : oe("", !0)
+          ], 4))), 128)),
+          (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: N({
+              width: t.width + "px",
+              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(), x("div", {
+              key: 0,
+              "data-testid": "item-header-container",
+              class: "w-full",
+              style: N(te.value)
+            }, [
+              ie(e.$slots, "itemHeader", {
+                item: t.item,
+                remove: () => {
+                }
+              })
+            ], 4)) : oe("", !0),
+            T("div", {
+              class: "bg-slate-100",
+              style: N({ aspectRatio: t.item.width + " / " + t.item.height })
+            }, [
+              t.item.type === "image" ? (k(), x("img", {
+                key: 0,
+                class: "h-full w-full object-cover",
+                src: t.item.preview,
+                width: t.item.width,
+                height: t.item.height,
+                loading: "lazy",
+                alt: t.item.id
+              }, null, 8, Tt)) : (k(), x("video", {
+                key: 1,
+                class: "h-full w-full object-cover",
+                poster: t.item.preview,
+                controls: "",
+                preload: "metadata"
+              }, [
+                T("source", {
+                  src: t.item.original,
+                  type: "video/mp4"
+                }, null, 8, Ht)
+              ], 8, _t))
+            ], 4),
+            L.value || q.value > 0 ? (k(), x("div", {
+              key: 1,
+              "data-testid": "item-footer-container",
+              class: "w-full",
+              style: N(ne.value)
+            }, [
+              ie(e.$slots, "itemFooter", {
+                item: t.item,
+                remove: () => {
+                }
+              })
+            ], 4)) : oe("", !0)
           ], 4))), 128))
-        ], 4),
-        k.value && m.value.length > 0 ? (_(), U("div", Ta, [
-          K(u.$slots, "end-message", {}, () => [
-            $[9] || ($[9] = X("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
-          ], !0)
-        ])) : ne("", !0),
-        H.value && m.value.length > 0 ? (_(), U("div", Pa, [
-          K(u.$slots, "error-message", { error: H.value }, () => [
-            X("p", Ia, "Failed to load content: " + He(H.value.message), 1)
-          ], !0)
-        ])) : ne("", !0)
-      ], 2)) : (_(), U("div", {
-        key: 2,
-        class: ie(["overflow-auto w-full flex-1 masonry-container", { "force-motion": a.forceMotion }]),
-        ref_key: "container",
-        ref: r
-      }, [
-        X("div", {
-          class: "relative",
-          style: he({ height: `${z.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
-        }, [
-          ke(Lt, {
-            name: "masonry",
-            css: !1,
-            onEnter: J(at),
-            onBeforeEnter: J(nt),
-            onLeave: J(ot),
-            onBeforeLeave: J(lt)
-          }, {
-            default: ve(() => [
-              (_(!0), U(Oe, null, Ae(J(j), (Y, te) => (_(), U("div", fe({
-                key: `${Y.page}-${Y.id}`,
-                class: "absolute masonry-item",
-                ref_for: !0
-              }, J(aa)(Y, te)), [
-                K(u.$slots, "default", {
-                  item: Y,
-                  remove: J(ue),
-                  index: Y.originalIndex ?? te
-                }, () => [
-                  ke(xe, {
-                    item: Y,
-                    remove: J(ue),
-                    "header-height": g.value.header,
-                    "footer-height": g.value.footer,
-                    "in-swipe-mode": !1,
-                    "is-active": !1,
-                    "onPreload:success": $[4] || ($[4] = (A) => x("item:preload:success", A)),
-                    "onPreload:error": $[5] || ($[5] = (A) => x("item:preload:error", A)),
-                    onMouseEnter: $[6] || ($[6] = (A) => x("item:mouse-enter", A)),
-                    onMouseLeave: $[7] || ($[7] = (A) => x("item:mouse-leave", A))
-                  }, {
-                    header: ve((A) => [
-                      K(u.$slots, "item-header", fe({ ref_for: !0 }, A), void 0, !0)
-                    ]),
-                    footer: ve((A) => [
-                      K(u.$slots, "item-footer", fe({ ref_for: !0 }, A), void 0, !0)
-                    ]),
-                    _: 2
-                  }, 1032, ["item", "remove", "header-height", "footer-height"])
-                ], !0)
-              ], 16))), 128))
-            ]),
-            _: 3
-          }, 8, ["onEnter", "onBeforeEnter", "onLeave", "onBeforeLeave"])
-        ], 4),
-        k.value && m.value.length > 0 ? (_(), U("div", La, [
-          K(u.$slots, "end-message", {}, () => [
-            $[10] || ($[10] = X("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
-          ], !0)
-        ])) : ne("", !0),
-        H.value && m.value.length > 0 ? (_(), U("div", ka, [
-          K(u.$slots, "error-message", { error: H.value }, () => [
-            X("p", Sa, "Failed to load content: " + He(H.value.message), 1)
-          ], !0)
-        ])) : ne("", !0)
-      ], 2)) : (_(), U("div", xa, [
-        K(u.$slots, "loading-message", {}, () => [
-          $[8] || ($[8] = X("p", { class: "text-gray-500 dark:text-gray-400" }, "Waiting for content to load...", -1))
-        ], !0)
-      ]))
-    ], 512));
+        ], 4)),
+        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",
+              "aria-hidden": "true"
+            }, [
+              T("circle", {
+                class: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "4"
+              }),
+              T("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(), x("span", Ct, "End of list")) : (k(), x("span", zt, "Scroll to load page " + Ve(C.value), 1))
+        ])
+      ], 36)
+    ], 16));
   }
-}), Ha = (e, n) => {
-  const s = e.__vccOpts || e;
-  for (const [a, h] of n)
-    s[a] = h;
-  return s;
-}, Xe = /* @__PURE__ */ Ha(Ea, [["__scopeId", "data-v-3ebb00d9"]]), Da = {
-  install(e) {
-    e.component("WyxosMasonry", Xe), e.component("WMasonry", Xe), e.component("WyxosMasonryItem", xe), e.component("WMasonryItem", xe);
+}), Lt = {
+  install(n) {
+    n.component("Masonry", qt);
   }
 };
 export {
-  Xe as Masonry,
-  xe as MasonryItem,
-  Da as default
+  qt as Masonry,
+  Lt as VibePlugin,
+  pt as masonryDefaults
 };