@wyxos/vibe 1.6.20 → 1.6.22

package/src/useMasonryScroll.ts

@@ -1,60 +1,60 @@
-import { nextTick, type Ref } from 'vue'
-import { calculateColumnHeights } from './masonryUtils'
-import type { ProcessedMasonryItem } from './types'
-
-/**
- * Composable for handling masonry scroll behavior and item cleanup
- */
-export function useMasonryScroll({
-  container,
-  masonry,
-  columns,
-  containerHeight,
-  isLoading,
-  pageSize,
-  refreshLayout,
-  setItemsRaw,
-  loadNext,
-  loadThresholdPx
-}: {
-  container: Ref<HTMLElement | null>
-  masonry: Ref<ProcessedMasonryItem[]>
-  columns: Ref<number>
-  containerHeight: Ref<number>
-  isLoading: Ref<boolean>
-  pageSize: number
-  refreshLayout: (items: ProcessedMasonryItem[]) => void
-  setItemsRaw: (items: ProcessedMasonryItem[]) => void
-  loadNext: () => Promise<any>
-  loadThresholdPx?: number
-}) {
-  let cleanupInProgress = false
-  let lastScrollTop = 0
-
-  async function handleScroll(precomputedHeights?: number[]) {
-    if (!container.value) return
-
-    const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value, columns.value)
-    const tallest = columnHeights.length ? Math.max(...columnHeights) : 0
-    const scrollerBottom = container.value.scrollTop + container.value.clientHeight
-
-    const isScrollingDown = container.value.scrollTop > lastScrollTop + 1 // tolerate tiny jitter
-    lastScrollTop = container.value.scrollTop
-
-    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 (nearBottom && isScrollingDown && !isLoading.value) {
-      await loadNext()
-      await nextTick()
-      return
-    }
-  }
-
-  return {
-    handleScroll
-  }
-}
+import { nextTick, type Ref } from 'vue'
+import { calculateColumnHeights } from './masonryUtils'
+import type { ProcessedMasonryItem } from './types'
+
+/**
+ * Composable for handling masonry scroll behavior and item cleanup
+ */
+export function useMasonryScroll({
+  container,
+  masonry,
+  columns,
+  containerHeight,
+  isLoading,
+  pageSize,
+  refreshLayout,
+  setItemsRaw,
+  loadNext,
+  loadThresholdPx
+}: {
+  container: Ref<HTMLElement | null>
+  masonry: Ref<ProcessedMasonryItem[]>
+  columns: Ref<number>
+  containerHeight: Ref<number>
+  isLoading: Ref<boolean>
+  pageSize: number
+  refreshLayout: (items: ProcessedMasonryItem[]) => void
+  setItemsRaw: (items: ProcessedMasonryItem[]) => void
+  loadNext: () => Promise<any>
+  loadThresholdPx?: number
+}) {
+  let cleanupInProgress = false
+  let lastScrollTop = 0
+
+  async function handleScroll(precomputedHeights?: number[]) {
+    if (!container.value) return
+
+    const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value, columns.value)
+    const tallest = columnHeights.length ? Math.max(...columnHeights) : 0
+    const scrollerBottom = container.value.scrollTop + container.value.clientHeight
+
+    const isScrollingDown = container.value.scrollTop > lastScrollTop + 1 // tolerate tiny jitter
+    lastScrollTop = container.value.scrollTop
+
+    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 (nearBottom && isScrollingDown && !isLoading.value) {
+      await loadNext()
+      await nextTick()
+      return
+    }
+  }
+
+  return {
+    handleScroll
+  }
+}

package/src/useMasonryTransitions.ts

@@ -1,11 +1,45 @@
 /**
  * Composable for handling masonry item transitions (typed)
+ * Optimized for large item arrays by skipping DOM operations for items outside viewport
  */
