@wyxos/vibe 1.6.6 → 1.6.8

package/lib/index.js

@@ -1,23 +1,23 @@
-import { nextTick as Q, defineComponent as Le, ref as L, onMounted as He, watch as Ne, createElementBlock as q, openBlock as V, renderSlot as $e, createElementVNode as O, createCommentVNode as oe, withModifiers as ze, toDisplayString as de, computed as se, onUnmounted as Re, normalizeClass as we, normalizeStyle as Ce, createVNode as Me, TransitionGroup as _e, withCtx as qe, Fragment as Ve, renderList as Ge, mergeProps as Te, unref as Ue } from "vue";
-let ue = 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 (ue != null) return ue;
+  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 o = document.createElement("div");
   o.style.width = "100%", e.appendChild(o);
   const l = e.offsetWidth - o.offsetWidth;
-  return document.body.removeChild(e), ue = l, l;
+  return document.body.removeChild(e), fe = l, l;
 }
 function Ye(e, o, l, s = {}) {
   const {
-    gutterX: h = 0,
-    gutterY: v = 0,
+    gutterX: T = 0,
+    gutterY: m = 0,
     header: a = 0,
     footer: n = 0,
-    paddingLeft: d = 0,
-    paddingRight: u = 0,
-    sizes: c = {
+    paddingLeft: y = 0,
+    paddingRight: c = 0,
+    sizes: v = {
       base: 1,
       sm: 2,
       md: 3,
@@ -27,93 +27,93 @@ function Ye(e, o, l, s = {}) {
     },
     placement: b = "masonry"
   } = s;
-  let m = 0, x = 0;
+  let f = 0, x = 0;
   try {
     if (o && o.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const w = window.getComputedStyle(o);
-      m = parseFloat(w.paddingLeft) || 0, x = parseFloat(w.paddingRight) || 0;
+      const M = window.getComputedStyle(o);
+      f = parseFloat(M.paddingLeft) || 0, x = parseFloat(M.paddingRight) || 0;
     }
   } catch {
   }
-  const F = (d || 0) + m, _ = (u || 0) + x, H = o.offsetWidth - o.clientWidth, M = H > 0 ? H + 2 : Xe() + 2, P = o.offsetWidth - M - F - _, U = h * (l - 1), S = Math.floor((P - U) / l), T = e.map((w) => {
-    const N = w.width, I = w.height;
-    return Math.round(S * I / N) + 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 w = T.length;
-    if (w === 0) return [];
-    const N = (p, k, B) => p + (k > 0 ? v : 0) + B;
-    let I = Math.max(...T), D = T.reduce((p, k) => p + k, 0) + v * Math.max(0, w - 1);
-    const Z = (p) => {
-      let k = 1, B = 0, z = 0;
-      for (let $ = 0; $ < w; $++) {
-        const G = T[$], R = N(B, z, G);
-        if (R <= p)
-          B = R, z++;
-        else if (k++, B = G, z = 1, G > p || k > l) 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 k <= l;
+      return A <= l;
     };
-    for (; I < D; ) {
-      const p = Math.floor((I + D) / 2);
-      Z(p) ? D = p : I = p + 1;
-    }
-    const ee = D, X = new Array(l).fill(0);
-    let te = l - 1, Y = 0, J = 0;
-    for (let p = w - 1; p >= 0; p--) {
-      const k = T[p], B = p < te;
-      !(N(Y, J, k) <= ee) || B ? (X[te] = p + 1, te--, Y = k, J = 1) : (Y = N(Y, J, k), J++);
-    }
-    X[0] = 0;
-    const j = [], ae = new Array(l).fill(0);
-    for (let p = 0; p < l; p++) {
-      const k = X[p], B = p + 1 < l ? X[p + 1] : w, z = p * (S + h);
-      for (let $ = k; $ < B; $++) {
-        const R = {
-          ...e[$],
-          columnWidth: S,
+    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
         };
-        R.imageHeight = T[$] - (n + a), R.columnHeight = T[$], R.left = z, R.top = ae[p], ae[p] += R.columnHeight + ($ + 1 < B ? v : 0), j.push(R);
+        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 j;
+    return C;
   }
-  const y = new Array(l).fill(0), W = [];
-  for (let w = 0; w < e.length; w++) {
-    const N = e[w], I = {
-      ...N,
+  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
-    }, D = y.indexOf(Math.min(...y)), Z = N.width, ee = N.height;
-    I.columnWidth = S, I.left = D * (S + h), I.imageHeight = Math.round(S * ee / Z), I.columnHeight = I.imageHeight + n + a, I.top = y[D], y[D] += I.columnHeight + v, W.push(I);
+    }, _ = 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 W;
+  return S;
 }
-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")(), ie = Ae.Symbol, We = Object.prototype, Qe = We.hasOwnProperty, Ze = We.toString, re = ie ? ie.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 o = Qe.call(e, re), l = e[re];
+  var o = Qe.call(e, le), l = e[le];
   try {
-    e[re] = void 0;
+    e[le] = void 0;
     var s = !0;
   } catch {
   }
-  var h = Ze.call(e);
-  return s && (o ? e[re] = l : delete e[re]), 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]", Ie = ie ? ie.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 : Ie && Ie in Object(e) ? et(e) : nt(e);
+  return e == null ? e === void 0 ? ot : rt : Me && Me in Object(e) ? et(e) : nt(e);
 }
 function st(e) {
   return e != null && typeof e == "object";
@@ -129,87 +129,87 @@ function ft(e) {
   return o;
 }
 var dt = /^\s+/;
-function gt(e) {
+function vt(e) {
   return e && e.slice(0, ft(e) + 1).replace(dt, "");
 }
-function ge(e) {
+function me(e) {
   var o = typeof e;
   return e != null && (o == "object" || o == "function");
 }
-var Pe = NaN, mt = /^[-+]0x[0-9a-f]+$/i, vt = /^0b[01]+$/i, pt = /^0o[0-7]+$/i, ht = parseInt;
-function Se(e) {
+var Ie = NaN, mt = /^[-+]0x[0-9a-f]+$/i, gt = /^0b[01]+$/i, pt = /^0o[0-7]+$/i, yt = parseInt;
+function Pe(e) {
   if (typeof e == "number")
     return e;
   if (ut(e))
-    return Pe;
-  if (ge(e)) {
+    return Ie;
+  if (me(e)) {
     var o = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = ge(o) ? o + "" : o;
+    e = me(o) ? o + "" : o;
   }
   if (typeof e != "string")
     return e === 0 ? e : +e;
-  e = gt(e);
-  var l = vt.test(e);
-  return l || pt.test(e) ? ht(e.slice(2), l ? 2 : 8) : mt.test(e) ? Pe : +e;
+  e = vt(e);
+  var l = gt.test(e);
+  return l || pt.test(e) ? yt(e.slice(2), l ? 2 : 8) : mt.test(e) ? Ie : +e;
 }
-var ce = function() {
+var de = function() {
   return Ae.Date.now();
-}, yt = "Expected a function", bt = Math.max, xt = Math.min;
+}, ht = "Expected a function", bt = Math.max, xt = Math.min;
 function ke(e, o, l) {
-  var s, h, v, a, n, d, u = 0, c = !1, b = !1, m = !0;
+  var s, T, m, a, n, y, c = 0, v = !1, b = !1, f = !0;
   if (typeof e != "function")
-    throw new TypeError(yt);
-  o = Se(o) || 0, ge(l) && (c = !!l.leading, b = "maxWait" in l, v = b ? bt(Se(l.maxWait) || 0, o) : v, m = "trailing" in l ? !!l.trailing : m);
-  function x(y) {
-    var W = s, w = h;
-    return s = h = void 0, u = y, a = e.apply(w, W), a;
+    throw new TypeError(ht);
+  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 F(y) {
-    return u = y, n = setTimeout(M, o), c ? x(y) : a;
+  function $(h) {
+    return c = h, n = setTimeout(i, o), v ? x(h) : a;
   }
-  function _(y) {
-    var W = y - d, w = y - u, N = o - W;
-    return b ? xt(N, v - w) : N;
+  function z(h) {
+    var S = h - y, M = h - c, W = o - S;
+    return b ? xt(W, m - M) : W;
   }
-  function H(y) {
-    var W = y - d, w = y - u;
-    return d === void 0 || W >= o || W < 0 || b && w >= v;
+  function N(h) {
+    var S = h - y, M = h - c;
+    return y === void 0 || S >= o || S < 0 || b && M >= m;
   }
-  function M() {
-    var y = ce();
-    if (H(y))
-      return P(y);
-    n = setTimeout(M, _(y));
+  function i() {
+    var h = de();
+    if (N(h))
+      return d(h);
+    n = setTimeout(i, z(h));
   }
-  function P(y) {
-    return n = void 0, m && s ? x(y) : (s = h = void 0, a);
+  function d(h) {
+    return n = void 0, f && s ? x(h) : (s = T = void 0, a);
   }
-  function U() {
-    n !== void 0 && clearTimeout(n), u = 0, s = d = h = n = void 0;
+  function L() {
+    n !== void 0 && clearTimeout(n), c = 0, s = y = T = n = void 0;
   }
-  function S() {
-    return n === void 0 ? a : P(ce());
+  function I() {
+    return n === void 0 ? a : d(de());
   }
-  function T() {
-    var y = ce(), W = H(y);
-    if (s = arguments, h = this, d = y, W) {
+  function P() {
+    var h = de(), S = N(h);
+    if (s = arguments, T = this, y = h, S) {
       if (n === void 0)
-        return F(d);
+        return $(y);
       if (b)
-        return clearTimeout(n), n = setTimeout(M, o), x(d);
+        return clearTimeout(n), n = setTimeout(i, o), x(y);
     }
-    return n === void 0 && (n = setTimeout(M, o)), a;
+    return n === void 0 && (n = setTimeout(i, o)), a;
   }
-  return T.cancel = U, T.flush = S, T;
+  return P.cancel = L, P.flush = I, P;
 }
-function fe(e) {
+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((l, s) => Math.max(l, s.top + s.columnHeight), 0) + 500;
 }
-function Mt(e) {
+function Tt(e) {
   return {
     transform: `translate3d(${e.left}px, ${e.top}px, 0)`,
     top: "0px",
@@ -218,72 +218,72 @@ function Mt(e) {
     height: `${e.columnHeight}px`
   };
 }
-function Tt(e, o = 0) {
+function Mt(e, o = 0) {
   return {
-    style: Mt(e),
+    style: Tt(e),
     "data-top": e.top,
     "data-left": e.left,
     "data-id": `${e.page}-${e.id}`,
     "data-index": o
   };
 }
-function me(e, o) {
+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), h = /* @__PURE__ */ new Map();
-  for (let a = 0; a < s.length; a++) h.set(s[a], a);
-  const v = new Array(s.length).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);
-    n != null && (v[n] = Math.max(v[n], a.top + a.columnHeight));
+    const n = T.get(a.left);
+    n != null && (m[n] = Math.max(m[n], a.top + a.columnHeight));
   }
-  for (; v.length < o; ) v.push(0);
-  return v;
+  for (; m.length < o; ) m.push(0);
+  return m;
 }
 function It(e, o) {
   function l(a, n) {
-    const d = parseInt(a.dataset.left || "0", 10), u = parseInt(a.dataset.top || "0", 10), c = parseInt(a.dataset.index || "0", 10), b = Math.min(c * 20, 160), m = a.style.getPropertyValue("--masonry-opacity-delay");
+    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(${d}px, ${u}px, 0) scale(1)`;
+      a.style.opacity = "1", a.style.transform = `translate3d(${y}px, ${c}px, 0) scale(1)`;
       const x = () => {
-        m ? a.style.setProperty("--masonry-opacity-delay", m) : a.style.removeProperty("--masonry-opacity-delay"), a.removeEventListener("transitionend", x), n();
+        f ? a.style.setProperty("--masonry-opacity-delay", f) : a.style.removeProperty("--masonry-opacity-delay"), a.removeEventListener("transitionend", x), n();
       };
       a.addEventListener("transitionend", x);
     });
   }
   function s(a) {
-    const n = parseInt(a.dataset.left || "0", 10), d = parseInt(a.dataset.top || "0", 10);
-    a.style.opacity = "0", a.style.transform = `translate3d(${n}px, ${d + 10}px, 0) scale(0.985)`;
+    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), d = parseInt(a.dataset.top || "0", 10);
-    a.style.transition = "none", a.style.opacity = "1", a.style.transform = `translate3d(${n}px, ${d}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 v(a, n) {
-    const d = parseInt(a.dataset.left || "0", 10), u = parseInt(a.dataset.top || "0", 10), c = typeof (o == null ? void 0 : o.leaveDurationMs) == "number" ? o.leaveDurationMs : NaN;
-    let b = Number.isFinite(c) && c > 0 ? c : NaN;
+  function m(a, n) {
+    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 m = a.style.transitionDuration, x = () => {
-      a.removeEventListener("transitionend", F), clearTimeout(_), a.style.transitionDuration = m || "";
-    }, F = (H) => {
-      (!H || H.target === a) && (x(), n());
-    }, _ = setTimeout(() => {
+      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(${d}px, ${u + 10}px, 0) scale(0.985)`, a.addEventListener("transitionend", F);
+      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: l,
     onBeforeEnter: s,
-    onBeforeLeave: h,
-    onLeave: v
+    onBeforeLeave: T,
+    onLeave: m
   };
 }
 function Pt({
@@ -291,21 +291,21 @@ function Pt({
   masonry: o,
   columns: l,
   containerHeight: s,
-  isLoading: h,
-  pageSize: v,
+  isLoading: T,
+  pageSize: m,
   refreshLayout: a,
   setItemsRaw: n,
-  loadNext: d,
-  loadThresholdPx: u
+  loadNext: y,
+  loadThresholdPx: c
 }) {
-  let c = 0;
-  async function b(m) {
+  let v = 0;
+  async function b(f) {
     if (!e.value) return;
-    const x = m ?? me(o.value, l.value), F = x.length ? Math.max(...x) : 0, _ = e.value.scrollTop + e.value.clientHeight, H = e.value.scrollTop > c + 1;
-    c = e.value.scrollTop;
-    const M = typeof u == "number" ? u : 200, P = M >= 0 ? Math.max(0, F - M) : Math.max(0, F + M);
-    if (_ >= P && H && !h.value) {
-      await d(), 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,101 +313,220 @@ function Pt({
     handleScroll: b
   };
 }
-const St = { 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" }, Et = {
+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 items-center justify-center bg-slate-100"
+  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: "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"], Nt = { 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" }, $t = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, ve = /* @__PURE__ */ Le({
+}, 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: {},
-    remove: { type: Function }
+    remove: {},
+    type: { default: void 0 },
+    notFound: { type: Boolean, default: void 0 }
   },
   setup(e) {
-    const o = e, l = L(!1), s = L(!1), h = L(null);
-    function v(a) {
-      return new Promise((n, d) => {
-        if (!a) {
-          d(new Error("No image source provided"));
+    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 $(i) {
+      return new Promise((d, L) => {
+        if (!i) {
+          L(new Error("No image source provided"));
           return;
         }
-        const u = new Image(), c = Date.now(), b = 300;
-        u.onload = () => {
-          const m = Date.now() - c, x = Math.max(0, b - m);
+        const I = new Image(), P = Date.now(), h = 300;
+        I.onload = () => {
+          const S = Date.now() - P, M = Math.max(0, h - S);
           setTimeout(() => {
-            l.value = !0, s.value = !1, n();
-          }, x);
-        }, u.onerror = () => {
-          s.value = !0, l.value = !1, d(new Error("Failed to load image"));
-        }, u.src = a;
+            l.value = !0, s.value = !1, c.value = !1, d();
+          }, M);
+        }, I.onerror = () => {
+          s.value = !0, l.value = !1, c.value = !1, L(new Error("Failed to load image"));
+        }, I.src = i;
       });
     }
-    return He(async () => {
-      var n, d;
-      console.log("[MasonryItem] Component mounted", (n = o.item) == null ? void 0 : n.id);
-      const a = (d = o.item) == null ? void 0 : d.src;
-      if (a) {
-        h.value = a, l.value = !1, s.value = !1;
-        try {
-          await v(a);
-        } catch {
+    function z(i) {
+      return new Promise((d, L) => {
+        if (!i) {
+          L(new Error("No video source provided"));
+          return;
         }
-      }
-    }), Ne(
-      () => {
-        var a;
-        return (a = o.item) == null ? void 0 : a.src;
-      },
-      async (a) => {
-        if (a && a !== h.value) {
-          l.value = !1, s.value = !1, h.value = a;
+        const I = document.createElement("video"), P = Date.now(), h = 300;
+        I.preload = "metadata", I.muted = !0, I.onloadedmetadata = () => {
+          const S = Date.now() - P, M = Math.max(0, h - S);
+          setTimeout(() => {
+            m.value = !0, a.value = !1, c.value = !1, d();
+          }, M);
+        }, I.onerror = () => {
+          a.value = !0, m.value = !1, c.value = !1, L(new Error("Failed to load video"));
+        }, I.src = i;
+      });
+    }
+    async function N() {
+      var d;
+      if (!y.value || c.value || x.value || f.value === "video" && m.value || f.value === "image" && l.value)
+        return;
+      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 z(i);
+          } catch {
+          }
+        } else {
+          T.value = i, l.value = !1, s.value = !1;
           try {
-            await v(a);
+            await $(i);
           } catch {
           }
         }
+    }
+    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 i;
+        return (i = o.item) == null ? void 0 : i.src;
+      },
+      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 z(i);
+              } catch {
+              }
+            }
+          } else if (i !== T.value && (l.value = !1, s.value = !1, T.value = i, y.value)) {
+            c.value = !0;
+            try {
+              await $(i);
+            } catch {
+            }
+          }
+        }
       }
-    ), (a, n) => (V(), q("div", St, [
-      $e(a.$slots, "default", {
-        item: a.item,
-        remove: a.remove,
+    ), (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
+        imageError: s.value,
+        videoLoaded: m.value,
+        videoError: a.value,
+        showNotFound: x.value,
+        isLoading: c.value,
+        mediaType: f.value
       }, () => [
-        O("div", kt, [
-          !l.value && !s.value ? (V(), q("div", Et, n[1] || (n[1] = [
-            O("div", { class: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" }, null, -1)
-          ]))) : oe("", !0),
-          s.value ? (V(), q("div", Lt, n[2] || (n[2] = [
-            O("i", { class: "fas fa-image text-2xl mb-2 opacity-50" }, null, -1),
-            O("span", null, "Failed to load image", -1)
-          ]))) : oe("", !0),
-          l.value && h.value ? (V(), q("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,
-            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)) : oe("", !0),
-          n[4] || (n[4] = O("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" }, null, -1)),
-          a.remove ? (V(), q("button", {
+            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,
-            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: n[0] || (n[0] = ze((d) => a.remove(a.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"
-          }, n[3] || (n[3] = [
-            O("i", { class: "fas fa-times text-sm" }, null, -1)
-          ]))) : oe("", !0),
-          O("div", Nt, [
-            O("p", $t, "Item #" + de(String(a.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));
   }
-}), At = /* @__PURE__ */ Le({
+}), zt = /* @__PURE__ */ Le({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -508,7 +627,7 @@ const St = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
     "remove-all:complete"
   ],
   setup(e, { expose: o, emit: l }) {
-    const s = e, h = {
+    const s = e, T = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -517,41 +636,41 @@ const St = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
       paddingLeft: 0,
       paddingRight: 0,
       placement: "masonry"
-    }, v = se(() => {
+    }, m = ee(() => {
       var t;
       return {
-        ...h,
+        ...T,
         ...s.layout,
         sizes: {
-          ...h.sizes,
+          ...T.sizes,
           ...((t = s.layout) == null ? void 0 : t.sizes) || {}
         }
       };
-    }), a = l, n = se({
+    }), a = l, n = ee({
       get: () => s.items,
       set: (t) => a("update:items", t)
-    }), d = L(7), u = L(null), c = L([]), b = L(null), m = L(!1), x = L(0), F = L(/* @__PURE__ */ new Set());
-    function _(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 H(t, r) {
+    function N(t, r) {
       try {
         if (!Array.isArray(t) || t.length === 0) return;
-        const i = t.filter((g) => !_(g == null ? void 0 : g.width) || !_(g == null ? void 0 : g.height));
-        if (i.length === 0) return;
-        const f = [];
-        for (const g of i) {
-          const A = (g == null ? void 0 : g.id) ?? `idx:${t.indexOf(g)}`;
-          F.value.has(A) || (F.value.add(A), f.push(A));
+        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 O = (p == null ? void 0 : p.id) ?? `idx:${t.indexOf(p)}`;
+          $.value.has(O) || ($.value.add(O), g.push(O));
         }
-        if (f.length > 0) {
-          const g = f.slice(0, 10);
+        if (g.length > 0) {
+          const p = g.slice(0, 10);
           console.warn(
             "[Masonry] Items missing width/height detected:",
             {
               context: r,
-              count: f.length,
-              sampleIds: g,
+              count: g.length,
+              sampleIds: p,
               hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
             }
           );
@@ -559,364 +678,367 @@ const St = { class: "relative w-full h-full group" }, kt = { class: "w-full h-fu
       } catch {
       }
     }
-    const M = L(0), P = L(0), U = s.virtualBufferPx, S = L(!1), T = L({
+    const i = E(0), d = E(0), L = s.virtualBufferPx, I = E(!1), P = E({
       distanceToTrigger: 0,
       isNearTrigger: !1
-    }), y = (t) => {
-      if (!u.value) return;
-      const { scrollTop: r, clientHeight: i } = u.value, f = r + i, g = t ?? me(n.value, d.value), A = g.length ? Math.max(...g) : 0, C = typeof s.loadThresholdPx == "number" ? s.loadThresholdPx : 200, K = C >= 0 ? Math.max(0, A - C) : Math.max(0, A + C), xe = Math.max(0, K - f), je = xe <= 100;
-      T.value = {
-        distanceToTrigger: Math.round(xe),
-        isNearTrigger: je
+    }), 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: De
       };
-    }, { onEnter: W, onBeforeEnter: w, onBeforeLeave: N, onLeave: I } = It(n, { leaveDurationMs: s.leaveDurationMs });
-    function D(t, r) {
-      if (S.value) {
-        const i = parseInt(t.dataset.left || "0", 10), f = parseInt(t.dataset.top || "0", 10);
-        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${i}px, ${f}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+    }, { 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 = "", r();
         });
       } else
-        W(t, r);
+        S(t, r);
     }
-    function Z(t) {
-      if (S.value) {
-        const r = parseInt(t.dataset.left || "0", 10), i = parseInt(t.dataset.top || "0", 10);
-        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${r}px, ${i}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
-        w(t);
+        M(t);
     }
-    function ee(t) {
-      S.value || N(t);
+    function ae(t) {
+      I.value || W(t);
     }
-    function X(t, r) {
-      S.value ? r() : I(t, r);
+    function Y(t, r) {
+      I.value ? r() : H(t, r);
     }
-    const te = se(() => {
-      const t = M.value - U, r = M.value + P.value + U, i = n.value;
-      return !i || i.length === 0 ? [] : i.filter((f) => {
-        const g = f.top;
-        return f.top + f.columnHeight >= t && g <= r;
+    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 <= r;
       });
-    }), { handleScroll: Y } = Pt({
-      container: u,
+    }), { handleScroll: J } = Pt({
+      container: c,
       masonry: n,
-      columns: d,
+      columns: y,
       containerHeight: x,
-      isLoading: m,
+      isLoading: f,
       pageSize: s.pageSize,
-      refreshLayout: j,
+      refreshLayout: C,
       setItemsRaw: (t) => {
         n.value = t;
       },
-      loadNext: z,
+      loadNext: q,
       loadThresholdPx: s.loadThresholdPx
     });
     o({
-      isLoading: m,
-      refreshLayout: j,
+      isLoading: f,
+      refreshLayout: C,
       containerHeight: x,
-      remove: G,
-      removeMany: R,
-      removeAll: Be,
-      loadNext: z,
-      loadPage: B,
-      refreshCurrentPage: $,
+      remove: U,
+      removeMany: V,
+      removeAll: We,
+      loadNext: q,
+      loadPage: R,
+      refreshCurrentPage: j,
       reset: Oe,
-      init: De,
-      paginationHistory: c,
+      init: Be,
+      paginationHistory: v,
       cancelLoad: he,
-      scrollToTop: pe,
-      totalItems: se(() => n.value.length)
+      scrollToTop: ye,
+      totalItems: ee(() => n.value.length)
     });
-    function J(t) {
+    function K(t) {
       const r = wt(t);
-      let i = 0;
-      if (u.value) {
-        const { scrollTop: f, clientHeight: g } = u.value;
-        i = f + g + 100;
+      let u = 0;
+      if (c.value) {
+        const { scrollTop: g, clientHeight: p } = c.value;
+        u = g + p + 100;
       }
-      x.value = Math.max(r, i);
-    }
-    function j(t) {
-      if (!u.value) return;
-      H(t, "refreshLayout");
-      const r = t.map((f, g) => ({
-        ...f,
-        originalIndex: f.originalIndex ?? g
-      })), i = Ye(r, u.value, d.value, v.value);
-      J(i), n.value = i;
-    }
-    function ae(t, r) {
-      return new Promise((i) => {
-        const f = Math.max(0, t | 0), g = Date.now();
-        r(f, f);
-        const A = setInterval(() => {
-          if (E.value) {
-            clearInterval(A), i();
+      x.value = Math.max(r, u);
+    }
+    function C(t) {
+      if (!c.value) return;
+      N(t, "refreshLayout");
+      const r = t.map((g, p) => ({
+        ...g,
+        originalIndex: g.originalIndex ?? p
+      })), u = Ye(r, c.value, y.value, m.value);
+      K(u), n.value = u;
+    }
+    function re(t, r) {
+      return new Promise((u) => {
+        const g = Math.max(0, t | 0), p = Date.now();
+        r(g, g);
+        const O = setInterval(() => {
+          if (F.value) {
+            clearInterval(O), u();
             return;
           }
-          const C = Date.now() - g, K = Math.max(0, f - C);
-          r(K, f), K <= 0 && (clearInterval(A), i());
+          const G = Date.now() - p, Q = Math.max(0, g - G);
+          r(Q, g), Q <= 0 && (clearInterval(O), u());
         }, 100);
       });
     }
-    async function p(t) {
+    async function w(t) {
       try {
-        const r = await k(() => s.getNextPage(t));
-        return j([...n.value, ...r.items]), r;
+        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 k(t) {
+    async function A(t) {
       let r = 0;
-      const i = s.retryMaxAttempts;
-      let f = s.retryInitialDelayMs;
+      const u = s.retryMaxAttempts;
+      let g = s.retryInitialDelayMs;
       for (; ; )
         try {
-          const g = await t();
-          return r > 0 && a("retry:stop", { attempt: r, success: !0 }), g;
-        } catch (g) {
-          if (r++, r > i)
-            throw a("retry:stop", { attempt: r - 1, success: !1 }), g;
-          a("retry:start", { attempt: r, max: i, totalMs: f }), await ae(f, (A, C) => {
-            a("retry:tick", { attempt: r, remainingMs: A, totalMs: C });
-          }), f += s.retryBackoffStepMs;
+          const p = await t();
+          return r > 0 && a("retry:stop", { attempt: r, success: !0 }), p;
+        } catch (p) {
+          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 B(t) {
-      if (!m.value) {
-        E.value = !1, m.value = !0;
+    async function R(t) {
+      if (!f.value) {
+        F.value = !1, f.value = !0;
         try {
           const r = n.value.length;
-          if (E.value) return;
-          const i = await p(t);
-          return E.value ? void 0 : (b.value = t, c.value.push(i.nextPage), await ne(r), i);
+          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 {
-          m.value = !1;
+          f.value = !1;
         }
       }
     }
-    async function z() {
-      if (!m.value) {
-        E.value = !1, m.value = !0;
+    async function q() {
+      if (!f.value) {
+        F.value = !1, f.value = !0;
         try {
           const t = n.value.length;
-          if (E.value) return;
-          const r = c.value[c.value.length - 1], i = await p(r);
-          return E.value ? void 0 : (b.value = r, c.value.push(i.nextPage), await ne(t), i);
+          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 {
-          m.value = !1;
+          f.value = !1;
         }
       }
     }
-    async function $() {
-      if (console.log("[Masonry] refreshCurrentPage called, isLoading:", m.value, "currentPage:", b.value), !m.value) {
-        E.value = !1, m.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:", c.value);
+            console.warn("[Masonry] No current page to refresh - currentPage:", b.value, "paginationHistory:", v.value);
             return;
           }
-          n.value = [], x.value = 0, c.value = [t], await Q();
-          const r = await p(t);
-          if (E.value) return;
-          b.value = t, c.value.push(r.nextPage);
-          const i = n.value.length;
-          return await ne(i), r;
+          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 oe(u), r;
         } catch (t) {
           throw console.error("[Masonry] Error refreshing current page:", t), t;
         } finally {
-          m.value = !1;
+          f.value = !1;
         }
       }
     }
-    async function G(t) {
-      const r = n.value.filter((i) => i.id !== t.id);
-      if (n.value = r, await Q(), console.log("[Masonry] remove - next.length:", r.length, "paginationHistory.length:", c.value.length), r.length === 0 && c.value.length > 0) {
+    async function U(t) {
+      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 $();
+          console.log("[Masonry] All items removed, calling refreshCurrentPage"), await j();
         else {
           console.log("[Masonry] All items removed, calling loadNext and forcing backfill");
           try {
-            await z(), await ne(0, !0);
+            await q(), await oe(0, !0);
           } catch {
           }
         }
         return;
       }
-      await new Promise((i) => requestAnimationFrame(() => i())), requestAnimationFrame(() => {
-        j(r);
+      await new Promise((u) => requestAnimationFrame(() => u())), requestAnimationFrame(() => {
+        C(r);
       });
     }
-    async function R(t) {
+    async function V(t) {
       if (!t || t.length === 0) return;
-      const r = new Set(t.map((f) => f.id)), i = n.value.filter((f) => !r.has(f.id));
-      if (n.value = i, await Q(), i.length === 0 && c.value.length > 0) {
+      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 $();
+          await j();
         else
           try {
-            await z(), await ne(0, !0);
+            await q(), await oe(0, !0);
           } catch {
           }
         return;
       }
-      await new Promise((f) => requestAnimationFrame(() => f())), requestAnimationFrame(() => {
-        j(i);
+      await new Promise((g) => requestAnimationFrame(() => g())), requestAnimationFrame(() => {
+        C(u);
       });
     }
-    function pe(t) {
-      u.value && u.value.scrollTo({
+    function ye(t) {
+      c.value && c.value.scrollTo({
         top: 0,
         behavior: (t == null ? void 0 : t.behavior) ?? "smooth",
         ...t
       });
     }
-    async function Be() {
-      pe({ behavior: "smooth" }), n.value = [], x.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 Fe() {
-      d.value = fe(v.value), j(n.value), u.value && (M.value = u.value.scrollTop, P.value = u.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 le = !1;
-    const E = L(!1);
-    async function ne(t, r = !1) {
-      if (!r && !s.backfillEnabled || le || E.value) return;
-      const i = (t || 0) + (s.pageSize || 0);
-      if (!(!s.pageSize || s.pageSize <= 0 || c.value[c.value.length - 1] == null) && !(n.value.length >= i)) {
-        le = !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 g = 0;
-          for (a("backfill:start", { target: i, fetched: n.value.length, calls: g }); n.value.length < i && g < s.backfillMaxCalls && c.value[c.value.length - 1] != null && !E.value && (await ae(s.backfillDelayMs, (C, K) => {
+          let p = 0;
+          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: i,
-              calls: g,
-              remainingMs: C,
-              totalMs: K
+              target: u,
+              calls: p,
+              remainingMs: G,
+              totalMs: Q
             });
-          }), !E.value); ) {
-            const A = c.value[c.value.length - 1];
+          }), !F.value); ) {
+            const O = v.value[v.value.length - 1];
             try {
-              m.value = !0;
-              const C = await p(A);
-              if (E.value) break;
-              c.value.push(C.nextPage);
+              f.value = !0;
+              const G = await w(O);
+              if (F.value) break;
+              v.value.push(G.nextPage);
             } finally {
-              m.value = !1;
+              f.value = !1;
             }
-            g++;
+            p++;
           }
-          a("backfill:stop", { fetched: n.value.length, calls: g });
+          a("backfill:stop", { fetched: n.value.length, calls: p });
         } finally {
-          le = !1;
+          ue = !1;
         }
       }
     }
     function he() {
-      E.value = !0, m.value = !1, le = !1;
+      F.value = !0, f.value = !1, ue = !1;
     }
     function Oe() {
-      he(), E.value = !1, u.value && u.value.scrollTo({
+      he(), F.value = !1, c.value && c.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), n.value = [], x.value = 0, b.value = s.loadAtPage, c.value = [s.loadAtPage], T.value = {
+      }), n.value = [], x.value = 0, b.value = s.loadAtPage, v.value = [s.loadAtPage], P.value = {
         distanceToTrigger: 0,
         isNearTrigger: !1
       };
     }
-    const ye = ke(async () => {
-      u.value && (M.value = u.value.scrollTop, P.value = u.value.clientHeight), S.value = !0, await Q(), await new Promise((r) => requestAnimationFrame(() => r())), S.value = !1;
-      const t = me(n.value, d.value);
-      Y(t), y(t);
-    }, 200), be = ke(Fe, 200);
-    function De(t, r, i) {
-      b.value = r, c.value = [r], c.value.push(i), H(t, "init"), j([...n.value, ...t]), y();
+    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(
-      v,
+    return He(
+      m,
       () => {
-        u.value && (d.value = fe(v.value), j(n.value));
+        c.value && (y.value = ve(m.value), C(n.value));
       },
       { deep: !0 }
-    ), He(async () => {
+    ), Se(async () => {
       var t;
       try {
-        d.value = fe(v.value), u.value && (M.value = u.value.scrollTop, P.value = u.value.clientHeight);
+        y.value = ve(m.value), c.value && (i.value = c.value.scrollTop, d.value = c.value.clientHeight);
         const r = s.loadAtPage;
-        c.value = [r], s.skipInitialLoad || await B(c.value[0]), y();
+        v.value = [r], s.skipInitialLoad || await R(v.value[0]), h();
       } catch (r) {
-        console.error("Error during component initialization:", r), m.value = !1;
+        console.error("Error during component initialization:", r), f.value = !1;
       }
-      (t = u.value) == null || t.addEventListener("scroll", ye, { passive: !0 }), window.addEventListener("resize", be);
-    }), Re(() => {
+      (t = c.value) == null || t.addEventListener("scroll", be, { passive: !0 }), window.addEventListener("resize", xe);
+    }), Ne(() => {
       var t;
-      (t = u.value) == null || t.removeEventListener("scroll", ye), window.removeEventListener("resize", be);
-    }), (t, r) => (V(), q("div", {
-      class: we(["overflow-auto w-full flex-1 masonry-container", { "force-motion": s.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: u
+      ref: c
     }, [
-      O("div", {
+      k("div", {
         class: "relative",
-        style: Ce({ height: `${x.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 })
       }, [
-        Me(_e, {
+        Te(_e, {
           name: "masonry",
           css: !1,
-          onEnter: D,
-          onBeforeEnter: Z,
-          onLeave: X,
-          onBeforeLeave: ee
+          onEnter: _,
+          onBeforeEnter: te,
+          onLeave: Y,
+          onBeforeLeave: ae
         }, {
-          default: qe(() => [
-            (V(!0), q(Ve, null, Ge(te.value, (i, f) => (V(), q("div", Te({
-              key: `${i.page}-${i.id}`,
+          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(Tt)(i, f), {
-              style: { paddingTop: `${v.value.header}px`, paddingBottom: `${v.value.footer}px` }
+            }, Ue(Mt)(u, g), {
+              style: { paddingTop: `${m.value.header}px`, paddingBottom: `${m.value.footer}px` }
             }), [
-              $e(t.$slots, "item", Te({ ref_for: !0 }, { item: i, remove: G }), () => [
-                Me(ve, {
-                  item: i,
-                  remove: G
+              $e(t.$slots, "default", {
+                item: u,
+                remove: U
+              }, () => [
+                Te(pe, {
+                  item: u,
+                  remove: U
                 }, null, 8, ["item"])
               ], !0)
             ], 16))), 128))
           ]),
           _: 3
         }),
-        x.value > 0 ? (V(), q("div", {
+        x.value > 0 ? (D(), B("div", {
           key: 0,
-          class: we(["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": !T.value.isNearTrigger, "opacity-100": T.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 }])
         }, [
-          O("span", null, de(n.value.length) + " items", 1),
-          r[0] || (r[0] = O("span", { class: "mx-2" }, "|", -1)),
-          O("span", null, de(T.value.distanceToTrigger) + "px to load", 1)
-        ], 2)) : oe("", !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));
   }
-}), Wt = (e, o) => {
+}), Rt = (e, o) => {
   const l = e.__vccOpts || e;
-  for (const [s, h] of o)
-    l[s] = h;
+  for (const [s, T] of o)
+    l[s] = T;
   return l;
-}, Ee = /* @__PURE__ */ Wt(At, [["__scopeId", "data-v-08b0e6d9"]]), Ft = {
+}, Ee = /* @__PURE__ */ Rt(zt, [["__scopeId", "data-v-110c3294"]]), Ct = {
   install(e) {
-    e.component("WyxosMasonry", Ee), e.component("WMasonry", Ee), e.component("WyxosMasonryItem", ve), e.component("WMasonryItem", ve);
+    e.component("WyxosMasonry", Ee), e.component("WMasonry", Ee), e.component("WyxosMasonryItem", pe), e.component("WMasonryItem", pe);
   }
 };
 export {
   Ee as Masonry,
-  ve as MasonryItem,
-  Ft as default
+  pe as MasonryItem,
+  Ct as default
 };