@innovastudio/contentbuilder 1.5.188 → 1.5.189

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.188",
+  "version": "1.5.189",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -8557,3 +8557,33 @@ iframe.wait-autoplay {
 .dark #_cbhtml .is-modal.pluginsettings button:not(.is-btn-color):hover {
   background-color: rgba(0, 0, 0, 0.07);
 }
+
+/* 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;
+}

package/public/contentbuilder/contentbuilder.esm.js

@@ -91009,6 +91009,87 @@ Use grayscale for minimalist design.
 
 > **Editorial Style:** Stick to black, white, and grays for a clean, minimalist aesthetic. Use color sparingly for accents.
 
+` + `
+
+### Animation
+
+**Transition**
+
+Classes: transition-none, transition, transition-colors, transition-opacity, transition-shadow, transition-transform, transition-all
+
+**Duration**
+
+Classes: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000
+
+**Timing**
+
+Classes: ease-linear, ease-in, ease-out, ease-in-out
+
+**Delay**
+
+Classes: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500
+
+**Scale**
+
+Classes: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150
+
+**Rotate**
+
+Classes: rotate-0, rotate-45, rotate-90, rotate-180
+
+**Translate X**
+
+Classes: translate-x-0, translate-x-1, translate-x-2, translate-x-4, translate-x-8
+
+**Translate Y**
+
+Classes: translate-y-0, translate-y-1, translate-y-2, translate-y-4, translate-y-8
+
+**Skew**
+
+Classes: skew-x-0, skew-x-3, skew-x-6, skew-y-0, skew-y-3, skew-y-6
+
+**Overflow**
+
+Classes: overflow-hidden, overflow-visible, overflow-scroll, overflow-auto
+
+**Opacity**
+
+Classes:
+
+| Class        | Color         |
+| ------------ | ------------- |
+| '.opacity-0' | opacity: 0    |
+| '.opacity-2' | opacity: 0.02 |
+| '.opacity-4' | opacity: 0.04 |
+| '.opacity-5' | opacity: 0.05 |
+| '.opacity-6' | opacity: 0.06 |
+| '.opacity-8' | opacity: 0.07 |
+| '.opacity-10' | opacity: 0.1 |
+| '.opacity-12' | opacity: 0.12 |
+| '.opacity-15' | opacity: 0.15 |
+| '.opacity-20' | opacity: 0.2 |
+| '.opacity-25' | opacity: 0.25 |
+| '.opacity-30' | opacity: 0.3 |
+| '.opacity-35' | opacity: 0.35 |
+| '.opacity-40' | opacity: 0.4 |
+| '.opacity-45' | opacity: 0.45 |
+| '.opacity-50' | opacity: 0.5 |
+| '.opacity-55' | opacity: 0.55 |
+| '.opacity-60' | opacity: 0.6 |
+| '.opacity-65' | opacity: 0.65 |
+| '.opacity-70' | opacity: 0.7 |
+| '.opacity-75' | opacity: 0.75 |
+| '.opacity-80' | opacity: 0.8 |
+| '.opacity-85' | opacity: 0.85 |
+| '.opacity-90' | opacity: 0.9 |
+| '.opacity-95' | opacity: 0.95 |
+| '.opacity-100' | opacity: 1 |
+
+**Animation keyframes**
+
+Classes: spin, ping, pulse, bounce
+` + `
 ---
 ` + `
 ## Common Patterns
@@ -91467,6 +91548,180 @@ Remember: The goal is to create code blocks that are **self-contained**, **confl
 </div>
 `;
 
+const contextDesignGuide = `
+# Design Directive:
+
+## Purpose
+
+This guide complements the Content Framework documentation. It explains how to create **diverse, creative designs** that go beyond default aesthetics while strictly adhering to framework utility classes.
+
+## Core Philosophy: Design Freedom Within Constraints
+
+The frameworks provide utility classes for structure and typography. To create rich, varied designs:
+
+1. **Use framework classes** for all structural elements
+2. **Add inline styles** for colors, backgrounds, gradients, shadows, transforms, and animations
+3. **Create embedded styles** in '<style>...</style>' blocks at the end when needed for animations, transitions, or reusable patterns
+
+**Example <style>: When needed for animations, transitions, or reusable patterns**
+
+<div class="row">
+    <div class="column">
+
+        <div class="featured-image">
+            <img src="https://placehold.co/1600x700" alt="Featured Project">
+        </div>
+
+    </div>
+</div>
+
+<div class="row portfolio-row">
+    <div class="column">
+
+        <div class="row-image">
+            <img src="https://placehold.co/1200x900" alt="Digital Banking">
+        </div>
+
+    </div>
+    <div class="column">
+
+        <!-- Content -->
+
+    </div>
+</div>
+
+<div class="row">
+
+    <div class="column">
+
+        <div class="p-12 bg-gray-50 hover-lift">
+            <p class="size-18 leading-17 text-black pb-8">The level of professionalism and expertise demonstrated throughout the project was outstanding. Highly recommend to anyone looking for quality work.</p>
+            <p class="size-14 font-semibold text-black pb-1">Michael Chen</p>
+            <p class="size-13 text-gray-600 tracking-wide">Founder, Innovation Labs</p>
+        </div>
+
+    </div>
+    <div class="column">
+
+        <!-- Content -->
+
+    </div>
+</div>
+<style>
+    /* Featured image */
+    
+    .featured-image {
+        width: 100%;
+        aspect-ratio: 21/9;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
+    }
+
+    .featured-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .featured-image:hover img {
+        transform: scale(1.03);
+    }
+
+    /* Row image */
+
+    .row-image {
+        width: 100%;
+        aspect-ratio: 4/3;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
+    }
+
+    .row-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .portfolio-row:hover .row-image img {
+        transform: scale(1.05);
+    }
+
+    /* Smooth hover animations */
+    .hover-lift {
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .hover-lift:hover {
+        transform: translateY(-4px);
+    }
+</style>
+
+
+## Key Aesthetic Philosophy:
+**Swiss/Minimalist meets Portfolio Presentation** - Clean, grid-based, information-focused design where content hierarchy is created through scale, weight, and spacing rather than color or decoration. Every element serves a functional purpose. Photography is professional and high-quality. Typography creates drama through size contrast. The overall feel is sophisticated, professional, and timeless.
+
+## Design Characteristics:
+
+### Typography Treatment
+- **Extreme scale contrast**: Massive headlines (80px-140px) paired with tiny metadata text 
+- **Version/number typography**: Large numbers (like "1.1", "2.4", "2027") used as design elements
+- **Mix of weights**: Bold project names with light secondary information
+
+### Layout Patterns
+- **Horizontal information bars**: Thin lines (1px-2px) separating sections or containing metadata
+- **Asymmetric content placement**: Image on left (40-45%), text/info on right (55-60%)
+- **Card-based presentation**: Content contained in white cards floating on gray backgrounds
+- **Top metadata strips**: Small text in corners (studio name, project type, year)
+- **Multi-column text blocks**: Body copy split into 2-3 narrow columns for readability
+
+### Image Treatment
+- **Photography as hero**: Large, high-quality images dominating the layout (not decorative)
+- **Clean crops**: Images in rectangular containers, no fancy shapes
+- **Generous padding**: White space around images, never cramping them
+- **Grid systems for galleries**: Even-sized thumbnails in rows (4x2, 4x4 grids)
+- **Product-on-white aesthetic**: Clean product photography on pure white backgrounds
+
+### Color & Background
+- **Pure white dominant**: Clean #ffffff backgrounds, not cream or off-white
+- **Minimal color usage**: Mostly black text on white, with occasional single accent color
+- **Light gray backgrounds**: #f5f5f5 or #e5e5e5 for page backgrounds behind white cards
+- **Strategic black sections**: Full black backgrounds for contrast moments
+- **Accent color blocks**: Small pops of color (red, orange) used sparingly as highlights
+
+### Information Architecture
+- **Numbered lists**: "1. OVERVIEW", "2. SERVICES", etc. as section headers
+- **Metadata in lines**: "Client Name | Project Type | Year" separated by pipes or lines
+- **Small label categories**: Uppercase 11px labels like "SPECIALISED IN", "CONTACT", "ABOUT"
+- **Horizontal dividing lines**: Thin rules (1px) creating visual sections
+- **List-style information**: Stacked items with consistent spacing and alignment
+
+### Spatial Organization
+- **Air and breathing room**: Generous margins and padding throughout
+- **Contained sections**: Content lives in defined rectangular areas
+- **Aligned grids**: Everything aligns to invisible grid lines
+- **Consistent gaps**: Equal spacing between elements (20px, 30px, 40px)
+- **Edge-to-edge in black sections**: Dark sections can be full-bleed
+
+### Professional Polish
+- **Precise alignment**: Everything lines up perfectly (left edges, baselines, top edges)
+- **Consistent typography system**: Limited font sizes used repeatedly (12px, 14px, 16px, 32px, 80px, 120px)
+- **No decorative elements**: Everything serves a purpose, nothing ornamental
+- **Clean hover states**: Understated interactions, not flashy
+
+### What to AVOID:
+- ❌ Gradients (use solid colors only)
+- ❌ Rounded corners on everything (keep rectangular, maybe subtle 4-8px radius on cards)
+- ❌ Drop shadows (use very subtle if any, like 0 2px 8px rgba(0,0,0,0.04))
+- ❌ Overly decorative fonts (stick to clean system-ui)
+- ❌ Busy patterns or textures
+- ❌ Too many accent colors (pick one, use sparingly)
+- ❌ Cramped spacing (always err on the side of more whitespace)
+`;
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -92753,7 +93008,7 @@ class ContentBuilder {
     this.ShortcutInfo = new ShortcutInfo(this);
     if (!this.opts.isContentBox) {
       this.codechat = new CodeChat({
-        context: contextContentFramework + contextCodeBlock
+        context: contextContentFramework + contextCodeBlock + contextDesignGuide
       }, this);
       if (this.startAIAssistant) {
         this.openAIAssistant();