@innovastudio/contentbox 1.6.200 → 1.6.202

package/public/contentbox/contentbox.esm.js

@@ -11844,7 +11844,9 @@ class PanelText {
                     <button title="${out('Subscript')}" data-format="subscript"><span style="font-family:serif;font-size:13px;">x</span><sub style="font-size:10px;margin-bottom:-6px;">2</sub></button>
                 </div>
 
-                <div class="group flex">
+                <!-- 4 to 6 buttons, depending on the symbols and searchReplace
+                     options. Named so the scss can wrap it at six. -->
+                <div class="group flex inserts">
                     <button title="${out('Link')}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>
                     <button title="${out('Image')}" class="btn-image"><svg><use xlink:href="#icon-image"></use></svg></button>
                     <button title="${out('Icon')}" class="btn-icon"><svg><use xlink:href="#icon-mood-smile"></use></svg></button>
@@ -12449,7 +12451,7 @@ class PanelText {
       label: `<h6 style="margin:0;line-height:1.6;font-size:13px;">${out('Heading')} 6</h6>`
     }, {
       value: 'p',
-      label: `<p style="margin:2px 0 0;line-height:1.6;font-size:12px;">${out('Paragraph')}</p>`
+      label: `<p style="margin:0;line-height:1.6;font-size:12px;">${out('Paragraph')}</p>`
     }, {
       value: 'div',
       label: '<div style="margin:0;line-height:1.6;font-size:12px;">div</div>'
@@ -15505,10 +15507,12 @@ class PanelButton {
     const inpHref = panel.querySelector('.inp-href');
     inpHref.addEventListener('input', () => {
       this.edit(btn => setHref$1(btn, inpHref.value), false);
+      this.syncLinkDialog();
     });
     const chkNewTab = panel.querySelector('.chk-newtab');
     chkNewTab.addEventListener('change', () => {
       this.edit(btn => setNewTab$1(btn, chkNewTab.checked), false);
+      this.syncLinkDialog();
     }); // --- Colours ---
 
     panel.querySelectorAll('[data-colorstate]').forEach(btn => {
@@ -15578,6 +15582,20 @@ class PanelButton {
       this.getState();
       this.repositionTools();
     }
+  } // ContentBuilder's link dialog edits the same href/target and can be open
+  // alongside this panel. It reads its fields when it opens, so without this
+  // its Ok would write back the link as it was before the panel touched it.
+  // (The other direction is the editor's own: see elementhyperlink.js.)
+
+
+  syncLinkDialog() {
+    const btn = this.target();
+    const modal = this.builder.editor.builderStuff.querySelector('.is-modal.createlink');
+    if (!btn || !modal || !modal.classList.contains('active')) return;
+    const url = modal.querySelector('.input-url');
+    if (url && document.activeElement !== url) url.value = btn.getAttribute('href') || '';
+    const newwindow = modal.querySelector('.input-newwindow');
+    if (newwindow) newwindow.checked = btn.getAttribute('target') === '_blank';
   } // Size and padding change the button's box, which leaves the floating
   // tools pointing at where it used to be.
 
@@ -17802,6 +17820,926 @@ class PanelPlugin {
 
 }
 
+/*
+    codesource.js
+    ------------------------------------------------------------------
+    The two pure helpers ContentBox needs for [data-cb-code] blocks. Derived
+    from ContentBuilder's codeelement.js, which also defines a CodeElement
+    editor class — ContentBox never instantiates that, so it is not carried
+    here. Named for what this file is, not for where it came from.
+
+    wrapCodeSource() is a string pre-pass. Call it on any HTML string about to
+    be inserted with createContextualFragment (which executes scripts). It
+    parses with DOMParser -- where scripts can never run -- and moves each
+    [data-cb-code] block's source into an inert <template data-source>, so
+    nothing has run by the time the content is in the DOM.
+*/
+const ATTR$1 = 'data-cb-code';
+const SEL$1 = '[' + ATTR$1 + ']';
+const TPL_SEL$1 = ':scope > template[data-source]';
+function escapeCodeSource$1(src) {
+  return src.replace(/<\/template>/gi, '<\\/template>');
+}
+/*
+    STRING PRE-PASS (inert).
+    Call this on any HTML *string* that is about to be inserted with
+    createContextualFragment (which executes scripts). It parses the string with
+    DOMParser -- where scripts can never run -- and moves each [data-cb-code]
+    block's source into an inert <template data-source>. After insertion nothing
+    has run; init()/render() brings them to life.
+
+    Exported standalone as well, so it can be used where no builder instance
+    exists yet (ContentBox injects content before creating the editor).
+*/
+
+function wrapCodeSource$1(html) {
+  if (!html) return html;
+  if (html.indexOf(ATTR$1) === -1) return html; // fast path
+
+  const parsed = new DOMParser().parseFromString(html, 'text/html');
+  parsed.querySelectorAll(SEL$1).forEach(block => {
+    // Already wrapped (round-trip within the editor) => skip
+    if (block.querySelector(TPL_SEL$1)) return; // Snippet form (data-src) is already inert => handled by init()
+
+    if (block.hasAttribute('data-src')) return; // The block's innerHTML IS the pristine source (what flatten() wrote)
+
+    const src = block.innerHTML;
+    block.innerHTML = '';
+    const tpl = parsed.createElement('template');
+    tpl.setAttribute('data-source', '');
+    tpl.innerHTML = escapeCodeSource$1(src);
+    block.appendChild(tpl);
+  });
+  return parsed.body.innerHTML;
+}
+/*
+    SOURCE MAPPING (live render -> template source).
+    ------------------------------------------------------------------
+    A code element keeps two copies of itself: the <template data-source>,
+    which is what gets saved, and the live render beside it, which is thrown
+    away on every save. An edit written to the render alone therefore
+    disappears the moment the page is saved.
+
+    These helpers find the node in the SOURCE that a live node was built from,
+    so an edit can be written to both.
+
+    The mapping is positional: the render IS the source, parsed. A node's path
+    of child indexes is the same in both -- except for <script> elements, which
+    render() deletes once they have run, and the block's own <template>, which
+    is never part of the render. Both are skipped on each side, so the two
+    walks stay in step.
+
+    A node that the running code created or rewrote has no counterpart, or one
+    holding something else. Those are NOT editable: the next render would
+    overwrite the edit anyway. codeSourceEditable() is that test, and the
+    panels use it to decide what they offer.
+*/
+// The code element `el` belongs to, or null.
+
+function codeElementOf(el) {
+  if (!el || !el.closest) return null;
+  return el.closest(SEL$1);
+} // Element children as the RENDER sees them.
+
+function renderedChildren(parent) {
+  return Array.prototype.filter.call(parent.children, child => {
+    const tag = child.tagName.toLowerCase();
+    if (tag === 'script') return false; // deleted after running
+
+    if (tag === 'template' && child.hasAttribute('data-source')) return false; // the source itself
+
+    return true;
+  });
+} // The node in the block's source that this live node came from, or null.
+
+
+function codeSourceNodeFor(el) {
+  const block = codeElementOf(el);
+  if (!block || el === block) return null;
+  const tpl = block.querySelector(TPL_SEL$1);
+  if (!tpl || !tpl.content) return null; // Path from the block down to `el`.
+
+  const path = [];
+
+  for (let node = el; node && node !== block; node = node.parentElement) {
+    const parent = node.parentElement;
+    if (!parent) return null; // detached
+
+    const index = renderedChildren(parent).indexOf(node);
+    if (index === -1) return null;
+    path.unshift({
+      index: index,
+      tag: node.tagName
+    });
+  }
+
+  if (!path.length) return null; // The same walk through the source.
+
+  let node = tpl.content;
+
+  for (let i = 0; i < path.length; i++) {
+    node = renderedChildren(node)[path[i].index];
+    if (!node) return null;
+    if (node.tagName !== path[i].tag) return null; // the code rebuilt this part
+  }
+
+  return node;
+} // May an edit to this live node be written back to the source?
+
+function codeSourceEditable(el) {
+  const block = codeElementOf(el);
+  if (!block) return true; // not a code element's business
+
+  if (el === block) return true; // the block itself is ordinary markup, saved as it is
+
+  const src = codeSourceNodeFor(el);
+  if (!src) return false; // It must still hold what the source says it holds. Where the code rewrote
+  // it (a clock's own text, a lazily swapped image) an edit here would be
+  // undone by the next render, so it is not offered at all.
+
+  if (src.innerHTML !== el.innerHTML) return false;
+  if (el.tagName === 'IMG' && src.getAttribute('src') !== el.getAttribute('src')) return false;
+  return true;
+}
+/*
+    Write an edit made to the live node into its source counterpart, so it
+    survives the save. A no-op (returns false) for anything outside a code
+    element, or for a node the code built itself.
+
+    `spec` names what to carry over, and only that:
+        { html: true }              the node's content
+        { attrs: ['src','alt'] }    those attributes
+        { styles: ['background-image'] }  those inline style properties
+        { fx: true }                every data-fx-* attribute
+
+    Deliberately never the whole element: a running script and the motion
+    runtime both write to the live node (ids, aria state, inline transforms),
+    and none of that belongs in the saved source.
+*/
+
+function syncToCodeSource(el, spec) {
+  if (!el || !spec) return false;
+  const src = codeSourceNodeFor(el);
+  if (!src) return false;
+  if (spec.html) src.innerHTML = el.innerHTML;
+  if (spec.attrs) spec.attrs.forEach(name => {
+    const value = el.getAttribute(name);
+    if (value === null) src.removeAttribute(name);else src.setAttribute(name, value);
+  });
+  if (spec.styles) spec.styles.forEach(prop => {
+    src.style.setProperty(prop, el.style.getPropertyValue(prop), el.style.getPropertyPriority(prop));
+  });
+
+  if (spec.fx) {
+    Array.prototype.slice.call(src.attributes).forEach(attr => {
+      if (attr.name.indexOf('data-fx-') === 0) src.removeAttribute(attr.name);
+    });
+    Array.prototype.slice.call(el.attributes).forEach(attr => {
+      if (attr.name.indexOf('data-fx-') === 0) src.setAttribute(attr.name, attr.value);
+    });
+  }
+
+  return true;
+}
+
+/*
+ * motion-presets.js — the declarative vocabulary of the Motion panel.
+ *
+ * Everything the Motion UI can apply lives here as DATA, so adding a new
+ * effect is a table edit, never a code edit. Nothing in this file touches
+ * the DOM or the builder.
+ *
+ * Three kinds of thing, because Kinetra genuinely has three:
+ *
+ *   1. RECIPES     — canned percent keyframes (data-fx-0 … data-fx-100).
+ *                    "Fade up", "Zoom in", "Wipe in". These are just a
+ *                    starting set of keyframes; the Motion dock (phase 2)
+ *                    edits them freely afterwards.
+ *   2. PRESETS     — single-attribute effects that are NOT keyframes:
+ *                    parallax, horizontal, split, typewriter, draw, marquee.
+ *                    Each is identified by one "key" attribute.
+ *   3. POINTER     — micro-interactions (tilt, magnetic). Not scene-bound
+ *                    at all; they are per-element toggles.
+ *
+ * Option types:
+ *   'text'   — free text input, written verbatim to the attribute
+ *   'select' — dropdown; value written to the attribute
+ *   'toggle' — VALUELESS boolean attribute (present / absent)
+ */
+
+/* Ease names are NOT listed here. motion-ease.js derives them from kinetra's
+ * exported `easings` table, so there is exactly one source of truth and a copy
+ * can't drift when someone adds or renames a curve. */
+
+/* ------------------------------------------------------------------
+ * 1. KEYFRAME RECIPES
+ *
+ * `frames` maps percent -> declaration string. Applying a recipe REPLACES
+ * every existing data-fx-N on the element (a recipe is a fresh start, not
+ * an overlay), and sets data-fx-ease.
+ *
+ * Compound-string rule: both ends of a clip-path/box-shadow/etc. must share
+ * the same token count, or Kinetra snaps instead of tweening. Every recipe
+ * below already obeys that — keep it that way when adding new ones.
+ * ------------------------------------------------------------------ */
+const RECIPES = [{
+  id: 'fade',
+  duration: 0.6,
+  label: 'Fade in',
+  ease: 'easeOut',
+  frames: {
+    0: 'opacity:0',
+    100: 'opacity:1'
+  }
+}, {
+  id: 'fade-up',
+  duration: 0.6,
+  label: 'Fade up',
+  ease: 'smooth',
+  // kinetra's closest match to CSS ease-in-out
+  frames: {
+    0: 'opacity:0; transform:translateY(70px)',
+    // .is-fadeInUp was 70px
+    100: 'opacity:1; transform:translateY(0px)'
+  }
+}, {
+  id: 'fade-down',
+  duration: 0.6,
+  label: 'Fade down',
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:translateY(-70px)',
+    100: 'opacity:1; transform:translateY(0px)'
+  }
+}, {
+  id: 'fade-left',
+  duration: 0.6,
+  label: 'From left',
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:translateX(-70px)',
+    100: 'opacity:1; transform:translateX(0px)'
+  }
+}, {
+  id: 'fade-right',
+  duration: 0.6,
+  label: 'From right',
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:translateX(70px)',
+    100: 'opacity:1; transform:translateX(0px)'
+  }
+}, {
+  id: 'zoom-in',
+  duration: 0.8,
+  label: 'Zoom in',
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:scale(0.8)',
+    // .is-zoomIn was scale(.8)
+    100: 'opacity:1; transform:scale(1)'
+  }
+}, {
+  id: 'zoom-out',
+  duration: 0.8,
+  label: 'Zoom out',
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:scale(1.2)',
+    // .is-zoomOut was scale(1.2)
+    100: 'opacity:1; transform:scale(1)'
+  }
+}, {
+  id: 'slide-up',
+  duration: 0.6,
+  label: 'Slide up',
+  ease: 'smooth',
+  frames: {
+    0: 'transform:translateY(70px)',
+    100: 'transform:translateY(0px)'
+  }
+}, {
+  id: 'slide-down',
+  duration: 0.6,
+  label: 'Slide down',
+  ease: 'smooth',
+  frames: {
+    0: 'transform:translateY(-70px)',
+    100: 'transform:translateY(0px)'
+  }
+}, {
+  id: 'slide-left',
+  duration: 0.6,
+  label: 'Slide from left',
+  ease: 'smooth',
+  frames: {
+    0: 'transform:translateX(-70px)',
+    100: 'transform:translateX(0px)'
+  }
+}, {
+  id: 'slide-right',
+  duration: 0.6,
+  label: 'Slide from right',
+  ease: 'smooth',
+  frames: {
+    0: 'transform:translateX(70px)',
+    100: 'transform:translateX(0px)'
+  }
+}, {
+  id: 'blur-in',
+  duration: 0.6,
+  label: 'Blur in',
+  ease: 'easeOut',
+  frames: {
+    0: 'opacity:0; filter:blur(12px)',
+    100: 'opacity:1; filter:blur(0px)'
+  }
+}, {
+  id: 'flip-x',
+  label: 'Flip X',
+  duration: 0.8,
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:perspective(2500px) rotateX(100deg)',
+    100: 'opacity:1; transform:perspective(2500px) rotateX(0deg)'
+  }
+}, {
+  id: 'flip-y',
+  label: 'Flip Y',
+  duration: 0.8,
+  ease: 'smooth',
+  frames: {
+    0: 'opacity:0; transform:perspective(2500px) rotateY(100deg)',
+    100: 'opacity:1; transform:perspective(2500px) rotateY(0deg)'
+  }
+}, {
+  id: 'pulse',
+  label: 'Pulse',
+  duration: 0.6,
+  ease: 'linear',
+  frames: {
+    0: 'opacity:0; transform:scale(0.9)',
+    50: 'opacity:1; transform:scale(1.05)',
+    100: 'opacity:1; transform:scale(1)'
+  }
+}, {
+  id: 'bounce-in',
+  label: 'Bounce in',
+  duration: 0.6,
+  ease: 'linear',
+  frames: {
+    0: 'opacity:0; transform:translateX(0px)',
+    40: 'opacity:1; transform:translateX(-20px)',
+    60: 'opacity:1; transform:translateX(0px)',
+    80: 'opacity:1; transform:translateX(-15px)',
+    100: 'opacity:1; transform:translateX(0px)'
+  }
+}, {
+  id: 'wipe-right',
+  duration: 0.6,
+  label: 'Wipe in',
+  ease: 'expoOut',
+  frames: {
+    0: 'opacity:1; clip-path:inset(0% 100% 0% 0%)',
+    100: 'opacity:1; clip-path:inset(0% 0% 0% 0%)'
+  }
+}, {
+  id: 'rise-mask',
+  duration: 0.7,
+  label: 'Rise + mask',
+  ease: 'expoOut',
+  frames: {
+    0: 'opacity:0; transform:translateY(70px); clip-path:inset(100% 0% 0% 0%)',
+    100: 'opacity:1; transform:translateY(0px); clip-path:inset(0% 0% 0% 0%)'
+  }
+}, {
+  id: 'rotate-in',
+  duration: 0.6,
+  label: 'Rotate in',
+  ease: 'backOut',
+  frames: {
+    0: 'opacity:0; transform:rotate(-8deg) scale(0.94)',
+    100: 'opacity:1; transform:rotate(0deg) scale(1)'
+  }
+}, {
+  id: 'drift',
+  duration: 0.6,
+  label: 'Drift through',
+  ease: 'linear',
+  noCascade: true,
+  // a through-motion, not an entrance — pointless in a cascade
+  frames: {
+    0: 'transform:translateY(60px)',
+    100: 'transform:translateY(-60px)'
+  }
+}, {
+  id: 'hold-scale',
+  duration: 0.6,
+  label: 'Scale back + hold',
+  ease: 'linear',
+  note: 'Card-stack layer: shrinks as the next layer covers it.',
+  frames: {
+    0: 'transform:scale(1)',
+    50: 'transform:scale(0.9)',
+    100: 'transform:scale(0.9)'
+  }
+}];
+/* ------------------------------------------------------------------
+ * 2. SCROLL / TEXT PRESETS  (single-attribute effects)
+ * ------------------------------------------------------------------ */
+
+const PRESETS = [{
+  id: 'parallax',
+  label: 'Parallax',
+  group: 'scroll',
+  key: 'data-fx-parallax',
+  defaults: {
+    'data-fx-parallax': '120'
+  },
+  hint: 'Drifts as it scrolls. Works in any section.',
+  options: [{
+    attr: 'data-fx-parallax',
+    label: 'Travel',
+    type: 'text',
+    placeholder: '120 (px) or 20%'
+  }]
+}, {
+  id: 'horizontal',
+  label: 'Horizontal track',
+  group: 'scroll',
+  key: 'data-fx-horizontal',
+  pinnedOnly: true,
+  defaults: {
+    'data-fx-horizontal': ''
+  },
+  hint: 'Vertical scroll drives a sideways track. Needs a pinned scene, and children with flex:0 0 auto.',
+  options: []
+}, {
+  id: 'split',
+  label: 'Split text',
+  group: 'text',
+  key: 'data-fx-split',
+  defaults: {
+    'data-fx-split': 'words'
+  },
+  hint: 'Staggered word/char entrance. Formatting inside the element is preserved.',
+  options: [{
+    attr: 'data-fx-split',
+    label: 'Unit',
+    type: 'select',
+    choices: [['words', 'Words'], ['chars', 'Characters']]
+  }, {
+    attr: 'data-fx-split-mask',
+    label: 'Mask reveal',
+    type: 'toggle'
+  }, {
+    attr: 'data-fx-split-stagger',
+    label: 'Stagger',
+    type: 'text',
+    placeholder: '0.08 (sec)'
+  }, {
+    attr: 'data-fx-split-y',
+    label: 'Travel',
+    type: 'text',
+    placeholder: '115% or 18px'
+  }, {
+    attr: 'data-fx-split-scrub',
+    label: 'Scrub through scene',
+    type: 'toggle',
+    hint: 'Best in a pinned scene — units brighten in reading order as you scroll.'
+  }, {
+    attr: 'data-fx-split-from',
+    label: 'Dim opacity',
+    type: 'text',
+    placeholder: '0.12',
+    requires: 'data-fx-split-scrub'
+  }]
+}, {
+  id: 'typewriter',
+  label: 'Typewriter',
+  group: 'text',
+  key: 'data-fx-typewriter',
+  defaults: {
+    'data-fx-typewriter': ''
+  },
+  hint: 'The scrollbar types the text. Plain text only.',
+  options: [{
+    attr: 'data-fx-typewriter-until',
+    label: 'Done at',
+    type: 'text',
+    placeholder: '0.85 (progress)'
+  }]
+}, {
+  id: 'marquee',
+  label: 'Marquee',
+  group: 'text',
+  key: 'data-fx-marquee',
+  defaults: {
+    'data-fx-marquee': ''
+  },
+  hint: 'Drifting band. Content should be a repeating strip.',
+  options: [{
+    attr: 'data-fx-marquee-speed',
+    label: 'Speed',
+    type: 'text',
+    placeholder: '90 (px/sec)'
+  }, {
+    attr: 'data-fx-marquee-lean',
+    label: 'Lean with velocity',
+    type: 'toggle'
+  }]
+}, {
+  id: 'path',
+  label: 'Motion path',
+  group: 'scroll',
+  key: 'data-fx-path',
+  defaults: {
+    'data-fx-path': '-200,60; 0,-80; 200,60'
+  },
+  hint: 'Travels a smooth curve through waypoints. Edit the stops in the Motion dock; px offsets from the element\'s resting position.',
+  options: [{
+    attr: 'data-fx-path',
+    label: 'Waypoints',
+    type: 'text',
+    placeholder: 'x,y; x,y @tx,ty; …'
+  }, {
+    attr: 'data-fx-path-dwell',
+    label: 'Dwell',
+    type: 'text',
+    placeholder: '0.78 (0 = constant, 1 = stops)'
+  }, {
+    attr: 'data-fx-path-curve',
+    label: 'Curve',
+    type: 'text',
+    placeholder: '1 (0 = straight lines)'
+  }, {
+    attr: 'data-fx-path-rotate',
+    label: 'Auto-rotate along path',
+    type: 'toggle'
+  }, {
+    attr: 'data-fx-path-rotate',
+    label: 'Rotate offset',
+    type: 'text',
+    placeholder: '0 (deg; art faces right 0, up 90)',
+    requires: 'data-fx-path-rotate'
+  }]
+}, {
+  id: 'draw',
+  label: 'Draw SVG',
+  group: 'scroll',
+  key: 'data-fx-draw',
+  defaults: {
+    'data-fx-draw': ''
+  },
+  tags: ['svg', 'path'],
+  hint: 'Paths draw themselves as the scene scrubs. Put on an <svg> or a <path>.',
+  options: []
+}];
+/* ------------------------------------------------------------------
+ * 3. POINTER MICRO-INTERACTIONS
+ * ------------------------------------------------------------------ */
+
+const POINTER = [{
+  id: 'tilt',
+  label: 'Tilt',
+  key: 'data-fx-tilt',
+  defaults: {
+    'data-fx-tilt': ''
+  },
+  options: [{
+    attr: 'data-fx-tilt-max',
+    label: 'Max angle',
+    type: 'text',
+    placeholder: '14 (deg)'
+  }]
+}, {
+  id: 'magnetic',
+  label: 'Magnetic',
+  key: 'data-fx-magnetic',
+  defaults: {
+    'data-fx-magnetic': ''
+  },
+  options: [{
+    attr: 'data-fx-magnetic-strength',
+    label: 'Strength',
+    type: 'text',
+    placeholder: '0.35'
+  }]
+}];
+/* ------------------------------------------------------------------
+ * Helpers — every consumer of this table should go through these, so the
+ * "one system per element" and "attributes only" rules stay in one place.
+ * ------------------------------------------------------------------ */
+
+/* High-traffic legacy attributes. Mirrors LEGACY_PROBE in contentbox-effects.js:
+ * an element carrying any of these is owned by the old timeline and must not
+ * receive data-fx-*. */
+
+const LEGACY_PROBE = ['data-bottom-top', 'data-center', 'data-center-top', 'data-center-bottom', 'data-top', 'data-top-bottom', 'data-bottom', 'data-in', 'data-cen', 'data-out', 'data-t', 'data-t-100', 'data-t-200', 'data-t-300', 'data-t-400', 'data-t-500', 'data-t-600', 'data-t-700', 'data-t-800', 'data-t-900', 'data-t-1000', 'data-hidden-onstart', 'data-smooth-scrolling'];
+/* THE SECOND LEGACY SYSTEM.
+ *
+ * animatescroll.js's "On View" wizard never wrote attributes at all — it wrote
+ * CSS CLASSES, toggled at runtime by inViewSetup()'s IntersectionObserver. So
+ * an element can be legacy-animated while carrying no legacy attribute
+ * whatsoever, which means contentbox-effects' hasLegacyAttrs() guard sails
+ * straight past it. An element with both class="is-animated is-fadeInUp" and
+ * data-fx-0 would get animated TWICE, by two systems both writing transform
+ * and opacity.
+ *
+ * This list is lifted verbatim from animatescroll.js's cleanupBasic(). */
+
+const LEGACY_ONVIEW_CLASSES = ['is-animated', 'is-scale-animated', 'is-inview', 'once', 'is-fadeIn', 'is-fadeInUp', 'is-fadeInDown', 'is-fadeInLeft', 'is-fadeInRight', 'is-zoomIn', 'is-zoomOut', 'is-slideInUp', 'is-slideInDown', 'is-slideInLeft', 'is-slideInRight', 'is-flipInX', 'is-flipInY', 'is-pulse', 'is-bounceIn'];
+function hasLegacyOnView(el) {
+  if (!el || !el.classList) return false;
+  return el.classList.contains('is-animated') || el.classList.contains('is-scale-animated');
+}
+/** Strip every trace of the class-based system from one element. */
+
+function stripLegacyOnView(el) {
+  if (!el || !el.classList) return false;
+  let touched = false;
+  LEGACY_ONVIEW_CLASSES.forEach(c => {
+    if (el.classList.contains(c)) {
+      el.classList.remove(c);
+      touched = true;
+    }
+  }); // delay-0ms … delay-2000ms
+
+  Array.from(el.classList).forEach(c => {
+    if (/^delay-\d+ms$/.test(c)) {
+      el.classList.remove(c);
+      touched = true;
+    }
+  });
+  if (el.getAttribute('class') === '') el.removeAttribute('class');
+  return touched;
+}
+/** Any element the OLD systems own — attributes (skrollr) OR classes (on-view). */
+
+function hasLegacyMotion(el) {
+  if (!el || !el.hasAttribute) return false;
+  if (hasLegacyOnView(el)) return true;
+  if (LEGACY_PROBE.some(a => el.hasAttribute(a))) return true; // catch the whole data-t-N / data-xs-t-N / data-sm-t-N family
+
+  for (const attr of el.attributes) {
+    if (/^data-(xs-|sm-)?t(-\d+)?$/.test(attr.name)) return true;
+  }
+
+  return false;
+}
+/** Every data-fx-* attribute name currently on the element. */
+
+function fxAttrs(el) {
+  if (!el || !el.attributes) return [];
+  return Array.from(el.attributes).map(a => a.name).filter(n => n.startsWith('data-fx-'));
+}
+function hasMotion(el) {
+  return fxAttrs(el).some(n => n !== MUTE_ATTR);
+}
+/* ---- mute ----
+ *
+ * "Off" is an ATTRIBUTE, not editor memory. The tempting alternative — stash
+ * the data-fx-* attributes in JS, strip them from the DOM, restore on unmute —
+ * loses the user's animation the first time the editor autosaves while muted,
+ * because builder.html() serializes the DOM and the attributes aren't in it.
+ *
+ * As an attribute it survives save, undo, reload and hand-off; it's visible in
+ * the HTML so nobody is ever confused about why an animation isn't running;
+ * and it stops being a debug toggle and becomes a real feature ("turn this off
+ * but keep the setup"). It costs a few dead bytes in the published page.
+ *
+ * contentbox-effects._eligible() is the single gate every feature passes
+ * through, so one check there disables keyframes, split, typewriter, parallax,
+ * horizontal, draw, marquee, tilt and magnetic at once. On a .is-section it
+ * mutes the whole scene. */
+
+const MUTE_ATTR = 'data-fx-off';
+/* ---- scene attributes ----
+ *
+ * These live on the .is-section and describe the SCENE, not any element's own
+ * motion — so clearing an element must never touch them (a section is both).
+ *
+ * This list used to be copy-pasted into motion.js, panel-motion.js and
+ * motion-cascade.js. Then data-fx-duration and data-fx-once were added and only
+ * one copy learned about them, so "remove track" on a section quietly deleted
+ * the cascade's timing. One list, one place.
+ *
+ * ADDING A NEW SCENE ATTRIBUTE? It goes here, and in animation-framwork-ai.md.
+ */
+
+const SCENE_ATTRS = ['data-fx-length', // pinned: how much scroll the pin eats (vh)
+'data-fx-scrub', // seconds of catch-up lag, or "off" for time-driven
+'data-fx-start', // where progress 0 is
+'data-fx-end', // where progress 100 is
+'data-fx-duration', // seconds — the scene's own clock, when not scrubbing
+'data-fx-once', // don't replay on re-entry
+'data-fx-emit'];
+/* ---- what is NOT the user's content ----
+ *
+ * ContentBox injects its toolbars INTO the row, as siblings of the column:
+ *
+ *     div.row
+ *      ├ div.column                ← real content
+ *      ├ div.is-tool.is-row-tool   ← editor UI
+ *      ├ div.is-tool.is-col-tool   ← editor UI
+ *      └ div.is-rowadd-tool        ← editor UI
+ *
+ * So anything walking row.children sees toolbars as columns. They aren't empty
+ * — they hold buttons — so they pass every "does this cell have content?" test,
+ * and the cascade cheerfully animates the editor's own move/delete buttons.
+ *
+ * Kinetra also generates nodes (split-text spans, pinned-section clones). Those
+ * aren't content either.
+ *
+ * NOTE the deliberate absence of `.column` / `.row` here: those class names are
+ * user-configurable, so structure is read positionally and only the chrome is
+ * named. */
+
+const EDITOR_CHROME_SELECTOR = ['.is-tool', // row + column toolbars (contentbuilder's controlSelector)
+'.is-rowadd-tool', '.is-section-tool', '.is-box-tool', '.is-section-info'].join(',');
+/* NOT `.is-overlay-bg`. It is authored markup saved with the page, and it is
+ * where the parallax of most section templates lives — and where converting a
+ * legacy section writes its keyframes. Excluding it hid a section's most
+ * common animation from the timeline dock, which lists a scene's animated
+ * elements. It stays out of the ancestor picker and out of the cascade, but
+ * that is each of their own rule, not this one. */
+
+const NOT_CONTENT_SELECTOR = [EDITOR_CHROME_SELECTOR, '.kinetra-word', '.kinetra-char', '.kinetra-mask', '[data-section-clone]', '[data-fx-mirrors]'].join(',');
+/** Editor chrome or Kinetra-generated — never animate it, never list it. */
+
+function isNotContent(el) {
+  if (!el || el.nodeType !== 1 || !el.closest) return true;
+  return !!el.closest(NOT_CONTENT_SELECTOR); // closest → catches buttons *inside* a toolbar
+}
+function isMuted(el) {
+  return !!(el && el.hasAttribute && el.hasAttribute(MUTE_ATTR));
+}
+/** Percent keyframes on the element, sorted: [{ pct, value }] */
+
+function keyframesOf(el) {
+  if (!el || !el.attributes) return [];
+  const out = [];
+
+  for (const a of el.attributes) {
+    const m = /^data-fx-(\d{1,3})$/.exec(a.name);
+    if (!m) continue;
+    const pct = parseInt(m[1], 10);
+    if (pct < 0 || pct > 100) continue;
+    out.push({
+      pct,
+      value: a.value
+    });
+  }
+
+  return out.sort((x, y) => x.pct - y.pct);
+}
+/** Which preset (if any) is applied. Returns the preset object or null. */
+
+function activePreset(el, table) {
+  if (!el || !el.hasAttribute) return null;
+  return (table || PRESETS).find(p => el.hasAttribute(p.key)) || null;
+}
+/** Remove every data-fx-N keyframe (leaves presets and ease alone). */
+
+function clearKeyframes(el) {
+  for (const name of fxAttrs(el)) {
+    if (/^data-fx-\d{1,3}$/.test(name)) el.removeAttribute(name);
+  }
+}
+/** Remove one preset and all of its option attributes. */
+
+function clearPreset(el, preset) {
+  el.removeAttribute(preset.key);
+  (preset.options || []).forEach(o => {
+    if (o.attr !== preset.key) el.removeAttribute(o.attr);
+  });
+}
+/** Apply a keyframe recipe: replaces all existing keyframes. */
+
+function applyRecipe(el, recipe) {
+  clearKeyframes(el);
+  Object.keys(recipe.frames).forEach(pct => {
+    el.setAttribute('data-fx-' + pct, recipe.frames[pct]);
+  });
+  if (recipe.ease) el.setAttribute('data-fx-ease', recipe.ease);else el.removeAttribute('data-fx-ease');
+}
+/** Best-effort: which recipe do the current keyframes look like? */
+
+function matchRecipe(el) {
+  const frames = keyframesOf(el);
+  if (!frames.length) return null;
+
+  const norm = s => s.replace(/\s+/g, '').replace(/;$/, '').toLowerCase();
+
+  return RECIPES.find(r => {
+    const keys = Object.keys(r.frames);
+    if (keys.length !== frames.length) return false;
+    return keys.every(pct => {
+      const f = frames.find(x => x.pct === parseInt(pct, 10));
+      return f && norm(f.value) === norm(r.frames[pct]);
+    });
+  }) || null;
+}
+/* ---- Scene (section) helpers ---- */
+
+function isPinned(section) {
+  return !!(section && section.classList.contains('section-pin'));
+}
+const SCENE_DEFAULTS = {
+  length: '320',
+  // vh, pinned only
+  scrub: '0.25',
+  // seconds of catch-up lag
+  duration: '1',
+  // seconds — only read when NOT scrubbing
+  start: 'top bottom',
+  // end: 'bottom top',
+  end: 'bottom bottom'
+};
+/* The scene window, as a choice rather than a string.
+ *
+ * There are only two answers that matter:
+ *   - fully in view   — the entrance is the scene. Right for ~everything.
+ *   - leaves the screen — keep moving the whole time the section is on screen.
+ *     Right for drifting, parallax-like motion.
+ * Anything else is a fine-tune, and stays available as raw edge strings.
+ *
+ * NOTE: the window is IGNORED when the scene is time-driven (scrub="off") —
+ * an IntersectionObserver does the triggering there. */
+
+const SCENE_WINDOWS = [{
+  id: 'inview',
+  label: 'the section is fully in view',
+  start: 'top bottom',
+  end: 'bottom bottom'
+}, {
+  id: 'offscreen',
+  label: 'the section leaves the screen',
+  start: 'top bottom',
+  end: 'bottom top'
+}];
+function windowOf(section) {
+  if (!section) return 'inview';
+  const s = (section.getAttribute('data-fx-start') || '').trim();
+  const e = (section.getAttribute('data-fx-end') || '').trim();
+  if (!s && !e) return 'inview'; // no attributes = defaults
+
+  const m = SCENE_WINDOWS.find(w => (s === '' || s === w.start) && e === w.end);
+  return m ? m.id : 'custom';
+}
+function setWindow(section, id) {
+  if (!section) return;
+
+  if (id === 'inview') {
+    // the default — write nothing
+    section.removeAttribute('data-fx-start');
+    section.removeAttribute('data-fx-end');
+    return;
+  }
+
+  const w = SCENE_WINDOWS.find(x => x.id === id);
+  if (!w) return; // 'custom' — leave the strings alone
+
+  section.removeAttribute('data-fx-start'); // start default is already right
+
+  section.setAttribute('data-fx-end', w.end);
+}
+/* Which clock drives the scene. `data-fx-scrub="off"` is the switch:
+ * the scrollbar stops being the clock and the scene plays itself. */
+
+function triggerOf(section) {
+  if (!section) return 'scroll';
+  const v = (section.getAttribute('data-fx-scrub') || '').trim().toLowerCase();
+  return v === 'off' || v === 'none' || v === 'false' ? 'enter' : 'scroll';
+}
+/* The trigger a scene gets when nobody has chosen one.
+ *
+ * Note what this is NOT: it does not reinterpret a missing data-fx-scrub.
+ * The runtime's fallback for that attribute is scrub 0.25 (contentbox-effects
+ * sceneOptsFor), so a saved page with no trigger on it is scroll-driven and
+ * will stay that way. This is the value the editor WRITES the first time it
+ * gives a section motion — content made from now on plays on enter, content
+ * already out there keeps whatever it has. */
+
+const DEFAULT_TRIGGER = 'enter';
+/* Is anything in this section actually animated?
+ *
+ * Scene attributes don't count — data-fx-duration on a bare section describes
+ * a clock nothing is running on. What counts is an element's own motion:
+ * keyframes or a preset, on the section itself or anywhere inside it. */
+
+function sceneHasMotion(section) {
+  if (!section) return false;
+  const ownMotion = fxAttrs(section).some(n => n !== MUTE_ATTR && SCENE_ATTRS.indexOf(n) === -1);
+  if (ownMotion) return true;
+  return Array.from(section.querySelectorAll('*')).some(el => hasMotion(el));
+}
+
+// block's source for an anchor.
+
+const LINK_ATTRS = {
+  attrs: ['href', 'title', 'target']
+}; // Panel for elements that live in a BOX OVERLAY but outside div.is-container:
 //
 //   .is-section.is-box > .is-overlay > .is-overlay-content > ... > <img>
 //
