@ohhwells/bridge 0.1.51-next.120 → 0.1.51-next.121

package/dist/index.cjs

@@ -6831,6 +6831,9 @@ function listNavbarItems() {
   }
   return Array.from(document.querySelectorAll("nav [data-ohw-href-key]")).filter(isNavbarLinkItem);
 }
+function listNavbarRootItems() {
+  return listNavbarItems().filter((el) => !isNestedNavChild(el));
+}
 function parseNavIndexFromKey(key) {
   if (!key) return null;
   const match = key.match(NAV_HREF_RE);
@@ -6859,6 +6862,12 @@ function getNavOrderFromDom() {
 function findCounterpartByHrefKey(hrefKey, root) {
   return root.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
 }
+function resolveNavRootUnit(anchor) {
+  if (anchor.closest("[data-ohw-nav-children]")) return anchor;
+  const group = anchor.closest("[data-ohw-nav-group]");
+  if (group?.querySelector(":scope > [data-ohw-nav-children]")) return group;
+  return anchor;
+}
 function cloneNavLinkShell(template) {
   const anchor = document.createElement("a");
   if (template) {
@@ -6882,37 +6891,47 @@ function buildNavLink(index, href, label, template) {
 }
 function insertNavLinkInContainer(container, anchor, afterHrefKey) {
   if (!afterHrefKey) {
+    const cta = container.querySelector('[data-ohw-role="navbar-button"]');
+    if (cta && cta.parentElement === container) {
+      container.insertBefore(anchor, cta);
+      return;
+    }
     container.appendChild(anchor);
     return;
   }
   const afterEl = findCounterpartByHrefKey(afterHrefKey, container);
-  if (afterEl?.parentElement === container) {
-    afterEl.insertAdjacentElement("afterend", anchor);
-    return;
+  if (afterEl) {
+    const insertAfter = resolveNavRootUnit(afterEl);
+    if (insertAfter.parentElement === container || insertAfter.parentElement === afterEl.parentElement) {
+      insertAfter.insertAdjacentElement("afterend", anchor);
+      return;
+    }
   }
   container.appendChild(anchor);
 }
 function insertNavbarItemDom(index, href, label, afterAnchor) {
   const afterHrefKey = afterAnchor?.getAttribute("data-ohw-href-key") ?? null;
-  const desktopItems = getNavbarDesktopContainer()?.querySelectorAll("[data-ohw-href-key]") ?? [];
-  const drawerItems = getNavbarDrawerContainer()?.querySelectorAll("[data-ohw-href-key]") ?? [];
-  const desktopTemplate = Array.from(desktopItems).find(isNavbarLinkItem) ?? null;
-  const drawerTemplate = Array.from(drawerItems).find(isNavbarLinkItem) ?? null;
-  let primary = null;
   const desktopContainer = getNavbarDesktopContainer();
+  const drawerContainer = getNavbarDrawerContainer();
+  const desktopTemplate = (desktopContainer ? Array.from(desktopContainer.querySelectorAll("[data-ohw-href-key]")).find(
+    (el) => isNavbarLinkItem(el) && !el.closest("[data-ohw-nav-children]")
+  ) : null) ?? null;
+  const drawerTemplate = (drawerContainer ? Array.from(drawerContainer.querySelectorAll("[data-ohw-href-key]")).find(
+    (el) => isNavbarLinkItem(el) && !el.closest("[data-ohw-nav-children]")
+  ) : null) ?? null;
+  let primary = null;
   if (desktopContainer) {
     const desktopAnchor = buildNavLink(index, href, label, desktopTemplate);
     insertNavLinkInContainer(desktopContainer, desktopAnchor, afterHrefKey);
     primary = desktopAnchor;
   }
-  const drawerContainer = getNavbarDrawerContainer();
   if (drawerContainer) {
     const drawerAnchor = buildNavLink(index, href, label, drawerTemplate);
     insertNavLinkInContainer(drawerContainer, drawerAnchor, afterHrefKey);
     if (!primary) primary = drawerAnchor;
   }
   if (!primary) {
-    const fallback = buildNavLink(index, href, label, listNavbarItems()[0] ?? null);
+    const fallback = buildNavLink(index, href, label, listNavbarRootItems()[0] ?? null);
     const nav = document.querySelector("nav");
     nav?.appendChild(fallback);
     primary = fallback;
@@ -6926,35 +6945,46 @@ function navOrderKeysEqual(a, b) {
   }
   return true;
 }
-function getNavbarLinkKeysInContainer(container) {
-  return Array.from(container.querySelectorAll("[data-ohw-href-key]")).filter(isNavbarLinkItem).map((el) => el.getAttribute("data-ohw-href-key")).filter((key) => Boolean(key));
+function getNavbarRootUnitsInContainer(container) {
+  const result = [];
+  for (const child of Array.from(container.children)) {
+    if (!(child instanceof HTMLElement)) continue;
+    if (child.hasAttribute("data-ohw-nav-group")) {
+      const trigger = child.querySelector(":scope > [data-ohw-href-key]");
+      if (!trigger || !isNavbarLinkItem(trigger)) continue;
+      const key = trigger.getAttribute("data-ohw-href-key");
+      if (key) result.push({ key, unit: child });
+      continue;
+    }
+    if (child.matches("[data-ohw-href-key]") && isNavbarLinkItem(child)) {
+      const key = child.getAttribute("data-ohw-href-key");
+      if (key) result.push({ key, unit: child });
+    }
+  }
+  return result;
 }
 function applyNavOrderToContainer(container, order) {
   const desired = order.filter((key, i) => order.indexOf(key) === i);
-  const current = getNavbarLinkKeysInContainer(container);
+  const units = getNavbarRootUnitsInContainer(container);
+  const current = units.map((u) => u.key);
   const extras = current.filter((key) => !desired.includes(key));
   const expected = [...desired.filter((key) => current.includes(key)), ...extras];
-  const orderedEls = [];
   if (navOrderKeysEqual(current, expected)) return;
-  if (current.length === expected.length && current.every((key, i) => key === expected[i])) {
-    return;
-  }
-  const lastCurrentLinkEl = current.length > 0 ? findCounterpartByHrefKey(current[current.length - 1], container) : null;
-  const anchor = lastCurrentLinkEl?.parentElement === container ? lastCurrentLinkEl.nextElementSibling : null;
+  const lastUnit = units[units.length - 1]?.unit ?? null;
+  const anchor = lastUnit?.parentElement === container ? lastUnit.nextElementSibling : null;
+  const orderedUnits = [];
   const seen = /* @__PURE__ */ new Set();
   for (const hrefKey of desired) {
     if (seen.has(hrefKey)) continue;
     seen.add(hrefKey);
-    const el = findCounterpartByHrefKey(hrefKey, container);
-    if (el && isNavbarLinkItem(el)) orderedEls.push(el);
+    const match = units.find((u) => u.key === hrefKey);
+    if (match) orderedUnits.push(match.unit);
   }
-  for (const el of container.querySelectorAll("[data-ohw-href-key]")) {
-    if (!isNavbarLinkItem(el)) continue;
-    const key = el.getAttribute("data-ohw-href-key");
-    if (!key || seen.has(key)) continue;
-    orderedEls.push(el);
+  for (const unit of units) {
+    if (seen.has(unit.key)) continue;
+    orderedUnits.push(unit.unit);
   }
-  for (const el of orderedEls) {
+  for (const el of orderedUnits) {
     if (anchor) {
       if (el.nextSibling !== anchor) container.insertBefore(el, anchor);
     } else if (container.lastElementChild !== el) {
@@ -7028,6 +7058,20 @@ function getNavForestFromDom() {
 }
 function planNavItemMove(hrefKey, parentId, insertIndex) {
   const model = getNavForestFromDom();
+  let currentParent;
+  for (const root of model) {
+    if (root.id === hrefKey) {
+      currentParent = null;
+      break;
+    }
+    if (root.children.some((c) => c.id === hrefKey)) {
+      currentParent = root.id;
+      break;
+    }
+  }
+  if (currentParent === void 0) return null;
+  if (currentParent === null && parentId !== null) return null;
+  if (currentParent !== null && parentId !== currentParent) return null;
   const next = moveNode(model, hrefKey, { parentId, index: insertIndex });
   if (!next) return null;
   if (forestsEqual(model, next)) return null;
@@ -7055,18 +7099,246 @@ function collectNavbarIndicesFromContent(content) {
 function navbarIndexExistsInDom(index) {
   return document.querySelector(`[data-ohw-href-key="nav-${index}-href"]`) !== null;
 }
+function findReferenceNavGroup(options) {
+  const templates = Array.from(
+    document.querySelectorAll("[data-ohw-nav-dropdown-template][data-ohw-nav-group]")
+  ).filter((el) => el.querySelector(":scope > [data-ohw-nav-children]"));
+  if (options?.drawer) {
+    const drawerTpl = templates.find((el) => el.closest("[data-ohw-nav-drawer]"));
+    if (drawerTpl) return drawerTpl;
+  } else {
+    const desktopTpl = templates.find((el) => !el.closest("[data-ohw-nav-drawer]"));
+    if (desktopTpl) return desktopTpl;
+  }
+  if (templates[0]) return templates[0];
+  const roots = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
+    (el) => Boolean(el)
+  );
+  const searchRoots = roots.length > 0 ? roots : [document.body];
+  for (const root of searchRoots) {
+    for (const group of root.querySelectorAll("[data-ohw-nav-group]")) {
+      if (group.hasAttribute("data-ohw-nav-dropdown-template")) continue;
+      if (group.querySelector(":scope > [data-ohw-nav-children]")) {
+        return group;
+      }
+    }
+  }
+  return null;
+}
+function navDropdownsOpenOnClick() {
+  const container = getNavbarDesktopContainer();
+  const mode = container?.getAttribute("data-ohw-nav-open") ?? findReferenceNavGroup()?.getAttribute("data-ohw-nav-open") ?? document.querySelector("[data-ohw-nav-dropdown-template][data-ohw-nav-group]")?.getAttribute("data-ohw-nav-open") ?? document.querySelector("[data-ohw-nav-group]")?.getAttribute("data-ohw-nav-open");
+  return mode !== "hover";
+}
+function navItemHasOwnUrl(anchor) {
+  const href = getLinkHref(anchor).trim();
+  if (!href || href === "#" || href.toLowerCase().startsWith("javascript:")) return false;
+  return true;
+}
+function navItemHasDropdownChildren(anchor) {
+  const key = anchor.getAttribute("data-ohw-href-key");
+  if (!key) return false;
+  const node = getNavForestFromDom().find((n) => n.id === key);
+  return Boolean(node && node.children.length > 0);
+}
+function isNestedNavChild(anchor) {
+  return Boolean(anchor.closest("[data-ohw-nav-children]"));
+}
+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]"));
+}
+function setNavGroupForceOpen(anchor, open) {
+  document.querySelectorAll("[data-ohw-nav-force-open]").forEach((el) => {
+    el.removeAttribute("data-ohw-nav-force-open");
+  });
+  if (!open || !anchor) return;
+  const group = anchor.closest("[data-ohw-nav-group]");
+  group?.setAttribute("data-ohw-nav-force-open", "");
+}
+function cloneChildrenShell(referenceChildren) {
+  const childrenRoot = document.createElement(referenceChildren.tagName.toLowerCase() || "div");
+  childrenRoot.setAttribute("data-ohw-nav-children", "");
+  if (referenceChildren.className) childrenRoot.className = referenceChildren.className;
+  return childrenRoot;
+}
+function ensureCaretOnTrigger(trigger, referenceGroup) {
+  if (trigger.querySelector("[data-ohw-nav-caret], .navbar__caret, .topnav__caret, .mobile-menu__caret")) {
+    return;
+  }
+  const refCaret = referenceGroup?.querySelector(
+    "[data-ohw-nav-caret], .navbar__caret, .topnav__caret, .mobile-menu__caret"
+  ) ?? null;
+  if (refCaret) {
+    trigger.appendChild(refCaret.cloneNode(true));
+    return;
+  }
+  const caret = document.createElement("span");
+  caret.setAttribute("data-ohw-nav-caret", "");
+  caret.setAttribute("aria-hidden", "true");
+  trigger.appendChild(caret);
+}
+function ensureNavDropdownForParent(parentAnchor) {
+  const parentHrefKey = parentAnchor.getAttribute("data-ohw-href-key");
+  if (!parentHrefKey) return null;
+  const containers = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
+    (el) => Boolean(el)
+  );
+  const searchRoots = containers.length > 0 ? containers : [document.body];
+  let primaryGroup = null;
+  for (const root of searchRoots) {
+    const trigger = findCounterpartByHrefKey(parentHrefKey, root);
+    if (!trigger || !isNavbarLinkItem(trigger)) continue;
+    const existing = trigger.closest("[data-ohw-nav-group]");
+    if (existing?.querySelector(":scope > [data-ohw-nav-children]")) {
+      if (!primaryGroup) primaryGroup = existing;
+      continue;
+    }
+    const parent = trigger.parentElement;
+    if (!parent) continue;
+    const isDrawer = Boolean(root.closest("[data-ohw-nav-drawer]")) || root.hasAttribute("data-ohw-nav-drawer");
+    const reference = findReferenceNavGroup({ drawer: isDrawer });
+    if (!reference) continue;
+    const refChildren = reference.querySelector(":scope > [data-ohw-nav-children]");
+    if (!refChildren) continue;
+    const group = document.createElement(reference.tagName.toLowerCase() || "div");
+    group.setAttribute("data-ohw-nav-group", "");
+    if (reference.className) group.className = reference.className;
+    const openMode = reference.getAttribute("data-ohw-nav-open");
+    if (openMode) group.setAttribute("data-ohw-nav-open", openMode);
+    const childrenRoot = cloneChildrenShell(refChildren);
+    parent.insertBefore(group, trigger);
+    group.appendChild(trigger);
+    ensureCaretOnTrigger(trigger, reference);
+    const refTrigger = reference.querySelector(
+      ":scope > a, :scope > [data-ohw-href-key], :scope > .navbar__link, :scope > .topnav__link"
+    );
+    if (refTrigger?.className && !trigger.className) {
+      trigger.className = refTrigger.className;
+    }
+    group.appendChild(childrenRoot);
+    if (!primaryGroup) primaryGroup = group;
+  }
+  return primaryGroup;
+}
+function insertChildLinkInChildrenRoot(childrenRoot, anchor) {
+  childrenRoot.appendChild(anchor);
+}
+function resolveChildNavLinkTemplate(childrenRoot, parentTrigger) {
+  const sibling = childrenRoot.querySelector(":scope > [data-ohw-href-key]");
+  if (sibling && isNavbarLinkItem(sibling)) return sibling;
+  const isDrawer = Boolean(childrenRoot.closest("[data-ohw-nav-drawer]"));
+  const refChild = findReferenceNavGroup({ drawer: isDrawer })?.querySelector(
+    ":scope > [data-ohw-nav-children] > a, :scope > [data-ohw-nav-children] > [data-ohw-href-key]"
+  );
+  if (refChild) return refChild;
+  if (parentTrigger && isNavbarLinkItem(parentTrigger)) return parentTrigger;
+  const container = childrenRoot.closest("[data-ohw-nav-container], [data-ohw-nav-drawer]") ?? null;
+  if (container) {
+    const local = Array.from(container.querySelectorAll("[data-ohw-href-key]")).find(
+      (el) => isNavbarLinkItem(el) && !el.closest("[data-ohw-nav-children]")
+    );
+    if (local) return local;
+  }
+  return listNavbarRootItems()[0] ?? null;
+}
+function buildChildNavLink(index, href, label, childrenRoot, parentTrigger = null) {
+  const template = resolveChildNavLinkTemplate(childrenRoot, parentTrigger);
+  return buildNavLink(index, href, label, template);
+}
+function addNavbarSubitem(parentAnchor, href = "/", label = "New") {
+  if (!isNavbarLinkItem(parentAnchor) || isNestedNavChild(parentAnchor)) return null;
+  const parentHrefKey = parentAnchor.getAttribute("data-ohw-href-key");
+  if (!parentHrefKey || !isNavbarHrefKey(parentHrefKey)) return null;
+  const group = ensureNavDropdownForParent(parentAnchor);
+  if (!group) return null;
+  const index = getNextNavbarIndex();
+  const hrefKey = `nav-${index}-href`;
+  const labelKey = `nav-${index}-label`;
+  let primary = null;
+  const containers = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
+    (el) => Boolean(el)
+  );
+  const searchRoots = containers.length > 0 ? containers : [document.body];
+  for (const root of searchRoots) {
+    const trigger = findCounterpartByHrefKey(parentHrefKey, root);
+    const parentGroup = trigger?.closest("[data-ohw-nav-group]");
+    const childrenRoot = parentGroup?.querySelector(":scope > [data-ohw-nav-children]");
+    if (!childrenRoot) continue;
+    const childAnchor = buildChildNavLink(index, href, label, childrenRoot, trigger);
+    insertChildLinkInChildrenRoot(childrenRoot, childAnchor);
+    if (!primary) primary = childAnchor;
+  }
+  if (!primary) return null;
+  const forest = getNavForestFromDom();
+  applyNavForest(forest);
+  const orderJson = serializeNavOrder(forest);
+  return {
+    anchor: primary,
+    index,
+    hrefKey,
+    labelKey,
+    href,
+    label,
+    order: flattenNavOrder(forest),
+    orderJson,
+    parentHrefKey
+  };
+}
 function reconcileNavbarItemsFromContent(content) {
   const orderForest = parseNavOrderJson(content[NAV_ORDER_KEY]);
   if (orderForest?.length) {
     const allowed = new Set(flattenNavOrder(orderForest));
-    for (const hrefKey of allowed) {
-      const index = parseNavIndexFromKey(hrefKey);
-      if (index === null) continue;
-      if (navbarIndexExistsInDom(index)) continue;
-      const href = content[`nav-${index}-href`];
-      const label = content[`nav-${index}-label`];
-      if (!href && !label) continue;
-      insertNavbarItemDom(index, href ?? "/", label ?? "Untitled", null);
+    for (const node of orderForest) {
+      const parentIndex = parseNavIndexFromKey(node.id);
+      if (parentIndex === null) continue;
+      if (!navbarIndexExistsInDom(parentIndex)) {
+        const href = content[`nav-${parentIndex}-href`];
+        const label = content[`nav-${parentIndex}-label`];
+        if (!href && !label) continue;
+        insertNavbarItemDom(parentIndex, href ?? "/", label ?? "Untitled", null);
+      }
+      if (node.children.length > 0) {
+        const parentEl = document.querySelector(`[data-ohw-href-key="${CSS.escape(node.id)}"]`) ?? null;
+        if (parentEl && isNavbarLinkItem(parentEl) && !isNestedNavChild(parentEl)) {
+          ensureNavDropdownForParent(parentEl);
+        }
+      }
+      for (const child of node.children) {
+        const childIndex = parseNavIndexFromKey(child.id);
+        if (childIndex === null) continue;
+        if (navbarIndexExistsInDom(childIndex)) continue;
+        const href = content[`nav-${childIndex}-href`];
+        const label = content[`nav-${childIndex}-label`];
+        if (!href && !label) continue;
+        const parentEl = document.querySelector(`[data-ohw-href-key="${CSS.escape(node.id)}"]`) ?? null;
+        if (parentEl && isNavbarLinkItem(parentEl)) {
+          ensureNavDropdownForParent(parentEl);
+          const group = parentEl.closest("[data-ohw-nav-group]");
+          const childrenRoot = group?.querySelector(":scope > [data-ohw-nav-children]");
+          if (childrenRoot) {
+            const desktop = getNavbarDesktopContainer();
+            const drawer = getNavbarDrawerContainer();
+            for (const root of [desktop, drawer].filter((el) => Boolean(el))) {
+              const trigger = findCounterpartByHrefKey(node.id, root);
+              const rootChildren = trigger?.closest("[data-ohw-nav-group]")?.querySelector(":scope > [data-ohw-nav-children]");
+              if (!rootChildren) continue;
+              if (findCounterpartByHrefKey(child.id, root)) continue;
+              const childAnchor = buildChildNavLink(
+                childIndex,
+                href ?? "/",
+                label ?? "Untitled",
+                rootChildren,
+                trigger ?? null
+              );
+              insertChildLinkInChildrenRoot(rootChildren, childAnchor);
+            }
+            continue;
+          }
+        }
+        insertNavbarItemDom(childIndex, href ?? "/", label ?? "Untitled", null);
+      }
     }
     pruneNavbarItemsNotInOrder(allowed);
     applyNavForest(orderForest);
@@ -7099,7 +7371,7 @@ function pruneNavbarItemsNotInOrder(allowed) {
   }
 }
 function buildNavOrderAfterInsert(afterAnchor, newHrefKey) {
-  const order = getNavOrderFromDom();
+  const order = getNavForestFromDom().map((n) => n.id);
   if (!afterAnchor) {
     if (!order.includes(newHrefKey)) order.push(newHrefKey);
     return order;
@@ -7109,8 +7381,18 @@ function buildNavOrderAfterInsert(afterAnchor, newHrefKey) {
     if (!order.includes(newHrefKey)) order.push(newHrefKey);
     return order;
   }
+  let rootAfterKey = afterKey;
+  if (isNestedNavChild(afterAnchor)) {
+    const parent = getNavForestFromDom().find((n) => n.children.some((c) => c.id === afterKey));
+    if (parent) rootAfterKey = parent.id;
+  } else {
+    const group = afterAnchor.closest("[data-ohw-nav-group]");
+    const trigger = group?.querySelector(":scope > [data-ohw-href-key]");
+    const triggerKey = trigger?.getAttribute("data-ohw-href-key");
+    if (triggerKey) rootAfterKey = triggerKey;
+  }
   const withoutNew = order.filter((key) => key !== newHrefKey);
-  const pos = withoutNew.indexOf(afterKey);
+  const pos = withoutNew.indexOf(rootAfterKey);
   if (pos >= 0) {
     withoutNew.splice(pos + 1, 0, newHrefKey);
     return withoutNew;
@@ -7135,49 +7417,163 @@ function insertNavbarItem(href, label, afterAnchor = null) {
     order
   };
 }
+function getNavbarOrderJson() {
+  return serializeNavOrder(getNavForestFromDom());
+}
+function allocateNavKeyRemap(hrefKeys) {
+  let nextIndex = getNextNavbarIndex();
+  const map = /* @__PURE__ */ new Map();
+  for (const oldHrefKey of hrefKeys) {
+    const index = nextIndex++;
+    map.set(oldHrefKey, {
+      index,
+      hrefKey: `nav-${index}-href`,
+      labelKey: `nav-${index}-label`
+    });
+  }
+  return map;
+}
+function clearTransientNavAttrs(root) {
+  const clear = (el) => {
+    el.removeAttribute("data-ohw-selected");
+    el.removeAttribute("data-ohw-hovered");
+    el.removeAttribute("data-ohw-editing");
+    el.removeAttribute("data-ohw-nav-force-open");
+    el.removeAttribute("contenteditable");
+  };
+  clear(root);
+  root.querySelectorAll(
+    "[data-ohw-selected], [data-ohw-hovered], [data-ohw-editing], [data-ohw-nav-force-open], [contenteditable]"
+  ).forEach(clear);
+}
+function remapNavKeysInSubtree(root, keyMap) {
+  const remapAnchor = (el) => {
+    const oldHrefKey = el.getAttribute("data-ohw-href-key");
+    if (!oldHrefKey) return;
+    const mapped = keyMap.get(oldHrefKey);
+    if (!mapped) return;
+    el.setAttribute("data-ohw-href-key", mapped.hrefKey);
+    const labelEl = el.querySelector(':scope > [data-ohw-editable="text"][data-ohw-key]') ?? el.querySelector('[data-ohw-editable="text"][data-ohw-key]');
+    if (labelEl) labelEl.setAttribute("data-ohw-key", mapped.labelKey);
+  };
+  if (root.matches("[data-ohw-href-key]")) remapAnchor(root);
+  root.querySelectorAll("[data-ohw-href-key]").forEach(remapAnchor);
+}
+function readNavLinkSnapshot(hrefKey) {
+  const el = findCounterpartByHrefKey(hrefKey, document) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
+  if (!el) return { href: "/", label: "Untitled" };
+  const labelEl = el.querySelector('[data-ohw-editable="text"]');
+  return {
+    href: getLinkHref(el),
+    label: (labelEl?.textContent ?? "").trim() || "Untitled"
+  };
+}
+function findClonedNavAnchor(unit, hrefKey) {
+  if (unit.getAttribute("data-ohw-href-key") === hrefKey && isNavbarLinkItem(unit)) return unit;
+  return unit.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) ?? null;
+}
+function duplicateNestedNavChild(sourceAnchor) {
+  const sourceHrefKey = sourceAnchor.getAttribute("data-ohw-href-key");
+  if (!sourceHrefKey || !isNavbarHrefKey(sourceHrefKey)) return null;
+  const parentGroup = sourceAnchor.closest("[data-ohw-nav-group]");
+  const parentTrigger = parentGroup?.querySelector(":scope > [data-ohw-href-key]");
+  const parentHrefKey = parentTrigger?.getAttribute("data-ohw-href-key");
+  if (!parentHrefKey || !isNavbarHrefKey(parentHrefKey)) return null;
+  const snapshot = readNavLinkSnapshot(sourceHrefKey);
+  const keyMap = allocateNavKeyRemap([sourceHrefKey]);
+  const mapped = keyMap.get(sourceHrefKey);
+  const containers = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
+    (el) => Boolean(el)
+  );
+  const searchRoots = containers.length > 0 ? containers : [document.body];
+  let primary = null;
+  for (const root of searchRoots) {
+    const sourceEl = findCounterpartByHrefKey(sourceHrefKey, root);
+    if (!sourceEl || !isNavbarLinkItem(sourceEl)) continue;
+    const childrenRoot = sourceEl.closest("[data-ohw-nav-children]");
+    if (!childrenRoot) continue;
+    const clone = sourceEl.cloneNode(true);
+    clearTransientNavAttrs(clone);
+    remapNavKeysInSubtree(clone, keyMap);
+    sourceEl.insertAdjacentElement("afterend", clone);
+    if (!primary) primary = clone;
+  }
+  if (!primary) return null;
+  const orderJson = serializeNavOrder(getNavForestFromDom());
+  return {
+    anchor: primary,
+    index: mapped.index,
+    hrefKey: mapped.hrefKey,
+    labelKey: mapped.labelKey,
+    href: snapshot.href,
+    label: snapshot.label,
+    order: flattenNavOrder(getNavForestFromDom()),
+    childResults: [],
+    orderJson
+  };
+}
 function duplicateNavbarItem(sourceAnchor) {
   if (!isNavbarLinkItem(sourceAnchor)) return null;
   const sourceHrefKey = sourceAnchor.getAttribute("data-ohw-href-key");
   if (!sourceHrefKey || !isNavbarHrefKey(sourceHrefKey)) return null;
-  const href = getLinkHref(sourceAnchor);
-  const labelEl = sourceAnchor.querySelector('[data-ohw-editable="text"]');
-  const label = (labelEl?.textContent ?? "").trim() || "Untitled";
+  if (isNestedNavChild(sourceAnchor)) {
+    return duplicateNestedNavChild(sourceAnchor);
+  }
   const forest = getNavForestFromDom();
   const sourceNode = forest.find((n) => n.id === sourceHrefKey);
-  const childIds = sourceNode?.children.map((c) => c.id) ?? [];
-  const primary = insertNavbarItem(href, label, sourceAnchor);
-  const childResults = [];
-  let after = primary.anchor;
-  for (const childId of childIds) {
-    const childEl = findCounterpartByHrefKey(childId, document) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(childId)}"]`);
-    if (!childEl || !isNavbarLinkItem(childEl)) continue;
-    const childHref = getLinkHref(childEl);
-    const childLabelEl = childEl.querySelector('[data-ohw-editable="text"]');
-    const childLabel = (childLabelEl?.textContent ?? "").trim() || "Untitled";
-    const inserted = insertNavbarItem(childHref, childLabel, after);
-    childResults.push(inserted);
-    after = inserted.anchor;
-  }
-  let orderJson;
-  if (childResults.length > 0) {
-    const nextForest = getNavForestFromDom();
-    const withoutNew = nextForest.filter(
-      (n) => n.id !== primary.hrefKey && !childResults.some((c) => c.hrefKey === n.id)
-    );
-    const sourceIdx = withoutNew.findIndex((n) => n.id === sourceHrefKey);
-    const insertAt = sourceIdx >= 0 ? sourceIdx + 1 : withoutNew.length;
-    withoutNew.splice(insertAt, 0, {
-      id: primary.hrefKey,
-      children: childResults.map((c) => ({ id: c.hrefKey, children: [] }))
-    });
-    applyNavForest(withoutNew);
-    orderJson = serializeNavOrder(withoutNew);
-  } else {
-    orderJson = serializeNavOrder(getNavForestFromDom());
-  }
+  if (!sourceNode) return null;
+  const hrefKeys = collectSubtreeHrefKeys(sourceNode);
+  const keyMap = allocateNavKeyRemap(hrefKeys);
+  const primaryMap = keyMap.get(sourceHrefKey);
+  if (!primaryMap) return null;
+  const primarySnapshot = readNavLinkSnapshot(sourceHrefKey);
+  const childSnapshots = sourceNode.children.map((child) => ({
+    oldKey: child.id,
+    ...readNavLinkSnapshot(child.id)
+  }));
+  const containers = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
+    (el) => Boolean(el)
+  );
+  const searchRoots = containers.length > 0 ? containers : [document.body];
+  let primaryAnchor = null;
+  for (const root of searchRoots) {
+    const sourceEl = findCounterpartByHrefKey(sourceHrefKey, root);
+    if (!sourceEl || !isNavbarLinkItem(sourceEl)) continue;
+    const sourceUnit = resolveNavRootUnit(sourceEl);
+    if (!sourceUnit.parentElement) continue;
+    const clone = sourceUnit.cloneNode(true);
+    clearTransientNavAttrs(clone);
+    remapNavKeysInSubtree(clone, keyMap);
+    sourceUnit.insertAdjacentElement("afterend", clone);
+    const clonedPrimary = findClonedNavAnchor(clone, primaryMap.hrefKey);
+    if (!primaryAnchor && clonedPrimary && isNavbarLinkItem(clonedPrimary)) {
+      primaryAnchor = clonedPrimary;
+    }
+  }
+  if (!primaryAnchor) return null;
+  const liveForest = getNavForestFromDom();
+  applyNavForest(liveForest);
+  const orderJson = serializeNavOrder(liveForest);
+  const childResults = childSnapshots.map((child) => {
+    const mapped = keyMap.get(child.oldKey);
+    return {
+      anchor: findCounterpartByHrefKey(mapped.hrefKey, document) ?? primaryAnchor,
+      index: mapped.index,
+      hrefKey: mapped.hrefKey,
+      labelKey: mapped.labelKey,
+      href: child.href,
+      label: child.label,
+      order: flattenNavOrder(liveForest)
+    };
+  });
   return {
-    ...primary,
-    order: flattenNavOrder(parseNavOrderJson(orderJson) ?? getNavForestFromDom()),
+    anchor: primaryAnchor,
+    index: primaryMap.index,
+    hrefKey: primaryMap.hrefKey,
+    labelKey: primaryMap.labelKey,
+    href: primarySnapshot.href,
+    label: primarySnapshot.label,
+    order: flattenNavOrder(liveForest),
     childResults,
     orderJson
   };
@@ -7193,10 +7589,51 @@ function labelKeyFromHrefKey(hrefKey) {
   return hrefKey.replace(/-href$/, "-label");
 }
 function resolveRemovableNavUnit(anchor) {
-  if (anchor.closest("[data-ohw-nav-children]")) return anchor;
-  const group = anchor.closest("[data-ohw-nav-group]");
-  if (group?.querySelector(":scope > [data-ohw-nav-children]")) return group;
-  return anchor;
+  return resolveNavRootUnit(anchor);
+}
+function collapseEmptyNavDropdownForParent(parentHrefKey) {
+  const roots = [getNavbarDesktopContainer(), getNavbarDrawerContainer()].filter(
+    (el) => Boolean(el)
+  );
+  const searchRoots = roots.length > 0 ? roots : [document.body];
+  const collapsed = [];
+  for (const root of searchRoots) {
+    const trigger = findCounterpartByHrefKey(parentHrefKey, root);
+    if (!trigger || !isNavbarLinkItem(trigger) || isNestedNavChild(trigger)) continue;
+    const group = trigger.closest("[data-ohw-nav-group]");
+    if (!group || group.hasAttribute("data-ohw-nav-dropdown-template")) continue;
+    const childrenRoot = group.querySelector(":scope > [data-ohw-nav-children]");
+    if (!childrenRoot) continue;
+    const remaining = Array.from(
+      childrenRoot.querySelectorAll(":scope > [data-ohw-href-key]")
+    ).filter(isNavbarLinkItem);
+    if (remaining.length > 0) continue;
+    const container = group.parentElement;
+    if (!container) continue;
+    const caret = trigger.querySelector(
+      "[data-ohw-nav-caret], .navbar__caret, .topnav__caret, .mobile-menu__caret"
+    ) ?? null;
+    collapsed.push({
+      group,
+      container,
+      nextSibling: group.nextSibling,
+      trigger,
+      caret
+    });
+    group.removeAttribute("data-ohw-nav-force-open");
+    container.insertBefore(trigger, group);
+    caret?.remove();
+    group.remove();
+  }
+  if (collapsed.length === 0) return null;
+  return () => {
+    for (const entry of collapsed) {
+      entry.container.insertBefore(entry.group, entry.nextSibling);
+      const childrenRoot = entry.group.querySelector(":scope > [data-ohw-nav-children]");
+      entry.group.insertBefore(entry.trigger, childrenRoot);
+      if (entry.caret) entry.trigger.appendChild(entry.caret);
+    }
+  };
 }
 function deleteNavbarItem(sourceAnchor) {
   if (!isNavbarLinkItem(sourceAnchor)) return null;
@@ -7206,6 +7643,7 @@ function deleteNavbarItem(sourceAnchor) {
   const label = (labelEl?.textContent ?? "").trim() || "Untitled";
   const previousForest = getNavForestFromDom();
   const previousOrderJson = serializeNavOrder(previousForest);
+  const parentHrefKey = previousForest.find((n) => n.children.some((c) => c.id === sourceHrefKey))?.id ?? null;
   const taken = takeNode(previousForest, sourceHrefKey);
   if (!taken) return null;
   const removedHrefKeys = collectSubtreeHrefKeys(taken.taken);
@@ -7235,6 +7673,13 @@ function deleteNavbarItem(sourceAnchor) {
     unit.remove();
   }
   applyNavForest(taken.forest);
+  let restoreCollapsedDropdown = null;
+  if (parentHrefKey) {
+    const parentNode = taken.forest.find((n) => n.id === parentHrefKey);
+    if (parentNode && parentNode.children.length === 0) {
+      restoreCollapsedDropdown = collapseEmptyNavDropdownForParent(parentHrefKey);
+    }
+  }
   const orderJson = serializeNavOrder(taken.forest);
   return {
     label,
@@ -7244,6 +7689,7 @@ function deleteNavbarItem(sourceAnchor) {
     orderJson,
     previousOrderJson,
     undo: () => {
+      restoreCollapsedDropdown?.();
       for (const placement of placements) {
         placement.parent.insertBefore(placement.node, placement.nextSibling);
       }
@@ -8068,9 +8514,19 @@ var unlockFooterDragInteraction = unlockItemDragInteraction;
 function listReorderableNavItems() {
   return listNavbarItems().filter((el) => {
     const key = el.getAttribute("data-ohw-href-key");
-    return isNavbarHrefKey(key) && !el.closest("[data-ohw-nav-children]");
+    return isNavbarHrefKey(key) && !isNestedNavChild(el);
   });
 }
+function resolveParentNavHrefKey(child) {
+  const childrenRoot = child.closest("[data-ohw-nav-children]");
+  const group = childrenRoot?.closest("[data-ohw-nav-group]");
+  if (!group) return null;
+  const trigger = group.querySelector(":scope > [data-ohw-href-key]") ?? Array.from(group.querySelectorAll("[data-ohw-href-key]")).find(
+    (el) => !el.closest("[data-ohw-nav-children]")
+  ) ?? null;
+  const key = trigger?.getAttribute("data-ohw-href-key");
+  return key && isNavbarHrefKey(key) ? key : null;
+}
 function listNavChildren(parentHrefKey) {
   const items = listNavbarItems();
   const parent = items.find((el) => el.getAttribute("data-ohw-href-key") === parentHrefKey);
@@ -8201,23 +8657,14 @@ function buildChildNavDropSlots(parentHrefKey) {
   return slots;
 }
 function buildAllNavDropSlots(draggedHrefKey) {
-  const slots = [...buildRootNavDropSlots()];
-  for (const item of listReorderableNavItems()) {
-    const key = item.getAttribute("data-ohw-href-key");
-    if (!key || key === draggedHrefKey) continue;
-    const group = item.closest("[data-ohw-nav-group]");
-    if (!group?.querySelector(":scope > [data-ohw-nav-children]")) continue;
-    slots.push(...buildChildNavDropSlots(key));
-  }
   const dragged = listNavbarItems().find((el) => el.getAttribute("data-ohw-href-key") === draggedHrefKey);
-  const parentGroup = dragged?.closest("[data-ohw-nav-children]")?.closest("[data-ohw-nav-group]");
-  const parentTrigger = parentGroup?.querySelector(":scope > [data-ohw-href-key]");
-  const parentKey = parentTrigger?.getAttribute("data-ohw-href-key");
-  if (parentKey && isNavbarHrefKey(parentKey)) {
-    const existing = slots.some((s) => s.parentId === parentKey);
-    if (!existing) slots.push(...buildChildNavDropSlots(parentKey));
+  if (!dragged) return buildRootNavDropSlots();
+  if (isNestedNavChild(dragged)) {
+    const parentKey = resolveParentNavHrefKey(dragged);
+    if (!parentKey) return [];
+    return buildChildNavDropSlots(parentKey);
   }
-  return slots;
+  return buildRootNavDropSlots();
 }
 function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
   const slots = buildAllNavDropSlots(draggedHrefKey);
@@ -8268,6 +8715,8 @@ function useNavItemDrag({
     setDraggedItemRect(null);
     setSiblingHintRects([]);
     setIsItemDragging(false);
+    setNavGroupForceOpen(null, false);
+    document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
     unlockItemDragInteraction();
   }, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
   const refreshNavDragVisuals = (0, import_react9.useCallback)(
@@ -8305,6 +8754,13 @@ function useNavItemDrag({
       lockItemDuringDrag();
       siblingHintElRef.current = null;
       setSiblingHintRect(null);
+      if (session.draggedEl.closest("[data-ohw-nav-children]")) {
+        document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
+        setNavGroupForceOpen(session.draggedEl, true);
+      } else {
+        document.documentElement.setAttribute("data-ohw-nav-dragging-root", "");
+        setNavGroupForceOpen(null, false);
+      }
       if (session.wasSelected && selectedElRef.current === session.draggedEl) {
         setToolbarRect(rect);
       }
@@ -9491,10 +9947,38 @@ function getHrefKeyFromElement(el) {
 function isNavbarButton2(el) {
   return Boolean(el.closest('[data-ohw-role="navbar-button"]'));
 }
+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 (childrenRoot.clientHeight < 2 || childrenRoot.clientWidth < 2) return false;
+  const style = window.getComputedStyle(childrenRoot);
+  if (style.display === "none" || style.visibility === "hidden") return false;
+  if (style.pointerEvents === "none") return false;
+  if (Number.parseFloat(style.opacity || "1") === 0) return false;
+  if (typeof childrenRoot.checkVisibility === "function") {
+    try {
+      if (!childrenRoot.checkVisibility({
+        checkOpacity: true,
+        checkVisibilityCSS: true
+      })) {
+        return false;
+      }
+    } catch {
+    }
+  }
+  return true;
+}
+function isNavItemPointerTarget(el) {
+  const childrenRoot = el.closest("[data-ohw-nav-children]");
+  if (!childrenRoot) return true;
+  return isNavDropdownPanelOpen(childrenRoot);
+}
 function getNavigationItemAnchor(el) {
   const anchor = el.matches("[data-ohw-href-key]") ? el : el.closest("[data-ohw-href-key]");
   if (!anchor) return null;
   if (!anchor.querySelector('[data-ohw-editable="text"]')) return null;
+  if (!isNavItemPointerTarget(anchor)) return null;
   return anchor;
 }
 function isNavigationItem2(el) {
@@ -9558,7 +10042,7 @@ function isInferredFooterGroup2(el) {
   return countFooterNavItems(el) >= 2;
 }
 function isNavigationContainer(el) {
-  return el.hasAttribute("data-ohw-nav-container") || isFooterLinksContainer(el) || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup2(el);
+  return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el) || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup2(el);
 }
 function isNavbarLinksContainer2(el) {
   return el.hasAttribute("data-ohw-nav-container");
@@ -9586,6 +10070,11 @@ function isPointOverNavigation(x, y) {
     const r2 = root.getBoundingClientRect();
     if (x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) return true;
   }
+  for (const panel of document.querySelectorAll("[data-ohw-nav-children]")) {
+    if (!isNavDropdownPanelOpen(panel)) continue;
+    const r2 = panel.getBoundingClientRect();
+    if (x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) return true;
+  }
   return false;
 }
 function findHoveredNavOrFooterContainer(x, y) {
@@ -9604,6 +10093,7 @@ function findHoveredNavOrFooterContainer(x, y) {
 function isPointOverNavItem(container, x, y) {
   return Array.from(container.querySelectorAll("[data-ohw-href-key]")).some((el) => {
     if (!isNavigationItem2(el) || isNavbarButton2(el)) return false;
+    if (!isNavItemPointerTarget(el)) return false;
     const itemRect = el.getBoundingClientRect();
     return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
   });
@@ -9636,7 +10126,13 @@ function resolveNavContainerSelectionTarget(target, clientX, clientY) {
 }
 function getNavigationSelectionParent(el) {
   if (isNavigationItem2(el)) {
-    const explicit = el.closest("[data-ohw-nav-container]");
+    const childrenRoot = el.closest("[data-ohw-nav-children]");
+    if (childrenRoot) {
+      const group = childrenRoot.closest("[data-ohw-nav-group]");
+      const trigger = group?.querySelector(":scope > [data-ohw-href-key]");
+      if (trigger && trigger !== el && isNavigationItem2(trigger)) return trigger;
+    }
+    const explicit = el.closest("[data-ohw-nav-container], [data-ohw-nav-drawer]");
     if (explicit) return explicit;
     const footerColumn = getFooterColumn(el);
     if (footerColumn) return footerColumn;
@@ -9647,7 +10143,7 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return getFooterLinksContainer();
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -9658,11 +10154,23 @@ function collectNavigationItemSiblingHintRects(selected) {
   if (footerColumn) {
     return listFooterLinksInColumn(footerColumn).filter((link) => link !== selected).map((link) => link.getBoundingClientRect());
   }
+  const childrenRoot = selected.closest("[data-ohw-nav-children]");
+  if (childrenRoot) {
+    return Array.from(childrenRoot.querySelectorAll(":scope > [data-ohw-href-key]")).filter((el) => isNavigationItem2(el) && el !== selected).map((el) => el.getBoundingClientRect());
+  }
   const navContainer = selected.closest("[data-ohw-nav-container], [data-ohw-nav-drawer]");
   if (navContainer) {
-    return Array.from(navContainer.querySelectorAll("[data-ohw-href-key]")).filter((el) => isNavigationItem2(el) && el !== selected).map((el) => el.getBoundingClientRect());
+    return Array.from(navContainer.children).flatMap((child) => {
+      if (!(child instanceof HTMLElement)) return [];
+      if (child.hasAttribute("data-ohw-nav-group")) {
+        const trigger = child.querySelector(":scope > [data-ohw-href-key]");
+        return trigger ? [trigger] : [];
+      }
+      if (child.matches("[data-ohw-href-key]")) return [child];
+      return [];
+    }).filter((el) => isNavigationItem2(el) && el !== selected).map((el) => el.getBoundingClientRect());
   }
-  return listNavigationItems().filter((el) => el !== selected).map((el) => el.getBoundingClientRect());
+  return listNavigationItems().filter((el) => el !== selected && !el.closest("[data-ohw-nav-children]")).map((el) => el.getBoundingClientRect());
 }
 function placeCaretAtPoint(el, x, y) {
   const selection = window.getSelection();
@@ -10559,6 +11067,7 @@ function OhhwellsBridge() {
     el.removeAttribute("contenteditable");
     el.removeAttribute("data-ohw-editing");
     activeElRef.current = null;
+    setNavGroupForceOpen(null, false);
     setReorderHrefKey(null);
     setReorderDragDisabled(false);
     if (!selectedElRef.current) {
@@ -10591,6 +11100,7 @@ function OhhwellsBridge() {
     hoveredNavContainerRef.current = null;
     setHoveredNavContainerRect(null);
     if (!activeElRef.current) {
+      setNavGroupForceOpen(null, false);
       setToolbarRect(null);
       setToolbarVariant("none");
     }
@@ -10648,6 +11158,7 @@ function OhhwellsBridge() {
     selectedFooterColAttrRef.current = null;
     markSelected(navAnchor);
     setSelectedIsCta(isNavbarButton2(navAnchor));
+    setNavGroupForceOpen(navAnchor, navItemOwnsDropdownPanel(navAnchor));
     const { key, disabled } = getNavigationItemReorderState(navAnchor);
     setReorderHrefKey(key);
     setReorderDragDisabled(disabled);
@@ -10685,7 +11196,7 @@ function OhhwellsBridge() {
     reselectNavigationItem(navAnchor);
   }, [postToParent2, reselectNavigationItem]);
   const handleAddTopLevelNavItem = (0, import_react11.useCallback)(() => {
-    const items = listNavbarItems();
+    const items = listNavbarRootItems();
     addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
     deselectRef.current();
     deactivateRef.current();
@@ -10696,6 +11207,100 @@ function OhhwellsBridge() {
       intent: "add-nav"
     });
   }, []);
+  const maybeWarnNavLinkDropdownConflict = (0, import_react11.useCallback)(
+    (anchor) => {
+      if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
+      if (!navDropdownsOpenOnClick()) return;
+      if (!navItemHasOwnUrl(anchor) || !navItemHasDropdownChildren(anchor)) return;
+      postToParent2({
+        type: "ow:toast",
+        title: "This link won't work while it has dropdown items",
+        toastType: "warning"
+      });
+    },
+    [postToParent2]
+  );
+  const enterEditOnNewItem = (0, import_react11.useCallback)((anchor) => {
+    const label = anchor.querySelector('[data-ohw-editable="text"]');
+    if (!label) {
+      selectRef.current(anchor);
+      return;
+    }
+    setNavGroupForceOpen(anchor, true);
+    activateRef.current(label);
+  }, []);
+  const handleAddChildItem = (0, import_react11.useCallback)(() => {
+    const selected = selectedElRef.current;
+    if (!selected) return;
+    if (toolbarVariantRef.current === "select-frame" && isFooterFrameSelection) {
+      if (!selected.hasAttribute("data-ohw-footer-col") && !selected.closest("[data-ohw-footer-col]")) {
+      }
+      const column = (selected.hasAttribute("data-ohw-footer-col") ? selected : null) ?? selected.closest("[data-ohw-footer-col]") ?? (listFooterColumns().includes(selected) ? selected : null);
+      if (!column) return;
+      const result2 = insertFooterItem(column, "/", "New link", null);
+      applyLinkByKey(result2.hrefKey, result2.href);
+      document.querySelectorAll(`[data-ohw-key="${result2.labelKey}"]`).forEach((el) => {
+        el.textContent = result2.label;
+      });
+      const orderJson = JSON.stringify(result2.order);
+      editContentRef.current = {
+        ...editContentRef.current,
+        [result2.hrefKey]: result2.href,
+        [result2.labelKey]: result2.label,
+        [FOOTER_ORDER_KEY]: orderJson
+      };
+      postToParent2({
+        type: "ow:change",
+        nodes: [
+          { key: result2.hrefKey, text: result2.href },
+          { key: result2.labelKey, text: result2.label },
+          { key: FOOTER_ORDER_KEY, text: orderJson }
+        ]
+      });
+      enforceLinkHrefs();
+      requestAnimationFrame(() => {
+        enterEditOnNewItem(result2.anchor);
+      });
+      return;
+    }
+    if (!isNavbarHrefKey(selected.getAttribute("data-ohw-href-key"))) return;
+    if (isNestedNavChild(selected)) return;
+    const hadUrl = navItemHasOwnUrl(selected);
+    const result = addNavbarSubitem(selected);
+    if (!result) return;
+    applyLinkByKey(result.hrefKey, result.href);
+    document.querySelectorAll(`[data-ohw-key="${result.labelKey}"]`).forEach((el) => {
+      el.textContent = result.label;
+    });
+    const navCount = String(result.index + 1);
+    editContentRef.current = {
+      ...editContentRef.current,
+      [result.hrefKey]: result.href,
+      [result.labelKey]: result.label,
+      [NAV_COUNT_KEY]: navCount,
+      [NAV_ORDER_KEY]: result.orderJson
+    };
+    postToParent2({
+      type: "ow:change",
+      nodes: [
+        { key: result.hrefKey, text: result.href },
+        { key: result.labelKey, text: result.label },
+        { key: NAV_COUNT_KEY, text: navCount },
+        { key: NAV_ORDER_KEY, text: result.orderJson }
+      ]
+    });
+    if (hadUrl) {
+      maybeWarnNavLinkDropdownConflict(
+        document.querySelector(
+          `[data-ohw-href-key="${CSS.escape(result.parentHrefKey)}"]`
+        ) ?? selected
+      );
+    }
+    enforceLinkHrefs();
+    requestAnimationFrame(() => {
+      enterEditOnNewItem(result.anchor);
+    });
+  }, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
   const handleAddFooterColumn = (0, import_react11.useCallback)(() => {
     if (!canAddFooterColumn()) {
       postToParent2({
@@ -11021,6 +11626,7 @@ function OhhwellsBridge() {
     markSelected(anchor);
     setSelectedIsCta(isNavbarButton2(anchor));
     clearHrefKeyHover(anchor);
+    setNavGroupForceOpen(anchor, navItemOwnsDropdownPanel(anchor));
     hoveredNavContainerRef.current = null;
     setHoveredNavContainerRect(null);
     setHoveredItemRect(null);
@@ -11048,6 +11654,7 @@ function OhhwellsBridge() {
     markSelected(el);
     setSelectedIsCta(false);
     clearHrefKeyHover(el);
+    setNavGroupForceOpen(null, false);
     hoveredNavContainerRef.current = null;
     setHoveredNavContainerRect(null);
     setHoveredItemRect(null);
@@ -11115,9 +11722,11 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(Boolean(getHrefKeyFromElement(el)));
     const navAnchor = getNavigationItemAnchor(el);
     if (navAnchor) {
+      setNavGroupForceOpen(navAnchor, navItemOwnsDropdownPanel(navAnchor));
       setReorderHrefKey(null);
       setReorderDragDisabled(false);
     } else {
+      setNavGroupForceOpen(null, false);
       const { key: reorderKey, disabled: reorderDisabled } = getReorderHandleState(el);
       setReorderHrefKey(reorderKey);
       setReorderDragDisabled(reorderDisabled);
@@ -11967,11 +12576,16 @@ function OhhwellsBridge() {
         if (!overContainer) continue;
         const navItemHit = Array.from(
           container.querySelectorAll("[data-ohw-href-key]")
-        ).find((el) => {
+        ).filter((el) => {
           if (!isNavigationItem2(el) || isNavbarButton2(el)) return false;
+          if (!isNavItemPointerTarget(el)) return false;
           const itemRect = el.getBoundingClientRect();
           return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
-        });
+        }).sort((a, b) => {
+          const ar = a.getBoundingClientRect();
+          const br = b.getBoundingClientRect();
+          return ar.width * ar.height - br.width * br.height;
+        })[0];
         if (navItemHit) {
           hoveredNavContainerRef.current = null;
           setHoveredNavContainerRect(null);
@@ -12127,6 +12741,7 @@ function OhhwellsBridge() {
         const textEditable = Array.from(
           document.querySelectorAll(NON_MEDIA_SELECTOR)
         ).find((el) => {
+          if (el.closest("[data-ohw-nav-children]") && !getNavigationItemAnchor(el)) return false;
           const er = el.getBoundingClientRect();
           return x2 >= er.left && x2 <= er.right && y2 >= er.top && y2 <= er.bottom;
         });
@@ -12139,6 +12754,25 @@ function OhhwellsBridge() {
           imageShowTimerRef.current = null;
         }
         if (textEditable) {
+          const navAnchor = getNavigationItemAnchor(textEditable);
+          if (navAnchor && !textEditable.hasAttribute("contenteditable")) {
+            if (hoveredImageRef.current) {
+              hoveredImageRef.current = null;
+              hoveredImageHasTextOverlapRef.current = false;
+              resumeAnimTracks();
+              clearImageHover();
+            }
+            document.querySelectorAll("[data-ohw-hovered]").forEach(
+              (el) => el.removeAttribute("data-ohw-hovered")
+            );
+            const selected = selectedElRef.current;
+            if (selected !== navAnchor && !selected?.contains(navAnchor)) {
+              clearHrefKeyHover(navAnchor);
+              hoveredItemElRef.current = navAnchor;
+              setHoveredItemRect(navAnchor.getBoundingClientRect());
+            }
+            return;
+          }
           if (textEditable.hasAttribute("contenteditable")) {
             if (hoveredImageRef.current) {
               hoveredImageRef.current = null;
@@ -12154,7 +12788,7 @@ function OhhwellsBridge() {
               showImageHover(imgEl, isDragOver, true);
             }
             document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-            if (textEditable && !isInsideNavigationItem(textEditable)) {
+            if (textEditable && !textEditable.closest("[data-ohw-href-key]")) {
               textEditable.setAttribute("data-ohw-hovered", "");
             }
             return;
@@ -12166,7 +12800,7 @@ function OhhwellsBridge() {
             clearImageHover();
           }
           document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-          if (textEditable && !isInsideNavigationItem(textEditable)) {
+          if (textEditable && !textEditable.closest("[data-ohw-href-key]")) {
             textEditable.setAttribute("data-ohw-hovered", "");
           }
           return;
@@ -12205,9 +12839,28 @@ function OhhwellsBridge() {
           clearImageHover();
         }
         const { x: x2, y: y2 } = toProbeCoords(clientX, clientY, fromParentViewport);
+        const navLinkHit = Array.from(
+          document.querySelectorAll("nav [data-ohw-href-key], footer [data-ohw-href-key]")
+        ).find((el) => {
+          if (!isNavigationItem2(el) || isNavbarButton2(el)) return false;
+          if (!isNavItemPointerTarget(el)) return false;
+          const er = el.getBoundingClientRect();
+          return x2 >= er.left && x2 <= er.right && y2 >= er.top && y2 <= er.bottom;
+        });
+        if (navLinkHit) {
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          const selected = selectedElRef.current;
+          if (selected !== navLinkHit && !selected?.contains(navLinkHit)) {
+            clearHrefKeyHover(navLinkHit);
+            hoveredItemElRef.current = navLinkHit;
+            setHoveredItemRect(navLinkHit.getBoundingClientRect());
+          }
+          return;
+        }
         const textEl = Array.from(
           document.querySelectorAll(NON_MEDIA_SELECTOR)
         ).find((el) => {
+          if (el.closest("[data-ohw-nav-children]") && !getNavigationItemAnchor(el)) return false;
           const er = el.getBoundingClientRect();
           return x2 >= er.left && x2 <= er.right && y2 >= er.top && y2 <= er.bottom;
         });
@@ -12221,10 +12874,13 @@ function OhhwellsBridge() {
               hoveredItemElRef.current = navAnchor;
               setHoveredItemRect(navAnchor.getBoundingClientRect());
             }
-          } else {
+          } else if (!textEl.closest("[data-ohw-href-key]")) {
             hoveredItemElRef.current = null;
             setHoveredItemRect(null);
             textEl.setAttribute("data-ohw-hovered", "");
+          } else {
+            hoveredItemElRef.current = null;
+            setHoveredItemRect(null);
           }
         } else {
           hoveredItemElRef.current = null;
@@ -12603,7 +13259,9 @@ function OhhwellsBridge() {
           return;
         }
         const parent = getNavigationSelectionParent(selectedElRef.current);
-        if (parent && isNavigationContainer(parent)) {
+        if (parent && isNavigationItem2(parent)) {
+          selectRef.current(parent);
+        } else if (parent && isNavigationContainer(parent)) {
           selectFrameRef.current(parent);
         } else {
           deselectRef.current();
@@ -12636,7 +13294,10 @@ function OhhwellsBridge() {
           return;
         }
         const parent = getNavigationSelectionParent(selectedElRef.current);
-        if (parent && isNavigationContainer(parent)) {
+        if (parent && isNavigationItem2(parent)) {
+          e.preventDefault();
+          selectRef.current(parent);
+        } else if (parent && isNavigationContainer(parent)) {
           e.preventDefault();
           selectFrameRef.current(parent);
         } else {
@@ -13417,11 +14078,19 @@ function OhhwellsBridge() {
       return;
     }
     const parent = getNavigationSelectionParent(selected);
-    if (parent && isNavigationContainer(parent)) {
-      selectFrameRef.current(parent);
-    } else {
+    if (!parent) {
       deselectRef.current();
+      return;
+    }
+    if (isNavigationItem2(parent)) {
+      selectRef.current(parent);
+      return;
+    }
+    if (isNavigationContainer(parent)) {
+      selectFrameRef.current(parent);
+      return;
     }
+    deselectRef.current();
   }, []);
   const handleDuplicateSelected = (0, import_react11.useCallback)(() => {
     const selected = selectedElRef.current;
@@ -13552,13 +14221,13 @@ function OhhwellsBridge() {
           href = trimmed;
         }
         const afterAnchor = addNavAfterAnchorRef.current;
-        const { anchor, hrefKey, labelKey, index, order } = insertNavbarItem(href, label, afterAnchor);
+        const { anchor: anchor2, hrefKey, labelKey, index } = insertNavbarItem(href, label, afterAnchor);
         applyLinkByKey(hrefKey, href);
         document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
           el.textContent = label;
         });
         const navCount = String(index + 1);
-        const orderJson = JSON.stringify(order);
+        const orderJson = getNavbarOrderJson();
         editContentRef.current = {
           ...editContentRef.current,
           [hrefKey]: href,
@@ -13580,16 +14249,22 @@ function OhhwellsBridge() {
         setLinkPopover(null);
         enforceLinkHrefs();
         requestAnimationFrame(() => {
-          selectRef.current(anchor);
+          selectRef.current(anchor2);
         });
         return;
       }
       const { key } = session;
       applyLinkByKey(key, target);
+      editContentRef.current = { ...editContentRef.current, [key]: target };
       postToParent2({ type: "ow:change", nodes: [{ key, text: target }] });
+      const anchor = document.querySelector(`[data-ohw-href-key="${CSS.escape(key)}"]`) ?? null;
+      if (target.trim()) {
+        if (anchor) maybeWarnNavLinkDropdownConflict(anchor);
+        postToParent2({ type: "ow:toast", title: "Link added", toastType: "success" });
+      }
       setLinkPopover(null);
     },
-    [postToParent2, sitePages, sectionsByPath]
+    [maybeWarnNavLinkDropdownConflict, postToParent2, sitePages, sectionsByPath]
   );
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
@@ -13734,15 +14409,18 @@ function OhhwellsBridge() {
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
+              onAddItem: handleAddChildItem,
               onSelectParent: handleSelectParent,
               onDuplicate: handleDuplicateSelected,
               onDelete: handleDeleteSelected,
-              addItemDisabled: true,
+              addItemDisabled: false,
               editLinkDisabled: false,
               moreDisabled: false,
               duplicateDisabled: isFooterFrameSelection,
               showEditLink: !isFooterFrameSelection,
-              showAddItem: !selectedIsCta && !isFooterFrameSelection,
+              showAddItem: isFooterFrameSelection || !selectedIsCta && Boolean(
+                selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)
+              ),
               showMore: !selectedIsCta || isFooterFrameSelection
             }
           ) : void 0