@ohhwells/bridge 0.1.108 → 0.1.110

package/dist/index.cjs

@@ -76,7 +76,7 @@ module.exports = __toCommonJS(index_exports);
 // src/OhhwellsBridge.tsx
 var import_react17 = __toESM(require("react"), 1);
 var import_client2 = require("react-dom/client");
-var import_react_dom3 = require("react-dom");
+var import_react_dom4 = require("react-dom");
 
 // src/linkHrefStore.ts
 var linkHrefStore = /* @__PURE__ */ new Map();
@@ -7772,6 +7772,7 @@ function ItemActionToolbar({
 
 // src/ui/item-interaction-layer.tsx
 var import_react7 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var PRIMARY = "var(--ohw-primary, #0885FE)";
 var CHROME_RADIUS = 6;
@@ -7781,6 +7782,7 @@ var TOOLBAR_EDGE_MARGIN = 4;
 var SELECTION_CHROME_GAP = 4;
 var HOVER_CHROME_GAP = 2;
 var TOOLBAR_STROKE_GAP = 4;
+var DETACHED_TOOLBAR_Z = 2147483647;
 function getChromeZIndex(state) {
   switch (state) {
     case "active-top":
@@ -7838,6 +7840,14 @@ function ClampedToolbarSlot({
       const parent = slot.offsetParent;
       if (!parent) return;
       const parentRect = parent.getBoundingClientRect();
+      if (align === "left") {
+        const leftEdge = parentRect.left;
+        const maxLeft = window.innerWidth - TOOLBAR_EDGE_MARGIN - w;
+        const minLeft = TOOLBAR_EDGE_MARGIN;
+        const clampedLeft = Math.max(minLeft, Math.min(leftEdge, maxLeft));
+        slot.style.transform = `translateX(${clampedLeft - leftEdge}px)`;
+        return;
+      }
       const centerX = parentRect.left + parentRect.width / 2;
       const half = w / 2;
       const clampedCenter = Math.max(
@@ -7845,7 +7855,7 @@ function ClampedToolbarSlot({
         Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN - half)
       );
       const offsetX = clampedCenter - centerX;
-      slot.style.transform = align === "left" ? "none" : `translateX(calc(-50% + ${offsetX}px))`;
+      slot.style.transform = `translateX(calc(-50% + ${offsetX}px))`;
     };
     clamp();
     const ro = new ResizeObserver(clamp);
@@ -7879,13 +7889,25 @@ function ClampedToolbarSlot({
 function DetachedBelowToolbarSlot({
   centerX,
   belowRect,
+  belowEl,
   children
 }) {
   const slotRef = (0, import_react7.useRef)(null);
+  const [anchorBottom, setAnchorBottom] = (0, import_react7.useState)(belowRect.bottom);
+  const [portalTarget] = (0, import_react7.useState)(
+    () => typeof document === "undefined" ? null : document.querySelector("[data-ohw-bridge-root]") ?? document.body
+  );
+  (0, import_react7.useLayoutEffect)(() => {
+    setAnchorBottom(belowRect.bottom);
+  }, [belowRect.bottom, belowRect.height, belowRect.top]);
   (0, import_react7.useLayoutEffect)(() => {
     const slot = slotRef.current;
     if (!slot) return;
-    const clamp = () => {
+    const sync = () => {
+      if (belowEl?.isConnected) {
+        const nextBottom = belowEl.getBoundingClientRect().bottom;
+        setAnchorBottom((prev) => Math.abs(prev - nextBottom) < 0.5 ? prev : nextBottom);
+      }
       const toolbar = slot.firstElementChild;
       if (!toolbar) return;
       const w = toolbar.offsetWidth;
@@ -7897,30 +7919,46 @@ function DetachedBelowToolbarSlot({
       );
       slot.style.left = `${clampedCenter}px`;
     };
-    clamp();
-    const ro = new ResizeObserver(clamp);
+    sync();
+    const ro = new ResizeObserver(sync);
     ro.observe(slot);
     if (slot.firstElementChild) ro.observe(slot.firstElementChild);
-    window.addEventListener("resize", clamp);
+    if (belowEl) {
+      ro.observe(belowEl);
+      const mo = new MutationObserver(sync);
+      mo.observe(belowEl, { childList: true, subtree: true });
+      window.addEventListener("resize", sync);
+      return () => {
+        ro.disconnect();
+        mo.disconnect();
+        window.removeEventListener("resize", sync);
+      };
+    }
+    window.addEventListener("resize", sync);
     return () => {
       ro.disconnect();
-      window.removeEventListener("resize", clamp);
+      window.removeEventListener("resize", sync);
     };
-  }, [centerX, belowRect, children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "div",
-    {
-      ref: slotRef,
-      className: "pointer-events-auto fixed",
-      style: {
-        top: belowRect.bottom + TOOLBAR_STROKE_GAP,
-        left: centerX,
-        transform: "translateX(-50%)",
-        zIndex: getChromeZIndex("active-bottom")
-      },
-      "data-ohw-item-toolbar-anchor": "below-external",
-      children
-    }
+  }, [centerX, belowRect, belowEl, children]);
+  if (!portalTarget) return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        ref: slotRef,
+        className: "pointer-events-auto fixed",
+        style: {
+          top: anchorBottom + TOOLBAR_STROKE_GAP,
+          left: centerX,
+          transform: "translateX(-50%)",
+          zIndex: DETACHED_TOOLBAR_Z
+        },
+        "data-ohw-bridge": "",
+        "data-ohw-item-toolbar-anchor": "below-external",
+        children
+      }
+    ),
+    portalTarget
   );
 }
 function ItemInteractionLayer({
@@ -7929,6 +7967,7 @@ function ItemInteractionLayer({
   elRef,
   toolbar,
   toolbarBelowRect = null,
+  toolbarBelowEl = null,
   showHandle = false,
   dragDisabled = false,
   dragHandleLabel = "Reorder item",
@@ -8034,6 +8073,7 @@ function ItemInteractionLayer({
           {
             centerX: rect.left + rect.width / 2,
             belowRect: toolbarBelowRect,
+            belowEl: toolbarBelowEl,
             children: toolbar
           }
         ) : null
@@ -8404,6 +8444,7 @@ function setFieldRequired(wrapper, required) {
 function beginPlaceholderEdit(wrapper) {
   const input = fieldInputOf(wrapper);
   if (!input || input.hasAttribute(PLACEHOLDER_EDIT_ATTR)) return;
+  input.style.setProperty("--ohw-placeholder-edit-color", getComputedStyle(input).color);
   input.setAttribute(PLACEHOLDER_EDIT_ATTR, "");
   input.value = input.getAttribute("placeholder") ?? "";
   input.setAttribute("placeholder", "");
@@ -8414,6 +8455,7 @@ function commitPlaceholderEdit(wrapper) {
   if (!input || !input.hasAttribute(PLACEHOLDER_EDIT_ATTR)) return false;
   const typed = input.value;
   input.removeAttribute(PLACEHOLDER_EDIT_ATTR);
+  input.style.removeProperty("--ohw-placeholder-edit-color");
   input.value = "";
   const previous = input.getAttribute("placeholder") ?? "";
   input.setAttribute("placeholder", typed);
@@ -9237,10 +9279,25 @@ function AiSectionOverlay({
     },
     [postToParent2]
   );
+  const [navDropdownForceOpen, setNavDropdownForceOpen] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    const update = () => {
+      setNavDropdownForceOpen(Boolean(document.querySelector("[data-ohw-nav-force-open]")));
+    };
+    update();
+    const mo = new MutationObserver(update);
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-ohw-nav-force-open"],
+      subtree: true
+    });
+    return () => mo.disconnect();
+  }, []);
   const activeSelectionId = reviewId ? null : selectedId;
   const selectionRect = useLiveSectionRect(activeSelectionId);
   const reviewRect = useLiveSectionRect(reviewId);
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
+  const showSelectionBorder = Boolean(selectionRect) && !navDropdownForceOpen;
   (0, import_react8.useEffect)(() => {
     const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
     if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
@@ -9280,7 +9337,7 @@ function AiSectionOverlay({
         }
       }
     ),
-    selectionRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    showSelectionBorder && selectionRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
       {
         "data-ohw-ai-section-selected": "",
@@ -9344,7 +9401,7 @@ function AiSectionOverlay({
 }
 
 // src/OhhwellsBridge.tsx
-var import_react_dom4 = require("react-dom");
+var import_react_dom5 = require("react-dom");
 var import_navigation3 = require("next/navigation");
 
 // src/lib/cta-button.ts
@@ -10128,7 +10185,7 @@ function LinkEditorPanel({ state, onClose }) {
 
 // src/ui/link-modal/SectionPickerOverlay.tsx
 var import_react10 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 var import_lucide_react13 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -10359,7 +10416,7 @@ function SectionPickerOverlay({
   }, [onBack]);
   const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
   if (!portalRoot) return null;
-  return (0, import_react_dom2.createPortal)(
+  return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
@@ -11382,7 +11439,11 @@ function isNestedNavChild(anchor) {
 function navItemOwnsDropdownPanel(anchor) {
   if (isNestedNavChild(anchor)) return true;
   const group = anchor.closest("[data-ohw-nav-group]");
-  return Boolean(group?.querySelector(":scope > [data-ohw-nav-children]"));
+  const childrenRoot = group?.querySelector(":scope > [data-ohw-nav-children]");
+  if (!childrenRoot) return false;
+  return Array.from(childrenRoot.querySelectorAll(":scope > [data-ohw-href-key]")).some(
+    isNavbarLinkItem
+  );
 }
 function setNavGroupForceOpen(anchor, open) {
   document.querySelectorAll("[data-ohw-nav-force-open]").forEach((el) => {
@@ -11522,6 +11583,12 @@ function addNavbarSubitem(parentAnchor, href = "/", label = "New") {
   };
 }
 function reconcileNavbarItemsFromContent(content) {
+  const openParentKeys = Array.from(
+    document.querySelectorAll("[data-ohw-nav-group][data-ohw-nav-force-open]")
+  ).map((group) => {
+    const trigger = group.querySelector(":scope > [data-ohw-href-key]");
+    return trigger?.getAttribute("data-ohw-href-key") ?? null;
+  }).filter((key) => Boolean(key));
   const orderForest = parseNavOrderJson(content[NAV_ORDER_KEY]);
   if (orderForest?.length) {
     const allowed = new Set(flattenNavOrder(orderForest));
@@ -11577,6 +11644,12 @@ function reconcileNavbarItemsFromContent(content) {
     }
     pruneNavbarItemsNotInOrder(allowed);
     applyNavForest(orderForest);
+    for (const parentKey of openParentKeys) {
+      const trigger = document.querySelector(
+        `[data-ohw-href-key="${CSS.escape(parentKey)}"]`
+      );
+      if (trigger) setNavGroupForceOpen(trigger, true);
+    }
     return;
   }
   const indices = collectNavbarIndicesFromContent(content);
@@ -11587,6 +11660,12 @@ function reconcileNavbarItemsFromContent(content) {
     if (!href && !label) continue;
     insertNavbarItemDom(index, href ?? "/", label ?? "Untitled", null);
   }
+  for (const parentKey of openParentKeys) {
+    const trigger = document.querySelector(
+      `[data-ohw-href-key="${CSS.escape(parentKey)}"]`
+    );
+    if (trigger) setNavGroupForceOpen(trigger, true);
+  }
 }
 function pruneNavbarItemsNotInOrder(allowed) {
   const roots = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
@@ -11935,19 +12014,31 @@ function deleteNavbarItem(sourceAnchor) {
 
 // src/lib/icon-markup.ts
 var GLYPH_SELECTOR = "svg, img";
+function squareIconSide(width, height) {
+  if (!(width > 0) || !(height > 0)) return Math.max(width, height, 0);
+  const ratio = width / height;
+  if (ratio > 1.35 || ratio < 1 / 1.35) return Math.min(width, height);
+  return (width + height) / 2;
+}
 function referenceBox(slot) {
   const row = slot.closest("[data-ohw-socials-row]") ?? slot.closest("a")?.parentElement ?? null;
   const neighbour = row ? Array.from(row.querySelectorAll('[data-ohw-editable="icon"]')).find(
     (el) => el !== slot && !el.hasAttribute("data-ohw-social-icon-placeholder")
   ) : null;
+  const fromRect = (box) => {
+    if (!box?.width || !box.height) return null;
+    const side = Math.round(squareIconSide(box.width, box.height));
+    return side > 0 ? { width: side, height: side } : null;
+  };
   if (neighbour) {
-    const box2 = neighbour.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect();
-    if (box2?.width && box2.height) return box2;
+    const sized = fromRect(
+      neighbour.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect()
+    );
+    if (sized) return sized;
   }
-  const own = slot.getBoundingClientRect();
-  if (own.width && own.height) return own;
-  const box = slot.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect() ?? null;
-  return box?.width && box.height ? box : null;
+  const own = fromRect(slot.getBoundingClientRect());
+  if (own) return own;
+  return fromRect(slot.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect());
 }
 function iconMarkupSizedFor(slot, markup) {
   const box = referenceBox(slot);
@@ -11961,8 +12052,8 @@ function iconMarkupSizedFor(slot, markup) {
     glyph.style.height = "1.5em";
     return holder.innerHTML;
   }
-  glyph.style.width = `${Math.round(box.width)}px`;
-  glyph.style.height = `${Math.round(box.height)}px`;
+  glyph.style.width = `${box.width}px`;
+  glyph.style.height = `${box.height}px`;
   return holder.innerHTML;
 }
 var ICON_SOURCE_ATTR = "data-ohw-icon-source";
@@ -11981,16 +12072,6 @@ function applyIconMarkup(slot, markup) {
     });
   }
 }
-function detectIconStyle(el) {
-  const row = el.closest("[data-ohw-socials-row]");
-  const glyphs = Array.from((row ?? el).querySelectorAll("svg"));
-  const outlined = glyphs.some((svg) => {
-    return Array.from(svg.querySelectorAll("*")).some((node) => {
-      return node.getAttribute("stroke") !== null && node.getAttribute("stroke") !== "none";
-    });
-  });
-  return outlined ? "outline" : "fill";
-}
 function iconMarkupInheritingColour(markup) {
   const holder = document.createElement("div");
   holder.innerHTML = markup;
@@ -12013,6 +12094,9 @@ var SOCIAL_KEY_RE = /(^|-)social(s)?(-|$)/i;
 var SOCIAL_PLATFORM_KEY_RE = /(^|-)(instagram|facebook|fb|linkedin|twitter|tiktok|youtube|threads|whatsapp|telegram|pinterest|snapchat|discord|behance|dribbble|vimeo|spotify|github|reddit|medium|twitch)(-|$)/i;
 var SOCIALS_ROW_ATTR = "data-ohw-socials-row";
 var SOCIALS_ITEM_ATTR = "data-ohw-social-item";
+var SOCIALS_ICONS_ATTR = "data-ohw-socials-icons";
+var SOCIALS_TEXT_ATTR = "data-ohw-socials-text";
+var SOCIALS_DISPLAY_STYLE_ID = "ohw-socials-display-style";
 function isSocialItem(el) {
   if (!el) return false;
   const anchor = el instanceof HTMLAnchorElement ? el : el.closest("a");
@@ -12119,9 +12203,11 @@ var SOCIALS_EMPTY_LABEL_ATTR = "data-ohw-empty-label";
 var EMPTY_LABEL_WIDTH = "8ch";
 function markEmptySocialLabels(root = document, skip) {
   root.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`).forEach((row) => {
+    if (row.getAttribute(SOCIALS_TEXT_ATTR) === "off") return;
     listSocialItems(row).forEach((item) => {
       const label = socialLabelElement(item);
       if (!label || label === skip) return;
+      if (label.hasAttribute("data-ohw-hidden")) return;
       const empty = !label.textContent?.trim();
       if (empty === label.hasAttribute(SOCIALS_EMPTY_LABEL_ATTR)) return;
       if (empty) {
@@ -12448,6 +12534,11 @@ function planSocialMove(hrefKey, insertIndex, root = document) {
 }
 var SOCIALS_DISPLAY_KEY = "__ohw_socials_display";
 function readSocialsDisplay(row) {
+  const iconsAttr = row.getAttribute(SOCIALS_ICONS_ATTR);
+  const textAttr = row.getAttribute(SOCIALS_TEXT_ATTR);
+  if ((iconsAttr === "on" || iconsAttr === "off") && (textAttr === "on" || textAttr === "off")) {
+    return { text: textAttr === "on", icon: iconsAttr === "on" };
+  }
   const items = listSocialItems(row);
   const visible = (el) => Boolean(el) && el.style.display !== "none" && el.getAttribute("data-ohw-hidden") === null;
   const drawn = (el) => Boolean(el && visible(el) && el.innerHTML.trim());
@@ -12472,15 +12563,48 @@ function socialsDisplayWith(row, display, content) {
   return { ...parseSocialsDisplay(content[SOCIALS_DISPLAY_KEY]) ?? {}, [rowKeyOf(row)]: display };
 }
 function applySocialsDisplayToRow(row, display) {
+  ensureSocialsDisplayStyles(row.ownerDocument);
+  row.setAttribute(SOCIALS_ICONS_ATTR, display.icon ? "on" : "off");
+  row.setAttribute(SOCIALS_TEXT_ATTR, display.text ? "on" : "off");
   listSocialItems(row).forEach((item) => {
     const label = socialLabelElement(item);
     const icon = item.querySelector(ICON_SELECTOR);
-    if (label) label.style.display = display.text ? "" : "none";
-    if (icon) icon.style.display = display.icon ? "" : "none";
+    setSocialSlotVisible(label, display.text);
+    setSocialSlotVisible(icon, display.icon);
     layOutIconAndLabel(item, Boolean(display.text));
   });
   allowRowToWrap(row);
 }
+function setSocialSlotVisible(el, visible) {
+  if (!el) return;
+  if (visible) {
+    el.removeAttribute("data-ohw-hidden");
+    if (el.style.display === "none") el.style.display = "";
+  } else {
+    el.setAttribute("data-ohw-hidden", "");
+    el.style.display = "none";
+  }
+}
+function ensureSocialsDisplayStyles(doc) {
+  if (!doc?.head) return;
+  if (doc.getElementById(SOCIALS_DISPLAY_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = SOCIALS_DISPLAY_STYLE_ID;
+  style.textContent = `
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_ICONS_ATTR}="off"] [data-ohw-editable="icon"],
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_ICONS_ATTR}="off"] [data-ohw-editable="icon"] * {
+      display: none !important;
+    }
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_TEXT_ATTR}="off"] [${SOCIALS_LABEL_ATTR}],
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_TEXT_ATTR}="off"] [data-ohw-href-key] > [data-ohw-editable="text"],
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_TEXT_ATTR}="off"] [data-ohw-href-key] > [data-ohw-editable="plain"],
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_TEXT_ATTR}="off"] [data-ohw-social-item] [data-ohw-editable="text"],
+    [${SOCIALS_ROW_ATTR}][${SOCIALS_TEXT_ATTR}="off"] [data-ohw-social-item] [data-ohw-editable="plain"] {
+      display: none !important;
+    }
+  `;
+  doc.head.appendChild(style);
+}
 function layOutIconAndLabel(item, on) {
   const hasBoth = Boolean(item.querySelector(ICON_SELECTOR)) && Boolean(socialLabelElement(item));
   if (!hasBoth) {
@@ -12900,15 +13024,6 @@ function setFooterColumnHeadingVisible(column, visible) {
   else column.prepend(heading);
   return { headingKey, text, visible: true };
 }
-function ensureFooterColumnDefaultHeading(column, content) {
-  if (isFooterColumnHeadingVisible(column)) return null;
-  const headingKey = getFooterColumnHeadingKey(column);
-  if (!headingKey) return null;
-  if (content && content[headingKey] === "") return null;
-  const result = setFooterColumnHeadingVisible(column, true);
-  if (!result?.visible) return null;
-  return { headingKey: result.headingKey, text: result.text };
-}
 function reconcileFooterHeadingVisibility(content) {
   for (const column of listFooterColumns()) {
     const headingKey = getFooterColumnHeadingKey(column);
@@ -14426,20 +14541,30 @@ function useNavItemDrag({
   const navPointerDragRef = (0, import_react14.useRef)(null);
   const clearNavDragVisuals = (0, import_react14.useCallback)(() => {
     const session = navDragRef.current;
-    const keepOpenEl = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.draggedEl : null;
+    const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
     navDragRef.current = null;
     setNavDropSlots([]);
     setActiveNavDropIndex(null);
     setDraggedItemRect(null);
     setSiblingHintRects([]);
     setIsItemDragging(false);
-    if (keepOpenEl?.isConnected) {
-      setNavGroupForceOpen(keepOpenEl, true);
+    if (nestedHrefKey) {
+      const reopen = () => {
+        const desktop = document.querySelector("[data-ohw-nav-container]");
+        const drawer = document.querySelector("[data-ohw-nav-drawer]");
+        const link = desktop?.querySelector(
+          `[data-ohw-href-key="${CSS.escape(nestedHrefKey)}"]`
+        ) ?? drawer?.querySelector(
+          `[data-ohw-href-key="${CSS.escape(nestedHrefKey)}"]`
+        ) ?? document.querySelector(
+          `[data-ohw-href-key="${CSS.escape(nestedHrefKey)}"]`
+        );
+        if (link) setNavGroupForceOpen(link, true);
+      };
+      reopen();
       requestAnimationFrame(() => {
-        if (keepOpenEl.isConnected) setNavGroupForceOpen(keepOpenEl, true);
-        requestAnimationFrame(() => {
-          if (keepOpenEl.isConnected) setNavGroupForceOpen(keepOpenEl, true);
-        });
+        reopen();
+        requestAnimationFrame(reopen);
       });
     } else {
       setNavGroupForceOpen(null, false);
@@ -14524,19 +14649,24 @@ function useNavItemDrag({
       const wasSelected = session.wasSelected;
       const hrefKey = session.hrefKey;
       const keepDropdownOpen = Boolean(session.draggedEl.closest("[data-ohw-nav-children]"));
-      const applySelectionAfterDrop = () => {
-        if (!wasSelected) {
-          deselectRef.current();
-          return;
-        }
+      const findDroppedLink = () => {
         const desktop = document.querySelector("[data-ohw-nav-container]");
         const drawer = document.querySelector("[data-ohw-nav-drawer]");
-        const link = desktop?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? drawer?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
-        if (link) {
+        return desktop?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? drawer?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
+      };
+      const reopenDropdown = () => {
+        if (!keepDropdownOpen) return;
+        const link = findDroppedLink();
+        if (link) setNavGroupForceOpen(link, true);
+      };
+      const applySelectionAfterDrop = () => {
+        const link = findDroppedLink();
+        if (wasSelected && link) {
           selectRef.current(link);
-          return;
+        } else {
+          deselectRef.current();
         }
-        deselectRef.current();
+        reopenDropdown();
       };
       if (planned) {
         editContentRef.current = {
@@ -14555,27 +14685,31 @@ function useNavItemDrag({
           type: "ow:change",
           nodes: [{ key: NAV_ORDER_KEY, text: planned.orderJson }]
         });
+        reopenDropdown();
         applySelectionAfterDrop();
         clearNavDragVisuals();
-        if (keepDropdownOpen) {
-          requestAnimationFrame(() => {
-            const desktop = document.querySelector("[data-ohw-nav-container]");
-            const drawer = document.querySelector("[data-ohw-nav-drawer]");
-            const link = desktop?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? drawer?.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
-            if (link) setNavGroupForceOpen(link, true);
-          });
-        }
+        reopenDropdown();
         requestAnimationFrame(() => {
           if (editContentRef.current[NAV_ORDER_KEY] === planned.orderJson) {
             applyNavForest(planned.forest);
           }
+          reopenDropdown();
           applySelectionAfterDrop();
-          requestAnimationFrame(applySelectionAfterDrop);
+          requestAnimationFrame(() => {
+            reopenDropdown();
+            applySelectionAfterDrop();
+          });
+          window.setTimeout(reopenDropdown, 0);
+          window.setTimeout(reopenDropdown, 50);
+          window.setTimeout(reopenDropdown, 150);
         });
         return;
       }
       applySelectionAfterDrop();
       clearNavDragVisuals();
+      reopenDropdown();
+      window.setTimeout(reopenDropdown, 0);
+      window.setTimeout(reopenDropdown, 50);
     },
     [clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
   );
@@ -14667,7 +14801,7 @@ function useNavItemDrag({
       }
       if (linkPopoverOpenRef.current) setLinkPopover(null);
       const isNestedDrag = Boolean(pending.el.closest("[data-ohw-nav-children]"));
-      if (activeElRef.current && !isNestedDrag) deactivateRef.current();
+      if (activeElRef.current) deactivateRef.current();
       const key = pending.el.getAttribute("data-ohw-href-key");
       if (!key) return;
       beginNavDragRef.current({
@@ -14678,9 +14812,7 @@ function useNavItemDrag({
         lastClientY: e.clientY,
         activeSlot: null
       });
-      if (activeElRef.current && isNestedDrag) {
-        deactivateRef.current();
-      }
+      if (isNestedDrag) setNavGroupForceOpen(pending.el, true);
     };
     const endPointerDrag = (e) => {
       const pending = navPointerDragRef.current;
@@ -15857,7 +15989,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
   try {
     const root = (0, import_client2.createRoot)(container);
     schedulingRoots.set(container, root);
-    (0, import_react_dom3.flushSync)(() => {
+    (0, import_react_dom4.flushSync)(() => {
       root.render(
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           SchedulingWidget,
@@ -15995,7 +16127,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   }
   const root = (0, import_client2.createRoot)(container);
   schedulingRoots.set(container, root);
-  (0, import_react_dom3.flushSync)(() => {
+  (0, import_react_dom4.flushSync)(() => {
     root.render(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         SchedulingWidget,
@@ -16238,14 +16370,18 @@ function isNavDropdownPanelOpen(childrenRoot) {
   }
   return true;
 }
-function getOpenNavDropdownPanelRect(anchor) {
+function getOpenNavDropdownPanel(anchor) {
   const group = anchor.closest("[data-ohw-nav-group]");
   if (!group?.hasAttribute("data-ohw-nav-force-open")) return null;
   const panel = group.querySelector(":scope > [data-ohw-nav-children]");
   if (!panel || !isNavDropdownPanelOpen(panel)) return null;
   const panelRect = panel.getBoundingClientRect();
   if (panelRect.height < 2 || panelRect.width < 2) return null;
-  return panelRect;
+  return panel;
+}
+function getOpenNavDropdownPanelRect(anchor) {
+  const panel = getOpenNavDropdownPanel(anchor);
+  return panel ? panel.getBoundingClientRect() : null;
 }
 function isNavItemPointerTarget(el) {
   const childrenRoot = el.closest("[data-ohw-nav-children]");
@@ -16281,7 +16417,7 @@ function requestSocialDialog(anchor, post, content) {
     hrefKey: item.getAttribute("data-ohw-href-key") ?? "",
     iconKey,
     url: getLinkHref4(item),
-    iconStyle: detectIconStyle(item),
+    iconStyle: "outline",
     // What was chosen last time. Guessing from the address instead reads as "Website" for anything
     // unrecognised, and for an item with no address at all — so a deliberate choice looked lost.
     platformId: content[socialPlatformKey(iconKey)] ?? ""
@@ -16784,6 +16920,10 @@ function getIframeVisibleClip(parentScroll) {
   );
   return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
 }
+function isRectOutsideClip(rect, clip) {
+  if (!clip) return false;
+  return rect.bottom < clip.top || rect.top > clip.bottom;
+}
 function applyVisibleViewport(el, parentScroll) {
   const clip = getIframeVisibleClip(parentScroll);
   const top = clip?.top ?? 0;
@@ -17853,11 +17993,16 @@ function OhhwellsBridge() {
       if (owner) persistFieldsRef.current(owner);
     }
     activeElRef.current = null;
-    const preserveNavDropdown = Boolean(navPointerDragRef.current?.el?.closest("[data-ohw-nav-children]")) || Boolean(navDragRef.current?.draggedEl?.closest("[data-ohw-nav-children]")) || Boolean(
+    const preserveNavDropdown = Boolean(navPointerDragRef.current?.el?.closest("[data-ohw-nav-children]")) || Boolean(navDragRef.current?.draggedEl?.closest("[data-ohw-nav-children]")) || Boolean(el.closest("[data-ohw-nav-children]")) || Boolean(
       selectedElRef.current?.closest("[data-ohw-nav-children]") && selectedElRef.current?.closest("[data-ohw-nav-group]")?.hasAttribute("data-ohw-nav-force-open")
     );
     if (!preserveNavDropdown) {
       setNavGroupForceOpen(null, false);
+    } else {
+      const keepAnchor = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current : el.closest("[data-ohw-href-key]") ?? el;
+      if (keepAnchor.closest("[data-ohw-nav-children]")) {
+        setNavGroupForceOpen(keepAnchor, true);
+      }
     }
     setReorderHrefKey(null);
     setReorderDragDisabled(false);
@@ -17876,6 +18021,7 @@ function OhhwellsBridge() {
     });
   }, []);
   const deselect = (0, import_react17.useCallback)(() => {
+    const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
     clearSelectedAttr();
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
@@ -17899,7 +18045,11 @@ function OhhwellsBridge() {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
     if (!activeElRef.current) {
-      setNavGroupForceOpen(null, false);
+      if (nestedGroup?.isConnected) {
+        nestedGroup.setAttribute("data-ohw-nav-force-open", "");
+      } else {
+        setNavGroupForceOpen(null, false);
+      }
       setToolbarRect(null);
       setToolbarVariant("none");
     }
@@ -17980,10 +18130,7 @@ function OhhwellsBridge() {
     setSelectedIsSocialsRow(false);
     const isDropdownTrigger = !isNestedNavChild(navAnchor) && (navItemHasDropdownChildren(navAnchor) || navItemOwnsDropdownPanel(navAnchor));
     if (isNestedNavChild(navAnchor)) {
-      const group = navAnchor.closest("[data-ohw-nav-group]");
-      if (group?.hasAttribute("data-ohw-nav-force-open")) {
-        setNavGroupForceOpen(navAnchor, true);
-      }
+      setNavGroupForceOpen(navAnchor, true);
       setNavDropdownPreviewOpen(null);
     } else if (isDropdownTrigger) {
       const group = navAnchor.closest("[data-ohw-nav-group]");
@@ -18135,7 +18282,7 @@ function OhhwellsBridge() {
         hrefKey: planned.hrefKey,
         iconKey: planned.iconKey,
         url: "",
-        iconStyle: detectIconStyle(getSocialItem(selected) ?? socialsRow),
+        iconStyle: "outline",
         platformId: "",
         // Tells the editor this one is not on the page yet, so dismissing means "never mind".
         isNew: true
@@ -18217,8 +18364,10 @@ function OhhwellsBridge() {
     setNavDropdownPreviewOpen(true);
     setToolbarRect(selected.getBoundingClientRect());
     requestAnimationFrame(() => {
-      if (selected.isConnected) setToolbarRect(selected.getBoundingClientRect());
-      enterEditOnNewItem(result.anchor);
+      requestAnimationFrame(() => {
+        if (selected.isConnected) setToolbarRect(selected.getBoundingClientRect());
+        enterEditOnNewItem(result.anchor);
+      });
     });
   }, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
   const handleAddFooterColumn = (0, import_react17.useCallback)(() => {
@@ -18598,10 +18747,7 @@ function OhhwellsBridge() {
     clearHrefKeyHover(anchor);
     const isDropdownTrigger = !isNestedNavChild(anchor) && (navItemHasDropdownChildren(anchor) || navItemOwnsDropdownPanel(anchor));
     if (isNestedNavChild(anchor)) {
-      const group = anchor.closest("[data-ohw-nav-group]");
-      if (group?.hasAttribute("data-ohw-nav-force-open")) {
-        setNavGroupForceOpen(anchor, true);
-      }
+      setNavGroupForceOpen(anchor, true);
       setNavDropdownPreviewOpen(null);
     } else if (isDropdownTrigger) {
       setNavGroupForceOpen(null, false);
@@ -18659,17 +18805,6 @@ function OhhwellsBridge() {
     setIsFooterFrameSelection(isFooterColumn);
     setNavDropdownPreviewOpen(null);
     if (isFooterColumn) {
-      const ensured = ensureFooterColumnDefaultHeading(el, editContentRef.current);
-      if (ensured) {
-        editContentRef.current = {
-          ...editContentRef.current,
-          [ensured.headingKey]: ensured.text
-        };
-        postToParent2({
-          type: "ow:change",
-          nodes: [{ key: ensured.headingKey, text: ensured.text }]
-        });
-      }
       setFooterHeadingVisible(isFooterColumnHeadingVisible(el));
     } else {
       setFooterHeadingVisible(null);
@@ -19513,8 +19648,10 @@ function OhhwellsBridge() {
       /* The glyph too, and this one mattered most: as a block it filled the whole width of its
          link and sat over the words, so every click meant for the text landed on the icon. */
       [data-ohw-socials-row] [data-ohw-editable="icon"] {
-        display: inline-flex;
-        flex: 0 0 auto;
+        display: inline-flex !important;
+        flex: 0 0 auto !important;
+        width: auto !important;
+        max-width: max-content !important;
         align-items: center;
       }
       [data-ohw-socials-row] a {
@@ -19593,9 +19730,24 @@ function OhhwellsBridge() {
       /* Somewhere to click the block itself, on every side (OHH-642) \u2014 editor only. */
       [data-ohw-editable="form"] {
         padding: 18px !important;
+        /* Horizontal newsletter rows collapse added fields into pill-circles without wrap. */
+        flex-wrap: wrap !important;
+        align-items: flex-end !important;
       }
+      [data-ohw-editable="form"] [data-ohw-form-field] {
+        flex: 1 1 12rem !important;
+        min-width: min(12rem, 100%) !important;
+        max-width: 100% !important;
+      }
+      /* Placeholder text lives in the value while selected. currentColor inside color-mix
+         resolves to the *inherited* color, so reverse-print footers washed it out on white
+         inputs \u2014 pin to the control's own color captured in beginPlaceholderEdit. */
       [data-ohw-placeholder-edit] {
-        color: color-mix(in srgb, currentColor 55%, transparent) !important;
+        color: color-mix(
+          in srgb,
+          var(--ohw-placeholder-edit-color, CanvasText) 55%,
+          transparent
+        ) !important;
         cursor: text !important;
       }
       /* Text hover chrome is drawn by the overlay (see hoveredTextRect) \u2014 the CSS outline
@@ -20871,6 +21023,7 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        dismissImageHover();
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -22119,14 +22272,20 @@ function OhhwellsBridge() {
     };
     const applyToolbarPos = (rect) => {
       const ps = parentScrollRef.current;
+      const hidden = isRectOutsideClip(rect, getIframeVisibleClip(ps));
       const measuredW = toolbarElRef.current?.offsetWidth || 330;
       if (toolbarElRef.current) {
-        const { top, left, transform } = calcToolbarPos(rect, ps, measuredW);
-        toolbarElRef.current.style.top = `${top}px`;
-        toolbarElRef.current.style.left = `${left}px`;
-        toolbarElRef.current.style.transform = transform;
+        toolbarElRef.current.style.display = hidden ? "none" : "";
+        if (!hidden) {
+          const { top, left, transform } = calcToolbarPos(rect, ps, measuredW);
+          toolbarElRef.current.style.top = `${top}px`;
+          toolbarElRef.current.style.left = `${left}px`;
+          toolbarElRef.current.style.transform = transform;
+        }
       }
       if (glowElRef.current) {
+        glowElRef.current.style.display = hidden ? "none" : "";
+        if (hidden) return;
         const GAP = SELECTION_CHROME_GAP2;
         glowElRef.current.style.top = `${rect.top - GAP}px`;
         glowElRef.current.style.left = `${rect.left - GAP}px`;
@@ -22568,7 +22727,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.107",
+        bridgeVersion: "0.1.109",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -23032,7 +23191,7 @@ function OhhwellsBridge() {
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OhwLoaderSpinner, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
     subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MadeWithOhhWells, {}),
-    bridgeRoot ? (0, import_react_dom4.createPortal)(
+    bridgeRoot ? (0, import_react_dom5.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
         isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
@@ -23301,8 +23460,9 @@ function OhhwellsBridge() {
           {
             rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
             toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
+            toolbarBelowEl: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanel(selectedElRef.current) : null,
             elRef: glowElRef,
-            state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanelRect(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
+            state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanel(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
             showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
             dragDisabled: reorderDragDisabled,
             dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
@@ -23355,7 +23515,7 @@ function OhhwellsBridge() {
             ) : void 0
           }
         ),
-        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             EditGlowChrome,
             {