@wyxos/vibe 1.4.1 → 1.5.0

package/src/calculateLayout.ts

@@ -1,177 +1,194 @@
-import type { LayoutOptions, MasonryItem, ProcessedMasonryItem } from './types'
+import type {LayoutOptions, MasonryItem, ProcessedMasonryItem} from './types'
+
+let __cachedScrollbarWidth: number | null = null
 
 function getScrollbarWidth(): number {
-  const div = document.createElement('div')
-  div.style.visibility = 'hidden'
-  div.style.overflow = 'scroll'
-  ;(div.style as any).msOverflowStyle = 'scrollbar'
-  div.style.width = '100px'
-  div.style.height = '100px'
-  document.body.appendChild(div)
-
-  const inner = document.createElement('div')
-  inner.style.width = '100%'
-  div.appendChild(inner)
-
-  const scrollbarWidth = div.offsetWidth - inner.offsetWidth
-  document.body.removeChild(div)
-  return scrollbarWidth
+    if (__cachedScrollbarWidth != null) return __cachedScrollbarWidth
+    const div = document.createElement('div')
+    div.style.visibility = 'hidden'
+    div.style.overflow = 'scroll'
+    ;(div.style as any).msOverflowStyle = 'scrollbar'
+    div.style.width = '100px'
+    div.style.height = '100px'
+    document.body.appendChild(div)
+
+    const inner = document.createElement('div')
+    inner.style.width = '100%'
+    div.appendChild(inner)
+
+    const scrollbarWidth = div.offsetWidth - inner.offsetWidth
+    document.body.removeChild(div)
+    __cachedScrollbarWidth = scrollbarWidth
+    return scrollbarWidth
 }
 
 export default function calculateLayout(
-  items: MasonryItem[],
-  container: HTMLElement,
-  columnCount: number,
-  options: LayoutOptions = {}
+    items: MasonryItem[],
+    container: HTMLElement,
+    columnCount: number,
+    options: LayoutOptions = {}
 ): ProcessedMasonryItem[] {
-  const {
-    gutterX = 0,
-    gutterY = 0,
-    header = 0,
-    footer = 0,
-    paddingLeft = 0,
-    paddingRight = 0,
-    sizes = {
-      base: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-      '2xl': 6
-    },
-    placement = 'masonry'
-  } = options
-
-  let cssPaddingLeft = 0
-  let cssPaddingRight = 0
-  try {
-    if (container && container.nodeType === 1 && typeof window !== 'undefined' && window.getComputedStyle) {
-      const styles = window.getComputedStyle(container)
-      cssPaddingLeft = parseFloat(styles.paddingLeft) || 0
-      cssPaddingRight = parseFloat(styles.paddingRight) || 0
+    const {
+        gutterX = 0,
+        gutterY = 0,
+        header = 0,
+        footer = 0,
+        paddingLeft = 0,
+        paddingRight = 0,
+        sizes = {
+            base: 1,
+            sm: 2,
+            md: 3,
+            lg: 4,
+            xl: 5,
+            '2xl': 6
+        },
+        placement = 'masonry'
+    } = options
+
+    let cssPaddingLeft = 0
+    let cssPaddingRight = 0
+    try {
+        if (container && container.nodeType === 1 && typeof window !== 'undefined' && window.getComputedStyle) {
+            const styles = window.getComputedStyle(container)
+            cssPaddingLeft = parseFloat(styles.paddingLeft) || 0
+            cssPaddingRight = parseFloat(styles.paddingRight) || 0
+        }
+    } catch {
+        // noop
     }
-  } catch {
-    // noop
-  }
 
-  const effectivePaddingLeft = (paddingLeft || 0) + cssPaddingLeft
-  const effectivePaddingRight = (paddingRight || 0) + cssPaddingRight
+    const effectivePaddingLeft = (paddingLeft || 0) + cssPaddingLeft
+    const effectivePaddingRight = (paddingRight || 0) + cssPaddingRight
 
-  const measuredScrollbarWidth = container.offsetWidth - container.clientWidth
-  const scrollbarWidth = measuredScrollbarWidth > 0 ? measuredScrollbarWidth + 2 : getScrollbarWidth() + 2
+    const measuredScrollbarWidth = container.offsetWidth - container.clientWidth
+    const scrollbarWidth = measuredScrollbarWidth > 0 ? measuredScrollbarWidth + 2 : getScrollbarWidth() + 2
 
-  const usableWidth = container.offsetWidth - scrollbarWidth - effectivePaddingLeft - effectivePaddingRight
-  const totalGutterX = gutterX * (columnCount - 1)
-  const columnWidth = Math.floor((usableWidth - totalGutterX) / columnCount)
+    const usableWidth = container.offsetWidth - scrollbarWidth - effectivePaddingLeft - effectivePaddingRight
+    const totalGutterX = gutterX * (columnCount - 1)
+    const columnWidth = Math.floor((usableWidth - totalGutterX) / columnCount)
 
-  const baseHeights = items.map((item) => {
-    const originalWidth = item.width
-    const originalHeight = item.height
-    const imageHeight = Math.round((columnWidth * originalHeight) / originalWidth)
-    return imageHeight + footer + header
-  })
+    const baseHeights = items.map((item) => {
+        const originalWidth = item.width
+        const originalHeight = item.height
+        const imageHeight = Math.round((columnWidth * originalHeight) / originalWidth)
+        return imageHeight + footer + header
+    })
 
-  if (placement === 'sequential-balanced') {
-    const n = baseHeights.length
-    if (n === 0) return []
+    if (placement === 'sequential-balanced') {
+        const n = baseHeights.length
+        if (n === 0) return []
 
-    const addWithGutter = (currentSum: number, itemsInGroup: number, nextHeight: number) => {
-      return currentSum + (itemsInGroup > 0 ? gutterY : 0) + nextHeight
-    }
+        const addWithGutter = (currentSum: number, itemsInGroup: number, nextHeight: number) => {
+            return currentSum + (itemsInGroup > 0 ? gutterY : 0) + nextHeight
+        }
 
-    let low = Math.max(...baseHeights)
-    let high = baseHeights.reduce((sum, h) => sum + h, 0) + gutterY * Math.max(0, n - 1)
-
-    const canPartition = (cap: number) => {
-      let groups = 1
-      let sum = 0
-      let count = 0
-      for (let i = 0; i < n; i++) {
-        const h = baseHeights[i]
-        const next = addWithGutter(sum, count, h)
-        if (next <= cap) {
-          sum = next
-          count++
-        } else {
-          groups++
-          sum = h
-          count = 1
-          if (h > cap) return false
-          if (groups > columnCount) return false
+        let low = Math.max(...baseHeights)
+        let high = baseHeights.reduce((sum, h) => sum + h, 0) + gutterY * Math.max(0, n - 1)
+
+        const canPartition = (cap: number) => {
+            let groups = 1
+            let sum = 0
+            let count = 0
+            for (let i = 0; i < n; i++) {
+                const h = baseHeights[i]
+                const next = addWithGutter(sum, count, h)
+                if (next <= cap) {
+                    sum = next
+                    count++
+                } else {
+                    groups++
+                    sum = h
+                    count = 1
+                    if (h > cap) return false
+                    if (groups > columnCount) return false
+                }
+            }
+            return groups <= columnCount
         }
-      }
-      return groups <= columnCount
-    }
 
-    while (low < high) {
-      const mid = Math.floor((low + high) / 2)
-      if (canPartition(mid)) high = mid
-      else low = mid + 1
-    }
-    const cap = high
-
-    const starts = new Array<number>(columnCount).fill(0)
-    let groupIndex = columnCount - 1
-    let sum = 0
-    let count = 0
-    for (let i = n - 1; i >= 0; i--) {
-      const h = baseHeights[i]
-      const needAtLeast = i < groupIndex
-      const canFit = addWithGutter(sum, count, h) <= cap
-      if (!canFit || needAtLeast) {
-        starts[groupIndex] = i + 1
-        groupIndex--
-        sum = h
-        count = 1
-      } else {
-        sum = addWithGutter(sum, count, h)
-        count++
-      }
+        while (low < high) {
+            const mid = Math.floor((low + high) / 2)
+            if (canPartition(mid)) high = mid
+            else low = mid + 1
+        }
+        const cap = high
+
+        const starts = new Array<number>(columnCount).fill(0)
+        let groupIndex = columnCount - 1
+        let sum = 0
+        let count = 0
+        for (let i = n - 1; i >= 0; i--) {
+            const h = baseHeights[i]
+            const needAtLeast = i < groupIndex
+            const canFit = addWithGutter(sum, count, h) <= cap
+            if (!canFit || needAtLeast) {
+                starts[groupIndex] = i + 1
+                groupIndex--
+                sum = h
+                count = 1
+            } else {
+                sum = addWithGutter(sum, count, h)
+                count++
+            }
+        }
+        starts[0] = 0
+
+        const processedItems: ProcessedMasonryItem[] = []
+        const tops = new Array<number>(columnCount).fill(0)
+        for (let col = 0; col < columnCount; col++) {
+            const start = starts[col]
+            const end = col + 1 < columnCount ? starts[col + 1] : n
+            const left = col * (columnWidth + gutterX)
+            for (let i = start; i < end; i++) {
+                const item = items[i]
+                const newItem: ProcessedMasonryItem = {
+                    ...(item as any),
+                    columnWidth,
+                    imageHeight: 0,
+                    columnHeight: 0,
+                    left: 0,
+                    top: 0
+                }
+                newItem.imageHeight = baseHeights[i] - (footer + header)
+                newItem.columnHeight = baseHeights[i]
+                newItem.left = left
+                newItem.top = tops[col]
+                tops[col] += newItem.columnHeight + (i + 1 < end ? gutterY : 0)
+                processedItems.push(newItem)
+            }
+        }
+        return processedItems
     }
-    starts[0] = 0
 
+    const columnHeights = new Array<number>(columnCount).fill(0)
     const processedItems: ProcessedMasonryItem[] = []
-    const tops = new Array<number>(columnCount).fill(0)
-    for (let col = 0; col < columnCount; col++) {
-      const start = starts[col]
-      const end = col + 1 < columnCount ? starts[col + 1] : n
-      const left = col * (columnWidth + gutterX)
-      for (let i = start; i < end; i++) {
-        const item = items[i]
-        const newItem: ProcessedMasonryItem = { ...(item as any), columnWidth, imageHeight: 0, columnHeight: 0, left: 0, top: 0 }
-        const imageHeight = baseHeights[i] - (footer + header)
-        newItem.imageHeight = imageHeight
-        newItem.columnHeight = baseHeights[i]
-        newItem.left = left
-        newItem.top = tops[col]
-        tops[col] += newItem.columnHeight + (i + 1 < end ? gutterY : 0)
-        processedItems.push(newItem)
-      }
-    }
-    return processedItems
-  }
-
-  const columnHeights = new Array<number>(columnCount).fill(0)
-  const processedItems: ProcessedMasonryItem[] = []
 
-  for (let index = 0; index < items.length; index++) {
-    const item = items[index]
-    const newItem: ProcessedMasonryItem = { ...(item as any), columnWidth: 0, imageHeight: 0, columnHeight: 0, left: 0, top: 0 }
+    for (let index = 0; index < items.length; index++) {
+        const item = items[index]
+        const newItem: ProcessedMasonryItem = {
+            ...(item as any),
+            columnWidth: 0,
+            imageHeight: 0,
+            columnHeight: 0,
+            left: 0,
+            top: 0
+        }
 
-    const col = columnHeights.indexOf(Math.min(...columnHeights))
-    const originalWidth = item.width
-    const originalHeight = item.height
+        const col = columnHeights.indexOf(Math.min(...columnHeights))
+        const originalWidth = item.width
+        const originalHeight = item.height
 
-    newItem.columnWidth = columnWidth
-    newItem.left = col * (columnWidth + gutterX)
-    newItem.imageHeight = Math.round((columnWidth * originalHeight) / originalWidth)
-    newItem.columnHeight = newItem.imageHeight + footer + header
-    newItem.top = columnHeights[col]
+        newItem.columnWidth = columnWidth
+        newItem.left = col * (columnWidth + gutterX)
+        newItem.imageHeight = Math.round((columnWidth * originalHeight) / originalWidth)
+        newItem.columnHeight = newItem.imageHeight + footer + header
+        newItem.top = columnHeights[col]
 
-    columnHeights[col] += newItem.columnHeight + gutterY
+        columnHeights[col] += newItem.columnHeight + gutterY
 
-    processedItems.push(newItem)
-  }
+        processedItems.push(newItem)
+    }
 
-  return processedItems
+    return processedItems
 }

package/src/masonryUtils.ts

@@ -55,11 +55,24 @@ export function getItemAttributes(item: ProcessedMasonryItem, index: number = 0)
  * Calculate column heights for masonry layout
  */
 export function calculateColumnHeights(items: ProcessedMasonryItem[], columnCount: number): number[] {
-  const heights = new Array<number>(columnCount).fill(0)
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    const col = i % columnCount
-    heights[col] = Math.max(heights[col], item.top + item.columnHeight)
+  // Derive columns by actual left positions to reflect shortest-column placement
+  if (!items.length || columnCount <= 0) {
+    return new Array<number>(Math.max(1, columnCount)).fill(0)
   }
+  // Unique lefts (sorted) represent the columns in visual order
+  const uniqueLefts = Array.from(new Set(items.map(i => i.left))).sort((a, b) => a - b)
+  const limitedLefts = uniqueLefts.slice(0, columnCount)
+  const leftIndexMap = new Map<number, number>()
+  for (let idx = 0; idx < limitedLefts.length; idx++) leftIndexMap.set(limitedLefts[idx], idx)
+
+  const heights = new Array<number>(limitedLefts.length).fill(0)
+  for (const it of items) {
+    const col = leftIndexMap.get(it.left)
+    if (col != null) {
+      heights[col] = Math.max(heights[col], it.top + it.columnHeight)
+    }
+  }
+  // Pad if some columns haven't been populated yet (e.g., initial render)
+  while (heights.length < columnCount) heights.push(0)
   return heights
 }

package/src/useMasonryScroll.ts

@@ -11,135 +11,47 @@ export function useMasonryScroll({
   columns,
   containerHeight,
   isLoading,
-  maxItems,
   pageSize,
   refreshLayout,
   setItemsRaw,
   loadNext,
-  leaveEstimateMs
+  loadThresholdPx
 }: {
   container: Ref<HTMLElement | null>
   masonry: Ref<ProcessedMasonryItem[]>
   columns: Ref<number>
   containerHeight: Ref<number>
   isLoading: Ref<boolean>
-  maxItems: number
   pageSize: number
   refreshLayout: (items: ProcessedMasonryItem[]) => void
   setItemsRaw: (items: ProcessedMasonryItem[]) => void
   loadNext: () => Promise<any>
-  leaveEstimateMs?: number
+  loadThresholdPx?: number
 }) {
   let cleanupInProgress = false
   let lastScrollTop = 0
 
-  async function handleScroll() {
+  async function handleScroll(precomputedHeights?: number[]) {
     if (!container.value) return
 
-    const { scrollTop, clientHeight } = container.value
-    const visibleBottom = scrollTop + clientHeight
+    const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value, columns.value)
+    const tallest = columnHeights.length ? Math.max(...columnHeights) : 0
+    const scrollerBottom = container.value.scrollTop + container.value.clientHeight
 
-    // Determine scroll direction (down only)
-    const isScrollingDown = scrollTop > lastScrollTop + 1 // tolerate tiny jitter
-    lastScrollTop = scrollTop
+    const isScrollingDown = container.value.scrollTop > lastScrollTop + 1 // tolerate tiny jitter
+    lastScrollTop = container.value.scrollTop
 
-    const columnHeights = calculateColumnHeights(masonry.value, columns.value)
-    const longestColumn = Math.max(...columnHeights)
-    const whitespaceVisible = longestColumn + 300 < visibleBottom - 1
-    const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
+    const threshold = typeof loadThresholdPx === 'number' ? loadThresholdPx : 200
+    const triggerPoint = threshold >= 0
+      ? Math.max(0, tallest - threshold)
+      : Math.max(0, tallest + threshold)
+    const nearBottom = scrollerBottom >= triggerPoint
 
-    if ((whitespaceVisible || reachedContainerBottom) && isScrollingDown && !isLoading.value && !cleanupInProgress) {
-      try {
-        if (masonry.value.length > maxItems) {
-          await handleItemCleanup(columnHeights)
-        }
-
-        await loadNext()
-        await nextTick()
-      } catch (error) {
-        console.error('Error in scroll handler:', error)
-      }
-    }
-  }
-
-  async function handleItemCleanup(columnHeightsBefore: number[]) {
-    if (!masonry.value.length) return
-    if (masonry.value.length <= pageSize) return
-
-    const pageGroups: Record<string | number, ProcessedMasonryItem[]> = masonry.value.reduce((acc, item) => {
-      const key = (item as any).page
-      if (!acc[key]) acc[key] = []
-      acc[key].push(item)
-      return acc
-    }, {} as Record<string | number, ProcessedMasonryItem[]>)
-
-    const pages = Object.keys(pageGroups).sort((a, b) => parseInt(a) - parseInt(b))
-    if (pages.length === 0) return
-
-    let totalRemovedItems = 0
-    const pagesToRemove: string[] = []
-
-    for (const page of pages) {
-      pagesToRemove.push(page)
-      totalRemovedItems += pageGroups[page].length
-      if (totalRemovedItems >= pageSize) break
+    if (nearBottom && isScrollingDown && !isLoading.value) {
+      await loadNext()
+      await nextTick()
+      return
     }
-
-    const remainingItems = masonry.value.filter(item => !pagesToRemove.includes(String((item as any).page)))
-    if (remainingItems.length === masonry.value.length) return
-
-    cleanupInProgress = true
-
-    setItemsRaw(remainingItems)
-    await nextTick()
-    // Allow leave to start, then FLIP survivors concurrently (single RAF)
-    await new Promise<void>(r => requestAnimationFrame(() => r()))
-
-    refreshLayout(remainingItems)
-    await nextTick()
-
-    await maintainAnchorPosition()
-
-    cleanupInProgress = false
-  }
-
-  function msLeaveEstimate() {
-    const base = typeof leaveEstimateMs === 'number' && leaveEstimateMs > 0 ? leaveEstimateMs : 250
-    return base + 50
-  }
-
-  function waitFor(ms: number) {
-    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
-
-    const heights = calculateColumnHeights(masonry.value, columns.value)
-    const anchorColumnIndex = heights.indexOf(Math.max(...heights))
-
-    const itemsInAnchor = masonry.value.filter((_, index) => index % columns.value === anchorColumnIndex)
-    if (itemsInAnchor.length === 0) return
-
-    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)
-
-    if (Math.abs(desiredTop - scrollTop) > 4) {
-      container.value.scrollTo({ top: desiredTop, behavior: 'auto' })
-    }
-  }
-
-  async function adjustScrollPosition() {
-    await maintainAnchorPosition()
   }
 
   return {

package/src/useMasonryTransitions.ts

@@ -1,7 +1,7 @@
 /**
  * Composable for handling masonry item transitions (typed)
  */
-export function useMasonryTransitions(masonry: any) {
+export function useMasonryTransitions(masonry: any, opts?: { leaveDurationMs?: number }) {
   function onEnter(el: HTMLElement, done: () => void) {
     const left = parseInt(el.dataset.left || '0', 10)
     const top = parseInt(el.dataset.top || '0', 10)
@@ -41,18 +41,25 @@ export function useMasonryTransitions(masonry: any) {
     el.style.opacity = '1'
     el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
     el.style.removeProperty('--masonry-opacity-delay')
-    void el.offsetWidth
-    el.style.transition = ''
+    // Avoid forced reflow: re-enable transition on the next frame
+    requestAnimationFrame(() => {
+      el.style.transition = ''
+    })
   }
 
   function onLeave(el: HTMLElement, done: () => void) {
     const left = parseInt(el.dataset.left || '0', 10)
     const top = parseInt(el.dataset.top || '0', 10)
 
-    const cs = getComputedStyle(el)
-    const varVal = cs.getPropertyValue('--masonry-leave-duration') || ''
-    const parsed = parseFloat(varVal)
-    const leaveMs = Number.isFinite(parsed) && parsed > 0 ? parsed : 200
+    // Prefer explicit option, fallback to CSS variable for safety
+    const fromOpts = typeof opts?.leaveDurationMs === 'number' ? opts!.leaveDurationMs : NaN
+    let leaveMs = Number.isFinite(fromOpts) && fromOpts > 0 ? fromOpts : NaN
+    if (!Number.isFinite(leaveMs)) {
+      const cs = getComputedStyle(el)
+      const varVal = cs.getPropertyValue('--masonry-leave-duration') || ''
+      const parsed = parseFloat(varVal)
+      leaveMs = Number.isFinite(parsed) && parsed > 0 ? parsed : 200
+    }
 
     const prevDuration = el.style.transitionDuration