@ohhwells/bridge 0.1.52-next.131 → 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;
@@ -8976,6 +9012,57 @@ function deleteFooterColumn(column) {
   };
 }
 
+// src/lib/logo-identity.ts
+var LOGO_TEXT_KEYS = ["nav-logo-text", "footer-logo-text", "logo-text"];
+var LOGO_IMAGE_KEYS = ["nav-logo-image", "footer-logo", "footer-logo-image"];
+var LOGO_PLACEHOLDER_KEY = "logo-is-placeholder";
+var PLACEHOLDER_BUSINESS_NAME = "Business name";
+function resolveLogoDisplayText(text) {
+  const trimmed = (text ?? "").trim();
+  return trimmed || PLACEHOLDER_BUSINESS_NAME;
+}
+function applyLogoIdentity(text, isPlaceholder) {
+  const display = resolveLogoDisplayText(text);
+  const placeholder = isPlaceholder || !text.trim() || display === PLACEHOLDER_BUSINESS_NAME;
+  for (const key of LOGO_TEXT_KEYS) {
+    document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
+      if (el.textContent !== display) el.textContent = display;
+    });
+  }
+  for (const key of LOGO_IMAGE_KEYS) {
+    document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
+      const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
+      if (img) img.alt = display;
+    });
+  }
+  document.querySelectorAll('[data-ohw-role="logo"], [data-ohw-logo]').forEach((el) => {
+    if (placeholder) el.setAttribute("data-ohw-placeholder", "");
+    else el.removeAttribute("data-ohw-placeholder");
+  });
+  return display;
+}
+function readLogoIdentityFromDom() {
+  for (const key of LOGO_TEXT_KEYS) {
+    const el = document.querySelector(`[data-ohw-key="${key}"]`);
+    if (el?.textContent?.trim()) {
+      const text = el.textContent.trim();
+      const logoRoot = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
+      const isPlaceholder = logoRoot?.hasAttribute("data-ohw-placeholder") === true || text === PLACEHOLDER_BUSINESS_NAME;
+      return { text, isPlaceholder };
+    }
+  }
+  const logoImg = document.querySelector(
+    '[data-ohw-key="nav-logo-image"], [data-ohw-key="footer-logo"]'
+  );
+  if (logoImg?.alt?.trim()) {
+    const text = logoImg.alt.trim();
+    const logoRoot = logoImg.closest('[data-ohw-role="logo"], [data-ohw-logo]');
+    const isPlaceholder = logoRoot?.hasAttribute("data-ohw-placeholder") === true || text === PLACEHOLDER_BUSINESS_NAME;
+    return { text, isPlaceholder };
+  }
+  return { text: PLACEHOLDER_BUSINESS_NAME, isPlaceholder: true };
+}
+
 // src/lib/site-wide-scope.ts
 function getLogoElement(el) {
   const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
@@ -9265,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)([]);
@@ -9413,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,
@@ -9424,7 +9510,7 @@ function useNavItemDrag({
       });
       return true;
     },
-    [beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
+    [beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
   );
   const onNavDragOver = (0, import_react11.useCallback)(
     (e) => {
@@ -9460,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,
@@ -9557,7 +9643,7 @@ function useNavItemDrag({
     getNavigationItemAnchor2,
     isDragHandleDisabled2,
     isEditMode,
-    isNavbarButton3,
+    isCtaButton,
     linkPopoverOpenRef,
     selectedElRef,
     setLinkPopover,
@@ -9567,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,
@@ -9578,7 +9664,7 @@ function useNavItemDrag({
       };
       return true;
     },
-    [isDragHandleDisabled2, isNavbarButton3]
+    [isDragHandleDisabled2, isCtaButton]
   );
   return {
     navDragRef,
@@ -9780,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) {
@@ -10514,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]");
@@ -10569,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) {
@@ -10671,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;
@@ -10685,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;
@@ -11492,8 +11578,7 @@ function OhhwellsBridge() {
     setSiblingHintRects,
     setToolbarRect,
     getNavigationItemAnchor,
-    isDragHandleDisabled,
-    isNavbarButton: isNavbarButton2
+    isDragHandleDisabled
   });
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
@@ -11753,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);
@@ -12274,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)) {
@@ -12898,7 +12983,8 @@ function OhhwellsBridge() {
         e.stopPropagation();
         deselectRef.current();
         deactivateRef.current();
-        postToParentRef.current({ type: "ow:open-logo-settings" });
+        const identity = readLogoIdentityFromDom();
+        postToParentRef.current({ type: "ow:open-logo-settings", ...identity });
         return;
       }
       const editable = target.closest("[data-ohw-editable]");
@@ -13356,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;
@@ -13498,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) {
@@ -13621,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;
@@ -13939,6 +14041,7 @@ function OhhwellsBridge() {
           sectionsJson = val;
           continue;
         }
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -13958,6 +14061,12 @@ function OhhwellsBridge() {
         });
         applyLinkByKey(key, val);
       }
