@wyxos/vibe 1.6.29 → 2.0.2

package/src/components/examples/HeaderFooterExample.vue

@@ -1,79 +0,0 @@
-<template>
-  <Masonry
-    v-model:items="items"
-    :get-page="getPage"
-    :load-at-page="1"
-    :layout="layout"
-    init="auto"
-  >
-    <template #item-header="{ item }">
-      <div class="h-full flex items-center justify-between px-3">
-        <div class="flex items-center gap-2">
-          <div class="w-6 h-6 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-sm">
-            <i :class="item.type === 'video' ? 'fas fa-video text-[10px] text-slate-500' : 'fas fa-image text-[10px] text-slate-500'"></i>
-          </div>
-          <span class="text-xs font-medium text-slate-700">#{{ String(item.id).split('-')[0] }}</span>
-        </div>
-        <span v-if="item.title" class="text-[11px] text-slate-600 truncate max-w-[160px]">{{ item.title }}</span>
-      </div>
-    </template>
-
-    <template #item-footer="{ item, remove }">
-      <div class="h-full flex items-center justify-between px-3">
-        <div class="flex items-center gap-2">
-          <button
-            v-if="remove"
-            class="px-2.5 py-1 rounded-full bg-white/90 text-slate-700 text-[11px] shadow-sm hover:bg-red-500 hover:text-white transition-colors"
-            @click.stop="remove(item)"
-          >
-            Remove
-          </button>
-        </div>
-        <div class="text-[11px] text-slate-600">
-          {{ item.width }}×{{ item.height }}
-        </div>
-      </div>
-    </template>
-  </Masonry>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Masonry from '../../Masonry.vue'
-import fixture from '../../pages.json'
-import type { MasonryItem, GetPageResult } from '../../types'
-
-const items = ref<MasonryItem[]>([])
-
-const layout = {
-  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
-  gutterX: 10,
-  gutterY: 10,
-  header: 36,
-  footer: 40
-}
-
-const getPage = async (page: number): Promise<GetPageResult> => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
-      
-      if (!pageData) {
-        resolve({
-          items: [],
-          nextPage: null
-        })
-        return
-      }
-      
-      resolve({
-        items: pageData.items,
-        nextPage: page < (fixture as any[]).length ? page + 1 : null
-      })
-    }, 300)
-  })
-}
-</script>
-
-
-

package/src/components/examples/ManualInitExample.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="relative h-full">
-    <div
-      v-if="!isInitialized"
-      class="absolute inset-0 z-10 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm"
-    >
-      <button
-        type="button"
-        class="inline-flex items-center gap-2 rounded-full bg-white px-5 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md"
-        @click="handleInit"
-      >
-        Load gallery
-        <span class="text-slate-400">-></span>
-      </button>
-    </div>
-
-    <Masonry
-      ref="masonryRef"
-      v-model:items="items"
-      :get-page="getPage"
-      :load-at-page="1"
-      :layout="layout"
-      init="manual"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Masonry from '../../Masonry.vue'
-import fixture from '../../pages.json'
-import type { MasonryItem, GetPageResult } from '../../types'
-
-const items = ref<MasonryItem[]>([])
-const isInitialized = ref(false)
-const masonryRef = ref<InstanceType<typeof Masonry> | null>(null)
-
-const layout = {
-  sizes: { base: 1, sm: 2, md: 3, lg: 4 },
-  gutterX: 10,
-  gutterY: 10
-}
-
-const getPage = async (page: number): Promise<GetPageResult> => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
-
-      if (!pageData) {
-        resolve({
-          items: [],
-          nextPage: null
-        })
-        return
-      }
-
-      resolve({
-        items: pageData.items,
-        nextPage: page < (fixture as any[]).length ? page + 1 : null
-      })
-    }, 300)
-  })
-}
-
-function handleInit() {
-  if (isInitialized.value) {
-    return
-  }
-
-  isInitialized.value = true
-  masonryRef.value?.loadPage(1)
-}
-</script>
-
-
-
-
-

package/src/components/examples/SwipeModeExample.vue

