@ohhwells/bridge 0.1.55-next.161 → 0.1.55-next.165

package/dist/index.cjs

@@ -7192,6 +7192,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
 var import_react_dom4 = require("react-dom");
 var import_navigation3 = require("next/navigation");
@@ -7224,9 +7265,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);
@@ -9802,6 +9850,10 @@ function isSocialsRow(el) {
   const anchors = Array.from(el.querySelectorAll("a"));
   return anchors.length > 0 && anchors.every((anchor) => isSocialItem(anchor));
 }
+var MAX_SOCIAL_ITEMS_PER_ROW = 7;
+function canAddSocialItem(row) {
+  return listSocialItems(row).length < MAX_SOCIAL_ITEMS_PER_ROW;
+}
 function listSocialItems(row) {
   return Array.from(row.children).map((child) => {
     if (!(child instanceof HTMLElement)) return null;
@@ -14709,6 +14761,14 @@ function OhhwellsBridge() {
     if (!selected) return;
     const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
     if (socialsRow) {
+      if (!canAddSocialItem(socialsRow)) {
+        postToParent2({
+          type: "ow:toast",
+          title: `Maximum ${MAX_SOCIAL_ITEMS_PER_ROW} social icons`,
+          toastType: "error"
+        });
+        return;
+      }
       const after = getSocialItem(selected);
       const result2 = insertSocialItem(socialsRow, after, editContentRef.current);
       if (!result2) return;
@@ -15565,6 +15625,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(() => {
@@ -15601,6 +15662,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 {
         applyBrandChrome(content);
@@ -16037,14 +16099,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();
@@ -16052,7 +16117,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);
@@ -16060,7 +16126,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);
@@ -16655,15 +16721,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;
         }
@@ -17222,6 +17288,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);
@@ -18714,7 +18781,10 @@ function OhhwellsBridge() {
               onSelectParent: handleSelectParent,
               onDuplicate: handleDuplicateSelected,
               onDelete: handleDeleteSelected,
-              addItemDisabled: isFooterFrameSelection && isFooterAddItemDisabled(selectedElRef.current),
+              addItemDisabled: isFooterFrameSelection && isFooterAddItemDisabled(selectedElRef.current) || selectedElRef.current !== null && (() => {
+                const row = isSocialsRow(selectedElRef.current) ? selectedElRef.current : findSocialsRow(selectedElRef.current);
+                return row ? !canAddSocialItem(row) : false;
+              })(),
               editLinkDisabled: false,
               moreDisabled: false,
               duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow,