@ohhwells/bridge 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -3830,7 +3830,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: state, children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -3840,20 +3840,19 @@ function OhhwellsBridge() {
   const router = (0, import_navigation.useRouter)();
   const searchParams = (0, import_navigation.useSearchParams)();
   const isEditMode = isEditSessionActive();
-  (0, import_react.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] = (0, import_react.useState)(null);
   (0, import_react.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", "");
@@ -3884,6 +3883,9 @@ function OhhwellsBridge() {
   const toolbarElRef = (0, import_react.useRef)(null);
   const glowElRef = (0, import_react.useRef)(null);
   const hoveredImageRef = (0, import_react.useRef)(null);
+  const hoveredImageHasTextOverlapRef = (0, import_react.useRef)(false);
+  const imageUnhoverTimerRef = (0, import_react.useRef)(null);
+  const imageShowTimerRef = (0, import_react.useRef)(null);
   const editStylesRef = (0, import_react.useRef)(null);
   const activateRef = (0, import_react.useRef)(() => {
   });
@@ -3997,7 +3999,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 ?? {};
@@ -4124,6 +4126,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-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", "");
@@ -4216,12 +4221,15 @@ 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 = 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 ?? "",
         rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+        hasTextOverlap,
         ...isDragOver ? { isDragOver: true } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
@@ -4269,7 +4277,6 @@ function OhhwellsBridge() {
       return smallest;
     };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
-      if (activeElRef.current) return;
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
@@ -4295,32 +4302,52 @@ function OhhwellsBridge() {
           }
           return;
         }
-        const topEditable = topEl?.closest("[data-ohw-editable]");
-        if (topEditable && topEditable.dataset.ohwEditable !== "image" && topEditable.dataset.ohwEditable !== "bg-image") {
-          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"));
-          topEditable.setAttribute("data-ohw-hovered", "");
-          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 (imageUnhoverTimerRef.current) {
+          clearTimeout(imageUnhoverTimerRef.current);
+          imageUnhoverTimerRef.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 (imageShowTimerRef.current) {
+          clearTimeout(imageShowTimerRef.current);
+          imageShowTimerRef.current = null;
+        }
+        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) {
@@ -4329,9 +4356,29 @@ function OhhwellsBridge() {
       } else {
         const inIframeView = clientX >= 0 && clientY >= 0 && clientX <= window.innerWidth && clientY <= window.innerHeight;
         if (!inIframeView) return;
-        hoveredImageRef.current = null;
-        resumeAnimTracks();
-        postToParentRef.current({ type: "ow:image-unhover" });
+        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" });
+        }
+        const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
+        const textEl = 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;
+        });
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        if (textEl && !textEl.hasAttribute("contenteditable")) textEl.setAttribute("data-ohw-hovered", "");
       }
     };
     const probeHoverCardsAt = (clientX, clientY, fromParentViewport = false) => {
@@ -4350,15 +4397,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) => {
@@ -4569,11 +4619,14 @@ function OhhwellsBridge() {
         setToggleState((prev) => prev ? { ...prev, rect } : null);
       }
       if (hoveredImageRef.current) {
-        const r2 = hoveredImageRef.current.getBoundingClientRect();
+        const el = hoveredImageRef.current;
+        const r2 = el.getBoundingClientRect();
+        const hasTextOverlap = el.dataset.ohwEditable === "bg-image" || el.hasAttribute("data-ohw-editable-state");
         postToParentRef.current({
           type: "ow:image-hover",
-          key: hoveredImageRef.current.dataset.ohwKey ?? "",
-          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height }
+          key: el.dataset.ohwKey ?? "",
+          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+          hasTextOverlap
         });
       }
     };
@@ -4690,6 +4743,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]);
   (0, import_react.useEffect)(() => {