@wyxos/vibe 1.5.0 → 1.6.0

package/lib/index.js

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