@innovastudio/contentbox 1.5.66 → 1.5.68

package/public/contentbox/contentbox.esm.js

@@ -5840,7 +5840,7 @@ var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof w
 
 var js$2 = {exports: {}};
 
-var src$2 = {};
+var src$1 = {};
 
 var javascript$1 = {exports: {}};
 
@@ -11024,9 +11024,9 @@ function style_html$2(html_source, options, js, css) {
 }
 style_html$2.defaultOptions = html_beautify$1.defaultOptions;
 
-src$2.js = js_beautify$2;
-src$2.css = css_beautify$2;
-src$2.html = style_html$2;
+src$1.js = js_beautify$2;
+src$1.css = css_beautify$2;
+src$1.html = style_html$2;
 
 /*jshint node:true */
 
@@ -11069,7 +11069,7 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 {
   (function(mod) {
-    var beautifier = src$2;
+    var beautifier = src$1;
     beautifier.js_beautify = beautifier.js;
     beautifier.css_beautify = beautifier.css;
     beautifier.html_beautify = beautifier.html;
@@ -14057,10 +14057,10 @@ class EditBox {
                     <div data-glide-el="track" class="glide__track">
                         <ul class="glide__slides">
                             <li class="glide__slide">
-                                <div><img src="${imageList[0]}" alt=""></div>
+                                <div><img src="${this.builder.mediaPath + imageList[0]}" alt=""></div>
                             </li>
                             <li class="glide__slide">
-                                <div><img src="${imageList[1]}" alt=""></div>
+                                <div><img src="${this.builder.mediaPath + imageList[1]}" alt=""></div>
                             </li>
                         </ul>
                     </div>
@@ -14156,11 +14156,11 @@ class EditBox {
                     "images":
                         [
                             {
-                                "src": "${imageList[0]}", 
+                                "src": "${this.builder.mediaPath + imageList[0]}", 
                                 "caption": "", "style": ""
                             },
                             {
-                                "src": "${imageList[1]}", 
+                                "src": "${this.builder.mediaPath + imageList[1]}", 
                                 "caption": "", "style": ""
                             }
                         ]
@@ -15138,10 +15138,6 @@ class EditBox {
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 var rangyCore = {exports: {}};
 
 /**
@@ -23689,7 +23685,7 @@ class Dom {
 
 var js$1 = {exports: {}};
 
-var src$1 = {};
+var src = {};
 
 var javascript = {exports: {}};
 
@@ -28828,9 +28824,9 @@ function style_html(html_source, options, js, css) {
 }
 style_html.defaultOptions = html_beautify.defaultOptions;
 
-src$1.js = js_beautify;
-src$1.css = css_beautify;
-src$1.html = style_html;
+src.js = js_beautify;
+src.css = css_beautify;
+src.html = style_html;
 
 /*jshint node:true */
 
@@ -28873,7 +28869,7 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 {
   (function(mod) {
-    var beautifier = src$1;
+    var beautifier = src;
     beautifier.js_beautify = beautifier.js;
     beautifier.css_beautify = beautifier.css;
     beautifier.html_beautify = beautifier.html;
@@ -73946,6 +73942,33 @@ class ColumnTool {
         util.clearControls();
       });
 
+      /*
+      const fixLayout = (row) => {
+          let hasFixed = false;
+          let elm = row.firstElementChild;
+          let cols = this.builder.cols;
+          cols.forEach(item=>{
+              let elmClass = elm.getAttribute('class');
+              if(elmClass) {
+                  // console.log(elmClass, item);
+                  if(elmClass.indexOf(item)!==-1) {
+                      hasFixed=true;
+                  }
+              }
+          });
+          // console.log('result:' + hasFixed);
+          if(!hasFixed) {
+              if(this.builder.framework==='foundation') Array.from(row.children).map((item) => {
+                  if(item.classList.contains('is-row-tool')) return;
+                  if(item.classList.contains('is-col-tool')) return;
+                  if(item.classList.contains('is-rowadd-tool')) return;
+                  item.classList.remove('column');
+              });
+              util.fixLayout(row);
+          }
+      };
+      */
+
       // Increase
       elm = columnMore.querySelector('.cell-increase');
       dom.addEventListener(elm, 'click', () => {
@@ -73973,7 +73996,10 @@ class ColumnTool {
             });
             util.fixLayout(row);
           }
+
+          // fixLayout(row);
         }
+
         this.grid.increaseColumn();
 
         // Refresh Module
@@ -74017,7 +74043,10 @@ class ColumnTool {
             });
             util.fixLayout(row);
           }
+
+          // fixLayout(row);
         }
+
         this.grid.decreaseColumn();
 
         // Refresh Module
@@ -92536,14 +92565,8 @@ class Lib$1 {
   }
 }
 
-var recorder_min = {exports: {}};
-
-(function (module, exports) {
-!function(e,t){module.exports=t();}("undefined"!=typeof self?self:commonjsGlobal,(function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n});},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){(function(t){function o(e,t){if(null==e)return {};var o,n,i=function(e,t){if(null==e)return {};var o,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)o=r[n],t.indexOf(o)>=0||(i[o]=e[o]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)o=r[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(i[o]=e[o]);}return i}var n=t.AudioContext||t.webkitAudioContext,i=function e(){var t=this,o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!e.isRecordingSupported())throw new Error("Recording is not supported in this browser");this.state="inactive",this.config=Object.assign({bufferLength:4096,encoderApplication:2049,encoderFrameSize:20,encoderPath:"encoderWorker.min.js",encoderSampleRate:48e3,maxFramesPerPage:40,mediaTrackConstraints:!0,monitorGain:0,numberOfChannels:1,recordingGain:1,resampleQuality:3,streamPages:!1,wavBitDepth:16,sourceNode:{context:null}},o),this.encodedSamplePosition=0,this.initAudioContext(),this.initialize=this.initWorklet().then((function(){return t.initEncoder()}));};i.isRecordingSupported=function(){var e=t.navigator&&t.navigator.mediaDevices&&t.navigator.mediaDevices.getUserMedia;return n&&e&&t.WebAssembly},i.version="8.0.5",i.prototype.clearStream=function(){this.stream&&(this.stream.getTracks?this.stream.getTracks().forEach((function(e){return e.stop()})):this.stream.stop());},i.prototype.close=function(){return this.monitorGainNode.disconnect(),this.recordingGainNode.disconnect(),this.sourceNode&&this.sourceNode.disconnect(),this.clearStream(),this.encoder&&(this.encoderNode.disconnect(),this.encoder.postMessage({command:"close"})),this.config.sourceNode.context?Promise.resolve():this.audioContext.close()},i.prototype.encodeBuffers=function(e){if("recording"===this.state){for(var t=[],o=0;o<e.numberOfChannels;o++)t[o]=e.getChannelData(o);this.encoder.postMessage({command:"encode",buffers:t});}},i.prototype.initAudioContext=function(){this.audioContext=this.config.sourceNode.context?this.config.sourceNode.context:new n,this.monitorGainNode=this.audioContext.createGain(),this.setMonitorGain(this.config.monitorGain),this.recordingGainNode=this.audioContext.createGain(),this.setRecordingGain(this.config.recordingGain);},i.prototype.initEncoder=function(){var e=this;this.audioContext.audioWorklet?(this.encoderNode=new AudioWorkletNode(this.audioContext,"encoder-worklet",{numberOfOutputs:0}),this.encoder=this.encoderNode.port):(console.log("audioWorklet support not detected. Falling back to scriptProcessor"),this.encodeBuffers=function(){return delete e.encodeBuffers},this.encoderNode=this.audioContext.createScriptProcessor(this.config.bufferLength,this.config.numberOfChannels,this.config.numberOfChannels),this.encoderNode.onaudioprocess=function(t){var o=t.inputBuffer;return e.encodeBuffers(o)},this.encoderNode.connect(this.audioContext.destination),this.encoder=new t.Worker(this.config.encoderPath));},i.prototype.initSourceNode=function(){var e=this;return this.config.sourceNode.context?(this.sourceNode=this.config.sourceNode,Promise.resolve()):t.navigator.mediaDevices.getUserMedia({audio:this.config.mediaTrackConstraints}).then((function(t){e.stream=t,e.sourceNode=e.audioContext.createMediaStreamSource(t);}))},i.prototype.initWorker=function(){var e=this,t=(this.config.streamPages?this.streamPage:this.storePage).bind(this);return this.recordedPages=[],this.totalLength=0,new Promise((function(n){e.encoder.addEventListener("message",(function o(i){var r=i.data;switch(r.message){case"ready":n();break;case"page":e.encodedSamplePosition=r.samplePosition,t(r.page);break;case"done":e.encoder.removeEventListener("message",o),e.finish();}})),e.encoder.start&&e.encoder.start();var i=e.config,r=(i.sourceNode,o(i,["sourceNode"]));e.encoder.postMessage(Object.assign({command:"init",originalSampleRate:e.audioContext.sampleRate,wavSampleRate:e.audioContext.sampleRate},r));}))},i.prototype.initWorklet=function(){return this.audioContext.audioWorklet?this.audioContext.audioWorklet.addModule(this.config.encoderPath):Promise.resolve()},i.prototype.pause=function(e){var t=this;if("recording"===this.state)return this.state="paused",this.recordingGainNode.disconnect(),e&&this.config.streamPages?new Promise((function(e){t.encoder.addEventListener("message",(function o(n){"flushed"===n.data.message&&(t.encoder.removeEventListener("message",o),t.onpause(),e());})),t.encoder.start&&t.encoder.start(),t.encoder.postMessage({command:"flush"});})):(this.onpause(),Promise.resolve())},i.prototype.resume=function(){"paused"===this.state&&(this.state="recording",this.recordingGainNode.connect(this.encoderNode),this.onresume());},i.prototype.setRecordingGain=function(e){this.config.recordingGain=e,this.recordingGainNode&&this.audioContext&&this.recordingGainNode.gain.setTargetAtTime(e,this.audioContext.currentTime,.01);},i.prototype.setMonitorGain=function(e){this.config.monitorGain=e,this.monitorGainNode&&this.audioContext&&this.monitorGainNode.gain.setTargetAtTime(e,this.audioContext.currentTime,.01);},i.prototype.start=function(){var e=this;return "inactive"===this.state?(this.state="loading",this.encodedSamplePosition=0,this.audioContext.resume().then((function(){return e.initialize})).then((function(){return Promise.all([e.initSourceNode(),e.initWorker()])})).then((function(){e.state="recording",e.encoder.postMessage({command:"getHeaderPages"}),e.sourceNode.connect(e.monitorGainNode),e.sourceNode.connect(e.recordingGainNode),e.monitorGainNode.connect(e.audioContext.destination),e.recordingGainNode.connect(e.encoderNode),e.onstart();})).catch((function(t){throw e.state="inactive",t}))):Promise.resolve()},i.prototype.stop=function(){var e=this;return "paused"===this.state||"recording"===this.state?(this.state="inactive",this.recordingGainNode.connect(this.encoderNode),this.monitorGainNode.disconnect(),this.clearStream(),new Promise((function(t){e.encoder.addEventListener("message",(function o(n){"done"===n.data.message&&(e.encoder.removeEventListener("message",o),t());})),e.encoder.start&&e.encoder.start(),e.encoder.postMessage({command:"done"});}))):Promise.resolve()},i.prototype.storePage=function(e){this.recordedPages.push(e),this.totalLength+=e.length;},i.prototype.streamPage=function(e){this.ondataavailable(e);},i.prototype.finish=function(){if(!this.config.streamPages){var e=new Uint8Array(this.totalLength);this.recordedPages.reduce((function(t,o){return e.set(o,t),t+o.length}),0),this.ondataavailable(e);}this.onstop();},i.prototype.ondataavailable=function(){},i.prototype.onpause=function(){},i.prototype.onresume=function(){},i.prototype.onstart=function(){},i.prototype.onstop=function(){},e.exports=i;}).call(this,o(1));},function(e,t){var o;o=function(){return this}();try{o=o||new Function("return this")();}catch(e){"object"==typeof window&&(o=window);}e.exports=o;}])}));
-}(recorder_min));
-
-var Recorder = /*@__PURE__*/getDefaultExportFromCjs(recorder_min.exports);
-
+// import RecordRTC  from 'recordrtc';
+// import Recorder from 'opus-recorder'; // Using Recorder
 const dom$l = new Dom();
 class Dictation {
   constructor(opts = {}, builder) {
@@ -92731,6 +92754,9 @@ class Dictation {
                     transform: rotate(450deg);
                 }
             }
+            .inp-command::placeholder {
+                color: #aaa;
+            }
         </style>
         <div class="is-overlay page-command-overlay">
             <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
@@ -92983,11 +93009,11 @@ class Dictation {
         this.mediaRecorder.stop();
         this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
       }
-    } else {
-      // Using Recorder
-      if (this.recorder) this.recorder.stop();
-      if (this.localStream) this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
-    }
+    } /* else {
+        // Using Recorder
+        if(this.recorder) this.recorder.stop();
+        if(this.localStream) this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
+      } */
 
     if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
       this.websocket.close();
