@wyxos/vibe 1.6.29 → 2.0.2

package/src/router/index.ts

@@ -1,20 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-
-const router = createRouter({
-  history: createWebHashHistory(), // Hash mode works perfectly with GitHub Pages
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: () => import('../views/Home.vue')
-    },
-    {
-      path: '/examples',
-      name: 'examples',
-      component: () => import('../views/Examples.vue')
-    }
-  ]
-})
-
-export default router
-

package/src/style.css

@@ -1,32 +0,0 @@
-@import "tailwindcss";
-
-
-:root {
-  font-family: 'Inter', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  background-color: #f8fafc;
-  color: #0f172a;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #93c5fd;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #60a5fa;
-}

package/src/types.ts

@@ -1,101 +0,0 @@
-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 }
-
-/**
- * Type for the Masonry component instance (what's exposed via defineExpose)
- * Use this type when accessing the component via template refs
- */
-export interface MasonryInstance {
-  // Cancels any ongoing load operations (page loads, backfills, etc.)
-  cancelLoad: () => void
-  // Opaque caller context passed through to getPage(page, context)
-  context: any
-  // Container height (wrapper element) in pixels
-  containerHeight: number
-  // Container width (wrapper element) in pixels
-  containerWidth: number
-  // Current Tailwind breakpoint name (base, sm, md, lg, xl, 2xl) based on containerWidth
-  currentBreakpoint: string
-  // Current page number or cursor being displayed
-  currentPage: number | string | null
-  // Completely destroys the component, clearing all state and resetting to initial state
-  destroy: () => void
-  // Boolean indicating if the end of the list has been reached (no more pages to load)
-  hasReachedEnd: boolean
-  // Initializes the component with items, page, and next page cursor. Use this for manual init mode.
-  initialize: (items: MasonryItem[], page: number | string, next: number | string | null) => Promise<void> | void
-  // Boolean indicating if the component has been initialized (first content has loaded)
-  isInitialized: boolean
-  // Boolean indicating if a page load or backfill operation is currently in progress
-  isLoading: boolean
-  // Error object if the last load operation failed, null otherwise
-  loadError: Error | null
-  // Loads the next page of items asynchronously
-  loadNext: () => Promise<void>
-  // Loads a specific page number or cursor asynchronously
-  loadPage: (page: number | string) => Promise<void>
-  // Array tracking pagination history (pages/cursors that have been loaded)
-  paginationHistory: Array<number | string | null>
-  // Refreshes the current page by clearing items and reloading from the current page
-  refreshCurrentPage: () => Promise<void>
-  // Recalculates the layout positions for all items. Call this after manually modifying items.
-  refreshLayout: (items: MasonryItem[]) => void
-  // Removes a single item from the masonry
-  remove: (item: MasonryItem) => void
-  // Removes all items from the masonry
-  removeAll: () => void
-  // Removes multiple items from the masonry in a single operation
-  removeMany: (items: MasonryItem[]) => Promise<void> | void
-  // Resets the component to initial state (clears items, resets pagination, scrolls to top)
-  reset: () => void
-  // Restores a single item at its original index (useful for undo operations)
-  restore: (item: MasonryItem, index: number) => Promise<void> | void
-  // Restores multiple items at their original indices (useful for undo operations)
-  restoreMany: (items: MasonryItem[], indices: number[]) => Promise<void> | void
-  // Scrolls the container to a specific position
-  scrollTo: (position: number) => void
-  // Scrolls the container to the top
-  scrollToTop: () => void
-  // Sets the opaque caller context (alternative to v-model:context)
-  setContext: (val: any) => void
-  // Sets fixed dimensions for the container, overriding ResizeObserver. Pass null to restore automatic sizing.
-  setFixedDimensions: (dimensions: { width: number; height: number } | null) => void
-  // Computed property returning the total number of items currently in the masonry
-  totalItems: number
-}

package/src/useMasonryDimensions.ts

