@accelerated-agency/visual-editor 0.2.0 → 0.2.2

package/dist/index.js

@@ -5,6 +5,11 @@ import { persist } from 'zustand/middleware';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HexColorPicker } from 'react-colorful';
 
+var PERSIST_NAME_PREFIX = "conversion-editor-variations-v3-";
+function variationsPersistStorageName(experimentId) {
+  const id = experimentId?.trim();
+  return `${PERSIST_NAME_PREFIX}${id && id.length > 0 ? id : "standalone"}`;
+}
 var VARIATION_COLORS = [
   "#0084D1",
   "#F54A00",
@@ -77,16 +82,12 @@ var useVariationsStore = create()(
         }));
       },
       setActiveVariation: (id) => set({ activeVariationId: id }),
-      addMutationToActive: (mutation) => set((s) => {
-        console.log("addMutationToActive", s.activeVariationId, mutation);
-        return {
-          variations: s.variations.map(
-            (v) => v.id === s.activeVariationId ? { ...v, mutations: [...v.mutations, mutation] } : v
-          ),
-          // Clear redo stack for active variation on new mutation
-          redoStacks: { ...s.redoStacks, [s.activeVariationId]: [] }
-        };
-      }),
+      addMutationToActive: (mutation) => set((s) => ({
+        variations: s.variations.map(
+          (v) => v.id === s.activeVariationId ? { ...v, mutations: [...v.mutations, mutation] } : v
+        ),
+        redoStacks: { ...s.redoStacks, [s.activeVariationId]: [] }
+      })),
       removeLastMutationFromActive: () => set((s) => {
         const active = s.variations.find((v) => v.id === s.activeVariationId);
         const removed = active?.mutations[active.mutations.length - 1];
@@ -149,7 +150,8 @@ var useVariationsStore = create()(
       }
     }),
     {
-      name: "conversion-editor-variations",
+      name: variationsPersistStorageName(void 0),
+      skipHydration: true,
       partialize: (state) => ({
         variations: state.variations,
         activeVariationId: state.activeVariationId
@@ -157,6 +159,15 @@ var useVariationsStore = create()(
     }
   )
 );
+async function hydrateVariationsFromStorage(experimentId) {
+  useVariationsStore.persist.setOptions({
+    name: variationsPersistStorageName(experimentId)
+  });
+  try {
+    await useVariationsStore.persist.rehydrate();
+  } catch {
+  }
+}
 function TopBar({
   connectionStatus,
   onLoadUrl,
@@ -1832,8 +1843,10 @@ 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" }) }) });
 }
 var CHANNEL = "conversion-editor";
+var IFRAME_LOAD_GUARD_MS = 13e4;
 function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong }) {
   const iframeElRef = useRef(null);
+  const loadGuardRef = useRef(null);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const addMutationToActive = useVariationsStore((s) => s.addMutationToActive);
   const [loading, setLoading] = useState(false);
@@ -1876,8 +1889,24 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
   useEffect(() => {
-    if (url) setLoading(true);
+    if (!url) return;
+    setLoading(true);
+    if (loadGuardRef.current) clearTimeout(loadGuardRef.current);
+    loadGuardRef.current = setTimeout(() => {
+      loadGuardRef.current = null;
+      setLoading(false);
+    }, IFRAME_LOAD_GUARD_MS);
+    return () => {
+      if (loadGuardRef.current) clearTimeout(loadGuardRef.current);
+    };
   }, [url]);
+  const clearLoadGuard = useCallback(() => {
+    if (loadGuardRef.current) {
+      clearTimeout(loadGuardRef.current);
+      loadGuardRef.current = null;
+    }
+    setLoading(false);
+  }, []);
   let resolvedUrl;
   if (url.toLowerCase() === "test") {
     resolvedUrl = "/test";
@@ -1908,7 +1937,8 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
         src: resolvedUrl,
         className: "w-full h-full border-0",
         sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
-        onLoad: () => setLoading(false)
+        onLoad: clearLoadGuard,
+        onError: clearLoadGuard
       }
     )
   ] });
