@accelerated-agency/visual-editor 0.2.5 → 0.2.7

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

@@ -627,7 +627,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       </div>
       <!-- btn-close: hidden visually, kept for JS event listener -->
       <button id="btn-close" style="display:none" title="Close editor"></button>
-      <button class="tb-sim-btn" id="btn-simulate"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
+      <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
       <button class="tb-fin-btn" id="btn-save">Finalize</button>
     </div>
 
@@ -914,6 +914,52 @@ function send(type, payload) {
   window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
 }
 
+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 cId = String(testId || '') + '_' + String(variationId || '');
+  var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
+  return (
+    baseUrl +
+    (hasQueryParams ? '&' : '?') +
+    'codebase_debug=true&cId=' +
+    encodeURIComponent(cId)
+  );
+}
+
+function simulateExperiment() {
+  var test = experimentData || {};
+  var activeVariation = null;
+  if (Array.isArray(variations) && variations.length) {
+    activeVariation =
+      variations.find(function(v) { return v && v._id === activeVarId; }) ||
+      variations[0];
+  }
+  var targetUrl =
+    (Array.isArray(test.urltargeting) && test.urltargeting[0]) ||
+    test.pageUrl ||
+    (test.metadata_1 && test.metadata_1.editor_url) ||
+    '';
+  var url = generatePreviewUrlString({
+    url: targetUrl,
+    test: test,
+    variation: activeVariation || {},
+  });
+  if (!url) {
+    console.warn('[V2] simulateExperiment: missing target URL');
+    return;
+  }
+  try {
+    window.open(url, '_blank');
+  } catch(err) {
+    console.warn('[V2] simulateExperiment:', err);
+  }
+}
+
 window.addEventListener('message', function(e) {
   if (!e.data || e.data.channel !== CHANNEL) return;
   switch (e.data.type) {
@@ -965,6 +1011,13 @@ var changeObserver = null;
 var changeObserverDoc = null;
 /** Incremented while applying changesets / selection chrome so MutationObserver does not mark dirty */
 var suppressIframeMutationDirty = 0;
+/** Throttled reconcile timer to keep DOM aligned with saved changesets. */
+var consistencyReconcileTimer = null;
+/** Background watchdog for late client-side re-renders that wipe applied changesets. */
+var consistencyWatchTimer = null;
+var consistencyWatchDoc = null;
+var consistencyWatchTicks = 0;
+var CONSISTENCY_WATCH_MAX_TICKS = 160;
 /** { doc, onRS } \u2014 iframe document readystate until complete */
 var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
@@ -1948,9 +2001,71 @@ function clearPendingGranularChangesets() {
   }
 }
 
+function stopConsistencyWatchdog() {
+  if (consistencyWatchTimer) {
+    clearInterval(consistencyWatchTimer);
+    consistencyWatchTimer = null;
+  }
+  consistencyWatchDoc = null;
+  consistencyWatchTicks = 0;
+}
+
+function runConsistencyReconcile() {
+  if (!activeVarId) return;
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!doc || !doc.body) return;
+  var variation = variations.find(function(v) { return v._id === activeVarId; });
+  var cs = parseVariationChangesets(variation);
+  if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
+  var granular = filterGranularChangesetEntries(cs);
+  var unresolved = countUnresolvedGranularSelectors(doc, granular);
+  if (unresolved > 0 || changesetListHasStructural(cs)) {
+    reapplyActiveVariationGranular(doc);
+    registerPendingGranularChangesets(cs, doc);
+  }
+}
+
+function scheduleConsistencyReconcile() {
+  if (consistencyReconcileTimer) return;
+  consistencyReconcileTimer = setTimeout(function() {
+    consistencyReconcileTimer = null;
+    runConsistencyReconcile();
+  }, 80);
+}
+
+function startConsistencyWatchdog(doc) {
+  if (!doc || !doc.body) return;
+  if (consistencyWatchDoc === doc && consistencyWatchTimer) return;
+  stopConsistencyWatchdog();
+  consistencyWatchDoc = doc;
+  consistencyWatchTicks = 0;
+  consistencyWatchTimer = setInterval(function() {
+    if (consistencyWatchDoc !== doc) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    var iframe = document.getElementById('iframeId');
+    if (!iframe || iframe.contentDocument !== doc || !doc.body) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    consistencyWatchTicks += 1;
+    scheduleConsistencyReconcile();
+    if (consistencyWatchTicks >= CONSISTENCY_WATCH_MAX_TICKS) {
+      stopConsistencyWatchdog();
+    }
+  }, 400);
+}
+
 function resetIframeBindings() {
   detachIframeLoadingListeners();
   stopIframeContentApplyWatcher();
+  stopConsistencyWatchdog();
+  if (consistencyReconcileTimer) {
+    clearTimeout(consistencyReconcileTimer);
+    consistencyReconcileTimer = null;
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   clickAttachDoc = null;
@@ -3564,10 +3679,31 @@ function attachChangeObserver() {
       changeObserver = null;
       changeObserverDoc = null;
     }
-    changeObserver = new MutationObserver(function() {
+    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 = {};
+      }
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
+      scheduleConsistencyReconcile();
     });
     changeObserver.observe(doc.body, {
       childList: true, subtree: true, attributes: true, characterData: true
@@ -3597,6 +3733,8 @@ function syncIframeInteractions(reason) {
     attachClickHandler();
     attachDragReposition();
     attachChangeObserver();
+    startConsistencyWatchdog(doc);
+    scheduleConsistencyReconcile();
     bindSelectionToolbarScroll();
     var inp = document.getElementById('comp-search');
     renderDomTree(inp ? inp.value : '');

package/dist/vite.js

@@ -619,7 +619,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       </div>
       <!-- btn-close: hidden visually, kept for JS event listener -->
       <button id="btn-close" style="display:none" title="Close editor"></button>
-      <button class="tb-sim-btn" id="btn-simulate"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
+      <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
       <button class="tb-fin-btn" id="btn-save">Finalize</button>
     </div>
 
@@ -906,6 +906,52 @@ function send(type, payload) {
   window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
 }
 
+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 cId = String(testId || '') + '_' + String(variationId || '');
+  var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
+  return (
+    baseUrl +
+    (hasQueryParams ? '&' : '?') +
+    'codebase_debug=true&cId=' +
+    encodeURIComponent(cId)
+  );
+}
+
+function simulateExperiment() {
+  var test = experimentData || {};
+  var activeVariation = null;
+  if (Array.isArray(variations) && variations.length) {
+    activeVariation =
+      variations.find(function(v) { return v && v._id === activeVarId; }) ||
+      variations[0];
+  }
+  var targetUrl =
+    (Array.isArray(test.urltargeting) && test.urltargeting[0]) ||
+    test.pageUrl ||
+    (test.metadata_1 && test.metadata_1.editor_url) ||
+    '';
+  var url = generatePreviewUrlString({
+    url: targetUrl,
+    test: test,
+    variation: activeVariation || {},
+  });
+  if (!url) {
+    console.warn('[V2] simulateExperiment: missing target URL');
+    return;
+  }
+  try {
+    window.open(url, '_blank');
+  } catch(err) {
+    console.warn('[V2] simulateExperiment:', err);
+  }
+}
+
 window.addEventListener('message', function(e) {
   if (!e.data || e.data.channel !== CHANNEL) return;
   switch (e.data.type) {
@@ -957,6 +1003,13 @@ var changeObserver = null;
 var changeObserverDoc = null;
 /** Incremented while applying changesets / selection chrome so MutationObserver does not mark dirty */
 var suppressIframeMutationDirty = 0;
+/** Throttled reconcile timer to keep DOM aligned with saved changesets. */
+var consistencyReconcileTimer = null;
+/** Background watchdog for late client-side re-renders that wipe applied changesets. */
+var consistencyWatchTimer = null;
+var consistencyWatchDoc = null;
+var consistencyWatchTicks = 0;
+var CONSISTENCY_WATCH_MAX_TICKS = 160;
 /** { doc, onRS } \u2014 iframe document readystate until complete */
 var iframeDocLoadingListeners = null;
 // Each entry: {selector, label, cssProp, value, targetEl}
@@ -1940,9 +1993,71 @@ function clearPendingGranularChangesets() {
   }
 }
 
+function stopConsistencyWatchdog() {
+  if (consistencyWatchTimer) {
+    clearInterval(consistencyWatchTimer);
+    consistencyWatchTimer = null;
+  }
+  consistencyWatchDoc = null;
+  consistencyWatchTicks = 0;
+}
+
+function runConsistencyReconcile() {
+  if (!activeVarId) return;
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!doc || !doc.body) return;
+  var variation = variations.find(function(v) { return v._id === activeVarId; });
+  var cs = parseVariationChangesets(variation);
+  if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
+  var granular = filterGranularChangesetEntries(cs);
+  var unresolved = countUnresolvedGranularSelectors(doc, granular);
+  if (unresolved > 0 || changesetListHasStructural(cs)) {
+    reapplyActiveVariationGranular(doc);
+    registerPendingGranularChangesets(cs, doc);
+  }
+}
+
+function scheduleConsistencyReconcile() {
+  if (consistencyReconcileTimer) return;
+  consistencyReconcileTimer = setTimeout(function() {
+    consistencyReconcileTimer = null;
+    runConsistencyReconcile();
+  }, 80);
+}
+
+function startConsistencyWatchdog(doc) {
+  if (!doc || !doc.body) return;
+  if (consistencyWatchDoc === doc && consistencyWatchTimer) return;
+  stopConsistencyWatchdog();
+  consistencyWatchDoc = doc;
+  consistencyWatchTicks = 0;
+  consistencyWatchTimer = setInterval(function() {
+    if (consistencyWatchDoc !== doc) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    var iframe = document.getElementById('iframeId');
+    if (!iframe || iframe.contentDocument !== doc || !doc.body) {
+      stopConsistencyWatchdog();
+      return;
+    }
+    consistencyWatchTicks += 1;
+    scheduleConsistencyReconcile();
+    if (consistencyWatchTicks >= CONSISTENCY_WATCH_MAX_TICKS) {
+      stopConsistencyWatchdog();
+    }
+  }, 400);
+}
+
 function resetIframeBindings() {
   detachIframeLoadingListeners();
   stopIframeContentApplyWatcher();
+  stopConsistencyWatchdog();
+  if (consistencyReconcileTimer) {
+    clearTimeout(consistencyReconcileTimer);
+    consistencyReconcileTimer = null;
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   clickAttachDoc = null;
@@ -3556,10 +3671,31 @@ function attachChangeObserver() {
       changeObserver = null;
       changeObserverDoc = null;
     }
-    changeObserver = new MutationObserver(function() {
+    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 = {};
+      }
       scheduleDomTreeRefresh();
       scheduleGranularChangesetReapply();
+      scheduleConsistencyReconcile();
     });
     changeObserver.observe(doc.body, {
       childList: true, subtree: true, attributes: true, characterData: true
@@ -3589,6 +3725,8 @@ function syncIframeInteractions(reason) {
     attachClickHandler();
     attachDragReposition();
     attachChangeObserver();
+    startConsistencyWatchdog(doc);
+    scheduleConsistencyReconcile();
     bindSelectionToolbarScroll();
     var inp = document.getElementById('comp-search');
     renderDomTree(inp ? inp.value : '');

package/package.json

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