@innovastudio/contentbox 1.6.92 → 1.6.94

package/public/contentbox/contentbox.esm.js

@@ -666,14 +666,15 @@ function out(s, alt) {
 
 class CustomSelect$1 {
   constructor(selector, config = {}) {
-    this.select = document.querySelector(selector); // Construct
+    this.select = document.querySelector(selector);
+    this.uniqueId = `custom_select_${Date.now()}_${Math.floor(Math.random() * 1000)}`; // Construct
 
     const template = `
             <div class="select-styled" tabindex="0">
                 <span></span>
                 <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
             </div>
-            <input type="text">
+            <input type="text" id="_${this.uniqueId}">
             <ul class="select-options" aria-haspopup="listbox">
             </ul>
         `;
@@ -7155,26 +7156,6 @@ class EditBox {
     modalEditBox.style.display = 'flex';
     document.body.classList.add('box-modal-open'); // see .box-modal-open (gives outline to div.is-container when Box Settings is opened)
 
-    /*
-    // 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
 
@@ -10720,7 +10701,7 @@ class PanelText {
                     </div>
 
                     <label class="label checkbox flexgrow mt-2">
-                        <input type="checkbox" class="chk-flexgrow" />
+                        <input type="checkbox" class="chk-flexgrow" id="_chk_flexgrow" />
                         <span>${out('Grow')}</span>
                     </label>
                 </div>
@@ -11543,13 +11524,18 @@ class PanelText {
 class PanelImage {
   constructor(panel, builder) {
     this.builder = builder;
+
+    this.random = () => {
+      return `${Math.floor(Math.random() * 1000)}`;
+    };
+
     let html = `
         <div class="submain">
             <div class="asset-preview"></div>
 
             <label class="label mt-3">
                 <div>${out('Source')}:</div>
-                <input type="text" class="inp-src">
+                <input type="text" class="inp-src" id="_inp_src_${this.random()}">
             </label>
 
             <div class="group mt-4">
@@ -11571,7 +11557,7 @@ class PanelImage {
 
             <label class="label mt-2">
                 <div>${out('Title')}:</div>
-                <input type="text" class="inp-title">
+                <input type="text" class="inp-title" id="_inp_title_${this.random()}">
             </label>
         </div>
         `;
@@ -13174,7 +13160,10 @@ class PanelBox {
                         <button title="${out('Change Device')}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>
                     </div>
 
-                    <div class="group contentsize" style="flex-flow: wrap">
+                    <div>
+                        <input type="range" min="300" max="2700" value="300" step="20" class="inp-content-width is-rangeslider" style="max-width:220px">
+                    </div>
+                    <div class="group contentsize" style="flex-flow: wrap; display: none">
                         <button data-content-size="500">500</button>
                         <button data-content-size="600">600</button>
                         <button data-content-size="700">700</button>
@@ -13654,7 +13643,8 @@ class PanelBox {
       this.btnAccordionText.style.display = 'none';
       this.btnAccordionText.nextElementSibling.style.display = 'none';
       this.divDefaultTextColor.style.display = 'none';
-    });
+    }); // Content Size (old buttons)
+
     const btnContentSize = panel.querySelectorAll('[data-content-size]');
     btnContentSize.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -13671,7 +13661,26 @@ class PanelBox {
           }
         });
       });
-    });
+    }); // Content Size (new slider)
+
+    const inpContentSize = panel.querySelector('.inp-content-width');
+
+    inpContentSize.onfocus = () => {
+      this.builder.editor.saveForUndo();
+    };
+
+    inpContentSize.oninput = () => {
+      //val: 300 - 2700
+      let s = inpContentSize.value;
+      this.box.setContentWidth(s, width => {
+        panel.querySelector('.val-box-size').innerHTML = width;
+      });
+    };
+
+    inpContentSize.onchange = () => {
+      this.builder.onChange();
+    };
+
     const btnContentPos = panel.querySelectorAll('[data-content-pos]');
     btnContentPos.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -14546,6 +14555,9 @@ class PanelBox {
 
       if (val) {
         panel.querySelector('.val-box-size').innerHTML = val === 'none' ? '' : val;
+        const inpContentSize = panel.querySelector('.inp-content-width');
+        inpContentSize.value = val; // old buttons
+
         const btn = panel.querySelector(`[data-content-size="${val}"]`);
         if (btn) btn.classList.add('on');
       }
@@ -16190,7 +16202,7 @@ class PanelSection {
 
             <div class="subpanel">
                 <label class="label mt-2">
-                    <div>${out('Add Section ID')}:</div>
+                    <div>${out('Add ID')}:</div>
                     <input type="text" class="inp-section-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
                 </label>
 
@@ -16869,7 +16881,7 @@ class PanelColumn {
 
             <div class="subpanel">
                 <label class="label mt-2">
-                    <div>${out('Add Section ID')}:</div>
+                    <div>${out('Add ID')}:</div>
                     <input type="text" class="inp-column-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
                 </label>
 
@@ -17870,7 +17882,7 @@ class PanelRow {
 
             <div class="subpanel">
                 <label class="label mt-2">
-                    <div>${out('Add Section ID')}:</div>
+                    <div>${out('Add ID')}:</div>
                     <input type="text" class="inp-row-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
                 </label>
 
@@ -32708,8 +32720,8 @@ class Util$1 {
         const newPos = this.getElementPosition(btnCellMore);
         let top = newPos.top;
         let left = newPos.left;
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
+        columnMore.style.top = top + 35 + window.pageYOffset + 'px';
+        columnMore.style.left = left - 7 + window.pageXOffset + 'px';
         setTimeout(() => {
           columnMore.classList.remove('transition1');
         }, 300);
@@ -41970,7 +41982,7 @@ const prepareSvgIcons = builder => {
                 <path d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"></path>
             </symbol>
 
-            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
                 <path d="M20 4v5h-5"></path>
@@ -42048,7 +42060,7 @@ const prepareSvgIcons = builder => {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
-            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -42227,7 +42239,7 @@ const prepareSvgIcons = builder => {
                 <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -42242,6 +42254,47 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 12l14 0"></path>
             </symbol>
+
+            <symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </symbol>
+            <symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+            </symbol>
+            <symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+            <symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+            </symbol>
+            <symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+            </symbol>
+            <symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 15l6 -6"></path>
+                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+            </symbol>
+            <symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+            </symbol>
+            <symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+            </symbol>
+            <symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -43280,8 +43333,8 @@ class RowTool$1 {
     }
     */
     const newPos = this.builder.util.getElementPosition(elm);
-    let top = newPos.top;
-    let left = newPos.left;
+    let top = newPos.top + window.pageYOffset;
+    let left = newPos.left + window.pageXOffset;
 
     // const w = rowMore.offsetWidth; 
     rowMore.style.top = top - 8 + 'px';
@@ -71644,12 +71697,14 @@ class Image$1 {
       let html = `
                 <div id="divImageTool" class="is-tool">
                     <div role="button" tabindex="0" class="image-embed" style="${this.builder.opts.imageEmbed ? '' : 'display:none;'}width:40px;height:40px;overflow:hidden;">
-                        <div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 14px;height: 14px;"><use xlink:href="#ion-image"></use></svg></div>
+                        <div style="position:absolute;width:100%;height:100%;">
+                            <svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 16px;height: 16px;"><use xlink:href="#ion-image"></use></svg>
+                        </div>
                         <input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
                     </div>
-                    <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button> 
-                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button> 
-                    <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
+                    <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-folder2"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg></button>
                 </div>
                 <div id="divImageProgress">
                     <div>
@@ -72811,28 +72866,33 @@ class Image$1 {
           if (this.builder.moveable) this.builder.moveable.updateRect();
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
-          const handleImageToolClickOut = e => {
-            let elm = e.target;
-            if (!elm) return;
-            if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
-              // click outside
-
-              // hide
-              this.hideImageTool();
-              document.removeEventListener('click', handleImageToolClickOut);
-              if (this.builder.iframeDocument) {
-                this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+
+          /*
+          const handleImageToolClickOut = e =>{
+              let elm = e.target;
+              if(!elm) return;
+              if(!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && 
+                  !elm.closest('.is-modal') && !elm.closest('.keep-selection') &&
+                  !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') &&
+                  !elm.closest('img')) { // click outside
+                  
+                  // hide
+                  this.hideImageTool();
+                   document.removeEventListener('click', handleImageToolClickOut);
+                  if(this.builder.iframeDocument) {
+                      this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+                  }
+                  this.builder.handleImageToolClickOut_=false;
               }
-              this.builder.handleImageToolClickOut_ = false;
-            }
           };
-          if (!this.builder.handleImageToolClickOut_) {
-            document.addEventListener('click', handleImageToolClickOut);
-            if (this.builder.iframeDocument) {
-              this.builder.doc.addEventListener('click', handleImageToolClickOut);
-            }
-            this.builder.handleImageToolClickOut_ = true;
+          if(!this.builder.handleImageToolClickOut_) {
+              document.addEventListener('click', handleImageToolClickOut);
+              if(this.builder.iframeDocument) {
+                  this.builder.doc.addEventListener('click', handleImageToolClickOut);
+              }
+              this.builder.handleImageToolClickOut_=true;
           }
+          */
         } else {
           let imageResizer = this.imageResizer;
           imageResizer.style.display = 'none';
@@ -72846,6 +72906,28 @@ class Image$1 {
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox) movControlBox.style.display = 'none';
         }
+        const handleImageToolClickOut = e => {
+          let elm = e.target;
+          if (!elm) return;
+          if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
+            // click outside
+
+            // hide
+            this.hideImageTool();
+            document.removeEventListener('click', handleImageToolClickOut);
+            if (this.builder.iframeDocument) {
+              this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+            }
+            this.builder.handleImageToolClickOut_ = false;
+          }
+        };
+        if (!this.builder.handleImageToolClickOut_) {
+          document.addEventListener('click', handleImageToolClickOut);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.addEventListener('click', handleImageToolClickOut);
+          }
+          this.builder.handleImageToolClickOut_ = true;
+        }
         if (this.builder.canvas) ; else {
           let prog = false;
           if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
@@ -74962,10 +75044,18 @@ class Hyperlink {
     let linkTool = builderStuff.querySelector('#divLinkTool');
     if (!linkTool) {
       let html = `<div id="divLinkTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-link"></use></svg></button>
-                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -75557,9 +75647,15 @@ class Button {
     let buttonTool = builderStuff.querySelector('#divButtonTool');
     if (!buttonTool) {
       let html = `<div id="divButtonTool" class="is-tool">
-                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -75691,8 +75787,8 @@ class Spacer {
     if (!spacerTool) {
       let html = `
             <div id="divSpacerTool" class="is-tool is-spacer-tool">
-                <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
-                <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+                <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
+                <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -75852,7 +75948,7 @@ class Module {
       let html = `
             <div class="is-tool is-module-tool">
                 <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
-                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76102,7 +76198,7 @@ class Code {
     if (!codeTool) {
       let html = `
             <div class="is-tool is-code-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76230,7 +76326,7 @@ class Iframe {
     if (!iframeTool) {
       let html = `
             <div class="is-tool is-iframe-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76390,7 +76486,7 @@ class Table {
       //<div class="is-modal-bar is-draggable" style="background:#f9f9f9;"></div>
       let html = `
             <div class="is-tool is-table-tool">
-                <button title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76948,7 +77044,7 @@ class Video {
     if (!videoTool) {
       let html = `
             <div class="is-tool is-video-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -77205,7 +77301,7 @@ class Audio {
     if (!audioTool) {
       let html = `
             <div class="is-tool is-audio-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -77398,7 +77494,7 @@ class Svg {
     if (!svgTool) {
       let html = `
             <div class="is-tool is-svg-tool">
-                <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -77771,16 +77867,22 @@ class RowTool {
     const builderStuff = this.builder.builderStuff;
     let rowtool = row.querySelector('.is-row-tool');
     if (!rowtool) {
-      let html = `<div class="is-tool is-row-tool">
-                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+      let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
+                <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg></button>
             </div>
             <div class="is-tool is-col-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-plus"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(row, html);
@@ -78182,7 +78284,7 @@ class RowTool {
                     ${htmlbutton}
                     <div class="is-separator"></div>
                     <button type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                 </div>
             </div>
             `;
@@ -79667,17 +79769,7 @@ class ColumnTool {
                     ${htmlbutton}
                     <div class="is-separator"></div>
                     <button type="button" title="${util.out('Lock')}" class="cell-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
-                    
-                    <!--
-                    <button title="${util.out('Lock')}" class="cell-locking">
-                        <svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>
-                    </button>
-                    <button title="${util.out('Settings')}" class="cell-settings">
-                        <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
-                        <span>${util.out('Settings')}</span>
-                    </button>
-                    -->
+                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                 </div>
             </div>
             `;
@@ -86658,18 +86750,27 @@ class ElementTool {
     let elementMore = builderStuff.querySelector('.elmmore');
     if (!elementTool) {
       let html = `<div class="is-tool is-element-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
+                    <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
+                    <svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
+                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
+                </button>
             </div>
+
             <div class="is-pop elmmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
                     <button type="button" title="${util.out('Move Up')}" class="elm-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
                     <button type="button" title="${util.out('Move Down')}" class="elm-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
                     <button type="button" title="${util.out('Duplicate')}" class="elm-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
                     ${this.builder.opts.elementEditor ? `
-                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                     ` : ''} 
                 </div>
             </div>
@@ -86720,7 +86821,7 @@ class ElementTool {
       const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
       const h = quickadd.offsetHeight;
       if (viewportHeight - top > h) {
-        quickadd.style.top = top + window.pageYOffset + 27 + 'px';
+        quickadd.style.top = top + window.pageYOffset + 42 + 'px';
         quickadd.style.left = left - w / 2 + 10 + 'px';
         dom.removeClass(quickadd, 'arrow-bottom');
         dom.removeClass(quickadd, 'arrow-right');
@@ -86885,7 +86986,7 @@ class ElementTool {
       const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
       const h = elementMore.offsetHeight;
       if (viewportHeight - top > h) {
-        elementMore.style.top = top + window.pageYOffset + 27 + 'px';
+        elementMore.style.top = top + window.pageYOffset + 42 + 'px';
         elementMore.style.left = left - w / 2 + 10 + 'px';
         dom.removeClass(elementMore, 'arrow-bottom');
         dom.removeClass(elementMore, 'arrow-right');
@@ -87181,6 +87282,9 @@ class ElementTool {
         }
       }
     }
+    if (activeElement && activeElement.classList.contains('ovl') && this.builder.activeIframe) {
+      activeElement = this.builder.activeIframe.closest('.embed-responsive');
+    }
     this.builder.activeElement = activeElement;
     if (activeElement) {
       let elm = activeElement;
@@ -89945,6 +90049,10 @@ class ColorPicker {
       const poppicker = builderStuff.querySelector('.pop-picker');
       poppicker.style.display = 'flex';
       poppicker.style.opacity = 0;
+      if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines 
+      else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
+      else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
+
       const pickr = Pickr.create({
         el: '._pop-colpick',
         theme: 'nano',
@@ -93833,6 +93941,10 @@ class Rte {
     btnRteColor.forEach(btn => {
       btn.addEventListener('click', () => {
         const pop = this.rteColorPicker;
+        const numOfColors = this.builder.colors.length;
+        if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
+        else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
+
         if (!dom.hasClass(pop, 'active')) {
           this.util.showRtePop(pop, () => {
             const top = btn.getBoundingClientRect().top;
@@ -104768,54 +104880,83 @@ class ContentStuff$1 {
   constructor(builder) {
     this.builder = builder;
     const util = builder.util;
-    const html = `<div class="is-tool is-column-tool">
+    const html = `
+        <!-- not used -->
+        <div class="is-tool is-column-tool">
             <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
             <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
             <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
         </div>
+        <!-- /not used -->
+
         <div class="is-tool is-element-tool">
-            <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
+                <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
+                <svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
+                <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
+            </button>
         </div>
 
         <div id="divButtonTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
+            </button>
+            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
+                <svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
+            </button>
+            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+            </button>
         </div>
+
         <div class="is-tool is-code-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
+
         <div id="divLinkTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-            <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-link"></use></svg></button>
-            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
         </div>
+
         <div class="is-tool is-iframe-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-module-tool">
-            <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
-            <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+        <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-svg-tool">
-            <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div id="divSpacerTool" class="is-tool is-spacer-tool">
-            <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
-            <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+            <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
+            <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
         </div>
         <div class="is-tool is-table-tool">
-            <button title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-video-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-audio-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;background:none;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>    
         </div>
         
         <div class="is-locked-indicator">
@@ -104935,7 +105076,7 @@ class ContentStuff$1 {
             <symbol viewBox="0 0 512 512" id="ion-volume-medium">
                 <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
             </symbol>
-            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -104946,6 +105087,64 @@ class ContentStuff$1 {
                 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
                 <path d="M20 4v5h-5"></path>
             </symbol>
+
+
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+            </symbol>
+            <symbol id="icon-plus2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M12 5l0 14"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
+
+            <symbol id="icon-minus" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
+
+            <symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </symbol>
+            <symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+            </symbol>
+            <symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+            <symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+            </symbol>
+            <symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+            </symbol>
+            <symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 15l6 -6"></path>
+                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+            </symbol>
+            <symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+            </symbol>
+            <symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+            </symbol>
+            <symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
             </defs>
         </svg>
 
@@ -105139,6 +105338,9 @@ class ContentStuff$1 {
         }
 
         /* Tool */
+
+
+        /*
         .is-tool.is-video-tool,
         .is-tool.is-audio-tool,
         .is-tool.is-iframe-tool {
@@ -105198,6 +105400,111 @@ class ContentStuff$1 {
         .is-tool.is-table-tool:hover {
             z-index:10001 !important
         }
+        */
+
+
+        .is-tool.is-video-tool, 
+        .is-tool.is-audio-tool,
+        .is-tool.is-iframe-tool {
+            background: rgba(255, 255, 255, 0.97) !important;
+            border: transparent 1px solid;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            border-radius: 20px;
+        }
+
+        .is-tool.is-video-tool > div, 
+        .is-tool.is-video-tool > button, 
+        .is-tool.is-audio-tool > div, 
+        .is-tool.is-audio-tool > button, 
+        .is-tool.is-iframe-tool > div, 
+        .is-tool.is-iframe-tool > button {
+            width: 35px !important;
+            height: 35px !important;
+            background: transparent;
+        }
+
+        .is-tool.is-video-tool svg, 
+        .is-tool.is-audio-tool svg, 
+        .is-tool.is-iframe-tool svg {
+            width: 17px;
+            height: 17px;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+
+        .is-tool.is-spacer-tool {
+            border: none;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            border-radius: 20px;
+            overflow: hidden;
+        }
+        .is-tool.is-spacer-tool > button {
+            width: 40px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.97) !important;
+        }
+        .is-tool.is-spacer-tool > button svg {
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool.is-table-tool {
+            border: none;
+            background: none;
+            border-radius: 20px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+        }
+        .is-tool.is-table-tool:hover {
+            z-index: 10001 !important;
+        }
+        .is-tool.is-table-tool > button {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+        .is-tool.is-table-tool > button svg {
+            width: 17px !important;
+            height: 17px !important;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool.is-code-tool, .is-tool.is-module-tool, .is-tool.is-svg-tool {
+            border: none;
+            background: none;
+            border-radius: 20px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
+        }
+        .is-tool.is-code-tool > button, .is-tool.is-module-tool > button, .is-tool.is-svg-tool > button {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+        .is-tool.is-code-tool > button svg, .is-tool.is-module-tool > button svg, .is-tool.is-svg-tool > button svg {
+            width: 17px !important;
+            height: 17px !important;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool#divLinkTool, .is-tool#divButtonTool {
+            background: rgba(255, 255, 255, 0.95) !important;
+            box-shadow: none;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            margin-top: -10px;
+            margin-left: 7px;
+        }
+        .is-tool#divLinkTool button, .is-tool#divButtonTool button {
+            width: 37px;
+            height: 37px;
+            background: transparent !important;
+        }
+        .is-tool#divLinkTool button svg, .is-tool#divButtonTool button svg {
+            fill: #111 !important;
+            color: #111 !important;
+        }
+
+
 
 
         .dot {
@@ -105291,19 +105598,25 @@ class ContentStuff$1 {
         /* is-element-tool */
 
         .is-tool.is-element-tool {
-            background: rgba(243, 243, 243, 0.9);
             border-radius: 3px;
             overflow: hidden;
+            margin-top: 10px;
+            margin-left: 0px;
+            border-radius: 100px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            background-color: rgba(255, 255, 255, 0.97) !important;
         } 
         .is-tool.is-element-tool button {
-            width: 25px; 
-            height: 25px;
+            width: 32px;
+            height: 31px;
             background: transparent;
+            color: #111;
         }
         .is-tool.is-element-tool svg {
             width: 14px;
             height: 14px;
-            fill: #111;
+            fill: #111 !important;
+            color: #111 !important;
         }
         .is-tool.is-element-tool .elm-more svg {
             width: 11px;
@@ -105375,8 +105688,8 @@ class ContentStuff$1 {
         }
 
         .is-tool.is-row-tool button {
-            width: 25px; 
-            height: 25px;
+            width: 28px; 
+            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -105508,10 +105821,11 @@ class ContentStuff$1 {
             box-shadow: none;
             border-radius: 2px;
             overflow: hidden;
+            top: -3px !important;
         }
         .is-tool.is-col-tool button {
-            width: 25px;
-            height: 25px;
+            width: 28px;
+            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -105534,6 +105848,9 @@ class ContentStuff$1 {
             width: 14px;
             height: 14px;
         }
+        .is-tool.is-col-tool svg * { /* prevent override by .is-dark-text * */
+            color: #fff;
+        }
 
         
         .is-builder[gray] .is-tool.is-col-tool {
@@ -105647,6 +105964,9 @@ class ContentStuff$1 {
             width: 19px;
             height: 19px;
         }
+        .is-tool.is-row-tool svg * {  /* prevent override by .is-dark-text * */
+            color: #fff;
+        }
 
 
 
@@ -108513,8 +108833,6 @@ Important: Do not change the 'div.is-container' element!
   }
 }
 
-// import RecordRTC  from 'recordrtc';
-// import Recorder from 'opus-recorder'; // Using Recorder
 const dom$i = new Dom();
 class Dictation {
   constructor(opts = {}, builder) {
@@ -108862,6 +109180,9 @@ class Dictation {
     dom$i.appendHtml(builderStuff, html);
     const modalCommand = builderStuff.querySelector('.page-command');
     this.modalCommand = modalCommand;
+    new Draggable$2({
+      selector: '.is-modal.page-command .is-draggable'
+    });
     const modalCommandList = builderStuff.querySelector('.commandlist');
     this.modalCommandList = modalCommandList;
     const modalConfig = builderStuff.querySelector('.commandconfig');
@@ -115343,6 +115664,8 @@ class Editable {
     this.handleEditStart = this.handleEditStart.bind(this);
     this.handleMouseClick = this.handleMouseClick.bind(this);
     this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
     this.setup();
   }
   setup() {
@@ -115351,6 +115674,7 @@ class Editable {
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
   refresh() {
@@ -115358,23 +115682,49 @@ class Editable {
     this.elements.forEach(element => {
       element.removeEventListener('dblclick', this.handleEditStart);
       element.removeEventListener('touchstart', this.handleTouchStart);
+      element.removeEventListener('mousedown', this.handleMouseDown);
     });
     this.elements.forEach(element => {
       element.addEventListener('dblclick', this.handleEditStart);
       element.addEventListener('touchstart', this.handleTouchStart, {
         passive: false
       });
+      element.addEventListener('mousedown', this.handleMouseDown);
     });
   }
+  handleMouseDown(event) {
+    const currentTarget = event.currentTarget;
+    this.lastClickTime = false;
+    if (!currentTarget.classList.contains('active')) return;
+    if (currentTarget.classList.contains('editable')) return;
+    currentTarget.addEventListener('mouseup', this.handleMouseUp);
+    const now = new Date().getTime();
+    this.lastClickTime = now;
+  }
+  handleMouseUp(event) {
+    if (!this.lastClickTime) return;
+    const currentTarget = event.currentTarget;
+    currentTarget.removeEventListener('mouseup', this.handleMouseUp);
+    const now = new Date().getTime();
+    const lastClickTime = this.lastClickTime || now;
+    const timeDiff = now - lastClickTime;
+    if (timeDiff < 300 && timeDiff > 0) {
+      // Less than 300ms since the last touch, enable editing
+      this.handleEditStart(event);
+    }
+    this.lastClickTime = now;
+  }
   destroy(element) {
     if (element) {
       element.removeEventListener('dblclick', this.handleEditStart);
       element.removeEventListener('touchstart', this.handleTouchStart);
+      element.removeEventListener('mousedown', this.handleMouseDown);
     } else {
       this.elements = this.doc.querySelectorAll(this.selector);
       this.elements.forEach(element => {
         element.removeEventListener('dblclick', this.handleEditStart);
         element.removeEventListener('touchstart', this.handleTouchStart);
+        element.removeEventListener('mousedown', this.handleMouseDown);
       });
     }
   }
@@ -115687,6 +116037,8 @@ class EditableBlocks {
     target.style.zIndex = newZIndex;
   }
   selectStart(block) {
+    if (block.classList.contains('editable')) return; // do not proceed if in editing mode
+
     if (block.classList.contains('is-shape')) return; // do not clone if block is shape
 
     if (!this.clone) return;
@@ -117898,6 +118250,7 @@ class ContentBuilder {
       outlineMode: '',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       elementTool: true,
       elementHighlight: true,
@@ -120671,7 +121024,118 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     //     let outlineStyle = localStorage.getItem('_outlinestyle');
     //     this.preferences.setOutlineStyle(outlineStyle);
     // } 
-    if (this.preferences) this.preferences.initBuilder(builder);
+    if (this.preferences) this.preferences.initBuilder(builder);else {
+      const setColumnTool = hidecolumntool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        if (hidecolumntool) {
+          Array.prototype.forEach.call(builders, builder => {
+            builder.setAttribute('hidecolumntool', '');
+          });
+        } else {
+          Array.prototype.forEach.call(builders, builder => {
+            builder.removeAttribute('hidecolumntool');
+          });
+        }
+      };
+      setColumnTool(!this.columnTool);
+      const setElementTool = hideelementtool => {
+        const builderStuff = this.builderStuff;
+        if (hideelementtool) {
+          builderStuff.setAttribute('hideelementtool', '');
+        } else {
+          builderStuff.removeAttribute('hideelementtool', '');
+        }
+        if (this.iframe) {
+          const contentStuff = this.contentStuff;
+          if (hideelementtool) {
+            contentStuff.setAttribute('hideelementtool', '');
+          } else {
+            contentStuff.removeAttribute('hideelementtool', '');
+          }
+        }
+      };
+      setElementTool(!this.elementTool);
+      const setOutline = hideoutline => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hideoutline) {
+            builder.setAttribute('hideoutline', '');
+          } else {
+            builder.removeAttribute('hideoutline');
+          }
+        });
+      };
+      setOutline(!this.rowcolOutline);
+      const setOutlineStyle = outlineStyle => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (outlineStyle === 'grayoutline') {
+            builder.setAttribute('grayoutline', '');
+          } else {
+            builder.removeAttribute('grayoutline');
+          }
+        });
+      };
+      setOutlineStyle(this.outlineStyle);
+      const setElementHighlight = hideelementhighlight => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hideelementhighlight) {
+            builder.setAttribute('hideelementhighlight', '');
+          } else {
+            builder.removeAttribute('hideelementhighlight', '');
+          }
+        });
+      };
+      setElementHighlight(!this.elementHighlight);
+      const setToolStyle = toolStyle => {
+        const builderStuff = this.builderStuff;
+        if (toolStyle === 'gray') {
+          builderStuff.setAttribute('gray', '');
+        } else {
+          builderStuff.removeAttribute('gray', '');
+        }
+        if (this.iframe) {
+          const contentStuff = this.contentStuff;
+          if (toolStyle === 'gray') {
+            contentStuff.setAttribute('gray', '');
+          } else {
+            contentStuff.removeAttribute('gray', '');
+          }
+        }
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (toolStyle === 'gray') {
+            builder.setAttribute('gray', '');
+          } else {
+            builder.removeAttribute('gray');
+          }
+        });
+      };
+      setToolStyle(this.toolStyle);
+      const setSnippetAddTool = hidesnippetaddtool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (hidesnippetaddtool) {
+            builder.setAttribute('hidesnippetaddtool', '');
+          } else {
+            builder.removeAttribute('hidesnippetaddtool', '');
+          }
+        });
+      };
+      setSnippetAddTool(!this.snippetAddTool);
+      const setRowToolPosition = rowTool => {
+        const builders = this.doc.querySelectorAll(this.opts.container);
+        Array.prototype.forEach.call(builders, builder => {
+          if (rowTool === 'right') {
+            builder.removeAttribute('leftrowtool');
+          } else {
+            builder.setAttribute('leftrowtool', '');
+          }
+        });
+      };
+      setRowToolPosition(this.rowTool);
+    }
 
     // Apply behavior on each row
     const rows = this.dom.elementChildren(builder);
@@ -122940,8 +123404,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       */
       src = this.viewFileUrl + '?url=' + src;
     }
-    const width = 512;
-    const height = 512;
+    const width = this.ai_width; //768;
+    const height = this.ai_height; //512;
     const img = new Image();
     img.src = src;
     img.crossOrigin = 'anonymous';
@@ -122973,6 +123437,47 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       callback(result.url);
     };
   }
+  getOrientation(width, height) {
+    const aspectRatio = width / height;
+    const predefinedRatios = [{
+      ratio: '1:1',
+      value: 1 / 1
+    }, {
+      ratio: '4:5',
+      value: 4 / 5
+    }, {
+      ratio: '2:3',
+      value: 2 / 3
+    }, {
+      ratio: '9:16',
+      value: 9 / 16
+    }, {
+      ratio: '4:7',
+      value: 4 / 7
+    }, {
+      ratio: '5:4',
+      value: 5 / 4
+    }, {
+      ratio: '3:2',
+      value: 3 / 2
+    }, {
+      ratio: '16:9',
+      value: 16 / 9
+    }, {
+      ratio: '7:4',
+      value: 7 / 4
+    }];
+    let closestRatio = predefinedRatios[0].ratio;
+    let smallestDifference = Math.abs(aspectRatio - predefinedRatios[0].value);
+    for (let i = 1; i < predefinedRatios.length; i++) {
+      const difference = Math.abs(aspectRatio - predefinedRatios[i].value);
+      if (difference < smallestDifference) {
+        smallestDifference = difference;
+        closestRatio = predefinedRatios[i].ratio;
+      }
+    }
+    return closestRatio;
+  }
   async generateImage(prompt, callback) {
     this.controller = new AbortController(); // Create a new AbortController
     this.signal = this.controller.signal; // Get a new signal object
@@ -122982,12 +123487,82 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     let steps = this.imageSteps || 25;
     let guidance = this.imageGuidance || 7.5;
     let scheduler = this.imageScheduler || 'dpmsolver++';
+    let width = 768;
+    let height = 512;
+    if (this.activeImage) {
+      // check selected image dimension
+      const activeImage = this.activeImage;
+      const w = activeImage.offsetWidth;
+      const h = activeImage.offsetHeight;
+      const ratio = this.getOrientation(w, h);
+      if (model === 'flux-schnell') {
+        if (ratio === '1:1') {
+          width = 1024;
+          height = 1024;
+        } else if (ratio === '4:5') {
+          width = 768;
+          height = 960;
+        } else if (ratio === '2:3') {
+          width = 768;
+          height = 1152;
+        } else if (ratio === '9:16') {
+          width = 720;
+          height = 1280;
+        } else if (ratio === '4:7') {
+          width = 512;
+          height = 896;
+        } else if (ratio === '5:4') {
+          width = 960;
+          height = 768;
+        } else if (ratio === '3:2') {
+          width = 1152;
+          height = 768;
+        } else if (ratio === '16:9') {
+          width = 1280;
+          height = 720;
+        } else if (ratio === '7:4') {
+          width = 896;
+          height = 512;
+        }
+      } else {
+        if (ratio === '1:1') {
+          width = 512;
+          height = 512;
+        } else if (ratio === '4:5') {
+          width = 512;
+          height = 640;
+        } else if (ratio === '2:3') {
+          width = 512;
+          height = 768;
+        } else if (ratio === '9:16') {
+          width = 576;
+          height = 1024;
+        } else if (ratio === '4:7') {
+          width = 512;
+          height = 896;
+        } else if (ratio === '5:4') {
+          width = 640;
+          height = 512;
+        } else if (ratio === '3:2') {
+          width = 768;
+          height = 512;
+        } else if (ratio === '16:9') {
+          width = 1024;
+          height = 576;
+        } else if (ratio === '7:4') {
+          width = 896;
+          height = 512;
+        }
+      }
+    }
+    this.ai_width = width;
+    this.ai_height = height;
     const messages = {
       model,
       prompt: prompt,
       negative_prompt,
-      width: 512,
-      height: 512,
+      width: this.ai_width,
+      height: this.ai_height,
       steps,
       guidance,
       scheduler,
@@ -123013,10 +123588,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         return;
       }
       const imageUrl = result.url;
-      if (this.imageAutoUpscale) {
-        this.upscaleImage(imageUrl, callback);
-      } else {
+      if (this.activeImage) {
+        // selectable image on content doesn't need tp be upscaled
         callback(imageUrl);
+      } else {
+        if (this.imageAutoUpscale) {
+          this.upscaleImage(imageUrl, callback);
+        } else {
+          callback(imageUrl);
+        }
       }
     } catch (error) {
       if (error.name === 'AbortError') ; else {
@@ -130335,7 +130915,7 @@ class Timeline {
                             -->
                             <div class="flex-wrap">
                                 <div class="flex-wrap" style="margin-right:15px;width: 120px;">
-                                    <select class="input-target">
+                                    <select class="input-target" id="_input_target">
                                         <option value="block">${out('Block')}</option>
                                         <option value="element">${out('Element')}</option>
                                         <option value="column">${out('Column')}</option>
@@ -138403,9 +138983,9 @@ class Box {
         // 1920<breakpoint
         prefix = 'is-content-';
       }
-    }
+    } // this.builder.editor.saveForUndo();
+
 
-    this.builder.editor.saveForUndo();
     const activeBox = this.builder.activeBox;
     const container = activeBox.querySelector('.is-container');
 
@@ -138431,9 +139011,8 @@ class Box {
       container.classList.add(prefix + targetWidth); // panelBox.querySelector('.val-box-size').innerHTML = targetWidth;
 
       callback(targetWidth);
-    }
+    } // this.builder.onChange();
 
-    this.builder.onChange();
   }
 
   clearContentWidth() {
@@ -151883,25 +152462,33 @@ class IframePanel {
   }
 
   hideTools() {
-    let elmTool = this.builder.doc.querySelector('.is-element-tool');
-    if (elmTool) elmTool.style.display = '';
-    let videoTool = this.builder.doc.querySelector('.is-video-tool');
-    if (videoTool) videoTool.style.display = '';
-    let audioTool = this.builder.doc.querySelector('.is-audio-tool');
-    if (audioTool) audioTool.style.display = '';
-    let iframeTool = this.builder.doc.querySelector('.is-iframe-tool');
-    if (iframeTool) iframeTool.style.display = '';
-    let moduleTool = this.builder.doc.querySelector('.is-module-tool');
-    if (moduleTool) moduleTool.style.display = '';
-    let lockIndicator = this.builder.doc.querySelector('.is-locked-indicator');
-    if (lockIndicator) lockIndicator.style.display = '';
-    let linkTool = this.builder.doc.querySelector('#divLinkTool');
-    if (linkTool) linkTool.style.display = '';
-    let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
-    if (spacerTool) spacerTool.style.display = '';
-    this.builder.editor.element.image.hideImageTool(); // this.builder.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
-    // this.builder.doc.querySelectorAll('.elm-inspected').forEach(elm => elm.classList.remove('elm-inspected'));
-    // this.builder.doc.querySelectorAll('.elm-active').forEach(elm => elm.classList.remove('elm-active'));
+    this.builder.addCustomStyle('_css_scale', `
+            .is-element-tool,
+            .is-video-tool,
+            .is-audio-tool,
+            .is-iframe-tool,
+            .is-module-tool,
+            .is-code-tool,
+            .is-svg-tool,
+            .is-table-tool,
+            .is-spacer-tool,
+            .is-locked-indicator,
+            .is-section-info,
+            #divButtonTool,
+            #divLinkTool {
+                opacity: 0 !important;
+            }
+
+            .row-active .is-col-tool,
+            .row-active .is-row-tool ,
+            .is-section-tool,
+            .is-box-tool {
+                opacity: 0 !important;
+            }
+        `);
+    this.builder.editor.element.image.hideImageTool();
+    let tool = this.builder.doc.querySelector('.row-active .is-col-tool');
+    if (tool) tool.style.display = 'none';
   }
 
   repositionTool() {
@@ -151915,6 +152502,10 @@ class IframePanel {
         }
       }, 600);
     }
+
+    setTimeout(() => {
+      this.builder.scaleTools(); // already include this.builder.removeCustomStyle('_css_scale');
+    }, 300);
   }
 
   repositionTool_bak() {
@@ -155041,6 +155632,7 @@ class ContentBox {
       rowTool: 'right',
       toolStyle: '',
       outlineStyle: '',
+      rowHandle: true,
       snippetAddTool: true,
       mobileSimpleEdit: false,
       clearPreferences: false,
@@ -158597,6 +159189,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       rowTool: this.settings.rowTool,
       toolStyle: this.settings.toolStyle,
       outlineStyle: this.settings.outlineStyle,
+      rowHandle: this.settings.rowHandle,
       snippetAddTool: this.settings.snippetAddTool,
       mobileSimpleEdit: this.settings.mobileSimpleEdit,
       clearPreferences: this.settings.clearPreferences,
@@ -160492,7 +161085,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
                 <svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg>
             </button>
             <button type="button" class="btn-section-remove" tabindex="-1" data-title="${out('Remove')}" title="${out('Remove')}">
-                <svg class="is-icon-flex"><use xlink:href="#icon-close"></use></svg>
+                <svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-3px;"><use xlink:href="#icon-trash2"></use></svg>
             </button>
         </div>`);
     this.defineLastBox(section);
@@ -161406,40 +161999,55 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.positionTool(this.activeBox);
   }
 
-  hideTools() {
-    // hide tools
-    let tools = this.doc.querySelectorAll('.is-tool');
-    Array.prototype.forEach.call(tools, tool => {
-      tool.style.display = '';
-    });
-    tools = this.doc.querySelectorAll('.is-row-tool');
-    tools.forEach(tool => {
-      tool.style.display = 'none';
-    });
-    tools = this.doc.querySelectorAll('.is-rowadd-tool');
-    tools.forEach(tool => {
-      tool.style.opacity = 0;
-    });
-    tools = this.doc.querySelectorAll('.is-col-tool');
-    tools.forEach(tool => {
-      tool.style.display = 'none';
-    });
-  }
+  scaleTools() {
+    this.removeCustomStyle('_css_scale');
+    const div = document.querySelector('.is-content-view');
+    if (!div) return;
+    const transformStyle = window.getComputedStyle(div).transform;
+    const matrixValues = transformStyle.slice(7, -1).split(',');
+    let scaleValue = parseFloat(matrixValues[0]);
+    this.removeCustomStyle('_css_scale_apply');
+    this.addCustomStyle('_css_scale_apply', `
+            .is-section-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: top right !important;
+            }
+            .is-box-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: center bottomt !important;
+            }
+            .is-section-info {
+                transform: scale(${1 / scaleValue}) !important;;
+            }
 
-  showTools() {
-    this.editor.util.repositionColumnTool();
-    let tools = this.doc.querySelectorAll('.is-row-tool');
-    tools.forEach(tool => {
-      tool.style.display = '';
-    });
-    tools = this.doc.querySelectorAll('.is-rowadd-tool');
-    tools.forEach(tool => {
-      tool.style.opacity = '';
-    });
-    tools = this.doc.querySelectorAll('.is-col-tool');
-    tools.forEach(tool => {
-      tool.style.display = '';
-    });
+            .is-col-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: bottom left !important;
+
+            }
+            .is-row-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: top left !important;
+            }
+            .is-rowadd-tool button {
+                transform: scale(${1 / scaleValue}) !important;;
+            }
+
+            .is-element-tool,
+            .is-video-tool,
+            .is-audio-tool,
+            .is-iframe-tool,
+            .is-module-tool,
+            .is-code-tool,
+            .is-spacer-tool,
+            .is-svg-tool,
+            .is-table-tool,
+            .is-locked-indicator,
+            #divLinkTool, #divButtonTool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: top !important;
+            }
+        `);
   }
 
   positionTool(box) {
@@ -161545,18 +162153,31 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
           }
         }
       }
-    } // box info
+    } // tools scaling for iframe
 
 
-    const boxInfos = this.wrapperEl.querySelectorAll('.is-box-info');
-    boxInfos.forEach(tool => {
-      tool.style.display = 'none';
-    });
-    let boxInfo = box.querySelector('.is-box-info');
+    this.scaleTools();
+  }
+
+  addCustomStyle(styleId, cssContent) {
+    let existingStyle = this.doc.getElementById(styleId);
+
+    if (existingStyle) {
+      existingStyle.innerHTML = cssContent;
+    } else {
+      let style = this.doc.createElement('style');
+      style.type = 'text/css';
+      style.id = styleId;
+      style.innerHTML = cssContent;
+      this.doc.head.appendChild(style);
+    }
+  }
+
+  removeCustomStyle(styleId) {
+    let style = this.doc.getElementById(styleId);
 
-    if (boxInfo) {
-      boxInfo.style.display = 'flex';
-      boxInfo.style.transform = 'scale(' + 1 / zoom + ')';
+    if (style) {
+      this.doc.head.removeChild(style);
     }
   }