@accelerated-agency/visual-editor 0.1.2 → 0.1.4

package/dist/index.js

@@ -1867,7 +1867,7 @@ import { useState as useState6, useCallback as useCallback6, useEffect as useEff
 import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var CHANNEL = "conversion-editor";
-function IframeCanvas({ url, password, onBridgeReady, onPong }) {
+function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong }) {
   const iframeElRef = useRef4(null);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const addMutationToActive = useVariationsStore((s) => s.addMutationToActive);
@@ -1917,7 +1917,7 @@ function IframeCanvas({ url, password, onBridgeReady, onPong }) {
   if (url.toLowerCase() === "test") {
     resolvedUrl = "/test";
   } else if (url.startsWith("http")) {
-    resolvedUrl = `/api/proxy?password=${encodeURIComponent(password || "")}&url=${encodeURIComponent(url)}`;
+    resolvedUrl = `${proxyBaseUrl}/api/proxy?password=${encodeURIComponent(password || "")}&url=${encodeURIComponent(url)}`;
   } else {
     resolvedUrl = url;
   }
@@ -2185,7 +2185,7 @@ var VIEWPORT_LABELS = {
   tablet: "768 \xD7 1024",
   mobile: "375 \xD7 812"
 };
-function CanvasArea({ url, password, viewport, onBridgeReady, onPong }) {
+function CanvasArea({ url, password, viewport, proxyBaseUrl, onBridgeReady, onPong }) {
   const iframeWidth = VIEWPORT_WIDTHS[viewport];
   const isConstrained = viewport !== "desktop";
   const [dragOver, setDragOver] = useState6(false);
@@ -2289,7 +2289,7 @@ function CanvasArea({ url, password, viewport, onBridgeReady, onPong }) {
               maxWidth: "100%",
               boxShadow: isConstrained ? "0 4px 24px rgba(0,0,0,0.1)" : "none"
             },
-            children: /* @__PURE__ */ jsx6(IframeCanvas, { url, password, onBridgeReady, onPong })
+            children: /* @__PURE__ */ jsx6(IframeCanvas, { url, password, proxyBaseUrl, onBridgeReady, onPong })
           }
         ) }),
         dragOver && draggedSection && /* @__PURE__ */ jsx6(
@@ -4136,7 +4136,7 @@ function sendToPlatform(type, payload) {
     data: { channel: PLATFORM_CHANNEL, type, payload }
   }));
 }
-function EditorShell({ initialExperiment, embeddedMode }) {
+function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   const [url, setUrl] = useState12("");
   const [password, setPassword] = useState12("");
   const [connectionStatus, setConnectionStatus] = useState12("disconnected");
@@ -4590,6 +4590,7 @@ function EditorShell({ initialExperiment, embeddedMode }) {
           url,
           password,
           viewport,
+          proxyBaseUrl,
           onBridgeReady: handleBridgeReady,
           onPong: handlePong
         }
@@ -4605,6 +4606,7 @@ import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function PlatformVisualEditor({
   channel = "conversion-platform",
   embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
+  proxyBaseUrl = typeof import.meta !== "undefined" && import.meta.env?.VITE_API_BASE_URL || "",
   className = "fixed inset-0 z-[9999] flex flex-col bg-white",
   editorClassName = "flex-1 min-h-0",
   showHeader = true,
@@ -4816,7 +4818,7 @@ function PlatformVisualEditor({
         ) : null
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx13("div", { className: editorClassName, children: /* @__PURE__ */ jsx13(ToastProvider, { children: /* @__PURE__ */ jsx13(EditorShell, { initialExperiment: experiment, embeddedMode: true }) }) })
+    /* @__PURE__ */ jsx13("div", { className: editorClassName, children: /* @__PURE__ */ jsx13(ToastProvider, { children: /* @__PURE__ */ jsx13(EditorShell, { initialExperiment: experiment, embeddedMode: true, proxyBaseUrl }) }) })
   ] });
 }
 

package/dist/vite.js

@@ -1766,246 +1766,264 @@ var getDefaultAnthropicApiKey = () => {
     return "";
   }
 };