@@ -4059,6 +4089,9 @@ function sendToPlatform(type, payload) {
     data: { channel: PLATFORM_CHANNEL, type, payload }
   }));
 }
+function experimentIframeContextKey(exp) {
+  return [exp.experimentId ?? "", exp.pageUrl ?? "", exp.editorPassword ?? ""].join("
");
+}
 function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   const [url, setUrl] = useState("");
   const [password, setPassword] = useState("");
@@ -4071,7 +4104,8 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   );
   const [experimentData, setExperimentData] = useState(null);
   const experimentDataRef = useRef(null);
-  const lastInitialExperimentKeyRef = useRef("");
+  const lastAppliedRunKeyRef = useRef("");
+  const iframeContextKeyRef = useRef("");
   useEffect(() => {
     experimentDataRef.current = experimentData;
   }, [experimentData]);
@@ -4089,7 +4123,6 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   const clearAll = useVariationsStore((s) => s.clearAll);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const selectedElement = useMutationsStore((s) => s.selectedElement);
-  const activeVariationId = useVariationsStore((s) => s.activeVariationId);
   const variations = useVariationsStore((s) => s.variations);
   const removeLastMutationFromActive = useVariationsStore((s) => s.removeLastMutationFromActive);
   const removeMutationsForSelector = useVariationsStore((s) => s.removeMutationsForSelector);
@@ -4140,7 +4173,6 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   }, [embedded, experimentData, toast, buildPlatformVariations]);
   const pingIntervalRef = useRef(null);
   const pongTimeoutRef = useRef(null);
