@wyxos/vibe 1.2.16 → 1.3.1

package/package.json

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

package/src/Masonry.vue

@@ -2,11 +2,11 @@
 import {computed, nextTick, onMounted, onUnmounted, ref} from "vue";
 import calculateLayout from "./calculateLayout.js";
 import { debounce } from 'lodash-es'
-import { 
-  getColumnCount, 
-  calculateContainerHeight, 
+import {
+  getColumnCount,
+  calculateContainerHeight,
   getItemAttributes,
-  calculateColumnHeights 
+  calculateColumnHeights
 } from './masonryUtils.js'
 import { useMasonryTransitions } from './useMasonryTransitions.js'
 import { useMasonryScroll } from './useMasonryScroll.js'
@@ -40,6 +40,18 @@ const props = defineProps({
   maxItems: {
     type: Number,
     default: 100
+  },
+  pageSize: {
+    type: Number,
+    default: 40
+  },
+  transitionDurationMs: {
+    type: Number,
+    default: 450
+  },
+  transitionEasing: {
+    type: String,
+    default: 'cubic-bezier(.22,.61,.36,1)'
   }
 })
 
@@ -81,10 +93,32 @@ 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)
+  // Use longest column to match the trigger logic in useMasonryScroll.js
+  const longestColumn = Math.max(...columnHeights)
+  const triggerPoint = longestColumn + 300 // Match: longestColumn + 300 < visibleBottom
+
+  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,7 +129,10 @@ const { handleScroll } = useMasonryScroll({
   containerHeight,
   isLoading,
   maxItems: props.maxItems,
+  pageSize: props.pageSize,
   refreshLayout,
+  // Allow scroll composable to set items without recalculating layout (phase-1 cleanup)
+  setItemsRaw: (items) => { masonry.value = items },
   loadNext
 })
 
