@accelerated-agency/visual-editor 0.2.8 → 0.3.0

package/dist/vite.cjs

@@ -12,6 +12,7 @@ var path__default = /*#__PURE__*/_interopDefault(path);
 
 // src/visualEditorProxyPlugin.ts
 var popupHideCss = `<style id="__ce_popup_hide">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"],.klaviyo-form,.klaviyo-modal,.klaviyo-popup,[class*="klaviyo"],.privy-popup,.privy-flyout,[id*="privy"],#PopupSignupForm,.popup-signup,.newsletter-popup,.newsletter-modal,[class*="newsletter-popup"],[class*="newsletter-modal"],[id*="newsletter-popup"],.email-popup,.email-modal,[class*="email-popup"],[class*="email-modal"],.signup-popup,.signup-modal,[class*="signup-popup"],[class*="signup-modal"],.subscribe-popup,.subscribe-modal,[class*="subscribe-popup"],#mc_embed_signup,.mc-modal,.mc-banner,.mc-closeModal,.omniconvert-popup,[class*="omniconvert"],.optinmonster-popup,[id*="om-"][class*="campaign"],.sumo-overlay,.sumome-overlay,[class*="sumome"],.hustle-modal,.hustle-popup,[class*="hustle-"],.popup-overlay,.popup-modal,.modal-overlay,[class*="exit-intent"],[class*="exitintent"],.wheelio-popup,[class*="wheelio"],.spin-wheel-popup,.justuno-popup,[class*="justuno"],.wisepops,.wisepops-overlay,[class*="wisepops"],.elegantmodal,.elegant-popup,#zipify-popup,[class*="zipify"],.age-gate,.age-verification,.age-popup,[class*="age-gate"],[class*="age-verif"],[class*="popup-overlay"],[class*="modal-overlay"],[class*="popup-backdrop"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important;}body.klaviyo-open,body.modal-open,body.popup-open,body.no-scroll,body.noscroll{overflow:auto!important;position:static!important;}</style>`;
