@wyxos/vibe 1.6.21 → 1.6.22

package/src/components/MasonryItem.vue

@@ -392,7 +392,10 @@ watch(
             >
               <!-- Media type indicator badge - shown BEFORE preloading starts -->
               <div class="w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm">
-                <i :class="mediaType === 'video' ? 'fas fa-video text-xl text-slate-400' : 'fas fa-image text-xl text-slate-400'"></i>
+                <!-- Allow custom icon via slot, fallback to default -->
+                <slot name="placeholder-icon" :mediaType="mediaType">
+                  <i :class="mediaType === 'video' ? 'fas fa-video text-xl text-slate-400' : 'fas fa-image text-xl text-slate-400'"></i>
+                </slot>
               </div>
             </div>
 

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/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))
+}
+