+      const hasLogoIdentity = LOGO_PLACEHOLDER_KEY in content || LOGO_TEXT_KEYS.some((key) => key in content);
+      if (hasLogoIdentity) {
+        const logoText = content[LOGO_TEXT_KEYS[0]] ?? content[LOGO_TEXT_KEYS[1]] ?? readLogoIdentityFromDom().text;
+        const logoIsPlaceholder = LOGO_PLACEHOLDER_KEY in content ? content[LOGO_PLACEHOLDER_KEY] !== "false" : !logoText.trim() || logoText === PLACEHOLDER_BUSINESS_NAME;
+        applyLogoIdentity(logoText, logoIsPlaceholder);
+      }
       if (sectionsJson) {
         initSectionsFromContent({ __ohw_sections: sectionsJson }, true);
         sectionsLoadedRef.current = true;
@@ -13970,6 +14079,21 @@ function OhhwellsBridge() {
       enforceLinkHrefs();
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
+    const handleUpdateLogoIdentity = (e) => {
+      if (e.data?.type !== "ow:update-logo-identity") return;
+      const rawText = typeof e.data.text === "string" ? e.data.text : "";
+      const isPlaceholder = e.data.isPlaceholder !== false;
+      const display = applyLogoIdentity(rawText, isPlaceholder);
+      const nodes = [
+        ...LOGO_TEXT_KEYS.map((key) => ({ key, text: display })),
+        { key: LOGO_PLACEHOLDER_KEY, text: isPlaceholder || !rawText.trim() ? "true" : "false" }
+      ];
+      editContentRef.current = {
+        ...editContentRef.current,
+        ...Object.fromEntries(nodes.map(({ key, text }) => [key, text]))
+      };
+      postToParentRef.current({ type: "ow:change", nodes });
+    };
     window.addEventListener("message", handleHydrate);
     const handleDeactivate = (e) => {
       if (e.data?.type !== "ow:deactivate") return;
@@ -14435,7 +14559,8 @@ function OhhwellsBridge() {
       if (logoAtPoint) {
         deselectRef.current();
         deactivateRef.current();
-        postToParentRef.current({ type: "ow:open-logo-settings" });
+        const identity = readLogoIdentityFromDom();
+        postToParentRef.current({ type: "ow:open-logo-settings", ...identity });
         return;
       }
       const textEditable = Array.from(
@@ -14472,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) {
@@ -14506,6 +14631,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
     window.addEventListener("message", handleClickAt);
+    window.addEventListener("message", handleUpdateLogoIdentity);
     const handleViewportResize = () => {
       if (visibleViewportRef.current) {
         applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
@@ -14558,6 +14684,7 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", handleViewportResize);
       window.removeEventListener("message", handlePointerSync);
       window.removeEventListener("message", handleClickAt);
+      window.removeEventListener("message", handleUpdateLogoIdentity);
       window.removeEventListener("message", handleHydrate);
       window.removeEventListener("message", handleDeactivate);
       window.removeEventListener("message", handleToastAction);
@@ -15068,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 }] });