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

package/dist/index.cjs

@@ -6617,17 +6617,20 @@ function navOrderKeysEqual(a, b) {
   }
   return true;
 }
-function getNavOrderFromContainer(container) {
+function getNavbarLinkKeysInContainer(container) {
   return Array.from(container.querySelectorAll("[data-ohw-href-key]")).filter(isNavbarLinkItem).map((el) => el.getAttribute("data-ohw-href-key")).filter((key) => Boolean(key));
 }
 function applyNavOrderToContainer(container, order) {
   const desired = order.filter((key, i) => order.indexOf(key) === i);
-  const current = getNavOrderFromContainer(container);
+  const current = getNavbarLinkKeysInContainer(container);
   const extras = current.filter((key) => !desired.includes(key));
   const expected = [...desired.filter((key) => current.includes(key)), ...extras];
+  const orderedEls = [];
   if (navOrderKeysEqual(current, expected)) return;
+  if (current.length === expected.length && current.every((key, i) => key === expected[i])) {
+    return;
+  }
   const seen = /* @__PURE__ */ new Set();
-  const orderedEls = [];
   for (const hrefKey of desired) {
     if (seen.has(hrefKey)) continue;
     seen.add(hrefKey);
@@ -8033,7 +8036,13 @@ function collectEditableNodes(extraContent) {
     nodes.push({ key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`, type: "video-setting", text: String(video.autoplay) });
     nodes.push({ key: `${key}${VIDEO_MUTED_SUFFIX}`, type: "video-setting", text: String(video.muted) });
   });
-  return nodes;
+  const seen = /* @__PURE__ */ new Set();
+  return nodes.filter((node) => {
+    if (!node.key) return true;
+    if (seen.has(node.key)) return false;
+    seen.add(node.key);
+    return true;
+  });
 }
 function isMediaEditable(el) {
   const t = el.dataset.ohwEditable;
@@ -8165,7 +8174,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-col]");
+  const explicit = item.closest("[data-ohw-footer-column]");
   if (explicit) return explicit;
   const footer = item.closest("footer");
   if (!footer) return null;
@@ -8182,14 +8191,17 @@ function isNavigationRoot(el) {
 function isInferredFooterGroup(el) {
   const footer = el.closest("footer");
   if (!footer || el === footer) return false;
-  if (el.hasAttribute("data-ohw-footer-col")) return true;
+  if (el.hasAttribute("data-ohw-footer-column")) return true;
   return countFooterNavItems(el) >= 2;
 }
 function isNavigationContainer(el) {
-  return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || isNavigationRoot(el) || isInferredFooterGroup(el);
+  return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup(el);
+}
+function isNavbarLinksContainer(el) {
+  return el.hasAttribute("data-ohw-nav-container");
 }
 function getFooterColumn(el) {
-  return el.closest("[data-ohw-footer-col]");
+  return el.closest("[data-ohw-footer-column]");
 }
 function resolveFooterColumnSelectionTarget(target, clientX, clientY) {
   if (getNavigationItemAnchor(target)) return null;
@@ -8213,7 +8225,7 @@ function isPointOverNavigation(x, y) {
 function findHoveredNavOrFooterContainer(x, y) {
   const candidates = [
     ...document.querySelectorAll("[data-ohw-nav-container]"),
-    ...document.querySelectorAll("[data-ohw-footer-col]")
+    ...document.querySelectorAll("[data-ohw-footer-column]")
   ];
   for (const container of candidates) {
     const r2 = container.getBoundingClientRect();
@@ -8260,7 +8272,7 @@ function getNavigationSelectionParent(el) {
     if (footerGroup) return footerGroup;
     return getNavigationRoot(el);
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || isInferredFooterGroup(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -8440,8 +8452,6 @@ var ICONS = {
   insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
   insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
 };
-var TOOLBAR_PILL_PADDING = 2;
-var TOOLBAR_TOGGLE_GAP = 4;
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
@@ -8656,15 +8666,6 @@ function FloatingToolbar({
         left,
         transform,
         zIndex: 2147483647,
-        background: "#fff",
-        border: "1px solid #E7E5E4",
-        borderRadius: 6,
-        boxShadow: "0px 2px 4px -2px rgba(0,0,0,.1),0px 4px 6px -1px rgba(0,0,0,.1)",
-        display: "flex",
-        alignItems: "center",
-        padding: TOOLBAR_PILL_PADDING,
-        gap: TOOLBAR_TOGGLE_GAP,
-        fontFamily: "sans-serif",
         pointerEvents: "auto"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CustomToolbar, { children: [
@@ -8831,7 +8832,6 @@ function OhhwellsBridge() {
   const dragOverElRef = (0, import_react9.useRef)(null);
   const [mediaHover, setMediaHover] = (0, import_react9.useState)(null);
   const [uploadingRects, setUploadingRects] = (0, import_react9.useState)({});
-  const pendingUploadRectRef = (0, import_react9.useRef)(null);
   const hoveredGapRef = (0, import_react9.useRef)(null);
   const imageUnhoverTimerRef = (0, import_react9.useRef)(null);
   const imageShowTimerRef = (0, import_react9.useRef)(null);
@@ -8991,7 +8991,6 @@ function OhhwellsBridge() {
       body.style.overflow = prevBodyOverflow;
       document.removeEventListener("wheel", preventBackgroundScroll, scrollOpts);
       document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
-      document.documentElement.removeAttribute("data-ohw-link-popover-open");
     };
   }, [linkPopover, postToParent2]);
   (0, import_react9.useEffect)(() => {
@@ -9604,14 +9603,11 @@ function OhhwellsBridge() {
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
       setMediaHover(null);
-      postToParentRef.current({ type: "ow:image-unhover" });
     }
     setToolbarVariant("rich-text");
     siblingHintElRef.current = null;
     setSiblingHintRect(null);
-    setSiblingHintRects([]);
     setIsItemDragging(false);
-    setIsFooterFrameSelection(false);
     el.setAttribute("contenteditable", "true");
     el.setAttribute("data-ohw-editing", "");
     el.removeAttribute("data-ohw-hovered");
@@ -9800,6 +9796,13 @@ function OhhwellsBridge() {
     const observeRoots = () => [document.querySelector("nav"), document.querySelector("footer")].filter(
       (el) => Boolean(el)
     );
+    const roots = observeRoots();
+    if (roots.length === 0) {
+      reconcileNavbarItemsFromContent(contentForNav());
+      reconcileFooterOrderFromContent(contentForNav());
+      if (isEditMode) syncNavigationDragCursorAttrs();
+      return;
+    }
     let rafId = null;
     let applying = false;
     let observer = null;
@@ -9936,29 +9939,6 @@ function OhhwellsBridge() {
       [data-ohw-href-key][data-ohw-selected] * {
         cursor: text !important;
       }
-      /* Native <a> drag steals clicks \u2014 disable for edit links; reorder via press-to-drag / handle. */
-      footer [data-ohw-href-key],
-      nav [data-ohw-href-key],
-      [data-ohw-nav-container] [data-ohw-href-key],
-      [data-ohw-nav-drawer] [data-ohw-href-key] {
-        -webkit-user-drag: none !important;
-      }
-      html[data-ohw-footer-press-drag] footer,
-      html[data-ohw-footer-press-drag] footer * {
-        user-select: none !important;
-        -webkit-user-select: none !important;
-      }
-      html[data-ohw-item-dragging] footer,
-      html[data-ohw-item-dragging] footer *,
-      html[data-ohw-item-dragging] nav,
-      html[data-ohw-item-dragging] nav * {
-        user-select: none !important;
-        -webkit-user-select: none !important;
-        pointer-events: none !important;
-      }
-      html[data-ohw-item-dragging] {
-        cursor: grabbing !important;
-      }
       [data-ohw-editable="image"], [data-ohw-editable="image"] *,
       [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
@@ -10101,15 +10081,7 @@ function OhhwellsBridge() {
         if (isMediaEditable(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          const key = editable.dataset.ohwKey ?? "";
-          const r2 = editable.getBoundingClientRect();
-          if (key && r2.width > 1 && r2.height > 1) {
-            pendingUploadRectRef.current = {
-              key,
-              rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height }
-            };
-          }
-          postToParentRef.current({ type: "ow:image-pick", key, elementType: editable.dataset.ohwEditable ?? "image" });
+          postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
           return;
         }
         const hrefCtx = getHrefKeyFromElement(editable);
@@ -10235,7 +10207,7 @@ function OhhwellsBridge() {
         return;
       }
       if (toolbarVariantRef.current !== "select-frame") {
-        const frameContainer = target.closest("[data-ohw-nav-container]") ?? target.closest("[data-ohw-footer-col]");
+        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());
@@ -10243,20 +10215,11 @@ function OhhwellsBridge() {
           setHoveredItemRect(null);
           return;
         }
-        if (!target.closest("[data-ohw-nav-container], [data-ohw-footer-col]")) {
+        if (!target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]")) {
           hoveredNavContainerRef.current = null;
           setHoveredNavContainerRect(null);
         }
       }
-      const footerCol = target.closest("[data-ohw-footer-col]");
-      if (footerCol) {
-        hoveredNavContainerRef.current = null;
-        setHoveredNavContainerRect(null);
-        if (selectedElRef.current === footerCol) return;
-        hoveredItemElRef.current = footerCol;
-        setHoveredItemRect(footerCol.getBoundingClientRect());
-        return;
-      }
       const navAnchor = getNavigationItemAnchor(target);
       if (navAnchor) {
         hoveredNavContainerRef.current = null;
@@ -10268,6 +10231,15 @@ function OhhwellsBridge() {
         setHoveredItemRect(navAnchor.getBoundingClientRect());
         return;
       }
+      const footerCol = target.closest("[data-ohw-footer-col]") ?? target.closest("[data-ohw-footer-column]");
+      if (footerCol) {
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        if (selectedElRef.current === footerCol) return;
+        hoveredItemElRef.current = footerCol;
+        setHoveredItemRect(footerCol.getBoundingClientRect());
+        return;
+      }
       const editable = target.closest("[data-ohw-editable]");
       if (!editable) return;
       const selected = selectedElRef.current;
@@ -10285,9 +10257,9 @@ function OhhwellsBridge() {
     };
     const handleMouseOut = (e) => {
       const target = e.target;
-      if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col]")) {
+      if (target.closest("[data-ohw-nav-container], [data-ohw-footer-column]")) {
         const related2 = e.relatedTarget instanceof Element ? e.relatedTarget : null;
-        if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button]")) {
+        if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-column], [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button]")) {
           return;
         }
         hoveredNavContainerRef.current = null;
@@ -10413,12 +10385,12 @@ function OhhwellsBridge() {
         const stickyPad = 48;
         const withinPad = x >= pr.left - stickyPad && x <= pr.left + pr.width + stickyPad && y >= pr.top - stickyPad && y <= pr.top + pr.height + stickyPad;
         if (withinPad) {
-          const yieldToSmaller = smallest !== pinned && candidatePool.includes(smallest) && (() => {
+          if (smallest !== pinned && candidatePool.includes(smallest)) {
             const sr = getVisibleRect(smallest);
-            const pr2 = getVisibleRect(pinned);
-            return sr.width * sr.height < pr2.width * pr2.height;
-          })();
-          if (!yieldToSmaller) return pinned;
+            const overOther = x >= sr.left && x <= sr.left + sr.width && y >= sr.top && y <= sr.top + sr.height;
+            if (overOther) return smallest;
+          }
+          return pinned;
         }
       }
       return smallest;
@@ -10430,7 +10402,6 @@ function OhhwellsBridge() {
         resumeAnimTracks();
         postToParentRef.current({ type: "ow:image-unhover" });
       }
-      clearImageHover();
     };
     const probeNavigationHoverAt = (x, y) => {
       if (toolbarVariantRef.current === "select-frame") {
@@ -10440,7 +10411,7 @@ function OhhwellsBridge() {
       }
       const frameContainers = [
         ...document.querySelectorAll("[data-ohw-nav-container]"),
-        ...document.querySelectorAll("[data-ohw-footer-col]")
+        ...document.querySelectorAll("[data-ohw-footer-column]")
       ];
       let overFrame = null;
       for (const container of frameContainers) {
@@ -10537,7 +10508,7 @@ function OhhwellsBridge() {
           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-media-chrome]')) {
+        if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             resumeAnimTracks();
@@ -10821,7 +10792,6 @@ function OhhwellsBridge() {
           if (!entry || entry.fadingOut) return prev;
           return { ...prev, [key]: { ...entry, fadingOut: true } };
         });
-        if (pendingUploadRectRef.current?.key === key) pendingUploadRectRef.current = null;
       };
       let found = false;
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -10961,7 +10931,6 @@ function OhhwellsBridge() {
       editContentRef.current = { ...editContentRef.current, ...content };
       reconcileNavbarItemsFromContent(editContentRef.current);
       syncNavigationDragCursorAttrs();
-      reconcileFooterOrderFromContent(editContentRef.current);
       enforceLinkHrefs();
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
@@ -11234,43 +11203,23 @@ function OhhwellsBridge() {
       activeStateElRef.current = null;
       setToggleState(null);
     };
-    const resolveUploadRects = (key) => {
-      const matches = Array.from(document.querySelectorAll(`[data-ohw-key="${key}"]`));
-      const rects = matches.map((el) => {
-        const r2 = el.getBoundingClientRect();
-        return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
-      }).filter((r2) => r2.width > 1 && r2.height > 1);
-      if (rects.length > 0) return rects;
-      const pending = pendingUploadRectRef.current;
-      if (pending?.key === key && pending.rect.width > 1 && pending.rect.height > 1) {
-        return [pending.rect];
-      }
-      const hovered = hoveredImageRef.current;
-      if (hovered?.dataset.ohwKey === key) {
-        const r2 = hovered.getBoundingClientRect();
-        if (r2.width > 1 && r2.height > 1) {
-          return [{ top: r2.top, left: r2.left, width: r2.width, height: r2.height }];
-        }
-      }
-      return [];
-    };
     const handleImageUploading = (e) => {
-      const type = e.data?.type;
-      if (type !== "ow:image-uploading" && type !== "ow:anim-lock") return;
-      const key = e.data.key;
-      if (!key) return;
-      const uploading = type === "ow:anim-lock" ? true : !!e.data.uploading;
+      if (e.data?.type !== "ow:image-uploading") return;
+      const { key, uploading } = e.data;
       setUploadingRects((prev) => {
         if (!uploading) {
-          if (pendingUploadRectRef.current?.key === key) pendingUploadRectRef.current = null;
           if (!(key in prev)) return prev;
           const next = { ...prev };
           delete next[key];
           return next;
         }
-        const rects = resolveUploadRects(key);
-        if (rects.length === 0) return prev;
-        return { ...prev, [key]: { rects } };
+        const el = document.querySelector(`[data-ohw-key="${key}"]`);
+        if (!el) return prev;
+        const r2 = getVisibleRect(el);
+        return {
+          ...prev,
+          [key]: { rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } }
+        };
       });
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
         const track = el.closest("[data-ohw-hover-pause]");
@@ -11387,7 +11336,7 @@ function OhhwellsBridge() {
         }
       }
       const footerColumn = findHoveredNavOrFooterContainer(clientX, clientY);
-      if (footerColumn?.hasAttribute("data-ohw-footer-col")) {
+      if (footerColumn?.hasAttribute("data-ohw-footer-column")) {
         selectFrameRef.current(footerColumn);
         return;
       }
@@ -11776,14 +11725,14 @@ function OhhwellsBridge() {
     },
     [postToParent2, sitePages, sectionsByPath]
   );
+  const showEditLink = toolbarShowEditLink;
+  const currentSections = sectionsByPath[pathname] ?? [];
+  linkPopoverOpenRef.current = linkPopover !== null;
   const handleMediaReplace = (0, import_react9.useCallback)(
     (key) => {
-      if (mediaHover?.key === key) {
-        pendingUploadRectRef.current = { key, rect: mediaHover.rect };
-      }
       postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
     },
-    [postToParent2, mediaHover]
+    [postToParent2, mediaHover?.elementType]
   );
   const handleMediaFadeOutComplete = (0, import_react9.useCallback)((key) => {
     setUploadingRects((prev) => {
@@ -11815,25 +11764,20 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const showEditLink = toolbarShowEditLink;
-  const currentSections = sectionsByPath[pathname] ?? [];
-  linkPopoverOpenRef.current = linkPopover !== null;
   return bridgeRoot ? (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      Object.entries(uploadingRects).flatMap(
-        ([key, { rects, fadingOut }]) => rects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          MediaOverlay,
-          {
-            hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
-            isUploading: true,
-            fadingOut,
-            onFadeOutComplete: handleMediaFadeOutComplete,
-            onReplace: handleMediaReplace
-          },
-          `uploading-${key}-${i}`
-        ))
-      ),
+      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        MediaOverlay,
+        {
+          hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
+          isUploading: true,
+          fadingOut,
+          onFadeOutComplete: handleMediaFadeOutComplete,
+          onReplace: handleMediaReplace
+        },
+        `uploading-${key}`
+      )),
       mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         MediaOverlay,
         {
@@ -11888,9 +11832,9 @@ function OhhwellsBridge() {
         },
         `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
       )),
-      hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && !siblingHintRect && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !siblingHintRect && siblingHintRects.length === 0 && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
+      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
       toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         ItemInteractionLayer,
         {