@ohhwells/bridge 0.1.56 → 0.1.58

package/dist/index.js

@@ -6952,6 +6952,47 @@ function AiSectionOverlay({
   ] });
 }
 
+// src/lib/section-instances.ts
+var SECTION_ORDER_KEY = "__ohw_section_order";
+function getPageSectionOrderEntries(raw, currentPath) {
+  if (!raw) return [];
+  try {
+    const entries = JSON.parse(raw);
+    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
+  } catch {
+    return [];
+  }
+}
+function rekeySectionSubtree(root, instanceId) {
+  const suffix = `::${instanceId}`;
+  const rekey = (el, attr) => {
+    const current = el.getAttribute(attr);
+    if (current) el.setAttribute(attr, `${current}${suffix}`);
+  };
+  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
+  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
+  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
+  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
+}
+function initSectionInstancesFromContent(content, currentPath) {
+  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
+    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
+  });
+  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
+  for (const entry of entries) {
+    if (entry.instanceId === entry.type) continue;
+    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
+    const original = document.querySelector(
+      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
+    );
+    if (!original) continue;
+    const clone = original.cloneNode(true);
+    clone.setAttribute("data-ohw-instance", entry.instanceId);
+    rekeySectionSubtree(clone, entry.instanceId);
+    original.insertAdjacentElement("afterend", clone);
+  }
+}
+
 // src/OhhwellsBridge.tsx
 import { createPortal as createPortal2 } from "react-dom";
 import { usePathname as usePathname2, useRouter as useRouter3, useSearchParams } from "next/navigation";
@@ -6984,9 +7025,16 @@ function isPointOverBridgeChrome(x, y) {
   }
   return false;
 }
-function findCtaButtonAtPoint(x, y, media) {
+var BUTTON_LIKE_SELECTOR = `button, [role="button"], ${CTA_BUTTON_SELECTOR}`;
+function isButtonLikeElement(el) {
+  return el.matches(BUTTON_LIKE_SELECTOR);
+}
+function findClosestButtonLike(target) {
+  return target.closest(BUTTON_LIKE_SELECTOR);
+}
+function findButtonAtPoint(x, y, media) {
   const hits = Array.from(
-    document.querySelectorAll(CTA_BUTTON_SELECTOR)
+    document.querySelectorAll(BUTTON_LIKE_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);
@@ -13508,6 +13556,8 @@ function OhhwellsBridge() {
   const [isFooterFrameSelection, setIsFooterFrameSelection] = useState11(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
   const [floatingPanel, setFloatingPanel] = useState11(null);
+  const floatingPanelOpenRef = useRef9(false);
+  floatingPanelOpenRef.current = floatingPanel !== null;
   const [floatingPanelPos, setFloatingPanelPos] = useState11(null);
   const [parentScrollSnap, setParentScrollSnap] = useState11(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState11(null);
@@ -14533,6 +14583,8 @@ function OhhwellsBridge() {
   const closeFloatingPanelOnly = useCallback7(() => {
     setFloatingPanel(null);
   }, []);
+  const closeFloatingPanelOnlyRef = useRef9(closeFloatingPanelOnly);
+  closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
   const closeFloatingPanelAndDeselect = useCallback7(() => {
     setFloatingPanel(null);
     deselectRef.current();
@@ -14672,6 +14724,7 @@ function OhhwellsBridge() {
       applySocialsDisplayFromContent(content);
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
+      initSectionInstancesFromContent(content, window.location.pathname);
       sectionsLoadedRef.current = true;
       pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       return imageLoads.length > 0 ? Promise.all(imageLoads).then(() => {
@@ -14706,6 +14759,7 @@ function OhhwellsBridge() {
       const content = contentCache.get(subdomain);
       if (!content) return;
       retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
+      initSectionInstancesFromContent(content, window.location.pathname);
       observer?.disconnect();
       try {
         for (const [key, val] of Object.entries(content)) {
@@ -15094,14 +15148,17 @@ function OhhwellsBridge() {
           });
           return;
         }
-        if (isMediaEditable(editable)) {
+        const clickedButton = findClosestButtonLike(target);
+        const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
+        if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
           aiSectionApiRef.current?.selectFromElement(editable);
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
           return;
         }
-        const hrefCtx = getHrefKeyFromElement(editable);
+        const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
+        const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
         if (navAnchor) {
           e.preventDefault();
@@ -15109,7 +15166,8 @@ function OhhwellsBridge() {
           if (selectedElRef.current === navAnchor) {
             if (e.detail >= 2) return;
             if (requestSocialDialog(navAnchor, postToParentRef.current, editContentRef.current)) return;
-            activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
+            const activateTarget = isButtonLikeElement(hrefLookupTarget) ? navAnchor.querySelector('[data-ohw-editable="text"]') ?? hrefLookupTarget : hrefLookupTarget;
+            activateRef.current(activateTarget, { caretX: e.clientX, caretY: e.clientY });
             return;
           }
           selectRef.current(navAnchor);
@@ -15117,7 +15175,7 @@ function OhhwellsBridge() {
         }
         e.preventDefault();
         e.stopPropagation();
-        activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
+        activateRef.current(hrefLookupTarget, { caretX: e.clientX, caretY: e.clientY });
         return;
       }
       const hrefAnchor = getNavigationItemAnchor(target);
@@ -15647,15 +15705,15 @@ function OhhwellsBridge() {
           dismissImageHover();
           return;
         }
-        const ctaHit = isDragOver ? null : findCtaButtonAtPoint(x2, y2, imgEl);
-        if (ctaHit) {
+        const buttonHit = isDragOver ? null : findButtonAtPoint(x2, y2, imgEl);
+        if (buttonHit) {
           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());
+          if (selected !== buttonHit && !selected?.contains(buttonHit)) {
+            clearHrefKeyHover(buttonHit);
+            hoveredItemElRef.current = buttonHit;
+            setHoveredItemRect(buttonHit.getBoundingClientRect());
           }
           return;
         }
@@ -16185,6 +16243,7 @@ function OhhwellsBridge() {
         sectionsLoadedRef.current = true;
         pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       }
+      initSectionInstancesFromContent(content, window.location.pathname);
       editContentRef.current = { ...editContentRef.current, ...content };
       reconcileNavbarItemsFromContent(editContentRef.current);
       reconcileFooterOrderFromContent(editContentRef.current);
@@ -16277,6 +16336,10 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        closeFloatingPanelOnlyRef.current();
+        return;
+      }
       if (activeElRef.current) {
         const hrefCtx = getHrefKeyFromElement(activeElRef.current);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
@@ -16340,6 +16403,11 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (e.key === "Escape" && floatingPanelOpenRef.current) {
+        e.preventDefault();
+        closeFloatingPanelOnlyRef.current();
+        return;
+      }
       if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
         if (toolbarVariantRef.current === "select-frame") {
           const parent2 = getNavigationSelectionParent(selectedElRef.current);
@@ -17040,7 +17108,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.55",
+        bridgeVersion: "0.1.57",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections