@innovastudio/contentbox 1.6.178 → 1.6.180

package/public/contentbox/contentbox.esm.js

@@ -8869,6 +8869,7 @@ class Text {
   }
 
   cleanColorClasses(elm) {
+    elm.classList.remove('text-white');
     elm.classList.remove('text-black');
     elm.classList.remove('text-gray-50');
     elm.classList.remove('text-gray-100');
@@ -10753,7 +10754,7 @@ class PanelText {
                     <div class="inp-fontfamily" style="width:218px;">
                     </div>
 
-                    <div class="label changedevice">
+                    <div class="label changedevice mt-3">
                         <span>${out('Font Size')}:</span>
                         <span class="val-fontsize" style="flex-grow:1;margin-left:9px"></span>
                         <button title="${out('Change Device')}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>
@@ -10766,7 +10767,7 @@ class PanelText {
                         <button title="${out('Clear')}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
 
-                    <div class="label flex flex-row">
+                    <div class="label flex flex-row mt-2">
                         <span>${out('Font Weight')}:</span>
                         <span class="val-fontweight" style="flex-grow:1;margin-left:9px"></span>
                     </div>
@@ -10813,7 +10814,7 @@ class PanelText {
                         <button title="${out('Clear')}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
 
-                    <div class="label flex flex-row">
+                    <div class="label flex flex-row mt-2">
                         <span>${out('Letter Spacing')}:</span>
                         <span class="val-letterspacing" style="flex-grow:1;margin-left:9px"></span>
                     </div>
@@ -10826,7 +10827,7 @@ class PanelText {
                         <button title="${out('Clear')}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
 
-                    <div class="label">${out('List & Indentation')}:</div>
+                    <div class="label mt-2">${out('List & Indentation')}:</div>
 
                     <div class="group listindent">
                         <button title="${out('Bullets')}" data-action="insertUnorderedList"><svg style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>
@@ -10834,6 +10835,63 @@ class PanelText {
                         <button title="${out('Indent')}" data-action="indent"><svg style="width:12px;height:12px;"><use xlink:href="#icon-indent"></use></svg></button>
                         <button title="${out('Outdent')}" data-action="outdent"><svg style="width:12px;height:12px;"><use xlink:href="#icon-outdent"></use></svg></use></svg></svg></button>
                     </div>
+
+                    <div class="label mt-2">${out('Top Spacing')}:</div>
+
+                    <div class="group textspacing">
+                        <button title="2" data-topspacing="2">2</button>
+                        <button title="4" data-topspacing="4">4</button>
+                        <button title="6" data-topspacing="6">6</button>
+                        <button title="8" data-topspacing="8">8</button>
+                        <button title="10" data-topspacing="10">10</button>
+                        <button title="12" data-topspacing="12">12</button>
+                        <button title="14" data-topspacing="14">14</button>
+                        <button title="16" data-topspacing="16">16</button>
+                        <button title="20" data-topspacing="20">20</button>
+                        <button title="${out('Clear')}" data-topspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                    </div>
+
+                    <div class="label mt-2">${out('Bottom Spacing')}:</div>
+
+                    <div class="group textspacing">
+                        <button title="2" data-bottomspacing="2">2</button>
+                        <button title="4" data-bottomspacing="4">4</button>
+                        <button title="6" data-bottomspacing="6">6</button>
+                        <button title="8" data-bottomspacing="8">8</button>
+                        <button title="10" data-bottomspacing="10">10</button>
+                        <button title="12" data-bottomspacing="12">12</button>
+                        <button title="14" data-bottomspacing="14">14</button>
+                        <button title="16" data-bottomspacing="16">16</button>
+                        <button title="20" data-bottomspacing="20">20</button>
+                        <button title="${out('Clear')}" data-bottomspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                    </div>
+
+                    <div class="flex items-end mt-1">
+                        <label>
+                            <div class="mt-2 mb-2">${out('Max Width')} (px):</div>
+                            <input type="number" class="inp-maxwidth" style="width:80px" min="0">&nbsp;
+                        </label>
+
+                        <button class="btn-blockcenter toggle" data-blockalign="left" title="${out('Left')}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" opacity="0.6"/>
+                                <rect x="5" y="7" width="7" height="10" rx="1"/>
+                            </svg>
+                        </button>
+                        <button class="btn-blockcenter toggle" data-blockalign="center"  title="${out('Center')}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" opacity="0.6"/>
+                                <rect x="8.5" y="7" width="7" height="10" rx="1"/>
+                            </svg>
+                        </button>
+                        <button class="btn-blockcenter toggle" data-blockalign="right"  title="${out('Right')}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" opacity="0.6"/>
+                                <rect x="12" y="7" width="7" height="10" rx="1"/>
+                            </svg>
+                        </button>
+                    </div>
+
                 </div>
 
             </div>
@@ -11111,6 +11169,84 @@ class PanelText {
 
       this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
     });
+    const btnTopSpacings = panel.querySelectorAll('[data-topspacing]');
+    btnTopSpacings.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.saveForUndo();
+        let elm = this.builder.controlpanel.activeElement;
+        const val = btn.getAttribute('data-topspacing');
+        panel.querySelectorAll('[data-topspacing]').forEach(btn => btn.classList.remove('active'));
+        const spacing = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20];
+        spacing.forEach(s => elm.classList.remove(`pt-${s}`));
+
+        if (val !== '') {
+          elm.classList.add(`pt-${val}`);
+          btn.classList.add('active');
+        }
+
+        this.builder.editor.onChange();
+      });
+    });
+    const btnBottomSpacings = panel.querySelectorAll('[data-bottomspacing]');
+    btnBottomSpacings.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.saveForUndo();
+        let elm = this.builder.controlpanel.activeElement;
+        const val = btn.getAttribute('data-bottomspacing');
+        panel.querySelectorAll('[data-bottomspacing]').forEach(btn => btn.classList.remove('active'));
+        const spacing = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20];
+        spacing.forEach(s => elm.classList.remove(`pb-${s}`));
+
+        if (val !== '') {
+          elm.classList.add(`pb-${val}`);
+          btn.classList.add('active');
+        }
+
+        this.builder.editor.onChange();
+      });
+    });
+    const inpMaxWidth = this.panel.querySelector('.inp-maxwidth');
+    let debounceTimer;
+    inpMaxWidth.addEventListener('input', () => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        this.builder.editor.saveForUndo();
+        let val = inpMaxWidth.value;
+        let elm = this.builder.controlpanel.activeElement;
+
+        if (val !== '') {
+          elm.style.maxWidth = val + 'px';
+        } else {
+          elm.style.maxWidth = '';
+        }
+
+        this.builder.editor.onChange();
+      }, 800);
+    });
+    const btnBlockCenters = panel.querySelectorAll('.btn-blockcenter');
+    btnBlockCenters.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.saveForUndo();
+        let elm = this.builder.controlpanel.activeElement;
+        const val = btn.getAttribute('data-blockalign');
+        panel.querySelectorAll('[data-blockalign]').forEach(btn => btn.classList.remove('active'));
+
+        if (val === 'left') {
+          elm.style.marginLeft = '';
+          elm.style.marginRight = 'auto';
+        } else if (val === 'center') {
+          elm.style.marginLeft = 'auto';
+          elm.style.marginRight = 'auto';
+        } else if (val === 'right') {
+          elm.style.marginLeft = 'auto';
+          elm.style.marginRight = '';
+        }
+
+        btn.classList.add('active'); // this.builder.onChange();
+
+        this.builder.editor.onChange(); // this is because the changed element is in ContentBuilder scope
+      });
+    });
   }
 
   editorReady() {
@@ -11485,6 +11621,50 @@ class PanelText {
     }
 
     this.heading.closeOptions();
+    this.panel.querySelectorAll('[data-blockalign]').forEach(btn => btn.classList.remove('active'));
+    const inpMaxWidth = this.panel.querySelector('.inp-maxwidth');
+    const maxWidth = activeElement.style.maxWidth;
+
+    if (maxWidth) {
+      inpMaxWidth.value = parseInt(maxWidth);
+
+      if (activeElement.style.marginLeft === 'auto' && activeElement.style.marginRight === 'auto') {
+        const btn = this.panel.querySelector('[data-blockalign="center"]');
+        btn.classList.add('active');
+      } else if (activeElement.style.marginLeft === 'auto') {
+        const btn = this.panel.querySelector('[data-blockalign="right"]');
+        btn.classList.add('active');
+      } else {
+        const btn = this.panel.querySelector('[data-blockalign="left"]');
+        btn.classList.add('active');
+      }
+    } else {
+      inpMaxWidth.value = '';
+    }
+
+    this.panel.querySelectorAll('[data-topspacing]').forEach(btn => btn.classList.remove('active'));
+    const spacing = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20]; // Find which spacing class is currently applied
+
+    let currentSpacing = spacing.find(s => activeElement.classList.contains(`pt-${s}`)); // If a spacing class is found, activate the corresponding button
+
+    if (currentSpacing !== undefined) {
+      const btn = this.panel.querySelector(`[data-topspacing="${currentSpacing}"]`);
+
+      if (btn) {
+        btn.classList.add('active');
+      }
+    }
+
+    this.panel.querySelectorAll('[data-bottomspacing]').forEach(btn => btn.classList.remove('active'));
+    currentSpacing = spacing.find(s => activeElement.classList.contains(`pb-${s}`));
+
+    if (currentSpacing !== undefined) {
+      const btn = this.panel.querySelector(`[data-bottomspacing="${currentSpacing}"]`);
+
+      if (btn) {
+        btn.classList.add('active');
+      }
+    }
   }
 
   getStateTargeted() {
@@ -11611,6 +11791,61 @@ class PanelImage {
                     <div>${out('Title')}:</div>
                     <input type="text" class="inp-title" id="_inp_title_${this.random()}">
                 </label>
+
+                <div>
+                    <div class="mb-1 mt-5">${out('Aspect Ratio')}:</div>
+                    <div class="group aspectratio w-full">
+                        <button title="21:9" data-aspectratio="21 / 9">21:9</button>
+                        <button title="16:9" data-aspectratio="16 / 9">16:9</button>
+                        <button title="3:2" data-aspectratio="3 / 2">3:2</button>
+                        <button title="4:3" data-aspectratio="4 / 3">4:3</button>
+                        <button title="5:4" data-aspectratio="5 / 4">5:4</button>
+                        <button title="1:1" data-aspectratio="1 / 1">1:1</button>
+                        <button title="4:5" data-aspectratio="4 / 5">4:5</button>
+                        <button title="3:4" data-aspectratio="3 / 4">3:4</button>
+                        <button title="2:3" data-aspectratio="2 / 3">2:3</button>
+                        <button title="9:16" data-aspectratio="9 / 16">9:16</button>
+                        <button title="9:21" data-aspectratio="9 / 21">9:21</button>
+                        <button title="${out('Clear')}" class="btn-clear" data-aspectratio=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                    </div>
+                </div>
+
+                <label>
+                    <div class="mt-2 mb-2">${out('Border Radius')}:</div>
+                    <div class="items-center">
+                        <input type="number" class="inp-borderradius" style="width:80px" min="0">&nbsp;
+                        <span>px</span>
+                    </div>
+                </label>
+
+                <div>
+                    <div class="mb-1 mt-6">${out('Effects')}:</div>
+                    <div class="group imageeffect w-full">
+                        <button title="${out('Zoom')}" data-effect="scale-105" style="width: 105px;">Zoom</button>
+                        <button title="${out('Color')}" data-effect="grayscale-0" style="width: 105px;">Color</button>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="mb-1 mt-3">${out('Duration (s)')}:</div>
+                    <div class="group duration w-full">
+                        <!--<button title="75" data-duration="75">0.75</button>
+                        <button title="0.1" data-duration="100">0.1</button>
+                        <button title="0.15" data-duration="150">0.15</button>
+                        <button title="0.2" data-duration="200">0.2</button>
+                        <button title="0.3" data-duration="300">0.3</button>
+                        <button title="0.4" data-duration="400">0.4</button>-->
+                        <button title="0.5" data-duration="500">0.5</button>
+                        <!--<button title="0.6" data-duration="600">0.6</button>-->
+                        <button title="0.7" data-duration="700">0.7</button>
+                        <!--<button title="0.8" data-duration="800">0.8</button>
+                        <button title="0.9" data-duration="900">0.9</button>-->
+                        <button title="1" data-duration="1000">1</button>
+                        <!--<button title="1.2" data-duration="1200">1.2</button>-->
+                        <button title="1.5" data-duration="1500">1.5</button>
+                        <button title="${out('Clear')}" class="btn-clear" data-duration=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                    </div>
+                </div>
             </div>
         </div>
         `;
@@ -11675,6 +11910,184 @@ class PanelImage {
 
       this.builder.editor.onChange();
     });
+    const btnAspectRatios = panel.querySelectorAll('[data-aspectratio]');
+    btnAspectRatios.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let img = this.builder.controlpanel.activeElement;
+        const val = btn.getAttribute('data-aspectratio'); // let div = img.closest('.overflow-hidden');
+
+        const parent = img.parentNode;
+        const grandparent = parent && parent.parentNode;
+        let div = null;
+
+        if (parent && parent.classList.contains('overflow-hidden')) {
+          div = parent;
+        } else if (grandparent && grandparent.classList.contains('overflow-hidden')) {
+          div = grandparent;
+        }
+
+        if (val === '' && !img.classList.contains('hover:scale-105')) {
+          // if not using scale effect
+          // Clear button clicked - remove wrapper
+          if (div) {
+            // Check if image is wrapped in a link
+            const link = div.querySelector('a');
+
+            if (link && link.contains(img)) {
+              // Move link out of div, then remove div
+              div.parentNode.insertBefore(link, div);
+              div.remove();
+            } else {
+              // Move image out of div, then remove div
+              div.parentNode.insertBefore(img, div);
+              div.remove();
+            } // Remove the aspect ratio classes from image
+
+
+            img.classList.remove('w-full', 'h-full', 'object-cover');
+            this.builder.editor.element.image.repositionImageTool();
+            this.builder.editor.element.image.hideImageResizer();
+            this.builder.editor.elmTool.repositionElementTool();
+          }
+        } else if (div) {
+          div.style.aspectRatio = val;
+          this.builder.editor.element.image.repositionImageTool();
+          this.builder.editor.element.image.hideImageResizer();
+          this.builder.editor.elmTool.repositionElementTool();
+        } else {
+          div = document.createElement('div');
+          div.className = 'w-full overflow-hidden relative bg-gray-50';
+          div.style.aspectRatio = val;
+          img.classList.add('w-full', 'h-full', 'object-cover');
+
+          if (img.parentNode.tagName.toLowerCase() === 'a') {
+            // Image is wrapped in a hyperlink
+            const link = img.parentNode;
+            link.parentNode.insertBefore(div, link); // Insert div before the link
+
+            div.appendChild(link); // Move link into div
+          } else {
+            img.parentNode.insertBefore(div, img); // Insert div before the img
+
+            div.appendChild(img); // Move img into div
+          }
+
+          this.builder.editor.element.image.repositionImageTool();
+          this.builder.editor.element.image.hideImageResizer();
+          this.builder.editor.elmTool.repositionElementTool();
+        }
+
+        panel.querySelectorAll('[data-aspectratio]').forEach(btn => btn.classList.remove('on'));
+
+        if (val !== '') {
+          const btnSelected = panel.querySelector(`[data-aspectratio="${val}"]`);
+          if (btnSelected) btnSelected.classList.add('on');
+        }
+      });
+    });
+    const btnEffects = panel.querySelectorAll('[data-effect]');
+    btnEffects.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let img = this.builder.controlpanel.activeElement;
+        const val = btn.getAttribute('data-effect');
+
+        if (val === 'scale-105') {
+          if (img.classList.contains('hover:scale-105')) {
+            img.classList.remove('hover:scale-105');
+            btn.classList.remove('active');
+          } else {
+            img.classList.add('hover:scale-105');
+            btn.classList.add('active'); // If not wrapped in div, add it by clicking the clear button
+
+            const parent = img.parentNode;
+            const grandparent = parent && parent.parentNode;
+            let div = null;
+
+            if (parent && parent.classList.contains('overflow-hidden')) {
+              div = parent;
+            } else if (grandparent && grandparent.classList.contains('overflow-hidden')) {
+              div = grandparent;
+            }
+
+            if (!div) {
+              const btnClear = panel.querySelector('[data-aspectratio=""]');
+              if (btnClear) btnClear.click();
+            }
+          }
+        }
+
+        if (val === 'grayscale-0') {
+          if (img.classList.contains('hover:grayscale-0')) {
+            img.classList.remove('grayscale');
+            img.classList.remove('hover:grayscale-0');
+            btn.classList.remove('active');
+          } else {
+            img.classList.add('grayscale');
+            img.classList.add('hover:grayscale-0');
+            btn.classList.add('active');
+          }
+        }
+
+        if (img.classList.contains('hover:scale-105') && img.classList.contains('hover:grayscale-0')) {
+          img.classList.add('transition');
+          img.classList.remove('transition-transform');
+        } else if (img.classList.contains('hover:scale-105')) {
+          img.classList.remove('transition');
+          img.classList.add('transition-transform');
+        } else if (img.classList.contains('hover:grayscale-0')) {
+          img.classList.add('transition');
+          img.classList.remove('transition-transform');
+        } else {
+          img.classList.remove('transition');
+          img.classList.remove('transition-transform');
+        }
+      });
+    });
+    const btnDurations = panel.querySelectorAll('[data-duration]');
+    btnDurations.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let img = this.builder.controlpanel.activeElement;
+        const val = btn.getAttribute('data-duration'); // Remove all existing duration classes
+
+        img.classList.remove('duration-75', 'duration-100', 'duration-150', 'duration-200', 'duration-300', 'duration-400', 'duration-500', 'duration-600', 'duration-700', 'duration-800', 'duration-900', 'duration-1000', 'duration-1200', 'duration-1500'); // Add the new duration class
+
+        if (val !== '') {
+          img.classList.add('duration-' + val);
+        }
+
+        panel.querySelectorAll('[data-duration]').forEach(btn => btn.classList.remove('on'));
+
+        if (val !== '') {
+          const btnSelected = panel.querySelector(`[data-duration="${val}"]`);
+          if (btnSelected) btnSelected.classList.add('on');
+        }
+      });
+    });
+    const inpBorderRadius = this.panel.querySelector('.inp-borderradius');
+    inpBorderRadius.addEventListener('input', () => {
+      this.builder.editor.saveForUndo();
+      let val = inpBorderRadius.value;
+      let img = this.builder.controlpanel.activeElement; // let div = img.closest('.overflow-hidden');
+
+      const parent = img.parentNode;
+      const grandparent = parent && parent.parentNode;
+      let div = null;
+
+      if (parent && parent.classList.contains('overflow-hidden')) {
+        div = parent;
+      } else if (grandparent && grandparent.classList.contains('overflow-hidden')) {
+        div = grandparent;
+      }
+
+      if (div) {
+        div.style.borderRadius = val + 'px';
+      } else {
+        img.style.borderRadius = val + 'px';
+      }
+
+      if (val === 0) img.style.borderRadius = '';
+      this.builder.editor.onChange();
+    });
   }
 
   editorReady() {
@@ -11732,6 +12145,56 @@ class PanelImage {
 
     const inpTitle = panel.querySelector('.inp-title');
     inpTitle.value = alt;
+    const btnZoomEffect = panel.querySelector('[data-effect="scale-105"]');
+
+    if (img.classList.contains('hover:scale-105')) {
+      btnZoomEffect.classList.add('active');
+    } else {
+      btnZoomEffect.classList.remove('active');
+    }
+
+    const btnColorEffect = panel.querySelector('[data-effect="grayscale-0"]');
+
+    if (img.classList.contains('hover:grayscale-0')) {
+      btnColorEffect.classList.add('active');
+    } else {
+      btnColorEffect.classList.remove('active');
+    }
+
+    panel.querySelectorAll('[data-aspectratio]').forEach(btn => btn.classList.remove('on')); // const div = img.closest('.overflow-hidden');
+
+    const parent = img.parentNode;
+    const grandparent = parent && parent.parentNode;
+    let div = null;
+
+    if (parent && parent.classList.contains('overflow-hidden')) {
+      div = parent;
+    } else if (grandparent && grandparent.classList.contains('overflow-hidden')) {
+      div = grandparent;
+    }
+
+    if (div) {
+      const aspectRatio = div.style.aspectRatio;
+
+      if (aspectRatio) {
+        const btnSelected = panel.querySelector(`[data-aspectratio="${aspectRatio}"]`);
+        btnSelected.classList.add('on');
+      }
+    }
+
+    panel.querySelectorAll('[data-duration]').forEach(btn => btn.classList.remove('on'));
+    const durations = ['75', '100', '150', '200', '300', '400', '500', '600', '700', '800', '900', '1000', '1200', '1500'];
+    const currentDuration = durations.find(d => img.classList.contains(`duration-${d}`));
+
+    if (currentDuration) {
+      const btnSelected = panel.querySelector(`[data-duration="${currentDuration}"]`);
+      btnSelected.classList.add('on');
+    }
+
+    const inpBorderRadius = this.panel.querySelector('.inp-borderradius');
+    const targetElement = div || img;
+    const borderRadius = targetElement.style.borderRadius;
+    inpBorderRadius.value = parseInt(borderRadius) || 0;
   }
 
   updateImageSrc(src) {
@@ -17439,7 +17902,7 @@ class PanelSection {
         const s = btn.getAttribute('data-height');
         this.section.setSectionHeight(s);
         btnHeight.forEach(btn => btn.classList.remove('on'));
-        if (s !== '') btn.classList.add('on');
+        if (s !== '0') btn.classList.add('on');
       });
     });
     const btnSpacing = panel.querySelectorAll('[data-spacing]');
@@ -17519,7 +17982,7 @@ class PanelSection {
         const s = btn.getAttribute('data-animstart');
         this.section.sectionAnimStart(s);
         btnAnimStart.forEach(btn => btn.classList.remove('on'));
-        btn.classList.add('on');
+        if (s !== '') btn.classList.add('on');
       });
     });
     const btnAnimEnd = panel.querySelectorAll('[data-animend]');
@@ -17528,7 +17991,7 @@ class PanelSection {
         const s = btn.getAttribute('data-animend');
         this.section.sectionAnimEnd(s);
         btnAnimEnd.forEach(btn => btn.classList.remove('on'));
-        btn.classList.add('on');
+        if (s !== '') btn.classList.add('on');
       });
     }); // Scroll Button
 
@@ -17538,7 +18001,7 @@ class PanelSection {
         const s = btn.getAttribute('data-scrollpreset');
         this.section.sectionScrollPreset(s);
         btnScrollPreset.forEach(btn => btn.classList.remove('on'));
-        btn.classList.add('on');
+        if (s !== '') btn.classList.add('on');
       });
     }); // Responsive
 
@@ -33334,8 +33797,8 @@ class Util$1 {
       if (plugin) {
         element.insertAdjacentHTML('afterend', html);
         newelement = element.nextElementSibling;
-      } else if (!element.nextElementSibling && !element.closest('[data-subblock]')) {
-        // active element is div.display > p.
+      } else if (!element.nextElementSibling && element.closest('.display')) {
+        /*if(!element.nextElementSibling && !element.closest('[data-subblock]')) { // active element is div.display > p. */
         let activeCol = this.builder.activeCol;
         let current;
         const elms = dom.elementChildren(activeCol);
@@ -74764,11 +75227,17 @@ class Image$1 {
       }
       const newPos = util.getElementPosition(elm);
       let scaleX = newPos.scaleX;
+      let extraScaleX = this.getScale(elm).scaleX;
+      let extraScaleY = this.getScale(elm).scaleX;
       imageTool.style.display = 'flex';
       let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
-      let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
-      let top = newPos.top + window.pageYOffset;
+      let w = elm.offsetWidth * extraScaleX * scaleX * this.builder.opts.zoom;
+      let h = elm.offsetHeight * extraScaleY * scaleX * this.builder.opts.zoom;
+
+      // Compensate for the vertical shift caused by scaling
+      let scaleShiftY = (h - elm.offsetHeight * scaleX * this.builder.opts.zoom) / 2;
+      let top = newPos.top + window.pageYOffset + scaleShiftY;
       let left = newPos.left + window.pageXOffset;
       let toolLeft = left + (w / 2 - _toolwidth / 2);
 
@@ -74782,7 +75251,10 @@ class Image$1 {
       }
       imageTool.style.top = top + 'px';
       imageTool.style.left = toolLeft + 'px';
-      if (!this.builder.activeImage.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !this.builder.activeImage.closest('.is-block'))) {
+      const parent = elm.parentNode;
+      const grandparent = parent && parent.parentNode;
+      const hasWrapper = parent && parent.classList.contains('overflow-hidden') || grandparent && grandparent.classList.contains('overflow-hidden');
+      if (!hasWrapper && !this.builder.activeImage.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !this.builder.activeImage.closest('.is-block'))) {
         let imageResizer = this.imageResizer;
         imageResizer.style.top = top + 'px';
         imageResizer.style.left = left + 'px';
@@ -74818,6 +75290,21 @@ class Image$1 {
     if (imageTool) imageTool.style.display = '';
     this.hideImageResizer();
   }
+  getScale(element) {
+    const computedStyle = window.getComputedStyle(element);
+    const transform = computedStyle.transform;
+    if (!transform || transform === 'none') {
+      return {
+        scaleX: 1,
+        scaleY: 1
+      };
+    }
+    const matrix = new DOMMatrix(transform);
+    return {
+      scaleX: matrix.a,
+      scaleY: matrix.d
+    };
+  }
   click(e) {
     const util = this.builder.util;
     const dom = this.builder.dom;
@@ -74843,13 +75330,19 @@ class Image$1 {
         }
         const newPos = util.getElementPosition(elm);
         let scaleX = newPos.scaleX;
+        let extraScaleX = this.getScale(elm).scaleX;
+        let extraScaleY = this.getScale(elm).scaleX;
         this.renderTool();
         let imageTool = this.imageTool;
         imageTool.style.display = 'flex';
         let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
-        let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
-        let top = newPos.top + window.pageYOffset;
+        let w = elm.offsetWidth * extraScaleX * scaleX * this.builder.opts.zoom;
+        let h = elm.offsetHeight * extraScaleY * scaleX * this.builder.opts.zoom;
+
+        // Compensate for the vertical shift caused by scaling
+        let scaleShiftY = (h - elm.offsetHeight * scaleX * this.builder.opts.zoom) / 2;
+        let top = newPos.top + window.pageYOffset + scaleShiftY;
         let left = newPos.left + window.pageXOffset;
         let toolLeft = left + (w / 2 - _toolwidth / 2);
 
@@ -74863,9 +75356,12 @@ class Image$1 {
         }
         imageTool.style.top = top + 'px';
         imageTool.style.left = toolLeft + 'px';
+        const parent = elm.parentNode;
+        const grandparent = parent && parent.parentNode;
+        const hasWrapper = parent && parent.classList.contains('overflow-hidden') || grandparent && grandparent.classList.contains('overflow-hidden');
 
         // Image Resizer
-        if (!elm.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !elm.closest('.is-block'))) {
+        if (!hasWrapper && !elm.hasAttribute('data-noresize') && (this.builder.imageResizeOnBlock || !elm.closest('.is-block'))) {
           let imageResizer = this.imageResizer;
           const newPos = util.getElementPosition(elm);
           let top = newPos.top + window.pageYOffset;
@@ -74894,33 +75390,6 @@ class Image$1 {
           if (this.builder.moveable) this.builder.moveable.updateRect();
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
-
-          /*
-          const handleImageToolClickOut = e =>{
-              let elm = e.target;
-              if(!elm) return;
-              if(!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && 
-                  !elm.closest('.is-modal') && !elm.closest('.keep-selection') &&
-                  !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') &&
-                  !elm.closest('img')) { // click outside
-                  
-                  // hide
-                  this.hideImageTool();
-                   document.removeEventListener('click', handleImageToolClickOut);
-                  if(this.builder.iframeDocument) {
-                      this.builder.doc.removeEventListener('click', handleImageToolClickOut);
-                  }
-                  this.builder.handleImageToolClickOut_=false;
-              }
-          };
-          if(!this.builder.handleImageToolClickOut_) {
-              document.addEventListener('click', handleImageToolClickOut);
-              if(this.builder.iframeDocument) {
-                  this.builder.doc.addEventListener('click', handleImageToolClickOut);
-              }
-              this.builder.handleImageToolClickOut_=true;
-          }
-          */
         } else {
           let imageResizer = this.imageResizer;
           imageResizer.style.display = 'none';
@@ -118015,12 +118484,16 @@ OUT OF SCOPE requests include:
 ${imageGenEnabled ? '' : '- AI image generation (currently disabled - but external images are OK)'}
 
 IMPORTANT DISTINCTION:
-- "Tell me about the weather in general" → VALID (chat/education)
 - "What's the weather in Tokyo right now?" → INVALID (requires real-time data)
-- "Write a story about space" → VALID (chat/creative)
+- "Tell me about the weather in general" → VALID (chat task)
 - "Generate a video about space" → INVALID (video generation)
-- "Explain how databases work" → VALID (chat/education)
+- "Write a story about space" → VALID (chat task)
 - "Create a database for me" → INVALID (database operations)
+- "Explain how databases work" → VALID (chat task)
+- "How would you design this?" → VALID (chat task)
+- "I need help with..." → VALID (chat task)
+
+NOTE: Conversational requests, questions, and vague requests are ALL VALID and should be classified as "chat" tasks.
 
 Respond with a JSON object in this exact format:
 {
@@ -118045,6 +118518,15 @@ Task type definitions:
 - "chat": Conversations, questions, explanations, advice, discussions
 ${imageGenEnabled ? '- "image": Generate AI images and integrate them into the page' : ''}
 
+FALLBACK RULE:
+- If the request is vague, conversational, or doesn't clearly require code/image generation
+- If you're uncertain about how to categorize it
+- If it's a general question or discussion
+- If it seems like the user wants advice, help, or guidance
+→ Create a single "chat" task with the original user message
+
+CRITICAL: NEVER return an empty tasks array. When in doubt, use "chat".
+
 CODE TASK RULES:
 - ALWAYS combine multiple code-related instructions into ONE code task
 - The AI can handle complex, multi-part code generation in a single task
@@ -118372,6 +118854,11 @@ ${isMixed ? 'CRITICAL: Only perform the task specified above. Do not answer othe
 
       const system = `You are a helpful AI assistant for a web builder tool. You can answer questions about web development, design, HTML, CSS, JavaScript, and provide general assistance.
 
+When providing code examples:
+- Use markdown code blocks with language tags: \`\`\`html, \`\`\`css, \`\`\`javascript
+- Use inline code for short snippets: \`<element>\`
+- Never output raw HTML that could be rendered by the browser
+
 ${isMixed ? `CRITICAL INSTRUCTION: You are handling ONE SPECIFIC TASK from a multi-part request. 
 
 Your ONLY task is: ${task.description}
@@ -118728,6 +119215,14 @@ ${this.builder.html()}
     } else {
       this.builder.uo.saveForUndo();
     }
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(code, 'text/html');
+    const containers = doc.querySelectorAll('div.is-container');
+    containers.forEach(container => {
+      container.classList.add('size-17', 'leading-17'); // add default font-size & line-height
+    });
+
+    code = doc.body.innerHTML;
     this.builder.loadHtml(code);
   }
   escapeHtml(text) {
@@ -119271,11 +119766,13 @@ Classes: p-0, p-2, p-3, p-4, p-6, p-8, p-10, p-12
 **Example: Card with padding**
 
 <!-- Example: Card with padding -->
-<div class="p-12 bg-gray-50">
+<div class="p-12 box-border bg-gray-50">
     <p class="size-18 pb-4">Card content</p>
     <p class="size-14 text-gray-600">Description</p>
 </div>
 
+**Key classes:** p-X, box-border (always use box-border with padding on DIV or cards)
+
 ### Directional Padding
 
 Classes: px-4, py-4, pt-4, pb-4, pl-4, pr-4
@@ -119432,7 +119929,7 @@ border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full
     </a>
 </div>
 
-**Key classes:** 'underline' + 'border-transparent' (no horizontal padding needed).
+**Key classes:** 'underline'+ 'underline-offset-4' + 'border-transparent' (no horizontal padding needed).
 
 **For button groups:**
 
@@ -119508,8 +120005,7 @@ Use grayscale for minimalist design.
 > **Editorial Style:** Stick to black, white, and grays for a clean, minimalist aesthetic. Use color sparingly for accents.
 
 ` + `
-
-### Animation
+## Animation
 
 **Transition**
 
@@ -119517,80 +120013,117 @@ 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, duration-1500
+Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-400, duration-500, duration-600, duration-700, duration-800, duration-900, duration-1000, duration-1500
 
 **Timing**
 
 Classes: ease-linear, ease-in, ease-out, ease-in-out
 
-**Delay**
+**Hover Transforms**
 
-Classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500
+Classes: hover:scale-105, hover:-translate-y-1, hover:-translate-y-2
 
-**Scale**
+**Hover Shadow**
 
-Classes: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
+Classes: hover:shadow-sm, hover:shadow, hover:shadow-md, hover:shadow-lg, hover:shadow-xl, hover:shadow-2xl
 
-**Hover Effect**
+**Hover Background Colors**
 
-Classes: hover:scale-105
+Classes: hover:bg-white, hover:bg-black, hover:bg-gray-50, hover:bg-gray-100, hover:bg-gray-200, hover:bg-gray-300, hover:bg-gray-400, hover:bg-gray-500, hover:bg-gray-600, hover:bg-gray-700, hover:bg-gray-800, hover:bg-gray-900, hover:bg-transparent
 
-**Rotate**
+**Hover Text Colors**
 
-Classes: rotate-0, rotate-45, rotate-90, rotate-180
+Classes: hover:text-white, hover:text-black, hover:text-current, hover:text-gray-50, hover:text-gray-100, hover:text-gray-200, hover:text-gray-300, hover:text-gray-400, hover:text-gray-500, hover:text-gray-600, hover:text-gray-700, hover:text-gray-800, hover:text-gray-900, hover:text-gray-950
 
-**Translate X**
+**Hover Opacity**
 
-Classes: translate-x-0, translate-x-1, translate-x-2, translate-x-4, translate-x-8
+Classes: hover:opacity-70, hover:opacity-75, hover:opacity-80, hover:opacity-90, hover:opacity-95, hover:opacity-100
 
-**Translate Y**
+**Animation keyframes**
 
-Classes: translate-y-0, translate-y-1, translate-y-2, translate-y-4, translate-y-8
+Classes: spin, ping, pulse, bounce
 
-**Skew**
+### Animation Examples
 
-Classes: skew-x-0, skew-x-3, skew-x-6, skew-y-0, skew-y-3, skew-y-6
+**Example: Hover lift on Cards**
 
-**Overflow**
+<div class="row" style="gap: 30px;">
+    <div class="column">
+      	<!-- card -->
+        <div class="p-10 box-border bg-white h-full transition-transform duration-300 hover:-translate-y-2" style="border: 1px solid #e0e0e0;">
+            <div class="mb-6 text-gray-300"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
+            <p class="size-18 leading-16 mb-8 text-gray-800">"It's rare to find a tool that balances power with simplicity so effectively. It has completely streamlined our workflow."</p>
+            <p class="size-13 font-bold uppercase tracking-widest">Freja E. — Company</p>
+        </div>
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+</div>
 
-Classes: overflow-hidden, overflow-visible, overflow-scroll, overflow-auto
+**Key classes:** transition-transform, duration-300, hover:translate-y--2
 
-**Opacity**
+**Example: Hover lift and shadow on Cards**
 
-Classes:
+<div class="row" style="gap: 30px;">
+    <div class="column">
+      	<!-- card -->
+        <div class="p-10 box-border bg-white transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl" style="border: 1px solid #e5e5e5;">
+        		<!-- card content -->     
+        </div>
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+</div>
 
-| 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 |
+**Key classes:** transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl
 
-**Animation keyframes**
+**Example: Hover zoom on Cards**
 
-Classes: spin, ping, pulse, bounce
+<div class="row" style="gap: 30px;">
+    <div class="column">
+      	<!-- card -->
+        <div class="p-12 box-border bg-white h-full flex flex-col items-center text-center transition-transform duration-300 ease-out hover:scale-105" style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);">
+        		<!-- card content -->       
+        </div>
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+</div>
+
+**Key classes:** transition-transform, duration-300, ease-out, hover:scale-105
+
+**Example: Hover zoom on Images**
+
+<div class="row" style="gap:40px;">
+      <div class="column">
+          <div class="w-full overflow-hidden relative bg-gray-50 mb-6" style="aspect-ratio: 4 / 3;">
+              <img src="image1.jpg" alt="Freja E. Andersen" class="w-full h-full object-cover transition-transform hover:scale-105 duration-1000">
+          </div>
+          <h4 class="size-20 font-normal">Freja E. Andersen</h4>
+          <p class="size-14 text-gray-500 uppercase tracking-wide mt-1 mb-3">Lead Architect</p>
+          <p class="size-15 text-gray-600 leading-16">Specializing in sustainable residential architecture with a focus on natural light.</p>
+      </div>
+      <div class="column">
+          
+      </div>
+      <div class="column">
+          
+      </div>
+  </div>
+
+**Key classes:** transition-transform, hover:scale-105, duration-1000 (or use duration-1500 for larger image)
 ` + `
 ---
 ` + `