@@ -1,40 +0,0 @@
-<template>
-  <Masonry
-    v-model:items="items"
-    :get-page="getPage"
-    :load-at-page="1"
-    layout-mode="swipe"
-    init="auto"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Masonry from '../../Masonry.vue'
-import fixture from '../../pages.json'
-import type { MasonryItem, GetPageResult } from '../../types'
-
-const items = ref<MasonryItem[]>([])
-
-const getPage = async (page: number): Promise<GetPageResult> => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined
-      
-      if (!pageData) {
-        resolve({
-          items: [],
-          nextPage: null
-        })
-        return
-      }
-      
-      resolve({
-        items: pageData.items,
-        nextPage: page < (fixture as any[]).length ? page + 1 : null
-      })
-    }, 300)
-  })
-}
-</script>
-

package/src/createMasonryTransitions.ts

@@ -1,176 +0,0 @@
-/**
- * Factory for masonry item transitions (typed)
- * Optimized for large item arrays by skipping DOM operations for items outside viewport
- */
-export function createMasonryTransitions(
-  refs: { container?: any; masonry?: any },
-  opts?: { leaveDurationMs?: number; virtualizing?: { value: boolean } }
-) {
-  // 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 during virtualization - just set position immediately
-    if (opts?.virtualizing?.value) {
-      el.style.transition = 'none'
-      el.style.opacity = '1'
-      el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
-      el.style.removeProperty('--masonry-opacity-delay')
-      el.style.transition = ''
-      done()
-      return
-    }
-
-    // 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')
-    el.style.setProperty('--masonry-opacity-delay', `${delay}ms`)
-
-    el.style.opacity = '1'
-    el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
-    const clear = () => {
-      if (prevOpacityDelay) {
-        el.style.setProperty('--masonry-opacity-delay', prevOpacityDelay)
-      } else {
-        el.style.removeProperty('--masonry-opacity-delay')
-      }
-      el.removeEventListener('transitionend', clear)
-      done()
-    }
-    el.addEventListener('transitionend', clear)
-  }
-
-  function onBeforeEnter(el: HTMLElement) {
-    const left = parseInt(el.dataset.left || '0', 10)
-    const top = parseInt(el.dataset.top || '0', 10)
-
-    // Skip animation during virtualization
-    if (opts?.virtualizing?.value) {
-      el.style.transition = 'none'
-      el.style.opacity = '1'
-      el.style.transform = `translate3d(${left}px, ${top}px, 0) scale(1)`
-      el.style.removeProperty('--masonry-opacity-delay')
-      return
-    }
-
-    el.style.opacity = '0'
-    el.style.transform = `translate3d(${left}px, ${top + 10}px, 0) scale(0.985)`
-  }
-
-  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 during virtualization
-    if (opts?.virtualizing?.value) {
-      // no-op; removal will be immediate in leave
-      return
-    }
-
-    // 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)`
-    el.style.removeProperty('--masonry-opacity-delay')
-    el.style.transition = ''
-  }
-
-  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 during virtualization - remove immediately
-    if (opts?.virtualizing?.value) {
-      done()
-      return
-    }
-
-    // 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 : Number.NaN
-    let leaveMs = Number.isFinite(fromOpts) && fromOpts > 0 ? fromOpts : Number.NaN
-    if (!Number.isFinite(leaveMs)) {
-      const cs = getComputedStyle(el)
-      const varVal = cs.getPropertyValue('--masonry-leave-duration') || ''
-      const parsed = parseFloat(varVal)
-      leaveMs = Number.isFinite(parsed) && parsed > 0 ? parsed : 200
-    }
-
-    const prevDuration = el.style.transitionDuration
-
-    const cleanup = () => {
-      el.removeEventListener('transitionend', onEnd as any)
-      clearTimeout(fallback)
-      el.style.transitionDuration = prevDuration || ''
-    }
-    const onEnd = (e?: Event) => {
-      if (!e || e.target === el) {
-        cleanup()
-        done()
-      }
-    }
-    const fallback = setTimeout(() => {
-      cleanup()
-      done()
-    }, leaveMs + 100)
-
-    el.style.transitionDuration = `${leaveMs}ms`
-    el.style.opacity = '0'
-    el.style.transform = `translate3d(${left}px, ${top + 10}px, 0) scale(0.985)`
-    el.addEventListener('transitionend', onEnd as any)
-  }
-
-  return {
-    onEnter,
-    onBeforeEnter,
-    onBeforeLeave,
-    onLeave
-  }
-}

