@innovastudio/contentbox 1.6.203 → 1.6.205

package/public/contentbox/contentbox.esm.js

@@ -627,7 +627,14 @@ class CustomSelect$1 {
     this.selectStyled.addEventListener('keydown', this.handleKeydown.bind(this));
     this.selectStyled.addEventListener('click', this.toggleOptions.bind(this));
     this.selectOptions.addEventListener('click', this.handleOptionClick.bind(this));
-    this.selectSearch.addEventListener('input', this.handleFilterInput.bind(this)); // this.selectStyled.addEventListener('mousedown', ()=>{
+    this.selectSearch.addEventListener('input', this.handleFilterInput.bind(this)); // Keep the content's selection: without an iframe the content shares this
+    // document, so a press here would move the selection into the panel and
+    // the chosen value would have no text to apply to.
+
+    const keepSelection = e => e.preventDefault();
+
+    this.selectStyled.addEventListener('mousedown', keepSelection);
+    this.selectOptions.addEventListener('mousedown', keepSelection); // this.selectStyled.addEventListener('mousedown', ()=>{
     //     this.select.classList.add('clicked');
     // });
   }
@@ -11471,7 +11478,7 @@ class Text {
     if (!anchorNode) return false;
     let container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
 
-    if (container && container.closest('.is-overlay') && this.builder.controlpanel.activeElement && !container.closest('[data-cb-type]')) {
+    if (container && container.closest('.is-overlay') && this.builder.controlpanel.activeElement && this.builder.controlpanel.activeElement.isConnected && !container.closest('[data-cb-type]')) {
       return this.builder.controlpanel.activeElement; // container => is-overlay when drag & drop bloxk
     }
     /*
@@ -11495,9 +11502,13 @@ class Text {
     getSelection() works only if element selectable. If not, it uses previous selected element which is incorrect.
     So we check if activeElement is different with getSelection() => means incorrect
     */
+    // An edit can take the active element off the page (clearing a size
+    // unwraps its span); the selection is then the right answer.
 
 
-    if (this.builder.controlpanel.activeElement.contains(container)) ; else {
+    const activeElement = this.builder.controlpanel.activeElement;
+
+    if (!activeElement || !activeElement.isConnected || activeElement.contains(container)) ; else {
       container = this.builder.controlpanel.activeElement; // If incorrect, uses activeElement
     }
 
@@ -18781,6 +18792,11 @@ class PanelOverlay {
 
                 <div class="inp-text" role="textbox"></div>
 
+                <div class="label mt-4">${out('Color')}:</div>
+                <div class="group">
+                    <button type="button" title="${out('Color')}" class="btn-ovl-color cb-colorbtn"><span></span></button>
+                </div>
+
                 <div class="label-note mt-4 note-motion">${out('This text is part of an animated layer. Change the wording here; its movement lives on the Motion tab above.')}</div>
 
                 <div class="label-note mt-4 note-plain" style="display:none">${out('Change the wording here. Its placement and styling come from the section design.')}</div>
@@ -18954,6 +18970,38 @@ class PanelOverlay {
         attrs: ['alt']
       });
       this.builder.editor.onChange();
+    }); // --- Text colour ---
+    //
+    // Written inline on the selected element, so it overrides the design's
+    // colour for this text only; clearing it in the picker returns the
+    // colour it had when selected. One undo step per picker session.
+
+    this.origColors = new WeakMap();
+    const btnColor = panel.querySelector('.btn-ovl-color');
+    btnColor.addEventListener('click', () => {
+      const el = this.target();
+      if (!el) return;
+      let fresh = true;
+      const current = el.style.color || this.builder.win.getComputedStyle(el).color;
+      const colorpicker = this.builder.editor.colorpicker();
+      colorpicker.open(color => {
+        const el = this.target();
+        if (!el) return;
+
+        if (fresh) {
+          this.builder.editor.saveForUndo();
+          fresh = false;
+        } // Cleared: back to the colour the text had when it was selected,
+        // which may itself be inline (set by the design) or none.
+
+
+        el.style.color = color || this.origColors.get(el) || '';
+        syncToCodeSource(el, {
+          styles: ['color']
+        });
+        this.paintColor(el);
+        this.builder.editor.onChange();
+      }, current, () => {}, btnColor, true); // overlay=true
     }); // --- Text ---
 
     this.textEditor = panel.querySelector('.inp-text'); // No formatting UI, deliberately: this panel edits AI-generated overlay
@@ -18996,6 +19044,16 @@ class PanelOverlay {
         sanitize: false
       });
     });
