@wyxos/vibe 1.6.7 → 1.6.9

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