@wyxos/vibe 1.6.11 → 1.6.12

package/lib/index.js

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