-function visualEditorProxyPlugin(options) {
+function createVisualEditorMiddleware(options) {
   const anthropicApiKey = options?.anthropicApiKey || getDefaultAnthropicApiKey();
   const enableGenerateTestApi = options?.enableGenerateTestApi ?? true;
-  return {
-    name: "visual-editor-proxy",
-    configureServer(server) {
-      server.middlewares.use("/bridge.js", (_req, res) => {
-        res.setHeader("Content-Type", "application/javascript; charset=utf-8");
-        res.setHeader("Cache-Control", "no-store");
-        res.end(BRIDGE_SCRIPT);
-      });
-      server.middlewares.use("/vvveb-editor", (_req, res) => {
-        res.setHeader("Content-Type", "text/html; charset=utf-8");
-        res.setHeader("Cache-Control", "no-store");
-        res.setHeader("X-Frame-Options", "SAMEORIGIN");
-        res.end(buildVvvebEditorHtml());
-      });
-      if (enableGenerateTestApi) {
-        server.middlewares.use("/api/generate-test", async (req, res) => {
-          if (req.method === "OPTIONS") {
-            res.setHeader("Access-Control-Allow-Origin", "*");
-            res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
-            res.setHeader("Access-Control-Allow-Headers", "Content-Type");
-            res.statusCode = 204;
-            res.end();
-            return;
-          }
-          if (req.method !== "POST") {
-            res.statusCode = 405;
-            res.end(JSON.stringify({ error: "Method not allowed" }));
-            return;
-          }
-          if (!anthropicApiKey) {
-            res.statusCode = 500;
-            res.setHeader("Content-Type", "application/json");
-            res.end(
-              JSON.stringify({ error: "ANTHROPIC_API_KEY is not configured" })
-            );
-            return;
-          }
-          try {
-            const chunks = [];
-            for await (const chunk of req) chunks.push(chunk);
-            const body = JSON.parse(Buffer.concat(chunks).toString());
-            if (!body.prompt || !body.pageSnapshot) {
-              res.statusCode = 400;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ error: "Missing prompt or pageSnapshot" }));
-              return;
-            }
-            const parts = [
-              "## Optimization Goal",
-              body.prompt,
-              "",
-              "## Page Snapshot",
-              JSON.stringify(body.pageSnapshot, null, 2)
-            ];
-            const anthropicRes = await fetch("https://api.anthropic.com/v1/messages", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                "x-api-key": anthropicApiKey,
-                "anthropic-version": "2023-06-01"
-              },
-              body: JSON.stringify({
-                model: "claude-sonnet-4-20250514",
-                max_tokens: 4096,
-                system: AI_SYSTEM_PROMPT,
-                messages: [{ role: "user", content: parts.join("\n") }]
-              })
-            });
-            if (!anthropicRes.ok) {
-              const errText = await anthropicRes.text();
-              res.statusCode = 502;
-              res.setHeader("Content-Type", "application/json");
-              res.end(
-                JSON.stringify({
-                  error: `Anthropic API returned ${anthropicRes.status}`,
-                  detail: errText
-                })
-              );
-              return;
-            }
-            const anthropicData = await anthropicRes.json();
-            const textBlock = anthropicData.content?.find((b) => b.type === "text");
-            if (!textBlock?.text) {
-              res.statusCode = 502;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ error: "No text in Anthropic response" }));
-              return;
-            }
-            let cleaned = textBlock.text.trim();
-            if (cleaned.startsWith("```")) {
-              cleaned = cleaned.replace(/^```[a-zA-Z]*\n?/, "").replace(/\n?```\s*$/, "").trim();
-            }
-            let parsed;
-            try {
-              parsed = JSON.parse(cleaned);
-            } catch {
-              res.statusCode = 502;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ error: "Invalid JSON from Claude", raw: cleaned }));
-              return;
-            }
-            const now = Date.now();
-            if (parsed.mutations) {
-              parsed.mutations = parsed.mutations.map((m, i) => ({
-                ...m,
-                id: m.id || `ai_mut_${String(i + 1).padStart(3, "0")}`,
-                timestamp: now + i
-              }));
-            }
-            res.setHeader("Content-Type", "application/json");
-            res.setHeader("Access-Control-Allow-Origin", "*");
-            res.end(JSON.stringify(parsed));
-          } catch (err) {
-            res.statusCode = 500;
-            res.setHeader("Content-Type", "application/json");
-            res.end(JSON.stringify({ error: err.message }));
-          }
-        });
+  return async (req, res, next) => {
+    const pathname = (req.url || "").split("?")[0];
+    if (pathname === "/bridge.js") {
+      res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      res.end(BRIDGE_SCRIPT);
+      return;
+    }
+    if (pathname === "/vvveb-editor") {
+      res.setHeader("Content-Type", "text/html; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      res.setHeader("X-Frame-Options", "SAMEORIGIN");
+      res.end(buildVvvebEditorHtml());
+      return;
+    }
+    if (pathname === "/api/generate-test" && enableGenerateTestApi) {
+      if (req.method === "OPTIONS") {
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+        res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+        res.statusCode = 204;
+        res.end();
+        return;
+      }
+      if (req.method !== "POST") {
+        res.statusCode = 405;
+        res.end(JSON.stringify({ error: "Method not allowed" }));
+        return;
+      }
+      if (!anthropicApiKey) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({ error: "ANTHROPIC_API_KEY is not configured" })
+        );
+        return;
       }
-      server.middlewares.use("/api/proxy", async (req, res) => {
+      try {
+        const chunks = [];
+        for await (const chunk of req) chunks.push(chunk);
+        const body = JSON.parse(Buffer.concat(chunks).toString());
+        if (!body.prompt || !body.pageSnapshot) {
+          res.statusCode = 400;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "Missing prompt or pageSnapshot" }));
+          return;
+        }
+        const parts = [
+          "## Optimization Goal",
+          body.prompt,
+          "",
+          "## Page Snapshot",
+          JSON.stringify(body.pageSnapshot, null, 2)
+        ];
+        const anthropicRes = await fetch("https://api.anthropic.com/v1/messages", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": anthropicApiKey,
+            "anthropic-version": "2023-06-01"
+          },
+          body: JSON.stringify({
+            model: "claude-sonnet-4-20250514",
+            max_tokens: 4096,
+            system: AI_SYSTEM_PROMPT,
+            messages: [{ role: "user", content: parts.join("\n") }]
+          })
+        });
+        if (!anthropicRes.ok) {
+          const errText = await anthropicRes.text();
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: `Anthropic API returned ${anthropicRes.status}`,
+              detail: errText
+            })
+          );
+          return;
+        }
+        const anthropicData = await anthropicRes.json();
+        const textBlock = anthropicData.content?.find((b) => b.type === "text");
+        if (!textBlock?.text) {
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "No text in Anthropic response" }));
+          return;
+        }
+        let cleaned = textBlock.text.trim();
+        if (cleaned.startsWith("```")) {
+          cleaned = cleaned.replace(/^```[a-zA-Z]*\n?/, "").replace(/\n?```\s*$/, "").trim();
+        }
+        let parsed;
         try {
-          const url = new URL(req.url || "", "http://localhost");
-          const targetUrl = url.searchParams.get("url");
-          const password = url.searchParams.get("password") || "";
-          if (!targetUrl) {
-            res.statusCode = 400;
-            res.end(JSON.stringify({ error: "Missing url parameter" }));
-            return;
-          }
-          const parsed = new URL(targetUrl);
-          const origin = parsed.origin;
-          const method = (req.method || "GET").toUpperCase();
-          const headers = {
-            "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
-            Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
-          };
-          let cookieHeader = "";
-          if (password) {
-            const passResp = await fetch(`${origin}/password`, {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/x-www-form-urlencoded",
-                ...headers
-              },
-              body: `form_type=storefront_password&utf8=%E2%9C%93&password=${encodeURIComponent(
-                password
-              )}`,
-              redirect: "manual"
-            });
-            const setCookies = passResp.headers.getSetCookie?.() || [];
-            cookieHeader = setCookies.map((c) => c.split(";")[0]).join("; ");
-          }
-          const fetchHeaders = { ...headers };
-          Object.entries(req.headers || {}).forEach(([key, value]) => {
-            const lowerKey = key.toLowerCase();
-            if (!value || [
-              "host",
-              "connection",
-              "content-length",
-              "accept-encoding",
-              "origin",
-              "referer"
-            ].includes(lowerKey)) {
-              return;
-            }
-            fetchHeaders[key] = Array.isArray(value) ? value.join(",") : String(value);
-          });
-          fetchHeaders.Origin = origin;
-          fetchHeaders.Referer = targetUrl;
-          if (cookieHeader) {
-            fetchHeaders.Cookie = fetchHeaders.Cookie ? `${fetchHeaders.Cookie}; ${cookieHeader}` : cookieHeader;
-          }
-          let requestBody;
-          if (!["GET", "HEAD"].includes(method)) {
-            const chunks = [];
-            for await (const chunk of req) {
-              chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
-            }
-            if (chunks.length > 0) requestBody = Buffer.concat(chunks);
-          }
-          const upstream = await fetch(targetUrl, {
-            method,
-            headers: fetchHeaders,
-            body: requestBody ? Buffer.from(requestBody) : null,
-            redirect: "follow"
+          parsed = JSON.parse(cleaned);
+        } catch {
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "Invalid JSON from Claude", raw: cleaned }));
+          return;
+        }
+        const now = Date.now();
+        if (parsed.mutations) {
+          parsed.mutations = parsed.mutations.map((m, i) => ({
+            ...m,
+            id: m.id || `ai_mut_${String(i + 1).padStart(3, "0")}`,
+            timestamp: now + i
+          }));
+        }
+        res.setHeader("Content-Type", "application/json");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.end(JSON.stringify(parsed));
+      } catch (err) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+    if (pathname.startsWith("/api/proxy")) {
+      try {
+        const url = new URL(req.url || "", "http://localhost");
+        const targetUrl = url.searchParams.get("url");
+        const password = url.searchParams.get("password") || "";
+        if (!targetUrl) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: "Missing url parameter" }));
+          return;
+        }
+        const parsed = new URL(targetUrl);
+        const origin = parsed.origin;
+        const method = (req.method || "GET").toUpperCase();
+        const headers = {
+          "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
+          Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
+        };
+        let cookieHeader = "";
+        if (password) {
+          const passResp = await fetch(`${origin}/password`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+              ...headers
+            },
+            body: `form_type=storefront_password&utf8=%E2%9C%93&password=${encodeURIComponent(
+              password
+            )}`,
+            redirect: "manual"
           });
