@ohhwells/bridge 0.1.100 → 0.1.102

package/dist/index.js

@@ -1307,7 +1307,12 @@ function ButtonEl({
         textDecoration: "none",
         cursor: "pointer",
         ...buttonShellStyle(ctx, fullWidth),
-        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
+        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
+          // Off-band, prefer the template button's measured fill/label pair — a template may
+          // fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
+          // the flipped palette keeps contrast, so the brand-driven colours stay.
+          !ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
+        )
       },
       children: /* @__PURE__ */ jsx("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -2379,10 +2384,12 @@ function renderNode(node, ctx, path) {
                       cursor: "pointer",
                       // Shape/padding/typography follow the host template's own buttons.
                       ...buttonShellStyle(ctx),
-                      // Brand-styled: primary fill, brand-derived label colour (not a fixed token) so it
-                      // reads correctly on custom palettes.
-                      background: ctx.brand.palette.primary,
-                      color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+                      // Brand-styled: the template button's measured fill/label pair off-band, else
+                      // primary fill with a brand-derived label so it reads on custom palettes.
+                      ...!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
+                        background: ctx.brand.palette.primary,
+                        color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+                      }
                     },
                     children: /* @__PURE__ */ jsx("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -2589,11 +2596,19 @@ function deriveTemplateBrand() {
 }
 function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
-  const btn = Array.from(document.querySelectorAll('[data-ohw-role="button"]')).find(
-    (el) => !el.closest(`[${CONTAINER_ATTR}]`)
-  );
+  const candidates = Array.from(
+    document.querySelectorAll('[data-ohw-role="button"]')
+  ).filter((el) => !el.closest(`[${CONTAINER_ATTR}]`));
+  const isFilled = (el) => {
+    const bg = getComputedStyle(el).backgroundColor;
+    if (!bg || bg === "transparent") return false;
+    const alpha = bg.match(/rgba?\([^)]*,\s*([\d.]+)\)$/);
+    return !alpha || parseFloat(alpha[1]) > 0;
+  };
+  const btn = candidates.find(isFilled) ?? candidates[0];
   if (!btn) return null;
   const cs = getComputedStyle(btn);
