@accelerated-agency/visual-editor 0.2.9 → 0.3.1

package/dist/index.js

@@ -4,6 +4,7 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HexColorPicker } from 'react-colorful';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 
 var PERSIST_NAME_PREFIX = "conversion-editor-variations-v3-";
 function variationsPersistStorageName(experimentId) {
@@ -4833,6 +4834,7 @@ function PlatformVisualEditorV2({
 }) {
   const iframeRef = useRef(null);
   const [editorReady, setEditorReady] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
   const [dirty, setDirty] = useState(false);
   const dirtyRef = useRef(false);
   const mutationSkipCountRef = useRef(0);
@@ -5020,5 +5022,344 @@ function PlatformVisualEditorV2({
     ) })
   ] });
 }
+var AI_EDITOR_CHANNEL = "ve-ai-editor";
+var AI_VIEWPORT_WIDTH = {
+  desktop: "100%",
+  tablet: "768px",
+  mobile: "390px"
+};
+var AI_VIEWPORT_LABEL = {
+  desktop: "1440px",
+  tablet: "768px",
+  mobile: "390px"
+};
+function fingerprint(value) {
+  let hash = 5381;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = hash * 33 ^ value.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+}
+function PlatformAiEditor({
+  embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
+  proxyBaseUrl = "",
+  chatComponent,
+  className = "fixed inset-0 z-[9999] flex flex-col bg-white",
+  editorClassName = "flex-1 min-h-0",
+  showHeader = true,
+  title,
+  status,
+  tabs = [],
+  activeTab = "AI Editor",
+  error = null,
+  showCloseButton = true,
+  closeLabel = "Close",
+  experiment,
+  activeVariationId: controlledActiveVariationId,
+  onClose,
+  onTabChange,
+  onDirtyChange,
+  onEditorReady,
+  onEditorUrlChanged,
+  onSaveSuccess,
+  onSaveError,
+  onRequestSave,
+  renderHeader,
+  renderError,
+  setActiveVariationId: controlledSetActiveVariationId
+}) {
+  const iframeRef = useRef(null);
+  const [localActiveVariationId, setLocalActiveVariationId] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isIframeLoading, setIsIframeLoading] = useState(false);
+  const [viewport, setViewport] = useState("desktop");
+  useEffect(() => {
+    window[embeddedGlobalKey] = true;
+    return () => {
+      delete window[embeddedGlobalKey];
+    };
+  }, [embeddedGlobalKey]);
+  useEffect(() => {
+    onDirtyChange?.(false);
+  }, [onDirtyChange]);
+  const variations = experiment?.variations ?? [];
+  const activeVariationId = controlledActiveVariationId ?? localActiveVariationId;
+  const setActiveVariationId = controlledSetActiveVariationId ?? setLocalActiveVariationId;
+  useEffect(() => {
+    if (!variations.length) {
+      setActiveVariationId(null);
+      return;
+    }
+    setActiveVariationId((current) => {
+      if (current && variations.some((variation) => variation._id === current)) return current;
+      const baseline = variations.find((variation) => variation.baseline);
+      return baseline?._id ?? variations[0]._id;
+    });
+  }, [variations]);
+  const activeVariation = useMemo(
+    () => variations.find((variation) => variation._id === activeVariationId) ?? null,
+    [variations, activeVariationId]
+  );
+  const effectiveCssCode = useMemo(() => {
+    return (activeVariation?.csscode ?? "").trim();
+  }, [activeVariation?.csscode]);
+  const effectiveJsCode = useMemo(() => {
+    return (activeVariation?.jscode ?? "").trim();
+  }, [activeVariation?.jscode]);
+  const cssFingerprint = useMemo(() => fingerprint(effectiveCssCode), [effectiveCssCode]);
+  const jsFingerprint = useMemo(() => fingerprint(effectiveJsCode), [effectiveJsCode]);
+  const hasAiCode = useMemo(
+    () => Boolean(effectiveCssCode.trim() || effectiveJsCode.trim()),
+    [effectiveCssCode, effectiveJsCode]
+  );
+  const iframeKey = useMemo(
+    () => `ai-iframe-${activeVariationId ?? "default"}-${cssFingerprint}-${jsFingerprint}`,
+    [activeVariationId, cssFingerprint, jsFingerprint]
+  );
+  const iframeWidth = AI_VIEWPORT_WIDTH[viewport];
+  const editorSrc = useMemo(() => {
+    const pageUrl = experiment?.pageUrl;
+    if (!pageUrl) return "about:blank";
+    const safeBaseUrl = normalizeProxyBaseUrl(proxyBaseUrl);
+    const query = new URLSearchParams({
+      password: experiment?.editorPassword ?? "",
+      url: pageUrl
+    }).toString();
+    const previewPath = `/api/conversion-proxy?${query}`;
+    return safeBaseUrl ? `${safeBaseUrl}${previewPath}` : previewPath;
+  }, [proxyBaseUrl, experiment?.pageUrl, experiment?.editorPassword]);
+  const postAiCodeToIframe = useCallback(() => {
+    const targetWindow = iframeRef.current?.contentWindow;
+    if (!targetWindow) return;
+    targetWindow.postMessage(
+      {
+        channel: AI_EDITOR_CHANNEL,
+        type: "apply-ai-code",
+        payload: {
+          cssCode: effectiveCssCode,
+          jsCode: effectiveJsCode
+        }
+      },
+      "*"
+    );
+  }, [effectiveCssCode, effectiveJsCode]);
+  const parseProxyPayloadFromUrl = useCallback((rawUrl) => {
+    if (!rawUrl) return null;
+    try {
+      const parsed = new URL(rawUrl, window.location.href);
+      const url = parsed.searchParams.get("url") ?? void 0;
+      const password = parsed.searchParams.get("password") ?? void 0;
+      return { url, password };
+    } catch {
+      return null;
+    }
+  }, []);
+  const applyAiCodeInIframe = useCallback(() => {
+    postAiCodeToIframe();
+  }, [postAiCodeToIframe]);
+  useEffect(() => {
+    applyAiCodeInIframe();
+  }, [applyAiCodeInIframe]);
+  useEffect(() => {
+    if (!hasAiCode) {
+      setIsIframeLoading(false);
+      return;
+    }
+    setIsIframeLoading(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsIframeLoading(false);
+    }, 5e3);
+    return () => window.clearTimeout(timeoutId);
+  }, [hasAiCode, cssFingerprint, jsFingerprint, activeVariationId]);
+  const handleIframeLoad = useCallback(() => {
+    applyAiCodeInIframe();
+    postAiCodeToIframe();
+    const currentSrc = iframeRef.current?.src ?? null;
+    const proxiedPayload = parseProxyPayloadFromUrl(currentSrc);
+    if (proxiedPayload?.url || proxiedPayload?.password) {
+      void onEditorUrlChanged?.(proxiedPayload);
+    }
+    onEditorReady?.();
+  }, [
+    applyAiCodeInIframe,
+    postAiCodeToIframe,
+    onEditorReady,
+    onEditorUrlChanged,
+    parseProxyPayloadFromUrl
+  ]);
+  useEffect(() => {
+    const onMessage = (event) => {
+      const msg = event.data;
+      if (!msg || msg.channel !== AI_EDITOR_CHANNEL) return;
+      if (msg.type === "ai-code-ready") {
+        postAiCodeToIframe();
+        return;
+      }
+      if (msg.type === "ai-url-changed") {
+        const payload = msg.payload ?? {};
+        void onEditorUrlChanged?.({
+          url: payload.url,
+          password: payload.password
+        });
+        return;
+      }
+      if (msg.type === "ai-code-applied") {
+        setIsIframeLoading(false);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [postAiCodeToIframe, onEditorUrlChanged]);
+  const onTabClick = useCallback(
+    (tab) => onTabChange?.(tab),
+    [onTabChange]
+  );
+  const handleSave = useCallback(async () => {
+    if (!onRequestSave || isSaving) return;
+    const payload = {
+      experimentId: experiment?.experimentId,
+      variations,
+      cssCode: effectiveCssCode,
+      jsCode: effectiveJsCode,
+      selectedVariationId: activeVariation?._id,
+      selectedVariation: activeVariation ?? void 0
+    };
+    setIsSaving(true);
+    try {
+      await onRequestSave(payload);
+      onSaveSuccess?.(payload);
+    } catch (error2) {
+      onSaveError?.(error2);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    onRequestSave,
+    isSaving,
+    experiment?.experimentId,
+    variations,
+    effectiveCssCode,
+    effectiveJsCode,
+    activeVariation,
+    onSaveSuccess,
+    onSaveError
+  ]);
+  if (error) {
+    if (renderError) return renderError(error);
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center px-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-2xl text-red-300", children: "\u26A0" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-slate-700", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-red-400", children: error })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showHeader ? renderHeader?.({
+      title: title ?? experiment?.name,
+      status: status ?? experiment?.status,
+      tabs,
+      activeTab,
+      onTabClick,
+      onClose
+    }) ?? /* @__PURE__ */ jsxs("div", { className: "h-12 border-b border-slate-200 bg-white flex items-center justify-between px-4 shadow-[0_1px_3px_rgba(0,0,0,0.04)] shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-wide px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-600 border border-indigo-100 shrink-0", children: "AI" }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-slate-800 truncate", children: title ?? experiment?.name ?? "AI Editor" }),
+        status ? /* @__PURE__ */ jsx("span", { className: "hidden sm:inline-flex text-[10px] px-2 py-0.5 rounded-full border border-slate-200 text-slate-500 font-medium bg-slate-50 capitalize", children: status }) : null
+      ] }),
+      tabs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-1 absolute left-1/2 -translate-x-1/2", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onTabClick(tab),
+          className: `text-[11px] font-semibold px-3 py-1 rounded-full border transition-all ${tab.label === activeTab ? "bg-indigo-600 text-white border-indigo-600 shadow-sm" : "bg-white text-slate-500 border-slate-200 hover:border-slate-300 hover:text-slate-700"}`,
+          children: tab.label
+        },
+        tab.hash
+      )) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "h-8 px-3 rounded-md border border-slate-200 bg-white flex items-center gap-2 text-xs font-medium text-slate-700", children: [
+          /* @__PURE__ */ jsx("span", { children: AI_VIEWPORT_LABEL[viewport] }),
+          /* @__PURE__ */ jsx("i", { className: "bi bi-chevron-down text-[10px] text-slate-500" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-8 rounded-lg bg-slate-100 px-1 flex items-center gap-1", style: { backgroundColor: "#F0F0F0" }, children: [
+          { key: "desktop", icon: "bi-display", title: "Desktop \u2014 full width" },
+          { key: "tablet", icon: "bi-tablet", title: "Tablet \u2014 768px" },
+          { key: "mobile", icon: "bi-phone", title: "Mobile \u2014 390px" }
+        ].map((vp) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewport(vp.key),
+            title: vp.title,
+            className: `w-7 h-7 rounded-md border flex items-center justify-center transition-all ${viewport === vp.key ? "bg-white border-slate-300 text-slate-700 shadow-sm" : "bg-transparent border-transparent text-slate-500 hover:text-slate-700 hover:bg-white/70"}`,
+            children: /* @__PURE__ */ jsx("i", { className: `bi ${vp.icon} text-[12px]` })
+          },
+          vp.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        variations.length > 0 ? /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "h-8 max-w-[220px] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700",
+            value: activeVariationId ?? "",
+            onChange: (event) => setActiveVariationId(event.target.value || null),
+            "aria-label": "Select variation",
+            children: variations.map((variation) => /* @__PURE__ */ jsx("option", { value: variation._id, children: variation.name }, variation._id))
+          }
+        ) : null,
+        onRequestSave ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-[11px] font-medium px-3 py-1.5 rounded-md border border-indigo-200 text-indigo-700 bg-indigo-50 hover:bg-indigo-100 hover:border-indigo-300 transition-all disabled:opacity-60 disabled:cursor-not-allowed",
+            onClick: () => void handleSave(),
+            disabled: isSaving,
+            children: isSaving ? "Saving..." : "Save"
+          }
+        ) : null,
+        showCloseButton ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-[11px] font-medium px-3 py-1.5 rounded-md border border-slate-200 text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all",
+            onClick: () => onClose?.(),
+            children: closeLabel
+          }
+        ) : null
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: `${editorClassName} relative`, children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-slate-100 overflow-auto flex justify-center items-start p-3", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full bg-white border border-slate-200 shadow-sm overflow-hidden",
+          style: {
+            width: iframeWidth,
+            minWidth: iframeWidth,
+            maxWidth: "100%"
+          },
+          children: /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              ref: iframeRef,
+              src: editorSrc,
+              onLoad: handleIframeLoad,
+              className: "w-full h-full border-0",
+              title: "AI Editor Preview",
+              allow: "same-origin"
+            },
+            iframeKey
+          )
+        }
+      ) }),
+      isIframeLoading ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-slate-100/95 backdrop-blur-[1px]", children: /* @__PURE__ */ jsxs("div", { className: "w-[560px] max-w-[88vw]", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-center text-base font-semibold text-slate-700", children: "Loading changes..." }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded-full border border-slate-300 bg-white/90 p-1 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-full bg-slate-200", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 rounded-full bg-gradient-to-r from-emerald-300 via-sky-500 to-indigo-600 animate-pulse" }) }) })
+      ] }) }) : null,
+      chatComponent ?? null
+    ] })
+  ] });
+}
 
