@innovastudio/contentbox 1.6.177 → 1.6.179

package/index.d.ts

@@ -322,6 +322,7 @@ interface ContentBoxOptions {
     defaultChatSettings?: Record<string, any>;
     demoMode?: boolean;
     demoConversations?: any[]; 
+    startCodeChat?: boolean;
 
     //-- Asset Manager
     listFilesUrl?: string;

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -34244,6 +34244,8 @@ class Util$1 {
     localStorage.removeItem('_command_lang');
     localStorage.removeItem('_ai_panel_open');
     localStorage.removeItem('_pagesize');
+    localStorage.removeItem('chatPanelVisible');
+    localStorage.removeItem('chatSettings');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -117192,8 +117194,13 @@ class CodeChat$1 {
     const savedState = localStorage.getItem('chatPanelVisible');
     let isChatVisible = savedState === 'true'; // Only open if explicitly set to 'true'
     if (!isChatVisible) {
-      modal.classList.add('hidden');
-      modal.setAttribute('aria-hidden', 'true');
+      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');
@@ -118818,7 +118825,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;
@@ -142412,6 +142419,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;
 
@@ -145720,8 +145729,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');
@@ -147380,7 +147394,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;
@@ -148579,23 +148593,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>
 
@@ -148939,6 +148945,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
@@ -148978,6 +149002,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">
@@ -149281,6 +149328,15 @@ The frameworks provide utility classes for structure and typography. To create r
 
 <!-- Embedded Styke -->
 <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);
+    }
+
     /* Subtle hover zoom for background images */
     .is-overlay-bg {
         transition: transform 1s ease;