@wyxos/vibe 1.6.29 → 2.0.2

package/src/useMasonryVirtualization.ts

@@ -1,140 +0,0 @@
-import { ref, computed, nextTick, type Ref, type ComputedRef } from 'vue'
-import { calculateColumnHeights } from './masonryUtils'
-
-export interface UseMasonryVirtualizationOptions {
-  masonry: Ref<any[]>
-  container: Ref<HTMLElement | null>
-  columns: Ref<number>
-  virtualBufferPx: number
-  loadThresholdPx: number
-  handleScroll: (precomputedHeights?: number[]) => void
-}
-
-export function useMasonryVirtualization(options: UseMasonryVirtualizationOptions) {
-  const {
-    masonry,
-    container,
-    columns,
-    virtualBufferPx,
-    loadThresholdPx
-  } = options
-
-  // Use a ref for handleScroll so it can be updated after initialization
-  const handleScrollRef = ref<(precomputedHeights?: number[]) => void>(options.handleScroll)
-
-  // Virtualization viewport state
-  const viewportTop = ref(0)
-  const viewportHeight = ref(0)
-  const VIRTUAL_BUFFER_PX = virtualBufferPx
-
-  // Gate transitions during virtualization-only DOM churn
-  const virtualizing = ref(false)
-
-  // Scroll progress tracking
-  const scrollProgress = ref<{ distanceToTrigger: number; isNearTrigger: boolean }>({
-    distanceToTrigger: 0,
-    isNearTrigger: false
-  })
-
-  // Visible window of items (virtualization)
-  const visibleMasonry = computed(() => {
-    const top = viewportTop.value - VIRTUAL_BUFFER_PX
-    const bottom = viewportTop.value + viewportHeight.value + VIRTUAL_BUFFER_PX
-    const items = masonry.value as any[]
-    if (!items || items.length === 0) return [] as any[]
-
-    // Filter items that have valid positions and are within viewport
-    const visible = items.filter((it: any) => {
-      // If item doesn't have position yet, include it (will be filtered once layout is calculated)
-      if (typeof it.top !== 'number' || typeof it.columnHeight !== 'number') {
-        return true // Include items without positions to avoid hiding them prematurely
-      }
-      const itemTop = it.top
-      const itemBottom = it.top + it.columnHeight
-      return itemBottom >= top && itemTop <= bottom
-    })
-
-    // Log if we're filtering out items (for debugging)
-    if (import.meta.env.DEV && items.length > 0 && visible.length === 0 && viewportHeight.value > 0) {
-      const itemsWithPositions = items.filter((it: any) =>
-        typeof it.top === 'number' && typeof it.columnHeight === 'number'
-      )
-    }
-
-    return visible
-  })
-
-  function updateScrollProgress(precomputedHeights?: number[]) {
-    if (!container.value) return
-
-    const { scrollTop, clientHeight } = container.value
-    const visibleBottom = scrollTop + clientHeight
-
-    const columnHeights = precomputedHeights ?? calculateColumnHeights(masonry.value as any, columns.value)
-    const tallest = columnHeights.length ? Math.max(...columnHeights) : 0
-    const threshold = typeof loadThresholdPx === 'number' ? loadThresholdPx : 200
-    const triggerPoint = threshold >= 0
-      ? Math.max(0, tallest - threshold)
-      : Math.max(0, tallest + threshold)
-
-    const distanceToTrigger = Math.max(0, triggerPoint - visibleBottom)
-    const isNearTrigger = distanceToTrigger <= 100
-
-    scrollProgress.value = {
-      distanceToTrigger: Math.round(distanceToTrigger),
-      isNearTrigger
-    }
-  }
-
-  async function updateViewport() {
-    if (container.value) {
-      const scrollTop = container.value.scrollTop
-      const clientHeight = container.value.clientHeight || window.innerHeight
-      // Ensure viewportHeight is never 0 (fallback to window height if container height is 0)
-      const safeClientHeight = clientHeight > 0 ? clientHeight : window.innerHeight
-      viewportTop.value = scrollTop
-      viewportHeight.value = safeClientHeight
-      // Log when scroll handler runs (helpful for debugging viewport issues)
-      if (import.meta.env.DEV) {
-        console.log('[Masonry] scroll: viewport updated', {
-          scrollTop,
-          clientHeight: safeClientHeight,
-          itemsCount: masonry.value.length,
-          visibleItemsCount: visibleMasonry.value.length
-        })
-      }
-    }
-    // Gate transitions for virtualization-only DOM changes
-    virtualizing.value = true
-    await nextTick()
-    await nextTick()
-    virtualizing.value = false
-
-    const heights = calculateColumnHeights(masonry.value as any, columns.value)
-    handleScrollRef.value(heights as any)
-    updateScrollProgress(heights)
-  }
-
-  function reset() {
-    viewportTop.value = 0
-    viewportHeight.value = 0
-    virtualizing.value = false
-    scrollProgress.value = {
-      distanceToTrigger: 0,
-      isNearTrigger: false
-    }
-  }
-
-  return {
-    viewportTop,
-    viewportHeight,
-    virtualizing,
-    scrollProgress,
-    visibleMasonry,
-    updateScrollProgress,
-    updateViewport,
-    reset,
-    handleScroll: handleScrollRef
-  }
-}
-

