@wyxos/vibe 1.6.5 → 1.6.7

package/lib/logo-dark.svg

@@ -0,0 +1,36 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="vibeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="vibeGradLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#22d3ee;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="120" height="120" rx="24" fill="url(#vibeGrad)"/>
+  
+  <!-- Masonry blocks - representing the infinite block engine -->
+  <!-- Left column -->
+  <rect x="18" y="20" width="24" height="32" rx="5" fill="white" opacity="0.95"/>
+  <rect x="18" y="58" width="24" height="20" rx="5" fill="white" opacity="0.85"/>
+  <rect x="18" y="84" width="24" height="16" rx="5" fill="white" opacity="0.9"/>
+  
+  <!-- Middle column -->
+  <rect x="48" y="28" width="24" height="22" rx="5" fill="white" opacity="0.9"/>
+  <rect x="48" y="56" width="24" height="36" rx="5" fill="white" opacity="0.95"/>
+  <rect x="48" y="98" width="24" height="14" rx="5" fill="white" opacity="0.8"/>
+  
+  <!-- Right column -->
+  <rect x="78" y="22" width="24" height="38" rx="5" fill="white" opacity="0.85"/>
+  <rect x="78" y="66" width="24" height="24" rx="5" fill="white" opacity="0.9"/>
+  <rect x="78" y="96" width="24" height="16" rx="5" fill="white" opacity="0.85"/>
+  
+  <!-- Infinite loop symbol (subtle overlay) -->
+  <path d="M 30 60 Q 40 50, 50 60 Q 60 70, 70 60" stroke="url(#vibeGradLight)" stroke-width="3" fill="none" opacity="0.4" stroke-linecap="round"/>
+  <path d="M 30 60 Q 40 70, 50 60 Q 60 50, 70 60" stroke="url(#vibeGradLight)" stroke-width="3" fill="none" opacity="0.4" stroke-linecap="round"/>
+</svg>
+

package/lib/logo-light.svg

@@ -0,0 +1,29 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="vibeGradLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Masonry blocks - representing the infinite block engine -->
+  <!-- Left column -->
+  <rect x="18" y="20" width="24" height="32" rx="5" fill="url(#vibeGradLight)" opacity="0.95"/>
+  <rect x="18" y="58" width="24" height="20" rx="5" fill="url(#vibeGradLight)" opacity="0.85"/>
+  <rect x="18" y="84" width="24" height="16" rx="5" fill="url(#vibeGradLight)" opacity="0.9"/>
+  
+  <!-- Middle column -->
+  <rect x="48" y="28" width="24" height="22" rx="5" fill="url(#vibeGradLight)" opacity="0.9"/>
+  <rect x="48" y="56" width="24" height="36" rx="5" fill="url(#vibeGradLight)" opacity="0.95"/>
+  <rect x="48" y="98" width="24" height="14" rx="5" fill="url(#vibeGradLight)" opacity="0.8"/>
+  
+  <!-- Right column -->
+  <rect x="78" y="22" width="24" height="38" rx="5" fill="url(#vibeGradLight)" opacity="0.85"/>
+  <rect x="78" y="66" width="24" height="24" rx="5" fill="url(#vibeGradLight)" opacity="0.9"/>
+  <rect x="78" y="96" width="24" height="16" rx="5" fill="url(#vibeGradLight)" opacity="0.85"/>
+  
+  <!-- Infinite loop symbol (subtle overlay) -->
+  <path d="M 30 60 Q 40 50, 50 60 Q 60 70, 70 60" stroke="url(#vibeGradLight)" stroke-width="3" fill="none" opacity="0.6" stroke-linecap="round"/>
+  <path d="M 30 60 Q 40 70, 50 60 Q 60 50, 70 60" stroke="url(#vibeGradLight)" stroke-width="3" fill="none" opacity="0.6" stroke-linecap="round"/>
+</svg>
+

package/lib/logo.svg