-export function useMasonryTransitions(masonry: any, opts?: { leaveDurationMs?: number }) {
+export function useMasonryTransitions(refs: { container?: any; masonry?: any }, opts?: { leaveDurationMs?: number }) {
+  // Cache viewport bounds to avoid repeated calculations
+  let cachedViewportTop = 0
+  let cachedViewportBottom = 0
+  let cachedViewportHeight = 0
+  const VIEWPORT_BUFFER_PX = 1000 // Buffer zone for items near viewport
+
+  // Check if item is in viewport (with buffer) - optimized to skip DOM reads
+  function isItemInViewport(itemTop: number, itemHeight: number): boolean {
+    // Update cached viewport bounds if container exists
+    const container = refs.container?.value
+    if (container) {
+      const scrollTop = container.scrollTop
+      const clientHeight = container.clientHeight
+      cachedViewportTop = scrollTop - VIEWPORT_BUFFER_PX
+      cachedViewportBottom = scrollTop + clientHeight + VIEWPORT_BUFFER_PX
+      cachedViewportHeight = clientHeight
+    }
+
+    const itemBottom = itemTop + itemHeight
+    return itemBottom >= cachedViewportTop && itemTop <= cachedViewportBottom
+  }
+
   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)
+    // Get height from computed style or use a reasonable fallback
+    const height = el.offsetHeight || parseInt(getComputedStyle(el).height || '200', 10) || 200
+
+    // Skip animation for items outside viewport - just set position immediately
+    if (!isItemInViewport(top, height)) {
+      el.style.opacity = '1'
+      el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
+      el.style.transition = 'none'
+      done()
+      return
+    }
 
     const delay = Math.min(index * 20, 160)
     const prevOpacityDelay = el.style.getPropertyValue('--masonry-opacity-delay')
@@ -37,6 +71,14 @@ export function useMasonryTransitions(masonry: any, opts?: { leaveDurationMs?: n
   function onBeforeLeave(el: HTMLElement) {
     const left = parseInt(el.dataset.left || '0', 10)
     const top = parseInt(el.dataset.top || '0', 10)
+    const height = el.offsetHeight || parseInt(getComputedStyle(el).height || '200', 10) || 200
+
+    // Skip animation for items outside viewport
+    if (!isItemInViewport(top, height)) {
+      el.style.transition = 'none'
+      return
+    }
+
     el.style.transition = 'none'
     el.style.opacity = '1'
     el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
@@ -50,6 +92,15 @@ export function useMasonryTransitions(masonry: any, opts?: { leaveDurationMs?: n
   function onLeave(el: HTMLElement, done: () => void) {
     const left = parseInt(el.dataset.left || '0', 10)
     const top = parseInt(el.dataset.top || '0', 10)
+    const height = el.offsetHeight || parseInt(getComputedStyle(el).height || '200', 10) || 200
+
+    // Skip animation for items outside viewport - remove immediately
+    if (!isItemInViewport(top, height)) {
+      el.style.transition = 'none'
+      el.style.opacity = '0'
+      done()
+      return
+    }
 
     // Prefer explicit option, fallback to CSS variable for safety
     const fromOpts = typeof opts?.leaveDurationMs === 'number' ? opts!.leaveDurationMs : NaN

package/src/useSwipeMode.ts

@@ -0,0 +1,233 @@
+import { computed, ref, type Ref, type ComputedRef } from 'vue'
+
+export interface UseSwipeModeOptions {
+  useSwipeMode: ComputedRef<boolean>
+  masonry: Ref<any[]>
+  isLoading: Ref<boolean>
+  loadNext: () => Promise<any>
+  loadPage: (page: any) => Promise<any>
+  paginationHistory: Ref<any[]>
+}
+
+export interface UseSwipeModeReturn {
+  // State
+  currentSwipeIndex: Ref<number>
+  swipeOffset: Ref<number>
+  isDragging: Ref<boolean>
+  swipeContainer: Ref<HTMLElement | null>
+  
+  // Computed
+  currentItem: ComputedRef<any | null>
+  nextItem: ComputedRef<any | null>
+  previousItem: ComputedRef<any | null>
+  
+  // Functions
+  handleTouchStart: (e: TouchEvent) => void
+  handleTouchMove: (e: TouchEvent) => void
+  handleTouchEnd: (e: TouchEvent) => void
+  handleMouseDown: (e: MouseEvent) => void
+  handleMouseMove: (e: MouseEvent) => void
+  handleMouseUp: (e: MouseEvent) => void
+  goToNextItem: () => void
+  goToPreviousItem: () => void
+  snapToCurrentItem: () => void
+  handleWindowResize: () => void
+  reset: () => void
+}
+
+export function useSwipeMode(options: UseSwipeModeOptions): UseSwipeModeReturn {
+  const { useSwipeMode, masonry, isLoading, loadNext, loadPage, paginationHistory } = options
+
+  // Swipe mode state
+  const currentSwipeIndex = ref<number>(0)
+  const swipeOffset = ref<number>(0)
+  const isDragging = ref<boolean>(false)
+  const dragStartY = ref<number>(0)
+  const dragStartOffset = ref<number>(0)
+  const swipeContainer = ref<HTMLElement | null>(null)
+
+  // Get current item index for swipe mode
+  const currentItem = computed(() => {
+    if (!useSwipeMode.value || masonry.value.length === 0) return null
+    const index = Math.max(0, Math.min(currentSwipeIndex.value, masonry.value.length - 1))
+    return masonry.value[index] || null
+  })
+
+  // Get next/previous items for preloading in swipe mode
+  const nextItem = computed(() => {
+    if (!useSwipeMode.value || !currentItem.value) return null
+    const nextIndex = currentSwipeIndex.value + 1
+    if (nextIndex >= masonry.value.length) return null
+    return masonry.value[nextIndex] || null
+  })
+
+  const previousItem = computed(() => {
+    if (!useSwipeMode.value || !currentItem.value) return null
+    const prevIndex = currentSwipeIndex.value - 1
+    if (prevIndex < 0) return null
+    return masonry.value[prevIndex] || null
+  })
+
+  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
+  }
+
+  function goToNextItem() {
+    if (!nextItem.value) {
+      // Try to load next page
+      loadNext()
+      return
+    }
+
+    currentSwipeIndex.value++
+    snapToCurrentItem()
+
+    // Preload next item if we're near the end
+    if (currentSwipeIndex.value >= masonry.value.length - 5) {
+      loadNext()
+    }
+  }
+
+  function goToPreviousItem() {
+    if (!previousItem.value) return
+
+    currentSwipeIndex.value--
+    snapToCurrentItem()
+  }
+
+  // Swipe gesture handlers
+  function handleTouchStart(e: TouchEvent) {
+    if (!useSwipeMode.value) return
+    isDragging.value = true
+    dragStartY.value = e.touches[0].clientY
+    dragStartOffset.value = swipeOffset.value
+    e.preventDefault()
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!useSwipeMode.value || !isDragging.value) return
+    const deltaY = e.touches[0].clientY - dragStartY.value
+    swipeOffset.value = dragStartOffset.value + deltaY
+    e.preventDefault()
+  }
+
+  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
+        goToPreviousItem()
+      } else if (deltaY < 0 && nextItem.value) {
+        // Swipe up - go to next
+        goToNextItem()
+      } else {
+        // Snap back
+        snapToCurrentItem()
+      }
+    } else {
+      // Snap back if swipe wasn't far enough
+      snapToCurrentItem()
+    }
+
+    e.preventDefault()
+  }
+
+  // Mouse drag handlers for desktop testing
+  function handleMouseDown(e: MouseEvent) {
+    if (!useSwipeMode.value) return
+    isDragging.value = true
+    dragStartY.value = e.clientY
+    dragStartOffset.value = swipeOffset.value
+    e.preventDefault()
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (!useSwipeMode.value || !isDragging.value) return
+    const deltaY = e.clientY - dragStartY.value
+    swipeOffset.value = dragStartOffset.value + deltaY
+    e.preventDefault()
+  }
+
+  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()
+      } else if (deltaY < 0 && nextItem.value) {
+        goToNextItem()
+      } else {
+        snapToCurrentItem()
+      }
+    } else {
+      snapToCurrentItem()
+    }
+
+    e.preventDefault()
+  }
+
+  // Watch for container/window resize to update swipe mode
+  function handleWindowResize() {
+    // If switching from swipe to masonry, reset swipe state
+    if (!useSwipeMode.value && currentSwipeIndex.value > 0) {
+      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()
+    }
+  }
+
+  function reset() {
+    currentSwipeIndex.value = 0
+    swipeOffset.value = 0
+    isDragging.value = false
+  }
+
+  return {
+    // State
+    currentSwipeIndex,
+    swipeOffset,
+    isDragging,
+    swipeContainer,
+    
+    // Computed
+    currentItem,
+    nextItem,
+    previousItem,
+    
+    // Functions
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    goToNextItem,
+    goToPreviousItem,
+    snapToCurrentItem,
+    handleWindowResize,
+    reset
+  }
+}
+

package/src/utils/errorHandler.ts

@@ -0,0 +1,8 @@
+/**
+ * Utility function to normalize errors to Error instances
+ * Ensures consistent error handling throughout the application
+ */
+export function normalizeError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error))
+}
+