@wyxos/vibe 1.6.16 → 1.6.17

package/lib/index.js

@@ -1,4 +1,4 @@
-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";
+import { nextTick as Y, defineComponent as et, ref as T, computed as K, onMounted as tt, onUnmounted as at, watch as oe, createElementBlock as j, openBlock as C, createCommentVNode as ie, createElementVNode as V, normalizeStyle as ye, renderSlot as le, normalizeClass as se, withModifiers as Ye, toDisplayString as bt, Fragment as Ue, renderList as Ge, createVNode as ke, withCtx as he, mergeProps as pe, TransitionGroup as xt, unref as Mt } from "vue";
 let Se = null;
 function Tt() {
   if (Se != null) return Se;
@@ -27,15 +27,15 @@ function Xe(t, c, v, l = {}) {
     },
     placement: E = "masonry"
   } = l;
-  let d = 0, D = 0;
+  let f = 0, D = 0;
   try {
     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;
+      f = parseFloat(H.paddingLeft) || 0, D = parseFloat(H.paddingRight) || 0;
     }
   } catch {
   }
-  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 A = (g || 0) + f, O = (b || 0) + D, m = c.offsetWidth - c.clientWidth, r = m > 0 ? m + 2 : Tt() + 2, L = c.offsetWidth - r - A - O, y = M * (v - 1), x = Math.floor((L - y) / v), N = t.map((H) => {
     const I = H.width, S = H.height;
     return Math.round(x * S / I) + s + o;
   });
@@ -44,19 +44,19 @@ function Xe(t, c, v, l = {}) {
     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) => {
+    const w = (P) => {
       let B = 1, G = 0, X = 0;
       for (let J = 0; J < H; J++) {
-        const se = N[J], Z = I(G, X, se);
+        const ue = N[J], Z = I(G, X, ue);
         if (Z <= P)
           G = Z, X++;
-        else if (B++, G = se, X = 1, se > P || B > v) return !1;
+        else if (B++, G = ue, X = 1, ue > P || B > v) return !1;
       }
       return B <= v;
     };
     for (; S < n; ) {
       const P = Math.floor((S + n) / 2);
-      y(P) ? n = P : S = P + 1;
+      w(P) ? n = P : S = P + 1;
     }
     const F = n, $ = new Array(v).fill(0);
     let ae = v - 1, Q = 0, W = 0;
@@ -91,27 +91,27 @@ function Xe(t, c, v, l = {}) {
       columnHeight: 0,
       left: 0,
       top: 0
-    }, 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);
+    }, n = p.indexOf(Math.min(...p)), w = I.width, F = I.height;
+    S.columnWidth = x, S.left = n * (x + M), S.imageHeight = Math.round(x * F / w), S.columnHeight = S.imageHeight + s + o, S.top = p[n], p[n] += S.columnHeight + h, z.push(S);
   }
   return z;
 }
-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;
+var Et = typeof global == "object" && global && global.Object === Object && global, Lt = typeof self == "object" && self && self.Object === Object && self, nt = Et || Lt || Function("return this")(), xe = nt.Symbol, ot = Object.prototype, It = ot.hasOwnProperty, kt = ot.toString, ge = xe ? xe.toStringTag : void 0;
 function St(t) {
-  var c = It.call(t, pe), v = t[pe];
+  var c = It.call(t, ge), v = t[ge];
   try {
-    t[pe] = void 0;
+    t[ge] = void 0;
     var l = !0;
   } catch {
   }
   var M = kt.call(t);
-  return l && (c ? t[pe] = v : delete t[pe]), M;
+  return l && (c ? t[ge] = v : delete t[ge]), M;
 }
 var Pt = Object.prototype, Ht = Pt.toString;
 function $t(t) {
   return Ht.call(t);
 }
-var Nt = "[object Null]", Wt = "[object Undefined]", _e = be ? be.toStringTag : void 0;
+var Nt = "[object Null]", Wt = "[object Undefined]", _e = xe ? xe.toStringTag : void 0;
 function Dt(t) {
   return t == null ? t === void 0 ? Wt : Nt : _e && _e in Object(t) ? St(t) : $t(t);
 }
@@ -156,10 +156,10 @@ 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;
+  var l, M, h, o, s, g, b = 0, k = !1, E = !1, f = !0;
   if (typeof t != "function")
     throw new TypeError(Ut);
