@innovastudio/contentbox 1.6.47 → 1.6.49

package/public/contentbox/contentbox.esm.js

@@ -1159,8 +1159,7 @@ class SideBar {
           this.closeSidebar(); // Close all modeless dialogs
 
           if (this.builder.editbox) this.builder.editbox.close();
-          if (this.builder.editsection) this.builder.editsection.close();
-          this.builder.animateScroll.close(); // Close anim side panel
+          if (this.builder.editsection) this.builder.editsection.close(); // this.builder.animateScroll.close(); // Close anim side panel
 
           if (toggle) return;
           let panelId = btn.getAttribute('data-content');
@@ -13095,18 +13094,20 @@ class PanelBox {
             </div>
 
             <div class="div-boxcanvas">
-                <div class="breakpoint-list"></div>
 
                 <div class="adjustboxheight">
                     <div class="label mt-3">${out('Height')}:</div>
-                    <div class="group">
+                    <div class="group" style="margin-top:5px">
+                        <button title="${out('Fixed')}" data-boxheight="set" style="width:75px">${out('Fixed')}</button>
                         <button title="${out('Decrease')}" data-boxheight="-"><svg><use xlink:href="#icon-minus"></use></svg></button>
                         <button title="${out('Increase')}" data-boxheight="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
                         <button title="${out('Clear')}" data-boxheight=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
                 </div>
 
-                <label class="label checkbox mt-3">
+                <div class="breakpoint-list"></div>
+
+                <label class="label checkbox mt-4" style="margin-bottom:15px">
                     <input type="checkbox" class="chk-auto-layout" />
                     <span>${out('Auto Layout on Mobile')}</span>
                 </label>
@@ -13539,6 +13540,8 @@ class PanelBox {
           newHeight = currentHeight + 50;
         } else if (s === '-') {
           newHeight = currentHeight - 50;
+        } else if (s === 'set') {
+          newHeight = currentHeight;
         } else {
           newHeight = '';
         }
@@ -13556,7 +13559,14 @@ class PanelBox {
             box.removeAttribute('data--h-' + breakpoint);
           } else {
             box.removeAttribute('data--h', newHeight);
-          }
+          } // const attributes = box.attributes;
+          // for (let i = 0; i < attributes.length; i++) {
+          //     const attributeName = attributes[i].name;
+          //     if (attributeName.includes('data--h-')) {
+          //         box.removeAttribute(attributeName);
+          //     }
+          // }
+
 
           box.style.height = '';
         }
@@ -13920,6 +13930,9 @@ class PanelBox {
       if (attributeName.includes('data--h-')) {
         let val = attributeName.replace('data--h-', '');
         if (!breakpoints.includes(val)) breakpoints.push(val);
+      } else if (attributeName === 'data--h') {
+        let val = 'default';
+        if (!breakpoints.includes(val)) breakpoints.push(val);
       }
     }
 