@@ -0,0 +1,32 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle -->
+  <circle cx="60" cy="60" r="58" fill="url(#grad1)" opacity="0.1"/>
+  
+  <!-- Masonry blocks representing infinite layout -->
+  <!-- Column 1 -->
+  <rect x="20" y="15" width="22" height="28" rx="4" fill="url(#grad1)" opacity="0.9"/>
+  <rect x="20" y="48" width="22" height="18" rx="4" fill="url(#grad1)" opacity="0.7"/>
+  <rect x="20" y="71" width="22" height="34" rx="4" fill="url(#grad1)" opacity="0.8"/>
+  
+  <!-- Column 2 -->
+  <rect x="49" y="25" width="22" height="20" rx="4" fill="url(#grad1)" opacity="0.8"/>
+  <rect x="49" y="50" width="22" height="32" rx="4" fill="url(#grad1)" opacity="0.9"/>
+  <rect x="49" y="87" width="22" height="18" rx="4" fill="url(#grad1)" opacity="0.6"/>
+  
+  <!-- Column 3 -->
+  <rect x="78" y="18" width="22" height="35" rx="4" fill="url(#grad1)" opacity="0.7"/>
+  <rect x="78" y="58" width="22" height="22" rx="4" fill="url(#grad1)" opacity="0.9"/>
+  <rect x="78" y="85" width="22" height="20" rx="4" fill="url(#grad1)" opacity="0.8"/>
+  
+  <!-- Infinite symbol overlay (subtle) -->
+  <path d="M 35 60 Q 45 50, 55 60 Q 65 70, 75 60" stroke="url(#grad1)" stroke-width="2.5" fill="none" opacity="0.6" stroke-linecap="round"/>
+  <path d="M 35 60 Q 45 70, 55 60 Q 65 50, 75 60" stroke="url(#grad1)" stroke-width="2.5" fill="none" opacity="0.6" stroke-linecap="round"/>
+</svg>
+

package/lib/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "VIBE - Vue Infinite Block Engine",
+  "short_name": "VIBE",
+  "description": "A high-performance, responsive masonry layout engine for Vue 3",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f8fafc",
+  "theme_color": "#3b82f6",
+  "icons": [
+    {
+      "src": "favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ]
+}

package/lib/vibe.css

@@ -1 +1 @@
-.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}}
+.masonry-container[data-v-110c3294]{overflow-anchor:none}.masonry-item[data-v-110c3294]{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-110c3294]{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-110c3294],.masonry-container:not(.force-motion) .masonry-move[data-v-110c3294]{transition-duration:1ms!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -38,12 +38,14 @@
   "dependencies": {
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-router": "^4.6.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/vite": "^4.0.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.5.2",
@@ -52,6 +54,7 @@
     "chalk": "^5.3.0",
     "inquirer": "^10.1.8",
     "jsdom": "^26.0.0",
+    "sharp": "^0.34.5",
     "simple-git": "^3.27.0",
     "tailwindcss": "^4.0.15",
     "typescript": "^5.9.2",

package/src/App.vue

@@ -1,164 +1,35 @@
-<script setup lang="ts">
-import Masonry from "./Masonry.vue";
-import { ref, reactive, computed } from "vue";
-import fixture from "./pages.json";
-import type { MasonryItem, GetPageResult } from "./types";
-
-const items = ref<MasonryItem[]>([]);
-
-const masonry = ref<InstanceType<typeof Masonry> | null>(null);
-
-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) => {
-    setTimeout(() => {
-      // Check if the page exists in the fixture
-      const pageData = (fixture as any[])[page - 1] as { items: MasonryItem[] } | undefined;
-
-      if (!pageData) {
-        // Return empty items if page doesn't exist
-        resolve({
-          items: [],
-          nextPage: null // null indicates no more pages
-        });
-        return;
-      }
-
-      const output: GetPageResult = {
-        items: pageData.items,
-        nextPage: page < (fixture as any[]).length ? page + 1 : null
-      };
-
-      resolve(output);
-    }, 1000);
-  });
-};
-</script>
 <template>