package/src/useSwipeMode.ts

@@ -1,233 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/**
- * 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))
-}
-

package/src/views/Examples.vue

@@ -1,323 +0,0 @@
-<template>
-  <div class="min-h-screen bg-slate-50 pt-20">
-    <div class="max-w-7xl mx-auto px-4 py-8">
-      <div class="flex gap-8">
-        <!-- Side Menu -->
-        <aside class="hidden lg:block w-64 flex-shrink-0 sticky top-24 h-fit">
-          <nav class="bg-white rounded-lg shadow-sm p-4 border border-slate-200">
-            <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Examples</h3>
-            <ul class="space-y-2">
-              <li v-for="example in examples" :key="example.id">
-                <a :href="`#${example.id}`" @click.prevent="scrollTo(example.id)"
-                  class="block px-3 py-2 text-sm rounded-md transition-colors" :class="activeSection === example.id
-                    ? 'bg-blue-50 text-blue-600 font-medium'
-                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'">
-                  {{ example.title }}
-                </a>
-              </li>
-            </ul>
-          </nav>
-        </aside>
-
-        <!-- Main Content -->
-        <main class="flex-1 min-w-0">
-          <div class="space-y-16">
-            <!-- Basic Example -->
-            <section id="basic" ref="basicRef" class="scroll-mt-24">
-              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
-                  <h2 class="text-2xl font-bold text-slate-800">Basic Usage</h2>
-                  <p class="text-slate-600 mt-1">Simple masonry grid with default MasonryItem component</p>
-                </div>
-
-                <!-- Live Example -->
-                <div class="p-6 bg-slate-50">
-                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
-                    <BasicExample />
-                  </div>
-                </div>
-
-                <!-- Code Tabs -->
-                <div class="px-6 pb-6">
-                  <CodeTabs vue='<script setup>
-import { ref } from "vue";
-import { Masonry } from "@wyxos/vibe";
-
-const items = ref([]);
-
-async function getPage(page) {
-  const response = await fetch(`/api/items?page=${page}`);
-  const data = await response.json();
-  return {
-    items: data.items,
-    nextPage: page + 1
-  };
-}
-</script>
-
-<template>
-  <Masonry
-    v-model:items="items"
-    :get-page="getPage"
-    :load-at-page="1"
-  />
-</template>' />
-                </div>
-              </div>
-            </section>
-
-            <!-- Manual Init Example -->
-            <section id="manual-init" ref="manualInitRef" class="scroll-mt-24">
-              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
-                  <h2 class="text-2xl font-bold text-slate-800">Manual Init CTA</h2>
-                  <p class="text-slate-600 mt-1">Delay initialization until the user clicks a call-to-action</p>
-                </div>
-
-                <!-- Live Example -->
-                <div class="p-6 bg-slate-50">
-                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
-                    <ManualInitExample />
-                  </div>
-                </div>
-
-                <!-- Code Tabs -->
-                <div class="px-6 pb-6">
-                  <CodeTabs vue='<script setup>
-import { ref } from "vue";
-import { Masonry } from "@wyxos/vibe";
-
-const items = ref([]);
-const masonryRef = ref(null);
-
-async function getPage(page) {
-  const response = await fetch(`/api/items?page=${page}`);
-  const data = await response.json();
-  return {
-    items: data.items,
-    nextPage: page + 1
-  };
-}
-
-function handleInit() {
-  masonryRef.value?.loadPage(1);
-}
-</script>
-
-<template>
-  <button @click="handleInit">Load gallery</button>
-
-  <Masonry
-    ref="masonryRef"
-    v-model:items="items"
-    :get-page="getPage"
-    :load-at-page="1"
-    init="manual"
-  />
-</template>' />
-                </div>
-              </div>
-            </section>
-
-            <!-- Custom Masonry Item Example -->
-            <section id="custom-item" ref="customItemRef" class="scroll-mt-24">
-              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
-                  <h2 class="text-2xl font-bold text-slate-800">Custom Masonry Item</h2>
-                  <p class="text-slate-600 mt-1">Customize item rendering with scoped slots</p>
-                </div>
-
-                <!-- Live Example -->
-                <div class="p-6 bg-slate-50">
-                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
-                    <CustomItemExample />
-                  </div>
-                </div>
-
-                <!-- Code Tabs -->
-                <div class="px-6 pb-6">
-                  <CodeTabs vue='<script setup>
-import { ref } from "vue";
-import { Masonry } from "@wyxos/vibe";
-
-const items = ref([]);
-
-async function getPage(page) {
-  const response = await fetch(`/api/items?page=${page}`);
-  const data = await response.json();
-  return {
-    items: data.items,
-    nextPage: page + 1
-  };
-}
-</script>
-
-<template>
-  <Masonry
-    v-model:items="items"
-    :get-page="getPage"
-    :load-at-page="1"
-  >
-    <template #item="{ item, remove }">
-      <div class="custom-card">
-        <img :src="item.src" :alt="item.title" />
-        <div class="overlay">
-          <h3>{{ item.title }}</h3>
-          <button @click="remove">Remove</button>
-        </div>
-      </div>
-    </template>
-  </Masonry>
-</template>' />
-                </div>
-                -->
-              </div>
-            </section>
-
-            <!-- Header & Footer Example -->
-            <section id="header-footer" ref="headerFooterRef" class="scroll-mt-24">
-              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
-                  <h2 class="text-2xl font-bold text-slate-800">Header & Footer</h2>
-                  <p class="text-slate-600 mt-1">
-                    Use `layout.header` and `layout.footer` with slots to add per-item UI like badges, titles and
-                    actions.
-                  </p>
-                </div>
-
-                <!-- Live Example -->
-                <div class="p-6 bg-slate-50">
-                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
-                    <HeaderFooterExample />
-                  </div>
-                </div>
-
-                <!-- Code Tabs omitted for this example to keep docs build-safe.
-                     See the Header & Footer example component for full code. -->
-              </div>
-            </section>
-
-            <!-- Swipe Mode Example -->
-            <section id="swipe-mode" ref="swipeModeRef" class="scroll-mt-24">
-              <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
-                  <h2 class="text-2xl font-bold text-slate-800">Swipe Mode</h2>
-                  <p class="text-slate-600 mt-1">Vertical swipe feed for mobile devices</p>
-                </div>
-
-                <!-- Live Example -->
-                <div class="p-6 bg-slate-50">
-                  <div class="bg-white rounded-lg border border-slate-200 p-4" style="height: 500px;">
-                    <SwipeModeExample />
-                  </div>
-                </div>
-
-                <!-- Code Tabs -->
-                <div class="px-6 pb-6">
-                  <CodeTabs vue='<script setup>
-import { ref } from "vue";
-import { Masonry } from "@wyxos/vibe";
-
-const items = ref([]);
-
-async function getPage(page) {
-  const response = await fetch(`/api/items?page=${page}`);
-  const data = await response.json();
-  return {
-    items: data.items,
-    nextPage: page + 1
-  };
-}
-</script>
-
-<template>
-  <!-- Auto mode: switches to swipe on mobile -->
-  <Masonry
-    v-model:items="items"
-    :get-page="getPage"
-    layout-mode="auto"
-    :mobile-breakpoint="768"
-  />
-
-  <!-- Force swipe mode on all devices -->
-  <Masonry
-    v-model:items="items"
-    :get-page="getPage"
-    layout-mode="swipe"
-  />
-</template>' />
-                </div>
-              </div>
-            </section>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// @ts-nocheck - documentation page with inline string code samples that Vue/TS can't statically analyze cleanly
-import { ref, onMounted, onUnmounted } from 'vue'
-import CodeTabs from '../components/CodeTabs.vue'
-import BasicExample from '../components/examples/BasicExample.vue'
-import ManualInitExample from '../components/examples/ManualInitExample.vue'
-import CustomItemExample from '../components/examples/CustomItemExample.vue'
-import SwipeModeExample from '../components/examples/SwipeModeExample.vue'
-import HeaderFooterExample from '../components/examples/HeaderFooterExample.vue'
-
-const examples = [
-  { id: 'basic', title: 'Basic Usage' },
-  { id: 'manual-init', title: 'Manual Init CTA' },
-  { id: 'custom-item', title: 'Custom Masonry Item' },
-  { id: 'header-footer', title: 'Header & Footer' },
-  { id: 'swipe-mode', title: 'Swipe Mode' }
-]
-
-const activeSection = ref('basic')
-const basicRef = ref<HTMLElement | null>(null)
-const manualInitRef = ref<HTMLElement | null>(null)
-const customItemRef = ref<HTMLElement | null>(null)
-const headerFooterRef = ref<HTMLElement | null>(null)
-const swipeModeRef = ref<HTMLElement | null>(null)
-
-function scrollTo(id: string) {
-  const element = document.getElementById(id)
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    activeSection.value = id
-  }
-}
-
-function updateActiveSection() {
-  const sections = [
-    { id: 'basic', ref: basicRef },
-    { id: 'manual-init', ref: manualInitRef },
-    { id: 'custom-item', ref: customItemRef },
-    { id: 'header-footer', ref: headerFooterRef },
-    { id: 'swipe-mode', ref: swipeModeRef }
-  ]
-
-  const scrollPosition = window.scrollY + 100
-
-  for (let i = sections.length - 1; i >= 0; i--) {
-    const section = sections[i]
-    if (section.ref.value) {
-      const top = section.ref.value.offsetTop
-      if (scrollPosition >= top) {
-        activeSection.value = section.id
-        break
-      }
-    }
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('scroll', updateActiveSection)
-  updateActiveSection()
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', updateActiveSection)
-})
-</script>