@wyxos/vibe 1.6.22 → 1.6.24

package/src/useMasonryDimensions.ts

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

@@ -0,0 +1,218 @@
+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>
+  autoRefreshOnEmpty: boolean
+  paginationHistory: Ref<any[]>
+}
+
+export function useMasonryItems(options: UseMasonryItemsOptions) {
+  const {
+    masonry,
+    useSwipeMode,
+    refreshLayout,
+    refreshCurrentPage,
+    loadNext,
+    maybeBackfillToTarget,
+    autoRefreshOnEmpty,
+    paginationHistory
+  } = options
+
+  async function remove(item: any) {
+    const next = masonry.value.filter(i => i.id !== item.id)
+    masonry.value = next
+    await nextTick()
+
+    // If all items were removed, either refresh current page or load next based on prop
+    if (next.length === 0 && paginationHistory.value.length > 0) {
+      if (autoRefreshOnEmpty) {
+        await refreshCurrentPage()
+      } else {
+        try {
+          await loadNext()
+          // Force backfill from 0 to ensure viewport is filled
+          // Pass baseline=0 and force=true to trigger backfill even if backfillEnabled was temporarily disabled
+          await maybeBackfillToTarget(0, true)
+        } catch { }
+      }
+      return
+    }
+
+    // Commit DOM updates without forcing sync reflow
+    await new Promise<void>(r => requestAnimationFrame(() => r()))
+    // Start FLIP on next frame
+    requestAnimationFrame(() => {
+      refreshLayout(next)
+    })
+  }
+
+  async function removeMany(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, either refresh current page or load next based on prop
+    if (next.length === 0 && paginationHistory.value.length > 0) {
+      if (autoRefreshOnEmpty) {
+        await refreshCurrentPage()
+      } else {
+        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 new Promise<void>(r => requestAnimationFrame(() => r()))
+    // Start FLIP on next frame
+    requestAnimationFrame(() => {
+      refreshLayout(next)
+    })
+  }
+
+  /**
+   * 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 new Promise<void>(r => requestAnimationFrame(() => r()))
+      // Start FLIP on next frame
+      requestAnimationFrame(() => {
+        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 new Promise<void>(r => requestAnimationFrame(() => r()))
+      // Start FLIP on next frame
+      requestAnimationFrame(() => {
+        refreshLayout(newItems)
+      })
+    }
+  }
+
+  async function removeAll() {
+    // Clear all items
+    masonry.value = []
+  }
+
+  return {
+    remove,
+    removeMany,
+    restore,
+    restoreMany,
+    removeAll
+  }
+}
+

package/src/useMasonryLayout.ts

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