+var consentAllowCss = `<style id="__ce_consent_allow">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"]{display:revert!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;height:auto!important;overflow:visible!important;}</style>`;
 var AI_SYSTEM_PROMPT = `You are a CRO expert. Return JSON only with: hypothesis, mutations, summary. Keep 2-6 precise mutations and only valid selectors from snapshot.`;
 var BRIDGE_SCRIPT = `(function(){if(window.__CONVERSION_BRIDGE_LOADED__)return;window.__CONVERSION_BRIDGE_LOADED__=true;var CHANNEL='conversion-editor';var highlightEl=null;function send(payload){window.parent.postMessage({channel:CHANNEL,payload:payload},'*');}function qs(selector){try{return document.querySelector(selector);}catch(_){return null;}}function getSelector(el){if(!el||el.nodeType!==1)return'';if(el.id)return'#'+CSS.escape(el.id);var parts=[];var current=el;var depth=0;while(current&&current.nodeType===1&&depth<5){var part=current.tagName.toLowerCase();if(current.classList&&current.classList.length){part+='.'+Array.from(current.classList).slice(0,2).map(function(c){return CSS.escape(c);}).join('.');}var parent=current.parentElement;if(parent){var siblings=Array.from(parent.children).filter(function(s){return s.tagName===current.tagName;});if(siblings.length>1)part+=':nth-of-type('+(siblings.indexOf(current)+1)+')';}parts.unshift(part);current=parent;depth+=1;}return parts.join(' > ');}function payloadOf(el){var rect=el.getBoundingClientRect();var style=window.getComputedStyle(el);return{selector:getSelector(el),tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,500),computedStyles:{color:style.color,backgroundColor:style.backgroundColor,fontSize:style.fontSize,fontWeight:style.fontWeight,lineHeight:style.lineHeight,display:style.display},rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}function applyMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.value;break;case'setText':el.textContent=m.value;break;case'setHTML':el.innerHTML=m.value;break;case'setAttribute':if(m.property)el.setAttribute(m.property,m.value);break;case'hide':el.style.display='none';break;case'show':el.style.display='';break;case'insertHTML':if(m.position)el.insertAdjacentHTML(m.position,m.value||'');break;case'insertSection':if(m.position)el.insertAdjacentHTML(m.position,m.sectionHtml||m.value||'');break;case'reorderElement':if(!m.targetSelector)break;var target=qs(m.targetSelector);if(!target||!target.parentNode||!el.parentNode)break;if(m.insertPosition==='before')target.parentNode.insertBefore(el,target);else target.parentNode.insertBefore(el,target.nextSibling);break;default:break;}}function revertMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.previous||'';break;case'setText':el.textContent=m.previous||'';break;case'setHTML':el.innerHTML=m.previous||'';break;case'setAttribute':if(m.property){if(m.previous!=null)el.setAttribute(m.property,m.previous);else el.removeAttribute(m.property);}break;case'hide':case'show':el.style.display=m.previous||'';break;default:break;}}function captureSnapshot(){var elements=Array.from(document.querySelectorAll('h1,h2,h3,p,button,a,input,select,img,section,div')).slice(0,700).map(function(el){var rect=el.getBoundingClientRect();var cs=window.getComputedStyle(el);return{selector:getSelector(el),parentSelector:el.parentElement?getSelector(el.parentElement):null,tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,300),attributes:Array.from(el.attributes||[]).reduce(function(acc,a){acc[a.name]=a.value;return acc;},{}),computedStyles:{color:cs.color,backgroundColor:cs.backgroundColor,fontSize:cs.fontSize,fontWeight:cs.fontWeight,display:cs.display},childrenCount:el.children?el.children.length:0,aboveFold:rect.top<window.innerHeight,depth:(function(){var d=0,p=el.parentElement;while(p&&d<25){d++;p=p.parentElement;}return d;})()};});send({type:'snapshotCaptured',snapshot:{url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},elements:elements}});}function captureTree(){function toNode(el,depth){var rect=el.getBoundingClientRect();var tag=el.tagName.toLowerCase();var type='generic';if(tag==='section')type='section';else if(tag==='img')type='image';else if(tag==='a')type='link';else if(tag==='button')type='button';else if(tag==='form')type='form';else if(['p','h1','h2','h3','h4','h5','h6','span'].indexOf(tag)>=0)type='text';else if(['div','main','article','aside','header','footer','nav'].indexOf(tag)>=0)type='container';var children=Array.from(el.children||[]).slice(0,50).map(function(c){return toNode(c,depth+1);});return{id:getSelector(el),selector:getSelector(el),tagName:tag,label:(el.getAttribute('aria-label')||el.getAttribute('id')||el.className||tag).toString().slice(0,80),type:type,children:children,depth:depth,isAboveFold:rect.top<window.innerHeight,rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}send({type:'pageTreeCaptured',tree:[toNode(document.body,0)]});}window.addEventListener('message',function(e){var msg=e.data;if(!msg||msg.channel!==CHANNEL||!msg.payload)return;var p=msg.payload;switch(p.type){case'ping':send({type:'pong'});break;case'applyMutation':applyMutation(p.mutation);break;case'applyMutationBatch':(p.mutations||[]).forEach(applyMutation);break;case'revert':revertMutation(p.mutation);break;case'clearAllMutations':window.location.reload();break;case'captureSnapshot':captureSnapshot();break;case'validateSelectors':send({type:'selectorsValidated',results:(p.selectors||[]).map(function(s){var el=qs(s);return{selector:s,found:!!el,tagName:el?el.tagName.toLowerCase():null};})});break;case'scrollToElement':case'selectElement':var target=qs(p.selector);if(target){target.scrollIntoView({behavior:'smooth',block:'center'});send({type:'elementSelected',element:payloadOf(target)});}break;case'hoverElement':var h=qs(p.selector);if(h){if(highlightEl)highlightEl.style.outline='';h.style.outline='2px solid #3b82f6';highlightEl=h;}break;case'capturePageTree':captureTree();break;default:break;}});document.addEventListener('click',function(e){var el=e.target;if(!(el instanceof Element))return;send({type:'elementSelected',element:payloadOf(el)});},true);send({type:'bridgeReady'});})();`;
 function buildVvvebEditorHtml() {
@@ -999,6 +1000,7 @@ var selectedEl      = null;
 var selectedElFingerprint = '';
 var selectedElRecoverMisses = 0;
 var MAX_SELECTED_RECOVER_MISSES = 12;
+var isDeselectingSelection = false;
 var suppressClickUntil = 0;
 var dragAttachDoc     = null;
 var currentMainTab  = 'design';
@@ -1027,6 +1029,8 @@ var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
 // cssProp is null for non-CSS attributes (href, alt, classes\u2026)
 var stateChanges    = [];
+/** Per-variation unsaved Design-tab state changes (input edits not yet finalized). */
+var stateChangesByVarId = {};
 /** Pre-apply DOM snapshots for granular + body changesets (used when removing History rows) */
 var appliedChangesetSnapshots = {};
 /** Canonical JSON fingerprints of persisted changesets per variation (last load / finalize) */
@@ -1041,13 +1045,49 @@ function endSuppressIframeMutationDirty() {
   suppressIframeMutationDirty = Math.max(0, suppressIframeMutationDirty - 1);
 }
 
+function commitStateChangesForActiveVariation() {
+  if (!activeVarId) return;
+  stateChangesByVarId[activeVarId] = (stateChanges || []).slice();
+}
+
+function loadStateChangesForActiveVariation() {
+  if (!activeVarId) {
+    stateChanges = [];
+    return;
+  }
+  stateChanges = (stateChangesByVarId[activeVarId] || []).slice();
+}
+
 function recoverSelectedElement(forceDeselectOnMiss) {
   if (selectedEl && selectedEl.ownerDocument && selectedEl.ownerDocument.contains(selectedEl)) {
     selectedElRecoverMisses = 0;
     return selectedEl;
   }
   if (!selectedElFingerprint) {
-    if (forceDeselectOnMiss) deselectElement();
+    // Nothing to recover; clear stale reference without calling deselectElement
+    // (which can recurse back through toolbar updates during rapid DOM churn).
+    if (forceDeselectOnMiss && selectedEl) {
+      beginSuppressIframeMutationDirty();
+      try {
+        try { selectedEl.classList.remove('vve-selected'); } catch(_) {}
+        selectedEl = null;
+        selectedElRecoverMisses = 0;
+      } finally {
+        endSuppressIframeMutationDirty();
+      }
+      var noSel = document.getElementById('no-sel');
+      if (noSel) noSel.style.display = '';
+      var elInfo = document.getElementById('el-info');
+      if (elInfo) elInfo.style.display = 'none';
+      var rp = document.getElementById('rp-accordion');
+      if (rp) rp.style.display = 'none';
+      var bc = document.getElementById('bc-path');
+      if (bc) {
+        bc.textContent = 'No element selected';
+        bc.style.color = 'var(--text-3)';
+      }
+      syncDomTreeSelection();
+    }
     return null;
   }
   var iframe = document.getElementById('iframeId');
@@ -1067,7 +1107,29 @@ function recoverSelectedElement(forceDeselectOnMiss) {
   }
   selectedElRecoverMisses += 1;
   if (forceDeselectOnMiss && selectedElRecoverMisses >= MAX_SELECTED_RECOVER_MISSES) {
-    deselectElement();
+    beginSuppressIframeMutationDirty();
+    try {
+      if (selectedEl) {
+        try { selectedEl.classList.remove('vve-selected'); } catch(_) {}
+      }
+      selectedEl = null;
+      selectedElFingerprint = '';
+      selectedElRecoverMisses = 0;
+    } finally {
+      endSuppressIframeMutationDirty();
+    }
+    var noSel2 = document.getElementById('no-sel');
+    if (noSel2) noSel2.style.display = '';
+    var elInfo2 = document.getElementById('el-info');
+    if (elInfo2) elInfo2.style.display = 'none';
+    var rp2 = document.getElementById('rp-accordion');
+    if (rp2) rp2.style.display = 'none';
+    var bc2 = document.getElementById('bc-path');
+    if (bc2) {
+      bc2.textContent = 'No element selected';
+      bc2.style.color = 'var(--text-3)';
+    }
+    syncDomTreeSelection();
   }
   return null;
 }
@@ -1162,6 +1224,10 @@ function setMode(mode) {
   if (mode === 'navigate') {
     setDragHandleActive(false);
     deselectElement();
+  } else if (mode === 'editor') {
+    // Re-bind interactions immediately when coming back from navigate mode.
+    // This avoids waiting for delayed iframe readiness/load retries.
+    syncIframeInteractions('mode-editor-toggle');
   }
   updateSelectionToolbar();
 }
@@ -1328,6 +1394,7 @@ function logChange(selector, inputId, value, targetEl, originalValue) {
     if (idx >= 0) { stateChanges[idx] = entry; } else { stateChanges.push(entry); }
   }
   if (currentMainTab === 'states') renderStatesTab();
+  commitStateChangesForActiveVariation();
   recomputeEditorDirty();
 }
 
