@wyxos/vibe 1.4.0 → 1.4.1

package/lib/index.js

@@ -1,4 +1,4 @@
-import { nextTick as X, defineComponent as dt, computed as et, ref as B, onMounted as gt, onUnmounted as pt, createElementBlock as Y, openBlock as J, createElementVNode as C, normalizeStyle as mt, createVNode as ht, createCommentVNode as yt, TransitionGroup as vt, unref as V, withCtx as bt, Fragment as xt, renderList as wt, mergeProps as nt, renderSlot as Tt, normalizeClass as Mt, toDisplayString as at } from "vue";
+import { nextTick as X, defineComponent as gt, computed as et, ref as B, onMounted as pt, onUnmounted as mt, createElementBlock as Y, openBlock as J, normalizeClass as nt, createElementVNode as C, normalizeStyle as ht, createVNode as yt, createCommentVNode as vt, TransitionGroup as bt, unref as q, withCtx as xt, Fragment as wt, renderList as Tt, mergeProps as at, renderSlot as Mt, toDisplayString as rt } from "vue";
 function It() {
   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);
@@ -7,15 +7,15 @@ function It() {
   const o = t.offsetWidth - a.offsetWidth;
   return document.body.removeChild(t), o;
 }
-function St(t, a, o, s = {}) {
+function St(t, a, o, l = {}) {
   const {
     gutterX: b = 0,
     gutterY: r = 0,
     header: d = 0,
     footer: i = 0,
     paddingLeft: w = 0,
-    paddingRight: h = 0,
-    sizes: m = {
+    paddingRight: m = 0,
+    sizes: h = {
       base: 1,
       sm: 2,
       md: 3,
@@ -23,81 +23,81 @@ function St(t, a, o, s = {}) {
       xl: 5,
       "2xl": 6
     },
-    placement: p = "masonry"
-  } = s;
-  let T = 0, E = 0;
+    placement: g = "masonry"
+  } = l;
+  let x = 0, E = 0;
   try {
     if (a && a.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
-      const f = window.getComputedStyle(a);
-      T = parseFloat(f.paddingLeft) || 0, E = parseFloat(f.paddingRight) || 0;
+      const u = window.getComputedStyle(a);
+      x = parseFloat(u.paddingLeft) || 0, E = parseFloat(u.paddingRight) || 0;
     }
   } catch {
   }
-  const $ = (w || 0) + T, A = (h || 0) + E, W = a.offsetWidth - a.clientWidth, M = W > 0 ? W + 2 : It() + 2, H = a.offsetWidth - M - $ - A, N = b * (o - 1), I = Math.floor((H - N) / o), y = t.map((f) => {
-    const v = f.width, S = f.height;
-    return Math.round(I * S / v) + i + d;
+  const W = (w || 0) + x, O = (m || 0) + E, M = a.offsetWidth - a.clientWidth, T = M > 0 ? M + 2 : It() + 2, L = a.offsetWidth - T - W - O, $ = b * (o - 1), I = Math.floor((L - $) / o), p = t.map((u) => {
+    const k = u.width, H = u.height;
+    return Math.round(I * H / k) + i + d;
   });
-  if (p === "sequential-balanced") {
-    const f = y.length;
-    if (f === 0) return [];
-    const v = (e, n, l) => e + (n > 0 ? r : 0) + l;
-    let S = Math.max(...y), L = y.reduce((e, n) => e + n, 0) + r * Math.max(0, f - 1);
+  if (g === "sequential-balanced") {
+    const u = p.length;
+    if (u === 0) return [];
+    const k = (e, n, c) => e + (n > 0 ? r : 0) + c;
+    let H = Math.max(...p), N = p.reduce((e, n) => e + n, 0) + r * Math.max(0, u - 1);
     const R = (e) => {
-      let n = 1, l = 0, g = 0;
-      for (let x = 0; x < f; x++) {
-        const P = y[x], k = v(l, g, P);
-        if (k <= e)
-          l = k, g++;
-        else if (n++, l = P, g = 1, P > e || n > o) return !1;
+      let n = 1, c = 0, f = 0;
+      for (let y = 0; y < u; y++) {
+        const P = p[y], S = k(c, f, P);
+        if (S <= e)
+          c = S, f++;
+        else if (n++, c = P, f = 1, P > e || n > o) return !1;
       }
       return n <= o;
     };
-    for (; S < L; ) {
-      const e = Math.floor((S + L) / 2);
-      R(e) ? L = e : S = e + 1;
+    for (; H < N; ) {
+      const e = Math.floor((H + N) / 2);
+      R(e) ? N = e : H = e + 1;
     }
-    const _ = L, O = new Array(o).fill(0);
+    const _ = N, A = new Array(o).fill(0);
     let z = o - 1, D = 0, j = 0;
-    for (let e = f - 1; e >= 0; e--) {
-      const n = y[e], l = e < z;
-      !(v(D, j, n) <= _) || l ? (O[z] = e + 1, z--, D = n, j = 1) : (D = v(D, j, n), j++);
+    for (let e = u - 1; e >= 0; e--) {
+      const n = p[e], c = e < z;
+      !(k(D, j, n) <= _) || c ? (A[z] = e + 1, z--, D = n, j = 1) : (D = k(D, j, n), j++);
     }
-    O[0] = 0;
-    const q = [], U = new Array(o).fill(0);
+    A[0] = 0;
+    const V = [], U = new Array(o).fill(0);
     for (let e = 0; e < o; e++) {
-      const n = O[e], l = e + 1 < o ? O[e + 1] : f, g = e * (I + b);
-      for (let x = n; x < l; x++) {
-        const k = { ...t[x], columnWidth: I, imageHeight: 0, columnHeight: 0, left: 0, top: 0 }, F = y[x] - (i + d);
-        k.imageHeight = F, k.columnHeight = y[x], k.left = g, k.top = U[e], U[e] += k.columnHeight + (x + 1 < l ? r : 0), q.push(k);
+      const n = A[e], c = e + 1 < o ? A[e + 1] : u, f = e * (I + b);
+      for (let y = n; y < c; y++) {
+        const S = { ...t[y], columnWidth: I, imageHeight: 0, columnHeight: 0, left: 0, top: 0 }, F = p[y] - (i + d);
+        S.imageHeight = F, S.columnHeight = p[y], S.left = f, S.top = U[e], U[e] += S.columnHeight + (y + 1 < c ? r : 0), V.push(S);
       }
     }
-    return q;
+    return V;
   }
-  const c = new Array(o).fill(0), u = [];
-  for (let f = 0; f < t.length; f++) {
-    const v = t[f], S = { ...v, columnWidth: 0, imageHeight: 0, columnHeight: 0, left: 0, top: 0 }, L = c.indexOf(Math.min(...c)), R = v.width, _ = v.height;
-    S.columnWidth = I, S.left = L * (I + b), S.imageHeight = Math.round(I * _ / R), S.columnHeight = S.imageHeight + i + d, S.top = c[L], c[L] += S.columnHeight + r, u.push(S);
+  const s = new Array(o).fill(0), v = [];
+  for (let u = 0; u < t.length; u++) {
+    const k = t[u], H = { ...k, columnWidth: 0, imageHeight: 0, columnHeight: 0, left: 0, top: 0 }, N = s.indexOf(Math.min(...s)), R = k.width, _ = k.height;
+    H.columnWidth = I, H.left = N * (I + b), H.imageHeight = Math.round(I * _ / R), H.columnHeight = H.imageHeight + i + d, H.top = s[N], s[N] += H.columnHeight + r, v.push(H);
   }
-  return u;
+  return v;
 }
-var kt = typeof global == "object" && global && global.Object === Object && global, Ht = typeof self == "object" && self && self.Object === Object && self, ut = kt || Ht || Function("return this")(), K = ut.Symbol, ft = Object.prototype, Et = ft.hasOwnProperty, Pt = ft.toString, G = K ? K.toStringTag : void 0;
+var kt = typeof global == "object" && global && global.Object === Object && global, Ht = typeof self == "object" && self && self.Object === Object && self, ft = kt || Ht || Function("return this")(), K = ft.Symbol, dt = Object.prototype, Et = dt.hasOwnProperty, Pt = dt.toString, G = K ? K.toStringTag : void 0;
 function Lt(t) {
   var a = Et.call(t, G), o = t[G];
   try {
     t[G] = void 0;
-    var s = !0;
+    var l = !0;
   } catch {
   }
   var b = Pt.call(t);
-  return s && (a ? t[G] = o : delete t[G]), b;
+  return l && (a ? t[G] = o : delete t[G]), b;
 }
 var $t = Object.prototype, Nt = $t.toString;
 function Wt(t) {
   return Nt.call(t);
 }
-var At = "[object Null]", Ot = "[object Undefined]", rt = K ? K.toStringTag : void 0;
+var Ot = "[object Null]", At = "[object Undefined]", ot = K ? K.toStringTag : void 0;
 function jt(t) {
-  return t == null ? t === void 0 ? Ot : At : rt && rt in Object(t) ? Lt(t) : Wt(t);
+  return t == null ? t === void 0 ? At : Ot : ot && ot in Object(t) ? Lt(t) : Wt(t);
 }
 function Bt(t) {
   return t != null && typeof t == "object";
@@ -120,12 +120,12 @@ function Z(t) {
   var a = typeof t;
   return t != null && (a == "object" || a == "function");
 }
-var ot = NaN, qt = /^[-+]0x[0-9a-f]+$/i, Vt = /^0b[01]+$/i, Gt = /^0o[0-7]+$/i, Xt = parseInt;
-function it(t) {
+var it = NaN, Vt = /^[-+]0x[0-9a-f]+$/i, qt = /^0b[01]+$/i, Gt = /^0o[0-7]+$/i, Xt = parseInt;
+function st(t) {
   if (typeof t == "number")
     return t;
   if (zt(t))
-    return ot;
+    return it;
   if (Z(t)) {
     var a = typeof t.valueOf == "function" ? t.valueOf() : t;
     t = Z(a) ? a + "" : a;
@@ -133,65 +133,65 @@ function it(t) {
   if (typeof t != "string")
     return t === 0 ? t : +t;
   t = _t(t);
-  var o = Vt.test(t);
-  return o || Gt.test(t) ? Xt(t.slice(2), o ? 2 : 8) : qt.test(t) ? ot : +t;
+  var o = qt.test(t);
+  return o || Gt.test(t) ? Xt(t.slice(2), o ? 2 : 8) : Vt.test(t) ? it : +t;
 }
 var Q = function() {
-  return ut.Date.now();
+  return ft.Date.now();
 }, Ut = "Expected a function", Yt = Math.max, Jt = Math.min;
-function st(t, a, o) {
-  var s, b, r, d, i, w, h = 0, m = !1, p = !1, T = !0;
+function lt(t, a, o) {
+  var l, b, r, d, i, w, m = 0, h = !1, g = !1, x = !0;
   if (typeof t != "function")
     throw new TypeError(Ut);
-  a = it(a) || 0, Z(o) && (m = !!o.leading, p = "maxWait" in o, r = p ? Yt(it(o.maxWait) || 0, a) : r, T = "trailing" in o ? !!o.trailing : T);
-  function E(c) {
-    var u = s, f = b;
-    return s = b = void 0, h = c, d = t.apply(f, u), d;
+  a = st(a) || 0, Z(o) && (h = !!o.leading, g = "maxWait" in o, r = g ? Yt(st(o.maxWait) || 0, a) : r, x = "trailing" in o ? !!o.trailing : x);
+  function E(s) {
+    var v = l, u = b;
+    return l = b = void 0, m = s, d = t.apply(u, v), d;
   }
-  function $(c) {
-    return h = c, i = setTimeout(M, a), m ? E(c) : d;
+  function W(s) {
+    return m = s, i = setTimeout(T, a), h ? E(s) : d;
   }
-  function A(c) {
-    var u = c - w, f = c - h, v = a - u;
-    return p ? Jt(v, r - f) : v;
+  function O(s) {
+    var v = s - w, u = s - m, k = a - v;
+    return g ? Jt(k, r - u) : k;
   }
-  function W(c) {
-    var u = c - w, f = c - h;
-    return w === void 0 || u >= a || u < 0 || p && f >= r;
+  function M(s) {
+    var v = s - w, u = s - m;
+    return w === void 0 || v >= a || v < 0 || g && u >= r;
   }
-  function M() {
-    var c = Q();
-    if (W(c))
-      return H(c);
-    i = setTimeout(M, A(c));
+  function T() {
+    var s = Q();
+    if (M(s))
+      return L(s);
+    i = setTimeout(T, O(s));
   }
-  function H(c) {
-    return i = void 0, T && s ? E(c) : (s = b = void 0, d);
+  function L(s) {
+    return i = void 0, x && l ? E(s) : (l = b = void 0, d);
   }
-  function N() {
-    i !== void 0 && clearTimeout(i), h = 0, s = w = b = i = void 0;
+  function $() {
+    i !== void 0 && clearTimeout(i), m = 0, l = w = b = i = void 0;
   }
   function I() {
-    return i === void 0 ? d : H(Q());
+    return i === void 0 ? d : L(Q());
   }
-  function y() {
-    var c = Q(), u = W(c);
-    if (s = arguments, b = this, w = c, u) {
+  function p() {
+    var s = Q(), v = M(s);
+    if (l = arguments, b = this, w = s, v) {
       if (i === void 0)
-        return $(w);
-      if (p)
-        return clearTimeout(i), i = setTimeout(M, a), E(w);
+        return W(w);
+      if (g)
+        return clearTimeout(i), i = setTimeout(T, a), E(w);
     }
-    return i === void 0 && (i = setTimeout(M, a)), d;
+    return i === void 0 && (i = setTimeout(T, a)), d;
   }
-  return y.cancel = N, y.flush = I, y;
+  return p.cancel = $, p.flush = I, p;
 }
-function lt(t) {
+function ct(t) {
   const a = window.innerWidth, o = t.sizes;
   return a >= 1536 && o["2xl"] ? o["2xl"] : a >= 1280 && o.xl ? o.xl : a >= 1024 && o.lg ? o.lg : a >= 768 && o.md ? o.md : a >= 640 && o.sm ? o.sm : o.base;
 }
 function Kt(t) {
-  return t.reduce((o, s) => Math.max(o, s.top + s.columnHeight), 0) + 500;
+  return t.reduce((o, l) => Math.max(o, l.top + l.columnHeight), 0) + 500;
 }
 function Qt(t) {
   return {
@@ -213,47 +213,47 @@ function Zt(t, a = 0) {
 }
 function tt(t, a) {
   const o = new Array(a).fill(0);
-  for (let s = 0; s < t.length; s++) {
-    const b = t[s], r = s % a;
+  for (let l = 0; l < t.length; l++) {
+    const b = t[l], r = l % a;
     o[r] = Math.max(o[r], b.top + b.columnHeight);
   }
   return o;
 }
 function te(t) {
   function a(r, d) {
-    const i = parseInt(r.dataset.left || "0", 10), w = parseInt(r.dataset.top || "0", 10), h = parseInt(r.dataset.index || "0", 10), m = Math.min(h * 20, 160), p = r.style.getPropertyValue("--masonry-opacity-delay");
-    r.style.setProperty("--masonry-opacity-delay", `${m}ms`), requestAnimationFrame(() => {
+    const i = parseInt(r.dataset.left || "0", 10), w = parseInt(r.dataset.top || "0", 10), m = parseInt(r.dataset.index || "0", 10), h = Math.min(m * 20, 160), g = r.style.getPropertyValue("--masonry-opacity-delay");
+    r.style.setProperty("--masonry-opacity-delay", `${h}ms`), requestAnimationFrame(() => {
       r.style.opacity = "1", r.style.transform = `translate3d(${i}px, ${w}px, 0) scale(1)`;
-      const T = () => {
-        p ? r.style.setProperty("--masonry-opacity-delay", p) : r.style.removeProperty("--masonry-opacity-delay"), r.removeEventListener("transitionend", T), d();
+      const x = () => {
+        g ? r.style.setProperty("--masonry-opacity-delay", g) : r.style.removeProperty("--masonry-opacity-delay"), r.removeEventListener("transitionend", x), d();
       };
-      r.addEventListener("transitionend", T);
+      r.addEventListener("transitionend", x);
     });
   }
   function o(r) {
     const d = parseInt(r.dataset.left || "0", 10), i = parseInt(r.dataset.top || "0", 10);
     r.style.opacity = "0", r.style.transform = `translate3d(${d}px, ${i + 10}px, 0) scale(0.985)`;
   }
-  function s(r) {
+  function l(r) {
     const d = parseInt(r.dataset.left || "0", 10), i = parseInt(r.dataset.top || "0", 10);
     r.style.transition = "none", r.style.opacity = "1", r.style.transform = `translate3d(${d}px, ${i}px, 0) scale(1)`, r.style.removeProperty("--masonry-opacity-delay"), r.offsetWidth, r.style.transition = "";
   }
   function b(r, d) {
-    const i = parseInt(r.dataset.left || "0", 10), w = parseInt(r.dataset.top || "0", 10), m = getComputedStyle(r).getPropertyValue("--masonry-leave-duration") || "", p = parseFloat(m), T = Number.isFinite(p) && p > 0 ? p : 200, E = r.style.transitionDuration, $ = () => {
-      r.removeEventListener("transitionend", A), clearTimeout(W), r.style.transitionDuration = E || "";
-    }, A = (M) => {
-      (!M || M.target === r) && ($(), d());
-    }, W = setTimeout(() => {
-      $(), d();
-    }, T + 100);
+    const i = parseInt(r.dataset.left || "0", 10), w = parseInt(r.dataset.top || "0", 10), h = getComputedStyle(r).getPropertyValue("--masonry-leave-duration") || "", g = parseFloat(h), x = Number.isFinite(g) && g > 0 ? g : 200, E = r.style.transitionDuration, W = () => {
+      r.removeEventListener("transitionend", O), clearTimeout(M), r.style.transitionDuration = E || "";
+    }, O = (T) => {
+      (!T || T.target === r) && (W(), d());
+    }, M = setTimeout(() => {
+      W(), d();
+    }, x + 100);
     requestAnimationFrame(() => {
-      r.style.transitionDuration = `${T}ms`, r.style.opacity = "0", r.style.transform = `translate3d(${i}px, ${w + 10}px, 0) scale(0.985)`, r.addEventListener("transitionend", A);
+      r.style.transitionDuration = `${x}ms`, r.style.opacity = "0", r.style.transform = `translate3d(${i}px, ${w + 10}px, 0) scale(0.985)`, r.addEventListener("transitionend", O);
     });
   }
   return {
     onEnter: a,
     onBeforeEnter: o,
-    onBeforeLeave: s,
+    onBeforeLeave: l,
     onLeave: b
   };
 }
@@ -261,61 +261,57 @@ function ee({
   container: t,
   masonry: a,
   columns: o,
-  containerHeight: s,
+  containerHeight: l,
   isLoading: b,
   maxItems: r,
   pageSize: d,
   refreshLayout: i,
   setItemsRaw: w,
-  loadNext: h,
-  leaveEstimateMs: m
+  loadNext: m,
+  leaveEstimateMs: h
 }) {
-  let p = !1;
-  async function T() {
+  let g = !1, x = 0;
+  async function E() {
     if (!t.value) return;
-    const { scrollTop: M, clientHeight: H } = t.value, N = M + H, I = tt(a.value, o.value), c = Math.max(...I) + 300 < N - 1, u = M + H >= s.value - 1;
-    if ((c || u) && !b.value && !p)
+    const { scrollTop: M, clientHeight: T } = t.value, L = M + T, $ = M > x + 1;
+    x = M;
+    const I = tt(a.value, o.value), s = Math.max(...I) + 300 < L - 1, v = M + T >= l.value - 1;
+    if ((s || v) && $ && !b.value && !g)
       try {
-        a.value.length > r && await E(I), await h(), await X();
-      } catch (f) {
-        console.error("Error in scroll handler:", f);
+        a.value.length > r && await W(I), await m(), await X();
+      } catch (u) {
+        console.error("Error in scroll handler:", u);
       }
   }
-  async function E(M) {
+  async function W(M) {
     if (!a.value.length || a.value.length <= d) return;
-    const H = a.value.reduce((u, f) => {
-      const v = f.page;
-      return u[v] || (u[v] = []), u[v].push(f), u;
-    }, {}), N = Object.keys(H).sort((u, f) => parseInt(u) - parseInt(f));
-    if (N.length === 0) return;
-    let I = 0;
-    const y = [];
-    for (const u of N)
-      if (y.push(u), I += H[u].length, I >= d) break;
-    const c = a.value.filter((u) => !y.includes(String(u.page)));
-    c.length !== a.value.length && (p = !0, w(c), await X(), await A($()), i(c), await X(), await W(), p = !1);
-  }
-  function $() {
-    return (typeof m == "number" && m > 0 ? m : 250) + 50;
+    const T = a.value.reduce((s, v) => {
+      const u = v.page;
+      return s[u] || (s[u] = []), s[u].push(v), s;
+    }, {}), L = Object.keys(T).sort((s, v) => parseInt(s) - parseInt(v));
+    if (L.length === 0) return;
+    let $ = 0;
+    const I = [];
+    for (const s of L)
+      if (I.push(s), $ += T[s].length, $ >= d) break;
+    const p = a.value.filter((s) => !I.includes(String(s.page)));
+    p.length !== a.value.length && (g = !0, w(p), await X(), await new Promise((s) => requestAnimationFrame(() => s())), i(p), await X(), await O(), g = !1);
   }
-  function A(M) {
-    return new Promise((H) => setTimeout(H, M));
-  }
-  async function W() {
+  async function O() {
     if (!t.value) return;
-    const { scrollTop: M, clientHeight: H } = t.value, N = M + H * 0.4, I = tt(a.value, o.value), y = I.indexOf(Math.max(...I)), c = a.value.filter((v, S) => S % o.value === y);
-    if (c.length === 0) return;
-    let u = c[0];
-    for (const v of c)
-      v.top <= N && v.top >= u.top && (u = v);
-    const f = Math.max(0, u.top - H * 0.4);
-    Math.abs(f - M) > 4 && t.value.scrollTo({ top: f, behavior: "auto" });
+    const { scrollTop: M, clientHeight: T } = t.value, L = M + T * 0.4, $ = tt(a.value, o.value), I = $.indexOf(Math.max(...$)), p = a.value.filter((u, k) => k % o.value === I);
+    if (p.length === 0) return;
+    let s = p[0];
+    for (const u of p)
+      u.top <= L && u.top >= s.top && (s = u);
+    const v = Math.max(0, s.top - T * 0.4);
+    Math.abs(v - M) > 4 && t.value.scrollTo({ top: v, behavior: "auto" });
   }
   return {
-    handleScroll: T
+    handleScroll: E
   };
 }
-const ne = ["src"], ae = ["onClick"], re = /* @__PURE__ */ dt({
+const ne = ["src"], ae = ["onClick"], re = /* @__PURE__ */ gt({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -390,6 +386,11 @@ const ne = ["src"], ae = ["onClick"], re = /* @__PURE__ */ dt({
     transitionEasing: {
       type: String,
       default: "cubic-bezier(.22,.61,.36,1)"
+    },
+    // Force motion even when user has reduced-motion enabled
+    forceMotion: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -402,7 +403,7 @@ const ne = ["src"], ae = ["onClick"], re = /* @__PURE__ */ dt({
     "retry:stop"
   ],
   setup(t, { expose: a, emit: o }) {
-    const s = t, b = {
+    const l = t, b = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -415,241 +416,239 @@ const ne = ["src"], ae = ["onClick"], re = /* @__PURE__ */ dt({
       var e;
       return {
         ...b,
-        ...s.layout,
+        ...l.layout,
         sizes: {
           ...b.sizes,
-          ...((e = s.layout) == null ? void 0 : e.sizes) || {}
+          ...((e = l.layout) == null ? void 0 : e.sizes) || {}
         }
       };
     }), d = o, i = et({
-      get: () => s.items,
+      get: () => l.items,
       set: (e) => d("update:items", e)
-    }), w = B(7), h = B(null), m = B([]);
+    }), w = B(7), m = B(null), h = B([]);
     B(null);
-    const p = B(!1), T = B(0), E = B({
+    const g = B(!1), x = B(0), E = B({
       distanceToTrigger: 0,
       isNearTrigger: !1
-    }), $ = () => {
-      if (!h.value) return;
-      const { scrollTop: e, clientHeight: n } = h.value, l = e + n, g = tt(i.value, w.value), P = Math.max(...g) + 300, k = Math.max(0, P - l), F = k <= 100;
+    }), W = () => {
+      if (!m.value) return;
+      const { scrollTop: e, clientHeight: n } = m.value, c = e + n, f = tt(i.value, w.value), P = Math.max(...f) + 300, S = Math.max(0, P - c), F = S <= 100;
       E.value = {
-        distanceToTrigger: Math.round(k),
+        distanceToTrigger: Math.round(S),
         isNearTrigger: F
       };
-    }, { onEnter: A, onBeforeEnter: W, onBeforeLeave: M, onLeave: H } = te(), { handleScroll: N } = ee({
-      container: h,
+    }, { onEnter: O, onBeforeEnter: M, onBeforeLeave: T, onLeave: L } = te(), { handleScroll: $ } = ee({
+      container: m,
       masonry: i,
       columns: w,
-      containerHeight: T,
-      isLoading: p,
-      maxItems: s.maxItems,
-      pageSize: s.pageSize,
-      refreshLayout: y,
+      containerHeight: x,
+      isLoading: g,
+      maxItems: l.maxItems,
+      pageSize: l.pageSize,
+      refreshLayout: p,
       setItemsRaw: (e) => {
         i.value = e;
       },
-      loadNext: S,
-      leaveEstimateMs: s.leaveDurationMs
+      loadNext: H,
+      leaveEstimateMs: l.leaveDurationMs
     });
     a({
-      isLoading: p,
-      refreshLayout: y,
-      containerHeight: T,
-      remove: L,
+      isLoading: g,
+      refreshLayout: p,
+      containerHeight: x,
+      remove: N,
       removeMany: R,
-      loadNext: S,
-      loadPage: v,
+      loadNext: H,
+      loadPage: k,
       reset: D,
       init: U,
-      paginationHistory: m
+      paginationHistory: h
     });
     function I(e) {
       const n = Kt(e);
-      let l = 0;
-      if (h.value) {
-        const { scrollTop: g, clientHeight: x } = h.value;
-        l = g + x + 100;
+      let c = 0;
+      if (m.value) {
+        const { scrollTop: f, clientHeight: y } = m.value;
+        c = f + y + 100;
       }
-      T.value = Math.max(n, l);
+      x.value = Math.max(n, c);
     }
-    function y(e) {
-      if (!h.value) return;
-      const n = St(e, h.value, w.value, r.value);
+    function p(e) {
+      if (!m.value) return;
+      const n = St(e, m.value, w.value, r.value);
       I(n), i.value = n;
     }
-    function c(e, n) {
-      return new Promise((l) => {
-        const g = Math.max(0, e | 0), x = Date.now();
-        n(g, g);
+    function s(e, n) {
+      return new Promise((c) => {
+        const f = Math.max(0, e | 0), y = Date.now();
+        n(f, f);
         const P = setInterval(() => {
-          const k = Date.now() - x, F = Math.max(0, g - k);
-          n(F, g), F <= 0 && (clearInterval(P), l());
+          const S = Date.now() - y, F = Math.max(0, f - S);
+          n(F, f), F <= 0 && (clearInterval(P), c());
         }, 100);
       });
     }
-    async function u(e) {
+    async function v(e) {
       try {
-        const n = await f(() => s.getNextPage(e));
-        return y([...i.value, ...n.items]), n;
+        const n = await u(() => l.getNextPage(e));
+        return p([...i.value, ...n.items]), n;
       } catch (n) {
         throw console.error("Error in getContent:", n), n;
       }
     }
-    async function f(e) {
+    async function u(e) {
       let n = 0;
-      const l = s.retryMaxAttempts;
-      let g = s.retryInitialDelayMs;
+      const c = l.retryMaxAttempts;
+      let f = l.retryInitialDelayMs;
       for (; ; )
         try {
-          const x = await e();
-          return n > 0 && d("retry:stop", { attempt: n, success: !0 }), x;
-        } catch (x) {
-          if (n++, n > l)
-            throw d("retry:stop", { attempt: n - 1, success: !1 }), x;
-          d("retry:start", { attempt: n, max: l, totalMs: g }), await c(g, (P, k) => {
-            d("retry:tick", { attempt: n, remainingMs: P, totalMs: k });
-          }), g += s.retryBackoffStepMs;
+          const y = await e();
+          return n > 0 && d("retry:stop", { attempt: n, success: !0 }), y;
+        } catch (y) {
+          if (n++, n > c)
+            throw d("retry:stop", { attempt: n - 1, success: !1 }), y;
+          d("retry:start", { attempt: n, max: c, totalMs: f }), await s(f, (P, S) => {
+            d("retry:tick", { attempt: n, remainingMs: P, totalMs: S });
+          }), f += l.retryBackoffStepMs;
         }
     }
-    async function v(e) {
-      if (!p.value) {
-        p.value = !0;
+    async function k(e) {
+      if (!g.value) {
+        g.value = !0;
         try {
-          const n = i.value.length, l = await u(e);
-          return m.value.push(l.nextPage), await z(n), l;
+          const n = i.value.length, c = await v(e);
+          return h.value.push(c.nextPage), await z(n), c;
         } catch (n) {
           throw console.error("Error loading page:", n), n;
         } finally {
-          p.value = !1;
+          g.value = !1;
         }
       }
     }
-    async function S() {
-      if (!p.value) {
-        p.value = !0;
+    async function H() {
+      if (!g.value) {
+        g.value = !0;
         try {
-          const e = i.value.length, n = m.value[m.value.length - 1], l = await u(n);
-          return m.value.push(l.nextPage), await z(e), l;
+          const e = i.value.length, n = h.value[h.value.length - 1], c = await v(n);
+          return h.value.push(c.nextPage), await z(e), c;
         } catch (e) {
           throw console.error("Error loading next page:", e), e;
         } finally {
-          p.value = !1;
+          g.value = !1;
         }
       }
     }
-    async function L(e) {
-      const n = i.value.filter((l) => l.id !== e.id);
-      i.value = n, await X(), requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          y(n);
-        });
+    async function N(e) {
+      var c;
+      const n = i.value.filter((f) => f.id !== e.id);
+      i.value = n, await X(), (c = m.value) == null || c.offsetHeight, requestAnimationFrame(() => {
+        p(n);
       });
     }
     async function R(e) {
+      var f;
       if (!e || e.length === 0) return;
-      const n = new Set(e.map((g) => g.id)), l = i.value.filter((g) => !n.has(g.id));
-      i.value = l, await X(), requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          y(l);
-        });
+      const n = new Set(e.map((y) => y.id)), c = i.value.filter((y) => !n.has(y.id));
+      i.value = c, await X(), (f = m.value) == null || f.offsetHeight, requestAnimationFrame(() => {
+        p(c);
       });
     }
     function _() {
-      w.value = lt(r.value), y(i.value);
+      w.value = ct(r.value), p(i.value);
     }
-    let O = !1;
+    let A = !1;
     async function z(e) {
-      if (!s.backfillEnabled || O) return;
-      const n = (e || 0) + (s.pageSize || 0);
-      if (!(!s.pageSize || s.pageSize <= 0 || m.value[m.value.length - 1] == null) && !(i.value.length >= n)) {
-        O = !0;
+      if (!l.backfillEnabled || A) return;
+      const n = (e || 0) + (l.pageSize || 0);
+      if (!(!l.pageSize || l.pageSize <= 0 || h.value[h.value.length - 1] == null) && !(i.value.length >= n)) {
+        A = !0;
         try {
-          let g = 0;
-          for (d("backfill:start", { target: n, fetched: i.value.length, calls: g }); i.value.length < n && g < s.backfillMaxCalls && m.value[m.value.length - 1] != null; ) {
-            await c(s.backfillDelayMs, (P, k) => {
+          let f = 0;
+          for (d("backfill:start", { target: n, fetched: i.value.length, calls: f }); i.value.length < n && f < l.backfillMaxCalls && h.value[h.value.length - 1] != null; ) {
+            await s(l.backfillDelayMs, (P, S) => {
               d("backfill:tick", {
                 fetched: i.value.length,
                 target: n,
-                calls: g,
+                calls: f,
                 remainingMs: P,
-                totalMs: k
+                totalMs: S
               });
             });
-            const x = m.value[m.value.length - 1];
+            const y = h.value[h.value.length - 1];
             try {
-              p.value = !0;
-              const P = await u(x);
-              m.value.push(P.nextPage);
+              g.value = !0;
+              const P = await v(y);
+              h.value.push(P.nextPage);
             } finally {
-              p.value = !1;
+              g.value = !1;
             }
-            g++;
+            f++;
           }
-          d("backfill:stop", { fetched: i.value.length, calls: g });
+          d("backfill:stop", { fetched: i.value.length, calls: f });
         } finally {
-          O = !1;
+          A = !1;
         }
       }
     }
     function D() {
-      h.value && h.value.scrollTo({
+      m.value && m.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), i.value = [], T.value = 0, m.value = [s.loadAtPage], E.value = {
+      }), i.value = [], x.value = 0, h.value = [l.loadAtPage], E.value = {
         distanceToTrigger: 0,
         isNearTrigger: !1
       };
     }
-    const j = st(() => {
-      N(), $();
-    }, 200), q = st(_, 200);
-    function U(e, n, l) {
-      m.value = [n], m.value.push(l), y([...i.value, ...e]), $();
+    const j = lt(() => {
+      $(), W();
+    }, 200), V = lt(_, 200);
+    function U(e, n, c) {
+      h.value = [n], h.value.push(c), p([...i.value, ...e]), W();
     }
-    return gt(async () => {
+    return pt(async () => {
       var e;
       try {
-        w.value = lt(r.value);
-        const n = s.loadAtPage;
-        m.value = [n], s.skipInitialLoad || await v(m.value[0]), $();
+        w.value = ct(r.value);
+        const n = l.loadAtPage;
+        h.value = [n], l.skipInitialLoad || await k(h.value[0]), W();
       } catch (n) {
-        console.error("Error during component initialization:", n), p.value = !1;
+        console.error("Error during component initialization:", n), g.value = !1;
       }
-      (e = h.value) == null || e.addEventListener("scroll", j), window.addEventListener("resize", q);
-    }), pt(() => {
+      (e = m.value) == null || e.addEventListener("scroll", j), window.addEventListener("resize", V);
+    }), mt(() => {
       var e;
-      (e = h.value) == null || e.removeEventListener("scroll", j), window.removeEventListener("resize", q);
+      (e = m.value) == null || e.removeEventListener("scroll", j), window.removeEventListener("resize", V);
     }), (e, n) => (J(), Y("div", {
-      class: "overflow-auto w-full flex-1 masonry-container",
+      class: nt(["overflow-auto w-full flex-1 masonry-container", { "force-motion": l.forceMotion }]),
       ref_key: "container",
-      ref: h
+      ref: m
     }, [
       C("div", {
         class: "relative",
-        style: mt({ height: `${T.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
+        style: ht({ height: `${x.value}px`, "--masonry-duration": `${t.transitionDurationMs}ms`, "--masonry-leave-duration": `${t.leaveDurationMs}ms`, "--masonry-ease": t.transitionEasing })
       }, [
-        ht(vt, {
+        yt(bt, {
           name: "masonry",
           css: !1,
-          onEnter: V(A),
-          onBeforeEnter: V(W),
-          onLeave: V(H),
-          onBeforeLeave: V(M)
+          onEnter: q(O),
+          onBeforeEnter: q(M),
+          onLeave: q(L),
+          onBeforeLeave: q(T)
         }, {
-          default: bt(() => [
-            (J(!0), Y(xt, null, wt(i.value, (l, g) => (J(), Y("div", nt({
-              key: `${l.page}-${l.id}`,
+          default: xt(() => [
+            (J(!0), Y(wt, null, Tt(i.value, (c, f) => (J(), Y("div", at({
+              key: `${c.page}-${c.id}`,
               class: "absolute masonry-item",
               ref_for: !0
-            }, V(Zt)(l, g)), [
-              Tt(e.$slots, "item", nt({ ref_for: !0 }, { item: l, remove: L }), () => [
+            }, q(Zt)(c, f)), [
+              Mt(e.$slots, "item", at({ ref_for: !0 }, { item: c, remove: N }), () => [
                 C("img", {
-                  src: l.src,
+                  src: c.src,
                   class: "w-full"
                 }, null, 8, ne),
                 C("button", {
                   class: "absolute bottom-0 right-0 bg-red-500 text-white p-2 rounded cursor-pointer",
-                  onClick: (x) => L(l)
+                  onClick: (y) => N(c)
                 }, n[0] || (n[0] = [
                   C("i", { class: "fas fa-trash" }, null, -1)
                 ]), 8, ae)
@@ -658,28 +657,28 @@ const ne = ["src"], ae = ["onClick"], re = /* @__PURE__ */ dt({
           ]),
           _: 3
         }, 8, ["onEnter", "onBeforeEnter", "onLeave", "onBeforeLeave"]),
-        T.value > 0 ? (J(), Y("div", {
+        x.value > 0 ? (J(), Y("div", {
           key: 0,
-          class: Mt(["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": !E.value.isNearTrigger, "opacity-100": E.value.isNearTrigger }])
+          class: nt(["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": !E.value.isNearTrigger, "opacity-100": E.value.isNearTrigger }])
         }, [
-          C("span", null, at(i.value.length) + " items", 1),
+          C("span", null, rt(i.value.length) + " items", 1),
           n[1] || (n[1] = C("span", { class: "mx-2" }, "|", -1)),
-          C("span", null, at(E.value.distanceToTrigger) + "px to load", 1)
-        ], 2)) : yt("", !0)
+          C("span", null, rt(E.value.distanceToTrigger) + "px to load", 1)
+        ], 2)) : vt("", !0)
       ], 4)
-    ], 512));
+    ], 2));
   }
 }), oe = (t, a) => {
   const o = t.__vccOpts || t;
-  for (const [s, b] of a)
-    o[s] = b;
+  for (const [l, b] of a)
+    o[l] = b;
   return o;
-}, ct = /* @__PURE__ */ oe(re, [["__scopeId", "data-v-dc6ab8b8"]]), se = {
+}, ut = /* @__PURE__ */ oe(re, [["__scopeId", "data-v-a75cd886"]]), se = {
   install(t) {
-    t.component("WyxosMasonry", ct), t.component("WMasonry", ct);
+    t.component("WyxosMasonry", ut), t.component("WMasonry", ut);
   }
 };
 export {
-  ct as Masonry,
+  ut as Masonry,
   se as default
 };

package/lib/vibe.css

@@ -1 +1 @@
-.masonry-container[data-v-dc6ab8b8]{overflow-anchor:none}.masonry-item[data-v-dc6ab8b8]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-dc6ab8b8]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-item[data-v-dc6ab8b8],.masonry-move[data-v-dc6ab8b8]{transition-duration:1ms!important}}
+.masonry-container[data-v-a75cd886]{overflow-anchor:none}.masonry-item[data-v-a75cd886]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-a75cd886]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-a75cd886],.masonry-container:not(.force-motion) .masonry-move[data-v-a75cd886]{transition-duration:1ms!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -9,6 +9,7 @@
       "import": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
+    "./vibe.css": "./lib/vibe.css",
     "./package.json": "./package.json"
   },
   "type": "module",
@@ -16,6 +17,9 @@
     "lib",
     "src"
   ],
+  "sideEffects": [
+    "./lib/vibe.css"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && node write-cname.js",

package/src/Masonry.vue

@@ -82,6 +82,11 @@ const props = defineProps({
   transitionEasing: {
     type: String,
     default: 'cubic-bezier(.22,.61,.36,1)'
+  },
+  // Force motion even when user has reduced-motion enabled
+  forceMotion: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -295,10 +300,11 @@ async function remove(item: any) {
   const next = (masonry.value as any[]).filter(i => i.id !== item.id)
   masonry.value = next
   await nextTick()
+  // Force a reflow so current transforms are committed
+  void container.value?.offsetHeight
+  // Start FLIP on next frame (single RAF)
   requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      refreshLayout(next)
-    })
+    refreshLayout(next)
   })
 }
 
@@ -308,10 +314,11 @@ async function removeMany(items: any[]) {
   const next = (masonry.value as any[]).filter(i => !ids.has(i.id))
   masonry.value = next
   await nextTick()
+  // Force a reflow so survivors' current transforms are committed
+  void container.value?.offsetHeight
+  // Start FLIP on next frame (single RAF)
   requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      refreshLayout(next)
-    })
+    refreshLayout(next)
   })
 }
 
@@ -433,7 +440,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="overflow-auto w-full flex-1 masonry-container" ref="container">
+  <div class="overflow-auto w-full flex-1 masonry-container" :class="{ 'force-motion': props.forceMotion }" ref="container">
     <div class="relative"
          :style="{height: `${containerHeight}px`, '--masonry-duration': `${transitionDurationMs}ms`, '--masonry-leave-duration': `${leaveDurationMs}ms`, '--masonry-ease': transitionEasing}">
       <transition-group name="masonry" :css="false" @enter="onEnter" @before-enter="onBeforeEnter"
@@ -482,8 +489,8 @@ onUnmounted(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .masonry-item,
-  .masonry-move {
+  .masonry-container:not(.force-motion) .masonry-item,
+  .masonry-container:not(.force-motion) .masonry-move {
     transition-duration: 1ms !important;
   }
 }

package/src/useMasonryScroll.ts

@@ -31,6 +31,7 @@ export function useMasonryScroll({
   leaveEstimateMs?: number
 }) {
   let cleanupInProgress = false
+  let lastScrollTop = 0
 
   async function handleScroll() {
     if (!container.value) return
@@ -38,12 +39,16 @@ export function useMasonryScroll({
     const { scrollTop, clientHeight } = container.value
     const visibleBottom = scrollTop + clientHeight
 
+    // Determine scroll direction (down only)
+    const isScrollingDown = scrollTop > lastScrollTop + 1 // tolerate tiny jitter
+    lastScrollTop = scrollTop
+
     const columnHeights = calculateColumnHeights(masonry.value, columns.value)
     const longestColumn = Math.max(...columnHeights)
     const whitespaceVisible = longestColumn + 300 < visibleBottom - 1
     const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
 
-    if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value && !cleanupInProgress) {
+    if ((whitespaceVisible || reachedContainerBottom) && isScrollingDown && !isLoading.value && !cleanupInProgress) {
       try {
         if (masonry.value.length > maxItems) {
           await handleItemCleanup(columnHeights)
@@ -87,7 +92,8 @@ export function useMasonryScroll({
 
     setItemsRaw(remainingItems)
     await nextTick()
-    await waitFor(msLeaveEstimate())
+    // Allow leave to start, then FLIP survivors concurrently (single RAF)
+    await new Promise<void>(r => requestAnimationFrame(() => r()))
 
     refreshLayout(remainingItems)
     await nextTick()