atomicuilibrary 0.0.1

package/dist/cjs/utils-DVZ6gul6.js

@@ -0,0 +1,26 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+/**
+ * Converts a hex color to RGB string
+ * @param hex Hex color string
+ * @returns RGB string e.g. "255, 255, 255"
+ */
+function hexToRgb(hex) {
+    if (!hex)
+        return '0, 0, 0';
+    let cleanHex = hex.replace('#', '');
+    if (cleanHex.length === 3) {
+        cleanHex = cleanHex.split('').map(char => char + char).join('');
+    }
+    const bigInt = parseInt(cleanHex, 16);
+    const r = (bigInt >> 16) & 255;
+    const g = (bigInt >> 8) & 255;
+    const b = bigInt & 255;
+    return `${r}, ${g}, ${b}`;
+}
+
+exports.format = format;
+exports.hexToRgb = hexToRgb;

package/dist/collection/assets/js/component-config.js

@@ -0,0 +1,41 @@
+// Component configuration
+export const COMPONENTS = [
+  { id: 'home', label: '🏠 Home', icon: '🏠' },
+  { id: 'accordion', label: '📑 Accordion', icon: '📑' },
+  { id: 'divider', label: '➖ Divider', icon: '➖' },
+  { id: 'tabs', label: '📑 Tabs', icon: '📑' },
+  { id: 'nav-bar', label: '🧭 Navigation Bar', icon: '🧭' },
+  { id: 'aside-panel', label: '📱 Aside Panel', icon: '📱' },
+  { id: 'dialog', label: '💬 Dialog Box', icon: '💬' },
+  { id: 'drag-drop', label: '↕️ Drag Drop', icon: '↕️' },
+  { id: 'context-menu', label: '📋 Context Menu', icon: '📋' },
+ // { id: 'smart-menu', label: '🧠 Smart Menu', icon: '🧠' },
+  { id: 'snackbar', label: '🍞 Snackbar', icon: '🍞' },
+  { id: 'stepper', label: '📍 Stepper', icon: '📍' },
+ // { id: 'picklist', label: '📋 Picklist', icon: '📋' },
+  { id: 'card', label: '🃏 Card', icon: '🃏' },
+  { id: 'panel', label: '📋 Panel', icon: '📋' },
+  { id: 'callout-banner', label: '📣 Callout Banner', icon: '📣' },
+  { id: 'avatar', label: '👤 Avatar', icon: '👤' },
+ // { id: 'chip', label: '🏷️ Chip', icon: '🏷️' },
+  { id: 'badge', label: '🔔 Badge', icon: '🔔' },
+  { id: 'tag', label: '🏷 Tag', icon: '🏷' },
+ // { id: 'pill', label: '💊 Pill', icon: '💊' },
+  { id: 'meter-group', label: '📊 Meter', icon: '📊' },
+  { id: 'scroll-top', label: '⬆️ Scroll Top', icon: '⬆️' },
+  { id: 'rating', label: '⭐ Rating', icon: '⭐' },
+  { id: 'speed-dial', label: '⚡ Speed Dial', icon: '⚡' },
+ // { id: 'cascade-select', label: '🔽 Cascade Select', icon: '🔽' },
+  { id: 'range-slider', label: '🎚️ Range Slider', icon: '🎚️' },
+  { id: 'transfer-list', label: '⇄ Transfer List', icon: '⇄' },
+  { id: 'tree', label: '🌳 Tree', icon: '🌳' },
+
+  { id: 'multi-level-context-menu', label: '🔄 Multi-Level Menu', icon: '🔄' },
+  { id: 'advanced-data-table', label: '📊 Advanced Table', icon: '📊' },
+  { id: 'pagination', label: '📄 Pagination', icon: '📄' },
+  { id: 'skeleton', label: '💀 Skeleton', icon: '💀' },
+  { id: 'theme-selector', label: '🎨 Theme Selector', icon: '🎨' },
+  { id: 'layout-manager', label: '🏗️ Layout Manager', icon: '🏗️' },
+  { id: 'animate-on-scroll', label: '✨ Animate on Scroll', icon: '✨' },
+  { id: 'list', label: '📋 List', icon: '📋' },
+];

package/dist/collection/assets/js/demo-loader.js

