npm - @wyxos/vibe - Versions diffs - 1.6.27 → 1.6.28 - Mend

@wyxos/vibe 1.6.27 → 1.6.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/lib/index.js +922 -893
package/lib/vibe.css +1 -1
package/package.json +1 -1
package/src/Masonry.vue +1020 -1008
package/src/components/MasonryItem.vue +4 -6
package/src/createMasonryTransitions.ts +18 -27
package/src/types.ts +101 -38
package/src/useMasonryItems.ts +231 -234
package/src/useMasonryLayout.ts +164 -164
package/src/useMasonryPagination.ts +83 -19
package/src/useMasonryVirtualization.ts +1 -1
package/src/views/Home.vue +2 -2

package/lib/index.js CHANGED Viewed

@@ -1,22 +1,22 @@
-import { nextTick as X, ref as W, computed as K, defineComponent as _e, onMounted as Xe, onUnmounted as Ge, watch as ee, createElementBlock as q, openBlock as Y, createCommentVNode as te, createElementVNode as U, normalizeStyle as he, renderSlot as J, normalizeClass as re, withModifiers as Ae, toDisplayString as Pe, unref as G, Fragment as Re, renderList as Oe, createVNode as Se, withCtx as ve, mergeProps as fe, TransitionGroup as It } from "vue";
+import { nextTick as C, ref as F, computed as Q, defineComponent as Xe, onMounted as Ge, onUnmounted as qe, watch as te, createElementBlock as U, openBlock as _, createCommentVNode as ae, createElementVNode as G, normalizeStyle as he, renderSlot as J, normalizeClass as ie, withModifiers as Re, toDisplayString as Ee, unref as q, Fragment as Ce, renderList as Oe, createVNode as Le, withCtx as ve, mergeProps as fe, TransitionGroup as Pt } from "vue";
 let ke = null;
-function Lt() {
+function It() {
   if (ke != null) return ke;
   const e = document.createElement("div");
   e.style.visibility = "hidden", e.style.overflow = "scroll", e.style.msOverflowStyle = "scrollbar", e.style.width = "100px", e.style.height = "100px", document.body.appendChild(e);
-  const n = document.createElement("div");
-  n.style.width = "100%", e.appendChild(n);
-  const i = e.offsetWidth - n.offsetWidth;
+  const l = document.createElement("div");
+  l.style.width = "100%", e.appendChild(l);
+  const i = e.offsetWidth - l.offsetWidth;
   return document.body.removeChild(e), ke = i, i;
 }
-function Ce(e, n, i, a = {}) {
+function Ae(e, l, i, a = {}) {
   const {
-    gutterX: m = 0,
+    gutterX: g = 0,
     gutterY: d = 0,
-    header: f = 0,
+    header: v = 0,
     footer: o = 0,
-    paddingLeft: c = 0,
-    paddingRight: y = 0,
+    paddingLeft: s = 0,
+    paddingRight: w = 0,
     sizes: t = {
       base: 1,
       sm: 2,
@@ -25,190 +25,190 @@ function Ce(e, n, i, a = {}) {
       xl: 5,
       "2xl": 6
     },
-    placement: w = "masonry"
+    placement: x = "masonry"
   } = a;
-  let T = 0, p = 0;
+  let T = 0, y = 0;
   try {
-    if (n && n.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const k = window.getComputedStyle(n);
-      T = parseFloat(k.paddingLeft) || 0, p = parseFloat(k.paddingRight) || 0;
+    if (l && l.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
+      const k = window.getComputedStyle(l);
+      T = parseFloat(k.paddingLeft) || 0, y = parseFloat(k.paddingRight) || 0;
     }
   } catch {
   }
-  const h = (c || 0) + T, I = (y || 0) + p, S = n.offsetWidth - n.clientWidth, v = S > 0 ? S + 2 : Lt() + 2, r = n.offsetWidth - v - h - I, s = m * (i - 1), L = Math.floor((r - s) / i), M = e.map((k) => {
-    const N = k.width, A = k.height;
-    return Math.round(L * A / N) + o + f;
+  const h = (s || 0) + T, P = (w || 0) + y, I = l.offsetWidth - l.clientWidth, f = I > 0 ? I + 2 : It() + 2, r = l.offsetWidth - f - h - P, u = g * (i - 1), L = Math.floor((r - u) / i), M = e.map((k) => {
+    const B = k.width, R = k.height;
+    return Math.round(L * R / B) + o + v;
   });
-  if (w === "sequential-balanced") {
+  if (x === "sequential-balanced") {
     const k = M.length;
     if (k === 0) return [];
-    const N = (b, H, R) => b + (H > 0 ? d : 0) + R;
-    let A = Math.max(...M), P = M.reduce((b, H) => b + H, 0) + d * Math.max(0, k - 1);
-    const z = (b) => {
-      let H = 1, R = 0, ne = 0;
-      for (let _ = 0; _ < k; _++) {
-        const ie = M[_], Q = N(R, ne, ie);
-        if (Q <= b)
-          R = Q, ne++;
-        else if (H++, R = ie, ne = 1, ie > b || H > i) return !1;
+    const B = (b, E, O) => b + (E > 0 ? d : 0) + O;
+    let R = Math.max(...M), $ = M.reduce((b, E) => b + E, 0) + d * Math.max(0, k - 1);
+    const W = (b) => {
+      let E = 1, O = 0, ne = 0;
+      for (let X = 0; X < k; X++) {
+        const Z = M[X], K = B(O, ne, Z);
+        if (K <= b)
+          O = K, ne++;
+        else if (E++, O = Z, ne = 1, Z > b || E > i) return !1;
       }
-      return H <= i;
+      return E <= i;
     };
-    for (; A < P; ) {
-      const b = Math.floor((A + P) / 2);
-      z(b) ? P = b : A = b + 1;
+    for (; R < $; ) {
+      const b = Math.floor((R + $) / 2);
+      W(b) ? $ = b : R = b + 1;
     }
-    const F = P, l = new Array(i).fill(0);
-    let x = i - 1, E = 0, D = 0;
+    const H = $, n = new Array(i).fill(0);
+    let p = i - 1, S = 0, z = 0;
     for (let b = k - 1; b >= 0; b--) {
-      const H = M[b], R = b < x;
-      !(N(E, D, H) <= F) || R ? (l[x] = b + 1, x--, E = H, D = 1) : (E = N(E, D, H), D++);
+      const E = M[b], O = b < p;
+      !(B(S, z, E) <= H) || O ? (n[p] = b + 1, p--, S = E, z = 1) : (S = B(S, z, E), z++);
     }
-    l[0] = 0;
-    const V = [], C = new Array(i).fill(0);
+    n[0] = 0;
+    const V = [], Y = new Array(i).fill(0);
     for (let b = 0; b < i; b++) {
-      const H = l[b], R = b + 1 < i ? l[b + 1] : k, ne = b * (L + m);
-      for (let _ = H; _ < R; _++) {
-        const Q = {
-          ...e[_],
+      const E = n[b], O = b + 1 < i ? n[b + 1] : k, ne = b * (L + g);
+      for (let X = E; X < O; X++) {
+        const K = {
+          ...e[X],
           columnWidth: L,
           imageHeight: 0,
           columnHeight: 0,
           left: 0,
           top: 0
         };
-        Q.imageHeight = M[_] - (o + f), Q.columnHeight = M[_], Q.left = ne, Q.top = C[b], C[b] += Q.columnHeight + (_ + 1 < R ? d : 0), V.push(Q);
+        K.imageHeight = M[X] - (o + v), K.columnHeight = M[X], K.left = ne, K.top = Y[b], Y[b] += K.columnHeight + (X + 1 < O ? d : 0), V.push(K);
       }
     }
     return V;
   }
-  const g = new Array(i).fill(0), $ = [];
+  const m = new Array(i).fill(0), N = [];
   for (let k = 0; k < e.length; k++) {
-    const N = e[k], A = {
-      ...N,
+    const B = e[k], R = {
+      ...B,
       columnWidth: 0,
       imageHeight: 0,
       columnHeight: 0,
       left: 0,
       top: 0
-    }, P = g.indexOf(Math.min(...g)), z = N.width, F = N.height;
-    A.columnWidth = L, A.left = P * (L + m), A.imageHeight = Math.round(L * F / z), A.columnHeight = A.imageHeight + o + f, A.top = g[P], g[P] += A.columnHeight + d, $.push(A);
+    }, $ = m.indexOf(Math.min(...m)), W = B.width, H = B.height;
+    R.columnWidth = L, R.left = $ * (L + g), R.imageHeight = Math.round(L * H / W), R.columnHeight = R.imageHeight + o + v, R.top = m[$], m[$] += R.columnHeight + d, N.push(R);
   }
-  return $;
+  return N;
 }
-var St = typeof global == "object" && global && global.Object === Object && global, kt = typeof self == "object" && self && self.Object === Object && self, Je = St || kt || Function("return this")(), we = Je.Symbol, Ke = Object.prototype, Et = Ke.hasOwnProperty, Pt = Ke.toString, de = we ? we.toStringTag : void 0;
+var Lt = typeof global == "object" && global && global.Object === Object && global, kt = typeof self == "object" && self && self.Object === Object && self, Je = Lt || kt || Function("return this")(), we = Je.Symbol, Ke = Object.prototype, St = Ke.hasOwnProperty, Et = Ke.toString, de = we ? we.toStringTag : void 0;
 function Ht(e) {
-  var n = Et.call(e, de), i = e[de];
+  var l = St.call(e, de), i = e[de];
   try {
     e[de] = void 0;
     var a = !0;
   } catch {
   }
-  var m = Pt.call(e);
-  return a && (n ? e[de] = i : delete e[de]), m;
+  var g = Et.call(e);
+  return a && (l ? e[de] = i : delete e[de]), g;
 }
-var $t = Object.prototype, Ft = $t.toString;
+var $t = Object.prototype, Nt = $t.toString;
 function zt(e) {
-  return Ft.call(e);
+  return Nt.call(e);
 }
 var Dt = "[object Null]", Bt = "[object Undefined]", Ve = we ? we.toStringTag : void 0;
-function Nt(e) {
+function Wt(e) {
   return e == null ? e === void 0 ? Bt : Dt : Ve && Ve in Object(e) ? Ht(e) : zt(e);
 }
-function Wt(e) {
+function Ft(e) {
   return e != null && typeof e == "object";
 }
-var At = "[object Symbol]";
-function Rt(e) {
-  return typeof e == "symbol" || Wt(e) && Nt(e) == At;
+var Rt = "[object Symbol]";
+function Ct(e) {
+  return typeof e == "symbol" || Ft(e) && Wt(e) == Rt;
 }
 var Ot = /\s/;
-function Ct(e) {
-  for (var n = e.length; n-- && Ot.test(e.charAt(n)); )
+function At(e) {
+  for (var l = e.length; l-- && Ot.test(e.charAt(l)); )
     ;
-  return n;
+  return l;
 }
 var Vt = /^\s+/;
 function jt(e) {
-  return e && e.slice(0, Ct(e) + 1).replace(Vt, "");
+  return e && e.slice(0, At(e) + 1).replace(Vt, "");
 }
 function He(e) {
-  var n = typeof e;
-  return e != null && (n == "object" || n == "function");
+  var l = typeof e;
+  return e != null && (l == "object" || l == "function");
 }
-var je = NaN, qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Ut = /^0o[0-7]+$/i, _t = parseInt;
-function qe(e) {
+var je = NaN, Yt = /^[-+]0x[0-9a-f]+$/i, Ut = /^0b[01]+$/i, _t = /^0o[0-7]+$/i, Xt = parseInt;
+function Ye(e) {
   if (typeof e == "number")
     return e;
-  if (Rt(e))
+  if (Ct(e))
     return je;
   if (He(e)) {
-    var n = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = He(n) ? n + "" : n;
+    var l = typeof e.valueOf == "function" ? e.valueOf() : e;
+    e = He(l) ? l + "" : l;
   }
   if (typeof e != "string")
     return e === 0 ? e : +e;
   e = jt(e);
-  var i = Yt.test(e);
-  return i || Ut.test(e) ? _t(e.slice(2), i ? 2 : 8) : qt.test(e) ? je : +e;
+  var i = Ut.test(e);
+  return i || _t.test(e) ? Xt(e.slice(2), i ? 2 : 8) : Yt.test(e) ? je : +e;
 }
-var Ee = function() {
+var Se = function() {
   return Je.Date.now();
-}, Xt = "Expected a function", Gt = Math.max, Jt = Math.min;
-function Ye(e, n, i) {
-  var a, m, d, f, o, c, y = 0, t = !1, w = !1, T = !0;
+}, Gt = "Expected a function", qt = Math.max, Jt = Math.min;
+function Ue(e, l, i) {
+  var a, g, d, v, o, s, w = 0, t = !1, x = !1, T = !0;
   if (typeof e != "function")
-    throw new TypeError(Xt);
-  n = qe(n) || 0, He(i) && (t = !!i.leading, w = "maxWait" in i, d = w ? Gt(qe(i.maxWait) || 0, n) : d, T = "trailing" in i ? !!i.trailing : T);
-  function p(g) {
-    var $ = a, k = m;
-    return a = m = void 0, y = g, f = e.apply(k, $), f;
+    throw new TypeError(Gt);
+  l = Ye(l) || 0, He(i) && (t = !!i.leading, x = "maxWait" in i, d = x ? qt(Ye(i.maxWait) || 0, l) : d, T = "trailing" in i ? !!i.trailing : T);
+  function y(m) {
+    var N = a, k = g;
+    return a = g = void 0, w = m, v = e.apply(k, N), v;
   }
-  function h(g) {
-    return y = g, o = setTimeout(v, n), t ? p(g) : f;
+  function h(m) {
+    return w = m, o = setTimeout(f, l), t ? y(m) : v;
   }
-  function I(g) {
-    var $ = g - c, k = g - y, N = n - $;
-    return w ? Jt(N, d - k) : N;
+  function P(m) {
+    var N = m - s, k = m - w, B = l - N;
+    return x ? Jt(B, d - k) : B;
   }
-  function S(g) {
-    var $ = g - c, k = g - y;
-    return c === void 0 || $ >= n || $ < 0 || w && k >= d;
+  function I(m) {
+    var N = m - s, k = m - w;
+    return s === void 0 || N >= l || N < 0 || x && k >= d;
   }
-  function v() {
-    var g = Ee();
-    if (S(g))
-      return r(g);
-    o = setTimeout(v, I(g));
+  function f() {
+    var m = Se();
+    if (I(m))
+      return r(m);
+    o = setTimeout(f, P(m));
   }
-  function r(g) {
-    return o = void 0, T && a ? p(g) : (a = m = void 0, f);
+  function r(m) {
+    return o = void 0, T && a ? y(m) : (a = g = void 0, v);
   }
-  function s() {
-    o !== void 0 && clearTimeout(o), y = 0, a = c = m = o = void 0;
+  function u() {
+    o !== void 0 && clearTimeout(o), w = 0, a = s = g = o = void 0;
   }
   function L() {
-    return o === void 0 ? f : r(Ee());
+    return o === void 0 ? v : r(Se());
   }
   function M() {
-    var g = Ee(), $ = S(g);
-    if (a = arguments, m = this, c = g, $) {
+    var m = Se(), N = I(m);
+    if (a = arguments, g = this, s = m, N) {
       if (o === void 0)
-        return h(c);
-      if (w)
-        return clearTimeout(o), o = setTimeout(v, n), p(c);
+        return h(s);
+      if (x)
+        return clearTimeout(o), o = setTimeout(f, l), y(s);
     }
-    return o === void 0 && (o = setTimeout(v, n)), f;
+    return o === void 0 && (o = setTimeout(f, l)), v;
   }
-  return M.cancel = s, M.flush = L, M;
+  return M.cancel = u, M.flush = L, M;
 }
-function se(e, n) {
-  const i = n ?? (typeof window < "u" ? window.innerWidth : 1024), a = e.sizes;
+function se(e, l) {
+  const i = l ?? (typeof window < "u" ? window.innerWidth : 1024), a = e.sizes;
   return i >= 1536 && a["2xl"] ? a["2xl"] : i >= 1280 && a.xl ? a.xl : i >= 1024 && a.lg ? a.lg : i >= 768 && a.md ? a.md : i >= 640 && a.sm ? a.sm : a.base;
 }
 function Kt(e) {
-  const n = e ?? (typeof window < "u" ? window.innerWidth : 1024);
-  return n >= 1536 ? "2xl" : n >= 1280 ? "xl" : n >= 1024 ? "lg" : n >= 768 ? "md" : n >= 640 ? "sm" : "base";
+  const l = e ?? (typeof window < "u" ? window.innerWidth : 1024);
+  return l >= 1536 ? "2xl" : l >= 1280 ? "xl" : l >= 1024 ? "lg" : l >= 768 ? "md" : l >= 640 ? "sm" : "base";
 }
 function Qt(e) {
   return e.reduce((i, a) => Math.max(i, a.top + a.columnHeight), 0) + 500;
@@ -222,673 +222,706 @@ function Zt(e) {
     height: `${e.columnHeight}px`
   };
 }
-function ea(e, n = 0) {
+function ea(e, l = 0) {
   return {
     style: Zt(e),
     "data-top": e.top,
     "data-left": e.left,
     "data-id": `${e.page}-${e.id}`,
-    "data-index": n
+    "data-index": l
   };
 }
-function $e(e, n) {
-  if (!e.length || n <= 0)
-    return new Array(Math.max(1, n)).fill(0);
-  const a = Array.from(new Set(e.map((f) => f.left))).sort((f, o) => f - o).slice(0, n), m = /* @__PURE__ */ new Map();
-  for (let f = 0; f < a.length; f++) m.set(a[f], f);
+function $e(e, l) {
+  if (!e.length || l <= 0)
+    return new Array(Math.max(1, l)).fill(0);
+  const a = Array.from(new Set(e.map((v) => v.left))).sort((v, o) => v - o).slice(0, l), g = /* @__PURE__ */ new Map();
+  for (let v = 0; v < a.length; v++) g.set(a[v], v);
   const d = new Array(a.length).fill(0);
-  for (const f of e) {
-    const o = m.get(f.left);
-    o != null && (d[o] = Math.max(d[o], f.top + f.columnHeight));
+  for (const v of e) {
+    const o = g.get(v.left);
+    o != null && (d[o] = Math.max(d[o], v.top + v.columnHeight));
   }
-  for (; d.length < n; ) d.push(0);
+  for (; d.length < l; ) d.push(0);
   return d;
 }
-function ta(e, n) {
+function ta(e, l) {
   let i = 0, a = 0;
-  const m = 1e3;
-  function d(t, w) {
+  const g = 1e3;
+  function d(t, x) {
     var h;
     const T = (h = e.container) == null ? void 0 : h.value;
     if (T) {
-      const I = T.scrollTop, S = T.clientHeight;
-      i = I - m, a = I + S + m;
+      const P = T.scrollTop, I = T.clientHeight;
+      i = P - g, a = P + I + g;
     }
-    return t + w >= i && t <= a;
+    return t + x >= i && t <= a;
   }
-  function f(t, w) {
-    var r;
-    const T = parseInt(t.dataset.left || "0", 10), p = parseInt(t.dataset.top || "0", 10), h = parseInt(t.dataset.index || "0", 10), I = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
-    if ((r = n == null ? void 0 : n.virtualizing) != null && r.value) {
-      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${p}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
-        t.style.transition = "", w();
-      });
+  function v(t, x) {
+    var u;
+    const T = parseInt(t.dataset.left || "0", 10), y = parseInt(t.dataset.top || "0", 10), h = parseInt(t.dataset.index || "0", 10), P = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
+    if ((u = l == null ? void 0 : l.virtualizing) != null && u.value) {
+      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${y}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), t.style.transition = "", x();
       return;
     }
-    if (!d(p, I)) {
-      t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${p}px, 0) scale(1)`, t.style.transition = "none", w();
+    if (!d(y, P)) {
+      t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${y}px, 0) scale(1)`, t.style.transition = "none", x();
       return;
     }
-    const S = Math.min(h * 20, 160), v = t.style.getPropertyValue("--masonry-opacity-delay");
-    t.style.setProperty("--masonry-opacity-delay", `${S}ms`), requestAnimationFrame(() => {
-      t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${p}px, 0) scale(1)`;
-      const s = () => {
-        v ? t.style.setProperty("--masonry-opacity-delay", v) : t.style.removeProperty("--masonry-opacity-delay"), t.removeEventListener("transitionend", s), w();
-      };
-      t.addEventListener("transitionend", s);
-    });
+    const I = Math.min(h * 20, 160), f = t.style.getPropertyValue("--masonry-opacity-delay");
+    t.style.setProperty("--masonry-opacity-delay", `${I}ms`), t.style.opacity = "1", t.style.transform = `translate3d(${T}px, ${y}px, 0) scale(1)`;
+    const r = () => {
+      f ? t.style.setProperty("--masonry-opacity-delay", f) : t.style.removeProperty("--masonry-opacity-delay"), t.removeEventListener("transitionend", r), x();
+    };
+    t.addEventListener("transitionend", r);
   }
   function o(t) {
-    var p;
-    const w = parseInt(t.dataset.left || "0", 10), T = parseInt(t.dataset.top || "0", 10);
-    if ((p = n == null ? void 0 : n.virtualizing) != null && p.value) {
-      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${w}px, ${T}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
+    var y;
+    const x = parseInt(t.dataset.left || "0", 10), T = parseInt(t.dataset.top || "0", 10);
+    if ((y = l == null ? void 0 : l.virtualizing) != null && y.value) {
+      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${x}px, ${T}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
       return;
     }
-    t.style.opacity = "0", t.style.transform = `translate3d(${w}px, ${T + 10}px, 0) scale(0.985)`;
+    t.style.opacity = "0", t.style.transform = `translate3d(${x}px, ${T + 10}px, 0) scale(0.985)`;
   }
-  function c(t) {
+  function s(t) {
     var h;
-    const w = parseInt(t.dataset.left || "0", 10), T = parseInt(t.dataset.top || "0", 10), p = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
-    if (!((h = n == null ? void 0 : n.virtualizing) != null && h.value)) {
-      if (!d(T, p)) {
+    const x = parseInt(t.dataset.left || "0", 10), T = parseInt(t.dataset.top || "0", 10), y = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
+    if (!((h = l == null ? void 0 : l.virtualizing) != null && h.value)) {
+      if (!d(T, y)) {
         t.style.transition = "none";
         return;
       }
-      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${w}px, ${T}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
-        t.style.transition = "";
-      });
+      t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${x}px, ${T}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), t.style.transition = "";
     }
   }
-  function y(t, w) {
+  function w(t, x) {
     var M;
-    const T = parseInt(t.dataset.left || "0", 10), p = parseInt(t.dataset.top || "0", 10), h = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
-    if ((M = n == null ? void 0 : n.virtualizing) != null && M.value) {
-      w();
+    const T = parseInt(t.dataset.left || "0", 10), y = parseInt(t.dataset.top || "0", 10), h = t.offsetHeight || parseInt(getComputedStyle(t).height || "200", 10) || 200;
+    if ((M = l == null ? void 0 : l.virtualizing) != null && M.value) {
+      x();
       return;
     }
-    if (!d(p, h)) {
-      t.style.transition = "none", t.style.opacity = "0", w();
+    if (!d(y, h)) {
+      t.style.transition = "none", t.style.opacity = "0", x();
       return;
     }
-    const I = typeof (n == null ? void 0 : n.leaveDurationMs) == "number" ? n.leaveDurationMs : Number.NaN;
-    let S = Number.isFinite(I) && I > 0 ? I : Number.NaN;
-    if (!Number.isFinite(S)) {
-      const $ = getComputedStyle(t).getPropertyValue("--masonry-leave-duration") || "", k = parseFloat($);
-      S = Number.isFinite(k) && k > 0 ? k : 200;
+    const P = typeof (l == null ? void 0 : l.leaveDurationMs) == "number" ? l.leaveDurationMs : Number.NaN;
+    let I = Number.isFinite(P) && P > 0 ? P : Number.NaN;
+    if (!Number.isFinite(I)) {
+      const N = getComputedStyle(t).getPropertyValue("--masonry-leave-duration") || "", k = parseFloat(N);
+      I = Number.isFinite(k) && k > 0 ? k : 200;
     }
-    const v = t.style.transitionDuration, r = () => {
-      t.removeEventListener("transitionend", s), clearTimeout(L), t.style.transitionDuration = v || "";
-    }, s = (g) => {
-      (!g || g.target === t) && (r(), w());
+    const f = t.style.transitionDuration, r = () => {
+      t.removeEventListener("transitionend", u), clearTimeout(L), t.style.transitionDuration = f || "";
+    }, u = (m) => {
+      (!m || m.target === t) && (r(), x());
     }, L = setTimeout(() => {
-      r(), w();
-    }, S + 100);
-    requestAnimationFrame(() => {
-      t.style.transitionDuration = `${S}ms`, t.style.opacity = "0", t.style.transform = `translate3d(${T}px, ${p + 10}px, 0) scale(0.985)`, t.addEventListener("transitionend", s);
-    });
+      r(), x();
+    }, I + 100);
+    t.style.transitionDuration = `${I}ms`, t.style.opacity = "0", t.style.transform = `translate3d(${T}px, ${y + 10}px, 0) scale(0.985)`, t.addEventListener("transitionend", u);
   }
   return {
-    onEnter: f,
+    onEnter: v,
     onBeforeEnter: o,
-    onBeforeLeave: c,
-    onLeave: y
+    onBeforeLeave: s,
+    onLeave: w
   };
 }
 function aa({
   container: e,
-  masonry: n,
+  masonry: l,
   columns: i,
   containerHeight: a,
-  isLoading: m,
+  isLoading: g,
   pageSize: d,
-  refreshLayout: f,
+  refreshLayout: v,
   setItemsRaw: o,
-  loadNext: c,
-  loadThresholdPx: y
+  loadNext: s,
+  loadThresholdPx: w
 }) {
   let t = 0;
-  async function w(T, p = !1) {
+  async function x(T, y = !1) {
     if (!e.value) return;
-    const h = T ?? $e(n.value, i.value), I = h.length ? Math.max(...h) : 0, S = e.value.scrollTop + e.value.clientHeight, v = e.value.scrollTop > t + 1;
+    const h = T ?? $e(l.value, i.value), P = h.length ? Math.max(...h) : 0, I = e.value.scrollTop + e.value.clientHeight, f = e.value.scrollTop > t + 1;
     t = e.value.scrollTop;
-    const r = typeof y == "number" ? y : 200, s = r >= 0 ? Math.max(0, I - r) : Math.max(0, I + r);
-    if (S >= s && (v || p) && !m.value) {
-      await c(), await X();
+    const r = typeof w == "number" ? w : 200, u = r >= 0 ? Math.max(0, P - r) : Math.max(0, P + r);
+    if (I >= u && (f || y) && !g.value) {
+      await s(), await C();
       return;
     }
   }
   return {
-    handleScroll: w
+    handleScroll: x
   };
 }
 function na(e) {
-  const { useSwipeMode: n, masonry: i, isLoading: a, loadNext: m, loadPage: d, paginationHistory: f } = e, o = W(0), c = W(0), y = W(!1), t = W(0), w = W(0), T = W(null), p = K(() => {
-    if (!n.value || i.value.length === 0) return null;
-    const P = Math.max(0, Math.min(o.value, i.value.length - 1));
-    return i.value[P] || null;
-  }), h = K(() => {
-    if (!n.value || !p.value) return null;
-    const P = o.value + 1;
-    return P >= i.value.length ? null : i.value[P] || null;
-  }), I = K(() => {
-    if (!n.value || !p.value) return null;
-    const P = o.value - 1;
-    return P < 0 ? null : i.value[P] || null;
+  const { useSwipeMode: l, masonry: i, isLoading: a, loadNext: g, loadPage: d, paginationHistory: v } = e, o = F(0), s = F(0), w = F(!1), t = F(0), x = F(0), T = F(null), y = Q(() => {
+    if (!l.value || i.value.length === 0) return null;
+    const $ = Math.max(0, Math.min(o.value, i.value.length - 1));
+    return i.value[$] || null;
+  }), h = Q(() => {
+    if (!l.value || !y.value) return null;
+    const $ = o.value + 1;
+    return $ >= i.value.length ? null : i.value[$] || null;
+  }), P = Q(() => {
+    if (!l.value || !y.value) return null;
+    const $ = o.value - 1;
+    return $ < 0 ? null : i.value[$] || null;
   });
-  function S() {
+  function I() {
     if (!T.value) return;
-    const P = T.value.clientHeight;
-    c.value = -o.value * P;
+    const $ = T.value.clientHeight;
+    s.value = -o.value * $;
   }
-  function v() {
+  function f() {
     if (!h.value) {
-      m();
+      g();
       return;
     }
-    o.value++, S(), o.value >= i.value.length - 5 && m();
+    o.value++, I(), o.value >= i.value.length - 5 && g();
   }
   function r() {
-    I.value && (o.value--, S());
+    P.value && (o.value--, I());
   }
-  function s(P) {
-    n.value && (y.value = !0, t.value = P.touches[0].clientY, w.value = c.value, P.preventDefault());
+  function u($) {
+    l.value && (w.value = !0, t.value = $.touches[0].clientY, x.value = s.value, $.preventDefault());
   }
-  function L(P) {
-    if (!n.value || !y.value) return;
-    const z = P.touches[0].clientY - t.value;
-    c.value = w.value + z, P.preventDefault();
+  function L($) {
+    if (!l.value || !w.value) return;
+    const W = $.touches[0].clientY - t.value;
+    s.value = x.value + W, $.preventDefault();
   }
-  function M(P) {
-    if (!n.value || !y.value) return;
-    y.value = !1;
-    const z = c.value - w.value;
-    Math.abs(z) > 100 ? z > 0 && I.value ? r() : z < 0 && h.value ? v() : S() : S(), P.preventDefault();
+  function M($) {
+    if (!l.value || !w.value) return;
+    w.value = !1;
+    const W = s.value - x.value;
+    Math.abs(W) > 100 ? W > 0 && P.value ? r() : W < 0 && h.value ? f() : I() : I(), $.preventDefault();
   }
-  function g(P) {
-    n.value && (y.value = !0, t.value = P.clientY, w.value = c.value, P.preventDefault());
+  function m($) {
+    l.value && (w.value = !0, t.value = $.clientY, x.value = s.value, $.preventDefault());
   }
-  function $(P) {
-    if (!n.value || !y.value) return;
-    const z = P.clientY - t.value;
-    c.value = w.value + z, P.preventDefault();
+  function N($) {
+    if (!l.value || !w.value) return;
+    const W = $.clientY - t.value;
+    s.value = x.value + W, $.preventDefault();
   }
-  function k(P) {
-    if (!n.value || !y.value) return;
-    y.value = !1;
-    const z = c.value - w.value;
-    Math.abs(z) > 100 ? z > 0 && I.value ? r() : z < 0 && h.value ? v() : S() : S(), P.preventDefault();
+  function k($) {
+    if (!l.value || !w.value) return;
+    w.value = !1;
+    const W = s.value - x.value;
+    Math.abs(W) > 100 ? W > 0 && P.value ? r() : W < 0 && h.value ? f() : I() : I(), $.preventDefault();
   }
-  function N() {
-    !n.value && o.value > 0 && (o.value = 0, c.value = 0), n.value && i.value.length === 0 && !a.value && d(f.value[0]), n.value && S();
+  function B() {
+    !l.value && o.value > 0 && (o.value = 0, s.value = 0), l.value && i.value.length === 0 && !a.value && d(v.value[0]), l.value && I();
   }
-  function A() {
-    o.value = 0, c.value = 0, y.value = !1;
+  function R() {
+    o.value = 0, s.value = 0, w.value = !1;
   }
   return {
     // State
     currentSwipeIndex: o,
-    swipeOffset: c,
-    isDragging: y,
+    swipeOffset: s,
+    isDragging: w,
     swipeContainer: T,
     // Computed
-    currentItem: p,
+    currentItem: y,
     nextItem: h,
-    previousItem: I,
+    previousItem: P,
     // Functions
-    handleTouchStart: s,
+    handleTouchStart: u,
     handleTouchMove: L,
     handleTouchEnd: M,
-    handleMouseDown: g,
-    handleMouseMove: $,
+    handleMouseDown: m,
+    handleMouseMove: N,
     handleMouseUp: k,
-    goToNextItem: v,
+    goToNextItem: f,
     goToPreviousItem: r,
-    snapToCurrentItem: S,
-    handleWindowResize: N,
-    reset: A
+    snapToCurrentItem: I,
+    handleWindowResize: B,
+    reset: R
   };
 }
-function me(e) {
+function ge(e) {
   return e instanceof Error ? e : new Error(String(e));
 }
 function la(e) {
   const {
-    getPage: n,
+    getPage: l,
     context: i,
     masonry: a,
-    isLoading: m,
+    isLoading: g,
     hasReachedEnd: d,
-    loadError: f,
+    loadError: v,
     currentPage: o,
-    paginationHistory: c,
-    refreshLayout: y,
+    paginationHistory: s,
+    refreshLayout: w,
     retryMaxAttempts: t,
-    retryInitialDelayMs: w,
+    retryInitialDelayMs: x,
     retryBackoffStepMs: T,
-    mode: p,
+    mode: y,
     backfillDelayMs: h,
-    backfillMaxCalls: I,
-    pageSize: S,
-    emits: v
-  } = e, r = W(!1);
-  let s = !1;
-  function L(F) {
-    return a.value.filter((l) => l.page === F).length;
+    backfillMaxCalls: P,
+    pageSize: I,
+    emits: f
+  } = e, r = F(!1);
+  let u = !1;
+  function L(H) {
+    return a.value.filter((n) => n.page === H).length;
   }
-  function M(F, l) {
-    return new Promise((x) => {
-      const E = Math.max(0, F | 0), D = Date.now();
-      l(E, E);
+  function M(H, n) {
+    return new Promise((p) => {
+      const S = Math.max(0, H | 0), z = Date.now();
+      n(S, S);
       const V = setInterval(() => {
         if (r.value) {
-          clearInterval(V), x();
+          clearInterval(V), p();
           return;
         }
-        const C = Date.now() - D, b = Math.max(0, E - C);
-        l(b, E), b <= 0 && (clearInterval(V), x());
+        const Y = Date.now() - z, b = Math.max(0, S - Y);
+        n(b, S), b <= 0 && (clearInterval(V), p());
       }, 100);
     });
   }
-  async function g(F) {
-    let l = 0;
-    const x = t;
-    let E = w;
+  async function m(H) {
+    let n = 0;
+    const p = t;
+    let S = x;
     for (; ; )
       try {
-        const D = await F();
-        return l > 0 && v("retry:stop", { attempt: l, success: !0 }), D;
-      } catch (D) {
-        if (l++, l > x)
-          throw v("retry:stop", { attempt: l - 1, success: !1 }), D;
-        v("retry:start", { attempt: l, max: x, totalMs: E }), await M(E, (V, C) => {
-          v("retry:tick", { attempt: l, remainingMs: V, totalMs: C });
-        }), E += T;
+        const z = await H();
+        return n > 0 && f("retry:stop", { attempt: n, success: !0 }), z;
+      } catch (z) {
+        if (n++, n > p)
+          throw f("retry:stop", { attempt: n - 1, success: !1 }), z;
+        f("retry:start", { attempt: n, max: p, totalMs: S }), await M(S, (V, Y) => {
+          f("retry:tick", { attempt: n, remainingMs: V, totalMs: Y });
+        }), S += T;
       }
   }
-  async function $(F) {
+  async function N(H) {
     try {
-      const l = await g(() => n(F, i == null ? void 0 : i.value));
-      return y([...a.value, ...l.items]), l;
-    } catch (l) {
-      throw l;
+      const n = await m(() => l(H, i == null ? void 0 : i.value)), p = [...a.value, ...n.items];
+      return a.value = p, await C(), await C(), await C(), w(p), n;
+    } catch (n) {
+      throw n;
     }
   }
-  async function k(F, l = !1) {
-    if (!l && p !== "backfill" || s || r.value || d.value) return;
-    const x = (F || 0) + (S || 0);
-    if (!S || S <= 0) return;
-    if (c.value[c.value.length - 1] == null) {
+  async function k(H, n = !1) {
+    if (!n && y !== "backfill" || u || r.value || d.value) return;
+    const p = (H || 0) + (I || 0);
+    if (!I || I <= 0) return;
+    if (s.value[s.value.length - 1] == null) {
       d.value = !0;
       return;
     }
-    if (!(a.value.length >= x)) {
-      s = !0, m.value || (m.value = !0, v("loading:start"));
+    if (!(a.value.length >= p)) {
+      u = !0, g.value || (g.value = !0, f("loading:start"));
       try {
-        let D = 0;
-        for (v("backfill:start", { target: x, fetched: a.value.length, calls: D }); a.value.length < x && D < I && c.value[c.value.length - 1] != null && !r.value && !d.value && s && (await M(h, (C, b) => {
-          v("backfill:tick", {
-            fetched: a.value.length,
-            target: x,
-            calls: D,
-            remainingMs: C,
-            totalMs: b
-          });
-        }), !(r.value || !s)); ) {
-          const V = c.value[c.value.length - 1];
-          if (V == null) {
+        let z = 0;
+        const V = o.value, Y = s.value[s.value.length - 1];
+        for (f("backfill:start", {
+          target: p,
+          fetched: a.value.length,
+          calls: z,
+          currentPage: V,
+          nextPage: Y
+        }); a.value.length < p && z < P && s.value[s.value.length - 1] != null && !r.value && !d.value && u; ) {
+          const O = o.value, ne = s.value[s.value.length - 1];
+          if (await M(h, (Z, K) => {
+            f("backfill:tick", {
+              fetched: a.value.length,
+              target: p,
+              calls: z,
+              remainingMs: Z,
+              totalMs: K,
+              currentPage: O,
+              nextPage: ne
+            });
+          }), r.value || !u) break;
+          const X = s.value[s.value.length - 1];
+          if (X == null) {
             d.value = !0;
             break;
           }
           try {
-            if (r.value || !s) break;
-            const C = await $(V);
-            if (r.value || !s) break;
-            f.value = null, c.value.push(C.nextPage), C.nextPage == null && (d.value = !0);
-          } catch (C) {
-            if (r.value || !s) break;
-            f.value = me(C);
+            if (r.value || !u) break;
+            const Z = await N(X);
+            if (r.value || !u) break;
+            v.value = null, o.value = X, s.value.push(Z.nextPage), Z.nextPage == null && (d.value = !0);
+          } catch (Z) {
+            if (r.value || !u) break;
+            v.value = ge(Z);
           }
-          D++;
+          z++;
         }
-        v("backfill:stop", { fetched: a.value.length, calls: D });
+        const b = o.value, E = s.value[s.value.length - 1];
+        f("backfill:stop", {
+          fetched: a.value.length,
+          calls: z,
+          currentPage: b,
+          nextPage: E
+        });
       } finally {
-        s = !1, m.value = !1, v("loading:stop", { fetched: a.value.length });
+        u = !1, g.value = !1;
+        const z = o.value, V = s.value[s.value.length - 1];
+        f("loading:stop", {
+          fetched: a.value.length,
+          currentPage: z,
+          nextPage: V
+        });
       }
     }
   }
-  async function N(F) {
-    if (!m.value) {
-      r.value = !1, m.value || (m.value = !0, v("loading:start")), d.value = !1, f.value = null;
+  async function B(H) {
+    if (!g.value) {
+      r.value = !1, g.value || (g.value = !0, f("loading:start")), d.value = !1, v.value = null;
       try {
-        const l = a.value.length;
+        const n = a.value.length;
         if (r.value) return;
-        const x = await $(F);
-        return r.value ? void 0 : (f.value = null, o.value = F, c.value.push(x.nextPage), x.nextPage == null && (d.value = !0), await k(l), x);
-      } catch (l) {
-        throw f.value = me(l), l;
+        const p = await N(H);
+        return r.value ? void 0 : (v.value = null, o.value = H, s.value.push(p.nextPage), p.nextPage == null && (d.value = !0), await k(n), p);
+      } catch (n) {
+        throw v.value = ge(n), n;
       } finally {
-        m.value = !1;
+        g.value = !1;
       }
     }
   }
-  async function A() {
-    if (!m.value && !d.value) {
-      r.value = !1, m.value || (m.value = !0, v("loading:start")), f.value = null;
+  async function R() {
+    if (!g.value && !d.value) {
+      r.value = !1, g.value || (g.value = !0, f("loading:start")), v.value = null;
       try {
-        const F = a.value.length;
+        const H = a.value.length;
         if (r.value) return;
-        if (p === "refresh" && o.value != null && L(o.value) < S) {
-          const D = await g(() => n(o.value, i == null ? void 0 : i.value));
+        if (y === "refresh" && o.value != null && L(o.value) < I) {
+          const z = await m(() => l(o.value, i == null ? void 0 : i.value));
           if (r.value) return;
-          const V = [...a.value], C = D.items.filter((H) => !H || H.id == null || H.page == null ? !1 : !V.some((R) => R && R.id === H.id && R.page === H.page));
-          if (C.length > 0) {
-            const H = [...a.value, ...C];
-            y(H), await new Promise((R) => setTimeout(R, 0));
+          const V = [...a.value], Y = z.items.filter((E) => !E || E.id == null || E.page == null ? !1 : !V.some((O) => O && O.id === E.id && O.page === E.page));
+          if (Y.length > 0) {
+            const E = [...a.value, ...Y];
+            a.value = E, await C(), await C(), await C(), w(E);
           }
-          if (f.value = null, C.length === 0) {
-            const H = c.value[c.value.length - 1];
-            if (H == null) {
+          if (v.value = null, Y.length === 0) {
+            const E = s.value[s.value.length - 1];
+            if (E == null) {
               d.value = !0;
               return;
             }
-            const R = await $(H);
-            return r.value ? void 0 : (f.value = null, o.value = H, c.value.push(R.nextPage), R.nextPage == null && (d.value = !0), await k(F), R);
+            const O = await N(E);
+            return r.value ? void 0 : (v.value = null, o.value = E, s.value.push(O.nextPage), O.nextPage == null && (d.value = !0), await k(H), O);
           }
-          if (L(o.value) >= S) {
-            const H = c.value[c.value.length - 1];
-            if (H == null) {
+          if (L(o.value) >= I) {
+            const E = s.value[s.value.length - 1];
+            if (E == null) {
               d.value = !0;
               return;
             }
-            const R = await $(H);
-            return r.value ? void 0 : (f.value = null, o.value = H, c.value.push(R.nextPage), R.nextPage == null && (d.value = !0), await k(F), R);
+            const O = await N(E);
+            return r.value ? void 0 : (v.value = null, o.value = E, s.value.push(O.nextPage), O.nextPage == null && (d.value = !0), await k(H), O);
           } else
-            return D;
+            return z;
         }
-        const l = c.value[c.value.length - 1];
-        if (l == null) {
+        const n = s.value[s.value.length - 1];
+        if (n == null) {
           d.value = !0;
           return;
         }
-        const x = await $(l);
-        return r.value ? void 0 : (f.value = null, o.value = l, c.value.push(x.nextPage), x.nextPage == null && (d.value = !0), await k(F), x);
-      } catch (F) {
-        throw f.value = me(F), F;
+        const p = await N(n);
+        return r.value ? void 0 : (v.value = null, o.value = n, s.value.push(p.nextPage), p.nextPage == null && (d.value = !0), await k(H), p);
+      } catch (H) {
+        throw v.value = ge(H), H;
       } finally {
-        m.value = !1, v("loading:stop", { fetched: a.value.length });
+        g.value = !1;
+        const H = o.value, n = s.value[s.value.length - 1];
+        f("loading:stop", {
+          fetched: a.value.length,
+          currentPage: H,
+          nextPage: n
+        });
       }
     }
   }
-  async function P() {
-    if (!m.value) {
-      r.value = !1, m.value = !0, v("loading:start");
+  async function $() {
+    if (!g.value) {
+      r.value = !1, g.value = !0, f("loading:start");
       try {
-        const F = o.value;
-        if (F == null) {
-          console.warn("[Masonry] No current page to refresh - currentPage:", o.value, "paginationHistory:", c.value);
+        const H = o.value;
+        if (H == null) {
+          console.warn("[Masonry] No current page to refresh - currentPage:", o.value, "paginationHistory:", s.value);
           return;
         }
-        a.value = [], d.value = !1, f.value = null, c.value = [F];
-        const l = await $(F);
+        a.value = [], d.value = !1, v.value = null, s.value = [H];
+        const n = await N(H);
         if (r.value) return;
-        f.value = null, o.value = F, c.value.push(l.nextPage), l.nextPage == null && (d.value = !0);
-        const x = a.value.length;
-        return await k(x), l;
-      } catch (F) {
-        throw f.value = me(F), F;
+        v.value = null, o.value = H, s.value.push(n.nextPage), n.nextPage == null && (d.value = !0);
+        const p = a.value.length;
+        return await k(p), n;
+      } catch (H) {
+        throw v.value = ge(H), H;
       } finally {
-        m.value = !1, v("loading:stop", { fetched: a.value.length });
+        g.value = !1;
+        const H = o.value, n = s.value[s.value.length - 1];
+        f("loading:stop", {
+          fetched: a.value.length,
+          currentPage: H,
+          nextPage: n
+        });
       }
     }
   }
-  function z() {
-    const F = s;
-    r.value = !0, m.value = !1, s = !1, F && v("backfill:stop", { fetched: a.value.length, calls: 0, cancelled: !0 }), v("loading:stop", { fetched: a.value.length });
+  function W() {
+    const H = u;
+    r.value = !0, g.value = !1, u = !1;
+    const n = o.value, p = s.value[s.value.length - 1];
+    H && f("backfill:stop", {
+      fetched: a.value.length,
+      calls: 0,
+      cancelled: !0,
+      currentPage: n,
+      nextPage: p
+    }), f("loading:stop", {
+      fetched: a.value.length,
+      currentPage: n,
+      nextPage: p
+    });
   }
   return {
-    loadPage: N,
-    loadNext: A,
-    refreshCurrentPage: P,
-    cancelLoad: z,
+    loadPage: B,
+    loadNext: R,
+    refreshCurrentPage: $,
+    cancelLoad: W,
     maybeBackfillToTarget: k,
-    getContent: $
+    getContent: N
   };
 }
 function oa(e) {
   const {
-    masonry: n,
+    masonry: l,
     useSwipeMode: i,
     refreshLayout: a,
-    loadNext: m,
+    loadNext: g,
     maybeBackfillToTarget: d,
-    paginationHistory: f
+    paginationHistory: v
   } = e;
-  let o = /* @__PURE__ */ new Set(), c = null, y = !1;
+  let o = /* @__PURE__ */ new Set(), s = null, w = !1;
   async function t() {
-    if (o.size === 0 || y) return;
-    y = !0;
-    const v = Array.from(o);
-    o.clear(), c = null, await T(v), y = !1;
+    if (o.size === 0 || w) return;
+    w = !0;
+    const f = Array.from(o);
+    o.clear(), s = null, await T(f), w = !1;
   }
-  async function w(v) {
-    o.add(v), c && clearTimeout(c), c = setTimeout(() => {
+  async function x(f) {
+    o.add(f), s && clearTimeout(s), s = setTimeout(() => {
       t();
     }, 16);
   }
-  async function T(v) {
-    if (!v || v.length === 0) return;
-    const r = new Set(v.map((L) => L.id)), s = n.value.filter((L) => !r.has(L.id));
-    if (n.value = s, await X(), s.length === 0 && f.value.length > 0) {
+  async function T(f) {
+    if (!f || f.length === 0) return;
+    const r = new Set(f.map((L) => L.id)), u = l.value.filter((L) => !r.has(L.id));
+    if (l.value = u, await C(), u.length === 0 && v.value.length > 0) {
       try {
-        await m(), await d(0, !0);
+        await g(), await d(0, !0);
       } catch {
       }
       return;
     }
-    await new Promise((L) => requestAnimationFrame(() => L())), requestAnimationFrame(() => {
-      a(s);
-    });
+    await C(), await C(), a(u);
   }
-  async function p(v) {
-    !v || v.length === 0 || (v.forEach((r) => o.add(r)), c && clearTimeout(c), c = setTimeout(() => {
+  async function y(f) {
+    !f || f.length === 0 || (f.forEach((r) => o.add(r)), s && clearTimeout(s), s = setTimeout(() => {
       t();
     }, 16));
   }
-  async function h(v, r) {
-    if (!v) return;
-    const s = n.value;
-    if (s.findIndex(($) => $.id === v.id) !== -1) return;
-    const M = [...s], g = Math.min(r, M.length);
-    M.splice(g, 0, v), n.value = M, await X(), i.value || (await new Promise(($) => requestAnimationFrame(() => $())), requestAnimationFrame(() => {
-      a(M);
-    }));
+  async function h(f, r) {
+    if (!f) return;
+    const u = l.value;
+    if (u.findIndex((N) => N.id === f.id) !== -1) return;
+    const M = [...u], m = Math.min(r, M.length);
+    M.splice(m, 0, f), l.value = M, await C(), i.value || (await C(), await C(), a(M));
   }
-  async function I(v, r) {
-    var P;
-    if (!v || v.length === 0) return;
-    if (!r || r.length !== v.length) {
+  async function P(f, r) {
+    var $;
+    if (!f || f.length === 0) return;
+    if (!r || r.length !== f.length) {
       console.warn("[Masonry] restoreMany: items and indices arrays must have the same length");
       return;
     }
-    const s = n.value, L = new Set(s.map((z) => z.id)), M = [];
-    for (let z = 0; z < v.length; z++)
-      L.has((P = v[z]) == null ? void 0 : P.id) || M.push({ item: v[z], index: r[z] });
+    const u = l.value, L = new Set(u.map((W) => W.id)), M = [];
+    for (let W = 0; W < f.length; W++)
+      L.has(($ = f[W]) == null ? void 0 : $.id) || M.push({ item: f[W], index: r[W] });
     if (M.length === 0) return;
-    const g = /* @__PURE__ */ new Map();
-    for (const { item: z, index: F } of M)
-      g.set(F, z);
-    const $ = M.length > 0 ? Math.max(...M.map(({ index: z }) => z)) : -1, k = Math.max(s.length - 1, $), N = [];
-    let A = 0;
-    for (let z = 0; z <= k; z++)
-      g.has(z) ? N.push(g.get(z)) : A < s.length && (N.push(s[A]), A++);
-    for (; A < s.length; )
-      N.push(s[A]), A++;
-    n.value = N, await X(), i.value || (await new Promise((z) => requestAnimationFrame(() => z())), requestAnimationFrame(() => {
-      a(N);
-    }));
+    const m = /* @__PURE__ */ new Map();
+    for (const { item: W, index: H } of M)
+      m.set(H, W);
+    const N = M.length > 0 ? Math.max(...M.map(({ index: W }) => W)) : -1, k = Math.max(u.length - 1, N), B = [];
+    let R = 0;
+    for (let W = 0; W <= k; W++)
+      m.has(W) ? B.push(m.get(W)) : R < u.length && (B.push(u[R]), R++);
+    for (; R < u.length; )
+      B.push(u[R]), R++;
+    l.value = B, await C(), i.value || (await C(), await C(), a(B));
   }
-  async function S() {
-    n.value = [];
+  async function I() {
+    l.value = [];
   }
   return {
-    remove: w,
-    removeMany: p,
+    remove: x,
+    removeMany: y,
     restore: h,
-    restoreMany: I,
-    removeAll: S
+    restoreMany: P,
+    removeAll: I
   };
 }
 function ra(e) {
   const {
-    masonry: n,
+    masonry: l,
     useSwipeMode: i,
     container: a,
-    columns: m,
+    columns: g,
     containerWidth: d,
-    masonryContentHeight: f,
+    masonryContentHeight: v,
     layout: o,
-    fixedDimensions: c,
-    checkItemDimensions: y
+    fixedDimensions: s,
+    checkItemDimensions: w
   } = e;
   let t = [];
-  function w(I) {
-    const S = Qt(I);
-    let v = 0;
+  function x(P) {
+    const I = Qt(P);
+    let f = 0;
     if (a.value) {
-      const { scrollTop: r, clientHeight: s } = a.value;
-      v = r + s + 100;
+      const { scrollTop: r, clientHeight: u } = a.value;
+      f = r + u + 100;
     }
-    f.value = Math.max(S, v);
+    v.value = Math.max(I, f);
   }
-  function T(I) {
-    var s, L;
+  function T(P) {
+    var u, L;
     if (i.value) {
-      n.value = I;
+      l.value = P;
       return;
     }
-    if (n.value = I, !a.value) return;
-    if (y(I, "refreshLayout"), I.length > 1e3 && t.length > I.length && t.length - I.length < 100) {
+    if (l.value = P, !a.value) return;
+    if (w(P, "refreshLayout"), P.length > 1e3 && t.length > P.length && t.length - P.length < 100) {
       let M = !0;
-      for (let g = 0; g < I.length; g++)
-        if (((s = I[g]) == null ? void 0 : s.id) !== ((L = t[g]) == null ? void 0 : L.id)) {
+      for (let m = 0; m < P.length; m++)
+        if (((u = P[m]) == null ? void 0 : u.id) !== ((L = t[m]) == null ? void 0 : L.id)) {
           M = !1;
           break;
         }
       if (M) {
-        const g = I.map(($, k) => ({
+        const m = P.map((N, k) => ({
           ...t[k],
           originalIndex: k
         }));
-        w(g), n.value = g, t = g;
+        x(m), l.value = m, t = m;
         return;
       }
     }
-    const v = I.map((M, g) => ({
+    const f = P.map((M, m) => ({
       ...M,
-      originalIndex: g
+      originalIndex: m
     })), r = a.value;
-    if (c.value && c.value.width !== void 0) {
-      const M = r.style.width, g = r.style.boxSizing;
-      r.style.boxSizing = "border-box", r.style.width = `${c.value.width}px`, r.offsetWidth;
-      const $ = Ce(v, r, m.value, o.value);
-      r.style.width = M, r.style.boxSizing = g, w($), n.value = $, t = $;
+    if (s.value && s.value.width !== void 0) {
+      const M = r.style.width, m = r.style.boxSizing;
+      r.style.boxSizing = "border-box", r.style.width = `${s.value.width}px`, r.offsetWidth;
+      const N = Ae(f, r, g.value, o.value);
+      r.style.width = M, r.style.boxSizing = m, x(N), l.value = N, t = N;
     } else {
-      const M = Ce(v, r, m.value, o.value);
-      w(M), n.value = M, t = M;
+      const M = Ae(f, r, g.value, o.value);
+      x(M), l.value = M, t = M;
     }
   }
-  function p(I, S) {
-    c.value = I, I && (I.width !== void 0 && (d.value = I.width), !i.value && a.value && n.value.length > 0 && X(() => {
-      m.value = se(o.value, d.value), T(n.value), S && S();
+  function y(P, I) {
+    s.value = P, P && (P.width !== void 0 && (d.value = P.width), !i.value && a.value && l.value.length > 0 && C(() => {
+      g.value = se(o.value, d.value), T(l.value), I && I();
     }));
   }
   function h() {
-    m.value = se(o.value, d.value), T(n.value);
+    g.value = se(o.value, d.value), T(l.value);
   }
   return {
     refreshLayout: T,
-    setFixedDimensions: p,
+    setFixedDimensions: y,
     onResize: h,
-    calculateHeight: w
+    calculateHeight: x
   };
 }
 function ia(e) {
   const {
-    masonry: n,
+    masonry: l,
     container: i,
     columns: a,
-    virtualBufferPx: m,
+    virtualBufferPx: g,
     loadThresholdPx: d
-  } = e, f = W(e.handleScroll), o = W(0), c = W(0), y = m, t = W(!1), w = W({
+  } = e, v = F(e.handleScroll), o = F(0), s = F(0), w = g, t = F(!1), x = F({
     distanceToTrigger: 0,
     isNearTrigger: !1
-  }), T = K(() => {
-    const S = o.value - y, v = o.value + c.value + y, r = n.value;
+  }), T = Q(() => {
+    const I = o.value - w, f = o.value + s.value + w, r = l.value;
     return !r || r.length === 0 ? [] : r.filter((L) => {
       if (typeof L.top != "number" || typeof L.columnHeight != "number")
         return !0;
       const M = L.top;
-      return L.top + L.columnHeight >= S && M <= v;
+      return L.top + L.columnHeight >= I && M <= f;
     });
   });
-  function p(S) {
+  function y(I) {
     if (!i.value) return;
-    const { scrollTop: v, clientHeight: r } = i.value, s = v + r, L = S ?? $e(n.value, a.value), M = L.length ? Math.max(...L) : 0, g = typeof d == "number" ? d : 200, $ = g >= 0 ? Math.max(0, M - g) : Math.max(0, M + g), k = Math.max(0, $ - s), N = k <= 100;
-    w.value = {
+    const { scrollTop: f, clientHeight: r } = i.value, u = f + r, L = I ?? $e(l.value, a.value), M = L.length ? Math.max(...L) : 0, m = typeof d == "number" ? d : 200, N = m >= 0 ? Math.max(0, M - m) : Math.max(0, M + m), k = Math.max(0, N - u), B = k <= 100;
+    x.value = {
       distanceToTrigger: Math.round(k),
-      isNearTrigger: N
+      isNearTrigger: B
     };
   }
   async function h() {
     if (i.value) {
-      const v = i.value.scrollTop, r = i.value.clientHeight || window.innerHeight, s = r > 0 ? r : window.innerHeight;
-      o.value = v, c.value = s;
+      const f = i.value.scrollTop, r = i.value.clientHeight || window.innerHeight, u = r > 0 ? r : window.innerHeight;
+      o.value = f, s.value = u;
     }
-    t.value = !0, await X(), await new Promise((v) => requestAnimationFrame(() => v())), t.value = !1;
-    const S = $e(n.value, a.value);
-    f.value(S), p(S);
+    t.value = !0, await C(), await C(), t.value = !1;
+    const I = $e(l.value, a.value);
+    v.value(I), y(I);
   }
-  function I() {
-    o.value = 0, c.value = 0, t.value = !1, w.value = {
+  function P() {
+    o.value = 0, s.value = 0, t.value = !1, x.value = {
       distanceToTrigger: 0,
       isNearTrigger: !1
     };
   }
   return {
     viewportTop: o,
-    viewportHeight: c,
+    viewportHeight: s,
     virtualizing: t,
-    scrollProgress: w,
+    scrollProgress: x,
     visibleMasonry: T,
-    updateScrollProgress: p,
+    updateScrollProgress: y,
     updateViewport: h,
-    reset: I,
-    handleScroll: f
+    reset: P,
+    handleScroll: v
   };
 }
 function sa(e) {
-  const { masonry: n } = e, i = W(/* @__PURE__ */ new Set());
-  function a(f) {
-    return typeof f == "number" && f > 0 && Number.isFinite(f);
+  const { masonry: l } = e, i = F(/* @__PURE__ */ new Set());
+  function a(v) {
+    return typeof v == "number" && v > 0 && Number.isFinite(v);
   }
-  function m(f, o) {
+  function g(v, o) {
     try {
-      if (!Array.isArray(f) || f.length === 0) return;
-      const c = f.filter((t) => !a(t == null ? void 0 : t.width) || !a(t == null ? void 0 : t.height));
-      if (c.length === 0) return;
-      const y = [];
-      for (const t of c) {
-        const w = (t == null ? void 0 : t.id) ?? `idx:${n.value.indexOf(t)}`;
-        i.value.has(w) || (i.value.add(w), y.push(w));
+      if (!Array.isArray(v) || v.length === 0) return;
+      const s = v.filter((t) => !a(t == null ? void 0 : t.width) || !a(t == null ? void 0 : t.height));
+      if (s.length === 0) return;
+      const w = [];
+      for (const t of s) {
+        const x = (t == null ? void 0 : t.id) ?? `idx:${l.value.indexOf(t)}`;
+        i.value.has(x) || (i.value.add(x), w.push(x));
       }
-      if (y.length > 0) {
-        const t = y.slice(0, 10);
+      if (w.length > 0) {
+        const t = w.slice(0, 10);
         console.warn(
           "[Masonry] Items missing width/height detected:",
           {
             context: o,
-            count: y.length,
+            count: w.length,
             sampleIds: t,
             hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
           }
@@ -901,7 +934,7 @@ function sa(e) {
     i.value.clear();
   }
   return {
-    checkItemDimensions: m,
+    checkItemDimensions: g,
     invalidDimensionIds: i,
     reset: d
   };
@@ -912,13 +945,13 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
 }, fa = {
   key: 1,
   class: "relative w-full h-full"
-}, da = ["src"], ma = ["src", "autoplay", "controls"], ha = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, ga = {
+}, da = ["src"], ga = ["src", "autoplay", "controls"], ha = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, ma = {
   key: 3,
   class: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-center justify-center z-10"
 }, pa = {
   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"
-}, xe = /* @__PURE__ */ _e({
+}, xe = /* @__PURE__ */ Xe({
   __name: "MasonryItem",
   props: {
     item: {},
@@ -932,230 +965,226 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
     preloadThreshold: { default: 1 }
   },
   emits: ["preload:success", "preload:error", "mouse-enter", "mouse-leave", "in-view", "in-view-and-loaded"],
-  setup(e, { emit: n }) {
-    const i = e, a = n, m = W(!1), d = W(!1), f = W(null), o = W(!1), c = W(!1), y = W(null), t = W(!1), w = W(!1), T = W(!1), p = W(!1), h = W(!1), I = W(null), S = W(null);
-    let v = null;
-    const r = K(() => {
-      var l;
-      return i.type ?? ((l = i.item) == null ? void 0 : l.type) ?? "image";
-    }), s = K(() => {
-      var l;
-      return i.notFound ?? ((l = i.item) == null ? void 0 : l.notFound) ?? !1;
-    }), L = K(() => !!i.inSwipeMode);
-    function M(l, x) {
-      const E = l === "image" ? m.value : o.value;
-      w.value && E && !T.value && (T.value = !0, a("in-view-and-loaded", { item: i.item, type: l, src: x }));
+  setup(e, { emit: l }) {
+    const i = e, a = l, g = F(!1), d = F(!1), v = F(null), o = F(!1), s = F(!1), w = F(null), t = F(!1), x = F(!1), T = F(!1), y = F(!1), h = F(!1), P = F(null), I = F(null);
+    let f = null;
+    const r = Q(() => {
+      var n;
+      return i.type ?? ((n = i.item) == null ? void 0 : n.type) ?? "image";
+    }), u = Q(() => {
+      var n;
+      return i.notFound ?? ((n = i.item) == null ? void 0 : n.notFound) ?? !1;
+    }), L = Q(() => !!i.inSwipeMode);
+    function M(n, p) {
+      const S = n === "image" ? g.value : o.value;
+      x.value && S && !T.value && (T.value = !0, a("in-view-and-loaded", { item: i.item, type: n, src: p }));
     }
-    function g(l) {
-      a("mouse-enter", { item: i.item, type: l });
+    function m(n) {
+      a("mouse-enter", { item: i.item, type: n });
     }
-    function $(l) {
-      a("mouse-leave", { item: i.item, type: l });
+    function N(n) {
+      a("mouse-leave", { item: i.item, type: n });
     }
-    function k(l) {
+    function k(n) {
       if (L.value) return;
-      const x = l.target;
-      x && (x.paused ? x.play() : x.pause());
+      const p = n.target;
+      p && (p.paused ? p.play() : p.pause());
     }
-    function N(l) {
-      const x = l.target;
-      x && (L.value || x.play(), g("video"));
+    function B(n) {
+      const p = n.target;
+      p && (L.value || p.play(), m("video"));
     }
-    function A(l) {
-      const x = l.target;
-      x && (L.value || x.pause(), $("video"));
+    function R(n) {
+      const p = n.target;
+      p && (L.value || p.pause(), N("video"));
     }
-    function P(l) {
-      return new Promise((x, E) => {
-        if (!l) {
+    function $(n) {
+      return new Promise((p, S) => {
+        if (!n) {
           const b = new Error("No image source provided");
-          a("preload:error", { item: i.item, type: "image", src: l, error: b }), E(b);
+          a("preload:error", { item: i.item, type: "image", src: n, error: b }), S(b);
           return;
         }
-        const D = new Image(), V = Date.now(), C = 300;
-        D.onload = () => {
-          const b = Date.now() - V, H = Math.max(0, C - b);
+        const z = new Image(), V = Date.now(), Y = 300;
+        z.onload = () => {
+          const b = Date.now() - V, E = Math.max(0, Y - b);
           setTimeout(async () => {
-            m.value = !0, d.value = !1, p.value = !1, await X(), await new Promise((R) => setTimeout(R, 100)), h.value = !0, a("preload:success", { item: i.item, type: "image", src: l }), M("image", l), x();
-          }, H);
-        }, D.onerror = () => {
-          d.value = !0, m.value = !1, p.value = !1;
+            g.value = !0, d.value = !1, y.value = !1, await C(), await new Promise((O) => setTimeout(O, 100)), h.value = !0, a("preload:success", { item: i.item, type: "image", src: n }), M("image", n), p();
+          }, E);
+        }, z.onerror = () => {
+          d.value = !0, g.value = !1, y.value = !1;
           const b = new Error("Failed to load image");
-          a("preload:error", { item: i.item, type: "image", src: l, error: b }), E(b);
-        }, D.src = l;
+          a("preload:error", { item: i.item, type: "image", src: n, error: b }), S(b);
+        }, z.src = n;
       });
     }
-    function z(l) {
-      return new Promise((x, E) => {
-        if (!l) {
+    function W(n) {
+      return new Promise((p, S) => {
+        if (!n) {
           const b = new Error("No video source provided");
-          a("preload:error", { item: i.item, type: "video", src: l, error: b }), E(b);
+          a("preload:error", { item: i.item, type: "video", src: n, error: b }), S(b);
           return;
         }
-        const D = document.createElement("video"), V = Date.now(), C = 300;
-        D.preload = "metadata", D.muted = !0, D.onloadedmetadata = () => {
-          const b = Date.now() - V, H = Math.max(0, C - b);
+        const z = document.createElement("video"), V = Date.now(), Y = 300;
+        z.preload = "metadata", z.muted = !0, z.onloadedmetadata = () => {
+          const b = Date.now() - V, E = Math.max(0, Y - b);
           setTimeout(async () => {
-            o.value = !0, c.value = !1, p.value = !1, await X(), await new Promise((R) => setTimeout(R, 100)), h.value = !0, a("preload:success", { item: i.item, type: "video", src: l }), M("video", l), x();
-          }, H);
-        }, D.onerror = () => {
-          c.value = !0, o.value = !1, p.value = !1;
+            o.value = !0, s.value = !1, y.value = !1, await C(), await new Promise((O) => setTimeout(O, 100)), h.value = !0, a("preload:success", { item: i.item, type: "video", src: n }), M("video", n), p();
+          }, E);
+        }, z.onerror = () => {
+          s.value = !0, o.value = !1, y.value = !1;
           const b = new Error("Failed to load video");
-          a("preload:error", { item: i.item, type: "video", src: l, error: b }), E(b);
-        }, D.src = l;
+          a("preload:error", { item: i.item, type: "video", src: n, error: b }), S(b);
+        }, z.src = n;
       });
     }
-    async function F() {
-      var x;
-      if (!t.value || p.value || s.value || r.value === "video" && o.value || r.value === "image" && m.value)
+    async function H() {
+      var p;
+      if (!t.value || y.value || u.value || r.value === "video" && o.value || r.value === "image" && g.value)
         return;
-      const l = (x = i.item) == null ? void 0 : x.src;
-      if (l)
-        if (p.value = !0, h.value = !1, r.value === "video") {
-          y.value = l, o.value = !1, c.value = !1;
+      const n = (p = i.item) == null ? void 0 : p.src;
+      if (n)
+        if (y.value = !0, h.value = !1, r.value === "video") {
+          w.value = n, o.value = !1, s.value = !1;
           try {
-            await z(l);
+            await W(n);
           } catch {
           }
         } else {
-          f.value = l, m.value = !1, d.value = !1;
+          v.value = n, g.value = !1, d.value = !1;
           try {
-            await P(l);
+            await $(n);
           } catch {
           }
         }
     }
-    return Xe(async () => {
-      if (!I.value) return;
-      const l = [i.preloadThreshold, 1].filter((E, D, V) => V.indexOf(E) === D).sort((E, D) => E - D);
-      v = new IntersectionObserver(
-        (E) => {
-          E.forEach((D) => {
-            const V = D.intersectionRatio, C = V >= 1, b = V >= i.preloadThreshold;
-            if (C && !w.value) {
-              w.value = !0, a("in-view", { item: i.item, type: r.value });
-              const H = r.value === "image" ? f.value : y.value, R = r.value === "image" ? m.value : o.value;
-              H && R && M(r.value, H);
+    return Ge(async () => {
+      if (!P.value) return;
+      const n = [i.preloadThreshold, 1].filter((S, z, V) => V.indexOf(S) === z).sort((S, z) => S - z);
+      f = new IntersectionObserver(
+        (S) => {
+          S.forEach((z) => {
+            const V = z.intersectionRatio, Y = V >= 1, b = V >= i.preloadThreshold;
+            if (Y && !x.value) {
+              x.value = !0, a("in-view", { item: i.item, type: r.value });
+              const E = r.value === "image" ? v.value : w.value, O = r.value === "image" ? g.value : o.value;
+              E && O && M(r.value, E);
             }
-            b && !t.value ? (t.value = !0, F()) : D.isIntersecting;
+            b && !t.value ? (t.value = !0, H()) : z.isIntersecting;
           });
         },
         {
           // Trigger at both preloadThreshold and 1.0 (fully in view)
-          threshold: l
+          threshold: n
         }
-      ), v.observe(I.value), await X(), requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          x();
-        });
-      }), setTimeout(() => {
-        x();
+      ), f.observe(P.value), await C(), await C(), await C(), p(), setTimeout(() => {
+        p();
       }, 100);
-      function x() {
-        if (!I.value || w.value) return;
-        const E = I.value.getBoundingClientRect(), D = window.innerHeight, V = window.innerWidth;
-        if (E.top >= 0 && E.bottom <= D && E.left >= 0 && E.right <= V && E.height > 0 && E.width > 0) {
-          w.value = !0, a("in-view", { item: i.item, type: r.value });
-          const b = r.value === "image" ? f.value : y.value, H = r.value === "image" ? m.value : o.value;
-          b && H && M(r.value, b);
+      function p() {
+        if (!P.value || x.value) return;
+        const S = P.value.getBoundingClientRect(), z = window.innerHeight, V = window.innerWidth;
+        if (S.top >= 0 && S.bottom <= z && S.left >= 0 && S.right <= V && S.height > 0 && S.width > 0) {
+          x.value = !0, a("in-view", { item: i.item, type: r.value });
+          const b = r.value === "image" ? v.value : w.value, E = r.value === "image" ? g.value : o.value;
+          b && E && M(r.value, b);
         }
       }
-    }), Ge(() => {
-      v && (v.disconnect(), v = null);
-    }), ee(
+    }), qe(() => {
+      f && (f.disconnect(), f = null);
+    }), te(
       () => {
-        var l;
-        return (l = i.item) == null ? void 0 : l.src;
+        var n;
+        return (n = i.item) == null ? void 0 : n.src;
       },
-      async (l) => {
-        if (!(!l || s.value)) {
+      async (n) => {
+        if (!(!n || u.value)) {
           if (r.value === "video") {
-            if (l !== y.value && (o.value = !1, c.value = !1, y.value = l, t.value)) {
-              p.value = !0;
+            if (n !== w.value && (o.value = !1, s.value = !1, w.value = n, t.value)) {
+              y.value = !0;
               try {
-                await z(l);
+                await W(n);
               } catch {
               }
             }
-          } else if (l !== f.value && (m.value = !1, d.value = !1, f.value = l, t.value)) {
-            p.value = !0;
+          } else if (n !== v.value && (g.value = !1, d.value = !1, v.value = n, t.value)) {
+            y.value = !0;
             try {
-              await P(l);
+              await $(n);
             } catch {
             }
           }
         }
       }
-    ), ee(
+    ), te(
       () => i.isActive,
-      (l) => {
-        !L.value || !S.value || (l ? S.value.play() : S.value.pause());
+      (n) => {
+        !L.value || !I.value || (n ? I.value.play() : I.value.pause());
       }
-    ), (l, x) => (Y(), q("div", {
+    ), (n, p) => (_(), U("div", {
       ref_key: "containerRef",
-      ref: I,
+      ref: P,
       class: "relative w-full h-full flex flex-col"
     }, [
-      l.headerHeight > 0 ? (Y(), q("div", {
+      n.headerHeight > 0 ? (_(), U("div", {
         key: 0,
         class: "relative z-10",
-        style: he({ height: `${l.headerHeight}px` })
+        style: he({ height: `${n.headerHeight}px` })
       }, [
-        J(l.$slots, "header", {
-          item: l.item,
-          remove: l.remove,
-          imageLoaded: m.value,
+        J(n.$slots, "header", {
+          item: n.item,
+          remove: n.remove,
+          imageLoaded: g.value,
           imageError: d.value,
           videoLoaded: o.value,
-          videoError: c.value,
-          showNotFound: s.value,
-          isLoading: p.value,
+          videoError: s.value,
+          showNotFound: u.value,
+          isLoading: y.value,
           mediaType: r.value,
-          isFullyInView: w.value
+          isFullyInView: x.value
         })
-      ], 4)) : te("", !0),
-      U("div", ua, [
-        J(l.$slots, "default", {
-          item: l.item,
-          remove: l.remove,
-          imageLoaded: m.value,
+      ], 4)) : ae("", !0),
+      G("div", ua, [
+        J(n.$slots, "default", {
+          item: n.item,
+          remove: n.remove,
+          imageLoaded: g.value,
           imageError: d.value,
           videoLoaded: o.value,
-          videoError: c.value,
-          showNotFound: s.value,
-          isLoading: p.value,
+          videoError: s.value,
+          showNotFound: u.value,
+          isLoading: y.value,
           mediaType: r.value,
-          imageSrc: f.value,
-          videoSrc: y.value,
+          imageSrc: v.value,
+          videoSrc: w.value,
           showMedia: h.value,
-          isFullyInView: w.value
+          isFullyInView: x.value
         }, () => [
-          U("div", ca, [
-            s.value ? (Y(), q("div", va, x[3] || (x[3] = [
-              U("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
-              U("span", { class: "font-medium" }, "Not Found", -1),
-              U("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
-            ]))) : (Y(), q("div", fa, [
-              r.value === "image" && f.value ? (Y(), q("img", {
+          G("div", ca, [
+            u.value ? (_(), U("div", va, p[3] || (p[3] = [
+              G("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
+              G("span", { class: "font-medium" }, "Not Found", -1),
+              G("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
+            ]))) : (_(), U("div", fa, [
+              r.value === "image" && v.value ? (_(), U("img", {
                 key: 0,
-                src: f.value,
-                class: re([
+                src: v.value,
+                class: ie([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  m.value && h.value ? "opacity-100" : "opacity-0"
+                  g.value && h.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 loading: "lazy",
                 decoding: "async",
                 alt: "",
-                onMouseenter: x[0] || (x[0] = (E) => g("image")),
-                onMouseleave: x[1] || (x[1] = (E) => $("image"))
-              }, null, 42, da)) : te("", !0),
-              r.value === "video" && y.value ? (Y(), q("video", {
+                onMouseenter: p[0] || (p[0] = (S) => m("image")),
+                onMouseleave: p[1] || (p[1] = (S) => N("image"))
+              }, null, 42, da)) : ae("", !0),
+              r.value === "video" && w.value ? (_(), U("video", {
                 key: 1,
                 ref_key: "videoEl",
-                ref: S,
-                src: y.value,
-                class: re([
+                ref: I,
+                src: w.value,
+                class: ie([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
                   o.value && h.value ? "opacity-100" : "opacity-0"
                 ]),
@@ -1165,60 +1194,60 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
                 playsinline: "",
                 autoplay: L.value && i.isActive,
                 controls: L.value,
-                onClick: Ae(k, ["stop"]),
-                onTouchend: Ae(k, ["stop", "prevent"]),
-                onMouseenter: N,
-                onMouseleave: A,
-                onError: x[2] || (x[2] = (E) => c.value = !0)
-              }, null, 42, ma)) : te("", !0),
-              !m.value && !o.value && !d.value && !c.value ? (Y(), q("div", {
+                onClick: Re(k, ["stop"]),
+                onTouchend: Re(k, ["stop", "prevent"]),
+                onMouseenter: B,
+                onMouseleave: R,
+                onError: p[2] || (p[2] = (S) => s.value = !0)
+              }, null, 42, ga)) : ae("", !0),
+              !g.value && !o.value && !d.value && !s.value ? (_(), U("div", {
                 key: 2,
-                class: re([
+                class: ie([
                   "absolute inset-0 bg-slate-100 flex items-center justify-center transition-opacity duration-500",
                   h.value ? "opacity-0 pointer-events-none" : "opacity-100"
                 ])
               }, [
-                U("div", ha, [
-                  J(l.$slots, "placeholder-icon", { mediaType: r.value }, () => [
-                    U("i", {
-                      class: re(r.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
+                G("div", ha, [
+                  J(n.$slots, "placeholder-icon", { mediaType: r.value }, () => [
+                    G("i", {
+                      class: ie(r.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
                     }, null, 2)
                   ])
                 ])
-              ], 2)) : te("", !0),
-              p.value ? (Y(), q("div", ga, x[4] || (x[4] = [
-                U("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
-                  U("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
+              ], 2)) : ae("", !0),
+              y.value ? (_(), U("div", ma, p[4] || (p[4] = [
+                G("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
+                  G("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
                 ], -1)
-              ]))) : te("", !0),
-              r.value === "image" && d.value || r.value === "video" && c.value ? (Y(), q("div", pa, [
-                U("i", {
-                  class: re(r.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
+              ]))) : ae("", !0),
+              r.value === "image" && d.value || r.value === "video" && s.value ? (_(), U("div", pa, [
+                G("i", {
+                  class: ie(r.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
                 }, null, 2),
-                U("span", null, "Failed to load " + Pe(r.value), 1)
-              ])) : te("", !0)
+                G("span", null, "Failed to load " + Ee(r.value), 1)
+              ])) : ae("", !0)
             ]))
           ])
         ])
       ]),
-      l.footerHeight > 0 ? (Y(), q("div", {
+      n.footerHeight > 0 ? (_(), U("div", {
         key: 1,
         class: "relative z-10",
-        style: he({ height: `${l.footerHeight}px` })
+        style: he({ height: `${n.footerHeight}px` })
       }, [
-        J(l.$slots, "footer", {
-          item: l.item,
-          remove: l.remove,
-          imageLoaded: m.value,
+        J(n.$slots, "footer", {
+          item: n.item,
+          remove: n.remove,
+          imageLoaded: g.value,
           imageError: d.value,
           videoLoaded: o.value,
-          videoError: c.value,
-          showNotFound: s.value,
-          isLoading: p.value,
+          videoError: s.value,
+          showNotFound: u.value,
+          isLoading: y.value,
           mediaType: r.value,
-          isFullyInView: w.value
+          isFullyInView: x.value
         })
-      ], 4)) : te("", !0)
+      ], 4)) : ae("", !0)
     ], 512));
   }
 }), ya = {
@@ -1230,13 +1259,13 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
 }, Ma = {
   key: 1,
   class: "w-full py-8 text-center"
-}, Ta = { class: "text-red-500 dark:text-red-400" }, Ia = {
+}, Ta = { class: "text-red-500 dark:text-red-400" }, Pa = {
   key: 0,
   class: "w-full py-8 text-center"
-}, La = {
+}, Ia = {
   key: 1,
   class: "w-full py-8 text-center"
-}, Sa = { class: "text-red-500 dark:text-red-400" }, ka = /* @__PURE__ */ _e({
+}, La = { class: "text-red-500 dark:text-red-400" }, ka = /* @__PURE__ */ Xe({
   __name: "Masonry",
   props: {
     getPage: {
@@ -1361,8 +1390,8 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
     "item:mouse-leave",
     "update:context"
   ],
-  setup(e, { expose: n, emit: i }) {
-    const a = e, m = {
+  setup(e, { expose: l, emit: i }) {
+    const a = e, g = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -1371,79 +1400,79 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
       paddingLeft: 0,
       paddingRight: 0,
       placement: "masonry"
-    }, d = K(() => {
-      var u;
+    }, d = Q(() => {
+      var c;
       return {
-        ...m,
+        ...g,
         ...a.layout,
         sizes: {
-          ...m.sizes,
-          ...((u = a.layout) == null ? void 0 : u.sizes) || {}
+          ...g.sizes,
+          ...((c = a.layout) == null ? void 0 : c.sizes) || {}
         }
       };
-    }), f = W(null), o = W(typeof window < "u" ? window.innerWidth : 1024), c = W(typeof window < "u" ? window.innerHeight : 768), y = W(null);
+    }), v = F(null), o = F(typeof window < "u" ? window.innerWidth : 1024), s = F(typeof window < "u" ? window.innerHeight : 768), w = F(null);
     let t = null;
-    function w(u) {
+    function x(c) {
       return {
         sm: 640,
         md: 768,
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }[u] || 768;
+      }[c] || 768;
     }
-    const T = K(() => {
+    const T = Q(() => {
       if (a.layoutMode === "masonry") return !1;
       if (a.layoutMode === "swipe") return !0;
-      const u = typeof a.mobileBreakpoint == "string" ? w(a.mobileBreakpoint) : a.mobileBreakpoint;
-      return o.value < u;
-    }), p = i, h = K({
+      const c = typeof a.mobileBreakpoint == "string" ? x(a.mobileBreakpoint) : a.mobileBreakpoint;
+      return o.value < c;
+    }), y = i, h = Q({
       get: () => a.items,
-      set: (u) => p("update:items", u)
-    }), I = K({
+      set: (c) => y("update:items", c)
+    }), P = Q({
       get: () => a.context,
-      set: (u) => p("update:context", u)
+      set: (c) => y("update:context", c)
     });
-    function S(u) {
-      I.value = u;
+    function I(c) {
+      P.value = c;
     }
-    const v = K(() => {
-      const u = h.value;
-      return (u == null ? void 0 : u.length) ?? 0;
-    }), r = W(7), s = W(null), L = W([]), M = W(null), g = W(!1), $ = W(0), k = W(!1), N = W(null), A = W(!1), P = K(() => Kt(o.value)), z = sa({
+    const f = Q(() => {
+      const c = h.value;
+      return (c == null ? void 0 : c.length) ?? 0;
+    }), r = F(7), u = F(null), L = F([]), M = F(null), m = F(!1), N = F(0), k = F(!1), B = F(null), R = F(!1), $ = Q(() => Kt(o.value)), W = sa({
       masonry: h
-    }), { checkItemDimensions: F, reset: l } = z, x = ra({
+    }), { checkItemDimensions: H, reset: n } = W, p = ra({
       masonry: h,
       useSwipeMode: T,
-      container: s,
+      container: u,
       columns: r,
       containerWidth: o,
-      masonryContentHeight: $,
+      masonryContentHeight: N,
       layout: d,
-      fixedDimensions: y,
-      checkItemDimensions: F
-    }), { refreshLayout: E, setFixedDimensions: D, onResize: V } = x, C = ia({
+      fixedDimensions: w,
+      checkItemDimensions: H
+    }), { refreshLayout: S, setFixedDimensions: z, onResize: V } = p, Y = ia({
       masonry: h,
-      container: s,
+      container: u,
       columns: r,
       virtualBufferPx: a.virtualBufferPx,
       loadThresholdPx: a.loadThresholdPx,
       handleScroll: () => {
       }
       // Will be set after pagination is initialized
-    }), { viewportTop: b, viewportHeight: H, virtualizing: R, visibleMasonry: ne, updateScrollProgress: _, updateViewport: ie, reset: Q } = C, { onEnter: Qe, onBeforeEnter: Ze, onBeforeLeave: et, onLeave: tt } = ta(
-      { container: s },
-      { leaveDurationMs: a.leaveDurationMs, virtualizing: R }
+    }), { viewportTop: b, viewportHeight: E, virtualizing: O, visibleMasonry: ne, updateScrollProgress: X, updateViewport: Z, reset: K } = Y, { onEnter: Qe, onBeforeEnter: Ze, onBeforeLeave: et, onLeave: tt } = ta(
+      { container: u },
+      { leaveDurationMs: a.leaveDurationMs, virtualizing: O }
     ), at = Qe, nt = Ze, lt = et, ot = tt, rt = la({
       getPage: a.getPage,
-      context: I,
+      context: P,
       masonry: h,
-      isLoading: g,
+      isLoading: m,
       hasReachedEnd: k,
-      loadError: N,
+      loadError: B,
       currentPage: M,
       paginationHistory: L,
-      refreshLayout: E,
+      refreshLayout: S,
       retryMaxAttempts: a.retryMaxAttempts,
       retryInitialDelayMs: a.retryInitialDelayMs,
       retryBackoffStepMs: a.retryBackoffStepMs,
@@ -1451,51 +1480,51 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
       backfillDelayMs: a.backfillDelayMs,
       backfillMaxCalls: a.backfillMaxCalls,
       pageSize: a.pageSize,
-      emits: p
-    }), { loadPage: be, loadNext: ge, refreshCurrentPage: it, cancelLoad: Me, maybeBackfillToTarget: st } = rt, Z = na({
+      emits: y
+    }), { loadPage: be, loadNext: me, refreshCurrentPage: it, cancelLoad: Me, maybeBackfillToTarget: st } = rt, ee = na({
       useSwipeMode: T,
       masonry: h,
-      isLoading: g,
-      loadNext: ge,
+      isLoading: m,
+      loadNext: me,
       loadPage: be,
       paginationHistory: L
     }), { handleScroll: ut } = aa({
-      container: s,
+      container: u,
       masonry: h,
       columns: r,
-      containerHeight: $,
-      isLoading: g,
+      containerHeight: N,
+      isLoading: m,
       pageSize: a.pageSize,
-      refreshLayout: E,
-      setItemsRaw: (u) => {
-        h.value = u;
+      refreshLayout: S,
+      setItemsRaw: (c) => {
+        h.value = c;
       },
-      loadNext: ge,
+      loadNext: me,
       loadThresholdPx: a.loadThresholdPx
     });
-    C.handleScroll.value = ut;
+    Y.handleScroll.value = ut;
     const ct = oa({
       masonry: h,
       useSwipeMode: T,
-      refreshLayout: E,
-      loadNext: ge,
+      refreshLayout: S,
+      loadNext: me,
       maybeBackfillToTarget: st,
       paginationHistory: L
-    }), { remove: ue, removeMany: vt, restore: ft, restoreMany: dt, removeAll: mt } = ct;
-    function ht(u) {
-      D(u, _), !u && f.value && (o.value = f.value.clientWidth, c.value = f.value.clientHeight);
+    }), { remove: ue, removeMany: vt, restore: ft, restoreMany: dt, removeAll: gt } = ct;
+    function ht(c) {
+      z(c, X), !c && v.value && (o.value = v.value.clientWidth, s.value = v.value.clientHeight);
     }
-    n({
+    l({
       // Cancels any ongoing load operations (page loads, backfills, etc.)
       cancelLoad: Me,
       // Opaque caller context passed through to getPage(page, context). Useful for including filters, service selection, tabId, etc.
-      context: I,
+      context: P,
       // Container height (wrapper element) in pixels
-      containerHeight: c,
+      containerHeight: s,
       // Container width (wrapper element) in pixels
       containerWidth: o,
       // Current Tailwind breakpoint name (base, sm, md, lg, xl, 2xl) based on containerWidth
-      currentBreakpoint: P,
+      currentBreakpoint: $,
       // Current page number or cursor being displayed
       currentPage: M,
       // Completely destroys the component, clearing all state and resetting to initial state
@@ -1505,13 +1534,13 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
       // Initializes the component with items, page, and next page cursor. Use this for manual init mode.
       initialize: Tt,
       // Boolean indicating if the component has been initialized (first content has loaded)
-      isInitialized: A,
+      isInitialized: R,
       // Boolean indicating if a page load or backfill operation is currently in progress
-      isLoading: g,
+      isLoading: m,
       // Error object if the last load operation failed, null otherwise
-      loadError: N,
+      loadError: B,
       // Loads the next page of items asynchronously
-      loadNext: ge,
+      loadNext: me,
       // Loads a specific page number or cursor asynchronously
       loadPage: be,
       // Array tracking pagination history (pages/cursors that have been loaded)
@@ -1519,11 +1548,11 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
       // Refreshes the current page by clearing items and reloading from the current page
       refreshCurrentPage: it,
       // Recalculates the layout positions for all items. Call this after manually modifying items.
-      refreshLayout: E,
+      refreshLayout: S,
       // Removes a single item from the masonry
       remove: ue,
       // Removes all items from the masonry
-      removeAll: mt,
+      removeAll: gt,
       // Removes multiple items from the masonry in a single operation
       removeMany: vt,
       // Resets the component to initial state (clears items, resets pagination, scrolls to top)
@@ -1537,171 +1566,171 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
       // Scrolls the container to the top
       scrollToTop: yt,
       // Sets the opaque caller context (alternative to v-model:context)
-      setContext: S,
+      setContext: I,
       // Sets fixed dimensions for the container, overriding ResizeObserver. Pass null to restore automatic sizing.
       setFixedDimensions: ht,
       // Computed property returning the total number of items currently in the masonry
-      totalItems: K(() => h.value.length)
+      totalItems: Q(() => h.value.length)
     });
-    const ce = Z.currentSwipeIndex, pe = Z.swipeOffset, ye = Z.isDragging, le = Z.swipeContainer, Fe = Z.handleTouchStart, ze = Z.handleTouchMove, De = Z.handleTouchEnd, Be = Z.handleMouseDown, Te = Z.handleMouseMove, Ie = Z.handleMouseUp, Le = Z.snapToCurrentItem;
-    function gt(u) {
-      const B = v.value, j = typeof u == "string" ? parseInt(u, 10) : u;
-      return B > 0 ? `${j * (100 / B)}%` : "0%";
+    const ce = ee.currentSwipeIndex, pe = ee.swipeOffset, ye = ee.isDragging, oe = ee.swipeContainer, Ne = ee.handleTouchStart, ze = ee.handleTouchMove, De = ee.handleTouchEnd, Be = ee.handleMouseDown, Te = ee.handleMouseMove, Pe = ee.handleMouseUp, Ie = ee.snapToCurrentItem;
+    function mt(c) {
+      const D = f.value, j = typeof c == "string" ? parseInt(c, 10) : c;
+      return D > 0 ? `${j * (100 / D)}%` : "0%";
     }
     function pt() {
-      const u = v.value;
-      return u > 0 ? `${100 / u}%` : "0%";
+      const c = f.value;
+      return c > 0 ? `${100 / c}%` : "0%";
     }
-    function yt(u) {
-      s.value && s.value.scrollTo({
+    function yt(c) {
+      u.value && u.value.scrollTo({
         top: 0,
-        behavior: (u == null ? void 0 : u.behavior) ?? "smooth",
-        ...u
+        behavior: (c == null ? void 0 : c.behavior) ?? "smooth",
+        ...c
       });
     }
-    function wt(u) {
-      s.value && (s.value.scrollTo({
-        top: u.top ?? s.value.scrollTop,
-        left: u.left ?? s.value.scrollLeft,
-        behavior: u.behavior ?? "auto"
-      }), s.value && (b.value = s.value.scrollTop, H.value = s.value.clientHeight || window.innerHeight));
+    function wt(c) {
+      u.value && (u.value.scrollTo({
+        top: c.top ?? u.value.scrollTop,
+        left: c.left ?? u.value.scrollLeft,
+        behavior: c.behavior ?? "auto"
+      }), u.value && (b.value = u.value.scrollTop, E.value = u.value.clientHeight || window.innerHeight));
     }
     function xt() {
-      V(), s.value && (b.value = s.value.scrollTop, H.value = s.value.clientHeight);
+      V(), u.value && (b.value = u.value.scrollTop, E.value = u.value.clientHeight);
     }
     function bt() {
-      Me(), s.value && s.value.scrollTo({
+      Me(), u.value && u.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), h.value = [], c.value = 0, M.value = a.loadAtPage, L.value = [a.loadAtPage], k.value = !1, N.value = null, A.value = !1, Q();
+      }), h.value = [], s.value = 0, M.value = a.loadAtPage, L.value = [a.loadAtPage], k.value = !1, B.value = null, R.value = !1, K();
     }
     function Mt() {
-      Me(), h.value = [], $.value = 0, M.value = null, L.value = [], k.value = !1, N.value = null, g.value = !1, A.value = !1, ce.value = 0, pe.value = 0, ye.value = !1, Q(), l(), s.value && s.value.scrollTo({
+      Me(), h.value = [], N.value = 0, M.value = null, L.value = [], k.value = !1, B.value = null, m.value = !1, R.value = !1, ce.value = 0, pe.value = 0, ye.value = !1, K(), n(), u.value && u.value.scrollTo({
         top: 0,
         behavior: "auto"
         // Instant scroll for destroy
       });
     }
-    const oe = Ye(async () => {
-      T.value || await ie();
-    }, 200), Ne = Ye(xt, 200);
-    function We() {
-      Z.handleWindowResize();
+    const re = Ue(async () => {
+      T.value || await Z();
+    }, 200), We = Ue(xt, 200);
+    function Fe() {
+      ee.handleWindowResize();
     }
-    function Tt(u, B, j) {
-      M.value = B, L.value = [B], j != null && L.value.push(j), k.value = j === null, F(u, "initialize");
-      const ae = h.value, O = ae.length === 0 ? u : [...ae, ...u];
-      h.value = O, T.value ? ce.value === 0 && h.value.length > 0 && (pe.value = 0) : (E(O), s.value && (b.value = s.value.scrollTop, H.value = s.value.clientHeight || window.innerHeight), X(() => {
-        s.value && (b.value = s.value.scrollTop, H.value = s.value.clientHeight || window.innerHeight, _());
-      })), u && u.length > 0 && (A.value = !0);
+    async function Tt(c, D, j) {
+      M.value = D, L.value = [D], j != null && L.value.push(j), k.value = j === null, H(c, "initialize");
+      const le = h.value, A = le.length === 0 ? c : [...le, ...c];
+      h.value = A, await C(), T.value ? ce.value === 0 && h.value.length > 0 && (pe.value = 0) : (await C(), await C(), S(A), u.value && (b.value = u.value.scrollTop, E.value = u.value.clientHeight || window.innerHeight), C(() => {
+        u.value && (b.value = u.value.scrollTop, E.value = u.value.clientHeight || window.innerHeight, X());
+      })), c && c.length > 0 && (R.value = !0);
     }
-    return ee(
+    return te(
       d,
       () => {
-        T.value || s.value && (r.value = se(d.value, o.value), E(h.value));
+        T.value || u.value && (r.value = se(d.value, o.value), S(h.value));
       },
       { deep: !0 }
-    ), ee(() => a.layoutMode, () => {
-      y.value && y.value.width !== void 0 ? o.value = y.value.width : f.value && (o.value = f.value.clientWidth);
-    }), ee(s, (u) => {
-      u && !T.value ? (u.removeEventListener("scroll", oe), u.addEventListener("scroll", oe, { passive: !0 })) : u && u.removeEventListener("scroll", oe);
-    }, { immediate: !0 }), ee(
+    ), te(() => a.layoutMode, () => {
+      w.value && w.value.width !== void 0 ? o.value = w.value.width : v.value && (o.value = v.value.clientWidth);
+    }), te(u, (c) => {
+      c && !T.value ? (c.removeEventListener("scroll", re), c.addEventListener("scroll", re, { passive: !0 })) : c && c.removeEventListener("scroll", re);
+    }, { immediate: !0 }), te(
       () => h.value.length,
-      (u, B) => {
-        a.init === "manual" && !A.value && u > 0 && B === 0 && (A.value = !0);
+      (c, D) => {
+        a.init === "manual" && !R.value && c > 0 && D === 0 && (R.value = !0);
       },
       { immediate: !1 }
-    ), ee(T, (u, B) => {
-      B === void 0 && u === !1 || X(() => {
-        u ? (document.addEventListener("mousemove", Te), document.addEventListener("mouseup", Ie), s.value && s.value.removeEventListener("scroll", oe), ce.value = 0, pe.value = 0, h.value.length > 0 && Le()) : (document.removeEventListener("mousemove", Te), document.removeEventListener("mouseup", Ie), s.value && f.value && (y.value && y.value.width !== void 0 ? o.value = y.value.width : o.value = f.value.clientWidth, s.value.removeEventListener("scroll", oe), s.value.addEventListener("scroll", oe, { passive: !0 }), h.value.length > 0 && (r.value = se(d.value, o.value), E(h.value), b.value = s.value.scrollTop, H.value = s.value.clientHeight, _())));
+    ), te(T, (c, D) => {
+      D === void 0 && c === !1 || C(() => {
+        c ? (document.addEventListener("mousemove", Te), document.addEventListener("mouseup", Pe), u.value && u.value.removeEventListener("scroll", re), ce.value = 0, pe.value = 0, h.value.length > 0 && Ie()) : (document.removeEventListener("mousemove", Te), document.removeEventListener("mouseup", Pe), u.value && v.value && (w.value && w.value.width !== void 0 ? o.value = w.value.width : o.value = v.value.clientWidth, u.value.removeEventListener("scroll", re), u.value.addEventListener("scroll", re, { passive: !0 }), h.value.length > 0 && (r.value = se(d.value, o.value), S(h.value), b.value = u.value.scrollTop, E.value = u.value.clientHeight, X())));
       });
-    }, { immediate: !0 }), ee(le, (u) => {
-      u && (u.addEventListener("touchstart", Fe, { passive: !1 }), u.addEventListener("touchmove", ze, { passive: !1 }), u.addEventListener("touchend", De), u.addEventListener("mousedown", Be));
-    }), ee(() => h.value.length, (u, B) => {
-      T.value && u > 0 && B === 0 && (ce.value = 0, X(() => Le()));
-    }), ee(f, (u) => {
-      t && (t.disconnect(), t = null), u && typeof ResizeObserver < "u" ? (t = new ResizeObserver((B) => {
-        if (!y.value)
-          for (const j of B) {
-            const ae = j.contentRect.width, O = j.contentRect.height;
-            o.value !== ae && (o.value = ae), c.value !== O && (c.value = O);
+    }, { immediate: !0 }), te(oe, (c) => {
+      c && (c.addEventListener("touchstart", Ne, { passive: !1 }), c.addEventListener("touchmove", ze, { passive: !1 }), c.addEventListener("touchend", De), c.addEventListener("mousedown", Be));
+    }), te(() => h.value.length, (c, D) => {
+      T.value && c > 0 && D === 0 && (ce.value = 0, C(() => Ie()));
+    }), te(v, (c) => {
+      t && (t.disconnect(), t = null), c && typeof ResizeObserver < "u" ? (t = new ResizeObserver((D) => {
+        if (!w.value)
+          for (const j of D) {
+            const le = j.contentRect.width, A = j.contentRect.height;
+            o.value !== le && (o.value = le), s.value !== A && (s.value = A);
           }
-      }), t.observe(u), y.value || (o.value = u.clientWidth, c.value = u.clientHeight)) : u && (y.value || (o.value = u.clientWidth, c.value = u.clientHeight));
-    }, { immediate: !0 }), ee(o, (u, B) => {
-      u !== B && u > 0 && !T.value && s.value && h.value.length > 0 && X(() => {
-        r.value = se(d.value, u), E(h.value), _();
+      }), t.observe(c), w.value || (o.value = c.clientWidth, s.value = c.clientHeight)) : c && (w.value || (o.value = c.clientWidth, s.value = c.clientHeight));
+    }, { immediate: !0 }), te(o, (c, D) => {
+      c !== D && c > 0 && !T.value && u.value && h.value.length > 0 && C(() => {
+        r.value = se(d.value, c), S(h.value), X();
       });
-    }), Xe(async () => {
+    }), Ge(async () => {
       try {
-        await X(), f.value && !t && (o.value = f.value.clientWidth, c.value = f.value.clientHeight), T.value || (r.value = se(d.value, o.value), s.value && (b.value = s.value.scrollTop, H.value = s.value.clientHeight));
-        const u = a.loadAtPage;
-        if (L.value = [u], a.init === "auto") {
-          A.value = !0, await X();
+        await C(), v.value && !t && (o.value = v.value.clientWidth, s.value = v.value.clientHeight), T.value || (r.value = se(d.value, o.value), u.value && (b.value = u.value.scrollTop, E.value = u.value.clientHeight));
+        const c = a.loadAtPage;
+        if (a.init === "auto" && L.value.length === 0 && (L.value = [c]), a.init === "auto") {
+          R.value = !0, await C();
           try {
-            await be(u);
+            await be(c);
           } catch {
           }
         }
-        T.value ? X(() => Le()) : _();
-      } catch (u) {
-        N.value || (console.error("Error during component initialization:", u), N.value = me(u)), g.value = !1;
+        T.value ? C(() => Ie()) : X();
+      } catch (c) {
+        B.value || (console.error("Error during component initialization:", c), B.value = ge(c)), m.value = !1;
       }
-      window.addEventListener("resize", Ne), window.addEventListener("resize", We);
-    }), Ge(() => {
-      var u;
-      t && (t.disconnect(), t = null), (u = s.value) == null || u.removeEventListener("scroll", oe), window.removeEventListener("resize", Ne), window.removeEventListener("resize", We), le.value && (le.value.removeEventListener("touchstart", Fe), le.value.removeEventListener("touchmove", ze), le.value.removeEventListener("touchend", De), le.value.removeEventListener("mousedown", Be)), document.removeEventListener("mousemove", Te), document.removeEventListener("mouseup", Ie);
-    }), (u, B) => (Y(), q("div", {
+      window.addEventListener("resize", We), window.addEventListener("resize", Fe);
+    }), qe(() => {
+      var c;
+      t && (t.disconnect(), t = null), (c = u.value) == null || c.removeEventListener("scroll", re), window.removeEventListener("resize", We), window.removeEventListener("resize", Fe), oe.value && (oe.value.removeEventListener("touchstart", Ne), oe.value.removeEventListener("touchmove", ze), oe.value.removeEventListener("touchend", De), oe.value.removeEventListener("mousedown", Be)), document.removeEventListener("mousemove", Te), document.removeEventListener("mouseup", Pe);
+    }), (c, D) => (_(), U("div", {
       ref_key: "wrapper",
-      ref: f,
+      ref: v,
       class: "w-full h-full flex flex-col relative"
     }, [
-      A.value ? T.value ? (Y(), q("div", {
+      R.value ? T.value ? (_(), U("div", {
         key: 1,
-        class: re(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": a.forceMotion, "cursor-grab": !G(ye), "cursor-grabbing": G(ye) }]),
+        class: ie(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": a.forceMotion, "cursor-grab": !q(ye), "cursor-grabbing": q(ye) }]),
         ref_key: "swipeContainer",
-        ref: le,
+        ref: oe,
         style: { height: "100%", "max-height": "100%", position: "relative" }
       }, [
-        U("div", {
+        G("div", {
           class: "relative w-full",
           style: he({
-            transform: `translateY(${G(pe)}px)`,
-            transition: G(ye) ? "none" : `transform ${e.transitionDurationMs}ms ${e.transitionEasing}`,
-            height: `${v.value * 100}%`
+            transform: `translateY(${q(pe)}px)`,
+            transition: q(ye) ? "none" : `transform ${e.transitionDurationMs}ms ${e.transitionEasing}`,
+            height: `${f.value * 100}%`
           })
         }, [
-          (Y(!0), q(Re, null, Oe(h.value, (j, ae) => (Y(), q("div", {
+          (_(!0), U(Ce, null, Oe(h.value, (j, le) => (_(), U("div", {
             key: `${j.page}-${j.id}`,
             class: "absolute top-0 left-0 w-full",
             style: he({
-              top: gt(ae),
+              top: mt(le),
               height: pt()
             })
           }, [
-            U("div", wa, [
-              U("div", xa, [
-                J(u.$slots, "default", {
+            G("div", wa, [
+              G("div", xa, [
+                J(c.$slots, "default", {
                   item: j,
-                  remove: G(ue),
+                  remove: q(ue),
                   index: j.originalIndex ?? h.value.indexOf(j)
                 }, () => [
-                  Se(xe, {
+                  Le(xe, {
                     item: j,
-                    remove: G(ue),
+                    remove: q(ue),
                     "header-height": d.value.header,
                     "footer-height": d.value.footer,
                     "in-swipe-mode": !0,
-                    "is-active": ae === G(ce),
-                    "onPreload:success": B[0] || (B[0] = (O) => p("item:preload:success", O)),
-                    "onPreload:error": B[1] || (B[1] = (O) => p("item:preload:error", O)),
-                    onMouseEnter: B[2] || (B[2] = (O) => p("item:mouse-enter", O)),
-                    onMouseLeave: B[3] || (B[3] = (O) => p("item:mouse-leave", O))
+                    "is-active": le === q(ce),
+                    "onPreload:success": D[0] || (D[0] = (A) => y("item:preload:success", A)),
+                    "onPreload:error": D[1] || (D[1] = (A) => y("item:preload:error", A)),
+                    onMouseEnter: D[2] || (D[2] = (A) => y("item:mouse-enter", A)),
+                    onMouseLeave: D[3] || (D[3] = (A) => y("item:mouse-leave", A))
                   }, {
-                    header: ve((O) => [
-                      J(u.$slots, "item-header", fe({ ref_for: !0 }, O), void 0, !0)
+                    header: ve((A) => [
+                      J(c.$slots, "item-header", fe({ ref_for: !0 }, A), void 0, !0)
                     ]),
-                    footer: ve((O) => [
-                      J(u.$slots, "item-footer", fe({ ref_for: !0 }, O), void 0, !0)
+                    footer: ve((A) => [
+                      J(c.$slots, "item-footer", fe({ ref_for: !0 }, A), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "remove", "header-height", "footer-height", "is-active"])
@@ -1710,62 +1739,62 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
             ])
           ], 4))), 128))
         ], 4),
-        k.value && h.value.length > 0 ? (Y(), q("div", ba, [
-          J(u.$slots, "end-message", {}, () => [
-            B[9] || (B[9] = U("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
+        k.value && h.value.length > 0 ? (_(), U("div", ba, [
+          J(c.$slots, "end-message", {}, () => [
+            D[9] || (D[9] = G("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
           ], !0)
-        ])) : te("", !0),
-        N.value && h.value.length > 0 ? (Y(), q("div", Ma, [
-          J(u.$slots, "error-message", { error: N.value }, () => [
-            U("p", Ta, "Failed to load content: " + Pe(N.value.message), 1)
+        ])) : ae("", !0),
+        B.value && h.value.length > 0 ? (_(), U("div", Ma, [
+          J(c.$slots, "error-message", { error: B.value }, () => [
+            G("p", Ta, "Failed to load content: " + Ee(B.value.message), 1)
           ], !0)
-        ])) : te("", !0)
-      ], 2)) : (Y(), q("div", {
+        ])) : ae("", !0)
+      ], 2)) : (_(), U("div", {
         key: 2,
-        class: re(["overflow-auto w-full flex-1 masonry-container", { "force-motion": a.forceMotion }]),
+        class: ie(["overflow-auto w-full flex-1 masonry-container", { "force-motion": a.forceMotion }]),
         ref_key: "container",
-        ref: s
+        ref: u
       }, [
-        U("div", {
+        G("div", {
           class: "relative",
-          style: he({ height: `${$.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
+          style: he({ height: `${N.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
         }, [
-          Se(It, {
+          Le(Pt, {
             name: "masonry",
             css: !1,
-            onEnter: G(at),
-            onBeforeEnter: G(nt),
-            onLeave: G(ot),
-            onBeforeLeave: G(lt)
+            onEnter: q(at),
+            onBeforeEnter: q(nt),
+            onLeave: q(ot),
+            onBeforeLeave: q(lt)
           }, {
             default: ve(() => [
-              (Y(!0), q(Re, null, Oe(G(ne), (j, ae) => (Y(), q("div", fe({
+              (_(!0), U(Ce, null, Oe(q(ne), (j, le) => (_(), U("div", fe({
                 key: `${j.page}-${j.id}`,
                 class: "absolute masonry-item",
                 ref_for: !0
-              }, G(ea)(j, ae)), [
-                J(u.$slots, "default", {
+              }, q(ea)(j, le)), [
+                J(c.$slots, "default", {
                   item: j,
-                  remove: G(ue),
+                  remove: q(ue),
                   index: j.originalIndex ?? h.value.indexOf(j)
                 }, () => [
-                  Se(xe, {
+                  Le(xe, {
                     item: j,
-                    remove: G(ue),
+                    remove: q(ue),
                     "header-height": d.value.header,
                     "footer-height": d.value.footer,
                     "in-swipe-mode": !1,
                     "is-active": !1,
-                    "onPreload:success": B[4] || (B[4] = (O) => p("item:preload:success", O)),
-                    "onPreload:error": B[5] || (B[5] = (O) => p("item:preload:error", O)),
-                    onMouseEnter: B[6] || (B[6] = (O) => p("item:mouse-enter", O)),
-                    onMouseLeave: B[7] || (B[7] = (O) => p("item:mouse-leave", O))
+                    "onPreload:success": D[4] || (D[4] = (A) => y("item:preload:success", A)),
+                    "onPreload:error": D[5] || (D[5] = (A) => y("item:preload:error", A)),
+                    onMouseEnter: D[6] || (D[6] = (A) => y("item:mouse-enter", A)),
+                    onMouseLeave: D[7] || (D[7] = (A) => y("item:mouse-leave", A))
                   }, {
-                    header: ve((O) => [
-                      J(u.$slots, "item-header", fe({ ref_for: !0 }, O), void 0, !0)
+                    header: ve((A) => [
+                      J(c.$slots, "item-header", fe({ ref_for: !0 }, A), void 0, !0)
                     ]),
-                    footer: ve((O) => [
-                      J(u.$slots, "item-footer", fe({ ref_for: !0 }, O), void 0, !0)
+                    footer: ve((A) => [
+                      J(c.$slots, "item-footer", fe({ ref_for: !0 }, A), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "remove", "header-height", "footer-height"])
@@ -1775,35 +1804,35 @@ const ua = { class: "flex-1 relative min-h-0" }, ca = { class: "w-full h-full ro
             _: 3
           }, 8, ["onEnter", "onBeforeEnter", "onLeave", "onBeforeLeave"])
         ], 4),
-        k.value && h.value.length > 0 ? (Y(), q("div", Ia, [
-          J(u.$slots, "end-message", {}, () => [
-            B[10] || (B[10] = U("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
+        k.value && h.value.length > 0 ? (_(), U("div", Pa, [
+          J(c.$slots, "end-message", {}, () => [
+            D[10] || (D[10] = G("p", { class: "text-gray-500 dark:text-gray-400" }, "You've reached the end", -1))
           ], !0)
-        ])) : te("", !0),
-        N.value && h.value.length > 0 ? (Y(), q("div", La, [
-          J(u.$slots, "error-message", { error: N.value }, () => [
-            U("p", Sa, "Failed to load content: " + Pe(N.value.message), 1)
+        ])) : ae("", !0),
+        B.value && h.value.length > 0 ? (_(), U("div", Ia, [
+          J(c.$slots, "error-message", { error: B.value }, () => [
+            G("p", La, "Failed to load content: " + Ee(B.value.message), 1)
           ], !0)
-        ])) : te("", !0)
-      ], 2)) : (Y(), q("div", ya, [
-        J(u.$slots, "loading-message", {}, () => [
-          B[8] || (B[8] = U("p", { class: "text-gray-500 dark:text-gray-400" }, "Waiting for content to load...", -1))
+        ])) : ae("", !0)
+      ], 2)) : (_(), U("div", ya, [
+        J(c.$slots, "loading-message", {}, () => [
+          D[8] || (D[8] = G("p", { class: "text-gray-500 dark:text-gray-400" }, "Waiting for content to load...", -1))
         ], !0)
       ]))
     ], 512));
   }
-}), Ea = (e, n) => {
+}), Sa = (e, l) => {
   const i = e.__vccOpts || e;
-  for (const [a, m] of n)
-    i[a] = m;
+  for (const [a, g] of l)
+    i[a] = g;
   return i;
-}, Ue = /* @__PURE__ */ Ea(ka, [["__scopeId", "data-v-ce75570c"]]), Ha = {
+}, _e = /* @__PURE__ */ Sa(ka, [["__scopeId", "data-v-a7ad9844"]]), Ha = {
   install(e) {
-    e.component("WyxosMasonry", Ue), e.component("WMasonry", Ue), e.component("WyxosMasonryItem", xe), e.component("WMasonryItem", xe);
+    e.component("WyxosMasonry", _e), e.component("WMasonry", _e), e.component("WyxosMasonryItem", xe), e.component("WMasonryItem", xe);
   }
 };
 export {
-  Ue as Masonry,
+  _e as Masonry,
   xe as MasonryItem,
   Ha as default
 };