@innovastudio/contentbox 1.6.175 → 1.6.177

package/public/contentbox/contentbox.esm.js

@@ -115892,6 +115892,10 @@ class CodeChat$1 {
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
+
+    // Check if demo mode is enabled
+    this.isDemoMode = this.builder.demoMode || false;
+    this.demoConversations = this.builder.demoConversations || [];
     const out = s => this.out(s);
 
     // Load saved settings or use defaults
@@ -115901,6 +115905,9 @@ class CodeChat$1 {
       this.systemModel = this.builder.systemModel;
     }
     this.codeModels = [{
+      id: 'anthropic/claude-opus-4.5',
+      label: 'Claude Opus 4.5'
+    }, {
       id: 'google/gemini-3-pro-preview',
       label: 'Google Gemini 3 Pro Preview'
     }, {
@@ -116228,6 +116235,12 @@ class CodeChat$1 {
       // backward
       this.imageModels = this.builder.imageGenerationModels;
     }
+    let inputPlaceholderText;
+    if (this.builder.editor) {
+      inputPlaceholderText = out('e.g., Create a landing page for a creative studio');
+    } else {
+      inputPlaceholderText = out('e.g., Create an article about a productive home workspace');
+    }
     let html = `
         <style>
         #chatPanel {
@@ -116559,10 +116572,12 @@ class CodeChat$1 {
             box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.11);
             z-index: 10005;
             display: none;
+            pointer-events: auto; /* Reset cursor to default to prevent it from getting stuck */
         }
 
         #settingsDialog.open {
             display: block;
+            pointer-events: auto; /* Reset cursor to default to prevent it from getting stuck */
         }
 
         #settingsDialog .settings-header {
@@ -116823,9 +116838,118 @@ class CodeChat$1 {
         body.dark #chatPanel .copy-button:hover {
             background: rgba(255, 255, 255, 0.2);
         }
+
+
+        /* Quick Image Size Button */
+        #chatPanel .quick-image-size-button {
+            width: 48px;
+            height: 48px;
+            border: none;
+            border-radius: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #chatPanel .quick-image-size-button:hover:not(:disabled) {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        #chatPanel .quick-image-size-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        body.dark #chatPanel .quick-image-size-button {
+            background: #484848;
+        }
+
+        body.dark #chatPanel .quick-image-size-button:hover:not(:disabled) {
+            background: #4c4c4c;
+        }
+
+        /* Image Size Popover */
+        #chatPanel .image-size-popover {
+            position: absolute;
+            bottom: 72px;
+            right: 68px;
+            background: white;
+            border: 1px solid #e5e5e5;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 10006;
+            min-width: 160px;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+
+        body.dark #chatPanel .image-size-popover {
+            background: #3a3a3a;
+            border-color: #555;
+        }
+
+        #chatPanel .size-options {
+            padding: 8px;
+        }
+
+        #chatPanel .size-option {
+            display: flex;
+            align-items: center;
+            padding: 10px 12px;
+            cursor: pointer;
+            border-radius: 6px;
+            transition: background 0.2s;
+            font-size: 14px;
+        }
+        #chatPanel .size-option label,
+        #chatPanel .size-option input {
+            cursor: pointer;
+        }
+
+        #chatPanel .size-option:hover {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        #chatPanel .size-option.selected {
+            background: rgba(62, 147, 247, 0.1);
+            font-weight: 500;
+        }
+
+        #chatPanel .size-option input[type="radio"] {
+            margin-right: 8px;
+        }
+
+        body.dark #chatPanel .size-option:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        body.dark #chatPanel .size-option.selected {
+            background: rgba(62, 147, 247, 0.2);
+        }
+
+        #chatPanel .image-size-popover::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        #chatPanel .image-size-popover::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        #chatPanel .image-size-popover::-webkit-scrollbar-thumb {
+            background: #e5e5e5;
+            border-radius: 3px;
+        }
+
+        body.dark #chatPanel .image-size-popover::-webkit-scrollbar-thumb {
+            background: #555;
+        }        
         </style>
         <div 
-            class="hidden" 
+            class="hidden keep-selection" 
             id="chatPanel"
             role="dialog"
             aria-labelledby="chatPanelTitle"
@@ -116875,10 +116999,24 @@ class CodeChat$1 {
                     <label for="promptInput" class="sr-only">${out('Message input')}</label>
                     <textarea 
                         id="promptInput" 
-                        placeholder="${out('e.g., Create a landing page and explain best practices for hero sections')}"
+                        placeholder="${inputPlaceholderText}"
                         rows="1"
                         aria-label="${out('Type your message')}"
                     ></textarea>
+
+                    <!-- NEW: Quick image size button -->
+                    <button 
+                        id="quickImageSizeButton"
+                        type="button"
+                        class="quick-image-size-button"
+                        aria-label="${out('Select image size')}"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        style="display: none;"
+                    >
+                        □
+                    </button>
+
                     <button 
                         id="sendButton"
                         type="button"
@@ -116892,15 +117030,30 @@ class CodeChat$1 {
                         </svg>
                     </button>
                 </div>
+
+                <!-- NEW: Size selection popover -->
+                <div 
+                    id="imageSizePopover" 
+                    class="image-size-popover"
+                    role="menu"
+                    aria-hidden="true"
+                    style="display: none;"
+                >
+                    <div class="size-options" id="sizeOptionsContainer">
+                        <!-- Options populated dynamically -->
+                    </div>
+                </div>
+
             </div>
         </div>
 
         <!-- Settings Dialog Overlay -->
-        <div id="settingsOverlay" aria-hidden="true"></div>
+        <div id="settingsOverlay" class="keep-selection" aria-hidden="true"></div>
 
         <!-- Settings Dialog -->
         <div 
             id="settingsDialog"
+            class="keep-selection"
             role="dialog"
             aria-labelledby="settingsTitle"
             aria-modal="true"
@@ -117034,9 +117187,16 @@ class CodeChat$1 {
     this.chatModelSelect.value = this.settings.chatModel;
     this.imageModelSelect.value = this.settings.imageModel;
     this.imageSizeSelect.value = this.settings.imageSize;
-    let isChatVisible = localStorage.getItem('chatPanelVisible') !== 'false';
+
+    // Check saved state - default to closed if never set
+    const savedState = localStorage.getItem('chatPanelVisible');
+    let isChatVisible = savedState === 'true'; // Only open if explicitly set to 'true'
     if (!isChatVisible) {
       modal.classList.add('hidden');
+      modal.setAttribute('aria-hidden', 'true');
+    } else {
+      modal.classList.remove('hidden');
+      modal.removeAttribute('aria-hidden');
     }
     const btnClose = modal.querySelector('.close-button');
     btnClose.addEventListener('click', () => {
@@ -117119,7 +117279,45 @@ class CodeChat$1 {
     this.closeChatButton = closeChatButton;
     this.sendButton = sendButton;
     this.messagesContainer = messagesContainer;
+
+    // NEW: Quick image size button elements
+    this.quickImageSizeButton = builderStuff.querySelector('#quickImageSizeButton');
+    this.imageSizePopover = builderStuff.querySelector('#imageSizePopover');
+    this.sizeOptionsContainer = builderStuff.querySelector('#sizeOptionsContainer');
+
+    // Quick Image Size Button Handlers
+    this.quickImageSizeButton.addEventListener('click', e => {
+      e.stopPropagation();
+      this.toggleImageSizePopover();
+    });
+
+    // Close popover when clicking outside
+    document.addEventListener('click', e => {
+      if (!this.imageSizePopover.contains(e.target) && !this.quickImageSizeButton.contains(e.target)) {
+        this.closeImageSizePopover();
+      }
+    });
+
+    // Close popover on Escape
+    this.imageSizePopover.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        this.closeImageSizePopover();
+        this.quickImageSizeButton.focus();
+      }
+    });
     this.renderImageOptions();
+    if (this.demoConversations) {
+      this.loadConversations();
+    }
+    if (this.isDemoMode) {
+      this.addDemoBanner();
+
+      // Disable input in demo mode
+      this.promptInput.disabled = true;
+      // this.promptInput.placeholder = out('Demo mode - Chat is read-only');
+      this.sendButton.disabled = true;
+      this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
   }
   renderImageOptions() {
     const out = s => this.out(s);
@@ -117226,6 +117424,9 @@ class CodeChat$1 {
     // Trigger initial render with defaults
     modelSelect.value = defaultModelId;
     renderSizes(defaultModelId, false);
+
+    // NEW: Initialize quick size button
+    this.updateQuickImageSizeButton();
   }
 
   /**
@@ -117291,6 +117492,9 @@ class CodeChat$1 {
     this.settingsOverlay.setAttribute('aria-hidden', 'true');
     this.settingsDialog.classList.remove('open');
     this.settingsDialog.setAttribute('aria-hidden', 'true');
+
+    // Reset cursor to default to prevent it from getting stuck
+    document.body.style.cursor = '';
     if (this.settingsLastFocusedElement) {
       this.settingsLastFocusedElement.focus();
     }
@@ -117302,6 +117506,9 @@ class CodeChat$1 {
     this.settings.imageModel = this.imageModelSelect.value;
     this.settings.imageSize = this.imageSizeSelect.value;
     this.saveSettingsToStorage();
+
+    // NEW: Update quick button when settings change
+    this.updateQuickImageSizeButton();
     this.closeSettings();
   }
 
@@ -117335,6 +117542,106 @@ Your job:
 3. Determine what each image should depict based on surrounding content and context
 4. Create detailed image generation prompts for each image
 
+📸 EDITORIAL STYLE GUIDE - Apply to all image prompts:
+
+- Default aesthetic: Minimalist magazine-style (Kinfolk, Cereal, Vogue Living)
+- Composition: Clean, lots of negative space, well-balanced
+
+
+CREATIVE PROMPT ENHANCEMENT:
+When constructing image prompts, intelligently enrich basic descriptions using these proven cinematic stylers:
+
+1. **Golden Hour Cinematic**
+   "Warm sunlight, golden-hour lighting. Low contrast with lifted shadows, ethereal glow throughout. Overall vibe: relaxed, coastal, sun-kissed, carefree, West Coast lifestyle, evoking warmth and endless summer."
+   → Best for: Landscapes, architecture, outdoor scenes, lifestyle content
+
+2. **Morning Halo Effect**
+   "The lighting is soft, morning sunlight coming, creating a 'halo' effect. Vibrant cinematic shot"
+   → Best for: Portraits, people in action, outdoor activities
+
+3. **Natural Forest Serenity**
+   "in a lush, green forest. The sunlight should be filtering through the trees, creating a serene and natural atmosphere"
+   → Best for: Nature scenes, outdoor activities, wellness content
+
+4. **Coastal Summer Drama**
+   "on a dramatic windswept coastline. The overall atmosphere is cheerful, breezy, and full of summer warmth"
+   → Best for: Beach/coastal scenes, adventure, travel content
+
+5. **Modern Interior Elegance**
+   "illuminated by warm, natural lighting. The background features a softly blurred modern interior with subtle lights and cool tones, adding depth without distraction"
+   → Best for: Indoor portraits, product shots, professional/business settings
+
+ENHANCEMENT STRATEGY:
+- Analyze the subject matter and context from the HTML/request
+- Select the most appropriate styler that matches the scene type
+- Check if user has specified lighting/time → DO NOT apply contradicting styler elements
+  * Example: User says "daylight" → DO NOT add "golden-hour" or "sunset"
+- Aim for creative elevation while maintaining the core subject integrity
+- Blend the styler naturally into the prompt (adapt grammar, pronouns, context)
+- IF user is vague (no specific lighting/mood) → Apply full styler enhancement
+- User's explicit details ALWAYS take precedence over styler recommendations
+` +
+      /*
+      ENHANCEMENT STRATEGY:
+      - Analyze the subject matter and context from the HTML/request
+      - Select the most appropriate styler that matches the scene type
+      - Blend the styler naturally into the prompt (adapt grammar, pronouns, context)
+      - If the subject already has specific lighting/atmosphere details, complement rather than override
+      - Aim for creative elevation while maintaining the core subject integrity
+      */
+      `
+Examples of enriched prompts:
+- Basic: "a house with mountain view" 
+  → Enhanced: "a house with beautiful mountain view. Warm sunlight, golden-hour lighting. Low contrast with lifted shadows, ethereal glow throughout. Overall vibe: relaxed, coastal, sun-kissed, carefree, West Coast lifestyle, evoking warmth and endless summer."
+  
+- Basic: "person hiking"
+  → Enhanced: "a person hiking in nature. The lighting is soft, morning sunlight coming, creating a 'halo' effect. Vibrant cinematic shot"
+  
+- Basic: "woman reading"
+  → Enhanced: "a woman sitting comfortably and reading. Her face is illuminated by warm, natural lighting. The background features a softly blurred modern interior with subtle lights and cool tones, adding depth without distraction"
+  
+- Already detailed: "dramatic headshot with bokeh and rim lighting"
+  → No enhancement needed (preserve user's vision)
+
+
+CONTEXT-SPECIFIC GUIDELINES:
+
+Interior/Indoor scenes:
+  - Lighting: Soft natural window light
+  - Backdrop: white walls or neutral tones
+  - Mood: Calm, serene, inviting, uncluttered
+  - Reference: "Kinfolk interior photography"
+
+People/Portraits/Activities:
+  - Lighting: Natural diffused light, flattering and soft
+  - Styling: Effortlessly elegant, contemporary casual
+  - Pose: Candid, authentic moments, relaxed
+  - Reference: "modern lifestyle editorial photography"
+
+Products/Objects:
+  - Lighting: Clean studio or soft natural light
+  - Backdrop: Minimalist neutral, lots of breathing room
+  - Mood: Refined simplicity, premium feel
+  - Reference: "high-end editorial product photography"
+
+Food/Culinary:
+  - Lighting: Soft daylight, gentle overhead or 45° angle
+  - Styling: Minimal props, artisan ceramics, linen
+  - Mood: Fresh, appetizing, rustic-modern
+  - Reference: "Bon Appétit editorial food styling"
+
+Outdoor/Landscape:
+  - Composition: Serene, contemplative, minimal
+  - Mood: Calm atmosphere, breathing space, lifted brightness
+  - Colors: Vibrant cinematic shot.
+  - Reference: "editorial travel photography"
+
+CRITICAL RULES:
+1. If user specifies a style (cinematic, vintage, vibrant, etc.) → RESPECT IT, only add quality markers
+2. If user is vague → APPLY FULL EDITORIAL TREATMENT based on subject category
+3. Always maintain cohesive aesthetic across all images
+4. Every prompt should feel like it belongs in a high-end lifestyle magazine
+
 Respond with a JSON array with one entry per image to generate:
 [
   {
@@ -117445,6 +117752,11 @@ Response: [
    */
   async sendMessage() {
     const out = s => this.out(s);
+
+    // Prevent sending messages in demo mode
+    if (this.isDemoMode) {
+      return;
+    }
     const prompt = this.promptInput.value.trim();
     if (!prompt) return;
     this.addMessage('user', prompt);
@@ -117512,14 +117824,42 @@ Response: [
           } else if (result.type === 'image') {
             if (result.imageDetails && result.imageDetails.length > 1) {
               this.addMessage('assistant', `✓ Generated ${result.imageDetails.length} images successfully`);
+              // this.addMessage('assistant', `✓ ${out('Generated {count} images successfully').replace('{count}', result.imageDetails.length)}`);
               this.addImagePreview(result.imageDetails);
             } else {
-              this.addMessage('assistant', '✓ Generated image successfully');
+              this.addMessage('assistant', '✓ Image generated successfully');
+              // this.addMessage('assistant', `✓ ${out('Image generated successfully')}`);
               if (result.generatedUrls && result.generatedUrls[0]) {
                 this.addImagePreview([{
                   url: result.generatedUrls[0],
                   context: result.description
                 }]);
+
+                // If there is a selected image, replace with the new image 
+                const url = result.generatedUrls[0];
+                if (this.builder.editor) {
+                  // ContentBox
+                  const img = this.builder.editor.activeImage;
+                  if (img) {
+                    this.builder.editor.saveForUndo();
+                    img.addEventListener('load', () => {
+                      this.builder.editor.element.image.repositionImageTool();
+                      this.builder.editor.elmTool.repositionElementTool();
+                    });
+                    this.builder.editor.activeImage.setAttribute('src', url);
+                  }
+                } else {
+                  // ContentBuilder
+                  const img = this.builder.activeImage;
+                  if (img) {
+                    this.builder.uo.saveForUndo();
+                    img.addEventListener('load', () => {
+                      this.builder.element.image.repositionImageTool();
+                      this.builder.elmTool.repositionElementTool();
+                    });
+                    this.builder.activeImage.setAttribute('src', url);
+                  }
+                }
               }
             }
           }
@@ -117573,15 +117913,16 @@ Response: [
         `;
     images.forEach(img => {
       previewHTML += `
-                <div style="border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.05);">
-                    <img src="${img.url}" alt="${img.context || 'Generated image'}" style="width: 100%; height: 150px; object-fit: cover;" />
+                <div style="border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.05);">
+                    <img src="${img.url}" alt="${img.context || 'Generated image'}" style="width: 100%;" />
                     <div style="padding: 8px; font-size: 11px; opacity: 0.8;">
                         ${img.context || ''}
                         <a href="${img.url}" target="_blank" rel="noopener noreferrer" style="display: block; margin-top: 4px;">View</a>
                     </div>
                 </div>
-            `;
+            `; // height: 150px; object-fit: cover;
     });
+
     previewHTML += '</div>';
     previewDiv.innerHTML = previewHTML;
     this.messagesContainer.appendChild(previewDiv);
@@ -117602,6 +117943,32 @@ Response: [
 
       // Check if image generation is enabled
       const imageGenEnabled = this.builder.generateMediaUrl_Fal ? true : false;
+
+      // Build context about previously generated images
+      let imageHistoryContext = '';
+      const previousImageResults = this.conversationResults.filter(r => r.type === 'image' && r.generatedUrls && r.generatedUrls.length > 0);
+      if (previousImageResults.length > 0) {
+        imageHistoryContext = '\n\n=== PREVIOUSLY GENERATED IMAGES IN THIS CONVERSATION ===\n';
+        imageHistoryContext += 'The following images were generated earlier in this conversation:\n\n';
+        previousImageResults.forEach((result, idx) => {
+          if (result.imageDetails && result.imageDetails.length > 0) {
+            result.imageDetails.forEach((img, imgIdx) => {
+              imageHistoryContext += `Generated Image ${idx + 1}.${imgIdx + 1}:\n`;
+              imageHistoryContext += `  URL: ${img.url}\n`;
+              imageHistoryContext += `  Context: ${img.context}\n`;
+              imageHistoryContext += `  Description: ${result.description}\n\n`;
+            });
+          } else {
+            result.generatedUrls.forEach((url, urlIdx) => {
+              imageHistoryContext += `Generated Image ${idx + 1}.${urlIdx + 1}:\n`;
+              imageHistoryContext += `  URL: ${url}\n`;
+              imageHistoryContext += `  Description: ${result.description}\n\n`;
+            });
+          }
+        });
+        imageHistoryContext += '⚠️ IMPORTANT: If the user refers to "the generated image", "this image", "the image", or "previous image", they are referring to these images above.\n';
+        imageHistoryContext += '⚠️ DO NOT create a new image task. Instead, create a CODE task that uses these existing URLs.\n\n';
+      }
       const classificationPrompt = `Analyze this user message and break it down into tasks.
 
 CURRENT HTML CONTEXT (use this to understand the page structure):
@@ -117609,11 +117976,19 @@ CURRENT HTML CONTEXT (use this to understand the page structure):
 ${this.builder.html()}
 \`\`\`            
 
+${imageHistoryContext}
+
 IMPORTANT: This is a WEB BUILDER tool with chat capabilities. Valid requests are:
 - Creating/editing/removing HTML content (code tasks)
 ${imageGenEnabled ? '- Generating images for the webpage (image tasks)' : ''}
 - Asking questions or having conversations (chat tasks) - THIS CAN BE ABOUT ANYTHING
 
+CRITICAL CONTEXT RULE:
+- In a web builder, "create an article/blog/story/content" means CREATE A WEBPAGE (CODE task)
+- Only use CHAT task for questions, explanations, or requests for advice
+- If user says "create", "write", "make", "build" followed by content → CODE task
+- If user says "explain", "how do I", "what is", "tell me about" → CHAT task
+
 ${imageGenEnabled ? '' : `
 ⚠️ AI IMAGE GENERATION IS CURRENTLY DISABLED
 - If user requests AI image generation/creation, explain that it's disabled
@@ -117683,6 +118058,18 @@ IMAGE TASK RULES:
 - IMPORTANT: Look at the HTML context to understand if multiple images are involved
 - If the target section has multiple images, indicate this in targetElement (e.g., "all 3 images in Culinary Delights section")
 - Image tasks should come BEFORE code tasks that depend on them
+
+- CRITICAL: DO NOT create image task for these phrases (they mean REUSE existing):
+  * "use the generated image" / "use the image"
+  * "use this image" / "use existing image" 
+  * "with the generated image" / "with this image"
+  * "with the previous image" / "with the last image"
+  * "using the image I just created/generated"
+  * Any reference to a PREVIOUS image from conversation history
+- Decision logic:
+  * "Generate a new image of X" → CREATE image task (new generation)
+  * "Create article using the generated image" → NO image task (reuse existing)
+
 ` : ''}
 
 Examples:
@@ -117720,6 +118107,17 @@ Input: "Create a landing page about wood furniture workshop"
 Output: {"is_valid": true, "tasks": [{"type": "code", "description": "Create a landing page for a wood furniture workshop", "order": 1}], "is_mixed": false}
 Note: No image task created because user did not explicitly request AI image generation
 
+Input: "Create an inspiring article and use the generated image"
+Output: {"is_valid": true, "tasks": [{"type": "code", "description": "Create article using previously generated image from conversation history", "order": 1}], "is_mixed": false}
+Note: No image task because user wants to REUSE existing image
+
+Input: "Write a blog post about productivity and use this image"  
+Output: {"is_valid": true, "tasks": [{"type": "code", "description": "Create blog post using previously generated image", "order": 1}], "is_mixed": false}
+
+Input: "Generate another mountain image and create a landing page"
+Output: {"tasks": [{"type": "image", "description": "Generate new mountain image", "imagePrompt": "...", "order": 1}, {"type": "code", "description": "Create landing page with new image", "order": 2}], "is_mixed": true}
+Note: "another" and "generate" indicate NEW image generation
+
 ` : `
 Input: "Generate an AI image of a mountain"
 Output: {"is_valid": false, "reason": "AI image generation is currently disabled.", "tasks": [], "is_mixed": false}
@@ -117803,7 +118201,9 @@ Output: {"is_valid": false, "reason": "AI image generation is currently disabled
       if (imageTasksFromThisRequest.length > 0) {
         hasGeneratedImages = true;
         imageContext = '\n\n=== GENERATED IMAGE URLS (USE THESE FOR YOUR TASK) ===\n';
-        imageTasksFromThisRequest.forEach(imageTask => {
+
+        // ⭐ REVERSE to show most recent first
+        imageTasksFromThisRequest.reverse().forEach(imageTask => {
           if (imageTask.imageDetails && imageTask.imageDetails.length > 0) {
             // Multiple images with context
             imageTask.imageDetails.forEach((img, idx) => {
@@ -117818,7 +118218,8 @@ Output: {"is_valid": false, "reason": "AI image generation is currently disabled
             });
           }
         });
-        imageContext += '\n⚠️ IMPORTANT: Use these generated image URLs (not placehold.co or other sources) for the specific images mentioned in your task.\n';
+        imageContext += '\n⚠️ IMPORTANT: Use the FIRST image URL listed above (most recent) unless the task specifically asks for a different image.\n';
+        imageContext += '⚠️ The first image is the MOST RECENTLY GENERATED and should be used by default.\n';
         imageContext += '⚠️ Your task description specifies WHICH images to update - follow it precisely.\n';
       }
 
@@ -117915,6 +118316,10 @@ ${this.builder.html()}
 TASK: ${task.description}
 
 IMPORTANT: Follow the Best Practices in Content framework.
+${this.builder.editor ? `CRITICAL: This project uses the Content.css and Box framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.` : `CRITICAL: This project uses the Content.css framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.`}
+For flexibility, you can use inline styles or embedded <style> at the end of the generated HTML.
 
 ${imageContext}
 ${chatContext}
@@ -118367,6 +118772,319 @@ ${this.builder.html()}
       document.body.removeChild(announcement);
     }, 1000);
   }
+
+  /**
+   * ============================================================================
+   * DEMO MODE
+   * ============================================================================
+   */
+  loadConversations() {
+    // Load demo conversations
+    if (this.demoConversations && this.demoConversations.length > 0) {
+      this.demoConversations.forEach(msg => {
+        if (msg.role === 'user') {
+          this.addMessage('user', msg.content);
+        } else if (msg.role === 'assistant') {
+          this.addMessage('assistant', msg.content, true);
+
+          // Add image preview if available
+          if (msg.imagePreview && msg.imagePreview.length > 0) {
+            this.addImagePreview(msg.imagePreview);
+
+            // Include in conversationResults with correct structure
+            this.conversationResults.push({
+              type: 'image',
+              description: 'Previously generated image from demo',
+              content: `Generated ${msg.imagePreview.length} images`,
+              generatedUrls: msg.imagePreview.map(img => img.url),
+              // Array of URLs
+              imageDetails: msg.imagePreview.map(img => ({
+                // Array of objects
+                url: img.url,
+                context: img.context,
+                prompt: img.context || '' // Use context as prompt if no prompt available
+              })),
+
+              targetElement: 'demo images'
+            });
+          }
+        }
+      });
+    }
+  }
+  addDemoBanner() {
+    const out = s => this.out(s);
+    const banner = document.createElement('div');
+    banner.className = 'demo-banner';
+    banner.innerHTML = `
+            <div style="
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 12px 16px;
+                border-radius: 8px;
+                font-size: 13px;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+            ">
+                <span style="font-size: 18px;">📖</span>
+                <div>
+                    <strong>${out('Read-Only Demo')}</strong>
+                    <div style="font-size: 11px; opacity: 0.9; margin-top: 2px;">
+                        ${out('Full AI chat available in the complete version.')}
+                    </div>
+                </div>
+            </div>
+        `;
+
+    // Insert banner at the top of messages container
+    // this.messagesContainer.insertBefore(banner, this.messagesContainer.firstChild);
+    this.messagesContainer.appendChild(banner);
+  }
+
+  /**
+   * Update the quick image size button based on current model and settings
+   */
+  updateQuickImageSizeButton() {
+    const imageGenEnabled = this.builder.generateMediaUrl_Fal ? true : false;
+    if (!imageGenEnabled) {
+      this.quickImageSizeButton.style.display = 'none';
+      return;
+    }
+    const currentModelId = this.settings.imageModel;
+    const availableSizes = this.getSizesForModel(currentModelId);
+
+    // Hide button if model has no size options
+    if (!availableSizes || availableSizes.length === 0) {
+      this.quickImageSizeButton.style.display = 'none';
+      return;
+    }
+
+    // Show button
+    this.quickImageSizeButton.style.display = 'flex';
+
+    // Smart selection: check if current size is available
+    let selectedSize = this.settings.imageSize;
+    if (!availableSizes.includes(selectedSize)) {
+      // Current size not available, find best fallback
+      selectedSize = this.findBestFallback(selectedSize, availableSizes);
+      this.settings.imageSize = selectedSize;
+
+      // Sync with settings dialog
+      this.imageSizeSelect.value = selectedSize;
+
+      // Save to storage
+      this.saveSettingsToStorage();
+    }
+
+    // Update button label
+    this.updateButtonLabel(selectedSize);
+
+    // Populate popover options
+    this.populateSizePopover(availableSizes, selectedSize);
+  }
+
+  /**
+   * Get available sizes for a model (reuse existing logic)
+   */
+  getSizesForModel(modelId) {
+    const model = this.imageModels.find(m => m.id === modelId);
+    if (!model) return null;
+
+    // if sizes explicitly empty array → means no size options
+    if (Array.isArray(model.sizes) && model.sizes.length === 0) {
+      return null;
+    }
+    const defaultSizes = ['square', 'square_hd', 'landscape_4_3', 'landscape_16_9', 'portrait_4_3', 'portrait_16_9'];
+    return model.sizes || defaultSizes;
+  }
+
+  /**
+   * Find best fallback size when current selection is not available
+   */
+  findBestFallback(preferredSize, availableSizes) {
+    // Strategy 1: Try to match orientation
+    const orientation = this.getOrientation(preferredSize);
+    const matchingOrientation = availableSizes.find(size => this.getOrientation(size) === orientation);
+    if (matchingOrientation) return matchingOrientation;
+
+    // Strategy 2: Common defaults
+    if (availableSizes.includes('16:9')) return '16:9';
+    if (availableSizes.includes('landscape_16_9')) return 'landscape_16_9';
+    if (availableSizes.includes('1:1')) return '1:1';
+    if (availableSizes.includes('square')) return 'square';
+
+    // Strategy 3: First available
+    return availableSizes[0];
+  }
+
+  /**
+   * Determine orientation from size value
+   */
+  getOrientation(size) {
+    const landscape = ['16:9', '21:9', '4:3', '3:2', '5:4', 'landscape_16_9', 'landscape_4_3'];
+    const portrait = ['9:16', '9:21', '3:4', '2:3', '4:5', 'portrait_16_9', 'portrait_4_3'];
+    if (landscape.includes(size)) return 'landscape';
+    if (portrait.includes(size)) return 'portrait';
+    return 'square';
+  }
+
+  /**
+   * Update button label to show current size
+   */
+  updateButtonLabel(sizeValue) {
+    if (!sizeValue) {
+      this.quickImageSizeButton.textContent = '□';
+      this.quickImageSizeButton.setAttribute('aria-label', this.out('Select image size'));
+      return;
+    }
+
+    // Convert verbose labels to short form
+    const labelMap = {
+      'landscape_16_9': '16:9',
+      'landscape_4_3': '4:3',
+      'portrait_16_9': '9:16',
+      'portrait_4_3': '3:4',
+      'square': '1:1',
+      'square_hd': '1:1 HD'
+    };
+    const displayLabel = labelMap[sizeValue] || sizeValue;
+    this.quickImageSizeButton.textContent = displayLabel;
+    this.quickImageSizeButton.setAttribute('aria-label', `${this.out('Image size')}: ${displayLabel}`);
+  }
+
+  /**
+   * Populate the size popover with available options
+   */
+  populateSizePopover(sizes, selectedSize) {
+    const out = s => this.out(s);
+    const sizeDefs = {
+      'square_hd': out('Square HD'),
+      'square': out('Square'),
+      'landscape_4_3': out('Landscape 4x3'),
+      'landscape_16_9': out('Landscape 16x9'),
+      'portrait_4_3': out('Portrait 3x4'),
+      'portrait_16_9': out('Portrait 9x16'),
+      '1:1': out('Square'),
+      '3:2': out('Landscape 3x2'),
+      '4:3': out('Landscape 4x3'),
+      '5:4': out('Landscape 5x4'),
+      '16:9': out('Landscape 16x9'),
+      '21:9': out('Landscape 21:9'),
+      '2:3': out('Portrait 2x3'),
+      '3:4': out('Portrait 3x4'),
+      '4:5': out('Portrait 4x5'),
+      '9:16': out('Portrait 9x16'),
+      '9:21': out('Portrait 9:21')
+    };
+    this.sizeOptionsContainer.innerHTML = '';
+    sizes.forEach(size => {
+      const option = document.createElement('div');
+      option.className = 'size-option' + (size === selectedSize ? ' selected' : '');
+      option.setAttribute('role', 'menuitem');
+      option.setAttribute('tabindex', '0');
+      const radio = document.createElement('input');
+      radio.type = 'radio';
+      radio.name = 'quickImageSize';
+      radio.value = size;
+      radio.checked = size === selectedSize;
+      radio.id = `quick-size-${size}`;
+      const label = document.createElement('label');
+      label.htmlFor = `quick-size-${size}`;
+      label.textContent = sizeDefs[size] || size;
+      // label.style.cursor = 'pointer';
+      label.style.flex = '1';
+      option.appendChild(radio);
+      option.appendChild(label);
+
+      // Click handler
+      option.addEventListener('click', () => {
+        this.selectImageSize(size);
+      });
+
+      // Keyboard handler
+      option.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.selectImageSize(size);
+        }
+      });
+      this.sizeOptionsContainer.appendChild(option);
+    });
+  }
+
+  /**
+   * Handle size selection
+   */
+  selectImageSize(size) {
+    // Update settings
+    this.settings.imageSize = size;
+
+    // Sync with settings dialog
+    this.imageSizeSelect.value = size;
+
+    // Update button label
+    this.updateButtonLabel(size);
+
+    // Update popover selection
+    this.sizeOptionsContainer.querySelectorAll('.size-option').forEach(opt => {
+      opt.classList.remove('selected');
+      opt.querySelector('input[type="radio"]').checked = false;
+    });
+
+    // const selectedOption = this.sizeOptionsContainer.querySelector(`#quick-size-${size}`);
+    const selectedOption = Array.from(this.sizeOptionsContainer.querySelectorAll('input[type="radio"]')).find(radio => radio.value === size);
+    if (selectedOption) {
+      selectedOption.closest('.size-option').classList.add('selected');
+      selectedOption.checked = true;
+    }
+
+    // Save to storage
+    this.saveSettingsToStorage();
+
+    // Close popover
+    this.closeImageSizePopover();
+
+    // Focus back to input
+    this.promptInput.focus();
+  }
+
+  /**
+   * Toggle popover visibility
+   */
+  toggleImageSizePopover() {
+    const isVisible = this.imageSizePopover.style.display !== 'none';
+    if (isVisible) {
+      this.closeImageSizePopover();
+    } else {
+      this.openImageSizePopover();
+    }
+  }
+
+  /**
+   * Open the size popover
+   */
+  openImageSizePopover() {
+    this.imageSizePopover.style.display = 'block';
+    this.imageSizePopover.setAttribute('aria-hidden', 'false');
+    this.quickImageSizeButton.setAttribute('aria-expanded', 'true');
+
+    // Focus first option
+    const firstOption = this.sizeOptionsContainer.querySelector('.size-option');
+    if (firstOption) {
+      firstOption.focus();
+    }
+  }
+
+  /**
+   * Close the size popover
+   */
+  closeImageSizePopover() {
+    this.imageSizePopover.style.display = 'none';
+    this.imageSizePopover.setAttribute('aria-hidden', 'true');
+    this.quickImageSizeButton.setAttribute('aria-expanded', 'false');
+  }
   out(s) {
     let result = this.builder.lang[s];
     if (result) return result;else return s;
@@ -118782,6 +119500,91 @@ Use grayscale for minimalist design.
 
 > **Editorial Style:** Stick to black, white, and grays for a clean, minimalist aesthetic. Use color sparingly for accents.
 
+` + `
+
+### Animation
+
+**Transition**
+
+Classes: transition-none, transition, transition-colors, transition-opacity, transition-shadow, transition-transform, transition-all
+
+**Duration**
+
+Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000, duration-1500
+
+**Timing**
+
+Classes: ease-linear, ease-in, ease-out, ease-in-out
+
+**Delay**
+
+Classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500
+
+**Scale**
+
+Classes: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
+
+**Hover Effect**
+
+Classes: hover:scale-105
+
+**Rotate**
+
+Classes: rotate-0, rotate-45, rotate-90, rotate-180
+
+**Translate X**
+
+Classes: translate-x-0, translate-x-1, translate-x-2, translate-x-4, translate-x-8
+
+**Translate Y**
+
+Classes: translate-y-0, translate-y-1, translate-y-2, translate-y-4, translate-y-8
+
+**Skew**
+
+Classes: skew-x-0, skew-x-3, skew-x-6, skew-y-0, skew-y-3, skew-y-6
+
+**Overflow**
+
+Classes: overflow-hidden, overflow-visible, overflow-scroll, overflow-auto
+
+**Opacity**
+
+Classes:
+
+| Class        | Color         |
+| ------------ | ------------- |
+| '.opacity-0' | opacity: 0    |
+| '.opacity-2' | opacity: 0.02 |
+| '.opacity-4' | opacity: 0.04 |
+| '.opacity-5' | opacity: 0.05 |
+| '.opacity-6' | opacity: 0.06 |
+| '.opacity-8' | opacity: 0.07 |
+| '.opacity-10' | opacity: 0.1 |
+| '.opacity-12' | opacity: 0.12 |
+| '.opacity-15' | opacity: 0.15 |
+| '.opacity-20' | opacity: 0.2 |
+| '.opacity-25' | opacity: 0.25 |
+| '.opacity-30' | opacity: 0.3 |
+| '.opacity-35' | opacity: 0.35 |
+| '.opacity-40' | opacity: 0.4 |
+| '.opacity-45' | opacity: 0.45 |
+| '.opacity-50' | opacity: 0.5 |
+| '.opacity-55' | opacity: 0.55 |
+| '.opacity-60' | opacity: 0.6 |
+| '.opacity-65' | opacity: 0.65 |
+| '.opacity-70' | opacity: 0.7 |
+| '.opacity-75' | opacity: 0.75 |
+| '.opacity-80' | opacity: 0.8 |
+| '.opacity-85' | opacity: 0.85 |
+| '.opacity-90' | opacity: 0.9 |
+| '.opacity-95' | opacity: 0.95 |
+| '.opacity-100' | opacity: 1 |
+
+**Animation keyframes**
+
+Classes: spin, ping, pulse, bounce
+` + `
 ---
 ` + `
 ## Common Patterns
@@ -119058,6 +119861,31 @@ When creating icon-based features, benefits, or service sections: use Bootstrap
 <h4 class="size-18 font-medium text-center pb-3">Lightning Fast</h4>
 <p class="size-14 leading-16 text-gray-600 text-center">Description...</p>
 
+### 9. Image Layout with Hover Effect
+
+Use this pattern for all images (galleries, featured images, portfolio items):
+
+<div class="w-full overflow-hidden relative bg-gray-50" style="aspect-ratio:16/9">
+    <img src="..." alt="..." class="w-full h-full object-cover transition-transform duration-1500 hover:scale-105">
+</div>
+
+**Key elements:**
+- 'aspect-ratio:16/9' - maintains proportions (adjust as needed: 1/1, 4/3, 3/2, 16/9, etc.)
+- 'overflow-hidden' - keeps scaled image contained
+- 'bg-gray-50' - placeholder while image loads
+- 'transition-transform duration-1000' - smooth 1-second animation
+- 'hover:scale-105' - subtle 5% scale on hover
+- 'object-cover' - ensures image fills container
+
+**Common aspect ratios:**
+- Square: 'aspect-ratio:1/1'
+- Portrait: 'aspect-ratio:3/4' or 'aspect-ratio:2/3'
+- Landscape: 'aspect-ratio:4/3' or 'aspect-ratio:3/2'
+- Wide: 'aspect-ratio:16/9' or 'aspect-ratio:21/9'
+- Tall portrait: 'aspect-ratio:9/16'
+
+Always include this hover effect for a polished, interactive feel.
+
 `;
 
 const contextCodeBlock$1 = `
@@ -119240,6 +120068,191 @@ Remember: The goal is to create code blocks that are **self-contained**, **confl
 </div>
 `;
 
+const contextDesignGuide$1 = `
+# Design Directive:
+
+## Purpose
+
+This guide complements the Content Framework documentation. It explains how to create **diverse, creative designs** that go beyond default aesthetics while strictly adhering to framework utility classes.
+
+## Core Philosophy: Design Freedom Within Constraints
+
+The frameworks provide utility classes for structure and typography. To create rich, varied designs:
+
+1. **Use framework classes** for all structural elements
+2. **Add inline styles** for colors, backgrounds, gradients, shadows, transforms, and animations
+3. **Create embedded styles** in '<style>...</style>' blocks at the end when needed for animations, transitions, or reusable patterns
+
+**Example <style>: When needed for animations, transitions, or reusable patterns**
+
+<div class="row">
+    <div class="column">
+
+        <!-- GUIDANCE: Use this layout to show images at any aspect ratio with a hover scale effect -->
+        <div class="w-full overflow-hidden relative bg-gray-50" style="aspect-ratio:16/9">
+            <img src="https://placehold.co/1200x1200/f5f5f5/999?text=Featured" alt="Featured Project" class="w-full h-full object-cover transition-transform duration-1500 hover:scale-105">
+        </div>
+
+    </div>
+</div>
+
+<div class="row">
+    <div class="column">
+
+        <div class="featured-image">
+            <img src="https://placehold.co/1600x700" alt="Featured Project">
+        </div>
+
+    </div>
+</div>
+
+<div class="row portfolio-row">
+    <div class="column">
+
+        <div class="row-image">
+            <img src="https://placehold.co/1200x900" alt="Digital Banking">
+        </div>
+
+    </div>
+    <div class="column">
+
+        <!-- Content -->
+
+    </div>
+</div>
+
+<div class="row">
+
+    <div class="column">
+
+        <div class="p-12 bg-gray-50 hover-lift">
+            <p class="size-18 leading-17 text-black pb-8">The level of professionalism and expertise demonstrated throughout the project was outstanding. Highly recommend to anyone looking for quality work.</p>
+            <p class="size-14 font-semibold text-black pb-1">Michael Chen</p>
+            <p class="size-13 text-gray-600 tracking-wide">Founder, Innovation Labs</p>
+        </div>
+
+    </div>
+    <div class="column">
+
+        <!-- Content -->
+
+    </div>
+</div>
+<style>
+    /* Featured image */
+    
+    .featured-image {
+        width: 100%;
+        aspect-ratio: 21/9;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
+    }
+
+    .featured-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .featured-image:hover img {
+        transform: scale(1.03);
+    }
+
+    /* Row image */
+
+    .row-image {
+        width: 100%;
+        aspect-ratio: 4/3;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
+    }
+
+    .row-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .portfolio-row:hover .row-image img {
+        transform: scale(1.05);
+    }
+
+    /* Smooth hover animations */
+    .hover-lift {
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .hover-lift:hover {
+        transform: translateY(-4px);
+    }
+</style>
+
+
+## Key Aesthetic Philosophy:
+**Swiss/Minimalist meets Portfolio Presentation** - Clean, grid-based, information-focused design where content hierarchy is created through scale, weight, and spacing rather than color or decoration. Every element serves a functional purpose. Photography is professional and high-quality. Typography creates drama through size contrast. The overall feel is sophisticated, professional, and timeless.
+
+## Design Characteristics:
+
+### Typography Treatment
+- **Extreme scale contrast**: Massive headlines (80px-140px) paired with tiny metadata text 
+- **Version/number typography**: Large numbers (like "1.1", "2.4", "2027") used as design elements
+- **Mix of weights**: Bold project names with light secondary information
+
+### Layout Patterns
+- **Horizontal information bars**: Thin lines (1px-2px) separating sections or containing metadata
+- **Asymmetric content placement**: Image on left (40-45%), text/info on right (55-60%)
+- **Card-based presentation**: Content contained in white cards floating on gray backgrounds
+- **Top metadata strips**: Small text in corners (studio name, project type, year)
+- **Multi-column text blocks**: Body copy split into 2-3 narrow columns for readability
+
+### Image Treatment
+- **Photography as hero**: Large, high-quality images dominating the layout (not decorative)
+- **Clean crops**: Images in rectangular containers, no fancy shapes
+- **Generous padding**: White space around images, never cramping them
+- **Grid systems for galleries**: Even-sized thumbnails in rows (4x2, 4x4 grids)
+- **Product-on-white aesthetic**: Clean product photography on pure white backgrounds
+
+### Color & Background
+- **Pure white dominant**: Clean #ffffff backgrounds, not cream or off-white
+- **Minimal color usage**: Mostly black text on white, with occasional single accent color
+- **Light gray backgrounds**: #f5f5f5 or #e5e5e5 for page backgrounds behind white cards
+- **Strategic black sections**: Full black backgrounds for contrast moments
+- **Accent color blocks**: Small pops of color (red, orange) used sparingly as highlights
+
+### Information Architecture
+- **Numbered lists**: "1. OVERVIEW", "2. SERVICES", etc. as section headers
+- **Metadata in lines**: "Client Name | Project Type | Year" separated by pipes or lines
+- **Small label categories**: Uppercase 11px labels like "SPECIALISED IN", "CONTACT", "ABOUT"
+- **Horizontal dividing lines**: Thin rules (1px) creating visual sections
+- **List-style information**: Stacked items with consistent spacing and alignment
+
+### Spatial Organization
+- **Air and breathing room**: Generous margins and padding throughout
+- **Contained sections**: Content lives in defined rectangular areas
+- **Aligned grids**: Everything aligns to invisible grid lines
+- **Consistent gaps**: Equal spacing between elements (20px, 30px, 40px)
+- **Edge-to-edge in black sections**: Dark sections can be full-bleed
+
+### Professional Polish
+- **Precise alignment**: Everything lines up perfectly (left edges, baselines, top edges)
+- **Consistent typography system**: Limited font sizes used repeatedly (12px, 14px, 16px, 32px, 80px, 120px)
+- **No decorative elements**: Everything serves a purpose, nothing ornamental
+- **Clean hover states**: Understated interactions, not flashy
+
+### What to AVOID:
+- ❌ Gradients (use solid colors only)
+- ❌ Rounded corners on everything (keep rectangular, maybe subtle 4-8px radius on cards)
+- ❌ Drop shadows (use very subtle if any, like 0 2px 8px rgba(0,0,0,0.04))
+- ❌ Overly decorative fonts (stick to clean system-ui)
+- ❌ Busy patterns or textures
+- ❌ Too many accent colors (pick one, use sparingly)
+- ❌ Cramped spacing (always err on the side of more whitespace)
+`;
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -119257,6 +120270,33 @@ class ContentBuilder {
         'snippets': []
       },
       screenMode: 'desktop',
+      demoMode: false,
+      /*
+      demoConversations: [
+          {
+              role: 'user',
+              content: 'Generate an image: "a house with beautiful mountain view. warm sunlight, golden-hour lighting, filmic teal-orange color grade".',
+              // timestamp: Date.now() - 180000 // 3 minutes ago
+          },
+          {
+              role: 'assistant',
+              content: '✓ Image generated successfully',
+              imagePreview: [
+                  { url: 'uploads/ai-8vnqv.png', context: 'Generate image of a house with a beautiful mountain view' },
+              ]
+          },
+          {
+              role: 'user',
+              content: `Create a thoughtful article about finding home in extraordinary landscapes. Write vivid prose about mountain dwellings and how our environments shape the way we live.
+      Use the generated image for this article, and present it as a premium design magazine feature.`,
+          },
+          {
+              role: 'assistant',
+              content: '✓ Create a thoughtful article about finding home in extraordinary landscapes with vivid prose about mountain dwellings and their impact on our lives, formatted as a premium design magazine feature.',
+          }
+      ],
+      */
+
       // Live Preview
       // previewURL: 'preview.html',
       onPreviewOpen: () => {
@@ -120526,7 +121566,7 @@ class ContentBuilder {
     this.ShortcutInfo = new ShortcutInfo(this);
     if (!this.opts.isContentBox) {
       this.codechat = new CodeChat$1({
-        context: contextContentFramework$1 + contextCodeBlock$1
+        context: contextContentFramework$1 + contextCodeBlock$1 + contextDesignGuide$1
       }, this);
       if (this.startAIAssistant) {
         this.openAIAssistant();
@@ -143374,7 +144414,10 @@ class CodeChat {
     };
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
-    this.builderStuff = builderStuff;
+    this.builderStuff = builderStuff; // Check if demo mode is enabled
+
+    this.isDemoMode = this.builder.demoMode || false;
+    this.demoConversations = this.builder.demoConversations || [];
 
     const out = s => this.out(s); // Load saved settings or use defaults
 
@@ -143387,6 +144430,9 @@ class CodeChat {
     }
 
     this.codeModels = [{
+      id: 'anthropic/claude-opus-4.5',
+      label: 'Claude Opus 4.5'
+    }, {
       id: 'google/gemini-3-pro-preview',
       label: 'Google Gemini 3 Pro Preview'
     }, {
@@ -143718,6 +144764,14 @@ class CodeChat {
       this.imageModels = this.builder.imageGenerationModels;
     }
 
+    let inputPlaceholderText;
+
+    if (this.builder.editor) {
+      inputPlaceholderText = out('e.g., Create a landing page for a creative studio');
+    } else {
+      inputPlaceholderText = out('e.g., Create an article about a productive home workspace');
+    }
+
     let html = `
         <style>
         #chatPanel {
@@ -144049,10 +145103,12 @@ class CodeChat {
             box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.11);
             z-index: 10005;
             display: none;
+            pointer-events: auto; /* Reset cursor to default to prevent it from getting stuck */
         }
 
         #settingsDialog.open {
             display: block;
+            pointer-events: auto; /* Reset cursor to default to prevent it from getting stuck */
         }
 
         #settingsDialog .settings-header {
@@ -144313,9 +145369,118 @@ class CodeChat {
         body.dark #chatPanel .copy-button:hover {
             background: rgba(255, 255, 255, 0.2);
         }
+
+
+        /* Quick Image Size Button */
+        #chatPanel .quick-image-size-button {
+            width: 48px;
+            height: 48px;
+            border: none;
+            border-radius: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #chatPanel .quick-image-size-button:hover:not(:disabled) {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        #chatPanel .quick-image-size-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        body.dark #chatPanel .quick-image-size-button {
+            background: #484848;
+        }
+
+        body.dark #chatPanel .quick-image-size-button:hover:not(:disabled) {
+            background: #4c4c4c;
+        }
+
+        /* Image Size Popover */
+        #chatPanel .image-size-popover {
+            position: absolute;
+            bottom: 72px;
+            right: 68px;
+            background: white;
+            border: 1px solid #e5e5e5;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 10006;
+            min-width: 160px;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+
+        body.dark #chatPanel .image-size-popover {
+            background: #3a3a3a;
+            border-color: #555;
+        }
+
+        #chatPanel .size-options {
+            padding: 8px;
+        }
+
+        #chatPanel .size-option {
+            display: flex;
+            align-items: center;
+            padding: 10px 12px;
+            cursor: pointer;
+            border-radius: 6px;
+            transition: background 0.2s;
+            font-size: 14px;
+        }
+        #chatPanel .size-option label,
+        #chatPanel .size-option input {
+            cursor: pointer;
+        }
+
+        #chatPanel .size-option:hover {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        #chatPanel .size-option.selected {
+            background: rgba(62, 147, 247, 0.1);
+            font-weight: 500;
+        }
+
+        #chatPanel .size-option input[type="radio"] {
+            margin-right: 8px;
+        }
+
+        body.dark #chatPanel .size-option:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        body.dark #chatPanel .size-option.selected {
+            background: rgba(62, 147, 247, 0.2);
+        }
+
+        #chatPanel .image-size-popover::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        #chatPanel .image-size-popover::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        #chatPanel .image-size-popover::-webkit-scrollbar-thumb {
+            background: #e5e5e5;
+            border-radius: 3px;
+        }
+
+        body.dark #chatPanel .image-size-popover::-webkit-scrollbar-thumb {
+            background: #555;
+        }        
         </style>
         <div 
