@wyxos/vibe 2.1.2 → 2.1.4

package/lib/index.js

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