@@ -13933,7 +13946,7 @@ class PanelBox {
     for (let i = 0; i < attributes.length; i++) {
       const attributeName = attributes[i].name;
 
-      if (attributeName.includes('data--h-')) {
+      if (attributeName.includes('data--h')) {
         attributesToRemove.push(attributeName);
       }
     }
@@ -13952,19 +13965,22 @@ class PanelBox {
     if (!activeBox) return;
     const breakpoints = this.getBreakpoints(activeBox);
     breakpoints.forEach(item => {
-      s += `<button data-breakpoint="${item}" style="width:60px">${item}px</button>`;
+      if (item === 'default') {
+        s += `<button data-breakpoint="1920" style="width:60px">${out('default')}</button>`;
+      } else {
+        s += `<button data-breakpoint="${item}" style="width:60px">${item}px</button>`;
+      }
     });
 
     if (s !== '') {
       this.breakpointList.innerHTML = `
 
-            <div class="label">${out('Breakpoints')}:</div>
+            <!--<div class="label mt-1">${out('Breakpoints')}:</div>-->
 
             <div class="flex">
                 <div class="mr-2">
                     <div class="group breakpoint-buttons" style="width:auto;display:inline-flex;max-width:135px">
                         ${s}
-                        <button data-breakpoint="1920" style="width:60px">${out('default')}</button>
                     </div>
                 </div>
                 <div>
@@ -14662,6 +14678,11 @@ class PanelBlock {
                 </div>
             </div>
 
+            <div class="group moreoptions mt-2">
+                <button title="${out('Shadow')}" class="btn-shadow" style="width:103px">${out('Shadow')}</button>
+                <button title="${out('More')}" class="btn-moreoptions" style="width:103px">${out('More')}</button>
+            </div>
+
             <div class="breakpoint-list"></div>
 
             <div class="group flex mt-4 div-ungroup" style="width: 217px">
@@ -14691,6 +14712,9 @@ class PanelBlock {
             <div class="group info-breakpoint" style="margin-top:17px;padding:10px 15px 3px;display:none"><div></div></div>
             -->
 
+            <div class="group resetrotation mt-2"">
+                <button title="${out('Reset Rotation')}" class="btn-resetrotation">${out('Reset Rotation')}</button>
+            </div>
         </div>
 
 
@@ -14707,6 +14731,14 @@ class PanelBlock {
                         <span>${out('Remove Content')}</span>
                     </button>
                 </div>
+                
+                <div class="label mt-3">${out('Placement')}:</div>
+                <div class="group mt-2">
+                    <button title="${out('Top')}" data-align="items-start"><svg><use xlink:href="#icon-align-box-top"></use></svg></button>
+                    <button title="${out('Middle')}" data-align="items-center"><svg><use xlink:href="#icon-align-box-middle"></use></svg></button>
+                    <button title="${out('Bottom')}" data-align="items-end"><svg><use xlink:href="#icon-align-box-bottom"></use></svg></button>
+                    <button title="${out('Clear')}" data-align=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
 
                 <div class="group editspacing mt-4"">
                     <button title="${out('Spacing')}" class="btn-spacing">${out('Spacing')}</button>
@@ -15119,6 +15151,10 @@ class PanelBlock {
     btnSpacing.addEventListener('click', () => {
       this.builder.controlpanel.objDialogSpacingContainer.open();
     });
+    const btnMore = panel.querySelector('.btn-moreoptions');
+    btnMore.addEventListener('click', () => {
+      this.builder.controlpanel.objDialogBlockOptions.open();
+    });
     const btnUngroup = panel.querySelector('.btn-ungroup');
     btnUngroup.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
@@ -15140,6 +15176,18 @@ class PanelBlock {
       this.builder.eb.removeShape();
       this.builder.onChange();
     });
+    const btnResetRotation = panel.querySelector('.btn-resetrotation');
+    btnResetRotation.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      this.builder.doc.querySelectorAll('.is-block.active').forEach(block => {
+        block.style.transform = '';
+      });
+      this.builder.onChange();
+    });
+    const btnShadow = panel.querySelector('.btn-shadow');
+    btnShadow.addEventListener('click', () => {
+      this.builder.controlpanel.objDialogShadow.open();
+    });
     /*
     const btnAddBreakpoint = panel.querySelector('.btn-addbreakpoint');
     btnAddBreakpoint.addEventListener('click', ()=>{
@@ -15317,6 +15365,31 @@ class PanelBlock {
       }
 
       this.builder.onChange();
+    }); // Flex
+
+    const btnJustify = panel.querySelectorAll('[data-align]');
+    btnJustify.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const val = btn.getAttribute('data-align');
+        const elms = this.builder.doc.querySelectorAll('.is-block.active');
+        elms.forEach(target => {
+          target.classList.remove('flex');
+          target.classList.remove('items-start');
+          target.classList.remove('items-center');
+          target.classList.remove('items-end');
+        });
+
+        if (val !== '') {
+          elms.forEach(target => {
+            target.classList.add('flex');
+            target.classList.add(val);
+          });
+        }
+
+        this.getState();
+        this.builder.onChange();
+      });
     });
   }
 
@@ -15503,8 +15576,17 @@ class PanelBlock {
 
   blockOverlay() {
     let block = this.builder.controlpanel.activeBlock;
-    if (!block) return false;
-    let blockOverlay = block.querySelector('.is-block-overlay');
+    if (!block) return false; // let blockOverlay = block.querySelector('.is-block-overlay');
+
+    let children = block.children;
+    let blockOverlay = null;
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].classList.contains('is-block-overlay')) {
+        blockOverlay = children[i];
+        break;
+      }
+    }
 
     if (!blockOverlay) {
       block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
@@ -15536,6 +15618,14 @@ class PanelBlock {
       btnRemoveShape.style.display = 'none';
     }
 
+    const divResetRotation = panel.querySelector('div.resetrotation');
+
+    if (block.style.transform.includes('rotate')) {
+      divResetRotation.style.display = '';
+    } else {
+      divResetRotation.style.display = 'none';
+    }
+
     if (block) {
       if (block.closest('.autolayout')) {
         this.divArrange.style.display = 'none';
@@ -15638,7 +15728,19 @@ class PanelBlock {
       this.divMove.style.display = 'none';
     }
 
-    this.showBlockPos();
+    this.showBlockPos(); // flex
+
+    if (block) {
+      this.panel.querySelectorAll('[data-align]').forEach(elm => elm.classList.remove('on'));
+
+      if (block.classList.contains('items-start')) {
+        this.panel.querySelector('[data-align=items-start]').classList.add('on');
+      } else if (block.classList.contains('items-center')) {
+        this.panel.querySelector('[data-align=items-center]').classList.add('on');
+      } else if (block.classList.contains('items-end')) {
+        this.panel.querySelector('[data-align=items-end]').classList.add('on');
+      }
+    }
   }
 
   showBlockPos() {
@@ -17454,13 +17556,25 @@ class PanelColumn {
         activeColumn.classList.add('xs-hidden');
       } else if (target === 'sm') {
         activeColumn.classList.add('sm-hidden');
-        activeColumn.parentNode.classList.add('sm-autofit');
+        activeColumn.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
+
+        activeColumn.classList.add('xs-hidden');
       } else if (target === 'md') {
         activeColumn.classList.add('md-hidden');
-        activeColumn.parentNode.classList.add('md-autofit');
+        activeColumn.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
+
+        activeColumn.classList.add('sm-hidden');
+        activeColumn.parentNode.classList.add('sm-autofit');
+        activeColumn.classList.add('xs-hidden');
       } else if (target === '') {
         activeColumn.classList.add('desktop-hidden');
-        activeColumn.parentNode.classList.add('desktop-autofit');
+        activeColumn.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
+
+        activeColumn.classList.add('md-hidden');
+        activeColumn.parentNode.classList.add('md-autofit');
+        activeColumn.classList.add('sm-hidden');
+        activeColumn.parentNode.classList.add('sm-autofit');
+        activeColumn.classList.add('xs-hidden');
       }
     }
 
@@ -17804,6 +17918,23 @@ class PanelRow {
         let screenMode = this.builder.screenMode;
         if (screenMode === 'desktop') prefix = 'desktop-items-';else if (screenMode === 'tablet-landscape') prefix = 'md-items-';else if (screenMode === 'tablet') prefix = 'sm-items-';else if (screenMode === 'mobile') prefix = 'xs-items-';
 
+        if (this.builder.doc.body.hasAttribute('data-breakpoint')) {
+          const breakpoint = this.builder.doc.body.getAttribute('data-breakpoint');
+
+          if (breakpoint <= 760) {
+            prefix = 'xs-items-';
+          } else if (760 < breakpoint && breakpoint <= 970) {
+            prefix = 'sm-items-';
+          } else if (970 < breakpoint && breakpoint <= 1280) {
+            prefix = 'md-items-';
+          } else if (1280 < breakpoint && breakpoint <= 1920) {
+            prefix = 'desktop-items-';
+          } else {
+            // 1920<breakpoint
+            prefix = 'desktop-items-';
+          }
+        }
+
         for (let j = 1; j <= 6; j++) {
           activeRow.classList.remove(prefix + j);
         }
@@ -18067,13 +18198,25 @@ class PanelRow {
         activeRow.classList.add('xs-hidden');
       } else if (target === 'sm') {
         activeRow.classList.add('sm-hidden');
-        activeRow.parentNode.classList.add('sm-autofit');
+        activeRow.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
+
+        activeRow.classList.add('xs-hidden');
       } else if (target === 'md') {
         activeRow.classList.add('md-hidden');
-        activeRow.parentNode.classList.add('md-autofit');
+        activeRow.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
+
+        activeRow.classList.add('sm-hidden');
+        activeRow.parentNode.classList.add('sm-autofit');
+        activeRow.classList.add('xs-hidden');
       } else if (target === '') {
         activeRow.classList.add('desktop-hidden');
-        activeRow.parentNode.classList.add('desktop-autofit');
+        activeRow.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
+
+        activeRow.classList.add('md-hidden');
+        activeRow.parentNode.classList.add('md-autofit');
+        activeRow.classList.add('sm-hidden');
+        activeRow.parentNode.classList.add('sm-autofit');
+        activeRow.classList.add('xs-hidden');
       }
     }
 
@@ -22062,6 +22205,431 @@ class SpacingContainer {
 
 }
 
+class BlockOptions {
+  constructor(dialog, builder) {
+    this.builder = builder;
+    this.dialog = dialog;
+    let html = `
+            <button class="btn-back" tabindex="-1" title="${out('Close')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>
+  
+            <div class="submain">
+                <div class="label" style="font-size:18px">${out('More Options')}</div>
+                <label class="std">
+                    <span class="label mt-3">${out('Border Radius')}:</span>
+                    <div class="mt-2">
+                        <input type="range" min="0" max="500" value="0" class="inp-block-borderradius is-rangeslider" style="width:180px">
+                    </div>
+                    <div class="mt-3" style="align-items:center;">
+                        <input type="text" class="inp-borderradius" style="width:80px">&nbsp;
+                        <span>px</span>
+                    </div>
+                </label>
+
+                <!--<div class="group mt-5">
+                    <button title="${out('Shadow')}" class="btn-shadow" style="width:221px">${out('Shadow')}</button>
+                </div>-->
+            </div>
+
+            <button class="accordion-item" aria-expanded="false" aria-controls="blockmore1">
+                ${out('Border')}
+                <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
+            </button>
+            <div class="accordion-content" id="blockmore1" aria-hidden="true">
+            
+                <div class="subpanel">
+
+                    <div class="label subtitle mt-2">${out('Border')}:</div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Width')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-bordercolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="label subtitle">${out('Individual Sides')}:</div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Top')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-bordertopwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-bordertopstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-bordertopcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Bottom')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderbottomwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderbottomstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-borderbottomcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Left')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderleftwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderleftstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-borderleftcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Right')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderrightwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderrightstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-borderrightcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="panel-pop unit-1" tabIndex="-1" aria-hidden="true">
+                <button title="px">px</button>
+                <button title="vw">vw</button>
+                <button title="vw">vh</button>
+                <button title="em">em</button>
+                <button title="rem">rem</button>
+            </div>
+        `;
+    dialog.insertAdjacentHTML('beforeend', html);
+    this.unit = dialog.querySelector('.panel-pop.unit-1');
+    const btnBack = dialog.querySelector('.btn-back');
+    btnBack.addEventListener('click', () => {
+      this.close();
+    }); // Units
+
+    dialog.querySelectorAll('.btn-unit').forEach(btn => btn.addEventListener('click', e => {
+      this.builder.controlpanel.showPop(this.unit, () => {// btn.focus();
+      }, btn);
+      this.unitButton = btn;
+      e.preventDefault();
+    })); // Apply Style
+
+    let timer;
+    const divBorder = dialog.querySelector('#blockmore1');
+    divBorder.querySelectorAll('input').forEach(inp => {
+      inp.addEventListener('input', () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          this.applyStyle(inp);
+        }, 600);
+      });
+    });
+    divBorder.querySelectorAll('select').forEach(inp => inp.addEventListener('change', () => {
+      this.applyStyle(inp);
+    }));
+    this.unit.querySelectorAll('button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.unitButton.innerText = btn.innerText;
+        this.builder.controlpanel.hidePop(this.unit);
+        const inp = this.unitButton.parentNode.parentNode.querySelector('input');
+        this.applyStyle(inp);
+      });
+    }); // Colors
+
+    const renderColorPicker = (property, selector) => {
+      const btnPicker = dialog.querySelector(selector);
+      btnPicker.addEventListener('click', () => {
+        this.builder.editor.saveForUndo(true); // checkLater = true
+
+        let block = this.blockOverlay();
+        let bgcolor = btnPicker.style.backgroundColor;
+        const colorpicker = this.builder.editor.colorpicker();
+        colorpicker.open(s => {
+          block.style[property] = s;
+          btnPicker.style.backgroundColor = s; // preview
+
+          this.builder.onChange();
+        }, bgcolor);
+      });
+    };
+
+    renderColorPicker('border-color', '.btn-bordercolor');
+    renderColorPicker('border-top-color', '.btn-bordertopcolor');
+    renderColorPicker('border-bottom-color', '.btn-borderbottomcolor');
+    renderColorPicker('border-left-color', '.btn-borderleftcolor');
+    renderColorPicker('border-right-color', '.btn-borderrightcolor'); // Border Radius
+
+    const inpBorderRadius = dialog.querySelector('.inp-borderradius');
+    const inpBlockBorderRadius = dialog.querySelector('.inp-block-borderradius');
+    this.inpBorderRadius = inpBorderRadius;
+    this.inpBlockBorderRadius = inpBlockBorderRadius;
+
+    inpBlockBorderRadius.onfocus = () => {
+      this.builder.editor.saveForUndo(true);
+    };
+
+    inpBlockBorderRadius.oninput = () => {
+      // val: 0 - 500
+      let val = inpBlockBorderRadius.value;
+      inpBorderRadius.value = val;
+      const blockOverlay = this.blockOverlay();
+      blockOverlay.style.borderRadius = val + 'px';
+    };
+
+    inpBlockBorderRadius.onchange = () => {
+      this.builder.onChange();
+    }; // const btnShadow = dialog.querySelector('.btn-shadow');
+    // btnShadow.addEventListener('click',()=>{ 
+    //     this.builder.controlpanel.objDialogShadow.open();
+    // });
+
+  }
+
+  applyStyle(inp) {
+    this.builder.editor.saveForUndo();
+    let cls = inp.classList;
+    if (cls.contains('inp-borderwidth')) this.setStyle('border-width', '.inp-borderwidth');
+    if (cls.contains('inp-bordertopwidth')) this.setStyle('border-top-width', '.inp-bordertopwidth');
+    if (cls.contains('inp-borderbottomwidth')) this.setStyle('border-bottom-width', '.inp-borderbottomwidth');
+    if (cls.contains('inp-borderleftwidth')) this.setStyle('border-left-width', '.inp-borderleftwidth');
+    if (cls.contains('inp-borderrightwidth')) this.setStyle('border-right-width', '.inp-borderrightwidth');
+    if (cls.contains('inp-borderstyle')) this.setStyleSelect('border-style', '.inp-borderstyle');
+    if (cls.contains('inp-bordertopstyle')) this.setStyleSelect('border-top-style', '.inp-bordertopstyle');
+    if (cls.contains('inp-borderbottomstyle')) this.setStyleSelect('border-bottom-style', '.inp-borderbottomstyle');
+    if (cls.contains('inp-borderleftstyle')) this.setStyleSelect('border-left-style', '.inp-borderleftstyle');
+    if (cls.contains('inp-borderrightstyle')) this.setStyleSelect('border-right-style', '.inp-borderrightstyle'); // if(cls.contains('inp-shadowxoffset') ||
+    //     cls.contains('inp-shadowyoffset') ||
+    //     cls.contains('inp-shadowblur') ||
+    //     cls.contains('inp-shadowspread') ||
+    //     cls.contains('inp-shadowtype')) {
+    //     this.setBoxShadow();
+    // }
+
+    this.builder.onChange();
+
+    if (cls.contains('inp-borderwidth') || cls.contains('inp-bordertopwidth') || cls.contains('inp-borderbottomwidth') || cls.contains('inp-borderleftwidth') || cls.contains('inp-borderrightwidth') || cls.contains('inp-borderradius')) {
+      this.refresh();
+    }
+  }
+
+  refresh() {
+    this.getStyle('border-width', '.inp-borderwidth');
+    this.getStyle('border-top-width', '.inp-bordertopwidth');
+    this.getStyle('border-bottom-width', '.inp-borderbottomwidth');
+    this.getStyle('border-left-width', '.inp-borderleftwidth');
+    this.getStyle('border-right-width', '.inp-borderrightwidth');
+    this.getStyleSelect('border-style', '.inp-borderstyle');
+    this.getStyleSelect('border-top-style', '.inp-bordertopstyle');
+    this.getStyleSelect('border-bottom-style', '.inp-borderbottomstyle');
+    this.getStyleSelect('border-left-style', '.inp-borderleftstyle');
+    this.getStyleSelect('border-right-style', '.inp-borderrightstyle'); // this.getBoxShadow();
+
+    const block = this.blockOverlay();
+    const dialog = this.dialog; // Border Color
+
+    const btnBorderColor = dialog.querySelector('.btn-bordercolor');
+    let bordercolor = block.style.borderColor;
+    if (bordercolor) btnBorderColor.style.backgroundColor = bordercolor;else btnBorderColor.style.backgroundColor = ''; // Border Top Color
+
+    const btnBorderTopColor = dialog.querySelector('.btn-bordertopcolor');
+    let bordertopcolor = block.style.borderTopColor;
+    if (bordertopcolor) btnBorderTopColor.style.backgroundColor = bordertopcolor;else btnBorderTopColor.style.backgroundColor = ''; // Border Bottom Color
+
+    const btnBorderBottomColor = dialog.querySelector('.btn-borderbottomcolor');
+    let borderbottomcolor = block.style.borderBottomColor;
+    if (borderbottomcolor) btnBorderBottomColor.style.backgroundColor = borderbottomcolor;else btnBorderBottomColor.style.backgroundColor = ''; // Border Left Color
+
+    const btnBorderLeftColor = dialog.querySelector('.btn-borderleftcolor');
+    let borderleftcolor = block.style.borderLeftColor;
+    if (borderleftcolor) btnBorderLeftColor.style.backgroundColor = borderleftcolor;else btnBorderLeftColor.style.backgroundColor = ''; // Border Right Color
+
+    const btnBorderRightColor = dialog.querySelector('.btn-borderrightcolor');
+    let borderrightcolor = block.style.borderRightColor;
+    if (borderrightcolor) btnBorderRightColor.style.backgroundColor = borderrightcolor;else btnBorderRightColor.style.backgroundColor = '';
+  }
+
+  getState() {
+    this.inpBorderRadius.value = '0';
+    this.inpBlockBorderRadius.value = '0';
+    const blockOverlay = this.blockOverlay();
+
+    if (blockOverlay.style.borderRadius) {
+      let val = parseInt(blockOverlay.style.borderRadius);
+      this.inpBorderRadius.value = val;
+      this.inpBlockBorderRadius.value = val;
+    }
+
+    this.refresh();
+  }
+
+  open() {
+    this.dialog.style.display = 'flex';
+    this.getState();
+  }
+
+  close() {
+    this.dialog.style.display = '';
+  }
+
+  blockOverlay() {
+    let block = this.builder.controlpanel.activeBlock;
+    if (!block) return false; // let blockOverlay = block.querySelector('.is-block-overlay');
+
+    let children = block.children;
+    let blockOverlay = null;
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].classList.contains('is-block-overlay')) {
+        blockOverlay = children[i];
+        break;
+      }
+    }
+
+    if (!blockOverlay) {
+      block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
+      blockOverlay = block.querySelector('.is-block-overlay');
+    }
+
+    return blockOverlay;
+  }
+
+  getStyle(property, selector) {
+    let block = this.blockOverlay();
+    const current = this.parseStyle(block, property);
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    const btn = inp.parentNode.querySelector('.btn-unit');
+    inp.value = current.value;
+    btn.innerText = current.unit ? current.unit : '-';
+  }
+
+  setStyle(property, selector) {
+    let block = this.blockOverlay();
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    const btn = inp.parentNode.querySelector('.btn-unit');
+    const value = inp.value;
+    let unit = btn.innerText;
+    if (unit === '-') unit = '';
+    block.style[property] = value ? `${value + unit}` : '';
+  }
+
+  setStyleSelect(property, selector) {
+    let block = this.blockOverlay();
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    const value = inp.value;
+    block.style[property] = value;
+  }
+
+  getStyleSelect(property, selector) {
+    let block = this.blockOverlay();
+    let value = block.style[property];
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    inp.value = value;
+  }
+
+  parseStyle(element, property) {
+    const styleValue = element.style[property];
+    const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
+
+    if (match) {
+      const numericValue = match[1];
+      const unit = match[2];
+      return {
+        value: numericValue,
+        unit
+      };
+    } else {
+      return {
+        value: '',
+        unit: 'px'
+      };
+    }
+  }
+
+}
+
 class Element$2 {
   constructor(dialog, builder) {
     this.builder = builder;
@@ -23387,38 +23955,45 @@ class Element$2 {
   }
 
   parseStyle(element, property) {
-    const styleValue = element.style[property];
-    const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
-
-    if (property === 'line-height') {
-      // line-height can have no unit, ex: 1, 1.4, etc
-      if (match) {
-        const numericValue = match[1];
-        const unit = match[2];
-        return {
-          value: numericValue,
-          unit
-        };
-      } else {
-        return {
-          value: styleValue,
-          unit: ''
-        };
-      }
-    } else {
-      if (match) {
-        const numericValue = match[1];
-        const unit = match[2];
-        return {
-          value: numericValue,
-          unit
-        };
+    try {
+      const styleValue = element.style[property];
+      const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
+
+      if (property === 'line-height') {
+        // line-height can have no unit, ex: 1, 1.4, etc
+        if (match) {
+          const numericValue = match[1];
+          const unit = match[2];
+          return {
+            value: numericValue,
+            unit
+          };
+        } else {
+          return {
+            value: styleValue,
+            unit: ''
+          };
+        }
       } else {
-        return {
-          value: '',
-          unit: 'px'
-        };
+        if (match) {
+          const numericValue = match[1];
+          const unit = match[2];
+          return {
+            value: numericValue,
+            unit
+          };
+        } else {
+          return {
+            value: '',
+            unit: 'px'
+          };
+        }
       }
+    } catch (e) {
+      return {
+        value: '',
+        unit: 'px'
+      };
     }
   }
 
@@ -23617,13 +24192,25 @@ class Element$2 {
         elm.classList.add('xs-hidden');
       } else if (target === 'sm') {
         elm.classList.add('sm-hidden');
-        elm.parentNode.classList.add('sm-autofit');
+        elm.parentNode.classList.add('sm-autofit'); // hide all others smaller than tablet portrait
+
+        elm.classList.add('xs-hidden');
       } else if (target === 'md') {
         elm.classList.add('md-hidden');
-        elm.parentNode.classList.add('md-autofit');
+        elm.parentNode.classList.add('md-autofit'); // hide all others smaller than tablet landscape
+
+        elm.classList.add('sm-hidden');
+        elm.parentNode.classList.add('sm-autofit');
+        elm.classList.add('xs-hidden');
       } else if (target === '') {
         elm.classList.add('desktop-hidden');
-        elm.parentNode.classList.add('desktop-autofit');
+        elm.parentNode.classList.add('desktop-autofit'); // hide all others smaller than desktop
+
+        elm.classList.add('md-hidden');
+        elm.parentNode.classList.add('md-autofit');
+        elm.classList.add('sm-hidden');
+        elm.parentNode.classList.add('sm-autofit');
+        elm.classList.add('xs-hidden');
       }
     }
 
@@ -23680,6 +24267,14 @@ class Shadow {
   constructor(dialog, builder) {
     this.builder = builder;
     this.dialog = dialog;
+    let shadowTemplates = this.builder.shadowTemplates;
+    let shadowHtml = '';
+
+    for (let i = 1; i <= shadowTemplates.length; i++) {
+      let item = shadowTemplates[i - 1];
+      shadowHtml += `<button data-shadow="${item}" title="${out('Apply Shadow')}" type="button" style="box-shadow: ${item}">${i}</button>`;
+    }
+
     let html = `
             <button class="btn-back" tabindex="-1" title="${out('Close')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>
   
@@ -23688,27 +24283,25 @@ class Shadow {
                 <div class="label" style="font-size:18px">${out('Shadow')}</div>
 
                 <div class="div-shadow-list">
-
-                    <button data-shadow="rgba(0, 0, 0, 0.3) 0px 1px 3px 0px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px">1</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.15) 0px 1px 5px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 5px">2</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.16) 0px 3px 6px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px">3</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.22) 0px 10px 10px -5px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px -5px">4</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.19) 0px 10px 20px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px">5</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.21) 0px 5px 6px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.21) 0px 5px 6px">6</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.25) 0px 14px 28px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px">7</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.19) 0px 6px 20px 0px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.19) 0px 6px 20px 0px">8</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.08) 4px 17px 20px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.08) 4px 17px 20px">9</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.12) 0px 11px 35px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.12) 0px 11px 35px">10</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.06) 17px 17px 0px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.06) 17px 17px 0px">11</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.1) 0px 0px 40px inset" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px inset">12</button>
-                    <button data-shadow="rgba(22, 22, 22, 0.2) 2em 2em 5em" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(22, 22, 22, 0.2) 2em 2em 5em">13</button>
-                    <button data-shadow="rgb(0 0 0 / 24%) 30px 30px 45px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgb(0 0 0 / 24%) 30px 30px 45px">14</button>
-
+                    ${shadowHtml}
                 </div>
 
                 <div class="group mt-4">
                     <button title="${out('Clear')}" class="btn-clean-shadow"><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
