@wyxos/vibe 1.6.14 → 1.6.16

package/lib/index.js

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