@wyxos/vibe 1.6.6 → 1.6.8

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.6",
+  "version": "1.6.8",
   "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>