@innovastudio/contentbox 1.6.175 → 1.6.176

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.175",
+  "version": "1.6.176",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.188",
+    "@innovastudio/contentbuilder": "^1.5.190",
     "js-beautify": "^1.14.0",
     "marked": "^17.0.0",
     "sortablejs": "^1.15.2"

package/public/contentbox/contentbox.esm.js

@@ -115901,6 +115901,9 @@ class CodeChat$1 {
       this.systemModel = this.builder.systemModel;
     }
     this.codeModels = [{
+      id: 'anthropic/claude-opus-4.5',
+      label: 'Claude Opus 4.5'
+    }, {
       id: 'google/gemini-3-pro-preview',
       label: 'Google Gemini 3 Pro Preview'
     }, {
@@ -117915,6 +117918,10 @@ ${this.builder.html()}
 TASK: ${task.description}
 
 IMPORTANT: Follow the Best Practices in Content framework.
+${this.builder.editor ? `CRITICAL: This project uses the Content.css and Box framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.` : `CRITICAL: This project uses the Content.css framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.`}
+For flexibility, you can use inline styles or embedded <style> at the end of the generated HTML.
 
 ${imageContext}
 ${chatContext}
@@ -118782,6 +118789,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
@@ -119240,6 +119328,180 @@ Remember: The goal is to create code blocks that are **self-contained**, **confl
 </div>
 `;
 
+const contextDesignGuide$1 = `
+# Design Directive:
+
+## Purpose
+
+This guide complements the Content Framework documentation. It explains how to create **diverse, creative designs** that go beyond default aesthetics while strictly adhering to framework utility classes.
+
+## Core Philosophy: Design Freedom Within Constraints
+
+The frameworks provide utility classes for structure and typography. To create rich, varied designs:
+
+1. **Use framework classes** for all structural elements
+2. **Add inline styles** for colors, backgrounds, gradients, shadows, transforms, and animations
+3. **Create embedded styles** in '<style>...</style>' blocks at the end when needed for animations, transitions, or reusable patterns
+
+**Example <style>: When needed for animations, transitions, or reusable patterns**
+
+<div class="row">
+    <div class="column">
+
+        <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 = {
@@ -120526,7 +120788,7 @@ class ContentBuilder {
     this.ShortcutInfo = new ShortcutInfo(this);
     if (!this.opts.isContentBox) {
       this.codechat = new CodeChat$1({
-        context: contextContentFramework$1 + contextCodeBlock$1
+        context: contextContentFramework$1 + contextCodeBlock$1 + contextDesignGuide$1
       }, this);
       if (this.startAIAssistant) {
         this.openAIAssistant();
@@ -143387,6 +143649,9 @@ class CodeChat {
     }
 
     this.codeModels = [{
+      id: 'anthropic/claude-opus-4.5',
+      label: 'Claude Opus 4.5'
+    }, {
       id: 'google/gemini-3-pro-preview',
       label: 'Google Gemini 3 Pro Preview'
     }, {
@@ -145414,6 +145679,10 @@ ${this.builder.html()}
 TASK: ${task.description}
 
 IMPORTANT: Follow the Best Practices in Content framework.
+${this.builder.editor ? `CRITICAL: This project uses the Content.css and Box framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.` : `CRITICAL: This project uses the Content.css framework, NOT Tailwind. ONLY use classes explicitly documented in this framework guide.
+DO NOT use Tailwind classes like gap-4, w-1/2, top-4, hover:scale-120, etc.`}
+For flexibility, you can use inline styles or embedded <style> at the end of the generated HTML.
 
 ${imageContext}
 ${chatContext}
@@ -146311,6 +146580,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
@@ -147355,45 +147705,109 @@ The frameworks provide utility classes for structure and typography. To create r
     <!-- Content -->
 </div>
 
-<!-- More sections... -->
+<!-- Section 3 -->
+<div class="is-section is-box is-section-100 type-system-ui">
+
+    <div class="is-container leading-14 size-18 is-content-1100">
+
+        <div class="row">
+            <div class="column">
+
+                <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>
 
-<!-- Embedded styles if needed -->
+            </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>
+    </div>
+</div>
+
+<!-- Embedded Styke -->
 <style>
-@keyframes pulse {
-    0%,
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 0.8;
+    /* Subtle hover zoom for background images */
+    .is-overlay-bg {
+        transition: transform 1s ease;
+    }
+    .is-box:hover .is-overlay-bg {
         transform: scale(1.05);
     }
-}
 
-@keyframes scroll {
-    0%,
-    100% {
-        transform: translateY(0);
-        opacity: 0;
+    /* Featured image */
+    .featured-image {
+        width: 100%;
+        aspect-ratio: 21/9;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
     }
-    50% {
-        opacity: 1;
+    .featured-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .featured-image:hover img {
+        transform: scale(1.03);
     }
-}
 
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
+    /* Row image */
+    .row-image {
+        width: 100%;
+        aspect-ratio: 4/3;
+        overflow: hidden;
+        position: relative;
+        background: #fafafa;
     }
-    to {
-        transform: rotate(360deg);
+    .row-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .portfolio-row:hover .row-image img {
+        transform: scale(1.05);
     }
-}
 
-.custom-hover-effect {
-    transition: all 0.3s ease;
-}
+    /* Smooth hover animations */
+    .hover-lift {
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .hover-lift:hover {
+        transform: translateY(-4px);
+    }
 </style>
 
 
@@ -147425,9 +147839,9 @@ The frameworks provide utility classes for structure and typography. To create r
 - **Pure white dominant**: Clean #ffffff backgrounds, not cream or off-white
 - **Minimal color usage**: Mostly black text on white, with occasional single accent color
 - **Light gray backgrounds**: #f5f5f5 or #e5e5e5 for page backgrounds behind white cards
-- **Strategic black sections**: Full black backgrounds for contrast moments
-- **Accent color blocks**: Small pops of color (red, orange) used sparingly as highlights
-
+` + // - **Strategic black sections**: Full black backgrounds for contrast moments
+// - **Accent color blocks**: Small pops of color (red, orange) used sparingly as highlights
+`
 ### Information Architecture
 - **Numbered lists**: "1. OVERVIEW", "2. SERVICES", etc. as section headers
 - **Metadata in lines**: "Client Name | Project Type | Year" separated by pipes or lines
@@ -157480,7 +157894,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
     });
     arrSections.forEach(section => {
-      // Code Blocks Handling
+      if (!section.classList.contains('is-section')) return; // Code Blocks Handling
+
       let codeBlocks = section.querySelectorAll('[data-html]');
       codeBlocks.forEach(element => {
         let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
@@ -158317,6 +158732,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       // Add missing is-box class for full width (non splitted) section
       if (!section.querySelector('.is-box')) {
         section.classList.add('is-box');
+      } else {
+        section.classList.remove('is-box');
       }
 
       const containers = section.querySelectorAll('.is-container');