@ohhwells/bridge 0.1.52-next.132 → 0.1.52-next.133

package/README.md

@@ -194,12 +194,23 @@ For links whose **destination URL** is edited in the canvas, use a plain `<a>` w
 </a>
 ```
 
+Section / body CTAs use the same two-phase select + Edit-link toolbar with `data-ohw-role="button"` (preferred). `navbar-button` remains supported as an alias for nav header CTAs:
+
+```tsx
+<a href="/contact" data-ohw-href-key="hero-cta-href" data-ohw-role="button" data-ohw-drag-disabled="true">
+  <span data-ohw-editable="text" data-ohw-key="hero-cta-label">
+    Get started
+  </span>
+</a>
+```
+
 | Attribute | Purpose |
 |-----------|---------|
 | `data-ohw-href-key` | Storage key for the link destination |
 | `href` | Default URL for SSR / first paint |
 | `data-ohw-key` + `data-ohw-editable` on inner span | Editable label text |
-| `data-ohw-role="navbar-button"` | Navbar CTA — two-phase select + link-action toolbar |
+| `data-ohw-role="button"` | Section CTA — two-phase select + link-action toolbar (no reorder/More) |
+| `data-ohw-role="navbar-button"` | Alias of `button` for navbar / header CTAs |
 
 The bridge persists and restores `href` values (including after React re-renders). No template-side wrapper component is required.
 

package/dist/index.cjs

@@ -84,6 +84,9 @@ function getStoredLinkHref(key) {
 function clearStoredLinkHref(key) {
   linkHrefStore.delete(key);
 }
+function listStoredLinkHrefs() {
+  return Array.from(linkHrefStore.entries());
+}
 function enforceLinkHrefs() {
   document.querySelectorAll("[data-ohw-href-key]").forEach((el) => {
     const key = el.getAttribute("data-ohw-href-key") ?? "";
@@ -5646,6 +5649,42 @@ function AiSectionOverlay({
 var import_react_dom3 = require("react-dom");
 var import_navigation2 = require("next/navigation");
 
+// src/lib/cta-button.ts
+function isCtaButton(el) {
+  return Boolean(
+    el.closest('[data-ohw-role="navbar-button"], [data-ohw-role="button"]')
+  );
+}
+var CTA_BUTTON_SELECTOR = '[data-ohw-role="navbar-button"], [data-ohw-role="button"]';
+
+// src/lib/media-overlay-guards.ts
+var BRIDGE_CHROME_SELECTOR = [
+  "[data-ohw-toolbar]",
+  "[data-ohw-item-toolbar-anchor]",
+  "[data-ohw-drag-handle-container]",
+  '[data-slot="drag-handle"]',
+  "[data-ohw-more-menu]",
+  '[data-slot="dropdown-menu-content"]'
+].join(", ");
+function containsPoint(el, x, y) {
+  const r2 = el.getBoundingClientRect();
+  if (r2.width <= 0 || r2.height <= 0) return false;
+  return x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom;
+}
+function isPointOverBridgeChrome(x, y) {
+  for (const el of document.querySelectorAll(BRIDGE_CHROME_SELECTOR)) {
+    if (containsPoint(el, x, y)) return true;
+  }
+  return false;
+}
+function findCtaButtonAtPoint(x, y, media) {
+  const hits = Array.from(
+    document.querySelectorAll(CTA_BUTTON_SELECTOR)
+  ).filter((el) => containsPoint(el, x, y) && !(media && el.contains(media)));
+  if (hits.length === 0) return null;
+  return hits.reduce((best, el) => best.contains(el) ? el : best);
+}
+
 // src/lib/session-search.ts
 var STORAGE_KEY = "ohw-preserved-search";
 function readPreservedSearch() {
@@ -7239,12 +7278,9 @@ function getLinkHref(el) {
   }
   return el.getAttribute("href") ?? "";
 }
-function isNavbarButton(el) {
-  return el.hasAttribute("data-ohw-role") && el.getAttribute("data-ohw-role") === "navbar-button";
-}
 function isNavbarLinkItem(el) {
   if (!el.matches("[data-ohw-href-key]")) return false;
-  if (isNavbarButton(el)) return false;
+  if (isCtaButton(el)) return false;
   if (!el.querySelector('[data-ohw-editable="text"]')) return false;
   return Boolean(el.closest("nav, [data-ohw-nav-container], [data-ohw-nav-drawer]"));
 }
@@ -7325,7 +7361,7 @@ function buildNavLink(index, href, label, template) {
 }
 function insertNavLinkInContainer(container, anchor, afterHrefKey) {
   if (!afterHrefKey) {
-    const cta = container.querySelector('[data-ohw-role="navbar-button"]');
+    const cta = container.querySelector(CTA_BUTTON_SELECTOR);
     if (cta && cta.parentElement === container) {
       container.insertBefore(anchor, cta);
       return;
@@ -9316,8 +9352,7 @@ function useNavItemDrag({
   setSiblingHintRects,
   setToolbarRect,
   getNavigationItemAnchor: getNavigationItemAnchor2,
-  isDragHandleDisabled: isDragHandleDisabled2,
-  isNavbarButton: isNavbarButton3
+  isDragHandleDisabled: isDragHandleDisabled2
 }) {
   const navDragRef = (0, import_react11.useRef)(null);
   const [navDropSlots, setNavDropSlots] = (0, import_react11.useState)([]);
@@ -9464,7 +9499,7 @@ function useNavItemDrag({
       if (footerDragRef.current) return false;
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
-      if (isNavbarButton3(anchor) || isDragHandleDisabled2(anchor)) return false;
+      if (isCtaButton(anchor) || isDragHandleDisabled2(anchor)) return false;
       beginNavDrag({
         hrefKey,
         wasSelected,
@@ -9475,7 +9510,7 @@ function useNavItemDrag({
       });
       return true;
     },
-    [beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
+    [beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
   );
   const onNavDragOver = (0, import_react11.useCallback)(
     (e) => {
@@ -9511,7 +9546,7 @@ function useNavItemDrag({
       const anchor = getNavigationItemAnchor2(target);
       const hrefKey = anchor?.getAttribute("data-ohw-href-key") ?? null;
       if (!anchor || !isNavbarHrefKey(hrefKey)) return;
-      if (isNavbarButton3(anchor) || isDragHandleDisabled2(anchor)) return;
+      if (isCtaButton(anchor) || isDragHandleDisabled2(anchor)) return;
       navPointerDragRef.current = {
         el: anchor,
         startX: e.clientX,
@@ -9608,7 +9643,7 @@ function useNavItemDrag({
     getNavigationItemAnchor2,
     isDragHandleDisabled2,
     isEditMode,
-    isNavbarButton3,
+    isCtaButton,
     linkPopoverOpenRef,
     selectedElRef,
     setLinkPopover,
@@ -9618,7 +9653,7 @@ function useNavItemDrag({
     (selected, clientX, clientY, pointerId) => {
       const hrefKey = selected.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
-      if (isNavbarButton3(selected) || isDragHandleDisabled2(selected)) return false;
+      if (isCtaButton(selected) || isDragHandleDisabled2(selected)) return false;
       navPointerDragRef.current = {
         el: selected,
         startX: clientX,
@@ -9629,7 +9664,7 @@ function useNavItemDrag({
       };
       return true;
     },
-    [isDragHandleDisabled2, isNavbarButton3]
+    [isDragHandleDisabled2, isCtaButton]
   );
   return {
     navDragRef,
@@ -9831,7 +9866,10 @@ function collectEditableNodes(extraContent, root = document) {
     if (!key) return;
     nodes.push({ key, type: "link", text: getLinkHref3(el) });
   });
-  if (extraContent && !isScoped) {
+  for (const [key, href] of listStoredLinkHrefs()) {
+    nodes.push({ key, type: "link", text: href });
+  }
+  if (extraContent) {
     for (const key of [NAV_ORDER_KEY, FOOTER_ORDER_KEY, NAV_COUNT_KEY]) {
       const text = extraContent[key];
       if (typeof text === "string" && text.length > 0) {
@@ -10565,9 +10603,6 @@ function getHrefKeyFromElement(el) {
   if (!key) return null;
   return { anchor, key };
 }
-function isNavbarButton2(el) {
-  return Boolean(el.closest('[data-ohw-role="navbar-button"]'));
-}
 function isNavDropdownPanelOpen(childrenRoot) {
   if (childrenRoot.closest("[data-ohw-nav-drawer]")) return true;
   const group = childrenRoot.closest("[data-ohw-nav-group]");
@@ -10620,7 +10655,7 @@ function listNavigationItems() {
   ).filter((el) => isNavigationItem2(el));
 }
 function getNavigationItemReorderState(anchor) {
-  if (isNavbarButton2(anchor)) return { key: null, disabled: false };
+  if (isCtaButton(anchor)) return { key: null, disabled: false };
   return getReorderHandleStateFromAnchor(anchor);
 }
 function getReorderHandleState(el) {
@@ -10722,7 +10757,7 @@ function findHoveredNavOrFooterContainer(x, y) {
 }
 function isPointOverNavItem(container, x, y) {
   return Array.from(container.querySelectorAll("[data-ohw-href-key]")).some((el) => {
-    if (!isNavigationItem2(el) || isNavbarButton2(el)) return false;
+    if (!isNavigationItem2(el) || isCtaButton(el)) return false;
     if (!isNavItemPointerTarget(el)) return false;
     const itemRect = el.getBoundingClientRect();
     return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
@@ -10736,7 +10771,7 @@ function isPointOverFooterColumn(x, y) {
 }
 function resolveNavContainerSelectionTarget(target, clientX, clientY) {
   if (getNavigationItemAnchor(target)) return null;
-  if (target.closest('[data-ohw-role="navbar-button"]')) return null;
+  if (target.closest(CTA_BUTTON_SELECTOR)) return null;
   const plainLink = target.closest("a");
   if (plainLink && !plainLink.hasAttribute("data-ohw-href-key") && !plainLink.closest("[data-ohw-nav-container]")) {
     return null;
@@ -11543,8 +11578,7 @@ function OhhwellsBridge() {
     setSiblingHintRects,
     setToolbarRect,
     getNavigationItemAnchor,
-    isDragHandleDisabled,
-    isNavbarButton: isNavbarButton2
+    isDragHandleDisabled
   });
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
@@ -11804,7 +11838,7 @@ function OhhwellsBridge() {
     selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
     markSelected(navAnchor);
-    setSelectedIsCta(isNavbarButton2(navAnchor));
+    setSelectedIsCta(isCtaButton(navAnchor));
     const isDropdownTrigger = !isNestedNavChild(navAnchor) && (navItemHasDropdownChildren(navAnchor) || navItemOwnsDropdownPanel(navAnchor));
     if (isNestedNavChild(navAnchor)) {
       setNavGroupForceOpen(navAnchor, true);
@@ -12325,7 +12359,7 @@ function OhhwellsBridge() {
     selectedHrefKeyRef.current = anchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
     markSelected(anchor);
-    setSelectedIsCta(isNavbarButton2(anchor));
+    setSelectedIsCta(isCtaButton(anchor));
     clearHrefKeyHover(anchor);
     const isDropdownTrigger = !isNestedNavChild(anchor) && (navItemHasDropdownChildren(anchor) || navItemOwnsDropdownPanel(anchor));
     if (isNestedNavChild(anchor)) {
@@ -13408,7 +13442,7 @@ function OhhwellsBridge() {
         const navItemHit = Array.from(
           container.querySelectorAll("[data-ohw-href-key]")
         ).filter((el) => {
-          if (!isNavigationItem2(el) || isNavbarButton2(el)) return false;
+          if (!isNavigationItem2(el) || isCtaButton(el)) return false;
           if (!isNavItemPointerTarget(el)) return false;
           const itemRect = el.getBoundingClientRect();
           return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
@@ -13550,6 +13584,22 @@ function OhhwellsBridge() {
           }
           return;
         }
+        if (!isDragOver && isPointOverBridgeChrome(x2, y2)) {
+          dismissImageHover();
+          return;
+        }
+        const ctaHit = isDragOver ? null : findCtaButtonAtPoint(x2, y2, imgEl);
+        if (ctaHit) {
+          dismissImageHover();
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          const selected = selectedElRef.current;
+          if (selected !== ctaHit && !selected?.contains(ctaHit)) {
+            clearHrefKeyHover(ctaHit);
+            hoveredItemElRef.current = ctaHit;
+            setHoveredItemRect(ctaHit.getBoundingClientRect());
+          }
+          return;
+        }
         const topEl = document.elementFromPoint(x2, y2);
         if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]')) {
           if (hoveredImageRef.current) {
@@ -13673,7 +13723,7 @@ function OhhwellsBridge() {
         const navLinkHit = Array.from(
           document.querySelectorAll("nav [data-ohw-href-key], footer [data-ohw-href-key]")
         ).find((el) => {
-          if (!isNavigationItem2(el) || isNavbarButton2(el)) return false;
+          if (!isNavigationItem2(el) || isCtaButton(el)) return false;
           if (!isNavItemPointerTarget(el)) return false;
           const er = el.getBoundingClientRect();
           return x2 >= er.left && x2 <= er.right && y2 >= er.top && y2 <= er.bottom;
@@ -14547,7 +14597,7 @@ function OhhwellsBridge() {
       if (navRoot && navContainer) {
         const rr = navRoot.getBoundingClientRect();
         if (clientX >= rr.left && clientX <= rr.right && clientY >= rr.top && clientY <= rr.bottom && !isPointOverNavItem(navContainer, clientX, clientY)) {
-          const book = navRoot.querySelector('[data-ohw-role="navbar-button"]');
+          const book = navRoot.querySelector(CTA_BUTTON_SELECTOR);
           if (book) {
             const br = book.getBoundingClientRect();
             if (clientX >= br.left && clientX <= br.right && clientY >= br.top && clientY <= br.bottom) {
@@ -15145,6 +15195,7 @@ function OhhwellsBridge() {
         return;
       }
       const { key } = session;
+      setStoredLinkHref(key, target);
       applyLinkByKey(key, target);
       editContentRef.current = { ...editContentRef.current, [key]: target };
       postToParent2({ type: "ow:change", nodes: [{ key, text: target }] });