@wyxos/vibe 1.6.24 → 1.6.26

package/lib/index.js

@@ -1,22 +1,22 @@
-import { nextTick as q, ref as D, computed as Q, defineComponent as Ke, onMounted as Qe, onUnmounted as Ze, watch as ee, createElementBlock as R, openBlock as O, createCommentVNode as te, createElementVNode as V, normalizeStyle as ge, renderSlot as _, normalizeClass as re, withModifiers as je, toDisplayString as $e, unref as U, Fragment as Ve, renderList as qe, createVNode as Pe, withCtx as fe, mergeProps as de, TransitionGroup as xt } from "vue";
-let Se = null;
-function bt() {
-  if (Se != null) return Se;
+import { nextTick as _, ref as D, computed as Z, defineComponent as et, onMounted as tt, onUnmounted as at, watch as te, createElementBlock as q, openBlock as Y, createCommentVNode as ae, createElementVNode as U, normalizeStyle as ge, renderSlot as J, normalizeClass as ie, withModifiers as Ye, toDisplayString as Ne, unref as X, Fragment as Ue, renderList as _e, createVNode as He, withCtx as fe, mergeProps as de, TransitionGroup as Tt } from "vue";
+let $e = null;
+function It() {
+  if ($e != null) return $e;
   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 l = document.createElement("div");
   l.style.width = "100%", e.appendChild(l);
-  const r = e.offsetWidth - l.offsetWidth;
-  return document.body.removeChild(e), Se = r, r;
+  const o = e.offsetWidth - l.offsetWidth;
+  return document.body.removeChild(e), $e = o, o;
 }
-function Ye(e, l, r, t = {}) {
+function Xe(e, l, o, a = {}) {
   const {
-    gutterX: y = 0,
+    gutterX: m = 0,
     gutterY: h = 0,
-    header: m = 0,
+    header: c = 0,
     footer: i = 0,
-    paddingLeft: w = 0,
-    paddingRight: b = 0,
+    paddingLeft: x = 0,
+    paddingRight: M = 0,
     sizes: n = {
       base: 1,
       sm: 2,
@@ -25,195 +25,195 @@ function Ye(e, l, r, t = {}) {
       xl: 5,
       "2xl": 6
     },
-    placement: p = "masonry"
-  } = t;
-  let x = 0, M = 0;
+    placement: b = "masonry"
+  } = a;
+  let P = 0, T = 0;
   try {
     if (l && l.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const L = window.getComputedStyle(l);
-      x = parseFloat(L.paddingLeft) || 0, M = parseFloat(L.paddingRight) || 0;
+      const E = window.getComputedStyle(l);
+      P = parseFloat(E.paddingLeft) || 0, T = parseFloat(E.paddingRight) || 0;
     }
   } catch {
   }
-  const s = (w || 0) + x, g = (b || 0) + M, a = l.offsetWidth - l.clientWidth, d = a > 0 ? a + 2 : bt() + 2, v = l.offsetWidth - d - s - g, T = y * (r - 1), P = Math.floor((v - T) / r), I = e.map((L) => {
-    const k = L.width, W = L.height;
-    return Math.round(P * W / k) + i + m;
+  const f = (x || 0) + P, y = (M || 0) + T, r = l.offsetWidth - l.clientWidth, g = r > 0 ? r + 2 : It() + 2, s = l.offsetWidth - g - f - y, d = m * (o - 1), L = Math.floor((s - d) / o), p = e.map((E) => {
+    const O = E.width, j = E.height;
+    return Math.round(L * j / O) + i + c;
   });
-  if (p === "sequential-balanced") {
-    const L = I.length;
-    if (L === 0) return [];
-    const k = (z, Y, G) => z + (Y > 0 ? h : 0) + G;
-    let W = Math.max(...I), o = I.reduce((z, Y) => z + Y, 0) + h * Math.max(0, L - 1);
-    const u = (z) => {
-      let Y = 1, G = 0, ne = 0;
-      for (let J = 0; J < L; J++) {
-        const ie = I[J], Z = k(G, ne, ie);
-        if (Z <= z)
-          G = Z, ne++;
-        else if (Y++, G = ie, ne = 1, ie > z || Y > r) return !1;
+  if (b === "sequential-balanced") {
+    const E = p.length;
+    if (E === 0) return [];
+    const O = (I, N, A) => I + (N > 0 ? h : 0) + A;
+    let j = Math.max(...p), k = p.reduce((I, N) => I + N, 0) + h * Math.max(0, E - 1);
+    const z = (I) => {
+      let N = 1, A = 0, ne = 0;
+      for (let K = 0; K < E; K++) {
+        const re = p[K], ee = O(A, ne, re);
+        if (ee <= I)
+          A = ee, ne++;
+        else if (N++, A = re, ne = 1, re > I || N > o) return !1;
       }
-      return Y <= r;
+      return N <= o;
     };
-    for (; W < o; ) {
-      const z = Math.floor((W + o) / 2);
-      u(z) ? o = z : W = z + 1;
+    for (; j < k; ) {
+      const I = Math.floor((j + k) / 2);
+      z(I) ? k = I : j = I + 1;
     }
-    const E = o, $ = new Array(r).fill(0);
-    let C = r - 1, F = 0, N = 0;
-    for (let z = L - 1; z >= 0; z--) {
-      const Y = I[z], G = z < C;
-      !(k(F, N, Y) <= E) || G ? ($[C] = z + 1, C--, F = Y, N = 1) : (F = k(F, N, Y), N++);
+    const F = k, t = new Array(o).fill(0);
+    let w = o - 1, S = 0, H = 0;
+    for (let I = E - 1; I >= 0; I--) {
+      const N = p[I], A = I < w;
+      !(O(S, H, N) <= F) || A ? (t[w] = I + 1, w--, S = N, H = 1) : (S = O(S, H, N), H++);
     }
-    $[0] = 0;
-    const j = [], X = new Array(r).fill(0);
-    for (let z = 0; z < r; z++) {
-      const Y = $[z], G = z + 1 < r ? $[z + 1] : L, ne = z * (P + y);
-      for (let J = Y; J < G; J++) {
-        const Z = {
-          ...e[J],
-          columnWidth: P,
+    t[0] = 0;
+    const V = [], C = new Array(o).fill(0);
+    for (let I = 0; I < o; I++) {
+      const N = t[I], A = I + 1 < o ? t[I + 1] : E, ne = I * (L + m);
+      for (let K = N; K < A; K++) {
+        const ee = {
+          ...e[K],
+          columnWidth: L,
           imageHeight: 0,
           columnHeight: 0,
           left: 0,
           top: 0
         };
-        Z.imageHeight = I[J] - (i + m), Z.columnHeight = I[J], Z.left = ne, Z.top = X[z], X[z] += Z.columnHeight + (J + 1 < G ? h : 0), j.push(Z);
+        ee.imageHeight = p[K] - (i + c), ee.columnHeight = p[K], ee.left = ne, ee.top = C[I], C[I] += ee.columnHeight + (K + 1 < A ? h : 0), V.push(ee);
       }
     }
-    return j;
+    return V;
   }
-  const f = new Array(r).fill(0), H = [];
-  for (let L = 0; L < e.length; L++) {
-    const k = e[L], W = {
-      ...k,
+  const v = new Array(o).fill(0), $ = [];
+  for (let E = 0; E < e.length; E++) {
+    const O = e[E], j = {
+      ...O,
       columnWidth: 0,
       imageHeight: 0,
       columnHeight: 0,
       left: 0,
       top: 0
-    }, o = f.indexOf(Math.min(...f)), u = k.width, E = k.height;
-    W.columnWidth = P, W.left = o * (P + y), W.imageHeight = Math.round(P * E / u), W.columnHeight = W.imageHeight + i + m, W.top = f[o], f[o] += W.columnHeight + h, H.push(W);
+    }, k = v.indexOf(Math.min(...v)), z = O.width, F = O.height;
+    j.columnWidth = L, j.left = k * (L + m), j.imageHeight = Math.round(L * F / z), j.columnHeight = j.imageHeight + i + c, j.top = v[k], v[k] += j.columnHeight + h, $.push(j);
   }
-  return H;
+  return $;
 }
-var Mt = typeof global == "object" && global && global.Object === Object && global, Tt = typeof self == "object" && self && self.Object === Object && self, et = Mt || Tt || Function("return this")(), xe = et.Symbol, tt = Object.prototype, It = tt.hasOwnProperty, Et = tt.toString, me = xe ? xe.toStringTag : void 0;
-function kt(e) {
-  var l = It.call(e, me), r = e[me];
+var Pt = typeof global == "object" && global && global.Object === Object && global, Lt = typeof self == "object" && self && self.Object === Object && self, nt = Pt || Lt || Function("return this")(), xe = nt.Symbol, lt = Object.prototype, Et = lt.hasOwnProperty, kt = lt.toString, he = xe ? xe.toStringTag : void 0;
+function St(e) {
+  var l = Et.call(e, he), o = e[he];
   try {
-    e[me] = void 0;
-    var t = !0;
+    e[he] = void 0;
+    var a = !0;
   } catch {
   }
-  var y = Et.call(e);
-  return t && (l ? e[me] = r : delete e[me]), y;
-}
-var Lt = Object.prototype, Pt = Lt.toString;
-function St(e) {
-  return Pt.call(e);
+  var m = kt.call(e);
+  return a && (l ? e[he] = o : delete e[he]), m;
 }
-var Ht = "[object Null]", $t = "[object Undefined]", Ue = xe ? xe.toStringTag : void 0;
-function Nt(e) {
-  return e == null ? e === void 0 ? $t : Ht : Ue && Ue in Object(e) ? kt(e) : St(e);
+var Ht = Object.prototype, $t = Ht.toString;
+function Ft(e) {
+  return $t.call(e);
 }
+var Nt = "[object Null]", Bt = "[object Undefined]", Ge = xe ? xe.toStringTag : void 0;
 function Dt(e) {
+  return e == null ? e === void 0 ? Bt : Nt : Ge && Ge in Object(e) ? St(e) : Ft(e);
+}
+function zt(e) {
   return e != null && typeof e == "object";
 }
-var zt = "[object Symbol]";
-function Bt(e) {
-  return typeof e == "symbol" || Dt(e) && Nt(e) == zt;
+var At = "[object Symbol]";
+function Rt(e) {
+  return typeof e == "symbol" || zt(e) && Dt(e) == At;
 }
-var Ft = /\s/;
-function At(e) {
-  for (var l = e.length; l-- && Ft.test(e.charAt(l)); )
+var Wt = /\s/;
+function Ot(e) {
+  for (var l = e.length; l-- && Wt.test(e.charAt(l)); )
     ;
   return l;
 }
-var Wt = /^\s+/;
-function Rt(e) {
-  return e && e.slice(0, At(e) + 1).replace(Wt, "");
+var Ct = /^\s+/;
+function Vt(e) {
+  return e && e.slice(0, Ot(e) + 1).replace(Ct, "");
 }
-function Ne(e) {
+function Be(e) {
   var l = typeof e;
   return e != null && (l == "object" || l == "function");
 }
-var _e = NaN, Ot = /^[-+]0x[0-9a-f]+$/i, Ct = /^0b[01]+$/i, jt = /^0o[0-7]+$/i, Vt = parseInt;
-function Xe(e) {
+var Je = NaN, jt = /^[-+]0x[0-9a-f]+$/i, qt = /^0b[01]+$/i, Yt = /^0o[0-7]+$/i, Ut = parseInt;
+function Ke(e) {
   if (typeof e == "number")
     return e;
-  if (Bt(e))
-    return _e;
-  if (Ne(e)) {
+  if (Rt(e))
+    return Je;
+  if (Be(e)) {
     var l = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = Ne(l) ? l + "" : l;
+    e = Be(l) ? l + "" : l;
   }
   if (typeof e != "string")
     return e === 0 ? e : +e;
-  e = Rt(e);
-  var r = Ct.test(e);
-  return r || jt.test(e) ? Vt(e.slice(2), r ? 2 : 8) : Ot.test(e) ? _e : +e;
+  e = Vt(e);
+  var o = qt.test(e);
+  return o || Yt.test(e) ? Ut(e.slice(2), o ? 2 : 8) : jt.test(e) ? Je : +e;
 }
-var He = function() {
-  return et.Date.now();
-}, qt = "Expected a function", Yt = Math.max, Ut = Math.min;
-function Ge(e, l, r) {
-  var t, y, h, m, i, w, b = 0, n = !1, p = !1, x = !0;
+var Fe = function() {
+  return nt.Date.now();
+}, _t = "Expected a function", Xt = Math.max, Gt = Math.min;
+function Qe(e, l, o) {
+  var a, m, h, c, i, x, M = 0, n = !1, b = !1, P = !0;
   if (typeof e != "function")
-    throw new TypeError(qt);
-  l = Xe(l) || 0, Ne(r) && (n = !!r.leading, p = "maxWait" in r, h = p ? Yt(Xe(r.maxWait) || 0, l) : h, x = "trailing" in r ? !!r.trailing : x);
-  function M(f) {
-    var H = t, L = y;
-    return t = y = void 0, b = f, m = e.apply(L, H), m;
+    throw new TypeError(_t);
+  l = Ke(l) || 0, Be(o) && (n = !!o.leading, b = "maxWait" in o, h = b ? Xt(Ke(o.maxWait) || 0, l) : h, P = "trailing" in o ? !!o.trailing : P);
+  function T(v) {
+    var $ = a, E = m;
+    return a = m = void 0, M = v, c = e.apply(E, $), c;
   }
-  function s(f) {
-    return b = f, i = setTimeout(d, l), n ? M(f) : m;
+  function f(v) {
+    return M = v, i = setTimeout(g, l), n ? T(v) : c;
   }
-  function g(f) {
-    var H = f - w, L = f - b, k = l - H;
-    return p ? Ut(k, h - L) : k;
+  function y(v) {
+    var $ = v - x, E = v - M, O = l - $;
+    return b ? Gt(O, h - E) : O;
   }
-  function a(f) {
-    var H = f - w, L = f - b;
-    return w === void 0 || H >= l || H < 0 || p && L >= h;
+  function r(v) {
+    var $ = v - x, E = v - M;
+    return x === void 0 || $ >= l || $ < 0 || b && E >= h;
   }
-  function d() {
-    var f = He();
-    if (a(f))
-      return v(f);
-    i = setTimeout(d, g(f));
+  function g() {
+    var v = Fe();
+    if (r(v))
+      return s(v);
+    i = setTimeout(g, y(v));
   }
-  function v(f) {
-    return i = void 0, x && t ? M(f) : (t = y = void 0, m);
+  function s(v) {
+    return i = void 0, P && a ? T(v) : (a = m = void 0, c);
   }
-  function T() {
-    i !== void 0 && clearTimeout(i), b = 0, t = w = y = i = void 0;
+  function d() {
+    i !== void 0 && clearTimeout(i), M = 0, a = x = m = i = void 0;
   }
-  function P() {
-    return i === void 0 ? m : v(He());
+  function L() {
+    return i === void 0 ? c : s(Fe());
   }
-  function I() {
-    var f = He(), H = a(f);
-    if (t = arguments, y = this, w = f, H) {
+  function p() {
+    var v = Fe(), $ = r(v);
+    if (a = arguments, m = this, x = v, $) {
       if (i === void 0)
-        return s(w);
-      if (p)
-        return clearTimeout(i), i = setTimeout(d, l), M(w);
+        return f(x);
+      if (b)
+        return clearTimeout(i), i = setTimeout(g, l), T(x);
     }
-    return i === void 0 && (i = setTimeout(d, l)), m;
+    return i === void 0 && (i = setTimeout(g, l)), c;
   }
-  return I.cancel = T, I.flush = P, I;
+  return p.cancel = d, p.flush = L, p;
 }
 function ue(e, l) {
-  const r = l ?? (typeof window < "u" ? window.innerWidth : 1024), t = e.sizes;
-  return r >= 1536 && t["2xl"] ? t["2xl"] : r >= 1280 && t.xl ? t.xl : r >= 1024 && t.lg ? t.lg : r >= 768 && t.md ? t.md : r >= 640 && t.sm ? t.sm : t.base;
+  const o = l ?? (typeof window < "u" ? window.innerWidth : 1024), a = e.sizes;
+  return o >= 1536 && a["2xl"] ? a["2xl"] : o >= 1280 && a.xl ? a.xl : o >= 1024 && a.lg ? a.lg : o >= 768 && a.md ? a.md : o >= 640 && a.sm ? a.sm : a.base;
 }
-function _t(e) {
+function Jt(e) {
   const l = e ?? (typeof window < "u" ? window.innerWidth : 1024);
   return l >= 1536 ? "2xl" : l >= 1280 ? "xl" : l >= 1024 ? "lg" : l >= 768 ? "md" : l >= 640 ? "sm" : "base";
 }
-function Xt(e) {
-  return e.reduce((r, t) => Math.max(r, t.top + t.columnHeight), 0) + 500;
+function Kt(e) {
+  return e.reduce((o, a) => Math.max(o, a.top + a.columnHeight), 0) + 500;
 }
-function Gt(e) {
+function Qt(e) {
   return {
     transform: `translate3d(${e.left}px, ${e.top}px, 0)`,
     top: "0px",
@@ -222,646 +222,678 @@ function Gt(e) {
     height: `${e.columnHeight}px`
   };
 }
-function Jt(e, l = 0) {
+function Zt(e, l = 0) {
   return {
-    style: Gt(e),
+    style: Qt(e),
     "data-top": e.top,
     "data-left": e.left,
     "data-id": `${e.page}-${e.id}`,
     "data-index": l
   };
 }
-function De(e, l) {
+function be(e, l) {
   if (!e.length || l <= 0)
     return new Array(Math.max(1, l)).fill(0);
-  const t = Array.from(new Set(e.map((m) => m.left))).sort((m, i) => m - i).slice(0, l), y = /* @__PURE__ */ new Map();
-  for (let m = 0; m < t.length; m++) y.set(t[m], m);
-  const h = new Array(t.length).fill(0);
-  for (const m of e) {
-    const i = y.get(m.left);
-    i != null && (h[i] = Math.max(h[i], m.top + m.columnHeight));
+  const a = Array.from(new Set(e.map((c) => c.left))).sort((c, i) => c - i).slice(0, l), m = /* @__PURE__ */ new Map();
+  for (let c = 0; c < a.length; c++) m.set(a[c], c);
+  const h = new Array(a.length).fill(0);
+  for (const c of e) {
+    const i = m.get(c.left);
+    i != null && (h[i] = Math.max(h[i], c.top + c.columnHeight));
   }
   for (; h.length < l; ) h.push(0);
   return h;
 }
-function Kt(e, l) {
-  let r = 0, t = 0;
-  const y = 1e3;
-  function h(n, p) {
-    var s;
-    const x = (s = e.container) == null ? void 0 : s.value;
-    if (x) {
-      const g = x.scrollTop, a = x.clientHeight;
-      r = g - y, t = g + a + y;
+function ea(e, l) {
+  let o = 0, a = 0;
+  const m = 1e3;
+  function h(n, b) {
+    var f;
+    const P = (f = e.container) == null ? void 0 : f.value;
+    if (P) {
+      const y = P.scrollTop, r = P.clientHeight;
+      o = y - m, a = y + r + m;
     }
-    return n + p >= r && n <= t;
+    return n + b >= o && n <= a;
   }
-  function m(n, p) {
-    var v;
-    const x = parseInt(n.dataset.left || "0", 10), M = parseInt(n.dataset.top || "0", 10), s = parseInt(n.dataset.index || "0", 10), g = n.offsetHeight || parseInt(getComputedStyle(n).height || "200", 10) || 200;
-    if ((v = l == null ? void 0 : l.virtualizing) != null && v.value) {
-      n.style.transition = "none", n.style.opacity = "1", n.style.transform = `translate3d(${x}px, ${M}px, 0) scale(1)`, n.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
-        n.style.transition = "", p();
+  function c(n, b) {
+    var s;
+    const P = parseInt(n.dataset.left || "0", 10), T = parseInt(n.dataset.top || "0", 10), f = parseInt(n.dataset.index || "0", 10), y = n.offsetHeight || parseInt(getComputedStyle(n).height || "200", 10) || 200;
+    if ((s = l == null ? void 0 : l.virtualizing) != null && s.value) {
+      n.style.transition = "none", n.style.opacity = "1", n.style.transform = `translate3d(${P}px, ${T}px, 0) scale(1)`, n.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+        n.style.transition = "", b();
       });
       return;
     }
-    if (!h(M, g)) {
-      n.style.opacity = "1", n.style.transform = `translate3d(${x}px, ${M}px, 0) scale(1)`, n.style.transition = "none", p();
+    if (!h(T, y)) {
+      n.style.opacity = "1", n.style.transform = `translate3d(${P}px, ${T}px, 0) scale(1)`, n.style.transition = "none", b();
       return;
     }
-    const a = Math.min(s * 20, 160), d = n.style.getPropertyValue("--masonry-opacity-delay");
-    n.style.setProperty("--masonry-opacity-delay", `${a}ms`), requestAnimationFrame(() => {
-      n.style.opacity = "1", n.style.transform = `translate3d(${x}px, ${M}px, 0) scale(1)`;
-      const T = () => {
-        d ? n.style.setProperty("--masonry-opacity-delay", d) : n.style.removeProperty("--masonry-opacity-delay"), n.removeEventListener("transitionend", T), p();
+    const r = Math.min(f * 20, 160), g = n.style.getPropertyValue("--masonry-opacity-delay");
+    n.style.setProperty("--masonry-opacity-delay", `${r}ms`), requestAnimationFrame(() => {
+      n.style.opacity = "1", n.style.transform = `translate3d(${P}px, ${T}px, 0) scale(1)`;
+      const d = () => {
+        g ? n.style.setProperty("--masonry-opacity-delay", g) : n.style.removeProperty("--masonry-opacity-delay"), n.removeEventListener("transitionend", d), b();
       };
-      n.addEventListener("transitionend", T);
+      n.addEventListener("transitionend", d);
     });
   }
   function i(n) {
-    var M;
-    const p = parseInt(n.dataset.left || "0", 10), x = parseInt(n.dataset.top || "0", 10);
-    if ((M = l == null ? void 0 : l.virtualizing) != null && M.value) {
-      n.style.transition = "none", n.style.opacity = "1", n.style.transform = `translate3d(${p}px, ${x}px, 0) scale(1)`, n.style.removeProperty("--masonry-opacity-delay");
+    var T;
+    const b = parseInt(n.dataset.left || "0", 10), P = parseInt(n.dataset.top || "0", 10);
+    if ((T = l == null ? void 0 : l.virtualizing) != null && T.value) {
+      n.style.transition = "none", n.style.opacity = "1", n.style.transform = `translate3d(${b}px, ${P}px, 0) scale(1)`, n.style.removeProperty("--masonry-opacity-delay");
       return;
     }
-    n.style.opacity = "0", n.style.transform = `translate3d(${p}px, ${x + 10}px, 0) scale(0.985)`;
+    n.style.opacity = "0", n.style.transform = `translate3d(${b}px, ${P + 10}px, 0) scale(0.985)`;
   }
-  function w(n) {
-    var s;
-    const p = parseInt(n.dataset.left || "0", 10), x = parseInt(n.dataset.top || "0", 10), M = n.offsetHeight || parseInt(getComputedStyle(n).height || "200", 10) || 200;
-    if (!((s = l == null ? void 0 : l.virtualizing) != null && s.value)) {
-      if (!h(x, M)) {
+  function x(n) {
+    var f;
+    const b = parseInt(n.dataset.left || "0", 10), P = parseInt(n.dataset.top || "0", 10), T = n.offsetHeight || parseInt(getComputedStyle(n).height || "200", 10) || 200;
+    if (!((f = l == null ? void 0 : l.virtualizing) != null && f.value)) {
+      if (!h(P, T)) {
         n.style.transition = "none";
         return;
       }
-      n.style.transition = "none", n.style.opacity = "1", n.style.transform = `translate3d(${p}px, ${x}px, 0) scale(1)`, n.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+      n.style.transition = "none", n.style.opacity = "1", n.style.transform = `translate3d(${b}px, ${P}px, 0) scale(1)`, n.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
         n.style.transition = "";
       });
     }
   }
-  function b(n, p) {
-    var I;
-    const x = parseInt(n.dataset.left || "0", 10), M = parseInt(n.dataset.top || "0", 10), s = n.offsetHeight || parseInt(getComputedStyle(n).height || "200", 10) || 200;
-    if ((I = l == null ? void 0 : l.virtualizing) != null && I.value) {
-      p();
+  function M(n, b) {
+    var p;
+    const P = parseInt(n.dataset.left || "0", 10), T = parseInt(n.dataset.top || "0", 10), f = n.offsetHeight || parseInt(getComputedStyle(n).height || "200", 10) || 200;
+    if ((p = l == null ? void 0 : l.virtualizing) != null && p.value) {
+      b();
       return;
     }
-    if (!h(M, s)) {
-      n.style.transition = "none", n.style.opacity = "0", p();
+    if (!h(T, f)) {
+      n.style.transition = "none", n.style.opacity = "0", b();
       return;
     }
-    const g = typeof (l == null ? void 0 : l.leaveDurationMs) == "number" ? l.leaveDurationMs : NaN;
-    let a = Number.isFinite(g) && g > 0 ? g : NaN;
-    if (!Number.isFinite(a)) {
-      const H = getComputedStyle(n).getPropertyValue("--masonry-leave-duration") || "", L = parseFloat(H);
-      a = Number.isFinite(L) && L > 0 ? L : 200;
+    const y = typeof (l == null ? void 0 : l.leaveDurationMs) == "number" ? l.leaveDurationMs : NaN;
+    let r = Number.isFinite(y) && y > 0 ? y : NaN;
+    if (!Number.isFinite(r)) {
+      const $ = getComputedStyle(n).getPropertyValue("--masonry-leave-duration") || "", E = parseFloat($);
+      r = Number.isFinite(E) && E > 0 ? E : 200;
     }
-    const d = n.style.transitionDuration, v = () => {
-      n.removeEventListener("transitionend", T), clearTimeout(P), n.style.transitionDuration = d || "";
-    }, T = (f) => {
-      (!f || f.target === n) && (v(), p());
-    }, P = setTimeout(() => {
-      v(), p();
-    }, a + 100);
+    const g = n.style.transitionDuration, s = () => {
+      n.removeEventListener("transitionend", d), clearTimeout(L), n.style.transitionDuration = g || "";
+    }, d = (v) => {
+      (!v || v.target === n) && (s(), b());
+    }, L = setTimeout(() => {
+      s(), b();
+    }, r + 100);
     requestAnimationFrame(() => {
-      n.style.transitionDuration = `${a}ms`, n.style.opacity = "0", n.style.transform = `translate3d(${x}px, ${M + 10}px, 0) scale(0.985)`, n.addEventListener("transitionend", T);
+      n.style.transitionDuration = `${r}ms`, n.style.opacity = "0", n.style.transform = `translate3d(${P}px, ${T + 10}px, 0) scale(0.985)`, n.addEventListener("transitionend", d);
     });
   }
   return {
-    onEnter: m,
+    onEnter: c,
     onBeforeEnter: i,
-    onBeforeLeave: w,
-    onLeave: b
+    onBeforeLeave: x,
+    onLeave: M
   };
 }
-function Qt({
+function ta({
   container: e,
   masonry: l,
-  columns: r,
-  containerHeight: t,
-  isLoading: y,
+  columns: o,
+  containerHeight: a,
+  isLoading: m,
   pageSize: h,
-  refreshLayout: m,
+  refreshLayout: c,
   setItemsRaw: i,
-  loadNext: w,
-  loadThresholdPx: b
+  loadNext: x,
+  loadThresholdPx: M
 }) {
   let n = 0;
-  async function p(x) {
+  async function b(P, T = !1) {
     if (!e.value) return;
-    const M = x ?? De(l.value, r.value), s = M.length ? Math.max(...M) : 0, g = e.value.scrollTop + e.value.clientHeight, a = e.value.scrollTop > n + 1;
+    const f = P ?? be(l.value, o.value), y = f.length ? Math.max(...f) : 0, r = e.value.scrollTop + e.value.clientHeight, g = e.value.scrollTop > n + 1;
     n = e.value.scrollTop;
-    const d = typeof b == "number" ? b : 200, v = d >= 0 ? Math.max(0, s - d) : Math.max(0, s + d);
-    if (g >= v && a && !y.value) {
-      await w(), await q();
+    const s = typeof M == "number" ? M : 200, d = s >= 0 ? Math.max(0, y - s) : Math.max(0, y + s);
+    if (r >= d && (g || T) && !m.value) {
+      await x(), await _();
       return;
     }
   }
   return {
-    handleScroll: p
+    handleScroll: b
   };
 }
-function Zt(e) {
-  const { useSwipeMode: l, masonry: r, isLoading: t, loadNext: y, loadPage: h, paginationHistory: m } = e, i = D(0), w = D(0), b = D(!1), n = D(0), p = D(0), x = D(null), M = Q(() => {
-    if (!l.value || r.value.length === 0) return null;
-    const o = Math.max(0, Math.min(i.value, r.value.length - 1));
-    return r.value[o] || null;
-  }), s = Q(() => {
-    if (!l.value || !M.value) return null;
-    const o = i.value + 1;
-    return o >= r.value.length ? null : r.value[o] || null;
-  }), g = Q(() => {
-    if (!l.value || !M.value) return null;
-    const o = i.value - 1;
-    return o < 0 ? null : r.value[o] || null;
+function aa(e) {
+  const { useSwipeMode: l, masonry: o, isLoading: a, loadNext: m, loadPage: h, paginationHistory: c } = e, i = D(0), x = D(0), M = D(!1), n = D(0), b = D(0), P = D(null), T = Z(() => {
+    if (!l.value || o.value.length === 0) return null;
+    const k = Math.max(0, Math.min(i.value, o.value.length - 1));
+    return o.value[k] || null;
+  }), f = Z(() => {
+    if (!l.value || !T.value) return null;
+    const k = i.value + 1;
+    return k >= o.value.length ? null : o.value[k] || null;
+  }), y = Z(() => {
+    if (!l.value || !T.value) return null;
+    const k = i.value - 1;
+    return k < 0 ? null : o.value[k] || null;
   });
-  function a() {
-    if (!x.value) return;
-    const o = x.value.clientHeight;
-    w.value = -i.value * o;
+  function r() {
+    if (!P.value) return;
+    const k = P.value.clientHeight;
+    x.value = -i.value * k;
   }
-  function d() {
-    if (!s.value) {
-      y();
+  function g() {
+    if (!f.value) {
+      m();
       return;
     }
-    i.value++, a(), i.value >= r.value.length - 5 && y();
+    i.value++, r(), i.value >= o.value.length - 5 && m();
   }
-  function v() {
-    g.value && (i.value--, a());
+  function s() {
+    y.value && (i.value--, r());
   }
-  function T(o) {
-    l.value && (b.value = !0, n.value = o.touches[0].clientY, p.value = w.value, o.preventDefault());
+  function d(k) {
+    l.value && (M.value = !0, n.value = k.touches[0].clientY, b.value = x.value, k.preventDefault());
   }
-  function P(o) {
-    if (!l.value || !b.value) return;
-    const u = o.touches[0].clientY - n.value;
-    w.value = p.value + u, o.preventDefault();
+  function L(k) {
+    if (!l.value || !M.value) return;
+    const z = k.touches[0].clientY - n.value;
+    x.value = b.value + z, k.preventDefault();
   }
-  function I(o) {
-    if (!l.value || !b.value) return;
-    b.value = !1;
-    const u = w.value - p.value;
-    Math.abs(u) > 100 ? u > 0 && g.value ? v() : u < 0 && s.value ? d() : a() : a(), o.preventDefault();
+  function p(k) {
+    if (!l.value || !M.value) return;
+    M.value = !1;
+    const z = x.value - b.value;
+    Math.abs(z) > 100 ? z > 0 && y.value ? s() : z < 0 && f.value ? g() : r() : r(), k.preventDefault();
   }
-  function f(o) {
-    l.value && (b.value = !0, n.value = o.clientY, p.value = w.value, o.preventDefault());
+  function v(k) {
+    l.value && (M.value = !0, n.value = k.clientY, b.value = x.value, k.preventDefault());
   }
-  function H(o) {
-    if (!l.value || !b.value) return;
-    const u = o.clientY - n.value;
-    w.value = p.value + u, o.preventDefault();
+  function $(k) {
+    if (!l.value || !M.value) return;
+    const z = k.clientY - n.value;
+    x.value = b.value + z, k.preventDefault();
   }
-  function L(o) {
-    if (!l.value || !b.value) return;
-    b.value = !1;
-    const u = w.value - p.value;
-    Math.abs(u) > 100 ? u > 0 && g.value ? v() : u < 0 && s.value ? d() : a() : a(), o.preventDefault();
+  function E(k) {
+    if (!l.value || !M.value) return;
+    M.value = !1;
+    const z = x.value - b.value;
+    Math.abs(z) > 100 ? z > 0 && y.value ? s() : z < 0 && f.value ? g() : r() : r(), k.preventDefault();
   }
-  function k() {
-    !l.value && i.value > 0 && (i.value = 0, w.value = 0), l.value && r.value.length === 0 && !t.value && h(m.value[0]), l.value && a();
+  function O() {
+    !l.value && i.value > 0 && (i.value = 0, x.value = 0), l.value && o.value.length === 0 && !a.value && h(c.value[0]), l.value && r();
   }
-  function W() {
-    i.value = 0, w.value = 0, b.value = !1;
+  function j() {
+    i.value = 0, x.value = 0, M.value = !1;
   }
   return {
     // State
     currentSwipeIndex: i,
-    swipeOffset: w,
-    isDragging: b,
-    swipeContainer: x,
+    swipeOffset: x,
+    isDragging: M,
+    swipeContainer: P,
     // Computed
-    currentItem: M,
-    nextItem: s,
-    previousItem: g,
+    currentItem: T,
+    nextItem: f,
+    previousItem: y,
     // Functions
-    handleTouchStart: T,
-    handleTouchMove: P,
-    handleTouchEnd: I,
-    handleMouseDown: f,
-    handleMouseMove: H,
-    handleMouseUp: L,
-    goToNextItem: d,
-    goToPreviousItem: v,
-    snapToCurrentItem: a,
-    handleWindowResize: k,
-    reset: W
+    handleTouchStart: d,
+    handleTouchMove: L,
+    handleTouchEnd: p,
+    handleMouseDown: v,
+    handleMouseMove: $,
+    handleMouseUp: E,
+    goToNextItem: g,
+    goToPreviousItem: s,
+    snapToCurrentItem: r,
+    handleWindowResize: O,
+    reset: j
   };
 }
-function he(e) {
+function me(e) {
   return e instanceof Error ? e : new Error(String(e));
 }
-function ea(e) {
+function na(e) {
   const {
     getNextPage: l,
-    masonry: r,
-    isLoading: t,
-    hasReachedEnd: y,
+    masonry: o,
+    isLoading: a,
+    hasReachedEnd: m,
     loadError: h,
-    currentPage: m,
+    currentPage: c,
     paginationHistory: i,
-    refreshLayout: w,
-    retryMaxAttempts: b,
+    refreshLayout: x,
+    retryMaxAttempts: M,
     retryInitialDelayMs: n,
-    retryBackoffStepMs: p,
-    backfillEnabled: x,
-    backfillDelayMs: M,
-    backfillMaxCalls: s,
-    pageSize: g,
-    autoRefreshOnEmpty: a,
-    emits: d
-  } = e, v = D(!1);
-  let T = !1;
-  function P(u, E) {
-    return new Promise(($) => {
-      const C = Math.max(0, u | 0), F = Date.now();
-      E(C, C);
-      const N = setInterval(() => {
-        if (v.value) {
-          clearInterval(N), $();
+    retryBackoffStepMs: b,
+    mode: P,
+    backfillDelayMs: T,
+    backfillMaxCalls: f,
+    pageSize: y,
+    autoRefreshOnEmpty: r,
+    emits: g
+  } = e, s = D(!1);
+  let d = !1;
+  function L(F) {
+    return o.value.filter((t) => t.page === F).length;
+  }
+  function p(F, t) {
+    return new Promise((w) => {
+      const S = Math.max(0, F | 0), H = Date.now();
+      t(S, S);
+      const V = setInterval(() => {
+        if (s.value) {
+          clearInterval(V), w();
           return;
         }
-        const j = Date.now() - F, X = Math.max(0, C - j);
-        E(X, C), X <= 0 && (clearInterval(N), $());
+        const C = Date.now() - H, I = Math.max(0, S - C);
+        t(I, S), I <= 0 && (clearInterval(V), w());
       }, 100);
     });
   }
-  async function I(u) {
-    let E = 0;
-    const $ = b;
-    let C = n;
+  async function v(F) {
+    let t = 0;
+    const w = M;
+    let S = n;
     for (; ; )
       try {
-        const F = await u();
-        return E > 0 && d("retry:stop", { attempt: E, success: !0 }), F;
-      } catch (F) {
-        if (E++, E > $)
-          throw d("retry:stop", { attempt: E - 1, success: !1 }), F;
-        d("retry:start", { attempt: E, max: $, totalMs: C }), await P(C, (N, j) => {
-          d("retry:tick", { attempt: E, remainingMs: N, totalMs: j });
-        }), C += p;
+        const H = await F();
+        return t > 0 && g("retry:stop", { attempt: t, success: !0 }), H;
+      } catch (H) {
+        if (t++, t > w)
+          throw g("retry:stop", { attempt: t - 1, success: !1 }), H;
+        g("retry:start", { attempt: t, max: w, totalMs: S }), await p(S, (V, C) => {
+          g("retry:tick", { attempt: t, remainingMs: V, totalMs: C });
+        }), S += b;
       }
   }
-  async function f(u) {
+  async function $(F) {
     try {
-      const E = await I(() => l(u));
-      return w([...r.value, ...E.items]), E;
-    } catch (E) {
-      throw E;
+      const t = await v(() => l(F));
+      return x([...o.value, ...t.items]), t;
+    } catch (t) {
+      throw t;
     }
   }
-  async function H(u, E = !1) {
-    if (!E && !x || T || v.value || y.value) return;
-    const $ = (u || 0) + (g || 0);
-    if (!g || g <= 0) return;
+  async function E(F, t = !1) {
+    if (!t && P !== "backfill" || d || s.value || m.value) return;
+    const w = (F || 0) + (y || 0);
+    if (!y || y <= 0) return;
     if (i.value[i.value.length - 1] == null) {
-      y.value = !0;
+      m.value = !0;
       return;
     }
-    if (!(r.value.length >= $)) {
-      T = !0, t.value = !0;
+    if (!(o.value.length >= w)) {
+      d = !0, a.value = !0;
       try {
-        let F = 0;
-        for (d("backfill:start", { target: $, fetched: r.value.length, calls: F }); r.value.length < $ && F < s && i.value[i.value.length - 1] != null && !v.value && !y.value && T && (await P(M, (j, X) => {
-          d("backfill:tick", {
-            fetched: r.value.length,
-            target: $,
-            calls: F,
-            remainingMs: j,
-            totalMs: X
+        let H = 0;
+        for (g("backfill:start", { target: w, fetched: o.value.length, calls: H }); o.value.length < w && H < f && i.value[i.value.length - 1] != null && !s.value && !m.value && d && (await p(T, (C, I) => {
+          g("backfill:tick", {
+            fetched: o.value.length,
+            target: w,
+            calls: H,
+            remainingMs: C,
+            totalMs: I
           });
-        }), !(v.value || !T)); ) {
-          const N = i.value[i.value.length - 1];
-          if (N == null) {
-            y.value = !0;
+        }), !(s.value || !d)); ) {
+          const V = i.value[i.value.length - 1];
+          if (V == null) {
+            m.value = !0;
             break;
           }
           try {
-            if (v.value || !T) break;
-            const j = await f(N);
-            if (v.value || !T) break;
-            h.value = null, i.value.push(j.nextPage), j.nextPage == null && (y.value = !0);
-          } catch (j) {
-            if (v.value || !T) break;
-            h.value = he(j);
+            if (s.value || !d) break;
+            const C = await $(V);
+            if (s.value || !d) break;
+            h.value = null, i.value.push(C.nextPage), C.nextPage == null && (m.value = !0);
+          } catch (C) {
+            if (s.value || !d) break;
+            h.value = me(C);
           }
-          F++;
+          H++;
         }
-        d("backfill:stop", { fetched: r.value.length, calls: F });
+        g("backfill:stop", { fetched: o.value.length, calls: H });
       } finally {
-        T = !1, t.value = !1;
+        d = !1, a.value = !1, g("loading:stop", { fetched: o.value.length });
       }
     }
   }
-  async function L(u) {
-    if (!t.value) {
-      v.value = !1, t.value = !0, y.value = !1, h.value = null;
+  async function O(F) {
+    if (!a.value) {
+      s.value = !1, a.value = !0, m.value = !1, h.value = null;
       try {
-        const E = r.value.length;
-        if (v.value) return;
-        const $ = await f(u);
-        return v.value ? void 0 : (h.value = null, m.value = u, i.value.push($.nextPage), $.nextPage == null && (y.value = !0), await H(E), $);
-      } catch (E) {
-        throw h.value = he(E), E;
+        const t = o.value.length;
+        if (s.value) return;
+        const w = await $(F);
+        return s.value ? void 0 : (h.value = null, c.value = F, i.value.push(w.nextPage), w.nextPage == null && (m.value = !0), await E(t), w);
+      } catch (t) {
+        throw h.value = me(t), t;
       } finally {
-        t.value = !1;
+        a.value = !1;
       }
     }
   }
-  async function k() {
-    if (!t.value && !y.value) {
-      v.value = !1, t.value = !0, h.value = null;
+  async function j() {
+    if (!a.value && !m.value) {
+      s.value = !1, a.value = !0, h.value = null;
       try {
-        const u = r.value.length;
-        if (v.value) return;
-        const E = i.value[i.value.length - 1];
-        if (E == null) {
-          y.value = !0, t.value = !1;
+        const F = o.value.length;
+        if (s.value) return;
+        if (P === "refresh" && c.value != null && L(c.value) < y) {
+          const H = await v(() => l(c.value));
+          if (s.value) return;
+          const V = [...o.value], C = H.items.filter((N) => !N || N.id == null || N.page == null ? !1 : !V.some((A) => A && A.id === N.id && A.page === N.page));
+          if (C.length > 0) {
+            const N = [...o.value, ...C];
+            x(N), await new Promise((A) => setTimeout(A, 0));
+          }
+          if (h.value = null, C.length === 0) {
+            const N = i.value[i.value.length - 1];
+            if (N == null) {
+              m.value = !0;
+              return;
+            }
+            const A = await $(N);
+            return s.value ? void 0 : (h.value = null, c.value = N, i.value.push(A.nextPage), A.nextPage == null && (m.value = !0), await E(F), A);
+          }
+          if (L(c.value) >= y) {
+            const N = i.value[i.value.length - 1];
+            if (N == null) {
+              m.value = !0;
+              return;
+            }
+            const A = await $(N);
+            return s.value ? void 0 : (h.value = null, c.value = N, i.value.push(A.nextPage), A.nextPage == null && (m.value = !0), await E(F), A);
+          } else
+            return H;
+        }
+        const t = i.value[i.value.length - 1];
+        if (t == null) {
+          m.value = !0;
           return;
         }
-        const $ = await f(E);
-        return v.value ? void 0 : (h.value = null, m.value = E, i.value.push($.nextPage), $.nextPage == null && (y.value = !0), await H(u), $);
-      } catch (u) {
-        throw h.value = he(u), u;
+        const w = await $(t);
+        return s.value ? void 0 : (h.value = null, c.value = t, i.value.push(w.nextPage), w.nextPage == null && (m.value = !0), await E(F), w);
+      } catch (F) {
+        throw h.value = me(F), F;
       } finally {
-        t.value = !1;
+        a.value = !1, g("loading:stop", { fetched: o.value.length });
       }
     }
   }
-  async function W() {
-    if (!t.value) {
-      v.value = !1, t.value = !0;
+  async function k() {
+    if (!a.value) {
+      s.value = !1, a.value = !0;
       try {
-        const u = m.value;
-        if (u == null) {
-          console.warn("[Masonry] No current page to refresh - currentPage:", m.value, "paginationHistory:", i.value);
+        const F = c.value;
+        if (F == null) {
+          console.warn("[Masonry] No current page to refresh - currentPage:", c.value, "paginationHistory:", i.value);
           return;
         }
-        r.value = [], y.value = !1, h.value = null, i.value = [u];
-        const E = await f(u);
-        if (v.value) return;
-        h.value = null, m.value = u, i.value.push(E.nextPage), E.nextPage == null && (y.value = !0);
-        const $ = r.value.length;
-        return await H($), E;
-      } catch (u) {
-        throw h.value = he(u), u;
+        o.value = [], m.value = !1, h.value = null, i.value = [F];
+        const t = await $(F);
+        if (s.value) return;
+        h.value = null, c.value = F, i.value.push(t.nextPage), t.nextPage == null && (m.value = !0);
+        const w = o.value.length;
+        return await E(w), t;
+      } catch (F) {
+        throw h.value = me(F), F;
       } finally {
-        t.value = !1;
+        a.value = !1, g("loading:stop", { fetched: o.value.length });
       }
     }
   }
-  function o() {
-    const u = T;
-    v.value = !0, t.value = !1, T = !1, u && d("backfill:stop", { fetched: r.value.length, calls: 0, cancelled: !0 });
+  function z() {
+    const F = d;
+    s.value = !0, a.value = !1, d = !1, F && g("backfill:stop", { fetched: o.value.length, calls: 0, cancelled: !0 }), g("loading:stop", { fetched: o.value.length });
   }
   return {
-    loadPage: L,
-    loadNext: k,
-    refreshCurrentPage: W,
-    cancelLoad: o,
-    maybeBackfillToTarget: H,
-    getContent: f
+    loadPage: O,
+    loadNext: j,
+    refreshCurrentPage: k,
+    cancelLoad: z,
+    maybeBackfillToTarget: E,
+    getContent: $
   };
 }
-function ta(e) {
+function la(e) {
   const {
     masonry: l,
-    useSwipeMode: r,
-    refreshLayout: t,
-    refreshCurrentPage: y,
+    useSwipeMode: o,
+    refreshLayout: a,
+    refreshCurrentPage: m,
     loadNext: h,
-    maybeBackfillToTarget: m,
+    maybeBackfillToTarget: c,
     autoRefreshOnEmpty: i,
-    paginationHistory: w
+    paginationHistory: x
   } = e;
-  async function b(s) {
-    const g = l.value.filter((a) => a.id !== s.id);
-    if (l.value = g, await q(), g.length === 0 && w.value.length > 0) {
-      if (i)
-        await y();
-      else
-        try {
-          await h(), await m(0, !0);
-        } catch {
-        }
-      return;
-    }
-    await new Promise((a) => requestAnimationFrame(() => a())), requestAnimationFrame(() => {
-      t(g);
-    });
+  let M = /* @__PURE__ */ new Set(), n = null, b = !1;
+  async function P() {
+    if (M.size === 0 || b) return;
+    b = !0;
+    const d = Array.from(M);
+    M.clear(), n = null, await f(d), b = !1;
   }
-  async function n(s) {
-    if (!s || s.length === 0) return;
-    const g = new Set(s.map((d) => d.id)), a = l.value.filter((d) => !g.has(d.id));
-    if (l.value = a, await q(), a.length === 0 && w.value.length > 0) {
+  async function T(d) {
+    M.add(d), n && clearTimeout(n), n = setTimeout(() => {
+      P();
+    }, 16);
+  }
+  async function f(d) {
+    if (!d || d.length === 0) return;
+    const L = new Set(d.map((v) => v.id)), p = l.value.filter((v) => !L.has(v.id));
+    if (l.value = p, await _(), p.length === 0 && x.value.length > 0) {
       if (i)
-        await y();
+        await m();
       else
         try {
-          await h(), await m(0, !0);
+          await h(), await c(0, !0);
         } catch {
         }
       return;
     }
-    await new Promise((d) => requestAnimationFrame(() => d())), requestAnimationFrame(() => {
-      t(a);
+    await new Promise((v) => requestAnimationFrame(() => v())), requestAnimationFrame(() => {
+      a(p);
     });
   }
-  async function p(s, g) {
-    if (!s) return;
-    const a = l.value;
-    if (a.findIndex((P) => P.id === s.id) !== -1) return;
-    const v = [...a], T = Math.min(g, v.length);
-    v.splice(T, 0, s), l.value = v, await q(), r.value || (await new Promise((P) => requestAnimationFrame(() => P())), requestAnimationFrame(() => {
-      t(v);
+  async function y(d) {
+    !d || d.length === 0 || (d.forEach((L) => M.add(L)), n && clearTimeout(n), n = setTimeout(() => {
+      P();
+    }, 16));
+  }
+  async function r(d, L) {
+    if (!d) return;
+    const p = l.value;
+    if (p.findIndex((O) => O.id === d.id) !== -1) return;
+    const $ = [...p], E = Math.min(L, $.length);
+    $.splice(E, 0, d), l.value = $, await _(), o.value || (await new Promise((O) => requestAnimationFrame(() => O())), requestAnimationFrame(() => {
+      a($);
     }));
   }
-  async function x(s, g) {
-    var L;
-    if (!s || s.length === 0) return;
-    if (!g || g.length !== s.length) {
+  async function g(d, L) {
+    var F;
+    if (!d || d.length === 0) return;
+    if (!L || L.length !== d.length) {
       console.warn("[Masonry] restoreMany: items and indices arrays must have the same length");
       return;
     }
-    const a = l.value, d = new Set(a.map((k) => k.id)), v = [];
-    for (let k = 0; k < s.length; k++)
-      d.has((L = s[k]) == null ? void 0 : L.id) || v.push({ item: s[k], index: g[k] });
-    if (v.length === 0) return;
-    const T = /* @__PURE__ */ new Map();
-    for (const { item: k, index: W } of v)
-      T.set(W, k);
-    const P = v.length > 0 ? Math.max(...v.map(({ index: k }) => k)) : -1, I = Math.max(a.length - 1, P), f = [];
-    let H = 0;
-    for (let k = 0; k <= I; k++)
-      T.has(k) ? f.push(T.get(k)) : H < a.length && (f.push(a[H]), H++);
-    for (; H < a.length; )
-      f.push(a[H]), H++;
-    l.value = f, await q(), r.value || (await new Promise((k) => requestAnimationFrame(() => k())), requestAnimationFrame(() => {
-      t(f);
+    const p = l.value, v = new Set(p.map((t) => t.id)), $ = [];
+    for (let t = 0; t < d.length; t++)
+      v.has((F = d[t]) == null ? void 0 : F.id) || $.push({ item: d[t], index: L[t] });
+    if ($.length === 0) return;
+    const E = /* @__PURE__ */ new Map();
+    for (const { item: t, index: w } of $)
+      E.set(w, t);
+    const O = $.length > 0 ? Math.max(...$.map(({ index: t }) => t)) : -1, j = Math.max(p.length - 1, O), k = [];
+    let z = 0;
+    for (let t = 0; t <= j; t++)
+      E.has(t) ? k.push(E.get(t)) : z < p.length && (k.push(p[z]), z++);
+    for (; z < p.length; )
+      k.push(p[z]), z++;
+    l.value = k, await _(), o.value || (await new Promise((t) => requestAnimationFrame(() => t())), requestAnimationFrame(() => {
+      a(k);
     }));
   }
-  async function M() {
+  async function s() {
     l.value = [];
   }
   return {
-    remove: b,
-    removeMany: n,
-    restore: p,
-    restoreMany: x,
-    removeAll: M
+    remove: T,
+    removeMany: y,
+    restore: r,
+    restoreMany: g,
+    removeAll: s
   };
 }
-function aa(e) {
+function oa(e) {
   const {
     masonry: l,
-    useSwipeMode: r,
-    container: t,
-    columns: y,
+    useSwipeMode: o,
+    container: a,
+    columns: m,
     containerWidth: h,
-    masonryContentHeight: m,
+    masonryContentHeight: c,
     layout: i,
-    fixedDimensions: w,
-    checkItemDimensions: b
+    fixedDimensions: x,
+    checkItemDimensions: M
   } = e;
   let n = [];
-  function p(g) {
-    const a = Xt(g);
-    let d = 0;
-    if (t.value) {
-      const { scrollTop: v, clientHeight: T } = t.value;
-      d = v + T + 100;
+  function b(y) {
+    const r = Kt(y);
+    let g = 0;
+    if (a.value) {
+      const { scrollTop: s, clientHeight: d } = a.value;
+      g = s + d + 100;
     }
-    m.value = Math.max(a, d);
+    c.value = Math.max(r, g);
   }
-  function x(g) {
-    var T, P;
-    if (r.value) {
-      l.value = g;
+  function P(y) {
+    var d, L;
+    if (o.value) {
+      l.value = y;
       return;
     }
-    if (!t.value) return;
-    if (b(g, "refreshLayout"), g.length > 1e3 && n.length > g.length && n.length - g.length < 100) {
-      let I = !0;
-      for (let f = 0; f < g.length; f++)
-        if (((T = g[f]) == null ? void 0 : T.id) !== ((P = n[f]) == null ? void 0 : P.id)) {
-          I = !1;
+    if (l.value = y, !a.value) return;
+    if (M(y, "refreshLayout"), y.length > 1e3 && n.length > y.length && n.length - y.length < 100) {
+      let p = !0;
+      for (let v = 0; v < y.length; v++)
+        if (((d = y[v]) == null ? void 0 : d.id) !== ((L = n[v]) == null ? void 0 : L.id)) {
+          p = !1;
           break;
         }
-      if (I) {
-        const f = g.map((H, L) => ({
-          ...n[L],
-          originalIndex: L
+      if (p) {
+        const v = y.map(($, E) => ({
+          ...n[E],
+          originalIndex: E
         }));
-        p(f), l.value = f, n = f;
+        b(v), l.value = v, n = v;
         return;
       }
     }
-    const d = g.map((I, f) => ({
-      ...I,
-      originalIndex: f
-    })), v = t.value;
-    if (w.value && w.value.width !== void 0) {
-      const I = v.style.width, f = v.style.boxSizing;
-      v.style.boxSizing = "border-box", v.style.width = `${w.value.width}px`, v.offsetWidth;
-      const H = Ye(d, v, y.value, i.value);
-      v.style.width = I, v.style.boxSizing = f, p(H), l.value = H, n = H;
+    const g = y.map((p, v) => ({
+      ...p,
+      originalIndex: v
+    })), s = a.value;
+    if (x.value && x.value.width !== void 0) {
+      const p = s.style.width, v = s.style.boxSizing;
+      s.style.boxSizing = "border-box", s.style.width = `${x.value.width}px`, s.offsetWidth;
+      const $ = Xe(g, s, m.value, i.value);
+      s.style.width = p, s.style.boxSizing = v, b($), l.value = $, n = $;
     } else {
-      const I = Ye(d, v, y.value, i.value);
-      p(I), l.value = I, n = I;
+      const p = Xe(g, s, m.value, i.value);
+      b(p), l.value = p, n = p;
     }
   }
-  function M(g, a) {
-    w.value = g, g && (g.width !== void 0 && (h.value = g.width), !r.value && t.value && l.value.length > 0 && q(() => {
-      y.value = ue(i.value, h.value), x(l.value), a && a();
+  function T(y, r) {
+    x.value = y, y && (y.width !== void 0 && (h.value = y.width), !o.value && a.value && l.value.length > 0 && _(() => {
+      m.value = ue(i.value, h.value), P(l.value), r && r();
     }));
   }
-  function s() {
-    y.value = ue(i.value, h.value), x(l.value);
+  function f() {
+    m.value = ue(i.value, h.value), P(l.value);
   }
   return {
-    refreshLayout: x,
-    setFixedDimensions: M,
-    onResize: s,
-    calculateHeight: p
+    refreshLayout: P,
+    setFixedDimensions: T,
+    onResize: f,
+    calculateHeight: b
   };
 }
-function na(e) {
+function ia(e) {
   const {
     masonry: l,
-    container: r,
-    columns: t,
-    virtualBufferPx: y,
+    container: o,
+    columns: a,
+    virtualBufferPx: m,
     loadThresholdPx: h
-  } = e, m = D(e.handleScroll), i = D(0), w = D(0), b = y, n = D(!1), p = D({
+  } = e, c = D(e.handleScroll), i = D(0), x = D(0), M = m, n = D(!1), b = D({
     distanceToTrigger: 0,
     isNearTrigger: !1
-  }), x = Q(() => {
-    const a = i.value - b, d = i.value + w.value + b, v = l.value;
-    return !v || v.length === 0 ? [] : v.filter((P) => {
-      if (typeof P.top != "number" || typeof P.columnHeight != "number")
+  }), P = Z(() => {
+    const r = i.value - M, g = i.value + x.value + M, s = l.value;
+    return !s || s.length === 0 ? [] : s.filter((L) => {
+      if (typeof L.top != "number" || typeof L.columnHeight != "number")
         return !0;
-      const I = P.top;
-      return P.top + P.columnHeight >= a && I <= d;
+      const p = L.top;
+      return L.top + L.columnHeight >= r && p <= g;
     });
   });
-  function M(a) {
-    if (!r.value) return;
-    const { scrollTop: d, clientHeight: v } = r.value, T = d + v, P = a ?? De(l.value, t.value), I = P.length ? Math.max(...P) : 0, f = typeof h == "number" ? h : 200, H = f >= 0 ? Math.max(0, I - f) : Math.max(0, I + f), L = Math.max(0, H - T), k = L <= 100;
-    p.value = {
-      distanceToTrigger: Math.round(L),
-      isNearTrigger: k
+  function T(r) {
+    if (!o.value) return;
+    const { scrollTop: g, clientHeight: s } = o.value, d = g + s, L = r ?? be(l.value, a.value), p = L.length ? Math.max(...L) : 0, v = typeof h == "number" ? h : 200, $ = v >= 0 ? Math.max(0, p - v) : Math.max(0, p + v), E = Math.max(0, $ - d), O = E <= 100;
+    b.value = {
+      distanceToTrigger: Math.round(E),
+      isNearTrigger: O
     };
   }
-  async function s() {
-    if (r.value) {
-      const d = r.value.scrollTop, v = r.value.clientHeight || window.innerHeight, T = v > 0 ? v : window.innerHeight;
-      i.value = d, w.value = T;
+  async function f() {
+    if (o.value) {
+      const g = o.value.scrollTop, s = o.value.clientHeight || window.innerHeight, d = s > 0 ? s : window.innerHeight;
+      i.value = g, x.value = d;
     }
-    n.value = !0, await q(), await new Promise((d) => requestAnimationFrame(() => d())), n.value = !1;
-    const a = De(l.value, t.value);
-    m.value(a), M(a);
+    n.value = !0, await _(), await new Promise((g) => requestAnimationFrame(() => g())), n.value = !1;
+    const r = be(l.value, a.value);
+    c.value(r), T(r);
   }
-  function g() {
-    i.value = 0, w.value = 0, n.value = !1, p.value = {
+  function y() {
+    i.value = 0, x.value = 0, n.value = !1, b.value = {
       distanceToTrigger: 0,
       isNearTrigger: !1
     };
   }
   return {
     viewportTop: i,
-    viewportHeight: w,
+    viewportHeight: x,
     virtualizing: n,
-    scrollProgress: p,
-    visibleMasonry: x,
-    updateScrollProgress: M,
-    updateViewport: s,
-    reset: g,
-    handleScroll: m
+    scrollProgress: b,
+    visibleMasonry: P,
+    updateScrollProgress: T,
+    updateViewport: f,
+    reset: y,
+    handleScroll: c
   };
 }
-function la(e) {
-  const { masonry: l } = e, r = D(/* @__PURE__ */ new Set());
-  function t(m) {
-    return typeof m == "number" && m > 0 && Number.isFinite(m);
+function ra(e) {
+  const { masonry: l } = e, o = D(/* @__PURE__ */ new Set());
+  function a(c) {
+    return typeof c == "number" && c > 0 && Number.isFinite(c);
   }
-  function y(m, i) {
+  function m(c, i) {
     try {
-      if (!Array.isArray(m) || m.length === 0) return;
-      const w = m.filter((n) => !t(n == null ? void 0 : n.width) || !t(n == null ? void 0 : n.height));
-      if (w.length === 0) return;
-      const b = [];
-      for (const n of w) {
-        const p = (n == null ? void 0 : n.id) ?? `idx:${l.value.indexOf(n)}`;
-        r.value.has(p) || (r.value.add(p), b.push(p));
+      if (!Array.isArray(c) || c.length === 0) return;
+      const x = c.filter((n) => !a(n == null ? void 0 : n.width) || !a(n == null ? void 0 : n.height));
+      if (x.length === 0) return;
+      const M = [];
+      for (const n of x) {
+        const b = (n == null ? void 0 : n.id) ?? `idx:${l.value.indexOf(n)}`;
+        o.value.has(b) || (o.value.add(b), M.push(b));
       }
-      if (b.length > 0) {
-        const n = b.slice(0, 10);
+      if (M.length > 0) {
+        const n = M.slice(0, 10);
         console.warn(
           "[Masonry] Items missing width/height detected:",
           {
             context: i,
-            count: b.length,
+            count: M.length,
             sampleIds: n,
             hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
           }
@@ -871,27 +903,27 @@ function la(e) {
     }
   }
   function h() {
-    r.value.clear();
+    o.value.clear();
   }
   return {
-    checkItemDimensions: y,
-    invalidDimensionIds: r,
+    checkItemDimensions: m,
+    invalidDimensionIds: o,
     reset: h
   };
 }
-const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm transition-all duration-300 bg-white relative" }, ia = {
+const sa = { class: "flex-1 relative min-h-0" }, ua = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm transition-all duration-300 bg-white relative" }, ca = {
   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"
-}, sa = {
+}, va = {
   key: 1,
   class: "relative w-full h-full"
-}, ua = ["src"], ca = ["src", "autoplay", "controls"], va = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, fa = {
+}, fa = ["src"], da = ["src", "autoplay", "controls"], ha = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, ma = {
   key: 3,
   class: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-center justify-center z-10"
-}, da = {
+}, ga = {
   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"
-}, be = /* @__PURE__ */ Ke({
+}, Me = /* @__PURE__ */ et({
   __name: "MasonryItem",
   props: {
     item: {},
@@ -901,281 +933,312 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
     headerHeight: { default: 0 },
     footerHeight: { default: 0 },
     isActive: { type: Boolean, default: !1 },
-    inSwipeMode: { type: Boolean, default: !1 }
+    inSwipeMode: { type: Boolean, default: !1 },
+    preloadThreshold: { default: 1 }
   },
-  emits: ["preload:success", "preload:error", "mouse-enter", "mouse-leave"],
+  emits: ["preload:success", "preload:error", "mouse-enter", "mouse-leave", "in-view", "in-view-and-loaded"],
   setup(e, { emit: l }) {
-    const r = e, t = l, y = D(!1), h = D(!1), m = D(null), i = D(!1), w = D(!1), b = D(null), n = D(!1), p = D(!1), x = D(!1), M = D(null), s = D(null);
+    const o = e, a = l, m = D(!1), h = D(!1), c = D(null), i = D(!1), x = D(!1), M = D(null), n = D(!1), b = D(!1), P = D(!1), T = D(!1), f = D(!1), y = D(null), r = D(null);
     let g = null;
-    const a = Q(() => {
-      var o;
-      return r.type ?? ((o = r.item) == null ? void 0 : o.type) ?? "image";
-    }), d = Q(() => {
-      var o;
-      return r.notFound ?? ((o = r.item) == null ? void 0 : o.notFound) ?? !1;
-    }), v = Q(() => !!r.inSwipeMode);
-    function T(o) {
-      t("mouse-enter", { item: r.item, type: o });
+    const s = Z(() => {
+      var t;
+      return o.type ?? ((t = o.item) == null ? void 0 : t.type) ?? "image";
+    }), d = Z(() => {
+      var t;
+      return o.notFound ?? ((t = o.item) == null ? void 0 : t.notFound) ?? !1;
+    }), L = Z(() => !!o.inSwipeMode);
+    function p(t, w) {
+      const S = t === "image" ? m.value : i.value;
+      b.value && S && !P.value && (P.value = !0, a("in-view-and-loaded", { item: o.item, type: t, src: w }));
     }
-    function P(o) {
-      t("mouse-leave", { item: r.item, type: o });
+    function v(t) {
+      a("mouse-enter", { item: o.item, type: t });
     }
-    function I(o) {
-      if (v.value) return;
-      const u = o.target;
-      u && (u.paused ? u.play() : u.pause());
+    function $(t) {
+      a("mouse-leave", { item: o.item, type: t });
     }
-    function f(o) {
-      const u = o.target;
-      u && (v.value || u.play(), T("video"));
+    function E(t) {
+      if (L.value) return;
+      const w = t.target;
+      w && (w.paused ? w.play() : w.pause());
     }
-    function H(o) {
-      const u = o.target;
-      u && (v.value || u.pause(), P("video"));
+    function O(t) {
+      const w = t.target;
+      w && (L.value || w.play(), v("video"));
     }
-    function L(o) {
-      return new Promise((u, E) => {
-        if (!o) {
-          const N = new Error("No image source provided");
-          t("preload:error", { item: r.item, type: "image", src: o, error: N }), E(N);
+    function j(t) {
+      const w = t.target;
+      w && (L.value || w.pause(), $("video"));
+    }
+    function k(t) {
+      return new Promise((w, S) => {
+        if (!t) {
+          const I = new Error("No image source provided");
+          a("preload:error", { item: o.item, type: "image", src: t, error: I }), S(I);
           return;
         }
-        const $ = new Image(), C = Date.now(), F = 300;
-        $.onload = () => {
-          const N = Date.now() - C, j = Math.max(0, F - N);
+        const H = new Image(), V = Date.now(), C = 300;
+        H.onload = () => {
+          const I = Date.now() - V, N = Math.max(0, C - I);
           setTimeout(async () => {
-            y.value = !0, h.value = !1, p.value = !1, await q(), await new Promise((X) => setTimeout(X, 100)), x.value = !0, t("preload:success", { item: r.item, type: "image", src: o }), u();
-          }, j);
-        }, $.onerror = () => {
-          h.value = !0, y.value = !1, p.value = !1;
-          const N = new Error("Failed to load image");
-          t("preload:error", { item: r.item, type: "image", src: o, error: N }), E(N);
-        }, $.src = o;
+            m.value = !0, h.value = !1, T.value = !1, await _(), await new Promise((A) => setTimeout(A, 100)), f.value = !0, a("preload:success", { item: o.item, type: "image", src: t }), p("image", t), w();
+          }, N);
+        }, H.onerror = () => {
+          h.value = !0, m.value = !1, T.value = !1;
+          const I = new Error("Failed to load image");
+          a("preload:error", { item: o.item, type: "image", src: t, error: I }), S(I);
+        }, H.src = t;
       });
     }
-    function k(o) {
-      return new Promise((u, E) => {
-        if (!o) {
-          const N = new Error("No video source provided");
-          t("preload:error", { item: r.item, type: "video", src: o, error: N }), E(N);
+    function z(t) {
+      return new Promise((w, S) => {
+        if (!t) {
+          const I = new Error("No video source provided");
+          a("preload:error", { item: o.item, type: "video", src: t, error: I }), S(I);
           return;
         }
-        const $ = document.createElement("video"), C = Date.now(), F = 300;
-        $.preload = "metadata", $.muted = !0, $.onloadedmetadata = () => {
-          const N = Date.now() - C, j = Math.max(0, F - N);
+        const H = document.createElement("video"), V = Date.now(), C = 300;
+        H.preload = "metadata", H.muted = !0, H.onloadedmetadata = () => {
+          const I = Date.now() - V, N = Math.max(0, C - I);
           setTimeout(async () => {
-            i.value = !0, w.value = !1, p.value = !1, await q(), await new Promise((X) => setTimeout(X, 100)), x.value = !0, t("preload:success", { item: r.item, type: "video", src: o }), u();
-          }, j);
-        }, $.onerror = () => {
-          w.value = !0, i.value = !1, p.value = !1;
-          const N = new Error("Failed to load video");
-          t("preload:error", { item: r.item, type: "video", src: o, error: N }), E(N);
-        }, $.src = o;
+            i.value = !0, x.value = !1, T.value = !1, await _(), await new Promise((A) => setTimeout(A, 100)), f.value = !0, a("preload:success", { item: o.item, type: "video", src: t }), p("video", t), w();
+          }, N);
+        }, H.onerror = () => {
+          x.value = !0, i.value = !1, T.value = !1;
+          const I = new Error("Failed to load video");
+          a("preload:error", { item: o.item, type: "video", src: t, error: I }), S(I);
+        }, H.src = t;
       });
     }
-    async function W() {
-      var u;
-      if (!n.value || p.value || d.value || a.value === "video" && i.value || a.value === "image" && y.value)
+    async function F() {
+      var w;
+      if (!n.value || T.value || d.value || s.value === "video" && i.value || s.value === "image" && m.value)
         return;
-      const o = (u = r.item) == null ? void 0 : u.src;
-      if (o)
-        if (p.value = !0, x.value = !1, a.value === "video") {
-          b.value = o, i.value = !1, w.value = !1;
+      const t = (w = o.item) == null ? void 0 : w.src;
+      if (t)
+        if (T.value = !0, f.value = !1, s.value === "video") {
+          M.value = t, i.value = !1, x.value = !1;
           try {
-            await k(o);
+            await z(t);
           } catch {
           }
         } else {
-          m.value = o, y.value = !1, h.value = !1;
+          c.value = t, m.value = !1, h.value = !1;
           try {
-            await L(o);
+            await k(t);
           } catch {
           }
         }
     }
-    return Qe(() => {
-      M.value && (g = new IntersectionObserver(
-        (o) => {
-          o.forEach((u) => {
-            u.isIntersecting && u.intersectionRatio >= 1 ? n.value || (n.value = !0, W()) : u.isIntersecting;
+    return tt(async () => {
+      if (!y.value) return;
+      const t = [o.preloadThreshold, 1].filter((S, H, V) => V.indexOf(S) === H).sort((S, H) => S - H);
+      g = new IntersectionObserver(
+        (S) => {
+          S.forEach((H) => {
+            const V = H.intersectionRatio, C = V >= 1, I = V >= o.preloadThreshold;
+            if (C && !b.value) {
+              b.value = !0, a("in-view", { item: o.item, type: s.value });
+              const N = s.value === "image" ? c.value : M.value, A = s.value === "image" ? m.value : i.value;
+              N && A && p(s.value, N);
+            }
+            I && !n.value ? (n.value = !0, F()) : H.isIntersecting;
           });
         },
         {
-          // Only trigger when item is 100% visible (full height in view)
-          threshold: [1]
+          // Trigger at both preloadThreshold and 1.0 (fully in view)
+          threshold: t
+        }
+      ), g.observe(y.value), await _(), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          w();
+        });
+      }), setTimeout(() => {
+        w();
+      }, 100);
+      function w() {
+        if (!y.value || b.value) return;
+        const S = y.value.getBoundingClientRect(), H = window.innerHeight, V = window.innerWidth;
+        if (S.top >= 0 && S.bottom <= H && S.left >= 0 && S.right <= V && S.height > 0 && S.width > 0) {
+          b.value = !0, a("in-view", { item: o.item, type: s.value });
+          const I = s.value === "image" ? c.value : M.value, N = s.value === "image" ? m.value : i.value;
+          I && N && p(s.value, I);
         }
-      ), g.observe(M.value));
-    }), Ze(() => {
+      }
+    }), at(() => {
       g && (g.disconnect(), g = null);
-    }), ee(
+    }), te(
       () => {
-        var o;
-        return (o = r.item) == null ? void 0 : o.src;
+        var t;
+        return (t = o.item) == null ? void 0 : t.src;
       },
-      async (o) => {
-        if (!(!o || d.value)) {
-          if (a.value === "video") {
-            if (o !== b.value && (i.value = !1, w.value = !1, b.value = o, n.value)) {
-              p.value = !0;
+      async (t) => {
+        if (!(!t || d.value)) {
+          if (s.value === "video") {
+            if (t !== M.value && (i.value = !1, x.value = !1, M.value = t, n.value)) {
+              T.value = !0;
               try {
-                await k(o);
+                await z(t);
               } catch {
               }
             }
-          } else if (o !== m.value && (y.value = !1, h.value = !1, m.value = o, n.value)) {
-            p.value = !0;
+          } else if (t !== c.value && (m.value = !1, h.value = !1, c.value = t, n.value)) {
+            T.value = !0;
             try {
-              await L(o);
+              await k(t);
             } catch {
             }
           }
         }
       }
-    ), ee(
-      () => r.isActive,
-      (o) => {
-        !v.value || !s.value || (o ? s.value.play() : s.value.pause());
+    ), te(
+      () => o.isActive,
+      (t) => {
+        !L.value || !r.value || (t ? r.value.play() : r.value.pause());
       }
-    ), (o, u) => (O(), R("div", {
+    ), (t, w) => (Y(), q("div", {
       ref_key: "containerRef",
-      ref: M,
+      ref: y,
       class: "relative w-full h-full flex flex-col"
     }, [
-      o.headerHeight > 0 ? (O(), R("div", {
+      t.headerHeight > 0 ? (Y(), q("div", {
         key: 0,
         class: "relative z-10",
-        style: ge({ height: `${o.headerHeight}px` })
+        style: ge({ height: `${t.headerHeight}px` })
       }, [
-        _(o.$slots, "header", {
-          item: o.item,
-          remove: o.remove,
-          imageLoaded: y.value,
+        J(t.$slots, "header", {
+          item: t.item,
+          remove: t.remove,
+          imageLoaded: m.value,
           imageError: h.value,
           videoLoaded: i.value,
-          videoError: w.value,
+          videoError: x.value,
           showNotFound: d.value,
-          isLoading: p.value,
-          mediaType: a.value
+          isLoading: T.value,
+          mediaType: s.value,
+          isFullyInView: b.value
         })
-      ], 4)) : te("", !0),
-      V("div", oa, [
-        _(o.$slots, "default", {
-          item: o.item,
-          remove: o.remove,
-          imageLoaded: y.value,
+      ], 4)) : ae("", !0),
+      U("div", sa, [
+        J(t.$slots, "default", {
+          item: t.item,
+          remove: t.remove,
+          imageLoaded: m.value,
           imageError: h.value,
           videoLoaded: i.value,
-          videoError: w.value,
+          videoError: x.value,
           showNotFound: d.value,
-          isLoading: p.value,
-          mediaType: a.value,
-          imageSrc: m.value,
-          videoSrc: b.value,
-          showMedia: x.value
+          isLoading: T.value,
+          mediaType: s.value,
+          imageSrc: c.value,
+          videoSrc: M.value,
+          showMedia: f.value,
+          isFullyInView: b.value
         }, () => [
-          V("div", ra, [
-            d.value ? (O(), R("div", ia, u[3] || (u[3] = [
-              V("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
-              V("span", { class: "font-medium" }, "Not Found", -1),
-              V("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
-            ]))) : (O(), R("div", sa, [
-              a.value === "image" && m.value ? (O(), R("img", {
+          U("div", ua, [
+            d.value ? (Y(), q("div", ca, w[3] || (w[3] = [
+              U("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
+              U("span", { class: "font-medium" }, "Not Found", -1),
+              U("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
+            ]))) : (Y(), q("div", va, [
+              s.value === "image" && c.value ? (Y(), q("img", {
                 key: 0,
-                src: m.value,
-                class: re([
+                src: c.value,
+                class: ie([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  y.value && x.value ? "opacity-100" : "opacity-0"
+                  m.value && f.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 loading: "lazy",
                 decoding: "async",
                 alt: "",
-                onMouseenter: u[0] || (u[0] = (E) => T("image")),
-                onMouseleave: u[1] || (u[1] = (E) => P("image"))
-              }, null, 42, ua)) : te("", !0),
-              a.value === "video" && b.value ? (O(), R("video", {
+                onMouseenter: w[0] || (w[0] = (S) => v("image")),
+                onMouseleave: w[1] || (w[1] = (S) => $("image"))
+              }, null, 42, fa)) : ae("", !0),
+              s.value === "video" && M.value ? (Y(), q("video", {
                 key: 1,
                 ref_key: "videoEl",
-                ref: s,
-                src: b.value,
-                class: re([
+                ref: r,
+                src: M.value,
+                class: ie([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  i.value && x.value ? "opacity-100" : "opacity-0"
+                  i.value && f.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 muted: "",
                 loop: "",
                 playsinline: "",
-                autoplay: v.value && r.isActive,
-                controls: v.value,
-                onClick: je(I, ["stop"]),
-                onTouchend: je(I, ["stop", "prevent"]),
-                onMouseenter: f,
-                onMouseleave: H,
-                onError: u[2] || (u[2] = (E) => w.value = !0)
-              }, null, 42, ca)) : te("", !0),
-              !y.value && !i.value && !h.value && !w.value ? (O(), R("div", {
+                autoplay: L.value && o.isActive,
+                controls: L.value,
+                onClick: Ye(E, ["stop"]),
+                onTouchend: Ye(E, ["stop", "prevent"]),
+                onMouseenter: O,
+                onMouseleave: j,
+                onError: w[2] || (w[2] = (S) => x.value = !0)
+              }, null, 42, da)) : ae("", !0),
+              !m.value && !i.value && !h.value && !x.value ? (Y(), q("div", {
                 key: 2,
-                class: re([
+                class: ie([
                   "absolute inset-0 bg-slate-100 flex items-center justify-center transition-opacity duration-500",
-                  x.value ? "opacity-0 pointer-events-none" : "opacity-100"
+                  f.value ? "opacity-0 pointer-events-none" : "opacity-100"
                 ])
               }, [
-                V("div", va, [
-                  _(o.$slots, "placeholder-icon", { mediaType: a.value }, () => [
-                    V("i", {
-                      class: re(a.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
+                U("div", ha, [
+                  J(t.$slots, "placeholder-icon", { mediaType: s.value }, () => [
+                    U("i", {
+                      class: ie(s.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
                     }, null, 2)
                   ])
                 ])
-              ], 2)) : te("", !0),
-              p.value ? (O(), R("div", fa, u[4] || (u[4] = [
-                V("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
-                  V("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
+              ], 2)) : ae("", !0),
+              T.value ? (Y(), q("div", ma, w[4] || (w[4] = [
+                U("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
+                  U("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
                 ], -1)
-              ]))) : te("", !0),
-              a.value === "image" && h.value || a.value === "video" && w.value ? (O(), R("div", da, [
-                V("i", {
-                  class: re(a.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
+              ]))) : ae("", !0),
+              s.value === "image" && h.value || s.value === "video" && x.value ? (Y(), q("div", ga, [
+                U("i", {
+                  class: ie(s.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
                 }, null, 2),
-                V("span", null, "Failed to load " + $e(a.value), 1)
-              ])) : te("", !0)
+                U("span", null, "Failed to load " + Ne(s.value), 1)
+              ])) : ae("", !0)
             ]))
           ])
         ])
       ]),
-      o.footerHeight > 0 ? (O(), R("div", {
+      t.footerHeight > 0 ? (Y(), q("div", {
         key: 1,
         class: "relative z-10",
-        style: ge({ height: `${o.footerHeight}px` })
+        style: ge({ height: `${t.footerHeight}px` })
       }, [
-        _(o.$slots, "footer", {
-          item: o.item,
-          remove: o.remove,
-          imageLoaded: y.value,
+        J(t.$slots, "footer", {
+          item: t.item,
+          remove: t.remove,
+          imageLoaded: m.value,
           imageError: h.value,
           videoLoaded: i.value,
-          videoError: w.value,
+          videoError: x.value,
           showNotFound: d.value,
-          isLoading: p.value,
-          mediaType: a.value
+          isLoading: T.value,
+          mediaType: s.value,
+          isFullyInView: b.value
         })
-      ], 4)) : te("", !0)
+      ], 4)) : ae("", !0)
     ], 512));
   }
-}), ma = { class: "w-full h-full flex items-center justify-center p-4" }, ha = { class: "w-full h-full max-w-full max-h-full relative" }, ga = {
+}), pa = { class: "w-full h-full flex items-center justify-center p-4" }, ya = { class: "w-full h-full max-w-full max-h-full relative" }, wa = {
   key: 0,
   class: "w-full py-8 text-center"
-}, pa = {
+}, xa = {
   key: 1,
   class: "w-full py-8 text-center"
-}, ya = { class: "text-red-500 dark:text-red-400" }, wa = {
+}, ba = { class: "text-red-500 dark:text-red-400" }, Ma = {
   key: 0,
   class: "w-full py-8 text-center"
-}, xa = {
+}, Ta = {
   key: 1,
   class: "w-full py-8 text-center"
-}, ba = { class: "text-red-500 dark:text-red-400" }, Ma = /* @__PURE__ */ Ke({
+}, Ia = { class: "text-red-500 dark:text-red-400" }, Pa = /* @__PURE__ */ et({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -1218,9 +1281,10 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
       default: 40
     },
     // Backfill configuration
-    backfillEnabled: {
-      type: Boolean,
-      default: !0
+    mode: {
+      type: String,
+      default: "backfill",
+      validator: (e) => ["backfill", "none", "refresh"].includes(e)
     },
     backfillDelayMs: {
       type: Number,
@@ -1294,6 +1358,7 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
     "retry:start",
     "retry:tick",
     "retry:stop",
+    "loading:stop",
     "remove-all:complete",
     // Re-emit item-level preload events from the default MasonryItem
     "item:preload:success",
@@ -1302,8 +1367,8 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
     "item:mouse-enter",
     "item:mouse-leave"
   ],
-  setup(e, { expose: l, emit: r }) {
-    const t = e, y = {
+  setup(e, { expose: l, emit: o }) {
+    const a = e, m = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -1312,308 +1377,314 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
       paddingLeft: 0,
       paddingRight: 0,
       placement: "masonry"
-    }, h = Q(() => {
-      var c;
+    }, h = Z(() => {
+      var u;
       return {
-        ...y,
-        ...t.layout,
+        ...m,
+        ...a.layout,
         sizes: {
-          ...y.sizes,
-          ...((c = t.layout) == null ? void 0 : c.sizes) || {}
+          ...m.sizes,
+          ...((u = a.layout) == null ? void 0 : u.sizes) || {}
         }
       };
-    }), m = D(null), i = D(typeof window < "u" ? window.innerWidth : 1024), w = D(typeof window < "u" ? window.innerHeight : 768), b = D(null);
+    }), c = D(null), i = D(typeof window < "u" ? window.innerWidth : 1024), x = D(typeof window < "u" ? window.innerHeight : 768), M = D(null);
     let n = null;
-    function p(c) {
+    function b(u) {
       return {
         sm: 640,
         md: 768,
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }[c] || 768;
+      }[u] || 768;
     }
-    const x = Q(() => {
-      if (t.layoutMode === "masonry") return !1;
-      if (t.layoutMode === "swipe") return !0;
-      const c = typeof t.mobileBreakpoint == "string" ? p(t.mobileBreakpoint) : t.mobileBreakpoint;
-      return i.value < c;
-    }), M = r, s = Q({
-      get: () => t.items,
-      set: (c) => M("update:items", c)
-    }), g = D(7), a = D(null), d = D([]), v = D(null), T = D(!1), P = D(0), I = D(!1), f = D(null), H = Q(() => _t(i.value)), L = la({
-      masonry: s
-    }), { checkItemDimensions: k, reset: W } = L, o = aa({
-      masonry: s,
-      useSwipeMode: x,
-      container: a,
-      columns: g,
+    const P = Z(() => {
+      if (a.layoutMode === "masonry") return !1;
+      if (a.layoutMode === "swipe") return !0;
+      const u = typeof a.mobileBreakpoint == "string" ? b(a.mobileBreakpoint) : a.mobileBreakpoint;
+      return i.value < u;
+    }), T = o, f = Z({
+      get: () => a.items,
+      set: (u) => T("update:items", u)
+    }), y = D(7), r = D(null), g = D([]), s = D(null), d = D(!1), L = D(0), p = D(!1), v = D(null), $ = Z(() => Jt(i.value)), E = ra({
+      masonry: f
+    }), { checkItemDimensions: O, reset: j } = E, k = oa({
+      masonry: f,
+      useSwipeMode: P,
+      container: r,
+      columns: y,
       containerWidth: i,
-      masonryContentHeight: P,
+      masonryContentHeight: L,
       layout: h,
-      fixedDimensions: b,
-      checkItemDimensions: k
-    }), { refreshLayout: u, setFixedDimensions: E, onResize: $ } = o, C = na({
-      masonry: s,
-      container: a,
-      columns: g,
-      virtualBufferPx: t.virtualBufferPx,
-      loadThresholdPx: t.loadThresholdPx,
+      fixedDimensions: M,
+      checkItemDimensions: O
+    }), { refreshLayout: z, setFixedDimensions: F, onResize: t } = k, w = ia({
+      masonry: f,
+      container: r,
+      columns: y,
+      virtualBufferPx: a.virtualBufferPx,
+      loadThresholdPx: a.loadThresholdPx,
       handleScroll: () => {
       }
       // Will be set after pagination is initialized
-    }), { viewportTop: F, viewportHeight: N, virtualizing: j, visibleMasonry: X, updateScrollProgress: z, updateViewport: Y, reset: G } = C, { onEnter: ne, onBeforeEnter: J, onBeforeLeave: ie, onLeave: Z } = Kt(
-      { container: a },
-      { leaveDurationMs: t.leaveDurationMs, virtualizing: j }
-    ), at = ne, nt = J, lt = ie, ot = Z, rt = ea({
-      getNextPage: t.getNextPage,
-      masonry: s,
-      isLoading: T,
-      hasReachedEnd: I,
-      loadError: f,
-      currentPage: v,
-      paginationHistory: d,
-      refreshLayout: u,
-      retryMaxAttempts: t.retryMaxAttempts,
-      retryInitialDelayMs: t.retryInitialDelayMs,
-      retryBackoffStepMs: t.retryBackoffStepMs,
-      backfillEnabled: t.backfillEnabled,
-      backfillDelayMs: t.backfillDelayMs,
-      backfillMaxCalls: t.backfillMaxCalls,
-      pageSize: t.pageSize,
-      autoRefreshOnEmpty: t.autoRefreshOnEmpty,
-      emits: M
-    }), { loadPage: Me, loadNext: pe, refreshCurrentPage: ze, cancelLoad: Te, maybeBackfillToTarget: it } = rt, K = Zt({
-      useSwipeMode: x,
-      masonry: s,
-      isLoading: T,
+    }), { viewportTop: S, viewportHeight: H, virtualizing: V, visibleMasonry: C, updateScrollProgress: I, updateViewport: N, reset: A } = w, { onEnter: ne, onBeforeEnter: K, onBeforeLeave: re, onLeave: ee } = ea(
+      { container: r },
+      { leaveDurationMs: a.leaveDurationMs, virtualizing: V }
+    ), ot = ne, it = K, rt = re, st = ee, ut = na({
+      getNextPage: a.getNextPage,
+      masonry: f,
+      isLoading: d,
+      hasReachedEnd: p,
+      loadError: v,
+      currentPage: s,
+      paginationHistory: g,
+      refreshLayout: z,
+      retryMaxAttempts: a.retryMaxAttempts,
+      retryInitialDelayMs: a.retryInitialDelayMs,
+      retryBackoffStepMs: a.retryBackoffStepMs,
+      mode: a.mode,
+      backfillDelayMs: a.backfillDelayMs,
+      backfillMaxCalls: a.backfillMaxCalls,
+      pageSize: a.pageSize,
+      autoRefreshOnEmpty: a.autoRefreshOnEmpty,
+      emits: T
+    }), { loadPage: Te, loadNext: pe, refreshCurrentPage: De, cancelLoad: Ie, maybeBackfillToTarget: ct } = ut, Q = aa({
+      useSwipeMode: P,
+      masonry: f,
+      isLoading: d,
       loadNext: pe,
-      loadPage: Me,
-      paginationHistory: d
-    }), { handleScroll: st } = Qt({
-      container: a,
-      masonry: s,
-      columns: g,
-      containerHeight: P,
-      isLoading: T,
-      pageSize: t.pageSize,
-      refreshLayout: u,
-      setItemsRaw: (c) => {
-        s.value = c;
+      loadPage: Te,
+      paginationHistory: g
+    }), { handleScroll: ze } = ta({
+      container: r,
+      masonry: f,
+      columns: y,
+      containerHeight: L,
+      isLoading: d,
+      pageSize: a.pageSize,
+      refreshLayout: z,
+      setItemsRaw: (u) => {
+        f.value = u;
       },
       loadNext: pe,
-      loadThresholdPx: t.loadThresholdPx
+      loadThresholdPx: a.loadThresholdPx
     });
-    C.handleScroll.value = st;
-    const ut = ta({
-      masonry: s,
-      useSwipeMode: x,
-      refreshLayout: u,
-      refreshCurrentPage: ze,
+    w.handleScroll.value = ze;
+    const vt = la({
+      masonry: f,
+      useSwipeMode: P,
+      refreshLayout: z,
+      refreshCurrentPage: De,
       loadNext: pe,
-      maybeBackfillToTarget: it,
-      autoRefreshOnEmpty: t.autoRefreshOnEmpty,
-      paginationHistory: d
-    }), { remove: ce, removeMany: ct, restore: vt, restoreMany: ft, removeAll: dt } = ut;
-    function mt(c) {
-      E(c, z), !c && m.value && (i.value = m.value.clientWidth, w.value = m.value.clientHeight);
+      maybeBackfillToTarget: ct,
+      autoRefreshOnEmpty: a.autoRefreshOnEmpty,
+      paginationHistory: g
+    }), { remove: ce, removeMany: ft, restore: dt, restoreMany: ht, removeAll: mt } = vt;
+    function gt(u) {
+      F(u, I), !u && c.value && (i.value = c.value.clientWidth, x.value = c.value.clientHeight);
     }
     l({
-      isLoading: T,
-      refreshLayout: u,
+      isLoading: d,
+      refreshLayout: z,
       // Container dimensions (wrapper element)
       containerWidth: i,
-      containerHeight: w,
+      containerHeight: x,
       // Masonry content height (for backward compatibility, old containerHeight)
-      contentHeight: P,
+      contentHeight: L,
       // Current page
-      currentPage: v,
+      currentPage: s,
       // End of list tracking
-      hasReachedEnd: I,
+      hasReachedEnd: p,
       // Load error tracking
-      loadError: f,
+      loadError: v,
       // Set fixed dimensions (overrides ResizeObserver)
-      setFixedDimensions: mt,
+      setFixedDimensions: gt,
       remove: ce,
-      removeMany: ct,
-      removeAll: dt,
-      restore: vt,
-      restoreMany: ft,
+      removeMany: ft,
+      removeAll: mt,
+      restore: dt,
+      restoreMany: ht,
       loadNext: pe,
-      loadPage: Me,
-      refreshCurrentPage: ze,
-      reset: yt,
-      destroy: wt,
-      init: Ce,
-      restoreItems: Le,
-      paginationHistory: d,
-      cancelLoad: Te,
-      scrollToTop: ht,
-      scrollTo: gt,
-      totalItems: Q(() => s.value.length),
-      currentBreakpoint: H
+      loadPage: Te,
+      refreshCurrentPage: De,
+      reset: xt,
+      destroy: bt,
+      init: je,
+      restoreItems: ke,
+      paginationHistory: g,
+      cancelLoad: Ie,
+      scrollToTop: pt,
+      scrollTo: yt,
+      totalItems: Z(() => f.value.length),
+      currentBreakpoint: $
     });
-    const se = K.currentSwipeIndex, ve = K.swipeOffset, ye = K.isDragging, le = K.swipeContainer, Be = K.handleTouchStart, Fe = K.handleTouchMove, Ae = K.handleTouchEnd, We = K.handleMouseDown, Ie = K.handleMouseMove, Ee = K.handleMouseUp, ke = K.snapToCurrentItem;
-    function ht(c) {
-      a.value && a.value.scrollTo({
+    const se = Q.currentSwipeIndex, ve = Q.swipeOffset, ye = Q.isDragging, le = Q.swipeContainer, Ae = Q.handleTouchStart, Re = Q.handleTouchMove, We = Q.handleTouchEnd, Oe = Q.handleMouseDown, Pe = Q.handleMouseMove, Le = Q.handleMouseUp, Ee = Q.snapToCurrentItem;
+    function pt(u) {
+      r.value && r.value.scrollTo({
         top: 0,
-        behavior: (c == null ? void 0 : c.behavior) ?? "smooth",
-        ...c
+        behavior: (u == null ? void 0 : u.behavior) ?? "smooth",
+        ...u
       });
     }
-    function gt(c) {
-      a.value && (a.value.scrollTo({
-        top: c.top ?? a.value.scrollTop,
-        left: c.left ?? a.value.scrollLeft,
-        behavior: c.behavior ?? "auto"
-      }), a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight || window.innerHeight));
+    function yt(u) {
+      r.value && (r.value.scrollTo({
+        top: u.top ?? r.value.scrollTop,
+        left: u.left ?? r.value.scrollLeft,
+        behavior: u.behavior ?? "auto"
+      }), r.value && (S.value = r.value.scrollTop, H.value = r.value.clientHeight || window.innerHeight));
     }
-    function pt() {
-      $(), a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight);
+    function wt() {
+      t(), r.value && (S.value = r.value.scrollTop, H.value = r.value.clientHeight);
     }
-    function yt() {
-      Te(), a.value && a.value.scrollTo({
+    function xt() {
+      Ie(), r.value && r.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), s.value = [], w.value = 0, v.value = t.loadAtPage, d.value = [t.loadAtPage], I.value = !1, f.value = null, G(), we = !1;
+      }), f.value = [], x.value = 0, s.value = a.loadAtPage, g.value = [a.loadAtPage], p.value = !1, v.value = null, A(), we = !1;
     }
-    function wt() {
-      Te(), s.value = [], P.value = 0, v.value = null, d.value = [], I.value = !1, f.value = null, T.value = !1, se.value = 0, ve.value = 0, ye.value = !1, G(), W(), a.value && a.value.scrollTo({
+    function bt() {
+      Ie(), f.value = [], L.value = 0, s.value = null, g.value = [], p.value = !1, v.value = null, d.value = !1, se.value = 0, ve.value = 0, ye.value = !1, A(), j(), r.value && r.value.scrollTo({
         top: 0,
         behavior: "auto"
         // Instant scroll for destroy
       });
     }
-    const oe = Ge(async () => {
-      x.value || await Y();
-    }, 200), Re = Ge(pt, 200);
-    function Oe() {
-      K.handleWindowResize();
+    const oe = Qe(async () => {
+      P.value || await N();
+    }, 200), Ce = Qe(wt, 200);
+    function Ve() {
+      Q.handleWindowResize();
     }
-    function Ce(c, S, B) {
-      v.value = S, d.value = [S], d.value.push(B), I.value = B == null, k(c, "init"), x.value ? (s.value = [...s.value, ...c], se.value === 0 && s.value.length > 0 && (ve.value = 0)) : (u([...s.value, ...c]), a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight || window.innerHeight), q(() => {
-        a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight || window.innerHeight, z());
+    function je(u, B, R) {
+      s.value = B, g.value = [B], g.value.push(R), p.value = R == null, O(u, "init"), P.value ? (f.value = [...f.value, ...u], se.value === 0 && f.value.length > 0 && (ve.value = 0)) : (z([...f.value, ...u]), r.value && (S.value = r.value.scrollTop, H.value = r.value.clientHeight || window.innerHeight), _(() => {
+        r.value && (S.value = r.value.scrollTop, H.value = r.value.clientHeight || window.innerHeight, I());
       }));
     }
-    async function Le(c, S, B) {
-      if (!t.skipInitialLoad) {
-        Ce(c, S, B);
+    async function ke(u, B, R) {
+      if (!a.skipInitialLoad) {
+        je(u, B, R);
         return;
       }
-      v.value = S, d.value = [S], B != null && d.value.push(B), I.value = B === null, f.value = null, k(c, "restoreItems"), x.value ? (s.value = c, se.value === 0 && s.value.length > 0 && (ve.value = 0)) : (u(c), a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight || window.innerHeight), await q(), a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight || window.innerHeight, z()));
+      if (s.value = B, g.value = [B], R != null && g.value.push(R), p.value = R === null, v.value = null, O(u, "restoreItems"), P.value)
+        f.value = u, se.value === 0 && f.value.length > 0 && (ve.value = 0);
+      else if (z(u), r.value && (S.value = r.value.scrollTop, H.value = r.value.clientHeight || window.innerHeight), await _(), r.value) {
+        S.value = r.value.scrollTop, H.value = r.value.clientHeight || window.innerHeight, I(), await _();
+        const G = be(f.value, y.value), W = G.length ? Math.max(...G) : 0, qe = r.value.scrollTop + r.value.clientHeight, Se = typeof a.loadThresholdPx == "number" ? a.loadThresholdPx : 200, Mt = Se >= 0 ? Math.max(0, W - Se) : Math.max(0, W + Se);
+        qe >= Mt && !p.value && !d.value && g.value.length > 0 && g.value[g.value.length - 1] != null && await ze(G, !0);
+      }
     }
-    ee(
+    te(
       h,
       () => {
-        x.value || a.value && (g.value = ue(h.value, i.value), u(s.value));
+        P.value || r.value && (y.value = ue(h.value, i.value), z(f.value));
       },
       { deep: !0 }
-    ), ee(() => t.layoutMode, () => {
-      b.value && b.value.width !== void 0 ? i.value = b.value.width : m.value && (i.value = m.value.clientWidth);
-    }), ee(a, (c) => {
-      c && !x.value ? (c.removeEventListener("scroll", oe), c.addEventListener("scroll", oe, { passive: !0 })) : c && c.removeEventListener("scroll", oe);
+    ), te(() => a.layoutMode, () => {
+      M.value && M.value.width !== void 0 ? i.value = M.value.width : c.value && (i.value = c.value.clientWidth);
+    }), te(r, (u) => {
+      u && !P.value ? (u.removeEventListener("scroll", oe), u.addEventListener("scroll", oe, { passive: !0 })) : u && u.removeEventListener("scroll", oe);
     }, { immediate: !0 });
     let we = !1;
-    return ee(
-      () => [t.items, t.skipInitialLoad, t.initialPage, t.initialNextPage],
-      ([c, S, B, ae]) => {
-        if (S && c && c.length > 0 && !we) {
+    return te(
+      () => [a.items, a.skipInitialLoad, a.initialPage, a.initialNextPage],
+      ([u, B, R, G]) => {
+        if (B && u && u.length > 0 && !we) {
           we = !0;
-          const A = B ?? t.loadAtPage;
-          Le(c, A, ae !== void 0 ? ae : void 0);
+          const W = R ?? a.loadAtPage;
+          ke(u, W, G !== void 0 ? G : void 0);
         }
       },
       { immediate: !1 }
-    ), ee(x, (c, S) => {
-      S === void 0 && c === !1 || q(() => {
-        c ? (document.addEventListener("mousemove", Ie), document.addEventListener("mouseup", Ee), a.value && a.value.removeEventListener("scroll", oe), se.value = 0, ve.value = 0, s.value.length > 0 && ke()) : (document.removeEventListener("mousemove", Ie), document.removeEventListener("mouseup", Ee), a.value && m.value && (b.value && b.value.width !== void 0 ? i.value = b.value.width : i.value = m.value.clientWidth, a.value.removeEventListener("scroll", oe), a.value.addEventListener("scroll", oe, { passive: !0 }), s.value.length > 0 && (g.value = ue(h.value, i.value), u(s.value), F.value = a.value.scrollTop, N.value = a.value.clientHeight, z())));
+    ), te(P, (u, B) => {
+      B === void 0 && u === !1 || _(() => {
+        u ? (document.addEventListener("mousemove", Pe), document.addEventListener("mouseup", Le), r.value && r.value.removeEventListener("scroll", oe), se.value = 0, ve.value = 0, f.value.length > 0 && Ee()) : (document.removeEventListener("mousemove", Pe), document.removeEventListener("mouseup", Le), r.value && c.value && (M.value && M.value.width !== void 0 ? i.value = M.value.width : i.value = c.value.clientWidth, r.value.removeEventListener("scroll", oe), r.value.addEventListener("scroll", oe, { passive: !0 }), f.value.length > 0 && (y.value = ue(h.value, i.value), z(f.value), S.value = r.value.scrollTop, H.value = r.value.clientHeight, I())));
       });
-    }, { immediate: !0 }), ee(le, (c) => {
-      c && (c.addEventListener("touchstart", Be, { passive: !1 }), c.addEventListener("touchmove", Fe, { passive: !1 }), c.addEventListener("touchend", Ae), c.addEventListener("mousedown", We));
-    }), ee(() => s.value.length, (c, S) => {
-      x.value && c > 0 && S === 0 && (se.value = 0, q(() => ke()));
-    }), ee(m, (c) => {
-      n && (n.disconnect(), n = null), c && typeof ResizeObserver < "u" ? (n = new ResizeObserver((S) => {
-        if (!b.value)
-          for (const B of S) {
-            const ae = B.contentRect.width, A = B.contentRect.height;
-            i.value !== ae && (i.value = ae), w.value !== A && (w.value = A);
+    }, { immediate: !0 }), te(le, (u) => {
+      u && (u.addEventListener("touchstart", Ae, { passive: !1 }), u.addEventListener("touchmove", Re, { passive: !1 }), u.addEventListener("touchend", We), u.addEventListener("mousedown", Oe));
+    }), te(() => f.value.length, (u, B) => {
+      P.value && u > 0 && B === 0 && (se.value = 0, _(() => Ee()));
+    }), te(c, (u) => {
+      n && (n.disconnect(), n = null), u && typeof ResizeObserver < "u" ? (n = new ResizeObserver((B) => {
+        if (!M.value)
+          for (const R of B) {
+            const G = R.contentRect.width, W = R.contentRect.height;
+            i.value !== G && (i.value = G), x.value !== W && (x.value = W);
           }
-      }), n.observe(c), b.value || (i.value = c.clientWidth, w.value = c.clientHeight)) : c && (b.value || (i.value = c.clientWidth, w.value = c.clientHeight));
-    }, { immediate: !0 }), ee(i, (c, S) => {
-      c !== S && c > 0 && !x.value && a.value && s.value.length > 0 && q(() => {
-        g.value = ue(h.value, c), u(s.value), z();
+      }), n.observe(u), M.value || (i.value = u.clientWidth, x.value = u.clientHeight)) : u && (M.value || (i.value = u.clientWidth, x.value = u.clientHeight));
+    }, { immediate: !0 }), te(i, (u, B) => {
+      u !== B && u > 0 && !P.value && r.value && f.value.length > 0 && _(() => {
+        y.value = ue(h.value, u), z(f.value), I();
       });
-    }), Qe(async () => {
+    }), tt(async () => {
       try {
-        await q(), m.value && !n && (i.value = m.value.clientWidth, w.value = m.value.clientHeight), x.value || (g.value = ue(h.value, i.value), a.value && (F.value = a.value.scrollTop, N.value = a.value.clientHeight));
-        const c = t.loadAtPage;
-        if (d.value = [c], !t.skipInitialLoad)
-          await Me(d.value[0]);
-        else if (t.items && t.items.length > 0) {
-          const S = t.initialPage !== null && t.initialPage !== void 0 ? t.initialPage : t.loadAtPage, B = t.initialNextPage !== void 0 ? t.initialNextPage : void 0;
-          await Le(t.items, S, B), we = !0;
+        await _(), c.value && !n && (i.value = c.value.clientWidth, x.value = c.value.clientHeight), P.value || (y.value = ue(h.value, i.value), r.value && (S.value = r.value.scrollTop, H.value = r.value.clientHeight));
+        const u = a.loadAtPage;
+        if (g.value = [u], !a.skipInitialLoad)
+          await _(), await Te(g.value[0]);
+        else if (a.items && a.items.length > 0) {
+          const B = a.initialPage !== null && a.initialPage !== void 0 ? a.initialPage : a.loadAtPage, R = a.initialNextPage !== void 0 ? a.initialNextPage : void 0;
+          await ke(a.items, B, R), we = !0;
         }
-        x.value ? q(() => ke()) : z();
-      } catch (c) {
-        f.value || (console.error("Error during component initialization:", c), f.value = he(c)), T.value = !1;
+        P.value ? _(() => Ee()) : I();
+      } catch (u) {
+        v.value || (console.error("Error during component initialization:", u), v.value = me(u)), d.value = !1;
       }
-      window.addEventListener("resize", Re), window.addEventListener("resize", Oe);
-    }), Ze(() => {
-      var c;
-      n && (n.disconnect(), n = null), (c = a.value) == null || c.removeEventListener("scroll", oe), window.removeEventListener("resize", Re), window.removeEventListener("resize", Oe), le.value && (le.value.removeEventListener("touchstart", Be), le.value.removeEventListener("touchmove", Fe), le.value.removeEventListener("touchend", Ae), le.value.removeEventListener("mousedown", We)), document.removeEventListener("mousemove", Ie), document.removeEventListener("mouseup", Ee);
-    }), (c, S) => (O(), R("div", {
+      window.addEventListener("resize", Ce), window.addEventListener("resize", Ve);
+    }), at(() => {
+      var u;
+      n && (n.disconnect(), n = null), (u = r.value) == null || u.removeEventListener("scroll", oe), window.removeEventListener("resize", Ce), window.removeEventListener("resize", Ve), le.value && (le.value.removeEventListener("touchstart", Ae), le.value.removeEventListener("touchmove", Re), le.value.removeEventListener("touchend", We), le.value.removeEventListener("mousedown", Oe)), document.removeEventListener("mousemove", Pe), document.removeEventListener("mouseup", Le);
+    }), (u, B) => (Y(), q("div", {
       ref_key: "wrapper",
-      ref: m,
+      ref: c,
       class: "w-full h-full flex flex-col relative"
     }, [
-      x.value ? (O(), R("div", {
+      P.value ? (Y(), q("div", {
         key: 0,
-        class: re(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": t.forceMotion, "cursor-grab": !U(ye), "cursor-grabbing": U(ye) }]),
+        class: ie(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": a.forceMotion, "cursor-grab": !X(ye), "cursor-grabbing": X(ye) }]),
         ref_key: "swipeContainer",
         ref: le,
         style: { height: "100%", "max-height": "100%", position: "relative" }
       }, [
-        V("div", {
+        U("div", {
           class: "relative w-full",
           style: ge({
-            transform: `translateY(${U(ve)}px)`,
-            transition: U(ye) ? "none" : `transform ${e.transitionDurationMs}ms ${e.transitionEasing}`,
-            height: `${s.value.length * 100}%`
+            transform: `translateY(${X(ve)}px)`,
+            transition: X(ye) ? "none" : `transform ${e.transitionDurationMs}ms ${e.transitionEasing}`,
+            height: `${f.value.length * 100}%`
           })
         }, [
-          (O(!0), R(Ve, null, qe(s.value, (B, ae) => (O(), R("div", {
-            key: `${B.page}-${B.id}`,
+          (Y(!0), q(Ue, null, _e(f.value, (R, G) => (Y(), q("div", {
+            key: `${R.page}-${R.id}`,
             class: "absolute top-0 left-0 w-full",
             style: ge({
-              top: `${ae * (100 / s.value.length)}%`,
-              height: `${100 / s.value.length}%`
+              top: `${G * (100 / f.value.length)}%`,
+              height: `${100 / f.value.length}%`
             })
           }, [
-            V("div", ma, [
-              V("div", ha, [
-                _(c.$slots, "default", {
-                  item: B,
-                  remove: U(ce),
-                  index: B.originalIndex ?? s.value.indexOf(B)
+            U("div", pa, [
+              U("div", ya, [
+                J(u.$slots, "default", {
+                  item: R,
+                  remove: X(ce),
+                  index: R.originalIndex ?? f.value.indexOf(R)
                 }, () => [
-                  Pe(be, {
-                    item: B,
-                    remove: U(ce),
+                  He(Me, {
+                    item: R,
+                    remove: X(ce),
                     "header-height": h.value.header,
                     "footer-height": h.value.footer,
                     "in-swipe-mode": !0,
-                    "is-active": ae === U(se),
-                    "onPreload:success": S[0] || (S[0] = (A) => M("item:preload:success", A)),
-                    "onPreload:error": S[1] || (S[1] = (A) => M("item:preload:error", A)),
-                    onMouseEnter: S[2] || (S[2] = (A) => M("item:mouse-enter", A)),
-                    onMouseLeave: S[3] || (S[3] = (A) => M("item:mouse-leave", A))
+                    "is-active": G === X(se),
+                    "onPreload:success": B[0] || (B[0] = (W) => T("item:preload:success", W)),
+                    "onPreload:error": B[1] || (B[1] = (W) => T("item:preload:error", W)),
+                    onMouseEnter: B[2] || (B[2] = (W) => T("item:mouse-enter", W)),
+                    onMouseLeave: B[3] || (B[3] = (W) => T("item:mouse-leave", W))
                   }, {
-                    header: fe((A) => [
-                      _(c.$slots, "item-header", de({ ref_for: !0 }, A), void 0, !0)
+                    header: fe((W) => [
+                      J(u.$slots, "item-header", de({ ref_for: !0 }, W), void 0, !0)
                     ]),
-                    footer: fe((A) => [
-                      _(c.$slots, "item-footer", de({ ref_for: !0 }, A), void 0, !0)
+                    footer: fe((W) => [
+                      J(u.$slots, "item-footer", de({ ref_for: !0 }, W), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "remove", "header-height", "footer-height", "is-active"])
@@ -1622,62 +1693,62 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
             ])
           ], 4))), 128))
         ], 4),
-        I.value && s.value.length > 0 ? (O(), R("div", ga, [
-          _(c.$slots, "end-message", {}, () => [
-            S[8] || (S[8] = V("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
+        p.value && f.value.length > 0 ? (Y(), q("div", wa, [
+          J(u.$slots, "end-message", {}, () => [
+            B[8] || (B[8] = U("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
           ], !0)
-        ])) : te("", !0),
-        f.value && s.value.length > 0 ? (O(), R("div", pa, [
-          _(c.$slots, "error-message", { error: f.value }, () => [
-            V("p", ya, "Failed to load content: " + $e(f.value.message), 1)
+        ])) : ae("", !0),
+        v.value && f.value.length > 0 ? (Y(), q("div", xa, [
+          J(u.$slots, "error-message", { error: v.value }, () => [
+            U("p", ba, "Failed to load content: " + Ne(v.value.message), 1)
           ], !0)
-        ])) : te("", !0)
-      ], 2)) : (O(), R("div", {
+        ])) : ae("", !0)
+      ], 2)) : (Y(), q("div", {
         key: 1,
-        class: re(["overflow-auto w-full flex-1 masonry-container", { "force-motion": t.forceMotion }]),
+        class: ie(["overflow-auto w-full flex-1 masonry-container", { "force-motion": a.forceMotion }]),
         ref_key: "container",
-        ref: a
+        ref: r
       }, [
-        V("div", {
+        U("div", {
           class: "relative",
-          style: ge({ height: `${P.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
+          style: ge({ height: `${L.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
         }, [
-          Pe(xt, {
+          He(Tt, {
             name: "masonry",
             css: !1,
-            onEnter: U(at),
-            onBeforeEnter: U(nt),
-            onLeave: U(ot),
-            onBeforeLeave: U(lt)
+            onEnter: X(ot),
+            onBeforeEnter: X(it),
+            onLeave: X(st),
+            onBeforeLeave: X(rt)
           }, {
             default: fe(() => [
-              (O(!0), R(Ve, null, qe(U(X), (B, ae) => (O(), R("div", de({
-                key: `${B.page}-${B.id}`,
+              (Y(!0), q(Ue, null, _e(X(C), (R, G) => (Y(), q("div", de({
+                key: `${R.page}-${R.id}`,
                 class: "absolute masonry-item",
                 ref_for: !0
-              }, U(Jt)(B, ae)), [
-                _(c.$slots, "default", {
-                  item: B,
-                  remove: U(ce),
-                  index: B.originalIndex ?? s.value.indexOf(B)
+              }, X(Zt)(R, G)), [
+                J(u.$slots, "default", {
+                  item: R,
+                  remove: X(ce),
+                  index: R.originalIndex ?? f.value.indexOf(R)
                 }, () => [
-                  Pe(be, {
-                    item: B,
-                    remove: U(ce),
+                  He(Me, {
+                    item: R,
+                    remove: X(ce),
                     "header-height": h.value.header,
                     "footer-height": h.value.footer,
                     "in-swipe-mode": !1,
                     "is-active": !1,
-                    "onPreload:success": S[4] || (S[4] = (A) => M("item:preload:success", A)),
-                    "onPreload:error": S[5] || (S[5] = (A) => M("item:preload:error", A)),
-                    onMouseEnter: S[6] || (S[6] = (A) => M("item:mouse-enter", A)),
-                    onMouseLeave: S[7] || (S[7] = (A) => M("item:mouse-leave", A))
+                    "onPreload:success": B[4] || (B[4] = (W) => T("item:preload:success", W)),
+                    "onPreload:error": B[5] || (B[5] = (W) => T("item:preload:error", W)),
+                    onMouseEnter: B[6] || (B[6] = (W) => T("item:mouse-enter", W)),
+                    onMouseLeave: B[7] || (B[7] = (W) => T("item:mouse-leave", W))
                   }, {
-                    header: fe((A) => [
-                      _(c.$slots, "item-header", de({ ref_for: !0 }, A), void 0, !0)
+                    header: fe((W) => [
+                      J(u.$slots, "item-header", de({ ref_for: !0 }, W), void 0, !0)
                     ]),
-                    footer: fe((A) => [
-                      _(c.$slots, "item-footer", de({ ref_for: !0 }, A), void 0, !0)
+                    footer: fe((W) => [
+                      J(u.$slots, "item-footer", de({ ref_for: !0 }, W), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "remove", "header-height", "footer-height"])
@@ -1687,31 +1758,31 @@ const oa = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full ro
             _: 3
           }, 8, ["onEnter", "onBeforeEnter", "onLeave", "onBeforeLeave"])
         ], 4),
-        I.value && s.value.length > 0 ? (O(), R("div", wa, [
-          _(c.$slots, "end-message", {}, () => [
-            S[9] || (S[9] = V("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
+        p.value && f.value.length > 0 ? (Y(), q("div", Ma, [
+          J(u.$slots, "end-message", {}, () => [
+            B[9] || (B[9] = U("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
           ], !0)
-        ])) : te("", !0),
-        f.value && s.value.length > 0 ? (O(), R("div", xa, [
-          _(c.$slots, "error-message", { error: f.value }, () => [
-            V("p", ba, "Failed to load content: " + $e(f.value.message), 1)
+        ])) : ae("", !0),
+        v.value && f.value.length > 0 ? (Y(), q("div", Ta, [
+          J(u.$slots, "error-message", { error: v.value }, () => [
+            U("p", Ia, "Failed to load content: " + Ne(v.value.message), 1)
           ], !0)
-        ])) : te("", !0)
+        ])) : ae("", !0)
       ], 2))
     ], 512));
   }
-}), Ta = (e, l) => {
-  const r = e.__vccOpts || e;
-  for (const [t, y] of l)
-    r[t] = y;
-  return r;
-}, Je = /* @__PURE__ */ Ta(Ma, [["__scopeId", "data-v-c6a3147d"]]), ka = {
+}), La = (e, l) => {
+  const o = e.__vccOpts || e;
+  for (const [a, m] of l)
+    o[a] = m;
+  return o;
+}, Ze = /* @__PURE__ */ La(Pa, [["__scopeId", "data-v-84ab92bd"]]), Ha = {
   install(e) {
-    e.component("WyxosMasonry", Je), e.component("WMasonry", Je), e.component("WyxosMasonryItem", be), e.component("WMasonryItem", be);
+    e.component("WyxosMasonry", Ze), e.component("WMasonry", Ze), e.component("WyxosMasonryItem", Me), e.component("WMasonryItem", Me);
   }
 };
 export {
-  Je as Masonry,
-  be as MasonryItem,
-  ka as default
+  Ze as Masonry,
+  Me as MasonryItem,
+  Ha as default
 };