@@ -17848,7 +18786,28 @@ class PanelOverlay {
 
                 <div class="inp-text" role="textbox"></div>
 
-                <div class="label-note mt-4">${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-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>
+
+            </div>
+
+            <div class="div-overlay-link" style="display:none">
+
+                <label class="label">
+                    <div>${out('Link')}:</div>
+                    <input type="text" class="inp-href" id="_inp_ovl_href_${this.random()}">
+                </label>
+
+                <label class="label mt-2">
+                    <div>${out('Title')}:</div>
+                    <input type="text" class="inp-linktitle" id="_inp_ovl_linktitle_${this.random()}">
+                </label>
+
+                <label class="label checkbox mt-3">
+                    <input type="checkbox" class="chk-newwindow" id="_chk_ovl_newwindow_${this.random()}">
+                    <span>${out('Open in new tab')}</span>
+                </label>
 
             </div>
 
@@ -17873,7 +18832,7 @@ class PanelOverlay {
                 </div>
 
                 <label class="label mt-2 label-title">
-                    <div>${out('Title')}:</div>
+                    <div>${out('Alt')}:</div>
                     <input type="text" class="inp-title" id="_inp_ovl_title_${this.random()}">
                 </label>
 
@@ -17881,6 +18840,15 @@ class PanelOverlay {
 
             </div>
 
+            <div class="div-overlay-code mt-4" style="display:none">
+                <div class="group single flex" style="width:100%">
+                    <button title="${out('Edit Code')}" class="btn-editcode">
+                        <svg><use xlink:href="#icon-viewcode"></use></svg>
+                        <span>${out('Edit Code')}</span>
+                    </button>
+                </div>
+            </div>
+
             <div class="div-overlay-list" style="display:none">
                 <div class="label-note list-caption">${out('Everything else in this layer')}:</div>
                 <div class="overlay-list"></div>
@@ -17926,13 +18894,70 @@ class PanelOverlay {
       }, btnOpenAsset);
     }); // Show/hide button
 
-    if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnOpenAsset.style.display = 'none';
+    if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnOpenAsset.style.display = 'none'; // --- Link ---
+    //
+    // These fields only ever EDIT an anchor that is already in the layer;
+    // nothing here creates one. Wrapping a layer's text or image in a link
+    // restructures the design, which is the same reason the floating image
+    // tool is reduced for overlay images (see controlpanel.js getActive).
+
+    const inpHref = panel.querySelector('.inp-href');
+    inpHref.addEventListener('input', () => {
+      const link = this.link();
+      if (!link) return;
+      this.builder.editor.saveForUndo();
+      const url = inpHref.value.trim();
+      if (url) link.setAttribute('href', url);else link.removeAttribute('href'); // emptied: no link, but the element stays as it is
+
+      syncToCodeSource(link, LINK_ATTRS);
+      this.builder.editor.onChange();
+    });
+    const inpLinkTitle = panel.querySelector('.inp-linktitle');
+    inpLinkTitle.addEventListener('input', () => {
+      const link = this.link();
+      if (!link) return;
+      this.builder.editor.saveForUndo();
+      const title = inpLinkTitle.value;
+      if (title) link.setAttribute('title', title);else link.removeAttribute('title');
+      syncToCodeSource(link, LINK_ATTRS);
+      this.builder.editor.onChange();
+    });
+    const chkNewWindow = panel.querySelector('.chk-newwindow');
+    chkNewWindow.addEventListener('change', () => {
+      const link = this.link();
+      if (!link) return;
+      this.builder.editor.saveForUndo(); // target alone, as the editor's own link dialog writes it
+      // (elementhyperlink.js).
+
+      if (chkNewWindow.checked) link.setAttribute('target', '_blank');else link.removeAttribute('target');
+      syncToCodeSource(link, LINK_ATTRS);
+      this.builder.editor.onChange();
+    }); // The layer is a code block: its markup is edited here, its code there.
+    // Without this the code is out of reach while one of its elements is
+    // selected, since the panel showing is this one, not the Code panel.
+
+    const btnEditCode = panel.querySelector('.btn-editcode');
+    btnEditCode.addEventListener('click', () => {
+      const el = this.target();
+      const block = el ? el.closest('[data-cb-code]') : null;
+      const codeElement = this.builder.editor.codeElement;
+      if (!block || !codeElement) return; // Applying the dialog rebuilds the block from its source, replacing
+      // the element this panel is on. Select the block first, so what the
+      // panel shows is still on the page when the dialog closes.
+
+      this.builder.controlpanel.selectOverlayElement(block);
+      codeElement.activeBlock = block;
+      codeElement.edit();
+    });
     const inpTitle = panel.querySelector('.inp-title');
     inpTitle.addEventListener('input', () => {
       this.builder.editor.saveForUndo();
       let img = this.target();
       if (!img) return;
       img.setAttribute('alt', inpTitle.value);
+      syncToCodeSource(img, {
+        attrs: ['alt']
+      });
       this.builder.editor.onChange();
     }); // --- Text ---
 
@@ -18012,7 +19037,14 @@ class PanelOverlay {
     const html = this.unwrapBlock(this.ed.getHTML());
     if (html === el.innerHTML) return;
     this.builder.editor.saveForUndo();
-    el.innerHTML = html;
+    el.innerHTML = html; // An element inside a code block lives in the block's RENDER, which is
+    // thrown away on save; the wording has to reach the block's source too.
+    // No-op everywhere else. (Elements the code built itself never get
+    // here: isOverlayTextElement refuses them.)
+
+    syncToCodeSource(el, {
+      html: true
+    });
     this.refreshRow(el);
     this.builder.editor.onChange();
   }
@@ -18026,6 +19058,41 @@ class PanelOverlay {
     }
 
     return html;
+  } // The anchor the current selection belongs to, or the single one inside it.
+  //
+  // Null where there is none, and null where the region holds SEVERAL: which
+  // of them the fields would then be editing is a guess, and a wrong guess
+  // rewrites a link the user was not looking at.
+
+
+  linkFor(el) {
+    if (!el || !el.closest) return null;
+    const scope = el.closest(this.builder.overlayEditableSelector);
+    if (!scope) return null;
+    let link = el.closest('a');
+    if (link && !scope.contains(link)) link = null;
+
+    if (!link) {
+      const inside = el.querySelectorAll('a');
+      if (inside.length === 1) link = inside[0];
+    }
+
+    if (!link) return null; // Inside a code block, only an anchor still verbatim in the block's
+    // source can be edited — the same rule as the wording.
+
+    if (!codeSourceEditable(link)) return null;
+    return link;
+  }
+
+  link() {
+    return this.linkFor(this.target());
+  }
+
+  getStateLink(link) {
+    const panel = this.panel;
+    panel.querySelector('.inp-href').value = link.getAttribute('href') || '';
+    panel.querySelector('.inp-linktitle').value = link.getAttribute('title') || '';
+    panel.querySelector('.chk-newwindow').checked = link.getAttribute('target') === '_blank';
   } // The element this panel is currently editing. ControlPanel keeps it in
   // activeElement, the same as every other panel.
 
