@ohhwells/bridge 0.1.10 → 0.1.11

package/dist/index.js

@@ -3791,7 +3791,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ jsx3(ToggleGroupItem, { value: state, children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ jsx3(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -3801,20 +3801,19 @@ function OhhwellsBridge() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const isEditMode = isEditSessionActive();
-  useEffect(() => {
-    if (!isEditMode) return;
-    const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
-    const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" });
-    const stylesheet = Object.assign(document.createElement("link"), { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" });
-    document.head.append(preconnect1, preconnect2, stylesheet);
-    return () => {
-      preconnect1.remove();
-      preconnect2.remove();
-      stylesheet.remove();
-    };
-  }, [isEditMode]);
   const [bridgeRoot, setBridgeRoot] = useState(null);
   useEffect(() => {
+    const figtreeFontId = "ohw-figtree-font";
+    if (!document.getElementById(figtreeFontId)) {
+      const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
+      const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" });
+      const stylesheet = Object.assign(document.createElement("link"), {
+        id: figtreeFontId,
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
+      });
+      document.head.append(preconnect1, preconnect2, stylesheet);
+    }
     const el = document.createElement("div");
     el.setAttribute("data-ohw-bridge-root", "");
     el.setAttribute("data-ohw-bridge", "");
@@ -3845,6 +3844,9 @@ function OhhwellsBridge() {
   const toolbarElRef = useRef(null);
   const glowElRef = useRef(null);
   const hoveredImageRef = useRef(null);
+  const hoveredImageHasTextOverlapRef = useRef(false);
+  const imageUnhoverTimerRef = useRef(null);
+  const imageShowTimerRef = useRef(null);
   const editStylesRef = useRef(null);
   const activateRef = useRef(() => {
   });
@@ -3958,7 +3960,7 @@ function OhhwellsBridge() {
     }
     let cancelled = false;
     setFetchState("loading");
-    const apiUrl = globalThis.process?.env?.NEXT_PUBLIC_FLOWOPS_API_URL ?? "http://localhost:4005";
+    const apiUrl = globalThis.process?.env?.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
     fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
@@ -4085,7 +4087,9 @@ function OhhwellsBridge() {
       [data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY}59 !important; }
       [data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
       [data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
-      [data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]) { pointer-events: auto !important; }
+      [data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
+      [data-ohw-editable-state] [data-ohw-editable="image"],
+      [data-ohw-editable-state][data-ohw-editable="image"] { pointer-events: auto !important; }
     `;
       const forceHover = document.createElement("style");
       forceHover.setAttribute("data-ohw-active-state-style", "");
@@ -4178,10 +4182,10 @@ function OhhwellsBridge() {
       }
       return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
     };
-    const postImageHover = (imgEl, isDragOver = false) => {
+    const postImageHover = (imgEl, isDragOver = false, forceTextOverlap) => {
       const r2 = getVisibleRect(imgEl);
-      const hasTextOverlap = imgEl.dataset.ohwEditable === "bg-image" || imgEl.hasAttribute("data-ohw-editable-state");
-      console.log("[OHW] postImageHover", { key: imgEl.dataset.ohwKey, editable: imgEl.dataset.ohwEditable, hasState: imgEl.hasAttribute("data-ohw-editable-state"), hasTextOverlap });
+      const hasTextOverlap = forceTextOverlap ?? (imgEl.dataset.ohwEditable === "bg-image" || imgEl.hasAttribute("data-ohw-editable-state"));
+      hoveredImageHasTextOverlapRef.current = hasTextOverlap;
       postToParentRef.current({
         type: "ow:image-hover",
         key: imgEl.dataset.ohwKey ?? "",
@@ -4234,15 +4238,6 @@ function OhhwellsBridge() {
       return smallest;
     };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
-      if (activeElRef.current) {
-        console.log("[OHW] probeImageAt: text active, suppressing image hover");
-        if (hoveredImageRef.current) {
-          hoveredImageRef.current = null;
-          resumeAnimTracks();
-          postToParentRef.current({ type: "ow:image-unhover" });
-        }
-        return;
-      }
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
@@ -4268,37 +4263,52 @@ function OhhwellsBridge() {
           }
           return;
         }
+        const isStateCardImage = !!imgEl.closest("[data-ohw-editable-state]");
         const textEditable = Array.from(
           document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
         ).find((el) => {
           const er = el.getBoundingClientRect();
           return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
         });
-        if (textEditable) {
-          if (hoveredImageRef.current) {
-            hoveredImageRef.current = null;
-            resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
-          }
-          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-          if (!textEditable.hasAttribute("contenteditable")) textEditable.setAttribute("data-ohw-hovered", "");
-          return;
+        if (imageUnhoverTimerRef.current) {
+          clearTimeout(imageUnhoverTimerRef.current);
+          imageUnhoverTimerRef.current = null;
+        }
+        if (imageShowTimerRef.current) {
+          clearTimeout(imageShowTimerRef.current);
+          imageShowTimerRef.current = null;
         }
-        const activeHovered = document.querySelector("[data-ohw-hovered]");
-        if (activeHovered) {
-          const outlinePad = 8;
-          const hr = activeHovered.getBoundingClientRect();
-          if (x >= hr.left - outlinePad && x <= hr.right + outlinePad && y >= hr.top - outlinePad && y <= hr.bottom + outlinePad) {
+        if (textEditable) {
+          if (textEditable.hasAttribute("contenteditable")) {
             if (hoveredImageRef.current) {
               hoveredImageRef.current = null;
+              hoveredImageHasTextOverlapRef.current = false;
               resumeAnimTracks();
               postToParentRef.current({ type: "ow:image-unhover" });
             }
             return;
           }
+          if (isStateCardImage) {
+            if (imgEl !== hoveredImageRef.current || !hoveredImageHasTextOverlapRef.current) {
+              hoveredImageRef.current = imgEl;
+              postImageHover(imgEl, isDragOver, true);
+            }
+            document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+            textEditable.setAttribute("data-ohw-hovered", "");
+            return;
+          }
+          if (hoveredImageRef.current) {
+            hoveredImageRef.current = null;
+            hoveredImageHasTextOverlapRef.current = false;
+            resumeAnimTracks();
+            postToParentRef.current({ type: "ow:image-unhover" });
+          }
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          textEditable.setAttribute("data-ohw-hovered", "");
+          return;
         }
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-        if (imgEl !== hoveredImageRef.current) {
+        if (imgEl !== hoveredImageRef.current || hoveredImageHasTextOverlapRef.current) {
           hoveredImageRef.current = imgEl;
           postImageHover(imgEl, isDragOver);
         } else if (isDragOver) {
@@ -4307,8 +4317,17 @@ function OhhwellsBridge() {
       } else {
         const inIframeView = clientX >= 0 && clientY >= 0 && clientX <= window.innerWidth && clientY <= window.innerHeight;
         if (!inIframeView) return;
+        if (imageUnhoverTimerRef.current) {
+          clearTimeout(imageUnhoverTimerRef.current);
+          imageUnhoverTimerRef.current = null;
+        }
+        if (imageShowTimerRef.current) {
+          clearTimeout(imageShowTimerRef.current);
+          imageShowTimerRef.current = null;
+        }
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
+          hoveredImageHasTextOverlapRef.current = false;
           resumeAnimTracks();
           postToParentRef.current({ type: "ow:image-unhover" });
         }
@@ -4339,15 +4358,18 @@ function OhhwellsBridge() {
       }) ?? null;
       const currentLocked = activeStateElRef.current?.hasAttribute("data-ohw-active-state") ? activeStateElRef.current : null;
       const active = found ?? currentLocked;
+      const prev = activeStateElRef.current;
       activeStateElRef.current = active;
-      document.querySelectorAll("[data-ohw-state-hovered]").forEach((el) => el.removeAttribute("data-ohw-state-hovered"));
-      if (active) {
-        if (active.querySelector("[data-ohw-state-view]")) active.setAttribute("data-ohw-state-hovered", "");
-        const states = deriveStates(active.dataset.ohwEditableState ?? "");
-        const activeState = active.hasAttribute("data-ohw-active-state") ? (active.getAttribute("data-ohw-active-state") ?? "Default").charAt(0).toUpperCase() + (active.getAttribute("data-ohw-active-state") ?? "").slice(1) : "Default";
-        setToggleState({ rect: active.getBoundingClientRect(), activeState, states });
-      } else {
-        setToggleState(null);
+      if (active !== prev) {
+        if (prev) prev.removeAttribute("data-ohw-state-hovered");
+        if (active) {
+          if (active.querySelector("[data-ohw-state-view]")) active.setAttribute("data-ohw-state-hovered", "");
+          const states = deriveStates(active.dataset.ohwEditableState ?? "");
+          const activeState = active.hasAttribute("data-ohw-active-state") ? (active.getAttribute("data-ohw-active-state") ?? "Default").charAt(0).toUpperCase() + (active.getAttribute("data-ohw-active-state") ?? "").slice(1) : "Default";
+          setToggleState({ rect: active.getBoundingClientRect(), activeState, states });
+        } else {
+          setToggleState(null);
+        }
       }
     };
     const handleMouseMove = (e) => {
@@ -4682,6 +4704,8 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleDeactivate);
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
+      if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
+      if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
   useEffect(() => {