-  <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 id="app">
+    <nav class="fixed top-0 left-0 right-0 z-30 bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm">
+      <div class="max-w-7xl mx-auto px-4 py-3">
+        <div class="flex items-center justify-between">
+          <router-link to="/" class="flex items-center gap-2 text-lg font-bold text-slate-800 hover:text-blue-600 transition-colors">
+            <img src="/logo-light.svg" alt="VIBE" class="w-8 h-8" />
+            <span>VIBE</span>
+          </router-link>
+          <div class="flex items-center gap-4">
+            <router-link 
+              to="/" 
+              class="text-sm text-slate-600 hover:text-slate-800 transition-colors"
+              active-class="text-blue-600 font-medium"
+            >
+              Demo
+            </router-link>
+            <router-link 
+              to="/examples" 
+              class="text-sm text-slate-600 hover:text-slate-800 transition-colors"
+              active-class="text-blue-600 font-medium"
+            >
+              Examples
+            </router-link>
           </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>
-
-    <!-- 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>
+    </nav>
+    <router-view />
+  </div>
 </template>
+
+<script setup lang="ts">
+// Root App component with router
+</script>

package/src/Masonry.vue

@@ -96,7 +96,7 @@ const props = defineProps({
   autoRefreshOnEmpty: {
     type: Boolean,
     default: false
-  }
+  },
 })
 
 const defaultLayout = {
@@ -753,7 +753,8 @@ onUnmounted(() => {
              class="absolute masonry-item"
              v-bind="getItemAttributes(item, i)"
              :style="{ paddingTop: `${layout.header}px`, paddingBottom: `${layout.footer}px` }">
-          <slot name="item" v-bind="{item, remove}">
+          <!-- Use default slot if provided, otherwise use MasonryItem -->
+          <slot :item="item" :remove="remove">
             <MasonryItem :item="item" :remove="remove" />
           </slot>
         </div>

package/src/components/MasonryItem.vue

@@ -1,14 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, computed, withDefaults } from 'vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   item: any;
   remove?: (item: any) => void;
-}>();
+  type?: 'image' | 'video';
+  notFound?: boolean;
+}>(), {
+  // Auto-read from item if not explicitly provided
+  type: undefined,
+  notFound: undefined
+});
 
 const imageLoaded = ref(false);
 const imageError = ref(false);
 const imageSrc = ref<string | null>(null);