-export { EditorShell, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, hydrateVariationsFromStorage, useToast, variationsPersistStorageName };
+export { EditorShell, PlatformAiEditor, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, hydrateVariationsFromStorage, useToast, variationsPersistStorageName };

package/dist/vite.cjs

@@ -12,6 +12,7 @@ var path__default = /*#__PURE__*/_interopDefault(path);
 
 // src/visualEditorProxyPlugin.ts
 var popupHideCss = `<style id="__ce_popup_hide">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"],.klaviyo-form,.klaviyo-modal,.klaviyo-popup,[class*="klaviyo"],.privy-popup,.privy-flyout,[id*="privy"],#PopupSignupForm,.popup-signup,.newsletter-popup,.newsletter-modal,[class*="newsletter-popup"],[class*="newsletter-modal"],[id*="newsletter-popup"],.email-popup,.email-modal,[class*="email-popup"],[class*="email-modal"],.signup-popup,.signup-modal,[class*="signup-popup"],[class*="signup-modal"],.subscribe-popup,.subscribe-modal,[class*="subscribe-popup"],#mc_embed_signup,.mc-modal,.mc-banner,.mc-closeModal,.omniconvert-popup,[class*="omniconvert"],.optinmonster-popup,[id*="om-"][class*="campaign"],.sumo-overlay,.sumome-overlay,[class*="sumome"],.hustle-modal,.hustle-popup,[class*="hustle-"],.popup-overlay,.popup-modal,.modal-overlay,[class*="exit-intent"],[class*="exitintent"],.wheelio-popup,[class*="wheelio"],.spin-wheel-popup,.justuno-popup,[class*="justuno"],.wisepops,.wisepops-overlay,[class*="wisepops"],.elegantmodal,.elegant-popup,#zipify-popup,[class*="zipify"],.age-gate,.age-verification,.age-popup,[class*="age-gate"],[class*="age-verif"],[class*="popup-overlay"],[class*="modal-overlay"],[class*="popup-backdrop"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important;}body.klaviyo-open,body.modal-open,body.popup-open,body.no-scroll,body.noscroll{overflow:auto!important;position:static!important;}</style>`;
