@wyxos/vibe 1.3.1 → 1.4.1

package/package.json

@@ -1,20 +1,36 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.3.1",
-  "main": "index.js",
-  "module": "index.js",
+  "version": "1.4.1",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./vibe.css": "./lib/vibe.css",
+    "./package.json": "./package.json"
+  },
   "type": "module",
   "files": [
-    "src",
-    "index.js"
+    "lib",
+    "src"
+  ],
+  "sideEffects": [
+    "./lib/vibe.css"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && node write-cname.js",
+    "build": "vue-tsc --noEmit && vite build && node write-cname.js",
+    "build:demo": "vue-tsc --noEmit && vite build && node write-cname.js",
+    "build:lib": "vite build --config vite.lib.config.ts && vue-tsc --declaration --emitDeclarationOnly --outDir lib",
     "preview": "vite preview",
     "watch": "vite build --watch",
     "release": "node release.mjs",
-    "test": "vitest"
+    "test": "vitest",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
     "lodash": "^4.17.21",
@@ -28,13 +44,17 @@
     "@tailwindcss/vite": "^4.0.15",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
+    "@types/node": "^24.5.2",
     "chalk": "^5.3.0",
     "inquirer": "^10.1.8",
     "jsdom": "^26.0.0",
     "simple-git": "^3.27.0",
     "tailwindcss": "^4.0.15",
+    "typescript": "^5.9.2",
     "uuid": "^11.1.0",
     "vite": "^6.2.0",
-    "vitest": "^3.0.9"
+    "vite-plugin-vue-mcp": "^0.3.2",
+    "vitest": "^3.0.9",
+    "vue-tsc": "^3.1.0"
   }
 }

package/src/App.vue

@@ -1,17 +1,18 @@
-<script setup>
+<script setup lang="ts">
 import Masonry from "./Masonry.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 import fixture from "./pages.json";
+import type { MasonryItem, GetPageResult } from "./types";
 
-const items = ref([])
+const items = ref<MasonryItem[]>([]);
 
-const masonry = ref(null)
+const masonry = ref<InstanceType<typeof Masonry> | null>(null);
 
-const getPage = async (page) => {
+const getPage = async (page: number): Promise<GetPageResult> => {
   return new Promise((resolve) => {
     setTimeout(() => {
       // Check if the page exists in the fixture
-      const pageData = fixture[page - 1];
+      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined;
 
       if (!pageData) {
         // Return empty items if page doesn't exist
@@ -22,15 +23,15 @@ const getPage = async (page) => {
         return;
       }
 
-      let output = {
+      const output: GetPageResult = {
         items: pageData.items,
-        nextPage: page < fixture.length ? page + 1 : null
+        nextPage: page < (fixture as any[]).length ? page + 1 : null
       };
 
-      resolve(output)
-    }, 1000)
-  })
-}
+      resolve(output);
+    }, 1000);
+  });
+};
 </script>
 <template>
   <main class="flex flex-col items-center p-4 bg-slate-100 h-screen overflow-hidden">