+const videoLoaded = ref(false);
+const videoError = ref(false);
+const videoSrc = ref<string | null>(null);
+// Auto-read from props or item object, default to 'image'
+const mediaType = computed(() => props.type ?? props.item?.type ?? 'image');
+const showNotFound = computed(() => props.notFound ?? props.item?.notFound ?? false);
 
 function preloadImage(src: string): Promise<void> {
   return new Promise((resolve, reject) => {
@@ -41,14 +53,64 @@ function preloadImage(src: string): Promise<void> {
   });
 }
 
+function preloadVideo(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (!src) {
+      reject(new Error('No video source provided'));
+      return;
+    }
+
+    const video = document.createElement('video');
+    const startTime = Date.now();
+    const minLoadTime = 300;
+    
+    video.preload = 'metadata';
+    video.muted = true; // Muted for autoplay compatibility
+    
+    video.onloadedmetadata = () => {
+      const elapsed = Date.now() - startTime;
+      const remaining = Math.max(0, minLoadTime - elapsed);
+      
+      setTimeout(() => {
+        videoLoaded.value = true;
+        videoError.value = false;
+        resolve();
+      }, remaining);
+    };
+    
+    video.onerror = () => {
+      videoError.value = true;
+      videoLoaded.value = false;
+      reject(new Error('Failed to load video'));
+    };
+    
+    video.src = src;
+  });
+}
+
 onMounted(async () => {
   // Debug: verify component is mounting
   console.log('[MasonryItem] Component mounted', props.item?.id);
   
+  // If notFound is true, skip preloading
+  if (showNotFound.value) {
+    return;
+  }
+  
   const src = props.item?.src;
-  if (src) {
+  if (!src) return;
+  
+  if (mediaType.value === 'video') {
+    videoSrc.value = src;
+    videoLoaded.value = false;
+    videoError.value = false;
+    try {
+      await preloadVideo(src);
+    } catch {
+      // Error handled by videoError state
+    }
+  } else {
     imageSrc.value = src;
-    // Reset state to ensure spinner shows
     imageLoaded.value = false;
     imageError.value = false;
     try {
@@ -62,29 +124,56 @@ onMounted(async () => {
 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
+    if (!newSrc || showNotFound.value) return;
+    
+    if (mediaType.value === 'video') {
+      if (newSrc !== videoSrc.value) {
+        videoLoaded.value = false;
+        videoError.value = false;
+        videoSrc.value = newSrc;
+        try {
+          await preloadVideo(newSrc);
+        } catch {
+          // Error handled by videoError state
+        }
+      }
+    } else {
+      if (newSrc !== imageSrc.value) {
+        imageLoaded.value = false;
+        imageError.value = false;
+        imageSrc.value = newSrc;
+        try {
+          await preloadImage(newSrc);
+        } catch {
+          // Error handled by imageError state
+        }
       }
     }
   }
 );
+
+// mediaType and showNotFound are now computed, so they automatically react to changes
 </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">
+    <slot :item="item" :remove="remove" :imageLoaded="imageLoaded" :imageError="imageError" :videoLoaded="videoLoaded" :videoError="videoError" :showNotFound="showNotFound">
       <!-- 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">
+        <!-- Not Found state -->
+        <div
+          v-if="showNotFound"
+          class="absolute inset-0 flex flex-col items-center justify-center bg-slate-100 text-slate-400 text-sm p-4 text-center"
+        >
+          <i class="fas fa-search text-3xl mb-3 opacity-50"></i>
+          <span class="font-medium">Not Found</span>
+          <span class="text-xs mt-1 opacity-75">This item could not be located</span>
+        </div>
+
         <!-- Spinner while loading -->
         <div
-          v-if="!imageLoaded && !imageError"
+          v-else-if="(mediaType === 'image' && !imageLoaded && !imageError) || (mediaType === 'video' && !videoLoaded && !videoError)"
           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>
@@ -92,24 +181,37 @@ watch(
 
         <!-- Error state -->
         <div
-          v-if="imageError"
+          v-else-if="(mediaType === 'image' && imageError) || (mediaType === 'video' && videoError)"
           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>
+          <i :class="mediaType === 'video' ? 'fas fa-video text-2xl mb-2 opacity-50' : 'fas fa-image text-2xl mb-2 opacity-50'"></i>
+          <span>Failed to load {{ mediaType }}</span>
         </div>
 
         <!-- Image (only shown when loaded) -->
         <img
-          v-if="imageLoaded && imageSrc"
+          v-if="mediaType === 'image' && imageLoaded && imageSrc && !showNotFound"
           :src="imageSrc"
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
           loading="lazy"
           decoding="async"
         />
 
+        <!-- Video (only shown when loaded) -->
+        <video
+          v-if="mediaType === 'video' && videoLoaded && videoSrc && !showNotFound"
+          :src="videoSrc"
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          muted
+          loop
+          playsinline
+          @mouseenter="(e) => (e.target as HTMLVideoElement).play()"
+          @mouseleave="(e) => (e.target as HTMLVideoElement).pause()"
+          @error="videoError = true"
+        />
+
         <!-- 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>
+        <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 pointer-events-none"></div>
 
         <!-- Remove button -->
         <button
@@ -122,7 +224,7 @@ watch(
         </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">
+        <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 pointer-events-none">
           <p class="text-white text-xs font-medium truncate drop-shadow-md">Item #{{ String(item.id).split('-')[0] }}</p>
         </div>
       </div>

package/src/main.ts

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