@wyxos/vibe 1.6.17 → 1.6.18

package/lib/index.js

@@ -1,23 +1,23 @@
-import { nextTick as Y, defineComponent as et, ref as T, computed as K, onMounted as tt, onUnmounted as at, watch as oe, createElementBlock as j, openBlock as C, createCommentVNode as ie, createElementVNode as V, normalizeStyle as ye, renderSlot as le, normalizeClass as se, withModifiers as Ye, toDisplayString as bt, Fragment as Ue, renderList as Ge, createVNode as ke, withCtx as he, mergeProps as pe, TransitionGroup as xt, unref as Mt } from "vue";
+import { nextTick as J, defineComponent as tt, ref as T, computed as Z, onMounted as at, onUnmounted as nt, watch as re, createElementBlock as D, openBlock as F, createCommentVNode as ne, createElementVNode as O, normalizeStyle as we, renderSlot as Q, normalizeClass as ue, withModifiers as _e, toDisplayString as He, Fragment as Ue, renderList as Ge, createVNode as $e, withCtx as ge, mergeProps as pe, TransitionGroup as Tt, unref as Lt } from "vue";
 let Se = null;
-function Tt() {
+function kt() {
   if (Se != null) return Se;
   const t = document.createElement("div");
   t.style.visibility = "hidden", t.style.overflow = "scroll", t.style.msOverflowStyle = "scrollbar", t.style.width = "100px", t.style.height = "100px", document.body.appendChild(t);
-  const c = document.createElement("div");
-  c.style.width = "100%", t.appendChild(c);
-  const v = t.offsetWidth - c.offsetWidth;
-  return document.body.removeChild(t), Se = v, v;
+  const v = document.createElement("div");
+  v.style.width = "100%", t.appendChild(v);
+  const c = t.offsetWidth - v.offsetWidth;
+  return document.body.removeChild(t), Se = c, c;
 }
-function Xe(t, c, v, l = {}) {
+function Xe(t, v, c, r = {}) {
   const {
-    gutterX: M = 0,
-    gutterY: h = 0,
-    header: o = 0,
+    gutterX: L = 0,
+    gutterY: p = 0,
+    header: l = 0,
     footer: s = 0,
-    paddingLeft: g = 0,
-    paddingRight: b = 0,
-    sizes: k = {
+    paddingLeft: b = 0,
+    paddingRight: E = 0,
+    sizes: S = {
       base: 1,
       sm: 2,
       md: 3,
@@ -25,195 +25,195 @@ function Xe(t, c, v, l = {}) {
       xl: 5,
       "2xl": 6
     },
-    placement: E = "masonry"
-  } = l;
-  let f = 0, D = 0;
+    placement: I = "masonry"
+  } = r;
+  let d = 0, W = 0;
   try {
-    if (c && c.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const H = window.getComputedStyle(c);
-      f = parseFloat(H.paddingLeft) || 0, D = parseFloat(H.paddingRight) || 0;
+    if (v && v.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
+      const w = window.getComputedStyle(v);
+      d = parseFloat(w.paddingLeft) || 0, W = parseFloat(w.paddingRight) || 0;
     }
   } catch {
   }
-  const A = (g || 0) + f, O = (b || 0) + D, m = c.offsetWidth - c.clientWidth, r = m > 0 ? m + 2 : Tt() + 2, L = c.offsetWidth - r - A - O, y = M * (v - 1), x = Math.floor((L - y) / v), N = t.map((H) => {
-    const I = H.width, S = H.height;
-    return Math.round(x * S / I) + s + o;
+  const R = (b || 0) + d, q = (E || 0) + W, g = v.offsetWidth - v.clientWidth, o = g > 0 ? g + 2 : kt() + 2, $ = v.offsetWidth - o - R - q, y = L * (c - 1), x = Math.floor(($ - y) / c), H = t.map((w) => {
+    const M = w.width, j = w.height;
+    return Math.round(x * j / M) + s + l;
   });
-  if (E === "sequential-balanced") {
-    const H = N.length;
-    if (H === 0) return [];
-    const I = (P, B, G) => P + (B > 0 ? h : 0) + G;
-    let S = Math.max(...N), n = N.reduce((P, B) => P + B, 0) + h * Math.max(0, H - 1);
-    const w = (P) => {
-      let B = 1, G = 0, X = 0;
-      for (let J = 0; J < H; J++) {
-        const ue = N[J], Z = I(G, X, ue);
-        if (Z <= P)
-          G = Z, X++;
-        else if (B++, G = ue, X = 1, ue > P || B > v) return !1;
+  if (I === "sequential-balanced") {
+    const w = H.length;
+    if (w === 0) return [];
+    const M = (k, z, K) => k + (z > 0 ? p : 0) + K;
+    let j = Math.max(...H), n = H.reduce((k, z) => k + z, 0) + p * Math.max(0, w - 1);
+    const f = (k) => {
+      let z = 1, K = 0, G = 0;
+      for (let X = 0; X < w; X++) {
+        const ee = H[X], te = M(K, G, ee);
+        if (te <= k)
+          K = te, G++;
+        else if (z++, K = ee, G = 1, ee > k || z > c) return !1;
       }
-      return B <= v;
+      return z <= c;
     };
-    for (; S < n; ) {
-      const P = Math.floor((S + n) / 2);
-      w(P) ? n = P : S = P + 1;
+    for (; j < n; ) {
+      const k = Math.floor((j + n) / 2);
+      f(k) ? n = k : j = k + 1;
     }
-    const F = n, $ = new Array(v).fill(0);
-    let ae = v - 1, Q = 0, W = 0;
-    for (let P = H - 1; P >= 0; P--) {
-      const B = N[P], G = P < ae;
-      !(I(Q, W, B) <= F) || G ? ($[ae] = P + 1, ae--, Q = B, W = 1) : (Q = I(Q, W, B), W++);
+    const P = n, A = new Array(c).fill(0);
+    let U = c - 1, C = 0, N = 0;
+    for (let k = w - 1; k >= 0; k--) {
+      const z = H[k], K = k < U;
+      !(M(C, N, z) <= P) || K ? (A[U] = k + 1, U--, C = z, N = 1) : (C = M(C, N, z), N++);
     }
-    $[0] = 0;
-    const U = [], _ = new Array(v).fill(0);
-    for (let P = 0; P < v; P++) {
-      const B = $[P], G = P + 1 < v ? $[P + 1] : H, X = P * (x + M);
-      for (let J = B; J < G; J++) {
-        const Z = {
-          ...t[J],
+    A[0] = 0;
+    const oe = [], ie = new Array(c).fill(0);
+    for (let k = 0; k < c; k++) {
+      const z = A[k], K = k + 1 < c ? A[k + 1] : w, G = k * (x + L);
+      for (let X = z; X < K; X++) {
+        const te = {
+          ...t[X],
           columnWidth: x,
           imageHeight: 0,
           columnHeight: 0,
           left: 0,
           top: 0
         };
-        Z.imageHeight = N[J] - (s + o), Z.columnHeight = N[J], Z.left = X, Z.top = _[P], _[P] += Z.columnHeight + (J + 1 < G ? h : 0), U.push(Z);
+        te.imageHeight = H[X] - (s + l), te.columnHeight = H[X], te.left = G, te.top = ie[k], ie[k] += te.columnHeight + (X + 1 < K ? p : 0), oe.push(te);
       }
     }
-    return U;
+    return oe;
   }
-  const p = new Array(v).fill(0), z = [];
-  for (let H = 0; H < t.length; H++) {
-    const I = t[H], S = {
-      ...I,
+  const h = new Array(c).fill(0), B = [];
+  for (let w = 0; w < t.length; w++) {
+    const M = t[w], j = {
+      ...M,
       columnWidth: 0,
       imageHeight: 0,
       columnHeight: 0,
       left: 0,
       top: 0
-    }, n = p.indexOf(Math.min(...p)), w = I.width, F = I.height;
-    S.columnWidth = x, S.left = n * (x + M), S.imageHeight = Math.round(x * F / w), S.columnHeight = S.imageHeight + s + o, S.top = p[n], p[n] += S.columnHeight + h, z.push(S);
+    }, n = h.indexOf(Math.min(...h)), f = M.width, P = M.height;
+    j.columnWidth = x, j.left = n * (x + L), j.imageHeight = Math.round(x * P / f), j.columnHeight = j.imageHeight + s + l, j.top = h[n], h[n] += j.columnHeight + p, B.push(j);
   }
-  return z;
+  return B;
 }
-var Et = typeof global == "object" && global && global.Object === Object && global, Lt = typeof self == "object" && self && self.Object === Object && self, nt = Et || Lt || Function("return this")(), xe = nt.Symbol, ot = Object.prototype, It = ot.hasOwnProperty, kt = ot.toString, ge = xe ? xe.toStringTag : void 0;
-function St(t) {
-  var c = It.call(t, ge), v = t[ge];
+var It = typeof global == "object" && global && global.Object === Object && global, $t = typeof self == "object" && self && self.Object === Object && self, lt = It || $t || Function("return this")(), xe = lt.Symbol, rt = Object.prototype, St = rt.hasOwnProperty, Pt = rt.toString, ye = xe ? xe.toStringTag : void 0;
+function Ht(t) {
+  var v = St.call(t, ye), c = t[ye];
   try {
-    t[ge] = void 0;
-    var l = !0;
+    t[ye] = void 0;
+    var r = !0;
   } catch {
   }
-  var M = kt.call(t);
-  return l && (c ? t[ge] = v : delete t[ge]), M;
+  var L = Pt.call(t);
+  return r && (v ? t[ye] = c : delete t[ye]), L;
 }
-var Pt = Object.prototype, Ht = Pt.toString;
-function $t(t) {
-  return Ht.call(t);
-}
-var Nt = "[object Null]", Wt = "[object Undefined]", _e = xe ? xe.toStringTag : void 0;
+var Nt = Object.prototype, Wt = Nt.toString;
 function Dt(t) {
-  return t == null ? t === void 0 ? Wt : Nt : _e && _e in Object(t) ? St(t) : $t(t);
+  return Wt.call(t);
+}
+var Ft = "[object Null]", Bt = "[object Undefined]", Je = xe ? xe.toStringTag : void 0;
+function zt(t) {
+  return t == null ? t === void 0 ? Bt : Ft : Je && Je in Object(t) ? Ht(t) : Dt(t);
 }
-function Bt(t) {
+function At(t) {
   return t != null && typeof t == "object";
 }
-var zt = "[object Symbol]";
-function Ft(t) {
-  return typeof t == "symbol" || Bt(t) && Dt(t) == zt;
+var Ot = "[object Symbol]";
+function Rt(t) {
+  return typeof t == "symbol" || At(t) && zt(t) == Ot;
 }
-var At = /\s/;
-function Ot(t) {
-  for (var c = t.length; c-- && At.test(t.charAt(c)); )
+var jt = /\s/;
+function Ct(t) {
+  for (var v = t.length; v-- && jt.test(t.charAt(v)); )
     ;
-  return c;
+  return v;
 }
-var Rt = /^\s+/;
-function jt(t) {
-  return t && t.slice(0, Ot(t) + 1).replace(Rt, "");
+var Yt = /^\s+/;
+function qt(t) {
+  return t && t.slice(0, Ct(t) + 1).replace(Yt, "");
 }
-function He(t) {
-  var c = typeof t;
-  return t != null && (c == "object" || c == "function");
+function Ne(t) {
+  var v = typeof t;
+  return t != null && (v == "object" || v == "function");
 }
-var Je = NaN, Ct = /^[-+]0x[0-9a-f]+$/i, qt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, Yt = parseInt;
-function Ke(t) {
+var Ke = NaN, Vt = /^[-+]0x[0-9a-f]+$/i, _t = /^0b[01]+$/i, Ut = /^0o[0-7]+$/i, Gt = parseInt;
+function Qe(t) {
   if (typeof t == "number")
     return t;
-  if (Ft(t))
-    return Je;
-  if (He(t)) {
-    var c = typeof t.valueOf == "function" ? t.valueOf() : t;
-    t = He(c) ? c + "" : c;
+  if (Rt(t))
+    return Ke;
+  if (Ne(t)) {
+    var v = typeof t.valueOf == "function" ? t.valueOf() : t;
+    t = Ne(v) ? v + "" : v;
   }
   if (typeof t != "string")
     return t === 0 ? t : +t;
-  t = jt(t);
-  var v = qt.test(t);
-  return v || Vt.test(t) ? Yt(t.slice(2), v ? 2 : 8) : Ct.test(t) ? Je : +t;
+  t = qt(t);
+  var c = _t.test(t);
+  return c || Ut.test(t) ? Gt(t.slice(2), c ? 2 : 8) : Vt.test(t) ? Ke : +t;
 }
 var Pe = function() {
-  return nt.Date.now();
-}, Ut = "Expected a function", Gt = Math.max, Xt = Math.min;
-function Qe(t, c, v) {
-  var l, M, h, o, s, g, b = 0, k = !1, E = !1, f = !0;
+  return lt.Date.now();
+}, Xt = "Expected a function", Jt = Math.max, Kt = Math.min;
+function Ze(t, v, c) {
+  var r, L, p, l, s, b, E = 0, S = !1, I = !1, d = !0;
   if (typeof t != "function")
-    throw new TypeError(Ut);
-  c = Ke(c) || 0, He(v) && (k = !!v.leading, E = "maxWait" in v, h = E ? Gt(Ke(v.maxWait) || 0, c) : h, f = "trailing" in v ? !!v.trailing : f);
-  function D(p) {
-    var z = l, H = M;
-    return l = M = void 0, b = p, o = t.apply(H, z), o;
+    throw new TypeError(Xt);
+  v = Qe(v) || 0, Ne(c) && (S = !!c.leading, I = "maxWait" in c, p = I ? Jt(Qe(c.maxWait) || 0, v) : p, d = "trailing" in c ? !!c.trailing : d);
+  function W(h) {
+    var B = r, w = L;
+    return r = L = void 0, E = h, l = t.apply(w, B), l;
   }
-  function A(p) {
-    return b = p, s = setTimeout(r, c), k ? D(p) : o;
+  function R(h) {
+    return E = h, s = setTimeout(o, v), S ? W(h) : l;
   }
-  function O(p) {
-    var z = p - g, H = p - b, I = c - z;
-    return E ? Xt(I, h - H) : I;
+  function q(h) {
+    var B = h - b, w = h - E, M = v - B;
+    return I ? Kt(M, p - w) : M;
   }
-  function m(p) {
-    var z = p - g, H = p - b;
-    return g === void 0 || z >= c || z < 0 || E && H >= h;
+  function g(h) {
+    var B = h - b, w = h - E;
+    return b === void 0 || B >= v || B < 0 || I && w >= p;
   }
-  function r() {
-    var p = Pe();
-    if (m(p))
-      return L(p);
-    s = setTimeout(r, O(p));
+  function o() {
+    var h = Pe();
+    if (g(h))
+      return $(h);
+    s = setTimeout(o, q(h));
   }
-  function L(p) {
-    return s = void 0, f && l ? D(p) : (l = M = void 0, o);
+  function $(h) {
+    return s = void 0, d && r ? W(h) : (r = L = void 0, l);
   }
   function y() {
-    s !== void 0 && clearTimeout(s), b = 0, l = g = M = s = void 0;
+    s !== void 0 && clearTimeout(s), E = 0, r = b = L = s = void 0;
   }
   function x() {
-    return s === void 0 ? o : L(Pe());
+    return s === void 0 ? l : $(Pe());
   }
-  function N() {
-    var p = Pe(), z = m(p);
-    if (l = arguments, M = this, g = p, z) {
+  function H() {
+    var h = Pe(), B = g(h);
+    if (r = arguments, L = this, b = h, B) {
       if (s === void 0)
-        return A(g);
-      if (E)
-        return clearTimeout(s), s = setTimeout(r, c), D(g);
+        return R(b);
+      if (I)
+        return clearTimeout(s), s = setTimeout(o, v), W(b);
     }
-    return s === void 0 && (s = setTimeout(r, c)), o;
+    return s === void 0 && (s = setTimeout(o, v)), l;
   }
-  return N.cancel = y, N.flush = x, N;
+  return H.cancel = y, H.flush = x, H;
 }
-function fe(t, c) {
-  const v = c ?? (typeof window < "u" ? window.innerWidth : 1024), l = t.sizes;
-  return v >= 1536 && l["2xl"] ? l["2xl"] : v >= 1280 && l.xl ? l.xl : v >= 1024 && l.lg ? l.lg : v >= 768 && l.md ? l.md : v >= 640 && l.sm ? l.sm : l.base;
+function fe(t, v) {
+  const c = v ?? (typeof window < "u" ? window.innerWidth : 1024), r = t.sizes;
+  return c >= 1536 && r["2xl"] ? r["2xl"] : c >= 1280 && r.xl ? r.xl : c >= 1024 && r.lg ? r.lg : c >= 768 && r.md ? r.md : c >= 640 && r.sm ? r.sm : r.base;
 }
-function _t(t) {
-  const c = t ?? (typeof window < "u" ? window.innerWidth : 1024);
-  return c >= 1536 ? "2xl" : c >= 1280 ? "xl" : c >= 1024 ? "lg" : c >= 768 ? "md" : c >= 640 ? "sm" : "base";
+function Qt(t) {
+  const v = t ?? (typeof window < "u" ? window.innerWidth : 1024);
+  return v >= 1536 ? "2xl" : v >= 1280 ? "xl" : v >= 1024 ? "lg" : v >= 768 ? "md" : v >= 640 ? "sm" : "base";
 }
-function Jt(t) {
-  return t.reduce((v, l) => Math.max(v, l.top + l.columnHeight), 0) + 500;
+function Zt(t) {
+  return t.reduce((c, r) => Math.max(c, r.top + r.columnHeight), 0) + 500;
 }
-function Kt(t) {
+function ea(t) {
   return {
     transform: `translate3d(${t.left}px, ${t.top}px, 0)`,
     top: "0px",
@@ -222,114 +222,114 @@ function Kt(t) {
     height: `${t.columnHeight}px`
   };
 }
-function Qt(t, c = 0) {
+function ta(t, v = 0) {
   return {
-    style: Kt(t),
+    style: ea(t),
     "data-top": t.top,
     "data-left": t.left,
     "data-id": `${t.page}-${t.id}`,
-    "data-index": c
+    "data-index": v
   };
 }
-function $e(t, c) {
-  if (!t.length || c <= 0)
-    return new Array(Math.max(1, c)).fill(0);
-  const l = Array.from(new Set(t.map((o) => o.left))).sort((o, s) => o - s).slice(0, c), M = /* @__PURE__ */ new Map();
-  for (let o = 0; o < l.length; o++) M.set(l[o], o);
-  const h = new Array(l.length).fill(0);
-  for (const o of t) {
-    const s = M.get(o.left);
-    s != null && (h[s] = Math.max(h[s], o.top + o.columnHeight));
+function We(t, v) {
+  if (!t.length || v <= 0)
+    return new Array(Math.max(1, v)).fill(0);
+  const r = Array.from(new Set(t.map((l) => l.left))).sort((l, s) => l - s).slice(0, v), L = /* @__PURE__ */ new Map();
+  for (let l = 0; l < r.length; l++) L.set(r[l], l);
+  const p = new Array(r.length).fill(0);
+  for (const l of t) {
+    const s = L.get(l.left);
+    s != null && (p[s] = Math.max(p[s], l.top + l.columnHeight));
   }
-  for (; h.length < c; ) h.push(0);
-  return h;
+  for (; p.length < v; ) p.push(0);
+  return p;
 }
-function Zt(t, c) {
-  function v(o, s) {
-    const g = parseInt(o.dataset.left || "0", 10), b = parseInt(o.dataset.top || "0", 10), k = parseInt(o.dataset.index || "0", 10), E = Math.min(k * 20, 160), f = o.style.getPropertyValue("--masonry-opacity-delay");
-    o.style.setProperty("--masonry-opacity-delay", `${E}ms`), requestAnimationFrame(() => {
-      o.style.opacity = "1", o.style.transform = `translate3d(${g}px, ${b}px, 0) scale(1)`;
-      const D = () => {
-        f ? o.style.setProperty("--masonry-opacity-delay", f) : o.style.removeProperty("--masonry-opacity-delay"), o.removeEventListener("transitionend", D), s();
+function aa(t, v) {
+  function c(l, s) {
+    const b = parseInt(l.dataset.left || "0", 10), E = parseInt(l.dataset.top || "0", 10), S = parseInt(l.dataset.index || "0", 10), I = Math.min(S * 20, 160), d = l.style.getPropertyValue("--masonry-opacity-delay");
+    l.style.setProperty("--masonry-opacity-delay", `${I}ms`), requestAnimationFrame(() => {
+      l.style.opacity = "1", l.style.transform = `translate3d(${b}px, ${E}px, 0) scale(1)`;
+      const W = () => {
+        d ? l.style.setProperty("--masonry-opacity-delay", d) : l.style.removeProperty("--masonry-opacity-delay"), l.removeEventListener("transitionend", W), s();
       };
-      o.addEventListener("transitionend", D);
+      l.addEventListener("transitionend", W);
     });
   }
-  function l(o) {
-    const s = parseInt(o.dataset.left || "0", 10), g = parseInt(o.dataset.top || "0", 10);
-    o.style.opacity = "0", o.style.transform = `translate3d(${s}px, ${g + 10}px, 0) scale(0.985)`;
+  function r(l) {
+    const s = parseInt(l.dataset.left || "0", 10), b = parseInt(l.dataset.top || "0", 10);
+    l.style.opacity = "0", l.style.transform = `translate3d(${s}px, ${b + 10}px, 0) scale(0.985)`;
   }
-  function M(o) {
-    const s = parseInt(o.dataset.left || "0", 10), g = parseInt(o.dataset.top || "0", 10);
-    o.style.transition = "none", o.style.opacity = "1", o.style.transform = `translate3d(${s}px, ${g}px, 0) scale(1)`, o.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
-      o.style.transition = "";
+  function L(l) {
+    const s = parseInt(l.dataset.left || "0", 10), b = parseInt(l.dataset.top || "0", 10);
+    l.style.transition = "none", l.style.opacity = "1", l.style.transform = `translate3d(${s}px, ${b}px, 0) scale(1)`, l.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+      l.style.transition = "";
     });
   }
-  function h(o, s) {
-    const g = parseInt(o.dataset.left || "0", 10), b = parseInt(o.dataset.top || "0", 10), k = typeof (c == null ? void 0 : c.leaveDurationMs) == "number" ? c.leaveDurationMs : NaN;
-    let E = Number.isFinite(k) && k > 0 ? k : NaN;
-    if (!Number.isFinite(E)) {
-      const r = getComputedStyle(o).getPropertyValue("--masonry-leave-duration") || "", L = parseFloat(r);
-      E = Number.isFinite(L) && L > 0 ? L : 200;
+  function p(l, s) {
+    const b = parseInt(l.dataset.left || "0", 10), E = parseInt(l.dataset.top || "0", 10), S = typeof (v == null ? void 0 : v.leaveDurationMs) == "number" ? v.leaveDurationMs : NaN;
+    let I = Number.isFinite(S) && S > 0 ? S : NaN;
+    if (!Number.isFinite(I)) {
+      const o = getComputedStyle(l).getPropertyValue("--masonry-leave-duration") || "", $ = parseFloat(o);
+      I = Number.isFinite($) && $ > 0 ? $ : 200;
     }
-    const f = o.style.transitionDuration, D = () => {
-      o.removeEventListener("transitionend", A), clearTimeout(O), o.style.transitionDuration = f || "";
-    }, A = (m) => {
-      (!m || m.target === o) && (D(), s());
-    }, O = setTimeout(() => {
-      D(), s();
-    }, E + 100);
+    const d = l.style.transitionDuration, W = () => {
+      l.removeEventListener("transitionend", R), clearTimeout(q), l.style.transitionDuration = d || "";
+    }, R = (g) => {
+      (!g || g.target === l) && (W(), s());
+    }, q = setTimeout(() => {
+      W(), s();
+    }, I + 100);
     requestAnimationFrame(() => {
-      o.style.transitionDuration = `${E}ms`, o.style.opacity = "0", o.style.transform = `translate3d(${g}px, ${b + 10}px, 0) scale(0.985)`, o.addEventListener("transitionend", A);
+      l.style.transitionDuration = `${I}ms`, l.style.opacity = "0", l.style.transform = `translate3d(${b}px, ${E + 10}px, 0) scale(0.985)`, l.addEventListener("transitionend", R);
     });
   }
   return {
-    onEnter: v,
-    onBeforeEnter: l,
-    onBeforeLeave: M,
-    onLeave: h
+    onEnter: c,
+    onBeforeEnter: r,
+    onBeforeLeave: L,
+    onLeave: p
   };
 }
-function ea({
+function na({
   container: t,
-  masonry: c,
-  columns: v,
-  containerHeight: l,
-  isLoading: M,
-  pageSize: h,
-  refreshLayout: o,
+  masonry: v,
+  columns: c,
+  containerHeight: r,
+  isLoading: L,
+  pageSize: p,
+  refreshLayout: l,
   setItemsRaw: s,
-  loadNext: g,
-  loadThresholdPx: b
+  loadNext: b,
+  loadThresholdPx: E
 }) {
-  let k = 0;
-  async function E(f) {
+  let S = 0;
+  async function I(d) {
     if (!t.value) return;
-    const D = f ?? $e(c.value, v.value), A = D.length ? Math.max(...D) : 0, O = t.value.scrollTop + t.value.clientHeight, m = t.value.scrollTop > k + 1;
-    k = t.value.scrollTop;
-    const r = typeof b == "number" ? b : 200, L = r >= 0 ? Math.max(0, A - r) : Math.max(0, A + r);
-    if (O >= L && m && !M.value) {
-      await g(), await Y();
+    const W = d ?? We(v.value, c.value), R = W.length ? Math.max(...W) : 0, q = t.value.scrollTop + t.value.clientHeight, g = t.value.scrollTop > S + 1;
+    S = t.value.scrollTop;
+    const o = typeof E == "number" ? E : 200, $ = o >= 0 ? Math.max(0, R - o) : Math.max(0, R + o);
+    if (q >= $ && g && !L.value) {
+      await b(), await J();
       return;
     }
   }
   return {
-    handleScroll: E
+    handleScroll: I
   };
 }
-const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm transition-all duration-300 bg-white relative" }, na = {
+const la = { class: "flex-1 relative min-h-0" }, ra = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm transition-all duration-300 bg-white relative" }, oa = {
   key: 0,
   class: "absolute inset-0 flex flex-col items-center justify-center bg-slate-100 text-slate-400 text-sm p-4 text-center"
-}, oa = {
+}, ia = {
   key: 1,
   class: "relative w-full h-full"
-}, la = ["src"], ra = ["src", "autoplay", "controls"], ia = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, sa = {
+}, sa = ["src"], ua = ["src", "autoplay", "controls"], va = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, ca = {
   key: 3,
   class: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-center justify-center z-10"
-}, ua = {
+}, fa = {
   key: 4,
   class: "absolute inset-0 flex flex-col items-center justify-center bg-slate-50 text-slate-400 text-sm p-4 text-center"
-}, Me = /* @__PURE__ */ et({
+}, Me = /* @__PURE__ */ tt({
   __name: "MasonryItem",
   props: {
     item: {},
@@ -342,264 +342,276 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     inSwipeMode: { type: Boolean, default: !1 }
   },
   emits: ["preload:success", "preload:error", "mouse-enter", "mouse-leave"],
-  setup(t, { emit: c }) {
-    const v = t, l = c, M = T(!1), h = T(!1), o = T(null), s = T(!1), g = T(!1), b = T(null), k = T(!1), E = T(!1), f = T(!1), D = T(null), A = T(null);
-    let O = null;
-    const m = K(() => {
+  setup(t, { emit: v }) {
+    const c = t, r = v, L = T(!1), p = T(!1), l = T(null), s = T(!1), b = T(!1), E = T(null), S = T(!1), I = T(!1), d = T(!1), W = T(null), R = T(null);
+    let q = null;
+    const g = Z(() => {
       var n;
-      return v.type ?? ((n = v.item) == null ? void 0 : n.type) ?? "image";
-    }), r = K(() => {
+      return c.type ?? ((n = c.item) == null ? void 0 : n.type) ?? "image";
+    }), o = Z(() => {
       var n;
-      return v.notFound ?? ((n = v.item) == null ? void 0 : n.notFound) ?? !1;
-    }), L = K(() => !!v.inSwipeMode);
+      return c.notFound ?? ((n = c.item) == null ? void 0 : n.notFound) ?? !1;
+    }), $ = Z(() => !!c.inSwipeMode);
     function y(n) {
-      l("mouse-enter", { item: v.item, type: n });
+      r("mouse-enter", { item: c.item, type: n });
     }
     function x(n) {
-      l("mouse-leave", { item: v.item, type: n });
+      r("mouse-leave", { item: c.item, type: n });
     }
-    function N(n) {
-      if (L.value) return;
-      const w = n.target;
-      w && (w.paused ? w.play() : w.pause());
+    function H(n) {
+      if ($.value) return;
+      const f = n.target;
+      f && (f.paused ? f.play() : f.pause());
     }
-    function p(n) {
-      const w = n.target;
-      w && (L.value || w.play(), y("video"));
+    function h(n) {
+      const f = n.target;
+      f && ($.value || f.play(), y("video"));
     }
-    function z(n) {
-      const w = n.target;
-      w && (L.value || w.pause(), x("video"));
+    function B(n) {
+      const f = n.target;
+      f && ($.value || f.pause(), x("video"));
     }
-    function H(n) {
-      return new Promise((w, F) => {
+    function w(n) {
+      return new Promise((f, P) => {
         if (!n) {
-          const W = new Error("No image source provided");
-          l("preload:error", { item: v.item, type: "image", src: n, error: W }), F(W);
+          const N = new Error("No image source provided");
+          r("preload:error", { item: c.item, type: "image", src: n, error: N }), P(N);
           return;
         }
-        const $ = new Image(), ae = Date.now(), Q = 300;
-        $.onload = () => {
-          const W = Date.now() - ae, U = Math.max(0, Q - W);
+        const A = new Image(), U = Date.now(), C = 300;
+        A.onload = () => {
+          const N = Date.now() - U, oe = Math.max(0, C - N);
           setTimeout(async () => {
-            M.value = !0, h.value = !1, E.value = !1, await Y(), await new Promise((_) => setTimeout(_, 100)), f.value = !0, l("preload:success", { item: v.item, type: "image", src: n }), w();
-          }, U);
-        }, $.onerror = () => {
-          h.value = !0, M.value = !1, E.value = !1;
-          const W = new Error("Failed to load image");
-          l("preload:error", { item: v.item, type: "image", src: n, error: W }), F(W);
-        }, $.src = n;
+            L.value = !0, p.value = !1, I.value = !1, await J(), await new Promise((ie) => setTimeout(ie, 100)), d.value = !0, r("preload:success", { item: c.item, type: "image", src: n }), f();
+          }, oe);
+        }, A.onerror = () => {
+          p.value = !0, L.value = !1, I.value = !1;
+          const N = new Error("Failed to load image");
+          r("preload:error", { item: c.item, type: "image", src: n, error: N }), P(N);
+        }, A.src = n;
       });
     }
-    function I(n) {
-      return new Promise((w, F) => {
+    function M(n) {
+      return new Promise((f, P) => {
         if (!n) {
-          const W = new Error("No video source provided");
-          l("preload:error", { item: v.item, type: "video", src: n, error: W }), F(W);
+          const N = new Error("No video source provided");
+          r("preload:error", { item: c.item, type: "video", src: n, error: N }), P(N);
           return;
         }
-        const $ = document.createElement("video"), ae = Date.now(), Q = 300;
-        $.preload = "metadata", $.muted = !0, $.onloadedmetadata = () => {
-          const W = Date.now() - ae, U = Math.max(0, Q - W);
+        const A = document.createElement("video"), U = Date.now(), C = 300;
+        A.preload = "metadata", A.muted = !0, A.onloadedmetadata = () => {
+          const N = Date.now() - U, oe = Math.max(0, C - N);
           setTimeout(async () => {
-            s.value = !0, g.value = !1, E.value = !1, await Y(), await new Promise((_) => setTimeout(_, 100)), f.value = !0, l("preload:success", { item: v.item, type: "video", src: n }), w();
-          }, U);
-        }, $.onerror = () => {
-          g.value = !0, s.value = !1, E.value = !1;
-          const W = new Error("Failed to load video");
-          l("preload:error", { item: v.item, type: "video", src: n, error: W }), F(W);
-        }, $.src = n;
+            s.value = !0, b.value = !1, I.value = !1, await J(), await new Promise((ie) => setTimeout(ie, 100)), d.value = !0, r("preload:success", { item: c.item, type: "video", src: n }), f();
+          }, oe);
+        }, A.onerror = () => {
+          b.value = !0, s.value = !1, I.value = !1;
+          const N = new Error("Failed to load video");
+          r("preload:error", { item: c.item, type: "video", src: n, error: N }), P(N);
+        }, A.src = n;
       });
     }
-    async function S() {
-      var w;
-      if (!k.value || E.value || r.value || m.value === "video" && s.value || m.value === "image" && M.value)
+    async function j() {
+      var f;
+      if (!S.value || I.value || o.value || g.value === "video" && s.value || g.value === "image" && L.value)
         return;
-      const n = (w = v.item) == null ? void 0 : w.src;
+      const n = (f = c.item) == null ? void 0 : f.src;
       if (n)
-        if (E.value = !0, f.value = !1, m.value === "video") {
-          b.value = n, s.value = !1, g.value = !1;
+        if (I.value = !0, d.value = !1, g.value === "video") {
+          E.value = n, s.value = !1, b.value = !1;
           try {
-            await I(n);
+            await M(n);
           } catch {
           }
         } else {
-          o.value = n, M.value = !1, h.value = !1;
+          l.value = n, L.value = !1, p.value = !1;
           try {
-            await H(n);
+            await w(n);
           } catch {
           }
         }
     }
-    return tt(() => {
-      D.value && (O = new IntersectionObserver(
+    return at(() => {
+      W.value && (q = new IntersectionObserver(
         (n) => {
-          n.forEach((w) => {
-            w.isIntersecting && w.intersectionRatio >= 1 ? k.value || (k.value = !0, S()) : w.isIntersecting;
+          n.forEach((f) => {
+            f.isIntersecting && f.intersectionRatio >= 1 ? S.value || (S.value = !0, j()) : f.isIntersecting;
           });
         },
         {
           // Only trigger when item is 100% visible (full height in view)
           threshold: [1]
         }
-      ), O.observe(D.value));
-    }), at(() => {
-      O && (O.disconnect(), O = null);
-    }), oe(
+      ), q.observe(W.value));
+    }), nt(() => {
+      q && (q.disconnect(), q = null);
+    }), re(
       () => {
         var n;
-        return (n = v.item) == null ? void 0 : n.src;
+        return (n = c.item) == null ? void 0 : n.src;
       },
       async (n) => {
-        if (!(!n || r.value)) {
-          if (m.value === "video") {
-            if (n !== b.value && (s.value = !1, g.value = !1, b.value = n, k.value)) {
-              E.value = !0;
+        if (!(!n || o.value)) {
+          if (g.value === "video") {
+            if (n !== E.value && (s.value = !1, b.value = !1, E.value = n, S.value)) {
+              I.value = !0;
               try {
-                await I(n);
+                await M(n);
               } catch {
               }
             }
-          } else if (n !== o.value && (M.value = !1, h.value = !1, o.value = n, k.value)) {
-            E.value = !0;
+          } else if (n !== l.value && (L.value = !1, p.value = !1, l.value = n, S.value)) {
+            I.value = !0;
             try {
-              await H(n);
+              await w(n);
             } catch {
             }
           }
         }
       }
-    ), oe(
-      () => v.isActive,
+    ), re(
+      () => c.isActive,
       (n) => {
-        !L.value || !A.value || (n ? A.value.play() : A.value.pause());
+        !$.value || !R.value || (n ? R.value.play() : R.value.pause());
       }
-    ), (n, w) => (C(), j("div", {
+    ), (n, f) => (F(), D("div", {
       ref_key: "containerRef",
-      ref: D,
+      ref: W,
       class: "relative w-full h-full flex flex-col"
     }, [
-      n.headerHeight > 0 ? (C(), j("div", {
+      n.headerHeight > 0 ? (F(), D("div", {
         key: 0,
         class: "relative z-10",
-        style: ye({ height: `${n.headerHeight}px` })
+        style: we({ height: `${n.headerHeight}px` })
       }, [
-        le(n.$slots, "header", {
+        Q(n.$slots, "header", {
           item: n.item,
           remove: n.remove,
-          imageLoaded: M.value,
-          imageError: h.value,
+          imageLoaded: L.value,
+          imageError: p.value,
           videoLoaded: s.value,
-          videoError: g.value,
-          showNotFound: r.value,
-          isLoading: E.value,
-          mediaType: m.value
+          videoError: b.value,
+          showNotFound: o.value,
+          isLoading: I.value,
+          mediaType: g.value
         })
-      ], 4)) : ie("", !0),
-      V("div", ta, [
-        le(n.$slots, "default", {
+      ], 4)) : ne("", !0),
+      O("div", la, [
+        Q(n.$slots, "default", {
           item: n.item,
           remove: n.remove,
-          imageLoaded: M.value,
-          imageError: h.value,
+          imageLoaded: L.value,
+          imageError: p.value,
           videoLoaded: s.value,
-          videoError: g.value,
-          showNotFound: r.value,
-          isLoading: E.value,
-          mediaType: m.value,
-          imageSrc: o.value,
-          videoSrc: b.value,
-          showMedia: f.value
+          videoError: b.value,
+          showNotFound: o.value,
+          isLoading: I.value,
+          mediaType: g.value,
+          imageSrc: l.value,
+          videoSrc: E.value,
+          showMedia: d.value
         }, () => [
-          V("div", aa, [
-            r.value ? (C(), j("div", na, w[3] || (w[3] = [
-              V("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
-              V("span", { class: "font-medium" }, "Not Found", -1),
-              V("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
-            ]))) : (C(), j("div", oa, [
-              m.value === "image" && o.value ? (C(), j("img", {
+          O("div", ra, [
+            o.value ? (F(), D("div", oa, f[3] || (f[3] = [
+              O("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
+              O("span", { class: "font-medium" }, "Not Found", -1),
+              O("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
+            ]))) : (F(), D("div", ia, [
+              g.value === "image" && l.value ? (F(), D("img", {
                 key: 0,
-                src: o.value,
-                class: se([
+                src: l.value,
+                class: ue([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  M.value && f.value ? "opacity-100" : "opacity-0"
+                  L.value && d.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 loading: "lazy",
                 decoding: "async",
                 alt: "",
-                onMouseenter: w[0] || (w[0] = (F) => y("image")),
-                onMouseleave: w[1] || (w[1] = (F) => x("image"))
-              }, null, 42, la)) : ie("", !0),
-              m.value === "video" && b.value ? (C(), j("video", {
+                onMouseenter: f[0] || (f[0] = (P) => y("image")),
+                onMouseleave: f[1] || (f[1] = (P) => x("image"))
+              }, null, 42, sa)) : ne("", !0),
+              g.value === "video" && E.value ? (F(), D("video", {
                 key: 1,
                 ref_key: "videoEl",
-                ref: A,
-                src: b.value,
-                class: se([
+                ref: R,
+                src: E.value,
+                class: ue([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  s.value && f.value ? "opacity-100" : "opacity-0"
+                  s.value && d.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 muted: "",
                 loop: "",
                 playsinline: "",
-                autoplay: L.value && v.isActive,
-                controls: L.value,
-                onClick: Ye(N, ["stop"]),
-                onTouchend: Ye(N, ["stop", "prevent"]),
-                onMouseenter: p,
-                onMouseleave: z,
-                onError: w[2] || (w[2] = (F) => g.value = !0)
-              }, null, 42, ra)) : ie("", !0),
-              !M.value && !s.value && !h.value && !g.value ? (C(), j("div", {
+                autoplay: $.value && c.isActive,
+                controls: $.value,
+                onClick: _e(H, ["stop"]),
+                onTouchend: _e(H, ["stop", "prevent"]),
+                onMouseenter: h,
+                onMouseleave: B,
+                onError: f[2] || (f[2] = (P) => b.value = !0)
+              }, null, 42, ua)) : ne("", !0),
+              !L.value && !s.value && !p.value && !b.value ? (F(), D("div", {
                 key: 2,
-                class: se([
+                class: ue([
                   "absolute inset-0 bg-slate-100 flex items-center justify-center transition-opacity duration-500",
-                  f.value ? "opacity-0 pointer-events-none" : "opacity-100"
+                  d.value ? "opacity-0 pointer-events-none" : "opacity-100"
                 ])
               }, [
-                V("div", ia, [
-                  V("i", {
-                    class: se(m.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
+                O("div", va, [
+                  O("i", {
+                    class: ue(g.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
                   }, null, 2)
                 ])
-              ], 2)) : ie("", !0),
-              E.value ? (C(), j("div", sa, w[4] || (w[4] = [
-                V("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
-                  V("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
+              ], 2)) : ne("", !0),
+              I.value ? (F(), D("div", ca, f[4] || (f[4] = [
+                O("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
+                  O("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
                 ], -1)
-              ]))) : ie("", !0),
-              m.value === "image" && h.value || m.value === "video" && g.value ? (C(), j("div", ua, [
-                V("i", {
-                  class: se(m.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
+              ]))) : ne("", !0),
+              g.value === "image" && p.value || g.value === "video" && b.value ? (F(), D("div", fa, [
+                O("i", {
+                  class: ue(g.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
                 }, null, 2),
-                V("span", null, "Failed to load " + bt(m.value), 1)
-              ])) : ie("", !0)
+                O("span", null, "Failed to load " + He(g.value), 1)
+              ])) : ne("", !0)
             ]))
           ])
         ])
       ]),
-      n.footerHeight > 0 ? (C(), j("div", {
+      n.footerHeight > 0 ? (F(), D("div", {
         key: 1,
         class: "relative z-10",
-        style: ye({ height: `${n.footerHeight}px` })
+        style: we({ height: `${n.footerHeight}px` })
       }, [
-        le(n.$slots, "footer", {
+        Q(n.$slots, "footer", {
           item: n.item,
           remove: n.remove,
-          imageLoaded: M.value,
-          imageError: h.value,
+          imageLoaded: L.value,
+          imageError: p.value,
           videoLoaded: s.value,
-          videoError: g.value,
-          showNotFound: r.value,
-          isLoading: E.value,
-          mediaType: m.value
+          videoError: b.value,
+          showNotFound: o.value,
+          isLoading: I.value,
+          mediaType: g.value
         })
-      ], 4)) : ie("", !0)
+      ], 4)) : ne("", !0)
     ], 512));
   }
-}), ca = { class: "w-full h-full flex items-center justify-center p-4" }, va = { class: "w-full h-full max-w-full max-h-full relative" }, fa = /* @__PURE__ */ et({
+}), da = { class: "w-full h-full flex items-center justify-center p-4" }, ma = { class: "w-full h-full max-w-full max-h-full relative" }, ha = {
+  key: 0,
+  class: "w-full py-8 text-center"
+}, ga = {
+  key: 1,
+  class: "w-full py-8 text-center"
+}, pa = { class: "text-red-500 dark:text-red-400" }, ya = {
+  key: 0,
+  class: "w-full py-8 text-center"
+}, wa = {
+  key: 1,
+  class: "w-full py-8 text-center"
+}, ba = { class: "text-red-500 dark:text-red-400" }, xa = /* @__PURE__ */ tt({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -717,8 +729,8 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     "item:mouse-enter",
     "item:mouse-leave"
   ],
-  setup(t, { expose: c, emit: v }) {
-    const l = t, M = {
+  setup(t, { expose: v, emit: c }) {
+    const r = t, L = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -727,19 +739,19 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       paddingLeft: 0,
       paddingRight: 0,
       placement: "masonry"
-    }, h = K(() => {
+    }, p = Z(() => {
       var e;
       return {
-        ...M,
-        ...l.layout,
+        ...L,
+        ...r.layout,
         sizes: {
-          ...M.sizes,
-          ...((e = l.layout) == null ? void 0 : e.sizes) || {}
+          ...L.sizes,
+          ...((e = r.layout) == null ? void 0 : e.sizes) || {}
         }
       };
-    }), o = T(null), s = T(typeof window < "u" ? window.innerWidth : 1024), g = T(typeof window < "u" ? window.innerHeight : 768), b = T(null);
-    let k = null;
-    function E(e) {
+    }), l = T(null), s = T(typeof window < "u" ? window.innerWidth : 1024), b = T(typeof window < "u" ? window.innerHeight : 768), E = T(null);
+    let S = null;
+    function I(e) {
       return {
         sm: 640,
         md: 768,
@@ -748,47 +760,47 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         "2xl": 1536
       }[e] || 768;
     }
-    const f = K(() => {
-      if (l.layoutMode === "masonry") return !1;
-      if (l.layoutMode === "swipe") return !0;
-      const e = typeof l.mobileBreakpoint == "string" ? E(l.mobileBreakpoint) : l.mobileBreakpoint;
+    const d = Z(() => {
+      if (r.layoutMode === "masonry") return !1;
+      if (r.layoutMode === "swipe") return !0;
+      const e = typeof r.mobileBreakpoint == "string" ? I(r.mobileBreakpoint) : r.mobileBreakpoint;
       return s.value < e;
-    }), D = K(() => {
-      if (!f.value || r.value.length === 0) return null;
-      const e = Math.max(0, Math.min(I.value, r.value.length - 1));
-      return r.value[e] || null;
-    }), A = K(() => {
-      if (!f.value || !D.value) return null;
-      const e = I.value + 1;
-      return e >= r.value.length ? null : r.value[e] || null;
-    }), O = K(() => {
-      if (!f.value || !D.value) return null;
-      const e = I.value - 1;
-      return e < 0 ? null : r.value[e] || null;
-    }), m = v, r = K({
-      get: () => l.items,
-      set: (e) => m("update:items", e)
-    }), L = T(7), y = T(null), x = T([]), N = T(null), p = T(!1), z = T(0), H = K(() => _t(s.value)), I = T(0), S = T(0), n = T(!1), w = T(0), F = T(0), $ = T(null), ae = T(/* @__PURE__ */ new Set());
-    function Q(e) {
+    }), W = Z(() => {
+      if (!d.value || o.value.length === 0) return null;
+      const e = Math.max(0, Math.min(n.value, o.value.length - 1));
+      return o.value[e] || null;
+    }), R = Z(() => {
+      if (!d.value || !W.value) return null;
+      const e = n.value + 1;
+      return e >= o.value.length ? null : o.value[e] || null;
+    }), q = Z(() => {
+      if (!d.value || !W.value) return null;
+      const e = n.value - 1;
+      return e < 0 ? null : o.value[e] || null;
+    }), g = c, o = Z({
+      get: () => r.items,
+      set: (e) => g("update:items", e)
+    }), $ = T(7), y = T(null), x = T([]), H = T(null), h = T(!1), B = T(0), w = T(!1), M = T(null), j = Z(() => Qt(s.value)), n = T(0), f = T(0), P = T(!1), A = T(0), U = T(0), C = T(null), N = T(/* @__PURE__ */ new Set());
+    function oe(e) {
       return typeof e == "number" && Number.isFinite(e) && e > 0;
     }
-    function W(e, a) {
+    function ie(e, a) {
       try {
         if (!Array.isArray(e) || e.length === 0) return;
-        const i = e.filter((u) => !Q(u == null ? void 0 : u.width) || !Q(u == null ? void 0 : u.height));
+        const i = e.filter((u) => !oe(u == null ? void 0 : u.width) || !oe(u == null ? void 0 : u.height));
         if (i.length === 0) return;
-        const d = [];
+        const m = [];
         for (const u of i) {
-          const R = (u == null ? void 0 : u.id) ?? `idx:${e.indexOf(u)}`;
-          ae.value.has(R) || (ae.value.add(R), d.push(R));
+          const Y = (u == null ? void 0 : u.id) ?? `idx:${e.indexOf(u)}`;
+          N.value.has(Y) || (N.value.add(Y), m.push(Y));
         }
-        if (d.length > 0) {
-          const u = d.slice(0, 10);
+        if (m.length > 0) {
+          const u = m.slice(0, 10);
           console.warn(
             "[Masonry] Items missing width/height detected:",
             {
               context: a,
-              count: d.length,
+              count: m.length,
               sampleIds: u,
               hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
             }
@@ -797,451 +809,482 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       } catch {
       }
     }
-    const U = T(0), _ = T(0), P = l.virtualBufferPx, B = T(!1), G = T({
+    const k = T(0), z = T(0), K = r.virtualBufferPx, G = T(!1), X = T({
       distanceToTrigger: 0,
       isNearTrigger: !1
-    }), X = (e) => {
+    }), ee = (e) => {
       if (!y.value) return;
-      const { scrollTop: a, clientHeight: i } = y.value, d = a + i, u = e ?? $e(r.value, L.value), R = u.length ? Math.max(...u) : 0, te = typeof l.loadThresholdPx == "number" ? l.loadThresholdPx : 200, ve = te >= 0 ? Math.max(0, R - te) : Math.max(0, R + te), Ve = Math.max(0, ve - d), wt = Ve <= 100;
-      G.value = {
+      const { scrollTop: a, clientHeight: i } = y.value, m = a + i, u = e ?? We(o.value, $.value), Y = u.length ? Math.max(...u) : 0, _ = typeof r.loadThresholdPx == "number" ? r.loadThresholdPx : 200, ce = _ >= 0 ? Math.max(0, Y - _) : Math.max(0, Y + _), Ve = Math.max(0, ce - m), Et = Ve <= 100;
+      X.value = {
         distanceToTrigger: Math.round(Ve),
-        isNearTrigger: wt
+        isNearTrigger: Et
       };
-    }, { onEnter: J, onBeforeEnter: ue, onBeforeLeave: Z, onLeave: lt } = Zt(r, { leaveDurationMs: l.leaveDurationMs });
-    function rt(e, a) {
-      if (B.value) {
-        const i = parseInt(e.dataset.left || "0", 10), d = parseInt(e.dataset.top || "0", 10);
-        e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${i}px, ${d}px, 0) scale(1)`, e.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+    }, { onEnter: te, onBeforeEnter: ot, onBeforeLeave: it, onLeave: st } = aa(o, { leaveDurationMs: r.leaveDurationMs });
+    function ut(e, a) {
+      if (G.value) {
+        const i = parseInt(e.dataset.left || "0", 10), m = parseInt(e.dataset.top || "0", 10);
+        e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${i}px, ${m}px, 0) scale(1)`, e.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
           e.style.transition = "", a();
         });
       } else
-        J(e, a);
+        te(e, a);
     }
-    function it(e) {
-      if (B.value) {
+    function vt(e) {
+      if (G.value) {
         const a = parseInt(e.dataset.left || "0", 10), i = parseInt(e.dataset.top || "0", 10);
         e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${a}px, ${i}px, 0) scale(1)`, e.style.removeProperty("--masonry-opacity-delay");
       } else
-        ue(e);
+        ot(e);
     }
-    function st(e) {
-      B.value || Z(e);
+    function ct(e) {
+      G.value || it(e);
     }
-    function ut(e, a) {
-      B.value ? a() : lt(e, a);
+    function ft(e, a) {
+      G.value ? a() : st(e, a);
     }
-    const ct = K(() => {
-      const e = U.value - P, a = U.value + _.value + P, i = r.value;
-      return !i || i.length === 0 ? [] : i.filter((d) => {
-        const u = d.top;
-        return d.top + d.columnHeight >= e && u <= a;
+    const dt = Z(() => {
+      const e = k.value - K, a = k.value + z.value + K, i = o.value;
+      return !i || i.length === 0 ? [] : i.filter((m) => {
+        const u = m.top;
+        return m.top + m.columnHeight >= e && u <= a;
       });
-    }), { handleScroll: vt } = ea({
+    }), { handleScroll: mt } = na({
       container: y,
-      masonry: r,
-      columns: L,
-      containerHeight: z,
-      isLoading: p,
-      pageSize: l.pageSize,
-      refreshLayout: ee,
+      masonry: o,
+      columns: $,
+      containerHeight: B,
+      isLoading: h,
+      pageSize: r.pageSize,
+      refreshLayout: ae,
       setItemsRaw: (e) => {
-        r.value = e;
+        o.value = e;
       },
-      loadNext: ce,
-      loadThresholdPx: l.loadThresholdPx
+      loadNext: ve,
+      loadThresholdPx: r.loadThresholdPx
     });
-    function ft(e) {
-      b.value = e, e ? (e.width !== void 0 && (s.value = e.width), e.height !== void 0 && (g.value = e.height), !f.value && y.value && r.value.length > 0 && Y(() => {
-        L.value = fe(h.value, s.value), ee(r.value), X();
-      })) : o.value && (s.value = o.value.clientWidth, g.value = o.value.clientHeight);
+    function ht(e) {
+      E.value = e, e ? (e.width !== void 0 && (s.value = e.width), e.height !== void 0 && (b.value = e.height), !d.value && y.value && o.value.length > 0 && J(() => {
+        $.value = fe(p.value, s.value), ae(o.value), ee();
+      })) : l.value && (s.value = l.value.clientWidth, b.value = l.value.clientHeight);
     }
-    c({
-      isLoading: p,
-      refreshLayout: ee,
+    v({
+      isLoading: h,
+      refreshLayout: ae,
       // Container dimensions (wrapper element)
       containerWidth: s,
-      containerHeight: g,
+      containerHeight: b,
       // Masonry content height (for backward compatibility, old containerHeight)
-      contentHeight: z,
+      contentHeight: B,
       // Current page
-      currentPage: N,
+      currentPage: H,
+      // End of list tracking
+      hasReachedEnd: w,
+      // Load error tracking
+      loadError: M,
       // Set fixed dimensions (overrides ResizeObserver)
-      setFixedDimensions: ft,
+      setFixedDimensions: ht,
       remove: de,
-      removeMany: mt,
-      removeAll: ht,
-      loadNext: ce,
-      loadPage: Te,
-      refreshCurrentPage: Ee,
-      reset: gt,
-      init: yt,
+      removeMany: pt,
+      removeAll: yt,
+      loadNext: ve,
+      loadPage: Ee,
+      refreshCurrentPage: Te,
+      reset: bt,
+      destroy: xt,
+      init: Mt,
       paginationHistory: x,
-      cancelLoad: Be,
-      scrollToTop: De,
-      totalItems: K(() => r.value.length),
-      currentBreakpoint: H
+      cancelLoad: Le,
+      scrollToTop: Be,
+      totalItems: Z(() => o.value.length),
+      currentBreakpoint: j
     });
-    function Ne(e) {
-      const a = Jt(e);
+    function De(e) {
+      const a = Zt(e);
       let i = 0;
       if (y.value) {
-        const { scrollTop: d, clientHeight: u } = y.value;
-        i = d + u + 100;
+        const { scrollTop: m, clientHeight: u } = y.value;
+        i = m + u + 100;
       }
-      z.value = Math.max(a, i);
+      B.value = Math.max(a, i);
     }
-    function ee(e) {
-      if (f.value) {
-        r.value = e;
+    function ae(e) {
+      if (d.value) {
+        o.value = e;
         return;
       }
       if (!y.value) return;
-      W(e, "refreshLayout");
-      const a = e.map((d, u) => ({
-        ...d,
-        originalIndex: d.originalIndex ?? u
+      ie(e, "refreshLayout");
+      const a = e.map((m, u) => ({
+        ...m,
+        originalIndex: m.originalIndex ?? u
       })), i = y.value;
-      if (b.value && b.value.width !== void 0) {
-        const d = i.style.width, u = i.style.boxSizing;
-        i.style.boxSizing = "border-box", i.style.width = `${b.value.width}px`, i.offsetWidth;
-        const R = Xe(a, i, L.value, h.value);
-        i.style.width = d, i.style.boxSizing = u, Ne(R), r.value = R;
+      if (E.value && E.value.width !== void 0) {
+        const m = i.style.width, u = i.style.boxSizing;
+        i.style.boxSizing = "border-box", i.style.width = `${E.value.width}px`, i.offsetWidth;
+        const Y = Xe(a, i, $.value, p.value);
+        i.style.width = m, i.style.boxSizing = u, De(Y), o.value = Y;
       } else {
-        const d = Xe(a, i, L.value, h.value);
-        Ne(d), r.value = d;
+        const m = Xe(a, i, $.value, p.value);
+        De(m), o.value = m;
       }
     }
-    function We(e, a) {
+    function Fe(e, a) {
       return new Promise((i) => {
-        const d = Math.max(0, e | 0), u = Date.now();
-        a(d, d);
-        const R = setInterval(() => {
-          if (q.value) {
-            clearInterval(R), i();
+        const m = Math.max(0, e | 0), u = Date.now();
+        a(m, m);
+        const Y = setInterval(() => {
+          if (V.value) {
+            clearInterval(Y), i();
             return;
           }
-          const te = Date.now() - u, ve = Math.max(0, d - te);
-          a(ve, d), ve <= 0 && (clearInterval(R), i());
+          const _ = Date.now() - u, ce = Math.max(0, m - _);
+          a(ce, m), ce <= 0 && (clearInterval(Y), i());
         }, 100);
       });
     }
-    async function we(e) {
+    async function be(e) {
       try {
-        const a = await dt(() => l.getNextPage(e));
-        return ee([...r.value, ...a.items]), a;
+        const a = await gt(() => r.getNextPage(e));
+        return ae([...o.value, ...a.items]), a;
       } catch (a) {
         throw console.error("Error in getContent:", a), a;
       }
     }
-    async function dt(e) {
+    async function gt(e) {
       let a = 0;
-      const i = l.retryMaxAttempts;
-      let d = l.retryInitialDelayMs;
+      const i = r.retryMaxAttempts;
+      let m = r.retryInitialDelayMs;
       for (; ; )
         try {
           const u = await e();
-          return a > 0 && m("retry:stop", { attempt: a, success: !0 }), u;
+          return a > 0 && g("retry:stop", { attempt: a, success: !0 }), u;
         } catch (u) {
           if (a++, a > i)
-            throw m("retry:stop", { attempt: a - 1, success: !1 }), u;
-          m("retry:start", { attempt: a, max: i, totalMs: d }), await We(d, (R, te) => {
-            m("retry:tick", { attempt: a, remainingMs: R, totalMs: te });
-          }), d += l.retryBackoffStepMs;
+            throw g("retry:stop", { attempt: a - 1, success: !1 }), u;
+          g("retry:start", { attempt: a, max: i, totalMs: m }), await Fe(m, (Y, _) => {
+            g("retry:tick", { attempt: a, remainingMs: Y, totalMs: _ });
+          }), m += r.retryBackoffStepMs;
         }
     }
-    async function Te(e) {
-      if (!p.value) {
-        q.value = !1, p.value = !0;
+    async function Ee(e) {
+      if (!h.value) {
+        V.value = !1, h.value = !0, w.value = !1, M.value = null;
         try {
-          const a = r.value.length;
-          if (q.value) return;
-          const i = await we(e);
-          return q.value ? void 0 : (N.value = e, x.value.push(i.nextPage), await me(a), i);
+          const a = o.value.length;
+          if (V.value) return;
+          const i = await be(e);
+          return V.value ? void 0 : (M.value = null, H.value = e, x.value.push(i.nextPage), i.nextPage == null && (w.value = !0), await he(a), i);
         } catch (a) {
-          throw console.error("Error loading page:", a), a;
+          throw console.error("Error loading page:", a), M.value = a instanceof Error ? a : new Error(String(a)), a;
         } finally {
-          p.value = !1;
+          h.value = !1;
         }
       }
     }
-    async function ce() {
-      if (!p.value) {
-        q.value = !1, p.value = !0;
+    async function ve() {
+      if (!h.value && !w.value) {
+        V.value = !1, h.value = !0, M.value = null;
         try {
-          const e = r.value.length;
-          if (q.value) return;
-          const a = x.value[x.value.length - 1], i = await we(a);
-          return q.value ? void 0 : (N.value = a, x.value.push(i.nextPage), await me(e), i);
+          const e = o.value.length;
+          if (V.value) return;
+          const a = x.value[x.value.length - 1];
+          if (a == null) {
+            w.value = !0, h.value = !1;
+            return;
+          }
+          const i = await be(a);
+          return V.value ? void 0 : (M.value = null, H.value = a, x.value.push(i.nextPage), i.nextPage == null && (w.value = !0), await he(e), i);
         } catch (e) {
-          throw console.error("Error loading next page:", e), e;
+          throw console.error("Error loading next page:", e), M.value = e instanceof Error ? e : new Error(String(e)), e;
         } finally {
-          p.value = !1;
+          h.value = !1;
         }
       }
     }
-    async function Ee() {
-      if (!p.value) {
-        q.value = !1, p.value = !0;
+    async function Te() {
+      if (!h.value) {
+        V.value = !1, h.value = !0;
         try {
-          const e = N.value;
+          const e = H.value;
           if (e == null) {
-            console.warn("[Masonry] No current page to refresh - currentPage:", N.value, "paginationHistory:", x.value);
+            console.warn("[Masonry] No current page to refresh - currentPage:", H.value, "paginationHistory:", x.value);
             return;
           }
-          r.value = [], z.value = 0, x.value = [e], await Y();
-          const a = await we(e);
-          if (q.value) return;
-          N.value = e, x.value.push(a.nextPage);
-          const i = r.value.length;
-          return await me(i), a;
+          o.value = [], B.value = 0, w.value = !1, M.value = null, x.value = [e], await J();
+          const a = await be(e);
+          if (V.value) return;
+          M.value = null, H.value = e, x.value.push(a.nextPage), a.nextPage == null && (w.value = !0);
+          const i = o.value.length;
+          return await he(i), a;
         } catch (e) {
-          throw console.error("[Masonry] Error refreshing current page:", e), e;
+          throw console.error("[Masonry] Error refreshing current page:", e), M.value = e instanceof Error ? e : new Error(String(e)), e;
         } finally {
-          p.value = !1;
+          h.value = !1;
         }
       }
     }
     async function de(e) {
-      const a = r.value.filter((i) => i.id !== e.id);
-      if (r.value = a, await Y(), a.length === 0 && x.value.length > 0) {
-        if (l.autoRefreshOnEmpty)
-          await Ee();
+      const a = o.value.filter((i) => i.id !== e.id);
+      if (o.value = a, await J(), a.length === 0 && x.value.length > 0) {
+        if (r.autoRefreshOnEmpty)
+          await Te();
         else
           try {
-            await ce(), await me(0, !0);
+            await ve(), await he(0, !0);
           } catch {
           }
         return;
       }
       await new Promise((i) => requestAnimationFrame(() => i())), requestAnimationFrame(() => {
-        ee(a);
+        ae(a);
       });
     }
-    async function mt(e) {
+    async function pt(e) {
       if (!e || e.length === 0) return;
-      const a = new Set(e.map((d) => d.id)), i = r.value.filter((d) => !a.has(d.id));
-      if (r.value = i, await Y(), i.length === 0 && x.value.length > 0) {
-        if (l.autoRefreshOnEmpty)
-          await Ee();
+      const a = new Set(e.map((m) => m.id)), i = o.value.filter((m) => !a.has(m.id));
+      if (o.value = i, await J(), i.length === 0 && x.value.length > 0) {
+        if (r.autoRefreshOnEmpty)
+          await Te();
         else
           try {
-            await ce(), await me(0, !0);
+            await ve(), await he(0, !0);
           } catch {
           }
         return;
       }
-      await new Promise((d) => requestAnimationFrame(() => d())), requestAnimationFrame(() => {
-        ee(i);
+      await new Promise((m) => requestAnimationFrame(() => m())), requestAnimationFrame(() => {
+        ae(i);
       });
     }
-    function De(e) {
+    function Be(e) {
       y.value && y.value.scrollTo({
         top: 0,
         behavior: (e == null ? void 0 : e.behavior) ?? "smooth",
         ...e
       });
     }
-    async function ht() {
-      De({ behavior: "smooth" }), r.value = [], g.value = 0, await Y(), m("remove-all:complete");
+    async function yt() {
+      Be({ behavior: "smooth" }), o.value = [], b.value = 0, await J(), g("remove-all:complete");
     }
-    function pt() {
-      L.value = fe(h.value, s.value), ee(r.value), y.value && (U.value = y.value.scrollTop, _.value = y.value.clientHeight);
+    function wt() {
+      $.value = fe(p.value, s.value), ae(o.value), y.value && (k.value = y.value.scrollTop, z.value = y.value.clientHeight);
     }
-    let be = !1;
-    const q = T(!1);
-    async function me(e, a = !1) {
-      if (!a && !l.backfillEnabled || be || q.value) return;
-      const i = (e || 0) + (l.pageSize || 0);
-      if (!(!l.pageSize || l.pageSize <= 0 || x.value[x.value.length - 1] == null) && !(r.value.length >= i)) {
-        be = !0;
+    let me = !1;
+    const V = T(!1);
+    async function he(e, a = !1) {
+      if (!a && !r.backfillEnabled || me || V.value || w.value) return;
+      const i = (e || 0) + (r.pageSize || 0);
+      if (!r.pageSize || r.pageSize <= 0) return;
+      if (x.value[x.value.length - 1] == null) {
+        w.value = !0;
+        return;
+      }
+      if (!(o.value.length >= i)) {
+        me = !0;
         try {
           let u = 0;
-          for (m("backfill:start", { target: i, fetched: r.value.length, calls: u }); r.value.length < i && u < l.backfillMaxCalls && x.value[x.value.length - 1] != null && !q.value && (await We(l.backfillDelayMs, (te, ve) => {
-            m("backfill:tick", {
-              fetched: r.value.length,
+          for (g("backfill:start", { target: i, fetched: o.value.length, calls: u }); o.value.length < i && u < r.backfillMaxCalls && x.value[x.value.length - 1] != null && !V.value && !w.value && (await Fe(r.backfillDelayMs, (_, ce) => {
+            g("backfill:tick", {
+              fetched: o.value.length,
               target: i,
               calls: u,
-              remainingMs: te,
-              totalMs: ve
+              remainingMs: _,
+              totalMs: ce
             });
-          }), !q.value); ) {
-            const R = x.value[x.value.length - 1];
+          }), !V.value); ) {
+            const Y = x.value[x.value.length - 1];
+            if (Y == null) {
+              w.value = !0;
+              break;
+            }
             try {
-              p.value = !0;
-              const te = await we(R);
-              if (q.value) break;
-              x.value.push(te.nextPage);
+              h.value = !0;
+              const _ = await be(Y);
+              if (V.value) break;
+              M.value = null, x.value.push(_.nextPage), _.nextPage == null && (w.value = !0);
+            } catch (_) {
+              M.value = _ instanceof Error ? _ : new Error(String(_));
             } finally {
-              p.value = !1;
+              h.value = !1;
             }
             u++;
           }
-          m("backfill:stop", { fetched: r.value.length, calls: u });
+          g("backfill:stop", { fetched: o.value.length, calls: u });
         } finally {
-          be = !1;
+          me = !1;
         }
       }
     }
-    function Be() {
-      q.value = !0, p.value = !1, be = !1;
+    function Le() {
+      V.value = !0, h.value = !1, me = !1;
     }
-    function gt() {
-      Be(), q.value = !1, y.value && y.value.scrollTo({
+    function bt() {
+      Le(), V.value = !1, y.value && y.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), r.value = [], g.value = 0, N.value = l.loadAtPage, x.value = [l.loadAtPage], G.value = {
+      }), o.value = [], b.value = 0, H.value = r.loadAtPage, x.value = [r.loadAtPage], w.value = !1, M.value = null, X.value = {
         distanceToTrigger: 0,
         isNearTrigger: !1
       };
     }
-    const re = Qe(async () => {
-      if (f.value) return;
-      y.value && (U.value = y.value.scrollTop, _.value = y.value.clientHeight), B.value = !0, await Y(), await new Promise((a) => requestAnimationFrame(() => a())), B.value = !1;
-      const e = $e(r.value, L.value);
-      vt(e), X(e);
-    }, 200), ze = Qe(pt, 200);
-    function Fe(e) {
-      f.value && (n.value = !0, w.value = e.touches[0].clientY, F.value = S.value, e.preventDefault());
+    function xt() {
+      Le(), o.value = [], B.value = 0, H.value = null, x.value = [], w.value = !1, M.value = null, h.value = !1, me = !1, V.value = !1, n.value = 0, f.value = 0, P.value = !1, k.value = 0, z.value = 0, G.value = !1, X.value = {
+        distanceToTrigger: 0,
+        isNearTrigger: !1
+      }, N.value.clear(), y.value && y.value.scrollTo({
+        top: 0,
+        behavior: "auto"
+        // Instant scroll for destroy
+      });
     }
+    const se = Ze(async () => {
+      if (d.value) return;
+      y.value && (k.value = y.value.scrollTop, z.value = y.value.clientHeight), G.value = !0, await J(), await new Promise((a) => requestAnimationFrame(() => a())), G.value = !1;
+      const e = We(o.value, $.value);
+      mt(e), ee(e);
+    }, 200), ze = Ze(wt, 200);
     function Ae(e) {
-      if (!f.value || !n.value) return;
-      const a = e.touches[0].clientY - w.value;
-      S.value = F.value + a, e.preventDefault();
+      d.value && (P.value = !0, A.value = e.touches[0].clientY, U.value = f.value, e.preventDefault());
     }
     function Oe(e) {
-      if (!f.value || !n.value) return;
-      n.value = !1;
-      const a = S.value - F.value;
-      Math.abs(a) > 100 ? a > 0 && O.value ? Ce() : a < 0 && A.value ? je() : ne() : ne(), e.preventDefault();
+      if (!d.value || !P.value) return;
+      const a = e.touches[0].clientY - A.value;
+      f.value = U.value + a, e.preventDefault();
     }
     function Re(e) {
-      f.value && (n.value = !0, w.value = e.clientY, F.value = S.value, e.preventDefault());
+      if (!d.value || !P.value) return;
+      P.value = !1;
+      const a = f.value - U.value;
+      Math.abs(a) > 100 ? a > 0 && q.value ? Ye() : a < 0 && R.value ? Ce() : le() : le(), e.preventDefault();
     }
-    function Le(e) {
-      if (!f.value || !n.value) return;
-      const a = e.clientY - w.value;
-      S.value = F.value + a, e.preventDefault();
+    function je(e) {
+      d.value && (P.value = !0, A.value = e.clientY, U.value = f.value, e.preventDefault());
+    }
+    function ke(e) {
+      if (!d.value || !P.value) return;
+      const a = e.clientY - A.value;
+      f.value = U.value + a, e.preventDefault();
     }
     function Ie(e) {
-      if (!f.value || !n.value) return;
-      n.value = !1;
-      const a = S.value - F.value;
-      Math.abs(a) > 100 ? a > 0 && O.value ? Ce() : a < 0 && A.value ? je() : ne() : ne(), e.preventDefault();
+      if (!d.value || !P.value) return;
+      P.value = !1;
+      const a = f.value - U.value;
+      Math.abs(a) > 100 ? a > 0 && q.value ? Ye() : a < 0 && R.value ? Ce() : le() : le(), e.preventDefault();
     }
-    function je() {
-      if (!A.value) {
-        ce();
+    function Ce() {
+      if (!R.value) {
+        ve();
         return;
       }
-      I.value++, ne(), I.value >= r.value.length - 5 && ce();
+      n.value++, le(), n.value >= o.value.length - 5 && ve();
     }
-    function Ce() {
-      O.value && (I.value--, ne());
+    function Ye() {
+      q.value && (n.value--, le());
     }
-    function ne() {
-      if (!$.value) return;
-      const e = $.value.clientHeight;
-      S.value = -I.value * e;
+    function le() {
+      if (!C.value) return;
+      const e = C.value.clientHeight;
+      f.value = -n.value * e;
     }
     function qe() {
-      !f.value && I.value > 0 && (I.value = 0, S.value = 0), f.value && r.value.length === 0 && !p.value && Te(x.value[0]), f.value && ne();
+      !d.value && n.value > 0 && (n.value = 0, f.value = 0), d.value && o.value.length === 0 && !h.value && Ee(x.value[0]), d.value && le();
     }
-    function yt(e, a, i) {
-      N.value = a, x.value = [a], x.value.push(i), W(e, "init"), f.value ? (r.value = [...r.value, ...e], I.value === 0 && r.value.length > 0 && (S.value = 0)) : (ee([...r.value, ...e]), X());
+    function Mt(e, a, i) {
+      H.value = a, x.value = [a], x.value.push(i), w.value = i == null, ie(e, "init"), d.value ? (o.value = [...o.value, ...e], n.value === 0 && o.value.length > 0 && (f.value = 0)) : (ae([...o.value, ...e]), ee());
     }
-    return oe(
-      h,
+    return re(
+      p,
       () => {
-        f.value || y.value && (L.value = fe(h.value, s.value), ee(r.value));
+        d.value || y.value && ($.value = fe(p.value, s.value), ae(o.value));
       },
       { deep: !0 }
-    ), oe(() => l.layoutMode, () => {
-      b.value && b.value.width !== void 0 ? s.value = b.value.width : o.value && (s.value = o.value.clientWidth);
-    }), oe(y, (e) => {
-      e && !f.value ? (e.removeEventListener("scroll", re), e.addEventListener("scroll", re, { passive: !0 })) : e && e.removeEventListener("scroll", re);
-    }, { immediate: !0 }), oe(f, (e, a) => {
-      a === void 0 && e === !1 || Y(() => {
-        e ? (document.addEventListener("mousemove", Le), document.addEventListener("mouseup", Ie), y.value && y.value.removeEventListener("scroll", re), I.value = 0, S.value = 0, r.value.length > 0 && ne()) : (document.removeEventListener("mousemove", Le), document.removeEventListener("mouseup", Ie), y.value && o.value && (b.value && b.value.width !== void 0 ? s.value = b.value.width : s.value = o.value.clientWidth, y.value.removeEventListener("scroll", re), y.value.addEventListener("scroll", re, { passive: !0 }), r.value.length > 0 && (L.value = fe(h.value, s.value), ee(r.value), U.value = y.value.scrollTop, _.value = y.value.clientHeight, X())));
+    ), re(() => r.layoutMode, () => {
+      E.value && E.value.width !== void 0 ? s.value = E.value.width : l.value && (s.value = l.value.clientWidth);
+    }), re(y, (e) => {
+      e && !d.value ? (e.removeEventListener("scroll", se), e.addEventListener("scroll", se, { passive: !0 })) : e && e.removeEventListener("scroll", se);
+    }, { immediate: !0 }), re(d, (e, a) => {
+      a === void 0 && e === !1 || J(() => {
+        e ? (document.addEventListener("mousemove", ke), document.addEventListener("mouseup", Ie), y.value && y.value.removeEventListener("scroll", se), n.value = 0, f.value = 0, o.value.length > 0 && le()) : (document.removeEventListener("mousemove", ke), document.removeEventListener("mouseup", Ie), y.value && l.value && (E.value && E.value.width !== void 0 ? s.value = E.value.width : s.value = l.value.clientWidth, y.value.removeEventListener("scroll", se), y.value.addEventListener("scroll", se, { passive: !0 }), o.value.length > 0 && ($.value = fe(p.value, s.value), ae(o.value), k.value = y.value.scrollTop, z.value = y.value.clientHeight, ee())));
       });
-    }, { immediate: !0 }), oe($, (e) => {
-      e && (e.addEventListener("touchstart", Fe, { passive: !1 }), e.addEventListener("touchmove", Ae, { passive: !1 }), e.addEventListener("touchend", Oe), e.addEventListener("mousedown", Re));
-    }), oe(() => r.value.length, (e, a) => {
-      f.value && e > 0 && a === 0 && (I.value = 0, Y(() => ne()));
-    }), oe(o, (e) => {
-      k && (k.disconnect(), k = null), e && typeof ResizeObserver < "u" ? (k = new ResizeObserver((a) => {
-        if (!b.value)
+    }, { immediate: !0 }), re(C, (e) => {
+      e && (e.addEventListener("touchstart", Ae, { passive: !1 }), e.addEventListener("touchmove", Oe, { passive: !1 }), e.addEventListener("touchend", Re), e.addEventListener("mousedown", je));
+    }), re(() => o.value.length, (e, a) => {
+      d.value && e > 0 && a === 0 && (n.value = 0, J(() => le()));
+    }), re(l, (e) => {
+      S && (S.disconnect(), S = null), e && typeof ResizeObserver < "u" ? (S = new ResizeObserver((a) => {
+        if (!E.value)
           for (const i of a) {
-            const d = i.contentRect.width, u = i.contentRect.height;
-            s.value !== d && (s.value = d), g.value !== u && (g.value = u);
+            const m = i.contentRect.width, u = i.contentRect.height;
+            s.value !== m && (s.value = m), b.value !== u && (b.value = u);
           }
-      }), k.observe(e), b.value || (s.value = e.clientWidth, g.value = e.clientHeight)) : e && (b.value || (s.value = e.clientWidth, g.value = e.clientHeight));
-    }, { immediate: !0 }), oe(s, (e, a) => {
-      e !== a && e > 0 && !f.value && y.value && r.value.length > 0 && Y(() => {
-        L.value = fe(h.value, e), ee(r.value), X();
+      }), S.observe(e), E.value || (s.value = e.clientWidth, b.value = e.clientHeight)) : e && (E.value || (s.value = e.clientWidth, b.value = e.clientHeight));
+    }, { immediate: !0 }), re(s, (e, a) => {
+      e !== a && e > 0 && !d.value && y.value && o.value.length > 0 && J(() => {
+        $.value = fe(p.value, e), ae(o.value), ee();
       });
-    }), tt(async () => {
+    }), at(async () => {
       try {
-        await Y(), o.value && !k && (s.value = o.value.clientWidth, g.value = o.value.clientHeight), f.value || (L.value = fe(h.value, s.value), y.value && (U.value = y.value.scrollTop, _.value = y.value.clientHeight));
-        const e = l.loadAtPage;
-        x.value = [e], l.skipInitialLoad || await Te(x.value[0]), f.value ? Y(() => ne()) : X();
+        await J(), l.value && !S && (s.value = l.value.clientWidth, b.value = l.value.clientHeight), d.value || ($.value = fe(p.value, s.value), y.value && (k.value = y.value.scrollTop, z.value = y.value.clientHeight));
+        const e = r.loadAtPage;
+        x.value = [e], r.skipInitialLoad || await Ee(x.value[0]), d.value ? J(() => le()) : ee();
       } catch (e) {
-        console.error("Error during component initialization:", e), p.value = !1;
+        console.error("Error during component initialization:", e), h.value = !1;
       }
       window.addEventListener("resize", ze), window.addEventListener("resize", qe);
-    }), at(() => {
+    }), nt(() => {
       var e;
-      k && (k.disconnect(), k = null), (e = y.value) == null || e.removeEventListener("scroll", re), window.removeEventListener("resize", ze), window.removeEventListener("resize", qe), $.value && ($.value.removeEventListener("touchstart", Fe), $.value.removeEventListener("touchmove", Ae), $.value.removeEventListener("touchend", Oe), $.value.removeEventListener("mousedown", Re)), document.removeEventListener("mousemove", Le), document.removeEventListener("mouseup", Ie);
-    }), (e, a) => (C(), j("div", {
+      S && (S.disconnect(), S = null), (e = y.value) == null || e.removeEventListener("scroll", se), window.removeEventListener("resize", ze), window.removeEventListener("resize", qe), C.value && (C.value.removeEventListener("touchstart", Ae), C.value.removeEventListener("touchmove", Oe), C.value.removeEventListener("touchend", Re), C.value.removeEventListener("mousedown", je)), document.removeEventListener("mousemove", ke), document.removeEventListener("mouseup", Ie);
+    }), (e, a) => (F(), D("div", {
       ref_key: "wrapper",
-      ref: o,
+      ref: l,
       class: "w-full h-full flex flex-col relative"
     }, [
-      f.value ? (C(), j("div", {
+      d.value ? (F(), D("div", {
         key: 0,
-        class: se(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": l.forceMotion, "cursor-grab": !n.value, "cursor-grabbing": n.value }]),
+        class: ue(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": r.forceMotion, "cursor-grab": !P.value, "cursor-grabbing": P.value }]),
         ref_key: "swipeContainer",
-        ref: $,
+        ref: C,
         style: { height: "100%", "max-height": "100%", position: "relative" }
       }, [
-        V("div", {
+        O("div", {
           class: "relative w-full",
-          style: ye({
-            transform: `translateY(${S.value}px)`,
-            transition: n.value ? "none" : `transform ${t.transitionDurationMs}ms ${t.transitionEasing}`,
-            height: `${r.value.length * 100}%`
+          style: we({
+            transform: `translateY(${f.value}px)`,
+            transition: P.value ? "none" : `transform ${t.transitionDurationMs}ms ${t.transitionEasing}`,
+            height: `${o.value.length * 100}%`
           })
         }, [
-          (C(!0), j(Ue, null, Ge(r.value, (i, d) => (C(), j("div", {
+          (F(!0), D(Ue, null, Ge(o.value, (i, m) => (F(), D("div", {
             key: `${i.page}-${i.id}`,
             class: "absolute top-0 left-0 w-full",
-            style: ye({
-              top: `${d * (100 / r.value.length)}%`,
-              height: `${100 / r.value.length}%`
+            style: we({
+              top: `${m * (100 / o.value.length)}%`,
+              height: `${100 / o.value.length}%`
             })
           }, [
-            V("div", ca, [
-              V("div", va, [
-                le(e.$slots, "default", {
+            O("div", da, [
+              O("div", ma, [
+                Q(e.$slots, "default", {
                   item: i,
                   remove: de
                 }, () => [
-                  ke(Me, {
+                  $e(Me, {
                     item: i,
                     remove: de,
-                    "header-height": h.value.header,
-                    "footer-height": h.value.footer,
+                    "header-height": p.value.header,
+                    "footer-height": p.value.footer,
                     "in-swipe-mode": !0,
-                    "is-active": d === I.value,
-                    "onPreload:success": a[0] || (a[0] = (u) => m("item:preload:success", u)),
-                    "onPreload:error": a[1] || (a[1] = (u) => m("item:preload:error", u)),
-                    onMouseEnter: a[2] || (a[2] = (u) => m("item:mouse-enter", u)),
-                    onMouseLeave: a[3] || (a[3] = (u) => m("item:mouse-leave", u))
+                    "is-active": m === n.value,
+                    "onPreload:success": a[0] || (a[0] = (u) => g("item:preload:success", u)),
+                    "onPreload:error": a[1] || (a[1] = (u) => g("item:preload:error", u)),
+                    onMouseEnter: a[2] || (a[2] = (u) => g("item:mouse-enter", u)),
+                    onMouseLeave: a[3] || (a[3] = (u) => g("item:mouse-leave", u))
                   }, {
-                    header: he((u) => [
-                      le(e.$slots, "item-header", pe({ ref_for: !0 }, u), void 0, !0)
+                    header: ge((u) => [
+                      Q(e.$slots, "item-header", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
-                    footer: he((u) => [
-                      le(e.$slots, "item-footer", pe({ ref_for: !0 }, u), void 0, !0)
+                    footer: ge((u) => [
+                      Q(e.$slots, "item-footer", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "header-height", "footer-height", "is-active"])
@@ -1249,52 +1292,62 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
               ])
             ])
           ], 4))), 128))
-        ], 4)
-      ], 2)) : (C(), j("div", {
+        ], 4),
+        w.value && o.value.length > 0 ? (F(), D("div", ha, [
+          Q(e.$slots, "end-message", {}, () => [
+            a[8] || (a[8] = O("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
+          ], !0)
+        ])) : ne("", !0),
+        M.value && o.value.length > 0 ? (F(), D("div", ga, [
+          Q(e.$slots, "error-message", { error: M.value }, () => [
+            O("p", pa, "Failed to load content: " + He(M.value.message), 1)
+          ], !0)
+        ])) : ne("", !0)
+      ], 2)) : (F(), D("div", {
         key: 1,
-        class: se(["overflow-auto w-full flex-1 masonry-container", { "force-motion": l.forceMotion }]),
+        class: ue(["overflow-auto w-full flex-1 masonry-container", { "force-motion": r.forceMotion }]),
         ref_key: "container",
         ref: y
       }, [
-        V("div", {
+        O("div", {
           class: "relative",
-          style: ye({ height: `${z.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
+          style: we({ height: `${B.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
         }, [
-          ke(xt, {
+          $e(Tt, {
             name: "masonry",
             css: !1,
-            onEnter: rt,
-            onBeforeEnter: it,
-            onLeave: ut,
-            onBeforeLeave: st
+            onEnter: ut,
+            onBeforeEnter: vt,
+            onLeave: ft,
+            onBeforeLeave: ct
           }, {
-            default: he(() => [
-              (C(!0), j(Ue, null, Ge(ct.value, (i, d) => (C(), j("div", pe({
+            default: ge(() => [
+              (F(!0), D(Ue, null, Ge(dt.value, (i, m) => (F(), D("div", pe({
                 key: `${i.page}-${i.id}`,
                 class: "absolute masonry-item",
                 ref_for: !0
-              }, Mt(Qt)(i, d)), [
-                le(e.$slots, "default", {
+              }, Lt(ta)(i, m)), [
+                Q(e.$slots, "default", {
                   item: i,
                   remove: de
                 }, () => [
-                  ke(Me, {
+                  $e(Me, {
                     item: i,
                     remove: de,
-                    "header-height": h.value.header,
-                    "footer-height": h.value.footer,
+                    "header-height": p.value.header,
+                    "footer-height": p.value.footer,
                     "in-swipe-mode": !1,
                     "is-active": !1,
-                    "onPreload:success": a[4] || (a[4] = (u) => m("item:preload:success", u)),
-                    "onPreload:error": a[5] || (a[5] = (u) => m("item:preload:error", u)),
-                    onMouseEnter: a[6] || (a[6] = (u) => m("item:mouse-enter", u)),
-                    onMouseLeave: a[7] || (a[7] = (u) => m("item:mouse-leave", u))
+                    "onPreload:success": a[4] || (a[4] = (u) => g("item:preload:success", u)),
+                    "onPreload:error": a[5] || (a[5] = (u) => g("item:preload:error", u)),
+                    onMouseEnter: a[6] || (a[6] = (u) => g("item:mouse-enter", u)),
+                    onMouseLeave: a[7] || (a[7] = (u) => g("item:mouse-leave", u))
                   }, {
-                    header: he((u) => [
-                      le(e.$slots, "item-header", pe({ ref_for: !0 }, u), void 0, !0)
+                    header: ge((u) => [
+                      Q(e.$slots, "item-header", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
-                    footer: he((u) => [
-                      le(e.$slots, "item-footer", pe({ ref_for: !0 }, u), void 0, !0)
+                    footer: ge((u) => [
+                      Q(e.$slots, "item-footer", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "header-height", "footer-height"])
@@ -1303,22 +1356,32 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
             ]),
             _: 3
           })
-        ], 4)
+        ], 4),
+        w.value && o.value.length > 0 ? (F(), D("div", ya, [
+          Q(e.$slots, "end-message", {}, () => [
+            a[9] || (a[9] = O("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
+          ], !0)
+        ])) : ne("", !0),
+        M.value && o.value.length > 0 ? (F(), D("div", wa, [
+          Q(e.$slots, "error-message", { error: M.value }, () => [
+            O("p", ba, "Failed to load content: " + He(M.value.message), 1)
+          ], !0)
+        ])) : ne("", !0)
       ], 2))
     ], 512));
   }
-}), da = (t, c) => {
-  const v = t.__vccOpts || t;
-  for (const [l, M] of c)
-    v[l] = M;
-  return v;
-}, Ze = /* @__PURE__ */ da(fa, [["__scopeId", "data-v-ce6222b3"]]), ha = {
+}), Ma = (t, v) => {
+  const c = t.__vccOpts || t;
+  for (const [r, L] of v)
+    c[r] = L;
+  return c;
+}, et = /* @__PURE__ */ Ma(xa, [["__scopeId", "data-v-01598521"]]), Ta = {
   install(t) {
-    t.component("WyxosMasonry", Ze), t.component("WMasonry", Ze), t.component("WyxosMasonryItem", Me), t.component("WMasonryItem", Me);
+    t.component("WyxosMasonry", et), t.component("WMasonry", et), t.component("WyxosMasonryItem", Me), t.component("WMasonryItem", Me);
   }
 };
 export {
-  Ze as Masonry,
+  et as Masonry,
   Me as MasonryItem,
-  ha as default
+  Ta as default
 };