+
+                <span class="label mt-3">${out('X')}:</span>
+                <div class="mt-2">
+                    <input type="range" min="-100" max="100" value="0" class="inp-shadow-x is-rangeslider" style="width:180px">
+                </div>
+
+                <span class="label mt-3">${out('Y')}:</span>
+                <div class="mt-2">
+                    <input type="range" min="-100" max="100" value="0" class="inp-shadow-y is-rangeslider" style="width:180px">
+                </div>
+
+                <span class="label mt-3">${out('Color')}:</span>
+                <button title="${out('Color')}" class="btn-color is-btn-color"></button>
             </div>
         `;
     dialog.insertAdjacentHTML('beforeend', html);
@@ -23721,28 +24314,179 @@ class Shadow {
     btnShadow.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        const elm = this.builder.controlpanel.objDialogElement.inspectedElement;
-        elm.style.boxShadow = btn.getAttribute('data-shadow');
-        this.builder.controlpanel.objDialogElement.refresh();
+        let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+
+        if (elm) {
+          elm.style.boxShadow = btn.getAttribute('data-shadow');
+          this.builder.controlpanel.objDialogElement.refresh();
+          this.getState();
+        } else {
+          elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+          if (elm) elm.style.boxShadow = btn.getAttribute('data-shadow');
+          this.getState();
+        }
+
         this.builder.onChange();
       });
     });
     const btnCleanShadow = dialog.querySelector('.btn-clean-shadow');
     btnCleanShadow.addEventListener('click', () => {
-      const elm = this.builder.controlpanel.objDialogElement.inspectedElement;
-      elm.style.boxShadow = '';
-      this.builder.controlpanel.objDialogElement.refresh();
+      this.builder.editor.saveForUndo();
+      let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+
+      if (elm) {
+        elm.style.boxShadow = '';
+        this.builder.controlpanel.objDialogElement.refresh();
+      } else {
+        elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+        if (elm) elm.style.boxShadow = '';
+        this.getState();
+      }
+
+      this.builder.onChange();
+    }); // Adjustments
+
+    const inpAdjustX = dialog.querySelector('.inp-shadow-x');
+    this.inpAdjustX = inpAdjustX;
+
+    inpAdjustX.onfocus = () => {
+      this.builder.editor.saveForUndo(true);
+    };
+
+    inpAdjustX.oninput = () => {
+      // val: 0 - 500
+      let val = inpAdjustX.value;
+      this.adjustX(val);
+    };
+
+    inpAdjustX.onchange = () => {
+      this.builder.onChange();
+    };
+
+    const inpAdjustY = dialog.querySelector('.inp-shadow-y');
+    this.inpAdjustY = inpAdjustY;
+
+    inpAdjustY.onfocus = () => {
+      this.builder.editor.saveForUndo(true);
+    };
+
+    inpAdjustY.oninput = () => {
+      // val: 0 - 500
+      let val = inpAdjustY.value;
+      this.adjustY(val);
+    };
+
+    inpAdjustY.onchange = () => {
+      this.builder.onChange();
+    };
+
+    const btnPicker = dialog.querySelector('.btn-color');
+    this.btnPicker = btnPicker;
+    btnPicker.addEventListener('click', () => {
+      this.builder.editor.saveForUndo(true); // checkLater = true
+
+      let bgcolor = btnPicker.style.backgroundColor;
+      const colorpicker = this.builder.editor.colorpicker();
+      colorpicker.open(s => {
+        this.adjustColor(s);
+        btnPicker.style.backgroundColor = s; // preview
+
+        this.builder.onChange();
+      }, bgcolor);
     });
   }
 
+  getState() {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow.replaceAll(', ', ',');
+      let shadowParts = shadow.split(' ');
+      let currentX, currentY;
+      let color = shadowParts[0];
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('rem') !== -1) {
+          currentX = shadowParts[i];
+          break;
+        }
+      }
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('vw') !== -1) {
+          currentY = shadowParts[i + 1];
+          break;
+        }
+      }
+
+      this.inpAdjustX.value = parseInt(currentX);
+      this.inpAdjustY.value = parseInt(currentY);
+      this.btnPicker.style.backgroundColor = color;
+    }
+  }
+
   open() {
     this.dialog.style.display = 'flex';
+    this.getState();
   }
 
   close() {
     this.dialog.style.display = '';
   }
 
+  adjustX(val) {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow;
+      let shadowParts = shadow.split(' ');
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('rem') !== -1) {
+          shadowParts[i] = val + shadowParts[i].match(/[a-z]+/)[0]; // Updates the X value while keeping the unit intact
+
+          break; // Assuming only one value is for X offset
+        }
+      }
+
+      elm.style.boxShadow = shadowParts.join(' ');
+    }
+  }
+
+  adjustY(val) {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow;
+      let shadowParts = shadow.split(' ');
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('vw') !== -1) {
+          shadowParts[i + 1] = val + shadowParts[i + 1].match(/[a-z]+/)[0]; // Updates the Y value while keeping the unit intact
+
+          break; // Assuming only one value is for Y offset
+        }
+      }
+
+      elm.style.boxShadow = shadowParts.join(' ');
+    }
+  }
+
+  adjustColor(val) {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow.replaceAll(', ', ',');
+      let shadowParts = shadow.split(' ');
+      shadowParts[0] = val;
+      elm.style.boxShadow = shadowParts.join(' ');
+    }
+  }
+
 }
 
 class ImageAdjust {
@@ -24538,8 +25282,9 @@ class ControlPanel {
                 <div class="panel-dialog element"></div>
                 <div class="panel-dialog imageadjust"></div>
                 <div class="panel-dialog settings"></div>
-                <div class="panel-dialog shadow"></div>
                 <div class="panel-dialog group"></div>
+                <div class="panel-dialog blockoptions"></div>
+                <div class="panel-dialog shadow"></div>
 
                 <div class="panel-pop more" tabIndex="-1" aria-hidden="true">
                     <!--<button class="btn-preferences" title="${out('Preferences')}">${out('Preferences')}</button>-->
@@ -24594,6 +25339,7 @@ class ControlPanel {
     this.dialogImageAdjust = controlPanel.querySelector('.panel-dialog.imageadjust');
     this.dialogSettings = controlPanel.querySelector('.panel-dialog.settings');
     this.dialogGroup = controlPanel.querySelector('.panel-dialog.group');
+    this.dialogBlockOptions = controlPanel.querySelector('.panel-dialog.blockoptions');
     this.more = controlPanel.querySelector('.panel-pop.more');
     this.objDialogIcons = new Icons(this.dialogIcons, this.builder);
     this.objDialogSpacingColumn = new SpacingColumn(this.dialogSpacingColumn, this.builder);
@@ -24604,6 +25350,7 @@ class ControlPanel {
     this.objDialogImageAdjust = new ImageAdjust(this.dialogImageAdjust, this.builder);
     this.objDialogSettings = new Settings(this.dialogSettings, this.builder);
     this.objDialogGroup = new Group(this.dialogGroup, this.builder);
+    this.objDialogBlockOptions = new BlockOptions(this.dialogBlockOptions, this.builder);
     this.objPanelText = new PanelText(this.panelText, this.builder); // comment/disable if using ContentBuilder's controlpanel
 
     this.objPanelImage = new PanelImage(this.panelImage, this.builder);
@@ -24791,6 +25538,7 @@ class ControlPanel {
     this.objDialogShadow.close();
     this.objDialogImageAdjust.close();
     this.objDialogGroup.close();
+    this.objDialogBlockOptions.close();
   }
 
   closeContentDialogs() {
@@ -24801,6 +25549,7 @@ class ControlPanel {
     this.objDialogShadow.close();
     this.objDialogImageAdjust.close();
     this.objDialogGroup.close();
+    this.objDialogBlockOptions.close();
   }
 
   toggleDevice() {
@@ -24974,7 +25723,17 @@ class ControlPanel {
     if (!this.activeBox) this.objDialogSpacingContainer.close();
     if (!this.activeColumn) this.objDialogSpacingColumn.close();
     this.objDialogImageAdjust.close();
-    if (!this.activeBlock) this.objDialogGroup.close(); // Show/hide panel
+    if (!this.activeBlock) this.objDialogGroup.close();
+    if (!this.activeBlock) this.objDialogBlockOptions.close(); // Show/hide panel
+
+    if (e.target.classList.contains('is-block')) {
+      // test: select paragraph on normal section, then select block on canvas section
+      this.select('block'); // freeform
+
+      return;
+    } else {
+      this.objDialogBlockOptions.close();
+    }
 
     if (this.activeElement) this.select('element');
     if (!this.activeElement && this.activeBlock) this.select('block'); // freeform
@@ -25406,6 +26165,14 @@ class ControlPanel {
     if (this.dialogImageAdjust.style.display === 'flex') {
       this.objDialogImageAdjust.getState();
     }
+
+    if (this.dialogBlockOptions.style.display === 'flex') {
+      this.objDialogBlockOptions.getState();
+    }
+
+    if (this.dialogShadow.style.display === 'flex') {
+      this.objDialogShadow.getState();
+    }
   }
 
   showTooltip() {
@@ -73642,7 +74409,8 @@ class Hyperlink {
                 selection = selectionText;
                 const range = selection.getRangeAt(0);
                 const fragment = range.extractContents();
-                const link = document.createElement('a');
+                const link = this.builder.doc.createElement('a'); //
+
                 link.setAttribute('href', url);
                 link.setAttribute('title', title);
                 if (modal.querySelector('.input-newwindow').checked) {
@@ -73662,7 +74430,8 @@ class Hyperlink {
               } else if (selectionElm) {
                 selection = selectionElm;
                 selectionElm.innerHTML = `<a class="dummylink" href="dummy">${linktext}</a>`;
-                let link = document.querySelector('.dummylink');
+                let link = this.builder.doc.querySelector('.dummylink'); //
+
                 link.setAttribute('href', url);
                 link.setAttribute('title', title);
                 if (modal.querySelector('.input-newwindow').checked) {
@@ -107007,10 +107776,14 @@ class Common {
   applyPercentage(block) {
     const zoom = this.zoom;
     const rect = this.getRect(block);
-    const container = block.closest('.box-canvas');
+    let container = block.closest('.box-canvas');
+    if (block.parentNode.closest(this.selector)) {
+      // block is in  group
+      container = block.parentNode.closest(this.selector);
+    }
     const containerRect = this.getRect(container); // if container has top/left
 
-    this.horizontalRulerTop = container.querySelector('.h-ruler-top');
+    this.horizontalRulerTop = container.querySelector('.h-ruler-top'); // no rulers in group
     this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
     this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
     this.verticalRulerLeft = container.querySelector('.v-ruler-left');
@@ -107022,10 +107795,10 @@ class Common {
     let bottomTouched = false;
     let leftTouched = false;
     let rightTouched = false;
-    if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
-    if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
-    if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
-    if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
+    if (this.horizontalRulerTop && this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
+    if (this.horizontalRulerBottom && this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
+    if (this.verticalRulerLeft && this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
+    if (this.verticalRulerRight && this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
     let isChildBlock = false;
     if (block.parentNode.matches(this.selector)) {
       // child block
@@ -107104,10 +107877,10 @@ class Common {
 
     // reset
     setTimeout(() => {
-      this.horizontalRulerTop.removeAttribute('data-topTouched');
-      this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
-      this.verticalRulerLeft.removeAttribute('data-leftTouched');
-      this.verticalRulerRight.removeAttribute('data-rightTouched');
+      if (this.horizontalRulerTop) this.horizontalRulerTop.removeAttribute('data-topTouched');
+      if (this.horizontalRulerBottom) this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+      if (this.verticalRulerLeft) this.verticalRulerLeft.removeAttribute('data-leftTouched');
+      if (this.verticalRulerRight) this.verticalRulerRight.removeAttribute('data-rightTouched');
     }, 10);
   }
   applyPixels(block) {
@@ -107605,6 +108378,8 @@ class Ruler {
     this.rulerRight = null;
   }
   updateRulers(block) {
+    if (block.parentNode.closest(this.selector)) return; // block is in  group
+
     const container = block.closest('.box-canvas');
     this.horizontalRulerTop = container.querySelector('.h-ruler-top');
     this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
@@ -107629,6 +108404,8 @@ class Ruler {
     this.rulerRight = null;
     this.elements = container.querySelectorAll(this.selector);
     this.elements.forEach(element => {
+      if (element.parentNode.closest(this.selector)) return; // block is in  group
+
       if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
 
       if (block.contains(element)) return; // In case of group moving
@@ -108307,7 +109084,6 @@ class Resizable {
     }
 
     this.target = event.target.parentNode; // block
-
     this.clonedTarget = this.doc.querySelector(this.selector + '.cloned');
     event.preventDefault();
     event.stopPropagation();
@@ -108326,6 +109102,8 @@ class Resizable {
         this.startX = touch.clientX;
         this.startY = touch.clientY;
       }
+      this.target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
+      if (this.clonedTarget) this.clonedTarget.style.transition = '';
 
       //Initial
       this.initialWidth = parseFloat(getComputedStyle(this.target).width);
@@ -108812,6 +109590,7 @@ class Draggable {
       const y = startY - rect.top + containerRect.top;
       target.setAttribute('data-startx', x);
       target.setAttribute('data-starty', y);
+      target.style.transition = ''; // prevent anim/delay while dragging (in case a block has animation transition)
 
       // reset (from applyPercentage bottomTouched)
       if (target.style.bottom) {
@@ -108886,6 +109665,39 @@ class Draggable {
     }
   }
   updateBlockStyle(target) {
+    // Block placement should must not 50% outside the container
+    const container = target.closest('.box-canvas');
+    if (!target.parentNode.closest('.is-group')) {
+      let containerHeight = container.offsetHeight;
+      let containerWidth = container.offsetWidth;
+      /*
+      if(target.offsetTop + target.offsetHeight>=containerHeight) {
+          target.style.top = containerHeight-target.offsetHeight +'px';
+      }
+      if(target.offsetTop<=0) {
+          target.style.top = '0px';
+      }
+      if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
+          target.style.left = (containerWidth-target.offsetWidth) +'px';
+      }
+      if(target.offsetLeft<=0) {
+          target.style.left = '0px';
+      }
+      */
+      if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
+        target.style.top = '0px';
+      }
+      if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
+        target.style.top = containerHeight - target.offsetHeight + 'px';
+      }
+      if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
+        target.style.left = '0px';
+      }
+      if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
+        target.style.left = containerWidth - target.offsetWidth + 'px';
+      }
+    }
+
     // Replace with ruler's alignment
     if (this.ruler.rulerTop !== null) target.style.top = this.ruler.rulerTop + 'px';
     if (this.ruler.rulerBottom !== null) target.style.top = this.ruler.rulerBottom - target.offsetHeight + 'px'; //new
@@ -113255,6 +114067,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           let clonedDiv = block.cloneNode(true);
           clonedDiv.style.top = '20%';
           clonedDiv.style.left = '20%';
+          clonedDiv.style.transform = ''; // clear anim
+          clonedDiv.style.transition = '';
+          clonedDiv.style.opacity = '';
           if (builder) {
             const cloneBuilder = clonedDiv.querySelector(this.container);
             cloneBuilder.innerHTML = '';
@@ -113264,7 +114079,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             this.applyBehaviorOn(cloneBuilder);
             cloneBuilder.click();
           } else {
-            block.parentNode.appendChild(clonedDiv);
+            box.appendChild(clonedDiv);
           }
           block.classList.remove('active');
           this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
@@ -114532,6 +115347,18 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             });
             var html = result[0].html;
             var noedit = result[0].noedit;
+            if (result[0].mode === 'canvas') {
+              html = result[0].html2;
+              if (!html) {
+                html = `
+                                <div class="row">
+                                    <div class="column pt-0 pb-0 pl-0 pr-0 flex flex-col justify-center">
+                                    <img src="${this.opts.snippetPath}images/img-2400x1350.png" alt="">
+                                    </div>
+                                </div>
+                            `;
+              }
+            }
             var bSnippet;
             if (html.indexOf('"row') === -1) {
               bSnippet = true; // Just snippet (without row/column grid)
@@ -118313,6 +119140,23 @@ class AnimateScroll {
     this.builderStuff = builderStuff;
     let html = `
         <style>
