@wyxos/vibe 1.6.3 → 1.6.4

package/lib/vibe.css

@@ -1 +1 @@
-.masonry-container[data-v-fa62094f]{overflow-anchor:none}.masonry-item[data-v-fa62094f]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-fa62094f]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-fa62094f],.masonry-container:not(.force-motion) .masonry-move[data-v-fa62094f]{transition-duration:1ms!important}}
+.masonry-container[data-v-08b0e6d9]{overflow-anchor:none}.masonry-item[data-v-08b0e6d9]{will-change:transform,opacity;contain:layout paint;transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1)),opacity var(--masonry-leave-duration, .16s) ease-out var(--masonry-opacity-delay, 0ms);backface-visibility:hidden}.masonry-move[data-v-08b0e6d9]{transition:transform var(--masonry-duration, .45s) var(--masonry-ease, cubic-bezier(.22, .61, .36, 1))}@media (prefers-reduced-motion: reduce){.masonry-container:not(.force-motion) .masonry-item[data-v-08b0e6d9],.masonry-container:not(.force-motion) .masonry-move[data-v-08b0e6d9]{transition-duration:1ms!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Masonry from "./Masonry.vue";
-import { ref } from "vue";
+import { ref, reactive, computed } from "vue";
 import fixture from "./pages.json";
 import type { MasonryItem, GetPageResult } from "./types";
 
@@ -8,7 +8,26 @@ const items = ref<MasonryItem[]>([]);
 
 const masonry = ref<InstanceType<typeof Masonry> | null>(null);
 
-const layout = { sizes: { base: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 10 }, header: 40, footer: 40 };
+const layoutParams = reactive({
+  sizes: {
+    base: 1,
+    sm: 2,
+    md: 3,
+    lg: 4,
+    xl: 5,
+    '2xl': 10
+  },
+  header: 0,
+  footer: 0
+});
+
+const layout = computed(() => ({
+  sizes: { ...layoutParams.sizes },
+  header: layoutParams.header,
+  footer: layoutParams.footer
+}));
+
+const showLayoutControls = ref(false);
 
 const getPage = async (page: number): Promise<GetPageResult> => {
   return new Promise((resolve) => {
@@ -36,28 +55,110 @@ const getPage = async (page: number): Promise<GetPageResult> => {
 };
 </script>
 <template>
-  <main class="flex flex-col items-center p-4 bg-slate-100 h-screen overflow-hidden">
-    <header class="sticky top-0 z-10 bg-slate-100 w-full p-4 flex flex-col items-center gap-4">
-      <h1 class="text-2xl font-semibold mb-4">VIBE</h1>
-      <p>Vue Infinite Block Engine</p>
-
-      <p class="text-sm text-gray-500 text-center mb-4">
-        🚀 Built by <a href="https://wyxos.com" target="_blank" class="underline hover:text-black">wyxos.com</a> •
-        💾 <a href="https://github.com/wyxos/vibe" target="_blank" class="underline hover:text-black">Source on GitHub</a>
-      </p>
-
-      <div v-if="masonry" class="flex gap-4">
-        <p>Loading: <span class="bg-blue-500 text-white p-2 rounded">{{ masonry.isLoading }}</span></p>
-        <p>Showing: <span class="bg-blue-500 text-white p-2 rounded">{{ items.length }}</span></p>
+  <main class="flex flex-col h-screen overflow-hidden bg-slate-50 relative">
+    <!-- Floating Header -->
+    <header class="fixed top-4 left-0 right-0 z-20 w-full max-w-4xl mx-auto px-4 pointer-events-none">
+      <div class="bg-white/80 backdrop-blur-md border border-white/20 shadow-lg rounded-2xl p-4 flex items-center justify-between transition-all duration-300 hover:shadow-xl pointer-events-auto">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-inner">
+            <i class="fas fa-layer-group text-white text-lg"></i>
+          </div>
+          <div>
+            <h1 class="text-lg font-bold text-slate-800 leading-tight">VIBE</h1>
+            <p class="text-xs text-slate-500 font-medium">Vue Infinite Block Engine</p>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <div v-if="masonry" class="hidden md:flex items-center gap-3 text-sm font-medium text-slate-600 bg-slate-100/50 px-3 py-1.5 rounded-lg border border-slate-200/50">
+            <span class="flex items-center gap-1.5">
+              <span class="w-2 h-2 rounded-full" :class="masonry.isLoading ? 'bg-amber-400 animate-pulse' : 'bg-emerald-400'"></span>
+              {{ masonry.isLoading ? 'Loading...' : 'Ready' }}
+            </span>
+            <span class="w-px h-3 bg-slate-300"></span>
+            <span>{{ items.length }} items</span>
+          </div>
+
+          <button
+            @click="showLayoutControls = !showLayoutControls"
+            class="p-2 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+            :class="{ 'text-blue-600 bg-blue-50': showLayoutControls }"
+            title="Layout Controls"
+          >
+            <i class="fas fa-sliders"></i>
+          </button>
+
+          <a href="https://github.com/wyxos/vibe" target="_blank" class="p-2 text-slate-400 hover:text-slate-800 transition-colors" title="View on GitHub">
+            <i class="fab fa-github text-xl"></i>
+          </a>
+        </div>
       </div>
+
+      <!-- Layout Controls Panel -->
+      <transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform -translate-y-2 opacity-0"
+        enter-to-class="transform translate-y-0 opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="transform translate-y-0 opacity-100"
+        leave-to-class="transform -translate-y-2 opacity-0"
+      >
+        <div v-if="showLayoutControls" class="mt-2 bg-white/90 backdrop-blur-md border border-white/20 shadow-xl rounded-xl p-6 pointer-events-auto">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Column Settings -->
+            <div>
+              <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Column Configuration</h3>
+              <div class="grid grid-cols-3 sm:grid-cols-6 gap-3">
+                <div v-for="(val, key) in layoutParams.sizes" :key="key" class="flex flex-col gap-1.5">
+                  <label class="text-[10px] font-bold text-slate-500 uppercase text-center">{{ key }}</label>
+                  <input
+                    v-model.number="layoutParams.sizes[key]"
+                    type="number"
+                    min="1"
+                    class="w-full px-2 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-center text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
+                  />
+                </div>
+              </div>
+            </div>
+            
+            <!-- Spacing Settings -->
+            <div>
+              <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Spacing</h3>
+              <div class="grid grid-cols-2 gap-4">
+                <div class="flex flex-col gap-1.5">
+                  <label class="text-[10px] font-bold text-slate-500 uppercase">Header Offset</label>
+                  <div class="relative">
+                    <input
+                      v-model.number="layoutParams.header"
+                      type="number"
+                      min="0"
+                      class="w-full pl-3 pr-8 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
+                    />
+                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">px</span>
+                  </div>
+                </div>
+                <div class="flex flex-col gap-1.5">
+                  <label class="text-[10px] font-bold text-slate-500 uppercase">Footer Offset</label>
+                  <div class="relative">
+                    <input
+                      v-model.number="layoutParams.footer"
+                      type="number"
+                      min="0"
+                      class="w-full pl-3 pr-8 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
+                    />
+                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">px</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
     </header>
-    <masonry class="bg-blue-500 " v-model:items="items" :get-next-page="getPage" :load-at-page="1" :layout="layout" ref="masonry">
-      <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="remove(item)">
-          <i class="fas fa-trash"></i>
-        </button>
-      </template>
-    </masonry>
+
+    <!-- Main Content -->
+    <div class="flex flex-1 overflow-hidden relative pt-24">
+      <masonry v-model:items="items" :get-next-page="getPage" :load-at-page="1" :layout="layout" ref="masonry"></masonry>
+    </div>
   </main>
 </template>

package/src/Masonry.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import calculateLayout from "./calculateLayout";
 import { debounce } from 'lodash-es'
 import {
@@ -10,6 +10,7 @@ import {
 } from './masonryUtils'
 import { useMasonryTransitions } from './useMasonryTransitions'
 import { useMasonryScroll } from './useMasonryScroll'
+import MasonryItem from './components/MasonryItem.vue'
 
 const props = defineProps({
   getNextPage: {
@@ -697,6 +698,18 @@ function init(items: any[], page: any, next: any) {
   updateScrollProgress()
 }
 
+// Watch for layout changes and update columns + refresh layout dynamically
+watch(
+  layout,
+  () => {
+    if (container.value) {
+      columns.value = getColumnCount(layout.value as any)
+      refreshLayout(masonry.value as any)
+    }
+  },
+  { deep: true }
+)
+
 onMounted(async () => {
   try {
     columns.value = getColumnCount(layout.value as any)
@@ -738,13 +751,10 @@ onUnmounted(() => {
                         @before-leave="beforeLeave">
         <div v-for="(item, i) in visibleMasonry" :key="`${item.page}-${item.id}`"
              class="absolute masonry-item"
-             v-bind="getItemAttributes(item, i)">
+             v-bind="getItemAttributes(item, i)"
+             :style="{ paddingTop: `${layout.header}px`, paddingBottom: `${layout.footer}px` }">
           <slot name="item" v-bind="{item, remove}">
-            <img :src="item.src" class="w-full" loading="lazy" decoding="async"/>
-            <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>
+            <MasonryItem :item="item" :remove="remove" />
           </slot>
         </div>
       </transition-group>

package/src/components/MasonryItem.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps<{
+  item: any;
+  remove?: (item: any) => void;
+}>();
+
+const imageLoaded = ref(false);
+const imageError = ref(false);
+const imageSrc = ref<string | null>(null);
+
+function preloadImage(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (!src) {
+      reject(new Error('No image source provided'));
+      return;
+    }
+
+    const img = new Image();
+    const startTime = Date.now();
+    const minLoadTime = 300; // Minimum time to show spinner (300ms)
+    
+    img.onload = () => {
+      const elapsed = Date.now() - startTime;
+      const remaining = Math.max(0, minLoadTime - elapsed);
+      
+      // Ensure spinner shows for at least minLoadTime
+      setTimeout(() => {
+        imageLoaded.value = true;
+        imageError.value = false;
+        resolve();
+      }, remaining);
+    };
+    img.onerror = () => {
+      imageError.value = true;
+      imageLoaded.value = false;
+      reject(new Error('Failed to load image'));
+    };
+    img.src = src;
+  });
+}
+
+onMounted(async () => {
+  // Debug: verify component is mounting
+  console.log('[MasonryItem] Component mounted', props.item?.id);
+  
+  const src = props.item?.src;
+  if (src) {
+    imageSrc.value = src;
+    // Reset state to ensure spinner shows
+    imageLoaded.value = false;
+    imageError.value = false;
+    try {
+      await preloadImage(src);
+    } catch {
+      // Error handled by imageError state
+    }
+  }
+});
+
+watch(
+  () => props.item?.src,
+  async (newSrc) => {
+    if (newSrc && newSrc !== imageSrc.value) {
+      imageLoaded.value = false;
+      imageError.value = false;
+      imageSrc.value = newSrc;
+      try {
+        await preloadImage(newSrc);
+      } catch {
+        // Error handled by imageError state
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="relative w-full h-full group">
+    <!-- Custom slot content (replaces default if provided) -->
+    <slot :item="item" :remove="remove" :imageLoaded="imageLoaded" :imageError="imageError">
+      <!-- Default content when no slot is provided -->
+      <div class="w-full h-full rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 bg-white relative">
+        <!-- Spinner while loading -->
+        <div
+          v-if="!imageLoaded && !imageError"
+          class="absolute inset-0 flex items-center justify-center bg-slate-100"
+        >
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+        </div>
+
+        <!-- Error state -->
+        <div
+          v-if="imageError"
+          class="absolute inset-0 flex flex-col items-center justify-center bg-slate-50 text-slate-400 text-sm p-4 text-center"
+        >
+          <i class="fas fa-image text-2xl mb-2 opacity-50"></i>
+          <span>Failed to load image</span>
+        </div>
+
+        <!-- Image (only shown when loaded) -->
+        <img
+          v-if="imageLoaded && imageSrc"
+          :src="imageSrc"
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading="lazy"
+          decoding="async"
+        />
+
+        <!-- Overlay Gradient -->
+        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+        <!-- Remove button -->
+        <button
+          v-if="remove"
+          class="absolute top-2 right-2 w-8 h-8 flex items-center justify-center bg-white/90 backdrop-blur-sm text-slate-700 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 hover:bg-red-500 hover:text-white cursor-pointer"
+          @click.stop="remove(item)"
+          aria-label="Remove item"
+        >
+          <i class="fas fa-times text-sm"></i>
+        </button>
+        
+        <!-- Item Info (Optional, visible on hover) -->
+        <div class="absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 delay-75">
+          <p class="text-white text-xs font-medium truncate drop-shadow-md">Item #{{ String(item.id).split('-')[0] }}</p>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+

package/src/style.css

@@ -1,2 +1,32 @@
 @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;
+}