-          const responseContentType = upstream.headers.get("content-type") || "";
-          const isHtmlResponse = responseContentType.includes("text/html");
-          if (!isHtmlResponse) {
-            const binary = Buffer.from(await upstream.arrayBuffer());
-            res.statusCode = upstream.status;
-            if (responseContentType) {
-              res.setHeader("Content-Type", responseContentType);
-            }
-            res.setHeader("Access-Control-Allow-Origin", "*");
-            res.end(binary);
-            return;
-          }
-          let html = await upstream.text();
-          if (html.includes("form_type") && html.includes("storefront_password")) {
-            res.statusCode = 401;
-            res.end(JSON.stringify({ error: "Password authentication failed." }));
+          const setCookies = passResp.headers.getSetCookie?.() || [];
+          cookieHeader = setCookies.map((c) => c.split(";")[0]).join("; ");
+        }
+        const fetchHeaders = { ...headers };
+        Object.entries(req.headers || {}).forEach(([key, value]) => {
+          const lowerKey = key.toLowerCase();
+          if (!value || [
+            "host",
+            "connection",
+            "content-length",
+            "accept-encoding",
+            "origin",
+            "referer"
+          ].includes(lowerKey)) {
             return;
           }
-          html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
-          const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          const proxyBase = `/api/proxy?password=${encodeURIComponent(password)}&url=`;
-          html = html.replace(
-            new RegExp(`(href|src|action)="${escapedOrigin}(/[^"]*)"`, "g"),
-            (_, attr, urlPath) => `${attr}="${proxyBase}${encodeURIComponent(origin + urlPath)}"`
-          );
-          if (html.includes("</head>")) {
-            html = html.replace("</head>", `${popupHideCss}
-</head>`);
+          fetchHeaders[key] = Array.isArray(value) ? value.join(",") : String(value);
+        });
+        fetchHeaders.Origin = origin;
+        fetchHeaders.Referer = targetUrl;
+        if (cookieHeader) {
+          fetchHeaders.Cookie = fetchHeaders.Cookie ? `${fetchHeaders.Cookie}; ${cookieHeader}` : cookieHeader;
+        }
+        let requestBody;
+        if (!["GET", "HEAD"].includes(method)) {
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
           }
-          const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var PROXY_BASE=${JSON.stringify(`/api/proxy?password=${encodeURIComponent(password)}&url=`)};function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}function toProxiedUrl(raw){if(isSkippable(raw))return raw;try{if(raw.startsWith("/api/proxy?"))return raw;var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return PROXY_BASE+encodeURIComponent(abs.toString());}catch(_){return raw;}}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{if(typeof input==="string"){input=toProxiedUrl(input);}else if(input&&input.url){var next=toProxiedUrl(input.url);if(next!==input.url){input=new Request(next,input);}}}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{arguments[1]=toProxiedUrl(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{return _beacon(toProxiedUrl(url),data);}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>`);
-          } else {
-            html = runtimeProxyScript + html;
+          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 responseContentType = upstream.headers.get("content-type") || "";
+        const isHtmlResponse = responseContentType.includes("text/html");
+        if (!isHtmlResponse) {
+          const binary = Buffer.from(await upstream.arrayBuffer());
+          res.statusCode = upstream.status;
+          if (responseContentType) {
+            res.setHeader("Content-Type", responseContentType);
           }
-          const bridgeScript = `<script src="/bridge.js"></script>`;
-          html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
-</body>`) : html + bridgeScript;
-          res.setHeader("Content-Type", "text/html; charset=utf-8");
           res.setHeader("Access-Control-Allow-Origin", "*");
-          res.setHeader("X-Frame-Options", "SAMEORIGIN");
-          res.end(html);
-        } catch (err) {
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: err.message }));
+          res.end(binary);
+          return;
         }