@@ -1434,6 +1501,7 @@ function removeStateChange(idx) {
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1444,6 +1512,7 @@ function clearAllStates() {
     syncDesignInput(c);
   });
   stateChanges = [];
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1818,7 +1887,9 @@ function handleLoadExperiment(data) {
     experimentData = data;
     variations = Array.isArray(data.variations) ? data.variations : [];
     var prevActive = activeVarId;
+    commitStateChangesForActiveVariation();
     activeVarId = pickActiveVariationIdForLoad(data, variations, prevActive, true);
+    loadStateChangesForActiveVariation();
     writePersistedActiveVariationId(activeVarId);
     renderVariationTabs();
     var urlBarSkip = document.getElementById('url-bar');
@@ -1841,6 +1912,8 @@ function handleLoadExperiment(data) {
   if (!experimentData || prevKey !== nextKey) {
     varHtmlCache = {};
     sessionStructuralChainRowsByVarId = {};
+    stateChangesByVarId = {};
+    stateChanges = [];
     appliedChangesetSnapshots = {};
     appliedStructuralChangesetKeys = {};
   }
@@ -1848,6 +1921,7 @@ function handleLoadExperiment(data) {
   variations = Array.isArray(data.variations) ? data.variations : [];
   var sameExpPage = prevKey === nextKey;
   activeVarId = pickActiveVariationIdForLoad(data, variations, activeVarId, sameExpPage);
+  loadStateChangesForActiveVariation();
   writePersistedActiveVariationId(activeVarId);
   renderVariationTabs();
 
@@ -2132,7 +2206,7 @@ function loadPage(proxyUrl) {
   resetIframeBindings();
   iframe.style.display = 'block';
   setIframePageLoadingUi(true);
-  iframe.src = proxyUrl;
+  iframe.src = appendIframeReloadBust(proxyUrl);
   startIframeContentApplyWatcher(navGen);
   scheduleDomTreeRefresh();
 }
@@ -2171,8 +2245,10 @@ function renderVariationTabs() {
 function switchVariation(varId) {
   if (varId === activeVarId) return;
   saveCurrentVariationHtml();
+  commitStateChangesForActiveVariation();
   clearPendingGranularChangesets();
   activeVarId = varId;
+  loadStateChangesForActiveVariation();
   writePersistedActiveVariationId(varId);
   renderVariationTabs();
   deselectElement();
@@ -2208,6 +2284,7 @@ function switchVariation(varId) {
     }
   } catch(_) {}
   if (currentMainTab === 'history') renderHistoryTab();
+  if (currentMainTab === 'states') renderStatesTab();
   recomputeEditorDirty();
 }
 
@@ -2564,12 +2641,13 @@ function buildPersistedChainSetsForVariation(v) {
   var parsed = parseVariationChangesets(v);
   var base = filterGranularChangesetEntries(parsed);
   var sessionExtra = sessionStructuralChainRowsByVarId[v._id] || [];
-  if (v._id !== activeVarId) {
-    return mergeGranularChainSets(base, sessionExtra);
-  }
+  var sourceStateChanges =
+    v._id === activeVarId
+      ? stateChanges
+      : (stateChangesByVarId[v._id] || []);
   var overlay = [];
-  for (var si = 0; si < stateChanges.length; si++) {
-    var row = stateChangeToChainSet(stateChanges[si]);
+  for (var si = 0; si < sourceStateChanges.length; si++) {
+    var row = stateChangeToChainSet(sourceStateChanges[si]);
     if (row) overlay.push(row);
   }
   return mergeGranularChainSets(mergeGranularChainSets(base, sessionExtra), overlay);
@@ -2693,24 +2771,31 @@ function selectElement(el) {
   }
 }
 
-function deselectElement() {
-  setDragHandleActive(false);
-  beginSuppressIframeMutationDirty();
+function deselectElement(options) {
+  if (isDeselectingSelection) return;
+  isDeselectingSelection = true;
+  var skipToolbarUpdate = !!(options && options.skipToolbarUpdate);
   try {
-    if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
-    selectedElFingerprint = '';
-    selectedElRecoverMisses = 0;
+    setDragHandleActive(false);
+    beginSuppressIframeMutationDirty();
+    try {
+      if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+      selectedElFingerprint = '';
+      selectedElRecoverMisses = 0;
+    } finally {
+      endSuppressIframeMutationDirty();
+    }
+    document.getElementById('no-sel').style.display = '';
+    document.getElementById('el-info').style.display = 'none';
+    document.getElementById('rp-accordion').style.display = 'none';
+    document.getElementById('bc-path').textContent = 'No element selected';
+    document.getElementById('bc-path').style.color = 'var(--text-3)';
+    switchMainTab('design');
+    if (!skipToolbarUpdate) updateSelectionToolbar();
+    syncDomTreeSelection();
   } finally {
-    endSuppressIframeMutationDirty();
+    isDeselectingSelection = false;
   }
-  document.getElementById('no-sel').style.display = '';
-  document.getElementById('el-info').style.display = 'none';
-  document.getElementById('rp-accordion').style.display = 'none';
-  document.getElementById('bc-path').textContent = 'No element selected';
-  document.getElementById('bc-path').style.color = 'var(--text-3)';
-  switchMainTab('design');
-  updateSelectionToolbar();
-  syncDomTreeSelection();
 }
 
 // \u2500\u2500 Iframe selection chrome, floater toolbar, DOM tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -2961,7 +3046,7 @@ function renderDomTree(filterRaw) {
 
   function labelFor(el) {
     var tag = el.tagName.toLowerCase();
-    if (el.id) return tag + '#' + el.id.slice(0, 40);
+    if (el.id != null && el.id !== '') return tag + '#' + String(el.id).slice(0, 40);
     var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
     if (cn) {
       var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
@@ -3967,6 +4052,7 @@ document.getElementById('btn-close').addEventListener('click', handleClose);
 
 function handleSave() {
   saveCurrentVariationHtml();
+  commitStateChangesForActiveVariation();
   var updatedVariations = variations.map(function(v) {
     var prevParsed = parseVariationChangesets(v);
     var granularPrev = filterGranularChangesetEntries(prevParsed);
@@ -3987,6 +4073,7 @@ function handleSave() {
   variations = updatedVariations;
   varHtmlCache = {};
   sessionStructuralChainRowsByVarId = {};
+  stateChangesByVarId = {};
   stateChanges = [];
   if (currentMainTab === 'states') renderStatesTab();
   captureBaselineFromVariations(variations);
@@ -4143,18 +4230,28 @@ window.addEventListener('load', function() {
   var iframe = document.getElementById('iframeId');
   iframe.addEventListener('load', function() {
     if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
+    // New iframe navigation: always drop bindings tied to the previous document.
+    resetIframeBindings();
     var doc = iframe.contentDocument;
-    if (!doc || !doc.body) return;
+    if (!doc) {
+      syncIframeInteractions('iframe-load-no-doc');
+      return;
+    }
     var docUrl = '';
     try { docUrl = String(doc.URL || ''); } catch(_) {}
     // Stale events: src may already be the proxy URL while the document is still
-    // about:blank (e.g. src cleared then reset to force reload).
-    if (docUrl === 'about:blank') return;
-    if (!iframeDocMatchesNavigatedSrc(iframe, doc)) return;
+    // about:blank (e.g. src cleared then reset to force reload). Ask sync path to retry.
+    if (docUrl === 'about:blank') {
+      syncIframeInteractions('iframe-load-about-blank');
+      return;
+    }
     attachIframeLoadingUntilComplete(iframe);
-    stopIframeContentApplyWatcher();
-    deselectElement();
-    applyActiveVariationHtml();
+    if (doc.body && iframeDocMatchesNavigatedSrc(iframe, doc)) {
+      stopIframeContentApplyWatcher();
+      deselectElement();
+      applyActiveVariationHtml();
+    }
+    // Always attempt sync; it has its own readiness checks + retry loop.
     syncIframeInteractions('iframe-load');
   });
 
@@ -4482,7 +4579,7 @@ function createVisualEditorMiddleware(options) {
         }
         html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
         const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const proxyBase = `/api/conversion-proxy?password=${encodeURIComponent(password)}&url=`;
+        const proxyBase = `/api/conversion-proxy?__ve_reload=${Date.now()}&password=${encodeURIComponent(password)}&url=`;
         html = html.replace(
           new RegExp(`(href|action)="${escapedOrigin}(/[^"]*)"`, "g"),
           (match, attr, urlPath) => {
@@ -4495,6 +4592,7 @@ function createVisualEditorMiddleware(options) {
         );
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${popupHideCss}
+${consentAllowCss}
 </head>`);
         }
         html = html.replace(
@@ -4512,7 +4610,7 @@ var PROXY_PASSWORD=${JSON.stringify(password)};
 window.__CONVERSION_EDITOR_ACTIVE__=true;
 function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}
 function toAbsolute(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")||raw.startsWith("//")?TARGET_ORIGIN:TARGET_PAGE_URL;return new URL(raw,base).toString();}catch(_){return raw;}}
-function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
+function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?__ve_reload="+Date.now()+"&password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
 var nativeAssign=window.location.assign?window.location.assign.bind(window.location):null;
 var nativeReplace=window.location.replace?window.location.replace.bind(window.location):null;
 function safeNavigate(raw,mode){var abs=toAbsolute(raw);var prox=toProxy(raw);if(!prox){try{console.warn("[conversion-proxy] redirect blocked",{mode:mode,requested:raw,resolved:abs,origin:TARGET_ORIGIN});}catch(_){}return false;}try{console.info("[conversion-proxy] redirect intercepted",{mode:mode,requested:raw,resolved:abs,proxied:prox});if(mode==="replace"&&nativeReplace){nativeReplace(prox);return true;}if(nativeAssign){nativeAssign(prox);return true;}window.location.href=prox;return true;}catch(err){try{console.warn("[conversion-proxy] redirect interception failed",{mode:mode,requested:raw,resolved:abs,proxied:prox,error:err&&err.message?err.message:String(err)});}catch(_){}return false;}}
@@ -4585,6 +4683,9 @@ if(window.fetch){
 }
 if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}
 if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}
+function withReloadBust(urlRaw){try{var u=resolveUrl(String(urlRaw||""));if(!u)return null;var p=u.pathname||"";var isRootProxyPath=p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0;if(!isRootProxyPath)return null;u.searchParams.set("__ve_reload",String(Date.now()));return u.toString();}catch(_){return null;}}
+document.addEventListener("click",function(ev){try{var t=ev&&ev.target;if(!t||!t.closest)return;var a=t.closest("a[href]");if(!a)return;var href=a.getAttribute("href")||a.href;var bust=withReloadBust(href);if(bust)a.setAttribute("href",bust);}catch(_){}},true);
+document.addEventListener("submit",function(ev){try{var f=ev&&ev.target;if(!f||!f.getAttribute)return;var act=f.getAttribute("action")||"";var bust=withReloadBust(act);if(bust)f.setAttribute("action",bust);}catch(_){}},true);
 if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}
 }catch(_){}})();</script>`;
         if (html.includes("</head>")) {

package/dist/vite.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 
 // src/visualEditorProxyPlugin.ts
 var popupHideCss = `<style id="__ce_popup_hide">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"],.klaviyo-form,.klaviyo-modal,.klaviyo-popup,[class*="klaviyo"],.privy-popup,.privy-flyout,[id*="privy"],#PopupSignupForm,.popup-signup,.newsletter-popup,.newsletter-modal,[class*="newsletter-popup"],[class*="newsletter-modal"],[id*="newsletter-popup"],.email-popup,.email-modal,[class*="email-popup"],[class*="email-modal"],.signup-popup,.signup-modal,[class*="signup-popup"],[class*="signup-modal"],.subscribe-popup,.subscribe-modal,[class*="subscribe-popup"],#mc_embed_signup,.mc-modal,.mc-banner,.mc-closeModal,.omniconvert-popup,[class*="omniconvert"],.optinmonster-popup,[id*="om-"][class*="campaign"],.sumo-overlay,.sumome-overlay,[class*="sumome"],.hustle-modal,.hustle-popup,[class*="hustle-"],.popup-overlay,.popup-modal,.modal-overlay,[class*="exit-intent"],[class*="exitintent"],.wheelio-popup,[class*="wheelio"],.spin-wheel-popup,.justuno-popup,[class*="justuno"],.wisepops,.wisepops-overlay,[class*="wisepops"],.elegantmodal,.elegant-popup,#zipify-popup,[class*="zipify"],.age-gate,.age-verification,.age-popup,[class*="age-gate"],[class*="age-verif"],[class*="popup-overlay"],[class*="modal-overlay"],[class*="popup-backdrop"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important;}body.klaviyo-open,body.modal-open,body.popup-open,body.no-scroll,body.noscroll{overflow:auto!important;position:static!important;}</style>`;
+var consentAllowCss = `<style id="__ce_consent_allow">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"]{display:revert!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;height:auto!important;overflow:visible!important;}</style>`;
 var AI_SYSTEM_PROMPT = `You are a CRO expert. Return JSON only with: hypothesis, mutations, summary. Keep 2-6 precise mutations and only valid selectors from snapshot.`;
 var BRIDGE_SCRIPT = `(function(){if(window.__CONVERSION_BRIDGE_LOADED__)return;window.__CONVERSION_BRIDGE_LOADED__=true;var CHANNEL='conversion-editor';var highlightEl=null;function send(payload){window.parent.postMessage({channel:CHANNEL,payload:payload},'*');}function qs(selector){try{return document.querySelector(selector);}catch(_){return null;}}function getSelector(el){if(!el||el.nodeType!==1)return'';if(el.id)return'#'+CSS.escape(el.id);var parts=[];var current=el;var depth=0;while(current&&current.nodeType===1&&depth<5){var part=current.tagName.toLowerCase();if(current.classList&&current.classList.length){part+='.'+Array.from(current.classList).slice(0,2).map(function(c){return CSS.escape(c);}).join('.');}var parent=current.parentElement;if(parent){var siblings=Array.from(parent.children).filter(function(s){return s.tagName===current.tagName;});if(siblings.length>1)part+=':nth-of-type('+(siblings.indexOf(current)+1)+')';}parts.unshift(part);current=parent;depth+=1;}return parts.join(' > ');}function payloadOf(el){var rect=el.getBoundingClientRect();var style=window.getComputedStyle(el);return{selector:getSelector(el),tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,500),computedStyles:{color:style.color,backgroundColor:style.backgroundColor,fontSize:style.fontSize,fontWeight:style.fontWeight,lineHeight:style.lineHeight,display:style.display},rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}function applyMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.value;break;case'setText':el.textContent=m.value;break;case'setHTML':el.innerHTML=m.value;break;case'setAttribute':if(m.property)el.setAttribute(m.property,m.value);break;case'hide':el.style.display='none';break;case'show':el.style.display='';break;case'insertHTML':if(m.position)el.insertAdjacentHTML(m.position,m.value||'');break;case'insertSection':if(m.position)el.insertAdjacentHTML(m.position,m.sectionHtml||m.value||'');break;case'reorderElement':if(!m.targetSelector)break;var target=qs(m.targetSelector);if(!target||!target.parentNode||!el.parentNode)break;if(m.insertPosition==='before')target.parentNode.insertBefore(el,target);else target.parentNode.insertBefore(el,target.nextSibling);break;default:break;}}function revertMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.previous||'';break;case'setText':el.textContent=m.previous||'';break;case'setHTML':el.innerHTML=m.previous||'';break;case'setAttribute':if(m.property){if(m.previous!=null)el.setAttribute(m.property,m.previous);else el.removeAttribute(m.property);}break;case'hide':case'show':el.style.display=m.previous||'';break;default:break;}}function captureSnapshot(){var elements=Array.from(document.querySelectorAll('h1,h2,h3,p,button,a,input,select,img,section,div')).slice(0,700).map(function(el){var rect=el.getBoundingClientRect();var cs=window.getComputedStyle(el);return{selector:getSelector(el),parentSelector:el.parentElement?getSelector(el.parentElement):null,tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,300),attributes:Array.from(el.attributes||[]).reduce(function(acc,a){acc[a.name]=a.value;return acc;},{}),computedStyles:{color:cs.color,backgroundColor:cs.backgroundColor,fontSize:cs.fontSize,fontWeight:cs.fontWeight,display:cs.display},childrenCount:el.children?el.children.length:0,aboveFold:rect.top<window.innerHeight,depth:(function(){var d=0,p=el.parentElement;while(p&&d<25){d++;p=p.parentElement;}return d;})()};});send({type:'snapshotCaptured',snapshot:{url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},elements:elements}});}function captureTree(){function toNode(el,depth){var rect=el.getBoundingClientRect();var tag=el.tagName.toLowerCase();var type='generic';if(tag==='section')type='section';else if(tag==='img')type='image';else if(tag==='a')type='link';else if(tag==='button')type='button';else if(tag==='form')type='form';else if(['p','h1','h2','h3','h4','h5','h6','span'].indexOf(tag)>=0)type='text';else if(['div','main','article','aside','header','footer','nav'].indexOf(tag)>=0)type='container';var children=Array.from(el.children||[]).slice(0,50).map(function(c){return toNode(c,depth+1);});return{id:getSelector(el),selector:getSelector(el),tagName:tag,label:(el.getAttribute('aria-label')||el.getAttribute('id')||el.className||tag).toString().slice(0,80),type:type,children:children,depth:depth,isAboveFold:rect.top<window.innerHeight,rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}send({type:'pageTreeCaptured',tree:[toNode(document.body,0)]});}window.addEventListener('message',function(e){var msg=e.data;if(!msg||msg.channel!==CHANNEL||!msg.payload)return;var p=msg.payload;switch(p.type){case'ping':send({type:'pong'});break;case'applyMutation':applyMutation(p.mutation);break;case'applyMutationBatch':(p.mutations||[]).forEach(applyMutation);break;case'revert':revertMutation(p.mutation);break;case'clearAllMutations':window.location.reload();break;case'captureSnapshot':captureSnapshot();break;case'validateSelectors':send({type:'selectorsValidated',results:(p.selectors||[]).map(function(s){var el=qs(s);return{selector:s,found:!!el,tagName:el?el.tagName.toLowerCase():null};})});break;case'scrollToElement':case'selectElement':var target=qs(p.selector);if(target){target.scrollIntoView({behavior:'smooth',block:'center'});send({type:'elementSelected',element:payloadOf(target)});}break;case'hoverElement':var h=qs(p.selector);if(h){if(highlightEl)highlightEl.style.outline='';h.style.outline='2px solid #3b82f6';highlightEl=h;}break;case'capturePageTree':captureTree();break;default:break;}});document.addEventListener('click',function(e){var el=e.target;if(!(el instanceof Element))return;send({type:'elementSelected',element:payloadOf(el)});},true);send({type:'bridgeReady'});})();`;
 function buildVvvebEditorHtml() {
@@ -991,6 +992,7 @@ var selectedEl      = null;
 var selectedElFingerprint = '';
 var selectedElRecoverMisses = 0;
 var MAX_SELECTED_RECOVER_MISSES = 12;
+var isDeselectingSelection = false;
 var suppressClickUntil = 0;
 var dragAttachDoc     = null;
 var currentMainTab  = 'design';
@@ -1019,6 +1021,8 @@ var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
 // cssProp is null for non-CSS attributes (href, alt, classes\u2026)
 var stateChanges    = [];
+/** Per-variation unsaved Design-tab state changes (input edits not yet finalized). */
+var stateChangesByVarId = {};
 /** Pre-apply DOM snapshots for granular + body changesets (used when removing History rows) */
 var appliedChangesetSnapshots = {};
 /** Canonical JSON fingerprints of persisted changesets per variation (last load / finalize) */
@@ -1033,13 +1037,49 @@ function endSuppressIframeMutationDirty() {
   suppressIframeMutationDirty = Math.max(0, suppressIframeMutationDirty - 1);
 }
 
+function commitStateChangesForActiveVariation() {
+  if (!activeVarId) return;
+  stateChangesByVarId[activeVarId] = (stateChanges || []).slice();
+}
+
+function loadStateChangesForActiveVariation() {
+  if (!activeVarId) {
+    stateChanges = [];
+    return;
+  }
+  stateChanges = (stateChangesByVarId[activeVarId] || []).slice();
+}
+
 function recoverSelectedElement(forceDeselectOnMiss) {
   if (selectedEl && selectedEl.ownerDocument && selectedEl.ownerDocument.contains(selectedEl)) {
     selectedElRecoverMisses = 0;
     return selectedEl;
   }
   if (!selectedElFingerprint) {
-    if (forceDeselectOnMiss) deselectElement();
+    // Nothing to recover; clear stale reference without calling deselectElement
+    // (which can recurse back through toolbar updates during rapid DOM churn).
+    if (forceDeselectOnMiss && selectedEl) {
+      beginSuppressIframeMutationDirty();
+      try {
+        try { selectedEl.classList.remove('vve-selected'); } catch(_) {}
+        selectedEl = null;
+        selectedElRecoverMisses = 0;
+      } finally {
+        endSuppressIframeMutationDirty();
+      }
+      var noSel = document.getElementById('no-sel');
+      if (noSel) noSel.style.display = '';
+      var elInfo = document.getElementById('el-info');
+      if (elInfo) elInfo.style.display = 'none';
+      var rp = document.getElementById('rp-accordion');
+      if (rp) rp.style.display = 'none';
+      var bc = document.getElementById('bc-path');
+      if (bc) {
+        bc.textContent = 'No element selected';
+        bc.style.color = 'var(--text-3)';
+      }
+      syncDomTreeSelection();
+    }
     return null;
   }
   var iframe = document.getElementById('iframeId');
@@ -1059,7 +1099,29 @@ function recoverSelectedElement(forceDeselectOnMiss) {
   }
   selectedElRecoverMisses += 1;
   if (forceDeselectOnMiss && selectedElRecoverMisses >= MAX_SELECTED_RECOVER_MISSES) {
-    deselectElement();
+    beginSuppressIframeMutationDirty();
+    try {
+      if (selectedEl) {
+        try { selectedEl.classList.remove('vve-selected'); } catch(_) {}
+      }
+      selectedEl = null;
+      selectedElFingerprint = '';
+      selectedElRecoverMisses = 0;
+    } finally {
+      endSuppressIframeMutationDirty();
+    }
+    var noSel2 = document.getElementById('no-sel');
+    if (noSel2) noSel2.style.display = '';
+    var elInfo2 = document.getElementById('el-info');
+    if (elInfo2) elInfo2.style.display = 'none';
+    var rp2 = document.getElementById('rp-accordion');
+    if (rp2) rp2.style.display = 'none';
+    var bc2 = document.getElementById('bc-path');
+    if (bc2) {
+      bc2.textContent = 'No element selected';
+      bc2.style.color = 'var(--text-3)';
+    }
+    syncDomTreeSelection();
   }
   return null;
 }
@@ -1154,6 +1216,10 @@ function setMode(mode) {
   if (mode === 'navigate') {
     setDragHandleActive(false);
     deselectElement();
+  } else if (mode === 'editor') {
+    // Re-bind interactions immediately when coming back from navigate mode.
+    // This avoids waiting for delayed iframe readiness/load retries.
+    syncIframeInteractions('mode-editor-toggle');
   }
   updateSelectionToolbar();
 }
@@ -1320,6 +1386,7 @@ function logChange(selector, inputId, value, targetEl, originalValue) {
     if (idx >= 0) { stateChanges[idx] = entry; } else { stateChanges.push(entry); }
   }
   if (currentMainTab === 'states') renderStatesTab();
+  commitStateChangesForActiveVariation();
   recomputeEditorDirty();
 }
 
@@ -1426,6 +1493,7 @@ function removeStateChange(idx) {
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1436,6 +1504,7 @@ function clearAllStates() {
     syncDesignInput(c);
   });
   stateChanges = [];
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1810,7 +1879,9 @@ function handleLoadExperiment(data) {
     experimentData = data;
     variations = Array.isArray(data.variations) ? data.variations : [];
     var prevActive = activeVarId;
+    commitStateChangesForActiveVariation();
     activeVarId = pickActiveVariationIdForLoad(data, variations, prevActive, true);
+    loadStateChangesForActiveVariation();
     writePersistedActiveVariationId(activeVarId);
     renderVariationTabs();
     var urlBarSkip = document.getElementById('url-bar');
@@ -1833,6 +1904,8 @@ function handleLoadExperiment(data) {
   if (!experimentData || prevKey !== nextKey) {
     varHtmlCache = {};
     sessionStructuralChainRowsByVarId = {};
+    stateChangesByVarId = {};
+    stateChanges = [];
     appliedChangesetSnapshots = {};
     appliedStructuralChangesetKeys = {};
   }
@@ -1840,6 +1913,7 @@ function handleLoadExperiment(data) {
   variations = Array.isArray(data.variations) ? data.variations : [];
   var sameExpPage = prevKey === nextKey;
   activeVarId = pickActiveVariationIdForLoad(data, variations, activeVarId, sameExpPage);
+  loadStateChangesForActiveVariation();
   writePersistedActiveVariationId(activeVarId);
   renderVariationTabs();
 
@@ -2124,7 +2198,7 @@ function loadPage(proxyUrl) {
   resetIframeBindings();
   iframe.style.display = 'block';
   setIframePageLoadingUi(true);
-  iframe.src = proxyUrl;
+  iframe.src = appendIframeReloadBust(proxyUrl);
   startIframeContentApplyWatcher(navGen);
   scheduleDomTreeRefresh();
 }
@@ -2163,8 +2237,10 @@ function renderVariationTabs() {
 function switchVariation(varId) {
   if (varId === activeVarId) return;
   saveCurrentVariationHtml();
+  commitStateChangesForActiveVariation();
   clearPendingGranularChangesets();
   activeVarId = varId;
+  loadStateChangesForActiveVariation();
   writePersistedActiveVariationId(varId);
   renderVariationTabs();
   deselectElement();
@@ -2200,6 +2276,7 @@ function switchVariation(varId) {
     }
   } catch(_) {}
   if (currentMainTab === 'history') renderHistoryTab();
+  if (currentMainTab === 'states') renderStatesTab();
   recomputeEditorDirty();
 }
 
@@ -2556,12 +2633,13 @@ function buildPersistedChainSetsForVariation(v) {
   var parsed = parseVariationChangesets(v);
   var base = filterGranularChangesetEntries(parsed);
   var sessionExtra = sessionStructuralChainRowsByVarId[v._id] || [];
-  if (v._id !== activeVarId) {
-    return mergeGranularChainSets(base, sessionExtra);
-  }
+  var sourceStateChanges =
+    v._id === activeVarId
+      ? stateChanges
+      : (stateChangesByVarId[v._id] || []);
   var overlay = [];
-  for (var si = 0; si < stateChanges.length; si++) {
-    var row = stateChangeToChainSet(stateChanges[si]);
+  for (var si = 0; si < sourceStateChanges.length; si++) {
+    var row = stateChangeToChainSet(sourceStateChanges[si]);
     if (row) overlay.push(row);
   }
   return mergeGranularChainSets(mergeGranularChainSets(base, sessionExtra), overlay);
@@ -2685,24 +2763,31 @@ function selectElement(el) {
   }
 }
 
-function deselectElement() {
-  setDragHandleActive(false);
-  beginSuppressIframeMutationDirty();
+function deselectElement(options) {
+  if (isDeselectingSelection) return;
+  isDeselectingSelection = true;
+  var skipToolbarUpdate = !!(options && options.skipToolbarUpdate);
   try {
-    if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
-    selectedElFingerprint = '';
-    selectedElRecoverMisses = 0;
+    setDragHandleActive(false);
+    beginSuppressIframeMutationDirty();
+    try {
+      if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+      selectedElFingerprint = '';
+      selectedElRecoverMisses = 0;
+    } finally {
+      endSuppressIframeMutationDirty();
+    }
+    document.getElementById('no-sel').style.display = '';
+    document.getElementById('el-info').style.display = 'none';
+    document.getElementById('rp-accordion').style.display = 'none';
+    document.getElementById('bc-path').textContent = 'No element selected';
+    document.getElementById('bc-path').style.color = 'var(--text-3)';
+    switchMainTab('design');
+    if (!skipToolbarUpdate) updateSelectionToolbar();
+    syncDomTreeSelection();
   } finally {
-    endSuppressIframeMutationDirty();
+    isDeselectingSelection = false;
   }
-  document.getElementById('no-sel').style.display = '';
-  document.getElementById('el-info').style.display = 'none';
-  document.getElementById('rp-accordion').style.display = 'none';
-  document.getElementById('bc-path').textContent = 'No element selected';
-  document.getElementById('bc-path').style.color = 'var(--text-3)';
-  switchMainTab('design');
-  updateSelectionToolbar();
-  syncDomTreeSelection();
 }
 
 // \u2500\u2500 Iframe selection chrome, floater toolbar, DOM tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -2953,7 +3038,7 @@ function renderDomTree(filterRaw) {
 
   function labelFor(el) {
     var tag = el.tagName.toLowerCase();
-    if (el.id) return tag + '#' + el.id.slice(0, 40);
+    if (el.id != null && el.id !== '') return tag + '#' + String(el.id).slice(0, 40);
     var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
     if (cn) {
       var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
@@ -3959,6 +4044,7 @@ document.getElementById('btn-close').addEventListener('click', handleClose);
 
 function handleSave() {
   saveCurrentVariationHtml();
+  commitStateChangesForActiveVariation();
   var updatedVariations = variations.map(function(v) {
     var prevParsed = parseVariationChangesets(v);
     var granularPrev = filterGranularChangesetEntries(prevParsed);
@@ -3979,6 +4065,7 @@ function handleSave() {
   variations = updatedVariations;
   varHtmlCache = {};
   sessionStructuralChainRowsByVarId = {};
+  stateChangesByVarId = {};
   stateChanges = [];
   if (currentMainTab === 'states') renderStatesTab();
   captureBaselineFromVariations(variations);
@@ -4135,18 +4222,28 @@ window.addEventListener('load', function() {
   var iframe = document.getElementById('iframeId');
   iframe.addEventListener('load', function() {
     if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
+    // New iframe navigation: always drop bindings tied to the previous document.
+    resetIframeBindings();
     var doc = iframe.contentDocument;
-    if (!doc || !doc.body) return;
+    if (!doc) {
+      syncIframeInteractions('iframe-load-no-doc');
+      return;
+    }
     var docUrl = '';
     try { docUrl = String(doc.URL || ''); } catch(_) {}
     // Stale events: src may already be the proxy URL while the document is still
-    // about:blank (e.g. src cleared then reset to force reload).
-    if (docUrl === 'about:blank') return;
-    if (!iframeDocMatchesNavigatedSrc(iframe, doc)) return;
+    // about:blank (e.g. src cleared then reset to force reload). Ask sync path to retry.
+    if (docUrl === 'about:blank') {
+      syncIframeInteractions('iframe-load-about-blank');
+      return;
+    }
     attachIframeLoadingUntilComplete(iframe);
-    stopIframeContentApplyWatcher();
-    deselectElement();
-    applyActiveVariationHtml();
+    if (doc.body && iframeDocMatchesNavigatedSrc(iframe, doc)) {
+      stopIframeContentApplyWatcher();
+      deselectElement();
+      applyActiveVariationHtml();
+    }
+    // Always attempt sync; it has its own readiness checks + retry loop.
     syncIframeInteractions('iframe-load');
   });
 
@@ -4474,7 +4571,7 @@ function createVisualEditorMiddleware(options) {
         }
         html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
         const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const proxyBase = `/api/conversion-proxy?password=${encodeURIComponent(password)}&url=`;
+        const proxyBase = `/api/conversion-proxy?__ve_reload=${Date.now()}&password=${encodeURIComponent(password)}&url=`;
         html = html.replace(
           new RegExp(`(href|action)="${escapedOrigin}(/[^"]*)"`, "g"),
           (match, attr, urlPath) => {
@@ -4487,6 +4584,7 @@ function createVisualEditorMiddleware(options) {
         );
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${popupHideCss}
+${consentAllowCss}
 </head>`);
         }
         html = html.replace(
@@ -4504,7 +4602,7 @@ var PROXY_PASSWORD=${JSON.stringify(password)};
 window.__CONVERSION_EDITOR_ACTIVE__=true;
 function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}
 function toAbsolute(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")||raw.startsWith("//")?TARGET_ORIGIN:TARGET_PAGE_URL;return new URL(raw,base).toString();}catch(_){return raw;}}
-function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
+function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?__ve_reload="+Date.now()+"&password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
 var nativeAssign=window.location.assign?window.location.assign.bind(window.location):null;
 var nativeReplace=window.location.replace?window.location.replace.bind(window.location):null;
 function safeNavigate(raw,mode){var abs=toAbsolute(raw);var prox=toProxy(raw);if(!prox){try{console.warn("[conversion-proxy] redirect blocked",{mode:mode,requested:raw,resolved:abs,origin:TARGET_ORIGIN});}catch(_){}return false;}try{console.info("[conversion-proxy] redirect intercepted",{mode:mode,requested:raw,resolved:abs,proxied:prox});if(mode==="replace"&&nativeReplace){nativeReplace(prox);return true;}if(nativeAssign){nativeAssign(prox);return true;}window.location.href=prox;return true;}catch(err){try{console.warn("[conversion-proxy] redirect interception failed",{mode:mode,requested:raw,resolved:abs,proxied:prox,error:err&&err.message?err.message:String(err)});}catch(_){}return false;}}
@@ -4577,6 +4675,9 @@ if(window.fetch){
 }
 if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}
 if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}
+function withReloadBust(urlRaw){try{var u=resolveUrl(String(urlRaw||""));if(!u)return null;var p=u.pathname||"";var isRootProxyPath=p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0;if(!isRootProxyPath)return null;u.searchParams.set("__ve_reload",String(Date.now()));return u.toString();}catch(_){return null;}}
+document.addEventListener("click",function(ev){try{var t=ev&&ev.target;if(!t||!t.closest)return;var a=t.closest("a[href]");if(!a)return;var href=a.getAttribute("href")||a.href;var bust=withReloadBust(href);if(bust)a.setAttribute("href",bust);}catch(_){}},true);
+document.addEventListener("submit",function(ev){try{var f=ev&&ev.target;if(!f||!f.getAttribute)return;var act=f.getAttribute("action")||"";var bust=withReloadBust(act);if(bust)f.setAttribute("action",bust);}catch(_){}},true);
 if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}
 }catch(_){}})();</script>`;
         if (html.includes("</head>")) {

package/package.json

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