package/src/main.ts

@@ -1,6 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-import router from './router'
-
-createApp(App).use(router).mount('#app')

package/src/masonryUtils.ts

@@ -1,96 +0,0 @@
-import type { LayoutOptions, ProcessedMasonryItem } from './types'
-
-/**
- * Get responsive column count based on container width and layout sizes
- */
-export function getColumnCount(layout: Pick<LayoutOptions, 'sizes'> & { sizes: Required<NonNullable<LayoutOptions['sizes']>> }, containerWidth?: number): number {
-  const width = containerWidth ?? (typeof window !== 'undefined' ? window.innerWidth : 1024)
-  const sizes = layout.sizes
-
-  if (width >= 1536 && sizes['2xl']) return sizes['2xl']
-  if (width >= 1280 && sizes.xl) return sizes.xl
-  if (width >= 1024 && sizes.lg) return sizes.lg
-  if (width >= 768 && sizes.md) return sizes.md
-  if (width >= 640 && sizes.sm) return sizes.sm
-  return sizes.base
-}
-
-/**
- * Get current breakpoint name based on container width
- */
-export function getBreakpointName(containerWidth?: number): 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' {
-  // Only use fallback if containerWidth is explicitly undefined/null
-  // If it's 0, we still use it (will return 'base')
-  const width = containerWidth !== undefined && containerWidth !== null 
-    ? containerWidth 
-    : (typeof window !== 'undefined' ? window.innerWidth : 1024)
-
-  if (width >= 1536) return '2xl'
-  if (width >= 1280) return 'xl'
-  if (width >= 1024) return 'lg'
-  if (width >= 768) return 'md'
-  if (width >= 640) return 'sm'
-  return 'base'
-}
-
-/**
- * Calculate container height based on item positions
- */
-export function calculateContainerHeight(items: ProcessedMasonryItem[]): number {
-  const contentHeight = items.reduce((acc, item) => {
-    return Math.max(acc, item.top + item.columnHeight)
-  }, 0)
-  return contentHeight + 500
-}
-
-/**
- * Get style object for masonry item positioning
- */
-export function getItemStyle(item: ProcessedMasonryItem): Record<string, string> {
-  return {
-    transform: `translate3d(${item.left}px, ${item.top}px, 0)` ,
-    top: '0px',
-    left: '0px',
-    width: `${item.columnWidth}px`,
-    height: `${item.columnHeight}px`
-  }
-}
-
-/**
- * Get item attributes for rendering
- */
-export function getItemAttributes(item: ProcessedMasonryItem, index: number = 0): Record<string, any> {
-  return {
-    style: getItemStyle(item),
-    'data-top': item.top,
-    'data-left': item.left,
-    'data-id': `${(item as any).page}-${(item as any).id}`,
-    'data-index': index,
-  }
-}
-
-/**
- * Calculate column heights for masonry layout
- */
-export function calculateColumnHeights(items: ProcessedMasonryItem[], columnCount: number): number[] {
-  // Derive columns by actual left positions to reflect shortest-column placement
-  if (!items.length || columnCount <= 0) {
-    return new Array<number>(Math.max(1, columnCount)).fill(0)
-  }
-  // Unique lefts (sorted) represent the columns in visual order
-  const uniqueLefts = Array.from(new Set(items.map(i => i.left))).sort((a, b) => a - b)
-  const limitedLefts = uniqueLefts.slice(0, columnCount)
-  const leftIndexMap = new Map<number, number>()
-  for (let idx = 0; idx < limitedLefts.length; idx++) leftIndexMap.set(limitedLefts[idx], idx)
-
-  const heights = new Array<number>(limitedLefts.length).fill(0)
-  for (const it of items) {
-    const col = leftIndexMap.get(it.left)
-    if (col != null) {
-      heights[col] = Math.max(heights[col], it.top + it.columnHeight)
-    }
-  }
-  // Pad if some columns haven't been populated yet (e.g., initial render)
-  while (heights.length < columnCount) heights.push(0)
-  return heights
-}