@wyxos/vibe 1.6.12 → 1.6.13

package/lib/vibe.css

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

package/package.json

@@ -1,67 +1,93 @@
-{
-  "name": "@wyxos/vibe",
-  "version": "1.6.12",
-  "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"
-  },
-  "bin": {
-    "vibe": "./toggle-link.mjs"
-  },
-  "type": "module",
-  "files": [
-    "lib",
-    "src"
-  ],
-  "sideEffects": [
-    "./lib/vibe.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "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",
-    "type-check": "vue-tsc --noEmit",
-    "prepublishOnly": "npm run build:lib"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "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",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/test-utils": "^2.4.6",
-    "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",
-    "uuid": "^11.1.0",
-    "vite": "^6.2.0",
-    "vite-plugin-vue-mcp": "^0.3.2",
-    "vitest": "^3.0.9",
-    "vue-tsc": "^3.1.0"
-  }
-}
+{
+  "name": "@wyxos/vibe",
+  "version": "1.6.13",
+  "description": "A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "masonry",
+    "grid",
+    "layout",
+    "infinite-scroll",
+    "virtualization",
+    "responsive",
+    "performance",
+    "swipe",
+    "feed",
+    "mobile"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wyxos/vibe.git"
+  },
+  "homepage": "https://wyxos.github.io/vibe/",
+  "bugs": {
+    "url": "https://github.com/wyxos/vibe/issues"
+  },
+  "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"
+  },
+  "bin": {
+    "vibe": "./toggle-link.mjs"
+  },
+  "type": "module",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "sideEffects": [
+    "./lib/vibe.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "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",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@types/highlight.js": "^9.12.4",
+    "highlight.js": "^11.11.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "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",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "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",
+    "uuid": "^11.1.0",
+    "vite": "^6.2.0",
+    "vite-plugin-vue-mcp": "^0.3.2",
+    "vitest": "^3.0.9",
+    "vue-tsc": "^3.1.0"
+  }
+}

package/src/Masonry.vue

