@innovastudio/contentbuilder 1.5.185 → 1.5.187

package/public/contentbuilder/contentbuilder.esm.js

@@ -6569,7 +6569,9 @@ class Util {
       row = this.rowSelected();
     }
     if (!row) return;
-    this.colTool = row.querySelector('.is-col-tool');
+
+    // this.colTool = row.querySelector('.is-col-tool');
+    this.colTool = row.querySelector(':scope > .is-col-tool');
     if (!this.colTool) return; // when drag block as a new section
 
     if (!col.parentNode) {
@@ -51420,7 +51422,8 @@ class SettingsUIGenerator {
       this.builder.openColorPicker(input.value, color => {
         input.value = color;
         colorBtn.style.backgroundColor = color;
-        input.dispatchEvent(new Event('change', {
+        // input.dispatchEvent(new Event('change', { bubbles: true }));
+        input.dispatchEvent(new Event('input', {
           bubbles: true
         }));
       }, colorBtn);
@@ -54027,7 +54030,9 @@ class RowTool {
         this.builder.backwardCompatible();
       }
       const btnCellAdd = coltool.querySelector('.cell-add');
-      if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
+      if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', e => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
         let cell = util.cellSelected();
         if (!cell) return;
         const viewportHeight = window.innerHeight;
@@ -54097,7 +54102,9 @@ class RowTool {
         }
       });
       const btnCellMore = coltool.querySelector('.cell-more');
-      if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
+      if (btnCellMore) dom.addEventListener(btnCellMore, 'click', e => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
         let cell = util.cellSelected();
         if (!cell) return;
         const viewportHeight = window.innerHeight;
@@ -54271,7 +54278,9 @@ class RowTool {
         this.showGridEditor();
       });
       const btnMore = rowtool.querySelector('.row-more');
-      if (btnMore) dom.addEventListener(btnMore, 'click', () => {
+      if (btnMore) dom.addEventListener(btnMore, 'click', e => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
         let row;
         let cell = util.cellSelected();
         if (cell) {
@@ -55288,7 +55297,9 @@ class RowAddTool {
       });
     }
     let btnRowAdd = rowaddtool.querySelector('button');
-    dom.addEventListener(btnRowAdd, 'click', () => {
+    dom.addEventListener(btnRowAdd, 'click', e => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
       const quickadd = renderQuickAdd(this.builder);
       let tabs = quickadd.querySelector('.is-pop-tabs');
       tabs.style.display = 'none';
@@ -57998,7 +58009,8 @@ class ColumnTool {
     }
   }
   click(col) {
-    this.columnTool = col.parentNode.querySelector('.is-col-tool');
+    // this.columnTool = col.parentNode.querySelector('.is-col-tool');
+    this.columnTool = col.parentNode.querySelector(':scope > .is-col-tool');
     if (!this.columnTool) return;
     this.columnTool.style.left = col.offsetLeft + 'px';
     this.columnTool.style.top = col.offsetTop + 'px';
@@ -82301,6 +82313,31 @@ class ContentStuff {
         }
 
 
+        /* New nested grid support */
+        .is-builder .row, 
+        .is-builder .column {
+            position: relative;
+        }
+        .is-builder .row > .column {
+            outline: none;
+        }
+        .is-builder .row > .column.cell-active:not([data-protected]) {
+            outline: 1px solid #00da89;
+        }
+        .row-active > .is-row-tool {
+            display: flex;
+        }
+        .row-active > div .is-row-tool {
+            display: none;
+        }
+        .row-active > .is-col-tool {
+            display: flex;
+        }
+        .row-active > div .is-col-tool {
+            display: none;
+        }
+
+
         /* Preferences */
 
         .is-tool.is-row-tool .row-grideditor {
@@ -88091,6 +88128,9 @@ class CodeChat {
       this.systemModel = this.builder.systemModel;
     }
     this.codeModels = [{
+      id: 'google/gemini-3-pro-preview',
+      label: 'Google Gemini 3 Pro Preview'
+    }, {
       id: 'google/gemini-2.5-flash',
       label: 'Google Gemini 2.5 Flash'
     }, {
@@ -88153,10 +88193,7 @@ class CodeChat {
     }, {
       id: 'minimax/minimax-m2',
       label: 'MiniMax M2'
-    }
-    // { id: 'kwaipilot/kat-coder-pro:free', label: 'KAT Coder Pro (Free)' },
-    ];
-
+    }];
     if (this.builder.codeModels) {
       this.codeModels = this.builder.codeModels;
     }
@@ -88222,6 +88259,13 @@ class CodeChat {
       this.chatModels = this.builder.chatModels;
     }
     this.imageModels = [{
+      id: 'fal-ai/nano-banana-pro',
+      label: 'Nano Banana Pro',
+      sizes: [],
+      // no size options
+      // sizes: ['21:9', '16:9', '3:2', '4:3', '5:4', '1:1', '4:5', '3:4', '2:3', '9:16'],
+      output_format: 'jpeg'
+    }, {
       id: 'fal-ai/nano-banana',
       label: 'Nano Banana',
       sizes: [],
@@ -89100,7 +89144,7 @@ class CodeChat {
                         ${out('Code Generation Model')}
                     </label>
                     <p class="setting-description">
-                        ${out('Select the AI model used for generating and modifying HTML/CSS code')}
+                        ${out('Select the AI model used for generating and modifying HTML code')}
                     </p>
                     <select id="codeModelSelect" aria-describedby="codeModelDesc">
                     </select>
@@ -90096,6 +90140,9 @@ ${this.builder.html()}
 \`\`\`
 
 TASK: ${task.description}
+
+IMPORTANT: Follow the Best Practices in Content framework.
+
 ${imageContext}
 ${chatContext}
 
@@ -90332,7 +90379,7 @@ ${this.builder.html()}
             copyButton.classList.remove('copied');
           }, 2000);
         }).catch(err => {
-          console.error('Failed to copy:', err);
+          console.error(out('Failed to copy:'), err);
         });
       });
       return rawText;
@@ -90553,551 +90600,691 @@ ${this.builder.html()}
   }
 }
 
-const contextBoxFramework = `
-# Box Framework
+const contextContentFramework = `
 
-The Box Framework handles page structure and layout. It works with the Content.css Framework to create complete, responsive designs.
+# Content.css Framework
 
-## Architecture Overview
+## Grid System
 
-.is-section (page section)
-  └── .is-box (layout box)
-      ├── .is-overlay (background layer)
-      │   └── .is-overlay-bg (background image/color)
-      └── .is-container (content area)
-          └── .row > .column (content from Content.css)
+All content must be wrapped in rows and columns.
 
----
+<div class="row">
+    <div class="column">
+        <!-- Content here -->
+    </div>
+</div>
+<div class="row">
+    <div class="column">
+        <!-- Content here -->
+    </div>
+    <div class="column">
+        <!-- Content here -->
+    </div>
+</div>
 
-## Sections
+> **Important:** Never place content directly under a container. Always use row → column structure.
 
-Sections are full-width page divisions. Each section is a '<div class="is-section">'.
+### Inline Width Style
 
-### Basic Section
+Just use: <div class="column" style="width: 52%; flex: 0 0 auto;">
 
-<div class="is-section type-system-ui">
-    <!-- Content goes here -->
+<div class="row">
+    <div class="column" style="width: 52%; flex: 0 0 auto;">
+    <div class="column">
 </div>
 
-> **Important:** Always include 'type-system-ui' class on sections for default typography.
+**If columns should be equal width:**
 
-### Section Height
+Just use: <div class="column"> for each column.
 
-Control minimum section height with viewport-based classes:
-
-| Class | Height | Use Case |
-|-------|--------|----------|
-| '.is-section-50' | 50vh | Half screen sections |
-| '.is-section-60' | 60vh | Medium sections |
-| '.is-section-80' | 80vh | Tall sections |
-| '.is-section-100' | 100vh | Full screen hero sections |
-| '.is-section-auto' | Auto | Content-based height |
+<div class="row">
+    <div class="column">
+    <div class="column">
+</div
 
-**Example:**
+> **Tip:** On mobile (< 760px), columns automatically stack full-width for better responsiveness.
 
-<div class="is-section type-system-ui is-section-100">
-    <!-- Full screen hero -->
-</div>
+### Column Gap
 
-> **Available heights:** 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 85, 90, 100, auto
+Rules:
 
----
+- **DO NOT add gap by default.** Columns have default padding (1rem left/right) which handles most cases.
 
-## Boxes
+- **Use gap ONLY when the design specifically needs extra breathing room.**
 
-Boxes are layout divisions within sections. A section can contain one or multiple boxes.
+- ***ALWAYS use inline style for gap, NEVER use gap utility classes (gap-4, gap-6, etc.).***
 
-### Single Box Section
+When gap is needed, use these guidelines based on content type:
 
-When a section has only one box (full-width), combine classes:
+**Image galleries/portfolio grids: gap:20px (maximum)**
 
-<div class="is-section is-box type-system-ui is-section-100">
-    <div class="is-overlay">
-        <!-- Background -->
-    </div>
-    <div class="is-container">
-        <!-- Content -->
-    </div>
+<div class="row" style="gap:20px">
+    <div class="column pb-6"><img...></div>
+    <div class="column pb-6"><img...></div>
+    <div class="column pb-6"><img...></div>
 </div>
 
-### Multi-Box Section
+**Image + text layouts (2 columns): gap:30px (maximum)** 
 
-When a section has multiple boxes (split layout):
-
-<div class="is-section type-system-ui is-section-100">
-    <div class="is-box is-box-5">
-        <div class="is-overlay">
-            <!-- Background for left box -->
-        </div>
-        <div class="is-container">
-            <!-- Left content -->
-        </div>
+<div class="row" style="gap:20px">
+    <div class="column" style="width: 55%; flex: 0 0 auto;">
+        <img...>
     </div>
-    <div class="is-box is-box-7">
-        <div class="is-overlay">
-            <!-- Background for right box -->
-        </div>
-        <div class="is-container">
-            <!-- Right content -->
-        </div>
+    <div class="column flex flex-col justify-center">
+        <h3>Title</h3>
+        <p>Details...</p>
     </div>
 </div>
 
-### Box Width Classes
+**Default rule: No gap unless there's a specific design reason. When in doubt, omit gap.**
 
-Boxes use a 12-column grid system:
 
-| Class | Width | Common Use |
-|-------|-------|------------|
-| '.is-box-4' | 33.33% | Three columns |
-| '.is-box-5' | 41.67% | 40/60 split |
-| '.is-box-6' | 50% | Half/half split |
-| '.is-box-7' | 58.33% | 60/40 split |
-| '.is-box-8' | 66.67% | Two-thirds |
-| '.is-box-12' | 100% | Full width |
+### CRITICAL: When using gap with custom column widths:
 
-> **Available widths:** 1-12 (increments of 8.33%)
+**Gap takes up space**, so column widths + gap must not exceed 100%.
 
-> **Mobile behavior:** On screens < 970px, all boxes stack to 100% width automatically.
+**Best practice: Use only ONE custom width, let other column(s) flex:**
 
----
+CORRECT (one width + gap):
+<div class="row" style="gap:20px">
+    <div class="column" style="width: 55%; flex: 0 0 auto;">
+        <img...>
+    </div>
+    <div class="column">
+        <!-- This column flexes to fill remaining space -->
+        <h3>Content...</h3>
+    </div>
+</div>
 
-## Overlay (Backgrounds)
+INCORRECT (widths don't account for gap):
+<div class="row" style="gap:20px">
+    <div class="column" style="width: 38%; flex: 0 0 auto;">...</div>  ❌
+    <div class="column" style="width: 62%; flex: 0 0 auto;">...</div>  ❌
+    <!-- 38% + 62% + 20px gap = overflow! -->
+</div>
 
-The overlay system provides background images and colors behind content.
+### Font Sizes
 
-### Background Color Only
+Use 'size-*' classes for precise font sizing.
 
-<div class="is-overlay" style="background-color: rgb(245, 245, 245);">
-</div>
-` + `
-### Background Image
+| Class | Size | Common Use |
+|-------|------|------------|
+| '.size-12' | 12px | Small labels, captions |
+| '.size-14' | 14px | Labels, meta info |
+| '.size-16' | 16px | Body text |
+| '.size-18' | 18px | Large body text |
+| '.size-20' | 20px | Small headings |
+| '.size-24' | 24px | Subheadings |
+| '.size-32' | 32px | Medium headings |
+| '.size-42' | 42px | Large headings |
+| '.size-48' | 48px | Hero headings |
+| '.size-60' | 60px | Extra large headings |
+| '.size-72' | 72px | Display text, stats |
+| '.size-96' | 96px | Extra large display |
 
-<div class="is-overlay">
-    <div class="is-overlay-bg" 
-         style="background-image: url('image.jpg'); 
-                background-position: 50% 60%;">
-    </div>
-</div>
+> **Available sizes:** 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 24, 28, 32, 35, 38, 42, 46, 48, 50, 54, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100... up to 400
 
-### Background Image with Color Overlay
+### Font Weights
 
-<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>
+Classes: font-light, font-normal, font-medium, font-semibold, font-bold
 
-### Dark Overlay on Image
+### Letter Spacing (Tracking)
 
-<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>
-</div>
+Classes: tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-150 (ideal for uppercase labels)
 
-> **Tip:** Use 'background-position' to control image focal point. Format: 'horizontal% vertical%'
+### Line Height (Leading)
 
----
+Classes: leading-none, leading-12, leading-13, leading-14, leading-15, leading-16, leading-17, leading-18
 
-## Container (Content Area)
+> **Best Practice:** Use 'leading-17' or 'leading-18' for body text. Use 'leading-12' or 'leading-13' for headings.
 
-Containers hold the actual content and control its width and positioning.
+### Text Utilities
 
-### Basic Container
+Classes: uppercase, lowercase, capitalize, text-center, text-left, text-right
 
-<div class="is-container">
-    <div class="row">
-        <div class="column">
-            <!-- Your content from Content.css framework -->
-        </div>
-    </div>
-</div>
+When creating centered (or left/right aligned) text sections: Apply alignment classes directly to text elements, NOT to wrapper divs.
 
-> **Important:** Always wrap content inside container using the row → column structure from Content.css.
+CORRECT (alignment on elements):
 
-### Container Width
+<div class="column">
+    <p class="size-12 text-gray-400 pb-4 text-center">Label</p>
+    <h2 class="size-48 leading-12 pb-6 text-center">Heading</h2>
+    <p class="size-17 leading-18 text-gray-600 text-center">Description...</p>
+</div>
 
-Control maximum content width:
+INCORRECT (wrapper div for alignment):
 
-<div class="is-container is-content-1200">
-    <!-- Content max-width: 1200px -->
+<div class="column">
+    <div class="text-center">  ❌
+        <p class="size-12 text-gray-400 pb-4">Label</p>
+        <h2 class="size-48 leading-12 pb-6">Heading</h2>
+        <p class="size-17 leading-18 text-gray-600">Description...</p>
+    </div>
 </div>
 
-**Common widths:**
+Keep the content structure in column flat.
 
-| Class | Max Width | Use Case |
-|-------|-----------|----------|
-| '.is-content-760' | 760px | Narrow text content |
-| '.is-content-980' | 980px | Default (if no class) |
-| '.is-content-1200' | 1200px | Standard wide |
-| '.is-content-1400' | 1400px | Extra wide |
-| '.is-content-1740' | 1740px | Ultra wide |
+### Padding
 
-> **Available widths:** 560, 580, 600... 1800 (increments of 20px)
+Classes: p-0, p-2, p-3, p-4, p-6, p-8, p-10, p-12
 
-### Horizontal Position
+> **Available values:** 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20
 
-Position container left, center (default), or right:
+**Example: Card with padding**
 
-<!-- Left aligned -->
-<div class="is-container is-content-left">
+<!-- Example: Card with padding -->
+<div class="p-12 bg-gray-50">
+    <p class="size-18 pb-4">Card content</p>
+    <p class="size-14 text-gray-600">Description</p>
+</div>
 
-<!-- Centered (default) -->
-<div class="is-container">
+### Directional Padding
 
-<!-- Right aligned -->
-<div class="is-container is-content-right">
+Classes: px-4, py-4, pt-4, pb-4, pl-4, pr-4
 
-> **Mobile behavior:** On screens < 760px, all containers center automatically.
+### Spacer (Vertical Spacing)
 
-### Vertical Position
+| Class | Description |
+|-------|-------------|
+| '.spacer.height-20' | 20px vertical space |
+| '.spacer.height-40' | 40px vertical space |
+| '.spacer.height-60' | 60px vertical space |
+| '.spacer.height-80' | 80px vertical space |
+| '.spacer.height-100' | 100px vertical space |
+| '.spacer.height-120' | 120px vertical space |
 
-Position container top, middle (default), or bottom within the box:
+**Example: Adding space between sections**
 
-<!-- Top aligned -->
-<div class="is-section is-box type-system-ui is-content-top">
-    <div class="is-container">
+<!-- Example: Adding space between sections -->
+<div class="row">
+    <div class="column">
+        <h2>Section Title</h2>
+    </div>
+</div>
+<div class="row">
+    <div class="column">
+        <div class="spacer height-60"></div>
+    </div>
+</div>
+<div class="row">
+    <div class="column">
+        <p>Section content...</p>
+    </div>
+</div>
 
-<!-- Middle aligned (default) -->
-<div class="is-section is-box type-system-ui">
-    <div class="is-container">
+> **Available heights:** 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300
 
-<!-- Bottom aligned -->
-<div class="is-section is-box type-system-ui is-content-bottom">
-    <div class="is-container">
+---
 ` + `
-### Fine-Tune Vertical Position
-
-Adjust vertical spacing with edge classes:
-
-<!-- Push content closer to top edge -->
-<div class="is-section is-box type-system-ui is-content-top edge-y-0">
-
-<!-- Push content away from bottom edge -->
-<div class="is-section is-box type-system-ui is-content-bottom edge-y-4">
 
-**Edge values:**
+## Buttons
 
-| Class | Effect |
-|-------|--------|
-| 'edge-y--5' to 'edge-y--1' | Pull inward (negative space) |
-| 'edge-y-0' | Flush to edge |
-| 'edge-y-1' to 'edge-y-5' | Push outward |
+Buttons are portable and must be wrapped in a div inside a column. All styling uses content.css classes with inline styles for colors.
 
-> **Default spacing:** Without edge classes, containers have 6.5vh margin from top/bottom.
+### Button Structure
 
-### Container Vertical Padding
+All buttons must be wrapped in a 'div' (or use 'space-x-2' for button groups):
 
-Add internal spacing inside containers:
+<div class="row">
+    <div class="column">
+        <div>
+            <a href="#" role="button" class="...">
+                Button Text
+            </a>
+        </div>
+    </div>
+</div>
 
-<div class="is-container content-py-60">
-    <!-- 60px padding top and bottom -->
+### Base Button Classes
+
+Every button includes these base classes:
+
+transition-all inline-block whitespace-nowrap cursor-pointer 
+border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full
+
+### Button Sizes
+
+| Size | Classes | Use Case |
+|------|---------|----------|
+| **Small** | 'py-1 px-4 size-14 leading-13' | Compact actions, inline buttons |
+| **Medium** | 'py-2 px-6 size-15 leading-14' | Default size, most common |
+| **Large** | 'py-2 px-7 size-16 leading-16' | Primary CTAs, hero sections |
+
+### Button Variants
+
+#### 1. Filled Button (Solid Background)
+
+<!-- Light Background -->
+<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-2 px-6 size-15 leading-14 
+          border-transparent hover:border-transparent" 
+   style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);"
+   data-bg="rgb(240, 240, 241)" 
+   data-hover-bg="rgb(236, 236, 238)"
+   onmouseover="if(this.getAttribute('data-hover-bg'))
+                this.style.backgroundColor=this.getAttribute('data-hover-bg');" 
+   onmouseout="if(this.getAttribute('data-bg'))
+               this.style.backgroundColor=this.getAttribute('data-bg');
+               else this.style.backgroundColor='';">
+    Read More
+</a>
+
+<!-- Dark Background -->
+<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-2 px-6 size-15 leading-14 
+          border-transparent hover:border-transparent" 
+   style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);"
+   data-bg="rgb(24, 24, 27)" 
+   data-hover-bg="rgb(63, 63, 70)"
+   onmouseover="if(this.getAttribute('data-hover-bg'))
+                this.style.backgroundColor=this.getAttribute('data-hover-bg');" 
+   onmouseout="if(this.getAttribute('data-bg'))
+               this.style.backgroundColor=this.getAttribute('data-bg');
+               else this.style.backgroundColor='';">
+    Get Started
+</a>
+
+<!-- Dark Background (Square) -->
+<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 py-2 px-6 size-15 leading-14 
+          border-transparent hover:border-transparent" 
+   style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);"
+   data-bg="rgb(24, 24, 27)" 
+   data-hover-bg="rgb(63, 63, 70)"
+   onmouseover="if(this.getAttribute('data-hover-bg'))
+                this.style.backgroundColor=this.getAttribute('data-hover-bg');" 
+   onmouseout="if(this.getAttribute('data-bg'))
+               this.style.backgroundColor=this.getAttribute('data-bg');
+               else this.style.backgroundColor='';">
+    Get Started
+</a>
+
+**Key classes:** 'no-underline' + 'border-transparent' + inline background color
+` + `
+#### 2. Outline Button (Border Only)
+
+<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-2 px-6 size-15 leading-14 
+          border-current hover:border-current">
+    Read More
+</a>
+
+**Key classes:** 'no-underline' + 'border-current' (inherits text color)
+
+#### 3. Text Button (Underline)
+
+**For single text button:**
+
+<div>
+    <a href="#" role="button" 
+       class="transition-all inline-block whitespace-nowrap cursor-pointer 
+              border-2 border-solid mt-2 mb-1 font-normal tracking-normal 
+              py-2 size-15 leading-14 
+              underline border-transparent" 
+       style="color: rgb(24, 24, 27);">
+        Read More
+    </a>
 </div>
 
-**Padding classes:**
+**Key classes:** 'underline' + 'border-transparent' (no horizontal padding needed).
 
-- 'content-py-*' - Vertical padding (top and bottom)
-- 'content-pt-*' - Top padding only  
-- 'content-pb-*' - Bottom padding only
+**For button groups:**
 
-> **Available values:** 0, 10, 20, 30, 40, 50, 60, 70, 80
+When grouping multiple buttons together, ALL buttons need consistent horizontal padding (e.g. 'px-6'):
 
----
+<div class="space-x-2">
+    <a ... class="py-2 px-6 rounded-full" style="background-color:...">Get Started</a>
+    <a ... class="py-2 px-6 underline border-transparent">Learn More</a>
+</div>
 
-## Complete Examples
+### Button Groups
 
-### Full-Width Hero Section
+Use 'space-x-1' or 'space-x-2' class to group buttons with consistent spacing:
 
-<div class="is-section is-box type-system-ui is-section-100 is-content-bottom">
-    <div class="is-overlay" style="background-color: rgb(225, 225, 225);">
-        <div class="is-overlay-bg" 
-             style="background-image: url('hero.jpg'); 
-                    background-position: 50% 60%; 
-                    opacity: 1;">
-        </div>
-    </div>
-    <div class="is-container is-content-1400">
-        <div class="row">
-            <div class="column">
-                <h1 class="size-72 leading-12">Hero Title</h1>
-                <p class="size-18 leading-17">Subtitle text</p>
-            </div>
-        </div>
-    </div>
+<div class="space-x-2">
+    <a href="#" role="button" class="...">Read More</a>
+    <a href="#" role="button" class="...">Get Started</a>
 </div>
 
-### Split Section (40/60)
-
-<div class="is-section type-system-ui is-section-80">
-    <!-- Left box: 40% -->
-    <div class="is-box is-box-5">
-        <div class="is-overlay" style="background-color: rgb(240, 240, 240);">
-        </div>
-        <div class="is-container is-content-760">
-            <div class="row">
-                <div class="column">
-                    <h2 class="size-42 leading-13">Text Content</h2>
-                    <p class="size-17 leading-17">Description...</p>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <!-- Right box: 60% -->
-    <div class="is-box is-box-7">
-        <div class="is-overlay">
-            <div class="is-overlay-bg" 
-                 style="background-image: url('image.jpg'); 
-                        background-position: 67% 60%;">
-            </div>
-        </div>
-    </div>
+### Examples by Size
+
+#### Small Buttons
+
+<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-1 px-4 size-14 leading-13 border-transparent hover:border-transparent" style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);" 
+   style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);"
+   data-bg="rgb(24, 24, 27)" 
+   data-hover-bg="rgb(63, 63, 70)"
+   onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" 		
+   onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';"
+    Read More
+</a>
+
+#### Large Buttons
+
+<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-2 px-7 size-16 leading-16 border-transparent hover:border-transparent" 
+       style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);" 
+       data-bg="rgb(24, 24, 27)" 
+       data-hover-bg="rgb(63, 63, 70)"
+       onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" 
+       onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" >Read More</a>
 </div>
 
-### Centered Content Section
+> **Important:** Buttons are portable components. Users edit text and colors through the ContentBuilder UI, so all styling must use utility classes plus inline styles for colors.
 
-<div class="is-section is-box type-system-ui is-section-60">
-    <div class="is-container is-content-900">
-        <div class="row">
-            <div class="column">
-                <p class="size-14 uppercase tracking-150 text-gray-400 text-center">About</p>
-            </div>
-        </div>
-        <div class="row">
-            <div class="column">
-                <div class="spacer height-40"></div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="column">
-                <h2 class="size-48 leading-13 text-center">Our Story</h2>
-                <p class="size-17 leading-17 text-gray-600 text-center">
-                    Company description...
-                </p>
-            </div>
-        </div>
-    </div>
-</div>
+> **Hover Effect:** The 'data-bg' and 'data-hover-bg' attributes with 'onmouseover/onmouseout' handlers enable hover color changes without additional CSS.
 
----
-` + `
-## Best Practices
+### Text Colors
 
-### 1. Typography Class
+Use grayscale for minimalist design.
 
-**Always include 'type-system-ui' on every section** for default typography:
+| Class | Color | Description |
+|-------|-------|-------------|
+| '.text-black' | #000 | Primary text, headings |
+| '.text-gray-700' | #374151 | Secondary text |
+| '.text-gray-600' | #6b7280 | Body text |
+| '.text-gray-500' | #9ca3af | Muted text, labels |
+| '.text-gray-400' | #d1d5db | Subtle text, placeholders |
+| '.text-gray-300' | #e5e7eb | Very subtle text |
+| '.text-gray-200' | #f3f4f6 | Ultra light text |
 
-<div class="is-section type-system-ui is-section-100">
+### Background Colors
 
-This ensures consistent font rendering across all sections.
+| Class | Color | Description |
+|-------|-------|-------------|
+| '.bg-white' | #ffffff | White background |
+| '.bg-gray-50' | #fafafa | Light gray - cards, sections |
+| '.bg-gray-100' | #f3f4f6 | Slightly darker gray |
+| '.bg-black' | #000000 | Black - buttons, highlights |
 
-### 2. When to Use is-content-left and is-content-right
+> **Editorial Style:** Stick to black, white, and grays for a clean, minimalist aesthetic. Use color sparingly for accents.
 
-**Primary Use Case: Full-Width Hero Sections**
+---
+` + `
+## Common Patterns
 
-'is-content-left' and 'is-content-right' are primarily for **full-width sections** where you want content positioned to the left or right:
+### Section Header
 
-<!-- Hero section with left-aligned content -->
-<div class="is-section is-box type-system-ui is-section-100">
-    <div class="is-overlay">
-        <div class="is-overlay-bg" style="background-image: url('hero.jpg');"></div>
+<div class="row">
+    <div class="column">
+        <p class="uppercase tracking-150 size-12 text-gray-400">
+            Section Label
+        </p>
     </div>
-    <div class="is-container is-content-1200 is-content-left">
-        <div class="row">
-            <div class="column">
-                <h1 class="size-72 leading-12">Hero Title</h1>
-            </div>
-        </div>
+</div>
+<div class="row">
+    <div class="column">
+        <div class="spacer height-40"></div>
     </div>
 </div>
 
-> **Note:** Center alignment is the default - no class needed.
+### Card with Padding
 
-**Split Sections: Generally NOT Needed**
+<div class="p-12 bg-gray-50">
+    <p class="size-18 leading-17 text-black pb-4">
+        Card title or content
+    </p>
+    <p class="size-14 text-gray-600">
+        Secondary text
+    </p>
+</div>
 
-In split sections, **avoid using is-content-left or is-content-right** because:
+### Feature with Number
+
+<div class="column">
+    <p class="size-14 font-semibold tracking-150 text-gray-300 pb-4">
+        01
+    </p>
+    <h3 class="size-32 font-normal leading-13 pb-4">
+        Feature Title
+    </h3>
+    <p class="size-16 leading-17 text-gray-600">
+        Feature description text here.
+    </p>
+</div>
 
-1. **Small boxes (is-box-5, is-box-4, etc.)** are already narrow - left/right alignment doesn't make sense
-2. **Even is-box-6 (50% width)** - if content is wide (like is-content-540), it already takes up most of the box width, so left/right positioning has little effect
+### Centered Content
 
-<!-- CORRECT: Split section WITHOUT left/right alignment -->
-<div class="is-section type-system-ui is-section-70">
-    <div class="is-box is-box-6">
-        <div class="is-container is-content-540">
-            <!-- ✓ Centered naturally, no positioning needed -->
-            <div class="row">
-                <div class="column">
-                    <h2 class="size-42 leading-13">Content</h2>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="is-box is-box-6">
-        <!-- Image box -->
+<div class="row">
+    <div class="column">
+        <h1 class="size-60 font-light leading-12 text-center">
+            Centered Heading
+        </h1>
     </div>
 </div>
 
-<!-- INCORRECT: Unnecessary left alignment in split section -->
-<div class="is-section type-system-ui is-section-70">
-    <div class="is-box is-box-6">
-        <div class="is-container is-content-540 is-content-left">
-            <!-- ❌ Doesn't make sense - content is already wide -->
-        </div>
+### Image Grid
+
+<div class="row">
+    <div class="column">
+        <p class="uppercase tracking-150 size-12 text-gray-400">Meet The Team</p>
     </div>
 </div>
-
-**Exception: Small Content Like Captions**
-
-Only use 'is-content-left' or 'is-content-right' in split sections for **very small content** (is-content-300 or smaller) where positioning makes a visual difference:
-
-<!-- CORRECT: Small caption aligned left in split section -->
-<div class="is-section type-system-ui is-section-80">
-    <div class="is-box is-box-6">
-        <div class="is-overlay">
-            <div class="is-overlay-bg" style="background-image: url('photo.jpg'); 
-                        background-position: 50% 50%;">
-            </div>
-        </div>
+<div class="row">
+    <div class="column">
+        <div class="spacer height-60"></div>
     </div>
-    <div class="is-box is-box-6 is-content-bottom edge-y-1">
-        <div class="is-overlay"></div>
-        <div class="is-container is-content-300 is-content-left">
-            <div class="row">
-                <div class="column">
-                    <p class="size-14 text-gray-500">Photo caption text</p>
-                </div>
-            </div>
-        </div>
+</div>
+<div class="row">
+    <div class="column">
+        <img class="pb-2" src="https://placehold.co/400x400/f5f5f5/999?text=Alex+T" alt="Team Member">
+        <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>
     </div>
 </div>
 
-**CRITICAL: Width Limits with Left/Right Alignment**
+## Best Practices
 
-If you do use 'is-content-left' or 'is-content-right':
-- **Maximum container width: is-content-540** (preferably smaller)
-- Wider containers can overflow box boundaries
-- This is because max-width only works properly when containers are centered
+### 1. Typography Hierarchy
 
-**Guidelines:**
-- **Full-width sections** → Use is-content-left/right for left or right positioning (center is default)
-- **Split sections** → Usually DON'T use left/right alignment (content centers naturally)
-- **Split sections with tiny captions** → Can use left/right for small content (≤ is-content-300)
-- **Width limit** → If using left/right alignment, max is-content-540
+- **Large Headings:** Use 'size-48' to 'size-96' with 'font-light' and 'leading-12'
+- **Medium Headings:** Use 'size-28' to 'size-42' with 'font-normal' and 'leading-13'
+- **Body Text:** Use 'size-16' to 'size-18' with 'text-gray-600' and 'leading-17'
+- **Labels:** Use 'size-12' to 'size-14' with 'uppercase tracking-150' and 'text-gray-400'
 
-### 3. Section Structure
+### 2. Color Usage
 
-**Always use this hierarchy:**
-- Section → Box → Overlay + Container → Row → Column
+- Primary text: 'text-black'
+- Body text: 'text-gray-600'
+- Muted text: 'text-gray-500' or 'text-gray-400'
 
-**Never skip layers** or nest sections inside sections.
+### 3. Structure Rules
 
-### 4. Background Images
+- Always wrap content in '.row' → '.column'
+- Never place text/content directly under container
+- Wrap all links in '<p>' or '<div>' 
+- Keep layout structure *flat* (no nested rows/columns inside other columns)
 
-- Use 'background-position' to control focal point
-- Common positions: '50% 60%' (centered, slightly below middle), '67% 60%' (right of center)
-- Adjust opacity for overlay effects: '0.7' to '0.9' for subtle tint
+### 4. Minimalist Approach
 
-### 5. Content Width
+- Use generous white space
+- Keep color palette minimal (black, white, grays)
+- Use light font weights for headings
+- Maintain visual hierarchy through size and spacing, not color
 
-- **Text-heavy content:** Use narrower widths (760-900px) for better readability
-- **Visual layouts:** Use wider widths (1200-1400px)
-- **Full bleed designs:** Use ultra-wide (1600-1740px)
-` + `
-### 6. Vertical Positioning
+### 5. When creating multi-column layouts:
 
-- **Hero sections:** Use 'is-content-bottom' to anchor text at bottom
-- **Centered messages:** Use default (middle) positioning
-- **Headers/navigation areas:** Use 'is-content-top'
+Columns have default padding (1rem left/right) which handles most cases.
 
-### 7. Mobile Responsiveness
+**Do NOT use:**
 
-The framework handles mobile automatically:
-- Boxes stack to 100% width
-- Containers center horizontally
-- Edge adjustments apply only on desktop
+- pr-* pl-* px-* for column spacing ❌
+  Use gap when you need **MORE** spacing than the default.
+- Padding classes on columns (except for image gallery exception)
 
-No mobile-specific code needed for basic layouts.
+Images have no default margin, so add pb-* to columns for mobile stacking:
 
-### 8. Combining with Content.css
+<div class="row" style="gap:20px">
+    <div class="column pb-6"><img...></div>
+    <div class="column pb-6"><img...></div>
+</div>
 
-The Box Framework provides structure. The Content.css Framework provides content styling.
+` + `
+### 6. Vertical Centering
+When creating side-by-side layouts with vertical positioning:
 
-**Box Framework handles:**
-- Page sections and layout
-- Background images/colors
-- Container positioning and width
+**For functional alignment (content should align based on column height):**
+Use flexbox, NOT spacers:
+- Center: flex flex-col justify-center
+- Bottom: flex flex-col justify-end
+- Top: (default, no class needed)
 
-**Content.css handles:**
-- Typography and spacing
-- Buttons and components
-- Grid layout (rows/columns)
-- Text colors and styles
+CORRECT:
+<div class="row" style="gap:20px">
+    <div class="column">
+        <img src="..." style="width: 100%; object-fit: cover;">
+    </div>
+    <div class="column flex flex-col justify-center">
+        <h3>Title</h3>
+        <p>Content...</p>
+    </div>
+</div>
 
-Always use both frameworks together for complete designs.
+INCORRECT:
+<div class="column">
+    <div class="spacer height-120"></div>  ❌ (Fixed spacing breaks responsively)
+    <h3>Title</h3>
+    <p>Content...</p>
+</div>
 
----
+**For creative/editorial positioning (intentional staggered or asymmetric layouts):**
+Use spacers for deliberate visual rhythm:
 
-## Common Patterns
+<div class="row">
+    <div class="column">
+        <div class="spacer height-160"></div>
+        <img...>
+    </div>
+    <div class="column">
+        <div class="spacer height-80"></div>
+        <img...>
+    </div>
+    <div class="column">
+        <h2>Title</h2>
+    </div>
+</div>
 
-### Pattern: Image Left, Text Right
+**Decision guide:**
+- Content needs to align based on other column heights? → Use flexbox
+- Content should be deliberately offset for visual interest? → Use spacers
 
-<div class="is-section type-system-ui is-section-70">
-    <div class="is-box is-box-6">
-        <div class="is-overlay">
-            <div class="is-overlay-bg" style="background-image: url('image.jpg');"></div>
-        </div>
-    </div>
-    <div class="is-box is-box-6">
-        <div class="is-container is-content-540 is-content-left">
-            <div class="row">
-                <div class="column">
-                    <h3 class="size-32 leading-13">Title</h3>
-                    <p class="size-17 leading-17 text-gray-600">Text content...</p>
-                </div>
-            </div>
+Spacers in editorial designs create intentional asymmetry and visual rhythm, which is different from trying to align content responsively.
+
+
+### 7. DO NOT create nested grids (row/column inside column).
+
+For horizontal layouts within a column, use simple flexbox instead of nested grids.
+
+INCORRECT (nested grid):
+<div class="row">
+    <div class="column">
+        <div class="row">  ❌
+            <div class="column"><h3>Title</h3></div>
+            <div class="column"><p>Category</p></div>
+            <div class="column"><p>Date</p></div>
         </div>
     </div>
 </div>
 
-### Pattern: Full-Width with Top-Aligned Narrow Content
+CORRECT (simple flexbox):
 
-<div class="is-section is-box type-system-ui is-section-100 is-content-top edge-y-2">
-    <div class="is-overlay" style="background-color: rgb(250, 250, 250);">
-    </div>
-    <div class="is-container is-content-760">
-        <div class="row">
-            <div class="column">
-                <h1 class="size-60 leading-12">Headline</h1>
-                <p class="size-18 leading-17">Description...</p>
-            </div>
+<div class="row">
+    <div class="column">
+        <div class="flex justify-between items-center">
+            <h3>Title</h3>
+            <p>Category</p>
+            <p>Date</p>
         </div>
     </div>
 </div>
 
-### Pattern: Three Equal Boxes
+INCORRECT (nested grid):
 
-<div class="is-section type-system-ui is-section-60">
-    <div class="is-box is-box-4">
-        <div class="is-container">
-            <!-- Content -->
-        </div>
+Common flexbox utilities for simple layouts:
+
+- flex justify-between = space items apart
+- flex justify-center = center items
+- flex items-center = vertically center
+- flex gap-4 = add spacing between items
+
+Keep the structure flat.
+` + `
+### 8. Spacing in Design
+
+IMPORTANT: Text elements (h1-h6, p) already have default top/bottom margins in the framework.
+The framework's default margins are designed to create proper text spacing. Only add padding for design purposes (borders, containers, backgrounds), not for basic text spacing.
+
+Guidelines:
+- For borders between items: pb-2 pt-2 is sufficient
+- For visual grouping: pb-3 pt-3 maximum
+- For design containers (backgrounds, cards, boxes): use generous padding (p-8, p-10, p-12, etc.)
+- For major section breaks: use spacer elements instead
+- Trust default margins - don't fight them with excessive padding
+
+CORRECT (minimal padding with borders):
+<div class="pb-2" style="border-bottom: 1px solid #f0f0f0;">
+    <div class="flex justify-between items-center">
+        <p class="size-14 uppercase tracking-150 text-gray-500">Material</p>
+        <p class="size-16 text-gray-700">Solid Oak, Italian Leather</p>
     </div>
-    <div class="is-box is-box-4">
-        <div class="is-container">
-            <!-- Content -->
-        </div>
+</div>
+<div class="pb-2 pt-2" style="border-bottom: 1px solid #f0f0f0;">
+    <div class="flex justify-between items-center">
+        <p class="size-14 uppercase tracking-150 text-gray-500">Dimensions</p>
+        <p class="size-16 text-gray-700">76 × 68 × 82 cm</p>
     </div>
-    <div class="is-box is-box-4">
-        <div class="is-container">
-            <!-- Content -->
-        </div>
+</div>
+
+INCORRECT (excessive padding):
+<div class="pb-6" style="border-bottom: 1px solid #f0f0f0;">  ❌
+    <div class="flex justify-between items-center pb-4">  ❌
+        <p class="size-14 uppercase tracking-150 text-gray-500">Material</p>
+        <p class="size-16 text-gray-700">Solid Oak, Italian Leather</p>
+    </div>
+</div>
+<div class="pb-6 pt-6" style="border-bottom: 1px solid #f0f0f0;">  ❌
+    <div class="flex justify-between items-center pb-4">  ❌
+        <p class="size-14 uppercase tracking-150 text-gray-500">Dimensions</p>
+        <p class="size-16 text-gray-700">76 × 68 × 82 cm</p>
     </div>
 </div>
+
+CORRECT (intentional design padding):
+<div class="p-12 bg-gray-50">
+    <p class="size-18 leading-17 text-black pb-8">Quote text...</p>
+    <p class="size-14 font-semibold text-black pb-2">Name</p>
+    <p class="size-13 text-gray-600">Title</p>
+</div>
+
+Generous padding is appropriate for visual design elements like cards, testimonials, or highlighted sections.
+
+### 9. Icons
+
+When creating icon-based features, benefits, or service sections: use Bootstrap Icons, NOT emojis. The framework includes Bootstrap Icons support. Wrap icons in a div for proper display:
+
+<div class="text-center pb-6">
+    <i class="bi bi-lightning size-42"></i>
+</div>
+<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>
+
 `;
 
 const contextCodeBlock = `
@@ -92566,7 +92753,7 @@ class ContentBuilder {
     this.ShortcutInfo = new ShortcutInfo(this);
     if (!this.opts.isContentBox) {
       this.codechat = new CodeChat({
-        context: contextBoxFramework + contextCodeBlock
+        context: contextContentFramework + contextCodeBlock
       }, this);
       if (this.startAIAssistant) {
         this.openAIAssistant();
@@ -94034,7 +94221,8 @@ class ContentBuilder {
     }
 
     // Apply behavior on each row
-    const rows = this.dom.elementChildren(builder);
+    let rows;
+    if (this.useDefaultGrid) rows = builder.querySelectorAll('.row');else rows = this.dom.elementChildren(builder);
     rows.forEach(row => {
       // Skip if not a DIV
       if (row.tagName !== 'DIV') return;
@@ -94055,6 +94243,39 @@ class ContentBuilder {
 
       // On each row, add 2 tools: Row tool (div.is-row-tool) & Row Add tool (div.is-rowadd-tool)
 
+      // Validate gap
+      const style = window.getComputedStyle(row);
+      const gapValue = parseFloat(style.gap) || 0;
+      const columns = row.querySelectorAll('.column');
+      let allHaveWidth = true;
+      let totalWidthPercent = 0;
+      columns.forEach(col => {
+        const colStyle = col.getAttribute('style') || '';
+        const match = colStyle.match(/width:\s*([\d.]+)%/);
+        if (match) {
+          totalWidthPercent += parseFloat(match[1]);
+        } else {
+          allHaveWidth = false;
+        }
+      });
+      if (allHaveWidth) {
+        const colCount = columns.length;
+        const totalGapPercent = gapValue / row.clientWidth * 100 * (colCount - 1);
+        const combined = totalWidthPercent + totalGapPercent;
+        if (combined >= 100) {
+          row.style.gap = '';
+          row.classList.remove('gap-10');
+          row.classList.remove('gap-20');
+          row.classList.remove('gap-30');
+          row.classList.remove('gap-40');
+          row.classList.remove('gap-50');
+          row.classList.remove('gap-60');
+          row.classList.remove('gap-70');
+          row.classList.remove('gap-80');
+          row.classList.remove('gap-90');
+        }
+      }
+
       // Render Row tool
       this._rowTool.render(row);
 
@@ -94063,7 +94284,8 @@ class ContentBuilder {
       rowaddtool.render(row);
 
       // Apply behavior on each column
-      const cols = this.dom.elementChildren(row);
+      let cols;
+      if (this.useDefaultGrid) cols = row.querySelectorAll('.column');else cols = this.dom.elementChildren(row);
       cols.forEach(col => {
         if (this.dom.hasClass(col, 'is-row-tool') || this.dom.hasClass(col, 'is-col-tool') || this.dom.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
 
@@ -97143,6 +97365,7 @@ 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.cleanEditing) {
       col.parentNode.querySelector('.is-row-tool').style.display = '';
       col.parentNode.querySelector('.is-col-tool').style.display = '';