+
+        .is-modal.animatescroll {
+            width: 370px !important; 
+            height: 85vh !important; 
+            top: 10vh !important; 
+            bottom: auto !important; 
+            left: auto !important; 
+            right: 90px !important; 
+            z-index: 10002 !important; 
+            font-size: 12px;
+            max-height: 1006px;
+        }
+        .animatescroll .is-modal-bar {
+            font-size: 12px !important;
+        }
+
+
         #_cbhtml .is-side.animatescroll, 
         .is-ui .is-side.animatescroll {
             width: 370px;
@@ -118359,7 +119203,7 @@ class AnimateScroll {
             position: absolute;
             top: 0;
             box-sizing: border-box;
-            border-top: transparent 245px solid !important;
+            border-top: transparent 208px solid !important;
         }
         #divEnterAnim, #divLeaveAnim, #divAnimSettings {
             border-top: transparent 55px solid !important;
@@ -118447,7 +119291,7 @@ class AnimateScroll {
         }
 
         .div-anim-settings,.div-wizard-settings{
-            height: calc(100vh - 34px)
+            height: 100%;
         }
         .div-wizard-settings{
             padding: 10px 15px 0 18px !important;
@@ -118458,19 +119302,23 @@ class AnimateScroll {
         }
         </style>
 
-        <div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-
-            <div class="side-title">${out('Animation')}</div>
-
-            <button tabindex="-1" title="${out('Close')}" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+        <div class="is-modal is-modal-content animatescroll keep-selection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+        <div class="is-modal-bar is-draggable" draggable=""> 
+            <span>${out('Animation')}</span>
+            <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="position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
 
-            <button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:64px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
+            <button tabindex="-1" title="${out('Edit')}" class="cmd-anim-edit" style="z-index:3;width:25px;height:25px;position:absolute;top:30px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;box-shadow:none;"><svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg></button>
            
             <div class="div-anim-settings" style="display:none">
             
                 <div class="div-anim-apply-to" style="padding:18px 10px 22px 18px;z-index:2;position:relative;">
                     <div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
-                    <div class="flex-wrap">
+                    <div class="flex-wrap" style="height:70px">
+                        <button title="${out('Block')}" class="cmd-target on" data-command="target" data-value="block">${out('Block')}</button>
                         <button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element">${out('Element')}</button>
                         <button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column">${out('Column')}</button>
                         <button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row">${out('Row')}</button>
@@ -119245,7 +120093,7 @@ class AnimateScroll {
                     </button>
                 </div>
 
-                <div class="anim-preset-list" style="height: calc(100vh - 97px);
+                <div class="anim-preset-list" style="height: calc(100% - 63px);
                 overflow: auto;
                 width: 347px;">
                     <div style="display:flex;
@@ -119299,14 +120147,15 @@ class AnimateScroll {
 
         </div>
         `;
-    dom$2.appendHtml(builderStuff, html);
-    const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
+    dom$2.appendHtml(builderStuff, html); // const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
+
+    const modalAnimateScroll = builderStuff.querySelector('.is-modal.animatescroll');
     this.modalAnimateScroll = modalAnimateScroll;
     const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
     this.divEnterAnim = divEnterAnim;
     const divLeaveAnim = modalAnimateScroll.querySelector('#divLeaveAnim');
     this.divLeaveAnim = divLeaveAnim;
-    const btnClose = modalAnimateScroll.querySelector('.is-side-close');
+    const btnClose = modalAnimateScroll.querySelector('.is-modal-close');
     btnClose.addEventListener('click', () => {
       this.close();
     });
@@ -120798,7 +121647,7 @@ class AnimateScroll {
     if (activeCol) section = activeCol.closest('.is-section');
     let elms; // elms = section.querySelectorAll('*');
 
-    elms = document.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
+    elms = section.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
     elms.forEach(elm => {
       elm.removeAttribute('data-center');
       elm.removeAttribute('data-center-top');
@@ -120833,20 +121682,21 @@ class AnimateScroll {
       elm.removeAttribute('data-hidden-onstart');
       elm.style.transform = '';
       elm.style.transition = '';
-      elm.style.opacity = ''; // console.log(elm)
+      elm.style.opacity = '';
+      this.restart(); // console.log(elm)
     });
     elms = section.querySelectorAll('.is-animated');
     elms.forEach(elm => {
       // if(elm.classList.contains('is-overlay-bg')) return;
       this.cleanupBasic(elm);
       this.cleanupDelay(elm);
-    });
-    setTimeout(() => {
-      // if (this.builder.win.skrollrr) {
-      //     this.builder.win.skrollrr.refresh();
-      // }
-      this.restart();
-    }, 30); // Refresh
+    }); // setTimeout(()=>{
+    //     // if (this.builder.win.skrollrr) {
+    //     //     this.builder.win.skrollrr.refresh();
+    //     // }
+    //     this.restart();
+    // },30);
+    // Refresh
 
     this.builder.settings.onRender();
   }
@@ -120901,9 +121751,28 @@ class AnimateScroll {
     const addPreset = box => {
       let index = start;
       const chkPresetAnimOnce = this.modalAnimateScroll.querySelector('#chkPresetAnimOnce');
-      const rows = box.querySelectorAll('.is-container > div');
-      rows.forEach(row => {
-        const cols = this.builder.editor.dom.elementChildren(row);
+      const rows = box.querySelectorAll('.is-container > div, .is-block .is-block-overlay');
+      rows.forEach(elm => {
+        if (elm.classList.contains('is-block-overlay') && !elm.closest('clone')) {
+          if (elm.querySelector('.is-container')) return;
+          elm.style.transition = 'none';
+          elm.classList.add('is-animated');
+
+          if (chkPresetAnimOnce.checked) {
+            elm.classList.add('once');
+          } else {
+            elm.classList.remove('once');
+          } // elm.classList.add('is-fadeInUp');
+          // process(elm, index);
+
+
+          elm.classList.add(presetName);
+          if (index !== 0) elm.classList.add(`delay-${index * delay}ms`);
+          elm.classList.remove('is-inview');
+          index++;
+        }
+
+        const cols = this.builder.editor.dom.elementChildren(elm);
         cols.forEach(col => {
           if (col.innerText.trim() === '' && !col.querySelector('img') && !col.querySelector('iframe') && !col.querySelector('video') && !col.querySelector('audio') && !col.querySelector('i')) return;
           col.style.transition = 'none'; // this.cleanupBasic(col);
@@ -120923,8 +121792,8 @@ class AnimateScroll {
           if (index !== 0) col.classList.add(`delay-${index * delay}ms`);
           col.classList.remove('is-inview');
           index++;
-        }); // row.setAttribute('data-bottom-top', 'transform: translateY(125px)');
-        // row.setAttribute('data-center', 'transform: translateY(0px)');
+        }); // elm.setAttribute('data-bottom-top', 'transform: translateY(125px)');
+        // elm.setAttribute('data-center', 'transform: translateY(0px)');
       });
       start++;
     };
@@ -120976,6 +121845,12 @@ class AnimateScroll {
   }
 
   restart() {
+    if (this.builder.controlpanel.activeBlock && this.builder.editor.activeElement) {
+      // cannot handle editable block
+      if (this.builder.win.pageReRender) this.builder.win.pageReRender();
+      return;
+    }
+
     this.noRead = true; // Save selection
 
     let target = this.getTarget();
@@ -120984,6 +121859,7 @@ class AnimateScroll {
     if (this.builder.editor.activeElement) this.builder.editor.activeElement.setAttribute('data-save-element', '1');
     if (this.builder.activeBox) this.builder.activeBox.setAttribute('data-save-box', '1');
     if (this.builder.activeSection) this.builder.activeSection.setAttribute('data-save-section', '1');
+    if (this.builder.controlpanel.activeBlock) this.builder.controlpanel.activeBlock.setAttribute('data-save-block', '1');
     this.builder.markScrollTarget(this.builder.activeSection); //--- Same as undo/redo process ---
 
     const wrapper = this.builder.wrapperEl;
@@ -121059,6 +121935,14 @@ class AnimateScroll {
       this.builder.activeSection = section;
     }
 
+    let block = this.builder.doc.querySelector('[data-save-block]');
+
+    if (block) {
+      block.classList.add('active');
+      block.removeAttribute('data-save-block');
+      this.builder.controlpanel.activeBlock = block;
+    }
+
     setTimeout(() => {
       this.noRead = false;
     }, 100);
@@ -121119,10 +122003,34 @@ class AnimateScroll {
   }
 
   clickContent() {
+    // Show hide buttons
+    let btns = this.modalAnimateScroll.querySelectorAll('.cmd-target');
+    btns.forEach(btn => btn.style.display = 'none');
+    let activeElement = this.builder.editor.inspectedElement;
+    let block = this.getBlock();
+    btns.forEach(btn => {
+      if (block) {
+        let s = btn.getAttribute('data-value');
+
+        if (s === 'block' || s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          btn.style.display = '';
+        }
+      } else if (activeElement) {
+        let s = btn.getAttribute('data-value');
+
+        if (s !== 'block') {
+          btn.style.display = '';
+        }
+      } else {
+        let s = btn.getAttribute('data-value');
+
+        if (s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          btn.style.display = '';
+        }
+      }
+    });
     let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
-    elms.forEach(elm => {
-      elm.classList.remove('on');
-    }); // Dynamically choose target based on selected element
+    elms.forEach(elm => elm.classList.remove('on')); // Dynamically choose target based on selected element
 
     let currentTarget = this.readTarget();
 
@@ -121151,11 +122059,23 @@ class AnimateScroll {
       } else if (currentTarget.name === 'section') {
         const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=section]');
         btn.classList.add('on');
+      } else if (currentTarget.name === 'block') {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=block]');
+        btn.classList.add('on');
       }
     } else {
-      // no animation on the selected element
-      const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
-      btn.classList.add('on');
+      // let block = this.getBlock();
+      if (block) {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=block]');
+        btn.classList.add('on');
+      } else if (activeElement) {
+        // no animation on the selected element
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
+        btn.classList.add('on');
+      } else {
+        const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=box]');
+        btn.classList.add('on');
+      }
     }
 
     this.read();
@@ -122512,17 +123432,41 @@ class AnimateScroll {
       if (section) activeElement = section;
     }
 
+    if (target === 'block') {
+      const block = this.getBlock();
+      if (block) activeElement = block;
+    }
+
     return {
       'element': activeElement ? activeElement : false,
       'name': target ? target : false
     };
   }
 
+  getBlock() {
+    let block = this.builder.doc.querySelector('.is-block.active');
+    if (!block) return false;
+
+    if (block.classList.contains('editable')) {
+      return false;
+    } else {
+      return block;
+    }
+  }
+
   readTarget(s) {
     if (!s) {
       // element (inspectedElement first)
       let activeElement = this.builder.editor.inspectedElement; // if(!activeElement) return false;
 
+      let block = this.getBlock(); // if(block && !activeElement) {
+      //     return this.readTarget('block');
+      // }
+
+      if (block) {
+        return this.readTarget('block');
+      }
+
       if (!activeElement) {
         return this.readTarget('bg');
       }
@@ -122566,6 +123510,10 @@ class AnimateScroll {
     } else {
       let activeElement;
 
+      if (s === 'block') {
+        activeElement = this.getBlock();
+      }
+
       if (s === 'element') {
         activeElement = this.builder.editor.activeElement;
       }
@@ -122607,6 +123555,7 @@ class AnimateScroll {
       }
 
       if (!activeElement) {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -122651,6 +123600,7 @@ class AnimateScroll {
           'name': s
         };
       } else {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -122745,6 +123695,7 @@ class AnimateScroll {
     if (modalEditBox) modalEditBox.style.display = '';
     const modalEditSection = this.builderStuff.querySelector('.editsection');
     if (modalEditSection) modalEditSection.style.display = '';
+    localStorage.setItem('_animationmodal', '1');
   }
 
   close() {
@@ -122752,6 +123703,7 @@ class AnimateScroll {
 
     this.builder.doc.body.classList.remove('selection-only');
     document.body.classList.remove('selection-only');
+    localStorage.removeItem('_animationmodal');
   }
 
 }
@@ -123396,6 +124348,7 @@ class Timeline {
                             <div class="flex-wrap">
                                 <div class="flex-wrap" style="margin-right:15px;width: 120px;">
                                     <select class="input-target">
+                                        <option value="block">${out('Block')}</option>
                                         <option value="element">${out('Element')}</option>
                                         <option value="column">${out('Column')}</option>
                                         <option value="row">${out('Row')}</option>
@@ -123961,9 +124914,40 @@ class Timeline {
   }
 
   clickContent() {
-    let inpTarget = this.modalTimeline.querySelector('.input-target');
-    inpTarget.value = 'element'; // default
-    // Dynamically choose target based on selected element
+    let inpTarget = this.modalTimeline.querySelector('.input-target'); // inpTarget.value = 'element'; // default
+    // Show/hide target options
+
+    let options = inpTarget.querySelectorAll('option');
+    options.forEach(opt => opt.style.display = 'none');
+    let activeElement = this.builder.editor.inspectedElement;
+    let block = this.getBlock();
+    options.forEach(opt => {
+      if (block) {
+        let s = opt.getAttribute('value');
+
+        if (s === 'block' || s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          opt.style.display = '';
+        }
+
+        inpTarget.value = 'block'; // default
+      } else if (activeElement) {
+        let s = opt.getAttribute('value');
+
+        if (s !== 'block') {
+          opt.style.display = '';
+        }
+
+        inpTarget.value = 'element'; // default
+      } else {
+        let s = opt.getAttribute('value');
+
+        if (s === 'box' || s === 'section' || s === 'overlay' || s === 'bg') {
+          opt.style.display = '';
+        }
+
+        inpTarget.value = 'box'; // default
+      }
+    }); // Dynamically choose target based on selected element
 
     let currentTarget = this.readTarget();
 
@@ -123984,12 +124968,17 @@ class Timeline {
         inpTarget.value = 'box';
       } else if (currentTarget.name === 'section') {
         inpTarget.value = 'section';
-      }
+      } else if (currentTarget.name === 'block') {
+        inpTarget.value = 'block';
+      } // this.read();
 
-      this.read();
-    } else {
-      this.clearSettings();
     }
+    /*else {
+      this.clearSettings();
+    }*/
+
+
+    this.read();
   }
 
   clearSettings() {
@@ -125184,16 +126173,39 @@ class Timeline {
       if (section) activeElement = section;
     }
 
+    if (target === 'block') {
+      const block = this.getBlock();
+      if (block) activeElement = block;
+    }
+
     return {
       'element': activeElement ? activeElement : false,
       'name': target ? target : false
     };
   }
 
+  getBlock() {
+    let block = this.builder.doc.querySelector('.is-block.active');
+    if (!block) return false;
+
+    if (block.classList.contains('editable')) {
+      return false;
+    } else {
+      return block;
+    }
+  }
+
   readTarget(s) {
     if (!s) {
       // element (inspectedElement first)
       let activeElement = this.builder.editor.inspectedElement;
+      let block = this.getBlock(); // if(block && !activeElement) {
+      //     return this.readTarget('block');
+      // }
+
+      if (block) {
+        return this.readTarget('block');
+      }
 
       if (!activeElement) {
         return this.readTarget('bg');
@@ -125230,6 +126242,10 @@ class Timeline {
     } else {
       let activeElement;
 
+      if (s === 'block') {
+        activeElement = this.getBlock();
+      }
+
       if (s === 'element') {
         activeElement = this.builder.editor.activeElement;
       }
@@ -125271,6 +126287,7 @@ class Timeline {
       }
 
       if (!activeElement) {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -125307,6 +126324,7 @@ class Timeline {
           'name': s
         };
       } else {
+        if (s === 'block') return this.readTarget('box');
         if (s === 'element') return this.readTarget('column');
         if (s === 'column') return this.readTarget('row');
         if (s === 'row') return this.readTarget('container');
@@ -133591,11 +134609,20 @@ class Section {
       if (target === 'xs') {
         section.classList.add('xs-hidden');
       } else if (target === 'sm') {
-        section.classList.add('sm-hidden');
+        section.classList.add('sm-hidden'); // hide all others smaller than tablet portrait
+
+        section.classList.add('xs-hidden');
       } else if (target === 'md') {
-        section.classList.add('md-hidden');
+        section.classList.add('md-hidden'); // hide all others smaller than tablet landscape
+
+        section.classList.add('sm-hidden');
+        section.classList.add('xs-hidden');
       } else if (target === '') {
-        section.classList.add('desktop-hidden');
+        section.classList.add('desktop-hidden'); // hide all others smaller than desktop
+
+        section.classList.add('md-hidden');
+        section.classList.add('sm-hidden');
+        section.classList.add('xs-hidden');
       }
     }
 
@@ -144775,7 +145802,7 @@ class IframePanel {
 
     if (hasPin) {
       setTimeout(() => {
-        this.builder.scrollToMarkedTarget(); // This runs pageReRender()
+        this.builder.scrollToMarkedTarget(false); // false => no need to run pageReRender(), because box/flex.js alwasy run it on resizing
       }, 300);
     } // Sync with external buttons
 
@@ -144833,7 +145860,7 @@ class IframePanel {
 
     if (hasPin) {
       setTimeout(() => {
-        this.builder.scrollToMarkedTarget(); // This runs pageReRender()
+        this.builder.scrollToMarkedTarget(false); // false => no need to run pageReRender(), because box/flex.js alwasy run it on resizing
       }, 300);
     } // Sync with external buttons
 
@@ -145252,6 +146279,7 @@ class ContentBox {
       colors: ['#ff8f00', '#ef6c00', '#d84315', '#c62828', '#58362f', '#37474f', '#353535', '#f9a825', '#9e9d24', '#558b2f', '#ad1457', '#6a1b9a', '#4527a0', '#616161', '#00b8c9', '#009666', '#2e7d32', '#0277bd', '#1565c0', '#283593', '#9e9e9e'],
       swatches: ['#ff8f00', '#ef6c00', '#d84315', '#c62828', '#58362f', '#37474f', '#f9a825', '#9e9d24', '#558b2f', '#ad1457', '#6a1b9a', '#4527a0', '#00b8c9', '#009666', '#2e7d32', '#0277bd', '#1565c0', '#283593'],
       gradientcolors: [['linear-gradient(0deg, rgb(255, 57, 25), rgb(249, 168, 37))', 'light'], ['linear-gradient(0deg, rgb(255, 57, 25), rgb(255, 104, 15))', 'light'], ['linear-gradient(0deg, #FF5722, #FF9800)', 'light'], ['linear-gradient(0deg, #613ca2, rgb(110, 123, 217))', 'light'], ['linear-gradient(0deg, rgb(65, 70, 206), rgb(236, 78, 130))', 'light'], ['linear-gradient(0deg, rgb(0, 150, 102), rgb(90, 103, 197))', 'light'], ['linear-gradient(30deg, rgb(249, 119, 148), rgb(98, 58, 162))', 'light'], ['linear-gradient(0deg, rgb(223, 70, 137), rgb(90, 103, 197))', 'light'], ['linear-gradient(0deg, rgb(40, 53, 147), rgb(90, 103, 197))', 'light'], ['linear-gradient(0deg, rgb(21, 101, 192), rgb(52, 169, 239))', 'light'], ['linear-gradient(0deg, rgb(32, 149, 219), rgb(139, 109, 230))', 'light'], ['linear-gradient(0deg, rgb(90, 103, 197), rgb(0, 184, 201))', 'light'], ['linear-gradient(0deg, rgb(0, 184, 201), rgb(253, 187, 45))', 'light'], ['linear-gradient(0deg, rgb(255, 208, 100), rgb(239, 98, 159))', 'light'], ['linear-gradient(0deg, rgb(0, 214, 223), rgb(130, 162, 253))', 'light'], ['linear-gradient(0deg, rgb(50, 234, 251), rgb(248, 247, 126))', 'dark'], ['linear-gradient(0deg, rgb(141, 221, 255), rgb(255, 227, 255))', 'dark'], ['linear-gradient(0deg, rgb(255, 170, 170), rgb(255, 255, 200))', 'dark'], ['linear-gradient(0deg, rgb(239, 239, 239), rgb(252, 252, 252))', 'dark']],
+      shadowTemplates: ['rgba(0,0,0,0.3) 0px 1px 3px 0px', 'rgba(0,0,0,0.15) 0px 1px 5px', 'rgba(0,0,0,0.16) 0px 3px 6px', 'rgba(0,0,0,0.22) 0px 10px 10px -5px', 'rgba(0,0,0,0.19) 0px 10px 20px', 'rgba(0,0,0,0.21) 0px 5px 6px', 'rgba(0,0,0,0.25) 0px 14px 28px', 'rgba(0,0,0,0.19) 0px 6px 20px 0px', 'rgba(0,0,0,0.08) 4px 17px 20px', 'rgba(0,0,0,0.12) 0px 11px 35px', 'rgba(0,0,0,0.06) 17px 17px 0px', 'rgba(0,0,0,0.1) 0px 0px 40px inset', 'rgba(22,22,22,0.2) 2em 2em 5em', 'rgba(0,0,0,0.24) 30px 30px 45px'],
       photoselect: '',
       moduleConfig: [],
       largerImageHandler: '',
@@ -149683,6 +150711,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             z-index:1;
         }
 
+        /* Group color */
+        .block-active,
+        .is-group.active {
+            background-color: #81ffd538;
+        }
+        .block-active .is-block {
+            outline: #51e1b2a3 2px solid;
+            outline-offset: 2px;
+        }
 
         i.bi, i.icon { display: inline-flex; }
 
@@ -150536,6 +151573,23 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
     }, 300);
     if (this.eb) this.eb.refresh(); // freeform
+
+    if (localStorage.getItem('_animationmodal') != null) {
+      const box = this.wrapperEl.querySelector('.is-box');
+      const section = this.wrapperEl.querySelector('.is-section');
+
+      if (box) {
+        box.classList.add('box-select');
+        this.activeBox = box;
+      }
+
+      if (section) {
+        section.classList.add('section-select');
+        this.activeSection = section;
+      }
+
+      this.animateScroll.edit();
+    }
   } // pageSetup
 
 
@@ -152184,8 +153238,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     if (element) element.classList.add('scroll-target');
   }
 
-  scrollToMarkedTarget() {
-    if (this.win.pageReRender) this.win.pageReRender();
+  scrollToMarkedTarget(reRender = true) {
+    // used by: addIdea, section.js, iframerpanel.js (reRender=false, during resize)
+    if (this.win.pageReRender && reRender) {
+      this.win.pageReRender();
+    }
+
     let scrollTarget = this.doc.querySelector('.scroll-target');
 
     if (scrollTarget) {