@wyxos/vibe 1.6.7 → 1.6.8

package/lib/index.js

@@ -1,23 +1,23 @@
-import { nextTick as Q, defineComponent as Se, ref as k, computed as Z, onMounted as Le, watch as Ne, createElementBlock as V, openBlock as G, renderSlot as He, createElementVNode as A, createCommentVNode as le, normalizeClass as ve, toDisplayString as ie, withModifiers as je, onUnmounted as ze, normalizeStyle as Re, createVNode as Te, TransitionGroup as Ce, withCtx as qe, Fragment as _e, renderList as Ve, mergeProps as Ge, unref as Ue } from "vue";
-let ce = null;
+import { nextTick as Z, defineComponent as Le, ref as E, computed as ee, onMounted as Se, onUnmounted as Ne, watch as He, createElementBlock as B, openBlock as D, renderSlot as $e, createElementVNode as k, createCommentVNode as X, normalizeClass as se, toDisplayString as ie, withModifiers as ze, normalizeStyle as Re, createVNode as Te, TransitionGroup as _e, withCtx as Ce, Fragment as qe, renderList as Ve, mergeProps as Ge, unref as Ue } from "vue";
+let fe = null;
 function Xe() {
-  if (ce != null) return ce;
+  if (fe != null) return fe;
   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 s = e.offsetWidth - l.offsetWidth;
-  return document.body.removeChild(e), ce = s, s;
+  const o = document.createElement("div");
+  o.style.width = "100%", e.appendChild(o);
+  const l = e.offsetWidth - o.offsetWidth;
+  return document.body.removeChild(e), fe = l, l;
 }
