@accelerated-agency/visual-editor 0.3.0 → 0.3.1

package/dist/index.js

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

package/dist/vite.cjs

@@ -4694,6 +4694,101 @@ if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.ser
         } else {
           html = runtimeProxyScript + html;
         }
+        const aiBridgeRuntimeScript = `<script>(function(){try{
+var AI_CHANNEL="ve-ai-editor";
+var lastJs="";
+var aiSheet=null;
+var lastAiContainerIds=[];
+function extractAiContainerIds(source){
+  try{
+    var re=/ai-generated-container-[a-zA-Z0-9_-]+/g;
+    var found=String(source||"").match(re)||[];
+    var uniq=[];
+    for(var i=0;i<found.length;i++){
+      if(uniq.indexOf(found[i])===-1) uniq.push(found[i]);
+    }
+    return uniq;
+  }catch(_){
+    return [];
+  }
+}
+function cleanupRemovedAiContainers(nextIds){
+  try{
+    for(var i=0;i<lastAiContainerIds.length;i++){
+      var prevId=lastAiContainerIds[i];
+      if(nextIds.indexOf(prevId)!==-1) continue;
+      var el=document.getElementById(prevId);
+      if(!el) continue;
+      var marker=(el.getAttribute("data-ai-generated")||"").toLowerCase();
+      if(marker==="true"||prevId.indexOf("ai-generated-container-")===0){
+        if(el.parentNode) el.parentNode.removeChild(el);
+      }
+    }
+  }catch(_){}
+}
+function getProxyPayload(){
+  try{
+    var u=new URL(window.location.href);
+    return {
+      url:u.searchParams.get("url")||undefined,
+      password:u.searchParams.get("password")||undefined
+    };
+  }catch(_){
+    return {};
+  }
+}
+function applyAiCode(payload){
+  try{
+    var p=payload||{};
+    var css=typeof p.cssCode==="string"?p.cssCode:"";
+    var js=typeof p.jsCode==="string"?p.jsCode:"";
+    var doc=document;
+    if(typeof CSSStyleSheet!=="undefined"&&"adoptedStyleSheets" in doc){
+      var sheets=doc.adoptedStyleSheets||[];
+      if(css){
+        if(!aiSheet) aiSheet=new CSSStyleSheet();
+        aiSheet.replaceSync(css);
+        if(sheets.indexOf(aiSheet)===-1){
+          doc.adoptedStyleSheets=sheets.concat(aiSheet);
+        }
+      }else if(aiSheet&&sheets.indexOf(aiSheet)!==-1){
+        doc.adoptedStyleSheets=sheets.filter(function(s){return s!==aiSheet;});
+      }
+    }
+    if(js!==lastJs){
+      var nextIds=extractAiContainerIds(js);
+      cleanupRemovedAiContainers(nextIds);
+      if(js) (new Function(js)).call(window);
+      lastJs=js;
+      lastAiContainerIds=nextIds;
+    }
+    try{
+      doc.documentElement.setAttribute("data-ve-ai-applied","1");
+      window.parent&&window.parent.postMessage({
+        channel:AI_CHANNEL,
+        type:"ai-code-applied",
+        payload:{cssLen:css.length,jsLen:js.length}
+      },"*");
+    }catch(_){}
+  }catch(_){}
+}
+window.addEventListener("message",function(ev){
+  try{
+    var d=ev&&ev.data;
+    if(!d||d.channel!==AI_CHANNEL||d.type!=="apply-ai-code") return;
+    applyAiCode(d.payload||{});
+  }catch(_){}
+});
+try{
+  if(window.parent){
+    window.parent.postMessage({channel:AI_CHANNEL,type:"ai-code-ready"},"*");
+    window.parent.postMessage({channel:AI_CHANNEL,type:"ai-url-changed",payload:getProxyPayload()},"*");
+  }
+}catch(_){}
+}catch(_){}})();</script>`;
+        html = html.includes("</head>") ? html.replace("</head>", `${aiBridgeRuntimeScript}
+</head>`) : `${aiBridgeRuntimeScript}
+${html}`;
         const bridgeScript = `<script src="/bridge.js"></script>`;
         html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
 </body>`) : html + bridgeScript;

package/dist/vite.js

@@ -4686,6 +4686,101 @@ if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.ser
         } else {
           html = runtimeProxyScript + html;
         }
+        const aiBridgeRuntimeScript = `<script>(function(){try{
+var AI_CHANNEL="ve-ai-editor";
+var lastJs="";
+var aiSheet=null;
+var lastAiContainerIds=[];
+function extractAiContainerIds(source){
+  try{
+    var re=/ai-generated-container-[a-zA-Z0-9_-]+/g;
+    var found=String(source||"").match(re)||[];
+    var uniq=[];
+    for(var i=0;i<found.length;i++){
+      if(uniq.indexOf(found[i])===-1) uniq.push(found[i]);
+    }
+    return uniq;
+  }catch(_){
+    return [];
+  }
+}
+function cleanupRemovedAiContainers(nextIds){
+  try{
+    for(var i=0;i<lastAiContainerIds.length;i++){
+      var prevId=lastAiContainerIds[i];
+      if(nextIds.indexOf(prevId)!==-1) continue;
+      var el=document.getElementById(prevId);
+      if(!el) continue;
+      var marker=(el.getAttribute("data-ai-generated")||"").toLowerCase();
+      if(marker==="true"||prevId.indexOf("ai-generated-container-")===0){
+        if(el.parentNode) el.parentNode.removeChild(el);
+      }
+    }
+  }catch(_){}
+}
+function getProxyPayload(){
+  try{
+    var u=new URL(window.location.href);
+    return {
+      url:u.searchParams.get("url")||undefined,
+      password:u.searchParams.get("password")||undefined
+    };
+  }catch(_){
+    return {};
+  }
+}
+function applyAiCode(payload){
+  try{
+    var p=payload||{};
+    var css=typeof p.cssCode==="string"?p.cssCode:"";
+    var js=typeof p.jsCode==="string"?p.jsCode:"";
+    var doc=document;
+    if(typeof CSSStyleSheet!=="undefined"&&"adoptedStyleSheets" in doc){
+      var sheets=doc.adoptedStyleSheets||[];
+      if(css){
+        if(!aiSheet) aiSheet=new CSSStyleSheet();
+        aiSheet.replaceSync(css);
+        if(sheets.indexOf(aiSheet)===-1){
+          doc.adoptedStyleSheets=sheets.concat(aiSheet);
+        }
+      }else if(aiSheet&&sheets.indexOf(aiSheet)!==-1){
+        doc.adoptedStyleSheets=sheets.filter(function(s){return s!==aiSheet;});
+      }
+    }
+    if(js!==lastJs){
+      var nextIds=extractAiContainerIds(js);
+      cleanupRemovedAiContainers(nextIds);
+      if(js) (new Function(js)).call(window);
+      lastJs=js;
+      lastAiContainerIds=nextIds;
+    }
+    try{
+      doc.documentElement.setAttribute("data-ve-ai-applied","1");
+      window.parent&&window.parent.postMessage({
+        channel:AI_CHANNEL,
+        type:"ai-code-applied",
+        payload:{cssLen:css.length,jsLen:js.length}
+      },"*");
+    }catch(_){}
+  }catch(_){}
+}
+window.addEventListener("message",function(ev){
+  try{
+    var d=ev&&ev.data;
+    if(!d||d.channel!==AI_CHANNEL||d.type!=="apply-ai-code") return;
+    applyAiCode(d.payload||{});
+  }catch(_){}
+});
+try{
+  if(window.parent){
+    window.parent.postMessage({channel:AI_CHANNEL,type:"ai-code-ready"},"*");
+    window.parent.postMessage({channel:AI_CHANNEL,type:"ai-url-changed",payload:getProxyPayload()},"*");
+  }
+}catch(_){}
+}catch(_){}})();</script>`;
+        html = html.includes("</head>") ? html.replace("</head>", `${aiBridgeRuntimeScript}
+</head>`) : `${aiBridgeRuntimeScript}
+${html}`;
         const bridgeScript = `<script src="/bridge.js"></script>`;
         html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
 </body>`) : html + bridgeScript;

package/package.json

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