@accelerated-agency/visual-editor 0.5.0 → 0.5.1

package/dist/index.js

@@ -5012,15 +5012,15 @@ 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"
+var AI_LOCAL_STORAGE_PREFIX = "conversion-vvveb-v2::";
+var DEVICE_PRESETS = {
+  desktop: { label: "Desktop", width: 1440, height: 1024, device: "desktop" },
+  tablet: { label: "iPad", width: 768, height: 1024, device: "tablet" },
+  mobile: { label: "iPhone 13", width: 390, height: 844, device: "mobile" },
+  "galaxy-s22": { label: "Galaxy S22", width: 360, height: 780, device: "mobile" },
+  "iphone-7": { label: "iPhone 7", width: 375, height: 667, device: "mobile" },
+  "galaxy-j1": { label: "Galaxy J1", width: 360, height: 640, device: "mobile" },
+  responsive: { label: "Responsive", width: 1280, height: 800, device: "desktop" }
 };
 function fingerprint(value) {
   let hash = 5381;
@@ -5029,9 +5029,17 @@ function fingerprint(value) {
   }
   return (hash >>> 0).toString(36);
 }
+function activeVariationStorageKeyFromExperiment(experiment) {
+  const experimentId = String(experiment?.experimentId || "");
+  const pageUrl = String(experiment?.pageUrl || "");
+  const key = `${AI_LOCAL_STORAGE_PREFIX}activeVar:${experimentId}:${pageUrl}`;
+  if (key === `${AI_LOCAL_STORAGE_PREFIX}activeVar::`) return null;
+  return key;
+}
 function PlatformAiEditor({
   embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
   proxyBaseUrl = "",
+  trackingMarkers = [],
   chatComponent,
   className = "fixed inset-0 z-[9999] flex flex-col bg-white",
   editorClassName = "flex-1 min-h-0",
@@ -5061,7 +5069,20 @@ function PlatformAiEditor({
   const [localActiveVariationId, setLocalActiveVariationId] = useState(null);
   const [isSaving, setIsSaving] = useState(false);
   const [isIframeLoading, setIsIframeLoading] = useState(false);
-  const [viewport, setViewport] = useState("desktop");
+  const [currentDevice, setCurrentDevice] = useState("desktop");
+  const [viewportWidth, setViewportWidth] = useState(1440);
+  const [viewportHeight, setViewportHeight] = useState(1024);
+  const [viewportZoom, setViewportZoom] = useState(1);
+  const [viewportPreset, setViewportPreset] = useState("desktop");
+  const [isViewportMenuOpen, setIsViewportMenuOpen] = useState(false);
+  const [menuWidth, setMenuWidth] = useState("1440");
+  const [menuHeight, setMenuHeight] = useState("1024");
+  const [menuZoom, setMenuZoom] = useState("100");
+  const [iframePanelWidth, setIframePanelWidth] = useState(null);
+  const iframePanelRef = useRef(null);
+  const viewportMenuRef = useRef(null);
+  const viewportMenuButtonRef = useRef(null);
+  const viewportLabelRef = useRef(null);
   useEffect(() => {
     window[embeddedGlobalKey] = true;
     return () => {
@@ -5074,6 +5095,32 @@ function PlatformAiEditor({
   const variations = experiment?.variations ?? [];
   const activeVariationId = controlledActiveVariationId ?? localActiveVariationId;
   const setActiveVariationId = controlledSetActiveVariationId ?? setLocalActiveVariationId;
+  const persistedVariationStorageKey = useMemo(
+    () => activeVariationStorageKeyFromExperiment(experiment),
+    [experiment?.experimentId, experiment?.pageUrl]
+  );
+  const readPersistedVariationId = useCallback(() => {
+    if (!persistedVariationStorageKey) return null;
+    try {
+      return sessionStorage.getItem(persistedVariationStorageKey);
+    } catch {
+      return null;
+    }
+  }, [persistedVariationStorageKey]);
+  const persistVariationId = useCallback(
+    (variationId) => {
+      if (!persistedVariationStorageKey) return;
+      try {
+        if (variationId) {
+          sessionStorage.setItem(persistedVariationStorageKey, variationId);
+        } else {
+          sessionStorage.removeItem(persistedVariationStorageKey);
+        }
+      } catch {
+      }
+    },
+    [persistedVariationStorageKey]
+  );
   useEffect(() => {
     if (!variations.length) {
       setActiveVariationId(null);
@@ -5081,10 +5128,12 @@ function PlatformAiEditor({
     }
     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;
+      const stored = readPersistedVariationId();
+      if (stored && variations.some((variation) => variation._id === stored)) return stored;
+      const firstNonBaseline = variations.find((variation) => !variation.baseline);
+      return firstNonBaseline?._id ?? variations[0]._id;
     });
-  }, [variations]);
+  }, [variations, readPersistedVariationId]);
   const activeVariation = useMemo(
     () => variations.find((variation) => variation._id === activeVariationId) ?? null,
     [variations, activeVariationId]
@@ -5105,18 +5154,52 @@ function PlatformAiEditor({
     () => `ai-iframe-${activeVariationId ?? "default"}-${cssFingerprint}-${jsFingerprint}`,
     [activeVariationId, cssFingerprint, jsFingerprint]
   );
-  const iframeWidth = AI_VIEWPORT_WIDTH[viewport];
+  useEffect(() => {
+    const panel = iframePanelRef.current;
+    if (!panel) return;
+    const updateWidth = () => {
+      setIframePanelWidth(panel.clientWidth);
+    };
+    updateWidth();
+    const observer = new ResizeObserver(() => {
+      updateWidth();
+    });
+    observer.observe(panel);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const viewportFitZoom = useMemo(() => {
+    const available = iframePanelWidth ? Math.max(260, iframePanelWidth - 24) : viewportWidth;
+    if (!viewportWidth || viewportWidth <= 0) return 1;
+    return Math.min(1, available / viewportWidth);
+  }, [viewportWidth, iframePanelWidth]);
+  const appliedViewportZoom = useMemo(() => {
+    let z = Number(viewportZoom);
+    if (!Number.isFinite(z) || z <= 0) z = 1;
+    z = Math.max(0.25, Math.min(2, z));
+    return Math.min(z, viewportFitZoom);
+  }, [viewportZoom, viewportFitZoom]);
+  const viewportLabel = useMemo(
+    () => `${viewportWidth}x${viewportHeight} \xB7 ${Math.round(appliedViewportZoom * 100)}%`,
+    [viewportWidth, viewportHeight, appliedViewportZoom]
+  );
   const editorSrc = useMemo(() => {
     const pageUrl = experiment?.pageUrl;
     if (!pageUrl) return "about:blank";
     const safeBaseUrl = normalizeProxyBaseUrl(proxyBaseUrl);
-    const query = new URLSearchParams({
+    const safeTrackingMarkers = Array.isArray(trackingMarkers) ? trackingMarkers.filter((marker) => typeof marker === "string" && marker.trim().length > 0) : [];
+    const queryParams = new URLSearchParams({
       password: experiment?.editorPassword ?? "",
       url: pageUrl
-    }).toString();
+    });
+    if (safeTrackingMarkers.length) {
+      queryParams.set("trackingMarkers", JSON.stringify(safeTrackingMarkers));
+    }
+    const query = queryParams.toString();
     const previewPath = `/api/conversion-proxy?${query}`;
     return safeBaseUrl ? `${safeBaseUrl}${previewPath}` : previewPath;
-  }, [proxyBaseUrl, experiment?.pageUrl, experiment?.editorPassword]);
+  }, [proxyBaseUrl, experiment?.pageUrl, experiment?.editorPassword, trackingMarkers]);
   const postAiCodeToIframe = useCallback(() => {
     const targetWindow = iframeRef.current?.contentWindow;
     if (!targetWindow) return;
@@ -5233,6 +5316,90 @@ function PlatformAiEditor({
     onSaveSuccess,
     onSaveError
   ]);
+  const clampViewportNumber = useCallback(
+    (value, fallback, min, max) => {
+      const parsed = Number.parseInt(value, 10);
+      if (!Number.isFinite(parsed)) return fallback;
+      return Math.max(min, Math.min(max, parsed));
+    },
+    []
+  );
+  const setDevicePreset = useCallback((device) => {
+    const preset = DEVICE_PRESETS[device];
+    setViewportPreset(device);
+    setCurrentDevice(device);
+    setViewportWidth(preset.width);
+    setViewportHeight(preset.height);
+    setMenuWidth(String(preset.width));
+    setMenuHeight(String(preset.height));
+  }, []);
+  const setViewportFromPreset = useCallback((presetKey) => {
+    const preset = DEVICE_PRESETS[presetKey];
+    setViewportPreset(presetKey);
+    setViewportWidth(preset.width);
+    setViewportHeight(preset.height);
+    setCurrentDevice(preset.device);
+    setMenuWidth(String(preset.width));
+    setMenuHeight(String(preset.height));
+  }, []);
+  const applyCustomViewport = useCallback(() => {
+    const nextWidth = clampViewportNumber(menuWidth, viewportWidth, 240, 3840);
+    const nextHeight = clampViewportNumber(menuHeight, viewportHeight, 320, 3840);
+    const nextZoomPct = clampViewportNumber(
+      menuZoom,
+      Math.round(appliedViewportZoom * 100),
+      25,
+      200
+    );
+    setViewportWidth(nextWidth);
+    setViewportHeight(nextHeight);
+    setViewportZoom(nextZoomPct / 100);
+    setViewportPreset("custom");
+    setCurrentDevice(nextWidth <= 480 ? "mobile" : nextWidth <= 1024 ? "tablet" : "desktop");
+    setMenuWidth(String(nextWidth));
+    setMenuHeight(String(nextHeight));
+    setMenuZoom(String(nextZoomPct));
+    setIsViewportMenuOpen(false);
+  }, [
+    clampViewportNumber,
+    menuWidth,
+    menuHeight,
+    menuZoom,
+    viewportWidth,
+    viewportHeight,
+    appliedViewportZoom
+  ]);
+  useEffect(() => {
+    setMenuWidth(String(viewportWidth));
+    setMenuHeight(String(viewportHeight));
+    setMenuZoom(String(Math.round(appliedViewportZoom * 100)));
+  }, [viewportWidth, viewportHeight, appliedViewportZoom]);
+  useEffect(() => {
+    const onWindowResize = () => {
+      setMenuZoom(String(Math.round(Math.min(viewportZoom, viewportFitZoom) * 100)));
+    };
+    window.addEventListener("resize", onWindowResize);
+    return () => window.removeEventListener("resize", onWindowResize);
+  }, [viewportZoom, viewportFitZoom]);
+  useEffect(() => {
+    if (!isViewportMenuOpen) return;
+    const onDocClick = (event) => {
+      const target = event.target;
+      if (viewportMenuRef.current?.contains(target)) return;
+      if (viewportMenuButtonRef.current?.contains(target)) return;
+      if (viewportLabelRef.current?.contains(target)) return;
+      setIsViewportMenuOpen(false);
+    };
+    const onDocKeyDown = (event) => {
+      if (event.key === "Escape") setIsViewportMenuOpen(false);
+    };
+    document.addEventListener("click", onDocClick);
+    document.addEventListener("keydown", onDocKeyDown);
+    return () => {
+      document.removeEventListener("click", onDocClick);
+      document.removeEventListener("keydown", onDocKeyDown);
+    };
+  }, [isViewportMenuOpen]);
   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: [
@@ -5241,112 +5408,413 @@ function PlatformAiEditor({
       /* @__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" })
+  const handleVariationSelectChange = useCallback(
+    (nextVariationId) => {
+      persistVariationId(nextVariationId);
+      setActiveVariationId(nextVariationId);
+    },
+    [persistVariationId, setActiveVariationId]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .ai-dev-toolbar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.ai-tb-viewport {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 6px 10px;
+	border-radius: 6px;
+	border: 1px solid #e5e7eb;
+	background: #fff;
+	height: 30px;
+	flex-shrink: 0;
+	cursor: pointer;
+	color: #404040;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 1;
+}
+.ai-tb-viewport > i {
+	font-size: 9px;
+}
+.ai-tb-dev-wrap {
+	position: relative;
+}
+.ai-tb-dev-btns {
+	display: flex;
+	align-items: center;
+	gap: 1px;
+	padding: 8px 4px;
+	background: #f0f0f0;
+	border-radius: 7px;
+	height: 30px;
+	width: auto;
+}
+.ai-tb-dk-btn {
+	width: 28px;
+	height: 28px;
+	background: transparent;
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+	color: #71717a;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 13px;
+	transition: all 0.12s;
+	flex-shrink: 0;
+}
+.ai-tb-dk-btn.active {
+	background: #fff;
+	color: #27272a;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.ai-tb-dev-menu {
+	position: absolute;
+	top: calc(100% + 8px);
+	right: 0;
+	z-index: 12040;
+	width: 264px;
+	background: #fff;
+	border: 1px solid #e5e7eb;
+	border-radius: 8px;
+	padding: 4px 4px;
+	box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
+	color: #27272a;
+}
+.ai-tb-dev-menu > .row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0 0 8px;
+	justify-content: space-between;
+	padding: 4px 12px;
+}
+.ai-tb-dev-menu .row-split {
+	display: flex;
+	gap: 8px;
+}
+.ai-tb-dev-menu .row-split > .row{
+	    flex-direction: column;
+    align-items: flex-start;
+}
+.ai-tb-dev-menu .row-split > * {
+	flex: 1;
+}
+.ai-tb-dev-menu .row-split > row {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+.ai-tb-dev-menu label {
+	min-width: fit-content;
+    color: var(--content-subtle, #737373);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+}
+.ai-tb-dev-menu input {
+	    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.01);
+    width: 100%;
+    height: 30px;
+    border-radius: 6px;
+    padding: 0 8px;
+    font-size: 12px;
+    color: #18181b;
+    background: #fff;
+    outline: none;
+    color: #404040;
+    border-color: transparent;
+}
+.ai-tb-dev-menu input#ai-dev-zoom-level {
+	max-width: fit-content;
+	width: 72px;
+}
+.ai-tb-dev-menu input:focus {
+	border-color: #818cf8;
+	box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
+}
+.ai-vp-presets {
+	    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 4px 12px;
+}
+.ai-vp-preset-btn {
+	border: 1px solid #e4e4e7;
+	background: #fff;
+	color: #3f3f46;
+	border-radius: 6px;
+	font-size: 11px;
+	line-height: 1;
+	padding: 7px 8px;
+	cursor: pointer;
+}
+.ai-vp-preset-btn:hover,
+.ai-vp-preset-btn.active {
+	background: #f4f4f5;
+}
+.ai-dev-ft {
+	    display: flex;
+    justify-content: flex-end;
+    padding: 4px 12px;
+}
+.ai-apply-btn {
+	border: 1px solid #c7d2fe;
+	background: #eef2ff;
+	color: #3730a3;
+	border-radius: 6px;
+	height: 30px;
+	padding: 0 10px;
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+}
+.ai-apply-btn:hover {
+	background: #e0e7ff;
+	border-color: #a5b4fc;
+}
+
+      ` }),
+    /* @__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
         ] }),
-        /* @__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(
+        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: () => 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]` })
+            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
           },
-          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",
+          tab.hash
+        )) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "ai-dev-toolbar", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: viewportLabelRef,
+              role: "button",
+              tabIndex: 0,
+              className: "ai-tb-viewport",
+              onClick: () => setIsViewportMenuOpen((prev) => !prev),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  setIsViewportMenuOpen((prev) => !prev);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: viewportLabel }),
+                /* @__PURE__ */ jsx("i", { className: "bi bi-chevron-down" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ai-tb-dev-wrap", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ai-tb-dev-btns", 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: () => setDevicePreset(vp.key),
+                  title: vp.title,
+                  className: `ai-tb-dk-btn ${currentDevice === vp.key ? "active" : ""}`,
+                  children: /* @__PURE__ */ jsx("i", { className: `bi ${vp.icon}` })
+                },
+                vp.key
+              )),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: viewportMenuButtonRef,
+                  type: "button",
+                  onClick: () => setIsViewportMenuOpen((prev) => !prev),
+                  title: "More options",
+                  className: `ai-tb-dk-btn ${isViewportMenuOpen ? "active" : ""}`,
+                  children: /* @__PURE__ */ jsx("i", { className: "bi bi-three-dots" })
+                }
+              )
+            ] }),
+            isViewportMenuOpen ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: viewportMenuRef,
+                className: "ai-tb-dev-menu",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "row row-zoom", children: [
+                    /* @__PURE__ */ jsx("label", { htmlFor: "ai-dev-zoom-level", children: "Zoom" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        id: "ai-dev-zoom-level",
+                        type: "number",
+                        min: 25,
+                        max: 200,
+                        step: 5,
+                        value: menuZoom,
+                        onChange: (event) => setMenuZoom(event.target.value),
+                        onBlur: (event) => {
+                          const nextZoomPct = clampViewportNumber(
+                            event.target.value,
+                            Math.round(appliedViewportZoom * 100),
+                            25,
+                            200
+                          );
+                          setViewportZoom(nextZoomPct / 100);
+                          setMenuZoom(String(nextZoomPct));
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "row row-split row-width height-width-row", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "row", style: { margin: 0 }, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "ai-dev-custom-width", children: "Width" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "ai-dev-custom-width",
+                          type: "number",
+                          min: 240,
+                          max: 3840,
+                          step: 1,
+                          value: menuWidth,
+                          onChange: (event) => setMenuWidth(event.target.value)
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "row", style: { margin: 0 }, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "ai-dev-custom-height", children: "Height" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "ai-dev-custom-height",
+                          type: "number",
+                          min: 320,
+                          max: 3840,
+                          step: 1,
+                          value: menuHeight,
+                          onChange: (event) => setMenuHeight(event.target.value)
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "ai-vp-presets vp-presets", id: "dev-preset-list", children: [
+                    { key: "desktop", label: "Desktop" },
+                    { key: "mobile", label: "iPhone 13" },
+                    { key: "galaxy-s22", label: "Galaxy S22" },
+                    { key: "tablet", label: "iPad" },
+                    { key: "galaxy-j1", label: "Galaxy J1" },
+                    { key: "iphone-7", label: "iPhone 7" },
+                    { key: "responsive", label: "Responsive" }
+                  ].map((preset) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setViewportFromPreset(preset.key),
+                      className: `ai-vp-preset-btn ${viewportPreset === preset.key ? "active" : ""}`,
+                      children: preset.label
+                    },
+                    preset.key
+                  )) }),
+                  /* @__PURE__ */ jsx("div", { className: "ai-dev-ft", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: applyCustomViewport,
+                      className: "ai-apply-btn",
+                      children: "Apply"
+                    }
+                  ) })
+                ]
+              }
+            ) : null
+          ] })
+        ] }),
+        /* @__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) => handleVariationSelectChange(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", { ref: iframePanelRef, className: "w-full h-full bg-slate-100 overflow-auto flex justify-center items-start p-3", children: /* @__PURE__ */ jsx(
+          "div",
           {
-            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
+            className: "h-full bg-white border border-slate-200 shadow-sm overflow-hidden",
+            style: {
+              width: `${viewportWidth}px`,
+              minWidth: `${viewportWidth}px`,
+              height: `${viewportHeight}px`,
+              maxWidth: "none",
+              zoom: String(appliedViewportZoom)
+            },
+            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
+            )
           }