-      });
+        let html = await upstream.text();
+        if (html.includes("form_type") && html.includes("storefront_password")) {
+          res.statusCode = 401;
+          res.end(JSON.stringify({ error: "Password authentication failed." }));
+          return;
+        }
+        html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
+        const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const proxyBase = `/api/proxy?password=${encodeURIComponent(password)}&url=`;
+        html = html.replace(
+          new RegExp(`(href|src|action)="${escapedOrigin}(/[^"]*)"`, "g"),
+          (_, attr, urlPath) => `${attr}="${proxyBase}${encodeURIComponent(origin + urlPath)}"`
+        );
+        if (html.includes("</head>")) {
+          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 PROXY_BASE=${JSON.stringify(`/api/proxy?password=${encodeURIComponent(password)}&url=`)};function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}function toProxiedUrl(raw){if(isSkippable(raw))return raw;try{if(raw.startsWith("/api/proxy?"))return raw;var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return PROXY_BASE+encodeURIComponent(abs.toString());}catch(_){return raw;}}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{if(typeof input==="string"){input=toProxiedUrl(input);}else if(input&&input.url){var next=toProxiedUrl(input.url);if(next!==input.url){input=new Request(next,input);}}}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{arguments[1]=toProxiedUrl(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{return _beacon(toProxiedUrl(url),data);}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>`);
+        } else {
+          html = runtimeProxyScript + html;
+        }
+        const bridgeScript = `<script src="/bridge.js"></script>`;
+        html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
+</body>`) : html + bridgeScript;
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("X-Frame-Options", "SAMEORIGIN");
+        res.end(html);
+      } catch (err) {
+        res.statusCode = 500;
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+    next();
+  };
+}
+function visualEditorProxyPlugin(options) {
+  const mw = createVisualEditorMiddleware(options);
+  return {
+    name: "visual-editor-proxy",
+    generateBundle() {
+      this.emitFile({ type: "asset", fileName: "bridge.js", source: BRIDGE_SCRIPT });
+      this.emitFile({ type: "asset", fileName: "vvveb-editor/index.html", source: buildVvvebEditorHtml() });
+    },
+    configureServer(server) {
+      server.middlewares.use(mw);
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use(mw);
     }
   };
 }
 export {
+  createVisualEditorMiddleware,
   visualEditorProxyPlugin
 };

package/package.json

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