Spaces:

acecalisto3
/

UIKitV3-Automator

Sleeping

File size: 93,180 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UIKitV3 Elite - Next-Gen Component Automator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        /* Base styles with enhanced visuals */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: #2a2a2a;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        /* TV Static background layer */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 20%, #4d4d4d 40%, #5a5a5a 50%, #4d4d4d 60%, #3d3d3d 80%, #2d2d2d 100%),
                repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255, 255, 255, 0.025) 1px, rgba(255, 255, 255, 0.025) 2px),
                repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0, 0, 0, 0.025) 1px, rgba(0, 0, 0, 0.025) 2px),
                repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255, 255, 255, 0.015) 3px, rgba(255, 255, 255, 0.015) 6px),
                repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0, 0, 0, 0.015) 3px, rgba(0, 0, 0, 0.015) 6px);
            background-size: 100% 100%, 2px 2px, 2px 2px, 6px 6px, 6px 6px;
            animation: staticNoise 10s infinite linear;
            pointer-events: none;
            z-index: 0;
        }
        @keyframes staticNoise {
            0%, 100% { opacity: 1; filter: contrast(1.05); }
            33% { opacity: 0.98; filter: contrast(1); }
            66% { opacity: 0.96; filter: contrast(1.02); }
        }
        /* Glass overlay at 55% opacity */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.025) 0%,
                rgba(255, 255, 255, 0.015) 50%,
                rgba(255, 255, 255, 0.025) 100%);
            backdrop-filter: blur(0.5px);
            opacity: 0.55;
            pointer-events: none;
            z-index: 1;
            mix-blend-mode: overlay;
        }
        /* Animated background particles */
        .bg-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        .particle {
            position: absolute;
            background: radial-gradient(circle, rgba(200, 140, 80, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            animation: float linear infinite;
            filter: blur(2px);
        }
        @keyframes float {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { opacity: 0.3; }
            90% { opacity: 0.3; }
            100% { transform: translateY(-100vh) scale(1); opacity: 0; }
        }
        /* Glassmorphism effect */
        .glass {
            background: rgba(20, 20, 20, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(200, 140, 80, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
        }
        .glass-dark {
            background: rgba(18, 18, 18, 0.75);
            backdrop-filter: blur(50px) saturate(190%);
            -webkit-backdrop-filter: blur(50px) saturate(190%);
            border: 1px solid rgba(200, 140, 80, 0.25);
            box-shadow:
                0 12px 40px 0 rgba(0, 0, 0, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 0 60px rgba(0, 0, 0, 0.3),
                0 0 1px rgba(200, 140, 80, 0.2);
        }
        .container {
            max-width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 1;
            min-height: 100vh;
            width: 100%;
        }
        /* === SLIDING PANEL LAYOUT CSS === */
        /* Sliding Module Base Styles */
        .slide-module {
            position: fixed;
            top: 0;
            height: 100vh;
            width: 40%;
            background: rgba(18, 18, 18, 0.75);
            backdrop-filter: blur(50px) saturate(190%);
            -webkit-backdrop-filter: blur(50px) saturate(190%);
            border: 1px solid rgba(200, 140, 80, 0.25);
            box-shadow:
                0 0 60px rgba(0, 0, 0, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 0 60px rgba(0, 0, 0, 0.3),
                0 0 1px rgba(200, 140, 80, 0.2);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        /* Left-side modules (Components, Properties, Code Output) */
        .slide-module.left {
            left: 48px; /* <-- FIX: Changed from 0 to 48px */
            border-left: none;
            border-right: 1px solid rgba(200, 140, 80, 0.25);
            transform: translateX(-100%);
        }
        .slide-module.left.open {
            transform: translateX(0);
        }
        /* Right-side module (Live Preview) */
        .slide-module.right {
            right: 48px; /* <-- FIX: Changed from 0 to 48px */
            width: 45%; /* Preview panel can be a bit wider */
            border-right: none;
            border-left: 1px solid rgba(200, 140, 80, 0.25);
            transform: translateX(100%);
        }
        .slide-module.right.open {
            transform: translateX(0);
        }
        /* Make open panels cover the tabs (No longer needed, but keep for safety) */
        .slide-module.open {
            z-index: 160;
        }
        /* Module content area */
        .module-content {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
        }
        /* Module header */
        .module-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid rgba(200, 140, 80, 0.15);
            background: rgba(200, 140, 80, 0.05);
            flex-shrink: 0;
        }
        /* Module Tabs */
        .module-tab {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 160px;
            background: rgba(20, 20, 20, 0.9);
            backdrop-filter: blur(50px) saturate(180%);
            -webkit-backdrop-filter: blur(50px) saturate(180%);
            border: 1px solid rgba(200, 140, 80, 0.35);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 150;
            box-shadow:
                0 4px 20px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 0 1px rgba(200, 140, 80, 0.2);
        }
        /* Left tabs (Components, Properties, Code Output) */
        .module-tab.left {
            left: 0;
            border-left: none;
            border-radius: 0 8px 8px 0;
        }
        .module-tab.left:hover {
            background: rgba(25, 25, 25, 0.95);
            border-color: rgba(200, 140, 80, 0.5);
            box-shadow:
                4px 0 28px rgba(0, 0, 0, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 0 16px rgba(200, 140, 80, 0.2);
        }
        /* Right tab (Live Preview) */
        .module-tab.right {
            right: 0;
            border-right: none;
            border-radius: 8px 0 0 8px;
        }
        .module-tab.right:hover {
            background: rgba(25, 25, 25, 0.95);
            border-color: rgba(200, 140, 80, 0.5);
            box-shadow:
                -4px 0 28px rgba(0, 0, 0, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 0 16px rgba(200, 140, 80, 0.2);
        }
        .module-tab-icon {
            font-size: 24px;
        }
        .module-tab-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 11px;
            font-weight: 600;
            color: rgba(200, 140, 80, 0.8);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        /* Position tabs at different heights for left modules */
        #components-tab { top: 20%; }
        #properties-tab { top: 50%; }
        #code-tab { top: 80%; }
       
        /* === END NEW LAYOUT CSS === */
        /* === Pinstripe Separators === */
        .pinstripe {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 1px;
            background: rgba(200, 140, 80, 0.2); /* Subtle border color */
            z-index: 140; /* Below tabs (150), above closed panels (100) */
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
        }
        .pinstripe.left {
            left: 48px; /* Aligned with the inner edge of left tabs */
        }
        .pinstripe.right {
            right: 48px; /* Aligned with the inner edge of right tab */
        }
        /* === END NEW CSS === */
        /* Enhanced dropdown with smooth animations */
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background: rgba(26, 26, 26, 0.95);
            backdrop-filter: blur(20px);
            min-width: 200px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 1px rgba(200, 140, 80, 0.2);
            z-index: 10001; /* Needs to be high for when panel is open */
            border-radius: 12px;
            border: 1px solid rgba(200, 140, 80, 0.15);
            animation: dropdownSlide 0.3s ease;
            max-height: 400px;
            overflow-y: auto;
        }
        @keyframes dropdownSlide {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .dropdown-content a {
            color: white;
            padding: 12px 20px;
            text-decoration: none;
            display: block;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        .dropdown-content a:hover {
            background: linear-gradient(90deg, rgba(200, 140, 80, 0.15), transparent);
            border-left-color: rgba(200, 140, 80, 0.6);
            padding-left: 25px;
        }
        .dropdown.show .dropdown-content {
            display: block;
        }
        /* Enhanced button with hover effects */
        .btn-primary {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        .btn-primary:hover::before {
            width: 300px;
            height: 300px;
        }
        .btn-primary span {
            position: relative;
            z-index: 1;
        }
        /* Loading spinner styles */
        .loader {
            border: 3px solid rgba(200, 140, 80, 0.1);
            border-top: 3px solid rgba(200, 140, 80, 0.6);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(30, 30, 30, 0.5);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, rgba(180, 120, 60, 0.4) 0%, rgba(200, 140, 80, 0.6) 100%);
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, rgba(200, 140, 80, 0.6) 0%, rgba(220, 160, 100, 0.7) 100%);
        }
        /* Input field enhancements */
        .input-field {
            transition: all 0.3s ease;
            position: relative;
        }
        .input-field:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(200, 140, 80, 0.2);
            border-color: rgba(200, 140, 80, 0.4);
        }
        /* Header text animations with SVG path tracing */
        .header-title {
            display: inline-block;
            position: relative;
            overflow: visible;
        }
        .header-svg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }
        .header-path {
            fill: none;
            stroke: rgba(200, 140, 80, 0.6);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: tracePath 3s ease forwards;
            filter: drop-shadow(0 0 8px rgba(200, 140, 80, 0.4));
        }
        @keyframes tracePath {
            to {
                stroke-dashoffset: 0;
            }
        }
        .header-title .char {
            display: inline-block;
            opacity: 0;
            position: relative;
            animation: charScribe 0.5s ease forwards;
        }
        @keyframes charScribe {
            0% { opacity: 0; filter: blur(4px); transform: scale(0.8); }
            50% { opacity: 0.6; filter: blur(2px); }
            100% { opacity: 1; filter: blur(0); transform: scale(1); text-shadow: 0 0 10px rgba(200, 140, 80, 0.3); }
        }
        .subtitle-text {
            opacity: 0;
            transform: translateY(10px);
            animation: subtitleFade 1s ease forwards 2.5s;
        }
        @keyframes subtitleFade {
            to { opacity: 1; transform: translateY(0); }
        }
        /* Icon button styles */
        .icon-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: rgba(200, 140, 80, 0.1);
            color: rgba(200, 140, 80, 0.9);
            border: 1px solid rgba(200, 140, 80, 0.15);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .icon-btn:hover {
            background: rgba(200, 140, 80, 0.2);
            border-color: rgba(200, 140, 80, 0.4);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(200, 140, 80, 0.2);
        }
        .icon-btn:active {
            transform: scale(0.95);
        }
        /* Platform export dropdown */
        .platform-dropdown {
            position: relative;
            display: inline-block;
        }
        .platform-options {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: rgba(26, 26, 26, 0.98);
            backdrop-filter: blur(20px);
            min-width: 250px;
            border-radius: 12px;
            border: 1px solid rgba(200, 140, 80, 0.15);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 1px rgba(200, 140, 80, 0.2);
            z-index: 10000; /* Needs to be high for when panel is open */
            animation: dropdownSlide 0.3s ease;
            max-height: 500px;
            overflow-y: auto;
        }
        .platform-options.show {
            display: block;
        }
        .platform-option {
            padding: 12px 16px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            border-left: 3px solid transparent;
        }
        .platform-option:hover {
            background: linear-gradient(90deg, rgba(200, 140, 80, 0.15), transparent);
            border-left-color: rgba(200, 140, 80, 0.6);
        }
        .platform-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(200, 140, 80, 0.15);
            border-radius: 6px;
            font-size: 12px;
        }
        /* Animation presets */
        .animate-fadeIn { animation: fadeIn 0.5s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .animate-slideInLeft { animation: slideInLeft 0.5s ease; }
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
        .animate-bounce { animation: bounce 0.6s ease; }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .animate-slideInRight { animation: slideInRight 0.5s ease; }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
        .animate-slideInUp { animation: slideInUp 0.5s ease; }
        @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
        .animate-shake { animation: shake 0.5s ease; }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }
        .animate-rotate { animation: rotate 0.6s ease; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .animate-scale { animation: scale 0.6s ease; }
        @keyframes scale { from { transform: scale(0.5); } to { transform: scale(1); } }
        /* Tooltip */
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            background-color: rgba(0, 0, 0, 0.9);
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px 12px;
            position: absolute;
            z-index: 10001;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
            white-space: nowrap;
            font-size: 12px;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        /* Code block enhancements */
        pre {
            border-radius: 12px;
            position: relative;
            max-height: calc(100vh - 250px); /* Adjust max-height for panel view */
            overflow: auto;
        }
       
        /* Notification toast */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(34, 197, 94, 0.95);
            color: white;
            padding: 16px 24px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10002;
            display: none;
            animation: toastSlide 0.3s ease;
        }
        .toast.show { display: block; }
        .toast.error { background: rgba(239, 68, 68, 0.95); }
        @keyframes toastSlide {
            from { transform: translateX(400px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        /* Animation selection (from 'broken' file) */
        .animation-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        .animation-option {
            padding: 10px;
            background: rgba(200, 140, 80, 0.05);
            border: 2px solid rgba(200, 140, 80, 0.15);
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
            font-size: 12px;
            color: rgba(200, 140, 80, 0.9);
        }
        .animation-option:hover {
            background: rgba(200, 140, 80, 0.15);
            border-color: rgba(200, 140, 80, 0.4);
            transform: scale(1.05);
        }
        .animation-option.selected {
            background: rgba(200, 140, 80, 0.2);
            border-color: rgba(200, 140, 80, 0.6);
            box-shadow: 0 0 10px rgba(200, 140, 80, 0.2);
        }
        /* Color Palette Controls */
        .color-palette-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(200, 140, 80, 0.15);
        }
        .color-palette-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }
        .color-swatch {
            position: relative;
            height: 60px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(200, 140, 80, 0.2);
            overflow: hidden;
        }
        .color-swatch:hover {
            transform: scale(1.05);
            border-color: rgba(200, 140, 80, 0.5);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }
        .color-swatch.selected {
            border-color: rgba(200, 140, 80, 0.8);
            box-shadow: 0 0 16px rgba(200, 140, 80, 0.4);
        }
        .color-swatch-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            padding: 4px 8px;
            font-size: 10px;
            text-align: center;
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .custom-color-input {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 12px;
        }
        .custom-color-input input[type="color"] {
            width: 50px;
            height: 40px;
            border: 2px solid rgba(200, 140, 80, 0.2);
            border-radius: 8px;
            cursor: pointer;
            background: transparent;
        }
        .custom-color-input input[type="text"] {
            flex: 1;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(200, 140, 80, 0.2);
            border-radius: 8px;
            color: white;
            font-size: 12px;
            font-family: monospace;
        }
        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .slide-module.left {
                width: 70vw;
            }
            .slide-module.right {
                width: 75vw;
            }
        }
        @media (max-width: 768px) {
            .slide-module.left {
                width: 90vw;
            }
            .slide-module.right {
                width: 95vw;
            }
            .module-tab {
                width: 40px;
                height: 120px;
            }
            .module-tab-text {
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="pinstripe left"></div>
    <div class="pinstripe right"></div>
    <div class="bg-particles" id="particles"></div>
    <div class="toast" id="toast">
        <span id="toast-message">Action completed!</span>
    </div>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
        // === GLOBAL STATE ===
        let previewEnabled = false; // Start with preview disabled as panel is closed
        let isFullscreen = false;
        let isEditable = false;
        let currentComponent = null;
        let livePreviewDebounce = null;
        let selectedColorPalette = 'indigo';
        let customColor = '#6366f1';
        let selectedAnimation = 'none';
        // === UTILITY FUNCTIONS ===
        // XSS Protection using DOMPurify
        function sanitizeHTML(html) {
            if (window.DOMPurify) {
                return DOMPurify.sanitize(html, {
                    ALLOWED_TAGS: ['div', 'span', 'p', 'a', 'button', 'input', 'label', 'img', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'nav', 'ul', 'ol', 'li', 'svg', 'path', 'pre', 'code', 'table', 'thead', 'tbody', 'tr', 'td', 'th'],
                    ALLOWED_ATTR: ['class', 'id', 'href', 'src', 'alt', 'type', 'placeholder', 'value', 'style', 'viewBox', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'd', 'xmlns', 'aria-label', 'role', 'aria-current', 'aria-expanded', 'aria-controls', 'contenteditable']
                });
            }
            return html;
        }
        // Show toast notification
        function showToast(message, isError = false) {
            const toast = document.getElementById('toast');
            if (!toast) return;
            const toastMessage = document.getElementById('toast-message');
            toastMessage.textContent = message;
            toast.classList.toggle('error', isError);
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
        // Create animated particles
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            if (!particlesContainer) return;
            const particleCount = 8;
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.width = Math.random() * 10 + 5 + 'px';
                particle.style.height = particle.style.width;
                particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
                particle.style.animationDelay = Math.random() * 5 + 's';
                particlesContainer.appendChild(particle);
            }
        }
        // === RENDER MAIN APP ===
        function renderApp() {
            // This HTML structure is from 'uikit-tim-hf-backup-broken.html'
            document.getElementById('app').innerHTML = `<div class="container">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; width: 600px; pointer-events: none;">
                        <div class="text-center">
                            <h1 id="main-title" class="text-5xl font-black mb-4 header-title" style="color: #f5f5f5;"></h1>
                            <p class="subtitle-text text-gray-400 text-lg tracking-wide">Next-Generation Component Automator</p>
                            <p class="subtitle-text text-gray-500 text-md tracking-wide" style="animation-delay: 2.7s; margin-top: 1rem;">Click the tabs on the edges</p>
                        </div>
                    </div>
                    <div class="module-tab left" id="components-tab" data-module="components">
                        <span class="module-tab-icon">🎨</span>
                        <span class="module-tab-text">Components</span>
                    </div>
                    <div class="module-tab left" id="properties-tab" data-module="properties">
                        <span class="module-tab-icon">⚙️</span>
                        <span class="module-tab-text">Properties</span>
                    </div>
                    <div class="module-tab left" id="code-tab" data-module="code">
                        <span class="module-tab-icon">💻</span>
                        <span class="module-tab-text">Code Output</span>
                    </div>
                    <div class="module-tab right" id="preview-tab" data-module="preview">
                        <span class="module-tab-icon">👁️</span>
                        <span class="module-tab-text">Live Preview</span>
                    </div>
                    <div class="slide-module left" id="components-module">
                        <div class="module-header">
                            <h2 class="text-xl font-semibold text-gray-200 flex items-center gap-3">
                                <span class="text-2xl">🎨</span>
                                <span>Select Component</span>
                            </h2>
                        </div>
                        <div class="module-content">
                            <div class="dropdown" id="component-dropdown">
                                <button id="dropdown-button" class="btn-primary bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-gray-200 font-semibold py-3 px-6 rounded-xl inline-flex items-center shadow-lg transition duration-300 border border-gray-700 hover:border-amber-900/30 w-full justify-center">
                                    <span id="selected-option">Select Component</span>
                                    <svg class="fill-current h-5 w-5 ml-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                                    </svg>
                                </button>
                                <div id="dropdown-content" class="dropdown-content">
                                    <a href="#" data-value="Button">🔘 Button</a>
                                    <a href="#" data-value="Input">✍️ Input</a>
                                    <a href="#" data-value="Card">🎴 Card</a>
                                    <a href="#" data-value="Navbar">📊 Navbar</a>
                                    <a href="#" data-value="Modal">🪟 Modal</a>
                                    <a href="#" data-value="Alert">⚠️ Alert</a>
                                    <a href="#" data-value="Badge">🏷️ Badge</a>
                                    <a href="#" data-value="Breadcrumb">🍞 Breadcrumb</a>
                                    <a href="#" data-value="Tabs">📑 Tabs</a>
                                    <a href="#" data-value="Pagination">📄 Pagination</a>
                                    <a href="#" data-value="Hero">🦸 Hero Section</a>
                                    <a href="#" data-value="Footer">👣 Footer</a>
                                </div>
                            </div>
                            <div class="mt-8 text-center">
                                <button id="generate-code-button" class="btn-primary bg-gradient-to-r from-amber-900/40 to-amber-800/40 hover:from-amber-900/60 hover:to-amber-800/60 text-amber-100 font-semibold py-3 px-8 rounded-lg transition duration-300 border border-amber-900/40 hover:border-amber-800/60">
                                    <span>Generate Code</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="slide-module left" id="properties-module">
                        <div class="module-header">
                            <h2 class="text-xl font-semibold text-gray-200 flex items-center gap-3">
                                <span class="text-2xl">⚙️</span>
                                <span>Component Properties</span>
                            </h2>
                        </div>
                        <div class="module-content">
                            <div id="inputs-container" class="space-y-3 mb-6">
                                </div>
                            <button id="add-input-button" class="mt-6 bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-gray-200 font-semibold py-2 px-5 rounded-lg transition duration-300 border border-gray-700 hover:border-amber-900/30 w-full">
                                + Add Property
                            </button>
                            <div class="animation-section mt-8 pt-6 border-t border-gray-700/50">
                                <h3 class="text-md font-semibold text-gray-300 mb-3">Entry Animation</h3>
                                <div class="animation-grid" id="animation-grid">
                                    <div class="animation-option selected" data-animation="none">None</div>
                                    <div class="animation-option" data-animation="fadeIn">Fade In</div>
                                    <div class="animation-option" data-animation="slideInLeft">Slide Left</div>
                                    <div class="animation-option" data-animation="slideInRight">Slide Right</div>
                                    <div class="animation-option" data-animation="slideInUp">Slide Up</div>
                                    <div class="animation-option" data-animation="bounce">Bounce</div>
                                    <div class="animation-option" data-animation="pulse">Pulse</div>
                                    <div class="animation-option" data-animation="shake">Shake</div>
                                    <div class="animation-option" data-animation="rotate">Rotate</div>
                                    <div class="animation-option" data-animation="scale">Scale</div>
                                </div>
                            </div>
                            <div class="color-palette-section mt-8">
                                <h3 class="text-md font-semibold text-gray-300 mb-2">Color Palette</h3>
                                <p class="text-xs text-gray-400 mb-3">Select or customize colors for your components</p>
                                <div class="color-palette-grid" id="color-palette-grid">
                                    <div class="color-swatch selected" data-palette="indigo" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);">
                                        <div class="color-swatch-label">Indigo</div>
                                    </div>
                                    <div class="color-swatch" data-palette="blue" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
                                        <div class="color-swatch-label">Blue</div>
                                    </div>
                                    <div class="color-swatch" data-palette="green" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                                        <div class="color-swatch-label">Green</div>
                                    </div>
                                    <div class="color-swatch" data-palette="red" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">
                                        <div class="color-swatch-label">Red</div>
                                    </div>
                                    <div class="color-swatch" data-palette="amber" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                                        <div class="color-swatch-label">Amber</div>
                                    </div>
                                    <div class="color-swatch" data-palette="purple" style="background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);">
                                        <div class="color-swatch-label">Purple</div>
                                    </div>
                                    <div class="color-swatch" data-palette="pink" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);">
                                        <div class="color-swatch-label">Pink</div>
                                    </div>
                                    <div class="color-swatch" data-palette="teal" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);">
                                        <div class="color-swatch-label">Teal</div>
                                    </div>
                                </div>
                                <div class="custom-color-input">
                                    <input type="color" id="custom-color-picker" value="#6366f1">
                                    <input type="text" id="custom-color-hex" placeholder="#6366f1" value="#6366f1">
                                    <button id="apply-custom-color" class="bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-gray-200 font-semibold py-2 px-4 rounded-lg transition duration-300 border border-gray-700 hover:border-amber-900/30 text-xs">
                                        Apply
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slide-module left" id="code-module">
                        <div class="module-header">
                            <div class="flex justify-between items-center w-full">
                                <div class="flex items-center gap-3">
                                    <span class="text-2xl">💻</span>
                                    <span class="text-xl font-semibold text-gray-200">Generated Code</span>
                                </div>
                                <div class="flex gap-3">
                                    <div class="platform-dropdown">
                                        <button id="platform-button" class="bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-gray-200 font-semibold py-2 px-4 rounded-lg transition duration-300 border border-gray-700 hover:border-amber-900/30 flex items-center gap-2">
                                            <span>📦 Export</span>
                                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                                            </svg>
                                        </button>
                                        <div id="platform-options" class="platform-options">
                                            <div class="platform-option" data-platform="html">
                                                <div class="platform-icon">🌐</div>
                                                <span>Plain HTML</span>
                                            </div>
                                            <div class="platform-option" data-platform="react">
                                                <div class="platform-icon">⚛️</div>
                                                <span>React / Next.js</span>
                                            </div>
                                            <div class="platform-option" data-platform="vue">
                                                <div class="platform-icon">💚</div>
                                                <span>Vue / Nuxt.js</span>
                                            </div>
                                            <div class="platform-option" data-platform="wordpress">
                                                <div class="platform-icon">📰</div>
                                                <span>WordPress</span>
                                            </div>
                                            <div class="platform-option" data-platform="joomla">
                                                <div class="platform-icon">🎯</div>
                                                <span>Joomla / YooTheme</span>
                                            </div>
                                            <div class="platform-option" data-platform="shopify">
                                                <div class="platform-icon">🛒</div>
                                                <span>Shopify Liquid</span>
                                            </div>
                                            <div class="platform-option" data-platform="webflow">
                                                <div class="platform-icon">🌊</div>
                                                <span>Webflow</span>
                                            </div>
                                            <div class="platform-option" data-platform="angular">
                                                <div class="platform-icon">🅰️</div>
                                                <span>Angular</span>
                                            </div>
                                            <div class="platform-option" data-platform="svelte">
                                                <div class="platform-icon">🔥</div>
                                                <span>Svelte / SvelteKit</span>
                                            </div>
                                        </div>
                                    </div>
                                    <button id="copy-button" class="bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-gray-200 font-semibold py-2 px-4 rounded-lg transition duration-300 border border-gray-700 hover:border-amber-900/30">
                                        Copy
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="module-content">
                            <div id="loading-spinner" class="loader" style="display: none;"></div>
                            <div class="relative">
                                <pre class="glass-dark"><code id="generated-code" class="language-html"></code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="slide-module right" id="preview-module">
                        <div class="module-header">
                            <div class="flex justify-between items-center w-full">
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <span style="font-weight: 600; color: white;">Live Preview</span>
                                    <span id="preview-status" style="font-size: 12px; color: #10b981; display: none;">● Live</span>
                                </div>
                                <div style="display: flex; gap: 8px;">
                                    <button class="icon-btn" id="refresh-preview" title="Refresh">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
                                        </svg>
                                    </button>
                                    <button class="icon-btn" id="toggle-editable" title="Toggle Editable">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="module-content" style="background: rgba(20, 20, 20, 0.5);">
                            <div id="viewer-content" contenteditable="false" style="min-height: calc(100vh - 200px);">
                                <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #9ca3af;">
                                    Click the 'Components' tab to start
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;
        }
        // Animate header text with SVG path tracing
        function animateHeaderText() {
            const title = document.getElementById('main-title');
            if (!title) return;
            const text = 'UIKitV3 Elite';
            const chars = text.split('');
            // Create SVG path for tracing effect
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('class', 'header-svg-container');
            svg.setAttribute('viewBox', '0 0 800 100');
            svg.style.position = 'absolute';
            svg.style.top = '0';
            svg.style.left = '0';
            svg.style.width = '100%';
            svg.style.height = '100%';
            // Create a decorative path that traces under the text
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            const pathData = 'M 50 80 Q 150 60, 250 70 T 450 65 Q 550 68, 650 75 T 750 70';
            path.setAttribute('d', pathData);
            path.setAttribute('class', 'header-path');
            svg.appendChild(path);
            // Clear and create character spans
            title.innerHTML = '';
            title.appendChild(svg);
            chars.forEach((char, index) => {
                const span = document.createElement('span');
                span.className = 'char';
                span.textContent = char === ' ' ? '\u00A0' : char;
                span.style.animationDelay = `${0.1 + index * 0.1}s`;
                title.appendChild(span);
            });
        }
        // === EVENT HANDLERS ===
        function toggleDropdown() {
            document.getElementById('component-dropdown').classList.toggle('show');
        }
        function selectOption(event) {
            event.preventDefault();
            if (event.target.dataset.value) {
                const value = event.target.dataset.value;
                document.getElementById('selected-option').textContent = value;
                document.getElementById('component-dropdown').classList.remove('show');
                document.getElementById('inputs-container').innerHTML = '';
                currentComponent = value;
                addDefaultInputs(value);
                if (previewEnabled) {
                    updateLivePreview();
                }
                // Automatically open properties panel after selecting component
                toggleModule('properties');
            }
        }
        function addDefaultInputs(component) {
            const container = document.getElementById('inputs-container');
            if (!container) return;
            let defaultProps = [];
            switch(component) {
                case 'Button':
                    defaultProps = [
                        {key: 'text', value: 'Click Me'},
                        {key: 'size', value: 'medium'}
                    ];
                    break;
                case 'Input':
                    defaultProps = [
                        {key: 'placeholder', value: 'Enter text...'},
                        {key: 'type', value: 'text'},
                        {key: 'label', value: 'Username'}
                    ];
                    break;
                case 'Card':
                    defaultProps = [
                        {key: 'title', value: 'Amazing Card'},
                        {key: 'content', value: 'This is a beautiful card component with modern styling.'},
                        {key: 'imageUrl', value: 'https://images.unsplash.com/photo-1557821552-17105176677c?w=600&h=400&fit=crop'}
                    ];
                    break;
                case 'Navbar':
                    defaultProps = [
                        {key: 'brand', value: 'MyApp'},
                        {key: 'links', value: 'Home,Features,Pricing,About,Contact'}
                    ];
                    break;
                case 'Modal':
                    defaultProps = [
                        {key: 'title', value: 'Welcome!'},
                        {key: 'body', value: 'This is a beautiful modal dialog with modern design.'},
                        {key: 'footer', value: 'Close,Save Changes'}
                    ];
                    break;
                case 'Alert':
                    defaultProps = [
                        {key: 'text', value: 'This is an important notification!'},
                        {key: 'type', value: 'info'}
                    ];
                    break;
                case 'Badge':
                    defaultProps = [
                        {key: 'text', value: 'New'}
                    ];
                    break;
                case 'Breadcrumb':
                    defaultProps = [
                        {key: 'links', value: 'Home,Products,Electronics,Phones'}
                    ];
                    break;
                case 'Tabs':
                    defaultProps = [
                        {key: 'tabs', value: 'Overview,Features,Specifications,Reviews'},
                        {key: 'active', value: 'Overview'}
                    ];
                    break;
                case 'Pagination':
                    defaultProps = [
                        {key: 'items', value: 'Previous,1,2,3,4,5,Next'}
                    ];
                    break;
                case 'Hero':
                    defaultProps = [
                        {key: 'title', value: 'Welcome to the Future'},
                        {key: 'subtitle', value: 'Build amazing things with modern components'},
                        {key: 'buttonText', value: 'Get Started'}
                    ];
                    break;
                case 'Footer':
                    defaultProps = [
                        {key: 'company', value: 'MyCompany'},
                        {key: 'links', value: 'About,Blog,Careers,Contact'},
                        {key: 'copyright', value: '2024 MyCompany. All rights reserved.'}
                    ];
                    break;
            }
            defaultProps.forEach(prop => {
                addInput(prop.key, prop.value);
            });
        }
        function addInput(key = '', value = '') {
            const container = document.getElementById('inputs-container');
            if (!container) return;
            const inputGroup = document.createElement('div');
            inputGroup.className = 'flex items-center gap-3';
            inputGroup.innerHTML = `
                <input type="text" class="property-key input-field bg-black/50 text-gray-200 p-3 rounded-lg flex-1 border border-gray-700 focus:outline-none focus:ring-1 focus:ring-amber-900/40 focus:border-amber-900/40" placeholder="Property" value="${key}">
                <input type="text" class="property-value input-field bg-black/50 text-gray-200 p-3 rounded-lg flex-[2] border border-gray-700 focus:outline-none focus:ring-1 focus:ring-amber-900/40 focus:border-amber-900/40" placeholder="Value" value="${value}">
                <button class="remove-input-button bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-gray-200 font-semibold py-3 px-4 rounded-lg transition duration-300 border border-gray-700 hover:border-red-900/30">
                    ✕
                </button>
            `;
            container.appendChild(inputGroup);
            // Add event listener to remove button
            inputGroup.querySelector('.remove-input-button').addEventListener('click', removeInput);
            // === FIX: Attach listeners regardless of whether preview is open ===
            // This ensures live refresh works even if panel was closed when prop was added.
            inputGroup.querySelector('.property-key').addEventListener('input', debouncedLivePreview);
            inputGroup.querySelector('.property-value').addEventListener('input', debouncedLivePreview);
        }
        function removeInput(event) {
            event.target.closest('.flex').remove();
            if (previewEnabled) {
                updateLivePreview();
            }
        }
        function debouncedLivePreview() {
            clearTimeout(livePreviewDebounce);
            livePreviewDebounce = setTimeout(() => {
                updateLivePreview();
            }, 500);
        }
        function getSelectedAnimation() {
            const selected = document.querySelector('.animation-option.selected');
            return selected ? selected.dataset.animation : 'none';
        }
        function collectProperties() {
            const container = document.getElementById('inputs-container');
            if (!container) return {};
            const inputs = container.children;
            let properties = {};
            for (let input of inputs) {
                const keyEl = input.querySelector('.property-key');
                const valueEl = input.querySelector('.property-value');
                if (keyEl && valueEl) {
                    const key = keyEl.value;
                    const value = valueEl.value;
                    if (key) {
                        properties[key] = value;
                    }
                }
            }
            return properties;
        }
        function generateCode() {
            const component = document.getElementById('selected-option').textContent;
            if (component === 'Select Component') {
                showToast('Please select a component first.', true);
                return;
            }
            const properties = collectProperties();
            const animation = getSelectedAnimation();
            const codeOutput = document.getElementById('generated-code');
            const loadingSpinner = document.getElementById('loading-spinner');
            const copyButton = document.getElementById('copy-button');
            if (!codeOutput || !loadingSpinner || !copyButton) return;
            codeOutput.textContent = '';
            copyButton.textContent = 'Copy';
            loadingSpinner.style.display = 'block';
            setTimeout(() => {
                let generatedHtml = '';
                try {
                    generatedHtml = generateComponentCode(component, properties, animation);
                    codeOutput.textContent = generatedHtml;
                    if (window.hljs) {
                        try {
                            hljs.highlightElement(codeOutput);
                        } catch (e) {
                            console.error("highlight.js failed:", e);
                        }
                    }
                    showToast('Code generated successfully!');
                    // Automatically open the code panel
                    toggleModule('code');
                } catch (error) {
                    generatedHtml = `<div class="text-red-400">Error generating code: ${error.message}</div>`;
                    codeOutput.textContent = generatedHtml;
                    showToast('Error generating code', true);
                }
                loadingSpinner.style.display = 'none';
                if (previewEnabled) {
                    updateLivePreview();
                }
            }, 800);
        }
        function generateComponentCode(component, props, animation) {
            let html = '';
            switch(component) {
                case 'Button':
                    html = generateButtonCode(props);
                    break;
                case 'Input':
                    html = generateInputCode(props);
                    break;
                case 'Card':
                    html = generateCardCode(props);
                    break;
                case 'Navbar':
                    html = generateNavbarCode(props);
                    break;
                case 'Modal':
                    html = generateModalCode(props);
                    break;
                case 'Alert':
                    html = generateAlertCode(props);
                    break;
                case 'Badge':
                    html = generateBadgeCode(props);
                    break;
                case 'Breadcrumb':
                    html = generateBreadcrumbCode(props);
                    break;
                case 'Tabs':
                    html = generateTabsCode(props);
                    break;
                case 'Pagination':
                    html = generatePaginationCode(props);
                    break;
                case 'Hero':
                    html = generateHeroCode(props);
                    break;
                case 'Footer':
                    html = generateFooterCode(props);
                    break;
                default:
                    html = `<div class="text-red-400">Error: Component generator not found.</div>`;
            }
            // Add animation if selected
            if (animation && animation !== 'none') {
                html = addAnimationToHTML(html, animation);
            }
            return html;
        }
        function addAnimationToHTML(html, animation) {
            // Add animation class to the root element
            const animationStyles = getAnimationStyles(animation);
            // Use a regex that finds the first class attribute and inserts the animation class
            const regex = /class="([^"]*)"/;
            if (regex.test(html)) {
                return html.replace(regex, `class="$1 animate-${animation}" style="${animationStyles}"`);
            } else {
                // If no class attribute, add one
                return html.replace(/<([a-z0-9]+)/i, `<$1 class="animate-${animation}" style="${animationStyles}"`);
            }
        }
        function getAnimationStyles(animation) {
            const animations = {
                fadeIn: 'animation: fadeIn 0.6s ease;',
                slideInLeft: 'animation: slideInLeft 0.6s ease;',
                slideInRight: 'animation: slideInRight 0.6s ease;',
                slideInUp: 'animation: slideInUp 0.6s ease;',
                bounce: 'animation: bounce 0.6s ease;',
                pulse: 'animation: pulse 2s ease infinite;',
                shake: 'animation: shake 0.5s ease;',
                rotate: 'animation: rotate 0.6s ease;',
                scale: 'animation: scale 0.6s ease;'
            };
            return animations[animation] || '';
        }
        // === COMPONENT GENERATORS ===
        function generateButtonCode(props) {
            const colors = getColorValues();
            const text = props.text || 'Button';
            const size = props.size || 'medium';
            let sizeClasses = 'py-3 px-6 text-base';
            switch(size) {
                case 'small': sizeClasses = 'py-2 px-4 text-sm'; break;
                case 'large': sizeClasses = 'py-4 px-8 text-lg'; break;
            }
            return `<button class="bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] hover:opacity-90 ${sizeClasses} text-white font-bold rounded-xl shadow-lg transition duration-300 transform hover:scale-105">
    ${text}
</button>`;
        }
        function generateInputCode(props) {
            const colors = getColorValues();
            const placeholder = props.placeholder || '';
            const type = props.type || 'text';
            const label = props.label || '';
            let labelHtml = '';
            if (label) {
                labelHtml = `<label for="generated-input" class="block text-sm font-semibold text-gray-300 mb-2">
    ${label}
</label>
`;
            }
            return `<div>
    ${labelHtml}<input
        type="${type}"
        id="generated-input"
        class="bg-gray-800 text-white p-3 rounded-xl w-full border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[${colors.from}] transition duration-300"
        placeholder="${placeholder}"
    >
</div>`;
        }
        function generateCardCode(props) {
            const colors = getColorValues();
            const title = props.title || 'Card Title';
            const content = props.content || 'Card content goes here.';
            const imageUrl = props.imageUrl || '';
            let imageHtml = '';
            if (imageUrl) {
                imageHtml = `<img
    class="w-full h-56 object-cover"
    src="${imageUrl}"
    alt="${title}"
    onerror="this.src='https://images.unsplash.com/photo-1557821552-17105176677c?w=600&h=400&fit=crop'"
>
`;
            }
            return `<div class="max-w-sm bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl overflow-hidden border border-[${colors.from}/50] transition duration-300 transform hover:scale-105">
    ${imageHtml}<div class="p-6">
        <h3 class="text-2xl font-bold bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] bg-clip-text text-transparent mb-3">${title}</h3>
        <p class="text-gray-300 leading-relaxed">${content}</p>
    </div>
</div>`;
        }
        function generateNavbarCode(props) {
            const colors = getColorValues();
            const brand = props.brand || 'Brand';
            const links = (props.links || 'Home,About').split(',').map(link => link.trim());
            let linksHtml = links.map(link => `<a href="#" class="text-gray-300 hover:text-white px-4 py-2 rounded-lg transition duration-300 hover:bg-gray-700">${link}</a>`).join('\n ');
            return `<nav class="bg-gradient-to-r from-gray-900 to-gray-800 shadow-2xl border-b border-gray-700">
    <div class="max-w-7xl mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex-shrink-0">
                <span class="text-white font-black text-2xl bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] bg-clip-text text-transparent">${brand}</span>
            </div>
            <div class="hidden md:flex items-center space-x-2">
                ${linksHtml}
            </div>
            <div class="md:hidden">
                <button class="text-gray-400 hover:text-white p-2">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>`;
        }
        function generateModalCode(props) {
            const colors = getColorValues();
            const title = props.title || 'Modal Title';
            const body = props.body || 'Modal body text goes here.';
            const footerButtons = (props.footer || 'Close').split(',').map(btn => btn.trim());
            let buttonsHtml = footerButtons.map((btnText, index) => {
                const isPrimary = (index === footerButtons.length - 1) && footerButtons.length > 1;
                const colorClasses = isPrimary
                    ? `bg-gradient-to-r from-[${colors.to}] to-[${colors.from}] hover:from-[${colors.hover}] hover:to-[${colors.to}]`
                    : 'bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800';
                return `<button class="${colorClasses} text-white font-bold py-2 px-6 rounded-lg transition duration-300 transform hover:scale-105">${btnText}</button>`;
            }).join('\n ');
            return `<div class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl max-w-lg w-full border border-gray-700 overflow-hidden">
        <div class="flex justify-between items-center p-6 border-b border-gray-700 bg-gradient-to-r from-[${colors.from}/30] to-[${colors.to}/30]">
            <h3 class="text-2xl font-bold text-white">${title}</h3>
            <button class="text-gray-400 hover:text-white transition duration-300 transform hover:rotate-90">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div class="p-6">
            <p class="text-gray-300 leading-relaxed">${body}</p>
        </div>
        <div class="flex justify-end items-center p-6 gap-3 border-t border-gray-700 bg-gray-800/50">
            ${buttonsHtml}
        </div>
    </div>
</div>`;
        }
        function generateAlertCode(props) {
            const colors = getColorValues();
            const text = props.text || 'Alert text.';
            const type = props.type || 'info';
            let bgFrom = '#1e40af/80';
            let bgTo = '#1d4ed8/80';
            let borderColor = '#3b82f6';
            let textClass = 'text-blue-200';
            let iconClass = 'text-blue-400';
            let iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>`;
            switch(type) {
                case 'primary':
                    bgFrom = `${colors.from}/80`;
                    bgTo = `${colors.to}/80`;
                    borderColor = colors.from;
                    textClass = 'text-white';
                    iconClass = `text-[${colors.from}]`;
                    break;
                case 'info':
                    bgFrom = '#1e40af/80';
                    bgTo = '#1d4ed8/80';
                    borderColor = '#3b82f6';
                    textClass = 'text-blue-200';
                    iconClass = 'text-blue-400';
                    break;
                case 'success':
                    bgFrom = '#065f46/80';
                    bgTo = '#047857/80';
                    borderColor = '#10b981';
                    textClass = 'text-green-200';
                    iconClass = 'text-green-400';
                    iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>`;
                    break;
                case 'warning':
                    bgFrom = '#92400e/80';
                    bgTo = '#854d0e/80';
                    borderColor = '#f59e0b';
                    textClass = 'text-yellow-200';
                    iconClass = 'text-yellow-400';
                    iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>`;
                    break;
                case 'danger':
                    bgFrom = '#991b1b/80';
                    bgTo = '#b91c1c/80';
                    borderColor = '#ef4444';
                    textClass = 'text-red-200';
                    iconClass = 'text-red-400';
                    iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>`;
                    break;
            }
            const bgClass = `from-[${bgFrom}] to-[${bgTo}] border-[${borderColor}]`;
            return `<div class="flex p-5 rounded-xl bg-gradient-to-r ${bgClass} ${textClass} border-l-4 shadow-lg backdrop-blur-sm" role="alert">
    <span class="flex-shrink-0 ${iconClass}">${iconSvg}</span>
    <div class="ml-4 text-sm font-semibold">${text}</div>
    <button class="ml-auto text-white hover:opacity-75 transition duration-300">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
</div>`;
        }
        function generateBadgeCode(props) {
            const colors = getColorValues();
            const text = props.text || 'Badge';
            return `<span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-bold text-white shadow-lg transition duration-300 transform hover:scale-110 bg-gradient-to-r from-[${colors.from}] to-[${colors.to}]">
    ${text}
</span>`;
        }
        function generateBreadcrumbCode(props) {
            const colors = getColorValues();
            const links = (props.links || 'Home,Page').split(',').map(link => link.trim());
            const separatorSvg = `<svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>`;
            let linksHtml = links.map((link, index) => {
                const isLast = index === links.length - 1;
                if (isLast) {
                    return `<li aria-current="page"><div class="flex items-center gap-2">${index > 0 ? separatorSvg : ''}<span class="text-sm font-semibold text-[${colors.from}]">${link}</span></div></li>`;
                } else {
                    return `<li><div class="flex items-center gap-2">${index > 0 ? separatorSvg : ''}<a href="#" class="text-sm font-medium text-gray-300 hover:text-white transition duration-300">${link}</a></div></li>`;
                }
            }).join('\n ');
            return `<nav class="flex bg-gray-800/50 backdrop-blur-sm px-5 py-3 rounded-xl border border-gray-700" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">${linksHtml}</ol>
</nav>`;
        }
        function generateTabsCode(props) {
            const colors = getColorValues();
            const tabs = (props.tabs || 'Tab 1,Tab 2').split(',').map(tab => tab.trim());
            const activeTab = props.active || tabs[0];
            let tabsHtml = tabs.map(tab => {
                const isActive = tab === activeTab;
                const activeClasses = `text-[${colors.from}] border-[${colors.from}] bg-[${colors.from}/20]`;
                const inactiveClasses = 'text-gray-400 border-transparent hover:text-gray-300 hover:border-gray-500';
                return `<li><a href="#" class="inline-block px-6 py-3 border-b-2 rounded-t-lg transition duration-300 ${isActive ? activeClasses : inactiveClasses}">${tab}</a></li>`;
            }).join('\n ');
            return `<div class="bg-gray-800/50 backdrop-blur-sm rounded-xl border border-gray-700 overflow-hidden">
    <ul class="flex flex-wrap text-sm font-medium text-center border-b border-gray-700">${tabsHtml}</ul>
</div>`;
        }
        function generatePaginationCode(props) {
            const colors = getColorValues();
            const items = (props.items || '1,2,3').split(',').map(item => item.trim());
            let itemsHtml = items.map(item => {
                const isText = isNaN(parseInt(item));
                const classes = isText ? 'px-4' : 'w-10';
                return `<li><a href="#" class="flex items-center justify-center ${classes} h-10 leading-tight text-gray-300 bg-gray-800 border border-gray-700 rounded-lg hover:bg-[${colors.from}/20] hover:text-[${colors.from}] transition duration-300 transform hover:scale-110">${item}</a></li>`;
            }).join('\n ');
            return `<nav aria-label="Page navigation"><ul class="inline-flex items-center gap-2">${itemsHtml}</ul></nav>`;
        }
        function generateHeroCode(props) {
            const colors = getColorValues();
            const title = props.title || 'Welcome to the Future';
            const subtitle = props.subtitle || 'Build amazing things with modern components';
            const buttonText = props.buttonText || 'Get Started';
            return `<div class="relative overflow-hidden bg-gradient-to-br from-[${colors.from}] via-[${colors.to}] to-[${colors.hover}] py-24 px-6">
    <div class="absolute inset-0 bg-black/30"></div>
    <div class="relative max-w-4xl mx-auto text-center">
        <h1 class="text-6xl font-black text-white mb-6 leading-tight">${title}</h1>
        <p class="text-xl text-gray-200 mb-10 max-w-2xl mx-auto">${subtitle}</p>
        <button class="bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] hover:from-[${colors.hover}] hover:to-[${colors.from}] text-white font-bold py-4 px-10 rounded-xl text-lg shadow-2xl transition duration-300 transform hover:scale-105">
            ${buttonText}
        </button>
    </div>
</div>`;
        }
        function generateFooterCode(props) {
            const colors = getColorValues();
            const company = props.company || 'MyCompany';
            const links = (props.links || 'About,Blog,Careers,Contact').split(',').map(link => link.trim());
            const copyright = props.copyright || '2024 MyCompany. All rights reserved.';
            let linksHtml = links.map(link => `<a href="#" class="text-gray-400 hover:text-white transition duration-300">${link}</a>`).join('\n ');
            return `<footer class="bg-gradient-to-br from-gray-900 to-gray-800 border-t border-gray-700">
    <div class="max-w-7xl mx-auto px-6 py-12">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
                <h3 class="text-2xl font-black text-white mb-4 bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] bg-clip-text text-transparent">${company}</h3>
                <p class="text-gray-400">Building the future, one component at a time.</p>
            </div>
            <div>
                <h4 class="text-lg font-bold text-white mb-4">Quick Links</h4>
                <div class="flex flex-col space-y-2">${linksHtml}</div>
            </div>
            <div>
                <h4 class="text-lg font-bold text-white mb-4">Stay Connected</h4>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">${copyright}</div>
    </div>
</footer>`;
        }
        // === PLATFORM EXPORT ===
        function exportToPlatform(platform, html) {
            let exported = '';
            switch(platform) {
                case 'html': exported = html; break;
                case 'react': exported = convertToReact(html); break;
                case 'vue': exported = convertToVue(html); break;
                case 'wordpress': exported = convertToWordPress(html); break;
                case 'joomla': exported = convertToJoomla(html); break;
                case 'shopify': exported = convertToShopify(html); break;
                case 'webflow': exported = html + '\n\n'; break;
                case 'angular': exported = convertToAngular(html); break;
                case 'svelte': exported = convertToSvelte(html); break;
                default: exported = html;
            }
            return exported;
        }
        function convertToReact(html) {
            let react = html
                .replace(/class=/g, 'className=')
                .replace(/for=/g, 'htmlFor=')
                .replace(/stroke-width=/g, 'strokeWidth=')
                .replace(/stroke-linecap=/g, 'strokeLinecap=')
                .replace(/stroke-linejoin=/g, 'strokeLinejoin=')
                .replace(/fill-rule=/g, 'fillRule=')
                .replace(/clip-rule=/g, 'clipRule=');
            return `import React from 'react';\n\nexport default function Component() {\n return (\n ${react}\n );\n}\n\n// For Next.js, this component is ready to use!\n// Import Tailwind CSS in your _app.js or layout.js`;
        }
        function convertToVue(html) {
            return `<template>\n ${html}\n</template>\n\n<` + `script setup>\n// Vue 3 Composition API\n// For Nuxt.js, this component is ready to use!\n</` + `script>\n\n<style scoped>\n/* Add any component-specific styles here */\n</style>`;
        }
        function convertToWordPress(html) {
            return `<?php\n/**\n * Custom Component Block\n */\n?>\n\n<div class="wp-block-custom-component">\n ${html}\n</div>\n\n<?php\n// Add this to your theme's functions.php:\n// Make sure to enqueue Tailwind CSS\n?>`;
        }
        function convertToJoomla(html) {
            return `<?php\n/**\n * @package Joomla.Site\n * @subpackage mod_custom_component\n */\n\ndefined('_JEXEC') or die;\n?>\n\n<div class="mod-custom-component">\n ${html}\n</div>\n\n\n`;
        }
        function convertToShopify(html) {
            return `{% comment %}\n Shopify Liquid Template\n Section: custom-component\n{% endcomment %}\n\n<div class="custom-component-section">\n ${html}\n</div>\n\n{% schema %}\n{\n "name": "Custom Component",\n "settings": [],\n "presets": [{\n "name": "Custom Component"\n }]\n}\n{% endschema %}\n\n`;
        }
        function convertToAngular(html) {
            return `import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-custom-component',\n template: \\\`\n ${html}\n \\\`,\n styles: [\\\`\n /* Component-specific styles */\n \\\`]\n})\nexport class CustomComponent {\n constructor() {}\n}\n\n// Make sure to add Tailwind CSS to your Angular project\n// via angular.json or styles.css`;
        }
        function convertToSvelte(html) {
            return `<` + `script>\n // Svelte component\n // For SvelteKit, this component is ready to use!\n</` + `script>\n\n${html}\n\n<style>\n /* Add any component-specific styles here */\n</style>`;
        }
        // === LIVE PREVIEW ===
        function updateLivePreview() {
            if (!previewEnabled) return;
            const component = document.getElementById('selected-option').textContent;
            const viewerContent = document.getElementById('viewer-content');
            if (component === 'Select Component') {
                viewerContent.innerHTML = `
                    <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #9ca3af;">
                        Select a component to see live preview
                    </div>
                `;
                return;
            }
            const properties = collectProperties();
            const animation = getSelectedAnimation();
            const html = generateComponentCode(component, properties, animation);
            const sanitized = sanitizeHTML(html);
           
            viewerContent.innerHTML = sanitized;
        }
        function toggleEditable() {
            isEditable = !isEditable;
            const viewerContent = document.getElementById('viewer-content');
            if (!viewerContent) return;
            viewerContent.contentEditable = isEditable;
            // Add a visual indicator for editable mode
            viewerContent.style.outline = isEditable ? '2px dashed rgba(200, 140, 80, 0.5)' : 'none';
            viewerContent.style.boxShadow = isEditable ? 'inset 0 0 20px rgba(0,0,0,0.3)' : 'none';
            if (isEditable) {
                showToast('Edit mode enabled');
            } else {
                showToast('Edit mode disabled');
            }
        }
        function copyToClipboard() {
            const codeEl = document.getElementById('generated-code');
            if (!codeEl) return;
            const code = codeEl.textContent;
            const copyButton = document.getElementById('copy-button');
            if (!code || code.includes('Generated code will appear here')) {
                showToast('No code to copy', true);
                return;
            }
            navigator.clipboard.writeText(code).then(() => {
                if (copyButton) copyButton.textContent = 'Copied!';
                showToast('Code copied to clipboard!');
                setTimeout(() => {
                    if (copyButton) copyButton.textContent = 'Copy';
                }, 2000);
            }).catch(err => {
                console.error('Failed to copy:', err);
                showToast('Failed to copy code', true);
            });
        }
       
        // === NEW MODULE TOGGLE FUNCTIONALITY ===
       
        /**
         * Toggles a slide-out module.
         * If a module on the left is opened, all other left modules are closed.
         * The right module is independent.
         */
        function toggleModule(moduleName) {
            const module = document.getElementById(`${moduleName}-module`);
            if (!module) {
                console.error('Module not found:', `${moduleName}-module`);
                return;
            }
            const isLeft = module.classList.contains('left');
            const side = isLeft ? 'left' : 'right';
            const wasOpen = module.classList.contains('open');
            const statusEl = document.getElementById('preview-status');
            // 1. Get all modules on the same side
            const sideModules = document.querySelectorAll(`.slide-module.${side}`);
            // 2. If it was already open, just close it.
            if (wasOpen) {
                module.classList.remove('open');
                if (moduleName === 'preview') {
                    previewEnabled = false;
                    if (statusEl) statusEl.style.display = 'none';
                }
            } else {
                // 3. If it was closed, close all others on its side...
                sideModules.forEach(mod => {
                    mod.classList.remove('open');
                });
                // ...and then open this one.
                module.classList.add('open');
                if (moduleName === 'preview') {
                    previewEnabled = true;
                    if (statusEl) statusEl.style.display = 'inline';
                    updateLivePreview(); // Refresh preview when opening
                }
            }
        }
        function attachModuleListeners() {
            // Module tab click handlers
            const tabs = document.querySelectorAll('.module-tab');
            tabs.forEach(tab => {
                const moduleName = tab.dataset.module;
                tab.addEventListener('click', function(e) {
                    e.stopPropagation();
                    toggleModule(moduleName);
                });
            });
        }
        // === ATTACH EVENT LISTENERS (DOM-CONTENT-LOADED SAFE) ===
        function attachGlobalEventListeners() {
            const dropdownButton = document.getElementById('dropdown-button');
            const dropdownContent = document.getElementById('dropdown-content');
            if (dropdownButton) dropdownButton.addEventListener('click', toggleDropdown);
            if (dropdownContent) dropdownContent.addEventListener('click', selectOption);
            document.addEventListener('click', (e) => {
                const dropdown = document.getElementById('component-dropdown');
                if (dropdown && !dropdown.contains(e.target)) {
                    dropdown.classList.remove('show');
                }
            });
            const addInputBtn = document.getElementById('add-input-button');
            if (addInputBtn) addInputBtn.addEventListener('click', () => addInput());
            const genCodeBtn = document.getElementById('generate-code-button');
            if (genCodeBtn) genCodeBtn.addEventListener('click', generateCode);
            const copyBtn = document.getElementById('copy-button');
            if (copyBtn) copyBtn.addEventListener('click', copyToClipboard);
            const toggleEditBtn = document.getElementById('toggle-editable');
            if (toggleEditBtn) toggleEditBtn.addEventListener('click', toggleEditable);
            const refreshBtn = document.getElementById('refresh-preview');
            if (refreshBtn) refreshBtn.addEventListener('click', updateLivePreview);
            // Animation selection
            document.querySelectorAll('.animation-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.animation-option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    this.classList.add('selected');
                    selectedAnimation = this.dataset.animation; // Update global state
                    if (previewEnabled) {
                        updateLivePreview();
                    }
                });
            });
            // Platform export dropdown
            const platformButton = document.getElementById('platform-button');
            const platformOptions = document.getElementById('platform-options');
            if(platformButton) {
                platformButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    if(platformOptions) platformOptions.classList.toggle('show');
                });
            }
            document.addEventListener('click', (e) => {
                if (platformButton && !platformButton.contains(e.target) && platformOptions && !platformOptions.contains(e.target)) {
                    platformOptions.classList.remove('show');
                }
            });
            document.querySelectorAll('.platform-option').forEach(option => {
                option.addEventListener('click', function() {
                    const platform = this.dataset.platform;
                    const codeEl = document.getElementById('generated-code');
                    if (!codeEl) return;
                    const currentCode = codeEl.textContent;
                    if (!currentCode || currentCode.includes('Generated code will appear here')) {
                        showToast('Generate code first before exporting', true);
                        return;
                    }
                    const exported = exportToPlatform(platform, currentCode);
                    codeEl.textContent = exported;
                    if (window.hljs) {
                        try {
                            hljs.highlightElement(codeEl);
                        } catch (e) {
                            console.error("highlight.js failed:", e);
                        }
                    }
                    if (platformOptions) platformOptions.classList.remove('show');
                    showToast(`Exported to ${this.textContent.trim()}`);
                });
            });
        }
        // === COLOR PALETTE FUNCTIONALITY ===
        function initColorPalette() {
            // Color swatch selection
            document.querySelectorAll('.color-swatch').forEach(swatch => {
                swatch.addEventListener('click', function() {
                    document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected'));
                    this.classList.add('selected');
                    selectedColorPalette = this.dataset.palette;
                    if (previewEnabled) updateLivePreview();
                });
            });
            // Custom color picker
            const colorPicker = document.getElementById('custom-color-picker');
            const colorHex = document.getElementById('custom-color-hex');
            const applyBtn = document.getElementById('apply-custom-color');
            if (colorPicker && colorHex) {
                colorPicker.addEventListener('input', (e) => {
                    colorHex.value = e.target.value;
                });
                colorHex.addEventListener('input', (e) => {
                    const hex = e.target.value;
                    if (/^#[0-9A-F]{6}$/i.test(hex)) {
                        colorPicker.value = hex;
                    }
                });
                applyBtn.addEventListener('click', () => {
                    customColor = colorPicker.value;
                    selectedColorPalette = 'custom';
                    document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected'));
                    if (previewEnabled) updateLivePreview();
                    showToast('Custom color applied!');
                });
            }
        }
        // Get color values based on selected palette
        function getColorValues() {
            const palettes = {
                indigo: { from: '#6366f1', to: '#8b5cf6', hover: '#4f46e5' },
                blue: { from: '#3b82f6', to: '#2563eb', hover: '#1d4ed8' },
                green: { from: '#10b981', to: '#059669', hover: '#047857' },
                red: { from: '#ef4444', to: '#dc2626', hover: '#b91c1c' },
                amber: { from: '#f59e0b', to: '#d97706', hover: '#b45309' },
                purple: { from: '#a855f7', to: '#9333ea', hover: '#7e22ce' },
                pink: { from: '#ec4899', to: '#db2777', hover: '#be185d' },
                teal: { from: '#14b8a6', to: '#0d9488', hover: '#0f766e' },
                custom: { from: customColor, to: customColor, hover: customColor }
            };
            return palettes[selectedColorPalette] || palettes.indigo;
        }
        // === INITIALIZATION ===
        document.addEventListener('DOMContentLoaded', () => {
            try {
                renderApp();
                animateHeaderText();
                attachGlobalEventListeners(); // Attach event listeners
                attachModuleListeners(); // Attach the module tab listeners
                initColorPalette();
                createParticles();
                // Open the components panel by default to guide the user
                setTimeout(() => {
                    toggleModule('components');
                }, 500);
            } catch (e) {
                console.error('❌ App initialization failed:', e);
                document.getElementById('app').innerHTML = '<div style="color: white; padding: 50px;">Error: ' + e.message + '</div>';
            }
        });
    </script>
</body>
</html>