@@ -93060,22 +93086,23 @@ class Dictation {
         }).catch(error => {
           console.log(error);
         });
-      } else {
-        // Using Recorder
-        this.recorder = new Recorder({
-          encoderPath: 'https://cdnjs.cloudflare.com/ajax/libs/opus-recorder/8.0.5/encoderWorker.min.js',
-          leaveStreamOpen: true,
-          numberOfChannels: 1,
-          // OPUS options
-          encoderSampleRate: sampleRate,
-          streamPages: true,
-          maxBuffersPerPage: 1
-        });
-        this.recorder.ondataavailable = e => {
-          if (this.aborted) return;
-          this.websocket.send(e.buffer);
-        };
-      }
+      } /* else {
+           // Using Recorder
+          this.recorder = new Recorder({
+              encoderPath: this.builder.encoderPath||
+                  'https://cdnjs.cloudflare.com/ajax/libs/opus-recorder/8.0.5/encoderWorker.min.js',
+              leaveStreamOpen: true,
+              numberOfChannels: 1,
+                           // OPUS options
+              encoderSampleRate: sampleRate,
+              streamPages: true,
+              maxBuffersPerPage: 1,
+          });
+          this.recorder.ondataavailable = (e) => {
+              if(this.aborted) return;
+              this.websocket.send(e.buffer);
+          };
+        } */
 
       /*
       // Using RecordRTC
@@ -93104,6 +93131,7 @@ class Dictation {
         }, 2000);
       }
       let finalTranscripts = '';
+      let speechTimeout;
       this.websocket.onmessage = event => {
         const message = JSON.parse(event.data);
         if (message.event === 'can-open-mic') {
@@ -93111,22 +93139,30 @@ class Dictation {
 
           if (this.builder.useMediaRecorder) {
             this.mediaRecorder.start(1000); // Using mediaRecorder
-          } else {
-            this.recorder.start(); // Using Recorder
-          }
+          } /* else {
+              this.recorder.start(); // Using Recorder
+            } */
 
           // console.log('Start Dictation');
           this.aborted = false;
         }
         if (message.event === 'transcript-result') {
-          const transcripts = message.data;
           if (this.builder.isInProgress || this.aborted) {
             return;
           }
-          finalTranscripts += ' ' + transcripts;
+          const transcript = message.data.channel.alternatives[0].transcript;
+          if (transcript && message.data.is_final) {
+            finalTranscripts += ' ' + transcript;
+          }
+
+          // Format
+          finalTranscripts = finalTranscripts.charAt(0).toUpperCase() + finalTranscripts.slice(1);
+          finalTranscripts = finalTranscripts.trim();
           inpCommand.value = finalTranscripts;
-          clearTimeout(this.speechTimeout);
-          this.speechTimeout = setTimeout(() => {
+          clearTimeout(speechTimeout);
+          console.log('Writing..');
+          speechTimeout = setTimeout(() => {
+            console.log('Clear');
             this.builder.commandText = '';
             finalTranscripts = '';
             if (this.builder.autoSendCommand) {
@@ -93227,72 +93263,51 @@ class Dictation {
   }
 }
 
-var src = {
-	compareTwoStrings:compareTwoStrings,
-	findBestMatch:findBestMatch
+var stringSimilarity = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringSimilarity = void 0;
+/* global exports, Map */
+/**
+ * Calculate similarity between two strings
+ * @param {string} str1 First string to match
+ * @param {string} str2 Second string to match
+ * @param {number} [substringLength=2] Optional. Length of substring to be used in calculating similarity. Default 2.
+ * @param {boolean} [caseSensitive=false] Optional. Whether you want to consider case in string matching. Default false;
+ * @returns Number between 0 and 1, with 0 being a low match score.
+ */
+var stringSimilarity = function (str1, str2, substringLength, caseSensitive) {
+    if (substringLength === void 0) { substringLength = 2; }
+    if (caseSensitive === void 0) { caseSensitive = false; }
+    if (!caseSensitive) {
+        str1 = str1.toLowerCase();
+        str2 = str2.toLowerCase();
+    }
+    if (str1.length < substringLength || str2.length < substringLength)
+        return 0;
+    var map = new Map();
+    for (var i = 0; i < str1.length - (substringLength - 1); i++) {
+        var substr1 = str1.substr(i, substringLength);
+        map.set(substr1, map.has(substr1) ? map.get(substr1) + 1 : 1);
+    }
+    var match = 0;
+    for (var j = 0; j < str2.length - (substringLength - 1); j++) {
+        var substr2 = str2.substr(j, substringLength);
+        var count = map.has(substr2) ? map.get(substr2) : 0;
+        if (count > 0) {
+            map.set(substr2, count - 1);
+            match++;
+        }
+    }
+    return (match * 2) / (str1.length + str2.length - ((substringLength - 1) * 2));
 };
+exports.stringSimilarity = stringSimilarity;
+exports.default = exports.stringSimilarity;
 
-function compareTwoStrings(first, second) {
-	first = first.replace(/\s+/g, '');
-	second = second.replace(/\s+/g, '');
-
-	if (first === second) return 1; // identical or empty
-	if (first.length < 2 || second.length < 2) return 0; // if either is a 0-letter or 1-letter string
-
-	let firstBigrams = new Map();
-	for (let i = 0; i < first.length - 1; i++) {
-		const bigram = first.substring(i, i + 2);
-		const count = firstBigrams.has(bigram)
-			? firstBigrams.get(bigram) + 1
-			: 1;
-
-		firstBigrams.set(bigram, count);
-	}
-	let intersectionSize = 0;
-	for (let i = 0; i < second.length - 1; i++) {
-		const bigram = second.substring(i, i + 2);
-		const count = firstBigrams.has(bigram)
-			? firstBigrams.get(bigram)
-			: 0;
-
-		if (count > 0) {
-			firstBigrams.set(bigram, count - 1);
-			intersectionSize++;
-		}
-	}
-
-	return (2.0 * intersectionSize) / (first.length + second.length - 2);
-}
-
-function findBestMatch(mainString, targetStrings) {
-	if (!areArgsValid(mainString, targetStrings)) throw new Error('Bad arguments: First argument should be a string, second should be an array of strings');
-	
-	const ratings = [];
-	let bestMatchIndex = 0;
-
-	for (let i = 0; i < targetStrings.length; i++) {
-		const currentTargetString = targetStrings[i];
-		const currentRating = compareTwoStrings(mainString, currentTargetString);
-		ratings.push({target: currentTargetString, rating: currentRating});
-		if (currentRating > ratings[bestMatchIndex].rating) {
-			bestMatchIndex = i;
-		}
-	}
-	
-	
-	const bestMatch = ratings[bestMatchIndex];
-	
-	return { ratings: ratings, bestMatch: bestMatch, bestMatchIndex: bestMatchIndex };
-}
-
-function areArgsValid(mainString, targetStrings) {
-	if (typeof mainString !== 'string') return false;
-	if (!Array.isArray(targetStrings)) return false;
-	if (!targetStrings.length) return false;
-	if (targetStrings.find( function (s) { return typeof s !== 'string'})) return false;
-	return true;
-}
+}(stringSimilarity));
 
+// import stringSimilarity from 'string-similarity';
 class Similarity {
   constructor(builder) {
     this.builder = builder;
@@ -93322,7 +93337,7 @@ class Similarity {
     const normalizedCommand = command.toLowerCase();
     let maxSimilarity = 0;
     for (const cmd of list) {
-      const similarity = src.compareTwoStrings(normalizedCommand, cmd);
+      const similarity = stringSimilarity.stringSimilarity(normalizedCommand, cmd);
       if (similarity > maxSimilarity) {
         // console.log(list)
         // console.log(similarity)
@@ -93947,16 +93962,18 @@ class ContentBuilder {
       enableDragResize: true,
       simpleTextSettings: false,
       enableColumnsPerLine: true,
-      /* Prompt/Command Stuff */
+      /* Prompt/Command Stuff for AI Assistant */
       isContentBox: false,
       sendCommandUrl: 'http://localhost:8081/answer',
       // speechTranscribeUrl: 'http://192.168.1.7:8081',
       onlineDemo: false,
-      autoSendDelay: 3000,
+      autoSendDelay: 4000,
       commandPlaceholderText: '',
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',
-      useMediaRecorder: false,
+      useMediaRecorder: true,
+      // do not change
+      encoderPath: '',
       headlineList: ['We create simple and effective designs.', 'Ultimate Experiences With Story, Emotion, And Purpose.', 'Build Anything Beautifully', 'With Less Stuff and More Compassion', 'We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.', 'Creative and Inspiring'],
       shortCommandList: {
         undo: ['undo'],
@@ -107136,7 +107153,6 @@ Example result:
 `,
   redesign_layout2: [`To redesign the provided section:
 - Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'leading-09 size-116 font-extrabold'.
 
 This is the template:
 
@@ -107148,7 +107164,7 @@ This is the template:
                 <div class="spacer height-60"></div>
             </div>
             <div class="column" style="width: 60%; flex: 0 0 auto;">
-                <h1 class="leading-09 size-116 font-extrabold">{{Place title here}}</h1>
+                <h1 class="leading-09 size-116 font-extrabold">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
@@ -107180,8 +107196,6 @@ This is the template:
     </div>
 </div>
 
-Important: include all images from the original section in the returned result!
-    
 `, `To redesign the provided section:
 - Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
 - You must update the title class with 'tracking-tight leading-09 size-120 font-normal'.
@@ -109745,6 +109759,19 @@ class Command {
             }
 
             this.builder.editor.lib.updateBackgroundImage(activeBox, chosenImage);
+
+            if (activeBox.classList.contains('is-section')) {
+              const overlay = activeBox.querySelector('div.is-overlay');
+
+              if (overlay && overlay.querySelector('.is-overlay-bg')) {
+                let box = overlay.closest('.is-box');
+                if (box) if (box.querySelector('.is-container')) {
+                  box.classList.add('m-overlay-stack');
+                  box.classList.add('m-dark-text');
+                }
+              }
+            }
+
             this.builder.settings.onChange();
             this.dictation.finish();
             return false;
@@ -109978,11 +110005,7 @@ class Command {
           question = `Add a new section containing your response on this user request: ${question}`;
         } else if (args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
           if (args.new_section === 'new-section' || args.new_section === 'new-section-2-columns' || args.new_section === 'new-section-3-columns' || args.new_section === 'new-section-3-columns' || args.new_section === 'new-section-4-columns') {
-            if (args.section_background && args.section_background === 'image') {
-              context = this.chooseContext(cl.new_section);
-            } else if ((args.add_headline || args.add_paragraph) && args.add_image === 'image') {
-              context = cl.new_section_with_image;
-            } else if (args.add_image === 'gallery') {
+            if (args.add_image === 'gallery') {
               context = cl.new_section_with_gallery;
             } else if (args.add_list_with_image) {
               context = cl.new_section_with_list_images;
@@ -109996,6 +110019,10 @@ class Command {
               context = this.chooseContext(cl.new_section_article_with_image);
             } else if (args.add_article) {
               context = this.chooseContext(cl.new_section_article);
+            } else if (args.section_background && args.section_background === 'image') {
+              context = this.chooseContext(cl.new_section);
+            } else if ((args.add_headline || args.add_paragraph) && args.add_image === 'image') {
+              context = cl.new_section_with_image;
             } else {
               context = cl.new_section_others;
             }
@@ -110190,6 +110217,11 @@ ${currentHtml}
 
             if (args.section_background && args.section_background === 'video') {
               html = this.setBgVideo(html);
+            } // Apply bg stack
+
+
+            if (args.section_background && args.section_background === 'image') {
+              html = this.applyBgStack(html);
             } // Render
 
 
@@ -110210,9 +110242,11 @@ ${currentHtml}
 
             if (args.section_background && args.section_background === 'video') {
               html = this.setBgVideo(html);
-            } // Render
+            } // Apply bg stack
 
 
+            html = this.applyBgStack(html); // Render
+
             this.renderResult_NewSection(html);
           }
 
@@ -110452,7 +110486,9 @@ ${currentHtml}`;
       } else {
         context = this.chooseContext(cl.change_layout_of_box, val);
       }
-    }
+    } // Experiment
+    // context = cl.redesign_layout2[0];
+
 
     if (useSavedSection) {
       let con = this.lib.getPreviousSectionStyleContext();
@@ -110462,7 +110498,15 @@ ${currentHtml}`;
       } else {
         context = con.boxContext;
       }
-    }
+    } // get content width
+    // let contentWidth = '';
+    // const container = activeBox.querySelector('.is-container');
+    // if(container) container.classList.forEach(item=>{
+    //     if(item.indexOf('is-content-')!==-1 && item !=='is-content-left' && item !== 'is-content-right') {
+    //         contentWidth=item;
+    //     }
+    // });
+
 
     if (this.builder.consoleLog) console.log(context); // get typo class.
 
@@ -110497,7 +110541,9 @@ ${currentHtml}`;
         console.log('Unable to proceed. Error: mergeContent.');
         this.dictation.finish(true);
         return;
-      }
+      } // mergedHtml =  this.applyBgStack(mergedHtml);
+      // this.renderResult(mergedHtml, typeClass, contentWidth); // To apply original content width
+
 
       this.renderResult(mergedHtml, typeClass);
       this.dictation.finish(); // Must be called after finished
@@ -110639,8 +110685,7 @@ ${currentHtml}`;
 
 
     const adjustIntentForContentAlignment = (intent, question) => {
-      if (intent === 'move_content_left' || intent === 'move_content_center' || intent === 'move_content_right' || intent === 'move_content_top' || intent === 'move_content_middle' || intent === 'move_content_bottom' || intent === 'make_content_center' || // This
-      intent === 'align_content_top_left' || intent === 'align_content_top_center' || intent === 'align_content_top_right' || intent === 'align_content_middle_left' || intent === 'align_content_middle_center' || intent === 'align_content_middle_right' || intent === 'align_content_bottom_left' || intent === 'align_content_bottom_center' || intent === 'align_content_bottom_right') {
+      if (intent === 'move_content_left' || intent === 'move_content_center' || intent === 'move_content_right' || intent === 'move_content_top' || intent === 'move_content_bottom' || intent === 'align_content_top_left' || intent === 'align_content_top_right' || intent === 'align_content_bottom_left' || intent === 'align_content_bottom_right') {
         let direct = false;
 
         if (question.indexOf('top left') !== -1 || question.indexOf('left top') !== -1 || question.indexOf('top center') !== -1 || question.indexOf('center top') !== -1 || question.indexOf('top right') !== -1 || question.indexOf('right top') !== -1 || question.indexOf('middle left') !== -1 || question.indexOf('left middle') !== -1 || question.indexOf('middle center') !== -1 || question.indexOf('center middle') !== -1 || question.indexOf('middle right') !== -1 || question.indexOf('right middle') !== -1 || question.indexOf('bottom left') !== -1 || question.indexOf('left bottom') !== -1 || question.indexOf('bottom center') !== -1 || question.indexOf('center bottom') !== -1 || question.indexOf('bottom right') !== -1 || question.indexOf('right bottom') !== -1) {
@@ -110650,14 +110695,12 @@ ${currentHtml}`;
         if (!direct) {
           if (question.indexOf('top') !== -1) {
             intent = 'move_content_top';
-          } else if (question.indexOf('middle') !== -1) {
-            intent = 'move_content_middle';
           } else if (question.indexOf('bottom') !== -1) {
             intent = 'move_content_bottom';
           } else if (question.indexOf('left') !== -1) {
             intent = 'move_content_left';
           } else if (question.indexOf('center') !== -1) {
-            if (intent === 'make_content_center') ;else intent = 'move_content_center';
+            intent = 'move_content_center';
           } else if (question.indexOf('right') !== -1) {
             intent = 'move_content_right';
           }
@@ -110686,31 +110729,16 @@ ${currentHtml}`;
       this.builder.animateScroll.applyPresetBasic('is-fadeIn', 100);
       this.builder.settings.onChange();
       return false;
-    } else if (intent == 'fade_in_slow') {
-      this.builder.editor.saveForUndo();
-      this.builder.animateScroll.applyPresetBasic('is-fadeIn', 300);
-      this.builder.settings.onChange();
-      return false;
     } else if (intent == 'fade_in_up') {
       this.builder.editor.saveForUndo();
       this.builder.animateScroll.applyPresetBasic('is-fadeInUp', 100);
       this.builder.settings.onChange();
       return false;
-    } else if (intent == 'fade_in_up_slow') {
-      this.builder.editor.saveForUndo();
-      this.builder.animateScroll.applyPresetBasic('is-fadeInUp', 300);
-      this.builder.settings.onChange();
-      return false;
     } else if (intent == 'slide_up') {
       this.builder.editor.saveForUndo();
       this.builder.animateScroll.applyPresetBasic('is-slideInUp', 100);
       this.builder.settings.onChange();
       return false;
-    } else if (intent == 'slide_up_slow') {
-      this.builder.editor.saveForUndo();
-      this.builder.animateScroll.applyPresetBasic('is-slideInUp', 300);
-      this.builder.settings.onChange();
-      return false;
     } else if (intent == 'zoom_in') {
       this.builder.editor.saveForUndo();
       this.builder.animateScroll.applyPresetBasic('is-zoomIn', 300);
@@ -110880,6 +110908,19 @@ ${currentHtml}`;
 
       let chosenImage = this.chooseBgImage(activeBox);
       this.builder.editor.lib.updateBackgroundImage(activeBox, chosenImage);
+
+      if (activeBox.classList.contains('is-section')) {
+        const overlay = activeBox.querySelector('div.is-overlay');
+
+        if (overlay && overlay.querySelector('.is-overlay-bg')) {
+          let box = overlay.closest('.is-box');
+          if (box) if (box.querySelector('.is-container')) {
+            box.classList.add('m-overlay-stack');
+            box.classList.add('m-dark-text');
+          }
+        }
+      }
+
       this.builder.settings.onChange();
       return false;
     } else if (intent === 'change_bg_image') {
@@ -110898,6 +110939,19 @@ ${currentHtml}`;
       }
 
       this.builder.editor.lib.updateBackgroundImage(activeBox, chosenImage);
+
+      if (activeBox.classList.contains('is-section')) {
+        const overlay = activeBox.querySelector('div.is-overlay');
+
+        if (overlay && overlay.querySelector('.is-overlay-bg')) {
+          let box = overlay.closest('.is-box');
+          if (box) if (box.querySelector('.is-container')) {
+            box.classList.add('m-overlay-stack');
+            box.classList.add('m-dark-text');
+          }
+        }
+      }
+
       this.builder.settings.onChange();
       return false;
     } else if (intent === 'remove_bg_color') {
@@ -111294,132 +111348,61 @@ ${currentHtml}`;
 
       this.builder.settings.onChange();
       return false;
-    }
-    /*else if(intent==='move_content_left') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_center') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'center');
-      // this.builder.editor.lib.moveContent(activeBox, 'middle');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_right') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_top') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_middle') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_bottom') {
-      
+    } else if (intent === 'move_content_left') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'left');
+      this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='make_content_center') { // This
-      
+    } else if (intent === 'move_content_center') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'center');
+      this.builder.editor.lib.moveContent(activeBox, 'center');
       this.builder.editor.lib.moveContent(activeBox, 'middle');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_top_left') {
-      
+    } else if (intent === 'move_content_right') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
-      this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'right');
+      this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_top_center') {
-      
+    } else if (intent === 'move_content_top') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'center');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'top');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_top_right') {
-      
+    } else if (intent === 'move_content_bottom') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
-      this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'center');
+      this.builder.editor.lib.moveContent(activeBox, 'bottom');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_middle_left') {
-      
+    } else if (intent === 'align_content_top_left') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='align_content_middle_center') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
-      this.builder.editor.lib.moveContent(activeBox, 'center');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_middle_right') {
-      
+    } else if (intent === 'align_content_top_right') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_bottom_left') {
-      
+    } else if (intent === 'align_content_bottom_left') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
+      this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='align_content_bottom_center') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
-      this.builder.editor.lib.moveContent(activeBox, 'center');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_bottom_right') {
-      
+    } else if (intent === 'align_content_bottom_right') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
+      this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } */
-    else if (intent === 'increase_space') {
+    } else if (intent === 'increase_space') {
       let elm = this.builder.editor.activeElement;
 
       if (elm) {
@@ -111867,6 +111850,22 @@ ${currentHtml}`;
     return doc.documentElement.innerHTML;
   }
 
+  applyBgStack(html) {
+    const parser = new DOMParser();
+    let doc = parser.parseFromString(html, 'text/html');
+    const overlay = doc.querySelector('div.is-overlay');
+
+    if (overlay && overlay.querySelector('.is-overlay-bg')) {
+      let box = overlay.closest('.is-box');
+      if (box) if (box.querySelector('.is-container')) {
+        box.classList.add('m-overlay-stack');
+        box.classList.add('m-dark-text');
+      }
+    }
+
+    return doc.documentElement.innerHTML;
+  }
+
   fixCommon(html) {
     html = html.replaceAll('{{CONTENT}}', '');
     const parser = new DOMParser();
@@ -111893,6 +111892,34 @@ ${currentHtml}`;
           col.style.width = '';
           col.style.flex = '';
         }
+      }); // Fix grid (width)
+
+      const rows = container.querySelectorAll('.row');
+      rows.forEach(row => {
+        let totalWidth = 0;
+        let hasAutoWidthCol = false;
+        let lastCol;
+        const cols = row.querySelectorAll('.column');
+        cols.forEach(col => {
+          if (col.style.width && col.style.width.includes('%')) {
+            totalWidth += parseFloat(col.style.width);
+          } else {
+            hasAutoWidthCol = true;
+          }
+
+          lastCol = col;
+        });
+
+        if (totalWidth > 100) {
+          console.log('FIX: clear width. Total: ' + totalWidth);
+          cols.forEach(col => {
+            col.style.width = '';
+            col.style.flex = '';
+          });
+        } else if (totalWidth < 100 && !hasAutoWidthCol) {
+          console.log('FIX: add col. Total: ' + totalWidth);
+          if (lastCol) lastCol.insertAdjacentHTML('afterend', '<div class="column"><div class="spacer height-60"></div></div>');
+        }
       }); // Replace element style with class
 
       const elements = doc.querySelectorAll('*');
@@ -111988,17 +112015,6 @@ ${currentHtml}`;
 
           doc = parser.parseFromString(docBox.body.innerHTML, 'text/html');
         }
-      } // Apply bg stacking
-
-
-      const overlay = doc.querySelector('div.is-overlay');
-
-      if (overlay && overlay.querySelector('.is-overlay-bg')) {
-        let box = overlay.closest('.is-box');
-        if (box) if (box.querySelector('.is-container')) {
-          box.classList.add('m-overlay-stack');
-          box.classList.add('m-dark-text');
-        }
       }
 
       if (container) {
@@ -112374,7 +112390,7 @@ ${currentHtml}`;
     this.dictation.finish(); // Must be called after finished
   }
 
-  renderResult(html, typeClass) {
+  renderResult(html, typeClass, contentWidth) {
     const activeBox = this.builder.activeBox;
     const activeSection = this.builder.activeSection;
     let sectionBox = false;
@@ -112387,7 +112403,7 @@ ${currentHtml}`;
 
     if (sectionBox) {
       // section
-      // Replace class
+      // Replace type class
       const parser = new DOMParser();
       const htmlDocument = parser.parseFromString(html, 'text/html');
 
@@ -112398,6 +112414,21 @@ ${currentHtml}`;
           section.classList.remove(...Array.from(section.classList).filter(className => className.startsWith('type-')));
           section.classList.add(typeClass);
         }
+      } // Replace content width
+
+
+      if (contentWidth) {
+        const container = htmlDocument.querySelector('.is-container');
+
+        if (container) {
+          container.classList.forEach(item => {
+            if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+              container.classList.remove(item);
+              container.classList.add(contentWidth);
+            }
+          });
+          container.classList.add(contentWidth);
+        }
       }
 
       html = htmlDocument.body.innerHTML; // const typeClass = this.lib.getTypographyClass(html);
@@ -112432,6 +112463,7 @@ ${currentHtml}`;
       const replacementElement = tempContainer.firstChild; // replacementElement.setAttribute('class', savedClasses);
 
       if (savedClass) replacementElement.classList.add(savedClass); // const typeClass = this.lib.getTypographyClass(html);
+      // Replace type class
 
       if (typeClass) {
         const section = htmlDocument.querySelector('div.is-section');
@@ -112440,6 +112472,20 @@ ${currentHtml}`;
           section.classList.remove(...Array.from(section.classList).filter(className => className.startsWith('type-')));
           section.classList.add(typeClass);
         }
+      } // Replace content width
+
+
+      if (contentWidth) {
+        const container = replacementElement.querySelector('.is-container');
+
+        if (container) {
+          container.classList.forEach(item => {
+            if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+              container.classList.remove(item);
+            }
+          });
+          container.classList.add(contentWidth);
+        }
       } // Replace
 
 
@@ -115126,14 +115172,16 @@ class ContentBox {
       // http://localhost:8081/answer
       speechTranscribeUrl: '',
       // http://localhost:8081
-      autoSendDelay: 3000,
+      autoSendDelay: 4000,
       onlineDemo: false,
       startAIAssistant: false,
       temperature: 0.6,
       //0.4,
       topP: 0.9,
       //0.6,
-      useMediaRecorder: false,
+      useMediaRecorder: true,
+      // do not change
+      encoderPath: '',
       commandPlaceholderText: 'Create a section containing a short article with ideas for outdoor activities.',
       disclaimerAI: `The feature you're about to use utilizes AI in some of its processes. 
             It's important to understand that AI systems have limitations.
@@ -115145,7 +115193,7 @@ class ContentBox {
       speechRecognitionLang: 'en-US',
       similarityThreshold: 0.65,
       // for commandList similarity checking
-      headlineList: ['We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.'],
+      headlineList: ['We\'re [CompanyName]. Full stack development with a spark of creativity.'],
       mediaPath: 'assets/gallery/',
       media: {
         slider: ['slide-01.jpg', 'slide-02.jpg'],
@@ -115217,11 +115265,8 @@ class ContentBox {
         select_image: ['select image'],
         change_font: ['change font', 'change typography', 'change style'],
         fade_in: ['fade in'],
-        fade_in_slow: ['fade in slow'],
         fade_in_up: ['fade in up'],
-        fade_in_up_slow: ['fade in up slow'],
         slide_up: ['slide up'],
-        slide_up_slow: ['slide up slow'],
         zoom_in: ['zoom in'],
         zoom_out: ['zoom out'],
         animate_once: ['animate once'],
@@ -115290,22 +115335,14 @@ class ContentBox {
         align_right: ['align right', 'align text right', 'right aligned'],
         align_full: ['align full', 'align justify', 'justify', 'justify text', 'justify full'],
         clear_alignment: ['clear alignment', 'remove alignment', 'clear text alignment', 'remove text alignment'],
-        make_content_center: ['make content center'],
-        // middle center
         move_content_left: ['move content left', 'align content left'],
         move_content_center: ['move content center', 'align content center'],
         move_content_right: ['move content right', 'align content right'],
         move_content_top: ['move content top', 'align content top'],
-        move_content_middle: ['move content middle', 'align content middle'],
         move_content_bottom: ['move content bottom', 'align content bottom'],
         align_content_top_left: ['move content top left', 'align content top left'],
-        align_content_top_center: ['move content top center', 'align content top center'],
         align_content_top_right: ['move content top right', 'align content top right'],
-        align_content_middle_left: ['move content middle left', 'align content middle left'],
-        align_content_middle_center: ['move content middle center', 'align content middle center'],
-        align_content_middle_right: ['move content middle right', 'align content middle right'],
         align_content_bottom_left: ['move content bottom left', 'align content bottom left'],
-        align_content_bottom_center: ['move content bottom center', 'align content bottom center'],
         align_content_bottom_right: ['move content bottom right', 'align content bottom right'],
         increase_space: ['more space', 'increase space', 'enlarge space'],
         decrease_space: ['less space', 'decrease space', 'reduce space'],
@@ -115358,7 +115395,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
 
         },
         selection: {
-          title: 'Selection',
+          title: 'Selection & Layout',
           list: ['Select the headline', // 'Select the paragraph',
           // 'Select the button',
           // 'Select the space',
@@ -115379,7 +115416,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
           list: [// 'Set the background color to light green',
           // 'Change the background color to light yellow',
           'Add a background image', 'Change the background image', 'Add a background slider', 'Add a background video', 'Clear background', // 'Adjust the section height to 50%',
-          'Adjust the section height to 70%', 'Adjust the section height to 100%', 'Set the section height to auto']
+          'Adjust the section height to 70%', 'Change the section height to 100%', 'Set the section height to auto']
         },
         typography: {
           title: 'Typography',
@@ -115389,21 +115426,25 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
           title: 'Content',
           list: ['Set the content color to white', 'Set the content color to black', 'Increase the width of the content', 'Reduce the width of the content', 'Increase the default font size', // 'Decrease the default font size',
           'Increase the default line height', // 'Decrease the default line height',
-          'Clear the content', 'Add new content', // 'Add text',
+          'Clear the content', 'Add new content', // 'Align the content to the center',
+          // 'Align the content to the left',
           // 'Align the content to the center',
-          'Align the content to the left', // 'Align the content to the center',
           // 'Align the content to the right',
-          'Align the content to the top', 'Align the content to the middle', // 'Align the content to the bottom',
-          'Make the content centered']
+          // 'Align the content to the top',
+          // 'Align the content to the middle',
+          // 'Align the content to the bottom',
+          // 'Make the content centered'
+          'Move the content to the left', 'Move the content to the center', 'Move the content to the right', 'Move the content to the top']
         },
         element: {
           title: 'Element',
-          list: ['Add a paragraph', 'Add an image', 'Add a Youtube video', // 'Add a table',
+          list: ['Add a headline', 'Add a paragraph', 'Add an image', 'Add a Youtube video', // 'Add a table',
           // 'Add audio',
           // 'Add map',
           // 'Add an icon',
           // 'Add social links',
-          'Add a button', 'Add two buttons', 'Add a space', 'Increase the space', 'Reduce the space']
+          'Add a button', 'Add two buttons', 'Add a space', 'Increase the space' // 'Reduce the space',
+          ]
         },
         text: {
           title: 'Text Formatting',
@@ -115419,7 +115460,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
         },
         animation: {
           title: 'Animation',
-          list: ['Add a fade in animation', 'Add fade in slow animation', 'Add fade in up animation', 'Add fade in up slow animation', 'Add slide up animation', 'Add slide up slow animation', 'Add zoom in animation', 'Add zoom out animation', 'Clear the animation', 'Animate once', 'Always animate']
+          list: ['Add a fade in animation', 'Add fade in up animation', 'Add slide up animation', 'Add zoom in animation', 'Add zoom out animation', 'Clear the animation', 'Animate once', 'Always animate']
         }
       },
 
@@ -115637,6 +115678,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
       commandPlaceholderText: this.settings.commandPlaceholderText,
       similarityThreshold: this.settings.similarityThreshold,
       useMediaRecorder: this.settings.useMediaRecorder,
+      encoderPath: this.settings.encoderPath,
       container: '.is-container',
       page: '.is-wrapper',
       deleteConfirm: this.settings.deleteConfirm,
@@ -117321,6 +117363,8 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
 
   addIdea(newArea) {
     this.editor.saveForUndo();
+    const d = new Date();
+    newArea = newArea.replace('[%YEAR%]', d.getFullYear());
     let newSection;
     let arrSections = [];
 
@@ -117546,7 +117590,114 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
         return false;
       });
     });
-    this.sectionStack(); //Trigger Change event
+    this.sectionStack();
+
+    const addMultiClass = (col, multiClass) => {
+      let current = col.getAttribute('class');
+      col.setAttribute('class', current + ' ' + multiClass);
+    };
+
+    const applyClass = (col, w) => {
+      //['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'];
+      if (94 <= w && w <= 100) {
+        //col-md-11 = 91.666667%
+        addMultiClass(col, this.editor.cols[11]);
+      }
+
+      if (86 <= w && w < 94) {
+        //col-md-11 = 91.666667%
+        addMultiClass(col, this.editor.cols[10]);
+      }
+
+      if (78 <= w && w < 86) {
+        //col-md-10 = 83.333333%
+        addMultiClass(col, this.editor.cols[9]);
+      }
+
+      if (70 <= w && w < 78) {
+        //col-md-9 = 75%
+        addMultiClass(col, this.editor.cols[8]);
+      }
+
+      if (62 <= w && w < 70) {
+        //col-md-8 = 66.666667%
+        addMultiClass(col, this.editor.cols[7]);
+      }
+
+      if (54 <= w && w < 62) {
+        //col-md-7 = 58.333333%
+        addMultiClass(col, this.editor.cols[6]);
+      }
+
+      if (46 <= w && w < 54) {
+        //col-md-6 = 50%
+        addMultiClass(col, this.editor.cols[5]);
+      }
+
+      if (37 <= w && w < 46) {
+        //col-md-5 = 41.666667%
+        addMultiClass(col, this.editor.cols[4]);
+      }
+
+      if (29 <= w && w < 37) {
+        //col-md-4 = 33%
+        addMultiClass(col, this.editor.cols[3]);
+      }
+
+      if (21 <= w && w < 29) {
+        //col-md-3 = 25%
+        addMultiClass(col, this.editor.cols[2]);
+      }
+
+      if (13 <= w && w < 21) {
+        //col-md-2 = 16.666667%%
+        addMultiClass(col, this.editor.cols[1]);
+      }
+
+      if (5 <= w && w < 13) {
+        //col-md-1 = 8.333333%%%
+        addMultiClass(col, this.editor.cols[0]);
+      }
+    };
+
+    if (!this.editor.useDefaultGrid) {
+      let rows = newSection.querySelectorAll('.is-container > div');
+      rows.forEach(row => {
+        let cols = this.editor.util.getAllColumns(row);
+        cols.forEach(col => {
+          if (col.style.width && col.style.width.includes('%')) {
+            let w = parseFloat(col.style.width);
+            col.setAttribute('data-temp-w', w);
+          } else {
+            let colWidth = Number(window.getComputedStyle(col).getPropertyValue('width').match(/\d+/)[0]);
+            let rowWidth = Number(window.getComputedStyle(row).getPropertyValue('width').match(/\d+/)[0]);
+            let w = colWidth / rowWidth * 100;
+            col.setAttribute('data-temp-w', w);
+          }
+        });
+      });
+      rows = newSection.querySelectorAll('.is-container > div');
+      rows.forEach(row => {
+        let cols = this.editor.util.getAllColumns(row);
+        cols.forEach(col => {
+          let w = col.getAttribute('data-temp-w');
+          applyClass(col, parseFloat(w));
+          col.removeAttribute('data-temp-w');
+          let classes = this.editor.cols[0].split(' ');
+          if (!classes.includes('column')) col.classList.remove('column');else {
+            const classNames = col.className.split(' ');
+            const uniqueClassNames = [...new Set(classNames)]; // Using Set to remove duplicates
+
+            col.className = uniqueClassNames.join(' ');
+          }
+          col.style.width = '';
+          col.style.flex = '';
+        }); // this.editor.util.fixLayout(row);
+      });
+    }
+
+    this.clearSelection();
+    this.selectNewSection(newSection); //Trigger Change event
 
     this.onChange();
     dom.removeElement(document.querySelector('.is-sidebar-overlay'));
@@ -117562,6 +117713,48 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
   } // addIdea
 
 
+  clearSelection() {
+    const prevBox = this.doc.querySelector('.box-select');
+    if (prevBox) prevBox.classList.remove('box-select');
+    const prevSection = this.doc.querySelector('.section-select');
+    if (prevSection) prevSection.classList.remove('section-select');
+    this.editor.util.clearActiveCell();
+    this.editor.util.clearAfterUndoRedo();
+  }
+
+  selectNewSection(newSection) {
+    let sectionBox = false;
+    if (newSection.classList.contains('is-box')) sectionBox = true;
+
+    if (sectionBox) {
+      // section
+      // select box
+      newSection.classList.add('box-select');
+      this.activeBox = newSection;
+      this.wrapperEl.classList.add('hard-select'); // select section
+
+      newSection.classList.add('section-select');
+      this.activeSection = newSection; // Select
+
+      this.positionTool(newSection);
+    } else {
+      // select box
+      let box = newSection.querySelector('.is-box');
+
+      if (box) {
+        box.classList.add('box-select');
+        this.activeBox = box;
+      }
+
+      this.wrapperEl.classList.add('hard-select'); // select section
+
+      newSection.classList.add('section-select');
+      this.activeSection = newSection; // Select
+
+      this.positionTool(newSection);
+    }
+  }
+
   refreshUIStyle() {
     // -------