+var consentAllowCss = `<style id="__ce_consent_allow">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"]{display:revert!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;height:auto!important;overflow:visible!important;}</style>`;
 var AI_SYSTEM_PROMPT = `You are a CRO expert. Return JSON only with: hypothesis, mutations, summary. Keep 2-6 precise mutations and only valid selectors from snapshot.`;
 var BRIDGE_SCRIPT = `(function(){if(window.__CONVERSION_BRIDGE_LOADED__)return;window.__CONVERSION_BRIDGE_LOADED__=true;var CHANNEL='conversion-editor';var highlightEl=null;function send(payload){window.parent.postMessage({channel:CHANNEL,payload:payload},'*');}function qs(selector){try{return document.querySelector(selector);}catch(_){return null;}}function getSelector(el){if(!el||el.nodeType!==1)return'';if(el.id)return'#'+CSS.escape(el.id);var parts=[];var current=el;var depth=0;while(current&&current.nodeType===1&&depth<5){var part=current.tagName.toLowerCase();if(current.classList&&current.classList.length){part+='.'+Array.from(current.classList).slice(0,2).map(function(c){return CSS.escape(c);}).join('.');}var parent=current.parentElement;if(parent){var siblings=Array.from(parent.children).filter(function(s){return s.tagName===current.tagName;});if(siblings.length>1)part+=':nth-of-type('+(siblings.indexOf(current)+1)+')';}parts.unshift(part);current=parent;depth+=1;}return parts.join(' > ');}function payloadOf(el){var rect=el.getBoundingClientRect();var style=window.getComputedStyle(el);return{selector:getSelector(el),tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,500),computedStyles:{color:style.color,backgroundColor:style.backgroundColor,fontSize:style.fontSize,fontWeight:style.fontWeight,lineHeight:style.lineHeight,display:style.display},rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}function applyMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.value;break;case'setText':el.textContent=m.value;break;case'setHTML':el.innerHTML=m.value;break;case'setAttribute':if(m.property)el.setAttribute(m.property,m.value);break;case'hide':el.style.display='none';break;case'show':el.style.display='';break;case'insertHTML':if(m.position)el.insertAdjacentHTML(m.position,m.value||'');break;case'insertSection':if(m.position)el.insertAdjacentHTML(m.position,m.sectionHtml||m.value||'');break;case'reorderElement':if(!m.targetSelector)break;var target=qs(m.targetSelector);if(!target||!target.parentNode||!el.parentNode)break;if(m.insertPosition==='before')target.parentNode.insertBefore(el,target);else target.parentNode.insertBefore(el,target.nextSibling);break;default:break;}}function revertMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.previous||'';break;case'setText':el.textContent=m.previous||'';break;case'setHTML':el.innerHTML=m.previous||'';break;case'setAttribute':if(m.property){if(m.previous!=null)el.setAttribute(m.property,m.previous);else el.removeAttribute(m.property);}break;case'hide':case'show':el.style.display=m.previous||'';break;default:break;}}function captureSnapshot(){var elements=Array.from(document.querySelectorAll('h1,h2,h3,p,button,a,input,select,img,section,div')).slice(0,700).map(function(el){var rect=el.getBoundingClientRect();var cs=window.getComputedStyle(el);return{selector:getSelector(el),parentSelector:el.parentElement?getSelector(el.parentElement):null,tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,300),attributes:Array.from(el.attributes||[]).reduce(function(acc,a){acc[a.name]=a.value;return acc;},{}),computedStyles:{color:cs.color,backgroundColor:cs.backgroundColor,fontSize:cs.fontSize,fontWeight:cs.fontWeight,display:cs.display},childrenCount:el.children?el.children.length:0,aboveFold:rect.top<window.innerHeight,depth:(function(){var d=0,p=el.parentElement;while(p&&d<25){d++;p=p.parentElement;}return d;})()};});send({type:'snapshotCaptured',snapshot:{url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},elements:elements}});}function captureTree(){function toNode(el,depth){var rect=el.getBoundingClientRect();var tag=el.tagName.toLowerCase();var type='generic';if(tag==='section')type='section';else if(tag==='img')type='image';else if(tag==='a')type='link';else if(tag==='button')type='button';else if(tag==='form')type='form';else if(['p','h1','h2','h3','h4','h5','h6','span'].indexOf(tag)>=0)type='text';else if(['div','main','article','aside','header','footer','nav'].indexOf(tag)>=0)type='container';var children=Array.from(el.children||[]).slice(0,50).map(function(c){return toNode(c,depth+1);});return{id:getSelector(el),selector:getSelector(el),tagName:tag,label:(el.getAttribute('aria-label')||el.getAttribute('id')||el.className||tag).toString().slice(0,80),type:type,children:children,depth:depth,isAboveFold:rect.top<window.innerHeight,rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}send({type:'pageTreeCaptured',tree:[toNode(document.body,0)]});}window.addEventListener('message',function(e){var msg=e.data;if(!msg||msg.channel!==CHANNEL||!msg.payload)return;var p=msg.payload;switch(p.type){case'ping':send({type:'pong'});break;case'applyMutation':applyMutation(p.mutation);break;case'applyMutationBatch':(p.mutations||[]).forEach(applyMutation);break;case'revert':revertMutation(p.mutation);break;case'clearAllMutations':window.location.reload();break;case'captureSnapshot':captureSnapshot();break;case'validateSelectors':send({type:'selectorsValidated',results:(p.selectors||[]).map(function(s){var el=qs(s);return{selector:s,found:!!el,tagName:el?el.tagName.toLowerCase():null};})});break;case'scrollToElement':case'selectElement':var target=qs(p.selector);if(target){target.scrollIntoView({behavior:'smooth',block:'center'});send({type:'elementSelected',element:payloadOf(target)});}break;case'hoverElement':var h=qs(p.selector);if(h){if(highlightEl)highlightEl.style.outline='';h.style.outline='2px solid #3b82f6';highlightEl=h;}break;case'capturePageTree':captureTree();break;default:break;}});document.addEventListener('click',function(e){var el=e.target;if(!(el instanceof Element))return;send({type:'elementSelected',element:payloadOf(el)});},true);send({type:'bridgeReady'});})();`;
 function buildVvvebEditorHtml() {
@@ -1223,6 +1224,10 @@ function setMode(mode) {
   if (mode === 'navigate') {
     setDragHandleActive(false);
     deselectElement();
+  } else if (mode === 'editor') {
+    // Re-bind interactions immediately when coming back from navigate mode.
+    // This avoids waiting for delayed iframe readiness/load retries.
+    syncIframeInteractions('mode-editor-toggle');
   }
   updateSelectionToolbar();
 }
@@ -2201,7 +2206,7 @@ function loadPage(proxyUrl) {
   resetIframeBindings();
   iframe.style.display = 'block';
   setIframePageLoadingUi(true);
-  iframe.src = proxyUrl;
+  iframe.src = appendIframeReloadBust(proxyUrl);
   startIframeContentApplyWatcher(navGen);
   scheduleDomTreeRefresh();
 }
@@ -3041,7 +3046,7 @@ function renderDomTree(filterRaw) {
 
   function labelFor(el) {
     var tag = el.tagName.toLowerCase();
-    if (el.id) return tag + '#' + el.id.slice(0, 40);
+    if (el.id != null && el.id !== '') return tag + '#' + String(el.id).slice(0, 40);
     var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
     if (cn) {
       var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
@@ -4225,18 +4230,28 @@ window.addEventListener('load', function() {
   var iframe = document.getElementById('iframeId');
   iframe.addEventListener('load', function() {
     if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
+    // New iframe navigation: always drop bindings tied to the previous document.
+    resetIframeBindings();
     var doc = iframe.contentDocument;
-    if (!doc || !doc.body) return;
+    if (!doc) {
+      syncIframeInteractions('iframe-load-no-doc');
+      return;
+    }
     var docUrl = '';
     try { docUrl = String(doc.URL || ''); } catch(_) {}
     // Stale events: src may already be the proxy URL while the document is still
-    // about:blank (e.g. src cleared then reset to force reload).
-    if (docUrl === 'about:blank') return;
-    if (!iframeDocMatchesNavigatedSrc(iframe, doc)) return;
+    // about:blank (e.g. src cleared then reset to force reload). Ask sync path to retry.
+    if (docUrl === 'about:blank') {
+      syncIframeInteractions('iframe-load-about-blank');
+      return;
+    }
     attachIframeLoadingUntilComplete(iframe);
-    stopIframeContentApplyWatcher();
-    deselectElement();
-    applyActiveVariationHtml();
+    if (doc.body && iframeDocMatchesNavigatedSrc(iframe, doc)) {
+      stopIframeContentApplyWatcher();
+      deselectElement();
+      applyActiveVariationHtml();
+    }
+    // Always attempt sync; it has its own readiness checks + retry loop.
     syncIframeInteractions('iframe-load');
   });
 
@@ -4564,7 +4579,7 @@ function createVisualEditorMiddleware(options) {
         }
         html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
         const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const proxyBase = `/api/conversion-proxy?password=${encodeURIComponent(password)}&url=`;
+        const proxyBase = `/api/conversion-proxy?__ve_reload=${Date.now()}&password=${encodeURIComponent(password)}&url=`;
         html = html.replace(
           new RegExp(`(href|action)="${escapedOrigin}(/[^"]*)"`, "g"),
           (match, attr, urlPath) => {
@@ -4577,6 +4592,7 @@ function createVisualEditorMiddleware(options) {
         );
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${popupHideCss}
+${consentAllowCss}
 </head>`);
         }
         html = html.replace(
@@ -4594,7 +4610,7 @@ 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;}}
+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?__ve_reload="+Date.now()+"&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;}}
@@ -4667,6 +4683,9 @@ if(window.fetch){
 }
 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);};}
+function withReloadBust(urlRaw){try{var u=resolveUrl(String(urlRaw||""));if(!u)return null;var p=u.pathname||"";var isRootProxyPath=p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0;if(!isRootProxyPath)return null;u.searchParams.set("__ve_reload",String(Date.now()));return u.toString();}catch(_){return null;}}
+document.addEventListener("click",function(ev){try{var t=ev&&ev.target;if(!t||!t.closest)return;var a=t.closest("a[href]");if(!a)return;var href=a.getAttribute("href")||a.href;var bust=withReloadBust(href);if(bust)a.setAttribute("href",bust);}catch(_){}},true);
+document.addEventListener("submit",function(ev){try{var f=ev&&ev.target;if(!f||!f.getAttribute)return;var act=f.getAttribute("action")||"";var bust=withReloadBust(act);if(bust)f.setAttribute("action",bust);}catch(_){}},true);
 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>")) {
@@ -4675,6 +4694,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;

package/dist/vite.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 
 // src/visualEditorProxyPlugin.ts
 var popupHideCss = `<style id="__ce_popup_hide">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"],.klaviyo-form,.klaviyo-modal,.klaviyo-popup,[class*="klaviyo"],.privy-popup,.privy-flyout,[id*="privy"],#PopupSignupForm,.popup-signup,.newsletter-popup,.newsletter-modal,[class*="newsletter-popup"],[class*="newsletter-modal"],[id*="newsletter-popup"],.email-popup,.email-modal,[class*="email-popup"],[class*="email-modal"],.signup-popup,.signup-modal,[class*="signup-popup"],[class*="signup-modal"],.subscribe-popup,.subscribe-modal,[class*="subscribe-popup"],#mc_embed_signup,.mc-modal,.mc-banner,.mc-closeModal,.omniconvert-popup,[class*="omniconvert"],.optinmonster-popup,[id*="om-"][class*="campaign"],.sumo-overlay,.sumome-overlay,[class*="sumome"],.hustle-modal,.hustle-popup,[class*="hustle-"],.popup-overlay,.popup-modal,.modal-overlay,[class*="exit-intent"],[class*="exitintent"],.wheelio-popup,[class*="wheelio"],.spin-wheel-popup,.justuno-popup,[class*="justuno"],.wisepops,.wisepops-overlay,[class*="wisepops"],.elegantmodal,.elegant-popup,#zipify-popup,[class*="zipify"],.age-gate,.age-verification,.age-popup,[class*="age-gate"],[class*="age-verif"],[class*="popup-overlay"],[class*="modal-overlay"],[class*="popup-backdrop"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important;}body.klaviyo-open,body.modal-open,body.popup-open,body.no-scroll,body.noscroll{overflow:auto!important;position:static!important;}</style>`;
+var consentAllowCss = `<style id="__ce_consent_allow">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"]{display:revert!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;height:auto!important;overflow:visible!important;}</style>`;
 var AI_SYSTEM_PROMPT = `You are a CRO expert. Return JSON only with: hypothesis, mutations, summary. Keep 2-6 precise mutations and only valid selectors from snapshot.`;
 var BRIDGE_SCRIPT = `(function(){if(window.__CONVERSION_BRIDGE_LOADED__)return;window.__CONVERSION_BRIDGE_LOADED__=true;var CHANNEL='conversion-editor';var highlightEl=null;function send(payload){window.parent.postMessage({channel:CHANNEL,payload:payload},'*');}function qs(selector){try{return document.querySelector(selector);}catch(_){return null;}}function getSelector(el){if(!el||el.nodeType!==1)return'';if(el.id)return'#'+CSS.escape(el.id);var parts=[];var current=el;var depth=0;while(current&&current.nodeType===1&&depth<5){var part=current.tagName.toLowerCase();if(current.classList&&current.classList.length){part+='.'+Array.from(current.classList).slice(0,2).map(function(c){return CSS.escape(c);}).join('.');}var parent=current.parentElement;if(parent){var siblings=Array.from(parent.children).filter(function(s){return s.tagName===current.tagName;});if(siblings.length>1)part+=':nth-of-type('+(siblings.indexOf(current)+1)+')';}parts.unshift(part);current=parent;depth+=1;}return parts.join(' > ');}function payloadOf(el){var rect=el.getBoundingClientRect();var style=window.getComputedStyle(el);return{selector:getSelector(el),tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,500),computedStyles:{color:style.color,backgroundColor:style.backgroundColor,fontSize:style.fontSize,fontWeight:style.fontWeight,lineHeight:style.lineHeight,display:style.display},rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}function applyMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.value;break;case'setText':el.textContent=m.value;break;case'setHTML':el.innerHTML=m.value;break;case'setAttribute':if(m.property)el.setAttribute(m.property,m.value);break;case'hide':el.style.display='none';break;case'show':el.style.display='';break;case'insertHTML':if(m.position)el.insertAdjacentHTML(m.position,m.value||'');break;case'insertSection':if(m.position)el.insertAdjacentHTML(m.position,m.sectionHtml||m.value||'');break;case'reorderElement':if(!m.targetSelector)break;var target=qs(m.targetSelector);if(!target||!target.parentNode||!el.parentNode)break;if(m.insertPosition==='before')target.parentNode.insertBefore(el,target);else target.parentNode.insertBefore(el,target.nextSibling);break;default:break;}}function revertMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.previous||'';break;case'setText':el.textContent=m.previous||'';break;case'setHTML':el.innerHTML=m.previous||'';break;case'setAttribute':if(m.property){if(m.previous!=null)el.setAttribute(m.property,m.previous);else el.removeAttribute(m.property);}break;case'hide':case'show':el.style.display=m.previous||'';break;default:break;}}function captureSnapshot(){var elements=Array.from(document.querySelectorAll('h1,h2,h3,p,button,a,input,select,img,section,div')).slice(0,700).map(function(el){var rect=el.getBoundingClientRect();var cs=window.getComputedStyle(el);return{selector:getSelector(el),parentSelector:el.parentElement?getSelector(el.parentElement):null,tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,300),attributes:Array.from(el.attributes||[]).reduce(function(acc,a){acc[a.name]=a.value;return acc;},{}),computedStyles:{color:cs.color,backgroundColor:cs.backgroundColor,fontSize:cs.fontSize,fontWeight:cs.fontWeight,display:cs.display},childrenCount:el.children?el.children.length:0,aboveFold:rect.top<window.innerHeight,depth:(function(){var d=0,p=el.parentElement;while(p&&d<25){d++;p=p.parentElement;}return d;})()};});send({type:'snapshotCaptured',snapshot:{url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},elements:elements}});}function captureTree(){function toNode(el,depth){var rect=el.getBoundingClientRect();var tag=el.tagName.toLowerCase();var type='generic';if(tag==='section')type='section';else if(tag==='img')type='image';else if(tag==='a')type='link';else if(tag==='button')type='button';else if(tag==='form')type='form';else if(['p','h1','h2','h3','h4','h5','h6','span'].indexOf(tag)>=0)type='text';else if(['div','main','article','aside','header','footer','nav'].indexOf(tag)>=0)type='container';var children=Array.from(el.children||[]).slice(0,50).map(function(c){return toNode(c,depth+1);});return{id:getSelector(el),selector:getSelector(el),tagName:tag,label:(el.getAttribute('aria-label')||el.getAttribute('id')||el.className||tag).toString().slice(0,80),type:type,children:children,depth:depth,isAboveFold:rect.top<window.innerHeight,rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}send({type:'pageTreeCaptured',tree:[toNode(document.body,0)]});}window.addEventListener('message',function(e){var msg=e.data;if(!msg||msg.channel!==CHANNEL||!msg.payload)return;var p=msg.payload;switch(p.type){case'ping':send({type:'pong'});break;case'applyMutation':applyMutation(p.mutation);break;case'applyMutationBatch':(p.mutations||[]).forEach(applyMutation);break;case'revert':revertMutation(p.mutation);break;case'clearAllMutations':window.location.reload();break;case'captureSnapshot':captureSnapshot();break;case'validateSelectors':send({type:'selectorsValidated',results:(p.selectors||[]).map(function(s){var el=qs(s);return{selector:s,found:!!el,tagName:el?el.tagName.toLowerCase():null};})});break;case'scrollToElement':case'selectElement':var target=qs(p.selector);if(target){target.scrollIntoView({behavior:'smooth',block:'center'});send({type:'elementSelected',element:payloadOf(target)});}break;case'hoverElement':var h=qs(p.selector);if(h){if(highlightEl)highlightEl.style.outline='';h.style.outline='2px solid #3b82f6';highlightEl=h;}break;case'capturePageTree':captureTree();break;default:break;}});document.addEventListener('click',function(e){var el=e.target;if(!(el instanceof Element))return;send({type:'elementSelected',element:payloadOf(el)});},true);send({type:'bridgeReady'});})();`;
 function buildVvvebEditorHtml() {
@@ -1215,6 +1216,10 @@ function setMode(mode) {
   if (mode === 'navigate') {
     setDragHandleActive(false);
     deselectElement();
+  } else if (mode === 'editor') {
+    // Re-bind interactions immediately when coming back from navigate mode.
+    // This avoids waiting for delayed iframe readiness/load retries.
+    syncIframeInteractions('mode-editor-toggle');
   }
   updateSelectionToolbar();
 }
@@ -2193,7 +2198,7 @@ function loadPage(proxyUrl) {
   resetIframeBindings();
   iframe.style.display = 'block';
   setIframePageLoadingUi(true);
-  iframe.src = proxyUrl;
+  iframe.src = appendIframeReloadBust(proxyUrl);
   startIframeContentApplyWatcher(navGen);
   scheduleDomTreeRefresh();
 }
@@ -3033,7 +3038,7 @@ function renderDomTree(filterRaw) {
 
   function labelFor(el) {
     var tag = el.tagName.toLowerCase();
-    if (el.id) return tag + '#' + el.id.slice(0, 40);
+    if (el.id != null && el.id !== '') return tag + '#' + String(el.id).slice(0, 40);
     var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
     if (cn) {
       var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
@@ -4217,18 +4222,28 @@ window.addEventListener('load', function() {
   var iframe = document.getElementById('iframeId');
   iframe.addEventListener('load', function() {
     if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
+    // New iframe navigation: always drop bindings tied to the previous document.
+    resetIframeBindings();
     var doc = iframe.contentDocument;
-    if (!doc || !doc.body) return;
+    if (!doc) {
+      syncIframeInteractions('iframe-load-no-doc');
+      return;
+    }
     var docUrl = '';
     try { docUrl = String(doc.URL || ''); } catch(_) {}
     // Stale events: src may already be the proxy URL while the document is still
-    // about:blank (e.g. src cleared then reset to force reload).
-    if (docUrl === 'about:blank') return;
-    if (!iframeDocMatchesNavigatedSrc(iframe, doc)) return;
+    // about:blank (e.g. src cleared then reset to force reload). Ask sync path to retry.
+    if (docUrl === 'about:blank') {
+      syncIframeInteractions('iframe-load-about-blank');
+      return;
+    }
     attachIframeLoadingUntilComplete(iframe);
-    stopIframeContentApplyWatcher();
-    deselectElement();
-    applyActiveVariationHtml();
+    if (doc.body && iframeDocMatchesNavigatedSrc(iframe, doc)) {
+      stopIframeContentApplyWatcher();
+      deselectElement();
+      applyActiveVariationHtml();
+    }
+    // Always attempt sync; it has its own readiness checks + retry loop.
     syncIframeInteractions('iframe-load');
   });
 
@@ -4556,7 +4571,7 @@ function createVisualEditorMiddleware(options) {
         }
         html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
         const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const proxyBase = `/api/conversion-proxy?password=${encodeURIComponent(password)}&url=`;
+        const proxyBase = `/api/conversion-proxy?__ve_reload=${Date.now()}&password=${encodeURIComponent(password)}&url=`;
         html = html.replace(
           new RegExp(`(href|action)="${escapedOrigin}(/[^"]*)"`, "g"),
           (match, attr, urlPath) => {
@@ -4569,6 +4584,7 @@ function createVisualEditorMiddleware(options) {
         );
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${popupHideCss}
+${consentAllowCss}
 </head>`);
         }
         html = html.replace(
@@ -4586,7 +4602,7 @@ 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;}}
+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?__ve_reload="+Date.now()+"&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;}}
@@ -4659,6 +4675,9 @@ if(window.fetch){
 }
 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);};}
+function withReloadBust(urlRaw){try{var u=resolveUrl(String(urlRaw||""));if(!u)return null;var p=u.pathname||"";var isRootProxyPath=p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0;if(!isRootProxyPath)return null;u.searchParams.set("__ve_reload",String(Date.now()));return u.toString();}catch(_){return null;}}
+document.addEventListener("click",function(ev){try{var t=ev&&ev.target;if(!t||!t.closest)return;var a=t.closest("a[href]");if(!a)return;var href=a.getAttribute("href")||a.href;var bust=withReloadBust(href);if(bust)a.setAttribute("href",bust);}catch(_){}},true);
+document.addEventListener("submit",function(ev){try{var f=ev&&ev.target;if(!f||!f.getAttribute)return;var act=f.getAttribute("action")||"";var bust=withReloadBust(act);if(bust)f.setAttribute("action",bust);}catch(_){}},true);
 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>")) {
@@ -4667,6 +4686,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",
@@ -32,6 +32,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "bootstrap-icons": "^1.13.1",
     "lucide-react": "^0.562.0",
     "react-colorful": "^5.6.1",
     "zustand": "^5.0.7"