@@ -104,12 +141,22 @@ defineExpose({
   refreshLayout,
   containerHeight,
   onRemove,
+  removeMany,
   loadNext,
-  loadPage
+  loadPage,
+  reset,
+  paginationHistory
 })
 
 function calculateHeight(content) {
-  containerHeight.value = calculateContainerHeight(content)
+  const newHeight = calculateContainerHeight(content)
+  let floor = 0
+  if (container.value) {
+    const { scrollTop, clientHeight } = container.value
+    // Ensure the container never shrinks below the visible viewport bottom + small buffer
+    floor = scrollTop + clientHeight + 100
+  }
+  containerHeight.value = Math.max(newHeight, floor)
 }
 
 function refreshLayout(items) {
@@ -121,18 +168,21 @@ function refreshLayout(items) {
 }
 
 async function getContent(page) {
-  const response = await props.getNextPage(page)
-
-  refreshLayout([...masonry.value, ...response.items])
-
-  return response
+  try {
+    const response = await props.getNextPage(page)
+    refreshLayout([...masonry.value, ...response.items])
+    return response
+  } catch (error) {
+    console.error('Error in getContent:', error)
+    throw error
+  }
 }
 
 async function loadPage(page) {
   if (isLoading.value) return // Prevent concurrent loading
-  
+
   isLoading.value = true
-  
+
   try {
     const response = await getContent(page)
     paginationHistory.value.push(response.nextPage)
@@ -147,9 +197,9 @@ async function loadPage(page) {
 
 async function loadNext() {
   if (isLoading.value) return // Prevent concurrent loading
-  
+
   isLoading.value = true
-  
+
   try {
     const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
     const response = await getContent(currentPage)
@@ -167,11 +217,51 @@ function onRemove(item) {
   refreshLayout(masonry.value.filter(i => i.id !== item.id))
 }
 
+function removeMany(items) {
+  if (!items || items.length === 0) return
+  const ids = new Set(items.map(i => i.id))
+  const next = masonry.value.filter(i => !ids.has(i.id))
+  refreshLayout(next)
+}
+
 function onResize() {
   columns.value = getColumnCount(layout.value)
   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
+  }
+}
+
+// Create debounced functions with stable references
+const debouncedScrollHandler = debounce(() => {
+  handleScroll()
+  updateScrollProgress()
+}, 200)
+
+const debouncedResizeHandler = debounce(onResize, 200)
+
 onMounted(async () => {
   try {
     columns.value = getColumnCount(layout.value)
@@ -188,31 +278,34 @@ onMounted(async () => {
       // Just refresh the layout with any existing items
       refreshLayout(masonry.value)
     }
+
+    updateScrollProgress()
+
   } catch (error) {
     console.error('Error during component initialization:', error)
+    // Ensure loading state is reset if error occurs during initialization
+    isLoading.value = false
   }
 
-  container.value?.addEventListener('scroll', debounce(handleScroll, 200));
-
-  window.addEventListener('resize', debounce(onResize, 200));
+  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>
 
 <template>
-  <div class="overflow-auto w-full flex-1" ref="container">
-    <div class="relative" :style="{height: `${containerHeight}px`}">
-      <transition-group :css="false" @enter="onEnter" @before-enter="onBeforeEnter"
+  <div class="overflow-auto w-full flex-1 masonry-container" ref="container"
+>    <div class="relative" :style="{height: `${containerHeight}px`, '--masonry-duration': `${transitionDurationMs}ms`, '--masonry-ease': transitionEasing}">
+      <transition-group name="masonry" :css="false" @enter="onEnter" @before-enter="onBeforeEnter"
                         @leave="onLeave"
                         @before-leave="onBeforeLeave">
-        <div v-for="item in masonry" :key="`${item.page}-${item.id}`"
-             class="absolute transition-[top,left,opacity] duration-500 ease-in-out"
-             v-bind="getItemAttributes(item)">
+        <div v-for="(item, i) in masonry" :key="`${item.page}-${item.id}`"
+             class="absolute masonry-item"
+             v-bind="getItemAttributes(item, i)">
           <slot name="item" v-bind="{item, onRemove}">
             <img :src="item.src" class="w-full"/>
             <button class="absolute bottom-0 right-0 bg-red-500 text-white p-2 rounded cursor-pointer"
@@ -222,6 +315,35 @@ 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>
+
+<style scoped>
+/* Prevent browser scroll anchoring from adjusting scroll on content changes */
+.masonry-container {
+  overflow-anchor: none;
+}
+
+/* Items animate transform only for smooth, compositor-driven motion */
+.masonry-item {
+  will-change: transform, opacity;
+  transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22,.61,.36,1)),
+              opacity 200ms linear;
+  backface-visibility: hidden;
+}
+
+/* TransitionGroup move-class for FLIP reordering */
+.masonry-move {
+  transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22,.61,.36,1));
+}
+</style>

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/masonryUtils.js

@@ -17,9 +17,12 @@ export function getColumnCount(layout) {
  * Calculate container height based on item positions
  */
 export function calculateContainerHeight(items) {
-  return items.reduce((acc, item) => {
+  const contentHeight = items.reduce((acc, item) => {
     return Math.max(acc, item.top + item.columnHeight)
   }, 0)
+  
+  // Add 500px buffer to the container height
+  return contentHeight + 500
 }
 
 /**
@@ -27,8 +30,11 @@ export function calculateContainerHeight(items) {
  */
 export function getItemStyle(item) {
   return {
-    top: `${item.top}px`,
-    left: `${item.left}px`,
+    // Use transform-based positioning for smooth, compositor-driven movement
+    transform: `translate3d(${item.left}px, ${item.top}px, 0)`,
+    // Keep top/left at 0 so only transform changes between layouts
+    top: '0px',
+    left: '0px',
     width: `${item.columnWidth}px`,
     height: `${item.columnHeight}px`
   }
@@ -37,11 +43,13 @@ export function getItemStyle(item) {
 /**
  * Get item attributes for rendering
  */
-export function getItemAttributes(item) {
+export function getItemAttributes(item, index = 0) {
   return {
     style: getItemStyle(item),
     'data-top': item.top,
+    'data-left': item.left,
     'data-id': `${item.page}-${item.id}`,
+    'data-index': index,
   }
 }
 

package/src/useMasonryScroll.js

@@ -11,73 +11,146 @@ export function useMasonryScroll({
   containerHeight,
   isLoading,
   maxItems,
+  pageSize,
   refreshLayout,
+  setItemsRaw,
   loadNext
 }) {
-  
+  let cleanupInProgress = false
+
   async function handleScroll() {
     const { scrollTop, clientHeight } = container.value
     const visibleBottom = scrollTop + clientHeight
 
     const columnHeights = calculateColumnHeights(masonry.value, columns.value)
-    const whitespaceVisible = columnHeights.some(height => height + 300 < visibleBottom - 1)
+    // Use the longest column instead of shortest for better trigger timing
+    const longestColumn = Math.max(...columnHeights)
+    const whitespaceVisible = longestColumn + 300 < visibleBottom - 1
     const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
 
-    if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value) {
+    if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value && !cleanupInProgress) {
       try {
         // Handle cleanup when too many items
         if (masonry.value.length > maxItems) {
           await handleItemCleanup(columnHeights)
         }
 
-        await loadNext() // loadNext manages its own loading state
+        await loadNext() // loadNext manages its own loading state and error handling
         await nextTick()
       } catch (error) {
         console.error('Error in scroll handler:', error)
+        // loadNext already handles its own loading state, no need to reset here
       }
     }
   }
 
-  async function handleItemCleanup(columnHeights) {
-    const firstItem = masonry.value[0]
-    
-    if (!firstItem) {
-      // Don't set isLoading here - let main handleScroll manage it
+  async function handleItemCleanup(columnHeightsBefore) {
+    if (!masonry.value.length) {
+      return
+    }
+
+    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
     }
 
-    const page = firstItem.page
-    const removedItems = masonry.value.filter(i => i.page !== page)
-    
-    if (removedItems.length === masonry.value.length) {
-      // Don't set isLoading here - let main handleScroll manage it  
+    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
+      }
+    }
+
+    // Phase 1: remove items (trigger leave) WITHOUT moving remaining items
+    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(removedItems)
+    cleanupInProgress = true
+
+    // Set raw items so TransitionGroup triggers leave on removed items, but remaining items keep their current transforms
+    setItemsRaw(remainingItems)
+
     await nextTick()
-    
-    await adjustScrollPosition(columnHeights)
+    // Wait for leave transitions to complete; use a conservative timeout
+    await waitFor(msLeaveEstimate())
+
+    // Phase 2: now recompute layout and animate moves for remaining items
+    refreshLayout(remainingItems)
+    await nextTick()
+
+    // Maintain anchor after moves are applied
+    await maintainAnchorPosition()
+
+    cleanupInProgress = false
   }
 
-  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,
-          behavior: 'smooth'
-        })
+  function msLeaveEstimate() {
+    // Default estimate in ms; tweak if you change CSS leave timings
+    return 700
+  }
+
+  function waitFor(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  async function maintainAnchorPosition() {
+    if (!container.value) return
+
+    const { scrollTop, clientHeight } = container.value
+    const pivotY = scrollTop + clientHeight * 0.4 // aim to keep ~40% down the viewport stable
+
+    // Recompute column heights with the new layout
+    const heights = calculateColumnHeights(masonry.value, columns.value)
+    const anchorColumnIndex = heights.indexOf(Math.max(...heights))
+
+    // Find items belonging to the anchor column
+    const itemsInAnchor = masonry.value.filter((_, index) => index % columns.value === anchorColumnIndex)
+    if (itemsInAnchor.length === 0) return
+
+    // Choose the item whose top is the largest <= pivotY (closest above pivot)
+    let pivotItem = itemsInAnchor[0]
+    for (const it of itemsInAnchor) {
+      if (it.top <= pivotY && it.top >= pivotItem.top) {
+        pivotItem = it
       }
     }
+
+    const desiredTop = Math.max(0, pivotItem.top - clientHeight * 0.4)
+
+    // Only adjust if we drifted significantly (> 4px) to avoid tiny corrections
+    if (Math.abs(desiredTop - scrollTop) > 4) {
+      container.value.scrollTo({ top: desiredTop, behavior: 'auto' })
+    }
+  }
+
+  // Legacy function kept for compatibility; prefer maintainAnchorPosition()
+  async function adjustScrollPosition() {
+    await maintainAnchorPosition()
   }
 
   return {

package/src/useMasonryTransitions.js

@@ -3,37 +3,74 @@
  */
 export function useMasonryTransitions(masonry) {
   function onEnter(el, done) {
-    // Set top to data-top
-    const top = el.dataset.top
+    // Animate to its final transform (translate3d(left, top, 0)) with subtle scale/opacity
+    const left = parseInt(el.dataset.left || '0', 10)
+    const top = parseInt(el.dataset.top || '0', 10)
+    const index = parseInt(el.dataset.index || '0', 10)
+
+    // Small stagger per item, capped
+    const delay = Math.min(index * 20, 160)
+
+    // Apply delay only for the enter; avoid affecting move transitions
+    const prevDelay = el.style.transitionDelay
+    el.style.transitionDelay = `${delay}ms`
+
     requestAnimationFrame(() => {
-      el.style.top = `${top}px`
-      done()
+      el.style.opacity = '1'
+      el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
+      const clear = () => {
+        el.style.transitionDelay = prevDelay || '' // restore
+        el.removeEventListener('transitionend', clear)
+        done()
+      }
+      el.addEventListener('transitionend', clear)
     })
   }
 
   function onBeforeEnter(el) {
-    // Set top to last item + offset
-    const lastItem = masonry.value[masonry.value.length - 1]
-    if (lastItem) {
-      const lastTop = lastItem.top + lastItem.columnHeight + 10
-      el.style.top = `${lastTop}px`
-    } else {
-      el.style.top = '0px'
-    }
+    // Start slightly below and slightly smaller, faded
+    const left = parseInt(el.dataset.left || '0', 10)
+    const top = parseInt(el.dataset.top || '0', 10)
+    el.style.opacity = '0'
+    el.style.transform = `translate3d(${left}px, ${top + 10}px, 0) scale(0.985)`
   }
 
   function onBeforeLeave(el) {
-    // Ensure it's at its current position before animating
+    // Ensure it is at its current transform position before animating
+    const left = parseInt(el.dataset.left || '0', 10)
+    const top = parseInt(el.dataset.top || '0', 10)
     el.style.transition = 'none'
-    el.style.top = `${el.offsetTop}px`
+    el.style.opacity = '1'
+    el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
     void el.offsetWidth // force reflow to flush style
     el.style.transition = '' // allow transition to apply again
   }
 
   function onLeave(el, done) {
-    el.style.top = '-600px'
-    el.style.opacity = '0'
-    el.addEventListener('transitionend', done)
+    const left = parseInt(el.dataset.left || '0', 10)
+    const top = parseInt(el.dataset.top || '0', 10)
+
+    // Run on next frame to ensure transition styles are applied
+    const cleanup = () => {
+      el.removeEventListener('transitionend', onEnd)
+      clearTimeout(fallback)
+    }
+    const onEnd = (e) => {
+      if (!e || e.target === el) {
+        cleanup()
+        done()
+      }
+    }
+    const fallback = setTimeout(() => {
+      cleanup()
+      done()
+    }, 800)
+
+    requestAnimationFrame(() => {
+      el.style.opacity = '0'
+      el.style.transform = `translate3d(${left}px, ${top + 10}px, 0) scale(0.985)`
+      el.addEventListener('transitionend', onEnd)
+    })
   }
 
   return {