@wyxos/vibe 1.6.18 → 1.6.20

package/lib/vibe.css

@@ -1 +1 @@
-.masonry-container[data-v-01598521]{overflow-anchor:none}.masonry-item[data-v-01598521]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-01598521]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-01598521],.masonry-container:not(.force-motion) .masonry-move[data-v-01598521]{transition-duration:1ms!important}}
+.masonry-container[data-v-2168600e]{overflow-anchor:none}.masonry-item[data-v-2168600e]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-2168600e]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-2168600e],.masonry-container:not(.force-motion) .masonry-move[data-v-2168600e]{transition-duration:1ms!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.18",
+  "version": "1.6.20",
   "description": "A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.",
   "keywords": [
     "vue",
@@ -21,7 +21,7 @@
     "type": "git",
     "url": "https://github.com/wyxos/vibe.git"
   },
-  "homepage": "https://wyxos.github.io/vibe/",
+  "homepage": "https://vibe.wyxos.com/",
   "bugs": {
     "url": "https://github.com/wyxos/vibe/issues"
   },

package/src/Masonry.vue

@@ -416,6 +416,8 @@ defineExpose({
   remove,
   removeMany,
   removeAll,
+  restore,
+  restoreMany,
   loadNext,
   loadPage,
   refreshCurrentPage,
@@ -449,10 +451,11 @@ function refreshLayout(items: any[]) {
   if (!container.value) return
   // Developer diagnostics: warn when dimensions are invalid
   checkItemDimensions(items as any[], 'refreshLayout')
-  // Preserve original index before layout reordering
+  // Update original index to reflect current position in array
+  // This ensures indices are correct after items are removed
   const itemsWithIndex = items.map((item, index) => ({
     ...item,
-    originalIndex: item.originalIndex ?? index
+    originalIndex: index
   }))
 
   // When fixed dimensions are set, ensure container uses the fixed width for layout
@@ -732,6 +735,128 @@ async function removeMany(items: any[]) {
   })
 }
 
+/**
+ * Restore a single item at its original index.
+ * This is useful for undo operations where an item needs to be restored to its exact position.
+ * Handles all index calculation and layout recalculation internally.
+ * @param item - Item to restore
+ * @param index - Original index of the item
+ */
+async function restore(item: any, index: number) {
+  if (!item) return
+
+  const current = masonry.value as any[]
+  const existingIndex = current.findIndex(i => i.id === item.id)
+  if (existingIndex !== -1) return // Item already exists
+
+  // Insert at the original index (clamped to valid range)
+  const newItems = [...current]
+  const targetIndex = Math.min(index, newItems.length)
+  newItems.splice(targetIndex, 0, item)
+
+  // Update the masonry array
+  masonry.value = newItems
+  await nextTick()
+
+  // Trigger layout recalculation (same pattern as remove)
+  if (!useSwipeMode.value) {
+    // Commit DOM updates without forcing sync reflow
+    await new Promise<void>(r => requestAnimationFrame(() => r()))
+    // Start FLIP on next frame
+    requestAnimationFrame(() => {
+      refreshLayout(newItems)
+    })
+  }
+}
+
+/**
+ * Restore multiple items at their original indices.
+ * This is useful for undo operations where items need to be restored to their exact positions.
+ * Handles all index calculation and layout recalculation internally.
+ * @param items - Array of items to restore
+ * @param indices - Array of original indices for each item (must match items array length)
+ */
+async function restoreMany(items: any[], indices: number[]) {
+  if (!items || items.length === 0) return
+  if (!indices || indices.length !== items.length) {
+    console.warn('[Masonry] restoreMany: items and indices arrays must have the same length')
+    return
+  }
+
+  const current = masonry.value as any[]
+  const existingIds = new Set(current.map(i => i.id))
+
+  // Filter out items that already exist and pair with their indices
+  const itemsToRestore: Array<{ item: any; index: number }> = []
+  for (let i = 0; i < items.length; i++) {
+    if (!existingIds.has(items[i]?.id)) {
+      itemsToRestore.push({ item: items[i], index: indices[i] })
+    }
+  }
+
+  if (itemsToRestore.length === 0) return
+
+  // Build the final array by merging current items and restored items
+  // Strategy: Build position by position - for each position, decide if it should be
+  // a restored item (at its original index) or a current item (accounting for shifts)
+
+  // Create a map of restored items by their original index for O(1) lookup
+  const restoredByIndex = new Map<number, any>()
+  for (const { item, index } of itemsToRestore) {
+    restoredByIndex.set(index, item)
+  }
+
+  // Find the maximum position we need to consider
+  const maxRestoredIndex = itemsToRestore.length > 0
+    ? Math.max(...itemsToRestore.map(({ index }) => index))
+    : -1
+  const maxPosition = Math.max(current.length - 1, maxRestoredIndex)
+
+  // Build the final array position by position
+  // Key insight: Current array items are in "shifted" positions (missing the removed items).
+  // When we restore items at their original positions, current items naturally shift back.
+  // We can build the final array by iterating positions and using items sequentially.
+  const newItems: any[] = []
+  let currentArrayIndex = 0 // Track which current item we should use next
+
+  // Iterate through all positions up to the maximum we need
+  for (let position = 0; position <= maxPosition; position++) {
+    // If there's a restored item that belongs at this position, use it
+    if (restoredByIndex.has(position)) {
+      newItems.push(restoredByIndex.get(position)!)
+    } else {
+      // Otherwise, this position should be filled by the next current item
+      // Since current array is missing restored items, items are shifted left.
+      // By using them sequentially, they naturally end up in the correct positions.
+      if (currentArrayIndex < current.length) {
+        newItems.push(current[currentArrayIndex])
+        currentArrayIndex++
+      }
+    }
+  }
+
+  // Add any remaining current items that come after the last restored position
+  // (These are items that were originally after maxRestoredIndex)
+  while (currentArrayIndex < current.length) {
+    newItems.push(current[currentArrayIndex])
+    currentArrayIndex++
+  }
+
+  // Update the masonry array
+  masonry.value = newItems
+  await nextTick()
+
+  // Trigger layout recalculation (same pattern as removeMany)
+  if (!useSwipeMode.value) {
+    // Commit DOM updates without forcing sync reflow
+    await new Promise<void>(r => requestAnimationFrame(() => r()))
+    // Start FLIP on next frame
+    requestAnimationFrame(() => {
+      refreshLayout(newItems)
+    })
+  }
+}
+
 function scrollToTop(options?: ScrollToOptions) {
   if (container.value) {
     container.value.scrollTo({
@@ -789,6 +914,8 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
   if ((masonry.value as any[]).length >= targetCount) return
 
   backfillActive = true
+  // Set loading to true at the start of backfill and keep it true throughout
+  isLoading.value = true
   try {
     let calls = 0
     emits('backfill:start', { target: targetCount, fetched: (masonry.value as any[]).length, calls })
@@ -818,7 +945,7 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
         break
       }
       try {
-        isLoading.value = true
+        // Don't toggle isLoading here - keep it true throughout backfill
         const response = await getContent(currentPage)
         if (cancelRequested.value) break
         // Clear error on successful load
@@ -831,8 +958,6 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
       } catch (error) {
         // Set load error but don't break the backfill loop
         loadError.value = error instanceof Error ? error : new Error(String(error))
-      } finally {
-        isLoading.value = false
       }
 
       calls++
@@ -841,6 +966,8 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
     emits('backfill:stop', { fetched: (masonry.value as any[]).length, calls })
   } finally {
     backfillActive = false
+    // Only set loading to false when backfill completes
+    isLoading.value = false
   }
 }
 
@@ -877,7 +1004,7 @@ function reset() {
 function destroy() {
   // Cancel any ongoing loads
   cancelLoad()
-  
+
   // Reset all state
   masonry.value = []
   masonryContentHeight.value = 0
@@ -888,26 +1015,26 @@ function destroy() {
   isLoading.value = false
   backfillActive = false
   cancelRequested.value = false
-  
+
   // Reset swipe mode state
   currentSwipeIndex.value = 0
   swipeOffset.value = 0
   isDragging.value = false
-  
+
   // Reset viewport state
   viewportTop.value = 0
   viewportHeight.value = 0
   virtualizing.value = false
-  
+
   // Reset scroll progress
   scrollProgress.value = {
     distanceToTrigger: 0,
     isNearTrigger: false
   }
-  
+
   // Reset invalid dimension tracking
   invalidDimensionIds.value.clear()
-  
+
   // Scroll to top if container exists
   if (container.value) {
     container.value.scrollTo({
@@ -1336,7 +1463,7 @@ onUnmounted(() => {
           }">
           <div class="w-full h-full flex items-center justify-center p-4">
             <div class="w-full h-full max-w-full max-h-full relative">
-              <slot :item="item" :remove="remove">
+              <slot :item="item" :remove="remove" :index="item.originalIndex ?? props.items.indexOf(item)">
                 <MasonryItem :item="item" :remove="remove" :header-height="layout.header" :footer-height="layout.footer"
                   :in-swipe-mode="true" :is-active="index === currentSwipeIndex"
                   @preload:success="(p) => emits('item:preload:success', p)"
@@ -1379,7 +1506,7 @@ onUnmounted(() => {
           <div v-for="(item, i) in visibleMasonry" :key="`${item.page}-${item.id}`" class="absolute masonry-item"
             v-bind="getItemAttributes(item, i)">
             <!-- Use default slot if provided, otherwise use MasonryItem -->
-            <slot :item="item" :remove="remove">
+            <slot :item="item" :remove="remove" :index="item.originalIndex ?? items.indexOf(item)">
               <MasonryItem :item="item" :remove="remove" :header-height="layout.header" :footer-height="layout.footer"
                 :in-swipe-mode="false" :is-active="false" @preload:success="(p) => emits('item:preload:success', p)"
                 @preload:error="(p) => emits('item:preload:error', p)"