@wyxos/vibe 1.2.15 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.2.15",
+  "version": "1.3.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/src/Masonry.vue

@@ -40,6 +40,10 @@ const props = defineProps({
   maxItems: {
     type: Number,
     default: 100
+  },
+  pageSize: {
+    type: Number,
+    default: 40
   }
 })
 
@@ -81,10 +85,31 @@ const isLoading = ref(false)
 
 const containerHeight = ref(0)
 
-const columnHeights = computed(() => {
-  return calculateColumnHeights(masonry.value, columns.value)
+// Scroll progress tracking
+const scrollProgress = ref({
+  distanceToTrigger: 0,
+  isNearTrigger: false
 })
 
+const updateScrollProgress = () => {
+  if (!container.value) return
+  
+  const { scrollTop, clientHeight } = container.value
+  const visibleBottom = scrollTop + clientHeight
+  
+  const columnHeights = calculateColumnHeights(masonry.value, columns.value)
+  const shortestColumn = Math.min(...columnHeights)
+  const triggerPoint = shortestColumn - 300 // Same threshold as in scroll handler
+  
+  const distanceToTrigger = Math.max(0, triggerPoint - visibleBottom)
+  const isNearTrigger = distanceToTrigger <= 100
+  
+  scrollProgress.value = {
+    distanceToTrigger: Math.round(distanceToTrigger),
+    isNearTrigger
+  }
+}
+
 // Setup composables
 const { onEnter, onBeforeEnter, onBeforeLeave, onLeave } = useMasonryTransitions(masonry)
 
@@ -95,6 +120,7 @@ const { handleScroll } = useMasonryScroll({
   containerHeight,
   isLoading,
   maxItems: props.maxItems,
+  pageSize: props.pageSize,
   refreshLayout,
   loadNext
 })
@@ -105,7 +131,8 @@ defineExpose({
   containerHeight,
   onRemove,
   loadNext,
-  loadPage
+  loadPage,
+  reset
 })
 
 function calculateHeight(content) {
@@ -129,14 +156,38 @@ async function getContent(page) {
 }
 
 async function loadPage(page) {
-  const response = await getContent(page)
-  paginationHistory.value.push(response.nextPage)
-  return response
+  if (isLoading.value) return // Prevent concurrent loading
+  
+  isLoading.value = true
+  
+  try {
+    const response = await getContent(page)
+    paginationHistory.value.push(response.nextPage)
+    return response
+  } catch (error) {
+    console.error('Error loading page:', error)
+    throw error
+  } finally {
+    isLoading.value = false
+  }
 }
 
 async function loadNext() {
-  const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
-  return await loadPage(currentPage)
+  if (isLoading.value) return // Prevent concurrent loading
+  
+  isLoading.value = true
+  
+  try {
+    const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
+    const response = await getContent(currentPage)
+    paginationHistory.value.push(response.nextPage)
+    return response
+  } catch (error) {
+    console.error('Error loading next page:', error)
+    throw error
+  } finally {
+    isLoading.value = false
+  }
 }
 
 function onRemove(item) {
@@ -148,35 +199,69 @@ function onResize() {
   refreshLayout(masonry.value)
 }
 
-onMounted(async () => {
-  isLoading.value = true
-
-  columns.value = getColumnCount(layout.value)
-
-  // For cursor-based pagination, loadAtPage can be null for the first request
-  const initialPage = props.loadAtPage
-  paginationHistory.value = [initialPage]
-
-  // Skip initial load if skipInitialLoad prop is true
-  if (!props.skipInitialLoad) {
-    await loadPage(paginationHistory.value[0])
-  } else {
-    await nextTick()
-    // Just refresh the layout with any existing items
-    refreshLayout(masonry.value)
+function reset() {
+  // Scroll back to top first (while items still exist to scroll through)
+  if (container.value) {
+    container.value.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+  
+  // Clear all items
+  masonry.value = []
+  
+  // Reset container height
+  containerHeight.value = 0
+  
+  // Reset pagination history to initial state
+  paginationHistory.value = [props.loadAtPage]
+  
+  // Reset scroll progress
+  scrollProgress.value = {
+    distanceToTrigger: 0,
+    isNearTrigger: false
   }
+}
 
-  isLoading.value = false
+// Create debounced functions with stable references
+const debouncedScrollHandler = debounce(() => {
+  handleScroll()
+  updateScrollProgress()
+}, 200)
 
-  container.value?.addEventListener('scroll', debounce(handleScroll, 200));
+const debouncedResizeHandler = debounce(onResize, 200)
 
-  window.addEventListener('resize', debounce(onResize, 200));
+onMounted(async () => {
+  try {
+    columns.value = getColumnCount(layout.value)
+
+    // For cursor-based pagination, loadAtPage can be null for the first request
+    const initialPage = props.loadAtPage
+    paginationHistory.value = [initialPage]
+
+    // Skip initial load if skipInitialLoad prop is true
+    if (!props.skipInitialLoad) {
+      await loadPage(paginationHistory.value[0]) // loadPage manages its own loading state
+    } else {
+      await nextTick()
+      // Just refresh the layout with any existing items
+      refreshLayout(masonry.value)
+    }
+    
+    updateScrollProgress()
+    
+  } catch (error) {
+    console.error('Error during component initialization:', error)
+  }
+
+  container.value?.addEventListener('scroll', debouncedScrollHandler)
+  window.addEventListener('resize', debouncedResizeHandler)
 })
 
 onUnmounted(() => {
-  container.value?.removeEventListener('scroll', debounce(handleScroll, 200));
-
-  window.removeEventListener('resize', debounce(onResize, 200));
+  container.value?.removeEventListener('scroll', debouncedScrollHandler)
+  window.removeEventListener('resize', debouncedResizeHandler)
 })
 </script>
 
@@ -198,6 +283,15 @@ onUnmounted(() => {
           </slot>
         </div>
       </transition-group>
+      
+      <!-- Scroll Progress Badge -->
+      <div v-if="containerHeight > 0" 
+           class="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"
+           :class="{'opacity-50 hover:opacity-100': !scrollProgress.isNearTrigger, 'opacity-100': scrollProgress.isNearTrigger}">
+        <span>{{ masonry.length }} items</span>
+        <span class="mx-2">|</span>
+        <span>{{ scrollProgress.distanceToTrigger }}px to load</span>
+      </div>
     </div>
   </div>
 </template>

package/src/calculateLayout.js

@@ -54,7 +54,8 @@ export default function calculateLayout(items, container, columnCount, options =
         const item = items[index];
         const newItem = { ...item };
 
-        const col = index % columnCount;
+        // Find the column with the shortest height for proper masonry layout
+        const col = columnHeights.indexOf(Math.min(...columnHeights));
         const originalWidth = item.width;
         const originalHeight = item.height;
 

package/src/useMasonryScroll.js

@@ -11,10 +11,10 @@ export function useMasonryScroll({
   containerHeight,
   isLoading,
   maxItems,
+  pageSize,
   refreshLayout,
   loadNext
 }) {
-  
   async function handleScroll() {
     const { scrollTop, clientHeight } = container.value
     const visibleBottom = scrollTop + clientHeight
@@ -24,56 +24,86 @@ export function useMasonryScroll({
     const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
 
     if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value) {
-      isLoading.value = true
+      try {
+        // Handle cleanup when too many items
+        if (masonry.value.length > maxItems) {
+          await handleItemCleanup(columnHeights)
+        }
 
-      // Handle cleanup when too many items
-      if (masonry.value.length > maxItems) {
-        await handleItemCleanup(columnHeights)
-      }
 
-      await loadNext()
-      await nextTick()
-      isLoading.value = false
+        await loadNext() // loadNext manages its own loading state
+        await nextTick()
+      } catch (error) {
+        console.error('Error in scroll handler:', error)
+      }
     }
   }
 
   async function handleItemCleanup(columnHeights) {
-    const firstItem = masonry.value[0]
-    
-    if (!firstItem) {
-      await loadNext()
-      await nextTick()
-      isLoading.value = false
+    if (!masonry.value.length) {
       return
     }
 
-    const page = firstItem.page
-    const removedItems = masonry.value.filter(i => i.page !== page)
-    
-    if (removedItems.length === masonry.value.length) {
-      await loadNext()
-      await nextTick()
-      isLoading.value = false
+    if(masonry.value.length <= pageSize) {
+        // If we have fewer items than pageSize, no cleanup needed
+        return
+    }
+
+    // Group items by page to understand page structure
+    const pageGroups = masonry.value.reduce((acc, item) => {
+      if (!acc[item.page]) {
+        acc[item.page] = []
+      }
+      acc[item.page].push(item)
+      return acc
+    }, {})
+
+    const pages = Object.keys(pageGroups).sort((a, b) => parseInt(a) - parseInt(b))
+
+    if (pages.length === 0) {
       return
     }
 
-    refreshLayout(removedItems)
-    await nextTick()
+    let totalRemovedItems = 0
+    let pagesToRemove = []
+
+    // Remove pages cumulatively until we reach at least pageSize items
+    for (const page of pages) {
+      pagesToRemove.push(page)
+      totalRemovedItems += pageGroups[page].length
+
+      if (totalRemovedItems >= pageSize) {
+        break
+      }
+    }
+
+    // Filter out items from pages to be removed
+    const remainingItems = masonry.value.filter(item => !pagesToRemove.includes(item.page.toString()))
+
+    if (remainingItems.length === masonry.value.length) {
+      // No items were removed, nothing to do
+      return
+    }
+
+    refreshLayout(remainingItems)
     
+
+    await nextTick()
+
     await adjustScrollPosition(columnHeights)
   }
 
   async function adjustScrollPosition(columnHeights) {
     const lowestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights))
     const lastItemInColumn = masonry.value.filter((_, index) => index % columns.value === lowestColumnIndex).pop()
-    
+
     if (lastItemInColumn) {
       const lastItemInColumnTop = lastItemInColumn.top + lastItemInColumn.columnHeight
       const lastItemInColumnBottom = lastItemInColumnTop + lastItemInColumn.columnHeight
       const containerTop = container.value.scrollTop
       const containerBottom = containerTop + container.value.clientHeight
       const itemInView = lastItemInColumnTop >= containerTop && lastItemInColumnBottom <= containerBottom
-      
+
       if (!itemInView) {
         container.value.scrollTo({
           top: lastItemInColumnTop - 10,