@ohhwells/bridge 0.1.108 → 0.1.110

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/OhhwellsBridge.tsx
-import React12, { useCallback as useCallback8, useEffect as useEffect13, useLayoutEffect as useLayoutEffect5, useRef as useRef10, useState as useState13 } from "react";
+import React12, { useCallback as useCallback8, useEffect as useEffect13, useLayoutEffect as useLayoutEffect5, useRef as useRef10, useState as useState14 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 import { flushSync as flushSync2 } from "react-dom";
 
@@ -7698,7 +7698,8 @@ function ItemActionToolbar({
 }
 
 // src/ui/item-interaction-layer.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var PRIMARY = "var(--ohw-primary, #0885FE)";
 var CHROME_RADIUS = 6;
@@ -7708,6 +7709,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":
@@ -7765,6 +7767,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(
@@ -7772,7 +7782,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);
@@ -7806,13 +7816,25 @@ function ClampedToolbarSlot({
 function DetachedBelowToolbarSlot({
   centerX,
   belowRect,
+  belowEl,
   children
 }) {
   const slotRef = useRef2(null);
+  const [anchorBottom, setAnchorBottom] = useState4(belowRect.bottom);
+  const [portalTarget] = useState4(
+    () => typeof document === "undefined" ? null : document.querySelector("[data-ohw-bridge-root]") ?? document.body
+  );
+  useLayoutEffect2(() => {
+    setAnchorBottom(belowRect.bottom);
+  }, [belowRect.bottom, belowRect.height, belowRect.top]);
   useLayoutEffect2(() => {
     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;
@@ -7824,30 +7846,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__ */ jsx12(
-    "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 createPortal(
+    /* @__PURE__ */ jsx12(
+      "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({
@@ -7856,6 +7894,7 @@ function ItemInteractionLayer({
   elRef,
   toolbar,
   toolbarBelowRect = null,
+  toolbarBelowEl = null,
   showHandle = false,
   dragDisabled = false,
   dragHandleLabel = "Reorder item",
@@ -7961,6 +8000,7 @@ function ItemInteractionLayer({
           {
             centerX: rect.left + rect.width / 2,
             belowRect: toolbarBelowRect,
+            belowEl: toolbarBelowEl,
             children: toolbar
           }
         ) : null
@@ -8331,6 +8371,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", "");
@@ -8341,6 +8382,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);
@@ -8925,7 +8967,7 @@ function CarouselOverlay({
 }
 
 // src/ui/ai-section/AiSectionOverlay.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
 import { Check, X } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var findSectionElement = findByInstanceId;
@@ -8937,7 +8979,7 @@ function readRect(instanceId) {
   return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
 }
 function useLiveSectionRect(sectionId) {
-  const [rect, setRect] = useState5(null);
+  const [rect, setRect] = useState6(null);
   useEffect4(() => {
     if (!sectionId) {
       setRect(null);
@@ -8989,7 +9031,7 @@ function ReviewButton({
   background,
   color
 }) {
-  const [hover, setHover] = useState5(false);
+  const [hover, setHover] = useState6(false);
   return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx17(
       "button",
@@ -9043,9 +9085,9 @@ function AiSectionOverlay({
   postToParent: postToParent2,
   apiRef
 }) {
-  const [selectedId, setSelectedId] = useState5(null);
-  const [reviewId, setReviewId] = useState5(null);
-  const [reviewButtonsHidden, setReviewButtonsHidden] = useState5(false);
+  const [selectedId, setSelectedId] = useState6(null);
+  const [reviewId, setReviewId] = useState6(null);
+  const [reviewButtonsHidden, setReviewButtonsHidden] = useState6(false);
   const reviewIdRef = useRef4(null);
   reviewIdRef.current = reviewId;
   const selectedIdRef = useRef4(null);
@@ -9119,7 +9161,7 @@ function AiSectionOverlay({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [postToParent2]);
-  const [hoveredId, setHoveredId] = useState5(null);
+  const [hoveredId, setHoveredId] = useState6(null);
   useEffect4(() => {
     const onMove = (e) => {
       const t = e.target;
@@ -9164,10 +9206,25 @@ function AiSectionOverlay({
     },
     [postToParent2]
   );
+  const [navDropdownForceOpen, setNavDropdownForceOpen] = useState6(false);
+  useEffect4(() => {
+    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;
   useEffect4(() => {
     const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
     if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
@@ -9207,7 +9264,7 @@ function AiSectionOverlay({
         }
       }
     ),
-    selectionRect && /* @__PURE__ */ jsx17(
+    showSelectionBorder && selectionRect && /* @__PURE__ */ jsx17(
       "div",
       {
         "data-ohw-ai-section-selected": "",
@@ -9271,7 +9328,7 @@ function AiSectionOverlay({
 }
 
 // src/OhhwellsBridge.tsx
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 import { usePathname as usePathname2, useRouter as useRouter3, useSearchParams } from "next/navigation";
 
 // src/lib/cta-button.ts
@@ -9774,7 +9831,7 @@ function SectionTreeItem({
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-import { useEffect as useEffect5, useId as useId2, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useId as useId2, useRef as useRef5, useState as useState7 } from "react";
 
 // src/ui/input.tsx
 import * as React10 from "react";
@@ -9845,7 +9902,7 @@ function UrlOrPageInput({
   const inputId = useId2();
   const inputRef = useRef5(null);
   const rootRef = useRef5(null);
-  const [isFocused, setIsFocused] = useState6(false);
+  const [isFocused, setIsFocused] = useState7(false);
   useEffect5(() => {
     if (!dropdownOpen) return;
     const isOutside = (e) => {
@@ -10054,8 +10111,8 @@ function LinkEditorPanel({ state, onClose }) {
 }
 
 // src/ui/link-modal/SectionPickerOverlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef6, useState as useState7 } from "react";
-import { createPortal } from "react-dom";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef6, useState as useState8 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
 import { usePathname, useRouter as useRouter2 } from "next/navigation";
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -10091,7 +10148,7 @@ function hitTestSectionId(x, y, sectionIds, rects) {
   return null;
 }
 function useSectionRects(sectionIdsKey, enabled) {
-  const [rects, setRects] = useState7(/* @__PURE__ */ new Map());
+  const [rects, setRects] = useState8(/* @__PURE__ */ new Map());
   const sectionIds = useMemo2(
     () => sectionIdsKey ? sectionIdsKey.split("\0") : [],
     [sectionIdsKey]
@@ -10137,13 +10194,13 @@ function SectionPickerOverlay({
 }) {
   const router = useRouter2();
   const pathname = usePathname();
-  const [selectedId, setSelectedId] = useState7(null);
-  const [hoveredId, setHoveredId] = useState7(null);
+  const [selectedId, setSelectedId] = useState8(null);
+  const [hoveredId, setHoveredId] = useState8(null);
   const pointerRef = useRef6(null);
   const pointerScreenRef = useRef6(null);
   const iframeOffsetTopRef = useRef6(null);
   const sectionIdsRef = useRef6([]);
-  const [chromeClip, setChromeClip] = useState7(
+  const [chromeClip, setChromeClip] = useState8(
     () => ({
       top: 0,
       bottom: typeof window !== "undefined" ? window.innerHeight : 0
@@ -10286,7 +10343,7 @@ function SectionPickerOverlay({
   }, [onBack]);
   const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
   if (!portalRoot) return null;
-  return createPortal(
+  return createPortal2(
     /* @__PURE__ */ jsxs15(
       "div",
       {
@@ -10396,7 +10453,7 @@ function SectionPickerOverlay({
 }
 
 // src/ui/link-modal/useLinkModalState.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo3, useState as useState9 } from "react";
 function useLinkModalState({
   open,
   mode,
@@ -10409,12 +10466,12 @@ function useLinkModalState({
   onSubmit
 }) {
   const availablePages = useMemo3(() => pages, [pages]);
-  const [searchValue, setSearchValue] = useState8("");
-  const [selectedPage, setSelectedPage] = useState8(null);
-  const [selectedSection, setSelectedSection] = useState8(null);
-  const [step, setStep] = useState8("input");
-  const [dropdownOpen, setDropdownOpen] = useState8(false);
-  const [urlError, setUrlError] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
+  const [selectedPage, setSelectedPage] = useState9(null);
+  const [selectedSection, setSelectedSection] = useState9(null);
+  const [step, setStep] = useState9("input");
+  const [dropdownOpen, setDropdownOpen] = useState9(false);
+  const [urlError, setUrlError] = useState9("");
   const reset = useCallback4(() => {
     setSearchValue("");
     setSelectedPage(null);
@@ -11309,7 +11366,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) => {
@@ -11449,6 +11510,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));
@@ -11504,6 +11571,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);
@@ -11514,6 +11587,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(
@@ -11862,19 +11941,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);
@@ -11888,8 +11979,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";
@@ -11908,16 +11999,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;
@@ -11940,6 +12021,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");
@@ -12046,9 +12130,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) {
@@ -12375,6 +12461,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());
@@ -12399,15 +12490,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) {
@@ -12827,15 +12951,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);
@@ -13805,7 +13920,7 @@ import {
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect4,
   useRef as useRef7,
-  useState as useState9
+  useState as useState10
 } from "react";
 import { X as X5 } from "lucide-react";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -13855,7 +13970,7 @@ function FloatingPanel({
   bodyClassName
 }) {
   const panelRef = useRef7(null);
-  const [measured, setMeasured] = useState9({ w: PANEL_WIDTH, h: 280 });
+  const [measured, setMeasured] = useState10({ w: PANEL_WIDTH, h: 280 });
   const dragRef = useRef7(null);
   const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
   const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
@@ -14329,7 +14444,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
 }
 
 // src/useNavItemDrag.ts
-import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef8, useState as useState11 } from "react";
 function useNavItemDrag({
   isEditMode,
   editContentRef,
@@ -14354,25 +14469,35 @@ function useNavItemDrag({
   isDragHandleDisabled: isDragHandleDisabled2
 }) {
   const navDragRef = useRef8(null);
-  const [navDropSlots, setNavDropSlots] = useState10([]);
-  const [activeNavDropIndex, setActiveNavDropIndex] = useState10(null);
+  const [navDropSlots, setNavDropSlots] = useState11([]);
+  const [activeNavDropIndex, setActiveNavDropIndex] = useState11(null);
   const navPointerDragRef = useRef8(null);
   const clearNavDragVisuals = useCallback6(() => {
     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);
@@ -14457,19 +14582,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 = {
@@ -14488,27 +14618,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]
   );
@@ -14600,7 +14734,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({
@@ -14611,9 +14745,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;
@@ -14704,7 +14836,7 @@ function useNavItemDrag({
 }
 
 // src/useSectionDrag.ts
-import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef9, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef9, useState as useState12 } from "react";
 
 // src/lib/section-dnd.ts
 function isFooterSection(el) {
@@ -14804,9 +14936,9 @@ function useSectionDrag({
   suppressClickUntilRef
 }) {
   const sectionDragRef = useRef9(null);
-  const [sectionDropSlots, setSectionDropSlots] = useState11([]);
-  const [activeSectionDropIndex, setActiveSectionDropIndex] = useState11(null);
-  const [isSectionDragging, setIsSectionDragging] = useState11(false);
+  const [sectionDropSlots, setSectionDropSlots] = useState12([]);
+  const [activeSectionDropIndex, setActiveSectionDropIndex] = useState12(null);
+  const [isSectionDragging, setIsSectionDragging] = useState12(false);
   const sectionPointerDragRef = useRef9(null);
   const autoScrollRafRef = useRef9(null);
   const autoScrollDeltaRef = useRef9(0);
@@ -15086,7 +15218,7 @@ function FooterContainerChrome({
 }
 
 // src/lib/carousel.ts
-import { useEffect as useEffect12, useState as useState12 } from "react";
+import { useEffect as useEffect12, useState as useState13 } from "react";
 var CAROUSEL_ATTR = "data-ohw-carousel";
 var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
 var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
@@ -15148,7 +15280,7 @@ function applyCarouselNode(key, val) {
   return true;
 }
 function useOhwCarousel(key, initial) {
-  const [images, setImages] = useState12(initial);
+  const [images, setImages] = useState13(initial);
   useEffect12(() => {
     const el = document.querySelector(
       `[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
@@ -16171,14 +16303,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]");
@@ -16214,7 +16350,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)] ?? ""
@@ -16717,6 +16853,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;
@@ -17144,7 +17284,7 @@ function OhhwellsBridge() {
   const router = useRouter3();
   const searchParams = useSearchParams();
   const isEditMode = isEditSessionActive();
-  const [bridgeRoot, setBridgeRoot] = useState13(null);
+  const [bridgeRoot, setBridgeRoot] = useState14(null);
   useEffect13(() => {
     const figtreeFontId = "ohw-figtree-font";
     if (!document.getElementById(figtreeFontId)) {
@@ -17179,8 +17319,8 @@ function OhhwellsBridge() {
       window.parent.postMessage(data, "*");
     }
   }, []);
-  const [fetchState, setFetchState] = useState13("idle");
-  const [showBranding, setShowBranding] = useState13(false);
+  const [fetchState, setFetchState] = useState14("idle");
+  const [showBranding, setShowBranding] = useState14(false);
   const autoSaveTimers = useRef10(/* @__PURE__ */ new Map());
   const activeElRef = useRef10(null);
   const pointerHeldRef = useRef10(false);
@@ -17191,7 +17331,7 @@ function OhhwellsBridge() {
   const activeStateElRef = useRef10(null);
   const parentScrollRef = useRef10(null);
   const visibleViewportRef = useRef10(null);
-  const [dialogPortalContainer, setDialogPortalContainer] = useState13(null);
+  const [dialogPortalContainer, setDialogPortalContainer] = useState14(null);
   const attachVisibleViewport = useCallback8((node) => {
     visibleViewportRef.current = node;
     setDialogPortalContainer(node);
@@ -17202,8 +17342,8 @@ function OhhwellsBridge() {
   const hoveredImageRef = useRef10(null);
   const hoveredImageHasTextOverlapRef = useRef10(false);
   const dragOverElRef = useRef10(null);
-  const [mediaHover, setMediaHover] = useState13(null);
-  const [selectedMedia, setSelectedMedia] = useState13(null);
+  const [mediaHover, setMediaHover] = useState14(null);
+  const [selectedMedia, setSelectedMedia] = useState14(null);
   const selectedMediaElRef = useRef10(null);
   const clearMediaSelection = useCallback8(() => {
     const prev = selectedMediaElRef.current;
@@ -17267,8 +17407,8 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", update);
     };
   }, [selectedMedia !== null]);
-  const [carouselHover, setCarouselHover] = useState13(null);
-  const [uploadingRects, setUploadingRects] = useState13({});
+  const [carouselHover, setCarouselHover] = useState14(null);
+  const [uploadingRects, setUploadingRects] = useState14({});
   const hoveredGapRef = useRef10(null);
   const imageUnhoverTimerRef = useRef10(null);
   const imageShowTimerRef = useRef10(null);
@@ -17303,17 +17443,17 @@ function OhhwellsBridge() {
   const aiSectionApiRef = useRef10(null);
   const sectionsLoadedRef = useRef10(false);
   const pendingScheduleConfigRequests = useRef10([]);
-  const [toolbarRect, setToolbarRect] = useState13(null);
-  const [formPickRect, setFormPickRect] = useState13(null);
+  const [toolbarRect, setToolbarRect] = useState14(null);
+  const [formPickRect, setFormPickRect] = useState14(null);
   const formPickElRef = useRef10(null);
-  const [formViewState, setFormViewStateUi] = useState13("default");
-  const [formPickCount, setFormPickCount] = useState13(null);
-  const [formHoverRect, setFormHoverRect] = useState13(null);
+  const [formViewState, setFormViewStateUi] = useState14("default");
+  const [formPickCount, setFormPickCount] = useState14(null);
+  const [formHoverRect, setFormHoverRect] = useState14(null);
   const formHoverElRef = useRef10(null);
-  const [fieldPickRect, setFieldPickRect] = useState13(null);
+  const [fieldPickRect, setFieldPickRect] = useState14(null);
   const fieldPickElRef = useRef10(null);
-  const [fieldPickState, setFieldPickState] = useState13(null);
-  const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState13(false);
+  const [fieldPickState, setFieldPickState] = useState14(null);
+  const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState14(false);
   const clearFormPick = useCallback8(() => {
     const form = formPickElRef.current;
     const editing = fieldPickElRef.current;
@@ -17457,9 +17597,9 @@ function OhhwellsBridge() {
     setFieldDropSlots([]);
     setFieldDragging(false);
   }, []);
-  const [fieldDropIndex, setFieldDropIndex] = useState13(null);
-  const [fieldDropSlots, setFieldDropSlots] = useState13([]);
-  const [fieldDragging, setFieldDragging] = useState13(false);
+  const [fieldDropIndex, setFieldDropIndex] = useState14(null);
+  const [fieldDropSlots, setFieldDropSlots] = useState14([]);
+  const [fieldDragging, setFieldDragging] = useState14(false);
   const clearFormPickRef = useRef10(clearFormPick);
   clearFormPickRef.current = clearFormPick;
   useEffect13(() => {
@@ -17480,24 +17620,24 @@ function OhhwellsBridge() {
     observer.observe(el);
     return () => observer.disconnect();
   }, [formPickRect !== null, formViewState]);
-  const [toolbarVariant, setToolbarVariant] = useState13("none");
+  const [toolbarVariant, setToolbarVariant] = useState14("none");
   const toolbarVariantRef = useRef10("none");
   toolbarVariantRef.current = toolbarVariant;
-  const [selectedIsCta, setSelectedIsCta] = useState13(false);
-  const [selectedIsSocial, setSelectedIsSocial] = useState13(false);
-  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState13(false);
-  const [reorderHrefKey, setReorderHrefKey] = useState13(null);
-  const [reorderDragDisabled, setReorderDragDisabled] = useState13(false);
-  const [toggleState, setToggleState] = useState13(null);
-  const [maxBadge, setMaxBadge] = useState13(null);
-  const [activeCommands, setActiveCommands] = useState13(/* @__PURE__ */ new Set());
-  const [sectionGap, setSectionGap] = useState13(null);
-  const [toolbarShowEditLink, setToolbarShowEditLink] = useState13(false);
+  const [selectedIsCta, setSelectedIsCta] = useState14(false);
+  const [selectedIsSocial, setSelectedIsSocial] = useState14(false);
+  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState14(false);
+  const [reorderHrefKey, setReorderHrefKey] = useState14(null);
+  const [reorderDragDisabled, setReorderDragDisabled] = useState14(false);
+  const [toggleState, setToggleState] = useState14(null);
+  const [maxBadge, setMaxBadge] = useState14(null);
+  const [activeCommands, setActiveCommands] = useState14(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = useState14(null);
+  const [toolbarShowEditLink, setToolbarShowEditLink] = useState14(false);
   const hoveredNavContainerRef = useRef10(null);
-  const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState13(null);
+  const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState14(null);
   const hoveredItemElRef = useRef10(null);
-  const [hoveredItemRect, setHoveredItemRect] = useState13(null);
-  const [hoveredTextRect, setHoveredTextRect] = useState13(null);
+  const [hoveredItemRect, setHoveredItemRect] = useState14(null);
+  const [hoveredTextRect, setHoveredTextRect] = useState14(null);
   useEffect13(() => {
     const sync = () => {
       const el = document.querySelector(
@@ -17543,28 +17683,28 @@ function OhhwellsBridge() {
     return () => observer.disconnect();
   }, []);
   const siblingHintElRef = useRef10(null);
-  const [siblingHintRect, setSiblingHintRect] = useState13(null);
-  const [siblingHintRects, setSiblingHintRects] = useState13([]);
-  const [isItemDragging, setIsItemDragging] = useState13(false);
-  const [isFooterFrameSelection, setIsFooterFrameSelection] = useState13(false);
+  const [siblingHintRect, setSiblingHintRect] = useState14(null);
+  const [siblingHintRects, setSiblingHintRects] = useState14([]);
+  const [isItemDragging, setIsItemDragging] = useState14(false);
+  const [isFooterFrameSelection, setIsFooterFrameSelection] = useState14(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = useState13(null);
+  const [floatingPanel, setFloatingPanel] = useState14(null);
   const floatingPanelOpenRef = useRef10(false);
   floatingPanelOpenRef.current = floatingPanel !== null;
-  const [floatingPanelPos, setFloatingPanelPos] = useState13(null);
-  const [logoSizeDraft, setLogoSizeDraft] = useState13(null);
-  const [editorViewport, setEditorViewport] = useState13("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = useState13(null);
-  const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState13(null);
-  const [footerHeadingVisible, setFooterHeadingVisible] = useState13(null);
+  const [floatingPanelPos, setFloatingPanelPos] = useState14(null);
+  const [logoSizeDraft, setLogoSizeDraft] = useState14(null);
+  const [editorViewport, setEditorViewport] = useState14("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = useState14(null);
+  const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState14(null);
+  const [footerHeadingVisible, setFooterHeadingVisible] = useState14(null);
   const footerDragRef = useRef10(null);
-  const [footerDropSlots, setFooterDropSlots] = useState13([]);
-  const [activeFooterDropIndex, setActiveFooterDropIndex] = useState13(null);
-  const [draggedItemRect, setDraggedItemRect] = useState13(null);
+  const [footerDropSlots, setFooterDropSlots] = useState14([]);
+  const [activeFooterDropIndex, setActiveFooterDropIndex] = useState14(null);
+  const [draggedItemRect, setDraggedItemRect] = useState14(null);
   const footerPointerDragRef = useRef10(null);
   const suppressNextClickRef = useRef10(false);
   const suppressClickUntilRef = useRef10(0);
-  const [linkPopover, setLinkPopover] = useState13(null);
+  const [linkPopover, setLinkPopover] = useState14(null);
   const linkPopoverSessionRef = useRef10(null);
   const addNavAfterAnchorRef = useRef10(null);
   const editContentRef = useRef10({});
@@ -17572,8 +17712,8 @@ function OhhwellsBridge() {
   const brandKitRef = useRef10("");
   const stylesRef = useRef10("");
   const pendingDeleteUndoRef = useRef10(null);
-  const [sitePages, setSitePages] = useState13([]);
-  const [sectionsByPath, setSectionsByPath] = useState13({});
+  const [sitePages, setSitePages] = useState14([]);
+  const [sectionsByPath, setSectionsByPath] = useState14({});
   const sectionsPrefetchGenRef = useRef10(0);
   const setLinkPopoverRef = useRef10(setLinkPopover);
   const linkPopoverPanelRef = useRef10(null);
@@ -17786,11 +17926,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);
@@ -17809,6 +17954,7 @@ function OhhwellsBridge() {
     });
   }, []);
   const deselect = useCallback8(() => {
+    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;
@@ -17832,7 +17978,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");
     }
@@ -17913,10 +18063,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]");
@@ -18068,7 +18215,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
@@ -18150,8 +18297,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 = useCallback8(() => {
@@ -18531,10 +18680,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);
@@ -18592,17 +18738,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);
@@ -19446,8 +19581,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 {
@@ -19526,9 +19663,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
@@ -20804,6 +20956,7 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        dismissImageHover();
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -22052,14 +22205,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`;
@@ -22501,7 +22660,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.107",
+        bridgeVersion: "0.1.109",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -22965,7 +23124,7 @@ function OhhwellsBridge() {
     /* @__PURE__ */ jsx33("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx33(OhwLoaderSpinner, {}) }),
     /* @__PURE__ */ jsx33("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
     subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx33(MadeWithOhhWells, {}),
-    bridgeRoot ? createPortal2(
+    bridgeRoot ? createPortal3(
       /* @__PURE__ */ jsxs20(Fragment8, { children: [
         /* @__PURE__ */ jsx33("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
         isEditMode && /* @__PURE__ */ jsx33(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
@@ -23234,8 +23393,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",
@@ -23288,7 +23448,7 @@ function OhhwellsBridge() {
             ) : void 0
           }
         ),
-        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ jsxs20(Fragment8, { children: [
+        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs20(Fragment8, { children: [
           /* @__PURE__ */ jsx33(
             EditGlowChrome,
             {