@@ -1,59 +0,0 @@
-import { ref, type Ref } from 'vue'
-
-export interface UseMasonryDimensionsOptions {
-  masonry: Ref<any[]>
-}
-
-export function useMasonryDimensions(options: UseMasonryDimensionsOptions) {
-  const { masonry } = options
-
-  // Track items with invalid dimensions to avoid duplicate warnings
-  const invalidDimensionIds = ref<Set<number | string>>(new Set())
-
-  function isPositiveNumber(value: any): boolean {
-    return typeof value === 'number' && value > 0 && Number.isFinite(value)
-  }
-
-  function checkItemDimensions(items: any[], context: string) {
-    try {
-      if (!Array.isArray(items) || items.length === 0) return
-      const missing = items.filter((item) => !isPositiveNumber(item?.width) || !isPositiveNumber(item?.height))
-      if (missing.length === 0) return
-
-      const newIds: Array<number | string> = []
-      for (const item of missing) {
-        const id = (item?.id as number | string | undefined) ?? `idx:${masonry.value.indexOf(item)}`
-        if (!invalidDimensionIds.value.has(id)) {
-          invalidDimensionIds.value.add(id)
-          newIds.push(id)
-        }
-      }
-      if (newIds.length > 0) {
-        const sample = newIds.slice(0, 10)
-        // eslint-disable-next-line no-console
-        console.warn(
-          '[Masonry] Items missing width/height detected:',
-          {
-            context,
-            count: newIds.length,
-            sampleIds: sample,
-            hint: 'Ensure each item has positive width and height. Consider providing fallbacks (e.g., 512x512) at the data layer.'
-          }
-        )
-      }
-    } catch {
-      // best-effort diagnostics only
-    }
-  }
-
-  function reset() {
-    invalidDimensionIds.value.clear()
-  }
-
-  return {
-    checkItemDimensions,
-    invalidDimensionIds,
-    reset
-  }
-}
-

package/src/useMasonryItems.ts

