@innovastudio/contentbuilder 1.5.189 → 1.5.191

package/public/contentbuilder/contentbuilder.esm.js

@@ -88119,6 +88119,10 @@ class CodeChat {
     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
@@ -88128,6 +88132,9 @@ class CodeChat {
       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'
     }, {
@@ -88455,6 +88462,12 @@ class CodeChat {
       // 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 {
@@ -88786,10 +88799,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 {
@@ -89050,9 +89065,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"
@@ -89102,10 +89226,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"
@@ -89119,15 +89257,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"
@@ -89261,9 +89414,16 @@ class CodeChat {
     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', () => {
@@ -89346,7 +89506,45 @@ class CodeChat {
     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);
@@ -89453,6 +89651,9 @@ class CodeChat {
     // Trigger initial render with defaults
     modelSelect.value = defaultModelId;
     renderSizes(defaultModelId, false);
+
+    // NEW: Initialize quick size button
+    this.updateQuickImageSizeButton();
   }
 
   /**
@@ -89518,6 +89719,9 @@ class CodeChat {
     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();
     }
@@ -89529,6 +89733,9 @@ class CodeChat {
     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();
   }
 
@@ -89562,6 +89769,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:
 [
   {
@@ -89672,6 +89979,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);
@@ -89739,14 +90051,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);
+                  }
+                }
               }
             }
           }
@@ -89800,15 +90140,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);
@@ -89829,6 +90170,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):
@@ -89836,11 +90203,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
@@ -89910,6 +90285,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:
@@ -89947,6 +90334,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}
@@ -90030,7 +90428,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) => {
@@ -90045,7 +90445,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';
       }
 
@@ -90142,6 +90543,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}
@@ -90594,6 +90999,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;
@@ -91019,7 +91737,7 @@ Classes: transition-none, transition, transition-colors, transition-opacity, tra
 
 **Duration**
 
-Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000
+Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000, duration-1500
 
 **Timing**
 
@@ -91033,6 +91751,10 @@ Classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500
 
 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
@@ -91366,6 +92088,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 = `
@@ -91565,6 +92312,17 @@ The frameworks provide utility classes for structure and typography. To create r
 
 **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">
 
@@ -91739,6 +92497,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: () => {