@ohhwells/bridge 0.1.117-next.315 → 0.1.117-next.317

package/dist/index.cjs

@@ -8510,7 +8510,7 @@ function ItemInteractionLayer({
   const isDragging = state === "dragging";
   const showToolbar = isActive && toolbar;
   const showDragHandle = (isActive || isDragging) && showHandle;
-  const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
+  const itemDragEnabled = itemDragSurface && isActive && !isDragging && !dragDisabled && Boolean(showHandle || onItemPointerDown);
   const useDetachedBelowToolbar = Boolean(showToolbar && state === "active-bottom" && toolbarBelowRect);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -9456,11 +9456,10 @@ function MediaOverlay({
         className: "flex items-center justify-center cursor-pointer",
         style: {
           ...box,
-          // When text overlays this media, let clicks fall THROUGH to the text underneath. In the
-          // parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
-          // in-document, pointer-events does it natively. The button below opts back in, so
-          // Replace still works.
-          pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
+          // Visual only. `pointer-events: auto` on this full-bleed rect covered the navbar
+          // (hero bg includes the absolute TopNav) and swallowed CTA press-drag. Text overlay
+          // and cueOnly also need clicks to fall through — Replace / video controls opt back in.
+          pointerEvents: "none",
           // Selected: a firm component ring with no wash, so the image reads as chosen rather
           // than hovered. Hover keeps the existing tinted preview.
           boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
@@ -11124,6 +11123,13 @@ function findButtonAtPoint(x, y, media) {
   if (hits.length === 0) return null;
   return hits.reduce((best, el) => best.contains(el) ? el : best);
 }
+function findNavbarCtaAtPoint(x, y) {
+  const hits = Array.from(
+    document.querySelectorAll('[data-ohw-role="navbar-button"]')
+  ).filter((el) => containsPoint(el, x, y) && !el.closest("[data-ohw-bridge]"));
+  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";
@@ -16675,7 +16681,7 @@ function ButtonStylePanel({
   const label = previewLabel.trim() || "Book Now";
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500", children: "Variants" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
         const chrome = variants[id];
         const selected = id === variant;
@@ -16739,7 +16745,7 @@ function ButtonStylePanel({
       }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500", children: "Size" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
@@ -17127,6 +17133,137 @@ function reorderButtonInCollection(button, clientX) {
   if (!placed) collection.append(button);
   return listCollectionMembers(collection);
 }
+function listVisibleCollectionButtons(collection) {
+  return Array.from(collection.querySelectorAll(CTA_BUTTON_SELECTOR)).filter((el) => {
+    if (!buttonId(el)) return false;
+    return el.getClientRects().length > 0;
+  });
+}
+function isVerticalButtonLayout(items, collection) {
+  if (items.length >= 2) {
+    const a = items[0].getBoundingClientRect();
+    const b = items[1].getBoundingClientRect();
+    return b.top - a.bottom > b.left - a.right;
+  }
+  const style = window.getComputedStyle(collection);
+  return style.flexDirection === "column" || style.flexDirection === "column-reverse";
+}
+function buildButtonCollectionDropSlots(collection) {
+  const items = listVisibleCollectionButtons(collection);
+  const barThickness = 3;
+  const slots = [];
+  if (items.length === 0) {
+    const rect = collection.getBoundingClientRect();
+    slots.push({
+      insertIndex: 0,
+      left: rect.left + rect.width / 2 - barThickness / 2,
+      top: rect.top,
+      width: barThickness,
+      height: Math.max(rect.height, 24),
+      direction: "vertical"
+    });
+    return slots;
+  }
+  if (isVerticalButtonLayout(items, collection)) {
+    const edgeGap2 = items.length >= 2 ? Math.max(0, items[1].getBoundingClientRect().top - items[0].getBoundingClientRect().bottom) : 16;
+    for (let i = 0; i <= items.length; i++) {
+      let top;
+      let left;
+      let width;
+      if (i === 0) {
+        const first = items[0].getBoundingClientRect();
+        top = first.top - edgeGap2 / 2 - barThickness / 2;
+        left = first.left;
+        width = first.width;
+      } else if (i === items.length) {
+        const last = items[items.length - 1].getBoundingClientRect();
+        const lastGap = items.length >= 2 ? Math.max(0, last.top - items[items.length - 2].getBoundingClientRect().bottom) : edgeGap2;
+        top = last.bottom + lastGap / 2 - barThickness / 2;
+        left = last.left;
+        width = last.width;
+      } else {
+        const prev = items[i - 1].getBoundingClientRect();
+        const next = items[i].getBoundingClientRect();
+        top = (prev.bottom + next.top) / 2 - barThickness / 2;
+        left = Math.min(prev.left, next.left);
+        width = Math.max(prev.right, next.right) - left;
+      }
+      slots.push({
+        insertIndex: i,
+        left,
+        top,
+        width: Math.max(width, 40),
+        height: barThickness,
+        direction: "horizontal"
+      });
+    }
+    return slots;
+  }
+  const edgeGap = items.length >= 2 ? Math.max(0, items[1].getBoundingClientRect().left - items[0].getBoundingClientRect().right) : 12;
+  for (let i = 0; i <= items.length; i++) {
+    let left;
+    let top;
+    let height;
+    if (i === 0) {
+      const first = items[0].getBoundingClientRect();
+      left = first.left - edgeGap / 2 - barThickness / 2;
+      top = first.top;
+      height = first.height;
+    } else if (i === items.length) {
+      const last = items[items.length - 1].getBoundingClientRect();
+      const lastGap = items.length >= 2 ? Math.max(0, last.left - items[items.length - 2].getBoundingClientRect().right) : edgeGap;
+      left = last.right + lastGap / 2 - barThickness / 2;
+      top = last.top;
+      height = last.height;
+    } else {
+      const prev = items[i - 1].getBoundingClientRect();
+      const next = items[i].getBoundingClientRect();
+      left = (prev.right + next.left) / 2 - barThickness / 2;
+      top = Math.min(prev.top, next.top);
+      height = Math.max(prev.bottom, next.bottom) - top;
+    }
+    slots.push({
+      insertIndex: i,
+      left,
+      top,
+      width: barThickness,
+      height: Math.max(height, 24),
+      direction: "vertical"
+    });
+  }
+  return slots;
+}
+function hitTestButtonCollectionDropSlot(collection, clientX, clientY) {
+  const slots = buildButtonCollectionDropSlots(collection);
+  let best = null;
+  for (const slot of slots) {
+    const cx2 = slot.left + slot.width / 2;
+    const cy = slot.top + slot.height / 2;
+    const dist = slot.direction === "vertical" ? Math.abs(clientX - cx2) + Math.abs(clientY - cy) * 0.25 : Math.abs(clientY - cy) + Math.abs(clientX - cx2) * 0.25;
+    if (!best || dist < best.dist) best = { slot, dist };
+  }
+  return best?.slot ?? null;
+}
+function insertButtonAtCollectionIndex(button, insertIndex) {
+  const collection = buttonCollectionOf(button);
+  if (!collection) return null;
+  const items = listVisibleCollectionButtons(collection);
+  const from = items.indexOf(button);
+  if (from < 0) return null;
+  const others = items.filter((el) => el !== button);
+  let index = insertIndex;
+  if (from < insertIndex) index -= 1;
+  if (index <= 0) {
+    const first = others[0];
+    if (first) first.before(button);
+    else collection.append(button);
+  } else if (index >= others.length) {
+    collection.append(button);
+  } else {
+    others[index].before(button);
+  }
+  return listCollectionMembers(collection);
+}
 function persistCollectionOrder(collection, content) {
   const id = collection.getAttribute(COLLECTION_ATTR);
   if (!id) return null;
@@ -17223,8 +17360,34 @@ function restoreSnapshot(doc, snapshot, content) {
   setButtonDragAttr(el);
   return el;
 }
+function navbarCtasInScope(el) {
+  const scope = el.closest("nav, [data-ohw-nav-root], [data-ohw-nav-drawer]") ?? el.parentElement;
+  if (!scope) return [];
+  return Array.from(scope.querySelectorAll(CTA_BUTTON_SELECTOR)).filter(
+    (button) => isNavbarCta(button) && buttonId(button)
+  );
+}
+function ensureNavbarButtonCollection(button, content) {
+  const existing = buttonCollectionOf(button);
+  if (existing) return existing;
+  if (!isNavbarCta(button) || !buttonId(button)) return null;
+  const parent = button.parentElement;
+  if (!parent) return null;
+  const siblings = navbarCtasInScope(button).filter((el) => el.parentElement === parent);
+  if (siblings.length < 2) return null;
+  const id = nextCollectionId(content, button.ownerDocument);
+  const collection = createCollection(button.ownerDocument, id, collectionGap(button, tokensFromButton(button)));
+  siblings[0].before(collection);
+  for (const member of siblings) {
+    collection.append(member);
+    setButtonDragAttr(member);
+  }
+  return collection;
+}
 function collectionDragEnabled(el) {
-  return Boolean(isNavbarCta(el) && buttonCollectionOf(el) && buttonId(el));
+  if (!isNavbarCta(el) || !buttonId(el)) return false;
+  if (buttonCollectionOf(el)) return true;
+  return navbarCtasInScope(el).length >= 2;
 }
 
 // src/lib/item-drag-interaction.ts
@@ -17656,7 +17819,7 @@ function useNavItemDrag({
         document.querySelectorAll(
           "nav [data-ohw-href-key], [data-ohw-nav-container] [data-ohw-href-key], [data-ohw-nav-drawer] [data-ohw-href-key]"
         ).forEach((el) => {
-          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))) {
+          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key")) || isCtaButton(el)) {
             disableNativeHrefDrag(el);
           }
         });
@@ -19523,6 +19686,12 @@ function isPointOverNavigation(x, y) {
     const r2 = panel.getBoundingClientRect();
     if (x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) return true;
   }
+  for (const el of document.querySelectorAll('[data-ohw-role="navbar-button"]')) {
+    const r2 = el.getBoundingClientRect();
+    if (r2.width > 0 && r2.height > 0 && x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) {
+      return true;
+    }
+  }
   return false;
 }
 function findHoveredNavOrFooterContainer(x, y) {
@@ -20827,6 +20996,10 @@ function OhhwellsBridge() {
   const setFloatingPanelRef = (0, import_react19.useRef)(setFloatingPanel);
   const [floatingPanelPos, setFloatingPanelPos] = (0, import_react19.useState)(null);
   const buttonCollectionDragRef = (0, import_react19.useRef)(null);
+  const buttonDropInsertIndexRef = (0, import_react19.useRef)(null);
+  const [buttonDropSlots, setButtonDropSlots] = (0, import_react19.useState)([]);
+  const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react19.useState)(null);
+  const buttonPointerDragRef = (0, import_react19.useRef)(null);
   const [buttonStyleTick, setButtonStyleTick] = (0, import_react19.useState)(0);
   const [logoSizeDraft, setLogoSizeDraft] = (0, import_react19.useState)(null);
   const [editorViewport, setEditorViewport] = (0, import_react19.useState)("desktop");
@@ -21717,6 +21890,47 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
+  const persistButtonCollectionDrag = (0, import_react19.useCallback)(
+    (button, clientX) => {
+      const insertIndex = buttonDropInsertIndexRef.current;
+      if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
+      else if (typeof clientX === "number" && clientX !== 0) reorderButtonInCollection(button, clientX);
+      buttonDropInsertIndexRef.current = null;
+      const collection = buttonCollectionOf(button);
+      if (collection) {
+        const persisted = persistCollectionOrder(collection, editContentRef.current);
+        if (persisted) {
+          editContentRef.current = persisted.content;
+          postToParent2({ type: "ow:change", nodes: persisted.nodes });
+        }
+      }
+      buttonCollectionDragRef.current = null;
+      buttonPointerDragRef.current = null;
+      setButtonDropSlots([]);
+      setActiveButtonDropIndex(null);
+      setIsItemDragging(false);
+      unlockFooterDragInteraction();
+      if (button.isConnected) setToolbarRect(button.getBoundingClientRect());
+    },
+    [postToParent2]
+  );
+  const refreshButtonDragVisuals = (0, import_react19.useCallback)((button, clientX, clientY) => {
+    const collection = buttonCollectionOf(button);
+    if (!collection) {
+      setButtonDropSlots([]);
+      setActiveButtonDropIndex(null);
+      buttonDropInsertIndexRef.current = null;
+      return;
+    }
+    const slots = buildButtonCollectionDropSlots(collection);
+    const active = hitTestButtonCollectionDropSlot(collection, clientX, clientY);
+    setButtonDropSlots(slots);
+    const idx = active ? slots.findIndex((slot) => slot.insertIndex === active.insertIndex) : -1;
+    setActiveButtonDropIndex(idx >= 0 ? idx : null);
+    buttonDropInsertIndexRef.current = active?.insertIndex ?? null;
+    setDraggedItemRect(button.getBoundingClientRect());
+    if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
+  }, []);
   const handleItemDragStart = (0, import_react19.useCallback)(
     (e) => {
       const selected = selectedElRef.current;
@@ -21728,11 +21942,13 @@ function OhhwellsBridge() {
       const clientY = e?.clientY ?? selected.getBoundingClientRect().top + 8;
       if (isCtaButton(selected) && collectionDragEnabled(selected)) {
         buttonCollectionDragRef.current = selected;
+        setMediaHover(null);
         if (e?.dataTransfer) {
           e.dataTransfer.effectAllowed = "move";
           e.dataTransfer.setData("text/plain", buttonId(selected) ?? "button");
         }
         setIsItemDragging(true);
+        refreshButtonDragVisuals(selected, clientX, clientY);
         return;
       }
       if (startFooterLinkDrag(selected, clientX, clientY, true)) return;
@@ -21744,25 +21960,13 @@ function OhhwellsBridge() {
       setSiblingHintRect(null);
       setIsItemDragging(true);
     },
-    [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
+    [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
   );
   const handleItemDragEnd = (0, import_react19.useCallback)(
     (e) => {
       const collectionButton = buttonCollectionDragRef.current;
       if (collectionButton) {
-        const x = e?.clientX;
-        if (typeof x === "number" && x !== 0) reorderButtonInCollection(collectionButton, x);
-        const collection = buttonCollectionOf(collectionButton);
-        if (collection) {
-          const persisted = persistCollectionOrder(collection, editContentRef.current);
-          if (persisted) {
-            editContentRef.current = persisted.content;
-            postToParent2({ type: "ow:change", nodes: persisted.nodes });
-          }
-        }
-        buttonCollectionDragRef.current = null;
-        setIsItemDragging(false);
-        if (collectionButton.isConnected) setToolbarRect(collectionButton.getBoundingClientRect());
+        persistButtonCollectionDrag(collectionButton, e?.clientX);
         return;
       }
       if (footerDragRef.current) {
@@ -21787,12 +21991,22 @@ function OhhwellsBridge() {
       }
       setIsItemDragging(false);
     },
-    [commitFooterDrag, commitNavDrag, navDragRef, postToParent2]
+    [commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
   );
   const handleItemChromePointerDown = (0, import_react19.useCallback)((e) => {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
+    if (isCtaButton(selected) && collectionDragEnabled(selected)) {
+      buttonPointerDragRef.current = {
+        el: selected,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.pointerId,
+        started: false
+      };
+      return;
+    }
     const hrefKey = selected.getAttribute("data-ohw-href-key");
     if (hrefKey && isFooterHrefKey(hrefKey)) {
       footerPointerDragRef.current = {
@@ -22054,7 +22268,7 @@ function OhhwellsBridge() {
       if (!dragged) return;
       e.preventDefault();
       if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-      reorderButtonInCollection(dragged, e.clientX);
+      refreshButtonDragVisuals(dragged, e.clientX, e.clientY);
     };
     const onDrop = (e) => {
       if (!buttonCollectionDragRef.current) return;
@@ -22066,7 +22280,7 @@ function OhhwellsBridge() {
       document.removeEventListener("dragover", onDragOver);
       document.removeEventListener("drop", onDrop);
     };
-  }, []);
+  }, [refreshButtonDragVisuals]);
   const isEditModeRef = (0, import_react19.useRef)(false);
   const requestMissingSocialIconsRef = (0, import_react19.useRef)(() => {
   });
@@ -22720,9 +22934,9 @@ function OhhwellsBridge() {
           }
         });
         document.querySelectorAll(
-          "nav [data-ohw-href-key], [data-ohw-nav-container] [data-ohw-href-key], [data-ohw-nav-drawer] [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], [data-ohw-role="navbar-button"]'
         ).forEach((el) => {
-          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))) {
+          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key")) || isCtaButton(el)) {
             disableNativeHrefDrag(el);
           }
         });
@@ -23847,6 +24061,20 @@ function OhhwellsBridge() {
         }
         return;
       }
+      const navbarCtaHit = findNavbarCtaAtPoint(x, y);
+      if (navbarCtaHit) {
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        if (selected !== navbarCtaHit && !selected?.contains(navbarCtaHit)) {
+          clearHrefKeyHover(navbarCtaHit);
+          hoveredItemElRef.current = navbarCtaHit;
+          setHoveredItemRect(navbarCtaHit.getBoundingClientRect());
+        } else if (hoveredItemElRef.current === navbarCtaHit) {
+          hoveredItemElRef.current = null;
+          setHoveredItemRect(null);
+        }
+        return;
+      }
       const navContainers = Array.from(
         document.querySelectorAll("[data-ohw-nav-container]")
       );
@@ -23949,6 +24177,24 @@ function OhhwellsBridge() {
         return;
       }
       const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
+      if (!isDragOver) {
+        const buttonHit = findButtonAtPoint(x, y);
+        if (buttonHit) {
+          dismissImageHover();
+          if (findNavbarCtaAtPoint(x, y)) {
+            probeNavigationHoverAt(x, y);
+            return;
+          }
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          const selected = selectedElRef.current;
+          if (selected !== buttonHit && !selected?.contains(buttonHit)) {
+            clearHrefKeyHover(buttonHit);
+            hoveredItemElRef.current = buttonHit;
+            setHoveredItemRect(buttonHit.getBoundingClientRect());
+          }
+          return;
+        }
+      }
       if (isPointOverNavigation(x, y)) {
         dismissImageHover();
         probeNavigationHoverAt(x, y);
@@ -24383,6 +24629,11 @@ function OhhwellsBridge() {
         return;
       }
       if (onNavDragOver(e)) return;
+      if (buttonCollectionDragRef.current) {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        return;
+      }
       e.preventDefault();
       const el = findImageAtPoint(e.clientX, e.clientY, false);
       if (!el) {
@@ -24407,6 +24658,7 @@ function OhhwellsBridge() {
     };
     const handleDrop = (e) => {
       e.preventDefault();
+      if (buttonCollectionDragRef.current || navDragRef.current || footerDragRef.current) return;
       const el = findImageAtPoint(e.clientX, e.clientY, false);
       if (!el) return;
       const file = e.dataTransfer?.files?.[0];
@@ -26064,6 +26316,97 @@ function OhhwellsBridge() {
       unlockFooterDragInteraction();
     };
   }, [isEditMode]);
+  (0, import_react19.useEffect)(() => {
+    if (!isEditMode) return;
+    const THRESHOLD = 10;
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      if (buttonCollectionDragRef.current || navDragRef.current || footerDragRef.current) return;
+      if (buttonPointerDragRef.current) return;
+      const target = e.target;
+      if (!target) return;
+      if (target.closest(
+        '[data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-toolbar], [data-ohw-item-toolbar-anchor], [data-ohw-link-popover-root], [data-ohw-floating-panel]'
+      )) {
+        return;
+      }
+      const fromTarget = target.closest('[data-ohw-role="navbar-button"]');
+      const anchor = (fromTarget && !fromTarget.closest("[data-ohw-bridge]") ? fromTarget : null) ?? findNavbarCtaAtPoint(e.clientX, e.clientY);
+      if (!anchor || !collectionDragEnabled(anchor)) return;
+      disableNativeHrefDrag(anchor);
+      setMediaHover(null);
+      buttonPointerDragRef.current = {
+        el: anchor,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.pointerId,
+        started: false
+      };
+    };
+    const onPointerMove = (e) => {
+      const pending = buttonPointerDragRef.current;
+      if (!pending) return;
+      if (pending.started) {
+        e.preventDefault();
+        clearTextSelection();
+        const dragged = buttonCollectionDragRef.current;
+        if (!dragged) return;
+        refreshButtonDragVisuals(dragged, e.clientX, e.clientY);
+        return;
+      }
+      const dx = e.clientX - pending.startX;
+      const dy = e.clientY - pending.startY;
+      if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
+      e.preventDefault();
+      pending.started = true;
+      armFooterPressDrag();
+      clearTextSelection();
+      try {
+        document.body.setPointerCapture(pending.pointerId);
+      } catch {
+      }
+      if (linkPopoverOpenRef.current) setLinkPopoverRef.current(null);
+      if (activeElRef.current) deactivateRef.current();
+      ensureNavbarButtonCollection(pending.el, editContentRef.current);
+      buttonCollectionDragRef.current = pending.el;
+      lockFooterDuringDrag();
+      setIsItemDragging(true);
+      refreshButtonDragVisuals(pending.el, e.clientX, e.clientY);
+    };
+    const endPointerDrag = (e) => {
+      const pending = buttonPointerDragRef.current;
+      buttonPointerDragRef.current = null;
+      try {
+        if (document.body.hasPointerCapture(e.pointerId)) {
+          document.body.releasePointerCapture(e.pointerId);
+        }
+      } catch {
+      }
+      if (!pending) return;
+      if (!pending.started) {
+        unlockFooterDragInteraction();
+        return;
+      }
+      suppressNextClickRef.current = true;
+      suppressClickUntilRef.current = Date.now() + 500;
+      persistButtonCollectionDrag(pending.el, e.clientX);
+    };
+    const blockSelectStart = (e) => {
+      if (buttonCollectionDragRef.current || buttonPointerDragRef.current?.started) e.preventDefault();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("pointermove", onPointerMove, true);
+    document.addEventListener("pointerup", endPointerDrag, true);
+    document.addEventListener("pointercancel", endPointerDrag, true);
+    document.addEventListener("selectstart", blockSelectStart, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("pointermove", onPointerMove, true);
+      document.removeEventListener("pointerup", endPointerDrag, true);
+      document.removeEventListener("pointercancel", endPointerDrag, true);
+      document.removeEventListener("selectstart", blockSelectStart, true);
+    };
+  }, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
   (0, import_react19.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
@@ -26717,7 +27060,7 @@ function OhhwellsBridge() {
         ),
         siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
         siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
-        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
+        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
         isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
@@ -26760,6 +27103,27 @@ function OhhwellsBridge() {
           },
           `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
         )),
+        isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-2147483646",
+            style: {
+              left: slot.left,
+              top: slot.top,
+              width: slot.width,
+              height: slot.height
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              DropIndicator,
+              {
+                direction: slot.direction,
+                state: activeButtonDropIndex === i ? "dragActive" : "dragIdle",
+                className: "!h-full !w-full"
+              }
+            )
+          },
+          `button-drop-${slot.direction}-${slot.insertIndex}-${i}`
+        )),
         hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
         hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
         hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
@@ -26928,7 +27292,7 @@ function OhhwellsBridge() {
         toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ItemInteractionLayer,
           {
-            rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
+            rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
             toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
             toolbarBelowEl: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanel(selectedElRef.current) : null,
             elRef: glowElRef,