@accelerated-agency/visual-editor 0.2.6 → 0.2.8

package/dist/index.js

@@ -1842,6 +1842,31 @@ function ElementIcon({ tag }) {
   }
   return /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 rounded flex items-center justify-center", style: { backgroundColor: bgColor }, children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "1.5", y: "1.5", width: "9", height: "9", rx: "1.5", stroke: iconColor, strokeWidth: "1.2" }) }) });
 }
+
+// src/lib/normalizeProxyBaseUrl.ts
+function normalizeProxyBaseUrl(proxyBaseUrl) {
+  const raw = (proxyBaseUrl || "").trim().replace(/\/+$/, "");
+  if (!raw) return "";
+  const isAbsoluteHttpUrl = /^https?:\/\//i.test(raw);
+  if (!isAbsoluteHttpUrl || typeof window === "undefined") {
+    return raw;
+  }
+  try {
+    const parsed = new URL(raw);
+    const pageIsHttps = window.location.protocol === "https:";
+    const targetIsHttp = parsed.protocol === "http:";
+    if (pageIsHttps && targetIsHttp) {
+      if (parsed.hostname === window.location.hostname) {
+        const basePath = parsed.pathname === "/" ? "" : parsed.pathname.replace(/\/+$/, "");
+        return `${window.location.origin}${basePath}`;
+      }
+      parsed.protocol = "https:";
+    }
+    return parsed.toString().replace(/\/+$/, "");
+  } catch {
+    return raw;
+  }
+}
 var CHANNEL = "conversion-editor";
 function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong }) {
   const iframeElRef = useRef(null);
@@ -1885,11 +1910,12 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
+  const resolvedProxyBaseUrl = normalizeProxyBaseUrl(proxyBaseUrl);
   let resolvedUrl;
   if (url.toLowerCase() === "test") {
     resolvedUrl = "/test";
   } else if (url.startsWith("http")) {
-    resolvedUrl = `${proxyBaseUrl}/api/conversion-proxy?password=${encodeURIComponent(password || "")}&url=${encodeURIComponent(url)}`;
+    resolvedUrl = `${resolvedProxyBaseUrl}/api/conversion-proxy?password=${encodeURIComponent(password || "")}&url=${encodeURIComponent(url)}`;
   } else {
     resolvedUrl = url;
   }
@@ -4777,6 +4803,7 @@ var VVVEB_CHANNEL = "vvveb-bridge";
 function PlatformVisualEditorV2({
   // channel kept for API compatibility; VvvebJs uses its own internal channel
   embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
+  proxyBaseUrl = "",
   className = "fixed inset-0 z-[9999] flex flex-col bg-white",
   editorClassName = "flex-1 min-h-0",
   showHeader = true,
@@ -4839,6 +4866,10 @@ function PlatformVisualEditorV2({
     }),
     [experiment]
   );
+  const editorSrc = useMemo(() => {
+    const safeBaseUrl = normalizeProxyBaseUrl(proxyBaseUrl);
+    return safeBaseUrl ? `${safeBaseUrl}/vvveb-editor` : "/vvveb-editor";
+  }, [proxyBaseUrl]);
   useEffect(() => {
     if (!editorReady) return;
     const key = JSON.stringify(loadPayload);
@@ -4981,7 +5012,7 @@ function PlatformVisualEditorV2({
       "iframe",
       {
         ref: iframeRef,
-        src: "/vvveb-editor",
+        src: editorSrc,
         className: "w-full h-full border-0",
         title: "Vvveb Visual Editor",
         allow: "same-origin"

package/dist/vite.cjs

@@ -995,6 +995,10 @@ var vvvebReady      = false;
 var currentMode     = 'editor';
 var currentDevice   = 'desktop';
 var selectedEl      = null;
+/** Stable selector fingerprint for resilient selection recovery after DOM churn. */
+var selectedElFingerprint = '';
+var selectedElRecoverMisses = 0;
+var MAX_SELECTED_RECOVER_MISSES = 12;
 var suppressClickUntil = 0;
 var dragAttachDoc     = null;
 var currentMainTab  = 'design';
@@ -1037,6 +1041,37 @@ function endSuppressIframeMutationDirty() {
   suppressIframeMutationDirty = Math.max(0, suppressIframeMutationDirty - 1);
 }
 
+function recoverSelectedElement(forceDeselectOnMiss) {
+  if (selectedEl && selectedEl.ownerDocument && selectedEl.ownerDocument.contains(selectedEl)) {
+    selectedElRecoverMisses = 0;
+    return selectedEl;
+  }
+  if (!selectedElFingerprint) {
+    if (forceDeselectOnMiss) deselectElement();
+    return null;
+  }
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!doc) return null;
+  var recovered = querySelectorResolved(doc, selectedElFingerprint);
+  if (recovered) {
+    beginSuppressIframeMutationDirty();
+    try {
+      selectedEl = recovered;
+      if (selectedEl.classList) selectedEl.classList.add('vve-selected');
+    } finally {
+      endSuppressIframeMutationDirty();
+    }
+    selectedElRecoverMisses = 0;
+    return recovered;
+  }
+  selectedElRecoverMisses += 1;
+  if (forceDeselectOnMiss && selectedElRecoverMisses >= MAX_SELECTED_RECOVER_MISSES) {
+    deselectElement();
+  }
+  return null;
+}
+
 /** Stable stringify of a variation's changesets field (string or array from API). */
 function fingerprintChangesetsField(raw) {
   if (raw == null) return '[]';
@@ -2640,6 +2675,8 @@ function selectElement(el) {
   try {
     if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
     selectedEl = el;
+    selectedElFingerprint = buildSelector(el);
+    selectedElRecoverMisses = 0;
     try { el.classList.add('vve-selected'); } catch(_) {}
   } finally {
     endSuppressIframeMutationDirty();
@@ -2661,6 +2698,8 @@ function deselectElement() {
   beginSuppressIframeMutationDirty();
   try {
     if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+    selectedElFingerprint = '';
+    selectedElRecoverMisses = 0;
   } finally {
     endSuppressIframeMutationDirty();
   }
@@ -2714,7 +2753,13 @@ function positionSelectionToolbar() {
   var bar = document.getElementById('selection-floater');
   var iframe = document.getElementById('iframeId');
   var panel = document.getElementById('iframe-panel');
-  if (!bar || !selectedEl || !iframe || !iframe.contentWindow || !panel) return;
+  var liveSelected = recoverSelectedElement(false);
+  if (!bar || !liveSelected || !iframe || !iframe.contentWindow || !panel) return;
+  if (selectedEl !== liveSelected) {
+    selectedEl = liveSelected;
+    renderRightPanel(liveSelected);
+    syncDomTreeSelection();
+  }
   var elR = selectedEl.getBoundingClientRect();
   var iframeR = iframe.getBoundingClientRect();
   var panelR = panel.getBoundingClientRect();
@@ -2730,10 +2775,17 @@ function positionSelectionToolbar() {
 function updateSelectionToolbar() {
   var bar = document.getElementById('selection-floater');
   if (!bar) return;
-  if (!selectedEl || currentMode !== 'editor') {
+  if (currentMode !== 'editor') {
+    bar.style.display = 'none';
+    return;
+  }
+  var liveSelected = recoverSelectedElement(true);
+  if (!liveSelected) {
     bar.style.display = 'none';
     return;
   }
+  if (selectedEl !== liveSelected) selectedEl = liveSelected;
+  selectedElFingerprint = buildSelector(liveSelected);
   bar.style.display = 'flex';
   requestAnimationFrame(function() { positionSelectionToolbar(); });
 }
@@ -3701,9 +3753,13 @@ function attachChangeObserver() {
         // 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);
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
       scheduleConsistencyReconcile();
+      updateSelectionToolbar();
     });
     changeObserver.observe(doc.body, {
       childList: true, subtree: true, attributes: true, characterData: true
@@ -3948,9 +4004,23 @@ 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
+function isNativeEditableTarget(target) {
+  if (!target || target.nodeType !== 1) return false;
+  if (target.isContentEditable) return true;
+  if (target.closest && target.closest('[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]')) {
+    return true;
+  }
+  if (!target.tagName) return false;
+  var tag = String(target.tagName).toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select';
+}
+
 document.addEventListener('keydown', function(e) {
+  // Keep native browser undo/redo inside text inputs/contenteditable fields.
+  if (isNativeEditableTarget(e.target)) return;
   var meta = e.metaKey || e.ctrlKey;
-  if (meta && !e.shiftKey && e.key === 'z') {
+  var k = (e.key || '').toLowerCase();
+  if (meta && !e.shiftKey && k === 'z') {
     e.preventDefault();
     if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
       Vvveb.Undo.undo();
@@ -3958,7 +4028,7 @@ document.addEventListener('keydown', function(e) {
       recomputeEditorDirty();
     }
   }
-  if (meta && e.shiftKey && e.key === 'z') {
+  if (meta && e.shiftKey && k === 'z') {
     e.preventDefault();
     if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
       Vvveb.Undo.redo();
@@ -4427,7 +4497,96 @@ function createVisualEditorMiddleware(options) {
           html = html.replace("</head>", `${popupHideCss}
 </head>`);
         }
-        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}var after=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(after&&skipNestedProxyNetwork(after))return emptyJsonFetchResponse();}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        html = html.replace(
+          /<meta[^>]+http-equiv=["']?\s*(x-frame-options|content-security-policy)\s*["']?[^>]*>/gi,
+          ""
+        );
+        html = html.replace(
+          /<meta[^>]+name=["']?\s*content-security-policy\s*["']?[^>]*>/gi,
+          ""
+        );
+        const runtimePreflightScript = `<script>(function(){try{
+var TARGET_ORIGIN=${JSON.stringify(origin)};
+var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};
+var PROXY_PASSWORD=${JSON.stringify(password)};
+window.__CONVERSION_EDITOR_ACTIVE__=true;
+function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}
+function toAbsolute(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")||raw.startsWith("//")?TARGET_ORIGIN:TARGET_PAGE_URL;return new URL(raw,base).toString();}catch(_){return raw;}}
+function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
+var nativeAssign=window.location.assign?window.location.assign.bind(window.location):null;
+var nativeReplace=window.location.replace?window.location.replace.bind(window.location):null;
+function safeNavigate(raw,mode){var abs=toAbsolute(raw);var prox=toProxy(raw);if(!prox){try{console.warn("[conversion-proxy] redirect blocked",{mode:mode,requested:raw,resolved:abs,origin:TARGET_ORIGIN});}catch(_){}return false;}try{console.info("[conversion-proxy] redirect intercepted",{mode:mode,requested:raw,resolved:abs,proxied:prox});if(mode==="replace"&&nativeReplace){nativeReplace(prox);return true;}if(nativeAssign){nativeAssign(prox);return true;}window.location.href=prox;return true;}catch(err){try{console.warn("[conversion-proxy] redirect interception failed",{mode:mode,requested:raw,resolved:abs,proxied:prox,error:err&&err.message?err.message:String(err)});}catch(_){}return false;}}
+try{if(nativeAssign){window.location.assign=function(url){return safeNavigate(url,"assign");};}}catch(_){}
+try{if(nativeReplace){window.location.replace=function(url){return safeNavigate(url,"replace");};}}catch(_){}
+try{var hrefDesc=Object.getOwnPropertyDescriptor(Location.prototype,"href");if(hrefDesc&&hrefDesc.configurable&&hrefDesc.get&&hrefDesc.set){Object.defineProperty(Location.prototype,"href",{configurable:true,enumerable:hrefDesc.enumerable,get:function(){return hrefDesc.get.call(this);},set:function(v){safeNavigate(v,"assign");}});}}catch(_){}
+try{
+  var NativeMO=window.MutationObserver;
+  if(NativeMO&&!window.__CONVERSION_MO_GUARDED__){
+    window.__CONVERSION_MO_GUARDED__=true;
+    window.MutationObserver=function(cb){
+      var last=0;
+      var wrapped=function(list,obs){
+        try{
+          if(!window.__CONVERSION_EDITOR_ACTIVE__)return cb(list,obs);
+          var now=Date.now();
+          if(now-last<120)return;
+          last=now;
+          return cb(list,obs);
+        }catch(_){}
+      };
+      return new NativeMO(wrapped);
+    };
+    window.MutationObserver.prototype=NativeMO.prototype;
+  }
+}catch(_){}
+}catch(_){}})();</script>`;
+        html = html.replace(/<head([^>]*)>/i, `<head$1>
+${runtimePreflightScript}
+`);
+        const runtimeProxyScript = `<script>(function(){try{
+var TARGET_ORIGIN=${JSON.stringify(origin)};
+var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};
+var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";
+function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}
+function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}
+function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}
+function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}
+function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}
+function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}
+if(window.fetch){
+  var _fetch=window.fetch.bind(window);
+  window.fetch=function(input,init){
+    var afterUrl="";
+    try{
+      var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");
+      if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();
+      if(typeof input==="string"){
+        input=toAbsoluteOriginUrl(input);
+      }else if(input&&input.url){
+        var next=toAbsoluteOriginUrl(input.url);
+        if(next!==input.url){input=new Request(next,input);}
+      }
+      afterUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");
+      if(afterUrl&&skipNestedProxyNetwork(afterUrl))return emptyJsonFetchResponse();
+    }catch(_){}
+    return _fetch(input,init).catch(function(err){
+      try{
+        var u=afterUrl?resolveUrl(afterUrl):null;
+        var sameOrigin=!!(u&&u.origin===TARGET_ORIGIN);
+        var likelyThirdPartyBg=!sameOrigin||!!(u&&/(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(u.pathname||""));
+        if(window.__CONVERSION_EDITOR_ACTIVE__&&likelyThirdPartyBg){
+          console.warn("[conversion-proxy] suppressed fetch failure",{url:afterUrl,error:err&&err.message?err.message:String(err)});
+          return new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}});
+        }
+      }catch(_){}
+      throw err;
+    });
+  };
+}
+if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}
+if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}
+if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}
+}catch(_){}})();</script>`;
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${runtimeProxyScript}
 </head>`);

package/dist/vite.js

@@ -987,6 +987,10 @@ var vvvebReady      = false;
 var currentMode     = 'editor';
 var currentDevice   = 'desktop';
 var selectedEl      = null;
+/** Stable selector fingerprint for resilient selection recovery after DOM churn. */
+var selectedElFingerprint = '';
+var selectedElRecoverMisses = 0;
+var MAX_SELECTED_RECOVER_MISSES = 12;
 var suppressClickUntil = 0;
 var dragAttachDoc     = null;
 var currentMainTab  = 'design';
@@ -1029,6 +1033,37 @@ function endSuppressIframeMutationDirty() {
   suppressIframeMutationDirty = Math.max(0, suppressIframeMutationDirty - 1);
 }
 
+function recoverSelectedElement(forceDeselectOnMiss) {
+  if (selectedEl && selectedEl.ownerDocument && selectedEl.ownerDocument.contains(selectedEl)) {
+    selectedElRecoverMisses = 0;
+    return selectedEl;
+  }
+  if (!selectedElFingerprint) {
+    if (forceDeselectOnMiss) deselectElement();
+    return null;
+  }
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!doc) return null;
+  var recovered = querySelectorResolved(doc, selectedElFingerprint);
+  if (recovered) {
+    beginSuppressIframeMutationDirty();
+    try {
+      selectedEl = recovered;
+      if (selectedEl.classList) selectedEl.classList.add('vve-selected');
+    } finally {
+      endSuppressIframeMutationDirty();
+    }
+    selectedElRecoverMisses = 0;
+    return recovered;
+  }
+  selectedElRecoverMisses += 1;
+  if (forceDeselectOnMiss && selectedElRecoverMisses >= MAX_SELECTED_RECOVER_MISSES) {
+    deselectElement();
+  }
+  return null;
+}
+
 /** Stable stringify of a variation's changesets field (string or array from API). */
 function fingerprintChangesetsField(raw) {
   if (raw == null) return '[]';
@@ -2632,6 +2667,8 @@ function selectElement(el) {
   try {
     if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
     selectedEl = el;
+    selectedElFingerprint = buildSelector(el);
+    selectedElRecoverMisses = 0;
     try { el.classList.add('vve-selected'); } catch(_) {}
   } finally {
     endSuppressIframeMutationDirty();
@@ -2653,6 +2690,8 @@ function deselectElement() {
   beginSuppressIframeMutationDirty();
   try {
     if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+    selectedElFingerprint = '';
+    selectedElRecoverMisses = 0;
   } finally {
     endSuppressIframeMutationDirty();
   }
@@ -2706,7 +2745,13 @@ function positionSelectionToolbar() {
   var bar = document.getElementById('selection-floater');
   var iframe = document.getElementById('iframeId');
   var panel = document.getElementById('iframe-panel');
-  if (!bar || !selectedEl || !iframe || !iframe.contentWindow || !panel) return;
+  var liveSelected = recoverSelectedElement(false);
+  if (!bar || !liveSelected || !iframe || !iframe.contentWindow || !panel) return;
+  if (selectedEl !== liveSelected) {
+    selectedEl = liveSelected;
+    renderRightPanel(liveSelected);
+    syncDomTreeSelection();
+  }
   var elR = selectedEl.getBoundingClientRect();
   var iframeR = iframe.getBoundingClientRect();
   var panelR = panel.getBoundingClientRect();
@@ -2722,10 +2767,17 @@ function positionSelectionToolbar() {
 function updateSelectionToolbar() {
   var bar = document.getElementById('selection-floater');
   if (!bar) return;
-  if (!selectedEl || currentMode !== 'editor') {
+  if (currentMode !== 'editor') {
+    bar.style.display = 'none';
+    return;
+  }
+  var liveSelected = recoverSelectedElement(true);
+  if (!liveSelected) {
     bar.style.display = 'none';
     return;
   }
+  if (selectedEl !== liveSelected) selectedEl = liveSelected;
+  selectedElFingerprint = buildSelector(liveSelected);
   bar.style.display = 'flex';
   requestAnimationFrame(function() { positionSelectionToolbar(); });
 }
@@ -3693,9 +3745,13 @@ function attachChangeObserver() {
         // 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);
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
       scheduleConsistencyReconcile();
+      updateSelectionToolbar();
     });
     changeObserver.observe(doc.body, {
       childList: true, subtree: true, attributes: true, characterData: true
@@ -3940,9 +3996,23 @@ 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
+function isNativeEditableTarget(target) {
+  if (!target || target.nodeType !== 1) return false;
+  if (target.isContentEditable) return true;
+  if (target.closest && target.closest('[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]')) {
+    return true;
+  }
+  if (!target.tagName) return false;
+  var tag = String(target.tagName).toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select';
+}
+
 document.addEventListener('keydown', function(e) {
+  // Keep native browser undo/redo inside text inputs/contenteditable fields.
+  if (isNativeEditableTarget(e.target)) return;
   var meta = e.metaKey || e.ctrlKey;
-  if (meta && !e.shiftKey && e.key === 'z') {
+  var k = (e.key || '').toLowerCase();
+  if (meta && !e.shiftKey && k === 'z') {
     e.preventDefault();
     if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
       Vvveb.Undo.undo();
@@ -3950,7 +4020,7 @@ document.addEventListener('keydown', function(e) {
       recomputeEditorDirty();
     }
   }
-  if (meta && e.shiftKey && e.key === 'z') {
+  if (meta && e.shiftKey && k === 'z') {
     e.preventDefault();
     if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
       Vvveb.Undo.redo();
@@ -4419,7 +4489,96 @@ function createVisualEditorMiddleware(options) {
           html = html.replace("</head>", `${popupHideCss}
 </head>`);
         }
-        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}var after=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(after&&skipNestedProxyNetwork(after))return emptyJsonFetchResponse();}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        html = html.replace(
+          /<meta[^>]+http-equiv=["']?\s*(x-frame-options|content-security-policy)\s*["']?[^>]*>/gi,
+          ""
+        );
+        html = html.replace(
+          /<meta[^>]+name=["']?\s*content-security-policy\s*["']?[^>]*>/gi,
+          ""
+        );
+        const runtimePreflightScript = `<script>(function(){try{
+var TARGET_ORIGIN=${JSON.stringify(origin)};
+var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};
+var PROXY_PASSWORD=${JSON.stringify(password)};
+window.__CONVERSION_EDITOR_ACTIVE__=true;
+function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}
+function toAbsolute(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")||raw.startsWith("//")?TARGET_ORIGIN:TARGET_PAGE_URL;return new URL(raw,base).toString();}catch(_){return raw;}}
+function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
+var nativeAssign=window.location.assign?window.location.assign.bind(window.location):null;
+var nativeReplace=window.location.replace?window.location.replace.bind(window.location):null;
+function safeNavigate(raw,mode){var abs=toAbsolute(raw);var prox=toProxy(raw);if(!prox){try{console.warn("[conversion-proxy] redirect blocked",{mode:mode,requested:raw,resolved:abs,origin:TARGET_ORIGIN});}catch(_){}return false;}try{console.info("[conversion-proxy] redirect intercepted",{mode:mode,requested:raw,resolved:abs,proxied:prox});if(mode==="replace"&&nativeReplace){nativeReplace(prox);return true;}if(nativeAssign){nativeAssign(prox);return true;}window.location.href=prox;return true;}catch(err){try{console.warn("[conversion-proxy] redirect interception failed",{mode:mode,requested:raw,resolved:abs,proxied:prox,error:err&&err.message?err.message:String(err)});}catch(_){}return false;}}
+try{if(nativeAssign){window.location.assign=function(url){return safeNavigate(url,"assign");};}}catch(_){}
+try{if(nativeReplace){window.location.replace=function(url){return safeNavigate(url,"replace");};}}catch(_){}
+try{var hrefDesc=Object.getOwnPropertyDescriptor(Location.prototype,"href");if(hrefDesc&&hrefDesc.configurable&&hrefDesc.get&&hrefDesc.set){Object.defineProperty(Location.prototype,"href",{configurable:true,enumerable:hrefDesc.enumerable,get:function(){return hrefDesc.get.call(this);},set:function(v){safeNavigate(v,"assign");}});}}catch(_){}
+try{
+  var NativeMO=window.MutationObserver;
+  if(NativeMO&&!window.__CONVERSION_MO_GUARDED__){
+    window.__CONVERSION_MO_GUARDED__=true;
+    window.MutationObserver=function(cb){
+      var last=0;
+      var wrapped=function(list,obs){
+        try{
+          if(!window.__CONVERSION_EDITOR_ACTIVE__)return cb(list,obs);
+          var now=Date.now();
+          if(now-last<120)return;
+          last=now;
+          return cb(list,obs);
+        }catch(_){}
+      };
+      return new NativeMO(wrapped);
+    };
+    window.MutationObserver.prototype=NativeMO.prototype;
+  }
+}catch(_){}
+}catch(_){}})();</script>`;
+        html = html.replace(/<head([^>]*)>/i, `<head$1>
+${runtimePreflightScript}
+`);
+        const runtimeProxyScript = `<script>(function(){try{
+var TARGET_ORIGIN=${JSON.stringify(origin)};
+var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};
+var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";
+function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}
+function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}
+function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}
+function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}
+function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}
+function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}
+if(window.fetch){
+  var _fetch=window.fetch.bind(window);
+  window.fetch=function(input,init){
+    var afterUrl="";
+    try{
+      var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");
+      if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();
+      if(typeof input==="string"){
+        input=toAbsoluteOriginUrl(input);
+      }else if(input&&input.url){
+        var next=toAbsoluteOriginUrl(input.url);
+        if(next!==input.url){input=new Request(next,input);}
+      }
+      afterUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");
+      if(afterUrl&&skipNestedProxyNetwork(afterUrl))return emptyJsonFetchResponse();
+    }catch(_){}
+    return _fetch(input,init).catch(function(err){
+      try{
+        var u=afterUrl?resolveUrl(afterUrl):null;
+        var sameOrigin=!!(u&&u.origin===TARGET_ORIGIN);
+        var likelyThirdPartyBg=!sameOrigin||!!(u&&/(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(u.pathname||""));
+        if(window.__CONVERSION_EDITOR_ACTIVE__&&likelyThirdPartyBg){
+          console.warn("[conversion-proxy] suppressed fetch failure",{url:afterUrl,error:err&&err.message?err.message:String(err)});
+          return new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}});
+        }
+      }catch(_){}
+      throw err;
+    });
+  };
+}
+if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}
+if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}
+if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}
+}catch(_){}})();</script>`;
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${runtimeProxyScript}
 </head>`);

package/package.json

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