@ohhwells/bridge 0.1.68-next.199 → 0.1.68-next.200

package/dist/index.cjs

@@ -10857,7 +10857,8 @@ function findSocialsRow(el) {
 }
 function isSocialsRow(el) {
   const anchors = Array.from(el.querySelectorAll("a"));
-  return anchors.length > 0 && anchors.every((anchor) => isSocialItem(anchor));
+  if (!anchors.length || !anchors.some((anchor) => isSocialItem(anchor))) return false;
+  return findSocialsRow(anchors[0]) === el;
 }
 var MAX_SOCIAL_ITEMS_PER_ROW = 7;
 function canAddSocialItem(row) {
@@ -10895,6 +10896,7 @@ function markSocialsRows(root = document) {
   });
   listSocialsRows(root).forEach((row) => {
     row.setAttribute(SOCIALS_ROW_ATTR, "");
+    allowRowToWrap(row);
     const items = listSocialItems(row);
     const firstUnit = items[0] ? socialRowUnit(items[0], row) : null;
     if (firstUnit) rowTemplates.set(rowKeyOf(row), firstUnit.outerHTML);
@@ -11189,7 +11191,29 @@ function applySocialsDisplayToRow(row, display) {
     const icon = item.querySelector(ICON_SELECTOR);
     if (label) label.style.display = display.text ? "" : "none";
     if (icon) icon.style.display = display.icon ? "" : "none";
+    layOutIconAndLabel(item, Boolean(display.text && display.icon));
   });
+  allowRowToWrap(row);
+}
+function layOutIconAndLabel(item, on) {
+  const hasBoth = Boolean(item.querySelector(ICON_SELECTOR)) && Boolean(socialLabelElement(item));
+  if (!hasBoth) {
+    item.style.display = "";
+    item.style.alignItems = "";
+    item.style.gap = "";
+    item.style.whiteSpace = "";
+    item.style.flex = "";
+    return;
+  }
+  item.style.display = on ? "inline-flex" : "";
+  item.style.alignItems = on ? "center" : "";
+  item.style.gap = on ? "8px" : "";
+  item.style.whiteSpace = on ? "nowrap" : "";
+  item.style.flex = on ? "0 0 auto" : "";
+}
+function allowRowToWrap(row) {
+  const display = row.ownerDocument.defaultView?.getComputedStyle(row).display ?? "";
+  if (display === "flex" || display === "inline-flex") row.style.flexWrap = "wrap";
 }
 function applySocialsDisplayFromContent(content, root = document) {
   const stored = parseSocialsDisplay(content[SOCIALS_DISPLAY_KEY]);
@@ -16116,6 +16140,7 @@ function OhhwellsBridge() {
   }, [clearSelectedAttr]);
   const markSelected = (0, import_react17.useCallback)((el) => {
     clearSelectedAttr();
+    el.removeAttribute("data-ohw-hovered");
     el.setAttribute("data-ohw-selected", "");
   }, [clearSelectedAttr]);
   const resolveHrefKeyElement = (0, import_react17.useCallback)((hrefKey) => {
@@ -18057,6 +18082,16 @@ function OhhwellsBridge() {
             return;
           }
         }
+        if (allowNavContainerHover) {
+          const socialsRow = isSocialsRow(target) ? target : null;
+          if (socialsRow && !getSocialItem(target) && selected2 !== socialsRow) {
+            hoveredNavContainerRef.current = socialsRow;
+            setHoveredNavContainerRect(socialsRow.getBoundingClientRect());
+            hoveredItemElRef.current = null;
+            setHoveredItemRect(null);
+            return;
+          }
+        }
         if (allowFooterLinksHover) {
           const navContainer = target.closest("[data-ohw-nav-container]");
           if (!navContainer) {
@@ -18142,7 +18177,7 @@ function OhhwellsBridge() {
           clearHrefKeyHover(hoverTarget);
           hoveredItemElRef.current = hoverTarget;
           setHoveredItemRect(hoverTarget.getBoundingClientRect());
-        } else if (!isInsideNavigationItem(editable)) {
+        } else if (!isInsideNavigationItem(editable) && hoverTarget !== selectedElRef.current) {
           hoverTarget.setAttribute("data-ohw-hovered", "");
           if (editable.closest("footer") || editable.closest('[data-ohw-section="footer"]')) {
             hoveredNavContainerRef.current = null;
@@ -18735,6 +18770,35 @@ function OhhwellsBridge() {
         }
       }
     };
+    const probeSocialsRowAt = (clientX, clientY, fromParentViewport = false) => {
+      const wasSocialsRow = Boolean(hoveredNavContainerRef.current?.hasAttribute(SOCIALS_ROW_ATTR));
+      const clear = () => {
+        if (!wasSocialsRow) return false;
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        return false;
+      };
+      if (linkPopoverOpenRef.current || toolbarVariantRef.current === "select-frame") return clear();
+      const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
+      const SLACK = 6;
+      for (const row of Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`))) {
+        const rect = row.getBoundingClientRect();
+        const inside = x >= rect.left - SLACK && x <= rect.right + SLACK && y >= rect.top - SLACK && y <= rect.bottom + SLACK;
+        if (!inside) continue;
+        if (selectedElRef.current === row) return clear();
+        const overItem = listSocialItems(row).some((item) => {
+          const box = item.getBoundingClientRect();
+          return x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+        });
+        if (overItem) return clear();
+        hoveredNavContainerRef.current = row;
+        setHoveredNavContainerRect(rect);
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        return true;
+      }
+      return clear();
+    };
     const probeSectionGapAt = (clientX, clientY, fromParentViewport = false) => {
       if (linkPopoverOpenRef.current) {
         if (hoveredGapRef.current) {
@@ -18791,6 +18855,7 @@ function OhhwellsBridge() {
         setSectionGap(null);
         return;
       }
+      if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
@@ -18804,6 +18869,7 @@ function OhhwellsBridge() {
         clearImageHover();
         return;
       }
+      if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
@@ -20717,7 +20783,7 @@ function OhhwellsBridge() {
         )),
         hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
         hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-        hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
+        hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
         formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ItemInteractionLayer,
           {