@wyxos/vibe 2.0.3 → 2.1.0

package/lib/index.js

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