@wyxos/vibe 1.6.9 → 1.6.10

package/lib/index.js

@@ -1,4 +1,4 @@
-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 E, createCommentVNode as X, normalizeClass as Y, toDisplayString as ie, 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";
+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;
@@ -35,28 +35,28 @@ function Ye(e, r, l, s = {}) {
     }
   } catch {
   }
-  const N = (h || 0) + m, z = (c || 0) + d, $ = r.offsetWidth - r.clientWidth, L = $ > 0 ? $ + 2 : Xe() + 2, i = r.offsetWidth - L - N - z, p = w * (l - 1), M = Math.floor((i - p) / l), I = e.map((P) => {
-    const H = P.width, S = P.height;
-    return Math.round(M * S / H) + n + a;
+  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;
   });
   if (T === "sequential-balanced") {
     const P = I.length;
     if (P === 0) return [];
     const H = (x, F, R) => x + (F > 0 ? v : 0) + R;
-    let S = Math.max(...I), _ = I.reduce((x, F) => x + F, 0) + v * Math.max(0, P - 1);
+    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 j = 0; j < P; j++) {
-        const U = I[j], V = H(R, q, U);
+      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;
       }
       return F <= l;
     };
-    for (; S < _; ) {
-      const x = Math.floor((S + _) / 2);
-      ae(x) ? _ = x : S = x + 1;
+    for (; L < _; ) {
+      const x = Math.floor((L + _) / 2);
+      ae(x) ? _ = x : L = x + 1;
     }
     const ne = _, K = new Array(l).fill(0);
     let oe = l - 1, Q = 0, Z = 0;
@@ -68,23 +68,23 @@ function Ye(e, r, l, s = {}) {
     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 j = F; j < R; j++) {
+      for (let O = F; O < R; O++) {
         const V = {
-          ...e[j],
+          ...e[O],
           columnWidth: M,
           imageHeight: 0,
           columnHeight: 0,
           left: 0,
           top: 0
         };
-        V.imageHeight = I[j] - (n + a), V.columnHeight = I[j], V.left = q, V.top = re[x], re[x] += V.columnHeight + (j + 1 < R ? v : 0), C.push(V);
+        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);
       }
     }
     return C;
   }
   const b = new Array(l).fill(0), A = [];
   for (let P = 0; P < e.length; P++) {
-    const H = e[P], S = {
+    const H = e[P], L = {
       ...H,
       columnWidth: 0,
       imageHeight: 0,
@@ -92,7 +92,7 @@ function Ye(e, r, l, s = {}) {
       left: 0,
       top: 0
     }, _ = b.indexOf(Math.min(...b)), ae = H.width, ne = H.height;
-    S.columnWidth = M, S.left = _ * (M + w), S.imageHeight = Math.round(M * ne / ae), S.columnHeight = S.imageHeight + n + a, S.top = b[_], b[_] += S.columnHeight + v, A.push(S);
+    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);
   }
   return A;
 }
@@ -136,7 +136,7 @@ function me(e) {
   var r = typeof e;
   return e != null && (r == "object" || r == "function");
 }
