@wyxos/vibe 1.3.1 → 1.4.0

package/src/calculateLayout.ts

@@ -0,0 +1,177 @@
+import type { LayoutOptions, MasonryItem, ProcessedMasonryItem } from './types'
+
+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
+}
+
+export default function calculateLayout(
+  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
+    }
+  } catch {
+    // noop
+  }
+
+  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 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
+  })
+
+  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
+    }
+
+    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
+    }
+
+    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 }
+        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 }
+
+    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]
+
+    columnHeights[col] += newItem.columnHeight + gutterY
+
+    processedItems.push(newItem)
+  }
+
+  return processedItems
+}

package/src/{main.js → main.ts}

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-
-createApp(App).mount('#app')
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/{masonryUtils.js → masonryUtils.ts}

@@ -1,7 +1,9 @@
+import type { LayoutOptions, ProcessedMasonryItem } from './types'
+
 /**
  * Get responsive column count based on window width and layout sizes
  */
-export function getColumnCount(layout) {
+export function getColumnCount(layout: Pick<LayoutOptions, 'sizes'> & { sizes: Required<NonNullable<LayoutOptions['sizes']>> }): number {
   const width = window.innerWidth
   const sizes = layout.sizes
 
@@ -16,23 +18,19 @@ export function getColumnCount(layout) {
 /**
  * Calculate container height based on item positions
  */
-export function calculateContainerHeight(items) {
+export function calculateContainerHeight(items: ProcessedMasonryItem[]): number {
   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
 }
 
 /**
  * Get style object for masonry item positioning
  */
-export function getItemStyle(item) {
+export function getItemStyle(item: ProcessedMasonryItem): Record<string, string> {
   return {
-    // 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
+    transform: `translate3d(${item.left}px, ${item.top}px, 0)` ,
     top: '0px',
     left: '0px',
     width: `${item.columnWidth}px`,
@@ -43,12 +41,12 @@ export function getItemStyle(item) {
 /**
  * Get item attributes for rendering
  */
-export function getItemAttributes(item, index = 0) {
+export function getItemAttributes(item: ProcessedMasonryItem, index: number = 0): Record<string, any> {
   return {
     style: getItemStyle(item),
     'data-top': item.top,
     'data-left': item.left,
-    'data-id': `${item.page}-${item.id}`,
+    'data-id': `${(item as any).page}-${(item as any).id}`,
     'data-index': index,
   }
 }
@@ -56,8 +54,8 @@ export function getItemAttributes(item, index = 0) {
 /**
  * Calculate column heights for masonry layout
  */
-export function calculateColumnHeights(items, columnCount) {
-  const heights = new Array(columnCount).fill(0)
+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

package/src/types.ts

@@ -0,0 +1,38 @@
+export type MasonryItem = {
+  id: string
+  width: number
+  height: number
+  page: number
+  index: number
+  src: string
+  // allow extra fields
+  [key: string]: any
+}
+
+export type ProcessedMasonryItem = MasonryItem & {
+  columnWidth: number
+  imageHeight: number
+  columnHeight: number
+  left: number
+  top: number
+}
+
+export type LayoutOptions = {
+  gutterX?: number
+  gutterY?: number
+  header?: number
+  footer?: number
+  paddingLeft?: number
+  paddingRight?: number
+  sizes?: {
+    base: number
+    sm?: number
+    md?: number
+    lg?: number
+    xl?: number
+    '2xl'?: number
+  }
+  placement?: 'masonry' | 'sequential-balanced'
+}
+
+export type GetPageResult = { items: MasonryItem[]; nextPage: number | null }

package/src/{useMasonryScroll.js → useMasonryScroll.ts}

@@ -1,5 +1,6 @@
-import { nextTick } from 'vue'
-import { calculateColumnHeights } from './masonryUtils.js'
+import { nextTick, type Ref } from 'vue'
+import { calculateColumnHeights } from './masonryUtils'
+import type { ProcessedMasonryItem } from './types'
 
 /**
  * Composable for handling masonry scroll behavior and item cleanup
@@ -14,107 +15,94 @@ export function useMasonryScroll({
   pageSize,
   refreshLayout,
   setItemsRaw,
-  loadNext
+  loadNext,
+  leaveEstimateMs
+}: {
+  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
 }) {
   let cleanupInProgress = false
 
   async function handleScroll() {
+    if (!container.value) return
+
     const { scrollTop, clientHeight } = container.value
     const visibleBottom = scrollTop + clientHeight
 
     const columnHeights = calculateColumnHeights(masonry.value, columns.value)
-    // 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 && !cleanupInProgress) {
       try {
-        // Handle cleanup when too many items
         if (masonry.value.length > maxItems) {
           await handleItemCleanup(columnHeights)
         }
 
-        await loadNext() // loadNext manages its own loading state and error handling
+        await loadNext()
         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(columnHeightsBefore) {
-    if (!masonry.value.length) {
-      return
-    }
+  async function handleItemCleanup(columnHeightsBefore: number[]) {
+    if (!masonry.value.length) return
+    if (masonry.value.length <= pageSize) 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)
+    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
-    }
+    if (pages.length === 0) return
 
     let totalRemovedItems = 0
-    let pagesToRemove = []
+    const pagesToRemove: string[] = []
 
-    // 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
-      }
+      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
-    }
+    const remainingItems = masonry.value.filter(item => !pagesToRemove.includes(String((item as any).page)))
+    if (remainingItems.length === masonry.value.length) return
 
     cleanupInProgress = true
 
-    // Set raw items so TransitionGroup triggers leave on removed items, but remaining items keep their current transforms
     setItemsRaw(remainingItems)
-
     await nextTick()
-    // 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
   }
 
   function msLeaveEstimate() {
-    // Default estimate in ms; tweak if you change CSS leave timings
-    return 700
+    const base = typeof leaveEstimateMs === 'number' && leaveEstimateMs > 0 ? leaveEstimateMs : 250
+    return base + 50
   }
 
-  function waitFor(ms) {
+  function waitFor(ms: number) {
     return new Promise(resolve => setTimeout(resolve, ms))
   }
 
@@ -122,17 +110,14 @@ export function useMasonryScroll({
     if (!container.value) return
 
     const { scrollTop, clientHeight } = container.value
-    const pivotY = scrollTop + clientHeight * 0.4 // aim to keep ~40% down the viewport stable
+    const pivotY = scrollTop + clientHeight * 0.4
 
-    // 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) {
@@ -142,13 +127,11 @@ export function useMasonryScroll({
 
     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()
   }

package/src/{useMasonryTransitions.js → useMasonryTransitions.ts}

@@ -1,25 +1,25 @@
 /**
- * Composable for handling masonry item transitions
+ * Composable for handling masonry item transitions (typed)
  */
-export function useMasonryTransitions(masonry) {
-  function onEnter(el, done) {
-    // Animate to its final transform (translate3d(left, top, 0)) with subtle scale/opacity
+export function useMasonryTransitions(masonry: any) {
+  function onEnter(el: HTMLElement, done: () => void) {
     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`
+    const prevOpacityDelay = el.style.getPropertyValue('--masonry-opacity-delay')
+    el.style.setProperty('--masonry-opacity-delay', `${delay}ms`)
 
     requestAnimationFrame(() => {
       el.style.opacity = '1'
       el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
       const clear = () => {
-        el.style.transitionDelay = prevDelay || '' // restore
+        if (prevOpacityDelay) {
+          el.style.setProperty('--masonry-opacity-delay', prevOpacityDelay)
+        } else {
+          el.style.removeProperty('--masonry-opacity-delay')
+        }
         el.removeEventListener('transitionend', clear)
         done()
       }
@@ -27,35 +27,41 @@ export function useMasonryTransitions(masonry) {
     })
   }
 
-  function onBeforeEnter(el) {
-    // Start slightly below and slightly smaller, faded
+  function onBeforeEnter(el: HTMLElement) {
     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 is at its current transform position before animating
+  function onBeforeLeave(el: HTMLElement) {
     const left = parseInt(el.dataset.left || '0', 10)
     const top = parseInt(el.dataset.top || '0', 10)
     el.style.transition = 'none'
     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
+    el.style.removeProperty('--masonry-opacity-delay')
+    void el.offsetWidth
+    el.style.transition = ''
   }
 
-  function onLeave(el, done) {
+  function onLeave(el: HTMLElement, done: () => void) {
     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 cs = getComputedStyle(el)
+    const varVal = cs.getPropertyValue('--masonry-leave-duration') || ''
+    const parsed = parseFloat(varVal)
+    const leaveMs = Number.isFinite(parsed) && parsed > 0 ? parsed : 200
+
+    const prevDuration = el.style.transitionDuration
+
     const cleanup = () => {
-      el.removeEventListener('transitionend', onEnd)
+      el.removeEventListener('transitionend', onEnd as any)
       clearTimeout(fallback)
+      el.style.transitionDuration = prevDuration || ''
     }
-    const onEnd = (e) => {
+    const onEnd = (e?: Event) => {
       if (!e || e.target === el) {
         cleanup()
         done()
@@ -64,12 +70,13 @@ export function useMasonryTransitions(masonry) {
     const fallback = setTimeout(() => {
       cleanup()
       done()
-    }, 800)
+    }, leaveMs + 100)
 
     requestAnimationFrame(() => {
+      el.style.transitionDuration = `${leaveMs}ms`
       el.style.opacity = '0'
       el.style.transform = `translate3d(${left}px, ${top + 10}px, 0) scale(0.985)`
-      el.addEventListener('transitionend', onEnd)
+      el.addEventListener('transitionend', onEnd as any)
     })
   }
 

package/index.js

@@ -1,10 +0,0 @@
-import Masonry from './src/Masonry.vue';
-
-export default {
-    install(app) {
-        app.component('WyxosMasonry', Masonry);
-        app.component('WMasonry', Masonry);
-    }
-};
-
-export { Masonry };

package/src/archive/InfiniteMansonry.spec.js

@@ -1,11 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { describe, it, expect } from 'vitest';
-
-describe('Example Test', () => {
-    it('should pass a basic truthiness check', () => {
-        expect(true).toBe(true)
-    })
-})

package/src/calculateLayout.js

@@ -1,74 +0,0 @@
-function getScrollbarWidth() {
-    // Create a temporary div
-    const div = document.createElement('div')
-    div.style.visibility = 'hidden'
-    div.style.overflow = 'scroll' // force scrollbar
-    div.style.msOverflowStyle = 'scrollbar' // for IE
-    div.style.width = '100px'
-    div.style.height = '100px'
-
-    // Append to body
-    document.body.appendChild(div)
-
-    // Create inner div and measure difference
-    const inner = document.createElement('div')
-    inner.style.width = '100%'
-    div.appendChild(inner)
-
-    const scrollbarWidth = div.offsetWidth - inner.offsetWidth
-
-    // Clean up
-    document.body.removeChild(div)
-
-    return scrollbarWidth
-}
-
-export default function calculateLayout(items, container, columnCount, options = {}) {
-    const {
-        gutterX = 0,
-        gutterY = 0,
-        header = 0,
-        footer = 0,
-        paddingLeft = 0,
-        paddingRight = 0,
-        sizes = {
-            base: 1,       // mobile-first default
-            sm: 2,         // ≥ 640px
-            md: 3,         // ≥ 768px
-            lg: 4,         // ≥ 1024px
-            xl: 5,         // ≥ 1280px
-            '2xl': 6       // ≥ 1536px
-        }
-    } = options;
-
-    const measuredScrollbarWidth = container.offsetWidth - container.clientWidth;
-    const scrollbarWidth = measuredScrollbarWidth > 0 ? measuredScrollbarWidth + 2 : getScrollbarWidth() + 2;
-    const usableWidth = container.offsetWidth - scrollbarWidth - paddingLeft - paddingRight;
-    const totalGutterX = gutterX * (columnCount - 1);
-    const columnWidth = Math.floor((usableWidth - totalGutterX) / columnCount);
-
-    const columnHeights = new Array(columnCount).fill(0);
-    const processedItems = [];
-
-    for (let index = 0; index < items.length; index++) {
-        const item = items[index];
-        const newItem = { ...item };
-
-        // 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;
-
-        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;
-
-        processedItems.push(newItem);
-    }
-
-    return processedItems;
-}