@accelerated-agency/visual-editor 0.3.0 → 0.3.2

package/dist/vite.js

@@ -140,6 +140,17 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .tb-save-txt{font-size:14px;color:#00C951;white-space:nowrap}
 .tb-save-txt::before{content:'Saved'}
 #dirty-dot.on~.tb-save-txt::before{content:'Unsaved'}
+
+/* \u2500\u2500 In-editor toast notification \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#ve-notification{
+  position:fixed;right:16px;top:64px;z-index:13000;max-width:360px;
+  padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.35;
+  border:1px solid var(--border);background:#fff;color:var(--text);
+  box-shadow:0 10px 24px rgba(2,6,23,.18);display:none
+}
+#ve-notification.show{display:block}
+#ve-notification.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}
+#ve-notification.success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
 .tb-save-time{font-size:12px;color:#52525b;white-space:nowrap}
 #dirty-dot.on~.tb-save-time{display:none}
 /* Simulate + Finalize buttons */
@@ -447,6 +458,49 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 /* \u2500\u2500 Subgroup label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .sub-lbl{font-size:10px;text-transform:uppercase;color:var(--text-3);font-weight:700;letter-spacing:.05em;margin:8px 0 5px}
 .sub-lbl:first-child{margin-top:0}
+.sub-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 5px}
+.sub-lbl-row .sub-lbl{margin:0}
+.css-expand-btn{
+  width:22px;height:22px;border:1px solid var(--border);border-radius:5px;background:#fff;
+  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);
+  transition:all .15s
+}
+.css-expand-btn:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
+
+/* \u2500\u2500 Custom CSS modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#custom-css-modal{
+  position:fixed;inset:0;z-index:12000;background:rgba(15,23,42,.5);
+  display:none;align-items:center;justify-content:center;padding:20px
+}
+#custom-css-modal.open{display:flex}
+.custom-css-dialog{
+  width:min(860px,96vw);max-height:86vh;background:#fff;border:1px solid var(--border);
+  border-radius:10px;box-shadow:0 20px 40px rgba(2,6,23,.35);display:flex;flex-direction:column;overflow:hidden
+}
+.custom-css-head{
+  display:flex;align-items:center;justify-content:space-between;gap:10px;
+  padding:10px 12px;border-bottom:1px solid var(--border);background:#fff
+}
+.custom-css-title{font-size:12px;font-weight:700;color:var(--text)}
+.custom-css-close{
+  border:none;background:transparent;color:var(--text-3);cursor:pointer;width:24px;height:24px;border-radius:5px
+}
+.custom-css-close:hover{background:var(--bg-hover);color:var(--text)}
+#custom-css-modal-textarea{
+  width:100%;min-height:360px;max-height:58vh;resize:vertical;border:none;outline:none;
+  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  font-size:12px;line-height:1.5;padding:12px;background:#0b1220;color:#e2e8f0
+}
+.custom-css-actions{
+  display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:#fff
+}
+.custom-css-btn{
+  border:1px solid var(--border);background:#fff;color:var(--text-2);border-radius:6px;padding:6px 10px;cursor:pointer;
+  font-size:12px;font-weight:600;font-family:inherit
+}
+.custom-css-btn:hover{background:var(--bg-hover)}
+.custom-css-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+.custom-css-btn.primary:hover{filter:brightness(.97)}
 
 /* \u2500\u2500 Shadow presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .shadow-presets{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
@@ -836,6 +890,23 @@ select.pr-inp{cursor:pointer;background:#fff}
 
 </div><!-- #app -->
 
+<!-- Custom CSS full-screen modal -->
+<div id="custom-css-modal" aria-hidden="true">
+  <div class="custom-css-dialog" role="dialog" aria-modal="true" aria-labelledby="custom-css-modal-title">
+    <div class="custom-css-head">
+      <div class="custom-css-title" id="custom-css-modal-title"><i class="bi bi-code-slash"></i> Custom CSS</div>
+      <button type="button" class="custom-css-close" onclick="closeCustomCssModal()" title="Close">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    </div>
+    <textarea id="custom-css-modal-textarea" spellcheck="false" placeholder="Type your css here"></textarea>
+    <div class="custom-css-actions">
+      <button type="button" class="custom-css-btn" onclick="closeCustomCssModal()">Cancel</button>
+      <button type="button" class="custom-css-btn primary" onclick="applyCustomCssModal()">Add</button>
+    </div>
+  </div>
+</div>
+
 <!-- CDN scripts -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/builder.js"></script>
@@ -907,13 +978,37 @@ function send(type, payload) {
   window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
 }
 
+var notificationTimer = null;
+function showEditorNotification(message, kind, durationMs) {
+  var id = 've-notification';
+  var el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement('div');
+    el.id = id;
+    el.setAttribute('role', 'status');
+    el.setAttribute('aria-live', 'polite');
+    document.body.appendChild(el);
+  }
+  el.className = '';
+  el.classList.add(kind === 'success' ? 'success' : 'error');
+  el.classList.add('show');
+  el.textContent = String(message || 'Something went wrong');
+  if (notificationTimer) clearTimeout(notificationTimer);
+  notificationTimer = setTimeout(function() {
+    var cur = document.getElementById(id);
+    if (!cur) return;
+    cur.classList.remove('show');
+  }, Math.max(1200, durationMs || 2600));
+}
+
 function generatePreviewUrlString(args) {
   var baseUrl = (args && args.url) || '';
   var test = (args && args.test) || {};
   var variation = (args && args.variation) || {};
   if (!baseUrl) return '';
-  var testId = test.iid || test.experimentId || test._id || '';
-  var variationId = variation.iid || variation._id || '';
+  var testId = test.iid || '';
+  var variationId = variation.iid || '';
+  if (!testId || !variationId) return '';
   var cId = String(testId || '') + '_' + String(variationId || '');
   var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
   return (
@@ -937,6 +1032,10 @@ function simulateExperiment() {
     test.pageUrl ||
     (test.metadata_1 && test.metadata_1.editor_url) ||
     '';
+  if (!test.iid || !activeVariation || !activeVariation.iid) {
+    showEditorNotification('Cannot simulate: missing test.iid or variation.iid.', 'error', 3200);
+    return;
+  }
   var url = generatePreviewUrlString({
     url: targetUrl,
     test: test,
@@ -944,6 +1043,7 @@ function simulateExperiment() {
   });
   if (!url) {
     console.warn('[V2] simulateExperiment: missing target URL');
+    showEditorNotification('Cannot simulate: missing target URL.', 'error', 3200);
     return;
   }
   try {
@@ -961,6 +1061,19 @@ window.addEventListener('message', function(e) {
   }
 });
 
+document.addEventListener('keydown', function(e) {
+  if (e.key !== 'Escape') return;
+  var modal = document.getElementById('custom-css-modal');
+  if (!modal || !modal.classList.contains('open')) return;
+  closeCustomCssModal();
+});
+
+document.addEventListener('click', function(e) {
+  var modal = document.getElementById('custom-css-modal');
+  if (!modal || !modal.classList.contains('open')) return;
+  if (e.target === modal) closeCustomCssModal();
+});
+
 // \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 experimentData  = null;
 var variations      = [];
@@ -1040,14 +1153,17 @@ function endSuppressIframeMutationDirty() {
 function commitStateChangesForActiveVariation() {
   if (!activeVarId) return;
   stateChangesByVarId[activeVarId] = (stateChanges || []).slice();
+  refreshPersistentChangesetStyleTagForActiveVariation();
 }
 
 function loadStateChangesForActiveVariation() {
   if (!activeVarId) {
     stateChanges = [];
+    refreshPersistentChangesetStyleTagForActiveVariation();
     return;
   }
   stateChanges = (stateChangesByVarId[activeVarId] || []).slice();
+  refreshPersistentChangesetStyleTagForActiveVariation();
 }
 
 function recoverSelectedElement(forceDeselectOnMiss) {
@@ -1527,24 +1643,26 @@ function persistActiveVariationChangesets(arr) {
       }
     }
   }
+  refreshPersistentChangesetStyleTagForActiveVariation();
 }
 
 function entrySnapshotKey(entry) {
   if (!entry || !entry.selector) return '';
+  var SEP = '__vve_sep__';
   var selKey = sanitizeSelectorForMatch(entry.selector) || entry.selector;
   return (
     selKey +
-    '\0' +
+    SEP +
     normalizeChangesetType(entry) +
-    '\0' +
+    SEP +
     String(entry.property || '') +
-    '\0' +
+    SEP +
     String(entry.attribute || '') +
-    '\0' +
+    SEP +
     String(entry.action || '') +
-    '\0' +
+    SEP +
     String(entry.html != null ? 'h' + String(entry.html).length : '') +
-    '\0' +
+    SEP +
     String(entry.value != null ? 'v:' + entry.value : '')
   );
 }
@@ -1594,7 +1712,6 @@ function softReloadEditorIframe() {
   var navGen = nextIframeContentNavGen();
   resetIframeBindings();
   setIframePageLoadingUi(true);
-  iframe.src = '';
   iframe.src = appendIframeReloadBust(src);
   startIframeContentApplyWatcher(navGen);
   scheduleDomTreeRefresh();
@@ -1603,6 +1720,7 @@ function softReloadEditorIframe() {
 /** @returns {boolean} true if a full iframe reload was started */
 function revertChangesetEntryOnDom(entry) {
   if (!entry) return false;
+  var styleOnly = isStyleOnlyChangesetEntry(entry);
   if (entry.selector === '__vvveb_body__') {
     var iframeDoc0 = document.getElementById('iframeId').contentDocument;
     if (!iframeDoc0 || !iframeDoc0.body) return false;
@@ -1623,6 +1741,11 @@ function revertChangesetEntryOnDom(entry) {
   var snap = appliedChangesetSnapshots[k];
   var el = querySelectorResolved(iframeDoc, entry.selector);
   if (!snap || !el) {
+    if (styleOnly) {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      delete appliedChangesetSnapshots[k];
+      return false;
+    }
     softReloadEditorIframe();
     delete appliedChangesetSnapshots[k];
     return true;
@@ -1637,6 +1760,11 @@ function revertChangesetEntryOnDom(entry) {
     else el.setAttribute(snap.name, snap.v);
   } else if (snap.kind === 'display') el.style.display = snap.v;
   else {
+    if (styleOnly) {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      delete appliedChangesetSnapshots[k];
+      return false;
+    }
     softReloadEditorIframe();
     delete appliedChangesetSnapshots[k];
     return true;
@@ -1696,7 +1824,9 @@ function renderHistoryTab() {
       var lab = historyEntryTypeLabel(item.entry);
       var val = historyEntryValuePreview(item.entry);
       html +=
-        '<div class="state-item">' +
+        '<div class="state-item" role="button" tabindex="0" title="Jump to element in iframe" onclick="focusHistoryChangeset(' +
+        item.idx +
+        ')">' +
         '<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>' +
@@ -1712,7 +1842,7 @@ function renderHistoryTab() {
         item.idx +
         ')" onclick="removeHistoryChangeset(' +
         item.idx +
-        ')">&#x2715;</button>' +
+        ', event)">&#x2715;</button>' +
         '</div>';
     });
     html += '</div>';
@@ -1730,7 +1860,38 @@ function changesetListHasStructural(arr) {
   return false;
 }
 
-function removeHistoryChangeset(idx) {
+function isStyleOnlyChangesetEntry(entry) {
+  if (!entry) return false;
+  var t = normalizeChangesetType(entry);
+  if (t === 'style') return true;
+  if (t === 'attribute' && String(entry.attribute || '').toLowerCase() === 'style') return true;
+  return false;
+}
+
+function focusHistoryChangeset(idx) {
+  var v = getActiveVariationForHistory();
+  if (!v) return;
+  var arr = parseVariationChangesets(v);
+  if (idx < 0 || idx >= arr.length) return;
+  var entry = arr[idx];
+  if (!entry || !entry.selector || entry.selector === '__vvveb_body__') return;
+  try {
+    var iframe = document.getElementById('iframeId');
+    var iframeDoc = iframe && iframe.contentDocument;
+    if (!iframeDoc) return;
+    var el = querySelectorResolved(iframeDoc, entry.selector);
+    if (!el) return;
+    selectElement(el);
+    try {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+    } catch(_) {
+      el.scrollIntoView();
+    }
+  } catch(_) {}
+}
+
+function removeHistoryChangeset(idx, evt) {
+  if (evt && evt.stopPropagation) evt.stopPropagation();
   var v = getActiveVariationForHistory();
   if (!v) return;
   var arr = parseVariationChangesets(v);
@@ -1738,6 +1899,16 @@ function removeHistoryChangeset(idx) {
   var removed = arr[idx];
   arr.splice(idx, 1);
   persistActiveVariationChangesets(arr);
+  if (isStyleOnlyChangesetEntry(removed)) {
+    try {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      saveCurrentVariationHtml();
+    } catch(_) {}
+    if (currentMainTab === 'history') renderHistoryTab();
+    recomputeEditorDirty();
+    scheduleDomTreeRefresh();
+    return;
+  }
   var didReload = revertChangesetEntryOnDom(removed);
   try {
     delete varHtmlCache[activeVarId];
@@ -1745,15 +1916,19 @@ function removeHistoryChangeset(idx) {
   // 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));
+  var hasStructuralRemaining = changesetListHasStructural(arr);
+  var removedIsStructural = removedType === 'insert' || removedType === 'reorder';
   if (didReload) {
     /* revertChangesetEntryOnDom already kicked off iframe reload */
-  } else if (needsStructuralReload) {
+  } else if (removedIsStructural) {
     softReloadEditorIframe();
+  } else if (hasStructuralRemaining) {
+    // Keep current DOM state (already reverted for removed row) and only refresh style layer.
+    // Avoid full reload and avoid re-applying all rows, which can duplicate structural insert/reorder entries.
+    try {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      saveCurrentVariationHtml();
+    } catch(_) {}
   } else {
     try {
       appliedStructuralChangesetKeys = {};
@@ -2121,7 +2296,7 @@ function runConsistencyReconcile() {
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   var granular = filterGranularChangesetEntries(cs);
   var unresolved = countUnresolvedGranularSelectors(doc, granular);
-  if (unresolved > 0 || changesetListHasStructural(cs)) {
+  if (unresolved > 0 || hasUnappliedStructuralChangesets(cs)) {
     reapplyActiveVariationGranular(doc);
     registerPendingGranularChangesets(cs, doc);
   }
@@ -2491,24 +2666,136 @@ function flushPendingGranularChangesets() {
 function structuralChangesetDedupKey(entry) {
   var nt = normalizeChangesetType(entry);
   if (!entry || (nt !== 'insert' && nt !== 'reorder')) return '';
+  var SEP = '__vve_sep__';
   var vid = activeVarId || '';
   try {
     return (
       vid +
-      '\0' +
+      SEP +
       nt +
-      '\0' +
+      SEP +
       entry.selector +
-      '\0' +
+      SEP +
       String(entry.action || '') +
-      '\0' +
+      SEP +
       String(entry.html != null ? entry.html : '').slice(0, 240) +
-      '\0' +
+      SEP +
       String(entry.targetSelector || '')
     );
   } catch(_) {
-    return vid + '\0' + nt + '\0' + entry.selector;
+    return vid + SEP + nt + SEP + entry.selector;
+  }
+}
+
+function hasUnappliedStructuralChangesets(cs) {
+  if (!cs || !cs.length) return false;
+  for (var i = 0; i < cs.length; i++) {
+    var e = cs[i];
+    var t = normalizeChangesetType(e);
+    if (t !== 'insert' && t !== 'reorder') continue;
+    var k = structuralChangesetDedupKey(e);
+    if (!k) return true;
+    if (!appliedStructuralChangesetKeys[k]) return true;
   }
+  return false;
+}
+
+function parseInlineStyleDeclarations(styleText) {
+  var out = [];
+  if (styleText == null) return out;
+  var s = String(styleText);
+  if (!s.trim()) return out;
+  var parts = s.split(';');
+  for (var i = 0; i < parts.length; i++) {
+    var seg = parts[i];
+    if (!seg) continue;
+    var idx = seg.indexOf(':');
+    if (idx <= 0) continue;
+    var prop = seg.slice(0, idx).trim();
+    var value = seg.slice(idx + 1).trim();
+    if (!prop || !value) continue;
+    out.push({ prop: prop, value: value });
+  }
+  return out;
+}
+
+function buildPersistentStyleRulesForActiveVariation() {
+  if (!activeVarId) return '';
+  var v = variations.find(function(x) { return x && x._id === activeVarId; });
+  var parsed = parseVariationChangesets(v);
+  var map = {};
+  var order = [];
+  function put(selector, prop, value) {
+    if (!selector || !prop) return;
+    if (value == null || value === '') return;
+    var sel = sanitizeSelectorForMatch(String(selector)) || String(selector);
+    var pr = String(prop).trim();
+    var val = String(value).trim();
+    if (!sel || !pr || !val) return;
+    var k = sel + '__vve_sep__' + pr;
+    if (!map[k]) order.push(k);
+    map[k] = { selector: sel, property: pr, value: val };
+  }
+  for (var i = 0; i < parsed.length; i++) {
+    var e = parsed[i];
+    if (!e) continue;
+    var t = normalizeChangesetType(e);
+    if (t === 'style') {
+      put(e.selector, e.property || e.cssProp, e.value);
+      continue;
+    }
+    if (t === 'attribute' && String(e.attribute || '').toLowerCase() === 'style') {
+      var decls = parseInlineStyleDeclarations(e.value);
+      for (var di = 0; di < decls.length; di++) {
+        put(e.selector, decls[di].prop, decls[di].value);
+      }
+    }
+  }
+  for (var j = 0; j < stateChanges.length; j++) {
+    var c = stateChanges[j];
+    if (!c) continue;
+    if (c.cssProp) {
+      put(c.selector, c.cssProp, c.value);
+      continue;
+    }
+    if (c.inputId === 'pp-css') {
+      var liveDecls = parseInlineStyleDeclarations(c.value);
+      for (var ldi = 0; ldi < liveDecls.length; ldi++) {
+        put(c.selector, liveDecls[ldi].prop, liveDecls[ldi].value);
+      }
+    }
+  }
+  var lines = [];
+  for (var oi = 0; oi < order.length; oi++) {
+    var row = map[order[oi]];
+    lines.push(row.selector + ' { ' + row.property + ': ' + row.value + ' !important; }');
+  }
+  return lines.join('\\n');
+}
+
+function upsertPersistentChangesetStyleTag(iframeDoc, rulesText) {
+  if (!iframeDoc) return;
+  var STYLE_ID = '__vve_persist_changesets_style__';
+  var prev = iframeDoc.getElementById(STYLE_ID);
+  if (!rulesText) {
+    if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
+    return;
+  }
+  var head = iframeDoc.head || iframeDoc.getElementsByTagName('head')[0];
+  if (!head) return;
+  var styleEl = prev || iframeDoc.createElement('style');
+  styleEl.id = STYLE_ID;
+  if (styleEl.textContent !== rulesText) styleEl.textContent = rulesText;
+  if (!styleEl.parentNode) head.appendChild(styleEl);
+}
+
+function refreshPersistentChangesetStyleTagForActiveVariation() {
+  try {
+    var iframe = document.getElementById('iframeId');
+    var iframeDoc = iframe && iframe.contentDocument;
+    if (!iframeDoc) return;
+    upsertPersistentChangesetStyleTag(iframeDoc, buildPersistentStyleRulesForActiveVariation());
+  } catch(_) {}
 }
 
 /**
@@ -2545,23 +2832,11 @@ function applyChangesetEntry(entry, iframeDoc) {
       else if (entry.value != null) el.textContent = entry.value;
       break;
     case 'style':
-      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;
-          }
-        }
-      }
+      // Style changes are applied via persistent stylesheet injection.
       break;
     case 'attribute':
       if (entry.attribute && entry.value != null) {
+        if (String(entry.attribute).toLowerCase() === 'style') break;
         el.setAttribute(entry.attribute, entry.value);
       }
       break;
@@ -2598,6 +2873,7 @@ function applyActiveVariationHtml() {
 
   var variation = variations.find(function(v) { return v._id === activeVarId; });
   var cs = parseVariationChangesets(variation);
+  refreshPersistentChangesetStyleTagForActiveVariation();
 
   beginSuppressIframeMutationDirty();
   try {
@@ -2612,6 +2888,7 @@ function applyActiveVariationHtml() {
     for (var i = 0; i < cs.length; i++) {
       applyChangesetEntry(cs[i], iframeDoc);
     }
+    refreshPersistentChangesetStyleTagForActiveVariation();
     // Selectors often miss on first paint (client-rendered sections). Retry via timer + mutations.
     registerPendingGranularChangesets(cs, iframeDoc);
   } finally {
@@ -2660,6 +2937,7 @@ function applyVariationGranularOnly(iframeDoc) {
     for (var i = 0; i < cs.length; i++) {
       applyChangesetEntry(cs[i], iframeDoc);
     }
+    refreshPersistentChangesetStyleTagForActiveVariation();
     registerPendingGranularChangesets(cs, iframeDoc);
   } finally {
     endSuppressIframeMutationDirty();
@@ -2678,6 +2956,7 @@ function reapplyActiveVariationGranular(iframeDoc) {
     for (var i = 0; i < cs.length; i++) {
       applyChangesetEntry(cs[i], iframeDoc);
     }
+    refreshPersistentChangesetStyleTagForActiveVariation();
   } finally {
     endSuppressIframeMutationDirty();
   }
@@ -3166,6 +3445,40 @@ function pr2(l1, i1, l2, i2) {
          '<div class="pr2-item"><div class="pr2-lbl">'+l2+'</div>'+i2+'</div></div>';
 }
 function subLbl(text) { return '<div class="sub-lbl">'+text+'</div>'; }
+function openCustomCssModal() {
+  var modal = document.getElementById('custom-css-modal');
+  var ta = document.getElementById('custom-css-modal-textarea');
+  if (!modal || !ta) return;
+  var inp = document.getElementById('pp-css');
+  var v = inp ? inp.value : (selectedEl && selectedEl.getAttribute ? (selectedEl.getAttribute('style') || '') : '');
+  ta.value = v || '';
+  modal.classList.add('open');
+  modal.setAttribute('aria-hidden', 'false');
+  setTimeout(function() {
+    try { ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length); } catch(_) {}
+  }, 0);
+}
+function closeCustomCssModal() {
+  var modal = document.getElementById('custom-css-modal');
+  if (!modal) return;
+  modal.classList.remove('open');
+  modal.setAttribute('aria-hidden', 'true');
+}
+function applyCustomCssModal() {
+  var ta = document.getElementById('custom-css-modal-textarea');
+  var inp = document.getElementById('pp-css');
+  if (!ta || !inp) {
+    closeCustomCssModal();
+    return;
+  }
+  inp.value = ta.value || '';
+  try {
+    inp.dispatchEvent(new Event('input', { bubbles: true }));
+  } catch(_) {
+    if (typeof inp.oninput === 'function') inp.oninput();
+  }
+  closeCustomCssModal();
+}
 function weightOpts(cur) {
   return [['100','Thin'],['200','Extra Light'],['300','Light'],['400','Normal'],['500','Medium'],
           ['600','Semi Bold'],['700','Bold'],['800','Extra Bold'],['900','Black']]
@@ -3446,7 +3759,12 @@ function renderRightPanel(el) {
   // \u2500\u2500 CSS and Classes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   document.getElementById('acc-body-css').innerHTML =
     pr('Classes', '<input class="pr-inp" id="pp-cls" type="text" value="'+esc(el.className||'')+'" placeholder="class1 class2">') +
-    subLbl('Custom CSS') +
+    '<div class="sub-lbl-row">' +
+      '<div class="sub-lbl">Custom CSS</div>' +
+      '<button type="button" class="css-expand-btn" title="Open full-screen editor" onclick="openCustomCssModal()">' +
+        '<i class="bi bi-fullscreen"></i>' +
+      '</button>' +
+    '</div>' +
     '<textarea class="pr-inp" id="pp-css" style="width:100%;min-height:80px;font-family:monospace;font-size:11px" placeholder="color: red; font-size: 16px;">'+esc(el.getAttribute('style')||'')+'</textarea>';
 
   // \u2500\u2500 Attributes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -3810,26 +4128,6 @@ function attachChangeObserver() {
     }
     changeObserver = new MutationObserver(function(mutations) {
       // Dirty state is derived from changesets baseline + stateChanges (not raw DOM mutations).
-      var bodyReplaced = false;
-      for (var mi = 0; mi < mutations.length; mi++) {
-        var m = mutations[mi];
-        if (
-          m &&
-          m.type === 'childList' &&
-          m.target === doc.body &&
-          m.addedNodes &&
-          m.removedNodes &&
-          m.addedNodes.length > 0 &&
-          m.removedNodes.length > 0
-        ) {
-          bodyReplaced = true;
-          break;
-        }
-      }
-      if (bodyReplaced) {
-        // Page JS replaced body children; allow structural rows (insert/reorder) to apply again.
-        appliedStructuralChangesetKeys = {};
-      }
       // Host scripts can replace selected nodes every few frames (e.g. A/B tool observers).
       // Keep selection sticky by re-resolving from fingerprint.
       recoverSelectedElement(false);
@@ -3863,6 +4161,7 @@ function syncIframeInteractions(reason) {
     }
     showNoUrl(false);
     injectIframeSelectionStyles(doc);
+    refreshPersistentChangesetStyleTagForActiveVariation();
     attachClickHandler();
     attachDragReposition();
     attachChangeObserver();
@@ -4686,6 +4985,101 @@ if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.ser
         } else {
           html = runtimeProxyScript + html;
         }
+        const aiBridgeRuntimeScript = `<script>(function(){try{
+var AI_CHANNEL="ve-ai-editor";
+var lastJs="";
+var aiSheet=null;
+var lastAiContainerIds=[];
+function extractAiContainerIds(source){
+  try{
+    var re=/ai-generated-container-[a-zA-Z0-9_-]+/g;
+    var found=String(source||"").match(re)||[];
+    var uniq=[];
+    for(var i=0;i<found.length;i++){
+      if(uniq.indexOf(found[i])===-1) uniq.push(found[i]);
+    }
+    return uniq;
+  }catch(_){
+    return [];
+  }
+}
+function cleanupRemovedAiContainers(nextIds){
+  try{
+    for(var i=0;i<lastAiContainerIds.length;i++){
+      var prevId=lastAiContainerIds[i];
+      if(nextIds.indexOf(prevId)!==-1) continue;
+      var el=document.getElementById(prevId);
+      if(!el) continue;
+      var marker=(el.getAttribute("data-ai-generated")||"").toLowerCase();
+      if(marker==="true"||prevId.indexOf("ai-generated-container-")===0){
+        if(el.parentNode) el.parentNode.removeChild(el);
+      }
+    }
+  }catch(_){}
+}
+function getProxyPayload(){
+  try{
+    var u=new URL(window.location.href);
+    return {
+      url:u.searchParams.get("url")||undefined,
+      password:u.searchParams.get("password")||undefined
+    };
+  }catch(_){
+    return {};
+  }
+}
+function applyAiCode(payload){
+  try{
+    var p=payload||{};
+    var css=typeof p.cssCode==="string"?p.cssCode:"";
+    var js=typeof p.jsCode==="string"?p.jsCode:"";
+    var doc=document;
+    if(typeof CSSStyleSheet!=="undefined"&&"adoptedStyleSheets" in doc){
+      var sheets=doc.adoptedStyleSheets||[];
+      if(css){
+        if(!aiSheet) aiSheet=new CSSStyleSheet();
+        aiSheet.replaceSync(css);
+        if(sheets.indexOf(aiSheet)===-1){
+          doc.adoptedStyleSheets=sheets.concat(aiSheet);
+        }
+      }else if(aiSheet&&sheets.indexOf(aiSheet)!==-1){
+        doc.adoptedStyleSheets=sheets.filter(function(s){return s!==aiSheet;});
+      }
+    }
+    if(js!==lastJs){
+      var nextIds=extractAiContainerIds(js);
+      cleanupRemovedAiContainers(nextIds);
+      if(js) (new Function(js)).call(window);
+      lastJs=js;
+      lastAiContainerIds=nextIds;
+    }
+    try{
+      doc.documentElement.setAttribute("data-ve-ai-applied","1");
+      window.parent&&window.parent.postMessage({
+        channel:AI_CHANNEL,
+        type:"ai-code-applied",
+        payload:{cssLen:css.length,jsLen:js.length}
+      },"*");
+    }catch(_){}
+  }catch(_){}
+}
+window.addEventListener("message",function(ev){
+  try{
+    var d=ev&&ev.data;
+    if(!d||d.channel!==AI_CHANNEL||d.type!=="apply-ai-code") return;
+    applyAiCode(d.payload||{});
+  }catch(_){}
+});
+try{
+  if(window.parent){
+    window.parent.postMessage({channel:AI_CHANNEL,type:"ai-code-ready"},"*");
+    window.parent.postMessage({channel:AI_CHANNEL,type:"ai-url-changed",payload:getProxyPayload()},"*");
+  }
+}catch(_){}
+}catch(_){}})();</script>`;
+        html = html.includes("</head>") ? html.replace("</head>", `${aiBridgeRuntimeScript}
+</head>`) : `${aiBridgeRuntimeScript}
+${html}`;
         const bridgeScript = `<script src="/bridge.js"></script>`;
         html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
 </body>`) : html + bridgeScript;