@accelerated-agency/visual-editor 0.2.4 → 0.2.5

package/dist/vite.js

@@ -842,6 +842,7 @@ select.pr-inp{cursor:pointer;background:#fff}
 <script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/inputs.js"></script>
 <!-- components.js defines shared colour-class arrays used by bootstrap5/widgets components -->
 <script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components-html.js"></script>
 <script>
 /* Safety stub: if components.js didn't define these, create empty arrays so
    components-bootstrap5.js doesn't throw ReferenceError on load. */
@@ -855,6 +856,18 @@ if (typeof colorSelectOptions    === 'undefined') window.colorSelectOptions    =
 if (typeof textColorSelectOptions=== 'undefined') window.textColorSelectOptions= [];
 if (typeof borderSelectOptions   === 'undefined') window.borderSelectOptions   = [];
 if (typeof sizeSelectOptions     === 'undefined') window.sizeSelectOptions     = [];
+if (window.Vvveb && window.Vvveb.Components) {
+  if (!window.Vvveb.ComponentsGroup) window.Vvveb.ComponentsGroup = {};
+  if (!window.Vvveb.ComponentsGroup['Bootstrap 5']) window.Vvveb.ComponentsGroup['Bootstrap 5'] = [];
+  try {
+    var baseExists =
+      window.Vvveb.Components._components &&
+      Object.prototype.hasOwnProperty.call(window.Vvveb.Components._components, '_base');
+    if (!baseExists && typeof window.Vvveb.Components.add === 'function') {
+      window.Vvveb.Components.add('_base', { name: 'Base', properties: [] });
+    }
+  } catch(_) {}
+}
 </script>
 <script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components-bootstrap5.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components-widgets.js"></script>
@@ -906,6 +919,8 @@ var experimentData  = null;
 var variations      = [];
 var activeVarId     = null;
 var varHtmlCache    = {};
+/** Per-variation chain rows from structural actions (insert/duplicate/delete/reorder/hide), merged on Finalize. */
+var sessionStructuralChainRowsByVarId = {};
 /** Last iframe proxy URL we navigated to \u2014 used to skip redundant reloads when parent re-sends load-experiment */
 var lastLoadedProxyUrl = '';
 /** API changeset rows (excluding __vvveb_body__) reapplied until selectors match late-hydrated DOM */
@@ -919,6 +934,8 @@ var iframeContentNavGen = 0;
 var iframeContentApplyTimer = null;
 var iframeEarlyGranularPrimedForGen = null;
 var iframeEarlySyncPrimedForGen = null;
+/** insert/reorder entries are applied from early granular + full apply \u2014 skip exact duplicates per iframe nav */
+var appliedStructuralChangesetKeys = {};
 var isDirty         = false;
 var vvvebReady      = false;
 var currentMode     = 'editor';
@@ -938,6 +955,8 @@ var selectionResizeBound = false;
 var clickAttachDoc = null;
 var changeObserver = null;
 var changeObserverDoc = null;
+/** Incremented while applying changesets / selection chrome so MutationObserver does not mark dirty */
+var suppressIframeMutationDirty = 0;
 /** { doc, onRS } \u2014 iframe document readystate until complete */
 var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
@@ -945,12 +964,89 @@ var iframeDocLoadingListeners = null;
 var stateChanges    = [];
 /** 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) */
+var baselineChangesetsByVarId = {};
+
+// \u2500\u2500 Dirty tracking (compare DB baseline + session stateChanges vs current export) \u2500\u2500
+function beginSuppressIframeMutationDirty() {
+  suppressIframeMutationDirty += 1;
+}
+
+function endSuppressIframeMutationDirty() {
+  suppressIframeMutationDirty = Math.max(0, suppressIframeMutationDirty - 1);
+}
+
+/** Stable stringify of a variation's changesets field (string or array from API). */
+function fingerprintChangesetsField(raw) {
+  if (raw == null) return '[]';
+  if (Array.isArray(raw)) {
+    try {
+      return JSON.stringify(raw);
+    } catch(_) {
+      return '[]';
+    }
+  }
+  if (typeof raw !== 'string') return '[]';
+  var s = raw.trim();
+  if (!s) return '[]';
+  try {
+    var p = JSON.parse(s);
+    return JSON.stringify(Array.isArray(p) ? p : []);
+  } catch(_) {
+    return '[]';
+  }
+}
+
+function captureBaselineFromVariations(list) {
+  baselineChangesetsByVarId = {};
+  if (!list || !list.length) return;
+  for (var i = 0; i < list.length; i++) {
+    var v = list[i];
+    if (!v || !v._id) continue;
+    baselineChangesetsByVarId[v._id] = fingerprintChangesetsField(v.changesets);
+  }
+}
+
+/** Fingerprint of what Finalize would send for this variation (matches buildPersistedChainSetsForVariation). */
+function persistedExportFingerprintForVariation(v) {
+  if (!v || !v._id) return '[]';
+  try {
+    var rows = buildPersistedChainSetsForVariation(v);
+    return JSON.stringify(rows || []);
+  } catch(_) {
+    return '[]';
+  }
+}
+
+function setEditorDirty(dirty) {
+  var was = isDirty;
+  isDirty = !!dirty;
+  var dot = document.getElementById('dirty-dot');
+  if (dot) dot.classList.toggle('on', isDirty);
+  if (isDirty && !was) send('mutations-changed', {});
+  if (!isDirty && was) send('editor-dirty', { dirty: false });
+  if (!isDirty) {
+    savedAt = Date.now();
+    updateSaveTime();
+  }
+}
 
-// \u2500\u2500 Dirty tracking \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
-function markDirty() {
-  isDirty = true;
-  document.getElementById('dirty-dot').classList.add('on');
-  send('mutations-changed', {});
+function recomputeEditorDirty() {
+  var d = stateChanges.length > 0;
+  if (!d && variations && variations.length) {
+    for (var i = 0; i < variations.length; i++) {
+      var v = variations[i];
+      var vid = v._id;
+      var cur = persistedExportFingerprintForVariation(v);
+      var base = baselineChangesetsByVarId[vid];
+      if (base == null) base = '[]';
+      if (cur !== base) {
+        d = true;
+        break;
+      }
+    }
+  }
+  setEditorDirty(d);
 }
 var savedAt = null;
 function updateSaveTime() {
@@ -960,12 +1056,6 @@ function updateSaveTime() {
   el.textContent = s < 60 ? s + 's ago' : Math.floor(s / 60) + 'm ago';
 }
 setInterval(updateSaveTime, 10000);
-function markClean() {
-  isDirty = false;
-  savedAt = Date.now();
-  document.getElementById('dirty-dot').classList.remove('on');
-  updateSaveTime();
-}
 
 // \u2500\u2500 Mode 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\u2500\u2500\u2500\u2500\u2500
 function setMode(mode) {
@@ -1142,6 +1232,7 @@ function logChange(selector, inputId, value, targetEl, originalValue) {
     if (idx >= 0) { stateChanges[idx] = entry; } else { stateChanges.push(entry); }
   }
   if (currentMainTab === 'states') renderStatesTab();
+  recomputeEditorDirty();
 }
 
 function renderStatesTab() {
@@ -1175,7 +1266,7 @@ function renderStatesTab() {
 
 // Resolve a live DOM element for a state-change entry.
 // Tries the stored direct reference first; if it's detached or missing,
-// falls back to querySelector(selector) inside the iframe document.
+// falls back to querySelector (with .vve-* class stripped) inside the iframe document.
 function resolveChangeEl(change) {
   try {
     var iframeDoc = document.getElementById('iframeId').contentDocument;
@@ -1185,7 +1276,7 @@ function resolveChangeEl(change) {
       return change.targetEl;
     }
     // Fallback: re-query by the stored CSS selector
-    return iframeDoc.querySelector(change.selector) || null;
+    return querySelectorResolved(iframeDoc, change.selector);
   } catch (e) {
     console.warn('[V2] resolveChangeEl:', e);
     return null;
@@ -1248,7 +1339,7 @@ function removeStateChange(idx) {
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
   renderStatesTab();
-  markDirty();
+  recomputeEditorDirty();
 }
 
 function clearAllStates() {
@@ -1258,7 +1349,7 @@ function clearAllStates() {
   });
   stateChanges = [];
   renderStatesTab();
-  markDirty();
+  recomputeEditorDirty();
 }
 
 // \u2500\u2500 History tab (saved changesets from DB for active variation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -1283,10 +1374,11 @@ function persistActiveVariationChangesets(arr) {
 
 function entrySnapshotKey(entry) {
   if (!entry || !entry.selector) return '';
+  var selKey = sanitizeSelectorForMatch(entry.selector) || entry.selector;
   return (
-    entry.selector +
+    selKey +
     '\0' +
-    (entry.type || '') +
+    normalizeChangesetType(entry) +
     '\0' +
     String(entry.property || '') +
     '\0' +
@@ -1304,7 +1396,7 @@ function captureChangesetSnapshotBeforeApply(entry, el, iframeDoc) {
   if (!entry || !el || entry.selector === '__vvveb_body__') return;
   var k = entrySnapshotKey(entry);
   if (appliedChangesetSnapshots[k]) return;
-  switch (entry.type) {
+  switch (normalizeChangesetType(entry)) {
     case 'content':
       if (entry.html != null) {
         appliedChangesetSnapshots[k] = { kind: 'innerHTML', v: el.innerHTML };
@@ -1372,10 +1464,7 @@ function revertChangesetEntryOnDom(entry) {
   if (!iframeDoc) return false;
   var k = entrySnapshotKey(entry);
   var snap = appliedChangesetSnapshots[k];
-  var el = null;
-  try {
-    el = iframeDoc.querySelector(entry.selector);
-  } catch(_) {}
+  var el = querySelectorResolved(iframeDoc, entry.selector);
   if (!snap || !el) {
     softReloadEditorIframe();
     delete appliedChangesetSnapshots[k];
@@ -1402,7 +1491,7 @@ function revertChangesetEntryOnDom(entry) {
 function historyEntryTypeLabel(entry) {
   if (!entry) return 'Change';
   if (entry.selector === '__vvveb_body__') return 'Full page HTML';
-  var t = (entry.type || '').toLowerCase();
+  var t = normalizeChangesetType(entry);
   if (t === 'content') return entry.html != null ? 'Inner HTML' : 'Text / content';
   if (t === 'style') return 'Style: ' + (entry.property || '');
   if (t === 'attribute') return 'Attribute: ' + (entry.attribute || '');
@@ -1416,7 +1505,8 @@ function historyEntryValuePreview(entry) {
   if (entry.selector === '__vvveb_body__') return '(body snapshot)';
   if (entry.html != null) return String(entry.html).slice(0, 120);
   if (entry.value != null) return String(entry.value).slice(0, 120);
-  if (entry.type === 'style' || entry.type === 'attribute') return String(entry.value != null ? entry.value : '').slice(0, 120);
+  var nt = normalizeChangesetType(entry);
+  if (nt === 'style' || nt === 'attribute') return String(entry.value != null ? entry.value : '').slice(0, 120);
   return '';
 }
 
@@ -1450,6 +1540,9 @@ function renderHistoryTab() {
       var val = historyEntryValuePreview(item.entry);
       html +=
         '<div class="state-item">' +
+        '<span class="state-item-idx" style="opacity:0.55;font-size:10px;min-width:2.2em;display:inline-block" title="Order in saved changesets">#' +
+        item.idx +
+        '</span>' +
         '<span class="state-item-label">' +
         esc(lab) +
         '</span>' +
@@ -1458,7 +1551,9 @@ function renderHistoryTab() {
         '">' +
         esc(val) +
         '</span>' +
-        '<button type="button" class="state-remove" title="Remove from saved changesets" onclick="removeHistoryChangeset(' +
+        '<button type="button" class="state-remove" title="Remove this saved row (#' +
+        item.idx +
+        ')" onclick="removeHistoryChangeset(' +
         item.idx +
         ')">&#x2715;</button>' +
         '</div>';
@@ -1468,6 +1563,16 @@ function renderHistoryTab() {
   container.innerHTML = html;
 }
 
+function changesetListHasStructural(arr) {
+  if (!arr || !arr.length) return false;
+  for (var i = 0; i < arr.length; i++) {
+    var e = arr[i];
+    var t = normalizeChangesetType(e);
+    if (e && (t === 'insert' || t === 'reorder')) return true;
+  }
+  return false;
+}
+
 function removeHistoryChangeset(idx) {
   var v = getActiveVariationForHistory();
   if (!v) return;
@@ -1480,18 +1585,31 @@ function removeHistoryChangeset(idx) {
   try {
     delete varHtmlCache[activeVarId];
   } catch(_) {}
-  if (!didReload) {
+  // Re-applying remaining rows on top of current DOM duplicates insert/reorder nodes; reload when any
+  // structural row remains or was removed (revert may already have started a reload for insert/body).
+  var removedType = normalizeChangesetType(removed);
+  var needsStructuralReload =
+    !didReload &&
+    (removedType === 'insert' ||
+      removedType === 'reorder' ||
+      changesetListHasStructural(arr));
+  if (didReload) {
+    /* revertChangesetEntryOnDom already kicked off iframe reload */
+  } else if (needsStructuralReload) {
+    softReloadEditorIframe();
+  } else {
     try {
+      appliedStructuralChangesetKeys = {};
       applyActiveVariationHtml();
       registerPendingGranularChangesets(
         arr,
         document.getElementById('iframeId').contentDocument,
       );
+      saveCurrentVariationHtml();
     } catch(_) {}
-    saveCurrentVariationHtml();
   }
   if (currentMainTab === 'history') renderHistoryTab();
-  markDirty();
+  recomputeEditorDirty();
   scheduleDomTreeRefresh();
 }
 
@@ -1501,15 +1619,82 @@ function clearAllHistoryChangesets() {
   if (!parseVariationChangesets(v).length) return;
   persistActiveVariationChangesets([]);
   appliedChangesetSnapshots = {};
+  appliedStructuralChangesetKeys = {};
   try {
     delete varHtmlCache[activeVarId];
   } catch(_) {}
   if (currentMainTab === 'history') renderHistoryTab();
-  markDirty();
+  recomputeEditorDirty();
   scheduleDomTreeRefresh();
   softReloadEditorIframe();
 }
 
+// \u2500\u2500 Persisted active variation (survives iframe / full page reload) \u2500\u2500\u2500\u2500\u2500\u2500\u2500
+/** All Visual Editor iframe keys in localStorage use this prefix \u2014 cleared on close. */
+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);
+      }
+    }
+  } catch(_) {}
+}
+
+function activeVariationStorageKeyFromPayload(data) {
+  return (
+    VVE_LOCAL_STORAGE_PREFIX +
+    'activeVar:' +
+    String((data && data.experimentId) || '') +
+    ':' +
+    String((data && data.pageUrl) || '')
+  );
+}
+
+function readPersistedActiveVariationId(data) {
+  try {
+    var sk = activeVariationStorageKeyFromPayload(data);
+    if (sk === VVE_LOCAL_STORAGE_PREFIX + 'activeVar::') return null;
+    return localStorage.getItem(sk);
+  } catch(_) {
+    return null;
+  }
+}
+
+function writePersistedActiveVariationId(varId) {
+  try {
+    if (!experimentData || !experimentData.experimentId) return;
+    var sk =
+      VVE_LOCAL_STORAGE_PREFIX +
+      'activeVar:' +
+      String(experimentData.experimentId || '') +
+      ':' +
+      String(experimentData.pageUrl || '');
+    if (sk === VVE_LOCAL_STORAGE_PREFIX + 'activeVar::') return;
+    if (varId) localStorage.setItem(sk, String(varId));
+  } catch(_) {}
+}
+
+/**
+ * @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;
+  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; })) {
+    return stored;
+  }
+  return fallback;
+}
+
 // \u2500\u2500 Experiment loading \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 handleLoadExperiment(data) {
   clearPendingGranularChangesets();
@@ -1537,10 +1722,8 @@ function handleLoadExperiment(data) {
     experimentData = data;
     variations = Array.isArray(data.variations) ? data.variations : [];
     var prevActive = activeVarId;
-    var baseline = variations.find(function(v) { return v.baseline; });
-    var fallback = (baseline || variations[0] || {})._id || null;
-    activeVarId =
-      prevActive && variations.some(function(v) { return v._id === prevActive; }) ? prevActive : fallback;
+    activeVarId = pickActiveVariationIdForLoad(data, variations, prevActive, true);
+    writePersistedActiveVariationId(activeVarId);
     renderVariationTabs();
     var urlBarSkip = document.getElementById('url-bar');
     urlBarSkip.textContent = pageUrl;
@@ -1554,24 +1737,30 @@ function handleLoadExperiment(data) {
       if (ifrSkip && ifrSkip.contentDocument) attachIframeLoadingUntilComplete(ifrSkip);
     } catch(_) {}
     if (currentMainTab === 'history') renderHistoryTab();
+    captureBaselineFromVariations(variations);
+    recomputeEditorDirty();
     return;
   }
 
   if (!experimentData || prevKey !== nextKey) {
     varHtmlCache = {};
+    sessionStructuralChainRowsByVarId = {};
     appliedChangesetSnapshots = {};
+    appliedStructuralChangesetKeys = {};
   }
   experimentData = data;
   variations = Array.isArray(data.variations) ? data.variations : [];
-  // New document load: start on baseline so the first paint matches the live page.
-  var baseline = variations.find(function(v) { return v.baseline; });
-  activeVarId = (baseline || variations[0] || {})._id || null;
+  var sameExpPage = prevKey === nextKey;
+  activeVarId = pickActiveVariationIdForLoad(data, variations, activeVarId, sameExpPage);
+  writePersistedActiveVariationId(activeVarId);
   renderVariationTabs();
 
   var urlBar = document.getElementById('url-bar');
   urlBar.textContent = pageUrl;
   urlBar.title = pageUrl;
   if (currentMainTab === 'history') renderHistoryTab();
+  captureBaselineFromVariations(variations);
+  recomputeEditorDirty();
   loadPage(proxyUrl);
 }
 
@@ -1671,9 +1860,7 @@ function granularAnySelectorMatches(doc, cs) {
   if (!doc || !cs || !cs.length) return false;
   var g = filterGranularChangesetEntries(cs);
   for (var i = 0; i < g.length; i++) {
-    try {
-      if (doc.querySelector(g[i].selector)) return true;
-    } catch(_) {}
+    if (querySelectorResolved(doc, g[i].selector)) return true;
   }
   return false;
 }
@@ -1694,7 +1881,7 @@ function appendIframeReloadBust(url) {
 // applying variation changesets there is then wiped when the real navigation commits.
 function iframeDocMatchesNavigatedSrc(iframe, doc) {
   if (!iframe || !doc) return false;
-  var src = iframe.src || iframe.getAttribute('src') || '';
+  var src = iframe.getAttribute('src') || iframe.src || '';
   if (!src || src === 'about:blank') return false;
   var loc = '';
   try {
@@ -1703,12 +1890,28 @@ function iframeDocMatchesNavigatedSrc(iframe, doc) {
     return false;
   }
   if (!loc || loc === 'about:blank') return false;
-  var rmSrc = src.match(/__ve_reload=([0-9]+)/);
-  if (rmSrc) return loc.indexOf('__ve_reload=' + rmSrc[1]) !== -1;
   try {
     var base = window.location.href;
     var su = new URL(src, base);
+    if (su.searchParams && su.searchParams.has('__ve_reload')) {
+      su.searchParams.delete('__ve_reload');
+    }
     var du = new URL(loc, base);
+    if (du.searchParams && du.searchParams.has('__ve_reload')) {
+      du.searchParams.delete('__ve_reload');
+    }
+    // Same-origin proxy that keeps document address aligned with iframe src
+    if (su.origin === du.origin && su.pathname + su.search === du.pathname + du.search) {
+      return true;
+    }
+    // conversion-proxy: iframe src stays on our app, but doc.URL is usually the target site after redirects
+    var p = su.pathname || '';
+    var isRootProxyPath = p === '/api/conversion-proxy' || p.indexOf('/api/conversion-proxy/') === 0;
+    var isNestedMalformedProxy = !isRootProxyPath && p.indexOf('api/conversion-proxy') !== -1;
+    if (isNestedMalformedProxy) return false;
+    if (isRootProxyPath || String(su.href).indexOf('conversion-proxy') !== -1) {
+      return doc === iframe.contentDocument;
+    }
     return su.pathname + su.search === du.pathname + du.search;
   } catch(_) {
     return false;
@@ -1741,6 +1944,7 @@ function resetIframeBindings() {
   detachIframeLoadingListeners();
   stopIframeContentApplyWatcher();
   appliedChangesetSnapshots = {};
+  appliedStructuralChangesetKeys = {};
   clickAttachDoc = null;
   dragAttachDoc = null;
   changeObserverDoc = null;
@@ -1811,13 +2015,19 @@ function switchVariation(varId) {
   saveCurrentVariationHtml();
   clearPendingGranularChangesets();
   activeVarId = varId;
+  writePersistedActiveVariationId(varId);
   renderVariationTabs();
   deselectElement();
   try {
     var iframe = document.getElementById('iframeId');
     var saved = varHtmlCache[varId];
     if (saved) {
-      iframe.contentDocument.body.innerHTML = saved;
+      beginSuppressIframeMutationDirty();
+      try {
+        iframe.contentDocument.body.innerHTML = saved;
+      } finally {
+        endSuppressIframeMutationDirty();
+      }
       detachIframeLoadingListeners();
       setIframePageLoadingUi(false);
       syncIframeInteractions('switch-variation-cache');
@@ -1840,6 +2050,7 @@ function switchVariation(varId) {
     }
   } catch(_) {}
   if (currentMainTab === 'history') renderHistoryTab();
+  recomputeEditorDirty();
 }
 
 function saveCurrentVariationHtml() {
@@ -1878,31 +2089,123 @@ function parseVariationChangesets(variation) {
   }
 }
 
+/** Lowercase entry.type so persisted / API rows match switches (e.g. Insert vs insert). */
+function normalizeChangesetType(entry) {
+  return String(entry && entry.type != null ? entry.type : '').toLowerCase();
+}
+
 function filterGranularChangesetEntries(cs) {
   if (!cs || !cs.length) return [];
   var out = [];
   for (var i = 0; i < cs.length; i++) {
     var e = cs[i];
-    if (e && e.selector && e.selector !== '__vvveb_body__') out.push(e);
+    if (!e || !e.selector || e.selector === '__vvveb_body__') continue;
+    out.push(e);
   }
   return out;
 }
 
+/** Dedup key for merging chain-set rows (overlay wins over base). */
+function chainSetDedupKey(entry) {
+  if (!entry || !entry.selector) return '';
+  var t = normalizeChangesetType(entry);
+  if (t === 'style') return entry.selector + '|s|' + String(entry.property || '');
+  if (t === 'content') return entry.selector + '|c|' + (entry.html != null ? 'h' : 't');
+  if (t === 'attribute') return entry.selector + '|a|' + String(entry.attribute || '');
+  if (t === 'insert') return entry.selector + '|i|' + String(entry.action || '') + '|' + String(entry.html || '').slice(0, 120);
+  if (t === 'remove') return entry.selector + '|r|';
+  if (t === 'reorder') {
+    return entry.selector + '|ro|' + String(entry.targetSelector || '') + '|' + String(entry.action || '');
+  }
+  try {
+    return entry.selector + '|' + t + '|' + JSON.stringify(entry);
+  } catch(_) {
+    return entry.selector + '|' + t;
+  }
+}
+
+function mergeGranularChainSets(baseList, overlayList) {
+  var map = {};
+  var order = [];
+  function ingest(arr) {
+    if (!arr || !arr.length) return;
+    for (var i = 0; i < arr.length; i++) {
+      var e = arr[i];
+      if (!e || !e.selector) continue;
+      var k = chainSetDedupKey(e);
+      if (!map[k]) order.push(k);
+      map[k] = e;
+    }
+  }
+  ingest(baseList);
+  ingest(overlayList);
+  var out = [];
+  for (var j = 0; j < order.length; j++) {
+    out.push(map[order[j]]);
+  }
+  return out;
+}
+
+function appendSessionStructuralChainRow(varId, row) {
+  if (!varId || !row) return;
+  if (!sessionStructuralChainRowsByVarId[varId]) sessionStructuralChainRowsByVarId[varId] = [];
+  sessionStructuralChainRowsByVarId[varId].push(row);
+}
+
+/** One States-tab row -> Conversion.io chain-set shape (matches applyChangesetEntry). */
+function stateChangeToChainSet(c) {
+  if (!c || !c.selector) return null;
+  if (c.cssProp) {
+    return { selector: c.selector, type: 'style', property: c.cssProp, value: c.value };
+  }
+  switch (c.inputId) {
+    case 'pp-text':
+      return { selector: c.selector, type: 'content', value: c.value };
+    case 'pp-html':
+      return { selector: c.selector, type: 'content', html: c.value };
+    case 'pp-cls':
+      return { selector: c.selector, type: 'attribute', attribute: 'class', value: c.value };
+    case 'pp-id':
+      return { selector: c.selector, type: 'attribute', attribute: 'id', value: c.value };
+    case 'pp-href':
+      return { selector: c.selector, type: 'attribute', attribute: 'href', value: c.value };
+    case 'pp-target':
+      return { selector: c.selector, type: 'attribute', attribute: 'target', value: c.value };
+    case 'pp-src':
+      return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value };
+    case 'pp-alt':
+      return { selector: c.selector, type: 'attribute', attribute: 'alt', value: c.value };
+    case 'pp-ph':
+      return { selector: c.selector, type: 'attribute', attribute: 'placeholder', value: c.value };
+    case 'pp-css':
+      return { selector: c.selector, type: 'attribute', attribute: 'style', value: c.value };
+    case 'pp-mob-css':
+      return { selector: c.selector, type: 'attribute', attribute: 'data-mobile-css', value: c.value };
+    case 'pp-tab-css':
+      return { selector: c.selector, type: 'attribute', attribute: 'data-tablet-css', value: c.value };
+    default:
+      return null;
+  }
+}
+
 function countUnresolvedGranularSelectors(iframeDoc, entries) {
   if (!iframeDoc || !entries || !entries.length) return 0;
   var n = 0;
   for (var i = 0; i < entries.length; i++) {
-    var el = null;
-    try { el = iframeDoc.querySelector(entries[i].selector); } catch(_) {}
-    if (!el) n++;
+    if (!querySelectorResolved(iframeDoc, entries[i].selector)) n++;
   }
   return n;
 }
 
 function applyGranularChangesetEntries(iframeDoc, entries) {
   if (!iframeDoc || !entries || !entries.length) return;
-  for (var i = 0; i < entries.length; i++) {
-    applyChangesetEntry(entries[i], iframeDoc);
+  beginSuppressIframeMutationDirty();
+  try {
+    for (var i = 0; i < entries.length; i++) {
+      applyChangesetEntry(entries[i], iframeDoc);
+    }
+  } finally {
+    endSuppressIframeMutationDirty();
   }
 }
 
@@ -1957,6 +2260,30 @@ function flushPendingGranularChangesets() {
   scheduleGranularChangesetReapply();
 }
 
+/** Stable key for structural changesets (insert/reorder) to avoid double-apply across early + full paint. */
+function structuralChangesetDedupKey(entry) {
+  var nt = normalizeChangesetType(entry);
+  if (!entry || (nt !== 'insert' && nt !== 'reorder')) return '';
+  var vid = activeVarId || '';
+  try {
+    return (
+      vid +
+      '\0' +
+      nt +
+      '\0' +
+      entry.selector +
+      '\0' +
+      String(entry.action || '') +
+      '\0' +
+      String(entry.html != null ? entry.html : '').slice(0, 240) +
+      '\0' +
+      String(entry.targetSelector || '')
+    );
+  } catch(_) {
+    return vid + '\0' + nt + '\0' + entry.selector;
+  }
+}
+
 /**
  * Apply a single changeset entry inside the editor iframe.
  * Backend format: { selector, type: 'content'|'style'|'attribute'|'insert'|'remove', ... }
@@ -1976,21 +2303,34 @@ function applyChangesetEntry(entry, iframeDoc) {
     return;
   }
 
+  var structuralDedupeKey = structuralChangesetDedupKey(entry);
+  if (structuralDedupeKey && appliedStructuralChangesetKeys[structuralDedupeKey]) return;
+
   // \u2500\u2500 Standard granular changeset \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
-  var el = null;
-  try { el = iframeDoc.querySelector(entry.selector); } catch(_) {}
+  var el = querySelectorResolved(iframeDoc, entry.selector);
   if (!el) return;
 
   captureChangesetSnapshotBeforeApply(entry, el, iframeDoc);
 
-  switch (entry.type) {
+  switch (normalizeChangesetType(entry)) {
     case 'content':
       if (entry.html != null)   el.innerHTML    = entry.html;
       else if (entry.value != null) el.textContent = entry.value;
       break;
     case 'style':
-      if (entry.property && entry.value != null) {
-        el.style[camelize(entry.property)] = entry.value;
+      if (entry.property) {
+        var propKebab = entry.property;
+        var cam = camelize(propKebab);
+        if (entry.value == null || entry.value === '') {
+          try { el.style.removeProperty(propKebab); } catch(_) {}
+          try { if (cam in el.style) el.style[cam] = ''; } catch(__) {}
+        } else {
+          try {
+            el.style.setProperty(propKebab, entry.value, 'important');
+          } catch(_) {
+            el.style[cam] = entry.value;
+          }
+        }
       }
       break;
     case 'attribute':
@@ -2001,11 +2341,23 @@ function applyChangesetEntry(entry, iframeDoc) {
     case 'insert': {
       var pos = entry.action === 'before' ? 'beforebegin' : 'afterend';
       if (entry.html) el.insertAdjacentHTML(pos, entry.html);
+      if (structuralDedupeKey) appliedStructuralChangesetKeys[structuralDedupeKey] = true;
       break;
     }
     case 'remove':
       el.style.display = 'none';
       break;
+    case 'reorder': {
+      var target = entry.targetSelector ? querySelectorResolved(iframeDoc, entry.targetSelector) : null;
+      if (!target || !el.parentNode || !target.parentNode) break;
+      if (entry.action === 'before') {
+        target.parentNode.insertBefore(el, target);
+      } else {
+        target.parentNode.insertBefore(el, target.nextSibling);
+      }
+      if (structuralDedupeKey) appliedStructuralChangesetKeys[structuralDedupeKey] = true;
+      break;
+    }
     default: break;
   }
 }
@@ -2020,19 +2372,24 @@ function applyActiveVariationHtml() {
   var variation = variations.find(function(v) { return v._id === activeVarId; });
   var cs = parseVariationChangesets(variation);
 
-  // If we have an in-session HTML snapshot, use it (user edited in this session)
-  var saved = varHtmlCache[activeVarId];
-  if (saved) {
-    try { iframeDoc.body.innerHTML = saved; } catch(_) {}
-    return;
-  }
+  beginSuppressIframeMutationDirty();
+  try {
+    // If we have an in-session HTML snapshot, use it (user edited in this session)
+    var saved = varHtmlCache[activeVarId];
+    if (saved) {
+      try { iframeDoc.body.innerHTML = saved; } catch(_) {}
+      return;
+    }
 
-  if (!cs.length) return;
-  for (var i = 0; i < cs.length; i++) {
-    applyChangesetEntry(cs[i], iframeDoc);
+    if (!cs.length) return;
+    for (var i = 0; i < cs.length; i++) {
+      applyChangesetEntry(cs[i], iframeDoc);
+    }
+    // Selectors often miss on first paint (client-rendered sections). Retry via timer + mutations.
+    registerPendingGranularChangesets(cs, iframeDoc);
+  } finally {
+    endSuppressIframeMutationDirty();
   }
-  // Selectors often miss on first paint (client-rendered sections). Retry via timer + mutations.
-  registerPendingGranularChangesets(cs, iframeDoc);
 }
 
 function changesetsHaveBodySnapshot(cs) {
@@ -2043,6 +2400,23 @@ function changesetsHaveBodySnapshot(cs) {
   return false;
 }
 
+/** Rows to persist for this variation on Finalize (same chain-set model as EditorShell \u2014 never __vvveb_body__). */
+function buildPersistedChainSetsForVariation(v) {
+  if (!v || !v._id) return [];
+  var parsed = parseVariationChangesets(v);
+  var base = filterGranularChangesetEntries(parsed);
+  var sessionExtra = sessionStructuralChainRowsByVarId[v._id] || [];
+  if (v._id !== activeVarId) {
+    return mergeGranularChainSets(base, sessionExtra);
+  }
+  var overlay = [];
+  for (var si = 0; si < stateChanges.length; si++) {
+    var row = stateChangeToChainSet(stateChanges[si]);
+    if (row) overlay.push(row);
+  }
+  return mergeGranularChainSets(mergeGranularChainSets(base, sessionExtra), overlay);
+}
+
 /**
  * While document.readyState === 'loading', apply only granular changesets (no __vvveb_body__
  * replacement) so the first painted nodes can receive edits before iframe/window load completes.
@@ -2053,10 +2427,15 @@ function applyVariationGranularOnly(iframeDoc) {
   var variation = variations.find(function(v) { return v._id === activeVarId; });
   var cs = parseVariationChangesets(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
-  for (var i = 0; i < cs.length; i++) {
-    applyChangesetEntry(cs[i], iframeDoc);
+  beginSuppressIframeMutationDirty();
+  try {
+    for (var i = 0; i < cs.length; i++) {
+      applyChangesetEntry(cs[i], iframeDoc);
+    }
+    registerPendingGranularChangesets(cs, iframeDoc);
+  } finally {
+    endSuppressIframeMutationDirty();
   }
-  registerPendingGranularChangesets(cs, iframeDoc);
 }
 
 /** Re-try granular entries without resetting pending registration (use between poll ticks). */
@@ -2066,8 +2445,13 @@ function reapplyActiveVariationGranular(iframeDoc) {
   var variation = variations.find(function(v) { return v._id === activeVarId; });
   var cs = parseVariationChangesets(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
-  for (var i = 0; i < cs.length; i++) {
-    applyChangesetEntry(cs[i], iframeDoc);
+  beginSuppressIframeMutationDirty();
+  try {
+    for (var i = 0; i < cs.length; i++) {
+      applyChangesetEntry(cs[i], iframeDoc);
+    }
+  } finally {
+    endSuppressIframeMutationDirty();
   }
 }
 
@@ -2129,9 +2513,14 @@ function startIframeContentApplyWatcher(navGen) {
 
 // \u2500\u2500 Element selection \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 selectElement(el) {
-  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
-  selectedEl = el;
-  try { el.classList.add('vve-selected'); } catch(_) {}
+  beginSuppressIframeMutationDirty();
+  try {
+    if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
+    selectedEl = el;
+    try { el.classList.add('vve-selected'); } catch(_) {}
+  } finally {
+    endSuppressIframeMutationDirty();
+  }
   document.getElementById('bc-path').textContent = buildSelector(el);
   document.getElementById('bc-path').style.color = 'var(--accent-txt)';
   document.getElementById('no-sel').style.display = 'none';
@@ -2146,7 +2535,12 @@ function selectElement(el) {
 
 function deselectElement() {
   setDragHandleActive(false);
-  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+  beginSuppressIframeMutationDirty();
+  try {
+    if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+  } finally {
+    endSuppressIframeMutationDirty();
+  }
   document.getElementById('no-sel').style.display = '';
   document.getElementById('el-info').style.display = 'none';
   document.getElementById('rp-accordion').style.display = 'none';
@@ -2170,18 +2564,27 @@ function injectIframeSelectionStyles(doc) {
     'html.vve-drag-armed .vve-selected{cursor:grab!important;}' +
     '.vve-dragging{opacity:0.92!important;outline:2px dashed #f59e0b!important;' +
     'outline-offset:2px!important;cursor:grabbing!important;box-shadow:none!important;}';
-  doc.head.appendChild(st);
+  beginSuppressIframeMutationDirty();
+  try {
+    doc.head.appendChild(st);
+  } finally {
+    endSuppressIframeMutationDirty();
+  }
 }
 
 function setDragHandleActive(on) {
   dragHandleActive = !!on;
   var b = document.getElementById('sf-drag');
   if (b) b.classList.toggle('active', dragHandleActive);
+  beginSuppressIframeMutationDirty();
   try {
     var iframe = document.getElementById('iframeId');
     var d = iframe && iframe.contentDocument && iframe.contentDocument.documentElement;
     if (d) d.classList.toggle('vve-drag-armed', dragHandleActive);
-  } catch(_) {}
+  } catch(_) {
+  } finally {
+    endSuppressIframeMutationDirty();
+  }
 }
 
 function positionSelectionToolbar() {
@@ -2251,34 +2654,72 @@ function selectElementFromTree(el) {
 
 function duplicateSelectedEl() {
   if (!selectedEl || !selectedEl.parentNode) return;
+  var anchorSel = buildSelector(selectedEl);
   var clone = selectedEl.cloneNode(true);
   clone.classList.remove('vve-selected');
   var all = clone.querySelectorAll ? clone.querySelectorAll('.vve-selected') : [];
   for (var i = 0; i < all.length; i++) all[i].classList.remove('vve-selected');
   clone.style.visibility = '';
   if (clone.removeAttribute) clone.removeAttribute('data-vve-hidden');
+  stripDataVveInstanceSubtree(clone);
+  try {
+    if (clone.id) clone.removeAttribute('id');
+  } catch(_) {}
+  try {
+    clone.setAttribute('data-vve-instance', generateVveInstanceId());
+  } catch(_) {}
+  if (activeVarId) {
+    appendSessionStructuralChainRow(activeVarId, {
+      selector: anchorSel,
+      type: 'insert',
+      action: 'after',
+      html: clone.outerHTML,
+    });
+  }
   selectedEl.parentNode.insertBefore(clone, selectedEl.nextSibling);
-  markDirty();
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
   scheduleDomTreeRefresh();
   selectElement(clone);
 }
 
 function toggleHideSelectedEl() {
   if (!selectedEl) return;
+  var hidSel = buildSelector(selectedEl);
   if (selectedEl.getAttribute('data-vve-hidden') === '1') {
     selectedEl.style.visibility = '';
     selectedEl.removeAttribute('data-vve-hidden');
+    if (activeVarId) {
+      appendSessionStructuralChainRow(activeVarId, {
+        selector: hidSel,
+        type: 'style',
+        property: 'visibility',
+        value: '',
+      });
+    }
   } else {
     selectedEl.style.visibility = 'hidden';
     selectedEl.setAttribute('data-vve-hidden', '1');
+    if (activeVarId) {
+      appendSessionStructuralChainRow(activeVarId, {
+        selector: hidSel,
+        type: 'style',
+        property: 'visibility',
+        value: 'hidden',
+      });
+    }
   }
-  markDirty();
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
 }
 
 function deleteSelectedEl() {
   if (!selectedEl || !selectedEl.parentNode) return;
+  var delSel = buildSelector(selectedEl);
   selectedEl.remove();
-  markDirty();
+  if (activeVarId) appendSessionStructuralChainRow(activeVarId, { selector: delSel, type: 'remove' });
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
   deselectElement();
   scheduleDomTreeRefresh();
 }
@@ -2570,14 +3011,12 @@ function renderImageSection(el) {
     var prev = document.querySelector('.img-preview');
     if (prev) prev.src = srcInp.value;
     logChange(sel, 'pp-src', srcInp.value, el, orig);
-    markDirty();
   });
   var altInp = document.getElementById('pp-img-alt');
   if (altInp) altInp.addEventListener('input', function() {
     var orig = getOriginalValue('pp-alt', el);
     el.setAttribute('alt', altInp.value);
     logChange(sel, 'pp-alt', altInp.value, el, orig);
-    markDirty();
   });
 
   // Wire srcset entry inputs
@@ -2586,7 +3025,8 @@ function renderImageSection(el) {
     var dInp = document.getElementById('pp-se-desc-'+i);
     function flushSrcset() {
       el.setAttribute('srcset', buildSrcset(_srcsetEntries));
-      markDirty();
+      saveCurrentVariationHtml();
+      recomputeEditorDirty();
     }
     if (uInp) uInp.addEventListener('input', function(){ _srcsetEntries[i].url = uInp.value; flushSrcset(); });
     if (dInp) dInp.addEventListener('input', function(){ _srcsetEntries[i].descriptor = dInp.value; flushSrcset(); });
@@ -2604,7 +3044,8 @@ function renderImageSection(el) {
     }
     function flushSizes() {
       el.setAttribute('sizes', buildSizes(_sizesEntries));
-      markDirty();
+      saveCurrentVariationHtml();
+      recomputeEditorDirty();
     }
     if (opInp)   opInp.addEventListener('change', function(){ buildCondition(); flushSizes(); });
     if (valInp)  valInp.addEventListener('input',  function(){ buildCondition(); flushSizes(); });
@@ -2618,7 +3059,12 @@ function addSrcsetEntry() {
 }
 function removeSrcsetEntry(i) {
   _srcsetEntries.splice(i, 1);
-  if (_imageEl) { _imageEl.setAttribute('srcset', buildSrcset(_srcsetEntries)); renderImageSection(_imageEl); markDirty(); }
+  if (_imageEl) {
+    _imageEl.setAttribute('srcset', buildSrcset(_srcsetEntries));
+    renderImageSection(_imageEl);
+    saveCurrentVariationHtml();
+    recomputeEditorDirty();
+  }
 }
 function addSizesEntry() {
   _sizesEntries.push({condition:'max-width: 760px', value:'760px'});
@@ -2626,7 +3072,12 @@ function addSizesEntry() {
 }
 function removeSizesEntry(i) {
   _sizesEntries.splice(i, 1);
-  if (_imageEl) { _imageEl.setAttribute('sizes', buildSizes(_sizesEntries)); renderImageSection(_imageEl); markDirty(); }
+  if (_imageEl) {
+    _imageEl.setAttribute('sizes', buildSizes(_sizesEntries));
+    renderImageSection(_imageEl);
+    saveCurrentVariationHtml();
+    recomputeEditorDirty();
+  }
 }
 
 // \u2500\u2500 Right panel rendering (accordion) \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
@@ -2831,20 +3282,51 @@ function renderRightPanel(el) {
       var orig = getOriginalValue(b[0], el);
       b[1](inp.value);
       logChange(sel, b[0], inp.value, el, orig);
-      markDirty();
     });
   });
 }
 
 // \u2500\u2500 Selector helper \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
+function generateVveInstanceId() {
+  return 'v' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
+}
+
+/** Editor-assigned clone marker so duplicated subtrees do not share the same CSS path as the original. */
+function stripDataVveInstanceSubtree(root) {
+  if (!root || root.nodeType !== 1) return;
+  try {
+    root.removeAttribute('data-vve-instance');
+  } catch(_) {}
+  var sub = root.querySelectorAll ? root.querySelectorAll('[data-vve-instance]') : [];
+  for (var i = 0; i < sub.length; i++) {
+    try {
+      sub[i].removeAttribute('data-vve-instance');
+    } catch(_) {}
+  }
+}
+
 function buildSelector(el) {
   if (!el) return '';
+  var doc = el.ownerDocument || document;
+  var inst = el.getAttribute && el.getAttribute('data-vve-instance');
+  if (inst && String(inst).trim()) {
+    var safe = String(inst).split('"').join('\\"');
+    var attrSel = '[data-vve-instance="' + safe + '"]';
+    try {
+      if (doc.querySelectorAll(attrSel).length === 1) return attrSel;
+    } catch(_) {}
+  }
   if (el.id) return '#' + el.id;
   var parts = [], node = el, depth = 0;
   while (node && node.nodeType === 1 && depth < 5) {
     if (node.id) { parts.unshift('#' + node.id); break; }
     var p = node.tagName.toLowerCase();
-    if (node.classList && node.classList.length) p += '.' + Array.from(node.classList).slice(0,2).join('.');
+    if (node.classList && node.classList.length) {
+      var clsArr = Array.from(node.classList).filter(function(c) {
+        return c.indexOf('vve-') !== 0;
+      });
+      if (clsArr.length) p += '.' + clsArr.slice(0, 2).join('.');
+    }
     var idx = 1, sib = node.previousElementSibling;
     while (sib) { if (sib.tagName === node.tagName) idx++; sib = sib.previousElementSibling; }
     if (idx > 1) p += ':nth-of-type(' + idx + ')';
@@ -2855,6 +3337,71 @@ function buildSelector(el) {
   return parts.join(' > ');
 }
 
+/**
+ * Strip editor-only .vve-* class tokens from a selector string (fixes DB rows saved while an element was selected).
+ */
+function sanitizeSelectorForMatch(sel) {
+  if (!sel || typeof sel !== 'string') return '';
+  var s0 = sel.replace(/.vve-[a-zA-Z0-9_-]+/gi, '');
+  var parts = s0.split(/s*>s*/).map(function(seg) {
+    var t = seg.replace(/.+/g, '.').replace(/.$/, '');
+    return t.trim();
+  });
+  return parts.filter(Boolean).join(' > ');
+}
+
+/** Drop the rightmost :nth-of-type(n) (hydration / layout often shifts sibling indices). */
+function stripRightmostNthOfType(sel) {
+  if (!sel || typeof sel !== 'string') return null;
+  var idx = sel.lastIndexOf(':nth-of-type(');
+  if (idx === -1) return null;
+  var j = idx + ':nth-of-type('.length;
+  while (j < sel.length && sel.charCodeAt(j) >= 48 && sel.charCodeAt(j) <= 57) j++;
+  if (j >= sel.length || sel.charAt(j) !== ')') return null;
+  return (sel.slice(0, idx) + sel.slice(j + 1))
+    .replace(/s{2,}/g, ' ')
+    .replace(/s*>s*>/g, ' >')
+    .trim();
+}
+
+function querySelectorResolved(iframeDoc, selector) {
+  if (!iframeDoc || !selector) return null;
+  var seen = {};
+  function tryOne(s) {
+    if (!s || seen[s]) return null;
+    seen[s] = true;
+    try {
+      return iframeDoc.querySelector(s) || null;
+    } catch(_) {
+      return null;
+    }
+  }
+  function walkRelax(base) {
+    if (!base) return null;
+    var el = tryOne(base);
+    if (el) return el;
+    var cur = base;
+    for (var g = 0; g < 28; g++) {
+      var nxt = stripRightmostNthOfType(cur);
+      if (!nxt || nxt === cur) break;
+      cur = nxt;
+      el = tryOne(cur);
+      if (el) return el;
+    }
+    return null;
+  }
+  var alt = sanitizeSelectorForMatch(selector);
+  // Prefer sanitized + nth relax FIRST: raw selectors often still contain .vve-* from
+  // save-time selection; those only match after clicking (we re-add vve-selected).
+  var el = walkRelax(alt || selector);
+  if (el) return el;
+  if (alt !== selector) {
+    el = walkRelax(selector);
+    if (el) return el;
+  }
+  return null;
+}
+
 // \u2500\u2500 Iframe interaction \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 repositionDragSibling(dragEl, clientY) {
   var p = dragEl.parentElement;
@@ -2880,6 +3427,27 @@ function repositionDragSibling(dragEl, clientY) {
   }
 }
 
+function recordReorderAfterDrag(movedEl) {
+  if (!activeVarId || !movedEl || !movedEl.parentElement) return;
+  var prev = movedEl.previousElementSibling;
+  var next = movedEl.nextElementSibling;
+  if (prev) {
+    appendSessionStructuralChainRow(activeVarId, {
+      selector: buildSelector(movedEl),
+      type: 'reorder',
+      targetSelector: buildSelector(prev),
+      action: 'after',
+    });
+  } else if (next) {
+    appendSessionStructuralChainRow(activeVarId, {
+      selector: buildSelector(movedEl),
+      type: 'reorder',
+      targetSelector: buildSelector(next),
+      action: 'before',
+    });
+  }
+}
+
 function attachDragReposition() {
   try {
     var iframe = document.getElementById('iframeId');
@@ -2933,7 +3501,9 @@ function attachDragReposition() {
           } catch(_) {}
           suppressClickUntil = Date.now() + 200;
           setDragHandleActive(false);
-          markDirty();
+          if (activeVarId) recordReorderAfterDrag(selectedEl);
+          saveCurrentVariationHtml();
+          recomputeEditorDirty();
           updateSelectionToolbar();
           scheduleDomTreeRefresh();
         }
@@ -2987,8 +3557,7 @@ function attachChangeObserver() {
       changeObserverDoc = null;
     }
     changeObserver = new MutationObserver(function() {
-      markDirty();
-      // Debounced full rebuild of Elements panel as the live DOM grows / changes
+      // Dirty state is derived from changesets baseline + stateChanges (not raw DOM mutations).
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
     });
@@ -3024,6 +3593,7 @@ function syncIframeInteractions(reason) {
     var inp = document.getElementById('comp-search');
     renderDomTree(inp ? inp.value : '');
     updateSelectionToolbar();
+    recomputeEditorDirty();
   } catch(_) {}
 }
 
@@ -3075,8 +3645,11 @@ function insertHtml(html) {
       console.warn('[V2] insertHtml: iframe document not ready');
       return;
     }
+    var htmlStr = String(html).trim();
+    var anchorSel =
+      selectedEl && selectedEl !== doc.body && selectedEl.parentNode ? buildSelector(selectedEl) : 'body';
     var t = doc.createElement('template');
-    t.innerHTML = String(html).trim();
+    t.innerHTML = htmlStr;
     var frag = doc.createDocumentFragment();
     var firstEl = null;
     while (t.content.firstChild) {
@@ -3092,7 +3665,16 @@ function insertHtml(html) {
       doc.body.appendChild(frag);
     }
     if (firstEl) selectElement(firstEl);
-    markDirty();
+    if (activeVarId) {
+      appendSessionStructuralChainRow(activeVarId, {
+        selector: anchorSel,
+        type: 'insert',
+        action: 'after',
+        html: htmlStr,
+      });
+    }
+    saveCurrentVariationHtml();
+    recomputeEditorDirty();
     scheduleDomTreeRefresh();
   } catch(err) { console.warn('[V2] insertHtml:', err); }
 }
@@ -3184,15 +3766,37 @@ document.getElementById('btn-close').addEventListener('click', handleClose);
 function handleSave() {
   saveCurrentVariationHtml();
   var updatedVariations = variations.map(function(v) {
-    var saved = varHtmlCache[v._id];
-    if (!saved) return Object.assign({}, v);
-    return Object.assign({}, v, { changesets: JSON.stringify([{ selector: '__vvveb_body__', html: saved, mutations: [] }]) });
+    var prevParsed = parseVariationChangesets(v);
+    var granularPrev = filterGranularChangesetEntries(prevParsed);
+    var bodyOnlyLegacy = changesetsHaveBodySnapshot(prevParsed) && granularPrev.length === 0;
+
+    var rows = buildPersistedChainSetsForVariation(v);
+    if (bodyOnlyLegacy && rows.length === 0) {
+      return Object.assign({}, v);
+    }
+    var json = '[]';
+    try {
+      json = JSON.stringify(rows || []);
+    } catch(_) {
+      json = '[]';
+    }
+    return Object.assign({}, v, { changesets: json });
   });
+  variations = updatedVariations;
+  varHtmlCache = {};
+  sessionStructuralChainRowsByVarId = {};
+  stateChanges = [];
+  if (currentMainTab === 'states') renderStatesTab();
+  captureBaselineFromVariations(variations);
+  if (experimentData && Array.isArray(experimentData.variations)) {
+    experimentData.variations = updatedVariations;
+  }
   send('save-experiment', { experimentId: experimentData ? experimentData.experimentId : null, variations: updatedVariations });
-  markClean();
+  setEditorDirty(false);
 }
 
 function handleClose() {
+  clearVisualEditorLocalStorage();
   // Unsaved-changes UX lives in the parent (PlatformVisualEditorV2); avoid double confirm here.
   send('close-editor', {});
 }
@@ -3200,8 +3804,22 @@ function handleClose() {
 // \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
 document.addEventListener('keydown', function(e) {
   var meta = e.metaKey || e.ctrlKey;
-  if (meta && !e.shiftKey && e.key === 'z') { e.preventDefault(); if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.undo(); }
-  if (meta &&  e.shiftKey && e.key === 'z') { e.preventDefault(); if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.redo(); }
+  if (meta && !e.shiftKey && e.key === 'z') {
+    e.preventDefault();
+    if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
+      Vvveb.Undo.undo();
+      saveCurrentVariationHtml();
+      recomputeEditorDirty();
+    }
+  }
+  if (meta && e.shiftKey && e.key === 'z') {
+    e.preventDefault();
+    if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
+      Vvveb.Undo.redo();
+      saveCurrentVariationHtml();
+      recomputeEditorDirty();
+    }
+  }
   if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
   if (e.key === 'Escape') {
     var openTips = document.querySelectorAll('.ve-pl-tip.is-tip-open');