-function Ye(e, l, s, i = {}) {
+function Ye(e, o, l, s = {}) {
   const {
-    gutterX: h = 0,
+    gutterX: T = 0,
     gutterY: m = 0,
     header: a = 0,
     footer: n = 0,
-    paddingLeft: v = 0,
-    paddingRight: f = 0,
-    sizes: d = {
+    paddingLeft: y = 0,
+    paddingRight: c = 0,
+    sizes: v = {
       base: 1,
       sm: 2,
       md: 3,
@@ -26,92 +26,92 @@ function Ye(e, l, s, i = {}) {
       "2xl": 6
     },
     placement: b = "masonry"
-  } = i;
-  let r = 0, c = 0;
+  } = s;
+  let f = 0, x = 0;
   try {
-    if (l && l.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const T = window.getComputedStyle(l);
-      r = parseFloat(T.paddingLeft) || 0, c = parseFloat(T.paddingRight) || 0;
+    if (o && o.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
+      const M = window.getComputedStyle(o);
+      f = parseFloat(M.paddingLeft) || 0, x = parseFloat(M.paddingRight) || 0;
     }
   } catch {
   }
-  const w = (v || 0) + r, I = (f || 0) + c, E = l.offsetWidth - l.clientWidth, M = E > 0 ? E + 2 : Xe() + 2, P = l.offsetWidth - M - w - I, j = h * (s - 1), N = Math.floor((P - j) / s), S = e.map((T) => {
-    const F = T.width, L = T.height;
-    return Math.round(N * L / F) + n + a;
+  const $ = (y || 0) + f, z = (c || 0) + x, N = o.offsetWidth - o.clientWidth, i = N > 0 ? N + 2 : Xe() + 2, d = o.offsetWidth - i - $ - z, L = T * (l - 1), I = Math.floor((d - L) / l), P = e.map((M) => {
+    const W = M.width, H = M.height;
+    return Math.round(I * H / W) + n + a;
   });
   if (b === "sequential-balanced") {
-    const T = S.length;
-    if (T === 0) return [];
-    const F = (y, H, O) => y + (H > 0 ? m : 0) + O;
-    let L = Math.max(...S), z = S.reduce((y, H) => y + H, 0) + m * Math.max(0, T - 1);
-    const ee = (y) => {
-      let H = 1, O = 0, C = 0;
-      for (let W = 0; W < T; W++) {
-        const U = S[W], q = F(O, C, U);
-        if (q <= y)
-          O = q, C++;
-        else if (H++, O = U, C = 1, U > y || H > s) return !1;
+    const M = P.length;
+    if (M === 0) return [];
+    const W = (w, A, R) => w + (A > 0 ? m : 0) + R;
+    let H = Math.max(...P), _ = P.reduce((w, A) => w + A, 0) + m * Math.max(0, M - 1);
+    const te = (w) => {
+      let A = 1, R = 0, q = 0;
+      for (let j = 0; j < M; j++) {
+        const U = P[j], V = W(R, q, U);
+        if (V <= w)
+          R = V, q++;
+        else if (A++, R = U, q = 1, U > w || A > l) return !1;
       }
-      return H <= s;
+      return A <= l;
     };
-    for (; L < z; ) {
-      const y = Math.floor((L + z) / 2);
-      ee(y) ? z = y : L = y + 1;
-    }
-    const te = z, X = new Array(s).fill(0);
-    let ae = s - 1, Y = 0, J = 0;
-    for (let y = T - 1; y >= 0; y--) {
-      const H = S[y], O = y < ae;
-      !(F(Y, J, H) <= te) || O ? (X[ae] = y + 1, ae--, Y = H, J = 1) : (Y = F(Y, J, H), J++);
-    }
-    X[0] = 0;
-    const R = [], ne = new Array(s).fill(0);
-    for (let y = 0; y < s; y++) {
-      const H = X[y], O = y + 1 < s ? X[y + 1] : T, C = y * (N + h);
-      for (let W = H; W < O; W++) {
-        const q = {
-          ...e[W],
-          columnWidth: N,
+    for (; H < _; ) {
+      const w = Math.floor((H + _) / 2);
+      te(w) ? _ = w : H = w + 1;
+    }
+    const ae = _, Y = new Array(l).fill(0);
+    let ne = l - 1, J = 0, K = 0;
+    for (let w = M - 1; w >= 0; w--) {
+      const A = P[w], R = w < ne;
+      !(W(J, K, A) <= ae) || R ? (Y[ne] = w + 1, ne--, J = A, K = 1) : (J = W(J, K, A), K++);
+    }
+    Y[0] = 0;
+    const C = [], re = new Array(l).fill(0);
+    for (let w = 0; w < l; w++) {
+      const A = Y[w], R = w + 1 < l ? Y[w + 1] : M, q = w * (I + T);
+      for (let j = A; j < R; j++) {
+        const V = {
+          ...e[j],
+          columnWidth: I,
           imageHeight: 0,
           columnHeight: 0,
           left: 0,
           top: 0
         };
-        q.imageHeight = S[W] - (n + a), q.columnHeight = S[W], q.left = C, q.top = ne[y], ne[y] += q.columnHeight + (W + 1 < O ? m : 0), R.push(q);
+        V.imageHeight = P[j] - (n + a), V.columnHeight = P[j], V.left = q, V.top = re[w], re[w] += V.columnHeight + (j + 1 < R ? m : 0), C.push(V);
       }
     }
-    return R;
+    return C;
   }
-  const x = new Array(s).fill(0), D = [];
-  for (let T = 0; T < e.length; T++) {
-    const F = e[T], L = {
-      ...F,
+  const h = new Array(l).fill(0), S = [];
+  for (let M = 0; M < e.length; M++) {
+    const W = e[M], H = {
+      ...W,
       columnWidth: 0,
       imageHeight: 0,
       columnHeight: 0,
       left: 0,
       top: 0
-    }, z = x.indexOf(Math.min(...x)), ee = F.width, te = F.height;
-    L.columnWidth = N, L.left = z * (N + h), L.imageHeight = Math.round(N * te / ee), L.columnHeight = L.imageHeight + n + a, L.top = x[z], x[z] += L.columnHeight + m, D.push(L);
+    }, _ = h.indexOf(Math.min(...h)), te = W.width, ae = W.height;
+    H.columnWidth = I, H.left = _ * (I + T), H.imageHeight = Math.round(I * ae / te), H.columnHeight = H.imageHeight + n + a, H.top = h[_], h[_] += H.columnHeight + m, S.push(H);
   }
-  return D;
+  return S;
 }
-var Je = typeof global == "object" && global && global.Object === Object && global, Ke = typeof self == "object" && self && self.Object === Object && self, $e = Je || Ke || Function("return this")(), ue = $e.Symbol, Ae = Object.prototype, Qe = Ae.hasOwnProperty, Ze = Ae.toString, oe = ue ? ue.toStringTag : void 0;
+var Je = typeof global == "object" && global && global.Object === Object && global, Ke = typeof self == "object" && self && self.Object === Object && self, Ae = Je || Ke || Function("return this")(), ce = Ae.Symbol, Fe = Object.prototype, Qe = Fe.hasOwnProperty, Ze = Fe.toString, le = ce ? ce.toStringTag : void 0;
 function et(e) {
-  var l = Qe.call(e, oe), s = e[oe];
+  var o = Qe.call(e, le), l = e[le];
   try {
-    e[oe] = void 0;
-    var i = !0;
+    e[le] = void 0;
+    var s = !0;
   } catch {
   }
-  var h = Ze.call(e);
-  return i && (l ? e[oe] = s : delete e[oe]), h;
+  var T = Ze.call(e);
+  return s && (o ? e[le] = l : delete e[le]), T;
 }
 var tt = Object.prototype, at = tt.toString;
 function nt(e) {
   return at.call(e);
 }
-var rt = "[object Null]", ot = "[object Undefined]", Me = ue ? ue.toStringTag : void 0;
+var rt = "[object Null]", ot = "[object Undefined]", Me = ce ? ce.toStringTag : void 0;
 function lt(e) {
   return e == null ? e === void 0 ? ot : rt : Me && Me in Object(e) ? et(e) : nt(e);
 }
@@ -124,17 +124,17 @@ function ut(e) {
 }
 var ct = /\s/;
 function ft(e) {
-  for (var l = e.length; l-- && ct.test(e.charAt(l)); )
+  for (var o = e.length; o-- && ct.test(e.charAt(o)); )
     ;
-  return l;
+  return o;
 }
 var dt = /^\s+/;
 function vt(e) {
   return e && e.slice(0, ft(e) + 1).replace(dt, "");
 }
 function me(e) {
-  var l = typeof e;
-  return e != null && (l == "object" || l == "function");
+  var o = typeof e;
+  return e != null && (o == "object" || o == "function");
 }
 var Ie = NaN, mt = /^[-+]0x[0-9a-f]+$/i, gt = /^0b[01]+$/i, pt = /^0o[0-7]+$/i, yt = parseInt;
 function Pe(e) {
@@ -143,71 +143,71 @@ function Pe(e) {
   if (ut(e))
     return Ie;
   if (me(e)) {
-    var l = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = me(l) ? l + "" : l;
+    var o = typeof e.valueOf == "function" ? e.valueOf() : e;
+    e = me(o) ? o + "" : o;
   }
   if (typeof e != "string")
     return e === 0 ? e : +e;
   e = vt(e);
-  var s = gt.test(e);
-  return s || pt.test(e) ? yt(e.slice(2), s ? 2 : 8) : mt.test(e) ? Ie : +e;
+  var l = gt.test(e);
+  return l || pt.test(e) ? yt(e.slice(2), l ? 2 : 8) : mt.test(e) ? Ie : +e;
 }
-var fe = function() {
-  return $e.Date.now();
+var de = function() {
+  return Ae.Date.now();
 }, ht = "Expected a function", bt = Math.max, xt = Math.min;
-function Ee(e, l, s) {
-  var i, h, m, a, n, v, f = 0, d = !1, b = !1, r = !0;
+function ke(e, o, l) {
+  var s, T, m, a, n, y, c = 0, v = !1, b = !1, f = !0;
   if (typeof e != "function")
     throw new TypeError(ht);
-  l = Pe(l) || 0, me(s) && (d = !!s.leading, b = "maxWait" in s, m = b ? bt(Pe(s.maxWait) || 0, l) : m, r = "trailing" in s ? !!s.trailing : r);
-  function c(x) {
-    var D = i, T = h;
-    return i = h = void 0, f = x, a = e.apply(T, D), a;
+  o = Pe(o) || 0, me(l) && (v = !!l.leading, b = "maxWait" in l, m = b ? bt(Pe(l.maxWait) || 0, o) : m, f = "trailing" in l ? !!l.trailing : f);
+  function x(h) {
+    var S = s, M = T;
+    return s = T = void 0, c = h, a = e.apply(M, S), a;
   }
-  function w(x) {
-    return f = x, n = setTimeout(M, l), d ? c(x) : a;
+  function $(h) {
+    return c = h, n = setTimeout(i, o), v ? x(h) : a;
   }
-  function I(x) {
-    var D = x - v, T = x - f, F = l - D;
-    return b ? xt(F, m - T) : F;
+  function z(h) {
+    var S = h - y, M = h - c, W = o - S;
+    return b ? xt(W, m - M) : W;
   }
-  function E(x) {
-    var D = x - v, T = x - f;
-    return v === void 0 || D >= l || D < 0 || b && T >= m;
+  function N(h) {
+    var S = h - y, M = h - c;
+    return y === void 0 || S >= o || S < 0 || b && M >= m;
   }
-  function M() {
-    var x = fe();
-    if (E(x))
-      return P(x);
-    n = setTimeout(M, I(x));
+  function i() {
+    var h = de();
+    if (N(h))
+      return d(h);
+    n = setTimeout(i, z(h));
   }
-  function P(x) {
-    return n = void 0, r && i ? c(x) : (i = h = void 0, a);
+  function d(h) {
+    return n = void 0, f && s ? x(h) : (s = T = void 0, a);
   }
-  function j() {
-    n !== void 0 && clearTimeout(n), f = 0, i = v = h = n = void 0;
+  function L() {
+    n !== void 0 && clearTimeout(n), c = 0, s = y = T = n = void 0;
   }
-  function N() {
-    return n === void 0 ? a : P(fe());
+  function I() {
+    return n === void 0 ? a : d(de());
   }
-  function S() {
-    var x = fe(), D = E(x);
-    if (i = arguments, h = this, v = x, D) {
+  function P() {
+    var h = de(), S = N(h);
+    if (s = arguments, T = this, y = h, S) {
       if (n === void 0)
-        return w(v);
+        return $(y);
       if (b)
-        return clearTimeout(n), n = setTimeout(M, l), c(v);
+        return clearTimeout(n), n = setTimeout(i, o), x(y);
     }
-    return n === void 0 && (n = setTimeout(M, l)), a;
+    return n === void 0 && (n = setTimeout(i, o)), a;
   }
-  return S.cancel = j, S.flush = N, S;
+  return P.cancel = L, P.flush = I, P;
 }
-function de(e) {
-  const l = window.innerWidth, s = e.sizes;
-  return l >= 1536 && s["2xl"] ? s["2xl"] : l >= 1280 && s.xl ? s.xl : l >= 1024 && s.lg ? s.lg : l >= 768 && s.md ? s.md : l >= 640 && s.sm ? s.sm : s.base;
+function ve(e) {
+  const o = window.innerWidth, l = e.sizes;
+  return o >= 1536 && l["2xl"] ? l["2xl"] : o >= 1280 && l.xl ? l.xl : o >= 1024 && l.lg ? l.lg : o >= 768 && l.md ? l.md : o >= 640 && l.sm ? l.sm : l.base;
 }
 function wt(e) {
-  return e.reduce((s, i) => Math.max(s, i.top + i.columnHeight), 0) + 500;
+  return e.reduce((l, s) => Math.max(l, s.top + s.columnHeight), 0) + 500;
 }
 function Tt(e) {
   return {
@@ -218,94 +218,94 @@ function Tt(e) {
     height: `${e.columnHeight}px`
   };
 }
-function Mt(e, l = 0) {
+function Mt(e, o = 0) {
   return {
     style: Tt(e),
     "data-top": e.top,
     "data-left": e.left,
     "data-id": `${e.page}-${e.id}`,
-    "data-index": l
+    "data-index": o
   };
 }
-function ge(e, l) {
-  if (!e.length || l <= 0)
-    return new Array(Math.max(1, l)).fill(0);
-  const i = Array.from(new Set(e.map((a) => a.left))).sort((a, n) => a - n).slice(0, l), h = /* @__PURE__ */ new Map();
-  for (let a = 0; a < i.length; a++) h.set(i[a], a);
-  const m = new Array(i.length).fill(0);
+function ge(e, o) {
+  if (!e.length || o <= 0)
+    return new Array(Math.max(1, o)).fill(0);
+  const s = Array.from(new Set(e.map((a) => a.left))).sort((a, n) => a - n).slice(0, o), T = /* @__PURE__ */ new Map();
+  for (let a = 0; a < s.length; a++) T.set(s[a], a);
+  const m = new Array(s.length).fill(0);
   for (const a of e) {
-    const n = h.get(a.left);
+    const n = T.get(a.left);
     n != null && (m[n] = Math.max(m[n], a.top + a.columnHeight));
   }
-  for (; m.length < l; ) m.push(0);
+  for (; m.length < o; ) m.push(0);
   return m;
 }
-function It(e, l) {
-  function s(a, n) {
-    const v = parseInt(a.dataset.left || "0", 10), f = parseInt(a.dataset.top || "0", 10), d = parseInt(a.dataset.index || "0", 10), b = Math.min(d * 20, 160), r = a.style.getPropertyValue("--masonry-opacity-delay");
+function It(e, o) {
+  function l(a, n) {
+    const y = parseInt(a.dataset.left || "0", 10), c = parseInt(a.dataset.top || "0", 10), v = parseInt(a.dataset.index || "0", 10), b = Math.min(v * 20, 160), f = a.style.getPropertyValue("--masonry-opacity-delay");
     a.style.setProperty("--masonry-opacity-delay", `${b}ms`), requestAnimationFrame(() => {
-      a.style.opacity = "1", a.style.transform = `translate3d(${v}px, ${f}px, 0) scale(1)`;
-      const c = () => {
-        r ? a.style.setProperty("--masonry-opacity-delay", r) : a.style.removeProperty("--masonry-opacity-delay"), a.removeEventListener("transitionend", c), n();
+      a.style.opacity = "1", a.style.transform = `translate3d(${y}px, ${c}px, 0) scale(1)`;
+      const x = () => {
+        f ? a.style.setProperty("--masonry-opacity-delay", f) : a.style.removeProperty("--masonry-opacity-delay"), a.removeEventListener("transitionend", x), n();
       };
-      a.addEventListener("transitionend", c);
+      a.addEventListener("transitionend", x);
     });
   }
-  function i(a) {
-    const n = parseInt(a.dataset.left || "0", 10), v = parseInt(a.dataset.top || "0", 10);
-    a.style.opacity = "0", a.style.transform = `translate3d(${n}px, ${v + 10}px, 0) scale(0.985)`;
+  function s(a) {
+    const n = parseInt(a.dataset.left || "0", 10), y = parseInt(a.dataset.top || "0", 10);
+    a.style.opacity = "0", a.style.transform = `translate3d(${n}px, ${y + 10}px, 0) scale(0.985)`;
   }
-  function h(a) {
-    const n = parseInt(a.dataset.left || "0", 10), v = parseInt(a.dataset.top || "0", 10);
-    a.style.transition = "none", a.style.opacity = "1", a.style.transform = `translate3d(${n}px, ${v}px, 0) scale(1)`, a.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+  function T(a) {
+    const n = parseInt(a.dataset.left || "0", 10), y = parseInt(a.dataset.top || "0", 10);
+    a.style.transition = "none", a.style.opacity = "1", a.style.transform = `translate3d(${n}px, ${y}px, 0) scale(1)`, a.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
       a.style.transition = "";
     });
   }
   function m(a, n) {
-    const v = parseInt(a.dataset.left || "0", 10), f = parseInt(a.dataset.top || "0", 10), d = typeof (l == null ? void 0 : l.leaveDurationMs) == "number" ? l.leaveDurationMs : NaN;
-    let b = Number.isFinite(d) && d > 0 ? d : NaN;
+    const y = parseInt(a.dataset.left || "0", 10), c = parseInt(a.dataset.top || "0", 10), v = typeof (o == null ? void 0 : o.leaveDurationMs) == "number" ? o.leaveDurationMs : NaN;
+    let b = Number.isFinite(v) && v > 0 ? v : NaN;
     if (!Number.isFinite(b)) {
-      const M = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", P = parseFloat(M);
-      b = Number.isFinite(P) && P > 0 ? P : 200;
-    }
-    const r = a.style.transitionDuration, c = () => {
-      a.removeEventListener("transitionend", w), clearTimeout(I), a.style.transitionDuration = r || "";
-    }, w = (E) => {
-      (!E || E.target === a) && (c(), n());
-    }, I = setTimeout(() => {
-      c(), n();
+      const i = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", d = parseFloat(i);
+      b = Number.isFinite(d) && d > 0 ? d : 200;
+    }
+    const f = a.style.transitionDuration, x = () => {
+      a.removeEventListener("transitionend", $), clearTimeout(z), a.style.transitionDuration = f || "";
+    }, $ = (N) => {
+      (!N || N.target === a) && (x(), n());
+    }, z = setTimeout(() => {
+      x(), n();
     }, b + 100);
     requestAnimationFrame(() => {
-      a.style.transitionDuration = `${b}ms`, a.style.opacity = "0", a.style.transform = `translate3d(${v}px, ${f + 10}px, 0) scale(0.985)`, a.addEventListener("transitionend", w);
+      a.style.transitionDuration = `${b}ms`, a.style.opacity = "0", a.style.transform = `translate3d(${y}px, ${c + 10}px, 0) scale(0.985)`, a.addEventListener("transitionend", $);
     });
   }
   return {
-    onEnter: s,
-    onBeforeEnter: i,
-    onBeforeLeave: h,
+    onEnter: l,
+    onBeforeEnter: s,
+    onBeforeLeave: T,
     onLeave: m
   };
 }
 function Pt({
   container: e,
-  masonry: l,
-  columns: s,
-  containerHeight: i,
-  isLoading: h,
+  masonry: o,
+  columns: l,
+  containerHeight: s,
+  isLoading: T,
   pageSize: m,
   refreshLayout: a,
   setItemsRaw: n,
-  loadNext: v,
-  loadThresholdPx: f
+  loadNext: y,
+  loadThresholdPx: c
 }) {
-  let d = 0;
-  async function b(r) {
+  let v = 0;
+  async function b(f) {
     if (!e.value) return;
-    const c = r ?? ge(l.value, s.value), w = c.length ? Math.max(...c) : 0, I = e.value.scrollTop + e.value.clientHeight, E = e.value.scrollTop > d + 1;
-    d = e.value.scrollTop;
-    const M = typeof f == "number" ? f : 200, P = M >= 0 ? Math.max(0, w - M) : Math.max(0, w + M);
-    if (I >= P && E && !h.value) {
-      await v(), await Q();
+    const x = f ?? ge(o.value, l.value), $ = x.length ? Math.max(...x) : 0, z = e.value.scrollTop + e.value.clientHeight, N = e.value.scrollTop > v + 1;
+    v = e.value.scrollTop;
+    const i = typeof c == "number" ? c : 200, d = i >= 0 ? Math.max(0, $ - i) : Math.max(0, $ + i);
+    if (z >= d && N && !T.value) {
+      await y(), await Z();
       return;
     }
   }
@@ -313,16 +313,22 @@ function Pt({
     handleScroll: b
   };
 }
-const Et = { class: "relative w-full h-full group" }, kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 bg-white relative" }, St = {
+const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 bg-white relative" }, Et = {
   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"
 }, Lt = {
   key: 1,
-  class: "absolute inset-0 flex items-center justify-center bg-slate-100"
-}, Nt = {
+  class: "relative w-full h-full"
+}, St = ["src"], Nt = ["src"], Ht = {
   key: 2,
+  class: "absolute inset-0 bg-slate-100 flex items-center justify-center"
+}, $t = { class: "flex flex-col items-center justify-center gap-2 text-slate-400" }, At = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, Ft = { class: "text-xs font-medium uppercase" }, Wt = {
+  key: 3,
+  class: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-center justify-center"
+}, jt = {
+  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"
-}, Ht = ["src"], $t = ["src"], At = { class: "absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75 pointer-events-none" }, Ft = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, pe = /* @__PURE__ */ Se({
+}, Ot = ["title"], Bt = { class: "absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75 pointer-events-none" }, Dt = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, pe = /* @__PURE__ */ Le({
   __name: "MasonryItem",
   props: {
     item: {},
@@ -331,148 +337,196 @@ const Et = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
     notFound: { type: Boolean, default: void 0 }
   },
   setup(e) {
-    const l = e, s = k(!1), i = k(!1), h = k(null), m = k(!1), a = k(!1), n = k(null), v = Z(() => {
-      var r;
-      return l.type ?? ((r = l.item) == null ? void 0 : r.type) ?? "image";
-    }), f = Z(() => {
-      var r;
-      return l.notFound ?? ((r = l.item) == null ? void 0 : r.notFound) ?? !1;
+    const o = e, l = E(!1), s = E(!1), T = E(null), m = E(!1), a = E(!1), n = E(null), y = E(!1), c = E(!1), v = E(null);
+    let b = null;
+    const f = ee(() => {
+      var i;
+      return o.type ?? ((i = o.item) == null ? void 0 : i.type) ?? "image";
+    }), x = ee(() => {
+      var i;
+      return o.notFound ?? ((i = o.item) == null ? void 0 : i.notFound) ?? !1;
     });
-    function d(r) {
-      return new Promise((c, w) => {
-        if (!r) {
-          w(new Error("No image source provided"));
+    function $(i) {
+      return new Promise((d, L) => {
+        if (!i) {
+          L(new Error("No image source provided"));
           return;
         }
-        const I = new Image(), E = Date.now(), M = 300;
+        const I = new Image(), P = Date.now(), h = 300;
         I.onload = () => {
-          const P = Date.now() - E, j = Math.max(0, M - P);
+          const S = Date.now() - P, M = Math.max(0, h - S);
           setTimeout(() => {
-            s.value = !0, i.value = !1, c();
-          }, j);
+            l.value = !0, s.value = !1, c.value = !1, d();
+          }, M);
         }, I.onerror = () => {
-          i.value = !0, s.value = !1, w(new Error("Failed to load image"));
-        }, I.src = r;
+          s.value = !0, l.value = !1, c.value = !1, L(new Error("Failed to load image"));
+        }, I.src = i;
       });
     }
-    function b(r) {
-      return new Promise((c, w) => {
-        if (!r) {
-          w(new Error("No video source provided"));
+    function z(i) {
+      return new Promise((d, L) => {
+        if (!i) {
+          L(new Error("No video source provided"));
           return;
         }
-        const I = document.createElement("video"), E = Date.now(), M = 300;
+        const I = document.createElement("video"), P = Date.now(), h = 300;
         I.preload = "metadata", I.muted = !0, I.onloadedmetadata = () => {
-          const P = Date.now() - E, j = Math.max(0, M - P);
+          const S = Date.now() - P, M = Math.max(0, h - S);
           setTimeout(() => {
-            m.value = !0, a.value = !1, c();
-          }, j);
+            m.value = !0, a.value = !1, c.value = !1, d();
+          }, M);
         }, I.onerror = () => {
-          a.value = !0, m.value = !1, w(new Error("Failed to load video"));
-        }, I.src = r;
+          a.value = !0, m.value = !1, c.value = !1, L(new Error("Failed to load video"));
+        }, I.src = i;
       });
     }
-    return Le(async () => {
-      var c, w;
-      if (console.log("[MasonryItem] Component mounted", (c = l.item) == null ? void 0 : c.id), f.value)
+    async function N() {
+      var d;
+      if (!y.value || c.value || x.value || f.value === "video" && m.value || f.value === "image" && l.value)
         return;
-      const r = (w = l.item) == null ? void 0 : w.src;
-      if (r)
-        if (v.value === "video") {
-          n.value = r, m.value = !1, a.value = !1;
+      const i = (d = o.item) == null ? void 0 : d.src;
+      if (i)
+        if (c.value = !0, f.value === "video") {
+          n.value = i, m.value = !1, a.value = !1;
           try {
-            await b(r);
+            await z(i);
           } catch {
           }
         } else {
-          h.value = r, s.value = !1, i.value = !1;
+          T.value = i, l.value = !1, s.value = !1;
           try {
-            await d(r);
+            await $(i);
           } catch {
           }
         }
-    }), Ne(
+    }
+    return Se(() => {
+      v.value && (b = new IntersectionObserver(
+        (i) => {
+          i.forEach((d) => {
+            d.isIntersecting && d.intersectionRatio >= 1 ? y.value || (y.value = !0, N()) : d.isIntersecting;
+          });
+        },
+        {
+          // Only trigger when item is 100% visible (full height in view)
+          threshold: [1]
+        }
+      ), b.observe(v.value));
+    }), Ne(() => {
+      b && (b.disconnect(), b = null);
+    }), He(
       () => {
-        var r;
-        return (r = l.item) == null ? void 0 : r.src;
+        var i;
+        return (i = o.item) == null ? void 0 : i.src;
       },
-      async (r) => {
-        if (!(!r || f.value)) {
-          if (v.value === "video") {
-            if (r !== n.value) {
-              m.value = !1, a.value = !1, n.value = r;
+      async (i) => {
+        if (!(!i || x.value)) {
+          if (f.value === "video") {
+            if (i !== n.value && (m.value = !1, a.value = !1, n.value = i, y.value)) {
+              c.value = !0;
               try {
-                await b(r);
+                await z(i);
               } catch {
               }
             }
-          } else if (r !== h.value) {
-            s.value = !1, i.value = !1, h.value = r;
+          } else if (i !== T.value && (l.value = !1, s.value = !1, T.value = i, y.value)) {
+            c.value = !0;
             try {
-              await d(r);
+              await $(i);
             } catch {
             }
           }
         }
       }
-    ), (r, c) => (G(), V("div", Et, [
-      He(r.$slots, "default", {
-        item: r.item,
-        remove: r.remove,
-        imageLoaded: s.value,
-        imageError: i.value,
+    ), (i, d) => (D(), B("div", {
+      ref_key: "containerRef",
+      ref: v,
+      class: "relative w-full h-full group"
+    }, [
+      $e(i.$slots, "default", {
+        item: i.item,
+        remove: i.remove,
+        imageLoaded: l.value,
+        imageError: s.value,
         videoLoaded: m.value,
         videoError: a.value,
-        showNotFound: f.value
+        showNotFound: x.value,
+        isLoading: c.value,
+        mediaType: f.value
       }, () => [
-        A("div", kt, [
-          f.value ? (G(), V("div", St, c[4] || (c[4] = [
-            A("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
-            A("span", { class: "font-medium" }, "Not Found", -1),
-            A("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
-          ]))) : v.value === "image" && !s.value && !i.value || v.value === "video" && !m.value && !a.value ? (G(), V("div", Lt, c[5] || (c[5] = [
-            A("div", { class: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" }, null, -1)
-          ]))) : v.value === "image" && i.value || v.value === "video" && a.value ? (G(), V("div", Nt, [
-            A("i", {
-              class: ve(v.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
-            }, null, 2),
-            A("span", null, "Failed to load " + ie(v.value), 1)
-          ])) : le("", !0),
-          v.value === "image" && s.value && h.value && !f.value ? (G(), V("img", {
+        k("div", kt, [
+          x.value ? (D(), B("div", Et, d[4] || (d[4] = [
+            k("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
+            k("span", { class: "font-medium" }, "Not Found", -1),
+            k("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
+          ]))) : (D(), B("div", Lt, [
+            f.value === "image" && l.value && T.value ? (D(), B("img", {
+              key: 0,
+              src: T.value,
+              class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",
+              loading: "lazy",
+              decoding: "async",
+              alt: ""
+            }, null, 8, St)) : X("", !0),
+            f.value === "video" && m.value && n.value ? (D(), B("video", {
+              key: 1,
+              src: n.value,
+              class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",
+              muted: "",
+              loop: "",
+              playsinline: "",
+              onMouseenter: d[0] || (d[0] = (L) => L.target.play()),
+              onMouseleave: d[1] || (d[1] = (L) => L.target.pause()),
+              onError: d[2] || (d[2] = (L) => a.value = !0)
+            }, null, 40, Nt)) : X("", !0),
+            !l.value && !m.value && !s.value && !a.value ? (D(), B("div", Ht, [
+              k("div", $t, [
+                k("div", At, [
+                  k("i", {
+                    class: se(f.value === "video" ? "fas fa-video text-xl" : "fas fa-image text-xl")
+                  }, null, 2)
+                ]),
+                k("span", Ft, ie(f.value), 1)
+              ])
+            ])) : X("", !0),
+            c.value ? (D(), B("div", Wt, d[5] || (d[5] = [
+              k("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
+                k("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
+              ], -1)
+            ]))) : X("", !0),
+            f.value === "image" && s.value || f.value === "video" && a.value ? (D(), B("div", jt, [
+              k("i", {
+                class: se(f.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
+              }, null, 2),
+              k("span", null, "Failed to load " + ie(f.value), 1)
+            ])) : X("", !0)
+          ])),
+          !x.value && (l.value || m.value || c.value) ? (D(), B("div", {
+            key: 2,
+            class: "absolute top-2 left-2 w-7 h-7 flex items-center justify-center bg-black/60 backdrop-blur-sm text-white rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none",
+            title: f.value === "video" ? "Video" : "Image"
+          }, [
+            k("i", {
+              class: se(f.value === "video" ? "fas fa-video text-xs" : "fas fa-image text-xs")
+            }, null, 2)
+          ], 8, Ot)) : X("", !0),
+          d[7] || (d[7] = k("div", { class: "absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" }, null, -1)),
+          i.remove ? (D(), B("button", {
             key: 3,
-            src: h.value,
-            class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",
-            loading: "lazy",
-            decoding: "async"
-          }, null, 8, Ht)) : le("", !0),
-          v.value === "video" && m.value && n.value && !f.value ? (G(), V("video", {
-            key: 4,
-            src: n.value,
-            class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",
-            muted: "",
-            loop: "",
-            playsinline: "",
-            onMouseenter: c[0] || (c[0] = (w) => w.target.play()),
-            onMouseleave: c[1] || (c[1] = (w) => w.target.pause()),
-            onError: c[2] || (c[2] = (w) => a.value = !0)
-          }, null, 40, $t)) : le("", !0),
-          c[7] || (c[7] = A("div", { class: "absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" }, null, -1)),
-          r.remove ? (G(), V("button", {
-            key: 5,
-            class: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center bg-white/90 backdrop-blur-sm text-slate-700 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 hover:bg-red-500 hover:text-white cursor-pointer",
-            onClick: c[3] || (c[3] = je((w) => r.remove(r.item), ["stop"])),
+            class: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center bg-white/90 backdrop-blur-sm text-slate-700 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 hover:bg-red-500 hover:text-white cursor-pointer z-10",
+            onClick: d[3] || (d[3] = ze((L) => i.remove(i.item), ["stop"])),
             "aria-label": "Remove item"
-          }, c[6] || (c[6] = [
-            A("i", { class: "fas fa-times text-sm" }, null, -1)
-          ]))) : le("", !0),
-          A("div", At, [
-            A("p", Ft, "Item #" + ie(String(r.item.id).split("-")[0]), 1)
+          }, d[6] || (d[6] = [
+            k("i", { class: "fas fa-times text-sm" }, null, -1)
+          ]))) : X("", !0),
+          k("div", Bt, [
+            k("p", Dt, "Item #" + ie(String(i.item.id).split("-")[0]), 1)
           ])
         ])
       ])
-    ]));
+    ], 512));
   }
-}), Wt = /* @__PURE__ */ Se({
+}), zt = /* @__PURE__ */ Le({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -572,8 +626,8 @@ const Et = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
     "retry:stop",
     "remove-all:complete"
   ],
-  setup(e, { expose: l, emit: s }) {
-    const i = e, h = {
+  setup(e, { expose: o, emit: l }) {
+    const s = e, T = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -582,39 +636,39 @@ const Et = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
       paddingLeft: 0,
       paddingRight: 0,
       placement: "masonry"
-    }, m = Z(() => {
+    }, m = ee(() => {
       var t;
       return {
-        ...h,
-        ...i.layout,
+        ...T,
+        ...s.layout,
         sizes: {
-          ...h.sizes,
-          ...((t = i.layout) == null ? void 0 : t.sizes) || {}
+          ...T.sizes,
+          ...((t = s.layout) == null ? void 0 : t.sizes) || {}
         }
       };
-    }), a = s, n = Z({
-      get: () => i.items,
+    }), a = l, n = ee({
+      get: () => s.items,
       set: (t) => a("update:items", t)
-    }), v = k(7), f = k(null), d = k([]), b = k(null), r = k(!1), c = k(0), w = k(/* @__PURE__ */ new Set());
-    function I(t) {
+    }), y = E(7), c = E(null), v = E([]), b = E(null), f = E(!1), x = E(0), $ = E(/* @__PURE__ */ new Set());
+    function z(t) {
       return typeof t == "number" && Number.isFinite(t) && t > 0;
     }
-    function E(t, o) {
+    function N(t, r) {
       try {
         if (!Array.isArray(t) || t.length === 0) return;
-        const u = t.filter((p) => !I(p == null ? void 0 : p.width) || !I(p == null ? void 0 : p.height));
+        const u = t.filter((p) => !z(p == null ? void 0 : p.width) || !z(p == null ? void 0 : p.height));
         if (u.length === 0) return;
         const g = [];
         for (const p of u) {
-          const B = (p == null ? void 0 : p.id) ?? `idx:${t.indexOf(p)}`;
-          w.value.has(B) || (w.value.add(B), g.push(B));
+          const O = (p == null ? void 0 : p.id) ?? `idx:${t.indexOf(p)}`;
+          $.value.has(O) || ($.value.add(O), g.push(O));
         }
         if (g.length > 0) {
           const p = g.slice(0, 10);
           console.warn(
             "[Masonry] Items missing width/height detected:",
             {
-              context: o,
+              context: r,
               count: g.length,
               sampleIds: p,
               hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
@@ -624,332 +678,332 @@ const Et = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
       } catch {
       }
     }
-    const M = k(0), P = k(0), j = i.virtualBufferPx, N = k(!1), S = k({
+    const i = E(0), d = E(0), L = s.virtualBufferPx, I = E(!1), P = E({
       distanceToTrigger: 0,
       isNearTrigger: !1
-    }), x = (t) => {
-      if (!f.value) return;
-      const { scrollTop: o, clientHeight: u } = f.value, g = o + u, p = t ?? ge(n.value, v.value), B = p.length ? Math.max(...p) : 0, _ = typeof i.loadThresholdPx == "number" ? i.loadThresholdPx : 200, K = _ >= 0 ? Math.max(0, B - _) : Math.max(0, B + _), we = Math.max(0, K - g), Oe = we <= 100;
-      S.value = {
+    }), h = (t) => {
+      if (!c.value) return;
+      const { scrollTop: r, clientHeight: u } = c.value, g = r + u, p = t ?? ge(n.value, y.value), O = p.length ? Math.max(...p) : 0, G = typeof s.loadThresholdPx == "number" ? s.loadThresholdPx : 200, Q = G >= 0 ? Math.max(0, O - G) : Math.max(0, O + G), we = Math.max(0, Q - g), De = we <= 100;
+      P.value = {
         distanceToTrigger: Math.round(we),
-        isNearTrigger: Oe
+        isNearTrigger: De
       };
-    }, { onEnter: D, onBeforeEnter: T, onBeforeLeave: F, onLeave: L } = It(n, { leaveDurationMs: i.leaveDurationMs });
-    function z(t, o) {
-      if (N.value) {
+    }, { onEnter: S, onBeforeEnter: M, onBeforeLeave: W, onLeave: H } = It(n, { leaveDurationMs: s.leaveDurationMs });
+    function _(t, r) {
+      if (I.value) {
         const u = parseInt(t.dataset.left || "0", 10), g = parseInt(t.dataset.top || "0", 10);
         t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${u}px, ${g}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
-          t.style.transition = "", o();
+          t.style.transition = "", r();
         });
       } else
-        D(t, o);
+        S(t, r);
     }
-    function ee(t) {
-      if (N.value) {
-        const o = parseInt(t.dataset.left || "0", 10), u = parseInt(t.dataset.top || "0", 10);
-        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${o}px, ${u}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
+    function te(t) {
+      if (I.value) {
+        const r = parseInt(t.dataset.left || "0", 10), u = parseInt(t.dataset.top || "0", 10);
+        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${r}px, ${u}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
       } else
-        T(t);
+        M(t);
     }
-    function te(t) {
-      N.value || F(t);
+    function ae(t) {
+      I.value || W(t);
     }
-    function X(t, o) {
-      N.value ? o() : L(t, o);
+    function Y(t, r) {
+      I.value ? r() : H(t, r);
     }
-    const ae = Z(() => {
-      const t = M.value - j, o = M.value + P.value + j, u = n.value;
+    const ne = ee(() => {
+      const t = i.value - L, r = i.value + d.value + L, u = n.value;
       return !u || u.length === 0 ? [] : u.filter((g) => {
         const p = g.top;
-        return g.top + g.columnHeight >= t && p <= o;
+        return g.top + g.columnHeight >= t && p <= r;
       });
-    }), { handleScroll: Y } = Pt({
-      container: f,
+    }), { handleScroll: J } = Pt({
+      container: c,
       masonry: n,
-      columns: v,
-      containerHeight: c,
-      isLoading: r,
-      pageSize: i.pageSize,
-      refreshLayout: R,
+      columns: y,
+      containerHeight: x,
+      isLoading: f,
+      pageSize: s.pageSize,
+      refreshLayout: C,
       setItemsRaw: (t) => {
         n.value = t;
       },
-      loadNext: C,
-      loadThresholdPx: i.loadThresholdPx
+      loadNext: q,
+      loadThresholdPx: s.loadThresholdPx
     });
-    l({
-      isLoading: r,
-      refreshLayout: R,
-      containerHeight: c,
+    o({
+      isLoading: f,
+      refreshLayout: C,
+      containerHeight: x,
       remove: U,
-      removeMany: q,
-      removeAll: Fe,
-      loadNext: C,
-      loadPage: O,
-      refreshCurrentPage: W,
-      reset: Be,
-      init: De,
-      paginationHistory: d,
+      removeMany: V,
+      removeAll: We,
+      loadNext: q,
+      loadPage: R,
+      refreshCurrentPage: j,
+      reset: Oe,
+      init: Be,
+      paginationHistory: v,
       cancelLoad: he,
       scrollToTop: ye,
-      totalItems: Z(() => n.value.length)
+      totalItems: ee(() => n.value.length)
     });
-    function J(t) {
-      const o = wt(t);
+    function K(t) {
+      const r = wt(t);
       let u = 0;
-      if (f.value) {
-        const { scrollTop: g, clientHeight: p } = f.value;
+      if (c.value) {
+        const { scrollTop: g, clientHeight: p } = c.value;
         u = g + p + 100;
       }
-      c.value = Math.max(o, u);
+      x.value = Math.max(r, u);
     }
-    function R(t) {
-      if (!f.value) return;
-      E(t, "refreshLayout");
-      const o = t.map((g, p) => ({
+    function C(t) {
+      if (!c.value) return;
+      N(t, "refreshLayout");
+      const r = t.map((g, p) => ({
         ...g,
         originalIndex: g.originalIndex ?? p
-      })), u = Ye(o, f.value, v.value, m.value);
-      J(u), n.value = u;
+      })), u = Ye(r, c.value, y.value, m.value);
+      K(u), n.value = u;
     }
-    function ne(t, o) {
+    function re(t, r) {
       return new Promise((u) => {
         const g = Math.max(0, t | 0), p = Date.now();
-        o(g, g);
-        const B = setInterval(() => {
-          if ($.value) {
-            clearInterval(B), u();
+        r(g, g);
+        const O = setInterval(() => {
+          if (F.value) {
+            clearInterval(O), u();
             return;
           }
-          const _ = Date.now() - p, K = Math.max(0, g - _);
-          o(K, g), K <= 0 && (clearInterval(B), u());
+          const G = Date.now() - p, Q = Math.max(0, g - G);
+          r(Q, g), Q <= 0 && (clearInterval(O), u());
         }, 100);
       });
     }
-    async function y(t) {
+    async function w(t) {
       try {
-        const o = await H(() => i.getNextPage(t));
-        return R([...n.value, ...o.items]), o;
-      } catch (o) {
-        throw console.error("Error in getContent:", o), o;
+        const r = await A(() => s.getNextPage(t));
+        return C([...n.value, ...r.items]), r;
+      } catch (r) {
+        throw console.error("Error in getContent:", r), r;
       }
     }
-    async function H(t) {
-      let o = 0;
-      const u = i.retryMaxAttempts;
-      let g = i.retryInitialDelayMs;
+    async function A(t) {
+      let r = 0;
+      const u = s.retryMaxAttempts;
+      let g = s.retryInitialDelayMs;
       for (; ; )
         try {
           const p = await t();
-          return o > 0 && a("retry:stop", { attempt: o, success: !0 }), p;
+          return r > 0 && a("retry:stop", { attempt: r, success: !0 }), p;
         } catch (p) {
-          if (o++, o > u)
-            throw a("retry:stop", { attempt: o - 1, success: !1 }), p;
-          a("retry:start", { attempt: o, max: u, totalMs: g }), await ne(g, (B, _) => {
-            a("retry:tick", { attempt: o, remainingMs: B, totalMs: _ });
-          }), g += i.retryBackoffStepMs;
+          if (r++, r > u)
+            throw a("retry:stop", { attempt: r - 1, success: !1 }), p;
+          a("retry:start", { attempt: r, max: u, totalMs: g }), await re(g, (O, G) => {
+            a("retry:tick", { attempt: r, remainingMs: O, totalMs: G });
+          }), g += s.retryBackoffStepMs;
         }
     }
-    async function O(t) {
-      if (!r.value) {
-        $.value = !1, r.value = !0;
+    async function R(t) {
+      if (!f.value) {
+        F.value = !1, f.value = !0;
         try {
-          const o = n.value.length;
-          if ($.value) return;
-          const u = await y(t);
-          return $.value ? void 0 : (b.value = t, d.value.push(u.nextPage), await re(o), u);
-        } catch (o) {
-          throw console.error("Error loading page:", o), o;
+          const r = n.value.length;
+          if (F.value) return;
+          const u = await w(t);
+          return F.value ? void 0 : (b.value = t, v.value.push(u.nextPage), await oe(r), u);
+        } catch (r) {
+          throw console.error("Error loading page:", r), r;
         } finally {
-          r.value = !1;
+          f.value = !1;
         }
       }
     }
-    async function C() {
-      if (!r.value) {
-        $.value = !1, r.value = !0;
+    async function q() {
+      if (!f.value) {
+        F.value = !1, f.value = !0;
         try {
           const t = n.value.length;
-          if ($.value) return;
-          const o = d.value[d.value.length - 1], u = await y(o);
-          return $.value ? void 0 : (b.value = o, d.value.push(u.nextPage), await re(t), u);
+          if (F.value) return;
+          const r = v.value[v.value.length - 1], u = await w(r);
+          return F.value ? void 0 : (b.value = r, v.value.push(u.nextPage), await oe(t), u);
         } catch (t) {
           throw console.error("Error loading next page:", t), t;
         } finally {
-          r.value = !1;
+          f.value = !1;
         }
       }
     }
-    async function W() {
-      if (console.log("[Masonry] refreshCurrentPage called, isLoading:", r.value, "currentPage:", b.value), !r.value) {
-        $.value = !1, r.value = !0;
+    async function j() {
+      if (console.log("[Masonry] refreshCurrentPage called, isLoading:", f.value, "currentPage:", b.value), !f.value) {
+        F.value = !1, f.value = !0;
         try {
           const t = b.value;
           if (console.log("[Masonry] pageToRefresh:", t), t == null) {
-            console.warn("[Masonry] No current page to refresh - currentPage:", b.value, "paginationHistory:", d.value);
+            console.warn("[Masonry] No current page to refresh - currentPage:", b.value, "paginationHistory:", v.value);
             return;
           }
-          n.value = [], c.value = 0, d.value = [t], await Q();
-          const o = await y(t);
-          if ($.value) return;
-          b.value = t, d.value.push(o.nextPage);
+          n.value = [], x.value = 0, v.value = [t], await Z();
+          const r = await w(t);
+          if (F.value) return;
+          b.value = t, v.value.push(r.nextPage);
           const u = n.value.length;
-          return await re(u), o;
+          return await oe(u), r;
         } catch (t) {
           throw console.error("[Masonry] Error refreshing current page:", t), t;
         } finally {
-          r.value = !1;
+          f.value = !1;
         }
       }
     }
     async function U(t) {
-      const o = n.value.filter((u) => u.id !== t.id);
-      if (n.value = o, await Q(), console.log("[Masonry] remove - next.length:", o.length, "paginationHistory.length:", d.value.length), o.length === 0 && d.value.length > 0) {
-        if (i.autoRefreshOnEmpty)
-          console.log("[Masonry] All items removed, calling refreshCurrentPage"), await W();
+      const r = n.value.filter((u) => u.id !== t.id);
+      if (n.value = r, await Z(), console.log("[Masonry] remove - next.length:", r.length, "paginationHistory.length:", v.value.length), r.length === 0 && v.value.length > 0) {
+        if (s.autoRefreshOnEmpty)
+          console.log("[Masonry] All items removed, calling refreshCurrentPage"), await j();
         else {
           console.log("[Masonry] All items removed, calling loadNext and forcing backfill");
           try {
-            await C(), await re(0, !0);
+            await q(), await oe(0, !0);
           } catch {
           }
         }
         return;
       }
       await new Promise((u) => requestAnimationFrame(() => u())), requestAnimationFrame(() => {
-        R(o);
+        C(r);
       });
     }
-    async function q(t) {
+    async function V(t) {
       if (!t || t.length === 0) return;
-      const o = new Set(t.map((g) => g.id)), u = n.value.filter((g) => !o.has(g.id));
-      if (n.value = u, await Q(), u.length === 0 && d.value.length > 0) {
-        if (i.autoRefreshOnEmpty)
-          await W();
+      const r = new Set(t.map((g) => g.id)), u = n.value.filter((g) => !r.has(g.id));
+      if (n.value = u, await Z(), u.length === 0 && v.value.length > 0) {
+        if (s.autoRefreshOnEmpty)
+          await j();
         else
           try {
-            await C(), await re(0, !0);
+            await q(), await oe(0, !0);
           } catch {
           }
         return;
       }
       await new Promise((g) => requestAnimationFrame(() => g())), requestAnimationFrame(() => {
-        R(u);
+        C(u);
       });
     }
     function ye(t) {
-      f.value && f.value.scrollTo({
+      c.value && c.value.scrollTo({
         top: 0,
         behavior: (t == null ? void 0 : t.behavior) ?? "smooth",
         ...t
       });
     }
-    async function Fe() {
-      ye({ behavior: "smooth" }), n.value = [], c.value = 0, await Q(), a("remove-all:complete");
+    async function We() {
+      ye({ behavior: "smooth" }), n.value = [], x.value = 0, await Z(), a("remove-all:complete");
     }
-    function We() {
-      v.value = de(m.value), R(n.value), f.value && (M.value = f.value.scrollTop, P.value = f.value.clientHeight);
+    function je() {
+      y.value = ve(m.value), C(n.value), c.value && (i.value = c.value.scrollTop, d.value = c.value.clientHeight);
     }
-    let se = !1;
-    const $ = k(!1);
-    async function re(t, o = !1) {
-      if (!o && !i.backfillEnabled || se || $.value) return;
-      const u = (t || 0) + (i.pageSize || 0);
-      if (!(!i.pageSize || i.pageSize <= 0 || d.value[d.value.length - 1] == null) && !(n.value.length >= u)) {
-        se = !0;
+    let ue = !1;
+    const F = E(!1);
+    async function oe(t, r = !1) {
+      if (!r && !s.backfillEnabled || ue || F.value) return;
+      const u = (t || 0) + (s.pageSize || 0);
+      if (!(!s.pageSize || s.pageSize <= 0 || v.value[v.value.length - 1] == null) && !(n.value.length >= u)) {
+        ue = !0;
         try {
           let p = 0;
-          for (a("backfill:start", { target: u, fetched: n.value.length, calls: p }); n.value.length < u && p < i.backfillMaxCalls && d.value[d.value.length - 1] != null && !$.value && (await ne(i.backfillDelayMs, (_, K) => {
+          for (a("backfill:start", { target: u, fetched: n.value.length, calls: p }); n.value.length < u && p < s.backfillMaxCalls && v.value[v.value.length - 1] != null && !F.value && (await re(s.backfillDelayMs, (G, Q) => {
             a("backfill:tick", {
               fetched: n.value.length,
               target: u,
               calls: p,
-              remainingMs: _,
-              totalMs: K
+              remainingMs: G,
+              totalMs: Q
             });
-          }), !$.value); ) {
-            const B = d.value[d.value.length - 1];
+          }), !F.value); ) {
+            const O = v.value[v.value.length - 1];
             try {
-              r.value = !0;
-              const _ = await y(B);
-              if ($.value) break;
-              d.value.push(_.nextPage);
+              f.value = !0;
+              const G = await w(O);
+              if (F.value) break;
+              v.value.push(G.nextPage);
             } finally {
-              r.value = !1;
+              f.value = !1;
             }
             p++;
           }
           a("backfill:stop", { fetched: n.value.length, calls: p });
         } finally {
-          se = !1;
+          ue = !1;
         }
       }
     }
     function he() {
-      $.value = !0, r.value = !1, se = !1;
+      F.value = !0, f.value = !1, ue = !1;
     }
-    function Be() {
-      he(), $.value = !1, f.value && f.value.scrollTo({
+    function Oe() {
+      he(), F.value = !1, c.value && c.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), n.value = [], c.value = 0, b.value = i.loadAtPage, d.value = [i.loadAtPage], S.value = {
+      }), n.value = [], x.value = 0, b.value = s.loadAtPage, v.value = [s.loadAtPage], P.value = {
         distanceToTrigger: 0,
         isNearTrigger: !1
       };
     }
-    const be = Ee(async () => {
-      f.value && (M.value = f.value.scrollTop, P.value = f.value.clientHeight), N.value = !0, await Q(), await new Promise((o) => requestAnimationFrame(() => o())), N.value = !1;
-      const t = ge(n.value, v.value);
-      Y(t), x(t);
-    }, 200), xe = Ee(We, 200);
-    function De(t, o, u) {
-      b.value = o, d.value = [o], d.value.push(u), E(t, "init"), R([...n.value, ...t]), x();
+    const be = ke(async () => {
+      c.value && (i.value = c.value.scrollTop, d.value = c.value.clientHeight), I.value = !0, await Z(), await new Promise((r) => requestAnimationFrame(() => r())), I.value = !1;
+      const t = ge(n.value, y.value);
+      J(t), h(t);
+    }, 200), xe = ke(je, 200);
+    function Be(t, r, u) {
+      b.value = r, v.value = [r], v.value.push(u), N(t, "init"), C([...n.value, ...t]), h();
     }
-    return Ne(
+    return He(
       m,
       () => {
-        f.value && (v.value = de(m.value), R(n.value));
+        c.value && (y.value = ve(m.value), C(n.value));
       },
       { deep: !0 }
-    ), Le(async () => {
+    ), Se(async () => {
       var t;
       try {
-        v.value = de(m.value), f.value && (M.value = f.value.scrollTop, P.value = f.value.clientHeight);
-        const o = i.loadAtPage;
-        d.value = [o], i.skipInitialLoad || await O(d.value[0]), x();
-      } catch (o) {
-        console.error("Error during component initialization:", o), r.value = !1;
+        y.value = ve(m.value), c.value && (i.value = c.value.scrollTop, d.value = c.value.clientHeight);
+        const r = s.loadAtPage;
+        v.value = [r], s.skipInitialLoad || await R(v.value[0]), h();
+      } catch (r) {
+        console.error("Error during component initialization:", r), f.value = !1;
       }
-      (t = f.value) == null || t.addEventListener("scroll", be, { passive: !0 }), window.addEventListener("resize", xe);
-    }), ze(() => {
+      (t = c.value) == null || t.addEventListener("scroll", be, { passive: !0 }), window.addEventListener("resize", xe);
+    }), Ne(() => {
       var t;
-      (t = f.value) == null || t.removeEventListener("scroll", be), window.removeEventListener("resize", xe);
-    }), (t, o) => (G(), V("div", {
-      class: ve(["overflow-auto w-full flex-1 masonry-container", { "force-motion": i.forceMotion }]),
+      (t = c.value) == null || t.removeEventListener("scroll", be), window.removeEventListener("resize", xe);
+    }), (t, r) => (D(), B("div", {
+      class: se(["overflow-auto w-full flex-1 masonry-container", { "force-motion": s.forceMotion }]),
       ref_key: "container",
-      ref: f
+      ref: c
     }, [
-      A("div", {
+      k("div", {
         class: "relative",
-        style: Re({ height: `${c.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
+        style: Re({ height: `${x.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
       }, [
-        Te(Ce, {
+        Te(_e, {
           name: "masonry",
           css: !1,
-          onEnter: z,
-          onBeforeEnter: ee,
-          onLeave: X,
-          onBeforeLeave: te
+          onEnter: _,
+          onBeforeEnter: te,
+          onLeave: Y,
+          onBeforeLeave: ae
         }, {
-          default: qe(() => [
-            (G(!0), V(_e, null, Ve(ae.value, (u, g) => (G(), V("div", Ge({
+          default: Ce(() => [
+            (D(!0), B(qe, null, Ve(ne.value, (u, g) => (D(), B("div", Ge({
               key: `${u.page}-${u.id}`,
               class: "absolute masonry-item",
               ref_for: !0
             }, Ue(Mt)(u, g), {
               style: { paddingTop: `${m.value.header}px`, paddingBottom: `${m.value.footer}px` }
             }), [
-              He(t.$slots, "default", {
+              $e(t.$slots, "default", {
                 item: u,
                 remove: U
               }, () => [
@@ -962,29 +1016,29 @@ const Et = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
           ]),
           _: 3
         }),
-        c.value > 0 ? (G(), V("div", {
+        x.value > 0 ? (D(), B("div", {
           key: 0,
-          class: ve(["fixed bottom-4 right-4 bg-gray-800 text-white text-xs rounded-full px-3 py-1.5 shadow-lg z-10 transition-opacity duration-300", { "opacity-50 hover:opacity-100": !S.value.isNearTrigger, "opacity-100": S.value.isNearTrigger }])
+          class: se(["fixed bottom-4 right-4 bg-gray-800 text-white text-xs rounded-full px-3 py-1.5 shadow-lg z-10 transition-opacity duration-300", { "opacity-50 hover:opacity-100": !P.value.isNearTrigger, "opacity-100": P.value.isNearTrigger }])
         }, [
-          A("span", null, ie(n.value.length) + " items", 1),
-          o[0] || (o[0] = A("span", { class: "mx-2" }, "|", -1)),
-          A("span", null, ie(S.value.distanceToTrigger) + "px to load", 1)
-        ], 2)) : le("", !0)
+          k("span", null, ie(n.value.length) + " items", 1),
+          r[0] || (r[0] = k("span", { class: "mx-2" }, "|", -1)),
+          k("span", null, ie(P.value.distanceToTrigger) + "px to load", 1)
+        ], 2)) : X("", !0)
       ], 4)
     ], 2));
   }
-}), Bt = (e, l) => {
-  const s = e.__vccOpts || e;
-  for (const [i, h] of l)
-    s[i] = h;
-  return s;
-}, ke = /* @__PURE__ */ Bt(Wt, [["__scopeId", "data-v-110c3294"]]), Ot = {
+}), Rt = (e, o) => {
+  const l = e.__vccOpts || e;
+  for (const [s, T] of o)
+    l[s] = T;
+  return l;
+}, Ee = /* @__PURE__ */ Rt(zt, [["__scopeId", "data-v-110c3294"]]), Ct = {
   install(e) {
-    e.component("WyxosMasonry", ke), e.component("WMasonry", ke), e.component("WyxosMasonryItem", pe), e.component("WMasonryItem", pe);
+    e.component("WyxosMasonry", Ee), e.component("WMasonry", Ee), e.component("WyxosMasonryItem", pe), e.component("WMasonryItem", pe);
   }
 };
 export {
-  ke as Masonry,
+  Ee as Masonry,
   pe as MasonryItem,
-  Ot as default
+  Ct as default
 };