@innovastudio/contentbuilder 1.5.194 → 1.5.197

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -5561,8 +5561,8 @@ class Util {
       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);
@@ -90248,12 +90248,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:
 {
@@ -90278,6 +90282,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
@@ -90605,6 +90618,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}
@@ -90961,6 +90979,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) {
@@ -91504,11 +91530,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
@@ -91665,7 +91693,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:**
 
@@ -91741,8 +91769,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**
 
@@ -91750,80 +91777,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)
 ` + `
 ---
 ` + `
@@ -91846,7 +91910,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>
@@ -91893,16 +91957,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>
 
@@ -95446,6 +95512,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;