@ohhwells/bridge 0.1.13 → 0.1.14

package/dist/index.js

@@ -3396,9 +3396,7 @@ function ToggleGroupItem({
     Toggle,
     {
       pressed: groupValue === value,
-      onPressedChange: (pressed) => {
-        if (pressed) onValueChange(value);
-      },
+      onPressedChange: () => onValueChange(value),
       className: cn(
         "text-foreground cursor-pointer hover:bg-transparent hover:text-foreground",
         "data-[state=on]:bg-background data-[state=on]:shadow-sm",
@@ -3793,7 +3791,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ jsx3(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ jsx3(ToggleGroupItem, { value: state, children: state }, state))
     }
   );
 }
@@ -3803,19 +3801,20 @@ 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", "");
@@ -3846,9 +3845,6 @@ 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(() => {
   });
@@ -3911,10 +3907,6 @@ 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;
@@ -3962,7 +3954,7 @@ function OhhwellsBridge() {
     }
     let cancelled = false;
     setFetchState("loading");
-    const apiUrl = globalThis.process?.env?.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+    const apiUrl = globalThis.process?.env?.NEXT_PUBLIC_FLOWOPS_API_URL ?? "http://localhost:4005";
     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 ?? {};
@@ -4089,7 +4081,6 @@ 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", "");
@@ -4116,12 +4107,10 @@ 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;
       }
@@ -4184,15 +4173,12 @@ function OhhwellsBridge() {
       }
       return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
     };
-    const postImageHover = (imgEl, isDragOver = false, forceTextOverlap) => {
+    const postImageHover = (imgEl, isDragOver = false) => {
       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]");
@@ -4239,7 +4225,7 @@ function OhhwellsBridge() {
       }
       return smallest;
     };
-    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
+    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false, fromOverlay = false) => {
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
@@ -4265,52 +4251,33 @@ 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 (imageUnhoverTimerRef.current) {
-          clearTimeout(imageUnhoverTimerRef.current);
-          imageUnhoverTimerRef.current = null;
-        }
-        if (imageShowTimerRef.current) {
-          clearTimeout(imageShowTimerRef.current);
-          imageShowTimerRef.current = null;
+        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;
         }
-        if (textEditable) {
-          if (textEditable.hasAttribute("contenteditable")) {
+        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 (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 || hoveredImageHasTextOverlapRef.current) {
+        if (imgEl !== hoveredImageRef.current) {
           hoveredImageRef.current = imgEl;
           postImageHover(imgEl, isDragOver);
         } else if (isDragOver) {
@@ -4319,29 +4286,9 @@ 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" });
-        }
-        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", "");
+        hoveredImageRef.current = null;
+        resumeAnimTracks();
+        postToParentRef.current({ type: "ow:image-unhover" });
       }
     };
     const probeHoverCardsAt = (clientX, clientY, fromParentViewport = false) => {
@@ -4360,18 +4307,15 @@ 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;
-      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);
-        }
+      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);
       }
     };
     const handleMouseMove = (e) => {
@@ -4381,9 +4325,9 @@ function OhhwellsBridge() {
     };
     const handlePointerSync = (e) => {
       if (e.data?.type !== "ow:pointer-sync") return;
-      const { clientX, clientY } = e.data;
+      const { clientX, clientY, fromOverlay } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      probeImageAt(clientX, clientY);
+      probeImageAt(clientX, clientY, false, false, fromOverlay ?? false);
       probeHoverCardsAt(clientX, clientY);
     };
     const handleDragOver = (e) => {
@@ -4396,8 +4340,7 @@ function OhhwellsBridge() {
       e.dataTransfer.dropEffect = "copy";
       if (hoveredImageRef.current !== el) {
         hoveredImageRef.current = el;
-        const isStateCard = !!el.closest("[data-ohw-editable-state]");
-        postImageHover(el, true, isStateCard ? true : void 0);
+        postImageHover(el, true);
       }
     };
     const handleDragLeave = (e) => {
@@ -4583,13 +4526,11 @@ function OhhwellsBridge() {
         setToggleState((prev) => prev ? { ...prev, rect } : null);
       }
       if (hoveredImageRef.current) {
-        const el = hoveredImageRef.current;
-        const r2 = el.getBoundingClientRect();
+        const r2 = hoveredImageRef.current.getBoundingClientRect();
         postToParentRef.current({
           type: "ow:image-hover",
-          key: el.dataset.ohwKey ?? "",
-          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
-          hasTextOverlap: hoveredImageHasTextOverlapRef.current
+          key: hoveredImageRef.current.dataset.ohwKey ?? "",
+          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height }
         });
       }
     };
@@ -4663,49 +4604,12 @@ 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);
@@ -4739,13 +4643,10 @@ 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(() => {