@wyxos/vibe 1.6.4 → 1.6.6

package/README.md

@@ -1,139 +1,188 @@
-# VIBE — Vue Infinite Block Engine
-
-[![npm](https://img.shields.io/npm/v/@wyxos/vibe?color=%2300c58e&label=npm)](https://www.npmjs.com/package/@wyxos/vibe)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Demo](https://img.shields.io/badge/Demo-Live%20Preview-blue?logo=githubpages)](https://wyxos.github.io/vibe/)
-
-A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.
-
-VIBE (Vue Infinite Block Engine) is designed for applications that need to display large datasets in a masonry grid without compromising performance. Unlike other masonry libraries, VIBE leverages virtualization to render only what is visible on the screen, ensuring smooth scrolling even with thousands of items.
-
----
-
-## Features
-
-- **High Performance Virtualization**: Efficiently renders thousands of items by only mounting elements currently in the viewport.
-- **Responsive Masonry Layout**: Automatically adjusts column counts and layout based on screen width and breakpoints.
-- **Infinite Scrolling**: Seamlessly loads more content as the user scrolls, with built-in support for async data fetching.
-- **Dynamic Updates**: Supports adding, removing, and reflowing items with smooth FLIP animations.
-- **Scroll Position Maintenance**: Keeps the user's scroll position stable when new items are loaded or the layout changes.
-- **Customizable Rendering**: Full control over item markup via scoped slots.
-
----
-
-## Installation
-
-```bash
-npm install @wyxos/vibe
-```
-
----
-
-## Usage
-
-```vue
-<script setup>
-  import { ref } from 'vue'
-  import { Masonry } from '@wyxos/vibe'
-
-  const items = ref([])
-
-  const layout = {
-    gutterX: 12,
-    gutterY: 12,
-    sizes: { base: 1, sm: 2, md: 3, lg: 4 }
-  }
-
-  async function getNextPage(page) {
-    const response = await fetch(`/api/items?page=${page}`)
-    const data = await response.json()
-    return {
-      items: data.items,
-      nextPage: page + 1
-    }
-  }
-</script>
-
-<template>
-  <Masonry
-      v-model:items="items"
-      :get-next-page="getNextPage"
-      :layout="layout"
-  >
-    <template #item="{ item, onRemove }">
-      <div class="relative">
-        <img :src="item.src" class="w-full" alt="Masonry item" />
-        <button
-            class="absolute bottom-2 right-2 bg-red-600 text-white text-xs p-1 rounded"
-            @click="onRemove(item)"
-        >
-          Remove
-        </button>
-      </div>
-    </template>
-  </Masonry>
-</template>
-```
-
----
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `items` | `Array` | Yes | Two-way bound item array. Each item must include `width`, `height`, and `id`. |
-| `getNextPage` | `Function(page: Number)` | Yes | Async function to load the next page. Must return `{ items, nextPage }`. |
-| `layout` | `Object` | No | Configuration object for layout, including sizes and gutters. |
-| `loadAtPage` | `Number` | No | The starting page number (default: `1`). |
-
-### Layout Configuration Example
-
-```js
-{
-  gutterX: 10,
-  gutterY: 10,
-  sizes: {
-    base: 1,
-    sm: 2,
-    md: 3,
-    lg: 4,
-    xl: 5,
-    '2xl': 6
-  }
-}
-```
-
----
-
-## Slots
-
-| Slot Name | Props | Description |
-|-----------|-------|-------------|
-| `item` | `{ item, onRemove }` | Scoped slot for custom rendering of each masonry block. |
-
----
-
-## Run Locally
-
-To run the demo project locally:
-
-```bash
-git clone https://github.com/wyxos/vibe
-cd vibe
-npm install
-npm run dev
-```
-
-Visit `http://localhost:5173` to view the demo.
-
----
-
-## Live Demo
-
-[View Live Demo on GitHub Pages](https://wyxos.github.io/vibe/)
-
----
-
-## License
-
-MIT © [@wyxos](https://github.com/wyxos)
+# VIBE — Vue Infinite Block Engine
+
+[![npm](https://img.shields.io/npm/v/@wyxos/vibe?color=%2300c58e&label=npm)](https://www.npmjs.com/package/@wyxos/vibe)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Demo](https://img.shields.io/badge/Demo-Live%20Preview-blue?logo=githubpages)](https://wyxos.github.io/vibe/)
+
+A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.
+
+VIBE (Vue Infinite Block Engine) is designed for applications that need to display large datasets in a masonry grid without compromising performance. Unlike other masonry libraries, VIBE leverages virtualization to render only what is visible on the screen, ensuring smooth scrolling even with thousands of items.
+
+![VIBE Demo](https://raw.githubusercontent.com/wyxos/vibe/main/demo.webp)
+
+---
+
+## Features
+
+- **High Performance Virtualization**: Efficiently renders thousands of items by only mounting elements currently in the viewport.
+- **Responsive Masonry Layout**: Automatically adjusts column counts and layout based on screen width and breakpoints.
+- **Infinite Scrolling**: Seamlessly loads more content as the user scrolls, with built-in support for async data fetching.
+- **Dynamic Updates**: Supports adding, removing, and reflowing items with smooth FLIP animations.
+- **Scroll Position Maintenance**: Keeps the user's scroll position stable when new items are loaded or the layout changes.
+- **Built-in Item Component**: Includes a production-ready `MasonryItem` with image preloading, error handling, and hover effects.
+- **Customizable Rendering**: Full control over item markup via scoped slots.
+
+---
+
+## Installation
+
+```bash
+npm install @wyxos/vibe
+```
+
+---
+
+## Usage
+
+### Basic Usage (Default Item)
+
+By default, VIBE uses the built-in `MasonryItem` component, which handles image loading and provides a clean UI.
+
+```vue
+<script setup>
+  import { ref } from 'vue'
+  import { Masonry } from '@wyxos/vibe'
+
+  const items = ref([])
+  
+  // Layout configuration
+  const layout = {
+    gutterX: 12,
+    gutterY: 12,
+    sizes: { base: 1, sm: 2, md: 3, lg: 4 }
+  }
+
+  async function getNextPage(page) {
+    const response = await fetch(`/api/items?page=${page}`)
+    const data = await response.json()
+    // Items must have a 'src' property for the default MasonryItem
+    return {
+      items: data.items,
+      nextPage: page + 1
+    }
+  }
+</script>
+
+<template>
+  <Masonry
+      v-model:items="items"
+      :get-next-page="getNextPage"
+      :layout="layout"
+  />
+</template>
+```
+
+### Custom Item Rendering
+
+You can fully customize the item rendering using the `#item` slot. You can also import and use `MasonryItem` inside the slot if you want to wrap it or extend it.
+
+```vue
+<script setup>
+  import { Masonry, MasonryItem } from '@wyxos/vibe'
+  // ... setup code ...
+</script>
+
+<template>
+  <Masonry
+      v-model:items="items"
+      :get-next-page="getNextPage"
+      :layout="layout"
+  >
+    <template #item="{ item, remove }">
+      <!-- Custom container -->
+      <div class="custom-card">
+        <!-- You can use the built-in item or your own -->
+        <MasonryItem :item="item" :remove="remove">
+           <!-- Optional: MasonryItem also has a default slot for overlays -->
+           <div class="absolute bottom-0 p-2 text-white">
+             {{ item.title }}
+           </div>
+        </MasonryItem>
+      </div>
+    </template>
+  </Masonry>
+</template>
+```
+
+---
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `items` | `Array` | Yes | Two-way bound item array. Each item must include `width`, `height`, and `id`. |
+| `getNextPage` | `Function(page: Number)` | Yes | Async function to load the next page. Must return `{ items, nextPage }`. |
+| `layout` | `Object` | No | Configuration object for layout, including sizes and gutters. |
+| `loadAtPage` | `Number` | No | The starting page number (default: `1`). |
+| `paginationType` | `String` | No | `'page'` or `'cursor'` (default: `'page'`). |
+| `pageSize` | `Number` | No | Number of items per page, used for backfilling (default: `40`). |
+
+### Layout Configuration Example
+
+```js
+{
+  gutterX: 10,
+  gutterY: 10,
+  sizes: {
+    base: 1,
+    sm: 2,
+    md: 3,
+    lg: 4,
+    xl: 5,
+    '2xl': 6
+  }
+}
+```
+
+---
+
+## MasonryItem Component
+
+The built-in `MasonryItem` component is available for use within the `#item` slot or as a standalone component.
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `item` | `Object` | The item object. Must contain `src` for image loading. |
+| `remove` | `Function` | Optional callback to remove the item. If provided, a remove button is shown. |
+
+### Features
+- **Image Preloading**: Shows a spinner while the image loads.
+- **Error Handling**: Displays an error state if the image fails to load.
+- **Hover Effects**: Includes a subtle zoom and overlay on hover.
+
+---
+
+## Slots
+
+| Slot Name | Props | Description |
+|-----------|-------|-------------|
+| `item` | `{ item, remove }` | Scoped slot for custom rendering of each masonry block. |
+
+---
+
+## Run Locally
+
+To run the demo project locally:
+
+```bash
+git clone https://github.com/wyxos/vibe
+cd vibe
+npm install
+npm run dev
+```
+
+Visit `http://localhost:5173` to view the demo.
+
+---
+
+## Live Demo
+
+[View Live Demo on GitHub Pages](https://wyxos.github.io/vibe/)
+
+---
+
+## License
+
+MIT © [@wyxos](https://github.com/wyxos)

package/lib/index.js

@@ -1,6 +1,6 @@
-import { nextTick as Q, defineComponent as Ee, ref as L, onMounted as Le, watch as He, createElementBlock as q, openBlock as V, renderSlot as Ne, createElementVNode as O, createCommentVNode as oe, withModifiers as je, toDisplayString as de, computed as ie, onUnmounted as ze, normalizeClass as xe, normalizeStyle as Re, createVNode as we, TransitionGroup as Ce, withCtx as _e, Fragment as qe, renderList as Ve, mergeProps as Te, unref as Ge } from "vue";
+import { nextTick as Q, defineComponent as Le, ref as L, onMounted as He, watch as Ne, createElementBlock as q, openBlock as V, renderSlot as $e, createElementVNode as O, createCommentVNode as oe, withModifiers as ze, toDisplayString as de, computed as se, onUnmounted as Re, normalizeClass as we, normalizeStyle as Ce, createVNode as Me, TransitionGroup as _e, withCtx as qe, Fragment as Ve, renderList as Ge, mergeProps as Te, unref as Ue } from "vue";
 let ue = null;
-function Ue() {
+function Xe() {
   if (ue != null) return ue;
   const e = document.createElement("div");
   e.style.visibility = "hidden", e.style.overflow = "scroll", e.style.msOverflowStyle = "scrollbar", e.style.width = "100px", e.style.height = "100px", document.body.appendChild(e);
@@ -9,7 +9,7 @@ function Ue() {
   const l = e.offsetWidth - o.offsetWidth;
   return document.body.removeChild(e), ue = l, l;
 }
-function Xe(e, o, l, i = {}) {
+function Ye(e, o, l, s = {}) {
   const {
     gutterX: h = 0,
     gutterY: v = 0,
@@ -26,7 +26,7 @@ function Xe(e, o, l, i = {}) {
       "2xl": 6
     },
     placement: b = "masonry"
-  } = i;
+  } = s;
   let m = 0, x = 0;
   try {
     if (o && o.nodeType === 1 && typeof window < "u" && window.getComputedStyle) {
@@ -35,19 +35,19 @@ function Xe(e, o, l, i = {}) {
     }
   } catch {
   }
-  const F = (d || 0) + m, _ = (u || 0) + x, H = o.offsetWidth - o.clientWidth, T = H > 0 ? H + 2 : Ue() + 2, P = o.offsetWidth - T - F - _, U = h * (l - 1), S = Math.floor((P - U) / l), M = e.map((w) => {
+  const F = (d || 0) + m, _ = (u || 0) + x, H = o.offsetWidth - o.clientWidth, M = H > 0 ? H + 2 : Xe() + 2, P = o.offsetWidth - M - F - _, U = h * (l - 1), S = Math.floor((P - U) / l), T = e.map((w) => {
     const N = w.width, I = w.height;
     return Math.round(S * I / N) + n + a;
   });
   if (b === "sequential-balanced") {
-    const w = M.length;
+    const w = T.length;
     if (w === 0) return [];
     const N = (p, k, B) => p + (k > 0 ? v : 0) + B;
-    let I = Math.max(...M), D = M.reduce((p, k) => p + k, 0) + v * Math.max(0, w - 1);
+    let I = Math.max(...T), D = T.reduce((p, k) => p + k, 0) + v * Math.max(0, w - 1);
     const Z = (p) => {
       let k = 1, B = 0, z = 0;
       for (let $ = 0; $ < w; $++) {
-        const G = M[$], R = N(B, z, G);
+        const G = T[$], R = N(B, z, G);
         if (R <= p)
           B = R, z++;
         else if (k++, B = G, z = 1, G > p || k > l) return !1;
@@ -61,7 +61,7 @@ function Xe(e, o, l, i = {}) {
     const ee = D, X = new Array(l).fill(0);
     let te = l - 1, Y = 0, J = 0;
     for (let p = w - 1; p >= 0; p--) {
-      const k = M[p], B = p < te;
+      const k = T[p], B = p < te;
       !(N(Y, J, k) <= ee) || B ? (X[te] = p + 1, te--, Y = k, J = 1) : (Y = N(Y, J, k), J++);
     }
     X[0] = 0;
@@ -77,7 +77,7 @@ function Xe(e, o, l, i = {}) {
           left: 0,
           top: 0
         };
-        R.imageHeight = M[$] - (n + a), R.columnHeight = M[$], R.left = z, R.top = ae[p], ae[p] += R.columnHeight + ($ + 1 < B ? v : 0), j.push(R);
+        R.imageHeight = T[$] - (n + a), R.columnHeight = T[$], R.left = z, R.top = ae[p], ae[p] += R.columnHeight + ($ + 1 < B ? v : 0), j.push(R);
       }
     }
     return j;
@@ -96,120 +96,120 @@ function Xe(e, o, l, i = {}) {
   }
   return W;
 }
-var Ye = typeof global == "object" && global && global.Object === Object && global, Je = typeof self == "object" && self && self.Object === Object && self, $e = Ye || Je || Function("return this")(), se = $e.Symbol, Ae = Object.prototype, Ke = Ae.hasOwnProperty, Qe = Ae.toString, re = se ? se.toStringTag : void 0;
-function Ze(e) {
-  var o = Ke.call(e, re), l = e[re];
+var Je = typeof global == "object" && global && global.Object === Object && global, Ke = typeof self == "object" && self && self.Object === Object && self, Ae = Je || Ke || Function("return this")(), ie = Ae.Symbol, We = Object.prototype, Qe = We.hasOwnProperty, Ze = We.toString, re = ie ? ie.toStringTag : void 0;
+function et(e) {
+  var o = Qe.call(e, re), l = e[re];
   try {
     e[re] = void 0;
-    var i = !0;
+    var s = !0;
   } catch {
   }
-  var h = Qe.call(e);
-  return i && (o ? e[re] = l : delete e[re]), h;
+  var h = Ze.call(e);
+  return s && (o ? e[re] = l : delete e[re]), h;
 }
-var et = Object.prototype, tt = et.toString;
-function at(e) {
-  return tt.call(e);
-}
-var nt = "[object Null]", rt = "[object Undefined]", Me = se ? se.toStringTag : void 0;
-function ot(e) {
-  return e == null ? e === void 0 ? rt : nt : Me && Me in Object(e) ? Ze(e) : at(e);
+var tt = Object.prototype, at = tt.toString;
+function nt(e) {
+  return at.call(e);
 }
+var rt = "[object Null]", ot = "[object Undefined]", Ie = ie ? ie.toStringTag : void 0;
 function lt(e) {
+  return e == null ? e === void 0 ? ot : rt : Ie && Ie in Object(e) ? et(e) : nt(e);
+}
+function st(e) {
   return e != null && typeof e == "object";
 }
 var it = "[object Symbol]";
-function st(e) {
-  return typeof e == "symbol" || lt(e) && ot(e) == it;
+function ut(e) {
+  return typeof e == "symbol" || st(e) && lt(e) == it;
 }
-var ut = /\s/;
-function ct(e) {
-  for (var o = e.length; o-- && ut.test(e.charAt(o)); )
+var ct = /\s/;
+function ft(e) {
+  for (var o = e.length; o-- && ct.test(e.charAt(o)); )
     ;
   return o;
 }
-var ft = /^\s+/;
-function dt(e) {
-  return e && e.slice(0, ct(e) + 1).replace(ft, "");
+var dt = /^\s+/;
+function gt(e) {
+  return e && e.slice(0, ft(e) + 1).replace(dt, "");
 }
 function ge(e) {
   var o = typeof e;
   return e != null && (o == "object" || o == "function");
 }
-var Ie = NaN, gt = /^[-+]0x[0-9a-f]+$/i, mt = /^0b[01]+$/i, vt = /^0o[0-7]+$/i, pt = parseInt;
-function Pe(e) {
+var Pe = NaN, mt = /^[-+]0x[0-9a-f]+$/i, vt = /^0b[01]+$/i, pt = /^0o[0-7]+$/i, ht = parseInt;
+function Se(e) {
   if (typeof e == "number")
     return e;
-  if (st(e))
-    return Ie;
+  if (ut(e))
+    return Pe;
   if (ge(e)) {
     var o = typeof e.valueOf == "function" ? e.valueOf() : e;
     e = ge(o) ? o + "" : o;
   }
   if (typeof e != "string")
     return e === 0 ? e : +e;
-  e = dt(e);
-  var l = mt.test(e);
-  return l || vt.test(e) ? pt(e.slice(2), l ? 2 : 8) : gt.test(e) ? Ie : +e;
+  e = gt(e);
+  var l = vt.test(e);
+  return l || pt.test(e) ? ht(e.slice(2), l ? 2 : 8) : mt.test(e) ? Pe : +e;
 }
 var ce = function() {
-  return $e.Date.now();
-}, ht = "Expected a function", yt = Math.max, bt = Math.min;
-function Se(e, o, l) {
-  var i, h, v, a, n, d, u = 0, c = !1, b = !1, m = !0;
+  return Ae.Date.now();
+}, yt = "Expected a function", bt = Math.max, xt = Math.min;
+function ke(e, o, l) {
+  var s, h, v, a, n, d, u = 0, c = !1, b = !1, m = !0;
   if (typeof e != "function")
-    throw new TypeError(ht);
-  o = Pe(o) || 0, ge(l) && (c = !!l.leading, b = "maxWait" in l, v = b ? yt(Pe(l.maxWait) || 0, o) : v, m = "trailing" in l ? !!l.trailing : m);
+    throw new TypeError(yt);
+  o = Se(o) || 0, ge(l) && (c = !!l.leading, b = "maxWait" in l, v = b ? bt(Se(l.maxWait) || 0, o) : v, m = "trailing" in l ? !!l.trailing : m);
   function x(y) {
-    var W = i, w = h;
-    return i = h = void 0, u = y, a = e.apply(w, W), a;
+    var W = s, w = h;
+    return s = h = void 0, u = y, a = e.apply(w, W), a;
   }
   function F(y) {
-    return u = y, n = setTimeout(T, o), c ? x(y) : a;
+    return u = y, n = setTimeout(M, o), c ? x(y) : a;
   }
   function _(y) {
     var W = y - d, w = y - u, N = o - W;
-    return b ? bt(N, v - w) : N;
+    return b ? xt(N, v - w) : N;
   }
   function H(y) {
     var W = y - d, w = y - u;
     return d === void 0 || W >= o || W < 0 || b && w >= v;
   }
-  function T() {
+  function M() {
     var y = ce();
     if (H(y))
       return P(y);
-    n = setTimeout(T, _(y));
+    n = setTimeout(M, _(y));
   }
   function P(y) {
-    return n = void 0, m && i ? x(y) : (i = h = void 0, a);
+    return n = void 0, m && s ? x(y) : (s = h = void 0, a);
   }
   function U() {
-    n !== void 0 && clearTimeout(n), u = 0, i = d = h = n = void 0;
+    n !== void 0 && clearTimeout(n), u = 0, s = d = h = n = void 0;
   }
   function S() {
     return n === void 0 ? a : P(ce());
   }
-  function M() {
+  function T() {
     var y = ce(), W = H(y);
-    if (i = arguments, h = this, d = y, W) {
+    if (s = arguments, h = this, d = y, W) {
       if (n === void 0)
         return F(d);
       if (b)
-        return clearTimeout(n), n = setTimeout(T, o), x(d);
+        return clearTimeout(n), n = setTimeout(M, o), x(d);
     }
-    return n === void 0 && (n = setTimeout(T, o)), a;
+    return n === void 0 && (n = setTimeout(M, o)), a;
   }
-  return M.cancel = U, M.flush = S, M;
+  return T.cancel = U, T.flush = S, T;
 }
 function fe(e) {
   const o = window.innerWidth, l = e.sizes;
   return o >= 1536 && l["2xl"] ? l["2xl"] : o >= 1280 && l.xl ? l.xl : o >= 1024 && l.lg ? l.lg : o >= 768 && l.md ? l.md : o >= 640 && l.sm ? l.sm : l.base;
 }
-function xt(e) {
-  return e.reduce((l, i) => Math.max(l, i.top + i.columnHeight), 0) + 500;
-}
 function wt(e) {
+  return e.reduce((l, s) => Math.max(l, s.top + s.columnHeight), 0) + 500;
+}
+function Mt(e) {
   return {
     transform: `translate3d(${e.left}px, ${e.top}px, 0)`,
     top: "0px",
@@ -220,7 +220,7 @@ function wt(e) {
 }
 function Tt(e, o = 0) {
   return {
-    style: wt(e),
+    style: Mt(e),
     "data-top": e.top,
     "data-left": e.left,
     "data-id": `${e.page}-${e.id}`,
@@ -230,9 +230,9 @@ function Tt(e, o = 0) {
 function me(e, o) {
   if (!e.length || o <= 0)
     return new Array(Math.max(1, o)).fill(0);
-  const i = Array.from(new Set(e.map((a) => a.left))).sort((a, n) => a - n).slice(0, o), h = /* @__PURE__ */ new Map();
-  for (let a = 0; a < i.length; a++) h.set(i[a], a);
-  const v = new Array(i.length).fill(0);
+  const s = Array.from(new Set(e.map((a) => a.left))).sort((a, n) => a - n).slice(0, o), h = /* @__PURE__ */ new Map();
+  for (let a = 0; a < s.length; a++) h.set(s[a], a);
+  const v = new Array(s.length).fill(0);
   for (const a of e) {
     const n = h.get(a.left);
     n != null && (v[n] = Math.max(v[n], a.top + a.columnHeight));
@@ -240,7 +240,7 @@ function me(e, o) {
   for (; v.length < o; ) v.push(0);
   return v;
 }
-function Mt(e, o) {
+function It(e, o) {
   function l(a, n) {
     const d = parseInt(a.dataset.left || "0", 10), u = parseInt(a.dataset.top || "0", 10), c = parseInt(a.dataset.index || "0", 10), b = Math.min(c * 20, 160), m = a.style.getPropertyValue("--masonry-opacity-delay");
     a.style.setProperty("--masonry-opacity-delay", `${b}ms`), requestAnimationFrame(() => {
@@ -251,7 +251,7 @@ function Mt(e, o) {
       a.addEventListener("transitionend", x);
     });
   }
-  function i(a) {
+  function s(a) {
     const n = parseInt(a.dataset.left || "0", 10), d = parseInt(a.dataset.top || "0", 10);
     a.style.opacity = "0", a.style.transform = `translate3d(${n}px, ${d + 10}px, 0) scale(0.985)`;
   }
@@ -265,7 +265,7 @@ function Mt(e, o) {
     const d = parseInt(a.dataset.left || "0", 10), u = parseInt(a.dataset.top || "0", 10), c = typeof (o == null ? void 0 : o.leaveDurationMs) == "number" ? o.leaveDurationMs : NaN;
     let b = Number.isFinite(c) && c > 0 ? c : NaN;
     if (!Number.isFinite(b)) {
-      const T = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", P = parseFloat(T);
+      const M = getComputedStyle(a).getPropertyValue("--masonry-leave-duration") || "", P = parseFloat(M);
       b = Number.isFinite(P) && P > 0 ? P : 200;
     }
     const m = a.style.transitionDuration, x = () => {
@@ -281,16 +281,16 @@ function Mt(e, o) {
   }
   return {
     onEnter: l,
-    onBeforeEnter: i,
+    onBeforeEnter: s,
     onBeforeLeave: h,
     onLeave: v
   };
 }
-function It({
+function Pt({
   container: e,
   masonry: o,
   columns: l,
-  containerHeight: i,
+  containerHeight: s,
   isLoading: h,
   pageSize: v,
   refreshLayout: a,
@@ -303,7 +303,7 @@ function It({
     if (!e.value) return;
     const x = m ?? me(o.value, l.value), F = x.length ? Math.max(...x) : 0, _ = e.value.scrollTop + e.value.clientHeight, H = e.value.scrollTop > c + 1;
     c = e.value.scrollTop;
-    const T = typeof u == "number" ? u : 200, P = T >= 0 ? Math.max(0, F - T) : Math.max(0, F + T);
+    const M = typeof u == "number" ? u : 200, P = M >= 0 ? Math.max(0, F - M) : Math.max(0, F + M);
     if (_ >= P && H && !h.value) {
       await d(), await Q();
       return;
@@ -313,20 +313,20 @@ function It({
     handleScroll: b
   };
 }
-const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 bg-white relative" }, kt = {
+const St = { class: "relative w-full h-full group" }, kt = { class: "w-full h-full rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 bg-white relative" }, Et = {
   key: 0,
   class: "absolute inset-0 flex items-center justify-center bg-slate-100"
-}, Et = {
+}, Lt = {
   key: 1,
   class: "absolute inset-0 flex flex-col items-center justify-center bg-slate-50 text-slate-400 text-sm p-4 text-center"
-}, Lt = ["src"], Ht = { class: "absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75" }, Nt = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, $t = /* @__PURE__ */ Ee({
+}, Ht = ["src"], Nt = { class: "absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75" }, $t = { class: "text-white text-xs font-medium truncate drop-shadow-md" }, ve = /* @__PURE__ */ Le({
   __name: "MasonryItem",
   props: {
     item: {},
     remove: { type: Function }
   },
   setup(e) {
-    const o = e, l = L(!1), i = L(!1), h = L(null);
+    const o = e, l = L(!1), s = L(!1), h = L(null);
     function v(a) {
       return new Promise((n, d) => {
         if (!a) {
@@ -337,50 +337,50 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         u.onload = () => {
           const m = Date.now() - c, x = Math.max(0, b - m);
           setTimeout(() => {
-            l.value = !0, i.value = !1, n();
+            l.value = !0, s.value = !1, n();
           }, x);
         }, u.onerror = () => {
-          i.value = !0, l.value = !1, d(new Error("Failed to load image"));
+          s.value = !0, l.value = !1, d(new Error("Failed to load image"));
         }, u.src = a;
       });
     }
-    return Le(async () => {
+    return He(async () => {
       var n, d;
       console.log("[MasonryItem] Component mounted", (n = o.item) == null ? void 0 : n.id);
       const a = (d = o.item) == null ? void 0 : d.src;
       if (a) {
-        h.value = a, l.value = !1, i.value = !1;
+        h.value = a, l.value = !1, s.value = !1;
         try {
           await v(a);
         } catch {
         }
       }
-    }), He(
+    }), Ne(
       () => {
         var a;
         return (a = o.item) == null ? void 0 : a.src;
       },
       async (a) => {
         if (a && a !== h.value) {
-          l.value = !1, i.value = !1, h.value = a;
+          l.value = !1, s.value = !1, h.value = a;
           try {
             await v(a);
           } catch {
           }
         }
       }
-    ), (a, n) => (V(), q("div", Pt, [
-      Ne(a.$slots, "default", {
+    ), (a, n) => (V(), q("div", St, [
+      $e(a.$slots, "default", {
         item: a.item,
         remove: a.remove,
         imageLoaded: l.value,
-        imageError: i.value
+        imageError: s.value
       }, () => [
-        O("div", St, [
-          !l.value && !i.value ? (V(), q("div", kt, n[1] || (n[1] = [
+        O("div", kt, [
+          !l.value && !s.value ? (V(), q("div", Et, n[1] || (n[1] = [
             O("div", { class: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" }, null, -1)
           ]))) : oe("", !0),
-          i.value ? (V(), q("div", Et, n[2] || (n[2] = [
+          s.value ? (V(), q("div", Lt, n[2] || (n[2] = [
             O("i", { class: "fas fa-image text-2xl mb-2 opacity-50" }, null, -1),
             O("span", null, "Failed to load image", -1)
           ]))) : oe("", !0),
@@ -390,24 +390,24 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
             class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",
             loading: "lazy",
             decoding: "async"
-          }, null, 8, Lt)) : oe("", !0),
+          }, null, 8, Ht)) : oe("", !0),
           n[4] || (n[4] = O("div", { class: "absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" }, null, -1)),
           a.remove ? (V(), q("button", {
             key: 3,
             class: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center bg-white/90 backdrop-blur-sm text-slate-700 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 hover:bg-red-500 hover:text-white cursor-pointer",
-            onClick: n[0] || (n[0] = je((d) => a.remove(a.item), ["stop"])),
+            onClick: n[0] || (n[0] = ze((d) => a.remove(a.item), ["stop"])),
             "aria-label": "Remove item"
           }, n[3] || (n[3] = [
             O("i", { class: "fas fa-times text-sm" }, null, -1)
           ]))) : oe("", !0),
-          O("div", Ht, [
-            O("p", Nt, "Item #" + de(String(a.item.id).split("-")[0]), 1)
+          O("div", Nt, [
+            O("p", $t, "Item #" + de(String(a.item.id).split("-")[0]), 1)
           ])
         ])
       ])
     ]));
   }
-}), At = /* @__PURE__ */ Ee({
+}), At = /* @__PURE__ */ Le({
   __name: "Masonry",
   props: {
     getNextPage: {
@@ -508,7 +508,7 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
     "remove-all:complete"
   ],
   setup(e, { expose: o, emit: l }) {
-    const i = e, h = {
+    const s = e, h = {
       sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, "2xl": 6 },
       gutterX: 10,
       gutterY: 10,
@@ -517,18 +517,18 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
       paddingLeft: 0,
       paddingRight: 0,
       placement: "masonry"
-    }, v = ie(() => {
+    }, v = se(() => {
       var t;
       return {
         ...h,
-        ...i.layout,
+        ...s.layout,
         sizes: {
           ...h.sizes,
-          ...((t = i.layout) == null ? void 0 : t.sizes) || {}
+          ...((t = s.layout) == null ? void 0 : t.sizes) || {}
         }
       };
-    }), a = l, n = ie({
-      get: () => i.items,
+    }), a = l, n = se({
+      get: () => s.items,
       set: (t) => a("update:items", t)
     }), d = L(7), u = L(null), c = L([]), b = L(null), m = L(!1), x = L(0), F = L(/* @__PURE__ */ new Set());
     function _(t) {
@@ -537,10 +537,10 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
     function H(t, r) {
       try {
         if (!Array.isArray(t) || t.length === 0) return;
-        const s = t.filter((g) => !_(g == null ? void 0 : g.width) || !_(g == null ? void 0 : g.height));
-        if (s.length === 0) return;
+        const i = t.filter((g) => !_(g == null ? void 0 : g.width) || !_(g == null ? void 0 : g.height));
+        if (i.length === 0) return;
         const f = [];
-        for (const g of s) {
+        for (const g of i) {
           const A = (g == null ? void 0 : g.id) ?? `idx:${t.indexOf(g)}`;
           F.value.has(A) || (F.value.add(A), f.push(A));
         }
@@ -559,21 +559,21 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
       } catch {
       }
     }
-    const T = L(0), P = L(0), U = i.virtualBufferPx, S = L(!1), M = L({
+    const M = L(0), P = L(0), U = s.virtualBufferPx, S = L(!1), T = L({
       distanceToTrigger: 0,
       isNearTrigger: !1
     }), y = (t) => {
       if (!u.value) return;
-      const { scrollTop: r, clientHeight: s } = u.value, f = r + s, g = t ?? me(n.value, d.value), A = g.length ? Math.max(...g) : 0, C = typeof i.loadThresholdPx == "number" ? i.loadThresholdPx : 200, K = C >= 0 ? Math.max(0, A - C) : Math.max(0, A + C), be = Math.max(0, K - f), De = be <= 100;
-      M.value = {
-        distanceToTrigger: Math.round(be),
-        isNearTrigger: De
+      const { scrollTop: r, clientHeight: i } = u.value, f = r + i, g = t ?? me(n.value, d.value), A = g.length ? Math.max(...g) : 0, C = typeof s.loadThresholdPx == "number" ? s.loadThresholdPx : 200, K = C >= 0 ? Math.max(0, A - C) : Math.max(0, A + C), xe = Math.max(0, K - f), je = xe <= 100;
+      T.value = {
+        distanceToTrigger: Math.round(xe),
+        isNearTrigger: je
       };
-    }, { onEnter: W, onBeforeEnter: w, onBeforeLeave: N, onLeave: I } = Mt(n, { leaveDurationMs: i.leaveDurationMs });
+    }, { onEnter: W, onBeforeEnter: w, onBeforeLeave: N, onLeave: I } = It(n, { leaveDurationMs: s.leaveDurationMs });
     function D(t, r) {
       if (S.value) {
-        const s = parseInt(t.dataset.left || "0", 10), f = parseInt(t.dataset.top || "0", 10);
-        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${s}px, ${f}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
+        const i = parseInt(t.dataset.left || "0", 10), f = parseInt(t.dataset.top || "0", 10);
+        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${i}px, ${f}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay"), requestAnimationFrame(() => {
           t.style.transition = "", r();
         });
       } else
@@ -581,8 +581,8 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
     }
     function Z(t) {
       if (S.value) {
-        const r = parseInt(t.dataset.left || "0", 10), s = parseInt(t.dataset.top || "0", 10);
-        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${r}px, ${s}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
+        const r = parseInt(t.dataset.left || "0", 10), i = parseInt(t.dataset.top || "0", 10);
+        t.style.transition = "none", t.style.opacity = "1", t.style.transform = `translate3d(${r}px, ${i}px, 0) scale(1)`, t.style.removeProperty("--masonry-opacity-delay");
       } else
         w(t);
     }
@@ -592,25 +592,25 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
     function X(t, r) {
       S.value ? r() : I(t, r);
     }
-    const te = ie(() => {
-      const t = T.value - U, r = T.value + P.value + U, s = n.value;
-      return !s || s.length === 0 ? [] : s.filter((f) => {
+    const te = se(() => {
+      const t = M.value - U, r = M.value + P.value + U, i = n.value;
+      return !i || i.length === 0 ? [] : i.filter((f) => {
         const g = f.top;
         return f.top + f.columnHeight >= t && g <= r;
       });
-    }), { handleScroll: Y } = It({
+    }), { handleScroll: Y } = Pt({
       container: u,
       masonry: n,
       columns: d,
       containerHeight: x,
       isLoading: m,
-      pageSize: i.pageSize,
+      pageSize: s.pageSize,
       refreshLayout: j,
       setItemsRaw: (t) => {
         n.value = t;
       },
       loadNext: z,
-      loadThresholdPx: i.loadThresholdPx
+      loadThresholdPx: s.loadThresholdPx
     });
     o({
       isLoading: m,
@@ -618,25 +618,25 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
       containerHeight: x,
       remove: G,
       removeMany: R,
-      removeAll: We,
+      removeAll: Be,
       loadNext: z,
       loadPage: B,
       refreshCurrentPage: $,
-      reset: Fe,
-      init: Oe,
+      reset: Oe,
+      init: De,
       paginationHistory: c,
-      cancelLoad: pe,
-      scrollToTop: ve,
-      totalItems: ie(() => n.value.length)
+      cancelLoad: he,
+      scrollToTop: pe,
+      totalItems: se(() => n.value.length)
     });
     function J(t) {
-      const r = xt(t);
-      let s = 0;
+      const r = wt(t);
+      let i = 0;
       if (u.value) {
         const { scrollTop: f, clientHeight: g } = u.value;
-        s = f + g + 100;
+        i = f + g + 100;
       }
-      x.value = Math.max(r, s);
+      x.value = Math.max(r, i);
     }
     function j(t) {
       if (!u.value) return;
@@ -644,26 +644,26 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
       const r = t.map((f, g) => ({
         ...f,
         originalIndex: f.originalIndex ?? g
-      })), s = Xe(r, u.value, d.value, v.value);
-      J(s), n.value = s;
+      })), i = Ye(r, u.value, d.value, v.value);
+      J(i), n.value = i;
     }
     function ae(t, r) {
-      return new Promise((s) => {
+      return new Promise((i) => {
         const f = Math.max(0, t | 0), g = Date.now();
         r(f, f);
         const A = setInterval(() => {
           if (E.value) {
-            clearInterval(A), s();
+            clearInterval(A), i();
             return;
           }
           const C = Date.now() - g, K = Math.max(0, f - C);
-          r(K, f), K <= 0 && (clearInterval(A), s());
+          r(K, f), K <= 0 && (clearInterval(A), i());
         }, 100);
       });
     }
     async function p(t) {
       try {
-        const r = await k(() => i.getNextPage(t));
+        const r = await k(() => s.getNextPage(t));
         return j([...n.value, ...r.items]), r;
       } catch (r) {
         throw console.error("Error in getContent:", r), r;
@@ -671,18 +671,18 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
     }
     async function k(t) {
       let r = 0;
-      const s = i.retryMaxAttempts;
-      let f = i.retryInitialDelayMs;
+      const i = s.retryMaxAttempts;
+      let f = s.retryInitialDelayMs;
       for (; ; )
         try {
           const g = await t();
           return r > 0 && a("retry:stop", { attempt: r, success: !0 }), g;
         } catch (g) {
-          if (r++, r > s)
+          if (r++, r > i)
             throw a("retry:stop", { attempt: r - 1, success: !1 }), g;
-          a("retry:start", { attempt: r, max: s, totalMs: f }), await ae(f, (A, C) => {
+          a("retry:start", { attempt: r, max: i, totalMs: f }), await ae(f, (A, C) => {
             a("retry:tick", { attempt: r, remainingMs: A, totalMs: C });
-          }), f += i.retryBackoffStepMs;
+          }), f += s.retryBackoffStepMs;
         }
     }
     async function B(t) {
@@ -691,8 +691,8 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         try {
           const r = n.value.length;
           if (E.value) return;
-          const s = await p(t);
-          return E.value ? void 0 : (b.value = t, c.value.push(s.nextPage), await ne(r), s);
+          const i = await p(t);
+          return E.value ? void 0 : (b.value = t, c.value.push(i.nextPage), await ne(r), i);
         } catch (r) {
           throw console.error("Error loading page:", r), r;
         } finally {
@@ -706,8 +706,8 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         try {
           const t = n.value.length;
           if (E.value) return;
-          const r = c.value[c.value.length - 1], s = await p(r);
-          return E.value ? void 0 : (b.value = r, c.value.push(s.nextPage), await ne(t), s);
+          const r = c.value[c.value.length - 1], i = await p(r);
+          return E.value ? void 0 : (b.value = r, c.value.push(i.nextPage), await ne(t), i);
         } catch (t) {
           throw console.error("Error loading next page:", t), t;
         } finally {
@@ -728,8 +728,8 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
           const r = await p(t);
           if (E.value) return;
           b.value = t, c.value.push(r.nextPage);
-          const s = n.value.length;
-          return await ne(s), r;
+          const i = n.value.length;
+          return await ne(i), r;
         } catch (t) {
           throw console.error("[Masonry] Error refreshing current page:", t), t;
         } finally {
@@ -738,9 +738,9 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
       }
     }
     async function G(t) {
-      const r = n.value.filter((s) => s.id !== t.id);
+      const r = n.value.filter((i) => i.id !== t.id);
       if (n.value = r, await Q(), console.log("[Masonry] remove - next.length:", r.length, "paginationHistory.length:", c.value.length), r.length === 0 && c.value.length > 0) {
-        if (i.autoRefreshOnEmpty)
+        if (s.autoRefreshOnEmpty)
           console.log("[Masonry] All items removed, calling refreshCurrentPage"), await $();
         else {
           console.log("[Masonry] All items removed, calling loadNext and forcing backfill");
@@ -751,15 +751,15 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         }
         return;
       }
-      await new Promise((s) => requestAnimationFrame(() => s())), requestAnimationFrame(() => {
+      await new Promise((i) => requestAnimationFrame(() => i())), requestAnimationFrame(() => {
         j(r);
       });
     }
     async function R(t) {
       if (!t || t.length === 0) return;
-      const r = new Set(t.map((f) => f.id)), s = n.value.filter((f) => !r.has(f.id));
-      if (n.value = s, await Q(), s.length === 0 && c.value.length > 0) {
-        if (i.autoRefreshOnEmpty)
+      const r = new Set(t.map((f) => f.id)), i = n.value.filter((f) => !r.has(f.id));
+      if (n.value = i, await Q(), i.length === 0 && c.value.length > 0) {
+        if (s.autoRefreshOnEmpty)
           await $();
         else
           try {
@@ -769,35 +769,35 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         return;
       }
       await new Promise((f) => requestAnimationFrame(() => f())), requestAnimationFrame(() => {
-        j(s);
+        j(i);
       });
     }
-    function ve(t) {
+    function pe(t) {
       u.value && u.value.scrollTo({
         top: 0,
         behavior: (t == null ? void 0 : t.behavior) ?? "smooth",
         ...t
       });
     }
-    async function We() {
-      ve({ behavior: "smooth" }), n.value = [], x.value = 0, await Q(), a("remove-all:complete");
+    async function Be() {
+      pe({ behavior: "smooth" }), n.value = [], x.value = 0, await Q(), a("remove-all:complete");
     }
-    function Be() {
-      d.value = fe(v.value), j(n.value), u.value && (T.value = u.value.scrollTop, P.value = u.value.clientHeight);
+    function Fe() {
+      d.value = fe(v.value), j(n.value), u.value && (M.value = u.value.scrollTop, P.value = u.value.clientHeight);
     }
     let le = !1;
     const E = L(!1);
     async function ne(t, r = !1) {
-      if (!r && !i.backfillEnabled || le || E.value) return;
-      const s = (t || 0) + (i.pageSize || 0);
-      if (!(!i.pageSize || i.pageSize <= 0 || c.value[c.value.length - 1] == null) && !(n.value.length >= s)) {
+      if (!r && !s.backfillEnabled || le || E.value) return;
+      const i = (t || 0) + (s.pageSize || 0);
+      if (!(!s.pageSize || s.pageSize <= 0 || c.value[c.value.length - 1] == null) && !(n.value.length >= i)) {
         le = !0;
         try {
           let g = 0;
-          for (a("backfill:start", { target: s, fetched: n.value.length, calls: g }); n.value.length < s && g < i.backfillMaxCalls && c.value[c.value.length - 1] != null && !E.value && (await ae(i.backfillDelayMs, (C, K) => {
+          for (a("backfill:start", { target: i, fetched: n.value.length, calls: g }); n.value.length < i && g < s.backfillMaxCalls && c.value[c.value.length - 1] != null && !E.value && (await ae(s.backfillDelayMs, (C, K) => {
             a("backfill:tick", {
               fetched: n.value.length,
-              target: s,
+              target: i,
               calls: g,
               remainingMs: C,
               totalMs: K
@@ -820,55 +820,55 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         }
       }
     }
-    function pe() {
+    function he() {
       E.value = !0, m.value = !1, le = !1;
     }
-    function Fe() {
-      pe(), E.value = !1, u.value && u.value.scrollTo({
+    function Oe() {
+      he(), E.value = !1, u.value && u.value.scrollTo({
         top: 0,
         behavior: "smooth"
-      }), n.value = [], x.value = 0, b.value = i.loadAtPage, c.value = [i.loadAtPage], M.value = {
+      }), n.value = [], x.value = 0, b.value = s.loadAtPage, c.value = [s.loadAtPage], T.value = {
         distanceToTrigger: 0,
         isNearTrigger: !1
       };
     }
-    const he = Se(async () => {
-      u.value && (T.value = u.value.scrollTop, P.value = u.value.clientHeight), S.value = !0, await Q(), await new Promise((r) => requestAnimationFrame(() => r())), S.value = !1;
+    const ye = ke(async () => {
+      u.value && (M.value = u.value.scrollTop, P.value = u.value.clientHeight), S.value = !0, await Q(), await new Promise((r) => requestAnimationFrame(() => r())), S.value = !1;
       const t = me(n.value, d.value);
       Y(t), y(t);
-    }, 200), ye = Se(Be, 200);
-    function Oe(t, r, s) {
-      b.value = r, c.value = [r], c.value.push(s), H(t, "init"), j([...n.value, ...t]), y();
+    }, 200), be = ke(Fe, 200);
+    function De(t, r, i) {
+      b.value = r, c.value = [r], c.value.push(i), H(t, "init"), j([...n.value, ...t]), y();
     }
-    return He(
+    return Ne(
       v,
       () => {
         u.value && (d.value = fe(v.value), j(n.value));
       },
       { deep: !0 }
-    ), Le(async () => {
+    ), He(async () => {
       var t;
       try {
-        d.value = fe(v.value), u.value && (T.value = u.value.scrollTop, P.value = u.value.clientHeight);
-        const r = i.loadAtPage;
-        c.value = [r], i.skipInitialLoad || await B(c.value[0]), y();
+        d.value = fe(v.value), u.value && (M.value = u.value.scrollTop, P.value = u.value.clientHeight);
+        const r = s.loadAtPage;
+        c.value = [r], s.skipInitialLoad || await B(c.value[0]), y();
       } catch (r) {
         console.error("Error during component initialization:", r), m.value = !1;
       }
-      (t = u.value) == null || t.addEventListener("scroll", he, { passive: !0 }), window.addEventListener("resize", ye);
-    }), ze(() => {
+      (t = u.value) == null || t.addEventListener("scroll", ye, { passive: !0 }), window.addEventListener("resize", be);
+    }), Re(() => {
       var t;
-      (t = u.value) == null || t.removeEventListener("scroll", he), window.removeEventListener("resize", ye);
+      (t = u.value) == null || t.removeEventListener("scroll", ye), window.removeEventListener("resize", be);
     }), (t, r) => (V(), q("div", {
-      class: xe(["overflow-auto w-full flex-1 masonry-container", { "force-motion": i.forceMotion }]),
+      class: we(["overflow-auto w-full flex-1 masonry-container", { "force-motion": s.forceMotion }]),
       ref_key: "container",
       ref: u
     }, [
       O("div", {
         class: "relative",
-        style: Re({ height: `${x.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
+        style: Ce({ height: `${x.value}px`, "--masonry-duration": `${e.transitionDurationMs}ms`, "--masonry-leave-duration": `${e.leaveDurationMs}ms`, "--masonry-ease": e.transitionEasing })
       }, [
-        we(Ce, {
+        Me(_e, {
           name: "masonry",
           css: !1,
           onEnter: D,
@@ -876,17 +876,17 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
           onLeave: X,
           onBeforeLeave: ee
         }, {
-          default: _e(() => [
-            (V(!0), q(qe, null, Ve(te.value, (s, f) => (V(), q("div", Te({
-              key: `${s.page}-${s.id}`,
+          default: qe(() => [
+            (V(!0), q(Ve, null, Ge(te.value, (i, f) => (V(), q("div", Te({
+              key: `${i.page}-${i.id}`,
               class: "absolute masonry-item",
               ref_for: !0
-            }, Ge(Tt)(s, f), {
+            }, Ue(Tt)(i, f), {
               style: { paddingTop: `${v.value.header}px`, paddingBottom: `${v.value.footer}px` }
             }), [
-              Ne(t.$slots, "item", Te({ ref_for: !0 }, { item: s, remove: G }), () => [
-                we($t, {
-                  item: s,
+              $e(t.$slots, "item", Te({ ref_for: !0 }, { item: i, remove: G }), () => [
+                Me(ve, {
+                  item: i,
                   remove: G
                 }, null, 8, ["item"])
               ], !0)
@@ -896,26 +896,27 @@ const Pt = { class: "relative w-full h-full group" }, St = { class: "w-full h-fu
         }),
         x.value > 0 ? (V(), q("div", {
           key: 0,
-          class: xe(["fixed bottom-4 right-4 bg-gray-800 text-white text-xs rounded-full px-3 py-1.5 shadow-lg z-10 transition-opacity duration-300", { "opacity-50 hover:opacity-100": !M.value.isNearTrigger, "opacity-100": M.value.isNearTrigger }])
+          class: we(["fixed bottom-4 right-4 bg-gray-800 text-white text-xs rounded-full px-3 py-1.5 shadow-lg z-10 transition-opacity duration-300", { "opacity-50 hover:opacity-100": !T.value.isNearTrigger, "opacity-100": T.value.isNearTrigger }])
         }, [
           O("span", null, de(n.value.length) + " items", 1),
           r[0] || (r[0] = O("span", { class: "mx-2" }, "|", -1)),
-          O("span", null, de(M.value.distanceToTrigger) + "px to load", 1)
+          O("span", null, de(T.value.distanceToTrigger) + "px to load", 1)
         ], 2)) : oe("", !0)
       ], 4)
     ], 2));
   }
 }), Wt = (e, o) => {
   const l = e.__vccOpts || e;
-  for (const [i, h] of o)
-    l[i] = h;
+  for (const [s, h] of o)
+    l[s] = h;
   return l;
-}, ke = /* @__PURE__ */ Wt(At, [["__scopeId", "data-v-08b0e6d9"]]), Ft = {
+}, Ee = /* @__PURE__ */ Wt(At, [["__scopeId", "data-v-08b0e6d9"]]), Ft = {
   install(e) {
-    e.component("WyxosMasonry", ke), e.component("WMasonry", ke);
+    e.component("WyxosMasonry", Ee), e.component("WMasonry", Ee), e.component("WyxosMasonryItem", ve), e.component("WMasonryItem", ve);
   }
 };
 export {
-  ke as Masonry,
+  Ee as Masonry,
+  ve as MasonryItem,
   Ft as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",