muspe-cli/src/ui/layout/Container.js

MusPE Advanced Framework v2.1.3 - Mobile User-friendly Simple Progressive Engine with Enhanced CLI Tools, Specialized E-Commerce Templates, Material Design 3, Progressive Enhancement, Mobile Optimizations, Performance Analysis, and Enterprise-Grade Develo

// MusPE UI - Mobile-First Container Component
class Container {
  constructor(options = {}) {
    this.options = {
      fluid: false,
      safeArea: true,
      padding: 'default',
      maxWidth: 'lg',
      ...options
    };
    
    this.element = null;
    this.children = [];
  }
  
  render() {
    this.element = document.createElement('div');
    this.element.className = this.buildClasses();
    
    // Add children if provided
    if (this.options.children) {
      this.appendChild(this.options.children);
    }
    
    return this.element;
  }
  
  buildClasses() {
    const classes = ['muspe-container'];
    
    // Fluid container
    if (this.options.fluid) {
      classes.push('muspe-container--fluid');
    }
    
    // Safe area support
    if (this.options.safeArea) {
      classes.push('muspe-safe-area');
    }
    
    // Padding variants
    switch (this.options.padding) {
      case 'none':
        break;
      case 'sm':
        classes.push('muspe-p-2');
        break;
      case 'lg':
        classes.push('muspe-p-6');
        break;
      case 'xl':
        classes.push('muspe-p-8');
        break;
      default:
        classes.push('muspe-p-4');
    }
    
    // Max width variants
    switch (this.options.maxWidth) {
      case 'sm':
        classes.push('muspe-container--sm');
        break;
      case 'md':
        classes.push('muspe-container--md');
        break;
      case 'lg':
        classes.push('muspe-container--lg');
        break;
      case 'xl':
        classes.push('muspe-container--xl');
        break;
      case 'full':
        classes.push('muspe-container--full');
        break;
    }
    
    return classes.join(' ');
  }
  
  appendChild(child) {
    if (!this.element) return;
    
    if (typeof child === 'string') {
      this.element.appendChild(document.createTextNode(child));
    } else if (child instanceof HTMLElement) {
      this.element.appendChild(child);
    } else if (child && typeof child.render === 'function') {
      this.element.appendChild(child.render());
    }
    
    this.children.push(child);
  }
  
  setContent(content) {
    if (!this.element) return;
    
    this.element.innerHTML = '';
    this.children = [];
    
    if (Array.isArray(content)) {
      content.forEach(child => this.appendChild(child));
    } else {
      this.appendChild(content);
    }
  }
  
  destroy() {
    if (this.element && this.element.parentNode) {
      this.element.parentNode.removeChild(this.element);
    }
    this.children = [];
    this.element = null;
  }
}

// CSS Styles for Container
const containerStyles = `
.muspe-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.muspe-container--fluid {
  max-width: none;
}

.muspe-container--sm {
  max-width: 384px; /* 24rem */
}

.muspe-container--md {
  max-width: 448px; /* 28rem */
}

.muspe-container--lg {
  max-width: 512px; /* 32rem */
}

.muspe-container--xl {
  max-width: 576px; /* 36rem */
}

.muspe-container--full {
  max-width: 100%;
}

/* Responsive behavior */
@media (min-width: 640px) {
  .muspe-container:not(.muspe-container--fluid) {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .muspe-container:not(.muspe-container--fluid) {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .muspe-container:not(.muspe-container--fluid) {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .muspe-container:not(.muspe-container--fluid) {
    max-width: 1280px;
  }
}
`;

// Auto-inject styles
if (typeof document !== 'undefined') {
  const styleSheet = document.createElement('style');
  styleSheet.textContent = containerStyles;
  document.head.appendChild(styleSheet);
}

export default Container;