-  const syncDebounceRef = useRef(null);
   const stopHeartbeat = useCallback(() => {
     if (pingIntervalRef.current) {
       clearInterval(pingIntervalRef.current);
@@ -4174,15 +4206,24 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
     },
     [stopHeartbeat, clearAll, setSelectedElement]
   );
+  useEffect(() => {
+    if (initialExperiment) return;
+    let cancelled = false;
+    void (async () => {
+      await hydrateVariationsFromStorage(void 0);
+      if (cancelled) return;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [initialExperiment]);
   useEffect(() => {
     if (!initialExperiment) return;
-    const key = JSON.stringify(initialExperiment);
-    if (lastInitialExperimentKeyRef.current === key) return;
-    lastInitialExperimentKeyRef.current = key;
-    setExperimentData(initialExperiment);
-    if (initialExperiment.pageUrl) {
-      handleLoadUrl(initialExperiment.pageUrl, initialExperiment.editorPassword || void 0);
-    }
+    const runKey = JSON.stringify(initialExperiment);
+    if (lastAppliedRunKeyRef.current === runKey) return;
+    const ctx = experimentIframeContextKey(initialExperiment);
+    const sameIframeContext = iframeContextKeyRef.current !== "" && iframeContextKeyRef.current === ctx;
+    let cancelled = false;
     const sourceVariations = Array.isArray(initialExperiment.variations) ? initialExperiment.variations : [];
     const editorVariations = sourceVariations.map((v, idx) => {
       let mutations = [];
@@ -4202,7 +4243,31 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
         mutations
       };
     });
-    loadExperimentVariations(editorVariations);
+    setExperimentData(initialExperiment);
+    if (sameIframeContext) {
+      void (async () => {
+        await hydrateVariationsFromStorage(initialExperiment.experimentId);
+        if (cancelled) return;
+        loadExperimentVariations(editorVariations);
+        lastAppliedRunKeyRef.current = runKey;
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (initialExperiment.pageUrl) {
+      handleLoadUrl(initialExperiment.pageUrl, initialExperiment.editorPassword || void 0);
+      iframeContextKeyRef.current = ctx;
+    }
+    void (async () => {
+      await hydrateVariationsFromStorage(initialExperiment.experimentId);
+      if (cancelled) return;
+      loadExperimentVariations(editorVariations);
+      lastAppliedRunKeyRef.current = runKey;
+    })();
+    return () => {
+      cancelled = true;
+    };
   }, [initialExperiment, handleLoadUrl, loadExperimentVariations]);
   const handleBridgeReady = useCallback(() => {
     setConnectionStatus("connected");
@@ -4232,33 +4297,44 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
       switch (msg.type) {
         case "load-experiment": {
           const data = msg.payload;
-          setExperimentData(data);
           experimentDataRef.current = data;
-          if (data.pageUrl && !msg.payload?.skipUrlReload) {
-            handleLoadUrl(data.pageUrl, data.editorPassword || void 0);
-          }
-          if (Array.isArray(data.variations)) {
-            const editorVariations = data.variations.map((v, idx) => {
-              let mutations = [];
-              try {
-                const chainSets = JSON.parse(v.changesets || "[]");
-                if (Array.isArray(chainSets) && chainSets.length > 0) {
-                  mutations = convertChainSetsToMutations(chainSets);
-                }
-              } catch {
+          const editorVariations = Array.isArray(data.variations) ? data.variations.map((v, idx) => {
+            let mutations = [];
+            try {
+              const chainSets = JSON.parse(v.changesets || "[]");
+              if (Array.isArray(chainSets) && chainSets.length > 0) {
+                mutations = convertChainSetsToMutations(chainSets);
               }
-              return {
-                id: v._id || `v_${idx}`,
-                platformIid: v.iid,
-                name: v.name,
-                isControl: v.baseline || false,
-                traffic_allocation: v.traffic_allocation,
-                mutations
-              };
-            });
-            loadExperimentVariations(editorVariations);
+            } catch {
+            }
+            return {
+              id: v._id || `v_${idx}`,
+              platformIid: v.iid,
+              name: v.name,
+              isControl: v.baseline || false,
+              traffic_allocation: v.traffic_allocation,
+              mutations
+            };
+          }) : [];
+          setExperimentData(data);
+          const ctx = experimentIframeContextKey(data);
+          let reloadedIframe = false;
+          if (data.pageUrl && !data.skipUrlReload) {
+            if (iframeContextKeyRef.current !== ctx) {
+              handleLoadUrl(data.pageUrl, data.editorPassword || void 0);
+              iframeContextKeyRef.current = ctx;
+              reloadedIframe = true;
+            }
           }
-          toast(`Loaded experiment: ${data.name || "Untitled"}`, "info");
+          void (async () => {
+            await hydrateVariationsFromStorage(data.experimentId);
+            if (Array.isArray(data.variations)) {
+              loadExperimentVariations(editorVariations);
+            }
+            if (reloadedIframe) {
+              toast(`Loaded experiment: ${data.name || "Untitled"}`, "info");
+            }
+          })();
           break;
         }
         case "request-save": {
@@ -4332,27 +4408,6 @@ function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   useEffect(() => {
     sendToBridge({ type: "setMode", mode: interactionMode });
   }, [interactionMode]);
-  useEffect(() => {
-    if (syncDebounceRef.current) {
-      clearTimeout(syncDebounceRef.current);
-      syncDebounceRef.current = null;
-    }
-    if (connectionStatus !== "connected") return;
-    syncDebounceRef.current = setTimeout(() => {
-      const currentActiveMutations = useVariationsStore.getState().getActiveMutations();
-      sendToBridge({ type: "clearAllMutations" });
-      if (currentActiveMutations.length > 0) {
-        sendToBridge({ type: "applyMutationBatch", mutations: currentActiveMutations });
-      }
-      syncDebounceRef.current = null;
-    }, 350);
-    return () => {
-      if (syncDebounceRef.current) {
-        clearTimeout(syncDebounceRef.current);
-        syncDebounceRef.current = null;
-      }
-    };
-  }, [connectionStatus, activeVariationId, experimentData?.experimentId]);
   useEffect(() => {
     const handler = (e) => {
       const meta = e.metaKey || e.ctrlKey;
@@ -4555,7 +4610,7 @@ function PlatformVisualEditor({
   renderLoading,
   renderError
 }) {
-  console.log(experiment);
+  console.log("experiment", experiment);
   const [editorReady, setEditorReady] = useState(false);
   const [dirty, setDirty] = useState(false);
   const dirtyRef = useRef(false);
@@ -4769,7 +4824,6 @@ function PlatformVisualEditorV2({
   renderLoading,
   renderError
 }) {
-  console.log(experiment);
   const iframeRef = useRef(null);
   const [editorReady, setEditorReady] = useState(false);
   const [dirty, setDirty] = useState(false);
@@ -4959,4 +5013,4 @@ function PlatformVisualEditorV2({
   ] });
 }
 
-export { EditorShell, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, useToast };
+export { EditorShell, PlatformVisualEditor, PlatformVisualEditorV2, ToastProvider, hydrateVariationsFromStorage, useToast, variationsPersistStorageName };

package/dist/vite.cjs

@@ -1800,7 +1800,7 @@ function createVisualEditorMiddleware(options) {
     }
   }
   return async (req, res, next) => {
-    const pathname = (req.url || "").split("?")[0];
+    let pathname = (req.url || "").split("?")[0];
     if (pathname === "/bridge.js") {
       res.removeHeader("X-Frame-Options");
       res.setHeader("Content-Type", "application/javascript; charset=utf-8");
@@ -1937,8 +1937,8 @@ function createVisualEditorMiddleware(options) {
       return;
     }
     if (pathname.startsWith("/api/proxy")) {
-      const rewritten = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
-      req.url = rewritten;
+      req.url = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
+      pathname = (req.url || "").split("?")[0];
     }
     if (pathname.startsWith("/api/conversion-proxy")) {
       try {
@@ -2001,17 +2001,39 @@ function createVisualEditorMiddleware(options) {
           }
           if (chunks.length > 0) requestBody = Buffer.concat(chunks);
         }
-        const upstream = await fetch(targetUrl, {
-          method,
-          headers: fetchHeaders,
-          body: requestBody ? Buffer.from(requestBody) : null,
-          redirect: "follow"
-        });
+        const upstreamTimeoutMs = 12e4;
+        const ac = new AbortController();
+        const timeoutId = setTimeout(() => ac.abort(), upstreamTimeoutMs);
+        let upstream;
+        try {
+          upstream = await fetch(targetUrl, {
+            method,
+            headers: fetchHeaders,
+            body: requestBody ? Buffer.from(requestBody) : null,
+            redirect: "follow",
+            signal: ac.signal
+          });
+        } catch (fetchErr) {
+          clearTimeout(timeoutId);
+          const aborted = fetchErr?.name === "AbortError";
+          res.statusCode = aborted ? 504 : 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: aborted ? `Upstream request timed out after ${upstreamTimeoutMs / 1e3}s` : fetchErr?.message || "Upstream fetch failed"
+            })
+          );
+          return;
+        }
+        clearTimeout(timeoutId);
         const responseContentType = upstream.headers.get("content-type") || "";
         const isHtmlResponse = responseContentType.includes("text/html");
+        const secFetchMode = (req.headers?.["sec-fetch-mode"] || "").toLowerCase();
         const secFetchDest = (req.headers?.["sec-fetch-dest"] || "").toLowerCase();
-        const isNavigationRequest = secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "";
-        if (!isHtmlResponse || !isNavigationRequest) {
+        const isLikelyDocumentNavigation = secFetchMode === "navigate" || secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "nested-document" || secFetchDest === "frame";
+        const isLikelyFetchOrXHR = secFetchDest === "empty" && (secFetchMode === "cors" || secFetchMode === "same-origin" || secFetchMode === "no-cors");
+        const shouldInjectHtmlBridge = isHtmlResponse && (isLikelyDocumentNavigation || !isLikelyFetchOrXHR);
+        if (!isHtmlResponse || !shouldInjectHtmlBridge) {
           const binary = Buffer.from(await upstream.arrayBuffer());
           res.statusCode = upstream.status;
           if (responseContentType) {
@@ -2044,7 +2066,7 @@ 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&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        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>`;
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${runtimeProxyScript}
 </head>`);

package/dist/vite.js

@@ -1792,7 +1792,7 @@ function createVisualEditorMiddleware(options) {
     }
   }
   return async (req, res, next) => {
-    const pathname = (req.url || "").split("?")[0];
+    let pathname = (req.url || "").split("?")[0];
     if (pathname === "/bridge.js") {
       res.removeHeader("X-Frame-Options");
       res.setHeader("Content-Type", "application/javascript; charset=utf-8");
@@ -1929,8 +1929,8 @@ function createVisualEditorMiddleware(options) {
       return;
     }
     if (pathname.startsWith("/api/proxy")) {
-      const rewritten = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
-      req.url = rewritten;
+      req.url = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
+      pathname = (req.url || "").split("?")[0];
     }
     if (pathname.startsWith("/api/conversion-proxy")) {
       try {
@@ -1993,17 +1993,39 @@ function createVisualEditorMiddleware(options) {
           }
           if (chunks.length > 0) requestBody = Buffer.concat(chunks);
         }
-        const upstream = await fetch(targetUrl, {
-          method,
-          headers: fetchHeaders,
-          body: requestBody ? Buffer.from(requestBody) : null,
-          redirect: "follow"
-        });
+        const upstreamTimeoutMs = 12e4;
+        const ac = new AbortController();
+        const timeoutId = setTimeout(() => ac.abort(), upstreamTimeoutMs);
+        let upstream;
+        try {
+          upstream = await fetch(targetUrl, {
+            method,
+            headers: fetchHeaders,
+            body: requestBody ? Buffer.from(requestBody) : null,
+            redirect: "follow",
+            signal: ac.signal
+          });
+        } catch (fetchErr) {
+          clearTimeout(timeoutId);
+          const aborted = fetchErr?.name === "AbortError";
+          res.statusCode = aborted ? 504 : 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: aborted ? `Upstream request timed out after ${upstreamTimeoutMs / 1e3}s` : fetchErr?.message || "Upstream fetch failed"
+            })
+          );
+          return;
+        }
+        clearTimeout(timeoutId);
         const responseContentType = upstream.headers.get("content-type") || "";
         const isHtmlResponse = responseContentType.includes("text/html");
+        const secFetchMode = (req.headers?.["sec-fetch-mode"] || "").toLowerCase();
         const secFetchDest = (req.headers?.["sec-fetch-dest"] || "").toLowerCase();
-        const isNavigationRequest = secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "";
-        if (!isHtmlResponse || !isNavigationRequest) {
+        const isLikelyDocumentNavigation = secFetchMode === "navigate" || secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "nested-document" || secFetchDest === "frame";
+        const isLikelyFetchOrXHR = secFetchDest === "empty" && (secFetchMode === "cors" || secFetchMode === "same-origin" || secFetchMode === "no-cors");
+        const shouldInjectHtmlBridge = isHtmlResponse && (isLikelyDocumentNavigation || !isLikelyFetchOrXHR);
+        if (!isHtmlResponse || !shouldInjectHtmlBridge) {
           const binary = Buffer.from(await upstream.arrayBuffer());
           res.statusCode = upstream.status;
           if (responseContentType) {
@@ -2036,7 +2058,7 @@ 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&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        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>`;
         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.0",
+  "version": "0.2.2",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",