components/generation-studio.js

class CustomGenerationStudio extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.attachEvents();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                
                .studio-grid {
                    display: grid;
                    grid-template-columns: 300px 1fr;
                    gap: 2rem;
                }
                
                @media (max-width: 1024px) {
                    .studio-grid {
                        grid-template-columns: 1fr;
                    }
                }
                
                .sidebar {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                }
                
                .panel {
                    background: rgba(15, 23, 42, 0.5);
                    border: 1px solid rgba(148, 163, 184, 0.1);
                    border-radius: 16px;
                    padding: 1.5rem;
                }
                
                .panel-title {
                    font-size: 0.875rem;
                    font-weight: 600;
                    color: #e2e8f0;
                    margin-bottom: 1rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                
                .model-list {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                }
                
                .model-item {
                    padding: 0.875rem 1rem;
                    border-radius: 12px;
                    background: transparent;
                    border: 1px solid transparent;
                    color: #94a3b8;
                    font-size: 0.875rem;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                }
                
                .model-item:hover {
                    background: rgba(30, 41, 59, 0.5);
                    color: #e2e8f0;
                }
                
                .model-item.active {
                    background: rgba(14, 165, 233, 0.1);
                    border-color: rgba(14, 165, 233, 0.3);
                    color: #0ea5e9;
                }
                
                .model-item .status {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #10b981;
                    margin-left: auto;
                }
                
                .parameter {
                    margin-bottom: 1.25rem;
                }
                
                .parameter-header {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 0.5rem;
                }
                
                .parameter-label {
                    font-size: 0.8125rem;
                    color: #94a3b8;
                }
                .parameter-value {
                    font-size: 0.8125rem;
                    color: #0ea5e9;
                    font-weight: 500;
                    font-family: monospace;
                }
                
                .quality-indicator {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.75rem;
                    background: rgba(14, 165, 233, 0.1);
                    border: 1px solid rgba(14, 165, 233, 0.2);
                    border-radius: 12px;
                    margin-top: 1rem;
                }
                
                .quality-indicator i {
                    color: #0ea5e9;
                }
                
                .quality-indicator span {
                    font-size: 0.75rem;
                    color: #7dd3fc;
                }
                
                .quality-bar {
                    flex: 1;
                    height: 4px;
                    background: rgba(148, 163, 184, 0.2);
                    border-radius: 2px;
                    overflow: hidden;
                    margin-left: 0.5rem;
                }
                
                .quality-fill {
                    height: 100%;
                    background: linear-gradient(90deg, #0ea5e9, #d946ef);
                    border-radius: 2px;
                    transition: width 0.3s ease;
                }
input[type="range"] {
                    width: 100%;
                    height: 6px;
                    -webkit-appearance: none;
                    background: rgba(148, 163, 184, 0.2);
                    border-radius: 3px;
                    outline: none;
                }
                
                input[type="range"]::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    width: 18px;
                    height: 18px;
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    border-radius: 50%;
                    cursor: pointer;
                    transition: transform 0.2s ease;
                }
                
                input[type="range"]::-webkit-slider-thumb:hover {
                    transform: scale(1.2);
                }
                .dimension-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 0.5rem;
                }
                
                @media (max-width: 640px) {
                    .dimension-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
                
                .dimension-btn {
                    padding: 0.625rem;
                    border-radius: 10px;
                    background: rgba(30, 41, 59, 0.5);
                    border: 1px solid rgba(148, 163, 184, 0.1);
                    color: #94a3b8;
                    font-size: 0.7rem;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 0.25rem;
                }
                
                .dimension-btn:hover {
                    background: rgba(30, 41, 59, 0.8);
                }
                
                .dimension-btn.active {
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    color: white;
                    border-color: transparent;
                }
                
                .dimension-btn .res-label {
                    font-size: 0.6rem;
                    opacity: 0.7;
                    text-transform: uppercase;
                }
                
                .quality-badge {
                    position: absolute;
                    top: -8px;
                    right: -8px;
                    padding: 0.125rem 0.375rem;
                    background: linear-gradient(135deg, #f59e0b, #ef4444);
                    border-radius: 4px;
                    font-size: 0.6rem;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: white;
                }
                .main-area {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                }

                .output-panel {
                    background: rgba(15, 23, 42, 0.8);
                    border: 1px solid rgba(148, 163, 184, 0.1);
                    border-radius: 16px;
                    padding: 1.5rem;
                    margin-top: 1.5rem;
                }

                .output-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                }

                .output-title {
                    font-size: 1rem;
                    font-weight: 600;
                    color: #e2e8f0;
                }

                .output-actions {
                    display: flex;
                    gap: 0.5rem;
                }

                .output-btn {
                    padding: 0.5rem 1rem;
                    background: rgba(30, 41, 59, 0.5);
                    border: 1px solid rgba(148, 163, 184, 0.2);
                    border-radius: 8px;
                    color: #94a3b8;
                    font-size: 0.75rem;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

                .output-btn:hover {
                    background: rgba(30, 41, 59, 0.8);
                    border-color: #0ea5e9;
                    color: #e2e8f0;
                }

                .output-btn.primary {
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    border-color: transparent;
                    color: white;
                }

                .output-btn.primary:hover {
                    transform: scale(1.05);
                }

                .output-content {
                    min-height: 200px;
                    background: rgba(15, 23, 42, 0.5);
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    gap: 1rem;
                    padding: 2rem;
                    text-align: center;
                }

                .output-placeholder {
                    color: #64748b;
                    font-size: 0.875rem;
                }

                .output-preview {
                    max-width: 100%;
                    max-height: 400px;
                    border-radius: 12px;
                    display: none;
                }

                .output-preview.show {
                    display: block;
                }
.canvas-area {
                    aspect-ratio: 16/10;
                    background: rgba(15, 23, 42, 0.8);
                    border: 2px dashed rgba(148, 163, 184, 0.2);
                    border-radius: 24px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                }
                
                .canvas-area.has-content {
                    border-style: solid;
                    border-color: rgba(14, 165, 233, 0.3);
                }
                
                .drop-zone {
                    text-align: center;
                    padding: 3rem;
                }
                
                .drop-icon {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto 1.5rem;
                    border-radius: 24px;
                    background: linear-gradient(135deg, #0ea5e920, #d946ef20);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .drop-icon i {
                    color: #0ea5e9;
                }
                
                .drop-text {
                    color: #94a3b8;
                    font-size: 1rem;
                    margin-bottom: 0.5rem;
                }
                
                .drop-subtext {
                    color: #64748b;
                    font-size: 0.875rem;
                }
                
                .preview-canvas {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                
                .generation-overlay {
                    position: absolute;
                    inset: 0;
                    background: rgba(15, 23, 42, 0.9);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 1.5rem;
                }
                
                .neural-spinner {
                    width: 120px;
                    height: 120px;
                    position: relative;
                }
                
                .neural-ring {
                    position: absolute;
                    inset: 0;
                    border: 3px solid transparent;
                    border-top-color: #0ea5e9;
                    border-radius: 50%;
                    animation: spin 2s linear infinite;
                }
                
                .neural-ring:nth-child(2) {
                    inset: 15px;
                    border-top-color: #d946ef;
                    animation-duration: 1.5s;
                    animation-direction: reverse;
                }
                
                .neural-ring:nth-child(3) {
                    inset: 30px;
                    border-top-color: #f97316;
                    animation-duration: 1s;
                }
                
                @keyframes spin {
                    to { transform: rotate(360deg); }
                }
                
                .progress-text {
                    font-size: 1.125rem;
                    color: #e2e8f0;
                    font-weight: 500;
                }
                
                .progress-bar {
                    width: 200px;
                    height: 4px;
                    background: rgba(148, 163, 184, 0.2);
                    border-radius: 2px;
                    overflow: hidden;
                }
                
                .progress-fill {
                    height: 100%;
                    background: linear-gradient(90deg, #0ea5e9, #d946ef);
                    border-radius: 2px;
                    transition: width 0.3s ease;
                    width: 0%;
                }
                
                .timeline {
                    display: flex;
                    gap: 1rem;
                    padding: 1rem;
                    background: rgba(15, 23, 42, 0.5);
                    border-radius: 16px;
                    overflow-x: auto;
                }
                
                .timeline-item {
                    flex-shrink: 0;
                    width: 120px;
                    aspect-ratio: 16/10;
                    border-radius: 12px;
                    background: rgba(30, 41, 59, 0.5);
                    border: 2px solid transparent;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                }
                
                .timeline-item:hover {
                    border-color: #0ea5e9;
                }
                
                .timeline-item.active {
                    border-color: #0ea5e9;
                    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
                }
                
                .timeline-thumb {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                
                .timeline-number {
                    position: absolute;
                    bottom: 0.5rem;
                    left: 0.5rem;
                    padding: 0.25rem 0.5rem;
                    background: rgba(15, 23, 42, 0.8);
                    border-radius: 6px;
                    font-size: 0.75rem;
                    font-weight: 600;
                    color: #e2e8f0;
                }
                
                .action-bar {
                    display: flex;
                    gap: 1rem;
                    justify-content: center;
                }
                
                .action-btn {
                    padding: 0.875rem 1.5rem;
                    border-radius: 12px;
                    border: 1px solid rgba(148, 163, 184, 0.2);
                    background: rgba(30, 41, 59, 0.5);
                    color: #e2e8f0;
                    font-size: 0.875rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                
                .action-btn:hover {
                    background: rgba(30, 41, 59, 0.8);
                    border-color: #0ea5e9;
                }
                
                .action-btn.primary {
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    border-color: transparent;
                    color: white;
                }
                
                .action-btn.primary:hover {
                    transform: scale(1.05);
                    box-shadow: 0 10px 40px rgba(14, 165, 233, 0.4);
                }
            </style>
            
            <div class="studio-grid">
                <aside class="sidebar">
                    <div class="panel">
                        <h4 class="panel-title">AI Model</h4>
                        <div class="model-list">
                            <button class="model-item active" data-model="stable-diffusion-xl">
                                <i data-feather="cpu" style="width: 16px; height: 16px;"></i>
                                Stable Diffusion XL
                                <span class="status"></span>
                            </button>
                            <button class="model-item" data-model="realistic-vision">
                                <i data-feather="camera" style="width: 16px; height: 16px;"></i>
                                Realistic Vision
                                <span class="status"></span>
                            </button>
                            <button class="model-item" data-model="anime-diffusion">
                                <i data-feather="pen-tool" style="width: 16px; height: 16px;"></i>
                                Anime Diffusion
                                <span class="status"></span>
                            </button>
                            <button class="model-item" data-model="deepfloyd-if">
                                <i data-feather="aperture" style="width: 16px; height: 16px;"></i>
                                DeepFloyd IF
                                <span class="status"></span>
                            </button>
                        </div>
                    </div>
                    <div class="panel">
                        <h4 class="panel-title">Resolution & Quality</h4>
                        <div class="dimension-grid">
                            <button class="dimension-btn" data-w="1024" data-h="1024">
                                <span>1024²</span>
                                <span class="res-label">HD</span>
                            </button>
                            <button class="dimension-btn" data-w="1920" data-h="1080">
                                <span>FHD</span>
                                <span class="res-label">1080p</span>
                            </button>
                            <button class="dimension-btn active" data-w="2048" data-h="2048">
                                <span>2K</span>
                                <span class="res-label">QHD</span>
                            </button>
                            <button class="dimension-btn" data-w="3840" data-h="2160">
                                <span>4K UHD</span>
                                <span class="res-label">Ultra-HD</span>
                            </button>
                            <button class="dimension-btn" data-w="4096" data-h="4096">
                                <span>4K²</span>
                                <span class="res-label">Square</span>
                            </button>
                            <button class="dimension-btn" data-w="7680" data-h="4320">
                                <span>8K UHD</span>
                                <span class="res-label">Full Ultra</span>
                            </button>
                            <button class="dimension-btn" data-w="15360" data-h="8640">
                                <span>16K</span>
                                <span class="res-label">Cinema</span>
                            </button>
                            <button class="dimension-btn" data-w="20480" data-h="20480">
                                <span>20K+</span>
                                <span class="res-label">Max</span>
                            </button>
                        </div>
                    </div>
                    <div class="panel">
                        <h4 class="panel-title">Quality Settings</h4>
                        <div class="parameter">
                            <div class="parameter-header">
                                <span class="parameter-label">Upscaling Factor</span>
                                <span class="parameter-value" id="upscale-value">2x</span>
                            </div>
                            <input type="range" id="upscale-slider" min="1" max="4" step="0.5" value="2">
                        </div>
                        <div class="parameter">
                            <div class="parameter-header">
                                <span class="parameter-label">Detail Enhancement</span>
                                <span class="parameter-value" id="detail-value">High</span>
                            </div>
                            <input type="range" id="detail-slider" min="0" max="100" value="75">
                        </div>
                        <div class="parameter">
                            <div class="parameter-header">
                                <span class="parameter-label">Denoising Strength</span>
                                <span class="parameter-value" id="denoise-value">0.4</span>
                            </div>
                            <input type="range" id="denoise-slider" min="0" max="1" step="0.05" value="0.4">
                        </div>
                    </div>
                    
                    <div class="panel">
                        <h4 class="panel-title">Advanced Parameters</h