@@ -49,16 +50,12 @@ const getPage = async (page) => {
       </div>
     </header>
     <masonry class="bg-blue-500 " v-model:items="items" :get-next-page="getPage" :load-at-page="1" ref="masonry">
-      <template #item="{item, onRemove}">
+      <template #item="{item, remove}">
         <img :src="item.src" class="w-full"/>
-        <button class="absolute bottom-0 right-0 bg-red-500 text-white p-2 rounded cursor-pointer" @click="onRemove(item)">
+        <button class="absolute bottom-0 right-0 bg-red-500 text-white p-2 rounded cursor-pointer" @click="remove(item)">
           <i class="fas fa-trash"></i>
         </button>
       </template>
     </masonry>
   </main>
 </template>
-
-
-
-

package/src/Masonry.vue

@@ -1,21 +1,20 @@
-<script setup>
-import {computed, nextTick, onMounted, onUnmounted, ref} from "vue";
-import calculateLayout from "./calculateLayout.js";
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
+import calculateLayout from "./calculateLayout";
 import { debounce } from 'lodash-es'
 import {
   getColumnCount,
   calculateContainerHeight,
   getItemAttributes,
   calculateColumnHeights
-} from './masonryUtils.js'
-import { useMasonryTransitions } from './useMasonryTransitions.js'
-import { useMasonryScroll } from './useMasonryScroll.js'
+} from './masonryUtils'
+import { useMasonryTransitions } from './useMasonryTransitions'
+import { useMasonryScroll } from './useMasonryScroll'
 
 const props = defineProps({
   getNextPage: {
     type: Function,
-    default: () => {
-    }
+    default: () => {}
   },
   loadAtPage: {
     type: [Number, String],
@@ -31,7 +30,7 @@ const props = defineProps({
   paginationType: {
     type: String,
     default: 'page', // or 'cursor'
-    validator: v => ['page', 'cursor'].includes(v)
+    validator: (v: string) => ['page', 'cursor'].includes(v)
   },
   skipInitialLoad: {
     type: Boolean,
@@ -45,24 +44,61 @@ const props = defineProps({
     type: Number,
     default: 40
   },
+  // Backfill configuration
+  backfillEnabled: {
+    type: Boolean,
+    default: true
+  },
+  backfillDelayMs: {
+    type: Number,
+    default: 2000
+  },
+  backfillMaxCalls: {
+    type: Number,
+    default: 10
+  },
+  // Retry configuration
+  retryMaxAttempts: {
+    type: Number,
+    default: 3
+  },
+  retryInitialDelayMs: {
+    type: Number,
+    default: 2000
+  },
+  retryBackoffStepMs: {
+    type: Number,
+    default: 2000
+  },
   transitionDurationMs: {
     type: Number,
     default: 450
   },
+  // Shorter, snappier duration specifically for item removal (leave)
+  leaveDurationMs: {
+    type: Number,
+    default: 160
+  },
   transitionEasing: {
     type: String,
     default: 'cubic-bezier(.22,.61,.36,1)'
+  },
+  // Force motion even when user has reduced-motion enabled
+  forceMotion: {
+    type: Boolean,
+    default: false
   }
 })
 
 const defaultLayout = {
-  sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6 },
+  sizes: {base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6},
   gutterX: 10,
   gutterY: 10,
   header: 0,
   footer: 0,
   paddingLeft: 0,
-  paddingRight: 0
+  paddingRight: 0,
+  placement: 'masonry'
 }
 
 const layout = computed(() => ({
@@ -74,27 +110,30 @@ const layout = computed(() => ({
   }
 }))
 
-const emits = defineEmits(['update:items'])
-
-const masonry = computed({
+const emits = defineEmits([
+  'update:items',
+  'backfill:start',
+  'backfill:tick',
+  'backfill:stop',
+  'retry:start',
+  'retry:tick',
+  'retry:stop'
+])
+
+const masonry = computed<any>({
   get: () => props.items,
   set: (val) => emits('update:items', val)
 })
 
-const columns = ref(7)
-
-const container = ref(null)
-
-const paginationHistory = ref([])
-
-const nextPage = ref(null)
-
-const isLoading = ref(false)
-
-const containerHeight = ref(0)
+const columns = ref<number>(7)
+const container = ref<HTMLElement | null>(null)
+const paginationHistory = ref<any[]>([])
+const nextPage = ref<number | null>(null)
+const isLoading = ref<boolean>(false)
+const containerHeight = ref<number>(0)
 
 // Scroll progress tracking
-const scrollProgress = ref({
+const scrollProgress = ref<{ distanceToTrigger: number; isNearTrigger: boolean }>({
   distanceToTrigger: 0,
   isNearTrigger: false
 })
@@ -102,13 +141,12 @@ const scrollProgress = ref({
 const updateScrollProgress = () => {
   if (!container.value) return
 
-  const { scrollTop, clientHeight } = container.value
+  const {scrollTop, clientHeight} = container.value
   const visibleBottom = scrollTop + clientHeight
 
-  const columnHeights = calculateColumnHeights(masonry.value, columns.value)
-  // Use longest column to match the trigger logic in useMasonryScroll.js
+  const columnHeights = calculateColumnHeights(masonry.value as any, columns.value)
   const longestColumn = Math.max(...columnHeights)
-  const triggerPoint = longestColumn + 300 // Match: longestColumn + 300 < visibleBottom
+  const triggerPoint = longestColumn + 300
 
   const distanceToTrigger = Math.max(0, triggerPoint - visibleBottom)
   const isNearTrigger = distanceToTrigger <= 100
@@ -120,57 +158,75 @@ const updateScrollProgress = () => {
 }
 
 // Setup composables
-const { onEnter, onBeforeEnter, onBeforeLeave, onLeave } = useMasonryTransitions(masonry)
+const {onEnter, onBeforeEnter, onBeforeLeave, onLeave} = useMasonryTransitions(masonry)
 
-const { handleScroll } = useMasonryScroll({
+const {handleScroll} = useMasonryScroll({
   container,
-  masonry,
+  masonry: masonry as any,
   columns,
   containerHeight,
   isLoading,
   maxItems: props.maxItems,
   pageSize: props.pageSize,
   refreshLayout,
-  // Allow scroll composable to set items without recalculating layout (phase-1 cleanup)
-  setItemsRaw: (items) => { masonry.value = items },
-  loadNext
+  setItemsRaw: (items: any[]) => {
+    masonry.value = items
+  },
+  loadNext,
+  leaveEstimateMs: props.leaveDurationMs
 })
 
 defineExpose({
   isLoading,
   refreshLayout,
   containerHeight,
-  onRemove,
+  remove,
   removeMany,
   loadNext,
   loadPage,
   reset,
+  init,
   paginationHistory
 })
 
-function calculateHeight(content) {
-  const newHeight = calculateContainerHeight(content)
+function calculateHeight(content: any[]) {
+  const newHeight = calculateContainerHeight(content as any)
   let floor = 0
   if (container.value) {
-    const { scrollTop, clientHeight } = container.value
-    // Ensure the container never shrinks below the visible viewport bottom + small buffer
+    const {scrollTop, clientHeight} = container.value
     floor = scrollTop + clientHeight + 100
   }
   containerHeight.value = Math.max(newHeight, floor)
 }
 
-function refreshLayout(items) {
-  const content = calculateLayout(items, container.value, columns.value, layout.value);
-
-  calculateHeight(content)
-
+function refreshLayout(items: any[]) {
+  if (!container.value) return
+  const content = calculateLayout(items as any, container.value as HTMLElement, columns.value, layout.value as any)
+  calculateHeight(content as any)
   masonry.value = content
 }
 
-async function getContent(page) {
+function waitWithProgress(totalMs: number, onTick: (remaining: number, total: number) => void) {
+  return new Promise<void>((resolve) => {
+    const total = Math.max(0, totalMs | 0)
+    const start = Date.now()
+    onTick(total, total)
+    const id = setInterval(() => {
+      const elapsed = Date.now() - start
+      const remaining = Math.max(0, total - elapsed)
+      onTick(remaining, total)
+      if (remaining <= 0) {
+        clearInterval(id)
+        resolve()
+      }
+    }, 100)
+  })
+}
+
+async function getContent(page: number) {
   try {
-    const response = await props.getNextPage(page)
-    refreshLayout([...masonry.value, ...response.items])
+    const response = await fetchWithRetry(() => props.getNextPage(page))
+    refreshLayout([...(masonry.value as any[]), ...response.items])
     return response
   } catch (error) {
     console.error('Error in getContent:', error)
@@ -178,14 +234,41 @@ async function getContent(page) {
   }
 }
 
-async function loadPage(page) {
-  if (isLoading.value) return // Prevent concurrent loading
+async function fetchWithRetry<T = any>(fn: () => Promise<T>): Promise<T> {
+  let attempt = 0
+  const max = props.retryMaxAttempts
+  let delay = props.retryInitialDelayMs
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    try {
+      const res = await fn()
+      if (attempt > 0) {
+        emits('retry:stop', {attempt, success: true})
+      }
+      return res
+    } catch (err) {
+      attempt++
+      if (attempt > max) {
+        emits('retry:stop', {attempt: attempt - 1, success: false})
+        throw err
+      }
+      emits('retry:start', {attempt, max, totalMs: delay})
+      await waitWithProgress(delay, (remaining, total) => {
+        emits('retry:tick', {attempt, remainingMs: remaining, totalMs: total})
+      })
+      delay += props.retryBackoffStepMs
+    }
+  }
+}
 
+async function loadPage(page: number) {
+  if (isLoading.value) return
   isLoading.value = true
-
   try {
+    const baseline = (masonry.value as any[]).length
     const response = await getContent(page)
     paginationHistory.value.push(response.nextPage)
+    await maybeBackfillToTarget(baseline)
     return response
   } catch (error) {
     console.error('Error loading page:', error)
@@ -196,14 +279,14 @@ async function loadPage(page) {
 }
 
 async function loadNext() {
-  if (isLoading.value) return // Prevent concurrent loading
-
+  if (isLoading.value) return
   isLoading.value = true
-
   try {
+    const baseline = (masonry.value as any[]).length
     const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
     const response = await getContent(currentPage)
     paginationHistory.value.push(response.nextPage)
+    await maybeBackfillToTarget(baseline)
     return response
   } catch (error) {
     console.error('Error loading next page:', error)
@@ -213,24 +296,90 @@ async function loadNext() {
   }
 }
 
-function onRemove(item) {
-  refreshLayout(masonry.value.filter(i => i.id !== item.id))
+async function remove(item: any) {
+  const next = (masonry.value as any[]).filter(i => i.id !== item.id)
+  masonry.value = next
+  await nextTick()
+  // Force a reflow so current transforms are committed
+  void container.value?.offsetHeight
+  // Start FLIP on next frame (single RAF)
+  requestAnimationFrame(() => {
+    refreshLayout(next)
+  })
 }
 
-function removeMany(items) {
+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))
-  refreshLayout(next)
+  const next = (masonry.value as any[]).filter(i => !ids.has(i.id))
+  masonry.value = next
+  await nextTick()
+  // Force a reflow so survivors' current transforms are committed
+  void container.value?.offsetHeight
+  // Start FLIP on next frame (single RAF)
+  requestAnimationFrame(() => {
+    refreshLayout(next)
+  })
 }
 
 function onResize() {
-  columns.value = getColumnCount(layout.value)
-  refreshLayout(masonry.value)
+  columns.value = getColumnCount(layout.value as any)
+  refreshLayout(masonry.value as any)
+}
+
+let backfillActive = false
+
+async function maybeBackfillToTarget(baselineCount: number) {
+  if (!props.backfillEnabled) return
+  if (backfillActive) return
+
+  const targetCount = (baselineCount || 0) + (props.pageSize || 0)
+  if (!props.pageSize || props.pageSize <= 0) return
+
+  const lastNext = paginationHistory.value[paginationHistory.value.length - 1]
+  if (lastNext == null) return
+
+  if ((masonry.value as any[]).length >= targetCount) return
+
+  backfillActive = true
+  try {
+    let calls = 0
+    emits('backfill:start', {target: targetCount, fetched: (masonry.value as any[]).length, calls})
+
+    while (
+      (masonry.value as any[]).length < targetCount &&
+      calls < props.backfillMaxCalls &&
+      paginationHistory.value[paginationHistory.value.length - 1] != null
+    ) {
+      await waitWithProgress(props.backfillDelayMs, (remaining, total) => {
+        emits('backfill:tick', {
+          fetched: (masonry.value as any[]).length,
+          target: targetCount,
+          calls,
+          remainingMs: remaining,
+          totalMs: total
+        })
+      })
+
+      const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
+      try {
+        isLoading.value = true
+        const response = await getContent(currentPage)
+        paginationHistory.value.push(response.nextPage)
+      } finally {
+        isLoading.value = false
+      }
+
+      calls++
+    }
+
+    emits('backfill:stop', {fetched: (masonry.value as any[]).length, calls})
+  } finally {
+    backfillActive = false
+  }
 }
 
 function reset() {
-  // Scroll back to top first (while items still exist to scroll through)
   if (container.value) {
     container.value.scrollTo({
       top: 0,
@@ -238,23 +387,16 @@ function reset() {
     })
   }
 
-  // Clear all items
   masonry.value = []
-
-  // Reset container height
   containerHeight.value = 0
-
-  // Reset pagination history to initial state
   paginationHistory.value = [props.loadAtPage]
 
-  // Reset scroll progress
   scrollProgress.value = {
     distanceToTrigger: 0,
     isNearTrigger: false
   }
 }
 
-// Create debounced functions with stable references
 const debouncedScrollHandler = debounce(() => {
   handleScroll()
   updateScrollProgress()
@@ -262,28 +404,28 @@ const debouncedScrollHandler = debounce(() => {
 
 const debouncedResizeHandler = debounce(onResize, 200)
 
+function init(items: any[], page: any, next: any) {
+  paginationHistory.value = [page]
+  paginationHistory.value.push(next)
+  refreshLayout([...(masonry.value as any[]), ...items])
+  updateScrollProgress()
+}
+
 onMounted(async () => {
   try {
-    columns.value = getColumnCount(layout.value)
+    columns.value = getColumnCount(layout.value as any)
 
-    // For cursor-based pagination, loadAtPage can be null for the first request
-    const initialPage = props.loadAtPage
+    const initialPage = props.loadAtPage as any
     paginationHistory.value = [initialPage]
 
-    // Skip initial load if skipInitialLoad prop is true
     if (!props.skipInitialLoad) {
-      await loadPage(paginationHistory.value[0]) // loadPage manages its own loading state
-    } else {
-      await nextTick()
-      // Just refresh the layout with any existing items
-      refreshLayout(masonry.value)
+      await loadPage(paginationHistory.value[0] as any)
     }
 
     updateScrollProgress()
 
   } catch (error) {
     console.error('Error during component initialization:', error)
-    // Ensure loading state is reset if error occurs during initialization
     isLoading.value = false
   }
 
@@ -298,18 +440,19 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="overflow-auto w-full flex-1 masonry-container" ref="container"
->    <div class="relative" :style="{height: `${containerHeight}px`, '--masonry-duration': `${transitionDurationMs}ms`, '--masonry-ease': transitionEasing}">
+  <div class="overflow-auto w-full flex-1 masonry-container" :class="{ 'force-motion': props.forceMotion }" ref="container">
+    <div class="relative"
+         :style="{height: `${containerHeight}px`, '--masonry-duration': `${transitionDurationMs}ms`, '--masonry-leave-duration': `${leaveDurationMs}ms`, '--masonry-ease': transitionEasing}">
       <transition-group name="masonry" :css="false" @enter="onEnter" @before-enter="onBeforeEnter"
                         @leave="onLeave"
                         @before-leave="onBeforeLeave">
         <div v-for="(item, i) in masonry" :key="`${item.page}-${item.id}`"
              class="absolute masonry-item"
              v-bind="getItemAttributes(item, i)">
-          <slot name="item" v-bind="{item, onRemove}">
+          <slot name="item" v-bind="{item, remove}">
             <img :src="item.src" class="w-full"/>
             <button class="absolute bottom-0 right-0 bg-red-500 text-white p-2 rounded cursor-pointer"
-                    @click="onRemove(item)">
+                    @click="remove(item)">
               <i class="fas fa-trash"></i>
             </button>
           </slot>
@@ -329,21 +472,26 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* Prevent browser scroll anchoring from adjusting scroll on content changes */
 .masonry-container {
   overflow-anchor: none;
 }
 
-/* Items animate transform only for smooth, compositor-driven motion */
 .masonry-item {
   will-change: transform, opacity;
-  transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22,.61,.36,1)),
-              opacity 200ms linear;
+  contain: layout paint;
+  transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),
+  opacity var(--masonry-leave-duration, 160ms) ease-out var(--masonry-opacity-delay, 0ms);
   backface-visibility: hidden;
 }
 
-/* TransitionGroup move-class for FLIP reordering */
 .masonry-move {
-  transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22,.61,.36,1));
+  transition: transform var(--masonry-duration, 450ms) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .masonry-container:not(.force-motion) .masonry-item,
+  .masonry-container:not(.force-motion) .masonry-move {
+    transition-duration: 1ms !important;
+  }
 }
 </style>

package/src/archive/InfiniteMansonry.spec.ts

@@ -0,0 +1,10 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect } from 'vitest'
+
+describe('Example Test', () => {
+  it('should pass a basic truthiness check', () => {
+    expect(true).toBe(true)
+  })
+})