-var Ie = NaN, mt = /^[-+]0x[0-9a-f]+$/i, pt = /^0b[01]+$/i, gt = /^0o[0-7]+$/i, yt = parseInt;
+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;
@@ -149,8 +149,8 @@ function Pe(e) {
   if (typeof e != "string")
     return e === 0 ? e : +e;
   e = vt(e);
-  var l = pt.test(e);
-  return l || gt.test(e) ? yt(e.slice(2), l ? 2 : 8) : mt.test(e) ? Ie : +e;
+  var l = gt.test(e);
+  return l || pt.test(e) ? yt(e.slice(2), l ? 2 : 8) : mt.test(e) ? Ie : +e;
 }
 var de = function() {
   return Ae.Date.now();
@@ -165,7 +165,7 @@ function ke(e, r, l) {
     return s = w = void 0, c = b, a = e.apply(P, A), a;
   }
   function N(b) {
-    return c = b, n = setTimeout(L, r), f ? d(b) : a;
+    return c = b, n = setTimeout(E, r), f ? d(b) : a;
   }
   function z(b) {
     var A = b - h, P = b - c, H = r - A;
@@ -175,16 +175,16 @@ function ke(e, r, l) {
     var A = b - h, P = b - c;
     return h === void 0 || A >= r || A < 0 || T && P >= v;
   }
-  function L() {
+  function E() {
     var b = de();
     if ($(b))
       return i(b);
-    n = setTimeout(L, z(b));
+    n = setTimeout(E, z(b));
   }
   function i(b) {
     return n = void 0, m && s ? d(b) : (s = w = void 0, a);
   }
-  function p() {
+  function g() {
     n !== void 0 && clearTimeout(n), c = 0, s = h = w = n = void 0;
   }
   function M() {
@@ -196,11 +196,11 @@ function ke(e, r, l) {
       if (n === void 0)
         return N(h);
       if (T)
-        return clearTimeout(n), n = setTimeout(L, r), d(h);
+        return clearTimeout(n), n = setTimeout(E, r), d(h);
     }
-    return n === void 0 && (n = setTimeout(L, r)), a;
+    return n === void 0 && (n = setTimeout(E, r)), a;
   }
-  return I.cancel = p, I.flush = M, I;
+  return I.cancel = g, I.flush = M, I;
 }
 function ve(e) {
   const r = window.innerWidth, l = e.sizes;
@@ -227,7 +227,7 @@ function Mt(e, r = 0) {
     "data-index": r
   };
 }
-function pe(e, r) {
+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();
@@ -265,7 +265,7 @@ function It(e, r) {
     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 L = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", i = parseFloat(L);
+      const E = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", i = parseFloat(E);
       T = Number.isFinite(i) && i > 0 ? i : 200;
     }
     const m = a.style.transitionDuration, d = () => {
@@ -301,9 +301,9 @@ function Pt({
   let f = 0;
   async function T(m) {
     if (!e.value) return;
-    const d = m ?? pe(r.value, l.value), N = d.length ? Math.max(...d) : 0, z = e.value.scrollTop + e.value.clientHeight, $ = e.value.scrollTop > f + 1;
+    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 L = typeof c == "number" ? c : 200, i = L >= 0 ? Math.max(0, N - L) : Math.max(0, N + L);
+    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();
       return;
@@ -319,13 +319,13 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
 }, Lt = {
   key: 1,
   class: "relative w-full h-full"
-}, St = ["src"], Nt = ["src"], Ht = { class: "flex flex-col items-center justify-center gap-2 text-slate-400" }, $t = { class: "w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm" }, At = { class: "text-xs font-medium uppercase" }, Ft = {
+}, 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 = {
   key: 3,
   class: "absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-center justify-center"
-}, Wt = {
+}, At = {
   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"
-}, jt = ["title"], Ot = { 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" }, Bt = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, ge = /* @__PURE__ */ Le({
+}, 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({
   __name: "MasonryItem",
   props: {
     item: {},
@@ -344,7 +344,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       return r.notFound ?? ((i = r.item) == null ? void 0 : i.notFound) ?? !1;
     });
     function z(i) {
-      return new Promise((p, M) => {
+      return new Promise((g, M) => {
         if (!i) {
           M(new Error("No image source provided"));
           return;
@@ -353,7 +353,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
         I.onload = () => {
           const P = Date.now() - b, H = Math.max(0, A - P);
           setTimeout(async () => {
-            l.value = !0, s.value = !1, c.value = !1, await J(), await new Promise((S) => setTimeout(S, 100)), f.value = !0, p();
+            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"));
@@ -361,7 +361,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       });
     }
     function $(i) {
-      return new Promise((p, M) => {
+      return new Promise((g, M) => {
         if (!i) {
           M(new Error("No video source provided"));
           return;
@@ -370,18 +370,18 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
         I.preload = "metadata", I.muted = !0, I.onloadedmetadata = () => {
           const P = Date.now() - b, H = Math.max(0, A - P);
           setTimeout(async () => {
-            v.value = !0, a.value = !1, c.value = !1, await J(), await new Promise((S) => setTimeout(S, 100)), f.value = !0, p();
+            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;
       });
     }
-    async function L() {
-      var p;
+    async function E() {
+      var g;
       if (!h.value || c.value || N.value || d.value === "video" && v.value || d.value === "image" && l.value)
         return;
-      const i = (p = r.item) == null ? void 0 : p.src;
+      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;
@@ -400,8 +400,8 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
     return Se(() => {
       T.value && (m = new IntersectionObserver(
         (i) => {
-          i.forEach((p) => {
-            p.isIntersecting && p.intersectionRatio >= 1 ? h.value || (h.value = !0, L()) : p.isIntersecting;
+          i.forEach((g) => {
+            g.isIntersecting && g.intersectionRatio >= 1 ? h.value || (h.value = !0, E()) : g.isIntersecting;
           });
         },
         {
@@ -435,7 +435,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
           }
         }
       }
-    ), (i, p) => (D(), B("div", {
+    ), (i, g) => (D(), B("div", {
       ref_key: "containerRef",
       ref: T,
       class: "relative w-full h-full group"
@@ -451,11 +451,11 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
         isLoading: c.value,
         mediaType: d.value
       }, () => [
-        E("div", kt, [
-          N.value ? (D(), B("div", Et, p[4] || (p[4] = [
-            E("i", { class: "fas fa-search text-3xl mb-3 opacity-50" }, null, -1),
-            E("span", { class: "font-medium" }, "Not Found", -1),
-            E("span", { class: "text-xs mt-1 opacity-75" }, "This item could not be located", -1)
+        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", {
               key: 0,
@@ -480,9 +480,9 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
               muted: "",
               loop: "",
               playsinline: "",
-              onMouseenter: p[0] || (p[0] = (M) => M.target.play()),
-              onMouseleave: p[1] || (p[1] = (M) => M.target.pause()),
-              onError: p[2] || (p[2] = (M) => a.value = !0)
+              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", {
               key: 2,
@@ -491,25 +491,22 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
                 f.value ? "opacity-0 pointer-events-none" : "opacity-100"
               ])
             }, [
-              E("div", Ht, [
-                E("div", $t, [
-                  E("i", {
-                    class: Y(d.value === "video" ? "fas fa-video text-xl" : "fas fa-image text-xl")
-                  }, null, 2)
-                ]),
-                E("span", At, ie(d.value), 1)
+              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")
+                }, null, 2)
               ])
             ], 2)) : X("", !0),
-            c.value ? (D(), B("div", Ft, p[5] || (p[5] = [
-              E("div", { class: "bg-white/90 backdrop-blur-sm rounded-full px-3 py-1.5 shadow-sm" }, [
-                E("div", { class: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" })
+            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" })
               ], -1)
             ]))) : X("", !0),
-            d.value === "image" && s.value || d.value === "video" && a.value ? (D(), B("div", Wt, [
-              E("i", {
+            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")
               }, null, 2),
-              E("span", null, "Failed to load " + ie(d.value), 1)
+              S("span", null, "Failed to load " + ue(d.value), 1)
             ])) : X("", !0)
           ])),
           !N.value && (l.value || v.value || c.value) ? (D(), B("div", {
@@ -517,27 +514,27 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
             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"
           }, [
-            E("i", {
+            S("i", {
               class: Y(d.value === "video" ? "fas fa-video text-xs" : "fas fa-image text-xs")
             }, null, 2)
-          ], 8, jt)) : X("", !0),
-          p[7] || (p[7] = E("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)),
+          ], 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", {
             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: p[3] || (p[3] = ze((M) => i.remove(i.item), ["stop"])),
+            onClick: g[3] || (g[3] = ze((M) => i.remove(i.item), ["stop"])),
             "aria-label": "Remove item"
-          }, p[6] || (p[6] = [
-            E("i", { class: "fas fa-times text-sm" }, null, -1)
+          }, g[6] || (g[6] = [
+            S("i", { class: "fas fa-times text-sm" }, null, -1)
           ]))) : X("", !0),
-          E("div", Ot, [
-            E("p", Bt, "Item #" + ie(String(i.item.id).split("-")[0]), 1)
+          S("div", Wt, [
+            S("p", Ot, "Item #" + ue(String(i.item.id).split("-")[0]), 1)
           ])
         ])
       ])
     ], 512));
   }
-}), Dt = /* @__PURE__ */ Le({
+}), jt = /* @__PURE__ */ Le({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -669,18 +666,18 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
         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 g = [];
+        const p = [];
         for (const y of u) {
-          const O = (y == null ? void 0 : y.id) ?? `idx:${t.indexOf(y)}`;
-          N.value.has(O) || (N.value.add(O), g.push(O));
+          const j = (y == null ? void 0 : y.id) ?? `idx:${t.indexOf(y)}`;
+          N.value.has(j) || (N.value.add(j), p.push(j));
         }
-        if (g.length > 0) {
-          const y = g.slice(0, 10);
+        if (p.length > 0) {
+          const y = p.slice(0, 10);
           console.warn(
             "[Masonry] Items missing width/height detected:",
             {
               context: o,
-              count: g.length,
+              count: p.length,
               sampleIds: y,
               hint: "Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer."
             }
@@ -689,21 +686,21 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       } catch {
       }
     }
-    const L = k(0), i = k(0), p = s.virtualBufferPx, M = k(!1), I = k({
+    const E = k(0), i = k(0), g = s.virtualBufferPx, M = k(!1), I = k({
       distanceToTrigger: 0,
       isNearTrigger: !1
     }), b = (t) => {
       if (!c.value) return;
-      const { scrollTop: o, clientHeight: u } = c.value, g = o + u, y = t ?? pe(n.value, h.value), O = y.length ? Math.max(...y) : 0, G = typeof s.loadThresholdPx == "number" ? s.loadThresholdPx : 200, ee = G >= 0 ? Math.max(0, O - G) : Math.max(0, O + G), we = Math.max(0, ee - g), De = we <= 100;
+      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
       };
-    }, { onEnter: A, onBeforeEnter: P, onBeforeLeave: H, onLeave: S } = It(n, { leaveDurationMs: s.leaveDurationMs });
+    }, { 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), g = parseInt(t.dataset.top || "0", 10);
-        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${u}px, ${g}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+        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();
         });
       } else
@@ -720,13 +717,13 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       M.value || H(t);
     }
     function K(t, o) {
-      M.value ? o() : S(t, o);
+      M.value ? o() : L(t, o);
     }
     const oe = te(() => {
-      const t = L.value - p, o = L.value + i.value + p, u = n.value;
-      return !u || u.length === 0 ? [] : u.filter((g) => {
-        const y = g.top;
-        return g.top + g.columnHeight >= t && y <= o;
+      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;
       });
     }), { handleScroll: Q } = Pt({
       container: c,
@@ -751,8 +748,8 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       removeAll: We,
       loadNext: q,
       loadPage: R,
-      refreshCurrentPage: j,
-      reset: Oe,
+      refreshCurrentPage: O,
+      reset: je,
       init: Be,
       paginationHistory: f,
       cancelLoad: he,
@@ -763,31 +760,31 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       const o = wt(t);
       let u = 0;
       if (c.value) {
-        const { scrollTop: g, clientHeight: y } = c.value;
-        u = g + y + 100;
+        const { scrollTop: p, clientHeight: y } = c.value;
+        u = p + y + 100;
       }
       d.value = Math.max(o, u);
     }
     function C(t) {
       if (!c.value) return;
       $(t, "refreshLayout");
-      const o = t.map((g, y) => ({
-        ...g,
-        originalIndex: g.originalIndex ?? y
+      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 re(t, o) {
       return new Promise((u) => {
-        const g = Math.max(0, t | 0), y = Date.now();
-        o(g, g);
-        const O = setInterval(() => {
+        const p = Math.max(0, t | 0), y = Date.now();
+        o(p, p);
+        const j = setInterval(() => {
           if (W.value) {
-            clearInterval(O), u();
+            clearInterval(j), u();
             return;
           }
-          const G = Date.now() - y, ee = Math.max(0, g - G);
-          o(ee, g), ee <= 0 && (clearInterval(O), u());
+          const G = Date.now() - y, ee = Math.max(0, p - G);
+          o(ee, p), ee <= 0 && (clearInterval(j), u());
         }, 100);
       });
     }
@@ -802,7 +799,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
     async function F(t) {
       let o = 0;
       const u = s.retryMaxAttempts;
-      let g = s.retryInitialDelayMs;
+      let p = s.retryInitialDelayMs;
       for (; ; )
         try {
           const y = await t();
@@ -810,9 +807,9 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
         } catch (y) {
           if (o++, o > u)
             throw a("retry:stop", { attempt: o - 1, success: !1 }), y;
-          a("retry:start", { attempt: o, max: u, totalMs: g }), await re(g, (O, G) => {
-            a("retry:tick", { attempt: o, remainingMs: O, totalMs: G });
-          }), g += s.retryBackoffStepMs;
+          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;
         }
     }
     async function R(t) {
@@ -845,7 +842,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
         }
       }
     }
-    async function j() {
+    async function O() {
       if (console.log("[Masonry] refreshCurrentPage called, isLoading:", m.value, "currentPage:", T.value), !m.value) {
         W.value = !1, m.value = !0;
         try {
@@ -871,7 +868,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       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 j();
+          console.log("[Masonry] All items removed, calling refreshCurrentPage"), await O();
         else {
           console.log("[Masonry] All items removed, calling loadNext and forcing backfill");
           try {
@@ -887,10 +884,10 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
     }
     async function V(t) {
       if (!t || t.length === 0) return;
-      const o = new Set(t.map((g) => g.id)), u = n.value.filter((g) => !o.has(g.id));
+      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 j();
+          await O();
         else
           try {
             await q(), await le(0, !0);
@@ -898,7 +895,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
           }
         return;
       }
-      await new Promise((g) => requestAnimationFrame(() => g())), requestAnimationFrame(() => {
+      await new Promise((p) => requestAnimationFrame(() => p())), requestAnimationFrame(() => {
         C(u);
       });
     }
@@ -912,16 +909,16 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
     async function We() {
       ye({ behavior: "smooth" }), n.value = [], d.value = 0, await J(), a("remove-all:complete");
     }
-    function je() {
-      h.value = ve(v.value), C(n.value), c.value && (L.value = c.value.scrollTop, i.value = c.value.clientHeight);
+    function Oe() {
+      h.value = ve(v.value), C(n.value), c.value && (E.value = c.value.scrollTop, i.value = c.value.clientHeight);
     }
-    let ue = !1;
+    let ie = !1;
     const W = k(!1);
     async function le(t, o = !1) {
-      if (!o && !s.backfillEnabled || ue || W.value) return;
+      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)) {
-        ue = !0;
+        ie = !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) => {
@@ -933,10 +930,10 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
               totalMs: ee
             });
           }), !W.value); ) {
-            const O = f.value[f.value.length - 1];
+            const j = f.value[f.value.length - 1];
             try {
               m.value = !0;
-              const G = await x(O);
+              const G = await x(j);
               if (W.value) break;
               f.value.push(G.nextPage);
             } finally {
@@ -946,14 +943,14 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
           }
           a("backfill:stop", { fetched: n.value.length, calls: y });
         } finally {
-          ue = !1;
+          ie = !1;
         }
       }
     }
     function he() {
-      W.value = !0, m.value = !1, ue = !1;
+      W.value = !0, m.value = !1, ie = !1;
     }
-    function Oe() {
+    function je() {
       he(), W.value = !1, c.value && c.value.scrollTo({
         top: 0,
         behavior: "smooth"
@@ -963,10 +960,10 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       };
     }
     const be = ke(async () => {
-      c.value && (L.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 = pe(n.value, h.value);
+      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(je, 200);
+    }, 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();
     }
@@ -979,7 +976,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
     ), Se(async () => {
       var t;
       try {
-        h.value = ve(v.value), c.value && (L.value = c.value.scrollTop, i.value = c.value.clientHeight);
+        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) {
@@ -994,7 +991,7 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
       ref_key: "container",
       ref: c
     }, [
-      E("div", {
+      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 })
       }, [
@@ -1007,18 +1004,18 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
           onBeforeLeave: ne
         }, {
           default: Ce(() => [
-            (D(!0), B(qe, null, Ve(oe.value, (u, g) => (D(), B("div", Ge({
+            (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, g), {
+            }, Ue(Mt)(u, p), {
               style: { paddingTop: `${v.value.header}px`, paddingBottom: `${v.value.footer}px` }
             }), [
               $e(t.$slots, "default", {
                 item: u,
                 remove: U
               }, () => [
-                Te(ge, {
+                Te(pe, {
                   item: u,
                   remove: U
                 }, null, 8, ["item"])
@@ -1031,25 +1028,25 @@ const kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:sh
           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 }])
         }, [
-          E("span", null, ie(n.value.length) + " items", 1),
-          o[0] || (o[0] = E("span", { class: "mx-2" }, "|", -1)),
-          E("span", null, ie(I.value.distanceToTrigger) + "px to load", 1)
+          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));
   }
-}), zt = (e, r) => {
+}), Bt = (e, r) => {
   const l = e.__vccOpts || e;
   for (const [s, w] of r)
     l[s] = w;
   return l;
-}, Ee = /* @__PURE__ */ zt(Dt, [["__scopeId", "data-v-110c3294"]]), _t = {
+}, Ee = /* @__PURE__ */ Bt(jt, [["__scopeId", "data-v-110c3294"]]), zt = {
   install(e) {
-    e.component("WyxosMasonry", Ee), e.component("WMasonry", Ee), e.component("WyxosMasonryItem", ge), e.component("WMasonryItem", ge);
+    e.component("WyxosMasonry", Ee), e.component("WMasonry", Ee), e.component("WyxosMasonryItem", pe), e.component("WMasonryItem", pe);
   }
 };
 export {
   Ee as Masonry,
-  ge as MasonryItem,
-  _t as default
+  pe as MasonryItem,
+  zt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/components/MasonryItem.vue

@@ -289,13 +289,8 @@ watch(
             ]"
           >
             <!-- Media type indicator - shown BEFORE preloading starts -->
-            <div
-              class="flex flex-col items-center justify-center gap-2 text-slate-400"
-            >
-              <div class="w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm">
-                <i :class="mediaType === 'video' ? 'fas fa-video text-xl' : 'fas fa-image text-xl'"></i>
-              </div>
-              <span class="text-xs font-medium uppercase">{{ mediaType }}</span>
+            <div class="w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm">
+              <i :class="mediaType === 'video' ? 'fas fa-video text-xl text-slate-400' : 'fas fa-image text-xl text-slate-400'"></i>
             </div>
           </div>