@@ -119613,7 +120146,7 @@ Classes: spin, ping, pulse, bounce
 
 ### Card with Padding
 
-<div class="p-12 bg-gray-50">
+<div class="p-12 box-border bg-gray-50">
     <p class="size-18 leading-17 text-black pb-4">
         Card title or content
     </p>
@@ -119660,16 +120193,18 @@ Classes: spin, ping, pulse, bounce
 </div>
 <div class="row">
     <div class="column">
-        <img class="pb-2" src="https://placehold.co/400x400/f5f5f5/999?text=Alex+T" alt="Team Member">
+      	<div class="w-full overflow-hidden relative bg-gray-50 mb-2" style="aspect-ratio: 4 / 3;">
+              <img src="image1.jpg" alt="Freja E. Andersen" class="w-full h-full object-cover transition-transform hover:scale-105 duration-1000">
+        </div>
         <h4 class="size-18 font-medium pb-2 text-center">Alex Thompson</h4>
         <p class="size-12 uppercase tracking-150 text-gray-500 pb-3 text-center">Founder &amp; CEO</p>
         <p class="size-15 leading-16 text-gray-600 text-center">Visionary leader with 15 years of experience.</p>
     </div>
     <div class="column">
-        <img class="pb-2" src="https://placehold.co/400x400/f5f5f5/999?text=Sophia+M" alt="Team Member">
-        <h4 class="size-18 font-medium pb-2 text-center">Sophia Martinez</h4>
-        <p class="size-12 uppercase tracking-150 text-gray-500 pb-3 text-center">CTO</p>
-        <p class="size-15 leading-16 text-gray-600 text-center">Technical architect building systems.</p>
+        <!-- Next image -->
+    </div>
+    <div class="column">
+        <!-- Next image -->
     </div>
 </div>
 