+  const filled = isFilled(btn);
   const corners = [
     cs.borderTopLeftRadius,
     cs.borderTopRightRadius,
@@ -2610,6 +2625,7 @@ function deriveTemplateButtonStyle() {
   return {
     radius: radius || "10px",
     padding: `${padY}px ${padX}px`,
+    ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
     fontFamily: cs.fontFamily || "",
     fontSize: cs.fontSize || "",
     fontWeight: cs.fontWeight || "",
@@ -7427,9 +7443,7 @@ function ItemActionToolbar({
         ToggleGroup,
         {
           value: dropdownOpen ? "open" : "closed",
-          onValueChange: (value) => {
-            if (value !== "open" && value !== "closed") return;
-            onDropdownOpenChange?.(value === "open");
+          onValueChange: () => {
           },
           className: "h-7 gap-0.5 rounded-[calc(var(--radius,0.5rem)-2px)] bg-muted p-0.5",
           onMouseDown: (e) => {
@@ -7444,6 +7458,11 @@ function ItemActionToolbar({
                 size: "sm",
                 "aria-label": "Closed",
                 className: "h-6 min-w-0 px-2 text-xs font-medium",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (dropdownOpen !== false) onDropdownOpenChange?.(false);
+                },
                 children: "Closed"
               }
             ),
@@ -7454,6 +7473,11 @@ function ItemActionToolbar({
                 size: "sm",
                 "aria-label": "Open",
                 className: "h-6 min-w-0 px-2 text-xs font-medium",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (dropdownOpen !== true) onDropdownOpenChange?.(true);
+                },
                 children: "Open"
               }
             )
@@ -8479,7 +8503,7 @@ function FieldTypePicker({ onPick }) {
     "div",
     {
       "data-ohw-field-type-picker": "",
-      className: "pointer-events-auto grid w-[420px] grid-cols-3 gap-3 rounded-xl border border-border bg-background p-4 shadow-lg",
+      className: "pointer-events-auto grid w-[280px] grid-cols-2 gap-2 rounded-xl border border-border bg-background p-3 shadow-lg",
       children: FIELD_TYPES.map((entry) => {
         const Icon = TYPE_ICONS[entry.type];
         return /* @__PURE__ */ jsxs6(
@@ -8487,7 +8511,7 @@ function FieldTypePicker({ onPick }) {
           {
             type: "button",
             onClick: () => onPick(entry.type),
-            className: "flex h-[104px] flex-col items-center justify-center gap-3 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-primary hover:bg-primary/5",
+            className: "flex h-[76px] flex-col items-center justify-center gap-2 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-primary hover:bg-primary/5",
             children: [
               /* @__PURE__ */ jsx13(Icon, { size: 26, strokeWidth: 1.5, "aria-hidden": true }),
               entry.label
@@ -10840,6 +10864,32 @@ function getNavbarDesktopContainer() {
 function getNavbarDrawerContainer() {
   return document.querySelector("[data-ohw-nav-drawer]");
 }
+function isNavbarListContainerVisible(el) {
+  if (el.hasAttribute("hidden")) return false;
+  if (el.getClientRects().length === 0) return false;
+  const style = window.getComputedStyle(el);
+  return style.display !== "none" && style.visibility !== "hidden";
+}
+function getActiveNavbarListContainer(draggedEl) {
+  const desktop = getNavbarDesktopContainer();
+  const drawer = getNavbarDrawerContainer();
+  if (draggedEl) {
+    if (drawer?.contains(draggedEl)) return drawer;
+    if (desktop?.contains(draggedEl)) return desktop;
+  }
+  if (desktop && isNavbarListContainerVisible(desktop)) return desktop;
+  if (drawer && isNavbarListContainerVisible(drawer)) return drawer;
+  return desktop ?? drawer;
+}
+function listActiveNavbarItems(draggedEl) {
+  const container = getActiveNavbarListContainer(draggedEl);
+  if (container) {
+    return Array.from(container.querySelectorAll("[data-ohw-href-key]")).filter(
+      isNavbarLinkItem
+    );
+  }
+  return listNavbarItems();
+}
 function listNavbarItems() {
   const desktop = getNavbarDesktopContainer();
   if (desktop) {
@@ -11952,20 +12002,23 @@ function isEmptyLabelValue(value) {
 function applyStoredValues(item, content) {
   const hrefKey = socialHrefKey(item);
   const iconKey = socialIconKey(item);
+  const baseKey = hrefKey?.replace(/-href$/, "");
   if (hrefKey && content[hrefKey] !== void 0) item.setAttribute("href", content[hrefKey]);
-  if (iconKey) {
+  const glyphKey = iconKey ?? baseKey ?? null;
+  const glyphStored = glyphKey ? content[glyphKey]?.trim() : void 0;
+  if (glyphStored) {
+    ensureIconSlot(item);
     const glyph = item.querySelector(ICON_SELECTOR);
-    if (glyph && content[iconKey]) {
-      applyIconMarkup(glyph, content[iconKey]);
+    if (glyph) {
+      applyIconMarkup(glyph, glyphStored);
       glyph.removeAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR);
     }
-    const label = item.querySelector(`[${SOCIALS_LABEL_ATTR}]`);
-    label?.setAttribute("data-ohw-key", socialLabelKey(iconKey));
-    const stored = content[socialLabelKey(iconKey)];
-    if (label && stored !== void 0) {
-      const words = isEmptyLabelValue(stored) ? "" : stored;
-      if (label.innerHTML !== words) label.innerHTML = words;
-    }
+  }
+  const label = socialLabelElement(item);
+  const labelKey = label?.getAttribute("data-ohw-key");
+  if (label && labelKey && content[labelKey] !== void 0) {
+    const words = isEmptyLabelValue(content[labelKey]) ? "" : content[labelKey];
+    if (label.innerHTML !== words) label.innerHTML = words;
   }
 }
 function socialPlatformKey(iconKey) {
@@ -12054,6 +12107,9 @@ function insertSocialItem(row, after, content = {}, { placeholder = true, keys }
   if (placeholder) {
     const label = socialLabelElement(item);
     if (label) label.textContent = PLACEHOLDER_SOCIAL_LABEL;
+  } else if (keys) {
+    const label = socialLabelElement(item);
+    if (label) label.textContent = "";
   }
   applySocialsDisplayToRow(row, display);
   return { item, hrefKey, iconKey, order: getSocialsOrderFromDom(row.ownerDocument) };
@@ -13916,8 +13972,8 @@ var lockFooterDuringDrag = lockItemDuringDrag;
 var unlockFooterDragInteraction = unlockItemDragInteraction;
 
 // src/lib/nav-dnd.ts
-function listReorderableNavItems() {
-  return listNavbarItems().filter((el) => {
+function listReorderableNavItems(draggedEl) {
+  return listActiveNavbarItems(draggedEl).filter((el) => {
     const key = el.getAttribute("data-ohw-href-key");
     return isNavbarHrefKey(key) && !isNestedNavChild(el);
   });
@@ -13932,8 +13988,8 @@ function resolveParentNavHrefKey(child) {
   const key = trigger?.getAttribute("data-ohw-href-key");
   return key && isNavbarHrefKey(key) ? key : null;
 }
-function listNavChildren(parentHrefKey) {
-  const items = listNavbarItems();
+function listNavChildren(parentHrefKey, draggedEl) {
+  const items = listActiveNavbarItems(draggedEl);
   const parent = items.find((el) => el.getAttribute("data-ohw-href-key") === parentHrefKey);
   if (!parent) return [];
   const group = parent.closest("[data-ohw-nav-group]");
@@ -13943,20 +13999,83 @@ function listNavChildren(parentHrefKey) {
     (el) => isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))
   );
 }
-function activeNavListContainer() {
-  const desktop = getNavbarDesktopContainer();
-  if (desktop && desktop.getClientRects().length > 0) {
-    const style = window.getComputedStyle(desktop);
-    if (style.display !== "none" && style.visibility !== "hidden") return desktop;
+function isVerticalNavLayout(items, draggedEl) {
+  const visible = items.filter((el) => el.getClientRects().length > 0);
+  if (visible.length >= 2) {
+    const a = visible[0].getBoundingClientRect();
+    const b = visible[1].getBoundingClientRect();
+    const verticalGap = b.top - a.bottom;
+    const horizontalGap = b.left - a.right;
+    return verticalGap > horizontalGap;
+  }
+  const container = getActiveNavbarListContainer(draggedEl);
+  if (!container) return false;
+  const style = window.getComputedStyle(container);
+  return style.flexDirection === "column" || style.flexDirection === "column-reverse";
+}
+function buildVerticalRootNavDropSlots(items, draggedEl) {
+  const slots = [];
+  const barThickness = 3;
+  if (items.length === 0) {
+    const container = getActiveNavbarListContainer(draggedEl);
+    if (!container) return slots;
+    const rect = container.getBoundingClientRect();
+    slots.push({
+      insertIndex: 0,
+      parentId: null,
+      left: rect.left,
+      top: rect.top + rect.height / 2 - barThickness / 2,
+      width: Math.max(rect.width, 40),
+      height: barThickness,
+      direction: "horizontal"
+    });
+    return slots;
+  }
+  const edgeGap = (() => {
+    if (items.length < 2) return 16;
+    const a = items[0].getBoundingClientRect();
+    const b = items[1].getBoundingClientRect();
+    return Math.max(0, b.top - a.bottom);
+  })();
+  for (let i = 0; i <= items.length; i++) {
+    let top;
+    let width;
+    let left;
+    if (i === 0) {
+      const first = items[0].getBoundingClientRect();
+      top = first.top - edgeGap / 2 - barThickness / 2;
+      left = first.left;
+      width = first.width;
+    } else if (i === items.length) {
+      const last = items[items.length - 1].getBoundingClientRect();
+      const lastGap = items.length >= 2 ? Math.max(0, last.top - items[items.length - 2].getBoundingClientRect().bottom) : edgeGap;
+      top = last.bottom + lastGap / 2 - barThickness / 2;
+      left = last.left;
+      width = last.width;
+    } else {
+      const prev = items[i - 1].getBoundingClientRect();
+      const next = items[i].getBoundingClientRect();
+      top = (prev.bottom + next.top) / 2 - barThickness / 2;
+      left = Math.min(prev.left, next.left);
+      width = Math.max(prev.right, next.right) - left;
+    }
+    slots.push({
+      insertIndex: i,
+      parentId: null,
+      left,
+      top,
+      width: Math.max(width, 40),
+      height: barThickness,
+      direction: "horizontal"
+    });
   }
-  return getNavbarDrawerContainer();
+  return slots;
 }
-function buildRootNavDropSlots() {
-  const items = listReorderableNavItems();
+function buildHorizontalRootNavDropSlots(items, draggedEl) {
   const slots = [];
   const barThickness = 3;
   if (items.length === 0) {
-    const container = activeNavListContainer();
+    const container = getActiveNavbarListContainer(draggedEl);
     if (!container) return slots;
     const rect = container.getBoundingClientRect();
     slots.push({
@@ -13987,10 +14106,7 @@ function buildRootNavDropSlots() {
       height = first.height;
     } else if (i === items.length) {
       const last = items[items.length - 1].getBoundingClientRect();
-      const lastGap = items.length >= 2 ? Math.max(
-        0,
-        last.left - items[items.length - 2].getBoundingClientRect().right
-      ) : edgeGap;
+      const lastGap = items.length >= 2 ? Math.max(0, last.left - items[items.length - 2].getBoundingClientRect().right) : edgeGap;
       left = last.right + lastGap / 2 - barThickness / 2;
       top = last.top;
       height = last.height;
@@ -14013,8 +14129,15 @@ function buildRootNavDropSlots() {
   }
   return slots;
 }
-function buildChildNavDropSlots(parentHrefKey) {
-  const children = listNavChildren(parentHrefKey);
+function buildRootNavDropSlots(draggedEl) {
+  const items = listReorderableNavItems(draggedEl);
+  if (isVerticalNavLayout(items, draggedEl)) {
+    return buildVerticalRootNavDropSlots(items, draggedEl);
+  }
+  return buildHorizontalRootNavDropSlots(items, draggedEl);
+}
+function buildChildNavDropSlots(parentHrefKey, draggedEl) {
+  const children = listNavChildren(parentHrefKey, draggedEl);
   const slots = [];
   const barThickness = 3;
   if (children.length === 0) return slots;
@@ -14035,10 +14158,7 @@ function buildChildNavDropSlots(parentHrefKey) {
       width = first.width;
     } else if (i === children.length) {
       const last = children[children.length - 1].getBoundingClientRect();
-      const lastGap = children.length >= 2 ? Math.max(
-        0,
-        last.top - children[children.length - 2].getBoundingClientRect().bottom
-      ) : edgeGap;
+      const lastGap = children.length >= 2 ? Math.max(0, last.top - children[children.length - 2].getBoundingClientRect().bottom) : edgeGap;
       top = last.bottom + lastGap / 2 - barThickness / 2;
       left = last.left;
       width = last.width;
@@ -14061,18 +14181,19 @@ function buildChildNavDropSlots(parentHrefKey) {
   }
   return slots;
 }
-function buildAllNavDropSlots(draggedHrefKey) {
-  const dragged = listNavbarItems().find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey);
-  if (!dragged) return buildRootNavDropSlots();
+function buildAllNavDropSlots(draggedHrefKey, draggedEl) {
+  const activeItems = listActiveNavbarItems(draggedEl);
+  const dragged = (draggedEl && activeItems.includes(draggedEl) ? draggedEl : null) ?? activeItems.find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey) ?? listNavbarItems().find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey);
+  if (!dragged) return buildRootNavDropSlots(draggedEl);
   if (isNestedNavChild(dragged)) {
     const parentKey = resolveParentNavHrefKey(dragged);
     if (!parentKey) return [];
-    return buildChildNavDropSlots(parentKey);
+    return buildChildNavDropSlots(parentKey, draggedEl);
   }
-  return buildRootNavDropSlots();
+  return buildRootNavDropSlots(draggedEl);
 }
-function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
-  const slots = buildAllNavDropSlots(draggedHrefKey);
+function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
+  const slots = buildAllNavDropSlots(draggedHrefKey, draggedEl);
   let best = null;
   for (const slot of slots) {
     const cx2 = slot.left + slot.width / 2;
@@ -14123,6 +14244,12 @@ function useNavItemDrag({
     setIsItemDragging(false);
     if (keepOpenEl?.isConnected) {
       setNavGroupForceOpen(keepOpenEl, true);
+      requestAnimationFrame(() => {
+        if (keepOpenEl.isConnected) setNavGroupForceOpen(keepOpenEl, true);
+        requestAnimationFrame(() => {
+          if (keepOpenEl.isConnected) setNavGroupForceOpen(keepOpenEl, true);
+        });
+      });
     } else {
       setNavGroupForceOpen(null, false);
     }
@@ -14138,7 +14265,7 @@ function useNavItemDrag({
       }
       session.activeSlot = activeSlot;
       setSiblingHintRects([]);
-      const slots = buildAllNavDropSlots(session.hrefKey);
+      const slots = buildAllNavDropSlots(session.hrefKey, session.draggedEl);
       setNavDropSlots(slots);
       const activeIdx = activeSlot ? slots.findIndex(
         (s) => s.parentId === activeSlot.parentId && s.insertIndex === activeSlot.insertIndex
@@ -14174,7 +14301,12 @@ function useNavItemDrag({
       if (session.wasSelected && selectedElRef.current === session.draggedEl) {
         setToolbarRect(rect);
       }
-      const initialSlot = hitTestNavDropSlot(session.lastClientX, session.lastClientY, session.hrefKey);
+      const initialSlot = hitTestNavDropSlot(
+        session.lastClientX,
+        session.lastClientY,
+        session.hrefKey,
+        session.draggedEl
+      );
       refreshNavDragVisuals(session, initialSlot, session.lastClientX, session.lastClientY);
     },
     [
@@ -14196,10 +14328,11 @@ function useNavItemDrag({
       }
       const x = typeof clientX === "number" && (clientX !== 0 || clientY !== 0) ? clientX : session.lastClientX;
       const y = typeof clientY === "number" && (clientX !== 0 || clientY !== 0) ? clientY : session.lastClientY;
-      const slot = session.activeSlot ?? hitTestNavDropSlot(x, y, session.hrefKey);
+      const slot = session.activeSlot ?? hitTestNavDropSlot(x, y, session.hrefKey, session.draggedEl);
       const planned = slot != null ? planNavItemMove(session.hrefKey, slot.parentId, slot.insertIndex) : null;
       const wasSelected = session.wasSelected;
       const hrefKey = session.hrefKey;
+      const keepDropdownOpen = Boolean(session.draggedEl.closest("[data-ohw-nav-children]"));
       const applySelectionAfterDrop = () => {
         if (!wasSelected) {
           deselectRef.current();
@@ -14233,6 +14366,14 @@ function useNavItemDrag({
         });
         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);
+          });
+        }
         requestAnimationFrame(() => {
           if (editContentRef.current[NAV_ORDER_KEY] === planned.orderJson) {
             applyNavForest(planned.forest);
@@ -14272,7 +14413,7 @@ function useNavItemDrag({
       if (!session) return false;
       e.preventDefault();
       if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-      const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey);
+      const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey, session.draggedEl);
       refreshNavDragVisualsRef.current(session, slot, e.clientX, e.clientY);
       return true;
     },
@@ -14318,7 +14459,7 @@ function useNavItemDrag({
         clearTextSelection();
         const session = navDragRef.current;
         if (!session) return;
-        const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey);
+        const slot = hitTestNavDropSlot(e.clientX, e.clientY, session.hrefKey, session.draggedEl);
         refreshNavDragVisualsRef.current(session, slot, e.clientX, e.clientY);
         return;
       }
@@ -14334,7 +14475,8 @@ function useNavItemDrag({
       } catch {
       }
       if (linkPopoverOpenRef.current) setLinkPopover(null);
-      if (activeElRef.current) deactivateRef.current();
+      const isNestedDrag = Boolean(pending.el.closest("[data-ohw-nav-children]"));
+      if (activeElRef.current && !isNestedDrag) deactivateRef.current();
       const key = pending.el.getAttribute("data-ohw-href-key");
       if (!key) return;
       beginNavDragRef.current({
@@ -14345,6 +14487,9 @@ function useNavItemDrag({
         lastClientY: e.clientY,
         activeSlot: null
       });
+      if (activeElRef.current && isNestedDrag) {
+        deactivateRef.current();
+      }
     };
     const endPointerDrag = (e) => {
       const pending = navPointerDragRef.current;
@@ -14422,6 +14567,7 @@ function useNavItemDrag({
   );
   return {
     navDragRef,
+    navPointerDragRef,
     navDropSlots,
     activeNavDropIndex,
     startNavLinkDrag,
@@ -15820,6 +15966,7 @@ function isNavDropdownPanelOpen(childrenRoot) {
   if (childrenRoot.closest("[data-ohw-nav-drawer]")) return true;
   const group = childrenRoot.closest("[data-ohw-nav-group]");
   if (group?.hasAttribute("data-ohw-nav-force-open")) return true;
+  if (navDropdownsOpenOnClick()) return false;
   if (childrenRoot.clientHeight < 2 || childrenRoot.clientWidth < 2) return false;
   const style = window.getComputedStyle(childrenRoot);
   if (style.display === "none" || style.visibility === "hidden") return false;
@@ -15863,6 +16010,11 @@ function getNavigationItemAnchor(el) {
 function isNavigationItem2(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function isNavFooterScopedNavigationItem(el) {
+  return Boolean(
+    el.closest("nav, footer, [data-ohw-nav-container], [data-ohw-nav-drawer]")
+  );
+}
 function socialWordsClicked(target, item) {
   const text = target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
   return Boolean(text && item.contains(text));
@@ -16073,6 +16225,7 @@ function getNavigationSelectionParent(el) {
 }
 function collectNavigationItemSiblingHintRects(selected) {
   if (!isNavigationItem2(selected)) return [];
+  if (!isNavFooterScopedNavigationItem(selected)) return [];
   const socialsRow = findSocialsRow(selected);
   if (socialsRow) {
     return listSocialItems(socialsRow).filter((item) => item !== selected).map((item) => item.getBoundingClientRect());
@@ -17244,6 +17397,7 @@ function OhhwellsBridge() {
   linkPopoverSessionRef.current = linkPopover;
   const {
     navDragRef,
+    navPointerDragRef,
     navDropSlots,
     activeNavDropIndex,
     startNavLinkDrag,
@@ -17446,7 +17600,12 @@ function OhhwellsBridge() {
       if (owner) persistFieldsRef.current(owner);
     }
     activeElRef.current = null;
-    setNavGroupForceOpen(null, false);
+    const preserveNavDropdown = Boolean(navPointerDragRef.current?.el?.closest("[data-ohw-nav-children]")) || Boolean(navDragRef.current?.draggedEl?.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);
+    }
     setReorderHrefKey(null);
     setReorderDragDisabled(false);
     if (!selectedElRef.current) {
@@ -17568,7 +17727,10 @@ function OhhwellsBridge() {
     setSelectedIsSocialsRow(false);
     const isDropdownTrigger = !isNestedNavChild(navAnchor) && (navItemHasDropdownChildren(navAnchor) || navItemOwnsDropdownPanel(navAnchor));
     if (isNestedNavChild(navAnchor)) {
-      setNavGroupForceOpen(navAnchor, true);
+      const group = navAnchor.closest("[data-ohw-nav-group]");
+      if (group?.hasAttribute("data-ohw-nav-force-open")) {
+        setNavGroupForceOpen(navAnchor, true);
+      }
       setNavDropdownPreviewOpen(null);
     } else if (isDropdownTrigger) {
       const group = navAnchor.closest("[data-ohw-nav-group]");
@@ -17650,6 +17812,10 @@ function OhhwellsBridge() {
   const handleNavDropdownOpenChange = useCallback8((open) => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
+    if (isNestedNavChild(selected)) return;
+    const group = selected.closest("[data-ohw-nav-group]");
+    const domOpen = Boolean(group?.hasAttribute("data-ohw-nav-force-open"));
+    if (open === domOpen) return;
     setNavGroupForceOpen(selected, open);
     setNavDropdownPreviewOpen(open);
     requestAnimationFrame(() => {
@@ -18179,7 +18345,10 @@ function OhhwellsBridge() {
     clearHrefKeyHover(anchor);
     const isDropdownTrigger = !isNestedNavChild(anchor) && (navItemHasDropdownChildren(anchor) || navItemOwnsDropdownPanel(anchor));
     if (isNestedNavChild(anchor)) {
-      setNavGroupForceOpen(anchor, true);
+      const group = anchor.closest("[data-ohw-nav-group]");
+      if (group?.hasAttribute("data-ohw-nav-force-open")) {
+        setNavGroupForceOpen(anchor, true);
+      }
       setNavDropdownPreviewOpen(null);
     } else if (isDropdownTrigger) {
       setNavGroupForceOpen(null, false);
@@ -19021,28 +19190,19 @@ function OhhwellsBridge() {
       return;
     }
     const existing = editStylesRef.current;
-    let initialVh = window.innerHeight;
-    if (existing?.base.textContent) {
-      const match = existing.base.textContent.match(/\.min-h-screen[^{]*\{[^}]*min-height:\s*(\d+)px/);
-      if (match) initialVh = parseInt(match[1], 10);
-    }
+    const canvasHeight = "var(--ohw-canvas-h, 852px)";
     const baseCss = `
       html { height: auto !important; }
       body { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
-      .min-h-screen, .min-h-svh, .min-h-dvh { min-height: ${initialVh}px !important; }
-      .h-screen, .h-svh, .h-dvh { height: ${initialVh}px !important; }
-      [style*="100vh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
-      [style*="100svh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
-      [style*="100dvh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
-      /* A section written as min-height: var(--ohw-canvas-h, 100svh) \u2014 the documented way to
-         build a full-viewport section that still grows for its own content \u2014 matches the three
-         rules above on substring alone, since the fallback text contains "100svh" too. Forcing
-         a literal height on top of that turns "at least one screen" into "exactly one screen",
-         so content taller than one screen (a long mobile hero, say) overflows a centered flex
-         column upward, under whatever sits above it. Only the min-height half belongs to it. */
-      [style*="min-height"][style*="100vh"],
-      [style*="min-height"][style*="100svh"],
-      [style*="min-height"][style*="100dvh"] { height: auto !important; }
+      .min-h-screen, .min-h-svh, .min-h-dvh { min-height: ${canvasHeight} !important; }
+      .h-screen, .h-svh, .h-dvh { height: ${canvasHeight} !important; }
+      /* Literal inline viewport units only \u2014 skip R11 sections that already reference --ohw-canvas-h
+         (their style attribute contains "100svh" only as a var() fallback string). */
+      [style*="100vh"]:not([style*="--ohw-canvas-h"]) { min-height: ${canvasHeight} !important; height: ${canvasHeight} !important; }
+      [style*="100svh"]:not([style*="--ohw-canvas-h"]) { min-height: ${canvasHeight} !important; height: ${canvasHeight} !important; }
+      [style*="100dvh"]:not([style*="--ohw-canvas-h"]) { min-height: ${canvasHeight} !important; height: ${canvasHeight} !important; }
+      /* R11: min-height via --ohw-canvas-h; height must grow with content taller than one screen. */
+      [style*="min-height"][style*="--ohw-canvas-h"] { height: auto !important; }
       /* Emptied text keeps somewhere to click. A label typed down to nothing collapses to a
          couple of pixels, and getting back into it meant hunting for the caret with the mouse.
          Edit mode only \u2014 the published page shows nothing where there is nothing (OHH-736). */
@@ -19189,6 +19349,10 @@ function OhhwellsBridge() {
         outline-offset: 0 !important;
         box-shadow: none !important;
       }
+      /* Open nav dropdown panels paint above AI section selection chrome (2147483000). */
+      [data-ohw-nav-group][data-ohw-nav-force-open] > [data-ohw-nav-children] {
+        z-index: 2147483100 !important;
+      }
       /* Text edit wins over grab/default (must beat [data-ohw-can-drag] *). */
       [data-ohw-editing],
       [data-ohw-editing] *,
@@ -20527,7 +20691,11 @@ function OhhwellsBridge() {
         const slotFromItem = hrefKey ? findSocialByHrefKey(hrefKey)?.querySelector('[data-ohw-editable="icon"]') : null;
         const requestedIsIconSlot = Boolean(requestedIconKey) && Boolean(document.querySelector(`[data-ohw-key="${requestedIconKey}"][data-ohw-editable="icon"]`));
         const requestedIsFree = Boolean(requestedIconKey) && !document.querySelector(`[data-ohw-key="${requestedIconKey}"]`);
-        const iconKey = requestedIsIconSlot ? requestedIconKey : slotFromItem?.dataset.ohwKey ?? (requestedIsFree ? requestedIconKey : void 0);
+        let iconKey = requestedIsIconSlot ? requestedIconKey : slotFromItem?.dataset.ohwKey ?? (requestedIsFree ? requestedIconKey : void 0);
+        const item = hrefKey ? findSocialByHrefKey(hrefKey) : null;
+        if (item && typeof iconMarkup === "string" && iconMarkup) {
+          iconKey = ensureIconSlot(item) ?? iconKey;
+        }
         if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
           document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
             applyIconMarkup(el, iconMarkup);
@@ -20537,7 +20705,7 @@ function OhhwellsBridge() {
         }
         if (iconKey && platformId) nodes.push({ key: socialPlatformKey(iconKey), text: platformId });
         if (iconKey && label) {
-          const labelKey = socialLabelKey(iconKey);
+          const labelKey = (item ? socialLabelElement(item)?.getAttribute("data-ohw-key") : null) ?? socialLabelKey(iconKey);
           document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
             if (keepLabel && el.textContent?.trim()) return;
             el.textContent = label;
@@ -21356,7 +21524,12 @@ function OhhwellsBridge() {
       }
       if (navDragRef.current) {
         const session = navDragRef.current;
-        const slot = hitTestNavDropSlot(session.lastClientX, session.lastClientY, session.hrefKey);
+        const slot = hitTestNavDropSlot(
+          session.lastClientX,
+          session.lastClientY,
+          session.hrefKey,
+          session.draggedEl
+        );
         refreshNavDragVisualsRef.current(session, slot, session.lastClientX, session.lastClientY);
       }
       if (hoveredImageRef.current) {
@@ -21558,18 +21731,21 @@ function OhhwellsBridge() {
       }
       return null;
     };
+    const isPointInRect = (el, clientX, clientY) => {
+      const r2 = el.getBoundingClientRect();
+      return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+    };
     const isPointOverEditable = (scope, clientX, clientY) => {
       const editables = scope.querySelectorAll("[data-ohw-editable], [data-ohw-href-key]");
       for (const el of editables) {
-        const r2 = el.getBoundingClientRect();
-        if (clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom) return true;
+        if (isPointInRect(el, clientX, clientY)) return true;
       }
       return false;
     };
     const handleCarouselHover = (e) => {
       const container = findCarouselAtPoint(e.clientX, e.clientY);
       const scope = container?.closest("[data-ohw-section]") ?? container?.parentElement ?? null;
-      if (!container || !scope || isPointOverEditable(scope, e.clientX, e.clientY)) {
+      if (!container || !scope || isPointOverEditable(scope, e.clientX, e.clientY) || isPointOverNavigation(e.clientX, e.clientY) || isPointOverBridgeChrome(e.clientX, e.clientY)) {
         setCarouselHover((prev) => prev ? null : prev);
         return;
       }
@@ -22018,7 +22194,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.99",
+        bridgeVersion: "0.1.101",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections