@wyxos/vibe 1.6.16 → 1.6.18

package/src/Masonry.vue

@@ -16,7 +16,7 @@ import MasonryItem from './components/MasonryItem.vue'
 const props = defineProps({
   getNextPage: {
     type: Function,
-    default: () => {}
+    default: () => { }
   },
   loadAtPage: {
     type: [Number, String],
@@ -112,7 +112,7 @@ const props = defineProps({
 })
 
 const defaultLayout = {
-  sizes: {base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6},
+  sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6 },
   gutterX: 10,
   gutterY: 10,
   header: 0,
@@ -153,12 +153,12 @@ function getBreakpointValue(breakpoint: string): number {
 const useSwipeMode = computed(() => {
   if (props.layoutMode === 'masonry') return false
   if (props.layoutMode === 'swipe') return true
-  
+
   // Auto mode: check container width
-  const breakpoint = typeof props.mobileBreakpoint === 'string' 
+  const breakpoint = typeof props.mobileBreakpoint === 'string'
     ? getBreakpointValue(props.mobileBreakpoint)
     : props.mobileBreakpoint
-  
+
   return containerWidth.value < breakpoint
 })
 
@@ -212,6 +212,8 @@ const paginationHistory = ref<any[]>([])
 const currentPage = ref<any>(null)  // Track the actual current page being displayed
 const isLoading = ref<boolean>(false)
 const masonryContentHeight = ref<number>(0)
+const hasReachedEnd = ref<boolean>(false)  // Track when we've reached the last page
+const loadError = ref<Error | null>(null)  // Track load errors
 
 // Current breakpoint
 const currentBreakpoint = computed(() => getBreakpointName(containerWidth.value))
@@ -278,7 +280,7 @@ const scrollProgress = ref<{ distanceToTrigger: number; isNearTrigger: boolean }
 const updateScrollProgress = (precomputedHeights?: number[]) => {
   if (!container.value) return
 
-  const {scrollTop, clientHeight} = container.value
+  const { scrollTop, clientHeight } = container.value
   const visibleBottom = scrollTop + clientHeight
 
   const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value as any, columns.value)
@@ -298,7 +300,7 @@ const updateScrollProgress = (precomputedHeights?: number[]) => {
 }
 
 // Setup composables
-const {onEnter, onBeforeEnter, onBeforeLeave, onLeave} = useMasonryTransitions(masonry, { leaveDurationMs: props.leaveDurationMs })
+const { onEnter, onBeforeEnter, onBeforeLeave, onLeave } = useMasonryTransitions(masonry, { leaveDurationMs: props.leaveDurationMs })
 
 // Transition wrappers that skip animation during virtualization
 function enter(el: HTMLElement, done: () => void) {
@@ -358,7 +360,7 @@ const visibleMasonry = computed(() => {
   })
 })
 
-const {handleScroll} = useMasonryScroll({
+const { handleScroll } = useMasonryScroll({
   container,
   masonry: masonry as any,
   columns,
@@ -405,6 +407,10 @@ defineExpose({
   contentHeight: masonryContentHeight,
   // Current page
   currentPage,
+  // End of list tracking
+  hasReachedEnd,
+  // Load error tracking
+  loadError,
   // Set fixed dimensions (overrides ResizeObserver)
   setFixedDimensions,
   remove,
@@ -414,6 +420,7 @@ defineExpose({
   loadPage,
   refreshCurrentPage,
   reset,
+  destroy,
   init,
   paginationHistory,
   cancelLoad,
@@ -426,7 +433,7 @@ function calculateHeight(content: any[]) {
   const newHeight = calculateContainerHeight(content as any)
   let floor = 0
   if (container.value) {
-    const {scrollTop, clientHeight} = container.value
+    const { scrollTop, clientHeight } = container.value
     floor = scrollTop + clientHeight + 100
   }
   masonryContentHeight.value = Math.max(newHeight, floor)
@@ -438,7 +445,7 @@ function refreshLayout(items: any[]) {
     masonry.value = items as any
     return
   }
-  
+
   if (!container.value) return
   // Developer diagnostics: warn when dimensions are invalid
   checkItemDimensions(items as any[], 'refreshLayout')
@@ -447,7 +454,7 @@ function refreshLayout(items: any[]) {
     ...item,
     originalIndex: item.originalIndex ?? index
   }))
-  
+
   // When fixed dimensions are set, ensure container uses the fixed width for layout
   // This prevents gaps when the container's actual width differs from the fixed width
   const containerEl = container.value as HTMLElement
@@ -459,13 +466,13 @@ function refreshLayout(items: any[]) {
     containerEl.style.width = `${fixedDimensions.value.width}px`
     // Force reflow
     containerEl.offsetWidth
-    
+
     const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
-    
+
     // Restore original width
     containerEl.style.width = originalWidth
     containerEl.style.boxSizing = originalBoxSizing
-    
+
     calculateHeight(content as any)
     masonry.value = content
   } else {
@@ -518,18 +525,18 @@ async function fetchWithRetry<T = any>(fn: () => Promise<T>): Promise<T> {
     try {
       const res = await fn()
       if (attempt > 0) {
-        emits('retry:stop', {attempt, success: true})
+        emits('retry:stop', { attempt, success: true })
       }
       return res
     } catch (err) {
       attempt++
       if (attempt > max) {
-        emits('retry:stop', {attempt: attempt - 1, success: false})
+        emits('retry:stop', { attempt: attempt - 1, success: false })
         throw err
       }
-      emits('retry:start', {attempt, max, totalMs: delay})
+      emits('retry:start', { attempt, max, totalMs: delay })
       await waitWithProgress(delay, (remaining, total) => {
-        emits('retry:tick', {attempt, remainingMs: remaining, totalMs: total})
+        emits('retry:tick', { attempt, remainingMs: remaining, totalMs: total })
       })
       delay += props.retryBackoffStepMs
     }
@@ -541,17 +548,28 @@ async function loadPage(page: number) {
   // Starting a new load should clear any previous cancel request
   cancelRequested.value = false
   isLoading.value = true
+  // Reset hasReachedEnd and loadError when loading a new page
+  hasReachedEnd.value = false
+  loadError.value = null
   try {
     const baseline = (masonry.value as any[]).length
     if (cancelRequested.value) return
     const response = await getContent(page)
     if (cancelRequested.value) return
+    // Clear error on successful load
+    loadError.value = null
     currentPage.value = page  // Track the current page
     paginationHistory.value.push(response.nextPage)
+    // Update hasReachedEnd if nextPage is null
+    if (response.nextPage == null) {
+      hasReachedEnd.value = true
+    }
     await maybeBackfillToTarget(baseline)
     return response
   } catch (error) {
     console.error('Error loading page:', error)
+    // Set load error
+    loadError.value = error instanceof Error ? error : new Error(String(error))
     throw error
   } finally {
     isLoading.value = false
@@ -560,21 +578,39 @@ async function loadPage(page: number) {
 
 async function loadNext() {
   if (isLoading.value) return
+  // Don't load if we've already reached the end
+  if (hasReachedEnd.value) return
   // Starting a new load should clear any previous cancel request
   cancelRequested.value = false
   isLoading.value = true
+  // Clear error when attempting to load
+  loadError.value = null
   try {
     const baseline = (masonry.value as any[]).length
     if (cancelRequested.value) return
     const nextPageToLoad = paginationHistory.value[paginationHistory.value.length - 1]
+    // Don't load if nextPageToLoad is null
+    if (nextPageToLoad == null) {
+      hasReachedEnd.value = true
+      isLoading.value = false
+      return
+    }
     const response = await getContent(nextPageToLoad)
     if (cancelRequested.value) return
+    // Clear error on successful load
+    loadError.value = null
     currentPage.value = nextPageToLoad  // Track the current page
     paginationHistory.value.push(response.nextPage)
+    // Update hasReachedEnd if nextPage is null
+    if (response.nextPage == null) {
+      hasReachedEnd.value = true
+    }
     await maybeBackfillToTarget(baseline)
     return response
   } catch (error) {
     console.error('Error loading next page:', error)
+    // Set load error
+    loadError.value = error instanceof Error ? error : new Error(String(error))
     throw error
   } finally {
     isLoading.value = false
@@ -589,40 +625,50 @@ async function refreshCurrentPage() {
   if (isLoading.value) return
   cancelRequested.value = false
   isLoading.value = true
-  
+
   try {
     // Use the tracked current page
     const pageToRefresh = currentPage.value
-    
+
     if (pageToRefresh == null) {
       console.warn('[Masonry] No current page to refresh - currentPage:', currentPage.value, 'paginationHistory:', paginationHistory.value)
       return
     }
-    
+
     // Clear existing items
     masonry.value = []
     masonryContentHeight.value = 0
-    
+    hasReachedEnd.value = false  // Reset end flag when refreshing
+    loadError.value = null  // Reset error flag when refreshing
+
     // Reset pagination history to just the current page
     paginationHistory.value = [pageToRefresh]
-    
+
     await nextTick()
-    
+
     // Reload the current page
     const response = await getContent(pageToRefresh)
     if (cancelRequested.value) return
-    
+
+    // Clear error on successful load
+    loadError.value = null
     // Update pagination state
     currentPage.value = pageToRefresh
     paginationHistory.value.push(response.nextPage)
-    
+    // Update hasReachedEnd if nextPage is null
+    if (response.nextPage == null) {
+      hasReachedEnd.value = true
+    }
+
     // Optionally backfill if needed
     const baseline = (masonry.value as any[]).length
     await maybeBackfillToTarget(baseline)
-    
+
     return response
   } catch (error) {
     console.error('[Masonry] Error refreshing current page:', error)
+    // Set load error
+    loadError.value = error instanceof Error ? error : new Error(String(error))
     throw error
   } finally {
     isLoading.value = false
@@ -633,7 +679,7 @@ async function remove(item: any) {
   const next = (masonry.value as any[]).filter(i => i.id !== item.id)
   masonry.value = next
   await nextTick()
-  
+
   // If all items were removed, either refresh current page or load next based on prop
   if (next.length === 0 && paginationHistory.value.length > 0) {
     if (props.autoRefreshOnEmpty) {
@@ -644,11 +690,11 @@ async function remove(item: any) {
         // Force backfill from 0 to ensure viewport is filled
         // Pass baseline=0 and force=true to trigger backfill even if backfillEnabled was temporarily disabled
         await maybeBackfillToTarget(0, true)
-      } catch {}
+      } catch { }
     }
     return
   }
-  
+
   // Commit DOM updates without forcing sync reflow
   await new Promise<void>(r => requestAnimationFrame(() => r()))
   // Start FLIP on next frame
@@ -663,7 +709,7 @@ async function removeMany(items: any[]) {
   const next = (masonry.value as any[]).filter(i => !ids.has(i.id))
   masonry.value = next
   await nextTick()
-  
+
   // If all items were removed, either refresh current page or load next based on prop
   if (next.length === 0 && paginationHistory.value.length > 0) {
     if (props.autoRefreshOnEmpty) {
@@ -673,11 +719,11 @@ async function removeMany(items: any[]) {
         await loadNext()
         // Force backfill from 0 to ensure viewport is filled
         await maybeBackfillToTarget(0, true)
-      } catch {}
+      } catch { }
     }
     return
   }
-  
+
   // Commit DOM updates without forcing sync reflow
   await new Promise<void>(r => requestAnimationFrame(() => r()))
   // Start FLIP on next frame
@@ -699,15 +745,15 @@ function scrollToTop(options?: ScrollToOptions) {
 async function removeAll() {
   // Scroll to top first for better UX
   scrollToTop({ behavior: 'smooth' })
-  
+
   // Clear all items
   masonry.value = []
-  
+
   // Recalculate height to 0
   containerHeight.value = 0
-  
+
   await nextTick()
-  
+
   // Emit completion event
   emits('remove-all:complete')
 }
@@ -728,25 +774,31 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
   if (!force && !props.backfillEnabled) return
   if (backfillActive) return
   if (cancelRequested.value) return
+  // Don't backfill if we've reached the end
+  if (hasReachedEnd.value) return
 
   const targetCount = (baselineCount || 0) + (props.pageSize || 0)
   if (!props.pageSize || props.pageSize <= 0) return
 
   const lastNext = paginationHistory.value[paginationHistory.value.length - 1]
-  if (lastNext == null) return
+  if (lastNext == null) {
+    hasReachedEnd.value = true
+    return
+  }
 
   if ((masonry.value as any[]).length >= targetCount) return
 
   backfillActive = true
   try {
     let calls = 0
-    emits('backfill:start', {target: targetCount, fetched: (masonry.value as any[]).length, calls})
+    emits('backfill:start', { target: targetCount, fetched: (masonry.value as any[]).length, calls })
 
     while (
       (masonry.value as any[]).length < targetCount &&
       calls < props.backfillMaxCalls &&
       paginationHistory.value[paginationHistory.value.length - 1] != null &&
-      !cancelRequested.value
+      !cancelRequested.value &&
+      !hasReachedEnd.value
     ) {
       await waitWithProgress(props.backfillDelayMs, (remaining, total) => {
         emits('backfill:tick', {
@@ -761,11 +813,24 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
       if (cancelRequested.value) break
 
       const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
+      if (currentPage == null) {
+        hasReachedEnd.value = true
+        break
+      }
       try {
         isLoading.value = true
         const response = await getContent(currentPage)
         if (cancelRequested.value) break
+        // Clear error on successful load
+        loadError.value = null
         paginationHistory.value.push(response.nextPage)
+        // Update hasReachedEnd if nextPage is null
+        if (response.nextPage == null) {
+          hasReachedEnd.value = true
+        }
+      } 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
       }
@@ -773,7 +838,7 @@ async function maybeBackfillToTarget(baselineCount: number, force = false) {
       calls++
     }
 
-    emits('backfill:stop', {fetched: (masonry.value as any[]).length, calls})
+    emits('backfill:stop', { fetched: (masonry.value as any[]).length, calls })
   } finally {
     backfillActive = false
   }
@@ -800,6 +865,8 @@ function reset() {
   containerHeight.value = 0
   currentPage.value = props.loadAtPage  // Reset current page tracking
   paginationHistory.value = [props.loadAtPage]
+  hasReachedEnd.value = false  // Reset end flag
+  loadError.value = null  // Reset error flag
 
   scrollProgress.value = {
     distanceToTrigger: 0,
@@ -807,9 +874,52 @@ function reset() {
   }
 }
 
+function destroy() {
+  // Cancel any ongoing loads
+  cancelLoad()
+  
+  // Reset all state
+  masonry.value = []
+  masonryContentHeight.value = 0
+  currentPage.value = null
+  paginationHistory.value = []
+  hasReachedEnd.value = false
+  loadError.value = null
+  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({
+      top: 0,
+      behavior: 'auto' // Instant scroll for destroy
+    })
+  }
+}
+
 const debouncedScrollHandler = debounce(async () => {
   if (useSwipeMode.value) return // Skip scroll handling in swipe mode
-  
+
   if (container.value) {
     viewportTop.value = container.value.scrollTop
     viewportHeight.value = container.value.clientHeight
@@ -846,10 +956,10 @@ function handleTouchMove(e: TouchEvent) {
 function handleTouchEnd(e: TouchEvent) {
   if (!useSwipeMode.value || !isDragging.value) return
   isDragging.value = false
-  
+
   const deltaY = swipeOffset.value - dragStartOffset.value
   const threshold = 100 // Minimum swipe distance to trigger navigation
-  
+
   if (Math.abs(deltaY) > threshold) {
     if (deltaY > 0 && previousItem.value) {
       // Swipe down - go to previous
@@ -865,7 +975,7 @@ function handleTouchEnd(e: TouchEvent) {
     // Snap back if swipe wasn't far enough
     snapToCurrentItem()
   }
-  
+
   e.preventDefault()
 }
 
@@ -888,10 +998,10 @@ function handleMouseMove(e: MouseEvent) {
 function handleMouseUp(e: MouseEvent) {
   if (!useSwipeMode.value || !isDragging.value) return
   isDragging.value = false
-  
+
   const deltaY = swipeOffset.value - dragStartOffset.value
   const threshold = 100
-  
+
   if (Math.abs(deltaY) > threshold) {
     if (deltaY > 0 && previousItem.value) {
       goToPreviousItem()
@@ -903,7 +1013,7 @@ function handleMouseUp(e: MouseEvent) {
   } else {
     snapToCurrentItem()
   }
-  
+
   e.preventDefault()
 }
 
@@ -913,10 +1023,10 @@ function goToNextItem() {
     loadNext()
     return
   }
-  
+
   currentSwipeIndex.value++
   snapToCurrentItem()
-  
+
   // Preload next item if we're near the end
   if (currentSwipeIndex.value >= masonry.value.length - 5) {
     loadNext()
@@ -925,14 +1035,14 @@ function goToNextItem() {
 
 function goToPreviousItem() {
   if (!previousItem.value) return
-  
+
   currentSwipeIndex.value--
   snapToCurrentItem()
 }
 
 function snapToCurrentItem() {
   if (!swipeContainer.value) return
-  
+
   // Use container height for swipe mode instead of window height
   const viewportHeight = swipeContainer.value.clientHeight
   swipeOffset.value = -currentSwipeIndex.value * viewportHeight
@@ -946,12 +1056,12 @@ function handleWindowResize() {
     currentSwipeIndex.value = 0
     swipeOffset.value = 0
   }
-  
+
   // If switching to swipe mode, ensure we have items loaded
   if (useSwipeMode.value && masonry.value.length === 0 && !isLoading.value) {
     loadPage(paginationHistory.value[0] as any)
   }
-  
+
   // Re-snap to current item on resize to adjust offset
   if (useSwipeMode.value) {
     snapToCurrentItem()
@@ -962,9 +1072,11 @@ function init(items: any[], page: any, next: any) {
   currentPage.value = page  // Track the initial current page
   paginationHistory.value = [page]
   paginationHistory.value.push(next)
+  // Update hasReachedEnd if next is null
+  hasReachedEnd.value = next == null
   // Diagnostics: check incoming initial items
   checkItemDimensions(items as any[], 'init')
-  
+
   if (useSwipeMode.value) {
     // In swipe mode, just add items without layout calculation
     masonry.value = [...(masonry.value as any[]), ...items]
@@ -1004,17 +1116,34 @@ watch(() => props.layoutMode, () => {
   }
 })
 
+// Watch container element to attach scroll listener when available
+watch(container, (el) => {
+  if (el && !useSwipeMode.value) {
+    // Attach scroll listener for masonry mode
+    el.removeEventListener('scroll', debouncedScrollHandler) // Just in case
+    el.addEventListener('scroll', debouncedScrollHandler, { passive: true })
+  } else if (el) {
+    // Remove scroll listener if switching to swipe mode
+    el.removeEventListener('scroll', debouncedScrollHandler)
+  }
+}, { immediate: true })
+
 // Watch for swipe mode changes to refresh layout and setup/teardown handlers
 watch(useSwipeMode, (newValue, oldValue) => {
   // Skip if this is the initial watch call and values are the same
   if (oldValue === undefined && newValue === false) return
-  
+
   nextTick(() => {
     if (newValue) {
       // Switching to Swipe Mode
       document.addEventListener('mousemove', handleMouseMove)
       document.addEventListener('mouseup', handleMouseUp)
-      
+
+      // Remove scroll listener
+      if (container.value) {
+        container.value.removeEventListener('scroll', debouncedScrollHandler)
+      }
+
       // Reset index if needed
       currentSwipeIndex.value = 0
       swipeOffset.value = 0
@@ -1025,7 +1154,7 @@ watch(useSwipeMode, (newValue, oldValue) => {
       // Switching to Masonry Mode
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
-      
+
       if (container.value && wrapper.value) {
         // Ensure containerWidth is up to date - use fixed dimensions if set
         if (fixedDimensions.value && fixedDimensions.value.width !== undefined) {
@@ -1033,16 +1162,16 @@ watch(useSwipeMode, (newValue, oldValue) => {
         } else {
           containerWidth.value = wrapper.value.clientWidth
         }
-        
-        // Re-attach scroll listener since container was re-created
+
+        // Attach scroll listener (container watcher will handle this, but ensure it's attached)
         container.value.removeEventListener('scroll', debouncedScrollHandler) // Just in case
         container.value.addEventListener('scroll', debouncedScrollHandler, { passive: true })
-        
+
         // Refresh layout with updated width
         if (masonry.value.length > 0) {
           columns.value = getColumnCount(layout.value as any, containerWidth.value)
           refreshLayout(masonry.value as any)
-          
+
           // Update viewport state
           viewportTop.value = container.value.scrollTop
           viewportHeight.value = container.value.clientHeight
@@ -1078,12 +1207,12 @@ watch(wrapper, (el) => {
     resizeObserver.disconnect()
     resizeObserver = null
   }
-  
+
   if (el && typeof ResizeObserver !== 'undefined') {
     resizeObserver = new ResizeObserver((entries) => {
       // Skip updates if fixed dimensions are set
       if (fixedDimensions.value) return
-      
+
       for (const entry of entries) {
         const newWidth = entry.contentRect.width
         const newHeight = entry.contentRect.height
@@ -1126,14 +1255,14 @@ onMounted(async () => {
   try {
     // Wait for next tick to ensure wrapper is mounted
     await nextTick()
-    
+
     // Container dimensions are managed by ResizeObserver
     // Only set initial values if ResizeObserver isn't available
     if (wrapper.value && !resizeObserver) {
       containerWidth.value = wrapper.value.clientWidth
       containerHeight.value = wrapper.value.clientHeight
     }
-    
+
     if (!useSwipeMode.value) {
       columns.value = getColumnCount(layout.value as any, containerWidth.value)
       if (container.value) {
@@ -1171,18 +1300,18 @@ onUnmounted(() => {
     resizeObserver.disconnect()
     resizeObserver = null
   }
-  
+
   container.value?.removeEventListener('scroll', debouncedScrollHandler)
   window.removeEventListener('resize', debouncedResizeHandler)
   window.removeEventListener('resize', handleWindowResize)
-  
+
   if (swipeContainer.value) {
     swipeContainer.value.removeEventListener('touchstart', handleTouchStart)
     swipeContainer.value.removeEventListener('touchmove', handleTouchMove)
     swipeContainer.value.removeEventListener('touchend', handleTouchEnd)
     swipeContainer.value.removeEventListener('mousedown', handleMouseDown)
   }
-  
+
   // Clean up mouse handlers
   document.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
@@ -1192,41 +1321,27 @@ onUnmounted(() => {
 <template>
   <div ref="wrapper" class="w-full h-full flex flex-col relative">
     <!-- Swipe Feed Mode (Mobile/Tablet) -->
-    <div v-if="useSwipeMode" 
-         class="overflow-hidden w-full flex-1 swipe-container touch-none select-none" 
-         :class="{ 'force-motion': props.forceMotion, 'cursor-grab': !isDragging, 'cursor-grabbing': isDragging }"
-         ref="swipeContainer"
-         style="height: 100%; max-height: 100%; position: relative;">
-      <div 
-        class="relative w-full"
-        :style="{
-          transform: `translateY(${swipeOffset}px)`,
-          transition: isDragging ? 'none' : `transform ${transitionDurationMs}ms ${transitionEasing}`,
-          height: `${masonry.length * 100}%`
-        }">
-        <div 
-          v-for="(item, index) in masonry" 
-          :key="`${item.page}-${item.id}`"
-          class="absolute top-0 left-0 w-full"
-          :style="{ 
+    <div v-if="useSwipeMode" class="overflow-hidden w-full flex-1 swipe-container touch-none select-none"
+      :class="{ 'force-motion': props.forceMotion, 'cursor-grab': !isDragging, 'cursor-grabbing': isDragging }"
+      ref="swipeContainer" style="height: 100%; max-height: 100%; position: relative;">
+      <div class="relative w-full" :style="{
+        transform: `translateY(${swipeOffset}px)`,
+        transition: isDragging ? 'none' : `transform ${transitionDurationMs}ms ${transitionEasing}`,
+        height: `${masonry.length * 100}%`
+      }">
+        <div v-for="(item, index) in masonry" :key="`${item.page}-${item.id}`" class="absolute top-0 left-0 w-full"
+          :style="{
             top: `${index * (100 / masonry.length)}%`,
             height: `${100 / masonry.length}%`
           }">
           <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">
-                <MasonryItem
-                  :item="item"
-                  :remove="remove"
-                  :header-height="layout.header"
-                  :footer-height="layout.footer"
-                  :in-swipe-mode="true"
-                  :is-active="index === currentSwipeIndex"
+                <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)"
                   @preload:error="(p) => emits('item:preload:error', p)"
-                  @mouse-enter="(p) => emits('item:mouse-enter', p)"
-                  @mouse-leave="(p) => emits('item:mouse-leave', p)"
-                >
+                  @mouse-enter="(p) => emits('item:mouse-enter', p)" @mouse-leave="(p) => emits('item:mouse-leave', p)">
                   <!-- Pass through header and footer slots to MasonryItem -->
                   <template #header="slotProps">
                     <slot name="item-header" v-bind="slotProps" />
@@ -1240,39 +1355,35 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-      
-
-
-
+      <!-- End of list message for swipe mode -->
+      <div v-if="hasReachedEnd && masonry.length > 0" class="w-full py-8 text-center">
+        <slot name="end-message">
+          <p class="text-gray-500 dark:text-gray-400">You've reached the end</p>
+        </slot>
+      </div>
+      <!-- Error message for swipe mode -->
+      <div v-if="loadError && masonry.length > 0" class="w-full py-8 text-center">
+        <slot name="error-message" :error="loadError">
+          <p class="text-red-500 dark:text-red-400">Failed to load content: {{ loadError.message }}</p>
+        </slot>
+      </div>
     </div>
 
     <!-- Masonry Grid Mode (Desktop) -->
-    <div v-else 
-         class="overflow-auto w-full flex-1 masonry-container" 
-         :class="{ 'force-motion': props.forceMotion }" 
-         ref="container">
+    <div v-else class="overflow-auto w-full flex-1 masonry-container" :class="{ 'force-motion': props.forceMotion }"
+      ref="container">
       <div class="relative"
-           :style="{height: `${masonryContentHeight}px`, '--masonry-duration': `${transitionDurationMs}ms`, '--masonry-leave-duration': `${leaveDurationMs}ms`, '--masonry-ease': transitionEasing}">
-        <transition-group name="masonry" :css="false" @enter="enter" @before-enter="beforeEnter"
-                          @leave="leave"
-                          @before-leave="beforeLeave">
-          <div v-for="(item, i) in visibleMasonry" :key="`${item.page}-${item.id}`"
-               class="absolute masonry-item"
-               v-bind="getItemAttributes(item, i)">
+        :style="{ height: `${masonryContentHeight}px`, '--masonry-duration': `${transitionDurationMs}ms`, '--masonry-leave-duration': `${leaveDurationMs}ms`, '--masonry-ease': transitionEasing }">
+        <transition-group name="masonry" :css="false" @enter="enter" @before-enter="beforeEnter" @leave="leave"
+          @before-leave="beforeLeave">
+          <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">
-              <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)"
+              <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)"
-                @mouse-enter="(p) => emits('item:mouse-enter', p)"
-                @mouse-leave="(p) => emits('item:mouse-leave', p)"
-              >
+                @mouse-enter="(p) => emits('item:mouse-enter', p)" @mouse-leave="(p) => emits('item:mouse-leave', p)">
                 <!-- Pass through header and footer slots to MasonryItem -->
                 <template #header="slotProps">
                   <slot name="item-header" v-bind="slotProps" />
@@ -1284,8 +1395,18 @@ onUnmounted(() => {
             </slot>
           </div>
         </transition-group>
-
-
+      </div>
+      <!-- End of list message -->
+      <div v-if="hasReachedEnd && masonry.length > 0" class="w-full py-8 text-center">
+        <slot name="end-message">
+          <p class="text-gray-500 dark:text-gray-400">You've reached the end</p>
+        </slot>
+      </div>
+      <!-- Error message -->
+      <div v-if="loadError && masonry.length > 0" class="w-full py-8 text-center">
+        <slot name="error-message" :error="loadError">
+          <p class="text-red-500 dark:text-red-400">Failed to load content: {{ loadError.message }}</p>
+        </slot>
       </div>
     </div>
   </div>
@@ -1300,7 +1421,7 @@ onUnmounted(() => {
   will-change: transform, opacity;
   contain: layout paint;
   transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),
-  opacity var(--masonry-leave-duration, 160ms) ease-out var(--masonry-opacity-delay, 0ms);
+    opacity var(--masonry-leave-duration, 160ms) ease-out var(--masonry-opacity-delay, 0ms);
   backface-visibility: hidden;
 }
 
@@ -1309,6 +1430,7 @@ onUnmounted(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .masonry-container:not(.force-motion) .masonry-item,
   .masonry-container:not(.force-motion) .masonry-move {
     transition-duration: 1ms !important;