@accelerated-agency/visual-editor 0.2.8 → 0.2.9

package/dist/vite.cjs

@@ -999,6 +999,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 +1028,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 +1044,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 +1106,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;
 }
@@ -1328,6 +1389,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 +1496,7 @@ function removeStateChange(idx) {
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1444,6 +1507,7 @@ function clearAllStates() {
     syncDesignInput(c);
   });
   stateChanges = [];
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1818,7 +1882,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 +1907,8 @@ function handleLoadExperiment(data) {
   if (!experimentData || prevKey !== nextKey) {
     varHtmlCache = {};
     sessionStructuralChainRowsByVarId = {};
+    stateChangesByVarId = {};
+    stateChanges = [];
     appliedChangesetSnapshots = {};
     appliedStructuralChangesetKeys = {};
   }
@@ -1848,6 +1916,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();
 
@@ -2171,8 +2240,10 @@ function renderVariationTabs() {
 function switchVariation(varId) {
   if (varId === activeVarId) return;
   saveCurrentVariationHtml();
+  commitStateChangesForActiveVariation();
   clearPendingGranularChangesets();
   activeVarId = varId;
+  loadStateChangesForActiveVariation();
   writePersistedActiveVariationId(varId);
   renderVariationTabs();
   deselectElement();
@@ -2208,6 +2279,7 @@ function switchVariation(varId) {
     }
   } catch(_) {}
   if (currentMainTab === 'history') renderHistoryTab();
+  if (currentMainTab === 'states') renderStatesTab();
   recomputeEditorDirty();
 }
 
@@ -2564,12 +2636,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 +2766,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
@@ -3967,6 +4047,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 +4068,7 @@ function handleSave() {
   variations = updatedVariations;
   varHtmlCache = {};
   sessionStructuralChainRowsByVarId = {};
+  stateChangesByVarId = {};
   stateChanges = [];
   if (currentMainTab === 'states') renderStatesTab();
   captureBaselineFromVariations(variations);

package/dist/vite.js

@@ -991,6 +991,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 +1020,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 +1036,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 +1098,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;
 }
@@ -1320,6 +1381,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 +1488,7 @@ function removeStateChange(idx) {
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1436,6 +1499,7 @@ function clearAllStates() {
     syncDesignInput(c);
   });
   stateChanges = [];
+  commitStateChangesForActiveVariation();
   renderStatesTab();
   recomputeEditorDirty();
 }
@@ -1810,7 +1874,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 +1899,8 @@ function handleLoadExperiment(data) {
   if (!experimentData || prevKey !== nextKey) {
     varHtmlCache = {};
     sessionStructuralChainRowsByVarId = {};
+    stateChangesByVarId = {};
+    stateChanges = [];
     appliedChangesetSnapshots = {};
     appliedStructuralChangesetKeys = {};
   }
@@ -1840,6 +1908,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();
 
@@ -2163,8 +2232,10 @@ function renderVariationTabs() {
 function switchVariation(varId) {
   if (varId === activeVarId) return;
   saveCurrentVariationHtml();
+  commitStateChangesForActiveVariation();
   clearPendingGranularChangesets();
   activeVarId = varId;
+  loadStateChangesForActiveVariation();
   writePersistedActiveVariationId(varId);
   renderVariationTabs();
   deselectElement();
@@ -2200,6 +2271,7 @@ function switchVariation(varId) {
     }
   } catch(_) {}
   if (currentMainTab === 'history') renderHistoryTab();
+  if (currentMainTab === 'states') renderStatesTab();
   recomputeEditorDirty();
 }
 
@@ -2556,12 +2628,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 +2758,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
@@ -3959,6 +4039,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 +4060,7 @@ function handleSave() {
   variations = updatedVariations;
   varHtmlCache = {};
   sessionStructuralChainRowsByVarId = {};
+  stateChangesByVarId = {};
   stateChanges = [];
   if (currentMainTab === 'states') renderStatesTab();
   captureBaselineFromVariations(variations);

package/package.json

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