@wyxos/vibe 1.6.3 → 1.6.5

package/lib/index.js

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