-            class="hidden" 
+            class="hidden keep-selection" 
             id="chatPanel"
             role="dialog"
             aria-labelledby="chatPanelTitle"
@@ -144365,10 +145530,24 @@ class CodeChat {
                     <label for="promptInput" class="sr-only">${out('Message input')}</label>
                     <textarea 
                         id="promptInput" 
-                        placeholder="${out('e.g., Create a landing page and explain best practices for hero sections')}"
+                        placeholder="${inputPlaceholderText}"
                         rows="1"
                         aria-label="${out('Type your message')}"
                     ></textarea>
+
+                    <!-- NEW: Quick image size button -->
+                    <button 
+                        id="quickImageSizeButton"
+                        type="button"
+                        class="quick-image-size-button"
+                        aria-label="${out('Select image size')}"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        style="display: none;"
+                    >
+                        □
+                    </button>
+
                     <button 
                         id="sendButton"
                         type="button"
@@ -144382,15 +145561,30 @@ class CodeChat {
                         </svg>
                     </button>
                 </div>
+
+                <!-- NEW: Size selection popover -->
+                <div 
+                    id="imageSizePopover" 
+                    class="image-size-popover"
+                    role="menu"
+                    aria-hidden="true"
+                    style="display: none;"
+                >
+                    <div class="size-options" id="sizeOptionsContainer">
+                        <!-- Options populated dynamically -->
+                    </div>
+                </div>
+
             </div>
         </div>
 
         <!-- Settings Dialog Overlay -->
-        <div id="settingsOverlay" aria-hidden="true"></div>
+        <div id="settingsOverlay" class="keep-selection" aria-hidden="true"></div>
 
         <!-- Settings Dialog -->
         <div 
             id="settingsDialog"
+            class="keep-selection"
             role="dialog"
             aria-labelledby="settingsTitle"
             aria-modal="true"
@@ -144520,11 +145714,17 @@ class CodeChat {
     this.codeModelSelect.value = this.settings.codeModel;
     this.chatModelSelect.value = this.settings.chatModel;
     this.imageModelSelect.value = this.settings.imageModel;
-    this.imageSizeSelect.value = this.settings.imageSize;
-    let isChatVisible = localStorage.getItem('chatPanelVisible') !== 'false';
+    this.imageSizeSelect.value = this.settings.imageSize; // Check saved state - default to closed if never set
+
+    const savedState = localStorage.getItem('chatPanelVisible');
+    let isChatVisible = savedState === 'true'; // Only open if explicitly set to 'true'
 
     if (!isChatVisible) {
       modal.classList.add('hidden');
+      modal.setAttribute('aria-hidden', 'true');
+    } else {
+      modal.classList.remove('hidden');
+      modal.removeAttribute('aria-hidden');
     }
 
     const btnClose = modal.querySelector('.close-button');
@@ -144608,8 +145808,43 @@ class CodeChat {
     this.promptInput = promptInput;
     this.closeChatButton = closeChatButton;
     this.sendButton = sendButton;
-    this.messagesContainer = messagesContainer;
+    this.messagesContainer = messagesContainer; // NEW: Quick image size button elements
+
+    this.quickImageSizeButton = builderStuff.querySelector('#quickImageSizeButton');
+    this.imageSizePopover = builderStuff.querySelector('#imageSizePopover');
+    this.sizeOptionsContainer = builderStuff.querySelector('#sizeOptionsContainer'); // Quick Image Size Button Handlers
+
+    this.quickImageSizeButton.addEventListener('click', e => {
+      e.stopPropagation();
+      this.toggleImageSizePopover();
+    }); // Close popover when clicking outside
+
+    document.addEventListener('click', e => {
+      if (!this.imageSizePopover.contains(e.target) && !this.quickImageSizeButton.contains(e.target)) {
+        this.closeImageSizePopover();
+      }
+    }); // Close popover on Escape
+
+    this.imageSizePopover.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        this.closeImageSizePopover();
+        this.quickImageSizeButton.focus();
+      }
+    });
     this.renderImageOptions();
+
+    if (this.demoConversations) {
+      this.loadConversations();
+    }
+
+    if (this.isDemoMode) {
+      this.addDemoBanner(); // Disable input in demo mode
+
+      this.promptInput.disabled = true; // this.promptInput.placeholder = out('Demo mode - Chat is read-only');
+
+      this.sendButton.disabled = true;
+      this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
   }
 
   renderImageOptions() {
@@ -144712,7 +145947,9 @@ class CodeChat {
     }); // Trigger initial render with defaults
 
     modelSelect.value = defaultModelId;
-    renderSizes(defaultModelId, false);
+    renderSizes(defaultModelId, false); // NEW: Initialize quick size button
+
+    this.updateQuickImageSizeButton();
   }
   /**
    * ============================================================================
@@ -144784,7 +146021,9 @@ class CodeChat {
     this.settingsOverlay.classList.remove('open');
     this.settingsOverlay.setAttribute('aria-hidden', 'true');
     this.settingsDialog.classList.remove('open');
-    this.settingsDialog.setAttribute('aria-hidden', 'true');
+    this.settingsDialog.setAttribute('aria-hidden', 'true'); // Reset cursor to default to prevent it from getting stuck
+
+    document.body.style.cursor = '';
 
     if (this.settingsLastFocusedElement) {
       this.settingsLastFocusedElement.focus();
@@ -144798,7 +146037,9 @@ class CodeChat {
     this.settings.chatModel = this.chatModelSelect.value;
     this.settings.imageModel = this.imageModelSelect.value;
     this.settings.imageSize = this.imageSizeSelect.value;
-    this.saveSettingsToStorage();
+    this.saveSettingsToStorage(); // NEW: Update quick button when settings change
+
+    this.updateQuickImageSizeButton();
     this.closeSettings();
   }
   /**
@@ -144833,6 +146074,106 @@ Your job:
 3. Determine what each image should depict based on surrounding content and context
 4. Create detailed image generation prompts for each image
 
+📸 EDITORIAL STYLE GUIDE - Apply to all image prompts:
+
+- Default aesthetic: Minimalist magazine-style (Kinfolk, Cereal, Vogue Living)
+- Composition: Clean, lots of negative space, well-balanced
+
+
+CREATIVE PROMPT ENHANCEMENT:
+When constructing image prompts, intelligently enrich basic descriptions using these proven cinematic stylers:
+
+1. **Golden Hour Cinematic**
+   "Warm sunlight, golden-hour lighting. Low contrast with lifted shadows, ethereal glow throughout. Overall vibe: relaxed, coastal, sun-kissed, carefree, West Coast lifestyle, evoking warmth and endless summer."
+   → Best for: Landscapes, architecture, outdoor scenes, lifestyle content
+
+2. **Morning Halo Effect**
+   "The lighting is soft, morning sunlight coming, creating a 'halo' effect. Vibrant cinematic shot"
+   → Best for: Portraits, people in action, outdoor activities
+
+3. **Natural Forest Serenity**
+   "in a lush, green forest. The sunlight should be filtering through the trees, creating a serene and natural atmosphere"
+   → Best for: Nature scenes, outdoor activities, wellness content
+
+4. **Coastal Summer Drama**
+   "on a dramatic windswept coastline. The overall atmosphere is cheerful, breezy, and full of summer warmth"
+   → Best for: Beach/coastal scenes, adventure, travel content
+
+5. **Modern Interior Elegance**
+   "illuminated by warm, natural lighting. The background features a softly blurred modern interior with subtle lights and cool tones, adding depth without distraction"
+   → Best for: Indoor portraits, product shots, professional/business settings
+
+ENHANCEMENT STRATEGY:
+- Analyze the subject matter and context from the HTML/request
+- Select the most appropriate styler that matches the scene type
+- Check if user has specified lighting/time → DO NOT apply contradicting styler elements
+  * Example: User says "daylight" → DO NOT add "golden-hour" or "sunset"
+- Aim for creative elevation while maintaining the core subject integrity
+- Blend the styler naturally into the prompt (adapt grammar, pronouns, context)
+- IF user is vague (no specific lighting/mood) → Apply full styler enhancement
+- User's explicit details ALWAYS take precedence over styler recommendations
+` +
+      /*
+      ENHANCEMENT STRATEGY:
+      - Analyze the subject matter and context from the HTML/request
+      - Select the most appropriate styler that matches the scene type
+      - Blend the styler naturally into the prompt (adapt grammar, pronouns, context)
+      - If the subject already has specific lighting/atmosphere details, complement rather than override
+      - Aim for creative elevation while maintaining the core subject integrity
+      */
+      `
+Examples of enriched prompts:
+- Basic: "a house with mountain view" 
+  → Enhanced: "a house with beautiful mountain view. Warm sunlight, golden-hour lighting. Low contrast with lifted shadows, ethereal glow throughout. Overall vibe: relaxed, coastal, sun-kissed, carefree, West Coast lifestyle, evoking warmth and endless summer."
+  
+- Basic: "person hiking"
+  → Enhanced: "a person hiking in nature. The lighting is soft, morning sunlight coming, creating a 'halo' effect. Vibrant cinematic shot"
+  
+- Basic: "woman reading"
+  → Enhanced: "a woman sitting comfortably and reading. Her face is illuminated by warm, natural lighting. The background features a softly blurred modern interior with subtle lights and cool tones, adding depth without distraction"
+  
+- Already detailed: "dramatic headshot with bokeh and rim lighting"
+  → No enhancement needed (preserve user's vision)
+
+
+CONTEXT-SPECIFIC GUIDELINES:
+
+Interior/Indoor scenes:
+  - Lighting: Soft natural window light
+  - Backdrop: white walls or neutral tones
+  - Mood: Calm, serene, inviting, uncluttered
+  - Reference: "Kinfolk interior photography"
+
+People/Portraits/Activities:
+  - Lighting: Natural diffused light, flattering and soft
+  - Styling: Effortlessly elegant, contemporary casual
+  - Pose: Candid, authentic moments, relaxed
+  - Reference: "modern lifestyle editorial photography"
+
+Products/Objects:
+  - Lighting: Clean studio or soft natural light
+  - Backdrop: Minimalist neutral, lots of breathing room
+  - Mood: Refined simplicity, premium feel
+  - Reference: "high-end editorial product photography"
+
+Food/Culinary:
+  - Lighting: Soft daylight, gentle overhead or 45° angle
+  - Styling: Minimal props, artisan ceramics, linen
+  - Mood: Fresh, appetizing, rustic-modern
+  - Reference: "Bon Appétit editorial food styling"
+
+Outdoor/Landscape:
+  - Composition: Serene, contemplative, minimal
+  - Mood: Calm atmosphere, breathing space, lifted brightness
+  - Colors: Vibrant cinematic shot.
+  - Reference: "editorial travel photography"
+
+CRITICAL RULES:
+1. If user specifies a style (cinematic, vintage, vibrant, etc.) → RESPECT IT, only add quality markers
+2. If user is vague → APPLY FULL EDITORIAL TREATMENT based on subject category
+3. Always maintain cohesive aesthetic across all images
+4. Every prompt should feel like it belongs in a high-end lifestyle magazine
+
 Respond with a JSON array with one entry per image to generate:
 [
   {
@@ -144937,7 +146278,12 @@ Response: [
 
 
   async sendMessage() {
-    const out = s => this.out(s);
+    const out = s => this.out(s); // Prevent sending messages in demo mode
+
+
+    if (this.isDemoMode) {
+      return;
+    }
 
     const prompt = this.promptInput.value.trim();
     if (!prompt) return;
@@ -145004,16 +146350,45 @@ Response: [
             this.addMessage('assistant', `✓ ${result.description}`);
           } else if (result.type === 'image') {
             if (result.imageDetails && result.imageDetails.length > 1) {
-              this.addMessage('assistant', `✓ Generated ${result.imageDetails.length} images successfully`);
+              this.addMessage('assistant', `✓ Generated ${result.imageDetails.length} images successfully`); // this.addMessage('assistant', `✓ ${out('Generated {count} images successfully').replace('{count}', result.imageDetails.length)}`);
+
               this.addImagePreview(result.imageDetails);
             } else {
-              this.addMessage('assistant', '✓ Generated image successfully');
+              this.addMessage('assistant', '✓ Image generated successfully'); // this.addMessage('assistant', `✓ ${out('Image generated successfully')}`);
 
               if (result.generatedUrls && result.generatedUrls[0]) {
                 this.addImagePreview([{
                   url: result.generatedUrls[0],
                   context: result.description
-                }]);
+                }]); // If there is a selected image, replace with the new image 
+
+                const url = result.generatedUrls[0];
+
+                if (this.builder.editor) {
+                  // ContentBox
+                  const img = this.builder.editor.activeImage;
+
+                  if (img) {
+                    this.builder.editor.saveForUndo();
+                    img.addEventListener('load', () => {
+                      this.builder.editor.element.image.repositionImageTool();
+                      this.builder.editor.elmTool.repositionElementTool();
+                    });
+                    this.builder.editor.activeImage.setAttribute('src', url);
+                  }
+                } else {
+                  // ContentBuilder
+                  const img = this.builder.activeImage;
+
+                  if (img) {
+                    this.builder.uo.saveForUndo();
+                    img.addEventListener('load', () => {
+                      this.builder.element.image.repositionImageTool();
+                      this.builder.elmTool.repositionElementTool();
+                    });
+                    this.builder.activeImage.setAttribute('src', url);
+                  }
+                }
               }
             }
           }
@@ -145071,14 +146446,14 @@ Response: [
         `;
     images.forEach(img => {
       previewHTML += `
-                <div style="border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.05);">
-                    <img src="${img.url}" alt="${img.context || 'Generated image'}" style="width: 100%; height: 150px; object-fit: cover;" />
+                <div style="border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.05);">
+                    <img src="${img.url}" alt="${img.context || 'Generated image'}" style="width: 100%;" />
                     <div style="padding: 8px; font-size: 11px; opacity: 0.8;">
                         ${img.context || ''}
                         <a href="${img.url}" target="_blank" rel="noopener noreferrer" style="display: block; margin-top: 4px;">View</a>
                     </div>
                 </div>
-            `;
+            `; // height: 150px; object-fit: cover;
     });
     previewHTML += '</div>';
     previewDiv.innerHTML = previewHTML;
@@ -145098,7 +146473,34 @@ Response: [
         ...this.builder.defaultHeaders
       }; // Check if image generation is enabled
 
-      const imageGenEnabled = this.builder.generateMediaUrl_Fal ? true : false;
+      const imageGenEnabled = this.builder.generateMediaUrl_Fal ? true : false; // Build context about previously generated images
+
+      let imageHistoryContext = '';
+      const previousImageResults = this.conversationResults.filter(r => r.type === 'image' && r.generatedUrls && r.generatedUrls.length > 0);
+
+      if (previousImageResults.length > 0) {
+        imageHistoryContext = '\n\n=== PREVIOUSLY GENERATED IMAGES IN THIS CONVERSATION ===\n';
+        imageHistoryContext += 'The following images were generated earlier in this conversation:\n\n';
+        previousImageResults.forEach((result, idx) => {
+          if (result.imageDetails && result.imageDetails.length > 0) {
+            result.imageDetails.forEach((img, imgIdx) => {
+              imageHistoryContext += `Generated Image ${idx + 1}.${imgIdx + 1}:\n`;
+              imageHistoryContext += `  URL: ${img.url}\n`;
+              imageHistoryContext += `  Context: ${img.context}\n`;
+              imageHistoryContext += `  Description: ${result.description}\n\n`;
+            });
+          } else {
+            result.generatedUrls.forEach((url, urlIdx) => {
+              imageHistoryContext += `Generated Image ${idx + 1}.${urlIdx + 1}:\n`;
+              imageHistoryContext += `  URL: ${url}\n`;
+              imageHistoryContext += `  Description: ${result.description}\n\n`;
+            });
+          }
+        });
+        imageHistoryContext += '⚠️ IMPORTANT: If the user refers to "the generated image", "this image", "the image", or "previous image", they are referring to these images above.\n';
+        imageHistoryContext += '⚠️ DO NOT create a new image task. Instead, create a CODE task that uses these existing URLs.\n\n';
+      }
+
       const classificationPrompt = `Analyze this user message and break it down into tasks.
 
 CURRENT HTML CONTEXT (use this to understand the page structure):
@@ -145106,11 +146508,19 @@ CURRENT HTML CONTEXT (use this to understand the page structure):
 ${this.builder.html()}
 \`\`\`            
 
+${imageHistoryContext}
+
 IMPORTANT: This is a WEB BUILDER tool with chat capabilities. Valid requests are:
 - Creating/editing/removing HTML content (code tasks)
 ${imageGenEnabled ? '- Generating images for the webpage (image tasks)' : ''}
 - Asking questions or having conversations (chat tasks) - THIS CAN BE ABOUT ANYTHING
 
+CRITICAL CONTEXT RULE:
+- In a web builder, "create an article/blog/story/content" means CREATE A WEBPAGE (CODE task)
+- Only use CHAT task for questions, explanations, or requests for advice
+- If user says "create", "write", "make", "build" followed by content → CODE task
+- If user says "explain", "how do I", "what is", "tell me about" → CHAT task
+
 ${imageGenEnabled ? '' : `
 ⚠️ AI IMAGE GENERATION IS CURRENTLY DISABLED
 - If user requests AI image generation/creation, explain that it's disabled
@@ -145180,6 +146590,18 @@ IMAGE TASK RULES:
 - IMPORTANT: Look at the HTML context to understand if multiple images are involved
 - If the target section has multiple images, indicate this in targetElement (e.g., "all 3 images in Culinary Delights section")
 - Image tasks should come BEFORE code tasks that depend on them
+
+- CRITICAL: DO NOT create image task for these phrases (they mean REUSE existing):
+  * "use the generated image" / "use the image"
+  * "use this image" / "use existing image" 
+  * "with the generated image" / "with this image"
+  * "with the previous image" / "with the last image"
+  * "using the image I just created/generated"
+  * Any reference to a PREVIOUS image from conversation history
+- Decision logic:
+  * "Generate a new image of X" → CREATE image task (new generation)
+  * "Create article using the generated image" → NO image task (reuse existing)
+
 ` : ''}
 
 Examples:
@@ -145217,6 +146639,17 @@ Input: "Create a landing page about wood furniture workshop"
 Output: {"is_valid": true, "tasks": [{"type": "code", "description": "Create a landing page for a wood furniture workshop", "order": 1}], "is_mixed": false}
 Note: No image task created because user did not explicitly request AI image generation
 
+Input: "Create an inspiring article and use the generated image"
+Output: {"is_valid": true, "tasks": [{"type": "code", "description": "Create article using previously generated image from conversation history", "order": 1}], "is_mixed": false}
+Note: No image task because user wants to REUSE existing image
+
+Input: "Write a blog post about productivity and use this image"  
+Output: {"is_valid": true, "tasks": [{"type": "code", "description": "Create blog post using previously generated image", "order": 1}], "is_mixed": false}
+
+Input: "Generate another mountain image and create a landing page"
+Output: {"tasks": [{"type": "image", "description": "Generate new mountain image", "imagePrompt": "...", "order": 1}, {"type": "code", "description": "Create landing page with new image", "order": 2}], "is_mixed": true}
+Note: "another" and "generate" indicate NEW image generation
+
 ` : `
 Input: "Generate an AI image of a mountain"
 Output: {"is_valid": false, "reason": "AI image generation is currently disabled.", "tasks": [], "is_mixed": false}
@@ -145299,8 +146732,9 @@ Output: {"is_valid": false, "reason": "AI image generation is currently disabled
 
       if (imageTasksFromThisRequest.length > 0) {
         hasGeneratedImages = true;
-        imageContext = '\n\n=== GENERATED IMAGE URLS (USE THESE FOR YOUR TASK) ===\n';
-        imageTasksFromThisRequest.forEach(imageTask => {
+        imageContext = '\n\n=== GENERATED IMAGE URLS (USE THESE FOR YOUR TASK) ===\n'; // ⭐ REVERSE to show most recent first
+
+        imageTasksFromThisRequest.reverse().forEach(imageTask => {
           if (imageTask.imageDetails && imageTask.imageDetails.length > 0) {
             // Multiple images with context
             imageTask.imageDetails.forEach((img, idx) => {
@@ -145315,7 +146749,8 @@ Output: {"is_valid": false, "reason": "AI image generation is currently disabled
             });
           }
         });
-        imageContext += '\n⚠️ IMPORTANT: Use these generated image URLs (not placehold.co or other sources) for the specific images mentioned in your task.\n';
+        imageContext += '\n⚠️ IMPORTANT: Use the FIRST image URL listed above (most recent) unless the task specifically asks for a different image.\n';
+        imageContext += '⚠️ The first image is the MOST RECENTLY GENERATED and should be used by default.\n';
         imageContext += '⚠️ Your task description specifies WHICH images to update - follow it precisely.\n';
       } // ⭐ ALSO CHECK FOR CHAT RESULTS FROM PREVIOUS TASKS
 
@@ -145414,6 +146849,10 @@ ${this.builder.html()}
 TASK: ${task.description}
 
 IMPORTANT: Follow the Best Practices in Content framework.
+${this.builder.editor ? `CRITICAL: This project uses the Content.css and Box framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.` : `CRITICAL: This project uses the Content.css framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.`}
+For flexibility, you can use inline styles or embedded <style> at the end of the generated HTML.
 
 ${imageContext}
 ${chatContext}
@@ -145894,6 +147333,320 @@ ${this.builder.html()}
       document.body.removeChild(announcement);
     }, 1000);
   }
+  /**
+   * ============================================================================
+   * DEMO MODE
+   * ============================================================================
+   */
+
+
+  loadConversations() {
+    // Load demo conversations
+    if (this.demoConversations && this.demoConversations.length > 0) {
+      this.demoConversations.forEach(msg => {
+        if (msg.role === 'user') {
+          this.addMessage('user', msg.content);
+        } else if (msg.role === 'assistant') {
+          this.addMessage('assistant', msg.content, true); // Add image preview if available
+
+          if (msg.imagePreview && msg.imagePreview.length > 0) {
+            this.addImagePreview(msg.imagePreview); // Include in conversationResults with correct structure
+
+            this.conversationResults.push({
+              type: 'image',
+              description: 'Previously generated image from demo',
+              content: `Generated ${msg.imagePreview.length} images`,
+              generatedUrls: msg.imagePreview.map(img => img.url),
+              // Array of URLs
+              imageDetails: msg.imagePreview.map(img => ({
+                // Array of objects
+                url: img.url,
+                context: img.context,
+                prompt: img.context || '' // Use context as prompt if no prompt available
+
+              })),
+              targetElement: 'demo images'
+            });
+          }
+        }
+      });
+    }
+  }
+
+  addDemoBanner() {
+    const out = s => this.out(s);
+
+    const banner = document.createElement('div');
+    banner.className = 'demo-banner';
+    banner.innerHTML = `
+            <div style="
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 12px 16px;
+                border-radius: 8px;
+                font-size: 13px;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+            ">
+                <span style="font-size: 18px;">📖</span>
+                <div>
+                    <strong>${out('Read-Only Demo')}</strong>
+                    <div style="font-size: 11px; opacity: 0.9; margin-top: 2px;">
+                        ${out('Full AI chat available in the complete version.')}
+                    </div>
+                </div>
+            </div>
+        `; // Insert banner at the top of messages container
+    // this.messagesContainer.insertBefore(banner, this.messagesContainer.firstChild);
+
+    this.messagesContainer.appendChild(banner);
+  }
+  /**
+   * Update the quick image size button based on current model and settings
+   */
+
+
+  updateQuickImageSizeButton() {
+    const imageGenEnabled = this.builder.generateMediaUrl_Fal ? true : false;
+
+    if (!imageGenEnabled) {
+      this.quickImageSizeButton.style.display = 'none';
+      return;
+    }
+
+    const currentModelId = this.settings.imageModel;
+    const availableSizes = this.getSizesForModel(currentModelId); // Hide button if model has no size options
+
+    if (!availableSizes || availableSizes.length === 0) {
+      this.quickImageSizeButton.style.display = 'none';
+      return;
+    } // Show button
+
+
+    this.quickImageSizeButton.style.display = 'flex'; // Smart selection: check if current size is available
+
+    let selectedSize = this.settings.imageSize;
+
+    if (!availableSizes.includes(selectedSize)) {
+      // Current size not available, find best fallback
+      selectedSize = this.findBestFallback(selectedSize, availableSizes);
+      this.settings.imageSize = selectedSize; // Sync with settings dialog
+
+      this.imageSizeSelect.value = selectedSize; // Save to storage
+
+      this.saveSettingsToStorage();
+    } // Update button label
+
+
+    this.updateButtonLabel(selectedSize); // Populate popover options
+
+    this.populateSizePopover(availableSizes, selectedSize);
+  }
+  /**
+   * Get available sizes for a model (reuse existing logic)
+   */
+
+
+  getSizesForModel(modelId) {
+    const model = this.imageModels.find(m => m.id === modelId);
+    if (!model) return null; // if sizes explicitly empty array → means no size options
+
+    if (Array.isArray(model.sizes) && model.sizes.length === 0) {
+      return null;
+    }
+
+    const defaultSizes = ['square', 'square_hd', 'landscape_4_3', 'landscape_16_9', 'portrait_4_3', 'portrait_16_9'];
+    return model.sizes || defaultSizes;
+  }
+  /**
+   * Find best fallback size when current selection is not available
+   */
+
+
+  findBestFallback(preferredSize, availableSizes) {
+    // Strategy 1: Try to match orientation
+    const orientation = this.getOrientation(preferredSize);
+    const matchingOrientation = availableSizes.find(size => this.getOrientation(size) === orientation);
+    if (matchingOrientation) return matchingOrientation; // Strategy 2: Common defaults
+
+    if (availableSizes.includes('16:9')) return '16:9';
+    if (availableSizes.includes('landscape_16_9')) return 'landscape_16_9';
+    if (availableSizes.includes('1:1')) return '1:1';
+    if (availableSizes.includes('square')) return 'square'; // Strategy 3: First available
+
+    return availableSizes[0];
+  }
+  /**
+   * Determine orientation from size value
+   */
+
+
+  getOrientation(size) {
+    const landscape = ['16:9', '21:9', '4:3', '3:2', '5:4', 'landscape_16_9', 'landscape_4_3'];
+    const portrait = ['9:16', '9:21', '3:4', '2:3', '4:5', 'portrait_16_9', 'portrait_4_3'];
+    if (landscape.includes(size)) return 'landscape';
+    if (portrait.includes(size)) return 'portrait';
+    return 'square';
+  }
+  /**
+   * Update button label to show current size
+   */
+
+
+  updateButtonLabel(sizeValue) {
+    if (!sizeValue) {
+      this.quickImageSizeButton.textContent = '□';
+      this.quickImageSizeButton.setAttribute('aria-label', this.out('Select image size'));
+      return;
+    } // Convert verbose labels to short form
+
+
+    const labelMap = {
+      'landscape_16_9': '16:9',
+      'landscape_4_3': '4:3',
+      'portrait_16_9': '9:16',
+      'portrait_4_3': '3:4',
+      'square': '1:1',
+      'square_hd': '1:1 HD'
+    };
+    const displayLabel = labelMap[sizeValue] || sizeValue;
+    this.quickImageSizeButton.textContent = displayLabel;
+    this.quickImageSizeButton.setAttribute('aria-label', `${this.out('Image size')}: ${displayLabel}`);
+  }
+  /**
+   * Populate the size popover with available options
+   */
+
+
+  populateSizePopover(sizes, selectedSize) {
+    const out = s => this.out(s);
+
+    const sizeDefs = {
+      'square_hd': out('Square HD'),
+      'square': out('Square'),
+      'landscape_4_3': out('Landscape 4x3'),
+      'landscape_16_9': out('Landscape 16x9'),
+      'portrait_4_3': out('Portrait 3x4'),
+      'portrait_16_9': out('Portrait 9x16'),
+      '1:1': out('Square'),
+      '3:2': out('Landscape 3x2'),
+      '4:3': out('Landscape 4x3'),
+      '5:4': out('Landscape 5x4'),
+      '16:9': out('Landscape 16x9'),
+      '21:9': out('Landscape 21:9'),
+      '2:3': out('Portrait 2x3'),
+      '3:4': out('Portrait 3x4'),
+      '4:5': out('Portrait 4x5'),
+      '9:16': out('Portrait 9x16'),
+      '9:21': out('Portrait 9:21')
+    };
+    this.sizeOptionsContainer.innerHTML = '';
+    sizes.forEach(size => {
+      const option = document.createElement('div');
+      option.className = 'size-option' + (size === selectedSize ? ' selected' : '');
+      option.setAttribute('role', 'menuitem');
+      option.setAttribute('tabindex', '0');
+      const radio = document.createElement('input');
+      radio.type = 'radio';
+      radio.name = 'quickImageSize';
+      radio.value = size;
+      radio.checked = size === selectedSize;
+      radio.id = `quick-size-${size}`;
+      const label = document.createElement('label');
+      label.htmlFor = `quick-size-${size}`;
+      label.textContent = sizeDefs[size] || size; // label.style.cursor = 'pointer';
+
+      label.style.flex = '1';
+      option.appendChild(radio);
+      option.appendChild(label); // Click handler
+
+      option.addEventListener('click', () => {
+        this.selectImageSize(size);
+      }); // Keyboard handler
+
+      option.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.selectImageSize(size);
+        }
+      });
+      this.sizeOptionsContainer.appendChild(option);
+    });
+  }
+  /**
+   * Handle size selection
+   */
+
+
+  selectImageSize(size) {
+    // Update settings
+    this.settings.imageSize = size; // Sync with settings dialog
+
+    this.imageSizeSelect.value = size; // Update button label
+
+    this.updateButtonLabel(size); // Update popover selection
+
+    this.sizeOptionsContainer.querySelectorAll('.size-option').forEach(opt => {
+      opt.classList.remove('selected');
+      opt.querySelector('input[type="radio"]').checked = false;
+    }); // const selectedOption = this.sizeOptionsContainer.querySelector(`#quick-size-${size}`);
+
+    const selectedOption = Array.from(this.sizeOptionsContainer.querySelectorAll('input[type="radio"]')).find(radio => radio.value === size);
+
+    if (selectedOption) {
+      selectedOption.closest('.size-option').classList.add('selected');
+      selectedOption.checked = true;
+    } // Save to storage
+
+
+    this.saveSettingsToStorage(); // Close popover
+
+    this.closeImageSizePopover(); // Focus back to input
+
+    this.promptInput.focus();
+  }
+  /**
+   * Toggle popover visibility
+   */
+
+
+  toggleImageSizePopover() {
+    const isVisible = this.imageSizePopover.style.display !== 'none';
+
+    if (isVisible) {
+      this.closeImageSizePopover();
+    } else {
+      this.openImageSizePopover();
+    }
+  }
+  /**
+   * Open the size popover
+   */
+
+
+  openImageSizePopover() {
+    this.imageSizePopover.style.display = 'block';
+    this.imageSizePopover.setAttribute('aria-hidden', 'false');
+    this.quickImageSizeButton.setAttribute('aria-expanded', 'true'); // Focus first option
+
+    const firstOption = this.sizeOptionsContainer.querySelector('.size-option');
+
+    if (firstOption) {
+      firstOption.focus();
+    }
+  }
+  /**
+   * Close the size popover
+   */
+
+
+  closeImageSizePopover() {
+    this.imageSizePopover.style.display = 'none';
+    this.imageSizePopover.setAttribute('aria-hidden', 'true');
+    this.quickImageSizeButton.setAttribute('aria-expanded', 'false');
+  }
 
   out(s) {
     let result = this.builder.lang[s];
@@ -146311,6 +148064,91 @@ Use grayscale for minimalist design.
 
 > **Editorial Style:** Stick to black, white, and grays for a clean, minimalist aesthetic. Use color sparingly for accents.
 
+` + `
+
+### Animation
+
+**Transition**
+
+Classes: transition-none, transition, transition-colors, transition-opacity, transition-shadow, transition-transform, transition-all
+
+**Duration**
+
+Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000, duration-1500
+
+**Timing**
+
+Classes: ease-linear, ease-in, ease-out, ease-in-out
+
+**Delay**
+
+Classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500
+
+**Scale**
+
+Classes: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
+
+**Hover Effect**
+
+Classes: hover:scale-105
+
+**Rotate**
+
+Classes: rotate-0, rotate-45, rotate-90, rotate-180
+
+**Translate X**
+
+Classes: translate-x-0, translate-x-1, translate-x-2, translate-x-4, translate-x-8
+
+**Translate Y**
+
+Classes: translate-y-0, translate-y-1, translate-y-2, translate-y-4, translate-y-8
+
+**Skew**
+
+Classes: skew-x-0, skew-x-3, skew-x-6, skew-y-0, skew-y-3, skew-y-6
+
+**Overflow**
+
+Classes: overflow-hidden, overflow-visible, overflow-scroll, overflow-auto
+
+**Opacity**
+
+Classes:
+
+| Class        | Color         |
+| ------------ | ------------- |
+| '.opacity-0' | opacity: 0    |
+| '.opacity-2' | opacity: 0.02 |
+| '.opacity-4' | opacity: 0.04 |
+| '.opacity-5' | opacity: 0.05 |
+| '.opacity-6' | opacity: 0.06 |
+| '.opacity-8' | opacity: 0.07 |
+| '.opacity-10' | opacity: 0.1 |
+| '.opacity-12' | opacity: 0.12 |
+| '.opacity-15' | opacity: 0.15 |
+| '.opacity-20' | opacity: 0.2 |
+| '.opacity-25' | opacity: 0.25 |
+| '.opacity-30' | opacity: 0.3 |
+| '.opacity-35' | opacity: 0.35 |
+| '.opacity-40' | opacity: 0.4 |
+| '.opacity-45' | opacity: 0.45 |
+| '.opacity-50' | opacity: 0.5 |
+| '.opacity-55' | opacity: 0.55 |
+| '.opacity-60' | opacity: 0.6 |
+| '.opacity-65' | opacity: 0.65 |
+| '.opacity-70' | opacity: 0.7 |
+| '.opacity-75' | opacity: 0.75 |
+| '.opacity-80' | opacity: 0.8 |
+| '.opacity-85' | opacity: 0.85 |
+| '.opacity-90' | opacity: 0.9 |
+| '.opacity-95' | opacity: 0.95 |
+| '.opacity-100' | opacity: 1 |
+
+**Animation keyframes**
+
+Classes: spin, ping, pulse, bounce
+` + `
 ---
 ` + `
 ## Common Patterns
@@ -146587,6 +148425,31 @@ When creating icon-based features, benefits, or service sections: use Bootstrap
 <h4 class="size-18 font-medium text-center pb-3">Lightning Fast</h4>
 <p class="size-14 leading-16 text-gray-600 text-center">Description...</p>
 
+### 9. Image Layout with Hover Effect
+
+Use this pattern for all images (galleries, featured images, portfolio items):
+
+<div class="w-full overflow-hidden relative bg-gray-50" style="aspect-ratio:16/9">
+    <img src="..." alt="..." class="w-full h-full object-cover transition-transform duration-1500 hover:scale-105">
+</div>
+
+**Key elements:**
+- 'aspect-ratio:16/9' - maintains proportions (adjust as needed: 1/1, 4/3, 3/2, 16/9, etc.)
+- 'overflow-hidden' - keeps scaled image contained
+- 'bg-gray-50' - placeholder while image loads
+- 'transition-transform duration-1000' - smooth 1-second animation
+- 'hover:scale-105' - subtle 5% scale on hover
+- 'object-cover' - ensures image fills container
+
+**Common aspect ratios:**
+- Square: 'aspect-ratio:1/1'
+- Portrait: 'aspect-ratio:3/4' or 'aspect-ratio:2/3'
+- Landscape: 'aspect-ratio:4/3' or 'aspect-ratio:3/2'
+- Wide: 'aspect-ratio:16/9' or 'aspect-ratio:21/9'
+- Tall portrait: 'aspect-ratio:9/16'
+
+Always include this hover effect for a polished, interactive feel.
+
 `;
 
 const contextBoxFramework = `
@@ -147355,45 +149218,120 @@ The frameworks provide utility classes for structure and typography. To create r
     <!-- Content -->
 </div>
 
-<!-- More sections... -->
+<!-- Section 3 -->
+<div class="is-section is-box is-section-100 type-system-ui">
+
+    <div class="is-container leading-14 size-18 is-content-1100">
+
+        <div class="row">
+            <div class="column">
+
+                <!-- GUIDANCE: Use this layout to show images at any aspect ratio with a hover scale effect -->
+                <div class="w-full overflow-hidden relative bg-gray-50" style="aspect-ratio:16/9">
+                    <img src="https://placehold.co/1200x1200/f5f5f5/999?text=Featured" alt="Featured Project" class="w-full h-full object-cover transition-transform duration-1500 hover:scale-105">
+                </div>
+
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="column">
+
+                <div class="featured-image">
+                    <img src="https://placehold.co/1600x700" alt="Featured Project">
+                </div>
+
+            </div>
+        </div>
+
+        <div class="row portfolio-row">
+            <div class="column">
+
+                <div class="row-image">
+                    <img src="https://placehold.co/1200x900" alt="Digital Banking">
+                </div>
+
+            </div>
+            <div class="column">
+
+                <!-- Content -->
+
+            </div>
+        </div>
+
+        <div class="row">
+
+            <div class="column">
+
+                <div class="p-12 bg-gray-50 hover-lift">
+                    <p class="size-18 leading-17 text-black pb-8">The level of professionalism and expertise demonstrated throughout the project was outstanding. Highly recommend to anyone looking for quality work.</p>
+                    <p class="size-14 font-semibold text-black pb-1">Michael Chen</p>
+                    <p class="size-13 text-gray-600 tracking-wide">Founder, Innovation Labs</p>
+                </div>
+
+            </div>
+            <div class="column">
+
+                <!-- Content -->
 
-<!-- Embedded styles if needed -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Embedded Styke -->
 <style>
-@keyframes pulse {
-    0%,
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 0.8;
+    /* Subtle hover zoom for background images */
+    .is-overlay-bg {
+        transition: transform 1s ease;
+    }
+    .is-box:hover .is-overlay-bg {
         transform: scale(1.05);
     }
-}
 
-@keyframes scroll {
-    0%,
-    100% {
-        transform: translateY(0);
-        opacity: 0;
+    /* Featured image */
+    .featured-image {
+        width: 100%;
+        aspect-ratio: 21/9;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
     }
-    50% {
-        opacity: 1;
+    .featured-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .featured-image:hover img {
+        transform: scale(1.03);
     }
-}
 
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
+    /* Row image */
+    .row-image {
+        width: 100%;
+        aspect-ratio: 4/3;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
     }
-    to {
-        transform: rotate(360deg);
+    .row-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .portfolio-row:hover .row-image img {
+        transform: scale(1.05);
     }
-}
 
-.custom-hover-effect {
-    transition: all 0.3s ease;
-}
+    /* Smooth hover animations */
+    .hover-lift {
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .hover-lift:hover {
+        transform: translateY(-4px);
+    }
 </style>
 
 
@@ -147425,9 +149363,9 @@ The frameworks provide utility classes for structure and typography. To create r
 - **Pure white dominant**: Clean #ffffff backgrounds, not cream or off-white
 - **Minimal color usage**: Mostly black text on white, with occasional single accent color
 - **Light gray backgrounds**: #f5f5f5 or #e5e5e5 for page backgrounds behind white cards
-- **Strategic black sections**: Full black backgrounds for contrast moments
-- **Accent color blocks**: Small pops of color (red, orange) used sparingly as highlights
-
+` + // - **Strategic black sections**: Full black backgrounds for contrast moments
+// - **Accent color blocks**: Small pops of color (red, orange) used sparingly as highlights
+`
 ### Information Architecture
 - **Numbered lists**: "1. OVERVIEW", "2. SERVICES", etc. as section headers
 - **Metadata in lines**: "Client Name | Project Type | Year" separated by pipes or lines
@@ -154066,6 +156004,33 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         */
 
       },
+      demoMode: false,
+
+      /*
+      demoConversations: [
+          {
+              role: 'user',
+              content: 'Generate an image: "a house with beautiful mountain view. warm sunlight, golden-hour lighting, filmic teal-orange color grade".',
+              // timestamp: Date.now() - 180000 // 3 minutes ago
+          },
+          {
+              role: 'assistant',
+              content: '✓ Image generated successfully',
+              imagePreview: [
+                  { url: 'uploads/ai-8vnqv.png', context: 'Generate image of a house with a beautiful mountain view' },
+              ]
+          },
+          {
+              role: 'user',
+              content: `Create a thoughtful article about finding home in extraordinary landscapes. Write vivid prose about mountain dwellings and how our environments shape the way we live.
+      Use the generated image for this article, and present it as a premium design magazine feature.`,
+          },
+          {
+              role: 'assistant',
+              content: '✓ Create a thoughtful article about finding home in extraordinary landscapes with vivid prose about mountain dwellings and their impact on our lives, formatted as a premium design magazine feature.',
+          }
+      ],
+      */
 
       /* Old Version (backward compatible) */
       onAddSectionOpen: function () {},
@@ -157480,7 +159445,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
     });
     arrSections.forEach(section => {
-      // Code Blocks Handling
+      if (!section.classList.contains('is-section')) return; // Code Blocks Handling
+
       let codeBlocks = section.querySelectorAll('[data-html]');
       codeBlocks.forEach(element => {
         let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
@@ -158317,6 +160283,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       // Add missing is-box class for full width (non splitted) section
       if (!section.querySelector('.is-box')) {
         section.classList.add('is-box');
+      } else {
+        section.classList.remove('is-box');
       }
 
       const containers = section.querySelectorAll('.is-container');