@@ -1,231 +0,0 @@
-import { nextTick, type Ref, type ComputedRef } from 'vue'
-
-export interface UseMasonryItemsOptions {
-  masonry: Ref<any[]>
-  useSwipeMode: ComputedRef<boolean>
-  refreshLayout: (items: any[]) => void
-  refreshCurrentPage: () => Promise<any>
-  loadNext: () => Promise<any>
-  maybeBackfillToTarget: (baseline: number, force?: boolean) => Promise<void>
-  paginationHistory: Ref<any[]>
-}
-
-export function useMasonryItems(options: UseMasonryItemsOptions) {
-  const {
-    masonry,
-    useSwipeMode,
-    refreshLayout,
-    refreshCurrentPage,
-    loadNext,
-    maybeBackfillToTarget,
-    paginationHistory
-  } = options
-
-  // Batch remove operations to prevent visual glitches from rapid successive calls
-  let pendingRemoves = new Set<any>()
-  let removeTimeoutId: ReturnType<typeof setTimeout> | null = null
-  let isProcessingRemoves = false
-
-  async function processPendingRemoves() {
-    if (pendingRemoves.size === 0 || isProcessingRemoves) return
-
-    isProcessingRemoves = true
-    const itemsToRemove = Array.from(pendingRemoves)
-    pendingRemoves.clear()
-    removeTimeoutId = null
-
-    // Use removeManyInternal for batched removal (bypass batching to avoid recursion)
-    await removeManyInternal(itemsToRemove)
-    isProcessingRemoves = false
-  }
-
-  async function remove(item: any) {
-    // Add to pending removes
-    pendingRemoves.add(item)
-
-    // Clear existing timeout
-    if (removeTimeoutId) {
-      clearTimeout(removeTimeoutId)
-    }
-
-    // Batch removes within a short time window (16ms = ~1 frame at 60fps)
-    removeTimeoutId = setTimeout(() => {
-      processPendingRemoves()
-    }, 16)
-  }
-
-  async function removeManyInternal(items: any[]) {
-    if (!items || items.length === 0) return
-    const ids = new Set(items.map(i => i.id))
-    const next = masonry.value.filter(i => !ids.has(i.id))
-    masonry.value = next
-    await nextTick()
-
-    // If all items were removed, load next page
-    if (next.length === 0 && paginationHistory.value.length > 0) {
-      try {
-        await loadNext()
-        // Force backfill from 0 to ensure viewport is filled
-        await maybeBackfillToTarget(0, true)
-      } catch { }
-      return
-    }
-
-    // Commit DOM updates without forcing sync reflow
-    await nextTick()
-    // Start FLIP on next tick
-    await nextTick()
-    refreshLayout(next)
-  }
-
-  async function removeMany(items: any[]) {
-    if (!items || items.length === 0) return
-
-    // Add all items to pending removes for batching
-    items.forEach(item => pendingRemoves.add(item))
-
-    // Clear existing timeout
-    if (removeTimeoutId) {
-      clearTimeout(removeTimeoutId)
-    }
-
-    // Batch removes within a short time window (16ms = ~1 frame at 60fps)
-    removeTimeoutId = setTimeout(() => {
-      processPendingRemoves()
-    }, 16)
-  }
-
-  /**
-   * Restore a single item at its original index.
-   * This is useful for undo operations where an item needs to be restored to its exact position.
-   * Handles all index calculation and layout recalculation internally.
-   * @param item - Item to restore
-   * @param index - Original index of the item
-   */
-  async function restore(item: any, index: number) {
-    if (!item) return
-
-    const current = masonry.value
-    const existingIndex = current.findIndex(i => i.id === item.id)
-    if (existingIndex !== -1) return // Item already exists
-
-    // Insert at the original index (clamped to valid range)
-    const newItems = [...current]
-    const targetIndex = Math.min(index, newItems.length)
-    newItems.splice(targetIndex, 0, item)
-
-    // Update the masonry array
-    masonry.value = newItems
-    await nextTick()
-
-    // Trigger layout recalculation (same pattern as remove)
-    if (!useSwipeMode.value) {
-      // Commit DOM updates without forcing sync reflow
-      await nextTick()
-      // Start FLIP on next tick
-      await nextTick()
-      refreshLayout(newItems)
-    }
-  }
-
-  /**
-   * Restore multiple items at their original indices.
-   * This is useful for undo operations where items need to be restored to their exact positions.
-   * Handles all index calculation and layout recalculation internally.
-   * @param items - Array of items to restore
-   * @param indices - Array of original indices for each item (must match items array length)
-   */
-  async function restoreMany(items: any[], indices: number[]) {
-    if (!items || items.length === 0) return
-    if (!indices || indices.length !== items.length) {
-      console.warn('[Masonry] restoreMany: items and indices arrays must have the same length')
-      return
-    }
-
-    const current = masonry.value
-    const existingIds = new Set(current.map(i => i.id))
-
-    // Filter out items that already exist and pair with their indices
-    const itemsToRestore: Array<{ item: any; index: number }> = []
-    for (let i = 0; i < items.length; i++) {
-      if (!existingIds.has(items[i]?.id)) {
-        itemsToRestore.push({ item: items[i], index: indices[i] })
-      }
-    }
-
-    if (itemsToRestore.length === 0) return
-
-    // Build the final array by merging current items and restored items
-    // Strategy: Build position by position - for each position, decide if it should be
-    // a restored item (at its original index) or a current item (accounting for shifts)
-
-    // Create a map of restored items by their original index for O(1) lookup
-    const restoredByIndex = new Map<number, any>()
-    for (const { item, index } of itemsToRestore) {
-      restoredByIndex.set(index, item)
-    }
-
-    // Find the maximum position we need to consider
-    const maxRestoredIndex = itemsToRestore.length > 0
-      ? Math.max(...itemsToRestore.map(({ index }) => index))
-      : -1
-    const maxPosition = Math.max(current.length - 1, maxRestoredIndex)
-
-    // Build the final array position by position
-    // Key insight: Current array items are in "shifted" positions (missing the removed items).
-    // When we restore items at their original positions, current items naturally shift back.
-    // We can build the final array by iterating positions and using items sequentially.
-    const newItems: any[] = []
-    let currentArrayIndex = 0 // Track which current item we should use next
-
-    // Iterate through all positions up to the maximum we need
-    for (let position = 0; position <= maxPosition; position++) {
-      // If there's a restored item that belongs at this position, use it
-      if (restoredByIndex.has(position)) {
-        newItems.push(restoredByIndex.get(position)!)
-      } else {
-        // Otherwise, this position should be filled by the next current item
-        // Since current array is missing restored items, items are shifted left.
-        // By using them sequentially, they naturally end up in the correct positions.
-        if (currentArrayIndex < current.length) {
-          newItems.push(current[currentArrayIndex])
-          currentArrayIndex++
-        }
-      }
-    }
-
-    // Add any remaining current items that come after the last restored position
-    // (These are items that were originally after maxRestoredIndex)
-    while (currentArrayIndex < current.length) {
-      newItems.push(current[currentArrayIndex])
-      currentArrayIndex++
-    }
-
-    // Update the masonry array
-    masonry.value = newItems
-    await nextTick()
-
-    // Trigger layout recalculation (same pattern as removeMany)
-    if (!useSwipeMode.value) {
-      // Commit DOM updates without forcing sync reflow
-      await nextTick()
-      // Start FLIP on next tick
-      await nextTick()
-      refreshLayout(newItems)
-    }
-  }
-
-  async function removeAll() {
-    // Clear all items
-    masonry.value = []
-  }
-
-  return {
-    remove,
-    removeMany,
-    restore,
-    restoreMany,
-    removeAll
-  }
-}
-

package/src/useMasonryLayout.ts

