@wyxos/vibe 2.0.2 → 2.1.0

package/lib/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as ut, mergeDefaults as ct, useAttrs as ft, useSlots as dt, computed as B, ref as g, shallowRef as vt, watch as G, onMounted as ht, onUnmounted as gt, createElementBlock as x, openBlock as k, mergeProps as mt, createElementVNode as T, normalizeStyle as N, toDisplayString as Ve, Fragment as Ye, renderList as De, createCommentVNode as oe, renderSlot as ie, nextTick as Oe } from "vue";
-const pt = {
+import { defineComponent as it, ref as h, computed as T, onMounted as ut, onUnmounted as ct, createElementBlock as S, openBlock as P, normalizeStyle as $, createCommentVNode as te, createElementVNode as R, normalizeClass as Je, mergeDefaults as Tt, useAttrs as Rt, useSlots as At, shallowRef as Et, watch as W, mergeProps as _t, toDisplayString as Qe, Fragment as Ze, renderList as et, createVNode as tt, renderSlot as ve, nextTick as nt } from "vue";
+const Nt = {
   mode: "default",
   pageSize: 20,
   backfillRequestDelayMs: 2e3,
@@ -11,56 +11,174 @@ const pt = {
   headerHeight: 0,
   footerHeight: 0,
   overscanPx: 600
-};
-function yt(n, y) {
-  return !n || n <= 0 || !y || y <= 0 ? 1 : Math.max(1, Math.floor(n / y));
+}, Ct = {
+  key: 0,
+  "data-testid": "masonry-loader-spinner",
+  class: "absolute inset-0 flex items-center justify-center"
+}, Ht = {
+  key: 1,
+  "data-testid": "masonry-loader-error",
+  class: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-3"
+}, Lt = ["src", "width", "height", "alt"], zt = ["poster"], qt = ["src"], at = /* @__PURE__ */ it({
+  __name: "MasonryLoader",
+  props: {
+    item: {}
+  },
+  emits: ["success", "error"],
+  setup(o, { emit: k }) {
+    const u = o, l = k, r = h(null), p = h(!1), d = h(!1), i = h(!1), g = h(0), b = T(() => {
+      const x = u.item?.width, M = u.item?.height;
+      return { aspectRatio: `${x} / ${M}` };
+    }), I = T(() => u.item?.type === "image");
+    let F = null;
+    function A() {
+      p.value || (p.value = !0, d.value = !1, i.value = !1);
+    }
+    ut(() => {
+      if (typeof IntersectionObserver > "u") {
+        A();
+        return;
+      }
+      F = new IntersectionObserver(
+        (x) => {
+          for (const M of x)
+            if (M.isIntersecting && !((M.intersectionRatio ?? 0) < 0.5)) {
+              A(), F?.disconnect(), F = null;
+              return;
+            }
+        },
+        { threshold: [0, 0.5, 1] }
+      ), r.value && F.observe(r.value);
+    }), ct(() => {
+      F?.disconnect(), F = null;
+    });
+    function E() {
+      d.value || (d.value = !0, i.value = !1, l("success", u.item));
+    }
+    function B(x) {
+      i.value || (d.value = !1, i.value = !0, l("error", { item: u.item, error: x }));
+    }
+    function H() {
+      p.value && (d.value = !1, i.value = !1, g.value += 1);
+    }
+    return (x, M) => (P(), S("div", {
+      ref_key: "rootEl",
+      ref: r,
+      class: "relative bg-slate-100",
+      style: $(b.value)
+    }, [
+      p.value && !d.value && !i.value ? (P(), S("div", Ct, M[2] || (M[2] = [
+        R("svg", {
+          class: "h-5 w-5 animate-spin text-slate-500",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        }, [
+          R("circle", {
+            class: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "4"
+          }),
+          R("path", {
+            class: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
+          })
+        ], -1)
+      ]))) : p.value && i.value ? (P(), S("div", Ht, [
+        M[3] || (M[3] = R("p", { class: "text-center text-xs font-medium text-red-700" }, "Failed to load", -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: H
+        }, " Retry ")
+      ])) : te("", !0),
+      p.value && I.value && !i.value ? (P(), S("img", {
+        key: u.item.id + ":img:" + g.value,
+        class: Je([
+          "h-full w-full object-cover transition-opacity duration-300",
+          d.value ? "opacity-100" : "opacity-0"
+        ]),
+        src: u.item.preview,
+        width: u.item.width,
+        height: u.item.height,
+        loading: "lazy",
+        alt: u.item.id,
+        onLoad: E,
+        onError: M[0] || (M[0] = (L) => B(L))
+      }, null, 42, Lt)) : p.value && !i.value ? (P(), S("video", {
+        key: u.item.id + ":vid:" + g.value,
+        class: Je([
+          "h-full w-full object-cover transition-opacity duration-300",
+          d.value ? "opacity-100" : "opacity-0"
+        ]),
+        poster: u.item.preview,
+        controls: "",
+        preload: "metadata",
+        onLoadedmetadata: E,
+        onError: M[1] || (M[1] = (L) => B(L))
+      }, [
+        R("source", {
+          src: u.item.original,
+          type: "video/mp4"
+        }, null, 8, qt)
+      ], 42, zt)) : te("", !0)
+    ], 4));
+  }
+});
+function $t(o, k) {
+  return !o || o <= 0 || !k || k <= 0 ? 1 : Math.max(1, Math.floor(o / k));
 }
-function wt(n, y, S, l = 0) {
-  if (!n || n <= 0 || !y || y <= 0) return S;
-  const r = typeof l == "number" && l > 0 ? l : 0, M = Math.max(0, y - 1) * r, w = n - M;
-  return !w || w <= 0 ? S : w / y;
+function Ot(o, k, u, l = 0) {
+  if (!o || o <= 0 || !k || k <= 0) return u;
+  const r = typeof l == "number" && l > 0 ? l : 0, p = Math.max(0, k - 1) * r, d = o - p;
+  return !d || d <= 0 ? u : d / k;
 }
-function bt(n, y) {
-  const S = n?.width, l = n?.height;
-  return typeof S == "number" && typeof l == "number" && S > 0 && l > 0 ? l / S * y : y;
+function Vt(o, k) {
+  const u = o?.width, l = o?.height;
+  return typeof u == "number" && typeof l == "number" && u > 0 && l > 0 ? l / u * k : k;
 }
-function Ue(n) {
-  return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
+function ft(o) {
+  return Number.isFinite(o) && o > 0 ? Math.floor(o) : 1;
 }
-function we(n) {
-  return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
+function ke(o) {
+  return Number.isFinite(o) && o > 0 ? Math.floor(o) : 0;
 }
-function xt(n) {
-  async function y(l) {
-    const r = we(l);
+function Yt(o) {
+  async function k(l) {
+    const r = ke(l);
     if (r <= 0) return;
-    n.stats.value = {
-      ...n.stats.value,
+    o.stats.value = {
+      ...o.stats.value,
       cooldownMsTotal: r,
       cooldownMsRemaining: r
     };
-    const M = Date.now(), w = 100;
-    await new Promise((m) => {
-      const h = setInterval(() => {
-        const p = Date.now() - M, b = Math.max(0, r - p);
-        n.stats.value = {
-          ...n.stats.value,
+    const p = Date.now(), d = 100;
+    await new Promise((i) => {
+      const g = setInterval(() => {
+        const b = Date.now() - p, I = Math.max(0, r - b);
+        o.stats.value = {
+          ...o.stats.value,
           cooldownMsTotal: r,
-          cooldownMsRemaining: b
-        }, b <= 0 && (clearInterval(h), m());
-      }, w);
+          cooldownMsRemaining: I
+        }, I <= 0 && (clearInterval(g), i());
+      }, d);
     });
   }
-  async function S(l) {
-    const r = Ue(n.getPageSize()), M = n.isEnabled(), w = we(n.getRequestDelayMs()), m = [];
-    let h = 0;
-    n.buffer.value.length && (h = n.buffer.value.length, m.push(...n.buffer.value), n.buffer.value = []), n.stats.value = {
-      ...n.stats.value,
-      enabled: M,
+  async function u(l) {
+    const r = ft(o.getPageSize()), p = o.isEnabled(), d = ke(o.getRequestDelayMs()), i = [];
+    let g = 0;
+    o.buffer.value.length && (g = o.buffer.value.length, i.push(...o.buffer.value), o.buffer.value = []), o.stats.value = {
+      ...o.stats.value,
+      enabled: p,
       isBackfillActive: !1,
       isRequestInFlight: !1,
       requestPage: null,
-      cooldownMsTotal: w,
+      cooldownMsTotal: d,
       cooldownMsRemaining: 0,
       progress: {
         collected: 0,
@@ -69,58 +187,58 @@ function xt(n) {
       pageSize: r,
       bufferSize: 0
     };
-    const p = [];
-    let b = l, A = 0, _ = !1;
-    for (; m.length < r && b != null; ) {
-      const z = b;
-      _ && (n.stats.value = {
-        ...n.stats.value,
-        enabled: M,
+    const b = [];
+    let I = l, F = 0, A = !1;
+    for (; i.length < r && I != null; ) {
+      const H = I;
+      A && (o.stats.value = {
+        ...o.stats.value,
+        enabled: p,
         isBackfillActive: !0,
         isRequestInFlight: !0,
-        requestPage: z,
+        requestPage: H,
         progress: {
-          collected: Math.min(m.length, r),
+          collected: Math.min(i.length, r),
           target: r
         },
-        cooldownMsTotal: w,
+        cooldownMsTotal: d,
         cooldownMsRemaining: 0,
         pageSize: r
       });
-      const I = await n.getContent(z);
-      p.push(z), _ && (n.stats.value = {
-        ...n.stats.value,
-        enabled: M,
+      const x = await o.getContent(H);
+      b.push(H), A && (o.stats.value = {
+        ...o.stats.value,
+        enabled: p,
         isBackfillActive: !0,
         isRequestInFlight: !1,
         requestPage: null
-      }), A += I.items.length, n.markEnterFromLeft(I.items), m.push(...I.items), b = I.nextPage, !_ && m.length < r && b != null ? (_ = !0, n.stats.value = {
-        ...n.stats.value,
-        enabled: M,
+      }), F += x.items.length, o.markEnterFromLeft(x.items), i.push(...x.items), I = x.nextPage, !A && i.length < r && I != null ? (A = !0, o.stats.value = {
+        ...o.stats.value,
+        enabled: p,
         isBackfillActive: !0,
         isRequestInFlight: !1,
         requestPage: null,
         progress: {
-          collected: Math.min(m.length, r),
+          collected: Math.min(i.length, r),
           target: r
         },
-        cooldownMsTotal: w,
+        cooldownMsTotal: d,
         cooldownMsRemaining: 0,
         pageSize: r
-      }) : _ && (n.stats.value = {
-        ...n.stats.value,
-        enabled: M,
+      }) : A && (o.stats.value = {
+        ...o.stats.value,
+        enabled: p,
         isBackfillActive: !0,
         progress: {
-          collected: Math.min(m.length, r),
+          collected: Math.min(i.length, r),
           target: r
         }
-      }), _ && m.length < r && b != null && await y(w);
+      }), A && i.length < r && I != null && await k(d);
     }
-    const H = m.slice(0, r), F = m.slice(r);
-    return n.buffer.value = F, n.stats.value = {
-      ...n.stats.value,
-      enabled: M,
+    const E = i.slice(0, r), B = i.slice(r);
+    return o.buffer.value = B, o.stats.value = {
+      ...o.stats.value,
+      enabled: p,
       isBackfillActive: !1,
       isRequestInFlight: !1,
       requestPage: null,
@@ -128,78 +246,79 @@ function xt(n) {
         collected: 0,
         target: 0
       },
-      cooldownMsTotal: w,
+      cooldownMsTotal: d,
       cooldownMsRemaining: 0,
       pageSize: r,
-      bufferSize: F.length,
+      bufferSize: B.length,
       lastBatch: {
         startPage: l,
-        pages: p,
-        usedFromBuffer: h,
-        fetchedFromNetwork: A,
-        collectedTotal: m.length,
-        emitted: H.length,
-        carried: F.length
+        pages: b,
+        usedFromBuffer: g,
+        fetchedFromNetwork: F,
+        collectedTotal: i.length,
+        emitted: E.length,
+        carried: B.length
       },
       totals: {
-        pagesFetched: n.stats.value.totals.pagesFetched + p.length,
-        itemsFetchedFromNetwork: n.stats.value.totals.itemsFetchedFromNetwork + A
+        pagesFetched: o.stats.value.totals.pagesFetched + b.length,
+        itemsFetchedFromNetwork: o.stats.value.totals.itemsFetchedFromNetwork + F
       }
-    }, { batchItems: H, pages: p, nextPage: b };
+    }, { batchItems: E, pages: b, nextPage: I };
   }
-  return { loadBackfillBatch: S };
+  return { loadBackfillBatch: u };
 }
-function kt(n) {
-  const y = n.columnCount, S = n.columnWidth, l = n.gapX, r = n.gapY, M = n.headerHeight, w = n.footerHeight, m = n.bucketPx, h = Array.from({ length: y }, () => 0), p = new Array(n.items.length), b = new Array(n.items.length), A = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
-  let H = 0;
-  for (let F = 0; F < n.items.length; F += 1) {
-    const z = n.items[F];
-    z?.id && _.set(z.id, F);
-    let I = 0;
-    for (let P = 1; P < h.length; P += 1)
-      h[P] < h[I] && (I = P);
-    const q = I * (S + l), E = h[I], L = bt(z, S) + M + w;
-    p[F] = { x: q, y: E }, b[F] = L, h[I] = E + L + r, H = Math.max(H, E + L);
-    const te = Math.floor(E / m), ne = Math.floor((E + L) / m);
-    for (let P = te; P <= ne; P += 1) {
-      const $ = A.get(P);
-      $ ? $.push(F) : A.set(P, [F]);
+function Dt(o) {
+  const k = o.columnCount, u = o.columnWidth, l = o.gapX, r = o.gapY, p = o.headerHeight, d = o.footerHeight, i = o.bucketPx, g = Array.from({ length: k }, () => 0), b = new Array(o.items.length), I = new Array(o.items.length), F = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map();
+  let E = 0;
+  for (let B = 0; B < o.items.length; B += 1) {
+    const H = o.items[B];
+    H?.id && A.set(H.id, B);
+    let x = 0;
+    for (let _ = 1; _ < g.length; _ += 1)
+      g[_] < g[x] && (x = _);
+    const M = x * (u + l), L = g[x], Y = Vt(H, u) + p + d;
+    b[B] = { x: M, y: L }, I[B] = Y, g[x] = L + Y + r, E = Math.max(E, L + Y);
+    const re = Math.floor(L / i), ie = Math.floor((L + Y) / i);
+    for (let _ = re; _ <= ie; _ += 1) {
+      const G = F.get(_);
+      G ? G.push(B) : F.set(_, [B]);
     }
   }
-  return { positions: p, heights: b, buckets: A, contentHeight: H, indexById: _ };
+  return { positions: b, heights: I, buckets: F, contentHeight: E, indexById: A };
 }
-function Mt(n) {
-  const y = n.itemCount;
-  if (!y) return [];
-  if (n.viewportHeight <= 0) return Array.from({ length: y }, (h, p) => p);
-  const S = Math.max(0, n.scrollTop - n.overscanPx), l = n.scrollTop + n.viewportHeight + n.overscanPx, r = Math.floor(S / n.bucketPx), M = Math.floor(l / n.bucketPx), w = /* @__PURE__ */ new Set();
-  for (let h = r; h <= M; h += 1) {
-    const p = n.buckets.get(h);
-    if (p)
-      for (const b of p) w.add(b);
+function Xt(o) {
+  const k = o.itemCount;
+  if (!k) return [];
+  if (o.viewportHeight <= 0) return Array.from({ length: k }, (g, b) => b);
+  const u = Math.max(0, o.scrollTop - o.overscanPx), l = o.scrollTop + o.viewportHeight + o.overscanPx, r = Math.floor(u / o.bucketPx), p = Math.floor(l / o.bucketPx), d = /* @__PURE__ */ new Set();
+  for (let g = r; g <= p; g += 1) {
+    const b = o.buckets.get(g);
+    if (b)
+      for (const I of b) d.add(I);
   }
-  const m = Array.from(w);
-  return m.sort((h, p) => h - p), m;
+  const i = Array.from(d);
+  return i.sort((g, b) => g - b), i;
 }
-const It = {
+const jt = {
   key: 0,
   class: "flex h-full items-center justify-center"
-}, St = {
+}, Wt = {
   key: 1,
   class: "text-sm font-medium text-red-700"
-}, Bt = ["src", "width", "height", "alt"], Ft = ["poster"], Pt = ["src"], Tt = ["src", "width", "height", "alt"], _t = ["poster"], Ht = ["src"], Rt = { class: "mt-4 pb-2 text-center text-xs text-slate-600" }, At = {
+}, Gt = { class: "mt-4 pb-2 text-center text-xs text-slate-600" }, Ut = {
   key: 0,
   class: "inline-flex items-center justify-center gap-2"
-}, Ct = { key: 1 }, zt = { key: 2 }, Nt = 200, Xe = 600, $e = 300, je = 600, We = 600, qt = /* @__PURE__ */ ut({
+}, Kt = { key: 1 }, Jt = { key: 2 }, Qt = 200, ot = 600, st = 300, lt = 600, rt = 600, Zt = 5, en = 1e3, tn = /* @__PURE__ */ it({
   inheritAttrs: !1,
   __name: "Masonry",
-  props: /* @__PURE__ */ ct({
+  props: /* @__PURE__ */ Tt({
     getContent: {},
     mode: {},
     pageSize: {},
     backfillRequestDelayMs: {},
     items: {},
     page: {},
+    restoredPagesLoaded: {},
     itemWidth: {},
     prefetchThresholdPx: {},
     gapX: {},
@@ -207,187 +326,234 @@ const It = {
     headerHeight: {},
     footerHeight: {},
     overscanPx: {}
-  }, pt),
+  }, Nt),
   emits: ["update:items"],
-  setup(n, { expose: y, emit: S }) {
-    const l = n, r = S, M = ft(), w = dt(), m = B(() => {
-      const { class: e, ...a } = M;
-      return a;
-    }), h = g(null), p = g(0), b = g(0), A = g(0);
-    let _;
-    const H = B(() => l.gapX), F = B(() => l.gapY);
-    function z(e) {
+  setup(o, { expose: k, emit: u }) {
+    const l = o, r = u, p = Rt(), d = At(), i = T(() => {
+      const { class: e, ...n } = p;
+      return n;
+    }), g = h(null), b = h(0), I = h(0), F = h(0);
+    let A;
+    const E = T(() => l.gapX), B = T(() => l.gapY);
+    function H(e) {
       if (!e) return 0;
-      const a = Math.max(0, H.value);
-      return Math.max(0, e.clientWidth - a);
-    }
-    const I = B(() => l.headerHeight), q = B(() => l.footerHeight), E = B(() => !!w.itemHeader), L = B(() => !!w.itemFooter), te = B(() => {
-      if (I.value > 0) return { height: `${I.value}px` };
-    }), ne = B(() => {
-      if (q.value > 0) return { height: `${q.value}px` };
-    }), P = g([]), $ = g([]), be = g(/* @__PURE__ */ new Map()), xe = g(0), ae = g(/* @__PURE__ */ new Map());
-    function ke(e) {
-      const a = typeof e == "number" && Number.isFinite(e) ? e : 0;
-      return -Math.max(0, a);
-    }
-    const j = g(/* @__PURE__ */ new Set()), K = g(/* @__PURE__ */ new Set()), re = /* @__PURE__ */ new Set(), ue = g(/* @__PURE__ */ new Map()), V = g(/* @__PURE__ */ new Set()), Y = g([]);
-    function Ge(e) {
-      const a = ue.value.get(e);
-      return a || { dx: 0, dy: 0 };
+      const n = Math.max(0, E.value);
+      return Math.max(0, e.clientWidth - n);
+    }
+    const x = T(() => l.headerHeight), M = T(() => l.footerHeight), L = T(() => !!d.itemHeader), Y = T(() => !!d.itemFooter), re = T(() => {
+      if (x.value > 0) return { height: `${x.value}px` };
+    }), ie = T(() => {
+      if (M.value > 0) return { height: `${M.value}px` };
+    }), _ = h([]), G = h([]), Me = h(/* @__PURE__ */ new Map()), Ie = h(0), ue = h(/* @__PURE__ */ new Map());
+    function Se(e) {
+      const n = typeof e == "number" && Number.isFinite(e) ? e : 0;
+      return Ye.value + Math.max(0, n);
     }
-    function Ke(e) {
-      if (K.value.has(e)) return `transform ${je}ms ease-out`;
-      if (V.value.has(e)) return `transform ${$e}ms ease-out`;
+    const D = h(/* @__PURE__ */ new Set()), U = h(/* @__PURE__ */ new Set()), ce = /* @__PURE__ */ new Set(), fe = h(/* @__PURE__ */ new Map()), O = h(/* @__PURE__ */ new Set()), V = h([]);
+    function dt(e) {
+      const n = fe.value.get(e);
+      return n || { dx: 0, dy: 0 };
     }
-    function Je(e) {
-      const t = o.value[e]?.id, s = P.value[e] ?? { x: 0, y: 0 }, i = $.value[e] ?? 0, v = i > 0 ? i : Z.value, d = s.x, c = t && j.value.has(t) ? ke(v) : s.y, f = t ? Ge(t) : { dx: 0, dy: 0 };
-      return `translate3d(${d + f.dx}px,${c + f.dy}px,0)`;
+    function vt(e) {
+      if (U.value.has(e)) return `transform ${lt}ms ease-out`;
+      if (O.value.has(e)) return `transform ${st}ms ease-out`;
     }
-    function W(e) {
+    function mt(e) {
+      const t = c.value[e]?.id, a = _.value[e] ?? { x: 0, y: 0 }, s = G.value[e] ?? 0, f = s > 0 ? s : se.value, v = a.x, y = t && D.value.has(t) ? Se(f) : a.y, w = t ? dt(t) : { dx: 0, dy: 0 };
+      return `translate3d(${v + w.dx}px,${y + w.dy}px,0)`;
+    }
+    function K(e) {
       (typeof requestAnimationFrame == "function" ? requestAnimationFrame : (t) => setTimeout(() => t(0), 0))(() => e());
     }
-    function Qe(e) {
-      W(() => W(e));
+    function ht(e) {
+      K(() => K(e));
+    }
+    const Pe = /* @__PURE__ */ new Set();
+    function Fe(e) {
+      return typeof e == "number" && Number.isFinite(e) && e > 0;
     }
-    function ce(e) {
+    function me(e) {
       if (!Array.isArray(e) || e.length === 0) return;
-      const a = new Set(j.value);
+      const n = new Set(D.value);
       let t = !1;
-      for (const s of e) {
-        const i = s?.id;
-        i && (a.has(i) || (a.add(i), t = !0));
+      for (const a of e) {
+        const s = a?.id;
+        if (s) {
+          if (!Pe.has(s)) {
+            const f = a?.width, v = a?.height;
+            (!Fe(f) || !Fe(v)) && (Pe.add(s), console.warn(
+              `[Masonry] Item "${s}" has invalid dimensions (width=${String(f)}, height=${String(
+                v
+              )}); layout expects { id, width, height }.`
+            ));
+          }
+          n.has(s) || (n.add(s), t = !0);
+        }
       }
-      t && (j.value = a);
+      t && (D.value = n);
     }
-    function Me() {
+    function Be() {
       const e = /* @__PURE__ */ new Map();
-      for (const a of pe.value) {
-        const s = o.value[a]?.id;
-        if (!s) continue;
-        const i = P.value[a];
-        i && e.set(s, { x: i.x, y: i.y });
+      for (const n of xe.value) {
+        const a = c.value[n]?.id;
+        if (!a) continue;
+        const s = _.value[n];
+        s && e.set(a, { x: s.x, y: s.y });
       }
       return e;
     }
-    function Ie(e, a) {
+    function Te(e, n) {
       if (!e.size) return;
-      const t = /* @__PURE__ */ new Map(), s = [];
-      for (const [v, d] of e.entries()) {
-        if (a?.has(v)) continue;
-        const c = ae.value.get(v);
-        if (c == null) continue;
-        const f = P.value[c];
-        if (!f) continue;
-        const u = d.x - f.x, R = d.y - f.y;
-        (u || R) && (t.set(v, { dx: u, dy: R }), s.push(v));
+      const t = /* @__PURE__ */ new Map(), a = [];
+      for (const [f, v] of e.entries()) {
+        if (n?.has(f)) continue;
+        const y = ue.value.get(f);
+        if (y == null) continue;
+        const w = _.value[y];
+        if (!w) continue;
+        const m = v.x - w.x, z = v.y - w.y;
+        (m || z) && (t.set(f, { dx: m, dy: z }), a.push(f));
       }
       if (!t.size) return;
-      ue.value = t;
-      const i = new Set(V.value);
-      for (const v of s) i.delete(v);
-      V.value = i, W(() => {
-        V.value = /* @__PURE__ */ new Set([...V.value, ...s]), W(() => {
-          ue.value = /* @__PURE__ */ new Map();
+      fe.value = t;
+      const s = new Set(O.value);
+      for (const f of a) s.delete(f);
+      O.value = s, K(() => {
+        O.value = /* @__PURE__ */ new Set([...O.value, ...a]), K(() => {
+          fe.value = /* @__PURE__ */ new Map();
         });
       }), setTimeout(() => {
-        const v = new Set(V.value);
-        for (const d of s) v.delete(d);
-        V.value = v;
-      }, $e);
-    }
-    const se = g(!0), J = g(!1), U = g(""), D = g([]), Se = g([]), fe = g([]), C = g(l.page), de = g([]);
-    let ve = 0;
-    function Q(e) {
-      for (const a of e)
-        !a || typeof a != "object" || a.id && a.originalIndex == null && (a.originalIndex = ve, ve += 1);
-    }
-    const O = /* @__PURE__ */ new Map(), X = [];
-    function le(e) {
+        const f = new Set(O.value);
+        for (const v of a) f.delete(v);
+        O.value = f;
+      }, st);
+    }
+    const ne = h(!0), ae = h(!1), J = h("");
+    let N = 0;
+    function Re(e) {
+      return e instanceof Error && e.name === "AbortError";
+    }
+    function Ae() {
+      const e = new Error("aborted");
+      return e.name = "AbortError", e;
+    }
+    function gt(e) {
+      return new Promise((n) => setTimeout(n, e));
+    }
+    async function Ee(e, n) {
+      let t = 0;
+      for (; ; ) {
+        if (n !== N) throw Ae();
+        try {
+          return await l.getContent(e);
+        } catch (a) {
+          if (n !== N) throw Ae();
+          if (t >= Zt) throw a;
+          t += 1, await gt(t * en);
+        }
+      }
+    }
+    const q = h([]), _e = h([]), he = h([]), C = h(l.page), ge = h([]);
+    let Q = null, Z = null, de = 0;
+    function pt(e) {
+      let n = -1;
+      for (const t of e) {
+        const a = t?.originalIndex;
+        oe(a) && a > n && (n = a);
+      }
+      de = n + 1;
+    }
+    function ee(e) {
+      for (const n of e)
+        !n || typeof n != "object" || n.id && n.originalIndex == null && (n.originalIndex = de, de += 1);
+    }
+    const X = /* @__PURE__ */ new Map(), j = [];
+    function oe(e) {
       return typeof e == "number" && Number.isFinite(e);
     }
-    function Ze(e, a) {
-      if (!a.length) return e;
+    function yt(e, n) {
+      if (!n.length) return e;
       const t = /* @__PURE__ */ new Set();
-      for (const d of e) {
-        const c = d?.id;
-        c && t.add(c);
+      for (const v of e) {
+        const y = v?.id;
+        y && t.add(y);
       }
-      const s = [];
-      for (const d of a) {
-        const c = d?.id;
-        c && (t.has(c) || (s.push(d), t.add(c)));
+      const a = [];
+      for (const v of n) {
+        const y = v?.id;
+        y && (t.has(y) || (a.push(v), t.add(y)));
       }
-      if (!s.length) return e;
-      const i = s.slice().sort((d, c) => {
-        const f = le(d.originalIndex) ? d.originalIndex : Number.POSITIVE_INFINITY, u = le(c.originalIndex) ? c.originalIndex : Number.POSITIVE_INFINITY;
-        return f - u;
-      }), v = e.slice();
-      for (const d of i) {
-        const c = d.originalIndex;
-        if (!le(c)) {
-          v.push(d);
+      if (!a.length) return e;
+      const s = a.slice().sort((v, y) => {
+        const w = oe(v.originalIndex) ? v.originalIndex : Number.POSITIVE_INFINITY, m = oe(y.originalIndex) ? y.originalIndex : Number.POSITIVE_INFINITY;
+        return w - m;
+      }), f = e.slice();
+      for (const v of s) {
+        const y = v.originalIndex;
+        if (!oe(y)) {
+          f.push(v);
           continue;
         }
-        let f = 0, u = v.length;
-        for (; f < u; ) {
-          const R = f + u >> 1, ee = v[R]?.originalIndex;
-          (le(ee) ? ee : Number.POSITIVE_INFINITY) <= c ? f = R + 1 : u = R;
+        let w = 0, m = f.length;
+        for (; w < m; ) {
+          const z = w + m >> 1, le = f[z]?.originalIndex;
+          (oe(le) ? le : Number.POSITIVE_INFINITY) <= y ? w = z + 1 : m = z;
         }
-        v.splice(f, 0, d);
+        f.splice(w, 0, v);
       }
-      return v;
+      return f;
     }
-    async function Be(e) {
+    async function Ne(e) {
       if (!e.length) return;
-      ce(e);
-      const a = Me();
-      o.value = Ze(o.value, e), await Oe(), Ie(a);
+      me(e);
+      const n = Be();
+      c.value = yt(c.value, e), await nt(), Te(n);
     }
-    async function Fe(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
+    async function Ce(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(we).filter(Boolean);
       if (!t.length) return;
-      const s = [];
-      for (const i of t) {
-        const v = O.get(i);
-        v && s.push(v);
+      const a = [];
+      for (const s of t) {
+        const f = X.get(s);
+        f && a.push(f);
       }
-      if (s.length) {
-        await Be(s);
-        for (const i of s)
-          i?.id && O.delete(i.id);
+      if (a.length) {
+        await Ne(a);
+        for (const s of a)
+          s?.id && X.delete(s.id);
       }
     }
-    async function Pe() {
-      const e = X.pop();
+    async function He() {
+      const e = j.pop();
       if (!e?.length) return;
-      const a = [];
+      const n = [];
       for (const t of e) {
-        const s = O.get(t);
-        s && a.push(s);
+        const a = X.get(t);
+        a && n.push(a);
       }
-      if (a.length) {
-        await Be(a);
-        for (const t of a)
-          t?.id && O.delete(t.id);
+      if (n.length) {
+        await Ne(n);
+        for (const t of n)
+          t?.id && X.delete(t.id);
       }
     }
-    async function et(e) {
-      return Fe(e);
+    async function wt(e) {
+      return Ce(e);
     }
-    async function tt() {
-      return Pe();
+    async function xt() {
+      return He();
     }
-    function Te(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
+    function Le(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(we).filter(Boolean);
       if (!t.length) return;
-      const s = new Set(t);
-      for (const i of s) O.delete(i);
-      for (let i = X.length - 1; i >= 0; i -= 1) {
-        const d = X[i].filter((c) => !s.has(c));
-        d.length ? X[i] = d : X.splice(i, 1);
+      const a = new Set(t);
+      for (const s of a) X.delete(s);
+      for (let s = j.length - 1; s >= 0; s -= 1) {
+        const v = j[s].filter((y) => !a.has(y));
+        v.length ? j[s] = v : j.splice(s, 1);
       }
     }
-    const he = vt({
+    const pe = Et({
       enabled: !1,
       isBackfillActive: !1,
       isRequestInFlight: !1,
@@ -405,176 +571,187 @@ const It = {
         pagesFetched: 0,
         itemsFetchedFromNetwork: 0
       }
-    }), _e = xt({
-      getContent: (e) => l.getContent(e),
-      markEnterFromLeft: ce,
-      buffer: de,
-      stats: he,
+    }), ze = Yt({
+      getContent: (e) => Ee(e, N),
+      markEnterFromLeft: me,
+      buffer: ge,
+      stats: pe,
       isEnabled: () => l.mode === "backfill",
       getPageSize: () => l.pageSize,
       getRequestDelayMs: () => l.backfillRequestDelayMs
-    }), ge = B(() => l.items !== void 0);
-    G(
+    }), ye = T(() => l.items !== void 0);
+    W(
       () => l.items,
       (e) => {
-        ge.value && (fe.value = Array.isArray(e) ? e : []);
+        ye.value && (he.value = Array.isArray(e) ? e : []);
       },
       { immediate: !0 }
     );
-    const o = B({
+    const c = T({
       get() {
-        return ge.value ? fe.value : Se.value;
+        return ye.value ? he.value : _e.value;
       },
       set(e) {
-        ge.value ? (fe.value = e, r("update:items", e)) : Se.value = e;
+        ye.value ? (he.value = e, r("update:items", e)) : _e.value = e;
       }
     });
-    async function He(e) {
-      const a = await l.getContent(e);
-      return Q(a.items), ce(a.items), { items: a.items, nextPage: a.nextPage };
+    async function qe(e) {
+      const n = await Ee(e, N);
+      return ee(n.items), me(n.items), { items: n.items, nextPage: n.nextPage };
     }
-    function me(e) {
+    function we(e) {
       return e ? typeof e == "string" ? e : e?.id : null;
     }
-    async function Re(e) {
-      const t = (Array.isArray(e) ? e : [e]).map(me).filter(Boolean);
+    async function $e(e) {
+      const t = (Array.isArray(e) ? e : [e]).map(we).filter(Boolean);
       if (!t.length) return;
-      const s = new Set(t), i = [];
-      for (const f of s) {
-        const u = ae.value.get(f);
-        if (u == null) continue;
-        const R = o.value[u];
-        R && (O.set(f, R), i.push(f));
+      const a = new Set(t), s = [];
+      for (const w of a) {
+        const m = ue.value.get(w);
+        if (m == null) continue;
+        const z = c.value[m];
+        z && (X.set(w, z), s.push(w));
       }
-      i.length && X.push(i);
-      const v = Me(), d = Z.value, c = [];
-      for (const f of s) {
-        const u = ae.value.get(f);
-        if (u == null) continue;
-        const R = o.value[u];
-        if (!R) continue;
-        const ee = P.value[u] ?? { x: 0, y: 0 }, Le = $.value[u] ?? d;
-        c.push({
-          id: f,
-          item: R,
-          fromX: ee.x,
-          fromY: ee.y,
-          width: d,
-          height: Le,
+      s.length && j.push(s);
+      const f = Be(), v = se.value, y = [];
+      for (const w of a) {
+        const m = ue.value.get(w);
+        if (m == null) continue;
+        const z = c.value[m];
+        if (!z) continue;
+        const le = _.value[m] ?? { x: 0, y: 0 }, Ke = G.value[m] ?? v;
+        y.push({
+          id: w,
+          item: z,
+          fromX: le.x,
+          fromY: le.y,
+          width: v,
+          height: Ke,
           leaving: !0
         });
       }
-      if (c.length && (Y.value = [...Y.value, ...c]), o.value = o.value.filter((f) => {
-        const u = f?.id;
-        return !u || !s.has(u);
-      }), await Oe(), Ie(v, s), c.length) {
-        const f = new Set(c.map((u) => u.id));
-        W(() => {
-          Y.value = Y.value.map(
-            (u) => f.has(u.id) ? { ...u, leaving: !1 } : u
+      if (y.length && (V.value = [...V.value, ...y]), c.value = c.value.filter((w) => {
+        const m = w?.id;
+        return !m || !a.has(m);
+      }), await nt(), Te(f, a), y.length) {
+        const w = new Set(y.map((m) => m.id));
+        K(() => {
+          V.value = V.value.map(
+            (m) => w.has(m.id) ? { ...m, leaving: !1 } : m
           ), setTimeout(() => {
-            Y.value = Y.value.filter((u) => !f.has(u.id));
-          }, We);
+            V.value = V.value.filter((m) => !w.has(m.id));
+          }, rt);
         });
       }
     }
-    async function Ae(e) {
-      return Re(e);
+    async function Oe(e) {
+      return $e(e);
     }
-    y({
-      remove: Re,
-      restore: et,
-      undo: tt,
-      forget: Te,
+    k({
+      remove: $e,
+      restore: wt,
+      undo: xt,
+      forget: Le,
+      pagesLoaded: q,
+      nextPage: C,
       // Aliases (kept for now; can be removed if you want strictly short API only).
-      restoreRemoved: Fe,
-      undoLastRemoval: Pe,
-      forgetRemoved: Te,
-      backfillStats: he
+      restoreRemoved: Ce,
+      undoLastRemoval: He,
+      forgetRemoved: Le,
+      backfillStats: pe
     });
-    function Ce() {
-      const e = kt({
-        items: o.value,
-        columnCount: ye.value,
-        columnWidth: Z.value,
-        gapX: H.value,
-        gapY: F.value,
-        headerHeight: I.value,
-        footerHeight: q.value,
-        bucketPx: Xe
+    function Ve() {
+      const e = Dt({
+        items: c.value,
+        columnCount: be.value,
+        columnWidth: se.value,
+        gapX: E.value,
+        gapY: B.value,
+        headerHeight: x.value,
+        footerHeight: M.value,
+        bucketPx: ot
       });
-      P.value = e.positions, $.value = e.heights, be.value = e.buckets, xe.value = e.contentHeight, ae.value = e.indexById;
+      _.value = e.positions, G.value = e.heights, Me.value = e.buckets, Ie.value = e.contentHeight, ue.value = e.indexById;
     }
-    const nt = B(() => Math.max(xe.value, b.value) + Nt), pe = B(() => Mt({
-      itemCount: o.value.length,
-      viewportHeight: b.value,
-      scrollTop: A.value,
+    const Ye = T(() => Math.max(Ie.value, I.value) + Qt), xe = T(() => Xt({
+      itemCount: c.value.length,
+      viewportHeight: I.value,
+      scrollTop: F.value,
       overscanPx: l.overscanPx,
-      bucketPx: Xe,
-      buckets: be.value
+      bucketPx: ot,
+      buckets: Me.value
     }));
-    G(
-      pe,
+    W(
+      xe,
       (e) => {
         if (!e?.length) return;
-        const a = [];
+        const n = [];
         for (const t of e) {
-          const s = o.value[t]?.id;
-          s && j.value.has(s) && (re.has(s) || (re.add(s), a.push(s)));
+          const a = c.value[t]?.id;
+          a && D.value.has(a) && (ce.has(a) || (ce.add(a), n.push(a)));
         }
-        a.length && (W(() => {
-          const t = new Set(K.value);
-          for (const s of a) t.add(s);
-          K.value = t;
-        }), Qe(() => {
-          const t = new Set(j.value);
-          for (const s of a) t.delete(s);
-          j.value = t, setTimeout(() => {
-            const s = new Set(K.value);
-            for (const i of a)
-              s.delete(i), re.delete(i);
-            K.value = s;
-          }, je);
+        n.length && (K(() => {
+          const t = new Set(U.value);
+          for (const a of n) t.add(a);
+          U.value = t;
+        }), ht(() => {
+          const t = new Set(D.value);
+          for (const a of n) t.delete(a);
+          D.value = t, setTimeout(() => {
+            const a = new Set(U.value);
+            for (const s of n)
+              a.delete(s), ce.delete(s);
+            U.value = a;
+          }, lt);
         }));
       },
       { flush: "post" }
     );
-    async function at() {
-      if (!(se.value || J.value) && !(l.mode !== "backfill" && C.value == null) && !(l.mode === "backfill" && C.value == null && de.value.length === 0))
+    async function bt() {
+      if (Q) return Q;
+      if (ne.value || ae.value || l.mode !== "backfill" && C.value == null || l.mode === "backfill" && C.value == null && ge.value.length === 0)
+        return;
+      const e = N;
+      let n = null;
+      return n = (async () => {
         try {
-          if (J.value = !0, U.value = "", l.mode === "backfill") {
-            const t = await _e.loadBackfillBatch(C.value);
-            t.pages.length && (D.value = [...D.value, ...t.pages]), Q(t.batchItems), o.value = [...o.value, ...t.batchItems], C.value = t.nextPage;
+          if (ae.value = !0, J.value = "", l.mode === "backfill") {
+            const s = await ze.loadBackfillBatch(C.value);
+            if (e !== N) return;
+            s.pages.length && (q.value = [...q.value, ...s.pages]), ee(s.batchItems), c.value = [...c.value, ...s.batchItems], C.value = s.nextPage;
             return;
           }
-          const e = C.value;
-          if (e == null) return;
-          const a = await He(e);
-          D.value = [...D.value, e], Q(a.items), o.value = [...o.value, ...a.items], C.value = a.nextPage;
-        } catch (e) {
-          U.value = e instanceof Error ? e.message : String(e);
+          const t = C.value;
+          if (t == null) return;
+          const a = await qe(t);
+          if (e !== N) return;
+          q.value = [...q.value, t], ee(a.items), c.value = [...c.value, ...a.items], C.value = a.nextPage;
+        } catch (t) {
+          if (e !== N || Re(t)) return;
+          J.value = t instanceof Error ? t.message : String(t);
         } finally {
-          J.value = !1;
+          e === N && (ae.value = !1), Q === n && (Q = null);
         }
+      })(), Q = n, n;
     }
-    function st() {
-      const e = h.value;
+    function kt() {
+      const e = g.value;
       if (!e) return;
-      A.value = e.scrollTop, b.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= l.prefetchThresholdPx && at();
+      F.value = e.scrollTop, I.value = e.clientHeight, e.scrollHeight - (e.scrollTop + e.clientHeight) <= l.prefetchThresholdPx && bt();
     }
-    function ze() {
-      return h.value;
+    function De() {
+      return g.value;
     }
-    function Ne(e) {
-      p.value = z(e), b.value = e.clientHeight;
+    function Xe(e) {
+      b.value = H(e), I.value = e.clientHeight;
     }
-    function lt() {
-      typeof ResizeObserver > "u" || (_ = new ResizeObserver(() => {
-        const e = ze();
-        e && Ne(e);
+    function Mt() {
+      typeof ResizeObserver > "u" || (A = new ResizeObserver(() => {
+        const e = De();
+        e && Xe(e);
       }));
     }
-    function ot() {
+    function It() {
       return {
         enabled: l.mode === "backfill",
         isBackfillActive: !1,
@@ -585,8 +762,8 @@ const It = {
           target: 0
         },
         cooldownMsRemaining: 0,
-        cooldownMsTotal: we(l.backfillRequestDelayMs),
-        pageSize: Ue(l.pageSize),
+        cooldownMsTotal: ke(l.backfillRequestDelayMs),
+        pageSize: ft(l.pageSize),
         bufferSize: 0,
         lastBatch: null,
         totals: {
@@ -595,84 +772,132 @@ const It = {
         }
       };
     }
-    function qe(e) {
-      ve = 0, O.clear(), X.length = 0, D.value = [], o.value = [], C.value = e, de.value = [], he.value = ot(), se.value = !0, J.value = !1, U.value = "";
-    }
-    async function Ee(e) {
-      try {
-        if (l.mode === "backfill") {
-          const a = await _e.loadBackfillBatch(e);
-          D.value = a.pages.length ? a.pages : [e], Q(a.batchItems), o.value = a.batchItems, C.value = a.nextPage;
-        } else {
-          const a = await He(e);
-          D.value = [e], Q(a.items), o.value = a.items, C.value = a.nextPage;
+    function je() {
+      N += 1, Q = null, Z = null, de = 0, X.clear(), j.length = 0, D.value = /* @__PURE__ */ new Set(), U.value = /* @__PURE__ */ new Set(), ce.clear(), fe.value = /* @__PURE__ */ new Map(), O.value = /* @__PURE__ */ new Set(), V.value = [], q.value = [], C.value = null, ge.value = [], pe.value = It(), ne.value = !0, ae.value = !1, J.value = "";
+    }
+    function We(e) {
+      je(), c.value = [], C.value = e;
+    }
+    function St(e) {
+      const n = Array.isArray(e) ? e : [e], t = [], a = /* @__PURE__ */ new Set();
+      for (const s of n) {
+        if (s == null) continue;
+        const f = typeof s == "string" ? `s:${s}` : `n:${String(s)}`;
+        a.has(f) || (a.add(f), t.push(s));
+      }
+      return t;
+    }
+    function Pt(e) {
+      const n = [];
+      for (const t of e) {
+        if (typeof t == "number" && Number.isFinite(t)) {
+          n.push(t);
+          continue;
+        }
+        if (typeof t == "string") {
+          const a = Number.parseInt(t, 10);
+          Number.isFinite(a) && n.push(a);
         }
-      } catch (a) {
-        U.value = a instanceof Error ? a.message : String(a);
-      } finally {
-        se.value = !1;
       }
+      return n.length ? Math.max(...n) + 1 : null;
+    }
+    function Ge(e) {
+      je();
+      const n = St(e);
+      q.value = n, C.value = Pt(n), ne.value = !1, pt(c.value), ee(c.value);
+    }
+    async function Ue(e) {
+      if (Z) return Z;
+      const n = N;
+      let t = null;
+      return t = (async () => {
+        try {
+          if (l.mode === "backfill") {
+            const a = await ze.loadBackfillBatch(e);
+            if (n !== N) return;
+            q.value = a.pages.length ? a.pages : [e], ee(a.batchItems), c.value = a.batchItems, C.value = a.nextPage;
+          } else {
+            const a = await qe(e);
+            if (n !== N) return;
+            q.value = [e], ee(a.items), c.value = a.items, C.value = a.nextPage;
+          }
+        } catch (a) {
+          if (n !== N || Re(a)) return;
+          J.value = a instanceof Error ? a.message : String(a);
+        } finally {
+          n === N && (ne.value = !1), Z === t && (Z = null);
+        }
+      })(), Z = t, t;
     }
-    function it() {
-      const e = ze();
-      e && (Ne(e), A.value = e.scrollTop, _?.observe(e));
+    function Ft() {
+      const e = De();
+      e && (Xe(e), F.value = e.scrollTop, A?.observe(e));
     }
-    ht(async () => {
-      lt(), it(), qe(l.page), await Ee(l.page);
-    }), gt(() => {
-      _?.disconnect();
-    }), G(
+    ut(async () => {
+      if (Mt(), Ft(), l.restoredPagesLoaded != null) {
+        Ge(l.restoredPagesLoaded);
+        return;
+      }
+      We(l.page), await Ue(l.page);
+    }), ct(() => {
+      A?.disconnect();
+    }), W(
       () => l.page,
       async (e) => {
-        qe(e), await Ee(e);
+        l.restoredPagesLoaded == null && (We(e), await Ue(e));
       }
-    ), G(
-      H,
+    ), W(
+      () => l.restoredPagesLoaded,
+      (e) => {
+        e && Ge(e);
+      }
+    ), W(
+      E,
       () => {
-        const e = h.value;
-        e && (p.value = z(e));
+        const e = g.value;
+        e && (b.value = H(e));
       },
       { immediate: !1 }
     );
-    const ye = B(() => yt(p.value, l.itemWidth)), Z = B(
-      () => wt(p.value, ye.value, l.itemWidth, H.value)
+    const be = T(() => $t(b.value, l.itemWidth)), se = T(
+      () => Ot(b.value, be.value, l.itemWidth, E.value)
     );
-    G(
-      [ye, Z, H, F, I, q],
+    W(
+      [be, se, E, B, x, M],
       () => {
-        Ce();
+        Ve();
       },
       { immediate: !0 }
-    ), G(
+    ), W(
       // 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.
-      () => [o.value, o.value.length],
-      () => Ce(),
+      () => [c.value, c.value.length],
+      () => Ve(),
       { immediate: !0 }
     );
-    const rt = B(() => [
+    const Bt = T(() => [
       "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",
-      M.class
+      p.class
     ]);
-    return (e, a) => (k(), x("section", mt(m.value, { class: rt.value }), [
-      T("div", {
+    return (e, n) => (P(), S("section", _t(i.value, { class: Bt.value }), [
+      R("div", {
         ref_key: "scrollViewportRef",
-        ref: h,
+        ref: g,
         "data-testid": "items-scroll-container",
         class: "mt-4 min-h-0 flex-1 overflow-auto",
-        style: N({ paddingRight: H.value + "px" }),
-        onScroll: st
+        style: $({ paddingRight: E.value + "px" }),
+        onScroll: kt
       }, [
-        se.value ? (k(), x("div", It, a[0] || (a[0] = [
-          T("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
-            T("svg", {
+        ne.value ? (P(), S("div", jt, n[0] || (n[0] = [
+          R("div", { class: "inline-flex items-center gap-3 text-sm text-slate-600" }, [
+            R("svg", {
               class: "h-5 w-5 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
               "aria-hidden": "true"
             }, [
-              T("circle", {
+              R("circle", {
                 class: "opacity-25",
                 cx: "12",
                 cy: "12",
@@ -681,146 +906,102 @@ const It = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              T("path", {
+              R("path", {
                 class: "opacity-75",
                 fill: "currentColor",
                 d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
               })
             ]),
-            T("span", null, "Loading…")
+            R("span", null, "Loading…")
           ], -1)
-        ]))) : U.value ? (k(), x("p", St, "Error: " + Ve(U.value), 1)) : (k(), x("div", {
+        ]))) : J.value ? (P(), S("p", Wt, "Error: " + Qe(J.value), 1)) : (P(), S("div", {
           key: 2,
           class: "relative",
-          style: N({ height: nt.value + "px" })
+          style: $({ height: Ye.value + "px" })
         }, [
-          (k(!0), x(Ye, null, De(pe.value, (t) => (k(), x("article", {
-            key: o.value[t].id,
+          (P(!0), S(Ze, null, et(xe.value, (t) => (P(), S("article", {
+            key: c.value[t].id,
             "data-testid": "item-card",
             class: "absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",
-            style: N({
-              width: Z.value + "px",
-              transition: Ke(o.value[t].id),
-              transform: Je(t)
+            style: $({
+              width: se.value + "px",
+              transition: vt(c.value[t].id),
+              transform: mt(t)
             })
           }, [
-            E.value || I.value > 0 ? (k(), x("div", {
+            L.value || x.value > 0 ? (P(), S("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: N(te.value)
+              style: $(re.value)
             }, [
-              ie(e.$slots, "itemHeader", {
-                item: o.value[t],
-                remove: () => Ae(o.value[t])
+              ve(e.$slots, "itemHeader", {
+                item: c.value[t],
+                remove: () => Oe(c.value[t])
               })
-            ], 4)) : oe("", !0),
-            T("div", {
-              class: "bg-slate-100",
-              style: N({ aspectRatio: o.value[t].width + " / " + o.value[t].height })
-            }, [
-              o.value[t].type === "image" ? (k(), x("img", {
-                key: 0,
-                class: "h-full w-full object-cover",
-                src: o.value[t].preview,
-                width: o.value[t].width,
-                height: o.value[t].height,
-                loading: "lazy",
-                alt: o.value[t].id
-              }, null, 8, Bt)) : (k(), x("video", {
-                key: 1,
-                class: "h-full w-full object-cover",
-                poster: o.value[t].preview,
-                controls: "",
-                preload: "metadata"
-              }, [
-                T("source", {
-                  src: o.value[t].original,
-                  type: "video/mp4"
-                }, null, 8, Pt)
-              ], 8, Ft))
-            ], 4),
-            L.value || q.value > 0 ? (k(), x("div", {
+            ], 4)) : te("", !0),
+            tt(at, {
+              item: c.value[t]
+            }, null, 8, ["item"]),
+            Y.value || M.value > 0 ? (P(), S("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: N(ne.value)
+              style: $(ie.value)
             }, [
-              ie(e.$slots, "itemFooter", {
-                item: o.value[t],
-                remove: () => Ae(o.value[t])
+              ve(e.$slots, "itemFooter", {
+                item: c.value[t],
+                remove: () => Oe(c.value[t])
               })
-            ], 4)) : oe("", !0)
+            ], 4)) : te("", !0)
           ], 4))), 128)),
-          (k(!0), x(Ye, null, De(Y.value, (t) => (k(), x("article", {
+          (P(!0), S(Ze, null, et(V.value, (t) => (P(), S("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: N({
+            style: $({
               width: t.width + "px",
-              transition: "transform " + We + "ms ease-out",
-              transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + ke(t.height) + "px,0)"
+              transition: "transform " + rt + "ms ease-out",
+              transform: t.leaving ? "translate3d(" + t.fromX + "px," + t.fromY + "px,0)" : "translate3d(" + t.fromX + "px," + Se(t.height) + "px,0)"
             })
           }, [
-            E.value || I.value > 0 ? (k(), x("div", {
+            L.value || x.value > 0 ? (P(), S("div", {
               key: 0,
               "data-testid": "item-header-container",
               class: "w-full",
-              style: N(te.value)
+              style: $(re.value)
             }, [
-              ie(e.$slots, "itemHeader", {
+              ve(e.$slots, "itemHeader", {
                 item: t.item,
                 remove: () => {
                 }
               })
-            ], 4)) : oe("", !0),
-            T("div", {
-              class: "bg-slate-100",
-              style: N({ aspectRatio: t.item.width + " / " + t.item.height })
-            }, [
-              t.item.type === "image" ? (k(), x("img", {
-                key: 0,
-                class: "h-full w-full object-cover",
-                src: t.item.preview,
-                width: t.item.width,
-                height: t.item.height,
-                loading: "lazy",
-                alt: t.item.id
-              }, null, 8, Tt)) : (k(), x("video", {
-                key: 1,
-                class: "h-full w-full object-cover",
-                poster: t.item.preview,
-                controls: "",
-                preload: "metadata"
-              }, [
-                T("source", {
-                  src: t.item.original,
-                  type: "video/mp4"
-                }, null, 8, Ht)
-              ], 8, _t))
-            ], 4),
-            L.value || q.value > 0 ? (k(), x("div", {
+            ], 4)) : te("", !0),
+            tt(at, {
+              item: t.item
+            }, null, 8, ["item"]),
+            Y.value || M.value > 0 ? (P(), S("div", {
               key: 1,
               "data-testid": "item-footer-container",
               class: "w-full",
-              style: N(ne.value)
+              style: $(ie.value)
             }, [
-              ie(e.$slots, "itemFooter", {
+              ve(e.$slots, "itemFooter", {
                 item: t.item,
                 remove: () => {
                 }
               })
-            ], 4)) : oe("", !0)
+            ], 4)) : te("", !0)
           ], 4))), 128))
         ], 4)),
-        T("div", Rt, [
-          J.value ? (k(), x("span", At, a[1] || (a[1] = [
-            T("svg", {
+        R("div", Gt, [
+          ae.value ? (P(), S("span", Ut, n[1] || (n[1] = [
+            R("svg", {
               class: "h-4 w-4 animate-spin text-slate-500",
               viewBox: "0 0 24 24",
               "aria-hidden": "true"
             }, [
-              T("circle", {
+              R("circle", {
                 class: "opacity-25",
                 cx: "12",
                 cy: "12",
@@ -829,25 +1010,25 @@ const It = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              T("path", {
+              R("path", {
                 class: "opacity-75",
                 fill: "currentColor",
                 d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"
               })
             ], -1),
-            T("span", null, "Loading more…", -1)
-          ]))) : C.value == null ? (k(), x("span", Ct, "End of list")) : (k(), x("span", zt, "Scroll to load page " + Ve(C.value), 1))
+            R("span", null, "Loading more…", -1)
+          ]))) : C.value == null ? (P(), S("span", Kt, "End of list")) : (P(), S("span", Jt, "Scroll to load page " + Qe(C.value), 1))
         ])
       ], 36)
     ], 16));
   }
-}), Lt = {
-  install(n) {
-    n.component("Masonry", qt);
+}), an = {
+  install(o) {
+    o.component("Masonry", tn);
   }
 };
 export {
-  qt as Masonry,
-  Lt as VibePlugin,
-  pt as masonryDefaults
+  tn as Masonry,
+  an as VibePlugin,
+  Nt as masonryDefaults
 };