+  } // The swatch shows the colour the text has now: its own if set, otherwise
+  // the one it gets from the design.
+
+
+  paintColor(el) {
+    const btn = this.panel.querySelector('.btn-ovl-color');
+    if (!btn || !el) return;
+    const color = el.style.color || this.builder.win.getComputedStyle(el).color;
+    const editor = this.builder.editor;
+    if (editor && typeof editor.paintColorButton === 'function') editor.paintColorButton(btn, color);else btn.style.backgroundColor = color;
   }
 
   escapeHtml(text) {
@@ -19327,6 +19385,9 @@ class PanelOverlay {
     // it (which would move their caret to the end on every keystroke).
 
     if (panel.ownerDocument.activeElement !== this.textEditor) {
+      // Opening a plugin's panel tears down every panel editor
+      // (destroyPanelEditors), this field included: bring it back.
+      if (!this.ed || !this.textEditor.isContentEditable) this.setupTextEditor();
       this._loadingText = true;
       if (this.ed) this.ed.setHTML(el.innerHTML);else this.textEditor.innerHTML = el.innerHTML;
       this._loadingText = false;
@@ -19342,6 +19403,8 @@ class PanelOverlay {
     this.textEditor.style.fontWeight = computed.fontWeight;
     this.textEditor.style.fontStyle = computed.fontStyle;
     this.textEditor.style.textTransform = computed.textTransform;
+    if (!this.origColors.has(el)) this.origColors.set(el, el.style.color);
+    this.paintColor(el);
   }
 
   getStateSource(el) {
@@ -19454,7 +19517,7 @@ class PanelIcon {
                 <button title="${out('Color')}" class="btn-color is-btn-color"></button>
             </div>
 
-            <div class="label">${out('Icon Size')}:</div>
+            <div class="label label-iconsize">${out('Icon Size')}:</div>
 
             <div role="group" aria-label="${out('Font Size')}" class="group fontsizes">
                 ${fontSizeHtml}
@@ -19517,20 +19580,17 @@ class PanelIcon {
     btnSizes.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        const num = btn.getAttribute('data-value');
-        let currentFontSize = 1;
-        let container = this.getElm();
+        const num = btn.getAttribute('data-value'); // Size the icon itself, as ContentBuilder's own size buttons do for an icon.
 
-        if (container) {
-          currentFontSize = Number(window.getComputedStyle(container).getPropertyValue('font-size').match(/\d+/)[0]);
+        const icon = this.builder.controlpanel.activeElement;
+        const rte = this.builder.editor.rte;
+
+        if ((this.builder.editor.opts.fontSizeClassValues || []).length > 0) {
+          rte.applyClassFontSize(icon, num);
+        } else {
+          rte.applyInlineFontSize(icon, num);
         }
 
-        this.builder.editor.dom.execCommand('font-size', currentFontSize + 1 + 'px', (ok, container) => {
-          if (ok) {
-            this.builder.editor.rte.applyClassFontSize(container, num);
-            container.style.fontSize = '';
-          }
-        });
         this.getState();
         this.builder.editor.onChange();
       });
@@ -19568,7 +19628,13 @@ class PanelIcon {
   getState() {
     const panel = this.panel;
     let icon = this.builder.controlpanel.activeElement;
-    const div = icon.parentNode;
+    const div = icon.parentNode; // An icon in overlay text: its link and alignment belong to the line (the Text panel),
+    // and its size follows the design, like the text's. Only Change icon and Color are shown.
+
+    const inOverlayText = !!this.builder.controlpanel.overlayIcon(icon);
+    panel.querySelectorAll('.btn-link, .label-iconsize, .group.fontsizes, .alignicon').forEach(elm => {
+      elm.style.display = inOverlayText ? 'none' : '';
+    });
     const btnAligns = panel.querySelectorAll('[data-align]');
     btnAligns.forEach(btn => btn.classList.remove('on'));
     if (div.classList.contains('text-left')) panel.querySelector('[data-align="left"]').classList.add('on');
@@ -19619,14 +19685,6 @@ class PanelIcon {
     }
   }
 
-  getElm() {
-    const selection = this.builder.win.getSelection();
-    const anchorNode = selection.anchorNode;
-    if (!anchorNode) return false;
-    const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
-    return container;
-  }
-
 }
 
 class PanelSvg {
@@ -30004,7 +30062,7 @@ class PanelBox {
                             <button title="${out('Color')}" class="btn-color is-btn-color"></button>
                         </div>
                     </div>
-                    <div>
+                    <div class="div-box-gradient">
                         <div class="label mt-3">${out('Gradient')}:</div>
                         <div class="group">
                             <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
@@ -30074,10 +30132,9 @@ class PanelBox {
 
         </div>
 
-        <div class="submain box-plugin-settings panel-plugin pluginsettings">
-
-            <hr style="width: 100%;border-bottom: #ededed 2px solid;margin-top: 20px;">
-
+        <div class="submain div-box-plugins" style="display:none">
+            <div class="label mt-3">${out('In this box')}:</div>
+            <div class="overlay-list mt-1"></div>
         </div>
 
         <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="boxcontent1">
@@ -31134,6 +31191,13 @@ class PanelBox {
 
   static css() {
     return `
+.cb-navbar-box .boxedit,
+.cb-navbar-box .div-box-gradient,
+.cb-navbar-box .box-bg-image,
+.cb-navbar-box > .accordion-item,
+.cb-navbar-box > .accordion-content {
+    display: none !important;
+}
 [data-cb-ui] .cb-contentpos .cb-fieldhead {
     display: flex;
     align-items: baseline;
@@ -31445,7 +31509,10 @@ class PanelBox {
     const overlayBg = activeBox.querySelector('.is-overlay-bg');
     const overlayContent = activeBox.querySelector('.is-overlay-content');
     const container = this.box.contentContainer(activeBox);
-    const panel = this.panel;
+    const panel = this.panel; // A navigation bar keeps only its background colour (the bar's colour once the
+    // header has scrolled by): no duplicate, extra box, gradient, image or box tabs
+
+    panel.classList.toggle('cb-navbar-box', !!activeBox.closest('.is-section-navbar'));
     const divEditModule = panel.querySelector('.group.editmodule');
 
     if (overlayContent && overlayContent.getAttribute('data-module')) {
@@ -31789,12 +31856,12 @@ class PanelBox {
       chkAutoLayout.checked = true;
     } else {
       chkAutoLayout.checked = false;
-    } // PLUGIN SETTINGS
+    } // PLUGINS
+    // A plugin in the box overlay has its own panel: a click on it opens that.
+    // Here the box lists them, and each can hide box settings it has no use for.
 
 
-    const divPluginSettings = panel.querySelector('.box-plugin-settings');
-    this.divPluginSettings = divPluginSettings;
-    const runtime = this.builder.win.builderRuntime; // Reset (can be changed by renderPluginSettings)
+    const runtime = this.builder.win.builderRuntime; // Reset (can be changed by applyPluginOptions)
 
     const divBgColor = this.panel.querySelector('.box-bg-color');
     divBgColor.style.display = '';
@@ -31805,39 +31872,55 @@ class PanelBox {
     const divPanelTitle = this.panel.parentNode.querySelector('.part-title');
     divPanelTitle.style.display = '';
     this.divPanelTitle = divPanelTitle;
+    const divPlugins = panel.querySelector('.div-box-plugins');
+    const list = divPlugins.querySelector('.overlay-list');
+    list.innerHTML = ''; // The box's own plugins: not the ones inside its content areas, nor inside another plugin
 
-    if (overlayContent && runtime) {
-      const currentElement = overlayContent.querySelector('[data-cb-type]');
+    const plugins = overlayContent && runtime ? Array.from(overlayContent.querySelectorAll('[data-cb-type]')).filter(el => !el.closest('.is-container') && !(el.parentElement && el.parentElement.closest('[data-cb-type]'))) : []; // Several of the same plugin are numbered, so their rows can be told apart
 
-      if (currentElement) {
-        divPluginSettings.style.display = '';
-        this.renderPluginSettings(currentElement);
-      } else {
-        divPluginSettings.style.display = 'none';
-      }
-    } else {
-      divPluginSettings.style.display = 'none';
-    }
-  }
+    const counts = {},
+          seen = {};
+    plugins.forEach(el => {
+      const t = el.getAttribute('data-cb-type');
+      counts[t] = (counts[t] || 0) + 1;
+    });
+    plugins.forEach(el => {
+      const type = el.getAttribute('data-cb-type');
+      const plugin = runtime.getPlugin(type);
+      if (!plugin) return;
+      seen[type] = (seen[type] || 0) + 1;
+      this.applyPluginOptions(el, plugin);
+      const row = this.panel.ownerDocument.createElement('button');
+      row.type = 'button';
+      row.className = 'ovl-row';
+      const label = this.panel.ownerDocument.createElement('span');
+      label.className = 'ovl-row-text';
+      label.textContent = out(plugin.displayName || plugin.name) + (counts[type] > 1 ? ' ' + seen[type] : '');
+      row.appendChild(label);
+      row.addEventListener('click', () => {
+        this.builder.controlpanel.markOverlayHover(null);
+        this.builder.controlpanel.selectOverlayElement(el);
+      });
+      row.addEventListener('mouseenter', () => this.builder.controlpanel.markOverlayHover(el));
+      row.addEventListener('mouseleave', () => this.builder.controlpanel.markOverlayHover(null));
+      list.appendChild(row);
+    });
+    divPlugins.style.display = list.childElementCount ? '' : 'none';
+  } // True when the plugin element fills (practically) the whole box overlay.
 
-  renderPluginSettings(currentElement) {
-    // Same panel lifecycle as panel-plugin.js / ContentBuilder's
-    // elementplugin.js: destroy the previous render's panel editors before
-    // their elements go away, and publish the plugin being edited.
-    this.builder.destroyPanelEditors();
-    this.builder.activePlugin = currentElement;
-    this.currentElement = currentElement;
-    this.generator = null;
-    this.currentForm = null;
-    const divPluginSettings = this.divPluginSettings;
-    divPluginSettings.innerHTML = '';
-    const runtime = this.builder.win.builderRuntime;
-    const pluginName = currentElement.getAttribute('data-cb-type');
-    const plugin = runtime.getPlugin(pluginName);
-    if (!plugin) return;
-    let displayName = out(plugin.displayName || plugin.name);
 
-    if (currentElement.querySelector('.is-container')) {
+  pluginCoversBox(element) {
+    const overlay = element.closest('.is-overlay');
+    if (!overlay) return true;
+    const box = overlay.getBoundingClientRect();
+    const el = element.getBoundingClientRect();
+    if (!box.width || !box.height) return true;
+    return el.width >= box.width * 0.98 && el.height >= box.height * 0.98;
+  } // The box settings a plugin in this box has no use for (its contentbox options)
+
+
+  applyPluginOptions(currentElement, plugin) {
+    if (plugin.contentbox && currentElement.querySelector('.is-container')) {
       // if plugin element has editable content
       plugin.contentbox.boxTabText = false;
       plugin.contentbox.boxTabContent = false;
@@ -31860,16 +31943,21 @@ class PanelBox {
 
 
     if (plugin.contentbox) {
-      if (plugin.contentbox.bg !== undefined && plugin.contentbox.bg !== null && plugin.contentbox.bg === false) {
+      // A plugin hides the box background (bg: false) because it covers it,
+      // like a full-bleed video. When the plugin only fills part of the box
+      // (a framed video, a card), the background is visible and stays editable.
+      const coversBox = this.pluginCoversBox(currentElement);
+
+      if (coversBox && plugin.contentbox.bg !== undefined && plugin.contentbox.bg !== null && plugin.contentbox.bg === false) {
         this.divBgColor.style.display = 'none';
         this.divBgImage.style.display = 'none';
       }
 
-      if (plugin.contentbox.bgColor !== undefined && plugin.contentbox.bgColor !== null && plugin.contentbox.bgColor === false) {
+      if (coversBox && plugin.contentbox.bgColor !== undefined && plugin.contentbox.bgColor !== null && plugin.contentbox.bgColor === false) {
         this.divBgColor.style.display = 'none';
       }
 
-      if (plugin.contentbox.bgImage !== undefined && plugin.contentbox.bgImage !== null && plugin.contentbox.bgImage === false) {
+      if (coversBox && plugin.contentbox.bgImage !== undefined && plugin.contentbox.bgImage !== null && plugin.contentbox.bgImage === false) {
         this.divBgImage.style.display = 'none';
       }
 
@@ -31941,111 +32029,6 @@ class PanelBox {
         });
       }
     }
-
-    const divTitle = document.createElement('h3');
-    divTitle.style.cssText = 'font-family: sans-serif;font-weight: 300;font-size: 20px;margin: 0 0 12px;';
-    divTitle.innerText = displayName;
-    divPluginSettings.appendChild(divTitle);
-    this.generator = new SettingsUIGenerator$1(runtime, this.builder);
-    const hasContentEditor = plugin && plugin.editor && plugin.editor.openContentEditor;
-
-    if (hasContentEditor) {
-      // Get original content for the editor to work with
-      const originalContent = currentElement.getAttribute('data-cb-original-content'); // Create a temporary element for editing (so editor can manipulate it)
-
-      let editableClone = document.querySelector('.editable-clone');
-      if (editableClone) editableClone.remove(); // editableClone = document.createElement('div');
-
-      editableClone = currentElement.cloneNode(false);
-      editableClone.innerHTML = originalContent;
-      editableClone.className = 'editable-clone';
-      editableClone.style.display = 'none'; // Hidden, just for editing
-
-      document.body.appendChild(editableClone);
-      const originalElement = editableClone.cloneNode(false); // Let plugin handle everything - pass the editable clone
-
-      const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
-        this.builder.editor.saveForUndo(); // Do the same process like reinitialize, needed for newly added item (which requires data-cb-original-content update)
-        // Add index for sortable grid (for easy reorder)
-
-        let grid = editableClone.querySelector('.grid-sortable');
-
-        if (!grid) {
-          if (currentElement.classList.contains('grid-sortable')) {
-            grid = editableClone;
-          }
-        }
-
-        if (grid) {
-          Array.from(grid.children).forEach((child, index) => {
-            if (child.nodeType === 1 && child.tagName !== 'STYLE' && child.tagName !== 'SCRIPT') child.setAttribute('data-index', index);
-          });
-        } //----
-        // Add data-edit-id for editable area 
-
-
-        let editables = editableClone.querySelectorAll('.edit');
-        editables.forEach((area, index) => {
-          const id = `content-${Date.now()}-${index}`;
-          area.setAttribute('data-edit-id', id);
-        }); //-----
-        // Store edited content from clone
-
-        currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
-        // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
-
-        const getChangedDataAttributes = (el1, el2) => {
-          const changed = [];
-
-          for (const key of Object.keys(el1.dataset)) {
-            if (key in el2.dataset && el1.dataset[key] !== el2.dataset[key]) {
-              changed.push(key);
-            }
-          }
-
-          return changed;
-        };
-
-        const changedAttributes = getChangedDataAttributes(originalElement, editableClone);
-        changedAttributes.forEach(attrName => {
-          // console.log(attrName)
-          // console.log(editableClone.dataset[attrName])
-          currentElement.dataset[attrName] = editableClone.dataset[attrName];
-        }); // -------
-
-        currentElement.innerHTML = editableClone.innerHTML; // Update current content
-        // Remove temporary clone
-
-        editableClone.remove(); // Reinitialize plugin with new content
-
-        await runtime.reinitialize(currentElement.parentElement);
-        this.builder.onChange();
-        this.builder.editor.hideElementTools();
-        this.builder.makeSortable(currentElement.parentElement);
-      });
-      divPluginSettings.appendChild(editorUI);
-    } // Generate form
-
-
-    this.currentForm = this.generator.generateForm(pluginName, currentElement, () => {
-      this.builder.editor.saveForUndo();
-      this.applyChanges(runtime);
-    });
-    divPluginSettings.appendChild(this.currentForm);
-  }
-
-  async applyChanges(runtime) {
-    if (!this.currentElement || !this.currentForm) return; // 1. Get form values
-
-    const values = this.generator.getFormValues(this.currentForm); // 2. Apply to element attributes
-
-    this.generator.applyValues(this.currentElement, values); // 3. Reinitialize component
-
-    const container = this.currentElement.parentElement || this.currentElement.closest('.is-wrapper');
-    await runtime.reinitialize(container);
-    this.builder.onChange(); // console.log('Settings applied and component reinitialized');
-
-    this.builder.makeSortable(container);
   }
 
   getStateTargeted() {
@@ -33713,6 +33696,40 @@ class PanelSection {
 
         </div>
 
+        <button class="accordion-item btn-accordion-bar" aria-expanded="false" aria-controls="sectioncontent5">
+            ${out('Navigation Bar')}
+            <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
+        </button>
+        <div class="accordion-content" id="sectioncontent5" aria-hidden="true">
+
+            <div class="subpanel">
+                <div class="barstart-row">
+                    <div class="label mt-2">${out('Bar at the start')}:</div>
+                    <div role="group" aria-label="${out('Bar at the start')}" class="group sectionbar barstart">
+                        <button title="${out('Auto')}" data-barstart="">${out('Auto')}</button>
+                        <button title="${out('Light')}" data-barstart="light">${out('Light')}</button>
+                        <button title="${out('Dark')}" data-barstart="dark">${out('Dark')}</button>
+                    </div>
+                </div>
+
+                <div class="label mt-2">${out('Bar over this section')}:</div>
+                <div role="group" aria-label="${out('Bar over this section')}" class="group sectionbar">
+                    <button title="${out('Default')}" data-bar="">${out('Default')}</button>
+                    <button title="${out('Light')}" data-bar="light">${out('Light')}</button>
+                    <button title="${out('Dark')}" data-bar="dark">${out('Dark')}</button>
+                    <button title="${out('Light glass')}" data-bar="light-glass">${out('Light glass')}</button>
+                    <button title="${out('Dark glass')}" data-bar="dark-glass">${out('Dark glass')}</button>
+                </div>
+
+                <div class="label mt-3">${out('Text Color')}:</div>
+                <div class="group">
+                    <button title="${out('Text Color')}" class="btn-barink is-btn-color"></button>
+                    <button title="${out('Clear')}" class="btn-clear btn-barink-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
+            </div>
+
+        </div>
+
         <button class="accordion-item" aria-expanded="false" aria-controls="sectioncontent3">
             ${out('Responsive')}
             <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
@@ -33904,6 +33921,54 @@ class PanelSection {
         btnScrollPreset.forEach(btn => btn.classList.remove('on'));
         if (s !== '') btn.classList.add('on');
       });
+    }); // Navigation Bar: how the page's navigation bar looks while it passes over this
+    // section. The section only says it (data-bar, data-bar-ink); the menu in the bar
+    // does the work.
+
+    const btnBarLooks = panel.querySelectorAll('[data-bar]');
+    btnBarLooks.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const section = this.builder.activeSection;
+        const s = btn.getAttribute('data-bar');
+        if (s) section.setAttribute('data-bar', s);else section.removeAttribute('data-bar');
+        btnBarLooks.forEach(btn => btn.classList.remove('on'));
+        btn.classList.add('on');
+        this.builder.onChange();
+      });
+    }); // Bar at the start: the bar's text while it rests over the top section, at the top of
+    // the page (data-bar-start). Only the top section has it. Auto: no attribute.
+
+    const btnBarStarts = panel.querySelectorAll('[data-barstart]');
+    btnBarStarts.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const section = this.builder.activeSection;
+        const s = btn.getAttribute('data-barstart');
+        if (s) section.setAttribute('data-bar-start', s);else section.removeAttribute('data-bar-start');
+        btnBarStarts.forEach(btn => btn.classList.remove('on'));
+        btn.classList.add('on');
+        this.builder.onChange();
+      });
+    });
+    const btnBarInk = panel.querySelector('.btn-barink');
+    btnBarInk.addEventListener('click', () => {
+      this.builder.editor.saveForUndo(true); // checkLater = true
+
+      const section = this.builder.activeSection;
+      const colorpicker = this.builder.editor.colorpicker();
+      colorpicker.open(s => {
+        if (s) section.setAttribute('data-bar-ink', s);else section.removeAttribute('data-bar-ink');
+        btnBarInk.style.backgroundColor = s; // preview
+
+        this.builder.onChange();
+      }, btnBarInk.style.backgroundColor, () => {}, btnBarInk, true);
+    });
+    panel.querySelector('.btn-barink-clear').addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      this.builder.activeSection.removeAttribute('data-bar-ink');
+      btnBarInk.style.backgroundColor = '';
+      this.builder.onChange();
     }); // Responsive
 
     bindDeviceRow(panel.querySelector('.div-target'), this.builder);
@@ -34142,6 +34207,35 @@ class PanelSection {
       btnGradient.style.backgroundImage = gradient; //preview
     } else {
       btnGradient.style.backgroundImage = '';
+    } // A navigation bar section: no height presets and no section tabs
+
+
+    panel.classList.toggle('cb-navbar-section', activeSection.classList.contains('is-section-navbar')); // Navigation Bar: only when the page's bar holds a plugin that reads the looks
+    // (one that says barLooks: true)
+
+    const btnAccordionBar = panel.querySelector('.btn-accordion-bar');
+    const runtime = this.builder.win.builderRuntime;
+    const barPlugins = this.builder.wrapperEl ? Array.from(this.builder.wrapperEl.querySelectorAll('.is-section-navbar [data-cb-type]')) : [];
+    const pageBar = !!runtime && barPlugins.some(el => {
+      const plugin = runtime.getPlugin(el.getAttribute('data-cb-type'));
+      return !!(plugin && plugin.barLooks);
+    });
+    const showBar = pageBar && !activeSection.classList.contains('is-section-navbar');
+    btnAccordionBar.classList.toggle('is-bar-off', !showBar);
+
+    if (showBar) {
+      const look = activeSection.getAttribute('data-bar') || '';
+      panel.querySelectorAll('[data-bar]').forEach(btn => btn.classList.toggle('on', btn.getAttribute('data-bar') === look));
+      panel.querySelector('.btn-barink').style.backgroundColor = activeSection.getAttribute('data-bar-ink') || ''; // Bar at the start: the top section only (the first section under the bar)
+
+      const top = Array.from(this.builder.wrapperEl.querySelectorAll('.is-section')).find(s => !s.closest('.is-section-navbar'));
+      const isTop = top === activeSection;
+      panel.querySelector('.barstart-row').style.display = isTop ? '' : 'none';
+
+      if (isTop) {
+        const start = activeSection.getAttribute('data-bar-start') || '';
+        panel.querySelectorAll('[data-barstart]').forEach(btn => btn.classList.toggle('on', btn.getAttribute('data-barstart') === start));
+      }
     }
 
     this.realtimeVisibility(activeSection, true);
@@ -34246,6 +34340,13 @@ class PanelSection {
 
   static css() {
     return `
+.btn-accordion-bar.is-bar-off,
+.btn-accordion-bar.is-bar-off + .accordion-content ,
+.cb-navbar-section .div-section-height,
+.cb-navbar-section > .accordion-item,
+.cb-navbar-section > .accordion-content {
+    display: none !important;
+}
 .cb-sectionanim .cb-anim-note {
     font-size: 11.5px;
     line-height: 1.5;
@@ -43492,6 +43593,18 @@ class ControlPanel {
         // elmTool, whose duplicate/delete/move actions would let a user
         // restructure a generated layer.
         this.builder.editor.inspectedElement = overlayTarget.element;
+      } else if (this.overlayIcon(e.target)) {
+        // An icon in overlay text opens the Icon panel.
+        this.builder.editor.inspectedElement = e.target;
+      } else {
+        // A plugin in the box overlay opens its own panel (Section > Box > the
+        // plugin), like overlay text. Its editable parts and content areas are
+        // edited where they are.
+        const plugin = e.target.closest ? e.target.closest('.is-overlay-content [data-cb-type]') : null;
+
+        if (plugin && !e.target.closest('.is-container') && !e.target.closest('.is-subblock')) {
+          this.builder.editor.inspectedElement = plugin;
+        }
       }
 
       if (old) old.call(this);
@@ -43636,8 +43749,92 @@ class ControlPanel {
     this.builder.editor.controlpanel = this; // This overide ContentBuilder controlpanel object
 
     this.bindEscape();
+    this.bindLayerPassThrough();
     this.showTooltip();
   }
+  /**
+   * Clicks go through overlay layers that are faded out.
+   *
+   * A crossfade keeps every layer stacked at full size and only turns the
+   * hidden ones transparent, so a click on the text you can see lands on an
+   * invisible layer above it: an empty wrapper gets selected, or the caret
+   * goes into text that is not on screen. hitTest() already sees through
+   * these for the overlay panel; this does the same for the browser's own
+   * hit test, which is what places the caret in a .is-container.
+   *
+   * Marks only exist under the pointer and are recomputed on every move and
+   * scroll, so a layer that fades back in is clickable again. A faded layer
+   * is only passed through when something visible lies below it; a stack
+   * scrubbed to a moment where everything is faded stays selectable.
+   * The marker is stripped from the saved HTML in html().
+   */
+
+
+  bindLayerPassThrough() {
+    if (!this.passThroughHandler) {
+      let frame = 0;
+      let x = -1,
+          y = -1;
+
+      const update = () => {
+        frame = 0;
+        this.updateLayerPassThrough(x, y);
+      };
+
+      this.passThroughHandler = e => {
+        if (typeof e.clientX === 'number') {
+          x = e.clientX;
+          y = e.clientY;
+        }
+
+        if (e.type === 'pointerdown') {
+          // a touch has no move before it
+          update();
+          return;
+        }
+
+        if (!frame) frame = this.builder.win.requestAnimationFrame(update);
+      };
+    }
+
+    const types = ['pointermove', 'pointerdown', 'scroll'];
+    if (this.passThroughDoc) types.forEach(type => this.passThroughDoc.removeEventListener(type, this.passThroughHandler, true));
+    this.passThroughDoc = this.builder.doc;
+    if (this.passThroughDoc) types.forEach(type => this.passThroughDoc.addEventListener(type, this.passThroughHandler, true));
+  }
+
+  updateLayerPassThrough(x, y) {
+    const doc = this.builder.doc;
+    if (!doc || !doc.elementsFromPoint) return;
+    doc.querySelectorAll('[data-overlay-passthrough]').forEach(elm => {
+      elm.removeAttribute('data-overlay-passthrough');
+    });
+    if (x < 0) return;
+    const selector = this.builder.overlayEditableSelector;
+    const stack = doc.elementsFromPoint(x, y);
+    stack.forEach((el, i) => {
+      const overlay = el.closest(selector); // Faded counts through the ancestors: text in a layer that is
+      // faded out as a whole is painted itself, yet invisible.
+
+      if (!overlay || el === overlay || this.isVisibleIn(el, overlay)) return;
+      const covered = stack.slice(i + 1).some(below => overlay.contains(below) && below !== overlay && !el.contains(below) && this.isLayerContent(below) && this.isVisibleIn(below, overlay));
+      if (covered) el.setAttribute('data-overlay-passthrough', '');
+    });
+  } // Something a click is meant for: text, a picture, or a media element.
+
+
+  isLayerContent(el) {
+    return this.builder.hasOwnText(el) || el.matches('img,video,iframe,svg,a,button') || this.hasBackgroundImage(el);
+  } // Painted itself and through every ancestor up to the overlay.
+
+
+  isVisibleIn(el, overlay) {
+    for (let node = el; node && node !== overlay; node = node.parentElement) {
+      if (!this.isPainted(node)) return false;
+    }
+
+    return true;
+  }
   /**
    * Escape closes the open dialog (Element, Icons, Shadow, Image Adjust,
    * Group, Block Options, Symbols, Settings).
@@ -43987,6 +44184,8 @@ class ControlPanel {
     if (el.closest('[data-html]')) return null; // code/module block — has its own editor
 
     if (el.closest('[data-cb-type]')) return null; // plugin — panel-plugin owns it
+
+    if (this.overlayIcon(el)) return null; // icon in a text — the Icon panel owns it
     // Text of an overlay layer. Resolve upward: a click can land on a
     // <b>/<span> inside the region, which is not itself a region.
 
@@ -44177,7 +44376,8 @@ class ControlPanel {
       const el = stack[i];
 
       if (match(el)) {
-        if (this.isPainted(el)) return el; // Crossfade stacks (three images or three captions at the same
+        const overlay = el.closest(this.builder.overlayEditableSelector);
+        if (overlay ? this.isVisibleIn(el, overlay) : this.isPainted(el)) return el; // Crossfade stacks (three images or three captions at the same
         // spot, cycled by opacity keyframes) put a FULLY TRANSPARENT
         // layer on top for most of the scene. Stacking order would hand
         // back that one every time, so the user edits a layer they
@@ -44226,7 +44426,7 @@ class ControlPanel {
       activeElement = this.resolvedImage;
     }
 
-    if (activeElement && this.overlayTarget(activeElement)) {
+    if (activeElement && (this.overlayTarget(activeElement) || this.overlayIcon(activeElement))) {
       this.activeElement = activeElement;
       this.activeColumn = null;
       this.activeRow = null;
@@ -44350,7 +44550,7 @@ class ControlPanel {
     } // Overlay content has no row/column to walk back up to.
 
 
-    if (selection === 'element' && (this.overlayTarget(this.activeElement) || this.activeElement.closest('[data-cb-type]') && this.activeElement.closest('.is-overlay-content'))) {
+    if (selection === 'element' && (this.overlayTarget(this.activeElement) || this.overlayIcon(this.activeElement) || this.activeElement.closest('[data-cb-type]') && this.activeElement.closest('.is-overlay-content'))) {
       breadcrumbHtml = `<div>${section} ${sep} ${box} ${sep}</div>`;
     }
 
@@ -44424,6 +44624,8 @@ class ControlPanel {
   sectionHeightAllowed() {
     const section = this.builder.activeSection;
     if (!section || !section.classList.contains('is-box')) return true;
+    if (section.classList.contains('is-section-navbar')) return false; // a navigation bar has no height presets
+
     const el = section.querySelector('.is-overlay-content [data-cb-type]');
     if (!el) return true;
     const runtime = this.builder.win.builderRuntime;
@@ -44601,6 +44803,25 @@ class ControlPanel {
       elm.removeAttribute('data-overlay-select');
     });
     if (el) el.setAttribute('data-overlay-select', '');
+  } // A plugin placed in an overlay (eg. a header bar's Site Menu or Site Logo).
+  // Like an overlay target it has no cell/row outline, so it gets the same mark.
+
+
+  overlayPlugin(el) {
+    if (!el || !el.closest) return null;
+    const plugin = el.closest('[data-cb-type]');
+    if (!plugin || !plugin.closest(this.builder.overlayEditableSelector)) return null;
+    if (plugin.closest('.is-container')) return null;
+    return plugin;
+  } // An icon (<i class="bi ...">) in an overlay, eg. at the start of a chip's text. It opens the
+  // Icon panel, so it can be changed, while a click on the words still opens the Text panel.
+
+
+  overlayIcon(el) {
+    if (!el || !el.matches || !el.matches('i.bi, i.icon') || el.innerHTML !== '') return null;
+    if (!el.closest(this.builder.overlayEditableSelector)) return null;
+    if (el.closest('.is-container, [data-html], [data-cb-type]')) return null;
+    return el;
   } // Is `el` (or an ancestor of it) a button?
   //
   // A <button> always is. An <a> is a button when it lays itself out as a
@@ -44683,7 +44904,16 @@ class ControlPanel {
 
     if (what === 'element' && this.activeElement) {
       const overlayNow = this.overlayTarget(this.activeElement);
-      if (overlayNow) marked = overlayNow.element;else if (this.pictureOnlyElement(this.activeElement)) marked = this.activeElement;
+      if (overlayNow) marked = overlayNow.element;else if (this.pictureOnlyElement(this.activeElement)) marked = this.activeElement;else marked = this.overlayPlugin(this.activeElement) || this.overlayIcon(this.activeElement);
+    } // An overlay icon stays the editor's active icon only while it is selected; otherwise
+    // a later icon insert would replace it.
+
+
+    const activeIcon = this.builder.editor.activeIcon;
+
+    if (activeIcon && activeIcon !== marked && this.overlayIcon(activeIcon)) {
+      activeIcon.classList.remove('icon-active');
+      this.builder.editor.activeIcon = null;
     }
 
     this.markOverlaySelection(marked);
@@ -44834,6 +45064,9 @@ class ControlPanel {
           this.panelIframe.classList.add('active');
           this.objPanelIframe.getState();
         } else if (element.tagName.toLowerCase() === 'i' && (element.classList.contains('icon') || element.classList.contains('bi'))) {
+          // In a container ContentBuilder's click makes it the active icon; an overlay
+          // icon gets no such click, so name it here (Change icon replaces this one).
+          if (this.overlayIcon(element)) this.builder.editor.activeIcon = element;
           let titleHtml = out('Icon');
           this.title.innerHTML = titleHtml;
           this.panelIcon.classList.add('active');
@@ -44966,8 +45199,10 @@ class ControlPanel {
     // should animate exposes that as its own setting.
 
 
-    const isPlugin = what === 'element' && !!pluginOf(this.activeElement);
-    const canMotion = !isPlugin && (what === 'element' || what === 'column' || what === 'row' || what === 'container' || what === 'block' || what === 'box' || what === 'section');
+    const isPlugin = what === 'element' && !!pluginOf(this.activeElement); // An icon in overlay text moves with its line; only the line has Motion.
+
+    const isOverlayIcon = what === 'element' && !!this.overlayIcon(this.activeElement);
+    const canMotion = !isPlugin && !isOverlayIcon && (what === 'element' || what === 'column' || what === 'row' || what === 'container' || what === 'block' || what === 'box' || what === 'section');
 
     if (canMotion) {
       if (this.tab === 'motion') {
@@ -50657,6 +50892,10 @@ class ToolbarKeys {
    */
   _hold(container, control) {
     if (!control) return;
+
+    // Where the control was: if the command removes what it sat on, the caret
+    // goes to what took its place
+    const spot = (control.closest('.row, [data-cb-block]') || control).getBoundingClientRect();
     setTimeout(() => {
       // Not bailing when the container has gone: deleting the last column
       // takes the strip with it, and that is exactly when the focus needs
@@ -50714,8 +50953,10 @@ class ToolbarKeys {
         // A tick later again: emptying an area makes the editor put its
         // own button there, and that has not happened yet.
         setTimeout(() => {
-          const somewhere = this._somewhereUsable();
-          if (somewhere) somewhere.focus();
+          const somewhere = this._somewhereUsable(spot);
+          if (somewhere) somewhere.focus({
+            preventScroll: true
+          });
         }, 30);
       }
     }, 0);
@@ -50786,7 +51027,9 @@ class ToolbarKeys {
     // the trip to the toolbar after one button. Stay on it, so the next format
     // is a key away, and leave deliberately with Escape. Anything that claims
     // the focus for itself, a panel or a dialog, is left to do so.
+    // A mouse click (detail > 0) is left alone, so the mouse works as it always did.
     tool.addEventListener('click', e => {
+      if (e.detail > 0) return;
       const control = this._controlFrom(e, tool, BUTTONS);
       if (control) this._hold(tool, control);
     });
@@ -50928,13 +51171,26 @@ class ToolbarKeys {
    * go dead with the focus stuck on a strip. Falls back through what the editor
    * still calls active, then to the first column on the page.
    */
-  currentColumn() {
+  currentColumn(near) {
     // It has to be able to hold the focus. A locked column is still the active
     // one but cannot take it, and focusing it silently does nothing.
     const usable = el => el && el.isConnected && (el.isContentEditable || el.hasAttribute('tabindex')) ? el : null;
     const active = usable(this.builder.util.cellSelected()) || usable(this.builder.activeCol);
     if (active) return active;
     const rows = this.builder.doc.querySelectorAll(`${this.builder.opts.container} > *`);
+
+    // Near a place on screen (where a removed row was): the column that took its
+    // place, or the last one before it
+    if (near) {
+      let before = null;
+      for (const row of rows) {
+        const cell = ToolbarKeys.cells(row).find(usable);
+        if (!cell) continue;
+        if (cell.getBoundingClientRect().top >= near.top - 1) return cell;
+        before = cell;
+      }
+      if (before) return before;
+    }
     for (const row of rows) {
       const cell = ToolbarKeys.cells(row).find(usable);
       if (cell) return cell;
@@ -50948,8 +51204,8 @@ class ToolbarKeys {
    * editing away: in both the focus would otherwise land on the body, where no
    * key reaches the editor at all.
    */
-  _somewhereUsable() {
-    const column = this.currentColumn();
+  _somewhereUsable(near) {
+    const column = this.currentColumn(near);
     if (column) return column;
     const doc = this.builder.doc;
 
@@ -52122,6 +52378,18 @@ class Util$1 {
     // A toolbar button that opens a dialog often moves the focus first, so the
     // strip fills this in from the button actually used (toolbarkeys.js).
 
+    // Opened from a control inside the content iframe: this page never saw
+    // that mouse click, so the browser would ring the dialog's first control
+    // as if the keyboard had been used. Carry the opener's own state over.
+    let focusOpts;
+    if (opener && opener.tagName === 'IFRAME') {
+      try {
+        const inner = opener.contentDocument.activeElement;
+        if (!(inner && inner.matches(':focus-visible'))) focusOpts = {
+          focusVisible: false
+        };
+      } catch (e) {/* another origin */}
+    }
     if (overflowHidden) document.body.style.overflow = 'hidden';
     const handleKeyDown = e => {
       if (e.keyCode === 27) {
@@ -52139,11 +52407,11 @@ class Util$1 {
     modal.addEventListener('keydown', handleKeyDown);
     let content = modal.querySelector('.is-tab-content.active');
     if (content) {
-      content.focus();
+      content.focus(focusOpts);
       this.builder.tabs.setupTabKey(content);
     } else {
       this.setupTabKeys(modal);
-      modal.focus();
+      modal.focus(focusOpts);
     }
 
     // Land on a control rather than on the dialog itself: focus on the dialog
@@ -52163,7 +52431,7 @@ class Util$1 {
       const settled = modal.contains(held) && held !== modal && held.tagName !== 'IFRAME' && !held.classList.contains('is-tab-content');
       if (settled) return;
       const first = ToolbarKeys.firstControl(modal);
-      if (first) first.focus();
+      if (first) first.focus(focusOpts);
     }, 0);
 
     // A dialog whose content is an iframe, the asset picker, is a trap without
@@ -54192,6 +54460,7 @@ class Util$1 {
    * Placeholders substituted by export():
    *   [%CONTENT%]  the content HTML
    *   [%PLUGINS%]  runtime plugin registry (see getPluginRegistry)
+   *   [%PLUGINFOLDER%] runtime plugin folder (see getPluginFolder)
    *   [%PATH%]     base URL for runtime/asset references
    */
   getPageTemplate(framework) {
@@ -54229,7 +54498,8 @@ class Util$1 {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const runtime = new ContentBuilderRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     runtime.init();
     runtime.renderPageCss('.container');
@@ -54279,7 +54549,8 @@ class Util$1 {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const runtime = new ContentBuilderRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     runtime.init();
 </script>
@@ -54332,7 +54603,8 @@ class Util$1 {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const runtime = new ContentBuilderRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     runtime.init();
 </script>
@@ -54390,7 +54662,8 @@ class Util$1 {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const runtime = new ContentBuilderRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     runtime.init();
 </script>
@@ -54442,7 +54715,8 @@ class Util$1 {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const runtime = new ContentBuilderRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     runtime.init();
 </script>
@@ -54496,6 +54770,27 @@ class Util$1 {
     });
     return JSON.stringify(registry, null, 4);
   }
+
+  /*
+   * The runtime's plugin folder (pluginFolder in blank.html), as a JS string.
+   * Plugins used in the content load from it without being registered, so an
+   * exported page keeps them. A URL under the content frame's base becomes a
+   * [%PATH%] token, like the registry's URLs.
+   */
+  getPluginFolder() {
+    const win = this.builder.win;
+    let folder = '';
+    try {
+      folder = win.builderRuntime.settings.pluginFolder || '';
+    } catch (e) {/* no runtime in the content frame */}
+    let base = '';
+    try {
+      const href = win.location.href;
+      base = href.substring(0, href.lastIndexOf('/'));
+    } catch (e) {/* cross-origin content frame */}
+    if (base && folder.startsWith(base + '/')) folder = '[%PATH%]' + folder.substring(base.length);
+    return JSON.stringify(folder);
+  }
   getElementPosition(element) {
     const iframe = this.builder.iframe;
     let top, left;
@@ -54707,6 +55002,46 @@ class Util$1 {
         }      
         `;
   }
+
+  // Place a small tool (link/button tool) above its target. When the target sits at the
+  // top edge with no room above, put the tool beside it (right, then left), so it never
+  // lands on the element tool below the element. Below is the last resort.
+  // vTarget (optional, e.g. a selected icon inside a link) sets the vertical position.
+  // The tool must be displayed before this (its size is measured).
+  placeToolAbove(tool, target, vTarget) {
+    const hr = target.getBoundingClientRect();
+    const vr = (vTarget || target).getBoundingClientRect();
+    tool.style.top = vr.top + this.builder.win.pageYOffset - tool.offsetHeight - 3 + 'px';
+    tool.style.left = hr.left + target.offsetWidth * this.builder.opts.zoom - tool.offsetWidth + 'px';
+
+    // Measured, not computed: the tool can carry margins and a scale.
+    const t = tool.getBoundingClientRect();
+    if (t.top >= 0) return;
+    const moveTo = (left, top) => {
+      const c = tool.getBoundingClientRect();
+      tool.style.left = parseFloat(tool.style.left) + left - c.left + 'px';
+      tool.style.top = parseFloat(tool.style.top) + top - c.top + 'px';
+    };
+
+    // Horizontal room, kept clear of the row tool when it sits beside the target.
+    let minX = 0;
+    let maxX = this.builder.doc.documentElement.clientWidth;
+    const row = target.closest('.row');
+    const rowTool = row && row.querySelector(':scope > .is-row-tool');
+    if (rowTool && rowTool.offsetParent) {
+      const r = rowTool.getBoundingClientRect();
+      if (r.left >= hr.right) maxX = Math.min(maxX, r.left);else if (r.right <= hr.left) minX = Math.max(minX, r.right);
+    }
+    const gap = 8;
+    const sideTop = vr.top + vr.height / 2 - t.height / 2;
+    if (hr.right + gap + t.width <= maxX) {
+      moveTo(hr.right + gap, sideTop);
+    } else if (hr.left - gap - t.width >= minX) {
+      moveTo(hr.left - gap - t.width, sideTop);
+    } else {
+      moveTo(t.left, vr.bottom + gap);
+    }
+  }
 }
 class Dom {
   constructor(builder) {
@@ -77568,15 +77903,8 @@ class Hyperlink {
     }
     // /Button Stuff
 
-    let left, top;
-    top = link.getBoundingClientRect().top + this.builder.win.pageYOffset;
-    if (this.builder.activeIcon) top = this.builder.activeIcon.getBoundingClientRect().top + this.builder.win.pageYOffset;
-    left = link.getBoundingClientRect().left;
-    linkTool.style.display = 'flex';
-    const w = linkTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-    const h = linkTool.offsetHeight;
-    linkTool.style.top = top - h - 3 + 'px';
-    linkTool.style.left = left + link.offsetWidth * this.builder.opts.zoom - w + 'px';
+    linkTool.style.display = 'flex'; //to get the size, the tool must not be hidden (display:none)
+    this.builder.util.placeToolAbove(linkTool, link, this.builder.activeIcon);
     const handleLinkButtonClick = e => {
       const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       let elm = e.target;
@@ -77875,13 +78203,8 @@ class Button {
     // selecting the button, so the pencil is a second route to the same
     // panel and is left out.
     buttonTool.querySelector('.button-edit').style.display = this.builder.opts.onButtonEdit ? 'none' : '';
-    let top = activeButton.getBoundingClientRect().top + this.builder.win.pageYOffset;
-    let left = activeButton.getBoundingClientRect().left;
-    buttonTool.style.display = 'flex';
-    const w = buttonTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-    const h = buttonTool.offsetHeight;
-    buttonTool.style.top = top - h - 3 + 'px';
-    buttonTool.style.left = left + activeButton.offsetWidth * this.builder.opts.zoom - w + 'px';
+    buttonTool.style.display = 'flex'; //to get the size, the tool must not be hidden (display:none)
+    this.builder.util.placeToolAbove(buttonTool, activeButton);
   }
   hideTool() {
     if (this.buttonTool) this.buttonTool.style.display = '';
@@ -79078,7 +79401,10 @@ class Plugin {
     const handlePluginClick = e => {
       const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       let elm = e.target;
-      let elmRemoved = !document.contains(elm); // e.g. when deleting a card in card list plugin
+
+      // isConnected, not document.contains(): in iframe mode the click is in
+      // the content document, which this document never contains.
+      let elmRemoved = !elm.isConnected; // e.g. when deleting a card in card list plugin
 
       if (this.builder.doc.activeElement) {
         if (this.builder.doc.activeElement.closest('.is-modal')) {
@@ -79276,7 +79602,9 @@ class Plugin {
     const plugin = e.target.closest('[data-cb-type]');
     if (plugin) {
       this.builder.activePlugin = plugin;
-      if (!this.builder.isContentBox) {
+
+      // With a control panel, plugin settings open there instead.
+      if (!this.builder.controlPanel) {
         this.renderTool();
         this.pluginTool.style.display = 'flex';
         let _toolwidth = this.pluginTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
@@ -81552,6 +81880,10 @@ class Element {
       customcode = true;
       subblock = elm.closest('.is-subblock');
     }
+    if (elm.closest('[data-cb-code]')) {
+      // Independent code element: the whole block is the element
+      customcode = true;
+    }
     if (!customcode && !noedit && !_protected || subblock) {
       //previously this is commented: && !noedit && !_protected
 
@@ -103213,6 +103545,136 @@ function coverValue(cover, def) {
   return true;
 }
 
+/*
+  normalizer.js — the clean-output guarantee.
+
+  Runs after every mutation. It never changes the visible text; it only
+  reduces markup to the minimal equivalent form:
+
+    <strong>a</strong><strong>b</strong>       -> <strong>ab</strong>
+    <strong><strong>x</strong></strong>        -> <strong>x</strong>
+    <span style="color:red"><span style="font-size:18px">x</span></span>
+                                               -> one span, two properties
+    <span>x</span>                             -> x
+    <em></em>                                  -> (removed)
+
+  Because it preserves text content exactly, character-offset selection
+  bookmarks taken before normalization remain valid after it.
+*/
+const INLINE_TAGS = new Set(['SPAN', 'STRONG', 'B', 'EM', 'I', 'U', 'S', 'STRIKE', 'DEL', 'INS', 'SUB', 'SUP', 'CODE', 'MARK', 'A', 'SMALL', 'BIG', 'FONT', 'ABBR', 'Q', 'CITE', 'DFN', 'KBD', 'SAMP', 'VAR', 'TIME']);
+
+/* Identity signature: two inline elements with equal signatures are
+   interchangeable and can be merged. */
+function sig(el) {
+  const attrs = [];
+  for (const a of el.attributes) {
+    attrs.push(a.name === 'style' ? 'style=' + el.style.cssText : a.name + '=' + a.value);
+  }
+  return el.tagName + '|' + attrs.sort().join(';');
+}
+function isEmptyInline(el) {
+  if (el.textContent !== '' || el.querySelector(KEEPERS)) return false;
+  // An empty inline that carries a class typically renders its content via CSS
+  // rather than text — an icon font (<i class="bi bi-alarm">, <span
+  // class="material-icons">…</span>, fa-*, glyphicon). It is NOT truly empty,
+  // so never drop it. Bare leftover marks (<em></em>, <i></i>) have no class
+  // and are still removed.
+  if (el.getAttribute('class')) return false;
+  return true;
+}
+
+/* Does the page's CSS style this attribute-less span? A design can colour or
+   size "the span in this heading" from a stylesheet (.hero h1 span {...});
+   unwrapping it then changes how the text looks, which this file promises
+   never to do. Compared against the parent for inherited properties and
+   against the initial value for the rest. Without a live view (detached, or
+   a headless test) it is treated as unstyled, as before. */
+const INHERITED = ['color', 'fontSize', 'fontWeight', 'fontStyle', 'fontFamily', 'letterSpacing', 'textTransform', 'lineHeight'];
+function styledByCss(el) {
+  const parent = el.parentElement;
+  const win = el.ownerDocument && el.ownerDocument.defaultView;
+  if (!parent || !win || !el.isConnected || typeof win.getComputedStyle !== 'function') return false;
+  const cs = win.getComputedStyle(el);
+  const ps = win.getComputedStyle(parent);
+  for (const p of INHERITED) if (cs[p] !== ps[p]) return true;
+  if (cs.display && cs.display !== 'inline') return true;
+  if (cs.backgroundImage && cs.backgroundImage !== 'none') return true;
+  if (cs.backgroundColor && !/^(transparent|rgba\(0, 0, 0, 0\))$/.test(cs.backgroundColor)) return true;
+  if (cs.textDecorationLine && cs.textDecorationLine !== 'none') return true;
+  return false;
+}
+
+/* One bottom-up cleanup pass. Returns true if anything changed. */
+function pass(scope) {
+  let changed = false;
+  const els = Array.prototype.slice.call(scope.querySelectorAll('*')).reverse();
+  for (const el of els) {
+    if (!el.isConnected && !scope.contains(el)) continue;
+    if (el.closest && el.closest('[contenteditable="false"]')) continue;
+    if (!INLINE_TAGS.has(el.tagName)) continue;
+
+    /* 1. Drop empty inline elements */
+    if (isEmptyInline(el)) {
+      el.remove();
+      changed = true;
+      continue;
+    }
+
+    /* 2. Unwrap attribute-less spans (unless the page's CSS styles them) */
+    if (el.tagName === 'SPAN' && el.attributes.length === 0 && !styledByCss(el)) {
+      unwrap(el);
+      changed = true;
+      continue;
+    }
+
+    /* 3. Unwrap when an identical ancestor already covers this element */
+    let anc = el.parentNode;
+    let redundant = false;
+    while (isEl$1(anc) && anc !== scope && INLINE_TAGS.has(anc.tagName)) {
+      if (sig(anc) === sig(el)) {
+        redundant = true;
+        break;
+      }
+      anc = anc.parentNode;
+    }
+    if (redundant) {
+      unwrap(el);
+      changed = true;
+      continue;
+    }
+
+    /* 4. Merge with an identical previous sibling */
+    const prev = el.previousSibling;
+    if (isEl$1(prev) && sig(prev) === sig(el)) {
+      while (el.firstChild) prev.appendChild(el.firstChild);
+      el.remove();
+      changed = true;
+      continue;
+    }
+
+    /* 5. Collapse span-in-span single-child chains into one span.
+       The inner (more specific) properties win on conflict. */
+    if (el.tagName === 'SPAN' && el.childNodes.length === 1 && isEl$1(el.firstChild) && el.firstChild.tagName === 'SPAN') {
+      const inner = el.firstChild;
+      for (let i = 0; i < inner.style.length; i++) {
+        const prop = inner.style[i];
+        el.style.setProperty(prop, inner.style.getPropertyValue(prop));
+      }
+      inner.classList.forEach(c => el.classList.add(c));
+      if (!el.getAttribute('style')) el.removeAttribute('style');
+      unwrap(inner);
+      changed = true;
+    }
+  }
+  return changed;
+}
+function normalize(scope) {
+  let guard = 0;
+  while (pass(scope) && guard++ < 6) {/* repeat until stable */}
+  scope.normalize(); /* merge adjacent text nodes */
+  return scope;
+}
+
 /*
   formatter.js — inline formatting engine.
 
@@ -103479,7 +103941,9 @@ function strip(el, def) {
     unwrap(el);
     return;
   }
-  if (el.tagName === 'SPAN' && el.attributes.length === 0) unwrap(el);
+  /* Left bare: unwrap, unless the page's CSS styles it (a design's
+     ".hero h1 span" colour), which must survive clearing a size from it. */
+  if (el.tagName === 'SPAN' && el.attributes.length === 0 && !styledByCss(el)) unwrap(el);
 }
 
 /* Apply a style across a (non-collapsed) range. */
@@ -103544,115 +104008,6 @@ function removeStyle(root, range, def, opts) {
   return texts;
 }
 
-/*
-  normalizer.js — the clean-output guarantee.
-
-  Runs after every mutation. It never changes the visible text; it only
-  reduces markup to the minimal equivalent form:
-
-    <strong>a</strong><strong>b</strong>       -> <strong>ab</strong>
-    <strong><strong>x</strong></strong>        -> <strong>x</strong>
-    <span style="color:red"><span style="font-size:18px">x</span></span>
-                                               -> one span, two properties
-    <span>x</span>                             -> x
-    <em></em>                                  -> (removed)
-
-  Because it preserves text content exactly, character-offset selection
-  bookmarks taken before normalization remain valid after it.
-*/
-const INLINE_TAGS = new Set(['SPAN', 'STRONG', 'B', 'EM', 'I', 'U', 'S', 'STRIKE', 'DEL', 'INS', 'SUB', 'SUP', 'CODE', 'MARK', 'A', 'SMALL', 'BIG', 'FONT', 'ABBR', 'Q', 'CITE', 'DFN', 'KBD', 'SAMP', 'VAR', 'TIME']);
-
-/* Identity signature: two inline elements with equal signatures are
-   interchangeable and can be merged. */
-function sig(el) {
-  const attrs = [];
-  for (const a of el.attributes) {
-    attrs.push(a.name === 'style' ? 'style=' + el.style.cssText : a.name + '=' + a.value);
-  }
-  return el.tagName + '|' + attrs.sort().join(';');
-}
-function isEmptyInline(el) {
-  if (el.textContent !== '' || el.querySelector(KEEPERS)) return false;
-  // An empty inline that carries a class typically renders its content via CSS
-  // rather than text — an icon font (<i class="bi bi-alarm">, <span
-  // class="material-icons">…</span>, fa-*, glyphicon). It is NOT truly empty,
-  // so never drop it. Bare leftover marks (<em></em>, <i></i>) have no class
-  // and are still removed.
-  if (el.getAttribute('class')) return false;
-  return true;
-}
-
-/* One bottom-up cleanup pass. Returns true if anything changed. */
-function pass(scope) {
-  let changed = false;
-  const els = Array.prototype.slice.call(scope.querySelectorAll('*')).reverse();
-  for (const el of els) {
-    if (!el.isConnected && !scope.contains(el)) continue;
-    if (el.closest && el.closest('[contenteditable="false"]')) continue;
-    if (!INLINE_TAGS.has(el.tagName)) continue;
-
-    /* 1. Drop empty inline elements */
-    if (isEmptyInline(el)) {
-      el.remove();
-      changed = true;
-      continue;
-    }
-
-    /* 2. Unwrap attribute-less spans */
-    if (el.tagName === 'SPAN' && el.attributes.length === 0) {
-      unwrap(el);
-      changed = true;
-      continue;
-    }
-
-    /* 3. Unwrap when an identical ancestor already covers this element */
-    let anc = el.parentNode;
-    let redundant = false;
-    while (isEl$1(anc) && anc !== scope && INLINE_TAGS.has(anc.tagName)) {
-      if (sig(anc) === sig(el)) {
-        redundant = true;
-        break;
-      }
-      anc = anc.parentNode;
-    }
-    if (redundant) {
-      unwrap(el);
-      changed = true;
-      continue;
-    }
-
-    /* 4. Merge with an identical previous sibling */
-    const prev = el.previousSibling;
-    if (isEl$1(prev) && sig(prev) === sig(el)) {
-      while (el.firstChild) prev.appendChild(el.firstChild);
-      el.remove();
-      changed = true;
-      continue;
-    }
-
-    /* 5. Collapse span-in-span single-child chains into one span.
-       The inner (more specific) properties win on conflict. */
-    if (el.tagName === 'SPAN' && el.childNodes.length === 1 && isEl$1(el.firstChild) && el.firstChild.tagName === 'SPAN') {
-      const inner = el.firstChild;
-      for (let i = 0; i < inner.style.length; i++) {
-        const prop = inner.style[i];
-        el.style.setProperty(prop, inner.style.getPropertyValue(prop));
-      }
-      inner.classList.forEach(c => el.classList.add(c));
-      if (!el.getAttribute('style')) el.removeAttribute('style');
-      unwrap(inner);
-      changed = true;
-    }
-  }
-  return changed;
-}
-function normalize(scope) {
-  let guard = 0;
-  while (pass(scope) && guard++ < 6) {/* repeat until stable */}
-  scope.normalize(); /* merge adjacent text nodes */
-  return scope;
-}
-
 /*
   probe.js — non-mutating state inspection (queryCommandState done right).
 
@@ -144123,11 +144478,14 @@ class ContentBuilder {
     this.shortenOutput = false;
     output = pageTemplate.replace('[%CONTENT%]', html);
 
-    // [%PLUGINS%] - runtime plugin registry (must run before [%PATH%],
-    // the registry's URLs are emitted as [%PATH%] tokens)
+    // [%PLUGINS%], [%PLUGINFOLDER%] - runtime plugin registry and folder (must run
+    // before [%PATH%], their URLs are emitted as [%PATH%] tokens)
     if (output.indexOf('[%PLUGINS%]') !== -1) {
       output = output.replaceAll('[%PLUGINS%]', this.util.getPluginRegistry());
     }
+    if (output.indexOf('[%PLUGINFOLDER%]') !== -1) {
+      output = output.replaceAll('[%PLUGINFOLDER%]', this.util.getPluginFolder());
+    }
 
     // Custom
     if (options.replace) {
@@ -146867,6 +147225,9 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     });
     tmp.querySelectorAll('*').forEach(el => {
       el.removeAttribute('style');
+      // Text direction is the destination's too: Word marks every
+      // paragraph and run dir="RTL"/"LTR" in right-to-left documents.
+      el.removeAttribute('dir');
       if (el.classList && el.classList.length) {
         const kept = Array.prototype.filter.call(el.classList, c => keep.has(c));
         if (kept.length) el.setAttribute('class', kept.join(' '));else el.removeAttribute('class');
@@ -151889,6 +152250,7 @@ class Util {
    *   [%MAINCSS%]  page-level <style>
    *   [%SECTIONCSS%] per-section <style>
    *   [%PLUGINS%]  runtime plugin registry (see getPluginRegistry)
+   *   [%PLUGINFOLDER%] runtime plugin folder (see getPluginFolder)
    *   [%PATH%]     base URL for runtime/asset references
    */
 
@@ -151923,7 +152285,8 @@ class Util {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const libraryInstance = new ContentBoxRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     libraryInstance.init();
 </script>
@@ -151962,7 +152325,8 @@ class Util {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const libraryInstance = new ContentBoxRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     libraryInstance.init();
 </script>
@@ -151999,7 +152363,8 @@ class Util {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const libraryInstance = new ContentBoxRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     libraryInstance.init();
 </script>
@@ -152037,7 +152402,8 @@ class Util {
     // Registers available plugins (not yet loaded).
     // Scripts and styles are fetched only when the plugin is actually used in content.
     const libraryInstance = new ContentBoxRuntime({
-        plugins: [%PLUGINS%]
+        plugins: [%PLUGINS%],
+        pluginFolder: [%PLUGINFOLDER%]
     });
     libraryInstance.init();
 </script>
@@ -152102,6 +152468,36 @@ class Util {
     });
     return JSON.stringify(registry, null, 4);
   }
+  /*
+   * The runtime's plugin folder (pluginFolder in blank.html), as a JS string.
+   * Plugins used in the content load from it without being registered, so an
+   * exported page keeps them. A URL under the content frame's base becomes a
+   * [%PATH%] token, like the registry's URLs.
+   */
+
+
+  getPluginFolder() {
+    const win = this.builder.win;
+    let folder = '';
+
+    try {
+      folder = win.builderRuntime.settings.pluginFolder || '';
+    } catch (e) {
+      /* no runtime in the content frame */
+    }
+
+    let base = '';
+
+    try {
+      const href = win.location.href;
+      base = href.substring(0, href.lastIndexOf('/'));
+    } catch (e) {
+      /* cross-origin content frame */
+    }
+
+    if (base && folder.startsWith(base + '/')) folder = '[%PATH%]' + folder.substring(base.length);
+    return JSON.stringify(folder);
+  }
 
 }
 
@@ -166555,10 +166951,6 @@ class IframePanel {
       let screenMode = localStorage.getItem('_screenmode');
 
       if (localStorage.getItem('_screenmode')) {
-        if (!this.builder.controlPanel && this.builder.iframeSrc) {
-          if (screenMode === 'fullview') screenMode = 'desktop';
-        }
-
         this.builder.screenMode = screenMode;
         contentView.classList.add(screenMode);
       } else {
@@ -166646,8 +167038,22 @@ class IframePanel {
   // addBreakpoint) and authored tablet values while the user believed they were
   // authoring desktop. Scaling fullview the same way the device modes do puts the
   // viewport back in the desktop band, so no control needs to know about this.
+  // The topOffset setting in pixels. It is a CSS length ('55px', '3rem', 48), the same
+  // value the topspace CSS uses, so a unit other than px is resolved, not read as px.
 
 
+  topOffsetPx() {
+    const value = this.builder.topOffset;
+    if (value === undefined || value === null || value === '') return 55;
+    if (typeof value === 'number') return value;
+    const probe = document.createElement('div');
+    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;height:' + value;
+    document.body.appendChild(probe);
+    const px = probe.getBoundingClientRect().height;
+    probe.remove();
+    return px || parseInt(value) || 55;
+  }
+
   applyFullviewScale() {
     const contentView = this.contentView;
     if (!contentView || !this.editPanel) return;
@@ -166683,7 +167089,7 @@ class IframePanel {
 
 
     const hasTopSpace = this.builder.topSpace || document.body.classList.contains('topspace');
-    const topOffset = hasTopSpace ? parseInt(this.builder.topOffset) || 55 : 0;
+    const topOffset = hasTopSpace ? this.topOffsetPx() : 0;
     const scale = availableWidth / logicalWidth;
     const availableHeight = this.editPanel.clientHeight - topOffset;
     contentView.style.setProperty('--fullview-top', `${topOffset}px`);
@@ -166758,7 +167164,7 @@ class IframePanel {
 
 
     const hasTopSpace = this.builder.topSpace || document.body.classList.contains('topspace');
-    const topOffset = hasTopSpace ? parseInt(this.builder.topOffset) || 55 : 0; // A manual width drag writes an inline width and leaves the mode class alone, so
+    const topOffset = hasTopSpace ? this.topOffsetPx() : 0; // A manual width drag writes an inline width and leaves the mode class alone, so
     // that width is the frame the user asked for. Reading it is safe: it is an input
     // here, never something this method writes.
 
@@ -175921,6 +176327,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             outline-offset: -1px;
         }
 
+        /* A faded-out overlay layer covering visible content, under the pointer.
+           Clicks go through it. See ControlPanel.bindLayerPassThrough. */
+        .is-wrapper [data-overlay-passthrough] {
+            pointer-events: none !important;
+        }
+
         /* Hovering a row of the panel's layer list. Locates the element while
            leaving the selection outline alone. */
         .is-wrapper [data-overlay-hover] {
@@ -175931,13 +176343,20 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         /* An overlay layer is edited through the control panel, not in place, so
            a text I-beam here would promise a caret that never arrives. Regions
            that ARE directly editable inside an overlay (a plugin's .is-subblock,
-           which enableEditableRegions makes contentEditable) keep it. */
-        .is-wrapper ${this.overlayEditableSelector},
-        .is-wrapper ${this.overlayEditableSelector} * {
+           which enableEditableRegions makes contentEditable) keep it. Tool
+           buttons and .is-container islands (normal in-place content) are left
+           alone. :where() keeps this rule at the lowest specificity so it never
+           overrides another cursor rule. */
+        .is-wrapper :where(${this.overlayEditableSelector},
+            ${this.overlayEditableSelector} *:not(.is-tool, .is-tool *, .is-container, .is-container *)) {
             cursor: default;
         }
-        .is-wrapper ${this.overlayEditableSelector} [contenteditable="true"],
-        .is-wrapper ${this.overlayEditableSelector} [contenteditable="true"] * {
+        /* cursor is inherited: give the containers back the normal behaviour */
+        .is-wrapper :where(${this.overlayEditableSelector} .is-container) {
+            cursor: auto;
+        }
+        .is-wrapper :where(${this.overlayEditableSelector} [contenteditable="true"]:not(.is-container, .is-container *),
+            ${this.overlayEditableSelector} [contenteditable="true"]:not(.is-container, .is-container *) *) {
             cursor: text;
         }
 
@@ -176542,6 +176961,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         }
 
         i.bi, i.icon { display: inline-flex; }
+        /* As a flex box an icon ignores Bootstrap Icons' own vertical-align (on its ::before) and
+           sits higher than the text beside it. Put the same offset on the icon itself. */
+        i.bi { vertical-align: -.125em; }
 
         </style>`); // i.bi, i.icon { display: inline-flex; } => this makes icons more cursor friendly
 
@@ -178086,12 +178508,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             }
             e.stopImmediatePropagation();
             */
-            const answer = window.confirm(out('Do you want to open the link?'));
-
-            if (answer) {
-              window.open(url, '_blank');
-            }
-
+            // Editing: a click selects the link, it never leaves the page
             e.preventDefault();
           }
         }
@@ -178700,15 +179117,70 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     newArea = doc.body.innerHTML;
     this.editor.saveForUndo();
     const d = new Date();
-    newArea = newArea.replace('[%YEAR%]', d.getFullYear());
+    newArea = newArea.replace('[%YEAR%]', d.getFullYear()); // A navigation bar is a section that IS one, not any HTML that mentions the
+    // class (a section's own CSS may style itself relative to a bar above it).
+
+    const isNavbar = el => el.matches('.is-section-navbar, [data-cb-type="nav-menu"]') || !!el.querySelector('[data-cb-type="nav-menu"]'); // The site supplies its own menu above the content (setTopContentProvider,
+    // locked): it is the page's navigation, so a design's own bar is left out
+    // and the rest of the design (a header) goes in first, under the menu.
+
+
+    const lockedTop = Array.from(this.wrapperEl.children).filter(el => el.hasAttribute('data-top-locked'));
 
-    if (newArea.indexOf('is-section-navbar') !== -1 || newArea.indexOf('data-cb-type="nav-menu"') !== -1) {
+    if (lockedTop.length && Array.from(doc.body.children).some(isNavbar)) {
+      const tpl = document.createElement('template');
+      tpl.innerHTML = newArea; // The bar's text colour (the colour its design gives it over the header).
+
+      let barInk = '';
+      Array.from(tpl.content.children).filter(isNavbar).forEach(el => {
+        const m = /--bar-color:\s*var\(--bar-ink,\s*(rgba?\([^)]*\)|#[0-9a-fA-F]{3,8})\s*\)/.exec(el.outerHTML);
+        if (m && !barInk) barInk = m[1];
+        el.remove();
+      }); // The header was made with a bar floating over its top: say so, so the
+      // site's menu can float over it the same way, in the colour the header's
+      // own bar used there.
+
+      const header = Array.from(tpl.content.children).find(el => el.classList.contains('is-section'));
+
+      if (header) {
+        header.setAttribute('data-under-bar', '');
+        if (barInk && !header.hasAttribute('data-bar-rest-ink')) header.setAttribute('data-bar-rest-ink', barInk);
+      }
+
+      if (!tpl.content.children.length) {
+        this.editor.util.confirm(out('This site\'s menu is managed in the menu settings.'), () => {}, false, out('OK'), true);
+        return;
+      }
+
+      dom.appendHtml(lockedTop[lockedTop.length - 1], tpl.innerHTML, 'afterend');
+    } else if (Array.from(doc.body.children).some(isNavbar)) {
       // Insert first
       const sectionNavbar = this.wrapperEl.querySelector('.is-section-navbar');
 
       if (sectionNavbar) {
-        // let delConf = this.deleteConfirm;
+        // A design that brings its own bar together with other sections (a header):
+        // keep the page's bar and insert the rest, or replace the bar too.
+        const tpl = document.createElement('template');
+        tpl.innerHTML = newArea;
+        const newBar = Array.from(tpl.content.children).find(isNavbar);
+
+        if (newBar && tpl.content.children.length > 1) {
+          this.editor.util.confirm(out('This page already has a navigation bar.'), (keep, dismissed) => {
+            if (dismissed) return; // closed without choosing
+
+            if (keep) {
+              newBar.remove();
+              this.addIdea(tpl.innerHTML);
+            } else {
+              sectionNavbar.parentNode.removeChild(sectionNavbar);
+              this.addIdea(newArea);
+            }
+          }, true, out('Keep current'), true, 'Replace');
+          return;
+        } // let delConf = this.deleteConfirm;
         // this.editor.deleteConfirm = true;
+
+
         this.editor.util.confirm(out('Do you want to replace the current navigation bar?'), ok => {
           if (ok) {
             sectionNavbar.parentNode.removeChild(sectionNavbar);
@@ -178957,7 +179429,10 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     // }
 
     if (lastNewSection) {
-      this.refreshSectionAnim(lastNewSection);
+      // A template can bring several sections; a pinned one among them (not
+      // only the last) needs the full re-render that sets up its pin.
+      const anyPinned = Array.from(newSections).some(s => s.classList.contains('section-pin') || !!s.querySelector('.section-pin'));
+      this.refreshSectionAnim(lastNewSection, anyPinned);
       this.scrollTo(lastNewSection, 100);
     }
 
@@ -179223,15 +179698,19 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       const btnSectionUp = sectionTool.querySelector('.btn-move-section-up');
       const btnSectionDown = sectionTool.querySelector('.btn-move-section-down');
       const btnSectionRemove = sectionTool.querySelector('.btn-section-remove');
+      const btnSectionEdit = sectionTool.querySelector('.btn-section-edit');
 
       if (box.offsetHeight < 160) {
+        // Short section (e.g. a nav bar): room for two buttons, HTML and Remove
         btnSectionUp.style.display = 'none';
         btnSectionDown.style.display = 'none';
-        btnSectionRemove.style.display = 'none';
+        if (btnSectionEdit) btnSectionEdit.style.display = 'none';
+        btnSectionRemove.style.display = '';
         sectionTool.style.top = '17px'; //'calc(50% - 17px)';
       } else {
         btnSectionUp.style.display = '';
         btnSectionDown.style.display = '';
+        if (btnSectionEdit) btnSectionEdit.style.display = '';
         btnSectionRemove.style.display = '';
       }
     } //new box tool
@@ -179914,7 +180393,16 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
     this.activeBox = null;
     if (this.editor) this.editor.activeBox = null;
-    this.activeSection = null; // Wait for IFRAME loaded
+    this.activeSection = null; // New content: whatever the control panel was showing belongs to the
+    // old page (e.g. after Clear Content), so return it to its empty state.
+
+    if (this.controlPanel && this.controlpanel) this.controlpanel.select(''); // ...and so do the floating tools on the page (the element tool).
+
+    if (this.editor && this.editor.util && this.editor.doc) {
+      this.editor.util.clearActiveElement();
+      this.editor.util.hideControls();
+    } // Wait for IFRAME loaded
+
 
     const wrapper = this.wrapperEl;
 
@@ -180350,9 +180838,10 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     // html.js attribute sweep: the attributes are ContentBox's, so the
     // cleanup belongs on this side.
 
-    clone.querySelectorAll('[data-overlay-select], [data-overlay-hover]').forEach(elm => {
+    clone.querySelectorAll('[data-overlay-select], [data-overlay-hover], [data-overlay-passthrough]').forEach(elm => {
       elm.removeAttribute('data-overlay-select');
       elm.removeAttribute('data-overlay-hover');
+      elm.removeAttribute('data-overlay-passthrough');
     });
   }
 
@@ -180823,11 +181312,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     let mainCss = this.mainCss(true);
     let sectionCss = this.sectionCss(true);
     output = output.replaceAll('[%MAINCSS%]', mainCss);
-    output = output.replaceAll('[%SECTIONCSS%]', sectionCss); // [%PLUGINS%] - runtime plugin registry (must run before [%PATH%],
-    // the registry's URLs are emitted as [%PATH%] tokens)
+    output = output.replaceAll('[%SECTIONCSS%]', sectionCss); // [%PLUGINS%], [%PLUGINFOLDER%] - runtime plugin registry and folder (must run
+    // before [%PATH%], their URLs are emitted as [%PATH%] tokens)
 
     if (output.indexOf('[%PLUGINS%]') !== -1) {
       output = output.replaceAll('[%PLUGINS%]', this.util.getPluginRegistry());
+    }
+
+    if (output.indexOf('[%PLUGINFOLDER%]') !== -1) {
+      output = output.replaceAll('[%PLUGINFOLDER%]', this.util.getPluginFolder());
     } // Custom