@@ -123067,6 +123602,10 @@ class ContentBuilder {
       const style = window.getComputedStyle(row);
       const gapValue = parseFloat(style.gap) || 0;
       const columns = row.querySelectorAll('.column');
+      columns.forEach(col => {
+        if (col.style.width === '100%') col.style.width = ''; // cleanup
+      });
+
       let allHaveWidth = true;
       let totalWidthPercent = 0;
       columns.forEach(col => {
@@ -123209,6 +123748,7 @@ class ContentBuilder {
             if (e.target.closest('[data-html]')) return; // normal paste
 
             e.preventDefault();
+            e.stopPropagation();
             let clipboardDataText = (e.clipboardData || window.clipboardData).getData('text');
             let clipboardDataHtml = (e.clipboardData || window.clipboardData).getData('text/html');
             if (clipboardDataHtml.trim() === '') clipboardDataHtml = clipboardDataText;
@@ -126185,7 +126725,9 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     if (!this.controlPanel) this.rte.click(col);
   }
   handleCellClick(col, e) {
-    if (col !== e.target.closest('.column')) return;
+    if (this.useDefaultGrid) {
+      if (col !== e.target.closest('.column')) return;
+    }
     if (this.cleanEditing) {
       col.parentNode.querySelector('.is-row-tool').style.display = '';
       col.parentNode.querySelector('.is-col-tool').style.display = '';
@@ -141281,9 +141823,9 @@ class Box {
     if (checked) {
       overlay.style.filter = 'grayscale(1)';
     } else {
-      if (overlayBg && overlayBg.style.filter) overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', ''); // backward
+      if (overlayBg && overlayBg.style.filter) overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '').replace('grayscale(100%)', ''); // backward
 
-      if (overlay.style.filter) overlay.style.filter = overlay.style.filter.replace('grayscale(1)', '');
+      if (overlay.style.filter) overlay.style.filter = overlay.style.filter.replace('grayscale(1)', '').replace('grayscale(100%)', '');
     }
   }
 
@@ -141503,16 +142045,15 @@ class Box {
       if (s === '19') container.classList.add('size-19');
       if (s === '20') container.classList.add('size-20');
       if (s === '21') container.classList.add('size-21'); // cleanup
-
-      let elms = container.querySelectorAll('.size-16,.size-17,.size-18,.size-19,.size-20,.size-21');
-      elms.forEach(elm => {
-        elm.classList.remove('size-16');
-        elm.classList.remove('size-17');
-        elm.classList.remove('size-18');
-        elm.classList.remove('size-19');
-        elm.classList.remove('size-20');
-        elm.classList.remove('size-21');
-      });
+      // let elms = container.querySelectorAll('.size-16,.size-17,.size-18,.size-19,.size-20,.size-21');
+      // elms.forEach(elm=>{
+      //     elm.classList.remove('size-16');
+      //     elm.classList.remove('size-17');
+      //     elm.classList.remove('size-18');
+      //     elm.classList.remove('size-19');
+      //     elm.classList.remove('size-20');
+      //     elm.classList.remove('size-21');
+      // });
     });
     this.builder.onChange();
   }
@@ -141544,21 +142085,20 @@ class Box {
       if (s === '1.8') container.classList.add('leading-18');
       if (s === '1.9') container.classList.add('leading-19');
       if (s === '2') container.classList.add('leading-20'); // cleanup
-
-      let elms = container.querySelectorAll('.leading-none,.leading-11,.leading-12,.leading-13,.leading-14,.leading-15,.leading-16,.leading-17,.leading-18,.leading-19,.leading-20');
-      elms.forEach(elm => {
-        elm.classList.remove('leading-none');
-        elm.classList.remove('leading-11');
-        elm.classList.remove('leading-12');
-        elm.classList.remove('leading-13');
-        elm.classList.remove('leading-14');
-        elm.classList.remove('leading-15');
-        elm.classList.remove('leading-16');
-        elm.classList.remove('leading-17');
-        elm.classList.remove('leading-18');
-        elm.classList.remove('leading-19');
-        elm.classList.remove('leading-20');
-      });
+      // let elms = container.querySelectorAll('.leading-none,.leading-11,.leading-12,.leading-13,.leading-14,.leading-15,.leading-16,.leading-17,.leading-18,.leading-19,.leading-20');
+      // elms.forEach(elm=>{
+      //     elm.classList.remove('leading-none');
+      //     elm.classList.remove('leading-11');
+      //     elm.classList.remove('leading-12');
+      //     elm.classList.remove('leading-13');
+      //     elm.classList.remove('leading-14');
+      //     elm.classList.remove('leading-15');
+      //     elm.classList.remove('leading-16');
+      //     elm.classList.remove('leading-17');
+      //     elm.classList.remove('leading-18');
+      //     elm.classList.remove('leading-19');
+      //     elm.classList.remove('leading-20');
+      // });
     });
     this.builder.onChange();
   } // Content