-        ) : null
+        ) }),
+        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
       ] })
-    ] }) : 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
     ] })
   ] });
 }

package/dist/vite.cjs

@@ -17,22 +17,114 @@ var DEFAULT_TRACKING_MARKERS = [
   "googletagmanager",
   "google-analytics",
   "googleads",
+  "googleadservices",
+  "googlesyndication",
   "doubleclick",
   "gtag(",
   "ga(",
   "fbq(",
-  "clarity",
+  "connect.facebook.net",
+  "clarity.ms",
   "hotjar",
   "segment.com",
+  "segment.io",
+  "segmentapis",
   "mixpanel",
-  "amplitude",
+  "amplitude.com",
+  "api.amplitude",
   "fullstory",
   "northbeam",
   "nb-collector",
+  "j.northbeam.io",
   "/api/collect",
   "/nb-collector",
   '"r":"periodic"',
-  '"r": "periodic"'
+  '"r": "periodic"',
+  "shopify-pixel",
+  "config-security.com",
+  "heap.io",
+  "heapanalytics",
+  "posthog",
+  "matomo",
+  "piwik",
+  "plausible.io",
+  "umami",
+  "statcounter",
+  "kissmetrics",
+  "pendo.io",
+  "mouseflow",
+  "quantserve",
+  "quantcast",
+  "chartbeat",
+  "parse.ly",
+  "parsely",
+  "optimizely",
+  "logrocket",
+  "smartlook",
+  "inspectlet",
+  "crazyegg",
+  "lucky-orange",
+  "luckyorange",
+  "vwo.com",
+  "contentsquare",
+  "decibel",
+  "medallia",
+  "bat.bing.com",
+  "bing.com/action",
+  "analytics.tiktok.com",
+  "tiktok-pixel",
+  "snap.licdn.com",
+  "/li/track",
+  "ads-twitter.com",
+  "static.ads-twitter",
+  "pinimg.com",
+  "pinterest-tag",
+  "reddit.com/api/v2/conversions",
+  "redditstatic",
+  "criteo",
+  "adroll",
+  "outbrain",
+  "amazon-adsystem",
+  "adsystem.amazon",
+  "q.quora.com",
+  "quora-pixel",
+  "tealium",
+  "rudderstack",
+  "mparticle",
+  "freshpaint",
+  "jitsu",
+  "customer.io",
+  "hs-analytics",
+  "hsforms",
+  "hubspot",
+  "marketo",
+  "munchkin",
+  "pardot",
+  "intercom",
+  "drift",
+  "klaviyo",
+  "omnisend",
+  "attentive",
+  "sentry",
+  "bugsnag",
+  "datadog",
+  "dd-rum",
+  "browser-intake-datadoghq",
+  "newrelic",
+  "nr-data",
+  "rollbar",
+  "cloudflareinsights",
+  "vercel-insights",
+  "_vercel/insights",
+  "vercel-speed-insights",
+  "plausible",
+  "usermaven",
+  "freshmarketer",
+  "mc.yandex",
+  "yandex.ru/metrika",
+  "hm.baidu.com",
+  "getclicky",
+  "clicky.com"
 ];
 function normalizeTrackingMarkers(input) {
   if (!Array.isArray(input)) return [];
@@ -67,8 +159,17 @@ function parseTrackingMarkersParam(raw) {
 }
 function hasTrackingMarker(input, markers) {
   const text = String(input || "").toLowerCase();
+  const compactText = text.replace(/[^a-z0-9]/g, "");
   for (let i = 0; i < markers.length; i += 1) {
-    if (text.includes(markers[i])) return true;
+    const marker = String(markers[i] || "").toLowerCase().trim();
+    if (!marker) continue;
+    if (text.includes(marker)) return true;
+    const markerNoProto = marker.replace(/^https?:\/\//, "");
+    const markerNoWww = markerNoProto.replace(/^www\./, "");
+    const compactMarker = markerNoWww.replace(/[^a-z0-9]/g, "");
+    if (markerNoProto && text.includes(markerNoProto)) return true;
+    if (markerNoWww && text.includes(markerNoWww)) return true;
+    if (compactMarker && compactText.includes(compactMarker)) return true;
   }
   return false;
 }
@@ -80,8 +181,30 @@ function patchKnownUnsafeEditorPatterns(scriptTag) {
   );
   return out;
 }
+function escapeHtmlAttribute(value) {
+  return String(value || "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function getFirstMatchedTrackingMarker(input, markers) {
+  const text = String(input || "").toLowerCase();
+  for (let i = 0; i < markers.length; i += 1) {
+    if (text.includes(markers[i])) return markers[i];
+  }
+  return "";
+}
+function describeRemovedTrackingTag(tag, markers) {
+  const srcMatch = String(tag || "").match(/\bsrc\s*=\s*(["'])(.*?)\1/i);
+  const src = srcMatch?.[2]?.trim();
+  if (src) return `script:${src}`;
+  const idMatch = String(tag || "").match(/\bid\s*=\s*(["'])(.*?)\1/i);
+  const id = idMatch?.[2]?.trim();
+  if (id) return `tag#${id}`;
+  const marker = getFirstMatchedTrackingMarker(tag, markers);
+  if (marker) return `marker:${marker}`;
+  return "inline-script";
+}
 function stripTrackingScriptsFromScrapedHtml(html, markers) {
   let removedCount = 0;
+  const removedScripts = [];
   let out = html;
   out = out.replace(/<script\b[\s\S]*?<\/script>/gi, (tag) => {
     var patchedTag = patchKnownUnsafeEditorPatterns(tag);
@@ -89,6 +212,9 @@ function stripTrackingScriptsFromScrapedHtml(html, markers) {
     const src = srcMatch?.[2] || "";
     if (hasTrackingMarker(src, markers) || hasTrackingMarker(tag, markers)) {
       removedCount += 1;
+      if (removedScripts.length < 25) {
+        removedScripts.push(describeRemovedTrackingTag(tag, markers).slice(0, 240));
+      }
       return "";
     }
     return patchedTag;
@@ -96,13 +222,18 @@ function stripTrackingScriptsFromScrapedHtml(html, markers) {
   out = out.replace(/<noscript\b[\s\S]*?<\/noscript>/gi, (tag) => {
     if (!hasTrackingMarker(tag, markers)) return tag;
     removedCount += 1;
+    if (removedScripts.length < 25) {
+      const marker = getFirstMatchedTrackingMarker(tag, markers);
+      removedScripts.push(`noscript:${(marker || "tracking").slice(0, 240)}`);
+    }
     return "";
   });
   if (removedCount > 0) {
+    const dataScriptsValue = removedScripts.length ? ` data-scripts="${escapeHtmlAttribute(removedScripts.join(" | "))}"` : "";
     out = out.replace(
       /<head([^>]*)>/i,
       `<head$1>
-<meta name="conversion-editor-tracking-scripts-stripped" content="${removedCount}">
+<meta name="conversion-editor-tracking-scripts-stripped" content="${removedCount}"${dataScriptsValue}>
 `
     );
   }
@@ -1377,15 +1508,29 @@ function showEditorNotification(message, kind, durationMs) {
   }, Math.max(1200, durationMs || 2600));
 }
 
+function resolveSimulationId(source, keys) {
+  var obj = source || {};
+  var arr = Array.isArray(keys) ? keys : [];
+  for (var i = 0; i < arr.length; i++) {
+    var key = arr[i];
+    var value = obj[key];
+    if (value === undefined || value === null) continue;
+    // Preserve numeric ids (including 0), but reject empty-string ids.
+    if (typeof value === 'string' && value.trim() === '') continue;
+    return value;
+  }
+  return null;
+}
+
 function generatePreviewUrlString(args) {
   var baseUrl = (args && args.url) || '';
   var test = (args && args.test) || {};
   var variation = (args && args.variation) || {};
   if (!baseUrl) return '';
-  var testId = test.iid || '';
-  var variationId = variation.iid || '';
-  if (!testId || !variationId) return '';
-  var cId = String(testId || '') + '_' + String(variationId || '');
+  var testId = resolveSimulationId(test, ['iid', 'experimentIid', 'experimentId', '_id', 'id']);
+  var variationId = resolveSimulationId(variation, ['iid', 'platformIid', 'variationIid', '_id', 'id']);
+  if (testId === null || variationId === null) return '';
+  var cId = String(testId) + '_' + String(variationId);
   var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
   return (
     baseUrl +
@@ -1408,8 +1553,10 @@ function simulateExperiment() {
     test.pageUrl ||
     (test.metadata_1 && test.metadata_1.editor_url) ||
     '';
-  if (!test.iid || !activeVariation || !activeVariation.iid) {
-    showEditorNotification('Cannot simulate: missing test.iid or variation.iid.', 'error', 3200);
+  var testId = resolveSimulationId(test, ['iid', 'experimentIid', 'experimentId', '_id', 'id']);
+  var variationId = resolveSimulationId(activeVariation, ['iid', 'platformIid', 'variationIid', '_id', 'id']);
+  if (testId === null || !activeVariation || variationId === null) {
+    showEditorNotification('Cannot simulate: missing test/variation id.', 'error', 3200);
     return;
   }
   var url = generatePreviewUrlString({
@@ -6243,6 +6390,7 @@ function createVisualEditorMiddleware(options) {
         const trackingMarkersForRequest = mergeTrackingMarkers(
           extraTrackingMarkersForRequest
         );
+        console.log("trackingMarkersForRequest", trackingMarkersForRequest);
         const strictFreezeParam = (url.searchParams.get("strictObserverFreeze") || "").toLowerCase();
         const strictObserverFreezeForRequest = strictFreezeParam === "1" || strictFreezeParam === "true" || strictFreezeParam === "yes" ? true : strictFreezeParam === "0" || strictFreezeParam === "false" || strictFreezeParam === "no" ? false : strictObserverFreeze;
         if (!targetUrl) {

package/dist/vite.js

@@ -9,22 +9,114 @@ var DEFAULT_TRACKING_MARKERS = [
   "googletagmanager",
   "google-analytics",
   "googleads",
+  "googleadservices",
+  "googlesyndication",
   "doubleclick",
   "gtag(",
   "ga(",
   "fbq(",
-  "clarity",
+  "connect.facebook.net",
+  "clarity.ms",
   "hotjar",
   "segment.com",
+  "segment.io",
+  "segmentapis",
   "mixpanel",
-  "amplitude",
+  "amplitude.com",
+  "api.amplitude",
   "fullstory",
   "northbeam",
   "nb-collector",
+  "j.northbeam.io",
   "/api/collect",
   "/nb-collector",
   '"r":"periodic"',
-  '"r": "periodic"'
+  '"r": "periodic"',
+  "shopify-pixel",
+  "config-security.com",
+  "heap.io",
+  "heapanalytics",
+  "posthog",
+  "matomo",
+  "piwik",
+  "plausible.io",
+  "umami",
+  "statcounter",
+  "kissmetrics",
+  "pendo.io",
+  "mouseflow",
+  "quantserve",
+  "quantcast",
+  "chartbeat",
+  "parse.ly",
+  "parsely",
+  "optimizely",
+  "logrocket",
+  "smartlook",
+  "inspectlet",
+  "crazyegg",
+  "lucky-orange",
+  "luckyorange",
+  "vwo.com",
+  "contentsquare",
+  "decibel",
+  "medallia",
+  "bat.bing.com",
+  "bing.com/action",
+  "analytics.tiktok.com",
+  "tiktok-pixel",
+  "snap.licdn.com",
+  "/li/track",
+  "ads-twitter.com",
+  "static.ads-twitter",
+  "pinimg.com",
+  "pinterest-tag",
+  "reddit.com/api/v2/conversions",
+  "redditstatic",
+  "criteo",
+  "adroll",
+  "outbrain",
+  "amazon-adsystem",
+  "adsystem.amazon",
+  "q.quora.com",
+  "quora-pixel",
+  "tealium",
+  "rudderstack",
+  "mparticle",
+  "freshpaint",
+  "jitsu",
+  "customer.io",
+  "hs-analytics",
+  "hsforms",
+  "hubspot",
+  "marketo",
+  "munchkin",
+  "pardot",
+  "intercom",
+  "drift",
+  "klaviyo",
+  "omnisend",
+  "attentive",
+  "sentry",
+  "bugsnag",
+  "datadog",
+  "dd-rum",
+  "browser-intake-datadoghq",
+  "newrelic",
+  "nr-data",
+  "rollbar",
+  "cloudflareinsights",
+  "vercel-insights",
+  "_vercel/insights",
+  "vercel-speed-insights",
+  "plausible",
+  "usermaven",
+  "freshmarketer",
+  "mc.yandex",
+  "yandex.ru/metrika",
+  "hm.baidu.com",
+  "getclicky",
+  "clicky.com"
 ];
 function normalizeTrackingMarkers(input) {
   if (!Array.isArray(input)) return [];
@@ -59,8 +151,17 @@ function parseTrackingMarkersParam(raw) {
 }
 function hasTrackingMarker(input, markers) {
   const text = String(input || "").toLowerCase();
+  const compactText = text.replace(/[^a-z0-9]/g, "");
   for (let i = 0; i < markers.length; i += 1) {
-    if (text.includes(markers[i])) return true;
+    const marker = String(markers[i] || "").toLowerCase().trim();
+    if (!marker) continue;
+    if (text.includes(marker)) return true;
+    const markerNoProto = marker.replace(/^https?:\/\//, "");
+    const markerNoWww = markerNoProto.replace(/^www\./, "");
+    const compactMarker = markerNoWww.replace(/[^a-z0-9]/g, "");
+    if (markerNoProto && text.includes(markerNoProto)) return true;
+    if (markerNoWww && text.includes(markerNoWww)) return true;
+    if (compactMarker && compactText.includes(compactMarker)) return true;
   }
   return false;
 }
@@ -72,8 +173,30 @@ function patchKnownUnsafeEditorPatterns(scriptTag) {
   );
   return out;
 }
+function escapeHtmlAttribute(value) {
+  return String(value || "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function getFirstMatchedTrackingMarker(input, markers) {
+  const text = String(input || "").toLowerCase();
+  for (let i = 0; i < markers.length; i += 1) {
+    if (text.includes(markers[i])) return markers[i];
+  }
+  return "";
+}
+function describeRemovedTrackingTag(tag, markers) {
+  const srcMatch = String(tag || "").match(/\bsrc\s*=\s*(["'])(.*?)\1/i);
+  const src = srcMatch?.[2]?.trim();
+  if (src) return `script:${src}`;
+  const idMatch = String(tag || "").match(/\bid\s*=\s*(["'])(.*?)\1/i);
+  const id = idMatch?.[2]?.trim();
+  if (id) return `tag#${id}`;
+  const marker = getFirstMatchedTrackingMarker(tag, markers);
+  if (marker) return `marker:${marker}`;
+  return "inline-script";
+}
 function stripTrackingScriptsFromScrapedHtml(html, markers) {
   let removedCount = 0;
+  const removedScripts = [];
   let out = html;
   out = out.replace(/<script\b[\s\S]*?<\/script>/gi, (tag) => {
     var patchedTag = patchKnownUnsafeEditorPatterns(tag);
@@ -81,6 +204,9 @@ function stripTrackingScriptsFromScrapedHtml(html, markers) {
     const src = srcMatch?.[2] || "";
     if (hasTrackingMarker(src, markers) || hasTrackingMarker(tag, markers)) {
       removedCount += 1;
+      if (removedScripts.length < 25) {
+        removedScripts.push(describeRemovedTrackingTag(tag, markers).slice(0, 240));
+      }
       return "";
     }
     return patchedTag;
@@ -88,13 +214,18 @@ function stripTrackingScriptsFromScrapedHtml(html, markers) {
   out = out.replace(/<noscript\b[\s\S]*?<\/noscript>/gi, (tag) => {
     if (!hasTrackingMarker(tag, markers)) return tag;
     removedCount += 1;
+    if (removedScripts.length < 25) {
+      const marker = getFirstMatchedTrackingMarker(tag, markers);
+      removedScripts.push(`noscript:${(marker || "tracking").slice(0, 240)}`);
+    }
     return "";
   });
   if (removedCount > 0) {
+    const dataScriptsValue = removedScripts.length ? ` data-scripts="${escapeHtmlAttribute(removedScripts.join(" | "))}"` : "";
     out = out.replace(
       /<head([^>]*)>/i,
       `<head$1>
-<meta name="conversion-editor-tracking-scripts-stripped" content="${removedCount}">
+<meta name="conversion-editor-tracking-scripts-stripped" content="${removedCount}"${dataScriptsValue}>
 `
     );
   }
@@ -1369,15 +1500,29 @@ function showEditorNotification(message, kind, durationMs) {
   }, Math.max(1200, durationMs || 2600));
 }
 
+function resolveSimulationId(source, keys) {
+  var obj = source || {};
+  var arr = Array.isArray(keys) ? keys : [];
+  for (var i = 0; i < arr.length; i++) {
+    var key = arr[i];
+    var value = obj[key];
+    if (value === undefined || value === null) continue;
+    // Preserve numeric ids (including 0), but reject empty-string ids.
+    if (typeof value === 'string' && value.trim() === '') continue;
+    return value;
+  }
+  return null;
+}
+
 function generatePreviewUrlString(args) {
   var baseUrl = (args && args.url) || '';
   var test = (args && args.test) || {};
   var variation = (args && args.variation) || {};
   if (!baseUrl) return '';
-  var testId = test.iid || '';
-  var variationId = variation.iid || '';
-  if (!testId || !variationId) return '';
-  var cId = String(testId || '') + '_' + String(variationId || '');
+  var testId = resolveSimulationId(test, ['iid', 'experimentIid', 'experimentId', '_id', 'id']);
+  var variationId = resolveSimulationId(variation, ['iid', 'platformIid', 'variationIid', '_id', 'id']);
+  if (testId === null || variationId === null) return '';
+  var cId = String(testId) + '_' + String(variationId);
   var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
   return (
     baseUrl +
@@ -1400,8 +1545,10 @@ function simulateExperiment() {
     test.pageUrl ||
     (test.metadata_1 && test.metadata_1.editor_url) ||
     '';
-  if (!test.iid || !activeVariation || !activeVariation.iid) {
-    showEditorNotification('Cannot simulate: missing test.iid or variation.iid.', 'error', 3200);
+  var testId = resolveSimulationId(test, ['iid', 'experimentIid', 'experimentId', '_id', 'id']);
+  var variationId = resolveSimulationId(activeVariation, ['iid', 'platformIid', 'variationIid', '_id', 'id']);
+  if (testId === null || !activeVariation || variationId === null) {
+    showEditorNotification('Cannot simulate: missing test/variation id.', 'error', 3200);
     return;
   }
   var url = generatePreviewUrlString({
@@ -6235,6 +6382,7 @@ function createVisualEditorMiddleware(options) {
         const trackingMarkersForRequest = mergeTrackingMarkers(
           extraTrackingMarkersForRequest
         );
+        console.log("trackingMarkersForRequest", trackingMarkersForRequest);
         const strictFreezeParam = (url.searchParams.get("strictObserverFreeze") || "").toLowerCase();
         const strictObserverFreezeForRequest = strictFreezeParam === "1" || strictFreezeParam === "true" || strictFreezeParam === "yes" ? true : strictFreezeParam === "0" || strictFreezeParam === "false" || strictFreezeParam === "no" ? false : strictObserverFreeze;
         if (!targetUrl) {

package/package.json

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