atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/assets/js/demos/list-demo.js

@@ -3,6 +3,14 @@
 // Showcases ui-list + ui-list-item + ui-list-group features
 // ============================================================
 
+function updateListActiveBtn(demoName) {
+  const section = document.getElementById('list');
+  if (!section) return;
+  section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+    btn.selected = btn.getAttribute('data-demo') === demoName;
+  });
+}
+
 export function initListDemo() {
   const section = document.getElementById('list');
   if (!section) return;
@@ -17,21 +25,21 @@ export function initListDemo() {
     </p>
 
     <div class="demo-controls" style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;">
-      <ui-button onclick="window.showListBasic()" style="padding:8px 16px;background:#10b981;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📄 Basic</ui-button>
-      <ui-button onclick="window.showListVariants()" style="padding:8px 16px;background:#10b981;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🎨 Variants</ui-button>
-      <ui-button onclick="window.showListIcons()" style="padding:8px 16px;background:#f59e0b;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🏷️ Icons & Badges</ui-button>
-      <ui-button onclick="window.showListCollapsible()" style="padding:8px 16px;background:#8b5cf6;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📂 Collapsible</ui-button>
-      <ui-button onclick="window.showListSearch()" style="padding:8px 16px;background:#ec4899;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🔍 Search</ui-button>
-      <ui-button onclick="window.showListGrouped()" style="padding:8px 16px;background:#14b8a6;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📁 Grouped</ui-button>
-      <ui-button onclick="window.showListDraggable()" style="padding:8px 16px;background:#f97316;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">↕️ Draggable</ui-button>
-      <ui-button onclick="window.showListPaginated()" style="padding:8px 16px;background:#ef4444;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📑 Paginated</ui-button>
-      <ui-button onclick="window.showListInteractions()" style="padding:8px 16px;background:#9333ea;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">✨ Interactions</ui-button>
-      <ui-button onclick="window.showListMasterpiece()" style="padding:8px 16px;background:linear-gradient(45deg, #f43f5e, #fbbf24);color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">💎 Masterpiece</ui-button>
-      <ui-button onclick="window.showListGrid()" style="padding:8px 16px;background:#0ea5e9;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🔲 Grid</ui-button>
-      <ui-button onclick="window.showListTree()" style="padding:8px 16px;background:#64748b;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🌲 Tree</ui-button>
-      <ui-button onclick="window.showListVirtual()" style="padding:8px 16px;background:#6366f1;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">⚡ Virtual</ui-button>
-      <ui-button onclick="window.showListLarge()" style="padding:8px 16px;background:#44403c;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">📦 100+ Items</ui-button>
-      <ui-button onclick="window.showListApex()" style="padding:8px 16px;background:linear-gradient(135deg, #6366f1, #a855f7);color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;" variant="outline">🚀 Apex Masterclass</ui-button>
+      <ui-button onclick="window.showListBasic()" data-demo="basic" variant="outline">📄 Basic</ui-button>
+      <ui-button onclick="window.showListVariants()" data-demo="variants" variant="outline">🎨 Variants</ui-button>
+      <ui-button onclick="window.showListIcons()" data-demo="icons" variant="outline">🏷️ Icons & Badges</ui-button>
+      <ui-button onclick="window.showListCollapsible()" data-demo="collapsible" variant="outline">📂 Collapsible</ui-button>
+      <ui-button onclick="window.showListSearch()" data-demo="search" variant="outline">🔍 Search</ui-button>
+      <ui-button onclick="window.showListGrouped()" data-demo="grouped" variant="outline">📁 Grouped</ui-button>
+      <ui-button onclick="window.showListDraggable()" data-demo="draggable" variant="outline">↕️ Draggable</ui-button>
+      <ui-button onclick="window.showListPaginated()" data-demo="paginated" variant="outline">📑 Paginated</ui-button>
+      <ui-button onclick="window.showListInteractions()" data-demo="interactions" variant="outline">✨ Interactions</ui-button>
+      <ui-button onclick="window.showListMasterpiece()" data-demo="masterpiece" variant="outline">💎 Masterpiece</ui-button>
+      <ui-button onclick="window.showListGrid()" data-demo="grid" variant="outline">🔲 Grid</ui-button>
+      <ui-button onclick="window.showListTree()" data-demo="tree" variant="outline">🌲 Tree</ui-button>
+      <ui-button onclick="window.showListVirtual()" data-demo="virtual" variant="outline">⚡ Virtual</ui-button>
+      <ui-button onclick="window.showListLarge()" data-demo="large" variant="outline">📦 100+ Items</ui-button>
+      <ui-button onclick="window.showListApex()" data-demo="apex" variant="outline">🚀 Apex Masterclass</ui-button>
     </div>
 
     <div id="listDemoContainer" style="margin-top:8px;"></div>
@@ -44,6 +52,7 @@ export function initListDemo() {
 // 1. Basic List
 // ─────────────────────────────────────────────
 window.showListBasic = function () {
+  updateListActiveBtn('basic');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -146,6 +155,7 @@ window.showListBasic = function () {
 // 2. Variants
 // ─────────────────────────────────────────────
 window.showListVariants = function () {
+  updateListActiveBtn('variants');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -214,6 +224,7 @@ window.showListVariants = function () {
 // 3. Icons, Badges, Sub-labels, Counters, Pills, Tags
 // ─────────────────────────────────────────────
 window.showListIcons = function () {
+  updateListActiveBtn('icons');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -223,11 +234,11 @@ window.showListIcons = function () {
       <div class="demo-block" style="background:white;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
         <h3 style="margin-top:0;font-size:15px;">Icons + Badges + Counters</h3>
         <ui-list dividers>
-          <ui-list-item label="Inbox"      icon="fas fa-inbox"  value="inbox"   badge="12" badge-color="primary"  counter="12"></ui-list-item>
+          <ui-list-item label="Inbox"      icon="fas fa-inbox"  value="inbox"   badge="12" badge-color="primary"  counter="12" counter-color="info"></ui-list-item>
           <ui-list-item label="Promotions" icon="fas fa-tag"    value="promo"   badge="New" badge-color="success"></ui-list-item>
-          <ui-list-item label="Updates"    icon="fas fa-refresh" value="updates" counter="3"></ui-list-item>
+          <ui-list-item label="Updates"    icon="fas fa-refresh" value="updates" counter="3" counter-color="warning"></ui-list-item>
           <ui-list-item label="Forums"     icon="fas fa-comments" value="forums"></ui-list-item>
-          <ui-list-item label="Spam"       icon="fas fa-ban"    value="spam"    badge="99+" badge-color="danger" counter="99"></ui-list-item>
+          <ui-list-item label="Spam"       icon="fas fa-ban"    value="spam"    badge="99+" badge-color="danger" counter="99" counter-color="secondary"></ui-list-item>
         </ui-list>
       </div>
 
@@ -333,6 +344,7 @@ window.showListIcons = function () {
 // 4. Collapsible Items
 // ─────────────────────────────────────────────
 window.showListCollapsible = function () {
+  updateListActiveBtn('collapsible');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -402,6 +414,7 @@ window.showListCollapsible = function () {
 // 5. Search
 // ─────────────────────────────────────────────
 window.showListSearch = function () {
+  updateListActiveBtn('search');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -459,6 +472,7 @@ window.showListSearch = function () {
 // 6. Grouped
 // ─────────────────────────────────────────────
 window.showListGrouped = function () {
+  updateListActiveBtn('grouped');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -508,6 +522,7 @@ window.showListGrouped = function () {
 // 7. Drag-and-Drop Reorder
 // ─────────────────────────────────────────────
 window.showListDraggable = function () {
+  updateListActiveBtn('draggable');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -566,6 +581,7 @@ window.showListDraggable = function () {
 // 8. Paginated
 // ─────────────────────────────────────────────
 window.showListPaginated = function () {
+  updateListActiveBtn('paginated');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -634,6 +650,7 @@ window.showListPaginated = function () {
 // 9. Virtual Scroll
 // ─────────────────────────────────────────────
 window.showListVirtual = function () {
+  updateListActiveBtn('virtual');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -682,6 +699,7 @@ window.showListVirtual = function () {
 // 9. Interactions & Custom Colors
 // ─────────────────────────────────────────────
 window.showListInteractions = function () {
+  updateListActiveBtn('interactions');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -811,6 +829,7 @@ window.showListInteractions = function () {
 // 10. The God-Tier Masterpiece
 // ─────────────────────────────────────────────
 window.showListMasterpiece = function () {
+  updateListActiveBtn('masterpiece');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -965,6 +984,7 @@ window.showListMasterpiece = function () {
 // 11. Responsive Grid Mode
 // ─────────────────────────────────────────────
 window.showListGrid = function () {
+  updateListActiveBtn('grid');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -1021,6 +1041,7 @@ window.showListGrid = function () {
 // 12. Tree View with Branch Lines
 // ─────────────────────────────────────────────
 window.showListTree = function () {
+  updateListActiveBtn('tree');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -1052,6 +1073,7 @@ window.showListTree = function () {
 // 13. Large List (100+ items)
 // ─────────────────────────────────────────────
 window.showListLarge = function () {
+  updateListActiveBtn('large');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 
@@ -1232,6 +1254,7 @@ window.showListAdvanced = function () {
 // 10. Apex List Masterclass
 // ─────────────────────────────────────────────
 window.showListApex = function () {
+  updateListActiveBtn('apex');
   const c = document.getElementById('listDemoContainer');
   if (!c) return;
 

package/dist/collection/assets/js/demos/masonry-demo.js

@@ -0,0 +1,164 @@
+// Masonry Layout Demo
+export function initMasonryDemo() {
+  const section = document.getElementById('masonry');
+  if (!section) return;
+
+  section.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
+      <h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
+        <ui-icon name="layout-grid" library="lucide" size="24px"></ui-icon> Masonry Grid Layout
+      </h2>
+      <div style="display: flex; gap: 10px;">
+        <ui-button onclick="showBasicMasonry()"
+          style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px;">
+          <ui-icon name="rotate-ccw" library="lucide" size="14px"></ui-icon> Reset View
+        </ui-button>
+        <ui-button onclick="showSection('home')"
+          style="background-color: #6b7280; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px;">
+          <ui-icon name="arrow-left" library="lucide" size="12px"></ui-icon> Back to Home
+        </ui-button>
+      </div>
+    </div>
+    <p>A responsive masonry-style grid layout with filtering, custom search, and dynamic card selection overlays.</p>
+
+    <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
+      <ui-button onclick="showBasicMasonry()" variant="outline"><ui-icon name="image" library="lucide" size="16px"></ui-icon> Basic Grid</ui-button>
+      <ui-button onclick="showFilteredMasonry()" variant="outline"><ui-icon name="filter" library="lucide" size="16px"></ui-icon> Categorized & Searchable</ui-button>
+      <ui-button onclick="showSelectableMasonry()" variant="outline"><ui-icon name="check-square" library="lucide" size="16px"></ui-icon> Selection & Batch Actions</ui-button>
+    </div>
+
+    <div id="masonryDemoContainer" style="margin-top: 20px;"></div>
+  `;
+
+  setTimeout(() => {
+    showBasicMasonry();
+  }, 100);
+}
+
+// Basic Masonry Demo
+window.showBasicMasonry = function () {
+  const container = document.getElementById('masonryDemoContainer');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
+        <span style="font-size: 24px;">🖼️</span>
+        Fluid Masonry Gallery
+      </h3>
+      <p style="color: #6b7280;">Smooth cascading multi-column layout with fluid heights and instant image loading.</p>
+      
+      <div style="margin-top: 30px;">
+        <ui-masonry id="basicMasonry" columns="3" gap="20" layout-type="masonry"></ui-masonry>
+      </div>
+    </div>
+  `;
+
+  setTimeout(() => {
+    const masonry = document.getElementById('basicMasonry');
+    if (masonry) {
+      const items = [
+        { id: 1, title: 'Mountain Wilderness', category: 'nature', image: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&auto=format&fit=crop' },
+        { id: 2, title: 'Downtown Rush', category: 'urban', image: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&auto=format&fit=crop' },
+        { id: 3, title: 'Misty Evergreen Forest', category: 'nature', image: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=600&auto=format&fit=crop' },
+        { id: 4, title: 'Cyberpunk Streets', category: 'urban', image: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=600&auto=format&fit=crop' },
+        { id: 5, title: 'Sleepy Red Fox', category: 'animals', image: 'https://images.unsplash.com/photo-1474511320723-9a56873867b5?w=600&auto=format&fit=crop' },
+        { id: 6, title: 'Playful Kitten', category: 'animals', image: 'https://images.unsplash.com/photo-1533738363-b7f9aef128ce?w=600&auto=format&fit=crop' }
+      ];
+      masonry.items = JSON.stringify(items);
+    }
+  }, 200);
+};
+
+// Filtered & Searchable Masonry Demo
+window.showFilteredMasonry = function () {
+  const container = document.getElementById('masonryDemoContainer');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
+        <ui-icon name="filter" library="lucide" size="24px"></ui-icon>
+        Categorized & Searchable Grid
+      </h3>
+      <p style="color: #6b7280;">Filter items dynamically by category tabs or run real-time search queries across fields.</p>
+      
+      <div style="margin-top: 30px;">
+        <ui-masonry id="filteredMasonry" columns="3" gap="16" show-filters="true" layout-type="masonry"></ui-masonry>
+      </div>
+    </div>
+  `;
+
+  setTimeout(() => {
+    const masonry = document.getElementById('filteredMasonry');
+    if (masonry) {
+      const filterOptions = [
+        { key: 'all', label: '🌟 All' },
+        { key: 'nature', label: '🌲 Nature' },
+        { key: 'urban', label: '🏙️ Urban' },
+        { key: 'animals', label: '🦊 Animals' }
+      ];
+      const items = [
+        { id: 1, title: 'Mountain Wilderness', category: 'nature', image: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&auto=format&fit=crop' },
+        { id: 2, title: 'Downtown Rush', category: 'urban', image: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&auto=format&fit=crop' },
+        { id: 3, title: 'Misty Evergreen Forest', category: 'nature', image: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=600&auto=format&fit=crop' },
+        { id: 4, title: 'Cyberpunk Streets', category: 'urban', image: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=600&auto=format&fit=crop' },
+        { id: 5, title: 'Sleepy Red Fox', category: 'animals', image: 'https://images.unsplash.com/photo-1474511320723-9a56873867b5?w=600&auto=format&fit=crop' },
+        { id: 6, title: 'Playful Kitten', category: 'animals', image: 'https://images.unsplash.com/photo-1533738363-b7f9aef128ce?w=600&auto=format&fit=crop' }
+      ];
+      masonry.filterOptions = JSON.stringify(filterOptions);
+      masonry.items = JSON.stringify(items);
+    }
+  }, 200);
+};
+
+// Selection & Batch Actions Masonry Demo
+window.showSelectableMasonry = function () {
+  const container = document.getElementById('masonryDemoContainer');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
+        <div>
+          <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
+            <ui-icon name="check-square" library="lucide" size="24px"></ui-icon>
+            Interactive Selection & Batch Control
+          </h3>
+          <p style="color: #6b7280; margin: 0;">Check checkboxes on hover, select all using hotkeys, or use batch deletions.</p>
+        </div>
+        <div id="selectionStatusBadge" style="background: #10b98115; border: 1px solid #10b98144; padding: 6px 12px; border-radius: 20px; font-size: 13px; color: #059669; font-weight: 600;">
+          0 items selected
+        </div>
+      </div>
+      
+      <div style="margin-top: 30px;">
+        <ui-masonry id="selectableMasonry" columns="3" gap="16" selectable="true" show-batch-actions="true" layout-type="masonry"></ui-masonry>
+      </div>
+    </div>
+  `;
+
+  setTimeout(() => {
+    const masonry = document.getElementById('selectableMasonry');
+    const badge = document.getElementById('selectionStatusBadge');
+    if (masonry) {
+      const items = [
+        { id: 1, title: 'Mountain Wilderness', category: 'nature', image: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&auto=format&fit=crop' },
+        { id: 2, title: 'Downtown Rush', category: 'urban', image: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&auto=format&fit=crop' },
+        { id: 3, title: 'Misty Evergreen Forest', category: 'nature', image: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=600&auto=format&fit=crop' },
+        { id: 4, title: 'Cyberpunk Streets', category: 'urban', image: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=600&auto=format&fit=crop' }
+      ];
+      masonry.items = JSON.stringify(items);
+
+      masonry.addEventListener('itemSelectionChange', (e) => {
+        const count = e.detail?.selectedItems?.length || 0;
+        badge.innerText = `${count} ${count === 1 ? 'item' : 'items'} selected`;
+      });
+
+      masonry.addEventListener('batchDelete', (e) => {
+        alert(`Deleted items: ${e.detail.items.map(i => i.title).join(', ')}`);
+        badge.innerText = '0 items selected';
+      });
+    }
+  }, 200);
+};