@wyxos/vibe 1.6.25 → 1.6.27

package/lib/index.js

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