@ohhwells/bridge 0.1.14 → 0.1.15

package/dist/index.js

@@ -3396,7 +3396,9 @@ function ToggleGroupItem({
     Toggle,
     {
       pressed: groupValue === value,
-      onPressedChange: () => onValueChange(value),
+      onPressedChange: (pressed) => {
+        if (pressed) onValueChange(value);
+      },
       className: cn(
         "text-foreground cursor-pointer hover:bg-transparent hover:text-foreground",
         "data-[state=on]:bg-background data-[state=on]:shadow-sm",
@@ -3791,7 +3793,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 +3803,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 +3846,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(() => {
   });
@@ -3907,6 +3911,10 @@ function OhhwellsBridge() {
   const activate = useCallback((el) => {
     if (activeElRef.current === el) return;
     deactivate();
+    if (hoveredImageRef.current) {
+      hoveredImageRef.current = null;
+      postToParentRef.current({ type: "ow:image-unhover" });
+    }
     el.setAttribute("contenteditable", "true");
     el.removeAttribute("data-ohw-hovered");
     activeElRef.current = el;
@@ -3954,7 +3962,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 ?? {};
@@ -4081,6 +4089,7 @@ 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; }
     `;
       const forceHover = document.createElement("style");
       forceHover.setAttribute("data-ohw-active-state-style", "");
@@ -4107,10 +4116,12 @@ function OhhwellsBridge() {
       if (editable) {
         if (editable.dataset.ohwEditable === "image" || editable.dataset.ohwEditable === "bg-image") {
           e.preventDefault();
+          e.stopPropagation();
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "" });
           return;
         }
         e.preventDefault();
+        e.stopPropagation();
         activateRef.current(editable);
         return;
       }
@@ -4173,12 +4184,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 ?? false;
+      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]");
@@ -4225,7 +4239,7 @@ function OhhwellsBridge() {
       }
       return smallest;
     };
-    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false, fromOverlay = false) => {
+    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
@@ -4251,33 +4265,52 @@ function OhhwellsBridge() {
           }
           return;
         }
-        const topEditable = topEl?.closest("[data-ohw-editable]");
-        if (topEditable && topEditable.dataset.ohwEditable !== "image" && topEditable.dataset.ohwEditable !== "bg-image") {
-          if (topEditable.hasAttribute("contenteditable") && fromOverlay) return;
-          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) {
@@ -4286,9 +4319,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) => {
@@ -4307,15 +4360,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) => {
@@ -4325,9 +4381,9 @@ function OhhwellsBridge() {
     };
     const handlePointerSync = (e) => {
       if (e.data?.type !== "ow:pointer-sync") return;
-      const { clientX, clientY, fromOverlay } = e.data;
+      const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      probeImageAt(clientX, clientY, false, false, fromOverlay ?? false);
+      probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
     };
     const handleDragOver = (e) => {
@@ -4340,7 +4396,8 @@ function OhhwellsBridge() {
       e.dataTransfer.dropEffect = "copy";
       if (hoveredImageRef.current !== el) {
         hoveredImageRef.current = el;
-        postImageHover(el, true);
+        const isStateCard = !!el.closest("[data-ohw-editable-state]");
+        postImageHover(el, true, isStateCard ? true : void 0);
       }
     };
     const handleDragLeave = (e) => {
@@ -4526,11 +4583,13 @@ function OhhwellsBridge() {
         setToggleState((prev) => prev ? { ...prev, rect } : null);
       }
       if (hoveredImageRef.current) {
-        const r2 = hoveredImageRef.current.getBoundingClientRect();
+        const el = hoveredImageRef.current;
+        const r2 = el.getBoundingClientRect();
         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: hoveredImageHasTextOverlapRef.current
         });
       }
     };
@@ -4604,12 +4663,49 @@ function OhhwellsBridge() {
       parentScrollRef.current = { iframeOffsetTop, headerH, canvasH };
       if (activeElRef.current) applyToolbarPos(activeElRef.current.getBoundingClientRect());
     };
+    const handleClickAt = (e) => {
+      if (e.data?.type !== "ow:click-at") return;
+      const { clientX, clientY } = e.data;
+      const allImages = Array.from(
+        document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]')
+      ).filter((el) => !!el.closest("[data-ohw-editable-state]"));
+      const stateCardImage = allImages.find((el) => {
+        const ownerCard = el.closest("[data-ohw-editable-state]");
+        if (ownerCard) {
+          const inHoverState = ownerCard.getAttribute("data-ohw-active-state") === "hover";
+          const elState = el.dataset.ohwState;
+          if (el === ownerCard && inHoverState) return false;
+          if (elState === "default" && inHoverState) return false;
+          if (elState === "hover" && !inHoverState) return false;
+        }
+        const r2 = el.getBoundingClientRect();
+        return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+      });
+      if (stateCardImage) {
+        postToParentRef.current({ type: "ow:image-pick", key: stateCardImage.dataset.ohwKey ?? "" });
+        return;
+      }
+      const textEditable = Array.from(
+        document.querySelectorAll(
+          '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])'
+        )
+      ).find((el) => {
+        const r2 = el.getBoundingClientRect();
+        return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+      });
+      if (textEditable) {
+        activateRef.current(textEditable);
+        return;
+      }
+      deactivateRef.current();
+    };
     window.addEventListener("message", handleSave);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleAnimLock);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
+    window.addEventListener("message", handleClickAt);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("paste", handlePaste, true);
     document.addEventListener("input", handleInput, true);
@@ -4643,10 +4739,13 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);
       window.removeEventListener("message", handlePointerSync);
+      window.removeEventListener("message", handleClickAt);
       window.removeEventListener("message", handleHydrate);
       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(() => {