@wyxos/vibe 2.1.17 → 2.2.1

package/lib/index.js

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