@tamilvananmurugan/xlibs

// Component Registry with Smart Priority System // Priority: Magic UI (40%) > Aceternity (30%) > Charts (20%) > UI (10%) // Preference Order: Magic UI, Aceternity UI, Charts, ShadCN/UI (fallback only) export interface ComponentMetadata { name: string; category: 'aceternity' | 'magicui' | 'shadcn' | 'charts' | 'ui'; priority: number; tags: string[]; useCases: string[]; animationLevel: 'low' | 'medium' | 'high'; hasGradient: boolean; description: string; complexity: 'simple' | 'medium' | 'complex'; isComposite: boolean; } export const componentRegistry: Record<string, ComponentMetadata> = { // ===== ACETERNITY COMPONENTS (Priority 2 - 30% usage) ===== 'MacbookScroll': { name: 'MacbookScroll', category: 'aceternity', priority: 1, tags: ['macbook', 'scroll', '3d', 'animation', 'hero'], useCases: ['hero-sections', 'product-showcases', 'landing-pages', 'interactive-demos'], animationLevel: 'high', hasGradient: true, description: 'Interactive 3D MacBook with scroll animations and realistic keyboard', complexity: 'complex', isComposite: true }, 'AnimatedButton': { name: 'AnimatedButton', category: 'aceternity', priority: 1, tags: ['button', 'animation', 'interactive'], useCases: ['hero-sections', 'cta-buttons', 'interactive-elements'], animationLevel: 'high', hasGradient: true, description: 'Animated button with gradient effects', complexity: 'medium', isComposite: true }, 'BackgroundBeams': { name: 'BackgroundBeams', category: 'aceternity', priority: 1, tags: ['background', 'beams', 'gradient', 'animated'], useCases: ['hero-sections', 'landing-pages', 'background-effects'], animationLevel: 'high', hasGradient: true, description: 'Animated background with moving gradient beams', complexity: 'complex', isComposite: true }, 'CardSpotlight': { name: 'CardSpotlight', category: 'aceternity', priority: 1, tags: ['card', 'spotlight', 'hover-effect'], useCases: ['product-cards', 'feature-showcases', 'interactive-cards'], animationLevel: 'medium', hasGradient: true, description: 'Card with spotlight hover effect', complexity: 'medium', isComposite: true }, 'Carousel': { name: 'Carousel', category: 'aceternity', priority: 1, tags: ['carousel', 'slider', 'navigation', 'content'], useCases: ['image-galleries', 'content-showcases', 'product-displays'], animationLevel: 'medium', hasGradient: false, description: 'Smooth carousel with navigation controls', complexity: 'complex', isComposite: true }, 'GlowingEffect': { name: 'GlowingEffect', category: 'aceternity', priority: 1, tags: ['glow', 'effect', 'gradient', 'animated'], useCases: ['buttons', 'cards', 'highlighted-elements'], animationLevel: 'high', hasGradient: true, description: 'Glowing effect with gradient animation', complexity: 'medium', isComposite: true }, 'InfiniteMovingCards': { name: 'InfiniteMovingCards', category: 'aceternity', priority: 1, tags: ['cards', 'infinite', 'scroll', 'animated'], useCases: ['testimonials', 'features', 'content-showcases'], animationLevel: 'high', hasGradient: false, description: 'Infinite scrolling cards with smooth animation', complexity: 'complex', isComposite: true }, 'Navbar': { name: 'Navbar', category: 'aceternity', priority: 1, tags: ['navbar', 'navigation', 'header', 'responsive'], useCases: ['main-navigation', 'header-sections', 'site-navigation'], animationLevel: 'low', hasGradient: false, description: 'Responsive navigation bar with mobile menu', complexity: 'medium', isComposite: true }, 'Sidebar': { name: 'Sidebar', category: 'aceternity', priority: 1, tags: ['sidebar', 'navigation', 'menu', 'responsive'], useCases: ['admin-panels', 'dashboards', 'side-navigation'], animationLevel: 'low', hasGradient: false, description: 'Responsive sidebar with navigation menu', complexity: 'medium', isComposite: true }, 'FloatingNav': { name: 'FloatingNav', category: 'aceternity', priority: 1, tags: ['navigation', 'floating', 'animated', 'responsive'], useCases: ['site-navigation', 'floating-menu', 'scroll-aware-nav'], animationLevel: 'high', hasGradient: true, description: 'Floating navigation with scroll awareness and smooth animations', complexity: 'medium', isComposite: true }, 'HoverMenu': { name: 'HoverMenu', category: 'aceternity', priority: 1, tags: ['navigation', 'dropdown', 'animated', 'interactive'], useCases: ['site-navigation', 'dropdown-menu', 'product-showcase'], animationLevel: 'high', hasGradient: true, description: 'Interactive hover menu with dropdown animations and product showcase', complexity: 'medium', isComposite: true }, 'Timeline': { name: 'Timeline', category: 'aceternity', priority: 1, tags: ['timeline', 'vertical', 'content', 'scroll-aware', 'animated'], useCases: ['changelog', 'history', 'roadmap', 'achievements', 'process-flows'], animationLevel: 'high', hasGradient: true, description: 'Enhanced timeline with scroll progress, sticky positioning, and smooth animations', complexity: 'medium', isComposite: true }, 'TracingBeam': { name: 'TracingBeam', category: 'aceternity', priority: 1, tags: ['tracing', 'beam', 'scroll', 'animated'], useCases: ['scroll-effects', 'content-highlighting', 'interactive-content'], animationLevel: 'high', hasGradient: true, description: 'Tracing beam effect on scroll', complexity: 'complex', isComposite: true }, 'BackgroundBeamsWithCollision': { name: 'BackgroundBeamsWithCollision', category: 'aceternity', priority: 0.85, tags: ['beams', 'collision', 'animation', 'background'], useCases: ['hero', 'background', 'interactive'], animationLevel: 'high', hasGradient: true, description: 'Animated background beams with collision detection and explosion effects', complexity: 'complex', isComposite: true }, 'BackgroundLines': { name: 'BackgroundLines', category: 'aceternity', priority: 1, tags: ['background', 'animation', 'svg', 'lines', 'drawing'], useCases: ['hero-sections', 'landing-pages', 'background-effects', 'visual-enhancement'], animationLevel: 'high', hasGradient: false, description: 'Animated SVG background with drawing line effects', complexity: 'complex', isComposite: true }, 'ColourfulText': { name: 'ColourfulText', category: 'aceternity', priority: 1, tags: ['text', 'animation', 'colorful', 'typing', 'interactive'], useCases: ['hero-sections', 'headlines', 'landing-pages', 'text-animation'], animationLevel: 'high', hasGradient: false, description: 'Animated text with colorful character-by-character effects and color cycling', complexity: 'medium', isComposite: true }, 'BentoGrid': { name: 'BentoGrid', category: 'magicui', priority: 1, tags: ['grid', 'layout', 'responsive', 'modern'], useCases: ['dashboards', 'feature-showcases', 'portfolio-layouts', 'content-grids'], animationLevel: 'low', hasGradient: false, description: 'Modern responsive grid layout system for organizing content in an elegant bento box style', complexity: 'medium', isComposite: true }, 'BentoCard': { name: 'BentoCard', category: 'magicui', priority: 1, tags: ['card', 'grid-item', 'modern', 'glassmorphism'], useCases: ['feature-cards', 'content-cards', 'dashboard-items', 'portfolio-items'], animationLevel: 'low', hasGradient: false, description: 'Modern card component with glassmorphism effects, designed for bento grid layouts', complexity: 'medium', isComposite: true }, 'BentoDemo': { name: 'BentoDemo', category: 'magicui', priority: 1, tags: ['demo', 'showcase', 'grid', 'features'], useCases: ['feature-showcases', 'landing-pages', 'demos', 'examples'], animationLevel: 'low', hasGradient: false, description: 'Complete demo showcasing the Bento grid system with sample feature cards', complexity: 'complex', isComposite: true }, 'AnimatedCircularProgressBar': { name: 'AnimatedCircularProgressBar', category: 'magicui', priority: 1, tags: ['progress', 'gauge', 'circular', 'animation', 'dashboard'], useCases: ['dashboards', 'progress-tracking', 'metrics-display', 'status-indicators'], animationLevel: 'medium', hasGradient: false, description: 'Animated circular progress bar with customizable colors and smooth transitions', complexity: 'medium', isComposite: true }, 'ScriptCopyBtn': { name: 'ScriptCopyBtn', category: 'magicui', priority: 1, tags: ['copy', 'button', 'code', 'package-manager', 'utility'], useCases: ['documentation', 'code-snippets', 'installation-guides', 'developer-tools'], animationLevel: 'low', hasGradient: false, description: 'Interactive copy button with package manager switching and syntax highlighting', complexity: 'medium', isComposite: true }, 'ArcTimeline': { name: 'ArcTimeline', category: 'magicui', priority: 1, tags: ['timeline', 'arc', 'circular', 'interactive', 'steps'], useCases: ['roadmaps', 'process-flows', 'timeline-visualization', 'step-by-step-guides'], animationLevel: 'medium', hasGradient: false, description: 'Interactive circular arc timeline with configurable steps, angles, and smooth animations', complexity: 'complex', isComposite: true }, 'PixelImage': { name: 'PixelImage', category: 'magicui', priority: 1, tags: ['image', 'pixel', 'animation', 'grid', 'reveal'], useCases: ['image-galleries', 'loading-effects', 'creative-displays', 'portfolio-showcases'], animationLevel: 'high', hasGradient: false, description: 'Animated pixelated image reveal with configurable grid patterns and grayscale-to-color transitions', complexity: 'medium', isComposite: true }, 'ShinyButton': { name: 'ShinyButton', category: 'magicui', priority: 1, tags: ['button', 'shiny', 'animation', 'shine', 'interactive'], useCases: ['call-to-actions', 'navigation', 'forms', 'interactive-elements'], animationLevel: 'high', hasGradient: true, description: 'Interactive button with continuous shine animation, scale effects, and glassmorphism styling', complexity: 'medium', isComposite: true }, // ===== SHADCN COMPONENTS (Priority 1 - 20% usage) ===== 'ChartBarDefault': { name: 'ChartBarDefault', category: 'shadcn', priority: 1, tags: ['chart', 'bar', 'data-visualization', 'analytics', 'dashboard'], useCases: ['dashboards', 'analytics', 'reports', 'data-presentation'], animationLevel: 'medium', hasGradient: false, description: 'Complete bar chart component with card layout, tooltips, and responsive design', complexity: 'complex', isComposite: true }, // ===== MAGICUI COMPONENTS (Priority 2 - 15% usage) ===== 'MagicButton': { name: 'MagicButton', category: 'magicui', priority: 2, tags: ['button', 'magic', 'interactive'], useCases: ['cta-buttons', 'interactive-elements', 'special-actions'], animationLevel: 'high', hasGradient: true, description: 'Magic button with special effects', complexity: 'medium', isComposite: true }, 'UnifiedButton': { name: 'UnifiedButton', category: 'magicui', priority: 2, tags: ['button', 'unified', 'design-system'], useCases: ['design-systems', 'component-libraries', 'consistent-ui'], animationLevel: 'medium', hasGradient: false, description: 'Unified button design system component', complexity: 'simple', isComposite: true }, 'AnimatedBeam': { name: 'AnimatedBeam', category: 'magicui', priority: 2, tags: ['beam', 'animation', 'gradient'], useCases: ['hero-sections', 'feature-highlights', 'interactive-elements'], animationLevel: 'high', hasGradient: true, description: 'Animated beam with gradient effects', complexity: 'complex', isComposite: true }, 'MagicCard': { name: 'MagicCard', category: 'magicui', priority: 2, tags: ['card', 'magic', 'gradient'], useCases: ['feature-cards', 'product-cards', 'content-cards'], animationLevel: 'medium', hasGradient: true, description: 'Magic card with gradient effects', complexity: 'medium', isComposite: true }, 'TextAnimate': { name: 'TextAnimate', category: 'magicui', priority: 2, tags: ['text', 'animation', 'typing'], useCases: ['hero-text', 'announcements', 'interactive-text'], animationLevel: 'high', hasGradient: false, description: 'Animated text with typing effect', complexity: 'medium', isComposite: true }, // ===== CHARTS COMPONENTS (Priority 3 - 3% usage) ===== 'ChartAreaGradient': { name: 'ChartAreaGradient', category: 'charts', priority: 2, tags: ['chart', 'area', 'gradient', 'data'], useCases: ['dashboards', 'analytics', 'data-visualization'], animationLevel: 'low', hasGradient: true, description: 'Area chart with gradient fill', complexity: 'medium', isComposite: true }, 'ChartBarBasic': { name: 'ChartBarBasic', category: 'charts', priority: 2, tags: ['chart', 'bar', 'data', 'basic'], useCases: ['dashboards', 'analytics', 'data-visualization'], animationLevel: 'low', hasGradient: false, description: 'Basic bar chart component', complexity: 'simple', isComposite: true }, 'ChartPieBasic': { name: 'ChartPieBasic', category: 'charts', priority: 2, tags: ['chart', 'pie', 'data', 'basic'], useCases: ['dashboards', 'analytics', 'data-visualization'], animationLevel: 'low', hasGradient: false, description: 'Basic pie chart component', complexity: 'simple', isComposite: true }, 'ChartLineMultiple': { name: 'ChartLineMultiple', category: 'charts', priority: 2, tags: ['chart', 'line', 'multiple', 'data'], useCases: ['dashboards', 'analytics', 'data-visualization'], animationLevel: 'low', hasGradient: false, description: 'Multiple line chart component', complexity: 'medium', isComposite: true }, // ===== UI/SHADCN COMPONENTS (Priority 4 - 2% usage) ===== 'Button': { name: 'Button', category: 'ui', priority: 3, tags: ['button', 'ui', 'interactive'], useCases: ['forms', 'actions', 'navigation'], animationLevel: 'low', hasGradient: false, description: 'Basic button component', complexity: 'simple', isComposite: true }, 'Card': { name: 'Card', category: 'ui', priority: 4, tags: ['card', 'container', 'layout'], useCases: ['content-containers', 'layouts', 'information-display'], animationLevel: 'low', hasGradient: false, description: 'Basic card container', complexity: 'simple', isComposite: true }, 'Input': { name: 'Input', category: 'ui', priority: 3, tags: ['input', 'form', 'ui'], useCases: ['forms', 'data-entry', 'user-input'], animationLevel: 'low', hasGradient: false, description: 'Basic input component', complexity: 'simple', isComposite: true }, 'Dialog': { name: 'Dialog', category: 'ui', priority: 3, tags: ['dialog', 'modal', 'overlay'], useCases: ['confirmations', 'forms', 'content-overlays'], animationLevel: 'low', hasGradient: false, description: 'Modal dialog component', complexity: 'medium', isComposite: true }, 'Table': { name: 'Table', category: 'ui', priority: 4, tags: ['table', 'data', 'grid'], useCases: ['data-display', 'lists', 'information-tables'], animationLevel: 'low', hasGradient: false, description: 'Data table component', complexity: 'medium', isComposite: true } }; export const componentCategories = { aceternity: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'aceternity'), magicui: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'magicui'), shadcn: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'shadcn'), charts: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'charts'), ui: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'ui') }; export const priorityWeights = { magicui: 1.0, // 40% usage preference aceternity: 0.75, // 30% usage preference shadcn: 0.5, // 20% usage preference charts: 0.25, // 10% usage preference (fallback) ui: 0.25 // 10% usage preference (fallback) };