@accelerated-agency/visual-editor 0.4.3 → 0.4.4

package/dist/vite.cjs

@@ -86,17 +86,26 @@ function hasTrackingMarker(input, markers) {
   }
   return false;
 }
+function patchKnownUnsafeEditorPatterns(scriptTag) {
+  let out = String(scriptTag || "");
+  out = out.replace(
+    /dragRegion\.addEventListener\((['"])pointerdown\1,\s*onPointerDown\);?/g,
+    "if (typeof dragRegion !== 'undefined' && dragRegion) dragRegion.addEventListener($1pointerdown$1, onPointerDown);"
+  );
+  return out;
+}
 function stripTrackingScriptsFromScrapedHtml(html, markers) {
   let removedCount = 0;
   let out = html;
   out = out.replace(/<script\b[\s\S]*?<\/script>/gi, (tag) => {
+    var patchedTag = patchKnownUnsafeEditorPatterns(tag);
     const srcMatch = tag.match(/\bsrc\s*=\s*(["'])(.*?)\1/i);
     const src = srcMatch?.[2] || "";
     if (hasTrackingMarker(src, markers) || hasTrackingMarker(tag, markers)) {
       removedCount += 1;
       return "";
     }
-    return tag;
+    return patchedTag;
   });
   out = out.replace(/<noscript\b[\s\S]*?<\/noscript>/gi, (tag) => {
     if (!hasTrackingMarker(tag, markers)) return tag;
@@ -860,7 +869,7 @@ select.pr-inp{cursor:pointer;background:#fff}
         <button class="tb-dk-btn" title="More options"><i class="bi bi-three-dots"></i></button>
       </div>
       <button class="tb-dk-btn" id="btn-undo" title="Undo (\u2318Z)"><i class="bi bi-arrow-counterclockwise"></i></button>
-      <button class="tb-dk-btn" id="btn-redo" title="Redo (\u2318\u21E7Z)"><i class="bi bi-arrow-clockwise"></i></button>
+      <button class="tb-dk-btn" id="btn-redo" title="Redo (\u2318\u21E7Z)" style="display:none"><i class="bi bi-arrow-clockwise"></i></button>
     </div>
 
     <div id="iframe-loading-toolbar" class="tb-page-loading" aria-live="polite" aria-atomic="true">
@@ -931,8 +940,8 @@ select.pr-inp{cursor:pointer;background:#fff}
       <!-- Elements -->
       <div class="lp-sec lp-sec-no-border">
         <div class="lp-sec-hd">
-          <span class="lp-sec-hd-left">Elements <i class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
-          <button class="lp-add-btn" title="Add element">+ Add</button>
+          <span class="lp-sec-hd-left">Elements <i style="display:none" class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
+          <button class="lp-add-btn" id="btn-add-element" title="Add element">+ Add</button>
         </div>
 
         <!-- Search (hidden, kept for JS) -->
@@ -1002,14 +1011,16 @@ select.pr-inp{cursor:pointer;background:#fff}
 
     <!-- Right panel -->
     <div id="right-panel">
-      <!-- Left-tab controls moved here -->
-      <div class="section-components-tabs">
-        <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
-        <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
-      </div>
-      <div class="lp-body">
-        <div id="tab-components" class="tab-pane"></div>
-        <div id="tab-sections" class="tab-pane"></div>
+      <div id="section-components-panel" style="display:none">
+        <!-- Left-tab controls moved here -->
+        <div class="section-components-tabs">
+          <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
+          <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
+        </div>
+        <div class="lp-body">
+          <div id="tab-components" class="tab-pane"></div>
+          <div id="tab-sections" class="tab-pane"></div>
+        </div>
       </div>
       <!-- Element badge (hidden until selection) -->
       <div id="el-info" style="display:none">
@@ -1666,6 +1677,19 @@ function switchSectionComponentsTab(tab) {
   renderSidebar(inp ? inp.value : '');
 }
 
+function toggleSectionComponentsPanel(forceVisible) {
+  var panel = document.getElementById('section-components-panel');
+  if (!panel) return;
+  var shouldShow =
+    typeof forceVisible === 'boolean'
+      ? forceVisible
+      : panel.style.display === 'none';
+  panel.style.display = shouldShow ? '' : 'none';
+  if (shouldShow) {
+    switchSectionComponentsTab(currentSectionComponentsTab || 'components');
+  }
+}
+
 // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function toggleAcc(name) {
   var sec = document.getElementById('acc-' + name);
@@ -1875,6 +1899,24 @@ function syncDesignInput(change) {
 function removeStateChange(idx) {
   var change = stateChanges[idx];
   if (!change) return;
+  if (change.isStructuralLive) {
+    removeSessionStructuralRowByTimestamp(
+      change.structuralVarId || activeVarId,
+      change.vveTs,
+    );
+    stateChanges.splice(idx, 1);
+    commitStateChangesForActiveVariation();
+    renderStatesTab();
+    if (currentMainTab === 'history') renderHistoryTab();
+    try {
+      delete varHtmlCache[activeVarId];
+    } catch(_) {}
+    appliedStructuralChangesetKeys = {};
+    recomputeEditorDirty();
+    scheduleDomTreeRefresh();
+    softReloadEditorIframe();
+    return;
+  }
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
@@ -2231,6 +2273,14 @@ function getLatestHistoryUndoTarget() {
   return list.length ? list[0] : null;
 }
 
+function getLatestLiveUndoTarget() {
+  var list = getUnifiedHistoryItems();
+  for (var i = 0; i < list.length; i++) {
+    if (list[i] && list[i].source === 'live') return list[i];
+  }
+  return null;
+}
+
 function changesetListHasStructural(arr) {
   if (!arr || !arr.length) return false;
   for (var i = 0; i < arr.length; i++) {
@@ -2329,8 +2379,15 @@ function removeHistoryChangeset(idx, evt) {
 function clearAllHistoryChangesets() {
   var v = getActiveVariationForHistory();
   if (!v) return;
-  if (!parseVariationChangesets(v).length) return;
+  var hasSavedChangesets = parseVariationChangesets(v).length > 0;
+  var hasSessionStructural =
+    !!(activeVarId && sessionStructuralChainRowsByVarId[activeVarId] && sessionStructuralChainRowsByVarId[activeVarId].length);
+  if (!hasSavedChangesets && !hasSessionStructural) return;
+
   persistActiveVariationChangesets([]);
+  if (activeVarId) {
+    sessionStructuralChainRowsByVarId[activeVarId] = [];
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   try {
@@ -2343,6 +2400,10 @@ function clearAllHistoryChangesets() {
 }
 
 function clearAllUnifiedHistory() {
+  if (activeVarId) {
+    // Ensure structural unsaved rows are also removed by "Clear all changes".
+    sessionStructuralChainRowsByVarId[activeVarId] = [];
+  }
   clearAllStates();
   clearAllHistoryChangesets();
   if (currentMainTab === 'history') renderHistoryTab();
@@ -2354,15 +2415,32 @@ var VVE_LOCAL_STORAGE_PREFIX = 'vve:';
 
 function clearVisualEditorLocalStorage() {
   try {
-    for (var i = localStorage.length - 1; i >= 0; i--) {
-      var k = localStorage.key(i);
-      if (k && k.indexOf(VVE_LOCAL_STORAGE_PREFIX) === 0) {
-        localStorage.removeItem(k);
+    var stores = [];
+    try { stores.push(localStorage); } catch(_) {}
+    try { stores.push(sessionStorage); } catch(_) {}
+    for (var si = 0; si < stores.length; si++) {
+      var store = stores[si];
+      if (!store) continue;
+      for (var i = store.length - 1; i >= 0; i--) {
+        var k = store.key(i);
+        if (k && k.indexOf(VVE_LOCAL_STORAGE_PREFIX) === 0) {
+          store.removeItem(k);
+        }
       }
     }
   } catch(_) {}
 }
 
+function clearPersistedActiveVariationForData(data) {
+  try {
+    var sk = activeVariationStorageKeyFromPayload(data);
+    if (sk && sk !== VVE_LOCAL_STORAGE_PREFIX + 'activeVar::') {
+      try { localStorage.removeItem(sk); } catch(_) {}
+      try { sessionStorage.removeItem(sk); } catch(_) {}
+    }
+  } catch(_) {}
+}
+
 function activeVariationStorageKeyFromPayload(data) {
   return (
     VVE_LOCAL_STORAGE_PREFIX +
@@ -2401,14 +2479,18 @@ function writePersistedActiveVariationId(varId) {
  * @param allowPrevMemory when true, keep in-session activeVarId if still valid (skip-reload path).
  */
 function pickActiveVariationIdForLoad(data, variationsArr, prevMemoryId, allowPrevMemory) {
-  var baseline = variationsArr.find(function(v) { return v.baseline; });
-  var fallback = (baseline || variationsArr[0] || {})._id || null;
+  var firstNonBaseline = variationsArr.find(function(v) { return !v.baseline; });
+  var fallback = (firstNonBaseline || variationsArr[0] || {})._id || null;
   if (!variationsArr.length) return null;
   if (allowPrevMemory && prevMemoryId && variationsArr.some(function(v) { return v._id === prevMemoryId; })) {
     return prevMemoryId;
   }
   var stored = readPersistedActiveVariationId(data);
   if (stored && variationsArr.some(function(v) { return v._id === stored; })) {
+    var storedVar = variationsArr.find(function(v) { return v._id === stored; });
+    if (storedVar && storedVar.baseline && firstNonBaseline && firstNonBaseline._id) {
+      return firstNonBaseline._id;
+    }
     return stored;
   }
   return fallback;
@@ -2632,7 +2714,13 @@ function granularAnySelectorMatches(doc, cs) {
 
 /** Bust bfcache / same-URL no-op reloads so the iframe actually re-parses (loading \u2192 interactive). */
 function appendIframeReloadBust(url) {
-  return url;
+  try {
+    var u = new URL(String(url || ''), window.location.href);
+    u.searchParams.set('_vve_reload', String(Date.now()));
+    return u.toString();
+  } catch(_) {
+    return url;
+  }
 }
 
 // True when the iframe contentDocument belongs to the current iframe.src navigation.
@@ -3010,6 +3098,44 @@ function appendSessionStructuralChainRow(varId, row) {
   sessionStructuralChainRowsByVarId[varId].push(row);
 }
 
+function markStructuralRowApplied(row) {
+  try {
+    var k = structuralChangesetDedupKey(row);
+    if (k) appliedStructuralChangesetKeys[k] = true;
+  } catch(_) {}
+}
+
+function logStructuralStateChange(row, label, value, targetEl) {
+  if (!row || !row.selector) return;
+  stateChanges.push({
+    selector: row.selector,
+    inputId: 'vve-struct',
+    label: label || 'Structure change',
+    cssProp: null,
+    value: value != null ? String(value) : String(row.type || ''),
+    targetEl: targetEl || null,
+    originalValue: '',
+    vveTs: row.vveTs || nextHistoryTimestamp(),
+    isStructuralLive: true,
+    structuralVarId: activeVarId || null,
+    structuralType: row.type || '',
+  });
+  if (currentMainTab === 'history') renderHistoryTab();
+  commitStateChangesForActiveVariation();
+}
+
+function removeSessionStructuralRowByTimestamp(varId, ts) {
+  if (!varId || !ts) return;
+  var arr = sessionStructuralChainRowsByVarId[varId];
+  if (!arr || !arr.length) return;
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (arr[i] && arr[i].vveTs === ts) {
+      arr.splice(i, 1);
+      return;
+    }
+  }
+}
+
 /** One States-tab row -> Conversion.io chain-set shape (matches applyChangesetEntry). */
 function stateChangeToChainSet(c) {
   if (!c || !c.selector) return null;
@@ -3704,12 +3830,15 @@ function duplicateSelectedEl() {
     clone.setAttribute('data-vve-instance', generateVveInstanceId());
   } catch(_) {}
   if (activeVarId) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var dupRow = {
       selector: anchorSel,
       type: 'insert',
       action: 'after',
       html: clone.outerHTML,
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, dupRow);
+    markStructuralRowApplied(dupRow);
+    logStructuralStateChange(dupRow, 'Duplicated via toolbar', 'Duplicate inserted', selectedEl);
   }
   selectedEl.parentNode.insertBefore(clone, selectedEl.nextSibling);
   saveCurrentVariationHtml();
@@ -3725,23 +3854,27 @@ function toggleHideSelectedEl() {
     selectedEl.style.visibility = '';
     selectedEl.removeAttribute('data-vve-hidden');
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var showRow = {
         selector: hidSel,
         type: 'style',
         property: 'visibility',
         value: '',
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, showRow);
+      logStructuralStateChange(showRow, 'Shown via toolbar', 'Visibility restored', selectedEl);
     }
   } else {
     selectedEl.style.visibility = 'hidden';
     selectedEl.setAttribute('data-vve-hidden', '1');
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var hideRow = {
         selector: hidSel,
         type: 'style',
         property: 'visibility',
         value: 'hidden',
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, hideRow);
+      logStructuralStateChange(hideRow, 'Hidden via toolbar', 'Visibility set to hidden', selectedEl);
     }
   }
   saveCurrentVariationHtml();
@@ -3752,7 +3885,11 @@ function deleteSelectedEl() {
   if (!selectedEl || !selectedEl.parentNode) return;
   var delSel = buildSelector(selectedEl);
   selectedEl.remove();
-  if (activeVarId) appendSessionStructuralChainRow(activeVarId, { selector: delSel, type: 'remove' });
+  if (activeVarId) {
+    var delRow = { selector: delSel, type: 'remove' };
+    appendSessionStructuralChainRow(activeVarId, delRow);
+    logStructuralStateChange(delRow, 'Deleted via toolbar', 'Element removed', null);
+  }
   saveCurrentVariationHtml();
   recomputeEditorDirty();
   deselectElement();
@@ -4653,19 +4790,25 @@ function recordReorderAfterDrag(movedEl) {
   var prev = movedEl.previousElementSibling;
   var next = movedEl.nextElementSibling;
   if (prev) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var reorderAfterRow = {
       selector: buildSelector(movedEl),
       type: 'reorder',
       targetSelector: buildSelector(prev),
       action: 'after',
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, reorderAfterRow);
+    markStructuralRowApplied(reorderAfterRow);
+    logStructuralStateChange(reorderAfterRow, 'Reordered via drag', 'Moved after sibling', movedEl);
   } else if (next) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var reorderBeforeRow = {
       selector: buildSelector(movedEl),
       type: 'reorder',
       targetSelector: buildSelector(next),
       action: 'before',
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, reorderBeforeRow);
+    markStructuralRowApplied(reorderBeforeRow);
+    logStructuralStateChange(reorderBeforeRow, 'Reordered via drag', 'Moved before sibling', movedEl);
   }
 }
 
@@ -4946,12 +5089,15 @@ function insertHtml(html) {
     }
     if (firstEl) selectElement(firstEl);
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var insertRow = {
         selector: anchorSel,
         type: 'insert',
         action: 'after',
         html: htmlStr,
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, insertRow);
+      markStructuralRowApplied(insertRow);
+      logStructuralStateChange(insertRow, 'Added component/section', 'Inserted new element', firstEl || selectedEl);
     }
     saveCurrentVariationHtml();
     recomputeEditorDirty();
@@ -5041,6 +5187,14 @@ document.getElementById('comp-search').addEventListener('input', function() {
     renderSidebar(this.value);
   }
 });
+var btnAddElement = document.getElementById('btn-add-element');
+if (btnAddElement) {
+  btnAddElement.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleSectionComponentsPanel();
+  });
+}
 
 // \u2500\u2500 Save / Close \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 document.getElementById('btn-save').addEventListener('click', handleSave);
@@ -5081,11 +5235,21 @@ function handleSave() {
 }
 
 function handleClose() {
+  clearPersistedActiveVariationForData(experimentData);
   clearVisualEditorLocalStorage();
   // Unsaved-changes UX lives in the parent (PlatformVisualEditorV2); avoid double confirm here.
   send('close-editor', {});
 }
 
+// Defensive cleanup: if parent closes/unmounts the editor shell without
+// invoking handleClose(), clear persisted VVE keys on unload as well.
+window.addEventListener('pagehide', function() {
+  clearVisualEditorLocalStorage();
+});
+window.addEventListener('beforeunload', function() {
+  clearVisualEditorLocalStorage();
+});
+
 // \u2500\u2500 Keyboard shortcuts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function isNativeEditableTarget(target) {
   if (!target || target.nodeType !== 1) return false;
@@ -5107,10 +5271,7 @@ document.addEventListener('keydown', function(e) {
     e.preventDefault();
     runEditorUndo();
   }
-  if (meta && e.shiftKey && k === 'z') {
-    e.preventDefault();
-    runEditorRedo();
-  }
+  // Redo is intentionally hidden/disabled in this editor flow.
   if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
   if (e.key === 'Escape') {
     var openTips = document.querySelectorAll('.ve-pl-tip.is-tip-open');
@@ -5130,11 +5291,17 @@ document.addEventListener('keydown', function(e) {
   }
 });
 function runEditorUndo() {
-  var target = getLatestHistoryUndoTarget();
-  if (target) {
-    removeHistoryItem(target.source, target.idx);
+  // Undo only unsaved in-session edits; do not remove persisted history rows.
+  if (!isDirty) return;
+
+  // 1) Prefer live unsaved change stack (stateChanges shown in History tab).
+  var liveTarget = getLatestLiveUndoTarget();
+  if (liveTarget) {
+    removeHistoryItem('live', liveTarget.idx);
     return;
   }
+
+  // 2) Fallback to Vvveb internal undo stack (e.g. structural drag/drop ops).
   if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
   Vvveb.Undo.undo();
   saveCurrentVariationHtml();
@@ -5157,11 +5324,10 @@ document.getElementById('btn-undo').addEventListener('click', function(e) {
   e.stopPropagation();
   runEditorUndo();
 });
-document.getElementById('btn-redo').addEventListener('click', function(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  runEditorRedo();
-});
+var btnRedo = document.getElementById('btn-redo');
+if (btnRedo) {
+  btnRedo.style.display = 'none';
+}
 
 function layoutLoadingTooltip(host) {
   var tip = host.querySelector('.ve-pl-tooltip');
@@ -5970,8 +6136,22 @@ if(window.fetch){
       try{
         var u=afterUrl?resolveUrl(afterUrl):null;
         var sameOrigin=!!(u&&u.origin===TARGET_ORIGIN);
-        var likelyThirdPartyBg=!sameOrigin||!!(u&&/(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(u.pathname||""));
-        if(window.__CONVERSION_EDITOR_ACTIVE__&&likelyThirdPartyBg){
+        var reqMethod=(init&&init.method?String(init.method):(input&&input.method?String(input.method):"GET")).toUpperCase();
+        var isSafeMethod=reqMethod==="GET"||reqMethod==="HEAD";
+        var path=(u&&u.pathname?u.pathname:"").toLowerCase();
+        var qs=(u&&u.search?u.search:"").toLowerCase();
+        var likelyBackgroundEndpoint=!!(u&&(
+          /(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(path)||
+          path==="/cart"||
+          path==="/cart.js"||
+          path.indexOf("/cart/")===0||
+          path.indexOf("/recommendations/")===0||
+          path.indexOf("/search/suggest")===0||
+          qs.indexOf("sections=")!==-1||
+          qs.indexOf("section_id=")!==-1
+        ));
+        var likelyThirdPartyBg=!sameOrigin||likelyBackgroundEndpoint;
+        if(window.__CONVERSION_EDITOR_ACTIVE__&&isSafeMethod&&likelyThirdPartyBg){
           console.warn("[conversion-proxy] suppressed fetch failure",{url:afterUrl,error:err&&err.message?err.message:String(err)});
           return new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}});
         }

package/dist/vite.js

@@ -78,17 +78,26 @@ function hasTrackingMarker(input, markers) {
   }
   return false;
 }
+function patchKnownUnsafeEditorPatterns(scriptTag) {
+  let out = String(scriptTag || "");
+  out = out.replace(
+    /dragRegion\.addEventListener\((['"])pointerdown\1,\s*onPointerDown\);?/g,
+    "if (typeof dragRegion !== 'undefined' && dragRegion) dragRegion.addEventListener($1pointerdown$1, onPointerDown);"
+  );
+  return out;
+}
 function stripTrackingScriptsFromScrapedHtml(html, markers) {
   let removedCount = 0;
   let out = html;
   out = out.replace(/<script\b[\s\S]*?<\/script>/gi, (tag) => {
+    var patchedTag = patchKnownUnsafeEditorPatterns(tag);
     const srcMatch = tag.match(/\bsrc\s*=\s*(["'])(.*?)\1/i);
     const src = srcMatch?.[2] || "";
     if (hasTrackingMarker(src, markers) || hasTrackingMarker(tag, markers)) {
       removedCount += 1;
       return "";
     }
-    return tag;
+    return patchedTag;
   });
   out = out.replace(/<noscript\b[\s\S]*?<\/noscript>/gi, (tag) => {
     if (!hasTrackingMarker(tag, markers)) return tag;
@@ -852,7 +861,7 @@ select.pr-inp{cursor:pointer;background:#fff}
         <button class="tb-dk-btn" title="More options"><i class="bi bi-three-dots"></i></button>
       </div>
       <button class="tb-dk-btn" id="btn-undo" title="Undo (\u2318Z)"><i class="bi bi-arrow-counterclockwise"></i></button>
-      <button class="tb-dk-btn" id="btn-redo" title="Redo (\u2318\u21E7Z)"><i class="bi bi-arrow-clockwise"></i></button>
+      <button class="tb-dk-btn" id="btn-redo" title="Redo (\u2318\u21E7Z)" style="display:none"><i class="bi bi-arrow-clockwise"></i></button>
     </div>
 
     <div id="iframe-loading-toolbar" class="tb-page-loading" aria-live="polite" aria-atomic="true">
@@ -923,8 +932,8 @@ select.pr-inp{cursor:pointer;background:#fff}
       <!-- Elements -->
       <div class="lp-sec lp-sec-no-border">
         <div class="lp-sec-hd">
-          <span class="lp-sec-hd-left">Elements <i class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
-          <button class="lp-add-btn" title="Add element">+ Add</button>
+          <span class="lp-sec-hd-left">Elements <i style="display:none" class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
+          <button class="lp-add-btn" id="btn-add-element" title="Add element">+ Add</button>
         </div>
 
         <!-- Search (hidden, kept for JS) -->
@@ -994,14 +1003,16 @@ select.pr-inp{cursor:pointer;background:#fff}
 
     <!-- Right panel -->
     <div id="right-panel">
-      <!-- Left-tab controls moved here -->
-      <div class="section-components-tabs">
-        <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
-        <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
-      </div>
-      <div class="lp-body">
-        <div id="tab-components" class="tab-pane"></div>
-        <div id="tab-sections" class="tab-pane"></div>
+      <div id="section-components-panel" style="display:none">
+        <!-- Left-tab controls moved here -->
+        <div class="section-components-tabs">
+          <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
+          <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
+        </div>
+        <div class="lp-body">
+          <div id="tab-components" class="tab-pane"></div>
+          <div id="tab-sections" class="tab-pane"></div>
+        </div>
       </div>
       <!-- Element badge (hidden until selection) -->
       <div id="el-info" style="display:none">
@@ -1658,6 +1669,19 @@ function switchSectionComponentsTab(tab) {
   renderSidebar(inp ? inp.value : '');
 }
 
+function toggleSectionComponentsPanel(forceVisible) {
+  var panel = document.getElementById('section-components-panel');
+  if (!panel) return;
+  var shouldShow =
+    typeof forceVisible === 'boolean'
+      ? forceVisible
+      : panel.style.display === 'none';
+  panel.style.display = shouldShow ? '' : 'none';
+  if (shouldShow) {
+    switchSectionComponentsTab(currentSectionComponentsTab || 'components');
+  }
+}
+
 // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function toggleAcc(name) {
   var sec = document.getElementById('acc-' + name);
@@ -1867,6 +1891,24 @@ function syncDesignInput(change) {
 function removeStateChange(idx) {
   var change = stateChanges[idx];
   if (!change) return;
+  if (change.isStructuralLive) {
+    removeSessionStructuralRowByTimestamp(
+      change.structuralVarId || activeVarId,
+      change.vveTs,
+    );
+    stateChanges.splice(idx, 1);
+    commitStateChangesForActiveVariation();
+    renderStatesTab();
+    if (currentMainTab === 'history') renderHistoryTab();
+    try {
+      delete varHtmlCache[activeVarId];
+    } catch(_) {}
+    appliedStructuralChangesetKeys = {};
+    recomputeEditorDirty();
+    scheduleDomTreeRefresh();
+    softReloadEditorIframe();
+    return;
+  }
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
@@ -2223,6 +2265,14 @@ function getLatestHistoryUndoTarget() {
   return list.length ? list[0] : null;
 }
 
+function getLatestLiveUndoTarget() {
+  var list = getUnifiedHistoryItems();
+  for (var i = 0; i < list.length; i++) {
+    if (list[i] && list[i].source === 'live') return list[i];
+  }
+  return null;
+}
+
 function changesetListHasStructural(arr) {
   if (!arr || !arr.length) return false;
   for (var i = 0; i < arr.length; i++) {
@@ -2321,8 +2371,15 @@ function removeHistoryChangeset(idx, evt) {
 function clearAllHistoryChangesets() {
   var v = getActiveVariationForHistory();
   if (!v) return;
-  if (!parseVariationChangesets(v).length) return;
+  var hasSavedChangesets = parseVariationChangesets(v).length > 0;
+  var hasSessionStructural =
+    !!(activeVarId && sessionStructuralChainRowsByVarId[activeVarId] && sessionStructuralChainRowsByVarId[activeVarId].length);
+  if (!hasSavedChangesets && !hasSessionStructural) return;
+
   persistActiveVariationChangesets([]);
+  if (activeVarId) {
+    sessionStructuralChainRowsByVarId[activeVarId] = [];
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   try {
@@ -2335,6 +2392,10 @@ function clearAllHistoryChangesets() {
 }
 
 function clearAllUnifiedHistory() {
+  if (activeVarId) {
+    // Ensure structural unsaved rows are also removed by "Clear all changes".
+    sessionStructuralChainRowsByVarId[activeVarId] = [];
+  }
   clearAllStates();
   clearAllHistoryChangesets();
   if (currentMainTab === 'history') renderHistoryTab();
@@ -2346,15 +2407,32 @@ var VVE_LOCAL_STORAGE_PREFIX = 'vve:';
 
 function clearVisualEditorLocalStorage() {
   try {
-    for (var i = localStorage.length - 1; i >= 0; i--) {
-      var k = localStorage.key(i);
-      if (k && k.indexOf(VVE_LOCAL_STORAGE_PREFIX) === 0) {
-        localStorage.removeItem(k);
+    var stores = [];
+    try { stores.push(localStorage); } catch(_) {}
+    try { stores.push(sessionStorage); } catch(_) {}
+    for (var si = 0; si < stores.length; si++) {
+      var store = stores[si];
+      if (!store) continue;
+      for (var i = store.length - 1; i >= 0; i--) {
+        var k = store.key(i);
+        if (k && k.indexOf(VVE_LOCAL_STORAGE_PREFIX) === 0) {
+          store.removeItem(k);
+        }
       }
     }
   } catch(_) {}
 }
 
+function clearPersistedActiveVariationForData(data) {
+  try {
+    var sk = activeVariationStorageKeyFromPayload(data);
+    if (sk && sk !== VVE_LOCAL_STORAGE_PREFIX + 'activeVar::') {
+      try { localStorage.removeItem(sk); } catch(_) {}
+      try { sessionStorage.removeItem(sk); } catch(_) {}
+    }
+  } catch(_) {}
+}
+
 function activeVariationStorageKeyFromPayload(data) {
   return (
     VVE_LOCAL_STORAGE_PREFIX +
@@ -2393,14 +2471,18 @@ function writePersistedActiveVariationId(varId) {
  * @param allowPrevMemory when true, keep in-session activeVarId if still valid (skip-reload path).
  */
 function pickActiveVariationIdForLoad(data, variationsArr, prevMemoryId, allowPrevMemory) {
-  var baseline = variationsArr.find(function(v) { return v.baseline; });
-  var fallback = (baseline || variationsArr[0] || {})._id || null;
+  var firstNonBaseline = variationsArr.find(function(v) { return !v.baseline; });
+  var fallback = (firstNonBaseline || variationsArr[0] || {})._id || null;
   if (!variationsArr.length) return null;
   if (allowPrevMemory && prevMemoryId && variationsArr.some(function(v) { return v._id === prevMemoryId; })) {
     return prevMemoryId;
   }
   var stored = readPersistedActiveVariationId(data);
   if (stored && variationsArr.some(function(v) { return v._id === stored; })) {
+    var storedVar = variationsArr.find(function(v) { return v._id === stored; });
+    if (storedVar && storedVar.baseline && firstNonBaseline && firstNonBaseline._id) {
+      return firstNonBaseline._id;
+    }
     return stored;
   }
   return fallback;
@@ -2624,7 +2706,13 @@ function granularAnySelectorMatches(doc, cs) {
 
 /** Bust bfcache / same-URL no-op reloads so the iframe actually re-parses (loading \u2192 interactive). */
 function appendIframeReloadBust(url) {
-  return url;
+  try {
+    var u = new URL(String(url || ''), window.location.href);
+    u.searchParams.set('_vve_reload', String(Date.now()));
+    return u.toString();
+  } catch(_) {
+    return url;
+  }
 }
 
 // True when the iframe contentDocument belongs to the current iframe.src navigation.
@@ -3002,6 +3090,44 @@ function appendSessionStructuralChainRow(varId, row) {
   sessionStructuralChainRowsByVarId[varId].push(row);
 }
 
+function markStructuralRowApplied(row) {
+  try {
+    var k = structuralChangesetDedupKey(row);
+    if (k) appliedStructuralChangesetKeys[k] = true;
+  } catch(_) {}
+}
+
+function logStructuralStateChange(row, label, value, targetEl) {
+  if (!row || !row.selector) return;
+  stateChanges.push({
+    selector: row.selector,
+    inputId: 'vve-struct',
+    label: label || 'Structure change',
+    cssProp: null,
+    value: value != null ? String(value) : String(row.type || ''),
+    targetEl: targetEl || null,
+    originalValue: '',
+    vveTs: row.vveTs || nextHistoryTimestamp(),
+    isStructuralLive: true,
+    structuralVarId: activeVarId || null,
+    structuralType: row.type || '',
+  });
+  if (currentMainTab === 'history') renderHistoryTab();
+  commitStateChangesForActiveVariation();
+}
+
+function removeSessionStructuralRowByTimestamp(varId, ts) {
+  if (!varId || !ts) return;
+  var arr = sessionStructuralChainRowsByVarId[varId];
+  if (!arr || !arr.length) return;
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (arr[i] && arr[i].vveTs === ts) {
+      arr.splice(i, 1);
+      return;
+    }
+  }
+}
+
 /** One States-tab row -> Conversion.io chain-set shape (matches applyChangesetEntry). */
 function stateChangeToChainSet(c) {
   if (!c || !c.selector) return null;
@@ -3696,12 +3822,15 @@ function duplicateSelectedEl() {
     clone.setAttribute('data-vve-instance', generateVveInstanceId());
   } catch(_) {}
   if (activeVarId) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var dupRow = {
       selector: anchorSel,
       type: 'insert',
       action: 'after',
       html: clone.outerHTML,
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, dupRow);
+    markStructuralRowApplied(dupRow);
+    logStructuralStateChange(dupRow, 'Duplicated via toolbar', 'Duplicate inserted', selectedEl);
   }
   selectedEl.parentNode.insertBefore(clone, selectedEl.nextSibling);
   saveCurrentVariationHtml();
@@ -3717,23 +3846,27 @@ function toggleHideSelectedEl() {
     selectedEl.style.visibility = '';
     selectedEl.removeAttribute('data-vve-hidden');
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var showRow = {
         selector: hidSel,
         type: 'style',
         property: 'visibility',
         value: '',
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, showRow);
+      logStructuralStateChange(showRow, 'Shown via toolbar', 'Visibility restored', selectedEl);
     }
   } else {
     selectedEl.style.visibility = 'hidden';
     selectedEl.setAttribute('data-vve-hidden', '1');
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var hideRow = {
         selector: hidSel,
         type: 'style',
         property: 'visibility',
         value: 'hidden',
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, hideRow);
+      logStructuralStateChange(hideRow, 'Hidden via toolbar', 'Visibility set to hidden', selectedEl);
     }
   }
   saveCurrentVariationHtml();
@@ -3744,7 +3877,11 @@ function deleteSelectedEl() {
   if (!selectedEl || !selectedEl.parentNode) return;
   var delSel = buildSelector(selectedEl);
   selectedEl.remove();
-  if (activeVarId) appendSessionStructuralChainRow(activeVarId, { selector: delSel, type: 'remove' });
+  if (activeVarId) {
+    var delRow = { selector: delSel, type: 'remove' };
+    appendSessionStructuralChainRow(activeVarId, delRow);
+    logStructuralStateChange(delRow, 'Deleted via toolbar', 'Element removed', null);
+  }
   saveCurrentVariationHtml();
   recomputeEditorDirty();
   deselectElement();
@@ -4645,19 +4782,25 @@ function recordReorderAfterDrag(movedEl) {
   var prev = movedEl.previousElementSibling;
   var next = movedEl.nextElementSibling;
   if (prev) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var reorderAfterRow = {
       selector: buildSelector(movedEl),
       type: 'reorder',
       targetSelector: buildSelector(prev),
       action: 'after',
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, reorderAfterRow);
+    markStructuralRowApplied(reorderAfterRow);
+    logStructuralStateChange(reorderAfterRow, 'Reordered via drag', 'Moved after sibling', movedEl);
   } else if (next) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var reorderBeforeRow = {
       selector: buildSelector(movedEl),
       type: 'reorder',
       targetSelector: buildSelector(next),
       action: 'before',
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, reorderBeforeRow);
+    markStructuralRowApplied(reorderBeforeRow);
+    logStructuralStateChange(reorderBeforeRow, 'Reordered via drag', 'Moved before sibling', movedEl);
   }
 }
 
@@ -4938,12 +5081,15 @@ function insertHtml(html) {
     }
     if (firstEl) selectElement(firstEl);
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var insertRow = {
         selector: anchorSel,
         type: 'insert',
         action: 'after',
         html: htmlStr,
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, insertRow);
+      markStructuralRowApplied(insertRow);
+      logStructuralStateChange(insertRow, 'Added component/section', 'Inserted new element', firstEl || selectedEl);
     }
     saveCurrentVariationHtml();
     recomputeEditorDirty();
@@ -5033,6 +5179,14 @@ document.getElementById('comp-search').addEventListener('input', function() {
     renderSidebar(this.value);
   }
 });
+var btnAddElement = document.getElementById('btn-add-element');
+if (btnAddElement) {
+  btnAddElement.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleSectionComponentsPanel();
+  });
+}
 
 // \u2500\u2500 Save / Close \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 document.getElementById('btn-save').addEventListener('click', handleSave);
@@ -5073,11 +5227,21 @@ function handleSave() {
 }
 
 function handleClose() {
+  clearPersistedActiveVariationForData(experimentData);
   clearVisualEditorLocalStorage();
   // Unsaved-changes UX lives in the parent (PlatformVisualEditorV2); avoid double confirm here.
   send('close-editor', {});
 }
 
+// Defensive cleanup: if parent closes/unmounts the editor shell without
+// invoking handleClose(), clear persisted VVE keys on unload as well.
+window.addEventListener('pagehide', function() {
+  clearVisualEditorLocalStorage();
+});
+window.addEventListener('beforeunload', function() {
+  clearVisualEditorLocalStorage();
+});
+
 // \u2500\u2500 Keyboard shortcuts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function isNativeEditableTarget(target) {
   if (!target || target.nodeType !== 1) return false;
@@ -5099,10 +5263,7 @@ document.addEventListener('keydown', function(e) {
     e.preventDefault();
     runEditorUndo();
   }
-  if (meta && e.shiftKey && k === 'z') {
-    e.preventDefault();
-    runEditorRedo();
-  }
+  // Redo is intentionally hidden/disabled in this editor flow.
   if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
   if (e.key === 'Escape') {
     var openTips = document.querySelectorAll('.ve-pl-tip.is-tip-open');
@@ -5122,11 +5283,17 @@ document.addEventListener('keydown', function(e) {
   }
 });
 function runEditorUndo() {
-  var target = getLatestHistoryUndoTarget();
-  if (target) {
-    removeHistoryItem(target.source, target.idx);
+  // Undo only unsaved in-session edits; do not remove persisted history rows.
+  if (!isDirty) return;
+
+  // 1) Prefer live unsaved change stack (stateChanges shown in History tab).
+  var liveTarget = getLatestLiveUndoTarget();
+  if (liveTarget) {
+    removeHistoryItem('live', liveTarget.idx);
     return;
   }
+
+  // 2) Fallback to Vvveb internal undo stack (e.g. structural drag/drop ops).
   if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
   Vvveb.Undo.undo();
   saveCurrentVariationHtml();
@@ -5149,11 +5316,10 @@ document.getElementById('btn-undo').addEventListener('click', function(e) {
   e.stopPropagation();
   runEditorUndo();
 });
-document.getElementById('btn-redo').addEventListener('click', function(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  runEditorRedo();
-});
+var btnRedo = document.getElementById('btn-redo');
+if (btnRedo) {
+  btnRedo.style.display = 'none';
+}
 
 function layoutLoadingTooltip(host) {
   var tip = host.querySelector('.ve-pl-tooltip');
@@ -5962,8 +6128,22 @@ if(window.fetch){
       try{
         var u=afterUrl?resolveUrl(afterUrl):null;
         var sameOrigin=!!(u&&u.origin===TARGET_ORIGIN);
-        var likelyThirdPartyBg=!sameOrigin||!!(u&&/(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(u.pathname||""));
-        if(window.__CONVERSION_EDITOR_ACTIVE__&&likelyThirdPartyBg){
+        var reqMethod=(init&&init.method?String(init.method):(input&&input.method?String(input.method):"GET")).toUpperCase();
+        var isSafeMethod=reqMethod==="GET"||reqMethod==="HEAD";
+        var path=(u&&u.pathname?u.pathname:"").toLowerCase();
+        var qs=(u&&u.search?u.search:"").toLowerCase();
+        var likelyBackgroundEndpoint=!!(u&&(
+          /(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(path)||
+          path==="/cart"||
+          path==="/cart.js"||
+          path.indexOf("/cart/")===0||
+          path.indexOf("/recommendations/")===0||
+          path.indexOf("/search/suggest")===0||
+          qs.indexOf("sections=")!==-1||
+          qs.indexOf("section_id=")!==-1
+        ));
+        var likelyThirdPartyBg=!sameOrigin||likelyBackgroundEndpoint;
+        if(window.__CONVERSION_EDITOR_ACTIVE__&&isSafeMethod&&likelyThirdPartyBg){
           console.warn("[conversion-proxy] suppressed fetch failure",{url:afterUrl,error:err&&err.message?err.message:String(err)});
           return new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}});
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",