@@ -18057,8 +19124,13 @@ class PanelOverlay {
         // selection lost (eg. the image got wrapped in a link)
         this.builder.controlpanel.select('');
         return;
-      }
+      } // The floating tool writes to the live element and knows nothing
+      // about code blocks; carry the change into the source as well.
+
 
+      syncToCodeSource(img, {
+        attrs: ['src', 'alt']
+      });
       this.getState();
     };
 
@@ -18070,6 +19142,10 @@ class PanelOverlay {
         return;
       }
 
+      const el = this.target();
+      if (el) syncToCodeSource(el, {
+        attrs: ['src', 'alt']
+      });
       this.getState();
     };
   } // `target` is the {type, element} descriptor from ControlPanel.overlayTarget().
@@ -18091,19 +19167,30 @@ class PanelOverlay {
     const hasText = target ? !!target.hasText : type === 'text';
     const hasSource = target ? !!target.hasSource : type !== 'text';
     const isImg = el.tagName.toLowerCase() === 'img';
-    this.sourceKind = isImg ? 'image' : 'background';
+    this.sourceKind = isImg ? 'image' : 'background'; // A link is an ASPECT too, and an independent one: a heading can be a
+    // link, so can an image, and so can an icon with neither text nor
+    // picture in it (which is why the decoration note steps aside for it).
+
+    const link = this.linkFor(el);
     const divText = this.panel.querySelector('.div-overlay-text');
+    const divLink = this.panel.querySelector('.div-overlay-link');
     const divImage = this.panel.querySelector('.div-overlay-image');
     const divDeco = this.panel.querySelector('.div-overlay-decoration');
     divText.style.display = hasText ? '' : 'none';
+    divLink.style.display = link ? '' : 'none';
     divImage.style.display = hasSource ? '' : 'none';
-    if (divDeco) divDeco.style.display = !hasText && !hasSource ? '' : 'none';
+    if (divDeco) divDeco.style.display = !hasText && !hasSource && !link ? '' : 'none';
     /* [FX-PATH] */
-    // Both on screen at once (an element painting its image inside its own
-    // letterforms): the second section needs separating from the first.
 
-    divImage.classList.toggle('stacked', hasText && hasSource);
+    if (link) this.getStateLink(link); // More than one section on screen at once (an element painting its image
+    // inside its own letterforms; a heading that is also a link): each one
+    // after the first needs separating from what precedes it.
+
+    divLink.classList.toggle('stacked', !!link && hasText);
+    divImage.classList.toggle('stacked', hasSource && (hasText || !!link));
     this.panel.querySelector('.label-title').style.display = isImg ? '' : 'none';
+    const divCode = this.panel.querySelector('.div-overlay-code');
+    divCode.style.display = this.builder.editor.codeElement && el.closest('[data-cb-code]') ? '' : 'none';
     if (hasText) this.getStateText(el);
     if (hasSource) this.getStateSource(el);
     this.renderList(el);
@@ -18219,11 +19306,28 @@ class PanelOverlay {
     if (!value || value === 'none') return '';
     const found = /url\((['"]?)(.*?)\1\)/.exec(value);
     return found ? found[2] : '';
+  } // Does this layer move on the Motion tab? Only then does the note that
+  // points at it say anything true: a layer can be a static caption, or a
+  // code block, or animate from CSS keyframes the tab has no part in.
+  // Resolved up the layer, since the keyframes are often on a wrapper.
+
+
+  layerHasMotion(el) {
+    const stop = el.closest(this.builder.overlayEditableSelector);
+
+    for (let node = el; node && node !== stop; node = node.parentElement) {
+      if (hasMotion(node)) return true;
+    }
+
+    return false;
   }
 
   getStateText(el) {
     const panel = this.panel;
-    if (!el) return; // Load the element's content into the field. Guarded so the write-back
+    if (!el) return;
+    const animated = this.layerHasMotion(el);
+    panel.querySelector('.note-motion').style.display = animated ? '' : 'none';
+    panel.querySelector('.note-plain').style.display = animated ? 'none' : ''; // Load the element's content into the field. Guarded so the write-back
     // does not fire on our own load, and skipped while the user is typing in
     // it (which would move their caret to the end on every keystroke).
 
@@ -18314,6 +19418,9 @@ class PanelOverlay {
         el.style.backgroundImage = `url("${src}")`;
       }
 
+      syncToCodeSource(el, {
+        styles: ['background-image']
+      });
       this.refreshRow(el);
       return;
     }
@@ -18322,6 +19429,9 @@ class PanelOverlay {
       this.builder.editor.element.image.repositionImageTool();
     });
     el.setAttribute('src', src);
+    syncToCodeSource(el, {
+      attrs: ['src']
+    });
     this.refreshRow(el);
   }
 
@@ -25309,739 +26419,6 @@ js$1.exports;
 var jsExports = js$1.exports;
 var JsBeautify$1 = /*@__PURE__*/getDefaultExportFromCjs(jsExports);
 
-/*
- * motion-presets.js — the declarative vocabulary of the Motion panel.
- *
- * Everything the Motion UI can apply lives here as DATA, so adding a new
- * effect is a table edit, never a code edit. Nothing in this file touches
- * the DOM or the builder.
- *
- * Three kinds of thing, because Kinetra genuinely has three:
- *
- *   1. RECIPES     — canned percent keyframes (data-fx-0 … data-fx-100).
- *                    "Fade up", "Zoom in", "Wipe in". These are just a
- *                    starting set of keyframes; the Motion dock (phase 2)
- *                    edits them freely afterwards.
- *   2. PRESETS     — single-attribute effects that are NOT keyframes:
- *                    parallax, horizontal, split, typewriter, draw, marquee.
- *                    Each is identified by one "key" attribute.
- *   3. POINTER     — micro-interactions (tilt, magnetic). Not scene-bound
- *                    at all; they are per-element toggles.
- *
- * Option types:
- *   'text'   — free text input, written verbatim to the attribute
- *   'select' — dropdown; value written to the attribute
- *   'toggle' — VALUELESS boolean attribute (present / absent)
- */
-
-/* Ease names are NOT listed here. motion-ease.js derives them from kinetra's
- * exported `easings` table, so there is exactly one source of truth and a copy
- * can't drift when someone adds or renames a curve. */
-
-/* ------------------------------------------------------------------
- * 1. KEYFRAME RECIPES
- *
- * `frames` maps percent -> declaration string. Applying a recipe REPLACES
- * every existing data-fx-N on the element (a recipe is a fresh start, not
- * an overlay), and sets data-fx-ease.
- *
- * Compound-string rule: both ends of a clip-path/box-shadow/etc. must share
- * the same token count, or Kinetra snaps instead of tweening. Every recipe
- * below already obeys that — keep it that way when adding new ones.
- * ------------------------------------------------------------------ */
-const RECIPES = [{
-  id: 'fade',
-  duration: 0.6,
-  label: 'Fade in',
-  ease: 'easeOut',
-  frames: {
-    0: 'opacity:0',
-    100: 'opacity:1'
-  }
-}, {
-  id: 'fade-up',
-  duration: 0.6,
-  label: 'Fade up',
-  ease: 'smooth',
-  // kinetra's closest match to CSS ease-in-out
-  frames: {
-    0: 'opacity:0; transform:translateY(70px)',
-    // .is-fadeInUp was 70px
-    100: 'opacity:1; transform:translateY(0px)'
-  }
-}, {
-  id: 'fade-down',
-  duration: 0.6,
-  label: 'Fade down',
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:translateY(-70px)',
-    100: 'opacity:1; transform:translateY(0px)'
-  }
-}, {
-  id: 'fade-left',
-  duration: 0.6,
-  label: 'From left',
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:translateX(-70px)',
-    100: 'opacity:1; transform:translateX(0px)'
-  }
-}, {
-  id: 'fade-right',
-  duration: 0.6,
-  label: 'From right',
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:translateX(70px)',
-    100: 'opacity:1; transform:translateX(0px)'
-  }
-}, {
-  id: 'zoom-in',
-  duration: 0.8,
-  label: 'Zoom in',
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:scale(0.8)',
-    // .is-zoomIn was scale(.8)
-    100: 'opacity:1; transform:scale(1)'
-  }
-}, {
-  id: 'zoom-out',
-  duration: 0.8,
-  label: 'Zoom out',
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:scale(1.2)',
-    // .is-zoomOut was scale(1.2)
-    100: 'opacity:1; transform:scale(1)'
-  }
-}, {
-  id: 'slide-up',
-  duration: 0.6,
-  label: 'Slide up',
-  ease: 'smooth',
-  frames: {
-    0: 'transform:translateY(70px)',
-    100: 'transform:translateY(0px)'
-  }
-}, {
-  id: 'slide-down',
-  duration: 0.6,
-  label: 'Slide down',
-  ease: 'smooth',
-  frames: {
-    0: 'transform:translateY(-70px)',
-    100: 'transform:translateY(0px)'
-  }
-}, {
-  id: 'slide-left',
-  duration: 0.6,
-  label: 'Slide from left',
-  ease: 'smooth',
-  frames: {
-    0: 'transform:translateX(-70px)',
-    100: 'transform:translateX(0px)'
-  }
-}, {
-  id: 'slide-right',
-  duration: 0.6,
-  label: 'Slide from right',
-  ease: 'smooth',
-  frames: {
-    0: 'transform:translateX(70px)',
-    100: 'transform:translateX(0px)'
-  }
-}, {
-  id: 'blur-in',
-  duration: 0.6,
-  label: 'Blur in',
-  ease: 'easeOut',
-  frames: {
-    0: 'opacity:0; filter:blur(12px)',
-    100: 'opacity:1; filter:blur(0px)'
-  }
-}, {
-  id: 'flip-x',
-  label: 'Flip X',
-  duration: 0.8,
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:perspective(2500px) rotateX(100deg)',
-    100: 'opacity:1; transform:perspective(2500px) rotateX(0deg)'
-  }
-}, {
-  id: 'flip-y',
-  label: 'Flip Y',
-  duration: 0.8,
-  ease: 'smooth',
-  frames: {
-    0: 'opacity:0; transform:perspective(2500px) rotateY(100deg)',
-    100: 'opacity:1; transform:perspective(2500px) rotateY(0deg)'
-  }
-}, {
-  id: 'pulse',
-  label: 'Pulse',
-  duration: 0.6,
-  ease: 'linear',
-  frames: {
-    0: 'opacity:0; transform:scale(0.9)',
-    50: 'opacity:1; transform:scale(1.05)',
-    100: 'opacity:1; transform:scale(1)'
-  }
-}, {
-  id: 'bounce-in',
-  label: 'Bounce in',
-  duration: 0.6,
-  ease: 'linear',
-  frames: {
-    0: 'opacity:0; transform:translateX(0px)',
-    40: 'opacity:1; transform:translateX(-20px)',
-    60: 'opacity:1; transform:translateX(0px)',
-    80: 'opacity:1; transform:translateX(-15px)',
-    100: 'opacity:1; transform:translateX(0px)'
-  }
-}, {
-  id: 'wipe-right',
-  duration: 0.6,
-  label: 'Wipe in',
-  ease: 'expoOut',
-  frames: {
-    0: 'opacity:1; clip-path:inset(0% 100% 0% 0%)',
-    100: 'opacity:1; clip-path:inset(0% 0% 0% 0%)'
-  }
-}, {
-  id: 'rise-mask',
-  duration: 0.7,
-  label: 'Rise + mask',
-  ease: 'expoOut',
-  frames: {
-    0: 'opacity:0; transform:translateY(70px); clip-path:inset(100% 0% 0% 0%)',
-    100: 'opacity:1; transform:translateY(0px); clip-path:inset(0% 0% 0% 0%)'
-  }
-}, {
-  id: 'rotate-in',
-  duration: 0.6,
-  label: 'Rotate in',
-  ease: 'backOut',
-  frames: {
-    0: 'opacity:0; transform:rotate(-8deg) scale(0.94)',
-    100: 'opacity:1; transform:rotate(0deg) scale(1)'
-  }
-}, {
-  id: 'drift',
-  duration: 0.6,
-  label: 'Drift through',
-  ease: 'linear',
-  noCascade: true,
-  // a through-motion, not an entrance — pointless in a cascade
-  frames: {
-    0: 'transform:translateY(60px)',
-    100: 'transform:translateY(-60px)'
-  }
-}, {
-  id: 'hold-scale',
-  duration: 0.6,
-  label: 'Scale back + hold',
-  ease: 'linear',
-  note: 'Card-stack layer: shrinks as the next layer covers it.',
-  frames: {
-    0: 'transform:scale(1)',
-    50: 'transform:scale(0.9)',
-    100: 'transform:scale(0.9)'
-  }
-}];
-/* ------------------------------------------------------------------
- * 2. SCROLL / TEXT PRESETS  (single-attribute effects)
- * ------------------------------------------------------------------ */
-
-const PRESETS = [{
-  id: 'parallax',
-  label: 'Parallax',
-  group: 'scroll',
-  key: 'data-fx-parallax',
-  defaults: {
-    'data-fx-parallax': '120'
-  },
-  hint: 'Drifts as it scrolls. Works in any section.',
-  options: [{
-    attr: 'data-fx-parallax',
-    label: 'Travel',
-    type: 'text',
-    placeholder: '120 (px) or 20%'
-  }]
-}, {
-  id: 'horizontal',
-  label: 'Horizontal track',
-  group: 'scroll',
-  key: 'data-fx-horizontal',
-  pinnedOnly: true,
-  defaults: {
-    'data-fx-horizontal': ''
-  },
-  hint: 'Vertical scroll drives a sideways track. Needs a pinned scene, and children with flex:0 0 auto.',
-  options: []
-}, {
-  id: 'split',
-  label: 'Split text',
-  group: 'text',
-  key: 'data-fx-split',
-  defaults: {
-    'data-fx-split': 'words'
-  },
-  hint: 'Staggered word/char entrance. Formatting inside the element is preserved.',
-  options: [{
-    attr: 'data-fx-split',
-    label: 'Unit',
-    type: 'select',
-    choices: [['words', 'Words'], ['chars', 'Characters']]
-  }, {
-    attr: 'data-fx-split-mask',
-    label: 'Mask reveal',
-    type: 'toggle'
-  }, {
-    attr: 'data-fx-split-stagger',
-    label: 'Stagger',
-    type: 'text',
-    placeholder: '0.08 (sec)'
-  }, {
-    attr: 'data-fx-split-y',
-    label: 'Travel',
-    type: 'text',
-    placeholder: '115% or 18px'
-  }, {
-    attr: 'data-fx-split-scrub',
-    label: 'Scrub through scene',
-    type: 'toggle',
-    hint: 'Best in a pinned scene — units brighten in reading order as you scroll.'
-  }, {
-    attr: 'data-fx-split-from',
-    label: 'Dim opacity',
-    type: 'text',
-    placeholder: '0.12',
-    requires: 'data-fx-split-scrub'
-  }]
-}, {
-  id: 'typewriter',
-  label: 'Typewriter',
-  group: 'text',
-  key: 'data-fx-typewriter',
-  defaults: {
-    'data-fx-typewriter': ''
-  },
-  hint: 'The scrollbar types the text. Plain text only.',
-  options: [{
-    attr: 'data-fx-typewriter-until',
-    label: 'Done at',
-    type: 'text',
-    placeholder: '0.85 (progress)'
-  }]
-}, {
-  id: 'marquee',
-  label: 'Marquee',
-  group: 'text',
-  key: 'data-fx-marquee',
-  defaults: {
-    'data-fx-marquee': ''
-  },
-  hint: 'Drifting band. Content should be a repeating strip.',
-  options: [{
-    attr: 'data-fx-marquee-speed',
-    label: 'Speed',
-    type: 'text',
-    placeholder: '90 (px/sec)'
-  }, {
-    attr: 'data-fx-marquee-lean',
-    label: 'Lean with velocity',
-    type: 'toggle'
-  }]
-}, {
-  id: 'path',
-  label: 'Motion path',
-  group: 'scroll',
-  key: 'data-fx-path',
-  defaults: {
-    'data-fx-path': '-200,60; 0,-80; 200,60'
-  },
-  hint: 'Travels a smooth curve through waypoints. Edit the stops in the Motion dock; px offsets from the element\'s resting position.',
-  options: [{
-    attr: 'data-fx-path',
-    label: 'Waypoints',
-    type: 'text',
-    placeholder: 'x,y; x,y @tx,ty; …'
-  }, {
-    attr: 'data-fx-path-dwell',
-    label: 'Dwell',
-    type: 'text',
-    placeholder: '0.78 (0 = constant, 1 = stops)'
-  }, {
-    attr: 'data-fx-path-curve',
-    label: 'Curve',
-    type: 'text',
-    placeholder: '1 (0 = straight lines)'
-  }, {
-    attr: 'data-fx-path-rotate',
-    label: 'Auto-rotate along path',
-    type: 'toggle'
-  }, {
-    attr: 'data-fx-path-rotate',
-    label: 'Rotate offset',
-    type: 'text',
-    placeholder: '0 (deg; art faces right 0, up 90)',
-    requires: 'data-fx-path-rotate'
-  }]
-}, {
-  id: 'draw',
-  label: 'Draw SVG',
-  group: 'scroll',
-  key: 'data-fx-draw',
-  defaults: {
-    'data-fx-draw': ''
-  },
-  tags: ['svg', 'path'],
-  hint: 'Paths draw themselves as the scene scrubs. Put on an <svg> or a <path>.',
-  options: []
-}];
-/* ------------------------------------------------------------------
- * 3. POINTER MICRO-INTERACTIONS
- * ------------------------------------------------------------------ */
-
-const POINTER = [{
-  id: 'tilt',
-  label: 'Tilt',
-  key: 'data-fx-tilt',
-  defaults: {
-    'data-fx-tilt': ''
-  },
-  options: [{
-    attr: 'data-fx-tilt-max',
-    label: 'Max angle',
-    type: 'text',
-    placeholder: '14 (deg)'
-  }]
-}, {
-  id: 'magnetic',
-  label: 'Magnetic',
-  key: 'data-fx-magnetic',
-  defaults: {
-    'data-fx-magnetic': ''
-  },
-  options: [{
-    attr: 'data-fx-magnetic-strength',
-    label: 'Strength',
-    type: 'text',
-    placeholder: '0.35'
-  }]
-}];
-/* ------------------------------------------------------------------
- * Helpers — every consumer of this table should go through these, so the
- * "one system per element" and "attributes only" rules stay in one place.
- * ------------------------------------------------------------------ */
-
-/* High-traffic legacy attributes. Mirrors LEGACY_PROBE in contentbox-effects.js:
- * an element carrying any of these is owned by the old timeline and must not
- * receive data-fx-*. */
-
-const LEGACY_PROBE = ['data-bottom-top', 'data-center', 'data-center-top', 'data-center-bottom', 'data-top', 'data-top-bottom', 'data-bottom', 'data-in', 'data-cen', 'data-out', 'data-t', 'data-t-100', 'data-t-200', 'data-t-300', 'data-t-400', 'data-t-500', 'data-t-600', 'data-t-700', 'data-t-800', 'data-t-900', 'data-t-1000', 'data-hidden-onstart', 'data-smooth-scrolling'];
-/* THE SECOND LEGACY SYSTEM.
- *
- * animatescroll.js's "On View" wizard never wrote attributes at all — it wrote
- * CSS CLASSES, toggled at runtime by inViewSetup()'s IntersectionObserver. So
- * an element can be legacy-animated while carrying no legacy attribute
- * whatsoever, which means contentbox-effects' hasLegacyAttrs() guard sails
- * straight past it. An element with both class="is-animated is-fadeInUp" and
- * data-fx-0 would get animated TWICE, by two systems both writing transform
- * and opacity.
- *
- * This list is lifted verbatim from animatescroll.js's cleanupBasic(). */
-
-const LEGACY_ONVIEW_CLASSES = ['is-animated', 'is-scale-animated', 'is-inview', 'once', 'is-fadeIn', 'is-fadeInUp', 'is-fadeInDown', 'is-fadeInLeft', 'is-fadeInRight', 'is-zoomIn', 'is-zoomOut', 'is-slideInUp', 'is-slideInDown', 'is-slideInLeft', 'is-slideInRight', 'is-flipInX', 'is-flipInY', 'is-pulse', 'is-bounceIn'];
-function hasLegacyOnView(el) {
-  if (!el || !el.classList) return false;
-  return el.classList.contains('is-animated') || el.classList.contains('is-scale-animated');
-}
-/** Strip every trace of the class-based system from one element. */
-
-function stripLegacyOnView(el) {
-  if (!el || !el.classList) return false;
-  let touched = false;
-  LEGACY_ONVIEW_CLASSES.forEach(c => {
-    if (el.classList.contains(c)) {
-      el.classList.remove(c);
-      touched = true;
-    }
-  }); // delay-0ms … delay-2000ms
-
-  Array.from(el.classList).forEach(c => {
-    if (/^delay-\d+ms$/.test(c)) {
-      el.classList.remove(c);
-      touched = true;
-    }
-  });
-  if (el.getAttribute('class') === '') el.removeAttribute('class');
-  return touched;
-}
-/** Any element the OLD systems own — attributes (skrollr) OR classes (on-view). */
-
-function hasLegacyMotion(el) {
-  if (!el || !el.hasAttribute) return false;
-  if (hasLegacyOnView(el)) return true;
-  if (LEGACY_PROBE.some(a => el.hasAttribute(a))) return true; // catch the whole data-t-N / data-xs-t-N / data-sm-t-N family
-
-  for (const attr of el.attributes) {
-    if (/^data-(xs-|sm-)?t(-\d+)?$/.test(attr.name)) return true;
-  }
-
-  return false;
-}
-/** Every data-fx-* attribute name currently on the element. */
-
-function fxAttrs(el) {
-  if (!el || !el.attributes) return [];
-  return Array.from(el.attributes).map(a => a.name).filter(n => n.startsWith('data-fx-'));
-}
-function hasMotion(el) {
-  return fxAttrs(el).some(n => n !== MUTE_ATTR);
-}
-/* ---- mute ----
- *
- * "Off" is an ATTRIBUTE, not editor memory. The tempting alternative — stash
- * the data-fx-* attributes in JS, strip them from the DOM, restore on unmute —
- * loses the user's animation the first time the editor autosaves while muted,
- * because builder.html() serializes the DOM and the attributes aren't in it.
- *
- * As an attribute it survives save, undo, reload and hand-off; it's visible in
- * the HTML so nobody is ever confused about why an animation isn't running;
- * and it stops being a debug toggle and becomes a real feature ("turn this off
- * but keep the setup"). It costs a few dead bytes in the published page.
- *
- * contentbox-effects._eligible() is the single gate every feature passes
- * through, so one check there disables keyframes, split, typewriter, parallax,
- * horizontal, draw, marquee, tilt and magnetic at once. On a .is-section it
- * mutes the whole scene. */
-
-const MUTE_ATTR = 'data-fx-off';
-/* ---- scene attributes ----
- *
- * These live on the .is-section and describe the SCENE, not any element's own
- * motion — so clearing an element must never touch them (a section is both).
- *
- * This list used to be copy-pasted into motion.js, panel-motion.js and
- * motion-cascade.js. Then data-fx-duration and data-fx-once were added and only
- * one copy learned about them, so "remove track" on a section quietly deleted
- * the cascade's timing. One list, one place.
- *
- * ADDING A NEW SCENE ATTRIBUTE? It goes here, and in animation-framwork-ai.md.
- */
-
-const SCENE_ATTRS = ['data-fx-length', // pinned: how much scroll the pin eats (vh)
-'data-fx-scrub', // seconds of catch-up lag, or "off" for time-driven
-'data-fx-start', // where progress 0 is
-'data-fx-end', // where progress 100 is
-'data-fx-duration', // seconds — the scene's own clock, when not scrubbing
-'data-fx-once', // don't replay on re-entry
-'data-fx-emit'];
-/* ---- what is NOT the user's content ----
- *
- * ContentBox injects its toolbars INTO the row, as siblings of the column:
- *
- *     div.row
- *      ├ div.column                ← real content
- *      ├ div.is-tool.is-row-tool   ← editor UI
- *      ├ div.is-tool.is-col-tool   ← editor UI
- *      └ div.is-rowadd-tool        ← editor UI
- *
- * So anything walking row.children sees toolbars as columns. They aren't empty
- * — they hold buttons — so they pass every "does this cell have content?" test,
- * and the cascade cheerfully animates the editor's own move/delete buttons.
- *
- * Kinetra also generates nodes (split-text spans, pinned-section clones). Those
- * aren't content either.
- *
- * NOTE the deliberate absence of `.column` / `.row` here: those class names are
- * user-configurable, so structure is read positionally and only the chrome is
- * named. */
-
-const EDITOR_CHROME_SELECTOR = ['.is-tool', // row + column toolbars (contentbuilder's controlSelector)
-'.is-rowadd-tool', '.is-section-tool', '.is-box-tool', '.is-section-info'].join(',');
-/* NOT `.is-overlay-bg`. It is authored markup saved with the page, and it is
- * where the parallax of most section templates lives — and where converting a
- * legacy section writes its keyframes. Excluding it hid a section's most
- * common animation from the timeline dock, which lists a scene's animated
- * elements. It stays out of the ancestor picker and out of the cascade, but
- * that is each of their own rule, not this one. */
-
-const NOT_CONTENT_SELECTOR = [EDITOR_CHROME_SELECTOR, '.kinetra-word', '.kinetra-char', '.kinetra-mask', '[data-section-clone]', '[data-fx-mirrors]'].join(',');
-/** Editor chrome or Kinetra-generated — never animate it, never list it. */
-
-function isNotContent(el) {
-  if (!el || el.nodeType !== 1 || !el.closest) return true;
-  return !!el.closest(NOT_CONTENT_SELECTOR); // closest → catches buttons *inside* a toolbar
-}
-function isMuted(el) {
-  return !!(el && el.hasAttribute && el.hasAttribute(MUTE_ATTR));
-}
-/** Percent keyframes on the element, sorted: [{ pct, value }] */
-
-function keyframesOf(el) {
-  if (!el || !el.attributes) return [];
-  const out = [];
-
-  for (const a of el.attributes) {
-    const m = /^data-fx-(\d{1,3})$/.exec(a.name);
-    if (!m) continue;
-    const pct = parseInt(m[1], 10);
-    if (pct < 0 || pct > 100) continue;
-    out.push({
-      pct,
-      value: a.value
-    });
-  }
-
-  return out.sort((x, y) => x.pct - y.pct);
-}
-/** Which preset (if any) is applied. Returns the preset object or null. */
-
-function activePreset(el, table) {
-  if (!el || !el.hasAttribute) return null;
-  return (table || PRESETS).find(p => el.hasAttribute(p.key)) || null;
-}
-/** Remove every data-fx-N keyframe (leaves presets and ease alone). */
-
-function clearKeyframes(el) {
-  for (const name of fxAttrs(el)) {
-    if (/^data-fx-\d{1,3}$/.test(name)) el.removeAttribute(name);
-  }
-}
-/** Remove one preset and all of its option attributes. */
-
-function clearPreset(el, preset) {
-  el.removeAttribute(preset.key);
-  (preset.options || []).forEach(o => {
-    if (o.attr !== preset.key) el.removeAttribute(o.attr);
-  });
-}
-/** Apply a keyframe recipe: replaces all existing keyframes. */
-
-function applyRecipe(el, recipe) {
-  clearKeyframes(el);
-  Object.keys(recipe.frames).forEach(pct => {
-    el.setAttribute('data-fx-' + pct, recipe.frames[pct]);
-  });
-  if (recipe.ease) el.setAttribute('data-fx-ease', recipe.ease);else el.removeAttribute('data-fx-ease');
-}
-/** Best-effort: which recipe do the current keyframes look like? */
-
-function matchRecipe(el) {
-  const frames = keyframesOf(el);
-  if (!frames.length) return null;
-
-  const norm = s => s.replace(/\s+/g, '').replace(/;$/, '').toLowerCase();
-
-  return RECIPES.find(r => {
-    const keys = Object.keys(r.frames);
-    if (keys.length !== frames.length) return false;
-    return keys.every(pct => {
-      const f = frames.find(x => x.pct === parseInt(pct, 10));
-      return f && norm(f.value) === norm(r.frames[pct]);
-    });
-  }) || null;
-}
-/* ---- Scene (section) helpers ---- */
-
-function isPinned(section) {
-  return !!(section && section.classList.contains('section-pin'));
-}
-const SCENE_DEFAULTS = {
-  length: '320',
-  // vh, pinned only
-  scrub: '0.25',
-  // seconds of catch-up lag
-  duration: '1',
-  // seconds — only read when NOT scrubbing
-  start: 'top bottom',
-  // end: 'bottom top',
-  end: 'bottom bottom'
-};
-/* The scene window, as a choice rather than a string.
- *
- * There are only two answers that matter:
- *   - fully in view   — the entrance is the scene. Right for ~everything.
- *   - leaves the screen — keep moving the whole time the section is on screen.
- *     Right for drifting, parallax-like motion.
- * Anything else is a fine-tune, and stays available as raw edge strings.
- *
- * NOTE: the window is IGNORED when the scene is time-driven (scrub="off") —
- * an IntersectionObserver does the triggering there. */
-
-const SCENE_WINDOWS = [{
-  id: 'inview',
-  label: 'the section is fully in view',
-  start: 'top bottom',
-  end: 'bottom bottom'
-}, {
-  id: 'offscreen',
-  label: 'the section leaves the screen',
-  start: 'top bottom',
-  end: 'bottom top'
-}];
-function windowOf(section) {
-  if (!section) return 'inview';
-  const s = (section.getAttribute('data-fx-start') || '').trim();
-  const e = (section.getAttribute('data-fx-end') || '').trim();
-  if (!s && !e) return 'inview'; // no attributes = defaults
-
-  const m = SCENE_WINDOWS.find(w => (s === '' || s === w.start) && e === w.end);
-  return m ? m.id : 'custom';
-}
-function setWindow(section, id) {
-  if (!section) return;
-
-  if (id === 'inview') {
-    // the default — write nothing
-    section.removeAttribute('data-fx-start');
-    section.removeAttribute('data-fx-end');
-    return;
-  }
-
-  const w = SCENE_WINDOWS.find(x => x.id === id);
-  if (!w) return; // 'custom' — leave the strings alone
-
-  section.removeAttribute('data-fx-start'); // start default is already right
-
-  section.setAttribute('data-fx-end', w.end);
-}
-/* Which clock drives the scene. `data-fx-scrub="off"` is the switch:
- * the scrollbar stops being the clock and the scene plays itself. */
-
-function triggerOf(section) {
-  if (!section) return 'scroll';
-  const v = (section.getAttribute('data-fx-scrub') || '').trim().toLowerCase();
-  return v === 'off' || v === 'none' || v === 'false' ? 'enter' : 'scroll';
-}
-/* The trigger a scene gets when nobody has chosen one.
- *
- * Note what this is NOT: it does not reinterpret a missing data-fx-scrub.
- * The runtime's fallback for that attribute is scrub 0.25 (contentbox-effects
- * sceneOptsFor), so a saved page with no trigger on it is scroll-driven and
- * will stay that way. This is the value the editor WRITES the first time it
- * gives a section motion — content made from now on plays on enter, content
- * already out there keeps whatever it has. */
-
-const DEFAULT_TRIGGER = 'enter';
-/* Is anything in this section actually animated?
- *
- * Scene attributes don't count — data-fx-duration on a bare section describes
- * a clock nothing is running on. What counts is an element's own motion:
- * keyframes or a preset, on the section itself or anywhere inside it. */
-
-function sceneHasMotion(section) {
-  if (!section) return false;
-  const ownMotion = fxAttrs(section).some(n => n !== MUTE_ATTR && SCENE_ATTRS.indexOf(n) === -1);
-  if (ownMotion) return true;
-  return Array.from(section.querySelectorAll('*')).some(el => hasMotion(el));
-}
-
 /*
  * section-anim.js — the Section panel's ready-made "Animation" presets,
  * expressed as Motion (data-fx-*) instead of the legacy skrollr attributes.
@@ -33184,6 +33561,11 @@ class PanelSection {
                 <button title="${out('Duplicate')}" class="btn-duplicate">
                     <svg><use xlink:href="#icon-copy"></use></svg> 
                 </button>
+                ${builder.sectionHtmlButton ? `
+                <button title="${out('Section HTML')}" class="btn-html">
+                    <svg><use xlink:href="#icon-code"></use></svg> 
+                </button>
+                ` : ''}
                 <button title="${out('Delete')}" class="btn-delete">
                     <svg><use xlink:href="#icon-trash"></use></svg> 
                 </button>
@@ -33385,6 +33767,10 @@ class PanelSection {
     btnDuplicate.addEventListener('click', () => {
       this.section.sectionDuplicate();
     });
+    const btnHtml = panel.querySelector('.btn-html');
+    if (btnHtml) btnHtml.addEventListener('click', () => {
+      this.builder.openSectionHtml();
+    });
     const btnDelete = panel.querySelector('.btn-delete');
     btnDelete.addEventListener('click', () => {
       this.section.sectionDelete();
@@ -35920,6 +36306,14 @@ class PanelMotion {
     const builder = this.builder;
     builder.editor.saveForUndo();
     mutate();
+    /* An element inside a code block lives in the block's RENDER, which is
+     * discarded on save. Carry its motion into the block's source so the
+     * animation survives. No-op for every other element. */
+
+    const inCode = this.target();
+    if (inCode) syncToCodeSource(inCode, {
+      fx: true
+    });
     this.refreshRuntime(rerender);
     builder.onChange();
     const dock = builder.motion;