-  c = Ke(c) || 0, He(v) && (k = !!v.leading, E = "maxWait" in v, h = E ? Gt(Ke(v.maxWait) || 0, c) : h, d = "trailing" in v ? !!v.trailing : d);
+  c = Ke(c) || 0, He(v) && (k = !!v.leading, E = "maxWait" in v, h = E ? Gt(Ke(v.maxWait) || 0, c) : h, f = "trailing" in v ? !!v.trailing : f);
   function D(p) {
     var z = l, H = M;
     return l = M = void 0, b = p, o = t.apply(H, z), o;
@@ -182,9 +182,9 @@ function Qe(t, c, v) {
     s = setTimeout(r, O(p));
   }
   function L(p) {
-    return s = void 0, d && l ? D(p) : (l = M = void 0, o);
+    return s = void 0, f && l ? D(p) : (l = M = void 0, o);
   }
-  function w() {
+  function y() {
     s !== void 0 && clearTimeout(s), b = 0, l = g = M = s = void 0;
   }
   function x() {
@@ -200,9 +200,9 @@ function Qe(t, c, v) {
     }
     return s === void 0 && (s = setTimeout(r, c)), o;
   }
-  return N.cancel = w, N.flush = x, N;
+  return N.cancel = y, N.flush = x, N;
 }
-function ve(t, c) {
+function fe(t, c) {
   const v = c ?? (typeof window < "u" ? window.innerWidth : 1024), l = t.sizes;
   return v >= 1536 && l["2xl"] ? l["2xl"] : v >= 1280 && l.xl ? l.xl : v >= 1024 && l.lg ? l.lg : v >= 768 && l.md ? l.md : v >= 640 && l.sm ? l.sm : l.base;
 }
@@ -246,11 +246,11 @@ function $e(t, c) {
 }
 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");
+    const g = parseInt(o.dataset.left || "0", 10), b = parseInt(o.dataset.top || "0", 10), k = parseInt(o.dataset.index || "0", 10), E = Math.min(k * 20, 160), f = o.style.getPropertyValue("--masonry-opacity-delay");
     o.style.setProperty("--masonry-opacity-delay", `${E}ms`), requestAnimationFrame(() => {
       o.style.opacity = "1", o.style.transform = `translate3d(${g}px, ${b}px, 0) scale(1)`;
       const D = () => {
-        d ? o.style.setProperty("--masonry-opacity-delay", d) : o.style.removeProperty("--masonry-opacity-delay"), o.removeEventListener("transitionend", D), s();
+        f ? o.style.setProperty("--masonry-opacity-delay", f) : o.style.removeProperty("--masonry-opacity-delay"), o.removeEventListener("transitionend", D), s();
       };
       o.addEventListener("transitionend", D);
     });
@@ -272,8 +272,8 @@ function Zt(t, c) {
       const r = getComputedStyle(o).getPropertyValue("--masonry-leave-duration") || "", L = parseFloat(r);
       E = Number.isFinite(L) && L > 0 ? L : 200;
     }
-    const d = o.style.transitionDuration, D = () => {
-      o.removeEventListener("transitionend", A), clearTimeout(O), o.style.transitionDuration = d || "";
+    const f = o.style.transitionDuration, D = () => {
+      o.removeEventListener("transitionend", A), clearTimeout(O), o.style.transitionDuration = f || "";
     }, A = (m) => {
       (!m || m.target === o) && (D(), s());
     }, O = setTimeout(() => {
@@ -303,9 +303,9 @@ function ea({
   loadThresholdPx: b
 }) {
   let k = 0;
-  async function E(d) {
+  async function E(f) {
     if (!t.value) return;
-    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;
+    const D = f ?? $e(c.value, v.value), A = D.length ? Math.max(...D) : 0, O = t.value.scrollTop + t.value.clientHeight, m = t.value.scrollTop > k + 1;
     k = t.value.scrollTop;
     const r = typeof b == "number" ? b : 200, L = r >= 0 ? Math.max(0, A - r) : Math.max(0, A + r);
     if (O >= L && m && !M.value) {
@@ -329,7 +329,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
 }, 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__ */ et({
+}, Me = /* @__PURE__ */ et({
   __name: "MasonryItem",
   props: {
     item: {},
@@ -343,7 +343,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
   },
   emits: ["preload:success", "preload:error", "mouse-enter", "mouse-leave"],
   setup(t, { emit: c }) {
-    const v = t, l = c, M = T(!1), h = T(!1), o = T(null), s = T(!1), g = T(!1), b = T(null), k = T(!1), E = T(!1), d = T(!1), D = T(null), A = T(null);
+    const v = t, l = c, M = T(!1), h = T(!1), o = T(null), s = T(!1), g = T(!1), b = T(null), k = T(!1), E = T(!1), f = T(!1), D = T(null), A = T(null);
     let O = null;
     const m = K(() => {
       var n;
@@ -352,7 +352,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       var n;
       return v.notFound ?? ((n = v.item) == null ? void 0 : n.notFound) ?? !1;
     }), L = K(() => !!v.inSwipeMode);
-    function w(n) {
+    function y(n) {
       l("mouse-enter", { item: v.item, type: n });
     }
     function x(n) {
@@ -360,19 +360,19 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     }
     function N(n) {
       if (L.value) return;
-      const y = n.target;
-      y && (y.paused ? y.play() : y.pause());
+      const w = n.target;
+      w && (w.paused ? w.play() : w.pause());
     }
     function p(n) {
-      const y = n.target;
-      y && (L.value || y.play(), w("video"));
+      const w = n.target;
+      w && (L.value || w.play(), y("video"));
     }
     function z(n) {
-      const y = n.target;
-      y && (L.value || y.pause(), x("video"));
+      const w = n.target;
+      w && (L.value || w.pause(), x("video"));
     }
     function H(n) {
-      return new Promise((y, F) => {
+      return new Promise((w, F) => {
         if (!n) {
           const W = new Error("No image source provided");
           l("preload:error", { item: v.item, type: "image", src: n, error: W }), F(W);
@@ -382,7 +382,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         $.onload = () => {
           const W = Date.now() - ae, U = Math.max(0, Q - W);
           setTimeout(async () => {
-            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();
+            M.value = !0, h.value = !1, E.value = !1, await Y(), await new Promise((_) => setTimeout(_, 100)), f.value = !0, l("preload:success", { item: v.item, type: "image", src: n }), w();
           }, U);
         }, $.onerror = () => {
           h.value = !0, M.value = !1, E.value = !1;
@@ -392,7 +392,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       });
     }
     function I(n) {
-      return new Promise((y, F) => {
+      return new Promise((w, F) => {
         if (!n) {
           const W = new Error("No video source provided");
           l("preload:error", { item: v.item, type: "video", src: n, error: W }), F(W);
@@ -402,7 +402,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         $.preload = "metadata", $.muted = !0, $.onloadedmetadata = () => {
           const W = Date.now() - ae, U = Math.max(0, Q - W);
           setTimeout(async () => {
-            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();
+            s.value = !0, g.value = !1, E.value = !1, await Y(), await new Promise((_) => setTimeout(_, 100)), f.value = !0, l("preload:success", { item: v.item, type: "video", src: n }), w();
           }, U);
         }, $.onerror = () => {
           g.value = !0, s.value = !1, E.value = !1;
@@ -412,12 +412,12 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       });
     }
     async function S() {
-      var y;
+      var w;
       if (!k.value || E.value || r.value || m.value === "video" && s.value || m.value === "image" && M.value)
         return;
-      const n = (y = v.item) == null ? void 0 : y.src;
+      const n = (w = v.item) == null ? void 0 : w.src;
       if (n)
-        if (E.value = !0, d.value = !1, m.value === "video") {
+        if (E.value = !0, f.value = !1, m.value === "video") {
           b.value = n, s.value = !1, g.value = !1;
           try {
             await I(n);
@@ -434,8 +434,8 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     return tt(() => {
       D.value && (O = new IntersectionObserver(
         (n) => {
-          n.forEach((y) => {
-            y.isIntersecting && y.intersectionRatio >= 1 ? k.value || (k.value = !0, S()) : y.isIntersecting;
+          n.forEach((w) => {
+            w.isIntersecting && w.intersectionRatio >= 1 ? k.value || (k.value = !0, S()) : w.isIntersecting;
           });
         },
         {
@@ -474,7 +474,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       (n) => {
         !L.value || !A.value || (n ? A.value.play() : A.value.pause());
       }
-    ), (n, y) => (C(), j("div", {
+    ), (n, w) => (C(), j("div", {
       ref_key: "containerRef",
       ref: D,
       class: "relative w-full h-full flex flex-col"
@@ -482,7 +482,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       n.headerHeight > 0 ? (C(), j("div", {
         key: 0,
         class: "relative z-10",
-        style: ge({ height: `${n.headerHeight}px` })
+        style: ye({ height: `${n.headerHeight}px` })
       }, [
         le(n.$slots, "header", {
           item: n.item,
@@ -495,7 +495,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
           isLoading: E.value,
           mediaType: m.value
         })
-      ], 4)) : re("", !0),
+      ], 4)) : ie("", !0),
       V("div", ta, [
         le(n.$slots, "default", {
           item: n.item,
@@ -509,10 +509,10 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
           mediaType: m.value,
           imageSrc: o.value,
           videoSrc: b.value,
-          showMedia: d.value
+          showMedia: f.value
         }, () => [
           V("div", aa, [
-            r.value ? (C(), j("div", na, y[3] || (y[3] = [
+            r.value ? (C(), j("div", na, w[3] || (w[3] = [
               V("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
               V("span", { class: "font-medium" }, "Not Found", -1),
               V("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
@@ -520,25 +520,25 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
               m.value === "image" && o.value ? (C(), j("img", {
                 key: 0,
                 src: o.value,
-                class: ie([
+                class: se([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  M.value && d.value ? "opacity-100" : "opacity-0"
+                  M.value && f.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 loading: "lazy",
                 decoding: "async",
                 alt: "",
-                onMouseenter: y[0] || (y[0] = (F) => w("image")),
-                onMouseleave: y[1] || (y[1] = (F) => x("image"))
-              }, null, 42, la)) : re("", !0),
+                onMouseenter: w[0] || (w[0] = (F) => y("image")),
+                onMouseleave: w[1] || (w[1] = (F) => x("image"))
+              }, null, 42, la)) : ie("", !0),
               m.value === "video" && b.value ? (C(), j("video", {
                 key: 1,
                 ref_key: "videoEl",
                 ref: A,
                 src: b.value,
-                class: ie([
+                class: se([
                   "w-full h-full object-cover transition-opacity duration-700 ease-in-out",
-                  s.value && d.value ? "opacity-100" : "opacity-0"
+                  s.value && f.value ? "opacity-100" : "opacity-0"
                 ]),
                 style: { position: "absolute", top: "0", left: "0" },
                 muted: "",
@@ -550,32 +550,32 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
                 onTouchend: Ye(N, ["stop", "prevent"]),
                 onMouseenter: p,
                 onMouseleave: z,
-                onError: y[2] || (y[2] = (F) => g.value = !0)
-              }, null, 42, ra)) : re("", !0),
+                onError: w[2] || (w[2] = (F) => g.value = !0)
+              }, null, 42, ra)) : ie("", !0),
               !M.value && !s.value && !h.value && !g.value ? (C(), j("div", {
                 key: 2,
-                class: ie([
+                class: se([
                   "absolute inset-0 bg-slate-100 flex items-center justify-center transition-opacity duration-500",
-                  d.value ? "opacity-0 pointer-events-none" : "opacity-100"
+                  f.value ? "opacity-0 pointer-events-none" : "opacity-100"
                 ])
               }, [
                 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")
+                    class: se(m.value === "video" ? "fas fa-video text-xl text-slate-400" : "fas fa-image text-xl text-slate-400")
                   }, null, 2)
                 ])
-              ], 2)) : re("", !0),
-              E.value ? (C(), j("div", sa, y[4] || (y[4] = [
+              ], 2)) : ie("", !0),
+              E.value ? (C(), j("div", sa, w[4] || (w[4] = [
                 V("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
                   V("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
                 ], -1)
-              ]))) : re("", !0),
+              ]))) : ie("", !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")
+                  class: se(m.value === "video" ? "fas fa-video text-2xl mb-2 opacity-50" : "fas fa-image text-2xl mb-2 opacity-50")
                 }, null, 2),
                 V("span", null, "Failed to load " + bt(m.value), 1)
-              ])) : re("", !0)
+              ])) : ie("", !0)
             ]))
           ])
         ])
@@ -583,7 +583,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       n.footerHeight > 0 ? (C(), j("div", {
         key: 1,
         class: "relative z-10",
-        style: ge({ height: `${n.footerHeight}px` })
+        style: ye({ height: `${n.footerHeight}px` })
       }, [
         le(n.$slots, "footer", {
           item: n.item,
@@ -596,7 +596,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
           isLoading: E.value,
           mediaType: m.value
         })
-      ], 4)) : re("", !0)
+      ], 4)) : ie("", !0)
     ], 512));
   }
 }), ca = { class: "w-full h-full flex items-center justify-center p-4" }, va = { class: "w-full h-full max-w-full max-h-full relative" }, fa = /* @__PURE__ */ et({
@@ -748,27 +748,27 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         "2xl": 1536
       }[e] || 768;
     }
-    const d = K(() => {
+    const f = K(() => {
       if (l.layoutMode === "masonry") return !1;
       if (l.layoutMode === "swipe") return !0;
       const e = typeof l.mobileBreakpoint == "string" ? E(l.mobileBreakpoint) : l.mobileBreakpoint;
       return s.value < e;
     }), D = K(() => {
-      if (!d.value || r.value.length === 0) return null;
+      if (!f.value || r.value.length === 0) return null;
       const e = Math.max(0, Math.min(I.value, r.value.length - 1));
       return r.value[e] || null;
     }), A = K(() => {
-      if (!d.value || !D.value) return null;
+      if (!f.value || !D.value) return null;
       const e = I.value + 1;
       return e >= r.value.length ? null : r.value[e] || null;
     }), O = K(() => {
-      if (!d.value || !D.value) return null;
+      if (!f.value || !D.value) return null;
       const e = I.value - 1;
       return e < 0 ? null : r.value[e] || null;
     }), m = v, r = K({
       get: () => l.items,
       set: (e) => m("update:items", e)
-    }), L = T(7), 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());
+    }), L = T(7), y = T(null), x = T([]), N = T(null), p = T(!1), z = T(0), H = K(() => _t(s.value)), I = T(0), S = T(0), n = T(!1), w = T(0), F = T(0), $ = T(null), ae = T(/* @__PURE__ */ new Set());
     function Q(e) {
       return typeof e == "number" && Number.isFinite(e) && e > 0;
     }
@@ -777,18 +777,18 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         if (!Array.isArray(e) || e.length === 0) return;
         const i = e.filter((u) => !Q(u == null ? void 0 : u.width) || !Q(u == null ? void 0 : u.height));
         if (i.length === 0) return;
-        const f = [];
+        const d = [];
         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));
+          ae.value.has(R) || (ae.value.add(R), d.push(R));
         }
-        if (f.length > 0) {
-          const u = f.slice(0, 10);
+        if (d.length > 0) {
+          const u = d.slice(0, 10);
           console.warn(
             "[Masonry] Items missing width/height detected:",
             {
               context: a,
-              count: f.length,
+              count: d.length,
               sampleIds: u,
               hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
             }
@@ -801,17 +801,17 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       distanceToTrigger: 0,
       isNearTrigger: !1
     }), 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;
+      if (!y.value) return;
+      const { scrollTop: a, clientHeight: i } = y.value, d = a + i, u = e ?? $e(r.value, L.value), R = u.length ? Math.max(...u) : 0, te = typeof l.loadThresholdPx == "number" ? l.loadThresholdPx : 200, ve = te >= 0 ? Math.max(0, R - te) : Math.max(0, R + te), Ve = Math.max(0, ve - d), wt = Ve <= 100;
       G.value = {
         distanceToTrigger: Math.round(Ve),
         isNearTrigger: wt
       };
-    }, { onEnter: J, onBeforeEnter: se, onBeforeLeave: Z, onLeave: lt } = Zt(r, { leaveDurationMs: l.leaveDurationMs });
+    }, { onEnter: J, onBeforeEnter: ue, onBeforeLeave: Z, onLeave: lt } = Zt(r, { leaveDurationMs: l.leaveDurationMs });
     function rt(e, a) {
       if (B.value) {
-        const i = parseInt(e.dataset.left || "0", 10), 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(() => {
+        const i = parseInt(e.dataset.left || "0", 10), d = parseInt(e.dataset.top || "0", 10);
+        e.style.transition = "none", e.style.opacity = "1", e.style.transform = `translate3d(${i}px, ${d}px, 0) scale(1)`, e.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
           e.style.transition = "", a();
         });
       } else
@@ -822,7 +822,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         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
-        se(e);
+        ue(e);
     }
     function st(e) {
       B.value || Z(e);
@@ -832,12 +832,12 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     }
     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;
+      return !i || i.length === 0 ? [] : i.filter((d) => {
+        const u = d.top;
+        return d.top + d.columnHeight >= e && u <= a;
       });
     }), { handleScroll: vt } = ea({
-      container: w,
+      container: y,
       masonry: r,
       columns: L,
       containerHeight: z,
@@ -847,12 +847,12 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       setItemsRaw: (e) => {
         r.value = e;
       },
-      loadNext: ue,
+      loadNext: ce,
       loadThresholdPx: l.loadThresholdPx
     });
     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();
+      b.value = e, e ? (e.width !== void 0 && (s.value = e.width), e.height !== void 0 && (g.value = e.height), !f.value && y.value && r.value.length > 0 && Y(() => {
+        L.value = fe(h.value, s.value), ee(r.value), X();
       })) : o.value && (s.value = o.value.clientWidth, g.value = o.value.clientHeight);
     }
     c({
@@ -867,12 +867,12 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       currentPage: N,
       // Set fixed dimensions (overrides ResizeObserver)
       setFixedDimensions: ft,
-      remove: fe,
+      remove: de,
       removeMany: mt,
       removeAll: ht,
-      loadNext: ue,
-      loadPage: Me,
-      refreshCurrentPage: Te,
+      loadNext: ce,
+      loadPage: Te,
+      refreshCurrentPage: Ee,
       reset: gt,
       init: yt,
       paginationHistory: x,
@@ -884,48 +884,48 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     function Ne(e) {
       const a = Jt(e);
       let i = 0;
-      if (w.value) {
-        const { scrollTop: f, clientHeight: u } = w.value;
-        i = f + u + 100;
+      if (y.value) {
+        const { scrollTop: d, clientHeight: u } = y.value;
+        i = d + u + 100;
       }
       z.value = Math.max(a, i);
     }
     function ee(e) {
-      if (d.value) {
+      if (f.value) {
         r.value = e;
         return;
       }
-      if (!w.value) return;
+      if (!y.value) return;
       W(e, "refreshLayout");
-      const a = e.map((f, u) => ({
-        ...f,
-        originalIndex: f.originalIndex ?? u
-      })), i = w.value;
+      const a = e.map((d, u) => ({
+        ...d,
+        originalIndex: d.originalIndex ?? u
+      })), i = y.value;
       if (b.value && b.value.width !== void 0) {
-        const f = i.style.width, u = i.style.boxSizing;
+        const d = i.style.width, u = i.style.boxSizing;
         i.style.boxSizing = "border-box", i.style.width = `${b.value.width}px`, i.offsetWidth;
         const R = Xe(a, i, L.value, h.value);
-        i.style.width = f, i.style.boxSizing = u, Ne(R), r.value = R;
+        i.style.width = d, i.style.boxSizing = u, Ne(R), r.value = R;
       } else {
-        const f = Xe(a, i, L.value, h.value);
-        Ne(f), r.value = f;
+        const d = Xe(a, i, L.value, h.value);
+        Ne(d), r.value = d;
       }
     }
     function We(e, a) {
       return new Promise((i) => {
-        const f = Math.max(0, e | 0), u = Date.now();
-        a(f, f);
+        const d = Math.max(0, e | 0), u = Date.now();
+        a(d, d);
         const R = setInterval(() => {
           if (q.value) {
             clearInterval(R), i();
             return;
           }
-          const te = Date.now() - u, ce = Math.max(0, f - te);
-          a(ce, f), ce <= 0 && (clearInterval(R), i());
+          const te = Date.now() - u, ve = Math.max(0, d - te);
+          a(ve, d), ve <= 0 && (clearInterval(R), i());
         }, 100);
       });
     }
-    async function ye(e) {
+    async function we(e) {
       try {
         const a = await dt(() => l.getNextPage(e));
         return ee([...r.value, ...a.items]), a;
@@ -936,7 +936,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     async function dt(e) {
       let a = 0;
       const i = l.retryMaxAttempts;
-      let f = l.retryInitialDelayMs;
+      let d = l.retryInitialDelayMs;
       for (; ; )
         try {
           const u = await e();
@@ -944,19 +944,19 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         } catch (u) {
           if (a++, a > i)
             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:start", { attempt: a, max: i, totalMs: d }), await We(d, (R, te) => {
             m("retry:tick", { attempt: a, remainingMs: R, totalMs: te });
-          }), f += l.retryBackoffStepMs;
+          }), d += l.retryBackoffStepMs;
         }
     }
-    async function Me(e) {
+    async function Te(e) {
       if (!p.value) {
         q.value = !1, p.value = !0;
         try {
           const a = r.value.length;
           if (q.value) return;
-          const i = await ye(e);
-          return q.value ? void 0 : (N.value = e, x.value.push(i.nextPage), await de(a), i);
+          const i = await we(e);
+          return q.value ? void 0 : (N.value = e, x.value.push(i.nextPage), await me(a), i);
         } catch (a) {
           throw console.error("Error loading page:", a), a;
         } finally {
@@ -964,14 +964,14 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         }
       }
     }
-    async function ue() {
+    async function ce() {
       if (!p.value) {
         q.value = !1, p.value = !0;
         try {
           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);
+          const a = x.value[x.value.length - 1], i = await we(a);
+          return q.value ? void 0 : (N.value = a, x.value.push(i.nextPage), await me(e), i);
         } catch (e) {
           throw console.error("Error loading next page:", e), e;
         } finally {
@@ -979,7 +979,7 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         }
       }
     }
-    async function Te() {
+    async function Ee() {
       if (!p.value) {
         q.value = !1, p.value = !0;
         try {
@@ -989,11 +989,11 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
             return;
           }
           r.value = [], z.value = 0, x.value = [e], await Y();
-          const a = await ye(e);
+          const a = await we(e);
           if (q.value) return;
           N.value = e, x.value.push(a.nextPage);
           const i = r.value.length;
-          return await de(i), a;
+          return await me(i), a;
         } catch (e) {
           throw console.error("[Masonry] Error refreshing current page:", e), e;
         } finally {
@@ -1001,14 +1001,14 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         }
       }
     }
-    async function fe(e) {
+    async function de(e) {
       const a = r.value.filter((i) => i.id !== e.id);
       if (r.value = a, await Y(), a.length === 0 && x.value.length > 0) {
         if (l.autoRefreshOnEmpty)
-          await Te();
+          await Ee();
         else
           try {
-            await ue(), await de(0, !0);
+            await ce(), await me(0, !0);
           } catch {
           }
         return;
@@ -1019,23 +1019,23 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
     }
     async function mt(e) {
       if (!e || e.length === 0) return;
-      const a = new Set(e.map((f) => f.id)), i = r.value.filter((f) => !a.has(f.id));
+      const a = new Set(e.map((d) => d.id)), i = r.value.filter((d) => !a.has(d.id));
       if (r.value = i, await Y(), i.length === 0 && x.value.length > 0) {
         if (l.autoRefreshOnEmpty)
-          await Te();
+          await Ee();
         else
           try {
-            await ue(), await de(0, !0);
+            await ce(), await me(0, !0);
           } catch {
           }
         return;
       }
-      await new Promise((f) => requestAnimationFrame(() => f())), requestAnimationFrame(() => {
+      await new Promise((d) => requestAnimationFrame(() => d())), requestAnimationFrame(() => {
         ee(i);
       });
     }
     function De(e) {
-      w.value && w.value.scrollTo({
+      y.value && y.value.scrollTo({
         top: 0,
         behavior: (e == null ? void 0 : e.behavior) ?? "smooth",
         ...e
@@ -1045,30 +1045,30 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       De({ behavior: "smooth" }), r.value = [], g.value = 0, await Y(), m("remove-all:complete");
     }
     function pt() {
-      L.value = ve(h.value, s.value), ee(r.value), w.value && (U.value = w.value.scrollTop, _.value = w.value.clientHeight);
+      L.value = fe(h.value, s.value), ee(r.value), y.value && (U.value = y.value.scrollTop, _.value = y.value.clientHeight);
     }
-    let we = !1;
+    let be = !1;
     const q = T(!1);
-    async function de(e, a = !1) {
-      if (!a && !l.backfillEnabled || we || q.value) return;
+    async function me(e, a = !1) {
+      if (!a && !l.backfillEnabled || be || q.value) return;
       const i = (e || 0) + (l.pageSize || 0);
       if (!(!l.pageSize || l.pageSize <= 0 || x.value[x.value.length - 1] == null) && !(r.value.length >= i)) {
-        we = !0;
+        be = !0;
         try {
           let u = 0;
-          for (m("backfill:start", { target: i, fetched: r.value.length, calls: u }); r.value.length < i && u < l.backfillMaxCalls && x.value[x.value.length - 1] != null && !q.value && (await We(l.backfillDelayMs, (te, ce) => {
+          for (m("backfill:start", { target: i, fetched: r.value.length, calls: u }); r.value.length < i && u < l.backfillMaxCalls && x.value[x.value.length - 1] != null && !q.value && (await We(l.backfillDelayMs, (te, ve) => {
             m("backfill:tick", {
               fetched: r.value.length,
               target: i,
               calls: u,
               remainingMs: te,
-              totalMs: ce
+              totalMs: ve
             });
           }), !q.value); ) {
             const R = x.value[x.value.length - 1];
             try {
               p.value = !0;
-              const te = await ye(R);
+              const te = await we(R);
               if (q.value) break;
               x.value.push(te.nextPage);
             } finally {
@@ -1078,15 +1078,15 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
           }
           m("backfill:stop", { fetched: r.value.length, calls: u });
         } finally {
-          we = !1;
+          be = !1;
         }
       }
     }
     function Be() {
-      q.value = !0, p.value = !1, we = !1;
+      q.value = !0, p.value = !1, be = !1;
     }
     function gt() {
-      Be(), q.value = !1, w.value && w.value.scrollTo({
+      Be(), q.value = !1, y.value && y.value.scrollTo({
         top: 0,
         behavior: "smooth"
       }), r.value = [], g.value = 0, N.value = l.loadAtPage, x.value = [l.loadAtPage], G.value = {
@@ -1094,46 +1094,46 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         isNearTrigger: !1
       };
     }
-    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 re = Qe(async () => {
+      if (f.value) return;
+      y.value && (U.value = y.value.scrollTop, _.value = y.value.clientHeight), B.value = !0, await Y(), await new Promise((a) => requestAnimationFrame(() => a())), B.value = !1;
       const e = $e(r.value, L.value);
       vt(e), X(e);
     }, 200), ze = Qe(pt, 200);
     function Fe(e) {
-      d.value && (n.value = !0, y.value = e.touches[0].clientY, F.value = S.value, e.preventDefault());
+      f.value && (n.value = !0, w.value = e.touches[0].clientY, F.value = S.value, e.preventDefault());
     }
     function Ae(e) {
-      if (!d.value || !n.value) return;
-      const a = e.touches[0].clientY - y.value;
+      if (!f.value || !n.value) return;
+      const a = e.touches[0].clientY - w.value;
       S.value = F.value + a, e.preventDefault();
     }
     function Oe(e) {
-      if (!d.value || !n.value) return;
+      if (!f.value || !n.value) return;
       n.value = !1;
       const a = S.value - F.value;
       Math.abs(a) > 100 ? a > 0 && O.value ? Ce() : a < 0 && A.value ? je() : ne() : ne(), e.preventDefault();
     }
     function Re(e) {
-      d.value && (n.value = !0, y.value = e.clientY, F.value = S.value, e.preventDefault());
+      f.value && (n.value = !0, w.value = e.clientY, F.value = S.value, e.preventDefault());
     }
     function Le(e) {
-      if (!d.value || !n.value) return;
-      const a = e.clientY - y.value;
+      if (!f.value || !n.value) return;
+      const a = e.clientY - w.value;
       S.value = F.value + a, e.preventDefault();
     }
     function Ie(e) {
-      if (!d.value || !n.value) return;
+      if (!f.value || !n.value) return;
       n.value = !1;
       const a = S.value - F.value;
       Math.abs(a) > 100 ? a > 0 && O.value ? Ce() : a < 0 && A.value ? je() : ne() : ne(), e.preventDefault();
     }
     function je() {
       if (!A.value) {
-        ue();
+        ce();
         return;
       }
-      I.value++, ne(), I.value >= r.value.length - 5 && ue();
+      I.value++, ne(), I.value >= r.value.length - 5 && ce();
     }
     function Ce() {
       O.value && (I.value--, ne());
@@ -1144,76 +1144,78 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
       S.value = -I.value * e;
     }
     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();
+      !f.value && I.value > 0 && (I.value = 0, S.value = 0), f.value && r.value.length === 0 && !p.value && Te(x.value[0]), f.value && ne();
     }
     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());
+      N.value = a, x.value = [a], x.value.push(i), W(e, "init"), f.value ? (r.value = [...r.value, ...e], I.value === 0 && r.value.length > 0 && (S.value = 0)) : (ee([...r.value, ...e]), X());
     }
     return oe(
       h,
       () => {
-        d.value || w.value && (L.value = ve(h.value, s.value), ee(r.value));
+        f.value || y.value && (L.value = fe(h.value, s.value), ee(r.value));
       },
       { deep: !0 }
     ), oe(() => l.layoutMode, () => {
       b.value && b.value.width !== void 0 ? s.value = b.value.width : o.value && (s.value = o.value.clientWidth);
-    }), oe(d, (e, a) => {
+    }), oe(y, (e) => {
+      e && !f.value ? (e.removeEventListener("scroll", re), e.addEventListener("scroll", re, { passive: !0 })) : e && e.removeEventListener("scroll", re);
+    }, { immediate: !0 }), oe(f, (e, a) => {
       a === void 0 && e === !1 || Y(() => {
-        e ? (document.addEventListener("mousemove", Le), document.addEventListener("mouseup", Ie), 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())));
+        e ? (document.addEventListener("mousemove", Le), document.addEventListener("mouseup", Ie), y.value && y.value.removeEventListener("scroll", re), I.value = 0, S.value = 0, r.value.length > 0 && ne()) : (document.removeEventListener("mousemove", Le), document.removeEventListener("mouseup", Ie), y.value && o.value && (b.value && b.value.width !== void 0 ? s.value = b.value.width : s.value = o.value.clientWidth, y.value.removeEventListener("scroll", re), y.value.addEventListener("scroll", re, { passive: !0 }), r.value.length > 0 && (L.value = fe(h.value, s.value), ee(r.value), U.value = y.value.scrollTop, _.value = y.value.clientHeight, X())));
       });
     }, { 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()));
+      f.value && e > 0 && a === 0 && (I.value = 0, Y(() => ne()));
     }), oe(o, (e) => {
       k && (k.disconnect(), k = null), e && typeof ResizeObserver < "u" ? (k = new ResizeObserver((a) => {
         if (!b.value)
           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);
+            const d = i.contentRect.width, u = i.contentRect.height;
+            s.value !== d && (s.value = d), 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();
+      e !== a && e > 0 && !f.value && y.value && r.value.length > 0 && Y(() => {
+        L.value = fe(h.value, e), ee(r.value), X();
       });
     }), tt(async () => {
       try {
-        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));
+        await Y(), o.value && !k && (s.value = o.value.clientWidth, g.value = o.value.clientHeight), f.value || (L.value = fe(h.value, s.value), y.value && (U.value = y.value.scrollTop, _.value = y.value.clientHeight));
         const e = l.loadAtPage;
-        x.value = [e], l.skipInitialLoad || await Me(x.value[0]), d.value ? Y(() => ne()) : X();
+        x.value = [e], l.skipInitialLoad || await Te(x.value[0]), f.value ? Y(() => ne()) : X();
       } catch (e) {
         console.error("Error during component initialization:", e), p.value = !1;
       }
       window.addEventListener("resize", ze), window.addEventListener("resize", qe);
     }), at(() => {
       var e;
-      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);
+      k && (k.disconnect(), k = null), (e = y.value) == null || e.removeEventListener("scroll", re), window.removeEventListener("resize", ze), window.removeEventListener("resize", qe), $.value && ($.value.removeEventListener("touchstart", Fe), $.value.removeEventListener("touchmove", Ae), $.value.removeEventListener("touchend", Oe), $.value.removeEventListener("mousedown", Re)), document.removeEventListener("mousemove", Le), document.removeEventListener("mouseup", Ie);
     }), (e, a) => (C(), j("div", {
       ref_key: "wrapper",
       ref: o,
       class: "w-full h-full flex flex-col relative"
     }, [
-      d.value ? (C(), j("div", {
+      f.value ? (C(), j("div", {
         key: 0,
-        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 }]),
+        class: se(["overflow-hidden w-full flex-1 swipe-container touch-none select-none", { "force-motion": l.forceMotion, "cursor-grab": !n.value, "cursor-grabbing": n.value }]),
         ref_key: "swipeContainer",
         ref: $,
         style: { height: "100%", "max-height": "100%", position: "relative" }
       }, [
         V("div", {
           class: "relative w-full",
-          style: ge({
+          style: ye({
             transform: `translateY(${S.value}px)`,
             transition: n.value ? "none" : `transform ${t.transitionDurationMs}ms ${t.transitionEasing}`,
             height: `${r.value.length * 100}%`
           })
         }, [
-          (C(!0), j(Ue, null, Ge(r.value, (i, f) => (C(), j("div", {
+          (C(!0), j(Ue, null, Ge(r.value, (i, d) => (C(), j("div", {
             key: `${i.page}-${i.id}`,
             class: "absolute top-0 left-0 w-full",
-            style: ge({
-              top: `${f * (100 / r.value.length)}%`,
+            style: ye({
+              top: `${d * (100 / r.value.length)}%`,
               height: `${100 / r.value.length}%`
             })
           }, [
@@ -1221,25 +1223,25 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
               V("div", va, [
                 le(e.$slots, "default", {
                   item: i,
-                  remove: fe
+                  remove: de
                 }, () => [
-                  ke(xe, {
+                  ke(Me, {
                     item: i,
-                    remove: fe,
+                    remove: de,
                     "header-height": h.value.header,
                     "footer-height": h.value.footer,
                     "in-swipe-mode": !0,
-                    "is-active": f === I.value,
+                    "is-active": d === I.value,
                     "onPreload:success": a[0] || (a[0] = (u) => m("item:preload:success", u)),
                     "onPreload:error": a[1] || (a[1] = (u) => m("item:preload:error", u)),
                     onMouseEnter: a[2] || (a[2] = (u) => m("item:mouse-enter", u)),
                     onMouseLeave: a[3] || (a[3] = (u) => m("item:mouse-leave", u))
                   }, {
-                    header: me((u) => [
-                      le(e.$slots, "item-header", he({ ref_for: !0 }, u), void 0, !0)
+                    header: he((u) => [
+                      le(e.$slots, "item-header", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
-                    footer: me((u) => [
-                      le(e.$slots, "item-footer", he({ ref_for: !0 }, u), void 0, !0)
+                    footer: he((u) => [
+                      le(e.$slots, "item-footer", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "header-height", "footer-height", "is-active"])
@@ -1250,13 +1252,13 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
         ], 4)
       ], 2)) : (C(), j("div", {
         key: 1,
-        class: ie(["overflow-auto w-full flex-1 masonry-container", { "force-motion": l.forceMotion }]),
+        class: se(["overflow-auto w-full flex-1 masonry-container", { "force-motion": l.forceMotion }]),
         ref_key: "container",
-        ref: w
+        ref: y
       }, [
         V("div", {
           class: "relative",
-          style: ge({ height: `${z.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
+          style: ye({ height: `${z.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
         }, [
           ke(xt, {
             name: "masonry",
@@ -1266,19 +1268,19 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
             onLeave: ut,
             onBeforeLeave: st
           }, {
-            default: me(() => [
-              (C(!0), j(Ue, null, Ge(ct.value, (i, f) => (C(), j("div", he({
+            default: he(() => [
+              (C(!0), j(Ue, null, Ge(ct.value, (i, d) => (C(), j("div", pe({
                 key: `${i.page}-${i.id}`,
                 class: "absolute masonry-item",
                 ref_for: !0
-              }, Mt(Qt)(i, f)), [
+              }, Mt(Qt)(i, d)), [
                 le(e.$slots, "default", {
                   item: i,
-                  remove: fe
+                  remove: de
                 }, () => [
-                  ke(xe, {
+                  ke(Me, {
                     item: i,
-                    remove: fe,
+                    remove: de,
                     "header-height": h.value.header,
                     "footer-height": h.value.footer,
                     "in-swipe-mode": !1,
@@ -1288,11 +1290,11 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
                     onMouseEnter: a[6] || (a[6] = (u) => m("item:mouse-enter", u)),
                     onMouseLeave: a[7] || (a[7] = (u) => m("item:mouse-leave", u))
                   }, {
-                    header: me((u) => [
-                      le(e.$slots, "item-header", he({ ref_for: !0 }, u), void 0, !0)
+                    header: he((u) => [
+                      le(e.$slots, "item-header", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
-                    footer: me((u) => [
-                      le(e.$slots, "item-footer", he({ ref_for: !0 }, u), void 0, !0)
+                    footer: he((u) => [
+                      le(e.$slots, "item-footer", pe({ ref_for: !0 }, u), void 0, !0)
                     ]),
                     _: 2
                   }, 1032, ["item", "header-height", "footer-height"])
@@ -1310,13 +1312,13 @@ const ta = { class: "flex-1 relative min-h-0" }, aa = { class: "w-full h-full ro
   for (const [l, M] of c)
     v[l] = M;
   return v;
-}, Ze = /* @__PURE__ */ da(fa, [["__scopeId", "data-v-510fa495"]]), ha = {
+}, Ze = /* @__PURE__ */ da(fa, [["__scopeId", "data-v-ce6222b3"]]), ha = {
   install(t) {
-    t.component("WyxosMasonry", Ze), t.component("WMasonry", Ze), t.component("WyxosMasonryItem", xe), t.component("WMasonryItem", xe);
+    t.component("WyxosMasonry", Ze), t.component("WMasonry", Ze), t.component("WyxosMasonryItem", Me), t.component("WMasonryItem", Me);
   }
 };
 export {
   Ze as Masonry,
-  xe as MasonryItem,
+  Me as MasonryItem,
   ha as default
 };