@@ -1137,20 +1137,9 @@ onUnmounted(() => {
         </div>
       </div>
       
-      <!-- Swipe indicator dots -->
-      <div v-if="masonry.length > 1" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10 pointer-events-none">
-        <div 
-          v-for="(item, index) in masonry.slice(0, Math.min(10, masonry.length))" 
-          :key="`dot-${item.id}`"
-          class="w-1.5 h-1.5 rounded-full transition-all duration-300"
-          :class="index === currentSwipeIndex ? 'bg-white w-4' : 'bg-white/40'"
-        />
-      </div>
 
-      <!-- Item Counter -->
-      <div class="fixed top-20 right-4 bg-black/50 backdrop-blur-sm text-white text-xs font-medium px-3 py-1.5 rounded-full z-20 pointer-events-none">
-        {{ currentSwipeIndex + 1 }} / {{ masonry.length }}
-      </div>
+
+
     </div>
 
     <!-- Masonry Grid Mode (Desktop) -->
@@ -1174,14 +1163,7 @@ onUnmounted(() => {
           </div>
         </transition-group>
 
-        <!-- Scroll Progress Badge -->
-        <div v-if="containerHeight > 0"
-             class="fixed bottom-4 right-4 bg-gray-800 text-white text-xs rounded-full px-3 py-1.5 shadow-lg z-10 transition-opacity duration-300"
-             :class="{'opacity-50 hover:opacity-100': !scrollProgress.isNearTrigger, 'opacity-100': scrollProgress.isNearTrigger}">
-          <span>{{ masonry.length }} items</span>
-          <span class="mx-2">|</span>
-          <span>{{ scrollProgress.distanceToTrigger }}px to load</span>
-        </div>
+
       </div>
     </div>
   </div>

package/src/components/CodeTabs.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="bg-slate-900 rounded-lg overflow-hidden shadow-xl">
+    <!-- Tabs -->
+    <div class="flex items-center gap-1 bg-slate-800/50 px-4 py-2 border-b border-slate-700">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        @click="activeTab = tab"
+        class="px-4 py-2 text-sm font-medium rounded-md transition-colors"
+        :class="activeTab === tab 
+          ? 'bg-slate-700 text-white' 
+          : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'"
+      >
+        {{ tab.toUpperCase() }}
+      </button>
+      <div class="flex-1"></div>
+      <button
+        @click="copyCode"
+        class="px-3 py-1.5 text-xs font-medium text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors flex items-center gap-2"
+        :title="copied ? 'Copied!' : 'Copy code'"
+      >
+        <i :class="copied ? 'fas fa-check' : 'fas fa-copy'"></i>
+        <span>{{ copied ? 'Copied' : 'Copy' }}</span>
+      </button>
+    </div>
+
+    <!-- Code Content -->
+    <div class="relative">
+      <pre class="p-4 overflow-x-auto text-sm"><code :class="`language-${activeTab} hljs`" v-html="highlightedCode"></code></pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import hljs from 'highlight.js/lib/core'
+import javascript from 'highlight.js/lib/languages/javascript'
+import xml from 'highlight.js/lib/languages/xml'
+import css from 'highlight.js/lib/languages/css'
+import 'highlight.js/styles/tokyo-night-dark.css'
+
+// Register languages
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('vue', xml) // Vue uses XML/HTML highlighting
+hljs.registerLanguage('css', css)
+
+const props = defineProps<{
+  html?: string
+  js?: string
+  vue?: string
+  css?: string
+}>()
+
+const activeTab = ref<'html' | 'js' | 'vue' | 'css'>('vue')
+const copied = ref(false)
+
+const tabs = computed(() => {
+  const available: ('html' | 'js' | 'vue' | 'css')[] = []
+  if (props.html) available.push('html')
+  if (props.js) available.push('js')
+  if (props.vue) available.push('vue')
+  if (props.css) available.push('css')
+  return available
+})
+
+const currentCode = computed(() => {
+  switch (activeTab.value) {
+    case 'html': return props.html || ''
+    case 'js': return props.js || ''
+    case 'vue': return props.vue || ''
+    case 'css': return props.css || ''
+  }
+})
+
+const highlightedCode = computed(() => {
+  if (!currentCode.value) return ''
+  
+  try {
+    // Map tab names to highlight.js language names
+    const langMap: Record<string, string> = {
+      'vue': 'xml',
+      'html': 'xml',
+      'js': 'javascript',
+      'css': 'css'
+    }
+    
+    const lang = langMap[activeTab.value] || activeTab.value
+    const result = hljs.highlight(currentCode.value, { language: lang })
+    return result.value
+  } catch (error) {
+    console.error('Highlighting error:', error)
+    return escapeHtml(currentCode.value)
+  }
+})
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(currentCode.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
+// Set initial tab to first available
+watch(() => tabs.value, (newTabs) => {
+  if (newTabs.length > 0 && !newTabs.includes(activeTab.value)) {
+    activeTab.value = newTabs[0]
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+code {
+  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+  line-height: 1.6;
+}
+
+pre {
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+pre code {
+  display: block;
+}
+
+pre::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+pre::-webkit-scrollbar-track {
+  background: #1e293b;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background: #475569;
+  border-radius: 4px;
+}
+
+pre::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+</style>

package/src/components/examples/BasicExample.vue

@@ -0,0 +1,45 @@
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getPage"
+    :load-at-page="1"
+    :layout="layout"
+  />
+</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
+}
+
+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/CustomItemExample.vue

@@ -0,0 +1,86 @@
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getPage"
+    :load-at-page="1"
+    :layout="layout"
+  >
+    <template #item="{ item, remove }">
+      <div class="custom-card">
+        <img v-if="item.src" :src="item.src" :alt="item.title || 'Item'" />
+        <div class="overlay">
+          <h3 class="text-white font-semibold text-sm mb-2">{{ item.title || 'Untitled' }}</h3>
+          <button 
+            @click="remove" 
+            class="px-3 py-1 bg-white/20 hover:bg-white/30 border border-white/30 rounded text-white text-xs transition-colors"
+          >
+            Remove
+          </button>
+        </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
+}
+
+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>
+
+<style scoped>
+.custom-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.custom-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-card .overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+  padding: 16px;
+}
+</style>
+

package/src/components/examples/SwipeModeExample.vue

@@ -0,0 +1,39 @@
+<template>
+  <Masonry
+    v-model:items="items"
+    :get-next-page="getPage"
+    :load-at-page="1"
+    layout-mode="swipe"
+  />
+</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>
+