@@ -42340,47 +42734,100 @@ function effectiveFullviewWidth(preferred, availableWidth) {
 }
 
 class Settings {
-  constructor(dialog, builder) {
+  constructor(builder) {
     this.builder = builder;
-    this.dialog = dialog;
-    let html = `
-            <button class="btn-back" tabindex="-1" title="${out('Close')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>
-  
-            <div class="submain">
+  } // Built on first open, not with the control panel: the dialog lives in the
+  // editor's UI root, and the editor is created after the panel.
 
-                <div class="label" style="font-size:18px">${out('Settings')}</div>
-
-                <div class="label">${out('Paste')}:</div>
-                <select class="inp-paste">
-                    <option value="auto">${out('Auto')}</option>
-                    <option value="html-without-styles">${out('HTML (without styles)')}</option>
-                    <option value="html">${out('HTML (with styles)')}</option>
-                    <option value="text">${out('Text only')}</option>
-                </select>
 
-                <div class="label">${out('HTML View')}:</div>
-                <select class="inp-htmlview">
-                    <option value="shorten">${out('Shorten HTML')}</option>
-                    <option value="actual">${out('Actual')}</option>
-                </select>
+  render() {
+    const builder = this.builder; // A settings dialog in the editor's own dialog world: the shell, the
+    // title bar and every control below are the components the Preferences
+    // and Column/Row dialogs use, so this reads as one of them rather than
+    // a side panel that happens to float. See the editor's
+    // docs/settings-ui-guide.md.
 
-                <div class="label editing-width-label">${out('Editing Width')}:</div>
-                <div class="group desktopwidth">
-                    <button type="button" data-width="auto">${out('Auto')}</button>
-                    ${FULLVIEW_WIDTHS.map(w => `<button type="button" data-width="${w}">${w}</button>`).join('')}
+    const html = `
+        <div class="is-modal cbxsettings" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-content">
+                <div class="is-modal-bar is-draggable">
+                    ${out('Settings')}
+                    <button type="button" class="is-modal-close" title="${out('Close')}" tabindex="-1">&#10005;</button>
                 </div>
 
-                ${this.builder.themes && this.builder.themes.length > 0 ? `
-                <div class="label">${out('Theme')}:</div>
-                <div class="group">
-                    <button type="button" title="${out('Light')}" data-theme="light" style="background:#fff;border:rgb(132 132 132 / 16%) 1px solid;"></button>
-                    <button type="button" title="${out('Dark')}" data-theme="dark" style="background:#000;border:rgba(0,0,0,0.15) 1px solid;"></button>
+                <div style="padding:0;margin-top:35px;">
+                    <div class="cbx-set-body">
+
+                        <div class="cbx-set-row2">
+                            <div class="cb-field">
+                                <span class="cb-grouplabel">${out('Paste')}</span>
+                                <div class="cb-sel">
+                                    <select class="inp-paste">
+                                        <option value="auto">${out('Auto')}</option>
+                                        <option value="html-without-styles">${out('HTML (without styles)')}</option>
+                                        <option value="html">${out('HTML (with styles)')}</option>
+                                        <option value="text">${out('Text only')}</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div class="cb-field">
+                                <span class="cb-grouplabel">${out('HTML View')}</span>
+                                <div class="cb-sel">
+                                    <select class="inp-htmlview">
+                                        <option value="shorten">${out('Shorten HTML')}</option>
+                                        <option value="actual">${out('Actual')}</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="cb-field editing-width-field">
+                            <span class="cb-grouplabel editing-width-label">${out('Editing Width')}</span>
+                            <div class="cb-seg desktopwidth" role="group" aria-label="${out('Editing Width')}">
+                                <button type="button" data-width="auto">${out('Auto')}</button>
+                                ${FULLVIEW_WIDTHS.map(w => `<button type="button" data-width="${w}">${w}</button>`).join('')}
+                            </div>
+                        </div>
+
+                        <div class="cbx-set-sep"></div>
+
+                        <div class="cb-switchrow">
+                            <span class="lbl">${out('Quick Section Controls')}</span>
+                            <label class="switch"><input type="checkbox" class="inp-sectionquicktool"><span class="slider"></span></label>
+                        </div>
+                        <div class="cb-switchrow">
+                            <span class="lbl">${out('Section Tools')}</span>
+                            <label class="switch"><input type="checkbox" class="inp-sectiontool"><span class="slider"></span></label>
+                        </div>
+                        <div class="cb-switchrow">
+                            <span class="lbl">${out('Box Tools')}</span>
+                            <label class="switch"><input type="checkbox" class="inp-boxtool"><span class="slider"></span></label>
+                        </div>
+
+                        ${this.builder.themes && this.builder.themes.length > 0 ? `
+                        <div class="cbx-set-sep"></div>
+
+                        <div class="cb-field">
+                            <span class="cb-grouplabel">${out('Theme')}</span>
+                            <div class="cbx-themes">
+                                <button type="button" title="${out('Light')}" data-theme="light" style="background:#fff;border:rgb(132 132 132 / 16%) 1px solid;"></button>
+                                <button type="button" title="${out('Dark')}" data-theme="dark" style="background:#000;border:rgba(0,0,0,0.15) 1px solid;"></button>
+                            </div>
+                        </div>
+                        ` : ''}
+
+                    </div>
                 </div>
-                ` : ''}
-                
             </div>
-        `;
-    dialog.insertAdjacentHTML('beforeend', html);
+        </div>
+        `; // In the editor's UI root, not ContentBox's: that is where the dialog
+    // components live ([data-cb-ui]).
+
+    const stuff = builder.editor.builderStuff;
+    stuff.insertAdjacentHTML('beforeend', html);
+    const dialog = stuff.querySelector('.is-modal.cbxsettings');
+    this.modal = dialog;
     this.dialog = dialog;
     const inpPaste = dialog.querySelector('.inp-paste');
     inpPaste.addEventListener('change', () => {
@@ -42399,6 +42846,27 @@ class Settings {
       }
 
       localStorage.setItem('_htmlview', htmlView);
+    }); // The tools on the page. Everything they do is on the control panel too,
+    // so this is a preference, not a capability: it is remembered per user
+    // and the page is re-rendered at once so the choice is visible.
+
+    const inpSectionQuickTool = dialog.querySelector('.inp-sectionquicktool');
+    inpSectionQuickTool.addEventListener('change', () => {
+      this.builder.sectionQuickTool = inpSectionQuickTool.checked;
+      localStorage.setItem('_sectionquicktool', inpSectionQuickTool.checked ? '1' : '0');
+      this.builder.controlpanel.refreshSectionQuickTool();
+    });
+    const inpSectionTool = dialog.querySelector('.inp-sectiontool');
+    inpSectionTool.addEventListener('change', () => {
+      this.builder.sectionTool = inpSectionTool.checked;
+      localStorage.setItem('_sectiontool', inpSectionTool.checked ? '1' : '0');
+      this.builder.refreshPageTools();
+    });
+    const inpBoxTool = dialog.querySelector('.inp-boxtool');
+    inpBoxTool.addEventListener('change', () => {
+      this.builder.boxTool = inpBoxTool.checked;
+      localStorage.setItem('_boxtool', inpBoxTool.checked ? '1' : '0');
+      this.builder.refreshPageTools();
     });
     const btnTheme = dialog.querySelectorAll('[data-theme]');
     btnTheme.forEach(btn => {
@@ -42441,11 +42909,7 @@ class Settings {
     // it is actually on screen.
 
     window.addEventListener('resize', () => {
-      if (this.dialog.style.display) this.renderDesktopWidth();
-    });
-    const btnBack = dialog.querySelector('.btn-back');
-    btnBack.addEventListener('click', () => {
-      this.close();
+      if (this.modal.classList.contains('active')) this.renderDesktopWidth();
     });
   }
 
@@ -42477,6 +42941,9 @@ class Settings {
       inpHtmlView.value = 'actual';
     }
 
+    dialog.querySelector('.inp-sectionquicktool').checked = this.builder.sectionQuickTool !== false;
+    dialog.querySelector('.inp-sectiontool').checked = this.builder.sectionTool !== false;
+    dialog.querySelector('.inp-boxtool').checked = this.builder.boxTool !== false;
     this.renderDesktopWidth();
   }
   /**
@@ -42499,8 +42966,8 @@ class Settings {
 
   renderDesktopWidth() {
     const dialog = this.dialog;
-    const label = dialog.querySelector('.editing-width-label');
-    const group = dialog.querySelector('.group.desktopwidth');
+    const label = dialog.querySelector('.editing-width-field');
+    const group = dialog.querySelector('.desktopwidth');
     if (!group) return; // The workspace, not the window. In fullview #editPanel is inset by the left rail
     // and by the control panel this dialog sits in, so a 1290px window leaves about
     // 939px here, and the difference decides whether any of this is worth showing.
@@ -42514,8 +42981,8 @@ class Settings {
 
     const selectable = FULLVIEW_WIDTHS.some(width => width > available && fullviewWidthFits(width, available));
     const show = this.builder.scaleFullview && selectable;
-    label.style.display = show ? '' : 'none';
-    group.style.display = show ? '' : 'none';
+    label.style.display = show ? '' : 'none'; // the whole field: label + segments
+
     if (!show) return; // Auto is the state with nothing stored, so storage is what decides it, not the
     // resolved width: under Auto on a wide workspace the width resolves to the
     // fullviewLogicalWidth default, and marking that too would light up two buttons
@@ -42558,12 +43025,20 @@ class Settings {
   }
 
   open() {
-    this.dialog.style.display = 'flex';
-    this.getState();
+    if (!this.modal) this.render();
+    this.getState(); // Dragging is wired on first open: the shell is rendered with the panel,
+    // long before the editor is ready to take a selector.
+
+    if (!this.draggable) {
+      this.draggable = true;
+      this.builder.editor.draggable('.is-modal.cbxsettings .is-draggable');
+    }
+
+    this.builder.editor.util.showModal(this.modal);
   }
 
   close() {
-    this.dialog.style.display = '';
+    if (this.modal) this.builder.editor.util.hideModal(this.modal);
   }
 
 }
@@ -42679,6 +43154,28 @@ class ControlPanel {
     
                 <div class="panelnav">
                     <div class="part-breadcrumb"></div>
+
+                    <!-- Quick access to the section's own actions, right under the
+                         Section crumb. A click in the page selects the Box, so these
+                         would otherwise cost a trip to the Section panel first.
+                         Deliberately smaller than the panel's own controls: it reads
+                         as a shortcut belonging to the crumb above it, not as part of
+                         the panel below. Shown only when Section is the only crumb (a
+                         Box is selected); deeper selections have their own arrows and
+                         these would read as "move this element". -->
+                    <div class="part-sectionmove group" role="group" aria-label="${out('Section')}" style="display:none">
+                        <button title="${out('Top')}" data-sectionmove="top"><svg><use xlink:href="#icon-arrow-top"></use></svg></button>
+                        <button title="${out('Up')}" data-sectionmove="up"><svg><use xlink:href="#icon-arrow-up"></use></svg></button>
+                        <button title="${out('Down')}" data-sectionmove="down"><svg><use xlink:href="#icon-arrow-down"></use></svg></button>
+                        <button title="${out('Bottom')}" data-sectionmove="bottom"><svg><use xlink:href="#icon-arrow-bottom"></use></svg></button>
+                        <button class="btn-sectionmore" title="${out('Height')}" aria-haspopup="true" aria-expanded="false"><svg><use xlink:href="#icon-dots"></use></svg></button>
+                        <button class="btn-sectiondup" title="${out('Duplicate')}"><svg><use xlink:href="#icon-copy"></use></svg></button>
+                        ${this.builder.sectionHtmlButton ? `
+                        <button class="btn-sectionhtml" title="${out('Section HTML')}"><svg><use xlink:href="#icon-code"></use></svg></button>
+                        ` : ''}
+                        <button class="btn-sectiondel" title="${out('Delete')}"><svg><use xlink:href="#icon-trash"></use></svg></button>
+                    </div>
+
                     <h3 class="part-title"></h3>
                     <div class="part-empty">${out('No Selection.')}</div>
                     <div class="part-tabs" style="display:none">
@@ -42710,12 +43207,23 @@ class ControlPanel {
                 <div class="panel-dialog icons"></div>
                 <div class="panel-dialog blocks"></div>
                 <div class="panel-dialog imageadjust"></div>
-                <div class="panel-dialog settings"></div>
                 <div class="panel-dialog group"></div>
                 <div class="panel-dialog blockoptions"></div>
                 <div class="panel-dialog shadow"></div>
                 <div class="panel-dialog symbols"></div>
 
+                <!-- Section height, the one remaining section control used often
+                     enough to be worth reaching from the Box selection. A pop
+                     rather than four more icons: the presets are a grid, and the
+                     strip has to stay small to keep reading as a shortcut. -->
+                <div class="panel-pop heightpop" tabIndex="-1" aria-hidden="true">
+                    <div class="label">${out('Height')}:</div>
+                    <div class="group sectionheight">
+                        ${[10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 85, 90, 100].map(h => `<button title="${h}%" data-sectionheight="${h}">${h}%</button>`).join('')}
+                        <button title="${out('Clear')}" class="btn-clear" data-sectionheight="0"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                    </div>
+                </div>
+
                 <div class="panel-pop more" tabIndex="-1" aria-hidden="true">
                     <!--<button class="btn-preferences" title="${out('Preferences')}">${out('Preferences')}</button>-->
                     <button class="btn-settings" title="${out('Settings')}">${out('Settings')}</button>
@@ -42725,14 +43233,6 @@ class ControlPanel {
                     <div class="plugins"></div>
                 </div>
 
-                <div class="is-modal modal-settings" aria-hidden="true">
-                    <div class="modal-content">
-                        <div style="padding:30px">
-                            <p>Modal content goes here.</p>
-                        </div>
-                    </div>
-                </div>
-
             </div>
 
             `;
@@ -42770,14 +43270,64 @@ class ControlPanel {
         this.showPanel(this.what);
       });
     });
-    this.breadcrumb = controlPanel.querySelector('.part-breadcrumb');
+    this.breadcrumb = controlPanel.querySelector('.part-breadcrumb'); // builder.activeSection is kept current whenever a box is activated, and
+    // every action below reads it, so these need no selection of their own
+    // and leave the open panel untouched.
+
+    this.sectionMoveBar = controlPanel.querySelector('.part-sectionmove');
+    this.sectionMoveBar.querySelectorAll('[data-sectionmove]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.section.sectionMove(btn.getAttribute('data-sectionmove'));
+      });
+    });
+    this.sectionMoveBar.querySelector('.btn-sectiondup').addEventListener('click', () => {
+      this.builder.section.sectionDuplicate();
+    });
+    const btnSectionHtml = this.sectionMoveBar.querySelector('.btn-sectionhtml');
+    if (btnSectionHtml) btnSectionHtml.addEventListener('click', () => {
+      this.builder.openSectionHtml();
+    });
+    this.heightPop = controlPanel.querySelector('.panel-pop.heightpop');
+    this.btnSectionMore = this.sectionMoveBar.querySelector('.btn-sectionmore');
+    this.btnSectionMore.addEventListener('click', () => {
+      this.markSectionHeight();
+      this.showPop(this.heightPop, () => {
+        this.btnSectionMore.setAttribute('aria-expanded', false);
+        this.btnSectionMore.focus();
+      }, this.btnSectionMore); // showPop right-aligns the pop to its button, which is how the
+      // toolbar's own pops sit. This one belongs to the strip, so it hangs
+      // under the whole strip and lines up with its left edge, pulled back
+      // in only if the window is narrow enough to push it off screen.
+
+      const r = this.sectionMoveBar.getBoundingClientRect();
+      this.heightPop.style.top = `${r.bottom + 5}px`;
+      this.heightPop.style.left = `${Math.max(8, Math.min(r.left, window.innerWidth - this.heightPop.offsetWidth - 8))}px`;
+      this.btnSectionMore.setAttribute('aria-expanded', true);
+    });
+    this.heightPop.querySelectorAll('[data-sectionheight]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.section.setSectionHeight(btn.getAttribute('data-sectionheight'));
+        this.markSectionHeight(btn.getAttribute('data-sectionheight')); // Left open: picking a height is a try-and-look action, and the
+        // next try should not cost another trip to the button.
+      });
+    }); // Same confirm as the section tool's trash: this is the same action at
+    // the same scale, and the whole section goes with one small click.
+
+    this.sectionMoveBar.querySelector('.btn-sectiondel').addEventListener('click', () => {
+      if (this.builder.settings.deleteConfirm) {
+        this.builder.editor.util.showModal(this.builder.builderStuff.querySelector('.is-modal.delsectionconfirm'));
+        return;
+      }
+
+      this.builder.section.sectionDelete();
+      if (this.builder.onSelectChange) this.builder.onSelectChange();
+    });
     this.title = controlPanel.querySelector('.part-title');
     this.empty = controlPanel.querySelector('.part-empty');
     this.dialogIcons = controlPanel.querySelector('.panel-dialog.icons'); // this.dialogBlocks = controlPanel.querySelector('.panel-dialog.blocks');
 
     this.dialogShadow = controlPanel.querySelector('.panel-dialog.shadow');
     this.dialogImageAdjust = controlPanel.querySelector('.panel-dialog.imageadjust');
-    this.dialogSettings = controlPanel.querySelector('.panel-dialog.settings');
     this.dialogGroup = controlPanel.querySelector('.panel-dialog.group');
     this.dialogBlockOptions = controlPanel.querySelector('.panel-dialog.blockoptions');
     this.dialogSymbols = controlPanel.querySelector('.panel-dialog.symbols');
@@ -42785,8 +43335,11 @@ class ControlPanel {
     this.objDialogIcons = new Icons(this.dialogIcons, this.builder); // this.objDialogBlocks = new Blocks(this.dialogBlocks, this.builder);
 
     this.objDialogShadow = new Shadow(this.dialogShadow, this.builder);
-    this.objDialogImageAdjust = new ImageAdjust(this.dialogImageAdjust, this.builder);
-    this.objDialogSettings = new Settings(this.dialogSettings, this.builder);
+    this.objDialogImageAdjust = new ImageAdjust(this.dialogImageAdjust, this.builder); // Settings is a facility, not a selection level: it has nothing to do with
+    // what is selected, so it builds its own dialog in the editor's UI root
+    // and opens over everything.
+
+    this.objDialogSettings = new Settings(this.builder);
     this.objDialogGroup = new Group(this.dialogGroup, this.builder);
     this.objDialogBlockOptions = new BlockOptions(this.dialogBlockOptions, this.builder);
     this.objPanelText = new PanelText(this.panelText, this.builder); // comment/disable if using ContentBuilder's controlpanel
@@ -42945,9 +43498,7 @@ class ControlPanel {
 
     const btnSettings = controlPanel.querySelector('.btn-settings');
     btnSettings.addEventListener('click', () => {
-      this.objDialogSettings.open(); // const modal = document.querySelector('.modal-settings');
-      // this.modal.showModal(modal);
-
+      this.objDialogSettings.open();
       this.hidePop(this.more);
     }); // Accordion // Move to editorReady if using ContentBuilder's controlpanel
 
@@ -43178,7 +43729,9 @@ class ControlPanel {
       return;
     }
 
-    if (isOpen(this.dialogSettings)) {
+    const settingsModal = this.objDialogSettings.modal;
+
+    if (settingsModal && settingsModal.classList.contains('active')) {
       this.objDialogSettings.close();
       return;
     } // The element dock last: the pickers above are transient, opened for one
@@ -43394,7 +43947,11 @@ class ControlPanel {
 
     const target = textElement || el;
     const hasText = !!textElement;
-    const hasSource = this.builder.isOverlayImageElement(target);
+    const hasSource = this.builder.isOverlayImageElement(target); // A link is an aspect of its own: a heading can be one, so can an
+    // image, and so can an icon that is neither. panel-overlay.js owns the
+    // rule (which anchor, and whether it can be saved); this only names it.
+
+    const linkOf = node => !!(this.objPanelOverlay && this.objPanelOverlay.linkFor(node));
 
     if (!hasText && !hasSource) {
       // [FX-PATH] Decoration aspect. Ornament layers — a cloud, a
@@ -43409,7 +43966,8 @@ class ControlPanel {
         type: 'decoration',
         element: deco,
         hasText: false,
-        hasSource: false
+        hasSource: false,
+        hasLink: linkOf(deco)
       };
     }
 
@@ -43419,7 +43977,8 @@ class ControlPanel {
       type: type,
       element: target,
       hasText: hasText,
-      hasSource: hasSource
+      hasSource: hasSource,
+      hasLink: linkOf(target)
     };
   } // [FX-PATH] Which element a decoration click selects. Path-first, matching
   // the Motion picker: a compound object (3D die tumbling inside a flying
@@ -43765,6 +44324,7 @@ class ControlPanel {
     }
 
     this.breadcrumb.innerHTML = breadcrumbHtml;
+    this.showSectionQuickTool(selection);
     const links = this.breadcrumb.querySelectorAll('a');
     links.forEach(link => {
       link.addEventListener('click', e => {
@@ -43775,6 +44335,51 @@ class ControlPanel {
       });
     });
   }
+  /**
+   * The quick section controls, shown only when Section is the only crumb (a
+   * Box is selected). Deeper selections have their own arrows and these would
+   * read as "move this element".
+   */
+
+
+  showSectionQuickTool(selection) {
+    this.quickToolSelection = selection;
+    const show = selection === 'box' && this.builder.sectionQuickTool !== false;
+    this.sectionMoveBar.style.display = show ? '' : 'none';
+    this.btnSectionMore.style.display = show && this.sectionHeightAllowed() ? '' : 'none';
+    this.hidePop(this.heightPop);
+  }
+  /** Re-apply the switch in Settings to the selection already on screen. */
+
+
+  refreshSectionQuickTool() {
+    this.showSectionQuickTool(this.quickToolSelection);
+  } // Light up the height the section is on. `value` is passed straight after a
+  // click so the state is right even though the class lands on a timeout.
+
+
+  markSectionHeight(value) {
+    const section = this.builder.activeSection;
+    if (!section) return;
+    this.heightPop.querySelectorAll('[data-sectionheight]').forEach(btn => {
+      const h = btn.getAttribute('data-sectionheight');
+      const on = value !== undefined ? h === value && h !== '0' : section.classList.contains('is-section-' + h);
+      btn.classList.toggle('on', on);
+    });
+  } // A plugin that owns its whole section can refuse the height presets
+  // (contentbox.sectionHeight === false), exactly as the Section panel reads
+  // it. Then the pop has nothing to show and the button goes with it.
+
+
+  sectionHeightAllowed() {
+    const section = this.builder.activeSection;
+    if (!section || !section.classList.contains('is-box')) return true;
+    const el = section.querySelector('.is-overlay-content [data-cb-type]');
+    if (!el) return true;
+    const runtime = this.builder.win.builderRuntime;
+    const plugin = runtime && runtime.getPlugin(el.getAttribute('data-cb-type'));
+    return !(plugin && plugin.contentbox && plugin.contentbox.sectionHeight === false);
+  }
 
   animSelection(elm) {
     elm.classList.add('selection-active');
@@ -43796,6 +44401,7 @@ class ControlPanel {
       if (this.builder.contentSize) this.builder.contentSize.hide();
       this.markOverlaySelection(null);
       this.breadcrumb.innerHTML = '';
+      this.showSectionQuickTool('');
       this.title.innerHTML = '';
       this.title.style.display = 'none';
       this.empty.style.display = '';
@@ -44055,9 +44661,15 @@ class ControlPanel {
       const overlayTarget = this.overlayTarget(element); // Resolved once, here, not inside the branch below: it reads
       // computed style, and the dispatch would otherwise call it twice.
 
-      const buttonNow = this.buttonTarget(element);
+      const buttonNow = this.buttonTarget(element); // A code element sitting in an overlay is not a decorative layer:
+      // it has an editor of its own. Without this it would land on the
+      // Decoration note, which is the one place its code cannot be
+      // reached from. Only the block ITSELF — a layer that merely
+      // contains one still belongs to the overlay panel.
+
+      const overlayCodeBlock = overlayTarget && overlayTarget.element.matches('[data-cb-code]') ? overlayTarget.element : null;
 
-      if (overlayTarget) {
+      if (overlayTarget && !overlayCodeBlock) {
         // Overlay layer content (outside .is-container) — reduced panel
         // Name every aspect: titling an element 'Text' while the panel
         // leads with an image source reads as the wrong panel.
@@ -44069,6 +44681,7 @@ class ControlPanel {
         // backdrop setting that is not what they clicked.
         const parts = [];
         if (overlayTarget.hasText) parts.push(out('Text'));
+        if (overlayTarget.hasLink) parts.push(out('Link'));
         if (overlayTarget.hasSource) parts.push(out('Image'));
         if (!parts.length) parts.push(out('Decoration')); // [FX-PATH]
 
@@ -61382,9 +61995,9 @@ class UndoRedo {
       [data-html] and [data-html] logic never touches [data-cb-code].
 */
 
-const ATTR$1 = 'data-cb-code';
-const SEL$1 = '[' + ATTR$1 + ']';
-const TPL_SEL$1 = ':scope > template[data-source]';
+const ATTR = 'data-cb-code';
+const SEL = '[' + ATTR + ']';
+const TPL_SEL = ':scope > template[data-source]';
 
 /*
     Prevent a literal </template> inside user code from prematurely closing the
@@ -61392,7 +62005,7 @@ const TPL_SEL$1 = ':scope > template[data-source]';
     (save -> load). Inside a JS string, <\/template> is identical to </template>
     at runtime. (Same convention as the classic <\/script>.)
 */
-function escapeCodeSource$1(src) {
+function escapeCodeSource(src) {
   return src.replace(/<\/template>/gi, '<\\/template>');
 }
 
@@ -61407,14 +62020,14 @@ function escapeCodeSource$1(src) {
     Exported standalone as well, so it can be used where no builder instance
     exists yet (ContentBox injects content before creating the editor).
 */
-function wrapCodeSource$1(html) {
+function wrapCodeSource(html) {
   if (!html) return html;
-  if (html.indexOf(ATTR$1) === -1) return html; // fast path
+  if (html.indexOf(ATTR) === -1) return html; // fast path
 
   const parsed = new DOMParser().parseFromString(html, 'text/html');
-  parsed.querySelectorAll(SEL$1).forEach(block => {
+  parsed.querySelectorAll(SEL).forEach(block => {
     // Already wrapped (round-trip within the editor) => skip
-    if (block.querySelector(TPL_SEL$1)) return;
+    if (block.querySelector(TPL_SEL)) return;
 
     // Snippet form (data-src) is already inert => handled by init()
     if (block.hasAttribute('data-src')) return;
@@ -61424,7 +62037,7 @@ function wrapCodeSource$1(html) {
     block.innerHTML = '';
     const tpl = parsed.createElement('template');
     tpl.setAttribute('data-source', '');
-    tpl.innerHTML = escapeCodeSource$1(src);
+    tpl.innerHTML = escapeCodeSource(src);
     block.appendChild(tpl);
   });
   return parsed.body.innerHTML;
@@ -61443,7 +62056,7 @@ class CodeElement {
     // hideControls), and so it also works in non-editable columns.
     this.doDocumentClick = e => {
       if (!e.target || !e.target.closest) return;
-      const block = e.target.closest(SEL$1);
+      const block = e.target.closest(SEL);
       if (block && this.inContentArea(block)) {
         this.activeBlock = block;
         // ContentBox drives editing from its side panel (same as
@@ -61485,7 +62098,7 @@ class CodeElement {
     return this.builder.util.makeId();
   }
   getTemplate(block) {
-    return block.querySelector(TPL_SEL$1);
+    return block.querySelector(TPL_SEL);
   }
 
   /*
@@ -61512,7 +62125,7 @@ class CodeElement {
     return this.contentRoots().some(root => root.contains(block));
   }
   escapeSource(src) {
-    return escapeCodeSource$1(src);
+    return escapeCodeSource(src);
   }
 
   /*
@@ -61528,7 +62141,7 @@ class CodeElement {
     return ids;
   }
   wrapSource(html) {
-    return wrapCodeSource$1(html);
+    return wrapCodeSource(html);
   }
 
   /*
@@ -61584,7 +62197,7 @@ class CodeElement {
   rerenderAll(root) {
     const scope = root || this.builder.doc;
     if (!scope || !scope.querySelectorAll) return;
-    scope.querySelectorAll(SEL$1).forEach(block => this.render(block));
+    scope.querySelectorAll(SEL).forEach(block => this.render(block));
   }
 
   /*
@@ -61617,7 +62230,7 @@ class CodeElement {
       }
 
       // 2) Earlier code element templates (not part of live DOM queries)
-      const otherTpls = roots[r].querySelectorAll(SEL$1 + ' > template[data-source]');
+      const otherTpls = roots[r].querySelectorAll(SEL + ' > template[data-source]');
       for (let i = 0; i < otherTpls.length; i++) {
         const otherTpl = otherTpls[i];
         if (otherTpl === tpl) continue;
@@ -61659,7 +62272,7 @@ class CodeElement {
   */
   init(container) {
     if (!container || !container.querySelectorAll) return;
-    const blocks = container.querySelectorAll(SEL$1);
+    const blocks = container.querySelectorAll(SEL);
     if (blocks.length === 0) return;
     this.ensureCss();
     blocks.forEach(block => {
@@ -61840,7 +62453,7 @@ class CodeElement {
         markup filled the section on the page.
     */
     style.textContent = `
-            [${ATTR$1}] { min-height: 30px; -webkit-user-select: none; user-select: none; }
+            [${ATTR}] { min-height: 30px; -webkit-user-select: none; user-select: none; }
         `;
     doc.head.appendChild(style);
   }
@@ -73964,10 +74577,10 @@ class Image$1 {
 
                         <div class="cb-field">
                         <label class="label-checkbox">
-                            <input class="input-newwindow" id="__input_newwindow2" type="checkbox" /> ${util.out('Open new window')}
+                            <input class="input-newwindow" id="__input_newwindow2" type="checkbox" /> ${util.out('Open in new tab')}
                         </label>
-                        <label class="label-checkbox" id="lblImageLinkOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
-                            <input class="input-openlightbox" id="__input_openlightbox2" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
+                        <label class="label-checkbox mt-1" id="lblImageLinkOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
+                            <input class="input-openlightbox" id="__input_openlightbox2" type="checkbox" /> ${util.out('Open in a lightbox')}
                         </label>
                         </div>
 
@@ -75047,9 +75660,22 @@ class ButtonEditor {
     if (cmd === 'href') setHref(el, value);else if (cmd === 'newtab') setNewTab(el, value);else if (cmd === 'fontsize') setFontSize(el, value === '' ? '' : parseInt(value, 10));else if (cmd === 'tracking') {
       if (value !== '') setTracking(el, parseInt(value, 10));
     } else if (cmd === 'margin') setMargin(el, side, value === '' ? 0 : parseInt(value, 10));
+    if (cmd === 'href' || cmd === 'newtab') this.syncLinkDialog(el);
     this.builder.opts.onChange();
     this.realtime();
   }
+
+  // The link dialog edits the same href/target and can be open alongside this
+  // panel. Its fields are read when it opens, so without this its Ok would
+  // write back the link as it was before the panel touched it.
+  syncLinkDialog(el) {
+    const modal = this.builderStuff.querySelector('.is-modal.createlink');
+    if (!modal || !this.dom.hasClass(modal, 'active')) return;
+    const url = modal.querySelector('.input-url');
+    if (url && document.activeElement !== url) url.value = el.getAttribute('href') || '';
+    const newwindow = modal.querySelector('.input-newwindow');
+    if (newwindow) newwindow.checked = el.getAttribute('target') === '_blank';
+  }
   openColor(cmd, btn) {
     const el = this.getButton();
     if (!el) return;
@@ -75368,6 +75994,23 @@ class Hyperlink {
       this.buttonEditor = new ButtonEditor(this.builder);
     }
   }
+
+  // The link dialog and a button UI can be open at the same time and both
+  // show the link's href and target. After the dialog writes to the link,
+  // the button UI has to re-read it, or it keeps showing (and writing back)
+  // the old values. The host can own that UI instead (onButtonEdit).
+  syncButtonUI(link) {
+    if (!link || !link.isConnected) return;
+    if (this.builder.opts.onButtonEdit) {
+      if (link === this.builder.activeLinkButton) this.builder.opts.onButtonEdit(link);
+      return;
+    }
+    const dom = this.builder.dom;
+    const buttonModal = this.builder.builderStuff.querySelector('.is-modal.buttoneditor');
+    if (!buttonModal || !dom.hasClass(buttonModal, 'active')) return;
+    if (!this.buttonEditor) this.buttonEditor = new ButtonEditor(this.builder);
+    this.buttonEditor.realtime();
+  }
   renderPanel() {
     const builderStuff = this.builder.builderStuff;
     const util = this.builder.util;
@@ -75399,10 +76042,10 @@ class Hyperlink {
                     </div>
                     <div class="cb-field">
                         <label class="label-checkbox">
-                            <input class="input-newwindow" id="__input_newwindow" type="checkbox" /> ${util.out('Open new window')}
+                            <input class="input-newwindow" id="__input_newwindow" type="checkbox" /> ${util.out('Open in new tab')}
                         </label>
-                        <label class="label-checkbox" id="lblOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
-                            <input class="input-openlightbox" id="__input_openlightbox" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
+                        <label class="label-checkbox mt-1" id="lblOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
+                            <input class="input-openlightbox" id="__input_openlightbox" type="checkbox" /> ${util.out('Open in a lightbox')}
                         </label>
                     </div>
                     <div class="cb-field">
@@ -75445,6 +76088,7 @@ class Hyperlink {
       let inputOk = modal.querySelector('.input-ok');
       dom.addEventListener(inputOk, 'click', () => {
         this.builder.uo.saveForUndo();
+        let editedLink = null;
         let link = this.builder.activeLink;
         if (link) {
           // Edit Existing Link
@@ -75454,35 +76098,19 @@ class Hyperlink {
           let linktext = modal.querySelector('.input-text').value;
           if (linktext === '') linktext = url;
 
-          // Engine seam: edit / unlink an existing link via Inscribe.
-          // A cleared URL means UNLINK. Icon links stay legacy.
-          if (this.builder.opts.engine === 'inscribe' && !this.builder.activeIcon) {
+          // Engine seam: only UNLINK (a cleared URL) goes through
+          // Inscribe. An edit is applied in place below: region.link()
+          // re-wraps the selection in a NEW plain <a>, which dropped
+          // the link's classes and inline styles, so changing a
+          // button's URL stripped the button. Icon links stay legacy.
+          if (url === '' && this.builder.opts.engine === 'inscribe' && !this.builder.activeIcon) {
             const region = this.builder.editingEngine.active;
             if (region && link.isConnected) {
               dom.selectElementContents(link); // target the link
-              if (url !== '') {
-                const attrs = {
-                  target: modal.querySelector('.input-newwindow').checked ? '_blank' : '',
-                  title: title || '',
-                  class: modal.querySelector('.input-openlightbox').checked ? 'is-lightbox' : ''
-                };
-                const created = region.link(url, attrs); // re-wraps, returns <a>
-                if (created && linktext && created.textContent !== linktext) {
-                  created.textContent = linktext;
-                }
-                this.builder.opts.onChange();
-                util.hideModal(modal);
-                if (created && created.isConnected) {
-                  region.focus();
-                  dom.selectElementContents(created);
-                  util.saveSelection();
-                }
-              } else {
-                region.unlink();
-                this.hideTool();
-                this.builder.opts.onChange();
-                util.hideModal(modal);
-              }
+              region.unlink();
+              this.hideTool();
+              this.builder.opts.onChange();
+              util.hideModal(modal);
               return;
             }
           }
@@ -75490,6 +76118,7 @@ class Hyperlink {
             link.setAttribute('href', url);
             if (modal.querySelector('.input-newwindow').checked) {
               link.setAttribute('target', '_blank');
+              if (!link.getAttribute('rel')) link.setAttribute('rel', 'noopener noreferrer');
             } else {
               link.removeAttribute('target');
             }
@@ -75501,7 +76130,14 @@ class Hyperlink {
             if (this.builder.activeIcon) ; else {
               link.innerHTML = linktext;
             }
-            link.setAttribute('title', title);
+            if (title) link.setAttribute('title', title);else link.removeAttribute('title');
+
+            // A button UI (this editor's Button panel, or the
+            // host's own) shows the same link and can be open at
+            // the same time as this dialog, so it has to re-read
+            // what was just written.
+            this.syncButtonUI(link);
+            editedLink = link;
           } else {
             // link.outerHTML = link.innerHTML;
             this.hideTool();
@@ -75659,6 +76295,17 @@ class Hyperlink {
           this.builder.opts.onRender();
         }
         util.hideModal(modal);
+
+        // hideModal() blurs, so the caret goes back on the edited link
+        // afterwards: the dialog can be reopened straight away.
+        if (editedLink && editedLink.isConnected && !this.builder.activeIcon) {
+          const region = this.builder.editingEngine.active;
+          if (region) {
+            region.focus();
+            dom.selectElementContents(editedLink);
+            util.saveSelection();
+          }
+        }
       });
       let inputCancel = modal.querySelector('.input-cancel');
       dom.addEventListener(inputCancel, 'click', () => {
@@ -75804,7 +76451,10 @@ class Hyperlink {
     }
 
     // Button Stuff
-    if (this.builder.useButtonPlugin) {
+    // A host with its own button UI (onButtonEdit) already opens it by
+    // selecting the button, so the pencil is a second route to the same
+    // panel and is left out.
+    if (this.builder.useButtonPlugin || this.builder.opts.onButtonEdit) {
       linkTool.querySelector('.link-button-edit').style.display = 'none';
     } else {
       if (link && this.builder.activeLinkButton) linkTool.querySelector('.link-button-edit').style.display = 'block';else linkTool.querySelector('.link-button-edit').style.display = 'none';
@@ -76108,6 +76758,11 @@ class Button {
       this.buttonEditor.realtime();
     }
     const buttonTool = this.buttonTool;
+
+    // A host with its own button UI (onButtonEdit) already opens it by
+    // 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';
@@ -90676,7 +91331,16 @@ class ColorPickerKelir {
     }
 
     // Close the picker on scroll — it's positioned once, so scrolling detaches it.
-    const hideOnScroll = () => {
+    //
+    // The page moving under the picker is the only scroll that counts. A text
+    // input scrolls its own content whenever the caret passes the edge — on
+    // paste, on Delete, on Cmd+Left/Right — and that is a scroll event too,
+    // which a capture listener on window receives even though it does not
+    // bubble. Without this guard the picker closed while its own hex field
+    // was being edited.
+    const hideOnScroll = e => {
+      const target = e && e.target;
+      if (target && target.nodeType === 1 && popPicker.contains(target)) return;
       this.builder.util.hidePop(popPicker);
       window.removeEventListener('scroll', hideOnScroll, true);
       if (this.builder.win && this.builder.win !== window) this.builder.win.removeEventListener('scroll', hideOnScroll, true);
@@ -137250,6 +137914,90 @@ class ContentBuilder {
   openFilePicker(type, callback) {
     this.openAssetSelect(type, callback);
   }
+
+  /**
+   * Is an asset manager reachable for this type of file? Mirrors the branches
+   * openAsset() takes: either a picker page (filePicker / imageSelect / ...)
+   * or the host's own onXSelectClick handler.
+   */
+  hasFilePicker(type) {
+    if (type === 'media') return !!(this.onMediaSelectClick || this.onImageSelectClick || this.mediaSelect || this.imageSelect);
+    if (type === 'video') return !!(this.onVideoSelectClick || this.videoSelect);
+    if (type === 'audio') return !!(this.onAudioSelectClick || this.audioSelect);
+    if (type === 'all') return !!(this.onFileSelectClick || this.fileSelect);
+    return !!(this.onImageSelectClick || this.imageSelect);
+  }
+
+  /**
+   * Upload a file from the user's computer and hand its URL to `callback`.
+   *
+   * The per-type upload handler always exists — a builder configured without
+   * one gets the data-URL fallback — so this is available whatever the host
+   * set up. The URL comes back through returnUrl(), the same path the image
+   * tool's upload button uses.
+   */
+  openFileUpload(type, callback) {
+    const accept = type === 'video' ? 'video/*' : type === 'audio' ? 'audio/*' : type === 'media' ? 'image/*,video/*' : type === 'all' ? '*' : 'image/*';
+    const handler = type === 'video' ? this.onVideoUpload : type === 'audio' ? this.onAudioUpload : type === 'media' ? this.onMediaUpload : type === 'all' ? this.onFileUpload : this.onImageUpload;
+    if (!handler) return;
+    const inpFile = document.createElement('input');
+    inpFile.type = 'file';
+    inpFile.accept = accept;
+    inpFile.style.display = 'none';
+    document.body.appendChild(inpFile);
+    inpFile.addEventListener('change', async e => {
+      if (!e.target.files || !e.target.files.length) {
+        inpFile.remove();
+        return;
+      }
+      this.onAssetUpload = url => {
+        if (callback) callback(url);
+      };
+      await handler(e);
+      inpFile.remove();
+    });
+    inpFile.click();
+  }
+
+  /**
+   * The file controls for a URL field in a plugin's settings: select from the
+   * asset manager, and upload from the computer.
+   *
+   * Returns the buttons to append next to the input, in the order and with the
+   * icons the editor's own image dialog uses — select first, upload last, and
+   * select only where an asset manager is configured. A plugin appends what it
+   * gets rather than deciding, so a builder without an asset manager never
+   * shows a button that cannot open one.
+   *
+   *   const [ ...buttons ] = builder.createFileButtons('media', (url) => {...});
+   *   row.append(input, ...buttons);
+   *
+   * `type` may be a function for a field whose kind follows another control
+   * (a Media Type select, say) — it is then read on each click.
+   */
+  createFileButtons(type, callback) {
+    const out = s => this.util.out(s);
+    const fileType = () => typeof type === 'function' ? type() : type;
+    const button = (label, icon, onClick) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'cbx-iconbtn';
+      btn.title = label;
+      btn.setAttribute('aria-label', label);
+      btn.innerHTML = `<svg aria-hidden="true"><use xlink:href="#${icon}"></use></svg>`;
+      btn.addEventListener('click', e => {
+        e.preventDefault();
+        onClick(btn);
+      });
+      return btn;
+    };
+    const buttons = [];
+    if (this.hasFilePicker(fileType())) {
+      buttons.push(button(out('Select'), 'icon-folder', btn => this.openFilePicker(fileType(), callback, btn)));
+    }
+    buttons.push(button(out('Upload'), 'icon-upload', () => this.openFileUpload(fileType(), callback)));
+    return buttons;
+  }
   openAssetSelect(targetAssetType, callback, defaultValue) {
     const inpUrl = document.createElement('input');
 
@@ -141372,59 +142120,6 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
   }
 }
 
-/*
-    codesource.js
-    ------------------------------------------------------------------
-    The two pure helpers ContentBox needs for [data-cb-code] blocks. Derived
-    from ContentBuilder's codeelement.js, which also defines a CodeElement
-    editor class — ContentBox never instantiates that, so it is not carried
-    here. Named for what this file is, not for where it came from.
-
-    wrapCodeSource() is a string pre-pass. Call it on any HTML string about to
-    be inserted with createContextualFragment (which executes scripts). It
-    parses with DOMParser -- where scripts can never run -- and moves each
-    [data-cb-code] block's source into an inert <template data-source>, so
-    nothing has run by the time the content is in the DOM.
-*/
-const ATTR = 'data-cb-code';
-const SEL = '[' + ATTR + ']';
-const TPL_SEL = ':scope > template[data-source]';
-function escapeCodeSource(src) {
-  return src.replace(/<\/template>/gi, '<\\/template>');
-}
-/*
-    STRING PRE-PASS (inert).
-    Call this on any HTML *string* that is about to be inserted with
-    createContextualFragment (which executes scripts). It parses the string with
-    DOMParser -- where scripts can never run -- and moves each [data-cb-code]
-    block's source into an inert <template data-source>. After insertion nothing
-    has run; init()/render() brings them to life.
-
-    Exported standalone as well, so it can be used where no builder instance
-    exists yet (ContentBox injects content before creating the editor).
-*/
-
-function wrapCodeSource(html) {
-  if (!html) return html;
-  if (html.indexOf(ATTR) === -1) return html; // fast path
-
-  const parsed = new DOMParser().parseFromString(html, 'text/html');
-  parsed.querySelectorAll(SEL).forEach(block => {
-    // Already wrapped (round-trip within the editor) => skip
-    if (block.querySelector(TPL_SEL)) return; // Snippet form (data-src) is already inert => handled by init()
-
-    if (block.hasAttribute('data-src')) return; // The block's innerHTML IS the pristine source (what flatten() wrote)
-
-    const src = block.innerHTML;
-    block.innerHTML = '';
-    const tpl = parsed.createElement('template');
-    tpl.setAttribute('data-source', '');
-    tpl.innerHTML = escapeCodeSource(src);
-    block.appendChild(tpl);
-  });
-  return parsed.body.innerHTML;
-}
-
 class Draggable {
   constructor(opts = {}) {
     this.opts = opts;
@@ -164393,6 +165088,12 @@ class ContentBox {
       // HTML button on left sidebar
       sectionHtmlButton: true,
       // HTML button on section tool (edits the selected section only)
+      sectionQuickTool: false,
+      // Quick section controls under the Section breadcrumb of the panel. Off by default so nothing changes for people who know the panel; users can switch them on in Settings.
+      sectionTool: true,
+      // Section tools on the page (move, HTML, settings, remove). Control panel only; users can switch these off in Settings.
+      boxTool: true,
+      // Box tools on the page (background upload & select, box & module settings). Control panel only; users can switch these off in Settings.
       undoRedoButtons: true,
       // Undo & redo buttons on control panel
       contentSizeSlider: true,
@@ -167804,7 +168505,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       localStorage.removeItem('_zoom'); // Reset zoom
 
       localStorage.removeItem('_livepreview');
-      localStorage.removeItem('_disableanimation');
+      localStorage.removeItem('_disableanimation'); // The user's own pick in Settings stands in front of the shipped
+      // default, like _fullviewwidth does.
+
+      if (localStorage.getItem('_sectionquicktool') !== null) this.sectionQuickTool = localStorage.getItem('_sectionquicktool') === '1';
+      if (localStorage.getItem('_sectiontool') !== null) this.sectionTool = localStorage.getItem('_sectiontool') === '1';
+      if (localStorage.getItem('_boxtool') !== null) this.boxTool = localStorage.getItem('_boxtool') === '1';
     }
 
     if (this.uploadFile) {
@@ -168060,7 +168766,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
           // scripts can run ([data-cb-code]); codeElement.init() then
           // renders them (called from applyBehaviorOn).
 
-          html = wrapCodeSource(html); // Render html content
+          html = wrapCodeSource$1(html); // Render html content
 
           let range = document.createRange();
           this.wrapperEl.innerHTML = '';
@@ -170845,6 +171551,18 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.editor.openAssetSelect(type, callback);
   }
 
+  hasFilePicker(type) {
+    return this.editor.hasFilePicker(type);
+  }
+
+  openFileUpload(type, callback) {
+    this.editor.openFileUpload(type, callback);
+  }
+
+  createFileButtons(type, callback) {
+    return this.editor.createFileButtons(type, callback);
+  }
+
   openColorPicker(currentColor, callback, btn) {
     this.editor.openColorPicker(currentColor, callback, btn);
   }
@@ -171003,7 +171721,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   sectionSetup(section) {
     let tool = section.querySelector('.is-section-tool');
     if (tool) tool.parentNode.removeChild(tool);
-    dom.appendHtml(section, `<div class="is-section-tool">
+    if (this.sectionToolEnabled) dom.appendHtml(section, `<div class="is-section-tool">
             <button type="button" class="btn-move-section-up" tabindex="-1" data-title="${out('Move Up')}" title="${out('Move Up')}">
                 <svg class="is-icon-flex" style="transform:rotate(180deg)"><use xlink:href="#icon-arrow-down2"></use></svg>
             </button>
@@ -171029,7 +171747,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     dom.appendHtml(section, '<div class="is-section-info">' + (sectionId ? `<div>#${sectionId}</div>` : '') + '</div>'); // this.editor.setTooltip(section);
     // Prepare for tooltip
 
-    let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
+    const sectionToolEl = section.querySelector('.is-section-tool');
+    let elms = sectionToolEl ? sectionToolEl.querySelectorAll('[title]') : [];
     Array.prototype.forEach.call(elms, elm => {
       elm.setAttribute('data-title', elm.getAttribute('title'));
 
@@ -171040,15 +171759,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
     });
     const btnSectionUp = section.querySelector('.btn-move-section-up');
-    btnSectionUp.addEventListener('click', () => {
+    if (btnSectionUp) btnSectionUp.addEventListener('click', () => {
       this.section.sectionMove('up');
     });
     const btnSectionDown = section.querySelector('.btn-move-section-down');
-    btnSectionDown.addEventListener('click', () => {
+    if (btnSectionDown) btnSectionDown.addEventListener('click', () => {
       this.section.sectionMove('down');
     });
     const btnSectionEdit = section.querySelector('.btn-section-edit');
-    btnSectionEdit.addEventListener('click', () => {
+    if (btnSectionEdit) btnSectionEdit.addEventListener('click', () => {
       if (this.controlPanel) {
         this.controlpanel.open();
         this.controlpanel.select('section', true);
@@ -171062,7 +171781,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       this.openSectionHtml(section);
     });
     const btnSectionRemove = section.querySelector('.btn-section-remove');
-    btnSectionRemove.addEventListener('click', () => {
+    if (btnSectionRemove) btnSectionRemove.addEventListener('click', () => {
       const modal = document.querySelector('.is-modal.delsectionconfirm');
 
       if (this.settings.deleteConfirm) {
@@ -171221,6 +171940,41 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   set activePlugin(el) {
     if (this.editor) this.editor.activePlugin = el;
   }
+  /**
+   * The page's own section and box tools, which the user can switch off in
+   * Settings (sectionTool / boxTool).
+   *
+   * Only with the control panel: everything those tools do is on the panel
+   * (the strip under the Section crumb, and the Box panel), so switching them
+   * off costs nothing there. In legacy modal mode they are the only way in, so
+   * the option is ignored and the tools always render.
+   */
+
+
+  get sectionToolEnabled() {
+    return this.controlPanel ? this.sectionTool !== false : true;
+  }
+
+  get boxToolEnabled() {
+    return this.controlPanel ? this.boxTool !== false : true;
+  }
+  /** Re-run the section/box setup so the tools appear or disappear right away. */
+
+
+  refreshPageTools() {
+    if (!this.wrapperEl) return;
+    this.wrapperEl.querySelectorAll('.is-section').forEach(section => {
+      this.sectionSetup(section);
+
+      if (dom.hasClass(section, 'is-box')) {
+        this.boxSetup(section);
+      } else {
+        section.querySelectorAll('.is-box').forEach(box => {
+          this.boxSetup(box);
+        });
+      }
+    });
+  }
 
   boxSetup(box) {
     let tool = box.querySelector('.is-box-tool');
@@ -171240,7 +171994,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     '</div>');
     */
 
-    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Upload Background') + '" title="' + out('Upload Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 8px;left: 8px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select Background') + '" title="' + out('Select Background') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>'); // Prepare for tooltip
+    if (this.boxToolEnabled) dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Upload Background') + '" title="' + out('Upload Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 8px;left: 8px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select Background') + '" title="' + out('Select Background') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>'); // Prepare for tooltip
 
     tool = box.querySelector('.is-box-tool');
 
@@ -171499,7 +172253,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
     if (el.closest('[data-cb-type]')) return false; // plugin — its own editable regions
 
-    if (el.closest('script, style, svg, noscript')) return false;
+    if (el.closest('script, style, svg, noscript')) return false; // Inside a code element, only markup that is still verbatim in the
+    // block's source can be edited: the render is discarded on save, so an
+    // edit to anything the code built itself would not survive it. The
+    // block itself is never text — its content is edited as code, and
+    // writing to it here would overwrite the source template.
+
+    if (el.matches('[data-cb-code]')) return false;
+    if (!codeSourceEditable(el)) return false;
     if (!this.hasOwnText(el)) return false;
 
     for (let parent = el.parentElement; parent && parent !== overlay; parent = parent.parentElement) {
@@ -171546,6 +172307,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     if (el.closest('.is-container')) return false;
     if (el.closest('[data-html]')) return false;
     if (el.closest('[data-cb-type]')) return false;
+    if (el.matches('[data-cb-code]')) return false; // code element — see isOverlayTextElement
+
+    if (!codeSourceEditable(el)) return false;
     if (el.tagName.toLowerCase() === 'img') return !el.hasAttribute('data-fixed');
     return this.hasBackgroundImage(el);
   }
@@ -172528,19 +173292,21 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       sectionTool.style.transformOrigin = 'top right';
     }
 
-    const btnSectionUp = sectionTool.querySelector('.btn-move-section-up');
-    const btnSectionDown = sectionTool.querySelector('.btn-move-section-down');
-    const btnSectionRemove = sectionTool.querySelector('.btn-section-remove');
-
-    if (box.offsetHeight < 160) {
-      btnSectionUp.style.display = 'none';
-      btnSectionDown.style.display = 'none';
-      btnSectionRemove.style.display = 'none';
-      sectionTool.style.top = '17px'; //'calc(50% - 17px)';
-    } else {
-      btnSectionUp.style.display = '';
-      btnSectionDown.style.display = '';
-      btnSectionRemove.style.display = '';
+    if (sectionTool) {
+      const btnSectionUp = sectionTool.querySelector('.btn-move-section-up');
+      const btnSectionDown = sectionTool.querySelector('.btn-move-section-down');
+      const btnSectionRemove = sectionTool.querySelector('.btn-section-remove');
+
+      if (box.offsetHeight < 160) {
+        btnSectionUp.style.display = 'none';
+        btnSectionDown.style.display = 'none';
+        btnSectionRemove.style.display = 'none';
+        sectionTool.style.top = '17px'; //'calc(50% - 17px)';
+      } else {
+        btnSectionUp.style.display = '';
+        btnSectionDown.style.display = '';
+        btnSectionRemove.style.display = '';
+      }
     } //new box tool
 
 
@@ -173274,7 +174040,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     // run ([data-cb-code]). Legacy [data-html] blocks are untouched.
 
 
-    html = wrapCodeSource(html); // Render html content
+    html = wrapCodeSource$1(html); // Render html content
 
     let range = document.createRange();
     wrapper.innerHTML = '';