@innovastudio/contentbox 1.4.35 → 1.4.36

package/public/contentbox/contentbox.esm.js

@@ -651,7 +651,10 @@ class SideBar {
           } // Close all opened sidebar
 
 
-          this.closeSidebar();
+          this.closeSidebar(); // Close all modeless dialogs
+
+          this.builder.editbox.close();
+          this.builder.editsection.close();
           this.builder.animateScroll.close(); // Close anim side panel
 
           if (toggle) return;
@@ -3824,7 +3827,17 @@ class EditSection {
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
-    let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
+    let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + (`
+            <div class="is-modal is-modal-content editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-bar is-draggable" draggable=""> 
+                    ${out('Section Settings')}
+                    <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
+                    <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>
+                </div>
+                <div style="padding:0;width:100%;">
+            
+            ` ) + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
     html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
@@ -3834,6 +3847,10 @@ class EditSection {
     dom$k.appendHtml(builderStuff, html);
     let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
     this.modalEditSection = modalEditSection;
+    const btnClose = modalEditSection.querySelector('.is-modal-close');
+    if (btnClose) btnClose.addEventListener('click', () => {
+      this.close();
+    });
     new Tabs$1(modalEditSection);
     const tabs = modalEditSection.querySelectorAll('.is-tabs a');
     tabs.forEach(tab => {
@@ -4130,21 +4147,9 @@ class EditSection {
     });
   }
 
-  edit() {
-    this.builder.hideTools();
-    this.builder.sidebar.closeSidebar();
+  read() {
     const activeSection = this.builder.activeSection;
-    const modalEditSection = this.modalEditSection; // const elms = this.builder.doc.querySelectorAll('.section-active');
-    // elms.forEach(elm=>{
-    //     dom.removeClass(elm, 'section-active');
-    // });
-
-    dom$k.addClass(activeSection, 'section-active');
-    this.builder.showModal(modalEditSection, false, () => {
-      dom$k.removeClass(activeSection, 'section-active');
-      this.builder.showTools();
-    });
-    modalEditSection.focus(); // Clean old unused is-bg-light/dark
+    const modalEditSection = this.modalEditSection; // Clean old unused is-bg-light/dark
 
     let elms = this.builder.activeSection.querySelectorAll('.is-bg-light');
     elms.forEach(elm => {
@@ -4322,8 +4327,32 @@ class EditSection {
       btnSectionBgColor.style.backgroundColor = bgcolor; //preview
     } else {
       btnSectionBgColor.style.backgroundColor = '';
-    } // this.builder.scrollTo(activeSection);
+    }
+  }
+
+  close() {
+    const modalEditSection = this.modalEditSection;
+    modalEditSection.style.display = '';
+  }
+
+  edit() {
+    this.builder.wrapperEl.classList.add('hard-select');
+    this.builder.activeBox.classList.add('box-select');
+    this.builder.activeSection.classList.add('section-select');
+    const modalEditSection = this.modalEditSection;
+    modalEditSection.style.display = 'flex'; // const elms = this.builder.doc.querySelectorAll('.section-active');
+    // elms.forEach(elm=>{
+    //     dom.removeClass(elm, 'section-active');
+    // });
+
+    modalEditSection.focus();
+    this.read(); // Animate
 
+    const activeSection = this.builder.activeSection;
+    activeSection.classList.add('section-active');
+    setTimeout(() => {
+      activeSection.classList.remove('section-active');
+    }, 1000); // this.builder.scrollTo(activeSection);
   }
 
   sectionUp() {
@@ -4439,7 +4468,19 @@ class EditSection {
 
     this.builder.settings.onRender();
     this.builder.hideModal(this.modalEditSection);
-    this.builder.scrollTo(section, 600);
+    this.builder.scrollTo(section, 600); // Change
+
+    activeSection.classList.remove('section-select');
+    activeSection.classList.remove('box-select');
+    const prevBox = activeSection.querySelector('.box-select');
+    if (prevBox) prevBox.classList.remove('box-select');
+    this.builder.activeSection = section;
+
+    if (section.classList.contains('box-select')) {
+      this.builder.activeBox = section;
+    } else {
+      this.builder.activeBox = section.querySelector('.box-select');
+    }
   }
 
   sectionAnimStart(s) {
@@ -10209,7 +10250,17 @@ class EditBox {
         </form>
         `;
     html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
-    html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
+    html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + (`
+            <div class="is-modal is-modal-content editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-bar is-draggable" draggable=""> 
+                    ${out('Box Settings')}
+                    <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
+                    <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>
+                </div>
+                <div style="padding:0;width:100%;">
+            
+            ` ) + '<div style="padding:0;width:100%;">' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
     html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
     html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
     html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
@@ -10297,7 +10348,11 @@ class EditBox {
     const divBoxClick = modalEditBox.querySelector('#divBoxClick');
     this.divBoxClick = divBoxClick;
     const divBoxGeneral = modalEditBox.querySelector('#divBoxGeneral');
-    this.divBoxGeneral = divBoxGeneral; // ------ Box Cover Upload -------
+    this.divBoxGeneral = divBoxGeneral;
+    const btnClose = modalEditBox.querySelector('.is-modal-close');
+    if (btnClose) btnClose.addEventListener('click', () => {
+      this.close();
+    }); // ------ Box Cover Upload -------
 
     let fileCover = builderStuff.querySelector('.input-file-cover-central');
 
@@ -10305,6 +10360,10 @@ class EditBox {
       fileCover = this.builder.contentStuff.querySelector('.input-file-cover-central');
     }
 
+    let btnCoverCentral = builderStuff.querySelector('.is-cover-upload-central');
+    if (btnCoverCentral) btnCoverCentral.addEventListener('mouseleave', () => {
+      btnCoverCentral.style.left = 0;
+    });
     if (fileCover) fileCover.addEventListener('click', () => {
       this.targetBox = this.builder.activeBox;
     });
@@ -11967,10 +12026,7 @@ class EditBox {
     });
   }
 
-  edit() {
-    this.builder.hideTools();
-    this.targetBox = null;
-    this.builder.sidebar.closeSidebar();
+  read() {
     const builderStuff = this.builderStuff;
     const modalEditBox = builderStuff.querySelector('.is-modal.editbox');
     const activeBox = this.builder.activeBox;
@@ -12267,33 +12323,6 @@ class EditBox {
     // });
 
 
-    dom$j.addClass(activeBox, 'box-active');
-    this.builder.showModal(modalEditBox, false, () => {
-      dom$j.removeClass(activeBox, 'box-active');
-      this.builder.showTools();
-    });
-    /*
-    // Experimental
-    modalEditBox.style.display = 'flex';
-    document.body.classList.add('side-open');
-    let panel = modalEditBox.querySelector('.is-modal-content');
-    setTimeout(()=>{
-        this.builder.showModal(modalEditBox, false, ()=>{
-            dom.removeClass(activeBox, 'box-active');
-            
-            this.builder.showTools();
-             document.body.classList.remove('side-open');
-            this.builder.wrapperEl.style.transition = 'none';
-            setTimeout(()=>{
-                modalEditBox.style.display = '';
-                this.builder.wrapperEl.style.transition = '';
-            }, 200);
-        });
-    }, 10);
-    */
-
-    modalEditBox.focus();
-
     if (container) {
       modalEditBox.querySelector('.val-box-size').innerHTML = '';
       container.classList.forEach(item => {
@@ -12579,6 +12608,49 @@ class EditBox {
     if (modalEditBox.querySelector('#divBoxContentContainer').style.display === 'flex' && modalEditBox.querySelector('#tabBoxContentContainer').style.display === 'none') {
       modalEditBox.querySelector('#tabBoxGeneral').click();
     }
+  }
+
+  close() {
+    const modalEditBox = this.modalEditBox;
+    modalEditBox.style.display = '';
+  }
+
+  edit() {
+    this.builder.wrapperEl.classList.add('hard-select');
+    this.builder.activeBox.classList.add('box-select');
+    this.builder.activeSection.classList.add('section-select');
+    const modalEditBox = this.modalEditBox;
+    this.targetBox = null;
+    this.builder.sidebar.closeSidebar();
+    this.read(); // Animate
+
+    const activeBox = this.builder.activeBox;
+    activeBox.classList.add('box-active');
+    setTimeout(() => {
+      activeBox.classList.remove('box-active');
+    }, 1000);
+    modalEditBox.style.display = 'flex';
+    /*
+    // Experimental
+    modalEditBox.style.display = 'flex';
+    document.body.classList.add('side-open');
+    let panel = modalEditBox.querySelector('.is-modal-content');
+    setTimeout(()=>{
+        this.builder.showModal(modalEditBox, false, ()=>{
+            dom.removeClass(activeBox, 'box-active');
+            
+            this.builder.showTools();
+             document.body.classList.remove('side-open');
+            this.builder.wrapperEl.style.transition = 'none';
+            setTimeout(()=>{
+                modalEditBox.style.display = '';
+                this.builder.wrapperEl.style.transition = '';
+            }, 200);
+        });
+    }, 10);
+    */
+
+    modalEditBox.focus();
   } //edit
 
 
@@ -28672,6 +28744,14 @@ class HtmlUtil {
       Array.prototype.forEach.call(elms, elm => {
         dom$h.removeClass(elm, 'section-active');
       });
+      elms = tmp.querySelectorAll('.section-select');
+      Array.prototype.forEach.call(elms, elm => {
+        dom$h.removeClass(elm, 'section-select');
+      });
+      elms = tmp.querySelectorAll('.box-select');
+      Array.prototype.forEach.call(elms, elm => {
+        dom$h.removeClass(elm, 'box-select');
+      });
       elms = tmp.querySelectorAll('.is-section-tool');
       dom$h.removeElements(elms);
       elms = tmp.querySelectorAll('.is-box-tool');
@@ -35385,12 +35465,17 @@ const renderSnippetPanel = builder => {
         if (oldCss) oldCss.parentNode.removeChild(oldCss);
         builder.builderStuff.insertAdjacentHTML('afterbegin', newCss);
       }
+
+      builder.sectionDropSetup();
     },
-    onMove: () => {
+    onMove: evt => {
       let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
       // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
 
       if (emptyinfo) emptyinfo.style.display = 'none';
+      if (builder.sortableOnPage) if (evt.related.getBoundingClientRect().top < 0 || evt.related.getBoundingClientRect().top > window.innerHeight) {
+        return false;
+      }
     },
     onStart: () => {
       // Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
@@ -35419,6 +35504,8 @@ const renderSnippetPanel = builder => {
       if (activeBuilderArea) {
         dom.addClass(activeBuilderArea, 'builder-active');
       }
+
+      if (builder.sortableOnPage) builder.sortableOnPage.destroy();
     }
   });
 
@@ -91461,6 +91548,199 @@ class ContentBuilder {
     // return currentScript.replace(currentScriptFile, '');
   }
 
+  sectionDropSetup() {
+    if (this.page) {
+      if (this.page !== '.is-wrapper') return; // only for ContentBox
+
+      const wrapper = this.doc.querySelector(this.page);
+      this.sortableOnPage = new Sortable(wrapper, {
+        scroll: true,
+        group: 'shared',
+        direction: 'vertical',
+        animation: 150,
+        sort: true,
+        // draggable: '.dummy',
+        swapThreshold: 0.1,
+        invertSwap: true,
+        onAdd: evt => {
+          var itemEl = evt.item;
+
+          if (itemEl.querySelector('.is-col-tool')) {
+            let rowTool = itemEl.querySelector('.is-row-tool');
+            let colTool = itemEl.querySelector('.is-col-tool');
+            let rowAddTool = itemEl.querySelector('.is-rowadd-tool');
+            itemEl.removeChild(rowTool);
+            itemEl.removeChild(colTool);
+            itemEl.removeChild(rowAddTool);
+            let elms = itemEl.querySelectorAll('[data-click]');
+            elms.forEach(elm => {
+              elm.removeAttribute('data-click');
+            });
+            itemEl.removeAttribute('draggable');
+            itemEl.classList.remove('row-active');
+            itemEl.classList.remove('row-outline');
+            elms = itemEl.querySelectorAll('.cell-active');
+            elms.forEach(elm => {
+              elm.classList.remove('cell-active');
+            });
+            elms = itemEl.querySelectorAll('*');
+            elms.forEach(elm => {
+              elm.style.cursor = '';
+            });
+            itemEl.outerHTML = `
+                        <div class="is-section is-box is-section-100 type-poppins">
+                            <div class="is-overlay"></div>
+                            <div class="is-boxes">
+                                <div class="is-box-centered">
+                                    <div class="is-container is-content-900 v2 size-18 leading-14">
+                                        ${itemEl.outerHTML}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        `;
+            if (this.opts.onSectionAdd) this.opts.onSectionAdd(); // //Trigger Change event
+            // this.opts.onChange();
+            // //Trigger Render event
+            // this.opts.onRender();
+
+            return;
+          }
+
+          if (itemEl.getAttribute('data-id')) {
+            // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
+            let snippetid = itemEl.getAttribute('data-id'); // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
+
+            const result = this.opts.snippetJSON.snippets.filter(item => {
+              if (item.id + '' === snippetid) return item;else return false;
+            });
+            var html = result[0].html;
+            var noedit = result[0].noedit;
+            var bSnippet;
+
+            if (html.indexOf('"row') === -1) {
+              bSnippet = true; // Just snippet (without row/column grid)
+            } else {
+              bSnippet = false; // Snippet is wrapped in row/colum
+            }
+
+            if (this.opts.emailMode) bSnippet = false; // Convert snippet into your defined 12 columns grid   
+
+            var rowClass = this.opts.row; //row
+
+            var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
+
+            if (rowClass !== '' && colClass.length === 12) {
+              // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
+              html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
+
+              html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
+              html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+              html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+              html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+              html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+              html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+              html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+              html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+              html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+              html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+              html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+            }
+
+            html = html.replace(/{id}/g, this.util.makeId());
+
+            if (this.opts.onAdd) {
+              html = this.opts.onAdd(html);
+            }
+
+            if (this.opts.snippetPathReplace.length > 0) {
+              // try {
+              if (this.opts.snippetPathReplace[0] !== '') {
+                var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
+                html = html.replace(regex, this.opts.snippetPathReplace[1]);
+                var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
+                var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
+                var regex2 = new RegExp(string1, 'g');
+                html = html.replace(regex2, string2);
+              } // } catch (e) { 1; }
+
+            }
+
+            if (bSnippet) {
+              // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
+              // Can be inserted after current row, column (cell), element, or last row.
+              html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`; // Clean snippet from sortable related code
+
+              itemEl.removeAttribute('draggable');
+              this.dom.removeClass(itemEl, 'snippet-item'); // itemEl.outerHTML = html;
+
+              itemEl.outerHTML = `
+                            <div class="is-section is-box is-section-100 type-poppins">
+                                <div class="is-overlay"></div>
+                                <div class="is-boxes">
+                                    <div class="is-box-centered">
+                                        <div class="is-container is-content-900 v2 size-18 leading-14">${html}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            `;
+            } else {
+              // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
+              // Can only be inserted after current row or last row (not on column or element).
+              let snippet = this.dom.createElement('div');
+              snippet.innerHTML = html;
+              let blocks = snippet.querySelectorAll('[data-html]');
+              Array.prototype.forEach.call(blocks, block => {
+                // Render custom code block
+                html = decodeURIComponent(block.getAttribute('data-html'));
+                html = html.replace(/{id}/g, this.util.makeId());
+
+                for (var i = 1; i <= 20; i++) {
+                  html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+                }
+
+                block.innerHTML = html;
+              });
+              html = snippet.innerHTML; // Clean snippet from sortable related code
+
+              itemEl.removeAttribute('draggable');
+              this.dom.removeClass(itemEl, 'snippet-item');
+              itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
+              // https://ghinda.net/article/script-tags/
+
+              var range = document.createRange();
+              range.setStart(itemEl, 0);
+              itemEl.appendChild(range.createContextualFragment(html)); // itemEl.outerHTML = itemEl.innerHTML;
+
+              itemEl.outerHTML = `
+                            <div class="is-section is-box is-section-100 type-poppins">
+                                <div class="is-overlay"></div>
+                                <div class="is-boxes">
+                                    <div class="is-box-centered">
+                                        <div class="is-container is-content-900 v2 size-18 leading-14">${itemEl.innerHTML}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            `;
+            } // // After snippet has been added, re-apply behavior on builder areas
+            // this.applyBehaviorOn(builder);
+
+
+            if (this.opts.onSectionAdd) this.opts.onSectionAdd(); //Trigger Change event
+
+            this.opts.onChange(); //Trigger Render event
+
+            this.opts.onRender(); // // Hide element tool
+            // this.elmTool.hide();
+          } // this.sortableOnPage.option('draggable', '.dummy');
+
+
+          this.sortableOnPage.destroy();
+        }
+      });
+    }
+  }
+
 }
 
 var pace = {exports: {}};
