@wyxos/vibe 2.1.18 → 2.2.4

package/lib/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as be, ref as m, computed as M, createElementBlock as F, openBlock as I, createElementVNode as A, normalizeStyle as Y, watch as ne, onMounted as Ge, onUnmounted as Nt, createCommentVNode as K, createBlock as kt, unref as oe, toDisplayString as Ke, normalizeClass as St, createVNode as G, mergeDefaults as sn, useAttrs as un, shallowRef as It, provide as cn, mergeProps as fn, renderSlot as dn, Fragment as Ft, renderList as _t, nextTick as Pt, inject as vn } from "vue";
-const mn = {
+import { defineComponent as xe, ref as v, computed as k, createElementBlock as P, openBlock as _, createElementVNode as N, normalizeStyle as U, watch as Z, onMounted as Ze, onUnmounted as Vt, createCommentVNode as ee, createBlock as Ft, unref as ae, toDisplayString as et, normalizeClass as _t, createVNode as Q, mergeDefaults as fn, useAttrs as dn, shallowRef as Pt, provide as vn, mergeProps as mn, renderSlot as hn, Fragment as Tt, renderList as Et, nextTick as Bt, inject as gn } from "vue";
+const pn = {
   mode: "default",
   pageSize: 20,
   backfillRequestDelayMs: 2e3,
@@ -12,7 +12,7 @@ const mn = {
   headerHeight: 0,
   footerHeight: 0,
   overscanPx: 600
-}, hn = ["aria-label", "aria-valuemax", "aria-valuenow"], Ht = /* @__PURE__ */ be({
+}, yn = ["aria-label", "aria-valuemax", "aria-valuenow"], zt = /* @__PURE__ */ xe({
   __name: "MasonryVideoControls",
   props: {
     currentTime: {},
@@ -22,141 +22,141 @@ const mn = {
     keyboardStep: { default: 5 }
   },
   emits: ["seek"],
-  setup(l, { expose: k, emit: i }) {
-    const r = l, f = i, w = m(null), b = m(null), u = m(null), d = m(!1), g = M(
-      () => Number.isFinite(r.step) ? Math.max(0, r.step) : 0
-    ), p = M(
-      () => Number.isFinite(r.duration) ? Math.max(0, r.duration) : 0
-    ), T = M(() => {
-      const c = Number.isFinite(r.currentTime) ? r.currentTime : 0;
-      return N(c, 0, p.value);
-    }), P = M(
-      () => p.value > 0 ? T.value / p.value : 0
+  setup(o, { expose: M, emit: i }) {
+    const a = o, d = i, b = v(null), y = v(null), h = v(null), u = v(!1), g = k(
+      () => Number.isFinite(a.step) ? Math.max(0, a.step) : 0
+    ), w = k(
+      () => Number.isFinite(a.duration) ? Math.max(0, a.duration) : 0
+    ), S = k(() => {
+      const c = Number.isFinite(a.currentTime) ? a.currentTime : 0;
+      return T(c, 0, w.value);
+    }), B = k(
+      () => w.value > 0 ? S.value / w.value : 0
     );
-    function N(c, S, B) {
-      return Math.min(B, Math.max(S, c));
+    function T(c, F, R) {
+      return Math.min(R, Math.max(F, c));
     }
-    function E(c) {
+    function I(c) {
       return g.value <= 0 ? c : Math.round(c / g.value) * g.value;
     }
-    function L(c) {
-      const S = N(c, 0, p.value);
-      f("seek", E(S));
+    function z(c) {
+      const F = T(c, 0, w.value);
+      d("seek", I(F));
     }
-    function H(c) {
-      const S = b.value;
-      if (!S) return;
-      const B = S.getBoundingClientRect();
-      if (!B.width) return;
-      const O = N((c - B.left) / B.width, 0, 1);
-      L(O * p.value);
+    function A(c) {
+      const F = y.value;
+      if (!F) return;
+      const R = F.getBoundingClientRect();
+      if (!R.width) return;
+      const j = T((c - R.left) / R.width, 0, 1);
+      z(j * w.value);
+    }
+    function X(c) {
+      const F = y.value;
+      F && (u.value = !0, F.setPointerCapture && F.setPointerCapture(c.pointerId), A(c.clientX));
     }
-    function J(c) {
-      const S = b.value;
-      S && (d.value = !0, S.setPointerCapture && S.setPointerCapture(c.pointerId), H(c.clientX));
+    function $(c) {
+      u.value && A(c.clientX);
+    }
+    function H(c) {
+      if (!u.value) return;
+      u.value = !1;
+      const F = y.value;
+      F?.releasePointerCapture && F.releasePointerCapture(c.pointerId);
     }
     function q(c) {
-      d.value && H(c.clientX);
-    }
-    function D(c) {
-      if (!d.value) return;
-      d.value = !1;
-      const S = b.value;
-      S?.releasePointerCapture && S.releasePointerCapture(c.pointerId);
-    }
-    function le(c) {
-      if (p.value <= 0) return;
-      const S = Number.isFinite(r.keyboardStep) ? r.keyboardStep : 1;
-      let B = T.value;
+      if (w.value <= 0) return;
+      const F = Number.isFinite(a.keyboardStep) ? a.keyboardStep : 1;
+      let R = S.value;
       switch (c.key) {
         case "ArrowLeft":
         case "ArrowDown":
-          B -= S;
+          R -= F;
           break;
         case "ArrowRight":
         case "ArrowUp":
-          B += S;
+          R += F;
           break;
         case "Home":
-          B = 0;
+          R = 0;
           break;
         case "End":
-          B = p.value;
+          R = w.value;
           break;
         default:
           return;
       }
-      c.preventDefault(), L(B);
-    }
-    function ae() {
-      w.value?.focus();
-    }
-    return k({
-      focus: ae,
-      seekTo: L,
-      percent: P,
-      currentValue: T,
-      maxValue: p,
-      isDragging: d,
-      rootEl: w,
-      trackEl: b,
-      thumbEl: u
-    }), (c, S) => (I(), F("div", {
+      c.preventDefault(), z(R);
+    }
+    function te() {
+      b.value?.focus();
+    }
+    return M({
+      focus: te,
+      seekTo: z,
+      percent: B,
+      currentValue: S,
+      maxValue: w,
+      isDragging: u,
+      rootEl: b,
+      trackEl: y,
+      thumbEl: h
+    }), (c, F) => (_(), P("div", {
       ref_key: "rootEl",
-      ref: w,
+      ref: b,
       class: "w-full select-none",
       role: "slider",
       tabindex: "0",
-      "aria-label": r.ariaLabel,
+      "aria-label": a.ariaLabel,
       "aria-valuemin": 0,
-      "aria-valuemax": p.value,
-      "aria-valuenow": T.value,
-      onKeydown: le
+      "aria-valuemax": w.value,
+      "aria-valuenow": S.value,
+      onKeydown: q
     }, [
-      A("div", {
+      N("div", {
         ref_key: "trackEl",
-        ref: b,
+        ref: y,
         class: "relative h-2 w-full cursor-pointer rounded-full bg-slate-200",
-        onPointerdown: J,
-        onPointermove: q,
-        onPointerup: D,
-        onPointercancel: D,
-        onPointerleave: D
+        onPointerdown: X,
+        onPointermove: $,
+        onPointerup: H,
+        onPointercancel: H,
+        onPointerleave: H
       }, [
-        A("div", {
+        N("div", {
           class: "absolute inset-y-0 left-0 rounded-full bg-slate-500",
-          style: Y({ width: `${P.value * 100}%` })
+          style: U({ width: `${B.value * 100}%` })
         }, null, 4),
-        A("div", {
+        N("div", {
           ref_key: "thumbEl",
-          ref: u,
+          ref: h,
           class: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-700 shadow",
-          style: Y({ left: `${P.value * 100}%` }),
+          style: U({ left: `${B.value * 100}%` }),
           "aria-hidden": "true"
         }, null, 4)
       ], 544)
-    ], 40, hn));
+    ], 40, yn));
   }
-}), gn = {
+}), wn = {
   key: 0,
   "data-testid": "masonry-loader-spinner",
   class: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-1"
-}, pn = {
+}, bn = {
   key: 1,
   class: "h-5 w-5 animate-spin text-slate-500",
   viewBox: "0 0 24 24",
   "aria-hidden": "true"
-}, yn = {
+}, xn = {
   key: 1,
   "data-testid": "masonry-loader-error",
   class: "absolute inset-0 z-20 grid place-items-center p-3 pointer-events-none"
-}, wn = { class: "pointer-events-auto flex flex-col items-center justify-center gap-2" }, bn = {
+}, kn = { class: "pointer-events-auto flex flex-col items-center justify-center gap-2" }, Mn = {
   key: 1,
   class: "text-center text-xs font-medium text-red-700"
-}, xn = ["src", "width", "height", "alt"], Mn = ["poster"], kn = ["src"], Sn = {
+}, Sn = ["src", "width", "height", "alt"], In = ["poster"], Fn = ["src"], _n = {
   key: 4,
   class: "pointer-events-none absolute inset-x-0 bottom-0 z-20 px-2 pb-2 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
-}, Tt = /* @__PURE__ */ be({
+}, Rt = /* @__PURE__ */ xe({
   __name: "MasonryLoader",
   props: {
     item: {},
@@ -166,8 +166,8 @@ const mn = {
     hovered: { type: Boolean, default: !1 }
   },
   emits: ["success", "error"],
-  setup(l, { emit: k }) {
-    const i = l, r = k, f = be({
+  setup(o, { emit: M }) {
+    const i = o, a = M, d = xe({
       name: "SlotRenderer",
       props: {
         slotFn: {
@@ -185,124 +185,145 @@ const mn = {
           return x ? x(s.slotProps) : null;
         };
       }
-    }), w = m(null), b = m(null), u = m(null), d = m(!1), g = m(!1), p = m(!1), T = m(null), P = M(() => i.item?.type === "video"), N = M(() => {
-      if (!P.value) return;
+    }), b = v(null), y = v(null), h = v(null), u = v(!1), g = v(!1), w = v(!1), S = v(null), B = k(() => i.item?.type === "video"), T = k(() => {
+      if (!B.value) return;
       const s = i.item?.preview, x = i.item?.original;
-      if (!(typeof s != "string" || !s) && !(typeof x == "string" && s === x) && !/\.(mp4|webm)(\?|#|$)/i.test(s))
+      if (!(typeof s != "string" || !s) && !(typeof x == "string" && s === x) && !/\.(mp4|webm)(\?|#|$)/i.test(s) && /\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(s))
         return s;
-    }), E = M(() => {
-      if (!P.value) return;
+    }), I = k(() => {
+      if (!B.value) return;
       const s = i.item?.preview;
-      if (typeof s == "string" && s && /\.(mp4|webm)(\?|#|$)/i.test(s))
+      if (typeof s == "string" && s && !/\.(png|jpe?g|gif|webp)(\?|#|$)/i.test(s))
         return s;
       const x = i.item?.original;
       if (typeof x == "string" && x) return x;
-    }), L = m(!1), H = M(() => !!i.hovered), J = m(0), q = m(0);
-    function D() {
+    }), z = v(!1), A = k(() => !!i.hovered), X = v(0), $ = v(0);
+    function H() {
       i.remove?.();
     }
-    const le = M(() => {
+    const q = k(() => {
       const s = i.item?.width, x = i.item?.height;
       return { aspectRatio: `${s} / ${x}` };
-    }), ae = M(() => i.item?.type === "image");
-    let c = null, S = null;
-    function B() {
-      d.value || (d.value = !0, g.value = !1, p.value = !1, T.value = null);
+    }), te = k(() => !B.value);
+    let c = null, F = null;
+    function R() {
+      u.value || (u.value = !0, g.value = !1, w.value = !1, S.value = null);
     }
-    function O(s) {
-      J.value = Number.isFinite(s.duration) ? s.duration : 0, q.value = Number.isFinite(s.currentTime) ? s.currentTime : 0;
+    function j(s) {
+      X.value = Number.isFinite(s.duration) ? s.duration : 0, $.value = Number.isFinite(s.currentTime) ? s.currentTime : 0;
     }
     async function re() {
-      if (!P.value || !H.value || !d.value || !g.value || !L.value) return;
-      const s = u.value;
+      if (!B.value || !A.value || !u.value || !g.value || !z.value) return;
+      const s = h.value;
       if (s)
         try {
           s.muted = !0, await s.play();
         } catch {
         }
     }
-    function Q() {
-      const s = u.value;
+    function ne() {
+      const s = h.value;
       s && (s.paused || s.pause());
     }
-    function _e() {
-      const s = u.value;
+    function Ee() {
+      const s = h.value;
       s && (s.paused || s.pause());
     }
-    ne(
+    Z(
       () => i.hovered,
       (s) => {
         if (s) {
-          B(), re();
+          R(), re();
           return;
         }
-        Q();
+        ne();
       }
     );
-    function Pe(s) {
-      const x = u.value;
-      x && Number.isFinite(s) && (x.currentTime = Math.max(0, Math.min(s, Number.isFinite(x.duration) ? x.duration : s)), O(x));
+    function Be(s) {
+      const x = h.value;
+      x && Number.isFinite(s) && (x.currentTime = Math.max(0, Math.min(s, Number.isFinite(x.duration) ? x.duration : s)), j(x));
     }
-    Ge(() => {
+    Ze(() => {
       if (typeof IntersectionObserver > "u") {
-        B();
+        R();
         return;
       }
       if (c = new IntersectionObserver(
         (s) => {
           for (const x of s)
             if (x.isIntersecting && !((x.intersectionRatio ?? 0) < 0.5)) {
-              B(), c?.disconnect(), c = null;
+              R(), c?.disconnect(), c = null;
               return;
             }
         },
         { threshold: [0, 0.5, 1] }
-      ), w.value && c.observe(w.value), P.value && w.value) {
-        const s = w.value.closest('[data-testid="items-scroll-container"]');
-        S = new IntersectionObserver(
+      ), b.value && c.observe(b.value), B.value && b.value) {
+        const s = b.value.closest('[data-testid="items-scroll-container"]');
+        F = new IntersectionObserver(
           (x) => {
-            for (const W of x) {
-              const Te = W.intersectionRatio ?? 0, Me = !!W.isIntersecting && Te >= 0.5;
-              L.value = Me, Me ? H.value && re() : _e();
+            for (const J of x) {
+              const Re = J.intersectionRatio ?? 0, Se = !!J.isIntersecting && Re >= 0.5;
+              z.value = Se, Se ? A.value && re() : Ee();
             }
           },
           {
             root: s ?? void 0,
             threshold: [0, 0.25, 0.5, 0.75, 1]
           }
-        ), S.observe(w.value);
+        ), F.observe(b.value);
       }
-    }), Nt(() => {
-      c?.disconnect(), c = null, S?.disconnect(), S = null;
+    }), Vt(() => {
+      c?.disconnect(), c = null, F?.disconnect(), F = null;
     });
-    function j() {
-      g.value || (g.value = !0, p.value = !1, T.value = null, r("success", i.item));
-    }
-    function U(s) {
-      p.value || (g.value = !1, p.value = !0, T.value = s, r("error", { item: i.item, error: s }));
+    function W() {
+      g.value || (g.value = !0, w.value = !1, S.value = null, a("success", i.item));
+    }
+    function K(s) {
+      w.value || (g.value = !1, w.value = !0, S.value = s, a("error", { item: i.item, error: s }));
+    }
+    function ke() {
+      if (u.value && !g.value && !w.value) {
+        if (te.value) {
+          const s = y.value;
+          if (!s || !s.complete) return;
+          s.naturalWidth > 0 && W();
+          return;
+        }
+        if (B.value) {
+          const s = h.value;
+          s && (s.readyState ?? 0) >= 1 && Me();
+        }
+      }
     }
-    function xe() {
-      j();
-      const s = u.value;
-      s && O(s), re();
+    Z(
+      [u, () => i.item.preview, () => I.value],
+      () => {
+        u.value && Promise.resolve().then(ke);
+      },
+      { flush: "post" }
+    );
+    function Me() {
+      W();
+      const s = h.value;
+      s && j(s), re();
     }
-    function he() {
-      const s = u.value;
-      s && O(s);
+    function se() {
+      const s = h.value;
+      s && j(s);
     }
-    return (s, x) => (I(), F("div", {
+    return (s, x) => (_(), P("div", {
       ref_key: "rootEl",
-      ref: w,
+      ref: b,
       class: "relative bg-slate-100",
-      style: Y(le.value)
+      style: U(q.value)
     }, [
-      d.value && !g.value && !p.value ? (I(), F("div", gn, [
-        i.loaderSlotFn ? (I(), kt(oe(f), {
+      u.value && !g.value && !w.value ? (_(), P("div", wn, [
+        i.loaderSlotFn ? (_(), Ft(ae(d), {
           key: 0,
           "slot-fn": i.loaderSlotFn,
-          "slot-props": { item: i.item, remove: D }
-        }, null, 8, ["slot-fn", "slot-props"])) : (I(), F("svg", pn, x[2] || (x[2] = [
-          A("circle", {
+          "slot-props": { item: i.item, remove: H }
+        }, null, 8, ["slot-fn", "slot-props"])) : (_(), P("svg", bn, x[2] || (x[2] = [
+          N("circle", {
             class: "opacity-25",
             cx: "12",
             cy: "12",
@@ -311,26 +332,26 @@ const mn = {
             stroke: "currentColor",
             "stroke-width": "4"
           }, null, -1),
-          A("path", {
+          N("path", {
             class: "opacity-75",
             fill: "currentColor",
             d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
           }, null, -1)
         ])))
-      ])) : d.value && p.value ? (I(), F("div", yn, [
-        A("div", wn, [
-          i.errorSlotFn ? (I(), kt(oe(f), {
+      ])) : u.value && w.value ? (_(), P("div", xn, [
+        N("div", kn, [
+          i.errorSlotFn ? (_(), Ft(ae(d), {
             key: 0,
             "slot-fn": i.errorSlotFn,
-            "slot-props": { item: i.item, remove: D, error: T.value }
-          }, null, 8, ["slot-fn", "slot-props"])) : (I(), F("p", bn, "Error " + Ke(T.value), 1))
+            "slot-props": { item: i.item, remove: H, error: S.value }
+          }, null, 8, ["slot-fn", "slot-props"])) : (_(), P("p", Mn, "Error " + et(S.value), 1))
         ])
-      ])) : K("", !0),
-      d.value && ae.value && !p.value ? (I(), F("img", {
+      ])) : ee("", !0),
+      u.value && te.value && !w.value ? (_(), P("img", {
         key: i.item.id + ":img",
         ref_key: "imgEl",
-        ref: b,
-        class: St([
+        ref: y,
+        class: _t([
           "h-full w-full object-cover transition-opacity duration-300",
           g.value ? "opacity-100" : "opacity-0"
         ]),
@@ -339,229 +360,243 @@ const mn = {
         height: i.item.height,
         loading: "lazy",
         alt: i.item.id,
-        onLoad: j,
-        onError: x[0] || (x[0] = (W) => U(W))
-      }, null, 42, xn)) : d.value && !p.value ? (I(), F("video", {
+        onLoad: W,
+        onError: x[0] || (x[0] = (J) => K(J))
+      }, null, 42, Sn)) : u.value && !w.value ? (_(), P("video", {
         key: i.item.id + ":vid",
-        class: St([
+        class: _t([
           "h-full w-full object-cover transition-opacity duration-300",
           g.value ? "opacity-100" : "opacity-0"
         ]),
-        poster: N.value,
+        poster: T.value,
         ref_key: "videoEl",
-        ref: u,
+        ref: h,
         playsinline: "",
         loop: "",
         preload: "metadata",
-        onLoadedmetadata: xe,
-        onTimeupdate: he,
-        onDurationchange: he,
-        onLoadeddata: he,
-        onError: x[1] || (x[1] = (W) => U(W))
+        onLoadedmetadata: Me,
+        onTimeupdate: se,
+        onDurationchange: se,
+        onLoadeddata: se,
+        onError: x[1] || (x[1] = (J) => K(J))
       }, [
-        A("source", {
-          src: E.value,
+        N("source", {
+          src: I.value,
           type: "video/mp4"
-        }, null, 8, kn)
-      ], 42, Mn)) : K("", !0),
-      d.value && P.value && !p.value ? (I(), F("div", Sn, [
-        G(Ht, {
-          duration: J.value,
-          "current-time": q.value,
-          onSeek: Pe
+        }, null, 8, Fn)
+      ], 42, In)) : ee("", !0),
+      u.value && B.value && !w.value ? (_(), P("div", _n, [
+        Q(zt, {
+          duration: X.value,
+          "current-time": $.value,
+          onSeek: Be
         }, null, 8, ["duration", "current-time"])
-      ])) : K("", !0)
+      ])) : ee("", !0)
     ], 4));
   }
-}), Vt = Symbol("masonryItemRegistry");
-function In(l, k) {
-  return !l || l <= 0 || !k || k <= 0 ? 1 : Math.max(1, Math.floor(l / k));
+}), $t = Symbol("masonryItemRegistry");
+function Pn(o, M) {
+  return !o || o <= 0 || !M || M <= 0 ? 1 : Math.max(1, Math.floor(o / M));
+}
+function Tn(o, M, i, a = 0) {
+  if (!o || o <= 0 || !M || M <= 0) return i;
+  const d = typeof a == "number" && a > 0 ? a : 0, b = Math.max(0, M - 1) * d, y = o - b;
+  return !y || y <= 0 ? i : y / M;
 }
-function Fn(l, k, i, r = 0) {
-  if (!l || l <= 0 || !k || k <= 0) return i;
-  const f = typeof r == "number" && r > 0 ? r : 0, w = Math.max(0, k - 1) * f, b = l - w;
-  return !b || b <= 0 ? i : b / k;
+function En(o, M) {
+  const i = o?.width, a = o?.height;
+  return typeof i == "number" && typeof a == "number" && i > 0 && a > 0 ? a / i * M : M;
 }
-function _n(l, k) {
-  const i = l?.width, r = l?.height;
-  return typeof i == "number" && typeof r == "number" && i > 0 && r > 0 ? r / i * k : k;
+function Dt(o) {
+  return Number.isFinite(o) && o > 0 ? Math.floor(o) : 1;
 }
-function zt(l) {
-  return Number.isFinite(l) && l > 0 ? Math.floor(l) : 1;
+function tt(o) {
+  return Number.isFinite(o) && o > 0 ? Math.floor(o) : 0;
 }
-function Je(l) {
-  return Number.isFinite(l) && l > 0 ? Math.floor(l) : 0;
+function Bn() {
+  const o = new Error("aborted");
+  return o.name = "AbortError", o;
 }
-function Pn(l) {
-  async function k(r) {
-    const f = Je(r);
-    if (f <= 0) return;
-    l.stats.value = {
-      ...l.stats.value,
-      cooldownMsTotal: f,
-      cooldownMsRemaining: f
+function Rn(o) {
+  async function M(a) {
+    const d = tt(a);
+    if (d <= 0) return;
+    o.stats.value = {
+      ...o.stats.value,
+      cooldownMsTotal: d,
+      cooldownMsRemaining: d
     };
-    const w = Date.now(), b = 100;
-    await new Promise((u) => {
-      const d = setInterval(() => {
-        const g = Date.now() - w, p = Math.max(0, f - g);
-        l.stats.value = {
-          ...l.stats.value,
-          cooldownMsTotal: f,
-          cooldownMsRemaining: p
-        }, p <= 0 && (clearInterval(d), u());
-      }, b);
+    const b = Date.now(), y = 100;
+    await new Promise((h) => {
+      const u = setInterval(() => {
+        const g = Date.now() - b, w = Math.max(0, d - g);
+        o.stats.value = {
+          ...o.stats.value,
+          cooldownMsTotal: d,
+          cooldownMsRemaining: w
+        }, w <= 0 && (clearInterval(u), h());
+      }, y);
     });
   }
-  async function i(r) {
-    const f = zt(l.getPageSize()), w = l.isEnabled(), b = Je(l.getRequestDelayMs()), u = [];
-    let d = 0;
-    l.buffer.value.length && (d = l.buffer.value.length, u.push(...l.buffer.value), l.buffer.value = []), l.stats.value = {
-      ...l.stats.value,
-      enabled: w,
+  async function i(a) {
+    const d = Dt(o.getPageSize()), b = o.isEnabled(), y = tt(o.getRequestDelayMs()), h = o.stats.value.page ?? null, u = o.getCancelToken?.() ?? null, g = () => u !== null && o.getCancelToken && o.getCancelToken() !== u, w = () => {
+      if (g()) throw Bn();
+    }, S = [];
+    let B = 0;
+    o.buffer.value.length && (B = o.buffer.value.length, S.push(...o.buffer.value), o.buffer.value = []), o.stats.value = {
+      ...o.stats.value,
+      enabled: b,
       isBackfillActive: !1,
       isRequestInFlight: !1,
-      requestPage: null,
-      cooldownMsTotal: b,
+      page: h ?? a,
+      next: a,
+      cooldownMsTotal: y,
       cooldownMsRemaining: 0,
       progress: {
         collected: 0,
         target: 0
       },
-      pageSize: f,
+      pageSize: d,
       bufferSize: 0
     };
-    const g = [];
-    let p = r, T = 0, P = !1;
-    for (; u.length < f && p != null; ) {
-      const L = p;
-      P && (l.stats.value = {
-        ...l.stats.value,
-        enabled: w,
+    const T = [];
+    let I = a, z = 0, A = !1;
+    for (; S.length < d && I != null; ) {
+      w();
+      const H = I;
+      A && (o.stats.value = {
+        ...o.stats.value,
+        enabled: b,
         isBackfillActive: !0,
         isRequestInFlight: !0,
-        requestPage: L,
+        page: H,
+        next: null,
         progress: {
-          collected: Math.min(u.length, f),
-          target: f
+          collected: Math.min(S.length, d),
+          target: d
         },
-        cooldownMsTotal: b,
+        cooldownMsTotal: y,
         cooldownMsRemaining: 0,
-        pageSize: f
+        pageSize: d
       });
-      const H = await l.getContent(L);
-      g.push(L), P && (l.stats.value = {
-        ...l.stats.value,
-        enabled: w,
+      const q = await o.getContent(H);
+      w(), T.push(H), A && (o.stats.value = {
+        ...o.stats.value,
+        enabled: b,
         isBackfillActive: !0,
         isRequestInFlight: !1,
-        requestPage: null
-      }), T += H.items.length, l.markEnterFromLeft(H.items), u.push(...H.items), p = H.nextPage, !P && u.length < f && p != null ? (P = !0, l.stats.value = {
-        ...l.stats.value,
-        enabled: w,
+        page: H,
+        next: q.nextPage
+      }), z += q.items.length, o.markEnterFromLeft(q.items), S.push(...q.items), I = q.nextPage, !A && S.length < d && I != null ? (A = !0, o.stats.value = {
+        ...o.stats.value,
+        enabled: b,
         isBackfillActive: !0,
         isRequestInFlight: !1,
-        requestPage: null,
+        page: H,
+        next: I,
         progress: {
-          collected: Math.min(u.length, f),
-          target: f
+          collected: Math.min(S.length, d),
+          target: d
         },
-        cooldownMsTotal: b,
+        cooldownMsTotal: y,
         cooldownMsRemaining: 0,
-        pageSize: f
-      }) : P && (l.stats.value = {
-        ...l.stats.value,
-        enabled: w,
+        pageSize: d
+      }) : A && (o.stats.value = {
+        ...o.stats.value,
+        enabled: b,
         isBackfillActive: !0,
+        page: H,
+        next: I,
         progress: {
-          collected: Math.min(u.length, f),
-          target: f
+          collected: Math.min(S.length, d),
+          target: d
         }
-      }), P && u.length < f && p != null && await k(b);
+      }), A && S.length < d && I != null && (await M(y), w());
     }
-    const N = u.slice(0, f), E = u.slice(f);
-    return l.buffer.value = E, l.stats.value = {
-      ...l.stats.value,
-      enabled: w,
+    const X = S.slice(0, d), $ = S.slice(d);
+    return o.buffer.value = $, o.stats.value = {
+      ...o.stats.value,
+      enabled: b,
       isBackfillActive: !1,
       isRequestInFlight: !1,
-      requestPage: null,
+      page: T.length ? T[T.length - 1] : h ?? a,
+      next: I,
       progress: {
         collected: 0,
         target: 0
       },
-      cooldownMsTotal: b,
+      cooldownMsTotal: y,
       cooldownMsRemaining: 0,
-      pageSize: f,
-      bufferSize: E.length,
+      pageSize: d,
+      bufferSize: $.length,
       lastBatch: {
-        startPage: r,
-        pages: g,
-        usedFromBuffer: d,
-        fetchedFromNetwork: T,
-        collectedTotal: u.length,
-        emitted: N.length,
-        carried: E.length
+        startPage: a,
+        pages: T,
+        usedFromBuffer: B,
+        fetchedFromNetwork: z,
+        collectedTotal: S.length,
+        emitted: X.length,
+        carried: $.length
       },
       totals: {
-        pagesFetched: l.stats.value.totals.pagesFetched + g.length,
-        itemsFetchedFromNetwork: l.stats.value.totals.itemsFetchedFromNetwork + T
+        pagesFetched: o.stats.value.totals.pagesFetched + T.length,
+        itemsFetchedFromNetwork: o.stats.value.totals.itemsFetchedFromNetwork + z
       }
-    }, { batchItems: N, pages: g, nextPage: p };
+    }, { batchItems: X, pages: T, nextPage: I };
   }
   return { loadBackfillBatch: i };
 }
-function Tn(l) {
-  const k = l.columnCount, i = l.columnWidth, r = l.gapX, f = l.gapY, w = l.headerHeight, b = l.footerHeight, u = l.bucketPx, d = Array.from({ length: k }, () => 0), g = new Array(l.items.length), p = new Array(l.items.length), T = /* @__PURE__ */ new Map(), P = /* @__PURE__ */ new Map();
-  let N = 0;
-  for (let E = 0; E < l.items.length; E += 1) {
-    const L = l.items[E];
-    L?.id && P.set(L.id, E);
-    let H = 0;
-    for (let c = 1; c < d.length; c += 1)
-      d[c] < d[H] && (H = c);
-    const J = H * (i + r), q = d[H], D = _n(L, i) + w + b;
-    g[E] = { x: J, y: q }, p[E] = D, d[H] = q + D + f, N = Math.max(N, q + D);
-    const le = Math.floor(q / u), ae = Math.floor((q + D) / u);
-    for (let c = le; c <= ae; c += 1) {
-      const S = T.get(c);
-      S ? S.push(E) : T.set(c, [E]);
+function An(o) {
+  const M = o.columnCount, i = o.columnWidth, a = o.gapX, d = o.gapY, b = o.headerHeight, y = o.footerHeight, h = o.bucketPx, u = Array.from({ length: M }, () => 0), g = new Array(o.items.length), w = new Array(o.items.length), S = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
+  let T = 0;
+  for (let I = 0; I < o.items.length; I += 1) {
+    const z = o.items[I];
+    z?.id && B.set(z.id, I);
+    let A = 0;
+    for (let c = 1; c < u.length; c += 1)
+      u[c] < u[A] && (A = c);
+    const X = A * (i + a), $ = u[A], H = En(z, i) + b + y;
+    g[I] = { x: X, y: $ }, w[I] = H, u[A] = $ + H + d, T = Math.max(T, $ + H);
+    const q = Math.floor($ / h), te = Math.floor(($ + H) / h);
+    for (let c = q; c <= te; c += 1) {
+      const F = S.get(c);
+      F ? F.push(I) : S.set(c, [I]);
     }
   }
-  return { positions: g, heights: p, buckets: T, contentHeight: N, indexById: P };
+  return { positions: g, heights: w, buckets: S, contentHeight: T, indexById: B };
 }
-function En(l) {
-  const k = l.itemCount;
-  if (!k) return [];
-  if (l.viewportHeight <= 0) return Array.from({ length: k }, (d, g) => g);
-  const i = Math.max(0, l.scrollTop - l.overscanPx), r = l.scrollTop + l.viewportHeight + l.overscanPx, f = Math.floor(i / l.bucketPx), w = Math.floor(r / l.bucketPx), b = /* @__PURE__ */ new Set();
-  for (let d = f; d <= w; d += 1) {
-    const g = l.buckets.get(d);
+function Cn(o) {
+  const M = o.itemCount;
+  if (!M) return [];
+  if (o.viewportHeight <= 0) return Array.from({ length: M }, (u, g) => g);
+  const i = Math.max(0, o.scrollTop - o.overscanPx), a = o.scrollTop + o.viewportHeight + o.overscanPx, d = Math.floor(i / o.bucketPx), b = Math.floor(a / o.bucketPx), y = /* @__PURE__ */ new Set();
+  for (let u = d; u <= b; u += 1) {
+    const g = o.buckets.get(u);
     if (g)
-      for (const p of g) b.add(p);
+      for (const w of g) y.add(w);
   }
-  const u = Array.from(b);
-  return u.sort((d, g) => d - g), u;
+  const h = Array.from(y);
+  return h.sort((u, g) => u - g), h;
 }
-const Bn = { class: "hidden" }, Rn = {
+const Nn = { class: "hidden" }, Hn = {
   key: 0,
   class: "flex h-full items-center justify-center"
-}, An = {
+}, Ln = {
   key: 1,
   class: "text-sm font-medium text-red-700"
-}, Cn = ["onMouseenter", "onMouseleave"], Nn = {
+}, Vn = ["onMouseenter", "onMouseleave"], zn = {
   key: 0,
   class: "pointer-events-auto absolute inset-0 z-10"
-}, Hn = { class: "relative" }, Vn = {
+}, $n = { class: "relative" }, Dn = {
   key: 0,
   class: "pointer-events-auto absolute inset-0 z-10"
-}, zn = { class: "mt-4 pb-2 text-center text-xs text-slate-600" }, Ln = {
+}, On = { class: "mt-4 pb-2 text-center text-xs text-slate-600" }, Yn = {
   key: 0,
   class: "inline-flex items-center justify-center gap-2"
-}, $n = { key: 1 }, Dn = { key: 2 }, Et = 100, qn = 200, Bt = 600, Rt = 300, At = 600, Ct = 600, On = 400, Yn = 5, Xn = 1e3, jn = /* @__PURE__ */ be({
+}, qn = { key: 1 }, Xn = { key: 2 }, At = 100, jn = 200, Ct = 600, Nt = 300, Ht = 600, Lt = 600, Un = 400, Wn = 5, Gn = 1e3, Kn = /* @__PURE__ */ xe({
   inheritAttrs: !1,
   __name: "Masonry",
-  props: /* @__PURE__ */ sn({
+  props: /* @__PURE__ */ fn({
     getContent: {},
     mode: {},
     pageSize: {},
@@ -577,10 +612,10 @@ const Bn = { class: "hidden" }, Rn = {
     headerHeight: {},
     footerHeight: {},
     overscanPx: {}
-  }, mn),
-  emits: ["update:items", "preloaded", "failures"],
-  setup(l, { expose: k, emit: i }) {
-    const r = l, f = i, w = un(), b = be({
+  }, pn),
+  emits: ["update:items", "preloaded", "failures", "removed"],
+  setup(o, { expose: M, emit: i }) {
+    const a = o, d = i, b = dn(), y = xe({
       name: "SlotRenderer",
       props: {
         slotFn: {
@@ -598,281 +633,282 @@ const Bn = { class: "hidden" }, Rn = {
           return n ? n(e.slotProps) : null;
         };
       }
-    }), u = It(null), d = m(null);
+    }), h = Pt(null), u = v(null);
     function g(e) {
-      d.value = e;
+      u.value = e;
     }
-    function p(e) {
-      d.value === e && (d.value = null);
+    function w(e) {
+      u.value === e && (u.value = null);
     }
-    cn(Vt, (e) => {
-      u.value || (u.value = e);
+    vn($t, (e) => {
+      h.value || (h.value = e);
     });
-    const T = [], P = [];
-    let N = null, E = null;
-    function L() {
-      if (!T.length) return;
-      const e = T.splice(0, T.length);
-      f("preloaded", e);
-    }
-    function H() {
-      if (!P.length) return;
-      const e = P.splice(0, P.length);
-      f("failures", e);
-    }
-    function J() {
-      N || (N = setTimeout(() => {
-        N = null, L();
-      }, Et));
-    }
-    function q() {
-      E || (E = setTimeout(() => {
-        E = null, H();
-      }, Et));
-    }
-    function D(e) {
-      u.value?.onPreloaded?.(e), T.push(e), J();
-    }
-    function le(e) {
-      u.value?.onFailed?.(e), P.push(e), q();
-    }
-    Ge(() => {
-      if (!u.value)
+    const S = [], B = [];
+    let T = null, I = null;
+    function z() {
+      if (!S.length) return;
+      const e = S.splice(0, S.length);
+      d("preloaded", e);
+    }
+    function A() {
+      if (!B.length) return;
+      const e = B.splice(0, B.length);
+      d("failures", e);
+    }
+    function X() {
+      T || (T = setTimeout(() => {
+        T = null, z();
+      }, At));
+    }
+    function $() {
+      I || (I = setTimeout(() => {
+        I = null, A();
+      }, At));
+    }
+    function H(e) {
+      h.value?.onPreloaded?.(e), S.push(e), X();
+    }
+    function q(e) {
+      h.value?.onFailed?.(e), B.push(e), $();
+    }
+    Ze(() => {
+      if (!h.value)
         throw new Error("[Masonry] Missing <MasonryItem> definition. Add <MasonryItem> as a child of <Masonry>.");
     });
-    const ae = M(() => {
-      const { class: e, ...n } = w;
+    const te = k(() => {
+      const { class: e, ...n } = b;
       return n;
-    }), c = m(null), S = m(0), B = m(0), O = m(0);
+    }), c = v(null), F = v(0), R = v(0), j = v(0);
     let re;
-    const Q = M(() => r.gapX), _e = M(() => r.gapY);
-    function Pe(e) {
+    const ne = k(() => a.gapX), Ee = k(() => a.gapY);
+    function Be(e) {
       if (!e) return 0;
-      const n = Math.max(0, Q.value);
+      const n = Math.max(0, ne.value);
       return Math.max(0, e.clientWidth - n);
     }
-    const j = M(() => r.headerHeight), U = M(() => r.footerHeight), xe = M(() => u.value?.header), he = M(() => u.value?.loader), s = M(() => u.value?.footer), x = M(() => u.value?.overlay), W = M(() => u.value?.error), Te = M(() => !!xe.value), Me = M(() => !!s.value), Qe = M(() => !!x.value), Ze = M(() => {
-      if (j.value > 0) return { height: `${j.value}px` };
-    }), et = M(() => {
-      if (U.value > 0) return { height: `${U.value}px` };
-    }), ke = m([]), Le = m([]), tt = m(/* @__PURE__ */ new Map()), nt = m(0), Ee = m(/* @__PURE__ */ new Map());
-    function Lt(e) {
+    const W = k(() => a.headerHeight), K = k(() => a.footerHeight), ke = k(() => h.value?.header), Me = k(() => h.value?.loader), se = k(() => h.value?.footer), s = k(() => h.value?.overlay), x = k(() => h.value?.error), J = k(() => !!ke.value), Re = k(() => !!se.value), Se = k(() => !!s.value), nt = k(() => {
+      if (W.value > 0) return { height: `${W.value}px` };
+    }), ot = k(() => {
+      if (K.value > 0) return { height: `${K.value}px` };
+    }), Ie = v([]), Ye = v([]), lt = v(/* @__PURE__ */ new Map()), at = v(0), Ae = v(/* @__PURE__ */ new Map());
+    function Ot(e) {
       const n = typeof e == "number" && Number.isFinite(e) ? e : 0;
-      return O.value + B.value + Math.max(0, n);
+      return j.value + R.value + Math.max(0, n);
     }
-    const se = m(/* @__PURE__ */ new Set()), ie = m(/* @__PURE__ */ new Set()), Be = /* @__PURE__ */ new Set(), Se = m(/* @__PURE__ */ new Map());
-    function $t(e) {
+    const ie = v(/* @__PURE__ */ new Set()), ue = v(/* @__PURE__ */ new Set()), Ce = /* @__PURE__ */ new Set(), Fe = v(/* @__PURE__ */ new Map());
+    function Yt(e) {
       return Number.isFinite(e) ? Math.max(0, Math.min(250, e)) : 0;
     }
-    function Dt(e) {
-      if (!ie.value.has(e)) return;
-      const n = Se.value.get(e) ?? 0;
+    function qt(e) {
+      if (!ue.value.has(e)) return;
+      const n = Fe.value.get(e) ?? 0;
       if (!(n <= 0))
         return `${n}ms`;
     }
-    const Re = m(/* @__PURE__ */ new Map()), Z = m(/* @__PURE__ */ new Set()), ee = m([]);
-    function qt(e) {
-      const n = Re.value.get(e);
+    const Ne = v(/* @__PURE__ */ new Map()), oe = v(/* @__PURE__ */ new Set()), le = v([]);
+    function Xt(e) {
+      const n = Ne.value.get(e);
       return n || { dx: 0, dy: 0 };
     }
-    function Ot(e) {
-      if (ie.value.has(e)) return `transform ${At}ms ease-out`;
-      if (Z.value.has(e)) return `transform ${Rt}ms ease-out`;
+    function jt(e) {
+      if (ue.value.has(e)) return `transform ${Ht}ms ease-out`;
+      if (oe.value.has(e)) return `transform ${Nt}ms ease-out`;
     }
-    function Yt(e) {
-      const t = h.value[e]?.id, o = ke.value[e] ?? { x: 0, y: 0 }, a = Le.value[e] ?? 0, v = a > 0 ? a : Fe.value, y = o.x, R = t && se.value.has(t) ? Lt(v) : o.y, V = t ? qt(t) : { dx: 0, dy: 0 };
-      return `translate3d(${y + V.dx}px,${R + V.dy}px,0)`;
+    function Ut(e) {
+      const t = m.value[e]?.id, l = Ie.value[e] ?? { x: 0, y: 0 }, r = Ye.value[e] ?? 0, f = r > 0 ? r : Te.value, p = l.x, E = t && ie.value.has(t) ? Ot(f) : l.y, O = t ? Xt(t) : { dx: 0, dy: 0 };
+      return `translate3d(${p + O.dx}px,${E + O.dy}px,0)`;
     }
-    function ge(e) {
+    function pe(e) {
       (typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(0), 0))(() => e());
     }
-    function Xt(e) {
-      ge(() => ge(e));
+    function Wt(e) {
+      pe(() => pe(e));
     }
-    const ot = /* @__PURE__ */ new Set();
-    function lt(e) {
+    const rt = /* @__PURE__ */ new Set();
+    function st(e) {
       return typeof e == "number" && Number.isFinite(e) && e > 0;
     }
-    function Ae(e) {
+    function He(e) {
       if (!Array.isArray(e) || e.length === 0) return;
-      const n = new Set(se.value);
+      const n = new Set(ie.value);
       let t = !1;
-      for (const o of e) {
-        const a = o?.id;
-        if (a) {
-          if (!ot.has(a)) {
-            const v = o?.width, y = o?.height;
-            (!lt(v) || !lt(y)) && (ot.add(a), console.warn(
-              `[Masonry] Item "${a}" has invalid dimensions (width=${String(v)}, height=${String(
-                y
+      for (const l of e) {
+        const r = l?.id;
+        if (r) {
+          if (!rt.has(r)) {
+            const f = l?.width, p = l?.height;
+            (!st(f) || !st(p)) && (rt.add(r), console.warn(
+              `[Masonry] Item "${r}" has invalid dimensions (width=${String(f)}, height=${String(
+                p
               )}); layout expects { id, width, height }.`
             ));
           }
-          n.has(a) || (n.add(a), t = !0);
+          n.has(r) || (n.add(r), t = !0);
         }
       }
-      t && (se.value = n);
+      t && (ie.value = n);
     }
-    function at() {
+    function it() {
       const e = /* @__PURE__ */ new Map();
-      for (const n of je.value) {
-        const o = h.value[n]?.id;
-        if (!o) continue;
-        const a = ke.value[n];
-        a && e.set(o, { x: a.x, y: a.y });
+      for (const n of Ge.value) {
+        const l = m.value[n]?.id;
+        if (!l) continue;
+        const r = Ie.value[n];
+        r && e.set(l, { x: r.x, y: r.y });
       }
       return e;
     }
-    function rt(e, n) {
+    function ut(e, n) {
       if (!e.size) return;
-      const t = /* @__PURE__ */ new Map(), o = [];
-      for (const [v, y] of e.entries()) {
-        if (n?.has(v)) continue;
-        const R = Ee.value.get(v);
-        if (R == null) continue;
-        const V = ke.value[R];
-        if (!V) continue;
-        const C = y.x - V.x, _ = y.y - V.y;
-        (C || _) && (t.set(v, { dx: C, dy: _ }), o.push(v));
+      const t = /* @__PURE__ */ new Map(), l = [];
+      for (const [f, p] of e.entries()) {
+        if (n?.has(f)) continue;
+        const E = Ae.value.get(f);
+        if (E == null) continue;
+        const O = Ie.value[E];
+        if (!O) continue;
+        const Y = p.x - O.x, V = p.y - O.y;
+        (Y || V) && (t.set(f, { dx: Y, dy: V }), l.push(f));
       }
       if (!t.size) return;
-      Re.value = t;
-      const a = new Set(Z.value);
-      for (const v of o) a.delete(v);
-      Z.value = a, ge(() => {
-        Z.value = /* @__PURE__ */ new Set([...Z.value, ...o]), ge(() => {
-          Re.value = /* @__PURE__ */ new Map();
+      Ne.value = t;
+      const r = new Set(oe.value);
+      for (const f of l) r.delete(f);
+      oe.value = r, pe(() => {
+        oe.value = /* @__PURE__ */ new Set([...oe.value, ...l]), pe(() => {
+          Ne.value = /* @__PURE__ */ new Map();
         });
       }), setTimeout(() => {
-        const v = new Set(Z.value);
-        for (const y of o) v.delete(y);
-        Z.value = v;
-      }, Rt);
-    }
-    const ue = m(!0), ce = m(!1), pe = m("");
-    let $ = 0, $e = 0, De = 0;
-    function st(e) {
+        const f = new Set(oe.value);
+        for (const p of l) f.delete(p);
+        oe.value = f;
+      }, Nt);
+    }
+    const ce = v(!0), fe = v(!1), ye = v("");
+    let D = 0, qe = 0, Le = 0, Ve = 0, _e = !1;
+    function ct(e) {
       return e instanceof Error && e.name === "AbortError";
     }
-    function it() {
+    function ft() {
       const e = new Error("aborted");
       return e.name = "AbortError", e;
     }
-    function jt(e) {
+    function Gt(e) {
       return new Promise((n) => setTimeout(n, e));
     }
-    async function ut(e, n) {
+    async function dt(e, n) {
       let t = 0;
       for (; ; ) {
-        if (n !== $) throw it();
+        if (n !== D) throw ft();
         try {
-          return await r.getContent(e);
-        } catch (o) {
-          if (n !== $) throw it();
-          if (t >= Yn) throw o;
-          t += 1, await jt(t * Xn);
+          return await a.getContent(e);
+        } catch (l) {
+          if (n !== D) throw ft();
+          if (t >= Wn) throw l;
+          t += 1, await Gt(t * Gn);
         }
       }
     }
-    const X = m([]), ct = m([]), qe = m([]), z = m(r.page), Ce = m([]);
-    let fe = null, de = null, Ne = 0;
-    function Ut(e) {
+    const G = v([]), vt = v([]), Xe = v([]), L = v(a.page), ze = v([]);
+    let de = null, ve = null, $e = 0;
+    function Kt(e) {
       let n = -1;
       for (const t of e) {
-        const o = t?.originalIndex;
-        Ie(o) && o > n && (n = o);
+        const l = t?.originalIndex;
+        Pe(l) && l > n && (n = l);
       }
-      Ne = n + 1;
+      $e = n + 1;
     }
-    function ye(e) {
+    function we(e) {
       for (const n of e)
-        !n || typeof n != "object" || n.id && n.originalIndex == null && (n.originalIndex = Ne, Ne += 1);
+        !n || typeof n != "object" || n.id && n.originalIndex == null && (n.originalIndex = $e, $e += 1);
     }
-    const ve = /* @__PURE__ */ new Map(), me = [];
-    function Ie(e) {
+    const me = /* @__PURE__ */ new Map(), he = [];
+    function Pe(e) {
       return typeof e == "number" && Number.isFinite(e);
     }
-    function Wt(e, n) {
+    function Jt(e, n) {
       if (!n.length) return e;
       const t = /* @__PURE__ */ new Set();
-      for (const y of e) {
-        const R = y?.id;
-        R && t.add(R);
+      for (const p of e) {
+        const E = p?.id;
+        E && t.add(E);
       }
-      const o = [];
-      for (const y of n) {
-        const R = y?.id;
-        R && (t.has(R) || (o.push(y), t.add(R)));
+      const l = [];
+      for (const p of n) {
+        const E = p?.id;
+        E && (t.has(E) || (l.push(p), t.add(E)));
       }
-      if (!o.length) return e;
-      const a = o.slice().sort((y, R) => {
-        const V = Ie(y.originalIndex) ? y.originalIndex : Number.POSITIVE_INFINITY, C = Ie(R.originalIndex) ? R.originalIndex : Number.POSITIVE_INFINITY;
-        return V - C;
-      }), v = e.slice();
-      for (const y of a) {
-        const R = y.originalIndex;
-        if (!Ie(R)) {
-          v.push(y);
+      if (!l.length) return e;
+      const r = l.slice().sort((p, E) => {
+        const O = Pe(p.originalIndex) ? p.originalIndex : Number.POSITIVE_INFINITY, Y = Pe(E.originalIndex) ? E.originalIndex : Number.POSITIVE_INFINITY;
+        return O - Y;
+      }), f = e.slice();
+      for (const p of r) {
+        const E = p.originalIndex;
+        if (!Pe(E)) {
+          f.push(p);
           continue;
         }
-        let V = 0, C = v.length;
-        for (; V < C; ) {
-          const _ = V + C >> 1, te = v[_]?.originalIndex;
-          (Ie(te) ? te : Number.POSITIVE_INFINITY) <= R ? V = _ + 1 : C = _;
+        let O = 0, Y = f.length;
+        for (; O < Y; ) {
+          const V = O + Y >> 1, C = f[V]?.originalIndex;
+          (Pe(C) ? C : Number.POSITIVE_INFINITY) <= E ? O = V + 1 : Y = V;
         }
-        v.splice(V, 0, y);
+        f.splice(O, 0, p);
       }
-      return v;
+      return f;
     }
-    async function ft(e) {
+    async function mt(e) {
       if (!e.length) return;
-      Ae(e);
-      const n = at();
-      h.value = Wt(h.value, e), await Pt(), rt(n);
+      _e = !0, He(e);
+      const n = it();
+      m.value = Jt(m.value, e), await Bt(), ut(n);
     }
-    async function Gt(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(Xe).filter(Boolean);
+    async function Qt(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(We).filter(Boolean);
       if (!t.length) return;
-      const o = [];
-      for (const a of t) {
-        const v = ve.get(a);
-        v && o.push(v);
+      const l = [];
+      for (const r of t) {
+        const f = me.get(r);
+        f && l.push(f);
       }
-      if (o.length) {
-        await ft(o);
-        for (const a of o)
-          a?.id && ve.delete(a.id);
+      if (l.length) {
+        await mt(l);
+        for (const r of l)
+          r?.id && me.delete(r.id);
       }
     }
-    async function Kt() {
-      const e = me.pop();
+    async function Zt() {
+      const e = he.pop();
       if (!e?.length) return;
       const n = [];
       for (const t of e) {
-        const o = ve.get(t);
-        o && n.push(o);
+        const l = me.get(t);
+        l && n.push(l);
       }
       if (n.length) {
-        await ft(n);
+        await mt(n);
         for (const t of n)
-          t?.id && ve.delete(t.id);
+          t?.id && me.delete(t.id);
       }
     }
-    function Jt(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(Xe).filter(Boolean);
+    function en(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(We).filter(Boolean);
       if (!t.length) return;
-      const o = new Set(t);
-      for (const a of o) ve.delete(a);
-      for (let a = me.length - 1; a >= 0; a -= 1) {
-        const y = me[a].filter((R) => !o.has(R));
-        y.length ? me[a] = y : me.splice(a, 1);
+      const l = new Set(t);
+      for (const r of l) me.delete(r);
+      for (let r = he.length - 1; r >= 0; r -= 1) {
+        const p = he[r].filter((E) => !l.has(E));
+        p.length ? he[r] = p : he.splice(r, 1);
       }
     }
-    const Oe = It({
+    const je = Pt({
       enabled: !1,
       isBackfillActive: !1,
       isRequestInFlight: !1,
-      requestPage: null,
+      page: a.page,
+      next: a.page,
       progress: {
         collected: 0,
         target: 0
@@ -886,241 +922,248 @@ const Bn = { class: "hidden" }, Rn = {
         pagesFetched: 0,
         itemsFetchedFromNetwork: 0
       }
-    }), dt = Pn({
-      getContent: (e) => ut(e, $),
-      markEnterFromLeft: Ae,
-      buffer: Ce,
-      stats: Oe,
-      isEnabled: () => r.mode === "backfill",
-      getPageSize: () => r.pageSize,
-      getRequestDelayMs: () => r.backfillRequestDelayMs
-    }), He = M(() => r.items !== void 0);
-    ne(
-      () => r.items,
+    }), ht = Rn({
+      getContent: (e) => dt(e, D),
+      markEnterFromLeft: He,
+      buffer: ze,
+      stats: je,
+      isEnabled: () => a.mode === "backfill",
+      getPageSize: () => a.pageSize,
+      getRequestDelayMs: () => a.backfillRequestDelayMs,
+      getCancelToken: () => qe
+    }), De = k(() => a.items !== void 0);
+    Z(
+      () => a.items,
       (e) => {
-        He.value && (qe.value = Array.isArray(e) ? e : []);
+        De.value && (Xe.value = Array.isArray(e) ? e : []);
       },
       { immediate: !0 }
     );
-    const h = M({
+    const m = k({
       get() {
-        return He.value ? qe.value : ct.value;
+        return De.value ? Xe.value : vt.value;
       },
       set(e) {
-        He.value ? (qe.value = e, f("update:items", e)) : ct.value = e;
+        De.value ? (Xe.value = e, d("update:items", e)) : vt.value = e;
       }
-    }), we = m(!1), Ye = m(!1);
-    async function vt(e) {
-      const n = await ut(e, $);
-      return ye(n.items), Ae(n.items), { items: n.items, nextPage: n.nextPage };
+    }), be = v(!1), Ue = v(!1);
+    async function gt(e) {
+      const n = await dt(e, D);
+      return we(n.items), He(n.items), { items: n.items, nextPage: n.nextPage };
     }
-    function Xe(e) {
+    function We(e) {
       return e ? typeof e == "string" ? e : e?.id : null;
     }
-    async function mt(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(Xe).filter(Boolean);
+    async function pt(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(We).filter(Boolean);
       if (!t.length) return;
-      const o = new Set(t), a = [];
-      for (const C of o) {
-        const _ = Ee.value.get(C);
-        if (_ == null) continue;
-        const te = h.value[_];
-        te && (ve.set(C, te), a.push(C));
+      const l = new Set(t), r = [], f = [];
+      for (const V of l) {
+        const C = Ae.value.get(V);
+        if (C == null) continue;
+        const ge = m.value[C];
+        ge && (me.set(V, ge), f.push(V), r.push(ge));
       }
-      a.length && me.push(a);
-      const v = at(), y = Fe.value, R = O.value + B.value, V = [];
-      for (const C of o) {
-        const _ = Ee.value.get(C);
-        if (_ == null) continue;
-        const te = h.value[_];
-        if (!te) continue;
-        const ze = ke.value[_] ?? { x: 0, y: 0 }, Mt = Le.value[_] ?? y, rn = Math.max(ze.y, R);
-        V.push({
-          id: C,
-          item: te,
-          fromX: ze.x,
-          fromY: ze.y,
-          toY: rn + Math.max(0, Mt),
-          width: y,
-          height: Mt,
+      f.length && (he.push(f), _e = !0);
+      const p = it(), E = Te.value, O = j.value + R.value, Y = [];
+      for (const V of l) {
+        const C = Ae.value.get(V);
+        if (C == null) continue;
+        const ge = m.value[C];
+        if (!ge) continue;
+        const Qe = Ie.value[C] ?? { x: 0, y: 0 }, It = Ye.value[C] ?? E, cn = Math.max(Qe.y, O);
+        Y.push({
+          id: V,
+          item: ge,
+          fromX: Qe.x,
+          fromY: Qe.y,
+          toY: cn + Math.max(0, It),
+          width: E,
+          height: It,
           leaving: !0
         });
       }
-      if (V.length && (ee.value = [...ee.value, ...V]), h.value = h.value.filter((C) => {
-        const _ = C?.id;
-        return !_ || !o.has(_);
-      }), await Pt(), rt(v, o), V.length) {
-        const C = new Set(V.map((_) => _.id));
-        ge(() => {
-          ee.value = ee.value.map(
-            (_) => C.has(_.id) ? { ..._, leaving: !1 } : _
+      if (Y.length && (le.value = [...le.value, ...Y]), m.value = m.value.filter((V) => {
+        const C = V?.id;
+        return !C || !l.has(C);
+      }), await Bt(), ut(p, l), Y.length) {
+        const V = new Set(Y.map((C) => C.id));
+        pe(() => {
+          le.value = le.value.map(
+            (C) => V.has(C.id) ? { ...C, leaving: !1 } : C
           ), setTimeout(() => {
-            ee.value = ee.value.filter((_) => !C.has(_.id));
-          }, Ct);
+            le.value = le.value.filter((C) => !V.has(C.id));
+          }, Lt);
         });
       }
+      r.length && d("removed", { items: r, ids: f });
     }
-    async function Ve(e) {
-      return mt(e);
-    }
-    function Qt() {
-      $ += 1, fe = null, de = null, ue.value = !1, ce.value = !1;
+    async function Oe(e) {
+      return pt(e);
     }
-    k({
-      remove: mt,
-      restore: Gt,
-      undo: Kt,
-      forget: Jt,
-      loadNextPage: gt,
-      cancel: Qt,
+    function tn() {
+      D += 1, qe += 1, de = null, ve = null, ce.value = !1, fe.value = !1;
+    }
+    M({
+      remove: pt,
+      restore: Qt,
+      undo: Zt,
+      forget: en,
+      loadNextPage: wt,
+      cancel: tn,
       get pagesLoaded() {
-        return X.value;
+        return G.value;
       },
       set pagesLoaded(e) {
-        X.value = e;
+        G.value = e;
       },
       get nextPage() {
-        return z.value;
+        return L.value;
       },
       set nextPage(e) {
-        z.value = e;
+        L.value = e;
       },
       get isLoading() {
-        return ue.value || ce.value;
+        return ce.value || fe.value;
       },
       get hasReachedEnd() {
-        return r.mode !== "backfill" ? z.value == null : z.value == null && Ce.value.length === 0;
+        return a.mode !== "backfill" ? L.value == null : L.value == null && ze.value.length === 0;
       },
       get backfillStats() {
-        return Oe.value;
+        return je.value;
       }
     });
-    function ht() {
-      const e = Tn({
-        items: h.value,
-        columnCount: We.value,
-        columnWidth: Fe.value,
-        gapX: Q.value,
-        gapY: _e.value,
-        headerHeight: j.value,
-        footerHeight: U.value,
-        bucketPx: Bt
+    function yt() {
+      const e = An({
+        items: m.value,
+        columnCount: Je.value,
+        columnWidth: Te.value,
+        gapX: ne.value,
+        gapY: Ee.value,
+        headerHeight: W.value,
+        footerHeight: K.value,
+        bucketPx: Ct
       });
-      ke.value = e.positions, Le.value = e.heights, tt.value = e.buckets, nt.value = e.contentHeight, Ee.value = e.indexById;
-    }
-    const Zt = M(() => Math.max(nt.value, B.value) + qn), je = M(() => En({
-      itemCount: h.value.length,
-      viewportHeight: B.value,
-      scrollTop: O.value,
-      overscanPx: r.overscanPx,
-      bucketPx: Bt,
-      buckets: tt.value
+      Ie.value = e.positions, Ye.value = e.heights, lt.value = e.buckets, at.value = e.contentHeight, Ae.value = e.indexById;
+    }
+    const nn = k(() => Math.max(at.value, R.value) + jn), Ge = k(() => Cn({
+      itemCount: m.value.length,
+      viewportHeight: R.value,
+      scrollTop: j.value,
+      overscanPx: a.overscanPx,
+      bucketPx: Ct,
+      buckets: lt.value
     }));
-    ne(
-      je,
+    Z(
+      Ge,
       (e) => {
         if (!e?.length) return;
-        if (we.value && !Ye.value) {
-          const o = [];
-          for (const a of e) {
-            const v = h.value[a];
-            v && o.push(v);
+        if (be.value && !Ue.value) {
+          const l = [];
+          for (const r of e) {
+            const f = m.value[r];
+            f && l.push(f);
           }
-          o.length && Ae(o), Ye.value = !0;
+          l.length && He(l), Ue.value = !0;
         }
         const n = [];
-        for (const o of e) {
-          const a = h.value[o]?.id;
-          a && se.value.has(a) && (Be.has(a) || (Be.add(a), n.push(a)));
+        for (const l of e) {
+          const r = m.value[l]?.id;
+          r && ie.value.has(r) && (Ce.has(r) || (Ce.add(r), n.push(r)));
         }
         if (!n.length) return;
-        const t = n.length > 1 ? $t(r.enterStaggerMs) : 0;
+        const t = n.length > 1 ? Yt(a.enterStaggerMs) : 0;
         if (t > 0) {
-          const o = new Map(Se.value);
-          for (let a = 0; a < n.length; a += 1) {
-            const v = n[a], y = Math.min(a * t, On);
-            o.set(v, y);
+          const l = new Map(Fe.value);
+          for (let r = 0; r < n.length; r += 1) {
+            const f = n[r], p = Math.min(r * t, Un);
+            l.set(f, p);
           }
-          Se.value = o;
+          Fe.value = l;
         }
-        ge(() => {
-          const o = new Set(ie.value);
-          for (const a of n) o.add(a);
-          ie.value = o;
-        }), Xt(() => {
-          const o = new Set(se.value);
-          for (const a of n) o.delete(a);
-          se.value = o, setTimeout(() => {
-            const a = new Set(ie.value), v = new Map(Se.value);
-            for (const y of n)
-              a.delete(y), Be.delete(y), v.delete(y);
-            ie.value = a, Se.value = v;
-          }, At);
+        pe(() => {
+          const l = new Set(ue.value);
+          for (const r of n) l.add(r);
+          ue.value = l;
+        }), Wt(() => {
+          const l = new Set(ie.value);
+          for (const r of n) l.delete(r);
+          ie.value = l, setTimeout(() => {
+            const r = new Set(ue.value), f = new Map(Fe.value);
+            for (const p of n)
+              r.delete(p), Ce.delete(p), f.delete(p);
+            ue.value = r, Fe.value = f;
+          }, Ht);
         });
       },
       { flush: "post" }
     );
-    async function gt() {
-      if (fe) return fe;
-      if (ue.value || ce.value || r.mode !== "backfill" && z.value == null || r.mode === "backfill" && z.value == null && Ce.value.length === 0)
+    async function wt() {
+      if (de) return de;
+      if (ce.value || fe.value || a.mode !== "backfill" && L.value == null || a.mode === "backfill" && L.value == null && ze.value.length === 0)
         return;
-      const e = $;
+      const e = D;
       let n = null;
       return n = (async () => {
         try {
-          if (ce.value = !0, pe.value = "", r.mode === "backfill") {
-            const a = await dt.loadBackfillBatch(z.value);
-            if (e !== $) return;
-            a.pages.length && (X.value = [...X.value, ...a.pages]), ye(a.batchItems), h.value = [...h.value, ...a.batchItems], z.value = a.nextPage;
+          if (fe.value = !0, ye.value = "", a.mode === "backfill") {
+            const r = await ht.loadBackfillBatch(L.value);
+            if (e !== D) return;
+            r.pages.length && (G.value = [...G.value, ...r.pages]), we(r.batchItems), m.value = [...m.value, ...r.batchItems], L.value = r.nextPage;
             return;
           }
-          const t = z.value;
+          const t = L.value;
           if (t == null) return;
-          const o = await vt(t);
-          if (e !== $) return;
-          X.value = [...X.value, t], ye(o.items), h.value = [...h.value, ...o.items], z.value = o.nextPage;
+          const l = await gt(t);
+          if (e !== D) return;
+          G.value = [...G.value, t], we(l.items), m.value = [...m.value, ...l.items], L.value = l.nextPage;
         } catch (t) {
-          if (e !== $ || st(t)) return;
-          pe.value = t instanceof Error ? t.message : String(t);
+          if (e !== D || ct(t)) return;
+          ye.value = t instanceof Error ? t.message : String(t);
         } finally {
-          e === $ && (ce.value = !1), fe === n && (fe = null);
+          e === D && (fe.value = !1), de === n && (de = null);
         }
-      })(), fe = n, n;
+      })(), de = n, n;
     }
-    function en() {
+    function on() {
       const e = c.value;
       if (!e) return;
-      const n = e.scrollTop, t = e.clientHeight, o = e.scrollHeight;
-      O.value = n, B.value = t;
-      const a = $e, v = De, y = v > 0 && o < v;
-      if ($e = n, De = o, y && n <= a) return;
-      o - (n + t) <= r.prefetchThresholdPx && gt();
+      const n = e.scrollTop, t = e.clientHeight, l = e.scrollHeight;
+      j.value = n, R.value = t;
+      const r = Le, f = Ve, p = n > r, E = f > 0 && l < f;
+      if (Le = n, Ve = l, _e) {
+        if (!p) return;
+        _e = !1;
+      }
+      if (E && !p) return;
+      l - (n + t) <= a.prefetchThresholdPx && wt();
     }
-    function pt() {
+    function bt() {
       return c.value;
     }
-    function yt(e) {
-      S.value = Pe(e), B.value = e.clientHeight;
+    function xt(e) {
+      F.value = Be(e), R.value = e.clientHeight;
     }
-    function tn() {
+    function ln() {
       typeof ResizeObserver > "u" || (re = new ResizeObserver(() => {
-        const e = pt();
-        e && yt(e);
+        const e = bt();
+        e && xt(e);
       }));
     }
-    function nn() {
+    function an() {
       return {
-        enabled: r.mode === "backfill",
+        enabled: a.mode === "backfill",
         isBackfillActive: !1,
         isRequestInFlight: !1,
-        requestPage: null,
+        page: a.page,
+        next: a.page,
         progress: {
           collected: 0,
           target: 0
         },
         cooldownMsRemaining: 0,
-        cooldownMsTotal: Je(r.backfillRequestDelayMs),
-        pageSize: zt(r.pageSize),
+        cooldownMsTotal: tt(a.backfillRequestDelayMs),
+        pageSize: Dt(a.pageSize),
         bufferSize: 0,
         lastBatch: null,
         totals: {
@@ -1129,127 +1172,127 @@ const Bn = { class: "hidden" }, Rn = {
         }
       };
     }
-    function wt() {
-      $ += 1, fe = null, de = null, $e = 0, De = 0, Ne = 0, ve.clear(), me.length = 0, se.value = /* @__PURE__ */ new Set(), ie.value = /* @__PURE__ */ new Set(), Be.clear(), Re.value = /* @__PURE__ */ new Map(), Z.value = /* @__PURE__ */ new Set(), ee.value = [], X.value = [], z.value = null, Ce.value = [], Oe.value = nn(), ue.value = !0, ce.value = !1, pe.value = "", Ye.value = !1;
+    function kt() {
+      D += 1, qe += 1, de = null, ve = null, Le = 0, Ve = 0, _e = !1, $e = 0, me.clear(), he.length = 0, ie.value = /* @__PURE__ */ new Set(), ue.value = /* @__PURE__ */ new Set(), Ce.clear(), Ne.value = /* @__PURE__ */ new Map(), oe.value = /* @__PURE__ */ new Set(), le.value = [], G.value = [], L.value = null, ze.value = [], je.value = an(), ce.value = !0, fe.value = !1, ye.value = "", Ue.value = !1;
     }
-    function bt(e) {
-      wt(), h.value = [], z.value = e;
+    function Mt(e) {
+      kt(), m.value = [], L.value = e;
     }
-    function on(e) {
-      const n = Array.isArray(e) ? e : [e], t = [], o = /* @__PURE__ */ new Set();
-      for (const a of n) {
-        if (a == null) continue;
-        const v = typeof a == "string" ? `s:${a}` : `n:${String(a)}`;
-        o.has(v) || (o.add(v), t.push(a));
+    function rn(e) {
+      const n = Array.isArray(e) ? e : [e], t = [], l = /* @__PURE__ */ new Set();
+      for (const r of n) {
+        if (r == null) continue;
+        const f = typeof r == "string" ? `s:${r}` : `n:${String(r)}`;
+        l.has(f) || (l.add(f), t.push(r));
       }
       return t;
     }
-    function Ue(e) {
-      wt(), X.value = e ? on(e) : [], z.value = r.page, ue.value = !1, Ut(h.value), ye(h.value);
+    function Ke(e) {
+      kt(), G.value = e ? rn(e) : [], L.value = a.page, ce.value = !1, Kt(m.value), we(m.value);
     }
-    async function xt(e) {
-      if (de) return de;
-      const n = $;
+    async function St(e) {
+      if (ve) return ve;
+      const n = D;
       let t = null;
       return t = (async () => {
         try {
-          if (r.mode === "backfill") {
-            const o = await dt.loadBackfillBatch(e);
-            if (n !== $) return;
-            X.value = o.pages.length ? o.pages : [e], ye(o.batchItems), h.value = o.batchItems, z.value = o.nextPage;
+          if (a.mode === "backfill") {
+            const l = await ht.loadBackfillBatch(e);
+            if (n !== D) return;
+            G.value = l.pages.length ? l.pages : [e], we(l.batchItems), m.value = l.batchItems, L.value = l.nextPage;
           } else {
-            const o = await vt(e);
-            if (n !== $) return;
-            X.value = [e], ye(o.items), h.value = o.items, z.value = o.nextPage;
+            const l = await gt(e);
+            if (n !== D) return;
+            G.value = [e], we(l.items), m.value = l.items, L.value = l.nextPage;
           }
-        } catch (o) {
-          if (n !== $ || st(o)) return;
-          pe.value = o instanceof Error ? o.message : String(o);
+        } catch (l) {
+          if (n !== D || ct(l)) return;
+          ye.value = l instanceof Error ? l.message : String(l);
         } finally {
-          n === $ && (ue.value = !1), de === t && (de = null);
+          n === D && (ce.value = !1), ve === t && (ve = null);
         }
-      })(), de = t, t;
+      })(), ve = t, t;
     }
-    function ln() {
-      const e = pt();
-      e && (yt(e), O.value = e.scrollTop, re?.observe(e));
+    function sn() {
+      const e = bt();
+      e && (xt(e), j.value = e.scrollTop, Le = e.scrollTop, Ve = e.scrollHeight, re?.observe(e));
     }
-    Ge(async () => {
-      if (tn(), ln(), r.restoredPages != null) {
-        we.value = !0, Ue(r.restoredPages);
+    Ze(async () => {
+      if (ln(), sn(), a.restoredPages != null) {
+        be.value = !0, Ke(a.restoredPages);
         return;
       }
-      if (He.value && h.value.length > 0) {
-        we.value = !0, Ue();
+      if (De.value && m.value.length > 0) {
+        be.value = !0, Ke();
         return;
       }
-      we.value = !1, bt(r.page), await xt(r.page);
-    }), Nt(() => {
-      re?.disconnect(), N && (clearTimeout(N), N = null), E && (clearTimeout(E), E = null), L(), H();
-    }), ne(
-      () => r.page,
+      be.value = !1, Mt(a.page), await St(a.page);
+    }), Vt(() => {
+      re?.disconnect(), T && (clearTimeout(T), T = null), I && (clearTimeout(I), I = null), z(), A();
+    }), Z(
+      () => a.page,
       async (e) => {
-        if (we.value) {
-          z.value = e;
+        if (be.value) {
+          L.value = e;
           return;
         }
-        bt(e), await xt(e);
+        Mt(e), await St(e);
       }
-    ), ne(
-      () => r.restoredPages,
+    ), Z(
+      () => a.restoredPages,
       (e) => {
-        e && (we.value = !0, Ue(e));
+        e && (be.value = !0, Ke(e));
       }
-    ), ne(
-      Q,
+    ), Z(
+      ne,
       () => {
         const e = c.value;
-        e && (S.value = Pe(e));
+        e && (F.value = Be(e));
       },
       { immediate: !1 }
     );
-    const We = M(() => In(S.value, r.itemWidth)), Fe = M(
-      () => Fn(S.value, We.value, r.itemWidth, Q.value)
+    const Je = k(() => Pn(F.value, a.itemWidth)), Te = k(
+      () => Tn(F.value, Je.value, a.itemWidth, ne.value)
     );
-    ne(
-      [We, Fe, Q, _e, j, U],
+    Z(
+      [Je, Te, ne, Ee, W, K],
       () => {
-        ht();
+        yt();
       },
       { immediate: !0 }
-    ), ne(
+    ), Z(
       // Performance note: this component targets very large arrays (e.g. 10k items).
       // Avoid deep watchers over items; rebuild layout only when the list structure
       // changes (new array reference or length change). This keeps metadata-only
       // updates (e.g. reactions) cheap.
-      () => [h.value, h.value.length],
-      () => ht(),
+      () => [m.value, m.value.length],
+      () => yt(),
       { immediate: !0 }
     );
-    const an = M(() => [
+    const un = k(() => [
       "mt-8 flex min-h-0 flex-1 flex-col rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur",
-      w.class
+      b.class
     ]);
-    return (e, n) => (I(), F("section", fn(ae.value, { class: an.value }), [
-      A("div", Bn, [
-        dn(e.$slots, "default")
+    return (e, n) => (_(), P("section", mn(te.value, { class: un.value }), [
+      N("div", Nn, [
+        hn(e.$slots, "default")
       ]),
-      A("div", {
+      N("div", {
         ref_key: "scrollViewportRef",
         ref: c,
         "data-testid": "items-scroll-container",
         class: "mt-4 min-h-0 flex-1 overflow-auto",
-        style: Y({ paddingRight: Q.value + "px" }),
-        onScroll: en
+        style: U({ paddingRight: ne.value + "px" }),
+        onScroll: on
       }, [
-        ue.value ? (I(), F("div", Rn, n[0] || (n[0] = [
-          A("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
-            A("svg", {
+        ce.value ? (_(), P("div", Hn, n[0] || (n[0] = [
+          N("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
+            N("svg", {
               class: "h-5 w-5 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
               "aria-hidden": "true"
             }, [
-              A("circle", {
+              N("circle", {
                 class: "opacity-25",
                 cx: "12",
                 cy: "12",
@@ -1258,135 +1301,135 @@ const Bn = { class: "hidden" }, Rn = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              A("path", {
+              N("path", {
                 class: "opacity-75",
                 fill: "currentColor",
                 d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
               })
             ]),
-            A("span", null, "Loading…")
+            N("span", null, "Loading…")
           ], -1)
-        ]))) : pe.value ? (I(), F("p", An, "Error: " + Ke(pe.value), 1)) : (I(), F("div", {
+        ]))) : ye.value ? (_(), P("p", Ln, "Error: " + et(ye.value), 1)) : (_(), P("div", {
           key: 2,
           class: "relative",
-          style: Y({ height: Zt.value + "px" })
+          style: U({ height: nn.value + "px" })
         }, [
-          (I(!0), F(Ft, null, _t(je.value, (t) => (I(), F("article", {
-            key: h.value[t].id,
+          (_(!0), P(Tt, null, Et(Ge.value, (t) => (_(), P("article", {
+            key: m.value[t].id,
             "data-testid": "item-card",
             class: "absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",
-            style: Y({
-              width: Fe.value + "px",
-              transition: Ot(h.value[t].id),
-              transitionDelay: Dt(h.value[t].id),
-              transform: Yt(t)
+            style: U({
+              width: Te.value + "px",
+              transition: jt(m.value[t].id),
+              transitionDelay: qt(m.value[t].id),
+              transform: Ut(t)
             })
           }, [
-            Te.value || j.value > 0 ? (I(), F("div", {
+            J.value || W.value > 0 ? (_(), P("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: Y(Ze.value)
+              style: U(nt.value)
             }, [
-              G(oe(b), {
-                "slot-fn": xe.value,
-                "slot-props": { item: h.value[t], remove: () => Ve(h.value[t]) }
+              Q(ae(y), {
+                "slot-fn": ke.value,
+                "slot-props": { item: m.value[t], remove: () => Oe(m.value[t]) }
               }, null, 8, ["slot-fn", "slot-props"])
-            ], 4)) : K("", !0),
-            A("div", {
+            ], 4)) : ee("", !0),
+            N("div", {
               class: "group relative",
-              onMouseenter: (o) => g(h.value[t].id),
-              onMouseleave: (o) => p(h.value[t].id)
+              onMouseenter: (l) => g(m.value[t].id),
+              onMouseleave: (l) => w(m.value[t].id)
             }, [
-              G(Tt, {
-                item: h.value[t],
-                remove: () => Ve(h.value[t]),
-                "loader-slot-fn": he.value,
-                "error-slot-fn": W.value,
-                hovered: d.value === h.value[t].id,
-                onSuccess: D,
-                onError: le
+              Q(Rt, {
+                item: m.value[t],
+                remove: () => Oe(m.value[t]),
+                "loader-slot-fn": Me.value,
+                "error-slot-fn": x.value,
+                hovered: u.value === m.value[t].id,
+                onSuccess: H,
+                onError: q
               }, null, 8, ["item", "remove", "loader-slot-fn", "error-slot-fn", "hovered"]),
-              Qe.value ? (I(), F("div", Nn, [
-                G(oe(b), {
-                  "slot-fn": x.value,
-                  "slot-props": { item: h.value[t], remove: () => Ve(h.value[t]) }
+              Se.value ? (_(), P("div", zn, [
+                Q(ae(y), {
+                  "slot-fn": s.value,
+                  "slot-props": { item: m.value[t], remove: () => Oe(m.value[t]) }
                 }, null, 8, ["slot-fn", "slot-props"])
-              ])) : K("", !0)
-            ], 40, Cn),
-            Me.value || U.value > 0 ? (I(), F("div", {
+              ])) : ee("", !0)
+            ], 40, Vn),
+            Re.value || K.value > 0 ? (_(), P("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: Y(et.value)
+              style: U(ot.value)
             }, [
-              G(oe(b), {
-                "slot-fn": s.value,
-                "slot-props": { item: h.value[t], remove: () => Ve(h.value[t]) }
+              Q(ae(y), {
+                "slot-fn": se.value,
+                "slot-props": { item: m.value[t], remove: () => Oe(m.value[t]) }
               }, null, 8, ["slot-fn", "slot-props"])
-            ], 4)) : K("", !0)
+            ], 4)) : ee("", !0)
           ], 4))), 128)),
-          (I(!0), F(Ft, null, _t(ee.value, (t) => (I(), F("article", {
+          (_(!0), P(Tt, null, Et(le.value, (t) => (_(), P("article", {
             key: t.id + ":leaving",
             "data-testid": "item-card-leaving",
             class: "pointer-events-none absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",
-            style: Y({
+            style: U({
               width: t.width + "px",
-              transition: "transform " + Ct + "ms ease-out",
+              transition: "transform " + Lt + "ms ease-out",
               transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + t.toY + "px,0)"
             })
           }, [
-            Te.value || j.value > 0 ? (I(), F("div", {
+            J.value || W.value > 0 ? (_(), P("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: Y(Ze.value)
+              style: U(nt.value)
             }, [
-              G(oe(b), {
-                "slot-fn": xe.value,
+              Q(ae(y), {
+                "slot-fn": ke.value,
                 "slot-props": { item: t.item, remove: () => {
                 } }
               }, null, 8, ["slot-fn", "slot-props"])
-            ], 4)) : K("", !0),
-            A("div", Hn, [
-              G(Tt, {
+            ], 4)) : ee("", !0),
+            N("div", $n, [
+              Q(Rt, {
                 item: t.item,
                 remove: () => {
                 },
-                "loader-slot-fn": he.value,
-                "error-slot-fn": W.value,
+                "loader-slot-fn": Me.value,
+                "error-slot-fn": x.value,
                 hovered: !1
               }, null, 8, ["item", "loader-slot-fn", "error-slot-fn"]),
-              Qe.value ? (I(), F("div", Vn, [
-                G(oe(b), {
-                  "slot-fn": x.value,
+              Se.value ? (_(), P("div", Dn, [
+                Q(ae(y), {
+                  "slot-fn": s.value,
                   "slot-props": { item: t.item, remove: () => {
                   } }
                 }, null, 8, ["slot-fn", "slot-props"])
-              ])) : K("", !0)
+              ])) : ee("", !0)
             ]),
-            Me.value || U.value > 0 ? (I(), F("div", {
+            Re.value || K.value > 0 ? (_(), P("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: Y(et.value)
+              style: U(ot.value)
             }, [
-              G(oe(b), {
-                "slot-fn": s.value,
+              Q(ae(y), {
+                "slot-fn": se.value,
                 "slot-props": { item: t.item, remove: () => {
                 } }
               }, null, 8, ["slot-fn", "slot-props"])
-            ], 4)) : K("", !0)
+            ], 4)) : ee("", !0)
           ], 4))), 128))
         ], 4)),
-        A("div", zn, [
-          ce.value ? (I(), F("span", Ln, n[1] || (n[1] = [
-            A("svg", {
+        N("div", On, [
+          fe.value ? (_(), P("span", Yn, n[1] || (n[1] = [
+            N("svg", {
               class: "h-4 w-4 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
               "aria-hidden": "true"
             }, [
-              A("circle", {
+              N("circle", {
                 class: "opacity-25",
                 cx: "12",
                 cy: "12",
@@ -1395,50 +1438,50 @@ const Bn = { class: "hidden" }, Rn = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              A("path", {
+              N("path", {
                 class: "opacity-75",
                 fill: "currentColor",
                 d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
               })
             ], -1),
-            A("span", null, "Loading more…", -1)
-          ]))) : z.value == null ? (I(), F("span", $n, "End of list")) : (I(), F("span", Dn, "Scroll to load page " + Ke(z.value), 1))
+            N("span", null, "Loading more…", -1)
+          ]))) : L.value == null ? (_(), P("span", qn, "End of list")) : (_(), P("span", Xn, "Scroll to load page " + et(L.value), 1))
         ])
       ], 36)
     ], 16));
   }
-}), Un = be({
+}), Jn = xe({
   name: "MasonryItem",
-  setup(l, { slots: k, attrs: i }) {
-    const r = vn(Vt, null);
-    if (!r)
+  setup(o, { slots: M, attrs: i }) {
+    const a = gn($t, null);
+    if (!a)
       return () => null;
-    const f = i.onPreloaded, w = i.onFailed, b = k.overlay, u = k.default;
-    return r({
-      header: k.header,
-      loader: k.loader,
-      overlay: b ?? u,
-      error: k.error,
-      footer: k.footer,
-      onPreloaded: typeof f == "function" ? f : Array.isArray(f) ? (d) => {
-        for (const g of f)
-          typeof g == "function" && g(d);
+    const d = i.onPreloaded, b = i.onFailed, y = M.overlay, h = M.default;
+    return a({
+      header: M.header,
+      loader: M.loader,
+      overlay: y ?? h,
+      error: M.error,
+      footer: M.footer,
+      onPreloaded: typeof d == "function" ? d : Array.isArray(d) ? (u) => {
+        for (const g of d)
+          typeof g == "function" && g(u);
       } : void 0,
-      onFailed: typeof w == "function" ? w : Array.isArray(w) ? (d) => {
-        for (const g of w)
-          typeof g == "function" && g(d);
+      onFailed: typeof b == "function" ? b : Array.isArray(b) ? (u) => {
+        for (const g of b)
+          typeof g == "function" && g(u);
       } : void 0
     }), () => null;
   }
-}), Gn = {
-  install(l) {
-    l.component("Masonry", jn), l.component("MasonryItem", Un), l.component("MasonryVideoControls", Ht);
+}), Zn = {
+  install(o) {
+    o.component("Masonry", Kn), o.component("MasonryItem", Jn), o.component("MasonryVideoControls", zt);
   }
 };
 export {
-  jn as Masonry,
-  Un as MasonryItem,
-  Ht as MasonryVideoControls,
-  Gn as VibePlugin,
-  mn as masonryDefaults
+  Kn as Masonry,
+  Jn as MasonryItem,
+  zt as MasonryVideoControls,
+  Zn as VibePlugin,
+  pn as masonryDefaults
 };