@@ -1,164 +0,0 @@
-import { ref, nextTick, type Ref, type ComputedRef } from 'vue'
-import calculateLayout from './calculateLayout'
-import { getColumnCount, calculateContainerHeight } from './masonryUtils'
-
-export interface UseMasonryLayoutOptions {
-  masonry: Ref<any[]>
-  useSwipeMode: ComputedRef<boolean>
-  container: Ref<HTMLElement | null>
-  columns: Ref<number>
-  containerWidth: Ref<number>
-  masonryContentHeight: Ref<number>
-  layout: ComputedRef<any>
-  fixedDimensions: Ref<{ width?: number; height?: number } | null>
-  checkItemDimensions: (items: any[], context: string) => void
-}
-
-export function useMasonryLayout(options: UseMasonryLayoutOptions) {
-  const {
-    masonry,
-    useSwipeMode,
-    container,
-    columns,
-    containerWidth,
-    masonryContentHeight,
-    layout,
-    fixedDimensions,
-    checkItemDimensions
-  } = options
-
-  // Cache previous layout state for incremental updates
-  let previousLayoutItems: any[] = []
-
-  function calculateHeight(content: any[]) {
-    const newHeight = calculateContainerHeight(content as any)
-    let floor = 0
-    if (container.value) {
-      const { scrollTop, clientHeight } = container.value
-      floor = scrollTop + clientHeight + 100
-    }
-    masonryContentHeight.value = Math.max(newHeight, floor)
-  }
-
-  function refreshLayout(items: any[]) {
-    if (useSwipeMode.value) {
-      // In swipe mode, no layout calculation needed - items are stacked vertically
-      masonry.value = items as any
-      return
-    }
-
-    // Always update masonry value, even if container isn't ready
-    // This ensures items are added in tests and when container isn't available yet
-    masonry.value = items as any
-
-    if (!container.value) return
-    // Developer diagnostics: warn when dimensions are invalid
-    checkItemDimensions(items as any[], 'refreshLayout')
-
-    // Optimization: For large arrays, check if we can do incremental update
-    // Only works if items were removed from the end (common case)
-    const canUseIncremental = items.length > 1000 &&
-      previousLayoutItems.length > items.length &&
-      previousLayoutItems.length - items.length < 100 // Only small removals
-
-    if (canUseIncremental) {
-      // Check if items were removed from the end (most common case)
-      let removedFromEnd = true
-      for (let i = 0; i < items.length; i++) {
-        if (items[i]?.id !== previousLayoutItems[i]?.id) {
-          removedFromEnd = false
-          break
-        }
-      }
-
-      if (removedFromEnd) {
-        // Items removed from end - we can reuse previous positions for remaining items
-        // Just update indices and recalculate height
-        const itemsWithIndex = items.map((item, index) => ({
-          ...previousLayoutItems[index],
-          originalIndex: index
-        }))
-
-        // Recalculate height only
-        calculateHeight(itemsWithIndex as any)
-        masonry.value = itemsWithIndex
-        previousLayoutItems = itemsWithIndex
-        return
-      }
-    }
-
-    // Full recalculation (fallback for all other cases)
-    // Update original index to reflect current position in array
-    // This ensures indices are correct after items are removed
-    const itemsWithIndex = items.map((item, index) => ({
-      ...item,
-      originalIndex: index
-    }))
-
-    // When fixed dimensions are set, ensure container uses the fixed width for layout
-    // This prevents gaps when the container's actual width differs from the fixed width
-    const containerEl = container.value as HTMLElement
-    if (fixedDimensions.value && fixedDimensions.value.width !== undefined) {
-      // Temporarily set width to match fixed dimensions for accurate layout calculation
-      const originalWidth = containerEl.style.width
-      const originalBoxSizing = containerEl.style.boxSizing
-      containerEl.style.boxSizing = 'border-box'
-      containerEl.style.width = `${fixedDimensions.value.width}px`
-      // Force reflow
-      containerEl.offsetWidth
-
-      const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
-
-      // Restore original width
-      containerEl.style.width = originalWidth
-      containerEl.style.boxSizing = originalBoxSizing
-
-      calculateHeight(content as any)
-      masonry.value = content
-      // Cache for next incremental update
-      previousLayoutItems = content
-    } else {
-      const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
-      calculateHeight(content as any)
-      masonry.value = content
-      // Cache for next incremental update
-      previousLayoutItems = content
-    }
-  }
-
-  function setFixedDimensions(
-    dimensions: { width?: number; height?: number } | null,
-    updateScrollProgress?: () => void
-  ) {
-    fixedDimensions.value = dimensions
-    if (dimensions) {
-      if (dimensions.width !== undefined) containerWidth.value = dimensions.width
-      // Force layout refresh when dimensions change
-      if (!useSwipeMode.value && container.value && masonry.value.length > 0) {
-        // Use nextTick to ensure DOM has updated
-        nextTick(() => {
-          columns.value = getColumnCount(layout.value as any, containerWidth.value)
-          refreshLayout(masonry.value as any)
-          if (updateScrollProgress) {
-            updateScrollProgress()
-          }
-        })
-      }
-    }
-    // When clearing fixed dimensions, restore from wrapper
-    // Note: wrapper is not available in this composable, so this needs to be handled by caller
-  }
-
-  function onResize() {
-    columns.value = getColumnCount(layout.value as any, containerWidth.value)
-    refreshLayout(masonry.value as any)
-  }
-
-  return {
-    refreshLayout,
-    setFixedDimensions,
-    onResize,
-    calculateHeight
-  }
-}
-