@wyxos/vibe 1.6.1 → 1.6.3

package/README.md

@@ -1,26 +1,27 @@
-# 🔷 VIBE — Vue Infinite Block Engine
+# VIBE — Vue Infinite Block Engine
 
 [![npm](https://img.shields.io/npm/v/@wyxos/vibe?color=%2300c58e&label=npm)](https://www.npmjs.com/package/@wyxos/vibe)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Demo](https://img.shields.io/badge/Demo-Live%20Preview-blue?logo=githubpages)](https://wyxos.github.io/vibe/)
 
-A responsive, dynamic, infinite-scroll masonry layout engine for Vue 3.  
-Built for performance, flexibility, and pixel-perfect layout control.
+A high-performance, responsive masonry layout engine for Vue 3 with built-in infinite scrolling and virtualization.
+
+VIBE (Vue Infinite Block Engine) is designed for applications that need to display large datasets in a masonry grid without compromising performance. Unlike other masonry libraries, VIBE leverages virtualization to render only what is visible on the screen, ensuring smooth scrolling even with thousands of items.
 
 ---
 
-## ✅ Features
+## Features
 
-- Responsive masonry layout that adapts to screen size
-- Automatically loads more items as you scroll
-- Supports removing and reflowing items with animation
-- Keeps scroll position stable after layout updates
-- Fully customizable item rendering
-- Optimized for large datasets
+- **High Performance Virtualization**: Efficiently renders thousands of items by only mounting elements currently in the viewport.
+- **Responsive Masonry Layout**: Automatically adjusts column counts and layout based on screen width and breakpoints.
+- **Infinite Scrolling**: Seamlessly loads more content as the user scrolls, with built-in support for async data fetching.
+- **Dynamic Updates**: Supports adding, removing, and reflowing items with smooth FLIP animations.
+- **Scroll Position Maintenance**: Keeps the user's scroll position stable when new items are loaded or the layout changes.
+- **Customizable Rendering**: Full control over item markup via scoped slots.
 
 ---
 
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @wyxos/vibe
@@ -28,16 +29,21 @@ npm install @wyxos/vibe
 
 ---
 
-## 🚀 Usage
+## Usage
 
 ```vue
 <script setup>
   import { ref } from 'vue'
-  import { Masonry } from '@wyxos/vibe' // named export
-  // or if globally registered via `app.use()`, you can skip this import
+  import { Masonry } from '@wyxos/vibe'
 
   const items = ref([])
 
+  const layout = {
+    gutterX: 12,
+    gutterY: 12,
+    sizes: { base: 1, sm: 2, md: 3, lg: 4 }
+  }
+
   async function getNextPage(page) {
     const response = await fetch(`/api/items?page=${page}`)
     const data = await response.json()
@@ -49,16 +55,14 @@ npm install @wyxos/vibe
 </script>
 
 <template>
-  <WyxosMasonry
+  <Masonry
       v-model:items="items"
       :get-next-page="getNextPage"
-      :gutter-x="12"
-      :gutter-y="12"
-      :sizes="{ base: 1, sm: 2, md: 3, lg: 4 }"
+      :layout="layout"
   >
     <template #item="{ item, onRemove }">
       <div class="relative">
-        <img :src="item.src" class="w-full" />
+        <img :src="item.src" class="w-full" alt="Masonry item" />
         <button
             class="absolute bottom-2 right-2 bg-red-600 text-white text-xs p-1 rounded"
             @click="onRemove(item)"
@@ -67,46 +71,51 @@ npm install @wyxos/vibe
         </button>
       </div>
     </template>
-  </WyxosMasonry>
+  </Masonry>
 </template>
 ```
 
 ---
 
-## ⚙️ Props
+## Props
 
-| Prop         | Type     | Required | Description                                                                 |
-|--------------|----------|----------|-----------------------------------------------------------------------------|
-| `items`      | `Array`  | ✅        | Two-way bound item array (each item must include `width`, `height`, `id`) |
-| `getNextPage`| `Function(page: Number)` | ✅ | Async function to load the next page — returns `{ items, nextPage }`       |
-| `loadAtPage` | `Number` | ❌        | Starting page number (default: `1`)                                        |
-| `sizes`      | `Object` | ❌        | Mobile-first column config (default: Tailwind-style breakpoints)          |
-| `gutterX`    | `Number` | ❌        | Horizontal gutter between items (default: `10`)                            |
-| `gutterY`    | `Number` | ❌        | Vertical gutter between items (default: `10`)                              |
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `items` | `Array` | Yes | Two-way bound item array. Each item must include `width`, `height`, and `id`. |
+| `getNextPage` | `Function(page: Number)` | Yes | Async function to load the next page. Must return `{ items, nextPage }`. |
+| `layout` | `Object` | No | Configuration object for layout, including sizes and gutters. |
+| `loadAtPage` | `Number` | No | The starting page number (default: `1`). |
+
+### Layout Configuration Example
 
-### `sizes` example:
 ```js
 {
-  base: 1,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 5,
-  '2xl': 6
+  gutterX: 10,
+  gutterY: 10,
+  sizes: {
+    base: 1,
+    sm: 2,
+    md: 3,
+    lg: 4,
+    xl: 5,
+    '2xl': 6
+  }
 }
 ```
 
 ---
 
-## 💡 Slots
+## Slots
 
-| Slot Name | Props                          | Description                       |
-|-----------|--------------------------------|-----------------------------------|
-| `item`    | `{ item, onRemove }`           | Custom rendering for each block   |
+| Slot Name | Props | Description |
+|-----------|-------|-------------|
+| `item` | `{ item, onRemove }` | Scoped slot for custom rendering of each masonry block. |
 
 ---
 
-## 🧪 Run Locally
+## Run Locally
+
+To run the demo project locally:
 
 ```bash
 git clone https://github.com/wyxos/vibe
@@ -115,16 +124,16 @@ npm install
 npm run dev
 ```
 
-Visit [`http://localhost:5173`](http://localhost:5173)
+Visit `http://localhost:5173` to view the demo.
 
 ---
 
-## 🌐 Live Demo
+## Live Demo
 
-👉 [View Demo on GitHub Pages](https://wyxos.github.io/vibe/)
+[View Live Demo on GitHub Pages](https://wyxos.github.io/vibe/)
 
 ---
 
-## 📄 License
+## License
 
 MIT © [@wyxos](https://github.com/wyxos)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -12,6 +12,9 @@
     "./vibe.css": "./lib/vibe.css",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "vibe": "./toggle-link.mjs"
+  },
   "type": "module",
   "files": [
     "lib",

package/toggle-link.mjs

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve, dirname, relative } from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Get the vibe package directory
+const vibeDir = resolve(__dirname);
+const vibePackageJson = JSON.parse(readFileSync(resolve(vibeDir, 'package.json'), 'utf-8'));
+const vibeVersion = vibePackageJson.version;
+
+// Get the current working directory (where the script is run from)
+const cwd = process.cwd();
+const targetPackageJsonPath = resolve(cwd, 'package.json');
+
+try {
+    const targetPackageJson = JSON.parse(readFileSync(targetPackageJsonPath, 'utf-8'));
+
+    // Check if @wyxos/vibe exists in dependencies or devDependencies
+    const deps = { ...targetPackageJson.dependencies, ...targetPackageJson.devDependencies };
+    const currentVibeRef = deps['@wyxos/vibe'];
+
+    if (!currentVibeRef) {
+        console.error('❌ @wyxos/vibe not found in package.json dependencies or devDependencies');
+        process.exit(1);
+    }
+
+    // Determine if it's a local path or version reference
+    const isLocalPath = currentVibeRef.startsWith('file:') || currentVibeRef.startsWith('../') || currentVibeRef.startsWith('./');
+
+    let newRef;
+    let action;
+
+    if (isLocalPath) {
+        // Switch to published version
+        newRef = `^${vibeVersion}`;
+        action = 'published version';
+    } else {
+        // Switch to local path
+        // Calculate relative path from target to vibe
+        const relativePath = relative(cwd, vibeDir).replace(/\\/g, '/');
+        newRef = `file:${relativePath}`;
+        action = 'local path';
+    }
+
+    // Update package.json
+    if (targetPackageJson.dependencies && targetPackageJson.dependencies['@wyxos/vibe']) {
+        targetPackageJson.dependencies['@wyxos/vibe'] = newRef;
+    }
+    if (targetPackageJson.devDependencies && targetPackageJson.devDependencies['@wyxos/vibe']) {
+        targetPackageJson.devDependencies['@wyxos/vibe'] = newRef;
+    }
+
+    // Write updated package.json
+    writeFileSync(
+        targetPackageJsonPath,
+        JSON.stringify(targetPackageJson, null, 2) + '\n',
+        'utf-8'
+    );
+
+    console.log(`✅ Switched @wyxos/vibe to ${action}: ${newRef}`);
+
+    // If switching to local path, ensure the library is built before installation
+    if (action === 'local path') {
+        try {
+            console.log('🔧 Building local @wyxos/vibe (build:lib)...');
+            execSync('npm run build:lib', { cwd: vibeDir, stdio: 'inherit' });
+        } catch (e) {
+            console.warn('⚠️ Failed to build local @wyxos/vibe. Attempting install anyway.');
+        }
+    }
+
+    // Run npm install
+    console.log('📦 Running npm install...');
+    execSync('npm install', { cwd, stdio: 'inherit' });
+
+    console.log('✨ Done!');
+
+} catch (error) {
+    if (error.code === 'ENOENT') {
+        console.error(`❌ package.json not found in ${cwd}`);
+        console.error('   Make sure you run this script from a project directory that uses @wyxos/vibe');
+    } else {
+        console.error('❌ Error:', error.message);
+    }
+    process.exit(1);
+}
+