@@ -92766,53 +93046,68 @@ class ContentStuff {
               50% {transform:scale(0.95);}
               100% {transform:scale(1);}
           }
+          
 
-          .box-hover {
-            outline: 1px solid #00da89;
-            outline-offset: -1px;
+          /* Navbar Fix */
+          .is-wrapper.is-edit .is-section.is-section-navbar,
+          .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
+            left: 0;
+            margin-left: 60px;
+            width: calc(100% - 60px);
           }
-          .is-section:not(.box-space) .box-hover .is-overlay,
-          .is-section:not(.box-space).box-hover .is-overlay {
-            top: 1px;
-            bottom: 1px;
-            left: 1px;
-            right: 1px;
+          .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar.static {
+            width: 100%;
+            margin-left: unset;
           }
-          
-          .box-active .is-container {
-            border: rgba(0,0,0,0.1) 1px solid;
+
+          /* protected section */
+          .is-section.protected .is-box-tool {
+            display: none !important;
           }
 
-          .box-active {
-            outline: 1px solid #00da89;
+          /* manual selection during animation edit */
+          .hard-select .is-box-tool {
+            display: none !important;
+          }
+          .hard-select .is-section-tool {
+            display: none !important;
+          }
+          .hard-select .box-select {
+            outline: #00da89 1px solid;
             outline-offset: -1px;
+            z-index: 1;
           }
-          .is-section:not(.box-space) .box-active .is-overlay,
-          .is-section:not(.box-space).box-active .is-overlay {
-            top: 1px;
-            bottom: 1px;
-            left: 1px;
-            right: 1px;
+          .hard-select .box-select .is-box-tool {
+            display: flex !important;
           }
-          .section-active {
-              outline: 1px solid #00da89;
-              outline-offset: -1px;
+          .hard-select .box-select .is-overlay {
+            z-index: -1;
           }
-          .is-section:not(.box-space).section-active .is-overlay {
-            top: 1px;
-            bottom: 1px;
-            left: 1px;
-            right: 1px;
+          .hard-select .section-select .is-section-tool {
+            display: block !important;
           }
-          /*
-          .content-edit .is-section-tool,
-          .content-edit .is-box-tool {
+
+          /* drop block as section */
+          .is-wrapper > .sortable-ghost {
+            height: 40px !important;
+            min-height: unset !important;
+            background: rgba(204, 204, 204, 0.15) !important;
+          }
+
+          /* toggle tool */
+          .is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
+          .is-wrapper.is-clean-edit .box-select .is-box-tool {
             display: none !important;
           }
-          */
-          .content-edit .box-hover {
+          .is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
+          .is-wrapper.is-clean-edit .section-select .is-section-tool {
+            display: none !important;
+          }
+          .is-wrapper.is-clean-edit .hard-select .box-select,
+          .is-wrapper.is-clean-edit .box-select {
             outline: none !important;
           }
+          
         `; // .is-wrapper.is-edit > div {
     //   overflow-x: unset;
     //   overflow-y: unset;
@@ -93033,6 +93328,10 @@ class AnimateScroll {
                                 </tr>
                             </table>
 
+                            <div class="flex-wrap" style="margin-top:20px;">
+                                <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" data-value="data-center" style="width:320px">${out('Disable Smooth Animation')}</button>
+                            </div>
+
                             <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="flex: none;margin-top:30px;margin-bottom:20px;width:320px">
                                 <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
                                 <span style="margin-left:7px">${out('Clear All')}</span>
@@ -93486,6 +93785,10 @@ class AnimateScroll {
                                 <button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:74px">${out('Late')}</button>
                                 <button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
                             </div>
+
+                            <div class="flex-wrap" style="margin-top:30px;">
+                                <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" data-value="data-center" style="width:320px">${out('Disable Smooth Animation')}</button>
+                            </div>
                         </div>
 
                 
@@ -93576,7 +93879,9 @@ class AnimateScroll {
     const btnClose = modalAnimateScroll.querySelector('.is-side-close');
     btnClose.addEventListener('click', () => {
       this.close();
-    }); // Target
+    });
+    this.divAnimScrollSimple = modalAnimateScroll.querySelector('#divAnimScrollSimple');
+    this.divAnimSettings = modalAnimateScroll.querySelector('#divAnimSettings'); // Target
 
     let btns = modalAnimateScroll.querySelectorAll('.cmd-target');
     btns.forEach(btn => {
@@ -94618,30 +94923,38 @@ class AnimateScroll {
 
 
       this.builder.settings.onChange();
+    });
+    const btnDisableSmoothAnim = this.divAnimSettings.querySelector('.cmd-disable-smoothanim');
+    btnDisableSmoothAnim.addEventListener('click', () => {
+      if (btnDisableSmoothAnim.classList.contains('on')) {
+        btnDisableSmoothAnim.classList.remove('on');
+      } else {
+        btnDisableSmoothAnim.classList.add('on');
+      }
+
+      this.apply();
+    });
+    const btnDisableSmoothAnim2 = this.divAnimScrollSimple.querySelector('.cmd-disable-smoothanim');
+    btnDisableSmoothAnim2.addEventListener('click', () => {
+      if (btnDisableSmoothAnim2.classList.contains('on')) {
+        btnDisableSmoothAnim2.classList.remove('on');
+      } else {
+        btnDisableSmoothAnim2.classList.add('on');
+      }
+
+      this.applySimpleScroll();
     }); // ---
-    //Extend onContentClick 
+    //Extend onPageContentClick 
 
-    let old = this.builder.settings.onContentClick;
+    let old = this.builder.settings.onPageContentClick;
 
-    this.builder.settings.onContentClick = () => {
+    this.builder.settings.onPageContentClick = () => {
       if (old) old.call(this); // call user's defined onRender
 
       if (!this.modalAnimateScroll.classList.contains('active')) return;
       setTimeout(() => {
         this.clickContent();
       }, 30);
-    }; //Extend onSectionChange 
-
-
-    let old2 = this.builder.settings.onSectionChange;
-
-    this.builder.settings.onSectionChange = () => {
-      if (old2) old2.call(this); // call user's defined onRender
-
-      if (!this.modalAnimateScroll.classList.contains('active')) return;
-      setTimeout(() => {
-        this.readAnimOnce();
-      }, 30);
     };
   }
 
@@ -94666,6 +94979,18 @@ class AnimateScroll {
       } else if (currentTarget.name === 'container') {
         const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=container]');
         btn.classList.add('on');
+      } else if (currentTarget.name === 'bg') {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=bg]');
+        btn.classList.add('on');
+      } else if (currentTarget.name === 'overlay') {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=overlay]');
+        btn.classList.add('on');
+      } else if (currentTarget.name === 'box') {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=box]');
+        btn.classList.add('on');
+      } else if (currentTarget.name === 'section') {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=section]');
+        btn.classList.add('on');
       }
     } else {
       // no animation on the selected element
@@ -94674,6 +94999,7 @@ class AnimateScroll {
     }
 
     this.read();
+    this.readAnimOnce();
   }
 
   clearSettings() {
@@ -94822,7 +95148,15 @@ class AnimateScroll {
     if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
     if (btnDelay) btnDelay.classList.add('on');
     const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
-    if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); // Simple Scroll
+    if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on');
+    const btnDisableSmoothAnim = this.modalAnimateScroll.querySelectorAll('.cmd-disable-smoothanim');
+    btnDisableSmoothAnim.forEach(btn => {
+      if (activeElement.hasAttribute('data-smooth-scrolling')) {
+        btn.classList.add('on');
+      } else {
+        btn.classList.remove('on');
+      }
+    }); // Simple Scroll
 
     if (activeElement.hasAttribute('data-bottom-top') && activeElement.hasAttribute('data-top-bottom') && !(activeElement.hasAttribute('data-center-bottom') || activeElement.hasAttribute('data-100-top') || activeElement.hasAttribute('data-50-top') || activeElement.hasAttribute('data-top'))) {
       const inpSimpleScrollX_Start = this.modalAnimateScroll.querySelector('.inp-simplescroll-x-start');
@@ -95257,6 +95591,15 @@ class AnimateScroll {
     let dataEnd = 'data-top-bottom';
     if (sStart !== '') activeElement.setAttribute(dataStart, sStart);else activeElement.removeAttribute(dataStart);
     if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd);else activeElement.removeAttribute(dataEnd);
+    const btnDisableSmoothAnim = this.divAnimScrollSimple.querySelector('.cmd-disable-smoothanim');
+
+    if (btnDisableSmoothAnim.classList.contains('on')) {
+      activeElement.setAttribute('data-smooth-scrolling', 'off');
+      activeElement.style.transition = '';
+    } else {
+      activeElement.removeAttribute('data-smooth-scrolling');
+    }
+
     activeElement.style.transform = '';
     activeElement.style.transition = '';
     activeElement.style.opacity = '';
@@ -95435,6 +95778,15 @@ class AnimateScroll {
       activeElement.style.opacity = '';
     }
 
+    const btnDisableSmoothAnim = this.divAnimSettings.querySelector('.cmd-disable-smoothanim');
+
+    if (btnDisableSmoothAnim.classList.contains('on')) {
+      activeElement.setAttribute('data-smooth-scrolling', 'off');
+      activeElement.style.transition = '';
+    } else {
+      activeElement.removeAttribute('data-smooth-scrolling');
+    }
+
     if (this.builder.win.skrollrr) {
       this.builder.win.skrollrr.refresh();
     } //Trigger Change event
@@ -95469,7 +95821,7 @@ class AnimateScroll {
 
       if (reCheck) {
         if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
-        if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;
+        if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;else activeElement = this.builder.editor.activeElement;
       } else {
         activeElement = this.builder.editor.activeElement;
       }
@@ -95490,31 +95842,27 @@ class AnimateScroll {
     }
 
     if (target === 'overlay') {
-      let activeBox = this.builder.activeBox;
-      let activeCol = this.builder.editor.activeCol;
-      if (activeCol) activeBox = activeCol.closest('.is-box');
-      if (activeBox) activeElement = activeBox.querySelector('.is-overlay');
+      let overlay;
+      const box = this.builder.doc.querySelector('.box-select');
+      if (box) overlay = box.querySelector('.is-overlay');
+      if (overlay) activeElement = overlay;
     }
 
     if (target === 'bg') {
-      let activeBox = this.builder.activeBox;
-      let activeCol = this.builder.editor.activeCol;
-      if (activeCol) activeBox = activeCol.closest('.is-box');
-      if (activeBox) activeElement = activeBox.querySelector('.is-overlay-bg');
+      let overlayBg;
+      const box = this.builder.doc.querySelector('.box-select');
+      if (box) overlayBg = box.querySelector('.is-overlay-bg');
+      if (overlayBg) activeElement = overlayBg;
     }
 
     if (target === 'box') {
-      let activeBox = this.builder.activeBox;
-      let activeCol = this.builder.editor.activeCol;
-      if (activeCol) activeBox = activeCol.closest('.is-box');
-      if (activeBox) activeElement = activeBox;
+      const box = this.builder.doc.querySelector('.box-select');
+      if (box) activeElement = box;
     }
 
     if (target === 'section') {
-      let activeSection = this.builder.activeSection;
-      let activeCol = this.builder.editor.activeCol;
-      if (activeCol) activeSection = activeCol.closest('.is-section');
-      if (activeSection) activeElement = activeSection;
+      const section = this.builder.doc.querySelector('.section-select');
+      if (section) activeElement = section;
     }
 
     return {
@@ -95526,31 +95874,29 @@ class AnimateScroll {
   readTarget(s) {
     if (!s) {
       // element (inspectedElement first)
-      let activeElement = this.builder.editor.inspectedElement;
-      if (!activeElement) return false;
-      const divAnimDefault = this.modalAnimateScroll.querySelector('#divAnimDefault');
-      const divAnimScroll = this.modalAnimateScroll.querySelector('#divAnimScroll');
-      const divAnimScrollSimple = this.modalAnimateScroll.querySelector('#divAnimScrollSimple');
-      let css1, css2;
-
-      if (divAnimScroll.style.display === 'flex' || divAnimScrollSimple.style.display === 'flex') {
-        // enter start
-        css1 = activeElement.getAttribute('data-bottom-top');
-        if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
-        if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
-        if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
+      let activeElement = this.builder.editor.inspectedElement; // if(!activeElement) return false;
 
-        css2 = activeElement.getAttribute('data-top-bottom');
+      if (!activeElement) {
+        return this.readTarget('bg');
       }
 
-      let hasBasicAnim = false;
+      let css1, css2; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
+      // enter start
+
+      css1 = activeElement.getAttribute('data-bottom-top');
+      if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
+
+      css2 = activeElement.getAttribute('data-top-bottom'); // }
+
+      let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
+      // basic anim
+
+      if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
+        hasBasicAnim = true;
+      } // }
 
-      if (divAnimDefault.style.display === 'flex') {
-        // basic anim
-        if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
-          hasBasicAnim = true;
-        }
-      }
 
       if (css1 || css2 || hasBasicAnim) {
         return {
@@ -95572,38 +95918,66 @@ class AnimateScroll {
       }
 
       if (s === 'row') {
-        activeElement = this.builder.editor.activeCol.parentNode;
+        if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode;
       }
 
       if (s === 'container') {
-        activeElement = this.builder.editor.activeCol.parentNode.parentNode;
+        if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode.parentNode;
       }
 
-      if (!activeElement) return false;
-      const divAnimDefault = this.modalAnimateScroll.querySelector('#divAnimDefault');
-      const divAnimScroll = this.modalAnimateScroll.querySelector('#divAnimScroll');
-      const divAnimScrollSimple = this.modalAnimateScroll.querySelector('#divAnimScrollSimple');
-      let css1, css2;
+      if (s === 'bg') {
+        let overlayBg;
+        const box = this.builder.doc.querySelector('.box-select');
+        if (box) overlayBg = box.querySelector('.is-overlay-bg');
+        if (overlayBg) activeElement = overlayBg;
+      }
 
-      if (divAnimScroll.style.display === 'flex' || divAnimScrollSimple.style.display === 'flex') {
-        // enter start
-        css1 = activeElement.getAttribute('data-bottom-top');
-        if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
-        if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
-        if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
+      if (s === 'overlay') {
+        let overlay;
+        const box = this.builder.doc.querySelector('.box-select');
+        if (box) overlay = box.querySelector('.is-overlay');
+        if (overlay) activeElement = overlay;
+      }
 
-        css2 = activeElement.getAttribute('data-top-bottom');
+      if (s === 'box') {
+        const box = this.builder.doc.querySelector('.box-select');
+        if (box) activeElement = box;
       }
 
-      let hasBasicAnim = false;
+      if (s === 'section') {
+        const section = this.builder.doc.querySelector('.section-select');
+        if (section) activeElement = section;
+      }
 
-      if (divAnimDefault.style.display === 'flex') {
-        // basic anim
-        if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
-          hasBasicAnim = true;
-        }
+      if (!activeElement) {
+        if (s === 'element') return this.readTarget('column');
+        if (s === 'column') return this.readTarget('row');
+        if (s === 'row') return this.readTarget('container');
+        if (s === 'container') return this.readTarget('bg');
+        if (s === 'bg') return this.readTarget('overlay');
+        if (s === 'overlay') return this.readTarget('box');
+        if (s === 'box') return this.readTarget('section');
+        if (s === 'section') return false;
       }
 
+      let css1, css2; // if(divAnimScroll.style.display==='flex'||divAnimScrollSimple.style.display==='flex') {
+      // enter start
+
+      css1 = activeElement.getAttribute('data-bottom-top');
+      if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
+      if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
+
+      css2 = activeElement.getAttribute('data-top-bottom'); // }
+
+      let hasBasicAnim = false; // if(divAnimDefault.style.display==='flex') {
+      // basic anim
+
+      if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
+        hasBasicAnim = true;
+      } // }
+
+
       if (css1 || css2 || hasBasicAnim) {
         return {
           'element': activeElement,
@@ -95613,7 +95987,11 @@ class AnimateScroll {
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
-        if (s === 'container') return false;
+        if (s === 'container') return this.readTarget('bg');
+        if (s === 'bg') return this.readTarget('overlay');
+        if (s === 'overlay') return this.readTarget('box');
+        if (s === 'box') return this.readTarget('section');
+        if (s === 'section') return false;
       }
     }
   }
@@ -95674,7 +96052,10 @@ class AnimateScroll {
   }
 
   edit() {
-    // Close all opened sidebar
+    this.builder.wrapperEl.classList.add('hard-select');
+    this.builder.activeBox.classList.add('box-select');
+    this.builder.activeSection.classList.add('section-select'); // Close all opened sidebar
+
     this.builder.sidebar.closeSidebar();
     this.modalAnimateScroll.classList.add('active');
     this.clickContent();
@@ -95693,7 +96074,6 @@ class ContentBox {
     const defaults = {
       wrapper: '.is-wrapper',
       previewURL: 'preview.html',
-      sectionHoverOutline: false,
       useSidebar: true,
       disableLoadingStatus: false,
       sidebarData: {
@@ -98375,6 +98755,9 @@ class ContentBox {
       snippetPathReplace: this.settings.snippetPathReplace,
       maxColumns: 6,
       maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
+      onSectionAdd: () => {
+        this.pageSetup();
+      },
       slider: this.settings.slider,
       onRender: () => {
         this.settings.onRender();
@@ -98605,7 +98988,8 @@ class ContentBox {
 
   init() {
     // Add special css (remove on destroy)
-    dom.appendHtml(this.doc.head, `<style id="_contentbox_lightbox">
+    // This is also for backward compatible if using npm but still using old local assets/css
+    dom.appendHtml(this.doc.head, `<style id="_contentbox_css">
         body {
             background: ${this.settings.backgroundColor};
         }
@@ -98616,6 +99000,109 @@ class ContentBox {
             pointer-events: unset;
             user-select: unset;
         } 
+
+        /* Navbar Fix */
+        .is-wrapper.is-edit .is-section.is-section-navbar,
+        .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
+          left: 0;
+          margin-left: 60px;
+          width: calc(100% - 60px);
+        }
+        .is-wrapper.is-edit .is-section.is-section-navbar .is-topbar.static {
+          width: 100%;
+          margin-left: unset;
+        }
+
+        /* protected section */
+        .is-section.protected .is-box-tool {
+          display: none !important;
+        }
+
+        /* manual selection during animation edit */
+        .hard-select .is-box-tool {
+          display: none !important;
+        }
+        .hard-select .is-section-tool {
+          display: none !important;
+        }
+        .hard-select .box-select {
+          outline: #00da89 1px solid;
+          outline-offset: -1px;
+          z-index: 1;
+        }
+        .hard-select .box-select .is-box-tool {
+          display: flex !important;
+        }
+        .hard-select .box-select .is-overlay {
+          z-index: -1;
+        }
+        .hard-select .section-select .is-section-tool {
+          display: block !important;
+        }
+
+        /* drop block as section */
+        .is-wrapper > .sortable-ghost {
+            height: 40px !important;
+            min-height: unset !important;
+            background: rgba(204, 204, 204, 0.15) !important;
+        }
+
+        /* toggle tool */
+        .is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
+        .is-wrapper.is-clean-edit .box-select .is-box-tool {
+          display: none !important;
+        }
+        .is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
+        .is-wrapper.is-clean-edit .section-select .is-section-tool {
+          display: none !important;
+        }
+        .is-wrapper.is-clean-edit .hard-select .box-select,
+        .is-wrapper.is-clean-edit .box-select {
+          outline: none !important;
+        }
+        
+
+        </style>`);
+    dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
+
+            #_cbhtml .is-modal.editbox.is-modal-content {
+                z-index: 10002;
+                position: fixed;
+                overflow: hidden;
+                width: 380px;
+                height: auto;
+                top: calc(50% - 250px);
+                left: calc(50% - 175px);
+                box-sizing: content-box;
+                flex-direction: row;
+                align-items: flex-start;
+            }
+            #_cbhtml .is-modal.editbox.is-modal-content.active {
+                display: flex;
+            }
+            #_cbhtml .is-modal.editbox.is-modal-content .is-modal-overlay {
+                display: none;
+            }
+
+            #_cbhtml .is-modal.editsection.is-modal-content {
+                z-index: 10002;
+                position: fixed;
+                overflow: hidden;
+                width: 313px;
+                height: auto;
+                top: calc(50% - 265px);
+                left: calc(50% - 157px);
+                box-sizing: content-box;
+                flex-direction: row;
+                align-items: flex-start;
+            }
+            #_cbhtml .is-modal.editbox.is-modal-content.active {
+                display: flex;
+            }
+            #_cbhtml .is-modal.editbox.is-modal-content .is-modal-overlay {
+                display: none;
+            }
+
         </style>`); // Add page-overlay (to prevent mouseover during page init. 
     // Otherwise the mouseover won't be triggered when the page ready)
 
@@ -98714,7 +99201,128 @@ class ContentBox {
 
     this.doc.addEventListener('click', this.doDocumentClick = e => {
       e = e || window.event;
-      var target = e.target || e.srcElement;
+      var target = e.target || e.srcElement; //--- New UX ---
+
+      if (!target.closest('#_cbhtml') && !target.closest('.is-box-tool') && !target.closest('.is-section-tool') && !target.closest('.is-side') && !target.closest('.is-modal') && !target.closest('.is-sidebar')) {
+        if (target.closest('.is-wrapper') && !target.classList.contains('is-wrapper')) {
+          // Inside Wrapper
+          if (target.closest('.is-container')) {
+            // Inside Container
+            const box = target.closest('.is-box');
+
+            if (!target.closest('.is-tool') && !target.closest('.is-rowadd-tool')) {
+              if (box.classList.contains('box-select')) {
+                if (this.wrapperEl.classList.contains('is-container-edit')) {
+                  this.wrapperEl.classList.remove('is-container-edit');
+                  this.wrapperEl.classList.add('is-clean-edit');
+                } else {
+                  this.wrapperEl.classList.add('is-container-edit');
+                  this.wrapperEl.classList.remove('is-clean-edit');
+                }
+              } else {
+                this.wrapperEl.classList.add('is-container-edit');
+                this.wrapperEl.classList.remove('is-clean-edit');
+              }
+            }
+
+            if (box) {
+              // clear
+              const prevBox = this.doc.querySelector('.box-select');
+              if (prevBox) prevBox.classList.remove('box-select'); // select
+
+              box.classList.add('box-select');
+              this.activeBox = box;
+              this.wrapperEl.classList.add('hard-select');
+            }
+
+            const section = target.closest('.is-section');
+
+            if (section) {
+              // clear
+              const prevSection = this.doc.querySelector('.section-select');
+              if (prevSection) prevSection.classList.remove('section-select'); // select
+
+              section.classList.add('section-select');
+              this.activeSection = section;
+            }
+          } else {
+            // Outside Container
+            this.editor.inspectedElement = null;
+            this.editor.activeElement = null;
+            this.editor.activeCol = null;
+            const box = target.closest('.is-box');
+
+            if (box) {
+              if (box.classList.contains('box-select') && !this.wrapperEl.classList.contains('is-clean-edit')) {
+                // toggle
+                const modalEditBox = this.builderStuff.querySelector('.editbox');
+                const modalEditSection = this.builderStuff.querySelector('.editsection');
+
+                if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
+                  // clear
+                  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.wrapperEl.classList.remove('hard-select');
+                }
+              } else {
+                // clear
+                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');
+                box.classList.add('box-select');
+                this.activeBox = box;
+                const section = box.closest('.is-section');
+                section.classList.add('section-select');
+                this.activeSection = section;
+                this.wrapperEl.classList.add('hard-select');
+              }
+            }
+
+            this.wrapperEl.classList.remove('is-container-edit');
+            this.wrapperEl.classList.remove('is-clean-edit');
+          }
+
+          const modalEditBox = this.builderStuff.querySelector('.editbox');
+
+          if (modalEditBox.style.display === 'flex') {
+            this.editbox.read();
+          }
+
+          const modalEditSection = this.builderStuff.querySelector('.editsection');
+
+          if (modalEditSection.style.display === 'flex') {
+            this.editsection.read();
+          }
+
+          if (this.settings.onPageContentClick) this.settings.onPageContentClick(e);
+        } else {
+          // Outside Wrapper
+          this.wrapperEl.classList.remove('is-container-edit');
+          this.wrapperEl.classList.remove('is-clean-edit');
+          const modalEditBox = this.builderStuff.querySelector('.editbox');
+          modalEditBox.style.display = '';
+          const modalEditSection = this.builderStuff.querySelector('.editsection');
+          modalEditSection.style.display = '';
+
+          if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
+            this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
+
+            const prevBox = this.doc.querySelectorAll('.box-select');
+            prevBox.forEach(elm => {
+              elm.classList.remove('box-select');
+            });
+            const prevSection = this.doc.querySelectorAll('.section-select');
+            prevSection.forEach(elm => {
+              elm.classList.remove('section-select');
+            });
+          }
+        }
+      } //--- 
+
+
       let a = false,
           b = false,
           c = false,
@@ -98746,8 +99354,6 @@ class ContentBox {
       }
 
       if (!(a || b || f || g || h || i || j)) {
-        const boxHover = this.doc.querySelector('.box-hover');
-        if (boxHover) dom.removeClass(boxHover, 'box-hover');
         const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
         boxTools.forEach(tool => {
           tool.style.display = 'none';
@@ -98794,8 +99400,6 @@ class ContentBox {
         }
 
         if (!(a || b || f || g || h || i || j)) {
-          const boxHover = this.doc.querySelector('.box-hover');
-          if (boxHover) dom.removeClass(boxHover, 'box-hover');
           const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
           boxTools.forEach(tool => {
             tool.style.display = 'none';
@@ -98962,6 +99566,8 @@ class ContentBox {
   }
 
   sectionSetup(section) {
+    let tool = section.querySelector('.is-section-tool');
+    if (tool) tool.parentNode.removeChild(tool);
     dom.appendHtml(section, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>'); // this.editor.setTooltip(section);
     // Prepare for tooltip
 
@@ -98977,6 +99583,7 @@ class ContentBox {
     });
     const btnSectionEdit = section.querySelector('.is-section-edit');
     btnSectionEdit.addEventListener('click', () => {
+      this.editbox.close();
       this.editsection.edit();
     });
     const btnSectionRemove = section.querySelector('.is-section-remove');
@@ -98984,8 +99591,7 @@ class ContentBox {
       const modal = document.querySelector('.is-modal.delsectionconfirm');
       this.editor.util.showModal(modal);
     });
-  } // sectionSetup
-
+  }
 
   boxSetup(box) {
     let tool = box.querySelector('.is-box-tool');
@@ -99008,6 +99614,7 @@ class ContentBox {
 
     const btnBoxEdit = box.querySelector('.is-box-edit');
     if (btnBoxEdit) btnBoxEdit.addEventListener('click', () => {
+      this.editsection.close();
       this.editbox.edit();
     });
     const btnModuleEdit = box.querySelector('.is-module-edit');
@@ -99076,26 +99683,10 @@ class ContentBox {
 
     box.addEventListener('mouseenter', () => {
       this.positionTool(box);
-      let activeSection;
-
-      if (dom.hasClass(box, 'is-section')) {
-        activeSection = box;
-      } else {
-        activeSection = dom.parentsHasClass(box, 'is-section');
-      }
+      if (this.wrapperEl.classList.contains('hard-select')) return; // New UX
 
       this.activeBox = box;
-      this.activeSection = activeSection;
-      const elms = this.doc.querySelectorAll('.box-hover');
-      elms.forEach(elm => {
-        dom.removeClass(elm, 'box-hover');
-      });
-      if (this.sectionHoverOutline) dom.addClass(this.activeBox, 'box-hover');
-
-      if (this.activeSection !== this.prevSection) {
-        this.prevSection = this.activeSection;
-        if (this.settings.onSectionChange) this.settings.onSectionChange();
-      }
+      this.activeSection = box.closest('.is-section');
     });
   } // boxSetup
 
@@ -99161,17 +99752,19 @@ class ContentBox {
   }
 
   doUndoRedo() {
+    /*
     // Clean
     const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
-            [data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
-            [data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
-            [data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
-            [data-50-top],[data-top],[data-top-bottom]`);
-    elms.forEach(elm => {
-      elm.style.transform = '';
-      elm.style.transition = '';
-      elm.style.opacity = '';
+        [data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
+        [data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
+        [data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
+        [data-50-top],[data-top],[data-top-bottom]`);
+    elms.forEach(elm=>{
+        elm.style.transform = '';
+        elm.style.transition = '';
+        elm.style.opacity = '';
     });
+    */
     this.pageSetup(); // To refresh skrollrr anim
 
     if (this.win.skrollrr) {
@@ -99180,30 +99773,33 @@ class ContentBox {
   }
 
   refreshPage() {
+    /*
     // Clean
     const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
-            [data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
-            [data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
-            [data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
-            [data-50-top],[data-top],[data-top-bottom]`);
-    elms.forEach(elm => {
-      elm.style.transform = '';
-      elm.style.transition = '';
-      elm.style.opacity = '';
-    }); //--- Same as undo/redo process ---
-
+        [data--100-bottom],[data--150-bottom],[data--200-bottom],[data--300-bottom],[data--400-bottom],
+        [data-bottom-top],[data-400-bottom],[data-300-bottom],[data-200-bottom],[data-150-bottom],
+        [data-100-bottom],[data-50-bottom],[data-bottom],[data-center-bottom],[data-100-top],
+        [data-50-top],[data-top],[data-top-bottom]`);
+    elms.forEach(elm=>{
+        elm.style.transform = '';
+        elm.style.transition = '';
+        elm.style.opacity = '';
+    });
+     //--- Same as undo/redo process ---
     const wrapper = this.wrapperEl;
     const sections = wrapper.querySelectorAll('.is-section');
-    sections.forEach(section => {
-      const html = section.innerHTML;
-      var range = document.createRange();
-      section.innerHTML = '';
-      section.appendChild(range.createContextualFragment(html));
+    sections.forEach((section)=>{
+        const html = section.innerHTML;
+        var range = document.createRange();
+        section.innerHTML = '';
+        section.appendChild(range.createContextualFragment(html));
     });
+    
     this.editor.uo.cleaning(wrapper);
-    this.pageSetup(); //---
+    this.pageSetup();
+    //---
+    */
     // To refresh skrollrr anim
-
     if (this.win.skrollrr) {
       this.win.skrollrr.refresh();
     }
@@ -99996,8 +100592,10 @@ class ContentBox {
     this.builderStuff.innerHTML = '';
     dom.removeClass(document.body, 'sidebar-active'); // Remove special css
 
-    const cblightboxStyle = document.querySelector('#_contentbox_lightbox');
-    if (cblightboxStyle) cblightboxStyle.parentNode.removeChild(cblightboxStyle); // Render html content
+    const cbContentStyle = this.doc.querySelector('#_contentbox_css');
+    if (cbContentStyle) cbContentStyle.parentNode.removeChild(cbContentStyle);
+    const cbStuffStyle = document.querySelector('#_contentboxstuff_css');
+    if (cbStuffStyle) cbStuffStyle.parentNode.removeChild(cbStuffStyle); // Render html content
 
     let range = document.createRange();
     const wrapper = this.wrapperEl;