@ohhwells/bridge 0.1.42-next.88 → 0.1.42-next.90

package/dist/index.cjs

@@ -8142,6 +8142,11 @@ function getNavigationItemAnchor(el) {
 function isNavigationItem(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function listNavigationItems() {
+  return Array.from(
+    document.querySelectorAll("nav [data-ohw-href-key], footer [data-ohw-href-key]")
+  ).filter((el) => isNavigationItem(el));
+}
 function getNavigationItemReorderState(anchor) {
   if (isNavbarButton2(anchor)) return { key: null, disabled: false };
   return getReorderHandleStateFromAnchor(anchor);
@@ -8174,7 +8179,7 @@ function countFooterNavItems(el) {
   return Array.from(el.querySelectorAll("[data-ohw-href-key]")).filter(isNavigationItem).length;
 }
 function findFooterItemGroup(item) {
-  const explicit = item.closest("[data-ohw-footer-column]");
+  const explicit = item.closest("[data-ohw-footer-col], [data-ohw-footer-column]");
   if (explicit) return explicit;
   const footer = item.closest("footer");
   if (!footer) return null;
@@ -8191,7 +8196,7 @@ function isNavigationRoot(el) {
 function isInferredFooterGroup(el) {
   const footer = el.closest("footer");
   if (!footer || el === footer) return false;
-  if (el.hasAttribute("data-ohw-footer-column")) return true;
+  if (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column")) return true;
   return countFooterNavItems(el) >= 2;
 }
 function isNavigationContainer(el) {
@@ -8201,7 +8206,7 @@ function isNavbarLinksContainer(el) {
   return el.hasAttribute("data-ohw-nav-container");
 }
 function getFooterColumn(el) {
-  return el.closest("[data-ohw-footer-column]");
+  return el.closest("[data-ohw-footer-col], [data-ohw-footer-column]");
 }
 function resolveFooterColumnSelectionTarget(target, clientX, clientY) {
   if (getNavigationItemAnchor(target)) return null;
@@ -8225,7 +8230,7 @@ function isPointOverNavigation(x, y) {
 function findHoveredNavOrFooterContainer(x, y) {
   const candidates = [
     ...document.querySelectorAll("[data-ohw-nav-container]"),
-    ...document.querySelectorAll("[data-ohw-footer-column]")
+    ...listFooterColumns()
   ];
   for (const container of candidates) {
     const r2 = container.getBoundingClientRect();
@@ -8272,11 +8277,23 @@ function getNavigationSelectionParent(el) {
     if (footerGroup) return footerGroup;
     return getNavigationRoot(el);
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup(el)) {
     return getNavigationRoot(el);
   }
   return null;
 }
+function collectNavigationItemSiblingHintRects(selected) {
+  if (!isNavigationItem(selected)) return [];
+  const footerColumn = getFooterColumn(selected);
+  if (footerColumn) {
+    return listFooterLinksInColumn(footerColumn).filter((link) => link !== selected).map((link) => link.getBoundingClientRect());
+  }
+  const navContainer = selected.closest("[data-ohw-nav-container], [data-ohw-nav-drawer]");
+  if (navContainer) {
+    return Array.from(navContainer.querySelectorAll("[data-ohw-href-key]")).filter((el) => isNavigationItem(el) && el !== selected).map((el) => el.getBoundingClientRect());
+  }
+  return listNavigationItems().filter((el) => el !== selected).map((el) => el.getBoundingClientRect());
+}
 function placeCaretAtPoint(el, x, y) {
   const selection = window.getSelection();
   if (!selection) return;
@@ -9162,6 +9179,7 @@ function OhhwellsBridge() {
       setIsFooterFrameSelection(false);
       setToolbarVariant("link-action");
       setToolbarRect(link.getBoundingClientRect());
+      setSiblingHintRects(collectNavigationItemSiblingHintRects(link));
       return;
     }
     const colAttr = selectedFooterColAttrRef.current;
@@ -9188,6 +9206,7 @@ function OhhwellsBridge() {
     setReorderDragDisabled(disabled);
     setToolbarVariant("link-action");
     setToolbarRect(navAnchor.getBoundingClientRect());
+    setSiblingHintRects(collectNavigationItemSiblingHintRects(navAnchor));
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [markSelected]);
@@ -9553,7 +9572,7 @@ function OhhwellsBridge() {
     hoveredItemElRef.current = null;
     siblingHintElRef.current = null;
     setSiblingHintRect(null);
-    setSiblingHintRects([]);
+    setSiblingHintRects(collectNavigationItemSiblingHintRects(anchor));
     setIsItemDragging(false);
     const { key, disabled } = getNavigationItemReorderState(anchor);
     setReorderHrefKey(key);
@@ -10206,19 +10225,23 @@ function OhhwellsBridge() {
         setHoveredNavContainerRect(null);
         return;
       }
-      if (toolbarVariantRef.current !== "select-frame") {
-        const frameContainer = target.closest("[data-ohw-nav-container]") ?? target.closest("[data-ohw-footer-col]") ?? target.closest("[data-ohw-footer-column]");
-        if (frameContainer && !getNavigationItemAnchor(target)) {
-          hoveredNavContainerRef.current = frameContainer;
-          setHoveredNavContainerRect(frameContainer.getBoundingClientRect());
+      const itemSelected = toolbarVariantRef.current === "link-action" && Boolean(selectedElRef.current && isNavigationItem(selectedElRef.current));
+      if (toolbarVariantRef.current !== "select-frame" && !itemSelected) {
+        const navContainer = target.closest("[data-ohw-nav-container]");
+        if (navContainer && !getNavigationItemAnchor(target)) {
+          hoveredNavContainerRef.current = navContainer;
+          setHoveredNavContainerRect(navContainer.getBoundingClientRect());
           hoveredItemElRef.current = null;
           setHoveredItemRect(null);
           return;
         }
-        if (!target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]")) {
+        if (!target.closest("[data-ohw-nav-container]")) {
           hoveredNavContainerRef.current = null;
           setHoveredNavContainerRect(null);
         }
+      } else if (itemSelected) {
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
       }
       const navAnchor = getNavigationItemAnchor(target);
       if (navAnchor) {
@@ -10235,7 +10258,7 @@ function OhhwellsBridge() {
       if (footerCol) {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        if (selectedElRef.current === footerCol) return;
+        if (itemSelected || selectedElRef.current === footerCol) return;
         hoveredItemElRef.current = footerCol;
         setHoveredItemRect(footerCol.getBoundingClientRect());
         return;
@@ -10257,19 +10280,21 @@ function OhhwellsBridge() {
     };
     const handleMouseOut = (e) => {
       const target = e.target;
-      if (target.closest("[data-ohw-nav-container], [data-ohw-footer-column]")) {
+      if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]")) {
         const related2 = e.relatedTarget instanceof Element ? e.relatedTarget : null;
-        if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-column], [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button]")) {
+        if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button]")) {
           return;
         }
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
       }
-      const footerCol = target.closest("[data-ohw-footer-col]");
+      const footerCol = target.closest("[data-ohw-footer-col]") ?? target.closest("[data-ohw-footer-column]");
       if (footerCol && hoveredItemElRef.current === footerCol) {
         const related2 = e.relatedTarget instanceof Element ? e.relatedTarget : null;
         if (related2?.closest("[data-ohw-drag-handle-container], [data-ohw-item-interaction]")) return;
-        if (related2?.closest("[data-ohw-footer-col]") === footerCol) return;
+        if (related2?.closest("[data-ohw-footer-col], [data-ohw-footer-column]") === footerCol) {
+          return;
+        }
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
         return;
@@ -10404,17 +10429,16 @@ function OhhwellsBridge() {
       }
     };
     const probeNavigationHoverAt = (x, y) => {
-      if (toolbarVariantRef.current === "select-frame") {
+      const itemSelected = toolbarVariantRef.current === "link-action" && Boolean(selectedElRef.current && isNavigationItem(selectedElRef.current));
+      if (toolbarVariantRef.current === "select-frame" || itemSelected) {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        return;
       }
-      const frameContainers = [
-        ...document.querySelectorAll("[data-ohw-nav-container]"),
-        ...document.querySelectorAll("[data-ohw-footer-column]")
-      ];
-      let overFrame = null;
-      for (const container of frameContainers) {
+      const navContainers = Array.from(
+        document.querySelectorAll("[data-ohw-nav-container]")
+      );
+      const footerColumns = listFooterColumns();
+      for (const container of [...navContainers, ...footerColumns]) {
         const containerRect = container.getBoundingClientRect();
         const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
         if (!overContainer) continue;
@@ -10433,21 +10457,53 @@ function OhhwellsBridge() {
             clearHrefKeyHover(navItemHit);
             hoveredItemElRef.current = navItemHit;
             setHoveredItemRect(navItemHit.getBoundingClientRect());
+          } else if (hoveredItemElRef.current === navItemHit) {
+            hoveredItemElRef.current = null;
+            setHoveredItemRect(null);
           }
           return;
         }
-        overFrame = container;
-        break;
       }
-      if (!overFrame) {
+      if (toolbarVariantRef.current !== "select-frame" && !itemSelected) {
+        for (const container of navContainers) {
+          const containerRect = container.getBoundingClientRect();
+          const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
+          if (!overContainer) continue;
+          if (isPointOverNavItem(container, x, y)) continue;
+          hoveredNavContainerRef.current = container;
+          setHoveredNavContainerRect(container.getBoundingClientRect());
+          hoveredItemElRef.current = null;
+          setHoveredItemRect(null);
+          return;
+        }
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        return;
+      } else {
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+      }
+      if (!itemSelected) {
+        for (const column of footerColumns) {
+          const containerRect = column.getBoundingClientRect();
+          const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
+          if (!overContainer) continue;
+          if (isPointOverNavItem(column, x, y)) continue;
+          if (selectedElRef.current === column) {
+            if (hoveredItemElRef.current === column) {
+              hoveredItemElRef.current = null;
+              setHoveredItemRect(null);
+            }
+            return;
+          }
+          hoveredItemElRef.current = column;
+          setHoveredItemRect(column.getBoundingClientRect());
+          return;
+        }
+      }
+      if (hoveredItemElRef.current?.hasAttribute("data-ohw-footer-col") || hoveredItemElRef.current?.hasAttribute("data-ohw-footer-column")) {
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
       }
-      hoveredNavContainerRef.current = overFrame;
-      setHoveredNavContainerRect(overFrame.getBoundingClientRect());
-      hoveredItemElRef.current = null;
-      setHoveredItemRect(null);
     };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
       if (linkPopoverOpenRef.current) {
@@ -10468,6 +10524,10 @@ function OhhwellsBridge() {
       }
       hoveredNavContainerRef.current = null;
       setHoveredNavContainerRect(null);
+      if (hoveredItemElRef.current?.hasAttribute("data-ohw-footer-col") || hoveredItemElRef.current?.hasAttribute("data-ohw-footer-column")) {
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+      }
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const tr = toggleEl.getBoundingClientRect();
@@ -11088,10 +11148,14 @@ function OhhwellsBridge() {
         setSiblingHintRect(siblingHintElRef.current.getBoundingClientRect());
       }
       const selected = selectedElRef.current;
-      if (selected && !footerDragRef.current && (selected.hasAttribute("data-ohw-footer-col") || Boolean(selected.closest("footer") && isInferredFooterGroup(selected)))) {
-        setSiblingHintRects(
-          listFooterColumns().filter((column) => column !== selected).map((column) => column.getBoundingClientRect())
-        );
+      if (selected && !footerDragRef.current && !navDragRef.current) {
+        if (selected.hasAttribute("data-ohw-footer-col") || Boolean(selected.closest("footer") && isInferredFooterGroup(selected))) {
+          setSiblingHintRects(
+            listFooterColumns().filter((column) => column !== selected).map((column) => column.getBoundingClientRect())
+          );
+        } else if (isNavigationItem(selected)) {
+          setSiblingHintRects(collectNavigationItemSiblingHintRects(selected));
+        }
       }
       if (footerDragRef.current) {
         const session = footerDragRef.current;
@@ -11336,7 +11400,7 @@ function OhhwellsBridge() {
         }
       }
       const footerColumn = findHoveredNavOrFooterContainer(clientX, clientY);
-      if (footerColumn?.hasAttribute("data-ohw-footer-column")) {
+      if (footerColumn?.hasAttribute("data-ohw-footer-col") || footerColumn?.hasAttribute("data-ohw-footer-column")) {
         selectFrameRef.current(footerColumn);
         return;
       }