@@ -0,0 +1,147 @@
+// Demo Loader - Dynamically loads component demos
+const demoModules = {
+  'accordion': () => import('/app-ui/build/assets/js/demos/accordion-demo.js'),
+  'nav-bar': () => import('/app-ui/build/assets/js/demos/nav-bar-demo.js'),
+  'aside-panel': () => import('/app-ui/build/assets/js/demos/aside-panel-demo.js'),
+  'tabs': () => import('/app-ui/build/assets/js/demos/tabs-demo.js'),
+  'dialog': () => import('/app-ui/build/assets/js/demos/dialog-demo.js?v=20'),
+  'drag-drop': () => import('/app-ui/build/assets/js/demos/drag-drop-demo.js'),
+  'fab': () => import('/app-ui/build/assets/js/demos/fab-demo.js'),
+  'snackbar': () => import('/app-ui/build/assets/js/demos/snackbar-demo.js'),
+  'divider': () => import('/app-ui/build/assets/js/demos/divider-demo.js'),
+  'Divider': () => import('/app-ui/build/assets/js/demos/divider-demo.js'),
+  'stepper': () => import('/app-ui/build/assets/js/demos/stepper-demo.js'),
+  'dock-host': () => import('/app-ui/build/assets/js/demos/dock-host-init.js'),
+
+  'card': () => import('/app-ui/build/assets/js/demos/card-demo.js'),
+  'carousel': () => import('/app-ui/build/assets/js/demos/carousel-demo.js'),
+  'callout-banner': () => import('/app-ui/build/assets/js/demos/callout-banner-demo.js'),
+
+  'panel': () => import('/app-ui/build/assets/js/demos/panel-demo.js'),
+  'avatar': () => import('/app-ui/build/assets/js/demos/avatar-demo.js'),
+  'avatar-group': () => import('/app-ui/build/assets/js/demos/avatar-demo.js'),
+  'chip': () => import('/app-ui/build/assets/js/demos/chip-demo.js'),
+  'badge': () => import('/app-ui/build/assets/js/demos/badge-demo.js'),
+  'tag': () => import('/app-ui/build/assets/js/demos/tag-demo.js'),
+  'pill': () => import('/app-ui/build/assets/js/demos/pill-demo.js'),
+  'meter-group': () => import('/app-ui/build/assets/js/demos/meter-group-demo.js'),
+  'scroll-top': () => import('/app-ui/build/assets/js/demos/scroll-top-demo.js'),
+  'rating': () => import('/app-ui/build/assets/js/demos/rating-demo.js'),
+  'speed-dial': () => import('/app-ui/build/assets/js/demos/speed-dial-demo.js'),
+  'context-menu': () => import('/app-ui/build/assets/js/demos/context-menu-demo.js'),
+  'smart-menu': () => import('/app-ui/build/assets/js/demos/smart-menu-demo.js'),
+  'smart-stepper': () => import('/app-ui/build/assets/js/demos/smart-stepper-demo.js'),
+  'advanced-data-table': () => import('/app-ui/build/assets/js/demos/advanced-data-table-demo.js'),
+  'cascade-select': () => import('/app-ui/build/assets/js/demos/cascade-select-demo.js'),
+  'range-slider': () => import('/app-ui/build/assets/js/demos/range-slider-demo.js'),
+  'transfer-list': () => import('/app-ui/build/assets/js/demos/transfer-list-demo.js?v=2'),
+  'tree': () => import('/app-ui/build/assets/js/demos/tree-demo.js'),
+  'tree-list': () => import('/app-ui/build/assets/js/demos/tree-demo.js'),
+  'pagination': () => import('/app-ui/build/assets/js/demos/pagination-demo.js'),
+  'skeleton': () => import('/app-ui/build/assets/js/demos/skeleton-demo.js'),
+  'timeline': () => import('/app-ui/build/assets/js/demos/timeline-demo.js'),
+  'top-bar': () => import('/app-ui/build/assets/js/demos/top-bar-demo.js'),
+  'progress': () => import('/app-ui/build/assets/js/demos/progress-demo.js'),
+  'dock': () => import('/app-ui/build/assets/js/demos/dock-demo.js'),
+  'dropdown': () => import('/app-ui/build/assets/js/demos/dropdown-demo.js'),
+  'smart-location-dropdown': () => import('/app-ui/build/assets/js/demos/smart-location-dropdown-demo.js'),
+  'popover': () => import('/app-ui/build/assets/js/demos/popover-demo.js'),
+  'speedometer': () => import('/app-ui/build/assets/js/demos/speedometer-demo.js'),
+  'anchor': () => import('/app-ui/build/assets/js/demos/anchor-demo.js'),
+  'theme-selector': () => import('/app-ui/build/assets/js/demos/theme-selector-demo.js'),
+  'breadcrumb': () => import('/app-ui/build/assets/js/demos/breadcrumb-demo.js'),
+  'horizontal-nav': () => import('/app-ui/build/assets/js/demos/horizontal-nav-demo.js'),
+  'knob': () => import('/app-ui/build/assets/js/demos/knob-demo.js'),
+  'chart': () => import('/app-ui/build/assets/js/demos/chart-demo.js'),
+  'layout-manager': () => import('/app-ui/build/assets/js/demos/layout-manager-demo.js'),
+  'workspace-manager': () => import('/app-ui/build/assets/js/demos/workspace-manager-demo.js'),
+  'button': () => import('/app-ui/build/assets/js/demos/button-demo.js'),
+  'switch': () => import('/app-ui/build/assets/js/demos/switch-demo.js?v=30'),
+  'bar-chart': () => import('/app-ui/build/assets/js/demos/bar-chart-demo.js'),
+  'pattern-input': () => import('/app-ui/build/assets/js/demos/pattern-input-demo.js'),
+  'number-input': () => import('/app-ui/build/assets/js/demos/number-input-demo.js'),
+  'color-picker': () => import('/app-ui/build/assets/js/demos/color-picker-demo.js'),
+  'file-upload': () => import('/app-ui/build/assets/js/demos/file-upload-demo.js'),
+  'command-palette': () => import('/app-ui/build/assets/js/demos/command-palette-demo.js'),
+  'timer': () => import('/app-ui/build/assets/js/demos/timer-demo.js'),
+  'stack': () => import('/app-ui/build/assets/js/demos/stack-demo.js'),
+  'about': () => import('/app-ui/build/assets/js/demos/about-demo.js'),
+  'empty-state': () => import('/app-ui/build/assets/js/demos/empty-state-demo.js?v=3'),
+  'loader': () => import('/app-ui/build/assets/js/demos/loader-demo.js'),
+  'my-profile': () => import('/app-ui/build/assets/js/demos/my-profile-demo.js'),
+  'icon': () => import('/app-ui/build/assets/js/demos/icon-demo.js'),
+  'code-preview': () => import('/app-ui/build/assets/js/demos/code-preview-demo.js'),
+  'input': () => import('/app-ui/build/assets/js/demos/input-demo.js'),
+  'checkbox': () => import('/app-ui/build/assets/js/demos/checkbox-demo.js'),
+  'radio': () => import('/app-ui/build/assets/js/demos/radio-demo.js'),
+  'animate-on-scroll': () => import('/app-ui/build/assets/js/demos/animate-on-scroll-demo.js'),
+  'list': () => import('/app-ui/build/assets/js/demos/list-demo.js'),
+  'button-toggle': () => import('/app-ui/build/assets/js/demos/button-toggle-demo.js?v=1'),
+  'tooltip': () => import('/app-ui/build/assets/js/demos/tooltip-demo.js'),
+  'toggle-group': () => import('/app-ui/build/assets/js/demos/switch-demo.js?v=30'),
+  'button-group': () => import('/app-ui/build/assets/js/demos/button-demo.js'),
+  'smart-dialog': () => import('/app-ui/build/assets/js/demos/smart-dialog-demo.js'),
+  'home': () => import('/app-ui/build/assets/js/demos/home-demo.js'),
+  'toolbar': () => import('/app-ui/build/assets/js/demos/toolbar-demo.js'),
+  'dashboard': () => import('/app-ui/build/assets/js/demos/dashboard-demo.js'),
+  'documentation': () => import('/app-ui/build/assets/js/demos/documentation-demo.js'),
+  'overview': () => import('/app-ui/build/assets/js/demos/overview-demo.js'),
+  'complex-form': () => import('/app-ui/build/assets/js/demos/complex-form-demo.js'),
+  'dropdown-subtitle': () => import('/app-ui/build/assets/js/demos/dropdown-subtitle-demo.js'),
+};
+
+const loadedDemos = new Set();
+
+export async function loadDemo(sectionId) {
+  // Ensure sectionId is a string and handle potential Symbol issues
+  let safeSectionId;
+  try {
+    safeSectionId = String(sectionId);
+  } catch (e) {
+    console.error('loadDemo: Critical error converting sectionId to string', e);
+    return false;
+  }
+
+  // Skip if already loaded
+  if (loadedDemos.has(safeSectionId)) {
+    return true;
+  }
+
+  const loader = demoModules[safeSectionId];
+  if (!loader) {
+    console.warn('No demo loader found for category/id:', safeSectionId);
+    return false;
+  }
+
+  try {
+    const module = await loader();
+    const funcName = `init${kebabToPascal(safeSectionId)}Demo`;
+    const initFunction = module[funcName];
+
+    if (initFunction) {
+      initFunction();
+      loadedDemos.add(safeSectionId);
+      return true;
+    } else {
+      console.error('Init function', funcName, 'not found in the loaded module for:', safeSectionId);
+      return false;
+    }
+  } catch (error) {
+    console.error('Failed to load demo section:', safeSectionId, error);
+    return false;
+  }
+}
+
+// Helper to convert kebab-case to PascalCase
+function kebabToPascal(str) {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+// Preload critical demos
+export async function preloadCriticalDemos() {
+  const critical = ['accordion', 'nav-bar', 'dialog'];
+  await Promise.all(critical.map(id => loadDemo(id)));
+}

package/dist/collection/assets/js/demo-nav.js

@@ -0,0 +1,273 @@
+// Navigation and Section Management
+import { loadDemo } from './demo-loader.js?v=2';
+
+let currentSectionIndex = 0;
+const sections = [];
+
+function initNavigation() {
+  const flattenItems = items => {
+    items.forEach(item => {
+      if (item.id && item.id !== 'components' && item.id !== 'settings') {
+        sections.push(item.id);
+      }
+      if (item.children) {
+        flattenItems(item.children);
+      }
+    });
+  };
+
+  if (window.demoNavigationItemsTop || window.demoBottomItems) {
+    flattenItems(window.demoNavigationItemsTop || []);
+    flattenItems(window.demoCategories || []);
+    flattenItems(window.demoNavigationItemsSecondary || []);
+    flattenItems(window.demoBottomItems || []);
+    flattenItems(window.demoBottomItemsSecondary || []);
+  } else {
+    const buttons = document.querySelectorAll('.nav-btn');
+    buttons.forEach((btn, index) => {
+      const sectionId = btn.getAttribute('data-section');
+      if (sectionId) {
+        sections.push(sectionId);
+      }
+    });
+  }
+}
+
+// Keyboard navigation
+document.addEventListener('keydown', e => {
+  if (e.key === 'ArrowRight') {
+    navigateNext();
+  } else if (e.key === 'ArrowLeft') {
+    navigatePrev();
+  }
+});
+
+async function showSection(sectionId) {
+  // Scroll to top immediately before doing anything else
+  window.scrollTo({ top: 0, behavior: 'auto' });
+
+  const allSections = document.querySelectorAll('.demo-section');
+  const allButtons = document.querySelectorAll('.nav-btn');
+
+  // Hide all sections
+  allSections.forEach(section => {
+    section.classList.remove('section-active');
+    section.style.display = 'none';
+  });
+
+  // Remove active state from all buttons
+  allButtons.forEach(btn => btn.classList.remove('active'));
+
+  // Load demo if needed (lazy loading)
+  await loadDemo(sectionId);
+
+  // Show target section
+  const targetSection = document.getElementById(sectionId);
+  if (targetSection) {
+    targetSection.classList.add('section-active');
+    targetSection.style.display = 'block';
+  }
+
+  // Handle Overflow & Padding for Dashboard/Overview/Home
+  const sectionContainer = document.querySelector('.section-container');
+  // Also target main-content if that's where the padding is
+  const mainContent = document.querySelector('.main-content');
+
+  const isFullPage = sectionId === 'overview' || sectionId === 'dashboard' || sectionId === 'home';
+
+  if (sectionContainer) {
+    if (isFullPage) {
+      // Home should be scrollable, others (iframes) should be hidden
+      sectionContainer.style.overflow = sectionId === 'home' ? 'auto' : 'hidden';
+      if (mainContent) mainContent.classList.add('no-padding');
+      sectionContainer.classList.add('no-padding');
+    } else {
+      sectionContainer.style.overflow = ''; // Reset to CSS default
+      sectionContainer.style.overflowY = 'auto';
+      if (mainContent) mainContent.classList.remove('no-padding');
+      sectionContainer.classList.remove('no-padding');
+    }
+  }
+
+  // Update Docs Button
+  const docsBtn = document.getElementById('viewDocsBtn');
+  const homeBtn = document.getElementById('home-link-btn');
+
+  if (docsBtn) {
+    if (sectionId === 'home' || sectionId === 'settings' || sectionId === 'documentation') {
+      docsBtn.style.display = 'none';
+    } else {
+      docsBtn.style.display = 'flex';
+      // Use the root-relative path to ensure it works from anywhere
+      docsBtn.href = `/docs/index.html?page=${sectionId}`;
+    }
+  }
+
+  if (homeBtn) {
+    if (sectionId === 'home') {
+      homeBtn.style.display = 'none';
+    } else {
+      homeBtn.style.display = 'flex';
+    }
+  }
+
+  // Activate button and update Title
+  const targetButton = document.querySelector(`[data-section="${sectionId}"]`);
+  const pageTitle = document.getElementById('pageTitle');
+  const backBtn = document.getElementById('backToHomeBtn');
+
+  // Show Back button in header if not on home
+  if (backBtn) {
+    if (sectionId !== 'home') {
+      console.log('Showing back button for section:', sectionId);
+      backBtn.style.setProperty('display', 'flex', 'important');
+    } else {
+      backBtn.style.setProperty('display', 'none', 'important');
+    }
+  }
+
+  // Update Page Title
+  if (pageTitle) {
+    if (sectionId === 'home') {
+      pageTitle.innerText = 'Component Library';
+    } else if (targetButton) {
+      const label = targetButton.getAttribute('label') || targetButton.innerText || sectionId;
+      pageTitle.innerText = label;
+    } else {
+      // Fallback: title-case the sectionId
+      const fallbackLabel = sectionId
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+      pageTitle.innerText = fallbackLabel;
+    }
+  }
+
+  if (targetButton) {
+    targetButton.classList.add('active');
+    // Scroll button into view if it's outside viewport
+    targetButton.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+  }
+
+  currentSectionIndex = sections.indexOf(sectionId);
+
+  // Update Navigation Component
+  const mainNav = document.getElementById('mainNav');
+  if (mainNav && (mainNav.tagName === 'UI-NAVIGATION' || mainNav.tagName === 'UI-NAVIGATION-BAR')) {
+    mainNav.activeId = sectionId;
+  }
+
+  // Ensure we stay at top after content loads
+  requestAnimationFrame(() => {
+    window.scrollTo({ top: 0, behavior: 'auto' });
+  });
+}
+
+async function openDocumentation(componentId) {
+  // Use provided componentId or fallback to current section
+  let targetId = componentId;
+  if (!targetId) {
+    if (currentSectionIndex >= 0 && currentSectionIndex < sections.length) {
+      targetId = sections[currentSectionIndex];
+    }
+  }
+
+  // If we still don't have a valid ID (e.g. on home), default to card or stay
+  if (!targetId || targetId === 'home') {
+    targetId = 'card';
+  }
+
+  // Iframe documentation viewer removed. Redirect or placeholder logic could go here.
+  // For now, we just stay on the documentation section which shows a placeholder.
+
+  await showSection('documentation');
+}
+
+async function navigateNext() {
+  if (currentSectionIndex < sections.length - 1) {
+    currentSectionIndex++;
+    await showSection(sections[currentSectionIndex]);
+  }
+}
+
+async function navigatePrev() {
+  if (currentSectionIndex > 0) {
+    currentSectionIndex--;
+    await showSection(sections[currentSectionIndex]);
+  }
+}
+
+// Theme Management
+function setTheme(theme) {
+  const html = document.documentElement;
+  html.className = theme;
+  html.setAttribute('data-theme', theme); // Explicit for CSS selectors
+  localStorage.setItem('theme', theme);
+
+  // Sync the theme switcher control if it exists
+  const switcher = document.getElementById('theme-switcher-control');
+  if (switcher) {
+    switcher.value = theme;
+  }
+}
+
+function initTheme() {
+  const savedTheme = localStorage.getItem('theme') || 'light';
+
+  // Handle the modern theme switcher control
+  const switcher = document.getElementById('theme-switcher-control');
+  if (switcher) {
+    switcher.addEventListener('buttonToggleGroupChange', (e) => {
+      setTheme(e.detail.value);
+    });
+  }
+
+  // Fallback for legacy themeSwitcher container or manual theme selectors
+  const containers = [
+    document.getElementById('themeSwitcher'),
+    document.getElementById('theme-switcher-control')
+  ];
+  
+  containers.forEach(container => {
+    if (container) {
+      container.querySelectorAll('ui-button-toggle').forEach(btn => {
+        btn.addEventListener('buttonToggleChange', () => {
+          const theme = btn.dataset.theme || btn.value;
+          btn.selected = true;
+          setTheme(theme);
+        });
+      });
+    }
+  });
+
+  setTheme(savedTheme);
+}
+
+// Initialize on load
+document.addEventListener('DOMContentLoaded', () => {
+  initNavigation();
+  initTheme();
+
+  // Check for hash in URL and navigate to section
+  const handleHashChange = () => {
+    const hash = window.location.hash.slice(1) || 'home';
+    console.log('Hash changed to:', hash);
+    setTimeout(() => {
+      showSection(hash);
+    }, 100);
+  };
+
+  // Listen for hash changes
+  window.addEventListener('hashchange', handleHashChange);
+
+  // Check initial hash
+  handleHashChange();
+});
+
+// Export for module imports
+// Ensure global access
+window.showSection = showSection;
+window.setTheme = setTheme;
+window.openDocumentation = openDocumentation;
+
+export { showSection, setTheme, openDocumentation };

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

@@ -0,0 +1,60 @@
+// About Demo / Info Page
+export function initAboutDemo() {
+  const section = document.getElementById('about');
+  if (!section) return;
+
+  section.innerHTML = `
+    <div style="background-color: white; border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto;">
+      <div style="text-align: center; margin-bottom: 40px;">
+        <h1 style="font-size: 2.5rem; color: #1e293b; margin-bottom: 10px;">Modern UI Kit</h1>
+        <p style="font-size: 1.1rem; color: #64748b;">A comprehensive library of high-performance Stencil.js components.</p>
+        <div style="display: flex; justify-content: center; gap: 15px; margin-top: 20px;">
+          <ui-pill label="v2.4.0" color="info" variant="outline"></ui-pill>
+          <ui-pill label="Production Ready" color="success" variant="outline"></ui-pill>
+          <ui-pill label="Open Source" color="danger" variant="outline"></ui-pill>
+        </div>
+      </div>
+
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px;">
+        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+           <div style="font-size: 24px; margin-bottom: 10px;">⚡</div>
+           <h3 style="margin-bottom: 8px;">High Performance</h3>
+           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Built with Stencil.js for near-native performance and tiny bundle sizes.</p>
+        </div>
+        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+           <div style="font-size: 24px; margin-bottom: 10px;">🎨</div>
+           <h3 style="margin-bottom: 8px;">Themeable</h3>
+           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Full CSS Variable support for deep customization and dark mode out of the box.</p>
+        </div>
+        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+           <div style="font-size: 24px; margin-bottom: 10px;">🧩</div>
+           <h3 style="margin-bottom: 8px;">Framework Agnostic</h3>
+           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Works with React, Vue, Angular, or plain HTML/JS without overhead.</p>
+        </div>
+      </div>
+
+      <div style="background-color: #f8fafc; border-radius: 8px; padding: 30px; border-left: 4px solid #10b981;">
+        <h4 style="margin-bottom: 15px;">Quick Start Guide</h4>
+        <div style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 20px;">
+          npm install @company/ui-kit<br><br>
+          import { defineCustomElements } from '@company/ui-kit/loader';<br>
+          defineCustomElements();
+        </div>
+        <ui-button id="exploreBtn" label="Start Exploring Components" color="success" variant="outline"></ui-button>
+      </div>
+
+      <footer style="margin-top: 50px; text-align: center; border-top: 1px solid #e2e8f0; padding-top: 20px;">
+        <p style="color: #94a3b8; font-size: 12px;">© 2024 Modern UI Systems. All rights reserved.</p>
+      </footer>
+    </div>
+  `;
+
+  setTimeout(() => {
+    document.getElementById('exploreBtn')?.addEventListener('click', () => {
+      if (typeof window.showSection === 'function') {
+        window.showSection('home');
+      }
+    });
+  }, 50);
+}
+}