@@ -142419,6 +142959,8 @@ class Box {
       overlayColor = overlayBg.querySelector('.is-overlay-color');
     }
 
+    if (overlayBg) overlayBg.style.opacity = ''; // clear unwanted opacity
+
     if (this.builder.useCssClasses) {
       const classes = this.builder.cssClasses.opacity;
 
@@ -145727,8 +146269,13 @@ class CodeChat {
     let isChatVisible = savedState === 'true'; // Only open if explicitly set to 'true'
 
     if (!isChatVisible) {
-      modal.classList.add('hidden');
-      modal.setAttribute('aria-hidden', 'true');
+      if (this.builder.startCodeChat) {
+        modal.classList.remove('hidden');
+        modal.removeAttribute('aria-hidden');
+      } else {
+        modal.classList.add('hidden');
+        modal.setAttribute('aria-hidden', 'true');
+      }
     } else {
       modal.classList.remove('hidden');
       modal.removeAttribute('aria-hidden');
@@ -146547,12 +147094,16 @@ OUT OF SCOPE requests include:
 ${imageGenEnabled ? '' : '- AI image generation (currently disabled - but external images are OK)'}
 
 IMPORTANT DISTINCTION:
-- "Tell me about the weather in general" → VALID (chat/education)
 - "What's the weather in Tokyo right now?" → INVALID (requires real-time data)
-- "Write a story about space" → VALID (chat/creative)
+- "Tell me about the weather in general" → VALID (chat task)
 - "Generate a video about space" → INVALID (video generation)
-- "Explain how databases work" → VALID (chat/education)
+- "Write a story about space" → VALID (chat task)
 - "Create a database for me" → INVALID (database operations)
+- "Explain how databases work" → VALID (chat task)
+- "How would you design this?" → VALID (chat task)
+- "I need help with..." → VALID (chat task)
+
+NOTE: Conversational requests, questions, and vague requests are ALL VALID and should be classified as "chat" tasks.
 
 Respond with a JSON object in this exact format:
 {
@@ -146577,6 +147128,15 @@ Task type definitions:
 - "chat": Conversations, questions, explanations, advice, discussions
 ${imageGenEnabled ? '- "image": Generate AI images and integrate them into the page' : ''}
 
+FALLBACK RULE:
+- If the request is vague, conversational, or doesn't clearly require code/image generation
+- If you're uncertain about how to categorize it
+- If it's a general question or discussion
+- If it seems like the user wants advice, help, or guidance
+→ Create a single "chat" task with the original user message
+
+CRITICAL: NEVER return an empty tasks array. When in doubt, use "chat".
+
 CODE TASK RULES:
 - ALWAYS combine multiple code-related instructions into ONE code task
 - The AI can handle complex, multi-part code generation in a single task
@@ -146908,6 +147468,11 @@ ${isMixed ? 'CRITICAL: Only perform the task specified above. Do not answer othe
       // ====================================================================
       const system = `You are a helpful AI assistant for a web builder tool. You can answer questions about web development, design, HTML, CSS, JavaScript, and provide general assistance.
 
+When providing code examples:
+- Use markdown code blocks with language tags: \`\`\`html, \`\`\`css, \`\`\`javascript
+- Use inline code for short snippets: \`<element>\`
+- Never output raw HTML that could be rendered by the browser
+
 ${isMixed ? `CRITICAL INSTRUCTION: You are handling ONE SPECIFIC TASK from a multi-part request. 
 
 Your ONLY task is: ${task.description}
@@ -147282,6 +147847,28 @@ ${this.builder.html()}
       this.builder.uo.saveForUndo();
     }
 
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(code, 'text/html');
+    const containers = doc.querySelectorAll('div.is-container');
+    containers.forEach(container => {
+      container.classList.add('size-17', 'leading-17'); // add default font-size & line-height
+    });
+    const sections = doc.querySelectorAll('div.is-section');
+    sections.forEach(section => {
+      const box = section.querySelector('.is-box');
+
+      if (box) {
+        // Splitted section
+        if (box.querySelector('.is-overlay-bg')) {
+          // add classes: box-autofit min-height-70
+          box.classList.add('box-autofit', 'min-height-70');
+        } else {
+          // add classes: box-autofit
+          box.classList.add('box-autofit');
+        }
+      }
+    });
+    code = doc.body.innerHTML;
     this.builder.loadHtml(code);
   }
 
@@ -147387,7 +147974,7 @@ ${this.builder.html()}
     banner.className = 'demo-banner';
     banner.innerHTML = `
             <div style="
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                background: linear-gradient(135deg, #527cff 0%, #5563db 100%);
                 color: white;
                 padding: 12px 16px;
                 border-radius: 8px;
@@ -147835,11 +148422,13 @@ Classes: p-0, p-2, p-3, p-4, p-6, p-8, p-10, p-12
 **Example: Card with padding**
 
 <!-- Example: Card with padding -->
-<div class="p-12 bg-gray-50">
+<div class="p-12 box-border bg-gray-50">
     <p class="size-18 pb-4">Card content</p>
     <p class="size-14 text-gray-600">Description</p>
 </div>
 
+**Key classes:** p-X, box-border (always use box-border with padding on DIV or cards)
+
 ### Directional Padding
 
 Classes: px-4, py-4, pt-4, pb-4, pl-4, pr-4
@@ -147996,7 +148585,7 @@ border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full
     </a>
 </div>
 
-**Key classes:** 'underline' + 'border-transparent' (no horizontal padding needed).
+**Key classes:** 'underline'+ 'underline-offset-4' + 'border-transparent' (no horizontal padding needed).
 
 **For button groups:**
 
@@ -148072,8 +148661,7 @@ Use grayscale for minimalist design.
 > **Editorial Style:** Stick to black, white, and grays for a clean, minimalist aesthetic. Use color sparingly for accents.
 
 ` + `
-
-### Animation
+## Animation
 
 **Transition**
 
@@ -148081,80 +148669,117 @@ 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, duration-1500
+Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-400, duration-500, duration-600, duration-700, duration-800, duration-900, duration-1000, duration-1500
 
 **Timing**
 
 Classes: ease-linear, ease-in, ease-out, ease-in-out
 
-**Delay**
+**Hover Transforms**
 
-Classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500
+Classes: hover:scale-105, hover:-translate-y-1, hover:-translate-y-2
 
-**Scale**
+**Hover Shadow**
 
-Classes: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
+Classes: hover:shadow-sm, hover:shadow, hover:shadow-md, hover:shadow-lg, hover:shadow-xl, hover:shadow-2xl
 
-**Hover Effect**
+**Hover Background Colors**
 
-Classes: hover:scale-105
+Classes: hover:bg-white, hover:bg-black, hover:bg-gray-50, hover:bg-gray-100, hover:bg-gray-200, hover:bg-gray-300, hover:bg-gray-400, hover:bg-gray-500, hover:bg-gray-600, hover:bg-gray-700, hover:bg-gray-800, hover:bg-gray-900, hover:bg-transparent
 
-**Rotate**
+**Hover Text Colors**
 
-Classes: rotate-0, rotate-45, rotate-90, rotate-180
+Classes: hover:text-white, hover:text-black, hover:text-current, hover:text-gray-50, hover:text-gray-100, hover:text-gray-200, hover:text-gray-300, hover:text-gray-400, hover:text-gray-500, hover:text-gray-600, hover:text-gray-700, hover:text-gray-800, hover:text-gray-900, hover:text-gray-950
 
-**Translate X**
+**Hover Opacity**
 
-Classes: translate-x-0, translate-x-1, translate-x-2, translate-x-4, translate-x-8
+Classes: hover:opacity-70, hover:opacity-75, hover:opacity-80, hover:opacity-90, hover:opacity-95, hover:opacity-100
 
-**Translate Y**
+**Animation keyframes**
+
+Classes: spin, ping, pulse, bounce
 
-Classes: translate-y-0, translate-y-1, translate-y-2, translate-y-4, translate-y-8
+### Animation Examples
+
+**Example: Hover lift on Cards**
+
+<div class="row" style="gap: 30px;">
+    <div class="column">
+      	<!-- card -->
+        <div class="p-10 box-border bg-white h-full transition-transform duration-300 hover:-translate-y-2" style="border: 1px solid #e0e0e0;">
+            <div class="mb-6 text-gray-300"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
+            <p class="size-18 leading-16 mb-8 text-gray-800">"It's rare to find a tool that balances power with simplicity so effectively. It has completely streamlined our workflow."</p>
+            <p class="size-13 font-bold uppercase tracking-widest">Freja E. — Company</p>
+        </div>
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+</div>
 
-**Skew**
+**Key classes:** transition-transform, duration-300, hover:translate-y--2
 
-Classes: skew-x-0, skew-x-3, skew-x-6, skew-y-0, skew-y-3, skew-y-6
+**Example: Hover lift and shadow on Cards**
 
-**Overflow**
+<div class="row" style="gap: 30px;">
+    <div class="column">
+      	<!-- card -->
+        <div class="p-10 box-border bg-white transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl" style="border: 1px solid #e5e5e5;">
+        		<!-- card content -->     
+        </div>
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+</div>
 
-Classes: overflow-hidden, overflow-visible, overflow-scroll, overflow-auto
+**Key classes:** transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl
 
-**Opacity**
+**Example: Hover zoom on Cards**
 
-Classes:
+<div class="row" style="gap: 30px;">
+    <div class="column">
+      	<!-- card -->
+        <div class="p-12 box-border bg-white h-full flex flex-col items-center text-center transition-transform duration-300 ease-out hover:scale-105" style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);">
+        		<!-- card content -->       
+        </div>
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+    <div class="column">
+      	<!-- card -->
+    </div>
+</div>
 
-| 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 |
+**Key classes:** transition-transform, duration-300, ease-out, hover:scale-105
 
-**Animation keyframes**
+**Example: Hover zoom on Images**
 
-Classes: spin, ping, pulse, bounce
+<div class="row" style="gap:40px;">
+      <div class="column">
+          <div class="w-full overflow-hidden relative bg-gray-50 mb-6" style="aspect-ratio: 4 / 3;">
+              <img src="image1.jpg" alt="Freja E. Andersen" class="w-full h-full object-cover transition-transform hover:scale-105 duration-1000">
+          </div>
+          <h4 class="size-20 font-normal">Freja E. Andersen</h4>
+          <p class="size-14 text-gray-500 uppercase tracking-wide mt-1 mb-3">Lead Architect</p>
+          <p class="size-15 text-gray-600 leading-16">Specializing in sustainable residential architecture with a focus on natural light.</p>
+      </div>
+      <div class="column">
+          
+      </div>
+      <div class="column">
+          
+      </div>
+  </div>
+
+**Key classes:** transition-transform, hover:scale-105, duration-1000 (or use duration-1500 for larger image)
 ` + `
 ---
 ` + `
@@ -148177,7 +148802,7 @@ Classes: spin, ping, pulse, bounce
 
 ### Card with Padding
 
-<div class="p-12 bg-gray-50">
+<div class="p-12 box-border bg-gray-50">
     <p class="size-18 leading-17 text-black pb-4">
         Card title or content
     </p>
@@ -148224,16 +148849,18 @@ Classes: spin, ping, pulse, bounce
 </div>
 <div class="row">
     <div class="column">
-        <img class="pb-2" src="https://placehold.co/400x400/f5f5f5/999?text=Alex+T" alt="Team Member">
+      	<div class="w-full overflow-hidden relative bg-gray-50 mb-2" style="aspect-ratio: 4 / 3;">
+              <img src="image1.jpg" alt="Freja E. Andersen" class="w-full h-full object-cover transition-transform hover:scale-105 duration-1000">
+        </div>
         <h4 class="size-18 font-medium pb-2 text-center">Alex Thompson</h4>
         <p class="size-12 uppercase tracking-150 text-gray-500 pb-3 text-center">Founder &amp; CEO</p>
         <p class="size-15 leading-16 text-gray-600 text-center">Visionary leader with 15 years of experience.</p>
     </div>
     <div class="column">
-        <img class="pb-2" src="https://placehold.co/400x400/f5f5f5/999?text=Sophia+M" alt="Team Member">
-        <h4 class="size-18 font-medium pb-2 text-center">Sophia Martinez</h4>
-        <p class="size-12 uppercase tracking-150 text-gray-500 pb-3 text-center">CTO</p>
-        <p class="size-15 leading-16 text-gray-600 text-center">Technical architect building systems.</p>
+        <!-- Next image -->
+    </div>
+    <div class="column">
+        <!-- Next image -->
     </div>
 </div>
 
@@ -148586,23 +149213,15 @@ The overlay system provides background images and colors behind content.
     </div>
 </div>
 
-### Background Image with Color Overlay
-
-<div class="is-overlay" style="background-color: rgb(225, 225, 225);">
-    <div class="is-overlay-bg" 
-         style="background-image: url('image.jpg'); 
-                background-position: 50% 60%; 
-                opacity: 0.7;">
-    </div>
-</div>
-
 ### Dark Overlay on Image
 
+**Use case:** For the background behind white text content.
+
 <div class="is-overlay">
     <div class="is-overlay-bg" 
          style="background-image: url('image.jpg'); 
                 background-position: 50% 60%;">
-        <div class="is-overlay-color opacity-12"></div>
+        <div class="is-overlay-color opacity-30"></div>
     </div>
 </div>
 
@@ -148707,7 +149326,6 @@ Add internal spacing inside containers:
 
 **Padding classes:**
 
-- 'content-py-*' - Vertical padding (top and bottom)
 - 'content-pt-*' - Top padding only  
 - 'content-pb-*' - Bottom padding only
 
@@ -148946,6 +149564,24 @@ The Box Framework provides structure. The Content.css Framework provides content
 
 Always use both frameworks together for complete designs.
 
+### 9. Add smooth image scaling for overlay background image
+
+<div class="is-section ...">
+    <!-- Section content -->
+</div>
+<div class="is-section ...">
+    <!-- Section content -->
+</div>
+<style>
+    /* Smooth image scaling */
+    .is-overlay-bg {
+        transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+    .is-box:hover .is-overlay-bg {
+        transform: scale(1.03);
+    }
+</style>
+
 ---
 
 ## Common Patterns
@@ -148985,6 +149621,29 @@ Always use both frameworks together for complete designs.
     </div>
 </div>
 
+### Pattern: Dark overlay background image behind white text content.
+
+<div class="is-section is-box type-system-ui is-section-60 is-content-bottom edge-y-4">
+    <div class="is-overlay">
+        <div class="is-overlay-bg" style="background-image: url('assets/thelayout/images/ai-aZkV0.jpg'); background-position: 50% 40%;">
+            <div class="is-overlay-color opacity-30"></div>
+        </div>
+    </div>
+    <div class="is-container is-content-1200 text-center">
+        <div class="row">
+            <div class="column">
+                <h2 class="size-60 font-light text-white leading-12 pb-6">Start your next chapter.</h2>
+                <div class="spacer height-20"></div>
+                <div>
+                    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-3 px-10 size-16 leading-16 border-white hover:bg-white hover:text-black" style="color: #ffffff;">
+                        Visit Us Today
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 ### Pattern: Three Equal Boxes
 
 <div class="is-section type-system-ui is-section-60">
@@ -149288,14 +149947,16 @@ The frameworks provide utility classes for structure and typography. To create r
 
 <!-- Embedded Styke -->
 <style>
-    /* Subtle hover zoom for background images */
-    .is-overlay-bg {
-        transition: transform 1s ease;
-    }
-    .is-box:hover .is-overlay-bg {
-        transform: scale(1.05);
-    }
+`
+/* Subtle hover zoom for background images 
+.is-overlay-bg {
+    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
 
+.is-box:hover .is-overlay-bg {
+    transform: scale(1.03);
+}*/
++ `
     /* Featured image */
     .featured-image {
         width: 100%;